@wix/design-system-tokens 1.82.0 → 1.83.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 (18) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +11 -2
  3. package/all.css +287 -1
  4. package/all.st.css +572 -0
  5. package/component.st.css +374 -0
  6. package/foundation.st.css +40 -0
  7. package/package.json +2 -2
  8. package/semantic.st.css +158 -0
  9. package/studio/all.css +285 -3
  10. package/studio/all.st.css +568 -4
  11. package/studio/component.st.css +370 -4
  12. package/studio/foundation.st.css +40 -0
  13. package/studio/semantic.st.css +158 -0
  14. package/wixel/all.css +1489 -0
  15. package/wixel/all.st.css +2977 -0
  16. package/wixel/component.st.css +1757 -0
  17. package/wixel/foundation.st.css +383 -0
  18. package/wixel/semantic.st.css +843 -0
package/studio/foundation.st.css CHANGED
@@ -1,3 +1,4 @@
1
+ @property st-global(--wds-background-blur-100);
1
2
  @property st-global(--wds-border-radius-0);
2
3
  @property st-global(--wds-border-radius-100);
3
4
  @property st-global(--wds-border-radius-200);
@@ -28,6 +29,10 @@
28
29
  @property st-global(--wds-color-black-200-transparent-60);
29
30
  @property st-global(--wds-color-black-200-transparent-70);
30
31
  @property st-global(--wds-color-black-300);
32
+ @property st-global(--wds-color-black-300-transparent-0);
33
+ @property st-global(--wds-color-black-300-transparent-50);
34
+ @property st-global(--wds-color-black-300-transparent-60);
35
+ @property st-global(--wds-color-black-300-transparent-70);
31
36
  @property st-global(--wds-color-black-400);
32
37
  @property st-global(--wds-color-black-500);
33
38
  @property st-global(--wds-color-black-550);
@@ -106,6 +111,7 @@
106
111
  @property st-global(--wds-color-yellow-500);
107
112
  @property st-global(--wds-color-yellow-600);
108
113
  @property st-global(--wds-font-family-default);
114
+ @property st-global(--wds-font-family-heading);
109
115
  @property st-global(--wds-font-letter-spacing-0);
110
116
  @property st-global(--wds-font-letter-spacing-100);
111
117
  @property st-global(--wds-font-line-height-100);
@@ -125,10 +131,16 @@
125
131
  @property st-global(--wds-font-weight-bold);
126
132
  @property st-global(--wds-font-weight-medium);
127
133
  @property st-global(--wds-font-weight-regular);
134
+ @property st-global(--wds-font-weight-semi-bold);
128
135
  @property st-global(--wds-shadow-100);
129
136
  @property st-global(--wds-shadow-200);
130
137
  @property st-global(--wds-shadow-300);
131
138
  @property st-global(--wds-shadow-400);
139
+ @property st-global(--wds-shadow-blur-50);
140
+ @property st-global(--wds-shadow-blur-100);
141
+ @property st-global(--wds-shadow-blur-150);
142
+ @property st-global(--wds-shadow-blur-200);
143
+ @property st-global(--wds-shadow-blur-400);
132
144
  @property st-global(--wds-shadow-inner-100);
133
145
  @property st-global(--wds-shadow-inner-200);
134
146
  @property st-global(--wds-shadow-inner-300);
@@ -145,6 +157,10 @@
145
157
  @property st-global(--wds-shadow-inner-400-right);
146
158
  @property st-global(--wds-shadow-inner-400-top);
147
159
  @property st-global(--wds-shadow-inner-400-vertical);
160
+ @property st-global(--wds-shadow-y-100);
161
+ @property st-global(--wds-shadow-y-200);
162
+ @property st-global(--wds-shadow-y-300);
163
+ @property st-global(--wds-shadow-y-350);
148
164
  @property st-global(--wds-space-0);
149
165
  @property st-global(--wds-space-25);
150
166
  @property st-global(--wds-space-50);
@@ -153,14 +169,18 @@
153
169
  @property st-global(--wds-space-200);
154
170
  @property st-global(--wds-space-250);
155
171
  @property st-global(--wds-space-300);
172
+ @property st-global(--wds-space-350);
156
173
  @property st-global(--wds-space-400);
157
174
  @property st-global(--wds-space-475);
158
175
  @property st-global(--wds-space-500);
159
176
  @property st-global(--wds-space-600);
160
177
  @property st-global(--wds-space-700);
161
178
  @property st-global(--wds-space-800);
179
+ @property st-global(--wds-space-850);
162
180
  @property st-global(--wds-space-900);
181
+ @property st-global(--wds-space-950);
163
182
  @property st-global(--wds-space-1000);
183
+ @property st-global(--wds-space-1050);
164
184
  @property st-global(--wds-space-1100);
165
185
  @property st-global(--wds-space-1200);
166
186
  @property st-global(--wds-space-1300);
@@ -171,6 +191,7 @@
171
191
  @property st-global(--wds-space-2400);
172
192
 
173
193
  .root {
194
+ --wds-background-blur-100: 0;
174
195
  --wds-border-radius-0: 0;
175
196
  --wds-border-radius-100: 2px;
176
197
  --wds-border-radius-200: 4px;
@@ -201,6 +222,10 @@
201
222
  --wds-color-black-200-transparent-60: rgba(43, 46, 54, .6);
202
223
  --wds-color-black-200-transparent-70: rgba(43, 46, 54, .7);
203
224
  --wds-color-black-300: #42454c;
225
+ --wds-color-black-300-transparent-0: rgba(43, 46, 54, 0.0000);
226
+ --wds-color-black-300-transparent-50: rgba(43, 46, 54, 0.5000);
227
+ --wds-color-black-300-transparent-60: rgba(43, 46, 54, 0.6000);
228
+ --wds-color-black-300-transparent-70: rgba(43, 46, 54, 0.7000);
204
229
  --wds-color-black-400: #868aa5;
205
230
  --wds-color-black-500: #acafc4;
206
231
  --wds-color-black-550: #cfd1dc;
@@ -279,6 +304,7 @@
279
304
  --wds-color-yellow-500: #fef3e5;
280
305
  --wds-color-yellow-600: #fef6ed;
281
306
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
307
+ --wds-font-family-heading: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
282
308
  --wds-font-letter-spacing-0: 0;
283
309
  --wds-font-letter-spacing-100: 1px;
284
310
  --wds-font-line-height-100: 16px;
@@ -298,10 +324,16 @@
298
324
  --wds-font-weight-bold: 700;
299
325
  --wds-font-weight-medium: 500;
300
326
  --wds-font-weight-regular: 400;
327
+ --wds-font-weight-semi-bold: 600;
301
328
  --wds-shadow-100: 0 2px 7px rgba(19, 23, 32, .2);
302
329
  --wds-shadow-200: 0 0 12px rgba(19, 23, 32, .2);
303
330
  --wds-shadow-300: 0 12px 20px rgba(19, 23, 32, .1);
304
331
  --wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
332
+ --wds-shadow-blur-50: 4;
333
+ --wds-shadow-blur-100: 4;
334
+ --wds-shadow-blur-150: 6;
335
+ --wds-shadow-blur-200: 18;
336
+ --wds-shadow-blur-400: 24;
305
337
  --wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
306
338
  --wds-shadow-inner-200: 1px 1px 4px rgba(19, 23, 32, .2) inset;
307
339
  --wds-shadow-inner-300: 0 0 18px rgba(19, 23, 32, .1) inset, 0 0 6px rgba(19, 23, 32, .05) inset;
@@ -318,6 +350,10 @@
318
350
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(19, 23, 32, .2) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
319
351
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(19, 23, 32, .2) inset, 0 8px 6px -6px rgba(19, 23, 32, .05) inset;
320
352
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
353
+ --wds-shadow-y-100: 0;
354
+ --wds-shadow-y-200: 0;
355
+ --wds-shadow-y-300: 0;
356
+ --wds-shadow-y-350: 0;
321
357
  --wds-space-0: 0;
322
358
  --wds-space-25: 1px;
323
359
  --wds-space-50: 2px;
@@ -326,14 +362,18 @@
326
362
  --wds-space-200: 8px;
327
363
  --wds-space-250: 10px;
328
364
  --wds-space-300: 12px;
365
+ --wds-space-350: 14px;
329
366
  --wds-space-400: 16px;
330
367
  --wds-space-475: 18px;
331
368
  --wds-space-500: 20px;
332
369
  --wds-space-600: 24px;
333
370
  --wds-space-700: 28px;
334
371
  --wds-space-800: 32px;
372
+ --wds-space-850: 34px;
335
373
  --wds-space-900: 36px;
374
+ --wds-space-950: 38px;
336
375
  --wds-space-1000: 40px;
376
+ --wds-space-1050: 42px;
337
377
  --wds-space-1100: 44px;
338
378
  --wds-space-1200: 48px;
339
379
  --wds-space-1300: 52px;
package/studio/semantic.st.css CHANGED
@@ -1,6 +1,12 @@
1
1
  @property st-global(--wds-border-radius-surface-default);
2
2
  @property st-global(--wds-border-radius-surface-modal);
3
+ @property st-global(--wds-border-radius-surface-modal-backdrop);
3
4
  @property st-global(--wds-border-radius-surface-overlay);
5
+ @property st-global(--wds-border-radius-surface-raised);
6
+ @property st-global(--wds-border-radius-surface-sunken);
7
+ @property st-global(--wds-color-border-ai-active);
8
+ @property st-global(--wds-color-border-ai-disabled);
9
+ @property st-global(--wds-color-border-ai-hover);
4
10
  @property st-global(--wds-color-border-ai-primary);
5
11
  @property st-global(--wds-color-border-dark-primary);
6
12
  @property st-global(--wds-color-border-dark-primary-active);
@@ -103,10 +109,13 @@
103
109
  @property st-global(--wds-color-fill-accent-10);
104
110
  @property st-global(--wds-color-fill-accent-11);
105
111
  @property st-global(--wds-color-fill-accent-12);
112
+ @property st-global(--wds-color-fill-ai);
113
+ @property st-global(--wds-color-fill-ai-hover);
106
114
  @property st-global(--wds-color-fill-ai-primary);
107
115
  @property st-global(--wds-color-fill-ai-primary-active);
108
116
  @property st-global(--wds-color-fill-ai-primary-disabled);
109
117
  @property st-global(--wds-color-fill-ai-primary-hover);
118
+ @property st-global(--wds-color-fill-ai-primary-pressed);
110
119
  @property st-global(--wds-color-fill-ai-secondary);
111
120
  @property st-global(--wds-color-fill-ai-secondary-active);
112
121
  @property st-global(--wds-color-fill-ai-secondary-disabled);
@@ -195,6 +204,46 @@
195
204
  @property st-global(--wds-color-fill-social-youtube-active);
196
205
  @property st-global(--wds-color-fill-social-youtube-disabled);
197
206
  @property st-global(--wds-color-fill-social-youtube-hover);
207
+ @property st-global(--wds-color-fill-stage-anchor);
208
+ @property st-global(--wds-color-fill-stage-anchor-active);
209
+ @property st-global(--wds-color-fill-stage-anchor-disabled);
210
+ @property st-global(--wds-color-fill-stage-anchor-hover);
211
+ @property st-global(--wds-color-fill-stage-cms);
212
+ @property st-global(--wds-color-fill-stage-cms-active);
213
+ @property st-global(--wds-color-fill-stage-cms-disabled);
214
+ @property st-global(--wds-color-fill-stage-cms-hover);
215
+ @property st-global(--wds-color-fill-stage-element-primary);
216
+ @property st-global(--wds-color-fill-stage-element-primary-active);
217
+ @property st-global(--wds-color-fill-stage-element-primary-disabled);
218
+ @property st-global(--wds-color-fill-stage-element-primary-hover);
219
+ @property st-global(--wds-color-fill-stage-element-secondary);
220
+ @property st-global(--wds-color-fill-stage-element-secondary-active);
221
+ @property st-global(--wds-color-fill-stage-element-secondary-disabled);
222
+ @property st-global(--wds-color-fill-stage-element-secondary-hover);
223
+ @property st-global(--wds-color-fill-stage-interactions);
224
+ @property st-global(--wds-color-fill-stage-interactions-active);
225
+ @property st-global(--wds-color-fill-stage-interactions-disabled);
226
+ @property st-global(--wds-color-fill-stage-interactions-hover);
227
+ @property st-global(--wds-color-fill-stage-master-primary);
228
+ @property st-global(--wds-color-fill-stage-master-primary-active);
229
+ @property st-global(--wds-color-fill-stage-master-primary-disabled);
230
+ @property st-global(--wds-color-fill-stage-master-primary-hover);
231
+ @property st-global(--wds-color-fill-stage-master-secondary);
232
+ @property st-global(--wds-color-fill-stage-master-secondary-active);
233
+ @property st-global(--wds-color-fill-stage-master-secondary-disabled);
234
+ @property st-global(--wds-color-fill-stage-master-secondary-hover);
235
+ @property st-global(--wds-color-fill-stage-padding);
236
+ @property st-global(--wds-color-fill-stage-padding-active);
237
+ @property st-global(--wds-color-fill-stage-padding-disabled);
238
+ @property st-global(--wds-color-fill-stage-padding-hover);
239
+ @property st-global(--wds-color-fill-stage-section-primary);
240
+ @property st-global(--wds-color-fill-stage-section-primary-active);
241
+ @property st-global(--wds-color-fill-stage-section-primary-disabled);
242
+ @property st-global(--wds-color-fill-stage-section-primary-hover);
243
+ @property st-global(--wds-color-fill-stage-section-secondary);
244
+ @property st-global(--wds-color-fill-stage-section-secondary-active);
245
+ @property st-global(--wds-color-fill-stage-section-secondary-disabled);
246
+ @property st-global(--wds-color-fill-stage-section-secondary-hover);
198
247
  @property st-global(--wds-color-fill-standard-light-primary);
199
248
  @property st-global(--wds-color-fill-standard-light-primary-active);
200
249
  @property st-global(--wds-color-fill-standard-light-primary-disabled);
@@ -242,6 +291,18 @@
242
291
  @property st-global(--wds-color-fill-surface-success);
243
292
  @property st-global(--wds-color-fill-surface-sunken);
244
293
  @property st-global(--wds-color-fill-surface-warning);
294
+ @property st-global(--wds-color-fill-transparent-neutral-primary);
295
+ @property st-global(--wds-color-fill-transparent-neutral-primary-active);
296
+ @property st-global(--wds-color-fill-transparent-neutral-primary-disabled);
297
+ @property st-global(--wds-color-fill-transparent-neutral-primary-hover);
298
+ @property st-global(--wds-color-fill-transparent-neutral-secondary);
299
+ @property st-global(--wds-color-fill-transparent-neutral-secondary-active);
300
+ @property st-global(--wds-color-fill-transparent-neutral-secondary-disabled);
301
+ @property st-global(--wds-color-fill-transparent-neutral-secondary-hover);
302
+ @property st-global(--wds-color-fill-transparent-neutral-tertiary);
303
+ @property st-global(--wds-color-fill-transparent-neutral-tertiary-active);
304
+ @property st-global(--wds-color-fill-transparent-neutral-tertiary-disabled);
305
+ @property st-global(--wds-color-fill-transparent-neutral-tertiary-hover);
245
306
  @property st-global(--wds-color-fill-transparent-primary);
246
307
  @property st-global(--wds-color-fill-transparent-primary-active);
247
308
  @property st-global(--wds-color-fill-transparent-primary-disabled);
@@ -250,6 +311,10 @@
250
311
  @property st-global(--wds-color-fill-transparent-secondary-active);
251
312
  @property st-global(--wds-color-fill-transparent-secondary-disabled);
252
313
  @property st-global(--wds-color-fill-transparent-secondary-hover);
314
+ @property st-global(--wds-color-fill-transparent-tertiary);
315
+ @property st-global(--wds-color-fill-transparent-tertiary-active);
316
+ @property st-global(--wds-color-fill-transparent-tertiary-disabled);
317
+ @property st-global(--wds-color-fill-transparent-tertiary-hover);
253
318
  @property st-global(--wds-color-fill-urgent-primary);
254
319
  @property st-global(--wds-color-fill-urgent-primary-active);
255
320
  @property st-global(--wds-color-fill-urgent-primary-disabled);
@@ -277,6 +342,9 @@
277
342
  @property st-global(--wds-color-text-placeholder-light);
278
343
  @property st-global(--wds-color-text-premium);
279
344
  @property st-global(--wds-color-text-primary);
345
+ @property st-global(--wds-color-text-stage-element);
346
+ @property st-global(--wds-color-text-stage-master);
347
+ @property st-global(--wds-color-text-stage-section);
280
348
  @property st-global(--wds-color-text-standard-primary);
281
349
  @property st-global(--wds-color-text-standard-primary-light);
282
350
  @property st-global(--wds-color-text-standard-secondary);
@@ -310,16 +378,25 @@
310
378
  @property st-global(--wds-font-size-heading-4);
311
379
  @property st-global(--wds-font-size-heading-5);
312
380
  @property st-global(--wds-font-size-heading-6);
381
+ @property st-global(--wds-font-weight-body-bold);
313
382
  @property st-global(--wds-font-weight-heading-1);
314
383
  @property st-global(--wds-font-weight-heading-2);
315
384
  @property st-global(--wds-font-weight-heading-3);
316
385
  @property st-global(--wds-font-weight-heading-4);
317
386
  @property st-global(--wds-font-weight-heading-5);
318
387
  @property st-global(--wds-font-weight-heading-6);
388
+ @property st-global(--wds-shadow-fill-primary-modal);
389
+ @property st-global(--wds-shadow-fill-primary-overlay);
390
+ @property st-global(--wds-shadow-fill-primary-raised);
391
+ @property st-global(--wds-shadow-fill-secondary-modal);
392
+ @property st-global(--wds-shadow-fill-secondary-overlay);
393
+ @property st-global(--wds-shadow-fill-secondary-raised);
394
+ @property st-global(--wds-shadow-fill-secondary-toggle);
319
395
  @property st-global(--wds-shadow-focus-destructive);
320
396
  @property st-global(--wds-shadow-focus-inner-destructive);
321
397
  @property st-global(--wds-shadow-focus-inner-standard);
322
398
  @property st-global(--wds-shadow-focus-inner-warning);
399
+ @property st-global(--wds-shadow-focus-spread);
323
400
  @property st-global(--wds-shadow-focus-standard);
324
401
  @property st-global(--wds-shadow-focus-warning);
325
402
  @property st-global(--wds-shadow-surface-modal);
@@ -338,11 +415,19 @@
338
415
  @property st-global(--wds-space-padding-vertical-tiny);
339
416
  @property st-global(--wds-space-padding-vertical-x-tiny);
340
417
  @property st-global(--wds-space-padding-vertical-xx-tiny);
418
+ @property st-global(--wds-width-default);
419
+ @property st-global(--wds-width-default-2);
341
420
 
342
421
  .root {
343
422
  --wds-border-radius-surface-default: 4px;
344
423
  --wds-border-radius-surface-modal: 4px;
424
+ --wds-border-radius-surface-modal-backdrop: 0;
345
425
  --wds-border-radius-surface-overlay: 4px;
426
+ --wds-border-radius-surface-raised: 4px;
427
+ --wds-border-radius-surface-sunken: 0;
428
+ --wds-color-border-ai-active: #ffffff;
429
+ --wds-color-border-ai-disabled: #ffffff;
430
+ --wds-color-border-ai-hover: #ffffff;
346
431
  --wds-color-border-ai-primary: #5a48f5;
347
432
  --wds-color-border-dark-primary: #868aa5;
348
433
  --wds-color-border-dark-primary-active: #2b2e36;
@@ -445,10 +530,13 @@
445
530
  --wds-color-fill-accent-10: #1F8845;
446
531
  --wds-color-fill-accent-11: #1B3689;
447
532
  --wds-color-fill-accent-12: #ACAFC4;
533
+ --wds-color-fill-ai: #ffffff;
534
+ --wds-color-fill-ai-hover: #ffffff;
448
535
  --wds-color-fill-ai-primary: #5a48f5;
449
536
  --wds-color-fill-ai-primary-active: #5a48f5;
450
537
  --wds-color-fill-ai-primary-disabled: #bebebe;
451
538
  --wds-color-fill-ai-primary-hover: #4d3dd0;
539
+ --wds-color-fill-ai-primary-pressed: #ffffff;
452
540
  --wds-color-fill-ai-secondary: #d6d1fc;
453
541
  --wds-color-fill-ai-secondary-active: #d6d1fc;
454
542
  --wds-color-fill-ai-secondary-disabled: #e5e5e5;
@@ -537,6 +625,46 @@
537
625
  --wds-color-fill-social-youtube-active: #ff0000;
538
626
  --wds-color-fill-social-youtube-disabled: #bebebe;
539
627
  --wds-color-fill-social-youtube-hover: rgba(255, 0, 0, .8);
628
+ --wds-color-fill-stage-anchor: #ffffff;
629
+ --wds-color-fill-stage-anchor-active: #ffffff;
630
+ --wds-color-fill-stage-anchor-disabled: #bebebe;
631
+ --wds-color-fill-stage-anchor-hover: #ffffff;
632
+ --wds-color-fill-stage-cms: #2d3034;
633
+ --wds-color-fill-stage-cms-active: #2d3034;
634
+ --wds-color-fill-stage-cms-disabled: #bebebe;
635
+ --wds-color-fill-stage-cms-hover: #2d3034;
636
+ --wds-color-fill-stage-element-primary: #116dff;
637
+ --wds-color-fill-stage-element-primary-active: #116dff;
638
+ --wds-color-fill-stage-element-primary-disabled: #bebebe;
639
+ --wds-color-fill-stage-element-primary-hover: #0f62e6;
640
+ --wds-color-fill-stage-element-secondary: #dce9ff;
641
+ --wds-color-fill-stage-element-secondary-active: #dce9ff;
642
+ --wds-color-fill-stage-element-secondary-disabled: #e5e5e5;
643
+ --wds-color-fill-stage-element-secondary-hover: #c3daff;
644
+ --wds-color-fill-stage-interactions: #ff5c9f;
645
+ --wds-color-fill-stage-interactions-active: #ff5c9f;
646
+ --wds-color-fill-stage-interactions-disabled: #bebebe;
647
+ --wds-color-fill-stage-interactions-hover: #ff5c9f;
648
+ --wds-color-fill-stage-master-primary: #47cb2e;
649
+ --wds-color-fill-stage-master-primary-active: #47cb2e;
650
+ --wds-color-fill-stage-master-primary-disabled: #bebebe;
651
+ --wds-color-fill-stage-master-primary-hover: #47cb2e;
652
+ --wds-color-fill-stage-master-secondary: #e4f7e0;
653
+ --wds-color-fill-stage-master-secondary-active: #a3e597;
654
+ --wds-color-fill-stage-master-secondary-disabled: #e5e5e5;
655
+ --wds-color-fill-stage-master-secondary-hover: #d1f2cb;
656
+ --wds-color-fill-stage-padding: #18d9c2;
657
+ --wds-color-fill-stage-padding-active: #18d9c2;
658
+ --wds-color-fill-stage-padding-disabled: #bebebe;
659
+ --wds-color-fill-stage-padding-hover: #18d9c2;
660
+ --wds-color-fill-stage-section-primary: #116dff;
661
+ --wds-color-fill-stage-section-primary-active: #116dff;
662
+ --wds-color-fill-stage-section-primary-disabled: #bebebe;
663
+ --wds-color-fill-stage-section-primary-hover: #0f62e6;
664
+ --wds-color-fill-stage-section-secondary: #dce9ff;
665
+ --wds-color-fill-stage-section-secondary-active: #dce9ff;
666
+ --wds-color-fill-stage-section-secondary-disabled: #e5e5e5;
667
+ --wds-color-fill-stage-section-secondary-hover: #c3daff;
540
668
  --wds-color-fill-standard-light-primary: #7cafff;
541
669
  --wds-color-fill-standard-light-primary-active: #418aff;
542
670
  --wds-color-fill-standard-light-primary-disabled: rgba(255, 255, 255, .3);
@@ -584,6 +712,18 @@
584
712
  --wds-color-fill-surface-success: #e1f4eb;
585
713
  --wds-color-fill-surface-sunken: #f7f8f8;
586
714
  --wds-color-fill-surface-warning: #fef3e5;
715
+ --wds-color-fill-transparent-neutral-primary: rgba(43, 46, 54, .5);
716
+ --wds-color-fill-transparent-neutral-primary-active: rgba(43, 46, 54, .7);
717
+ --wds-color-fill-transparent-neutral-primary-disabled: rgba(19, 23, 32, .2);
718
+ --wds-color-fill-transparent-neutral-primary-hover: rgba(43, 46, 54, .6);
719
+ --wds-color-fill-transparent-neutral-secondary: rgba(43, 46, 54, 0);
720
+ --wds-color-fill-transparent-neutral-secondary-active: rgba(43, 46, 54, .7);
721
+ --wds-color-fill-transparent-neutral-secondary-disabled: rgba(43, 46, 54, 0);
722
+ --wds-color-fill-transparent-neutral-secondary-hover: rgba(43, 46, 54, .6);
723
+ --wds-color-fill-transparent-neutral-tertiary: rgba(19, 23, 32, 0);
724
+ --wds-color-fill-transparent-neutral-tertiary-active: rgba(19, 23, 32, .5);
725
+ --wds-color-fill-transparent-neutral-tertiary-disabled: rgba(19, 23, 32, 0);
726
+ --wds-color-fill-transparent-neutral-tertiary-hover: rgba(19, 23, 32, .5);
587
727
  --wds-color-fill-transparent-primary: rgba(43, 46, 54, .5);
588
728
  --wds-color-fill-transparent-primary-active: rgba(43, 46, 54, .7);
589
729
  --wds-color-fill-transparent-primary-disabled: rgba(19, 23, 32, .2);
@@ -592,6 +732,10 @@
592
732
  --wds-color-fill-transparent-secondary-active: rgba(43, 46, 54, .7);
593
733
  --wds-color-fill-transparent-secondary-disabled: rgba(43, 46, 54, 0);
594
734
  --wds-color-fill-transparent-secondary-hover: rgba(43, 46, 54, .6);
735
+ --wds-color-fill-transparent-tertiary: rgba(19, 23, 32, 0);
736
+ --wds-color-fill-transparent-tertiary-active: rgba(19, 23, 32, .5);
737
+ --wds-color-fill-transparent-tertiary-disabled: rgba(19, 23, 32, 0);
738
+ --wds-color-fill-transparent-tertiary-hover: rgba(19, 23, 32, .5);
595
739
  --wds-color-fill-urgent-primary: #f96132;
596
740
  --wds-color-fill-urgent-primary-active: #f96132;
597
741
  --wds-color-fill-urgent-primary-disabled: #bebebe;
@@ -619,6 +763,9 @@
619
763
  --wds-color-text-placeholder-light: #868aa5;
620
764
  --wds-color-text-premium: #9a27d5;
621
765
  --wds-color-text-primary: #116dff;
766
+ --wds-color-text-stage-element: #116dff;
767
+ --wds-color-text-stage-master: #47cb2e;
768
+ --wds-color-text-stage-section: #116dff;
622
769
  --wds-color-text-standard-primary: #131720;
623
770
  --wds-color-text-standard-primary-light: #ffffff;
624
771
  --wds-color-text-standard-secondary: #42454c;
@@ -652,16 +799,25 @@
652
799
  --wds-font-size-heading-4: 18px;
653
800
  --wds-font-size-heading-5: 11px;
654
801
  --wds-font-size-heading-6: 12px;
802
+ --wds-font-weight-body-bold: 700;
655
803
  --wds-font-weight-heading-1: 700;
656
804
  --wds-font-weight-heading-2: 700;
657
805
  --wds-font-weight-heading-3: 700;
658
806
  --wds-font-weight-heading-4: 700;
659
807
  --wds-font-weight-heading-5: 700;
660
808
  --wds-font-weight-heading-6: 400;
809
+ --wds-shadow-fill-primary-modal: rgba(19, 23, 32, .2);
810
+ --wds-shadow-fill-primary-overlay: rgba(19, 23, 32, .1);
811
+ --wds-shadow-fill-primary-raised: rgba(19, 23, 32, .1);
812
+ --wds-shadow-fill-secondary-modal: rgba(19, 23, 32, .1);
813
+ --wds-shadow-fill-secondary-overlay: rgba(19, 23, 32, .05);
814
+ --wds-shadow-fill-secondary-raised: rgba(19, 23, 32, .05);
815
+ --wds-shadow-fill-secondary-toggle: rgba(19, 23, 32, 0);
661
816
  --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
662
817
  --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
663
818
  --wds-shadow-focus-inner-standard: 0 0 0 3px #c3daff inset;
664
819
  --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
820
+ --wds-shadow-focus-spread: 0;
665
821
  --wds-shadow-focus-standard: 0 0 0 3px #c3daff;
666
822
  --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
667
823
  --wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
@@ -680,4 +836,6 @@
680
836
  --wds-space-padding-vertical-tiny: 12px;
681
837
  --wds-space-padding-vertical-x-tiny: 8px;
682
838
  --wds-space-padding-vertical-xx-tiny: 4px;
839
+ --wds-width-default: 1px;
840
+ --wds-width-default-2: 1px;
683
841
  }