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

22
SVS-MSP-Calculator-responsive.css
View File

@@ -21,8 +21,8 @@
.pitch-inner { margin-left: 0; }
.pitch-grid { grid-template-columns: repeat(2, 1fr); }
.pitch-item:nth-child(2) { border-right: none; }
.pitch-item:nth-child(3) { border-top: 1px solid var(--border); }
.pitch-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
.pitch-item:nth-child(3) { border-top: var(--border-thin) solid var(--border); }
.pitch-item:nth-child(4) { border-top: var(--border-thin) solid var(--border); border-right: none; }
}
/* ── PHONE (≤ 600px) ────────────────────────────────────────────
@@ -35,7 +35,7 @@
}
.top-bar-logo { margin-left: 0; }
.section { border-radius: 10px; }
.section { border-radius: var(--radius-lg); }
.client-bar { padding: var(--space-xl) 0 var(--space-xl) 0; }
.sections-toolbar { margin-left: 0; margin-bottom: var(--space-md); }
@@ -48,7 +48,7 @@
.group-label { margin-left: 0; }
/* Mobile grouping — accent left border on Managed IT sections */
#sec-02, #sec-03, #sec-01 {
border-left: 3px solid var(--group-strip);
border-left: var(--border-thick) solid var(--group-strip);
}
.group-divider { margin-left: 0; margin-right: 0; }
.mobile-quote-pill { top: 12vh; }
@@ -57,7 +57,7 @@
.pill-toggle {
grid-template-columns: 1fr;
}
.pill-toggle label { border-right: none; border-bottom: 1px solid var(--border); }
.pill-toggle label { border-right: none; border-bottom: var(--border-thin) solid var(--border); }
.pill-toggle label:last-child { border-bottom: none; }
/* Contract terms — vertical stack on phones */
@@ -70,7 +70,7 @@
.qs-term-wrap .tier-seg {
padding: var(--space-stack) var(--space-stack) 13px;
border-right: none;
border-bottom: 1px solid var(--border);
border-bottom: var(--border-thin) solid var(--border);
text-align: left;
}
.qs-term-wrap .tier-seg:last-of-type {
@@ -164,8 +164,8 @@
.pitch-grid { grid-template-columns: 1fr 1fr; }
.pitch-item { padding: var(--space-xl) var(--space-stack-roomy); }
.pitch-item:nth-child(2) { border-right: none; }
.pitch-item:nth-child(3) { border-top: 1px solid var(--border); }
.pitch-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
.pitch-item:nth-child(3) { border-top: var(--border-thin) solid var(--border); }
.pitch-item:nth-child(4) { border-top: var(--border-thin) solid var(--border); border-right: none; }
.pitch-title { font-size: 0.875rem; }
.pitch-desc { font-size: 0.8125rem; }
.pitch-footer { padding: var(--space-stack) var(--space-stack-roomy); font-size: 0.75rem; }
@@ -332,7 +332,7 @@
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform;
border-top: 1px solid var(--border-mobile-sheet);
border-top: var(--border-thin) solid var(--border-mobile-sheet);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-quote-panel.open .mobile-panel-sheet {
@@ -355,13 +355,13 @@
align-items: center;
justify-content: space-between;
padding: var(--space-stack-roomy) var(--space-xl) var(--space-md);
border-bottom: 1px solid var(--border-mobile-row);
border-bottom: var(--border-thin) solid var(--border-mobile-row);
background: var(--surface-mobile-close-row);
}
.mobile-panel-actions {
display: block;
padding: 0 var(--space-xl) var(--space-md);
border-bottom: 1px solid var(--border-mobile-row);
border-bottom: var(--border-thin) solid var(--border-mobile-row);
background: var(--surface-mobile-actions);
}
.mobile-panel-actions .btn-export {