IMPROVED: Standardize Increment Direction for Transparent Variants

Feature Requests / Improvements
1

image
image1299×278 14.4 KB

Hi Bricks Team,

I noticed an inconsistency in how color variants are generated. Currently, Dark and Light shades follow a logical progression, but Transparent variants seem reversed.

Current Behavior:

  • Dark shades (d-1 to d-5): Progresses to be darker (Effect increases with number).

  • Light shades (l-1 to l-5): Progresses to be lighter (Effect increases with number).

  • Transparent shades (t-1 to t-10): Progresses from Darkest/Opaque to Lightest/Transparent.

The Issue: While Dark and Light variants start with the subtle change at “-1,” the Transparent variants start with the heaviest opacity at “t-1” (approx. 90% or darkest) and end with the most transparent at “t-10” (approx. 10% or lightest). This breaks the mental model established by the other shade generators.

Suggestion: Reverse the Transparent variant logic so the step number correlates with the intensity of the transparency (the “lightness”):

  • t-1: 10% Opacity (Lightest)

  • t-5: 50% Opacity

  • t-10: 100% Opacity (or 90%)

This would make the workflow much more intuitive when switching between generating shades and generating transparencies.

2

Or maybe use a more common naming like variable-10 for 10% transparency, variable-70 for 70% transparency, etc. This will make it more predictable to use.

Thanks

3

Hi Adit,
Thanks so much for this suggestion for improvement!

We agree, and flip the order in the next version, so that you start with the highest transparency (e.g. 0.09) and decrease it with each step, i.e., it becomes less transparent (e.g. 0.91).

That would only work if the number of steps were fixed. But since you can change them, the value changes each time, depending on the number of steps.

General rule of thumb from the next version onwards:
The smaller the number, the higher the transparency.

Best regards,
timmse

4

We added this improvement in Bricks 2.2 RC2, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any pre-stable release, please do not use it on a production website. It is intended for testing in a local or staging environment only.