football2801/pictureFrame-webApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(design-v2): theme swatches preview their own dusk
CI / test (push) Has been cancelled
Details

Browse Source 
Active-theme-only override made all six swatches show the same amber tint
in v2. Per-swatch rules via aria-label now give each its own dusk preview.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Edholm
2026-05-15 14:05:33 -04:00
parent b53c0593c0
commit 76c72f69d8
9 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/design-v2.scss
+25 -22
View File
@@ -129,33 +129,36 @@
border-top-color: var(--color-border);
}
// ─── Theme swatches — show v2 dusks instead of v1 cream variants ─────
// Each swatch's --swatch-bg / --swatch-primary / --swatch-text are set
// inline from `THEMES`. In v2 mode, override them so the preview reflects
// what the user would actually see when in v2.
// ─── Theme swatches — each previews ITS OWN dusk in v2 ─────────────────
// Each swatch's --swatch-bg / --swatch-primary are set inline by SettingsView
// from the v1 THEMES table. Override per-swatch via the aria-label so each
// tile previews its dusk variant regardless of which theme is active.
.theme-swatch {
--swatch-bg: var(--color-surface);
background: var(--color-surface);
border-color: var(--color-border);
&--active {
border-color: var(--brand-yellow);
}
&__bar, &__dot {
background: var(--color-primary);
}
&--active { border-color: var(--brand-yellow); }
&__label { color: var(--color-text); }
}
// For each theme-id, give the swatch a tinted preview that matches the dusk
&[data-theme="warm-craft"] .theme-swatch[aria-label*="Warm Craft" i],
&[data-theme="ocean-dusk"] .theme-swatch[aria-label*="Ocean Dusk" i],
&[data-theme="sage-cream"] .theme-swatch[aria-label*="Sage" i],
&[data-theme="dusty-mauve"] .theme-swatch[aria-label*="Dusty" i],
&[data-theme="playful-pop"] .theme-swatch[aria-label*="Playful" i],
&[data-theme="honey-slate"] .theme-swatch[aria-label*="Honey" i] {
background: var(--color-surface-2);
.theme-swatch[aria-label*="Warm Craft" i] {
background: #2a1808; --swatch-primary: #e89048;
}
.theme-swatch[aria-label*="Ocean Dusk" i] {
background: #0c1c2e; --swatch-primary: #4e9fc8;
}
.theme-swatch[aria-label*="Sage" i] {
background: #122418; --swatch-primary: #88c068;
}
.theme-swatch[aria-label*="Playful" i] {
background: #2a0e1e; --swatch-primary: #d878a0;
}
.theme-swatch[aria-label*="Dusty" i] {
background: #1e0c2a; --swatch-primary: #b890d8;
}
.theme-swatch[aria-label*="Honey" i] {
background: #241c0e; --swatch-primary: #e8c050;
}
.theme-swatch__bar { background: var(--swatch-primary); }
.theme-swatch__dot { background: var(--swatch-primary); opacity: 0.6; }
// ─── Buttons — primary stays accent-coloured; secondary becomes glass ──
// The .settings__install button is the main primary action; keep it