@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.
@@ -998,6 +998,14 @@
998
998
  "reference": null,
999
999
  "description": "Title, body, controls, and data family."
1000
1000
  },
1001
+ {
1002
+ "path": "font.family.fallback",
1003
+ "name": "Font / Family / Fallback",
1004
+ "type": "fontFamily",
1005
+ "value": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
1006
+ "reference": null,
1007
+ "description": "System stack every brand face falls back to. Override this to change what renders when a brand face is unavailable or replaced."
1008
+ },
1001
1009
  {
1002
1010
  "path": "font.weight.regular",
1003
1011
  "name": "Font / Weight / Regular",
@@ -2255,6 +2263,17 @@
2255
2263
  "reference": "color.primary.840",
2256
2264
  "description": "Content on a persistent selected surface qualified by the active Primary family."
2257
2265
  },
2266
+ {
2267
+ "path": "color.scrim.pressed",
2268
+ "name": "Color / Scrim / Pressed",
2269
+ "type": "color",
2270
+ "value": {
2271
+ "color": "#163F4B",
2272
+ "alpha": 0.24
2273
+ },
2274
+ "reference": null,
2275
+ "description": "Pressed darkening laid over a controls own surface. Uses the systems cyan ink, never default black."
2276
+ },
2258
2277
  {
2259
2278
  "path": "layer.stack.base",
2260
2279
  "name": "Layer / Stack / Base",
@@ -2526,6 +2545,39 @@
2526
2545
  "reference": "dimension.scale.012",
2527
2546
  "description": "Backdrop blur candidate for transparent Gem controls."
2528
2547
  },
2548
+ {
2549
+ "path": "material.control.gem.gradient.start",
2550
+ "name": "Material / Control / Gem / Gradient / Start",
2551
+ "type": "dimension",
2552
+ "value": {
2553
+ "value": 14.639,
2554
+ "unit": "%"
2555
+ },
2556
+ "reference": null,
2557
+ "description": "Gem body gradient leading position, measured from the Figma Gem Button fill."
2558
+ },
2559
+ {
2560
+ "path": "material.control.gem.gradient.mid",
2561
+ "name": "Material / Control / Gem / Gradient / Mid",
2562
+ "type": "dimension",
2563
+ "value": {
2564
+ "value": 48.586,
2565
+ "unit": "%"
2566
+ },
2567
+ "reference": null,
2568
+ "description": "Gem body gradient middle position, measured from the Figma Gem Button fill."
2569
+ },
2570
+ {
2571
+ "path": "material.control.gem.gradient.end",
2572
+ "name": "Material / Control / Gem / Gradient / End",
2573
+ "type": "dimension",
2574
+ "value": {
2575
+ "value": 85.361,
2576
+ "unit": "%"
2577
+ },
2578
+ "reference": null,
2579
+ "description": "Gem body gradient trailing position, measured from the Figma Gem Button fill."
2580
+ },
2529
2581
  {
2530
2582
  "path": "material.gem.color.quiet.environmentalFace",
2531
2583
  "name": "Material / Gem / Color / Quiet / Environmental Face",
@@ -4438,6 +4490,17 @@
4438
4490
  "reference": "shape.radius.full",
4439
4491
  "description": "Circular Icon Button radius."
4440
4492
  },
4493
+ {
4494
+ "path": "component.iconButton.pressedScrim",
4495
+ "name": "Component / Icon Button / Pressed Scrim",
4496
+ "type": "color",
4497
+ "value": {
4498
+ "color": "#163F4B",
4499
+ "alpha": 0.24
4500
+ },
4501
+ "reference": "color.scrim.pressed",
4502
+ "description": "Inner pressed edge on Icon Button, drawn as an inset ring rather than an extra node."
4503
+ },
4441
4504
  {
4442
4505
  "path": "component.link.underline.default",
4443
4506
  "name": "Component / Link / Underline / Default",
@@ -2,11 +2,11 @@
2
2
  "generated": true,
3
3
  "version": "1.0.0-beta.1",
4
4
  "counts": {
5
- "primitive": 169,
6
- "semantic": 266,
7
- "component": 151,
5
+ "primitive": 170,
6
+ "semantic": 270,
7
+ "component": 152,
8
8
  "componentStatuses": 10,
9
- "figmaVariables": 572,
9
+ "figmaVariables": 578,
10
10
  "figmaTypographyStyles": 9,
11
11
  "figmaElevationStyles": 5
12
12
  },
@@ -34,28 +34,28 @@ export default {
34
34
  "border-disabled": "var(--ol8-color-border-disabled)",
35
35
  "focus-inner": "var(--ol8-color-focus-inner)",
36
36
  "focus-outer": "var(--ol8-color-focus-outer)",
37
- "action-primary-default": "var(--ol8-color-action-primary-default)",
38
- "action-primary-hover": "var(--ol8-color-action-primary-hover)",
39
- "action-primary-pressed": "var(--ol8-color-action-primary-pressed)",
40
- "action-primary-content": "var(--ol8-color-action-primary-content)",
41
- "action-primary-disabled": "var(--ol8-color-action-primary-disabled)",
42
- "action-primary-disabled-content": "var(--ol8-color-action-primary-disabled-content)",
43
- "action-secondary-surface-default": "var(--ol8-color-action-secondary-surface-default)",
44
- "action-secondary-surface-hover": "var(--ol8-color-action-secondary-surface-hover)",
45
- "action-secondary-surface-pressed": "var(--ol8-color-action-secondary-surface-pressed)",
46
- "action-secondary-surface-disabled": "var(--ol8-color-action-secondary-surface-disabled)",
47
- "action-secondary-content-default": "var(--ol8-color-action-secondary-content-default)",
48
- "action-secondary-content-hover": "var(--ol8-color-action-secondary-content-hover)",
49
- "action-secondary-content-pressed": "var(--ol8-color-action-secondary-content-pressed)",
50
- "action-secondary-content-disabled": "var(--ol8-color-action-secondary-content-disabled)",
51
- "action-quiet-surface-default": "var(--ol8-color-action-quiet-surface-default)",
52
- "action-quiet-surface-hover": "var(--ol8-color-action-quiet-surface-hover)",
53
- "action-quiet-surface-pressed": "var(--ol8-color-action-quiet-surface-pressed)",
54
- "action-quiet-surface-disabled": "var(--ol8-color-action-quiet-surface-disabled)",
55
- "action-quiet-content-default": "var(--ol8-color-action-quiet-content-default)",
56
- "action-quiet-content-hover": "var(--ol8-color-action-quiet-content-hover)",
57
- "action-quiet-content-pressed": "var(--ol8-color-action-quiet-content-pressed)",
58
- "action-quiet-content-disabled": "var(--ol8-color-action-quiet-content-disabled)",
37
+ "action-primary-default": "var(--ol8-color-actionprimary-default)",
38
+ "action-primary-hover": "var(--ol8-color-actionprimary-hover)",
39
+ "action-primary-pressed": "var(--ol8-color-actionprimary-pressed)",
40
+ "action-primary-content": "var(--ol8-color-actionprimary-content)",
41
+ "action-primary-disabled": "var(--ol8-color-actionprimary-disabled)",
42
+ "action-primary-disabled-content": "var(--ol8-color-actionprimary-disabledcontent)",
43
+ "action-secondary-surface-default": "var(--ol8-color-actionsecondary-surfacedefault)",
44
+ "action-secondary-surface-hover": "var(--ol8-color-actionsecondary-surfacehover)",
45
+ "action-secondary-surface-pressed": "var(--ol8-color-actionsecondary-surfacepressed)",
46
+ "action-secondary-surface-disabled": "var(--ol8-color-actionsecondary-surfacedisabled)",
47
+ "action-secondary-content-default": "var(--ol8-color-actionsecondary-contentdefault)",
48
+ "action-secondary-content-hover": "var(--ol8-color-actionsecondary-contenthover)",
49
+ "action-secondary-content-pressed": "var(--ol8-color-actionsecondary-contentpressed)",
50
+ "action-secondary-content-disabled": "var(--ol8-color-actionsecondary-contentdisabled)",
51
+ "action-quiet-surface-default": "var(--ol8-color-actionquiet-surfacedefault)",
52
+ "action-quiet-surface-hover": "var(--ol8-color-actionquiet-surfacehover)",
53
+ "action-quiet-surface-pressed": "var(--ol8-color-actionquiet-surfacepressed)",
54
+ "action-quiet-surface-disabled": "var(--ol8-color-actionquiet-surfacedisabled)",
55
+ "action-quiet-content-default": "var(--ol8-color-actionquiet-contentdefault)",
56
+ "action-quiet-content-hover": "var(--ol8-color-actionquiet-contenthover)",
57
+ "action-quiet-content-pressed": "var(--ol8-color-actionquiet-contentpressed)",
58
+ "action-quiet-content-disabled": "var(--ol8-color-actionquiet-contentdisabled)",
59
59
  "icon-button-secondary-hover-surface": "var(--ol8-color-icon-button-secondary-hover-surface)",
60
60
  "icon-button-quiet-hover-surface": "var(--ol8-color-icon-button-quiet-hover-surface)",
61
61
  "navigation-badge-surface-default": "var(--ol8-color-navigation-badge-surface-default)",
@@ -64,26 +64,27 @@ export default {
64
64
  "navigation-badge-content-selected": "var(--ol8-color-navigation-badge-content-selected)",
65
65
  "navigation-badge-surface-gem": "var(--ol8-color-navigation-badge-surface-gem)",
66
66
  "navigation-badge-content-gem": "var(--ol8-color-navigation-badge-content-gem)",
67
- "action-destructive-default": "var(--ol8-color-action-destructive-default)",
68
- "action-destructive-hover": "var(--ol8-color-action-destructive-hover)",
69
- "action-destructive-pressed": "var(--ol8-color-action-destructive-pressed)",
70
- "action-destructive-content": "var(--ol8-color-action-destructive-content)",
71
- "action-destructive-disabled": "var(--ol8-color-action-destructive-disabled)",
72
- "action-destructive-disabled-content": "var(--ol8-color-action-destructive-disabled-content)",
73
- "feedback-informative-surface": "var(--ol8-color-feedback-informative-surface)",
74
- "feedback-informative-content": "var(--ol8-color-feedback-informative-content)",
75
- "feedback-informative-inline-content": "var(--ol8-color-feedback-informative-inline-content)",
76
- "feedback-positive-surface": "var(--ol8-color-feedback-positive-surface)",
77
- "feedback-positive-content": "var(--ol8-color-feedback-positive-content)",
78
- "feedback-positive-inline-content": "var(--ol8-color-feedback-positive-inline-content)",
79
- "feedback-caution-surface": "var(--ol8-color-feedback-caution-surface)",
80
- "feedback-caution-content": "var(--ol8-color-feedback-caution-content)",
81
- "feedback-caution-inline-content": "var(--ol8-color-feedback-caution-inline-content)",
82
- "feedback-critical-surface": "var(--ol8-color-feedback-critical-surface)",
83
- "feedback-critical-content": "var(--ol8-color-feedback-critical-content)",
84
- "feedback-critical-inline-content": "var(--ol8-color-feedback-critical-inline-content)",
67
+ "action-destructive-default": "var(--ol8-color-actiondestructive-default)",
68
+ "action-destructive-hover": "var(--ol8-color-actiondestructive-hover)",
69
+ "action-destructive-pressed": "var(--ol8-color-actiondestructive-pressed)",
70
+ "action-destructive-content": "var(--ol8-color-actiondestructive-content)",
71
+ "action-destructive-disabled": "var(--ol8-color-actiondestructive-disabled)",
72
+ "action-destructive-disabled-content": "var(--ol8-color-actiondestructive-disabledcontent)",
73
+ "feedback-informative-surface": "var(--ol8-color-feedbackinformative-surface)",
74
+ "feedback-informative-content": "var(--ol8-color-feedbackinformative-content)",
75
+ "feedback-informative-inline-content": "var(--ol8-color-feedbackinformative-inlinecontent)",
76
+ "feedback-positive-surface": "var(--ol8-color-feedbackpositive-surface)",
77
+ "feedback-positive-content": "var(--ol8-color-feedbackpositive-content)",
78
+ "feedback-positive-inline-content": "var(--ol8-color-feedbackpositive-inlinecontent)",
79
+ "feedback-caution-surface": "var(--ol8-color-feedbackcaution-surface)",
80
+ "feedback-caution-content": "var(--ol8-color-feedbackcaution-content)",
81
+ "feedback-caution-inline-content": "var(--ol8-color-feedbackcaution-inlinecontent)",
82
+ "feedback-critical-surface": "var(--ol8-color-feedbackcritical-surface)",
83
+ "feedback-critical-content": "var(--ol8-color-feedbackcritical-content)",
84
+ "feedback-critical-inline-content": "var(--ol8-color-feedbackcritical-inlinecontent)",
85
85
  "selection-surface": "var(--ol8-color-selection-surface)",
86
- "selection-content": "var(--ol8-color-selection-content)"
86
+ "selection-content": "var(--ol8-color-selection-content)",
87
+ "scrim-pressed": "var(--ol8-color-scrim-pressed)"
87
88
  }
88
89
  },
89
90
  "spacing": {
@@ -30,28 +30,28 @@
30
30
  --color-ol8-border-disabled: var(--ol8-color-border-disabled);
31
31
  --color-ol8-focus-inner: var(--ol8-color-focus-inner);
32
32
  --color-ol8-focus-outer: var(--ol8-color-focus-outer);
33
- --color-ol8-action-primary-default: var(--ol8-color-action-primary-default);
34
- --color-ol8-action-primary-hover: var(--ol8-color-action-primary-hover);
35
- --color-ol8-action-primary-pressed: var(--ol8-color-action-primary-pressed);
36
- --color-ol8-action-primary-content: var(--ol8-color-action-primary-content);
37
- --color-ol8-action-primary-disabled: var(--ol8-color-action-primary-disabled);
38
- --color-ol8-action-primary-disabled-content: var(--ol8-color-action-primary-disabled-content);
39
- --color-ol8-action-secondary-surface-default: var(--ol8-color-action-secondary-surface-default);
40
- --color-ol8-action-secondary-surface-hover: var(--ol8-color-action-secondary-surface-hover);
41
- --color-ol8-action-secondary-surface-pressed: var(--ol8-color-action-secondary-surface-pressed);
42
- --color-ol8-action-secondary-surface-disabled: var(--ol8-color-action-secondary-surface-disabled);
43
- --color-ol8-action-secondary-content-default: var(--ol8-color-action-secondary-content-default);
44
- --color-ol8-action-secondary-content-hover: var(--ol8-color-action-secondary-content-hover);
45
- --color-ol8-action-secondary-content-pressed: var(--ol8-color-action-secondary-content-pressed);
46
- --color-ol8-action-secondary-content-disabled: var(--ol8-color-action-secondary-content-disabled);
47
- --color-ol8-action-quiet-surface-default: var(--ol8-color-action-quiet-surface-default);
48
- --color-ol8-action-quiet-surface-hover: var(--ol8-color-action-quiet-surface-hover);
49
- --color-ol8-action-quiet-surface-pressed: var(--ol8-color-action-quiet-surface-pressed);
50
- --color-ol8-action-quiet-surface-disabled: var(--ol8-color-action-quiet-surface-disabled);
51
- --color-ol8-action-quiet-content-default: var(--ol8-color-action-quiet-content-default);
52
- --color-ol8-action-quiet-content-hover: var(--ol8-color-action-quiet-content-hover);
53
- --color-ol8-action-quiet-content-pressed: var(--ol8-color-action-quiet-content-pressed);
54
- --color-ol8-action-quiet-content-disabled: var(--ol8-color-action-quiet-content-disabled);
33
+ --color-ol8-action-primary-default: var(--ol8-color-actionprimary-default);
34
+ --color-ol8-action-primary-hover: var(--ol8-color-actionprimary-hover);
35
+ --color-ol8-action-primary-pressed: var(--ol8-color-actionprimary-pressed);
36
+ --color-ol8-action-primary-content: var(--ol8-color-actionprimary-content);
37
+ --color-ol8-action-primary-disabled: var(--ol8-color-actionprimary-disabled);
38
+ --color-ol8-action-primary-disabled-content: var(--ol8-color-actionprimary-disabledcontent);
39
+ --color-ol8-action-secondary-surface-default: var(--ol8-color-actionsecondary-surfacedefault);
40
+ --color-ol8-action-secondary-surface-hover: var(--ol8-color-actionsecondary-surfacehover);
41
+ --color-ol8-action-secondary-surface-pressed: var(--ol8-color-actionsecondary-surfacepressed);
42
+ --color-ol8-action-secondary-surface-disabled: var(--ol8-color-actionsecondary-surfacedisabled);
43
+ --color-ol8-action-secondary-content-default: var(--ol8-color-actionsecondary-contentdefault);
44
+ --color-ol8-action-secondary-content-hover: var(--ol8-color-actionsecondary-contenthover);
45
+ --color-ol8-action-secondary-content-pressed: var(--ol8-color-actionsecondary-contentpressed);
46
+ --color-ol8-action-secondary-content-disabled: var(--ol8-color-actionsecondary-contentdisabled);
47
+ --color-ol8-action-quiet-surface-default: var(--ol8-color-actionquiet-surfacedefault);
48
+ --color-ol8-action-quiet-surface-hover: var(--ol8-color-actionquiet-surfacehover);
49
+ --color-ol8-action-quiet-surface-pressed: var(--ol8-color-actionquiet-surfacepressed);
50
+ --color-ol8-action-quiet-surface-disabled: var(--ol8-color-actionquiet-surfacedisabled);
51
+ --color-ol8-action-quiet-content-default: var(--ol8-color-actionquiet-contentdefault);
52
+ --color-ol8-action-quiet-content-hover: var(--ol8-color-actionquiet-contenthover);
53
+ --color-ol8-action-quiet-content-pressed: var(--ol8-color-actionquiet-contentpressed);
54
+ --color-ol8-action-quiet-content-disabled: var(--ol8-color-actionquiet-contentdisabled);
55
55
  --color-ol8-icon-button-secondary-hover-surface: var(--ol8-color-icon-button-secondary-hover-surface);
56
56
  --color-ol8-icon-button-quiet-hover-surface: var(--ol8-color-icon-button-quiet-hover-surface);
57
57
  --color-ol8-navigation-badge-surface-default: var(--ol8-color-navigation-badge-surface-default);
@@ -60,26 +60,27 @@
60
60
  --color-ol8-navigation-badge-content-selected: var(--ol8-color-navigation-badge-content-selected);
61
61
  --color-ol8-navigation-badge-surface-gem: var(--ol8-color-navigation-badge-surface-gem);
62
62
  --color-ol8-navigation-badge-content-gem: var(--ol8-color-navigation-badge-content-gem);
63
- --color-ol8-action-destructive-default: var(--ol8-color-action-destructive-default);
64
- --color-ol8-action-destructive-hover: var(--ol8-color-action-destructive-hover);
65
- --color-ol8-action-destructive-pressed: var(--ol8-color-action-destructive-pressed);
66
- --color-ol8-action-destructive-content: var(--ol8-color-action-destructive-content);
67
- --color-ol8-action-destructive-disabled: var(--ol8-color-action-destructive-disabled);
68
- --color-ol8-action-destructive-disabled-content: var(--ol8-color-action-destructive-disabled-content);
69
- --color-ol8-feedback-informative-surface: var(--ol8-color-feedback-informative-surface);
70
- --color-ol8-feedback-informative-content: var(--ol8-color-feedback-informative-content);
71
- --color-ol8-feedback-informative-inline-content: var(--ol8-color-feedback-informative-inline-content);
72
- --color-ol8-feedback-positive-surface: var(--ol8-color-feedback-positive-surface);
73
- --color-ol8-feedback-positive-content: var(--ol8-color-feedback-positive-content);
74
- --color-ol8-feedback-positive-inline-content: var(--ol8-color-feedback-positive-inline-content);
75
- --color-ol8-feedback-caution-surface: var(--ol8-color-feedback-caution-surface);
76
- --color-ol8-feedback-caution-content: var(--ol8-color-feedback-caution-content);
77
- --color-ol8-feedback-caution-inline-content: var(--ol8-color-feedback-caution-inline-content);
78
- --color-ol8-feedback-critical-surface: var(--ol8-color-feedback-critical-surface);
79
- --color-ol8-feedback-critical-content: var(--ol8-color-feedback-critical-content);
80
- --color-ol8-feedback-critical-inline-content: var(--ol8-color-feedback-critical-inline-content);
63
+ --color-ol8-action-destructive-default: var(--ol8-color-actiondestructive-default);
64
+ --color-ol8-action-destructive-hover: var(--ol8-color-actiondestructive-hover);
65
+ --color-ol8-action-destructive-pressed: var(--ol8-color-actiondestructive-pressed);
66
+ --color-ol8-action-destructive-content: var(--ol8-color-actiondestructive-content);
67
+ --color-ol8-action-destructive-disabled: var(--ol8-color-actiondestructive-disabled);
68
+ --color-ol8-action-destructive-disabled-content: var(--ol8-color-actiondestructive-disabledcontent);
69
+ --color-ol8-feedback-informative-surface: var(--ol8-color-feedbackinformative-surface);
70
+ --color-ol8-feedback-informative-content: var(--ol8-color-feedbackinformative-content);
71
+ --color-ol8-feedback-informative-inline-content: var(--ol8-color-feedbackinformative-inlinecontent);
72
+ --color-ol8-feedback-positive-surface: var(--ol8-color-feedbackpositive-surface);
73
+ --color-ol8-feedback-positive-content: var(--ol8-color-feedbackpositive-content);
74
+ --color-ol8-feedback-positive-inline-content: var(--ol8-color-feedbackpositive-inlinecontent);
75
+ --color-ol8-feedback-caution-surface: var(--ol8-color-feedbackcaution-surface);
76
+ --color-ol8-feedback-caution-content: var(--ol8-color-feedbackcaution-content);
77
+ --color-ol8-feedback-caution-inline-content: var(--ol8-color-feedbackcaution-inlinecontent);
78
+ --color-ol8-feedback-critical-surface: var(--ol8-color-feedbackcritical-surface);
79
+ --color-ol8-feedback-critical-content: var(--ol8-color-feedbackcritical-content);
80
+ --color-ol8-feedback-critical-inline-content: var(--ol8-color-feedbackcritical-inlinecontent);
81
81
  --color-ol8-selection-surface: var(--ol8-color-selection-surface);
82
82
  --color-ol8-selection-content: var(--ol8-color-selection-content);
83
+ --color-ol8-scrim-pressed: var(--ol8-color-scrim-pressed);
83
84
  --spacing-0: 0px;
84
85
  --spacing-1: 3px;
85
86
  --spacing-2: 6px;
@@ -1,5 +1,5 @@
1
1
  // @generated by @oneli8/tokens — do not edit
2
- export type TokenPath = "border.width.hairline" | "border.width.none" | "border.width.standard" | "border.width.strong" | "color.actionDestructive.content" | "color.actionDestructive.default" | "color.actionDestructive.disabled" | "color.actionDestructive.disabledContent" | "color.actionDestructive.hover" | "color.actionDestructive.pressed" | "color.actionPrimary.content" | "color.actionPrimary.default" | "color.actionPrimary.disabled" | "color.actionPrimary.disabledContent" | "color.actionPrimary.hover" | "color.actionPrimary.pressed" | "color.actionQuiet.contentDefault" | "color.actionQuiet.contentDisabled" | "color.actionQuiet.contentHover" | "color.actionQuiet.contentPressed" | "color.actionQuiet.surfaceDefault" | "color.actionQuiet.surfaceDisabled" | "color.actionQuiet.surfaceHover" | "color.actionQuiet.surfacePressed" | "color.actionSecondary.contentDefault" | "color.actionSecondary.contentDisabled" | "color.actionSecondary.contentHover" | "color.actionSecondary.contentPressed" | "color.actionSecondary.surfaceDefault" | "color.actionSecondary.surfaceDisabled" | "color.actionSecondary.surfaceHover" | "color.actionSecondary.surfacePressed" | "color.background.canvas" | "color.background.inverse" | "color.background.subtle" | "color.blue.030" | "color.blue.060" | "color.blue.090" | "color.blue.120" | "color.blue.240" | "color.blue.360" | "color.blue.480" | "color.blue.600" | "color.blue.720" | "color.blue.840" | "color.blue.930" | "color.border.default" | "color.border.disabled" | "color.border.strong" | "color.border.subtle" | "color.control.thumb" | "color.cyan.030" | "color.cyan.060" | "color.cyan.090" | "color.cyan.120" | "color.cyan.240" | "color.cyan.360" | "color.cyan.480" | "color.cyan.600" | "color.cyan.720" | "color.cyan.840" | "color.cyan.930" | "color.feedbackCaution.content" | "color.feedbackCaution.inlineContent" | "color.feedbackCaution.surface" | "color.feedbackCritical.content" | "color.feedbackCritical.inlineContent" | "color.feedbackCritical.surface" | "color.feedbackInformative.content" | "color.feedbackInformative.inlineContent" | "color.feedbackInformative.surface" | "color.feedbackPositive.content" | "color.feedbackPositive.inlineContent" | "color.feedbackPositive.surface" | "color.focus.inner" | "color.focus.outer" | "color.green.030" | "color.green.060" | "color.green.090" | "color.green.120" | "color.green.240" | "color.green.360" | "color.green.480" | "color.green.600" | "color.green.720" | "color.green.840" | "color.green.930" | "color.icon.disabled" | "color.icon.inverse" | "color.icon.muted" | "color.icon.onGem" | "color.icon.primary" | "color.icon.secondary" | "color.iconButton.quietHoverSurface" | "color.iconButton.secondaryHoverSurface" | "color.navigationBadge.contentDefault" | "color.navigationBadge.contentGem" | "color.navigationBadge.contentSelected" | "color.navigationBadge.surfaceDefault" | "color.navigationBadge.surfaceGem" | "color.navigationBadge.surfaceSelected" | "color.neutral.030" | "color.neutral.060" | "color.neutral.090" | "color.neutral.120" | "color.neutral.240" | "color.neutral.360" | "color.neutral.480" | "color.neutral.600" | "color.neutral.720" | "color.neutral.840" | "color.neutral.930" | "color.orange.030" | "color.orange.060" | "color.orange.090" | "color.orange.120" | "color.orange.240" | "color.orange.360" | "color.orange.480" | "color.orange.600" | "color.orange.720" | "color.orange.840" | "color.orange.930" | "color.pink.030" | "color.pink.060" | "color.pink.090" | "color.pink.120" | "color.pink.240" | "color.pink.360" | "color.pink.480" | "color.pink.600" | "color.pink.720" | "color.pink.840" | "color.pink.930" | "color.primary.030" | "color.primary.060" | "color.primary.090" | "color.primary.120" | "color.primary.240" | "color.primary.360" | "color.primary.480" | "color.primary.600" | "color.primary.720" | "color.primary.840" | "color.primary.930" | "color.red.030" | "color.red.060" | "color.red.090" | "color.red.120" | "color.red.240" | "color.red.360" | "color.red.480" | "color.red.600" | "color.red.720" | "color.red.840" | "color.red.930" | "color.selection.content" | "color.selection.surface" | "color.surface.default" | "color.surface.disabled" | "color.surface.raised" | "color.surface.selected" | "color.surface.sunken" | "color.text.disabled" | "color.text.inverse" | "color.text.link.default" | "color.text.link.hover" | "color.text.link.pressed" | "color.text.link.visited" | "color.text.muted" | "color.text.primary" | "color.text.secondary" | "color.violet.030" | "color.violet.060" | "color.violet.090" | "color.violet.120" | "color.violet.240" | "color.violet.360" | "color.violet.480" | "color.violet.600" | "color.violet.720" | "color.violet.840" | "color.violet.930" | "color.yellow.030" | "color.yellow.060" | "color.yellow.090" | "color.yellow.120" | "color.yellow.240" | "color.yellow.360" | "color.yellow.480" | "color.yellow.600" | "color.yellow.720" | "color.yellow.840" | "color.yellow.930" | "component.button.gap.comfortable" | "component.button.gap.compact" | "component.button.height.comfortable" | "component.button.height.compact" | "component.button.height.large" | "component.button.height.standard" | "component.button.icon.comfortable" | "component.button.icon.compact" | "component.button.paddingInline.comfortable" | "component.button.paddingInline.compact" | "component.button.paddingInline.large" | "component.button.paddingInline.standard" | "component.button.radius.comfortable" | "component.button.radius.compact" | "component.button.radius.large" | "component.button.radius.standard" | "component.button.secondaryBoundary" | "component.button.target.comfortable" | "component.button.target.compact" | "component.button.target.large" | "component.button.target.standard" | "component.checkbox.boundary" | "component.checkbox.mark.mixedWidth" | "component.checkbox.mark.stroke" | "component.checkbox.radius.comfortable" | "component.checkbox.radius.compact" | "component.choice.gap.compact" | "component.choice.gap.large" | "component.choice.gap.standard" | "component.choice.indicator.comfortable" | "component.choice.indicator.compact" | "component.choice.opticalStroke" | "component.choice.rowMinimum" | "component.choiceChip.bezelInset" | "component.choiceChip.centerCut" | "component.choiceChip.gap" | "component.choiceChip.height.comfortable" | "component.choiceChip.height.compact" | "component.choiceChip.height.large" | "component.choiceChip.height.standard" | "component.choiceChip.innerCenterCut" | "component.choiceChip.innerTerminal" | "component.choiceChip.inset.comfortable" | "component.choiceChip.inset.compact" | "component.choiceChip.inset.large" | "component.choiceChip.inset.standard" | "component.choiceChip.mark" | "component.choiceChip.markGap" | "component.choiceChip.target.large" | "component.choiceChip.target.standard" | "component.choiceChip.terminal" | "component.icon.stroke" | "component.iconButton.artwork.comfortable" | "component.iconButton.artwork.compact" | "component.iconButton.artwork.large" | "component.iconButton.artwork.standard" | "component.iconButton.box.comfortable" | "component.iconButton.box.compact" | "component.iconButton.box.large" | "component.iconButton.box.standard" | "component.iconButton.radius.circle" | "component.iconButton.radius.comfortable" | "component.iconButton.radius.compact" | "component.iconButton.radius.large" | "component.iconButton.radius.standard" | "component.iconButton.target.comfortable" | "component.iconButton.target.compact" | "component.iconButton.target.large" | "component.iconButton.target.standard" | "component.link.gap.large" | "component.link.gap.small" | "component.link.gap.standard" | "component.link.targetNavigation" | "component.link.underline.default" | "component.link.underline.emphasis" | "component.link.underline.offset" | "component.navigation.focusInset" | "component.navigation.icon" | "component.navigation.itemGap" | "component.navigation.target" | "component.opticalStroke" | "component.radio.boundary" | "component.radio.dot.comfortable" | "component.radio.dot.compact" | "component.segmentedControl.boundary" | "component.segmentedControl.itemRadius" | "component.segmentedControl.line" | "component.segmentedControl.outlinedGap" | "component.segmentedControl.trackInset" | "component.segmentedControl.trackRadius" | "component.selectionOption.check" | "component.selectionOption.inset.large" | "component.selectionOption.inset.standard" | "component.selectionOption.minimum.large" | "component.selectionOption.minimum.standard" | "component.selectionPopup.gap" | "component.selectionPopup.maximumBlock.large" | "component.selectionPopup.maximumBlock.standard" | "component.selectionPopup.paddingBlock" | "component.selectionPopup.paddingInline" | "component.selectionPopup.railInsetInline" | "component.suggestionRail.fieldSeparation" | "component.suggestionRail.gap" | "component.switch.inset" | "component.switch.thumb.comfortable" | "component.switch.thumb.compact" | "component.switch.thumbIcon.comfortable" | "component.switch.thumbIcon.compact" | "component.switch.trackHeight.comfortable" | "component.switch.trackHeight.compact" | "component.switch.trackWidth.comfortable" | "component.switch.trackWidth.compact" | "component.switch.travel.comfortable" | "component.switch.travel.compact" | "component.tabBar.gap" | "component.tabBar.inlineInset" | "component.tabBar.inset" | "component.tabBar.itemRadius" | "component.tabBar.radius" | "component.tabItem.height.comfortable" | "component.tabItem.height.compact" | "component.tabItem.height.large" | "component.tabItem.height.standard" | "component.tabItem.indicatorInset" | "component.tabItem.indicatorThickness" | "component.tabItem.inset.comfortable" | "component.tabItem.inset.compact" | "component.tabItem.inset.large" | "component.tabItem.inset.standard" | "component.tabItem.radius" | "component.tabItem.rail" | "component.textField.boundary" | "component.textField.gap.label" | "component.textField.gap.messageCounter" | "component.textField.gap.status" | "component.textField.gap.supporting" | "component.textField.height.comfortable" | "component.textField.height.compact" | "component.textField.height.large" | "component.textField.height.standard" | "component.textField.inset.comfortable" | "component.textField.inset.compact" | "component.textField.inset.large" | "component.textField.inset.standard" | "component.textField.radius.comfortable" | "component.textField.radius.compact" | "component.textField.radius.large" | "component.textField.radius.standard" | "component.tokenField.gap" | "component.tokenField.minimumInput" | "component.tokenField.paddingBlock" | "dimension.scale.000" | "dimension.scale.003" | "dimension.scale.006" | "dimension.scale.009" | "dimension.scale.012" | "dimension.scale.015" | "dimension.scale.018" | "dimension.scale.024" | "dimension.scale.030" | "dimension.scale.036" | "dimension.scale.042" | "dimension.scale.048" | "dimension.scale.060" | "dimension.scale.072" | "dimension.scale.084" | "dimension.scale.096" | "dimension.scale.108" | "elevation.surface.blocking" | "elevation.surface.flat" | "elevation.surface.floating" | "elevation.surface.overlay" | "elevation.surface.raised" | "focus.ring.innerWidth" | "focus.ring.offset" | "focus.ring.outerWidth" | "focus.ring.totalWidth" | "font.axis.arrr.baseline" | "font.family.display" | "font.family.functional" | "font.line.018" | "font.line.024" | "font.line.030" | "font.line.039" | "font.line.048" | "font.line.060" | "font.line.072" | "font.line.096" | "font.line.126" | "font.size.012" | "font.size.016" | "font.size.021" | "font.size.030" | "font.size.039" | "font.size.051" | "font.size.066" | "font.size.090" | "font.size.120" | "font.tracking.displaySoft" | "font.tracking.normal" | "font.tracking.open" | "font.tracking.snug" | "font.tracking.tight" | "font.tracking.tighter" | "font.tracking.titleSoft" | "font.tracking.titleTight" | "font.weight.bold" | "font.weight.regular" | "font.weight.semibold" | "layer.stack.base" | "layer.stack.modal" | "layer.stack.notification" | "layer.stack.overlay" | "layer.stack.sticky" | "material.control.gem.blur" | "material.control.gem.primary.content" | "material.control.gem.primary.end" | "material.control.gem.primary.hoverEnd" | "material.control.gem.primary.hoverMid" | "material.control.gem.primary.hoverStart" | "material.control.gem.primary.loadingEnd" | "material.control.gem.primary.loadingMid" | "material.control.gem.primary.loadingStart" | "material.control.gem.primary.mid" | "material.control.gem.primary.start" | "material.control.gem.rim.default" | "material.control.gem.rim.hover" | "material.control.gem.rim.specular" | "material.control.gem.secondary.content" | "material.control.gem.secondary.high" | "material.control.gem.secondary.hoverHigh" | "material.control.gem.secondary.hoverLow" | "material.control.gem.secondary.hoverMid" | "material.control.gem.secondary.loadingHigh" | "material.control.gem.secondary.loadingLow" | "material.control.gem.secondary.loadingMid" | "material.control.gem.secondary.low" | "material.control.gem.secondary.mid" | "material.gem.blur.environmental" | "material.gem.blur.stabilized" | "material.gem.color.cutEdge.high" | "material.gem.color.cutEdge.low" | "material.gem.color.cutEdge.mid" | "material.gem.color.cutEdge.outerAccent" | "material.gem.color.cutEdge.outerHigh" | "material.gem.color.cutEdge.outerLow" | "material.gem.color.cutEdge.outerMid" | "material.gem.color.cutEdge.shadow" | "material.gem.color.facet.cool" | "material.gem.color.facet.warm" | "material.gem.color.family.amethyst.edge" | "material.gem.color.family.amethyst.environmentalFace" | "material.gem.color.family.amethyst.innerHigh" | "material.gem.color.family.amethyst.innerLow" | "material.gem.color.family.amethyst.innerMid" | "material.gem.color.family.amethyst.opaqueEquivalent" | "material.gem.color.family.amethyst.stabilizedFace" | "material.gem.color.family.emerald.edge" | "material.gem.color.family.emerald.environmentalFace" | "material.gem.color.family.emerald.innerHigh" | "material.gem.color.family.emerald.innerLow" | "material.gem.color.family.emerald.innerMid" | "material.gem.color.family.emerald.opaqueEquivalent" | "material.gem.color.family.emerald.stabilizedFace" | "material.gem.color.family.ruby.edge" | "material.gem.color.family.ruby.environmentalFace" | "material.gem.color.family.ruby.innerHigh" | "material.gem.color.family.ruby.innerLow" | "material.gem.color.family.ruby.innerMid" | "material.gem.color.family.ruby.opaqueEquivalent" | "material.gem.color.family.ruby.stabilizedFace" | "material.gem.color.family.sapphire.edge" | "material.gem.color.family.sapphire.environmentalFace" | "material.gem.color.family.sapphire.innerHigh" | "material.gem.color.family.sapphire.innerLow" | "material.gem.color.family.sapphire.innerMid" | "material.gem.color.family.sapphire.opaqueEquivalent" | "material.gem.color.family.sapphire.stabilizedFace" | "material.gem.color.innerThinCut.face" | "material.gem.color.innerThinCut.high" | "material.gem.color.innerThinCut.low" | "material.gem.color.innerThinCut.mid" | "material.gem.color.quiet.environmentalFace" | "material.gem.color.quiet.opaqueEquivalent" | "material.gem.color.quiet.stabilizedFace" | "material.gem.opacity.cutDark" | "material.gem.opacity.cutLight" | "material.gem.opacity.edgeHigh" | "material.gem.opacity.edgeLow" | "material.gem.opacity.environmental" | "material.gem.spacing.clusterGap" | "material.gem.spacing.innerSeparation" | "material.gem.spacing.slabInset" | "motion.distance.expansive" | "motion.distance.large" | "motion.distance.minimal" | "motion.distance.short" | "motion.distance.standard" | "motion.duration.deliberate" | "motion.duration.extended" | "motion.duration.fast" | "motion.duration.instant" | "motion.duration.measured" | "motion.duration.quick" | "motion.duration.slow" | "motion.duration.standard" | "motion.easing.enter" | "motion.easing.exit" | "motion.easing.linear" | "motion.easing.standard" | "motion.interaction.focus" | "motion.interaction.hover" | "motion.interaction.press" | "motion.spring.gentle.blend" | "motion.spring.gentle.damping" | "motion.spring.gentle.response" | "motion.spring.interactive.blend" | "motion.spring.interactive.damping" | "motion.spring.interactive.response" | "motion.spring.standard.blend" | "motion.spring.standard.damping" | "motion.spring.standard.response" | "motion.state.change" | "shape.radius.comfortable" | "shape.radius.compact" | "shape.radius.container" | "shape.radius.display" | "shape.radius.full" | "shape.radius.medium" | "shape.radius.none" | "shape.radius.standard" | "shape.radius.subtle" | "size.avatar.display" | "size.avatar.large" | "size.avatar.micro" | "size.avatar.small" | "size.avatar.standard" | "size.avatar.xlarge" | "size.control.comfortable" | "size.control.compact" | "size.control.large" | "size.control.standard" | "size.icon.compact" | "size.icon.display" | "size.icon.hero" | "size.icon.landmark" | "size.icon.large" | "size.icon.medium" | "size.icon.micro" | "size.icon.small" | "size.icon.spacious" | "size.icon.standard" | "size.icon.xlarge" | "size.indicator.large" | "size.indicator.micro" | "size.indicator.small" | "size.indicator.standard" | "size.loader.display" | "size.loader.large" | "size.loader.small" | "size.loader.standard" | "size.target.comfortable" | "size.target.minimum" | "size.target.spacious" | "spacing.inline.minimal" | "spacing.inline.related" | "spacing.inline.standard" | "spacing.inset.comfortable" | "spacing.inset.compact" | "spacing.inset.spacious" | "spacing.inset.standard" | "spacing.layout.gutter" | "spacing.layout.margin" | "spacing.layout.region" | "spacing.none" | "spacing.section.compact" | "spacing.section.expansive" | "spacing.section.spacious" | "spacing.section.standard" | "spacing.stack.grouped" | "spacing.stack.related" | "spacing.stack.separated" | "spacing.stack.tight" | "typography.body.large" | "typography.body.medium" | "typography.body.small" | "typography.display.large" | "typography.display.medium" | "typography.display.small" | "typography.title.large" | "typography.title.medium" | "typography.title.small";
2
+ export type TokenPath = "border.width.hairline" | "border.width.none" | "border.width.standard" | "border.width.strong" | "color.actionDestructive.content" | "color.actionDestructive.default" | "color.actionDestructive.disabled" | "color.actionDestructive.disabledContent" | "color.actionDestructive.hover" | "color.actionDestructive.pressed" | "color.actionPrimary.content" | "color.actionPrimary.default" | "color.actionPrimary.disabled" | "color.actionPrimary.disabledContent" | "color.actionPrimary.hover" | "color.actionPrimary.pressed" | "color.actionQuiet.contentDefault" | "color.actionQuiet.contentDisabled" | "color.actionQuiet.contentHover" | "color.actionQuiet.contentPressed" | "color.actionQuiet.surfaceDefault" | "color.actionQuiet.surfaceDisabled" | "color.actionQuiet.surfaceHover" | "color.actionQuiet.surfacePressed" | "color.actionSecondary.contentDefault" | "color.actionSecondary.contentDisabled" | "color.actionSecondary.contentHover" | "color.actionSecondary.contentPressed" | "color.actionSecondary.surfaceDefault" | "color.actionSecondary.surfaceDisabled" | "color.actionSecondary.surfaceHover" | "color.actionSecondary.surfacePressed" | "color.background.canvas" | "color.background.inverse" | "color.background.subtle" | "color.blue.030" | "color.blue.060" | "color.blue.090" | "color.blue.120" | "color.blue.240" | "color.blue.360" | "color.blue.480" | "color.blue.600" | "color.blue.720" | "color.blue.840" | "color.blue.930" | "color.border.default" | "color.border.disabled" | "color.border.strong" | "color.border.subtle" | "color.control.thumb" | "color.cyan.030" | "color.cyan.060" | "color.cyan.090" | "color.cyan.120" | "color.cyan.240" | "color.cyan.360" | "color.cyan.480" | "color.cyan.600" | "color.cyan.720" | "color.cyan.840" | "color.cyan.930" | "color.feedbackCaution.content" | "color.feedbackCaution.inlineContent" | "color.feedbackCaution.surface" | "color.feedbackCritical.content" | "color.feedbackCritical.inlineContent" | "color.feedbackCritical.surface" | "color.feedbackInformative.content" | "color.feedbackInformative.inlineContent" | "color.feedbackInformative.surface" | "color.feedbackPositive.content" | "color.feedbackPositive.inlineContent" | "color.feedbackPositive.surface" | "color.focus.inner" | "color.focus.outer" | "color.green.030" | "color.green.060" | "color.green.090" | "color.green.120" | "color.green.240" | "color.green.360" | "color.green.480" | "color.green.600" | "color.green.720" | "color.green.840" | "color.green.930" | "color.icon.disabled" | "color.icon.inverse" | "color.icon.muted" | "color.icon.onGem" | "color.icon.primary" | "color.icon.secondary" | "color.iconButton.quietHoverSurface" | "color.iconButton.secondaryHoverSurface" | "color.navigationBadge.contentDefault" | "color.navigationBadge.contentGem" | "color.navigationBadge.contentSelected" | "color.navigationBadge.surfaceDefault" | "color.navigationBadge.surfaceGem" | "color.navigationBadge.surfaceSelected" | "color.neutral.030" | "color.neutral.060" | "color.neutral.090" | "color.neutral.120" | "color.neutral.240" | "color.neutral.360" | "color.neutral.480" | "color.neutral.600" | "color.neutral.720" | "color.neutral.840" | "color.neutral.930" | "color.orange.030" | "color.orange.060" | "color.orange.090" | "color.orange.120" | "color.orange.240" | "color.orange.360" | "color.orange.480" | "color.orange.600" | "color.orange.720" | "color.orange.840" | "color.orange.930" | "color.pink.030" | "color.pink.060" | "color.pink.090" | "color.pink.120" | "color.pink.240" | "color.pink.360" | "color.pink.480" | "color.pink.600" | "color.pink.720" | "color.pink.840" | "color.pink.930" | "color.primary.030" | "color.primary.060" | "color.primary.090" | "color.primary.120" | "color.primary.240" | "color.primary.360" | "color.primary.480" | "color.primary.600" | "color.primary.720" | "color.primary.840" | "color.primary.930" | "color.red.030" | "color.red.060" | "color.red.090" | "color.red.120" | "color.red.240" | "color.red.360" | "color.red.480" | "color.red.600" | "color.red.720" | "color.red.840" | "color.red.930" | "color.scrim.pressed" | "color.selection.content" | "color.selection.surface" | "color.surface.default" | "color.surface.disabled" | "color.surface.raised" | "color.surface.selected" | "color.surface.sunken" | "color.text.disabled" | "color.text.inverse" | "color.text.link.default" | "color.text.link.hover" | "color.text.link.pressed" | "color.text.link.visited" | "color.text.muted" | "color.text.primary" | "color.text.secondary" | "color.violet.030" | "color.violet.060" | "color.violet.090" | "color.violet.120" | "color.violet.240" | "color.violet.360" | "color.violet.480" | "color.violet.600" | "color.violet.720" | "color.violet.840" | "color.violet.930" | "color.yellow.030" | "color.yellow.060" | "color.yellow.090" | "color.yellow.120" | "color.yellow.240" | "color.yellow.360" | "color.yellow.480" | "color.yellow.600" | "color.yellow.720" | "color.yellow.840" | "color.yellow.930" | "component.button.gap.comfortable" | "component.button.gap.compact" | "component.button.height.comfortable" | "component.button.height.compact" | "component.button.height.large" | "component.button.height.standard" | "component.button.icon.comfortable" | "component.button.icon.compact" | "component.button.paddingInline.comfortable" | "component.button.paddingInline.compact" | "component.button.paddingInline.large" | "component.button.paddingInline.standard" | "component.button.radius.comfortable" | "component.button.radius.compact" | "component.button.radius.large" | "component.button.radius.standard" | "component.button.secondaryBoundary" | "component.button.target.comfortable" | "component.button.target.compact" | "component.button.target.large" | "component.button.target.standard" | "component.checkbox.boundary" | "component.checkbox.mark.mixedWidth" | "component.checkbox.mark.stroke" | "component.checkbox.radius.comfortable" | "component.checkbox.radius.compact" | "component.choice.gap.compact" | "component.choice.gap.large" | "component.choice.gap.standard" | "component.choice.indicator.comfortable" | "component.choice.indicator.compact" | "component.choice.opticalStroke" | "component.choice.rowMinimum" | "component.choiceChip.bezelInset" | "component.choiceChip.centerCut" | "component.choiceChip.gap" | "component.choiceChip.height.comfortable" | "component.choiceChip.height.compact" | "component.choiceChip.height.large" | "component.choiceChip.height.standard" | "component.choiceChip.innerCenterCut" | "component.choiceChip.innerTerminal" | "component.choiceChip.inset.comfortable" | "component.choiceChip.inset.compact" | "component.choiceChip.inset.large" | "component.choiceChip.inset.standard" | "component.choiceChip.mark" | "component.choiceChip.markGap" | "component.choiceChip.target.large" | "component.choiceChip.target.standard" | "component.choiceChip.terminal" | "component.icon.stroke" | "component.iconButton.artwork.comfortable" | "component.iconButton.artwork.compact" | "component.iconButton.artwork.large" | "component.iconButton.artwork.standard" | "component.iconButton.box.comfortable" | "component.iconButton.box.compact" | "component.iconButton.box.large" | "component.iconButton.box.standard" | "component.iconButton.pressedScrim" | "component.iconButton.radius.circle" | "component.iconButton.radius.comfortable" | "component.iconButton.radius.compact" | "component.iconButton.radius.large" | "component.iconButton.radius.standard" | "component.iconButton.target.comfortable" | "component.iconButton.target.compact" | "component.iconButton.target.large" | "component.iconButton.target.standard" | "component.link.gap.large" | "component.link.gap.small" | "component.link.gap.standard" | "component.link.targetNavigation" | "component.link.underline.default" | "component.link.underline.emphasis" | "component.link.underline.offset" | "component.navigation.focusInset" | "component.navigation.icon" | "component.navigation.itemGap" | "component.navigation.target" | "component.opticalStroke" | "component.radio.boundary" | "component.radio.dot.comfortable" | "component.radio.dot.compact" | "component.segmentedControl.boundary" | "component.segmentedControl.itemRadius" | "component.segmentedControl.line" | "component.segmentedControl.outlinedGap" | "component.segmentedControl.trackInset" | "component.segmentedControl.trackRadius" | "component.selectionOption.check" | "component.selectionOption.inset.large" | "component.selectionOption.inset.standard" | "component.selectionOption.minimum.large" | "component.selectionOption.minimum.standard" | "component.selectionPopup.gap" | "component.selectionPopup.maximumBlock.large" | "component.selectionPopup.maximumBlock.standard" | "component.selectionPopup.paddingBlock" | "component.selectionPopup.paddingInline" | "component.selectionPopup.railInsetInline" | "component.suggestionRail.fieldSeparation" | "component.suggestionRail.gap" | "component.switch.inset" | "component.switch.thumb.comfortable" | "component.switch.thumb.compact" | "component.switch.thumbIcon.comfortable" | "component.switch.thumbIcon.compact" | "component.switch.trackHeight.comfortable" | "component.switch.trackHeight.compact" | "component.switch.trackWidth.comfortable" | "component.switch.trackWidth.compact" | "component.switch.travel.comfortable" | "component.switch.travel.compact" | "component.tabBar.gap" | "component.tabBar.inlineInset" | "component.tabBar.inset" | "component.tabBar.itemRadius" | "component.tabBar.radius" | "component.tabItem.height.comfortable" | "component.tabItem.height.compact" | "component.tabItem.height.large" | "component.tabItem.height.standard" | "component.tabItem.indicatorInset" | "component.tabItem.indicatorThickness" | "component.tabItem.inset.comfortable" | "component.tabItem.inset.compact" | "component.tabItem.inset.large" | "component.tabItem.inset.standard" | "component.tabItem.radius" | "component.tabItem.rail" | "component.textField.boundary" | "component.textField.gap.label" | "component.textField.gap.messageCounter" | "component.textField.gap.status" | "component.textField.gap.supporting" | "component.textField.height.comfortable" | "component.textField.height.compact" | "component.textField.height.large" | "component.textField.height.standard" | "component.textField.inset.comfortable" | "component.textField.inset.compact" | "component.textField.inset.large" | "component.textField.inset.standard" | "component.textField.radius.comfortable" | "component.textField.radius.compact" | "component.textField.radius.large" | "component.textField.radius.standard" | "component.tokenField.gap" | "component.tokenField.minimumInput" | "component.tokenField.paddingBlock" | "dimension.scale.000" | "dimension.scale.003" | "dimension.scale.006" | "dimension.scale.009" | "dimension.scale.012" | "dimension.scale.015" | "dimension.scale.018" | "dimension.scale.024" | "dimension.scale.030" | "dimension.scale.036" | "dimension.scale.042" | "dimension.scale.048" | "dimension.scale.060" | "dimension.scale.072" | "dimension.scale.084" | "dimension.scale.096" | "dimension.scale.108" | "elevation.surface.blocking" | "elevation.surface.flat" | "elevation.surface.floating" | "elevation.surface.overlay" | "elevation.surface.raised" | "focus.ring.innerWidth" | "focus.ring.offset" | "focus.ring.outerWidth" | "focus.ring.totalWidth" | "font.axis.arrr.baseline" | "font.family.display" | "font.family.fallback" | "font.family.functional" | "font.line.018" | "font.line.024" | "font.line.030" | "font.line.039" | "font.line.048" | "font.line.060" | "font.line.072" | "font.line.096" | "font.line.126" | "font.size.012" | "font.size.016" | "font.size.021" | "font.size.030" | "font.size.039" | "font.size.051" | "font.size.066" | "font.size.090" | "font.size.120" | "font.tracking.displaySoft" | "font.tracking.normal" | "font.tracking.open" | "font.tracking.snug" | "font.tracking.tight" | "font.tracking.tighter" | "font.tracking.titleSoft" | "font.tracking.titleTight" | "font.weight.bold" | "font.weight.regular" | "font.weight.semibold" | "layer.stack.base" | "layer.stack.modal" | "layer.stack.notification" | "layer.stack.overlay" | "layer.stack.sticky" | "material.control.gem.blur" | "material.control.gem.gradient.end" | "material.control.gem.gradient.mid" | "material.control.gem.gradient.start" | "material.control.gem.primary.content" | "material.control.gem.primary.end" | "material.control.gem.primary.hoverEnd" | "material.control.gem.primary.hoverMid" | "material.control.gem.primary.hoverStart" | "material.control.gem.primary.loadingEnd" | "material.control.gem.primary.loadingMid" | "material.control.gem.primary.loadingStart" | "material.control.gem.primary.mid" | "material.control.gem.primary.start" | "material.control.gem.rim.default" | "material.control.gem.rim.hover" | "material.control.gem.rim.specular" | "material.control.gem.secondary.content" | "material.control.gem.secondary.high" | "material.control.gem.secondary.hoverHigh" | "material.control.gem.secondary.hoverLow" | "material.control.gem.secondary.hoverMid" | "material.control.gem.secondary.loadingHigh" | "material.control.gem.secondary.loadingLow" | "material.control.gem.secondary.loadingMid" | "material.control.gem.secondary.low" | "material.control.gem.secondary.mid" | "material.gem.blur.environmental" | "material.gem.blur.stabilized" | "material.gem.color.cutEdge.high" | "material.gem.color.cutEdge.low" | "material.gem.color.cutEdge.mid" | "material.gem.color.cutEdge.outerAccent" | "material.gem.color.cutEdge.outerHigh" | "material.gem.color.cutEdge.outerLow" | "material.gem.color.cutEdge.outerMid" | "material.gem.color.cutEdge.shadow" | "material.gem.color.facet.cool" | "material.gem.color.facet.warm" | "material.gem.color.family.amethyst.edge" | "material.gem.color.family.amethyst.environmentalFace" | "material.gem.color.family.amethyst.innerHigh" | "material.gem.color.family.amethyst.innerLow" | "material.gem.color.family.amethyst.innerMid" | "material.gem.color.family.amethyst.opaqueEquivalent" | "material.gem.color.family.amethyst.stabilizedFace" | "material.gem.color.family.emerald.edge" | "material.gem.color.family.emerald.environmentalFace" | "material.gem.color.family.emerald.innerHigh" | "material.gem.color.family.emerald.innerLow" | "material.gem.color.family.emerald.innerMid" | "material.gem.color.family.emerald.opaqueEquivalent" | "material.gem.color.family.emerald.stabilizedFace" | "material.gem.color.family.ruby.edge" | "material.gem.color.family.ruby.environmentalFace" | "material.gem.color.family.ruby.innerHigh" | "material.gem.color.family.ruby.innerLow" | "material.gem.color.family.ruby.innerMid" | "material.gem.color.family.ruby.opaqueEquivalent" | "material.gem.color.family.ruby.stabilizedFace" | "material.gem.color.family.sapphire.edge" | "material.gem.color.family.sapphire.environmentalFace" | "material.gem.color.family.sapphire.innerHigh" | "material.gem.color.family.sapphire.innerLow" | "material.gem.color.family.sapphire.innerMid" | "material.gem.color.family.sapphire.opaqueEquivalent" | "material.gem.color.family.sapphire.stabilizedFace" | "material.gem.color.innerThinCut.face" | "material.gem.color.innerThinCut.high" | "material.gem.color.innerThinCut.low" | "material.gem.color.innerThinCut.mid" | "material.gem.color.quiet.environmentalFace" | "material.gem.color.quiet.opaqueEquivalent" | "material.gem.color.quiet.stabilizedFace" | "material.gem.opacity.cutDark" | "material.gem.opacity.cutLight" | "material.gem.opacity.edgeHigh" | "material.gem.opacity.edgeLow" | "material.gem.opacity.environmental" | "material.gem.spacing.clusterGap" | "material.gem.spacing.innerSeparation" | "material.gem.spacing.slabInset" | "motion.distance.expansive" | "motion.distance.large" | "motion.distance.minimal" | "motion.distance.short" | "motion.distance.standard" | "motion.duration.deliberate" | "motion.duration.extended" | "motion.duration.fast" | "motion.duration.instant" | "motion.duration.measured" | "motion.duration.quick" | "motion.duration.slow" | "motion.duration.standard" | "motion.easing.enter" | "motion.easing.exit" | "motion.easing.linear" | "motion.easing.standard" | "motion.interaction.focus" | "motion.interaction.hover" | "motion.interaction.press" | "motion.spring.gentle.blend" | "motion.spring.gentle.damping" | "motion.spring.gentle.response" | "motion.spring.interactive.blend" | "motion.spring.interactive.damping" | "motion.spring.interactive.response" | "motion.spring.standard.blend" | "motion.spring.standard.damping" | "motion.spring.standard.response" | "motion.state.change" | "shape.radius.comfortable" | "shape.radius.compact" | "shape.radius.container" | "shape.radius.display" | "shape.radius.full" | "shape.radius.medium" | "shape.radius.none" | "shape.radius.standard" | "shape.radius.subtle" | "size.avatar.display" | "size.avatar.large" | "size.avatar.micro" | "size.avatar.small" | "size.avatar.standard" | "size.avatar.xlarge" | "size.control.comfortable" | "size.control.compact" | "size.control.large" | "size.control.standard" | "size.icon.compact" | "size.icon.display" | "size.icon.hero" | "size.icon.landmark" | "size.icon.large" | "size.icon.medium" | "size.icon.micro" | "size.icon.small" | "size.icon.spacious" | "size.icon.standard" | "size.icon.xlarge" | "size.indicator.large" | "size.indicator.micro" | "size.indicator.small" | "size.indicator.standard" | "size.loader.display" | "size.loader.large" | "size.loader.small" | "size.loader.standard" | "size.target.comfortable" | "size.target.minimum" | "size.target.spacious" | "spacing.inline.minimal" | "spacing.inline.related" | "spacing.inline.standard" | "spacing.inset.comfortable" | "spacing.inset.compact" | "spacing.inset.spacious" | "spacing.inset.standard" | "spacing.layout.gutter" | "spacing.layout.margin" | "spacing.layout.region" | "spacing.none" | "spacing.section.compact" | "spacing.section.expansive" | "spacing.section.spacious" | "spacing.section.standard" | "spacing.stack.grouped" | "spacing.stack.related" | "spacing.stack.separated" | "spacing.stack.tight" | "typography.body.large" | "typography.body.medium" | "typography.body.small" | "typography.display.large" | "typography.display.medium" | "typography.display.small" | "typography.title.large" | "typography.title.medium" | "typography.title.small";
3
3
  export type ColorScheme = "light" | "dark";
4
4
  export type PrimaryFamily = "blue" | "orange" | "green";
5
5
  export type TypographyViewport = "compact" | "medium" | "expanded";
@@ -759,6 +759,12 @@ export const tokens = {
759
759
  "description": "Title, body, controls, and data family.",
760
760
  "tier": "primitive"
761
761
  },
762
+ "font.family.fallback": {
763
+ "type": "fontFamily",
764
+ "value": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
765
+ "description": "System stack every brand face falls back to. Override this to change what renders when a brand face is unavailable or replaced.",
766
+ "tier": "primitive"
767
+ },
762
768
  "font.weight.regular": {
763
769
  "type": "fontWeight",
764
770
  "value": 450,
@@ -1730,6 +1736,15 @@ export const tokens = {
1730
1736
  "description": "Content on a persistent selected surface qualified by the active Primary family.",
1731
1737
  "tier": "semantic"
1732
1738
  },
1739
+ "color.scrim.pressed": {
1740
+ "type": "color",
1741
+ "value": {
1742
+ "color": "#163F4B",
1743
+ "alpha": 0.24
1744
+ },
1745
+ "description": "Pressed darkening laid over a controls own surface. Uses the systems cyan ink, never default black.",
1746
+ "tier": "semantic"
1747
+ },
1733
1748
  "elevation.surface.flat": {
1734
1749
  "type": "shadow",
1735
1750
  "value": [],
@@ -2117,6 +2132,33 @@ export const tokens = {
2117
2132
  "description": "Backdrop blur candidate for transparent Gem controls.",
2118
2133
  "tier": "semantic"
2119
2134
  },
2135
+ "material.control.gem.gradient.start": {
2136
+ "type": "dimension",
2137
+ "value": {
2138
+ "value": 14.639,
2139
+ "unit": "%"
2140
+ },
2141
+ "description": "Gem body gradient leading position, measured from the Figma Gem Button fill.",
2142
+ "tier": "semantic"
2143
+ },
2144
+ "material.control.gem.gradient.mid": {
2145
+ "type": "dimension",
2146
+ "value": {
2147
+ "value": 48.586,
2148
+ "unit": "%"
2149
+ },
2150
+ "description": "Gem body gradient middle position, measured from the Figma Gem Button fill.",
2151
+ "tier": "semantic"
2152
+ },
2153
+ "material.control.gem.gradient.end": {
2154
+ "type": "dimension",
2155
+ "value": {
2156
+ "value": 85.361,
2157
+ "unit": "%"
2158
+ },
2159
+ "description": "Gem body gradient trailing position, measured from the Figma Gem Button fill.",
2160
+ "tier": "semantic"
2161
+ },
2120
2162
  "material.gem.color.quiet.environmentalFace": {
2121
2163
  "type": "color",
2122
2164
  "value": {
@@ -3845,6 +3887,15 @@ export const tokens = {
3845
3887
  "description": "Circular Icon Button radius.",
3846
3888
  "tier": "component"
3847
3889
  },
3890
+ "component.iconButton.pressedScrim": {
3891
+ "type": "color",
3892
+ "value": {
3893
+ "color": "#163F4B",
3894
+ "alpha": 0.24
3895
+ },
3896
+ "description": "Inner pressed edge on Icon Button, drawn as an inset ring rather than an extra node.",
3897
+ "tier": "component"
3898
+ },
3848
3899
  "component.link.underline.default": {
3849
3900
  "type": "dimension",
3850
3901
  "value": {
@@ -5002,6 +5053,7 @@ export const tokenPaths = [
5002
5053
  "color.red.720",
5003
5054
  "color.red.840",
5004
5055
  "color.red.930",
5056
+ "color.scrim.pressed",
5005
5057
  "color.selection.content",
5006
5058
  "color.selection.surface",
5007
5059
  "color.surface.default",
@@ -5100,6 +5152,7 @@ export const tokenPaths = [
5100
5152
  "component.iconButton.box.compact",
5101
5153
  "component.iconButton.box.large",
5102
5154
  "component.iconButton.box.standard",
5155
+ "component.iconButton.pressedScrim",
5103
5156
  "component.iconButton.radius.circle",
5104
5157
  "component.iconButton.radius.comfortable",
5105
5158
  "component.iconButton.radius.compact",
@@ -5219,6 +5272,7 @@ export const tokenPaths = [
5219
5272
  "focus.ring.totalWidth",
5220
5273
  "font.axis.arrr.baseline",
5221
5274
  "font.family.display",
5275
+ "font.family.fallback",
5222
5276
  "font.family.functional",
5223
5277
  "font.line.018",
5224
5278
  "font.line.024",
@@ -5255,6 +5309,9 @@ export const tokenPaths = [
5255
5309
  "layer.stack.overlay",
5256
5310
  "layer.stack.sticky",
5257
5311
  "material.control.gem.blur",
5312
+ "material.control.gem.gradient.end",
5313
+ "material.control.gem.gradient.mid",
5314
+ "material.control.gem.gradient.start",
5258
5315
  "material.control.gem.primary.content",
5259
5316
  "material.control.gem.primary.end",
5260
5317
  "material.control.gem.primary.hoverEnd",
Binary file
Binary file
Binary file
Binary file
package/fonts.css ADDED
@@ -0,0 +1,63 @@
1
+ /* OneLi8 brand faces. Self hosted so the type system works offline and without
2
+ a third party request. Syne and AR One Sans are both SIL OFL 1.1; see
3
+ FONTS-LICENSE.txt. Both are variable: one file carries the whole weight range. */
4
+
5
+ /* Syne · greek */
6
+ @font-face {
7
+ font-family: "Syne";
8
+ font-style: normal;
9
+ font-weight: 400 800;
10
+ font-display: swap;
11
+ src: url("./fonts/syne-greek.woff2") format("woff2");
12
+ unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
13
+ }
14
+
15
+ /* Syne · latin-ext */
16
+ @font-face {
17
+ font-family: "Syne";
18
+ font-style: normal;
19
+ font-weight: 400 800;
20
+ font-display: swap;
21
+ src: url("./fonts/syne-latin-ext.woff2") format("woff2");
22
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
23
+ }
24
+
25
+ /* Syne · latin */
26
+ @font-face {
27
+ font-family: "Syne";
28
+ font-style: normal;
29
+ font-weight: 400 800;
30
+ font-display: swap;
31
+ src: url("./fonts/syne-latin.woff2") format("woff2");
32
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
33
+ }
34
+
35
+ /* AR One Sans · vietnamese */
36
+ @font-face {
37
+ font-family: "AR One Sans";
38
+ font-style: normal;
39
+ font-weight: 400 700;
40
+ font-display: swap;
41
+ src: url("./fonts/ar-one-sans-vietnamese.woff2") format("woff2");
42
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
43
+ }
44
+
45
+ /* AR One Sans · latin-ext */
46
+ @font-face {
47
+ font-family: "AR One Sans";
48
+ font-style: normal;
49
+ font-weight: 400 700;
50
+ font-display: swap;
51
+ src: url("./fonts/ar-one-sans-latin-ext.woff2") format("woff2");
52
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
53
+ }
54
+
55
+ /* AR One Sans · latin */
56
+ @font-face {
57
+ font-family: "AR One Sans";
58
+ font-style: normal;
59
+ font-weight: 400 700;
60
+ font-display: swap;
61
+ src: url("./fonts/ar-one-sans-latin.woff2") format("woff2");
62
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
63
+ }