fix(design-v2): visibility polish — stronger glass + themed nav chrome
CI / test (push) Has been cancelled
CI / test (push) Has been cancelled
First-cut v2 had transparent cards (alpha 0.55) that disappeared into the harbor backdrop, plus the v1 cream chrome leaked through. This pass: - Bumps --color-surface / surface-2 to 0.85 alpha across every dusk so cards stay readable on top of the photo - Darkens backdrop with a vignette + bumps --color-bg overlay to 0.70 - Adds [data-design=v2] chrome rules: top-nav/bottom-nav glass, theme swatches use dusks tokens, design-toggle cards become glass, install button keeps accent fg color, frame-card gets inset highlight - Brightens --color-text-muted in each dusk for legibility Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -10,15 +10,17 @@
|
||||
--brand-yellow: #f0d000;
|
||||
|
||||
// Default dusk = warm-craft → "amber dusk"
|
||||
// Glass opacity bumped to ~0.82 so cards stay readable on top of the
|
||||
// harbor photo (0.55 was too transparent — text disappeared into the bg).
|
||||
--color-bg: #1a0d05;
|
||||
--color-surface: rgba(50, 22, 8, 0.55);
|
||||
--color-surface-2: rgba(80, 38, 14, 0.55);
|
||||
--color-border: rgba(230, 180, 130, 0.20);
|
||||
--color-surface: rgba(36, 18, 6, 0.85);
|
||||
--color-surface-2: rgba(58, 28, 10, 0.85);
|
||||
--color-border: rgba(230, 180, 130, 0.32);
|
||||
--color-text: #faecd0;
|
||||
--color-text-muted: #c8a880;
|
||||
--color-text-muted: #d0b08c;
|
||||
--color-primary: #e89048;
|
||||
--color-primary-fg: #1a0d05;
|
||||
--color-secondary: rgba(80, 38, 14, 0.55);
|
||||
--color-secondary: rgba(58, 28, 10, 0.85);
|
||||
--color-secondary-fg:#faecd0;
|
||||
--color-destructive: #e08070;
|
||||
--color-destructive-fg: #ffffff;
|
||||
@@ -27,51 +29,51 @@
|
||||
// Per-theme dusk overrides — only the bg-tint + accent change between dusks
|
||||
&[data-theme="ocean-dusk"] {
|
||||
--color-bg: #06121f;
|
||||
--color-surface: rgba(10, 28, 48, 0.55);
|
||||
--color-surface-2: rgba(18, 42, 70, 0.55);
|
||||
--color-border: rgba(180, 210, 235, 0.18);
|
||||
--color-surface: rgba(10, 26, 44, 0.85);
|
||||
--color-surface-2: rgba(18, 40, 66, 0.85);
|
||||
--color-border: rgba(180, 210, 235, 0.30);
|
||||
--color-text: #f4eed8;
|
||||
--color-text-muted: #b0c4d8;
|
||||
--color-text-muted: #c0d0e0;
|
||||
--color-primary: #4e9fc8;
|
||||
--color-primary-fg: #06121f;
|
||||
}
|
||||
&[data-theme="sage-cream"] {
|
||||
--color-bg: #081208;
|
||||
--color-surface: rgba(18, 38, 22, 0.55);
|
||||
--color-surface-2: rgba(28, 60, 32, 0.55);
|
||||
--color-border: rgba(180, 220, 180, 0.18);
|
||||
--color-surface: rgba(14, 32, 18, 0.85);
|
||||
--color-surface-2: rgba(24, 50, 28, 0.85);
|
||||
--color-border: rgba(180, 220, 180, 0.28);
|
||||
--color-text: #ecf3e0;
|
||||
--color-text-muted: #a8c0a0;
|
||||
--color-text-muted: #b8d0b0;
|
||||
--color-primary: #88c068;
|
||||
--color-primary-fg: #081208;
|
||||
}
|
||||
&[data-theme="playful-pop"] {
|
||||
--color-bg: #1a060f;
|
||||
--color-surface: rgba(48, 14, 36, 0.55);
|
||||
--color-surface-2: rgba(72, 22, 54, 0.55);
|
||||
--color-border: rgba(230, 180, 200, 0.20);
|
||||
--color-surface: rgba(40, 12, 30, 0.85);
|
||||
--color-surface-2: rgba(60, 20, 48, 0.85);
|
||||
--color-border: rgba(230, 180, 200, 0.30);
|
||||
--color-text: #f8e8ec;
|
||||
--color-text-muted: #d0a0b8;
|
||||
--color-text-muted: #d8b0c0;
|
||||
--color-primary: #d878a0;
|
||||
--color-primary-fg: #1a060f;
|
||||
}
|
||||
&[data-theme="dusty-mauve"] {
|
||||
--color-bg: #100618;
|
||||
--color-surface: rgba(36, 14, 50, 0.55);
|
||||
--color-surface-2: rgba(54, 22, 74, 0.55);
|
||||
--color-border: rgba(210, 190, 230, 0.18);
|
||||
--color-surface: rgba(30, 12, 42, 0.85);
|
||||
--color-surface-2: rgba(46, 20, 64, 0.85);
|
||||
--color-border: rgba(210, 190, 230, 0.28);
|
||||
--color-text: #f0e8f8;
|
||||
--color-text-muted: #c0b0d0;
|
||||
--color-text-muted: #c8b8d8;
|
||||
--color-primary: #b890d8;
|
||||
--color-primary-fg: #100618;
|
||||
}
|
||||
&[data-theme="honey-slate"] {
|
||||
--color-bg: #18120a;
|
||||
--color-surface: rgba(42, 32, 12, 0.55);
|
||||
--color-surface-2: rgba(62, 50, 22, 0.55);
|
||||
--color-border: rgba(232, 200, 130, 0.22);
|
||||
--color-surface: rgba(36, 28, 10, 0.85);
|
||||
--color-surface-2: rgba(54, 42, 18, 0.85);
|
||||
--color-border: rgba(232, 200, 130, 0.32);
|
||||
--color-text: #faf0d8;
|
||||
--color-text-muted: #d0b888;
|
||||
--color-text-muted: #d8c098;
|
||||
--color-primary: #e8c050;
|
||||
--color-primary-fg: #18120a;
|
||||
}
|
||||
@@ -85,33 +87,128 @@
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: url('/build/assets/harbor.jpg') center/cover no-repeat;
|
||||
filter: brightness(0.55) saturate(0.9);
|
||||
filter: brightness(0.42) saturate(0.85);
|
||||
z-index: -3;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--color-bg);
|
||||
opacity: 0.55;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(0,0,0,0.45) 100%),
|
||||
var(--color-bg);
|
||||
opacity: 0.70;
|
||||
mix-blend-mode: multiply;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ─── Top nav — stronger glass so text is readable ─────────────────────
|
||||
.top-nav {
|
||||
background: color-mix(in srgb, var(--color-bg) 70%, transparent);
|
||||
backdrop-filter: saturate(160%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(20px);
|
||||
border-bottom-color: var(--color-border);
|
||||
|
||||
&__wordmark { color: var(--color-text); }
|
||||
&__tab {
|
||||
color: var(--color-text-muted);
|
||||
&:hover { background: var(--color-surface); color: var(--color-text); }
|
||||
&--active {
|
||||
background: var(--color-surface-2);
|
||||
color: var(--brand-yellow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Bottom nav — same treatment for mobile/tablet ───────────────────
|
||||
.bottom-nav {
|
||||
background: color-mix(in srgb, var(--color-bg) 78%, transparent);
|
||||
backdrop-filter: saturate(160%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(20px);
|
||||
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-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);
|
||||
}
|
||||
&__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);
|
||||
}
|
||||
|
||||
// ─── Buttons — primary stays accent-coloured; secondary becomes glass ──
|
||||
// The .settings__install button is the main primary action; keep it
|
||||
// accent-coloured so it's clearly tappable. But its text-color was hard
|
||||
// to read on the bright orange — force light text on accent.
|
||||
.settings__install {
|
||||
color: var(--color-primary-fg);
|
||||
}
|
||||
|
||||
// The design toggle cards in Settings should look like glass cards, not
|
||||
// the v1 cream rectangles. (Selectors mirror the toggle markup.)
|
||||
.design-toggle__opt {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
|
||||
&:hover { border-color: var(--brand-yellow); }
|
||||
&--active {
|
||||
border-color: var(--brand-yellow);
|
||||
background: var(--color-surface-2);
|
||||
}
|
||||
}
|
||||
.design-toggle__sub { color: var(--color-text-muted); }
|
||||
|
||||
// ─── Frame card (Home) — let the glass + harbor backdrop show through ──
|
||||
// The frame card uses --color-surface as its bg already, which is now
|
||||
// semi-translucent. Add a subtle inset highlight + outer glow for depth.
|
||||
.frame-card {
|
||||
box-shadow:
|
||||
0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent) inset,
|
||||
0 24px 48px -16px rgba(0,0,0,0.55);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
// Settings list rows / dividers
|
||||
.settings__row,
|
||||
.settings__action-link {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.settings__row-label { color: var(--color-text-muted); }
|
||||
.settings__row-value,
|
||||
.settings__action-link { color: var(--color-text); }
|
||||
.settings__logout { color: var(--color-destructive); }
|
||||
|
||||
// Frosted-glass surfaces — anywhere v1 used --color-surface as a solid bg
|
||||
// becomes a backdrop-blurred semi-translucent panel.
|
||||
// (The v1 components don't change their structure; they just inherit
|
||||
// the new token values + glass effect via this overlay.)
|
||||
.frame-card,
|
||||
.library__tile,
|
||||
.settings__section-card,
|
||||
.home-view__empty-card {
|
||||
.home-view__empty-card,
|
||||
.design-toggle__opt,
|
||||
.theme-swatch {
|
||||
backdrop-filter: saturate(160%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(20px);
|
||||
}
|
||||
|
||||
// The yellow V in the wordmark needs to survive even when the V is
|
||||
// technically part of the brand glyph (no Vue change required — handled
|
||||
// by tokens).
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user