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

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.
@@ -1,840 +0,0 @@
1
- /* @generated by @oneli8/tokens — do not edit */
2
- :root {
3
- --ol8-color-blue-120: #9BB3FF;
4
- --ol8-color-blue-240: #6E8FEF;
5
- --ol8-color-blue-360: #4D6DD1;
6
- --ol8-color-blue-480: #3854AE;
7
- --ol8-color-blue-600: #2C438B;
8
- --ol8-color-blue-720: #23366F;
9
- --ol8-color-blue-840: #1A2A59;
10
- --ol8-color-blue-930: #101B3A;
11
- --ol8-color-blue-030: #F2F5FF;
12
- --ol8-color-blue-060: #E2E9FF;
13
- --ol8-color-blue-090: #C4D2FF;
14
- --ol8-color-cyan-120: #75D3DD;
15
- --ol8-color-cyan-240: #3AB7C5;
16
- --ol8-color-cyan-360: #2096A7;
17
- --ol8-color-cyan-480: #187789;
18
- --ol8-color-cyan-600: #175F70;
19
- --ol8-color-cyan-720: #174D5B;
20
- --ol8-color-cyan-840: #163F4B;
21
- --ol8-color-cyan-930: #0A252D;
22
- --ol8-color-cyan-030: #EFFBFC;
23
- --ol8-color-cyan-060: #D5F4F6;
24
- --ol8-color-cyan-090: #AAE7EC;
25
- --ol8-color-green-120: #8CD2AA;
26
- --ol8-color-green-240: #58B982;
27
- --ol8-color-green-360: #349A65;
28
- --ol8-color-green-480: #267B50;
29
- --ol8-color-green-600: #216240;
30
- --ol8-color-green-720: #1D4F35;
31
- --ol8-color-green-840: #193F2C;
32
- --ol8-color-green-930: #0C2418;
33
- --ol8-color-green-030: #F1FAF5;
34
- --ol8-color-green-060: #DCF3E5;
35
- --ol8-color-green-090: #BCE6CE;
36
- --ol8-color-yellow-120: #FFD13D;
37
- --ol8-color-yellow-240: #F0B90B;
38
- --ol8-color-yellow-360: #CE9500;
39
- --ol8-color-yellow-480: #A76F00;
40
- --ol8-color-yellow-600: #825100;
41
- --ol8-color-yellow-720: #613B09;
42
- --ol8-color-yellow-840: #4B2F0D;
43
- --ol8-color-yellow-930: #2B1A08;
44
- --ol8-color-yellow-030: #FFF9E8;
45
- --ol8-color-yellow-060: #FFF0BE;
46
- --ol8-color-yellow-090: #FFE27D;
47
- --ol8-color-orange-120: #FFA54D;
48
- --ol8-color-orange-240: #F47B20;
49
- --ol8-color-orange-360: #D95C0B;
50
- --ol8-color-orange-480: #B74406;
51
- --ol8-color-orange-600: #913408;
52
- --ol8-color-orange-720: #70290D;
53
- --ol8-color-orange-840: #57230F;
54
- --ol8-color-orange-930: #321207;
55
- --ol8-color-orange-030: #FFF5EA;
56
- --ol8-color-orange-060: #FFE7CB;
57
- --ol8-color-orange-090: #FFC98F;
58
- --ol8-color-pink-120: #FF94C4;
59
- --ol8-color-pink-240: #F45A9D;
60
- --ol8-color-pink-360: #D9367E;
61
- --ol8-color-pink-480: #B62364;
62
- --ol8-color-pink-600: #931D51;
63
- --ol8-color-pink-720: #771A43;
64
- --ol8-color-pink-840: #62183A;
65
- --ol8-color-pink-930: #3B0920;
66
- --ol8-color-pink-030: #FFF1F8;
67
- --ol8-color-pink-060: #FFE1F0;
68
- --ol8-color-pink-090: #FFC3E0;
69
- --ol8-color-violet-120: #C5A4FF;
70
- --ol8-color-violet-240: #A574F2;
71
- --ol8-color-violet-360: #864FD6;
72
- --ol8-color-violet-480: #6C37B2;
73
- --ol8-color-violet-600: #572D8E;
74
- --ol8-color-violet-720: #472671;
75
- --ol8-color-violet-840: #3A225B;
76
- --ol8-color-violet-930: #241238;
77
- --ol8-color-violet-030: #F8F4FF;
78
- --ol8-color-violet-060: #EFE6FF;
79
- --ol8-color-violet-090: #DFCDFF;
80
- --ol8-color-red-120: #F99A92;
81
- --ol8-color-red-240: #ED6A61;
82
- --ol8-color-red-360: #D6473F;
83
- --ol8-color-red-480: #B6332E;
84
- --ol8-color-red-600: #922824;
85
- --ol8-color-red-720: #772421;
86
- --ol8-color-red-840: #64231F;
87
- --ol8-color-red-930: #380F0D;
88
- --ol8-color-red-030: #FFF2F1;
89
- --ol8-color-red-060: #FFE2E0;
90
- --ol8-color-red-090: #FFC8C4;
91
- --ol8-color-neutral-120: #D2C8B6;
92
- --ol8-color-neutral-240: #B0A593;
93
- --ol8-color-neutral-360: #897F70;
94
- --ol8-color-neutral-480: #665E53;
95
- --ol8-color-neutral-600: #4A443D;
96
- --ol8-color-neutral-720: #302D29;
97
- --ol8-color-neutral-840: #20201E;
98
- --ol8-color-neutral-930: #151817;
99
- --ol8-color-neutral-030: #FCFAF3;
100
- --ol8-color-neutral-060: #F5F1E6;
101
- --ol8-color-neutral-090: #E7E0D1;
102
- --ol8-dimension-scale-108: 108px;
103
- --ol8-dimension-scale-000: 0px;
104
- --ol8-dimension-scale-003: 3px;
105
- --ol8-dimension-scale-006: 6px;
106
- --ol8-dimension-scale-009: 9px;
107
- --ol8-dimension-scale-012: 12px;
108
- --ol8-dimension-scale-015: 15px;
109
- --ol8-dimension-scale-018: 18px;
110
- --ol8-dimension-scale-024: 24px;
111
- --ol8-dimension-scale-030: 30px;
112
- --ol8-dimension-scale-036: 36px;
113
- --ol8-dimension-scale-042: 42px;
114
- --ol8-dimension-scale-048: 48px;
115
- --ol8-dimension-scale-060: 60px;
116
- --ol8-dimension-scale-072: 72px;
117
- --ol8-dimension-scale-084: 84px;
118
- --ol8-dimension-scale-096: 96px;
119
- --ol8-font-family-display: Syne;
120
- --ol8-font-family-functional: AR One Sans;
121
- --ol8-font-weight-regular: 450;
122
- --ol8-font-weight-semibold: 600;
123
- --ol8-font-weight-bold: 690;
124
- --ol8-font-size-120: 120px;
125
- --ol8-font-size-012: 12px;
126
- --ol8-font-size-016: 16px;
127
- --ol8-font-size-021: 21px;
128
- --ol8-font-size-030: 30px;
129
- --ol8-font-size-039: 39px;
130
- --ol8-font-size-051: 51px;
131
- --ol8-font-size-066: 66px;
132
- --ol8-font-size-090: 90px;
133
- --ol8-font-line-126: 126px;
134
- --ol8-font-line-018: 18px;
135
- --ol8-font-line-024: 24px;
136
- --ol8-font-line-030: 30px;
137
- --ol8-font-line-039: 39px;
138
- --ol8-font-line-048: 48px;
139
- --ol8-font-line-060: 60px;
140
- --ol8-font-line-072: 72px;
141
- --ol8-font-line-096: 96px;
142
- --ol8-font-tracking-tighter: -0.03em;
143
- --ol8-font-tracking-tight: -0.025em;
144
- --ol8-font-tracking-snug: -0.02em;
145
- --ol8-font-tracking-display-soft: -0.015em;
146
- --ol8-font-tracking-title-tight: -0.01em;
147
- --ol8-font-tracking-title-soft: -0.005em;
148
- --ol8-font-tracking-normal: 0em;
149
- --ol8-font-tracking-open: 0.01em;
150
- --ol8-font-axis-arrr-baseline: 10;
151
- --ol8-motion-duration-instant: 0ms;
152
- --ol8-motion-duration-quick: 90ms;
153
- --ol8-motion-duration-fast: 120ms;
154
- --ol8-motion-duration-standard: 180ms;
155
- --ol8-motion-duration-measured: 240ms;
156
- --ol8-motion-duration-slow: 360ms;
157
- --ol8-motion-duration-deliberate: 480ms;
158
- --ol8-motion-duration-extended: 720ms;
159
- --ol8-motion-easing-standard: cubic-bezier(0.39, 0, 0, 1);
160
- --ol8-motion-easing-enter: cubic-bezier(0.12, 0, 0, 1);
161
- --ol8-motion-easing-exit: cubic-bezier(0.48, 0, 1, 1);
162
- --ol8-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
163
- --ol8-motion-spring-interactive-response: 240ms;
164
- --ol8-motion-spring-interactive-damping: 0.9;
165
- --ol8-motion-spring-interactive-blend: 120ms;
166
- --ol8-motion-spring-standard-response: 360ms;
167
- --ol8-motion-spring-standard-damping: 0.93;
168
- --ol8-motion-spring-standard-blend: 120ms;
169
- --ol8-motion-spring-gentle-response: 480ms;
170
- --ol8-motion-spring-gentle-damping: 1;
171
- --ol8-motion-spring-gentle-blend: 180ms;
172
- --ol8-color-primary-120: var(--ol8-color-blue-120);
173
- --ol8-color-primary-240: var(--ol8-color-blue-240);
174
- --ol8-color-primary-360: var(--ol8-color-blue-360);
175
- --ol8-color-primary-480: var(--ol8-color-blue-480);
176
- --ol8-color-primary-600: var(--ol8-color-blue-600);
177
- --ol8-color-primary-720: var(--ol8-color-blue-720);
178
- --ol8-color-primary-840: var(--ol8-color-blue-840);
179
- --ol8-color-primary-930: var(--ol8-color-blue-930);
180
- --ol8-color-primary-030: var(--ol8-color-blue-030);
181
- --ol8-color-primary-060: var(--ol8-color-blue-060);
182
- --ol8-color-primary-090: var(--ol8-color-blue-090);
183
- --ol8-color-background-canvas: var(--ol8-color-neutral-030);
184
- --ol8-color-background-subtle: var(--ol8-color-neutral-060);
185
- --ol8-color-background-inverse: var(--ol8-color-blue-930);
186
- --ol8-color-surface-default: var(--ol8-color-neutral-030);
187
- --ol8-color-surface-raised: var(--ol8-color-neutral-030);
188
- --ol8-color-surface-sunken: var(--ol8-color-neutral-060);
189
- --ol8-color-surface-selected: var(--ol8-color-primary-060);
190
- --ol8-color-surface-disabled: var(--ol8-color-neutral-090);
191
- --ol8-color-text-primary: var(--ol8-color-neutral-930);
192
- --ol8-color-text-secondary: var(--ol8-color-neutral-720);
193
- --ol8-color-text-muted: var(--ol8-color-neutral-600);
194
- --ol8-color-text-disabled: var(--ol8-color-neutral-480);
195
- --ol8-color-text-inverse: var(--ol8-color-neutral-030);
196
- --ol8-color-text-link-default: var(--ol8-color-primary-600);
197
- --ol8-color-text-link-hover: var(--ol8-color-primary-720);
198
- --ol8-color-text-link-pressed: var(--ol8-color-primary-840);
199
- --ol8-color-text-link-visited: var(--ol8-color-violet-600);
200
- --ol8-color-icon-primary: var(--ol8-color-neutral-930);
201
- --ol8-color-icon-secondary: var(--ol8-color-neutral-480);
202
- --ol8-color-icon-muted: var(--ol8-color-neutral-360);
203
- --ol8-color-icon-disabled: var(--ol8-color-neutral-240);
204
- --ol8-color-icon-inverse: var(--ol8-color-neutral-030);
205
- --ol8-color-icon-on-gem: var(--ol8-color-neutral-030);
206
- --ol8-color-control-thumb: var(--ol8-color-neutral-030);
207
- --ol8-color-border-subtle: var(--ol8-color-neutral-090);
208
- --ol8-color-border-default: var(--ol8-color-neutral-360);
209
- --ol8-color-border-strong: var(--ol8-color-neutral-480);
210
- --ol8-color-border-disabled: var(--ol8-color-neutral-480);
211
- --ol8-color-focus-inner: var(--ol8-color-primary-030);
212
- --ol8-color-focus-outer: var(--ol8-color-primary-930);
213
- --ol8-color-action-primary-default: var(--ol8-color-primary-600);
214
- --ol8-color-action-primary-hover: var(--ol8-color-primary-720);
215
- --ol8-color-action-primary-pressed: var(--ol8-color-primary-840);
216
- --ol8-color-action-primary-content: var(--ol8-color-neutral-030);
217
- --ol8-color-action-primary-disabled: var(--ol8-color-neutral-090);
218
- --ol8-color-action-primary-disabled-content: var(--ol8-color-neutral-480);
219
- --ol8-color-action-secondary-surface-default: transparent;
220
- --ol8-color-action-secondary-surface-hover: var(--ol8-color-primary-030);
221
- --ol8-color-action-secondary-surface-pressed: var(--ol8-color-primary-060);
222
- --ol8-color-action-secondary-surface-disabled: transparent;
223
- --ol8-color-action-secondary-content-default: var(--ol8-color-primary-600);
224
- --ol8-color-action-secondary-content-hover: var(--ol8-color-primary-720);
225
- --ol8-color-action-secondary-content-pressed: var(--ol8-color-primary-840);
226
- --ol8-color-action-secondary-content-disabled: var(--ol8-color-neutral-480);
227
- --ol8-color-action-quiet-surface-default: transparent;
228
- --ol8-color-action-quiet-surface-hover: var(--ol8-color-primary-030);
229
- --ol8-color-action-quiet-surface-pressed: var(--ol8-color-primary-060);
230
- --ol8-color-action-quiet-surface-disabled: transparent;
231
- --ol8-color-action-quiet-content-default: var(--ol8-color-primary-600);
232
- --ol8-color-action-quiet-content-hover: var(--ol8-color-primary-720);
233
- --ol8-color-action-quiet-content-pressed: var(--ol8-color-primary-840);
234
- --ol8-color-action-quiet-content-disabled: var(--ol8-color-neutral-480);
235
- --ol8-color-icon-button-secondary-hover-surface: var(--ol8-color-primary-060);
236
- --ol8-color-icon-button-quiet-hover-surface: var(--ol8-color-primary-060);
237
- --ol8-color-navigation-badge-surface-default: var(--ol8-color-surface-raised);
238
- --ol8-color-navigation-badge-content-default: var(--ol8-color-text-secondary);
239
- --ol8-color-navigation-badge-surface-selected: var(--ol8-color-selection-content);
240
- --ol8-color-navigation-badge-content-selected: var(--ol8-color-selection-surface);
241
- --ol8-color-navigation-badge-surface-gem: var(--ol8-material-gem-color-cut-edge-high);
242
- --ol8-color-navigation-badge-content-gem: var(--ol8-color-text-primary);
243
- --ol8-color-action-destructive-default: var(--ol8-color-red-600);
244
- --ol8-color-action-destructive-hover: var(--ol8-color-red-720);
245
- --ol8-color-action-destructive-pressed: var(--ol8-color-red-840);
246
- --ol8-color-action-destructive-content: var(--ol8-color-neutral-030);
247
- --ol8-color-action-destructive-disabled: var(--ol8-color-neutral-090);
248
- --ol8-color-action-destructive-disabled-content: var(--ol8-color-neutral-480);
249
- --ol8-color-feedback-informative-surface: var(--ol8-color-cyan-720);
250
- --ol8-color-feedback-informative-content: var(--ol8-color-neutral-030);
251
- --ol8-color-feedback-informative-inline-content: var(--ol8-color-blue-600);
252
- --ol8-color-feedback-positive-surface: var(--ol8-color-green-600);
253
- --ol8-color-feedback-positive-content: var(--ol8-color-neutral-030);
254
- --ol8-color-feedback-positive-inline-content: var(--ol8-color-green-600);
255
- --ol8-color-feedback-caution-surface: var(--ol8-color-yellow-090);
256
- --ol8-color-feedback-caution-content: var(--ol8-color-neutral-840);
257
- --ol8-color-feedback-caution-inline-content: var(--ol8-color-yellow-600);
258
- --ol8-color-feedback-critical-surface: var(--ol8-color-red-600);
259
- --ol8-color-feedback-critical-content: var(--ol8-color-neutral-030);
260
- --ol8-color-feedback-critical-inline-content: var(--ol8-color-red-480);
261
- --ol8-color-selection-surface: var(--ol8-color-primary-060);
262
- --ol8-color-selection-content: var(--ol8-color-primary-840);
263
- --ol8-elevation-surface-flat: none;
264
- --ol8-elevation-surface-raised: 0px 3px 6px 0px rgb(22 63 75 / 0.12);
265
- --ol8-elevation-surface-floating: 0px 6px 18px -3px rgb(22 63 75 / 0.18), 0px 3px 6px 0px rgb(22 63 75 / 0.12);
266
- --ol8-elevation-surface-overlay: 0px 12px 36px -6px rgb(22 63 75 / 0.24), 0px 6px 12px 0px rgb(22 63 75 / 0.18);
267
- --ol8-elevation-surface-blocking: 0px 24px 72px -12px rgb(22 63 75 / 0.36), 0px 12px 24px 0px rgb(22 63 75 / 0.24);
268
- --ol8-layer-stack-base: 0;
269
- --ol8-layer-stack-sticky: 300;
270
- --ol8-layer-stack-overlay: 600;
271
- --ol8-layer-stack-modal: 900;
272
- --ol8-layer-stack-notification: 1200;
273
- --ol8-material-control-gem-primary-start: var(--ol8-color-primary-480);
274
- --ol8-material-control-gem-primary-mid: var(--ol8-color-primary-600);
275
- --ol8-material-control-gem-primary-end: var(--ol8-color-primary-720);
276
- --ol8-material-control-gem-primary-hover-start: var(--ol8-color-primary-600);
277
- --ol8-material-control-gem-primary-hover-mid: var(--ol8-color-primary-720);
278
- --ol8-material-control-gem-primary-hover-end: var(--ol8-color-primary-840);
279
- --ol8-material-control-gem-primary-loading-start: var(--ol8-color-primary-720);
280
- --ol8-material-control-gem-primary-loading-mid: var(--ol8-color-primary-840);
281
- --ol8-material-control-gem-primary-loading-end: var(--ol8-color-primary-930);
282
- --ol8-material-control-gem-primary-content: var(--ol8-color-neutral-030);
283
- --ol8-material-control-gem-secondary-high: color-mix(in srgb, var(--ol8-color-neutral-030) 22%, transparent);
284
- --ol8-material-control-gem-secondary-mid: color-mix(in srgb, var(--ol8-color-neutral-030) 5%, transparent);
285
- --ol8-material-control-gem-secondary-low: color-mix(in srgb, var(--ol8-color-neutral-030) 12%, transparent);
286
- --ol8-material-control-gem-secondary-hover-high: color-mix(in srgb, var(--ol8-color-neutral-030) 30%, transparent);
287
- --ol8-material-control-gem-secondary-hover-mid: color-mix(in srgb, var(--ol8-color-neutral-030) 9%, transparent);
288
- --ol8-material-control-gem-secondary-hover-low: color-mix(in srgb, var(--ol8-color-neutral-030) 18%, transparent);
289
- --ol8-material-control-gem-secondary-loading-high: color-mix(in srgb, var(--ol8-color-neutral-030) 39%, transparent);
290
- --ol8-material-control-gem-secondary-loading-mid: color-mix(in srgb, var(--ol8-color-neutral-030) 12%, transparent);
291
- --ol8-material-control-gem-secondary-loading-low: color-mix(in srgb, var(--ol8-color-neutral-030) 24%, transparent);
292
- --ol8-material-control-gem-secondary-content: var(--ol8-color-neutral-030);
293
- --ol8-material-control-gem-rim-default: color-mix(in srgb, var(--ol8-color-neutral-030) 24%, transparent);
294
- --ol8-material-control-gem-rim-hover: color-mix(in srgb, var(--ol8-color-neutral-030) 36%, transparent);
295
- --ol8-material-control-gem-rim-specular: color-mix(in srgb, var(--ol8-color-neutral-030) 54%, transparent);
296
- --ol8-material-control-gem-blur: 12px;
297
- --ol8-material-gem-color-quiet-environmental-face: color-mix(in srgb, var(--ol8-color-neutral-030) 48%, transparent);
298
- --ol8-material-gem-color-quiet-stabilized-face: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
299
- --ol8-material-gem-color-quiet-opaque-equivalent: var(--ol8-color-neutral-030);
300
- --ol8-material-gem-color-cut-edge-outer-high: color-mix(in srgb, var(--ol8-color-neutral-060) 93%, transparent);
301
- --ol8-material-gem-color-cut-edge-outer-mid: color-mix(in srgb, var(--ol8-color-blue-120) 48%, transparent);
302
- --ol8-material-gem-color-cut-edge-outer-low: color-mix(in srgb, var(--ol8-color-neutral-060) 3%, transparent);
303
- --ol8-material-gem-color-cut-edge-outer-accent: color-mix(in srgb, var(--ol8-color-cyan-360) 36%, transparent);
304
- --ol8-material-gem-color-cut-edge-high: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
305
- --ol8-material-gem-color-cut-edge-mid: color-mix(in srgb, var(--ol8-color-blue-060) 36%, transparent);
306
- --ol8-material-gem-color-cut-edge-low: color-mix(in srgb, var(--ol8-color-neutral-060) 3%, transparent);
307
- --ol8-material-gem-color-cut-edge-shadow: color-mix(in srgb, var(--ol8-color-blue-930) 16%, transparent);
308
- --ol8-material-gem-color-inner-thin-cut-face: color-mix(in srgb, var(--ol8-color-neutral-060) 72%, transparent);
309
- --ol8-material-gem-color-inner-thin-cut-high: color-mix(in srgb, var(--ol8-color-neutral-060) 54%, transparent);
310
- --ol8-material-gem-color-inner-thin-cut-mid: color-mix(in srgb, var(--ol8-color-blue-120) 18%, transparent);
311
- --ol8-material-gem-color-inner-thin-cut-low: color-mix(in srgb, var(--ol8-color-neutral-060) 3%, transparent);
312
- --ol8-material-gem-color-facet-cool: color-mix(in srgb, var(--ol8-color-blue-600) 18%, transparent);
313
- --ol8-material-gem-color-facet-warm: color-mix(in srgb, var(--ol8-color-orange-240) 12%, transparent);
314
- --ol8-material-gem-color-family-emerald-environmental-face: color-mix(in srgb, var(--ol8-color-green-930) 48%, transparent);
315
- --ol8-material-gem-color-family-emerald-stabilized-face: color-mix(in srgb, var(--ol8-color-green-930) 27%, transparent);
316
- --ol8-material-gem-color-family-emerald-edge: color-mix(in srgb, var(--ol8-color-green-240) 66%, transparent);
317
- --ol8-material-gem-color-family-emerald-inner-high: color-mix(in srgb, var(--ol8-color-green-090) 36%, transparent);
318
- --ol8-material-gem-color-family-emerald-inner-mid: color-mix(in srgb, var(--ol8-color-green-240) 18%, transparent);
319
- --ol8-material-gem-color-family-emerald-inner-low: color-mix(in srgb, var(--ol8-color-green-090) 3%, transparent);
320
- --ol8-material-gem-color-family-emerald-opaque-equivalent: var(--ol8-color-green-930);
321
- --ol8-material-gem-color-family-ruby-environmental-face: color-mix(in srgb, var(--ol8-color-red-930) 48%, transparent);
322
- --ol8-material-gem-color-family-ruby-stabilized-face: color-mix(in srgb, var(--ol8-color-red-930) 27%, transparent);
323
- --ol8-material-gem-color-family-ruby-edge: color-mix(in srgb, var(--ol8-color-red-240) 66%, transparent);
324
- --ol8-material-gem-color-family-ruby-inner-high: color-mix(in srgb, var(--ol8-color-red-090) 36%, transparent);
325
- --ol8-material-gem-color-family-ruby-inner-mid: color-mix(in srgb, var(--ol8-color-red-240) 18%, transparent);
326
- --ol8-material-gem-color-family-ruby-inner-low: color-mix(in srgb, var(--ol8-color-red-090) 3%, transparent);
327
- --ol8-material-gem-color-family-ruby-opaque-equivalent: var(--ol8-color-red-930);
328
- --ol8-material-gem-color-family-sapphire-environmental-face: color-mix(in srgb, var(--ol8-color-blue-930) 48%, transparent);
329
- --ol8-material-gem-color-family-sapphire-stabilized-face: color-mix(in srgb, var(--ol8-color-blue-930) 30%, transparent);
330
- --ol8-material-gem-color-family-sapphire-edge: color-mix(in srgb, var(--ol8-color-blue-240) 66%, transparent);
331
- --ol8-material-gem-color-family-sapphire-inner-high: color-mix(in srgb, var(--ol8-color-blue-060) 39%, transparent);
332
- --ol8-material-gem-color-family-sapphire-inner-mid: color-mix(in srgb, var(--ol8-color-blue-240) 18%, transparent);
333
- --ol8-material-gem-color-family-sapphire-inner-low: color-mix(in srgb, var(--ol8-color-blue-060) 3%, transparent);
334
- --ol8-material-gem-color-family-sapphire-opaque-equivalent: var(--ol8-color-blue-930);
335
- --ol8-material-gem-color-family-amethyst-environmental-face: color-mix(in srgb, var(--ol8-color-violet-930) 48%, transparent);
336
- --ol8-material-gem-color-family-amethyst-stabilized-face: color-mix(in srgb, var(--ol8-color-violet-930) 27%, transparent);
337
- --ol8-material-gem-color-family-amethyst-edge: color-mix(in srgb, var(--ol8-color-violet-240) 66%, transparent);
338
- --ol8-material-gem-color-family-amethyst-inner-high: color-mix(in srgb, var(--ol8-color-violet-090) 36%, transparent);
339
- --ol8-material-gem-color-family-amethyst-inner-mid: color-mix(in srgb, var(--ol8-color-violet-240) 18%, transparent);
340
- --ol8-material-gem-color-family-amethyst-inner-low: color-mix(in srgb, var(--ol8-color-violet-090) 3%, transparent);
341
- --ol8-material-gem-color-family-amethyst-opaque-equivalent: var(--ol8-color-violet-930);
342
- --ol8-material-gem-blur-environmental: 18px;
343
- --ol8-material-gem-blur-stabilized: 12px;
344
- --ol8-material-gem-opacity-environmental: 0.48;
345
- --ol8-material-gem-opacity-edge-high: 0.93;
346
- --ol8-material-gem-opacity-edge-low: 0.03;
347
- --ol8-material-gem-opacity-cut-light: 0.72;
348
- --ol8-material-gem-opacity-cut-dark: 0.54;
349
- --ol8-material-gem-spacing-slab-inset: 30px;
350
- --ol8-material-gem-spacing-cluster-gap: 24px;
351
- --ol8-material-gem-spacing-inner-separation: 24px;
352
- --ol8-spacing-none: 0px;
353
- --ol8-spacing-inline-minimal: 3px;
354
- --ol8-spacing-inline-related: 6px;
355
- --ol8-spacing-inline-standard: 12px;
356
- --ol8-spacing-stack-tight: 6px;
357
- --ol8-spacing-stack-related: 12px;
358
- --ol8-spacing-stack-grouped: 18px;
359
- --ol8-spacing-stack-separated: 24px;
360
- --ol8-spacing-inset-compact: 12px;
361
- --ol8-spacing-inset-standard: 18px;
362
- --ol8-spacing-inset-comfortable: 24px;
363
- --ol8-spacing-inset-spacious: 36px;
364
- --ol8-spacing-layout-margin: 24px;
365
- --ol8-spacing-layout-gutter: 24px;
366
- --ol8-spacing-layout-region: 36px;
367
- --ol8-spacing-section-compact: 36px;
368
- --ol8-spacing-section-standard: 48px;
369
- --ol8-spacing-section-spacious: 72px;
370
- --ol8-spacing-section-expansive: 108px;
371
- --ol8-size-control-compact: 36px;
372
- --ol8-size-control-standard: 42px;
373
- --ol8-size-control-comfortable: 48px;
374
- --ol8-size-control-large: 60px;
375
- --ol8-size-target-minimum: 48px;
376
- --ol8-size-target-comfortable: 60px;
377
- --ol8-size-target-spacious: 72px;
378
- --ol8-size-icon-micro: 9px;
379
- --ol8-size-icon-compact: 12px;
380
- --ol8-size-icon-small: 18px;
381
- --ol8-size-icon-standard: 24px;
382
- --ol8-size-icon-medium: 30px;
383
- --ol8-size-icon-large: 36px;
384
- --ol8-size-icon-xlarge: 48px;
385
- --ol8-size-icon-spacious: 60px;
386
- --ol8-size-icon-display: 72px;
387
- --ol8-size-icon-hero: 96px;
388
- --ol8-size-icon-landmark: 108px;
389
- --ol8-size-avatar-micro: 18px;
390
- --ol8-size-avatar-small: 24px;
391
- --ol8-size-avatar-standard: 36px;
392
- --ol8-size-avatar-large: 48px;
393
- --ol8-size-avatar-xlarge: 72px;
394
- --ol8-size-avatar-display: 96px;
395
- --ol8-size-indicator-micro: 6px;
396
- --ol8-size-indicator-small: 12px;
397
- --ol8-size-indicator-standard: 18px;
398
- --ol8-size-indicator-large: 24px;
399
- --ol8-size-loader-small: 18px;
400
- --ol8-size-loader-standard: 24px;
401
- --ol8-size-loader-large: 36px;
402
- --ol8-size-loader-display: 48px;
403
- --ol8-shape-radius-none: 0px;
404
- --ol8-shape-radius-subtle: 3px;
405
- --ol8-shape-radius-compact: 6px;
406
- --ol8-shape-radius-medium: 9px;
407
- --ol8-shape-radius-standard: 12px;
408
- --ol8-shape-radius-comfortable: 18px;
409
- --ol8-shape-radius-container: 24px;
410
- --ol8-shape-radius-display: 36px;
411
- --ol8-shape-radius-full: 999px;
412
- --ol8-border-width-none: 0px;
413
- --ol8-border-width-hairline: 1px;
414
- --ol8-border-width-standard: 2px;
415
- --ol8-border-width-strong: 3px;
416
- --ol8-focus-ring-inner-width: 3px;
417
- --ol8-focus-ring-outer-width: 3px;
418
- --ol8-focus-ring-total-width: 6px;
419
- --ol8-focus-ring-offset: 3px;
420
- --ol8-typography-display-large-font-family: Syne;
421
- --ol8-typography-display-large-font-size: 66px;
422
- --ol8-typography-display-large-font-weight: 690;
423
- --ol8-typography-display-large-letter-spacing: -0.02em;
424
- --ol8-typography-display-large-line-height: 72px;
425
- --ol8-typography-display-medium-font-family: Syne;
426
- --ol8-typography-display-medium-font-size: 51px;
427
- --ol8-typography-display-medium-font-weight: 690;
428
- --ol8-typography-display-medium-letter-spacing: -0.015em;
429
- --ol8-typography-display-medium-line-height: 60px;
430
- --ol8-typography-display-small-font-family: Syne;
431
- --ol8-typography-display-small-font-size: 39px;
432
- --ol8-typography-display-small-font-weight: 600;
433
- --ol8-typography-display-small-letter-spacing: -0.01em;
434
- --ol8-typography-display-small-line-height: 48px;
435
- --ol8-typography-title-large-font-family: AR One Sans;
436
- --ol8-typography-title-large-font-size: 39px;
437
- --ol8-typography-title-large-font-weight: 600;
438
- --ol8-typography-title-large-letter-spacing: -0.005em;
439
- --ol8-typography-title-large-line-height: 48px;
440
- --ol8-typography-title-medium-font-family: AR One Sans;
441
- --ol8-typography-title-medium-font-size: 30px;
442
- --ol8-typography-title-medium-font-weight: 600;
443
- --ol8-typography-title-medium-letter-spacing: 0em;
444
- --ol8-typography-title-medium-line-height: 39px;
445
- --ol8-typography-title-small-font-family: AR One Sans;
446
- --ol8-typography-title-small-font-size: 21px;
447
- --ol8-typography-title-small-font-weight: 600;
448
- --ol8-typography-title-small-letter-spacing: 0em;
449
- --ol8-typography-title-small-line-height: 30px;
450
- --ol8-typography-body-large-font-family: AR One Sans;
451
- --ol8-typography-body-large-font-size: 21px;
452
- --ol8-typography-body-large-font-weight: 450;
453
- --ol8-typography-body-large-letter-spacing: 0em;
454
- --ol8-typography-body-large-line-height: 30px;
455
- --ol8-typography-body-medium-font-family: AR One Sans;
456
- --ol8-typography-body-medium-font-size: 16px;
457
- --ol8-typography-body-medium-font-weight: 450;
458
- --ol8-typography-body-medium-letter-spacing: 0em;
459
- --ol8-typography-body-medium-line-height: 24px;
460
- --ol8-typography-body-small-font-family: AR One Sans;
461
- --ol8-typography-body-small-font-size: 12px;
462
- --ol8-typography-body-small-font-weight: 450;
463
- --ol8-typography-body-small-letter-spacing: 0.01em;
464
- --ol8-typography-body-small-line-height: 18px;
465
- --ol8-motion-distance-minimal: 3px;
466
- --ol8-motion-distance-short: 6px;
467
- --ol8-motion-distance-standard: 12px;
468
- --ol8-motion-distance-large: 24px;
469
- --ol8-motion-distance-expansive: 48px;
470
- --ol8-motion-interaction-press-duration: 90ms;
471
- --ol8-motion-interaction-press-delay: 0ms;
472
- --ol8-motion-interaction-press-timing-function: cubic-bezier(0.39, 0, 0, 1);
473
- --ol8-motion-interaction-hover-duration: 120ms;
474
- --ol8-motion-interaction-hover-delay: 0ms;
475
- --ol8-motion-interaction-hover-timing-function: cubic-bezier(0.39, 0, 0, 1);
476
- --ol8-motion-interaction-focus-duration: 120ms;
477
- --ol8-motion-interaction-focus-delay: 0ms;
478
- --ol8-motion-interaction-focus-timing-function: cubic-bezier(0.39, 0, 0, 1);
479
- --ol8-motion-state-change-duration: 180ms;
480
- --ol8-motion-state-change-delay: 0ms;
481
- --ol8-motion-state-change-timing-function: cubic-bezier(0.39, 0, 0, 1);
482
- --ol8-component-optical-stroke: 1.8px;
483
- --ol8-component-icon-stroke: 1.8px;
484
- --ol8-component-button-height-compact: 36px;
485
- --ol8-component-button-height-standard: 42px;
486
- --ol8-component-button-height-comfortable: 48px;
487
- --ol8-component-button-height-large: 60px;
488
- --ol8-component-button-padding-inline-compact: 12px;
489
- --ol8-component-button-padding-inline-standard: 15px;
490
- --ol8-component-button-padding-inline-comfortable: 18px;
491
- --ol8-component-button-padding-inline-large: 24px;
492
- --ol8-component-button-gap-compact: 6px;
493
- --ol8-component-button-gap-comfortable: 9px;
494
- --ol8-component-button-icon-compact: 18px;
495
- --ol8-component-button-icon-comfortable: 24px;
496
- --ol8-component-button-target-compact: 48px;
497
- --ol8-component-button-target-standard: 48px;
498
- --ol8-component-button-target-comfortable: 48px;
499
- --ol8-component-button-target-large: 60px;
500
- --ol8-component-button-radius-compact: 6px;
501
- --ol8-component-button-radius-standard: 9px;
502
- --ol8-component-button-radius-comfortable: 12px;
503
- --ol8-component-button-radius-large: 12px;
504
- --ol8-component-button-secondary-boundary: 2px;
505
- --ol8-component-icon-button-box-compact: 36px;
506
- --ol8-component-icon-button-box-standard: 42px;
507
- --ol8-component-icon-button-box-comfortable: 48px;
508
- --ol8-component-icon-button-box-large: 60px;
509
- --ol8-component-icon-button-artwork-compact: 18px;
510
- --ol8-component-icon-button-artwork-standard: 18px;
511
- --ol8-component-icon-button-artwork-comfortable: 24px;
512
- --ol8-component-icon-button-artwork-large: 36px;
513
- --ol8-component-icon-button-target-compact: 48px;
514
- --ol8-component-icon-button-target-standard: 48px;
515
- --ol8-component-icon-button-target-comfortable: 48px;
516
- --ol8-component-icon-button-target-large: 60px;
517
- --ol8-component-icon-button-radius-compact: 9px;
518
- --ol8-component-icon-button-radius-standard: 12px;
519
- --ol8-component-icon-button-radius-comfortable: 12px;
520
- --ol8-component-icon-button-radius-large: 18px;
521
- --ol8-component-icon-button-radius-circle: 999px;
522
- --ol8-component-link-underline-default: 1px;
523
- --ol8-component-link-underline-emphasis: 2px;
524
- --ol8-component-link-underline-offset: 3px;
525
- --ol8-component-link-gap-small: 6px;
526
- --ol8-component-link-gap-standard: 6px;
527
- --ol8-component-link-gap-large: 9px;
528
- --ol8-component-link-target-navigation: 48px;
529
- --ol8-component-text-field-height-compact: 36px;
530
- --ol8-component-text-field-height-standard: 42px;
531
- --ol8-component-text-field-height-comfortable: 48px;
532
- --ol8-component-text-field-height-large: 60px;
533
- --ol8-component-text-field-inset-compact: 12px;
534
- --ol8-component-text-field-inset-standard: 15px;
535
- --ol8-component-text-field-inset-comfortable: 18px;
536
- --ol8-component-text-field-inset-large: 24px;
537
- --ol8-component-text-field-radius-compact: 6px;
538
- --ol8-component-text-field-radius-standard: 9px;
539
- --ol8-component-text-field-radius-comfortable: 12px;
540
- --ol8-component-text-field-radius-large: 18px;
541
- --ol8-component-text-field-boundary: 2px;
542
- --ol8-component-text-field-gap-label: 6px;
543
- --ol8-component-text-field-gap-supporting: 6px;
544
- --ol8-component-text-field-gap-status: 3px;
545
- --ol8-component-text-field-gap-message-counter: 12px;
546
- --ol8-component-choice-indicator-compact: 18px;
547
- --ol8-component-choice-indicator-comfortable: 24px;
548
- --ol8-component-choice-gap-compact: 6px;
549
- --ol8-component-choice-gap-standard: 9px;
550
- --ol8-component-choice-gap-large: 12px;
551
- --ol8-component-choice-row-minimum: 48px;
552
- --ol8-component-choice-optical-stroke: 1.8px;
553
- --ol8-component-checkbox-radius-compact: 3px;
554
- --ol8-component-checkbox-radius-comfortable: 6px;
555
- --ol8-component-checkbox-boundary: 1.8px;
556
- --ol8-component-checkbox-mark-stroke: 1.8px;
557
- --ol8-component-checkbox-mark-mixed-width: 9px;
558
- --ol8-component-radio-boundary: 1.8px;
559
- --ol8-component-radio-dot-compact: 9px;
560
- --ol8-component-radio-dot-comfortable: 12px;
561
- --ol8-component-switch-track-width-compact: 36px;
562
- --ol8-component-switch-track-width-comfortable: 48px;
563
- --ol8-component-switch-track-height-compact: 18px;
564
- --ol8-component-switch-track-height-comfortable: 24px;
565
- --ol8-component-switch-thumb-compact: 12px;
566
- --ol8-component-switch-thumb-comfortable: 18px;
567
- --ol8-component-switch-thumb-icon-compact: 9px;
568
- --ol8-component-switch-thumb-icon-comfortable: 12px;
569
- --ol8-component-switch-inset: 3px;
570
- --ol8-component-switch-travel-compact: 18px;
571
- --ol8-component-switch-travel-comfortable: 24px;
572
- --ol8-component-selection-popup-gap: 6px;
573
- --ol8-component-selection-popup-padding-inline: 3px;
574
- --ol8-component-selection-popup-padding-block: 6px;
575
- --ol8-component-selection-popup-rail-inset-inline: 3px;
576
- --ol8-component-selection-popup-maximum-block-standard: 288px;
577
- --ol8-component-selection-popup-maximum-block-large: 360px;
578
- --ol8-component-selection-option-minimum-standard: 48px;
579
- --ol8-component-selection-option-minimum-large: 60px;
580
- --ol8-component-selection-option-inset-standard: 12px;
581
- --ol8-component-selection-option-inset-large: 15px;
582
- --ol8-component-selection-option-check: 18px;
583
- --ol8-component-choice-chip-height-compact: 30px;
584
- --ol8-component-choice-chip-height-standard: 36px;
585
- --ol8-component-choice-chip-height-comfortable: 42px;
586
- --ol8-component-choice-chip-height-large: 42px;
587
- --ol8-component-choice-chip-target-standard: 48px;
588
- --ol8-component-choice-chip-target-large: 60px;
589
- --ol8-component-choice-chip-terminal: 12px;
590
- --ol8-component-choice-chip-inner-terminal: 11px;
591
- --ol8-component-choice-chip-center-cut: 18px;
592
- --ol8-component-choice-chip-inner-center-cut: 16px;
593
- --ol8-component-choice-chip-bezel-inset: 2px;
594
- --ol8-component-choice-chip-inset-compact: 21px;
595
- --ol8-component-choice-chip-inset-standard: 24px;
596
- --ol8-component-choice-chip-inset-comfortable: 27px;
597
- --ol8-component-choice-chip-inset-large: 27px;
598
- --ol8-component-choice-chip-gap: 6px;
599
- --ol8-component-choice-chip-mark-gap: 9px;
600
- --ol8-component-choice-chip-mark: 18px;
601
- --ol8-component-token-field-minimum-input: 96px;
602
- --ol8-component-token-field-gap: 6px;
603
- --ol8-component-token-field-padding-block: 3px;
604
- --ol8-component-suggestion-rail-gap: 6px;
605
- --ol8-component-suggestion-rail-field-separation: 6px;
606
- --ol8-component-navigation-item-gap: 6px;
607
- --ol8-component-navigation-icon: 18px;
608
- --ol8-component-navigation-target: 48px;
609
- --ol8-component-navigation-focus-inset: 3px;
610
- --ol8-component-tab-item-height-compact: 36px;
611
- --ol8-component-tab-item-height-standard: 42px;
612
- --ol8-component-tab-item-height-comfortable: 48px;
613
- --ol8-component-tab-item-height-large: 60px;
614
- --ol8-component-tab-item-inset-compact: 12px;
615
- --ol8-component-tab-item-inset-standard: 15px;
616
- --ol8-component-tab-item-inset-comfortable: 18px;
617
- --ol8-component-tab-item-inset-large: 24px;
618
- --ol8-component-tab-item-radius: 9px;
619
- --ol8-component-tab-item-indicator-thickness: 3px;
620
- --ol8-component-tab-item-indicator-inset: 15px;
621
- --ol8-component-tab-item-rail: 1px;
622
- --ol8-component-segmented-control-track-inset: 3px;
623
- --ol8-component-segmented-control-outlined-gap: 6px;
624
- --ol8-component-segmented-control-track-radius: 12px;
625
- --ol8-component-segmented-control-item-radius: 9px;
626
- --ol8-component-segmented-control-line: 3px;
627
- --ol8-component-segmented-control-boundary: 1px;
628
- --ol8-component-tab-bar-inset: 6px;
629
- --ol8-component-tab-bar-inline-inset: 3px;
630
- --ol8-component-tab-bar-gap: 0px;
631
- --ol8-component-tab-bar-radius: 18px;
632
- --ol8-component-tab-bar-item-radius: 12px;
633
- }
634
-
635
- [data-ol8-color-scheme="dark"] {
636
- --ol8-color-background-canvas: var(--ol8-color-neutral-930);
637
- --ol8-color-background-subtle: var(--ol8-color-neutral-840);
638
- --ol8-color-background-inverse: var(--ol8-color-neutral-030);
639
- --ol8-color-surface-default: var(--ol8-color-neutral-840);
640
- --ol8-color-surface-raised: var(--ol8-color-neutral-720);
641
- --ol8-color-surface-sunken: var(--ol8-color-neutral-930);
642
- --ol8-color-surface-selected: var(--ol8-color-primary-120);
643
- --ol8-color-surface-disabled: var(--ol8-color-blue-840);
644
- --ol8-color-text-primary: var(--ol8-color-neutral-030);
645
- --ol8-color-text-secondary: var(--ol8-color-neutral-120);
646
- --ol8-color-text-muted: var(--ol8-color-neutral-240);
647
- --ol8-color-text-disabled: var(--ol8-color-neutral-240);
648
- --ol8-color-text-inverse: var(--ol8-color-neutral-930);
649
- --ol8-color-text-link-default: var(--ol8-color-primary-120);
650
- --ol8-color-text-link-hover: var(--ol8-color-primary-090);
651
- --ol8-color-text-link-pressed: var(--ol8-color-primary-060);
652
- --ol8-color-text-link-visited: var(--ol8-color-violet-120);
653
- --ol8-color-icon-primary: var(--ol8-color-neutral-030);
654
- --ol8-color-icon-secondary: var(--ol8-color-neutral-120);
655
- --ol8-color-icon-muted: var(--ol8-color-neutral-240);
656
- --ol8-color-icon-disabled: var(--ol8-color-neutral-360);
657
- --ol8-color-icon-inverse: var(--ol8-color-neutral-930);
658
- --ol8-color-border-subtle: var(--ol8-color-neutral-720);
659
- --ol8-color-border-default: var(--ol8-color-neutral-240);
660
- --ol8-color-border-strong: var(--ol8-color-neutral-120);
661
- --ol8-color-border-disabled: var(--ol8-color-neutral-240);
662
- --ol8-color-focus-inner: var(--ol8-color-primary-930);
663
- --ol8-color-focus-outer: var(--ol8-color-primary-030);
664
- --ol8-color-action-primary-default: var(--ol8-color-primary-120);
665
- --ol8-color-action-primary-hover: var(--ol8-color-primary-090);
666
- --ol8-color-action-primary-pressed: var(--ol8-color-primary-060);
667
- --ol8-color-action-primary-content: var(--ol8-color-primary-930);
668
- --ol8-color-action-primary-disabled: var(--ol8-color-blue-840);
669
- --ol8-color-action-primary-disabled-content: var(--ol8-color-neutral-240);
670
- --ol8-color-action-secondary-surface-default: transparent;
671
- --ol8-color-action-secondary-surface-hover: var(--ol8-color-primary-930);
672
- --ol8-color-action-secondary-surface-pressed: var(--ol8-color-primary-840);
673
- --ol8-color-action-secondary-surface-disabled: transparent;
674
- --ol8-color-action-secondary-content-default: var(--ol8-color-primary-120);
675
- --ol8-color-action-secondary-content-hover: var(--ol8-color-primary-120);
676
- --ol8-color-action-secondary-content-pressed: var(--ol8-color-primary-090);
677
- --ol8-color-action-secondary-content-disabled: var(--ol8-color-neutral-240);
678
- --ol8-color-action-quiet-surface-default: transparent;
679
- --ol8-color-action-quiet-surface-hover: var(--ol8-color-primary-930);
680
- --ol8-color-action-quiet-surface-pressed: var(--ol8-color-primary-840);
681
- --ol8-color-action-quiet-surface-disabled: transparent;
682
- --ol8-color-action-quiet-content-default: var(--ol8-color-primary-120);
683
- --ol8-color-action-quiet-content-hover: var(--ol8-color-primary-120);
684
- --ol8-color-action-quiet-content-pressed: var(--ol8-color-primary-090);
685
- --ol8-color-action-quiet-content-disabled: var(--ol8-color-neutral-240);
686
- --ol8-color-icon-button-secondary-hover-surface: var(--ol8-color-primary-720);
687
- --ol8-color-icon-button-quiet-hover-surface: var(--ol8-color-primary-720);
688
- --ol8-color-action-destructive-default: var(--ol8-color-red-120);
689
- --ol8-color-action-destructive-hover: var(--ol8-color-red-090);
690
- --ol8-color-action-destructive-pressed: var(--ol8-color-red-060);
691
- --ol8-color-action-destructive-content: var(--ol8-color-red-930);
692
- --ol8-color-action-destructive-disabled: var(--ol8-color-blue-840);
693
- --ol8-color-action-destructive-disabled-content: var(--ol8-color-neutral-240);
694
- --ol8-color-feedback-informative-surface: var(--ol8-color-cyan-120);
695
- --ol8-color-feedback-informative-content: var(--ol8-color-cyan-930);
696
- --ol8-color-feedback-informative-inline-content: var(--ol8-color-blue-120);
697
- --ol8-color-feedback-positive-surface: var(--ol8-color-green-120);
698
- --ol8-color-feedback-positive-content: var(--ol8-color-green-930);
699
- --ol8-color-feedback-positive-inline-content: var(--ol8-color-green-120);
700
- --ol8-color-feedback-caution-surface: var(--ol8-color-yellow-120);
701
- --ol8-color-feedback-caution-content: var(--ol8-color-yellow-930);
702
- --ol8-color-feedback-caution-inline-content: var(--ol8-color-yellow-120);
703
- --ol8-color-feedback-critical-surface: var(--ol8-color-red-120);
704
- --ol8-color-feedback-critical-content: var(--ol8-color-red-930);
705
- --ol8-color-feedback-critical-inline-content: var(--ol8-color-red-120);
706
- --ol8-color-selection-surface: var(--ol8-color-primary-120);
707
- --ol8-color-selection-content: var(--ol8-color-primary-930);
708
- --ol8-elevation-surface-flat: none;
709
- --ol8-elevation-surface-raised: 0px 3px 6px 0px rgb(22 63 75 / 0.36);
710
- --ol8-elevation-surface-floating: 0px 6px 18px -3px rgb(22 63 75 / 0.48);
711
- --ol8-elevation-surface-overlay: 0px 12px 36px -6px rgb(22 63 75 / 0.6);
712
- --ol8-elevation-surface-blocking: 0px 24px 72px -12px rgb(22 63 75 / 0.72);
713
- --ol8-material-control-gem-primary-start: var(--ol8-color-primary-600);
714
- --ol8-material-control-gem-primary-mid: var(--ol8-color-primary-720);
715
- --ol8-material-control-gem-primary-end: var(--ol8-color-primary-840);
716
- --ol8-material-control-gem-primary-hover-start: var(--ol8-color-primary-720);
717
- --ol8-material-control-gem-primary-hover-mid: var(--ol8-color-primary-840);
718
- --ol8-material-control-gem-primary-hover-end: var(--ol8-color-primary-930);
719
- --ol8-material-gem-color-quiet-environmental-face: color-mix(in srgb, var(--ol8-color-neutral-930) 48%, transparent);
720
- --ol8-material-gem-color-quiet-stabilized-face: color-mix(in srgb, var(--ol8-color-neutral-840) 72%, transparent);
721
- --ol8-material-gem-color-quiet-opaque-equivalent: var(--ol8-color-neutral-840);
722
- --ol8-material-gem-color-cut-edge-high: color-mix(in srgb, var(--ol8-color-neutral-120) 42%, transparent);
723
- --ol8-material-gem-color-cut-edge-mid: color-mix(in srgb, var(--ol8-color-blue-120) 20%, transparent);
724
- --ol8-material-gem-color-cut-edge-low: color-mix(in srgb, var(--ol8-color-neutral-120) 3%, transparent);
725
- --ol8-material-gem-color-cut-edge-shadow: color-mix(in srgb, var(--ol8-color-cyan-930) 36%, transparent);
726
- --ol8-material-gem-color-inner-thin-cut-face: color-mix(in srgb, var(--ol8-color-neutral-840) 72%, transparent);
727
- --ol8-material-gem-color-inner-thin-cut-high: color-mix(in srgb, var(--ol8-color-neutral-120) 27%, transparent);
728
- --ol8-material-gem-color-inner-thin-cut-mid: color-mix(in srgb, var(--ol8-color-blue-120) 12%, transparent);
729
- --ol8-material-gem-color-inner-thin-cut-low: color-mix(in srgb, var(--ol8-color-neutral-120) 3%, transparent);
730
- --ol8-material-gem-color-facet-cool: color-mix(in srgb, var(--ol8-color-blue-120) 14.000000000000002%, transparent);
731
- --ol8-material-gem-color-facet-warm: color-mix(in srgb, var(--ol8-color-orange-120) 9%, transparent);
732
- }
733
-
734
- [data-ol8-primary="blue"] {
735
- --ol8-color-primary-030: var(--ol8-color-blue-030);
736
- --ol8-color-primary-060: var(--ol8-color-blue-060);
737
- --ol8-color-primary-090: var(--ol8-color-blue-090);
738
- --ol8-color-primary-120: var(--ol8-color-blue-120);
739
- --ol8-color-primary-240: var(--ol8-color-blue-240);
740
- --ol8-color-primary-360: var(--ol8-color-blue-360);
741
- --ol8-color-primary-480: var(--ol8-color-blue-480);
742
- --ol8-color-primary-600: var(--ol8-color-blue-600);
743
- --ol8-color-primary-720: var(--ol8-color-blue-720);
744
- --ol8-color-primary-840: var(--ol8-color-blue-840);
745
- --ol8-color-primary-930: var(--ol8-color-blue-930);
746
- }
747
-
748
- [data-ol8-primary="orange"] {
749
- --ol8-color-primary-030: var(--ol8-color-orange-030);
750
- --ol8-color-primary-060: var(--ol8-color-orange-060);
751
- --ol8-color-primary-090: var(--ol8-color-orange-090);
752
- --ol8-color-primary-120: var(--ol8-color-orange-120);
753
- --ol8-color-primary-240: var(--ol8-color-orange-240);
754
- --ol8-color-primary-360: var(--ol8-color-orange-360);
755
- --ol8-color-primary-480: var(--ol8-color-orange-480);
756
- --ol8-color-primary-600: var(--ol8-color-orange-600);
757
- --ol8-color-primary-720: var(--ol8-color-orange-720);
758
- --ol8-color-primary-840: var(--ol8-color-orange-840);
759
- --ol8-color-primary-930: var(--ol8-color-orange-930);
760
- }
761
-
762
- [data-ol8-primary="green"] {
763
- --ol8-color-primary-030: var(--ol8-color-green-030);
764
- --ol8-color-primary-060: var(--ol8-color-green-060);
765
- --ol8-color-primary-090: var(--ol8-color-green-090);
766
- --ol8-color-primary-120: var(--ol8-color-green-120);
767
- --ol8-color-primary-240: var(--ol8-color-green-240);
768
- --ol8-color-primary-360: var(--ol8-color-green-360);
769
- --ol8-color-primary-480: var(--ol8-color-green-480);
770
- --ol8-color-primary-600: var(--ol8-color-green-600);
771
- --ol8-color-primary-720: var(--ol8-color-green-720);
772
- --ol8-color-primary-840: var(--ol8-color-green-840);
773
- --ol8-color-primary-930: var(--ol8-color-green-930);
774
- }
775
-
776
- [data-ol8-type-mode="medium"] {
777
- --ol8-typography-display-large-font-family: Syne;
778
- --ol8-typography-display-large-font-size: 90px;
779
- --ol8-typography-display-large-font-weight: 690;
780
- --ol8-typography-display-large-letter-spacing: -0.025em;
781
- --ol8-typography-display-large-line-height: 96px;
782
- --ol8-typography-display-medium-font-family: Syne;
783
- --ol8-typography-display-medium-font-size: 66px;
784
- --ol8-typography-display-medium-font-weight: 690;
785
- --ol8-typography-display-medium-letter-spacing: -0.02em;
786
- --ol8-typography-display-medium-line-height: 72px;
787
- --ol8-typography-display-small-font-family: Syne;
788
- --ol8-typography-display-small-font-size: 51px;
789
- --ol8-typography-display-small-font-weight: 600;
790
- --ol8-typography-display-small-letter-spacing: -0.015em;
791
- --ol8-typography-display-small-line-height: 60px;
792
- --ol8-typography-title-large-font-family: AR One Sans;
793
- --ol8-typography-title-large-font-size: 51px;
794
- --ol8-typography-title-large-font-weight: 600;
795
- --ol8-typography-title-large-letter-spacing: -0.01em;
796
- --ol8-typography-title-large-line-height: 60px;
797
- --ol8-typography-title-medium-font-family: AR One Sans;
798
- --ol8-typography-title-medium-font-size: 39px;
799
- --ol8-typography-title-medium-font-weight: 600;
800
- --ol8-typography-title-medium-letter-spacing: -0.005em;
801
- --ol8-typography-title-medium-line-height: 48px;
802
- --ol8-typography-title-small-font-family: AR One Sans;
803
- --ol8-typography-title-small-font-size: 30px;
804
- --ol8-typography-title-small-font-weight: 600;
805
- --ol8-typography-title-small-letter-spacing: 0em;
806
- --ol8-typography-title-small-line-height: 39px;
807
- }
808
-
809
- [data-ol8-type-mode="expanded"] {
810
- --ol8-typography-display-large-font-family: Syne;
811
- --ol8-typography-display-large-font-size: 120px;
812
- --ol8-typography-display-large-font-weight: 690;
813
- --ol8-typography-display-large-letter-spacing: -0.03em;
814
- --ol8-typography-display-large-line-height: 126px;
815
- --ol8-typography-display-medium-font-family: Syne;
816
- --ol8-typography-display-medium-font-size: 90px;
817
- --ol8-typography-display-medium-font-weight: 690;
818
- --ol8-typography-display-medium-letter-spacing: -0.025em;
819
- --ol8-typography-display-medium-line-height: 96px;
820
- --ol8-typography-display-small-font-family: Syne;
821
- --ol8-typography-display-small-font-size: 66px;
822
- --ol8-typography-display-small-font-weight: 600;
823
- --ol8-typography-display-small-letter-spacing: -0.02em;
824
- --ol8-typography-display-small-line-height: 72px;
825
- --ol8-typography-title-large-font-family: AR One Sans;
826
- --ol8-typography-title-large-font-size: 51px;
827
- --ol8-typography-title-large-font-weight: 600;
828
- --ol8-typography-title-large-letter-spacing: -0.01em;
829
- --ol8-typography-title-large-line-height: 60px;
830
- --ol8-typography-title-medium-font-family: AR One Sans;
831
- --ol8-typography-title-medium-font-size: 39px;
832
- --ol8-typography-title-medium-font-weight: 600;
833
- --ol8-typography-title-medium-letter-spacing: -0.005em;
834
- --ol8-typography-title-medium-line-height: 48px;
835
- --ol8-typography-title-small-font-family: AR One Sans;
836
- --ol8-typography-title-small-font-size: 30px;
837
- --ol8-typography-title-small-font-weight: 600;
838
- --ol8-typography-title-small-letter-spacing: 0em;
839
- --ol8-typography-title-small-line-height: 39px;
840
- }