From 33c859a8ca29ff6d2a1cad9c7fa8ff2d46cb8748 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Wed, 12 Jun 2024 16:11:02 -0400 Subject: [PATCH] remove primary and base color aliases --- docs/docs/theming/color.md | 105 ----------------------------- src/themes/default.css | 131 +++++++++++++++---------------------- 2 files changed, 52 insertions(+), 184 deletions(-) diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md index 69df78cc0..b70285fdc 100644 --- a/docs/docs/theming/color.md +++ b/docs/docs/theming/color.md @@ -405,111 +405,6 @@ Web Awesome defines seven literal colors each with 11 lightness values using the Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme. -### Key Colors - -Web Awesome provides aliases for two literal color groups to aid changing the key colors of your project: - -- **Primary** is used to draw attention and signify actions -- **Base** makes up your project's body and structure - -By default, `--wa-color-primary-{#}` references `--wa-color-blue-{#}` and `--wa-color-base-{#}` references `--wa-color-gray-{#}`. - -
Primary
- - -
Base
- - ### Surfaces Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells). diff --git a/src/themes/default.css b/src/themes/default.css index 229f5897f..339e50379 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -99,63 +99,35 @@ * Foundational Colors */ - /* Primary is a key color used to draw attention and signify actions. - * Primary colors should be a 1-to-1 map with a literal color group. */ - --wa-color-primary-95: var(--wa-color-blue-95); - --wa-color-primary-90: var(--wa-color-blue-90); - --wa-color-primary-80: var(--wa-color-blue-80); - --wa-color-primary-70: var(--wa-color-blue-70); - --wa-color-primary-60: var(--wa-color-blue-60); - --wa-color-primary-50: var(--wa-color-blue-50); - --wa-color-primary-40: var(--wa-color-blue-40); - --wa-color-primary-30: var(--wa-color-blue-30); - --wa-color-primary-20: var(--wa-color-blue-20); - --wa-color-primary-10: var(--wa-color-blue-10); - --wa-color-primary-05: var(--wa-color-blue-05); - - /* Base is a key color that makes up your project's body and structure. - * Base colors should be a 1-to-1 map with a literal color group, usually gray. */ - --wa-color-base-95: var(--wa-color-gray-95); - --wa-color-base-90: var(--wa-color-gray-90); - --wa-color-base-80: var(--wa-color-gray-80); - --wa-color-base-70: var(--wa-color-gray-70); - --wa-color-base-60: var(--wa-color-gray-60); - --wa-color-base-50: var(--wa-color-gray-50); - --wa-color-base-40: var(--wa-color-gray-40); - --wa-color-base-30: var(--wa-color-gray-30); - --wa-color-base-20: var(--wa-color-gray-20); - --wa-color-base-10: var(--wa-color-gray-10); - --wa-color-base-05: var(--wa-color-gray-05); - /* Surfaces are background layers that other content rests on. * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */ --wa-color-surface-raised: white; --wa-color-surface-default: white; - --wa-color-surface-lowered: var(--wa-color-base-95); - --wa-color-surface-border: var(--wa-color-base-90); + --wa-color-surface-lowered: var(--wa-color-gray-95); + --wa-color-surface-border: var(--wa-color-gray-90); /* Text colors are used for standard text elements. * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */ - --wa-color-text-normal: var(--wa-color-base-10); - --wa-color-text-quiet: var(--wa-color-base-40); - --wa-color-text-link: var(--wa-color-primary-40); + --wa-color-text-normal: var(--wa-color-gray-10); + --wa-color-text-quiet: var(--wa-color-gray-40); + --wa-color-text-link: var(--wa-color-blue-40); /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */ - --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-05) 50%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-80) 20%, transparent); + --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent); + --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent); /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties. * By default, the opacity of your shadow color is tied to the blur of shadows in your theme. * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */ --wa-color-shadow: color-mix( in oklab, - var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%), + var(--wa-color-gray-05) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%), transparent ); /* Focus color provides the default color of the focus ring for predictable keyboard navigation. * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */ - --wa-color-focus: var(--wa-color-primary-60); + --wa-color-focus: var(--wa-color-blue-60); /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */ --wa-color-mix-hover: black 16%; @@ -170,14 +142,14 @@ * * On for content displayed on a fill with the corresponding attention * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most. */ - --wa-color-brand-fill-quiet: var(--wa-color-primary-95); - --wa-color-brand-fill-normal: var(--wa-color-primary-90); - --wa-color-brand-fill-loud: var(--wa-color-primary-50); - --wa-color-brand-border-quiet: var(--wa-color-primary-90); - --wa-color-brand-border-normal: var(--wa-color-primary-80); - --wa-color-brand-border-loud: var(--wa-color-primary-60); - --wa-color-brand-on-quiet: var(--wa-color-primary-40); - --wa-color-brand-on-normal: var(--wa-color-primary-30); + --wa-color-brand-fill-quiet: var(--wa-color-blue-95); + --wa-color-brand-fill-normal: var(--wa-color-blue-90); + --wa-color-brand-fill-loud: var(--wa-color-blue-50); + --wa-color-brand-border-quiet: var(--wa-color-blue-90); + --wa-color-brand-border-normal: var(--wa-color-blue-80); + --wa-color-brand-border-loud: var(--wa-color-blue-60); + --wa-color-brand-on-quiet: var(--wa-color-blue-40); + --wa-color-brand-on-normal: var(--wa-color-blue-30); --wa-color-brand-on-loud: white; --wa-color-success-fill-quiet: var(--wa-color-green-95); @@ -210,14 +182,14 @@ --wa-color-danger-on-normal: var(--wa-color-red-30); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: var(--wa-color-base-95); - --wa-color-neutral-fill-normal: var(--wa-color-base-90); - --wa-color-neutral-fill-loud: var(--wa-color-base-20); - --wa-color-neutral-border-quiet: var(--wa-color-base-90); - --wa-color-neutral-border-normal: var(--wa-color-base-80); - --wa-color-neutral-border-loud: var(--wa-color-base-60); - --wa-color-neutral-on-quiet: var(--wa-color-base-40); - --wa-color-neutral-on-normal: var(--wa-color-base-30); + --wa-color-neutral-fill-quiet: var(--wa-color-gray-95); + --wa-color-neutral-fill-normal: var(--wa-color-gray-90); + --wa-color-neutral-fill-loud: var(--wa-color-gray-20); + --wa-color-neutral-border-quiet: var(--wa-color-gray-90); + --wa-color-neutral-border-normal: var(--wa-color-gray-80); + --wa-color-neutral-border-loud: var(--wa-color-gray-60); + --wa-color-neutral-on-quiet: var(--wa-color-gray-40); + --wa-color-neutral-on-normal: var(--wa-color-gray-30); --wa-color-neutral-on-loud: white; /** @@ -356,6 +328,7 @@ /** * Z-index + * TODO: use exact values and remove these properties */ --wa-z-index-dropdown: 900; --wa-z-index-toast: 990; @@ -383,7 +356,7 @@ --wa-form-control-value-font-weight: var(--wa-font-weight-body); --wa-form-control-value-line-height: var(--wa-line-height-condensed); - --wa-form-control-placeholder-color: var(--wa-color-base-60); + --wa-form-control-placeholder-color: var(--wa-color-gray-60); --wa-form-control-height-s: calc( var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height) @@ -423,21 +396,21 @@ /** * Foundational Colors */ - --wa-color-surface-raised: var(--wa-color-base-10); - --wa-color-surface-default: var(--wa-color-base-05); + --wa-color-surface-raised: var(--wa-color-gray-10); + --wa-color-surface-default: var(--wa-color-gray-05); --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%); - --wa-color-surface-border: var(--wa-color-base-20); + --wa-color-surface-border: var(--wa-color-gray-20); - --wa-color-text-normal: var(--wa-color-base-95); - --wa-color-text-quiet: var(--wa-color-base-60); - --wa-color-text-link: var(--wa-color-primary-70); + --wa-color-text-normal: var(--wa-color-gray-95); + --wa-color-text-quiet: var(--wa-color-gray-60); + --wa-color-text-link: var(--wa-color-blue-70); --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent); - --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 10%, transparent); + --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent); --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent); - --wa-color-focus: var(--wa-color-primary-60); + --wa-color-focus: var(--wa-color-blue-60); --wa-color-mix-hover: black 8%; --wa-color-mix-active: black 16%; @@ -445,14 +418,14 @@ /** * Semantic Colors */ - --wa-color-brand-fill-quiet: var(--wa-color-primary-10); - --wa-color-brand-fill-normal: var(--wa-color-primary-20); - --wa-color-brand-fill-loud: var(--wa-color-primary-50); - --wa-color-brand-border-quiet: var(--wa-color-primary-20); - --wa-color-brand-border-normal: var(--wa-color-primary-30); - --wa-color-brand-border-loud: var(--wa-color-primary-40); - --wa-color-brand-on-quiet: var(--wa-color-primary-60); - --wa-color-brand-on-normal: var(--wa-color-primary-70); + --wa-color-brand-fill-quiet: var(--wa-color-blue-10); + --wa-color-brand-fill-normal: var(--wa-color-blue-20); + --wa-color-brand-fill-loud: var(--wa-color-blue-50); + --wa-color-brand-border-quiet: var(--wa-color-blue-20); + --wa-color-brand-border-normal: var(--wa-color-blue-30); + --wa-color-brand-border-loud: var(--wa-color-blue-40); + --wa-color-brand-on-quiet: var(--wa-color-blue-60); + --wa-color-brand-on-normal: var(--wa-color-blue-70); --wa-color-brand-on-loud: white; --wa-color-success-fill-quiet: var(--wa-color-green-10); @@ -485,13 +458,13 @@ --wa-color-danger-on-normal: var(--wa-color-red-70); --wa-color-danger-on-loud: white; - --wa-color-neutral-fill-quiet: var(--wa-color-base-10); - --wa-color-neutral-fill-normal: var(--wa-color-base-20); - --wa-color-neutral-fill-loud: var(--wa-color-base-90); - --wa-color-neutral-border-quiet: var(--wa-color-base-20); - --wa-color-neutral-border-normal: var(--wa-color-base-30); - --wa-color-neutral-border-loud: var(--wa-color-base-40); - --wa-color-neutral-on-quiet: var(--wa-color-base-60); - --wa-color-neutral-on-normal: var(--wa-color-base-70); - --wa-color-neutral-on-loud: var(--wa-color-base-05); + --wa-color-neutral-fill-quiet: var(--wa-color-gray-10); + --wa-color-neutral-fill-normal: var(--wa-color-gray-20); + --wa-color-neutral-fill-loud: var(--wa-color-gray-90); + --wa-color-neutral-border-quiet: var(--wa-color-gray-20); + --wa-color-neutral-border-normal: var(--wa-color-gray-30); + --wa-color-neutral-border-loud: var(--wa-color-gray-40); + --wa-color-neutral-on-quiet: var(--wa-color-gray-60); + --wa-color-neutral-on-normal: var(--wa-color-gray-70); + --wa-color-neutral-on-loud: var(--wa-color-gray-05); }