@wix/design-system-tokens 1.163.0 → 1.165.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/all.css +9 -0
  2. package/all.scss +9 -0
  3. package/all.st.css +18 -0
  4. package/component.st.css +16 -0
  5. package/odeditor/all.css +3 -1
  6. package/odeditor/all.scss +3 -1
  7. package/odeditor/all.st.css +6 -2
  8. package/odeditor/component.st.css +6 -2
  9. package/odeditor-dark/all.css +38 -35
  10. package/odeditor-dark/all.scss +38 -35
  11. package/odeditor-dark/all.st.css +48 -42
  12. package/odeditor-dark/component.st.css +8 -4
  13. package/odeditor-dark/foundation.st.css +22 -20
  14. package/odeditor-dark/semantic.st.css +18 -18
  15. package/package.json +2 -2
  16. package/semantic.st.css +2 -0
  17. package/studio/all.css +9 -0
  18. package/studio/all.scss +9 -0
  19. package/studio/all.st.css +18 -0
  20. package/studio/component.st.css +16 -0
  21. package/studio/semantic.st.css +2 -0
  22. package/wixel/all.css +8 -0
  23. package/wixel/all.scss +8 -0
  24. package/wixel/all.st.css +16 -0
  25. package/wixel/component.st.css +16 -0
package/all.css CHANGED
@@ -329,6 +329,8 @@
329
329
  --wds-button-icon-offset-medium: 12px;
330
330
  --wds-button-icon-offset-large: 12px;
331
331
  --wds-avatar-group-gap-condensed: -3px;
332
+ --wds-angle-input-knob-size: 6px;
333
+ --wds-angle-input-knob-border: 2px;
332
334
  --wds-width-default-2: var(--wds-border-width-100);
333
335
  --wds-width-default: var(--wds-border-width-100);
334
336
  --wds-inner-shadow-y-secondary: var(--wds-shadow-y-0);
@@ -409,6 +411,7 @@
409
411
  --wds-shadow-x-tertiary-toggle-button: var(--wds-shadow-x-0);
410
412
  --wds-shadow-x-secondary-toggle-button: var(--wds-shadow-x-0);
411
413
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-0);
414
+ --wds-shadow-x-primary-modal: var(--wds-shadow-x-0);
412
415
  --wds-shadow-x-input: var(--wds-shadow-x-0);
413
416
  --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-black-100-transparent-20) inset, 0 8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
414
417
  --wds-shadow-inner-400-right: -32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, -8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
@@ -811,6 +814,7 @@
811
814
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-400);
812
815
  --wds-variable-input-padding-vertical-tiny: var(--wds-space-50);
813
816
  --wds-variable-input-padding-vertical-small: var(--wds-space-100);
817
+ --wds-top-banner-fill: var(--wds-color-purple-200);
814
818
  --wds-tooltip-padding-vertical-small: var(--wds-space-100);
815
819
  --wds-tooltip-padding-vertical-medium: var(--wds-space-200);
816
820
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
@@ -1587,6 +1591,7 @@
1587
1591
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1588
1592
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
1589
1593
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1594
+ --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1590
1595
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1591
1596
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1592
1597
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
@@ -2000,6 +2005,10 @@
2000
2005
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2001
2006
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
2002
2007
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
2008
+ --wds-angle-input-ring-border: var(--wds-color-border-dark-secondary);
2009
+ --wds-angle-input-knob-fill: var(--wds-color-fill-standard-tertiary);
2010
+ --wds-angle-input-knob-disabled: var(--wds-color-fill-standard-tertiary);
2011
+ --wds-angle-input-arm-border: var(--wds-color-fill-standard-primary);
2003
2012
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
2004
2013
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
2005
2014
  --wds-add-item-label-color: var(--wds-color-text-primary);
package/all.scss CHANGED
@@ -329,6 +329,8 @@
329
329
  --wds-background-blur-50: 0px;
330
330
  --wds-background-blur-0: 0px;
331
331
  --wds-avatar-group-gap-condensed: -3px;
332
+ --wds-angle-input-knob-size: 6px;
333
+ --wds-angle-input-knob-border: 2px;
332
334
  --wds-width-default-2: var(--wds-border-width-100);
333
335
  --wds-width-default: var(--wds-border-width-100);
334
336
  --wds-vertical-tabs-section-title-padding-top-tiny: var(--wds-space-100);
@@ -375,6 +377,7 @@
375
377
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-400);
376
378
  --wds-variable-input-padding-vertical-tiny: var(--wds-space-50);
377
379
  --wds-variable-input-padding-vertical-small: var(--wds-space-100);
380
+ --wds-top-banner-fill: var(--wds-color-purple-200);
378
381
  --wds-tooltip-padding-vertical-small: var(--wds-space-100);
379
382
  --wds-tooltip-padding-vertical-medium: var(--wds-space-200);
380
383
  --wds-tooltip-padding-horizontal-small: var(--wds-space-200);
@@ -605,6 +608,7 @@
605
608
  --wds-shadow-x-secondary-toggle-button: var(--wds-shadow-x-0);
606
609
  --wds-shadow-x-secondary-raised: var(--wds-shadow-x-0);
607
610
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-0);
611
+ --wds-shadow-x-primary-modal: var(--wds-shadow-x-0);
608
612
  --wds-shadow-x-input: var(--wds-shadow-x-0);
609
613
  --wds-shadow-surface-modal: var(--wds-shadow-x-0) var(--wds-shadow-y-50) var(--wds-shadow-blur-400) var(--wds-color-black-100-transparent-20), 0 var(--wds-shadow-blur-150) var(--wds-shadow-y-150) var(--wds-color-black-100-transparent-10);
610
614
  --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-black-100-transparent-20) inset, 0 8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
@@ -1570,6 +1574,7 @@
1570
1574
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1571
1575
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
1572
1576
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1577
+ --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1573
1578
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1574
1579
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1575
1580
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-body-medium);
@@ -2000,6 +2005,10 @@
2000
2005
  --wds-announcement-modal-title-font-size: var(--wds-font-size-heading-1);
2001
2006
  --wds-announcement-modal-text-font-size: var(--wds-font-size-body-medium);
2002
2007
  --wds-announcement-modal-border-radius: var(--wds-border-radius-surface-modal);
2008
+ --wds-angle-input-ring-border: var(--wds-color-border-dark-secondary);
2009
+ --wds-angle-input-knob-fill: var(--wds-color-fill-standard-tertiary);
2010
+ --wds-angle-input-knob-disabled: var(--wds-color-fill-standard-tertiary);
2011
+ --wds-angle-input-arm-border: var(--wds-color-fill-standard-primary);
2003
2012
  --wds-add-item-title-font-size-small: var(--wds-font-size-body-small);
2004
2013
  --wds-add-item-title-font-size-medium: var(--wds-font-size-body-medium);
2005
2014
  --wds-add-item-label-color: var(--wds-color-text-primary);
package/all.st.css CHANGED
@@ -35,6 +35,12 @@
35
35
  @property st-global(--wds-add-item-title-font-line-height-tiny);
36
36
  @property st-global(--wds-add-item-title-font-size-medium);
37
37
  @property st-global(--wds-add-item-title-font-size-small);
38
+ @property st-global(--wds-angle-input-arm-border);
39
+ @property st-global(--wds-angle-input-knob-border);
40
+ @property st-global(--wds-angle-input-knob-disabled);
41
+ @property st-global(--wds-angle-input-knob-fill);
42
+ @property st-global(--wds-angle-input-knob-size);
43
+ @property st-global(--wds-angle-input-ring-border);
38
44
  @property st-global(--wds-announcement-modal-actions-padding);
39
45
  @property st-global(--wds-announcement-modal-border-radius);
40
46
  @property st-global(--wds-announcement-modal-content-gap);
@@ -1550,6 +1556,7 @@
1550
1556
  @property st-global(--wds-shadow-x-25);
1551
1557
  @property st-global(--wds-shadow-x-50);
1552
1558
  @property st-global(--wds-shadow-x-input);
1559
+ @property st-global(--wds-shadow-x-primary-modal);
1553
1560
  @property st-global(--wds-shadow-x-primary-toggle-button);
1554
1561
  @property st-global(--wds-shadow-x-secondary-raised);
1555
1562
  @property st-global(--wds-shadow-x-secondary-toggle-button);
@@ -1611,6 +1618,7 @@
1611
1618
  @property st-global(--wds-sidebar-divider-fill-light-default);
1612
1619
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
1613
1620
  @property st-global(--wds-sidebar-header-margin-bottom);
1621
+ @property st-global(--wds-sidebar-header-text-dark-default);
1614
1622
  @property st-global(--wds-sidebar-item-content-gap);
1615
1623
  @property st-global(--wds-sidebar-item-level-1-fill-dark-active);
1616
1624
  @property st-global(--wds-sidebar-item-level-1-fill-dark-default);
@@ -1989,6 +1997,7 @@
1989
1997
  @property st-global(--wds-tooltip-padding-vertical-medium);
1990
1998
  @property st-global(--wds-tooltip-padding-vertical-small);
1991
1999
  @property st-global(--wds-tooltip-text-fill);
2000
+ @property st-global(--wds-top-banner-fill);
1992
2001
  @property st-global(--wds-variable-input-padding-vertical-small);
1993
2002
  @property st-global(--wds-variable-input-padding-vertical-tiny);
1994
2003
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
@@ -2109,6 +2118,12 @@
2109
2118
  --wds-add-item-title-font-line-height-tiny: 18px;
2110
2119
  --wds-add-item-title-font-size-medium: 16px;
2111
2120
  --wds-add-item-title-font-size-small: 14px;
2121
+ --wds-angle-input-arm-border: #116dff;
2122
+ --wds-angle-input-knob-border: 2px;
2123
+ --wds-angle-input-knob-disabled: #ffffff;
2124
+ --wds-angle-input-knob-fill: #ffffff;
2125
+ --wds-angle-input-knob-size: 6px;
2126
+ --wds-angle-input-ring-border: #dfe5eb;
2112
2127
  --wds-announcement-modal-actions-padding: 42px;
2113
2128
  --wds-announcement-modal-border-radius: 8px;
2114
2129
  --wds-announcement-modal-content-gap: 12px;
@@ -3624,6 +3639,7 @@
3624
3639
  --wds-shadow-x-25: 2px;
3625
3640
  --wds-shadow-x-50: 3px;
3626
3641
  --wds-shadow-x-input: 0px;
3642
+ --wds-shadow-x-primary-modal: 0px;
3627
3643
  --wds-shadow-x-primary-toggle-button: 0px;
3628
3644
  --wds-shadow-x-secondary-raised: 0px;
3629
3645
  --wds-shadow-x-secondary-toggle-button: 0px;
@@ -3685,6 +3701,7 @@
3685
3701
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
3686
3702
  --wds-sidebar-divider-fill-neutral-default: #cfd1dc;
3687
3703
  --wds-sidebar-header-margin-bottom: 12px;
3704
+ --wds-sidebar-header-text-dark-default: #ffffff;
3688
3705
  --wds-sidebar-item-content-gap: 6px;
3689
3706
  --wds-sidebar-item-level-1-fill-dark-active: #42454C;
3690
3707
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
@@ -4063,6 +4080,7 @@
4063
4080
  --wds-tooltip-padding-vertical-medium: 12px;
4064
4081
  --wds-tooltip-padding-vertical-small: 6px;
4065
4082
  --wds-tooltip-text-fill: #ffffff;
4083
+ --wds-top-banner-fill: #c161f0;
4066
4084
  --wds-variable-input-padding-vertical-small: 6px;
4067
4085
  --wds-variable-input-padding-vertical-tiny: 3px;
4068
4086
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
package/component.st.css CHANGED
@@ -35,6 +35,12 @@
35
35
  @property st-global(--wds-add-item-title-font-line-height-tiny);
36
36
  @property st-global(--wds-add-item-title-font-size-medium);
37
37
  @property st-global(--wds-add-item-title-font-size-small);
38
+ @property st-global(--wds-angle-input-arm-border);
39
+ @property st-global(--wds-angle-input-knob-border);
40
+ @property st-global(--wds-angle-input-knob-disabled);
41
+ @property st-global(--wds-angle-input-knob-fill);
42
+ @property st-global(--wds-angle-input-knob-size);
43
+ @property st-global(--wds-angle-input-ring-border);
38
44
  @property st-global(--wds-announcement-modal-actions-padding);
39
45
  @property st-global(--wds-announcement-modal-border-radius);
40
46
  @property st-global(--wds-announcement-modal-content-gap);
@@ -939,6 +945,7 @@
939
945
  @property st-global(--wds-sidebar-divider-fill-light-default);
940
946
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
941
947
  @property st-global(--wds-sidebar-header-margin-bottom);
948
+ @property st-global(--wds-sidebar-header-text-dark-default);
942
949
  @property st-global(--wds-sidebar-item-content-gap);
943
950
  @property st-global(--wds-sidebar-item-level-1-fill-dark-active);
944
951
  @property st-global(--wds-sidebar-item-level-1-fill-dark-default);
@@ -1273,6 +1280,7 @@
1273
1280
  @property st-global(--wds-tooltip-padding-vertical-medium);
1274
1281
  @property st-global(--wds-tooltip-padding-vertical-small);
1275
1282
  @property st-global(--wds-tooltip-text-fill);
1283
+ @property st-global(--wds-top-banner-fill);
1276
1284
  @property st-global(--wds-variable-input-padding-vertical-small);
1277
1285
  @property st-global(--wds-variable-input-padding-vertical-tiny);
1278
1286
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
@@ -1391,6 +1399,12 @@
1391
1399
  --wds-add-item-title-font-line-height-tiny: 18px;
1392
1400
  --wds-add-item-title-font-size-medium: 16px;
1393
1401
  --wds-add-item-title-font-size-small: 14px;
1402
+ --wds-angle-input-arm-border: #116dff;
1403
+ --wds-angle-input-knob-border: 2px;
1404
+ --wds-angle-input-knob-disabled: #ffffff;
1405
+ --wds-angle-input-knob-fill: #ffffff;
1406
+ --wds-angle-input-knob-size: 6px;
1407
+ --wds-angle-input-ring-border: #dfe5eb;
1394
1408
  --wds-announcement-modal-actions-padding: 42px;
1395
1409
  --wds-announcement-modal-border-radius: 8px;
1396
1410
  --wds-announcement-modal-content-gap: 12px;
@@ -2295,6 +2309,7 @@
2295
2309
  --wds-sidebar-divider-fill-light-default: #cfd1dc;
2296
2310
  --wds-sidebar-divider-fill-neutral-default: #cfd1dc;
2297
2311
  --wds-sidebar-header-margin-bottom: 12px;
2312
+ --wds-sidebar-header-text-dark-default: #ffffff;
2298
2313
  --wds-sidebar-item-content-gap: 6px;
2299
2314
  --wds-sidebar-item-level-1-fill-dark-active: #42454C;
2300
2315
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
@@ -2629,6 +2644,7 @@
2629
2644
  --wds-tooltip-padding-vertical-medium: 12px;
2630
2645
  --wds-tooltip-padding-vertical-small: 6px;
2631
2646
  --wds-tooltip-text-fill: #ffffff;
2647
+ --wds-top-banner-fill: #c161f0;
2632
2648
  --wds-variable-input-padding-vertical-small: 6px;
2633
2649
  --wds-variable-input-padding-vertical-tiny: 3px;
2634
2650
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
package/odeditor/all.css CHANGED
@@ -806,6 +806,7 @@
806
806
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-300);
807
807
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-300);
808
808
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
809
+ --wds-top-banner-fill: var(--wds-color-purple-200);
809
810
  --wds-tooltip-shadow: var(--wds-color-black-100-transparent-0);
810
811
  --wds-tooltip-padding-vertical-small: var(--wds-space-150);
811
812
  --wds-tooltip-padding-vertical-medium: var(--wds-space-150);
@@ -1606,7 +1607,7 @@
1606
1607
  --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1607
1608
  --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
1608
1609
  --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-standard-primary);
1609
- --wds-toggle-button-label-fill-inverted: var(--wds-color-text-standard-primary);
1610
+ --wds-toggle-button-label-fill-inverted-default: var(--wds-color-text-standard-primary);
1610
1611
  --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary);
1611
1612
  --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary);
1612
1613
  --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-primary);
@@ -1650,6 +1651,7 @@
1650
1651
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1651
1652
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
1652
1653
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1654
+ --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1653
1655
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1654
1656
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1655
1657
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
package/odeditor/all.scss CHANGED
@@ -387,6 +387,7 @@
387
387
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-300);
388
388
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-300);
389
389
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
390
+ --wds-top-banner-fill: var(--wds-color-purple-200);
390
391
  --wds-tooltip-shadow: var(--wds-color-black-100-transparent-0);
391
392
  --wds-tooltip-padding-vertical-small: var(--wds-space-150);
392
393
  --wds-tooltip-padding-vertical-medium: var(--wds-space-150);
@@ -1588,7 +1589,7 @@
1588
1589
  --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1589
1590
  --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
1590
1591
  --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-standard-primary);
1591
- --wds-toggle-button-label-fill-inverted: var(--wds-color-text-standard-primary);
1592
+ --wds-toggle-button-label-fill-inverted-default: var(--wds-color-text-standard-primary);
1592
1593
  --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary);
1593
1594
  --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary);
1594
1595
  --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-primary);
@@ -1632,6 +1633,7 @@
1632
1633
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1633
1634
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
1634
1635
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1636
+ --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary-light);
1635
1637
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1636
1638
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1637
1639
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);
package/odeditor/all.st.css CHANGED
@@ -1564,6 +1564,7 @@
1564
1564
  @property st-global(--wds-sidebar-divider-fill-light-default);
1565
1565
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
1566
1566
  @property st-global(--wds-sidebar-header-margin-bottom);
1567
+ @property st-global(--wds-sidebar-header-text-dark-default);
1567
1568
  @property st-global(--wds-sidebar-item-content-gap);
1568
1569
  @property st-global(--wds-sidebar-item-level-1-fill-dark-active);
1569
1570
  @property st-global(--wds-sidebar-item-level-1-fill-dark-default);
@@ -1848,7 +1849,7 @@
1848
1849
  @property st-global(--wds-toggle-button-label-fill-dark-selected);
1849
1850
  @property st-global(--wds-toggle-button-label-fill-dark-selected-disabled);
1850
1851
  @property st-global(--wds-toggle-button-label-fill-dark-selected-hover);
1851
- @property st-global(--wds-toggle-button-label-fill-inverted);
1852
+ @property st-global(--wds-toggle-button-label-fill-inverted-default);
1852
1853
  @property st-global(--wds-toggle-button-label-fill-inverted-disabled);
1853
1854
  @property st-global(--wds-toggle-button-label-fill-inverted-hover);
1854
1855
  @property st-global(--wds-toggle-button-label-fill-inverted-selected);
@@ -1953,6 +1954,7 @@
1953
1954
  @property st-global(--wds-tooltip-padding-vertical-small);
1954
1955
  @property st-global(--wds-tooltip-shadow);
1955
1956
  @property st-global(--wds-tooltip-text-fill);
1957
+ @property st-global(--wds-top-banner-fill);
1956
1958
  @property st-global(--wds-variable-input-padding-vertical-small);
1957
1959
  @property st-global(--wds-variable-input-padding-vertical-tiny);
1958
1960
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
@@ -3591,6 +3593,7 @@
3591
3593
  --wds-sidebar-divider-fill-light-default: #dedede;
3592
3594
  --wds-sidebar-divider-fill-neutral-default: #dedede;
3593
3595
  --wds-sidebar-header-margin-bottom: 12px;
3596
+ --wds-sidebar-header-text-dark-default: #ffffff;
3594
3597
  --wds-sidebar-item-content-gap: 8px;
3595
3598
  --wds-sidebar-item-level-1-fill-dark-active: #42454c;
3596
3599
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
@@ -3875,7 +3878,7 @@
3875
3878
  --wds-toggle-button-label-fill-dark-selected: #151414;
3876
3879
  --wds-toggle-button-label-fill-dark-selected-disabled: #a8a6a5;
3877
3880
  --wds-toggle-button-label-fill-dark-selected-hover: #151414;
3878
- --wds-toggle-button-label-fill-inverted: #151414;
3881
+ --wds-toggle-button-label-fill-inverted-default: #151414;
3879
3882
  --wds-toggle-button-label-fill-inverted-disabled: #a8a6a5;
3880
3883
  --wds-toggle-button-label-fill-inverted-hover: #151414;
3881
3884
  --wds-toggle-button-label-fill-inverted-selected: #151414;
@@ -3980,6 +3983,7 @@
3980
3983
  --wds-tooltip-padding-vertical-small: 6px;
3981
3984
  --wds-tooltip-shadow: rgba(19, 23, 32, 0);
3982
3985
  --wds-tooltip-text-fill: #ffffff;
3986
+ --wds-top-banner-fill: #8b2df5;
3983
3987
  --wds-variable-input-padding-vertical-small: 5px;
3984
3988
  --wds-variable-input-padding-vertical-tiny: 2px;
3985
3989
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
package/odeditor/component.st.css CHANGED
@@ -895,6 +895,7 @@
895
895
  @property st-global(--wds-sidebar-divider-fill-light-default);
896
896
  @property st-global(--wds-sidebar-divider-fill-neutral-default);
897
897
  @property st-global(--wds-sidebar-header-margin-bottom);
898
+ @property st-global(--wds-sidebar-header-text-dark-default);
898
899
  @property st-global(--wds-sidebar-item-content-gap);
899
900
  @property st-global(--wds-sidebar-item-level-1-fill-dark-active);
900
901
  @property st-global(--wds-sidebar-item-level-1-fill-dark-default);
@@ -1134,7 +1135,7 @@
1134
1135
  @property st-global(--wds-toggle-button-label-fill-dark-selected);
1135
1136
  @property st-global(--wds-toggle-button-label-fill-dark-selected-disabled);
1136
1137
  @property st-global(--wds-toggle-button-label-fill-dark-selected-hover);
1137
- @property st-global(--wds-toggle-button-label-fill-inverted);
1138
+ @property st-global(--wds-toggle-button-label-fill-inverted-default);
1138
1139
  @property st-global(--wds-toggle-button-label-fill-inverted-disabled);
1139
1140
  @property st-global(--wds-toggle-button-label-fill-inverted-hover);
1140
1141
  @property st-global(--wds-toggle-button-label-fill-inverted-selected);
@@ -1239,6 +1240,7 @@
1239
1240
  @property st-global(--wds-tooltip-padding-vertical-small);
1240
1241
  @property st-global(--wds-tooltip-shadow);
1241
1242
  @property st-global(--wds-tooltip-text-fill);
1243
+ @property st-global(--wds-top-banner-fill);
1242
1244
  @property st-global(--wds-variable-input-padding-vertical-small);
1243
1245
  @property st-global(--wds-variable-input-padding-vertical-tiny);
1244
1246
  @property st-global(--wds-vertical-tabs-action-padding-horizontal-medium);
@@ -2206,6 +2208,7 @@
2206
2208
  --wds-sidebar-divider-fill-light-default: #dedede;
2207
2209
  --wds-sidebar-divider-fill-neutral-default: #dedede;
2208
2210
  --wds-sidebar-header-margin-bottom: 12px;
2211
+ --wds-sidebar-header-text-dark-default: #ffffff;
2209
2212
  --wds-sidebar-item-content-gap: 8px;
2210
2213
  --wds-sidebar-item-level-1-fill-dark-active: #42454c;
2211
2214
  --wds-sidebar-item-level-1-fill-dark-default: #131720;
@@ -2445,7 +2448,7 @@
2445
2448
  --wds-toggle-button-label-fill-dark-selected: #151414;
2446
2449
  --wds-toggle-button-label-fill-dark-selected-disabled: #a8a6a5;
2447
2450
  --wds-toggle-button-label-fill-dark-selected-hover: #151414;
2448
- --wds-toggle-button-label-fill-inverted: #151414;
2451
+ --wds-toggle-button-label-fill-inverted-default: #151414;
2449
2452
  --wds-toggle-button-label-fill-inverted-disabled: #a8a6a5;
2450
2453
  --wds-toggle-button-label-fill-inverted-hover: #151414;
2451
2454
  --wds-toggle-button-label-fill-inverted-selected: #151414;
@@ -2550,6 +2553,7 @@
2550
2553
  --wds-tooltip-padding-vertical-small: 6px;
2551
2554
  --wds-tooltip-shadow: rgba(19, 23, 32, 0);
2552
2555
  --wds-tooltip-text-fill: #ffffff;
2556
+ --wds-top-banner-fill: #8b2df5;
2553
2557
  --wds-variable-input-padding-vertical-small: 5px;
2554
2558
  --wds-variable-input-padding-vertical-tiny: 2px;
2555
2559
  --wds-vertical-tabs-action-padding-horizontal-medium: 24px;
package/odeditor-dark/all.css CHANGED
@@ -32,12 +32,6 @@
32
32
  --wds-space-0: 0px;
33
33
  --wds-shadow-spread-secondary-raised: -0.70;
34
34
  --wds-shadow-focus-spread: 0;
35
- --wds-shadow-fill-secondary-raised: #0006241F;
36
- --wds-shadow-fill-secondary-overlay: #00000061;
37
- --wds-shadow-fill-primary-raised: #0006244D;
38
- --wds-shadow-fill-primary-overlay-dark: #00000052;
39
- --wds-shadow-fill-primary-overlay: #00000052;
40
- --wds-shadow-fill-primary-modal: #00000040;
41
35
  --wds-shadow-y-tertiary-toggle-button: 0.4px;
42
36
  --wds-shadow-y-secondary-toggle-button: 1.2px;
43
37
  --wds-shadow-y-secondary-overlay: 12;
@@ -57,6 +51,8 @@
57
51
  --wds-shadow-x-50: 2px;
58
52
  --wds-shadow-x-25: 1px;
59
53
  --wds-shadow-x-0: 0px;
54
+ --wds-shadow-inner-300-vertical: 0;
55
+ --wds-shadow-inner-300-top: 0 0 0;
60
56
  --wds-shadow-blur-tertiary-toggle-button: 0.6px;
61
57
  --wds-shadow-blur-secondary-toggle-button: 1.7px;
62
58
  --wds-shadow-blur-800: 30px;
@@ -219,6 +215,7 @@
219
215
  --wds-color-blue-600: #111214;
220
216
  --wds-color-blue-500: #212328;
221
217
  --wds-color-blue-400: #343F53;
218
+ --wds-color-blue-350: #40506C;
222
219
  --wds-color-blue-300: #485B7E;
223
220
  --wds-color-blue-250: #5B78A9;
224
221
  --wds-color-blue-200: #6F94D4;
@@ -373,10 +370,10 @@
373
370
  --wds-inner-shadow-x-secondary: var(--wds-shadow-x-25);
374
371
  --wds-inner-shadow-x-primary: var(--wds-shadow-x-25);
375
372
  --wds-inner-shadow-x-input: var(--wds-shadow-x-25);
376
- --wds-inner-shadow-fill-track: var(--wds-color-black-100-transparent-20);
377
- --wds-inner-shadow-fill-secondary: var(--wds-color-white);
378
- --wds-inner-shadow-fill-primary: var(--wds-color-white);
379
- --wds-inner-shadow-fill-input: var(--wds-color-white-transparent-50);
373
+ --wds-inner-shadow-fill-track: var(--wds-color-white-transparent-20);
374
+ --wds-inner-shadow-fill-secondary: var(--wds-color-blue-600);
375
+ --wds-inner-shadow-fill-primary: var(--wds-color-blue-600);
376
+ --wds-inner-shadow-fill-input: var(--wds-color-blue-600);
380
377
  --wds-inner-shadow-blur-secondary: var(--wds-shadow-blur-25);
381
378
  --wds-inner-shadow-blur-primary: var(--wds-shadow-blur-25);
382
379
  --wds-inner-shadow-blur-input: var(--wds-shadow-blur-35);
@@ -403,24 +400,30 @@
403
400
  --wds-space-padding-horizontal-medium: var(--wds-space-300);
404
401
  --wds-space-padding-horizontal-large: var(--wds-space-400);
405
402
  --wds-space-mobile-viewport-spacing: var(--wds-space-800);
406
- --wds-shadow-surface-modal: var(--wds-shadow-x-50) var(--wds-shadow-y-600) var(--wds-shadow-blur-800) var(--wds-color-black-100-transparent-10), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) var(--wds-color-black-100-transparent-0);
403
+ --wds-shadow-surface-modal: var(--wds-shadow-x-50) var(--wds-shadow-y-600) var(--wds-shadow-blur-800) var(--wds-color-white-transparent-30), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) var(--wds-color-white-transparent-30);
407
404
  --wds-shadow-focus-warning: 0 0 0 var(--wds-color-yellow-400);
408
405
  --wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
409
406
  --wds-shadow-focus-inner-warning: 0 0 0 3px var(--wds-color-yellow-400) inset;
410
407
  --wds-shadow-focus-inner-standard: 0 0 0 3px var(--wds-color-blue-300) inset;
411
408
  --wds-shadow-focus-inner-destructive: 0 0 0 3px var(--wds-color-red-400) inset;
412
409
  --wds-shadow-focus-destructive: 0 0 0 var(--wds-color-red-400);
413
- --wds-shadow-fill-tertiary-toggle-button: var(--wds-color-white);
410
+ --wds-shadow-fill-tertiary-toggle-button: var(--wds-color-blue-500);
414
411
  --wds-shadow-fill-tertiary-raised: var(--wds-color-black-100-transparent-0);
415
- --wds-shadow-fill-secondary-toggle-button: var(--wds-color-white);
412
+ --wds-shadow-fill-secondary-toggle-button: var(--wds-color-blue-600);
416
413
  --wds-shadow-fill-secondary-toggle: var(--wds-color-black-100-transparent-0);
417
- --wds-shadow-fill-secondary-overlay-dark: var(--wds-color-black-100-transparent-0);
414
+ --wds-shadow-fill-secondary-raised: var(--wds-color-white-transparent-10);
415
+ --wds-shadow-fill-secondary-overlay-dark: var(--wds-color-white-transparent-20);
416
+ --wds-shadow-fill-secondary-overlay: var(--wds-color-white-transparent-30);
418
417
  --wds-shadow-fill-secondary-modal: var(--wds-color-black-100-transparent-0);
419
418
  --wds-shadow-fill-quaternary-raised: var(--wds-color-black-100-transparent-0);
420
419
  --wds-shadow-fill-primary-toggle-button: var(--wds-color-black-100-transparent-0);
421
420
  --wds-shadow-fill-primary-toggle: var(--wds-color-black-100-transparent-0);
422
421
  --wds-shadow-fill-primary-slider: var(--wds-color-black-100-transparent-0);
423
- --wds-shadow-fill-input: var(--wds-color-black-300-transparent-20);
422
+ --wds-shadow-fill-primary-raised: var(--wds-color-white-transparent-30);
423
+ --wds-shadow-fill-primary-overlay-dark: var(--wds-color-white-transparent-30);
424
+ --wds-shadow-fill-primary-overlay: var(--wds-color-white-transparent-30);
425
+ --wds-shadow-fill-primary-modal: var(--wds-color-white-transparent-30);
426
+ --wds-shadow-fill-input: var(--wds-color-white-transparent-20);
424
427
  --wds-shadow-y-secondary-toggle: var(--wds-shadow-y-0);
425
428
  --wds-shadow-y-secondary-raised: var(--wds-shadow-y-50);
426
429
  --wds-shadow-y-secondary-overlay-dark: var(--wds-shadow-y-0);
@@ -435,18 +438,18 @@
435
438
  --wds-shadow-x-primary-toggle-button: var(--wds-shadow-x-25);
436
439
  --wds-shadow-x-primary-modal: var(--wds-shadow-x-0);
437
440
  --wds-shadow-x-input: var(--wds-shadow-x-25);
438
- --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-black-100-transparent-20) inset, 0 8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
439
- --wds-shadow-inner-400-right: -32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, -8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
440
- --wds-shadow-inner-400-left: 32px 0 24px -24px var(--wds-color-black-100-transparent-20) inset, 8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
441
- --wds-shadow-inner-400-bottom: 0 -32px 24px -24px var(--wds-color-black-100-transparent-20) inset, 0 -8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
442
- --wds-shadow-inner-300-top: 0 22px 18px -18px var(--wds-color-black-100-transparent-10) inset, 0 -8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
443
- --wds-shadow-inner-300-right: -22px 0 18px -18px var(--wds-color-black-100-transparent-10) inset, -8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
444
- --wds-shadow-inner-300-left: 22px 0 18px -18px var(--wds-color-black-100-transparent-10) inset, 8px 0 6px -6px var(--wds-color-black-100-transparent-5) inset;
445
- --wds-shadow-inner-300-bottom: 0 -22px 18px -18px var(--wds-color-black-100-transparent-10) inset, 0 -8px 6px -6px var(--wds-color-black-100-transparent-5) inset;
446
- --wds-shadow-inner-400: 0 0 24px var(--wds-color-black-100-transparent-20) inset, 0 0 6px var(--wds-color-black-100-transparent-5) inset;
447
- --wds-shadow-inner-300: 0 0 18px var(--wds-color-black-100-transparent-10) inset, 0 0 6px var(--wds-color-black-100-transparent-5) inset;
448
- --wds-shadow-inner-200: 1px 1px 4px var(--wds-color-black-100-transparent-20) inset;
449
- --wds-shadow-inner-100: 1px 1px 2px var(--wds-color-black-100-transparent-10) inset, 1px 1px 2px var(--wds-color-white-transparent-10);
441
+ --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
442
+ --wds-shadow-inner-400-top: 0 32px 24px -24px var(--wds-color-white-transparent-20) inset, 0 8px 6px -6px var(--wds-color-white-transparent-5) inset;
443
+ --wds-shadow-inner-400-right: -32px 0 24px -24px var(--wds-color-white-transparent-20) inset, -8px 0 6px -6px var(--wds-color-white-transparent-5) inset;
444
+ --wds-shadow-inner-400-left: 32px 0 24px -24px var(--wds-color-white-transparent-20) inset, 8px 0 6px -6px var(--wds-color-white-transparent-5) inset;
445
+ --wds-shadow-inner-400-bottom: 0 -32px 24px -24px var(--wds-color-white-transparent-20) inset, 0 -8px 6px -6px var(--wds-color-white-transparent-5) inset;
446
+ --wds-shadow-inner-300-right: -22px 0 18px -18px var(--wds-color-white-transparent-10) inset, -8px 0 6px -6px var(--wds-color-white-transparent-5) inset;
447
+ --wds-shadow-inner-300-left: 22px 0 18px -18px var(--wds-color-white-transparent-10) inset, 8px 0 6px -6px var(--wds-color-white-transparent-5) inset;
448
+ --wds-shadow-inner-300-bottom: 0 -22px 18px -18px var(--wds-color-white-transparent-10) inset, 0 -8px 6px -6px var(--wds-color-white-transparent-5) inset;
449
+ --wds-shadow-inner-400: 0 0 24px var(--wds-color-white-transparent-20) inset, 0 0 6px var(--wds-color-white-transparent-5) inset;
450
+ --wds-shadow-inner-300: 0 0 18px var(--wds-color-white-transparent-10) inset, 0 0 6px var(--wds-color-white-transparent-5) inset;
451
+ --wds-shadow-inner-200: 1px 1px 4px var(--wds-color-white-transparent-20) inset;
452
+ --wds-shadow-inner-100: 1px 1px 2px var(--wds-color-white-transparent-10) inset, 1px 1px 2px var(--wds-color-white-transparent-10);
450
453
  --wds-shadow-blur-secondary-toggle: var(--wds-shadow-blur-0);
451
454
  --wds-shadow-blur-secondary-raised: var(--wds-shadow-blur-50);
452
455
  --wds-shadow-blur-secondary-overlay-dark: var(--wds-shadow-blur-0);
@@ -459,10 +462,10 @@
459
462
  --wds-shadow-blur-primary-overlay: var(--wds-shadow-blur-125);
460
463
  --wds-shadow-blur-primary-modal: var(--wds-shadow-blur-500);
461
464
  --wds-shadow-blur-input: var(--wds-shadow-blur-35);
462
- --wds-shadow-400: 0 8px 8px var(--wds-color-black-100-transparent-10), 0 3px 24px var(--wds-color-black-100-transparent-20);
463
- --wds-shadow-300: 0 var(--wds-shadow-y-300) var(--wds-shadow-blur-800) 0 var(--wds-color-black-100-transparent-10), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) 0 var(--wds-color-black-100-transparent-0);
464
- --wds-shadow-200: 0 2px 4px var(--wds-color-black-100-transparent-5), 0 0 6px var(--wds-color-black-100-transparent-10);
465
- --wds-shadow-100: 0 2px 1px var(--wds-color-black-100-transparent-50), 0 0 3px var(--wds-color-black-100-transparent-10);
465
+ --wds-shadow-400: 0 8px 8px var(--wds-color-white-transparent-10), 0 3px 24px var(--wds-color-white-transparent-20);
466
+ --wds-shadow-300: 0 var(--wds-shadow-y-300) var(--wds-shadow-blur-800) 0 var(--wds-color-white-transparent-30), 0 var(--wds-shadow-blur-0) var(--wds-shadow-y-0) 0 var(--wds-color-white-transparent-30);
467
+ --wds-shadow-200: 0 2px 4px var(--wds-color-white-transparent-5), 0 0 6px var(--wds-color-white-transparent-10);
468
+ --wds-shadow-100: 0 2px 1px var(--wds-color-white-transparent-50), 0 0 3px var(--wds-color-white-transparent-10);
466
469
  --wds-font-weight-body-bold: var(--wds-font-weight-semi-bold);
467
470
  --wds-font-weight-heading-6: var(--wds-font-weight-regular);
468
471
  --wds-font-weight-heading-5: var(--wds-font-weight-bold);
@@ -808,6 +811,7 @@
808
811
  --wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-300);
809
812
  --wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-300);
810
813
  --wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
814
+ --wds-top-banner-fill: var(--wds-color-purple-400);
811
815
  --wds-tooltip-shadow: var(--wds-color-black-100-transparent-0);
812
816
  --wds-tooltip-padding-vertical-small: var(--wds-space-150);
813
817
  --wds-tooltip-padding-vertical-medium: var(--wds-space-150);
@@ -983,7 +987,6 @@
983
987
  --wds-sidebar-minimize-action-fill-light-default: var(--wds-color-blue-400);
984
988
  --wds-sidebar-item-text-neutral-active: var(--wds-color-blue-0);
985
989
  --wds-sidebar-item-text-light-active: var(--wds-color-blue-0);
986
- --wds-sidebar-item-text-dark-default: var(--wds-color-black-550);
987
990
  --wds-sidebar-item-text-dark-active: var(--wds-color-white);
988
991
  --wds-sidebar-item-prefix-padding-end: var(--wds-space-300);
989
992
  --wds-sidebar-item-minimized-paddings-vertical: var(--wds-space-200);
@@ -1521,9 +1524,7 @@
1521
1524
  --wds-shadow-surface-raised: var(--wds-shadow-200);
1522
1525
  --wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
1523
1526
  --wds-shadow-surface-overlay: var(--wds-shadow-300);
1524
- --wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1525
1527
  --wds-shadow-inner-400-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1526
- --wds-shadow-inner-300-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
1527
1528
  --wds-shadow-inner-300-horizontal: var(--wds-shadow-inner-300-left), var(--wds-shadow-inner-300-right);
1528
1529
  --wds-font-line-height-heading-6: var(--wds-font-line-height-100);
1529
1530
  --wds-font-line-height-heading-5: var(--wds-font-line-height-100);
@@ -1608,7 +1609,7 @@
1608
1609
  --wds-toggle-button-label-fill-inverted-selected-hover: var(--wds-color-text-standard-primary);
1609
1610
  --wds-toggle-button-label-fill-inverted-selected: var(--wds-color-text-standard-primary);
1610
1611
  --wds-toggle-button-label-fill-inverted-hover: var(--wds-color-text-standard-primary);
1611
- --wds-toggle-button-label-fill-inverted: var(--wds-color-text-standard-primary);
1612
+ --wds-toggle-button-label-fill-inverted-default: var(--wds-color-text-standard-primary);
1612
1613
  --wds-toggle-button-label-fill-dark-selected-hover: var(--wds-color-text-standard-primary);
1613
1614
  --wds-toggle-button-label-fill-dark-selected: var(--wds-color-text-standard-primary);
1614
1615
  --wds-toggle-button-label-fill-dark-hover: var(--wds-color-text-standard-primary);
@@ -1652,6 +1653,8 @@
1652
1653
  --wds-sidebar-item-text-neutral-default: var(--wds-color-text-standard-secondary);
1653
1654
  --wds-sidebar-item-text-light-disabled: var(--wds-color-text-disabled);
1654
1655
  --wds-sidebar-item-text-light-default: var(--wds-color-text-standard-secondary);
1656
+ --wds-sidebar-item-text-dark-default: var(--wds-color-text-standard-primary);
1657
+ --wds-sidebar-header-text-dark-default: var(--wds-color-text-standard-primary);
1655
1658
  --wds-side-panel-title-font-size: var(--wds-font-size-heading-3);
1656
1659
  --wds-side-panel-footer-fill: var(--wds-color-fill-surface-modal);
1657
1660
  --wds-side-panel-floating-title-font-size: var(--wds-font-size-heading-3);