uberwald/scrying-pool
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Fix styling issues: dialog backgrounds, spacing tokens, and module category

Browse Source 
- 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>
This commit is contained in:
LeRatierBretonnier
2026-05-24 14:03:42 +02:00
parent a05d3ca831
commit 9dc202053c
9 changed files with 69 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/components/_directors-board.less
+2
View File
@@ -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 {
styles/components/_player-privacy-panel.less
+25 -19
View File
@@ -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);
}
}
styles/components/_preset-import-export.less
+3
View File
@@ -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);
styles/components/_preset-load-dialog.less
+2
View File
@@ -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 {
styles/components/_preset-save-dialog.less
+2
View File
@@ -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 {
styles/scrying-pool.less
+1
View File
@@ -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";
styles/tokens/_base.less
+4
View File
@@ -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;
styles/tokens/_spacing.less
+29
View File
@@ -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);
}