@sumup-oss/design-tokens 8.0.0-next.0

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 (44) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +115 -0
  3. package/dark-scoped.css +140 -0
  4. package/dark.css +201 -0
  5. package/dist/cjs/index.d.ts +27 -0
  6. package/dist/cjs/index.js +55 -0
  7. package/dist/cjs/scripts/build.d.ts +36 -0
  8. package/dist/cjs/scripts/build.js +182 -0
  9. package/dist/cjs/themes/dark.d.ts +555 -0
  10. package/dist/cjs/themes/dark.js +694 -0
  11. package/dist/cjs/themes/legacy/light.d.ts +85 -0
  12. package/dist/cjs/themes/legacy/light.js +196 -0
  13. package/dist/cjs/themes/light.d.ts +555 -0
  14. package/dist/cjs/themes/light.js +694 -0
  15. package/dist/cjs/themes/schema.d.ts +603 -0
  16. package/dist/cjs/themes/schema.js +243 -0
  17. package/dist/cjs/themes/shared.d.ts +259 -0
  18. package/dist/cjs/themes/shared.js +333 -0
  19. package/dist/cjs/types/index.d.ts +175 -0
  20. package/dist/cjs/types/index.js +16 -0
  21. package/dist/cjs/utils/theme-prop-type.d.ts +36 -0
  22. package/dist/cjs/utils/theme-prop-type.js +162 -0
  23. package/dist/es/index.d.ts +27 -0
  24. package/dist/es/index.js +27 -0
  25. package/dist/es/scripts/build.d.ts +36 -0
  26. package/dist/es/scripts/build.js +174 -0
  27. package/dist/es/themes/dark.d.ts +555 -0
  28. package/dist/es/themes/dark.js +691 -0
  29. package/dist/es/themes/legacy/light.d.ts +85 -0
  30. package/dist/es/themes/legacy/light.js +193 -0
  31. package/dist/es/themes/light.d.ts +555 -0
  32. package/dist/es/themes/light.js +691 -0
  33. package/dist/es/themes/schema.d.ts +603 -0
  34. package/dist/es/themes/schema.js +240 -0
  35. package/dist/es/themes/shared.d.ts +259 -0
  36. package/dist/es/themes/shared.js +330 -0
  37. package/dist/es/types/index.d.ts +175 -0
  38. package/dist/es/types/index.js +15 -0
  39. package/dist/es/utils/theme-prop-type.d.ts +36 -0
  40. package/dist/es/utils/theme-prop-type.js +156 -0
  41. package/dynamic.css +626 -0
  42. package/light-scoped.css +140 -0
  43. package/light.css +201 -0
  44. package/package.json +44 -0
@@ -0,0 +1,694 @@
1
+ "use strict";
2
+ /**
3
+ * Copyright 2023, SumUp Ltd.
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.light = void 0;
18
+ exports.light = [
19
+ {
20
+ name: '--cui-bg-normal',
21
+ value: '#ffffff',
22
+ type: 'color',
23
+ },
24
+ {
25
+ name: '--cui-bg-normal-hovered',
26
+ value: '#e9edf2',
27
+ type: 'color',
28
+ },
29
+ {
30
+ name: '--cui-bg-normal-pressed',
31
+ value: '#bfc6cf',
32
+ type: 'color',
33
+ },
34
+ {
35
+ name: '--cui-bg-normal-disabled',
36
+ value: 'rgba(255, 255, 255, 0.4000)',
37
+ type: 'color',
38
+ },
39
+ {
40
+ name: '--cui-bg-subtle',
41
+ value: '#f0f1f5',
42
+ type: 'color',
43
+ },
44
+ {
45
+ name: '--cui-bg-subtle-hovered',
46
+ value: '#e0e2ea',
47
+ type: 'color',
48
+ },
49
+ {
50
+ name: '--cui-bg-subtle-pressed',
51
+ value: '#9da7b1',
52
+ type: 'color',
53
+ },
54
+ {
55
+ name: '--cui-bg-subtle-disabled',
56
+ value: 'rgba(227, 231, 235, 0.4000)',
57
+ type: 'color',
58
+ },
59
+ {
60
+ name: '--cui-bg-highlight',
61
+ value: '#e3e7eb',
62
+ type: 'color',
63
+ },
64
+ {
65
+ name: '--cui-bg-highlight-hovered',
66
+ value: '#c2c9d1',
67
+ type: 'color',
68
+ },
69
+ {
70
+ name: '--cui-bg-highlight-pressed',
71
+ value: '#9da7b1',
72
+ type: 'color',
73
+ },
74
+ {
75
+ name: '--cui-bg-highlight-disabled',
76
+ value: 'rgba(15, 19, 26, 0.0800)',
77
+ type: 'color',
78
+ },
79
+ {
80
+ name: '--cui-bg-strong',
81
+ value: '#000000',
82
+ type: 'color',
83
+ },
84
+ {
85
+ name: '--cui-bg-strong-hovered',
86
+ value: '#313941',
87
+ type: 'color',
88
+ },
89
+ {
90
+ name: '--cui-bg-strong-pressed',
91
+ value: '#4f5a65',
92
+ type: 'color',
93
+ },
94
+ {
95
+ name: '--cui-bg-strong-disabled',
96
+ value: 'rgba(23, 29, 36, 0.4000)',
97
+ type: 'color',
98
+ },
99
+ {
100
+ name: '--cui-bg-accent',
101
+ value: '#eef0f2',
102
+ type: 'color',
103
+ },
104
+ {
105
+ name: '--cui-bg-accent-hovered',
106
+ value: '#e3e7eb',
107
+ type: 'color',
108
+ },
109
+ {
110
+ name: '--cui-bg-accent-pressed',
111
+ value: '#c2c9d1',
112
+ type: 'color',
113
+ },
114
+ {
115
+ name: '--cui-bg-accent-disabled',
116
+ value: 'rgba(238, 240, 242, 0.4000)',
117
+ type: 'color',
118
+ },
119
+ {
120
+ name: '--cui-bg-accent-strong',
121
+ value: '#0f131a',
122
+ type: 'color',
123
+ },
124
+ {
125
+ name: '--cui-bg-accent-strong-hovered',
126
+ value: '#3b3f46',
127
+ type: 'color',
128
+ },
129
+ {
130
+ name: '--cui-bg-accent-strong-pressed',
131
+ value: '#6a737c',
132
+ type: 'color',
133
+ },
134
+ {
135
+ name: '--cui-bg-accent-strong-disabled',
136
+ value: 'rgba(15, 19, 26, 0.4000)',
137
+ type: 'color',
138
+ },
139
+ {
140
+ name: '--cui-bg-success',
141
+ value: '#e9fbe9',
142
+ type: 'color',
143
+ },
144
+ {
145
+ name: '--cui-bg-success-hovered',
146
+ value: '#d7f8d7',
147
+ type: 'color',
148
+ },
149
+ {
150
+ name: '--cui-bg-success-pressed',
151
+ value: '#c1e8c1',
152
+ type: 'color',
153
+ },
154
+ {
155
+ name: '--cui-bg-success-disabled',
156
+ value: 'rgba(233, 251, 233, 0.4000)',
157
+ type: 'color',
158
+ },
159
+ {
160
+ name: '--cui-bg-success-strong',
161
+ value: '#018850',
162
+ type: 'color',
163
+ },
164
+ {
165
+ name: '--cui-bg-success-strong-hovered',
166
+ value: '#007a4e',
167
+ type: 'color',
168
+ },
169
+ {
170
+ name: '--cui-bg-success-strong-pressed',
171
+ value: '#016c26',
172
+ type: 'color',
173
+ },
174
+ {
175
+ name: '--cui-bg-success-strong-disabled',
176
+ value: 'rgba(1, 136, 80, 0.4000)',
177
+ type: 'color',
178
+ },
179
+ {
180
+ name: '--cui-bg-warning',
181
+ value: '#fdf4db',
182
+ type: 'color',
183
+ },
184
+ {
185
+ name: '--cui-bg-warning-hovered',
186
+ value: '#faeec6',
187
+ type: 'color',
188
+ },
189
+ {
190
+ name: '--cui-bg-warning-pressed',
191
+ value: '#f5dea3',
192
+ type: 'color',
193
+ },
194
+ {
195
+ name: '--cui-bg-warning-disabled',
196
+ value: 'rgba(253, 244, 219, 0.4000)',
197
+ type: 'color',
198
+ },
199
+ {
200
+ name: '--cui-bg-warning-strong',
201
+ value: '#e87c00',
202
+ type: 'color',
203
+ },
204
+ {
205
+ name: '--cui-bg-warning-strong-hovered',
206
+ value: '#cc6d00',
207
+ type: 'color',
208
+ },
209
+ {
210
+ name: '--cui-bg-warning-strong-pressed',
211
+ value: '#b25c00',
212
+ type: 'color',
213
+ },
214
+ {
215
+ name: '--cui-bg-warning-strong-disabled',
216
+ value: 'rgba(232, 124, 0, 0.4000)',
217
+ type: 'color',
218
+ },
219
+ {
220
+ name: '--cui-bg-danger',
221
+ value: '#fbe9e7',
222
+ type: 'color',
223
+ },
224
+ {
225
+ name: '--cui-bg-danger-hovered',
226
+ value: '#fcddd9',
227
+ type: 'color',
228
+ },
229
+ {
230
+ name: '--cui-bg-danger-pressed',
231
+ value: '#f2bbb5',
232
+ type: 'color',
233
+ },
234
+ {
235
+ name: '--cui-bg-danger-disabled',
236
+ value: 'rgba(251, 233, 231, 0.6400)',
237
+ type: 'color',
238
+ },
239
+ {
240
+ name: '--cui-bg-danger-strong',
241
+ value: '#de331d',
242
+ type: 'color',
243
+ },
244
+ {
245
+ name: '--cui-bg-danger-strong-hovered',
246
+ value: '#bd2c19',
247
+ type: 'color',
248
+ },
249
+ {
250
+ name: '--cui-bg-danger-strong-pressed',
251
+ value: '#9e2415',
252
+ type: 'color',
253
+ },
254
+ {
255
+ name: '--cui-bg-danger-strong-disabled',
256
+ value: 'rgba(222, 51, 29, 0.4000)',
257
+ type: 'color',
258
+ },
259
+ {
260
+ name: '--cui-bg-promo',
261
+ value: '#f5edfe',
262
+ type: 'color',
263
+ },
264
+ {
265
+ name: '--cui-bg-promo-hovered',
266
+ value: '#ede0fc',
267
+ type: 'color',
268
+ },
269
+ {
270
+ name: '--cui-bg-promo-pressed',
271
+ value: '#e0c9f8',
272
+ type: 'color',
273
+ },
274
+ {
275
+ name: '--cui-bg-promo-disabled',
276
+ value: 'rgba(245, 237, 254, 0.4000)',
277
+ type: 'color',
278
+ },
279
+ {
280
+ name: '--cui-bg-promo-strong',
281
+ value: '#9e33e0',
282
+ type: 'color',
283
+ },
284
+ {
285
+ name: '--cui-bg-promo-strong-hovered',
286
+ value: '#8a1ecc',
287
+ type: 'color',
288
+ },
289
+ {
290
+ name: '--cui-bg-promo-strong-pressed',
291
+ value: '#7219a9',
292
+ type: 'color',
293
+ },
294
+ {
295
+ name: '--cui-bg-promo-strong-disabled',
296
+ value: 'rgba(158, 51, 224, 0.4000)',
297
+ type: 'color',
298
+ },
299
+ {
300
+ name: '--cui-fg-normal',
301
+ value: '#0f131a',
302
+ type: 'color',
303
+ },
304
+ {
305
+ name: '--cui-fg-normal-hovered',
306
+ value: '#0f131a',
307
+ type: 'color',
308
+ },
309
+ {
310
+ name: '--cui-fg-normal-pressed',
311
+ value: '#0f131a',
312
+ type: 'color',
313
+ },
314
+ {
315
+ name: '--cui-fg-normal-disabled',
316
+ value: 'rgba(15, 19, 26, 0.4000)',
317
+ type: 'color',
318
+ },
319
+ {
320
+ name: '--cui-fg-subtle',
321
+ value: '#6a737c',
322
+ type: 'color',
323
+ },
324
+ {
325
+ name: '--cui-fg-subtle-hovered',
326
+ value: '#6a737c',
327
+ type: 'color',
328
+ },
329
+ {
330
+ name: '--cui-fg-subtle-pressed',
331
+ value: '#6a737c',
332
+ type: 'color',
333
+ },
334
+ {
335
+ name: '--cui-fg-subtle-disabled',
336
+ value: 'rgba(106, 115, 124, 0.4000)',
337
+ type: 'color',
338
+ },
339
+ {
340
+ name: '--cui-fg-placeholder',
341
+ value: '#9da7b1',
342
+ type: 'color',
343
+ },
344
+ {
345
+ name: '--cui-fg-placeholder-hovered',
346
+ value: '#9da7b1',
347
+ type: 'color',
348
+ },
349
+ {
350
+ name: '--cui-fg-placeholder-pressed',
351
+ value: '#9da7b1',
352
+ type: 'color',
353
+ },
354
+ {
355
+ name: '--cui-fg-placeholder-disabled',
356
+ value: 'rgba(157, 167, 177, 0.4000)',
357
+ type: 'color',
358
+ },
359
+ {
360
+ name: '--cui-fg-on-strong',
361
+ value: '#ffffff',
362
+ type: 'color',
363
+ },
364
+ {
365
+ name: '--cui-fg-on-strong-hovered',
366
+ value: '#ffffff',
367
+ type: 'color',
368
+ },
369
+ {
370
+ name: '--cui-fg-on-strong-pressed',
371
+ value: '#ffffff',
372
+ type: 'color',
373
+ },
374
+ {
375
+ name: '--cui-fg-on-strong-disabled',
376
+ value: 'rgba(255, 255, 255, 0.4000)',
377
+ type: 'color',
378
+ },
379
+ {
380
+ name: '--cui-fg-on-strong-subtle',
381
+ value: 'rgba(255, 255, 255, 0.7000)',
382
+ type: 'color',
383
+ },
384
+ {
385
+ name: '--cui-fg-on-strong-subtle-hovered',
386
+ value: 'rgba(255, 255, 255, 0.7000)',
387
+ type: 'color',
388
+ },
389
+ {
390
+ name: '--cui-fg-on-strong-subtle-pressed',
391
+ value: 'rgba(255, 255, 255, 0.7000)',
392
+ type: 'color',
393
+ },
394
+ {
395
+ name: '--cui-fg-on-strong-subtle-disabled',
396
+ value: 'rgba(255, 255, 255, 0.3000)',
397
+ type: 'color',
398
+ },
399
+ {
400
+ name: '--cui-fg-accent',
401
+ value: '#0f131a',
402
+ type: 'color',
403
+ },
404
+ {
405
+ name: '--cui-fg-accent-hovered',
406
+ value: '#52565d',
407
+ type: 'color',
408
+ },
409
+ {
410
+ name: '--cui-fg-accent-pressed',
411
+ value: '#676e7a',
412
+ type: 'color',
413
+ },
414
+ {
415
+ name: '--cui-fg-accent-disabled',
416
+ value: 'rgba(15, 19, 26, 0.4000)',
417
+ type: 'color',
418
+ },
419
+ {
420
+ name: '--cui-fg-success',
421
+ value: '#018850',
422
+ type: 'color',
423
+ },
424
+ {
425
+ name: '--cui-fg-success-hovered',
426
+ value: '#007a4e',
427
+ type: 'color',
428
+ },
429
+ {
430
+ name: '--cui-fg-success-pressed',
431
+ value: '#016c26',
432
+ type: 'color',
433
+ },
434
+ {
435
+ name: '--cui-fg-success-disabled',
436
+ value: 'rgba(1, 136, 80, 0.4000)',
437
+ type: 'color',
438
+ },
439
+ {
440
+ name: '--cui-fg-warning',
441
+ value: '#e27900',
442
+ type: 'color',
443
+ },
444
+ {
445
+ name: '--cui-fg-warning-hovered',
446
+ value: '#cc6d00',
447
+ type: 'color',
448
+ },
449
+ {
450
+ name: '--cui-fg-warning-pressed',
451
+ value: '#b25c00',
452
+ type: 'color',
453
+ },
454
+ {
455
+ name: '--cui-fg-warning-disabled',
456
+ value: 'rgba(226, 121, 0, 0.4000)',
457
+ type: 'color',
458
+ },
459
+ {
460
+ name: '--cui-fg-danger',
461
+ value: '#de331d',
462
+ type: 'color',
463
+ },
464
+ {
465
+ name: '--cui-fg-danger-hovered',
466
+ value: '#bd2c19',
467
+ type: 'color',
468
+ },
469
+ {
470
+ name: '--cui-fg-danger-pressed',
471
+ value: '#9e2415',
472
+ type: 'color',
473
+ },
474
+ {
475
+ name: '--cui-fg-danger-disabled',
476
+ value: 'rgba(222, 51, 29, 0.6400)',
477
+ type: 'color',
478
+ },
479
+ {
480
+ name: '--cui-fg-promo',
481
+ value: '#9e33e0',
482
+ type: 'color',
483
+ },
484
+ {
485
+ name: '--cui-fg-promo-hovered',
486
+ value: '#8a1ecc',
487
+ type: 'color',
488
+ },
489
+ {
490
+ name: '--cui-fg-promo-pressed',
491
+ value: '#7219a9',
492
+ type: 'color',
493
+ },
494
+ {
495
+ name: '--cui-fg-promo-disabled',
496
+ value: 'rgba(158, 51, 224, 0.4000)',
497
+ type: 'color',
498
+ },
499
+ {
500
+ name: '--cui-border-normal',
501
+ value: '#aeb6be',
502
+ type: 'color',
503
+ },
504
+ {
505
+ name: '--cui-border-normal-hovered',
506
+ value: '#85919e',
507
+ type: 'color',
508
+ },
509
+ {
510
+ name: '--cui-border-normal-pressed',
511
+ value: '#687686',
512
+ type: 'color',
513
+ },
514
+ {
515
+ name: '--cui-border-normal-disabled',
516
+ value: 'rgba(194, 201, 209, 0.4000)',
517
+ type: 'color',
518
+ },
519
+ {
520
+ name: '--cui-border-subtle',
521
+ value: '#e3e7ec',
522
+ type: 'color',
523
+ },
524
+ {
525
+ name: '--cui-border-subtle-hovered',
526
+ value: '#c2c9d1',
527
+ type: 'color',
528
+ },
529
+ {
530
+ name: '--cui-border-subtle-pressed',
531
+ value: '#9da7b1',
532
+ type: 'color',
533
+ },
534
+ {
535
+ name: '--cui-border-subtle-disabled',
536
+ value: 'rgba(230, 230, 230, 0.4000)',
537
+ type: 'color',
538
+ },
539
+ {
540
+ name: '--cui-border-divider',
541
+ value: '#e3e7eb',
542
+ type: 'color',
543
+ },
544
+ {
545
+ name: '--cui-border-divider-hovered',
546
+ value: '#9da7b1',
547
+ type: 'color',
548
+ },
549
+ {
550
+ name: '--cui-border-divider-pressed',
551
+ value: '#6a737c',
552
+ type: 'color',
553
+ },
554
+ {
555
+ name: '--cui-border-divider-disabled',
556
+ value: 'rgba(194, 201, 209, 0.4000)',
557
+ type: 'color',
558
+ },
559
+ {
560
+ name: '--cui-border-strong',
561
+ value: '#0f131a',
562
+ type: 'color',
563
+ },
564
+ {
565
+ name: '--cui-border-strong-hovered',
566
+ value: '#494a4a',
567
+ type: 'color',
568
+ },
569
+ {
570
+ name: '--cui-border-strong-pressed',
571
+ value: '#696969',
572
+ type: 'color',
573
+ },
574
+ {
575
+ name: '--cui-border-strong-disabled',
576
+ value: 'rgba(15, 19, 26, 0.4000)',
577
+ type: 'color',
578
+ },
579
+ {
580
+ name: '--cui-border-accent',
581
+ value: '#0f131a',
582
+ type: 'color',
583
+ },
584
+ {
585
+ name: '--cui-border-accent-hovered',
586
+ value: '#52565d',
587
+ type: 'color',
588
+ },
589
+ {
590
+ name: '--cui-border-accent-pressed',
591
+ value: '#676e7a',
592
+ type: 'color',
593
+ },
594
+ {
595
+ name: '--cui-border-accent-disabled',
596
+ value: 'rgba(15, 19, 26, 0.4000)',
597
+ type: 'color',
598
+ },
599
+ {
600
+ name: '--cui-border-success',
601
+ value: '#018850',
602
+ type: 'color',
603
+ },
604
+ {
605
+ name: '--cui-border-success-hovered',
606
+ value: '#007a4e',
607
+ type: 'color',
608
+ },
609
+ {
610
+ name: '--cui-border-success-pressed',
611
+ value: '#016c26',
612
+ type: 'color',
613
+ },
614
+ {
615
+ name: '--cui-border-success-disabled',
616
+ value: 'rgba(1, 136, 80, 0.4000)',
617
+ type: 'color',
618
+ },
619
+ {
620
+ name: '--cui-border-warning',
621
+ value: '#e87c00',
622
+ type: 'color',
623
+ },
624
+ {
625
+ name: '--cui-border-warning-hovered',
626
+ value: '#cc6d00',
627
+ type: 'color',
628
+ },
629
+ {
630
+ name: '--cui-border-warning-pressed',
631
+ value: '#b25c00',
632
+ type: 'color',
633
+ },
634
+ {
635
+ name: '--cui-border-warning-disabled',
636
+ value: 'rgba(226, 121, 0, 0.4000)',
637
+ type: 'color',
638
+ },
639
+ {
640
+ name: '--cui-border-danger',
641
+ value: '#de331d',
642
+ type: 'color',
643
+ },
644
+ {
645
+ name: '--cui-border-danger-hovered',
646
+ value: '#bd2c19',
647
+ type: 'color',
648
+ },
649
+ {
650
+ name: '--cui-border-danger-pressed',
651
+ value: '#9e2415',
652
+ type: 'color',
653
+ },
654
+ {
655
+ name: '--cui-border-danger-disabled',
656
+ value: 'rgba(222, 51, 29, 0.4000)',
657
+ type: 'color',
658
+ },
659
+ {
660
+ name: '--cui-border-promo',
661
+ value: '#9e33e0',
662
+ type: 'color',
663
+ },
664
+ {
665
+ name: '--cui-border-promo-hovered',
666
+ value: '#8a1ecc',
667
+ type: 'color',
668
+ },
669
+ {
670
+ name: '--cui-border-promo-pressed',
671
+ value: '#7219a9',
672
+ type: 'color',
673
+ },
674
+ {
675
+ name: '--cui-border-promo-disabled',
676
+ value: 'rgba(158, 51, 224, 0.4000)',
677
+ type: 'color',
678
+ },
679
+ {
680
+ name: '--cui-bg-overlay',
681
+ value: 'rgba(0, 0, 0, 0.4000)',
682
+ type: 'color',
683
+ },
684
+ {
685
+ name: '--cui-bg-elevated',
686
+ value: '#ffffff',
687
+ type: 'color',
688
+ },
689
+ {
690
+ name: '--cui-border-focus',
691
+ value: '#0f131a',
692
+ type: 'color',
693
+ },
694
+ ];