mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-10-31 08:45:13 +08:00
50 lines
1.9 KiB
CSS
50 lines
1.9 KiB
CSS
@layer tokens {
|
|
/* Static twin for each of the 33 color-mix() tokens, below Chrome 111 / Firefox 113 / Safari
|
|
* 16.2. Last in the tokens layer, to outrank 02-tokens.css and 03-palettes.css. A fallback
|
|
* declaration cannot do this job — a custom property fails at the point of USE, not of
|
|
* definition. Degradation rules: docs/css.md "The browser floor". */
|
|
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
|
|
:root {
|
|
--fs-accent-soft: transparent;
|
|
--fs-good-soft: transparent;
|
|
--fs-danger-soft: transparent;
|
|
--fs-accent-fill: transparent;
|
|
--fs-good-fill: transparent;
|
|
--fs-warn-fill: transparent;
|
|
--fs-danger-fill: transparent;
|
|
|
|
--fs-accent-line: var(--fs-accent);
|
|
--fs-good-line: var(--fs-good);
|
|
--fs-danger-line: var(--fs-danger);
|
|
--fs-accent-line-hi: var(--fs-accent);
|
|
--fs-good-line-hi: var(--fs-good);
|
|
--fs-danger-line-hi: var(--fs-danger);
|
|
|
|
/* -solo is already color-mix-free */
|
|
--fs-focus-ring: var(--fs-focus-ring-solo);
|
|
--fs-focus-ring-invalid: 0 0 0 2px var(--fs-panel), 0 0 0 5px var(--fs-danger);
|
|
|
|
--background-color-medium: var(--fs-panel2);
|
|
|
|
/* --fs-photo-dim is a percentage this cannot apply; the fixed dialog scrim beats no scrim */
|
|
--fs-photo-scrim: var(--fs-scrim);
|
|
|
|
/* an unresolved token computes `color` to unset; near-black over a light field beats that */
|
|
--fs-placeholder: var(--fs-faint);
|
|
|
|
/* export tier — third-party apps read these, so they must resolve to something.
|
|
* -medium keeps the hue, -low degrades to the dim text colour it was mixed toward. */
|
|
--border-color-high: var(--fs-border);
|
|
--border-color-low: var(--fs-border);
|
|
--primary-color-medium: var(--fs-accent);
|
|
--primary-color-low: var(--fs-dim);
|
|
--error-color-medium: var(--fs-danger);
|
|
--error-color-low: var(--fs-dim);
|
|
--success-color-medium: var(--fs-good);
|
|
--success-color-low: var(--fs-dim);
|
|
--warn-color-medium: var(--fs-warn);
|
|
--warn-color-low: var(--fs-dim);
|
|
}
|
|
}
|
|
}
|