Skip to content

Commit 773f19e

Browse files
mgetzflexclaude
mgetzflex
and
claude
committed
Reduce the number of places we were using tokens and define --uswds tokens
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent ffe4313 commit 773f19e

1 file changed

Lines changed: 90 additions & 43 deletions

File tree

‎sam-styles/packages/theme/custom-properties.scss‎

Lines changed: 90 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,53 @@
1010
// Set color scheme - only light for now, change to "light dark" to enable dark mode
1111
color-scheme: light;
1212

13+
// ========================================
14+
// USWDS Token Values as CSS Custom Properties
15+
// ========================================
16+
// Extract USWDS tokens into CSS custom properties for runtime flexibility
17+
// These can be overridden without recompiling
18+
19+
// USWDS Color tokens
20+
--uswds-white: #{color('white')};
21+
--uswds-black: #{color('black')};
22+
--uswds-gray-warm-2: #{color('gray-warm-2')};
23+
--uswds-gray-warm-4: #{color('gray-warm-4')};
24+
--uswds-gray-20: #{color('gray-20')};
25+
--uswds-gray-50: #{color('gray-50')};
26+
--uswds-gray-warm-70: #{color('gray-warm-70')};
27+
--uswds-gray-warm-80: #{color('gray-warm-80')};
28+
--uswds-green-cool-20v: #{color('green-cool-20v')};
29+
--uswds-blue-warm-50v: #{color('blue-warm-50v')};
30+
--uswds-gold-20: #{color('gold-20')};
31+
--uswds-blue-20: #{color('blue-20')};
32+
--uswds-red-40v: #{color('red-40v')};
33+
--uswds-gold-20v: #{color('gold-20v')};
34+
--uswds-green-cool-40v: #{color('green-cool-40v')};
35+
--uswds-cyan-30v: #{color('cyan-30v')};
36+
--uswds-indigo-cool-60: #{color('indigo-cool-60')};
37+
--uswds-indigo-cool-70: #{color('indigo-cool-70')};
38+
--uswds-yellow-50: #{color('yellow-50')};
39+
40+
// USWDS Spacing tokens (commonly used)
41+
--uswds-spacing-05: #{units('05')};
42+
--uswds-spacing-1: #{units(1)};
43+
--uswds-spacing-105: #{units('105')};
44+
--uswds-spacing-2: #{units(2)};
45+
--uswds-spacing-205: #{units('205')};
46+
--uswds-spacing-3: #{units(3)};
47+
--uswds-spacing-4: #{units(4)};
48+
--uswds-spacing-5: #{units(5)};
49+
--uswds-spacing-6: #{units(6)};
50+
--uswds-spacing-8: #{units(8)};
51+
--uswds-spacing-10: #{units(10)};
52+
53+
// USWDS Radius tokens
54+
--uswds-radius-lg: #{radius('lg')};
55+
--uswds-radius-pill: #{radius('pill')};
56+
57+
// USWDS Shadow tokens
58+
--uswds-shadow-2: #{get-uswds-value('shadow', 2)};
59+
1360
// ========================================
1461
// Dark Mode Color Definitions (Currently Unused)
1562
// ========================================
@@ -38,26 +85,26 @@
3885
// To enable dark mode: change color-scheme to "light dark"
3986

4087
// Utility colors (these are always the same - true white/black)
41-
--sam-color-white: #{color('white')};
42-
--sam-color-black: #{color('black')};
88+
--sam-color-white: var(--uswds-white);
89+
--sam-color-black: var(--uswds-black);
4390
--sam-color-transparent: transparent;
4491

4592
// Surface colors (these DO change for dark mode)
46-
--sam-color-surface: light-dark(#{color('white')}, var(--sam-dark-surface));
47-
--sam-color-on-surface: light-dark(#{color('black')}, var(--sam-dark-on-surface));
93+
--sam-color-surface: light-dark(var(--uswds-white), var(--sam-dark-surface));
94+
--sam-color-on-surface: light-dark(var(--uswds-black), var(--sam-dark-on-surface));
4895

4996
// Base theme colors (light-dark prepared, only light active for now)
50-
--sam-color-primary-base: light-dark(#{color('green-cool-20v')}, var(--sam-dark-primary));
51-
--sam-color-secondary-base: light-dark(#{color('blue-warm-50v')}, var(--sam-dark-secondary));
52-
--sam-color-accent-warm-base: light-dark(#{color('gold-20')}, var(--sam-dark-accent-warm));
53-
--sam-color-accent-cool-base: light-dark(#{color('blue-20')}, var(--sam-dark-accent-cool));
54-
--sam-color-base-gray: light-dark(#{color('gray-50')}, var(--sam-dark-base-gray));
55-
--sam-color-error-base: light-dark(#{color('red-40v')}, var(--sam-dark-error));
56-
--sam-color-warning-base: light-dark(#{color('gold-20v')}, var(--sam-dark-warning));
57-
--sam-color-success-base: light-dark(#{color('green-cool-40v')}, var(--sam-dark-success));
58-
--sam-color-info-base: light-dark(#{color('cyan-30v')}, var(--sam-dark-info));
59-
60-
// Brand colors (core brand identity)
97+
--sam-color-primary-base: light-dark(var(--uswds-green-cool-20v), var(--sam-dark-primary));
98+
--sam-color-secondary-base: light-dark(var(--uswds-blue-warm-50v), var(--sam-dark-secondary));
99+
--sam-color-accent-warm-base: light-dark(var(--uswds-gold-20), var(--sam-dark-accent-warm));
100+
--sam-color-accent-cool-base: light-dark(var(--uswds-blue-20), var(--sam-dark-accent-cool));
101+
--sam-color-base-gray: light-dark(var(--uswds-gray-50), var(--sam-dark-base-gray));
102+
--sam-color-error-base: light-dark(var(--uswds-red-40v), var(--sam-dark-error));
103+
--sam-color-warning-base: light-dark(var(--uswds-gold-20v), var(--sam-dark-warning));
104+
--sam-color-success-base: light-dark(var(--uswds-green-cool-40v), var(--sam-dark-success));
105+
--sam-color-info-base: light-dark(var(--uswds-cyan-30v), var(--sam-dark-info));
106+
107+
// Brand colors (core brand identity - hardcoded for now, could use USWDS token if available)
61108
--sam-color-brand-blue-base: light-dark(#0a3466, var(--sam-dark-brand-blue));
62109

63110
// ========================================
@@ -66,15 +113,15 @@
66113
// These automatically adapt based on the light-dark() base colors
67114
// Currently using light values only (color-scheme: light)
68115

69-
// Base/Gray colors (USWDS tokens - future: could use light-dark)
70-
--sam-color-base-lightest: #{color('gray-warm-2')};
71-
--sam-color-base-lighter: #{color('gray-warm-4')};
72-
--sam-color-base-light: #{color('gray-20')};
116+
// Base/Gray colors (use USWDS tokens via custom properties)
117+
--sam-color-base-lightest: var(--uswds-gray-warm-2);
118+
--sam-color-base-lighter: var(--uswds-gray-warm-4);
119+
--sam-color-base-light: var(--uswds-gray-20);
73120
--sam-color-base: var(--sam-color-base-gray);
74-
--sam-color-base-dark: #{color('gray-warm-70')};
75-
--sam-color-base-darker: #{color('gray-warm-70')};
76-
--sam-color-base-darkest: #{color('gray-warm-80')};
77-
--sam-color-base-ink: #{color('gray-warm-80')};
121+
--sam-color-base-dark: var(--uswds-gray-warm-70);
122+
--sam-color-base-darker: var(--uswds-gray-warm-70);
123+
--sam-color-base-darkest: var(--uswds-gray-warm-80);
124+
--sam-color-base-ink: var(--uswds-gray-warm-80);
78125

79126
// Primary colors (generated from base)
80127
--sam-color-primary-lighter: color-mix(in srgb, var(--sam-color-primary-base) 10%, var(--sam-color-surface));
@@ -137,11 +184,11 @@
137184
--sam-color-error-light-alt: color-mix(in srgb, var(--sam-color-error-base) 40%, var(--sam-color-surface));
138185
--sam-color-error-dark-alt: color-mix(in srgb, var(--sam-color-error-base) 65%, var(--sam-color-on-surface));
139186

140-
// Link colors (generated from brand blue)
141-
--sam-color-link: #{color('indigo-cool-60')};
142-
--sam-color-link-visited: #{color('indigo-cool-60')};
143-
--sam-color-link-hover: #{color('yellow-50')};
144-
--sam-color-link-active: #{color('indigo-cool-70')};
187+
// Link colors (use USWDS tokens via custom properties)
188+
--sam-color-link: var(--uswds-indigo-cool-60);
189+
--sam-color-link-visited: var(--uswds-indigo-cool-60);
190+
--sam-color-link-hover: var(--uswds-yellow-50);
191+
--sam-color-link-active: var(--uswds-indigo-cool-70);
145192

146193
// Brand blue variants (generated from base)
147194
--sam-color-brand-blue-dark: var(--sam-color-brand-blue-base);
@@ -224,18 +271,18 @@
224271
--sam-spacing-24px: 24px;
225272
--sam-spacing-32px: 32px;
226273

227-
// USWDS units-based spacing
228-
--sam-spacing-05: #{units('05')};
229-
--sam-spacing-1: #{units(1)};
230-
--sam-spacing-105: #{units('105')};
231-
--sam-spacing-2: #{units(2)};
232-
--sam-spacing-205: #{units('205')};
233-
--sam-spacing-3: #{units(3)};
234-
--sam-spacing-4: #{units(4)};
235-
--sam-spacing-5: #{units(5)};
236-
--sam-spacing-6: #{units(6)};
237-
--sam-spacing-8: #{units(8)};
238-
--sam-spacing-10: #{units(10)};
274+
// USWDS units-based spacing (reference USWDS custom properties)
275+
--sam-spacing-05: var(--uswds-spacing-05);
276+
--sam-spacing-1: var(--uswds-spacing-1);
277+
--sam-spacing-105: var(--uswds-spacing-105);
278+
--sam-spacing-2: var(--uswds-spacing-2);
279+
--sam-spacing-205: var(--uswds-spacing-205);
280+
--sam-spacing-3: var(--uswds-spacing-3);
281+
--sam-spacing-4: var(--uswds-spacing-4);
282+
--sam-spacing-5: var(--uswds-spacing-5);
283+
--sam-spacing-6: var(--uswds-spacing-6);
284+
--sam-spacing-8: var(--uswds-spacing-8);
285+
--sam-spacing-10: var(--uswds-spacing-10);
239286

240287
// Auto spacing
241288
--sam-spacing-auto: auto;
@@ -253,11 +300,11 @@
253300
--sam-border-radius-xs: 2px;
254301
--sam-border-radius-sm: 4px;
255302
--sam-border-radius-md: 6px;
256-
--sam-border-radius-lg: #{radius('lg')};
303+
--sam-border-radius-lg: var(--uswds-radius-lg);
257304
--sam-border-radius-xl: 10px;
258305
--sam-border-radius-2xl: 20px;
259306
--sam-border-radius-3xl: 40px;
260-
--sam-border-radius-pill: #{radius('pill')};
307+
--sam-border-radius-pill: var(--uswds-radius-pill);
261308
--sam-border-radius-circle: 50%;
262309

263310
// Component-specific border radius
@@ -273,7 +320,7 @@
273320
--sam-shadow-none: none;
274321
--sam-shadow-button: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
275322
--sam-shadow-1: 0 0 11px rgba(33, 33, 33, .2);
276-
--sam-shadow-2: #{get-uswds-value('shadow', 2)};
323+
--sam-shadow-2: var(--uswds-shadow-2);
277324

278325
// Common shadow patterns from audit
279326
--sam-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.3);

0 commit comments

Comments
 (0)