@wix/design-system-tokens 1.78.0 → 1.80.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 (10) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/all.css +13 -3
  3. package/all.st.css +23 -3
  4. package/component.st.css +21 -3
  5. package/package.json +2 -2
  6. package/semantic.st.css +2 -0
  7. package/studio/all.css +13 -3
  8. package/studio/all.st.css +23 -3
  9. package/studio/component.st.css +21 -3
  10. package/studio/semantic.st.css +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ ## 1.80.0 - 2025-03-04
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(ListItemSection): list-item-section font size change in studio theme [14558](https://github.com/wix-private/wix-design-systems/pull/14558)
6
+ - breaking(ColorPicker): tokenization [14568](https://github.com/wix-private/wix-design-systems/pull/14568)
7
+
8
+ ## 1.79.0 - 2025-02-27
9
+
10
+ ### Visual Breaking Changes
11
+
12
+ - breaking(Tooltip): tooltip color change in studio theme [14536](https://github.com/wix-private/wix-design-systems/pull/14536)
13
+
1
14
  ## 1.77.0 - 2025-02-18
2
15
 
3
16
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -121,6 +121,9 @@
121
121
  --wds-close-button-standard-filled-text: #116dff;
122
122
  --wds-close-button-standard-filled-text-disabled: #ffffff;
123
123
  --wds-close-button-standard-filled-text-hover: #116dff;
124
+ --wds-color-picker-padding-horizontal: 18px;
125
+ --wds-color-picker-padding-vertical: 12px;
126
+ --wds-color-picker-width: 240px;
124
127
  --wds-composer-sidebar-bottom-width: 90px;
125
128
  --wds-composer-sidebar-end-max-width: 240px;
126
129
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 6px;
@@ -266,6 +269,8 @@
266
269
  --wds-list-item-action-padding-vertical-medium-screen-small: 12px;
267
270
  --wds-list-item-action-padding-vertical-small: 6px;
268
271
  --wds-list-item-action-padding-vertical-small-screen-small: 12px;
272
+ --wds-list-item-section-font-size: 14px;
273
+ --wds-list-item-section-line-height: 18px;
269
274
  --wds-list-item-section-padding-horizontal: 24px;
270
275
  --wds-list-item-select-active-fill: #116dff;
271
276
  --wds-list-item-select-active-fill-active: #084ebd;
@@ -527,9 +532,11 @@
527
532
  --wds-swatches-swatch-active-border-radius-small: 5px;
528
533
  --wds-swatches-swatch-border-radius-medium: 6px;
529
534
  --wds-swatches-swatch-border-radius-small: 2px;
530
- --wds-swatches-swatch-size-large: 30px;
531
- --wds-swatches-swatch-size-medium: 24px;
532
- --wds-swatches-swatch-size-small: 18px;
535
+ --wds-swatches-swatch-size-large: 42px;
536
+ --wds-swatches-swatch-size-medium: 36px;
537
+ --wds-swatches-swatch-size-small: 30px;
538
+ --wds-swatches-swatch-size-tiny: 24px;
539
+ --wds-swatches-swatch-size-x-tiny: 18px;
533
540
  --wds-tabs-gap-medium: 6px;
534
541
  --wds-tabs-gap-small: 6px;
535
542
  --wds-tabs-label-font-size-small: 14px;
@@ -606,12 +613,14 @@
606
613
  --wds-toggle-switch-width-large: 46px;
607
614
  --wds-toggle-switch-width-medium: 34px;
608
615
  --wds-toggle-switch-width-small: 28px;
616
+ --wds-tooltip-background-fill: #000624;
609
617
  --wds-tooltip-border-radius-medium: 8px;
610
618
  --wds-tooltip-border-radius-small: 8px;
611
619
  --wds-tooltip-padding-horizontal-medium: 24px;
612
620
  --wds-tooltip-padding-horizontal-small: 12px;
613
621
  --wds-tooltip-padding-vertical-medium: 12px;
614
622
  --wds-tooltip-padding-vertical-small: 6px;
623
+ --wds-tooltip-text-fill: #ffffff;
615
624
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
616
625
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
617
626
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
@@ -1185,6 +1194,7 @@
1185
1194
  --wds-space-padding-vertical-tiny: 12px;
1186
1195
  --wds-space-padding-vertical-x-tiny: 6px;
1187
1196
  --wds-space-padding-vertical-xx-tiny: 3px;
1197
+ --wds-border-radius-surface-default: 8px;
1188
1198
  --wds-border-radius-surface-modal: 8px;
1189
1199
  --wds-border-radius-surface-overlay: 8px;
1190
1200
  }
package/all.st.css CHANGED
@@ -27,6 +27,7 @@
27
27
  @property st-global(--wds-border-radius-500);
28
28
  @property st-global(--wds-border-radius-600);
29
29
  @property st-global(--wds-border-radius-full);
30
+ @property st-global(--wds-border-radius-surface-default);
30
31
  @property st-global(--wds-border-radius-surface-modal);
31
32
  @property st-global(--wds-border-radius-surface-overlay);
32
33
  @property st-global(--wds-border-width-100);
@@ -465,6 +466,9 @@
465
466
  @property st-global(--wds-color-orange-400);
466
467
  @property st-global(--wds-color-orange-500);
467
468
  @property st-global(--wds-color-orange-600);
469
+ @property st-global(--wds-color-picker-padding-horizontal);
470
+ @property st-global(--wds-color-picker-padding-vertical);
471
+ @property st-global(--wds-color-picker-width);
468
472
  @property st-global(--wds-color-purple-0);
469
473
  @property st-global(--wds-color-purple-50);
470
474
  @property st-global(--wds-color-purple-100);
@@ -713,6 +717,8 @@
713
717
  @property st-global(--wds-list-item-padding-vertical-tiny);
714
718
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
715
719
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
720
+ @property st-global(--wds-list-item-section-font-size);
721
+ @property st-global(--wds-list-item-section-line-height);
716
722
  @property st-global(--wds-list-item-section-padding-horizontal);
717
723
  @property st-global(--wds-list-item-select-active-fill);
718
724
  @property st-global(--wds-list-item-select-active-fill-active);
@@ -1043,6 +1049,8 @@
1043
1049
  @property st-global(--wds-swatches-swatch-size-large);
1044
1050
  @property st-global(--wds-swatches-swatch-size-medium);
1045
1051
  @property st-global(--wds-swatches-swatch-size-small);
1052
+ @property st-global(--wds-swatches-swatch-size-tiny);
1053
+ @property st-global(--wds-swatches-swatch-size-x-tiny);
1046
1054
  @property st-global(--wds-tabs-gap-medium);
1047
1055
  @property st-global(--wds-tabs-gap-small);
1048
1056
  @property st-global(--wds-tabs-label-font-size-small);
@@ -1119,12 +1127,14 @@
1119
1127
  @property st-global(--wds-toggle-switch-width-large);
1120
1128
  @property st-global(--wds-toggle-switch-width-medium);
1121
1129
  @property st-global(--wds-toggle-switch-width-small);
1130
+ @property st-global(--wds-tooltip-background-fill);
1122
1131
  @property st-global(--wds-tooltip-border-radius-medium);
1123
1132
  @property st-global(--wds-tooltip-border-radius-small);
1124
1133
  @property st-global(--wds-tooltip-padding-horizontal-medium);
1125
1134
  @property st-global(--wds-tooltip-padding-horizontal-small);
1126
1135
  @property st-global(--wds-tooltip-padding-vertical-medium);
1127
1136
  @property st-global(--wds-tooltip-padding-vertical-small);
1137
+ @property st-global(--wds-tooltip-text-fill);
1128
1138
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
1129
1139
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
1130
1140
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
@@ -1217,6 +1227,7 @@
1217
1227
  --wds-border-radius-500: 10px;
1218
1228
  --wds-border-radius-600: 12px;
1219
1229
  --wds-border-radius-full: 1000px;
1230
+ --wds-border-radius-surface-default: 8px;
1220
1231
  --wds-border-radius-surface-modal: 8px;
1221
1232
  --wds-border-radius-surface-overlay: 8px;
1222
1233
  --wds-border-width-100: 1px;
@@ -1655,6 +1666,9 @@
1655
1666
  --wds-color-orange-400: #fddbc8;
1656
1667
  --wds-color-orange-500: #fee5d7;
1657
1668
  --wds-color-orange-600: #feefe6;
1669
+ --wds-color-picker-padding-horizontal: 18px;
1670
+ --wds-color-picker-padding-vertical: 12px;
1671
+ --wds-color-picker-width: 240px;
1658
1672
  --wds-color-purple-0: #7416a5;
1659
1673
  --wds-color-purple-50: #8e1dd1;
1660
1674
  --wds-color-purple-100: #9a27d5;
@@ -1903,6 +1917,8 @@
1903
1917
  --wds-list-item-padding-vertical-tiny: 12px;
1904
1918
  --wds-list-item-padding-vertical-x-tiny: 6px;
1905
1919
  --wds-list-item-padding-vertical-xx-tiny: 3px;
1920
+ --wds-list-item-section-font-size: 14px;
1921
+ --wds-list-item-section-line-height: 18px;
1906
1922
  --wds-list-item-section-padding-horizontal: 24px;
1907
1923
  --wds-list-item-select-active-fill: #116dff;
1908
1924
  --wds-list-item-select-active-fill-active: #084ebd;
@@ -2230,9 +2246,11 @@
2230
2246
  --wds-swatches-swatch-active-border-radius-small: 5px;
2231
2247
  --wds-swatches-swatch-border-radius-medium: 6px;
2232
2248
  --wds-swatches-swatch-border-radius-small: 2px;
2233
- --wds-swatches-swatch-size-large: 30px;
2234
- --wds-swatches-swatch-size-medium: 24px;
2235
- --wds-swatches-swatch-size-small: 18px;
2249
+ --wds-swatches-swatch-size-large: 42px;
2250
+ --wds-swatches-swatch-size-medium: 36px;
2251
+ --wds-swatches-swatch-size-small: 30px;
2252
+ --wds-swatches-swatch-size-tiny: 24px;
2253
+ --wds-swatches-swatch-size-x-tiny: 18px;
2236
2254
  --wds-tabs-gap-medium: 6px;
2237
2255
  --wds-tabs-gap-small: 6px;
2238
2256
  --wds-tabs-label-font-size-small: 14px;
@@ -2309,12 +2327,14 @@
2309
2327
  --wds-toggle-switch-width-large: 46px;
2310
2328
  --wds-toggle-switch-width-medium: 34px;
2311
2329
  --wds-toggle-switch-width-small: 28px;
2330
+ --wds-tooltip-background-fill: #000624;
2312
2331
  --wds-tooltip-border-radius-medium: 8px;
2313
2332
  --wds-tooltip-border-radius-small: 8px;
2314
2333
  --wds-tooltip-padding-horizontal-medium: 24px;
2315
2334
  --wds-tooltip-padding-horizontal-small: 12px;
2316
2335
  --wds-tooltip-padding-vertical-medium: 12px;
2317
2336
  --wds-tooltip-padding-vertical-small: 6px;
2337
+ --wds-tooltip-text-fill: #ffffff;
2318
2338
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
2319
2339
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
2320
2340
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
package/component.st.css CHANGED
@@ -120,6 +120,9 @@
120
120
  @property st-global(--wds-close-button-standard-filled-text);
121
121
  @property st-global(--wds-close-button-standard-filled-text-disabled);
122
122
  @property st-global(--wds-close-button-standard-filled-text-hover);
123
+ @property st-global(--wds-color-picker-padding-horizontal);
124
+ @property st-global(--wds-color-picker-padding-vertical);
125
+ @property st-global(--wds-color-picker-width);
123
126
  @property st-global(--wds-composer-sidebar-bottom-width);
124
127
  @property st-global(--wds-composer-sidebar-end-max-width);
125
128
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
@@ -265,6 +268,8 @@
265
268
  @property st-global(--wds-list-item-padding-vertical-tiny);
266
269
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
267
270
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
271
+ @property st-global(--wds-list-item-section-font-size);
272
+ @property st-global(--wds-list-item-section-line-height);
268
273
  @property st-global(--wds-list-item-section-padding-horizontal);
269
274
  @property st-global(--wds-list-item-select-active-fill);
270
275
  @property st-global(--wds-list-item-select-active-fill-active);
@@ -529,6 +534,8 @@
529
534
  @property st-global(--wds-swatches-swatch-size-large);
530
535
  @property st-global(--wds-swatches-swatch-size-medium);
531
536
  @property st-global(--wds-swatches-swatch-size-small);
537
+ @property st-global(--wds-swatches-swatch-size-tiny);
538
+ @property st-global(--wds-swatches-swatch-size-x-tiny);
532
539
  @property st-global(--wds-tabs-gap-medium);
533
540
  @property st-global(--wds-tabs-gap-small);
534
541
  @property st-global(--wds-tabs-label-font-size-small);
@@ -605,12 +612,14 @@
605
612
  @property st-global(--wds-toggle-switch-width-large);
606
613
  @property st-global(--wds-toggle-switch-width-medium);
607
614
  @property st-global(--wds-toggle-switch-width-small);
615
+ @property st-global(--wds-tooltip-background-fill);
608
616
  @property st-global(--wds-tooltip-border-radius-medium);
609
617
  @property st-global(--wds-tooltip-border-radius-small);
610
618
  @property st-global(--wds-tooltip-padding-horizontal-medium);
611
619
  @property st-global(--wds-tooltip-padding-horizontal-small);
612
620
  @property st-global(--wds-tooltip-padding-vertical-medium);
613
621
  @property st-global(--wds-tooltip-padding-vertical-small);
622
+ @property st-global(--wds-tooltip-text-fill);
614
623
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
615
624
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
616
625
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
@@ -796,6 +805,9 @@
796
805
  --wds-close-button-standard-filled-text: #116dff;
797
806
  --wds-close-button-standard-filled-text-disabled: #ffffff;
798
807
  --wds-close-button-standard-filled-text-hover: #116dff;
808
+ --wds-color-picker-padding-horizontal: 18px;
809
+ --wds-color-picker-padding-vertical: 12px;
810
+ --wds-color-picker-width: 240px;
799
811
  --wds-composer-sidebar-bottom-width: 90px;
800
812
  --wds-composer-sidebar-end-max-width: 240px;
801
813
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 6px;
@@ -941,6 +953,8 @@
941
953
  --wds-list-item-padding-vertical-tiny: 12px;
942
954
  --wds-list-item-padding-vertical-x-tiny: 6px;
943
955
  --wds-list-item-padding-vertical-xx-tiny: 3px;
956
+ --wds-list-item-section-font-size: 14px;
957
+ --wds-list-item-section-line-height: 18px;
944
958
  --wds-list-item-section-padding-horizontal: 24px;
945
959
  --wds-list-item-select-active-fill: #116dff;
946
960
  --wds-list-item-select-active-fill-active: #084ebd;
@@ -1202,9 +1216,11 @@
1202
1216
  --wds-swatches-swatch-active-border-radius-small: 5px;
1203
1217
  --wds-swatches-swatch-border-radius-medium: 6px;
1204
1218
  --wds-swatches-swatch-border-radius-small: 2px;
1205
- --wds-swatches-swatch-size-large: 30px;
1206
- --wds-swatches-swatch-size-medium: 24px;
1207
- --wds-swatches-swatch-size-small: 18px;
1219
+ --wds-swatches-swatch-size-large: 42px;
1220
+ --wds-swatches-swatch-size-medium: 36px;
1221
+ --wds-swatches-swatch-size-small: 30px;
1222
+ --wds-swatches-swatch-size-tiny: 24px;
1223
+ --wds-swatches-swatch-size-x-tiny: 18px;
1208
1224
  --wds-tabs-gap-medium: 6px;
1209
1225
  --wds-tabs-gap-small: 6px;
1210
1226
  --wds-tabs-label-font-size-small: 14px;
@@ -1281,12 +1297,14 @@
1281
1297
  --wds-toggle-switch-width-large: 46px;
1282
1298
  --wds-toggle-switch-width-medium: 34px;
1283
1299
  --wds-toggle-switch-width-small: 28px;
1300
+ --wds-tooltip-background-fill: #000624;
1284
1301
  --wds-tooltip-border-radius-medium: 8px;
1285
1302
  --wds-tooltip-border-radius-small: 8px;
1286
1303
  --wds-tooltip-padding-horizontal-medium: 24px;
1287
1304
  --wds-tooltip-padding-horizontal-small: 12px;
1288
1305
  --wds-tooltip-padding-vertical-medium: 12px;
1289
1306
  --wds-tooltip-padding-vertical-small: 6px;
1307
+ --wds-tooltip-text-fill: #ffffff;
1290
1308
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
1291
1309
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
1292
1310
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.78.0",
3
+ "version": "1.80.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": "402ddf1fc2e468e101290c38189803157a1b42d3d57d07a7fd0d4b59"
36
+ "falconPackageHash": "990277769a4f986881badba57e5ece5d55f435c1924fc66c059016d5"
37
37
  }
package/semantic.st.css CHANGED
@@ -1,3 +1,4 @@
1
+ @property st-global(--wds-border-radius-surface-default);
1
2
  @property st-global(--wds-border-radius-surface-modal);
2
3
  @property st-global(--wds-border-radius-surface-overlay);
3
4
  @property st-global(--wds-color-border-ai-primary);
@@ -343,6 +344,7 @@
343
344
  @property st-global(--wds-space-padding-vertical-xx-tiny);
344
345
 
345
346
  .root {
347
+ --wds-border-radius-surface-default: 8px;
346
348
  --wds-border-radius-surface-modal: 8px;
347
349
  --wds-border-radius-surface-overlay: 8px;
348
350
  --wds-color-border-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
package/studio/all.css CHANGED
@@ -121,6 +121,9 @@
121
121
  --wds-close-button-standard-filled-text: #ffffff;
122
122
  --wds-close-button-standard-filled-text-disabled: #ffffff;
123
123
  --wds-close-button-standard-filled-text-hover: #ffffff;
124
+ --wds-color-picker-padding-horizontal: 16px;
125
+ --wds-color-picker-padding-vertical: 12px;
126
+ --wds-color-picker-width: 236px;
124
127
  --wds-composer-sidebar-bottom-width: 88px;
125
128
  --wds-composer-sidebar-end-max-width: 240px;
126
129
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
@@ -266,6 +269,8 @@
266
269
  --wds-list-item-action-padding-vertical-medium-screen-small: 8px;
267
270
  --wds-list-item-action-padding-vertical-small: 4px;
268
271
  --wds-list-item-action-padding-vertical-small-screen-small: 8px;
272
+ --wds-list-item-section-font-size: 12px;
273
+ --wds-list-item-section-line-height: 16px;
269
274
  --wds-list-item-section-padding-horizontal: 16px;
270
275
  --wds-list-item-select-active-fill: #dce9ff;
271
276
  --wds-list-item-select-active-fill-active: #dce9ff;
@@ -526,9 +531,11 @@
526
531
  --wds-swatches-swatch-active-border-radius-small: 5px;
527
532
  --wds-swatches-swatch-border-radius-medium: 4px;
528
533
  --wds-swatches-swatch-border-radius-small: 2px;
529
- --wds-swatches-swatch-size-large: 28px;
530
- --wds-swatches-swatch-size-medium: 24px;
531
- --wds-swatches-swatch-size-small: 18px;
534
+ --wds-swatches-swatch-size-large: 36px;
535
+ --wds-swatches-swatch-size-medium: 32px;
536
+ --wds-swatches-swatch-size-small: 28px;
537
+ --wds-swatches-swatch-size-tiny: 24px;
538
+ --wds-swatches-swatch-size-x-tiny: 18px;
532
539
  --wds-tabs-gap-medium: 8px;
533
540
  --wds-tabs-gap-small: 6px;
534
541
  --wds-tabs-label-font-size-small: 12px;
@@ -605,12 +612,14 @@
605
612
  --wds-toggle-switch-width-large: 40px;
606
613
  --wds-toggle-switch-width-medium: 28px;
607
614
  --wds-toggle-switch-width-small: 24px;
615
+ --wds-tooltip-background-fill: #ffffff;
608
616
  --wds-tooltip-border-radius-medium: 8px;
609
617
  --wds-tooltip-border-radius-small: 8px;
610
618
  --wds-tooltip-padding-horizontal-medium: 16px;
611
619
  --wds-tooltip-padding-horizontal-small: 8px;
612
620
  --wds-tooltip-padding-vertical-medium: 8px;
613
621
  --wds-tooltip-padding-vertical-small: 4px;
622
+ --wds-tooltip-text-fill: #131720;
614
623
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
615
624
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
616
625
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
@@ -1180,6 +1189,7 @@
1180
1189
  --wds-space-padding-vertical-tiny: 12px;
1181
1190
  --wds-space-padding-vertical-x-tiny: 8px;
1182
1191
  --wds-space-padding-vertical-xx-tiny: 4px;
1192
+ --wds-border-radius-surface-default: 4px;
1183
1193
  --wds-border-radius-surface-modal: 4px;
1184
1194
  --wds-border-radius-surface-overlay: 4px;
1185
1195
  }
package/studio/all.st.css CHANGED
@@ -27,6 +27,7 @@
27
27
  @property st-global(--wds-border-radius-500);
28
28
  @property st-global(--wds-border-radius-600);
29
29
  @property st-global(--wds-border-radius-full);
30
+ @property st-global(--wds-border-radius-surface-default);
30
31
  @property st-global(--wds-border-radius-surface-modal);
31
32
  @property st-global(--wds-border-radius-surface-overlay);
32
33
  @property st-global(--wds-border-width-100);
@@ -461,6 +462,9 @@
461
462
  @property st-global(--wds-color-orange-400);
462
463
  @property st-global(--wds-color-orange-500);
463
464
  @property st-global(--wds-color-orange-600);
465
+ @property st-global(--wds-color-picker-padding-horizontal);
466
+ @property st-global(--wds-color-picker-padding-vertical);
467
+ @property st-global(--wds-color-picker-width);
464
468
  @property st-global(--wds-color-purple-0);
465
469
  @property st-global(--wds-color-purple-50);
466
470
  @property st-global(--wds-color-purple-100);
@@ -709,6 +713,8 @@
709
713
  @property st-global(--wds-list-item-padding-vertical-tiny);
710
714
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
711
715
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
716
+ @property st-global(--wds-list-item-section-font-size);
717
+ @property st-global(--wds-list-item-section-line-height);
712
718
  @property st-global(--wds-list-item-section-padding-horizontal);
713
719
  @property st-global(--wds-list-item-select-active-fill);
714
720
  @property st-global(--wds-list-item-select-active-fill-active);
@@ -1038,6 +1044,8 @@
1038
1044
  @property st-global(--wds-swatches-swatch-size-large);
1039
1045
  @property st-global(--wds-swatches-swatch-size-medium);
1040
1046
  @property st-global(--wds-swatches-swatch-size-small);
1047
+ @property st-global(--wds-swatches-swatch-size-tiny);
1048
+ @property st-global(--wds-swatches-swatch-size-x-tiny);
1041
1049
  @property st-global(--wds-tabs-gap-medium);
1042
1050
  @property st-global(--wds-tabs-gap-small);
1043
1051
  @property st-global(--wds-tabs-label-font-size-small);
@@ -1114,12 +1122,14 @@
1114
1122
  @property st-global(--wds-toggle-switch-width-large);
1115
1123
  @property st-global(--wds-toggle-switch-width-medium);
1116
1124
  @property st-global(--wds-toggle-switch-width-small);
1125
+ @property st-global(--wds-tooltip-background-fill);
1117
1126
  @property st-global(--wds-tooltip-border-radius-medium);
1118
1127
  @property st-global(--wds-tooltip-border-radius-small);
1119
1128
  @property st-global(--wds-tooltip-padding-horizontal-medium);
1120
1129
  @property st-global(--wds-tooltip-padding-horizontal-small);
1121
1130
  @property st-global(--wds-tooltip-padding-vertical-medium);
1122
1131
  @property st-global(--wds-tooltip-padding-vertical-small);
1132
+ @property st-global(--wds-tooltip-text-fill);
1123
1133
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
1124
1134
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
1125
1135
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
@@ -1212,6 +1222,7 @@
1212
1222
  --wds-border-radius-500: 10px;
1213
1223
  --wds-border-radius-600: 12px;
1214
1224
  --wds-border-radius-full: 1000px;
1225
+ --wds-border-radius-surface-default: 4px;
1215
1226
  --wds-border-radius-surface-modal: 4px;
1216
1227
  --wds-border-radius-surface-overlay: 4px;
1217
1228
  --wds-border-width-100: 1px;
@@ -1646,6 +1657,9 @@
1646
1657
  --wds-color-orange-400: #fdd7cc;
1647
1658
  --wds-color-orange-500: #fee8e1;
1648
1659
  --wds-color-orange-600: #feefea;
1660
+ --wds-color-picker-padding-horizontal: 16px;
1661
+ --wds-color-picker-padding-vertical: 12px;
1662
+ --wds-color-picker-width: 236px;
1649
1663
  --wds-color-purple-0: #7927a3;
1650
1664
  --wds-color-purple-50: #8e1dd1;
1651
1665
  --wds-color-purple-100: #9a27d5;
@@ -1894,6 +1908,8 @@
1894
1908
  --wds-list-item-padding-vertical-tiny: 12px;
1895
1909
  --wds-list-item-padding-vertical-x-tiny: 8px;
1896
1910
  --wds-list-item-padding-vertical-xx-tiny: 4px;
1911
+ --wds-list-item-section-font-size: 12px;
1912
+ --wds-list-item-section-line-height: 16px;
1897
1913
  --wds-list-item-section-padding-horizontal: 16px;
1898
1914
  --wds-list-item-select-active-fill: #dce9ff;
1899
1915
  --wds-list-item-select-active-fill-active: #dce9ff;
@@ -2220,9 +2236,11 @@
2220
2236
  --wds-swatches-swatch-active-border-radius-small: 5px;
2221
2237
  --wds-swatches-swatch-border-radius-medium: 4px;
2222
2238
  --wds-swatches-swatch-border-radius-small: 2px;
2223
- --wds-swatches-swatch-size-large: 28px;
2224
- --wds-swatches-swatch-size-medium: 24px;
2225
- --wds-swatches-swatch-size-small: 18px;
2239
+ --wds-swatches-swatch-size-large: 36px;
2240
+ --wds-swatches-swatch-size-medium: 32px;
2241
+ --wds-swatches-swatch-size-small: 28px;
2242
+ --wds-swatches-swatch-size-tiny: 24px;
2243
+ --wds-swatches-swatch-size-x-tiny: 18px;
2226
2244
  --wds-tabs-gap-medium: 8px;
2227
2245
  --wds-tabs-gap-small: 6px;
2228
2246
  --wds-tabs-label-font-size-small: 12px;
@@ -2299,12 +2317,14 @@
2299
2317
  --wds-toggle-switch-width-large: 40px;
2300
2318
  --wds-toggle-switch-width-medium: 28px;
2301
2319
  --wds-toggle-switch-width-small: 24px;
2320
+ --wds-tooltip-background-fill: #ffffff;
2302
2321
  --wds-tooltip-border-radius-medium: 8px;
2303
2322
  --wds-tooltip-border-radius-small: 8px;
2304
2323
  --wds-tooltip-padding-horizontal-medium: 16px;
2305
2324
  --wds-tooltip-padding-horizontal-small: 8px;
2306
2325
  --wds-tooltip-padding-vertical-medium: 8px;
2307
2326
  --wds-tooltip-padding-vertical-small: 4px;
2327
+ --wds-tooltip-text-fill: #131720;
2308
2328
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
2309
2329
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
2310
2330
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
package/studio/component.st.css CHANGED
@@ -120,6 +120,9 @@
120
120
  @property st-global(--wds-close-button-standard-filled-text);
121
121
  @property st-global(--wds-close-button-standard-filled-text-disabled);
122
122
  @property st-global(--wds-close-button-standard-filled-text-hover);
123
+ @property st-global(--wds-color-picker-padding-horizontal);
124
+ @property st-global(--wds-color-picker-padding-vertical);
125
+ @property st-global(--wds-color-picker-width);
123
126
  @property st-global(--wds-composer-sidebar-bottom-width);
124
127
  @property st-global(--wds-composer-sidebar-end-max-width);
125
128
  @property st-global(--wds-composer-sidebar-item-bottom-padding-horizontal-large);
@@ -265,6 +268,8 @@
265
268
  @property st-global(--wds-list-item-padding-vertical-tiny);
266
269
  @property st-global(--wds-list-item-padding-vertical-x-tiny);
267
270
  @property st-global(--wds-list-item-padding-vertical-xx-tiny);
271
+ @property st-global(--wds-list-item-section-font-size);
272
+ @property st-global(--wds-list-item-section-line-height);
268
273
  @property st-global(--wds-list-item-section-padding-horizontal);
269
274
  @property st-global(--wds-list-item-select-active-fill);
270
275
  @property st-global(--wds-list-item-select-active-fill-active);
@@ -528,6 +533,8 @@
528
533
  @property st-global(--wds-swatches-swatch-size-large);
529
534
  @property st-global(--wds-swatches-swatch-size-medium);
530
535
  @property st-global(--wds-swatches-swatch-size-small);
536
+ @property st-global(--wds-swatches-swatch-size-tiny);
537
+ @property st-global(--wds-swatches-swatch-size-x-tiny);
531
538
  @property st-global(--wds-tabs-gap-medium);
532
539
  @property st-global(--wds-tabs-gap-small);
533
540
  @property st-global(--wds-tabs-label-font-size-small);
@@ -604,12 +611,14 @@
604
611
  @property st-global(--wds-toggle-switch-width-large);
605
612
  @property st-global(--wds-toggle-switch-width-medium);
606
613
  @property st-global(--wds-toggle-switch-width-small);
614
+ @property st-global(--wds-tooltip-background-fill);
607
615
  @property st-global(--wds-tooltip-border-radius-medium);
608
616
  @property st-global(--wds-tooltip-border-radius-small);
609
617
  @property st-global(--wds-tooltip-padding-horizontal-medium);
610
618
  @property st-global(--wds-tooltip-padding-horizontal-small);
611
619
  @property st-global(--wds-tooltip-padding-vertical-medium);
612
620
  @property st-global(--wds-tooltip-padding-vertical-small);
621
+ @property st-global(--wds-tooltip-text-fill);
613
622
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
614
623
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-small);
615
624
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-tiny);
@@ -795,6 +804,9 @@
795
804
  --wds-close-button-standard-filled-text: #ffffff;
796
805
  --wds-close-button-standard-filled-text-disabled: #ffffff;
797
806
  --wds-close-button-standard-filled-text-hover: #ffffff;
807
+ --wds-color-picker-padding-horizontal: 16px;
808
+ --wds-color-picker-padding-vertical: 12px;
809
+ --wds-color-picker-width: 236px;
798
810
  --wds-composer-sidebar-bottom-width: 88px;
799
811
  --wds-composer-sidebar-end-max-width: 240px;
800
812
  --wds-composer-sidebar-item-bottom-padding-horizontal-large: 4px;
@@ -940,6 +952,8 @@
940
952
  --wds-list-item-padding-vertical-tiny: 12px;
941
953
  --wds-list-item-padding-vertical-x-tiny: 8px;
942
954
  --wds-list-item-padding-vertical-xx-tiny: 4px;
955
+ --wds-list-item-section-font-size: 12px;
956
+ --wds-list-item-section-line-height: 16px;
943
957
  --wds-list-item-section-padding-horizontal: 16px;
944
958
  --wds-list-item-select-active-fill: #dce9ff;
945
959
  --wds-list-item-select-active-fill-active: #dce9ff;
@@ -1200,9 +1214,11 @@
1200
1214
  --wds-swatches-swatch-active-border-radius-small: 5px;
1201
1215
  --wds-swatches-swatch-border-radius-medium: 4px;
1202
1216
  --wds-swatches-swatch-border-radius-small: 2px;
1203
- --wds-swatches-swatch-size-large: 28px;
1204
- --wds-swatches-swatch-size-medium: 24px;
1205
- --wds-swatches-swatch-size-small: 18px;
1217
+ --wds-swatches-swatch-size-large: 36px;
1218
+ --wds-swatches-swatch-size-medium: 32px;
1219
+ --wds-swatches-swatch-size-small: 28px;
1220
+ --wds-swatches-swatch-size-tiny: 24px;
1221
+ --wds-swatches-swatch-size-x-tiny: 18px;
1206
1222
  --wds-tabs-gap-medium: 8px;
1207
1223
  --wds-tabs-gap-small: 6px;
1208
1224
  --wds-tabs-label-font-size-small: 12px;
@@ -1279,12 +1295,14 @@
1279
1295
  --wds-toggle-switch-width-large: 40px;
1280
1296
  --wds-toggle-switch-width-medium: 28px;
1281
1297
  --wds-toggle-switch-width-small: 24px;
1298
+ --wds-tooltip-background-fill: #ffffff;
1282
1299
  --wds-tooltip-border-radius-medium: 8px;
1283
1300
  --wds-tooltip-border-radius-small: 8px;
1284
1301
  --wds-tooltip-padding-horizontal-medium: 16px;
1285
1302
  --wds-tooltip-padding-horizontal-small: 8px;
1286
1303
  --wds-tooltip-padding-vertical-medium: 8px;
1287
1304
  --wds-tooltip-padding-vertical-small: 4px;
1305
+ --wds-tooltip-text-fill: #131720;
1288
1306
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
1289
1307
  --wds-vertical-tabs-action-padding-horizontal-small: 24px;
1290
1308
  --wds-vertical-tabs-action-padding-horizontal-tiny: 24px;
package/studio/semantic.st.css CHANGED
@@ -1,3 +1,4 @@
1
+ @property st-global(--wds-border-radius-surface-default);
1
2
  @property st-global(--wds-border-radius-surface-modal);
2
3
  @property st-global(--wds-border-radius-surface-overlay);
3
4
  @property st-global(--wds-color-border-ai-primary);
@@ -339,6 +340,7 @@
339
340
  @property st-global(--wds-space-padding-vertical-xx-tiny);
340
341
 
341
342
  .root {
343
+ --wds-border-radius-surface-default: 4px;
342
344
  --wds-border-radius-surface-modal: 4px;
343
345
  --wds-border-radius-surface-overlay: 4px;
344
346
  --wds-color-border-ai-primary: #5a48f5;