@wix/design-system-tokens 1.227.0 → 1.228.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 (26) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/all.css +2 -7
  3. package/all.scss +2 -7
  4. package/all.st.css +4 -14
  5. package/component.st.css +0 -14
  6. package/odeditor/all.css +3 -1
  7. package/odeditor/all.scss +3 -1
  8. package/odeditor/all.st.css +6 -2
  9. package/odeditor/component.st.css +2 -2
  10. package/odeditor/semantic.st.css +4 -0
  11. package/odeditor-dark/all.css +2 -0
  12. package/odeditor-dark/all.scss +2 -0
  13. package/odeditor-dark/all.st.css +4 -0
  14. package/odeditor-dark/semantic.st.css +4 -0
  15. package/package.json +2 -2
  16. package/semantic.st.css +4 -0
  17. package/studio/all.css +2 -7
  18. package/studio/all.scss +2 -7
  19. package/studio/all.st.css +4 -14
  20. package/studio/component.st.css +0 -14
  21. package/studio/semantic.st.css +4 -0
  22. package/wixel/all.css +2 -7
  23. package/wixel/all.scss +2 -7
  24. package/wixel/all.st.css +4 -14
  25. package/wixel/component.st.css +0 -14
  26. package/wixel/semantic.st.css +4 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## 1.228.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#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.
6
+
7
+ ## 1.227.1
8
+
1
9
  ## 1.227.0
2
10
 
3
11
  ### Minor Changes
package/all.css CHANGED
@@ -506,6 +506,8 @@
506
506
  --wds-angle-input-knob-border: 2px;
507
507
  --wds-width-default-2: var(--wds-border-width-100);
508
508
  --wds-width-default: var(--wds-border-width-100);
509
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
510
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
509
511
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
510
512
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-0);
511
513
  --wds-inner-shadow-y-input: var(--wds-shadow-y-0);
@@ -1559,13 +1561,6 @@
1559
1561
  --wds-image-border-radius-none: var(--wds-border-radius-0);
1560
1562
  --wds-image-border-radius-default: var(--wds-border-radius-400);
1561
1563
  --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
1564
  --wds-form-field-label-gap-tiny: var(--wds-space-100);
1570
1565
  --wds-form-field-label-gap-small: var(--wds-space-150);
1571
1566
  --wds-form-field-label-font-weight: var(--wds-font-weight-regular);
package/all.scss CHANGED
@@ -1032,6 +1032,8 @@
1032
1032
  --wds-page-header-padding-bottom-with-tail: var(--wds-space-200);
1033
1033
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-medium);
1034
1034
  --wds-page-header-back-button-offset: var(--wds-space-0);
1035
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1036
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1035
1037
  --wds-notification-padding-vertical: var(--wds-space-150);
1036
1038
  --wds-notification-padding-horizontal: var(--wds-space-200);
1037
1039
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1217,13 +1219,6 @@
1217
1219
  --wds-image-border-radius-none: var(--wds-border-radius-0);
1218
1220
  --wds-image-border-radius-default: var(--wds-border-radius-400);
1219
1221
  --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
1222
  --wds-form-field-label-gap-tiny: var(--wds-space-100);
1228
1223
  --wds-form-field-label-gap-small: var(--wds-space-150);
1229
1224
  --wds-form-field-label-font-weight: var(--wds-font-weight-regular);
package/all.st.css CHANGED
@@ -1171,13 +1171,6 @@
1171
1171
  @property st-global(--wds-form-field-label-line-height-small);
1172
1172
  @property st-global(--wds-form-field-label-line-height-tiny);
1173
1173
  @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
1174
  @property st-global(--wds-google-preview-favicon-background-fill);
1182
1175
  @property st-global(--wds-google-preview-favicon-border-fill);
1183
1176
  @property st-global(--wds-google-preview-site-name-fill);
@@ -1667,6 +1660,8 @@
1667
1660
  @property st-global(--wds-notification-padding-horizontal);
1668
1661
  @property st-global(--wds-notification-padding-vertical);
1669
1662
  @property st-global(--wds-number-input-icon-fill);
1663
+ @property st-global(--wds-outline-focus-inner);
1664
+ @property st-global(--wds-outline-focus-outer);
1670
1665
  @property st-global(--wds-page-header-back-button-gap);
1671
1666
  @property st-global(--wds-page-header-back-button-offset);
1672
1667
  @property st-global(--wds-page-header-breadcrumbs-color);
@@ -3806,13 +3801,6 @@
3806
3801
  --wds-form-field-label-line-height-small: 18px;
3807
3802
  --wds-form-field-label-line-height-tiny: 18px;
3808
3803
  --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
3804
  --wds-google-preview-favicon-background-fill: #F1F3F4;
3817
3805
  --wds-google-preview-favicon-border-fill: #E6E6E6;
3818
3806
  --wds-google-preview-site-name-fill: #202124;
@@ -4302,6 +4290,8 @@
4302
4290
  --wds-notification-padding-horizontal: 12px;
4303
4291
  --wds-notification-padding-vertical: 9px;
4304
4292
  --wds-number-input-icon-fill: #116dff;
4293
+ --wds-outline-focus-inner: 1px solid #ffffff;
4294
+ --wds-outline-focus-outer: 3px solid #116dff;
4305
4295
  --wds-page-header-back-button-gap: 8px;
4306
4296
  --wds-page-header-back-button-offset: 0px;
4307
4297
  --wds-page-header-breadcrumbs-color: #000624;
package/component.st.css CHANGED
@@ -601,13 +601,6 @@
601
601
  @property st-global(--wds-form-field-label-line-height-small);
602
602
  @property st-global(--wds-form-field-label-line-height-tiny);
603
603
  @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
604
  @property st-global(--wds-google-preview-favicon-background-fill);
612
605
  @property st-global(--wds-google-preview-favicon-border-fill);
613
606
  @property st-global(--wds-google-preview-site-name-fill);
@@ -2497,13 +2490,6 @@
2497
2490
  --wds-form-field-label-line-height-small: 18px;
2498
2491
  --wds-form-field-label-line-height-tiny: 18px;
2499
2492
  --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
2493
  --wds-google-preview-favicon-background-fill: #F1F3F4;
2508
2494
  --wds-google-preview-favicon-border-fill: #E6E6E6;
2509
2495
  --wds-google-preview-site-name-fill: #202124;
package/odeditor/all.css CHANGED
@@ -448,7 +448,7 @@
448
448
  --wds-input-shadow-focus-standard: transparent;
449
449
  --wds-input-shadow-focus-destructive: transparent;
450
450
  --wds-horizontal-scroll-button-text: #000624;
451
- --wds-horizontal-scroll-button-fill-active: #CFD1DC;
451
+ --wds-horizontal-scroll-button-fill-active: #F8F6F6;
452
452
  --wds-horizontal-scroll-button-fill: #FFFFFF;
453
453
  --wds-google-preview-title-fill: #260AA8;
454
454
  --wds-google-preview-text-fill: #4D5156;
@@ -528,6 +528,8 @@
528
528
  --wds-accordion-inner-content-shadow: none;
529
529
  --wds-width-default-2: var(--wds-border-width-none);
530
530
  --wds-width-default: var(--wds-border-width-none);
531
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
532
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
531
533
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-25);
532
534
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-25);
533
535
  --wds-inner-shadow-y-input: var(--wds-shadow-y-25);
package/odeditor/all.scss CHANGED
@@ -220,7 +220,7 @@
220
220
  --wds-illustration-color-2: #7896FF;
221
221
  --wds-illustration-color-1: #002294;
222
222
  --wds-horizontal-scroll-button-text: #000624;
223
- --wds-horizontal-scroll-button-fill-active: #CFD1DC;
223
+ --wds-horizontal-scroll-button-fill-active: #F8F6F6;
224
224
  --wds-horizontal-scroll-button-fill: #FFFFFF;
225
225
  --wds-google-preview-title-fill: #260AA8;
226
226
  --wds-google-preview-text-fill: #4D5156;
@@ -1108,6 +1108,8 @@
1108
1108
  --wds-padding-left-tiny: var(--wds-space-600);
1109
1109
  --wds-padding-left-small: var(--wds-space-600);
1110
1110
  --wds-padding-left-medium: var(--wds-space-1200);
1111
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1112
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1111
1113
  --wds-notification-padding-vertical: var(--wds-space-200);
1112
1114
  --wds-notification-padding-horizontal: var(--wds-space-200);
1113
1115
  --wds-notification-fill-warning: var(--wds-color-yellow-400);
package/odeditor/all.st.css CHANGED
@@ -1632,6 +1632,8 @@
1632
1632
  @property st-global(--wds-notification-padding-vertical);
1633
1633
  @property st-global(--wds-number-input-icon-fill);
1634
1634
  @property st-global(--wds-number-input-spacing);
1635
+ @property st-global(--wds-outline-focus-inner);
1636
+ @property st-global(--wds-outline-focus-outer);
1635
1637
  @property st-global(--wds-padding-left-medium);
1636
1638
  @property st-global(--wds-padding-left-small);
1637
1639
  @property st-global(--wds-padding-left-tiny);
@@ -3034,7 +3036,7 @@
3034
3036
  --wds-carousel-controls-bottom-offset-dots: 37px;
3035
3037
  --wds-carousel-controls-bottom-offset-no-dots: 37px;
3036
3038
  --wds-carousel-controls-bottom-shift: -0.5;
3037
- --wds-carousel-controls-fill-active: #CFD1DC;
3039
+ --wds-carousel-controls-fill-active: #F8F6F6;
3038
3040
  --wds-carousel-controls-fill-hover: #FFFFFF;
3039
3041
  --wds-carousel-controls-gap-large: 32px;
3040
3042
  --wds-carousel-controls-gap-medium: 32px;
@@ -3775,7 +3777,7 @@
3775
3777
  --wds-google-preview-text-fill: #4D5156;
3776
3778
  --wds-google-preview-title-fill: #260AA8;
3777
3779
  --wds-horizontal-scroll-button-fill: #FFFFFF;
3778
- --wds-horizontal-scroll-button-fill-active: #CFD1DC;
3780
+ --wds-horizontal-scroll-button-fill-active: #F8F6F6;
3779
3781
  --wds-horizontal-scroll-button-text: #000624;
3780
3782
  --wds-icon-button-color-border-dark-secondary: #767574;
3781
3783
  --wds-icon-button-color-border-dark-secondary-active: #dedede;
@@ -4244,6 +4246,8 @@
4244
4246
  --wds-notification-padding-vertical: 8px;
4245
4247
  --wds-number-input-icon-fill: #383838;
4246
4248
  --wds-number-input-spacing: 6px;
4249
+ --wds-outline-focus-inner: 1px solid #ffffff;
4250
+ --wds-outline-focus-outer: 3px solid #2f5dff;
4247
4251
  --wds-padding-left-medium: 48px;
4248
4252
  --wds-padding-left-small: 24px;
4249
4253
  --wds-padding-left-tiny: 24px;
package/odeditor/component.st.css CHANGED
@@ -2242,7 +2242,7 @@
2242
2242
  --wds-carousel-controls-bottom-offset-dots: 37px;
2243
2243
  --wds-carousel-controls-bottom-offset-no-dots: 37px;
2244
2244
  --wds-carousel-controls-bottom-shift: -0.5;
2245
- --wds-carousel-controls-fill-active: #CFD1DC;
2245
+ --wds-carousel-controls-fill-active: #F8F6F6;
2246
2246
  --wds-carousel-controls-fill-hover: #FFFFFF;
2247
2247
  --wds-carousel-controls-gap-large: 32px;
2248
2248
  --wds-carousel-controls-gap-medium: 32px;
@@ -2458,7 +2458,7 @@
2458
2458
  --wds-google-preview-text-fill: #4D5156;
2459
2459
  --wds-google-preview-title-fill: #260AA8;
2460
2460
  --wds-horizontal-scroll-button-fill: #FFFFFF;
2461
- --wds-horizontal-scroll-button-fill-active: #CFD1DC;
2461
+ --wds-horizontal-scroll-button-fill-active: #F8F6F6;
2462
2462
  --wds-horizontal-scroll-button-text: #000624;
2463
2463
  --wds-icon-button-color-border-dark-secondary: #767574;
2464
2464
  --wds-icon-button-color-border-dark-secondary-active: #dedede;
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
@@ -538,6 +538,8 @@
538
538
  --wds-angle-input-knob-border: 2px;
539
539
  --wds-width-default-2: var(--wds-border-width-none);
540
540
  --wds-width-default: var(--wds-border-width-none);
541
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
542
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
541
543
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-25);
542
544
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-25);
543
545
  --wds-inner-shadow-y-input: var(--wds-shadow-y-25);
package/odeditor-dark/all.scss CHANGED
@@ -1116,6 +1116,8 @@
1116
1116
  --wds-padding-left-tiny: var(--wds-space-600);
1117
1117
  --wds-padding-left-small: var(--wds-space-600);
1118
1118
  --wds-padding-left-medium: var(--wds-space-1200);
1119
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1120
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1119
1121
  --wds-notification-padding-vertical: var(--wds-space-200);
1120
1122
  --wds-notification-padding-horizontal: var(--wds-space-200);
1121
1123
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
package/odeditor-dark/all.st.css CHANGED
@@ -1636,6 +1636,8 @@
1636
1636
  @property st-global(--wds-notification-padding-vertical);
1637
1637
  @property st-global(--wds-number-input-icon-fill);
1638
1638
  @property st-global(--wds-number-input-spacing);
1639
+ @property st-global(--wds-outline-focus-inner);
1640
+ @property st-global(--wds-outline-focus-outer);
1639
1641
  @property st-global(--wds-padding-left-medium);
1640
1642
  @property st-global(--wds-padding-left-small);
1641
1643
  @property st-global(--wds-padding-left-tiny);
@@ -4248,6 +4250,8 @@
4248
4250
  --wds-notification-padding-vertical: 8px;
4249
4251
  --wds-number-input-icon-fill: #D4D3D2;
4250
4252
  --wds-number-input-spacing: 6px;
4253
+ --wds-outline-focus-inner: 1px solid #212122;
4254
+ --wds-outline-focus-outer: 3px solid #82B0FF;
4251
4255
  --wds-padding-left-medium: 48px;
4252
4256
  --wds-padding-left-small: 24px;
4253
4257
  --wds-padding-left-tiny: 24px;
package/odeditor-dark/semantic.st.css CHANGED
@@ -427,6 +427,8 @@
427
427
  @property st-global(--wds-inner-shadow-y-input);
428
428
  @property st-global(--wds-inner-shadow-y-primary);
429
429
  @property st-global(--wds-inner-shadow-y-secondary);
430
+ @property st-global(--wds-outline-focus-inner);
431
+ @property st-global(--wds-outline-focus-outer);
430
432
  @property st-global(--wds-shadow-blur-input);
431
433
  @property st-global(--wds-shadow-blur-primary-modal);
432
434
  @property st-global(--wds-shadow-blur-primary-overlay);
@@ -937,6 +939,8 @@
937
939
  --wds-inner-shadow-y-input: 1px;
938
940
  --wds-inner-shadow-y-primary: 1px;
939
941
  --wds-inner-shadow-y-secondary: 1px;
942
+ --wds-outline-focus-inner: 1px solid #212122;
943
+ --wds-outline-focus-outer: 3px solid #82B0FF;
940
944
  --wds-shadow-blur-input: 3px;
941
945
  --wds-shadow-blur-primary-modal: 30px;
942
946
  --wds-shadow-blur-primary-overlay: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.227.0",
3
+ "version": "1.228.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": "1eba5351d6f92ec84b95fae15abd70eb77cb81bffebba8ef70ae5514"
39
+ "falconPackageHash": "43a4e67bb308b2b95f2653e11bf3da181b4805f94d23a9e9ac586761"
40
40
  }
package/semantic.st.css CHANGED
@@ -419,6 +419,8 @@
419
419
  @property st-global(--wds-inner-shadow-y-input);
420
420
  @property st-global(--wds-inner-shadow-y-primary);
421
421
  @property st-global(--wds-inner-shadow-y-secondary);
422
+ @property st-global(--wds-outline-focus-inner);
423
+ @property st-global(--wds-outline-focus-outer);
422
424
  @property st-global(--wds-shadow-blur-input);
423
425
  @property st-global(--wds-shadow-blur-primary-modal);
424
426
  @property st-global(--wds-shadow-blur-primary-overlay);
@@ -921,6 +923,8 @@
921
923
  --wds-inner-shadow-y-input: 0;
922
924
  --wds-inner-shadow-y-primary: 0;
923
925
  --wds-inner-shadow-y-secondary: 0;
926
+ --wds-outline-focus-inner: 1px solid #ffffff;
927
+ --wds-outline-focus-outer: 3px solid #116dff;
924
928
  --wds-shadow-blur-input: 0px;
925
929
  --wds-shadow-blur-primary-modal: 24px;
926
930
  --wds-shadow-blur-primary-overlay: 18px;
package/studio/all.css CHANGED
@@ -550,6 +550,8 @@
550
550
  --wds-accordion-inner-content-shadow: none;
551
551
  --wds-width-default-2: var(--wds-border-width-100);
552
552
  --wds-width-default: var(--wds-border-width-100);
553
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
554
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
553
555
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
554
556
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-0);
555
557
  --wds-inner-shadow-y-input: var(--wds-shadow-y-0);
@@ -1608,13 +1610,6 @@
1608
1610
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1609
1611
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1610
1612
  --wds-google-preview-surface-fill: var(--wds-color-white);
1611
- --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1612
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1613
- --wds-gallery-item-padding-right-small: var(--wds-space-475);
1614
- --wds-gallery-item-padding-right-medium: var(--wds-space-600);
1615
- --wds-gallery-item-padding-left-small: var(--wds-space-300);
1616
- --wds-gallery-item-padding-left-medium: var(--wds-space-475);
1617
- --wds-gallery-item-border: var(--wds-border-radius-200);
1618
1613
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1619
1614
  --wds-form-field-label-gap-small: var(--wds-space-200);
1620
1615
  --wds-form-field-label-font-weight: var(--wds-font-weight-regular);
package/studio/all.scss CHANGED
@@ -1091,6 +1091,8 @@
1091
1091
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-bold);
1092
1092
  --wds-page-header-back-button-offset: var(--wds-space-0);
1093
1093
  --wds-page-header-back-button-gap: var(--wds-space-200);
1094
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1095
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1094
1096
  --wds-notification-padding-vertical: var(--wds-space-200);
1095
1097
  --wds-notification-padding-horizontal: var(--wds-space-200);
1096
1098
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1298,13 +1300,6 @@
1298
1300
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1299
1301
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1300
1302
  --wds-google-preview-surface-fill: var(--wds-color-white);
1301
- --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1302
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1303
- --wds-gallery-item-padding-right-small: var(--wds-space-475);
1304
- --wds-gallery-item-padding-right-medium: var(--wds-space-600);
1305
- --wds-gallery-item-padding-left-small: var(--wds-space-300);
1306
- --wds-gallery-item-padding-left-medium: var(--wds-space-475);
1307
- --wds-gallery-item-border: var(--wds-border-radius-200);
1308
1303
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1309
1304
  --wds-form-field-label-gap-small: var(--wds-space-200);
1310
1305
  --wds-form-field-label-font-weight: var(--wds-font-weight-regular);
package/studio/all.st.css CHANGED
@@ -1159,13 +1159,6 @@
1159
1159
  @property st-global(--wds-form-field-label-line-height-small);
1160
1160
  @property st-global(--wds-form-field-label-line-height-tiny);
1161
1161
  @property st-global(--wds-form-field-label-readonly);
1162
- @property st-global(--wds-gallery-item-border);
1163
- @property st-global(--wds-gallery-item-padding-left-medium);
1164
- @property st-global(--wds-gallery-item-padding-left-small);
1165
- @property st-global(--wds-gallery-item-padding-right-medium);
1166
- @property st-global(--wds-gallery-item-padding-right-small);
1167
- @property st-global(--wds-gallery-item-padding-vertical-medium);
1168
- @property st-global(--wds-gallery-item-padding-vertical-small);
1169
1162
  @property st-global(--wds-google-preview-favicon-background-fill);
1170
1163
  @property st-global(--wds-google-preview-favicon-border-fill);
1171
1164
  @property st-global(--wds-google-preview-site-name-fill);
@@ -1661,6 +1654,8 @@
1661
1654
  @property st-global(--wds-notification-padding-horizontal);
1662
1655
  @property st-global(--wds-notification-padding-vertical);
1663
1656
  @property st-global(--wds-number-input-icon-fill);
1657
+ @property st-global(--wds-outline-focus-inner);
1658
+ @property st-global(--wds-outline-focus-outer);
1664
1659
  @property st-global(--wds-page-header-back-button-gap);
1665
1660
  @property st-global(--wds-page-header-back-button-offset);
1666
1661
  @property st-global(--wds-page-header-breadcrumbs-color);
@@ -3779,13 +3774,6 @@
3779
3774
  --wds-form-field-label-line-height-small: 16px;
3780
3775
  --wds-form-field-label-line-height-tiny: 16px;
3781
3776
  --wds-form-field-label-readonly: #131720;
3782
- --wds-gallery-item-border: 4px;
3783
- --wds-gallery-item-padding-left-medium: 18px;
3784
- --wds-gallery-item-padding-left-small: 12px;
3785
- --wds-gallery-item-padding-right-medium: 24px;
3786
- --wds-gallery-item-padding-right-small: 18px;
3787
- --wds-gallery-item-padding-vertical-medium: 18px;
3788
- --wds-gallery-item-padding-vertical-small: 12px;
3789
3777
  --wds-google-preview-favicon-background-fill: #F1F3F4;
3790
3778
  --wds-google-preview-favicon-border-fill: #E6E6E6;
3791
3779
  --wds-google-preview-site-name-fill: #202124;
@@ -4281,6 +4269,8 @@
4281
4269
  --wds-notification-padding-horizontal: 8px;
4282
4270
  --wds-notification-padding-vertical: 8px;
4283
4271
  --wds-number-input-icon-fill: #42454c;
4272
+ --wds-outline-focus-inner: 1px solid #ffffff;
4273
+ --wds-outline-focus-outer: 3px solid #116dff;
4284
4274
  --wds-page-header-back-button-gap: 8px;
4285
4275
  --wds-page-header-back-button-offset: 0px;
4286
4276
  --wds-page-header-breadcrumbs-color: #131720;
package/studio/component.st.css CHANGED
@@ -593,13 +593,6 @@
593
593
  @property st-global(--wds-form-field-label-line-height-small);
594
594
  @property st-global(--wds-form-field-label-line-height-tiny);
595
595
  @property st-global(--wds-form-field-label-readonly);
596
- @property st-global(--wds-gallery-item-border);
597
- @property st-global(--wds-gallery-item-padding-left-medium);
598
- @property st-global(--wds-gallery-item-padding-left-small);
599
- @property st-global(--wds-gallery-item-padding-right-medium);
600
- @property st-global(--wds-gallery-item-padding-right-small);
601
- @property st-global(--wds-gallery-item-padding-vertical-medium);
602
- @property st-global(--wds-gallery-item-padding-vertical-small);
603
596
  @property st-global(--wds-google-preview-favicon-background-fill);
604
597
  @property st-global(--wds-google-preview-favicon-border-fill);
605
598
  @property st-global(--wds-google-preview-site-name-fill);
@@ -2466,13 +2459,6 @@
2466
2459
  --wds-form-field-label-line-height-small: 16px;
2467
2460
  --wds-form-field-label-line-height-tiny: 16px;
2468
2461
  --wds-form-field-label-readonly: #131720;
2469
- --wds-gallery-item-border: 4px;
2470
- --wds-gallery-item-padding-left-medium: 18px;
2471
- --wds-gallery-item-padding-left-small: 12px;
2472
- --wds-gallery-item-padding-right-medium: 24px;
2473
- --wds-gallery-item-padding-right-small: 18px;
2474
- --wds-gallery-item-padding-vertical-medium: 18px;
2475
- --wds-gallery-item-padding-vertical-small: 12px;
2476
2462
  --wds-google-preview-favicon-background-fill: #F1F3F4;
2477
2463
  --wds-google-preview-favicon-border-fill: #E6E6E6;
2478
2464
  --wds-google-preview-site-name-fill: #202124;
package/studio/semantic.st.css CHANGED
@@ -427,6 +427,8 @@
427
427
  @property st-global(--wds-inner-shadow-y-input);
428
428
  @property st-global(--wds-inner-shadow-y-primary);
429
429
  @property st-global(--wds-inner-shadow-y-secondary);
430
+ @property st-global(--wds-outline-focus-inner);
431
+ @property st-global(--wds-outline-focus-outer);
430
432
  @property st-global(--wds-shadow-blur-input);
431
433
  @property st-global(--wds-shadow-blur-primary-modal);
432
434
  @property st-global(--wds-shadow-blur-primary-overlay);
@@ -937,6 +939,8 @@
937
939
  --wds-inner-shadow-y-input: 0px;
938
940
  --wds-inner-shadow-y-primary: 0px;
939
941
  --wds-inner-shadow-y-secondary: 0px;
942
+ --wds-outline-focus-inner: 1px solid #ffffff;
943
+ --wds-outline-focus-outer: 3px solid #116dff;
940
944
  --wds-shadow-blur-input: 0px;
941
945
  --wds-shadow-blur-primary-modal: 18px;
942
946
  --wds-shadow-blur-primary-overlay: 12px;
package/wixel/all.css CHANGED
@@ -530,6 +530,8 @@
530
530
  --wds-angle-input-knob-border: 2px;
531
531
  --wds-width-default-2: var(--wds-border-width-none);
532
532
  --wds-width-default: var(--wds-border-width-none);
533
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
534
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
533
535
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
534
536
  --wds-inner-shadow-y-primary: var(--wds-shadow-y-0);
535
537
  --wds-inner-shadow-y-input: var(--wds-shadow-y-0);
@@ -1544,13 +1546,6 @@
1544
1546
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1545
1547
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1546
1548
  --wds-google-preview-surface-fill: var(--wds-color-white);
1547
- --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1548
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1549
- --wds-gallery-item-padding-right-small: var(--wds-space-475);
1550
- --wds-gallery-item-padding-right-medium: var(--wds-space-600);
1551
- --wds-gallery-item-padding-left-small: var(--wds-space-300);
1552
- --wds-gallery-item-padding-left-medium: var(--wds-space-475);
1553
- --wds-gallery-item-border: var(--wds-border-radius-200);
1554
1549
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1555
1550
  --wds-form-field-label-gap-small: var(--wds-space-200);
1556
1551
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
package/wixel/all.scss CHANGED
@@ -1049,6 +1049,8 @@
1049
1049
  --wds-page-header-breadcrumbs-selected-font-weight: var(--wds-font-weight-bold);
1050
1050
  --wds-page-header-back-button-offset: var(--wds-space-0);
1051
1051
  --wds-page-header-back-button-gap: var(--wds-space-200);
1052
+ --wds-outline-focus-outer: 3px solid var(--wds-color-blue-100);
1053
+ --wds-outline-focus-inner: 1px solid var(--wds-color-white);
1052
1054
  --wds-notification-padding-vertical: var(--wds-space-200);
1053
1055
  --wds-notification-padding-horizontal: var(--wds-space-200);
1054
1056
  --wds-notification-fill-warning: var(--wds-color-yellow-100);
@@ -1235,13 +1237,6 @@
1235
1237
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1236
1238
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1237
1239
  --wds-google-preview-surface-fill: var(--wds-color-white);
1238
- --wds-gallery-item-padding-vertical-small: var(--wds-space-300);
1239
- --wds-gallery-item-padding-vertical-medium: var(--wds-space-475);
1240
- --wds-gallery-item-padding-right-small: var(--wds-space-475);
1241
- --wds-gallery-item-padding-right-medium: var(--wds-space-600);
1242
- --wds-gallery-item-padding-left-small: var(--wds-space-300);
1243
- --wds-gallery-item-padding-left-medium: var(--wds-space-475);
1244
- --wds-gallery-item-border: var(--wds-border-radius-200);
1245
1240
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1246
1241
  --wds-form-field-label-gap-small: var(--wds-space-200);
1247
1242
  --wds-form-field-label-font-weight: var(--wds-font-weight-medium);
package/wixel/all.st.css CHANGED
@@ -1140,13 +1140,6 @@
1140
1140
  @property st-global(--wds-form-field-label-line-height-small);
1141
1141
  @property st-global(--wds-form-field-label-line-height-tiny);
1142
1142
  @property st-global(--wds-form-field-label-readonly);
1143
- @property st-global(--wds-gallery-item-border);
1144
- @property st-global(--wds-gallery-item-padding-left-medium);
1145
- @property st-global(--wds-gallery-item-padding-left-small);
1146
- @property st-global(--wds-gallery-item-padding-right-medium);
1147
- @property st-global(--wds-gallery-item-padding-right-small);
1148
- @property st-global(--wds-gallery-item-padding-vertical-medium);
1149
- @property st-global(--wds-gallery-item-padding-vertical-small);
1150
1143
  @property st-global(--wds-google-preview-favicon-background-fill);
1151
1144
  @property st-global(--wds-google-preview-favicon-border-fill);
1152
1145
  @property st-global(--wds-google-preview-site-name-fill);
@@ -1628,6 +1621,8 @@
1628
1621
  @property st-global(--wds-notification-padding-horizontal);
1629
1622
  @property st-global(--wds-notification-padding-vertical);
1630
1623
  @property st-global(--wds-number-input-icon-fill);
1624
+ @property st-global(--wds-outline-focus-inner);
1625
+ @property st-global(--wds-outline-focus-outer);
1631
1626
  @property st-global(--wds-page-header-back-button-gap);
1632
1627
  @property st-global(--wds-page-header-back-button-offset);
1633
1628
  @property st-global(--wds-page-header-breadcrumbs-color);
@@ -3696,13 +3691,6 @@
3696
3691
  --wds-form-field-label-line-height-small: 16px;
3697
3692
  --wds-form-field-label-line-height-tiny: 14px;
3698
3693
  --wds-form-field-label-readonly: #000624;
3699
- --wds-gallery-item-border: 4px;
3700
- --wds-gallery-item-padding-left-medium: 18px;
3701
- --wds-gallery-item-padding-left-small: 12px;
3702
- --wds-gallery-item-padding-right-medium: 24px;
3703
- --wds-gallery-item-padding-right-small: 18px;
3704
- --wds-gallery-item-padding-vertical-medium: 18px;
3705
- --wds-gallery-item-padding-vertical-small: 12px;
3706
3694
  --wds-google-preview-favicon-background-fill: #F1F3F4;
3707
3695
  --wds-google-preview-favicon-border-fill: #E6E6E6;
3708
3696
  --wds-google-preview-site-name-fill: #202124;
@@ -4184,6 +4172,8 @@
4184
4172
  --wds-notification-padding-horizontal: 8px;
4185
4173
  --wds-notification-padding-vertical: 8px;
4186
4174
  --wds-number-input-icon-fill: #595d70;
4175
+ --wds-outline-focus-inner: 1px solid #ffffff;
4176
+ --wds-outline-focus-outer: 3px solid #4a57ff;
4187
4177
  --wds-page-header-back-button-gap: 8px;
4188
4178
  --wds-page-header-back-button-offset: 0px;
4189
4179
  --wds-page-header-breadcrumbs-color: #000624;
package/wixel/component.st.css CHANGED
@@ -576,13 +576,6 @@
576
576
  @property st-global(--wds-form-field-label-line-height-small);
577
577
  @property st-global(--wds-form-field-label-line-height-tiny);
578
578
  @property st-global(--wds-form-field-label-readonly);
579
- @property st-global(--wds-gallery-item-border);
580
- @property st-global(--wds-gallery-item-padding-left-medium);
581
- @property st-global(--wds-gallery-item-padding-left-small);
582
- @property st-global(--wds-gallery-item-padding-right-medium);
583
- @property st-global(--wds-gallery-item-padding-right-small);
584
- @property st-global(--wds-gallery-item-padding-vertical-medium);
585
- @property st-global(--wds-gallery-item-padding-vertical-small);
586
579
  @property st-global(--wds-google-preview-favicon-background-fill);
587
580
  @property st-global(--wds-google-preview-favicon-border-fill);
588
581
  @property st-global(--wds-google-preview-site-name-fill);
@@ -2415,13 +2408,6 @@
2415
2408
  --wds-form-field-label-line-height-small: 16px;
2416
2409
  --wds-form-field-label-line-height-tiny: 14px;
2417
2410
  --wds-form-field-label-readonly: #000624;
2418
- --wds-gallery-item-border: 4px;
2419
- --wds-gallery-item-padding-left-medium: 18px;
2420
- --wds-gallery-item-padding-left-small: 12px;
2421
- --wds-gallery-item-padding-right-medium: 24px;
2422
- --wds-gallery-item-padding-right-small: 18px;
2423
- --wds-gallery-item-padding-vertical-medium: 18px;
2424
- --wds-gallery-item-padding-vertical-small: 12px;
2425
2411
  --wds-google-preview-favicon-background-fill: #F1F3F4;
2426
2412
  --wds-google-preview-favicon-border-fill: #E6E6E6;
2427
2413
  --wds-google-preview-site-name-fill: #202124;
package/wixel/semantic.st.css CHANGED
@@ -415,6 +415,8 @@
415
415
  @property st-global(--wds-inner-shadow-y-input);
416
416
  @property st-global(--wds-inner-shadow-y-primary);
417
417
  @property st-global(--wds-inner-shadow-y-secondary);
418
+ @property st-global(--wds-outline-focus-inner);
419
+ @property st-global(--wds-outline-focus-outer);
418
420
  @property st-global(--wds-shadow-blur-input);
419
421
  @property st-global(--wds-shadow-blur-primary-modal);
420
422
  @property st-global(--wds-shadow-blur-primary-overlay);
@@ -900,6 +902,8 @@
900
902
  --wds-inner-shadow-y-input: 0px;
901
903
  --wds-inner-shadow-y-primary: 0px;
902
904
  --wds-inner-shadow-y-secondary: 0px;
905
+ --wds-outline-focus-inner: 1px solid #ffffff;
906
+ --wds-outline-focus-outer: 3px solid #4a57ff;
903
907
  --wds-shadow-blur-input: 0px;
904
908
  --wds-shadow-blur-primary-modal: 30px;
905
909
  --wds-shadow-blur-primary-overlay: 30px;