initialize framework for contextual theming and "dark mode" development
Doesn't define "dark mode" theme. (It only provides a template.)
Light theme will be used as a guinea pig for vetting out the theming framework/API
removed deprecated theme.* variables
refactored/renamed several color variables
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.*
variablesColor 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.