john/svsmspcalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css: tokenize borders, spacing, and radii — spacing audit pass 4

Browse Source 
Phase 1: border widths (1/2/3px → --border-thin/medium/thick) — 76 replacements
Phase 2: adopt existing spacing tokens (--space-xs through --space-xl) — 18 replacements
Phase 3: border-radius scale (--radius-sm/md/lg/pill) — 16 replacements
Total: 110 replacements + 7 new tokens across 7 files

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
John OReilly
2026-03-16 16:51:43 -04:00
parent e462953a2a
commit 786a8505ac
7 changed files with 122 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
SVS-MSP-Calculator-layout.css
View File

@@ -21,12 +21,12 @@
}
.main-col { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 20px); container-type: inline-size; }
.side-col { position: static; z-index: 10; align-self: start; }
.sidebar-utility { margin-bottom: var(--sidebar-stack-gap); display: flex; flex-direction: column; gap: 8px; }
.sidebar-utility { margin-bottom: var(--sidebar-stack-gap); display: flex; flex-direction: column; gap: var(--space-sm); }
.btn-reset-quote,
.btn-import-quote {
width: 100%;
background: var(--surface-sidebar-utility);
border: 1px solid var(--surface-sidebar-utility-border);
border: var(--border-thin) solid var(--surface-sidebar-utility-border);
border-radius: var(--radius-control);
min-height: var(--control-min-height);
padding: var(--control-pad-y) var(--control-pad-x);
@@ -75,9 +75,9 @@
width: min(460px, calc(100% - 32px));
margin: 12vh auto 0;
background: var(--surface-modal);
border: 1px solid var(--border);
border: var(--border-thin) solid var(--border);
border-radius: 14px;
padding: 22px 22px 20px;
padding: 22px 22px var(--space-xl);
box-shadow: var(--shadow-modal);
}
.confirm-modal-eyebrow {
@@ -86,25 +86,25 @@
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 10px;
margin-bottom: var(--space-stack-tight);
}
.confirm-modal-title {
font-family: 'Poppins', sans-serif;
font-size: 1.5rem;
line-height: 1.3;
color: var(--ink);
margin-bottom: 10px;
margin-bottom: var(--space-stack-tight);
}
.confirm-modal-copy {
font-size: 0.875rem;
line-height: 1.7;
color: var(--muted);
margin-bottom: 18px;
margin-bottom: var(--space-lg);
}
.confirm-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
gap: var(--space-stack-tight);
}
.confirm-btn {
border-radius: var(--radius-control);
@@ -121,7 +121,7 @@
.confirm-btn-secondary {
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
border: var(--border-thin) solid var(--border);
}
.confirm-btn-secondary:hover {
background: var(--surface-ghost-hover);
@@ -131,7 +131,7 @@
.confirm-btn-danger {
background: var(--amber);
color: var(--btn-primary-fg);
border: 1px solid transparent;
border: var(--border-thin) solid transparent;
}
.confirm-btn-danger:hover { filter: brightness(1.05); }
@@ -151,12 +151,12 @@
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 12px;
margin-bottom: var(--space-md);
}
.client-input {
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
border-bottom: var(--border-thin) solid var(--border);
color: var(--accent);
font-family: 'Poppins', sans-serif;
font-weight: 600;
@@ -164,14 +164,14 @@
width: 100%;
max-width: 560px;
outline: none;
padding: 4px 0;
padding: var(--space-xs) 0;
}
.client-input::placeholder { color: var(--muted); opacity: 0.6; font-weight: 400; }
.client-rep-row {
margin-top: 10px;
margin-top: var(--space-stack-tight);
}
.client-rep-row .client-label {
margin-bottom: 4px;
margin-bottom: var(--space-xs);
font-size: 10px;
}
.client-input--rep {