@wix/design-system-tokens 1.232.5 → 1.233.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 (25) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/all.css +54 -0
  3. package/all.scss +54 -0
  4. package/all.st.css +108 -0
  5. package/component.st.css +108 -0
  6. package/odeditor/all.css +78 -24
  7. package/odeditor/all.scss +78 -24
  8. package/odeditor/all.st.css +130 -22
  9. package/odeditor/component.st.css +113 -5
  10. package/odeditor/semantic.st.css +17 -17
  11. package/odeditor-dark/all.css +150 -94
  12. package/odeditor-dark/all.scss +150 -94
  13. package/odeditor-dark/all.st.css +203 -91
  14. package/odeditor-dark/component.st.css +186 -74
  15. package/odeditor-dark/semantic.st.css +17 -17
  16. package/package.json +2 -2
  17. package/studio/all.css +56 -0
  18. package/studio/all.scss +56 -0
  19. package/studio/all.st.css +112 -0
  20. package/studio/component.st.css +112 -0
  21. package/studio2-light/all.css +150 -94
  22. package/studio2-light/all.scss +150 -94
  23. package/studio2-light/all.st.css +203 -91
  24. package/studio2-light/component.st.css +186 -74
  25. package/studio2-light/semantic.st.css +17 -17
package/studio/all.scss CHANGED
@@ -219,6 +219,14 @@
219
219
  --wds-illustration-color-3: #B8C4FF;
220
220
  --wds-illustration-color-2: #7896FF;
221
221
  --wds-illustration-color-1: #002291;
222
+ --wds-icon-button-color-fill-ai-tertiary-active: transparent;
223
+ --wds-icon-button-color-border-ai-secondary-hover: transparent;
224
+ --wds-icon-button-color-border-ai-secondary-active: transparent;
225
+ --wds-icon-button-color-border-ai-secondary: transparent;
226
+ --wds-icon-button-color-border-ai-primary-hover: transparent;
227
+ --wds-icon-button-color-border-ai-primary-active: transparent;
228
+ --wds-icon-button-color-border-ai-primary: transparent;
229
+ --wds-icon-button-border-ai-secondary-ring-display: block;
222
230
  --wds-horizontal-scroll-button-text: #000624;
223
231
  --wds-horizontal-scroll-button-fill-active: #CFD1DC;
224
232
  --wds-horizontal-scroll-button-fill: #FFFFFF;
@@ -503,7 +511,13 @@
503
511
  --wds-button-icon-offset-small: 12px;
504
512
  --wds-button-icon-offset-medium: 18px;
505
513
  --wds-button-icon-offset-large: 18px;
514
+ --wds-button-fill-ai-tertiary: transparent;
515
+ --wds-button-border-ai-tertiary-disabled: transparent;
516
+ --wds-button-border-ai-secondary-ring-display: block;
506
517
  --wds-button-border-ai-secondary-mask: none;
518
+ --wds-button-border-ai-secondary-hover: transparent;
519
+ --wds-button-border-ai-secondary-active: transparent;
520
+ --wds-button-border-ai-secondary: transparent;
507
521
  --wds-breakpoint-x-large: 1572px;
508
522
  --wds-breakpoint-small: 490px;
509
523
  --wds-breakpoint-medium: 768px;
@@ -1308,12 +1322,17 @@
1308
1322
  --wds-icon-button-color-text-light-primary-disabled: var(--wds-color-text-disabled);
1309
1323
  --wds-icon-button-color-text-dark-tertiary-disabled: var(--wds-color-text-disabled);
1310
1324
  --wds-icon-button-color-text-dark-secondary-disabled: var(--wds-color-text-disabled);
1325
+ --wds-icon-button-color-text-ai-tertiary-disabled: var(--wds-color-fill-dark-primary-disabled);
1326
+ --wds-icon-button-color-text-ai-secondary-disabled: var(--wds-color-text-disabled);
1311
1327
  --wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-black-750);
1312
1328
  --wds-icon-button-color-fill-standard-primary-disabled: var(--wds-color-white-transparent-0);
1313
1329
  --wds-icon-button-color-fill-standard-primary-active: var(--wds-color-blue-500);
1314
1330
  --wds-icon-button-color-fill-standard-primary: var(--wds-color-white-transparent-0);
1315
1331
  --wds-icon-button-color-fill-premium-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1316
1332
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1333
+ --wds-icon-button-color-fill-ai-primary-disabled: var(--wds-color-fill-ai-primary-disabled);
1334
+ --wds-icon-button-color-border-ai-secondary-disabled: var(--wds-color-text-disabled);
1335
+ --wds-icon-button-border-ai-width: var(--wds-border-width-none);
1317
1336
  --wds-google-preview-surface-fill: var(--wds-color-white);
1318
1337
  --wds-form-field-label-gap-tiny: var(--wds-space-150);
1319
1338
  --wds-form-field-label-gap-small: var(--wds-space-200);
@@ -1762,6 +1781,8 @@
1762
1781
  --wds-card-gallery-item-buttons-gap: var(--wds-space-100);
1763
1782
  --wds-card-gallery-item-border-radius-100: var(--wds-border-radius-400);
1764
1783
  --wds-card-gallery-item-border-radius-0: var(--wds-border-radius-0);
1784
+ --wds-card-gallery-item-actions-clearance-top: var(--wds-space-200);
1785
+ --wds-card-gallery-item-actions-clearance-bottom: var(--wds-space-200);
1765
1786
  --wds-card-gallery-item-action-button-size: var(--wds-space-800);
1766
1787
  --wds-card-gallery-item-action-button-padding-vertical: var(--wds-space-150);
1767
1788
  --wds-card-gallery-item-action-button-padding-horizontal: var(--wds-space-400);
@@ -1808,6 +1829,8 @@
1808
1829
  --wds-button-label-fill-standard-secondary-disabled: var(--wds-color-text-disabled);
1809
1830
  --wds-button-label-fill-premium-secondary-disabled: var(--wds-color-text-disabled);
1810
1831
  --wds-button-label-fill-dark-secondary-disabled: var(--wds-color-text-disabled);
1832
+ --wds-button-label-fill-ai-tertiary-disabled: var(--wds-color-text-disabled);
1833
+ --wds-button-label-fill-ai-secondary-disabled: var(--wds-color-text-disabled);
1811
1834
  --wds-button-gap-tiny: var(--wds-space-100);
1812
1835
  --wds-button-gap-small: var(--wds-space-100);
1813
1836
  --wds-button-gap-medium: var(--wds-space-100);
@@ -1820,6 +1843,8 @@
1820
1843
  --wds-button-fill-premium-primary-disabled: var(--wds-color-fill-premium-primary-disabled);
1821
1844
  --wds-button-fill-destructive-primary-disabled: var(--wds-color-fill-standard-primary-disabled);
1822
1845
  --wds-button-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
1846
+ --wds-button-fill-ai-tertiary-disabled: var(--wds-color-fill-ai-secondary-disabled);
1847
+ --wds-button-fill-ai-primary-disabled: var(--wds-color-fill-ai-primary-disabled);
1823
1848
  --wds-button-border-radius-tiny: var(--wds-border-radius-200);
1824
1849
  --wds-button-border-radius-small: var(--wds-border-radius-200);
1825
1850
  --wds-button-border-radius-medium: var(--wds-border-radius-200);
@@ -2310,6 +2335,14 @@
2310
2335
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-text-disabled-light);
2311
2336
  --wds-icon-button-color-text-dark-primary-active: var(--wds-color-text-standard-primary-light);
2312
2337
  --wds-icon-button-color-text-dark-primary: var(--wds-color-text-standard-primary-light);
2338
+ --wds-icon-button-color-text-ai-tertiary-hover: var(--wds-color-text-primary);
2339
+ --wds-icon-button-color-text-ai-tertiary-active: var(--wds-color-text-primary);
2340
+ --wds-icon-button-color-text-ai-tertiary: var(--wds-color-text-primary);
2341
+ --wds-icon-button-color-text-ai-secondary-hover: var(--wds-color-text-standard-primary-light);
2342
+ --wds-icon-button-color-text-ai-secondary-active: var(--wds-color-text-standard-primary-light);
2343
+ --wds-icon-button-color-text-ai-secondary: var(--wds-color-text-primary);
2344
+ --wds-icon-button-color-text-ai-primary-disabled: var(--wds-color-text-disabled-light);
2345
+ --wds-icon-button-color-text-ai-primary: var(--wds-color-text-standard-primary-light);
2313
2346
  --wds-icon-button-color-fill-standard-tertiary-hover: var(--wds-color-fill-light-secondary-hover);
2314
2347
  --wds-icon-button-color-fill-standard-tertiary-disabled: var(--wds-color-fill-light-secondary-disabled);
2315
2348
  --wds-icon-button-color-fill-standard-tertiary-active: var(--wds-color-fill-light-secondary-active);
@@ -2352,6 +2385,16 @@
2352
2385
  --wds-icon-button-color-fill-dark-primary-hover: var(--wds-color-fill-dark-primary-hover);
2353
2386
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
2354
2387
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
2388
+ --wds-icon-button-color-fill-ai-tertiary-hover: var(--wds-color-fill-standard-tertiary);
2389
+ --wds-icon-button-color-fill-ai-tertiary-disabled: var(--wds-color-fill-standard-tertiary);
2390
+ --wds-icon-button-color-fill-ai-tertiary: var(--wds-color-fill-standard-tertiary);
2391
+ --wds-icon-button-color-fill-ai-secondary-hover: var(--wds-color-fill-ai-primary-hover);
2392
+ --wds-icon-button-color-fill-ai-secondary-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2393
+ --wds-icon-button-color-fill-ai-secondary-active: var(--wds-color-fill-ai-primary-active);
2394
+ --wds-icon-button-color-fill-ai-secondary: var(--wds-color-fill-ai-primary);
2395
+ --wds-icon-button-color-fill-ai-primary-hover: var(--wds-color-fill-ai-primary-hover);
2396
+ --wds-icon-button-color-fill-ai-primary-active: var(--wds-color-fill-ai-primary-active);
2397
+ --wds-icon-button-color-fill-ai-primary: var(--wds-color-fill-ai-primary);
2355
2398
  --wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-border-standard-secondary-hover);
2356
2399
  --wds-icon-button-color-border-standard-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
2357
2400
  --wds-icon-button-color-border-standard-secondary-active: var(--wds-color-border-standard-secondary-active);
@@ -2492,6 +2535,13 @@
2492
2535
  --wds-button-label-fill-dark-secondary-active: var(--wds-color-text-standard-primary-light);
2493
2536
  --wds-button-label-fill-dark-secondary: var(--wds-color-text-standard-primary);
2494
2537
  --wds-button-label-fill-dark-primary-disabled: var(--wds-color-text-disabled-light);
2538
+ --wds-button-label-fill-ai-tertiary-hover: var(--wds-color-text-standard-primary-light);
2539
+ --wds-button-label-fill-ai-tertiary-active: var(--wds-color-text-standard-primary-light);
2540
+ --wds-button-label-fill-ai-tertiary: var(--wds-color-fill-ai-primary);
2541
+ --wds-button-label-fill-ai-secondary-hover: var(--wds-color-text-standard-primary-light);
2542
+ --wds-button-label-fill-ai-secondary-active: var(--wds-color-text-standard-primary-light);
2543
+ --wds-button-label-fill-ai-secondary: var(--wds-color-text-primary);
2544
+ --wds-button-label-fill-ai-primary-disabled: var(--wds-color-text-disabled-light);
2495
2545
  --wds-button-label-fill-ai-primary: var(--wds-color-text-standard-primary-light);
2496
2546
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
2497
2547
  --wds-button-font-size-small: var(--wds-font-size-body-tiny);
@@ -2523,6 +2573,11 @@
2523
2573
  --wds-button-fill-dark-secondary-disabled: var(--wds-color-fill-dark-tertiary-disabled);
2524
2574
  --wds-button-fill-dark-secondary-active: var(--wds-color-fill-dark-primary-active);
2525
2575
  --wds-button-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
2576
+ --wds-button-fill-ai-tertiary-hover: var(--wds-color-fill-ai-secondary-hover);
2577
+ --wds-button-fill-ai-tertiary-active: var(--wds-color-fill-ai-secondary-active);
2578
+ --wds-button-fill-ai-secondary-hover: var(--wds-color-fill-ai-primary-hover);
2579
+ --wds-button-fill-ai-secondary-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2580
+ --wds-button-fill-ai-secondary-active: var(--wds-color-fill-ai-primary-active);
2526
2581
  --wds-button-fill-ai-secondary: var(--wds-color-fill-standard-tertiary);
2527
2582
  --wds-button-fill-ai-primary-hover: var(--wds-color-fill-ai-primary-hover);
2528
2583
  --wds-button-fill-ai-primary-active: var(--wds-color-fill-ai-primary-active);
@@ -2543,6 +2598,7 @@
2543
2598
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
2544
2599
  --wds-button-border-dark-secondary-active: var(--wds-color-border-dark-secondary);
2545
2600
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2601
+ --wds-button-border-ai-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
2546
2602
  --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2547
2603
  --wds-badge-transparent-warning-label-color: var(--wds-color-text-warning);
2548
2604
  --wds-badge-transparent-urgent-label-color: var(--wds-color-text-urgent);
package/studio/all.st.css CHANGED
@@ -222,7 +222,13 @@
222
222
  @property st-global(--wds-breakpoint-medium);
223
223
  @property st-global(--wds-breakpoint-small);
224
224
  @property st-global(--wds-breakpoint-x-large);
225
+ @property st-global(--wds-button-border-ai-secondary);
226
+ @property st-global(--wds-button-border-ai-secondary-active);
227
+ @property st-global(--wds-button-border-ai-secondary-disabled);
228
+ @property st-global(--wds-button-border-ai-secondary-hover);
225
229
  @property st-global(--wds-button-border-ai-secondary-mask);
230
+ @property st-global(--wds-button-border-ai-secondary-ring-display);
231
+ @property st-global(--wds-button-border-ai-tertiary-disabled);
226
232
  @property st-global(--wds-button-border-dark-secondary);
227
233
  @property st-global(--wds-button-border-dark-secondary-active);
228
234
  @property st-global(--wds-button-border-dark-secondary-disabled);
@@ -245,8 +251,16 @@
245
251
  @property st-global(--wds-button-border-standard-secondary-hover);
246
252
  @property st-global(--wds-button-fill-ai-primary);
247
253
  @property st-global(--wds-button-fill-ai-primary-active);
254
+ @property st-global(--wds-button-fill-ai-primary-disabled);
248
255
  @property st-global(--wds-button-fill-ai-primary-hover);
249
256
  @property st-global(--wds-button-fill-ai-secondary);
257
+ @property st-global(--wds-button-fill-ai-secondary-active);
258
+ @property st-global(--wds-button-fill-ai-secondary-disabled);
259
+ @property st-global(--wds-button-fill-ai-secondary-hover);
260
+ @property st-global(--wds-button-fill-ai-tertiary);
261
+ @property st-global(--wds-button-fill-ai-tertiary-active);
262
+ @property st-global(--wds-button-fill-ai-tertiary-disabled);
263
+ @property st-global(--wds-button-fill-ai-tertiary-hover);
250
264
  @property st-global(--wds-button-fill-dark-primary-disabled);
251
265
  @property st-global(--wds-button-fill-dark-secondary);
252
266
  @property st-global(--wds-button-fill-dark-secondary-active);
@@ -297,6 +311,15 @@
297
311
  @property st-global(--wds-button-icon-offset-small);
298
312
  @property st-global(--wds-button-icon-offset-tiny);
299
313
  @property st-global(--wds-button-label-fill-ai-primary);
314
+ @property st-global(--wds-button-label-fill-ai-primary-disabled);
315
+ @property st-global(--wds-button-label-fill-ai-secondary);
316
+ @property st-global(--wds-button-label-fill-ai-secondary-active);
317
+ @property st-global(--wds-button-label-fill-ai-secondary-disabled);
318
+ @property st-global(--wds-button-label-fill-ai-secondary-hover);
319
+ @property st-global(--wds-button-label-fill-ai-tertiary);
320
+ @property st-global(--wds-button-label-fill-ai-tertiary-active);
321
+ @property st-global(--wds-button-label-fill-ai-tertiary-disabled);
322
+ @property st-global(--wds-button-label-fill-ai-tertiary-hover);
300
323
  @property st-global(--wds-button-label-fill-dark-primary-disabled);
301
324
  @property st-global(--wds-button-label-fill-dark-secondary);
302
325
  @property st-global(--wds-button-label-fill-dark-secondary-active);
@@ -381,6 +404,8 @@
381
404
  @property st-global(--wds-card-gallery-item-action-button-padding-vertical);
382
405
  @property st-global(--wds-card-gallery-item-action-button-size);
383
406
  @property st-global(--wds-card-gallery-item-actions-align);
407
+ @property st-global(--wds-card-gallery-item-actions-clearance-bottom);
408
+ @property st-global(--wds-card-gallery-item-actions-clearance-top);
384
409
  @property st-global(--wds-card-gallery-item-actions-direction);
385
410
  @property st-global(--wds-card-gallery-item-actions-secondary-position);
386
411
  @property st-global(--wds-card-gallery-item-badge-offset-block);
@@ -1216,6 +1241,15 @@
1216
1241
  @property st-global(--wds-horizontal-scroll-button-fill);
1217
1242
  @property st-global(--wds-horizontal-scroll-button-fill-active);
1218
1243
  @property st-global(--wds-horizontal-scroll-button-text);
1244
+ @property st-global(--wds-icon-button-border-ai-secondary-ring-display);
1245
+ @property st-global(--wds-icon-button-border-ai-width);
1246
+ @property st-global(--wds-icon-button-color-border-ai-primary);
1247
+ @property st-global(--wds-icon-button-color-border-ai-primary-active);
1248
+ @property st-global(--wds-icon-button-color-border-ai-primary-hover);
1249
+ @property st-global(--wds-icon-button-color-border-ai-secondary);
1250
+ @property st-global(--wds-icon-button-color-border-ai-secondary-active);
1251
+ @property st-global(--wds-icon-button-color-border-ai-secondary-disabled);
1252
+ @property st-global(--wds-icon-button-color-border-ai-secondary-hover);
1219
1253
  @property st-global(--wds-icon-button-color-border-dark-secondary);
1220
1254
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
1221
1255
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1231,6 +1265,18 @@
1231
1265
  @property st-global(--wds-icon-button-color-border-standard-secondary-active);
1232
1266
  @property st-global(--wds-icon-button-color-border-standard-secondary-disabled);
1233
1267
  @property st-global(--wds-icon-button-color-border-standard-secondary-hover);
1268
+ @property st-global(--wds-icon-button-color-fill-ai-primary);
1269
+ @property st-global(--wds-icon-button-color-fill-ai-primary-active);
1270
+ @property st-global(--wds-icon-button-color-fill-ai-primary-disabled);
1271
+ @property st-global(--wds-icon-button-color-fill-ai-primary-hover);
1272
+ @property st-global(--wds-icon-button-color-fill-ai-secondary);
1273
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-active);
1274
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-disabled);
1275
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-hover);
1276
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary);
1277
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-active);
1278
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-disabled);
1279
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-hover);
1234
1280
  @property st-global(--wds-icon-button-color-fill-dark-primary);
1235
1281
  @property st-global(--wds-icon-button-color-fill-dark-primary-active);
1236
1282
  @property st-global(--wds-icon-button-color-fill-dark-primary-disabled);
@@ -1279,6 +1325,16 @@
1279
1325
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
1280
1326
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-disabled);
1281
1327
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
1328
+ @property st-global(--wds-icon-button-color-text-ai-primary);
1329
+ @property st-global(--wds-icon-button-color-text-ai-primary-disabled);
1330
+ @property st-global(--wds-icon-button-color-text-ai-secondary);
1331
+ @property st-global(--wds-icon-button-color-text-ai-secondary-active);
1332
+ @property st-global(--wds-icon-button-color-text-ai-secondary-disabled);
1333
+ @property st-global(--wds-icon-button-color-text-ai-secondary-hover);
1334
+ @property st-global(--wds-icon-button-color-text-ai-tertiary);
1335
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-active);
1336
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-disabled);
1337
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-hover);
1282
1338
  @property st-global(--wds-icon-button-color-text-dark-primary);
1283
1339
  @property st-global(--wds-icon-button-color-text-dark-primary-active);
1284
1340
  @property st-global(--wds-icon-button-color-text-dark-primary-disabled);
@@ -2932,7 +2988,13 @@
2932
2988
  --wds-breakpoint-medium: 768px;
2933
2989
  --wds-breakpoint-small: 490px;
2934
2990
  --wds-breakpoint-x-large: 1572px;
2991
+ --wds-button-border-ai-secondary: transparent;
2992
+ --wds-button-border-ai-secondary-active: transparent;
2993
+ --wds-button-border-ai-secondary-disabled: rgba(19, 23, 32, .1);
2994
+ --wds-button-border-ai-secondary-hover: transparent;
2935
2995
  --wds-button-border-ai-secondary-mask: none;
2996
+ --wds-button-border-ai-secondary-ring-display: block;
2997
+ --wds-button-border-ai-tertiary-disabled: transparent;
2936
2998
  --wds-button-border-dark-secondary: #868aa5;
2937
2999
  --wds-button-border-dark-secondary-active: #e2e3ea;
2938
3000
  --wds-button-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
@@ -2955,8 +3017,16 @@
2955
3017
  --wds-button-border-standard-secondary-hover: #e2e3ea;
2956
3018
  --wds-button-fill-ai-primary: #5a48f5;
2957
3019
  --wds-button-fill-ai-primary-active: #5a48f5;
3020
+ --wds-button-fill-ai-primary-disabled: #bebebe;
2958
3021
  --wds-button-fill-ai-primary-hover: #4d3dd0;
2959
3022
  --wds-button-fill-ai-secondary: #ffffff;
3023
+ --wds-button-fill-ai-secondary-active: #5a48f5;
3024
+ --wds-button-fill-ai-secondary-disabled: #ffffff;
3025
+ --wds-button-fill-ai-secondary-hover: #4d3dd0;
3026
+ --wds-button-fill-ai-tertiary: transparent;
3027
+ --wds-button-fill-ai-tertiary-active: #d6d1fc;
3028
+ --wds-button-fill-ai-tertiary-disabled: #e5e5e5;
3029
+ --wds-button-fill-ai-tertiary-hover: #a59bfa;
2960
3030
  --wds-button-fill-dark-primary-disabled: #bebebe;
2961
3031
  --wds-button-fill-dark-secondary: #ffffff;
2962
3032
  --wds-button-fill-dark-secondary-active: #42454c;
@@ -3007,6 +3077,15 @@
3007
3077
  --wds-button-icon-offset-small: 12px;
3008
3078
  --wds-button-icon-offset-tiny: 12px;
3009
3079
  --wds-button-label-fill-ai-primary: #ffffff;
3080
+ --wds-button-label-fill-ai-primary-disabled: rgba(255, 255, 255, .7);
3081
+ --wds-button-label-fill-ai-secondary: #116dff;
3082
+ --wds-button-label-fill-ai-secondary-active: #ffffff;
3083
+ --wds-button-label-fill-ai-secondary-disabled: #bebebe;
3084
+ --wds-button-label-fill-ai-secondary-hover: #ffffff;
3085
+ --wds-button-label-fill-ai-tertiary: #5a48f5;
3086
+ --wds-button-label-fill-ai-tertiary-active: #ffffff;
3087
+ --wds-button-label-fill-ai-tertiary-disabled: #bebebe;
3088
+ --wds-button-label-fill-ai-tertiary-hover: #ffffff;
3010
3089
  --wds-button-label-fill-dark-primary-disabled: rgba(255, 255, 255, .7);
3011
3090
  --wds-button-label-fill-dark-secondary: #131720;
3012
3091
  --wds-button-label-fill-dark-secondary-active: #ffffff;
@@ -3091,6 +3170,8 @@
3091
3170
  --wds-card-gallery-item-action-button-padding-vertical: 6px;
3092
3171
  --wds-card-gallery-item-action-button-size: 32px;
3093
3172
  --wds-card-gallery-item-actions-align: stretch;
3173
+ --wds-card-gallery-item-actions-clearance-bottom: 8px;
3174
+ --wds-card-gallery-item-actions-clearance-top: 8px;
3094
3175
  --wds-card-gallery-item-actions-direction: row;
3095
3176
  --wds-card-gallery-item-actions-secondary-position: absolute;
3096
3177
  --wds-card-gallery-item-badge-offset-block: 12px;
@@ -3926,6 +4007,15 @@
3926
4007
  --wds-horizontal-scroll-button-fill: #FFFFFF;
3927
4008
  --wds-horizontal-scroll-button-fill-active: #CFD1DC;
3928
4009
  --wds-horizontal-scroll-button-text: #000624;
4010
+ --wds-icon-button-border-ai-secondary-ring-display: block;
4011
+ --wds-icon-button-border-ai-width: 0px;
4012
+ --wds-icon-button-color-border-ai-primary: transparent;
4013
+ --wds-icon-button-color-border-ai-primary-active: transparent;
4014
+ --wds-icon-button-color-border-ai-primary-hover: transparent;
4015
+ --wds-icon-button-color-border-ai-secondary: transparent;
4016
+ --wds-icon-button-color-border-ai-secondary-active: transparent;
4017
+ --wds-icon-button-color-border-ai-secondary-disabled: #bebebe;
4018
+ --wds-icon-button-color-border-ai-secondary-hover: transparent;
3929
4019
  --wds-icon-button-color-border-dark-secondary: #868aa5;
3930
4020
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
3931
4021
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
@@ -3941,6 +4031,18 @@
3941
4031
  --wds-icon-button-color-border-standard-secondary-active: #116dff;
3942
4032
  --wds-icon-button-color-border-standard-secondary-disabled: rgba(19, 23, 32, .1);
3943
4033
  --wds-icon-button-color-border-standard-secondary-hover: #868aa5;
4034
+ --wds-icon-button-color-fill-ai-primary: #5a48f5;
4035
+ --wds-icon-button-color-fill-ai-primary-active: #5a48f5;
4036
+ --wds-icon-button-color-fill-ai-primary-disabled: #bebebe;
4037
+ --wds-icon-button-color-fill-ai-primary-hover: #4d3dd0;
4038
+ --wds-icon-button-color-fill-ai-secondary: #5a48f5;
4039
+ --wds-icon-button-color-fill-ai-secondary-active: #5a48f5;
4040
+ --wds-icon-button-color-fill-ai-secondary-disabled: #ffffff;
4041
+ --wds-icon-button-color-fill-ai-secondary-hover: #4d3dd0;
4042
+ --wds-icon-button-color-fill-ai-tertiary: #ffffff;
4043
+ --wds-icon-button-color-fill-ai-tertiary-active: transparent;
4044
+ --wds-icon-button-color-fill-ai-tertiary-disabled: #ffffff;
4045
+ --wds-icon-button-color-fill-ai-tertiary-hover: #ffffff;
3944
4046
  --wds-icon-button-color-fill-dark-primary: #131720;
3945
4047
  --wds-icon-button-color-fill-dark-primary-active: #42454c;
3946
4048
  --wds-icon-button-color-fill-dark-primary-disabled: #bebebe;
@@ -3989,6 +4091,16 @@
3989
4091
  --wds-icon-button-color-fill-standard-tertiary-active: #dce9ff;
3990
4092
  --wds-icon-button-color-fill-standard-tertiary-disabled: rgba(255, 255, 255, 0);
3991
4093
  --wds-icon-button-color-fill-standard-tertiary-hover: #ebf2ff;
4094
+ --wds-icon-button-color-text-ai-primary: #ffffff;
4095
+ --wds-icon-button-color-text-ai-primary-disabled: rgba(255, 255, 255, .7);
4096
+ --wds-icon-button-color-text-ai-secondary: #116dff;
4097
+ --wds-icon-button-color-text-ai-secondary-active: #ffffff;
4098
+ --wds-icon-button-color-text-ai-secondary-disabled: #bebebe;
4099
+ --wds-icon-button-color-text-ai-secondary-hover: #ffffff;
4100
+ --wds-icon-button-color-text-ai-tertiary: #116dff;
4101
+ --wds-icon-button-color-text-ai-tertiary-active: #116dff;
4102
+ --wds-icon-button-color-text-ai-tertiary-disabled: #bebebe;
4103
+ --wds-icon-button-color-text-ai-tertiary-hover: #116dff;
3992
4104
  --wds-icon-button-color-text-dark-primary: #ffffff;
3993
4105
  --wds-icon-button-color-text-dark-primary-active: #ffffff;
3994
4106
  --wds-icon-button-color-text-dark-primary-disabled: rgba(255, 255, 255, .7);
package/studio/component.st.css CHANGED
@@ -183,7 +183,13 @@
183
183
  @property st-global(--wds-breadcrumbs-text-line-height-small);
184
184
  @property st-global(--wds-breadcrumbs-text-weight-default);
185
185
  @property st-global(--wds-breadcrumbs-text-weight-selected);
186
+ @property st-global(--wds-button-border-ai-secondary);
187
+ @property st-global(--wds-button-border-ai-secondary-active);
188
+ @property st-global(--wds-button-border-ai-secondary-disabled);
189
+ @property st-global(--wds-button-border-ai-secondary-hover);
186
190
  @property st-global(--wds-button-border-ai-secondary-mask);
191
+ @property st-global(--wds-button-border-ai-secondary-ring-display);
192
+ @property st-global(--wds-button-border-ai-tertiary-disabled);
187
193
  @property st-global(--wds-button-border-dark-secondary);
188
194
  @property st-global(--wds-button-border-dark-secondary-active);
189
195
  @property st-global(--wds-button-border-dark-secondary-disabled);
@@ -206,8 +212,16 @@
206
212
  @property st-global(--wds-button-border-standard-secondary-hover);
207
213
  @property st-global(--wds-button-fill-ai-primary);
208
214
  @property st-global(--wds-button-fill-ai-primary-active);
215
+ @property st-global(--wds-button-fill-ai-primary-disabled);
209
216
  @property st-global(--wds-button-fill-ai-primary-hover);
210
217
  @property st-global(--wds-button-fill-ai-secondary);
218
+ @property st-global(--wds-button-fill-ai-secondary-active);
219
+ @property st-global(--wds-button-fill-ai-secondary-disabled);
220
+ @property st-global(--wds-button-fill-ai-secondary-hover);
221
+ @property st-global(--wds-button-fill-ai-tertiary);
222
+ @property st-global(--wds-button-fill-ai-tertiary-active);
223
+ @property st-global(--wds-button-fill-ai-tertiary-disabled);
224
+ @property st-global(--wds-button-fill-ai-tertiary-hover);
211
225
  @property st-global(--wds-button-fill-dark-primary-disabled);
212
226
  @property st-global(--wds-button-fill-dark-secondary);
213
227
  @property st-global(--wds-button-fill-dark-secondary-active);
@@ -258,6 +272,15 @@
258
272
  @property st-global(--wds-button-icon-offset-small);
259
273
  @property st-global(--wds-button-icon-offset-tiny);
260
274
  @property st-global(--wds-button-label-fill-ai-primary);
275
+ @property st-global(--wds-button-label-fill-ai-primary-disabled);
276
+ @property st-global(--wds-button-label-fill-ai-secondary);
277
+ @property st-global(--wds-button-label-fill-ai-secondary-active);
278
+ @property st-global(--wds-button-label-fill-ai-secondary-disabled);
279
+ @property st-global(--wds-button-label-fill-ai-secondary-hover);
280
+ @property st-global(--wds-button-label-fill-ai-tertiary);
281
+ @property st-global(--wds-button-label-fill-ai-tertiary-active);
282
+ @property st-global(--wds-button-label-fill-ai-tertiary-disabled);
283
+ @property st-global(--wds-button-label-fill-ai-tertiary-hover);
261
284
  @property st-global(--wds-button-label-fill-dark-primary-disabled);
262
285
  @property st-global(--wds-button-label-fill-dark-secondary);
263
286
  @property st-global(--wds-button-label-fill-dark-secondary-active);
@@ -342,6 +365,8 @@
342
365
  @property st-global(--wds-card-gallery-item-action-button-padding-vertical);
343
366
  @property st-global(--wds-card-gallery-item-action-button-size);
344
367
  @property st-global(--wds-card-gallery-item-actions-align);
368
+ @property st-global(--wds-card-gallery-item-actions-clearance-bottom);
369
+ @property st-global(--wds-card-gallery-item-actions-clearance-top);
345
370
  @property st-global(--wds-card-gallery-item-actions-direction);
346
371
  @property st-global(--wds-card-gallery-item-actions-secondary-position);
347
372
  @property st-global(--wds-card-gallery-item-badge-offset-block);
@@ -650,6 +675,15 @@
650
675
  @property st-global(--wds-horizontal-scroll-button-fill);
651
676
  @property st-global(--wds-horizontal-scroll-button-fill-active);
652
677
  @property st-global(--wds-horizontal-scroll-button-text);
678
+ @property st-global(--wds-icon-button-border-ai-secondary-ring-display);
679
+ @property st-global(--wds-icon-button-border-ai-width);
680
+ @property st-global(--wds-icon-button-color-border-ai-primary);
681
+ @property st-global(--wds-icon-button-color-border-ai-primary-active);
682
+ @property st-global(--wds-icon-button-color-border-ai-primary-hover);
683
+ @property st-global(--wds-icon-button-color-border-ai-secondary);
684
+ @property st-global(--wds-icon-button-color-border-ai-secondary-active);
685
+ @property st-global(--wds-icon-button-color-border-ai-secondary-disabled);
686
+ @property st-global(--wds-icon-button-color-border-ai-secondary-hover);
653
687
  @property st-global(--wds-icon-button-color-border-dark-secondary);
654
688
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
655
689
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -665,6 +699,18 @@
665
699
  @property st-global(--wds-icon-button-color-border-standard-secondary-active);
666
700
  @property st-global(--wds-icon-button-color-border-standard-secondary-disabled);
667
701
  @property st-global(--wds-icon-button-color-border-standard-secondary-hover);
702
+ @property st-global(--wds-icon-button-color-fill-ai-primary);
703
+ @property st-global(--wds-icon-button-color-fill-ai-primary-active);
704
+ @property st-global(--wds-icon-button-color-fill-ai-primary-disabled);
705
+ @property st-global(--wds-icon-button-color-fill-ai-primary-hover);
706
+ @property st-global(--wds-icon-button-color-fill-ai-secondary);
707
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-active);
708
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-disabled);
709
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-hover);
710
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary);
711
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-active);
712
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-disabled);
713
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-hover);
668
714
  @property st-global(--wds-icon-button-color-fill-dark-primary);
669
715
  @property st-global(--wds-icon-button-color-fill-dark-primary-active);
670
716
  @property st-global(--wds-icon-button-color-fill-dark-primary-disabled);
@@ -713,6 +759,16 @@
713
759
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
714
760
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-disabled);
715
761
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
762
+ @property st-global(--wds-icon-button-color-text-ai-primary);
763
+ @property st-global(--wds-icon-button-color-text-ai-primary-disabled);
764
+ @property st-global(--wds-icon-button-color-text-ai-secondary);
765
+ @property st-global(--wds-icon-button-color-text-ai-secondary-active);
766
+ @property st-global(--wds-icon-button-color-text-ai-secondary-disabled);
767
+ @property st-global(--wds-icon-button-color-text-ai-secondary-hover);
768
+ @property st-global(--wds-icon-button-color-text-ai-tertiary);
769
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-active);
770
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-disabled);
771
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-hover);
716
772
  @property st-global(--wds-icon-button-color-text-dark-primary);
717
773
  @property st-global(--wds-icon-button-color-text-dark-primary-active);
718
774
  @property st-global(--wds-icon-button-color-text-dark-primary-disabled);
@@ -2144,7 +2200,13 @@
2144
2200
  --wds-breadcrumbs-text-line-height-small: 16px;
2145
2201
  --wds-breadcrumbs-text-weight-default: 400;
2146
2202
  --wds-breadcrumbs-text-weight-selected: 700;
2203
+ --wds-button-border-ai-secondary: transparent;
2204
+ --wds-button-border-ai-secondary-active: transparent;
2205
+ --wds-button-border-ai-secondary-disabled: rgba(19, 23, 32, .1);
2206
+ --wds-button-border-ai-secondary-hover: transparent;
2147
2207
  --wds-button-border-ai-secondary-mask: none;
2208
+ --wds-button-border-ai-secondary-ring-display: block;
2209
+ --wds-button-border-ai-tertiary-disabled: transparent;
2148
2210
  --wds-button-border-dark-secondary: #868aa5;
2149
2211
  --wds-button-border-dark-secondary-active: #e2e3ea;
2150
2212
  --wds-button-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
@@ -2167,8 +2229,16 @@
2167
2229
  --wds-button-border-standard-secondary-hover: #e2e3ea;
2168
2230
  --wds-button-fill-ai-primary: #5a48f5;
2169
2231
  --wds-button-fill-ai-primary-active: #5a48f5;
2232
+ --wds-button-fill-ai-primary-disabled: #bebebe;
2170
2233
  --wds-button-fill-ai-primary-hover: #4d3dd0;
2171
2234
  --wds-button-fill-ai-secondary: #ffffff;
2235
+ --wds-button-fill-ai-secondary-active: #5a48f5;
2236
+ --wds-button-fill-ai-secondary-disabled: #ffffff;
2237
+ --wds-button-fill-ai-secondary-hover: #4d3dd0;
2238
+ --wds-button-fill-ai-tertiary: transparent;
2239
+ --wds-button-fill-ai-tertiary-active: #d6d1fc;
2240
+ --wds-button-fill-ai-tertiary-disabled: #e5e5e5;
2241
+ --wds-button-fill-ai-tertiary-hover: #a59bfa;
2172
2242
  --wds-button-fill-dark-primary-disabled: #bebebe;
2173
2243
  --wds-button-fill-dark-secondary: #ffffff;
2174
2244
  --wds-button-fill-dark-secondary-active: #42454c;
@@ -2219,6 +2289,15 @@
2219
2289
  --wds-button-icon-offset-small: 12px;
2220
2290
  --wds-button-icon-offset-tiny: 12px;
2221
2291
  --wds-button-label-fill-ai-primary: #ffffff;
2292
+ --wds-button-label-fill-ai-primary-disabled: rgba(255, 255, 255, .7);
2293
+ --wds-button-label-fill-ai-secondary: #116dff;
2294
+ --wds-button-label-fill-ai-secondary-active: #ffffff;
2295
+ --wds-button-label-fill-ai-secondary-disabled: #bebebe;
2296
+ --wds-button-label-fill-ai-secondary-hover: #ffffff;
2297
+ --wds-button-label-fill-ai-tertiary: #5a48f5;
2298
+ --wds-button-label-fill-ai-tertiary-active: #ffffff;
2299
+ --wds-button-label-fill-ai-tertiary-disabled: #bebebe;
2300
+ --wds-button-label-fill-ai-tertiary-hover: #ffffff;
2222
2301
  --wds-button-label-fill-dark-primary-disabled: rgba(255, 255, 255, .7);
2223
2302
  --wds-button-label-fill-dark-secondary: #131720;
2224
2303
  --wds-button-label-fill-dark-secondary-active: #ffffff;
@@ -2303,6 +2382,8 @@
2303
2382
  --wds-card-gallery-item-action-button-padding-vertical: 6px;
2304
2383
  --wds-card-gallery-item-action-button-size: 32px;
2305
2384
  --wds-card-gallery-item-actions-align: stretch;
2385
+ --wds-card-gallery-item-actions-clearance-bottom: 8px;
2386
+ --wds-card-gallery-item-actions-clearance-top: 8px;
2306
2387
  --wds-card-gallery-item-actions-direction: row;
2307
2388
  --wds-card-gallery-item-actions-secondary-position: absolute;
2308
2389
  --wds-card-gallery-item-badge-offset-block: 12px;
@@ -2611,6 +2692,15 @@
2611
2692
  --wds-horizontal-scroll-button-fill: #FFFFFF;
2612
2693
  --wds-horizontal-scroll-button-fill-active: #CFD1DC;
2613
2694
  --wds-horizontal-scroll-button-text: #000624;
2695
+ --wds-icon-button-border-ai-secondary-ring-display: block;
2696
+ --wds-icon-button-border-ai-width: 0px;
2697
+ --wds-icon-button-color-border-ai-primary: transparent;
2698
+ --wds-icon-button-color-border-ai-primary-active: transparent;
2699
+ --wds-icon-button-color-border-ai-primary-hover: transparent;
2700
+ --wds-icon-button-color-border-ai-secondary: transparent;
2701
+ --wds-icon-button-color-border-ai-secondary-active: transparent;
2702
+ --wds-icon-button-color-border-ai-secondary-disabled: #bebebe;
2703
+ --wds-icon-button-color-border-ai-secondary-hover: transparent;
2614
2704
  --wds-icon-button-color-border-dark-secondary: #868aa5;
2615
2705
  --wds-icon-button-color-border-dark-secondary-active: #2b2e36;
2616
2706
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(19, 23, 32, .1);
@@ -2626,6 +2716,18 @@
2626
2716
  --wds-icon-button-color-border-standard-secondary-active: #116dff;
2627
2717
  --wds-icon-button-color-border-standard-secondary-disabled: rgba(19, 23, 32, .1);
2628
2718
  --wds-icon-button-color-border-standard-secondary-hover: #868aa5;
2719
+ --wds-icon-button-color-fill-ai-primary: #5a48f5;
2720
+ --wds-icon-button-color-fill-ai-primary-active: #5a48f5;
2721
+ --wds-icon-button-color-fill-ai-primary-disabled: #bebebe;
2722
+ --wds-icon-button-color-fill-ai-primary-hover: #4d3dd0;
2723
+ --wds-icon-button-color-fill-ai-secondary: #5a48f5;
2724
+ --wds-icon-button-color-fill-ai-secondary-active: #5a48f5;
2725
+ --wds-icon-button-color-fill-ai-secondary-disabled: #ffffff;
2726
+ --wds-icon-button-color-fill-ai-secondary-hover: #4d3dd0;
2727
+ --wds-icon-button-color-fill-ai-tertiary: #ffffff;
2728
+ --wds-icon-button-color-fill-ai-tertiary-active: transparent;
2729
+ --wds-icon-button-color-fill-ai-tertiary-disabled: #ffffff;
2730
+ --wds-icon-button-color-fill-ai-tertiary-hover: #ffffff;
2629
2731
  --wds-icon-button-color-fill-dark-primary: #131720;
2630
2732
  --wds-icon-button-color-fill-dark-primary-active: #42454c;
2631
2733
  --wds-icon-button-color-fill-dark-primary-disabled: #bebebe;
@@ -2674,6 +2776,16 @@
2674
2776
  --wds-icon-button-color-fill-standard-tertiary-active: #dce9ff;
2675
2777
  --wds-icon-button-color-fill-standard-tertiary-disabled: rgba(255, 255, 255, 0);
2676
2778
  --wds-icon-button-color-fill-standard-tertiary-hover: #ebf2ff;
2779
+ --wds-icon-button-color-text-ai-primary: #ffffff;
2780
+ --wds-icon-button-color-text-ai-primary-disabled: rgba(255, 255, 255, .7);
2781
+ --wds-icon-button-color-text-ai-secondary: #116dff;
2782
+ --wds-icon-button-color-text-ai-secondary-active: #ffffff;
2783
+ --wds-icon-button-color-text-ai-secondary-disabled: #bebebe;
2784
+ --wds-icon-button-color-text-ai-secondary-hover: #ffffff;
2785
+ --wds-icon-button-color-text-ai-tertiary: #116dff;
2786
+ --wds-icon-button-color-text-ai-tertiary-active: #116dff;
2787
+ --wds-icon-button-color-text-ai-tertiary-disabled: #bebebe;
2788
+ --wds-icon-button-color-text-ai-tertiary-hover: #116dff;
2677
2789
  --wds-icon-button-color-text-dark-primary: #ffffff;
2678
2790
  --wds-icon-button-color-text-dark-primary-active: #ffffff;
2679
2791
  --wds-icon-button-color-text-dark-primary-disabled: rgba(255, 255, 255, .7);