diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index ced7aeb51..618d7c0c2 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -229,3 +229,11 @@ Visually Hidden + +{# Theming #} +

Theming

+ \ No newline at end of file diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md new file mode 100644 index 000000000..637064bf5 --- /dev/null +++ b/docs/docs/theming/color.md @@ -0,0 +1,631 @@ +--- +title: Color +description: Ensure consistent color usage with readable contrast with color properties. +layout: page.njk +--- + + + +intro + +## Literal colors + +Literal colors are the lowest-level color properties in your theme. Each color is identified by a name, like red or gray, and a number that roughly corresponds to the color's perceived lightness. On this scale, 100 is the equivalent of pure white and 0 is the equivalent of pure black. Web Awesome defines 10 colors each with 11 lightness steps using the format `--wa-color-{name}-{#}`. + +For easy WCAG 2.1 conformance, the lightness values between colors have a strong correlation to [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance). To achieve accessible contrast ratios, even across hues, calculate the difference between the lightness values of any two colors: + +- A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio, sufficient for large text and icons (AA). +- A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio, sufficient for normal text (AA) and large text (AAA). +- A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio, sufficient for all text (AAA). + +
Rose
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Red
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Yellow
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Lime
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Green
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Teal
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Blue
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Indigo
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Violet
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Gray
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +### Primary and Base Colors + +We extend the palette of literal colors with two pseudo-literal color groups: + +- **Primary** is your key brand color used to draw attention and designate actions. +- **Base** makes up the your content's body and structure. + +The primary and base color groups reference another literal color group. By default, `--wa-color-primary-{#}` maps to `--wa-color-blue-{#}` and `--wa-color-base-{#}` maps to `--wa-color-gray-{#}`. + +
Primary
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +
Base
+
+
+
+ 95 +
+
+
+ 90 +
+
+
+ 80 +
+
+
+ 70 +
+
+
+ 60 +
+
+
+ 50 +
+
+
+ 40 +
+
+
+ 30 +
+
+
+ 20 +
+
+
+ 10 +
+
+
+ 05 +
+
+ +## Foundational Colors + +content - describe surfaces, overlays, text, etc. - all the colors to build the foundation of your theme + +## Semantic Colors + +content - describe brand, success, warning, danger, neutral \ No newline at end of file