@oneli8/tokens 1.0.0-beta.2
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.
- package/LICENSE +202 -0
- package/NOTICE +8 -0
- package/README.md +94 -0
- package/build/css/tokens.css +840 -0
- package/build/figma/variables.json +7472 -0
- package/build/manifest.json +22 -0
- package/build/status/components.json +235 -0
- package/build/tailwind/preset.mjs +257 -0
- package/build/tailwind/theme.css +124 -0
- package/build/typescript/index.d.ts +10 -0
- package/build/typescript/index.js +6876 -0
- package/package.json +30 -0
- package/schema/component-status.schema.json +32 -0
- package/schema/token-file.schema.json +31 -0
- package/scripts/build.mjs +191 -0
- package/scripts/test.mjs +96 -0
- package/src/component.json +262 -0
- package/src/primitive.json +211 -0
- package/src/semantic.json +1299 -0
- package/src/themes.json +823 -0
- package/status/components.json +16 -0
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"generated": true,
|
|
3
|
+
"version": "1.0.0-beta.1",
|
|
4
|
+
"counts": {
|
|
5
|
+
"primitive": 169,
|
|
6
|
+
"semantic": 266,
|
|
7
|
+
"component": 151,
|
|
8
|
+
"componentStatuses": 10,
|
|
9
|
+
"figmaVariables": 572,
|
|
10
|
+
"figmaTypographyStyles": 9,
|
|
11
|
+
"figmaElevationStyles": 5
|
|
12
|
+
},
|
|
13
|
+
"outputs": [
|
|
14
|
+
"css/tokens.css",
|
|
15
|
+
"typescript/index.js",
|
|
16
|
+
"typescript/index.d.ts",
|
|
17
|
+
"tailwind/preset.mjs",
|
|
18
|
+
"tailwind/theme.css",
|
|
19
|
+
"figma/variables.json",
|
|
20
|
+
"status/components.json"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://oneli8.org/schema/component-status.schema.json",
|
|
3
|
+
"version": "1.0.0-beta.1",
|
|
4
|
+
"components": [
|
|
5
|
+
{
|
|
6
|
+
"name": "Button",
|
|
7
|
+
"status": "Candidate",
|
|
8
|
+
"designerApproved": true,
|
|
9
|
+
"implementationCertified": false,
|
|
10
|
+
"contractPath": "oneli8-drafts/button-contract.md",
|
|
11
|
+
"implementationPath": "packages/react/src/molecules/Button.js",
|
|
12
|
+
"figmaComponentKey": "15:823;15:824;15:825;15:826;100:3;100:208",
|
|
13
|
+
"knownEvidence": [
|
|
14
|
+
"247/247 structural invariants",
|
|
15
|
+
"Light/Dark and qualified Primary visual approval",
|
|
16
|
+
"Token-only React reference implementation",
|
|
17
|
+
"Verified Code ↔ Figma owner identities and runtime descriptions"
|
|
18
|
+
],
|
|
19
|
+
"missingEvidence": [
|
|
20
|
+
"Assistive-technology and responsive implementation matrix",
|
|
21
|
+
"Cross-platform certification"
|
|
22
|
+
]
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "Icon Button",
|
|
26
|
+
"status": "Candidate",
|
|
27
|
+
"designerApproved": true,
|
|
28
|
+
"implementationCertified": false,
|
|
29
|
+
"contractPath": "oneli8-drafts/icon-button-contract.md",
|
|
30
|
+
"implementationPath": "packages/react/src/molecules/IconButton.js",
|
|
31
|
+
"figmaComponentKey": "86:2;87:26;88:50;89:74;94:98;94:309;94:406;94:503;102:78;102:151;119:202;119:299",
|
|
32
|
+
"knownEvidence": [
|
|
33
|
+
"310/310 structural invariants",
|
|
34
|
+
"Solid and Tonal Glass visual approval",
|
|
35
|
+
"Modular React reference using shared Button Control, Busy Indicator, and Icon Frame atoms",
|
|
36
|
+
"Verified Code ↔ Figma owner identities, icon atom contract, and runtime descriptions"
|
|
37
|
+
],
|
|
38
|
+
"missingEvidence": [
|
|
39
|
+
"Accessible-name and tooltip AT matrix",
|
|
40
|
+
"Cross-platform certification"
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "Link",
|
|
45
|
+
"status": "Candidate",
|
|
46
|
+
"designerApproved": true,
|
|
47
|
+
"implementationCertified": false,
|
|
48
|
+
"contractPath": "oneli8-drafts/link-contract.md",
|
|
49
|
+
"implementationPath": "packages/react/src/molecules/Link.js",
|
|
50
|
+
"figmaComponentKey": "138:260",
|
|
51
|
+
"knownEvidence": [
|
|
52
|
+
"417/417 structural invariants",
|
|
53
|
+
"Six-tier navigation visual approval",
|
|
54
|
+
"Canonical Figma Inline, Standalone, and Navigation sets validated at 90/90 variants",
|
|
55
|
+
"Modular native-anchor React reference with nested Navigation List organism"
|
|
56
|
+
],
|
|
57
|
+
"missingEvidence": [
|
|
58
|
+
"Keyboard and screen-reader matrix",
|
|
59
|
+
"Canonical Figma visual approval",
|
|
60
|
+
"Optional supporting icon treatment intentionally parked",
|
|
61
|
+
"Cross-platform certification"
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "Text Field",
|
|
66
|
+
"status": "Candidate",
|
|
67
|
+
"designerApproved": true,
|
|
68
|
+
"implementationCertified": false,
|
|
69
|
+
"contractPath": "oneli8-drafts/text-field-contract.md",
|
|
70
|
+
"implementationPath": "packages/react/src/molecules/TextField.js",
|
|
71
|
+
"figmaComponentKey": "175:2;177:13;182:33;186:53;211:36;215:226",
|
|
72
|
+
"knownEvidence": [
|
|
73
|
+
"311/311 structural invariants",
|
|
74
|
+
"Form messaging and responsive visual approval",
|
|
75
|
+
"Modular native-input React reference with Regular/Gem material equivalence",
|
|
76
|
+
"Deterministic IME-safe grapheme limiting, native autofill forwarding, and pending-validation semantics",
|
|
77
|
+
"Verified Code ↔ Figma regular/Gem owner identities and runtime descriptions"
|
|
78
|
+
],
|
|
79
|
+
"missingEvidence": [
|
|
80
|
+
"IME, autofill and secure-entry platform matrix",
|
|
81
|
+
"Cross-platform certification"
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "Choice Controls",
|
|
86
|
+
"status": "Candidate",
|
|
87
|
+
"designerApproved": true,
|
|
88
|
+
"implementationCertified": false,
|
|
89
|
+
"contractPath": "oneli8-drafts/choice-controls-contract.md",
|
|
90
|
+
"implementationPath": "packages/react/src/ChoiceControls.js",
|
|
91
|
+
"figmaComponentKey": "252:301;331:1309;273:603;824:1304;825:1591;859:5180",
|
|
92
|
+
"knownEvidence": [
|
|
93
|
+
"345/345 current structural invariants",
|
|
94
|
+
"Checkbox, Radio, Capsule Switch and optional Soft Hexagon visual approval",
|
|
95
|
+
"Shared Primary-family selection semantics",
|
|
96
|
+
"Canonical Figma uses connected private Checkbox, Radio, and Switch indicator sets",
|
|
97
|
+
"Token-only modular React reference for Checkbox, Radio Group, Switch, and Checkbox hierarchy",
|
|
98
|
+
"Deterministic native reset, recursive hierarchy, required-group, and localized synchronization evidence",
|
|
99
|
+
"Checkbox, Radio, Checkbox Hierarchy, Radio Group, Switch Indicator, and Choice Item / Switch Code ↔ Figma identities verified",
|
|
100
|
+
"Canonical public Radio Group owner composes 12 exposed Radio molecule instances across four approved behavior proofs",
|
|
101
|
+
"Radio and Switch reuse the single 24px icon pool through the approved 9px and 12px Icon Frame presentations"
|
|
102
|
+
],
|
|
103
|
+
"missingEvidence": [
|
|
104
|
+
"Input-method and Forced Colors platform matrix",
|
|
105
|
+
"Cross-platform certification"
|
|
106
|
+
]
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"name": "Select and Combobox",
|
|
110
|
+
"status": "Candidate",
|
|
111
|
+
"designerApproved": true,
|
|
112
|
+
"implementationCertified": false,
|
|
113
|
+
"contractPath": "oneli8-drafts/select-combobox-contract.md",
|
|
114
|
+
"implementationPath": "packages/react/src/SelectCombobox.js",
|
|
115
|
+
"figmaComponentKey": "570:122;574:534;583:338;875:1778;883:2159",
|
|
116
|
+
"knownEvidence": [
|
|
117
|
+
"142/142 contract invariants",
|
|
118
|
+
"54/54 specimen invariants",
|
|
119
|
+
"Designer visual approval",
|
|
120
|
+
"Zero raw vectors, zero broken instances, connected Light/Dark + Blue/Orange/Green + Standard/Gem proof",
|
|
121
|
+
"Modular native Select and single-value Combobox React reference using shared Field Shell and Selection Option foundations",
|
|
122
|
+
"Shared Suggested Values rail with deterministic and AI assistance states",
|
|
123
|
+
"Deterministic keyboard and screen-reader semantic gate with named Listbox, active descendant, busy state, and live announcements",
|
|
124
|
+
"Composite keyboard, IME, screen-reader semantics, focus restoration, async-source, and Forced Colors evidence recorded",
|
|
125
|
+
"Selection Option, Popup, and Select Trigger Code ↔ Figma identities verified after the research reset",
|
|
126
|
+
"Canonical public Select and Combobox Figma owners reuse Regular/Gem field molecules, one shared opaque Popup organism, Selection Option molecules, and icon-pool atoms",
|
|
127
|
+
"Material and Size remain the only visual variant axes; Expanded is a Boolean property to prevent anatomy forks",
|
|
128
|
+
"Canonical public Select and Combobox Figma owners visually approved"
|
|
129
|
+
],
|
|
130
|
+
"missingEvidence": [
|
|
131
|
+
"Manual VoiceOver, NVDA/JAWS, TalkBack, and Switch Access matrix",
|
|
132
|
+
"Cross-platform certification"
|
|
133
|
+
]
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"name": "Multi Combobox and Token Field",
|
|
137
|
+
"status": "Candidate",
|
|
138
|
+
"designerApproved": true,
|
|
139
|
+
"implementationCertified": false,
|
|
140
|
+
"contractPath": "oneli8-drafts/multi-combobox-token-field-contract.md",
|
|
141
|
+
"implementationPath": "packages/react/src/MultiCombobox.js",
|
|
142
|
+
"figmaComponentKey": "636:847;897:2106;904:2507;978:4472;906:2898",
|
|
143
|
+
"knownEvidence": [
|
|
144
|
+
"98/98 contract invariants",
|
|
145
|
+
"54/54 specimen invariants",
|
|
146
|
+
"70/70 deterministic interaction invariants",
|
|
147
|
+
"Soft Hexagon geometry visual approval",
|
|
148
|
+
"Approved Compact, Standard, Comfortable, and Large token contract",
|
|
149
|
+
"Atomic React implementation with shared Field Shell, Popup, Button, Text Field, and Icon Frame foundations",
|
|
150
|
+
"Shared Suggested Values rail across inline and Choice Picker presentations",
|
|
151
|
+
"Soft Hexagon only: rejected Neutral oval owners removed 2026-09-08; full parity certification remains pending",
|
|
152
|
+
"Public documentation uses Multi-select Field; MultiCombobox and TokenField remain behavioral code aliases",
|
|
153
|
+
"Canonical public Token owners reuse the approved Choice Chips and canonical Check/Close atoms",
|
|
154
|
+
"Canonical public Multi-select Field owners reuse full-width Regular/Gem Text Field, Token, Text Field Content, and shared aligned opaque Selection Popup owners across Outline/Filled and Soft Hexagon appearance",
|
|
155
|
+
"Canonical public Choice Picker owners promote the approved composition with Material, Commitment, Size, and appearance parity",
|
|
156
|
+
"Choice Picker async source exposes busy, loading, retrieval-error, retry, and localizable result-announcement semantics",
|
|
157
|
+
"Composite keyboard, IME, screen-reader semantics, focus restoration, async-source, and Forced Colors evidence recorded"
|
|
158
|
+
],
|
|
159
|
+
"missingEvidence": [
|
|
160
|
+
"Manual VoiceOver, NVDA/JAWS, TalkBack, and Switch Access matrix",
|
|
161
|
+
"Cross-platform certification"
|
|
162
|
+
]
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"name": "Tabs",
|
|
166
|
+
"status": "Candidate",
|
|
167
|
+
"designerApproved": true,
|
|
168
|
+
"implementationCertified": false,
|
|
169
|
+
"contractPath": "oneli8-drafts/navigation-component-contract.md",
|
|
170
|
+
"implementationPath": "packages/react/src/organisms/Tabs.js",
|
|
171
|
+
"figmaComponentKey": "693:171",
|
|
172
|
+
"knownEvidence": [
|
|
173
|
+
"51/51 navigation specimen invariants",
|
|
174
|
+
"73/73 React navigation invariants",
|
|
175
|
+
"Regular and Gem Figma approval",
|
|
176
|
+
"Compact, Standard, Comfortable, and Large Figma/code parity",
|
|
177
|
+
"Optional badge reuse through one canonical atom",
|
|
178
|
+
"React reference implementation with automatic and manual activation",
|
|
179
|
+
"Deterministic RTL-aware keys, resilient roving focus, required region naming, and owned-panel evidence",
|
|
180
|
+
"Verified portable Code ↔ Figma owner manifest and repository gate"
|
|
181
|
+
],
|
|
182
|
+
"missingEvidence": [
|
|
183
|
+
"Assistive-technology matrix",
|
|
184
|
+
"Browser and cross-platform certification"
|
|
185
|
+
]
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"name": "Segmented Control",
|
|
189
|
+
"status": "Candidate",
|
|
190
|
+
"designerApproved": true,
|
|
191
|
+
"implementationCertified": false,
|
|
192
|
+
"contractPath": "oneli8-drafts/navigation-component-contract.md",
|
|
193
|
+
"implementationPath": "packages/react/src/organisms/SegmentedControl.js",
|
|
194
|
+
"figmaComponentKey": "698:4792",
|
|
195
|
+
"knownEvidence": [
|
|
196
|
+
"Six approved presentations",
|
|
197
|
+
"Compact, Standard, Comfortable, and Large Figma/code parity",
|
|
198
|
+
"Optional badge reuse through one canonical atom",
|
|
199
|
+
"Single, multi, and momentary behavior separation",
|
|
200
|
+
"73/73 React navigation invariants",
|
|
201
|
+
"React reference implementation",
|
|
202
|
+
"Deterministic RTL-aware keys, resilient roving focus, and required region naming evidence",
|
|
203
|
+
"Verified portable Code ↔ Figma owner manifest and repository gate"
|
|
204
|
+
],
|
|
205
|
+
"missingEvidence": [
|
|
206
|
+
"Assistive-technology matrix",
|
|
207
|
+
"Browser and cross-platform certification"
|
|
208
|
+
]
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"name": "Tab Bar",
|
|
212
|
+
"status": "Candidate",
|
|
213
|
+
"designerApproved": true,
|
|
214
|
+
"implementationCertified": false,
|
|
215
|
+
"contractPath": "oneli8-drafts/navigation-component-contract.md",
|
|
216
|
+
"implementationPath": "packages/react/src/organisms/TabBar.js",
|
|
217
|
+
"figmaComponentKey": "701:460",
|
|
218
|
+
"knownEvidence": [
|
|
219
|
+
"Bottom, inline, sidebar, and spatial presentations approved",
|
|
220
|
+
"Compact, Standard, Comfortable, and Large Figma/code parity",
|
|
221
|
+
"Optional badge reuse through one canonical atom",
|
|
222
|
+
"Regular and Gem geometry equivalence",
|
|
223
|
+
"73/73 React navigation invariants",
|
|
224
|
+
"React reference implementation with native links",
|
|
225
|
+
"Deterministic RTL-aware navigation foundation, single-current resolution, and required region naming evidence",
|
|
226
|
+
"Verified portable Code ↔ Figma owner manifest and repository gate"
|
|
227
|
+
],
|
|
228
|
+
"missingEvidence": [
|
|
229
|
+
"Responsive destination-state dogfooding",
|
|
230
|
+
"Browser and cross-platform certification"
|
|
231
|
+
]
|
|
232
|
+
}
|
|
233
|
+
],
|
|
234
|
+
"generated": true
|
|
235
|
+
}
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
// @generated by @oneli8/tokens — do not edit
|
|
2
|
+
export default {
|
|
3
|
+
"theme": {
|
|
4
|
+
"extend": {
|
|
5
|
+
"colors": {
|
|
6
|
+
"ol8": {
|
|
7
|
+
"background-canvas": "var(--ol8-color-background-canvas)",
|
|
8
|
+
"background-subtle": "var(--ol8-color-background-subtle)",
|
|
9
|
+
"background-inverse": "var(--ol8-color-background-inverse)",
|
|
10
|
+
"surface-default": "var(--ol8-color-surface-default)",
|
|
11
|
+
"surface-raised": "var(--ol8-color-surface-raised)",
|
|
12
|
+
"surface-sunken": "var(--ol8-color-surface-sunken)",
|
|
13
|
+
"surface-selected": "var(--ol8-color-surface-selected)",
|
|
14
|
+
"surface-disabled": "var(--ol8-color-surface-disabled)",
|
|
15
|
+
"text-primary": "var(--ol8-color-text-primary)",
|
|
16
|
+
"text-secondary": "var(--ol8-color-text-secondary)",
|
|
17
|
+
"text-muted": "var(--ol8-color-text-muted)",
|
|
18
|
+
"text-disabled": "var(--ol8-color-text-disabled)",
|
|
19
|
+
"text-inverse": "var(--ol8-color-text-inverse)",
|
|
20
|
+
"text-link-default": "var(--ol8-color-text-link-default)",
|
|
21
|
+
"text-link-hover": "var(--ol8-color-text-link-hover)",
|
|
22
|
+
"text-link-pressed": "var(--ol8-color-text-link-pressed)",
|
|
23
|
+
"text-link-visited": "var(--ol8-color-text-link-visited)",
|
|
24
|
+
"icon-primary": "var(--ol8-color-icon-primary)",
|
|
25
|
+
"icon-secondary": "var(--ol8-color-icon-secondary)",
|
|
26
|
+
"icon-muted": "var(--ol8-color-icon-muted)",
|
|
27
|
+
"icon-disabled": "var(--ol8-color-icon-disabled)",
|
|
28
|
+
"icon-inverse": "var(--ol8-color-icon-inverse)",
|
|
29
|
+
"icon-on-gem": "var(--ol8-color-icon-on-gem)",
|
|
30
|
+
"control-thumb": "var(--ol8-color-control-thumb)",
|
|
31
|
+
"border-subtle": "var(--ol8-color-border-subtle)",
|
|
32
|
+
"border-default": "var(--ol8-color-border-default)",
|
|
33
|
+
"border-strong": "var(--ol8-color-border-strong)",
|
|
34
|
+
"border-disabled": "var(--ol8-color-border-disabled)",
|
|
35
|
+
"focus-inner": "var(--ol8-color-focus-inner)",
|
|
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)",
|
|
59
|
+
"icon-button-secondary-hover-surface": "var(--ol8-color-icon-button-secondary-hover-surface)",
|
|
60
|
+
"icon-button-quiet-hover-surface": "var(--ol8-color-icon-button-quiet-hover-surface)",
|
|
61
|
+
"navigation-badge-surface-default": "var(--ol8-color-navigation-badge-surface-default)",
|
|
62
|
+
"navigation-badge-content-default": "var(--ol8-color-navigation-badge-content-default)",
|
|
63
|
+
"navigation-badge-surface-selected": "var(--ol8-color-navigation-badge-surface-selected)",
|
|
64
|
+
"navigation-badge-content-selected": "var(--ol8-color-navigation-badge-content-selected)",
|
|
65
|
+
"navigation-badge-surface-gem": "var(--ol8-color-navigation-badge-surface-gem)",
|
|
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)",
|
|
85
|
+
"selection-surface": "var(--ol8-color-selection-surface)",
|
|
86
|
+
"selection-content": "var(--ol8-color-selection-content)"
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
"spacing": {
|
|
90
|
+
"0": "0px",
|
|
91
|
+
"1": "3px",
|
|
92
|
+
"2": "6px",
|
|
93
|
+
"3": "9px",
|
|
94
|
+
"4": "12px",
|
|
95
|
+
"5": "15px",
|
|
96
|
+
"6": "18px",
|
|
97
|
+
"8": "24px",
|
|
98
|
+
"10": "30px",
|
|
99
|
+
"12": "36px",
|
|
100
|
+
"14": "42px",
|
|
101
|
+
"16": "48px",
|
|
102
|
+
"20": "60px",
|
|
103
|
+
"24": "72px",
|
|
104
|
+
"28": "84px",
|
|
105
|
+
"32": "96px",
|
|
106
|
+
"36": "108px"
|
|
107
|
+
},
|
|
108
|
+
"borderRadius": {
|
|
109
|
+
"none": "0px",
|
|
110
|
+
"subtle": "3px",
|
|
111
|
+
"compact": "6px",
|
|
112
|
+
"medium": "9px",
|
|
113
|
+
"standard": "12px",
|
|
114
|
+
"comfortable": "18px",
|
|
115
|
+
"container": "24px",
|
|
116
|
+
"display": "36px",
|
|
117
|
+
"full": "999px"
|
|
118
|
+
},
|
|
119
|
+
"borderWidth": {
|
|
120
|
+
"none": "0px",
|
|
121
|
+
"hairline": "1px",
|
|
122
|
+
"standard": "2px",
|
|
123
|
+
"strong": "3px"
|
|
124
|
+
},
|
|
125
|
+
"boxShadow": {
|
|
126
|
+
"flat": "var(--ol8-elevation-surface-flat)",
|
|
127
|
+
"raised": "var(--ol8-elevation-surface-raised)",
|
|
128
|
+
"floating": "var(--ol8-elevation-surface-floating)",
|
|
129
|
+
"overlay": "var(--ol8-elevation-surface-overlay)",
|
|
130
|
+
"blocking": "var(--ol8-elevation-surface-blocking)"
|
|
131
|
+
},
|
|
132
|
+
"zIndex": {
|
|
133
|
+
"base": "0",
|
|
134
|
+
"sticky": "300",
|
|
135
|
+
"overlay": "600",
|
|
136
|
+
"modal": "900",
|
|
137
|
+
"notification": "1200"
|
|
138
|
+
},
|
|
139
|
+
"fontFamily": {
|
|
140
|
+
"display": [
|
|
141
|
+
"Syne",
|
|
142
|
+
"system-ui",
|
|
143
|
+
"sans-serif"
|
|
144
|
+
],
|
|
145
|
+
"functional": [
|
|
146
|
+
"AR One Sans",
|
|
147
|
+
"system-ui",
|
|
148
|
+
"sans-serif"
|
|
149
|
+
]
|
|
150
|
+
},
|
|
151
|
+
"fontWeight": {
|
|
152
|
+
"regular": "450",
|
|
153
|
+
"semibold": "600",
|
|
154
|
+
"bold": "690"
|
|
155
|
+
},
|
|
156
|
+
"fontSize": {
|
|
157
|
+
"display-large": [
|
|
158
|
+
"66px",
|
|
159
|
+
{
|
|
160
|
+
"lineHeight": "72px",
|
|
161
|
+
"letterSpacing": "-0.02em",
|
|
162
|
+
"fontWeight": "690",
|
|
163
|
+
"fontFamily": "Syne"
|
|
164
|
+
}
|
|
165
|
+
],
|
|
166
|
+
"display-medium": [
|
|
167
|
+
"51px",
|
|
168
|
+
{
|
|
169
|
+
"lineHeight": "60px",
|
|
170
|
+
"letterSpacing": "-0.015em",
|
|
171
|
+
"fontWeight": "690",
|
|
172
|
+
"fontFamily": "Syne"
|
|
173
|
+
}
|
|
174
|
+
],
|
|
175
|
+
"display-small": [
|
|
176
|
+
"39px",
|
|
177
|
+
{
|
|
178
|
+
"lineHeight": "48px",
|
|
179
|
+
"letterSpacing": "-0.01em",
|
|
180
|
+
"fontWeight": "600",
|
|
181
|
+
"fontFamily": "Syne"
|
|
182
|
+
}
|
|
183
|
+
],
|
|
184
|
+
"title-large": [
|
|
185
|
+
"39px",
|
|
186
|
+
{
|
|
187
|
+
"lineHeight": "48px",
|
|
188
|
+
"letterSpacing": "-0.005em",
|
|
189
|
+
"fontWeight": "600",
|
|
190
|
+
"fontFamily": "AR One Sans"
|
|
191
|
+
}
|
|
192
|
+
],
|
|
193
|
+
"title-medium": [
|
|
194
|
+
"30px",
|
|
195
|
+
{
|
|
196
|
+
"lineHeight": "39px",
|
|
197
|
+
"letterSpacing": "0em",
|
|
198
|
+
"fontWeight": "600",
|
|
199
|
+
"fontFamily": "AR One Sans"
|
|
200
|
+
}
|
|
201
|
+
],
|
|
202
|
+
"title-small": [
|
|
203
|
+
"21px",
|
|
204
|
+
{
|
|
205
|
+
"lineHeight": "30px",
|
|
206
|
+
"letterSpacing": "0em",
|
|
207
|
+
"fontWeight": "600",
|
|
208
|
+
"fontFamily": "AR One Sans"
|
|
209
|
+
}
|
|
210
|
+
],
|
|
211
|
+
"body-large": [
|
|
212
|
+
"21px",
|
|
213
|
+
{
|
|
214
|
+
"lineHeight": "30px",
|
|
215
|
+
"letterSpacing": "0em",
|
|
216
|
+
"fontWeight": "450",
|
|
217
|
+
"fontFamily": "AR One Sans"
|
|
218
|
+
}
|
|
219
|
+
],
|
|
220
|
+
"body-medium": [
|
|
221
|
+
"16px",
|
|
222
|
+
{
|
|
223
|
+
"lineHeight": "24px",
|
|
224
|
+
"letterSpacing": "0em",
|
|
225
|
+
"fontWeight": "450",
|
|
226
|
+
"fontFamily": "AR One Sans"
|
|
227
|
+
}
|
|
228
|
+
],
|
|
229
|
+
"body-small": [
|
|
230
|
+
"12px",
|
|
231
|
+
{
|
|
232
|
+
"lineHeight": "18px",
|
|
233
|
+
"letterSpacing": "0.01em",
|
|
234
|
+
"fontWeight": "450",
|
|
235
|
+
"fontFamily": "AR One Sans"
|
|
236
|
+
}
|
|
237
|
+
]
|
|
238
|
+
},
|
|
239
|
+
"transitionDuration": {
|
|
240
|
+
"instant": "0ms",
|
|
241
|
+
"quick": "90ms",
|
|
242
|
+
"fast": "120ms",
|
|
243
|
+
"standard": "180ms",
|
|
244
|
+
"measured": "240ms",
|
|
245
|
+
"slow": "360ms",
|
|
246
|
+
"deliberate": "480ms",
|
|
247
|
+
"extended": "720ms"
|
|
248
|
+
},
|
|
249
|
+
"transitionTimingFunction": {
|
|
250
|
+
"standard": "cubic-bezier(0.39, 0, 0, 1)",
|
|
251
|
+
"enter": "cubic-bezier(0.12, 0, 0, 1)",
|
|
252
|
+
"exit": "cubic-bezier(0.48, 0, 1, 1)",
|
|
253
|
+
"linear": "cubic-bezier(0, 0, 1, 1)"
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
};
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/* @generated Tailwind CSS v4 theme bridge — do not edit */
|
|
2
|
+
@theme {
|
|
3
|
+
--color-ol8-background-canvas: var(--ol8-color-background-canvas);
|
|
4
|
+
--color-ol8-background-subtle: var(--ol8-color-background-subtle);
|
|
5
|
+
--color-ol8-background-inverse: var(--ol8-color-background-inverse);
|
|
6
|
+
--color-ol8-surface-default: var(--ol8-color-surface-default);
|
|
7
|
+
--color-ol8-surface-raised: var(--ol8-color-surface-raised);
|
|
8
|
+
--color-ol8-surface-sunken: var(--ol8-color-surface-sunken);
|
|
9
|
+
--color-ol8-surface-selected: var(--ol8-color-surface-selected);
|
|
10
|
+
--color-ol8-surface-disabled: var(--ol8-color-surface-disabled);
|
|
11
|
+
--color-ol8-text-primary: var(--ol8-color-text-primary);
|
|
12
|
+
--color-ol8-text-secondary: var(--ol8-color-text-secondary);
|
|
13
|
+
--color-ol8-text-muted: var(--ol8-color-text-muted);
|
|
14
|
+
--color-ol8-text-disabled: var(--ol8-color-text-disabled);
|
|
15
|
+
--color-ol8-text-inverse: var(--ol8-color-text-inverse);
|
|
16
|
+
--color-ol8-text-link-default: var(--ol8-color-text-link-default);
|
|
17
|
+
--color-ol8-text-link-hover: var(--ol8-color-text-link-hover);
|
|
18
|
+
--color-ol8-text-link-pressed: var(--ol8-color-text-link-pressed);
|
|
19
|
+
--color-ol8-text-link-visited: var(--ol8-color-text-link-visited);
|
|
20
|
+
--color-ol8-icon-primary: var(--ol8-color-icon-primary);
|
|
21
|
+
--color-ol8-icon-secondary: var(--ol8-color-icon-secondary);
|
|
22
|
+
--color-ol8-icon-muted: var(--ol8-color-icon-muted);
|
|
23
|
+
--color-ol8-icon-disabled: var(--ol8-color-icon-disabled);
|
|
24
|
+
--color-ol8-icon-inverse: var(--ol8-color-icon-inverse);
|
|
25
|
+
--color-ol8-icon-on-gem: var(--ol8-color-icon-on-gem);
|
|
26
|
+
--color-ol8-control-thumb: var(--ol8-color-control-thumb);
|
|
27
|
+
--color-ol8-border-subtle: var(--ol8-color-border-subtle);
|
|
28
|
+
--color-ol8-border-default: var(--ol8-color-border-default);
|
|
29
|
+
--color-ol8-border-strong: var(--ol8-color-border-strong);
|
|
30
|
+
--color-ol8-border-disabled: var(--ol8-color-border-disabled);
|
|
31
|
+
--color-ol8-focus-inner: var(--ol8-color-focus-inner);
|
|
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);
|
|
55
|
+
--color-ol8-icon-button-secondary-hover-surface: var(--ol8-color-icon-button-secondary-hover-surface);
|
|
56
|
+
--color-ol8-icon-button-quiet-hover-surface: var(--ol8-color-icon-button-quiet-hover-surface);
|
|
57
|
+
--color-ol8-navigation-badge-surface-default: var(--ol8-color-navigation-badge-surface-default);
|
|
58
|
+
--color-ol8-navigation-badge-content-default: var(--ol8-color-navigation-badge-content-default);
|
|
59
|
+
--color-ol8-navigation-badge-surface-selected: var(--ol8-color-navigation-badge-surface-selected);
|
|
60
|
+
--color-ol8-navigation-badge-content-selected: var(--ol8-color-navigation-badge-content-selected);
|
|
61
|
+
--color-ol8-navigation-badge-surface-gem: var(--ol8-color-navigation-badge-surface-gem);
|
|
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);
|
|
81
|
+
--color-ol8-selection-surface: var(--ol8-color-selection-surface);
|
|
82
|
+
--color-ol8-selection-content: var(--ol8-color-selection-content);
|
|
83
|
+
--spacing-0: 0px;
|
|
84
|
+
--spacing-1: 3px;
|
|
85
|
+
--spacing-2: 6px;
|
|
86
|
+
--spacing-3: 9px;
|
|
87
|
+
--spacing-4: 12px;
|
|
88
|
+
--spacing-5: 15px;
|
|
89
|
+
--spacing-6: 18px;
|
|
90
|
+
--spacing-8: 24px;
|
|
91
|
+
--spacing-10: 30px;
|
|
92
|
+
--spacing-12: 36px;
|
|
93
|
+
--spacing-14: 42px;
|
|
94
|
+
--spacing-16: 48px;
|
|
95
|
+
--spacing-20: 60px;
|
|
96
|
+
--spacing-24: 72px;
|
|
97
|
+
--spacing-28: 84px;
|
|
98
|
+
--spacing-32: 96px;
|
|
99
|
+
--spacing-36: 108px;
|
|
100
|
+
--radius-none: 0px;
|
|
101
|
+
--radius-subtle: 3px;
|
|
102
|
+
--radius-compact: 6px;
|
|
103
|
+
--radius-medium: 9px;
|
|
104
|
+
--radius-standard: 12px;
|
|
105
|
+
--radius-comfortable: 18px;
|
|
106
|
+
--radius-container: 24px;
|
|
107
|
+
--radius-display: 36px;
|
|
108
|
+
--radius-full: 999px;
|
|
109
|
+
--shadow-ol8-flat: var(--ol8-elevation-surface-flat);
|
|
110
|
+
--shadow-ol8-raised: var(--ol8-elevation-surface-raised);
|
|
111
|
+
--shadow-ol8-floating: var(--ol8-elevation-surface-floating);
|
|
112
|
+
--shadow-ol8-overlay: var(--ol8-elevation-surface-overlay);
|
|
113
|
+
--shadow-ol8-blocking: var(--ol8-elevation-surface-blocking);
|
|
114
|
+
--z-ol8-base: 0;
|
|
115
|
+
--z-ol8-sticky: 300;
|
|
116
|
+
--z-ol8-overlay: 600;
|
|
117
|
+
--z-ol8-modal: 900;
|
|
118
|
+
--z-ol8-notification: 1200;
|
|
119
|
+
--font-display: "Syne", system-ui, sans-serif;
|
|
120
|
+
--font-functional: "AR One Sans", system-ui, sans-serif;
|
|
121
|
+
--font-weight-regular: 450;
|
|
122
|
+
--font-weight-semibold: 600;
|
|
123
|
+
--font-weight-bold: 690;
|
|
124
|
+
}
|