@wix/design-system-tokens 1.227.1 → 1.229.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 (27) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/all.css +19 -7
  3. package/all.scss +19 -7
  4. package/all.st.css +38 -14
  5. package/component.st.css +34 -14
  6. package/odeditor/all.css +20 -1
  7. package/odeditor/all.scss +20 -1
  8. package/odeditor/all.st.css +39 -1
  9. package/odeditor/component.st.css +35 -1
  10. package/odeditor/semantic.st.css +4 -0
  11. package/odeditor-dark/all.css +19 -0
  12. package/odeditor-dark/all.scss +19 -0
  13. package/odeditor-dark/all.st.css +38 -0
  14. package/odeditor-dark/component.st.css +34 -0
  15. package/odeditor-dark/semantic.st.css +4 -0
  16. package/package.json +2 -2
  17. package/semantic.st.css +4 -0
  18. package/studio/all.css +19 -7
  19. package/studio/all.scss +19 -7
  20. package/studio/all.st.css +38 -14
  21. package/studio/component.st.css +34 -14
  22. package/studio/semantic.st.css +4 -0
  23. package/wixel/all.css +19 -7
  24. package/wixel/all.scss +19 -7
  25. package/wixel/all.st.css +38 -14
  26. package/wixel/component.st.css +34 -14
  27. package/wixel/semantic.st.css +4 -0
package/odeditor-dark/all.scss CHANGED
@@ -487,6 +487,9 @@
487
487
  --wds-card-gallery-item-action-button-min-width: 84px;
488
488
  --wds-card-divider-opacity: 0;
489
489
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
490
+ --wds-calendar-padding-small: 18px;
491
+ --wds-calendar-day-today-inset-width: 3px;
492
+ --wds-calendar-day-range-edge-border-radius: 50%;
490
493
  --wds-button-border-ai-secondary-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
491
494
  --wds-breakpoint-x-large: 1572px;
492
495
  --wds-breakpoint-small: 490px;
@@ -1116,6 +1119,8 @@
1116
1119
  --wds-padding-left-tiny: var(--wds-space-600);
1117
1120
  --wds-padding-left-small: var(--wds-space-600);
1118
1121
  --wds-padding-left-medium: var(--wds-space-1200);
1122
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1123
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1119
1124
  --wds-notification-padding-vertical: var(--wds-space-200);
1120
1125
  --wds-notification-padding-horizontal: var(--wds-space-200);
1121
1126
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1815,6 +1820,13 @@
1815
1820
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1816
1821
  --wds-card-content-padding-medium: var(--wds-space-300);
1817
1822
  --wds-card-content-padding-large: var(--wds-space-300);
1823
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-100);
1824
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-100);
1825
+ --wds-calendar-padding-medium: var(--wds-space-600);
1826
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-0);
1827
+ --wds-calendar-day-gap: var(--wds-space-0);
1828
+ --wds-calendar-day-fill-range-edge: var(--wds-color-blue-500);
1829
+ --wds-calendar-day-fill-range: var(--wds-color-blue-500);
1818
1830
  --wds-button-size-x-tiny: var(--wds-space-475);
1819
1831
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1820
1832
  --wds-button-size-tiny: var(--wds-space-600);
@@ -2423,6 +2435,13 @@
2423
2435
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2424
2436
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-small);
2425
2437
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2438
+ --wds-calendar-weekday-label-color: var(--wds-color-text-standard-primary);
2439
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-border-dark-secondary);
2440
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-border-dark-secondary);
2441
+ --wds-calendar-day-fill-today: var(--wds-color-fill-dark-secondary);
2442
+ --wds-calendar-day-fill-selected-hover: var(--wds-color-fill-standard-primary-hover);
2443
+ --wds-calendar-day-fill-selected: var(--wds-color-fill-standard-primary);
2444
+ --wds-calendar-day-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2426
2445
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
2427
2446
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
2428
2447
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
package/odeditor-dark/all.st.css CHANGED
@@ -330,6 +330,23 @@
330
330
  @property st-global(--wds-button-size-tiny);
331
331
  @property st-global(--wds-button-size-tiny-screen-small);
332
332
  @property st-global(--wds-button-size-x-tiny);
333
+ @property st-global(--wds-calendar-day-fill-hover);
334
+ @property st-global(--wds-calendar-day-fill-range);
335
+ @property st-global(--wds-calendar-day-fill-range-edge);
336
+ @property st-global(--wds-calendar-day-fill-selected);
337
+ @property st-global(--wds-calendar-day-fill-selected-hover);
338
+ @property st-global(--wds-calendar-day-fill-today);
339
+ @property st-global(--wds-calendar-day-gap);
340
+ @property st-global(--wds-calendar-day-range-border-radius);
341
+ @property st-global(--wds-calendar-day-range-edge-border-radius);
342
+ @property st-global(--wds-calendar-day-today-inset-width);
343
+ @property st-global(--wds-calendar-padding-medium);
344
+ @property st-global(--wds-calendar-padding-small);
345
+ @property st-global(--wds-calendar-panel-footer-border-fill);
346
+ @property st-global(--wds-calendar-panel-footer-border-width);
347
+ @property st-global(--wds-calendar-panel-presets-border-fill);
348
+ @property st-global(--wds-calendar-panel-presets-border-width);
349
+ @property st-global(--wds-calendar-weekday-label-color);
333
350
  @property st-global(--wds-card-base-shadow);
334
351
  @property st-global(--wds-card-border-radius);
335
352
  @property st-global(--wds-card-content-padding-large);
@@ -1636,6 +1653,8 @@
1636
1653
  @property st-global(--wds-notification-padding-vertical);
1637
1654
  @property st-global(--wds-number-input-icon-fill);
1638
1655
  @property st-global(--wds-number-input-spacing);
1656
+ @property st-global(--wds-outline-focus-inner);
1657
+ @property st-global(--wds-outline-focus-outer);
1639
1658
  @property st-global(--wds-padding-left-medium);
1640
1659
  @property st-global(--wds-padding-left-small);
1641
1660
  @property st-global(--wds-padding-left-tiny);
@@ -2942,6 +2961,23 @@
2942
2961
  --wds-button-size-tiny: 24px;
2943
2962
  --wds-button-size-tiny-screen-small: 32px;
2944
2963
  --wds-button-size-x-tiny: 18px;
2964
+ --wds-calendar-day-fill-hover: #212328;
2965
+ --wds-calendar-day-fill-range: #212328;
2966
+ --wds-calendar-day-fill-range-edge: #212328;
2967
+ --wds-calendar-day-fill-selected: #82B0FF;
2968
+ --wds-calendar-day-fill-selected-hover: #B1CCFF;
2969
+ --wds-calendar-day-fill-today: #3A3A3B;
2970
+ --wds-calendar-day-gap: 0px;
2971
+ --wds-calendar-day-range-border-radius: 0px;
2972
+ --wds-calendar-day-range-edge-border-radius: 50%;
2973
+ --wds-calendar-day-today-inset-width: 3px;
2974
+ --wds-calendar-padding-medium: 24px;
2975
+ --wds-calendar-padding-small: 18px;
2976
+ --wds-calendar-panel-footer-border-fill: #454544;
2977
+ --wds-calendar-panel-footer-border-width: 1px;
2978
+ --wds-calendar-panel-presets-border-fill: #454544;
2979
+ --wds-calendar-panel-presets-border-width: 1px;
2980
+ --wds-calendar-weekday-label-color: #FFFFFF;
2945
2981
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
2946
2982
  --wds-card-border-radius: 12px;
2947
2983
  --wds-card-content-padding-large: 12px;
@@ -4248,6 +4284,8 @@
4248
4284
  --wds-notification-padding-vertical: 8px;
4249
4285
  --wds-number-input-icon-fill: #D4D3D2;
4250
4286
  --wds-number-input-spacing: 6px;
4287
+ --wds-outline-focus-inner: 1px solid #212122;
4288
+ --wds-outline-focus-outer: 3px solid #82B0FF;
4251
4289
  --wds-padding-left-medium: 48px;
4252
4290
  --wds-padding-left-small: 24px;
4253
4291
  --wds-padding-left-tiny: 24px;
package/odeditor-dark/component.st.css CHANGED
@@ -288,6 +288,23 @@
288
288
  @property st-global(--wds-button-size-tiny);
289
289
  @property st-global(--wds-button-size-tiny-screen-small);
290
290
  @property st-global(--wds-button-size-x-tiny);
291
+ @property st-global(--wds-calendar-day-fill-hover);
292
+ @property st-global(--wds-calendar-day-fill-range);
293
+ @property st-global(--wds-calendar-day-fill-range-edge);
294
+ @property st-global(--wds-calendar-day-fill-selected);
295
+ @property st-global(--wds-calendar-day-fill-selected-hover);
296
+ @property st-global(--wds-calendar-day-fill-today);
297
+ @property st-global(--wds-calendar-day-gap);
298
+ @property st-global(--wds-calendar-day-range-border-radius);
299
+ @property st-global(--wds-calendar-day-range-edge-border-radius);
300
+ @property st-global(--wds-calendar-day-today-inset-width);
301
+ @property st-global(--wds-calendar-padding-medium);
302
+ @property st-global(--wds-calendar-padding-small);
303
+ @property st-global(--wds-calendar-panel-footer-border-fill);
304
+ @property st-global(--wds-calendar-panel-footer-border-width);
305
+ @property st-global(--wds-calendar-panel-presets-border-fill);
306
+ @property st-global(--wds-calendar-panel-presets-border-width);
307
+ @property st-global(--wds-calendar-weekday-label-color);
291
308
  @property st-global(--wds-card-base-shadow);
292
309
  @property st-global(--wds-card-border-radius);
293
310
  @property st-global(--wds-card-content-padding-large);
@@ -2149,6 +2166,23 @@
2149
2166
  --wds-button-size-tiny: 24px;
2150
2167
  --wds-button-size-tiny-screen-small: 32px;
2151
2168
  --wds-button-size-x-tiny: 18px;
2169
+ --wds-calendar-day-fill-hover: #212328;
2170
+ --wds-calendar-day-fill-range: #212328;
2171
+ --wds-calendar-day-fill-range-edge: #212328;
2172
+ --wds-calendar-day-fill-selected: #82B0FF;
2173
+ --wds-calendar-day-fill-selected-hover: #B1CCFF;
2174
+ --wds-calendar-day-fill-today: #3A3A3B;
2175
+ --wds-calendar-day-gap: 0px;
2176
+ --wds-calendar-day-range-border-radius: 0px;
2177
+ --wds-calendar-day-range-edge-border-radius: 50%;
2178
+ --wds-calendar-day-today-inset-width: 3px;
2179
+ --wds-calendar-padding-medium: 24px;
2180
+ --wds-calendar-padding-small: 18px;
2181
+ --wds-calendar-panel-footer-border-fill: #454544;
2182
+ --wds-calendar-panel-footer-border-width: 1px;
2183
+ --wds-calendar-panel-presets-border-fill: #454544;
2184
+ --wds-calendar-panel-presets-border-width: 1px;
2185
+ --wds-calendar-weekday-label-color: #FFFFFF;
2152
2186
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
2153
2187
  --wds-card-border-radius: 12px;
2154
2188
  --wds-card-content-padding-large: 12px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -427,6 +427,8 @@
427
427
  @property st-global(--wds-inner-shadow-y-input);
428
428
  @property st-global(--wds-inner-shadow-y-primary);
429
429
  @property st-global(--wds-inner-shadow-y-secondary);
430
+ @property st-global(--wds-outline-focus-inner);
431
+ @property st-global(--wds-outline-focus-outer);
430
432
  @property st-global(--wds-shadow-blur-input);
431
433
  @property st-global(--wds-shadow-blur-primary-modal);
432
434
  @property st-global(--wds-shadow-blur-primary-overlay);
@@ -937,6 +939,8 @@
937
939
  --wds-inner-shadow-y-input: 1px;
938
940
  --wds-inner-shadow-y-primary: 1px;
939
941
  --wds-inner-shadow-y-secondary: 1px;
942
+ --wds-outline-focus-inner: 1px solid #212122;
943
+ --wds-outline-focus-outer: 3px solid #82B0FF;
940
944
  --wds-shadow-blur-input: 3px;
941
945
  --wds-shadow-blur-primary-modal: 30px;
942
946
  --wds-shadow-blur-primary-overlay: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.227.1",
3
+ "version": "1.229.0",
4
4
  "scripts": {
5
5
  "build": "cp -r tokens/* .",
6
6
  "figma-to-dictionary": "ts-node src/scripts/figma-to-dictionary.ts",
@@ -36,5 +36,5 @@
36
36
  "author": "augustinasv@wix.com",
37
37
  "description": "Design system tokens",
38
38
  "packageManager": "yarn@3.5.0",
39
- "falconPackageHash": "aca2cb779647d67bfec25133768a81ecc25e1b2bcb04a3bd0c998390"
39
+ "falconPackageHash": "658cb3a3df8d85b7d5c48ab799b40abf026c85243a5df6e990bba66f"
40
40
  }
package/semantic.st.css CHANGED
@@ -419,6 +419,8 @@
419
419
  @property st-global(--wds-inner-shadow-y-input);
420
420
  @property st-global(--wds-inner-shadow-y-primary);
421
421
  @property st-global(--wds-inner-shadow-y-secondary);
422
+ @property st-global(--wds-outline-focus-inner);
423
+ @property st-global(--wds-outline-focus-outer);
422
424
  @property st-global(--wds-shadow-blur-input);
423
425
  @property st-global(--wds-shadow-blur-primary-modal);
424
426
  @property st-global(--wds-shadow-blur-primary-overlay);
@@ -921,6 +923,8 @@
921
923
  --wds-inner-shadow-y-input: 0;
922
924
  --wds-inner-shadow-y-primary: 0;
923
925
  --wds-inner-shadow-y-secondary: 0;
926
+ --wds-outline-focus-inner: 1px solid #ffffff;
927
+ --wds-outline-focus-outer: 3px solid #116dff;
924
928
  --wds-shadow-blur-input: 0px;
925
929
  --wds-shadow-blur-primary-modal: 24px;
926
930
  --wds-shadow-blur-primary-overlay: 18px;
package/studio/all.css CHANGED
@@ -520,6 +520,9 @@
520
520
  --wds-card-header-suffix-align: center;
521
521
  --wds-card-divider-opacity: 1;
522
522
  --wds-card-base-shadow: none;
523
+ --wds-calendar-padding-small: 18px;
524
+ --wds-calendar-day-today-inset-width: 3px;
525
+ --wds-calendar-day-range-edge-border-radius: 50%;
523
526
  --wds-button-icon-offset-tiny: 12px;
524
527
  --wds-button-icon-offset-small: 12px;
525
528
  --wds-button-icon-offset-medium: 18px;
@@ -550,6 +553,8 @@
550
553
  --wds-accordion-inner-content-shadow: none;
551
554
  --wds-width-default-2: var(--wds-border-width-100);
552
555
  --wds-width-default: var(--wds-border-width-100);
556
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
557
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
553
558
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
554
559
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-0);
555
560
  --wds-inner-shadow-y-input: var(--wds-shadow-y-0);
@@ -1608,13 +1613,6 @@
1608
1613
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1609
1614
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1610
1615
  --wds-google-preview-surface-fill: var(--wds-color-white);
1611
- --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1612
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1613
- --wds-gallery-item-padding-right-small: var(--wds-space-475);
1614
- --wds-gallery-item-padding-right-medium: var(--wds-space-600);
1615
- --wds-gallery-item-padding-left-small: var(--wds-space-300);
1616
- --wds-gallery-item-padding-left-medium: var(--wds-space-475);
1617
- --wds-gallery-item-border: var(--wds-border-radius-200);
1618
1616
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1619
1617
  --wds-form-field-label-gap-small: var(--wds-space-200);
1620
1618
  --wds-form-field-label-font-weight: var(--wds-font-weight-regular);
@@ -1769,6 +1767,13 @@
1769
1767
  --wds-card-content-padding-medium: var(--wds-space-600);
1770
1768
  --wds-card-content-padding-large: var(--wds-space-900);
1771
1769
  --wds-card-border: var(--wds-border-radius-200);
1770
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-100);
1771
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-100);
1772
+ --wds-calendar-padding-medium: var(--wds-space-600);
1773
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-0);
1774
+ --wds-calendar-day-gap: var(--wds-space-0);
1775
+ --wds-calendar-day-fill-range-edge: var(--wds-color-blue-500);
1776
+ --wds-calendar-day-fill-range: var(--wds-color-blue-500);
1772
1777
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1773
1778
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1774
1779
  --wds-button-size-x-tiny: var(--wds-space-475);
@@ -2386,6 +2391,13 @@
2386
2391
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2387
2392
  --wds-card-shadow: var(--wds-shadow-surface-raised);
2388
2393
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2394
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-border-dark-secondary);
2395
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-border-dark-secondary);
2396
+ --wds-calendar-weekday-label-color: var(--wds-color-text-standard-primary);
2397
+ --wds-calendar-day-fill-today: var(--wds-color-fill-dark-secondary);
2398
+ --wds-calendar-day-fill-selected-hover: var(--wds-color-fill-standard-primary-hover);
2399
+ --wds-calendar-day-fill-selected: var(--wds-color-fill-standard-primary);
2400
+ --wds-calendar-day-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2389
2401
  --wds-button-text-hover: var(--wds-color-text-primary);
2390
2402
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
2391
2403
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
package/studio/all.scss CHANGED
@@ -493,6 +493,9 @@
493
493
  --wds-card-gallery-item-action-button-min-width: 84px;
494
494
  --wds-card-divider-opacity: 1;
495
495
  --wds-card-base-shadow: none;
496
+ --wds-calendar-padding-small: 18px;
497
+ --wds-calendar-day-today-inset-width: 3px;
498
+ --wds-calendar-day-range-edge-border-radius: 50%;
496
499
  --wds-button-icon-offset-tiny: 12px;
497
500
  --wds-button-icon-offset-small: 12px;
498
501
  --wds-button-icon-offset-medium: 18px;
@@ -1091,6 +1094,8 @@
1091
1094
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-bold);
1092
1095
  --wds-page-header-back-button-offset: var(--wds-space-0);
1093
1096
  --wds-page-header-back-button-gap: var(--wds-space-200);
1097
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1098
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1094
1099
  --wds-notification-padding-vertical: var(--wds-space-200);
1095
1100
  --wds-notification-padding-horizontal: var(--wds-space-200);
1096
1101
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1298,13 +1303,6 @@
1298
1303
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1299
1304
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1300
1305
  --wds-google-preview-surface-fill: var(--wds-color-white);
1301
- --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1302
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1303
- --wds-gallery-item-padding-right-small: var(--wds-space-475);
1304
- --wds-gallery-item-padding-right-medium: var(--wds-space-600);
1305
- --wds-gallery-item-padding-left-small: var(--wds-space-300);
1306
- --wds-gallery-item-padding-left-medium: var(--wds-space-475);
1307
- --wds-gallery-item-border: var(--wds-border-radius-200);
1308
1306
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1309
1307
  --wds-form-field-label-gap-small: var(--wds-space-200);
1310
1308
  --wds-form-field-label-font-weight: var(--wds-font-weight-regular);
@@ -1757,6 +1755,13 @@
1757
1755
  --wds-card-content-padding-medium: var(--wds-space-600);
1758
1756
  --wds-card-content-padding-large: var(--wds-space-900);
1759
1757
  --wds-card-border: var(--wds-border-radius-200);
1758
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-100);
1759
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-100);
1760
+ --wds-calendar-padding-medium: var(--wds-space-600);
1761
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-0);
1762
+ --wds-calendar-day-gap: var(--wds-space-0);
1763
+ --wds-calendar-day-fill-range-edge: var(--wds-color-blue-500);
1764
+ --wds-calendar-day-fill-range: var(--wds-color-blue-500);
1760
1765
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1761
1766
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1762
1767
  --wds-button-size-x-tiny: var(--wds-space-475);
@@ -2386,6 +2391,13 @@
2386
2391
  --wds-card-gallery-item-action-button-line-height: var(--wds-font-line-height-200);
2387
2392
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-small);
2388
2393
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2394
+ --wds-calendar-weekday-label-color: var(--wds-color-text-standard-primary);
2395
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-border-dark-secondary);
2396
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-border-dark-secondary);
2397
+ --wds-calendar-day-fill-today: var(--wds-color-fill-dark-secondary);
2398
+ --wds-calendar-day-fill-selected-hover: var(--wds-color-fill-standard-primary-hover);
2399
+ --wds-calendar-day-fill-selected: var(--wds-color-fill-standard-primary);
2400
+ --wds-calendar-day-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2389
2401
  --wds-button-text-hover: var(--wds-color-text-primary);
2390
2402
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
2391
2403
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
package/studio/all.st.css CHANGED
@@ -328,6 +328,23 @@
328
328
  @property st-global(--wds-button-text-hover);
329
329
  @property st-global(--wds-button-text-standard-primary);
330
330
  @property st-global(--wds-button-text-standard-primary-hover);
331
+ @property st-global(--wds-calendar-day-fill-hover);
332
+ @property st-global(--wds-calendar-day-fill-range);
333
+ @property st-global(--wds-calendar-day-fill-range-edge);
334
+ @property st-global(--wds-calendar-day-fill-selected);
335
+ @property st-global(--wds-calendar-day-fill-selected-hover);
336
+ @property st-global(--wds-calendar-day-fill-today);
337
+ @property st-global(--wds-calendar-day-gap);
338
+ @property st-global(--wds-calendar-day-range-border-radius);
339
+ @property st-global(--wds-calendar-day-range-edge-border-radius);
340
+ @property st-global(--wds-calendar-day-today-inset-width);
341
+ @property st-global(--wds-calendar-padding-medium);
342
+ @property st-global(--wds-calendar-padding-small);
343
+ @property st-global(--wds-calendar-panel-footer-border-fill);
344
+ @property st-global(--wds-calendar-panel-footer-border-width);
345
+ @property st-global(--wds-calendar-panel-presets-border-fill);
346
+ @property st-global(--wds-calendar-panel-presets-border-width);
347
+ @property st-global(--wds-calendar-weekday-label-color);
331
348
  @property st-global(--wds-card-base-shadow);
332
349
  @property st-global(--wds-card-border);
333
350
  @property st-global(--wds-card-border-radius);
@@ -1159,13 +1176,6 @@
1159
1176
  @property st-global(--wds-form-field-label-line-height-small);
1160
1177
  @property st-global(--wds-form-field-label-line-height-tiny);
1161
1178
  @property st-global(--wds-form-field-label-readonly);
1162
- @property st-global(--wds-gallery-item-border);
1163
- @property st-global(--wds-gallery-item-padding-left-medium);
1164
- @property st-global(--wds-gallery-item-padding-left-small);
1165
- @property st-global(--wds-gallery-item-padding-right-medium);
1166
- @property st-global(--wds-gallery-item-padding-right-small);
1167
- @property st-global(--wds-gallery-item-padding-vertical-medium);
1168
- @property st-global(--wds-gallery-item-padding-vertical-small);
1169
1179
  @property st-global(--wds-google-preview-favicon-background-fill);
1170
1180
  @property st-global(--wds-google-preview-favicon-border-fill);
1171
1181
  @property st-global(--wds-google-preview-site-name-fill);
@@ -1661,6 +1671,8 @@
1661
1671
  @property st-global(--wds-notification-padding-horizontal);
1662
1672
  @property st-global(--wds-notification-padding-vertical);
1663
1673
  @property st-global(--wds-number-input-icon-fill);
1674
+ @property st-global(--wds-outline-focus-inner);
1675
+ @property st-global(--wds-outline-focus-outer);
1664
1676
  @property st-global(--wds-page-header-back-button-gap);
1665
1677
  @property st-global(--wds-page-header-back-button-offset);
1666
1678
  @property st-global(--wds-page-header-breadcrumbs-color);
@@ -2948,6 +2960,23 @@
2948
2960
  --wds-button-text-hover: #116dff;
2949
2961
  --wds-button-text-standard-primary: #131720;
2950
2962
  --wds-button-text-standard-primary-hover: #131720;
2963
+ --wds-calendar-day-fill-hover: #f7f8f8;
2964
+ --wds-calendar-day-fill-range: #ebf2ff;
2965
+ --wds-calendar-day-fill-range-edge: #ebf2ff;
2966
+ --wds-calendar-day-fill-selected: #116dff;
2967
+ --wds-calendar-day-fill-selected-hover: #0f62e6;
2968
+ --wds-calendar-day-fill-today: #f7f8f8;
2969
+ --wds-calendar-day-gap: 0px;
2970
+ --wds-calendar-day-range-border-radius: 0px;
2971
+ --wds-calendar-day-range-edge-border-radius: 50%;
2972
+ --wds-calendar-day-today-inset-width: 3px;
2973
+ --wds-calendar-padding-medium: 24px;
2974
+ --wds-calendar-padding-small: 18px;
2975
+ --wds-calendar-panel-footer-border-fill: #e2e3ea;
2976
+ --wds-calendar-panel-footer-border-width: 1px;
2977
+ --wds-calendar-panel-presets-border-fill: #e2e3ea;
2978
+ --wds-calendar-panel-presets-border-width: 1px;
2979
+ --wds-calendar-weekday-label-color: #131720;
2951
2980
  --wds-card-base-shadow: none;
2952
2981
  --wds-card-border: 4px;
2953
2982
  --wds-card-border-radius: 4px;
@@ -3779,13 +3808,6 @@
3779
3808
  --wds-form-field-label-line-height-small: 16px;
3780
3809
  --wds-form-field-label-line-height-tiny: 16px;
3781
3810
  --wds-form-field-label-readonly: #131720;
3782
- --wds-gallery-item-border: 4px;
3783
- --wds-gallery-item-padding-left-medium: 18px;
3784
- --wds-gallery-item-padding-left-small: 12px;
3785
- --wds-gallery-item-padding-right-medium: 24px;
3786
- --wds-gallery-item-padding-right-small: 18px;
3787
- --wds-gallery-item-padding-vertical-medium: 18px;
3788
- --wds-gallery-item-padding-vertical-small: 12px;
3789
3811
  --wds-google-preview-favicon-background-fill: #F1F3F4;
3790
3812
  --wds-google-preview-favicon-border-fill: #E6E6E6;
3791
3813
  --wds-google-preview-site-name-fill: #202124;
@@ -4281,6 +4303,8 @@
4281
4303
  --wds-notification-padding-horizontal: 8px;
4282
4304
  --wds-notification-padding-vertical: 8px;
4283
4305
  --wds-number-input-icon-fill: #42454c;
4306
+ --wds-outline-focus-inner: 1px solid #ffffff;
4307
+ --wds-outline-focus-outer: 3px solid #116dff;
4284
4308
  --wds-page-header-back-button-gap: 8px;
4285
4309
  --wds-page-header-back-button-offset: 0px;
4286
4310
  --wds-page-header-breadcrumbs-color: #131720;
package/studio/component.st.css CHANGED
@@ -289,6 +289,23 @@
289
289
  @property st-global(--wds-button-text-hover);
290
290
  @property st-global(--wds-button-text-standard-primary);
291
291
  @property st-global(--wds-button-text-standard-primary-hover);
292
+ @property st-global(--wds-calendar-day-fill-hover);
293
+ @property st-global(--wds-calendar-day-fill-range);
294
+ @property st-global(--wds-calendar-day-fill-range-edge);
295
+ @property st-global(--wds-calendar-day-fill-selected);
296
+ @property st-global(--wds-calendar-day-fill-selected-hover);
297
+ @property st-global(--wds-calendar-day-fill-today);
298
+ @property st-global(--wds-calendar-day-gap);
299
+ @property st-global(--wds-calendar-day-range-border-radius);
300
+ @property st-global(--wds-calendar-day-range-edge-border-radius);
301
+ @property st-global(--wds-calendar-day-today-inset-width);
302
+ @property st-global(--wds-calendar-padding-medium);
303
+ @property st-global(--wds-calendar-padding-small);
304
+ @property st-global(--wds-calendar-panel-footer-border-fill);
305
+ @property st-global(--wds-calendar-panel-footer-border-width);
306
+ @property st-global(--wds-calendar-panel-presets-border-fill);
307
+ @property st-global(--wds-calendar-panel-presets-border-width);
308
+ @property st-global(--wds-calendar-weekday-label-color);
292
309
  @property st-global(--wds-card-base-shadow);
293
310
  @property st-global(--wds-card-border);
294
311
  @property st-global(--wds-card-border-radius);
@@ -593,13 +610,6 @@
593
610
  @property st-global(--wds-form-field-label-line-height-small);
594
611
  @property st-global(--wds-form-field-label-line-height-tiny);
595
612
  @property st-global(--wds-form-field-label-readonly);
596
- @property st-global(--wds-gallery-item-border);
597
- @property st-global(--wds-gallery-item-padding-left-medium);
598
- @property st-global(--wds-gallery-item-padding-left-small);
599
- @property st-global(--wds-gallery-item-padding-right-medium);
600
- @property st-global(--wds-gallery-item-padding-right-small);
601
- @property st-global(--wds-gallery-item-padding-vertical-medium);
602
- @property st-global(--wds-gallery-item-padding-vertical-small);
603
613
  @property st-global(--wds-google-preview-favicon-background-fill);
604
614
  @property st-global(--wds-google-preview-favicon-border-fill);
605
615
  @property st-global(--wds-google-preview-site-name-fill);
@@ -2162,6 +2172,23 @@
2162
2172
  --wds-button-text-hover: #116dff;
2163
2173
  --wds-button-text-standard-primary: #131720;
2164
2174
  --wds-button-text-standard-primary-hover: #131720;
2175
+ --wds-calendar-day-fill-hover: #f7f8f8;
2176
+ --wds-calendar-day-fill-range: #ebf2ff;
2177
+ --wds-calendar-day-fill-range-edge: #ebf2ff;
2178
+ --wds-calendar-day-fill-selected: #116dff;
2179
+ --wds-calendar-day-fill-selected-hover: #0f62e6;
2180
+ --wds-calendar-day-fill-today: #f7f8f8;
2181
+ --wds-calendar-day-gap: 0px;
2182
+ --wds-calendar-day-range-border-radius: 0px;
2183
+ --wds-calendar-day-range-edge-border-radius: 50%;
2184
+ --wds-calendar-day-today-inset-width: 3px;
2185
+ --wds-calendar-padding-medium: 24px;
2186
+ --wds-calendar-padding-small: 18px;
2187
+ --wds-calendar-panel-footer-border-fill: #e2e3ea;
2188
+ --wds-calendar-panel-footer-border-width: 1px;
2189
+ --wds-calendar-panel-presets-border-fill: #e2e3ea;
2190
+ --wds-calendar-panel-presets-border-width: 1px;
2191
+ --wds-calendar-weekday-label-color: #131720;
2165
2192
  --wds-card-base-shadow: none;
2166
2193
  --wds-card-border: 4px;
2167
2194
  --wds-card-border-radius: 4px;
@@ -2466,13 +2493,6 @@
2466
2493
  --wds-form-field-label-line-height-small: 16px;
2467
2494
  --wds-form-field-label-line-height-tiny: 16px;
2468
2495
  --wds-form-field-label-readonly: #131720;
2469
- --wds-gallery-item-border: 4px;
2470
- --wds-gallery-item-padding-left-medium: 18px;
2471
- --wds-gallery-item-padding-left-small: 12px;
2472
- --wds-gallery-item-padding-right-medium: 24px;
2473
- --wds-gallery-item-padding-right-small: 18px;
2474
- --wds-gallery-item-padding-vertical-medium: 18px;
2475
- --wds-gallery-item-padding-vertical-small: 12px;
2476
2496
  --wds-google-preview-favicon-background-fill: #F1F3F4;
2477
2497
  --wds-google-preview-favicon-border-fill: #E6E6E6;
2478
2498
  --wds-google-preview-site-name-fill: #202124;
package/studio/semantic.st.css CHANGED
@@ -427,6 +427,8 @@
427
427
  @property st-global(--wds-inner-shadow-y-input);
428
428
  @property st-global(--wds-inner-shadow-y-primary);
429
429
  @property st-global(--wds-inner-shadow-y-secondary);
430
+ @property st-global(--wds-outline-focus-inner);
431
+ @property st-global(--wds-outline-focus-outer);
430
432
  @property st-global(--wds-shadow-blur-input);
431
433
  @property st-global(--wds-shadow-blur-primary-modal);
432
434
  @property st-global(--wds-shadow-blur-primary-overlay);
@@ -937,6 +939,8 @@
937
939
  --wds-inner-shadow-y-input: 0px;
938
940
  --wds-inner-shadow-y-primary: 0px;
939
941
  --wds-inner-shadow-y-secondary: 0px;
942
+ --wds-outline-focus-inner: 1px solid #ffffff;
943
+ --wds-outline-focus-outer: 3px solid #116dff;
940
944
  --wds-shadow-blur-input: 0px;
941
945
  --wds-shadow-blur-primary-modal: 18px;
942
946
  --wds-shadow-blur-primary-overlay: 12px;
package/wixel/all.css CHANGED
@@ -502,6 +502,9 @@
502
502
  --wds-card-header-suffix-align: center;
503
503
  --wds-card-divider-opacity: 1;
504
504
  --wds-card-base-shadow: none;
505
+ --wds-calendar-padding-small: 18px;
506
+ --wds-calendar-day-today-inset-width: 3px;
507
+ --wds-calendar-day-range-edge-border-radius: 50%;
505
508
  --wds-button-outline-hover: transparent;
506
509
  --wds-button-icon-offset-tiny: 12px;
507
510
  --wds-button-icon-offset-small: 12px;
@@ -530,6 +533,8 @@
530
533
  --wds-angle-input-knob-border: 2px;
531
534
  --wds-width-default-2: var(--wds-border-width-none);
532
535
  --wds-width-default: var(--wds-border-width-none);
536
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
537
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
533
538
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
534
539
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-0);
535
540
  --wds-inner-shadow-y-input: var(--wds-shadow-y-0);
@@ -1544,13 +1549,6 @@
1544
1549
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1545
1550
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1546
1551
  --wds-google-preview-surface-fill: var(--wds-color-white);
1547
- --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1548
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1549
- --wds-gallery-item-padding-right-small: var(--wds-space-475);
1550
- --wds-gallery-item-padding-right-medium: var(--wds-space-600);
1551
- --wds-gallery-item-padding-left-small: var(--wds-space-300);
1552
- --wds-gallery-item-padding-left-medium: var(--wds-space-475);
1553
- --wds-gallery-item-border: var(--wds-border-radius-200);
1554
1552
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1555
1553
  --wds-form-field-label-gap-small: var(--wds-space-200);
1556
1554
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
@@ -1702,6 +1700,13 @@
1702
1700
  --wds-card-content-padding-medium: var(--wds-space-600);
1703
1701
  --wds-card-content-padding-large: var(--wds-space-600);
1704
1702
  --wds-card-border: var(--wds-border-radius-200);
1703
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-100);
1704
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-100);
1705
+ --wds-calendar-padding-medium: var(--wds-space-600);
1706
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-0);
1707
+ --wds-calendar-day-gap: var(--wds-space-0);
1708
+ --wds-calendar-day-fill-range-edge: var(--wds-color-blue-500);
1709
+ --wds-calendar-day-fill-range: var(--wds-color-blue-500);
1705
1710
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1706
1711
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1707
1712
  --wds-button-size-x-tiny: var(--wds-space-500);
@@ -2313,6 +2318,13 @@
2313
2318
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2314
2319
  --wds-card-shadow: var(--wds-shadow-surface-raised);
2315
2320
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2321
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-border-dark-secondary);
2322
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-border-dark-secondary);
2323
+ --wds-calendar-weekday-label-color: var(--wds-color-text-standard-primary);
2324
+ --wds-calendar-day-fill-today: var(--wds-color-fill-dark-secondary);
2325
+ --wds-calendar-day-fill-selected-hover: var(--wds-color-fill-standard-primary-hover);
2326
+ --wds-calendar-day-fill-selected: var(--wds-color-fill-standard-primary);
2327
+ --wds-calendar-day-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2316
2328
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2317
2329
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
2318
2330
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
package/wixel/all.scss CHANGED
@@ -475,6 +475,9 @@
475
475
  --wds-card-gallery-item-action-button-min-width: 84px;
476
476
  --wds-card-divider-opacity: 1;
477
477
  --wds-card-base-shadow: none;
478
+ --wds-calendar-padding-small: 18px;
479
+ --wds-calendar-day-today-inset-width: 3px;
480
+ --wds-calendar-day-range-edge-border-radius: 50%;
478
481
  --wds-button-outline-hover: transparent;
479
482
  --wds-button-icon-offset-tiny: 12px;
480
483
  --wds-button-icon-offset-small: 12px;
@@ -1049,6 +1052,8 @@
1049
1052
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-bold);
1050
1053
  --wds-page-header-back-button-offset: var(--wds-space-0);
1051
1054
  --wds-page-header-back-button-gap: var(--wds-space-200);
1055
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1056
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1052
1057
  --wds-notification-padding-vertical: var(--wds-space-200);
1053
1058
  --wds-notification-padding-horizontal: var(--wds-space-200);
1054
1059
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1235,13 +1240,6 @@
1235
1240
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1236
1241
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1237
1242
  --wds-google-preview-surface-fill: var(--wds-color-white);
1238
- --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1239
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1240
- --wds-gallery-item-padding-right-small: var(--wds-space-475);
1241
- --wds-gallery-item-padding-right-medium: var(--wds-space-600);
1242
- --wds-gallery-item-padding-left-small: var(--wds-space-300);
1243
- --wds-gallery-item-padding-left-medium: var(--wds-space-475);
1244
- --wds-gallery-item-border: var(--wds-border-radius-200);
1245
1243
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1246
1244
  --wds-form-field-label-gap-small: var(--wds-space-200);
1247
1245
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
@@ -1690,6 +1688,13 @@
1690
1688
  --wds-card-content-padding-medium: var(--wds-space-600);
1691
1689
  --wds-card-content-padding-large: var(--wds-space-600);
1692
1690
  --wds-card-border: var(--wds-border-radius-200);
1691
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-100);
1692
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-100);
1693
+ --wds-calendar-padding-medium: var(--wds-space-600);
1694
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-0);
1695
+ --wds-calendar-day-gap: var(--wds-space-0);
1696
+ --wds-calendar-day-fill-range-edge: var(--wds-color-blue-500);
1697
+ --wds-calendar-day-fill-range: var(--wds-color-blue-500);
1693
1698
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1694
1699
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1695
1700
  --wds-button-size-x-tiny: var(--wds-space-500);
@@ -2313,6 +2318,13 @@
2313
2318
  --wds-card-gallery-item-fill: var(--wds-color-fill-standard-secondary);
2314
2319
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-small);
2315
2320
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2321
+ --wds-calendar-weekday-label-color: var(--wds-color-text-standard-primary);
2322
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-border-dark-secondary);
2323
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-border-dark-secondary);
2324
+ --wds-calendar-day-fill-today: var(--wds-color-fill-dark-secondary);
2325
+ --wds-calendar-day-fill-selected-hover: var(--wds-color-fill-standard-primary-hover);
2326
+ --wds-calendar-day-fill-selected: var(--wds-color-fill-standard-primary);
2327
+ --wds-calendar-day-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2316
2328
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2317
2329
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
2318
2330
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);