@wix/design-system-tokens 1.232.6 → 1.234.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 +28 -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 +84 -30
  7. package/odeditor/all.scss +84 -30
  8. package/odeditor/all.st.css +136 -28
  9. package/odeditor/component.st.css +119 -11
  10. package/odeditor/semantic.st.css +17 -17
  11. package/odeditor-dark/all.css +151 -95
  12. package/odeditor-dark/all.scss +151 -95
  13. package/odeditor-dark/all.st.css +204 -92
  14. package/odeditor-dark/component.st.css +187 -75
  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 +151 -95
  22. package/studio2-light/all.scss +151 -95
  23. package/studio2-light/all.st.css +204 -92
  24. package/studio2-light/component.st.css +187 -75
  25. package/studio2-light/semantic.st.css +17 -17
package/odeditor/component.st.css CHANGED
@@ -184,7 +184,13 @@
184
184
  @property st-global(--wds-breadcrumbs-text-line-height-small);
185
185
  @property st-global(--wds-breadcrumbs-text-weight-default);
186
186
  @property st-global(--wds-breadcrumbs-text-weight-selected);
187
+ @property st-global(--wds-button-border-ai-secondary);
188
+ @property st-global(--wds-button-border-ai-secondary-active);
189
+ @property st-global(--wds-button-border-ai-secondary-disabled);
190
+ @property st-global(--wds-button-border-ai-secondary-hover);
187
191
  @property st-global(--wds-button-border-ai-secondary-mask);
192
+ @property st-global(--wds-button-border-ai-secondary-ring-display);
193
+ @property st-global(--wds-button-border-ai-tertiary-disabled);
188
194
  @property st-global(--wds-button-border-dark-secondary);
189
195
  @property st-global(--wds-button-border-dark-secondary-active);
190
196
  @property st-global(--wds-button-border-dark-secondary-disabled);
@@ -208,8 +214,16 @@
208
214
  @property st-global(--wds-button-border-width-secondary-hover);
209
215
  @property st-global(--wds-button-fill-ai-primary);
210
216
  @property st-global(--wds-button-fill-ai-primary-active);
217
+ @property st-global(--wds-button-fill-ai-primary-disabled);
211
218
  @property st-global(--wds-button-fill-ai-primary-hover);
212
219
  @property st-global(--wds-button-fill-ai-secondary);
220
+ @property st-global(--wds-button-fill-ai-secondary-active);
221
+ @property st-global(--wds-button-fill-ai-secondary-disabled);
222
+ @property st-global(--wds-button-fill-ai-secondary-hover);
223
+ @property st-global(--wds-button-fill-ai-tertiary);
224
+ @property st-global(--wds-button-fill-ai-tertiary-active);
225
+ @property st-global(--wds-button-fill-ai-tertiary-disabled);
226
+ @property st-global(--wds-button-fill-ai-tertiary-hover);
213
227
  @property st-global(--wds-button-fill-dark-primary-disabled);
214
228
  @property st-global(--wds-button-fill-dark-secondary);
215
229
  @property st-global(--wds-button-fill-dark-secondary-active);
@@ -261,6 +275,15 @@
261
275
  @property st-global(--wds-button-icon-offset-small);
262
276
  @property st-global(--wds-button-icon-offset-tiny);
263
277
  @property st-global(--wds-button-label-fill-ai-primary);
278
+ @property st-global(--wds-button-label-fill-ai-primary-disabled);
279
+ @property st-global(--wds-button-label-fill-ai-secondary);
280
+ @property st-global(--wds-button-label-fill-ai-secondary-active);
281
+ @property st-global(--wds-button-label-fill-ai-secondary-disabled);
282
+ @property st-global(--wds-button-label-fill-ai-secondary-hover);
283
+ @property st-global(--wds-button-label-fill-ai-tertiary);
284
+ @property st-global(--wds-button-label-fill-ai-tertiary-active);
285
+ @property st-global(--wds-button-label-fill-ai-tertiary-disabled);
286
+ @property st-global(--wds-button-label-fill-ai-tertiary-hover);
264
287
  @property st-global(--wds-button-label-fill-dark-primary-disabled);
265
288
  @property st-global(--wds-button-label-fill-dark-secondary);
266
289
  @property st-global(--wds-button-label-fill-dark-secondary-active);
@@ -646,6 +669,15 @@
646
669
  @property st-global(--wds-horizontal-scroll-button-fill);
647
670
  @property st-global(--wds-horizontal-scroll-button-fill-active);
648
671
  @property st-global(--wds-horizontal-scroll-button-text);
672
+ @property st-global(--wds-icon-button-border-ai-secondary-ring-display);
673
+ @property st-global(--wds-icon-button-border-ai-width);
674
+ @property st-global(--wds-icon-button-color-border-ai-primary);
675
+ @property st-global(--wds-icon-button-color-border-ai-primary-active);
676
+ @property st-global(--wds-icon-button-color-border-ai-primary-hover);
677
+ @property st-global(--wds-icon-button-color-border-ai-secondary);
678
+ @property st-global(--wds-icon-button-color-border-ai-secondary-active);
679
+ @property st-global(--wds-icon-button-color-border-ai-secondary-disabled);
680
+ @property st-global(--wds-icon-button-color-border-ai-secondary-hover);
649
681
  @property st-global(--wds-icon-button-color-border-dark-secondary);
650
682
  @property st-global(--wds-icon-button-color-border-dark-secondary-active);
651
683
  @property st-global(--wds-icon-button-color-border-dark-secondary-disabled);
@@ -661,6 +693,18 @@
661
693
  @property st-global(--wds-icon-button-color-border-standard-secondary-active);
662
694
  @property st-global(--wds-icon-button-color-border-standard-secondary-disabled);
663
695
  @property st-global(--wds-icon-button-color-border-standard-secondary-hover);
696
+ @property st-global(--wds-icon-button-color-fill-ai-primary);
697
+ @property st-global(--wds-icon-button-color-fill-ai-primary-active);
698
+ @property st-global(--wds-icon-button-color-fill-ai-primary-disabled);
699
+ @property st-global(--wds-icon-button-color-fill-ai-primary-hover);
700
+ @property st-global(--wds-icon-button-color-fill-ai-secondary);
701
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-active);
702
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-disabled);
703
+ @property st-global(--wds-icon-button-color-fill-ai-secondary-hover);
704
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary);
705
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-active);
706
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-disabled);
707
+ @property st-global(--wds-icon-button-color-fill-ai-tertiary-hover);
664
708
  @property st-global(--wds-icon-button-color-fill-dark-primary);
665
709
  @property st-global(--wds-icon-button-color-fill-dark-primary-active);
666
710
  @property st-global(--wds-icon-button-color-fill-dark-primary-disabled);
@@ -709,6 +753,16 @@
709
753
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
710
754
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-disabled);
711
755
  @property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
756
+ @property st-global(--wds-icon-button-color-text-ai-primary);
757
+ @property st-global(--wds-icon-button-color-text-ai-primary-disabled);
758
+ @property st-global(--wds-icon-button-color-text-ai-secondary);
759
+ @property st-global(--wds-icon-button-color-text-ai-secondary-active);
760
+ @property st-global(--wds-icon-button-color-text-ai-secondary-disabled);
761
+ @property st-global(--wds-icon-button-color-text-ai-secondary-hover);
762
+ @property st-global(--wds-icon-button-color-text-ai-tertiary);
763
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-active);
764
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-disabled);
765
+ @property st-global(--wds-icon-button-color-text-ai-tertiary-hover);
712
766
  @property st-global(--wds-icon-button-color-text-dark-primary);
713
767
  @property st-global(--wds-icon-button-color-text-dark-primary-active);
714
768
  @property st-global(--wds-icon-button-color-text-dark-primary-disabled);
@@ -2147,7 +2201,13 @@
2147
2201
  --wds-breadcrumbs-text-line-height-small: 16px;
2148
2202
  --wds-breadcrumbs-text-weight-default: 400;
2149
2203
  --wds-breadcrumbs-text-weight-selected: 500;
2204
+ --wds-button-border-ai-secondary: #7896ff;
2205
+ --wds-button-border-ai-secondary-active: #d5dfff;
2206
+ --wds-button-border-ai-secondary-disabled: #f0efef;
2207
+ --wds-button-border-ai-secondary-hover: #acbeff;
2150
2208
  --wds-button-border-ai-secondary-mask: none;
2209
+ --wds-button-border-ai-secondary-ring-display: none;
2210
+ --wds-button-border-ai-tertiary-disabled: #f0efef;
2151
2211
  --wds-button-border-dark-secondary: #767574;
2152
2212
  --wds-button-border-dark-secondary-active: #dedede;
2153
2213
  --wds-button-border-dark-secondary-disabled: #f0efef;
@@ -2169,10 +2229,18 @@
2169
2229
  --wds-button-border-standard-secondary-disabled: #f0efef;
2170
2230
  --wds-button-border-standard-secondary-hover: #acbeff;
2171
2231
  --wds-button-border-width-secondary-hover: 1px;
2172
- --wds-button-fill-ai-primary: #5a48f5;
2173
- --wds-button-fill-ai-primary-active: #5a48f5;
2174
- --wds-button-fill-ai-primary-hover: #4d3dd0;
2175
- --wds-button-fill-ai-secondary: #ffffff;
2232
+ --wds-button-fill-ai-primary: #2f5dff;
2233
+ --wds-button-fill-ai-primary-active: #0f2ccf;
2234
+ --wds-button-fill-ai-primary-disabled: #f0efef;
2235
+ --wds-button-fill-ai-primary-hover: #1c3fe5;
2236
+ --wds-button-fill-ai-secondary: rgba(255, 255, 255, 0);
2237
+ --wds-button-fill-ai-secondary-active: #d5dfff;
2238
+ --wds-button-fill-ai-secondary-disabled: #f0efef;
2239
+ --wds-button-fill-ai-secondary-hover: #eaefff;
2240
+ --wds-button-fill-ai-tertiary: rgba(255, 255, 255, 0);
2241
+ --wds-button-fill-ai-tertiary-active: #d5dfff;
2242
+ --wds-button-fill-ai-tertiary-disabled: #f0efef;
2243
+ --wds-button-fill-ai-tertiary-hover: #eaefff;
2176
2244
  --wds-button-fill-dark-primary-disabled: #f0efef;
2177
2245
  --wds-button-fill-dark-secondary: rgba(255, 255, 255, 0);
2178
2246
  --wds-button-fill-dark-secondary-active: #dedede;
@@ -2224,6 +2292,15 @@
2224
2292
  --wds-button-icon-offset-small: 12px;
2225
2293
  --wds-button-icon-offset-tiny: 12px;
2226
2294
  --wds-button-label-fill-ai-primary: #ffffff;
2295
+ --wds-button-label-fill-ai-primary-disabled: #a8a6a5;
2296
+ --wds-button-label-fill-ai-secondary: #1c3fe5;
2297
+ --wds-button-label-fill-ai-secondary-active: #0f2ccf;
2298
+ --wds-button-label-fill-ai-secondary-disabled: #a8a6a5;
2299
+ --wds-button-label-fill-ai-secondary-hover: #0f2ccf;
2300
+ --wds-button-label-fill-ai-tertiary: #1c3fe5;
2301
+ --wds-button-label-fill-ai-tertiary-active: #0f2ccf;
2302
+ --wds-button-label-fill-ai-tertiary-disabled: #a8a6a5;
2303
+ --wds-button-label-fill-ai-tertiary-hover: #0f2ccf;
2227
2304
  --wds-button-label-fill-dark-primary-disabled: #a8a6a5;
2228
2305
  --wds-button-label-fill-dark-secondary: #151414;
2229
2306
  --wds-button-label-fill-dark-secondary-active: #151414;
@@ -2609,6 +2686,15 @@
2609
2686
  --wds-horizontal-scroll-button-fill: #FFFFFF;
2610
2687
  --wds-horizontal-scroll-button-fill-active: #F8F6F6;
2611
2688
  --wds-horizontal-scroll-button-text: #000624;
2689
+ --wds-icon-button-border-ai-secondary-ring-display: none;
2690
+ --wds-icon-button-border-ai-width: 1px;
2691
+ --wds-icon-button-color-border-ai-primary: #2f5dff;
2692
+ --wds-icon-button-color-border-ai-primary-active: #0f2ccf;
2693
+ --wds-icon-button-color-border-ai-primary-hover: #1c3fe5;
2694
+ --wds-icon-button-color-border-ai-secondary: #7896ff;
2695
+ --wds-icon-button-color-border-ai-secondary-active: #d5dfff;
2696
+ --wds-icon-button-color-border-ai-secondary-disabled: #f0efef;
2697
+ --wds-icon-button-color-border-ai-secondary-hover: #acbeff;
2612
2698
  --wds-icon-button-color-border-dark-secondary: #767574;
2613
2699
  --wds-icon-button-color-border-dark-secondary-active: #dedede;
2614
2700
  --wds-icon-button-color-border-dark-secondary-disabled: #f0efef;
@@ -2624,6 +2710,18 @@
2624
2710
  --wds-icon-button-color-border-standard-secondary-active: #d5dfff;
2625
2711
  --wds-icon-button-color-border-standard-secondary-disabled: #f0efef;
2626
2712
  --wds-icon-button-color-border-standard-secondary-hover: #acbeff;
2713
+ --wds-icon-button-color-fill-ai-primary: #2f5dff;
2714
+ --wds-icon-button-color-fill-ai-primary-active: #0f2ccf;
2715
+ --wds-icon-button-color-fill-ai-primary-disabled: #f0efef;
2716
+ --wds-icon-button-color-fill-ai-primary-hover: #1c3fe5;
2717
+ --wds-icon-button-color-fill-ai-secondary: #ffffff;
2718
+ --wds-icon-button-color-fill-ai-secondary-active: #d5dfff;
2719
+ --wds-icon-button-color-fill-ai-secondary-disabled: #f0efef;
2720
+ --wds-icon-button-color-fill-ai-secondary-hover: #eaefff;
2721
+ --wds-icon-button-color-fill-ai-tertiary: rgba(255, 255, 255, 0);
2722
+ --wds-icon-button-color-fill-ai-tertiary-active: #d5dfff;
2723
+ --wds-icon-button-color-fill-ai-tertiary-disabled: rgba(255, 255, 255, 0);
2724
+ --wds-icon-button-color-fill-ai-tertiary-hover: #eaefff;
2627
2725
  --wds-icon-button-color-fill-dark-primary: #151414;
2628
2726
  --wds-icon-button-color-fill-dark-primary-active: #525150;
2629
2727
  --wds-icon-button-color-fill-dark-primary-disabled: #f0efef;
@@ -2672,6 +2770,16 @@
2672
2770
  --wds-icon-button-color-fill-standard-tertiary-active: #d5dfff;
2673
2771
  --wds-icon-button-color-fill-standard-tertiary-disabled: rgba(255, 255, 255, 0);
2674
2772
  --wds-icon-button-color-fill-standard-tertiary-hover: #eaefff;
2773
+ --wds-icon-button-color-text-ai-primary: #ffffff;
2774
+ --wds-icon-button-color-text-ai-primary-disabled: #a8a6a5;
2775
+ --wds-icon-button-color-text-ai-secondary: #2f5dff;
2776
+ --wds-icon-button-color-text-ai-secondary-active: #0f2ccf;
2777
+ --wds-icon-button-color-text-ai-secondary-disabled: #a8a6a5;
2778
+ --wds-icon-button-color-text-ai-secondary-hover: #0f2ccf;
2779
+ --wds-icon-button-color-text-ai-tertiary: #2f5dff;
2780
+ --wds-icon-button-color-text-ai-tertiary-active: #0f2ccf;
2781
+ --wds-icon-button-color-text-ai-tertiary-disabled: #a8a6a5;
2782
+ --wds-icon-button-color-text-ai-tertiary-hover: #0f2ccf;
2675
2783
  --wds-icon-button-color-text-dark-primary: #ffffff;
2676
2784
  --wds-icon-button-color-text-dark-primary-active: #ffffff;
2677
2785
  --wds-icon-button-color-text-dark-primary-disabled: #a8a6a5;
@@ -2722,7 +2830,7 @@
2722
2830
  --wds-icon-button-color-text-standard-tertiary-hover: #0f2ccf;
2723
2831
  --wds-image-border-radius-default: 8px;
2724
2832
  --wds-image-border-radius-none: 0px;
2725
- --wds-info-icon-fill: #525150;
2833
+ --wds-info-icon-fill: #383838;
2726
2834
  --wds-info-icon-fill-hover: #2f5dff;
2727
2835
  --wds-input-area-border-radius-default-medium: 8px;
2728
2836
  --wds-input-area-border-radius-default-small: 8px;
@@ -2907,7 +3015,7 @@
2907
3015
  --wds-loader-stroke-width-large: 2px;
2908
3016
  --wds-loader-stroke-width-medium: 2px;
2909
3017
  --wds-loader-stroke-width-small: 2px;
2910
- --wds-loader-stroke-width-tiny: 2px;
3018
+ --wds-loader-stroke-width-tiny: 3px;
2911
3019
  --wds-marketing-layout-actions-alignment-inverted: flex-end;
2912
3020
  --wds-marketing-layout-actions-gap-medium: 24px;
2913
3021
  --wds-marketing-layout-actions-gap-small: 24px;
@@ -3077,11 +3185,11 @@
3077
3185
  --wds-page-header-padding-bottom-with-tail: 12px;
3078
3186
  --wds-page-header-padding-horizontal: 48px;
3079
3187
  --wds-page-header-padding-horizontal-small: 24px;
3080
- --wds-page-header-padding-vertical: 24px;
3081
- --wds-page-header-padding-vertical-small: 18px;
3082
- --wds-page-header-subtitle-font-size: 12px;
3083
- --wds-page-header-subtitle-gap: 4px;
3084
- --wds-page-header-subtitle-line-height: 16px;
3188
+ --wds-page-header-padding-vertical: 32px;
3189
+ --wds-page-header-padding-vertical-small: 24px;
3190
+ --wds-page-header-subtitle-font-size: 14px;
3191
+ --wds-page-header-subtitle-gap: 6px;
3192
+ --wds-page-header-subtitle-line-height: 18px;
3085
3193
  --wds-page-header-subtitle-padding-start: 0px;
3086
3194
  --wds-page-header-title-actions-gap: 40px;
3087
3195
  --wds-page-header-title-font-size: 24px;
package/odeditor/semantic.st.css CHANGED
@@ -527,10 +527,10 @@
527
527
  --wds-border-width-surface-modal: 0px;
528
528
  --wds-border-width-varied: 0px;
529
529
  --wds-border-width-varied-secondary: 0px;
530
- --wds-color-border-ai-primary: #ffffff;
531
- --wds-color-border-ai-primary-active: #ffffff;
532
- --wds-color-border-ai-primary-disabled: #ffffff;
533
- --wds-color-border-ai-primary-hover: #ffffff;
530
+ --wds-color-border-ai-primary: #7896ff;
531
+ --wds-color-border-ai-primary-active: #2f5dff;
532
+ --wds-color-border-ai-primary-disabled: rgba(19, 23, 32, .1);
533
+ --wds-color-border-ai-primary-hover: #597dff;
534
534
  --wds-color-border-dark-primary: #767574;
535
535
  --wds-color-border-dark-primary-active: #383838;
536
536
  --wds-color-border-dark-primary-disabled: rgba(19, 23, 32, .1);
@@ -636,21 +636,21 @@
636
636
  --wds-color-fill-accent-10: #1f8845;
637
637
  --wds-color-fill-accent-11: #1b3689;
638
638
  --wds-color-fill-accent-12: #acafc4;
639
- --wds-color-fill-ai: #ffffff;
640
- --wds-color-fill-ai-hover: #ffffff;
641
- --wds-color-fill-ai-primary: #5a48f5;
642
- --wds-color-fill-ai-primary-active: #5a48f5;
643
- --wds-color-fill-ai-primary-disabled: #bebebe;
644
- --wds-color-fill-ai-primary-hover: #4d3dd0;
645
- --wds-color-fill-ai-primary-pressed: #ffffff;
646
- --wds-color-fill-ai-secondary: #d6d1fc;
647
- --wds-color-fill-ai-secondary-active: #d6d1fc;
648
- --wds-color-fill-ai-secondary-disabled: #e5e5e5;
649
- --wds-color-fill-ai-secondary-hover: #a59bfa;
639
+ --wds-color-fill-ai: #2f5dff;
640
+ --wds-color-fill-ai-hover: #1c3fe5;
641
+ --wds-color-fill-ai-primary: #2f5dff;
642
+ --wds-color-fill-ai-primary-active: #0f2ccf;
643
+ --wds-color-fill-ai-primary-disabled: rgba(19, 23, 32, .3);
644
+ --wds-color-fill-ai-primary-hover: #1c3fe5;
645
+ --wds-color-fill-ai-primary-pressed: #0f2ccf;
646
+ --wds-color-fill-ai-secondary: #d5dfff;
647
+ --wds-color-fill-ai-secondary-active: #0f2ccf;
648
+ --wds-color-fill-ai-secondary-disabled: rgba(19, 23, 32, .1);
649
+ --wds-color-fill-ai-secondary-hover: #1c3fe5;
650
650
  --wds-color-fill-ai-tertiary: #ffffff;
651
- --wds-color-fill-ai-tertiary-active: #d6d1fc;
651
+ --wds-color-fill-ai-tertiary-active: #d5dfff;
652
652
  --wds-color-fill-ai-tertiary-disabled: #ffffff;
653
- --wds-color-fill-ai-tertiary-hover: #f8f6f6;
653
+ --wds-color-fill-ai-tertiary-hover: #eaefff;
654
654
  --wds-color-fill-dark-primary: #151414;
655
655
  --wds-color-fill-dark-primary-active: #525150;
656
656
  --wds-color-fill-dark-primary-disabled: rgba(19, 23, 32, .3);