hashicorp / structure

Structure (aka "PDS") [deprecated]
https://hashicorp-structure.vercel.app
Mozilla Public License 2.0
24 stars 5 forks source link

[WIP] feat!(pds-ember): refactor PDS.Theme #25

Closed CITguy closed 3 years ago

CITguy commented 3 years ago

Color Naming

Several variables in different color families have been renamed (with deprecation aliases) to use a naming convention based on contrast instead of brightness. To illustrated the need for this change, let's look at an example.

The Problem $success-l1 (a.k.a., "success / light") makes sense in context with a Light theme, because the color is lighter than the base color ($success-base) in order to reduce contrast against the primary background color (white). However, the same terminology doesn't work if used in context with a Dark theme. While it is still brighter than its base color, going from "base" to "light" no longer reduces contrast, as it did previously in the Light theme. Instead, it had the opposite affect because "lighter" colors stand out more on a dark background (i.e., higher contrast). If a component were to apply colors based on the theme, this contrast inversion would require remapping tints and shades for each component that wanted to use the dark theme. This problem becomes exponentially worse as more components and themes are added.

The Solution Instead of "light" and "dark" terminology, we now use "dim" and "amp" (short for "dimmed" and "amped" respectively). This naming convention helps define a semantic relationship between a base color and one of its variants. Dimmed colors have less contrast than their base color in comparison with the applied theme background color. Conversely, amped colors have more contrast than their base color. For example, if a "light" theme is applied, dimmed colors are brighter (because they blend in with the white/bright background) and amped colors are darker (because they stand out more on a white background). Conversely, if a "dark" theme is applied, dimmed colors are darker (blending into the black/dark background) and amped colors are brighter (standing out on black/dark background).

Using this terminology, UI components can use a dimmed color and be confident that no matter which theme is applied, it will have a lower contrast than its base. As long as themes follows this rule for contrast, components can seamlessly apply a theme with no additional modification.

Theme Dimmed Amped
Light less contrast (brighter) more contrast (darker)
Dark less contrast (darker) more contrast (brighter)
CITguy commented 3 years ago

Closing. Grossly out of date.