From 9dc202053c16e69add861734d4ef7cf3ba34b141 Mon Sep 17 00:00:00 2001 From: LeRatierBretonnier Date: Sun, 24 May 2026 14:03:42 +0200 Subject: [PATCH] Fix styling issues: dialog backgrounds, spacing tokens, and module category MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- module.json | 1 + styles/components/_directors-board.less | 2 + styles/components/_player-privacy-panel.less | 44 +++++++++++--------- styles/components/_preset-import-export.less | 3 ++ styles/components/_preset-load-dialog.less | 2 + styles/components/_preset-save-dialog.less | 2 + styles/scrying-pool.less | 1 + styles/tokens/_base.less | 4 ++ styles/tokens/_spacing.less | 29 +++++++++++++ 9 files changed, 69 insertions(+), 19 deletions(-) create mode 100644 styles/tokens/_spacing.less diff --git a/module.json b/module.json index e1cffdc..eeecc41 100644 --- a/module.json +++ b/module.json @@ -8,6 +8,7 @@ "name": "Morr" } ], + "category": "Audio/Video", "compatibility": { "minimum": "14", "verified": "14" diff --git a/styles/components/_directors-board.less b/styles/components/_directors-board.less index 9925311..fc7ad3d 100644 --- a/styles/components/_directors-board.less +++ b/styles/components/_directors-board.less @@ -10,6 +10,8 @@ // via DEFAULT_OPTIONS.classes. The content section and footer live inside PARTS. .scrying-pool.directors-board { + background: var(--sp-surface); + color: var(--sp-text-primary); // ── Participant grid ────────────────────────────────────────────────────── .directors-board__content { diff --git a/styles/components/_player-privacy-panel.less b/styles/components/_player-privacy-panel.less index a2d7d69..f250128 100644 --- a/styles/components/_player-privacy-panel.less +++ b/styles/components/_player-privacy-panel.less @@ -9,6 +9,12 @@ @import "../tokens/_base.less"; .scrying-pool { + // Dialog root element + .player-privacy-panel { + background: var(--sp-surface); + color: var(--sp-text-primary); + } + // Container .player-privacy-panel__container { display: flex; @@ -19,7 +25,7 @@ // Header .player-privacy-panel__header { - padding: @sp-spacing-sm @sp-spacing-md; + padding: var(--sp-spacing-sm, 8px) var(--sp-spacing-md, 12px); border-bottom: 1px solid var(--sp-border); background: var(--sp-surface); } @@ -34,15 +40,15 @@ // Body .player-privacy-panel__body { - padding: @sp-spacing-md; + padding: var(--sp-spacing-md, 12px); background: var(--sp-surface); } // Notice (read-only) .player-privacy-panel__notice { - padding: @sp-spacing-sm @sp-spacing-md; - margin-bottom: @sp-spacing-md; - border-radius: @sp-border-radius; + padding: var(--sp-spacing-sm, 8px) var(--sp-spacing-md, 12px); + margin-bottom: var(--sp-spacing-md, 12px); + border-radius: var(--sp-border-radius, 4px); font-size: 0.85em; text-align: center; } @@ -55,18 +61,18 @@ // Section .player-privacy-panel__section { - margin-bottom: @sp-spacing-md; + margin-bottom: var(--sp-spacing-md, 12px); } .player-privacy-panel__section-header { - margin: 0 0 @sp-spacing-xs 0; + margin: 0 0 var(--sp-spacing-xs, 4px) 0; font-size: 0.95em; font-weight: 600; color: var(--sp-text-primary); } .player-privacy-panel__section-description { - margin: 0 0 @sp-spacing-md 0; + margin: 0 0 var(--sp-spacing-md, 12px) 0; font-size: 0.85em; color: var(--sp-text-secondary); line-height: 1.4; @@ -76,14 +82,14 @@ .player-privacy-panel__effects-list { display: flex; flex-direction: column; - gap: @sp-spacing-md; + gap: var(--sp-spacing-md, 12px); } // Individual effect .player-privacy-panel__effect { - padding: @sp-spacing-sm; + padding: var(--sp-spacing-sm, 8px); border: 1px solid var(--sp-border); - border-radius: @sp-border-radius; + border-radius: var(--sp-border-radius, 4px); background: var(--sp-surface-elevated); } @@ -91,7 +97,7 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: @sp-spacing-xs; + margin-bottom: var(--sp-spacing-xs, 4px); } .player-privacy-panel__effect-label { @@ -117,7 +123,7 @@ .player-privacy-panel__toggle-label { display: flex; align-items: center; - gap: @sp-spacing-xs; + gap: var(--sp-spacing-xs, 4px); cursor: pointer; user-select: none; font-size: 0.85em; @@ -143,9 +149,9 @@ .player-privacy-panel__toggle-text { display: inline-block; - padding: @sp-spacing-xs @sp-spacing-sm; + padding: var(--sp-spacing-xs, 4px) var(--sp-spacing-sm, 8px); border: 1px solid var(--sp-border); - border-radius: @sp-border-radius; + border-radius: var(--sp-border-radius, 4px); background: var(--sp-surface); color: var(--sp-text-primary); font-weight: 500; @@ -173,14 +179,14 @@ .player-privacy-panel__portrait-container { display: flex; flex-direction: column; - gap: @sp-spacing-sm; + gap: var(--sp-spacing-sm, 8px); } .player-privacy-panel__portrait-preview { width: 100px; height: 100px; border: 2px solid var(--sp-border); - border-radius: @sp-border-radius; + border-radius: var(--sp-border-radius, 4px); overflow: hidden; background: var(--sp-surface-elevated); display: flex; @@ -196,13 +202,13 @@ .player-privacy-panel__portrait-actions { display: flex; - gap: @sp-spacing-sm; + gap: var(--sp-spacing-sm, 8px); flex-wrap: wrap; } .player-privacy-panel__portrait-choose, .player-privacy-panel__portrait-remove { font-size: 0.85em; - padding: @sp-spacing-xs @sp-spacing-sm; + padding: var(--sp-spacing-xs, 4px) var(--sp-spacing-sm, 8px); } } diff --git a/styles/components/_preset-import-export.less b/styles/components/_preset-import-export.less index c8c7f3b..e0415e7 100644 --- a/styles/components/_preset-import-export.less +++ b/styles/components/_preset-import-export.less @@ -9,6 +9,9 @@ .scrying-pool.dialog.preset-export, .scrying-pool.dialog.preset-import { + background: var(--sp-surface); + color: var(--sp-text-primary); + .sp-dialog-content { padding: var(--sp-space-m); color: var(--sp-text-primary); diff --git a/styles/components/_preset-load-dialog.less b/styles/components/_preset-load-dialog.less index 31b5267..ac773e5 100644 --- a/styles/components/_preset-load-dialog.less +++ b/styles/components/_preset-load-dialog.less @@ -10,6 +10,8 @@ // via DEFAULT_OPTIONS.classes. The content lives inside PARTS. .scrying-pool.preset-load-dialog { + background: var(--sp-surface); + color: var(--sp-text-primary); // ── Content wrapper ──────────────────────────────────────────────────── .preset-load-dialog__content { diff --git a/styles/components/_preset-save-dialog.less b/styles/components/_preset-save-dialog.less index e16eb9c..d35d948 100644 --- a/styles/components/_preset-save-dialog.less +++ b/styles/components/_preset-save-dialog.less @@ -10,6 +10,8 @@ // via DEFAULT_OPTIONS.classes. The content lives inside PARTS. .scrying-pool.preset-save-dialog { + background: var(--sp-surface); + color: var(--sp-text-primary); // ── Form ─────────────────────────────────────────────────────────────── .preset-save-dialog__form { diff --git a/styles/scrying-pool.less b/styles/scrying-pool.less index d8b0a55..c823e49 100644 --- a/styles/scrying-pool.less +++ b/styles/scrying-pool.less @@ -9,6 +9,7 @@ // ── Token layers ───────────────────────────────────────────────────────────── @import "tokens/_base.less"; +@import "tokens/_spacing.less"; @import "tokens/_states.less"; @import "tokens/_motion.less"; @import "tokens/_focus.less"; diff --git a/styles/tokens/_base.less b/styles/tokens/_base.less index b606635..a44a526 100644 --- a/styles/tokens/_base.less +++ b/styles/tokens/_base.less @@ -17,8 +17,10 @@ :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 */ @@ -45,8 +47,10 @@ /* 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; diff --git a/styles/tokens/_spacing.less b/styles/tokens/_spacing.less new file mode 100644 index 0000000..c55336b --- /dev/null +++ b/styles/tokens/_spacing.less @@ -0,0 +1,29 @@ +/** + * styles/tokens/_spacing.less + * + * Layer 1 — SP Spacing Tokens + * + * Semantic spacing tokens for consistent layout. + * Maps to Foundry's spacing scale where available. + */ + +:root { + --sp-spacing-xxs: 2px; + --sp-spacing-xs: 4px; + --sp-spacing-sm: 8px; + --sp-spacing-md: 12px; + --sp-spacing-lg: 16px; + --sp-spacing-xl: 24px; + --sp-spacing-2xl: 32px; + + /* Border radius */ + --sp-border-radius: 4px; + --sp-border-radius-lg: 8px; + + /* Legacy aliases for preset-import-export.less */ + --sp-space-xs: var(--sp-spacing-xs, 4px); + --sp-space-sm: var(--sp-spacing-sm, 8px); + --sp-space-m: var(--sp-spacing-md, 12px); + --sp-space-l: var(--sp-spacing-lg, 16px); + --sp-space-xl: var(--sp-spacing-xl, 24px); +}