mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
8 Commits
pill
...
clamped-to
| Author | SHA1 | Date | |
|---|---|---|---|
|
c77acdbcd5 | ||
|
|
d574aef103 | ||
|
|
0fd77ca80a | ||
|
|
aaffb4d221 | ||
|
|
79c9708a14 | ||
|
|
2090b05e8a | ||
|
|
3cdd8e49a1 | ||
|
|
d8673a7d71 |
@@ -1 +1 @@
|
||||
["red", "orange", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]
|
||||
["red", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]
|
||||
|
||||
@@ -18,15 +18,11 @@
|
||||
tweaking: tweaking.chroma,
|
||||
'tweaking-chroma': tweaking.chroma,
|
||||
'tweaking-hue': tweaking.chroma,
|
||||
'tweaking-gray-chroma': tweaking.grayChroma,
|
||||
'tweaked-chroma': tweaked?.chroma,
|
||||
'tweaked-hue': tweaked?.hue,
|
||||
'tweaked-any': tweaked
|
||||
'tweaked-chroma': tweaked.chroma,
|
||||
'tweaked-hue': tweaked.hue,
|
||||
'tweaked-any': tweaked.chroma || tweaked.hue
|
||||
}"
|
||||
:style="{
|
||||
'--chroma-scale': chromaScale,
|
||||
'--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
|
||||
}">
|
||||
:style="{ '--chroma-scale': chromaScale }">
|
||||
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
|
||||
@@ -40,9 +36,6 @@
|
||||
<div class="block-info">
|
||||
<code class="class">.wa-palette-{{ paletteId }}</code>
|
||||
{% include '../_includes/status.njk' %}
|
||||
{% if not isPro %}
|
||||
<wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if description %}
|
||||
<p class="summary">
|
||||
@@ -55,20 +48,18 @@
|
||||
|
||||
{% set maxChroma = 0 %}
|
||||
|
||||
<wa-callout size="small" class="tweaked-callout" variant="warning">
|
||||
<wa-callout size="small" class="tweaked-callout" variant="brand">
|
||||
<wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
|
||||
This palette has been tweaked.
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
|
||||
</div>
|
||||
<wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="removeTweak(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
|
||||
|
||||
<wa-button @click="reset()" appearance="outlined" variant="danger">
|
||||
<wa-button @click="reset" appearance="outlined">
|
||||
<span slot="prefix" class="icon-modifier">
|
||||
<wa-icon name="circle-xmark" variant="regular"></wa-icon>
|
||||
</span>
|
||||
Reset
|
||||
</wa-button>
|
||||
<wa-button v-if="!saved" @click="save" variant="success">
|
||||
<wa-button v-if="!saved" @click="save">
|
||||
<span slot="prefix" class="icon-modifier">
|
||||
<wa-icon name="sidebar" variant="regular"></wa-icon>
|
||||
<wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
|
||||
@@ -90,67 +81,25 @@
|
||||
{# Initialize to last hue before gray #}
|
||||
{%- set hueBefore = hues[hues|length - 2] -%}
|
||||
{% for hue in hues -%}
|
||||
{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
|
||||
{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
|
||||
{%- set coreColor = palettes[paletteId][hue][palettes[paletteId][hue].maxChromaTint] -%}
|
||||
{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
|
||||
{% if hue === 'gray' %}
|
||||
<tr data-hue="{{ hue }}" class="color-scale"
|
||||
:class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
|
||||
{% else %}
|
||||
<tr data-hue="{{ hue }}" class="color-scale"
|
||||
:class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
|
||||
<tr data-hue="{{ hue }}" class="color-scale" :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
|
||||
:style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
|
||||
{% endif %}
|
||||
<th>
|
||||
{{ hue | capitalize }}
|
||||
</th>
|
||||
<td class="core-column"
|
||||
style="--color: var(--wa-color-{{ hue }})"
|
||||
:style="{
|
||||
'--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
|
||||
'--color-gray-undertone': colors[grayColor][{{coreTint}}],
|
||||
'--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
|
||||
}">
|
||||
<td class="core-column" style="--color: var(--wa-color-{{ hue }})">
|
||||
{% if hue !== 'gray' %}
|
||||
{%- set hueAfter = hues[loop.index0 + 1] -%}
|
||||
{%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
|
||||
{%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
|
||||
{%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
|
||||
<wa-dropdown>
|
||||
<div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch"
|
||||
style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});"
|
||||
>
|
||||
{{ palettes[paletteId][hue].maxChromaTint }}
|
||||
<wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
|
||||
</div>
|
||||
<div class="popup">
|
||||
{% if hue === 'gray' %}
|
||||
<wa-radio-group class="core-color" orientation="horizontal" v-model="grayColor">
|
||||
{% for h in hues -%}
|
||||
{%- if h !== 'gray' -%}
|
||||
<wa-radio-button id="gray-undertone-{{ h }}" value="{{ h }}" label="{{ h | capitalize }}" style="--color: var(--wa-color-{{ h }})"></wa-radio-button>
|
||||
<wa-tooltip for="gray-undertone-{{ h }}" hoist>
|
||||
{{ h | capitalize }}
|
||||
</wa-tooltip>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
<div slot="label">
|
||||
Gray undertone
|
||||
</div>
|
||||
</wa-radio-group>
|
||||
<div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
|
||||
<wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
|
||||
value="0" min="0" :max="maxGrayChroma" step="0.01"
|
||||
@input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
|
||||
<div slot="label">
|
||||
Gray colorfulness
|
||||
<wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
|
||||
</div>
|
||||
</wa-slider>
|
||||
<div class="label-min">Neutral</div>
|
||||
<div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{%- set hueAfter = hues[loop.index0 + 1] -%}
|
||||
{%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
|
||||
{%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
|
||||
{%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
|
||||
|
||||
<div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
|
||||
{{ palettes[paletteId][hue].maxChromaTint }}
|
||||
<wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
|
||||
</div>
|
||||
<div class="popup">
|
||||
<div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
|
||||
<wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
|
||||
min="{{ minShift }}" max="{{ maxShift }}" step="1"
|
||||
@@ -164,23 +113,23 @@
|
||||
<div class="label-min">More {{hueBefore}}</div>
|
||||
<div class="label-max">More {{hueAfter}}</div>
|
||||
</div>
|
||||
{%- set hueBefore = hue -%}
|
||||
{% endif %}
|
||||
<div class="wa-gap-s">
|
||||
<code>--wa-color-{{ hue }}</code>
|
||||
<wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
|
||||
</div>
|
||||
</div>`
|
||||
<code>--wa-color-{{ hue }}</code>
|
||||
<wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
|
||||
</div>
|
||||
</div>`
|
||||
</wa-dropdown>
|
||||
{%- set hueBefore = hue -%}
|
||||
{% else %}
|
||||
<div id="core-{{ hue }}-swatch" class="color swatch" data-tint="core" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
|
||||
{{ palettes[paletteId][hue].maxChromaTint }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% for tint in tints -%}
|
||||
{%- set color = palettes[paletteId][hue][tint] -%}
|
||||
<td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
|
||||
:style="{
|
||||
'--color-tweaked': colors.{{ hue }}[{{ tint }}],
|
||||
'--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
|
||||
}">
|
||||
<div class="color swatch" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
|
||||
<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>
|
||||
</td>
|
||||
@@ -195,8 +144,7 @@
|
||||
<div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
|
||||
:class="{ tweaked: chromaScale !== 1 }"
|
||||
style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
|
||||
<wa-slider name="chroma-scale" ref="chromaScaleSlider"
|
||||
v-model="chromaScale" value="1" step="0.01"
|
||||
<wa-slider name="chroma-scale" v-model="chromaScale" value="1" step="0.01"
|
||||
min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
|
||||
@input="tweaking.chroma = true"
|
||||
@change="tweaking.chroma = false">
|
||||
|
||||
@@ -13,9 +13,7 @@ sidebar.palettes = {
|
||||
sidebar.updateCurrent();
|
||||
},
|
||||
|
||||
updateSaved() {
|
||||
this.saved = localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [];
|
||||
},
|
||||
saved: localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [],
|
||||
|
||||
save(saved = this.saved) {
|
||||
this.saved = saved ?? [];
|
||||
@@ -28,9 +26,6 @@ sidebar.palettes = {
|
||||
},
|
||||
};
|
||||
|
||||
sidebar.palettes.updateSaved();
|
||||
addEventListener('storage', event => sidebar.palettes.updateSaved());
|
||||
|
||||
sidebar.palette = {
|
||||
getUid() {
|
||||
let savedPalettes = sidebar.palettes.saved;
|
||||
@@ -41,7 +36,7 @@ sidebar.palette = {
|
||||
}
|
||||
|
||||
// Find first available number
|
||||
for (let i = 1; i <= savedPalettes.length + 1; i++) {
|
||||
for (let i = 1; i < savedPalettes.length + 1; i++) {
|
||||
if (!uids.has(i)) {
|
||||
return i;
|
||||
}
|
||||
@@ -99,7 +94,7 @@ sidebar.palette = {
|
||||
sidebar.palettes.save(savedPalettes);
|
||||
|
||||
if (sidebar.palette.equals(globalThis.paletteApp?.saved, palette)) {
|
||||
paletteApp.postDelete();
|
||||
paletteApp.saved = null;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -189,52 +184,18 @@ sidebar.updateCurrent = function () {
|
||||
|
||||
// We want to start from the longest prefix
|
||||
prefixes.reverse();
|
||||
let candidates;
|
||||
let matchingPrefix;
|
||||
|
||||
for (let prefix of prefixes) {
|
||||
candidates = document.querySelectorAll(`#sidebar a[href^="${prefix}"]`);
|
||||
let a = document.querySelector(`#sidebar a[href^="${prefix}"]`);
|
||||
|
||||
if (candidates.length > 0) {
|
||||
matchingPrefix = prefix;
|
||||
if (a) {
|
||||
for (let current of document.querySelectorAll('#sidebar a.current')) {
|
||||
current.classList.remove('current');
|
||||
}
|
||||
a.classList.add('current');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!matchingPrefix) {
|
||||
// Abort mission
|
||||
return;
|
||||
}
|
||||
|
||||
if (matchingPrefix === pathParts.at(-1)) {
|
||||
// Full path matches, check search
|
||||
if (location.search) {
|
||||
candidates = [...candidates];
|
||||
|
||||
let searchParams = new URLSearchParams(location.search);
|
||||
|
||||
if (searchParams.has('uid')) {
|
||||
// Only consider candidates with the same uid
|
||||
candidates = candidates.filter(a => {
|
||||
let params = new URLSearchParams(a.search);
|
||||
return params.get('uid') === searchParams.get('uid');
|
||||
});
|
||||
} else {
|
||||
// Sort candidates based on how many params they have in common, in descending order
|
||||
candidates = candidates.sort((a, b) => {
|
||||
return countSharedSearchParams(searchParams, b.search) - countSharedSearchParams(searchParams, a.search);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (candidates.length > 0) {
|
||||
for (let current of document.querySelectorAll('#sidebar a.current')) {
|
||||
current.classList.remove('current');
|
||||
}
|
||||
|
||||
candidates[0].classList.add('current');
|
||||
}
|
||||
};
|
||||
|
||||
sidebar.render = function () {
|
||||
@@ -243,12 +204,3 @@ sidebar.render = function () {
|
||||
|
||||
sidebar.render();
|
||||
window.addEventListener('turbo:render', () => sidebar.render());
|
||||
|
||||
function countSharedSearchParams(searchParams, search) {
|
||||
if (!search || search === '?') {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let params = new URLSearchParams(search);
|
||||
return [...searchParams.keys()].filter(k => params.get(k) === searchParams.get(k)).length;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Get import code for remixed themes and tweaked palettes.
|
||||
*/
|
||||
export { getThemeCode } from './tweak/code.js';
|
||||
export { theme as getThemeCode } from './tweak/code.js';
|
||||
export { cdnUrl, hueRanges, hues, selectors, tints, urls } from './tweak/data.js';
|
||||
export { default as Permalink } from './tweak/permalink.js';
|
||||
|
||||
@@ -25,23 +25,18 @@ export function cssLiteral(value, options = {}) {
|
||||
}
|
||||
}
|
||||
|
||||
// Params in correct order
|
||||
export const themeParams = ['colors', 'palette', 'brand', 'typography'];
|
||||
|
||||
export function getThemeCode(base, params, options) {
|
||||
export function theme(base, params, options) {
|
||||
let ret = [];
|
||||
|
||||
if (base) {
|
||||
ret.push(urls.theme(base));
|
||||
}
|
||||
|
||||
for (let aspect of themeParams) {
|
||||
let value = params[aspect];
|
||||
|
||||
if (value) {
|
||||
ret.push(urls[aspect](value));
|
||||
}
|
||||
}
|
||||
ret.push(
|
||||
...Object.entries(params)
|
||||
.filter(([aspect, id]) => Boolean(id))
|
||||
.map(([aspect, id]) => urls[aspect](id)),
|
||||
);
|
||||
|
||||
return ret.map(url => cssImport(url, options)).join('\n');
|
||||
}
|
||||
|
||||
@@ -29,45 +29,6 @@ export const hueRanges = {
|
||||
pink: { min: 320, max: 365 }, // 45
|
||||
};
|
||||
|
||||
export const moreHue = {
|
||||
red: 'Redder',
|
||||
orange: 'More orange', // https://www.reddit.com/r/grammar/comments/u9n0uo/is_it_oranger_or_more_orange/
|
||||
yellow: 'Yellower',
|
||||
green: 'Greener',
|
||||
cyan: 'More cyan',
|
||||
blue: 'Bluer',
|
||||
indigo: 'More indigo',
|
||||
pink: 'Pinker',
|
||||
};
|
||||
|
||||
/**
|
||||
* Max gray chroma (% of chroma of undertone) per hue
|
||||
*/
|
||||
export const maxGrayChroma = {
|
||||
red: 0.2,
|
||||
orange: 0.2,
|
||||
yellow: 0.25,
|
||||
green: 0.25,
|
||||
cyan: 0.3,
|
||||
blue: 0.35,
|
||||
indigo: 0.35,
|
||||
purple: 0.3,
|
||||
pink: 0.25,
|
||||
};
|
||||
|
||||
export const docsURLs = {
|
||||
colors: '/docs/themes/',
|
||||
palette: '/docs/palettes/',
|
||||
typography: '/docs/themes/',
|
||||
};
|
||||
|
||||
export const icons = {
|
||||
colors: 'palette',
|
||||
palette: 'swatchbook',
|
||||
brand: 'droplet',
|
||||
typography: 'font-case',
|
||||
};
|
||||
|
||||
export const hues = Object.keys(hueRanges);
|
||||
|
||||
export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
export function normalizeAngles(angles) {
|
||||
// First, normalize
|
||||
angles = angles.map(h => ((h % 360) + 360) % 360);
|
||||
|
||||
// Remove top and bottom 25% and find average
|
||||
let averageHue =
|
||||
angles
|
||||
.toSorted((a, b) => a - b)
|
||||
.slice(angles.length / 4, -angles.length / 4)
|
||||
.reduce((a, b) => a + b, 0) / angles.length;
|
||||
|
||||
for (let i = 0; i < angles.length; i++) {
|
||||
let h = angles[i];
|
||||
let prevHue = angles[i - 1];
|
||||
let delta = h - prevHue;
|
||||
|
||||
if (Math.abs(delta) > 180) {
|
||||
let equivalent = [h + 360, h - 360];
|
||||
// Offset hue to minimize difference in the direction that brings it closer to the average
|
||||
let delta = h - averageHue;
|
||||
|
||||
if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
|
||||
angles[i] = equivalent[0];
|
||||
} else {
|
||||
angles[i] = equivalent[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return angles;
|
||||
}
|
||||
|
||||
export function subtractAngles(θ1, θ2) {
|
||||
let [a, b] = normalizeAngles([θ1, θ2]);
|
||||
return a - b;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -42,14 +42,6 @@ wa-code-demo::part(preview) {
|
||||
<wa-input label="WA Input (url)" type="url"></wa-input>
|
||||
```
|
||||
|
||||
## Pill shaped text fields
|
||||
|
||||
Add the `wa-pill` class to an `<input>` to make it pill-shaped.
|
||||
|
||||
```html {.example}
|
||||
<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
|
||||
```
|
||||
|
||||
## Color Picker
|
||||
|
||||
Basic:
|
||||
|
||||
@@ -25,16 +25,9 @@ wa-dropdown > .color.swatch {
|
||||
--track-color-inactive: transparent;
|
||||
--track-color-active: transparent;
|
||||
--thumb-color: var(--color-tweaked, var(--color));
|
||||
--thumb-shadow: 0 0 0 var(--thumb-gap) var(--wa-color-surface-default),
|
||||
var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
calc(var(--wa-shadow-offset-x-m) * -1 + var(--thumb-gap)) var(--wa-color-shadow);
|
||||
|
||||
&:active {
|
||||
--thumb-size: 2em;
|
||||
}
|
||||
|
||||
&::part(base) {
|
||||
background: linear-gradient(to right in var(--color-interpolation-space, oklab), var(--color-1), var(--color-2));
|
||||
background: linear-gradient(to right in oklch, var(--color-1), var(--color-2));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,20 +63,13 @@ wa-dropdown > .color.swatch {
|
||||
.hue-shift-slider {
|
||||
--color-1: oklch(from var(--color) l c calc(h + var(--min, 0)));
|
||||
--color-2: oklch(from var(--color) l c calc(h + var(--max, 0)));
|
||||
--color-interpolation-space: oklch;
|
||||
}
|
||||
|
||||
.chroma-scale-slider {
|
||||
--color: var(--wa-color-brand);
|
||||
--color-1: oklch(from var(--color) l calc(c * var(--min)) h);
|
||||
--color-2: oklch(from var(--color) l calc(c * var(--max)) h);
|
||||
}
|
||||
|
||||
.gray-chroma-slider {
|
||||
--color: var(--wa-color-gray);
|
||||
--color-1: oklch(from var(--wa-color-gray) l 0 none);
|
||||
--color-2: oklch(from var(--color-gray-undertone) l calc(c * var(--max)) h);
|
||||
margin-top: var(--wa-space-m);
|
||||
--color-tweaked: oklch(from var(--color) l calc(c * var(--chroma-scale)) h);
|
||||
}
|
||||
|
||||
.popup {
|
||||
@@ -105,13 +91,13 @@ wa-dropdown > .color.swatch {
|
||||
td:not([data-hue='gray'] *) {
|
||||
--tweak-c: calc(c * var(--chroma-scale, 1));
|
||||
--tweak-h: calc(h + var(--hue-shift, 0));
|
||||
|
||||
--color-tweaked: oklch(from var(--color) l var(--tweak-c) var(--tweak-h));
|
||||
--color-tweaked-no-chroma-scale: oklch(from var(--color) l c var(--tweak-h));
|
||||
--color-tweaked-no-hue-shift: oklch(from var(--color) l var(--tweak-c) h);
|
||||
|
||||
&:is([data-tint='90'], [data-tint='95']) {
|
||||
/* Work around https://bugs.webkit.org/show_bug.cgi?id=287637 */
|
||||
|
||||
--color-tweaked: lch(from var(--color) l var(--tweak-c) var(--tweak-h));
|
||||
--color-tweaked-no-chroma-scale: lch(from var(--color) l c var(--tweak-h));
|
||||
--color-tweaked-no-hue-shift: lch(from var(--color) l var(--tweak-c) h);
|
||||
|
||||
@@ -125,18 +111,14 @@ wa-dropdown > .color.swatch {
|
||||
|
||||
&:is(.tweaking *) {
|
||||
--color-2-height: 70%;
|
||||
}
|
||||
|
||||
&:is(.tweaking-chroma *) {
|
||||
--color: var(--color-tweaked-no-chroma-scale);
|
||||
}
|
||||
&:is(.tweaking-chroma *) {
|
||||
--color: var(--color-tweaked-no-chroma-scale);
|
||||
}
|
||||
|
||||
&:is(.tweaking-hue *) {
|
||||
--color: var(--color-tweaked-no-hue-shift);
|
||||
}
|
||||
|
||||
&:is(.tweaking-gray-chroma *) {
|
||||
--color: var(--color-tweaked-no-gray-chroma);
|
||||
&:is(.tweaking-hue *) {
|
||||
--color: var(--color-tweaked-no-hue-shift);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -177,29 +159,6 @@ wa-dropdown > .color.swatch {
|
||||
}
|
||||
}
|
||||
|
||||
/* Better UI before Vue initializes */
|
||||
[v-if='saved'],
|
||||
[v-if^='tweaked'] {
|
||||
[v-if='saved'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.core-color {
|
||||
wa-radio-button::part(base) {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
padding: 0;
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
background: var(--color);
|
||||
background-clip: border-box;
|
||||
}
|
||||
|
||||
wa-radio-button:is([checked], :state(checked))::part(base) {
|
||||
box-shadow:
|
||||
inset 0 0 0 var(--indicator-width) var(--indicator-color),
|
||||
inset 0 0 0 calc(var(--indicator-width) + 1.5px) var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
&::part(form-control-input) {
|
||||
gap: var(--wa-space-xs);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,8 +3,7 @@ import Color from 'https://colorjs.io/dist/color.js';
|
||||
import { createApp, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
|
||||
import { cdnUrl, hueRanges, hues, Permalink, tints } from '../../assets/scripts/tweak.js';
|
||||
import { cssImport, cssLiteral, cssRule } from '../../assets/scripts/tweak/code.js';
|
||||
import { maxGrayChroma, moreHue, selectors, urls } from '../../assets/scripts/tweak/data.js';
|
||||
import { subtractAngles } from '../../assets/scripts/tweak/util.js';
|
||||
import { selectors, urls } from '../../assets/scripts/tweak/data.js';
|
||||
import Prism from '/assets/scripts/prism.js';
|
||||
|
||||
await Promise.all(['wa-slider'].map(tag => customElements.whenDefined(tag)));
|
||||
@@ -35,8 +34,6 @@ for (let palette in allPalettes) {
|
||||
}
|
||||
}
|
||||
|
||||
const percentFormatter = value => value.toLocaleString(undefined, { style: 'percent' });
|
||||
|
||||
let paletteAppSpec = {
|
||||
data() {
|
||||
let appRoot = document.querySelector('#palette-app');
|
||||
@@ -52,17 +49,12 @@ let paletteAppSpec = {
|
||||
hueRanges,
|
||||
hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
|
||||
chromaScale: 1,
|
||||
grayChroma: undefined,
|
||||
grayColor: undefined,
|
||||
tweaking: {},
|
||||
saved: null,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
// Non-reactive variables to expose
|
||||
Object.assign(this, { moreHue });
|
||||
|
||||
// Read URL params and apply them. This facilitates permalinks.
|
||||
this.permalink.mapObject(this.hueShifts, {
|
||||
keyTo: key => key.replace(/-shift$/, ''),
|
||||
@@ -71,49 +63,30 @@ let paletteAppSpec = {
|
||||
valueTo: value => (!value ? 0 : Number(value)),
|
||||
});
|
||||
|
||||
this.grayChroma = this.originalGrayChroma;
|
||||
this.grayColor = this.originalGrayColor;
|
||||
|
||||
if (location.search) {
|
||||
// Update from URL
|
||||
this.permalink.writeTo(this.hueShifts);
|
||||
|
||||
for (let param of ['chroma-scale', 'gray-color', 'gray-chroma']) {
|
||||
if (this.permalink.has(param)) {
|
||||
let value = this.permalink.get(param);
|
||||
|
||||
if (!isNaN(value)) {
|
||||
// Convert numeric values to numbers
|
||||
value = Number(value);
|
||||
}
|
||||
|
||||
let prop = camelCase(param);
|
||||
this[prop] = value;
|
||||
}
|
||||
if (this.permalink.has('chroma-scale')) {
|
||||
this.chromaScale = Number(this.permalink.get('chroma-scale') || 1);
|
||||
}
|
||||
|
||||
if (this.permalink.has('uid')) {
|
||||
this.uid = Number(this.permalink.get('uid'));
|
||||
}
|
||||
|
||||
this.saved = sidebar.palette.getSaved(this.getPalette());
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
for (let ref in this.$refs) {
|
||||
this.$refs[ref].tooltipFormatter = percentFormatter;
|
||||
let palette = { id: this.paletteId, uid: this.uid, search: location.search };
|
||||
this.saved = sidebar.palette.getSaved(palette);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
global() {
|
||||
return globalThis;
|
||||
},
|
||||
|
||||
tweaks() {
|
||||
return {
|
||||
hueShifts: this.hueShifts,
|
||||
chromaScale: this.chromaScale,
|
||||
grayColor: this.grayColor,
|
||||
grayChroma: this.grayChroma,
|
||||
};
|
||||
return { hueShifts: this.hueShifts, chromaScale: this.chromaScale };
|
||||
},
|
||||
|
||||
isTweaked() {
|
||||
@@ -123,7 +96,7 @@ let paletteAppSpec = {
|
||||
code() {
|
||||
let ret = {};
|
||||
for (let language of ['html', 'css']) {
|
||||
let code = getPaletteCode(this.paletteId, this.colors, this.tweaked, { language, cdnUrl });
|
||||
let code = getPaletteCode(this.paletteId, this.tweaks, { language, cdnUrl });
|
||||
ret[language] = {
|
||||
raw: code,
|
||||
highlighted: Prism.highlight(code, Prism.languages[language], language),
|
||||
@@ -134,46 +107,47 @@ let paletteAppSpec = {
|
||||
},
|
||||
|
||||
colors() {
|
||||
return applyTweaks.call(this, this.originalColors, this.tweaks, this.tweaked);
|
||||
},
|
||||
let ret = {};
|
||||
|
||||
colorsMinusChromaScale() {
|
||||
let tweaked = { ...this.tweaked, chromaScale: false };
|
||||
return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
|
||||
},
|
||||
for (let hue in this.originalColors) {
|
||||
let originalScale = this.originalColors[hue];
|
||||
let scale = (ret[hue] = {});
|
||||
let descriptors = Object.getOwnPropertyDescriptors(originalScale);
|
||||
Object.defineProperties(scale, {
|
||||
maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
|
||||
maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
|
||||
});
|
||||
|
||||
colorsMinusHueShifts() {
|
||||
let tweaked = { ...this.tweaked, hue: false };
|
||||
return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
|
||||
},
|
||||
for (let tint of tints) {
|
||||
let oklch = originalScale[tint].coords.slice();
|
||||
|
||||
colorsMinusGrayChroma() {
|
||||
let tweaked = { ...this.tweaked, grayChroma: false };
|
||||
return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
|
||||
if (this.hueShifts[hue]) {
|
||||
oklch[2] += this.hueShifts[hue];
|
||||
}
|
||||
|
||||
if (this.chromaScale !== 1) {
|
||||
oklch[1] *= this.chromaScale;
|
||||
}
|
||||
|
||||
scale[tint] = new Color('oklch', oklch);
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
tweaked() {
|
||||
let anyHueTweaked = Object.values(this.hueShifts).some(Boolean);
|
||||
let hue = anyHueTweaked
|
||||
? Object.fromEntries(Object.entries(this.hueShifts).map(([hue, shift]) => [hue, shift !== 0]))
|
||||
: false;
|
||||
|
||||
let ret = {
|
||||
chromaScale: this.chromaScale !== 1,
|
||||
hue,
|
||||
grayChroma: this.grayChroma !== this.originalGrayChroma,
|
||||
grayColor: this.grayColor !== this.originalGrayColor,
|
||||
return {
|
||||
chroma: this.chromaScale !== 1,
|
||||
hue: Object.values(this.hueShifts).some(Boolean),
|
||||
};
|
||||
|
||||
let anyTweaked = Object.values(ret).some(Boolean);
|
||||
return anyTweaked ? ret : false;
|
||||
},
|
||||
|
||||
tweaksHumanReadable() {
|
||||
let ret = {};
|
||||
|
||||
if (this.chromaScale !== 1) {
|
||||
ret.chromaScale = 'More ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
|
||||
ret.chromaScale = 'more ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
|
||||
}
|
||||
|
||||
for (let hue in this.hueShifts) {
|
||||
@@ -184,100 +158,64 @@ let paletteAppSpec = {
|
||||
}
|
||||
|
||||
let relHue = shift < 0 ? arrayPrevious(hues, hue) : arrayNext(hues, hue);
|
||||
let hueTweak = moreHue[relHue] ?? relHue + 'er';
|
||||
let hueTweak =
|
||||
{
|
||||
red: 'redder',
|
||||
orange: 'oranger',
|
||||
indigo: 'more indigo',
|
||||
}[relHue] ?? relHue + 'er';
|
||||
|
||||
ret[hue] = capitalize(hueTweak + ' ' + hue + 's');
|
||||
}
|
||||
|
||||
if (this.tweaked.grayChroma || this.tweaked.grayColor) {
|
||||
if (this.tweaked.grayChroma === 0) {
|
||||
ret.grayChroma = 'Achromatic grays';
|
||||
} else {
|
||||
if (this.tweaked.grayColor) {
|
||||
ret.grayColor = capitalize(this.grayColor) + ' gray undertone';
|
||||
}
|
||||
|
||||
if (this.tweaked.grayChroma) {
|
||||
let more = this.tweaked.grayChroma > this.originalGrayChroma;
|
||||
ret.grayChroma = `More ${more ? 'colorful' : 'neutral'} grays`;
|
||||
}
|
||||
}
|
||||
ret[hue] = hueTweak + ' ' + hue + 's';
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
originalContrasts() {
|
||||
return getContrasts(this.originalColors);
|
||||
let ret = {};
|
||||
|
||||
for (let hue in this.originalColors) {
|
||||
ret[hue] = {};
|
||||
|
||||
for (let tintBg of tints) {
|
||||
ret[hue][tintBg] = {};
|
||||
let bgColor = this.originalColors[hue][tintBg];
|
||||
|
||||
if (!bgColor || !bgColor.contrast) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (let tintFg of tints) {
|
||||
let contrast = bgColor.contrast(this.originalColors[hue][tintFg], 'WCAG21');
|
||||
ret[hue][tintBg][tintFg] = contrast;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
contrasts() {
|
||||
return getContrasts(this.colors, this.originalContrasts);
|
||||
},
|
||||
|
||||
originalCoreColors() {
|
||||
let ret = {};
|
||||
for (let hue in this.originalColors) {
|
||||
let maxChromaTintRaw = this.originalColors[hue].maxChromaTintRaw;
|
||||
ret[hue] = this.originalColors[hue][maxChromaTintRaw];
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
|
||||
coreColors() {
|
||||
let ret = {};
|
||||
for (let hue in this.colors) {
|
||||
let maxChromaTintRaw = this.colors[hue].maxChromaTintRaw;
|
||||
ret[hue] = this.colors[hue][maxChromaTintRaw];
|
||||
ret[hue] = {};
|
||||
|
||||
for (let tintBg in this.colors[hue]) {
|
||||
ret[hue][tintBg] = {};
|
||||
let bgColor = this.colors[hue][tintBg];
|
||||
|
||||
for (let tintFg in this.colors[hue]) {
|
||||
let fgColor = this.colors[hue][tintFg];
|
||||
let value = bgColor.contrast(fgColor, 'WCAG21');
|
||||
let original = this.originalContrasts[hue][tintBg][tintFg];
|
||||
ret[hue][tintBg][tintFg] = { value, original, bgColor, fgColor };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
originalGrayColor() {
|
||||
let grayHue = this.originalCoreColors.gray.get('h');
|
||||
let minDistance = Infinity;
|
||||
let closestHue = null;
|
||||
|
||||
for (let name in this.originalCoreColors) {
|
||||
if (name === 'gray') {
|
||||
continue;
|
||||
}
|
||||
|
||||
let hue = this.originalCoreColors[name].get('h');
|
||||
let distance = Math.abs(subtractAngles(hue, grayHue));
|
||||
if (distance < minDistance) {
|
||||
minDistance = distance;
|
||||
closestHue = name;
|
||||
}
|
||||
}
|
||||
|
||||
return closestHue ?? 'indigo';
|
||||
},
|
||||
|
||||
originalGrayChroma() {
|
||||
let coreTint = this.originalColors.gray.maxChromaTint;
|
||||
let grayChroma = this.originalColors.gray[coreTint].get('c');
|
||||
if (grayChroma === 0 || grayChroma === null) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let grayColorChroma = this.originalColors[this.originalGrayColor][coreTint].get('c');
|
||||
return grayChroma / grayColorChroma;
|
||||
},
|
||||
|
||||
/**
|
||||
* We want to preserve the original grayChroma selection so that when the user switches to another undertone
|
||||
* that supports higher chromas, their selection will be there.
|
||||
* This property is the gray chroma % that is actually applied.
|
||||
*/
|
||||
computedGrayChroma() {
|
||||
return Math.min(this.grayChroma, this.maxGrayChroma);
|
||||
},
|
||||
|
||||
maxGrayChroma() {
|
||||
return maxGrayChroma[this.grayColor] ?? 0.3;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
@@ -292,14 +230,6 @@ let paletteAppSpec = {
|
||||
this.permalink.set('chroma-scale', this.chromaScale, 1);
|
||||
},
|
||||
|
||||
grayColor() {
|
||||
this.permalink.set('gray-color', this.grayColor, this.originalGrayColor);
|
||||
},
|
||||
|
||||
grayChroma() {
|
||||
this.permalink.set('gray-chroma', this.grayChroma, this.originalGrayChroma);
|
||||
},
|
||||
|
||||
tweaks: {
|
||||
deep: true,
|
||||
async handler(value, oldValue) {
|
||||
@@ -316,10 +246,6 @@ let paletteAppSpec = {
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPalette() {
|
||||
return { id: this.paletteId, uid: this.uid, search: location.search };
|
||||
},
|
||||
|
||||
save({ silent } = {}) {
|
||||
let title = silent
|
||||
? (this.saved?.title ?? this.paletteTitle)
|
||||
@@ -332,15 +258,13 @@ let paletteAppSpec = {
|
||||
let uid = this.uid;
|
||||
|
||||
if (!uid) {
|
||||
// First time saving
|
||||
this.uid = uid = sidebar.palette.getUid();
|
||||
|
||||
this.permalink.set('uid', uid);
|
||||
this.permalink.updateLocation();
|
||||
}
|
||||
|
||||
let palette = { ...this.getPalette(), uid, title };
|
||||
|
||||
let palette = { title, id: this.paletteId, uid, search: location.search };
|
||||
sidebar.palette.save(palette, this.saved);
|
||||
this.saved = palette;
|
||||
},
|
||||
@@ -362,38 +286,21 @@ let paletteAppSpec = {
|
||||
|
||||
deleteSaved() {
|
||||
sidebar.palette.delete(this.saved);
|
||||
},
|
||||
|
||||
postDelete() {
|
||||
this.saved = null;
|
||||
this.permalink.delete('uid');
|
||||
this.uid = undefined;
|
||||
this.permalink.updateLocation();
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove a specific tweak or all tweaks
|
||||
* @param {string} [param] - The tweak to remove. If not provided, all tweaks are removed.
|
||||
*/
|
||||
reset(param) {
|
||||
if (!param || param === 'chromaScale') {
|
||||
reset() {
|
||||
for (let hue in this.hueShifts) {
|
||||
this.hueShifts[hue] = 0;
|
||||
}
|
||||
this.chromaScale = 1;
|
||||
},
|
||||
|
||||
removeTweak(param) {
|
||||
if (param === 'chromaScale') {
|
||||
this.chromaScale = 1;
|
||||
}
|
||||
|
||||
if (param in this.hueShifts) {
|
||||
} else {
|
||||
this.hueShifts[param] = 0;
|
||||
} else if (!param) {
|
||||
for (let hue in this.hueShifts) {
|
||||
this.hueShifts[hue] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (!param || param === 'grayColor') {
|
||||
this.grayColor = this.originalGrayColor;
|
||||
}
|
||||
|
||||
if (!param || param === 'grayChroma') {
|
||||
this.grayChroma = this.originalGrayChroma;
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -429,20 +336,16 @@ let paletteAppSpec = {
|
||||
};
|
||||
|
||||
function init() {
|
||||
let paletteAppContainer = document.querySelector('#palette-app');
|
||||
globalThis.paletteApp?.unmount?.();
|
||||
|
||||
if (!paletteAppContainer) {
|
||||
return;
|
||||
}
|
||||
|
||||
globalThis.paletteApp = createApp(paletteAppSpec).mount(paletteAppContainer);
|
||||
globalThis.paletteApp = createApp(paletteAppSpec).mount('#palette-app');
|
||||
}
|
||||
|
||||
init();
|
||||
addEventListener('turbo:render', init);
|
||||
|
||||
export function getPaletteCode(paletteId, colors, tweaked, options) {
|
||||
export function getPaletteCode(paletteId, tweaks, options) {
|
||||
let palette = allPalettes[paletteId].colors;
|
||||
|
||||
let imports = [];
|
||||
|
||||
if (paletteId) {
|
||||
@@ -450,27 +353,37 @@ export function getPaletteCode(paletteId, colors, tweaked, options) {
|
||||
}
|
||||
|
||||
let css = '';
|
||||
let declarations = [];
|
||||
|
||||
if (tweaked) {
|
||||
for (let hue in colors) {
|
||||
if (hue === 'orange') {
|
||||
continue;
|
||||
} else if (hue === 'gray') {
|
||||
if (!tweaked.grayChroma && !tweaked.grayColor) {
|
||||
if (tweaks) {
|
||||
let { hueShifts, chromaScale = 1 } = tweaks;
|
||||
let declarations = [];
|
||||
|
||||
if (hueShifts || chromaScale !== 1) {
|
||||
for (let hue in hueShifts) {
|
||||
let shift = hueShifts[hue];
|
||||
|
||||
if ((!shift && chromaScale === 1) || hue === 'orange') {
|
||||
continue;
|
||||
}
|
||||
} else if (!tweaked.chromaScale && !tweaked.hue?.[hue]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (let tint of tints) {
|
||||
let color = colors[hue][tint];
|
||||
let stringified = color.toString({ format: color.inGamut('srgb') ? 'hex' : undefined });
|
||||
declarations.push(`--wa-color-${hue}-${tint}: ${stringified};`);
|
||||
}
|
||||
let scale = palette[hue];
|
||||
|
||||
declarations.push('');
|
||||
for (let tint of ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95']) {
|
||||
let color = scale[tint];
|
||||
|
||||
if (Array.isArray(color)) {
|
||||
color = new Color('oklch', coords);
|
||||
} else {
|
||||
color = color.clone();
|
||||
}
|
||||
color.set({ h: h => h + shift, c: c => c * chromaScale });
|
||||
let stringified = color.toString({ format: color.inGamut('srgb') ? 'hex' : undefined });
|
||||
|
||||
declarations.push(`--wa-color-${hue}-${tint}: ${stringified};`);
|
||||
}
|
||||
|
||||
declarations.push('');
|
||||
}
|
||||
}
|
||||
|
||||
if (declarations.length > 0) {
|
||||
@@ -496,85 +409,3 @@ function arrayPrevious(array, element) {
|
||||
let index = array.indexOf(element);
|
||||
return array[(index - 1 + array.length) % array.length];
|
||||
}
|
||||
|
||||
function applyTweaks(originalColors, tweaks, tweaked) {
|
||||
let ret = {};
|
||||
let { hueShifts, chromaScale = 1, grayColor, grayChroma } = tweaks;
|
||||
|
||||
if (!tweaked) {
|
||||
return originalColors;
|
||||
}
|
||||
|
||||
if (tweaked.grayChroma) {
|
||||
grayChroma = this.computedGrayChroma;
|
||||
}
|
||||
|
||||
for (let hue in originalColors) {
|
||||
let originalScale = originalColors[hue];
|
||||
let scale = (ret[hue] = {});
|
||||
let descriptors = Object.getOwnPropertyDescriptors(originalScale);
|
||||
Object.defineProperties(scale, {
|
||||
maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
|
||||
maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
|
||||
});
|
||||
|
||||
for (let tint of tints) {
|
||||
let color = originalScale[tint].clone();
|
||||
|
||||
if (tweaked.hue && hueShifts[hue]) {
|
||||
color.set({ h: h => h + hueShifts[hue] });
|
||||
}
|
||||
|
||||
if (tweaked.chromaScale && chromaScale !== 1) {
|
||||
color.set({ c: c => c * chromaScale });
|
||||
}
|
||||
|
||||
if (hue === 'gray' && (tweaked.grayChroma || tweaked.grayColor)) {
|
||||
let colorUndertone = originalColors[grayColor][tint].clone();
|
||||
color = colorUndertone.set({ c: c => c * grayChroma });
|
||||
}
|
||||
|
||||
scale[tint] = color;
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function camelCase(str) {
|
||||
return (str + '').replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
|
||||
}
|
||||
|
||||
function capitalize(str) {
|
||||
return str[0].toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
function getContrasts(colors, originalContrasts) {
|
||||
let ret = {};
|
||||
|
||||
for (let hue in colors) {
|
||||
ret[hue] = {};
|
||||
|
||||
for (let tintBg of tints) {
|
||||
ret[hue][tintBg] = {};
|
||||
let bgColor = colors[hue][tintBg];
|
||||
|
||||
if (!bgColor || !bgColor.contrast) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (let tintFg of tints) {
|
||||
let fgColor = colors[hue][tintFg];
|
||||
let value = bgColor.contrast(fgColor, 'WCAG21');
|
||||
if (originalContrasts) {
|
||||
let original = originalContrasts[hue][tintBg][tintFg];
|
||||
ret[hue][tintBg][tintFg] = { value, original, bgColor, fgColor };
|
||||
} else {
|
||||
ret[hue][tintBg][tintFg] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
@@ -14,17 +14,11 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
|
||||
## Next
|
||||
|
||||
- Fixed `wa-pill` class for text fields
|
||||
- Fixed `pill` style for `<wa-input>` elements
|
||||
|
||||
## 3.0.0-alpha.11
|
||||
|
||||
### Color Palettes
|
||||
|
||||
- Color palette tweaking UI. Tweak hue, grays, overall colorfulness, save or share the results.
|
||||
- Added a `pink` scale to all color palettes
|
||||
- Fixed an incorrect CSS value in `<wa-select>`'s expand icon
|
||||
- Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
|
||||
- Dropped `violet` and `teal`, instead using `purple` and `cyan` (this is not just a renaming, the colors have been adjusted too).
|
||||
|
||||
### Design Tokens
|
||||
|
||||
@@ -33,54 +27,32 @@ You can find them in the first column of each color palette.
|
||||
|
||||
### Themes
|
||||
|
||||
- Improved UI for theme remixing:
|
||||
- You can now override the brand color of any theme with any of the 9 hues supported.
|
||||
- Rich previews
|
||||
- Generated copyable code snippets.
|
||||
- Permalinks
|
||||
- Updated Active, Glossy, Playful, and Premium themes so that `--wa-color-brand-fill-loud` uses the core color of the chosen brand color, regardless of tint.
|
||||
- You can now override the brand color of any theme with any of the 9 hues supported.
|
||||
- Improved UI for theme remixing, with previews and generated copyable code snippets.
|
||||
|
||||
### Components
|
||||
|
||||
#### `<wa-radio>`
|
||||
- Various `<wa-radio>` improvements:
|
||||
- Dropped the `base` part. It can now be styled by directly applying CSS to the element itself.
|
||||
- Added `hint` attribute and corresponding slot.
|
||||
- Various `<wa-select>` improvements:
|
||||
- Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
|
||||
- Fixed a bug that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
|
||||
- Dropped the `base` part from `<wa-option>` for easier styling. CSS can now be applied directly to the element itself.
|
||||
- Various `<wa-card>` improvements:
|
||||
- Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
|
||||
- Re-introduced `--border-color` so that the card itself can have a different border color than its inner borders.
|
||||
- Fixed a bug that prevented slots from showing automatically without `with-` attributes
|
||||
- Fixed a bug in `<wa-select>` that prevented the description from being read by screen readers
|
||||
|
||||
- Dropped the `base` part. It can now be styled by directly applying CSS to the element itself.
|
||||
- Added `hint` attribute and corresponding slot.
|
||||
|
||||
#### `<wa-select>`
|
||||
|
||||
- Added the `tag` part (and associated exported parts) to `<wa-select>` to allow targeting the tag that shows when more than the max number of visible items have been selected
|
||||
- Fixed a bug that prevented the placeholder color from being customized with the `--wa-form-control-placeholder-color` token
|
||||
- Fixed an incorrect CSS value in the expand icon
|
||||
- Fixed a bug that prevented the description from being read by screen readers
|
||||
|
||||
#### `<wa-option>`
|
||||
|
||||
- `label` attribute to override the generated label (useful for rich content)
|
||||
- `defaultLabel` property
|
||||
- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
|
||||
- Dropped `base` part for easier styling. CSS can now be applied directly to the element itself.
|
||||
|
||||
#### `<wa-menu-item>`
|
||||
|
||||
- `label` attribute to override the generated label (useful for rich content)
|
||||
- `defaultLabel` property
|
||||
- Dropped `getTextLabel()` method (if you need dynamic labels, just set the `label` attribute dynamically)
|
||||
|
||||
#### `<wa-card>`
|
||||
- Fixed a bug where child elements did not have correct rounding when headers and footers were absent.
|
||||
- Re-introduced `--border-color` so that the card itself can have a different border color than its inner borders.
|
||||
- Fixed a bug that prevented slots from showing automatically without `with-` attributes
|
||||
|
||||
#### `<wa-tab>`
|
||||
|
||||
- Fixed a bug that caused `document.createElement('wa-tab')` to fail (which also meant it could not be used in VueJS and other frameworks)
|
||||
|
||||
### Docs
|
||||
|
||||
- Added an orientation example to the native radio docs
|
||||
- Fixed a number of broken event listeners throughout the docs
|
||||
|
||||
|
||||
## 3.0.0-alpha.10
|
||||
|
||||
- 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.
|
||||
|
||||
51
docs/docs/themes/demo.njk
vendored
51
docs/docs/themes/demo.njk
vendored
@@ -10,17 +10,15 @@ override:tags: []
|
||||
eleventyComputed:
|
||||
forceTheme: "{{ theme.fileSlug }}"
|
||||
---
|
||||
{% set isPro = theme.data.isPro %}
|
||||
{% set status = theme.data.status %}
|
||||
{% set since = theme.data.since %}
|
||||
|
||||
<link rel="stylesheet" href="/docs/themes/showcase.css" />
|
||||
|
||||
{% set content %}
|
||||
<header>
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ theme.data.title }}</h1>
|
||||
<p id="mix_and_match" class="wa-size-s"></p>
|
||||
<p id="theme-status">{% include 'status.njk' %}</p>
|
||||
<p id="mix_and_match" hidden class="wa-size-s"></p>
|
||||
<p>{% include 'status.njk' %}</p>
|
||||
<p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
|
||||
</header>
|
||||
{% include 'theme-showcase.njk' %}
|
||||
@@ -36,18 +34,30 @@ eleventyComputed:
|
||||
</wa-image-comparer>
|
||||
|
||||
<script type="module">
|
||||
import { urls as stylesheetURLs, docsURLs, icons } from "/assets/scripts/tweak/data.js";
|
||||
import { getThemeCode } from "/assets/scripts/tweak/code.js";
|
||||
import { urls as stylesheetURLs } from "/assets/scripts/tweak/data.js";
|
||||
import { theme as getThemeCode } from "/assets/scripts/tweak/code.js";
|
||||
|
||||
function updateTheme() {
|
||||
let params = new URLSearchParams(window.location.search);
|
||||
params = Object.fromEntries(params.entries());
|
||||
|
||||
const docsURLs = {
|
||||
colors: '/docs/themes/',
|
||||
palette: '/docs/palettes/',
|
||||
typography: '/docs/themes/'
|
||||
};
|
||||
const icons = {
|
||||
colors: 'palette',
|
||||
palette: 'swatchbook',
|
||||
brand: 'droplet',
|
||||
typography: 'font-case'
|
||||
};
|
||||
|
||||
for (let link of document.querySelectorAll('link.mix-and-match')) {
|
||||
link.remove();
|
||||
}
|
||||
|
||||
let tweaks = [];
|
||||
let msgs = [];
|
||||
let code = getThemeCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
|
||||
document.head.insertAdjacentHTML('beforeend', code);
|
||||
|
||||
@@ -62,29 +72,18 @@ function updateTheme() {
|
||||
}
|
||||
|
||||
let icon = icons[name];
|
||||
tweaks.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
|
||||
msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
|
||||
}
|
||||
}
|
||||
|
||||
let isRemixed = tweaks.length > 0;
|
||||
document.documentElement.classList.toggle('is-remixed', isRemixed);
|
||||
|
||||
if (isRemixed) {
|
||||
for (let p of document.querySelectorAll("#theme-status")) {
|
||||
let proBadge = p.querySelector(".pro");
|
||||
if (!proBadge) {
|
||||
p.insertAdjacentHTML('beforeend', '<wa-badge class="pro">PRO</wa-badge>');
|
||||
}
|
||||
}
|
||||
|
||||
for (let p of mix_and_match) {
|
||||
if (tweaks.length) {
|
||||
p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + tweaks.map(msg => `<wa-badge appearance=outlined>
|
||||
${ msg }</wa-badge>`).join(' ');
|
||||
}
|
||||
for (let p of mix_and_match) {
|
||||
p.hidden = msgs.length === 0;
|
||||
if (msgs.length) {
|
||||
let icon =
|
||||
p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
|
||||
${ msg }</wa-badge>`).join(' ');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
updateTheme();
|
||||
</script>
|
||||
|
||||
4
docs/docs/themes/remix.js
vendored
4
docs/docs/themes/remix.js
vendored
@@ -107,10 +107,6 @@ function setDefault(select, value) {
|
||||
}
|
||||
|
||||
function render(changedAspect) {
|
||||
if (!globalThis.demo) {
|
||||
return;
|
||||
}
|
||||
|
||||
let url = new URL(demo.src);
|
||||
|
||||
if (!changedAspect || changedAspect === 'colors') {
|
||||
|
||||
5
docs/docs/themes/showcase.css
vendored
5
docs/docs/themes/showcase.css
vendored
@@ -12,11 +12,6 @@ body,
|
||||
#mix_and_match {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
color: var(--wa-color-text-quiet);
|
||||
margin-block-end: var(--wa-space-xs);
|
||||
|
||||
html:not(.is-remixed) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
wa-icon {
|
||||
vertical-align: -0.15em;
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.11",
|
||||
"version": "3.0.0-alpha.10",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.11",
|
||||
"version": "3.0.0-alpha.10",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-alpha.11",
|
||||
"version": "3.0.0-alpha.10",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -12,6 +12,7 @@ import { dirname, join, relative } from 'path';
|
||||
import process from 'process';
|
||||
import copy from 'recursive-copy';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { preprocessStylesheet } from './preprocess-css.js';
|
||||
import { cdnDir, distDir, docsDir, rootDir, runScript, siteDir } from './utils.js';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
@@ -36,6 +37,7 @@ async function buildAll() {
|
||||
await generateManifest();
|
||||
await generateReactWrappers();
|
||||
await generateTypes();
|
||||
await preprocessStyles();
|
||||
await generateStyles();
|
||||
|
||||
// copy everything to unbundled before we generate bundles.
|
||||
@@ -105,6 +107,23 @@ function generateReactWrappers() {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate preprocessed CSS
|
||||
*/
|
||||
async function preprocessStyles() {
|
||||
const preprocessedCSSFiles = await globby(join(rootDir, 'src/styles/**/*.css.njk'));
|
||||
|
||||
if (preprocessedCSSFiles.length > 0) {
|
||||
spinner.start('Preprocessing stylesheets');
|
||||
|
||||
for (let filePath of preprocessedCSSFiles) {
|
||||
await preprocessStylesheet(filePath);
|
||||
}
|
||||
|
||||
spinner.succeed();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Copies theme stylesheets to the dist.
|
||||
*/
|
||||
@@ -323,6 +342,7 @@ if (isDeveloping) {
|
||||
bs.init(
|
||||
{
|
||||
startPath: '/',
|
||||
open: false,
|
||||
port,
|
||||
logLevel: 'silent',
|
||||
logPrefix: '[webawesome]',
|
||||
@@ -371,6 +391,7 @@ if (isDeveloping) {
|
||||
try {
|
||||
const isTestFile = filename.includes('.test.ts');
|
||||
const isCssStylesheet = filename.includes('.css');
|
||||
const isPreprocessedStylesheet = filename.endsWith('.css.njk');
|
||||
const isComponent =
|
||||
filename.includes('components/') && filename.includes('.ts') && !isCssStylesheet && !isTestFile;
|
||||
|
||||
@@ -381,6 +402,10 @@ if (isDeveloping) {
|
||||
|
||||
await regenerateBundle();
|
||||
|
||||
if (isPreprocessedStylesheet || filename.endsWith('src/styles/data.js')) {
|
||||
await preprocessStyles();
|
||||
}
|
||||
|
||||
// Copy stylesheets when CSS files change
|
||||
if (isCssStylesheet) {
|
||||
await generateStyles();
|
||||
|
||||
61
scripts/preprocess-css.js
Normal file
61
scripts/preprocess-css.js
Normal file
@@ -0,0 +1,61 @@
|
||||
import { readFile, writeFile } from 'fs/promises';
|
||||
import nunjucks from 'nunjucks';
|
||||
import * as prettier from 'prettier';
|
||||
import prettierConfig from '../prettier.config.js';
|
||||
import * as globalData from '../src/styles/data.js';
|
||||
|
||||
const prelude = inputFilename => `/* DO NOT EDIT THIS FILE. It is generated from "${inputFilename}" */`;
|
||||
|
||||
let env = nunjucks.configure({ autoescape: false });
|
||||
let filenameVariables = Object.keys(globalData)
|
||||
.filter(key => key.endsWith('s'))
|
||||
.map(key => key.slice(0, -1));
|
||||
let filenameVariablesRegex = RegExp(`\\{\\{\\s*(${filenameVariables.join('|')})\\s*\\}\\}`, 'g');
|
||||
|
||||
export async function preprocessStylesheet(inputPath) {
|
||||
const content = await readFile(inputPath, 'utf-8');
|
||||
let outputPath = inputPath.replace(/\.njk$/, '');
|
||||
let filename = outputPath.split('/').pop();
|
||||
|
||||
if (filenameVariablesRegex.test(filename)) {
|
||||
// NOTE only supports a single variable right now
|
||||
filenameVariablesRegex.lastIndex = 0;
|
||||
let ret = [];
|
||||
|
||||
for (let match of filename.matchAll(filenameVariablesRegex)) {
|
||||
let variable = match[1];
|
||||
let values = globalData[variable + 's'];
|
||||
|
||||
for (let value of values) {
|
||||
let data = { [variable]: value };
|
||||
let css = await renderCSS(content, { data, inputPath, outputPath });
|
||||
|
||||
// Now use Nunjucks *again*, to render the actual filename
|
||||
let localOutputFilePath = env.renderString(outputPath, data);
|
||||
|
||||
ret.push(writeFile(localOutputFilePath, css, 'utf-8'));
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.all(ret);
|
||||
} else {
|
||||
let css = await renderCSS(content, { inputPath, outputPath });
|
||||
return writeFile(outputPath, css, 'utf-8');
|
||||
}
|
||||
|
||||
// TODO add generated files to .gitignore?
|
||||
}
|
||||
|
||||
export async function renderCSS(content, { data, inputPath, outputPath } = {}) {
|
||||
let inputFilename = inputPath.split('/').pop();
|
||||
data = data ? { ...globalData, ...data } : globalData;
|
||||
let css = env.renderString(content, data);
|
||||
|
||||
if (prelude) {
|
||||
css = prelude(inputFilename) + '\n' + css;
|
||||
}
|
||||
|
||||
css = await prettier.format(css, { ...prettierConfig, filepath: outputPath });
|
||||
|
||||
return css;
|
||||
}
|
||||
@@ -52,7 +52,6 @@ import styles from './button.css';
|
||||
@customElement('wa-button')
|
||||
export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
|
||||
static rectProxy = 'button';
|
||||
|
||||
static get validators() {
|
||||
return [...super.validators, MirrorValidator()];
|
||||
@@ -225,6 +224,17 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
this.button.blur();
|
||||
}
|
||||
|
||||
getBoundingClientRect(): DOMRect {
|
||||
let rect = super.getBoundingClientRect();
|
||||
let buttonRect = this.button.getBoundingClientRect();
|
||||
|
||||
if (rect.width === 0 && buttonRect.width > 0) {
|
||||
return buttonRect;
|
||||
}
|
||||
|
||||
return rect;
|
||||
}
|
||||
|
||||
render() {
|
||||
const isLink = this.isLink();
|
||||
const tag = isLink ? literal`a` : literal`button`;
|
||||
|
||||
@@ -50,7 +50,6 @@ import styles from './radio-button.css';
|
||||
@customElement('wa-radio-button')
|
||||
export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
|
||||
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, buttonStyles, styles];
|
||||
static rectProxy = 'input';
|
||||
|
||||
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
|
||||
|
||||
|
||||
@@ -208,13 +208,13 @@
|
||||
&::slotted(wa-divider) {
|
||||
--spacing: var(--wa-space-xs);
|
||||
}
|
||||
}
|
||||
|
||||
slot:not([name])::slotted(small) {
|
||||
display: block;
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
color: var(--wa-color-text-quiet);
|
||||
padding-block: var(--wa-space-xs);
|
||||
padding-inline: var(--wa-space-xl);
|
||||
&::slotted(small) {
|
||||
display: block;
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
color: var(--wa-color-text-quiet);
|
||||
padding-block: var(--wa-space-xs);
|
||||
padding-inline: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,16 +4,10 @@
|
||||
--max-width: 30ch;
|
||||
--padding: var(--wa-space-2xs) var(--wa-space-xs);
|
||||
|
||||
/** These styles are added so we don't interfere in the DOM. */
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
/** Defaults for inherited CSS properties */
|
||||
color: var(--wa-tooltip-content-color);
|
||||
font-size: var(--wa-tooltip-font-size);
|
||||
line-height: var(--wa-tooltip-line-height);
|
||||
text-align: start;
|
||||
white-space: normal;
|
||||
/** These styles are added so we dont interfere in the DOM. */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@@ -47,6 +41,12 @@
|
||||
max-width: var(--max-width);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--background-color);
|
||||
font: inherit;
|
||||
color: var(--wa-tooltip-content-color);
|
||||
font-size: var(--wa-tooltip-font-size);
|
||||
line-height: var(--wa-tooltip-line-height);
|
||||
text-align: start;
|
||||
white-space: normal;
|
||||
padding: var(--padding);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
@@ -35,8 +35,11 @@ import styles from './tooltip.css';
|
||||
*
|
||||
* @cssproperty --background-color - The tooltip's background color.
|
||||
* @cssproperty --border-radius - The radius of the tooltip's corners.
|
||||
* @cssproperty --text-color - The color of the tooltip's content.
|
||||
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
|
||||
* @cssproperty --padding - The padding within the tooltip.
|
||||
* @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
|
||||
* @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
|
||||
*/
|
||||
@customElement('wa-tooltip')
|
||||
export default class WaTooltip extends WebAwesomeElement {
|
||||
|
||||
@@ -204,32 +204,6 @@ export default class WebAwesomeElement extends LitElement {
|
||||
);
|
||||
}
|
||||
|
||||
getBoundingClientRect(): DOMRect {
|
||||
let rect = super.getBoundingClientRect();
|
||||
|
||||
if (rect.width === 0 && rect.height === 0) {
|
||||
let Self = this.constructor as typeof WebAwesomeElement;
|
||||
|
||||
if (Self.rectProxy) {
|
||||
let element = this[Self.rectProxy as keyof this];
|
||||
if (element instanceof Element) {
|
||||
let childRect = element.getBoundingClientRect();
|
||||
if (childRect.width > 0 || childRect.height > 0) {
|
||||
return childRect;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return rect;
|
||||
}
|
||||
|
||||
/**
|
||||
* If getBoundingClientRect() returns an empty rect,
|
||||
* should we check another element?
|
||||
*/
|
||||
static rectProxy: undefined | string;
|
||||
|
||||
static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
|
||||
if (options) {
|
||||
if (options.initial !== undefined && options.default === undefined) {
|
||||
|
||||
@@ -1,74 +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
|
||||
*/
|
||||
--wa-color-brand-if-lt-40: calc(clamp(0, 40 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-lt-50: calc(clamp(0, 50 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-lt-60: calc(clamp(0, 60 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-lt-70: calc(clamp(0, 70 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-lt-80: calc(clamp(0, 80 - 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-gte-50: calc(100% - var(--wa-color-brand-if-lt-50));
|
||||
--wa-color-brand-if-gte-60: calc(100% - var(--wa-color-brand-if-lt-60));
|
||||
--wa-color-brand-if-gte-70: calc(100% - var(--wa-color-brand-if-lt-70));
|
||||
--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,5 +1,4 @@
|
||||
@import url('base.css');
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -18,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,5 +1,4 @@
|
||||
@import url('base.css');
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -18,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,5 +1,4 @@
|
||||
@import url('base.css');
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -18,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,5 +1,4 @@
|
||||
@import url('base.css');
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -18,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,5 +1,4 @@
|
||||
@import url('base.css');
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -18,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,5 +1,4 @@
|
||||
@import url('base.css');
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -18,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,5 +1,4 @@
|
||||
@import url('base.css');
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -18,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,5 +1,4 @@
|
||||
@import url('base.css');
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -18,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,5 +1,4 @@
|
||||
@import url('base.css');
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "{{ hue }}.css.njk" */
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -18,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);
|
||||
}
|
||||
|
||||
22
src/styles/brand/{{ hue }}.css.njk
Normal file
22
src/styles/brand/{{ hue }}.css.njk
Normal file
@@ -0,0 +1,22 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-brand-{{ hue }} {
|
||||
{%- for tint in tints | reverse %}
|
||||
--wa-color-brand-{{ tint }}: var(--wa-color-{{ hue }}-{{ tint }});
|
||||
{%- 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-']),
|
||||
@@ -16,20 +18,6 @@
|
||||
--wa-color-red: var(--wa-color-red-70);
|
||||
--wa-color-red-key: 70;
|
||||
|
||||
--wa-color-orange-95: oklch(96.462% 0.02077 52.138);
|
||||
--wa-color-orange-90: oklch(92.556% 0.04363 51.242);
|
||||
--wa-color-orange-80: #fdbb96 /* oklch(84.396% 0.09052 50.397) */;
|
||||
--wa-color-orange-70: #eb9c74 /* oklch(76.151% 0.10953 47.299) */;
|
||||
--wa-color-orange-60: #cf8162 /* oklch(67.86% 0.10698 42.148) */;
|
||||
--wa-color-orange-50: #aa6248 /* oklch(57.281% 0.1014 40.415) */;
|
||||
--wa-color-orange-40: #864834 /* oklch(47.233% 0.08958 39.166) */;
|
||||
--wa-color-orange-30: #6b3727 /* oklch(39.974% 0.07776 38.975) */;
|
||||
--wa-color-orange-20: #50271a /* oklch(32.519% 0.0649 38.022) */;
|
||||
--wa-color-orange-10: #32160e /* oklch(23.873% 0.04713 38.423) */;
|
||||
--wa-color-orange-05: #210c06 /* oklch(18.614% 0.03797 38.589) */;
|
||||
--wa-color-orange: var(--wa-color-orange-70);
|
||||
--wa-color-orange-key: 70;
|
||||
|
||||
--wa-color-yellow-95: #faf3e1 /* oklch(96.479% 0.02487 89.211) */;
|
||||
--wa-color-yellow-90: #f4e5be /* oklch(92.412% 0.0535 89.488) */;
|
||||
--wa-color-yellow-80: #eac673 /* oklch(84.03% 0.1101 86.581) */;
|
||||
|
||||
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-']),
|
||||
@@ -16,20 +18,6 @@
|
||||
--wa-color-red: var(--wa-color-red-60);
|
||||
--wa-color-red-key: 60;
|
||||
|
||||
--wa-color-orange-95: oklch(96.406% 0.04001 53.476);
|
||||
--wa-color-orange-90: oklch(92.395% 0.07984 53.06);
|
||||
--wa-color-orange-80: oklch(84.389% 0.12224 47.981);
|
||||
--wa-color-orange-70: oklch(76.55% 0.16521 42.512);
|
||||
--wa-color-orange-60: #ea7237 /* oklch(68.444% 0.16501 44.349) */;
|
||||
--wa-color-orange-50: #c0561a /* oklch(57.844% 0.15254 45.085) */;
|
||||
--wa-color-orange-40: #963e05 /* oklch(47.639% 0.13153 45.898) */;
|
||||
--wa-color-orange-30: oklch(40.376% 0.11554 45.517);
|
||||
--wa-color-orange-20: oklch(32.94% 0.09927 45.913);
|
||||
--wa-color-orange-10: oklch(24.083% 0.07743 46.027);
|
||||
--wa-color-orange-05: oklch(18.817% 0.06098 48.455);
|
||||
--wa-color-orange: var(--wa-color-orange-70);
|
||||
--wa-color-orange-key: 70;
|
||||
|
||||
--wa-color-yellow-95: #fff4c0 /* oklch(96.32% 0.0677 97.497) */;
|
||||
--wa-color-yellow-90: #ffe579 /* oklch(92.176% 0.13122 96.089) */;
|
||||
--wa-color-yellow-80: #ffbf18 /* oklch(84.069% 0.16897 83.446) */;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,20 +18,6 @@
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-orange-95: oklch(96.245% 0.04153 59.224);
|
||||
--wa-color-orange-90: oklch(92.468% 0.07656 58.647);
|
||||
--wa-color-orange-80: oklch(84.375% 0.11283 54.179);
|
||||
--wa-color-orange-70: #fb945a /* oklch(76.369% 0.14454 48.621) */;
|
||||
--wa-color-orange-60: #f26b31 /* oklch(68.509% 0.18046 41.503) */;
|
||||
--wa-color-orange-50: #cf4812 /* oklch(58.288% 0.18026 38.576) */;
|
||||
--wa-color-orange-40: oklch(48.175% 0.16316 38.526);
|
||||
--wa-color-orange-30: oklch(40.779% 0.13925 37.899);
|
||||
--wa-color-orange-20: oklch(33.129% 0.11288 38.58);
|
||||
--wa-color-orange-10: oklch(24.259% 0.0831 38.502);
|
||||
--wa-color-orange-05: oklch(18.969% 0.06527 38.137);
|
||||
--wa-color-orange: var(--wa-color-orange-60);
|
||||
--wa-color-orange-key: 60;
|
||||
|
||||
--wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
|
||||
--wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
|
||||
--wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,20 +18,6 @@
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-orange-95: oklch(96.494% 0.0335 57.914);
|
||||
--wa-color-orange-90: oklch(92.556% 0.06963 56.631);
|
||||
--wa-color-orange-80: oklch(84.494% 0.12276 53.381);
|
||||
--wa-color-orange-70: oklch(76.375% 0.17194 46.091);
|
||||
--wa-color-orange-60: #eb713f /* oklch(68.398% 0.16422 41.446) */;
|
||||
--wa-color-orange-50: #cb4b1d /* oklch(58.153% 0.17174 38.404) */;
|
||||
--wa-color-orange-40: #a2310c /* oklch(48.028% 0.15488 36.538) */;
|
||||
--wa-color-orange-30: #7f2810 /* oklch(40.591% 0.12506 35.663) */;
|
||||
--wa-color-orange-20: #5d1d0e /* oklch(32.908% 0.09683 34.387) */;
|
||||
--wa-color-orange-10: #3a1005 /* oklch(24.088% 0.06954 35.613) */;
|
||||
--wa-color-orange-05: #270803 /* oklch(18.801% 0.05509 34.149) */;
|
||||
--wa-color-orange: var(--wa-color-orange-70);
|
||||
--wa-color-orange-key: 70;
|
||||
|
||||
--wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
|
||||
--wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
|
||||
--wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,20 +18,6 @@
|
||||
--wa-color-red: var(--wa-color-red-40);
|
||||
--wa-color-red-key: 40;
|
||||
|
||||
--wa-color-orange-95: oklch(96.238% 0.02664 61.788);
|
||||
--wa-color-orange-90: #fbe1cc /* oklch(92.512% 0.04019 60.45) */;
|
||||
--wa-color-orange-80: #edc1a0 /* oklch(84.097% 0.06661 58.236) */;
|
||||
--wa-color-orange-70: #dda178 /* oklch(75.734% 0.09064 55.123) */;
|
||||
--wa-color-orange-60: #cd8351 /* oklch(67.646% 0.1134 53.172) */;
|
||||
--wa-color-orange-50: #b65d22 /* oklch(57.437% 0.13446 49.881) */;
|
||||
--wa-color-orange-40: oklch(47.576% 0.13426 46.452);
|
||||
--wa-color-orange-30: oklch(40.382% 0.12087 47.003);
|
||||
--wa-color-orange-20: oklch(32.846% 0.0965 46.227);
|
||||
--wa-color-orange-10: oklch(24.06% 0.06873 45.849);
|
||||
--wa-color-orange-05: #260900 /* oklch(18.727% 0.05359 44.791) */;
|
||||
--wa-color-orange: var(--wa-color-orange-50);
|
||||
--wa-color-orange-key: 50;
|
||||
|
||||
--wa-color-yellow-95: #f7f4da /* oklch(96.266% 0.03422 101.63) */;
|
||||
--wa-color-yellow-90: #ede7c3 /* oklch(92.349% 0.04769 99.435) */;
|
||||
--wa-color-yellow-80: #d8ca96 /* oklch(83.793% 0.06999 94.829) */;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,20 +18,6 @@
|
||||
--wa-color-red: var(--wa-color-red-40);
|
||||
--wa-color-red-key: 40;
|
||||
|
||||
--wa-color-orange-95: oklch(96.126% 0.05417 66.333);
|
||||
--wa-color-orange-90: oklch(92.413% 0.07898 62.545);
|
||||
--wa-color-orange-80: #f9bd86 /* oklch(84.088% 0.09891 63.847) */;
|
||||
--wa-color-orange-70: #e2a05f /* oklch(75.707% 0.11352 64.057) */;
|
||||
--wa-color-orange-60: #d18228 /* oklch(67.572% 0.13809 64.146) */;
|
||||
--wa-color-orange-50: oklch(57.202% 0.13583 64.309);
|
||||
--wa-color-orange-40: oklch(47.462% 0.13789 64.939);
|
||||
--wa-color-orange-30: oklch(40.049% 0.12025 65.207);
|
||||
--wa-color-orange-20: oklch(32.552% 0.09777 64.859);
|
||||
--wa-color-orange-10: oklch(23.884% 0.07141 64.246);
|
||||
--wa-color-orange-05: oklch(18.698% 0.05597 65.589);
|
||||
--wa-color-orange: var(--wa-color-orange-60);
|
||||
--wa-color-orange-key: 60;
|
||||
|
||||
--wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
|
||||
--wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;
|
||||
--wa-color-yellow-80: #e3c868 /* oklch(83.63% 0.12003 93.943) */;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,20 +18,6 @@
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-orange-95: #f8f0ec /* oklch(96.084% 0.01043 54.557) */;
|
||||
--wa-color-orange-90: #f2e3d8 /* oklch(92.485% 0.02211 56.694) */;
|
||||
--wa-color-orange-80: #e4c4ad /* oklch(84.166% 0.04799 57.553) */;
|
||||
--wa-color-orange-70: #d3a583 /* oklch(75.674% 0.07148 57.481) */;
|
||||
--wa-color-orange-60: #bc8a65 /* oklch(67.319% 0.08062 57.054) */;
|
||||
--wa-color-orange-50: #9e6940 /* oklch(56.757% 0.08845 56.746) */;
|
||||
--wa-color-orange-40: #7e4d27 /* oklch(46.949% 0.08447 57.382) */;
|
||||
--wa-color-orange-30: #673a17 /* oklch(39.774% 0.0793 55.768) */;
|
||||
--wa-color-orange-20: #4f2906 /* oklch(32.45% 0.0725 57.629) */;
|
||||
--wa-color-orange-10: #311702 /* oklch(23.759% 0.05361 57.126) */;
|
||||
--wa-color-orange-05: #200d01 /* oklch(18.517% 0.04211 57.178) */;
|
||||
--wa-color-orange: var(--wa-color-orange-50);
|
||||
--wa-color-orange-key: 50;
|
||||
|
||||
--wa-color-yellow-95: #f6f1ea /* oklch(96.009% 0.01076 76.598) */;
|
||||
--wa-color-yellow-90: #eee5d7 /* oklch(92.521% 0.02111 79.091) */;
|
||||
--wa-color-yellow-80: #dbc8a8 /* oklch(84.033% 0.04791 80.753) */;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,20 +18,6 @@
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-orange-95: oklch(96.488% 0.04965 58.92);
|
||||
--wa-color-orange-90: oklch(92.244% 0.08759 57.789);
|
||||
--wa-color-orange-80: oklch(84.32% 0.12702 56.232);
|
||||
--wa-color-orange-70: oklch(76.31% 0.17967 50.95);
|
||||
--wa-color-orange-60: #e87431 /* oklch(68.352% 0.16354 47.083) */;
|
||||
--wa-color-orange-50: oklch(58.23% 0.17947 43.3);
|
||||
--wa-color-orange-40: oklch(48.089% 0.16071 40.798);
|
||||
--wa-color-orange-30: oklch(40.708% 0.13699 39.616);
|
||||
--wa-color-orange-20: oklch(33.124% 0.1121 39.599);
|
||||
--wa-color-orange-10: oklch(24.257% 0.08204 39.602);
|
||||
--wa-color-orange-05: oklch(18.966% 0.06414 39.606);
|
||||
--wa-color-orange: var(--wa-color-orange-70);
|
||||
--wa-color-orange-key: 70;
|
||||
|
||||
--wa-color-yellow-95: #fff5b4 /* oklch(96.281% 0.08306 100.4) */;
|
||||
--wa-color-yellow-90: #fde572 /* oklch(91.915% 0.13738 97.724) */;
|
||||
--wa-color-yellow-80: #f4c403 /* oklch(83.862% 0.17104 90.777) */;
|
||||
|
||||
@@ -24,22 +24,15 @@ for (let paletteId in palettes) {
|
||||
palettes[paletteId] = tokens;
|
||||
|
||||
for (let hue in tokens) {
|
||||
let scale = Object.assign({}, tokens[hue]);
|
||||
tokens[hue] = scale;
|
||||
let tints = Object.assign({}, tokens[hue]);
|
||||
tokens[hue] = tints;
|
||||
|
||||
let maxChromaTint = DEFAULT_ACCENT; // TODO handle scale.core
|
||||
let maxChroma = scale.core?.get('oklch.c') ?? (scale[DEFAULT_ACCENT].c || 0);
|
||||
let maxChromaTint = DEFAULT_ACCENT;
|
||||
let maxChroma = tints[DEFAULT_ACCENT].c || 0;
|
||||
|
||||
for (let tint in scale) {
|
||||
let color = scale[tint];
|
||||
|
||||
if (!color || color.constructor.name !== 'Color') {
|
||||
// Not a color
|
||||
continue;
|
||||
}
|
||||
|
||||
color = color.to('oklch');
|
||||
scale[tint] = color;
|
||||
for (let tint in tints) {
|
||||
let color = tints[tint].to('oklch');
|
||||
tints[tint] = color;
|
||||
|
||||
if (tint === '05') {
|
||||
// The object has both '5' and '05' keys, but '05' is out of order
|
||||
@@ -54,14 +47,14 @@ for (let paletteId in palettes) {
|
||||
}
|
||||
}
|
||||
|
||||
scale['05'] = scale['5'];
|
||||
tints['05'] = tints['5'];
|
||||
|
||||
scale.maxChroma = scale.maxChromaRaw = maxChroma;
|
||||
scale.maxChromaTint = scale.maxChromaTintRaw = maxChromaTint;
|
||||
tints.maxChroma = tints.maxChromaRaw = maxChroma;
|
||||
tints.maxChromaTint = tints.maxChromaTintRaw = maxChromaTint;
|
||||
|
||||
if (maxChromaTint < MIN_ACCENT || maxChromaTint > MAX_ACCENT) {
|
||||
scale.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT);
|
||||
scale.maxChroma = scale[maxChromaTint].c;
|
||||
tints.maxChromaTint = clamp(MIN_ACCENT, maxChromaTint, MAX_ACCENT);
|
||||
tints.maxChroma = tints[maxChromaTint].c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,9 +8,11 @@ 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]+|key))?:\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
|
||||
/^\s*--wa-color-(?<hue>[a-z]+)-(?<level>[0-9]+):\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
|
||||
export const rawCSS = {};
|
||||
|
||||
function parse(contents, file) {
|
||||
@@ -24,24 +26,8 @@ function parse(contents, file) {
|
||||
const ret = {};
|
||||
|
||||
for (let match of matches) {
|
||||
let { hue, level = '', color } = match.groups;
|
||||
let { hue, level, color } = match.groups;
|
||||
ret[hue] ??= {};
|
||||
let scale = ret[hue];
|
||||
|
||||
if (level === 'key') {
|
||||
scale.maxChromaTint = color;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!level) {
|
||||
if (color.startsWith('var(')) {
|
||||
// Core color aliased to another color, ignore
|
||||
continue;
|
||||
} else {
|
||||
// Custom core color
|
||||
level = 'core';
|
||||
}
|
||||
}
|
||||
|
||||
// Attempt to convert color to Color object, fall back to string if this fails
|
||||
// This will happen for e.g. colors defined via color-mix()
|
||||
@@ -54,13 +40,13 @@ function parse(contents, file) {
|
||||
if (level.startsWith('0')) {
|
||||
// Leading zeroes throw off sorting, add both properties
|
||||
// NOTE: Ideally one of the two would be added as non-enumerable, but then we cannot access it via 11ty data
|
||||
scale[level] = color;
|
||||
ret[hue][level] = color;
|
||||
|
||||
// Drop leading zeroes
|
||||
level = level.replace(/^0+/, '');
|
||||
}
|
||||
|
||||
scale[level] = color;
|
||||
ret[hue][level] = color;
|
||||
}
|
||||
|
||||
return ret;
|
||||
|
||||
@@ -1,162 +0,0 @@
|
||||
/**
|
||||
* Post-process palette CSS files to add core colors, oklch coordinates etc.
|
||||
* Run via node postprocess.js
|
||||
* Warning: Will overwrite existing files. Check the diff before committing!
|
||||
*/
|
||||
import chalk from 'chalk';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import palettes from './palettes-analyzed.js';
|
||||
import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js';
|
||||
|
||||
// TODO import from global data file instead of duplicating this data
|
||||
const hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'];
|
||||
const huesChromatic = hues.slice(0, -1);
|
||||
|
||||
/** If a hue is missing, how should it be generated from the neighboring hues? */
|
||||
const mixPercentage = { orange: 0.6 };
|
||||
const selector = paletteId =>
|
||||
[':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
|
||||
',\n',
|
||||
);
|
||||
|
||||
// Used for formatting warnings
|
||||
const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0);
|
||||
const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0);
|
||||
|
||||
const indent = ' ';
|
||||
|
||||
const paletteIssues = { total: 0 };
|
||||
|
||||
for (let paletteId in palettes) {
|
||||
const palette = palettes[paletteId];
|
||||
|
||||
let paletteCSS = '';
|
||||
let hueCSS = Object.fromEntries(hues.map(hue => [hue, '']));
|
||||
|
||||
for (let hue in palette) {
|
||||
let scale = palette[hue];
|
||||
|
||||
if (scale.maxChromaTint != scale.maxChromaTintRaw) {
|
||||
reportPaletteIssue(
|
||||
`Clamping accent color to ${chalk.bold(scale.maxChromaTint)}, but peak chroma is in ${chalk.bold(scale.maxChromaTintRaw)} (${formatComparison(scale[scale.maxChromaTintRaw].c, scale[scale.maxChromaTint].c)})`,
|
||||
{ paletteId, hue: hue },
|
||||
);
|
||||
}
|
||||
|
||||
hueCSS[hue] += scaleCSS(hue, scale);
|
||||
}
|
||||
|
||||
// Generate missing hues
|
||||
for (let i = 0; i < hues.length; i++) {
|
||||
let hue = hues[i];
|
||||
|
||||
if (hueCSS[hue]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Find previous and next hue to interpolate
|
||||
// We assume gaps will always be at most 1 hue wide
|
||||
let prevHue = huesChromatic[i - 1] ?? huesChromatic.at(-1);
|
||||
let nextHue = huesChromatic[i + 1] ?? huesChromatic[0];
|
||||
|
||||
reportPaletteIssue(`Missing hue. Generating from ${prevHue} and ${nextHue}`, { paletteId, hue });
|
||||
|
||||
let prevScale = palette[prevHue];
|
||||
let nextScale = palette[nextHue];
|
||||
|
||||
let progress = mixPercentage[hue] ?? 0.5;
|
||||
let scale = (palette[hue] = {});
|
||||
|
||||
scale.maxChromaTint = (1 - progress) * prevScale.maxChromaTint + progress * nextScale.maxChromaTint;
|
||||
scale.maxChromaTint = Math.round(scale.maxChromaTint / 10) * 10;
|
||||
|
||||
for (let tint in prevScale) {
|
||||
if (tint === '05' || !(tint > 0)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let prevColor = palette[prevHue][tint];
|
||||
let nextColor = palette[nextHue][tint];
|
||||
|
||||
let color = prevColor.mix(nextColor, progress, { space: 'oklch' });
|
||||
scale[tint] = color;
|
||||
}
|
||||
|
||||
// Ensure core color has the max chroma
|
||||
let coreColor = scale[scale.maxChromaTint];
|
||||
coreColor.c = Math.max(...Object.values(scale).map(color => color.c || 0)) + 0.0002;
|
||||
|
||||
hueCSS[hue] += scaleCSS(hue, scale);
|
||||
}
|
||||
|
||||
hueCSS = Object.values(hueCSS).filter(Boolean).join('\n\n');
|
||||
// TODO apply Prettier instead of faking it
|
||||
paletteCSS = `${selector(paletteId)} {\n${hueCSS.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
|
||||
|
||||
fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), paletteCSS, 'utf8');
|
||||
}
|
||||
|
||||
let issuePaletteCount = Object.keys(paletteIssues).length - 1;
|
||||
console.info(
|
||||
`🎨 Wrote ${Object.keys(palettes).length} palette files.` +
|
||||
(paletteIssues.total > 0
|
||||
? ` ${chalk.bold(paletteIssues.total)} issues found across ${chalk.bold(issuePaletteCount)} palettes.`
|
||||
: ''),
|
||||
);
|
||||
|
||||
function reportPaletteIssue(issue, { paletteId, hue }) {
|
||||
let palettePrefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
|
||||
|
||||
if (!paletteIssues[paletteId]) {
|
||||
// First time encountering an issue with this palette
|
||||
paletteIssues[paletteId] = { count: 0 };
|
||||
} else {
|
||||
// Don't print palette id multiple times
|
||||
palettePrefix = ' '.repeat(paletteIdMaxChars + 2);
|
||||
}
|
||||
|
||||
paletteIssues[paletteId].count++;
|
||||
paletteIssues.total++;
|
||||
|
||||
let msg = palettePrefix;
|
||||
let huePrefix = '';
|
||||
|
||||
if (hue) {
|
||||
huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));
|
||||
}
|
||||
|
||||
console.warn(`${msg}${huePrefix}${issue}`);
|
||||
}
|
||||
|
||||
function declareColor(color, hue, tint) {
|
||||
tint = tint.padStart(2, '0');
|
||||
let ret = `--wa-color-${hue}-${tint}: `;
|
||||
|
||||
if (color.inGamut('srgb')) {
|
||||
ret += `${color.toString({ format: 'hex' })} /* ${color.toString()} */;`;
|
||||
} else {
|
||||
ret += `${color.toString()};`;
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function scaleCSS(hue, scale) {
|
||||
let ret = [];
|
||||
for (let tint in scale) {
|
||||
if (tint === '05' || !(tint > 0)) {
|
||||
// The object has both '5' and '05' keys, but '05' is out of order
|
||||
// Also ignore non-tints
|
||||
continue;
|
||||
}
|
||||
|
||||
let color = scale[tint];
|
||||
ret.push(declareColor(color, hue, tint));
|
||||
}
|
||||
ret.reverse();
|
||||
|
||||
ret.push(`--wa-color-${hue}: var(--wa-color-${hue}-${scale.maxChromaTint});`);
|
||||
ret.push(`--wa-color-${hue}-key: ${scale.maxChromaTint};`);
|
||||
return ret.join('\n');
|
||||
}
|
||||
80
src/styles/color/scripts/tintless.js
Normal file
80
src/styles/color/scripts/tintless.js
Normal file
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Add tintless variables and OKLCH coords as comments to palette CSS files.
|
||||
* Run via node tintless.js
|
||||
* Warning: Will overwrite existing files. Check the diff before committing!
|
||||
*/
|
||||
import chalk from 'chalk';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import palettes from './palettes-analyzed.js';
|
||||
import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js';
|
||||
|
||||
const selector = paletteId =>
|
||||
[':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
|
||||
',\n',
|
||||
);
|
||||
|
||||
// Used for formatting warnings
|
||||
const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0);
|
||||
const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0);
|
||||
|
||||
let issueCount = 0;
|
||||
let issuePaletteCount = 0;
|
||||
|
||||
for (let paletteId in palettes) {
|
||||
const tokens = palettes[paletteId];
|
||||
|
||||
let css = '';
|
||||
let prefix = `[${paletteId}]`.padEnd(paletteIdMaxChars + 2);
|
||||
|
||||
for (let hue in tokens) {
|
||||
let tints = tokens[hue];
|
||||
|
||||
let tintCSS = '';
|
||||
|
||||
for (let tint in tints) {
|
||||
if (tint === '05' || !(tint > 0)) {
|
||||
// The object has both '5' and '05' keys, but '05' is out of order
|
||||
// Also ignore non-tints
|
||||
continue;
|
||||
}
|
||||
|
||||
let color = tints[tint];
|
||||
tint = tint.padStart(2, '0');
|
||||
|
||||
tintCSS =
|
||||
`--wa-color-${hue}-${tint}: ${color.toString({ format: 'hex' })} /* ${color.toString()} */;\n` + tintCSS;
|
||||
}
|
||||
|
||||
if (tints.maxChromaTint != tints.maxChromaTintRaw) {
|
||||
let huePrefix = hueToChalk(hue)(hue.padEnd(hueMaxChars + 2));
|
||||
|
||||
console.warn(
|
||||
`${prefix} ${huePrefix}: Clamping accent color to ${chalk.bold(tints.maxChromaTint)}, but peak chroma is in ${chalk.bold(tints.maxChromaTintRaw)} (${formatComparison(tints[tints.maxChromaTintRaw].c, tints[tints.maxChromaTint].c)})`,
|
||||
);
|
||||
issueCount++;
|
||||
|
||||
if (prefix.trim()) {
|
||||
// First time encountering an issue with this palette
|
||||
issuePaletteCount++;
|
||||
|
||||
// Don't print palette id multiple times
|
||||
prefix = ' '.repeat(paletteIdMaxChars + 2);
|
||||
}
|
||||
}
|
||||
|
||||
tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${tints.maxChromaTint});\n`;
|
||||
tintCSS += `--wa-color-${hue}-key: ${tints.maxChromaTint};\n`;
|
||||
css += tintCSS + '\n';
|
||||
}
|
||||
|
||||
let indent = ' ';
|
||||
css = `${selector(paletteId)} {\n${css.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
|
||||
|
||||
fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), css, 'utf8');
|
||||
}
|
||||
|
||||
console.info(
|
||||
`🎨 Wrote ${Object.keys(palettes).length} palette files.` +
|
||||
(issueCount > 0 ? ` ${chalk.bold(issueCount)} issues found across ${chalk.bold(issuePaletteCount)} palettes.` : ''),
|
||||
);
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,20 +18,6 @@
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-orange-95: oklch(96.355% 0.05982 62.448);
|
||||
--wa-color-orange-90: oklch(92.371% 0.10134 60.314);
|
||||
--wa-color-orange-80: oklch(84.228% 0.13101 54.157);
|
||||
--wa-color-orange-70: oklch(76.275% 0.16839 51.143);
|
||||
--wa-color-orange-60: #e67530 /* oklch(68.22% 0.16179 47.997) */;
|
||||
--wa-color-orange-50: oklch(58.011% 0.16819 44.953);
|
||||
--wa-color-orange-40: #9b390d /* oklch(47.739% 0.14004 40.585) */;
|
||||
--wa-color-orange-30: #7a2b17 /* oklch(40.323% 0.11475 35.602) */;
|
||||
--wa-color-orange-20: #5c1e0f /* oklch(32.963% 0.09552 34.666) */;
|
||||
--wa-color-orange-10: #3a0f06 /* oklch(24.042% 0.07066 34.715) */;
|
||||
--wa-color-orange-05: #270803 /* oklch(18.867% 0.05444 34.696) */;
|
||||
--wa-color-orange: var(--wa-color-orange-70);
|
||||
--wa-color-orange-key: 70;
|
||||
|
||||
--wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */;
|
||||
--wa-color-yellow-90: #fde761 /* oklch(92.138% 0.15325 99.997) */;
|
||||
--wa-color-yellow-80: #f5c308 /* oklch(83.774% 0.17019 89.81) */;
|
||||
|
||||
9
src/styles/data.js
Normal file
9
src/styles/data.js
Normal file
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Any data relating to the design system.
|
||||
*/
|
||||
export const hues = ['red', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'];
|
||||
export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
|
||||
export const variants = ['neutral', 'brand', 'success', 'warning', 'danger'];
|
||||
export const roles = ['fill', 'border', 'on'];
|
||||
export const attention_levels = ['loud', 'normal', 'quiet'];
|
||||
export const semantic_color_types = roles.map(layer => attention_levels.map(priority => layer + '-' + priority)).flat();
|
||||
@@ -121,8 +121,7 @@ input:where(:not(
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
input.wa-pill,
|
||||
textarea.wa-pill,
|
||||
:host([pill]) .wa-text-field {
|
||||
border-radius: var(--wa-border-radius-pill) !important;
|
||||
.wa-pill,
|
||||
:host([pill]) {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
@@ -55,8 +55,6 @@ input[type='range'] {
|
||||
0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
|
||||
-webkit-appearance: none;
|
||||
margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
|
||||
transition: var(--wa-transition-fast);
|
||||
transition-property: width, height;
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -45,8 +45,7 @@
|
||||
|
||||
--outlined-border-color: var(--wa-color-border-normal);
|
||||
|
||||
--text-color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
--text-color-hover: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
--text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
}
|
||||
|
||||
.wa-plain,
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
|
||||
:host {
|
||||
/* Components are meant to override these */
|
||||
--size-xs: var(--wa-font-size-xs);
|
||||
--size-s: var(--wa-font-size-s);
|
||||
--size-m: var(--wa-font-size-m);
|
||||
--size-l: var(--wa-font-size-l);
|
||||
--size-xs: var(--wa-space-xs);
|
||||
--size-s: var(--wa-space-s);
|
||||
--size-m: var(--wa-space-m);
|
||||
--size-l: var(--wa-space-l);
|
||||
|
||||
--space-xs: var(--wa-space-xs);
|
||||
--space-s: var(--wa-space-s);
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
/**
|
||||
* Do not edit this file directly. It is generated via variants.css.js
|
||||
*/
|
||||
|
||||
/* DO NOT EDIT THIS FILE. It is generated from "variants.css.njk" */
|
||||
/**
|
||||
* Register color properties so that the space toggle hack can work.
|
||||
*/
|
||||
@@ -64,7 +61,6 @@
|
||||
* Element defaults.
|
||||
We want these to resolve to inherit when inside a variant, and only be applied when not inside an explicit variant.
|
||||
*/
|
||||
|
||||
:host(wa-button),
|
||||
.wa-button,
|
||||
button,
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
/**
|
||||
* Generate variants.css
|
||||
* To use: node variants.css.js > variants.css
|
||||
*/
|
||||
const variants = ['neutral', 'brand', 'success', 'warning', 'danger'];
|
||||
const roles = ['fill', 'border', 'on'];
|
||||
const noise = ['loud', 'normal', 'quiet'];
|
||||
const defaults = {
|
||||
neutral: [
|
||||
[':host(wa-button)', '.wa-button', 'button', "input[type='button']", "input[type='submit']"],
|
||||
[':host(wa-tag)', '.wa-tag'],
|
||||
],
|
||||
brand: [
|
||||
[':host(wa-callout)', '.wa-callout'],
|
||||
[':host(wa-badge)', '.wa-badge'],
|
||||
],
|
||||
};
|
||||
const types = roles.map(layer => noise.map(priority => layer + '-' + priority)).flat();
|
||||
|
||||
let ret = comment('Do not edit this file directly. It is generated via variants.css.js').trimStart();
|
||||
|
||||
ret += comment('Register color properties so that the space toggle hack can work.');
|
||||
|
||||
for (let type of types) {
|
||||
ret += cssRule(`@property --wa-color-${type}`, [
|
||||
`syntax: '<color>';`,
|
||||
'inherits: true;',
|
||||
'initial-value: transparent;',
|
||||
]);
|
||||
}
|
||||
|
||||
ret += comment(`Element defaults.
|
||||
We want these to resolve to inherit when inside a variant, and only be applied when not inside an explicit variant.`);
|
||||
|
||||
for (let variant in defaults) {
|
||||
let selector = defaults[variant];
|
||||
let declarations = types.map(type => `--wa-color-${type}: var(--wa-no-variant, var(--wa-color-${variant}-${type}));`);
|
||||
|
||||
ret += cssRule(selector, declarations);
|
||||
}
|
||||
|
||||
ret += comment('Variants');
|
||||
|
||||
for (let variant of variants) {
|
||||
let selector = [`.wa-${variant}`, `:host([variant='${variant}'])`];
|
||||
|
||||
if (variant === 'neutral') {
|
||||
selector.unshift(':root');
|
||||
}
|
||||
|
||||
let declarations = types.map(type => `--wa-color-${type}: var(--wa-color-${variant}-${type});`);
|
||||
ret += cssRule(selector, declarations);
|
||||
}
|
||||
|
||||
ret += cssRule([variants.map(variant => `.wa-${variant}`), ':host([variant])'], '--wa-no-variant: /* space toggle */;');
|
||||
|
||||
console.log(ret.trimEnd());
|
||||
|
||||
function cssRule(selector, declarations) {
|
||||
selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
|
||||
declarations = Array.isArray(declarations) ? declarations.flat().join('\n') : declarations;
|
||||
declarations = declarations.replace(/^/gm, ' ');
|
||||
return `\n${selector} {\n${declarations}\n}\n`;
|
||||
}
|
||||
|
||||
function comment(text) {
|
||||
return ['\n/**', ` * ${text}`, ' */\n'].join('\n');
|
||||
}
|
||||
48
src/styles/utilities/variants.css.njk
Normal file
48
src/styles/utilities/variants.css.njk
Normal file
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Register color properties so that the space toggle hack can work.
|
||||
*/
|
||||
{% for type in semantic_color_types %}
|
||||
@property --wa-color-{{ type }} {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
{% endfor %}
|
||||
|
||||
/**
|
||||
* Element defaults.
|
||||
We want these to resolve to inherit when inside a variant, and only be applied when not inside an explicit variant.
|
||||
*/
|
||||
:host(wa-button), .wa-button, button, input[type='button'], input[type='submit'],
|
||||
:host(wa-tag), .wa-tag {
|
||||
{%- for type in semantic_color_types %}
|
||||
--wa-color-{{ type }}: var(--wa-no-variant, var(--wa-color-neutral-{{ type }}));
|
||||
{%- endfor %}
|
||||
}
|
||||
|
||||
:host(wa-callout), .wa-callout,
|
||||
:host(wa-badge), .wa-badge {
|
||||
{%- for type in semantic_color_types %}
|
||||
--wa-color-{{ type }}: var(--wa-no-variant, var(--wa-color-brand-{{ type }}));
|
||||
{%- endfor %}
|
||||
}
|
||||
|
||||
/**
|
||||
* Variants
|
||||
*/
|
||||
{% for variant in variants %}
|
||||
{{ ':root,' if variant === 'neutral' }}
|
||||
.wa-{{ variant }},
|
||||
:host([variant='{{ variant }}']) {
|
||||
{%- for type in semantic_color_types %}
|
||||
--wa-color-{{ type }}: var(--wa-color-{{ variant }}-{{ type }});
|
||||
{%- endfor %}
|
||||
}
|
||||
{%- endfor %}
|
||||
|
||||
{% for variant in variants %}
|
||||
.wa-{{ variant }},
|
||||
{%- endfor %}
|
||||
:host([variant]) {
|
||||
--wa-no-variant: /* space toggle */;
|
||||
}
|
||||
Reference in New Issue
Block a user