@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/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(68, 72, 95, .6);
202
223
  --wds-color-black-200-transparent-70: rgba(68, 72, 95, .7);
203
224
  --wds-color-black-300: #595d70;
225
+ --wds-color-black-300-transparent-0: rgba(134, 138, 165, 0.0000);
226
+ --wds-color-black-300-transparent-50: rgba(134, 138, 165, 0.5000);
227
+ --wds-color-black-300-transparent-60: rgba(134, 138, 165, 0.6000);
228
+ --wds-color-black-300-transparent-70: rgba(134, 138, 165, 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: #fff0d1;
280
305
  --wds-color-yellow-600: #fff6e5;
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: 12px;
@@ -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 0 3px rgba(0, 6, 36, .1), 0 2px 1px rgba(0, 6, 36, .5);
302
329
  --wds-shadow-200: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
303
330
  --wds-shadow-300: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
304
331
  --wds-shadow-400: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
332
+ --wds-shadow-blur-50: 3px;
333
+ --wds-shadow-blur-100: 6px;
334
+ --wds-shadow-blur-150: 6px;
335
+ --wds-shadow-blur-200: 18px;
336
+ --wds-shadow-blur-400: 24px;
305
337
  --wds-shadow-inner-100: 1px 1px 2px rgba(0, 6, 36, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
306
338
  --wds-shadow-inner-200: 1px 1px 4px rgba(0, 6, 36, .2) inset;
307
339
  --wds-shadow-inner-300: 0 0 18px rgba(0, 6, 36, .1) inset, 0 0 6px rgba(0, 6, 36, .05) inset;
@@ -318,6 +350,10 @@
318
350
  --wds-shadow-inner-400-right: -32px 0 24px -24px rgba(0, 6, 36, .2) inset, -8px 0 6px -6px rgba(0, 6, 36, .05) inset;
319
351
  --wds-shadow-inner-400-top: 0 32px 24px -24px rgba(0, 6, 36, .2) inset, 0 8px 6px -6px rgba(0, 6, 36, .05) inset;
320
352
  --wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset, 0 -22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .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: 3px;
321
357
  --wds-space-0: 0;
322
358
  --wds-space-25: 1px;
323
359
  --wds-space-50: 3px;
@@ -326,14 +362,18 @@
326
362
  --wds-space-200: 12px;
327
363
  --wds-space-250: 15px;
328
364
  --wds-space-300: 18px;
365
+ --wds-space-350: 21px;
329
366
  --wds-space-400: 24px;
330
367
  --wds-space-475: 28px;
331
368
  --wds-space-500: 30px;
332
369
  --wds-space-600: 36px;
333
370
  --wds-space-700: 42px;
334
371
  --wds-space-800: 48px;
372
+ --wds-space-850: 51px;
335
373
  --wds-space-900: 54px;
374
+ --wds-space-950: 57px;
336
375
  --wds-space-1000: 60px;
376
+ --wds-space-1050: 63px;
337
377
  --wds-space-1100: 66px;
338
378
  --wds-space-1200: 72px;
339
379
  --wds-space-1300: 78px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.82.0",
3
+ "version": "1.83.0",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "fa70c52d231634f01f536f23e52c8fecb7e43e5856cd724d280e864b"
36
+ "falconPackageHash": "0b38f3598333b7398cdfc5d9abe5fdd6945a9a63fb17c5c06f56c10f"
37
37
  }
package/semantic.st.css CHANGED
@@ -1,7 +1,13 @@
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);
4
7
  @property st-global(--wds-color-border-ai-primary);
8
+ @property st-global(--wds-color-border-ai-primary-active);
9
+ @property st-global(--wds-color-border-ai-primary-disabled);
10
+ @property st-global(--wds-color-border-ai-primary-hover);
5
11
  @property st-global(--wds-color-border-dark-primary);
6
12
  @property st-global(--wds-color-border-dark-primary-active);
7
13
  @property st-global(--wds-color-border-dark-primary-disabled);
@@ -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);
@@ -281,6 +346,9 @@
281
346
  @property st-global(--wds-color-text-placeholder-light);
282
347
  @property st-global(--wds-color-text-premium);
283
348
  @property st-global(--wds-color-text-primary);
349
+ @property st-global(--wds-color-text-stage-element);
350
+ @property st-global(--wds-color-text-stage-master);
351
+ @property st-global(--wds-color-text-stage-section);
284
352
  @property st-global(--wds-color-text-standard-primary);
285
353
  @property st-global(--wds-color-text-standard-primary-light);
286
354
  @property st-global(--wds-color-text-standard-secondary);
@@ -314,16 +382,25 @@
314
382
  @property st-global(--wds-font-size-heading-4);
315
383
  @property st-global(--wds-font-size-heading-5);
316
384
  @property st-global(--wds-font-size-heading-6);
385
+ @property st-global(--wds-font-weight-body-bold);
317
386
  @property st-global(--wds-font-weight-heading-1);
318
387
  @property st-global(--wds-font-weight-heading-2);
319
388
  @property st-global(--wds-font-weight-heading-3);
320
389
  @property st-global(--wds-font-weight-heading-4);
321
390
  @property st-global(--wds-font-weight-heading-5);
322
391
  @property st-global(--wds-font-weight-heading-6);
392
+ @property st-global(--wds-shadow-fill-primary-modal);
393
+ @property st-global(--wds-shadow-fill-primary-overlay);
394
+ @property st-global(--wds-shadow-fill-primary-raised);
395
+ @property st-global(--wds-shadow-fill-secondary-modal);
396
+ @property st-global(--wds-shadow-fill-secondary-overlay);
397
+ @property st-global(--wds-shadow-fill-secondary-raised);
398
+ @property st-global(--wds-shadow-fill-secondary-toggle);
323
399
  @property st-global(--wds-shadow-focus-destructive);
324
400
  @property st-global(--wds-shadow-focus-inner-destructive);
325
401
  @property st-global(--wds-shadow-focus-inner-standard);
326
402
  @property st-global(--wds-shadow-focus-inner-warning);
403
+ @property st-global(--wds-shadow-focus-spread);
327
404
  @property st-global(--wds-shadow-focus-standard);
328
405
  @property st-global(--wds-shadow-focus-warning);
329
406
  @property st-global(--wds-shadow-surface-modal);
@@ -342,12 +419,20 @@
342
419
  @property st-global(--wds-space-padding-vertical-tiny);
343
420
  @property st-global(--wds-space-padding-vertical-x-tiny);
344
421
  @property st-global(--wds-space-padding-vertical-xx-tiny);
422
+ @property st-global(--wds-width-default);
423
+ @property st-global(--wds-width-default-2);
345
424
 
346
425
  .root {
347
426
  --wds-border-radius-surface-default: 8px;
348
427
  --wds-border-radius-surface-modal: 8px;
428
+ --wds-border-radius-surface-modal-backdrop: 0;
349
429
  --wds-border-radius-surface-overlay: 8px;
430
+ --wds-border-radius-surface-raised: 8px;
431
+ --wds-border-radius-surface-sunken: 0;
350
432
  --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
433
+ --wds-color-border-ai-primary-active: #ffffff;
434
+ --wds-color-border-ai-primary-disabled: #ffffff;
435
+ --wds-color-border-ai-primary-hover: #ffffff;
351
436
  --wds-color-border-dark-primary: #868aa5;
352
437
  --wds-color-border-dark-primary-active: #44485f;
353
438
  --wds-color-border-dark-primary-disabled: rgba(0, 6, 36, .1);
@@ -449,10 +534,13 @@
449
534
  --wds-color-fill-accent-10: #1F8845;
450
535
  --wds-color-fill-accent-11: #ACAFC4;
451
536
  --wds-color-fill-accent-12: #ACAFC4;
537
+ --wds-color-fill-ai: #ffffff;
538
+ --wds-color-fill-ai-hover: #ffffff;
452
539
  --wds-color-fill-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
453
540
  --wds-color-fill-ai-primary-active: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
454
541
  --wds-color-fill-ai-primary-disabled: rgba(0, 6, 36, .3);
455
542
  --wds-color-fill-ai-primary-hover: linear-gradient(81deg, #0021FF -177.08%, #116DFF 31.96%, #5FF2AE 99.97%);
543
+ --wds-color-fill-ai-primary-pressed: #ffffff;
456
544
  --wds-color-fill-ai-secondary: #d6d1fc;
457
545
  --wds-color-fill-ai-secondary-active: #d6d1fc;
458
546
  --wds-color-fill-ai-secondary-disabled: rgba(0, 6, 36, .1);
@@ -541,6 +629,46 @@
541
629
  --wds-color-fill-social-youtube-active: #ff0000;
542
630
  --wds-color-fill-social-youtube-disabled: rgba(0, 6, 36, .3);
543
631
  --wds-color-fill-social-youtube-hover: rgba(255, 0, 0, .8);
632
+ --wds-color-fill-stage-anchor: #5effff;
633
+ --wds-color-fill-stage-anchor-active: #5effff;
634
+ --wds-color-fill-stage-anchor-disabled: rgba(0, 6, 36, .3);
635
+ --wds-color-fill-stage-anchor-hover: #18d2de;
636
+ --wds-color-fill-stage-cms: #2d3034;
637
+ --wds-color-fill-stage-cms-active: #2d3034;
638
+ --wds-color-fill-stage-cms-disabled: rgba(0, 6, 36, .3);
639
+ --wds-color-fill-stage-cms-hover: #2d3034;
640
+ --wds-color-fill-stage-element-primary: #116dff;
641
+ --wds-color-fill-stage-element-primary-active: #084ebd;
642
+ --wds-color-fill-stage-element-primary-disabled: rgba(0, 6, 36, .3);
643
+ --wds-color-fill-stage-element-primary-hover: #0f62e6;
644
+ --wds-color-fill-stage-element-secondary: #d6e6fe;
645
+ --wds-color-fill-stage-element-secondary-active: #5999ff;
646
+ --wds-color-fill-stage-element-secondary-disabled: rgba(0, 6, 36, .1);
647
+ --wds-color-fill-stage-element-secondary-hover: #a8caff;
648
+ --wds-color-fill-stage-interactions: #ff5c9f;
649
+ --wds-color-fill-stage-interactions-active: #ff5c9f;
650
+ --wds-color-fill-stage-interactions-disabled: rgba(0, 6, 36, .3);
651
+ --wds-color-fill-stage-interactions-hover: #ff5c9f;
652
+ --wds-color-fill-stage-master-primary: #fe620f;
653
+ --wds-color-fill-stage-master-primary-active: #fe620f;
654
+ --wds-color-fill-stage-master-primary-disabled: rgba(0, 6, 36, .3);
655
+ --wds-color-fill-stage-master-primary-hover: #bf5727;
656
+ --wds-color-fill-stage-master-secondary: #fddbc8;
657
+ --wds-color-fill-stage-master-secondary-active: #ff7d38;
658
+ --wds-color-fill-stage-master-secondary-disabled: rgba(0, 6, 36, .1);
659
+ --wds-color-fill-stage-master-secondary-hover: #fcbd9c;
660
+ --wds-color-fill-stage-padding: #18d9c2;
661
+ --wds-color-fill-stage-padding-active: #18d9c2;
662
+ --wds-color-fill-stage-padding-disabled: rgba(0, 6, 36, .3);
663
+ --wds-color-fill-stage-padding-hover: #18d9c2;
664
+ --wds-color-fill-stage-section-primary: #6f56f9;
665
+ --wds-color-fill-stage-section-primary-active: #6f56f9;
666
+ --wds-color-fill-stage-section-primary-disabled: rgba(0, 6, 36, .3);
667
+ --wds-color-fill-stage-section-primary-hover: #6f56f9;
668
+ --wds-color-fill-stage-section-secondary: #d9d2ff;
669
+ --wds-color-fill-stage-section-secondary-active: #d9d2ff;
670
+ --wds-color-fill-stage-section-secondary-disabled: rgba(0, 6, 36, .1);
671
+ --wds-color-fill-stage-section-secondary-hover: #d9d2ff;
544
672
  --wds-color-fill-standard-light-primary: #80b1ff;
545
673
  --wds-color-fill-standard-light-primary-active: #5999ff;
546
674
  --wds-color-fill-standard-light-primary-disabled: rgba(255, 255, 255, .3);
@@ -588,6 +716,18 @@
588
716
  --wds-color-fill-surface-success: #e1f4eb;
589
717
  --wds-color-fill-surface-sunken: #eceff3;
590
718
  --wds-color-fill-surface-warning: #fff0d1;
719
+ --wds-color-fill-transparent-neutral-primary: rgba(134, 138, 165, 0.5000);
720
+ --wds-color-fill-transparent-neutral-primary-active: rgba(134, 138, 165, 0.7000);
721
+ --wds-color-fill-transparent-neutral-primary-disabled: rgba(0, 6, 36, .2);
722
+ --wds-color-fill-transparent-neutral-primary-hover: rgba(134, 138, 165, 0.6000);
723
+ --wds-color-fill-transparent-neutral-secondary: rgba(134, 138, 165, 0.0000);
724
+ --wds-color-fill-transparent-neutral-secondary-active: rgba(134, 138, 165, 0.7000);
725
+ --wds-color-fill-transparent-neutral-secondary-disabled: rgba(68, 72, 95, 0);
726
+ --wds-color-fill-transparent-neutral-secondary-hover: rgba(134, 138, 165, 0.6000);
727
+ --wds-color-fill-transparent-neutral-tertiary: rgba(0, 6, 36, 0);
728
+ --wds-color-fill-transparent-neutral-tertiary-active: rgba(0, 6, 36, .5);
729
+ --wds-color-fill-transparent-neutral-tertiary-disabled: rgba(0, 6, 36, 0);
730
+ --wds-color-fill-transparent-neutral-tertiary-hover: rgba(0, 6, 36, .5);
591
731
  --wds-color-fill-transparent-primary: rgba(68, 72, 95, .5);
592
732
  --wds-color-fill-transparent-primary-active: rgba(68, 72, 95, .7);
593
733
  --wds-color-fill-transparent-primary-disabled: rgba(0, 6, 36, .2);
@@ -596,6 +736,10 @@
596
736
  --wds-color-fill-transparent-secondary-active: rgba(68, 72, 95, .7);
597
737
  --wds-color-fill-transparent-secondary-disabled: rgba(68, 72, 95, 0);
598
738
  --wds-color-fill-transparent-secondary-hover: rgba(68, 72, 95, .6);
739
+ --wds-color-fill-transparent-tertiary: rgba(0, 6, 36, 0);
740
+ --wds-color-fill-transparent-tertiary-active: rgba(0, 6, 36, .5);
741
+ --wds-color-fill-transparent-tertiary-disabled: rgba(0, 6, 36, 0);
742
+ --wds-color-fill-transparent-tertiary-hover: rgba(0, 6, 36, .5);
599
743
  --wds-color-fill-urgent-primary: #fe620f;
600
744
  --wds-color-fill-urgent-primary-active: #df4d00;
601
745
  --wds-color-fill-urgent-primary-disabled: rgba(0, 6, 36, .3);
@@ -627,6 +771,9 @@
627
771
  --wds-color-text-placeholder-light: #868aa5;
628
772
  --wds-color-text-premium: #9a27d5;
629
773
  --wds-color-text-primary: #116dff;
774
+ --wds-color-text-stage-element: #116dff;
775
+ --wds-color-text-stage-master: #fe620f;
776
+ --wds-color-text-stage-section: #6f56f9;
630
777
  --wds-color-text-standard-primary: #000624;
631
778
  --wds-color-text-standard-primary-light: #ffffff;
632
779
  --wds-color-text-standard-secondary: #44485f;
@@ -660,16 +807,25 @@
660
807
  --wds-font-size-heading-4: 18px;
661
808
  --wds-font-size-heading-5: 15px;
662
809
  --wds-font-size-heading-6: 12px;
810
+ --wds-font-weight-body-bold: 700;
663
811
  --wds-font-weight-heading-1: 700;
664
812
  --wds-font-weight-heading-2: 700;
665
813
  --wds-font-weight-heading-3: 700;
666
814
  --wds-font-weight-heading-4: 500;
667
815
  --wds-font-weight-heading-5: 400;
668
816
  --wds-font-weight-heading-6: 400;
817
+ --wds-shadow-fill-primary-modal: rgba(0, 6, 36, .2);
818
+ --wds-shadow-fill-primary-overlay: rgba(0, 6, 36, .1);
819
+ --wds-shadow-fill-primary-raised: rgba(0, 6, 36, .1);
820
+ --wds-shadow-fill-secondary-modal: rgba(0, 6, 36, .1);
821
+ --wds-shadow-fill-secondary-overlay: rgba(0, 6, 36, .05);
822
+ --wds-shadow-fill-secondary-raised: rgba(0, 6, 36, .05);
823
+ --wds-shadow-fill-secondary-toggle: rgba(0, 6, 36, .5);
669
824
  --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
670
825
  --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
671
826
  --wds-shadow-focus-inner-standard: 0 0 0 3px #a8caff inset;
672
827
  --wds-shadow-focus-inner-warning: 0 0 0 3px #ffe2a5 inset;
828
+ --wds-shadow-focus-spread: 3;
673
829
  --wds-shadow-focus-standard: 0 0 0 3px #a8caff;
674
830
  --wds-shadow-focus-warning: 0 0 0 3px #ffe2a5;
675
831
  --wds-shadow-surface-modal: 0 3px 24px rgba(0, 6, 36, .2), 0 8px 8px rgba(0, 6, 36, .1);
@@ -688,4 +844,6 @@
688
844
  --wds-space-padding-vertical-tiny: 12px;
689
845
  --wds-space-padding-vertical-x-tiny: 6px;
690
846
  --wds-space-padding-vertical-xx-tiny: 3px;
847
+ --wds-width-default: 1px;
848
+ --wds-width-default-2: 1px;
691
849
  }