From 24a76f6a7cf1560c2c20c5eb2c138512f8632b02 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Tue, 14 Jan 2025 14:54:34 -0500 Subject: [PATCH] Color palette housekeeping (#523) --- docs/docs/themes/active.md | 1 + docs/docs/themes/awesome.md | 1 + docs/docs/themes/brutalist.md | 1 + docs/docs/themes/classic.md | 1 + docs/docs/themes/default.md | 1 + docs/docs/themes/glassy.md | 1 + docs/docs/themes/mellow.md | 1 + docs/docs/themes/playful.md | 1 + docs/docs/themes/premium.md | 1 + docs/docs/themes/tailspin.md | 1 + src/styles/color/default.css | 106 +++++++ src/styles/themes/active.css | 2 +- src/styles/themes/awesome.css | 2 +- src/styles/themes/brutalist.css | 2 +- src/styles/themes/classic.css | 2 +- src/styles/themes/default.css | 2 +- src/styles/themes/default/color-semantic.css | 190 ------------- src/styles/themes/default/color.css | 274 ++++++++++++------- src/styles/themes/glassy.css | 2 +- src/styles/themes/mellow.css | 2 +- src/styles/themes/playful.css | 2 +- src/styles/themes/premium.css | 2 +- src/styles/themes/tailspin.css | 2 +- 23 files changed, 305 insertions(+), 295 deletions(-) create mode 100644 src/styles/color/default.css delete mode 100644 src/styles/themes/default/color-semantic.css diff --git a/docs/docs/themes/active.md b/docs/docs/themes/active.md index bf8d99fde..56b5ec859 100644 --- a/docs/docs/themes/active.md +++ b/docs/docs/themes/active.md @@ -3,4 +3,5 @@ title: Active description: Energetic and tactile, always in motion. isPro: true tags: pro +defaultPalette: rudimentary --- diff --git a/docs/docs/themes/awesome.md b/docs/docs/themes/awesome.md index 019d31a48..4aac45b44 100644 --- a/docs/docs/themes/awesome.md +++ b/docs/docs/themes/awesome.md @@ -2,4 +2,5 @@ title: Awesome description: Punchy and vibrant, the rockstar of themes. order: 0.2 +defaultPalette: bright --- diff --git a/docs/docs/themes/brutalist.md b/docs/docs/themes/brutalist.md index a38b4382d..721c471ce 100644 --- a/docs/docs/themes/brutalist.md +++ b/docs/docs/themes/brutalist.md @@ -3,4 +3,5 @@ title: Brutalist description: Sharp, square, and unapologetically bold. isPro: true tags: pro +defaultPalette: default --- diff --git a/docs/docs/themes/classic.md b/docs/docs/themes/classic.md index 6cbd4e397..0aac2ddb1 100644 --- a/docs/docs/themes/classic.md +++ b/docs/docs/themes/classic.md @@ -2,4 +2,5 @@ title: Classic description: Timeless elegance that never goes out of style. order: 0.1 +defaultPalette: classic --- diff --git a/docs/docs/themes/default.md b/docs/docs/themes/default.md index ad302846b..9921a6800 100644 --- a/docs/docs/themes/default.md +++ b/docs/docs/themes/default.md @@ -2,4 +2,5 @@ title: Default description: Your trusty companion, like a perfectly broken-in pair of jeans. order: 0 +defaultPalette: default --- diff --git a/docs/docs/themes/glassy.md b/docs/docs/themes/glassy.md index a008d30a8..03d906e57 100644 --- a/docs/docs/themes/glassy.md +++ b/docs/docs/themes/glassy.md @@ -4,4 +4,5 @@ description: Smooth, sleek, and reflective. isPro: true tags: pro noAlpha: true +defaultPalette: elegant --- diff --git a/docs/docs/themes/mellow.md b/docs/docs/themes/mellow.md index ebd2fb8af..0e36cf890 100644 --- a/docs/docs/themes/mellow.md +++ b/docs/docs/themes/mellow.md @@ -3,4 +3,5 @@ title: Mellow description: Soft and soothing, like a lazy Sunday morning. isPro: true tags: pro +defaultPalette: natural --- diff --git a/docs/docs/themes/playful.md b/docs/docs/themes/playful.md index 007bfa2b2..3b82b1ef1 100644 --- a/docs/docs/themes/playful.md +++ b/docs/docs/themes/playful.md @@ -4,4 +4,5 @@ description: Fun, colorful, and full of personality. isPro: true tags: pro noAlpha: true +defaultPalette: rudimentary --- diff --git a/docs/docs/themes/premium.md b/docs/docs/themes/premium.md index 3a19ee778..025ecfcbe 100644 --- a/docs/docs/themes/premium.md +++ b/docs/docs/themes/premium.md @@ -3,4 +3,5 @@ title: Premium description: The ultimate in sophistication and style. isPro: true tags: pro +defaultPalette: anodized --- diff --git a/docs/docs/themes/tailspin.md b/docs/docs/themes/tailspin.md index 10ae2984f..0b6331597 100644 --- a/docs/docs/themes/tailspin.md +++ b/docs/docs/themes/tailspin.md @@ -3,4 +3,5 @@ title: Tailspin description: Like a bird in flight, guiding you from there to here. isPro: true tags: pro +defaultPalette: vogue --- diff --git a/src/styles/color/default.css b/src/styles/color/default.css new file mode 100644 index 000000000..b849cb83c --- /dev/null +++ b/src/styles/color/default.css @@ -0,0 +1,106 @@ +/** + * Literal Colors + * Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black. + * Each lightness value has nearly uniform WCAG 2.1 contrast across hues. + * A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio. + * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio. + * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio. + */ +:where(:root), +:host { + --wa-color-red-95: #ffefef; + --wa-color-red-90: #ffdddc; + --wa-color-red-80: #ffb7b6; + --wa-color-red-70: #fc9090; + --wa-color-red-60: #f2676c; + --wa-color-red-50: #de2d44; + --wa-color-red-40: #b11036; + --wa-color-red-30: #861a2f; + --wa-color-red-20: #641122; + --wa-color-red-10: #400712; + --wa-color-red-05: #2a030a; + + --wa-color-yellow-95: #fdf3ba; + --wa-color-yellow-90: #fee590; + --wa-color-yellow-80: #fcc041; + --wa-color-yellow-70: #f39b00; + --wa-color-yellow-60: #e07b00; + --wa-color-yellow-50: #bb5a00; + --wa-color-yellow-40: #924200; + --wa-color-yellow-30: #743200; + --wa-color-yellow-20: #572300; + --wa-color-yellow-10: #361300; + --wa-color-yellow-05: #240b00; + + --wa-color-green-95: #e2f9e2; + --wa-color-green-90: #c2f2c1; + --wa-color-green-80: #92da97; + --wa-color-green-70: #5dc36f; + --wa-color-green-60: #00ac49; + --wa-color-green-50: #008825; + --wa-color-green-40: #006800; + --wa-color-green-30: #005300; + --wa-color-green-20: #003c00; + --wa-color-green-10: #002400; + --wa-color-green-05: #001700; + + --wa-color-teal-95: #e3f7f5; + --wa-color-teal-90: #c6eeeb; + --wa-color-teal-80: #81d9d3; + --wa-color-teal-70: #34c2b9; + --wa-color-teal-60: #10a69d; + --wa-color-teal-50: #00837c; + --wa-color-teal-40: #00645e; + --wa-color-teal-30: #004e49; + --wa-color-teal-20: #003935; + --wa-color-teal-10: #002220; + --wa-color-teal-05: #001513; + + --wa-color-blue-95: #ebf4ff; + --wa-color-blue-90: #d4e7ff; + --wa-color-blue-80: #a6ccff; + --wa-color-blue-70: #77b1ff; + --wa-color-blue-60: #4895fd; + --wa-color-blue-50: #0070ef; + --wa-color-blue-40: #0055b8; + --wa-color-blue-30: #004390; + --wa-color-blue-20: #00306c; + --wa-color-blue-10: #001c45; + --wa-color-blue-05: #00112f; + + --wa-color-indigo-95: #f0f2fe; + --wa-color-indigo-90: #e2e4fc; + --wa-color-indigo-80: #c2c6f8; + --wa-color-indigo-70: #a5a9f2; + --wa-color-indigo-60: #8a8beb; + --wa-color-indigo-50: #6b65e2; + --wa-color-indigo-40: #5246c1; + --wa-color-indigo-30: #412eaa; + --wa-color-indigo-20: #321393; + --wa-color-indigo-10: #1c006a; + --wa-color-indigo-05: #130049; + + --wa-color-violet-95: #f9effd; + --wa-color-violet-90: #f4defb; + --wa-color-violet-80: #e7baf7; + --wa-color-violet-70: #d996ef; + --wa-color-violet-60: #c674e1; + --wa-color-violet-50: #a94dc6; + --wa-color-violet-40: #8732a1; + --wa-color-violet-30: #6d2283; + --wa-color-violet-20: #521564; + --wa-color-violet-10: #330940; + --wa-color-violet-05: #22042b; + + --wa-color-gray-95: #f1f2f3; + --wa-color-gray-90: #e4e5e9; + --wa-color-gray-80: #c7c9d0; + --wa-color-gray-70: #abaeb9; + --wa-color-gray-60: #9194a2; + --wa-color-gray-50: #717584; + --wa-color-gray-40: #545868; + --wa-color-gray-30: #424554; + --wa-color-gray-20: #2f323f; + --wa-color-gray-10: #1b1d26; + --wa-color-gray-05: #101219; +} diff --git a/src/styles/themes/active.css b/src/styles/themes/active.css index d7eaae737..2f1c24605 100644 --- a/src/styles/themes/active.css +++ b/src/styles/themes/active.css @@ -1,5 +1,5 @@ @import url('../color/rudimentary.css'); -@import url('default/color-semantic.css'); +@import url('default/color.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css'); diff --git a/src/styles/themes/awesome.css b/src/styles/themes/awesome.css index a6125c3d4..3f73de94d 100644 --- a/src/styles/themes/awesome.css +++ b/src/styles/themes/awesome.css @@ -1,5 +1,5 @@ @import url('../color/bright.css'); -@import url('default/color-semantic.css'); +@import url('default/color.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css'); diff --git a/src/styles/themes/brutalist.css b/src/styles/themes/brutalist.css index 5006ba89f..049632d1a 100644 --- a/src/styles/themes/brutalist.css +++ b/src/styles/themes/brutalist.css @@ -1,5 +1,5 @@ +@import url('../color/default.css'); @import url('default/color.css'); -@import url('default/color-semantic.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css'); diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css index a18e4e964..33ec49748 100644 --- a/src/styles/themes/classic.css +++ b/src/styles/themes/classic.css @@ -1,5 +1,5 @@ @import url('../color/classic.css'); -@import url('default/color-semantic.css'); +@import url('default/color.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css'); diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css index 7744ccf91..0cb6fb369 100644 --- a/src/styles/themes/default.css +++ b/src/styles/themes/default.css @@ -1,5 +1,5 @@ +@import url('../color/default.css'); @import url('default/color.css'); -@import url('default/color-semantic.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css'); diff --git a/src/styles/themes/default/color-semantic.css b/src/styles/themes/default/color-semantic.css deleted file mode 100644 index b81826b41..000000000 --- a/src/styles/themes/default/color-semantic.css +++ /dev/null @@ -1,190 +0,0 @@ -/** - * Foundational Colors and Semantic Colors - */ -:where(:root), -:host, -.wa-theme-default, -.wa-light, -.wa-dark .wa-invert { - /** - * Foundational Colors - */ - - /* 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-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-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-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-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 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-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 10%; - --wa-color-mix-active: black 20%; - - /** - * Semantic Colors - * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results. - * Within these groups, each color specifies a role - - * * Fill for background colors or areas larger than a few pixels - * * Border for borders, dividers, and other stroke-like elements - * * 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-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); - --wa-color-success-fill-normal: var(--wa-color-green-90); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-90); - --wa-color-success-border-normal: var(--wa-color-green-80); - --wa-color-success-border-loud: var(--wa-color-green-60); - --wa-color-success-on-quiet: var(--wa-color-green-40); - --wa-color-success-on-normal: var(--wa-color-green-30); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: var(--wa-color-yellow-95); - --wa-color-warning-fill-normal: var(--wa-color-yellow-90); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: var(--wa-color-yellow-90); - --wa-color-warning-border-normal: var(--wa-color-yellow-80); - --wa-color-warning-border-loud: var(--wa-color-yellow-60); - --wa-color-warning-on-quiet: var(--wa-color-yellow-40); - --wa-color-warning-on-normal: var(--wa-color-yellow-30); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: var(--wa-color-red-95); - --wa-color-danger-fill-normal: var(--wa-color-red-90); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-90); - --wa-color-danger-border-normal: var(--wa-color-red-80); - --wa-color-danger-border-loud: var(--wa-color-red-60); - --wa-color-danger-on-quiet: var(--wa-color-red-40); - --wa-color-danger-on-normal: var(--wa-color-red-30); - --wa-color-danger-on-loud: white; - - --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; -} - -/** need to wrap :host-context() in an :is() selector for unsupported browsers */ -.wa-dark, -.wa-invert, -:is(:host-context(.wa-dark)) { - /** - * Foundational Colors - */ - --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 20%); - --wa-color-surface-border: var(--wa-color-gray-20); - - --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-gray-50) 10%, transparent); - - /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */ - --wa-color-shadow: color-mix( - in oklab, - var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), - transparent - ); - - --wa-color-focus: var(--wa-color-blue-60); - - --wa-color-mix-hover: black 8%; - --wa-color-mix-active: black 16%; - - /** - * Semantic Colors - */ - --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); - --wa-color-success-fill-normal: var(--wa-color-green-20); - --wa-color-success-fill-loud: var(--wa-color-green-50); - --wa-color-success-border-quiet: var(--wa-color-green-20); - --wa-color-success-border-normal: var(--wa-color-green-30); - --wa-color-success-border-loud: var(--wa-color-green-40); - --wa-color-success-on-quiet: var(--wa-color-green-60); - --wa-color-success-on-normal: var(--wa-color-green-70); - --wa-color-success-on-loud: white; - - --wa-color-warning-fill-quiet: var(--wa-color-yellow-10); - --wa-color-warning-fill-normal: var(--wa-color-yellow-20); - --wa-color-warning-fill-loud: var(--wa-color-yellow-50); - --wa-color-warning-border-quiet: var(--wa-color-yellow-20); - --wa-color-warning-border-normal: var(--wa-color-yellow-30); - --wa-color-warning-border-loud: var(--wa-color-yellow-40); - --wa-color-warning-on-quiet: var(--wa-color-yellow-60); - --wa-color-warning-on-normal: var(--wa-color-yellow-70); - --wa-color-warning-on-loud: white; - - --wa-color-danger-fill-quiet: var(--wa-color-red-10); - --wa-color-danger-fill-normal: var(--wa-color-red-20); - --wa-color-danger-fill-loud: var(--wa-color-red-50); - --wa-color-danger-border-quiet: var(--wa-color-red-20); - --wa-color-danger-border-normal: var(--wa-color-red-30); - --wa-color-danger-border-loud: var(--wa-color-red-40); - --wa-color-danger-on-quiet: var(--wa-color-red-60); - --wa-color-danger-on-normal: var(--wa-color-red-70); - --wa-color-danger-on-loud: white; - - --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); -} diff --git a/src/styles/themes/default/color.css b/src/styles/themes/default/color.css index b849cb83c..b81826b41 100644 --- a/src/styles/themes/default/color.css +++ b/src/styles/themes/default/color.css @@ -1,106 +1,190 @@ /** - * Literal Colors - * Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black. - * Each lightness value has nearly uniform WCAG 2.1 contrast across hues. - * A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio. - * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio. - * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio. + * Foundational Colors and Semantic Colors */ :where(:root), -:host { - --wa-color-red-95: #ffefef; - --wa-color-red-90: #ffdddc; - --wa-color-red-80: #ffb7b6; - --wa-color-red-70: #fc9090; - --wa-color-red-60: #f2676c; - --wa-color-red-50: #de2d44; - --wa-color-red-40: #b11036; - --wa-color-red-30: #861a2f; - --wa-color-red-20: #641122; - --wa-color-red-10: #400712; - --wa-color-red-05: #2a030a; +:host, +.wa-theme-default, +.wa-light, +.wa-dark .wa-invert { + /** + * Foundational Colors + */ - --wa-color-yellow-95: #fdf3ba; - --wa-color-yellow-90: #fee590; - --wa-color-yellow-80: #fcc041; - --wa-color-yellow-70: #f39b00; - --wa-color-yellow-60: #e07b00; - --wa-color-yellow-50: #bb5a00; - --wa-color-yellow-40: #924200; - --wa-color-yellow-30: #743200; - --wa-color-yellow-20: #572300; - --wa-color-yellow-10: #361300; - --wa-color-yellow-05: #240b00; + /* 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-gray-95); + --wa-color-surface-border: var(--wa-color-gray-90); - --wa-color-green-95: #e2f9e2; - --wa-color-green-90: #c2f2c1; - --wa-color-green-80: #92da97; - --wa-color-green-70: #5dc36f; - --wa-color-green-60: #00ac49; - --wa-color-green-50: #008825; - --wa-color-green-40: #006800; - --wa-color-green-30: #005300; - --wa-color-green-20: #003c00; - --wa-color-green-10: #002400; - --wa-color-green-05: #001700; + /* 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-gray-10); + --wa-color-text-quiet: var(--wa-color-gray-40); + --wa-color-text-link: var(--wa-color-blue-40); - --wa-color-teal-95: #e3f7f5; - --wa-color-teal-90: #c6eeeb; - --wa-color-teal-80: #81d9d3; - --wa-color-teal-70: #34c2b9; - --wa-color-teal-60: #10a69d; - --wa-color-teal-50: #00837c; - --wa-color-teal-40: #00645e; - --wa-color-teal-30: #004e49; - --wa-color-teal-20: #003935; - --wa-color-teal-10: #002220; - --wa-color-teal-05: #001513; + /* 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-gray-05) 50%, transparent); + --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent); - --wa-color-blue-95: #ebf4ff; - --wa-color-blue-90: #d4e7ff; - --wa-color-blue-80: #a6ccff; - --wa-color-blue-70: #77b1ff; - --wa-color-blue-60: #4895fd; - --wa-color-blue-50: #0070ef; - --wa-color-blue-40: #0055b8; - --wa-color-blue-30: #004390; - --wa-color-blue-20: #00306c; - --wa-color-blue-10: #001c45; - --wa-color-blue-05: #00112f; + /* 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-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%), + transparent + ); - --wa-color-indigo-95: #f0f2fe; - --wa-color-indigo-90: #e2e4fc; - --wa-color-indigo-80: #c2c6f8; - --wa-color-indigo-70: #a5a9f2; - --wa-color-indigo-60: #8a8beb; - --wa-color-indigo-50: #6b65e2; - --wa-color-indigo-40: #5246c1; - --wa-color-indigo-30: #412eaa; - --wa-color-indigo-20: #321393; - --wa-color-indigo-10: #1c006a; - --wa-color-indigo-05: #130049; + /* 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-blue-60); - --wa-color-violet-95: #f9effd; - --wa-color-violet-90: #f4defb; - --wa-color-violet-80: #e7baf7; - --wa-color-violet-70: #d996ef; - --wa-color-violet-60: #c674e1; - --wa-color-violet-50: #a94dc6; - --wa-color-violet-40: #8732a1; - --wa-color-violet-30: #6d2283; - --wa-color-violet-20: #521564; - --wa-color-violet-10: #330940; - --wa-color-violet-05: #22042b; + /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */ + --wa-color-mix-hover: black 10%; + --wa-color-mix-active: black 20%; - --wa-color-gray-95: #f1f2f3; - --wa-color-gray-90: #e4e5e9; - --wa-color-gray-80: #c7c9d0; - --wa-color-gray-70: #abaeb9; - --wa-color-gray-60: #9194a2; - --wa-color-gray-50: #717584; - --wa-color-gray-40: #545868; - --wa-color-gray-30: #424554; - --wa-color-gray-20: #2f323f; - --wa-color-gray-10: #1b1d26; - --wa-color-gray-05: #101219; + /** + * Semantic Colors + * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results. + * Within these groups, each color specifies a role - + * * Fill for background colors or areas larger than a few pixels + * * Border for borders, dividers, and other stroke-like elements + * * 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-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); + --wa-color-success-fill-normal: var(--wa-color-green-90); + --wa-color-success-fill-loud: var(--wa-color-green-50); + --wa-color-success-border-quiet: var(--wa-color-green-90); + --wa-color-success-border-normal: var(--wa-color-green-80); + --wa-color-success-border-loud: var(--wa-color-green-60); + --wa-color-success-on-quiet: var(--wa-color-green-40); + --wa-color-success-on-normal: var(--wa-color-green-30); + --wa-color-success-on-loud: white; + + --wa-color-warning-fill-quiet: var(--wa-color-yellow-95); + --wa-color-warning-fill-normal: var(--wa-color-yellow-90); + --wa-color-warning-fill-loud: var(--wa-color-yellow-50); + --wa-color-warning-border-quiet: var(--wa-color-yellow-90); + --wa-color-warning-border-normal: var(--wa-color-yellow-80); + --wa-color-warning-border-loud: var(--wa-color-yellow-60); + --wa-color-warning-on-quiet: var(--wa-color-yellow-40); + --wa-color-warning-on-normal: var(--wa-color-yellow-30); + --wa-color-warning-on-loud: white; + + --wa-color-danger-fill-quiet: var(--wa-color-red-95); + --wa-color-danger-fill-normal: var(--wa-color-red-90); + --wa-color-danger-fill-loud: var(--wa-color-red-50); + --wa-color-danger-border-quiet: var(--wa-color-red-90); + --wa-color-danger-border-normal: var(--wa-color-red-80); + --wa-color-danger-border-loud: var(--wa-color-red-60); + --wa-color-danger-on-quiet: var(--wa-color-red-40); + --wa-color-danger-on-normal: var(--wa-color-red-30); + --wa-color-danger-on-loud: white; + + --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; +} + +/** need to wrap :host-context() in an :is() selector for unsupported browsers */ +.wa-dark, +.wa-invert, +:is(:host-context(.wa-dark)) { + /** + * Foundational Colors + */ + --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 20%); + --wa-color-surface-border: var(--wa-color-gray-20); + + --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-gray-50) 10%, transparent); + + /* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */ + --wa-color-shadow: color-mix( + in oklab, + var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%), + transparent + ); + + --wa-color-focus: var(--wa-color-blue-60); + + --wa-color-mix-hover: black 8%; + --wa-color-mix-active: black 16%; + + /** + * Semantic Colors + */ + --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); + --wa-color-success-fill-normal: var(--wa-color-green-20); + --wa-color-success-fill-loud: var(--wa-color-green-50); + --wa-color-success-border-quiet: var(--wa-color-green-20); + --wa-color-success-border-normal: var(--wa-color-green-30); + --wa-color-success-border-loud: var(--wa-color-green-40); + --wa-color-success-on-quiet: var(--wa-color-green-60); + --wa-color-success-on-normal: var(--wa-color-green-70); + --wa-color-success-on-loud: white; + + --wa-color-warning-fill-quiet: var(--wa-color-yellow-10); + --wa-color-warning-fill-normal: var(--wa-color-yellow-20); + --wa-color-warning-fill-loud: var(--wa-color-yellow-50); + --wa-color-warning-border-quiet: var(--wa-color-yellow-20); + --wa-color-warning-border-normal: var(--wa-color-yellow-30); + --wa-color-warning-border-loud: var(--wa-color-yellow-40); + --wa-color-warning-on-quiet: var(--wa-color-yellow-60); + --wa-color-warning-on-normal: var(--wa-color-yellow-70); + --wa-color-warning-on-loud: white; + + --wa-color-danger-fill-quiet: var(--wa-color-red-10); + --wa-color-danger-fill-normal: var(--wa-color-red-20); + --wa-color-danger-fill-loud: var(--wa-color-red-50); + --wa-color-danger-border-quiet: var(--wa-color-red-20); + --wa-color-danger-border-normal: var(--wa-color-red-30); + --wa-color-danger-border-loud: var(--wa-color-red-40); + --wa-color-danger-on-quiet: var(--wa-color-red-60); + --wa-color-danger-on-normal: var(--wa-color-red-70); + --wa-color-danger-on-loud: white; + + --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); } diff --git a/src/styles/themes/glassy.css b/src/styles/themes/glassy.css index ca4740c65..cb098eb9c 100644 --- a/src/styles/themes/glassy.css +++ b/src/styles/themes/glassy.css @@ -1,5 +1,5 @@ @import url('../color/elegant.css'); -@import url('default/color-semantic.css'); +@import url('default/color.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css'); diff --git a/src/styles/themes/mellow.css b/src/styles/themes/mellow.css index 55f591fd3..f6a8f762e 100644 --- a/src/styles/themes/mellow.css +++ b/src/styles/themes/mellow.css @@ -1,5 +1,5 @@ @import url('../color/natural.css'); -@import url('default/color-semantic.css'); +@import url('default/color.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css'); diff --git a/src/styles/themes/playful.css b/src/styles/themes/playful.css index ff9580b87..e1df92922 100644 --- a/src/styles/themes/playful.css +++ b/src/styles/themes/playful.css @@ -1,5 +1,5 @@ @import url('../color/rudimentary.css'); -@import url('default/color-semantic.css'); +@import url('default/color.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css'); diff --git a/src/styles/themes/premium.css b/src/styles/themes/premium.css index 7ae6bdd1f..f9cb1b6e7 100644 --- a/src/styles/themes/premium.css +++ b/src/styles/themes/premium.css @@ -1,5 +1,5 @@ @import url('../color/anodized.css'); -@import url('default/color-semantic.css'); +@import url('default/color.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css'); diff --git a/src/styles/themes/tailspin.css b/src/styles/themes/tailspin.css index 13184901b..1fc2914a8 100644 --- a/src/styles/themes/tailspin.css +++ b/src/styles/themes/tailspin.css @@ -1,5 +1,5 @@ @import url('../color/vogue.css'); -@import url('default/color-semantic.css'); +@import url('default/color.css'); @import url('default/space.css'); @import url('default/outlines.css'); @import url('default/typography.css');