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

refactor(design): single source of truth — wevisto-design.css
CI / test (push) Has been cancelled
Details

Browse Source 
v2 tokens were duplicated: in design-v2.scss for the SPA, inlined in
login.html.twig for Twig. Two places to keep in sync.

Now: one shared /public/css/wevisto-design.css loaded by every Twig
standalone template AND linked from the SPA index.html. It contains:
- Brand constants (yellow / navy / fonts)
- v2 tokens with per-theme dusk overrides
- v2 base body bg + editorial typography defaults
- v2 overrides for the .card / .btn / .field-error / .logo-badge
  patterns used across all Twig templates

The SPA's design-v2.scss now holds only SPA-specific composition:
side rail at desktop, frame card, theme swatch harbor preview,
settings polish. No token duplication.

Result: changing a v2 color in one file flows to every surface in both
worlds. Adding v2 to another Twig template only requires the existing
shared CSS link (already wired up to all 11 standalone templates).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Edholm
2026-05-15 15:24:45 -04:00
parent 0e4d78471b
commit 0489028486
22 changed files with 206 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/design-v2.scss
+20 -118
View File
@@ -1,103 +1,25 @@
// ─── Design v2 — atmospheric dusks ──────────────────────────────────────
// Opt-in overlay activated via [data-design="v2"] on <html>. Matches the
// approved mockups at _design/atmospheric-redesign/ — solid navy ground,
// harbor photo used selectively as content (theme swatches, frame heroes,
// login splash), editorial typography (Marcellus + Cormorant Garamond),
// left side rail at desktop.
// Editorial fonts — loaded for v2 only
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');
// ─── Design v2 — SPA-specific component styles ──────────────────────────
// Tokens (CSS vars), font imports, base body bg, and Twig-template overrides
// live in /public/css/wevisto-design.css — loaded by both Twig and the SPA so
// changing a v2 color flows everywhere.
//
// This file holds only the SPA-specific compositions: side rail, frame card,
// library/settings inner styling, theme swatches.
[data-design="v2"] {
// ── Brand constants (survive every dusk) ──────────────────────────
--brand-yellow: #f0d000;
// ── Typography ────────────────────────────────────────────────────
--font-display: 'Marcellus', Georgia, serif;
--font-accent: 'Cormorant Garamond', Georgia, serif;
--font-mono: 'DM Mono', ui-monospace, monospace;
// Body stays Nunito (warmer + better-readable at small sizes than serif)
// ── Default dusk = warm-craft → "amber dusk" ──────────────────────
--color-bg: #1a0d05;
--color-surface: #2a1810;
--color-surface-2: #3a241a;
--color-border: rgba(230, 180, 130, 0.20);
--color-text: #faecd0;
--color-text-muted: #c8a880;
--color-primary: #e89048;
--color-primary-fg: #1a0d05;
--color-secondary: #3a241a;
--color-secondary-fg:#faecd0;
--color-destructive: #e08070;
--color-destructive-fg: #ffffff;
--color-focus-ring: var(--brand-yellow);
&[data-theme="ocean-dusk"] {
--color-bg: #06121f; --color-surface: #0e2030; --color-surface-2: #142a40;
--color-border: rgba(180,210,235,0.20);
--color-text: #f4eed8; --color-text-muted: #b8c8d8;
--color-primary: #4e9fc8; --color-primary-fg: #06121f;
--color-secondary: #142a40;
}
&[data-theme="sage-cream"] {
--color-bg: #081208; --color-surface: #142418; --color-surface-2: #1c3022;
--color-border: rgba(180,220,180,0.18);
--color-text: #ecf3e0; --color-text-muted: #a8c0a0;
--color-primary: #88c068; --color-primary-fg: #081208;
--color-secondary: #1c3022;
}
&[data-theme="playful-pop"] {
--color-bg: #1a060f; --color-surface: #281020; --color-surface-2: #381a30;
--color-border: rgba(230,180,200,0.20);
--color-text: #f8e8ec; --color-text-muted: #d0a0b8;
--color-primary: #d878a0; --color-primary-fg: #1a060f;
--color-secondary: #381a30;
}
&[data-theme="dusty-mauve"] {
--color-bg: #100618; --color-surface: #1c1028; --color-surface-2: #281a3a;
--color-border: rgba(210,190,230,0.18);
--color-text: #f0e8f8; --color-text-muted: #c0b0d0;
--color-primary: #b890d8; --color-primary-fg: #100618;
--color-secondary: #281a3a;
}
&[data-theme="honey-slate"] {
--color-bg: #18120a; --color-surface: #281e10; --color-surface-2: #3a2c1a;
--color-border: rgba(232,200,130,0.22);
--color-text: #faf0d8; --color-text-muted: #d0b888;
--color-primary: #e8c050; --color-primary-fg: #18120a;
--color-secondary: #3a2c1a;
}
// ── Body: SOLID navy with subtle vignette — no full-page harbor ────
body {
background:
radial-gradient(ellipse 90% 70% at 50% 30%, color-mix(in srgb, var(--color-surface) 60%, transparent) 0%, transparent 70%),
var(--color-bg);
color: var(--color-text);
}
// ── Editorial display type — page titles, frame names, section labels ──
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.005em; }
// ── TopNav restyled (mobile/tablet stays horizontal; desktop becomes
// a left side rail per the mockup) ───────────────────────────────
// ── TopNav restyled at desktop into a left side rail ───────────────
.top-nav {
background: color-mix(in srgb, var(--color-bg) 95%, transparent);
border-bottom-color: var(--color-border);
&__wordmark { color: var(--color-text); font-family: var(--font-display); font-weight: 400; }
&__wordmark { color: var(--color-text); font-family: var(--font-display-v2); font-weight: 400; }
&__tab {
color: var(--color-text-muted);
&:hover { background: var(--color-surface); color: var(--color-text); }
&--active {
background: var(--color-surface);
color: var(--brand-yellow);
}
&--active { background: var(--color-surface); color: var(--brand-yellow); }
}
}
@media (min-width: 960px) {
// Reshape the existing .top-nav into a fixed left rail
.top-nav {
position: fixed;
top: 0; left: 0; bottom: 0;
@@ -140,18 +62,16 @@
}
}
// Shift main content right of the rail
body { padding-left: 240px; }
}
// ── Bottom nav (mobile/tablet only) ─────────────────────────────────
.bottom-nav {
background: color-mix(in srgb, var(--color-bg) 95%, transparent);
border-top-color: var(--color-border);
.bottom-nav__tab--active { color: var(--brand-yellow); }
}
// ── Glass cards — solid-ish at v2 (mockup uses near-solid panels) ──
// ── Glass cards everywhere v1 uses --color-surface ─────────────────
.frame-card,
.home-view__empty-card,
.library__tile,
@@ -162,41 +82,27 @@
0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent) inset,
0 24px 48px -16px rgba(0,0,0,0.6);
}
// ── Frame card hero — keep solid navy area (the user's photo goes here
// when device is online; placeholder when offline) ────────────────
.frame-card__hero {
background: var(--color-surface-2);
}
// ── Frame card name uses editorial serif ───────────────────────────
.frame-card__hero { background: var(--color-surface-2); }
.frame-card__name {
font-family: var(--font-display);
font-family: var(--font-display-v2);
font-weight: 400;
font-size: var(--text-xl);
}
// ── Home view editorial polish ─────────────────────────────────────
.home-view {
&__empty-title { font-family: var(--font-display); }
}
.home-view__empty-title { font-family: var(--font-display-v2); }
.library__add-btn { background: var(--color-primary); color: var(--color-primary-fg); }
// ── Library editorial polish ───────────────────────────────────────
.library {
&__add-btn { background: var(--color-primary); color: var(--color-primary-fg); }
}
// ── Settings: page title in display serif ──────────────────────────
// ── Settings polish ────────────────────────────────────────────────
.settings {
&__title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.005em; }
&__title { font-family: var(--font-display-v2); font-weight: 400; letter-spacing: 0.005em; }
&__section-title {
font-family: var(--font-mono);
font-family: var(--font-mono-v2);
font-size: 11px;
letter-spacing: 0.28em;
color: var(--color-text-muted);
}
&__hint {
font-family: var(--font-accent);
font-family: var(--font-accent-v2);
font-style: italic;
color: var(--color-text-muted);
}
@@ -209,7 +115,6 @@
&__logout { color: var(--color-destructive); }
}
// ── Design toggle in Settings ──────────────────────────────────────
.design-toggle__opt {
background: var(--color-surface);
border-color: var(--color-border);
@@ -218,8 +123,7 @@
}
.design-toggle__sub { color: var(--color-text-muted); }
// ── Theme swatches — each previews ITS OWN dusk with the harbor tint
// inside the preview area (matches the mockup) ───────────────────
// ── Theme swatches preview their dusk via the harbor.jpg ───────────
.theme-swatch {
border-color: var(--color-border);
background: var(--color-surface);
@@ -228,7 +132,6 @@
&--active { border-color: var(--brand-yellow); }
&__label { color: var(--color-text); }
// Harbor-tinted preview inside each swatch
&__preview {
background-image: url('/build/assets/harbor.jpg');
background-size: cover;
@@ -248,7 +151,6 @@
.theme-swatch[aria-label*="Playful" i] .theme-swatch__preview::after { background: rgba(56, 16, 38, 0.55); }
.theme-swatch[aria-label*="Dusty" i] .theme-swatch__preview::after { background: rgba(40, 18, 56, 0.55); }
.theme-swatch[aria-label*="Honey" i] .theme-swatch__preview::after { background: rgba(48, 36, 14, 0.55); }
// Hide the v1 swatch bars/dot — the harbor preview replaces them
.theme-swatch__bar,
.theme-swatch__dot { display: none; }
}