js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Color palette housekeeping (#523)

Browse Source
This commit is contained in:
Lea Verou
2025-01-14 14:54:34 -05:00
committed by GitHub
parent 89c0667e9c
commit 24a76f6a7c
23 changed files with 305 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/docs/themes/active.md vendored
View File

@@ -3,4 +3,5 @@ title: Active
description: Energetic and tactile, always in motion.
isPro: true
tags: pro
defaultPalette: rudimentary
---

1
docs/docs/themes/awesome.md vendored
View File

@@ -2,4 +2,5 @@
title: Awesome
description: Punchy and vibrant, the rockstar of themes.
order: 0.2
defaultPalette: bright
---

1
docs/docs/themes/brutalist.md vendored
View File

@@ -3,4 +3,5 @@ title: Brutalist
description: Sharp, square, and unapologetically bold.
isPro: true
tags: pro
defaultPalette: default
---

1
docs/docs/themes/classic.md vendored
View File

@@ -2,4 +2,5 @@
title: Classic
description: Timeless elegance that never goes out of style.
order: 0.1
defaultPalette: classic
---

1
docs/docs/themes/default.md vendored
View File

@@ -2,4 +2,5 @@
title: Default
description: Your trusty companion, like a perfectly broken-in pair of jeans.
order: 0
defaultPalette: default
---

1
docs/docs/themes/glassy.md vendored
View File

@@ -4,4 +4,5 @@ description: Smooth, sleek, and reflective.
isPro: true
tags: pro
noAlpha: true
defaultPalette: elegant
---

1
docs/docs/themes/mellow.md vendored
View File

@@ -3,4 +3,5 @@ title: Mellow
description: Soft and soothing, like a lazy Sunday morning.
isPro: true
tags: pro
defaultPalette: natural
---

1
docs/docs/themes/playful.md vendored
View File

@@ -4,4 +4,5 @@ description: Fun, colorful, and full of personality.
isPro: true
tags: pro
noAlpha: true
defaultPalette: rudimentary
---

1
docs/docs/themes/premium.md vendored
View File

@@ -3,4 +3,5 @@ title: Premium
description: The ultimate in sophistication and style.
isPro: true
tags: pro
defaultPalette: anodized
---

1
docs/docs/themes/tailspin.md vendored
View File

@@ -3,4 +3,5 @@ title: Tailspin
description: Like a bird in flight, guiding you from there to here.
isPro: true
tags: pro
defaultPalette: vogue
---

106
src/styles/color/default.css Normal file
View File

@@ -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;
}

2
src/styles/themes/active.css
View File

@@ -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');

2
src/styles/themes/awesome.css
View File

@@ -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');

2
src/styles/themes/brutalist.css
View File

@@ -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');

2
src/styles/themes/classic.css
View File

@@ -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');

2
src/styles/themes/default.css
View File

@@ -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');

190
src/styles/themes/default/color-semantic.css
View File

@@ -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);
}

274
src/styles/themes/default/color.css
View File

@@ -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);
}

2
src/styles/themes/glassy.css
View File

@@ -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');

2
src/styles/themes/mellow.css
View File

@@ -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');

2
src/styles/themes/playful.css
View File

@@ -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');

2
src/styles/themes/premium.css
View File

@@ -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');

2
src/styles/themes/tailspin.css
View File

@@ -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');