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
templates/security/login.html.twig
+1 -41
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Sign in — WeVisto</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -72,47 +73,6 @@
.register-link a { color: #c97c3a; text-decoration: none; font-weight: 600; }
.logo-badge { display: block; width: 88px; height: 88px; margin: 0 auto 1.25rem; border-radius: 14px; overflow: hidden; border: 1px solid #e8d9c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.logo-badge img { display: block; width: 100%; height: 100%; }
/* ── v2 (atmospheric dusks) overrides ── */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital@0;1&display=swap');
[data-design="v2"] body {
background: radial-gradient(ellipse 90% 70% at 50% 30%, #142a40 0%, transparent 70%), #06121f;
color: #f4eed8;
}
[data-design="v2"] .card {
background: #0e2030;
border: 1px solid rgba(180,210,235,0.20);
box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
}
[data-design="v2"] h1 {
font-family: 'Marcellus', Georgia, serif;
font-weight: 400;
color: #f4eed8;
}
[data-design="v2"] label {
color: #b8c8d8;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
[data-design="v2"] input[type="email"],
[data-design="v2"] input[type="password"] {
background: rgba(0,0,0,0.3);
border-color: rgba(180,210,235,0.20);
color: #f4eed8;
}
[data-design="v2"] input:focus { border-color: #f0d000; }
[data-design="v2"] .btn {
background: #4e9fc8;
color: #06121f;
}
[data-design="v2"] .field-error { color: #e08070; }
[data-design="v2"] .register-link { color: #b8c8d8; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; }
[data-design="v2"] .register-link a { color: #f0d000; font-style: normal; }
[data-design="v2"] .logo-badge {
border-color: rgba(180,210,235,0.20);
box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
templates/security/register.html.twig
+1
View File
@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png?v=20260515-vviewfinder">
<link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png?v=20260515-vviewfinder">
<link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png?v=20260515-vviewfinder">
<link rel="stylesheet" href="/css/wevisto-design.css">
<title>Create account — WeVisto</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }