mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-14 04:07:56 +08:00
52 lines
2.2 KiB
CSS
52 lines
2.2 KiB
CSS
@layer tokens {
|
|
/* Static twin for each of the 26 color-mix() tokens (28 declarations: the two focus rings read
|
|
* them), 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. A re-declaration of a twinned token
|
|
* outside :root (dark blocks, theme layer) outranks it: re-state the percentage, or wrap the
|
|
* block in the same @supports. 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);
|
|
}
|
|
}
|
|
}
|