@orange-halo/tokens 2.0.0 → 2.1.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 (26) hide show
  1. package/contrast-pairs.json +1 -0
  2. package/dist/brands/hood-dark.css +74 -0
  3. package/dist/brands/hood-dark.json +719 -0
  4. package/dist/brands/hood.css +433 -0
  5. package/dist/brands/hood.json +719 -0
  6. package/dist/brands/orange-halo-dark.css +78 -0
  7. package/dist/brands/orange-halo-dark.json +853 -0
  8. package/dist/brands/orange-halo.css +511 -0
  9. package/dist/brands/orange-halo.json +853 -0
  10. package/dist/themes/dark.css +11 -0
  11. package/dist/themes/dark.json +112 -42
  12. package/dist/tokens.css +88 -38
  13. package/dist/tokens.js +96 -30
  14. package/dist/tokens.json +112 -42
  15. package/package.json +2 -1
  16. package/tokens/brands/hood/brand.json +5 -0
  17. package/tokens/brands/hood/dark.tokens.json +295 -0
  18. package/tokens/brands/hood/light.tokens.json +875 -0
  19. package/tokens/brands/hood/palette.tokens.json +130 -0
  20. package/tokens/brands/orange-halo/brand.json +5 -0
  21. package/tokens/{themes → brands/orange-halo}/dark.tokens.json +14 -3
  22. package/tokens/{semantic.tokens.json → brands/orange-halo/light.tokens.json} +95 -0
  23. package/tokens/{global.tokens.json → brands/orange-halo/palette.tokens.json} +58 -168
  24. package/tokens/{component.tokens.json → core/component.tokens.json} +16 -12
  25. package/tokens/core/scales.tokens.json +170 -0
  26. package/dist/themes/light.css +0 -47
package/dist/brands/hood.css ADDED
@@ -0,0 +1,433 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --oh-color-grey-50: #f7f7f7;
7
+ --oh-color-grey-100: #ededed;
8
+ --oh-color-grey-200: #dedede;
9
+ --oh-color-grey-300: #c4c4c4;
10
+ --oh-color-grey-400: #a8a8a8;
11
+ --oh-color-grey-500: #929292; /** The site's muted grey (#8F8F8F) lifted just enough for 4.5:1 on surface.raised */
12
+ --oh-color-grey-600: #6b6b6b;
13
+ --oh-color-grey-650: #575757;
14
+ --oh-color-grey-700: #454545;
15
+ --oh-color-grey-750: #363636;
16
+ --oh-color-grey-800: #292929;
17
+ --oh-color-grey-850: #1f1f1f;
18
+ --oh-color-grey-900: #171717;
19
+ --oh-color-grey-950: #0d0d0d;
20
+ --oh-color-white: #ffffff;
21
+ --oh-color-black: #000000;
22
+ --oh-color-blue-50: #edf3fc;
23
+ --oh-color-blue-200: #b3cdf2;
24
+ --oh-color-blue-300: #93b8ec;
25
+ --oh-color-blue-700: #1f5cb3;
26
+ --oh-color-blue-800: #184a91;
27
+ --oh-color-blue-900: #16263d;
28
+ --oh-color-green-50: #ebf6ee;
29
+ --oh-color-green-300: #82cf9c;
30
+ --oh-color-green-700: #1d7238;
31
+ --oh-color-green-900: #142b1c;
32
+ --oh-color-red-50: #fceeee;
33
+ --oh-color-red-100: #fad4d4;
34
+ --oh-color-red-300: #f59a9a;
35
+ --oh-color-red-700: #b02525;
36
+ --oh-color-red-800: #8c1d1d;
37
+ --oh-color-red-900: #3a1717;
38
+ --oh-color-amber-50: #fcf4e3;
39
+ --oh-color-amber-300: #ebc271;
40
+ --oh-color-amber-700: #835600;
41
+ --oh-color-amber-900: #33260e;
42
+ --oh-color-surface-overlay: rgba(0, 0, 0, 0.4);
43
+ --oh-color-surface-sheen: rgba(255, 255, 255, 0);
44
+ --oh-color-surface-backdrop: rgba(0, 0, 0, 0.5);
45
+ --oh-color-border-brand: rgba(31, 31, 31, 0.25);
46
+ --oh-color-border-brand-hover: rgba(31, 31, 31, 0.45);
47
+ --oh-font-family-sans: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
48
+ --oh-font-family-display: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
49
+ --oh-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
50
+ --oh-font-size-xs: 0.6875rem;
51
+ --oh-font-size-sm: 0.8125rem;
52
+ --oh-font-size-base: 0.9375rem;
53
+ --oh-font-size-lg: 1.0625rem;
54
+ --oh-font-size-xl: 1.35rem;
55
+ --oh-font-size-2xl: 1.8rem;
56
+ --oh-font-size-3xl: 2.6rem;
57
+ --oh-font-size-4xl: 3.5rem;
58
+ --oh-font-size-5xl: 4.2rem;
59
+ --oh-font-weight-normal: 400;
60
+ --oh-font-weight-medium: 500;
61
+ --oh-font-weight-semibold: 600;
62
+ --oh-font-weight-bold: 700;
63
+ --oh-font-weight-extrabold: 800;
64
+ --oh-font-line-height-none: 1;
65
+ --oh-font-line-height-tight: 1.1;
66
+ --oh-font-line-height-snug: 1.3;
67
+ --oh-font-line-height-normal: 1.5;
68
+ --oh-font-line-height-relaxed: 1.6;
69
+ --oh-font-letter-spacing-tighter: -0.02em;
70
+ --oh-font-letter-spacing-tight: -0.01em;
71
+ --oh-font-letter-spacing-normal: 0;
72
+ --oh-font-letter-spacing-wide: 0.02em;
73
+ --oh-font-letter-spacing-widest: 0.08em; /** Small uppercase labels, as on the site */
74
+ --oh-radius-none: 0;
75
+ --oh-radius-xs: 2px;
76
+ --oh-radius-sm: 4px;
77
+ --oh-radius-md: 6px;
78
+ --oh-radius-full: 9999px;
79
+ --oh-border-width-1: 1px;
80
+ --oh-border-width-2: 2px;
81
+ --oh-shadow-none: none;
82
+ --oh-motion-duration-quick: 100ms;
83
+ --oh-motion-duration-snappy: 150ms;
84
+ --oh-motion-duration-gentle: 200ms;
85
+ --oh-motion-duration-relaxed: 250ms;
86
+ --oh-motion-duration-slow: 350ms;
87
+ --oh-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
88
+ --oh-motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
89
+ --oh-spacing-0: 0;
90
+ --oh-spacing-1: 0.25rem; /** 4px */
91
+ --oh-spacing-2: 0.5rem; /** 8px */
92
+ --oh-spacing-3: 0.75rem; /** 12px */
93
+ --oh-spacing-4: 1rem; /** 16px */
94
+ --oh-spacing-5: 1.25rem; /** 20px */
95
+ --oh-spacing-6: 1.5rem; /** 24px */
96
+ --oh-spacing-7: 1.75rem; /** 28px */
97
+ --oh-spacing-8: 2rem; /** 32px */
98
+ --oh-spacing-10: 2.5rem; /** 40px */
99
+ --oh-spacing-12: 3rem; /** 48px */
100
+ --oh-spacing-16: 4rem; /** 64px */
101
+ --oh-spacing-20: 5rem; /** 80px */
102
+ --oh-spacing-px: 1px;
103
+ --oh-spacing-0-5: 0.125rem; /** 2px */
104
+ --oh-spacing-1-5: 0.375rem; /** 6px */
105
+ --oh-spacing-2-5: 0.625rem; /** 10px */
106
+ --oh-spacing-3-5: 0.875rem; /** 14px */
107
+ --oh-size-container-sm: 640px;
108
+ --oh-size-container-md: 768px;
109
+ --oh-size-container-lg: 1024px;
110
+ --oh-size-container-xl: 1280px;
111
+ --oh-size-breakpoint-xs: 480px;
112
+ --oh-size-breakpoint-sm: 640px;
113
+ --oh-size-breakpoint-md: 768px;
114
+ --oh-size-breakpoint-lg: 1024px;
115
+ --oh-z-index-0: 0;
116
+ --oh-z-index-10: 10;
117
+ --oh-z-index-20: 20;
118
+ --oh-z-index-dropdown: 1000;
119
+ --oh-z-index-sticky: 1100;
120
+ --oh-z-index-modal: 1200;
121
+ --oh-z-index-popover: 1300;
122
+ --oh-z-index-tooltip: 1400;
123
+ --oh-elevation-offset-xs: 0px; /** Flat brand: offset shadows have no offset, so they don't show */
124
+ --oh-elevation-offset-sm: 0px; /** Flat brand: offset shadows have no offset, so they don't show */
125
+ --oh-elevation-offset-md: 0px; /** Flat brand: offset shadows have no offset, so they don't show */
126
+ --oh-elevation-offset-lg: 0px; /** Flat brand: offset shadows have no offset, so they don't show */
127
+ --oh-elevation-offset-xl: 0px; /** Flat brand: offset shadows have no offset, so they don't show */
128
+ --oh-elevation-offset-2xl: 0px; /** Flat brand: offset shadows have no offset, so they don't show */
129
+ --oh-lift-hover-sm: 0px;
130
+ --oh-lift-hover-md: 0px;
131
+ --oh-lift-press-sm: 0px;
132
+ --oh-lift-press-md: 0px;
133
+ --oh-decoration-underline-thickness: 1px;
134
+ --oh-decoration-underline-focus-thickness: 2px;
135
+ --oh-decoration-underline-dash: 4px;
136
+ --oh-decoration-underline-period: 8px;
137
+ --oh-focus-ring-width: 2px;
138
+ --oh-focus-ring-offset: 2px;
139
+ --oh-focus-glow-color: rgba(0, 0, 0, 0); /** No glow: the outline is the indicator */
140
+ --oh-button-size-sm-min-height: 40px;
141
+ --oh-button-size-md-min-height: 48px;
142
+ --oh-button-size-lg-min-height: 56px;
143
+ --oh-input-size-md-min-height: 48px;
144
+ --oh-card-section-header-gradient-end: rgba(255, 255, 255, 0);
145
+ --oh-progress-track-inset-shadow: rgba(0, 0, 0, 0.06); /** Neutral, so it works on every track colour */
146
+ --oh-progress-inverse-track-background: rgba(255, 255, 255, 0.15);
147
+ --oh-progress-inverse-track-border: rgba(255, 255, 255, 0.3);
148
+ --oh-link-text-decoration: underline;
149
+ --oh-link-text-decoration-hover: none;
150
+ --oh-link-inverse-focus-background: rgba(0, 0, 0, 0.1); /** Focus tint — paired with the underline, which is the indicator */
151
+ --oh-close-button-background-hover: rgba(0, 0, 0, 0.08); /** Neutral tint that works on every alert variant */
152
+ --oh-close-button-shadow-hover: rgba(0, 0, 0, 0.15); /** Offset shadow colour on hover and press. Neutral, like the background, so it works on every alert variant */
153
+ --oh-color-brand-primary: var(--oh-color-grey-850);
154
+ --oh-color-brand-primary-hover: var(--oh-color-grey-700);
155
+ --oh-color-brand-primary-active: var(--oh-color-grey-950);
156
+ --oh-color-brand-primary-subtle: var(--oh-color-grey-100);
157
+ --oh-color-brand-highlight: var(--oh-color-grey-800);
158
+ --oh-color-brand-highlight-subtle: var(--oh-color-grey-200);
159
+ --oh-color-accent-default: var(--oh-color-blue-700);
160
+ --oh-color-accent-hover: var(--oh-color-blue-800);
161
+ --oh-color-accent-active: var(--oh-color-blue-800);
162
+ --oh-color-accent-subtle: var(--oh-color-blue-50);
163
+ --oh-color-accent-shadow: var(--oh-color-blue-200);
164
+ --oh-color-feedback-success: var(--oh-color-green-700);
165
+ --oh-color-feedback-success-subtle: var(--oh-color-green-50);
166
+ --oh-color-feedback-error: var(--oh-color-red-700);
167
+ --oh-color-feedback-error-hover: var(--oh-color-red-800);
168
+ --oh-color-feedback-error-subtle: var(--oh-color-red-50);
169
+ --oh-color-feedback-error-shadow: var(--oh-color-red-300);
170
+ --oh-color-feedback-warning: var(--oh-color-amber-700);
171
+ --oh-color-feedback-warning-subtle: var(--oh-color-amber-50);
172
+ --oh-color-feedback-info: var(--oh-color-blue-700);
173
+ --oh-color-feedback-info-subtle: var(--oh-color-blue-50);
174
+ --oh-color-surface-base: var(--oh-color-white);
175
+ --oh-color-surface-raised: var(--oh-color-grey-50);
176
+ --oh-color-surface-sunlit: var(--oh-color-white);
177
+ --oh-color-surface-inset: var(--oh-color-grey-100);
178
+ --oh-color-surface-highlight: var(--oh-color-white);
179
+ --oh-color-surface-disabled: var(--oh-color-grey-100);
180
+ --oh-color-surface-hover: var(--oh-color-grey-50);
181
+ --oh-color-surface-active-pressed: var(--oh-color-grey-200);
182
+ --oh-color-surface-featured-start: var(--oh-color-white);
183
+ --oh-color-surface-featured-mid: var(--oh-color-grey-50);
184
+ --oh-color-surface-featured-end: var(--oh-color-grey-100);
185
+ --oh-color-border-default: var(--oh-color-grey-200);
186
+ --oh-color-border-subtle: var(--oh-color-grey-100);
187
+ --oh-color-border-emphasis: var(--oh-color-grey-600);
188
+ --oh-color-border-strong: var(--oh-color-grey-300);
189
+ --oh-color-border-hover: var(--oh-color-grey-850);
190
+ --oh-color-border-disabled: var(--oh-color-grey-100);
191
+ --oh-color-border-divider: var(--oh-color-grey-200);
192
+ --oh-color-text-primary: var(--oh-color-grey-850);
193
+ --oh-color-text-secondary: var(--oh-color-grey-600);
194
+ --oh-color-text-disabled: var(--oh-color-grey-400);
195
+ --oh-color-text-inverse: var(--oh-color-white);
196
+ --oh-color-text-link: var(--oh-color-grey-850);
197
+ --oh-color-text-link-hover: var(--oh-color-grey-650);
198
+ --oh-color-text-link-raised: var(--oh-color-grey-850);
199
+ --oh-color-text-brand: var(--oh-color-grey-850);
200
+ --oh-color-text-on-brand: var(--oh-color-white);
201
+ --oh-color-text-on-accent: var(--oh-color-white);
202
+ --oh-color-text-on-success: var(--oh-color-white);
203
+ --oh-color-text-on-error: var(--oh-color-white);
204
+ --oh-color-text-on-warning: var(--oh-color-white);
205
+ --oh-color-text-on-info: var(--oh-color-white);
206
+ --oh-shadow-overlay: var(--oh-color-grey-400);
207
+ --oh-shadow-primary: var(--oh-color-grey-300);
208
+ --oh-shadow-secondary: var(--oh-color-grey-200);
209
+ --oh-shadow-accent: var(--oh-color-blue-200);
210
+ --oh-shadow-error: var(--oh-color-red-300);
211
+ --oh-shadow-neutral: var(--oh-color-grey-300);
212
+ --oh-shadow-neutral-hover: var(--oh-color-grey-400);
213
+ --oh-shadow-field: var(--oh-color-grey-300);
214
+ --oh-motion-quick: var(--oh-motion-duration-quick);
215
+ --oh-motion-snappy: var(--oh-motion-duration-snappy);
216
+ --oh-motion-gentle: var(--oh-motion-duration-gentle);
217
+ --oh-motion-relaxed: var(--oh-motion-duration-relaxed);
218
+ --oh-motion-slow: var(--oh-motion-duration-slow);
219
+ --oh-motion-ease-gentle: var(--oh-motion-easing-standard);
220
+ --oh-motion-ease-out: var(--oh-motion-easing-out);
221
+ --oh-motion-ease-playful: var(--oh-motion-easing-out);
222
+ --oh-spacing-layout-page: var(--oh-spacing-6);
223
+ --oh-spacing-layout-section: var(--oh-spacing-12);
224
+ --oh-spacing-layout-stack: var(--oh-spacing-5);
225
+ --oh-spacing-layout-inline: var(--oh-spacing-4);
226
+ --oh-spacing-component-xs: var(--oh-spacing-1-5);
227
+ --oh-spacing-component-sm: var(--oh-spacing-2-5);
228
+ --oh-spacing-component-md: var(--oh-spacing-3-5);
229
+ --oh-spacing-component-lg: var(--oh-spacing-5);
230
+ --oh-spacing-component-xl: var(--oh-spacing-7);
231
+ --oh-typography-heading-font-family: var(--oh-font-family-display);
232
+ --oh-typography-heading-h1-font-size: var(--oh-font-size-4xl);
233
+ --oh-typography-heading-h1-font-weight: var(--oh-font-weight-extrabold);
234
+ --oh-typography-heading-h1-line-height: var(--oh-font-line-height-tight);
235
+ --oh-typography-heading-h1-letter-spacing: var(--oh-font-letter-spacing-tighter);
236
+ --oh-typography-heading-h2-font-size: var(--oh-font-size-3xl);
237
+ --oh-typography-heading-h2-font-weight: var(--oh-font-weight-extrabold);
238
+ --oh-typography-heading-h2-line-height: var(--oh-font-line-height-tight);
239
+ --oh-typography-heading-h2-letter-spacing: var(--oh-font-letter-spacing-tight);
240
+ --oh-typography-heading-h3-font-size: var(--oh-font-size-2xl);
241
+ --oh-typography-heading-h3-font-weight: var(--oh-font-weight-bold);
242
+ --oh-typography-heading-h3-line-height: var(--oh-font-line-height-snug);
243
+ --oh-typography-heading-h3-letter-spacing: var(--oh-font-letter-spacing-tight);
244
+ --oh-typography-heading-h4-font-size: var(--oh-font-size-xl);
245
+ --oh-typography-heading-h4-font-weight: var(--oh-font-weight-bold);
246
+ --oh-typography-heading-h4-line-height: var(--oh-font-line-height-snug);
247
+ --oh-typography-heading-h4-letter-spacing: var(--oh-font-letter-spacing-normal);
248
+ --oh-typography-heading-h5-font-size: var(--oh-font-size-lg);
249
+ --oh-typography-heading-h5-font-weight: var(--oh-font-weight-bold);
250
+ --oh-typography-heading-h5-line-height: var(--oh-font-line-height-normal);
251
+ --oh-typography-heading-h6-font-size: var(--oh-font-size-base);
252
+ --oh-typography-heading-h6-font-weight: var(--oh-font-weight-bold);
253
+ --oh-typography-heading-h6-line-height: var(--oh-font-line-height-normal);
254
+ --oh-typography-body-font-family: var(--oh-font-family-sans);
255
+ --oh-typography-body-xl-font-size: var(--oh-font-size-xl);
256
+ --oh-typography-body-xl-font-weight: var(--oh-font-weight-normal);
257
+ --oh-typography-body-xl-line-height: var(--oh-font-line-height-normal);
258
+ --oh-typography-body-lg-font-size: var(--oh-font-size-lg);
259
+ --oh-typography-body-lg-font-weight: var(--oh-font-weight-normal);
260
+ --oh-typography-body-lg-line-height: var(--oh-font-line-height-relaxed);
261
+ --oh-typography-body-base-font-size: var(--oh-font-size-base);
262
+ --oh-typography-body-base-font-weight: var(--oh-font-weight-normal);
263
+ --oh-typography-body-base-line-height: var(--oh-font-line-height-normal);
264
+ --oh-typography-body-sm-font-size: var(--oh-font-size-sm);
265
+ --oh-typography-body-sm-font-weight: var(--oh-font-weight-normal);
266
+ --oh-typography-body-sm-line-height: var(--oh-font-line-height-normal);
267
+ --oh-typography-body-sm-letter-spacing: var(--oh-font-letter-spacing-normal);
268
+ --oh-typography-body-xs-font-size: var(--oh-font-size-xs);
269
+ --oh-typography-body-xs-font-weight: var(--oh-font-weight-normal);
270
+ --oh-typography-body-xs-line-height: var(--oh-font-line-height-normal);
271
+ --oh-typography-body-xs-letter-spacing: var(--oh-font-letter-spacing-wide);
272
+ --oh-typography-label-font-family: var(--oh-font-family-sans);
273
+ --oh-typography-label-base-font-size: var(--oh-font-size-sm);
274
+ --oh-typography-label-base-font-weight: var(--oh-font-weight-semibold);
275
+ --oh-typography-label-base-line-height: var(--oh-font-line-height-normal);
276
+ --oh-typography-label-base-letter-spacing: var(--oh-font-letter-spacing-wide);
277
+ --oh-typography-label-sm-font-size: var(--oh-font-size-xs);
278
+ --oh-typography-label-sm-font-weight: var(--oh-font-weight-semibold);
279
+ --oh-typography-label-sm-line-height: var(--oh-font-line-height-normal);
280
+ --oh-typography-label-sm-letter-spacing: var(--oh-font-letter-spacing-widest);
281
+ --oh-typography-eyebrow-font-family: var(--oh-font-family-sans);
282
+ --oh-typography-eyebrow-font-size: var(--oh-font-size-sm);
283
+ --oh-typography-eyebrow-font-weight: var(--oh-font-weight-semibold);
284
+ --oh-typography-eyebrow-letter-spacing: var(--oh-font-letter-spacing-widest);
285
+ --oh-typography-control-font-family: var(--oh-font-family-sans);
286
+ --oh-typography-control-font-weight: var(--oh-font-weight-semibold);
287
+ --oh-typography-control-letter-spacing: var(--oh-font-letter-spacing-wide);
288
+ --oh-typography-control-font-size-sm: var(--oh-font-size-base);
289
+ --oh-typography-control-font-size-md: var(--oh-font-size-base);
290
+ --oh-typography-control-font-size-lg: var(--oh-font-size-lg);
291
+ --oh-typography-emphasis-font-weight: var(--oh-font-weight-bold);
292
+ --oh-typography-code-font-family: var(--oh-font-family-mono);
293
+ --oh-typography-code-font-size: var(--oh-font-size-sm);
294
+ --oh-typography-code-line-height: var(--oh-font-line-height-normal);
295
+ --oh-layout-container-sm: var(--oh-size-container-sm);
296
+ --oh-layout-container-md: var(--oh-size-container-md);
297
+ --oh-layout-container-lg: var(--oh-size-container-lg);
298
+ --oh-layout-container-xl: var(--oh-size-container-xl);
299
+ --oh-shape-control: var(--oh-radius-sm);
300
+ --oh-shape-container: var(--oh-radius-sm);
301
+ --oh-shape-large: var(--oh-radius-md);
302
+ --oh-shape-compact: var(--oh-radius-xs);
303
+ --oh-shape-tight: var(--oh-radius-xs);
304
+ --oh-shape-pill: var(--oh-radius-full);
305
+ --oh-elevation-none: var(--oh-shadow-none);
306
+ --oh-elevation-soft: var(--oh-shadow-none);
307
+ --oh-elevation-medium: var(--oh-shadow-none);
308
+ --oh-elevation-glow: var(--oh-shadow-none);
309
+ --oh-elevation-inset: var(--oh-shadow-none);
310
+ --oh-elevation-surface-flat: var(--oh-shadow-none); /** Flat brand: card surfaces have no shadow */
311
+ --oh-elevation-surface-raised: var(--oh-shadow-none); /** Flat brand: card surfaces have no shadow */
312
+ --oh-elevation-surface-lifted: var(--oh-shadow-none); /** Flat brand: card surfaces have no shadow */
313
+ --oh-elevation-surface-pressed: var(--oh-shadow-none); /** Flat brand: card surfaces have no shadow */
314
+ --oh-elevation-surface-focused: var(--oh-shadow-none); /** Flat brand: card surfaces have no shadow */
315
+ --oh-elevation-surface-featured: var(--oh-shadow-none); /** Flat brand: card surfaces have no shadow */
316
+ --oh-elevation-surface-featured-lifted: var(--oh-shadow-none); /** Flat brand: card surfaces have no shadow */
317
+ --oh-elevation-surface-featured-focused: var(--oh-shadow-none); /** Flat brand: card surfaces have no shadow */
318
+ --oh-stroke-control: var(--oh-border-width-1);
319
+ --oh-stroke-surface: var(--oh-border-width-1);
320
+ --oh-stroke-divider: var(--oh-border-width-1);
321
+ --oh-focus-ring-color: var(--oh-color-grey-850); /** Solid focus outline, as on the site: white on dark, near-black on light */
322
+ --oh-button-size-sm-padding-x: var(--oh-spacing-4);
323
+ --oh-button-size-sm-padding-y: var(--oh-spacing-2);
324
+ --oh-button-size-sm-gap: var(--oh-spacing-2);
325
+ --oh-button-size-md-padding-x: var(--oh-spacing-6);
326
+ --oh-button-size-md-padding-y: var(--oh-spacing-3);
327
+ --oh-button-size-md-gap: var(--oh-spacing-2);
328
+ --oh-button-size-lg-padding-x: var(--oh-spacing-8);
329
+ --oh-button-size-lg-padding-y: var(--oh-spacing-4);
330
+ --oh-button-size-lg-gap: var(--oh-spacing-2-5);
331
+ --oh-button-focus-glow-color: var(--oh-focus-glow-color);
332
+ --oh-input-size-md-padding-x: var(--oh-spacing-4);
333
+ --oh-input-size-md-padding-y: var(--oh-spacing-3);
334
+ --oh-card-base-padding: var(--oh-spacing-5);
335
+ --oh-card-interactive-border-color-hover: var(--oh-color-border-brand);
336
+ --oh-card-sunlit-border-color: var(--oh-color-border-brand);
337
+ --oh-card-sunlit-border-color-hover: var(--oh-color-border-brand-hover);
338
+ --oh-card-section-header-gradient-start: var(--oh-color-surface-sheen);
339
+ --oh-badge-base-padding-x: var(--oh-spacing-2-5);
340
+ --oh-badge-base-padding-y: var(--oh-spacing-1);
341
+ --oh-modal-overlay: var(--oh-color-surface-backdrop);
342
+ --oh-elevation-strong: var(--oh-shadow-overlay);
343
+ --oh-button-base-font-family: var(--oh-typography-control-font-family);
344
+ --oh-button-base-font-weight: var(--oh-typography-control-font-weight);
345
+ --oh-button-base-letter-spacing: var(--oh-typography-control-letter-spacing);
346
+ --oh-button-base-border-radius: var(--oh-shape-control);
347
+ --oh-button-base-border-width: var(--oh-stroke-control);
348
+ --oh-button-base-transition-duration: var(--oh-motion-snappy);
349
+ --oh-button-base-transition-easing: var(--oh-motion-ease-playful);
350
+ --oh-button-size-sm-font-size: var(--oh-typography-control-font-size-sm);
351
+ --oh-button-size-md-font-size: var(--oh-typography-control-font-size-md);
352
+ --oh-button-size-lg-font-size: var(--oh-typography-control-font-size-lg);
353
+ --oh-button-variant-primary-background: var(--oh-color-brand-primary);
354
+ --oh-button-variant-primary-background-hover: var(--oh-color-brand-primary-hover);
355
+ --oh-button-variant-primary-background-active: var(--oh-color-brand-primary-active);
356
+ --oh-button-variant-primary-color: var(--oh-color-text-on-brand);
357
+ --oh-button-variant-primary-border-color: var(--oh-color-brand-primary);
358
+ --oh-button-variant-primary-shadow-color: var(--oh-shadow-primary);
359
+ --oh-button-variant-secondary-background: var(--oh-color-surface-base);
360
+ --oh-button-variant-secondary-background-hover: var(--oh-color-surface-hover);
361
+ --oh-button-variant-secondary-background-active: var(--oh-color-surface-active-pressed);
362
+ --oh-button-variant-secondary-color: var(--oh-color-text-primary);
363
+ --oh-button-variant-secondary-border-color: var(--oh-color-border-emphasis);
364
+ --oh-button-variant-secondary-shadow-color: var(--oh-shadow-secondary);
365
+ --oh-button-variant-accent-background: var(--oh-color-accent-default);
366
+ --oh-button-variant-accent-background-hover: var(--oh-color-accent-hover);
367
+ --oh-button-variant-accent-background-active: var(--oh-color-accent-active);
368
+ --oh-button-variant-accent-color: var(--oh-color-text-on-accent);
369
+ --oh-button-variant-accent-border-color: var(--oh-color-accent-default);
370
+ --oh-button-variant-accent-shadow-color: var(--oh-color-accent-shadow);
371
+ --oh-button-focus-ring-color: var(--oh-focus-ring-color);
372
+ --oh-input-base-font-family: var(--oh-typography-control-font-family);
373
+ --oh-input-base-font-size: var(--oh-typography-control-font-size-md);
374
+ --oh-input-base-line-height: var(--oh-typography-body-base-line-height);
375
+ --oh-input-base-border-radius: var(--oh-shape-control);
376
+ --oh-input-base-border-width: var(--oh-stroke-control);
377
+ --oh-input-base-transition-duration: var(--oh-motion-snappy);
378
+ --oh-input-base-transition-easing: var(--oh-motion-ease-gentle);
379
+ --oh-input-state-default-background: var(--oh-color-surface-base);
380
+ --oh-input-state-default-border-color: var(--oh-color-border-emphasis); /** WCAG 3:1 contrast for UI elements */
381
+ --oh-input-state-default-color: var(--oh-color-text-primary);
382
+ --oh-input-state-default-placeholder-color: var(--oh-color-text-secondary); /** WCAG readable placeholder */
383
+ --oh-input-state-default-shadow-color: var(--oh-shadow-secondary);
384
+ --oh-input-state-hover-border-color: var(--oh-color-border-hover);
385
+ --oh-input-state-focus-background: var(--oh-color-surface-highlight);
386
+ --oh-input-state-focus-border-color: var(--oh-focus-ring-color);
387
+ --oh-input-state-focus-focus-ring-color: var(--oh-focus-ring-color);
388
+ --oh-input-state-error-border-color: var(--oh-color-feedback-error);
389
+ --oh-input-state-error-background: var(--oh-color-feedback-error-subtle);
390
+ --oh-input-state-error-shadow-color: var(--oh-shadow-error);
391
+ --oh-card-base-background: var(--oh-color-surface-raised);
392
+ --oh-card-base-border-radius: var(--oh-shape-large);
393
+ --oh-card-base-border-width: var(--oh-stroke-surface);
394
+ --oh-card-base-border-color: var(--oh-color-border-default);
395
+ --oh-card-base-shadow: var(--oh-elevation-soft);
396
+ --oh-card-interactive-transition-duration: var(--oh-motion-gentle);
397
+ --oh-card-interactive-transition-easing: var(--oh-motion-ease-gentle);
398
+ --oh-card-interactive-background-hover: var(--oh-color-surface-base);
399
+ --oh-card-interactive-shadow-hover: var(--oh-elevation-medium);
400
+ --oh-card-raised-gradient-start: var(--oh-color-surface-highlight);
401
+ --oh-card-raised-gradient-mid: var(--oh-color-surface-base);
402
+ --oh-card-raised-gradient-end: var(--oh-color-surface-raised);
403
+ --oh-card-raised-border-color: var(--oh-color-border-default);
404
+ --oh-card-flat-gradient-start: var(--oh-color-surface-base);
405
+ --oh-card-flat-gradient-end: var(--oh-color-surface-raised);
406
+ --oh-card-flat-border-color: var(--oh-color-border-default);
407
+ --oh-card-sunlit-background: linear-gradient(180deg, var(--oh-color-surface-featured-start) 0%, var(--oh-color-surface-featured-mid) 30%, var(--oh-color-surface-featured-end) 100%);
408
+ --oh-card-sunlit-gradient-start: var(--oh-color-surface-featured-start);
409
+ --oh-card-sunlit-gradient-mid: var(--oh-color-surface-featured-mid);
410
+ --oh-card-sunlit-gradient-end: var(--oh-color-surface-featured-end);
411
+ --oh-card-sunlit-shadow: var(--oh-elevation-medium);
412
+ --oh-card-section-divider-color: var(--oh-color-border-divider);
413
+ --oh-progress-inverse-fill: var(--oh-color-text-inverse);
414
+ --oh-badge-base-font-family: var(--oh-typography-label-font-family);
415
+ --oh-badge-base-font-size: var(--oh-typography-body-base-font-size);
416
+ --oh-badge-base-font-weight: var(--oh-typography-label-base-font-weight);
417
+ --oh-badge-base-letter-spacing: var(--oh-typography-label-base-letter-spacing);
418
+ --oh-badge-base-border-radius: var(--oh-shape-compact);
419
+ --oh-badge-variant-brand-background: var(--oh-color-brand-primary-subtle);
420
+ --oh-badge-variant-brand-color: var(--oh-color-brand-primary);
421
+ --oh-badge-variant-accent-background: var(--oh-color-accent-subtle);
422
+ --oh-badge-variant-accent-color: var(--oh-color-accent-default);
423
+ --oh-badge-variant-success-background: var(--oh-color-feedback-success-subtle);
424
+ --oh-badge-variant-success-color: var(--oh-color-feedback-success);
425
+ --oh-badge-variant-error-background: var(--oh-color-feedback-error-subtle);
426
+ --oh-badge-variant-error-color: var(--oh-color-feedback-error);
427
+ --oh-badge-variant-warning-background: var(--oh-color-feedback-warning-subtle);
428
+ --oh-badge-variant-warning-color: var(--oh-color-feedback-warning);
429
+ --oh-badge-variant-neutral-background: var(--oh-color-surface-inset);
430
+ --oh-badge-variant-neutral-color: var(--oh-color-text-secondary);
431
+ --oh-link-color: var(--oh-color-text-link);
432
+ --oh-link-color-hover: var(--oh-color-text-link-hover);
433
+ }