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

Add --color-brand-* tokens, fixes #655

Browse Source
This commit is contained in:
Lea Verou
2025-02-03 15:23:22 -05:00
parent 99f0273783
commit 24c1d6b960
16 changed files with 300 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/styles/brand/blue.css Normal file
View File

@@ -0,0 +1,17 @@
:where(:root),
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
--wa-color-brand-95: var(--wa-color-blue-95);
--wa-color-brand-90: var(--wa-color-blue-90);
--wa-color-brand-80: var(--wa-color-blue-80);
--wa-color-brand-70: var(--wa-color-blue-70);
--wa-color-brand-60: var(--wa-color-blue-60);
--wa-color-brand-50: var(--wa-color-blue-50);
--wa-color-brand-40: var(--wa-color-blue-40);
--wa-color-brand-30: var(--wa-color-blue-30);
--wa-color-brand-20: var(--wa-color-blue-20);
--wa-color-brand-10: var(--wa-color-blue-10);
--wa-color-brand-05: var(--wa-color-blue-05);
--wa-color-brand: var(--wa-color-blue);
}

17
src/styles/brand/green.css Normal file
View File

@@ -0,0 +1,17 @@
:where(:root),
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
--wa-color-brand-95: var(--wa-color-green-95);
--wa-color-brand-90: var(--wa-color-green-90);
--wa-color-brand-80: var(--wa-color-green-80);
--wa-color-brand-70: var(--wa-color-green-70);
--wa-color-brand-60: var(--wa-color-green-60);
--wa-color-brand-50: var(--wa-color-green-50);
--wa-color-brand-40: var(--wa-color-green-40);
--wa-color-brand-30: var(--wa-color-green-30);
--wa-color-brand-20: var(--wa-color-green-20);
--wa-color-brand-10: var(--wa-color-green-10);
--wa-color-brand-05: var(--wa-color-green-05);
--wa-color-brand: var(--wa-color-green);
}

17
src/styles/brand/indigo.css Normal file
View File

@@ -0,0 +1,17 @@
:where(:root),
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
--wa-color-brand-95: var(--wa-color-indigo-95);
--wa-color-brand-90: var(--wa-color-indigo-90);
--wa-color-brand-80: var(--wa-color-indigo-80);
--wa-color-brand-70: var(--wa-color-indigo-70);
--wa-color-brand-60: var(--wa-color-indigo-60);
--wa-color-brand-50: var(--wa-color-indigo-50);
--wa-color-brand-40: var(--wa-color-indigo-40);
--wa-color-brand-30: var(--wa-color-indigo-30);
--wa-color-brand-20: var(--wa-color-indigo-20);
--wa-color-brand-10: var(--wa-color-indigo-10);
--wa-color-brand-05: var(--wa-color-indigo-05);
--wa-color-brand: var(--wa-color-indigo);
}

17
src/styles/brand/teal.css Normal file
View File

@@ -0,0 +1,17 @@
:where(:root),
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
--wa-color-brand-95: var(--wa-color-teal-95);
--wa-color-brand-90: var(--wa-color-teal-90);
--wa-color-brand-80: var(--wa-color-teal-80);
--wa-color-brand-70: var(--wa-color-teal-70);
--wa-color-brand-60: var(--wa-color-teal-60);
--wa-color-brand-50: var(--wa-color-teal-50);
--wa-color-brand-40: var(--wa-color-teal-40);
--wa-color-brand-30: var(--wa-color-teal-30);
--wa-color-brand-20: var(--wa-color-teal-20);
--wa-color-brand-10: var(--wa-color-teal-10);
--wa-color-brand-05: var(--wa-color-teal-05);
--wa-color-brand: var(--wa-color-teal);
}

17
src/styles/brand/violet.css Normal file
View File

@@ -0,0 +1,17 @@
:where(:root),
:host,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
--wa-color-brand-95: var(--wa-color-violet-95);
--wa-color-brand-90: var(--wa-color-violet-90);
--wa-color-brand-80: var(--wa-color-violet-80);
--wa-color-brand-70: var(--wa-color-violet-70);
--wa-color-brand-60: var(--wa-color-violet-60);
--wa-color-brand-50: var(--wa-color-violet-50);
--wa-color-brand-40: var(--wa-color-violet-40);
--wa-color-brand-30: var(--wa-color-violet-30);
--wa-color-brand-20: var(--wa-color-violet-20);
--wa-color-brand-10: var(--wa-color-violet-10);
--wa-color-brand-05: var(--wa-color-violet-05);
--wa-color-brand: var(--wa-color-violet);
}

37
src/styles/themes/active/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/rudimentary.css');
@import url('../default/color.css');
@import url('../../brand/green.css');
:where(:root),
:host,
@@ -13,7 +14,7 @@
* Foundational Colors
*/
--wa-color-text-normal: var(--wa-color-gray-05);
--wa-color-text-link: var(--wa-color-green-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-focus: var(--wa-color-blue-60);
@@ -23,14 +24,14 @@
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-green-95);
--wa-color-brand-fill-normal: var(--wa-color-green-90);
--wa-color-brand-fill-loud: var(--wa-color-green-80);
--wa-color-brand-border-quiet: var(--wa-color-green-90);
--wa-color-brand-border-normal: var(--wa-color-green-80);
--wa-color-brand-border-loud: var(--wa-color-green-70);
--wa-color-brand-on-quiet: var(--wa-color-green-40);
--wa-color-brand-on-normal: var(--wa-color-green-30);
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-80);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-70);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: black;
--wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -82,19 +83,19 @@
*/
--wa-color-surface-lowered: black;
--wa-color-text-link: var(--wa-color-green-70);
--wa-color-text-link: var(--wa-color-brand-70);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-green-10);
--wa-color-brand-fill-normal: var(--wa-color-green-20);
--wa-color-brand-fill-loud: var(--wa-color-green-80);
--wa-color-brand-border-quiet: var(--wa-color-green-20);
--wa-color-brand-border-normal: var(--wa-color-green-30);
--wa-color-brand-border-loud: var(--wa-color-green-60);
--wa-color-brand-on-quiet: var(--wa-color-green-80);
--wa-color-brand-on-normal: var(--wa-color-green-90);
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-80);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-80);
--wa-color-brand-on-normal: var(--wa-color-brand-90);
--wa-color-brand-on-loud: black;
--wa-color-success-fill-quiet: var(--wa-color-green-10);

33
src/styles/themes/awesome/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/bright.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
:where(:root),
:host,
@@ -14,14 +15,14 @@
/**
* Semantic Colors
*/
--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-70);
--wa-color-brand-border-quiet: var(--wa-color-blue-70);
--wa-color-brand-border-normal: var(--wa-color-blue-50);
--wa-color-brand-border-loud: var(--wa-color-blue-30);
--wa-color-brand-on-quiet: var(--wa-color-blue-40);
--wa-color-brand-on-normal: var(--wa-color-blue-40);
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-70);
--wa-color-brand-border-normal: var(--wa-color-brand-50);
--wa-color-brand-border-loud: var(--wa-color-brand-30);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-40);
--wa-color-brand-on-loud: var(--wa-color-text-normal);
--wa-color-success-fill-quiet: var(--wa-color-teal-95);
@@ -74,14 +75,14 @@
/**
* 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-30);
--wa-color-brand-border-normal: var(--wa-color-blue-50);
--wa-color-brand-border-loud: var(--wa-color-blue-80);
--wa-color-brand-on-quiet: var(--wa-color-blue-70);
--wa-color-brand-on-normal: var(--wa-color-blue-80);
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-50);
--wa-color-brand-border-loud: var(--wa-color-brand-80);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-80);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-teal-10);

35
src/styles/themes/brutalist/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/default.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
:where(:root),
:host,
@@ -21,14 +22,14 @@
/**
* Semantic Colors
*/
--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-80);
--wa-color-brand-border-normal: var(--wa-color-blue-60);
--wa-color-brand-border-loud: var(--wa-color-blue-40);
--wa-color-brand-on-quiet: var(--wa-color-blue-40);
--wa-color-brand-on-normal: var(--wa-color-blue-40);
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
--wa-color-brand-border-normal: var(--wa-color-brand-60);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-40);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -93,15 +94,15 @@
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-blue-20);
--wa-color-brand-fill-normal: var(--wa-color-blue-30);
--wa-color-brand-fill-loud: var(--wa-color-blue-70);
--wa-color-brand-border-quiet: var(--wa-color-blue-30);
--wa-color-brand-border-normal: var(--wa-color-blue-40);
--wa-color-brand-border-loud: var(--wa-color-blue-80);
--wa-color-brand-on-quiet: var(--wa-color-blue-80);
--wa-color-brand-on-normal: var(--wa-color-blue-95);
--wa-color-brand-on-loud: var(--wa-color-blue-10);
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-80);
--wa-color-brand-on-quiet: var(--wa-color-brand-80);
--wa-color-brand-on-normal: var(--wa-color-brand-95);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-green-20);
--wa-color-success-fill-normal: var(--wa-color-green-30);

33
src/styles/themes/classic/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/classic.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
:where(:root),
:host,
@@ -11,14 +12,14 @@
/**
* Semantic Colors
*/
--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-50);
--wa-color-brand-on-normal: var(--wa-color-blue-40);
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-50);
--wa-color-brand-on-normal: var(--wa-color-brand-40);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -73,14 +74,14 @@
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-blue-20);
--wa-color-brand-fill-normal: var(--wa-color-blue-30);
--wa-color-brand-fill-loud: var(--wa-color-blue-70);
--wa-color-brand-border-quiet: var(--wa-color-blue-30);
--wa-color-brand-border-normal: var(--wa-color-blue-40);
--wa-color-brand-border-loud: var(--wa-color-blue-50);
--wa-color-brand-on-quiet: var(--wa-color-blue-70);
--wa-color-brand-on-normal: var(--wa-color-blue-80);
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-80);
--wa-color-brand-on-loud: var(--wa-color-gray-10);
--wa-color-success-fill-quiet: var(--wa-color-green-20);

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

@@ -1,3 +1,5 @@
@import url('../../brand/blue.css');
/**
* Foundational Colors and Semantic Colors
*/
@@ -25,7 +27,7 @@
* 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-text-link: var(--wa-color-brand-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);
@@ -42,7 +44,7 @@
/* 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-focus: var(--wa-color-brand-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%;
@@ -57,14 +59,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-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-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -125,7 +127,7 @@
--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-text-link: var(--wa-color-brand-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);
@@ -137,7 +139,7 @@
transparent
);
--wa-color-focus: var(--wa-color-blue-60);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
@@ -145,14 +147,14 @@
/**
* 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-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-10);

41
src/styles/themes/glossy/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/elegant.css');
@import url('../default/color.css');
@import url('../../brand/indigo.css');
:where(:root),
:host,
@@ -9,21 +10,21 @@
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-focus: var(--wa-color-indigo-60);
--wa-color-focus: var(--wa-color-brand-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
--wa-color-brand-fill-normal: var(--wa-color-indigo-90);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: var(--wa-color-indigo-90);
--wa-color-brand-border-normal: var(--wa-color-indigo-80);
--wa-color-brand-border-loud: var(--wa-color-indigo-60);
--wa-color-brand-on-quiet: var(--wa-color-indigo-40);
--wa-color-brand-on-normal: var(--wa-color-indigo-30);
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-loud: var(--wa-color-green-40);
@@ -41,21 +42,21 @@
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-70);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-focus: var(--wa-color-indigo-60);
--wa-color-focus: var(--wa-color-brand-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-10);
--wa-color-brand-fill-normal: var(--wa-color-indigo-20);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: var(--wa-color-indigo-20);
--wa-color-brand-border-normal: var(--wa-color-indigo-30);
--wa-color-brand-border-loud: var(--wa-color-indigo-40);
--wa-color-brand-on-quiet: var(--wa-color-indigo-60);
--wa-color-brand-on-normal: var(--wa-color-indigo-70);
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-loud: var(--wa-color-green-40);

45
src/styles/themes/matter/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/mild.css');
@import url('../default/color.css');
@import url('../../brand/indigo.css');
:where(:root),
:host,
@@ -13,14 +14,14 @@
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-indigo-95);
--wa-color-surface-raised: var(--wa-color-brand-95);
--wa-color-surface-lowered: var(--wa-color-gray-90);
--wa-color-text-link: var(--wa-color-indigo-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-shadow: rgb(0 0 0 / 0.3);
--wa-color-focus: var(--wa-color-indigo-40);
--wa-color-focus: var(--wa-color-brand-40);
--wa-color-mix-hover: white 5%;
--wa-color-mix-active: white 10%;
@@ -28,14 +29,14 @@
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-95);
--wa-color-brand-fill-normal: var(--wa-color-indigo-90);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: var(--wa-color-indigo-90);
--wa-color-brand-border-normal: var(--wa-color-indigo-80);
--wa-color-brand-border-loud: var(--wa-color-indigo-50);
--wa-color-brand-on-quiet: var(--wa-color-indigo-40);
--wa-color-brand-on-normal: var(--wa-color-indigo-30);
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-95);
@@ -85,21 +86,21 @@
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-70);
--wa-color-focus: var(--wa-color-indigo-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-focus: var(--wa-color-brand-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-indigo-20);
--wa-color-brand-fill-normal: var(--wa-color-indigo-30);
--wa-color-brand-fill-loud: var(--wa-color-indigo-70);
--wa-color-brand-border-quiet: var(--wa-color-indigo-20);
--wa-color-brand-border-normal: var(--wa-color-indigo-30);
--wa-color-brand-border-loud: var(--wa-color-indigo-60);
--wa-color-brand-on-quiet: var(--wa-color-indigo-70);
--wa-color-brand-on-normal: var(--wa-color-indigo-80);
--wa-color-brand-on-loud: var(--wa-color-indigo-10);
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-80);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-green-20);
--wa-color-success-fill-normal: var(--wa-color-green-30);

29
src/styles/themes/mellow/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/natural.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
:where(:root),
:host,
@@ -17,23 +18,23 @@
--wa-color-surface-lowered: var(--wa-color-gray-90);
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-80), transparent);
--wa-color-text-normal: var(--wa-color-blue-20);
--wa-color-text-quiet: var(--wa-color-blue-40);
--wa-color-text-link: var(--wa-color-blue-40);
--wa-color-text-normal: var(--wa-color-brand-20);
--wa-color-text-quiet: var(--wa-color-brand-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-focus: var(--wa-color-blue-50);
--wa-color-focus: var(--wa-color-brand-50);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-blue-90);
--wa-color-brand-fill-normal: var(--wa-color-blue-80);
--wa-color-brand-fill-loud: var(--wa-color-blue-40);
--wa-color-brand-border-quiet: var(--wa-color-blue-80);
--wa-color-brand-border-normal: var(--wa-color-blue-70);
--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-fill-quiet: var(--wa-color-brand-90);
--wa-color-brand-fill-normal: var(--wa-color-brand-80);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
--wa-color-brand-border-normal: var(--wa-color-brand-70);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-90);
@@ -85,8 +86,8 @@
*/
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);
--wa-color-text-normal: var(--wa-color-blue-90);
--wa-color-text-quiet: var(--wa-color-blue-70);
--wa-color-text-normal: var(--wa-color-brand-90);
--wa-color-text-quiet: var(--wa-color-brand-70);
/**
* Semantic Colors

37
src/styles/themes/playful/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/rudimentary.css');
@import url('../default/color.css');
@import url('../../brand/violet.css');
:where(:root),
:host,
@@ -13,19 +14,19 @@
--wa-color-text-link: var(--wa-color-yellow-40);
--wa-color-focus: var(--wa-color-violet-60);
--wa-color-focus: var(--wa-color-brand-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-violet-90);
--wa-color-brand-fill-normal: var(--wa-color-violet-80);
--wa-color-brand-fill-loud: var(--wa-color-violet-50);
--wa-color-brand-border-quiet: var(--wa-color-violet-90);
--wa-color-brand-border-normal: var(--wa-color-violet-70);
--wa-color-brand-border-loud: var(--wa-color-violet-50);
--wa-color-brand-on-quiet: var(--wa-color-violet-30);
--wa-color-brand-on-normal: var(--wa-color-violet-30);
--wa-color-brand-fill-quiet: var(--wa-color-brand-90);
--wa-color-brand-fill-normal: var(--wa-color-brand-80);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-70);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-30);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-90);
@@ -84,21 +85,21 @@
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-yellow-80);
--wa-color-focus: var(--wa-color-violet-60);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: white 10%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-violet-20);
--wa-color-brand-fill-normal: var(--wa-color-violet-40);
--wa-color-brand-fill-loud: var(--wa-color-violet-50);
--wa-color-brand-border-quiet: var(--wa-color-violet-30);
--wa-color-brand-border-normal: var(--wa-color-violet-40);
--wa-color-brand-border-loud: var(--wa-color-violet-50);
--wa-color-brand-on-quiet: var(--wa-color-violet-70);
--wa-color-brand-on-normal: var(--wa-color-violet-90);
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-40);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-90);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-green-20);

45
src/styles/themes/premium/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/anodized.css');
@import url('../default/color.css');
@import url('../../brand/teal.css');
:where(:root),
:host,
@@ -11,9 +12,9 @@
*/
--wa-color-surface-border: var(--wa-color-gray-80);
--wa-color-text-link: var(--wa-color-teal-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-focus: var(--wa-color-teal-60);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: white 10%;
--wa-color-mix-active: var(--wa-color-surface-default) 5%;
@@ -21,15 +22,15 @@
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-teal-95);
--wa-color-brand-fill-normal: var(--wa-color-teal-90);
--wa-color-brand-fill-loud: var(--wa-color-teal-80);
--wa-color-brand-border-quiet: var(--wa-color-teal-80);
--wa-color-brand-border-normal: var(--wa-color-teal-70);
--wa-color-brand-border-loud: var(--wa-color-teal-50);
--wa-color-brand-on-quiet: var(--wa-color-teal-40);
--wa-color-brand-on-normal: var(--wa-color-teal-30);
--wa-color-brand-on-loud: var(--wa-color-teal-20);
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-80);
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
--wa-color-brand-border-normal: var(--wa-color-brand-70);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: var(--wa-color-brand-20);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-90);
@@ -85,9 +86,9 @@
--wa-color-text-normal: var(--wa-color-gray-95);
--wa-color-text-quiet: var(--wa-color-gray-80);
--wa-color-text-link: var(--wa-color-teal-80);
--wa-color-text-link: var(--wa-color-brand-80);
--wa-color-focus: var(--wa-color-teal-60);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: white 20%;
--wa-color-mix-active: var(--wa-color-surface-default) 10%;
@@ -95,15 +96,15 @@
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-teal-30);
--wa-color-brand-fill-normal: var(--wa-color-teal-40);
--wa-color-brand-fill-loud: var(--wa-color-teal-80);
--wa-color-brand-border-quiet: var(--wa-color-teal-30);
--wa-color-brand-border-normal: var(--wa-color-teal-40);
--wa-color-brand-border-loud: var(--wa-color-teal-70);
--wa-color-brand-on-quiet: var(--wa-color-teal-70);
--wa-color-brand-on-normal: var(--wa-color-teal-90);
--wa-color-brand-on-loud: var(--wa-color-teal-20);
--wa-color-brand-fill-quiet: var(--wa-color-brand-30);
--wa-color-brand-fill-normal: var(--wa-color-brand-40);
--wa-color-brand-fill-loud: var(--wa-color-brand-80);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-70);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-90);
--wa-color-brand-on-loud: var(--wa-color-brand-20);
--wa-color-success-fill-quiet: var(--wa-color-green-30);
--wa-color-success-fill-normal: var(--wa-color-green-40);

41
src/styles/themes/tailspin/color.css
View File

@@ -1,5 +1,6 @@
@import url('../../color/vogue.css');
@import url('../default/color.css');
@import url('../../brand/indigo.css');
:where(:root),
:host,
@@ -9,11 +10,11 @@
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-indigo-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-shadow: rgb(0 0 0 / 0.05);
--wa-color-focus: var(--wa-color-indigo-50);
--wa-color-focus: var(--wa-color-brand-50);
--wa-color-mix-hover: var(--wa-color-gray-80) 20%;
--wa-color-mix-active: var(--wa-color-gray-80) 10%;
@@ -21,14 +22,14 @@
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-95) 85%, transparent);
--wa-color-brand-fill-normal: var(--wa-color-indigo-90);
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-80), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-70) 60%, transparent);
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-60) 70%, transparent);
--wa-color-brand-on-quiet: var(--wa-color-indigo-40);
--wa-color-brand-on-normal: var(--wa-color-indigo-30);
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent);
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-60) 70%, transparent);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent);
@@ -88,11 +89,11 @@
--wa-color-text-normal: white;
--wa-color-text-quiet: var(--wa-color-gray-60);
--wa-color-text-link: var(--wa-color-indigo-70);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-shadow: rgb(0 0 0 / 0.2);
--wa-color-focus: var(--wa-color-indigo-60);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: var(--wa-color-gray-70) 20%;
--wa-color-mix-active: var(--wa-color-gray-70) 10%;
@@ -100,14 +101,14 @@
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-10) 90%, transparent);
--wa-color-brand-fill-normal: var(--wa-color-indigo-20);
--wa-color-brand-fill-loud: var(--wa-color-indigo-50);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-20), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-30), transparent);
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-40), transparent);
--wa-color-brand-on-quiet: var(--wa-color-indigo-60);
--wa-color-brand-on-normal: var(--wa-color-indigo-70);
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent);