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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/AGENTS.md +12 -0
  2. package/FONTS-LICENSE.txt +113 -0
  3. package/PRINCIPLES.md +48 -0
  4. package/ai-context.json +53 -0
  5. package/build/css/tokens.css +846 -0
  6. package/build/figma/variables.json +7535 -0
  7. package/build/manifest.json +22 -0
  8. package/build/status/components.json +235 -0
  9. package/build/tailwind/preset.mjs +258 -0
  10. package/build/tailwind/theme.css +125 -0
  11. package/build/typescript/index.d.ts +10 -0
  12. package/build/typescript/index.js +6933 -0
  13. package/fonts/ar-one-sans-latin-ext.woff2 +0 -0
  14. package/fonts/ar-one-sans-latin.woff2 +0 -0
  15. package/fonts/ar-one-sans-vietnamese.woff2 +0 -0
  16. package/fonts/syne-greek.woff2 +0 -0
  17. package/fonts/syne-latin-ext.woff2 +0 -0
  18. package/fonts/syne-latin.woff2 +0 -0
  19. package/fonts.css +63 -0
  20. package/overrides.example.css +53 -0
  21. package/package.json +30 -16
  22. package/schema/component-status.schema.json +32 -0
  23. package/schema/token-file.schema.json +31 -0
  24. package/scripts/build.mjs +246 -0
  25. package/scripts/test.mjs +96 -0
  26. package/src/component.json +1011 -0
  27. package/src/figma-code-syntax.txt +551 -0
  28. package/src/primitive.json +1105 -0
  29. package/src/semantic.json +1998 -0
  30. package/src/themes.json +823 -0
  31. package/status/components.json +16 -0
  32. package/dist/figma/variables.json +0 -3682
  33. package/dist/status/components.json +0 -158
  34. package/dist/tailwind/preset.mjs +0 -335
  35. package/dist/tailwind/theme.css +0 -303
  36. package/dist/tokens.css +0 -597
  37. package/dist/tokens.d.ts +0 -391
  38. package/dist/tokens.js +0 -387
  39. package/src/tokens.json +0 -1936
package/dist/tokens.css DELETED
@@ -1,597 +0,0 @@
1
- /* GENERATED from packages/tokens/src/tokens.json — do not edit.
2
- Source: Figma "Oneli8 Design System — 1.0.0-beta.1", page Foundations (9:7). */
3
- :root {
4
- --ol8-color-blue-120: #9bb3ff;
5
- --ol8-color-blue-240: #6e8fef;
6
- --ol8-color-blue-360: #4d6dd1;
7
- --ol8-color-blue-480: #3854ae;
8
- --ol8-color-blue-600: #2c438b;
9
- --ol8-color-blue-720: #23366f;
10
- --ol8-color-blue-840: #1a2a59;
11
- --ol8-color-blue-930: #101b3a;
12
- --ol8-color-blue-030: #f2f5ff;
13
- --ol8-color-blue-060: #e2e9ff;
14
- --ol8-color-blue-090: #c4d2ff;
15
- --ol8-color-cyan-120: #75d3dd;
16
- --ol8-color-cyan-240: #3ab7c5;
17
- --ol8-color-cyan-360: #2096a7;
18
- --ol8-color-cyan-480: #187789;
19
- --ol8-color-cyan-600: #175f70;
20
- --ol8-color-cyan-720: #174d5b;
21
- --ol8-color-cyan-840: #163f4b;
22
- --ol8-color-cyan-930: #0a252d;
23
- --ol8-color-cyan-030: #effbfc;
24
- --ol8-color-cyan-060: #d5f4f6;
25
- --ol8-color-cyan-090: #aae7ec;
26
- --ol8-color-green-120: #8cd2aa;
27
- --ol8-color-green-240: #58b982;
28
- --ol8-color-green-360: #349a65;
29
- --ol8-color-green-480: #267b50;
30
- --ol8-color-green-600: #216240;
31
- --ol8-color-green-720: #1d4f35;
32
- --ol8-color-green-840: #193f2c;
33
- --ol8-color-green-930: #0c2418;
34
- --ol8-color-green-030: #f1faf5;
35
- --ol8-color-green-060: #dcf3e5;
36
- --ol8-color-green-090: #bce6ce;
37
- --ol8-color-yellow-120: #ffd13d;
38
- --ol8-color-yellow-240: #f0b90b;
39
- --ol8-color-yellow-360: #ce9500;
40
- --ol8-color-yellow-480: #a76f00;
41
- --ol8-color-yellow-600: #825100;
42
- --ol8-color-yellow-720: #613b09;
43
- --ol8-color-yellow-840: #4b2f0d;
44
- --ol8-color-yellow-930: #2b1a08;
45
- --ol8-color-yellow-030: #fff9e8;
46
- --ol8-color-yellow-060: #fff0be;
47
- --ol8-color-yellow-090: #ffe27d;
48
- --ol8-color-orange-120: #ffa54d;
49
- --ol8-color-orange-240: #f47b20;
50
- --ol8-color-orange-360: #d95c0b;
51
- --ol8-color-orange-480: #b74406;
52
- --ol8-color-orange-600: #913408;
53
- --ol8-color-orange-720: #70290d;
54
- --ol8-color-orange-840: #57230f;
55
- --ol8-color-orange-930: #321207;
56
- --ol8-color-orange-030: #fff5ea;
57
- --ol8-color-orange-060: #ffe7cb;
58
- --ol8-color-orange-090: #ffc98f;
59
- --ol8-color-pink-120: #ff94c4;
60
- --ol8-color-pink-240: #f45a9d;
61
- --ol8-color-pink-360: #d9367e;
62
- --ol8-color-pink-480: #b62364;
63
- --ol8-color-pink-600: #931d51;
64
- --ol8-color-pink-720: #771a43;
65
- --ol8-color-pink-840: #62183a;
66
- --ol8-color-pink-930: #3b0920;
67
- --ol8-color-pink-030: #fff1f8;
68
- --ol8-color-pink-060: #ffe1f0;
69
- --ol8-color-pink-090: #ffc3e0;
70
- --ol8-color-violet-120: #c5a4ff;
71
- --ol8-color-violet-240: #a574f2;
72
- --ol8-color-violet-360: #864fd6;
73
- --ol8-color-violet-480: #6c37b2;
74
- --ol8-color-violet-600: #572d8e;
75
- --ol8-color-violet-720: #472671;
76
- --ol8-color-violet-840: #3a225b;
77
- --ol8-color-violet-930: #241238;
78
- --ol8-color-violet-030: #f8f4ff;
79
- --ol8-color-violet-060: #efe6ff;
80
- --ol8-color-violet-090: #dfcdff;
81
- --ol8-color-red-120: #f99a92;
82
- --ol8-color-red-240: #ed6a61;
83
- --ol8-color-red-360: #d6473f;
84
- --ol8-color-red-480: #b6332e;
85
- --ol8-color-red-600: #922824;
86
- --ol8-color-red-720: #772421;
87
- --ol8-color-red-840: #64231f;
88
- --ol8-color-red-930: #380f0d;
89
- --ol8-color-red-030: #fff2f1;
90
- --ol8-color-red-060: #ffe2e0;
91
- --ol8-color-red-090: #ffc8c4;
92
- --ol8-color-neutral-120: #d2c8b6;
93
- --ol8-color-neutral-240: #b0a593;
94
- --ol8-color-neutral-360: #897f70;
95
- --ol8-color-neutral-480: #665e53;
96
- --ol8-color-neutral-600: #4a443d;
97
- --ol8-color-neutral-720: #302d29;
98
- --ol8-color-neutral-840: #20201e;
99
- --ol8-color-neutral-930: #151817;
100
- --ol8-color-neutral-030: #fcfaf3;
101
- --ol8-color-neutral-060: #f5f1e6;
102
- --ol8-color-neutral-090: #e7e0d1;
103
- --ol8-color-primary-120: #9bb3ff;
104
- --ol8-color-primary-240: #6e8fef;
105
- --ol8-color-primary-360: #4d6dd1;
106
- --ol8-color-primary-480: #3854ae;
107
- --ol8-color-primary-600: #2c438b;
108
- --ol8-color-primary-720: #23366f;
109
- --ol8-color-primary-840: #1a2a59;
110
- --ol8-color-primary-930: #101b3a;
111
- --ol8-color-primary-030: #f2f5ff;
112
- --ol8-color-primary-060: #e2e9ff;
113
- --ol8-color-primary-090: #c4d2ff;
114
- --ol8-color-background-canvas: #fcfaf3;
115
- --ol8-color-background-subtle: #f5f1e6;
116
- --ol8-color-background-inverse: var(--ol8-color-primary-930);
117
- --ol8-color-surface-default: #fcfaf3;
118
- --ol8-color-surface-raised: #fcfaf3;
119
- --ol8-color-surface-sunken: #f5f1e6;
120
- --ol8-color-surface-selected: #d5f4f6;
121
- --ol8-color-surface-disabled: #e7e0d1;
122
- --ol8-color-text-primary: #151817;
123
- --ol8-color-text-secondary: #302d29;
124
- --ol8-color-text-muted: #4a443d;
125
- --ol8-color-text-disabled: #665e53;
126
- --ol8-color-text-inverse: #fcfaf3;
127
- --ol8-color-text-link: var(--ol8-color-primary-600);
128
- --ol8-color-icon-primary: #151817;
129
- --ol8-color-icon-secondary: #665e53;
130
- --ol8-color-icon-muted: #897f70;
131
- --ol8-color-icon-disabled: #b0a593;
132
- --ol8-color-icon-inverse: #fcfaf3;
133
- --ol8-color-border-subtle: #e7e0d1;
134
- --ol8-color-border-default: #897f70;
135
- --ol8-color-border-strong: #665e53;
136
- --ol8-color-border-disabled: #665e53;
137
- --ol8-color-focus-inner: var(--ol8-color-primary-030);
138
- --ol8-color-focus-outer: var(--ol8-color-primary-930);
139
- --ol8-color-actionprimary-default: var(--ol8-color-primary-600);
140
- --ol8-color-actionprimary-hover: var(--ol8-color-primary-720);
141
- --ol8-color-actionprimary-pressed: var(--ol8-color-primary-840);
142
- --ol8-color-actionprimary-content: #fcfaf3;
143
- --ol8-color-actionprimary-disabled: #e7e0d1;
144
- --ol8-color-actionprimary-disabledcontent: #665e53;
145
- --ol8-color-actionsecondary-surfacedefault: #00000000;
146
- --ol8-color-actionsecondary-surfacehover: var(--ol8-color-primary-030);
147
- --ol8-color-actionsecondary-surfacepressed: var(--ol8-color-primary-060);
148
- --ol8-color-actionsecondary-surfacedisabled: #00000000;
149
- --ol8-color-actionsecondary-contentdefault: var(--ol8-color-primary-600);
150
- --ol8-color-actionsecondary-contenthover: var(--ol8-color-primary-720);
151
- --ol8-color-actionsecondary-contentpressed: var(--ol8-color-primary-840);
152
- --ol8-color-actionsecondary-contentdisabled: #665e53;
153
- --ol8-color-actionquiet-surfacedefault: #00000000;
154
- --ol8-color-actionquiet-surfacehover: var(--ol8-color-primary-030);
155
- --ol8-color-actionquiet-surfacepressed: var(--ol8-color-primary-060);
156
- --ol8-color-actionquiet-surfacedisabled: #00000000;
157
- --ol8-color-actionquiet-contentdefault: var(--ol8-color-primary-600);
158
- --ol8-color-actionquiet-contenthover: var(--ol8-color-primary-720);
159
- --ol8-color-actionquiet-contentpressed: var(--ol8-color-primary-840);
160
- --ol8-color-actionquiet-contentdisabled: #665e53;
161
- --ol8-color-actiondestructive-default: #922824;
162
- --ol8-color-actiondestructive-hover: #772421;
163
- --ol8-color-actiondestructive-pressed: #64231f;
164
- --ol8-color-actiondestructive-content: #fcfaf3;
165
- --ol8-color-actiondestructive-disabled: #e7e0d1;
166
- --ol8-color-actiondestructive-disabledcontent: #665e53;
167
- --ol8-color-feedbackinformative-surface: #174d5b;
168
- --ol8-color-feedbackinformative-content: #fcfaf3;
169
- --ol8-color-feedbackinformative-inlinecontent: var(--ol8-color-primary-600);
170
- --ol8-color-feedbackpositive-surface: #216240;
171
- --ol8-color-feedbackpositive-content: #fcfaf3;
172
- --ol8-color-feedbackpositive-inlinecontent: #216240;
173
- --ol8-color-feedbackcaution-surface: #ffe27d;
174
- --ol8-color-feedbackcaution-content: #20201e;
175
- --ol8-color-feedbackcaution-inlinecontent: #825100;
176
- --ol8-color-feedbackcritical-surface: #922824;
177
- --ol8-color-feedbackcritical-content: #fcfaf3;
178
- --ol8-color-feedbackcritical-inlinecontent: #b6332e;
179
- --ol8-color-selection-surface: var(--ol8-color-primary-060);
180
- --ol8-color-selection-content: var(--ol8-color-primary-840);
181
- --ol8-color-control-thumb: var(--ol8-color-primary-840);
182
- --ol8-material-gem-color-cutedge-outerhigh: #f5f1e6ed;
183
- --ol8-material-gem-color-cutedge-outermid: #9bb3ff7a;
184
- --ol8-material-gem-color-cutedge-outerlow: #f5f1e608;
185
- --ol8-material-gem-color-cutedge-outeraccent: #2096a75c;
186
- --ol8-material-gem-color-cutedge-high: #f5f1e6b8;
187
- --ol8-material-gem-color-cutedge-mid: #e2e9ff5c;
188
- --ol8-material-gem-color-cutedge-low: #f5f1e608;
189
- --ol8-material-gem-color-cutedge-shadow: #101b3a29;
190
- --ol8-material-gem-color-quiet-environmentalface: #fcfaf37a;
191
- --ol8-material-gem-color-quiet-stabilizedface: #f5f1e6b8;
192
- --ol8-material-gem-color-quiet-opaqueequivalent: #fcfaf3;
193
- --ol8-material-gem-color-innerthincut-face: #f5f1e6b8;
194
- --ol8-material-gem-color-innerthincut-high: #f5f1e68a;
195
- --ol8-material-gem-color-innerthincut-mid: #9bb3ff2e;
196
- --ol8-material-gem-color-innerthincut-low: #f5f1e608;
197
- --ol8-material-gem-color-facet-cool: #2c438b2e;
198
- --ol8-material-gem-color-facet-warm: #f47b201f;
199
- --ol8-material-gem-color-family-emerald-environmentalface: #0c24187a;
200
- --ol8-material-gem-color-family-emerald-stabilizedface: #0c241845;
201
- --ol8-material-gem-color-family-emerald-edge: #58b982a8;
202
- --ol8-material-gem-color-family-emerald-innerhigh: #bce6ce5c;
203
- --ol8-material-gem-color-family-emerald-innermid: #58b9822e;
204
- --ol8-material-gem-color-family-emerald-innerlow: #bce6ce08;
205
- --ol8-material-gem-color-family-emerald-opaqueequivalent: #0c2418;
206
- --ol8-material-gem-color-family-ruby-environmentalface: #380f0d7a;
207
- --ol8-material-gem-color-family-ruby-stabilizedface: #380f0d45;
208
- --ol8-material-gem-color-family-ruby-edge: #ed6a61a8;
209
- --ol8-material-gem-color-family-ruby-innerhigh: #ffc8c45c;
210
- --ol8-material-gem-color-family-ruby-innermid: #ed6a612e;
211
- --ol8-material-gem-color-family-ruby-innerlow: #ffc8c408;
212
- --ol8-material-gem-color-family-ruby-opaqueequivalent: #380f0d;
213
- --ol8-material-gem-color-family-sapphire-environmentalface: #101b3a7a;
214
- --ol8-material-gem-color-family-sapphire-stabilizedface: #101b3a4d;
215
- --ol8-material-gem-color-family-sapphire-edge: #6e8fefa8;
216
- --ol8-material-gem-color-family-sapphire-innerhigh: #e2e9ff63;
217
- --ol8-material-gem-color-family-sapphire-innermid: #6e8fef2e;
218
- --ol8-material-gem-color-family-sapphire-innerlow: #e2e9ff08;
219
- --ol8-material-gem-color-family-sapphire-opaqueequivalent: #101b3a;
220
- --ol8-material-gem-color-family-amethyst-environmentalface: #2412387a;
221
- --ol8-material-gem-color-family-amethyst-stabilizedface: #24123845;
222
- --ol8-material-gem-color-family-amethyst-edge: #a574f2a8;
223
- --ol8-material-gem-color-family-amethyst-innerhigh: #dfcdff5c;
224
- --ol8-material-gem-color-family-amethyst-innermid: #a574f22e;
225
- --ol8-material-gem-color-family-amethyst-innerlow: #dfcdff08;
226
- --ol8-material-gem-color-family-amethyst-opaqueequivalent: #241238;
227
- --ol8-material-control-gem--primary-start: #3854ae;
228
- --ol8-material-control-gem--primary-mid: #2c438b;
229
- --ol8-material-control-gem--primary-end: #23366f;
230
- --ol8-material-control-gem--primary-hover-start: #2c438b;
231
- --ol8-material-control-gem--primary-hover-mid: #23366f;
232
- --ol8-material-control-gem--primary-hover-end: #1a2a59;
233
- --ol8-material-control-gem--primary-loading-start: #23366f;
234
- --ol8-material-control-gem--primary-loading-mid: #1a2a59;
235
- --ol8-material-control-gem--primary-loading-end: #101b3a;
236
- --ol8-material-control-gem--primary-content: #fcfaf3;
237
- --ol8-material-control-gem--secondary-high: #fcfaf338;
238
- --ol8-material-control-gem--secondary-mid: #fcfaf30d;
239
- --ol8-material-control-gem--secondary-low: #fcfaf31f;
240
- --ol8-material-control-gem--secondary-hover-high: #fcfaf34d;
241
- --ol8-material-control-gem--secondary-hover-mid: #fcfaf317;
242
- --ol8-material-control-gem--secondary-hover-low: #fcfaf32e;
243
- --ol8-material-control-gem--secondary-loading-high: #fcfaf363;
244
- --ol8-material-control-gem--secondary-loading-mid: #fcfaf31f;
245
- --ol8-material-control-gem--secondary-loading-low: #fcfaf33d;
246
- --ol8-material-control-gem--secondary-content: #fcfaf3;
247
- --ol8-material-control-gem--rim-default: #fcfaf33d;
248
- --ol8-material-control-gem--rim-specular: #fcfaf38a;
249
- --ol8-material-control-gem--rim-hover: #fcfaf35c;
250
- --ol8-material-control-gem--blur: 12px;
251
- --ol8-material-control-gem--stop-1: 14.639%;
252
- --ol8-material-control-gem--stop-2: 48.586%;
253
- --ol8-material-control-gem--stop-3: 85.361%;
254
- --ol8-dimension-scale-108: 108px;
255
- --ol8-dimension-scale-000: 0px;
256
- --ol8-dimension-scale-003: 3px;
257
- --ol8-dimension-scale-006: 6px;
258
- --ol8-dimension-scale-009: 9px;
259
- --ol8-dimension-scale-012: 12px;
260
- --ol8-dimension-scale-015: 15px;
261
- --ol8-dimension-scale-018: 18px;
262
- --ol8-dimension-scale-024: 24px;
263
- --ol8-dimension-scale-030: 30px;
264
- --ol8-dimension-scale-036: 36px;
265
- --ol8-dimension-scale-042: 42px;
266
- --ol8-dimension-scale-048: 48px;
267
- --ol8-dimension-scale-060: 60px;
268
- --ol8-dimension-scale-072: 72px;
269
- --ol8-dimension-scale-084: 84px;
270
- --ol8-dimension-scale-096: 96px;
271
- --ol8-shape-radius-none: 0px;
272
- --ol8-shape-radius-subtle: 3px;
273
- --ol8-shape-radius-compact: 6px;
274
- --ol8-shape-radius-medium: 9px;
275
- --ol8-shape-radius-standard: 12px;
276
- --ol8-shape-radius-comfortable: 18px;
277
- --ol8-shape-radius-container: 24px;
278
- --ol8-shape-radius-display: 36px;
279
- --ol8-shape-radius-full: 999px;
280
- --ol8-font-family-display: "Syne", ui-sans-serif, system-ui, sans-serif;
281
- --ol8-font-family-functional: "AR One Sans", ui-sans-serif, system-ui, sans-serif;
282
- --ol8-font-size-012: 12px;
283
- --ol8-font-size-016: 16px;
284
- --ol8-font-size-021: 21px;
285
- --ol8-font-size-030: 30px;
286
- --ol8-font-size-039: 39px;
287
- --ol8-font-size-051: 51px;
288
- --ol8-font-size-066: 66px;
289
- --ol8-font-line-018: 18px;
290
- --ol8-font-line-024: 24px;
291
- --ol8-font-line-030: 30px;
292
- --ol8-font-line-039: 39px;
293
- --ol8-font-line-048: 48px;
294
- --ol8-font-line-060: 60px;
295
- --ol8-font-line-072: 72px;
296
- --ol8-font-weight-regular: 450;
297
- --ol8-font-weight-semibold: 600;
298
- --ol8-font-weight-bold: 690;
299
- --ol8-font-variation-functional: "ARRR" 10;
300
- --ol8-border-width-standard: 2px;
301
- --ol8-spacing-stack-grouped: 18px;
302
- --ol8-spacing-stack-related: 12px;
303
- --ol8-spacing-inset-standard: 18px;
304
- --ol8-elevation-flat: none;
305
- --ol8-elevation-raised: 0 3px 6px 0 rgba(22,63,75,0.12);
306
- --ol8-elevation-floating: 0 3px 6px 0 rgba(22,63,75,0.12), 0 6px 18px -3px rgba(22,63,75,0.18);
307
- --ol8-elevation-overlay: 0 6px 12px 0 rgba(22,63,75,0.18), 0 12px 36px -6px rgba(22,63,75,0.24);
308
- --ol8-elevation-blocking: 0 12px 24px 0 rgba(22,63,75,0.24), 0 24px 72px -12px rgba(22,63,75,0.36);
309
- --ol8-icon-source-size: 24px;
310
- --ol8-icon-source-stroke: 1.8;
311
- --ol8-icon-size-108: 108px;
312
- --ol8-icon-size-009: 9px;
313
- --ol8-icon-size-012: 12px;
314
- --ol8-icon-size-018: 18px;
315
- --ol8-icon-size-024: 24px;
316
- --ol8-icon-size-030: 30px;
317
- --ol8-icon-size-036: 36px;
318
- --ol8-icon-size-048: 48px;
319
- --ol8-icon-size-060: 60px;
320
- --ol8-icon-size-072: 72px;
321
- --ol8-icon-size-096: 96px;
322
- --ol8-component-choice-chip-terminal: 12px;
323
- --ol8-component-choice-chip-height-standard: 36px;
324
- --ol8-component-choice-chip-target-standard: 48px;
325
- --ol8-component-choice-chip-rail-inset-standard: 12px;
326
- --ol8-component-button-gap-compact: 6px;
327
- --ol8-component-button-gap-comfortable: 9px;
328
- --ol8-component-button-paddinginline-compact: 12px;
329
- --ol8-component-button-paddinginline-standard: 15px;
330
- --ol8-component-button-paddinginline-comfortable: 18px;
331
- --ol8-component-button-paddinginline-large: 24px;
332
- --ol8-component-button-height-compact: 36px;
333
- --ol8-component-button-height-standard: 42px;
334
- --ol8-component-button-height-comfortable: 48px;
335
- --ol8-component-button-height-large: 60px;
336
- --ol8-component-button-radius-compact: 6px;
337
- --ol8-component-button-radius-standard: 9px;
338
- --ol8-component-button-radius-comfortable: 12px;
339
- --ol8-component-button-radius-large: 12px;
340
- --ol8-component-button-secondaryboundary: 2px;
341
- --ol8-component-icon-stroke: 1.8;
342
- --ol8-component-iconbutton-box-compact: 36px;
343
- --ol8-component-iconbutton-box-standard: 42px;
344
- --ol8-component-iconbutton-box-comfortable: 48px;
345
- --ol8-component-iconbutton-box-large: 60px;
346
- --ol8-component-iconbutton-target-compact: 48px;
347
- --ol8-component-iconbutton-target-standard: 48px;
348
- --ol8-component-iconbutton-target-comfortable: 48px;
349
- --ol8-component-iconbutton-target-large: 60px;
350
- --ol8-component-iconbutton-radius-compact: 9px;
351
- --ol8-component-iconbutton-radius-standard: 12px;
352
- --ol8-component-iconbutton-radius-comfortable: 12px;
353
- --ol8-component-iconbutton-radius-large: 18px;
354
- --ol8-component-iconbutton-artwork-compact: 18px;
355
- --ol8-component-iconbutton-artwork-standard: 18px;
356
- --ol8-component-iconbutton-artwork-comfortable: 24px;
357
- --ol8-component-iconbutton-artwork-large: 24px;
358
- --ol8-component-iconbutton-pressedscrim: rgba(0,0,0,0.24);
359
- --ol8-component-checkbox-radius-compact: 3px;
360
- --ol8-component-checkbox-radius-comfortable: 6px;
361
- --ol8-component-checkbox-boundary: 1.8px;
362
- --ol8-component-radio-boundary: 1.8px;
363
- --ol8-component-radio-dot-compact: 9px;
364
- --ol8-component-radio-dot-comfortable: 12px;
365
- --ol8-component-switch-trackwidth-compact: 36px;
366
- --ol8-component-switch-trackwidth-comfortable: 48px;
367
- --ol8-component-switch-trackheight-compact: 18px;
368
- --ol8-component-switch-trackheight-comfortable: 24px;
369
- --ol8-component-switch-thumb-compact: 12px;
370
- --ol8-component-switch-thumb-comfortable: 18px;
371
- --ol8-component-switch-inset: 3px;
372
- --ol8-component-choice-optical-stroke: 1.8px;
373
- --ol8-component-choice-mixed-bar-width: 9px;
374
- --ol8-component-choice-mixed-bar-height: 1.8px;
375
- --ol8-component-choice-gap-compact: 6px;
376
- --ol8-component-choice-gap-standard: 9px;
377
- --ol8-component-choice-rowminimum: 48px;
378
- --ol8-component-selectionoption-inset-standard: 12px;
379
- --ol8-component-selectionoption-inset-large: 15px;
380
- --ol8-component-selectionoption-minimum-standard: 48px;
381
- --ol8-component-selectionoption-minimum-large: 60px;
382
- --ol8-focus-ring-innerwidth: 3px;
383
- --ol8-focus-ring-outerwidth: 3px;
384
- --ol8-size-icon-small: 18px;
385
- --ol8-size-icon-standard: 24px;
386
- --ol8-size-icon-micro: 9px;
387
- --ol8-size-icon-compact: 12px;
388
- }
389
-
390
- [data-ol8-color-scheme="dark"] {
391
- --ol8-color-background-canvas: var(--ol8-color-neutral-930);
392
- --ol8-color-background-subtle: var(--ol8-color-neutral-840);
393
- --ol8-color-background-inverse: var(--ol8-color-neutral-030);
394
- --ol8-color-surface-default: var(--ol8-color-neutral-840);
395
- --ol8-color-surface-raised: var(--ol8-color-neutral-720);
396
- --ol8-color-surface-sunken: var(--ol8-color-neutral-930);
397
- --ol8-color-surface-selected: var(--ol8-color-primary-120);
398
- --ol8-color-surface-disabled: var(--ol8-color-blue-840);
399
- --ol8-color-text-primary: var(--ol8-color-neutral-030);
400
- --ol8-color-text-secondary: var(--ol8-color-neutral-120);
401
- --ol8-color-text-muted: var(--ol8-color-neutral-240);
402
- --ol8-color-text-disabled: var(--ol8-color-neutral-240);
403
- --ol8-color-text-inverse: var(--ol8-color-neutral-930);
404
- --ol8-color-text-link: var(--ol8-color-primary-120);
405
- --ol8-color-icon-primary: var(--ol8-color-neutral-030);
406
- --ol8-color-icon-secondary: var(--ol8-color-neutral-120);
407
- --ol8-color-icon-muted: var(--ol8-color-neutral-240);
408
- --ol8-color-icon-disabled: var(--ol8-color-neutral-360);
409
- --ol8-color-icon-inverse: var(--ol8-color-neutral-930);
410
- --ol8-color-border-subtle: var(--ol8-color-neutral-720);
411
- --ol8-color-border-default: var(--ol8-color-neutral-240);
412
- --ol8-color-border-strong: var(--ol8-color-neutral-120);
413
- --ol8-color-border-disabled: var(--ol8-color-neutral-240);
414
- --ol8-color-focus-inner: var(--ol8-color-primary-930);
415
- --ol8-color-focus-outer: var(--ol8-color-primary-030);
416
- --ol8-color-actionprimary-default: var(--ol8-color-primary-120);
417
- --ol8-color-actionprimary-hover: var(--ol8-color-primary-090);
418
- --ol8-color-actionprimary-pressed: var(--ol8-color-primary-060);
419
- --ol8-color-actionprimary-content: var(--ol8-color-primary-930);
420
- --ol8-color-actionprimary-disabled: var(--ol8-color-blue-840);
421
- --ol8-color-actionprimary-disabledcontent: var(--ol8-color-neutral-240);
422
- --ol8-color-actionsecondary-surfacedefault: #00000000;
423
- --ol8-color-actionsecondary-surfacehover: var(--ol8-color-primary-930);
424
- --ol8-color-actionsecondary-surfacepressed: var(--ol8-color-primary-840);
425
- --ol8-color-actionsecondary-surfacedisabled: #00000000;
426
- --ol8-color-actionsecondary-contentdefault: var(--ol8-color-primary-120);
427
- --ol8-color-actionsecondary-contenthover: var(--ol8-color-primary-120);
428
- --ol8-color-actionsecondary-contentpressed: var(--ol8-color-primary-090);
429
- --ol8-color-actionsecondary-contentdisabled: var(--ol8-color-neutral-240);
430
- --ol8-color-actionquiet-surfacedefault: #00000000;
431
- --ol8-color-actionquiet-surfacehover: var(--ol8-color-primary-930);
432
- --ol8-color-actionquiet-surfacepressed: var(--ol8-color-primary-840);
433
- --ol8-color-actionquiet-surfacedisabled: #00000000;
434
- --ol8-color-actionquiet-contentdefault: var(--ol8-color-primary-120);
435
- --ol8-color-actionquiet-contenthover: var(--ol8-color-primary-120);
436
- --ol8-color-actionquiet-contentpressed: var(--ol8-color-primary-090);
437
- --ol8-color-actionquiet-contentdisabled: var(--ol8-color-neutral-240);
438
- --ol8-color-actiondestructive-default: var(--ol8-color-red-120);
439
- --ol8-color-actiondestructive-hover: var(--ol8-color-red-090);
440
- --ol8-color-actiondestructive-pressed: var(--ol8-color-red-060);
441
- --ol8-color-actiondestructive-content: var(--ol8-color-red-930);
442
- --ol8-color-actiondestructive-disabled: var(--ol8-color-blue-840);
443
- --ol8-color-actiondestructive-disabledcontent: var(--ol8-color-neutral-240);
444
- --ol8-color-feedbackinformative-surface: var(--ol8-color-cyan-120);
445
- --ol8-color-feedbackinformative-content: var(--ol8-color-cyan-930);
446
- --ol8-color-feedbackinformative-inlinecontent: var(--ol8-color-blue-120);
447
- --ol8-color-feedbackpositive-surface: var(--ol8-color-green-120);
448
- --ol8-color-feedbackpositive-content: var(--ol8-color-green-930);
449
- --ol8-color-feedbackpositive-inlinecontent: var(--ol8-color-green-120);
450
- --ol8-color-feedbackcaution-surface: var(--ol8-color-yellow-120);
451
- --ol8-color-feedbackcaution-content: var(--ol8-color-yellow-930);
452
- --ol8-color-feedbackcaution-inlinecontent: var(--ol8-color-yellow-120);
453
- --ol8-color-feedbackcritical-surface: var(--ol8-color-red-120);
454
- --ol8-color-feedbackcritical-content: var(--ol8-color-red-930);
455
- --ol8-color-feedbackcritical-inlinecontent: var(--ol8-color-red-120);
456
- --ol8-color-selection-surface: var(--ol8-color-primary-120);
457
- --ol8-color-selection-content: var(--ol8-color-primary-930);
458
- --ol8-material-control-gem--primary-start: var(--ol8-color-primary-600);
459
- --ol8-material-control-gem--primary-mid: var(--ol8-color-primary-720);
460
- --ol8-material-control-gem--primary-end: var(--ol8-color-primary-840);
461
- --ol8-material-control-gem--primary-hover-start: var(--ol8-color-primary-720);
462
- --ol8-material-control-gem--primary-hover-mid: var(--ol8-color-primary-840);
463
- --ol8-material-control-gem--primary-hover-end: var(--ol8-color-primary-930);
464
- --ol8-material-gem-color-quiet-environmentalface: #1518177a;
465
- --ol8-material-gem-color-quiet-stabilizedface: #20201eb8;
466
- --ol8-material-gem-color-quiet-opaqueequivalent: var(--ol8-color-neutral-840);
467
- --ol8-material-gem-color-cutedge-high: #d2c8b66b;
468
- --ol8-material-gem-color-cutedge-mid: #9bb3ff33;
469
- --ol8-material-gem-color-cutedge-low: #d2c8b608;
470
- --ol8-material-gem-color-cutedge-shadow: #0a252d5c;
471
- --ol8-material-gem-color-innerthincut-face: #20201eb8;
472
- --ol8-material-gem-color-innerthincut-high: #d2c8b645;
473
- --ol8-material-gem-color-innerthincut-mid: #9bb3ff1f;
474
- --ol8-material-gem-color-innerthincut-low: #d2c8b608;
475
- --ol8-material-gem-color-facet-cool: #9bb3ff24;
476
- --ol8-material-gem-color-facet-warm: #ffa54d17;
477
- }
478
-
479
- [data-ol8-primary="blue"] {
480
- --ol8-color-primary-030: var(--ol8-color-blue-030);
481
- --ol8-color-primary-060: var(--ol8-color-blue-060);
482
- --ol8-color-primary-090: var(--ol8-color-blue-090);
483
- --ol8-color-primary-120: var(--ol8-color-blue-120);
484
- --ol8-color-primary-240: var(--ol8-color-blue-240);
485
- --ol8-color-primary-360: var(--ol8-color-blue-360);
486
- --ol8-color-primary-480: var(--ol8-color-blue-480);
487
- --ol8-color-primary-600: var(--ol8-color-blue-600);
488
- --ol8-color-primary-720: var(--ol8-color-blue-720);
489
- --ol8-color-primary-840: var(--ol8-color-blue-840);
490
- --ol8-color-primary-930: var(--ol8-color-blue-930);
491
- }
492
-
493
- [data-ol8-primary="orange"] {
494
- --ol8-color-primary-030: var(--ol8-color-orange-030);
495
- --ol8-color-primary-060: var(--ol8-color-orange-060);
496
- --ol8-color-primary-090: var(--ol8-color-orange-090);
497
- --ol8-color-primary-120: var(--ol8-color-orange-120);
498
- --ol8-color-primary-240: var(--ol8-color-orange-240);
499
- --ol8-color-primary-360: var(--ol8-color-orange-360);
500
- --ol8-color-primary-480: var(--ol8-color-orange-480);
501
- --ol8-color-primary-600: var(--ol8-color-orange-600);
502
- --ol8-color-primary-720: var(--ol8-color-orange-720);
503
- --ol8-color-primary-840: var(--ol8-color-orange-840);
504
- --ol8-color-primary-930: var(--ol8-color-orange-930);
505
- }
506
-
507
- [data-ol8-primary="green"] {
508
- --ol8-color-primary-030: var(--ol8-color-green-030);
509
- --ol8-color-primary-060: var(--ol8-color-green-060);
510
- --ol8-color-primary-090: var(--ol8-color-green-090);
511
- --ol8-color-primary-120: var(--ol8-color-green-120);
512
- --ol8-color-primary-240: var(--ol8-color-green-240);
513
- --ol8-color-primary-360: var(--ol8-color-green-360);
514
- --ol8-color-primary-480: var(--ol8-color-green-480);
515
- --ol8-color-primary-600: var(--ol8-color-green-600);
516
- --ol8-color-primary-720: var(--ol8-color-green-720);
517
- --ol8-color-primary-840: var(--ol8-color-green-840);
518
- --ol8-color-primary-930: var(--ol8-color-green-930);
519
- }
520
-
521
- .ol8-type-display-large {
522
- font-family: var(--ol8-font-family-display);
523
- font-size: var(--ol8-font-size-066);
524
- line-height: var(--ol8-font-line-072);
525
- font-weight: var(--ol8-font-weight-bold);
526
- letter-spacing: -2px;
527
- }
528
-
529
- .ol8-type-display-medium {
530
- font-family: var(--ol8-font-family-display);
531
- font-size: var(--ol8-font-size-051);
532
- line-height: var(--ol8-font-line-060);
533
- font-weight: var(--ol8-font-weight-bold);
534
- letter-spacing: -1.5px;
535
- }
536
-
537
- .ol8-type-display-small {
538
- font-family: var(--ol8-font-family-display);
539
- font-size: var(--ol8-font-size-039);
540
- line-height: var(--ol8-font-line-048);
541
- font-weight: var(--ol8-font-weight-semibold);
542
- letter-spacing: -1px;
543
- }
544
-
545
- .ol8-type-title-large {
546
- font-family: var(--ol8-font-family-functional);
547
- font-size: var(--ol8-font-size-039);
548
- line-height: var(--ol8-font-line-048);
549
- font-weight: var(--ol8-font-weight-semibold);
550
- letter-spacing: -0.5px;
551
- font-variation-settings: var(--ol8-font-variation-functional);
552
- }
553
-
554
- .ol8-type-title-medium {
555
- font-family: var(--ol8-font-family-functional);
556
- font-size: var(--ol8-font-size-030);
557
- line-height: var(--ol8-font-line-039);
558
- font-weight: var(--ol8-font-weight-semibold);
559
- letter-spacing: 0px;
560
- font-variation-settings: var(--ol8-font-variation-functional);
561
- }
562
-
563
- .ol8-type-title-small {
564
- font-family: var(--ol8-font-family-functional);
565
- font-size: var(--ol8-font-size-021);
566
- line-height: var(--ol8-font-line-030);
567
- font-weight: var(--ol8-font-weight-semibold);
568
- letter-spacing: 0px;
569
- font-variation-settings: var(--ol8-font-variation-functional);
570
- }
571
-
572
- .ol8-type-body-large {
573
- font-family: var(--ol8-font-family-functional);
574
- font-size: var(--ol8-font-size-021);
575
- line-height: var(--ol8-font-line-030);
576
- font-weight: var(--ol8-font-weight-regular);
577
- letter-spacing: 0px;
578
- font-variation-settings: var(--ol8-font-variation-functional);
579
- }
580
-
581
- .ol8-type-body-medium {
582
- font-family: var(--ol8-font-family-functional);
583
- font-size: var(--ol8-font-size-016);
584
- line-height: var(--ol8-font-line-024);
585
- font-weight: var(--ol8-font-weight-regular);
586
- letter-spacing: 0px;
587
- font-variation-settings: var(--ol8-font-variation-functional);
588
- }
589
-
590
- .ol8-type-body-small {
591
- font-family: var(--ol8-font-family-functional);
592
- font-size: var(--ol8-font-size-012);
593
- line-height: var(--ol8-font-line-018);
594
- font-weight: var(--ol8-font-weight-regular);
595
- letter-spacing: 1px;
596
- font-variation-settings: var(--ol8-font-variation-functional);
597
- }