@incodetech/web 0.0.0-dev-20260126-4504c5b

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 (48) hide show
  1. package/dist/aligndevicelottie-DlQCRPfM.js +29 -0
  2. package/dist/backdevicelottie-B4NgyWmX.js +29 -0
  3. package/dist/base.css +1634 -0
  4. package/dist/baseTutorial-Be85FuyO.js +383 -0
  5. package/dist/blurdevicelottie-_BZRug1c.js +29 -0
  6. package/dist/browser-ponyfill-B6W6hHVY.js +344 -0
  7. package/dist/email/email.es.js +137 -0
  8. package/dist/email/styles.css +123 -0
  9. package/dist/flip-animation-COR596wy.js +29 -0
  10. package/dist/flow/flow.es.js +540 -0
  11. package/dist/flow/styles.css +3204 -0
  12. package/dist/frontdevicelottie-KhKxT5n9.js +29 -0
  13. package/dist/glaredevicelottie-DLuIStvb.js +29 -0
  14. package/dist/id/id.es.js +1497 -0
  15. package/dist/id/styles.css +1587 -0
  16. package/dist/id-laser-h-BBV3r3rz.js +29 -0
  17. package/dist/id-laser-v-BTHJaSfx.js +29 -0
  18. package/dist/id-tutorial-B-F5Q28m.js +29 -0
  19. package/dist/incodeModule-DR92HDjR.js +257 -0
  20. package/dist/index.es.js +6 -0
  21. package/dist/instance-B-q0ZREN.js +2140 -0
  22. package/dist/otpInput-Dm1LhnDm.js +151 -0
  23. package/dist/page-CITAo3qf.js +189 -0
  24. package/dist/passport-tutorial-CaYBFTqt.js +29 -0
  25. package/dist/phone/phone.es.js +3442 -0
  26. package/dist/phone/styles.css +305 -0
  27. package/dist/selfie/selfie.es.js +570 -0
  28. package/dist/selfie/styles.css +638 -0
  29. package/dist/selfieTutorial-Dm_p0ke9.js +29 -0
  30. package/dist/setup-BhetRn4n.js +20 -0
  31. package/dist/spinner-CQtj_FFo.js +65 -0
  32. package/dist/themes/dark.css +797 -0
  33. package/dist/themes/light.css +688 -0
  34. package/dist/types/base.d.ts +1 -0
  35. package/dist/types/dark.d.ts +1 -0
  36. package/dist/types/email.d.ts +57 -0
  37. package/dist/types/flow.d.ts +69 -0
  38. package/dist/types/id.d.ts +34 -0
  39. package/dist/types/index.d.ts +38 -0
  40. package/dist/types/light.d.ts +1 -0
  41. package/dist/types/phone.d.ts +58 -0
  42. package/dist/types/selfie.d.ts +31 -0
  43. package/dist/types/styles.d.ts +1 -0
  44. package/dist/types/themes/dark.d.ts +1 -0
  45. package/dist/types/themes/light.d.ts +1 -0
  46. package/dist/uiConfig-DEqynrWx.js +23 -0
  47. package/dist/vendor-preact-CjD4WiuC.js +593 -0
  48. package/package.json +100 -0
package/dist/themes/dark.css ADDED
@@ -0,0 +1,797 @@
1
+ :root,
2
+ :host {
3
+ /* Color / Gray */
4
+
5
+ --primitive-color-gray-0: #ffffff;
6
+ --primitive-color-gray-0-80: rgba(255, 255, 255, 0.8);
7
+ --primitive-color-gray-50: #fcfcfd;
8
+ --primitive-color-gray-100: #ebecef;
9
+ --primitive-color-gray-200: #c6c8d2;
10
+ --primitive-color-gray-300: #a3a8b8;
11
+ --primitive-color-gray-500: #60667c;
12
+ --primitive-color-gray-700: #3a3e4b;
13
+ --primitive-color-gray-800: #262831;
14
+ --primitive-color-gray-900: #14151a;
15
+ --primitive-color-gray-900-80: rgba(20, 21, 26, 0.8);
16
+ --primitive-color-gray-1000: #000000;
17
+ --primitive-color-gray-1000-80: rgba(0, 0, 0, 0.8);
18
+
19
+ /* Color / Brand */
20
+
21
+ --primitive-color-brand-50: #e5f0ff;
22
+ --primitive-color-brand-200: #99ceff;
23
+ --primitive-color-brand-300: #66a6ff;
24
+ --primitive-color-brand-400: #3388ff;
25
+ --primitive-color-brand-500: #006aff;
26
+ --primitive-color-brand-600: #0055cc;
27
+ --primitive-color-brand-900: #21273b;
28
+
29
+ /* Color / Brand Secondary */
30
+
31
+ --primitive-color-brand-secondary-50: #f2e2fe;
32
+ --primitive-color-brand-secondary-500: #820ad1;
33
+
34
+ /* Color / Positive */
35
+
36
+ --primitive-color-positive-50: #e4fbf0;
37
+ --primitive-color-positive-600: #189f60;
38
+ --primitive-color-positive-800: #0c5030;
39
+
40
+ /* Color / Warning */
41
+
42
+ --primitive-color-warning-50: #fff7eb;
43
+ --primitive-color-warning-400: #ffb647;
44
+ --primitive-color-warning-500: #ff9900;
45
+ --primitive-color-warning-950: #523100;
46
+
47
+ /* Color / Negative */
48
+
49
+ --primitive-color-negative-50: #fff0f0;
50
+ --primitive-color-negative-500: #ff5a5f;
51
+ --primitive-color-negative-600: #e71111;
52
+ --primitive-color-negative-950: #240001;
53
+
54
+ /* Typography / Family */
55
+ --primitive-typography-family-rethink-sans: 'Rethink Sans';
56
+ --primitive-typography-family-dm-sans: 'DM Sans';
57
+
58
+ /* Typography / Size */
59
+
60
+ --primitive-typography-size-12: 12px;
61
+ --primitive-typography-size-14: 14px;
62
+ --primitive-typography-size-16: 16px;
63
+ --primitive-typography-size-18: 18px;
64
+ --primitive-typography-size-20: 20px;
65
+ --primitive-typography-size-24: 24px;
66
+ --primitive-typography-size-32: 32px;
67
+ --primitive-typography-size-40: 40px;
68
+ --primitive-typography-size-48: 48px;
69
+ --primitive-typography-size-80: 80px;
70
+
71
+ /* Typography / Weight */
72
+
73
+ --primitive-typography-weight-thin: 300;
74
+ --primitive-typography-weight-regular: 400;
75
+ --primitive-typography-weight-medium: 500;
76
+ --primitive-typography-weight-semibold: 600;
77
+ --primitive-typography-weight-bold: 700;
78
+ --primitive-typography-weight-extrabold: 800;
79
+
80
+ /* Typography / Letter Spacing */
81
+
82
+ --primitive-typography-letter-spacing-0: 0px;
83
+ --primitive-typography-letter-spacing-minus-0-5: -0.5px;
84
+ --primitive-typography-letter-spacing-minus-1: -1px;
85
+ --primitive-typography-letter-spacing-minus-1-5: -1.5px;
86
+
87
+ /* Typography / Line Height */
88
+
89
+ --primitive-typography-line-height-110: 1.1;
90
+ --primitive-typography-line-height-114: 1.14;
91
+ --primitive-typography-line-height-115: 1.15;
92
+ --primitive-typography-line-height-120: 1.2;
93
+
94
+ /* Border / Width */
95
+
96
+ --primitive-border-width-0: 0px;
97
+ --primitive-border-width-1: 1px;
98
+ --primitive-border-width-2: 2px;
99
+ --primitive-border-width-4: 4px;
100
+
101
+ /* Border / Radius */
102
+
103
+ --primitive-border-radius-0: 0px;
104
+ --primitive-border-radius-4: 4px;
105
+ --primitive-border-radius-8: 8px;
106
+ --primitive-border-radius-16: 16px;
107
+ --primitive-border-radius-24: 24px;
108
+ --primitive-border-radius-40: 40px;
109
+ --primitive-border-radius-64: 64px;
110
+ --primitive-border-radius-9999: 9999px;
111
+
112
+ /* Scale */
113
+
114
+ --primitive-scale-0: 0px;
115
+ --primitive-scale-2: 2px;
116
+ --primitive-scale-4: 4px;
117
+ --primitive-scale-8: 8px;
118
+ --primitive-scale-12: 12px;
119
+ --primitive-scale-16: 16px;
120
+ --primitive-scale-20: 20px;
121
+ --primitive-scale-24: 24px;
122
+ --primitive-scale-28: 28px;
123
+ --primitive-scale-32: 32px;
124
+ --primitive-scale-40: 40px;
125
+ --primitive-scale-48: 48px;
126
+ --primitive-scale-56: 56px;
127
+ --primitive-scale-64: 64px;
128
+ --primitive-scale-72: 72px;
129
+ --primitive-scale-80: 80px;
130
+ --primitive-scale-88: 88px;
131
+ --primitive-scale-96: 96px;
132
+ --primitive-scale-104: 104px;
133
+ --primitive-scale-120: 120px;
134
+ --primitive-scale-128: 128px;
135
+ --primitive-scale-160: 160px;
136
+ --primitive-scale-200: 200px;
137
+ }
138
+ :root,
139
+ :host {
140
+ /* Border / Width */
141
+
142
+ --border-none: var(--primitive-border-width-0);
143
+ --border-regular: var(--primitive-border-width-1);
144
+ --border-bold: var(--primitive-border-width-2);
145
+
146
+ /* Border / Radius */
147
+
148
+ --border-radius-none: var(--primitive-border-radius-0);
149
+ --border-radius-x-small: var(--primitive-border-radius-4);
150
+ --border-radius-small: var(--primitive-border-radius-8);
151
+ --border-radius-medium: var(--primitive-border-radius-16);
152
+ --border-radius-large: var(--primitive-border-radius-24);
153
+ --border-radius-x-large: var(--primitive-border-radius-40);
154
+ --border-radius-xx-large: var(--primitive-border-radius-64);
155
+ --border-radius-full: var(--primitive-border-radius-9999);
156
+
157
+ /* Spacing */
158
+
159
+ --spacing-none: var(--primitive-scale-0);
160
+ --spacing-2: var(--primitive-scale-2);
161
+ --spacing-4: var(--primitive-scale-4);
162
+ --spacing-8: var(--primitive-scale-8);
163
+ --spacing-12: var(--primitive-scale-12);
164
+ --spacing-16: var(--primitive-scale-16);
165
+ --spacing-20: var(--primitive-scale-20);
166
+ --spacing-24: var(--primitive-scale-24);
167
+ --spacing-28: var(--primitive-scale-28);
168
+ --spacing-32: var(--primitive-scale-32);
169
+ --spacing-40: var(--primitive-scale-40);
170
+ --spacing-48: var(--primitive-scale-48);
171
+ --spacing-64: var(--primitive-scale-64);
172
+ --spacing-80: var(--primitive-scale-80);
173
+ --spacing-96: var(--primitive-scale-96);
174
+ --spacing-104: var(--primitive-scale-104);
175
+ --spacing-120: var(--primitive-scale-120);
176
+ --spacing-160: var(--primitive-scale-160);
177
+ --spacing-200: var(--primitive-scale-200);
178
+
179
+ /* Icon / Size */
180
+
181
+ --icon-size-xx-small: var(--primitive-scale-16);
182
+ --icon-size-x-small: var(--primitive-scale-20);
183
+ --icon-size-small: var(--primitive-scale-24);
184
+ --icon-size-medium: var(--primitive-scale-32);
185
+ --icon-size-large: var(--primitive-scale-40);
186
+ --icon-size-x-large: var(--primitive-scale-48);
187
+ --icon-size-xx-large: var(--primitive-scale-64);
188
+ --icon-size-xxx-large: var(--primitive-scale-80);
189
+
190
+ /* Typography */
191
+
192
+ --typography-display-d1-size: var(--primitive-typography-size-80);
193
+ --typography-display-d1-weight: var(--primitive-typography-weight-extrabold);
194
+ --typography-display-d1-line-height: var(
195
+ --primitive-typography-line-height-110
196
+ );
197
+ --typography-display-d1-letter-spacing: var(
198
+ --primitive-typography-letter-spacing-minus-1-5
199
+ );
200
+
201
+ --typography-display-d2-size: var(--primitive-typography-size-48);
202
+ --typography-display-d2-weight: var(--primitive-typography-weight-extrabold);
203
+ --typography-display-d2-line-height: var(
204
+ --primitive-typography-line-height-110
205
+ );
206
+ --typography-display-d2-letter-spacing: var(
207
+ --primitive-typography-letter-spacing-minus-1-5
208
+ );
209
+
210
+ --typography-headline-h1-size: var(--primitive-typography-size-32);
211
+ --typography-headline-h1-weight: var(--primitive-typography-weight-bold);
212
+ --typography-headline-h1-line-height: var(
213
+ --primitive-typography-line-height-115
214
+ );
215
+ --typography-headline-h1-letter-spacing: var(
216
+ --primitive-typography-letter-spacing-minus-1
217
+ );
218
+
219
+ --typography-headline-h2-size: var(--primitive-typography-size-24);
220
+ --typography-headline-h2-weight: var(--primitive-typography-weight-bold);
221
+ --typography-headline-h2-line-height: var(
222
+ --primitive-typography-line-height-115
223
+ );
224
+ --typography-headline-h2-letter-spacing: var(
225
+ --primitive-typography-letter-spacing-minus-1
226
+ );
227
+
228
+ --typography-headline-h3-size: var(--primitive-typography-size-20);
229
+ --typography-headline-h3-weight: var(--primitive-typography-weight-semibold);
230
+ --typography-headline-h3-line-height: var(
231
+ --primitive-typography-line-height-115
232
+ );
233
+ --typography-headline-h3-letter-spacing: var(
234
+ --primitive-typography-letter-spacing-minus-0-5
235
+ );
236
+
237
+ --typography-headline-h4-size: var(--primitive-typography-size-18);
238
+ --typography-headline-h4-weight: var(--primitive-typography-weight-medium);
239
+ --typography-headline-h4-line-height: var(
240
+ --primitive-typography-line-height-115
241
+ );
242
+ --typography-headline-h4-letter-spacing: var(
243
+ --primitive-typography-letter-spacing-minus-0-5
244
+ );
245
+
246
+ --typography-headline-h5-size: var(--primitive-typography-size-16);
247
+ --typography-headline-h5-weight: var(--primitive-typography-weight-medium);
248
+ --typography-headline-h5-line-height: var(
249
+ --primitive-typography-line-height-115
250
+ );
251
+ --typography-headline-h5-letter-spacing: var(
252
+ --primitive-typography-letter-spacing-minus-0-5
253
+ );
254
+
255
+ --typography-body-sm-size: var(--primitive-typography-size-12);
256
+ --typography-body-sm-weight: var(--primitive-typography-weight-regular);
257
+ --typography-body-sm-line-height: var(--primitive-typography-line-height-120);
258
+ --typography-body-sm-letter-spacing: var(
259
+ --primitive-typography-letter-spacing-0
260
+ );
261
+
262
+ --typography-body-regular-size: var(--primitive-typography-size-14);
263
+ --typography-body-regular-weight: var(--primitive-typography-weight-regular);
264
+ --typography-body-regular-line-height: var(
265
+ --primitive-typography-line-height-120
266
+ );
267
+ --typography-body-regular-letter-spacing: var(
268
+ --primitive-typography-letter-spacing-0
269
+ );
270
+
271
+ --typography-body-lg-size: var(--primitive-typography-size-16);
272
+ --typography-body-lg-weight: var(--primitive-typography-weight-regular);
273
+ --typography-body-lg-line-height: var(--primitive-typography-line-height-120);
274
+ --typography-body-lg-letter-spacing: var(
275
+ --primitive-typography-letter-spacing-0
276
+ );
277
+
278
+ --typography-body-sm-medium-size: var(--primitive-typography-size-12);
279
+ --typography-body-sm-medium-weight: var(--primitive-typography-weight-medium);
280
+ --typography-body-sm-medium-line-height: var(
281
+ --primitive-typography-line-height-120
282
+ );
283
+ --typography-body-sm-medium-letter-spacing: var(
284
+ --primitive-typography-letter-spacing-0
285
+ );
286
+
287
+ --typography-body-medium-size: var(--primitive-typography-size-14);
288
+ --typography-body-medium-weight: var(--primitive-typography-weight-medium);
289
+ --typography-body-medium-line-height: var(
290
+ --primitive-typography-line-height-120
291
+ );
292
+ --typography-body-medium-letter-spacing: var(
293
+ --primitive-typography-letter-spacing-0
294
+ );
295
+
296
+ --typography-body-lg-medium-size: var(--primitive-typography-size-16);
297
+ --typography-body-lg-medium-weight: var(--primitive-typography-weight-medium);
298
+ --typography-body-lg-medium-line-height: var(
299
+ --primitive-typography-line-height-120
300
+ );
301
+ --typography-body-lg-medium-letter-spacing: var(
302
+ --primitive-typography-letter-spacing-0
303
+ );
304
+
305
+ --typography-tooltip-size: var(--primitive-typography-size-16);
306
+ --typography-tooltip-weight: var(--primitive-typography-weight-medium);
307
+ --typography-tooltip-line-height: var(--primitive-typography-line-height-114);
308
+ --typography-tooltip-letter-spacing: var(
309
+ --primitive-typography-letter-spacing-minus-0-5
310
+ );
311
+ }
312
+ :root,
313
+ :host {
314
+ /* Surface / Neutral */
315
+
316
+ --surface-neutral-0: var(--primitive-color-gray-0);
317
+ --surface-neutral-0-80: var(--primitive-color-gray-0-80);
318
+ --surface-neutral-50: var(--primitive-color-gray-50);
319
+ --surface-neutral-100: var(--primitive-color-gray-100);
320
+ --surface-neutral-200: var(--primitive-color-gray-200);
321
+ --surface-neutral-300: var(--primitive-color-gray-300);
322
+ --surface-neutral-500: var(--primitive-color-gray-500);
323
+ --surface-neutral-700: var(--primitive-color-gray-700);
324
+ --surface-neutral-800: var(--primitive-color-gray-800);
325
+ --surface-neutral-900: var(--primitive-color-gray-900);
326
+ --surface-neutral-900-80: var(--primitive-color-gray-900-80);
327
+ --surface-neutral-900-static: var(--primitive-color-gray-900);
328
+ --surface-neutral-1000: var(--primitive-color-gray-1000);
329
+ --surface-neutral-dark: rgba(0, 0, 0, 0.9);
330
+
331
+ /* Surface / Brand */
332
+
333
+ --surface-brand-50: var(--primitive-color-brand-50);
334
+ --surface-brand-400: var(--primitive-color-brand-400);
335
+ --surface-brand-400-static: var(--primitive-color-brand-400);
336
+ --surface-brand-500: var(--primitive-color-brand-500);
337
+ --surface-brand-500-static: var(--primitive-color-brand-500);
338
+ --surface-brand-600: var(--primitive-color-brand-600);
339
+ --surface-brand-600-static: var(--primitive-color-brand-600);
340
+
341
+ /* Surface / Status */
342
+
343
+ --surface-status-negative-50: var(--primitive-color-negative-50);
344
+ --surface-status-negative-500: var(--primitive-color-negative-600);
345
+ --surface-status-negative-600: var(--primitive-color-negative-600);
346
+ --surface-error-500: var(--primitive-color-negative-600);
347
+
348
+ --surface-status-warning-50: var(--primitive-color-warning-50);
349
+ --surface-status-warning-500: var(--primitive-color-warning-500);
350
+
351
+ --surface-status-positive-50: var(--primitive-color-positive-50);
352
+ --surface-status-positive-500: var(--primitive-color-positive-600);
353
+ --surface-status-positive-600: var(--primitive-color-positive-600);
354
+ --surface-status-positive-600-static: var(--primitive-color-positive-600);
355
+
356
+ /* Icon / Neutral */
357
+
358
+ --icon-neutral-0: var(--primitive-color-gray-0);
359
+ --icon-neutral-0-static: var(--primitive-color-gray-0);
360
+ --icon-neutral-50: var(--primitive-color-gray-50);
361
+ --icon-neutral-50-static: var(--primitive-color-gray-50);
362
+ --icon-neutral-300: var(--primitive-color-gray-300);
363
+ --icon-neutral-500: var(--primitive-color-gray-500);
364
+ --icon-neutral-500-static: var(--primitive-color-gray-500);
365
+ --icon-neutral-800: var(--primitive-color-gray-800);
366
+ --icon-neutral-800-static: var(--primitive-color-gray-800);
367
+
368
+ /* Icon / Brand */
369
+
370
+ --icon-brand-500: var(--primitive-color-brand-500);
371
+ --icon-brand-500-static: var(--primitive-color-brand-500);
372
+
373
+ /* Icon / Status */
374
+
375
+ --icon-status-negative: var(--primitive-color-negative-600);
376
+ --icon-status-warning: var(--primitive-color-warning-500);
377
+ --icon-status-positive: var(--primitive-color-positive-600);
378
+ --icon-status-positive-static: var(--primitive-color-positive-600);
379
+
380
+ /* Border / Neutral */
381
+
382
+ --border-neutral-0: var(--primitive-color-gray-0);
383
+ --border-neutral-100: var(--primitive-color-gray-100);
384
+ --border-neutral-300: var(--primitive-color-gray-300);
385
+ --border-neutral-500: var(--primitive-color-gray-500);
386
+
387
+ /* Border / Brand */
388
+
389
+ --border-brand-500: var(--primitive-color-brand-500);
390
+ --border-brand-500-static: var(--primitive-color-brand-500);
391
+ --border-brand-600: var(--primitive-color-brand-600);
392
+
393
+ /* Border / Status */
394
+
395
+ --border-status-negative: var(--primitive-color-negative-600);
396
+ --border-status-warning: var(--primitive-color-warning-500);
397
+ --border-status-positive: var(--primitive-color-positive-600);
398
+ --border-status-positive-static: var(--primitive-color-positive-600);
399
+ --border-status-focus: var(--primitive-color-brand-500);
400
+
401
+ /* Text / Body */
402
+
403
+ --text-body-primary: var(--primitive-color-gray-800);
404
+ --text-body-secondary: var(--primitive-color-gray-500);
405
+ --text-body-tertiary: var(--primitive-color-gray-300);
406
+ --text-body-0: var(--primitive-color-gray-0);
407
+ --text-body-0-static: var(--primitive-color-gray-0);
408
+
409
+ /* Text / Link */
410
+
411
+ --text-link-default: var(--primitive-color-brand-500);
412
+ --text-link-hover: var(--primitive-color-brand-300);
413
+ --text-link-hover-static: var(--primitive-color-brand-300);
414
+ --text-link-disabled: var(--primitive-color-gray-500);
415
+ --text-link-disabled-static: var(--primitive-color-gray-500);
416
+ --text-link-visited: var(--primitive-color-gray-700);
417
+
418
+ /* Text / Accent */
419
+
420
+ --text-accent-brand: var(--primitive-color-brand-500);
421
+ --text-accent-brand-static: var(--primitive-color-brand-500);
422
+ --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);
423
+ --text-accent-brand-secondary-static: var(
424
+ --primitive-color-brand-secondary-500
425
+ );
426
+
427
+ /* Text / Status */
428
+
429
+ --text-status-negative: var(--primitive-color-negative-600);
430
+ --text-status-warning: var(--primitive-color-warning-500);
431
+ --text-status-positive: var(--primitive-color-positive-600);
432
+ --text-status-positive-static: var(--primitive-color-positive-600);
433
+
434
+ /* Text / Tooltip */
435
+
436
+ --text-tooltip-neutral: var(--text-body-0-static);
437
+ }
438
+ [data-incode-theme='dark'] {
439
+ /* Surface / Neutral */
440
+
441
+ --surface-neutral-0: var(--primitive-color-gray-1000);
442
+ --surface-neutral-0-80: var(--primitive-color-gray-900-80);
443
+ --surface-neutral-50: var(--primitive-color-gray-900);
444
+ --surface-neutral-100: var(--primitive-color-gray-800);
445
+ --surface-neutral-200: var(--primitive-color-gray-700);
446
+ --surface-neutral-300: var(--primitive-color-gray-500);
447
+ --surface-neutral-500: var(--primitive-color-gray-300);
448
+ --surface-neutral-700: var(--primitive-color-gray-200);
449
+ --surface-neutral-800: var(--primitive-color-gray-100);
450
+ --surface-neutral-900: var(--primitive-color-gray-0);
451
+ --surface-neutral-900-80: var(--primitive-color-gray-0-80);
452
+ --surface-neutral-1000: var(--primitive-color-gray-0);
453
+ --surface-neutral-dark: rgba(0, 0, 0, 0.9);
454
+
455
+ /* Surface / Brand */
456
+
457
+ --surface-brand-50: var(--primitive-color-brand-900);
458
+
459
+ /* Surface / Status */
460
+
461
+ --surface-status-negative-50: var(--primitive-color-negative-950);
462
+ --surface-status-negative-500: var(--primitive-color-negative-500);
463
+ --surface-status-negative-600: var(--primitive-color-negative-500);
464
+ --surface-error-500: var(--primitive-color-negative-500);
465
+
466
+ --surface-status-warning-50: var(--primitive-color-warning-950);
467
+ --surface-status-warning-500: var(--primitive-color-warning-400);
468
+
469
+ --surface-status-positive-50: var(--primitive-color-positive-800);
470
+ --surface-status-positive-500: var(--primitive-color-positive-600);
471
+
472
+ /* Icon / Neutral */
473
+
474
+ --icon-neutral-0: var(--primitive-color-gray-800);
475
+ --icon-neutral-300: var(--primitive-color-gray-500);
476
+ --icon-neutral-500: var(--primitive-color-gray-300);
477
+ --icon-neutral-800: var(--primitive-color-gray-100);
478
+
479
+ /* Icon / Status */
480
+
481
+ --icon-status-negative: var(--primitive-color-negative-500);
482
+ --icon-status-warning: var(--primitive-color-warning-400);
483
+
484
+ /* Border / Neutral */
485
+
486
+ --border-neutral-100: var(--primitive-color-gray-700);
487
+ --border-neutral-300: var(--primitive-color-gray-500);
488
+ --border-neutral-500: var(--primitive-color-gray-300);
489
+
490
+ /* Border / Brand */
491
+
492
+ --border-brand-600: var(--primitive-color-brand-400);
493
+
494
+ /* Border / Status */
495
+
496
+ --border-status-negative: var(--primitive-color-negative-500);
497
+ --border-status-warning: var(--primitive-color-warning-400);
498
+
499
+ /* Text / Body */
500
+
501
+ --text-body-primary: var(--primitive-color-gray-50);
502
+ --text-body-secondary: var(--primitive-color-gray-300);
503
+ --text-body-tertiary: var(--primitive-color-gray-500);
504
+
505
+ /* Text / Link */
506
+
507
+ --text-link-default: var(--primitive-color-brand-400);
508
+ --text-link-visited: var(--primitive-color-gray-300);
509
+
510
+ /* Text / Status */
511
+
512
+ --text-status-negative: var(--primitive-color-negative-500);
513
+ --text-status-warning: var(--primitive-color-warning-400);
514
+ }
515
+ :root,
516
+ :host {
517
+ /* Button / Primary */
518
+ --button-primary-surface-default: var(--surface-brand-500-static);
519
+ --button-primary-surface-hover: var(--surface-brand-400-static);
520
+ --button-primary-surface-pressed: var(--surface-brand-600-static);
521
+ --button-primary-surface-disabled: var(--surface-neutral-100);
522
+
523
+ --button-primary-text-default: var(--text-body-0-static);
524
+ --button-primary-text-disabled: var(--text-body-tertiary);
525
+
526
+ --button-primary-border-default: var(--surface-brand-500-static);
527
+ --button-primary-border-hover: var(--surface-brand-400-static);
528
+ --button-primary-border-pressed: var(--surface-brand-600-static);
529
+ --button-primary-border-disabled: var(--surface-neutral-100);
530
+ --button-primary-border-radius: var(--border-radius-medium);
531
+
532
+ /* Button / Secondary */
533
+ --button-secondary-surface-default: var(--surface-neutral-0);
534
+ --button-secondary-surface-hover: var(--surface-brand-50);
535
+ --button-secondary-surface-pressed: var(--surface-brand-600-static);
536
+ --button-secondary-surface-disabled: var(--surface-neutral-200);
537
+
538
+ --button-secondary-text-default: var(--text-accent-brand-static);
539
+ --button-secondary-text-disabled: var(--text-body-secondary);
540
+
541
+ --button-secondary-border-default: var(--surface-brand-500-static);
542
+ --button-secondary-border-hover: var(--surface-brand-400-static);
543
+ --button-secondary-border-pressed: var(--surface-brand-600-static);
544
+ --button-secondary-border-disabled: var(--surface-neutral-100);
545
+ --button-secondary-border-radius: var(--border-radius-medium);
546
+
547
+ /* Button / Tertiary */
548
+ --button-tertiary-text-default: var(--text-accent-brand-static);
549
+ --button-tertiary-text-disabled: var(--text-body-secondary);
550
+
551
+ /* Checkbox */
552
+ --checkbox-surface-default: var(--surface-neutral-50);
553
+ --checkbox-surface-selected: var(--surface-brand-500-static);
554
+ --checkbox-surface-disabled: var(--surface-neutral-200);
555
+
556
+ --checkbox-border-default: var(--border-neutral-100);
557
+ --checkbox-border-selected: var(--border-brand-500-static);
558
+ --checkbox-border-disabled: var(--border-neutral-300);
559
+ --checkbox-border-negative: var(--border-status-negative);
560
+ --checkbox-border-radius: var(--border-radius-small);
561
+
562
+ --checkbox-icon-default: var(--surface-neutral-0);
563
+
564
+ --checkbox-text-default: var(--text-body-primary);
565
+ --checkbox-text-disabled: var(--text-body-tertiary);
566
+ --checkbox-text-negative: var(--text-status-negative);
567
+
568
+ /* Card */
569
+ --card-surface-primary: var(--surface-neutral-800);
570
+
571
+ --card-text-title: var(--surface-neutral-100);
572
+ --card-text-subtitle: var(--text-body-secondary);
573
+
574
+ /* Countdown */
575
+ --countdown-surface-default: var(--surface-neutral-900-static);
576
+
577
+ --countdown-text-default: var(--text-body-0-static);
578
+
579
+ /* Input */
580
+ --input-surface-default: var(--surface-neutral-50);
581
+ --input-surface-active: var(--surface-neutral-50);
582
+ --input-surface-disabled: var(--surface-neutral-100);
583
+ --input-surface-negative: var(--surface-neutral-50);
584
+
585
+ --input-border-default: var(--border-neutral-100);
586
+ --input-border-active: var(--border-brand-500-static);
587
+ --input-border-disabled: var(--border-neutral-100);
588
+ --input-border-negative: var(--border-status-negative);
589
+
590
+ --input-icon-default: var(--surface-neutral-300);
591
+ --input-icon-positive: var(--surface-status-positive-600-static);
592
+ --input-icon-negative: var(--border-status-negative);
593
+ --input-icon-warning: var(--surface-status-warning-500);
594
+
595
+ --input-text-label-default: var(--text-body-primary);
596
+ --input-text-label-disabled: var(--text-body-tertiary);
597
+
598
+ --input-text-field-default: var(--text-body-primary);
599
+ --input-text-field-disabled: var(--text-body-tertiary);
600
+ --input-text-field-placeholder: var(--text-body-tertiary);
601
+
602
+ --input-text-helper-default: var(--text-body-secondary);
603
+ --input-text-helper-disabled: var(--text-body-tertiary);
604
+ --input-text-helper-negative: var(--text-status-negative);
605
+
606
+ /* Dropdown */
607
+
608
+ --dropdown-surface-default: var(--surface-neutral-50);
609
+ --dropdown-surface-active: var(--surface-neutral-50);
610
+ --dropdown-surface-disabled: var(--surface-neutral-100);
611
+ --dropdown-surface-negative: var(--surface-neutral-50);
612
+
613
+ --dropdown-border-default: var(--border-neutral-100);
614
+ --dropdown-border-active: var(--border-brand-500-static);
615
+ --dropdown-border-disabled: var(--border-neutral-100);
616
+ --dropdown-border-negative: var(--border-status-negative);
617
+
618
+ --dropdown-icon-default: var(--surface-neutral-300);
619
+ --dropdown-icon-positive: var(--surface-status-positive-600-static);
620
+ --dropdown-icon-negative: var(--border-status-negative);
621
+ --dropdown-icon-warning: var(--surface-status-warning-500);
622
+
623
+ --dropdown-text-label-default: var(--text-body-primary);
624
+ --dropdown-text-label-disabled: var(--text-body-tertiary);
625
+
626
+ --dropdown-text-input-default: var(--text-body-primary);
627
+ --dropdown-text-input-disabled: var(--text-body-tertiary);
628
+ --dropdown-text-input-placeholder: var(--text-body-tertiary);
629
+
630
+ --dropdown-text-helper-default: var(--text-body-secondary);
631
+ --dropdown-text-helper-disabled: var(--text-body-tertiary);
632
+ --dropdown-text-helper-negative: var(--text-status-negative);
633
+
634
+ /* Link */
635
+
636
+ --link-default: var(--text-accent-brand-static);
637
+ --link-hover: var(--text-body-primary);
638
+ --link-disabled: var(--text-body-secondary);
639
+ --link-visited: var(--text-accent-brand-static);
640
+
641
+ /* Spinner */
642
+
643
+ --spinner-surface-primary: var(--surface-brand-500-static);
644
+ --spinner-surface-secondary: var(--surface-brand-50);
645
+ --spinner-surface-overlay: var(--surface-neutral-0);
646
+ --spinner-surface-overlay-opacity: 1;
647
+
648
+ --spinner-text-title: var(--text-body-primary);
649
+ --spinner-text-subtitle: var(--text-body-secondary);
650
+
651
+ /* Snackbar */
652
+
653
+ --snackbar-surface-neutral: var(--surface-brand-50);
654
+ --snackbar-surface-positive: var(--surface-status-positive-50);
655
+ --snackbar-surface-warning: var(--surface-status-warning-50);
656
+ --snackbar-surface-negative: var(--surface-status-negative-50);
657
+
658
+ --snackbar-border-neutral: var(--border-brand-500-static);
659
+ --snackbar-border-positive: var(--border-status-positive-static);
660
+ --snackbar-border-warning: var(--border-status-warning);
661
+ --snackbar-border-negative: var(--border-status-negative);
662
+
663
+ --snackbar-icon-brand: var(--icon-brand-500-static);
664
+ --snackbar-icon-positive: var(--icon-status-positive-static);
665
+ --snackbar-icon-negative: var(--icon-status-negative);
666
+ --snackbar-icon-warning: var(--icon-status-warning);
667
+
668
+ --snackbar-text-default: var(--text-body-primary);
669
+ --snackbar-text-link: var(--link-default);
670
+ --snackbar-text-positive: var(--text-status-positive-static);
671
+ --snackbar-text-warning: var(--text-status-warning);
672
+ --snackbar-text-negative: var(--text-status-negative);
673
+
674
+ /* Toggle-switch */
675
+
676
+ --toggle-switch-surface-primary-on: var(--surface-brand-500-static);
677
+ --toggle-switch-surface-primary-off: var(--surface-neutral-200);
678
+ --toggle-switch-surface-primary-disabled: var(--surface-neutral-200);
679
+
680
+ --toggle-switch-surface-secondary-on: var(--surface-neutral-100);
681
+ --toggle-switch-surface-secondary-off: var(--surface-neutral-100);
682
+ --toggle-switch-surface-secondary-disabled: var(--surface-neutral-200);
683
+
684
+ --toggle-switch-text-default: var(--text-body-primary);
685
+ --toggle-switch-text-disabled: var(--text-body-tertiary);
686
+ --toggle-switch-text-negative: var(--text-status-negative);
687
+ --toggle-switch-text-link: var(--text-accent-brand-static);
688
+ }
689
+ :root,
690
+ :host {
691
+ /* Surface / Neutral */
692
+
693
+ --surface-neutral-0: var(--primitive-color-gray-1000);
694
+ --surface-neutral-0-80: var(--primitive-color-gray-900-80);
695
+ --surface-neutral-50: var(--primitive-color-gray-900);
696
+ --surface-neutral-100: var(--primitive-color-gray-800);
697
+ --surface-neutral-200: var(--primitive-color-gray-700);
698
+ --surface-neutral-300: var(--primitive-color-gray-500);
699
+ --surface-neutral-500: var(--primitive-color-gray-300);
700
+ --surface-neutral-700: var(--primitive-color-gray-200);
701
+ --surface-neutral-800: var(--primitive-color-gray-100);
702
+ --surface-neutral-900: var(--primitive-color-gray-0);
703
+ --surface-neutral-900-80: var(--primitive-color-gray-0-80);
704
+ --surface-neutral-900-static: var(--primitive-color-gray-0);
705
+ --surface-neutral-1000: var(--primitive-color-gray-0);
706
+
707
+ /* Surface / Brand */
708
+
709
+ --surface-brand-50: var(--primitive-color-brand-900);
710
+
711
+ /* Surface / Status */
712
+
713
+ --surface-status-negative-50: var(--primitive-color-negative-950);
714
+ --surface-status-negative-600: var(--primitive-color-negative-500);
715
+
716
+ --surface-status-warning-50: var(--primitive-color-warning-950);
717
+ --surface-status-warning-500: var(--primitive-color-warning-400);
718
+
719
+ --surface-status-positive-50: var(--primitive-color-positive-800);
720
+ --surface-status-positive-600-static: var(--primitive-color-positive-600);
721
+
722
+ /* Icon / Neutral */
723
+
724
+ --icon-neutral-0: var(--primitive-color-gray-800);
725
+ --icon-neutral-0-static: var(--primitive-color-gray-800);
726
+ --icon-neutral-50: var(--primitive-color-gray-900);
727
+ --icon-neutral-50-static: var(--primitive-color-gray-900);
728
+ --icon-neutral-300: var(--primitive-color-gray-500);
729
+ --icon-neutral-500: var(--primitive-color-gray-300);
730
+ --icon-neutral-500-static: var(--primitive-color-gray-300);
731
+ --icon-neutral-800: var(--primitive-color-gray-100);
732
+ --icon-neutral-800-static: var(--primitive-color-gray-100);
733
+
734
+ /* Icon / Brand */
735
+
736
+ --icon-brand-500: var(--primitive-color-brand-500);
737
+ --icon-brand-500-static: var(--primitive-color-brand-500);
738
+
739
+ /* Icon / Status */
740
+
741
+ --icon-status-negative: var(--primitive-color-negative-500);
742
+ --icon-status-warning: var(--primitive-color-warning-400);
743
+ --icon-status-positive: var(--primitive-color-positive-600);
744
+ --icon-status-positive-static: var(--primitive-color-positive-600);
745
+
746
+ /* Border / Neutral */
747
+
748
+ --border-neutral-100: var(--primitive-color-gray-700);
749
+ --border-neutral-300: var(--primitive-color-gray-500);
750
+ --border-neutral-500: var(--primitive-color-gray-300);
751
+
752
+ /* Border / Brand */
753
+
754
+ --border-brand-500: var(--primitive-color-brand-500);
755
+ --border-brand-500-static: var(--primitive-color-brand-500);
756
+ --border-brand-600: var(--primitive-color-brand-400);
757
+
758
+ /* Border / Status */
759
+
760
+ --border-status-negative: var(--primitive-color-negative-500);
761
+ --border-status-warning: var(--primitive-color-warning-400);
762
+ --border-status-positive: var(--primitive-color-positive-600);
763
+ --border-status-positive-static: var(--primitive-color-positive-600);
764
+
765
+ /* Text / Body */
766
+
767
+ --text-body-primary: var(--primitive-color-gray-50);
768
+ --text-body-secondary: var(--primitive-color-gray-300);
769
+ --text-body-tertiary: var(--primitive-color-gray-500);
770
+ --text-body-0: var(--primitive-color-gray-1000);
771
+ --text-body-0-static: var(--primitive-color-gray-1000);
772
+
773
+ /* Text / Link */
774
+
775
+ --text-link-default: var(--primitive-color-brand-400);
776
+ --text-link-hover: var(--primitive-color-brand-300);
777
+ --text-link-hover-static: var(--primitive-color-brand-300);
778
+ --text-link-disabled: var(--primitive-color-gray-500);
779
+ --text-link-disabled-static: var(--primitive-color-gray-500);
780
+ --text-link-visited: var(--primitive-color-gray-300);
781
+
782
+ /* Text / Accent */
783
+
784
+ --text-accent-brand: var(--primitive-color-brand-500);
785
+ --text-accent-brand-static: var(--primitive-color-brand-500);
786
+ --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);
787
+ --text-accent-brand-secondary-static: var(
788
+ --primitive-color-brand-secondary-500
789
+ );
790
+
791
+ /* Text / Status */
792
+
793
+ --text-status-negative: var(--primitive-color-negative-500);
794
+ --text-status-warning: var(--primitive-color-warning-400);
795
+ --text-status-positive: var(--primitive-color-positive-600);
796
+ --text-status-positive-static: var(--primitive-color-positive-600);
797
+ }