@wix/design-system-tokens 1.87.0 → 1.87.1

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 (11) hide show
  1. package/all.css +4 -1
  2. package/all.st.css +6 -0
  3. package/component.st.css +6 -0
  4. package/package.json +2 -2
  5. package/studio/all.css +4 -1
  6. package/studio/all.st.css +6 -0
  7. package/studio/component.st.css +6 -0
  8. package/wixel/all.css +11 -5
  9. package/wixel/all.st.css +16 -4
  10. package/wixel/component.st.css +7 -1
  11. package/wixel/semantic.st.css +9 -3
package/all.css CHANGED
@@ -212,10 +212,10 @@
212
212
  --wds-custom-modal-header-title-font-line-height: 24px;
213
213
  --wds-custom-modal-header-title-font-size: 16px;
214
214
  --wds-divider-fill-color-light: #dfe5eb;
215
- --wds-divider-vertical-fill-color-light: #dfe5eb;
216
215
  --wds-divider-fill-color-light-primary: #dfe5eb;
217
216
  --wds-divider-fill-color-light-secondary: #dfe5eb;
218
217
  --wds-divider-gradient-border: linear-gradient(90deg, #dfe5eb 0%, #dfe5eb 16%, #dfe5eb 84%, #dfe5eb 100%);
218
+ --wds-divider-vertical-fill-color-light: #dfe5eb;
219
219
  --wds-dock-background-fill: #e7f0ff;
220
220
  --wds-dock-background-fill-active: #d6e6fe;
221
221
  --wds-dock-background-fill-disabled: rgba(0, 6, 36, .1);
@@ -269,6 +269,9 @@
269
269
  --wds-info-icon-fill-hover: #116dff;
270
270
  --wds-input-background-fill-default: #ffffff;
271
271
  --wds-input-background-fill-hover: #e7f0ff;
272
+ --wds-input-border-color: #d6e6fe;
273
+ --wds-input-border-color-hover: #a8caff;
274
+ --wds-input-border-color-readonly: #dfe5eb;
272
275
  --wds-input-border-radius-default-large: 6px;
273
276
  --wds-input-border-radius-default-medium: 6px;
274
277
  --wds-input-border-radius-default-small: 6px;
package/all.st.css CHANGED
@@ -810,6 +810,9 @@
810
810
  @property st-global(--wds-input-area-padding-vertical-small);
811
811
  @property st-global(--wds-input-background-fill-default);
812
812
  @property st-global(--wds-input-background-fill-hover);
813
+ @property st-global(--wds-input-border-color);
814
+ @property st-global(--wds-input-border-color-hover);
815
+ @property st-global(--wds-input-border-color-readonly);
813
816
  @property st-global(--wds-input-border-radius-default-large);
814
817
  @property st-global(--wds-input-border-radius-default-medium);
815
818
  @property st-global(--wds-input-border-radius-default-small);
@@ -2321,6 +2324,9 @@
2321
2324
  --wds-input-area-padding-vertical-small: 6px;
2322
2325
  --wds-input-background-fill-default: #ffffff;
2323
2326
  --wds-input-background-fill-hover: #e7f0ff;
2327
+ --wds-input-border-color: #d6e6fe;
2328
+ --wds-input-border-color-hover: #a8caff;
2329
+ --wds-input-border-color-readonly: #dfe5eb;
2324
2330
  --wds-input-border-radius-default-large: 6px;
2325
2331
  --wds-input-border-radius-default-medium: 6px;
2326
2332
  --wds-input-border-radius-default-small: 6px;
package/component.st.css CHANGED
@@ -276,6 +276,9 @@
276
276
  @property st-global(--wds-input-area-padding-vertical-small);
277
277
  @property st-global(--wds-input-background-fill-default);
278
278
  @property st-global(--wds-input-background-fill-hover);
279
+ @property st-global(--wds-input-border-color);
280
+ @property st-global(--wds-input-border-color-hover);
281
+ @property st-global(--wds-input-border-color-readonly);
279
282
  @property st-global(--wds-input-border-radius-default-large);
280
283
  @property st-global(--wds-input-border-radius-default-medium);
281
284
  @property st-global(--wds-input-border-radius-default-small);
@@ -1164,6 +1167,9 @@
1164
1167
  --wds-input-area-padding-vertical-small: 6px;
1165
1168
  --wds-input-background-fill-default: #ffffff;
1166
1169
  --wds-input-background-fill-hover: #e7f0ff;
1170
+ --wds-input-border-color: #d6e6fe;
1171
+ --wds-input-border-color-hover: #a8caff;
1172
+ --wds-input-border-color-readonly: #dfe5eb;
1167
1173
  --wds-input-border-radius-default-large: 6px;
1168
1174
  --wds-input-border-radius-default-medium: 6px;
1169
1175
  --wds-input-border-radius-default-small: 6px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.87.0",
3
+ "version": "1.87.1",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "f266262cc4287e1e750f7b65d4a3d9eb5019af5755a48c8a2951c3cc"
36
+ "falconPackageHash": "a71ff8c22457e7f4267d80597b520a664e1da61253c08d8693f78bc5"
37
37
  }
package/studio/all.css CHANGED
@@ -212,10 +212,10 @@
212
212
  --wds-custom-modal-header-title-font-line-height: 20px;
213
213
  --wds-custom-modal-header-title-font-size: 14px;
214
214
  --wds-divider-fill-color-light: #e2e3ea;
215
- --wds-divider-vertical-fill-color-light: #e2e3ea;
216
215
  --wds-divider-fill-color-light-primary: #e2e3ea;
217
216
  --wds-divider-fill-color-light-secondary: #e2e3ea;
218
217
  --wds-divider-gradient-border: linear-gradient(90deg, #e2e3ea 0%, #e2e3ea 16%, #e2e3ea 84%, #e2e3ea 100%);
218
+ --wds-divider-vertical-fill-color-light: #e2e3ea;
219
219
  --wds-dock-background-fill: #ebf2ff;
220
220
  --wds-dock-background-fill-active: #dce9ff;
221
221
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -269,6 +269,9 @@
269
269
  --wds-info-icon-fill-hover: #116dff;
270
270
  --wds-input-background-fill-default: #ffffff;
271
271
  --wds-input-background-fill-hover: #f7f8f8;
272
+ --wds-input-border-color: #e2e3ea;
273
+ --wds-input-border-color-hover: #868aa5;
274
+ --wds-input-border-color-readonly: #e2e3ea;
272
275
  --wds-input-border-radius-default-large: 4px;
273
276
  --wds-input-border-radius-default-medium: 4px;
274
277
  --wds-input-border-radius-default-small: 4px;
package/studio/all.st.css CHANGED
@@ -806,6 +806,9 @@
806
806
  @property st-global(--wds-input-area-padding-vertical-small);
807
807
  @property st-global(--wds-input-background-fill-default);
808
808
  @property st-global(--wds-input-background-fill-hover);
809
+ @property st-global(--wds-input-border-color);
810
+ @property st-global(--wds-input-border-color-hover);
811
+ @property st-global(--wds-input-border-color-readonly);
809
812
  @property st-global(--wds-input-border-radius-default-large);
810
813
  @property st-global(--wds-input-border-radius-default-medium);
811
814
  @property st-global(--wds-input-border-radius-default-small);
@@ -2307,6 +2310,9 @@
2307
2310
  --wds-input-area-padding-vertical-small: 6px;
2308
2311
  --wds-input-background-fill-default: #ffffff;
2309
2312
  --wds-input-background-fill-hover: #f7f8f8;
2313
+ --wds-input-border-color: #e2e3ea;
2314
+ --wds-input-border-color-hover: #868aa5;
2315
+ --wds-input-border-color-readonly: #e2e3ea;
2310
2316
  --wds-input-border-radius-default-large: 4px;
2311
2317
  --wds-input-border-radius-default-medium: 4px;
2312
2318
  --wds-input-border-radius-default-small: 4px;
package/studio/component.st.css CHANGED
@@ -276,6 +276,9 @@
276
276
  @property st-global(--wds-input-area-padding-vertical-small);
277
277
  @property st-global(--wds-input-background-fill-default);
278
278
  @property st-global(--wds-input-background-fill-hover);
279
+ @property st-global(--wds-input-border-color);
280
+ @property st-global(--wds-input-border-color-hover);
281
+ @property st-global(--wds-input-border-color-readonly);
279
282
  @property st-global(--wds-input-border-radius-default-large);
280
283
  @property st-global(--wds-input-border-radius-default-medium);
281
284
  @property st-global(--wds-input-border-radius-default-small);
@@ -1158,6 +1161,9 @@
1158
1161
  --wds-input-area-padding-vertical-small: 6px;
1159
1162
  --wds-input-background-fill-default: #ffffff;
1160
1163
  --wds-input-background-fill-hover: #f7f8f8;
1164
+ --wds-input-border-color: #e2e3ea;
1165
+ --wds-input-border-color-hover: #868aa5;
1166
+ --wds-input-border-color-readonly: #e2e3ea;
1161
1167
  --wds-input-border-radius-default-large: 4px;
1162
1168
  --wds-input-border-radius-default-medium: 4px;
1163
1169
  --wds-input-border-radius-default-small: 4px;
package/wixel/all.css CHANGED
@@ -209,10 +209,10 @@
209
209
  --wds-custom-modal-header-title-font-line-height: 20px;
210
210
  --wds-custom-modal-header-title-font-size: 14px;
211
211
  --wds-divider-fill-color-light: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
212
- --wds-divider-vertical-fill-color-light: linear-gradient(0deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
213
212
  --wds-divider-fill-color-light-primary: #d6dcff;
214
213
  --wds-divider-fill-color-light-secondary: rgba(244, 247, 255, 0.0000);
215
214
  --wds-divider-gradient-border: linear-gradient(90deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
215
+ --wds-divider-vertical-fill-color-light: linear-gradient(0deg, rgba(244, 247, 255, 0.0000) 0%, #d6dcff 16%, #d6dcff 84%, rgba(244, 247, 255, 0.0000) 100%);
216
216
  --wds-dock-background-fill: #eef0ff;
217
217
  --wds-dock-background-fill-active: #d6dcff;
218
218
  --wds-dock-background-fill-disabled: #e5e5e5;
@@ -266,6 +266,9 @@
266
266
  --wds-info-icon-fill-hover: #526cff;
267
267
  --wds-input-background-fill-default: #eef0ff;
268
268
  --wds-input-background-fill-hover: #d6dcff;
269
+ --wds-input-border-color: #eef0ff;
270
+ --wds-input-border-color-hover: #d6dcff;
271
+ --wds-input-border-color-readonly: #edeef2;
269
272
  --wds-input-border-radius-default-large: 8px;
270
273
  --wds-input-border-radius-default-medium: 8px;
271
274
  --wds-input-border-radius-default-small: 8px;
@@ -805,7 +808,7 @@
805
808
  --wds-toggle-switch-knob-size-small: 12px;
806
809
  --wds-toggle-switch-knob-text-height: 0;
807
810
  --wds-toggle-switch-padding: 1px;
808
- --wds-toggle-switch-shadow: true;
811
+ --wds-toggle-switch-shadow: 0 2px 1px rgba(38, 37, 36, 0.0000), 0 0 3px rgba(38, 37, 36, 0.3000);
809
812
  --wds-toggle-switch-width-large: 40px;
810
813
  --wds-toggle-switch-width-medium: 32px;
811
814
  --wds-toggle-switch-width-small: 24px;
@@ -1453,9 +1456,12 @@
1453
1456
  --wds-shadow-fill-secondary-overlay: rgba(38, 37, 36, 0.0000);
1454
1457
  --wds-shadow-fill-secondary-raised: rgba(38, 37, 36, 0.0000);
1455
1458
  --wds-shadow-fill-secondary-toggle: rgba(38, 37, 36, 0.0000);
1456
- --wds-shadow-focus-destructive: #fbd0cd;
1457
- --wds-shadow-focus-standard: #bac5ff;
1458
- --wds-shadow-focus-warning: #fdead2;
1459
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
1460
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
1461
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #bac5ff inset;
1462
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
1463
+ --wds-shadow-focus-standard: 0 0 0 3px #bac5ff;
1464
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
1459
1465
  --wds-shadow-focus-spread: 0;
1460
1466
  --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
1461
1467
  --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
package/wixel/all.st.css CHANGED
@@ -807,6 +807,9 @@
807
807
  @property st-global(--wds-input-area-padding-vertical-small);
808
808
  @property st-global(--wds-input-background-fill-default);
809
809
  @property st-global(--wds-input-background-fill-hover);
810
+ @property st-global(--wds-input-border-color);
811
+ @property st-global(--wds-input-border-color-hover);
812
+ @property st-global(--wds-input-border-color-readonly);
810
813
  @property st-global(--wds-input-border-radius-default-large);
811
814
  @property st-global(--wds-input-border-radius-default-medium);
812
815
  @property st-global(--wds-input-border-radius-default-small);
@@ -1119,6 +1122,9 @@
1119
1122
  @property st-global(--wds-shadow-fill-secondary-raised);
1120
1123
  @property st-global(--wds-shadow-fill-secondary-toggle);
1121
1124
  @property st-global(--wds-shadow-focus-destructive);
1125
+ @property st-global(--wds-shadow-focus-inner-destructive);
1126
+ @property st-global(--wds-shadow-focus-inner-standard);
1127
+ @property st-global(--wds-shadow-focus-inner-warning);
1122
1128
  @property st-global(--wds-shadow-focus-spread);
1123
1129
  @property st-global(--wds-shadow-focus-standard);
1124
1130
  @property st-global(--wds-shadow-focus-warning);
@@ -2320,6 +2326,9 @@
2320
2326
  --wds-input-area-padding-vertical-small: 8px;
2321
2327
  --wds-input-background-fill-default: #eef0ff;
2322
2328
  --wds-input-background-fill-hover: #d6dcff;
2329
+ --wds-input-border-color: #eef0ff;
2330
+ --wds-input-border-color-hover: #d6dcff;
2331
+ --wds-input-border-color-readonly: #edeef2;
2323
2332
  --wds-input-border-radius-default-large: 8px;
2324
2333
  --wds-input-border-radius-default-medium: 8px;
2325
2334
  --wds-input-border-radius-default-small: 8px;
@@ -2631,10 +2640,13 @@
2631
2640
  --wds-shadow-fill-secondary-overlay: rgba(38, 37, 36, 0.0000);
2632
2641
  --wds-shadow-fill-secondary-raised: rgba(38, 37, 36, 0.0000);
2633
2642
  --wds-shadow-fill-secondary-toggle: rgba(38, 37, 36, 0.0000);
2634
- --wds-shadow-focus-destructive: #fbd0cd;
2643
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
2644
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
2645
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #bac5ff inset;
2646
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
2635
2647
  --wds-shadow-focus-spread: 0;
2636
- --wds-shadow-focus-standard: #bac5ff;
2637
- --wds-shadow-focus-warning: #fdead2;
2648
+ --wds-shadow-focus-standard: 0 0 0 3px #bac5ff;
2649
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
2638
2650
  --wds-shadow-inner-100: 1px 1px 2px rgba(38, 37, 36, 0.1000) inset, 1px 1px 2px rgba(255, 255, 255, 0.1000);
2639
2651
  --wds-shadow-inner-200: 1px 1px 4px rgba(38, 37, 36, 0.2000) inset;
2640
2652
  --wds-shadow-inner-300: 0 0 18px rgba(38, 37, 36, 0.1000) inset, 0 0 6px rgba(38, 37, 36, 0.0500) inset;
@@ -2935,7 +2947,7 @@
2935
2947
  --wds-toggle-switch-knob-size-small: 12px;
2936
2948
  --wds-toggle-switch-knob-text-height: 0;
2937
2949
  --wds-toggle-switch-padding: 1px;
2938
- --wds-toggle-switch-shadow: true;
2950
+ --wds-toggle-switch-shadow: 0 2px 1px rgba(38, 37, 36, 0.0000), 0 0 3px rgba(38, 37, 36, 0.3000);
2939
2951
  --wds-toggle-switch-width-large: 40px;
2940
2952
  --wds-toggle-switch-width-medium: 32px;
2941
2953
  --wds-toggle-switch-width-small: 24px;
package/wixel/component.st.css CHANGED
@@ -273,6 +273,9 @@
273
273
  @property st-global(--wds-input-area-padding-vertical-small);
274
274
  @property st-global(--wds-input-background-fill-default);
275
275
  @property st-global(--wds-input-background-fill-hover);
276
+ @property st-global(--wds-input-border-color);
277
+ @property st-global(--wds-input-border-color-hover);
278
+ @property st-global(--wds-input-border-color-readonly);
276
279
  @property st-global(--wds-input-border-radius-default-large);
277
280
  @property st-global(--wds-input-border-radius-default-medium);
278
281
  @property st-global(--wds-input-border-radius-default-small);
@@ -1166,6 +1169,9 @@
1166
1169
  --wds-input-area-padding-vertical-small: 8px;
1167
1170
  --wds-input-background-fill-default: #eef0ff;
1168
1171
  --wds-input-background-fill-hover: #d6dcff;
1172
+ --wds-input-border-color: #eef0ff;
1173
+ --wds-input-border-color-hover: #d6dcff;
1174
+ --wds-input-border-color-readonly: #edeef2;
1169
1175
  --wds-input-border-radius-default-large: 8px;
1170
1176
  --wds-input-border-radius-default-medium: 8px;
1171
1177
  --wds-input-border-radius-default-small: 8px;
@@ -1697,7 +1703,7 @@
1697
1703
  --wds-toggle-switch-knob-size-small: 12px;
1698
1704
  --wds-toggle-switch-knob-text-height: 0;
1699
1705
  --wds-toggle-switch-padding: 1px;
1700
- --wds-toggle-switch-shadow: true;
1706
+ --wds-toggle-switch-shadow: 0 2px 1px rgba(38, 37, 36, 0.0000), 0 0 3px rgba(38, 37, 36, 0.3000);
1701
1707
  --wds-toggle-switch-width-large: 40px;
1702
1708
  --wds-toggle-switch-width-medium: 32px;
1703
1709
  --wds-toggle-switch-width-small: 24px;
package/wixel/semantic.st.css CHANGED
@@ -398,6 +398,9 @@
398
398
  @property st-global(--wds-shadow-fill-secondary-raised);
399
399
  @property st-global(--wds-shadow-fill-secondary-toggle);
400
400
  @property st-global(--wds-shadow-focus-destructive);
401
+ @property st-global(--wds-shadow-focus-inner-destructive);
402
+ @property st-global(--wds-shadow-focus-inner-standard);
403
+ @property st-global(--wds-shadow-focus-inner-warning);
401
404
  @property st-global(--wds-shadow-focus-spread);
402
405
  @property st-global(--wds-shadow-focus-standard);
403
406
  @property st-global(--wds-shadow-focus-warning);
@@ -820,10 +823,13 @@
820
823
  --wds-shadow-fill-secondary-overlay: rgba(38, 37, 36, 0.0000);
821
824
  --wds-shadow-fill-secondary-raised: rgba(38, 37, 36, 0.0000);
822
825
  --wds-shadow-fill-secondary-toggle: rgba(38, 37, 36, 0.0000);
823
- --wds-shadow-focus-destructive: #fbd0cd;
826
+ --wds-shadow-focus-destructive: 0 0 0 3px #fbd0cd;
827
+ --wds-shadow-focus-inner-destructive: 0 0 0 3px #fbd0cd inset;
828
+ --wds-shadow-focus-inner-standard: 0 0 0 3px #bac5ff inset;
829
+ --wds-shadow-focus-inner-warning: 0 0 0 3px #fdead2 inset;
824
830
  --wds-shadow-focus-spread: 0;
825
- --wds-shadow-focus-standard: #bac5ff;
826
- --wds-shadow-focus-warning: #fdead2;
831
+ --wds-shadow-focus-standard: 0 0 0 3px #bac5ff;
832
+ --wds-shadow-focus-warning: 0 0 0 3px #fdead2;
827
833
  --wds-shadow-surface-modal: 0 10px 10px rgba(38, 37, 36, 0.2000), 0 8px 8px rgba(38, 37, 36, 0.0000);
828
834
  --wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
829
835
  --wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);