@wix/design-system-tokens 1.16.7 → 1.18.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 (9) hide show
  1. package/all.css +12 -2
  2. package/all.st.css +16 -0
  3. package/component.st.css +14 -0
  4. package/package.json +2 -2
  5. package/semantic.st.css +2 -0
  6. package/studio/all.css +12 -2
  7. package/studio/all.st.css +16 -0
  8. package/studio/component.st.css +14 -0
  9. package/studio/semantic.st.css +2 -0
package/all.css CHANGED
@@ -99,6 +99,13 @@
99
99
  --wds-circular-progress-bar-size-large: 102px;
100
100
  --wds-circular-progress-bar-size-medium: 54px;
101
101
  --wds-circular-progress-bar-size-small: 30px;
102
+ --wds-close-button-standard-fill-active: #084ebd;
103
+ --wds-close-button-standard-fill-disabled: rgba(0, 6, 36, .1);
104
+ --wds-close-button-standard-fill-hover: #a8caff;
105
+ --wds-close-button-standard-filled-fill: #d6e6fe;
106
+ --wds-close-button-standard-filled-text: #116dff;
107
+ --wds-close-button-standard-filled-text-disabled: #ffffff;
108
+ --wds-close-button-standard-filled-text-hover: #116dff;
102
109
  --wds-composer-sidebar-bottom-width: 90px;
103
110
  --wds-composer-sidebar-end-max-width: 240px;
104
111
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 6px;
@@ -319,6 +326,8 @@
319
326
  --wds-radio-label-font-line-height-small: 18px;
320
327
  --wds-radio-label-font-size-medium: 16px;
321
328
  --wds-radio-label-font-size-small: 14px;
329
+ --wds-radio-group-gap-horizontal-medium: 24px;
330
+ --wds-radio-group-gap-horizontal-small: 24px;
322
331
  --wds-radio-group-gap-vertical-medium: 12px;
323
332
  --wds-radio-group-gap-vertical-small: 6px;
324
333
  --wds-radio-group-item-padding-default-horizontal: 0;
@@ -363,7 +372,7 @@
363
372
  --wds-segmented-toggle-padding-vertical-small: 6px;
364
373
  --wds-segmented-toggle-size-medium: 36px;
365
374
  --wds-segmented-toggle-size-small: 30px;
366
- --wds-select-area-border: 8px;
375
+ --wds-select-area-border-radius: 8px;
367
376
  --wds-select-area-fill: #f4f7ff;
368
377
  --wds-select-area-fill-active: #d6e6fe;
369
378
  --wds-select-area-fill-disabled: rgba(255, 255, 255, 0);
@@ -720,6 +729,7 @@
720
729
  --wds-color-yellow-400: #ffe2a5;
721
730
  --wds-color-yellow-500: #fff0d1;
722
731
  --wds-color-yellow-600: #fff6e5;
732
+ --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
723
733
  --wds-color-border-dark-primary: #868aa5;
724
734
  --wds-color-border-dark-primary-active: #44485f;
725
735
  --wds-color-border-dark-primary-disabled: rgba(0, 6, 36, .1);
@@ -941,7 +951,7 @@
941
951
  --wds-color-fill-surface-destructive: #fde3e1;
942
952
  --wds-color-fill-surface-modal: #ffffff;
943
953
  --wds-color-fill-surface-modal-backdrop: rgba(0, 6, 36, .7);
944
- --wds-color-fill-surface-neutral: #eceff3;
954
+ --wds-color-fill-surface-neutral: #f7f8f8;
945
955
  --wds-color-fill-surface-overlay: #ffffff;
946
956
  --wds-color-fill-surface-overlay-dark: #000624;
947
957
  --wds-color-fill-surface-premium: #f1e0f9;
package/all.st.css CHANGED
@@ -115,6 +115,13 @@
115
115
  @property st-global(--wds-circular-progress-bar-size-large);
116
116
  @property st-global(--wds-circular-progress-bar-size-medium);
117
117
  @property st-global(--wds-circular-progress-bar-size-small);
118
+ @property st-global(--wds-close-button-standard-fill-active);
119
+ @property st-global(--wds-close-button-standard-fill-disabled);
120
+ @property st-global(--wds-close-button-standard-fill-hover);
121
+ @property st-global(--wds-close-button-standard-filled-fill);
122
+ @property st-global(--wds-close-button-standard-filled-text);
123
+ @property st-global(--wds-close-button-standard-filled-text-disabled);
124
+ @property st-global(--wds-close-button-standard-filled-text-hover);
118
125
  @property st-global(--wds-color-black-100);
119
126
  @property st-global(--wds-color-black-100-transparent-0);
120
127
  @property st-global(--wds-color-black-100-transparent-5);
@@ -146,6 +153,7 @@
146
153
  @property st-global(--wds-color-blue-400);
147
154
  @property st-global(--wds-color-blue-500);
148
155
  @property st-global(--wds-color-blue-600);
156
+ @property st-global(--wds-color-border-ai-primary);
149
157
  @property st-global(--wds-color-border-dark-primary);
150
158
  @property st-global(--wds-color-border-dark-primary-active);
151
159
  @property st-global(--wds-color-border-dark-primary-disabled);
@@ -1236,6 +1244,13 @@
1236
1244
  --wds-circular-progress-bar-size-large: 102px;
1237
1245
  --wds-circular-progress-bar-size-medium: 54px;
1238
1246
  --wds-circular-progress-bar-size-small: 30px;
1247
+ --wds-close-button-standard-fill-active: #084ebd;
1248
+ --wds-close-button-standard-fill-disabled: rgba(0, 6, 36, .1);
1249
+ --wds-close-button-standard-fill-hover: #a8caff;
1250
+ --wds-close-button-standard-filled-fill: #d6e6fe;
1251
+ --wds-close-button-standard-filled-text: #116dff;
1252
+ --wds-close-button-standard-filled-text-disabled: #ffffff;
1253
+ --wds-close-button-standard-filled-text-hover: #116dff;
1239
1254
  --wds-color-black-100: #000624;
1240
1255
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
1241
1256
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
@@ -1267,6 +1282,7 @@
1267
1282
  --wds-color-blue-400: #d6e6fe;
1268
1283
  --wds-color-blue-500: #e7f0ff;
1269
1284
  --wds-color-blue-600: #f4f7ff;
1285
+ --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
1270
1286
  --wds-color-border-dark-primary: #868aa5;
1271
1287
  --wds-color-border-dark-primary-active: #44485f;
1272
1288
  --wds-color-border-dark-primary-disabled: rgba(0, 6, 36, .1);
package/component.st.css CHANGED
@@ -98,6 +98,13 @@
98
98
  @property st-global(--wds-circular-progress-bar-size-large);
99
99
  @property st-global(--wds-circular-progress-bar-size-medium);
100
100
  @property st-global(--wds-circular-progress-bar-size-small);
101
+ @property st-global(--wds-close-button-standard-fill-active);
102
+ @property st-global(--wds-close-button-standard-fill-disabled);
103
+ @property st-global(--wds-close-button-standard-fill-hover);
104
+ @property st-global(--wds-close-button-standard-filled-fill);
105
+ @property st-global(--wds-close-button-standard-filled-text);
106
+ @property st-global(--wds-close-button-standard-filled-text-disabled);
107
+ @property st-global(--wds-close-button-standard-filled-text-hover);
101
108
  @property st-global(--wds-composer-sidebar-bottom-width);
102
109
  @property st-global(--wds-composer-sidebar-end-max-width);
103
110
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
@@ -716,6 +723,13 @@
716
723
  --wds-circular-progress-bar-size-large: 102px;
717
724
  --wds-circular-progress-bar-size-medium: 54px;
718
725
  --wds-circular-progress-bar-size-small: 30px;
726
+ --wds-close-button-standard-fill-active: #084ebd;
727
+ --wds-close-button-standard-fill-disabled: rgba(0, 6, 36, .1);
728
+ --wds-close-button-standard-fill-hover: #a8caff;
729
+ --wds-close-button-standard-filled-fill: #d6e6fe;
730
+ --wds-close-button-standard-filled-text: #116dff;
731
+ --wds-close-button-standard-filled-text-disabled: #ffffff;
732
+ --wds-close-button-standard-filled-text-hover: #116dff;
719
733
  --wds-composer-sidebar-bottom-width: 90px;
720
734
  --wds-composer-sidebar-end-max-width: 240px;
721
735
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 6px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.16.7",
3
+ "version": "1.18.0",
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": "b3ae8f9283f12974bdcbdc9279fa49c7b55bb8edb56d94d70c90c696"
36
+ "falconPackageHash": "79034e72fd3f3524333af014463133c77b60d4107d14b9dd4ca793cf"
37
37
  }
package/semantic.st.css CHANGED
@@ -1,5 +1,6 @@
1
1
  @property st-global(--wds-border-radius-surface-modal);
2
2
  @property st-global(--wds-border-radius-surface-overlay);
3
+ @property st-global(--wds-color-border-ai-primary);
3
4
  @property st-global(--wds-color-border-dark-primary);
4
5
  @property st-global(--wds-color-border-dark-primary-active);
5
6
  @property st-global(--wds-color-border-dark-primary-disabled);
@@ -334,6 +335,7 @@
334
335
  .root {
335
336
  --wds-border-radius-surface-modal: 8px;
336
337
  --wds-border-radius-surface-overlay: 8px;
338
+ --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
337
339
  --wds-color-border-dark-primary: #868aa5;
338
340
  --wds-color-border-dark-primary-active: #44485f;
339
341
  --wds-color-border-dark-primary-disabled: rgba(0, 6, 36, .1);
package/studio/all.css CHANGED
@@ -99,6 +99,13 @@
99
99
  --wds-circular-progress-bar-size-large: 96px;
100
100
  --wds-circular-progress-bar-size-medium: 52px;
101
101
  --wds-circular-progress-bar-size-small: 24px;
102
+ --wds-close-button-standard-fill-active: #42454c;
103
+ --wds-close-button-standard-fill-disabled: #e5e5e5;
104
+ --wds-close-button-standard-fill-hover: #131720;
105
+ --wds-close-button-standard-filled-fill: #42454c;
106
+ --wds-close-button-standard-filled-text: #ffffff;
107
+ --wds-close-button-standard-filled-text-disabled: #ffffff;
108
+ --wds-close-button-standard-filled-text-hover: #ffffff;
102
109
  --wds-composer-sidebar-bottom-width: 88px;
103
110
  --wds-composer-sidebar-end-max-width: 240px;
104
111
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
@@ -319,6 +326,8 @@
319
326
  --wds-radio-label-font-line-height-small: 16px;
320
327
  --wds-radio-label-font-size-medium: 14px;
321
328
  --wds-radio-label-font-size-small: 12px;
329
+ --wds-radio-group-gap-horizontal-medium: 16px;
330
+ --wds-radio-group-gap-horizontal-small: 16px;
322
331
  --wds-radio-group-gap-vertical-medium: 12px;
323
332
  --wds-radio-group-gap-vertical-small: 6px;
324
333
  --wds-radio-group-item-padding-default-horizontal: 0;
@@ -363,7 +372,7 @@
363
372
  --wds-segmented-toggle-padding-vertical-small: 4px;
364
373
  --wds-segmented-toggle-size-medium: 32px;
365
374
  --wds-segmented-toggle-size-small: 28px;
366
- --wds-select-area-border: 4px;
375
+ --wds-select-area-border-radius: 4px;
367
376
  --wds-select-area-fill: #f7f8f8;
368
377
  --wds-select-area-fill-active: #dce9ff;
369
378
  --wds-select-area-fill-disabled: rgba(255, 255, 255, 0);
@@ -719,6 +728,7 @@
719
728
  --wds-color-yellow-400: #fdead2;
720
729
  --wds-color-yellow-500: #fef3e5;
721
730
  --wds-color-yellow-600: #fef6ed;
731
+ --wds-color-border-ai-primary: #5a48f5;
722
732
  --wds-color-border-dark-primary: #868aa5;
723
733
  --wds-color-border-dark-primary-active: #2b2e36;
724
734
  --wds-color-border-dark-primary-disabled: rgba(19, 23, 32, .1);
@@ -940,7 +950,7 @@
940
950
  --wds-color-fill-surface-destructive: #fde3e1;
941
951
  --wds-color-fill-surface-modal: #ffffff;
942
952
  --wds-color-fill-surface-modal-backdrop: rgba(19, 23, 32, .7);
943
- --wds-color-fill-surface-neutral: #edeef2;
953
+ --wds-color-fill-surface-neutral: #f7f8f8;
944
954
  --wds-color-fill-surface-overlay: #ffffff;
945
955
  --wds-color-fill-surface-overlay-dark: #42454c;
946
956
  --wds-color-fill-surface-premium: #f1e0f9;
package/studio/all.st.css CHANGED
@@ -115,6 +115,13 @@
115
115
  @property st-global(--wds-circular-progress-bar-size-large);
116
116
  @property st-global(--wds-circular-progress-bar-size-medium);
117
117
  @property st-global(--wds-circular-progress-bar-size-small);
118
+ @property st-global(--wds-close-button-standard-fill-active);
119
+ @property st-global(--wds-close-button-standard-fill-disabled);
120
+ @property st-global(--wds-close-button-standard-fill-hover);
121
+ @property st-global(--wds-close-button-standard-filled-fill);
122
+ @property st-global(--wds-close-button-standard-filled-text);
123
+ @property st-global(--wds-close-button-standard-filled-text-disabled);
124
+ @property st-global(--wds-close-button-standard-filled-text-hover);
118
125
  @property st-global(--wds-color-black-100);
119
126
  @property st-global(--wds-color-black-100-transparent-0);
120
127
  @property st-global(--wds-color-black-100-transparent-5);
@@ -146,6 +153,7 @@
146
153
  @property st-global(--wds-color-blue-400);
147
154
  @property st-global(--wds-color-blue-500);
148
155
  @property st-global(--wds-color-blue-600);
156
+ @property st-global(--wds-color-border-ai-primary);
149
157
  @property st-global(--wds-color-border-dark-primary);
150
158
  @property st-global(--wds-color-border-dark-primary-active);
151
159
  @property st-global(--wds-color-border-dark-primary-disabled);
@@ -1231,6 +1239,13 @@
1231
1239
  --wds-circular-progress-bar-size-large: 96px;
1232
1240
  --wds-circular-progress-bar-size-medium: 52px;
1233
1241
  --wds-circular-progress-bar-size-small: 24px;
1242
+ --wds-close-button-standard-fill-active: #42454c;
1243
+ --wds-close-button-standard-fill-disabled: #e5e5e5;
1244
+ --wds-close-button-standard-fill-hover: #131720;
1245
+ --wds-close-button-standard-filled-fill: #42454c;
1246
+ --wds-close-button-standard-filled-text: #ffffff;
1247
+ --wds-close-button-standard-filled-text-disabled: #ffffff;
1248
+ --wds-close-button-standard-filled-text-hover: #ffffff;
1234
1249
  --wds-color-black-100: #131720;
1235
1250
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
1236
1251
  --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
@@ -1262,6 +1277,7 @@
1262
1277
  --wds-color-blue-400: #dce9ff;
1263
1278
  --wds-color-blue-500: #ebf2ff;
1264
1279
  --wds-color-blue-600: #f8faff;
1280
+ --wds-color-border-ai-primary: #5a48f5;
1265
1281
  --wds-color-border-dark-primary: #868aa5;
1266
1282
  --wds-color-border-dark-primary-active: #2b2e36;
1267
1283
  --wds-color-border-dark-primary-disabled: rgba(19, 23, 32, .1);
package/studio/component.st.css CHANGED
@@ -98,6 +98,13 @@
98
98
  @property st-global(--wds-circular-progress-bar-size-large);
99
99
  @property st-global(--wds-circular-progress-bar-size-medium);
100
100
  @property st-global(--wds-circular-progress-bar-size-small);
101
+ @property st-global(--wds-close-button-standard-fill-active);
102
+ @property st-global(--wds-close-button-standard-fill-disabled);
103
+ @property st-global(--wds-close-button-standard-fill-hover);
104
+ @property st-global(--wds-close-button-standard-filled-fill);
105
+ @property st-global(--wds-close-button-standard-filled-text);
106
+ @property st-global(--wds-close-button-standard-filled-text-disabled);
107
+ @property st-global(--wds-close-button-standard-filled-text-hover);
101
108
  @property st-global(--wds-composer-sidebar-bottom-width);
102
109
  @property st-global(--wds-composer-sidebar-end-max-width);
103
110
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
@@ -715,6 +722,13 @@
715
722
  --wds-circular-progress-bar-size-large: 96px;
716
723
  --wds-circular-progress-bar-size-medium: 52px;
717
724
  --wds-circular-progress-bar-size-small: 24px;
725
+ --wds-close-button-standard-fill-active: #42454c;
726
+ --wds-close-button-standard-fill-disabled: #e5e5e5;
727
+ --wds-close-button-standard-fill-hover: #131720;
728
+ --wds-close-button-standard-filled-fill: #42454c;
729
+ --wds-close-button-standard-filled-text: #ffffff;
730
+ --wds-close-button-standard-filled-text-disabled: #ffffff;
731
+ --wds-close-button-standard-filled-text-hover: #ffffff;
718
732
  --wds-composer-sidebar-bottom-width: 88px;
719
733
  --wds-composer-sidebar-end-max-width: 240px;
720
734
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
package/studio/semantic.st.css CHANGED
@@ -1,5 +1,6 @@
1
1
  @property st-global(--wds-border-radius-surface-modal);
2
2
  @property st-global(--wds-border-radius-surface-overlay);
3
+ @property st-global(--wds-color-border-ai-primary);
3
4
  @property st-global(--wds-color-border-dark-primary);
4
5
  @property st-global(--wds-color-border-dark-primary-active);
5
6
  @property st-global(--wds-color-border-dark-primary-disabled);
@@ -330,6 +331,7 @@
330
331
  .root {
331
332
  --wds-border-radius-surface-modal: 4px;
332
333
  --wds-border-radius-surface-overlay: 4px;
334
+ --wds-color-border-ai-primary: #5a48f5;
333
335
  --wds-color-border-dark-primary: #868aa5;
334
336
  --wds-color-border-dark-primary-active: #2b2e36;
335
337
  --wds-color-border-dark-primary-disabled: rgba(19, 23, 32, .1);