@wix/design-system-tokens 1.228.0 → 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 (22) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/all.css +17 -0
  3. package/all.scss +17 -0
  4. package/all.st.css +34 -0
  5. package/component.st.css +34 -0
  6. package/odeditor/all.css +18 -1
  7. package/odeditor/all.scss +18 -1
  8. package/odeditor/all.st.css +35 -1
  9. package/odeditor/component.st.css +35 -1
  10. package/odeditor-dark/all.css +17 -0
  11. package/odeditor-dark/all.scss +17 -0
  12. package/odeditor-dark/all.st.css +34 -0
  13. package/odeditor-dark/component.st.css +34 -0
  14. package/package.json +2 -2
  15. package/studio/all.css +17 -0
  16. package/studio/all.scss +17 -0
  17. package/studio/all.st.css +34 -0
  18. package/studio/component.st.css +34 -0
  19. package/wixel/all.css +17 -0
  20. package/wixel/all.scss +17 -0
  21. package/wixel/all.st.css +34 -0
  22. package/wixel/component.st.css +34 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## 1.229.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#17058](https://github.com/wix-private/wix-design-systems/pull/17058) [`ae2f816`](https://github.com/wix-private/wix-design-systems/commit/ae2f816ded3bc53b5a2c57907f1bba6146a41c0c) - Add CalendarPanel divider tokens `--wds-calendar-panel-presets-border-width`, `--wds-calendar-panel-presets-border-fill`, `--wds-calendar-panel-footer-border-width` and `--wds-calendar-panel-footer-border-fill`: `1px` of `--wds-color-border-dark-secondary` in every theme except Harmony (odeditor), where the width is `0px` and the fill is transparent.
6
+
7
+ - [#17058](https://github.com/wix-private/wix-design-systems/pull/17058) [`ae2f816`](https://github.com/wix-private/wix-design-systems/commit/ae2f816ded3bc53b5a2c57907f1bba6146a41c0c) - Add `--wds-calendar-day-today-inset-width`, the width of the surface-colored inset ring around today's date in Calendar: `3px` in every theme, `0px` in Harmony (odeditor).
8
+
9
+ - [#17077](https://github.com/wix-private/wix-design-systems/pull/17077) [`a2c8bd4`](https://github.com/wix-private/wix-design-systems/commit/a2c8bd46ec39d09b22e17f1a6dce72f832c5ffd9) - **Visual breaking change:** `--wds-text-button-font-size-tiny` in Harmony (odeditor) changed from `10px` to `12px`, matching the small size.
10
+
11
+ ### Patch Changes
12
+
13
+ - [#17048](https://github.com/wix-private/wix-design-systems/pull/17048) [`9b3198d`](https://github.com/wix-private/wix-design-systems/commit/9b3198d029dc31119db5788930cae0432b3237a1) - Added a `calendar` token group controlling the day fills (hover, today, selected, selected hover, range, range edge), the weekday label color, the gap between days, the grid padding per size, and the border radius of range days. Only Harmony (odeditor) diverges, with dark selected fills, grey hover/range/today fills, a muted weekday label, 2px gaps, tighter padding and fully rounded range days; every other theme keeps its current values.
14
+
1
15
  ## 1.228.0
2
16
 
3
17
  ### Minor Changes
package/all.css CHANGED
@@ -476,6 +476,8 @@
476
476
  --wds-card-header-suffix-align: center;
477
477
  --wds-card-divider-opacity: 1;
478
478
  --wds-card-base-shadow: none;
479
+ --wds-calendar-day-today-inset-width: 3px;
480
+ --wds-calendar-day-range-edge-border-radius: 50%;
479
481
  --wds-button-outline-hover: transparent;
480
482
  --wds-button-icon-offset-tiny: 12px;
481
483
  --wds-button-icon-offset-small: 12px;
@@ -1704,6 +1706,14 @@
1704
1706
  --wds-card-content-padding-medium: var(--wds-space-400);
1705
1707
  --wds-card-content-padding-large: var(--wds-space-600);
1706
1708
  --wds-card-border: var(--wds-border-radius-400);
1709
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-100);
1710
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-100);
1711
+ --wds-calendar-padding-small: var(--wds-space-300);
1712
+ --wds-calendar-padding-medium: var(--wds-space-400);
1713
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-0);
1714
+ --wds-calendar-day-gap: var(--wds-space-0);
1715
+ --wds-calendar-day-fill-range-edge: var(--wds-color-blue-500);
1716
+ --wds-calendar-day-fill-range: var(--wds-color-blue-500);
1707
1717
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1708
1718
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1709
1719
  --wds-button-size-x-tiny: var(--wds-space-300);
@@ -2376,6 +2386,13 @@
2376
2386
  --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2377
2387
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2378
2388
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2389
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-border-dark-secondary);
2390
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-border-dark-secondary);
2391
+ --wds-calendar-weekday-label-color: var(--wds-color-text-standard-primary);
2392
+ --wds-calendar-day-fill-today: var(--wds-color-fill-dark-secondary);
2393
+ --wds-calendar-day-fill-selected-hover: var(--wds-color-fill-standard-primary-hover);
2394
+ --wds-calendar-day-fill-selected: var(--wds-color-fill-standard-primary);
2395
+ --wds-calendar-day-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2379
2396
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2380
2397
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
2381
2398
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
package/all.scss CHANGED
@@ -449,6 +449,8 @@
449
449
  --wds-card-gallery-item-action-button-min-width: 84px;
450
450
  --wds-card-divider-opacity: 1;
451
451
  --wds-card-base-shadow: none;
452
+ --wds-calendar-day-today-inset-width: 3px;
453
+ --wds-calendar-day-range-edge-border-radius: 50%;
452
454
  --wds-button-outline-hover: transparent;
453
455
  --wds-button-icon-offset-tiny: 12px;
454
456
  --wds-button-icon-offset-small: 12px;
@@ -1692,6 +1694,14 @@
1692
1694
  --wds-card-content-padding-medium: var(--wds-space-400);
1693
1695
  --wds-card-content-padding-large: var(--wds-space-600);
1694
1696
  --wds-card-border: var(--wds-border-radius-400);
1697
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-100);
1698
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-100);
1699
+ --wds-calendar-padding-small: var(--wds-space-300);
1700
+ --wds-calendar-padding-medium: var(--wds-space-400);
1701
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-0);
1702
+ --wds-calendar-day-gap: var(--wds-space-0);
1703
+ --wds-calendar-day-fill-range-edge: var(--wds-color-blue-500);
1704
+ --wds-calendar-day-fill-range: var(--wds-color-blue-500);
1695
1705
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1696
1706
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1697
1707
  --wds-button-size-x-tiny: var(--wds-space-300);
@@ -2376,6 +2386,13 @@
2376
2386
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2377
2387
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-medium);
2378
2388
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2389
+ --wds-calendar-weekday-label-color: var(--wds-color-text-standard-primary);
2390
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-border-dark-secondary);
2391
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-border-dark-secondary);
2392
+ --wds-calendar-day-fill-today: var(--wds-color-fill-dark-secondary);
2393
+ --wds-calendar-day-fill-selected-hover: var(--wds-color-fill-standard-primary-hover);
2394
+ --wds-calendar-day-fill-selected: var(--wds-color-fill-standard-primary);
2395
+ --wds-calendar-day-fill-hover: var(--wds-color-fill-standard-tertiary-hover);
2379
2396
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2380
2397
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
2381
2398
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
package/all.st.css CHANGED
@@ -333,6 +333,23 @@
333
333
  @property st-global(--wds-button-text-hover);
334
334
  @property st-global(--wds-button-text-standard-primary);
335
335
  @property st-global(--wds-button-text-standard-primary-hover);
336
+ @property st-global(--wds-calendar-day-fill-hover);
337
+ @property st-global(--wds-calendar-day-fill-range);
338
+ @property st-global(--wds-calendar-day-fill-range-edge);
339
+ @property st-global(--wds-calendar-day-fill-selected);
340
+ @property st-global(--wds-calendar-day-fill-selected-hover);
341
+ @property st-global(--wds-calendar-day-fill-today);
342
+ @property st-global(--wds-calendar-day-gap);
343
+ @property st-global(--wds-calendar-day-range-border-radius);
344
+ @property st-global(--wds-calendar-day-range-edge-border-radius);
345
+ @property st-global(--wds-calendar-day-today-inset-width);
346
+ @property st-global(--wds-calendar-padding-medium);
347
+ @property st-global(--wds-calendar-padding-small);
348
+ @property st-global(--wds-calendar-panel-footer-border-fill);
349
+ @property st-global(--wds-calendar-panel-footer-border-width);
350
+ @property st-global(--wds-calendar-panel-presets-border-fill);
351
+ @property st-global(--wds-calendar-panel-presets-border-width);
352
+ @property st-global(--wds-calendar-weekday-label-color);
336
353
  @property st-global(--wds-card-base-shadow);
337
354
  @property st-global(--wds-card-border);
338
355
  @property st-global(--wds-card-border-radius);
@@ -2963,6 +2980,23 @@
2963
2980
  --wds-button-text-hover: #ffffff;
2964
2981
  --wds-button-text-standard-primary: #000624;
2965
2982
  --wds-button-text-standard-primary-hover: #000624;
2983
+ --wds-calendar-day-fill-hover: #e7f0ff;
2984
+ --wds-calendar-day-fill-range: #e7f0ff;
2985
+ --wds-calendar-day-fill-range-edge: #e7f0ff;
2986
+ --wds-calendar-day-fill-selected: #116dff;
2987
+ --wds-calendar-day-fill-selected-hover: #0f62e6;
2988
+ --wds-calendar-day-fill-today: #eceff3;
2989
+ --wds-calendar-day-gap: 0px;
2990
+ --wds-calendar-day-range-border-radius: 0px;
2991
+ --wds-calendar-day-range-edge-border-radius: 50%;
2992
+ --wds-calendar-day-today-inset-width: 3px;
2993
+ --wds-calendar-padding-medium: 24px;
2994
+ --wds-calendar-padding-small: 18px;
2995
+ --wds-calendar-panel-footer-border-fill: #dfe5eb;
2996
+ --wds-calendar-panel-footer-border-width: 1px;
2997
+ --wds-calendar-panel-presets-border-fill: #dfe5eb;
2998
+ --wds-calendar-panel-presets-border-width: 1px;
2999
+ --wds-calendar-weekday-label-color: #000624;
2966
3000
  --wds-card-base-shadow: none;
2967
3001
  --wds-card-border: 8px;
2968
3002
  --wds-card-border-radius: 8px;
package/component.st.css CHANGED
@@ -294,6 +294,23 @@
294
294
  @property st-global(--wds-button-text-hover);
295
295
  @property st-global(--wds-button-text-standard-primary);
296
296
  @property st-global(--wds-button-text-standard-primary-hover);
297
+ @property st-global(--wds-calendar-day-fill-hover);
298
+ @property st-global(--wds-calendar-day-fill-range);
299
+ @property st-global(--wds-calendar-day-fill-range-edge);
300
+ @property st-global(--wds-calendar-day-fill-selected);
301
+ @property st-global(--wds-calendar-day-fill-selected-hover);
302
+ @property st-global(--wds-calendar-day-fill-today);
303
+ @property st-global(--wds-calendar-day-gap);
304
+ @property st-global(--wds-calendar-day-range-border-radius);
305
+ @property st-global(--wds-calendar-day-range-edge-border-radius);
306
+ @property st-global(--wds-calendar-day-today-inset-width);
307
+ @property st-global(--wds-calendar-padding-medium);
308
+ @property st-global(--wds-calendar-padding-small);
309
+ @property st-global(--wds-calendar-panel-footer-border-fill);
310
+ @property st-global(--wds-calendar-panel-footer-border-width);
311
+ @property st-global(--wds-calendar-panel-presets-border-fill);
312
+ @property st-global(--wds-calendar-panel-presets-border-width);
313
+ @property st-global(--wds-calendar-weekday-label-color);
297
314
  @property st-global(--wds-card-base-shadow);
298
315
  @property st-global(--wds-card-border);
299
316
  @property st-global(--wds-card-border-radius);
@@ -2183,6 +2200,23 @@
2183
2200
  --wds-button-text-hover: #ffffff;
2184
2201
  --wds-button-text-standard-primary: #000624;
2185
2202
  --wds-button-text-standard-primary-hover: #000624;
2203
+ --wds-calendar-day-fill-hover: #e7f0ff;
2204
+ --wds-calendar-day-fill-range: #e7f0ff;
2205
+ --wds-calendar-day-fill-range-edge: #e7f0ff;
2206
+ --wds-calendar-day-fill-selected: #116dff;
2207
+ --wds-calendar-day-fill-selected-hover: #0f62e6;
2208
+ --wds-calendar-day-fill-today: #eceff3;
2209
+ --wds-calendar-day-gap: 0px;
2210
+ --wds-calendar-day-range-border-radius: 0px;
2211
+ --wds-calendar-day-range-edge-border-radius: 50%;
2212
+ --wds-calendar-day-today-inset-width: 3px;
2213
+ --wds-calendar-padding-medium: 24px;
2214
+ --wds-calendar-padding-small: 18px;
2215
+ --wds-calendar-panel-footer-border-fill: #dfe5eb;
2216
+ --wds-calendar-panel-footer-border-width: 1px;
2217
+ --wds-calendar-panel-presets-border-fill: #dfe5eb;
2218
+ --wds-calendar-panel-presets-border-width: 1px;
2219
+ --wds-calendar-weekday-label-color: #000624;
2186
2220
  --wds-card-base-shadow: none;
2187
2221
  --wds-card-border: 8px;
2188
2222
  --wds-card-border-radius: 8px;
package/odeditor/all.css CHANGED
@@ -503,6 +503,7 @@
503
503
  --wds-card-header-suffix-align: flex-start;
504
504
  --wds-card-divider-opacity: 0;
505
505
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
506
+ --wds-calendar-padding-medium: 18px;
506
507
  --wds-button-border-ai-secondary-mask: none;
507
508
  --wds-breadcrumbs-height-medium: 26px;
508
509
  --wds-badge-outline-warning-light-border-color: #c78634;
@@ -1843,6 +1844,21 @@
1843
1844
  --wds-card-content-padding-medium: var(--wds-space-300);
1844
1845
  --wds-card-content-padding-large: var(--wds-space-300);
1845
1846
  --wds-card-border-radius: var(--wds-border-radius-800);
1847
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-none);
1848
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-black-100-transparent-0);
1849
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-none);
1850
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-black-100-transparent-0);
1851
+ --wds-calendar-padding-small: var(--wds-space-300);
1852
+ --wds-calendar-day-today-inset-width: var(--wds-border-width-none);
1853
+ --wds-calendar-day-range-edge-border-radius: var(--wds-border-radius-400);
1854
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-400);
1855
+ --wds-calendar-day-gap: var(--wds-space-50);
1856
+ --wds-calendar-day-fill-today: var(--wds-color-black-550);
1857
+ --wds-calendar-day-fill-selected-hover: var(--wds-color-black-200);
1858
+ --wds-calendar-day-fill-selected: var(--wds-color-black-100);
1859
+ --wds-calendar-day-fill-range-edge: var(--wds-color-white-transparent-0);
1860
+ --wds-calendar-day-fill-range: var(--wds-color-black-700);
1861
+ --wds-calendar-day-fill-hover: var(--wds-color-black-700);
1846
1862
  --wds-button-size-x-tiny: var(--wds-space-475);
1847
1863
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1848
1864
  --wds-button-size-tiny: var(--wds-space-600);
@@ -2119,7 +2135,7 @@
2119
2135
  --wds-thumbnail-border-color-hover: var(--wds-color-border-standard-secondary-hover);
2120
2136
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
2121
2137
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
2122
- --wds-text-button-font-size-tiny: var(--wds-font-size-body-extra-tiny);
2138
+ --wds-text-button-font-size-tiny: var(--wds-font-size-body-tiny);
2123
2139
  --wds-text-button-font-size-small: var(--wds-font-size-body-tiny);
2124
2140
  --wds-text-button-font-size-medium: var(--wds-font-size-body-small);
2125
2141
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -2454,6 +2470,7 @@
2454
2470
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2455
2471
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-tiny);
2456
2472
  --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
2473
+ --wds-calendar-weekday-label-color: var(--wds-color-text-disabled);
2457
2474
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
2458
2475
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
2459
2476
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
package/odeditor/all.scss CHANGED
@@ -473,6 +473,7 @@
473
473
  --wds-card-gallery-item-action-button-min-width: 72px;
474
474
  --wds-card-divider-opacity: 0;
475
475
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
476
+ --wds-calendar-padding-medium: 18px;
476
477
  --wds-button-border-ai-secondary-mask: none;
477
478
  --wds-breakpoint-x-large: 1572px;
478
479
  --wds-breakpoint-small: 490px;
@@ -1831,6 +1832,21 @@
1831
1832
  --wds-card-content-padding-medium: var(--wds-space-300);
1832
1833
  --wds-card-content-padding-large: var(--wds-space-300);
1833
1834
  --wds-card-border-radius: var(--wds-border-radius-800);
1835
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-none);
1836
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-black-100-transparent-0);
1837
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-none);
1838
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-black-100-transparent-0);
1839
+ --wds-calendar-padding-small: var(--wds-space-300);
1840
+ --wds-calendar-day-today-inset-width: var(--wds-border-width-none);
1841
+ --wds-calendar-day-range-edge-border-radius: var(--wds-border-radius-400);
1842
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-400);
1843
+ --wds-calendar-day-gap: var(--wds-space-50);
1844
+ --wds-calendar-day-fill-today: var(--wds-color-black-550);
1845
+ --wds-calendar-day-fill-selected-hover: var(--wds-color-black-200);
1846
+ --wds-calendar-day-fill-selected: var(--wds-color-black-100);
1847
+ --wds-calendar-day-fill-range-edge: var(--wds-color-white-transparent-0);
1848
+ --wds-calendar-day-fill-range: var(--wds-color-black-700);
1849
+ --wds-calendar-day-fill-hover: var(--wds-color-black-700);
1834
1850
  --wds-button-size-x-tiny: var(--wds-space-475);
1835
1851
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1836
1852
  --wds-button-size-tiny: var(--wds-space-600);
@@ -2101,7 +2117,7 @@
2101
2117
  --wds-thumbnail-border-color-hover: var(--wds-color-border-standard-secondary-hover);
2102
2118
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
2103
2119
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
2104
- --wds-text-button-font-size-tiny: var(--wds-font-size-body-extra-tiny);
2120
+ --wds-text-button-font-size-tiny: var(--wds-font-size-body-tiny);
2105
2121
  --wds-text-button-font-size-small: var(--wds-font-size-body-tiny);
2106
2122
  --wds-text-button-font-size-medium: var(--wds-font-size-body-small);
2107
2123
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -2454,6 +2470,7 @@
2454
2470
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2455
2471
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2456
2472
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-tiny);
2473
+ --wds-calendar-weekday-label-color: var(--wds-color-text-disabled);
2457
2474
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
2458
2475
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
2459
2476
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
package/odeditor/all.st.css CHANGED
@@ -327,6 +327,23 @@
327
327
  @property st-global(--wds-button-size-tiny);
328
328
  @property st-global(--wds-button-size-tiny-screen-small);
329
329
  @property st-global(--wds-button-size-x-tiny);
330
+ @property st-global(--wds-calendar-day-fill-hover);
331
+ @property st-global(--wds-calendar-day-fill-range);
332
+ @property st-global(--wds-calendar-day-fill-range-edge);
333
+ @property st-global(--wds-calendar-day-fill-selected);
334
+ @property st-global(--wds-calendar-day-fill-selected-hover);
335
+ @property st-global(--wds-calendar-day-fill-today);
336
+ @property st-global(--wds-calendar-day-gap);
337
+ @property st-global(--wds-calendar-day-range-border-radius);
338
+ @property st-global(--wds-calendar-day-range-edge-border-radius);
339
+ @property st-global(--wds-calendar-day-today-inset-width);
340
+ @property st-global(--wds-calendar-padding-medium);
341
+ @property st-global(--wds-calendar-padding-small);
342
+ @property st-global(--wds-calendar-panel-footer-border-fill);
343
+ @property st-global(--wds-calendar-panel-footer-border-width);
344
+ @property st-global(--wds-calendar-panel-presets-border-fill);
345
+ @property st-global(--wds-calendar-panel-presets-border-width);
346
+ @property st-global(--wds-calendar-weekday-label-color);
330
347
  @property st-global(--wds-card-base-shadow);
331
348
  @property st-global(--wds-card-border-radius);
332
349
  @property st-global(--wds-card-content-padding-large);
@@ -2941,6 +2958,23 @@
2941
2958
  --wds-button-size-tiny: 24px;
2942
2959
  --wds-button-size-tiny-screen-small: 32px;
2943
2960
  --wds-button-size-x-tiny: 18px;
2961
+ --wds-calendar-day-fill-hover: #f0efef;
2962
+ --wds-calendar-day-fill-range: #f0efef;
2963
+ --wds-calendar-day-fill-range-edge: rgba(255, 255, 255, 0);
2964
+ --wds-calendar-day-fill-selected: #151414;
2965
+ --wds-calendar-day-fill-selected-hover: #383838;
2966
+ --wds-calendar-day-fill-today: #dedede;
2967
+ --wds-calendar-day-gap: 2px;
2968
+ --wds-calendar-day-range-border-radius: 8px;
2969
+ --wds-calendar-day-range-edge-border-radius: 8px;
2970
+ --wds-calendar-day-today-inset-width: 0px;
2971
+ --wds-calendar-padding-medium: 18px;
2972
+ --wds-calendar-padding-small: 12px;
2973
+ --wds-calendar-panel-footer-border-fill: rgba(19, 23, 32, 0);
2974
+ --wds-calendar-panel-footer-border-width: 0px;
2975
+ --wds-calendar-panel-presets-border-fill: rgba(19, 23, 32, 0);
2976
+ --wds-calendar-panel-presets-border-width: 0px;
2977
+ --wds-calendar-weekday-label-color: #a8a6a5;
2944
2978
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
2945
2979
  --wds-card-border-radius: 16px;
2946
2980
  --wds-card-content-padding-large: 12px;
@@ -4948,7 +4982,7 @@
4948
4982
  --wds-text-button-font-line-height-tiny: 12px;
4949
4983
  --wds-text-button-font-size-medium: 14px;
4950
4984
  --wds-text-button-font-size-small: 12px;
4951
- --wds-text-button-font-size-tiny: 10px;
4985
+ --wds-text-button-font-size-tiny: 12px;
4952
4986
  --wds-text-button-font-weight-normal: 600;
4953
4987
  --wds-text-button-font-weight-thin: 500;
4954
4988
  --wds-text-button-size-medium: 18px;
package/odeditor/component.st.css CHANGED
@@ -285,6 +285,23 @@
285
285
  @property st-global(--wds-button-size-tiny);
286
286
  @property st-global(--wds-button-size-tiny-screen-small);
287
287
  @property st-global(--wds-button-size-x-tiny);
288
+ @property st-global(--wds-calendar-day-fill-hover);
289
+ @property st-global(--wds-calendar-day-fill-range);
290
+ @property st-global(--wds-calendar-day-fill-range-edge);
291
+ @property st-global(--wds-calendar-day-fill-selected);
292
+ @property st-global(--wds-calendar-day-fill-selected-hover);
293
+ @property st-global(--wds-calendar-day-fill-today);
294
+ @property st-global(--wds-calendar-day-gap);
295
+ @property st-global(--wds-calendar-day-range-border-radius);
296
+ @property st-global(--wds-calendar-day-range-edge-border-radius);
297
+ @property st-global(--wds-calendar-day-today-inset-width);
298
+ @property st-global(--wds-calendar-padding-medium);
299
+ @property st-global(--wds-calendar-padding-small);
300
+ @property st-global(--wds-calendar-panel-footer-border-fill);
301
+ @property st-global(--wds-calendar-panel-footer-border-width);
302
+ @property st-global(--wds-calendar-panel-presets-border-fill);
303
+ @property st-global(--wds-calendar-panel-presets-border-width);
304
+ @property st-global(--wds-calendar-weekday-label-color);
288
305
  @property st-global(--wds-card-base-shadow);
289
306
  @property st-global(--wds-card-border-radius);
290
307
  @property st-global(--wds-card-content-padding-large);
@@ -2147,6 +2164,23 @@
2147
2164
  --wds-button-size-tiny: 24px;
2148
2165
  --wds-button-size-tiny-screen-small: 32px;
2149
2166
  --wds-button-size-x-tiny: 18px;
2167
+ --wds-calendar-day-fill-hover: #f0efef;
2168
+ --wds-calendar-day-fill-range: #f0efef;
2169
+ --wds-calendar-day-fill-range-edge: rgba(255, 255, 255, 0);
2170
+ --wds-calendar-day-fill-selected: #151414;
2171
+ --wds-calendar-day-fill-selected-hover: #383838;
2172
+ --wds-calendar-day-fill-today: #dedede;
2173
+ --wds-calendar-day-gap: 2px;
2174
+ --wds-calendar-day-range-border-radius: 8px;
2175
+ --wds-calendar-day-range-edge-border-radius: 8px;
2176
+ --wds-calendar-day-today-inset-width: 0px;
2177
+ --wds-calendar-padding-medium: 18px;
2178
+ --wds-calendar-padding-small: 12px;
2179
+ --wds-calendar-panel-footer-border-fill: rgba(19, 23, 32, 0);
2180
+ --wds-calendar-panel-footer-border-width: 0px;
2181
+ --wds-calendar-panel-presets-border-fill: rgba(19, 23, 32, 0);
2182
+ --wds-calendar-panel-presets-border-width: 0px;
2183
+ --wds-calendar-weekday-label-color: #a8a6a5;
2150
2184
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
2151
2185
  --wds-card-border-radius: 16px;
2152
2186
  --wds-card-content-padding-large: 12px;
@@ -3446,7 +3480,7 @@
3446
3480
  --wds-text-button-font-line-height-tiny: 12px;
3447
3481
  --wds-text-button-font-size-medium: 14px;
3448
3482
  --wds-text-button-font-size-small: 12px;
3449
- --wds-text-button-font-size-tiny: 10px;
3483
+ --wds-text-button-font-size-tiny: 12px;
3450
3484
  --wds-text-button-font-weight-normal: 600;
3451
3485
  --wds-text-button-font-weight-thin: 500;
3452
3486
  --wds-text-button-size-medium: 18px;
package/odeditor-dark/all.css CHANGED
@@ -517,6 +517,9 @@
517
517
  --wds-card-header-suffix-align: flex-start;
518
518
  --wds-card-divider-opacity: 0;
519
519
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
520
+ --wds-calendar-padding-small: 18px;
521
+ --wds-calendar-day-today-inset-width: 3px;
522
+ --wds-calendar-day-range-edge-border-radius: 50%;
520
523
  --wds-button-border-ai-secondary-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
521
524
  --wds-breadcrumbs-height-medium: 26px;
522
525
  --wds-avatar-group-gap-condensed: -2px;
@@ -1829,6 +1832,13 @@
1829
1832
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1830
1833
  --wds-card-content-padding-medium: var(--wds-space-300);
1831
1834
  --wds-card-content-padding-large: var(--wds-space-300);
1835
+ --wds-calendar-panel-presets-border-width: var(--wds-border-width-100);
1836
+ --wds-calendar-panel-footer-border-width: var(--wds-border-width-100);
1837
+ --wds-calendar-padding-medium: var(--wds-space-600);
1838
+ --wds-calendar-day-range-border-radius: var(--wds-border-radius-0);
1839
+ --wds-calendar-day-gap: var(--wds-space-0);
1840
+ --wds-calendar-day-fill-range-edge: var(--wds-color-blue-500);
1841
+ --wds-calendar-day-fill-range: var(--wds-color-blue-500);
1832
1842
  --wds-button-size-x-tiny: var(--wds-space-475);
1833
1843
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1834
1844
  --wds-button-size-tiny: var(--wds-space-600);
@@ -2425,6 +2435,13 @@
2425
2435
  --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
2426
2436
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2427
2437
  --wds-card-border-radius: var(--wds-border-radius-surface-raised);
2438
+ --wds-calendar-panel-presets-border-fill: var(--wds-color-border-dark-secondary);
2439
+ --wds-calendar-panel-footer-border-fill: var(--wds-color-border-dark-secondary);
2440
+ --wds-calendar-weekday-label-color: var(--wds-color-text-standard-primary);
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);
2428
2445
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
2429
2446
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
2430
2447
  --wds-button-label-fill-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
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;
@@ -1817,6 +1820,13 @@
1817
1820
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1818
1821
  --wds-card-content-padding-medium: var(--wds-space-300);
1819
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);
1820
1830
  --wds-button-size-x-tiny: var(--wds-space-475);
1821
1831
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1822
1832
  --wds-button-size-tiny: var(--wds-space-600);
@@ -2425,6 +2435,13 @@
2425
2435
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2426
2436
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-small);
2427
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);
2428
2445
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
2429
2446
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
2430
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);
@@ -2944,6 +2961,23 @@
2944
2961
  --wds-button-size-tiny: 24px;
2945
2962
  --wds-button-size-tiny-screen-small: 32px;
2946
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;
2947
2981
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
2948
2982
  --wds-card-border-radius: 12px;
2949
2983
  --wds-card-content-padding-large: 12px;
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.228.0",
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": "43a4e67bb308b2b95f2653e11bf3da181b4805f94d23a9e9ac586761"
39
+ "falconPackageHash": "658cb3a3df8d85b7d5c48ab799b40abf026c85243a5df6e990bba66f"
40
40
  }
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;
@@ -1764,6 +1767,13 @@
1764
1767
  --wds-card-content-padding-medium: var(--wds-space-600);
1765
1768
  --wds-card-content-padding-large: var(--wds-space-900);
1766
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);
1767
1777
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1768
1778
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1769
1779
  --wds-button-size-x-tiny: var(--wds-space-475);
@@ -2381,6 +2391,13 @@
2381
2391
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2382
2392
  --wds-card-shadow: var(--wds-shadow-surface-raised);
2383
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);
2384
2401
  --wds-button-text-hover: var(--wds-color-text-primary);
2385
2402
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
2386
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;
@@ -1752,6 +1755,13 @@
1752
1755
  --wds-card-content-padding-medium: var(--wds-space-600);
1753
1756
  --wds-card-content-padding-large: var(--wds-space-900);
1754
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);
1755
1765
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1756
1766
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1757
1767
  --wds-button-size-x-tiny: var(--wds-space-475);
@@ -2381,6 +2391,13 @@
2381
2391
  --wds-card-gallery-item-action-button-line-height: var(--wds-font-line-height-200);
2382
2392
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-small);
2383
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);
2384
2401
  --wds-button-text-hover: var(--wds-color-text-primary);
2385
2402
  --wds-button-outline-hover: var(--wds-color-border-standard-secondary);
2386
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);
@@ -2943,6 +2960,23 @@
2943
2960
  --wds-button-text-hover: #116dff;
2944
2961
  --wds-button-text-standard-primary: #131720;
2945
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;
2946
2980
  --wds-card-base-shadow: none;
2947
2981
  --wds-card-border: 4px;
2948
2982
  --wds-card-border-radius: 4px;
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);
@@ -2155,6 +2172,23 @@
2155
2172
  --wds-button-text-hover: #116dff;
2156
2173
  --wds-button-text-standard-primary: #131720;
2157
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;
2158
2192
  --wds-card-base-shadow: none;
2159
2193
  --wds-card-border: 4px;
2160
2194
  --wds-card-border-radius: 4px;
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;
@@ -1697,6 +1700,13 @@
1697
1700
  --wds-card-content-padding-medium: var(--wds-space-600);
1698
1701
  --wds-card-content-padding-large: var(--wds-space-600);
1699
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);
1700
1710
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1701
1711
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1702
1712
  --wds-button-size-x-tiny: var(--wds-space-500);
@@ -2308,6 +2318,13 @@
2308
2318
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2309
2319
  --wds-card-shadow: var(--wds-shadow-surface-raised);
2310
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);
2311
2328
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2312
2329
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
2313
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;
@@ -1685,6 +1688,13 @@
1685
1688
  --wds-card-content-padding-medium: var(--wds-space-600);
1686
1689
  --wds-card-content-padding-large: var(--wds-space-600);
1687
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);
1688
1698
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1689
1699
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1690
1700
  --wds-button-size-x-tiny: var(--wds-space-500);
@@ -2308,6 +2318,13 @@
2308
2318
  --wds-card-gallery-item-fill: var(--wds-color-fill-standard-secondary);
2309
2319
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-small);
2310
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);
2311
2328
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2312
2329
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
2313
2330
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
package/wixel/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);
@@ -2879,6 +2896,23 @@
2879
2896
  --wds-button-text-hover: #ffffff;
2880
2897
  --wds-button-text-standard-primary: #000624;
2881
2898
  --wds-button-text-standard-primary-hover: #000624;
2899
+ --wds-calendar-day-fill-hover: #f4f6ff;
2900
+ --wds-calendar-day-fill-range: #eef0ff;
2901
+ --wds-calendar-day-fill-range-edge: #eef0ff;
2902
+ --wds-calendar-day-fill-selected: #4a57ff;
2903
+ --wds-calendar-day-fill-selected-hover: #4849f1;
2904
+ --wds-calendar-day-fill-today: #f7f8f8;
2905
+ --wds-calendar-day-gap: 0px;
2906
+ --wds-calendar-day-range-border-radius: 0px;
2907
+ --wds-calendar-day-range-edge-border-radius: 50%;
2908
+ --wds-calendar-day-today-inset-width: 3px;
2909
+ --wds-calendar-padding-medium: 24px;
2910
+ --wds-calendar-padding-small: 18px;
2911
+ --wds-calendar-panel-footer-border-fill: #e2e3ea;
2912
+ --wds-calendar-panel-footer-border-width: 1px;
2913
+ --wds-calendar-panel-presets-border-fill: #e2e3ea;
2914
+ --wds-calendar-panel-presets-border-width: 1px;
2915
+ --wds-calendar-weekday-label-color: #000624;
2882
2916
  --wds-card-base-shadow: none;
2883
2917
  --wds-card-border: 4px;
2884
2918
  --wds-card-border-radius: 12px;
package/wixel/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);
@@ -2121,6 +2138,23 @@
2121
2138
  --wds-button-text-hover: #ffffff;
2122
2139
  --wds-button-text-standard-primary: #000624;
2123
2140
  --wds-button-text-standard-primary-hover: #000624;
2141
+ --wds-calendar-day-fill-hover: #f4f6ff;
2142
+ --wds-calendar-day-fill-range: #eef0ff;
2143
+ --wds-calendar-day-fill-range-edge: #eef0ff;
2144
+ --wds-calendar-day-fill-selected: #4a57ff;
2145
+ --wds-calendar-day-fill-selected-hover: #4849f1;
2146
+ --wds-calendar-day-fill-today: #f7f8f8;
2147
+ --wds-calendar-day-gap: 0px;
2148
+ --wds-calendar-day-range-border-radius: 0px;
2149
+ --wds-calendar-day-range-edge-border-radius: 50%;
2150
+ --wds-calendar-day-today-inset-width: 3px;
2151
+ --wds-calendar-padding-medium: 24px;
2152
+ --wds-calendar-padding-small: 18px;
2153
+ --wds-calendar-panel-footer-border-fill: #e2e3ea;
2154
+ --wds-calendar-panel-footer-border-width: 1px;
2155
+ --wds-calendar-panel-presets-border-fill: #e2e3ea;
2156
+ --wds-calendar-panel-presets-border-width: 1px;
2157
+ --wds-calendar-weekday-label-color: #000624;
2124
2158
  --wds-card-base-shadow: none;
2125
2159
  --wds-card-border: 4px;
2126
2160
  --wds-card-border-radius: 12px;