@sumup-oss/design-tokens 9.1.0-next.2 → 10.0.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 (31) hide show
  1. package/consumer-scoped.css +149 -149
  2. package/consumer.css +298 -298
  3. package/dark-scoped.css +145 -145
  4. package/dark.css +296 -296
  5. package/dist/cjs/themes/consumer.d.ts +146 -146
  6. package/dist/cjs/themes/consumer.js +146 -146
  7. package/dist/cjs/themes/dark.d.ts +145 -145
  8. package/dist/cjs/themes/dark.js +145 -145
  9. package/dist/cjs/themes/fonts.d.ts +52 -0
  10. package/dist/cjs/themes/fonts.js +40 -0
  11. package/dist/cjs/themes/legacy/light.js +1 -1
  12. package/dist/cjs/themes/light.d.ts +40 -40
  13. package/dist/cjs/themes/light.js +40 -40
  14. package/dist/cjs/themes/shared.d.ts +1 -1
  15. package/dist/cjs/themes/shared.js +3 -3
  16. package/dist/es/themes/consumer.d.ts +146 -146
  17. package/dist/es/themes/consumer.js +146 -146
  18. package/dist/es/themes/dark.d.ts +145 -145
  19. package/dist/es/themes/dark.js +145 -145
  20. package/dist/es/themes/fonts.d.ts +52 -0
  21. package/dist/es/themes/fonts.js +40 -0
  22. package/dist/es/themes/legacy/light.js +1 -1
  23. package/dist/es/themes/light.d.ts +40 -40
  24. package/dist/es/themes/light.js +40 -40
  25. package/dist/es/themes/shared.d.ts +1 -1
  26. package/dist/es/themes/shared.js +3 -3
  27. package/dynamic.css +561 -561
  28. package/fonts.css +44 -0
  29. package/light-scoped.css +40 -40
  30. package/light.css +86 -86
  31. package/package.json +9 -6
package/consumer.css CHANGED
@@ -2,165 +2,165 @@
2
2
  --lightningcss-light: ;
3
3
  --lightningcss-dark: initial;
4
4
  color-scheme: dark;
5
- --cui-bg-normal: #190618;
6
- --cui-bg-normal-hovered: #30172c;
7
- --cui-bg-normal-pressed: #45253f;
8
- --cui-bg-normal-disabled: rgba(227, 226, 214, .4);
9
- --cui-bg-subtle: #261525;
10
- --cui-bg-subtle-hovered: #7d5b76;
11
- --cui-bg-subtle-pressed: #ba9eb4;
12
- --cui-bg-subtle-disabled: rgba(202, 182, 198, .4);
13
- --cui-bg-highlight: #4f374a;
14
- --cui-bg-highlight-hovered: #674b61;
15
- --cui-bg-highlight-pressed: #7b5c74;
16
- --cui-bg-highlight-disabled: rgba(124, 93, 118, .2);
5
+ --cui-bg-normal: #250723;
6
+ --cui-bg-normal-hovered: #34152f;
7
+ --cui-bg-normal-pressed: #3f1f39;
8
+ --cui-bg-normal-disabled: rgba(47, 16, 43, .6);
9
+ --cui-bg-subtle: #3a1037;
10
+ --cui-bg-subtle-hovered: #40153c;
11
+ --cui-bg-subtle-pressed: #44193e;
12
+ --cui-bg-subtle-disabled: rgba(58, 16, 55, .6);
13
+ --cui-bg-highlight: #63215e;
14
+ --cui-bg-highlight-hovered: #6b2966;
15
+ --cui-bg-highlight-pressed: #73316e;
16
+ --cui-bg-highlight-disabled: rgba(99, 33, 94, .4);
17
17
  --cui-bg-strong: #fbfbf9;
18
- --cui-bg-strong-hovered: #e3e2d6;
19
- --cui-bg-strong-pressed: #d0cdc3;
20
- --cui-bg-strong-disabled: rgba(227, 226, 214, .4);
21
- --cui-bg-accent: #382233;
22
- --cui-bg-accent-hovered: #775c71;
23
- --cui-bg-accent-pressed: #c09bb8;
24
- --cui-bg-accent-disabled: rgba(193, 184, 175, .4);
25
- --cui-bg-accent-strong: #f0f1e7;
26
- --cui-bg-accent-strong-hovered: #d8d7c7;
27
- --cui-bg-accent-strong-pressed: #c9c8b6;
28
- --cui-bg-accent-strong-disabled: rgba(227, 226, 214, .4);
29
- --cui-bg-neutral: #443e3e;
30
- --cui-bg-neutral-hovered: #756c6c;
31
- --cui-bg-neutral-pressed: #b7b0a9;
32
- --cui-bg-neutral-disabled: rgba(51, 47, 47, .4);
33
- --cui-bg-neutral-strong: #635757;
34
- --cui-bg-neutral-strong-hovered: #605a5a;
35
- --cui-bg-neutral-strong-pressed: #756c6c;
36
- --cui-bg-neutral-strong-disabled: rgba(117, 108, 108, .2);
18
+ --cui-bg-strong-hovered: #eeede8;
19
+ --cui-bg-strong-pressed: #dfddd3;
20
+ --cui-bg-strong-disabled: rgba(251, 251, 249, .2);
21
+ --cui-bg-accent: #3a1037;
22
+ --cui-bg-accent-hovered: #421839;
23
+ --cui-bg-accent-pressed: #4a2041;
24
+ --cui-bg-accent-disabled: rgba(58, 16, 55, .6);
25
+ --cui-bg-accent-strong: #fbfbf9;
26
+ --cui-bg-accent-strong-hovered: #eeede8;
27
+ --cui-bg-accent-strong-pressed: #dfddd3;
28
+ --cui-bg-accent-strong-disabled: rgba(251, 251, 249, .15);
29
+ --cui-bg-neutral: rgba(104, 79, 98, .35);
30
+ --cui-bg-neutral-hovered: #4c4646;
31
+ --cui-bg-neutral-pressed: #544e4e;
32
+ --cui-bg-neutral-disabled: rgba(68, 62, 62, .6);
33
+ --cui-bg-neutral-strong: #684f62;
34
+ --cui-bg-neutral-strong-hovered: #6e6262;
35
+ --cui-bg-neutral-strong-pressed: #796c6c;
36
+ --cui-bg-neutral-strong-disabled: rgba(99, 87, 87, .4);
37
37
  --cui-bg-success: rgba(32, 184, 57, .2);
38
- --cui-bg-success-hovered: rgba(32, 184, 57, .4);
39
- --cui-bg-success-pressed: rgba(32, 184, 57, .6);
40
- --cui-bg-success-disabled: rgba(32, 184, 57, .1);
41
- --cui-bg-success-strong: #20b839;
42
- --cui-bg-success-strong-hovered: #179d2d;
43
- --cui-bg-success-strong-pressed: #118324;
44
- --cui-bg-success-strong-disabled: rgba(32, 184, 57, .1);
45
- --cui-bg-warning: rgba(248, 171, 47, .2);
46
- --cui-bg-warning-hovered: rgba(248, 171, 47, .4);
47
- --cui-bg-warning-pressed: rgba(248, 171, 47, .6);
48
- --cui-bg-warning-disabled: rgba(248, 171, 47, .1);
49
- --cui-bg-warning-strong: #f8ab2f;
50
- --cui-bg-warning-strong-hovered: #e89c21;
51
- --cui-bg-warning-strong-pressed: #d0850c;
52
- --cui-bg-warning-strong-disabled: rgba(248, 171, 47, .1);
53
- --cui-bg-danger: rgba(255, 76, 5, .3);
54
- --cui-bg-danger-hovered: #e76942;
55
- --cui-bg-danger-pressed: #cd5531;
56
- --cui-bg-danger-disabled: rgba(255, 132, 95, .2);
57
- --cui-bg-danger-strong: #ff4c05;
58
- --cui-bg-danger-strong-hovered: #e94201;
59
- --cui-bg-danger-strong-pressed: #d24008;
60
- --cui-bg-danger-strong-disabled: rgba(255, 72, 0, .1);
61
- --cui-bg-promo: #0bcbfb;
62
- --cui-bg-promo-hovered: #0ab1db;
63
- --cui-bg-promo-pressed: #0ab3de;
64
- --cui-bg-promo-disabled: rgba(11, 203, 251, .1);
65
- --cui-bg-promo-strong: #0bcbfb;
66
- --cui-bg-promo-strong-hovered: #0ab1db;
67
- --cui-bg-promo-strong-pressed: #0ab3de;
68
- --cui-bg-promo-strong-disabled: rgba(11, 203, 251, .1);
38
+ --cui-bg-success-hovered: rgba(37, 193, 63, .2);
39
+ --cui-bg-success-pressed: rgba(43, 203, 69, .2);
40
+ --cui-bg-success-disabled: rgba(32, 184, 57, 0);
41
+ --cui-bg-success-strong: #89ec90;
42
+ --cui-bg-success-strong-hovered: #28cc44;
43
+ --cui-bg-success-strong-pressed: #30d84c;
44
+ --cui-bg-success-strong-disabled: rgba(32, 184, 57, .4);
45
+ --cui-bg-warning: rgba(242, 219, 47, .2);
46
+ --cui-bg-warning-hovered: rgba(255, 178, 51, .2);
47
+ --cui-bg-warning-pressed: rgba(255, 186, 55, .2);
48
+ --cui-bg-warning-disabled: rgba(248, 171, 47, 0);
49
+ --cui-bg-warning-strong: #efdf69;
50
+ --cui-bg-warning-strong-hovered: #fabb50;
51
+ --cui-bg-warning-strong-pressed: #fcc96e;
52
+ --cui-bg-warning-strong-disabled: rgba(248, 171, 47, .4);
53
+ --cui-bg-danger: rgba(255, 75, 90, .2);
54
+ --cui-bg-danger-hovered: rgba(255, 81, 8, .3);
55
+ --cui-bg-danger-pressed: rgba(255, 87, 12, .3);
56
+ --cui-bg-danger-disabled: rgba(255, 76, 5, 0);
57
+ --cui-bg-danger-strong: #ff7d88;
58
+ --cui-bg-danger-strong-hovered: #ff6122;
59
+ --cui-bg-danger-strong-pressed: #ff753a;
60
+ --cui-bg-danger-strong-disabled: rgba(255, 76, 5, .4);
61
+ --cui-bg-promo: rgba(255, 97, 242, .18);
62
+ --cui-bg-promo-hovered: #ff65fa;
63
+ --cui-bg-promo-pressed: #ff69ff;
64
+ --cui-bg-promo-disabled: rgba(255, 97, 242, .6);
65
+ --cui-bg-promo-strong: #ffacf8;
66
+ --cui-bg-promo-strong-hovered: #bb54b1;
67
+ --cui-bg-promo-strong-pressed: #c366bb;
68
+ --cui-bg-promo-strong-disabled: rgba(179, 66, 169, .4);
69
69
  --cui-bg-brand: #ff61f2;
70
- --cui-bg-brand-hovered: #ff3def;
70
+ --cui-bg-brand-hovered: #eb58df;
71
71
  --cui-bg-brand-pressed: #da4ece;
72
- --cui-bg-brand-disabled: rgba(255, 97, 242, .1);
73
- --cui-fg-normal: #f0f1e7;
74
- --cui-fg-normal-hovered: #e3e2d6;
75
- --cui-fg-normal-pressed: #332f2f;
76
- --cui-fg-normal-disabled: rgba(227, 226, 214, .4);
77
- --cui-fg-subtle: #c4b0bb;
78
- --cui-fg-subtle-hovered: #78656e;
79
- --cui-fg-subtle-pressed: #b29aae;
80
- --cui-fg-subtle-disabled: rgba(183, 176, 169, .4);
81
- --cui-fg-placeholder: #8c7783;
82
- --cui-fg-placeholder-hovered: #584c53;
83
- --cui-fg-placeholder-pressed: #2f262b;
84
- --cui-fg-placeholder-disabled: rgba(117, 108, 108, .4);
85
- --cui-fg-on-strong: #22001c;
86
- --cui-fg-on-strong-hovered: #30172c;
87
- --cui-fg-on-strong-pressed: #45253f;
88
- --cui-fg-on-strong-disabled: rgba(227, 214, 225, .4);
89
- --cui-fg-on-strong-subtle: rgba(34, 0, 28, .7);
90
- --cui-fg-on-strong-subtle-hovered: rgba(34, 0, 28, .5);
91
- --cui-fg-on-strong-subtle-pressed: rgba(34, 0, 28, .2);
92
- --cui-fg-on-strong-subtle-disabled: rgba(34, 0, 28, .3);
93
- --cui-fg-accent: #b9aead;
94
- --cui-fg-accent-hovered: #968c8b;
95
- --cui-fg-accent-pressed: #756c6c;
96
- --cui-fg-accent-disabled: rgba(185, 174, 173, .2);
97
- --cui-fg-neutral: #9a8d94;
98
- --cui-fg-neutral-hovered: #584e4e;
99
- --cui-fg-neutral-pressed: #332f2f;
100
- --cui-fg-neutral-disabled: rgba(117, 108, 108, .4);
101
- --cui-fg-success: #1fbc3a;
102
- --cui-fg-success-hovered: #18aa30;
103
- --cui-fg-success-pressed: #16982c;
104
- --cui-fg-success-disabled: rgba(31, 188, 58, .2);
105
- --cui-fg-warning: #df9d30;
106
- --cui-fg-warning-hovered: #9d6814;
107
- --cui-fg-warning-pressed: #8e5c0c;
108
- --cui-fg-warning-disabled: rgba(174, 121, 35, .2);
109
- --cui-fg-danger: #ff845f;
110
- --cui-fg-danger-hovered: #ce3c02;
111
- --cui-fg-danger-pressed: #b93502;
112
- --cui-fg-danger-disabled: rgba(230, 65, 0, .2);
113
- --cui-fg-promo: #0bcbfb;
114
- --cui-fg-promo-hovered: #0ab1db;
115
- --cui-fg-promo-pressed: #0ab3de;
116
- --cui-fg-promo-disabled: rgba(11, 203, 251, .2);
72
+ --cui-bg-brand-disabled: rgba(255, 97, 242, .4);
73
+ --cui-fg-normal: #fbfbf9;
74
+ --cui-fg-normal-hovered: #fbfbf9;
75
+ --cui-fg-normal-pressed: #fbfbf9;
76
+ --cui-fg-normal-disabled: rgba(251, 251, 249, .4);
77
+ --cui-fg-subtle: rgba(253, 234, 255, .6);
78
+ --cui-fg-subtle-hovered: rgba(255, 255, 255, .5);
79
+ --cui-fg-subtle-pressed: rgba(255, 255, 255, .5);
80
+ --cui-fg-subtle-disabled: rgba(251, 251, 249, 0);
81
+ --cui-fg-placeholder: rgba(251, 251, 249, .3);
82
+ --cui-fg-placeholder-hovered: rgba(255, 255, 255, .3);
83
+ --cui-fg-placeholder-pressed: rgba(255, 255, 255, .3);
84
+ --cui-fg-placeholder-disabled: rgba(251, 251, 249, 0);
85
+ --cui-fg-on-strong: #1e1c1c;
86
+ --cui-fg-on-strong-hovered: #1e1c1c;
87
+ --cui-fg-on-strong-pressed: #1e1c1c;
88
+ --cui-fg-on-strong-disabled: rgba(30, 28, 28, .6);
89
+ --cui-fg-on-strong-subtle: rgba(30, 28, 28, .7);
90
+ --cui-fg-on-strong-subtle-hovered: #3a3635;
91
+ --cui-fg-on-strong-subtle-pressed: #3a3635;
92
+ --cui-fg-on-strong-subtle-disabled: rgba(58, 54, 53, .4);
93
+ --cui-fg-accent: #fbfbf9;
94
+ --cui-fg-accent-hovered: #d2d0ca;
95
+ --cui-fg-accent-pressed: #b8b6b2;
96
+ --cui-fg-accent-disabled: rgba(251, 251, 249, .4);
97
+ --cui-fg-neutral: #ccbdc6;
98
+ --cui-fg-neutral-hovered: #a89da4;
99
+ --cui-fg-neutral-pressed: #b6abb2;
100
+ --cui-fg-neutral-disabled: rgba(154, 141, 148, .4);
101
+ --cui-fg-success: #37f1a4;
102
+ --cui-fg-success-hovered: #47feb6;
103
+ --cui-fg-success-pressed: #57ffc8;
104
+ --cui-fg-success-disabled: rgba(55, 241, 164, .4);
105
+ --cui-fg-warning: #e8e538;
106
+ --cui-fg-warning-hovered: #f3fe58;
107
+ --cui-fg-warning-pressed: #f5ff76;
108
+ --cui-fg-warning-disabled: rgba(241, 238, 55, .4);
109
+ --cui-fg-danger: #ff5866;
110
+ --cui-fg-danger-hovered: #fd6e72;
111
+ --cui-fg-danger-pressed: #fd8086;
112
+ --cui-fg-danger-disabled: rgba(253, 90, 93, .4);
113
+ --cui-fg-promo: #ff7bf4;
114
+ --cui-fg-promo-hovered: #bb54b2;
115
+ --cui-fg-promo-pressed: #c366ba;
116
+ --cui-fg-promo-disabled: rgba(179, 66, 169, .4);
117
117
  --cui-fg-brand: #ff61f2;
118
118
  --cui-fg-brand-hovered: #eb58df;
119
119
  --cui-fg-brand-pressed: #da4ece;
120
- --cui-fg-brand-disabled: rgba(255, 97, 242, .2);
121
- --cui-border-normal: #70626e;
122
- --cui-border-normal-hovered: #544a53;
123
- --cui-border-normal-pressed: #3b343a;
124
- --cui-border-normal-disabled: rgba(112, 98, 110, .5);
125
- --cui-border-subtle: #40333a;
126
- --cui-border-subtle-hovered: #2e252a;
127
- --cui-border-subtle-pressed: #241d21;
128
- --cui-border-subtle-disabled: rgba(64, 51, 58, .5);
129
- --cui-border-divider: #40333a;
130
- --cui-border-divider-hovered: #2e252a;
131
- --cui-border-divider-pressed: #241d21;
132
- --cui-border-divider-disabled: rgba(64, 51, 58, .5);
120
+ --cui-fg-brand-disabled: rgba(255, 97, 242, .4);
121
+ --cui-border-normal: rgba(251, 251, 249, .3);
122
+ --cui-border-normal-hovered: rgba(255, 255, 255, .3);
123
+ --cui-border-normal-pressed: rgba(255, 255, 255, .3);
124
+ --cui-border-normal-disabled: rgba(251, 251, 249, 0);
125
+ --cui-border-subtle: rgba(251, 251, 249, .15);
126
+ --cui-border-subtle-hovered: rgba(255, 255, 255, .15);
127
+ --cui-border-subtle-pressed: rgba(255, 255, 255, .15);
128
+ --cui-border-subtle-disabled: rgba(251, 251, 249, 0);
129
+ --cui-border-divider: rgba(251, 251, 249, .1);
130
+ --cui-border-divider-hovered: rgba(255, 255, 255, .3);
131
+ --cui-border-divider-pressed: rgba(255, 255, 255, .3);
132
+ --cui-border-divider-disabled: rgba(251, 251, 249, 0);
133
133
  --cui-border-strong: #e3e2d6;
134
- --cui-border-strong-hovered: #d8d7c7;
135
- --cui-border-strong-pressed: #c9c8b6;
136
- --cui-border-strong-disabled: rgba(227, 226, 214, .4);
134
+ --cui-border-strong-hovered: #d3d2c5;
135
+ --cui-border-strong-pressed: #c3c1b4;
136
+ --cui-border-strong-disabled: rgba(227, 226, 214, .2);
137
137
  --cui-border-accent: #d0cdc3;
138
- --cui-border-accent-hovered: #b7b0a9;
139
- --cui-border-accent-pressed: #756c6c;
140
- --cui-border-accent-disabled: rgba(208, 205, 195, .2);
141
- --cui-border-success: #20b839;
142
- --cui-border-success-hovered: #12a129;
143
- --cui-border-success-pressed: #0f9024;
144
- --cui-border-success-disabled: rgba(32, 184, 57, .2);
145
- --cui-border-warning: #f8ab2f;
146
- --cui-border-warning-hovered: #e89c21;
147
- --cui-border-warning-pressed: #d0850c;
148
- --cui-border-warning-disabled: rgba(248, 171, 47, .4);
149
- --cui-border-danger: #ff4800;
150
- --cui-border-danger-hovered: #bd2c19;
151
- --cui-border-danger-pressed: #cc3a00;
152
- --cui-border-danger-disabled: rgba(255, 72, 0, .4);
153
- --cui-border-promo: #0bcbfb;
154
- --cui-border-promo-hovered: #0ab1db;
155
- --cui-border-promo-pressed: #0ab3de;
156
- --cui-border-promo-disabled: rgba(11, 203, 251, .4);
138
+ --cui-border-accent-hovered: #a7a294;
139
+ --cui-border-accent-pressed: #8d887c;
140
+ --cui-border-accent-disabled: rgba(208, 205, 195, .4);
141
+ --cui-border-success: #37f1a4;
142
+ --cui-border-success-hovered: #47feb6;
143
+ --cui-border-success-pressed: #57ffc8;
144
+ --cui-border-success-disabled: rgba(55, 241, 164, .4);
145
+ --cui-border-warning: #f1ee37;
146
+ --cui-border-warning-hovered: #f3fe58;
147
+ --cui-border-warning-pressed: #f5ff76;
148
+ --cui-border-warning-disabled: rgba(241, 238, 55, .4);
149
+ --cui-border-danger: #fd5a5d;
150
+ --cui-border-danger-hovered: #fd6e72;
151
+ --cui-border-danger-pressed: #fd8086;
152
+ --cui-border-danger-disabled: rgba(253, 90, 93, .4);
153
+ --cui-border-promo: #b342a9;
154
+ --cui-border-promo-hovered: #bb54b2;
155
+ --cui-border-promo-pressed: #c366ba;
156
+ --cui-border-promo-disabled: rgba(179, 66, 169, .4);
157
157
  --cui-border-brand: #ff61f2;
158
158
  --cui-border-brand-hovered: #eb58df;
159
159
  --cui-border-brand-pressed: #da4ece;
160
- --cui-border-brand-disabled: rgba(255, 97, 242, .2);
160
+ --cui-border-brand-disabled: rgba(255, 97, 242, .4);
161
161
  --cui-bg-overlay: rgba(35, 31, 35, .7);
162
- --cui-bg-elevated: #473143;
163
- --cui-border-focus: #f0f1e7;
162
+ --cui-bg-elevated: #322430;
163
+ --cui-border-focus: #fbfbf9;
164
164
  --cui-border-radius-bit: 4px;
165
165
  --cui-border-radius-byte: 10px;
166
166
  --cui-border-radius-kilo: 12px;
@@ -172,8 +172,8 @@
172
172
  --cui-border-radius-pill: 999999px;
173
173
  --cui-border-width-kilo: 1px;
174
174
  --cui-border-width-mega: 2px;
175
- --cui-font-stack-default: "SumUp Narrow", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
176
- --cui-font-stack-display: "SumUp Black", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
175
+ --cui-font-stack-default: "SumUp Narrow", "SumUp Narrow fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
176
+ --cui-font-stack-display: "SumUp Black", "SumUp Black fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
177
177
  --cui-font-stack-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
178
178
  --cui-font-weight-regular: 375;
179
179
  --cui-font-weight-semibold: 550;
@@ -215,7 +215,7 @@
215
215
  --cui-body-l-font-size: 1.3125rem;
216
216
  --cui-body-l-line-height: 1.625rem;
217
217
  --cui-body-m-font-size: 1.0625rem;
218
- --cui-body-m-line-height: 1.5rem;
218
+ --cui-body-m-line-height: 1.375rem;
219
219
  --cui-body-s-font-size: .9375rem;
220
220
  --cui-body-s-line-height: 1.25rem;
221
221
  --cui-compact-l-font-size: 1.125rem;
@@ -271,165 +271,165 @@
271
271
  --lightningcss-light: ;
272
272
  --lightningcss-dark: initial;
273
273
  color-scheme: dark;
274
- --cui-bg-normal: #190618;
275
- --cui-bg-normal-hovered: #30172c;
276
- --cui-bg-normal-pressed: #45253f;
277
- --cui-bg-normal-disabled: rgba(227, 226, 214, .4);
278
- --cui-bg-subtle: #261525;
279
- --cui-bg-subtle-hovered: #7d5b76;
280
- --cui-bg-subtle-pressed: #ba9eb4;
281
- --cui-bg-subtle-disabled: rgba(202, 182, 198, .4);
282
- --cui-bg-highlight: #4f374a;
283
- --cui-bg-highlight-hovered: #674b61;
284
- --cui-bg-highlight-pressed: #7b5c74;
285
- --cui-bg-highlight-disabled: rgba(124, 93, 118, .2);
274
+ --cui-bg-normal: #250723;
275
+ --cui-bg-normal-hovered: #34152f;
276
+ --cui-bg-normal-pressed: #3f1f39;
277
+ --cui-bg-normal-disabled: rgba(47, 16, 43, .6);
278
+ --cui-bg-subtle: #3a1037;
279
+ --cui-bg-subtle-hovered: #40153c;
280
+ --cui-bg-subtle-pressed: #44193e;
281
+ --cui-bg-subtle-disabled: rgba(58, 16, 55, .6);
282
+ --cui-bg-highlight: #63215e;
283
+ --cui-bg-highlight-hovered: #6b2966;
284
+ --cui-bg-highlight-pressed: #73316e;
285
+ --cui-bg-highlight-disabled: rgba(99, 33, 94, .4);
286
286
  --cui-bg-strong: #fbfbf9;
287
- --cui-bg-strong-hovered: #e3e2d6;
288
- --cui-bg-strong-pressed: #d0cdc3;
289
- --cui-bg-strong-disabled: rgba(227, 226, 214, .4);
290
- --cui-bg-accent: #382233;
291
- --cui-bg-accent-hovered: #775c71;
292
- --cui-bg-accent-pressed: #c09bb8;
293
- --cui-bg-accent-disabled: rgba(193, 184, 175, .4);
294
- --cui-bg-accent-strong: #f0f1e7;
295
- --cui-bg-accent-strong-hovered: #d8d7c7;
296
- --cui-bg-accent-strong-pressed: #c9c8b6;
297
- --cui-bg-accent-strong-disabled: rgba(227, 226, 214, .4);
298
- --cui-bg-neutral: #443e3e;
299
- --cui-bg-neutral-hovered: #756c6c;
300
- --cui-bg-neutral-pressed: #b7b0a9;
301
- --cui-bg-neutral-disabled: rgba(51, 47, 47, .4);
302
- --cui-bg-neutral-strong: #635757;
303
- --cui-bg-neutral-strong-hovered: #605a5a;
304
- --cui-bg-neutral-strong-pressed: #756c6c;
305
- --cui-bg-neutral-strong-disabled: rgba(117, 108, 108, .2);
287
+ --cui-bg-strong-hovered: #eeede8;
288
+ --cui-bg-strong-pressed: #dfddd3;
289
+ --cui-bg-strong-disabled: rgba(251, 251, 249, .2);
290
+ --cui-bg-accent: #3a1037;
291
+ --cui-bg-accent-hovered: #421839;
292
+ --cui-bg-accent-pressed: #4a2041;
293
+ --cui-bg-accent-disabled: rgba(58, 16, 55, .6);
294
+ --cui-bg-accent-strong: #fbfbf9;
295
+ --cui-bg-accent-strong-hovered: #eeede8;
296
+ --cui-bg-accent-strong-pressed: #dfddd3;
297
+ --cui-bg-accent-strong-disabled: rgba(251, 251, 249, .15);
298
+ --cui-bg-neutral: rgba(104, 79, 98, .35);
299
+ --cui-bg-neutral-hovered: #4c4646;
300
+ --cui-bg-neutral-pressed: #544e4e;
301
+ --cui-bg-neutral-disabled: rgba(68, 62, 62, .6);
302
+ --cui-bg-neutral-strong: #684f62;
303
+ --cui-bg-neutral-strong-hovered: #6e6262;
304
+ --cui-bg-neutral-strong-pressed: #796c6c;
305
+ --cui-bg-neutral-strong-disabled: rgba(99, 87, 87, .4);
306
306
  --cui-bg-success: rgba(32, 184, 57, .2);
307
- --cui-bg-success-hovered: rgba(32, 184, 57, .4);
308
- --cui-bg-success-pressed: rgba(32, 184, 57, .6);
309
- --cui-bg-success-disabled: rgba(32, 184, 57, .1);
310
- --cui-bg-success-strong: #20b839;
311
- --cui-bg-success-strong-hovered: #179d2d;
312
- --cui-bg-success-strong-pressed: #118324;
313
- --cui-bg-success-strong-disabled: rgba(32, 184, 57, .1);
314
- --cui-bg-warning: rgba(248, 171, 47, .2);
315
- --cui-bg-warning-hovered: rgba(248, 171, 47, .4);
316
- --cui-bg-warning-pressed: rgba(248, 171, 47, .6);
317
- --cui-bg-warning-disabled: rgba(248, 171, 47, .1);
318
- --cui-bg-warning-strong: #f8ab2f;
319
- --cui-bg-warning-strong-hovered: #e89c21;
320
- --cui-bg-warning-strong-pressed: #d0850c;
321
- --cui-bg-warning-strong-disabled: rgba(248, 171, 47, .1);
322
- --cui-bg-danger: rgba(255, 76, 5, .3);
323
- --cui-bg-danger-hovered: #e76942;
324
- --cui-bg-danger-pressed: #cd5531;
325
- --cui-bg-danger-disabled: rgba(255, 132, 95, .2);
326
- --cui-bg-danger-strong: #ff4c05;
327
- --cui-bg-danger-strong-hovered: #e94201;
328
- --cui-bg-danger-strong-pressed: #d24008;
329
- --cui-bg-danger-strong-disabled: rgba(255, 72, 0, .1);
330
- --cui-bg-promo: #0bcbfb;
331
- --cui-bg-promo-hovered: #0ab1db;
332
- --cui-bg-promo-pressed: #0ab3de;
333
- --cui-bg-promo-disabled: rgba(11, 203, 251, .1);
334
- --cui-bg-promo-strong: #0bcbfb;
335
- --cui-bg-promo-strong-hovered: #0ab1db;
336
- --cui-bg-promo-strong-pressed: #0ab3de;
337
- --cui-bg-promo-strong-disabled: rgba(11, 203, 251, .1);
307
+ --cui-bg-success-hovered: rgba(37, 193, 63, .2);
308
+ --cui-bg-success-pressed: rgba(43, 203, 69, .2);
309
+ --cui-bg-success-disabled: rgba(32, 184, 57, 0);
310
+ --cui-bg-success-strong: #89ec90;
311
+ --cui-bg-success-strong-hovered: #28cc44;
312
+ --cui-bg-success-strong-pressed: #30d84c;
313
+ --cui-bg-success-strong-disabled: rgba(32, 184, 57, .4);
314
+ --cui-bg-warning: rgba(242, 219, 47, .2);
315
+ --cui-bg-warning-hovered: rgba(255, 178, 51, .2);
316
+ --cui-bg-warning-pressed: rgba(255, 186, 55, .2);
317
+ --cui-bg-warning-disabled: rgba(248, 171, 47, 0);
318
+ --cui-bg-warning-strong: #efdf69;
319
+ --cui-bg-warning-strong-hovered: #fabb50;
320
+ --cui-bg-warning-strong-pressed: #fcc96e;
321
+ --cui-bg-warning-strong-disabled: rgba(248, 171, 47, .4);
322
+ --cui-bg-danger: rgba(255, 75, 90, .2);
323
+ --cui-bg-danger-hovered: rgba(255, 81, 8, .3);
324
+ --cui-bg-danger-pressed: rgba(255, 87, 12, .3);
325
+ --cui-bg-danger-disabled: rgba(255, 76, 5, 0);
326
+ --cui-bg-danger-strong: #ff7d88;
327
+ --cui-bg-danger-strong-hovered: #ff6122;
328
+ --cui-bg-danger-strong-pressed: #ff753a;
329
+ --cui-bg-danger-strong-disabled: rgba(255, 76, 5, .4);
330
+ --cui-bg-promo: rgba(255, 97, 242, .18);
331
+ --cui-bg-promo-hovered: #ff65fa;
332
+ --cui-bg-promo-pressed: #ff69ff;
333
+ --cui-bg-promo-disabled: rgba(255, 97, 242, .6);
334
+ --cui-bg-promo-strong: #ffacf8;
335
+ --cui-bg-promo-strong-hovered: #bb54b1;
336
+ --cui-bg-promo-strong-pressed: #c366bb;
337
+ --cui-bg-promo-strong-disabled: rgba(179, 66, 169, .4);
338
338
  --cui-bg-brand: #ff61f2;
339
- --cui-bg-brand-hovered: #ff3def;
339
+ --cui-bg-brand-hovered: #eb58df;
340
340
  --cui-bg-brand-pressed: #da4ece;
341
- --cui-bg-brand-disabled: rgba(255, 97, 242, .1);
342
- --cui-fg-normal: #f0f1e7;
343
- --cui-fg-normal-hovered: #e3e2d6;
344
- --cui-fg-normal-pressed: #332f2f;
345
- --cui-fg-normal-disabled: rgba(227, 226, 214, .4);
346
- --cui-fg-subtle: #c4b0bb;
347
- --cui-fg-subtle-hovered: #78656e;
348
- --cui-fg-subtle-pressed: #b29aae;
349
- --cui-fg-subtle-disabled: rgba(183, 176, 169, .4);
350
- --cui-fg-placeholder: #8c7783;
351
- --cui-fg-placeholder-hovered: #584c53;
352
- --cui-fg-placeholder-pressed: #2f262b;
353
- --cui-fg-placeholder-disabled: rgba(117, 108, 108, .4);
354
- --cui-fg-on-strong: #22001c;
355
- --cui-fg-on-strong-hovered: #30172c;
356
- --cui-fg-on-strong-pressed: #45253f;
357
- --cui-fg-on-strong-disabled: rgba(227, 214, 225, .4);
358
- --cui-fg-on-strong-subtle: rgba(34, 0, 28, .7);
359
- --cui-fg-on-strong-subtle-hovered: rgba(34, 0, 28, .5);
360
- --cui-fg-on-strong-subtle-pressed: rgba(34, 0, 28, .2);
361
- --cui-fg-on-strong-subtle-disabled: rgba(34, 0, 28, .3);
362
- --cui-fg-accent: #b9aead;
363
- --cui-fg-accent-hovered: #968c8b;
364
- --cui-fg-accent-pressed: #756c6c;
365
- --cui-fg-accent-disabled: rgba(185, 174, 173, .2);
366
- --cui-fg-neutral: #9a8d94;
367
- --cui-fg-neutral-hovered: #584e4e;
368
- --cui-fg-neutral-pressed: #332f2f;
369
- --cui-fg-neutral-disabled: rgba(117, 108, 108, .4);
370
- --cui-fg-success: #1fbc3a;
371
- --cui-fg-success-hovered: #18aa30;
372
- --cui-fg-success-pressed: #16982c;
373
- --cui-fg-success-disabled: rgba(31, 188, 58, .2);
374
- --cui-fg-warning: #df9d30;
375
- --cui-fg-warning-hovered: #9d6814;
376
- --cui-fg-warning-pressed: #8e5c0c;
377
- --cui-fg-warning-disabled: rgba(174, 121, 35, .2);
378
- --cui-fg-danger: #ff845f;
379
- --cui-fg-danger-hovered: #ce3c02;
380
- --cui-fg-danger-pressed: #b93502;
381
- --cui-fg-danger-disabled: rgba(230, 65, 0, .2);
382
- --cui-fg-promo: #0bcbfb;
383
- --cui-fg-promo-hovered: #0ab1db;
384
- --cui-fg-promo-pressed: #0ab3de;
385
- --cui-fg-promo-disabled: rgba(11, 203, 251, .2);
341
+ --cui-bg-brand-disabled: rgba(255, 97, 242, .4);
342
+ --cui-fg-normal: #fbfbf9;
343
+ --cui-fg-normal-hovered: #fbfbf9;
344
+ --cui-fg-normal-pressed: #fbfbf9;
345
+ --cui-fg-normal-disabled: rgba(251, 251, 249, .4);
346
+ --cui-fg-subtle: rgba(253, 234, 255, .6);
347
+ --cui-fg-subtle-hovered: rgba(255, 255, 255, .5);
348
+ --cui-fg-subtle-pressed: rgba(255, 255, 255, .5);
349
+ --cui-fg-subtle-disabled: rgba(251, 251, 249, 0);
350
+ --cui-fg-placeholder: rgba(251, 251, 249, .3);
351
+ --cui-fg-placeholder-hovered: rgba(255, 255, 255, .3);
352
+ --cui-fg-placeholder-pressed: rgba(255, 255, 255, .3);
353
+ --cui-fg-placeholder-disabled: rgba(251, 251, 249, 0);
354
+ --cui-fg-on-strong: #1e1c1c;
355
+ --cui-fg-on-strong-hovered: #1e1c1c;
356
+ --cui-fg-on-strong-pressed: #1e1c1c;
357
+ --cui-fg-on-strong-disabled: rgba(30, 28, 28, .6);
358
+ --cui-fg-on-strong-subtle: rgba(30, 28, 28, .7);
359
+ --cui-fg-on-strong-subtle-hovered: #3a3635;
360
+ --cui-fg-on-strong-subtle-pressed: #3a3635;
361
+ --cui-fg-on-strong-subtle-disabled: rgba(58, 54, 53, .4);
362
+ --cui-fg-accent: #fbfbf9;
363
+ --cui-fg-accent-hovered: #d2d0ca;
364
+ --cui-fg-accent-pressed: #b8b6b2;
365
+ --cui-fg-accent-disabled: rgba(251, 251, 249, .4);
366
+ --cui-fg-neutral: #ccbdc6;
367
+ --cui-fg-neutral-hovered: #a89da4;
368
+ --cui-fg-neutral-pressed: #b6abb2;
369
+ --cui-fg-neutral-disabled: rgba(154, 141, 148, .4);
370
+ --cui-fg-success: #37f1a4;
371
+ --cui-fg-success-hovered: #47feb6;
372
+ --cui-fg-success-pressed: #57ffc8;
373
+ --cui-fg-success-disabled: rgba(55, 241, 164, .4);
374
+ --cui-fg-warning: #e8e538;
375
+ --cui-fg-warning-hovered: #f3fe58;
376
+ --cui-fg-warning-pressed: #f5ff76;
377
+ --cui-fg-warning-disabled: rgba(241, 238, 55, .4);
378
+ --cui-fg-danger: #ff5866;
379
+ --cui-fg-danger-hovered: #fd6e72;
380
+ --cui-fg-danger-pressed: #fd8086;
381
+ --cui-fg-danger-disabled: rgba(253, 90, 93, .4);
382
+ --cui-fg-promo: #ff7bf4;
383
+ --cui-fg-promo-hovered: #bb54b2;
384
+ --cui-fg-promo-pressed: #c366ba;
385
+ --cui-fg-promo-disabled: rgba(179, 66, 169, .4);
386
386
  --cui-fg-brand: #ff61f2;
387
387
  --cui-fg-brand-hovered: #eb58df;
388
388
  --cui-fg-brand-pressed: #da4ece;
389
- --cui-fg-brand-disabled: rgba(255, 97, 242, .2);
390
- --cui-border-normal: #70626e;
391
- --cui-border-normal-hovered: #544a53;
392
- --cui-border-normal-pressed: #3b343a;
393
- --cui-border-normal-disabled: rgba(112, 98, 110, .5);
394
- --cui-border-subtle: #40333a;
395
- --cui-border-subtle-hovered: #2e252a;
396
- --cui-border-subtle-pressed: #241d21;
397
- --cui-border-subtle-disabled: rgba(64, 51, 58, .5);
398
- --cui-border-divider: #40333a;
399
- --cui-border-divider-hovered: #2e252a;
400
- --cui-border-divider-pressed: #241d21;
401
- --cui-border-divider-disabled: rgba(64, 51, 58, .5);
389
+ --cui-fg-brand-disabled: rgba(255, 97, 242, .4);
390
+ --cui-border-normal: rgba(251, 251, 249, .3);
391
+ --cui-border-normal-hovered: rgba(255, 255, 255, .3);
392
+ --cui-border-normal-pressed: rgba(255, 255, 255, .3);
393
+ --cui-border-normal-disabled: rgba(251, 251, 249, 0);
394
+ --cui-border-subtle: rgba(251, 251, 249, .15);
395
+ --cui-border-subtle-hovered: rgba(255, 255, 255, .15);
396
+ --cui-border-subtle-pressed: rgba(255, 255, 255, .15);
397
+ --cui-border-subtle-disabled: rgba(251, 251, 249, 0);
398
+ --cui-border-divider: rgba(251, 251, 249, .1);
399
+ --cui-border-divider-hovered: rgba(255, 255, 255, .3);
400
+ --cui-border-divider-pressed: rgba(255, 255, 255, .3);
401
+ --cui-border-divider-disabled: rgba(251, 251, 249, 0);
402
402
  --cui-border-strong: #e3e2d6;
403
- --cui-border-strong-hovered: #d8d7c7;
404
- --cui-border-strong-pressed: #c9c8b6;
405
- --cui-border-strong-disabled: rgba(227, 226, 214, .4);
403
+ --cui-border-strong-hovered: #d3d2c5;
404
+ --cui-border-strong-pressed: #c3c1b4;
405
+ --cui-border-strong-disabled: rgba(227, 226, 214, .2);
406
406
  --cui-border-accent: #d0cdc3;
407
- --cui-border-accent-hovered: #b7b0a9;
408
- --cui-border-accent-pressed: #756c6c;
409
- --cui-border-accent-disabled: rgba(208, 205, 195, .2);
410
- --cui-border-success: #20b839;
411
- --cui-border-success-hovered: #12a129;
412
- --cui-border-success-pressed: #0f9024;
413
- --cui-border-success-disabled: rgba(32, 184, 57, .2);
414
- --cui-border-warning: #f8ab2f;
415
- --cui-border-warning-hovered: #e89c21;
416
- --cui-border-warning-pressed: #d0850c;
417
- --cui-border-warning-disabled: rgba(248, 171, 47, .4);
418
- --cui-border-danger: #ff4800;
419
- --cui-border-danger-hovered: #bd2c19;
420
- --cui-border-danger-pressed: #cc3a00;
421
- --cui-border-danger-disabled: rgba(255, 72, 0, .4);
422
- --cui-border-promo: #0bcbfb;
423
- --cui-border-promo-hovered: #0ab1db;
424
- --cui-border-promo-pressed: #0ab3de;
425
- --cui-border-promo-disabled: rgba(11, 203, 251, .4);
407
+ --cui-border-accent-hovered: #a7a294;
408
+ --cui-border-accent-pressed: #8d887c;
409
+ --cui-border-accent-disabled: rgba(208, 205, 195, .4);
410
+ --cui-border-success: #37f1a4;
411
+ --cui-border-success-hovered: #47feb6;
412
+ --cui-border-success-pressed: #57ffc8;
413
+ --cui-border-success-disabled: rgba(55, 241, 164, .4);
414
+ --cui-border-warning: #f1ee37;
415
+ --cui-border-warning-hovered: #f3fe58;
416
+ --cui-border-warning-pressed: #f5ff76;
417
+ --cui-border-warning-disabled: rgba(241, 238, 55, .4);
418
+ --cui-border-danger: #fd5a5d;
419
+ --cui-border-danger-hovered: #fd6e72;
420
+ --cui-border-danger-pressed: #fd8086;
421
+ --cui-border-danger-disabled: rgba(253, 90, 93, .4);
422
+ --cui-border-promo: #b342a9;
423
+ --cui-border-promo-hovered: #bb54b2;
424
+ --cui-border-promo-pressed: #c366ba;
425
+ --cui-border-promo-disabled: rgba(179, 66, 169, .4);
426
426
  --cui-border-brand: #ff61f2;
427
427
  --cui-border-brand-hovered: #eb58df;
428
428
  --cui-border-brand-pressed: #da4ece;
429
- --cui-border-brand-disabled: rgba(255, 97, 242, .2);
429
+ --cui-border-brand-disabled: rgba(255, 97, 242, .4);
430
430
  --cui-bg-overlay: rgba(35, 31, 35, .7);
431
- --cui-bg-elevated: #473143;
432
- --cui-border-focus: #f0f1e7;
431
+ --cui-bg-elevated: #322430;
432
+ --cui-border-focus: #fbfbf9;
433
433
  --cui-border-radius-bit: 4px;
434
434
  --cui-border-radius-byte: 10px;
435
435
  --cui-border-radius-kilo: 12px;
@@ -441,8 +441,8 @@
441
441
  --cui-border-radius-pill: 999999px;
442
442
  --cui-border-width-kilo: 1px;
443
443
  --cui-border-width-mega: 2px;
444
- --cui-font-stack-default: "SumUp Narrow", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
445
- --cui-font-stack-display: "SumUp Black", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
444
+ --cui-font-stack-default: "SumUp Narrow", "SumUp Narrow fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
445
+ --cui-font-stack-display: "SumUp Black", "SumUp Black fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
446
446
  --cui-font-stack-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
447
447
  --cui-font-weight-regular: 375;
448
448
  --cui-font-weight-semibold: 550;
@@ -484,7 +484,7 @@
484
484
  --cui-body-l-font-size: 1.3125rem;
485
485
  --cui-body-l-line-height: 1.625rem;
486
486
  --cui-body-m-font-size: 1.0625rem;
487
- --cui-body-m-line-height: 1.5rem;
487
+ --cui-body-m-line-height: 1.375rem;
488
488
  --cui-body-s-font-size: .9375rem;
489
489
  --cui-body-s-line-height: 1.25rem;
490
490
  --cui-compact-l-font-size: 1.125rem;