Files
scrying-pool/styles/tokens/_base.less
T
uberwald 9dc202053c Fix styling issues: dialog backgrounds, spacing tokens, and module category
- Added category 'Audio/Video' to module.json to fix 'Non répertorié' issue
- Created styles/tokens/_spacing.less with spacing tokens (xxs, xs, sm, md, lg, xl, 2xl)
- Added legacy aliases (--sp-space-xs, --sp-space-sm, --sp-space-m, etc.) for preset-import-export.less
- Added --sp-bg and --sp-surface-elevated tokens to _base.less
- Fixed _player-privacy-panel.less to use CSS custom properties instead of LESS variables
- Added background: var(--sp-surface) to all dialog root elements:
  - PlayerPrivacyPanel
  - PresetSaveDialog
  - PresetLoadDialog
  - DirectorsBoard
  - PresetImport/Export dialogs
- Added _spacing.less import to scrying-pool.less
- Rebuilt CSS (dist/styles/scrying-pool.css)

This fixes:
1. Transparent dialogs (now have proper background colors)
2. Missing spacing tokens (caused build errors)
3. Module category (now shows as 'Audio/Video' instead of 'Uncategorized')

All 900 unit tests passing.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
2026-05-24 14:03:42 +02:00

64 lines
2.6 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-border: var(--sp-theme-border, var(--color-border, #282c30));
/* 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);
/* Accent & interaction */
--sp-accent: var(--sp-theme-accent, var(--color-warm-2, #4a9e6b));
--sp-surface-interactive: var(--sp-theme-interactive, #242830);
--sp-control-bg: var(--sp-theme-control, #1a1d20);
/* 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-border: #282c30;
--sp-theme-text-primary: #dde2e8;
--sp-theme-text-secondary: #7a8390;
--sp-theme-text-muted: #555d66;
--sp-theme-accent: #4a9e6b;
--sp-theme-interactive: #242830;
--sp-theme-control: #1a1d20;
--sp-theme-focus: #63c287;
--sp-theme-urgency: #c8982a;
}