@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/CHANGELOG.md CHANGED
@@ -1,3 +1,23 @@
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
+
15
+ ## 1.228.0
16
+
17
+ ### Minor Changes
18
+
19
+ - [#17011](https://github.com/wix-private/wix-design-systems/pull/17011) [`8c5bb66`](https://github.com/wix-private/wix-design-systems/commit/8c5bb66859da8ad1955e98a78adc5f717f56089d) - Add outline-shaped focus-ring tokens to every theme: `--wds-outline-focus-outer` (`3px solid` blue.100 — the focus ring) and `--wds-outline-focus-inner` (`1px solid` white — the surface-colored gap band between the element and the ring; the dark surface color in Studio 2.0 dark). The existing `--wds-shadow-focus-*` tokens are unchanged and still emitted.
20
+
1
21
  ## 1.227.1
2
22
 
3
23
  ## 1.227.0
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;
@@ -506,6 +508,8 @@
506
508
  --wds-angle-input-knob-border: 2px;
507
509
  --wds-width-default-2: var(--wds-border-width-100);
508
510
  --wds-width-default: var(--wds-border-width-100);
511
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
512
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
509
513
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
510
514
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-0);
511
515
  --wds-inner-shadow-y-input: var(--wds-shadow-y-0);
@@ -1559,13 +1563,6 @@
1559
1563
  --wds-image-border-radius-none: var(--wds-border-radius-0);
1560
1564
  --wds-image-border-radius-default: var(--wds-border-radius-400);
1561
1565
  --wds-google-preview-surface-fill: var(--wds-color-white);
1562
- --wds-gallery-item-padding-vertical-small: var(--wds-space-200);
1563
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-300);
1564
- --wds-gallery-item-padding-right-small: var(--wds-space-300);
1565
- --wds-gallery-item-padding-right-medium: var(--wds-space-400);
1566
- --wds-gallery-item-padding-left-small: var(--wds-space-200);
1567
- --wds-gallery-item-padding-left-medium: var(--wds-space-300);
1568
- --wds-gallery-item-border: var(--wds-border-radius-400);
1569
1566
  --wds-form-field-label-gap-tiny: var(--wds-space-100);
1570
1567
  --wds-form-field-label-gap-small: var(--wds-space-150);
1571
1568
  --wds-form-field-label-font-weight: var(--wds-font-weight-regular);
@@ -1709,6 +1706,14 @@
1709
1706
  --wds-card-content-padding-medium: var(--wds-space-400);
1710
1707
  --wds-card-content-padding-large: var(--wds-space-600);
1711
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);
1712
1717
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1713
1718
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1714
1719
  --wds-button-size-x-tiny: var(--wds-space-300);
@@ -2381,6 +2386,13 @@
2381
2386
  --wds-card-subtitle-font-size: var(--wds-font-size-body-medium);
2382
2387
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2383
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);
2384
2396
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2385
2397
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
2386
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;
@@ -1032,6 +1034,8 @@
1032
1034
  --wds-page-header-padding-bottom-with-tail: var(--wds-space-200);
1033
1035
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
1034
1036
  --wds-page-header-back-button-offset: var(--wds-space-0);
1037
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1038
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1035
1039
  --wds-notification-padding-vertical: var(--wds-space-150);
1036
1040
  --wds-notification-padding-horizontal: var(--wds-space-200);
1037
1041
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1217,13 +1221,6 @@
1217
1221
  --wds-image-border-radius-none: var(--wds-border-radius-0);
1218
1222
  --wds-image-border-radius-default: var(--wds-border-radius-400);
1219
1223
  --wds-google-preview-surface-fill: var(--wds-color-white);
1220
- --wds-gallery-item-padding-vertical-small: var(--wds-space-200);
1221
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-300);
1222
- --wds-gallery-item-padding-right-small: var(--wds-space-300);
1223
- --wds-gallery-item-padding-right-medium: var(--wds-space-400);
1224
- --wds-gallery-item-padding-left-small: var(--wds-space-200);
1225
- --wds-gallery-item-padding-left-medium: var(--wds-space-300);
1226
- --wds-gallery-item-border: var(--wds-border-radius-400);
1227
1224
  --wds-form-field-label-gap-tiny: var(--wds-space-100);
1228
1225
  --wds-form-field-label-gap-small: var(--wds-space-150);
1229
1226
  --wds-form-field-label-font-weight: var(--wds-font-weight-regular);
@@ -1697,6 +1694,14 @@
1697
1694
  --wds-card-content-padding-medium: var(--wds-space-400);
1698
1695
  --wds-card-content-padding-large: var(--wds-space-600);
1699
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);
1700
1705
  --wds-button-text-standard-primary-hover: var(--wds-color-black-100);
1701
1706
  --wds-button-text-standard-primary: var(--wds-color-black-100);
1702
1707
  --wds-button-size-x-tiny: var(--wds-space-300);
@@ -2381,6 +2386,13 @@
2381
2386
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2382
2387
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-medium);
2383
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);
2384
2396
  --wds-button-text-hover: var(--wds-color-text-standard-primary-light);
2385
2397
  --wds-button-label-fill-transparent-tertiary: var(--wds-color-text-standard-primary-light);
2386
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);
@@ -1171,13 +1188,6 @@
1171
1188
  @property st-global(--wds-form-field-label-line-height-small);
1172
1189
  @property st-global(--wds-form-field-label-line-height-tiny);
1173
1190
  @property st-global(--wds-form-field-label-readonly);
1174
- @property st-global(--wds-gallery-item-border);
1175
- @property st-global(--wds-gallery-item-padding-left-medium);
1176
- @property st-global(--wds-gallery-item-padding-left-small);
1177
- @property st-global(--wds-gallery-item-padding-right-medium);
1178
- @property st-global(--wds-gallery-item-padding-right-small);
1179
- @property st-global(--wds-gallery-item-padding-vertical-medium);
1180
- @property st-global(--wds-gallery-item-padding-vertical-small);
1181
1191
  @property st-global(--wds-google-preview-favicon-background-fill);
1182
1192
  @property st-global(--wds-google-preview-favicon-border-fill);
1183
1193
  @property st-global(--wds-google-preview-site-name-fill);
@@ -1667,6 +1677,8 @@
1667
1677
  @property st-global(--wds-notification-padding-horizontal);
1668
1678
  @property st-global(--wds-notification-padding-vertical);
1669
1679
  @property st-global(--wds-number-input-icon-fill);
1680
+ @property st-global(--wds-outline-focus-inner);
1681
+ @property st-global(--wds-outline-focus-outer);
1670
1682
  @property st-global(--wds-page-header-back-button-gap);
1671
1683
  @property st-global(--wds-page-header-back-button-offset);
1672
1684
  @property st-global(--wds-page-header-breadcrumbs-color);
@@ -2968,6 +2980,23 @@
2968
2980
  --wds-button-text-hover: #ffffff;
2969
2981
  --wds-button-text-standard-primary: #000624;
2970
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;
2971
3000
  --wds-card-base-shadow: none;
2972
3001
  --wds-card-border: 8px;
2973
3002
  --wds-card-border-radius: 8px;
@@ -3806,13 +3835,6 @@
3806
3835
  --wds-form-field-label-line-height-small: 18px;
3807
3836
  --wds-form-field-label-line-height-tiny: 18px;
3808
3837
  --wds-form-field-label-readonly: #44485f;
3809
- --wds-gallery-item-border: 8px;
3810
- --wds-gallery-item-padding-left-medium: 18px;
3811
- --wds-gallery-item-padding-left-small: 12px;
3812
- --wds-gallery-item-padding-right-medium: 24px;
3813
- --wds-gallery-item-padding-right-small: 18px;
3814
- --wds-gallery-item-padding-vertical-medium: 18px;
3815
- --wds-gallery-item-padding-vertical-small: 12px;
3816
3838
  --wds-google-preview-favicon-background-fill: #F1F3F4;
3817
3839
  --wds-google-preview-favicon-border-fill: #E6E6E6;
3818
3840
  --wds-google-preview-site-name-fill: #202124;
@@ -4302,6 +4324,8 @@
4302
4324
  --wds-notification-padding-horizontal: 12px;
4303
4325
  --wds-notification-padding-vertical: 9px;
4304
4326
  --wds-number-input-icon-fill: #116dff;
4327
+ --wds-outline-focus-inner: 1px solid #ffffff;
4328
+ --wds-outline-focus-outer: 3px solid #116dff;
4305
4329
  --wds-page-header-back-button-gap: 8px;
4306
4330
  --wds-page-header-back-button-offset: 0px;
4307
4331
  --wds-page-header-breadcrumbs-color: #000624;
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);
@@ -601,13 +618,6 @@
601
618
  @property st-global(--wds-form-field-label-line-height-small);
602
619
  @property st-global(--wds-form-field-label-line-height-tiny);
603
620
  @property st-global(--wds-form-field-label-readonly);
604
- @property st-global(--wds-gallery-item-border);
605
- @property st-global(--wds-gallery-item-padding-left-medium);
606
- @property st-global(--wds-gallery-item-padding-left-small);
607
- @property st-global(--wds-gallery-item-padding-right-medium);
608
- @property st-global(--wds-gallery-item-padding-right-small);
609
- @property st-global(--wds-gallery-item-padding-vertical-medium);
610
- @property st-global(--wds-gallery-item-padding-vertical-small);
611
621
  @property st-global(--wds-google-preview-favicon-background-fill);
612
622
  @property st-global(--wds-google-preview-favicon-border-fill);
613
623
  @property st-global(--wds-google-preview-site-name-fill);
@@ -2190,6 +2200,23 @@
2190
2200
  --wds-button-text-hover: #ffffff;
2191
2201
  --wds-button-text-standard-primary: #000624;
2192
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;
2193
2220
  --wds-card-base-shadow: none;
2194
2221
  --wds-card-border: 8px;
2195
2222
  --wds-card-border-radius: 8px;
@@ -2497,13 +2524,6 @@
2497
2524
  --wds-form-field-label-line-height-small: 18px;
2498
2525
  --wds-form-field-label-line-height-tiny: 18px;
2499
2526
  --wds-form-field-label-readonly: #44485f;
2500
- --wds-gallery-item-border: 8px;
2501
- --wds-gallery-item-padding-left-medium: 18px;
2502
- --wds-gallery-item-padding-left-small: 12px;
2503
- --wds-gallery-item-padding-right-medium: 24px;
2504
- --wds-gallery-item-padding-right-small: 18px;
2505
- --wds-gallery-item-padding-vertical-medium: 18px;
2506
- --wds-gallery-item-padding-vertical-small: 12px;
2507
2527
  --wds-google-preview-favicon-background-fill: #F1F3F4;
2508
2528
  --wds-google-preview-favicon-border-fill: #E6E6E6;
2509
2529
  --wds-google-preview-site-name-fill: #202124;
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;
@@ -528,6 +529,8 @@
528
529
  --wds-accordion-inner-content-shadow: none;
529
530
  --wds-width-default-2: var(--wds-border-width-none);
530
531
  --wds-width-default: var(--wds-border-width-none);
532
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
533
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
531
534
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-25);
532
535
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-25);
533
536
  --wds-inner-shadow-y-input: var(--wds-shadow-y-25);
@@ -1841,6 +1844,21 @@
1841
1844
  --wds-card-content-padding-medium: var(--wds-space-300);
1842
1845
  --wds-card-content-padding-large: var(--wds-space-300);
1843
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);
1844
1862
  --wds-button-size-x-tiny: var(--wds-space-475);
1845
1863
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1846
1864
  --wds-button-size-tiny: var(--wds-space-600);
@@ -2117,7 +2135,7 @@
2117
2135
  --wds-thumbnail-border-color-hover: var(--wds-color-border-standard-secondary-hover);
2118
2136
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
2119
2137
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
2120
- --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);
2121
2139
  --wds-text-button-font-size-small: var(--wds-font-size-body-tiny);
2122
2140
  --wds-text-button-font-size-medium: var(--wds-font-size-body-small);
2123
2141
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -2452,6 +2470,7 @@
2452
2470
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2453
2471
  --wds-card-gallery-item-action-button-font-size: var(--wds-font-size-body-tiny);
2454
2472
  --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
2473
+ --wds-calendar-weekday-label-color: var(--wds-color-text-disabled);
2455
2474
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
2456
2475
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
2457
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;
@@ -1108,6 +1109,8 @@
1108
1109
  --wds-padding-left-tiny: var(--wds-space-600);
1109
1110
  --wds-padding-left-small: var(--wds-space-600);
1110
1111
  --wds-padding-left-medium: var(--wds-space-1200);
1112
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1113
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1111
1114
  --wds-notification-padding-vertical: var(--wds-space-200);
1112
1115
  --wds-notification-padding-horizontal: var(--wds-space-200);
1113
1116
  --wds-notification-fill-warning: var(--wds-color-yellow-400);
@@ -1829,6 +1832,21 @@
1829
1832
  --wds-card-content-padding-medium: var(--wds-space-300);
1830
1833
  --wds-card-content-padding-large: var(--wds-space-300);
1831
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);
1832
1850
  --wds-button-size-x-tiny: var(--wds-space-475);
1833
1851
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1834
1852
  --wds-button-size-tiny: var(--wds-space-600);
@@ -2099,7 +2117,7 @@
2099
2117
  --wds-thumbnail-border-color-hover: var(--wds-color-border-standard-secondary-hover);
2100
2118
  --wds-thumbnail-border-color-disabled: var(--wds-color-border-standard-primary-disabled);
2101
2119
  --wds-thumbnail-border-color: var(--wds-color-border-dark-secondary);
2102
- --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);
2103
2121
  --wds-text-button-font-size-small: var(--wds-font-size-body-tiny);
2104
2122
  --wds-text-button-font-size-medium: var(--wds-font-size-body-small);
2105
2123
  --wds-tag-label-font-size-small: var(--wds-font-size-body-tiny);
@@ -2452,6 +2470,7 @@
2452
2470
  --wds-card-gallery-item-overlay-fill: var(--wds-color-fill-transparent-primary);
2453
2471
  --wds-card-gallery-item-fill: var(--wds-color-fill-surface-default);
2454
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);
2455
2474
  --wds-button-label-font-size-large: var(--wds-font-size-body-medium);
2456
2475
  --wds-button-label-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-active);
2457
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);
@@ -1632,6 +1649,8 @@
1632
1649
  @property st-global(--wds-notification-padding-vertical);
1633
1650
  @property st-global(--wds-number-input-icon-fill);
1634
1651
  @property st-global(--wds-number-input-spacing);
1652
+ @property st-global(--wds-outline-focus-inner);
1653
+ @property st-global(--wds-outline-focus-outer);
1635
1654
  @property st-global(--wds-padding-left-medium);
1636
1655
  @property st-global(--wds-padding-left-small);
1637
1656
  @property st-global(--wds-padding-left-tiny);
@@ -2939,6 +2958,23 @@
2939
2958
  --wds-button-size-tiny: 24px;
2940
2959
  --wds-button-size-tiny-screen-small: 32px;
2941
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;
2942
2978
  --wds-card-base-shadow: 0 8px 30px 0 rgba(19, 23, 32, 0.1), 0 0 0 0 rgba(19, 23, 32, 0);
2943
2979
  --wds-card-border-radius: 16px;
2944
2980
  --wds-card-content-padding-large: 12px;
@@ -4244,6 +4280,8 @@
4244
4280
  --wds-notification-padding-vertical: 8px;
4245
4281
  --wds-number-input-icon-fill: #383838;
4246
4282
  --wds-number-input-spacing: 6px;
4283
+ --wds-outline-focus-inner: 1px solid #ffffff;
4284
+ --wds-outline-focus-outer: 3px solid #2f5dff;
4247
4285
  --wds-padding-left-medium: 48px;
4248
4286
  --wds-padding-left-small: 24px;
4249
4287
  --wds-padding-left-tiny: 24px;
@@ -4944,7 +4982,7 @@
4944
4982
  --wds-text-button-font-line-height-tiny: 12px;
4945
4983
  --wds-text-button-font-size-medium: 14px;
4946
4984
  --wds-text-button-font-size-small: 12px;
4947
- --wds-text-button-font-size-tiny: 10px;
4985
+ --wds-text-button-font-size-tiny: 12px;
4948
4986
  --wds-text-button-font-weight-normal: 600;
4949
4987
  --wds-text-button-font-weight-thin: 500;
4950
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/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 #ffffff;
943
+ --wds-outline-focus-outer: 3px solid #2f5dff;
940
944
  --wds-shadow-blur-input: 3px;
941
945
  --wds-shadow-blur-primary-modal: 30px;
942
946
  --wds-shadow-blur-primary-overlay: 30px;
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;
@@ -538,6 +541,8 @@
538
541
  --wds-angle-input-knob-border: 2px;
539
542
  --wds-width-default-2: var(--wds-border-width-none);
540
543
  --wds-width-default: var(--wds-border-width-none);
544
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
545
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
541
546
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-25);
542
547
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-25);
543
548
  --wds-inner-shadow-y-input: var(--wds-shadow-y-25);
@@ -1827,6 +1832,13 @@
1827
1832
  --wds-card-content-padding-medium-bottom: var(--wds-space-600);
1828
1833
  --wds-card-content-padding-medium: var(--wds-space-300);
1829
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);
1830
1842
  --wds-button-size-x-tiny: var(--wds-space-475);
1831
1843
  --wds-button-size-tiny-screen-small: var(--wds-space-800);
1832
1844
  --wds-button-size-tiny: var(--wds-space-600);
@@ -2423,6 +2435,13 @@
2423
2435
  --wds-card-subtitle-line-height: var(--wds-font-line-height-200);
2424
2436
  --wds-card-subtitle-color: var(--wds-color-text-standard-secondary);
2425
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);
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);