mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-13 04:29:14 +00:00
Compare commits
4 Commits
carousel-b
...
copy-butto
| Author | SHA1 | Date | |
|---|---|---|---|
|
8a41c31851 | ||
|
|
6080a85035 | ||
|
|
f7e088c8df | ||
|
|
80e1c05b37 |
@@ -1 +1 @@
|
||||
["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
|
||||
["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "gray"]
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.8665 59.1993L33.7329 33H64C63.8352 38.2705 62.3694 43.4244 59.7264 48C57.0833 52.5756 53.3507 56.4213 48.8665 59.1993Z" fill="var(--wa-color-green-70)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C26.714 64 21.5155 62.6919 16.8665 60.1993L32 34L47.1336 60.1993C42.4845 62.6919 37.286 64 32 64Z" fill="var(--wa-color-blue-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 48C1.63063 43.4244 0.164839 38.2706 0 33L30.2671 33L15.1336 59.1993C10.6493 56.4213 6.91666 52.5756 4.27365 48Z" fill="var(--wa-color-indigo-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-violet-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-purple-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 30L16.8665 3.80072C21.5155 1.30813 26.714 0 32 0C37.286 0 42.4845 1.30813 47.1336 3.80072L32 30Z" fill="var(--wa-color-red-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7329 31L48.8665 4.80072C53.3507 7.57868 57.0833 11.4244 59.7264 16C62.3694 20.5756 63.8352 25.7294 64 31L33.7329 31Z" fill="var(--wa-color-yellow-80)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -23,7 +23,7 @@
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
|
||||
<wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
|
||||
@@ -9,6 +9,10 @@ icon: copy-button
|
||||
<wa-copy-button value="Web Awesome rocks!"></wa-copy-button>
|
||||
```
|
||||
|
||||
:::info
|
||||
Copy buttons use the browser's [`clipboard.writeText()`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) method, which requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS) in most browsers.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom Labels
|
||||
|
||||
@@ -52,8 +52,8 @@ wa-page {
|
||||
}
|
||||
|
||||
&[slot^='navigation'] {
|
||||
background: var(--wa-color-violet-80);
|
||||
color: var(--wa-color-violet-20);
|
||||
background: var(--wa-color-purple-80);
|
||||
color: var(--wa-color-purple-20);
|
||||
}
|
||||
|
||||
strong {
|
||||
|
||||
@@ -16,21 +16,21 @@ To use a theme, simply add a link to the theme's stylesheet to the `<head>` of y
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
|
||||
```
|
||||
|
||||
You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to violet in light mode:
|
||||
You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
|
||||
|
||||
```css
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-violet-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-violet-90);
|
||||
--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-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-violet-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-violet-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-violet-30);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-purple-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-purple-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-purple-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-purple-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-purple-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-purple-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-purple-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-purple-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
}
|
||||
```
|
||||
@@ -99,8 +99,8 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
|
||||
|
||||
<style>
|
||||
.gradient-button::part(base) {
|
||||
background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-violet-50), var(--wa-color-red-50));
|
||||
border: solid 1px var(--wa-color-violet-50);
|
||||
background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
|
||||
border: solid 1px var(--wa-color-purple-50);
|
||||
transition: transform 100ms, box-shadow 100ms;
|
||||
}
|
||||
|
||||
|
||||
@@ -576,10 +576,10 @@ hasOutline: false
|
||||
<wa-radio value="yellow"><span style="background-color:var(--wa-color-yellow-60);"></span></wa-radio>
|
||||
<wa-radio value="lime"><span style="background-color:var(--wa-color-lime-60);"></span></wa-radio>
|
||||
<wa-radio value="green"><span style="background-color:var(--wa-color-green-60);"></span></wa-radio>
|
||||
<wa-radio value="teal"><span style="background-color:var(--wa-color-teal-60);"></span></wa-radio>
|
||||
<wa-radio value="cyan"><span style="background-color:var(--wa-color-cyan-60);"></span></wa-radio>
|
||||
<wa-radio value="blue"><span style="background-color:var(--wa-color-blue-60);"></span></wa-radio>
|
||||
<wa-radio value="indigo"><span style="background-color:var(--wa-color-indigo-60);"></span></wa-radio>
|
||||
<wa-radio value="violet"><span style="background-color:var(--wa-color-violet-60);"></span></wa-radio>
|
||||
<wa-radio value="purple"><span style="background-color:var(--wa-color-purple-60);"></span></wa-radio>
|
||||
<wa-radio value="gray"><span style="background-color:var(--wa-color-gray-60);"></span></wa-radio>
|
||||
</wa-radio-group>
|
||||
</wa-details>
|
||||
|
||||
@@ -66,7 +66,7 @@ You can use these numbers to ensure accessible color contrast per [WCAG 2.1 succ
|
||||
|
||||
Each Web Awesome palette defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
|
||||
|
||||
{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
|
||||
{% for hue in hues -%}
|
||||
<div class="color-name">{{ hue | capitalize }}</div>
|
||||
<ul class="color-group">
|
||||
{% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
|
||||
|
||||
17
src/styles/brand/blue.css
Normal file
17
src/styles/brand/blue.css
Normal 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/cyan.css
Normal file
17
src/styles/brand/cyan.css
Normal 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-cyan-95);
|
||||
--wa-color-brand-90: var(--wa-color-cyan-90);
|
||||
--wa-color-brand-80: var(--wa-color-cyan-80);
|
||||
--wa-color-brand-70: var(--wa-color-cyan-70);
|
||||
--wa-color-brand-60: var(--wa-color-cyan-60);
|
||||
--wa-color-brand-50: var(--wa-color-cyan-50);
|
||||
--wa-color-brand-40: var(--wa-color-cyan-40);
|
||||
--wa-color-brand-30: var(--wa-color-cyan-30);
|
||||
--wa-color-brand-20: var(--wa-color-cyan-20);
|
||||
--wa-color-brand-10: var(--wa-color-cyan-10);
|
||||
--wa-color-brand-05: var(--wa-color-cyan-05);
|
||||
--wa-color-brand: var(--wa-color-cyan);
|
||||
}
|
||||
17
src/styles/brand/green.css
Normal file
17
src/styles/brand/green.css
Normal 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
17
src/styles/brand/indigo.css
Normal 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/purple.css
Normal file
17
src/styles/brand/purple.css
Normal 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-purple-95);
|
||||
--wa-color-brand-90: var(--wa-color-purple-90);
|
||||
--wa-color-brand-80: var(--wa-color-purple-80);
|
||||
--wa-color-brand-70: var(--wa-color-purple-70);
|
||||
--wa-color-brand-60: var(--wa-color-purple-60);
|
||||
--wa-color-brand-50: var(--wa-color-purple-50);
|
||||
--wa-color-brand-40: var(--wa-color-purple-40);
|
||||
--wa-color-brand-30: var(--wa-color-purple-30);
|
||||
--wa-color-brand-20: var(--wa-color-purple-20);
|
||||
--wa-color-brand-10: var(--wa-color-purple-10);
|
||||
--wa-color-brand-05: var(--wa-color-purple-05);
|
||||
--wa-color-brand: var(--wa-color-purple);
|
||||
}
|
||||
@@ -41,18 +41,18 @@
|
||||
--wa-color-green-05: #001610 /* oklch(17.856% 0.03405 173.73) */;
|
||||
--wa-color-green: var(--wa-color-green-60);
|
||||
|
||||
--wa-color-teal-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
|
||||
--wa-color-teal-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
|
||||
--wa-color-teal-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
|
||||
--wa-color-teal-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
|
||||
--wa-color-teal-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
|
||||
--wa-color-teal-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
|
||||
--wa-color-teal-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
|
||||
--wa-color-teal-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
|
||||
--wa-color-teal-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
|
||||
--wa-color-teal-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
|
||||
--wa-color-teal-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
|
||||
--wa-color-teal: var(--wa-color-teal-80);
|
||||
--wa-color-cyan-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
|
||||
--wa-color-cyan-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
|
||||
--wa-color-cyan-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
|
||||
--wa-color-cyan-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
|
||||
--wa-color-cyan-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
|
||||
--wa-color-cyan-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
|
||||
--wa-color-cyan-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
|
||||
--wa-color-cyan-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
|
||||
--wa-color-cyan-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
|
||||
--wa-color-cyan-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
|
||||
--wa-color-cyan-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-80);
|
||||
|
||||
--wa-color-blue-95: #ecf3ff /* oklch(96.238% 0.01777 261.34) */;
|
||||
--wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
|
||||
@@ -80,18 +80,18 @@
|
||||
--wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
|
||||
--wa-color-violet-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
|
||||
--wa-color-violet-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
|
||||
--wa-color-violet-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
|
||||
--wa-color-violet-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
|
||||
--wa-color-violet-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
|
||||
--wa-color-violet-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
|
||||
--wa-color-violet-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
|
||||
--wa-color-violet-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
|
||||
--wa-color-violet-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
|
||||
--wa-color-violet-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
|
||||
--wa-color-violet-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
--wa-color-purple-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
|
||||
--wa-color-purple-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
|
||||
--wa-color-purple-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
|
||||
--wa-color-purple-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
|
||||
--wa-color-purple-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
|
||||
--wa-color-purple-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
|
||||
--wa-color-purple-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
|
||||
--wa-color-purple-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
|
||||
--wa-color-purple-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
|
||||
--wa-color-purple-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
|
||||
--wa-color-purple-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
|
||||
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
|
||||
--wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
|
||||
|
||||
@@ -28,31 +28,31 @@
|
||||
--wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-60);
|
||||
|
||||
--wa-color-green-95: #e0fae4 /* oklch(96.026% 0.03986 149.82) */;
|
||||
--wa-color-green-90: #baf4c2 /* oklch(91.456% 0.0897 148.52) */;
|
||||
--wa-color-green-80: #73e085 /* oklch(81.974% 0.16188 147.55) */;
|
||||
--wa-color-green-70: #46c65c /* oklch(73.25% 0.18463 146.42) */;
|
||||
--wa-color-green-60: #33aa49 /* oklch(65.121% 0.17208 146.32) */;
|
||||
--wa-color-green-50: #2a863c /* oklch(54.872% 0.13954 146.82) */;
|
||||
--wa-color-green-40: #20662e /* oklch(45.254% 0.11199 147.1) */;
|
||||
--wa-color-green-30: #194f24 /* oklch(38.029% 0.09087 147.43) */;
|
||||
--wa-color-green-20: #123a1a /* oklch(31.086% 0.07165 147.58) */;
|
||||
--wa-color-green-10: #0b2210 /* oklch(22.733% 0.04522 148.82) */;
|
||||
--wa-color-green-05: #07150a /* oklch(17.871% 0.03021 149.94) */;
|
||||
--wa-color-green-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
|
||||
--wa-color-green-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
|
||||
--wa-color-green-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
|
||||
--wa-color-green-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
|
||||
--wa-color-green-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
|
||||
--wa-color-green-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
|
||||
--wa-color-green-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
|
||||
--wa-color-green-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
|
||||
--wa-color-green-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
|
||||
--wa-color-green-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
|
||||
--wa-color-green-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
|
||||
--wa-color-green: var(--wa-color-green-70);
|
||||
|
||||
--wa-color-teal-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
|
||||
--wa-color-teal-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
|
||||
--wa-color-teal-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
|
||||
--wa-color-teal-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
|
||||
--wa-color-teal-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
|
||||
--wa-color-teal-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
|
||||
--wa-color-teal-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
|
||||
--wa-color-teal-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
|
||||
--wa-color-teal-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
|
||||
--wa-color-teal-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
|
||||
--wa-color-teal-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
|
||||
--wa-color-teal: var(--wa-color-teal-70);
|
||||
--wa-color-cyan-95: #dcf9fc /* oklch(96.213% 0.03042 204.23) */;
|
||||
--wa-color-cyan-90: #aff0f6 /* oklch(91.368% 0.06543 203.24) */;
|
||||
--wa-color-cyan-80: #69dae9 /* oklch(82.807% 0.10458 206.97) */;
|
||||
--wa-color-cyan-70: #2bbfd4 /* oklch(74.03% 0.11967 209.65) */;
|
||||
--wa-color-cyan-60: #12a3b8 /* oklch(65.721% 0.1115 211.17) */;
|
||||
--wa-color-cyan-50: #0c8195 /* oklch(55.546% 0.09532 213.91) */;
|
||||
--wa-color-cyan-40: #096272 /* oklch(45.73% 0.07805 214.43) */;
|
||||
--wa-color-cyan-30: #074c59 /* oklch(38.429% 0.06506 214.82) */;
|
||||
--wa-color-cyan-20: #063842 /* oklch(31.484% 0.05211 215.06) */;
|
||||
--wa-color-cyan-10: #032127 /* oklch(22.892% 0.03684 213.41) */;
|
||||
--wa-color-cyan-05: #021518 /* oklch(18.045% 0.02758 207.97) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-70);
|
||||
|
||||
--wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
|
||||
--wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
|
||||
@@ -80,18 +80,18 @@
|
||||
--wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
|
||||
--wa-color-violet-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
|
||||
--wa-color-violet-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
|
||||
--wa-color-violet-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
|
||||
--wa-color-violet-70: #b8a0fd /* oklch(76.245% 0.13251 294.93) */;
|
||||
--wa-color-violet-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
|
||||
--wa-color-violet-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
|
||||
--wa-color-violet-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
|
||||
--wa-color-violet-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
|
||||
--wa-color-violet-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
|
||||
--wa-color-violet-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
|
||||
--wa-color-violet-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
--wa-color-purple-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
|
||||
--wa-color-purple-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
|
||||
--wa-color-purple-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
|
||||
--wa-color-purple-70: #b8a0fd /* oklch(76.245% 0.13251 294.93) */;
|
||||
--wa-color-purple-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
|
||||
--wa-color-purple-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
|
||||
--wa-color-purple-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
|
||||
--wa-color-purple-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
|
||||
--wa-color-purple-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
|
||||
--wa-color-purple-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
|
||||
--wa-color-purple-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
|
||||
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
|
||||
--wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
|
||||
|
||||
@@ -41,18 +41,18 @@
|
||||
--wa-color-green-05: #02140a /* oklch(17.084% 0.03423 159.06) */;
|
||||
--wa-color-green: var(--wa-color-green-60);
|
||||
|
||||
--wa-color-teal-95: #d0fbf3 /* oklch(95.575% 0.04532 182.8) */;
|
||||
--wa-color-teal-90: #a9f4e8 /* oklch(91.479% 0.07585 183.56) */;
|
||||
--wa-color-teal-80: #5bdecd /* oklch(82.349% 0.1175 183.5) */;
|
||||
--wa-color-teal-70: #36c2b3 /* oklch(73.796% 0.11779 184.4) */;
|
||||
--wa-color-teal-60: #12a797 /* oklch(65.522% 0.11415 182.81) */;
|
||||
--wa-color-teal-50: #0b8278 /* oklch(54.658% 0.09409 185.3) */;
|
||||
--wa-color-teal-40: #09635b /* oklch(45.055% 0.07686 185.06) */;
|
||||
--wa-color-teal-30: #0a4e49 /* oklch(38.363% 0.06313 187.15) */;
|
||||
--wa-color-teal-20: #0a3835 /* oklch(30.997% 0.04799 188.56) */;
|
||||
--wa-color-teal-10: #082120 /* oklch(22.8% 0.03074 191.62) */;
|
||||
--wa-color-teal-05: #021413 /* oklch(17.442% 0.02643 190.53) */;
|
||||
--wa-color-teal: var(--wa-color-teal-70);
|
||||
--wa-color-cyan-95: #d0fbf3 /* oklch(95.575% 0.04532 182.8) */;
|
||||
--wa-color-cyan-90: #a9f4e8 /* oklch(91.479% 0.07585 183.56) */;
|
||||
--wa-color-cyan-80: #5bdecd /* oklch(82.349% 0.1175 183.5) */;
|
||||
--wa-color-cyan-70: #36c2b3 /* oklch(73.796% 0.11779 184.4) */;
|
||||
--wa-color-cyan-60: #12a797 /* oklch(65.522% 0.11415 182.81) */;
|
||||
--wa-color-cyan-50: #0b8278 /* oklch(54.658% 0.09409 185.3) */;
|
||||
--wa-color-cyan-40: #09635b /* oklch(45.055% 0.07686 185.06) */;
|
||||
--wa-color-cyan-30: #0a4e49 /* oklch(38.363% 0.06313 187.15) */;
|
||||
--wa-color-cyan-20: #0a3835 /* oklch(30.997% 0.04799 188.56) */;
|
||||
--wa-color-cyan-10: #082120 /* oklch(22.8% 0.03074 191.62) */;
|
||||
--wa-color-cyan-05: #021413 /* oklch(17.442% 0.02643 190.53) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-70);
|
||||
|
||||
--wa-color-blue-95: #e5f4fe /* oklch(95.896% 0.02085 236.75) */;
|
||||
--wa-color-blue-90: #c8ebfd /* oklch(92.061% 0.04406 230.21) */;
|
||||
@@ -80,18 +80,18 @@
|
||||
--wa-color-indigo-05: #0f0e26 /* oklch(18.064% 0.04799 282.35) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
|
||||
--wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
|
||||
--wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
|
||||
--wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
|
||||
--wa-color-violet-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
|
||||
--wa-color-violet-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
|
||||
--wa-color-violet-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
|
||||
--wa-color-violet-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
|
||||
--wa-color-violet-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
|
||||
--wa-color-violet-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
|
||||
--wa-color-violet-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
|
||||
--wa-color-violet-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
--wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
|
||||
--wa-color-purple-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
|
||||
--wa-color-purple-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
|
||||
--wa-color-purple-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
|
||||
--wa-color-purple-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
|
||||
--wa-color-purple-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
|
||||
--wa-color-purple-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
|
||||
--wa-color-purple-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
|
||||
--wa-color-purple-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
|
||||
--wa-color-purple-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
|
||||
--wa-color-purple-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
|
||||
--wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
|
||||
--wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
|
||||
|
||||
@@ -41,18 +41,18 @@
|
||||
--wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
|
||||
--wa-color-green: var(--wa-color-green-60);
|
||||
|
||||
--wa-color-teal-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
|
||||
--wa-color-teal-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
|
||||
--wa-color-teal-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
|
||||
--wa-color-teal-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
|
||||
--wa-color-teal-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
|
||||
--wa-color-teal-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
|
||||
--wa-color-teal-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
|
||||
--wa-color-teal-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
|
||||
--wa-color-teal-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
|
||||
--wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
|
||||
--wa-color-teal-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
|
||||
--wa-color-teal: var(--wa-color-teal-70);
|
||||
--wa-color-cyan-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
|
||||
--wa-color-cyan-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
|
||||
--wa-color-cyan-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
|
||||
--wa-color-cyan-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
|
||||
--wa-color-cyan-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
|
||||
--wa-color-cyan-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
|
||||
--wa-color-cyan-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
|
||||
--wa-color-cyan-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
|
||||
--wa-color-cyan-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
|
||||
--wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
|
||||
--wa-color-cyan-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-70);
|
||||
|
||||
--wa-color-blue-95: #ebf4ff /* oklch(96.361% 0.01763 253.34) */;
|
||||
--wa-color-blue-90: #d4e7ff /* oklch(92.129% 0.03859 254.29) */;
|
||||
@@ -80,18 +80,18 @@
|
||||
--wa-color-indigo-05: #130049 /* oklch(19.925% 0.11977 280.89) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
|
||||
--wa-color-violet-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
|
||||
--wa-color-violet-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
|
||||
--wa-color-violet-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
|
||||
--wa-color-violet-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
|
||||
--wa-color-violet-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
|
||||
--wa-color-violet-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
|
||||
--wa-color-violet-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
|
||||
--wa-color-violet-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
|
||||
--wa-color-violet-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
|
||||
--wa-color-violet-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
|
||||
--wa-color-violet-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
--wa-color-purple-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
|
||||
--wa-color-purple-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
|
||||
--wa-color-purple-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
|
||||
--wa-color-purple-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
|
||||
--wa-color-purple-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
|
||||
--wa-color-purple-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
|
||||
--wa-color-purple-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
|
||||
--wa-color-purple-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
|
||||
--wa-color-purple-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
|
||||
--wa-color-purple-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
|
||||
--wa-color-purple-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
|
||||
--wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
|
||||
--wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
|
||||
|
||||
@@ -41,18 +41,18 @@
|
||||
--wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
|
||||
--wa-color-green: var(--wa-color-green-40);
|
||||
|
||||
--wa-color-teal-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
|
||||
--wa-color-teal-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
|
||||
--wa-color-teal-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
|
||||
--wa-color-teal-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
|
||||
--wa-color-teal-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
|
||||
--wa-color-teal-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
|
||||
--wa-color-teal-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
|
||||
--wa-color-teal-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
|
||||
--wa-color-teal-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
|
||||
--wa-color-teal-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
|
||||
--wa-color-teal-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
|
||||
--wa-color-teal: var(--wa-color-teal-50);
|
||||
--wa-color-cyan-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
|
||||
--wa-color-cyan-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
|
||||
--wa-color-cyan-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
|
||||
--wa-color-cyan-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
|
||||
--wa-color-cyan-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
|
||||
--wa-color-cyan-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
|
||||
--wa-color-cyan-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
|
||||
--wa-color-cyan-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
|
||||
--wa-color-cyan-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
|
||||
--wa-color-cyan-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
|
||||
--wa-color-cyan-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-50);
|
||||
|
||||
--wa-color-blue-95: #ebf3fa /* oklch(96.015% 0.01271 244.25) */;
|
||||
--wa-color-blue-90: #d8e8f5 /* oklch(92.295% 0.02463 242.35) */;
|
||||
@@ -80,18 +80,18 @@
|
||||
--wa-color-indigo-05: #0d0e27 /* oklch(17.951% 0.0503 278.32) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
|
||||
--wa-color-violet-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
|
||||
--wa-color-violet-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
|
||||
--wa-color-violet-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
|
||||
--wa-color-violet-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
|
||||
--wa-color-violet-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
|
||||
--wa-color-violet-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
|
||||
--wa-color-violet-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
|
||||
--wa-color-violet-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
|
||||
--wa-color-violet-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
|
||||
--wa-color-violet-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
|
||||
--wa-color-violet-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
|
||||
--wa-color-violet: var(--wa-color-violet-40);
|
||||
--wa-color-purple-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
|
||||
--wa-color-purple-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
|
||||
--wa-color-purple-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
|
||||
--wa-color-purple-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
|
||||
--wa-color-purple-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
|
||||
--wa-color-purple-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
|
||||
--wa-color-purple-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
|
||||
--wa-color-purple-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
|
||||
--wa-color-purple-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
|
||||
--wa-color-purple-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
|
||||
--wa-color-purple-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
|
||||
--wa-color-purple: var(--wa-color-purple-40);
|
||||
|
||||
--wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
|
||||
--wa-color-gray-90: #e6e5e8 /* oklch(92.354% 0.00415 301.42) */;
|
||||
|
||||
@@ -41,18 +41,18 @@
|
||||
--wa-color-green-05: #001701 /* oklch(17.759% 0.05792 143.81) */;
|
||||
--wa-color-green: var(--wa-color-green-80);
|
||||
|
||||
--wa-color-teal-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
|
||||
--wa-color-teal-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
|
||||
--wa-color-teal-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
|
||||
--wa-color-teal-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
|
||||
--wa-color-teal-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
|
||||
--wa-color-teal-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
|
||||
--wa-color-teal-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
|
||||
--wa-color-teal-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
|
||||
--wa-color-teal-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
|
||||
--wa-color-teal-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
|
||||
--wa-color-teal-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
|
||||
--wa-color-teal: var(--wa-color-teal-40);
|
||||
--wa-color-cyan-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
|
||||
--wa-color-cyan-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
|
||||
--wa-color-cyan-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
|
||||
--wa-color-cyan-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
|
||||
--wa-color-cyan-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
|
||||
--wa-color-cyan-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
|
||||
--wa-color-cyan-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
|
||||
--wa-color-cyan-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
|
||||
--wa-color-cyan-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
|
||||
--wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
|
||||
--wa-color-cyan-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-40);
|
||||
|
||||
--wa-color-blue-95: #eaf5ff /* oklch(96.485% 0.01782 245.38) */;
|
||||
--wa-color-blue-90: #d5e7ff /* oklch(92.2% 0.03803 255.61) */;
|
||||
@@ -80,18 +80,18 @@
|
||||
--wa-color-indigo-05: #180044 /* oklch(19.806% 0.11332 288.23) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
|
||||
--wa-color-violet-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
|
||||
--wa-color-violet-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
|
||||
--wa-color-violet-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
|
||||
--wa-color-violet-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
|
||||
--wa-color-violet-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
|
||||
--wa-color-violet-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
|
||||
--wa-color-violet-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
|
||||
--wa-color-violet-30: #5d366c /* oklch(40.395% 0.09808 316) */;
|
||||
--wa-color-violet-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
|
||||
--wa-color-violet-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
|
||||
--wa-color-violet-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
|
||||
--wa-color-violet: var(--wa-color-violet-40);
|
||||
--wa-color-purple-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
|
||||
--wa-color-purple-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
|
||||
--wa-color-purple-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
|
||||
--wa-color-purple-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
|
||||
--wa-color-purple-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
|
||||
--wa-color-purple-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
|
||||
--wa-color-purple-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
|
||||
--wa-color-purple-30: #5d366c /* oklch(40.395% 0.09808 316) */;
|
||||
--wa-color-purple-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
|
||||
--wa-color-purple-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
|
||||
--wa-color-purple-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
|
||||
--wa-color-purple: var(--wa-color-purple-40);
|
||||
|
||||
--wa-color-gray-95: #f4f3f4 /* oklch(96.52% 0.00169 325.59) */;
|
||||
--wa-color-gray-90: #e7e5e8 /* oklch(92.431% 0.00454 314.8) */;
|
||||
|
||||
@@ -41,18 +41,18 @@
|
||||
--wa-color-green-05: #051509 /* oklch(17.675% 0.03381 151.11) */;
|
||||
--wa-color-green: var(--wa-color-green-50);
|
||||
|
||||
--wa-color-teal-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
|
||||
--wa-color-teal-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
|
||||
--wa-color-teal-80: #b7cccf /* oklch(83.033% 0.02314 207.07) */;
|
||||
--wa-color-teal-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
|
||||
--wa-color-teal-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
|
||||
--wa-color-teal-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
|
||||
--wa-color-teal-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
|
||||
--wa-color-teal-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
|
||||
--wa-color-teal-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
|
||||
--wa-color-teal-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
|
||||
--wa-color-teal-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
|
||||
--wa-color-teal: var(--wa-color-teal-40);
|
||||
--wa-color-cyan-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
|
||||
--wa-color-cyan-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
|
||||
--wa-color-cyan-80: #b7cccf /* oklch(83.033% 0.02314 207.07) */;
|
||||
--wa-color-cyan-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
|
||||
--wa-color-cyan-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
|
||||
--wa-color-cyan-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
|
||||
--wa-color-cyan-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
|
||||
--wa-color-cyan-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
|
||||
--wa-color-cyan-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
|
||||
--wa-color-cyan-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
|
||||
--wa-color-cyan-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-40);
|
||||
|
||||
--wa-color-blue-95: #eef1f5 /* oklch(95.7% 0.00626 255.48) */;
|
||||
--wa-color-blue-90: #e1e6ef /* oklch(92.375% 0.01334 262.38) */;
|
||||
@@ -80,18 +80,18 @@
|
||||
--wa-color-indigo-05: #121021 /* oklch(18.511% 0.03422 287.97) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
|
||||
--wa-color-violet-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
|
||||
--wa-color-violet-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
|
||||
--wa-color-violet-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
|
||||
--wa-color-violet-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
|
||||
--wa-color-violet-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
|
||||
--wa-color-violet-50: #876b9a /* oklch(57.261% 0.07753 311.16) */;
|
||||
--wa-color-violet-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
|
||||
--wa-color-violet-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
|
||||
--wa-color-violet-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
|
||||
--wa-color-violet-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
|
||||
--wa-color-violet-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
|
||||
--wa-color-violet: var(--wa-color-violet-40);
|
||||
--wa-color-purple-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
|
||||
--wa-color-purple-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
|
||||
--wa-color-purple-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
|
||||
--wa-color-purple-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
|
||||
--wa-color-purple-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
|
||||
--wa-color-purple-50: #876b9a /* oklch(57.261% 0.07753 311.16) */;
|
||||
--wa-color-purple-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
|
||||
--wa-color-purple-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
|
||||
--wa-color-purple-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
|
||||
--wa-color-purple-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
|
||||
--wa-color-purple-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
|
||||
--wa-color-purple: var(--wa-color-purple-40);
|
||||
|
||||
--wa-color-gray-95: #f1f1f0 /* oklch(95.787% 0.00133 106.42) */;
|
||||
--wa-color-gray-90: #e7e6e4 /* oklch(92.515% 0.0029 84.559) */;
|
||||
|
||||
@@ -41,18 +41,18 @@
|
||||
--wa-color-green-05: #001607 /* oklch(17.557% 0.04482 153.41) */;
|
||||
--wa-color-green: var(--wa-color-green-70);
|
||||
|
||||
--wa-color-teal-95: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
|
||||
--wa-color-teal-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
|
||||
--wa-color-teal-80: #56ddcd /* oklch(81.962% 0.11921 184.3) */;
|
||||
--wa-color-teal-70: #29c2ba /* oklch(73.788% 0.1202 189.37) */;
|
||||
--wa-color-teal-60: #11a5a8 /* oklch(65.588% 0.10925 197.16) */;
|
||||
--wa-color-teal-50: #06828e /* oklch(55.453% 0.09384 206.29) */;
|
||||
--wa-color-teal-40: #006271 /* oklch(45.569% 0.07965 212.74) */;
|
||||
--wa-color-teal-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
|
||||
--wa-color-teal-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
|
||||
--wa-color-teal-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
|
||||
--wa-color-teal-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
|
||||
--wa-color-teal: var(--wa-color-teal-70);
|
||||
--wa-color-cyan-95: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
|
||||
--wa-color-cyan-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
|
||||
--wa-color-cyan-80: #56ddcd /* oklch(81.962% 0.11921 184.3) */;
|
||||
--wa-color-cyan-70: #29c2ba /* oklch(73.788% 0.1202 189.37) */;
|
||||
--wa-color-cyan-60: #11a5a8 /* oklch(65.588% 0.10925 197.16) */;
|
||||
--wa-color-cyan-50: #06828e /* oklch(55.453% 0.09384 206.29) */;
|
||||
--wa-color-cyan-40: #006271 /* oklch(45.569% 0.07965 212.74) */;
|
||||
--wa-color-cyan-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
|
||||
--wa-color-cyan-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
|
||||
--wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
|
||||
--wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-70);
|
||||
|
||||
--wa-color-blue-95: #e1f4ff /* oklch(95.642% 0.02496 232.97) */;
|
||||
--wa-color-blue-90: #caebff /* oklch(92.258% 0.04407 234.57) */;
|
||||
@@ -80,18 +80,18 @@
|
||||
--wa-color-indigo-05: #160046 /* oklch(19.835% 0.11578 285.15) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
|
||||
--wa-color-violet-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
|
||||
--wa-color-violet-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
|
||||
--wa-color-violet-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
|
||||
--wa-color-violet-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
|
||||
--wa-color-violet-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
|
||||
--wa-color-violet-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
|
||||
--wa-color-violet-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
|
||||
--wa-color-violet-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
|
||||
--wa-color-violet-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
|
||||
--wa-color-violet-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
|
||||
--wa-color-violet-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
--wa-color-purple-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
|
||||
--wa-color-purple-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
|
||||
--wa-color-purple-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
|
||||
--wa-color-purple-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
|
||||
--wa-color-purple-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
|
||||
--wa-color-purple-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
|
||||
--wa-color-purple-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
|
||||
--wa-color-purple-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
|
||||
--wa-color-purple-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
|
||||
--wa-color-purple-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
|
||||
--wa-color-purple-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
|
||||
--wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
|
||||
--wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
|
||||
|
||||
@@ -133,13 +133,10 @@ function hueToChalk(hue) {
|
||||
ret = chalk[hue];
|
||||
}
|
||||
switch (hue) {
|
||||
case 'teal':
|
||||
ret = chalk.cyan;
|
||||
break;
|
||||
case 'indigo':
|
||||
ret = chalk.hex('#8a8beb');
|
||||
break;
|
||||
case 'violet':
|
||||
case 'purple':
|
||||
ret = chalk.hex('#a94dc6');
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -41,18 +41,18 @@
|
||||
--wa-color-green-05: #02160a /* oklch(17.815% 0.03799 156.47) */;
|
||||
--wa-color-green: var(--wa-color-green-70);
|
||||
|
||||
--wa-color-teal-95: #d1fbf2 /* oklch(95.61% 0.04472 180.87) */;
|
||||
--wa-color-teal-90: #9bf6e4 /* oklch(91.092% 0.09113 180.19) */;
|
||||
--wa-color-teal-80: #43e0ca /* oklch(82.113% 0.13179 181.48) */;
|
||||
--wa-color-teal-70: #1ac4b0 /* oklch(73.775% 0.12864 181.89) */;
|
||||
--wa-color-teal-60: #0ea798 /* oklch(65.521% 0.11439 183.58) */;
|
||||
--wa-color-teal-50: #0e837a /* oklch(55.027% 0.0937 186.25) */;
|
||||
--wa-color-teal-40: #11635e /* oklch(45.289% 0.07357 188.54) */;
|
||||
--wa-color-teal-30: #134d49 /* oklch(38.278% 0.05833 188.33) */;
|
||||
--wa-color-teal-20: #073938 /* oklch(31.345% 0.04977 192.86) */;
|
||||
--wa-color-teal-10: #022222 /* oklch(22.914% 0.03701 194.88) */;
|
||||
--wa-color-teal-05: #011515 /* oklch(17.806% 0.02865 194.89) */;
|
||||
--wa-color-teal: var(--wa-color-teal-80);
|
||||
--wa-color-cyan-95: #d1fbf2 /* oklch(95.61% 0.04472 180.87) */;
|
||||
--wa-color-cyan-90: #9bf6e4 /* oklch(91.092% 0.09113 180.19) */;
|
||||
--wa-color-cyan-80: #43e0ca /* oklch(82.113% 0.13179 181.48) */;
|
||||
--wa-color-cyan-70: #1ac4b0 /* oklch(73.775% 0.12864 181.89) */;
|
||||
--wa-color-cyan-60: #0ea798 /* oklch(65.521% 0.11439 183.58) */;
|
||||
--wa-color-cyan-50: #0e837a /* oklch(55.027% 0.0937 186.25) */;
|
||||
--wa-color-cyan-40: #11635e /* oklch(45.289% 0.07357 188.54) */;
|
||||
--wa-color-cyan-30: #134d49 /* oklch(38.278% 0.05833 188.33) */;
|
||||
--wa-color-cyan-20: #073938 /* oklch(31.345% 0.04977 192.86) */;
|
||||
--wa-color-cyan-10: #022222 /* oklch(22.914% 0.03701 194.88) */;
|
||||
--wa-color-cyan-05: #011515 /* oklch(17.806% 0.02865 194.89) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-80);
|
||||
|
||||
--wa-color-blue-95: #ebf3ff /* oklch(96.164% 0.01825 258.35) */;
|
||||
--wa-color-blue-90: #d6e7fe /* oklch(92.238% 0.03631 255.96) */;
|
||||
@@ -80,18 +80,18 @@
|
||||
--wa-color-indigo-05: #100f29 /* oklch(18.672% 0.05145 281.93) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
|
||||
--wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
|
||||
--wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
|
||||
--wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
|
||||
--wa-color-violet-70: #cb99fd /* oklch(76.728% 0.14746 306.23) */;
|
||||
--wa-color-violet-60: #b875fb /* oklch(68.999% 0.19637 304.88) */;
|
||||
--wa-color-violet-50: #9e44f3 /* oklch(59.348% 0.24636 302.91) */;
|
||||
--wa-color-violet-40: #7e22cd /* oklch(49.465% 0.23596 302.16) */;
|
||||
--wa-color-violet-30: #63209a /* oklch(41.52% 0.18376 304.12) */;
|
||||
--wa-color-violet-20: #4b1079 /* oklch(33.995% 0.16043 303.8) */;
|
||||
--wa-color-violet-10: #2f0451 /* oklch(25.081% 0.12442 302.96) */;
|
||||
--wa-color-violet-05: #1e0238 /* oklch(19.51% 0.09712 301.8) */;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
--wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
|
||||
--wa-color-purple-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
|
||||
--wa-color-purple-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
|
||||
--wa-color-purple-70: #cb99fd /* oklch(76.728% 0.14746 306.23) */;
|
||||
--wa-color-purple-60: #b875fb /* oklch(68.999% 0.19637 304.88) */;
|
||||
--wa-color-purple-50: #9e44f3 /* oklch(59.348% 0.24636 302.91) */;
|
||||
--wa-color-purple-40: #7e22cd /* oklch(49.465% 0.23596 302.16) */;
|
||||
--wa-color-purple-30: #63209a /* oklch(41.52% 0.18376 304.12) */;
|
||||
--wa-color-purple-20: #4b1079 /* oklch(33.995% 0.16043 303.8) */;
|
||||
--wa-color-purple-10: #2f0451 /* oklch(25.081% 0.12442 302.96) */;
|
||||
--wa-color-purple-05: #1e0238 /* oklch(19.51% 0.09712 301.8) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
|
||||
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
|
||||
--wa-color-gray-90: #e3e5e9 /* oklch(92.152% 0.00582 264.53) */;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import url('../../color/bright.css');
|
||||
@import url('../default/color.css');
|
||||
@import url('../../brand/blue.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
@@ -14,24 +15,24 @@
|
||||
/**
|
||||
* 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);
|
||||
--wa-color-success-fill-normal: var(--wa-color-teal-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-teal-80);
|
||||
--wa-color-success-border-quiet: var(--wa-color-teal-70);
|
||||
--wa-color-success-border-normal: var(--wa-color-teal-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-teal-30);
|
||||
--wa-color-success-on-quiet: var(--wa-color-teal-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-teal-40);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-cyan-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-cyan-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-cyan-80);
|
||||
--wa-color-success-border-quiet: var(--wa-color-cyan-70);
|
||||
--wa-color-success-border-normal: var(--wa-color-cyan-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-cyan-30);
|
||||
--wa-color-success-on-quiet: var(--wa-color-cyan-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-cyan-40);
|
||||
--wa-color-success-on-loud: var(--wa-color-text-normal);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
@@ -74,24 +75,24 @@
|
||||
/**
|
||||
* 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);
|
||||
--wa-color-success-fill-normal: var(--wa-color-teal-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-teal-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-teal-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-teal-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-teal-80);
|
||||
--wa-color-success-on-quiet: var(--wa-color-teal-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-teal-80);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-cyan-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-cyan-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-cyan-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-cyan-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-cyan-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-cyan-80);
|
||||
--wa-color-success-on-quiet: var(--wa-color-cyan-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-cyan-80);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import url('../../color/rudimentary.css');
|
||||
@import url('../default/color.css');
|
||||
@import url('../../brand/purple.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);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import url('../../color/anodized.css');
|
||||
@import url('../default/color.css');
|
||||
@import url('../../brand/cyan.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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user