@depersgroep/lfvp-design-tokens 0.26.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 (7) hide show
  1. package/LICENSE +661 -0
  2. package/README.md +6 -0
  3. package/css/streamz/_tokens.scss +360 -0
  4. package/css/streamz/tokens.css +360 -0
  5. package/css/vtmgo/_tokens.scss +358 -0
  6. package/css/vtmgo/tokens.css +358 -0
  7. package/package.json +48 -0
package/css/streamz/_tokens.scss ADDED
@@ -0,0 +1,360 @@
1
+ :root{
2
+ --base-primary-font:Gilroy;
3
+ --core-color-alpha-95:rgba(118,115,140,0.05);
4
+ --core-color-alpha-90:rgba(118,115,140,0.10);
5
+ --core-color-alpha-80:rgba(118,115,140,0.20);
6
+ --core-color-alpha-70:rgba(118,115,140,0.30);
7
+ --core-color-alpha-60:rgba(118,115,140,0.40);
8
+ --core-color-alpha-50:rgba(118,115,140,0.50);
9
+ --core-color-alpha-40:rgba(118,115,140,0.60);
10
+ --core-color-alpha-30:rgba(118,115,140,0.70);
11
+ --core-color-alpha-20:rgba(118,115,140,0.80);
12
+ --core-color-alpha-15:rgba(118,115,140,0.85);
13
+ --core-color-alpha-10:rgba(118,115,140,0.9);
14
+ --core-color-alpha-5:rgba(118,115,140,0.95);
15
+ --core-color-alpha-0:#76738c;
16
+ --core-color-gradient-extra-1:linear-gradient(180deg, #171431, #ff0a5a);
17
+ --core-color-gradient-brand:linear-gradient(90deg, #f20d3a, #ff0a5a 50.52%, #cc0243);
18
+ --core-color-neutrals-100:#ffffff;
19
+ --core-color-neutrals-95:#f1f1f4;
20
+ --core-color-neutrals-90:#e4e3e8;
21
+ --core-color-neutrals-80:#c8c7d1;
22
+ --core-color-neutrals-70:#adabba;
23
+ --core-color-neutrals-60:#918fa3;
24
+ --core-color-neutrals-50:#76738c;
25
+ --core-color-neutrals-40:#5a5775;
26
+ --core-color-neutrals-30:#413d5c;
27
+ --core-color-neutrals-20:#292640;
28
+ --core-color-neutrals-15:#1c1b32;
29
+ --core-color-neutrals-10:#120f24;
30
+ --core-color-neutrals-5:#09071b;
31
+ --core-color-neutrals-0:#020012;
32
+ --core-color-streamz-pink-95:#ffe5ee;
33
+ --core-color-streamz-pink-90:#ffccdd;
34
+ --core-color-streamz-pink-80:#ff99ba;
35
+ --core-color-streamz-pink-70:#ff6698;
36
+ --core-color-streamz-pink-60:#ff3376;
37
+ --core-color-streamz-pink-50:#ff0a5c;
38
+ --core-color-streamz-pink-40:#cc0043;
39
+ --core-color-streamz-pink-30:#990032;
40
+ --core-color-streamz-pink-20:#660021;
41
+ --core-color-streamz-pink-15:#4d0019;
42
+ --core-color-streamz-pink-10:#330011;
43
+ --core-color-streamz-pink-5:#1a0008;
44
+ --core-color-streamz-pink-0:#050002;
45
+ --core-sizing-88:88px;
46
+ --core-sizing-80:80px;
47
+ --core-sizing-72:72px;
48
+ --core-sizing-64:64px;
49
+ --core-sizing-56:56px;
50
+ --core-sizing-48:48px;
51
+ --core-sizing-40:40px;
52
+ --core-sizing-32:32px;
53
+ --core-sizing-24:24px;
54
+ --core-sizing-16:16px;
55
+ --core-box-shadow-text:0 1px 1px rgba(0,0,0,0.2);
56
+ --core-box-shadow-3:0 1px 3px rgba(0,0,0,0.4);
57
+ --core-box-shadow-2:0 2px 2px rgba(0,0,0,0.3);
58
+ --core-box-shadow-1:0 1px 1px rgba(0,0,0,0.2);
59
+ --core-border-radius-full:9999px;
60
+ --core-border-radius-40:40px;
61
+ --core-border-radius-32:32px;
62
+ --core-border-radius-24:24px;
63
+ --core-border-radius-16:16px;
64
+ --core-border-radius-8:8px;
65
+ --core-border-radius-4:4px;
66
+ --core-border-radius-2:2px;
67
+ --core-border-radius-1:1px;
68
+ --core-border-width-3:3px;
69
+ --core-border-width-2:2px;
70
+ --core-border-width-1:1px;
71
+ --core-line-height-150:1.5;
72
+ --core-line-height-140:1.4;
73
+ --core-line-height-130:1.3;
74
+ --core-line-height-120:1.2;
75
+ --core-line-height-110:1.1;
76
+ --core-line-height-100:1;
77
+ --core-font-size-80:80px;
78
+ --core-font-size-72:72px;
79
+ --core-font-size-64:64px;
80
+ --core-font-size-60:60px;
81
+ --core-font-size-56:56px;
82
+ --core-font-size-52:52px;
83
+ --core-font-size-48:48px;
84
+ --core-font-size-44:44px;
85
+ --core-font-size-40:40px;
86
+ --core-font-size-36:36px;
87
+ --core-font-size-32:32px;
88
+ --core-font-size-28:28px;
89
+ --core-font-size-24:24px;
90
+ --core-font-size-22:22px;
91
+ --core-font-size-20:20px;
92
+ --core-font-size-18:18px;
93
+ --core-font-size-16:16px;
94
+ --core-font-size-14:14px;
95
+ --core-font-size-12:12px;
96
+ --core-font-size-10:10px;
97
+ --core-font-weight-extra-bold:800;
98
+ --core-font-weight-semi-bold:600;
99
+ --core-font-weight-regular:400;
100
+ --core-spacing-80:80px;
101
+ --core-spacing-72:72px;
102
+ --core-spacing-64:64px;
103
+ --core-spacing-56:56px;
104
+ --core-spacing-48:48px;
105
+ --core-spacing-40:40px;
106
+ --core-spacing-32:32px;
107
+ --core-spacing-24:24px;
108
+ --core-spacing-20:20px;
109
+ --core-spacing-16:16px;
110
+ --core-spacing-12:12px;
111
+ --core-spacing-8:8px;
112
+ --core-spacing-4:4px;
113
+ --base-typography-text-bold-text-x-large:var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
114
+ --base-typography-text-bold-text-large:var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
115
+ --base-typography-text-bold-text-medium:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
116
+ --base-typography-text-bold-text-small:var(--base-font-weight-bold-text) var(--core-font-size-14)/var(--core-line-height-140) var(--base-primary-font);
117
+ --base-typography-text-bold-text-x-small:var(--base-font-weight-bold-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
118
+ --base-typography-text-semi-bold-text-x-large:var(--base-font-weight-semi-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
119
+ --base-typography-text-semi-bold-text-large:var(--base-font-weight-semi-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
120
+ --base-typography-text-semi-bold-text-medium:var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
121
+ --base-typography-text-semi-bold-text-small:var(--base-font-weight-semi-bold-text) var(--core-font-size-14)/var(--core-line-height-140) var(--base-primary-font);
122
+ --base-typography-text-semi-bold-text-x-small:var(--base-font-weight-semi-bold-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
123
+ --base-typography-text-regular-text-x-large:var(--base-font-weight-regular-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
124
+ --base-typography-text-regular-text-large:var(--base-font-weight-regular-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
125
+ --base-typography-text-regular-text-medium:var(--base-font-weight-regular-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
126
+ --base-typography-text-regular-text-small:var(--base-font-weight-regular-text) var(--core-font-size-14)/var(--core-line-height-140) var(--base-primary-font);
127
+ --base-typography-text-regular-text-x-small:var(--base-font-weight-regular-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
128
+ --base-typography-title-level6:var(--base-font-weight-title) var(--core-font-size-14)/var(--core-line-height-120) var(--base-primary-font);
129
+ --base-typography-title-level5:var(--base-font-weight-title) var(--core-font-size-16)/var(--core-line-height-120) var(--base-primary-font);
130
+ --base-typography-title-level4:var(--base-font-weight-title) var(--core-font-size-18)/var(--core-line-height-120) var(--base-primary-font);
131
+ --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
132
+ --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
133
+ --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
134
+ --base-border-selectable-active:var(--core-border-width-3) solid var(--core-color-neutrals-80);
135
+ --base-border-selectable-focus:var(--core-border-width-3) solid var(--core-color-neutrals-80);
136
+ --base-border-selectable-hover:var(--core-border-width-2) solid rgba(0,0,0,0.08);
137
+ --base-border-selectable-normal:var(--core-border-width-2) solid rgba(0,0,0,0.08);
138
+ --base-font-size-text-x-large:var(--core-font-size-20);
139
+ --base-font-size-text-large:var(--core-font-size-18);
140
+ --base-font-size-text-medium:var(--core-font-size-16);
141
+ --base-font-size-text-small:var(--core-font-size-14);
142
+ --base-font-size-text-x-small:var(--core-font-size-12);
143
+ --base-font-size-selectable-x-large:var(--core-font-size-28);
144
+ --base-font-size-selectable-large:var(--core-font-size-18);
145
+ --base-font-size-selectable-medium:var(--core-font-size-16);
146
+ --base-font-size-selectable-small:var(--core-font-size-14);
147
+ --base-font-weight-bold-text:var(--core-font-weight-extra-bold);
148
+ --base-font-weight-semi-bold-text:var(--core-font-weight-semi-bold);
149
+ --base-font-weight-regular-text:var(--core-font-weight-regular);
150
+ --base-font-weight-title:var(--core-font-weight-extra-bold);
151
+ --base-font-weight-selectable:var(--core-font-weight-semi-bold);
152
+ --base-sizing-selectable-x-large:var(--core-sizing-72);
153
+ --base-sizing-selectable-large:var(--core-sizing-56);
154
+ --base-sizing-selectable-medium:var(--core-sizing-48);
155
+ --base-sizing-selectable-small:var(--core-sizing-32);
156
+ --base-box-shadow-selectable-label:var(--core-box-shadow-1);
157
+ --base-box-shadow-selectable-background:var(--core-box-shadow-3);
158
+ --base-border-radius-selectable-xlarge:var(--core-border-radius-16);
159
+ --base-border-radius-selectable-large:var(--core-border-radius-8);
160
+ --base-border-radius-selectable-medium:var(--core-border-radius-8);
161
+ --base-border-radius-selectable-small:var(--core-border-radius-8);
162
+ --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
163
+ --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
164
+ --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
165
+ --base-color-selectable-secondary-default:var(--core-color-alpha-80);
166
+ --base-color-selectable-primary-default:var(--core-color-gradient-brand);
167
+ --base-color-brand-foreground:var(--core-color-neutrals-100);
168
+ --base-color-brand-darkest:var(--core-color-streamz-pink-30);
169
+ --base-color-brand-darker:var(--core-color-streamz-pink-40);
170
+ --base-color-brand-default:var(--core-color-streamz-pink-50);
171
+ --base-color-brand-lighter:var(--core-color-streamz-pink-70);
172
+ --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
173
+ --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
174
+ --base-color-selectable-primary-darker:var(--base-color-brand-darker);
175
+ }
176
+
177
+ @media screen and (min-width:768px){
178
+ :root{
179
+ --base-typography-text-bold-text-x-large:var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
180
+ --base-typography-text-bold-text-large:var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
181
+ --base-typography-text-bold-text-medium:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
182
+ --base-typography-text-bold-text-small:var(--base-font-weight-bold-text) var(--core-font-size-14)/var(--core-line-height-140) var(--base-primary-font);
183
+ --base-typography-text-bold-text-x-small:var(--base-font-weight-bold-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
184
+ --base-typography-text-semi-bold-text-x-large:var(--base-font-weight-semi-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
185
+ --base-typography-text-semi-bold-text-large:var(--base-font-weight-semi-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
186
+ --base-typography-text-semi-bold-text-medium:var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
187
+ --base-typography-text-semi-bold-text-small:var(--base-font-weight-semi-bold-text) var(--core-font-size-14)/var(--core-line-height-140) var(--base-primary-font);
188
+ --base-typography-text-semi-bold-text-x-small:var(--base-font-weight-semi-bold-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
189
+ --base-typography-text-regular-text-x-large:var(--base-font-weight-regular-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
190
+ --base-typography-text-regular-text-large:var(--base-font-weight-regular-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
191
+ --base-typography-text-regular-text-medium:var(--base-font-weight-regular-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
192
+ --base-typography-text-regular-text-small:var(--base-font-weight-regular-text) var(--core-font-size-14)/var(--core-line-height-140) var(--base-primary-font);
193
+ --base-typography-text-regular-text-x-small:var(--base-font-weight-regular-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
194
+ --base-typography-title-level6:var(--base-font-weight-title) var(--core-font-size-16)/var(--core-line-height-120) var(--base-primary-font);
195
+ --base-typography-title-level5:var(--base-font-weight-title) var(--core-font-size-18)/var(--core-line-height-120) var(--base-primary-font);
196
+ --base-typography-title-level4:var(--base-font-weight-title) var(--core-font-size-20)/var(--core-line-height-120) var(--base-primary-font);
197
+ --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
198
+ --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
199
+ --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-40)/var(--core-line-height-120) var(--base-primary-font);
200
+ --base-border-selectable-active:var(--core-border-width-3) solid var(--core-color-neutrals-80);
201
+ --base-border-selectable-focus:var(--core-border-width-3) solid var(--core-color-neutrals-80);
202
+ --base-border-selectable-hover:var(--core-border-width-2) solid rgba(0,0,0,0.08);
203
+ --base-border-selectable-normal:var(--core-border-width-2) solid rgba(0,0,0,0.08);
204
+ --base-font-size-text-x-large:var(--core-font-size-20);
205
+ --base-font-size-text-large:var(--core-font-size-18);
206
+ --base-font-size-text-medium:var(--core-font-size-16);
207
+ --base-font-size-text-small:var(--core-font-size-14);
208
+ --base-font-size-text-x-small:var(--core-font-size-12);
209
+ --base-font-size-selectable-x-large:var(--core-font-size-28);
210
+ --base-font-size-selectable-large:var(--core-font-size-18);
211
+ --base-font-size-selectable-medium:var(--core-font-size-16);
212
+ --base-font-size-selectable-small:var(--core-font-size-14);
213
+ --base-font-weight-bold-text:var(--core-font-weight-extra-bold);
214
+ --base-font-weight-semi-bold-text:var(--core-font-weight-semi-bold);
215
+ --base-font-weight-regular-text:var(--core-font-weight-regular);
216
+ --base-font-weight-title:var(--core-font-weight-extra-bold);
217
+ --base-font-weight-selectable:var(--core-font-weight-semi-bold);
218
+ --base-sizing-selectable-x-large:var(--core-sizing-72);
219
+ --base-sizing-selectable-large:var(--core-sizing-56);
220
+ --base-sizing-selectable-medium:var(--core-sizing-48);
221
+ --base-sizing-selectable-small:var(--core-sizing-32);
222
+ --base-box-shadow-selectable-label:var(--core-box-shadow-1);
223
+ --base-box-shadow-selectable-background:var(--core-box-shadow-3);
224
+ --base-border-radius-selectable-xlarge:var(--core-border-radius-16);
225
+ --base-border-radius-selectable-large:var(--core-border-radius-8);
226
+ --base-border-radius-selectable-medium:var(--core-border-radius-8);
227
+ --base-border-radius-selectable-small:var(--core-border-radius-8);
228
+ --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
229
+ --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
230
+ --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
231
+ --base-color-selectable-secondary-default:var(--core-color-alpha-80);
232
+ --base-color-selectable-primary-default:var(--core-color-gradient-brand);
233
+ --base-color-brand-foreground:var(--core-color-neutrals-100);
234
+ --base-color-brand-darkest:var(--core-color-streamz-pink-30);
235
+ --base-color-brand-darker:var(--core-color-streamz-pink-40);
236
+ --base-color-brand-default:var(--core-color-streamz-pink-50);
237
+ --base-color-brand-lighter:var(--core-color-streamz-pink-70);
238
+ --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
239
+ --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
240
+ --base-color-selectable-primary-darker:var(--base-color-brand-darker);
241
+ }
242
+ }
243
+ @media screen and (min-width:1024px){
244
+ :root{
245
+ --base-typography-text-bold-text-x-large:var(--base-font-weight-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
246
+ --base-typography-text-bold-text-large:var(--base-font-weight-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
247
+ --base-typography-text-bold-text-medium:var(--base-font-weight-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
248
+ --base-typography-text-bold-text-small:var(--base-font-weight-bold-text) var(--core-font-size-14)/var(--core-line-height-140) var(--base-primary-font);
249
+ --base-typography-text-bold-text-x-small:var(--base-font-weight-bold-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
250
+ --base-typography-text-semi-bold-text-x-large:var(--base-font-weight-semi-bold-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
251
+ --base-typography-text-semi-bold-text-large:var(--base-font-weight-semi-bold-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
252
+ --base-typography-text-semi-bold-text-medium:var(--base-font-weight-semi-bold-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
253
+ --base-typography-text-semi-bold-text-small:var(--base-font-weight-semi-bold-text) var(--core-font-size-14)/var(--core-line-height-140) var(--base-primary-font);
254
+ --base-typography-text-semi-bold-text-x-small:var(--base-font-weight-semi-bold-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
255
+ --base-typography-text-regular-text-x-large:var(--base-font-weight-regular-text) var(--core-font-size-20)/var(--core-line-height-140) var(--base-primary-font);
256
+ --base-typography-text-regular-text-large:var(--base-font-weight-regular-text) var(--core-font-size-18)/var(--core-line-height-140) var(--base-primary-font);
257
+ --base-typography-text-regular-text-medium:var(--base-font-weight-regular-text) var(--core-font-size-16)/var(--core-line-height-140) var(--base-primary-font);
258
+ --base-typography-text-regular-text-small:var(--base-font-weight-regular-text) var(--core-font-size-14)/var(--core-line-height-140) var(--base-primary-font);
259
+ --base-typography-text-regular-text-x-small:var(--base-font-weight-regular-text) var(--core-font-size-12)/var(--core-line-height-140) var(--base-primary-font);
260
+ --base-typography-title-level6:var(--base-font-weight-title) var(--core-font-size-16)/var(--core-line-height-120) var(--base-primary-font);
261
+ --base-typography-title-level5:var(--base-font-weight-title) var(--core-font-size-18)/var(--core-line-height-120) var(--base-primary-font);
262
+ --base-typography-title-level4:var(--base-font-weight-title) var(--core-font-size-24)/var(--core-line-height-120) var(--base-primary-font);
263
+ --base-typography-title-level3:var(--base-font-weight-title) var(--core-font-size-28)/var(--core-line-height-120) var(--base-primary-font);
264
+ --base-typography-title-level2:var(--base-font-weight-title) var(--core-font-size-32)/var(--core-line-height-120) var(--base-primary-font);
265
+ --base-typography-title-level1:var(--base-font-weight-title) var(--core-font-size-48)/var(--core-line-height-120) var(--base-primary-font);
266
+ --base-border-selectable-active:var(--core-border-width-3) solid var(--core-color-neutrals-80);
267
+ --base-border-selectable-focus:var(--core-border-width-3) solid var(--core-color-neutrals-80);
268
+ --base-border-selectable-hover:var(--core-border-width-2) solid rgba(0,0,0,0.08);
269
+ --base-border-selectable-normal:var(--core-border-width-2) solid rgba(0,0,0,0.08);
270
+ --base-font-size-text-x-large:var(--core-font-size-20);
271
+ --base-font-size-text-large:var(--core-font-size-18);
272
+ --base-font-size-text-medium:var(--core-font-size-16);
273
+ --base-font-size-text-small:var(--core-font-size-14);
274
+ --base-font-size-text-x-small:var(--core-font-size-12);
275
+ --base-font-size-selectable-x-large:var(--core-font-size-28);
276
+ --base-font-size-selectable-large:var(--core-font-size-18);
277
+ --base-font-size-selectable-medium:var(--core-font-size-16);
278
+ --base-font-size-selectable-small:var(--core-font-size-14);
279
+ --base-font-weight-bold-text:var(--core-font-weight-extra-bold);
280
+ --base-font-weight-semi-bold-text:var(--core-font-weight-semi-bold);
281
+ --base-font-weight-regular-text:var(--core-font-weight-regular);
282
+ --base-font-weight-title:var(--core-font-weight-extra-bold);
283
+ --base-font-weight-selectable:var(--core-font-weight-semi-bold);
284
+ --base-sizing-selectable-x-large:var(--core-sizing-72);
285
+ --base-sizing-selectable-large:var(--core-sizing-56);
286
+ --base-sizing-selectable-medium:var(--core-sizing-48);
287
+ --base-sizing-selectable-small:var(--core-sizing-32);
288
+ --base-box-shadow-selectable-label:var(--core-box-shadow-1);
289
+ --base-box-shadow-selectable-background:var(--core-box-shadow-3);
290
+ --base-border-radius-selectable-xlarge:var(--core-border-radius-16);
291
+ --base-border-radius-selectable-large:var(--core-border-radius-8);
292
+ --base-border-radius-selectable-medium:var(--core-border-radius-8);
293
+ --base-border-radius-selectable-small:var(--core-border-radius-8);
294
+ --base-color-selectable-secondary-foreground:var(--core-color-neutrals-100);
295
+ --base-color-selectable-secondary-darkest:var(--core-color-alpha-60);
296
+ --base-color-selectable-secondary-darker:var(--core-color-alpha-70);
297
+ --base-color-selectable-secondary-default:var(--core-color-alpha-80);
298
+ --base-color-selectable-primary-default:var(--core-color-gradient-brand);
299
+ --base-color-brand-foreground:var(--core-color-neutrals-100);
300
+ --base-color-brand-darkest:var(--core-color-streamz-pink-30);
301
+ --base-color-brand-darker:var(--core-color-streamz-pink-40);
302
+ --base-color-brand-default:var(--core-color-streamz-pink-50);
303
+ --base-color-brand-lighter:var(--core-color-streamz-pink-70);
304
+ --base-color-selectable-primary-foreground:var(--base-color-brand-foreground);
305
+ --base-color-selectable-primary-darkest:var(--base-color-brand-darkest);
306
+ --base-color-selectable-primary-darker:var(--base-color-brand-darker);
307
+ }
308
+ }
309
+ :root{
310
+ --button-color-secondary-foreground-disabled:rgba(255,255,255,0.5);
311
+ --button-color-primary-foreground-disabled:rgba(255,255,255,0.5);
312
+ --button-box-shadow-foreground:var(--core-box-shadow-text);
313
+ --button-font-family-label:var(--base-primary-font);
314
+ --button-border-secondary-active:var(--base-border-selectable-focus);
315
+ --button-border-secondary-focus:var(--base-border-selectable-focus);
316
+ --button-border-secondary-hover:var(--base-border-selectable-normal);
317
+ --button-border-secondary-normal:var(--base-border-selectable-normal);
318
+ --button-border-primary-active:var(--base-border-selectable-focus);
319
+ --button-border-primary-focus:var(--base-border-selectable-focus);
320
+ --button-border-primary-hover:var(--base-border-selectable-normal);
321
+ --button-border-primary-normal:var(--base-border-selectable-normal);
322
+ --button-box-shadow-background:var(--base-box-shadow-selectable-background);
323
+ --button-font-size-label-x-large:var(--base-font-size-selectable-x-large);
324
+ --button-font-size-label-large:var(--base-font-size-selectable-large);
325
+ --button-font-size-label-medium:var(--base-font-size-selectable-medium);
326
+ --button-font-size-label-small:var(--base-font-size-selectable-small);
327
+ --button-font-weight-label:var(--base-font-weight-selectable);
328
+ --button-sizing-height-x-large:var(--base-sizing-selectable-x-large);
329
+ --button-sizing-height-large:var(--base-sizing-selectable-large);
330
+ --button-sizing-height-medium:var(--base-sizing-selectable-medium);
331
+ --button-sizing-height-small:var(--base-sizing-selectable-small);
332
+ --button-border-radius-x-large:var(--base-border-radius-selectable-xlarge);
333
+ --button-border-radius-large:var(--base-border-radius-selectable-large);
334
+ --button-border-radius-medium:var(--base-border-radius-selectable-medium);
335
+ --button-border-radius-small:var(--base-border-radius-selectable-small);
336
+ --button-color-secondary-foreground-normal:var(--base-color-selectable-secondary-foreground);
337
+ --button-color-secondary-background-disabled:var(--base-color-selectable-secondary-default);
338
+ --button-color-secondary-background-active:var(--base-color-selectable-secondary-darkest);
339
+ --button-color-secondary-background-focus:var(--base-color-selectable-secondary-darker);
340
+ --button-color-secondary-background-hover:var(--base-color-selectable-secondary-darker);
341
+ --button-color-secondary-background-normal:var(--base-color-selectable-secondary-default);
342
+ --button-color-primary-background-disabled:var(--base-color-selectable-secondary-default);
343
+ --button-color-primary-background-active:var(--base-color-brand-darkest);
344
+ --button-color-primary-background-focus:var(--base-color-selectable-primary-default);
345
+ --button-color-primary-background-normal:var(--base-color-selectable-primary-default);
346
+ --button-spacing-vertical-x-large:21px;
347
+ --button-spacing-vertical-large:14px;
348
+ --button-spacing-vertical-medium:12px;
349
+ --button-spacing-vertical-small:11px;
350
+ --button-spacing-horizontal-x-large:var(--button-font-size-label-x-large);
351
+ --button-spacing-horizontal-large:var(--button-font-size-label-large);
352
+ --button-spacing-horizontal-medium:var(--button-font-size-label-medium);
353
+ --button-spacing-horizontal-small:var(--button-font-size-label-small);
354
+ --button-spacing-gap-x-large:14px;
355
+ --button-spacing-gap-large:9px;
356
+ --button-spacing-gap-medium:8px;
357
+ --button-spacing-gap-small:7px;
358
+ --button-color-primary-foreground-normal:var(--base-color-selectable-primary-foreground);
359
+ --button-color-primary-background-hover:var(--base-color-selectable-primary-darker);
360
+ }