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:
@@ -129,33 +129,36 @@
|
|||||||
border-top-color: var(--color-border);
|
border-top-color: var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ─── Theme swatches — show v2 dusks instead of v1 cream variants ─────
|
// ─── Theme swatches — each previews ITS OWN dusk in v2 ─────────────────
|
||||||
// Each swatch's --swatch-bg / --swatch-primary / --swatch-text are set
|
// Each swatch's --swatch-bg / --swatch-primary are set inline by SettingsView
|
||||||
// inline from `THEMES`. In v2 mode, override them so the preview reflects
|
// from the v1 THEMES table. Override per-swatch via the aria-label so each
|
||||||
// what the user would actually see when in v2.
|
// tile previews its dusk variant regardless of which theme is active.
|
||||||
.theme-swatch {
|
.theme-swatch {
|
||||||
--swatch-bg: var(--color-surface);
|
|
||||||
background: var(--color-surface);
|
|
||||||
border-color: var(--color-border);
|
border-color: var(--color-border);
|
||||||
|
&--active { border-color: var(--brand-yellow); }
|
||||||
&--active {
|
|
||||||
border-color: var(--brand-yellow);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bar, &__dot {
|
|
||||||
background: var(--color-primary);
|
|
||||||
}
|
|
||||||
&__label { color: var(--color-text); }
|
&__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],
|
.theme-swatch[aria-label*="Warm Craft" i] {
|
||||||
&[data-theme="ocean-dusk"] .theme-swatch[aria-label*="Ocean Dusk" i],
|
background: #2a1808; --swatch-primary: #e89048;
|
||||||
&[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*="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 ──
|
// ─── Buttons — primary stays accent-coloured; secondary becomes glass ──
|
||||||
// The .settings__install button is the main primary action; keep it
|
// The .settings__install button is the main primary action; keep it
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -16,9 +16,9 @@
|
|||||||
<meta name="mobile-web-app-capable" content="yes" />
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||||
<meta name="apple-mobile-web-app-title" content="WeVisto" />
|
<meta name="apple-mobile-web-app-title" content="WeVisto" />
|
||||||
<script type="module" crossorigin src="/build/assets/index-nsK34hVO.js"></script>
|
<script type="module" crossorigin src="/build/assets/index-_0NYKlwk.js"></script>
|
||||||
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
|
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
|
||||||
<link rel="stylesheet" crossorigin href="/build/assets/index-BQ5oGTyF.css">
|
<link rel="stylesheet" crossorigin href="/build/assets/index-COmCgx7p.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user