@oneli8/tokens 1.0.0-beta.2 → 1.0.0-beta.4

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 (27) hide show
  1. package/AGENTS.md +12 -0
  2. package/FONTS-LICENSE.txt +113 -0
  3. package/PRINCIPLES.md +48 -0
  4. package/README.md +75 -69
  5. package/ai-context.json +53 -0
  6. package/build/css/tokens.css +294 -288
  7. package/build/figma/variables.json +63 -0
  8. package/build/manifest.json +4 -4
  9. package/build/tailwind/preset.mjs +42 -41
  10. package/build/tailwind/theme.css +41 -40
  11. package/build/typescript/index.d.ts +1 -1
  12. package/build/typescript/index.js +57 -0
  13. package/fonts/ar-one-sans-latin-ext.woff2 +0 -0
  14. package/fonts/ar-one-sans-latin.woff2 +0 -0
  15. package/fonts/ar-one-sans-vietnamese.woff2 +0 -0
  16. package/fonts/syne-greek.woff2 +0 -0
  17. package/fonts/syne-latin-ext.woff2 +0 -0
  18. package/fonts/syne-latin.woff2 +0 -0
  19. package/fonts.css +63 -0
  20. package/overrides.example.css +53 -0
  21. package/package.json +56 -16
  22. package/scripts/build.mjs +60 -5
  23. package/scripts/test.mjs +5 -5
  24. package/src/component.json +904 -155
  25. package/src/figma-code-syntax.txt +551 -0
  26. package/src/primitive.json +1057 -163
  27. package/src/semantic.json +825 -126
package/build/css/tokens.css CHANGED
@@ -116,8 +116,9 @@
116
116
  --ol8-dimension-scale-072: 72px;
117
117
  --ol8-dimension-scale-084: 84px;
118
118
  --ol8-dimension-scale-096: 96px;
119
- --ol8-font-family-display: Syne;
120
- --ol8-font-family-functional: AR One Sans;
119
+ --ol8-font-family-display: Syne, var(--ol8-font-family-fallback);
120
+ --ol8-font-family-functional: "AR One Sans", var(--ol8-font-family-fallback);
121
+ --ol8-font-family-fallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
121
122
  --ol8-font-weight-regular: 450;
122
123
  --ol8-font-weight-semibold: 600;
123
124
  --ol8-font-weight-bold: 690;
@@ -142,9 +143,9 @@
142
143
  --ol8-font-tracking-tighter: -0.03em;
143
144
  --ol8-font-tracking-tight: -0.025em;
144
145
  --ol8-font-tracking-snug: -0.02em;
145
- --ol8-font-tracking-display-soft: -0.015em;
146
- --ol8-font-tracking-title-tight: -0.01em;
147
- --ol8-font-tracking-title-soft: -0.005em;
146
+ --ol8-font-tracking-displaysoft: -0.015em;
147
+ --ol8-font-tracking-titletight: -0.01em;
148
+ --ol8-font-tracking-titlesoft: -0.005em;
148
149
  --ol8-font-tracking-normal: 0em;
149
150
  --ol8-font-tracking-open: 0.01em;
150
151
  --ol8-font-axis-arrr-baseline: 10;
@@ -210,56 +211,57 @@
210
211
  --ol8-color-border-disabled: var(--ol8-color-neutral-480);
211
212
  --ol8-color-focus-inner: var(--ol8-color-primary-030);
212
213
  --ol8-color-focus-outer: var(--ol8-color-primary-930);
213
- --ol8-color-action-primary-default: var(--ol8-color-primary-600);
214
- --ol8-color-action-primary-hover: var(--ol8-color-primary-720);
215
- --ol8-color-action-primary-pressed: var(--ol8-color-primary-840);
216
- --ol8-color-action-primary-content: var(--ol8-color-neutral-030);
217
- --ol8-color-action-primary-disabled: var(--ol8-color-neutral-090);
218
- --ol8-color-action-primary-disabled-content: var(--ol8-color-neutral-480);
219
- --ol8-color-action-secondary-surface-default: transparent;
220
- --ol8-color-action-secondary-surface-hover: var(--ol8-color-primary-030);
221
- --ol8-color-action-secondary-surface-pressed: var(--ol8-color-primary-060);
222
- --ol8-color-action-secondary-surface-disabled: transparent;
223
- --ol8-color-action-secondary-content-default: var(--ol8-color-primary-600);
224
- --ol8-color-action-secondary-content-hover: var(--ol8-color-primary-720);
225
- --ol8-color-action-secondary-content-pressed: var(--ol8-color-primary-840);
226
- --ol8-color-action-secondary-content-disabled: var(--ol8-color-neutral-480);
227
- --ol8-color-action-quiet-surface-default: transparent;
228
- --ol8-color-action-quiet-surface-hover: var(--ol8-color-primary-030);
229
- --ol8-color-action-quiet-surface-pressed: var(--ol8-color-primary-060);
230
- --ol8-color-action-quiet-surface-disabled: transparent;
231
- --ol8-color-action-quiet-content-default: var(--ol8-color-primary-600);
232
- --ol8-color-action-quiet-content-hover: var(--ol8-color-primary-720);
233
- --ol8-color-action-quiet-content-pressed: var(--ol8-color-primary-840);
234
- --ol8-color-action-quiet-content-disabled: var(--ol8-color-neutral-480);
214
+ --ol8-color-actionprimary-default: var(--ol8-color-primary-600);
215
+ --ol8-color-actionprimary-hover: var(--ol8-color-primary-720);
216
+ --ol8-color-actionprimary-pressed: var(--ol8-color-primary-840);
217
+ --ol8-color-actionprimary-content: var(--ol8-color-neutral-030);
218
+ --ol8-color-actionprimary-disabled: var(--ol8-color-neutral-090);
219
+ --ol8-color-actionprimary-disabledcontent: var(--ol8-color-neutral-480);
220
+ --ol8-color-actionsecondary-surfacedefault: transparent;
221
+ --ol8-color-actionsecondary-surfacehover: var(--ol8-color-primary-030);
222
+ --ol8-color-actionsecondary-surfacepressed: var(--ol8-color-primary-060);
223
+ --ol8-color-actionsecondary-surfacedisabled: transparent;
224
+ --ol8-color-actionsecondary-contentdefault: var(--ol8-color-primary-600);
225
+ --ol8-color-actionsecondary-contenthover: var(--ol8-color-primary-720);
226
+ --ol8-color-actionsecondary-contentpressed: var(--ol8-color-primary-840);
227
+ --ol8-color-actionsecondary-contentdisabled: var(--ol8-color-neutral-480);
228
+ --ol8-color-actionquiet-surfacedefault: transparent;
229
+ --ol8-color-actionquiet-surfacehover: var(--ol8-color-primary-030);
230
+ --ol8-color-actionquiet-surfacepressed: var(--ol8-color-primary-060);
231
+ --ol8-color-actionquiet-surfacedisabled: transparent;
232
+ --ol8-color-actionquiet-contentdefault: var(--ol8-color-primary-600);
233
+ --ol8-color-actionquiet-contenthover: var(--ol8-color-primary-720);
234
+ --ol8-color-actionquiet-contentpressed: var(--ol8-color-primary-840);
235
+ --ol8-color-actionquiet-contentdisabled: var(--ol8-color-neutral-480);
235
236
  --ol8-color-icon-button-secondary-hover-surface: var(--ol8-color-primary-060);
236
237
  --ol8-color-icon-button-quiet-hover-surface: var(--ol8-color-primary-060);
237
238
  --ol8-color-navigation-badge-surface-default: var(--ol8-color-surface-raised);
238
239
  --ol8-color-navigation-badge-content-default: var(--ol8-color-text-secondary);
239
240
  --ol8-color-navigation-badge-surface-selected: var(--ol8-color-selection-content);
240
241
  --ol8-color-navigation-badge-content-selected: var(--ol8-color-selection-surface);
241
- --ol8-color-navigation-badge-surface-gem: var(--ol8-material-gem-color-cut-edge-high);
242
+ --ol8-color-navigation-badge-surface-gem: var(--ol8-material-gem-color-cutedge-high);
242
243
  --ol8-color-navigation-badge-content-gem: var(--ol8-color-text-primary);
243
- --ol8-color-action-destructive-default: var(--ol8-color-red-600);
244
- --ol8-color-action-destructive-hover: var(--ol8-color-red-720);
245
- --ol8-color-action-destructive-pressed: var(--ol8-color-red-840);
246
- --ol8-color-action-destructive-content: var(--ol8-color-neutral-030);
247
- --ol8-color-action-destructive-disabled: var(--ol8-color-neutral-090);
248
- --ol8-color-action-destructive-disabled-content: var(--ol8-color-neutral-480);
249
- --ol8-color-feedback-informative-surface: var(--ol8-color-cyan-720);
250
- --ol8-color-feedback-informative-content: var(--ol8-color-neutral-030);
251
- --ol8-color-feedback-informative-inline-content: var(--ol8-color-blue-600);
252
- --ol8-color-feedback-positive-surface: var(--ol8-color-green-600);
253
- --ol8-color-feedback-positive-content: var(--ol8-color-neutral-030);
254
- --ol8-color-feedback-positive-inline-content: var(--ol8-color-green-600);
255
- --ol8-color-feedback-caution-surface: var(--ol8-color-yellow-090);
256
- --ol8-color-feedback-caution-content: var(--ol8-color-neutral-840);
257
- --ol8-color-feedback-caution-inline-content: var(--ol8-color-yellow-600);
258
- --ol8-color-feedback-critical-surface: var(--ol8-color-red-600);
259
- --ol8-color-feedback-critical-content: var(--ol8-color-neutral-030);
260
- --ol8-color-feedback-critical-inline-content: var(--ol8-color-red-480);
244
+ --ol8-color-actiondestructive-default: var(--ol8-color-red-600);
245
+ --ol8-color-actiondestructive-hover: var(--ol8-color-red-720);
246
+ --ol8-color-actiondestructive-pressed: var(--ol8-color-red-840);
247
+ --ol8-color-actiondestructive-content: var(--ol8-color-neutral-030);
248
+ --ol8-color-actiondestructive-disabled: var(--ol8-color-neutral-090);
249
+ --ol8-color-actiondestructive-disabledcontent: var(--ol8-color-neutral-480);
250
+ --ol8-color-feedbackinformative-surface: var(--ol8-color-cyan-720);
251
+ --ol8-color-feedbackinformative-content: var(--ol8-color-neutral-030);
252
+ --ol8-color-feedbackinformative-inlinecontent: var(--ol8-color-blue-600);
253
+ --ol8-color-feedbackpositive-surface: var(--ol8-color-green-600);
254
+ --ol8-color-feedbackpositive-content: var(--ol8-color-neutral-030);
255
+ --ol8-color-feedbackpositive-inlinecontent: var(--ol8-color-green-600);
256
+ --ol8-color-feedbackcaution-surface: var(--ol8-color-yellow-090);
257
+ --ol8-color-feedbackcaution-content: var(--ol8-color-neutral-840);
258
+ --ol8-color-feedbackcaution-inlinecontent: var(--ol8-color-yellow-600);
259
+ --ol8-color-feedbackcritical-surface: var(--ol8-color-red-600);
260
+ --ol8-color-feedbackcritical-content: var(--ol8-color-neutral-030);
261
+ --ol8-color-feedbackcritical-inlinecontent: var(--ol8-color-red-480);
261
262
  --ol8-color-selection-surface: var(--ol8-color-primary-060);
262
263
  --ol8-color-selection-content: var(--ol8-color-primary-840);
264
+ --ol8-color-scrim-pressed: color-mix(in srgb, var(--ol8-color-cyan-840) 24%, transparent);
263
265
  --ol8-elevation-surface-flat: none;
264
266
  --ol8-elevation-surface-raised: 0px 3px 6px 0px rgb(22 63 75 / 0.12);
265
267
  --ol8-elevation-surface-floating: 0px 6px 18px -3px rgb(22 63 75 / 0.18), 0px 3px 6px 0px rgb(22 63 75 / 0.12);
@@ -270,85 +272,88 @@
270
272
  --ol8-layer-stack-overlay: 600;
271
273
  --ol8-layer-stack-modal: 900;
272
274
  --ol8-layer-stack-notification: 1200;
273
- --ol8-material-control-gem-primary-start: var(--ol8-color-primary-480);
274
- --ol8-material-control-gem-primary-mid: var(--ol8-color-primary-600);
275
- --ol8-material-control-gem-primary-end: var(--ol8-color-primary-720);
276
- --ol8-material-control-gem-primary-hover-start: var(--ol8-color-primary-600);
277
- --ol8-material-control-gem-primary-hover-mid: var(--ol8-color-primary-720);
278
- --ol8-material-control-gem-primary-hover-end: var(--ol8-color-primary-840);
279
- --ol8-material-control-gem-primary-loading-start: var(--ol8-color-primary-720);
280
- --ol8-material-control-gem-primary-loading-mid: var(--ol8-color-primary-840);
281
- --ol8-material-control-gem-primary-loading-end: var(--ol8-color-primary-930);
282
- --ol8-material-control-gem-primary-content: var(--ol8-color-neutral-030);
283
- --ol8-material-control-gem-secondary-high: color-mix(in srgb, var(--ol8-color-neutral-030) 22%, transparent);
284
- --ol8-material-control-gem-secondary-mid: color-mix(in srgb, var(--ol8-color-neutral-030) 5%, transparent);
285
- --ol8-material-control-gem-secondary-low: color-mix(in srgb, var(--ol8-color-neutral-030) 12%, transparent);
286
- --ol8-material-control-gem-secondary-hover-high: color-mix(in srgb, var(--ol8-color-neutral-030) 30%, transparent);
287
- --ol8-material-control-gem-secondary-hover-mid: color-mix(in srgb, var(--ol8-color-neutral-030) 9%, transparent);
288
- --ol8-material-control-gem-secondary-hover-low: color-mix(in srgb, var(--ol8-color-neutral-030) 18%, transparent);
289
- --ol8-material-control-gem-secondary-loading-high: color-mix(in srgb, var(--ol8-color-neutral-030) 39%, transparent);
290
- --ol8-material-control-gem-secondary-loading-mid: color-mix(in srgb, var(--ol8-color-neutral-030) 12%, transparent);
291
- --ol8-material-control-gem-secondary-loading-low: color-mix(in srgb, var(--ol8-color-neutral-030) 24%, transparent);
292
- --ol8-material-control-gem-secondary-content: var(--ol8-color-neutral-030);
293
- --ol8-material-control-gem-rim-default: color-mix(in srgb, var(--ol8-color-neutral-030) 24%, transparent);
294
- --ol8-material-control-gem-rim-hover: color-mix(in srgb, var(--ol8-color-neutral-030) 36%, transparent);
295
- --ol8-material-control-gem-rim-specular: color-mix(in srgb, var(--ol8-color-neutral-030) 54%, transparent);
296
- --ol8-material-control-gem-blur: 12px;
297
- --ol8-material-gem-color-quiet-environmental-face: color-mix(in srgb, var(--ol8-color-neutral-030) 48%, transparent);
298
- --ol8-material-gem-color-quiet-stabilized-face: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
299
- --ol8-material-gem-color-quiet-opaque-equivalent: var(--ol8-color-neutral-030);
300
- --ol8-material-gem-color-cut-edge-outer-high: color-mix(in srgb, var(--ol8-color-neutral-060) 93%, transparent);
301
- --ol8-material-gem-color-cut-edge-outer-mid: color-mix(in srgb, var(--ol8-color-blue-120) 48%, transparent);
302
- --ol8-material-gem-color-cut-edge-outer-low: color-mix(in srgb, var(--ol8-color-neutral-060) 3%, transparent);
303
- --ol8-material-gem-color-cut-edge-outer-accent: color-mix(in srgb, var(--ol8-color-cyan-360) 36%, transparent);
304
- --ol8-material-gem-color-cut-edge-high: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
305
- --ol8-material-gem-color-cut-edge-mid: color-mix(in srgb, var(--ol8-color-blue-060) 36%, transparent);
306
- --ol8-material-gem-color-cut-edge-low: color-mix(in srgb, var(--ol8-color-neutral-060) 3%, transparent);
307
- --ol8-material-gem-color-cut-edge-shadow: color-mix(in srgb, var(--ol8-color-blue-930) 16%, transparent);
308
- --ol8-material-gem-color-inner-thin-cut-face: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
309
- --ol8-material-gem-color-inner-thin-cut-high: color-mix(in srgb, var(--ol8-color-neutral-060) 54%, transparent);
310
- --ol8-material-gem-color-inner-thin-cut-mid: color-mix(in srgb, var(--ol8-color-blue-120) 18%, transparent);
311
- --ol8-material-gem-color-inner-thin-cut-low: color-mix(in srgb, var(--ol8-color-neutral-060) 3%, transparent);
275
+ --ol8-material-control-gem--primary-start: var(--ol8-color-primary-480);
276
+ --ol8-material-control-gem--primary-mid: var(--ol8-color-primary-600);
277
+ --ol8-material-control-gem--primary-end: var(--ol8-color-primary-720);
278
+ --ol8-material-control-gem--primary-hover-start: var(--ol8-color-primary-600);
279
+ --ol8-material-control-gem--primary-hover-mid: var(--ol8-color-primary-720);
280
+ --ol8-material-control-gem--primary-hover-end: var(--ol8-color-primary-840);
281
+ --ol8-material-control-gem--primary-loading-start: var(--ol8-color-primary-720);
282
+ --ol8-material-control-gem--primary-loading-mid: var(--ol8-color-primary-840);
283
+ --ol8-material-control-gem--primary-loading-end: var(--ol8-color-primary-930);
284
+ --ol8-material-control-gem--primary-content: var(--ol8-color-neutral-030);
285
+ --ol8-material-control-gem--secondary-high: color-mix(in srgb, var(--ol8-color-neutral-030) 22%, transparent);
286
+ --ol8-material-control-gem--secondary-mid: color-mix(in srgb, var(--ol8-color-neutral-030) 5%, transparent);
287
+ --ol8-material-control-gem--secondary-low: color-mix(in srgb, var(--ol8-color-neutral-030) 12%, transparent);
288
+ --ol8-material-control-gem--secondary-hover-high: color-mix(in srgb, var(--ol8-color-neutral-030) 30%, transparent);
289
+ --ol8-material-control-gem--secondary-hover-mid: color-mix(in srgb, var(--ol8-color-neutral-030) 9%, transparent);
290
+ --ol8-material-control-gem--secondary-hover-low: color-mix(in srgb, var(--ol8-color-neutral-030) 18%, transparent);
291
+ --ol8-material-control-gem--secondary-loading-high: color-mix(in srgb, var(--ol8-color-neutral-030) 39%, transparent);
292
+ --ol8-material-control-gem--secondary-loading-mid: color-mix(in srgb, var(--ol8-color-neutral-030) 12%, transparent);
293
+ --ol8-material-control-gem--secondary-loading-low: color-mix(in srgb, var(--ol8-color-neutral-030) 24%, transparent);
294
+ --ol8-material-control-gem--secondary-content: var(--ol8-color-neutral-030);
295
+ --ol8-material-control-gem--rim-default: color-mix(in srgb, var(--ol8-color-neutral-030) 24%, transparent);
296
+ --ol8-material-control-gem--rim-hover: color-mix(in srgb, var(--ol8-color-neutral-030) 36%, transparent);
297
+ --ol8-material-control-gem--rim-specular: color-mix(in srgb, var(--ol8-color-neutral-030) 54%, transparent);
298
+ --ol8-material-control-gem--blur: 12px;
299
+ --ol8-material-control-gem-gradient-start: 14.639%;
300
+ --ol8-material-control-gem-gradient-mid: 48.586%;
301
+ --ol8-material-control-gem-gradient-end: 85.361%;
302
+ --ol8-material-gem-color-quiet-environmentalface: color-mix(in srgb, var(--ol8-color-neutral-030) 48%, transparent);
303
+ --ol8-material-gem-color-quiet-stabilizedface: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
304
+ --ol8-material-gem-color-quiet-opaqueequivalent: var(--ol8-color-neutral-030);
305
+ --ol8-material-gem-color-cutedge-outerhigh: color-mix(in srgb, var(--ol8-color-neutral-060) 93%, transparent);
306
+ --ol8-material-gem-color-cutedge-outermid: color-mix(in srgb, var(--ol8-color-blue-120) 48%, transparent);
307
+ --ol8-material-gem-color-cutedge-outerlow: color-mix(in srgb, var(--ol8-color-neutral-060) 3%, transparent);
308
+ --ol8-material-gem-color-cutedge-outeraccent: color-mix(in srgb, var(--ol8-color-cyan-360) 36%, transparent);
309
+ --ol8-material-gem-color-cutedge-high: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
310
+ --ol8-material-gem-color-cutedge-mid: color-mix(in srgb, var(--ol8-color-blue-060) 36%, transparent);
311
+ --ol8-material-gem-color-cutedge-low: color-mix(in srgb, var(--ol8-color-neutral-060) 3%, transparent);
312
+ --ol8-material-gem-color-cutedge-shadow: color-mix(in srgb, var(--ol8-color-blue-930) 16%, transparent);
313
+ --ol8-material-gem-color-innerthincut-face: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
314
+ --ol8-material-gem-color-innerthincut-high: color-mix(in srgb, var(--ol8-color-neutral-060) 54%, transparent);
315
+ --ol8-material-gem-color-innerthincut-mid: color-mix(in srgb, var(--ol8-color-blue-120) 18%, transparent);
316
+ --ol8-material-gem-color-innerthincut-low: color-mix(in srgb, var(--ol8-color-neutral-060) 3%, transparent);
312
317
  --ol8-material-gem-color-facet-cool: color-mix(in srgb, var(--ol8-color-blue-600) 18%, transparent);
313
318
  --ol8-material-gem-color-facet-warm: color-mix(in srgb, var(--ol8-color-orange-240) 12%, transparent);
314
- --ol8-material-gem-color-family-emerald-environmental-face: color-mix(in srgb, var(--ol8-color-green-930) 48%, transparent);
315
- --ol8-material-gem-color-family-emerald-stabilized-face: color-mix(in srgb, var(--ol8-color-green-930) 27%, transparent);
319
+ --ol8-material-gem-color-family-emerald-environmentalface: color-mix(in srgb, var(--ol8-color-green-930) 48%, transparent);
320
+ --ol8-material-gem-color-family-emerald-stabilizedface: color-mix(in srgb, var(--ol8-color-green-930) 27%, transparent);
316
321
  --ol8-material-gem-color-family-emerald-edge: color-mix(in srgb, var(--ol8-color-green-240) 66%, transparent);
317
- --ol8-material-gem-color-family-emerald-inner-high: color-mix(in srgb, var(--ol8-color-green-090) 36%, transparent);
318
- --ol8-material-gem-color-family-emerald-inner-mid: color-mix(in srgb, var(--ol8-color-green-240) 18%, transparent);
319
- --ol8-material-gem-color-family-emerald-inner-low: color-mix(in srgb, var(--ol8-color-green-090) 3%, transparent);
320
- --ol8-material-gem-color-family-emerald-opaque-equivalent: var(--ol8-color-green-930);
321
- --ol8-material-gem-color-family-ruby-environmental-face: color-mix(in srgb, var(--ol8-color-red-930) 48%, transparent);
322
- --ol8-material-gem-color-family-ruby-stabilized-face: color-mix(in srgb, var(--ol8-color-red-930) 27%, transparent);
322
+ --ol8-material-gem-color-family-emerald-innerhigh: color-mix(in srgb, var(--ol8-color-green-090) 36%, transparent);
323
+ --ol8-material-gem-color-family-emerald-innermid: color-mix(in srgb, var(--ol8-color-green-240) 18%, transparent);
324
+ --ol8-material-gem-color-family-emerald-innerlow: color-mix(in srgb, var(--ol8-color-green-090) 3%, transparent);
325
+ --ol8-material-gem-color-family-emerald-opaqueequivalent: var(--ol8-color-green-930);
326
+ --ol8-material-gem-color-family-ruby-environmentalface: color-mix(in srgb, var(--ol8-color-red-930) 48%, transparent);
327
+ --ol8-material-gem-color-family-ruby-stabilizedface: color-mix(in srgb, var(--ol8-color-red-930) 27%, transparent);
323
328
  --ol8-material-gem-color-family-ruby-edge: color-mix(in srgb, var(--ol8-color-red-240) 66%, transparent);
324
- --ol8-material-gem-color-family-ruby-inner-high: color-mix(in srgb, var(--ol8-color-red-090) 36%, transparent);
325
- --ol8-material-gem-color-family-ruby-inner-mid: color-mix(in srgb, var(--ol8-color-red-240) 18%, transparent);
326
- --ol8-material-gem-color-family-ruby-inner-low: color-mix(in srgb, var(--ol8-color-red-090) 3%, transparent);
327
- --ol8-material-gem-color-family-ruby-opaque-equivalent: var(--ol8-color-red-930);
328
- --ol8-material-gem-color-family-sapphire-environmental-face: color-mix(in srgb, var(--ol8-color-blue-930) 48%, transparent);
329
- --ol8-material-gem-color-family-sapphire-stabilized-face: color-mix(in srgb, var(--ol8-color-blue-930) 30%, transparent);
329
+ --ol8-material-gem-color-family-ruby-innerhigh: color-mix(in srgb, var(--ol8-color-red-090) 36%, transparent);
330
+ --ol8-material-gem-color-family-ruby-innermid: color-mix(in srgb, var(--ol8-color-red-240) 18%, transparent);
331
+ --ol8-material-gem-color-family-ruby-innerlow: color-mix(in srgb, var(--ol8-color-red-090) 3%, transparent);
332
+ --ol8-material-gem-color-family-ruby-opaqueequivalent: var(--ol8-color-red-930);
333
+ --ol8-material-gem-color-family-sapphire-environmentalface: color-mix(in srgb, var(--ol8-color-blue-930) 48%, transparent);
334
+ --ol8-material-gem-color-family-sapphire-stabilizedface: color-mix(in srgb, var(--ol8-color-blue-930) 30%, transparent);
330
335
  --ol8-material-gem-color-family-sapphire-edge: color-mix(in srgb, var(--ol8-color-blue-240) 66%, transparent);
331
- --ol8-material-gem-color-family-sapphire-inner-high: color-mix(in srgb, var(--ol8-color-blue-060) 39%, transparent);
332
- --ol8-material-gem-color-family-sapphire-inner-mid: color-mix(in srgb, var(--ol8-color-blue-240) 18%, transparent);
333
- --ol8-material-gem-color-family-sapphire-inner-low: color-mix(in srgb, var(--ol8-color-blue-060) 3%, transparent);
334
- --ol8-material-gem-color-family-sapphire-opaque-equivalent: var(--ol8-color-blue-930);
335
- --ol8-material-gem-color-family-amethyst-environmental-face: color-mix(in srgb, var(--ol8-color-violet-930) 48%, transparent);
336
- --ol8-material-gem-color-family-amethyst-stabilized-face: color-mix(in srgb, var(--ol8-color-violet-930) 27%, transparent);
336
+ --ol8-material-gem-color-family-sapphire-innerhigh: color-mix(in srgb, var(--ol8-color-blue-060) 39%, transparent);
337
+ --ol8-material-gem-color-family-sapphire-innermid: color-mix(in srgb, var(--ol8-color-blue-240) 18%, transparent);
338
+ --ol8-material-gem-color-family-sapphire-innerlow: color-mix(in srgb, var(--ol8-color-blue-060) 3%, transparent);
339
+ --ol8-material-gem-color-family-sapphire-opaqueequivalent: var(--ol8-color-blue-930);
340
+ --ol8-material-gem-color-family-amethyst-environmentalface: color-mix(in srgb, var(--ol8-color-violet-930) 48%, transparent);
341
+ --ol8-material-gem-color-family-amethyst-stabilizedface: color-mix(in srgb, var(--ol8-color-violet-930) 27%, transparent);
337
342
  --ol8-material-gem-color-family-amethyst-edge: color-mix(in srgb, var(--ol8-color-violet-240) 66%, transparent);
338
- --ol8-material-gem-color-family-amethyst-inner-high: color-mix(in srgb, var(--ol8-color-violet-090) 36%, transparent);
339
- --ol8-material-gem-color-family-amethyst-inner-mid: color-mix(in srgb, var(--ol8-color-violet-240) 18%, transparent);
340
- --ol8-material-gem-color-family-amethyst-inner-low: color-mix(in srgb, var(--ol8-color-violet-090) 3%, transparent);
341
- --ol8-material-gem-color-family-amethyst-opaque-equivalent: var(--ol8-color-violet-930);
343
+ --ol8-material-gem-color-family-amethyst-innerhigh: color-mix(in srgb, var(--ol8-color-violet-090) 36%, transparent);
344
+ --ol8-material-gem-color-family-amethyst-innermid: color-mix(in srgb, var(--ol8-color-violet-240) 18%, transparent);
345
+ --ol8-material-gem-color-family-amethyst-innerlow: color-mix(in srgb, var(--ol8-color-violet-090) 3%, transparent);
346
+ --ol8-material-gem-color-family-amethyst-opaqueequivalent: var(--ol8-color-violet-930);
342
347
  --ol8-material-gem-blur-environmental: 18px;
343
348
  --ol8-material-gem-blur-stabilized: 12px;
344
349
  --ol8-material-gem-opacity-environmental: 0.48;
345
- --ol8-material-gem-opacity-edge-high: 0.93;
346
- --ol8-material-gem-opacity-edge-low: 0.03;
347
- --ol8-material-gem-opacity-cut-light: 0.72;
348
- --ol8-material-gem-opacity-cut-dark: 0.54;
349
- --ol8-material-gem-spacing-slab-inset: 30px;
350
- --ol8-material-gem-spacing-cluster-gap: 24px;
351
- --ol8-material-gem-spacing-inner-separation: 24px;
350
+ --ol8-material-gem-opacity-edgehigh: 0.93;
351
+ --ol8-material-gem-opacity-edgelow: 0.03;
352
+ --ol8-material-gem-opacity-cutlight: 0.72;
353
+ --ol8-material-gem-opacity-cutdark: 0.54;
354
+ --ol8-material-gem-spacing-slabinset: 30px;
355
+ --ol8-material-gem-spacing-clustergap: 24px;
356
+ --ol8-material-gem-spacing-innerseparation: 24px;
352
357
  --ol8-spacing-none: 0px;
353
358
  --ol8-spacing-inline-minimal: 3px;
354
359
  --ol8-spacing-inline-related: 6px;
@@ -413,51 +418,51 @@
413
418
  --ol8-border-width-hairline: 1px;
414
419
  --ol8-border-width-standard: 2px;
415
420
  --ol8-border-width-strong: 3px;
416
- --ol8-focus-ring-inner-width: 3px;
417
- --ol8-focus-ring-outer-width: 3px;
418
- --ol8-focus-ring-total-width: 6px;
421
+ --ol8-focus-ring-innerwidth: 3px;
422
+ --ol8-focus-ring-outerwidth: 3px;
423
+ --ol8-focus-ring-totalwidth: 6px;
419
424
  --ol8-focus-ring-offset: 3px;
420
- --ol8-typography-display-large-font-family: Syne;
425
+ --ol8-typography-display-large-font-family: var(--ol8-font-family-display);
421
426
  --ol8-typography-display-large-font-size: 66px;
422
427
  --ol8-typography-display-large-font-weight: 690;
423
428
  --ol8-typography-display-large-letter-spacing: -0.02em;
424
429
  --ol8-typography-display-large-line-height: 72px;
425
- --ol8-typography-display-medium-font-family: Syne;
430
+ --ol8-typography-display-medium-font-family: var(--ol8-font-family-display);
426
431
  --ol8-typography-display-medium-font-size: 51px;
427
432
  --ol8-typography-display-medium-font-weight: 690;
428
433
  --ol8-typography-display-medium-letter-spacing: -0.015em;
429
434
  --ol8-typography-display-medium-line-height: 60px;
430
- --ol8-typography-display-small-font-family: Syne;
435
+ --ol8-typography-display-small-font-family: var(--ol8-font-family-display);
431
436
  --ol8-typography-display-small-font-size: 39px;
432
437
  --ol8-typography-display-small-font-weight: 600;
433
438
  --ol8-typography-display-small-letter-spacing: -0.01em;
434
439
  --ol8-typography-display-small-line-height: 48px;
435
- --ol8-typography-title-large-font-family: AR One Sans;
440
+ --ol8-typography-title-large-font-family: var(--ol8-font-family-functional);
436
441
  --ol8-typography-title-large-font-size: 39px;
437
442
  --ol8-typography-title-large-font-weight: 600;
438
443
  --ol8-typography-title-large-letter-spacing: -0.005em;
439
444
  --ol8-typography-title-large-line-height: 48px;
440
- --ol8-typography-title-medium-font-family: AR One Sans;
445
+ --ol8-typography-title-medium-font-family: var(--ol8-font-family-functional);
441
446
  --ol8-typography-title-medium-font-size: 30px;
442
447
  --ol8-typography-title-medium-font-weight: 600;
443
448
  --ol8-typography-title-medium-letter-spacing: 0em;
444
449
  --ol8-typography-title-medium-line-height: 39px;
445
- --ol8-typography-title-small-font-family: AR One Sans;
450
+ --ol8-typography-title-small-font-family: var(--ol8-font-family-functional);
446
451
  --ol8-typography-title-small-font-size: 21px;
447
452
  --ol8-typography-title-small-font-weight: 600;
448
453
  --ol8-typography-title-small-letter-spacing: 0em;
449
454
  --ol8-typography-title-small-line-height: 30px;
450
- --ol8-typography-body-large-font-family: AR One Sans;
455
+ --ol8-typography-body-large-font-family: var(--ol8-font-family-functional);
451
456
  --ol8-typography-body-large-font-size: 21px;
452
457
  --ol8-typography-body-large-font-weight: 450;
453
458
  --ol8-typography-body-large-letter-spacing: 0em;
454
459
  --ol8-typography-body-large-line-height: 30px;
455
- --ol8-typography-body-medium-font-family: AR One Sans;
460
+ --ol8-typography-body-medium-font-family: var(--ol8-font-family-functional);
456
461
  --ol8-typography-body-medium-font-size: 16px;
457
462
  --ol8-typography-body-medium-font-weight: 450;
458
463
  --ol8-typography-body-medium-letter-spacing: 0em;
459
464
  --ol8-typography-body-medium-line-height: 24px;
460
- --ol8-typography-body-small-font-family: AR One Sans;
465
+ --ol8-typography-body-small-font-family: var(--ol8-font-family-functional);
461
466
  --ol8-typography-body-small-font-size: 12px;
462
467
  --ol8-typography-body-small-font-weight: 450;
463
468
  --ol8-typography-body-small-letter-spacing: 0.01em;
@@ -485,10 +490,10 @@
485
490
  --ol8-component-button-height-standard: 42px;
486
491
  --ol8-component-button-height-comfortable: 48px;
487
492
  --ol8-component-button-height-large: 60px;
488
- --ol8-component-button-padding-inline-compact: 12px;
489
- --ol8-component-button-padding-inline-standard: 15px;
490
- --ol8-component-button-padding-inline-comfortable: 18px;
491
- --ol8-component-button-padding-inline-large: 24px;
493
+ --ol8-component-button-paddinginline-compact: 12px;
494
+ --ol8-component-button-paddinginline-standard: 15px;
495
+ --ol8-component-button-paddinginline-comfortable: 18px;
496
+ --ol8-component-button-paddinginline-large: 24px;
492
497
  --ol8-component-button-gap-compact: 6px;
493
498
  --ol8-component-button-gap-comfortable: 9px;
494
499
  --ol8-component-button-icon-compact: 18px;
@@ -501,85 +506,86 @@
501
506
  --ol8-component-button-radius-standard: 9px;
502
507
  --ol8-component-button-radius-comfortable: 12px;
503
508
  --ol8-component-button-radius-large: 12px;
504
- --ol8-component-button-secondary-boundary: 2px;
505
- --ol8-component-icon-button-box-compact: 36px;
506
- --ol8-component-icon-button-box-standard: 42px;
507
- --ol8-component-icon-button-box-comfortable: 48px;
508
- --ol8-component-icon-button-box-large: 60px;
509
- --ol8-component-icon-button-artwork-compact: 18px;
510
- --ol8-component-icon-button-artwork-standard: 18px;
511
- --ol8-component-icon-button-artwork-comfortable: 24px;
512
- --ol8-component-icon-button-artwork-large: 36px;
513
- --ol8-component-icon-button-target-compact: 48px;
514
- --ol8-component-icon-button-target-standard: 48px;
515
- --ol8-component-icon-button-target-comfortable: 48px;
516
- --ol8-component-icon-button-target-large: 60px;
517
- --ol8-component-icon-button-radius-compact: 9px;
518
- --ol8-component-icon-button-radius-standard: 12px;
519
- --ol8-component-icon-button-radius-comfortable: 12px;
520
- --ol8-component-icon-button-radius-large: 18px;
521
- --ol8-component-icon-button-radius-circle: 999px;
509
+ --ol8-component-button-secondaryboundary: 2px;
510
+ --ol8-component-iconbutton-box-compact: 36px;
511
+ --ol8-component-iconbutton-box-standard: 42px;
512
+ --ol8-component-iconbutton-box-comfortable: 48px;
513
+ --ol8-component-iconbutton-box-large: 60px;
514
+ --ol8-component-iconbutton-artwork-compact: 18px;
515
+ --ol8-component-iconbutton-artwork-standard: 18px;
516
+ --ol8-component-iconbutton-artwork-comfortable: 24px;
517
+ --ol8-component-iconbutton-artwork-large: 36px;
518
+ --ol8-component-iconbutton-target-compact: 48px;
519
+ --ol8-component-iconbutton-target-standard: 48px;
520
+ --ol8-component-iconbutton-target-comfortable: 48px;
521
+ --ol8-component-iconbutton-target-large: 60px;
522
+ --ol8-component-iconbutton-radius-compact: 9px;
523
+ --ol8-component-iconbutton-radius-standard: 12px;
524
+ --ol8-component-iconbutton-radius-comfortable: 12px;
525
+ --ol8-component-iconbutton-radius-large: 18px;
526
+ --ol8-component-iconbutton-radius-circle: 999px;
527
+ --ol8-component-iconbutton-pressedscrim: var(--ol8-color-scrim-pressed);
522
528
  --ol8-component-link-underline-default: 1px;
523
529
  --ol8-component-link-underline-emphasis: 2px;
524
530
  --ol8-component-link-underline-offset: 3px;
525
531
  --ol8-component-link-gap-small: 6px;
526
532
  --ol8-component-link-gap-standard: 6px;
527
533
  --ol8-component-link-gap-large: 9px;
528
- --ol8-component-link-target-navigation: 48px;
529
- --ol8-component-text-field-height-compact: 36px;
530
- --ol8-component-text-field-height-standard: 42px;
531
- --ol8-component-text-field-height-comfortable: 48px;
532
- --ol8-component-text-field-height-large: 60px;
533
- --ol8-component-text-field-inset-compact: 12px;
534
- --ol8-component-text-field-inset-standard: 15px;
535
- --ol8-component-text-field-inset-comfortable: 18px;
536
- --ol8-component-text-field-inset-large: 24px;
537
- --ol8-component-text-field-radius-compact: 6px;
538
- --ol8-component-text-field-radius-standard: 9px;
539
- --ol8-component-text-field-radius-comfortable: 12px;
540
- --ol8-component-text-field-radius-large: 18px;
541
- --ol8-component-text-field-boundary: 2px;
542
- --ol8-component-text-field-gap-label: 6px;
543
- --ol8-component-text-field-gap-supporting: 6px;
544
- --ol8-component-text-field-gap-status: 3px;
545
- --ol8-component-text-field-gap-message-counter: 12px;
534
+ --ol8-component-link-targetnavigation: 48px;
535
+ --ol8-component-textfield-height-compact: 36px;
536
+ --ol8-component-textfield-height-standard: 42px;
537
+ --ol8-component-textfield-height-comfortable: 48px;
538
+ --ol8-component-textfield-height-large: 60px;
539
+ --ol8-component-textfield-inset-compact: 12px;
540
+ --ol8-component-textfield-inset-standard: 15px;
541
+ --ol8-component-textfield-inset-comfortable: 18px;
542
+ --ol8-component-textfield-inset-large: 24px;
543
+ --ol8-component-textfield-radius-compact: 6px;
544
+ --ol8-component-textfield-radius-standard: 9px;
545
+ --ol8-component-textfield-radius-comfortable: 12px;
546
+ --ol8-component-textfield-radius-large: 18px;
547
+ --ol8-component-textfield-boundary: 2px;
548
+ --ol8-component-textfield-gap-label: 6px;
549
+ --ol8-component-textfield-gap-supporting: 6px;
550
+ --ol8-component-textfield-gap-status: 3px;
551
+ --ol8-component-textfield-gap-messagecounter: 12px;
546
552
  --ol8-component-choice-indicator-compact: 18px;
547
553
  --ol8-component-choice-indicator-comfortable: 24px;
548
554
  --ol8-component-choice-gap-compact: 6px;
549
555
  --ol8-component-choice-gap-standard: 9px;
550
556
  --ol8-component-choice-gap-large: 12px;
551
- --ol8-component-choice-row-minimum: 48px;
557
+ --ol8-component-choice-rowminimum: 48px;
552
558
  --ol8-component-choice-optical-stroke: 1.8px;
553
559
  --ol8-component-checkbox-radius-compact: 3px;
554
560
  --ol8-component-checkbox-radius-comfortable: 6px;
555
561
  --ol8-component-checkbox-boundary: 1.8px;
556
562
  --ol8-component-checkbox-mark-stroke: 1.8px;
557
- --ol8-component-checkbox-mark-mixed-width: 9px;
563
+ --ol8-component-checkbox-mark-mixedwidth: 9px;
558
564
  --ol8-component-radio-boundary: 1.8px;
559
565
  --ol8-component-radio-dot-compact: 9px;
560
566
  --ol8-component-radio-dot-comfortable: 12px;
561
- --ol8-component-switch-track-width-compact: 36px;
562
- --ol8-component-switch-track-width-comfortable: 48px;
563
- --ol8-component-switch-track-height-compact: 18px;
564
- --ol8-component-switch-track-height-comfortable: 24px;
567
+ --ol8-component-switch-trackwidth-compact: 36px;
568
+ --ol8-component-switch-trackwidth-comfortable: 48px;
569
+ --ol8-component-switch-trackheight-compact: 18px;
570
+ --ol8-component-switch-trackheight-comfortable: 24px;
565
571
  --ol8-component-switch-thumb-compact: 12px;
566
572
  --ol8-component-switch-thumb-comfortable: 18px;
567
- --ol8-component-switch-thumb-icon-compact: 9px;
568
- --ol8-component-switch-thumb-icon-comfortable: 12px;
573
+ --ol8-component-switch-thumbicon-compact: 9px;
574
+ --ol8-component-switch-thumbicon-comfortable: 12px;
569
575
  --ol8-component-switch-inset: 3px;
570
576
  --ol8-component-switch-travel-compact: 18px;
571
577
  --ol8-component-switch-travel-comfortable: 24px;
572
- --ol8-component-selection-popup-gap: 6px;
573
- --ol8-component-selection-popup-padding-inline: 3px;
574
- --ol8-component-selection-popup-padding-block: 6px;
575
- --ol8-component-selection-popup-rail-inset-inline: 3px;
576
- --ol8-component-selection-popup-maximum-block-standard: 288px;
577
- --ol8-component-selection-popup-maximum-block-large: 360px;
578
- --ol8-component-selection-option-minimum-standard: 48px;
579
- --ol8-component-selection-option-minimum-large: 60px;
580
- --ol8-component-selection-option-inset-standard: 12px;
581
- --ol8-component-selection-option-inset-large: 15px;
582
- --ol8-component-selection-option-check: 18px;
578
+ --ol8-component-selectionpopup-gap: 6px;
579
+ --ol8-component-selectionpopup-paddinginline: 3px;
580
+ --ol8-component-selectionpopup-paddingblock: 6px;
581
+ --ol8-component-selectionpopup-railinsetinline: 3px;
582
+ --ol8-component-selectionpopup-maximumblock-standard: 288px;
583
+ --ol8-component-selectionpopup-maximumblock-large: 360px;
584
+ --ol8-component-selectionoption-minimum-standard: 48px;
585
+ --ol8-component-selectionoption-minimum-large: 60px;
586
+ --ol8-component-selectionoption-inset-standard: 12px;
587
+ --ol8-component-selectionoption-inset-large: 15px;
588
+ --ol8-component-selectionoption-check: 18px;
583
589
  --ol8-component-choice-chip-height-compact: 30px;
584
590
  --ol8-component-choice-chip-height-standard: 36px;
585
591
  --ol8-component-choice-chip-height-comfortable: 42px;
@@ -587,26 +593,26 @@
587
593
  --ol8-component-choice-chip-target-standard: 48px;
588
594
  --ol8-component-choice-chip-target-large: 60px;
589
595
  --ol8-component-choice-chip-terminal: 12px;
590
- --ol8-component-choice-chip-inner-terminal: 11px;
591
- --ol8-component-choice-chip-center-cut: 18px;
592
- --ol8-component-choice-chip-inner-center-cut: 16px;
593
- --ol8-component-choice-chip-bezel-inset: 2px;
594
- --ol8-component-choice-chip-inset-compact: 21px;
595
- --ol8-component-choice-chip-inset-standard: 24px;
596
- --ol8-component-choice-chip-inset-comfortable: 27px;
597
- --ol8-component-choice-chip-inset-large: 27px;
598
- --ol8-component-choice-chip-gap: 6px;
599
- --ol8-component-choice-chip-mark-gap: 9px;
600
- --ol8-component-choice-chip-mark: 18px;
601
- --ol8-component-token-field-minimum-input: 96px;
602
- --ol8-component-token-field-gap: 6px;
603
- --ol8-component-token-field-padding-block: 3px;
604
- --ol8-component-suggestion-rail-gap: 6px;
605
- --ol8-component-suggestion-rail-field-separation: 6px;
606
- --ol8-component-navigation-item-gap: 6px;
596
+ --ol8-component-choicechip-innerterminal: 11px;
597
+ --ol8-component-choicechip-centercut: 18px;
598
+ --ol8-component-choicechip-innercentercut: 16px;
599
+ --ol8-component-choicechip-bezelinset: 2px;
600
+ --ol8-component-choicechip-inset-compact: 21px;
601
+ --ol8-component-choicechip-inset-standard: 24px;
602
+ --ol8-component-choicechip-inset-comfortable: 27px;
603
+ --ol8-component-choicechip-inset-large: 27px;
604
+ --ol8-component-choicechip-gap: 6px;
605
+ --ol8-component-choicechip-markgap: 9px;
606
+ --ol8-component-choicechip-mark: 18px;
607
+ --ol8-component-tokenfield-minimuminput: 96px;
608
+ --ol8-component-tokenfield-gap: 6px;
609
+ --ol8-component-tokenfield-paddingblock: 3px;
610
+ --ol8-component-suggestionrail-gap: 6px;
611
+ --ol8-component-suggestionrail-fieldseparation: 6px;
612
+ --ol8-component-navigation-itemgap: 6px;
607
613
  --ol8-component-navigation-icon: 18px;
608
614
  --ol8-component-navigation-target: 48px;
609
- --ol8-component-navigation-focus-inset: 3px;
615
+ --ol8-component-navigation-focusinset: 3px;
610
616
  --ol8-component-tab-item-height-compact: 36px;
611
617
  --ol8-component-tab-item-height-standard: 42px;
612
618
  --ol8-component-tab-item-height-comfortable: 48px;
@@ -615,21 +621,21 @@
615
621
  --ol8-component-tab-item-inset-standard: 15px;
616
622
  --ol8-component-tab-item-inset-comfortable: 18px;
617
623
  --ol8-component-tab-item-inset-large: 24px;
618
- --ol8-component-tab-item-radius: 9px;
624
+ --ol8-component-tabitem-radius: 9px;
619
625
  --ol8-component-tab-item-indicator-thickness: 3px;
620
- --ol8-component-tab-item-indicator-inset: 15px;
621
- --ol8-component-tab-item-rail: 1px;
622
- --ol8-component-segmented-control-track-inset: 3px;
623
- --ol8-component-segmented-control-outlined-gap: 6px;
624
- --ol8-component-segmented-control-track-radius: 12px;
625
- --ol8-component-segmented-control-item-radius: 9px;
626
- --ol8-component-segmented-control-line: 3px;
627
- --ol8-component-segmented-control-boundary: 1px;
628
- --ol8-component-tab-bar-inset: 6px;
629
- --ol8-component-tab-bar-inline-inset: 3px;
630
- --ol8-component-tab-bar-gap: 0px;
631
- --ol8-component-tab-bar-radius: 18px;
632
- --ol8-component-tab-bar-item-radius: 12px;
626
+ --ol8-component-tabitem-indicatorinset: 15px;
627
+ --ol8-component-tabitem-rail: 1px;
628
+ --ol8-component-segmentedcontrol-trackinset: 3px;
629
+ --ol8-component-segmentedcontrol-outlinedgap: 6px;
630
+ --ol8-component-segmentedcontrol-trackradius: 12px;
631
+ --ol8-component-segmentedcontrol-itemradius: 9px;
632
+ --ol8-component-segmentedcontrol-line: 3px;
633
+ --ol8-component-segmentedcontrol-boundary: 1px;
634
+ --ol8-component-tabbar-inset: 6px;
635
+ --ol8-component-tabbar-inlineinset: 3px;
636
+ --ol8-component-tabbar-gap: 0px;
637
+ --ol8-component-tabbar-radius: 18px;
638
+ --ol8-component-tabbar-itemradius: 12px;
633
639
  }
634
640
 
635
641
  [data-ol8-color-scheme="dark"] {
@@ -661,48 +667,48 @@
661
667
  --ol8-color-border-disabled: var(--ol8-color-neutral-240);
662
668
  --ol8-color-focus-inner: var(--ol8-color-primary-930);
663
669
  --ol8-color-focus-outer: var(--ol8-color-primary-030);
664
- --ol8-color-action-primary-default: var(--ol8-color-primary-120);
665
- --ol8-color-action-primary-hover: var(--ol8-color-primary-090);
666
- --ol8-color-action-primary-pressed: var(--ol8-color-primary-060);
667
- --ol8-color-action-primary-content: var(--ol8-color-primary-930);
668
- --ol8-color-action-primary-disabled: var(--ol8-color-blue-840);
669
- --ol8-color-action-primary-disabled-content: var(--ol8-color-neutral-240);
670
- --ol8-color-action-secondary-surface-default: transparent;
671
- --ol8-color-action-secondary-surface-hover: var(--ol8-color-primary-930);
672
- --ol8-color-action-secondary-surface-pressed: var(--ol8-color-primary-840);
673
- --ol8-color-action-secondary-surface-disabled: transparent;
674
- --ol8-color-action-secondary-content-default: var(--ol8-color-primary-120);
675
- --ol8-color-action-secondary-content-hover: var(--ol8-color-primary-120);
676
- --ol8-color-action-secondary-content-pressed: var(--ol8-color-primary-090);
677
- --ol8-color-action-secondary-content-disabled: var(--ol8-color-neutral-240);
678
- --ol8-color-action-quiet-surface-default: transparent;
679
- --ol8-color-action-quiet-surface-hover: var(--ol8-color-primary-930);
680
- --ol8-color-action-quiet-surface-pressed: var(--ol8-color-primary-840);
681
- --ol8-color-action-quiet-surface-disabled: transparent;
682
- --ol8-color-action-quiet-content-default: var(--ol8-color-primary-120);
683
- --ol8-color-action-quiet-content-hover: var(--ol8-color-primary-120);
684
- --ol8-color-action-quiet-content-pressed: var(--ol8-color-primary-090);
685
- --ol8-color-action-quiet-content-disabled: var(--ol8-color-neutral-240);
670
+ --ol8-color-actionprimary-default: var(--ol8-color-primary-120);
671
+ --ol8-color-actionprimary-hover: var(--ol8-color-primary-090);
672
+ --ol8-color-actionprimary-pressed: var(--ol8-color-primary-060);
673
+ --ol8-color-actionprimary-content: var(--ol8-color-primary-930);
674
+ --ol8-color-actionprimary-disabled: var(--ol8-color-blue-840);
675
+ --ol8-color-actionprimary-disabledcontent: var(--ol8-color-neutral-240);
676
+ --ol8-color-actionsecondary-surfacedefault: transparent;
677
+ --ol8-color-actionsecondary-surfacehover: var(--ol8-color-primary-930);
678
+ --ol8-color-actionsecondary-surfacepressed: var(--ol8-color-primary-840);
679
+ --ol8-color-actionsecondary-surfacedisabled: transparent;
680
+ --ol8-color-actionsecondary-contentdefault: var(--ol8-color-primary-120);
681
+ --ol8-color-actionsecondary-contenthover: var(--ol8-color-primary-120);
682
+ --ol8-color-actionsecondary-contentpressed: var(--ol8-color-primary-090);
683
+ --ol8-color-actionsecondary-contentdisabled: var(--ol8-color-neutral-240);
684
+ --ol8-color-actionquiet-surfacedefault: transparent;
685
+ --ol8-color-actionquiet-surfacehover: var(--ol8-color-primary-930);
686
+ --ol8-color-actionquiet-surfacepressed: var(--ol8-color-primary-840);
687
+ --ol8-color-actionquiet-surfacedisabled: transparent;
688
+ --ol8-color-actionquiet-contentdefault: var(--ol8-color-primary-120);
689
+ --ol8-color-actionquiet-contenthover: var(--ol8-color-primary-120);
690
+ --ol8-color-actionquiet-contentpressed: var(--ol8-color-primary-090);
691
+ --ol8-color-actionquiet-contentdisabled: var(--ol8-color-neutral-240);
686
692
  --ol8-color-icon-button-secondary-hover-surface: var(--ol8-color-primary-720);
687
693
  --ol8-color-icon-button-quiet-hover-surface: var(--ol8-color-primary-720);
688
- --ol8-color-action-destructive-default: var(--ol8-color-red-120);
689
- --ol8-color-action-destructive-hover: var(--ol8-color-red-090);
690
- --ol8-color-action-destructive-pressed: var(--ol8-color-red-060);
691
- --ol8-color-action-destructive-content: var(--ol8-color-red-930);
692
- --ol8-color-action-destructive-disabled: var(--ol8-color-blue-840);
693
- --ol8-color-action-destructive-disabled-content: var(--ol8-color-neutral-240);
694
- --ol8-color-feedback-informative-surface: var(--ol8-color-cyan-120);
695
- --ol8-color-feedback-informative-content: var(--ol8-color-cyan-930);
696
- --ol8-color-feedback-informative-inline-content: var(--ol8-color-blue-120);
697
- --ol8-color-feedback-positive-surface: var(--ol8-color-green-120);
698
- --ol8-color-feedback-positive-content: var(--ol8-color-green-930);
699
- --ol8-color-feedback-positive-inline-content: var(--ol8-color-green-120);
700
- --ol8-color-feedback-caution-surface: var(--ol8-color-yellow-120);
701
- --ol8-color-feedback-caution-content: var(--ol8-color-yellow-930);
702
- --ol8-color-feedback-caution-inline-content: var(--ol8-color-yellow-120);
703
- --ol8-color-feedback-critical-surface: var(--ol8-color-red-120);
704
- --ol8-color-feedback-critical-content: var(--ol8-color-red-930);
705
- --ol8-color-feedback-critical-inline-content: var(--ol8-color-red-120);
694
+ --ol8-color-actiondestructive-default: var(--ol8-color-red-120);
695
+ --ol8-color-actiondestructive-hover: var(--ol8-color-red-090);
696
+ --ol8-color-actiondestructive-pressed: var(--ol8-color-red-060);
697
+ --ol8-color-actiondestructive-content: var(--ol8-color-red-930);
698
+ --ol8-color-actiondestructive-disabled: var(--ol8-color-blue-840);
699
+ --ol8-color-actiondestructive-disabledcontent: var(--ol8-color-neutral-240);
700
+ --ol8-color-feedbackinformative-surface: var(--ol8-color-cyan-120);
701
+ --ol8-color-feedbackinformative-content: var(--ol8-color-cyan-930);
702
+ --ol8-color-feedbackinformative-inlinecontent: var(--ol8-color-blue-120);
703
+ --ol8-color-feedbackpositive-surface: var(--ol8-color-green-120);
704
+ --ol8-color-feedbackpositive-content: var(--ol8-color-green-930);
705
+ --ol8-color-feedbackpositive-inlinecontent: var(--ol8-color-green-120);
706
+ --ol8-color-feedbackcaution-surface: var(--ol8-color-yellow-120);
707
+ --ol8-color-feedbackcaution-content: var(--ol8-color-yellow-930);
708
+ --ol8-color-feedbackcaution-inlinecontent: var(--ol8-color-yellow-120);
709
+ --ol8-color-feedbackcritical-surface: var(--ol8-color-red-120);
710
+ --ol8-color-feedbackcritical-content: var(--ol8-color-red-930);
711
+ --ol8-color-feedbackcritical-inlinecontent: var(--ol8-color-red-120);
706
712
  --ol8-color-selection-surface: var(--ol8-color-primary-120);
707
713
  --ol8-color-selection-content: var(--ol8-color-primary-930);
708
714
  --ol8-elevation-surface-flat: none;
@@ -710,23 +716,23 @@
710
716
  --ol8-elevation-surface-floating: 0px 6px 18px -3px rgb(22 63 75 / 0.48);
711
717
  --ol8-elevation-surface-overlay: 0px 12px 36px -6px rgb(22 63 75 / 0.6);
712
718
  --ol8-elevation-surface-blocking: 0px 24px 72px -12px rgb(22 63 75 / 0.72);
713
- --ol8-material-control-gem-primary-start: var(--ol8-color-primary-600);
714
- --ol8-material-control-gem-primary-mid: var(--ol8-color-primary-720);
715
- --ol8-material-control-gem-primary-end: var(--ol8-color-primary-840);
716
- --ol8-material-control-gem-primary-hover-start: var(--ol8-color-primary-720);
717
- --ol8-material-control-gem-primary-hover-mid: var(--ol8-color-primary-840);
718
- --ol8-material-control-gem-primary-hover-end: var(--ol8-color-primary-930);
719
- --ol8-material-gem-color-quiet-environmental-face: color-mix(in srgb, var(--ol8-color-neutral-930) 48%, transparent);
720
- --ol8-material-gem-color-quiet-stabilized-face: color-mix(in srgb, var(--ol8-color-neutral-840) 72%, transparent);
721
- --ol8-material-gem-color-quiet-opaque-equivalent: var(--ol8-color-neutral-840);
722
- --ol8-material-gem-color-cut-edge-high: color-mix(in srgb, var(--ol8-color-neutral-120) 42%, transparent);
723
- --ol8-material-gem-color-cut-edge-mid: color-mix(in srgb, var(--ol8-color-blue-120) 20%, transparent);
724
- --ol8-material-gem-color-cut-edge-low: color-mix(in srgb, var(--ol8-color-neutral-120) 3%, transparent);
725
- --ol8-material-gem-color-cut-edge-shadow: color-mix(in srgb, var(--ol8-color-cyan-930) 36%, transparent);
726
- --ol8-material-gem-color-inner-thin-cut-face: color-mix(in srgb, var(--ol8-color-neutral-840) 72%, transparent);
727
- --ol8-material-gem-color-inner-thin-cut-high: color-mix(in srgb, var(--ol8-color-neutral-120) 27%, transparent);
728
- --ol8-material-gem-color-inner-thin-cut-mid: color-mix(in srgb, var(--ol8-color-blue-120) 12%, transparent);
729
- --ol8-material-gem-color-inner-thin-cut-low: color-mix(in srgb, var(--ol8-color-neutral-120) 3%, transparent);
719
+ --ol8-material-control-gem--primary-start: var(--ol8-color-primary-600);
720
+ --ol8-material-control-gem--primary-mid: var(--ol8-color-primary-720);
721
+ --ol8-material-control-gem--primary-end: var(--ol8-color-primary-840);
722
+ --ol8-material-control-gem--primary-hover-start: var(--ol8-color-primary-720);
723
+ --ol8-material-control-gem--primary-hover-mid: var(--ol8-color-primary-840);
724
+ --ol8-material-control-gem--primary-hover-end: var(--ol8-color-primary-930);
725
+ --ol8-material-gem-color-quiet-environmentalface: color-mix(in srgb, var(--ol8-color-neutral-930) 48%, transparent);
726
+ --ol8-material-gem-color-quiet-stabilizedface: color-mix(in srgb, var(--ol8-color-neutral-840) 72%, transparent);
727
+ --ol8-material-gem-color-quiet-opaqueequivalent: var(--ol8-color-neutral-840);
728
+ --ol8-material-gem-color-cutedge-high: color-mix(in srgb, var(--ol8-color-neutral-120) 42%, transparent);
729
+ --ol8-material-gem-color-cutedge-mid: color-mix(in srgb, var(--ol8-color-blue-120) 20%, transparent);
730
+ --ol8-material-gem-color-cutedge-low: color-mix(in srgb, var(--ol8-color-neutral-120) 3%, transparent);
731
+ --ol8-material-gem-color-cutedge-shadow: color-mix(in srgb, var(--ol8-color-cyan-930) 36%, transparent);
732
+ --ol8-material-gem-color-innerthincut-face: color-mix(in srgb, var(--ol8-color-neutral-840) 72%, transparent);
733
+ --ol8-material-gem-color-innerthincut-high: color-mix(in srgb, var(--ol8-color-neutral-120) 27%, transparent);
734
+ --ol8-material-gem-color-innerthincut-mid: color-mix(in srgb, var(--ol8-color-blue-120) 12%, transparent);
735
+ --ol8-material-gem-color-innerthincut-low: color-mix(in srgb, var(--ol8-color-neutral-120) 3%, transparent);
730
736
  --ol8-material-gem-color-facet-cool: color-mix(in srgb, var(--ol8-color-blue-120) 14.000000000000002%, transparent);
731
737
  --ol8-material-gem-color-facet-warm: color-mix(in srgb, var(--ol8-color-orange-120) 9%, transparent);
732
738
  }
@@ -774,32 +780,32 @@
774
780
  }
775
781
 
776
782
  [data-ol8-type-mode="medium"] {
777
- --ol8-typography-display-large-font-family: Syne;
783
+ --ol8-typography-display-large-font-family: Syne, var(--ol8-font-family-fallback);
778
784
  --ol8-typography-display-large-font-size: 90px;
779
785
  --ol8-typography-display-large-font-weight: 690;
780
786
  --ol8-typography-display-large-letter-spacing: -0.025em;
781
787
  --ol8-typography-display-large-line-height: 96px;
782
- --ol8-typography-display-medium-font-family: Syne;
788
+ --ol8-typography-display-medium-font-family: Syne, var(--ol8-font-family-fallback);
783
789
  --ol8-typography-display-medium-font-size: 66px;
784
790
  --ol8-typography-display-medium-font-weight: 690;
785
791
  --ol8-typography-display-medium-letter-spacing: -0.02em;
786
792
  --ol8-typography-display-medium-line-height: 72px;
787
- --ol8-typography-display-small-font-family: Syne;
793
+ --ol8-typography-display-small-font-family: Syne, var(--ol8-font-family-fallback);
788
794
  --ol8-typography-display-small-font-size: 51px;
789
795
  --ol8-typography-display-small-font-weight: 600;
790
796
  --ol8-typography-display-small-letter-spacing: -0.015em;
791
797
  --ol8-typography-display-small-line-height: 60px;
792
- --ol8-typography-title-large-font-family: AR One Sans;
798
+ --ol8-typography-title-large-font-family: "AR One Sans", var(--ol8-font-family-fallback);
793
799
  --ol8-typography-title-large-font-size: 51px;
794
800
  --ol8-typography-title-large-font-weight: 600;
795
801
  --ol8-typography-title-large-letter-spacing: -0.01em;
796
802
  --ol8-typography-title-large-line-height: 60px;
797
- --ol8-typography-title-medium-font-family: AR One Sans;
803
+ --ol8-typography-title-medium-font-family: "AR One Sans", var(--ol8-font-family-fallback);
798
804
  --ol8-typography-title-medium-font-size: 39px;
799
805
  --ol8-typography-title-medium-font-weight: 600;
800
806
  --ol8-typography-title-medium-letter-spacing: -0.005em;
801
807
  --ol8-typography-title-medium-line-height: 48px;
802
- --ol8-typography-title-small-font-family: AR One Sans;
808
+ --ol8-typography-title-small-font-family: "AR One Sans", var(--ol8-font-family-fallback);
803
809
  --ol8-typography-title-small-font-size: 30px;
804
810
  --ol8-typography-title-small-font-weight: 600;
805
811
  --ol8-typography-title-small-letter-spacing: 0em;
@@ -807,32 +813,32 @@
807
813
  }
808
814
 
809
815
  [data-ol8-type-mode="expanded"] {
810
- --ol8-typography-display-large-font-family: Syne;
816
+ --ol8-typography-display-large-font-family: Syne, var(--ol8-font-family-fallback);
811
817
  --ol8-typography-display-large-font-size: 120px;
812
818
  --ol8-typography-display-large-font-weight: 690;
813
819
  --ol8-typography-display-large-letter-spacing: -0.03em;
814
820
  --ol8-typography-display-large-line-height: 126px;
815
- --ol8-typography-display-medium-font-family: Syne;
821
+ --ol8-typography-display-medium-font-family: Syne, var(--ol8-font-family-fallback);
816
822
  --ol8-typography-display-medium-font-size: 90px;
817
823
  --ol8-typography-display-medium-font-weight: 690;
818
824
  --ol8-typography-display-medium-letter-spacing: -0.025em;
819
825
  --ol8-typography-display-medium-line-height: 96px;
820
- --ol8-typography-display-small-font-family: Syne;
826
+ --ol8-typography-display-small-font-family: Syne, var(--ol8-font-family-fallback);
821
827
  --ol8-typography-display-small-font-size: 66px;
822
828
  --ol8-typography-display-small-font-weight: 600;
823
829
  --ol8-typography-display-small-letter-spacing: -0.02em;
824
830
  --ol8-typography-display-small-line-height: 72px;
825
- --ol8-typography-title-large-font-family: AR One Sans;
831
+ --ol8-typography-title-large-font-family: "AR One Sans", var(--ol8-font-family-fallback);
826
832
  --ol8-typography-title-large-font-size: 51px;
827
833
  --ol8-typography-title-large-font-weight: 600;
828
834
  --ol8-typography-title-large-letter-spacing: -0.01em;
829
835
  --ol8-typography-title-large-line-height: 60px;
830
- --ol8-typography-title-medium-font-family: AR One Sans;
836
+ --ol8-typography-title-medium-font-family: "AR One Sans", var(--ol8-font-family-fallback);
831
837
  --ol8-typography-title-medium-font-size: 39px;
832
838
  --ol8-typography-title-medium-font-weight: 600;
833
839
  --ol8-typography-title-medium-letter-spacing: -0.005em;
834
840
  --ol8-typography-title-medium-line-height: 48px;
835
- --ol8-typography-title-small-font-family: AR One Sans;
841
+ --ol8-typography-title-small-font-family: "AR One Sans", var(--ol8-font-family-fallback);
836
842
  --ol8-typography-title-small-font-size: 30px;
837
843
  --ol8-typography-title-small-font-weight: 600;
838
844
  --ol8-typography-title-small-letter-spacing: 0em;