@sumup-oss/design-tokens 9.0.0 → 9.1.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.
package/dark-scoped.css CHANGED
@@ -2,139 +2,139 @@
2
2
  --lightningcss-light: ;
3
3
  --lightningcss-dark: initial;
4
4
  color-scheme: dark;
5
- --cui-bg-normal: #171d24;
6
- --cui-bg-normal-hovered: #212831;
7
- --cui-bg-normal-pressed: #28313c;
8
- --cui-bg-normal-disabled: rgba(216, 232, 248, .08);
9
- --cui-bg-subtle: #0c0f12;
10
- --cui-bg-subtle-hovered: #212b31;
11
- --cui-bg-subtle-pressed: #36434a;
12
- --cui-bg-subtle-disabled: rgba(216, 232, 248, .08);
13
- --cui-bg-highlight: #363c41;
14
- --cui-bg-highlight-hovered: #3d4249;
15
- --cui-bg-highlight-pressed: #424950;
16
- --cui-bg-highlight-disabled: rgba(216, 232, 248, .08);
17
- --cui-bg-strong: #fff;
18
- --cui-bg-strong-hovered: #f6f8f9;
19
- --cui-bg-strong-pressed: #e3e7eb;
20
- --cui-bg-strong-disabled: rgba(216, 232, 248, .08);
21
- --cui-bg-accent: #0c0f12;
22
- --cui-bg-accent-hovered: #20292e;
23
- --cui-bg-accent-pressed: #313d43;
24
- --cui-bg-accent-disabled: rgba(216, 232, 248, .08);
25
- --cui-bg-accent-strong: #e1e7ef;
26
- --cui-bg-accent-strong-hovered: #fff;
27
- --cui-bg-accent-strong-pressed: #fff;
28
- --cui-bg-accent-strong-disabled: rgba(216, 232, 248, .08);
29
- --cui-bg-success: rgba(12, 211, 104, .2);
30
- --cui-bg-success-hovered: rgba(12, 211, 104, .25);
31
- --cui-bg-success-pressed: rgba(12, 211, 104, .3);
32
- --cui-bg-success-disabled: rgba(216, 232, 248, .08);
33
- --cui-bg-success-strong: #0cd368;
34
- --cui-bg-success-strong-hovered: #13e072;
35
- --cui-bg-success-strong-pressed: #25e980;
36
- --cui-bg-success-strong-disabled: rgba(216, 232, 248, .08);
37
- --cui-bg-warning: rgba(245, 158, 28, .2);
38
- --cui-bg-warning-hovered: rgba(245, 158, 28, .25);
39
- --cui-bg-warning-pressed: rgba(245, 158, 28, .3);
40
- --cui-bg-warning-disabled: rgba(216, 232, 248, .08);
41
- --cui-bg-warning-strong: #f5b81c;
42
- --cui-bg-warning-strong-hovered: #f7c440;
43
- --cui-bg-warning-strong-pressed: #f7cb59;
44
- --cui-bg-warning-strong-disabled: rgba(216, 232, 248, .08);
45
- --cui-bg-danger: rgba(255, 76, 53, .2);
46
- --cui-bg-danger-hovered: rgba(255, 76, 53, .2);
47
- --cui-bg-danger-pressed: rgba(255, 76, 53, .4);
48
- --cui-bg-danger-disabled: rgba(255, 69, 60, .13);
49
- --cui-bg-danger-strong: #ff4e37;
50
- --cui-bg-danger-strong-hovered: #ff6259;
51
- --cui-bg-danger-strong-pressed: #ff827b;
52
- --cui-bg-danger-strong-disabled: rgba(216, 232, 248, .08);
53
- --cui-bg-promo: rgba(195, 83, 247, .2);
54
- --cui-bg-promo-hovered: rgba(195, 83, 247, .25);
55
- --cui-bg-promo-pressed: rgba(195, 83, 247, .3);
56
- --cui-bg-promo-disabled: rgba(216, 232, 248, .08);
57
- --cui-bg-promo-strong: #c353f7;
58
- --cui-bg-promo-strong-hovered: #c768f3;
59
- --cui-bg-promo-strong-pressed: #ce72f8;
60
- --cui-bg-promo-strong-disabled: rgba(216, 232, 248, .08);
61
- --cui-fg-normal: #fff;
62
- --cui-fg-normal-hovered: rgba(255, 255, 255, .8);
63
- --cui-fg-normal-pressed: #e3e7eb;
64
- --cui-fg-normal-disabled: rgba(230, 224, 233, .2);
65
- --cui-fg-subtle: rgba(223, 232, 241, .6);
66
- --cui-fg-subtle-hovered: rgba(223, 232, 241, .7);
67
- --cui-fg-subtle-pressed: rgba(223, 232, 241, .8);
68
- --cui-fg-subtle-disabled: rgba(216, 232, 248, .2);
69
- --cui-fg-placeholder: #555d62;
70
- --cui-fg-placeholder-hovered: #687278;
71
- --cui-fg-placeholder-pressed: #7c878d;
72
- --cui-fg-placeholder-disabled: rgba(85, 93, 98, .5);
73
- --cui-fg-on-strong: #0f131a;
74
- --cui-fg-on-strong-hovered: #0f131a;
75
- --cui-fg-on-strong-pressed: #0f131a;
76
- --cui-fg-on-strong-disabled: rgba(216, 232, 248, .3);
77
- --cui-fg-on-strong-subtle: rgba(15, 19, 26, .7);
78
- --cui-fg-on-strong-subtle-hovered: rgba(15, 19, 26, .7);
79
- --cui-fg-on-strong-subtle-pressed: rgba(15, 19, 26, .7);
80
- --cui-fg-on-strong-subtle-disabled: rgba(216, 232, 248, .2);
81
- --cui-fg-accent: #e1e7ef;
82
- --cui-fg-accent-hovered: #fff;
83
- --cui-fg-accent-pressed: #fff;
84
- --cui-fg-accent-disabled: rgba(216, 232, 248, .3);
85
- --cui-fg-success: #17db72;
86
- --cui-fg-success-hovered: #13e072;
87
- --cui-fg-success-pressed: #25e980;
88
- --cui-fg-success-disabled: rgba(216, 232, 248, .3);
89
- --cui-fg-warning: #f5b81c;
90
- --cui-fg-warning-hovered: #f7c440;
91
- --cui-fg-warning-pressed: #f7cb59;
92
- --cui-fg-warning-disabled: rgba(216, 232, 248, .3);
93
- --cui-fg-danger: #ff634e;
94
- --cui-fg-danger-hovered: #ff5c47;
95
- --cui-fg-danger-pressed: #ff6a57;
96
- --cui-fg-danger-disabled: rgba(255, 178, 167, .7);
97
- --cui-fg-promo: #cf7bf6;
98
- --cui-fg-promo-hovered: #c768f3;
99
- --cui-fg-promo-pressed: #ce72f8;
100
- --cui-fg-promo-disabled: rgba(216, 232, 248, .3);
101
- --cui-border-normal: rgba(223, 232, 241, .3);
102
- --cui-border-normal-hovered: rgba(223, 232, 241, .35);
103
- --cui-border-normal-pressed: rgba(223, 232, 241, .45);
104
- --cui-border-normal-disabled: rgba(216, 232, 248, .3);
105
- --cui-border-subtle: rgba(223, 232, 241, .15);
106
- --cui-border-subtle-hovered: rgba(223, 232, 241, .2);
107
- --cui-border-subtle-pressed: rgba(223, 232, 241, .3);
108
- --cui-border-subtle-disabled: rgba(216, 232, 248, .1);
109
- --cui-border-divider: rgba(216, 232, 248, .3);
110
- --cui-border-divider-hovered: rgba(223, 232, 241, .35);
111
- --cui-border-divider-pressed: rgba(223, 232, 241, .45);
112
- --cui-border-divider-disabled: rgba(216, 232, 248, .15);
113
- --cui-border-strong: #fff;
114
- --cui-border-strong-hovered: #f6f8f9;
115
- --cui-border-strong-pressed: #e3e7eb;
116
- --cui-border-strong-disabled: rgba(216, 232, 248, .15);
117
- --cui-border-accent: #fff;
118
- --cui-border-accent-hovered: #f6f8f9;
119
- --cui-border-accent-pressed: #e3e7eb;
120
- --cui-border-accent-disabled: rgba(216, 232, 248, .15);
121
- --cui-border-success: #0cd368;
122
- --cui-border-success-hovered: #13e072;
123
- --cui-border-success-pressed: #25e980;
124
- --cui-border-success-disabled: rgba(216, 232, 248, .15);
125
- --cui-border-warning: #f5b81c;
126
- --cui-border-warning-hovered: #f7c440;
127
- --cui-border-warning-pressed: #f7cb59;
128
- --cui-border-warning-disabled: rgba(216, 232, 248, .15);
129
- --cui-border-danger: #ff634e;
130
- --cui-border-danger-hovered: #ff5c47;
131
- --cui-border-danger-pressed: #ff6a57;
132
- --cui-border-danger-disabled: rgba(255, 178, 167, .7);
133
- --cui-border-promo: #c353f7;
134
- --cui-border-promo-hovered: #c768f3;
135
- --cui-border-promo-pressed: #ce72f8;
136
- --cui-border-promo-disabled: rgba(216, 232, 248, .15);
137
- --cui-bg-overlay: rgba(0, 0, 0, .7);
138
- --cui-bg-elevated: #2f3438;
139
- --cui-border-focus: #fff;
5
+ --cui-bg-normal: #1e1c1c;
6
+ --cui-bg-normal-hovered: #332f2f;
7
+ --cui-bg-normal-pressed: #4a4444;
8
+ --cui-bg-normal-disabled: rgba(227, 226, 214, .4);
9
+ --cui-bg-subtle: #332f2f;
10
+ --cui-bg-subtle-hovered: #756c6c;
11
+ --cui-bg-subtle-pressed: #b7b0a9;
12
+ --cui-bg-subtle-disabled: rgba(183, 176, 169, .4);
13
+ --cui-bg-highlight: #443e3e;
14
+ --cui-bg-highlight-hovered: #605a5a;
15
+ --cui-bg-highlight-pressed: #756c6c;
16
+ --cui-bg-highlight-disabled: rgba(117, 108, 108, .2);
17
+ --cui-bg-strong: #f0f1e7;
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: #332f2f;
22
+ --cui-bg-accent-hovered: #756c6c;
23
+ --cui-bg-accent-pressed: #b7b0a9;
24
+ --cui-bg-accent-disabled: rgba(183, 176, 169, .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-success: rgba(32, 184, 57, .2);
30
+ --cui-bg-success-hovered: rgba(32, 184, 57, .4);
31
+ --cui-bg-success-pressed: rgba(32, 184, 57, .6);
32
+ --cui-bg-success-disabled: rgba(32, 184, 57, .1);
33
+ --cui-bg-success-strong: #20b839;
34
+ --cui-bg-success-strong-hovered: #179d2d;
35
+ --cui-bg-success-strong-pressed: #118324;
36
+ --cui-bg-success-strong-disabled: rgba(32, 184, 57, .1);
37
+ --cui-bg-warning: rgba(248, 171, 47, .2);
38
+ --cui-bg-warning-hovered: rgba(248, 171, 47, .4);
39
+ --cui-bg-warning-pressed: rgba(248, 171, 47, .6);
40
+ --cui-bg-warning-disabled: rgba(248, 171, 47, .1);
41
+ --cui-bg-warning-strong: #f8ab2f;
42
+ --cui-bg-warning-strong-hovered: #e89c21;
43
+ --cui-bg-warning-strong-pressed: #d0850c;
44
+ --cui-bg-warning-strong-disabled: rgba(248, 171, 47, .1);
45
+ --cui-bg-danger: rgba(255, 76, 5, .3);
46
+ --cui-bg-danger-hovered: #e76942;
47
+ --cui-bg-danger-pressed: #cd5531;
48
+ --cui-bg-danger-disabled: rgba(255, 132, 95, .2);
49
+ --cui-bg-danger-strong: #ff4c05;
50
+ --cui-bg-danger-strong-hovered: #e94201;
51
+ --cui-bg-danger-strong-pressed: #d24008;
52
+ --cui-bg-danger-strong-disabled: rgba(255, 72, 0, .1);
53
+ --cui-bg-promo: #ff61f2;
54
+ --cui-bg-promo-hovered: #ec58e0;
55
+ --cui-bg-promo-pressed: #e04fd4;
56
+ --cui-bg-promo-disabled: rgba(255, 97, 242, .1);
57
+ --cui-bg-promo-strong: #ed54e0;
58
+ --cui-bg-promo-strong-hovered: #df49d2;
59
+ --cui-bg-promo-strong-pressed: #c934bd;
60
+ --cui-bg-promo-strong-disabled: rgba(237, 84, 224, .1);
61
+ --cui-fg-normal: #f0f1e7;
62
+ --cui-fg-normal-hovered: #e3e2d6;
63
+ --cui-fg-normal-pressed: #d0cdc3;
64
+ --cui-fg-normal-disabled: rgba(227, 226, 214, .4);
65
+ --cui-fg-subtle: #b7b0a9;
66
+ --cui-fg-subtle-hovered: #756c6c;
67
+ --cui-fg-subtle-pressed: #b7b0a9;
68
+ --cui-fg-subtle-disabled: rgba(183, 176, 169, .4);
69
+ --cui-fg-placeholder: #8c8282;
70
+ --cui-fg-placeholder-hovered: #584e4e;
71
+ --cui-fg-placeholder-pressed: #332f2f;
72
+ --cui-fg-placeholder-disabled: rgba(117, 108, 108, .4);
73
+ --cui-fg-on-strong: #1e1c1c;
74
+ --cui-fg-on-strong-hovered: #fff;
75
+ --cui-fg-on-strong-pressed: #fff;
76
+ --cui-fg-on-strong-disabled: rgba(255, 255, 255, .4);
77
+ --cui-fg-on-strong-subtle: rgba(30, 28, 28, .7);
78
+ --cui-fg-on-strong-subtle-hovered: rgba(255, 255, 255, .7);
79
+ --cui-fg-on-strong-subtle-pressed: rgba(255, 255, 255, .7);
80
+ --cui-fg-on-strong-subtle-disabled: rgba(255, 255, 255, .3);
81
+ --cui-fg-accent: #b9aead;
82
+ --cui-fg-accent-hovered: #968c8b;
83
+ --cui-fg-accent-pressed: #756c6c;
84
+ --cui-fg-accent-disabled: rgba(185, 174, 173, .2);
85
+ --cui-fg-success: #1fbc3a;
86
+ --cui-fg-success-hovered: #18aa30;
87
+ --cui-fg-success-pressed: #16982c;
88
+ --cui-fg-success-disabled: rgba(31, 188, 58, .2);
89
+ --cui-fg-warning: #df9d30;
90
+ --cui-fg-warning-hovered: #9d6814;
91
+ --cui-fg-warning-pressed: #8e5c0c;
92
+ --cui-fg-warning-disabled: rgba(174, 121, 35, .2);
93
+ --cui-fg-danger: #ff845f;
94
+ --cui-fg-danger-hovered: #ce3c02;
95
+ --cui-fg-danger-pressed: #b93502;
96
+ --cui-fg-danger-disabled: rgba(230, 65, 0, .1);
97
+ --cui-fg-promo: #ff61f2;
98
+ --cui-fg-promo-hovered: #ec58e0;
99
+ --cui-fg-promo-pressed: #e04fd4;
100
+ --cui-fg-promo-disabled: rgba(255, 97, 242, .2);
101
+ --cui-border-normal: #756c6c;
102
+ --cui-border-normal-hovered: #d0cdc3;
103
+ --cui-border-normal-pressed: #b7b0a9;
104
+ --cui-border-normal-disabled: rgba(227, 226, 214, .3);
105
+ --cui-border-subtle: #b7b0a9;
106
+ --cui-border-subtle-hovered: #e3e2d6;
107
+ --cui-border-subtle-pressed: #d0cdc3;
108
+ --cui-border-subtle-disabled: rgba(240, 241, 231, .5);
109
+ --cui-border-divider: #514a4a;
110
+ --cui-border-divider-hovered: #e3e2d6;
111
+ --cui-border-divider-pressed: #d0cdc3;
112
+ --cui-border-divider-disabled: rgba(240, 241, 231, .5);
113
+ --cui-border-strong: #e3e2d6;
114
+ --cui-border-strong-hovered: #d8d7c7;
115
+ --cui-border-strong-pressed: #c9c8b6;
116
+ --cui-border-strong-disabled: rgba(227, 226, 214, .4);
117
+ --cui-border-accent: #d0cdc3;
118
+ --cui-border-accent-hovered: #b7b0a9;
119
+ --cui-border-accent-pressed: #756c6c;
120
+ --cui-border-accent-disabled: rgba(208, 205, 195, .2);
121
+ --cui-border-success: #20b839;
122
+ --cui-border-success-hovered: #12a129;
123
+ --cui-border-success-pressed: #0f9024;
124
+ --cui-border-success-disabled: rgba(32, 184, 57, .2);
125
+ --cui-border-warning: #f8ab2f;
126
+ --cui-border-warning-hovered: #e89c21;
127
+ --cui-border-warning-pressed: #d0850c;
128
+ --cui-border-warning-disabled: rgba(248, 171, 47, .4);
129
+ --cui-border-danger: #ff4800;
130
+ --cui-border-danger-hovered: #bd2c19;
131
+ --cui-border-danger-pressed: #cc3a00;
132
+ --cui-border-danger-disabled: rgba(255, 72, 0, .4);
133
+ --cui-border-promo: #ff61f2;
134
+ --cui-border-promo-hovered: #ec58e0;
135
+ --cui-border-promo-pressed: #e04fd4;
136
+ --cui-border-promo-disabled: rgba(237, 84, 224, .4);
137
+ --cui-bg-overlay: rgba(30, 28, 28, .6);
138
+ --cui-bg-elevated: #1e1c1c;
139
+ --cui-border-focus: #f0f1e7;
140
140
  }