@orange-halo/tokens 1.0.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/contrast-pairs.json +35 -0
  2. package/contrast.js +59 -0
  3. package/dist/themes/dark.css +59 -119
  4. package/dist/themes/dark.json +783 -0
  5. package/dist/themes/light.css +10 -9
  6. package/dist/tokens.css +133 -71
  7. package/dist/tokens.js +119 -55
  8. package/dist/tokens.json +162 -46
  9. package/package.json +8 -4
  10. package/tokens/component.tokens.json +81 -37
  11. package/tokens/global.tokens.json +836 -156
  12. package/tokens/semantic.tokens.json +704 -138
  13. package/tokens/themes/dark.tokens.json +66 -51
  14. package/tokens/themes/light.tokens.json +0 -57
package/dist/themes/light.css CHANGED
@@ -12,18 +12,18 @@
12
12
  --oh-color-brand-primary-muted: #ffe0b2;
13
13
  --oh-color-brand-highlight: #e8a838;
14
14
  --oh-color-brand-highlight-subtle: #fdf3d4;
15
- --oh-color-accent-default: #5f8a8b;
16
- --oh-color-accent-hover: #4d7172;
17
- --oh-color-accent-subtle: #f0f6f6;
18
- --oh-color-accent-muted: #e0ebeb;
19
- --oh-color-feedback-success: #4a8a4c;
15
+ --oh-color-accent-default: #3d5a80;
16
+ --oh-color-accent-hover: #354f70;
17
+ --oh-color-accent-subtle: #eef4f9;
18
+ --oh-color-accent-muted: #d6e4f0;
19
+ --oh-color-feedback-success: #3d7340;
20
20
  --oh-color-feedback-success-subtle: #f0f7f1;
21
21
  --oh-color-feedback-error: #b54540;
22
22
  --oh-color-feedback-error-subtle: #fdf4f3;
23
23
  --oh-color-feedback-warning: #8c5e1c;
24
24
  --oh-color-feedback-warning-subtle: #fefaee;
25
- --oh-color-feedback-info: #4d7172;
26
- --oh-color-feedback-info-subtle: #f0f6f6;
25
+ --oh-color-feedback-info: #3d5a80;
26
+ --oh-color-feedback-info-subtle: #eef4f9;
27
27
  --oh-color-surface-base: #faf7f2;
28
28
  --oh-color-surface-raised: #f5f0e8;
29
29
  --oh-color-surface-sunlit: #faf7f2;
@@ -32,7 +32,7 @@
32
32
  --oh-color-surface-disabled: #e2dcd2;
33
33
  --oh-color-border-default: #e2dcd2;
34
34
  --oh-color-border-subtle: #ede8df;
35
- --oh-color-border-emphasis: #c9c1b4;
35
+ --oh-color-border-emphasis: #6b5d4d;
36
36
  --oh-color-border-focus: #c54300;
37
37
  --oh-color-border-brand: rgba(197, 67, 0, 0.25);
38
38
  --oh-color-text-primary: #3d3229;
@@ -41,6 +41,7 @@
41
41
  --oh-color-text-inverse: #faf7f2;
42
42
  --oh-color-text-link: #c54300;
43
43
  --oh-color-text-link-hover: #9e3500;
44
- --oh-focus-ring-color: rgba(197, 67, 0, 0.35);
44
+ --oh-color-text-link-raised: #9e3500;
45
+ --oh-focus-ring-color: #c54300;
45
46
  --oh-focus-glow-color: rgba(197, 67, 0, 0.15);
46
47
  }
package/dist/tokens.css CHANGED
@@ -12,8 +12,8 @@
12
12
  --oh-color-orange-600: #fb8c00;
13
13
  --oh-color-orange-700: #f57c00;
14
14
  --oh-color-orange-800: #ef6c00;
15
- --oh-color-orange-900: #c54300; /** Primary brand — WCAG AA (4.5:1) */
16
- --oh-color-orange-950: #9e3500; /** Hover/active state — WCAG AA (7.2:1) */
15
+ --oh-color-orange-900: #c54300; /** Primary brand — 5.0:1 with white text, 4.7:1 on cream. Chosen for contrast: do not lighten. */
16
+ --oh-color-orange-950: #9e3500; /** Hover/active — 7.1:1 with white text, 6.6:1 on cream */
17
17
  --oh-color-honey-50: #fefaee;
18
18
  --oh-color-honey-100: #fdf3d4;
19
19
  --oh-color-honey-200: #fbe7a8;
@@ -21,8 +21,9 @@
21
21
  --oh-color-honey-400: #e8a838; /** Signature honey */
22
22
  --oh-color-honey-500: #d4922c;
23
23
  --oh-color-honey-600: #b87a24;
24
- --oh-color-honey-700: #8c5e1c; /** WCAG AA (5.2:1) */
24
+ --oh-color-honey-700: #8c5e1c; /** 5.3:1 on cream */
25
25
  --oh-color-honey-800: #6b4815;
26
+ --oh-color-honey-900: #3d3529; /** Dark theme warning tint */
26
27
  --oh-color-terracotta-50: #fbf5f0;
27
28
  --oh-color-terracotta-100: #f5e8de;
28
29
  --oh-color-terracotta-200: #e8cdbf;
@@ -38,35 +39,49 @@
38
39
  --oh-color-eucalyptus-200: #c2d7d7;
39
40
  --oh-color-eucalyptus-300: #9ebebe;
40
41
  --oh-color-eucalyptus-400: #7aa3a4;
41
- --oh-color-eucalyptus-500: #5f8a8b; /** Signature eucalyptus — WCAG AA (4.5:1) */
42
+ --oh-color-eucalyptus-500: #5f8a8b; /** 3.6:1 on cream — UI and large text only */
42
43
  --oh-color-eucalyptus-600: #4d7172;
43
- --oh-color-eucalyptus-700: #3f5c5d; /** WCAG AA (6.2:1) */
44
+ --oh-color-eucalyptus-700: #3f5c5d; /** 6.8:1 on cream */
44
45
  --oh-color-eucalyptus-800: #344a4b;
45
46
  --oh-color-eucalyptus-900: #2a3c3d;
46
47
  --oh-color-warm-cream: #faf7f2; /** Base background — warm off-white */
47
48
  --oh-color-warm-linen: #f5f0e8; /** Raised surface */
49
+ --oh-color-warm-dawn: #fffbf5; /** Sunlit gradient — top */
50
+ --oh-color-warm-shell: #fdf6ee; /** Sunlit gradient — middle */
51
+ --oh-color-warm-biscuit: #f8efe4; /** Sunlit gradient — bottom */
48
52
  --oh-color-warm-parchment: #ede8df; /** Inset surface */
49
53
  --oh-color-warm-sand: #e2dcd2; /** Borders, dividers */
50
- --oh-color-warm-dune: #c9c1b4; /** Muted elements */
51
- --oh-color-warm-driftwood: #6b5d4d; /** Secondary text — WCAG AA (4.8:1) */
52
- --oh-color-warm-bark: #52463a; /** Emphasis text (6.8:1) */
53
- --oh-color-warm-walnut: #3d3229; /** Primary text — WCAG AA (8.2:1) */
54
+ --oh-color-warm-dune: #c9c1b4; /** Decorative only — 1.7:1 on cream, never for control borders */
55
+ --oh-color-warm-stone: #a09080; /** Dark theme control borders — 4.9:1 on cocoa */
56
+ --oh-color-warm-taupe: #8a7a68; /** Dark theme borders — 3.7:1 on cocoa, 3.0:1 on walnut */
57
+ --oh-color-warm-driftwood: #6b5d4d; /** Secondary text — 6.0:1 on cream */
58
+ --oh-color-warm-bark: #52463a; /** Emphasis text — 8.6:1 on cream */
59
+ --oh-color-warm-hickory: #4a3f33; /** Dark theme hover and highlight surface */
60
+ --oh-color-warm-chestnut: #44382c; /** Dark theme sunlit surface */
61
+ --oh-color-warm-walnut: #3d3229; /** Primary text — 11.7:1 on cream. Dark theme raised surface */
62
+ --oh-color-warm-mocha: #352e28; /** Dark theme pressed and disabled surface */
63
+ --oh-color-warm-cocoa: #2a2420; /** Dark theme page background */
64
+ --oh-color-warm-espresso: #1f1a17; /** Dark theme inset surface */
54
65
  --oh-color-green-50: #f0f7f1;
55
66
  --oh-color-green-100: #d9edd9;
67
+ --oh-color-green-300: #7ab87c; /** Dark theme success — 6.5:1 with cocoa text */
56
68
  --oh-color-green-500: #5a9a5c;
57
- --oh-color-green-600: #4a8a4c; /** WCAG AA (4.5:1) */
58
- --oh-color-green-700: #3d7340;
69
+ --oh-color-green-600: #4a8a4c; /** 3.9:1 on cream — icons and UI only, not text */
70
+ --oh-color-green-700: #3d7340; /** Success text — 5.3:1 on cream, 5.2:1 on green.50 */
71
+ --oh-color-green-900: #2a3629; /** Dark theme success tint */
59
72
  --oh-color-red-50: #fdf4f3;
60
73
  --oh-color-red-100: #f9e0dc;
74
+ --oh-color-red-300: #e08f8d; /** Dark theme error — 6.2:1 with cocoa text */
61
75
  --oh-color-red-500: #c75450;
62
- --oh-color-red-600: #b54540; /** WCAG AA (4.8:1) */
76
+ --oh-color-red-600: #b54540; /** 5.1:1 on cream */
63
77
  --oh-color-red-700: #943836; /** Hover/active state */
78
+ --oh-color-red-900: #3d2a29; /** Dark theme error tint */
64
79
  --oh-color-blue-50: #eef4f9;
65
80
  --oh-color-blue-100: #d6e4f0;
66
81
  --oh-color-blue-200: #a0b4c8;
67
82
  --oh-color-blue-300: #7a9ab8;
68
83
  --oh-color-blue-400: #5a82a8;
69
- --oh-color-blue-500: #3d5a80; /** Signature blue — WCAG AA (5.5:1) */
84
+ --oh-color-blue-500: #3d5a80; /** Signature accent — 7.1:1 with white text, 6.6:1 on cream */
70
85
  --oh-color-blue-600: #354f70; /** Hover state */
71
86
  --oh-color-blue-700: #2e4460; /** Active state */
72
87
  --oh-color-blue-800: #253850;
@@ -102,6 +117,7 @@
102
117
  --oh-font-letter-spacing-normal: 0;
103
118
  --oh-font-letter-spacing-wide: 0.01em;
104
119
  --oh-font-letter-spacing-wider: 0.02em;
120
+ --oh-font-letter-spacing-widest: 0.05em; /** Uppercase labels: hero eyebrows, footer headings */
105
121
  --oh-spacing-0: 0;
106
122
  --oh-spacing-1: 0.25rem; /** 4px */
107
123
  --oh-spacing-2: 0.5rem; /** 8px */
@@ -135,9 +151,8 @@
135
151
  --oh-shadow-inset: inset 0 1px 3px rgba(61, 50, 41, 0.08); /** Inputs, wells */
136
152
  --oh-shadow-chunky-primary: #e8c4a0; /** Warm peach for primary buttons */
137
153
  --oh-shadow-chunky-secondary: #d4c4b0; /** Neutral tan for secondary/form elements */
138
- --oh-shadow-chunky-accent: #a0b4c8; /** Cool blue-gray for accent buttons */
154
+ --oh-shadow-chunky-accent: #a0b4c8; /** Blue offset shadow for accent buttons — decorative */
139
155
  --oh-shadow-chunky-error: rgba(181, 69, 64, 0.3); /** Error state shadow */
140
- --oh-gradient-sunlit: linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%); /** Gentle warmth for surfaces */
141
156
  --oh-gradient-warm: linear-gradient(135deg, #C54300 0%, #FF9800 100%); /** Brand emphasis */
142
157
  --oh-gradient-nostalgic: linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%); /** Subtle retro depth */
143
158
  --oh-motion-duration-quick: 100ms; /** Micro-interactions (color shifts) */
@@ -152,6 +167,15 @@
152
167
  --oh-border-width-0: 0;
153
168
  --oh-border-width-1: 1px;
154
169
  --oh-border-width-2: 2px;
170
+ --oh-border-width-chunky: 2.5px; /** Signature chunky frame for controls and feedback */
171
+ --oh-size-container-sm: 640px;
172
+ --oh-size-container-md: 768px;
173
+ --oh-size-container-lg: 1024px;
174
+ --oh-size-container-xl: 1280px;
175
+ --oh-size-breakpoint-xs: 480px;
176
+ --oh-size-breakpoint-sm: 640px;
177
+ --oh-size-breakpoint-md: 768px;
178
+ --oh-size-breakpoint-lg: 1024px;
155
179
  --oh-z-index-0: 0;
156
180
  --oh-z-index-10: 10;
157
181
  --oh-z-index-20: 20;
@@ -161,56 +185,57 @@
161
185
  --oh-z-index-popover: 1300;
162
186
  --oh-z-index-tooltip: 1400;
163
187
  --oh-focus-ring-width: 3px;
164
- --oh-focus-ring-color: rgba(197, 67, 0, 0.35);
165
- --oh-focus-glow-color: rgba(197, 67, 0, 0.15);
188
+ --oh-focus-ring-offset: 2px;
189
+ --oh-focus-glow-color: rgba(197, 67, 0, 0.15); /** Decorative glow only — never the sole focus indicator */
166
190
  --oh-button-base-border-width: 2.5px;
167
- --oh-button-size-sm-min-height: 36px;
168
- --oh-button-size-md-min-height: 44px;
169
- --oh-button-size-lg-min-height: 52px;
170
- --oh-button-focus-ring-width: 3px;
191
+ --oh-button-size-sm-min-height: 40px;
192
+ --oh-button-size-md-min-height: 48px;
193
+ --oh-button-size-lg-min-height: 56px;
171
194
  --oh-input-base-border-width: 2.5px;
172
195
  --oh-input-size-md-min-height: 48px;
196
+ --oh-card-sunlit-border-color-hover: rgba(197, 67, 0, 0.35); /** Decorative container edge — not a focus or control border */
197
+ --oh-card-section-divider-color: rgba(226, 213, 200, 0.6); /** Decorative divider */
198
+ --oh-card-section-header-gradient-start: rgba(255, 255, 255, 0.5);
199
+ --oh-card-section-header-gradient-end: rgba(255, 255, 255, 0);
200
+ --oh-progress-inverse-track-background: rgba(255, 255, 255, 0.15);
201
+ --oh-progress-inverse-track-border: rgba(255, 255, 255, 0.3);
173
202
  --oh-link-text-decoration: underline;
174
203
  --oh-link-text-decoration-hover: none;
204
+ --oh-link-inverse-focus-background: rgba(0, 0, 0, 0.1); /** Focus tint — paired with the underline, which is the indicator */
205
+ --oh-modal-overlay: rgba(61, 50, 41, 0.6); /** Backdrop — darker than color.surface.overlay so the dialog stands out */
206
+ --oh-close-button-background-hover: rgba(0, 0, 0, 0.08); /** Neutral tint that works on every alert variant */
175
207
  --oh-color-brand-primary: var(--oh-color-orange-900); /** Primary brand action — WCAG AA */
176
208
  --oh-color-brand-primary-hover: var(--oh-color-orange-950); /** Hover state */
177
209
  --oh-color-brand-primary-active: var(--oh-color-orange-950); /** Active/pressed state */
178
210
  --oh-color-brand-primary-subtle: var(--oh-color-orange-50); /** Subtle tint */
179
- --oh-color-brand-primary-muted: var(--oh-color-orange-100); /** Background tint */
180
211
  --oh-color-brand-highlight: var(--oh-color-honey-400); /** Golden accent */
181
212
  --oh-color-brand-highlight-subtle: var(--oh-color-honey-100);
182
213
  --oh-color-accent-default: var(--oh-color-blue-500); /** Signature blue accent */
183
214
  --oh-color-accent-hover: var(--oh-color-blue-600);
184
215
  --oh-color-accent-active: var(--oh-color-blue-700);
185
216
  --oh-color-accent-subtle: var(--oh-color-blue-50);
186
- --oh-color-accent-muted: var(--oh-color-blue-100);
187
217
  --oh-color-accent-shadow: var(--oh-color-blue-200); /** Chunky shadow for accent */
188
- --oh-color-feedback-success: var(--oh-color-green-600);
218
+ --oh-color-feedback-success: var(--oh-color-green-700); /** 5.2:1 on successSubtle — green.600 failed AA for text */
189
219
  --oh-color-feedback-success-subtle: var(--oh-color-green-50);
190
- --oh-color-feedback-success-muted: var(--oh-color-green-100);
191
220
  --oh-color-feedback-error: var(--oh-color-red-600);
192
221
  --oh-color-feedback-error-hover: var(--oh-color-red-700); /** Error hover/active state */
193
222
  --oh-color-feedback-error-subtle: var(--oh-color-red-50);
194
- --oh-color-feedback-error-muted: var(--oh-color-red-100);
195
223
  --oh-color-feedback-error-shadow: var(--oh-shadow-chunky-error); /** Error shadow color */
196
224
  --oh-color-feedback-warning: var(--oh-color-honey-700);
197
225
  --oh-color-feedback-warning-subtle: var(--oh-color-honey-50);
198
- --oh-color-feedback-warning-muted: var(--oh-color-honey-100);
199
226
  --oh-color-feedback-info: var(--oh-color-blue-500);
200
227
  --oh-color-feedback-info-subtle: var(--oh-color-blue-50);
201
- --oh-color-feedback-info-muted: var(--oh-color-blue-100);
202
228
  --oh-color-surface-base: var(--oh-color-warm-cream); /** Page background — warm off-white */
203
229
  --oh-color-surface-raised: var(--oh-color-warm-linen); /** Cards, panels — slight lift */
204
230
  --oh-color-surface-sunlit: var(--oh-color-warm-cream); /** Featured — use with gradient */
205
231
  --oh-color-surface-inset: var(--oh-color-warm-parchment); /** Inputs, wells — pressed in */
206
- --oh-color-surface-white: var(--oh-color-white); /** Pure white for focus/highlight states */
232
+ --oh-color-surface-highlight: var(--oh-color-white); /** Brightest surface — focused inputs, top of raised gradients */
207
233
  --oh-color-surface-disabled: var(--oh-color-warm-sand); /** Quiet disabled */
208
234
  --oh-color-border-default: var(--oh-color-warm-sand); /** Standard border */
209
235
  --oh-color-border-subtle: var(--oh-color-warm-parchment); /** Subtle dividers */
210
236
  --oh-color-border-emphasis: var(--oh-color-warm-driftwood); /** Strong border for form elements */
237
+ --oh-color-border-strong: var(--oh-color-warm-dune); /** Neutral edge between default and emphasis — card hover, drawer edge. Decorative, not a 3:1 control border */
211
238
  --oh-color-border-hover: var(--oh-color-terracotta-600); /** Hover border — darker for feedback */
212
- --oh-color-border-focus: var(--oh-color-orange-900); /** Focus ring — warm orange */
213
- --oh-color-border-focus-inner: var(--oh-color-orange-900); /** Inner focus ring */
214
239
  --oh-color-border-disabled: var(--oh-color-warm-parchment);
215
240
  --oh-color-text-primary: var(--oh-color-warm-walnut); /** Primary text — warm brown */
216
241
  --oh-color-text-secondary: var(--oh-color-warm-driftwood); /** Secondary text */
@@ -218,9 +243,14 @@
218
243
  --oh-color-text-inverse: var(--oh-color-warm-cream); /** On dark backgrounds */
219
244
  --oh-color-text-link: var(--oh-color-orange-900); /** Link text */
220
245
  --oh-color-text-link-hover: var(--oh-color-orange-950); /** Link hover */
246
+ --oh-color-text-link-raised: var(--oh-color-orange-950); /** Links on raised (linen) surfaces — text.link is only 4.4:1 on linen */
221
247
  --oh-color-text-brand: var(--oh-color-orange-900);
222
248
  --oh-color-text-on-brand: var(--oh-color-white); /** Light text on dark brand bg */
223
249
  --oh-color-text-on-accent: var(--oh-color-white); /** Light text on dark accent bg */
250
+ --oh-color-text-on-success: var(--oh-color-white); /** Text on filled color.feedback.success */
251
+ --oh-color-text-on-error: var(--oh-color-white); /** Text on filled color.feedback.error */
252
+ --oh-color-text-on-warning: var(--oh-color-white); /** Text on filled color.feedback.warning */
253
+ --oh-color-text-on-info: var(--oh-color-white); /** Text on filled color.feedback.info */
224
254
  --oh-spacing-layout-page: var(--oh-spacing-6);
225
255
  --oh-spacing-layout-section: var(--oh-spacing-12);
226
256
  --oh-spacing-layout-stack: var(--oh-spacing-5);
@@ -234,6 +264,7 @@
234
264
  --oh-shadow-secondary: var(--oh-shadow-chunky-secondary); /** Secondary/form elements */
235
265
  --oh-shadow-accent: var(--oh-shadow-chunky-accent); /** Accent buttons */
236
266
  --oh-shadow-error: var(--oh-shadow-chunky-error); /** Error state */
267
+ --oh-gradient-sunlit: linear-gradient(180deg, var(--oh-color-warm-dawn) 0%, var(--oh-color-warm-shell) 30%, var(--oh-color-warm-biscuit) 100%); /** Gentle warmth for surfaces — same stops as the sunlit card */
237
268
  --oh-motion-quick: var(--oh-motion-duration-quick);
238
269
  --oh-motion-snappy: var(--oh-motion-duration-snappy);
239
270
  --oh-motion-gentle: var(--oh-motion-duration-gentle);
@@ -248,7 +279,7 @@
248
279
  --oh-typography-heading-h1-line-height: var(--oh-font-line-height-tight);
249
280
  --oh-typography-heading-h1-letter-spacing: var(--oh-font-letter-spacing-tighter);
250
281
  --oh-typography-heading-h2-font-size: var(--oh-font-size-3xl);
251
- --oh-typography-heading-h2-font-weight: var(--oh-font-weight-semibold);
282
+ --oh-typography-heading-h2-font-weight: var(--oh-font-weight-bold);
252
283
  --oh-typography-heading-h2-line-height: var(--oh-font-line-height-tight);
253
284
  --oh-typography-heading-h2-letter-spacing: var(--oh-font-letter-spacing-tight);
254
285
  --oh-typography-heading-h3-font-size: var(--oh-font-size-2xl);
@@ -256,7 +287,7 @@
256
287
  --oh-typography-heading-h3-line-height: var(--oh-font-line-height-snug);
257
288
  --oh-typography-heading-h3-letter-spacing: var(--oh-font-letter-spacing-tight);
258
289
  --oh-typography-heading-h4-font-size: var(--oh-font-size-xl);
259
- --oh-typography-heading-h4-font-weight: var(--oh-font-weight-medium);
290
+ --oh-typography-heading-h4-font-weight: var(--oh-font-weight-semibold);
260
291
  --oh-typography-heading-h4-line-height: var(--oh-font-line-height-snug);
261
292
  --oh-typography-heading-h4-letter-spacing: var(--oh-font-letter-spacing-normal);
262
293
  --oh-typography-heading-h5-font-size: var(--oh-font-size-lg);
@@ -266,6 +297,9 @@
266
297
  --oh-typography-heading-h6-font-weight: var(--oh-font-weight-medium);
267
298
  --oh-typography-heading-h6-line-height: var(--oh-font-line-height-normal);
268
299
  --oh-typography-body-font-family: var(--oh-font-family-sans);
300
+ --oh-typography-body-xl-font-size: var(--oh-font-size-xl);
301
+ --oh-typography-body-xl-font-weight: var(--oh-font-weight-normal);
302
+ --oh-typography-body-xl-line-height: var(--oh-font-line-height-normal);
269
303
  --oh-typography-body-lg-font-size: var(--oh-font-size-lg);
270
304
  --oh-typography-body-lg-font-weight: var(--oh-font-weight-normal);
271
305
  --oh-typography-body-lg-line-height: var(--oh-font-line-height-relaxed);
@@ -289,77 +323,90 @@
289
323
  --oh-typography-label-sm-font-weight: var(--oh-font-weight-medium);
290
324
  --oh-typography-label-sm-line-height: var(--oh-font-line-height-normal); /** 1.5 for WCAG 1.4.12 */
291
325
  --oh-typography-label-sm-letter-spacing: var(--oh-font-letter-spacing-wide);
326
+ --oh-typography-eyebrow-font-family: var(--oh-font-family-sans);
327
+ --oh-typography-eyebrow-font-size: var(--oh-font-size-base);
328
+ --oh-typography-eyebrow-font-weight: var(--oh-font-weight-medium);
329
+ --oh-typography-eyebrow-letter-spacing: var(--oh-font-letter-spacing-widest);
330
+ --oh-typography-control-font-family: var(--oh-font-family-sans);
331
+ --oh-typography-control-font-weight: var(--oh-font-weight-semibold);
332
+ --oh-typography-control-letter-spacing: var(--oh-font-letter-spacing-wide);
333
+ --oh-typography-control-font-size-sm: var(--oh-font-size-base); /** Small buttons, field labels */
334
+ --oh-typography-control-font-size-md: var(--oh-font-size-lg); /** Default: input text, choices, buttons */
335
+ --oh-typography-control-font-size-lg: var(--oh-font-size-xl); /** Large buttons */
336
+ --oh-typography-emphasis-font-weight: var(--oh-font-weight-semibold);
292
337
  --oh-typography-code-font-family: var(--oh-font-family-mono);
293
338
  --oh-typography-code-font-size: var(--oh-font-size-sm);
294
339
  --oh-typography-code-line-height: var(--oh-font-line-height-normal);
295
- --oh-shape-interactive: var(--oh-radius-sm); /** Buttons, inputs (6px) */
296
- --oh-shape-container: var(--oh-radius-md); /** Cards, panels (10px) */
297
- --oh-shape-large: var(--oh-radius-lg); /** Modals (14px) */
298
- --oh-shape-small: var(--oh-radius-xs); /** Chips, tags (4px) */
299
- --oh-shape-pill: var(--oh-radius-full); /** Badges, avatars */
340
+ --oh-layout-container-sm: var(--oh-size-container-sm);
341
+ --oh-layout-container-md: var(--oh-size-container-md);
342
+ --oh-layout-container-lg: var(--oh-size-container-lg);
343
+ --oh-layout-container-xl: var(--oh-size-container-xl);
344
+ --oh-shape-control: var(--oh-radius-md); /** Buttons, inputs, selects, tabs */
345
+ --oh-shape-container: var(--oh-radius-md); /** Alerts, modals, dropdowns, accordion items, panels */
346
+ --oh-shape-large: var(--oh-radius-lg); /** Cards */
347
+ --oh-shape-compact: var(--oh-radius-sm); /** Small controls and tags: close buttons, checkboxes, badges, code blocks */
348
+ --oh-shape-tight: var(--oh-radius-xs); /** Focus outlines on text links, inline code */
349
+ --oh-shape-pill: var(--oh-radius-full); /** Pills, radios, toggles, progress bars */
300
350
  --oh-elevation-none: var(--oh-shadow-none);
301
351
  --oh-elevation-soft: var(--oh-shadow-soft); /** Cards, raised elements */
302
352
  --oh-elevation-medium: var(--oh-shadow-medium); /** Dropdowns, popovers */
303
353
  --oh-elevation-strong: var(--oh-shadow-strong); /** Modals, dialogs */
304
354
  --oh-elevation-glow: var(--oh-shadow-glow); /** Focus ring */
305
355
  --oh-elevation-inset: var(--oh-shadow-inset); /** Inputs, wells */
306
- --oh-button-base-font-weight: var(--oh-font-weight-medium);
307
- --oh-button-base-letter-spacing: var(--oh-font-letter-spacing-wide);
308
- --oh-button-base-border-radius: var(--oh-radius-md);
309
- --oh-button-size-sm-font-size: var(--oh-font-size-sm);
310
- --oh-button-size-sm-padding-x: var(--oh-spacing-3);
356
+ --oh-focus-ring-color: var(--oh-color-orange-900); /** The focus colour: outlines, focused control borders. Must stay opaque (4.7:1 on cream, WCAG 1.4.11) */
357
+ --oh-button-size-sm-padding-x: var(--oh-spacing-4);
311
358
  --oh-button-size-sm-padding-y: var(--oh-spacing-2);
312
- --oh-button-size-sm-gap: var(--oh-spacing-1-5);
313
- --oh-button-size-md-font-size: var(--oh-font-size-sm);
314
- --oh-button-size-md-padding-x: var(--oh-spacing-4);
315
- --oh-button-size-md-padding-y: var(--oh-spacing-2-5);
359
+ --oh-button-size-sm-gap: var(--oh-spacing-2);
360
+ --oh-button-size-md-padding-x: var(--oh-spacing-6);
361
+ --oh-button-size-md-padding-y: var(--oh-spacing-3);
316
362
  --oh-button-size-md-gap: var(--oh-spacing-2);
317
- --oh-button-size-lg-font-size: var(--oh-font-size-base);
318
- --oh-button-size-lg-padding-x: var(--oh-spacing-6);
319
- --oh-button-size-lg-padding-y: var(--oh-spacing-3-5);
363
+ --oh-button-size-lg-padding-x: var(--oh-spacing-8);
364
+ --oh-button-size-lg-padding-y: var(--oh-spacing-4);
320
365
  --oh-button-size-lg-gap: var(--oh-spacing-2-5);
366
+ --oh-button-variant-secondary-background-hover: var(--oh-color-surface-hover);
321
367
  --oh-button-variant-secondary-background-active: var(--oh-color-surface-active-pressed);
322
- --oh-button-focus-ring-color: var(--oh-focus-ring-color);
323
368
  --oh-button-focus-glow-color: var(--oh-focus-glow-color);
324
- --oh-input-base-font-family: var(--oh-font-family-sans);
325
- --oh-input-base-font-size: var(--oh-font-size-lg);
326
- --oh-input-base-line-height: var(--oh-font-line-height-normal);
327
- --oh-input-base-border-radius: var(--oh-radius-md);
328
369
  --oh-input-size-md-padding-x: var(--oh-spacing-4);
329
370
  --oh-input-size-md-padding-y: var(--oh-spacing-3);
330
371
  --oh-card-base-border-width: var(--oh-border-width-1);
331
372
  --oh-card-base-padding: var(--oh-spacing-5);
332
- --oh-card-interactive-background-hover: var(--oh-color-warm-cream);
333
373
  --oh-card-interactive-border-color-hover: var(--oh-color-border-brand);
334
- --oh-card-sunlit-background: var(--oh-gradient-sunlit);
374
+ --oh-card-sunlit-gradient-start: var(--oh-color-warm-dawn);
375
+ --oh-card-sunlit-gradient-mid: var(--oh-color-warm-shell);
376
+ --oh-card-sunlit-gradient-end: var(--oh-color-warm-biscuit);
335
377
  --oh-card-sunlit-border-color: var(--oh-color-border-brand);
336
- --oh-badge-base-font-family: var(--oh-font-family-sans);
337
- --oh-badge-base-font-size: var(--oh-font-size-xs);
338
- --oh-badge-base-font-weight: var(--oh-font-weight-medium);
339
- --oh-badge-base-letter-spacing: var(--oh-font-letter-spacing-wide);
340
378
  --oh-badge-base-padding-x: var(--oh-spacing-2-5);
341
379
  --oh-badge-base-padding-y: var(--oh-spacing-1);
342
- --oh-badge-variant-neutral-background: var(--oh-color-warm-parchment);
343
- --oh-button-base-font-family: var(--oh-typography-label-font-family);
380
+ --oh-button-base-font-family: var(--oh-typography-control-font-family);
381
+ --oh-button-base-font-weight: var(--oh-typography-control-font-weight);
382
+ --oh-button-base-letter-spacing: var(--oh-typography-control-letter-spacing);
383
+ --oh-button-base-border-radius: var(--oh-shape-control);
344
384
  --oh-button-base-transition-duration: var(--oh-motion-snappy);
345
385
  --oh-button-base-transition-easing: var(--oh-motion-ease-playful);
386
+ --oh-button-size-sm-font-size: var(--oh-typography-control-font-size-sm);
387
+ --oh-button-size-md-font-size: var(--oh-typography-control-font-size-md);
388
+ --oh-button-size-lg-font-size: var(--oh-typography-control-font-size-lg);
346
389
  --oh-button-variant-primary-background: var(--oh-color-brand-primary);
347
390
  --oh-button-variant-primary-background-hover: var(--oh-color-brand-primary-hover);
348
391
  --oh-button-variant-primary-background-active: var(--oh-color-brand-primary-active);
349
- --oh-button-variant-primary-color: var(--oh-color-surface-white);
392
+ --oh-button-variant-primary-color: var(--oh-color-text-on-brand);
350
393
  --oh-button-variant-primary-border-color: var(--oh-color-brand-primary);
351
394
  --oh-button-variant-primary-shadow-color: var(--oh-shadow-primary);
352
395
  --oh-button-variant-secondary-background: var(--oh-color-surface-base);
353
- --oh-button-variant-secondary-background-hover: var(--oh-color-surface-white);
354
396
  --oh-button-variant-secondary-color: var(--oh-color-text-primary);
355
397
  --oh-button-variant-secondary-border-color: var(--oh-color-border-emphasis);
356
398
  --oh-button-variant-secondary-shadow-color: var(--oh-shadow-secondary);
357
399
  --oh-button-variant-accent-background: var(--oh-color-accent-default);
358
400
  --oh-button-variant-accent-background-hover: var(--oh-color-accent-hover);
359
401
  --oh-button-variant-accent-background-active: var(--oh-color-accent-active);
360
- --oh-button-variant-accent-color: var(--oh-color-surface-white);
402
+ --oh-button-variant-accent-color: var(--oh-color-text-on-accent);
361
403
  --oh-button-variant-accent-border-color: var(--oh-color-accent-default);
362
404
  --oh-button-variant-accent-shadow-color: var(--oh-color-accent-shadow);
405
+ --oh-button-focus-ring-color: var(--oh-focus-ring-color);
406
+ --oh-input-base-font-family: var(--oh-typography-control-font-family);
407
+ --oh-input-base-font-size: var(--oh-typography-control-font-size-md);
408
+ --oh-input-base-line-height: var(--oh-typography-body-base-line-height);
409
+ --oh-input-base-border-radius: var(--oh-shape-control);
363
410
  --oh-input-base-transition-duration: var(--oh-motion-snappy);
364
411
  --oh-input-base-transition-easing: var(--oh-motion-ease-gentle);
365
412
  --oh-input-state-default-background: var(--oh-color-surface-base);
@@ -368,21 +415,35 @@
368
415
  --oh-input-state-default-placeholder-color: var(--oh-color-text-secondary); /** WCAG readable placeholder */
369
416
  --oh-input-state-default-shadow-color: var(--oh-shadow-secondary);
370
417
  --oh-input-state-hover-border-color: var(--oh-color-border-hover);
371
- --oh-input-state-focus-background: var(--oh-color-surface-white);
372
- --oh-input-state-focus-border-color: var(--oh-color-border-focus);
373
- --oh-input-state-focus-focus-ring-color: var(--oh-color-border-focus-inner);
418
+ --oh-input-state-focus-background: var(--oh-color-surface-highlight);
419
+ --oh-input-state-focus-border-color: var(--oh-focus-ring-color);
420
+ --oh-input-state-focus-focus-ring-color: var(--oh-focus-ring-color);
374
421
  --oh-input-state-error-border-color: var(--oh-color-feedback-error);
375
422
  --oh-input-state-error-background: var(--oh-color-feedback-error-subtle);
376
423
  --oh-input-state-error-shadow-color: var(--oh-shadow-error);
377
424
  --oh-card-base-background: var(--oh-color-surface-raised);
378
- --oh-card-base-border-radius: var(--oh-shape-container);
425
+ --oh-card-base-border-radius: var(--oh-shape-large);
379
426
  --oh-card-base-border-color: var(--oh-color-border-default);
380
427
  --oh-card-base-shadow: var(--oh-elevation-soft);
381
428
  --oh-card-interactive-transition-duration: var(--oh-motion-gentle);
382
429
  --oh-card-interactive-transition-easing: var(--oh-motion-ease-gentle);
430
+ --oh-card-interactive-background-hover: var(--oh-color-surface-base);
383
431
  --oh-card-interactive-shadow-hover: var(--oh-elevation-medium);
432
+ --oh-card-raised-gradient-start: var(--oh-color-surface-highlight);
433
+ --oh-card-raised-gradient-mid: var(--oh-color-surface-base);
434
+ --oh-card-raised-gradient-end: var(--oh-color-surface-raised);
435
+ --oh-card-raised-border-color: var(--oh-color-border-default);
436
+ --oh-card-flat-gradient-start: var(--oh-color-surface-base);
437
+ --oh-card-flat-gradient-end: var(--oh-color-surface-raised);
438
+ --oh-card-flat-border-color: var(--oh-color-border-default);
439
+ --oh-card-sunlit-background: var(--oh-gradient-sunlit);
384
440
  --oh-card-sunlit-shadow: var(--oh-elevation-medium);
385
- --oh-badge-base-border-radius: var(--oh-shape-pill);
441
+ --oh-progress-inverse-fill: var(--oh-color-text-inverse);
442
+ --oh-badge-base-font-family: var(--oh-typography-label-font-family);
443
+ --oh-badge-base-font-size: var(--oh-typography-body-base-font-size);
444
+ --oh-badge-base-font-weight: var(--oh-typography-label-base-font-weight);
445
+ --oh-badge-base-letter-spacing: var(--oh-typography-label-base-letter-spacing);
446
+ --oh-badge-base-border-radius: var(--oh-shape-compact);
386
447
  --oh-badge-variant-brand-background: var(--oh-color-brand-primary-subtle);
387
448
  --oh-badge-variant-brand-color: var(--oh-color-brand-primary);
388
449
  --oh-badge-variant-accent-background: var(--oh-color-accent-subtle);
@@ -393,6 +454,7 @@
393
454
  --oh-badge-variant-error-color: var(--oh-color-feedback-error);
394
455
  --oh-badge-variant-warning-background: var(--oh-color-feedback-warning-subtle);
395
456
  --oh-badge-variant-warning-color: var(--oh-color-feedback-warning);
457
+ --oh-badge-variant-neutral-background: var(--oh-color-surface-inset);
396
458
  --oh-badge-variant-neutral-color: var(--oh-color-text-secondary);
397
459
  --oh-link-color: var(--oh-color-text-link);
398
460
  --oh-link-color-hover: var(--oh-color-text-link-hover);