@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/CHANGELOG.md CHANGED
@@ -1,3 +1,23 @@
1
+ ## 1.233.0
2
+
3
+ ### Minor Changes
4
+
5
+ - [#17108](https://github.com/wix-private/wix-design-systems/pull/17108) [`52e24bf`](https://github.com/wix-private/wix-design-systems/commit/52e24bf76dd1c748276154f6cdf5f30490f01644) - **Visual breaking change:** in Harmony (odeditor), Studio 2.0 (odeditor-dark) and Studio 2.0 Light (studio2-light) the AI color tokens leave the purple `iris` ramp and carry the same references as their `standard` counterparts: `color.fill.ai*`, `color.border.ai.*` and every `button.*.ai.*` member. The `Button` and `IconButton` AI skins gain the component tokens the standard skin already has (fill, label/text and border per priority and state, plus `icon-button.border.ai.width` and the two `*.border.ai.secondary-ring-display` tokens), so a theme decides the skin's look through values alone. Default and Studio keep their current values.
6
+
7
+ - [#17386](https://github.com/wix-private/wix-design-systems/pull/17386) [`8c5dc3a`](https://github.com/wix-private/wix-design-systems/commit/8c5dc3aa0376eb5878b96fe10d0a64d374bb639d) - **Visual breaking change:** Studio 2.0 (odeditor-dark) and Studio 2.0 Light (studio2-light) Calendar layout tokens now take Harmony's values: `--wds-calendar-padding-medium` 18px, `--wds-calendar-padding-small` 12px, `--wds-calendar-day-gap` 2px, `--wds-calendar-day-range-border-radius` and `--wds-calendar-day-range-edge-border-radius` 8px, `--wds-calendar-day-today-inset-width` 0. In Studio 2.0, `--wds-calendar-day-fill-range` changes from `#212328` to `#2D354E` and `--wds-calendar-day-fill-range-edge` from `#212328` to `#00000000` (transparent).
8
+
9
+ - [#17124](https://github.com/wix-private/wix-design-systems/pull/17124) [`6cd2e63`](https://github.com/wix-private/wix-design-systems/commit/6cd2e63f1fc5146c8efbd2b07426219ea8eb8ffb) - **Visual breaking change:** `--wds-info-icon-fill` now carries the standard secondary text colour instead of the placeholder colour, so InfoIcon's resting state reads as secondary text rather than a placeholder. In Harmony (`odeditor`) it goes from `#525150` to `#383838`, and in Studio 2.0 (`odeditor-dark`) from `#A09E9D` to `#D4D3D2`. The hover fill and the `default`, `studio` and `wixel` themes are unchanged.
10
+
11
+ ### Patch Changes
12
+
13
+ - [#17387](https://github.com/wix-private/wix-design-systems/pull/17387) [`b2421a5`](https://github.com/wix-private/wix-design-systems/commit/b2421a5f4fd83b2c9774aa2dd6c991624a5b2c5a) - **Visual breaking change:** in Studio 2.0 (odeditor-dark) and Studio 2.0 Light (studio2-light), the `card-gallery-item` size, spacing and typography tokens now match Harmony (odeditor), so cards render smaller hover actions, an inset image, tighter padding, a Display-font title, and a subtle resting shadow that gets stronger on hover. The Studio (studio) theme gets the `actions-clearance-top` and `actions-clearance-bottom` tokens with values that keep its current look.
14
+
15
+ - [#17408](https://github.com/wix-private/wix-design-systems/pull/17408) [`efe9ffb`](https://github.com/wix-private/wix-design-systems/commit/efe9ffbfb8d6d4dcfc49da80d7232f6ff72def29) - **Visual breaking change:** MarketingLayout tokens in Studio 2.0 (odeditor-dark) and Studio 2.0 light (studio2-light) now match Harmony (odeditor), so horizontal layouts get taller minimum heights, a square cropped image with a 12px inset, top-aligned content, tighter title and tiny actions gaps, a Madefor Display tiny title, a narrower description and right-aligned inverted actions.
16
+
17
+ - [#17409](https://github.com/wix-private/wix-design-systems/pull/17409) [`2c10ca6`](https://github.com/wix-private/wix-design-systems/commit/2c10ca6a06b3b3288b4ea606120350eddbedb4c8) - **Visual breaking change:** In Studio 2.0 (odeditor-dark) and Studio 2.0 Light (studio2-light), `--wds-notification-border-radius` changes from 0 to 8px and `--wds-notification-border-width` from 0 to 1px. In Studio 2.0 (odeditor-dark), `--wds-notification-border-color` changes from `#00000000` (transparent) to `#212122`.
18
+
19
+ ## 1.232.6
20
+
1
21
  ## 1.232.5
2
22
 
3
23
  ## 1.232.4
package/all.css CHANGED
@@ -418,6 +418,14 @@
418
418
  --wds-input-width-medium: 72px;
419
419
  --wds-input-width-large: 96px;
420
420
  --wds-input-width-fixed: 288px;
421
+ --wds-icon-button-color-fill-ai-tertiary-active: transparent;
422
+ --wds-icon-button-color-border-ai-secondary-hover: transparent;
423
+ --wds-icon-button-color-border-ai-secondary-active: transparent;
424
+ --wds-icon-button-color-border-ai-secondary: transparent;
425
+ --wds-icon-button-color-border-ai-primary-hover: transparent;
426
+ --wds-icon-button-color-border-ai-primary-active: transparent;
427
+ --wds-icon-button-color-border-ai-primary: transparent;
428
+ --wds-icon-button-border-ai-secondary-ring-display: block;
421
429
  --wds-horizontal-scroll-button-text: #000624;
422
430
  --wds-horizontal-scroll-button-fill-active: #CFD1DC;
423
431
  --wds-horizontal-scroll-button-fill: #FFFFFF;
@@ -486,7 +494,13 @@
486
494
  --wds-button-icon-offset-small: 12px;
487
495
  --wds-button-icon-offset-medium: 12px;
488
496
  --wds-button-icon-offset-large: 12px;
497
+ --wds-button-fill-ai-tertiary: transparent;
498
+ --wds-button-border-ai-tertiary-disabled: transparent;
499
+ --wds-button-border-ai-secondary-ring-display: block;
489
500
  --wds-button-border-ai-secondary-mask: none;
501
+ --wds-button-border-ai-secondary-hover: transparent;
502
+ --wds-button-border-ai-secondary-active: transparent;
503
+ --wds-button-border-ai-secondary: transparent;
490
504
  --wds-breadcrumbs-height-small: 24px;
491
505
  --wds-breadcrumbs-height-medium: 30px;
492
506
  --wds-breadcrumbs-height-large: 36px;
@@ -1574,6 +1588,13 @@
1574
1588
  --wds-input-border-radius-default-large: var(--wds-border-radius-300);
1575
1589
  --wds-image-border-radius-none: var(--wds-border-radius-0);
1576
1590
  --wds-image-border-radius-default: var(--wds-border-radius-400);
1591
+ --wds-icon-button-color-fill-ai-secondary-hover: var(--wds-color-fill-ai-primary-hover);
1592
+ --wds-icon-button-color-fill-ai-secondary-active: var(--wds-color-fill-ai-primary-active);
1593
+ --wds-icon-button-color-fill-ai-secondary: var(--wds-color-fill-ai-primary);
1594
+ --wds-icon-button-color-fill-ai-primary-hover: var(--wds-color-fill-ai-primary-hover);
1595
+ --wds-icon-button-color-fill-ai-primary-active: var(--wds-color-fill-ai-primary-active);
1596
+ --wds-icon-button-color-fill-ai-primary: var(--wds-color-fill-ai-primary);
1597
+ --wds-icon-button-border-ai-width: var(--wds-border-width-none);
1577
1598
  --wds-google-preview-surface-fill: var(--wds-color-white);
1578
1599
  --wds-form-field-label-gap-tiny: var(--wds-space-100);
1579
1600
  --wds-form-field-label-gap-small: var(--wds-space-150);
@@ -1757,6 +1778,7 @@
1757
1778
  --wds-button-padding-horizontal-medium: var(--wds-space-400);
1758
1779
  --wds-button-padding-horizontal-large: var(--wds-space-500);
1759
1780
  --wds-button-padding-horizontal-extra-large: var(--wds-space-600);
1781
+ --wds-button-label-fill-ai-tertiary: var(--wds-color-fill-ai-primary);
1760
1782
  --wds-button-gap-tiny: var(--wds-space-50);
1761
1783
  --wds-button-gap-small: var(--wds-space-100);
1762
1784
  --wds-button-gap-medium: var(--wds-space-100);
@@ -1765,6 +1787,8 @@
1765
1787
  --wds-button-font-weight-small: var(--wds-font-weight-medium);
1766
1788
  --wds-button-font-weight-medium: var(--wds-font-weight-medium);
1767
1789
  --wds-button-font-weight-large: var(--wds-font-weight-medium);
1790
+ --wds-button-fill-ai-secondary-hover: var(--wds-color-fill-ai-primary-hover);
1791
+ --wds-button-fill-ai-secondary-active: var(--wds-color-fill-ai-primary-active);
1768
1792
  --wds-button-fill-ai-primary-hover: var(--wds-color-fill-ai-primary-hover);
1769
1793
  --wds-button-fill-ai-primary-active: var(--wds-color-fill-ai-primary-active);
1770
1794
  --wds-button-fill-ai-primary: var(--wds-color-fill-ai-primary);
@@ -2303,6 +2327,16 @@
2303
2327
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-text-disabled-light);
2304
2328
  --wds-icon-button-color-text-dark-primary-active: var(--wds-color-text-standard-primary-light);
2305
2329
  --wds-icon-button-color-text-dark-primary: var(--wds-color-text-standard-primary-light);
2330
+ --wds-icon-button-color-text-ai-tertiary-hover: var(--wds-color-text-primary);
2331
+ --wds-icon-button-color-text-ai-tertiary-disabled: var(--wds-color-fill-dark-primary-disabled);
2332
+ --wds-icon-button-color-text-ai-tertiary-active: var(--wds-color-text-primary);
2333
+ --wds-icon-button-color-text-ai-tertiary: var(--wds-color-text-primary);
2334
+ --wds-icon-button-color-text-ai-secondary-hover: var(--wds-color-text-standard-primary-light);
2335
+ --wds-icon-button-color-text-ai-secondary-disabled: var(--wds-color-text-disabled);
2336
+ --wds-icon-button-color-text-ai-secondary-active: var(--wds-color-text-standard-primary-light);
2337
+ --wds-icon-button-color-text-ai-secondary: var(--wds-color-text-primary);
2338
+ --wds-icon-button-color-text-ai-primary-disabled: var(--wds-color-text-disabled-light);
2339
+ --wds-icon-button-color-text-ai-primary: var(--wds-color-text-standard-primary-light);
2306
2340
  --wds-icon-button-color-fill-standard-tertiary-hover: var(--wds-color-fill-light-secondary-hover);
2307
2341
  --wds-icon-button-color-fill-standard-tertiary-disabled: var(--wds-color-fill-light-secondary-disabled);
2308
2342
  --wds-icon-button-color-fill-standard-tertiary-active: var(--wds-color-fill-light-secondary-active);
@@ -2351,6 +2385,11 @@
2351
2385
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
2352
2386
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
2353
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-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2392
+ --wds-icon-button-color-fill-ai-primary-disabled: var(--wds-color-fill-ai-primary-disabled);
2354
2393
  --wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-border-standard-secondary-hover);
2355
2394
  --wds-icon-button-color-border-standard-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
2356
2395
  --wds-icon-button-color-border-standard-secondary-active: var(--wds-color-border-standard-secondary-active);
@@ -2366,6 +2405,7 @@
2366
2405
  --wds-icon-button-color-border-dark-secondary-disabled: var(--wds-color-border-dark-secondary-disabled);
2367
2406
  --wds-icon-button-color-border-dark-secondary-active: var(--wds-color-border-dark-primary-active);
2368
2407
  --wds-icon-button-color-border-dark-secondary: var(--wds-color-border-dark-primary);
2408
+ --wds-icon-button-color-border-ai-secondary-disabled: var(--wds-color-text-disabled);
2369
2409
  --wds-form-field-label-font-size-tiny: var(--wds-font-size-body-tiny);
2370
2410
  --wds-form-field-label-font-size-small: var(--wds-font-size-body-small);
2371
2411
  --wds-form-field-label-fill: var(--wds-color-text-standard-secondary);
@@ -2492,6 +2532,14 @@
2492
2532
  --wds-button-label-fill-dark-secondary-active: var(--wds-color-text-standard-primary-light);
2493
2533
  --wds-button-label-fill-dark-secondary: var(--wds-color-text-standard-primary);
2494
2534
  --wds-button-label-fill-dark-primary-disabled: var(--wds-color-text-disabled-light);
2535
+ --wds-button-label-fill-ai-tertiary-hover: var(--wds-color-text-standard-primary-light);
2536
+ --wds-button-label-fill-ai-tertiary-disabled: var(--wds-color-text-disabled);
2537
+ --wds-button-label-fill-ai-tertiary-active: var(--wds-color-text-standard-primary-light);
2538
+ --wds-button-label-fill-ai-secondary-hover: var(--wds-color-text-standard-primary-light);
2539
+ --wds-button-label-fill-ai-secondary-disabled: var(--wds-color-text-disabled);
2540
+ --wds-button-label-fill-ai-secondary-active: var(--wds-color-text-standard-primary-light);
2541
+ --wds-button-label-fill-ai-secondary: var(--wds-color-text-primary);
2542
+ --wds-button-label-fill-ai-primary-disabled: var(--wds-color-text-disabled-light);
2495
2543
  --wds-button-label-fill-ai-primary: var(--wds-color-text-standard-primary-light);
2496
2544
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
2497
2545
  --wds-button-font-size-small: var(--wds-font-size-body-small);
@@ -2525,7 +2573,12 @@
2525
2573
  --wds-button-fill-dark-secondary-active: var(--wds-color-fill-dark-primary);
2526
2574
  --wds-button-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
2527
2575
  --wds-button-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
2576
+ --wds-button-fill-ai-tertiary-hover: var(--wds-color-fill-ai-secondary-hover);
2577
+ --wds-button-fill-ai-tertiary-disabled: var(--wds-color-fill-ai-secondary-disabled);
2578
+ --wds-button-fill-ai-tertiary-active: var(--wds-color-fill-ai-secondary-active);
2579
+ --wds-button-fill-ai-secondary-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2528
2580
  --wds-button-fill-ai-secondary: var(--wds-color-fill-standard-tertiary);
2581
+ --wds-button-fill-ai-primary-disabled: var(--wds-color-fill-ai-primary-disabled);
2529
2582
  --wds-button-border-standard-secondary-hover: var(--wds-color-border-standard-primary-active);
2530
2583
  --wds-button-border-standard-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
2531
2584
  --wds-button-border-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
@@ -2542,6 +2595,7 @@
2542
2595
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
2543
2596
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
2544
2597
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2598
+ --wds-button-border-ai-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
2545
2599
  --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2546
2600
  --wds-badge-transparent-warning-label-color: var(--wds-color-text-warning);
2547
2601
  --wds-badge-transparent-urgent-label-color: var(--wds-color-text-urgent);
package/all.scss CHANGED
@@ -201,6 +201,14 @@
201
201
  --wds-input-width-medium: 72px;
202
202
  --wds-input-width-large: 96px;
203
203
  --wds-input-width-fixed: 288px;
204
+ --wds-icon-button-color-fill-ai-tertiary-active: transparent;
205
+ --wds-icon-button-color-border-ai-secondary-hover: transparent;
206
+ --wds-icon-button-color-border-ai-secondary-active: transparent;
207
+ --wds-icon-button-color-border-ai-secondary: transparent;
208
+ --wds-icon-button-color-border-ai-primary-hover: transparent;
209
+ --wds-icon-button-color-border-ai-primary-active: transparent;
210
+ --wds-icon-button-color-border-ai-primary: transparent;
211
+ --wds-icon-button-border-ai-secondary-ring-display: block;
204
212
  --wds-horizontal-scroll-button-text: #000624;
205
213
  --wds-horizontal-scroll-button-fill-active: #CFD1DC;
206
214
  --wds-horizontal-scroll-button-fill: #FFFFFF;
@@ -459,7 +467,13 @@
459
467
  --wds-button-icon-offset-small: 12px;
460
468
  --wds-button-icon-offset-medium: 12px;
461
469
  --wds-button-icon-offset-large: 12px;
470
+ --wds-button-fill-ai-tertiary: transparent;
471
+ --wds-button-border-ai-tertiary-disabled: transparent;
472
+ --wds-button-border-ai-secondary-ring-display: block;
462
473
  --wds-button-border-ai-secondary-mask: none;
474
+ --wds-button-border-ai-secondary-hover: transparent;
475
+ --wds-button-border-ai-secondary-active: transparent;
476
+ --wds-button-border-ai-secondary: transparent;
463
477
  --wds-breakpoint-x-large: 1572px;
464
478
  --wds-breakpoint-small: 490px;
465
479
  --wds-breakpoint-medium: 768px;
@@ -1232,6 +1246,13 @@
1232
1246
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-0);
1233
1247
  --wds-image-border-radius-none: var(--wds-border-radius-0);
1234
1248
  --wds-image-border-radius-default: var(--wds-border-radius-400);
1249
+ --wds-icon-button-color-fill-ai-secondary-hover: var(--wds-color-fill-ai-primary-hover);
1250
+ --wds-icon-button-color-fill-ai-secondary-active: var(--wds-color-fill-ai-primary-active);
1251
+ --wds-icon-button-color-fill-ai-secondary: var(--wds-color-fill-ai-primary);
1252
+ --wds-icon-button-color-fill-ai-primary-hover: var(--wds-color-fill-ai-primary-hover);
1253
+ --wds-icon-button-color-fill-ai-primary-active: var(--wds-color-fill-ai-primary-active);
1254
+ --wds-icon-button-color-fill-ai-primary: var(--wds-color-fill-ai-primary);
1255
+ --wds-icon-button-border-ai-width: var(--wds-border-width-none);
1235
1256
  --wds-google-preview-surface-fill: var(--wds-color-white);
1236
1257
  --wds-form-field-label-gap-tiny: var(--wds-space-100);
1237
1258
  --wds-form-field-label-gap-small: var(--wds-space-150);
@@ -1745,6 +1766,7 @@
1745
1766
  --wds-button-padding-horizontal-medium: var(--wds-space-400);
1746
1767
  --wds-button-padding-horizontal-large: var(--wds-space-500);
1747
1768
  --wds-button-padding-horizontal-extra-large: var(--wds-space-600);
1769
+ --wds-button-label-fill-ai-tertiary: var(--wds-color-fill-ai-primary);
1748
1770
  --wds-button-gap-tiny: var(--wds-space-50);
1749
1771
  --wds-button-gap-small: var(--wds-space-100);
1750
1772
  --wds-button-gap-medium: var(--wds-space-100);
@@ -1753,6 +1775,8 @@
1753
1775
  --wds-button-font-weight-small: var(--wds-font-weight-medium);
1754
1776
  --wds-button-font-weight-medium: var(--wds-font-weight-medium);
1755
1777
  --wds-button-font-weight-large: var(--wds-font-weight-medium);
1778
+ --wds-button-fill-ai-secondary-hover: var(--wds-color-fill-ai-primary-hover);
1779
+ --wds-button-fill-ai-secondary-active: var(--wds-color-fill-ai-primary-active);
1756
1780
  --wds-button-fill-ai-primary-hover: var(--wds-color-fill-ai-primary-hover);
1757
1781
  --wds-button-fill-ai-primary-active: var(--wds-color-fill-ai-primary-active);
1758
1782
  --wds-button-fill-ai-primary: var(--wds-color-fill-ai-primary);
@@ -2292,6 +2316,16 @@
2292
2316
  --wds-icon-button-color-text-dark-primary-disabled: var(--wds-color-text-disabled-light);
2293
2317
  --wds-icon-button-color-text-dark-primary-active: var(--wds-color-text-standard-primary-light);
2294
2318
  --wds-icon-button-color-text-dark-primary: var(--wds-color-text-standard-primary-light);
2319
+ --wds-icon-button-color-text-ai-tertiary-hover: var(--wds-color-text-primary);
2320
+ --wds-icon-button-color-text-ai-tertiary-disabled: var(--wds-color-fill-dark-primary-disabled);
2321
+ --wds-icon-button-color-text-ai-tertiary-active: var(--wds-color-text-primary);
2322
+ --wds-icon-button-color-text-ai-tertiary: var(--wds-color-text-primary);
2323
+ --wds-icon-button-color-text-ai-secondary-hover: var(--wds-color-text-standard-primary-light);
2324
+ --wds-icon-button-color-text-ai-secondary-disabled: var(--wds-color-text-disabled);
2325
+ --wds-icon-button-color-text-ai-secondary-active: var(--wds-color-text-standard-primary-light);
2326
+ --wds-icon-button-color-text-ai-secondary: var(--wds-color-text-primary);
2327
+ --wds-icon-button-color-text-ai-primary-disabled: var(--wds-color-text-disabled-light);
2328
+ --wds-icon-button-color-text-ai-primary: var(--wds-color-text-standard-primary-light);
2295
2329
  --wds-icon-button-color-fill-standard-tertiary-hover: var(--wds-color-fill-light-secondary-hover);
2296
2330
  --wds-icon-button-color-fill-standard-tertiary-disabled: var(--wds-color-fill-light-secondary-disabled);
2297
2331
  --wds-icon-button-color-fill-standard-tertiary-active: var(--wds-color-fill-light-secondary-active);
@@ -2340,6 +2374,11 @@
2340
2374
  --wds-icon-button-color-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
2341
2375
  --wds-icon-button-color-fill-dark-primary-active: var(--wds-color-fill-dark-primary-active);
2342
2376
  --wds-icon-button-color-fill-dark-primary: var(--wds-color-fill-dark-primary);
2377
+ --wds-icon-button-color-fill-ai-tertiary-hover: var(--wds-color-fill-standard-tertiary);
2378
+ --wds-icon-button-color-fill-ai-tertiary-disabled: var(--wds-color-fill-standard-tertiary);
2379
+ --wds-icon-button-color-fill-ai-tertiary: var(--wds-color-fill-standard-tertiary);
2380
+ --wds-icon-button-color-fill-ai-secondary-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2381
+ --wds-icon-button-color-fill-ai-primary-disabled: var(--wds-color-fill-ai-primary-disabled);
2343
2382
  --wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-border-standard-secondary-hover);
2344
2383
  --wds-icon-button-color-border-standard-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
2345
2384
  --wds-icon-button-color-border-standard-secondary-active: var(--wds-color-border-standard-secondary-active);
@@ -2355,6 +2394,7 @@
2355
2394
  --wds-icon-button-color-border-dark-secondary-disabled: var(--wds-color-border-dark-secondary-disabled);
2356
2395
  --wds-icon-button-color-border-dark-secondary-active: var(--wds-color-border-dark-primary-active);
2357
2396
  --wds-icon-button-color-border-dark-secondary: var(--wds-color-border-dark-primary);
2397
+ --wds-icon-button-color-border-ai-secondary-disabled: var(--wds-color-text-disabled);
2358
2398
  --wds-form-field-label-font-size-tiny: var(--wds-font-size-body-tiny);
2359
2399
  --wds-form-field-label-font-size-small: var(--wds-font-size-body-small);
2360
2400
  --wds-form-field-label-fill: var(--wds-color-text-standard-secondary);
@@ -2492,6 +2532,14 @@
2492
2532
  --wds-button-label-fill-dark-secondary-active: var(--wds-color-text-standard-primary-light);
2493
2533
  --wds-button-label-fill-dark-secondary: var(--wds-color-text-standard-primary);
2494
2534
  --wds-button-label-fill-dark-primary-disabled: var(--wds-color-text-disabled-light);
2535
+ --wds-button-label-fill-ai-tertiary-hover: var(--wds-color-text-standard-primary-light);
2536
+ --wds-button-label-fill-ai-tertiary-disabled: var(--wds-color-text-disabled);
2537
+ --wds-button-label-fill-ai-tertiary-active: var(--wds-color-text-standard-primary-light);
2538
+ --wds-button-label-fill-ai-secondary-hover: var(--wds-color-text-standard-primary-light);
2539
+ --wds-button-label-fill-ai-secondary-disabled: var(--wds-color-text-disabled);
2540
+ --wds-button-label-fill-ai-secondary-active: var(--wds-color-text-standard-primary-light);
2541
+ --wds-button-label-fill-ai-secondary: var(--wds-color-text-primary);
2542
+ --wds-button-label-fill-ai-primary-disabled: var(--wds-color-text-disabled-light);
2495
2543
  --wds-button-label-fill-ai-primary: var(--wds-color-text-standard-primary-light);
2496
2544
  --wds-button-font-size-tiny: var(--wds-font-size-body-tiny);
2497
2545
  --wds-button-font-size-small: var(--wds-font-size-body-small);
@@ -2525,7 +2573,12 @@
2525
2573
  --wds-button-fill-dark-secondary-active: var(--wds-color-fill-dark-primary);
2526
2574
  --wds-button-fill-dark-secondary: var(--wds-color-fill-dark-tertiary);
2527
2575
  --wds-button-fill-dark-primary-disabled: var(--wds-color-fill-dark-primary-disabled);
2576
+ --wds-button-fill-ai-tertiary-hover: var(--wds-color-fill-ai-secondary-hover);
2577
+ --wds-button-fill-ai-tertiary-disabled: var(--wds-color-fill-ai-secondary-disabled);
2578
+ --wds-button-fill-ai-tertiary-active: var(--wds-color-fill-ai-secondary-active);
2579
+ --wds-button-fill-ai-secondary-disabled: var(--wds-color-fill-standard-tertiary-disabled);
2528
2580
  --wds-button-fill-ai-secondary: var(--wds-color-fill-standard-tertiary);
2581
+ --wds-button-fill-ai-primary-disabled: var(--wds-color-fill-ai-primary-disabled);
2529
2582
  --wds-button-border-standard-secondary-hover: var(--wds-color-border-standard-primary-active);
2530
2583
  --wds-button-border-standard-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
2531
2584
  --wds-button-border-standard-secondary-active: var(--wds-color-fill-standard-primary-active);
@@ -2542,6 +2595,7 @@
2542
2595
  --wds-button-border-dark-secondary-disabled: var(--wds-color-border-premium-secondary-disabled);
2543
2596
  --wds-button-border-dark-secondary-active: var(--wds-color-fill-dark-primary);
2544
2597
  --wds-button-border-dark-secondary: var(--wds-color-border-dark-primary);
2598
+ --wds-button-border-ai-secondary-disabled: var(--wds-color-border-standard-secondary-disabled);
2545
2599
  --wds-breadcrumbs-on-grey-text-fill-active: var(--wds-color-text-standard-primary);
2546
2600
  --wds-badge-transparent-warning-label-color: var(--wds-color-text-warning);
2547
2601
  --wds-badge-transparent-urgent-label-color: var(--wds-color-text-urgent);
package/all.st.css CHANGED
@@ -224,7 +224,13 @@
224
224
  @property st-global(--wds-breakpoint-medium);
225
225
  @property st-global(--wds-breakpoint-small);
226
226
  @property st-global(--wds-breakpoint-x-large);
227
+ @property st-global(--wds-button-border-ai-secondary);
228
+ @property st-global(--wds-button-border-ai-secondary-active);
229
+ @property st-global(--wds-button-border-ai-secondary-disabled);
230
+ @property st-global(--wds-button-border-ai-secondary-hover);
227
231
  @property st-global(--wds-button-border-ai-secondary-mask);
232
+ @property st-global(--wds-button-border-ai-secondary-ring-display);
233
+ @property st-global(--wds-button-border-ai-tertiary-disabled);
228
234
  @property st-global(--wds-button-border-dark-secondary);
229
235
  @property st-global(--wds-button-border-dark-secondary-active);
230
236
  @property st-global(--wds-button-border-dark-secondary-disabled);
@@ -247,8 +253,16 @@
247
253
  @property st-global(--wds-button-border-standard-secondary-hover);
248
254
  @property st-global(--wds-button-fill-ai-primary);
249
255
  @property st-global(--wds-button-fill-ai-primary-active);
256
+ @property st-global(--wds-button-fill-ai-primary-disabled);
250
257
  @property st-global(--wds-button-fill-ai-primary-hover);
251
258
  @property st-global(--wds-button-fill-ai-secondary);
259
+ @property st-global(--wds-button-fill-ai-secondary-active);
260
+ @property st-global(--wds-button-fill-ai-secondary-disabled);
261
+ @property st-global(--wds-button-fill-ai-secondary-hover);
262
+ @property st-global(--wds-button-fill-ai-tertiary);
263
+ @property st-global(--wds-button-fill-ai-tertiary-active);
264
+ @property st-global(--wds-button-fill-ai-tertiary-disabled);
265
+ @property st-global(--wds-button-fill-ai-tertiary-hover);
252
266
  @property st-global(--wds-button-fill-dark-primary-disabled);
253
267
  @property st-global(--wds-button-fill-dark-secondary);
254
268
  @property st-global(--wds-button-fill-dark-secondary-active);
@@ -299,6 +313,15 @@
299
313
  @property st-global(--wds-button-icon-offset-small);
300
314
  @property st-global(--wds-button-icon-offset-tiny);
301
315
  @property st-global(--wds-button-label-fill-ai-primary);
316
+ @property st-global(--wds-button-label-fill-ai-primary-disabled);
317
+ @property st-global(--wds-button-label-fill-ai-secondary);
318
+ @property st-global(--wds-button-label-fill-ai-secondary-active);
319
+ @property st-global(--wds-button-label-fill-ai-secondary-disabled);
320
+ @property st-global(--wds-button-label-fill-ai-secondary-hover);
321
+ @property st-global(--wds-button-label-fill-ai-tertiary);
322
+ @property st-global(--wds-button-label-fill-ai-tertiary-active);
323
+ @property st-global(--wds-button-label-fill-ai-tertiary-disabled);
324
+ @property st-global(--wds-button-label-fill-ai-tertiary-hover);
302
325
  @property st-global(--wds-button-label-fill-dark-primary-disabled);
303
326
  @property st-global(--wds-button-label-fill-dark-secondary);
304
327
  @property st-global(--wds-button-label-fill-dark-secondary-active);
@@ -1228,6 +1251,15 @@
1228
1251
  @property st-global(--wds-horizontal-scroll-button-fill);
1229
1252
  @property st-global(--wds-horizontal-scroll-button-fill-active);
1230
1253
  @property st-global(--wds-horizontal-scroll-button-text);
1254
+ @property st-global(--wds-icon-button-border-ai-secondary-ring-display);
1255
+ @property st-global(--wds-icon-button-border-ai-width);
1256
+ @property st-global(--wds-icon-button-color-border-ai-primary);
1257
+ @property st-global(--wds-icon-button-color-border-ai-primary-active);
1258
+ @property st-global(--wds-icon-button-color-border-ai-primary-hover);
1259
+ @property st-global(--wds-icon-button-color-border-ai-secondary);
1260
+ @property st-global(--wds-icon-button-color-border-ai-secondary-active);
1261
+ @property st-global(--wds-icon-button-color-border-ai-secondary-disabled);
1262
+ @property st-global(--wds-icon-button-color-border-ai-secondary-hover);
1231
1263
  @property st-global(--wds-icon-button-color-border-dark-secondary);
1232
1264
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
1233
1265
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -1243,6 +1275,18 @@
1243
1275
  @property st-global(--wds-icon-button-color-border-standard-secondary-active);
1244
1276
  @property st-global(--wds-icon-button-color-border-standard-secondary-disabled);
1245
1277
  @property st-global(--wds-icon-button-color-border-standard-secondary-hover);
1278
+ @property st-global(--wds-icon-button-color-fill-ai-primary);
1279
+ @property st-global(--wds-icon-button-color-fill-ai-primary-active);
1280
+ @property st-global(--wds-icon-button-color-fill-ai-primary-disabled);
1281
+ @property st-global(--wds-icon-button-color-fill-ai-primary-hover);
1282
+ @property st-global(--wds-icon-button-color-fill-ai-secondary);
1283
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-active);
1284
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-disabled);
1285
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-hover);
1286
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary);
1287
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-active);
1288
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-disabled);
1289
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-hover);
1246
1290
  @property st-global(--wds-icon-button-color-fill-dark-primary);
1247
1291
  @property st-global(--wds-icon-button-color-fill-dark-primary-active);
1248
1292
  @property st-global(--wds-icon-button-color-fill-dark-primary-disabled);
@@ -1291,6 +1335,16 @@
1291
1335
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
1292
1336
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-disabled);
1293
1337
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
1338
+ @property st-global(--wds-icon-button-color-text-ai-primary);
1339
+ @property st-global(--wds-icon-button-color-text-ai-primary-disabled);
1340
+ @property st-global(--wds-icon-button-color-text-ai-secondary);
1341
+ @property st-global(--wds-icon-button-color-text-ai-secondary-active);
1342
+ @property st-global(--wds-icon-button-color-text-ai-secondary-disabled);
1343
+ @property st-global(--wds-icon-button-color-text-ai-secondary-hover);
1344
+ @property st-global(--wds-icon-button-color-text-ai-tertiary);
1345
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-active);
1346
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-disabled);
1347
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-hover);
1294
1348
  @property st-global(--wds-icon-button-color-text-dark-primary);
1295
1349
  @property st-global(--wds-icon-button-color-text-dark-primary-active);
1296
1350
  @property st-global(--wds-icon-button-color-text-dark-primary-disabled);
@@ -2949,7 +3003,13 @@
2949
3003
  --wds-breakpoint-medium: 768px;
2950
3004
  --wds-breakpoint-small: 490px;
2951
3005
  --wds-breakpoint-x-large: 1572px;
3006
+ --wds-button-border-ai-secondary: transparent;
3007
+ --wds-button-border-ai-secondary-active: transparent;
3008
+ --wds-button-border-ai-secondary-disabled: rgba(0, 6, 36, .1);
3009
+ --wds-button-border-ai-secondary-hover: transparent;
2952
3010
  --wds-button-border-ai-secondary-mask: none;
3011
+ --wds-button-border-ai-secondary-ring-display: block;
3012
+ --wds-button-border-ai-tertiary-disabled: transparent;
2953
3013
  --wds-button-border-dark-secondary: #868aa5;
2954
3014
  --wds-button-border-dark-secondary-active: #000624;
2955
3015
  --wds-button-border-dark-secondary-disabled: rgba(0, 6, 36, .1);
@@ -2972,8 +3032,16 @@
2972
3032
  --wds-button-border-standard-secondary-hover: #116dff;
2973
3033
  --wds-button-fill-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
2974
3034
  --wds-button-fill-ai-primary-active: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
3035
+ --wds-button-fill-ai-primary-disabled: rgba(0, 6, 36, .3);
2975
3036
  --wds-button-fill-ai-primary-hover: linear-gradient(81deg, #0021FF -177.08%, #116DFF 31.96%, #5FF2AE 99.97%);
2976
3037
  --wds-button-fill-ai-secondary: #ffffff;
3038
+ --wds-button-fill-ai-secondary-active: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
3039
+ --wds-button-fill-ai-secondary-disabled: #ffffff;
3040
+ --wds-button-fill-ai-secondary-hover: linear-gradient(81deg, #0021FF -177.08%, #116DFF 31.96%, #5FF2AE 99.97%);
3041
+ --wds-button-fill-ai-tertiary: transparent;
3042
+ --wds-button-fill-ai-tertiary-active: #d6d1fc;
3043
+ --wds-button-fill-ai-tertiary-disabled: rgba(0, 6, 36, .1);
3044
+ --wds-button-fill-ai-tertiary-hover: #a59bfa;
2977
3045
  --wds-button-fill-dark-primary-disabled: rgba(0, 6, 36, .3);
2978
3046
  --wds-button-fill-dark-secondary: #ffffff;
2979
3047
  --wds-button-fill-dark-secondary-active: #000624;
@@ -3024,6 +3092,15 @@
3024
3092
  --wds-button-icon-offset-small: 12px;
3025
3093
  --wds-button-icon-offset-tiny: 12px;
3026
3094
  --wds-button-label-fill-ai-primary: #ffffff;
3095
+ --wds-button-label-fill-ai-primary-disabled: rgba(255, 255, 255, .7);
3096
+ --wds-button-label-fill-ai-secondary: #116dff;
3097
+ --wds-button-label-fill-ai-secondary-active: #ffffff;
3098
+ --wds-button-label-fill-ai-secondary-disabled: rgba(0, 6, 36, .3);
3099
+ --wds-button-label-fill-ai-secondary-hover: #ffffff;
3100
+ --wds-button-label-fill-ai-tertiary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
3101
+ --wds-button-label-fill-ai-tertiary-active: #ffffff;
3102
+ --wds-button-label-fill-ai-tertiary-disabled: rgba(0, 6, 36, .3);
3103
+ --wds-button-label-fill-ai-tertiary-hover: #ffffff;
3027
3104
  --wds-button-label-fill-dark-primary-disabled: rgba(255, 255, 255, .7);
3028
3105
  --wds-button-label-fill-dark-secondary: #000624;
3029
3106
  --wds-button-label-fill-dark-secondary-active: #ffffff;
@@ -3953,6 +4030,15 @@
3953
4030
  --wds-horizontal-scroll-button-fill: #FFFFFF;
3954
4031
  --wds-horizontal-scroll-button-fill-active: #CFD1DC;
3955
4032
  --wds-horizontal-scroll-button-text: #000624;
4033
+ --wds-icon-button-border-ai-secondary-ring-display: block;
4034
+ --wds-icon-button-border-ai-width: 0px;
4035
+ --wds-icon-button-color-border-ai-primary: transparent;
4036
+ --wds-icon-button-color-border-ai-primary-active: transparent;
4037
+ --wds-icon-button-color-border-ai-primary-hover: transparent;
4038
+ --wds-icon-button-color-border-ai-secondary: transparent;
4039
+ --wds-icon-button-color-border-ai-secondary-active: transparent;
4040
+ --wds-icon-button-color-border-ai-secondary-disabled: rgba(0, 6, 36, .3);
4041
+ --wds-icon-button-color-border-ai-secondary-hover: transparent;
3956
4042
  --wds-icon-button-color-border-dark-secondary: #868aa5;
3957
4043
  --wds-icon-button-color-border-dark-secondary-active: #44485f;
3958
4044
  --wds-icon-button-color-border-dark-secondary-disabled: rgba(0, 6, 36, .1);
@@ -3968,6 +4054,18 @@
3968
4054
  --wds-icon-button-color-border-standard-secondary-active: #116dff;
3969
4055
  --wds-icon-button-color-border-standard-secondary-disabled: rgba(0, 6, 36, .1);
3970
4056
  --wds-icon-button-color-border-standard-secondary-hover: #a8caff;
4057
+ --wds-icon-button-color-fill-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
4058
+ --wds-icon-button-color-fill-ai-primary-active: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
4059
+ --wds-icon-button-color-fill-ai-primary-disabled: rgba(0, 6, 36, .3);
4060
+ --wds-icon-button-color-fill-ai-primary-hover: linear-gradient(81deg, #0021FF -177.08%, #116DFF 31.96%, #5FF2AE 99.97%);
4061
+ --wds-icon-button-color-fill-ai-secondary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
4062
+ --wds-icon-button-color-fill-ai-secondary-active: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
4063
+ --wds-icon-button-color-fill-ai-secondary-disabled: #ffffff;
4064
+ --wds-icon-button-color-fill-ai-secondary-hover: linear-gradient(81deg, #0021FF -177.08%, #116DFF 31.96%, #5FF2AE 99.97%);
4065
+ --wds-icon-button-color-fill-ai-tertiary: #ffffff;
4066
+ --wds-icon-button-color-fill-ai-tertiary-active: transparent;
4067
+ --wds-icon-button-color-fill-ai-tertiary-disabled: #ffffff;
4068
+ --wds-icon-button-color-fill-ai-tertiary-hover: #ffffff;
3971
4069
  --wds-icon-button-color-fill-dark-primary: #000624;
3972
4070
  --wds-icon-button-color-fill-dark-primary-active: #000624;
3973
4071
  --wds-icon-button-color-fill-dark-primary-disabled: rgba(0, 6, 36, .3);
@@ -4016,6 +4114,16 @@
4016
4114
  --wds-icon-button-color-fill-standard-tertiary-active: #d6e6fe;
4017
4115
  --wds-icon-button-color-fill-standard-tertiary-disabled: rgba(255, 255, 255, 0);
4018
4116
  --wds-icon-button-color-fill-standard-tertiary-hover: #e7f0ff;
4117
+ --wds-icon-button-color-text-ai-primary: #ffffff;
4118
+ --wds-icon-button-color-text-ai-primary-disabled: rgba(255, 255, 255, .7);
4119
+ --wds-icon-button-color-text-ai-secondary: #116dff;
4120
+ --wds-icon-button-color-text-ai-secondary-active: #ffffff;
4121
+ --wds-icon-button-color-text-ai-secondary-disabled: rgba(0, 6, 36, .3);
4122
+ --wds-icon-button-color-text-ai-secondary-hover: #ffffff;
4123
+ --wds-icon-button-color-text-ai-tertiary: #116dff;
4124
+ --wds-icon-button-color-text-ai-tertiary-active: #116dff;
4125
+ --wds-icon-button-color-text-ai-tertiary-disabled: rgba(0, 6, 36, .3);
4126
+ --wds-icon-button-color-text-ai-tertiary-hover: #116dff;
4019
4127
  --wds-icon-button-color-text-dark-primary: #ffffff;
4020
4128
  --wds-icon-button-color-text-dark-primary-active: #ffffff;
4021
4129
  --wds-icon-button-color-text-dark-primary-disabled: rgba(255, 255, 255, .7);