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

Remove clamped color tokens (#1050)

Browse Source
This commit is contained in:
Lindsay M
2025-06-10 15:44:33 -04:00
committed by GitHub
parent 63ec9d5bc1
commit ff61ac002f
60 changed files with 109 additions and 1326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/webawesome/docs/docs/experimental/clamped-colors.njk
View File

@@ -1,44 +0,0 @@
---
title: Clamped Color Tokens
layout: block
---
{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
<table class="colors">
<thead>
<tr>
<th></th>
<th class="core-column">Core tint</th>
{% for tint in tints -%}
<th>{{ tint }}</th>
{%- endfor %}
</tr>
</thead>
{% for hue in hues -%}
<tr class="wa-color-{{ hue }}">
<th>{{ hue | capitalize }}</th>
<td class="core-column">
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
{{ palettes[paletteId][hue].maxChromaTint }}
<wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
</div>
</td>
{% for tint in tints -%}
<td>
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
<wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
</div>
</td>
{%- endfor -%}
</tr>
{%- endfor %}
</table>
<style>
.core-column .color.swatch::before {
counter-reset: key var(--key);
content: counter(key);
}
</style>

17
packages/webawesome/src/styles/brand/blue.css
View File

@@ -16,23 +16,6 @@
--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);
--wa-color-brand-lt-50: var(--wa-color-blue-lt-50);
--wa-color-brand-gte-50: var(--wa-color-blue-gte-50);
--wa-color-brand-lt-60: var(--wa-color-blue-lt-60);
--wa-color-brand-gte-60: var(--wa-color-blue-gte-60);
--wa-color-brand-lt-70: var(--wa-color-blue-lt-70);
--wa-color-brand-gte-70: var(--wa-color-blue-gte-70);
--wa-color-brand-max-50: var(--wa-color-blue-max-50);
--wa-color-brand-min-50: var(--wa-color-blue-min-50);
--wa-color-brand-max-60: var(--wa-color-blue-max-60);
--wa-color-brand-min-60: var(--wa-color-blue-min-60);
--wa-color-brand-max-70: var(--wa-color-blue-max-70);
--wa-color-brand-min-70: var(--wa-color-blue-min-70);
--wa-color-brand-on: var(--wa-color-blue-on);
}
}

17
packages/webawesome/src/styles/brand/cyan.css
View File

@@ -16,23 +16,6 @@
--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);
--wa-color-brand-lt-50: var(--wa-color-cyan-lt-50);
--wa-color-brand-gte-50: var(--wa-color-cyan-gte-50);
--wa-color-brand-lt-60: var(--wa-color-cyan-lt-60);
--wa-color-brand-gte-60: var(--wa-color-cyan-gte-60);
--wa-color-brand-lt-70: var(--wa-color-cyan-lt-70);
--wa-color-brand-gte-70: var(--wa-color-cyan-gte-70);
--wa-color-brand-max-50: var(--wa-color-cyan-max-50);
--wa-color-brand-min-50: var(--wa-color-cyan-min-50);
--wa-color-brand-max-60: var(--wa-color-cyan-max-60);
--wa-color-brand-min-60: var(--wa-color-cyan-min-60);
--wa-color-brand-max-70: var(--wa-color-cyan-max-70);
--wa-color-brand-min-70: var(--wa-color-cyan-min-70);
--wa-color-brand-on: var(--wa-color-cyan-on);
}
}

17
packages/webawesome/src/styles/brand/gray.css
View File

@@ -16,23 +16,6 @@
--wa-color-brand-10: var(--wa-color-gray-10);
--wa-color-brand-05: var(--wa-color-gray-05);
--wa-color-brand: var(--wa-color-gray);
--wa-color-brand-lt-50: var(--wa-color-gray-lt-50);
--wa-color-brand-gte-50: var(--wa-color-gray-gte-50);
--wa-color-brand-lt-60: var(--wa-color-gray-lt-60);
--wa-color-brand-gte-60: var(--wa-color-gray-gte-60);
--wa-color-brand-lt-70: var(--wa-color-gray-lt-70);
--wa-color-brand-gte-70: var(--wa-color-gray-gte-70);
--wa-color-brand-max-50: var(--wa-color-gray-max-50);
--wa-color-brand-min-50: var(--wa-color-gray-min-50);
--wa-color-brand-max-60: var(--wa-color-gray-max-60);
--wa-color-brand-min-60: var(--wa-color-gray-min-60);
--wa-color-brand-max-70: var(--wa-color-gray-max-70);
--wa-color-brand-min-70: var(--wa-color-gray-min-70);
--wa-color-brand-on: var(--wa-color-gray-on);
}
}

17
packages/webawesome/src/styles/brand/green.css
View File

@@ -16,23 +16,6 @@
--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);
--wa-color-brand-lt-50: var(--wa-color-green-lt-50);
--wa-color-brand-gte-50: var(--wa-color-green-gte-50);
--wa-color-brand-lt-60: var(--wa-color-green-lt-60);
--wa-color-brand-gte-60: var(--wa-color-green-gte-60);
--wa-color-brand-lt-70: var(--wa-color-green-lt-70);
--wa-color-brand-gte-70: var(--wa-color-green-gte-70);
--wa-color-brand-max-50: var(--wa-color-green-max-50);
--wa-color-brand-min-50: var(--wa-color-green-min-50);
--wa-color-brand-max-60: var(--wa-color-green-max-60);
--wa-color-brand-min-60: var(--wa-color-green-min-60);
--wa-color-brand-max-70: var(--wa-color-green-max-70);
--wa-color-brand-min-70: var(--wa-color-green-min-70);
--wa-color-brand-on: var(--wa-color-green-on);
}
}

17
packages/webawesome/src/styles/brand/indigo.css
View File

@@ -16,23 +16,6 @@
--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);
--wa-color-brand-lt-50: var(--wa-color-indigo-lt-50);
--wa-color-brand-gte-50: var(--wa-color-indigo-gte-50);
--wa-color-brand-lt-60: var(--wa-color-indigo-lt-60);
--wa-color-brand-gte-60: var(--wa-color-indigo-gte-60);
--wa-color-brand-lt-70: var(--wa-color-indigo-lt-70);
--wa-color-brand-gte-70: var(--wa-color-indigo-gte-70);
--wa-color-brand-max-50: var(--wa-color-indigo-max-50);
--wa-color-brand-min-50: var(--wa-color-indigo-min-50);
--wa-color-brand-max-60: var(--wa-color-indigo-max-60);
--wa-color-brand-min-60: var(--wa-color-indigo-min-60);
--wa-color-brand-max-70: var(--wa-color-indigo-max-70);
--wa-color-brand-min-70: var(--wa-color-indigo-min-70);
--wa-color-brand-on: var(--wa-color-indigo-on);
}
}

17
packages/webawesome/src/styles/brand/orange.css
View File

@@ -16,23 +16,6 @@
--wa-color-brand-10: var(--wa-color-orange-10);
--wa-color-brand-05: var(--wa-color-orange-05);
--wa-color-brand: var(--wa-color-orange);
--wa-color-brand-lt-50: var(--wa-color-orange-lt-50);
--wa-color-brand-gte-50: var(--wa-color-orange-gte-50);
--wa-color-brand-lt-60: var(--wa-color-orange-lt-60);
--wa-color-brand-gte-60: var(--wa-color-orange-gte-60);
--wa-color-brand-lt-70: var(--wa-color-orange-lt-70);
--wa-color-brand-gte-70: var(--wa-color-orange-gte-70);
--wa-color-brand-max-50: var(--wa-color-orange-max-50);
--wa-color-brand-min-50: var(--wa-color-orange-min-50);
--wa-color-brand-max-60: var(--wa-color-orange-max-60);
--wa-color-brand-min-60: var(--wa-color-orange-min-60);
--wa-color-brand-max-70: var(--wa-color-orange-max-70);
--wa-color-brand-min-70: var(--wa-color-orange-min-70);
--wa-color-brand-on: var(--wa-color-orange-on);
}
}

17
packages/webawesome/src/styles/brand/pink.css
View File

@@ -16,23 +16,6 @@
--wa-color-brand-10: var(--wa-color-pink-10);
--wa-color-brand-05: var(--wa-color-pink-05);
--wa-color-brand: var(--wa-color-pink);
--wa-color-brand-lt-50: var(--wa-color-pink-lt-50);
--wa-color-brand-gte-50: var(--wa-color-pink-gte-50);
--wa-color-brand-lt-60: var(--wa-color-pink-lt-60);
--wa-color-brand-gte-60: var(--wa-color-pink-gte-60);
--wa-color-brand-lt-70: var(--wa-color-pink-lt-70);
--wa-color-brand-gte-70: var(--wa-color-pink-gte-70);
--wa-color-brand-max-50: var(--wa-color-pink-max-50);
--wa-color-brand-min-50: var(--wa-color-pink-min-50);
--wa-color-brand-max-60: var(--wa-color-pink-max-60);
--wa-color-brand-min-60: var(--wa-color-pink-min-60);
--wa-color-brand-max-70: var(--wa-color-pink-max-70);
--wa-color-brand-min-70: var(--wa-color-pink-min-70);
--wa-color-brand-on: var(--wa-color-pink-on);
}
}

17
packages/webawesome/src/styles/brand/purple.css
View File

@@ -16,23 +16,6 @@
--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);
--wa-color-brand-lt-50: var(--wa-color-purple-lt-50);
--wa-color-brand-gte-50: var(--wa-color-purple-gte-50);
--wa-color-brand-lt-60: var(--wa-color-purple-lt-60);
--wa-color-brand-gte-60: var(--wa-color-purple-gte-60);
--wa-color-brand-lt-70: var(--wa-color-purple-lt-70);
--wa-color-brand-gte-70: var(--wa-color-purple-gte-70);
--wa-color-brand-max-50: var(--wa-color-purple-max-50);
--wa-color-brand-min-50: var(--wa-color-purple-min-50);
--wa-color-brand-max-60: var(--wa-color-purple-max-60);
--wa-color-brand-min-60: var(--wa-color-purple-min-60);
--wa-color-brand-max-70: var(--wa-color-purple-max-70);
--wa-color-brand-min-70: var(--wa-color-purple-min-70);
--wa-color-brand-on: var(--wa-color-purple-on);
}
}

17
packages/webawesome/src/styles/brand/red.css
View File

@@ -16,23 +16,6 @@
--wa-color-brand-10: var(--wa-color-red-10);
--wa-color-brand-05: var(--wa-color-red-05);
--wa-color-brand: var(--wa-color-red);
--wa-color-brand-lt-50: var(--wa-color-red-lt-50);
--wa-color-brand-gte-50: var(--wa-color-red-gte-50);
--wa-color-brand-lt-60: var(--wa-color-red-lt-60);
--wa-color-brand-gte-60: var(--wa-color-red-gte-60);
--wa-color-brand-lt-70: var(--wa-color-red-lt-70);
--wa-color-brand-gte-70: var(--wa-color-red-gte-70);
--wa-color-brand-max-50: var(--wa-color-red-max-50);
--wa-color-brand-min-50: var(--wa-color-red-min-50);
--wa-color-brand-max-60: var(--wa-color-red-max-60);
--wa-color-brand-min-60: var(--wa-color-red-min-60);
--wa-color-brand-max-70: var(--wa-color-red-max-70);
--wa-color-brand-min-70: var(--wa-color-red-min-70);
--wa-color-brand-on: var(--wa-color-red-on);
}
}

17
packages/webawesome/src/styles/brand/yellow.css
View File

@@ -16,23 +16,6 @@
--wa-color-brand-10: var(--wa-color-yellow-10);
--wa-color-brand-05: var(--wa-color-yellow-05);
--wa-color-brand: var(--wa-color-yellow);
--wa-color-brand-lt-50: var(--wa-color-yellow-lt-50);
--wa-color-brand-gte-50: var(--wa-color-yellow-gte-50);
--wa-color-brand-lt-60: var(--wa-color-yellow-lt-60);
--wa-color-brand-gte-60: var(--wa-color-yellow-gte-60);
--wa-color-brand-lt-70: var(--wa-color-yellow-lt-70);
--wa-color-brand-gte-70: var(--wa-color-yellow-gte-70);
--wa-color-brand-max-50: var(--wa-color-yellow-max-50);
--wa-color-brand-min-50: var(--wa-color-yellow-min-50);
--wa-color-brand-max-60: var(--wa-color-yellow-max-60);
--wa-color-brand-min-60: var(--wa-color-yellow-min-60);
--wa-color-brand-max-70: var(--wa-color-yellow-max-70);
--wa-color-brand-min-70: var(--wa-color-yellow-min-70);
--wa-color-brand-on: var(--wa-color-yellow-on);
}
}

384
packages/webawesome/src/styles/color/base.css
View File

@@ -5,375 +5,31 @@
:where(:root),
:host {
/**
* Conditional tokens for use in color-mix()
* --wa-color-{hue}-lt-N ➡️ 100% if key < N, 0% otherwise
* --wa-color-{hue}-gte-N ➡️ 100% if key >= N, 0% otherwise
* Conditional tokens to check if the key color is >= 60
* Key colors are the most colorful tint in a scale, recorded as --wa-color-{hue} in each palette
* The numeric value of the key is isolated as --wa-color-{hue}-key
* If key < 60, the result is 0%
* If key >= 60, the result is 100%
* Intended to be used in the color-mix() functions below
*/
--wa-color-red-lt-50: calc(clamp(0, 50 - var(--wa-color-red-key), 1) * 100%);
--wa-color-red-gte-50: calc(100% - var(--wa-color-red-lt-50));
--wa-color-red-lt-60: calc(clamp(0, 60 - var(--wa-color-red-key), 1) * 100%);
--wa-color-red-gte-60: calc(100% - var(--wa-color-red-lt-60));
--wa-color-red-lt-70: calc(clamp(0, 70 - var(--wa-color-red-key), 1) * 100%);
--wa-color-red-gte-70: calc(100% - var(--wa-color-red-lt-70));
--wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
--wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
--wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
--wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
--wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
--wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
--wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
--wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
--wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
--wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));
--wa-color-orange-lt-50: calc(clamp(0, 50 - var(--wa-color-orange-key), 1) * 100%);
--wa-color-orange-gte-50: calc(100% - var(--wa-color-orange-lt-50));
--wa-color-orange-lt-60: calc(clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%);
--wa-color-orange-gte-60: calc(100% - var(--wa-color-orange-lt-60));
--wa-color-orange-lt-70: calc(clamp(0, 70 - var(--wa-color-orange-key), 1) * 100%);
--wa-color-orange-gte-70: calc(100% - var(--wa-color-orange-lt-70));
--wa-color-yellow-lt-50: calc(clamp(0, 50 - var(--wa-color-yellow-key), 1) * 100%);
--wa-color-yellow-gte-50: calc(100% - var(--wa-color-yellow-lt-50));
--wa-color-yellow-lt-60: calc(clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%);
--wa-color-yellow-gte-60: calc(100% - var(--wa-color-yellow-lt-60));
--wa-color-yellow-lt-70: calc(clamp(0, 70 - var(--wa-color-yellow-key), 1) * 100%);
--wa-color-yellow-gte-70: calc(100% - var(--wa-color-yellow-lt-70));
--wa-color-green-lt-50: calc(clamp(0, 50 - var(--wa-color-green-key), 1) * 100%);
--wa-color-green-gte-50: calc(100% - var(--wa-color-green-lt-50));
--wa-color-green-lt-60: calc(clamp(0, 60 - var(--wa-color-green-key), 1) * 100%);
--wa-color-green-gte-60: calc(100% - var(--wa-color-green-lt-60));
--wa-color-green-lt-70: calc(clamp(0, 70 - var(--wa-color-green-key), 1) * 100%);
--wa-color-green-gte-70: calc(100% - var(--wa-color-green-lt-70));
--wa-color-cyan-lt-50: calc(clamp(0, 50 - var(--wa-color-cyan-key), 1) * 100%);
--wa-color-cyan-gte-50: calc(100% - var(--wa-color-cyan-lt-50));
--wa-color-cyan-lt-60: calc(clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%);
--wa-color-cyan-gte-60: calc(100% - var(--wa-color-cyan-lt-60));
--wa-color-cyan-lt-70: calc(clamp(0, 70 - var(--wa-color-cyan-key), 1) * 100%);
--wa-color-cyan-gte-70: calc(100% - var(--wa-color-cyan-lt-70));
--wa-color-blue-lt-50: calc(clamp(0, 50 - var(--wa-color-blue-key), 1) * 100%);
--wa-color-blue-gte-50: calc(100% - var(--wa-color-blue-lt-50));
--wa-color-blue-lt-60: calc(clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%);
--wa-color-blue-gte-60: calc(100% - var(--wa-color-blue-lt-60));
--wa-color-blue-lt-70: calc(clamp(0, 70 - var(--wa-color-blue-key), 1) * 100%);
--wa-color-blue-gte-70: calc(100% - var(--wa-color-blue-lt-70));
--wa-color-indigo-lt-50: calc(clamp(0, 50 - var(--wa-color-indigo-key), 1) * 100%);
--wa-color-indigo-gte-50: calc(100% - var(--wa-color-indigo-lt-50));
--wa-color-indigo-lt-60: calc(clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%);
--wa-color-indigo-gte-60: calc(100% - var(--wa-color-indigo-lt-60));
--wa-color-indigo-lt-70: calc(clamp(0, 70 - var(--wa-color-indigo-key), 1) * 100%);
--wa-color-indigo-gte-70: calc(100% - var(--wa-color-indigo-lt-70));
--wa-color-purple-lt-50: calc(clamp(0, 50 - var(--wa-color-purple-key), 1) * 100%);
--wa-color-purple-gte-50: calc(100% - var(--wa-color-purple-lt-50));
--wa-color-purple-lt-60: calc(clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%);
--wa-color-purple-gte-60: calc(100% - var(--wa-color-purple-lt-60));
--wa-color-purple-lt-70: calc(clamp(0, 70 - var(--wa-color-purple-key), 1) * 100%);
--wa-color-purple-gte-70: calc(100% - var(--wa-color-purple-lt-70));
--wa-color-pink-lt-50: calc(clamp(0, 50 - var(--wa-color-pink-key), 1) * 100%);
--wa-color-pink-gte-50: calc(100% - var(--wa-color-pink-lt-50));
--wa-color-pink-lt-60: calc(clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%);
--wa-color-pink-gte-60: calc(100% - var(--wa-color-pink-lt-60));
--wa-color-pink-lt-70: calc(clamp(0, 70 - var(--wa-color-pink-key), 1) * 100%);
--wa-color-pink-gte-70: calc(100% - var(--wa-color-pink-lt-70));
--wa-color-gray-lt-50: calc(clamp(0, 50 - var(--wa-color-gray-key), 1) * 100%);
--wa-color-gray-gte-50: calc(100% - var(--wa-color-gray-lt-50));
--wa-color-gray-lt-60: calc(clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%);
--wa-color-gray-gte-60: calc(100% - var(--wa-color-gray-lt-60));
--wa-color-gray-lt-70: calc(clamp(0, 70 - var(--wa-color-gray-key), 1) * 100%);
--wa-color-gray-gte-70: calc(100% - var(--wa-color-gray-lt-70));
/*
* Convenience tokens for common tint cutoffs
* --wa-color-{hue}-N-max ➡️ var(--color-{hue}) if key <= N, var(--color-{hue}-N) otherwise
* --wa-color-{hue}-N-min ➡️ var(--color-{hue}) if key >= N, var(--color-{hue}-N) otherwise
/**
* Tokens to set text color with appropriate WCAG 2.1 contrast
* If key < 60, the text color is white
* If key >= 60, the text color is {hue}-10
*/
--wa-color-red-max-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-50), var(--wa-color-red-50));
--wa-color-red-min-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-50), var(--wa-color-red-50));
--wa-color-red-max-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-60), var(--wa-color-red-60));
--wa-color-red-min-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-60), var(--wa-color-red-60));
--wa-color-red-max-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-70), var(--wa-color-red-70));
--wa-color-red-min-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-70), var(--wa-color-red-70));
--wa-color-orange-max-50: color-mix(
in oklab,
var(--wa-color-orange) var(--wa-color-orange-lt-50),
var(--wa-color-orange-50)
);
--wa-color-orange-min-50: color-mix(
in oklab,
var(--wa-color-orange) var(--wa-color-orange-gte-50),
var(--wa-color-orange-50)
);
--wa-color-orange-max-60: color-mix(
in oklab,
var(--wa-color-orange) var(--wa-color-orange-lt-60),
var(--wa-color-orange-60)
);
--wa-color-orange-min-60: color-mix(
in oklab,
var(--wa-color-orange) var(--wa-color-orange-gte-60),
var(--wa-color-orange-60)
);
--wa-color-orange-max-70: color-mix(
in oklab,
var(--wa-color-orange) var(--wa-color-orange-lt-70),
var(--wa-color-orange-70)
);
--wa-color-orange-min-70: color-mix(
in oklab,
var(--wa-color-orange) var(--wa-color-orange-gte-70),
var(--wa-color-orange-70)
);
--wa-color-yellow-max-50: color-mix(
in oklab,
var(--wa-color-yellow) var(--wa-color-yellow-lt-50),
var(--wa-color-yellow-50)
);
--wa-color-yellow-min-50: color-mix(
in oklab,
var(--wa-color-yellow) var(--wa-color-yellow-gte-50),
var(--wa-color-yellow-50)
);
--wa-color-yellow-max-60: color-mix(
in oklab,
var(--wa-color-yellow) var(--wa-color-yellow-lt-60),
var(--wa-color-yellow-60)
);
--wa-color-yellow-min-60: color-mix(
in oklab,
var(--wa-color-yellow) var(--wa-color-yellow-gte-60),
var(--wa-color-yellow-60)
);
--wa-color-yellow-max-70: color-mix(
in oklab,
var(--wa-color-yellow) var(--wa-color-yellow-lt-70),
var(--wa-color-yellow-70)
);
--wa-color-yellow-min-70: color-mix(
in oklab,
var(--wa-color-yellow) var(--wa-color-yellow-gte-70),
var(--wa-color-yellow-70)
);
--wa-color-green-max-50: color-mix(
in oklab,
var(--wa-color-green) var(--wa-color-green-lt-50),
var(--wa-color-green-50)
);
--wa-color-green-min-50: color-mix(
in oklab,
var(--wa-color-green) var(--wa-color-green-gte-50),
var(--wa-color-green-50)
);
--wa-color-green-max-60: color-mix(
in oklab,
var(--wa-color-green) var(--wa-color-green-lt-60),
var(--wa-color-green-60)
);
--wa-color-green-min-60: color-mix(
in oklab,
var(--wa-color-green) var(--wa-color-green-gte-60),
var(--wa-color-green-60)
);
--wa-color-green-max-70: color-mix(
in oklab,
var(--wa-color-green) var(--wa-color-green-lt-70),
var(--wa-color-green-70)
);
--wa-color-green-min-70: color-mix(
in oklab,
var(--wa-color-green) var(--wa-color-green-gte-70),
var(--wa-color-green-70)
);
--wa-color-cyan-max-50: color-mix(
in oklab,
var(--wa-color-cyan) var(--wa-color-cyan-lt-50),
var(--wa-color-cyan-50)
);
--wa-color-cyan-min-50: color-mix(
in oklab,
var(--wa-color-cyan) var(--wa-color-cyan-gte-50),
var(--wa-color-cyan-50)
);
--wa-color-cyan-max-60: color-mix(
in oklab,
var(--wa-color-cyan) var(--wa-color-cyan-lt-60),
var(--wa-color-cyan-60)
);
--wa-color-cyan-min-60: color-mix(
in oklab,
var(--wa-color-cyan) var(--wa-color-cyan-gte-60),
var(--wa-color-cyan-60)
);
--wa-color-cyan-max-70: color-mix(
in oklab,
var(--wa-color-cyan) var(--wa-color-cyan-lt-70),
var(--wa-color-cyan-70)
);
--wa-color-cyan-min-70: color-mix(
in oklab,
var(--wa-color-cyan) var(--wa-color-cyan-gte-70),
var(--wa-color-cyan-70)
);
--wa-color-blue-max-50: color-mix(
in oklab,
var(--wa-color-blue) var(--wa-color-blue-lt-50),
var(--wa-color-blue-50)
);
--wa-color-blue-min-50: color-mix(
in oklab,
var(--wa-color-blue) var(--wa-color-blue-gte-50),
var(--wa-color-blue-50)
);
--wa-color-blue-max-60: color-mix(
in oklab,
var(--wa-color-blue) var(--wa-color-blue-lt-60),
var(--wa-color-blue-60)
);
--wa-color-blue-min-60: color-mix(
in oklab,
var(--wa-color-blue) var(--wa-color-blue-gte-60),
var(--wa-color-blue-60)
);
--wa-color-blue-max-70: color-mix(
in oklab,
var(--wa-color-blue) var(--wa-color-blue-lt-70),
var(--wa-color-blue-70)
);
--wa-color-blue-min-70: color-mix(
in oklab,
var(--wa-color-blue) var(--wa-color-blue-gte-70),
var(--wa-color-blue-70)
);
--wa-color-indigo-max-50: color-mix(
in oklab,
var(--wa-color-indigo) var(--wa-color-indigo-lt-50),
var(--wa-color-indigo-50)
);
--wa-color-indigo-min-50: color-mix(
in oklab,
var(--wa-color-indigo) var(--wa-color-indigo-gte-50),
var(--wa-color-indigo-50)
);
--wa-color-indigo-max-60: color-mix(
in oklab,
var(--wa-color-indigo) var(--wa-color-indigo-lt-60),
var(--wa-color-indigo-60)
);
--wa-color-indigo-min-60: color-mix(
in oklab,
var(--wa-color-indigo) var(--wa-color-indigo-gte-60),
var(--wa-color-indigo-60)
);
--wa-color-indigo-max-70: color-mix(
in oklab,
var(--wa-color-indigo) var(--wa-color-indigo-lt-70),
var(--wa-color-indigo-70)
);
--wa-color-indigo-min-70: color-mix(
in oklab,
var(--wa-color-indigo) var(--wa-color-indigo-gte-70),
var(--wa-color-indigo-70)
);
--wa-color-purple-max-50: color-mix(
in oklab,
var(--wa-color-purple) var(--wa-color-purple-lt-50),
var(--wa-color-purple-50)
);
--wa-color-purple-min-50: color-mix(
in oklab,
var(--wa-color-purple) var(--wa-color-purple-gte-50),
var(--wa-color-purple-50)
);
--wa-color-purple-max-60: color-mix(
in oklab,
var(--wa-color-purple) var(--wa-color-purple-lt-60),
var(--wa-color-purple-60)
);
--wa-color-purple-min-60: color-mix(
in oklab,
var(--wa-color-purple) var(--wa-color-purple-gte-60),
var(--wa-color-purple-60)
);
--wa-color-purple-max-70: color-mix(
in oklab,
var(--wa-color-purple) var(--wa-color-purple-lt-70),
var(--wa-color-purple-70)
);
--wa-color-purple-min-70: color-mix(
in oklab,
var(--wa-color-purple) var(--wa-color-purple-gte-70),
var(--wa-color-purple-70)
);
--wa-color-pink-max-50: color-mix(
in oklab,
var(--wa-color-pink) var(--wa-color-pink-lt-50),
var(--wa-color-pink-50)
);
--wa-color-pink-min-50: color-mix(
in oklab,
var(--wa-color-pink) var(--wa-color-pink-gte-50),
var(--wa-color-pink-50)
);
--wa-color-pink-max-60: color-mix(
in oklab,
var(--wa-color-pink) var(--wa-color-pink-lt-60),
var(--wa-color-pink-60)
);
--wa-color-pink-min-60: color-mix(
in oklab,
var(--wa-color-pink) var(--wa-color-pink-gte-60),
var(--wa-color-pink-60)
);
--wa-color-pink-max-70: color-mix(
in oklab,
var(--wa-color-pink) var(--wa-color-pink-lt-70),
var(--wa-color-pink-70)
);
--wa-color-pink-min-70: color-mix(
in oklab,
var(--wa-color-pink) var(--wa-color-pink-gte-70),
var(--wa-color-pink-70)
);
--wa-color-gray-max-50: color-mix(
in oklab,
var(--wa-color-gray) var(--wa-color-gray-lt-50),
var(--wa-color-gray-50)
);
--wa-color-gray-min-50: color-mix(
in oklab,
var(--wa-color-gray) var(--wa-color-gray-gte-50),
var(--wa-color-gray-50)
);
--wa-color-gray-max-60: color-mix(
in oklab,
var(--wa-color-gray) var(--wa-color-gray-lt-60),
var(--wa-color-gray-60)
);
--wa-color-gray-min-60: color-mix(
in oklab,
var(--wa-color-gray) var(--wa-color-gray-gte-60),
var(--wa-color-gray-60)
);
--wa-color-gray-max-70: color-mix(
in oklab,
var(--wa-color-gray) var(--wa-color-gray-lt-70),
var(--wa-color-gray-70)
);
--wa-color-gray-min-70: color-mix(
in oklab,
var(--wa-color-gray) var(--wa-color-gray-gte-70),
var(--wa-color-gray-70)
);
/* Text color: white if key < 60, {hue}-10 otherwise */
--wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
--wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
--wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);

17
packages/webawesome/src/styles/danger/blue.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-blue-10);
--wa-color-danger-05: var(--wa-color-blue-05);
--wa-color-danger: var(--wa-color-blue);
--wa-color-danger-lt-50: var(--wa-color-blue-lt-50);
--wa-color-danger-gte-50: var(--wa-color-blue-gte-50);
--wa-color-danger-lt-60: var(--wa-color-blue-lt-60);
--wa-color-danger-gte-60: var(--wa-color-blue-gte-60);
--wa-color-danger-lt-70: var(--wa-color-blue-lt-70);
--wa-color-danger-gte-70: var(--wa-color-blue-gte-70);
--wa-color-danger-max-50: var(--wa-color-blue-max-50);
--wa-color-danger-min-50: var(--wa-color-blue-min-50);
--wa-color-danger-max-60: var(--wa-color-blue-max-60);
--wa-color-danger-min-60: var(--wa-color-blue-min-60);
--wa-color-danger-max-70: var(--wa-color-blue-max-70);
--wa-color-danger-min-70: var(--wa-color-blue-min-70);
--wa-color-danger-on: var(--wa-color-blue-on);
}
}

17
packages/webawesome/src/styles/danger/cyan.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-cyan-10);
--wa-color-danger-05: var(--wa-color-cyan-05);
--wa-color-danger: var(--wa-color-cyan);
--wa-color-danger-lt-50: var(--wa-color-cyan-lt-50);
--wa-color-danger-gte-50: var(--wa-color-cyan-gte-50);
--wa-color-danger-lt-60: var(--wa-color-cyan-lt-60);
--wa-color-danger-gte-60: var(--wa-color-cyan-gte-60);
--wa-color-danger-lt-70: var(--wa-color-cyan-lt-70);
--wa-color-danger-gte-70: var(--wa-color-cyan-gte-70);
--wa-color-danger-max-50: var(--wa-color-cyan-max-50);
--wa-color-danger-min-50: var(--wa-color-cyan-min-50);
--wa-color-danger-max-60: var(--wa-color-cyan-max-60);
--wa-color-danger-min-60: var(--wa-color-cyan-min-60);
--wa-color-danger-max-70: var(--wa-color-cyan-max-70);
--wa-color-danger-min-70: var(--wa-color-cyan-min-70);
--wa-color-danger-on: var(--wa-color-cyan-on);
}
}

17
packages/webawesome/src/styles/danger/gray.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-gray-10);
--wa-color-danger-05: var(--wa-color-gray-05);
--wa-color-danger: var(--wa-color-gray);
--wa-color-danger-lt-50: var(--wa-color-gray-lt-50);
--wa-color-danger-gte-50: var(--wa-color-gray-gte-50);
--wa-color-danger-lt-60: var(--wa-color-gray-lt-60);
--wa-color-danger-gte-60: var(--wa-color-gray-gte-60);
--wa-color-danger-lt-70: var(--wa-color-gray-lt-70);
--wa-color-danger-gte-70: var(--wa-color-gray-gte-70);
--wa-color-danger-max-50: var(--wa-color-gray-max-50);
--wa-color-danger-min-50: var(--wa-color-gray-min-50);
--wa-color-danger-max-60: var(--wa-color-gray-max-60);
--wa-color-danger-min-60: var(--wa-color-gray-min-60);
--wa-color-danger-max-70: var(--wa-color-gray-max-70);
--wa-color-danger-min-70: var(--wa-color-gray-min-70);
--wa-color-danger-on: var(--wa-color-gray-on);
}
}

17
packages/webawesome/src/styles/danger/green.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-green-10);
--wa-color-danger-05: var(--wa-color-green-05);
--wa-color-danger: var(--wa-color-green);
--wa-color-danger-lt-50: var(--wa-color-green-lt-50);
--wa-color-danger-gte-50: var(--wa-color-green-gte-50);
--wa-color-danger-lt-60: var(--wa-color-green-lt-60);
--wa-color-danger-gte-60: var(--wa-color-green-gte-60);
--wa-color-danger-lt-70: var(--wa-color-green-lt-70);
--wa-color-danger-gte-70: var(--wa-color-green-gte-70);
--wa-color-danger-max-50: var(--wa-color-green-max-50);
--wa-color-danger-min-50: var(--wa-color-green-min-50);
--wa-color-danger-max-60: var(--wa-color-green-max-60);
--wa-color-danger-min-60: var(--wa-color-green-min-60);
--wa-color-danger-max-70: var(--wa-color-green-max-70);
--wa-color-danger-min-70: var(--wa-color-green-min-70);
--wa-color-danger-on: var(--wa-color-green-on);
}
}

17
packages/webawesome/src/styles/danger/indigo.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-indigo-10);
--wa-color-danger-05: var(--wa-color-indigo-05);
--wa-color-danger: var(--wa-color-indigo);
--wa-color-danger-lt-50: var(--wa-color-indigo-lt-50);
--wa-color-danger-gte-50: var(--wa-color-indigo-gte-50);
--wa-color-danger-lt-60: var(--wa-color-indigo-lt-60);
--wa-color-danger-gte-60: var(--wa-color-indigo-gte-60);
--wa-color-danger-lt-70: var(--wa-color-indigo-lt-70);
--wa-color-danger-gte-70: var(--wa-color-indigo-gte-70);
--wa-color-danger-max-50: var(--wa-color-indigo-max-50);
--wa-color-danger-min-50: var(--wa-color-indigo-min-50);
--wa-color-danger-max-60: var(--wa-color-indigo-max-60);
--wa-color-danger-min-60: var(--wa-color-indigo-min-60);
--wa-color-danger-max-70: var(--wa-color-indigo-max-70);
--wa-color-danger-min-70: var(--wa-color-indigo-min-70);
--wa-color-danger-on: var(--wa-color-indigo-on);
}
}

17
packages/webawesome/src/styles/danger/orange.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-orange-10);
--wa-color-danger-05: var(--wa-color-orange-05);
--wa-color-danger: var(--wa-color-orange);
--wa-color-danger-lt-50: var(--wa-color-orange-lt-50);
--wa-color-danger-gte-50: var(--wa-color-orange-gte-50);
--wa-color-danger-lt-60: var(--wa-color-orange-lt-60);
--wa-color-danger-gte-60: var(--wa-color-orange-gte-60);
--wa-color-danger-lt-70: var(--wa-color-orange-lt-70);
--wa-color-danger-gte-70: var(--wa-color-orange-gte-70);
--wa-color-danger-max-50: var(--wa-color-orange-max-50);
--wa-color-danger-min-50: var(--wa-color-orange-min-50);
--wa-color-danger-max-60: var(--wa-color-orange-max-60);
--wa-color-danger-min-60: var(--wa-color-orange-min-60);
--wa-color-danger-max-70: var(--wa-color-orange-max-70);
--wa-color-danger-min-70: var(--wa-color-orange-min-70);
--wa-color-danger-on: var(--wa-color-orange-on);
}
}

17
packages/webawesome/src/styles/danger/pink.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-pink-10);
--wa-color-danger-05: var(--wa-color-pink-05);
--wa-color-danger: var(--wa-color-pink);
--wa-color-danger-lt-50: var(--wa-color-pink-lt-50);
--wa-color-danger-gte-50: var(--wa-color-pink-gte-50);
--wa-color-danger-lt-60: var(--wa-color-pink-lt-60);
--wa-color-danger-gte-60: var(--wa-color-pink-gte-60);
--wa-color-danger-lt-70: var(--wa-color-pink-lt-70);
--wa-color-danger-gte-70: var(--wa-color-pink-gte-70);
--wa-color-danger-max-50: var(--wa-color-pink-max-50);
--wa-color-danger-min-50: var(--wa-color-pink-min-50);
--wa-color-danger-max-60: var(--wa-color-pink-max-60);
--wa-color-danger-min-60: var(--wa-color-pink-min-60);
--wa-color-danger-max-70: var(--wa-color-pink-max-70);
--wa-color-danger-min-70: var(--wa-color-pink-min-70);
--wa-color-danger-on: var(--wa-color-pink-on);
}
}

17
packages/webawesome/src/styles/danger/purple.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-purple-10);
--wa-color-danger-05: var(--wa-color-purple-05);
--wa-color-danger: var(--wa-color-purple);
--wa-color-danger-lt-50: var(--wa-color-purple-lt-50);
--wa-color-danger-gte-50: var(--wa-color-purple-gte-50);
--wa-color-danger-lt-60: var(--wa-color-purple-lt-60);
--wa-color-danger-gte-60: var(--wa-color-purple-gte-60);
--wa-color-danger-lt-70: var(--wa-color-purple-lt-70);
--wa-color-danger-gte-70: var(--wa-color-purple-gte-70);
--wa-color-danger-max-50: var(--wa-color-purple-max-50);
--wa-color-danger-min-50: var(--wa-color-purple-min-50);
--wa-color-danger-max-60: var(--wa-color-purple-max-60);
--wa-color-danger-min-60: var(--wa-color-purple-min-60);
--wa-color-danger-max-70: var(--wa-color-purple-max-70);
--wa-color-danger-min-70: var(--wa-color-purple-min-70);
--wa-color-danger-on: var(--wa-color-purple-on);
}
}

17
packages/webawesome/src/styles/danger/red.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-red-10);
--wa-color-danger-05: var(--wa-color-red-05);
--wa-color-danger: var(--wa-color-red);
--wa-color-danger-lt-50: var(--wa-color-red-lt-50);
--wa-color-danger-gte-50: var(--wa-color-red-gte-50);
--wa-color-danger-lt-60: var(--wa-color-red-lt-60);
--wa-color-danger-gte-60: var(--wa-color-red-gte-60);
--wa-color-danger-lt-70: var(--wa-color-red-lt-70);
--wa-color-danger-gte-70: var(--wa-color-red-gte-70);
--wa-color-danger-max-50: var(--wa-color-red-max-50);
--wa-color-danger-min-50: var(--wa-color-red-min-50);
--wa-color-danger-max-60: var(--wa-color-red-max-60);
--wa-color-danger-min-60: var(--wa-color-red-min-60);
--wa-color-danger-max-70: var(--wa-color-red-max-70);
--wa-color-danger-min-70: var(--wa-color-red-min-70);
--wa-color-danger-on: var(--wa-color-red-on);
}
}

17
packages/webawesome/src/styles/danger/yellow.css
View File

@@ -16,23 +16,6 @@
--wa-color-danger-10: var(--wa-color-yellow-10);
--wa-color-danger-05: var(--wa-color-yellow-05);
--wa-color-danger: var(--wa-color-yellow);
--wa-color-danger-lt-50: var(--wa-color-yellow-lt-50);
--wa-color-danger-gte-50: var(--wa-color-yellow-gte-50);
--wa-color-danger-lt-60: var(--wa-color-yellow-lt-60);
--wa-color-danger-gte-60: var(--wa-color-yellow-gte-60);
--wa-color-danger-lt-70: var(--wa-color-yellow-lt-70);
--wa-color-danger-gte-70: var(--wa-color-yellow-gte-70);
--wa-color-danger-max-50: var(--wa-color-yellow-max-50);
--wa-color-danger-min-50: var(--wa-color-yellow-min-50);
--wa-color-danger-max-60: var(--wa-color-yellow-max-60);
--wa-color-danger-min-60: var(--wa-color-yellow-min-60);
--wa-color-danger-max-70: var(--wa-color-yellow-max-70);
--wa-color-danger-min-70: var(--wa-color-yellow-min-70);
--wa-color-danger-on: var(--wa-color-yellow-on);
}
}

17
packages/webawesome/src/styles/neutral/blue.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-blue-10);
--wa-color-neutral-05: var(--wa-color-blue-05);
--wa-color-neutral: var(--wa-color-blue);
--wa-color-neutral-lt-50: var(--wa-color-blue-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-blue-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-blue-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-blue-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-blue-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-blue-gte-70);
--wa-color-neutral-max-50: var(--wa-color-blue-max-50);
--wa-color-neutral-min-50: var(--wa-color-blue-min-50);
--wa-color-neutral-max-60: var(--wa-color-blue-max-60);
--wa-color-neutral-min-60: var(--wa-color-blue-min-60);
--wa-color-neutral-max-70: var(--wa-color-blue-max-70);
--wa-color-neutral-min-70: var(--wa-color-blue-min-70);
--wa-color-neutral-on: var(--wa-color-blue-on);
}
}

17
packages/webawesome/src/styles/neutral/cyan.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-cyan-10);
--wa-color-neutral-05: var(--wa-color-cyan-05);
--wa-color-neutral: var(--wa-color-cyan);
--wa-color-neutral-lt-50: var(--wa-color-cyan-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-cyan-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-cyan-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-cyan-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-cyan-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-cyan-gte-70);
--wa-color-neutral-max-50: var(--wa-color-cyan-max-50);
--wa-color-neutral-min-50: var(--wa-color-cyan-min-50);
--wa-color-neutral-max-60: var(--wa-color-cyan-max-60);
--wa-color-neutral-min-60: var(--wa-color-cyan-min-60);
--wa-color-neutral-max-70: var(--wa-color-cyan-max-70);
--wa-color-neutral-min-70: var(--wa-color-cyan-min-70);
--wa-color-neutral-on: var(--wa-color-cyan-on);
}
}

17
packages/webawesome/src/styles/neutral/gray.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-gray-10);
--wa-color-neutral-05: var(--wa-color-gray-05);
--wa-color-neutral: var(--wa-color-gray);
--wa-color-neutral-lt-50: var(--wa-color-gray-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-gray-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-gray-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-gray-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-gray-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-gray-gte-70);
--wa-color-neutral-max-50: var(--wa-color-gray-max-50);
--wa-color-neutral-min-50: var(--wa-color-gray-min-50);
--wa-color-neutral-max-60: var(--wa-color-gray-max-60);
--wa-color-neutral-min-60: var(--wa-color-gray-min-60);
--wa-color-neutral-max-70: var(--wa-color-gray-max-70);
--wa-color-neutral-min-70: var(--wa-color-gray-min-70);
--wa-color-neutral-on: var(--wa-color-gray-on);
}
}

17
packages/webawesome/src/styles/neutral/green.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-green-10);
--wa-color-neutral-05: var(--wa-color-green-05);
--wa-color-neutral: var(--wa-color-green);
--wa-color-neutral-lt-50: var(--wa-color-green-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-green-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-green-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-green-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-green-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-green-gte-70);
--wa-color-neutral-max-50: var(--wa-color-green-max-50);
--wa-color-neutral-min-50: var(--wa-color-green-min-50);
--wa-color-neutral-max-60: var(--wa-color-green-max-60);
--wa-color-neutral-min-60: var(--wa-color-green-min-60);
--wa-color-neutral-max-70: var(--wa-color-green-max-70);
--wa-color-neutral-min-70: var(--wa-color-green-min-70);
--wa-color-neutral-on: var(--wa-color-green-on);
}
}

17
packages/webawesome/src/styles/neutral/indigo.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-indigo-10);
--wa-color-neutral-05: var(--wa-color-indigo-05);
--wa-color-neutral: var(--wa-color-indigo);
--wa-color-neutral-lt-50: var(--wa-color-indigo-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-indigo-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-indigo-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-indigo-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-indigo-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-indigo-gte-70);
--wa-color-neutral-max-50: var(--wa-color-indigo-max-50);
--wa-color-neutral-min-50: var(--wa-color-indigo-min-50);
--wa-color-neutral-max-60: var(--wa-color-indigo-max-60);
--wa-color-neutral-min-60: var(--wa-color-indigo-min-60);
--wa-color-neutral-max-70: var(--wa-color-indigo-max-70);
--wa-color-neutral-min-70: var(--wa-color-indigo-min-70);
--wa-color-neutral-on: var(--wa-color-indigo-on);
}
}

17
packages/webawesome/src/styles/neutral/orange.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-orange-10);
--wa-color-neutral-05: var(--wa-color-orange-05);
--wa-color-neutral: var(--wa-color-orange);
--wa-color-neutral-lt-50: var(--wa-color-orange-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-orange-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-orange-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-orange-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-orange-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-orange-gte-70);
--wa-color-neutral-max-50: var(--wa-color-orange-max-50);
--wa-color-neutral-min-50: var(--wa-color-orange-min-50);
--wa-color-neutral-max-60: var(--wa-color-orange-max-60);
--wa-color-neutral-min-60: var(--wa-color-orange-min-60);
--wa-color-neutral-max-70: var(--wa-color-orange-max-70);
--wa-color-neutral-min-70: var(--wa-color-orange-min-70);
--wa-color-neutral-on: var(--wa-color-orange-on);
}
}

17
packages/webawesome/src/styles/neutral/pink.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-pink-10);
--wa-color-neutral-05: var(--wa-color-pink-05);
--wa-color-neutral: var(--wa-color-pink);
--wa-color-neutral-lt-50: var(--wa-color-pink-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-pink-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-pink-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-pink-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-pink-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-pink-gte-70);
--wa-color-neutral-max-50: var(--wa-color-pink-max-50);
--wa-color-neutral-min-50: var(--wa-color-pink-min-50);
--wa-color-neutral-max-60: var(--wa-color-pink-max-60);
--wa-color-neutral-min-60: var(--wa-color-pink-min-60);
--wa-color-neutral-max-70: var(--wa-color-pink-max-70);
--wa-color-neutral-min-70: var(--wa-color-pink-min-70);
--wa-color-neutral-on: var(--wa-color-pink-on);
}
}

17
packages/webawesome/src/styles/neutral/purple.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-purple-10);
--wa-color-neutral-05: var(--wa-color-purple-05);
--wa-color-neutral: var(--wa-color-purple);
--wa-color-neutral-lt-50: var(--wa-color-purple-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-purple-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-purple-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-purple-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-purple-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-purple-gte-70);
--wa-color-neutral-max-50: var(--wa-color-purple-max-50);
--wa-color-neutral-min-50: var(--wa-color-purple-min-50);
--wa-color-neutral-max-60: var(--wa-color-purple-max-60);
--wa-color-neutral-min-60: var(--wa-color-purple-min-60);
--wa-color-neutral-max-70: var(--wa-color-purple-max-70);
--wa-color-neutral-min-70: var(--wa-color-purple-min-70);
--wa-color-neutral-on: var(--wa-color-purple-on);
}
}

17
packages/webawesome/src/styles/neutral/red.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-red-10);
--wa-color-neutral-05: var(--wa-color-red-05);
--wa-color-neutral: var(--wa-color-red);
--wa-color-neutral-lt-50: var(--wa-color-red-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-red-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-red-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-red-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-red-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-red-gte-70);
--wa-color-neutral-max-50: var(--wa-color-red-max-50);
--wa-color-neutral-min-50: var(--wa-color-red-min-50);
--wa-color-neutral-max-60: var(--wa-color-red-max-60);
--wa-color-neutral-min-60: var(--wa-color-red-min-60);
--wa-color-neutral-max-70: var(--wa-color-red-max-70);
--wa-color-neutral-min-70: var(--wa-color-red-min-70);
--wa-color-neutral-on: var(--wa-color-red-on);
}
}

17
packages/webawesome/src/styles/neutral/yellow.css
View File

@@ -16,23 +16,6 @@
--wa-color-neutral-10: var(--wa-color-yellow-10);
--wa-color-neutral-05: var(--wa-color-yellow-05);
--wa-color-neutral: var(--wa-color-yellow);
--wa-color-neutral-lt-50: var(--wa-color-yellow-lt-50);
--wa-color-neutral-gte-50: var(--wa-color-yellow-gte-50);
--wa-color-neutral-lt-60: var(--wa-color-yellow-lt-60);
--wa-color-neutral-gte-60: var(--wa-color-yellow-gte-60);
--wa-color-neutral-lt-70: var(--wa-color-yellow-lt-70);
--wa-color-neutral-gte-70: var(--wa-color-yellow-gte-70);
--wa-color-neutral-max-50: var(--wa-color-yellow-max-50);
--wa-color-neutral-min-50: var(--wa-color-yellow-min-50);
--wa-color-neutral-max-60: var(--wa-color-yellow-max-60);
--wa-color-neutral-min-60: var(--wa-color-yellow-min-60);
--wa-color-neutral-max-70: var(--wa-color-yellow-max-70);
--wa-color-neutral-min-70: var(--wa-color-yellow-min-70);
--wa-color-neutral-on: var(--wa-color-yellow-on);
}
}

17
packages/webawesome/src/styles/success/blue.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-blue-10);
--wa-color-success-05: var(--wa-color-blue-05);
--wa-color-success: var(--wa-color-blue);
--wa-color-success-lt-50: var(--wa-color-blue-lt-50);
--wa-color-success-gte-50: var(--wa-color-blue-gte-50);
--wa-color-success-lt-60: var(--wa-color-blue-lt-60);
--wa-color-success-gte-60: var(--wa-color-blue-gte-60);
--wa-color-success-lt-70: var(--wa-color-blue-lt-70);
--wa-color-success-gte-70: var(--wa-color-blue-gte-70);
--wa-color-success-max-50: var(--wa-color-blue-max-50);
--wa-color-success-min-50: var(--wa-color-blue-min-50);
--wa-color-success-max-60: var(--wa-color-blue-max-60);
--wa-color-success-min-60: var(--wa-color-blue-min-60);
--wa-color-success-max-70: var(--wa-color-blue-max-70);
--wa-color-success-min-70: var(--wa-color-blue-min-70);
--wa-color-success-on: var(--wa-color-blue-on);
}
}

17
packages/webawesome/src/styles/success/cyan.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-cyan-10);
--wa-color-success-05: var(--wa-color-cyan-05);
--wa-color-success: var(--wa-color-cyan);
--wa-color-success-lt-50: var(--wa-color-cyan-lt-50);
--wa-color-success-gte-50: var(--wa-color-cyan-gte-50);
--wa-color-success-lt-60: var(--wa-color-cyan-lt-60);
--wa-color-success-gte-60: var(--wa-color-cyan-gte-60);
--wa-color-success-lt-70: var(--wa-color-cyan-lt-70);
--wa-color-success-gte-70: var(--wa-color-cyan-gte-70);
--wa-color-success-max-50: var(--wa-color-cyan-max-50);
--wa-color-success-min-50: var(--wa-color-cyan-min-50);
--wa-color-success-max-60: var(--wa-color-cyan-max-60);
--wa-color-success-min-60: var(--wa-color-cyan-min-60);
--wa-color-success-max-70: var(--wa-color-cyan-max-70);
--wa-color-success-min-70: var(--wa-color-cyan-min-70);
--wa-color-success-on: var(--wa-color-cyan-on);
}
}

17
packages/webawesome/src/styles/success/gray.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-gray-10);
--wa-color-success-05: var(--wa-color-gray-05);
--wa-color-success: var(--wa-color-gray);
--wa-color-success-lt-50: var(--wa-color-gray-lt-50);
--wa-color-success-gte-50: var(--wa-color-gray-gte-50);
--wa-color-success-lt-60: var(--wa-color-gray-lt-60);
--wa-color-success-gte-60: var(--wa-color-gray-gte-60);
--wa-color-success-lt-70: var(--wa-color-gray-lt-70);
--wa-color-success-gte-70: var(--wa-color-gray-gte-70);
--wa-color-success-max-50: var(--wa-color-gray-max-50);
--wa-color-success-min-50: var(--wa-color-gray-min-50);
--wa-color-success-max-60: var(--wa-color-gray-max-60);
--wa-color-success-min-60: var(--wa-color-gray-min-60);
--wa-color-success-max-70: var(--wa-color-gray-max-70);
--wa-color-success-min-70: var(--wa-color-gray-min-70);
--wa-color-success-on: var(--wa-color-gray-on);
}
}

17
packages/webawesome/src/styles/success/green.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-green-10);
--wa-color-success-05: var(--wa-color-green-05);
--wa-color-success: var(--wa-color-green);
--wa-color-success-lt-50: var(--wa-color-green-lt-50);
--wa-color-success-gte-50: var(--wa-color-green-gte-50);
--wa-color-success-lt-60: var(--wa-color-green-lt-60);
--wa-color-success-gte-60: var(--wa-color-green-gte-60);
--wa-color-success-lt-70: var(--wa-color-green-lt-70);
--wa-color-success-gte-70: var(--wa-color-green-gte-70);
--wa-color-success-max-50: var(--wa-color-green-max-50);
--wa-color-success-min-50: var(--wa-color-green-min-50);
--wa-color-success-max-60: var(--wa-color-green-max-60);
--wa-color-success-min-60: var(--wa-color-green-min-60);
--wa-color-success-max-70: var(--wa-color-green-max-70);
--wa-color-success-min-70: var(--wa-color-green-min-70);
--wa-color-success-on: var(--wa-color-green-on);
}
}

17
packages/webawesome/src/styles/success/indigo.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-indigo-10);
--wa-color-success-05: var(--wa-color-indigo-05);
--wa-color-success: var(--wa-color-indigo);
--wa-color-success-lt-50: var(--wa-color-indigo-lt-50);
--wa-color-success-gte-50: var(--wa-color-indigo-gte-50);
--wa-color-success-lt-60: var(--wa-color-indigo-lt-60);
--wa-color-success-gte-60: var(--wa-color-indigo-gte-60);
--wa-color-success-lt-70: var(--wa-color-indigo-lt-70);
--wa-color-success-gte-70: var(--wa-color-indigo-gte-70);
--wa-color-success-max-50: var(--wa-color-indigo-max-50);
--wa-color-success-min-50: var(--wa-color-indigo-min-50);
--wa-color-success-max-60: var(--wa-color-indigo-max-60);
--wa-color-success-min-60: var(--wa-color-indigo-min-60);
--wa-color-success-max-70: var(--wa-color-indigo-max-70);
--wa-color-success-min-70: var(--wa-color-indigo-min-70);
--wa-color-success-on: var(--wa-color-indigo-on);
}
}

17
packages/webawesome/src/styles/success/orange.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-orange-10);
--wa-color-success-05: var(--wa-color-orange-05);
--wa-color-success: var(--wa-color-orange);
--wa-color-success-lt-50: var(--wa-color-orange-lt-50);
--wa-color-success-gte-50: var(--wa-color-orange-gte-50);
--wa-color-success-lt-60: var(--wa-color-orange-lt-60);
--wa-color-success-gte-60: var(--wa-color-orange-gte-60);
--wa-color-success-lt-70: var(--wa-color-orange-lt-70);
--wa-color-success-gte-70: var(--wa-color-orange-gte-70);
--wa-color-success-max-50: var(--wa-color-orange-max-50);
--wa-color-success-min-50: var(--wa-color-orange-min-50);
--wa-color-success-max-60: var(--wa-color-orange-max-60);
--wa-color-success-min-60: var(--wa-color-orange-min-60);
--wa-color-success-max-70: var(--wa-color-orange-max-70);
--wa-color-success-min-70: var(--wa-color-orange-min-70);
--wa-color-success-on: var(--wa-color-orange-on);
}
}

17
packages/webawesome/src/styles/success/pink.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-pink-10);
--wa-color-success-05: var(--wa-color-pink-05);
--wa-color-success: var(--wa-color-pink);
--wa-color-success-lt-50: var(--wa-color-pink-lt-50);
--wa-color-success-gte-50: var(--wa-color-pink-gte-50);
--wa-color-success-lt-60: var(--wa-color-pink-lt-60);
--wa-color-success-gte-60: var(--wa-color-pink-gte-60);
--wa-color-success-lt-70: var(--wa-color-pink-lt-70);
--wa-color-success-gte-70: var(--wa-color-pink-gte-70);
--wa-color-success-max-50: var(--wa-color-pink-max-50);
--wa-color-success-min-50: var(--wa-color-pink-min-50);
--wa-color-success-max-60: var(--wa-color-pink-max-60);
--wa-color-success-min-60: var(--wa-color-pink-min-60);
--wa-color-success-max-70: var(--wa-color-pink-max-70);
--wa-color-success-min-70: var(--wa-color-pink-min-70);
--wa-color-success-on: var(--wa-color-pink-on);
}
}

17
packages/webawesome/src/styles/success/purple.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-purple-10);
--wa-color-success-05: var(--wa-color-purple-05);
--wa-color-success: var(--wa-color-purple);
--wa-color-success-lt-50: var(--wa-color-purple-lt-50);
--wa-color-success-gte-50: var(--wa-color-purple-gte-50);
--wa-color-success-lt-60: var(--wa-color-purple-lt-60);
--wa-color-success-gte-60: var(--wa-color-purple-gte-60);
--wa-color-success-lt-70: var(--wa-color-purple-lt-70);
--wa-color-success-gte-70: var(--wa-color-purple-gte-70);
--wa-color-success-max-50: var(--wa-color-purple-max-50);
--wa-color-success-min-50: var(--wa-color-purple-min-50);
--wa-color-success-max-60: var(--wa-color-purple-max-60);
--wa-color-success-min-60: var(--wa-color-purple-min-60);
--wa-color-success-max-70: var(--wa-color-purple-max-70);
--wa-color-success-min-70: var(--wa-color-purple-min-70);
--wa-color-success-on: var(--wa-color-purple-on);
}
}

17
packages/webawesome/src/styles/success/red.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-red-10);
--wa-color-success-05: var(--wa-color-red-05);
--wa-color-success: var(--wa-color-red);
--wa-color-success-lt-50: var(--wa-color-red-lt-50);
--wa-color-success-gte-50: var(--wa-color-red-gte-50);
--wa-color-success-lt-60: var(--wa-color-red-lt-60);
--wa-color-success-gte-60: var(--wa-color-red-gte-60);
--wa-color-success-lt-70: var(--wa-color-red-lt-70);
--wa-color-success-gte-70: var(--wa-color-red-gte-70);
--wa-color-success-max-50: var(--wa-color-red-max-50);
--wa-color-success-min-50: var(--wa-color-red-min-50);
--wa-color-success-max-60: var(--wa-color-red-max-60);
--wa-color-success-min-60: var(--wa-color-red-min-60);
--wa-color-success-max-70: var(--wa-color-red-max-70);
--wa-color-success-min-70: var(--wa-color-red-min-70);
--wa-color-success-on: var(--wa-color-red-on);
}
}

17
packages/webawesome/src/styles/success/yellow.css
View File

@@ -16,23 +16,6 @@
--wa-color-success-10: var(--wa-color-yellow-10);
--wa-color-success-05: var(--wa-color-yellow-05);
--wa-color-success: var(--wa-color-yellow);
--wa-color-success-lt-50: var(--wa-color-yellow-lt-50);
--wa-color-success-gte-50: var(--wa-color-yellow-gte-50);
--wa-color-success-lt-60: var(--wa-color-yellow-lt-60);
--wa-color-success-gte-60: var(--wa-color-yellow-gte-60);
--wa-color-success-lt-70: var(--wa-color-yellow-lt-70);
--wa-color-success-gte-70: var(--wa-color-yellow-gte-70);
--wa-color-success-max-50: var(--wa-color-yellow-max-50);
--wa-color-success-min-50: var(--wa-color-yellow-min-50);
--wa-color-success-max-60: var(--wa-color-yellow-max-60);
--wa-color-success-min-60: var(--wa-color-yellow-min-60);
--wa-color-success-max-70: var(--wa-color-yellow-max-70);
--wa-color-success-min-70: var(--wa-color-yellow-min-70);
--wa-color-success-on: var(--wa-color-yellow-on);
}
}

40
packages/webawesome/src/styles/themes/active/color.css
View File

@@ -31,43 +31,43 @@
*/
--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-min-70);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--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-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-min-70);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-70);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: black;
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: black;
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: black;
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
@@ -94,43 +94,43 @@
*/
--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-min-70);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--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-min-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: black;
--wa-color-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-min-70);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-min-70);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-90);
--wa-color-success-on-loud: black;
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-90);
--wa-color-warning-on-loud: black;
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-90);
--wa-color-danger-on-loud: black;
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);

16
packages/webawesome/src/styles/themes/awesome/color.css
View File

@@ -22,7 +22,7 @@
*/
--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-min-70);
--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);
@@ -32,7 +32,7 @@
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-min-70);
--wa-color-success-fill-loud: var(--wa-color-success-80);
--wa-color-success-border-quiet: var(--wa-color-success-70);
--wa-color-success-border-normal: var(--wa-color-success-50);
--wa-color-success-border-loud: var(--wa-color-success-30);
@@ -42,7 +42,7 @@
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
--wa-color-warning-fill-loud: var(--wa-color-warning-80);
--wa-color-warning-border-quiet: var(--wa-color-warning-70);
--wa-color-warning-border-normal: var(--wa-color-warning-50);
--wa-color-warning-border-loud: var(--wa-color-warning-30);
@@ -52,7 +52,7 @@
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-70);
--wa-color-danger-border-normal: var(--wa-color-danger-50);
--wa-color-danger-border-loud: var(--wa-color-danger-30);
@@ -85,7 +85,7 @@
--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-min-70);
--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;
@@ -95,7 +95,7 @@
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-50);
--wa-color-success-border-loud: var(--wa-color-success-80);
--wa-color-success-on-quiet: var(--wa-color-success-min-70);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-80);
--wa-color-success-on-loud: white;
@@ -105,7 +105,7 @@
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-50);
--wa-color-warning-border-loud: var(--wa-color-warning-80);
--wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-80);
--wa-color-warning-on-loud: var(--wa-color-warning-05);
@@ -115,7 +115,7 @@
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-50);
--wa-color-danger-border-loud: var(--wa-color-danger-80);
--wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-80);
--wa-color-danger-on-loud: white;

24
packages/webawesome/src/styles/themes/brutalist/color.css
View File

@@ -29,7 +29,7 @@
*/
--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-max-50);
--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);
@@ -39,7 +39,7 @@
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-max-50);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-80);
--wa-color-success-border-normal: var(--wa-color-success-60);
--wa-color-success-border-loud: var(--wa-color-success-40);
@@ -49,7 +49,7 @@
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-max-50);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
--wa-color-warning-border-normal: var(--wa-color-warning-60);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
@@ -59,7 +59,7 @@
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-max-50);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
--wa-color-danger-border-normal: var(--wa-color-danger-60);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
@@ -100,41 +100,41 @@
*/
--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-min-70);
--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-min-70);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--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-success-20);
--wa-color-success-fill-normal: var(--wa-color-success-30);
--wa-color-success-fill-loud: var(--wa-color-success-min-70);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-80);
--wa-color-success-on-quiet: var(--wa-color-success-min-70);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-95);
--wa-color-success-on-loud: var(--wa-color-success-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
--wa-color-warning-fill-normal: var(--wa-color-warning-30);
--wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-80);
--wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-95);
--wa-color-warning-on-loud: var(--wa-color-warning-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
--wa-color-danger-fill-normal: var(--wa-color-danger-30);
--wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-80);
--wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-95);
--wa-color-danger-on-loud: var(--wa-color-danger-10);

16
packages/webawesome/src/styles/themes/default/color.css
View File

@@ -66,7 +66,7 @@
*/
--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-max-50);
--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);
@@ -76,7 +76,7 @@
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-max-50);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-60);
@@ -86,7 +86,7 @@
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-max-50);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
@@ -96,7 +96,7 @@
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-max-50);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
@@ -156,7 +156,7 @@
--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-min-60);
--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;
@@ -166,7 +166,7 @@
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-min-60);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
@@ -176,7 +176,7 @@
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-min-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
@@ -186,7 +186,7 @@
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-min-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;

21
packages/webawesome/src/styles/themes/glossy/color.css
View File

@@ -5,3 +5,24 @@
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-glossy,
.wa-light,
.wa-dark .wa-invert {
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-success-fill-loud: var(--wa-color-success-40);
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
}
.wa-dark,
.wa-invert {
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-success-fill-loud: var(--wa-color-success-40);
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
}
}

8
packages/webawesome/src/styles/themes/playful/color.css
View File

@@ -102,7 +102,7 @@
--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-min-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-on);
@@ -112,7 +112,7 @@
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-min-70);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-90);
--wa-color-success-on-loud: var(--wa-color-success-on);
@@ -122,7 +122,7 @@
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-min-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-90);
--wa-color-warning-on-loud: var(--wa-color-warning-on);
@@ -132,7 +132,7 @@
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-min-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-90);
--wa-color-danger-on-loud: var(--wa-color-danger-on);

16
packages/webawesome/src/styles/themes/premium/color.css
View File

@@ -25,7 +25,7 @@
*/
--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-min-70);
--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);
@@ -35,7 +35,7 @@
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-min-70);
--wa-color-success-fill-loud: var(--wa-color-success-80);
--wa-color-success-border-quiet: var(--wa-color-success-80);
--wa-color-success-border-normal: var(--wa-color-success-70);
--wa-color-success-border-loud: var(--wa-color-success-50);
@@ -45,7 +45,7 @@
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
--wa-color-warning-fill-loud: var(--wa-color-warning-80);
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
--wa-color-warning-border-normal: var(--wa-color-warning-70);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
@@ -55,7 +55,7 @@
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
--wa-color-danger-border-normal: var(--wa-color-danger-70);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
@@ -96,7 +96,7 @@
*/
--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-min-70);
--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-70);
@@ -106,7 +106,7 @@
--wa-color-success-fill-quiet: var(--wa-color-success-30);
--wa-color-success-fill-normal: var(--wa-color-success-40);
--wa-color-success-fill-loud: var(--wa-color-success-min-70);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-70);
@@ -116,7 +116,7 @@
--wa-color-warning-fill-quiet: var(--wa-color-warning-30);
--wa-color-warning-fill-normal: var(--wa-color-warning-40);
--wa-color-warning-fill-loud: var(--wa-color-warning-min-70);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-70);
@@ -126,7 +126,7 @@
--wa-color-danger-fill-quiet: var(--wa-color-danger-30);
--wa-color-danger-fill-normal: var(--wa-color-danger-40);
--wa-color-danger-fill-loud: var(--wa-color-danger-min-70);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-70);

16
packages/webawesome/src/styles/themes/tailspin/color.css
View File

@@ -111,8 +111,8 @@
--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-min-60);
--wa-color-brand-on-normal: var(--wa-color-brand-min-70);
--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-success-10) 90%, transparent);
@@ -121,8 +121,8 @@
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-20), transparent);
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-30) 60%, transparent);
--wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-40) 70%, transparent);
--wa-color-success-on-quiet: var(--wa-color-success-min-60);
--wa-color-success-on-normal: var(--wa-color-success-min-70);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-10) 90%, transparent);
@@ -131,8 +131,8 @@
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-20), transparent);
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-30) 60%, transparent);
--wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-40) 70%, transparent);
--wa-color-warning-on-quiet: var(--wa-color-warning-min-60);
--wa-color-warning-on-normal: var(--wa-color-warning-min-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-10) 90%, transparent);
@@ -141,8 +141,8 @@
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-20), transparent);
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-30) 60%, transparent);
--wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-40) 70%, transparent);
--wa-color-danger-on-quiet: var(--wa-color-danger-min-60);
--wa-color-danger-on-normal: var(--wa-color-danger-min-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-10) 90%, transparent);

17
packages/webawesome/src/styles/warning/blue.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-blue-10);
--wa-color-warning-05: var(--wa-color-blue-05);
--wa-color-warning: var(--wa-color-blue);
--wa-color-warning-lt-50: var(--wa-color-blue-lt-50);
--wa-color-warning-gte-50: var(--wa-color-blue-gte-50);
--wa-color-warning-lt-60: var(--wa-color-blue-lt-60);
--wa-color-warning-gte-60: var(--wa-color-blue-gte-60);
--wa-color-warning-lt-70: var(--wa-color-blue-lt-70);
--wa-color-warning-gte-70: var(--wa-color-blue-gte-70);
--wa-color-warning-max-50: var(--wa-color-blue-max-50);
--wa-color-warning-min-50: var(--wa-color-blue-min-50);
--wa-color-warning-max-60: var(--wa-color-blue-max-60);
--wa-color-warning-min-60: var(--wa-color-blue-min-60);
--wa-color-warning-max-70: var(--wa-color-blue-max-70);
--wa-color-warning-min-70: var(--wa-color-blue-min-70);
--wa-color-warning-on: var(--wa-color-blue-on);
}
}

17
packages/webawesome/src/styles/warning/cyan.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-cyan-10);
--wa-color-warning-05: var(--wa-color-cyan-05);
--wa-color-warning: var(--wa-color-cyan);
--wa-color-warning-lt-50: var(--wa-color-cyan-lt-50);
--wa-color-warning-gte-50: var(--wa-color-cyan-gte-50);
--wa-color-warning-lt-60: var(--wa-color-cyan-lt-60);
--wa-color-warning-gte-60: var(--wa-color-cyan-gte-60);
--wa-color-warning-lt-70: var(--wa-color-cyan-lt-70);
--wa-color-warning-gte-70: var(--wa-color-cyan-gte-70);
--wa-color-warning-max-50: var(--wa-color-cyan-max-50);
--wa-color-warning-min-50: var(--wa-color-cyan-min-50);
--wa-color-warning-max-60: var(--wa-color-cyan-max-60);
--wa-color-warning-min-60: var(--wa-color-cyan-min-60);
--wa-color-warning-max-70: var(--wa-color-cyan-max-70);
--wa-color-warning-min-70: var(--wa-color-cyan-min-70);
--wa-color-warning-on: var(--wa-color-cyan-on);
}
}

17
packages/webawesome/src/styles/warning/gray.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-gray-10);
--wa-color-warning-05: var(--wa-color-gray-05);
--wa-color-warning: var(--wa-color-gray);
--wa-color-warning-lt-50: var(--wa-color-gray-lt-50);
--wa-color-warning-gte-50: var(--wa-color-gray-gte-50);
--wa-color-warning-lt-60: var(--wa-color-gray-lt-60);
--wa-color-warning-gte-60: var(--wa-color-gray-gte-60);
--wa-color-warning-lt-70: var(--wa-color-gray-lt-70);
--wa-color-warning-gte-70: var(--wa-color-gray-gte-70);
--wa-color-warning-max-50: var(--wa-color-gray-max-50);
--wa-color-warning-min-50: var(--wa-color-gray-min-50);
--wa-color-warning-max-60: var(--wa-color-gray-max-60);
--wa-color-warning-min-60: var(--wa-color-gray-min-60);
--wa-color-warning-max-70: var(--wa-color-gray-max-70);
--wa-color-warning-min-70: var(--wa-color-gray-min-70);
--wa-color-warning-on: var(--wa-color-gray-on);
}
}

17
packages/webawesome/src/styles/warning/green.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-green-10);
--wa-color-warning-05: var(--wa-color-green-05);
--wa-color-warning: var(--wa-color-green);
--wa-color-warning-lt-50: var(--wa-color-green-lt-50);
--wa-color-warning-gte-50: var(--wa-color-green-gte-50);
--wa-color-warning-lt-60: var(--wa-color-green-lt-60);
--wa-color-warning-gte-60: var(--wa-color-green-gte-60);
--wa-color-warning-lt-70: var(--wa-color-green-lt-70);
--wa-color-warning-gte-70: var(--wa-color-green-gte-70);
--wa-color-warning-max-50: var(--wa-color-green-max-50);
--wa-color-warning-min-50: var(--wa-color-green-min-50);
--wa-color-warning-max-60: var(--wa-color-green-max-60);
--wa-color-warning-min-60: var(--wa-color-green-min-60);
--wa-color-warning-max-70: var(--wa-color-green-max-70);
--wa-color-warning-min-70: var(--wa-color-green-min-70);
--wa-color-warning-on: var(--wa-color-green-on);
}
}

17
packages/webawesome/src/styles/warning/indigo.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-indigo-10);
--wa-color-warning-05: var(--wa-color-indigo-05);
--wa-color-warning: var(--wa-color-indigo);
--wa-color-warning-lt-50: var(--wa-color-indigo-lt-50);
--wa-color-warning-gte-50: var(--wa-color-indigo-gte-50);
--wa-color-warning-lt-60: var(--wa-color-indigo-lt-60);
--wa-color-warning-gte-60: var(--wa-color-indigo-gte-60);
--wa-color-warning-lt-70: var(--wa-color-indigo-lt-70);
--wa-color-warning-gte-70: var(--wa-color-indigo-gte-70);
--wa-color-warning-max-50: var(--wa-color-indigo-max-50);
--wa-color-warning-min-50: var(--wa-color-indigo-min-50);
--wa-color-warning-max-60: var(--wa-color-indigo-max-60);
--wa-color-warning-min-60: var(--wa-color-indigo-min-60);
--wa-color-warning-max-70: var(--wa-color-indigo-max-70);
--wa-color-warning-min-70: var(--wa-color-indigo-min-70);
--wa-color-warning-on: var(--wa-color-indigo-on);
}
}

17
packages/webawesome/src/styles/warning/orange.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-orange-10);
--wa-color-warning-05: var(--wa-color-orange-05);
--wa-color-warning: var(--wa-color-orange);
--wa-color-warning-lt-50: var(--wa-color-orange-lt-50);
--wa-color-warning-gte-50: var(--wa-color-orange-gte-50);
--wa-color-warning-lt-60: var(--wa-color-orange-lt-60);
--wa-color-warning-gte-60: var(--wa-color-orange-gte-60);
--wa-color-warning-lt-70: var(--wa-color-orange-lt-70);
--wa-color-warning-gte-70: var(--wa-color-orange-gte-70);
--wa-color-warning-max-50: var(--wa-color-orange-max-50);
--wa-color-warning-min-50: var(--wa-color-orange-min-50);
--wa-color-warning-max-60: var(--wa-color-orange-max-60);
--wa-color-warning-min-60: var(--wa-color-orange-min-60);
--wa-color-warning-max-70: var(--wa-color-orange-max-70);
--wa-color-warning-min-70: var(--wa-color-orange-min-70);
--wa-color-warning-on: var(--wa-color-orange-on);
}
}

17
packages/webawesome/src/styles/warning/pink.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-pink-10);
--wa-color-warning-05: var(--wa-color-pink-05);
--wa-color-warning: var(--wa-color-pink);
--wa-color-warning-lt-50: var(--wa-color-pink-lt-50);
--wa-color-warning-gte-50: var(--wa-color-pink-gte-50);
--wa-color-warning-lt-60: var(--wa-color-pink-lt-60);
--wa-color-warning-gte-60: var(--wa-color-pink-gte-60);
--wa-color-warning-lt-70: var(--wa-color-pink-lt-70);
--wa-color-warning-gte-70: var(--wa-color-pink-gte-70);
--wa-color-warning-max-50: var(--wa-color-pink-max-50);
--wa-color-warning-min-50: var(--wa-color-pink-min-50);
--wa-color-warning-max-60: var(--wa-color-pink-max-60);
--wa-color-warning-min-60: var(--wa-color-pink-min-60);
--wa-color-warning-max-70: var(--wa-color-pink-max-70);
--wa-color-warning-min-70: var(--wa-color-pink-min-70);
--wa-color-warning-on: var(--wa-color-pink-on);
}
}

17
packages/webawesome/src/styles/warning/purple.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-purple-10);
--wa-color-warning-05: var(--wa-color-purple-05);
--wa-color-warning: var(--wa-color-purple);
--wa-color-warning-lt-50: var(--wa-color-purple-lt-50);
--wa-color-warning-gte-50: var(--wa-color-purple-gte-50);
--wa-color-warning-lt-60: var(--wa-color-purple-lt-60);
--wa-color-warning-gte-60: var(--wa-color-purple-gte-60);
--wa-color-warning-lt-70: var(--wa-color-purple-lt-70);
--wa-color-warning-gte-70: var(--wa-color-purple-gte-70);
--wa-color-warning-max-50: var(--wa-color-purple-max-50);
--wa-color-warning-min-50: var(--wa-color-purple-min-50);
--wa-color-warning-max-60: var(--wa-color-purple-max-60);
--wa-color-warning-min-60: var(--wa-color-purple-min-60);
--wa-color-warning-max-70: var(--wa-color-purple-max-70);
--wa-color-warning-min-70: var(--wa-color-purple-min-70);
--wa-color-warning-on: var(--wa-color-purple-on);
}
}

17
packages/webawesome/src/styles/warning/red.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-red-10);
--wa-color-warning-05: var(--wa-color-red-05);
--wa-color-warning: var(--wa-color-red);
--wa-color-warning-lt-50: var(--wa-color-red-lt-50);
--wa-color-warning-gte-50: var(--wa-color-red-gte-50);
--wa-color-warning-lt-60: var(--wa-color-red-lt-60);
--wa-color-warning-gte-60: var(--wa-color-red-gte-60);
--wa-color-warning-lt-70: var(--wa-color-red-lt-70);
--wa-color-warning-gte-70: var(--wa-color-red-gte-70);
--wa-color-warning-max-50: var(--wa-color-red-max-50);
--wa-color-warning-min-50: var(--wa-color-red-min-50);
--wa-color-warning-max-60: var(--wa-color-red-max-60);
--wa-color-warning-min-60: var(--wa-color-red-min-60);
--wa-color-warning-max-70: var(--wa-color-red-max-70);
--wa-color-warning-min-70: var(--wa-color-red-min-70);
--wa-color-warning-on: var(--wa-color-red-on);
}
}

17
packages/webawesome/src/styles/warning/yellow.css
View File

@@ -16,23 +16,6 @@
--wa-color-warning-10: var(--wa-color-yellow-10);
--wa-color-warning-05: var(--wa-color-yellow-05);
--wa-color-warning: var(--wa-color-yellow);
--wa-color-warning-lt-50: var(--wa-color-yellow-lt-50);
--wa-color-warning-gte-50: var(--wa-color-yellow-gte-50);
--wa-color-warning-lt-60: var(--wa-color-yellow-lt-60);
--wa-color-warning-gte-60: var(--wa-color-yellow-gte-60);
--wa-color-warning-lt-70: var(--wa-color-yellow-lt-70);
--wa-color-warning-gte-70: var(--wa-color-yellow-gte-70);
--wa-color-warning-max-50: var(--wa-color-yellow-max-50);
--wa-color-warning-min-50: var(--wa-color-yellow-min-50);
--wa-color-warning-max-60: var(--wa-color-yellow-max-60);
--wa-color-warning-min-60: var(--wa-color-yellow-min-60);
--wa-color-warning-max-70: var(--wa-color-yellow-max-70);
--wa-color-warning-min-70: var(--wa-color-yellow-min-70);
--wa-color-warning-on: var(--wa-color-yellow-on);
}
}