mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-17 14:39:14 +00:00
Compare commits
7 Commits
preprocss
...
clamped-to
| Author | SHA1 | Date | |
|---|---|---|---|
|
c77acdbcd5 | ||
|
|
d574aef103 | ||
|
|
0fd77ca80a | ||
|
|
aaffb4d221 | ||
|
|
79c9708a14 | ||
|
|
2090b05e8a | ||
|
|
3cdd8e49a1 |
@@ -1,47 +0,0 @@
|
||||
---
|
||||
title: Clamped brand tokens
|
||||
layout: block
|
||||
---
|
||||
|
||||
{% set tints = ['40-max', '50-max', '60-max', '40-min', '50-min', '60-min'] %}
|
||||
|
||||
{% for hue in hues %}
|
||||
<link href="/dist/styles/brand/{{ hue }}.css" rel="stylesheet">
|
||||
{% endfor %}
|
||||
|
||||
<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-brand-{{ hue }}">
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
<td class="core-column">
|
||||
<div class="color swatch" style="background-color: var(--wa-color-brand); color: var(--wa-color-brand-on);">
|
||||
{{ palettes[paletteId][hue].maxChromaTint }}
|
||||
<wa-copy-button value="--wa-color-brand" copy-label="--wa-color-brand"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{% for tint in tints -%}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-brand-{{ tint }})">
|
||||
<wa-copy-button value="--wa-color-brand-{{ tint }}" copy-label="--wa-color-brand-{{ tint }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
<style>
|
||||
.core-column .color.swatch::before {
|
||||
counter-reset: key var(--wa-color-brand-key);
|
||||
content: counter(key);
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Color
|
||||
description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
|
||||
wide: true
|
||||
---
|
||||
|
||||
<style>
|
||||
@@ -43,6 +44,18 @@ description: Ensure consistent use of color and readable contrast with Web Aweso
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
text-align: center;
|
||||
}
|
||||
.colors.bounded,
|
||||
.core-column {
|
||||
.color.swatch {
|
||||
--key: var(--core-key);
|
||||
--lt-60: calc(clamp(0, 60 - var(--key), 1) * 100%);
|
||||
|
||||
&::before {
|
||||
counter-reset: key var(--key);
|
||||
content: counter(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
|
||||
@@ -64,21 +77,125 @@ You can use these numbers to ensure accessible color contrast per [WCAG 2.1 succ
|
||||
- A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
|
||||
- A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
|
||||
|
||||
Each Web Awesome palette defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
|
||||
Each Web Awesome palette defines eight literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
|
||||
Additionally, the "core" (most vibrant) color of each scale is mapped to `--wa-color-{hue}`.
|
||||
|
||||
{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
|
||||
|
||||
<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 -%}
|
||||
<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"] -%}
|
||||
<li class="color-preview">
|
||||
<tr style="--core-key: var(--wa-color-{{ hue }}-key)">
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
<td class="core-column" style="--color: var(--wa-color-{{ hue }})">
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on);">
|
||||
<wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{% for tint in tints -%}
|
||||
<td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
|
||||
<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>
|
||||
<small>{{ tint }}</small>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
## Bounded Core Colors
|
||||
|
||||
In addition to the literal color scales above and their core colors,
|
||||
we also define variables for "bounded" core colors, which resolve to the core color of the hue's scale,
|
||||
but clamped to a specific tint.
|
||||
|
||||
This is useful for using core colors while ensuring a minimum contrast ratio with other colors in your theme.
|
||||
|
||||
### Upper Bound Core Colors
|
||||
|
||||
These variables resolve to the core color as long as it is equal or below the specified tint,
|
||||
and to the specified tint otherwise.
|
||||
|
||||
{% set tints_clamped = ['40', '50', '60', '70'] %}
|
||||
|
||||
<table class="colors bounded">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="core-column">Core tint</th>
|
||||
{% for tint in tints_clamped -%}
|
||||
<th>max-{{ tint }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr style="--core-key: var(--wa-color-{{ hue }}-key)">
|
||||
<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);">
|
||||
{{ 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_clamped -%}
|
||||
<td>
|
||||
<div class="color swatch" style="
|
||||
--key: min(var(--core-key), {{ tint }});
|
||||
color: color-mix(in oklab, var(--wa-color-{{ hue }}-10), white var(--lt-60));
|
||||
background-color: var(--wa-color-{{ hue }}-max-{{ tint }});">
|
||||
<wa-copy-button value="--wa-color-{{ hue }}-max-{{ tint }}" copy-label="--wa-color-{{ hue }}-max-{{ tint }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
### Lower Bound Core Colors
|
||||
|
||||
These variables resolve to the core color as long as it is at least at the specified tint,
|
||||
and to the specified tint otherwise.
|
||||
|
||||
<table class="colors bounded">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="core-column">Core tint</th>
|
||||
{% for tint in tints_clamped -%}
|
||||
<th>min-{{ tint }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr style="--core-key: var(--wa-color-{{ hue }}-key)">
|
||||
<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);">
|
||||
{{ 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_clamped -%}
|
||||
<td>
|
||||
<div class="color swatch" style="
|
||||
--key: max(var(--core-key), {{ tint }});
|
||||
color: color-mix(in oklab, var(--wa-color-{{ hue }}-10), white var(--lt-60));
|
||||
background-color: var(--wa-color-{{ hue }}-min-{{ tint }})">
|
||||
<wa-copy-button value="--wa-color-{{ hue }}-min-{{ tint }}" copy-label="--wa-color-{{ hue }}-min-{{ tint }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
## Foundational Colors
|
||||
|
||||
|
||||
@@ -342,6 +342,7 @@ if (isDeveloping) {
|
||||
bs.init(
|
||||
{
|
||||
startPath: '/',
|
||||
open: false,
|
||||
port,
|
||||
logLevel: 'silent',
|
||||
logPrefix: '[webawesome]',
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "base.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
:where([class^='wa-brand-'], [class*=' wa-brand-']) {
|
||||
/**
|
||||
* Conditional tokens for use in color-mix()
|
||||
* --wa-color-brand-if-lt-N ➡️ 100% if key < N, 0% otherwise
|
||||
* --wa-color-brand-if-gte-N ➡️ 100% if key >= N, 0% otherwise
|
||||
*/
|
||||
|
||||
--wa-color-brand-if-lt-40: calc(clamp(0, 40 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-gte-40: calc(100% - var(--wa-color-brand-if-lt-40));
|
||||
|
||||
--wa-color-brand-if-lt-50: calc(clamp(0, 50 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-gte-50: calc(100% - var(--wa-color-brand-if-lt-50));
|
||||
|
||||
--wa-color-brand-if-lt-60: calc(clamp(0, 60 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-gte-60: calc(100% - var(--wa-color-brand-if-lt-60));
|
||||
|
||||
--wa-color-brand-if-lt-70: calc(clamp(0, 70 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-gte-70: calc(100% - var(--wa-color-brand-if-lt-70));
|
||||
|
||||
--wa-color-brand-if-lt-80: calc(clamp(0, 80 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-gte-80: calc(100% - var(--wa-color-brand-if-lt-80));
|
||||
|
||||
/*
|
||||
* Convenience tokens for common tint cutoffs
|
||||
* --wa-color-brand-N-max ➡️ var(--color-brand) if key <= N, var(--color-brand-N) otherwise
|
||||
* --wa-color-brand-N-min ➡️ var(--color-brand) if key >= N, var(--color-brand-N) otherwise
|
||||
*/
|
||||
|
||||
--wa-color-brand-40-max: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-lt-40),
|
||||
var(--wa-color-brand-40)
|
||||
);
|
||||
--wa-color-brand-40-min: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-gte-40),
|
||||
var(--wa-color-brand-40)
|
||||
);
|
||||
|
||||
--wa-color-brand-50-max: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-lt-50),
|
||||
var(--wa-color-brand-50)
|
||||
);
|
||||
--wa-color-brand-50-min: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-gte-50),
|
||||
var(--wa-color-brand-50)
|
||||
);
|
||||
|
||||
--wa-color-brand-60-max: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-lt-60),
|
||||
var(--wa-color-brand-60)
|
||||
);
|
||||
--wa-color-brand-60-min: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-gte-60),
|
||||
var(--wa-color-brand-60)
|
||||
);
|
||||
|
||||
--wa-color-brand-70-max: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-lt-70),
|
||||
var(--wa-color-brand-70)
|
||||
);
|
||||
--wa-color-brand-70-min: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-gte-70),
|
||||
var(--wa-color-brand-70)
|
||||
);
|
||||
|
||||
/* Text color: white if key < 60, brand-10 otherwise */
|
||||
--wa-color-brand-on: color-mix(in oklab, var(--wa-color-brand-10) var(--wa-color-brand-if-gte-60), white);
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
:where([class^='wa-brand-'], [class*=' wa-brand-']) {
|
||||
/**
|
||||
* Conditional tokens for use in color-mix()
|
||||
* --wa-color-brand-if-lt-N ➡️ 100% if key < N, 0% otherwise
|
||||
* --wa-color-brand-if-gte-N ➡️ 100% if key >= N, 0% otherwise
|
||||
*/
|
||||
{% for tint in ['40', '50', '60', '70', '80'] %}
|
||||
--wa-color-brand-if-lt-{{ tint }}: calc(clamp(0, {{ tint }} - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-gte-{{ tint }}: calc(100% - var(--wa-color-brand-if-lt-{{ tint }}));
|
||||
{% endfor %}
|
||||
|
||||
/*
|
||||
* Convenience tokens for common tint cutoffs
|
||||
* --wa-color-brand-N-max ➡️ var(--color-brand) if key <= N, var(--color-brand-N) otherwise
|
||||
* --wa-color-brand-N-min ➡️ var(--color-brand) if key >= N, var(--color-brand-N) otherwise
|
||||
*/
|
||||
{% for tint in ['40', '50', '60', '70'] %}
|
||||
--wa-color-brand-{{ tint }}-max: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-lt-{{ tint }}),
|
||||
var(--wa-color-brand-{{ tint }})
|
||||
);
|
||||
--wa-color-brand-{{ tint }}-min: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-gte-{{ tint }}),
|
||||
var(--wa-color-brand-{{ tint }})
|
||||
);
|
||||
{% endfor %}
|
||||
|
||||
/* Text color: white if key < 60, brand-10 otherwise */
|
||||
--wa-color-brand-on: color-mix(in oklab, var(--wa-color-brand-10) var(--wa-color-brand-if-gte-60), white);
|
||||
}
|
||||
@@ -1,6 +1,4 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -19,4 +17,30 @@
|
||||
--wa-color-brand-05: var(--wa-color-blue-05);
|
||||
--wa-color-brand: var(--wa-color-blue);
|
||||
--wa-color-brand-key: var(--wa-color-blue-key);
|
||||
|
||||
--wa-color-brand-lt-40: var(--wa-color-blue-lt-40);
|
||||
--wa-color-brand-gte-40: var(--wa-color-blue-gte-40);
|
||||
|
||||
--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-lt-80: var(--wa-color-blue-lt-80);
|
||||
--wa-color-brand-gte-80: var(--wa-color-blue-gte-80);
|
||||
|
||||
--wa-color-brand-max-40: var(--wa-color-blue-max-40);
|
||||
--wa-color-brand-min-40: var(--wa-color-blue-min-40);
|
||||
--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);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -19,4 +17,30 @@
|
||||
--wa-color-brand-05: var(--wa-color-cyan-05);
|
||||
--wa-color-brand: var(--wa-color-cyan);
|
||||
--wa-color-brand-key: var(--wa-color-cyan-key);
|
||||
|
||||
--wa-color-brand-lt-40: var(--wa-color-cyan-lt-40);
|
||||
--wa-color-brand-gte-40: var(--wa-color-cyan-gte-40);
|
||||
|
||||
--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-lt-80: var(--wa-color-cyan-lt-80);
|
||||
--wa-color-brand-gte-80: var(--wa-color-cyan-gte-80);
|
||||
|
||||
--wa-color-brand-max-40: var(--wa-color-cyan-max-40);
|
||||
--wa-color-brand-min-40: var(--wa-color-cyan-min-40);
|
||||
--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);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -19,4 +17,30 @@
|
||||
--wa-color-brand-05: var(--wa-color-gray-05);
|
||||
--wa-color-brand: var(--wa-color-gray);
|
||||
--wa-color-brand-key: var(--wa-color-gray-key);
|
||||
|
||||
--wa-color-brand-lt-40: var(--wa-color-gray-lt-40);
|
||||
--wa-color-brand-gte-40: var(--wa-color-gray-gte-40);
|
||||
|
||||
--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-lt-80: var(--wa-color-gray-lt-80);
|
||||
--wa-color-brand-gte-80: var(--wa-color-gray-gte-80);
|
||||
|
||||
--wa-color-brand-max-40: var(--wa-color-gray-max-40);
|
||||
--wa-color-brand-min-40: var(--wa-color-gray-min-40);
|
||||
--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);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -19,4 +17,30 @@
|
||||
--wa-color-brand-05: var(--wa-color-green-05);
|
||||
--wa-color-brand: var(--wa-color-green);
|
||||
--wa-color-brand-key: var(--wa-color-green-key);
|
||||
|
||||
--wa-color-brand-lt-40: var(--wa-color-green-lt-40);
|
||||
--wa-color-brand-gte-40: var(--wa-color-green-gte-40);
|
||||
|
||||
--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-lt-80: var(--wa-color-green-lt-80);
|
||||
--wa-color-brand-gte-80: var(--wa-color-green-gte-80);
|
||||
|
||||
--wa-color-brand-max-40: var(--wa-color-green-max-40);
|
||||
--wa-color-brand-min-40: var(--wa-color-green-min-40);
|
||||
--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);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -19,4 +17,30 @@
|
||||
--wa-color-brand-05: var(--wa-color-indigo-05);
|
||||
--wa-color-brand: var(--wa-color-indigo);
|
||||
--wa-color-brand-key: var(--wa-color-indigo-key);
|
||||
|
||||
--wa-color-brand-lt-40: var(--wa-color-indigo-lt-40);
|
||||
--wa-color-brand-gte-40: var(--wa-color-indigo-gte-40);
|
||||
|
||||
--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-lt-80: var(--wa-color-indigo-lt-80);
|
||||
--wa-color-brand-gte-80: var(--wa-color-indigo-gte-80);
|
||||
|
||||
--wa-color-brand-max-40: var(--wa-color-indigo-max-40);
|
||||
--wa-color-brand-min-40: var(--wa-color-indigo-min-40);
|
||||
--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);
|
||||
}
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-brand-orange {
|
||||
--wa-color-brand-95: var(--wa-color-orange-95);
|
||||
--wa-color-brand-90: var(--wa-color-orange-90);
|
||||
--wa-color-brand-80: var(--wa-color-orange-80);
|
||||
--wa-color-brand-70: var(--wa-color-orange-70);
|
||||
--wa-color-brand-60: var(--wa-color-orange-60);
|
||||
--wa-color-brand-50: var(--wa-color-orange-50);
|
||||
--wa-color-brand-40: var(--wa-color-orange-40);
|
||||
--wa-color-brand-30: var(--wa-color-orange-30);
|
||||
--wa-color-brand-20: var(--wa-color-orange-20);
|
||||
--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-key: var(--wa-color-orange-key);
|
||||
}
|
||||
@@ -1,6 +1,4 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -19,4 +17,30 @@
|
||||
--wa-color-brand-05: var(--wa-color-pink-05);
|
||||
--wa-color-brand: var(--wa-color-pink);
|
||||
--wa-color-brand-key: var(--wa-color-pink-key);
|
||||
|
||||
--wa-color-brand-lt-40: var(--wa-color-pink-lt-40);
|
||||
--wa-color-brand-gte-40: var(--wa-color-pink-gte-40);
|
||||
|
||||
--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-lt-80: var(--wa-color-pink-lt-80);
|
||||
--wa-color-brand-gte-80: var(--wa-color-pink-gte-80);
|
||||
|
||||
--wa-color-brand-max-40: var(--wa-color-pink-max-40);
|
||||
--wa-color-brand-min-40: var(--wa-color-pink-min-40);
|
||||
--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);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -19,4 +17,30 @@
|
||||
--wa-color-brand-05: var(--wa-color-purple-05);
|
||||
--wa-color-brand: var(--wa-color-purple);
|
||||
--wa-color-brand-key: var(--wa-color-purple-key);
|
||||
|
||||
--wa-color-brand-lt-40: var(--wa-color-purple-lt-40);
|
||||
--wa-color-brand-gte-40: var(--wa-color-purple-gte-40);
|
||||
|
||||
--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-lt-80: var(--wa-color-purple-lt-80);
|
||||
--wa-color-brand-gte-80: var(--wa-color-purple-gte-80);
|
||||
|
||||
--wa-color-brand-max-40: var(--wa-color-purple-max-40);
|
||||
--wa-color-brand-min-40: var(--wa-color-purple-min-40);
|
||||
--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);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -19,4 +17,30 @@
|
||||
--wa-color-brand-05: var(--wa-color-red-05);
|
||||
--wa-color-brand: var(--wa-color-red);
|
||||
--wa-color-brand-key: var(--wa-color-red-key);
|
||||
|
||||
--wa-color-brand-lt-40: var(--wa-color-red-lt-40);
|
||||
--wa-color-brand-gte-40: var(--wa-color-red-gte-40);
|
||||
|
||||
--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-lt-80: var(--wa-color-red-lt-80);
|
||||
--wa-color-brand-gte-80: var(--wa-color-red-gte-80);
|
||||
|
||||
--wa-color-brand-max-40: var(--wa-color-red-max-40);
|
||||
--wa-color-brand-min-40: var(--wa-color-red-min-40);
|
||||
--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);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -19,4 +17,30 @@
|
||||
--wa-color-brand-05: var(--wa-color-yellow-05);
|
||||
--wa-color-brand: var(--wa-color-yellow);
|
||||
--wa-color-brand-key: var(--wa-color-yellow-key);
|
||||
|
||||
--wa-color-brand-lt-40: var(--wa-color-yellow-lt-40);
|
||||
--wa-color-brand-gte-40: var(--wa-color-yellow-gte-40);
|
||||
|
||||
--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-lt-80: var(--wa-color-yellow-lt-80);
|
||||
--wa-color-brand-gte-80: var(--wa-color-yellow-gte-80);
|
||||
|
||||
--wa-color-brand-max-40: var(--wa-color-yellow-max-40);
|
||||
--wa-color-brand-min-40: var(--wa-color-yellow-min-40);
|
||||
--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);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -10,4 +8,15 @@
|
||||
{%- endfor %}
|
||||
--wa-color-brand: var(--wa-color-{{ hue }});
|
||||
--wa-color-brand-key: var(--wa-color-{{ hue }}-key);
|
||||
|
||||
{% for tint in ['40', '50', '60', '70', '80'] %}
|
||||
--wa-color-brand-lt-{{ tint }}: var(--wa-color-{{ hue }}-lt-{{ tint }});
|
||||
--wa-color-brand-gte-{{ tint }}: var(--wa-color-{{ hue }}-gte-{{ tint }});
|
||||
{% endfor %}
|
||||
{% for tint in ['40', '50', '60', '70'] %}
|
||||
--wa-color-brand-max-{{ tint }}: var(--wa-color-{{ hue }}-max-{{ tint }});
|
||||
--wa-color-brand-min-{{ tint }}: var(--wa-color-{{ hue }}-min-{{ tint }});
|
||||
{%- endfor %}
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-{{ hue }}-on);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
|
||||
403
src/styles/color/base.css
Normal file
403
src/styles/color/base.css
Normal file
@@ -0,0 +1,403 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "base.css.njk" */
|
||||
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
:where([class^='wa-brand-'], [class*=' wa-brand-']),
|
||||
: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
|
||||
*/
|
||||
|
||||
--wa-color-red-lt-40: calc(clamp(0, 40 - var(--wa-color-red-key), 1) * 100%);
|
||||
--wa-color-red-gte-40: calc(100% - var(--wa-color-red-lt-40));
|
||||
--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-lt-80: calc(clamp(0, 80 - var(--wa-color-red-key), 1) * 100%);
|
||||
--wa-color-red-gte-80: calc(100% - var(--wa-color-red-lt-80));
|
||||
|
||||
--wa-color-yellow-lt-40: calc(clamp(0, 40 - var(--wa-color-yellow-key), 1) * 100%);
|
||||
--wa-color-yellow-gte-40: calc(100% - var(--wa-color-yellow-lt-40));
|
||||
--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-yellow-lt-80: calc(clamp(0, 80 - var(--wa-color-yellow-key), 1) * 100%);
|
||||
--wa-color-yellow-gte-80: calc(100% - var(--wa-color-yellow-lt-80));
|
||||
|
||||
--wa-color-green-lt-40: calc(clamp(0, 40 - var(--wa-color-green-key), 1) * 100%);
|
||||
--wa-color-green-gte-40: calc(100% - var(--wa-color-green-lt-40));
|
||||
--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-green-lt-80: calc(clamp(0, 80 - var(--wa-color-green-key), 1) * 100%);
|
||||
--wa-color-green-gte-80: calc(100% - var(--wa-color-green-lt-80));
|
||||
|
||||
--wa-color-cyan-lt-40: calc(clamp(0, 40 - var(--wa-color-cyan-key), 1) * 100%);
|
||||
--wa-color-cyan-gte-40: calc(100% - var(--wa-color-cyan-lt-40));
|
||||
--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-cyan-lt-80: calc(clamp(0, 80 - var(--wa-color-cyan-key), 1) * 100%);
|
||||
--wa-color-cyan-gte-80: calc(100% - var(--wa-color-cyan-lt-80));
|
||||
|
||||
--wa-color-blue-lt-40: calc(clamp(0, 40 - var(--wa-color-blue-key), 1) * 100%);
|
||||
--wa-color-blue-gte-40: calc(100% - var(--wa-color-blue-lt-40));
|
||||
--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-blue-lt-80: calc(clamp(0, 80 - var(--wa-color-blue-key), 1) * 100%);
|
||||
--wa-color-blue-gte-80: calc(100% - var(--wa-color-blue-lt-80));
|
||||
|
||||
--wa-color-indigo-lt-40: calc(clamp(0, 40 - var(--wa-color-indigo-key), 1) * 100%);
|
||||
--wa-color-indigo-gte-40: calc(100% - var(--wa-color-indigo-lt-40));
|
||||
--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-indigo-lt-80: calc(clamp(0, 80 - var(--wa-color-indigo-key), 1) * 100%);
|
||||
--wa-color-indigo-gte-80: calc(100% - var(--wa-color-indigo-lt-80));
|
||||
|
||||
--wa-color-purple-lt-40: calc(clamp(0, 40 - var(--wa-color-purple-key), 1) * 100%);
|
||||
--wa-color-purple-gte-40: calc(100% - var(--wa-color-purple-lt-40));
|
||||
--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-purple-lt-80: calc(clamp(0, 80 - var(--wa-color-purple-key), 1) * 100%);
|
||||
--wa-color-purple-gte-80: calc(100% - var(--wa-color-purple-lt-80));
|
||||
|
||||
--wa-color-pink-lt-40: calc(clamp(0, 40 - var(--wa-color-pink-key), 1) * 100%);
|
||||
--wa-color-pink-gte-40: calc(100% - var(--wa-color-pink-lt-40));
|
||||
--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-pink-lt-80: calc(clamp(0, 80 - var(--wa-color-pink-key), 1) * 100%);
|
||||
--wa-color-pink-gte-80: calc(100% - var(--wa-color-pink-lt-80));
|
||||
|
||||
--wa-color-gray-lt-40: calc(clamp(0, 40 - var(--wa-color-gray-key), 1) * 100%);
|
||||
--wa-color-gray-gte-40: calc(100% - var(--wa-color-gray-lt-40));
|
||||
--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));
|
||||
--wa-color-gray-lt-80: calc(clamp(0, 80 - var(--wa-color-gray-key), 1) * 100%);
|
||||
--wa-color-gray-gte-80: calc(100% - var(--wa-color-gray-lt-80));
|
||||
|
||||
/*
|
||||
* 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
|
||||
*/
|
||||
|
||||
--wa-color-red-max-40: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-40), var(--wa-color-red-40));
|
||||
--wa-color-red-min-40: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-40), var(--wa-color-red-40));
|
||||
--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-yellow-max-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-lt-40),
|
||||
var(--wa-color-yellow-40)
|
||||
);
|
||||
--wa-color-yellow-min-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-gte-40),
|
||||
var(--wa-color-yellow-40)
|
||||
);
|
||||
--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-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-lt-40),
|
||||
var(--wa-color-green-40)
|
||||
);
|
||||
--wa-color-green-min-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-gte-40),
|
||||
var(--wa-color-green-40)
|
||||
);
|
||||
--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-40: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-40), var(--wa-color-cyan-40));
|
||||
--wa-color-cyan-min-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-gte-40),
|
||||
var(--wa-color-cyan-40)
|
||||
);
|
||||
--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-40: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-40), var(--wa-color-blue-40));
|
||||
--wa-color-blue-min-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-gte-40),
|
||||
var(--wa-color-blue-40)
|
||||
);
|
||||
--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-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-lt-40),
|
||||
var(--wa-color-indigo-40)
|
||||
);
|
||||
--wa-color-indigo-min-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-gte-40),
|
||||
var(--wa-color-indigo-40)
|
||||
);
|
||||
--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-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-lt-40),
|
||||
var(--wa-color-purple-40)
|
||||
);
|
||||
--wa-color-purple-min-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-gte-40),
|
||||
var(--wa-color-purple-40)
|
||||
);
|
||||
--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-40: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-40), var(--wa-color-pink-40));
|
||||
--wa-color-pink-min-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-gte-40),
|
||||
var(--wa-color-pink-40)
|
||||
);
|
||||
--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-40: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-40), var(--wa-color-gray-40));
|
||||
--wa-color-gray-min-40: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-gte-40),
|
||||
var(--wa-color-gray-40)
|
||||
);
|
||||
--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-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
|
||||
--wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
|
||||
--wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
|
||||
--wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
|
||||
--wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
|
||||
--wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
|
||||
--wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
|
||||
--wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
|
||||
}
|
||||
34
src/styles/color/base.css.njk
Normal file
34
src/styles/color/base.css.njk
Normal file
@@ -0,0 +1,34 @@
|
||||
{% for class in ['theme', 'palette', 'brand'] %}
|
||||
:where([class^='wa-{{ class }}-'], [class*=' wa-{{ class }}-']),
|
||||
{%- endfor %}
|
||||
: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
|
||||
*/
|
||||
{% for hue in hues %}
|
||||
{% for tint in ['40', '50', '60', '70', '80'] %}
|
||||
--wa-color-{{ hue }}-lt-{{ tint }}: calc(clamp(0, {{ tint }} - var(--wa-color-{{ hue }}-key), 1) * 100%);
|
||||
--wa-color-{{ hue }}-gte-{{ tint }}: calc(100% - var(--wa-color-{{ hue }}-lt-{{ tint }}));
|
||||
{%- endfor %}
|
||||
{% endfor %}
|
||||
|
||||
/*
|
||||
* 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
|
||||
*/
|
||||
{% for hue in hues %}
|
||||
{% for tint in ['40', '50', '60', '70'] %}
|
||||
--wa-color-{{ hue }}-max-{{ tint }}: color-mix(in oklab, var(--wa-color-{{ hue }}) var(--wa-color-{{ hue }}-lt-{{ tint }}), var(--wa-color-{{ hue }}-{{ tint }}));
|
||||
--wa-color-{{ hue }}-min-{{ tint }}: color-mix(in oklab, var(--wa-color-{{ hue }}) var(--wa-color-{{ hue }}-gte-{{ tint }}), var(--wa-color-{{ hue }}-{{ tint }}));
|
||||
{%- endfor %}
|
||||
{%- endfor %}
|
||||
|
||||
/* Text color: white if key < 60, {hue}-10 otherwise */
|
||||
{% for hue in hues %}
|
||||
--wa-color-{{ hue }}-on: color-mix(in oklab, var(--wa-color-{{ hue }}-10) var(--wa-color-{{ hue }}-gte-60), white);
|
||||
{%- endfor %}
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
|
||||
@@ -8,7 +8,9 @@ import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { PALETTE_DIR } from './util.js';
|
||||
|
||||
export const paletteFiles = fs.readdirSync(PALETTE_DIR + '/').filter(file => file.endsWith('.css'));
|
||||
export const paletteFiles = fs
|
||||
.readdirSync(PALETTE_DIR + '/')
|
||||
.filter(file => file.endsWith('.css') && !file.endsWith('base.css'));
|
||||
export const declarationRegex =
|
||||
/^\s*--wa-color-(?<hue>[a-z]+)-(?<level>[0-9]+):\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
|
||||
export const rawCSS = {};
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import chalk from 'chalk';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import palettes, { rawPalettes } from './palettes-analyzed.js';
|
||||
import palettes from './palettes-analyzed.js';
|
||||
import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js';
|
||||
|
||||
const selector = paletteId =>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
|
||||
@@ -17,7 +17,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-70-min);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-min-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);
|
||||
@@ -77,7 +77,7 @@
|
||||
*/
|
||||
--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-max);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-max-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);
|
||||
|
||||
@@ -24,7 +24,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-50-max);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-max-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);
|
||||
@@ -96,7 +96,7 @@
|
||||
*/
|
||||
--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-min);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-min-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);
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@import url('scales.css');
|
||||
@import url('../../brand/blue.css');
|
||||
|
||||
/**
|
||||
@@ -20,25 +21,25 @@
|
||||
* Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-gray-95);
|
||||
--wa-color-surface-border: var(--wa-color-gray-90);
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-90);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
|
||||
--wa-color-text-normal: var(--wa-color-gray-10);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-text-normal: var(--wa-color-neutral-10);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-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);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 20%, transparent);
|
||||
|
||||
/* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
|
||||
* By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
|
||||
* Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
|
||||
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
|
||||
transparent
|
||||
);
|
||||
|
||||
@@ -61,7 +62,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-50-max);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-max-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);
|
||||
@@ -69,14 +70,14 @@
|
||||
--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);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-60);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-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-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);
|
||||
--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: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
@@ -89,24 +90,24 @@
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-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-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);
|
||||
--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: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
}
|
||||
|
||||
@@ -120,17 +121,17 @@
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-10);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: var(--wa-color-gray-20);
|
||||
--wa-color-surface-border: var(--wa-color-neutral-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-gray-95);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-text-normal: var(--wa-color-neutral-95);
|
||||
--wa-color-text-quiet: var(--wa-color-neutral-60);
|
||||
--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);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
|
||||
|
||||
/* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */
|
||||
--wa-color-shadow: color-mix(
|
||||
@@ -149,7 +150,7 @@
|
||||
*/
|
||||
--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-max);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-max-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);
|
||||
@@ -157,14 +158,14 @@
|
||||
--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);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-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-50);
|
||||
--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-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-success-70);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
@@ -177,23 +178,23 @@
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-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-50);
|
||||
--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-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-danger-70);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
|
||||
}
|
||||
|
||||
92
src/styles/themes/default/scales.css
Normal file
92
src/styles/themes/default/scales.css
Normal file
@@ -0,0 +1,92 @@
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "scales.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']) {
|
||||
--wa-color-success-05: var(--wa-color-green-05);
|
||||
--wa-color-success-10: var(--wa-color-green-10);
|
||||
--wa-color-success-20: var(--wa-color-green-20);
|
||||
--wa-color-success-30: var(--wa-color-green-30);
|
||||
--wa-color-success-40: var(--wa-color-green-40);
|
||||
--wa-color-success-50: var(--wa-color-green-50);
|
||||
--wa-color-success-60: var(--wa-color-green-60);
|
||||
--wa-color-success-70: var(--wa-color-green-70);
|
||||
--wa-color-success-80: var(--wa-color-green-80);
|
||||
--wa-color-success-90: var(--wa-color-green-90);
|
||||
--wa-color-success-95: var(--wa-color-green-95);
|
||||
--wa-color-success: var(--wa-color-green);
|
||||
|
||||
--wa-color-success-max-40: var(--wa-color-max-green-40);
|
||||
--wa-color-success-min-40: var(--wa-color-min-green-40);
|
||||
--wa-color-success-max-50: var(--wa-color-max-green-50);
|
||||
--wa-color-success-min-50: var(--wa-color-min-green-50);
|
||||
--wa-color-success-max-60: var(--wa-color-max-green-60);
|
||||
--wa-color-success-min-60: var(--wa-color-min-green-60);
|
||||
--wa-color-success-max-70: var(--wa-color-max-green-70);
|
||||
--wa-color-success-min-70: var(--wa-color-min-green-70);
|
||||
|
||||
--wa-color-warning-05: var(--wa-color-yellow-05);
|
||||
--wa-color-warning-10: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-20: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-30: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-40: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-50: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-60: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-70: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-80: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-90: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-95: var(--wa-color-yellow-95);
|
||||
--wa-color-warning: var(--wa-color-yellow);
|
||||
|
||||
--wa-color-warning-max-40: var(--wa-color-max-yellow-40);
|
||||
--wa-color-warning-min-40: var(--wa-color-min-yellow-40);
|
||||
--wa-color-warning-max-50: var(--wa-color-max-yellow-50);
|
||||
--wa-color-warning-min-50: var(--wa-color-min-yellow-50);
|
||||
--wa-color-warning-max-60: var(--wa-color-max-yellow-60);
|
||||
--wa-color-warning-min-60: var(--wa-color-min-yellow-60);
|
||||
--wa-color-warning-max-70: var(--wa-color-max-yellow-70);
|
||||
--wa-color-warning-min-70: var(--wa-color-min-yellow-70);
|
||||
|
||||
--wa-color-danger-05: var(--wa-color-red-05);
|
||||
--wa-color-danger-10: var(--wa-color-red-10);
|
||||
--wa-color-danger-20: var(--wa-color-red-20);
|
||||
--wa-color-danger-30: var(--wa-color-red-30);
|
||||
--wa-color-danger-40: var(--wa-color-red-40);
|
||||
--wa-color-danger-50: var(--wa-color-red-50);
|
||||
--wa-color-danger-60: var(--wa-color-red-60);
|
||||
--wa-color-danger-70: var(--wa-color-red-70);
|
||||
--wa-color-danger-80: var(--wa-color-red-80);
|
||||
--wa-color-danger-90: var(--wa-color-red-90);
|
||||
--wa-color-danger-95: var(--wa-color-red-95);
|
||||
--wa-color-danger: var(--wa-color-red);
|
||||
|
||||
--wa-color-danger-max-40: var(--wa-color-max-red-40);
|
||||
--wa-color-danger-min-40: var(--wa-color-min-red-40);
|
||||
--wa-color-danger-max-50: var(--wa-color-max-red-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-min-red-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-max-red-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-min-red-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-max-red-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-min-red-70);
|
||||
|
||||
--wa-color-neutral-05: var(--wa-color-gray-05);
|
||||
--wa-color-neutral-10: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-20: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-30: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-40: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-50: var(--wa-color-gray-50);
|
||||
--wa-color-neutral-60: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-70: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-80: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-90: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-95: var(--wa-color-gray-95);
|
||||
--wa-color-neutral: var(--wa-color-gray);
|
||||
|
||||
--wa-color-neutral-max-40: var(--wa-color-max-gray-40);
|
||||
--wa-color-neutral-min-40: var(--wa-color-min-gray-40);
|
||||
--wa-color-neutral-max-50: var(--wa-color-max-gray-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-min-gray-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-max-gray-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-min-gray-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-max-gray-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-min-gray-70);
|
||||
}
|
||||
15
src/styles/themes/default/scales.css.njk
Normal file
15
src/styles/themes/default/scales.css.njk
Normal file
@@ -0,0 +1,15 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']) {
|
||||
{% for variant, hue in { success: 'green', warning: 'yellow', danger: 'red', neutral: 'gray' } -%}
|
||||
{%- for tint in tints %}
|
||||
--wa-color-{{ variant }}-{{ tint }}: var(--wa-color-{{ hue }}-{{ tint }});
|
||||
{%- endfor %}
|
||||
--wa-color-{{ variant }}: var(--wa-color-{{ hue }});
|
||||
|
||||
{% for tint in ['40', '50', '60', '70'] %}
|
||||
--wa-color-{{ variant }}-max-{{ tint }}: var(--wa-color-max-{{ hue }}-{{ tint }});
|
||||
--wa-color-{{ variant }}-min-{{ tint }}: var(--wa-color-min-{{ hue }}-{{ tint }});
|
||||
{%- endfor %}
|
||||
{% endfor -%}
|
||||
}
|
||||
@@ -29,7 +29,7 @@
|
||||
*/
|
||||
--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-max);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-brand-max-50);
|
||||
--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);
|
||||
|
||||
Reference in New Issue
Block a user