90 lines
3.8 KiB
Plaintext
90 lines
3.8 KiB
Plaintext
/**
|
|
* styles/tokens/_base.less
|
|
*
|
|
* Layer 1 — SP Semantic Alias Tokens
|
|
*
|
|
* Thin alias layer mapping to Foundry CSS tokens in one place.
|
|
* If Foundry renames or shifts token semantics between versions,
|
|
* only this layer needs updating.
|
|
*
|
|
* RULE: All Foundry --color-* / --font-* / --border-* tokens are FORBIDDEN
|
|
* inside .scrying-pool CSS. Always use --sp-* aliases. This is the sole
|
|
* enforcement point for the semantic layer.
|
|
*
|
|
* Every token includes a hardcoded fallback for environments where the
|
|
* upstream Foundry token is absent.
|
|
*/
|
|
|
|
:root {
|
|
/* Surface & structure */
|
|
--sp-bg: var(--sp-theme-bg, var(--color-bg, hsl(220, 15%, 12%)));
|
|
--sp-surface: var(--sp-theme-surface, var(--color-bg-option, #141618));
|
|
--sp-surface-raised: var(--sp-theme-surface-raised, #1c1f22);
|
|
--sp-surface-elevated: var(--sp-theme-surface-elevated, var(--sp-surface-raised, #1c1f22));
|
|
--sp-surface-subtle: var(--sp-theme-surface-subtle, rgba(255, 255, 255, 0.05));
|
|
--sp-surface-hover: var(--sp-theme-surface-hover, rgba(255, 255, 255, 0.08));
|
|
--sp-border: var(--sp-theme-border, var(--color-border, #282c30));
|
|
--sp-border-subtle: var(--sp-theme-border-subtle, rgba(255, 255, 255, 0.07));
|
|
|
|
/* Typography */
|
|
--sp-text-primary: var(--sp-theme-text-primary, var(--color-text-primary, #dde2e8));
|
|
--sp-text-secondary: var(--sp-theme-text-secondary,var(--color-text-secondary, #7a8390));
|
|
--sp-text-muted: var(--sp-theme-text-muted, #555d66);
|
|
--sp-font-size-sm: 11px;
|
|
|
|
/* Accent & interaction */
|
|
--sp-accent: var(--sp-theme-accent, var(--color-warm-2, #4a9e6b));
|
|
--sp-accent-hover: var(--sp-theme-accent-hover, #3d8f5e);
|
|
--sp-accent-active: var(--sp-theme-accent-active, #2d7a4f);
|
|
--sp-accent-text: #fff;
|
|
--sp-surface-interactive: var(--sp-theme-interactive, #242830);
|
|
--sp-control-bg: var(--sp-theme-control, #1a1d20);
|
|
|
|
/* Semantic colours */
|
|
--sp-color-red: hsl(0, 65%, 55%);
|
|
--sp-color-red-dark: hsl(0, 65%, 42%);
|
|
--sp-color-red-rgb: 204, 77, 77;
|
|
--sp-color-red-subtle: hsla(0, 65%, 55%, 0.12);
|
|
--sp-color-green: hsl(140, 55%, 50%);
|
|
--sp-color-green-subtle: hsla(140, 55%, 50%, 0.12);
|
|
--sp-color-yellow: hsl(48, 88%, 55%);
|
|
--sp-color-yellow-subtle: hsla(48, 88%, 55%, 0.12);
|
|
|
|
/* Shape & motion */
|
|
--sp-radius-sm: 3px;
|
|
--sp-radius-md: 4px;
|
|
|
|
/* Focus ring — module-wide keyboard navigation anchor */
|
|
--sp-focus: var(--sp-theme-focus, var(--color-focus-outline, #63c287));
|
|
--sp-focus-ring: 0 0 0 2px var(--sp-focus);
|
|
|
|
/* Badge */
|
|
--sp-badge-bg: rgba(0, 0, 0, 0.72);
|
|
--sp-badge-text: var(--sp-text-primary);
|
|
|
|
/* Background operations = no toast ever (silent by design) */
|
|
}
|
|
|
|
/* Theme overrides — dark theme defaults */
|
|
.scrying-pool,
|
|
:root[data-color-scheme="dark"] {
|
|
--sp-theme-bg: hsl(220, 15%, 12%);
|
|
--sp-theme-surface: #141618;
|
|
--sp-theme-surface-raised: #1c1f22;
|
|
--sp-theme-surface-elevated: #1c1f22;
|
|
--sp-theme-surface-subtle: rgba(255, 255, 255, 0.05);
|
|
--sp-theme-surface-hover: rgba(255, 255, 255, 0.08);
|
|
--sp-theme-border: #282c30;
|
|
--sp-theme-border-subtle: rgba(255, 255, 255, 0.07);
|
|
--sp-theme-text-primary: #dde2e8;
|
|
--sp-theme-text-secondary: #7a8390;
|
|
--sp-theme-text-muted: #555d66;
|
|
--sp-theme-accent: #4a9e6b;
|
|
--sp-theme-accent-hover: #3d8f5e;
|
|
--sp-theme-accent-active: #2d7a4f;
|
|
--sp-theme-interactive: #242830;
|
|
--sp-theme-control: #1a1d20;
|
|
--sp-theme-focus: #63c287;
|
|
--sp-theme-urgency: #c8982a;
|
|
}
|