@breadstone/mosaik-themes 0.0.231 → 0.0.232

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.
package/themes/joy.scss CHANGED
@@ -362,6 +362,12 @@ $typography-body2-font-weight: 400;
362
362
  $typography-body2-letter-spacing: 0.2857142857142857px;
363
363
  $typography-body2-text-decoration: none;
364
364
  $typography-body2-text-transform: none;
365
+ $typography-supporting-font-size: 12px;
366
+ $typography-supporting-line-height: 14px;
367
+ $typography-supporting-font-weight: 400;
368
+ $typography-supporting-letter-spacing: 0.2857142857142857px;
369
+ $typography-supporting-text-decoration: none;
370
+ $typography-supporting-text-transform: none;
365
371
  $typography-caption-font-size: 12px;
366
372
  $typography-caption-line-height: 16px;
367
373
  $typography-caption-font-weight: 400;
@@ -533,6 +539,7 @@ $typography-key-subtitle1: "subtitle1";
533
539
  $typography-key-subtitle2: "subtitle2";
534
540
  $typography-key-body1: "body1";
535
541
  $typography-key-body2: "body2";
542
+ $typography-key-supporting: "supporting";
536
543
  $typography-key-caption: "caption";
537
544
  $typography-key-button: "button";
538
545
  $typography-key-overline: "overline";
@@ -569,6 +576,7 @@ $typography-subtitle1-font-family: $font-family;
569
576
  $typography-subtitle2-font-family: $font-family;
570
577
  $typography-body1-font-family: $font-family;
571
578
  $typography-body2-font-family: $font-family;
579
+ $typography-supporting-font-family: $font-family;
572
580
  $typography-caption-font-family: $font-family;
573
581
  $typography-button-font-family: $font-family;
574
582
  $typography-overline-font-family: $font-family;
@@ -1383,6 +1391,15 @@ $_scheme-dark: (
1383
1391
  text-decoration: $typography-body1-text-decoration,
1384
1392
  text-transform: $typography-body1-text-transform
1385
1393
  ),
1394
+ 'typography-supporting': (
1395
+ font-family: $typography-supporting-font-family,
1396
+ font-size: $typography-supporting-font-size,
1397
+ line-height: $typography-supporting-line-height,
1398
+ font-weight: $typography-supporting-font-weight,
1399
+ letter-spacing: $typography-supporting-letter-spacing,
1400
+ text-decoration: $typography-supporting-text-decoration,
1401
+ text-transform: $typography-supporting-text-transform
1402
+ ),
1386
1403
  'typography-body2': (
1387
1404
  font-family: $typography-body2-font-family,
1388
1405
  font-size: $typography-body2-font-size,
@@ -1590,6 +1607,154 @@ $accordion-props: (
1590
1607
  'transition-property': unset,
1591
1608
  'translate': none
1592
1609
  );
1610
+ /**
1611
+ * ------------------------------------------------------------------------------
1612
+ * <auto-generated>
1613
+ * This code was generated by a tool.
1614
+ * Changes to this file may cause incorrect behavior and will be lost if
1615
+ * the code is regenerated.
1616
+ * </auto-generated>
1617
+ * ------------------------------------------------------------------------------
1618
+ */
1619
+ $actionbar-group-props: (
1620
+ 'font-family': unset,
1621
+ 'font-letter-spacing': unset,
1622
+ 'font-line-height': unset,
1623
+ 'font-size': unset,
1624
+ 'font-text-decoration': unset,
1625
+ 'font-text-transform': unset,
1626
+ 'font-weight': unset,
1627
+ 'gap': calc(var(--joy-layout-space) / 2),
1628
+ 'label-color': var(--joy-scheme-muted),
1629
+ 'label-font-size': var(--joy-typography-caption-font-size),
1630
+ 'label-font-weight': 600,
1631
+ 'padding-bottom': 0,
1632
+ 'padding-left': 0,
1633
+ 'padding-right': 0,
1634
+ 'padding-top': 0,
1635
+ 'shadow': unset unset unset unset unset,
1636
+ 'shadow-blur': unset,
1637
+ 'shadow-color': unset,
1638
+ 'shadow-offset-x': unset,
1639
+ 'shadow-offset-y': unset,
1640
+ 'shadow-spread': unset,
1641
+ 'transition-duration': var(--joy-duration-short),
1642
+ 'transition-mode': ease,
1643
+ 'transition-property': (all),
1644
+ 'translate': none
1645
+ );
1646
+ /**
1647
+ * ------------------------------------------------------------------------------
1648
+ * <auto-generated>
1649
+ * This code was generated by a tool.
1650
+ * Changes to this file may cause incorrect behavior and will be lost if
1651
+ * the code is regenerated.
1652
+ * </auto-generated>
1653
+ * ------------------------------------------------------------------------------
1654
+ */
1655
+ $actionbar-item-props: (
1656
+ 'background-color': transparent,
1657
+ 'background-color-active': var(--joy-scheme-selected),
1658
+ 'background-color-hover': var(--joy-scheme-highlight),
1659
+ 'border-radius': var(--joy-layout-radius),
1660
+ 'font-family': unset,
1661
+ 'font-letter-spacing': unset,
1662
+ 'font-line-height': unset,
1663
+ 'font-size': unset,
1664
+ 'font-text-decoration': unset,
1665
+ 'font-text-transform': unset,
1666
+ 'font-weight': unset,
1667
+ 'gap': unset,
1668
+ 'padding-bottom': calc(var(--joy-layout-space) / 2),
1669
+ 'padding-left': calc(var(--joy-layout-space) / 2),
1670
+ 'padding-right': calc(var(--joy-layout-space) / 2),
1671
+ 'padding-top': calc(var(--joy-layout-space) / 2),
1672
+ 'shadow': unset unset unset unset unset,
1673
+ 'shadow-blur': unset,
1674
+ 'shadow-color': unset,
1675
+ 'shadow-offset-x': unset,
1676
+ 'shadow-offset-y': unset,
1677
+ 'shadow-spread': unset,
1678
+ 'transition-duration': var(--joy-duration-short),
1679
+ 'transition-mode': ease,
1680
+ 'transition-property': (background-color),
1681
+ 'translate': none
1682
+ );
1683
+ /**
1684
+ * ------------------------------------------------------------------------------
1685
+ * <auto-generated>
1686
+ * This code was generated by a tool.
1687
+ * Changes to this file may cause incorrect behavior and will be lost if
1688
+ * the code is regenerated.
1689
+ * </auto-generated>
1690
+ * ------------------------------------------------------------------------------
1691
+ */
1692
+ $actionbar-separator-props: (
1693
+ 'background-color': var(--joy-scheme-highlight),
1694
+ 'font-family': unset,
1695
+ 'font-letter-spacing': unset,
1696
+ 'font-line-height': unset,
1697
+ 'font-size': unset,
1698
+ 'font-text-decoration': unset,
1699
+ 'font-text-transform': unset,
1700
+ 'font-weight': unset,
1701
+ 'gap': unset,
1702
+ 'padding-bottom': unset,
1703
+ 'padding-left': unset,
1704
+ 'padding-right': unset,
1705
+ 'padding-top': unset,
1706
+ 'shadow': unset unset unset unset unset,
1707
+ 'shadow-blur': unset,
1708
+ 'shadow-color': unset,
1709
+ 'shadow-offset-x': unset,
1710
+ 'shadow-offset-y': unset,
1711
+ 'shadow-spread': unset,
1712
+ 'thickness': 1px,
1713
+ 'transition-duration': var(--joy-duration-short),
1714
+ 'transition-mode': ease,
1715
+ 'transition-property': (all),
1716
+ 'translate': none
1717
+ );
1718
+ /**
1719
+ * ------------------------------------------------------------------------------
1720
+ * <auto-generated>
1721
+ * This code was generated by a tool.
1722
+ * Changes to this file may cause incorrect behavior and will be lost if
1723
+ * the code is regenerated.
1724
+ * </auto-generated>
1725
+ * ------------------------------------------------------------------------------
1726
+ */
1727
+ $actionbar-props: (
1728
+ 'background-color': var(--joy-scheme-background),
1729
+ 'border-color': var(--joy-scheme-highlight),
1730
+ 'border-radius': var(--joy-layout-radius),
1731
+ 'border-style': solid,
1732
+ 'border-width': var(--joy-layout-thickness),
1733
+ 'font-family': var(--joy-font-family),
1734
+ 'font-letter-spacing': unset,
1735
+ 'font-line-height': unset,
1736
+ 'font-size': var(--joy-typography-body-font-size),
1737
+ 'font-text-decoration': unset,
1738
+ 'font-text-transform': unset,
1739
+ 'font-weight': normal,
1740
+ 'foreground-color': var(--joy-scheme-foreground),
1741
+ 'gap': var(--joy-layout-space),
1742
+ 'min-height': 48px,
1743
+ 'padding-bottom': var(--joy-layout-space),
1744
+ 'padding-left': var(--joy-layout-space),
1745
+ 'padding-right': var(--joy-layout-space),
1746
+ 'padding-top': var(--joy-layout-space),
1747
+ 'shadow': unset unset unset unset unset,
1748
+ 'shadow-blur': unset,
1749
+ 'shadow-color': unset,
1750
+ 'shadow-offset-x': unset,
1751
+ 'shadow-offset-y': unset,
1752
+ 'shadow-spread': unset,
1753
+ 'transition-duration': var(--joy-duration-short),
1754
+ 'transition-mode': ease,
1755
+ 'transition-property': (all),
1756
+ 'translate': none
1757
+ );
1593
1758
  /**
1594
1759
  * ------------------------------------------------------------------------------
1595
1760
  * <auto-generated>
@@ -1657,7 +1822,7 @@ $anchor-props: (
1657
1822
  'transition-duration': var(--joy-duration-short),
1658
1823
  'transition-mode': ease,
1659
1824
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
1660
- 'translate': unset
1825
+ 'translate': none
1661
1826
  );
1662
1827
  /**
1663
1828
  * ------------------------------------------------------------------------------
@@ -1670,8 +1835,8 @@ $anchor-props: (
1670
1835
  */
1671
1836
  $app-props: (
1672
1837
  'background-color': var(--joy-scheme-background),
1673
- 'border-radius': unset,
1674
- 'content-offset-top': unset,
1838
+ 'border-radius': none,
1839
+ 'content-offset-top': none,
1675
1840
  'drawer-height': 100%,
1676
1841
  'drawer-width': 320px,
1677
1842
  'font-family': var(--joy-typography-body1-font-family),
@@ -1758,12 +1923,12 @@ $audio-props: (
1758
1923
  'font-family': var(--joy-font-family),
1759
1924
  'font-letter-spacing': unset,
1760
1925
  'font-line-height': unset,
1761
- 'font-size': 12px,
1926
+ 'font-size': var(--joy-typography-body1-font-size),
1762
1927
  'font-text-decoration': unset,
1763
1928
  'font-text-transform': unset,
1764
- 'font-weight': normal,
1929
+ 'font-weight': var(--joy-typography-body1-font-weight),
1765
1930
  'foreground-color': var(--joy-scheme-foreground),
1766
- 'gap': 8px,
1931
+ 'gap': var(--joy-layout-space),
1767
1932
  'legend-font-family': var(--joy-font-family),
1768
1933
  'legend-font-letter-spacing': var(--joy-typography-caption-letter-spacing),
1769
1934
  'legend-font-line-height': var(--joy-typography-caption-line-height),
@@ -1771,10 +1936,10 @@ $audio-props: (
1771
1936
  'legend-font-text-decoration': var(--joy-typography-caption-text-decoration),
1772
1937
  'legend-font-text-transform': var(--joy-typography-caption-text-transform),
1773
1938
  'legend-font-weight': var(--joy-typography-caption-font-weight),
1774
- 'padding-bottom': 16px,
1775
- 'padding-left': 16px,
1776
- 'padding-right': 16px,
1777
- 'padding-top': 16px,
1939
+ 'padding-bottom': calc(var(--joy-layout-space) * 2),
1940
+ 'padding-left': calc(var(--joy-layout-space) * 2),
1941
+ 'padding-right': calc(var(--joy-layout-space) * 2),
1942
+ 'padding-top': calc(var(--joy-layout-space) * 2),
1778
1943
  'shadow': unset unset unset unset unset,
1779
1944
  'shadow-blur': unset,
1780
1945
  'shadow-color': unset,
@@ -1808,16 +1973,16 @@ $auto-complete-box-props: (
1808
1973
  'font-family': var(--joy-font-family),
1809
1974
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
1810
1975
  'font-line-height': var(--joy-typography-body2-line-height),
1811
- 'font-size': 16px,
1976
+ 'font-size': var(--joy-typography-body2-font-size),
1812
1977
  'font-text-decoration': var(--joy-typography-body2-text-decoration),
1813
1978
  'font-text-transform': var(--joy-typography-body2-text-transform),
1814
- 'font-weight': normal,
1979
+ 'font-weight': var(--joy-typography-body2-font-weight),
1815
1980
  'foreground-color': var(--joy-scheme-foreground),
1816
- 'gap': 8px,
1817
- 'padding-bottom': 8px,
1818
- 'padding-left': 12px,
1819
- 'padding-right': 12px,
1820
- 'padding-top': 8px,
1981
+ 'gap': var(--joy-layout-space),
1982
+ 'padding-bottom': var(--joy-layout-space),
1983
+ 'padding-left': calc(var(--joy-layout-space) * 1.5),
1984
+ 'padding-right': calc(var(--joy-layout-space) * 1.5),
1985
+ 'padding-top': var(--joy-layout-space),
1821
1986
  'shadow': unset unset unset unset unset,
1822
1987
  'shadow-blur': unset,
1823
1988
  'shadow-color': unset,
@@ -1892,10 +2057,10 @@ $avatar-group-props: (
1892
2057
  'font-family': var(--joy-font-family),
1893
2058
  'font-letter-spacing': unset,
1894
2059
  'font-line-height': unset,
1895
- 'font-size': 12px,
2060
+ 'font-size': var(--joy-typography-body1-font-size),
1896
2061
  'font-text-decoration': unset,
1897
2062
  'font-text-transform': unset,
1898
- 'font-weight': normal,
2063
+ 'font-weight': var(--joy-typography-body1-font-weight),
1899
2064
  'foreground-color': var(--joy-color-neutral-50),
1900
2065
  'gap': var(--joy-layout-space),
1901
2066
  'padding-bottom': calc(var(--joy-layout-space) / 2),
@@ -2039,12 +2204,12 @@ $banner-props: (
2039
2204
  'font-family': var(--joy-font-family),
2040
2205
  'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
2041
2206
  'font-line-height': var(--joy-typography-body1-line-height),
2042
- 'font-size': 16px,
2207
+ 'font-size': var(--joy-typography-body1-font-size),
2043
2208
  'font-text-decoration': var(--joy-typography-body1-text-decoration),
2044
2209
  'font-text-transform': var(--joy-typography-body1-text-transform),
2045
- 'font-weight': normal,
2210
+ 'font-weight': var(--joy-typography-body1-font-weight),
2046
2211
  'foreground-color': var(--joy-scheme-foreground),
2047
- 'gap': 8px,
2212
+ 'gap': var(--joy-layout-space),
2048
2213
  'padding-bottom': var(--joy-layout-space),
2049
2214
  'padding-left': calc(var(--joy-layout-space) * 2),
2050
2215
  'padding-right': calc(var(--joy-layout-space) * 2),
@@ -2104,7 +2269,6 @@ $banner-group-props: (
2104
2269
  */
2105
2270
  $banner-header-props: (
2106
2271
  'background-color': unset,
2107
- 'border-color': unset,
2108
2272
  'font-family': var(--joy-font-family),
2109
2273
  'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
2110
2274
  'font-line-height': var(--joy-typography-body1-line-height),
@@ -2127,7 +2291,7 @@ $banner-header-props: (
2127
2291
  'transition-duration': unset,
2128
2292
  'transition-mode': unset,
2129
2293
  'transition-property': (unset),
2130
- 'translate': unset
2294
+ 'translate': none
2131
2295
  );
2132
2296
  /**
2133
2297
  * ------------------------------------------------------------------------------
@@ -2140,7 +2304,6 @@ $banner-header-props: (
2140
2304
  */
2141
2305
  $banner-sub-header-props: (
2142
2306
  'background-color': unset,
2143
- 'border-color': unset,
2144
2307
  'font-family': var(--joy-font-family),
2145
2308
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
2146
2309
  'font-line-height': var(--joy-typography-body2-line-height),
@@ -2163,7 +2326,7 @@ $banner-sub-header-props: (
2163
2326
  'transition-duration': unset,
2164
2327
  'transition-mode': unset,
2165
2328
  'transition-property': (unset),
2166
- 'translate': unset
2329
+ 'translate': none
2167
2330
  );
2168
2331
  /**
2169
2332
  * ------------------------------------------------------------------------------
@@ -2237,7 +2400,7 @@ $breadcrumb-props: (
2237
2400
  'transition-duration': unset,
2238
2401
  'transition-mode': unset,
2239
2402
  'transition-property': (unset),
2240
- 'translate': unset
2403
+ 'translate': none
2241
2404
  );
2242
2405
  /**
2243
2406
  * ------------------------------------------------------------------------------
@@ -2249,6 +2412,7 @@ $breadcrumb-props: (
2249
2412
  * ------------------------------------------------------------------------------
2250
2413
  */
2251
2414
  $breadcrumb-item-props: (
2415
+ 'border-style': none,
2252
2416
  'font-family': unset,
2253
2417
  'font-letter-spacing': unset,
2254
2418
  'font-line-height': unset,
@@ -2270,7 +2434,7 @@ $breadcrumb-item-props: (
2270
2434
  'transition-duration': unset,
2271
2435
  'transition-mode': unset,
2272
2436
  'transition-property': (unset),
2273
- 'translate': unset
2437
+ 'translate': none
2274
2438
  );
2275
2439
  /**
2276
2440
  * ------------------------------------------------------------------------------
@@ -2347,12 +2511,12 @@ $button-props: (
2347
2511
  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
2348
2512
  'min-width': 64px,
2349
2513
  'padding-bottom': var(--joy-layout-space),
2350
- 'padding-left': var(--joy-layout-space),
2351
- 'padding-right': var(--joy-layout-space),
2514
+ 'padding-left': calc(var(--joy-layout-space) * 2),
2515
+ 'padding-right': calc(var(--joy-layout-space) * 2),
2352
2516
  'padding-top': var(--joy-layout-space),
2353
2517
  'progress-ring-width': var(--joy-layout-thickness),
2354
2518
  'ripple-color': unset,
2355
- 'ripple-duration': 200ms,
2519
+ 'ripple-duration': 0.20s,
2356
2520
  'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
2357
2521
  'shadow-blur': var(--joy-elevation-semilight-blur-0),
2358
2522
  'shadow-color': var(--joy-elevation-semilight-color-0),
@@ -2402,7 +2566,7 @@ $button-group-props: (
2402
2566
  'transition-duration': var(--joy-duration-short),
2403
2567
  'transition-mode': ease,
2404
2568
  'transition-property': (background-color, color, border-color, opacity),
2405
- 'translate': unset
2569
+ 'translate': none
2406
2570
  );
2407
2571
  /**
2408
2572
  * ------------------------------------------------------------------------------
@@ -2545,11 +2709,11 @@ $calendar-item-props: (
2545
2709
  'foreground-color': var(--joy-scheme-foreground),
2546
2710
  'gap': 4px,
2547
2711
  'padding-bottom': var(--joy-layout-space),
2548
- 'padding-left': 12px,
2549
- 'padding-right': 12px,
2712
+ 'padding-left': calc(var(--joy-layout-space) * 1.5),
2713
+ 'padding-right': calc(var(--joy-layout-space) * 1.5),
2550
2714
  'padding-top': var(--joy-layout-space),
2551
2715
  'ripple-color': unset,
2552
- 'ripple-duration': 200ms,
2716
+ 'ripple-duration': 0.20s,
2553
2717
  'shadow': var(--joy-elevation-light-offset-x-0) var(--joy-elevation-light-offset-y-0) var(--joy-elevation-light-blur-0) var(--joy-elevation-light-spread-0) var(--joy-elevation-light-color-0),
2554
2718
  'shadow-blur': var(--joy-elevation-light-blur-0),
2555
2719
  'shadow-color': var(--joy-elevation-light-color-0),
@@ -2613,13 +2777,13 @@ $calendar-sub-header-props: (
2613
2777
  'font-family': unset,
2614
2778
  'font-letter-spacing': unset,
2615
2779
  'font-line-height': unset,
2616
- 'font-size': 18px,
2780
+ 'font-size': var(--joy-typography-body1-font-size),
2617
2781
  'font-text-decoration': unset,
2618
2782
  'font-text-transform': unset,
2619
- 'font-weight': normal,
2783
+ 'font-weight': var(--joy-typography-body1-font-weight),
2620
2784
  'foreground-color': var(--joy-scheme-foreground),
2621
2785
  'gap': unset,
2622
- 'line-height': 22px,
2786
+ 'line-height': var(--joy-typography-body1-line-height),
2623
2787
  'padding-bottom': unset,
2624
2788
  'padding-left': unset,
2625
2789
  'padding-right': unset,
@@ -2775,7 +2939,7 @@ $card-actions-props: (
2775
2939
  'transition-duration': unset,
2776
2940
  'transition-mode': unset,
2777
2941
  'transition-property': (unset),
2778
- 'translate': unset
2942
+ 'translate': none
2779
2943
  );
2780
2944
  /**
2781
2945
  * ------------------------------------------------------------------------------
@@ -2808,7 +2972,7 @@ $card-content-props: (
2808
2972
  'transition-duration': unset,
2809
2973
  'transition-mode': unset,
2810
2974
  'transition-property': (unset),
2811
- 'translate': unset
2975
+ 'translate': none
2812
2976
  );
2813
2977
  /**
2814
2978
  * ------------------------------------------------------------------------------
@@ -2841,7 +3005,7 @@ $card-footer-props: (
2841
3005
  'transition-duration': unset,
2842
3006
  'transition-mode': unset,
2843
3007
  'transition-property': (unset),
2844
- 'translate': unset
3008
+ 'translate': none
2845
3009
  );
2846
3010
  /**
2847
3011
  * ------------------------------------------------------------------------------
@@ -2874,7 +3038,7 @@ $card-header-props: (
2874
3038
  'transition-duration': unset,
2875
3039
  'transition-mode': unset,
2876
3040
  'transition-property': (unset),
2877
- 'translate': unset
3041
+ 'translate': none
2878
3042
  );
2879
3043
  /**
2880
3044
  * ------------------------------------------------------------------------------
@@ -2910,7 +3074,7 @@ $card-sub-title-props: (
2910
3074
  'transition-duration': unset,
2911
3075
  'transition-mode': unset,
2912
3076
  'transition-property': (unset),
2913
- 'translate': unset
3077
+ 'translate': none
2914
3078
  );
2915
3079
  /**
2916
3080
  * ------------------------------------------------------------------------------
@@ -2946,7 +3110,7 @@ $card-title-props: (
2946
3110
  'transition-duration': unset,
2947
3111
  'transition-mode': unset,
2948
3112
  'transition-property': (unset),
2949
- 'translate': unset
3113
+ 'translate': none
2950
3114
  );
2951
3115
  /**
2952
3116
  * ------------------------------------------------------------------------------
@@ -3121,7 +3285,7 @@ $cell-props: (
3121
3285
  'transition-duration': unset,
3122
3286
  'transition-mode': unset,
3123
3287
  'transition-property': (unset),
3124
- 'translate': unset
3288
+ 'translate': none
3125
3289
  );
3126
3290
  /**
3127
3291
  * ------------------------------------------------------------------------------
@@ -3160,7 +3324,7 @@ $cell-group-props: (
3160
3324
  'transition-duration': unset,
3161
3325
  'transition-mode': unset,
3162
3326
  'transition-property': (background-color, color, border-color, box-shadow),
3163
- 'translate': unset
3327
+ 'translate': none
3164
3328
  );
3165
3329
  /**
3166
3330
  * ------------------------------------------------------------------------------
@@ -3212,7 +3376,6 @@ $chat-props: (
3212
3376
  'border-radius': var(--joy-layout-radius),
3213
3377
  'border-style': solid,
3214
3378
  'border-width': var(--joy-layout-thickness),
3215
- 'focus-ring-outward-offset': unset,
3216
3379
  'font-family': var(--joy-font-family),
3217
3380
  'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
3218
3381
  'font-line-height': var(--joy-typography-body1-line-height),
@@ -3287,7 +3450,6 @@ $chat-input-props: (
3287
3450
  'border-radius': var(--joy-layout-radius),
3288
3451
  'border-style': solid,
3289
3452
  'border-width': var(--joy-layout-thickness),
3290
- 'emoji-background-color': unset,
3291
3453
  'font-family': unset,
3292
3454
  'font-letter-spacing': unset,
3293
3455
  'font-line-height': unset,
@@ -3327,7 +3489,6 @@ $chat-input-attachment-list-props: (
3327
3489
  'border-radius': var(--joy-layout-radius),
3328
3490
  'border-style': solid,
3329
3491
  'border-width': var(--joy-layout-thickness),
3330
- 'emoji-background-color': unset,
3331
3492
  'font-family': unset,
3332
3493
  'font-letter-spacing': unset,
3333
3494
  'font-line-height': unset,
@@ -3590,7 +3751,7 @@ $check-box-props: (
3590
3751
  'background-color': var(--joy-scheme-transparent),
3591
3752
  'border-color': var(--joy-scheme-highlight),
3592
3753
  'border-radius': calc(var(--joy-layout-radius) / 2),
3593
- 'border-style': solid,
3754
+ 'border-style': none,
3594
3755
  'border-width': var(--joy-layout-thickness),
3595
3756
  'font-family': var(--joy-font-family),
3596
3757
  'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
@@ -3600,11 +3761,11 @@ $check-box-props: (
3600
3761
  'font-text-transform': var(--joy-typography-body1-text-transform),
3601
3762
  'font-weight': var(--joy-typography-body1-font-weight),
3602
3763
  'foreground-color': var(--joy-scheme-foreground),
3603
- 'gap': 12px,
3604
- 'padding-bottom': 8px,
3605
- 'padding-left': 12px,
3606
- 'padding-right': 12px,
3607
- 'padding-top': 8px,
3764
+ 'gap': calc(var(--joy-layout-space) * 1.5),
3765
+ 'padding-bottom': var(--joy-layout-space),
3766
+ 'padding-left': calc(var(--joy-layout-space) * 1.5),
3767
+ 'padding-right': calc(var(--joy-layout-space) * 1.5),
3768
+ 'padding-top': var(--joy-layout-space),
3608
3769
  'shadow': unset unset unset unset unset,
3609
3770
  'shadow-blur': unset,
3610
3771
  'shadow-color': unset,
@@ -3629,7 +3790,7 @@ $check-box-group-props: (
3629
3790
  'background-color': unset,
3630
3791
  'border-color': unset,
3631
3792
  'border-radius': unset,
3632
- 'border-style': unset,
3793
+ 'border-style': solid,
3633
3794
  'border-width': unset,
3634
3795
  'font-family': unset,
3635
3796
  'font-letter-spacing': unset,
@@ -3679,12 +3840,12 @@ $checkmark-props: (
3679
3840
  'font-text-transform': var(--joy-typography-body2-text-transform),
3680
3841
  'font-weight': var(--joy-typography-body2-font-weight),
3681
3842
  'foreground-color': var(--joy-scheme-foreground),
3682
- 'gap': 8px,
3843
+ 'gap': var(--joy-layout-space),
3683
3844
  'height': 24px,
3684
- 'padding-bottom': 4px,
3685
- 'padding-left': 8px,
3686
- 'padding-right': 8px,
3687
- 'padding-top': 4px,
3845
+ 'padding-bottom': calc(var(--joy-layout-space) / 2),
3846
+ 'padding-left': var(--joy-layout-space),
3847
+ 'padding-right': var(--joy-layout-space),
3848
+ 'padding-top': calc(var(--joy-layout-space) / 2),
3688
3849
  'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
3689
3850
  'shadow-blur': var(--joy-elevation-light-blur-1),
3690
3851
  'shadow-color': var(--joy-elevation-light-color-1),
@@ -3716,7 +3877,7 @@ $chip-props: (
3716
3877
  'focus-ring-active-width': 8px,
3717
3878
  'focus-ring-color': unset,
3718
3879
  'focus-ring-inward-offset': 2px,
3719
- 'focus-ring-outward-offset': unset,
3880
+ 'focus-ring-outward-offset': 2px,
3720
3881
  'font-family': var(--joy-font-family),
3721
3882
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
3722
3883
  'font-line-height': var(--joy-typography-body2-line-height),
@@ -3732,7 +3893,7 @@ $chip-props: (
3732
3893
  'padding-right': var(--joy-layout-space),
3733
3894
  'padding-top': var(--joy-layout-space),
3734
3895
  'ripple-color': unset,
3735
- 'ripple-duration': 200ms,
3896
+ 'ripple-duration': 0.20s,
3736
3897
  'shadow': var(--joy-elevation-light-offset-x-0) var(--joy-elevation-light-offset-y-0) var(--joy-elevation-light-blur-0) var(--joy-elevation-light-spread-0) var(--joy-elevation-light-color-0),
3737
3898
  'shadow-blur': var(--joy-elevation-light-blur-0),
3738
3899
  'shadow-color': var(--joy-elevation-light-color-0),
@@ -3742,7 +3903,7 @@ $chip-props: (
3742
3903
  'transition-duration': var(--joy-duration-short),
3743
3904
  'transition-mode': ease,
3744
3905
  'transition-property': (background-color, color, border-color, box-shadow, opacity, box-shadow),
3745
- 'translate': unset
3906
+ 'translate': none
3746
3907
  );
3747
3908
  /**
3748
3909
  * ------------------------------------------------------------------------------
@@ -3764,10 +3925,10 @@ $chip-box-props: (
3764
3925
  'font-family': var(--joy-font-family),
3765
3926
  'font-letter-spacing': unset,
3766
3927
  'font-line-height': unset,
3767
- 'font-size': 16px,
3928
+ 'font-size': var(--joy-typography-body1-font-size),
3768
3929
  'font-text-decoration': unset,
3769
3930
  'font-text-transform': unset,
3770
- 'font-weight': normal,
3931
+ 'font-weight': var(--joy-typography-body1-font-weight),
3771
3932
  'foreground-color': var(--joy-scheme-foreground),
3772
3933
  'gap': var(--joy-layout-space),
3773
3934
  'height': 56px,
@@ -3801,7 +3962,7 @@ $chip-group-props: (
3801
3962
  'background-color': unset,
3802
3963
  'border-color': unset,
3803
3964
  'border-radius': unset,
3804
- 'border-style': unset,
3965
+ 'border-style': none,
3805
3966
  'border-width': unset,
3806
3967
  'font-family': unset,
3807
3968
  'font-letter-spacing': unset,
@@ -3883,7 +4044,7 @@ $choice-group-props: (
3883
4044
  'background-color': unset,
3884
4045
  'border-color': unset,
3885
4046
  'border-radius': unset,
3886
- 'border-style': unset,
4047
+ 'border-style': none,
3887
4048
  'border-width': unset,
3888
4049
  'font-family': var(--joy-font-family),
3889
4050
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
@@ -3922,7 +4083,7 @@ $choice-group-header-props: (
3922
4083
  'background-color': unset,
3923
4084
  'border-color': unset,
3924
4085
  'border-radius': unset,
3925
- 'border-style': unset,
4086
+ 'border-style': solid,
3926
4087
  'border-width': unset,
3927
4088
  'font-family': var(--joy-typography-subtitle2-font-family),
3928
4089
  'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
@@ -4035,10 +4196,10 @@ $color-box-props: (
4035
4196
  'font-family': var(--joy-font-family),
4036
4197
  'font-letter-spacing': unset,
4037
4198
  'font-line-height': unset,
4038
- 'font-size': 16px,
4199
+ 'font-size': var(--joy-typography-body1-font-size),
4039
4200
  'font-text-decoration': unset,
4040
4201
  'font-text-transform': unset,
4041
- 'font-weight': normal,
4202
+ 'font-weight': var(--joy-typography-body1-font-weight),
4042
4203
  'foreground-color': var(--joy-scheme-foreground),
4043
4204
  'gap': var(--joy-layout-space),
4044
4205
  'height': 56px,
@@ -4461,10 +4622,10 @@ $color-picker-props: (
4461
4622
  'font-family': var(--joy-font-family),
4462
4623
  'font-letter-spacing': unset,
4463
4624
  'font-line-height': unset,
4464
- 'font-size': 16px,
4625
+ 'font-size': var(--joy-typography-body1-font-size),
4465
4626
  'font-text-decoration': unset,
4466
4627
  'font-text-transform': unset,
4467
- 'font-weight': normal,
4628
+ 'font-weight': var(--joy-typography-body1-font-weight),
4468
4629
  'foreground-color': var(--joy-scheme-foreground),
4469
4630
  'gap': unset,
4470
4631
  'padding-bottom': unset,
@@ -4496,7 +4657,7 @@ $color-slider-props: (
4496
4657
  'background-color': unset,
4497
4658
  'border-color': unset,
4498
4659
  'border-radius': unset,
4499
- 'border-style': unset,
4660
+ 'border-style': solid,
4500
4661
  'border-width': unset,
4501
4662
  'font-family': unset,
4502
4663
  'font-letter-spacing': unset,
@@ -4580,16 +4741,16 @@ $color-swatch-group-props: (
4580
4741
  'font-family': var(--joy-font-family),
4581
4742
  'font-letter-spacing': unset,
4582
4743
  'font-line-height': unset,
4583
- 'font-size': 12px,
4744
+ 'font-size': var(--joy-typography-overline-font-size),
4584
4745
  'font-text-decoration': unset,
4585
4746
  'font-text-transform': unset,
4586
- 'font-weight': normal,
4747
+ 'font-weight': var(--joy-typography-overline-font-weight),
4587
4748
  'foreground-color': var(--joy-color-neutral-50),
4588
- 'gap': 8px,
4589
- 'padding-bottom': 4px,
4590
- 'padding-left': 8px,
4591
- 'padding-right': 8px,
4592
- 'padding-top': 4px,
4749
+ 'gap': var(--joy-layout-space),
4750
+ 'padding-bottom': calc(var(--joy-layout-space) / 2),
4751
+ 'padding-left': var(--joy-layout-space),
4752
+ 'padding-right': var(--joy-layout-space),
4753
+ 'padding-top': calc(var(--joy-layout-space) / 2),
4593
4754
  'shadow': unset unset unset unset unset,
4594
4755
  'shadow-blur': unset,
4595
4756
  'shadow-color': unset,
@@ -4619,10 +4780,10 @@ $color-thumb-props: (
4619
4780
  'font-family': var(--joy-font-family),
4620
4781
  'font-letter-spacing': unset,
4621
4782
  'font-line-height': unset,
4622
- 'font-size': 16px,
4783
+ 'font-size': var(--joy-typography-body1-font-size),
4623
4784
  'font-text-decoration': unset,
4624
4785
  'font-text-transform': unset,
4625
- 'font-weight': normal,
4786
+ 'font-weight': var(--joy-typography-body1-font-weight),
4626
4787
  'foreground-color': var(--joy-scheme-foreground),
4627
4788
  'gap': unset,
4628
4789
  'padding-bottom': unset,
@@ -4663,7 +4824,7 @@ $combo-props: (
4663
4824
  'font-text-transform': var(--joy-typography-body2-text-transform),
4664
4825
  'font-weight': var(--joy-typography-body2-font-weight),
4665
4826
  'foreground-color': var(--joy-scheme-foreground),
4666
- 'gap': 8px,
4827
+ 'gap': var(--joy-layout-space),
4667
4828
  'padding-bottom': calc(var(--joy-layout-space) / 2),
4668
4829
  'padding-left': calc(var(--joy-layout-space) * 1.5),
4669
4830
  'padding-right': calc(var(--joy-layout-space) * 1.5),
@@ -4712,7 +4873,7 @@ $combo-item-props: (
4712
4873
  'padding-right': var(--joy-layout-space),
4713
4874
  'padding-top': var(--joy-layout-space),
4714
4875
  'ripple-color': var(--joy-color-light-secondary-200),
4715
- 'ripple-duration': 200ms,
4876
+ 'ripple-duration': 0.20s,
4716
4877
  'shadow': unset unset unset unset unset,
4717
4878
  'shadow-blur': unset,
4718
4879
  'shadow-color': unset,
@@ -4742,8 +4903,8 @@ $comment-props: (
4742
4903
  'font-text-transform': var(--joy-typography-body2-text-transform),
4743
4904
  'font-weight': var(--joy-typography-body2-font-weight),
4744
4905
  'foreground-color': var(--joy-scheme-foreground),
4745
- 'gap': 16px,
4746
- 'inner-gap': 8px,
4906
+ 'gap': var(--joy-layout-space),
4907
+ 'inner-gap': var(--joy-layout-space),
4747
4908
  'nested-indent': 24px,
4748
4909
  'padding-bottom': var(--joy-layout-space),
4749
4910
  'padding-left': calc(var(--joy-layout-space) * 1.5),
@@ -4794,12 +4955,12 @@ $compound-button-props: (
4794
4955
  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
4795
4956
  'min-width': 64px,
4796
4957
  'padding-bottom': var(--joy-layout-space),
4797
- 'padding-left': var(--joy-layout-space),
4798
- 'padding-right': var(--joy-layout-space),
4958
+ 'padding-left': calc(var(--joy-layout-space) * 2),
4959
+ 'padding-right': calc(var(--joy-layout-space) * 2),
4799
4960
  'padding-top': var(--joy-layout-space),
4800
4961
  'progress-ring-width': var(--joy-layout-thickness),
4801
4962
  'ripple-color': unset,
4802
- 'ripple-duration': 200ms,
4963
+ 'ripple-duration': 0.20s,
4803
4964
  'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
4804
4965
  'shadow-blur': var(--joy-elevation-semilight-blur-0),
4805
4966
  'shadow-color': var(--joy-elevation-semilight-color-0),
@@ -4921,6 +5082,7 @@ $data-list-props: (
4921
5082
  * ------------------------------------------------------------------------------
4922
5083
  */
4923
5084
  $data-table-props: (
5085
+ 'border-radius': var(--joy-layout-radius),
4924
5086
  'font-family': unset,
4925
5087
  'font-letter-spacing': unset,
4926
5088
  'font-line-height': unset,
@@ -4963,10 +5125,10 @@ $date-box-props: (
4963
5125
  'font-family': var(--joy-font-family),
4964
5126
  'font-letter-spacing': unset,
4965
5127
  'font-line-height': unset,
4966
- 'font-size': 16px,
5128
+ 'font-size': var(--joy-typography-body1-font-size),
4967
5129
  'font-text-decoration': unset,
4968
5130
  'font-text-transform': unset,
4969
- 'font-weight': normal,
5131
+ 'font-weight': var(--joy-typography-body1-font-weight),
4970
5132
  'foreground-color': var(--joy-scheme-foreground),
4971
5133
  'gap': var(--joy-layout-space),
4972
5134
  'height': 56px,
@@ -5000,16 +5162,13 @@ $date-time-box-props: (
5000
5162
  'border-radius': var(--joy-layout-radius),
5001
5163
  'border-style': solid,
5002
5164
  'border-width': var(--joy-layout-thickness),
5003
- 'calendar-border-radius': unset,
5004
- 'calendar-border-style': unset,
5005
- 'calendar-border-width': unset,
5006
5165
  'font-family': var(--joy-font-family),
5007
5166
  'font-letter-spacing': unset,
5008
5167
  'font-line-height': unset,
5009
- 'font-size': 16px,
5168
+ 'font-size': var(--joy-typography-body1-font-size),
5010
5169
  'font-text-decoration': unset,
5011
5170
  'font-text-transform': unset,
5012
- 'font-weight': normal,
5171
+ 'font-weight': var(--joy-typography-body1-font-weight),
5013
5172
  'foreground-color': var(--joy-scheme-foreground),
5014
5173
  'gap': var(--joy-layout-space),
5015
5174
  'height': 56px,
@@ -5028,6 +5187,147 @@ $date-time-box-props: (
5028
5187
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
5029
5188
  'translate': none
5030
5189
  );
5190
+ /**
5191
+ * ------------------------------------------------------------------------------
5192
+ * <auto-generated>
5193
+ * This code was generated by a tool.
5194
+ * Changes to this file may cause incorrect behavior and will be lost if
5195
+ * the code is regenerated.
5196
+ * </auto-generated>
5197
+ * ------------------------------------------------------------------------------
5198
+ */
5199
+ $designer-props: (
5200
+ 'font-family': unset,
5201
+ 'font-letter-spacing': unset,
5202
+ 'font-line-height': unset,
5203
+ 'font-size': unset,
5204
+ 'font-text-decoration': unset,
5205
+ 'font-text-transform': unset,
5206
+ 'font-weight': unset,
5207
+ 'gap': unset,
5208
+ 'padding-bottom': unset,
5209
+ 'padding-left': unset,
5210
+ 'padding-right': unset,
5211
+ 'padding-top': unset,
5212
+ 'shadow': unset unset unset unset unset,
5213
+ 'shadow-blur': unset,
5214
+ 'shadow-color': unset,
5215
+ 'shadow-offset-x': unset,
5216
+ 'shadow-offset-y': unset,
5217
+ 'shadow-spread': unset,
5218
+ 'transition-duration': unset,
5219
+ 'transition-mode': unset,
5220
+ 'transition-property': unset,
5221
+ 'translate': none
5222
+ );
5223
+ /**
5224
+ * ------------------------------------------------------------------------------
5225
+ * <auto-generated>
5226
+ * This code was generated by a tool.
5227
+ * Changes to this file may cause incorrect behavior and will be lost if
5228
+ * the code is regenerated.
5229
+ * </auto-generated>
5230
+ * ------------------------------------------------------------------------------
5231
+ */
5232
+ $designer-canvas-props: (
5233
+ 'background-color': var(--joy-scheme-surface),
5234
+ 'dot-color': var(--joy-color-neutral-400),
5235
+ 'dot-size': 1px,
5236
+ 'dot-spacing': 20px,
5237
+ 'font-family': unset,
5238
+ 'font-letter-spacing': unset,
5239
+ 'font-line-height': unset,
5240
+ 'font-size': unset,
5241
+ 'font-text-decoration': unset,
5242
+ 'font-text-transform': unset,
5243
+ 'font-weight': unset,
5244
+ 'gap': unset,
5245
+ 'padding-bottom': unset,
5246
+ 'padding-left': unset,
5247
+ 'padding-right': unset,
5248
+ 'padding-top': unset,
5249
+ 'shadow': unset unset unset unset unset,
5250
+ 'shadow-blur': unset,
5251
+ 'shadow-color': unset,
5252
+ 'shadow-offset-x': unset,
5253
+ 'shadow-offset-y': unset,
5254
+ 'shadow-spread': unset,
5255
+ 'transition-duration': unset,
5256
+ 'transition-mode': unset,
5257
+ 'transition-property': unset,
5258
+ 'translate': none
5259
+ );
5260
+ /**
5261
+ * ------------------------------------------------------------------------------
5262
+ * <auto-generated>
5263
+ * This code was generated by a tool.
5264
+ * Changes to this file may cause incorrect behavior and will be lost if
5265
+ * the code is regenerated.
5266
+ * </auto-generated>
5267
+ * ------------------------------------------------------------------------------
5268
+ */
5269
+ $designer-content-props: (
5270
+ 'font-family': unset,
5271
+ 'font-letter-spacing': unset,
5272
+ 'font-line-height': unset,
5273
+ 'font-size': unset,
5274
+ 'font-text-decoration': unset,
5275
+ 'font-text-transform': unset,
5276
+ 'font-weight': unset,
5277
+ 'gap': unset,
5278
+ 'padding-bottom': unset,
5279
+ 'padding-left': unset,
5280
+ 'padding-right': unset,
5281
+ 'padding-top': unset,
5282
+ 'shadow': unset unset unset unset unset,
5283
+ 'shadow-blur': unset,
5284
+ 'shadow-color': unset,
5285
+ 'shadow-offset-x': unset,
5286
+ 'shadow-offset-y': unset,
5287
+ 'shadow-spread': unset,
5288
+ 'transition-duration': unset,
5289
+ 'transition-mode': unset,
5290
+ 'transition-property': unset,
5291
+ 'translate': none
5292
+ );
5293
+ /**
5294
+ * ------------------------------------------------------------------------------
5295
+ * <auto-generated>
5296
+ * This code was generated by a tool.
5297
+ * Changes to this file may cause incorrect behavior and will be lost if
5298
+ * the code is regenerated.
5299
+ * </auto-generated>
5300
+ * ------------------------------------------------------------------------------
5301
+ */
5302
+ $designer-frame-props: (
5303
+ 'background-color': var(--joy-scheme-background),
5304
+ 'border-color': var(--joy-color-neutral-300),
5305
+ 'border-width': 1px,
5306
+ 'bounds-color': var(--joy-color-neutral-500),
5307
+ 'bounds-font-size': 11px,
5308
+ 'font-family': unset,
5309
+ 'font-letter-spacing': unset,
5310
+ 'font-line-height': unset,
5311
+ 'font-size': unset,
5312
+ 'font-text-decoration': unset,
5313
+ 'font-text-transform': unset,
5314
+ 'font-weight': unset,
5315
+ 'gap': unset,
5316
+ 'padding-bottom': unset,
5317
+ 'padding-left': unset,
5318
+ 'padding-right': unset,
5319
+ 'padding-top': unset,
5320
+ 'shadow': unset unset unset unset unset,
5321
+ 'shadow-blur': unset,
5322
+ 'shadow-color': unset,
5323
+ 'shadow-offset-x': unset,
5324
+ 'shadow-offset-y': unset,
5325
+ 'shadow-spread': unset,
5326
+ 'transition-duration': unset,
5327
+ 'transition-mode': unset,
5328
+ 'transition-property': unset,
5329
+ 'translate': none
5330
+ );
5031
5331
  /**
5032
5332
  * ------------------------------------------------------------------------------
5033
5333
  * <auto-generated>
@@ -5303,7 +5603,7 @@ $disclosure-props: (
5303
5603
  'transition-duration': unset,
5304
5604
  'transition-mode': unset,
5305
5605
  'transition-property': (unset),
5306
- 'translate': unset
5606
+ 'translate': none
5307
5607
  );
5308
5608
  /**
5309
5609
  * ------------------------------------------------------------------------------
@@ -5349,23 +5649,19 @@ $dismiss-props: (
5349
5649
  */
5350
5650
  $divider-props: (
5351
5651
  'background-color': var(--joy-scheme-highlight),
5352
- 'border-color': unset,
5353
- 'border-radius': unset,
5354
- 'border-style': unset,
5355
- 'border-width': unset,
5356
5652
  'font-family': var(--joy-font-family),
5357
5653
  'font-letter-spacing': unset,
5358
5654
  'font-line-height': unset,
5359
- 'font-size': 12px,
5655
+ 'font-size': var(--joy-typography-supporting-font-size),
5360
5656
  'font-text-decoration': unset,
5361
5657
  'font-text-transform': unset,
5362
- 'font-weight': normal,
5658
+ 'font-weight': var(--joy-typography-supporting-font-weight),
5363
5659
  'foreground-color': var(--joy-scheme-foreground),
5364
- 'gap': 8px,
5365
- 'padding-bottom': 4px,
5366
- 'padding-left': 8px,
5367
- 'padding-right': 8px,
5368
- 'padding-top': 4px,
5660
+ 'gap': var(--joy-layout-space),
5661
+ 'padding-bottom': calc(var(--joy-layout-space) / 2),
5662
+ 'padding-left': var(--joy-layout-space),
5663
+ 'padding-right': var(--joy-layout-space),
5664
+ 'padding-top': calc(var(--joy-layout-space) / 2),
5369
5665
  'shadow': unset unset unset unset unset,
5370
5666
  'shadow-blur': unset,
5371
5667
  'shadow-color': unset,
@@ -5429,10 +5725,10 @@ $dot-props: (
5429
5725
  'font-family': var(--joy-font-family),
5430
5726
  'font-letter-spacing': unset,
5431
5727
  'font-line-height': unset,
5432
- 'font-size': 16px,
5728
+ 'font-size': var(--joy-typography-body1-font-size),
5433
5729
  'font-text-decoration': unset,
5434
5730
  'font-text-transform': unset,
5435
- 'font-weight': normal,
5731
+ 'font-weight': var(--joy-typography-body1-font-weight),
5436
5732
  'foreground-color': var(--joy-color-neutral-50),
5437
5733
  'gap': 0px,
5438
5734
  'padding-bottom': 0px,
@@ -5469,15 +5765,15 @@ $dot-group-props: (
5469
5765
  'font-family': var(--joy-font-family),
5470
5766
  'font-letter-spacing': unset,
5471
5767
  'font-line-height': unset,
5472
- 'font-size': 12px,
5768
+ 'font-size': var(--joy-typography-supporting-font-size),
5473
5769
  'font-text-decoration': unset,
5474
5770
  'font-text-transform': unset,
5475
- 'font-weight': normal,
5771
+ 'font-weight': var(--joy-typography-supporting-font-weight),
5476
5772
  'foreground-color': var(--joy-color-neutral-50),
5477
- 'gap': 8px,
5773
+ 'gap': var(--joy-layout-space),
5478
5774
  'padding-bottom': 4px,
5479
- 'padding-left': 8px,
5480
- 'padding-right': 8px,
5775
+ 'padding-left': var(--joy-layout-space),
5776
+ 'padding-right': var(--joy-layout-space),
5481
5777
  'padding-top': 4px,
5482
5778
  'shadow': unset unset unset unset unset,
5483
5779
  'shadow-blur': unset,
@@ -5509,18 +5805,18 @@ $drawer-props: (
5509
5805
  'font-family': var(--joy-font-family),
5510
5806
  'font-letter-spacing': unset,
5511
5807
  'font-line-height': unset,
5512
- 'font-size': 16px,
5808
+ 'font-size': var(--joy-typography-body1-font-size),
5513
5809
  'font-text-decoration': unset,
5514
5810
  'font-text-transform': unset,
5515
- 'font-weight': normal,
5811
+ 'font-weight': var(--joy-typography-body1-font-weight),
5516
5812
  'foreground-color': var(--joy-scheme-foreground),
5517
- 'gap': 8px,
5813
+ 'gap': var(--joy-layout-space),
5518
5814
  'height': 100%,
5519
5815
  'line-thickness': var(--joy-layout-thickness),
5520
- 'padding-bottom': 8px,
5521
- 'padding-left': 16px,
5522
- 'padding-right': 16px,
5523
- 'padding-top': 8px,
5816
+ 'padding-bottom': var(--joy-layout-space),
5817
+ 'padding-left': calc(var(--joy-layout-space) * 2),
5818
+ 'padding-right': calc(var(--joy-layout-space) * 2),
5819
+ 'padding-top': var(--joy-layout-space),
5524
5820
  'shadow': unset unset unset unset unset,
5525
5821
  'shadow-blur': unset,
5526
5822
  'shadow-color': unset,
@@ -5805,13 +6101,13 @@ $drop-down-button-props: (
5805
6101
  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
5806
6102
  'min-width': 64px,
5807
6103
  'padding-bottom': var(--joy-layout-space),
5808
- 'padding-left': var(--joy-layout-space),
5809
- 'padding-right': var(--joy-layout-space),
6104
+ 'padding-left': calc(var(--joy-layout-space) * 2),
6105
+ 'padding-right': calc(var(--joy-layout-space) * 2),
5810
6106
  'padding-top': var(--joy-layout-space),
5811
6107
  'progress-ring-width': var(--joy-layout-thickness),
5812
6108
  'progress-thickness': var(--joy-layout-thickness),
5813
6109
  'ripple-color': unset,
5814
- 'ripple-duration': 200ms,
6110
+ 'ripple-duration': 0.20s,
5815
6111
  'shadow': unset unset unset unset unset,
5816
6112
  'shadow-blur': unset,
5817
6113
  'shadow-color': unset,
@@ -5838,7 +6134,7 @@ $drop-zone-props: (
5838
6134
  'background-color': var(--joy-scheme-background),
5839
6135
  'border-color': var(--joy-scheme-highlight),
5840
6136
  'border-radius': var(--joy-layout-radius),
5841
- 'border-style': solid,
6137
+ 'border-style': dashed,
5842
6138
  'border-width': var(--joy-layout-thickness),
5843
6139
  'font-family': unset,
5844
6140
  'font-letter-spacing': unset,
@@ -5896,6 +6192,46 @@ $dropdown-props: (
5896
6192
  'transition-property': unset,
5897
6193
  'translate': none
5898
6194
  );
6195
+ /**
6196
+ * ------------------------------------------------------------------------------
6197
+ * <auto-generated>
6198
+ * This code was generated by a tool.
6199
+ * Changes to this file may cause incorrect behavior and will be lost if
6200
+ * the code is regenerated.
6201
+ * </auto-generated>
6202
+ * ------------------------------------------------------------------------------
6203
+ */
6204
+ $duration-box-props: (
6205
+ 'background-color': var(--joy-scheme-background),
6206
+ 'border-color': var(--joy-scheme-highlight),
6207
+ 'border-radius': var(--joy-layout-radius),
6208
+ 'border-style': solid,
6209
+ 'border-width': var(--joy-layout-thickness),
6210
+ 'font-family': var(--joy-font-family),
6211
+ 'font-letter-spacing': unset,
6212
+ 'font-line-height': unset,
6213
+ 'font-size': var(--joy-typography-body1-font-size),
6214
+ 'font-text-decoration': unset,
6215
+ 'font-text-transform': unset,
6216
+ 'font-weight': normal,
6217
+ 'foreground-color': var(--joy-scheme-foreground),
6218
+ 'gap': var(--joy-layout-space),
6219
+ 'height': 56px,
6220
+ 'padding-bottom': var(--joy-layout-space),
6221
+ 'padding-left': calc(var(--joy-layout-space) * 1.5),
6222
+ 'padding-right': calc(var(--joy-layout-space) * 1.5),
6223
+ 'padding-top': var(--joy-layout-space),
6224
+ 'shadow': unset unset unset unset unset,
6225
+ 'shadow-blur': unset,
6226
+ 'shadow-color': unset,
6227
+ 'shadow-offset-x': unset,
6228
+ 'shadow-offset-y': unset,
6229
+ 'shadow-spread': unset,
6230
+ 'transition-duration': var(--joy-duration-short),
6231
+ 'transition-mode': ease,
6232
+ 'transition-property': (background-color, color, border-color, opacity, box-shadow),
6233
+ 'translate': none
6234
+ );
5899
6235
  /**
5900
6236
  * ------------------------------------------------------------------------------
5901
6237
  * <auto-generated>
@@ -6251,13 +6587,13 @@ $error-props: (
6251
6587
  'border-radius': 0px,
6252
6588
  'border-style': solid,
6253
6589
  'border-width': 0px,
6254
- 'font-family': var(--joy-font-family),
6255
- 'font-letter-spacing': unset,
6256
- 'font-line-height': unset,
6257
- 'font-size': 12px,
6258
- 'font-text-decoration': unset,
6259
- 'font-text-transform': unset,
6260
- 'font-weight': normal,
6590
+ 'font-family': var(--joy-typography-supporting-font-family),
6591
+ 'font-letter-spacing': var(--joy-typography-supporting-letter-spacing),
6592
+ 'font-line-height': var(--joy-typography-supporting-line-height),
6593
+ 'font-size': var(--joy-typography-supporting-font-size),
6594
+ 'font-text-decoration': var(--joy-typography-supporting-text-decoration),
6595
+ 'font-text-transform': var(--joy-typography-supporting-text-transform),
6596
+ 'font-weight': var(--joy-typography-supporting-font-weight),
6261
6597
  'foreground-color': var(--joy-color-danger-500),
6262
6598
  'gap': 4px,
6263
6599
  'padding-bottom': unset,
@@ -6292,7 +6628,6 @@ $error-state-props: (
6292
6628
  'font-text-decoration': unset,
6293
6629
  'font-text-transform': unset,
6294
6630
  'font-weight': unset,
6295
- 'foreground-color': unset,
6296
6631
  'gap': var(--joy-layout-space),
6297
6632
  'header-font-family': var(--joy-font-family),
6298
6633
  'header-font-letter-spacing': var(--joy-typography-body1-letter-spacing),
@@ -6379,7 +6714,7 @@ $expander-props: (
6379
6714
  'padding-right': calc(var(--joy-layout-space) * 2),
6380
6715
  'padding-top': var(--joy-layout-space),
6381
6716
  'ripple-color': unset,
6382
- 'ripple-duration': 200ms,
6717
+ 'ripple-duration': 0.20s,
6383
6718
  'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
6384
6719
  'shadow-blur': var(--joy-elevation-light-blur-1),
6385
6720
  'shadow-color': var(--joy-elevation-light-color-1),
@@ -6389,7 +6724,7 @@ $expander-props: (
6389
6724
  'transition-duration': var(--joy-duration-short),
6390
6725
  'transition-mode': ease,
6391
6726
  'transition-property': (background-color, color, border-color, box-shadow, opacity, box-shadow, transform, margin),
6392
- 'translate': unset
6727
+ 'translate': none
6393
6728
  );
6394
6729
  /**
6395
6730
  * ------------------------------------------------------------------------------
@@ -6515,7 +6850,7 @@ $file-picker-props: (
6515
6850
  'background-color': unset,
6516
6851
  'border-color': unset,
6517
6852
  'border-radius': unset,
6518
- 'border-style': unset,
6853
+ 'border-style': solid,
6519
6854
  'border-width': unset,
6520
6855
  'font-family': unset,
6521
6856
  'font-letter-spacing': unset,
@@ -6554,7 +6889,7 @@ $file-upload-props: (
6554
6889
  'background-color': unset,
6555
6890
  'border-color': unset,
6556
6891
  'border-radius': unset,
6557
- 'border-style': unset,
6892
+ 'border-style': none,
6558
6893
  'border-width': unset,
6559
6894
  'font-family': unset,
6560
6895
  'font-letter-spacing': unset,
@@ -6593,7 +6928,7 @@ $file-upload-item-props: (
6593
6928
  'background-color': unset,
6594
6929
  'border-color': unset,
6595
6930
  'border-radius': unset,
6596
- 'border-style': unset,
6931
+ 'border-style': solid,
6597
6932
  'border-width': unset,
6598
6933
  'font-family': unset,
6599
6934
  'font-letter-spacing': unset,
@@ -6678,11 +7013,11 @@ $floating-props: (
6678
7013
  'font-text-transform': var(--joy-typography-body1-text-transform),
6679
7014
  'font-weight': var(--joy-typography-body1-font-weight),
6680
7015
  'foreground-color': var(--joy-scheme-foreground),
6681
- 'gap': 0px,
6682
- 'padding-bottom': 0px,
6683
- 'padding-left': 0px,
6684
- 'padding-right': 0px,
6685
- 'padding-top': 0px,
7016
+ 'gap': none,
7017
+ 'padding-bottom': none,
7018
+ 'padding-left': none,
7019
+ 'padding-right': none,
7020
+ 'padding-top': none,
6686
7021
  'shadow': unset unset unset unset unset,
6687
7022
  'shadow-blur': unset,
6688
7023
  'shadow-color': unset,
@@ -6732,7 +7067,7 @@ $floating-action-button-props: (
6732
7067
  'padding-top': var(--joy-layout-space),
6733
7068
  'progress-ring-width': var(--joy-layout-thickness),
6734
7069
  'ripple-color': unset,
6735
- 'ripple-duration': 200ms,
7070
+ 'ripple-duration': 0.20s,
6736
7071
  'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
6737
7072
  'shadow-blur': var(--joy-elevation-semilight-blur-0),
6738
7073
  'shadow-color': var(--joy-elevation-semilight-color-0),
@@ -6856,7 +7191,7 @@ $flow-board-props: (
6856
7191
  */
6857
7192
  $flow-board-column-props: (
6858
7193
  'background-color': var(--joy-scheme-surface),
6859
- 'body-padding': 8px,
7194
+ 'body-padding': var(--joy-layout-space),
6860
7195
  'border-radius': var(--joy-layout-radius),
6861
7196
  'font-family': unset,
6862
7197
  'font-letter-spacing': unset,
@@ -6865,10 +7200,10 @@ $flow-board-column-props: (
6865
7200
  'font-text-decoration': unset,
6866
7201
  'font-text-transform': unset,
6867
7202
  'font-weight': unset,
6868
- 'footer-padding': 8px 12px,
7203
+ 'footer-padding': var(--joy-layout-space) calc(var(--joy-layout-space) * 1.5),
6869
7204
  'gap': var(--joy-layout-space),
6870
- 'header-background-color': transparent,
6871
- 'header-padding': 8px 12px,
7205
+ 'header-background-color': var(--joy-scheme-transparent),
7206
+ 'header-padding': var(--joy-layout-space) calc(var(--joy-layout-space) * 1.5),
6872
7207
  'max-width': 320px,
6873
7208
  'min-width': 280px,
6874
7209
  'padding': 0px,
@@ -6956,8 +7291,8 @@ $flow-board-column-item-props: (
6956
7291
  'font-text-transform': unset,
6957
7292
  'font-weight': unset,
6958
7293
  'foreground-color': var(--joy-scheme-foreground),
6959
- 'gap': 8px,
6960
- 'padding': 12px,
7294
+ 'gap': var(--joy-layout-space),
7295
+ 'padding': calc(var(--joy-layout-space) * 1.5),
6961
7296
  'padding-bottom': unset,
6962
7297
  'padding-left': unset,
6963
7298
  'padding-right': unset,
@@ -7046,12 +7381,12 @@ $focus-ring-props: (
7046
7381
  'padding-left': unset,
7047
7382
  'padding-right': unset,
7048
7383
  'padding-top': unset,
7049
- 'shadow': unset unset unset unset unset,
7050
- 'shadow-blur': unset,
7051
- 'shadow-color': unset,
7052
- 'shadow-offset-x': unset,
7053
- 'shadow-offset-y': unset,
7054
- 'shadow-spread': unset,
7384
+ 'shadow': var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--focus-ring-width) var(--focus-ring-color),
7385
+ 'shadow-blur': var(--focus-ring-blur, 0),
7386
+ 'shadow-color': var(--focus-ring-color),
7387
+ 'shadow-offset-x': var(--focus-ring-x, 0),
7388
+ 'shadow-offset-y': var(--focus-ring-y, 0),
7389
+ 'shadow-spread': var(--focus-ring-width),
7055
7390
  'shape': 6px,
7056
7391
  'transition-duration': var(--joy-duration-short),
7057
7392
  'transition-mode': ease,
@@ -7250,7 +7585,6 @@ $form-props: (
7250
7585
  'font-line-height': unset,
7251
7586
  'font-size': unset,
7252
7587
  'font-text-decoration': unset,
7253
- 'font-text-trans': unset,
7254
7588
  'font-text-transform': unset,
7255
7589
  'font-weight': unset,
7256
7590
  'gap': unset,
@@ -7267,7 +7601,7 @@ $form-props: (
7267
7601
  'transition-duration': unset,
7268
7602
  'transition-mode': unset,
7269
7603
  'transition-property': (unset),
7270
- 'translate': unset
7604
+ 'translate': none
7271
7605
  );
7272
7606
  /**
7273
7607
  * ------------------------------------------------------------------------------
@@ -7301,7 +7635,7 @@ $form-field-props: (
7301
7635
  'transition-duration': unset,
7302
7636
  'transition-mode': unset,
7303
7637
  'transition-property': (unset),
7304
- 'translate': unset
7638
+ 'translate': none
7305
7639
  );
7306
7640
  /**
7307
7641
  * ------------------------------------------------------------------------------
@@ -7455,13 +7789,13 @@ $hint-props: (
7455
7789
  'border-radius': 0px,
7456
7790
  'border-style': solid,
7457
7791
  'border-width': 0px,
7458
- 'font-family': var(--joy-font-family),
7459
- 'font-letter-spacing': unset,
7460
- 'font-line-height': unset,
7461
- 'font-size': 12px,
7462
- 'font-text-decoration': unset,
7463
- 'font-text-transform': unset,
7464
- 'font-weight': normal,
7792
+ 'font-family': var(--joy-typography-supporting-font-family),
7793
+ 'font-letter-spacing': var(--joy-typography-supporting-letter-spacing),
7794
+ 'font-line-height': var(--joy-typography-supporting-line-height),
7795
+ 'font-size': var(--joy-typography-supporting-font-size),
7796
+ 'font-text-decoration': var(--joy-typography-supporting-text-decoration),
7797
+ 'font-text-transform': var(--joy-typography-supporting-text-transform),
7798
+ 'font-weight': var(--joy-typography-supporting-font-weight),
7465
7799
  'foreground-color': var(--joy-scheme-middlelight),
7466
7800
  'gap': unset,
7467
7801
  'padding-bottom': unset,
@@ -7497,23 +7831,22 @@ $icon-props: (
7497
7831
  'font-family': var(--joy-font-family),
7498
7832
  'font-letter-spacing': unset,
7499
7833
  'font-line-height': unset,
7500
- 'font-size': 12px,
7834
+ 'font-size': var(--joy-typography-body1-font-size),
7501
7835
  'font-text-decoration': unset,
7502
7836
  'font-text-transform': unset,
7503
- 'font-weight': normal,
7837
+ 'font-weight': var(--joy-typography-body1-font-weight),
7504
7838
  'foreground-color': var(--joy-scheme-foreground),
7505
- 'gap': 8px,
7506
- 'padding-bottom': 4px,
7507
- 'padding-left': 8px,
7508
- 'padding-right': 8px,
7509
- 'padding-top': 4px,
7839
+ 'gap': var(--joy-layout-space),
7840
+ 'padding-bottom': calc(var(--joy-layout-space) / 2),
7841
+ 'padding-left': var(--joy-layout-space),
7842
+ 'padding-right': var(--joy-layout-space),
7843
+ 'padding-top': calc(var(--joy-layout-space) / 2),
7510
7844
  'shadow': unset unset unset unset unset,
7511
7845
  'shadow-blur': unset,
7512
7846
  'shadow-color': unset,
7513
7847
  'shadow-offset-x': unset,
7514
7848
  'shadow-offset-y': unset,
7515
7849
  'shadow-spread': unset,
7516
- 'size': unset,
7517
7850
  'transition-duration': var(--joy-duration-short),
7518
7851
  'transition-mode': ease,
7519
7852
  'transition-property': (all),
@@ -7538,12 +7871,12 @@ $image-props: (
7538
7871
  'font-family': var(--joy-font-family),
7539
7872
  'font-letter-spacing': unset,
7540
7873
  'font-line-height': unset,
7541
- 'font-size': 12px,
7874
+ 'font-size': var(--joy-typography-body1-font-size),
7542
7875
  'font-text-decoration': unset,
7543
7876
  'font-text-transform': unset,
7544
- 'font-weight': normal,
7877
+ 'font-weight': var(--joy-typography-body1-font-weight),
7545
7878
  'foreground-color': var(--joy-scheme-foreground),
7546
- 'gap': 8px,
7879
+ 'gap': var(--joy-layout-space),
7547
7880
  'legend-font-family': var(--joy-font-family),
7548
7881
  'legend-font-letter-spacing': var(--joy-typography-caption-letter-spacing),
7549
7882
  'legend-font-line-height': var(--joy-typography-caption-line-height),
@@ -7551,17 +7884,17 @@ $image-props: (
7551
7884
  'legend-font-text-decoration': var(--joy-typography-caption-text-decoration),
7552
7885
  'legend-font-text-transform': var(--joy-typography-caption-text-transform),
7553
7886
  'legend-font-weight': var(--joy-typography-caption-font-weight),
7554
- 'padding-bottom': 16px,
7555
- 'padding-left': 16px,
7556
- 'padding-right': 16px,
7557
- 'padding-top': 16px,
7887
+ 'padding-bottom': calc(var(--joy-layout-space) * 2),
7888
+ 'padding-left': calc(var(--joy-layout-space) * 2),
7889
+ 'padding-right': calc(var(--joy-layout-space) * 2),
7890
+ 'padding-top': calc(var(--joy-layout-space) * 2),
7558
7891
  'shadow': unset unset unset unset unset,
7559
7892
  'shadow-blur': unset,
7560
7893
  'shadow-color': unset,
7561
7894
  'shadow-offset-x': unset,
7562
7895
  'shadow-offset-y': unset,
7563
7896
  'shadow-spread': unset,
7564
- 'thumbnail-blur': 20px,
7897
+ 'thumbnail-blur': 2px,
7565
7898
  'transition-duration': var(--joy-duration-short),
7566
7899
  'transition-mode': ease,
7567
7900
  'transition-property': (color, background-color, border-color, opacity, box-shadow),
@@ -7585,10 +7918,10 @@ $indicator-props: (
7585
7918
  'font-family': var(--joy-font-family),
7586
7919
  'font-letter-spacing': unset,
7587
7920
  'font-line-height': unset,
7588
- 'font-size': 12px,
7921
+ 'font-size': var(--joy-typography-body1-font-size),
7589
7922
  'font-text-decoration': unset,
7590
7923
  'font-text-transform': unset,
7591
- 'font-weight': normal,
7924
+ 'font-weight': var(--joy-typography-body1-font-weight),
7592
7925
  'foreground-color': var(--joy-scheme-middlelight),
7593
7926
  'gap': var(--joy-layout-space),
7594
7927
  'padding-bottom': unset,
@@ -7617,7 +7950,6 @@ $indicator-props: (
7617
7950
  */
7618
7951
  $ink-bar-props: (
7619
7952
  'background-color': var(--joy-scheme-background),
7620
- 'border-color': unset,
7621
7953
  'border-radius': calc(var(--ink-bar-thickness) / 2),
7622
7954
  'font-family': unset,
7623
7955
  'font-letter-spacing': unset,
@@ -7626,7 +7958,6 @@ $ink-bar-props: (
7626
7958
  'font-text-decoration': unset,
7627
7959
  'font-text-transform': unset,
7628
7960
  'font-weight': unset,
7629
- 'foreground-color': unset,
7630
7961
  'gap': unset,
7631
7962
  'padding-bottom': unset,
7632
7963
  'padding-left': unset,
@@ -7662,12 +7993,12 @@ $jumbotron-props: (
7662
7993
  'font-family': var(--joy-font-family),
7663
7994
  'font-letter-spacing': unset,
7664
7995
  'font-line-height': unset,
7665
- 'font-size': 16px,
7996
+ 'font-size': var(--joy-typography-body1-font-size),
7666
7997
  'font-text-decoration': unset,
7667
7998
  'font-text-transform': unset,
7668
- 'font-weight': normal,
7999
+ 'font-weight': var(--joy-typography-body1-font-weight),
7669
8000
  'foreground-color': var(--joy-scheme-foreground),
7670
- 'gap': 16px,
8001
+ 'gap': calc(var(--joy-layout-space) * 2),
7671
8002
  'padding-bottom': 32px,
7672
8003
  'padding-left': 32px,
7673
8004
  'padding-right': 32px,
@@ -7883,7 +8214,7 @@ $list-props: (
7883
8214
  'font-text-transform': var(--joy-typography-body1-text-transform),
7884
8215
  'font-weight': var(--joy-typography-body1-font-weight),
7885
8216
  'foreground-color': var(--joy-scheme-foreground),
7886
- 'gap': 8px,
8217
+ 'gap': var(--joy-layout-space),
7887
8218
  'padding-bottom': var(--joy-layout-spacing),
7888
8219
  'padding-left': calc(var(--joy-layout-spacing) * 2),
7889
8220
  'padding-right': calc(var(--joy-layout-spacing) * 2),
@@ -7926,13 +8257,13 @@ $list-item-props: (
7926
8257
  'font-text-transform': var(--joy-typography-body1-text-transform),
7927
8258
  'font-weight': var(--joy-typography-body1-font-weight),
7928
8259
  'foreground-color': var(--joy-scheme-foreground),
7929
- 'gap': 8px,
7930
- 'padding-bottom': 8px,
7931
- 'padding-left': 16px,
7932
- 'padding-right': 16px,
7933
- 'padding-top': 8px,
8260
+ 'gap': var(--joy-layout-space),
8261
+ 'padding-bottom': var(--joy-layout-space),
8262
+ 'padding-left': calc(var(--joy-layout-space) * 2),
8263
+ 'padding-right': calc(var(--joy-layout-space) * 2),
8264
+ 'padding-top': var(--joy-layout-space),
7934
8265
  'ripple-color': unset,
7935
- 'ripple-duration': 200ms,
8266
+ 'ripple-duration': 0.20s,
7936
8267
  'shadow': unset unset unset unset unset,
7937
8268
  'shadow-blur': unset,
7938
8269
  'shadow-color': unset,
@@ -7962,7 +8293,7 @@ $list-item-group-props: (
7962
8293
  'font-family': var(--joy-font-family),
7963
8294
  'font-letter-spacing': unset,
7964
8295
  'font-line-height': unset,
7965
- 'font-size': 16px,
8296
+ 'font-size': var(--joy-typography-caption-font-size),
7966
8297
  'font-text-decoration': unset,
7967
8298
  'font-text-transform': unset,
7968
8299
  'font-weight': normal,
@@ -8037,7 +8368,7 @@ $listing-item-props: (
8037
8368
  'font-text-transform': unset,
8038
8369
  'font-weight': var(--joy-typography-body1-font-weight),
8039
8370
  'foreground-color': var(--joy-scheme-foreground),
8040
- 'gap': 8px,
8371
+ 'gap': var(--joy-layout-space),
8041
8372
  'padding-bottom': 0px,
8042
8373
  'padding-left': 0px,
8043
8374
  'padding-right': 0px,
@@ -8189,7 +8520,7 @@ $marquee-props: (
8189
8520
  'shadow-offset-x': unset,
8190
8521
  'shadow-offset-y': unset,
8191
8522
  'shadow-spread': unset,
8192
- 'speed': unset,
8523
+ 'speed': calc(var(--joy-duration-long) * 10),
8193
8524
  'transition-duration': unset,
8194
8525
  'transition-mode': unset,
8195
8526
  'transition-property': unset,
@@ -8305,7 +8636,7 @@ $menu-item-props: (
8305
8636
  'padding-right': calc(var(--joy-layout-space) * 2),
8306
8637
  'padding-top': var(--joy-layout-space),
8307
8638
  'ripple-color': unset,
8308
- 'ripple-duration': 200ms,
8639
+ 'ripple-duration': 0.20s,
8309
8640
  'shadow': unset unset unset unset unset,
8310
8641
  'shadow-blur': unset,
8311
8642
  'shadow-color': unset,
@@ -8335,12 +8666,12 @@ $menu-item-group-props: (
8335
8666
  'font-family': var(--joy-font-family),
8336
8667
  'font-letter-spacing': unset,
8337
8668
  'font-line-height': unset,
8338
- 'font-size': 16px,
8669
+ 'font-size': var(--joy-typography-body1-font-size),
8339
8670
  'font-text-decoration': unset,
8340
8671
  'font-text-transform': unset,
8341
8672
  'font-weight': normal,
8342
8673
  'foreground-color': var(--joy-color-neutral-900),
8343
- 'gap': 8px,
8674
+ 'gap': var(--joy-layout-space),
8344
8675
  'header-font-family': var(--joy-font-family),
8345
8676
  'header-font-letter-spacing': var(--joy-typography-overline-letter-spacing),
8346
8677
  'header-font-line-height': var(--joy-typography-overline-line-height),
@@ -8348,10 +8679,14 @@ $menu-item-group-props: (
8348
8679
  'header-font-text-decoration': var(--joy-typography-overline-text-decoration),
8349
8680
  'header-font-text-transform': var(--joy-typography-overline-text-transform),
8350
8681
  'header-font-weight': var(--joy-typography-overline-font-weight),
8351
- 'padding-bottom': 8px,
8352
- 'padding-left': 16px,
8353
- 'padding-right': 16px,
8354
- 'padding-top': 8px,
8682
+ 'header-padding-bottom': var(--joy-layout-space),
8683
+ 'header-padding-left': calc(var(--joy-layout-space) * 2),
8684
+ 'header-padding-right': calc(var(--joy-layout-space) * 2),
8685
+ 'header-padding-top': calc(var(--joy-layout-space) * 2),
8686
+ 'padding-bottom': var(--joy-layout-space),
8687
+ 'padding-left': calc(var(--joy-layout-space) * 2),
8688
+ 'padding-right': calc(var(--joy-layout-space) * 2),
8689
+ 'padding-top': var(--joy-layout-space),
8355
8690
  'shadow': unset unset unset unset unset,
8356
8691
  'shadow-blur': unset,
8357
8692
  'shadow-color': unset,
@@ -8381,12 +8716,12 @@ $message-props: (
8381
8716
  'font-family': var(--joy-font-family),
8382
8717
  'font-letter-spacing': unset,
8383
8718
  'font-line-height': unset,
8384
- 'font-size': 16px,
8719
+ 'font-size': var(--joy-typography-body1-font-size),
8385
8720
  'font-text-decoration': unset,
8386
8721
  'font-text-transform': unset,
8387
8722
  'font-weight': normal,
8388
8723
  'foreground-color': var(--joy-scheme-foreground),
8389
- 'gap': 8px,
8724
+ 'gap': var(--joy-layout-space),
8390
8725
  'padding-bottom': var(--joy-layout-space),
8391
8726
  'padding-left': calc(var(--joy-layout-space) * 2),
8392
8727
  'padding-right': calc(var(--joy-layout-space) * 2),
@@ -8400,7 +8735,7 @@ $message-props: (
8400
8735
  'transition-duration': var(--joy-duration-short),
8401
8736
  'transition-mode': ease,
8402
8737
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
8403
- 'translate': unset
8738
+ 'translate': none
8404
8739
  );
8405
8740
  /**
8406
8741
  * ------------------------------------------------------------------------------
@@ -8412,27 +8747,50 @@ $message-props: (
8412
8747
  * ------------------------------------------------------------------------------
8413
8748
  */
8414
8749
  $message-box-props: (
8415
- 'font-family': unset,
8416
- 'font-letter-spacing': unset,
8417
- 'font-line-height': unset,
8418
- 'font-size': unset,
8419
- 'font-text-decoration': unset,
8420
- 'font-text-transform': unset,
8421
- 'font-weight': unset,
8422
- 'gap': unset,
8423
- 'padding-bottom': unset,
8424
- 'padding-left': unset,
8425
- 'padding-right': unset,
8426
- 'padding-top': unset,
8427
- 'shadow': unset unset unset unset unset,
8428
- 'shadow-blur': unset,
8429
- 'shadow-color': unset,
8430
- 'shadow-offset-x': unset,
8431
- 'shadow-offset-y': unset,
8432
- 'shadow-spread': unset,
8433
- 'transition-duration': unset,
8434
- 'transition-mode': unset,
8435
- 'transition-property': unset,
8750
+ 'background-color': var(--joy-scheme-surface),
8751
+ 'border-color': var(--joy-scheme-highlight),
8752
+ 'border-radius': var(--joy-layout-radius),
8753
+ 'border-style': none,
8754
+ 'border-width': 0px,
8755
+ 'divider-height': 1px,
8756
+ 'font-family': var(--joy-font-family),
8757
+ 'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
8758
+ 'font-line-height': var(--joy-typography-body1-line-height),
8759
+ 'font-size': var(--joy-typography-body1-font-size),
8760
+ 'font-text-decoration': var(--joy-typography-body1-text-decoration),
8761
+ 'font-text-transform': var(--joy-typography-body1-text-transform),
8762
+ 'font-weight': var(--joy-typography-body1-font-weight),
8763
+ 'foreground-color': var(--joy-scheme-foreground),
8764
+ 'gap': var(--joy-layout-space),
8765
+ 'header-font-family': var(--joy-font-family),
8766
+ 'header-font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
8767
+ 'header-font-line-height': var(--joy-typography-headline6-line-height),
8768
+ 'header-font-size': var(--joy-typography-headline6-font-size),
8769
+ 'header-font-text-decoration': var(--joy-typography-headline6-text-decoration),
8770
+ 'header-font-text-transform': var(--joy-typography-headline6-text-transform),
8771
+ 'header-font-weight': var(--joy-typography-headline6-font-weight),
8772
+ 'header-foreground-color': var(--joy-scheme-foreground),
8773
+ 'padding-bottom': var(--joy-layout-space),
8774
+ 'padding-left': calc(var(--joy-layout-space)*2),
8775
+ 'padding-right': calc(var(--joy-layout-space)*2),
8776
+ 'padding-top': var(--joy-layout-space),
8777
+ 'shadow': var(--joy-elevation-regular-offset-x-0) var(--joy-elevation-regular-offset-y-0) var(--joy-elevation-regular-blur-0) var(--joy-elevation-regular-spread-0) var(--joy-elevation-regular-color-0),
8778
+ 'shadow-blur': var(--joy-elevation-regular-blur-0),
8779
+ 'shadow-color': var(--joy-elevation-regular-color-0),
8780
+ 'shadow-offset-x': var(--joy-elevation-regular-offset-x-0),
8781
+ 'shadow-offset-y': var(--joy-elevation-regular-offset-y-0),
8782
+ 'shadow-spread': var(--joy-elevation-regular-spread-0),
8783
+ 'sub-header-font-family': var(--joy-font-family),
8784
+ 'sub-header-font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
8785
+ 'sub-header-font-line-height': var(--joy-typography-subtitle2-line-height),
8786
+ 'sub-header-font-size': var(--joy-typography-subtitle2-font-size),
8787
+ 'sub-header-font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
8788
+ 'sub-header-font-text-transform': var(--joy-typography-subtitle2-text-transform),
8789
+ 'sub-header-font-weight': var(--joy-typography-subtitle2-font-weight),
8790
+ 'sub-header-foreground-color': var(--joy-scheme-middlelight),
8791
+ 'transition-duration': var(--joy-duration-short),
8792
+ 'transition-mode': ease,
8793
+ 'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
8436
8794
  'translate': none
8437
8795
  );
8438
8796
  /**
@@ -8484,7 +8842,7 @@ $meter-bar-props: (
8484
8842
  $meter-ring-props: (
8485
8843
  'background-color': var(--joy-scheme-highlight),
8486
8844
  'border-color': var(--joy-scheme-highlight),
8487
- 'border-radius': 16px,
8845
+ 'border-radius': none,
8488
8846
  'border-style': solid,
8489
8847
  'border-width': 0px,
8490
8848
  'fill-color': var(--joy-color-info-500),
@@ -8495,16 +8853,16 @@ $meter-ring-props: (
8495
8853
  'font-family': var(--joy-font-family),
8496
8854
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
8497
8855
  'font-line-height': var(--joy-typography-body2-line-height),
8498
- 'font-size': 12px,
8856
+ 'font-size': var(--joy-typography-body2-line-height),
8499
8857
  'font-text-decoration': var(--joy-typography-body2-text-decoration),
8500
8858
  'font-text-transform': var(--joy-typography-body2-text-transform),
8501
8859
  'font-weight': normal,
8502
8860
  'foreground-color': var(--joy-color-neutral-900),
8503
- 'gap': 8px,
8861
+ 'gap': var(--joy-layout-space),
8504
8862
  'marker-color': var(--joy-scheme-foreground),
8505
8863
  'padding-bottom': 4px,
8506
- 'padding-left': 8px,
8507
- 'padding-right': 8px,
8864
+ 'padding-left': var(--joy-layout-space),
8865
+ 'padding-right': var(--joy-layout-space),
8508
8866
  'padding-top': 4px,
8509
8867
  'radius': 60px,
8510
8868
  'shadow': unset unset unset unset unset,
@@ -8529,7 +8887,6 @@ $meter-ring-props: (
8529
8887
  * ------------------------------------------------------------------------------
8530
8888
  */
8531
8889
  $number-props: (
8532
- 'alignment': unset,
8533
8890
  'font-family': var(--joy-font-family),
8534
8891
  'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
8535
8892
  'font-line-height': var(--joy-typography-body1-line-height),
@@ -8568,11 +8925,10 @@ $number-box-props: (
8568
8925
  'border-radius': var(--joy-layout-radius),
8569
8926
  'border-style': solid,
8570
8927
  'border-width': var(--joy-layout-thickness),
8571
- 'focus-ring-outward-offset': unset,
8572
8928
  'font-family': var(--joy-font-family),
8573
8929
  'font-letter-spacing': unset,
8574
8930
  'font-line-height': unset,
8575
- 'font-size': 16px,
8931
+ 'font-size': var(--joy-typography-body1-font-size),
8576
8932
  'font-text-decoration': unset,
8577
8933
  'font-text-transform': unset,
8578
8934
  'font-weight': normal,
@@ -8604,8 +8960,6 @@ $number-box-props: (
8604
8960
  * ------------------------------------------------------------------------------
8605
8961
  */
8606
8962
  $number-counter-props: (
8607
- 'alignment': unset,
8608
- 'duration': unset,
8609
8963
  'font-family': var(--joy-font-family),
8610
8964
  'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
8611
8965
  'font-line-height': var(--joy-typography-body1-line-height),
@@ -8613,9 +8967,7 @@ $number-counter-props: (
8613
8967
  'font-text-decoration': var(--joy-typography-body1-text-decoration),
8614
8968
  'font-text-transform': var(--joy-typography-body1-text-transform),
8615
8969
  'font-weight': var(--joy-typography-body1-font-weight),
8616
- 'from': unset,
8617
8970
  'gap': 0px,
8618
- 'n': unset,
8619
8971
  'padding-bottom': 0px,
8620
8972
  'padding-left': 0px,
8621
8973
  'padding-right': 0px,
@@ -8626,8 +8978,6 @@ $number-counter-props: (
8626
8978
  'shadow-offset-x': unset,
8627
8979
  'shadow-offset-y': unset,
8628
8980
  'shadow-spread': unset,
8629
- 'timing': unset,
8630
- 'to': unset,
8631
8981
  'transition-duration': var(--joy-duration-short),
8632
8982
  'transition-mode': ease,
8633
8983
  'transition-property': (color, opacity, box-shadow),
@@ -8685,8 +9035,6 @@ $page-content-props: (
8685
9035
  'font-weight': unset,
8686
9036
  'gap': unset,
8687
9037
  'inset': calc(var(--joy-layout-space) * 2),
8688
- 'left': unset,
8689
- 'max-width': unset,
8690
9038
  'padding-bottom': unset,
8691
9039
  'padding-left': unset,
8692
9040
  'padding-right': unset,
@@ -8700,8 +9048,7 @@ $page-content-props: (
8700
9048
  'transition-duration': unset,
8701
9049
  'transition-mode': unset,
8702
9050
  'transition-property': unset,
8703
- 'translate': none,
8704
- 'width': unset
9051
+ 'translate': none
8705
9052
  );
8706
9053
  /**
8707
9054
  * ------------------------------------------------------------------------------
@@ -8714,7 +9061,6 @@ $page-content-props: (
8714
9061
  */
8715
9062
  $page-header-props: (
8716
9063
  'background-color': var(--joy-scheme-transparent),
8717
- 'border-color': unset,
8718
9064
  'font-family': var(--joy-font-family),
8719
9065
  'font-letter-spacing': var(--joy-typography-headline4-letter-spacing),
8720
9066
  'font-line-height': var(--joy-typography-headline4-line-height),
@@ -8766,10 +9112,10 @@ $page-menu-props: (
8766
9112
  'gap': calc(var(--joy-layout-space) * 2),
8767
9113
  'height': 64px,
8768
9114
  'line-height': 28px,
8769
- 'padding-bottom': 8px,
8770
- 'padding-left': 12px,
8771
- 'padding-right': 12px,
8772
- 'padding-top': 8px,
9115
+ 'padding-bottom': var(--joy-layout-space),
9116
+ 'padding-left': calc(var(--joy-layout-space) * 1.5),
9117
+ 'padding-right': calc(var(--joy-layout-space) * 1.5),
9118
+ 'padding-top': var(--joy-layout-space),
8773
9119
  'shadow': unset unset unset unset unset,
8774
9120
  'shadow-blur': unset,
8775
9121
  'shadow-color': unset,
@@ -8902,7 +9248,7 @@ $password-box-props: (
8902
9248
  'font-family': var(--joy-font-family),
8903
9249
  'font-letter-spacing': unset,
8904
9250
  'font-line-height': unset,
8905
- 'font-size': 16px,
9251
+ 'font-size': var(--joy-typography-body1-font-size),
8906
9252
  'font-text-decoration': unset,
8907
9253
  'font-text-transform': unset,
8908
9254
  'font-weight': normal,
@@ -8981,12 +9327,11 @@ $persona-props: (
8981
9327
  'font-text-transform': unset,
8982
9328
  'font-weight': 600,
8983
9329
  'foreground-color': var(--joy-scheme-foreground),
8984
- 'gap': 8px,
9330
+ 'gap': var(--joy-layout-space),
8985
9331
  'padding-bottom': 4px,
8986
- 'padding-left': 8px,
8987
- 'padding-right': 8px,
9332
+ 'padding-left': var(--joy-layout-space),
9333
+ 'padding-right': var(--joy-layout-space),
8988
9334
  'padding-top': 4px,
8989
- 'presence-color': unset,
8990
9335
  'shadow': unset unset unset unset unset,
8991
9336
  'shadow-blur': unset,
8992
9337
  'shadow-color': unset,
@@ -9029,7 +9374,7 @@ $perspective-props: (
9029
9374
  'transition-duration': unset,
9030
9375
  'transition-mode': unset,
9031
9376
  'transition-property': (unset),
9032
- 'translate': unset
9377
+ 'translate': none
9033
9378
  );
9034
9379
  /**
9035
9380
  * ------------------------------------------------------------------------------
@@ -9049,7 +9394,7 @@ $pin-box-props: (
9049
9394
  'font-family': var(--joy-font-family),
9050
9395
  'font-letter-spacing': unset,
9051
9396
  'font-line-height': unset,
9052
- 'font-size': 16px,
9397
+ 'font-size': var(--joy-typography-body1-font-size),
9053
9398
  'font-text-decoration': unset,
9054
9399
  'font-text-transform': unset,
9055
9400
  'font-weight': normal,
@@ -9147,7 +9492,7 @@ $placeholder-props: (
9147
9492
  'transition-duration': var(--joy-duration-short),
9148
9493
  'transition-mode': ease,
9149
9494
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
9150
- 'translate': unset
9495
+ 'translate': none
9151
9496
  );
9152
9497
  /**
9153
9498
  * ------------------------------------------------------------------------------
@@ -9287,6 +9632,61 @@ $portal-projection-props: (
9287
9632
  'transition-property': unset,
9288
9633
  'translate': none
9289
9634
  );
9635
+ /**
9636
+ * ------------------------------------------------------------------------------
9637
+ * <auto-generated>
9638
+ * This code was generated by a tool.
9639
+ * Changes to this file may cause incorrect behavior and will be lost if
9640
+ * the code is regenerated.
9641
+ * </auto-generated>
9642
+ * ------------------------------------------------------------------------------
9643
+ */
9644
+ $press-button-props: (
9645
+ 'background-color': var(--joy-scheme-background),
9646
+ 'border-color': var(--joy-scheme-highlight),
9647
+ 'border-radius': var(--joy-layout-radius),
9648
+ 'border-style': solid,
9649
+ 'border-width': var(--joy-layout-thickness),
9650
+ 'focus-ring-active-width': 8px,
9651
+ 'focus-ring-color': unset,
9652
+ 'focus-ring-inward-offset': 2px,
9653
+ 'focus-ring-outward-offset': 2px,
9654
+ 'font-family': var(--joy-typography-button-font-family),
9655
+ 'font-letter-spacing': var(--joy-typography-button-letter-spacing),
9656
+ 'font-line-height': var(--joy-typography-button-line-height),
9657
+ 'font-size': var(--joy-typography-button-font-size),
9658
+ 'font-text-decoration': var(--joy-typography-button-text-decoration),
9659
+ 'font-text-transform': var(--joy-typography-button-text-transform),
9660
+ 'font-weight': var(--joy-typography-button-font-weight),
9661
+ 'foreground-color': var(--joy-scheme-foreground),
9662
+ 'gap': var(--joy-layout-space),
9663
+ 'height': auto,
9664
+ 'icon-min-width': 36px,
9665
+ 'icon-min-height': 36px,
9666
+ 'line-height': calc(var(--press-button-font-line-height) - 4px),
9667
+ 'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
9668
+ 'min-width': 64px,
9669
+ 'padding-bottom': var(--joy-layout-space),
9670
+ 'padding-left': calc(var(--joy-layout-space) * 2),
9671
+ 'padding-right': calc(var(--joy-layout-space) * 2),
9672
+ 'padding-top': var(--joy-layout-space),
9673
+ 'progress-fill-color': currentColor,
9674
+ 'progress-ring-width': var(--joy-layout-thickness),
9675
+ 'progress-thickness': var(--joy-layout-thickness),
9676
+ 'ripple-color': unset,
9677
+ 'ripple-duration': 0.20s,
9678
+ 'shadow': unset unset unset unset unset,
9679
+ 'shadow-blur': unset,
9680
+ 'shadow-color': unset,
9681
+ 'shadow-offset-x': unset,
9682
+ 'shadow-offset-y': unset,
9683
+ 'shadow-spread': unset,
9684
+ 'transition-duration': var(--joy-duration-short),
9685
+ 'transition-mode': ease,
9686
+ 'transition-property': (background-color, color, border-color, opacity, box-shadow),
9687
+ 'translate': none,
9688
+ 'width': auto
9689
+ );
9290
9690
  /**
9291
9691
  * ------------------------------------------------------------------------------
9292
9692
  * <auto-generated>
@@ -9309,7 +9709,6 @@ $progress-bar-props: (
9309
9709
  'padding-left': unset,
9310
9710
  'padding-right': unset,
9311
9711
  'padding-top': unset,
9312
- 'segment-gap': unset,
9313
9712
  'shadow': unset unset unset unset unset,
9314
9713
  'shadow-blur': unset,
9315
9714
  'shadow-color': unset,
@@ -9333,22 +9732,22 @@ $progress-bar-props: (
9333
9732
  $progress-ring-props: (
9334
9733
  'background-color': var(--joy-scheme-highlight),
9335
9734
  'border-color': var(--joy-scheme-highlight),
9336
- 'border-radius': 16px,
9735
+ 'border-radius': none,
9337
9736
  'border-style': solid,
9338
9737
  'border-width': 0px,
9339
9738
  'fill-color': var(--joy-scheme-foreground),
9340
9739
  'font-family': var(--joy-font-family),
9341
9740
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
9342
9741
  'font-line-height': var(--joy-typography-body2-line-height),
9343
- 'font-size': 12px,
9742
+ 'font-size': var(--joy-typography-body2-font-size),
9344
9743
  'font-text-decoration': var(--joy-typography-body2-text-decoration),
9345
9744
  'font-text-transform': var(--joy-typography-body2-text-transform),
9346
9745
  'font-weight': normal,
9347
9746
  'foreground-color': var(--joy-color-neutral-900),
9348
- 'gap': 8px,
9747
+ 'gap': var(--joy-layout-space),
9349
9748
  'padding-bottom': 4px,
9350
- 'padding-left': 8px,
9351
- 'padding-right': 8px,
9749
+ 'padding-left': var(--joy-layout-space),
9750
+ 'padding-right': var(--joy-layout-space),
9352
9751
  'padding-top': 4px,
9353
9752
  'radius': 60px,
9354
9753
  'shadow': unset unset unset unset unset,
@@ -9426,11 +9825,11 @@ $radio-props: (
9426
9825
  'font-text-transform': var(--joy-typography-body1-text-transform),
9427
9826
  'font-weight': var(--joy-typography-body1-font-weight),
9428
9827
  'foreground-color': var(--joy-color-neutral-900),
9429
- 'gap': 12px,
9430
- 'padding-bottom': 8px,
9431
- 'padding-left': 12px,
9432
- 'padding-right': 12px,
9433
- 'padding-top': 8px,
9828
+ 'gap': calc(var(--joy-layout-space) * 1.5),
9829
+ 'padding-bottom': var(--joy-layout-space),
9830
+ 'padding-left': calc(var(--joy-layout-space) * 1.5),
9831
+ 'padding-right': calc(var(--joy-layout-space) * 1.5),
9832
+ 'padding-top': var(--joy-layout-space),
9434
9833
  'shadow': unset unset unset unset unset,
9435
9834
  'shadow-blur': unset,
9436
9835
  'shadow-color': unset,
@@ -9455,7 +9854,7 @@ $radio-group-props: (
9455
9854
  'background-color': unset,
9456
9855
  'border-color': unset,
9457
9856
  'border-radius': unset,
9458
- 'border-style': unset,
9857
+ 'border-style': none,
9459
9858
  'border-width': unset,
9460
9859
  'font-family': var(--joy-font-family),
9461
9860
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
@@ -9494,7 +9893,7 @@ $rating-props: (
9494
9893
  'background-color': var(--joy-scheme-transparent),
9495
9894
  'border-color': var(--joy-scheme-highlight),
9496
9895
  'border-radius': unset,
9497
- 'border-style': unset,
9896
+ 'border-style': none,
9498
9897
  'border-width': unset,
9499
9898
  'font-family': unset,
9500
9899
  'font-letter-spacing': unset,
@@ -9604,7 +10003,7 @@ $repeat-button-props: (
9604
10003
  'focus-ring-active-width': 8px,
9605
10004
  'focus-ring-color': unset,
9606
10005
  'focus-ring-inward-offset': 2px,
9607
- 'focus-ring-outward-offset': unset,
10006
+ 'focus-ring-outward-offset': 2px,
9608
10007
  'font-family': var(--joy-font-family),
9609
10008
  'font-letter-spacing': var(--joy-typography-button-letter-spacing),
9610
10009
  'font-line-height': var(--joy-typography-button-line-height),
@@ -9621,13 +10020,13 @@ $repeat-button-props: (
9621
10020
  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
9622
10021
  'min-width': 64px,
9623
10022
  'padding-bottom': var(--joy-layout-space),
9624
- 'padding-left': var(--joy-layout-space),
9625
- 'padding-right': var(--joy-layout-space),
10023
+ 'padding-left': calc(var(--joy-layout-space) * 2),
10024
+ 'padding-right': calc(var(--joy-layout-space) * 2),
9626
10025
  'padding-top': var(--joy-layout-space),
9627
10026
  'progress-ring-width': var(--joy-layout-thickness),
9628
10027
  'progress-thickness': var(--joy-layout-thickness),
9629
10028
  'ripple-color': unset,
9630
- 'ripple-duration': 200ms,
10029
+ 'ripple-duration': 0.20s,
9631
10030
  'shadow': unset unset unset unset unset,
9632
10031
  'shadow-blur': unset,
9633
10032
  'shadow-color': unset,
@@ -9770,16 +10169,16 @@ $ribbon-props: (
9770
10169
  'font-family': var(--joy-font-family),
9771
10170
  'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
9772
10171
  'font-line-height': unset,
9773
- 'font-size': 16px,
10172
+ 'font-size': var(--joy-typography-caption-font-size),
9774
10173
  'font-text-decoration': unset,
9775
10174
  'font-text-transform': unset,
9776
10175
  'font-weight': normal,
9777
10176
  'foreground-color': var(--joy-scheme-foreground),
9778
- 'gap': 0px,
9779
- 'padding-bottom': 4px,
9780
- 'padding-left': 8px,
9781
- 'padding-right': 8px,
9782
- 'padding-top': 4px,
10177
+ 'gap': none,
10178
+ 'padding-bottom': calc(var(--joy-layout-space) / 2),
10179
+ 'padding-left': var(--joy-layout-space),
10180
+ 'padding-right': var(--joy-layout-space),
10181
+ 'padding-top': calc(var(--joy-layout-space) / 2),
9783
10182
  'shadow': unset unset unset unset unset,
9784
10183
  'shadow-blur': unset,
9785
10184
  'shadow-color': unset,
@@ -9806,11 +10205,10 @@ $rich-text-box-props: (
9806
10205
  'border-radius': var(--joy-layout-radius),
9807
10206
  'border-style': solid,
9808
10207
  'border-width': var(--joy-layout-thickness),
9809
- 'focus-ring-outward-offset': unset,
9810
10208
  'font-family': var(--joy-font-family),
9811
10209
  'font-letter-spacing': unset,
9812
10210
  'font-line-height': unset,
9813
- 'font-size': 16px,
10211
+ 'font-size': var(--joy-typography-body1-font-size),
9814
10212
  'font-text-decoration': unset,
9815
10213
  'font-text-transform': unset,
9816
10214
  'font-weight': normal,
@@ -9827,7 +10225,6 @@ $rich-text-box-props: (
9827
10225
  'shadow-offset-x': unset,
9828
10226
  'shadow-offset-y': unset,
9829
10227
  'shadow-spread': unset,
9830
- 'toolbox-border-color': unset,
9831
10228
  'transition-duration': var(--joy-duration-short),
9832
10229
  'transition-mode': ease,
9833
10230
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -9846,7 +10243,7 @@ $rich-text-box-toolbox-props: (
9846
10243
  'background-color': var(--joy-scheme-background),
9847
10244
  'border-color': var(--joy-scheme-highlight),
9848
10245
  'border-radius': unset,
9849
- 'border-style': unset,
10246
+ 'border-style': solid,
9850
10247
  'border-width': unset,
9851
10248
  'font-family': unset,
9852
10249
  'font-letter-spacing': unset,
@@ -9857,7 +10254,6 @@ $rich-text-box-toolbox-props: (
9857
10254
  'font-weight': unset,
9858
10255
  'foreground-color': unset,
9859
10256
  'gap': var(--joy-layout-space),
9860
- 'orientation': unset,
9861
10257
  'padding-bottom': unset,
9862
10258
  'padding-left': unset,
9863
10259
  'padding-right': unset,
@@ -10073,7 +10469,7 @@ $scale-props: (
10073
10469
  'transition-duration': unset,
10074
10470
  'transition-mode': unset,
10075
10471
  'transition-property': (unset),
10076
- 'translate': unset
10472
+ 'translate': none
10077
10473
  );
10078
10474
  /**
10079
10475
  * ------------------------------------------------------------------------------
@@ -10296,7 +10692,7 @@ $scheduler-event-props: (
10296
10692
  'font-weight': var(--joy-typography-caption-font-weight),
10297
10693
  'foreground-color': var(--joy-scheme-foreground),
10298
10694
  'gap': unset,
10299
- 'hover-background-color': var(--mosaik-scheme-surface),
10695
+ 'hover-background-color': var(--joy-scheme-surface),
10300
10696
  'month-border-radius': var(--joy-layout-radius),
10301
10697
  'month-font-size': var(--joy-typography-caption-font-size),
10302
10698
  'month-gap': calc(var(--joy-layout-space) / 2),
@@ -10309,7 +10705,7 @@ $scheduler-event-props: (
10309
10705
  'padding-right': unset,
10310
10706
  'padding-top': unset,
10311
10707
  'ripple-color': unset,
10312
- 'ripple-duration': 200ms,
10708
+ 'ripple-duration': 0.20s,
10313
10709
  'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
10314
10710
  'shadow-blur': var(--joy-elevation-light-blur-1),
10315
10711
  'shadow-color': var(--joy-elevation-light-color-1),
@@ -10401,7 +10797,7 @@ $scheduler-month-view-props: (
10401
10797
  */
10402
10798
  $scheduler-now-indicator-props: (
10403
10799
  'color': var(--joy-color-danger-500),
10404
- 'dot-size': 8px,
10800
+ 'dot-size': var(--joy-layout-space),
10405
10801
  'font-family': unset,
10406
10802
  'font-letter-spacing': unset,
10407
10803
  'font-line-height': unset,
@@ -10597,7 +10993,6 @@ $scrub-slider-props: (
10597
10993
  'border-radius': var(--joy-layout-radius),
10598
10994
  'border-style': solid,
10599
10995
  'border-width': var(--joy-layout-thickness),
10600
- 'component-name-thumb-background-color': unset,
10601
10996
  'font-family': var(--joy-font-family),
10602
10997
  'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
10603
10998
  'font-line-height': var(--joy-typography-body1-line-height),
@@ -10624,16 +11019,12 @@ $scrub-slider-props: (
10624
11019
  'thumb-border-width': var(--joy-layout-thickness),
10625
11020
  'thumb-foreground-color': var(--joy-scheme-highlight),
10626
11021
  'thumb-size': 18px,
10627
- 'tick-bar-border-color': unset,
10628
- 'tick-bar-foreground-color': unset,
10629
- 'tick-bar-tick-height': unset,
10630
- 'tick-bar-tick-text-gap': unset,
10631
- 'tick-gap': 0px,
11022
+ 'tick-gap': none,
10632
11023
  'tooltip-background-color': var(--joy-scheme-highlight),
10633
11024
  'tooltip-border-color': var(--joy-scheme-highlight),
10634
11025
  'tooltip-border-radius': var(--joy-layout-radius),
10635
11026
  'tooltip-border-style': none,
10636
- 'tooltip-border-width': 0px,
11027
+ 'tooltip-border-width': none,
10637
11028
  'tooltip-font-family': var(--joy-font-family),
10638
11029
  'tooltip-font-letter-spacing': var(--joy-typography-body2-letter-spacing),
10639
11030
  'tooltip-font-line-height': var(--joy-typography-body2-line-height),
@@ -10680,7 +11071,7 @@ $search-box-props: (
10680
11071
  'font-family': var(--joy-font-family),
10681
11072
  'font-letter-spacing': unset,
10682
11073
  'font-line-height': unset,
10683
- 'font-size': 16px,
11074
+ 'font-size': var(--joy-typography-body1-font-size),
10684
11075
  'font-text-decoration': unset,
10685
11076
  'font-text-transform': unset,
10686
11077
  'font-weight': normal,
@@ -10752,21 +11143,7 @@ $segment-props: (
10752
11143
  * ------------------------------------------------------------------------------
10753
11144
  */
10754
11145
  $segment-item-props: (
10755
- 'background': unset,
10756
- 'background-checked': unset,
10757
11146
  'background-color': var(--joy-color-primary-500),
10758
- 'background-focused': unset,
10759
- 'background-focused-opacity': unset,
10760
- 'background-hover': unset,
10761
- 'background-hover-opacity': unset,
10762
- 'border-color': unset,
10763
- 'border-radius': unset,
10764
- 'border-style': unset,
10765
- 'border-width': unset,
10766
- 'color': unset,
10767
- 'color-checked': unset,
10768
- 'color-disabled': unset,
10769
- 'color-hover': unset,
10770
11147
  'font-family': var(--joy-font-family),
10771
11148
  'font-letter-spacing': var(--joy-typography-button-letter-spacing),
10772
11149
  'font-line-height': var(--joy-typography-button-line-height),
@@ -10776,10 +11153,8 @@ $segment-item-props: (
10776
11153
  'font-weight': var(--joy-typography-button-font-weight),
10777
11154
  'gap': var(--joy-layout-space),
10778
11155
  'padding-bottom': unset,
10779
- 'padding-end': unset,
10780
11156
  'padding-left': unset,
10781
11157
  'padding-right': unset,
10782
- 'padding-start': unset,
10783
11158
  'padding-top': unset,
10784
11159
  'shadow': unset unset unset unset unset,
10785
11160
  'shadow-blur': unset,
@@ -10814,16 +11189,16 @@ $select-props: (
10814
11189
  'font-family': var(--joy-font-family),
10815
11190
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
10816
11191
  'font-line-height': var(--joy-typography-body2-line-height),
10817
- 'font-size': 16px,
11192
+ 'font-size': var(--joy-typography-body2-font-size),
10818
11193
  'font-text-decoration': var(--joy-typography-body2-text-decoration),
10819
11194
  'font-text-transform': var(--joy-typography-body2-text-transform),
10820
11195
  'font-weight': normal,
10821
11196
  'foreground-color': var(--joy-scheme-foreground),
10822
- 'gap': 8px,
10823
- 'padding-bottom': 8px,
10824
- 'padding-left': 12px,
10825
- 'padding-right': 12px,
10826
- 'padding-top': 8px,
11197
+ 'gap': var(--joy-layout-space),
11198
+ 'padding-bottom': var(--joy-layout-space),
11199
+ 'padding-left': calc(var(--joy-layout-space) * 1.5),
11200
+ 'padding-right': calc(var(--joy-layout-space) * 1.5),
11201
+ 'padding-top': var(--joy-layout-space),
10827
11202
  'shadow': unset unset unset unset unset,
10828
11203
  'shadow-blur': unset,
10829
11204
  'shadow-color': unset,
@@ -10857,18 +11232,18 @@ $select-item-props: (
10857
11232
  'font-family': var(--joy-font-family),
10858
11233
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
10859
11234
  'font-line-height': var(--joy-typography-body2-line-height),
10860
- 'font-size': 16px,
11235
+ 'font-size': var(--joy-typography-body2-font-size),
10861
11236
  'font-text-decoration': var(--joy-typography-body2-text-decoration),
10862
11237
  'font-text-transform': var(--joy-typography-body2-text-transform),
10863
11238
  'font-weight': normal,
10864
11239
  'foreground-color': var(--joy-scheme-foreground),
10865
- 'gap': 8px,
10866
- 'padding-bottom': 8px,
10867
- 'padding-left': 16px,
10868
- 'padding-right': 16px,
10869
- 'padding-top': 8px,
11240
+ 'gap': var(--joy-layout-space),
11241
+ 'padding-bottom': var(--joy-layout-space),
11242
+ 'padding-left': calc(var(--joy-layout-space) * 2),
11243
+ 'padding-right': calc(var(--joy-layout-space) * 2),
11244
+ 'padding-top': var(--joy-layout-space),
10870
11245
  'ripple-color': var(--joy-color-light-secondary-200),
10871
- 'ripple-duration': 200ms,
11246
+ 'ripple-duration': 0.20s,
10872
11247
  'shadow': unset unset unset unset unset,
10873
11248
  'shadow-blur': unset,
10874
11249
  'shadow-color': unset,
@@ -10896,18 +11271,29 @@ $select-item-group-props: (
10896
11271
  'border-style': solid,
10897
11272
  'border-width': 0px,
10898
11273
  'font-family': var(--joy-font-family),
10899
- 'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
10900
- 'font-line-height': var(--joy-typography-caption-line-height),
10901
- 'font-size': 16px,
10902
- 'font-text-decoration': var(--joy-typography-caption-text-decoration),
10903
- 'font-text-transform': var(--joy-typography-caption-text-transform),
11274
+ 'font-letter-spacing': unset,
11275
+ 'font-line-height': unset,
11276
+ 'font-size': var(--joy-typography-body1-font-size),
11277
+ 'font-text-decoration': unset,
11278
+ 'font-text-transform': unset,
10904
11279
  'font-weight': normal,
10905
11280
  'foreground-color': var(--joy-color-neutral-900),
10906
- 'gap': 8px,
10907
- 'padding-bottom': 8px,
10908
- 'padding-left': 16px,
10909
- 'padding-right': 16px,
10910
- 'padding-top': 8px,
11281
+ 'gap': var(--joy-layout-space),
11282
+ 'header-font-family': var(--joy-font-family),
11283
+ 'header-font-letter-spacing': var(--joy-typography-overline-letter-spacing),
11284
+ 'header-font-line-height': var(--joy-typography-overline-line-height),
11285
+ 'header-font-size': var(--joy-typography-overline-font-size),
11286
+ 'header-font-text-decoration': var(--joy-typography-overline-text-decoration),
11287
+ 'header-font-text-transform': var(--joy-typography-overline-text-transform),
11288
+ 'header-font-weight': var(--joy-typography-overline-font-weight),
11289
+ 'header-padding-bottom': var(--joy-layout-space),
11290
+ 'header-padding-left': calc(var(--joy-layout-space) * 2),
11291
+ 'header-padding-right': calc(var(--joy-layout-space) * 2),
11292
+ 'header-padding-top': calc(var(--joy-layout-space) * 2),
11293
+ 'padding-bottom': var(--joy-layout-space),
11294
+ 'padding-left': calc(var(--joy-layout-space) * 2),
11295
+ 'padding-right': calc(var(--joy-layout-space) * 2),
11296
+ 'padding-top': var(--joy-layout-space),
10911
11297
  'shadow': unset unset unset unset unset,
10912
11298
  'shadow-blur': unset,
10913
11299
  'shadow-color': unset,
@@ -10916,7 +11302,7 @@ $select-item-group-props: (
10916
11302
  'shadow-spread': unset,
10917
11303
  'transition-duration': var(--joy-duration-short),
10918
11304
  'transition-mode': ease,
10919
- 'transition-property': (all),
11305
+ 'transition-property': (background-color, color, border-color, box-shadow),
10920
11306
  'translate': none
10921
11307
  );
10922
11308
  /**
@@ -10941,10 +11327,10 @@ $sheet-props: (
10941
11327
  'font-weight': var(--joy-typography-button-font-weight),
10942
11328
  'foreground-color': var(--joy-scheme-foreground),
10943
11329
  'gap': var(--joy-layout-space),
10944
- 'padding-bottom': 8px,
10945
- 'padding-left': 16px,
10946
- 'padding-right': 16px,
10947
- 'padding-top': 8px,
11330
+ 'padding-bottom': var(--joy-layout-space),
11331
+ 'padding-left': calc(var(--joy-layout-space) * 2),
11332
+ 'padding-right': calc(var(--joy-layout-space) * 2),
11333
+ 'padding-top': var(--joy-layout-space),
10948
11334
  'shadow': unset unset unset unset unset,
10949
11335
  'shadow-blur': unset,
10950
11336
  'shadow-color': unset,
@@ -11146,7 +11532,7 @@ $signature-pad-props: (
11146
11532
  'font-family': var(--joy-font-family),
11147
11533
  'font-letter-spacing': unset,
11148
11534
  'font-line-height': unset,
11149
- 'font-size': 16px,
11535
+ 'font-size': var(--joy-typography-body1-font-size),
11150
11536
  'font-text-decoration': unset,
11151
11537
  'font-text-transform': unset,
11152
11538
  'font-weight': normal,
@@ -11252,12 +11638,12 @@ $slider-props: (
11252
11638
  'tick-bar-foreground-color': var(--joy-scheme-foreground),
11253
11639
  'tick-bar-tick-height': 6px,
11254
11640
  'tick-bar-tick-text-gap': calc(var(--joy-layout-space) / 2),
11255
- 'tick-gap': 0px,
11641
+ 'tick-gap': none,
11256
11642
  'tooltip-background-color': var(--joy-scheme-highlight),
11257
11643
  'tooltip-border-color': var(--joy-scheme-highlight),
11258
11644
  'tooltip-border-radius': var(--joy-layout-radius),
11259
11645
  'tooltip-border-style': none,
11260
- 'tooltip-border-width': 0px,
11646
+ 'tooltip-border-width': none,
11261
11647
  'tooltip-font-family': var(--joy-font-family),
11262
11648
  'tooltip-font-letter-spacing': var(--joy-typography-body2-letter-spacing),
11263
11649
  'tooltip-font-line-height': var(--joy-typography-body2-line-height),
@@ -11393,7 +11779,7 @@ $spacer-props: (
11393
11779
  $split-props: (
11394
11780
  'divider-background-color': var(--joy-scheme-highlight),
11395
11781
  'divider-foreground-color': var(--joy-scheme-foreground),
11396
- 'divider-hit-area': 12px,
11782
+ 'divider-hit-area': calc(var(--joy-layout-space) * 1.5),
11397
11783
  'divider-width': 2px,
11398
11784
  'font-family': unset,
11399
11785
  'font-letter-spacing': unset,
@@ -11440,7 +11826,7 @@ $split-button-props: (
11440
11826
  'focus-ring-active-width': 8px,
11441
11827
  'focus-ring-color': unset,
11442
11828
  'focus-ring-inward-offset': 2px,
11443
- 'focus-ring-outward-offset': unset,
11829
+ 'focus-ring-outward-offset': 2px,
11444
11830
  'font-family': var(--joy-font-family),
11445
11831
  'font-letter-spacing': var(--joy-typography-button-letter-spacing),
11446
11832
  'font-line-height': var(--joy-typography-button-line-height),
@@ -11457,13 +11843,13 @@ $split-button-props: (
11457
11843
  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
11458
11844
  'min-width': 64px,
11459
11845
  'padding-bottom': var(--joy-layout-space),
11460
- 'padding-left': var(--joy-layout-space),
11461
- 'padding-right': var(--joy-layout-space),
11846
+ 'padding-left': calc(var(--joy-layout-space) * 2),
11847
+ 'padding-right': calc(var(--joy-layout-space) * 2),
11462
11848
  'padding-top': var(--joy-layout-space),
11463
11849
  'progress-ring-width': var(--joy-layout-thickness),
11464
11850
  'progress-thickness': var(--joy-layout-thickness),
11465
11851
  'ripple-color': unset,
11466
- 'ripple-duration': 200ms,
11852
+ 'ripple-duration': 0.20s,
11467
11853
  'shadow': unset unset unset unset unset,
11468
11854
  'shadow-blur': unset,
11469
11855
  'shadow-color': unset,
@@ -11648,7 +12034,6 @@ $success-state-props: (
11648
12034
  'font-text-decoration': unset,
11649
12035
  'font-text-transform': unset,
11650
12036
  'font-weight': unset,
11651
- 'foreground-color': unset,
11652
12037
  'gap': var(--joy-layout-space),
11653
12038
  'header-font-family': var(--joy-font-family),
11654
12039
  'header-font-letter-spacing': var(--joy-typography-body1-letter-spacing),
@@ -11762,12 +12147,12 @@ $tab-props: (
11762
12147
  'font-text-transform': var(--joy-typography-body1-text-transform),
11763
12148
  'font-weight': var(--joy-typography-body1-font-weight),
11764
12149
  'foreground-color': var(--joy-scheme-foreground),
11765
- 'gap': 8px,
12150
+ 'gap': var(--joy-layout-space),
11766
12151
  'indicator-height': 4px,
11767
- 'padding-bottom': 8px,
11768
- 'padding-left': 16px,
11769
- 'padding-right': 16px,
11770
- 'padding-top': 8px,
12152
+ 'padding-bottom': var(--joy-layout-space),
12153
+ 'padding-left': calc(var(--joy-layout-space) * 2),
12154
+ 'padding-right': calc(var(--joy-layout-space) * 2),
12155
+ 'padding-top': var(--joy-layout-space),
11771
12156
  'panel-background-color': var(--tab-background-color),
11772
12157
  'shadow': var(--joy-elevation-bold-offset-x-0) var(--joy-elevation-bold-offset-y-0) var(--joy-elevation-bold-blur-0) var(--joy-elevation-bold-spread-0) var(--joy-elevation-bold-color-0),
11773
12158
  'shadow-blur': var(--joy-elevation-bold-blur-0),
@@ -11927,7 +12312,7 @@ $tab-strip-item-props: (
11927
12312
  'padding-right': calc(var(--joy-layout-space) * 3),
11928
12313
  'padding-top': calc(var(--joy-layout-space) * 2),
11929
12314
  'ripple-color': unset,
11930
- 'ripple-duration': 200ms,
12315
+ 'ripple-duration': 0.20s,
11931
12316
  'shadow': unset unset unset unset unset,
11932
12317
  'shadow-blur': unset,
11933
12318
  'shadow-color': unset,
@@ -11951,24 +12336,34 @@ $tab-strip-item-props: (
11951
12336
  * ------------------------------------------------------------------------------
11952
12337
  */
11953
12338
  $table-props: (
12339
+ 'alternating-color': var(--joy-scheme-surface),
11954
12340
  'background-color': var(--joy-scheme-background),
11955
12341
  'border-color': var(--joy-scheme-highlight),
11956
12342
  'border-radius': var(--joy-layout-radius),
11957
12343
  'border-style': solid,
11958
12344
  'border-width': var(--joy-layout-thickness),
12345
+ 'column-border-color': var(--joy-scheme-highlight),
12346
+ 'column-border-radius': unset,
12347
+ 'column-border-style': solid,
12348
+ 'column-border-width': 0px,
11959
12349
  'font-family': var(--joy-font-family),
11960
- 'font-letter-spacing': unset,
11961
- 'font-line-height': unset,
12350
+ 'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
12351
+ 'font-line-height': var(--joy-typography-body1-line-height),
11962
12352
  'font-size': var(--joy-typography-body1-font-size),
11963
- 'font-text-decoration': unset,
11964
- 'font-text-transform': unset,
12353
+ 'font-text-decoration': var(--joy-typography-body1-text-decoration),
12354
+ 'font-text-transform': var(--joy-typography-body1-text-transform),
11965
12355
  'font-weight': var(--joy-typography-body1-font-weight),
11966
12356
  'foreground-color': var(--joy-scheme-foreground),
11967
12357
  'gap': var(--joy-layout-space),
12358
+ 'line-thickness': var(--joy-layout-thickness),
11968
12359
  'padding-bottom': var(--joy-layout-space),
11969
12360
  'padding-left': calc(var(--joy-layout-space) * 2),
11970
12361
  'padding-right': calc(var(--joy-layout-space) * 2),
11971
12362
  'padding-top': var(--joy-layout-space),
12363
+ 'row-border-color': var(--joy-scheme-highlight),
12364
+ 'row-border-radius': unset,
12365
+ 'row-border-style': solid,
12366
+ 'row-border-width': var(--joy-layout-thickness),
11972
12367
  'shadow': unset unset unset unset unset,
11973
12368
  'shadow-blur': unset,
11974
12369
  'shadow-color': unset,
@@ -11977,7 +12372,7 @@ $table-props: (
11977
12372
  'shadow-spread': unset,
11978
12373
  'transition-duration': var(--joy-duration-short),
11979
12374
  'transition-mode': ease,
11980
- 'transition-property': (all),
12375
+ 'transition-property': (background-color, border-color, color, fill, stroke, opacity, box-shadow, transform),
11981
12376
  'translate': none
11982
12377
  );
11983
12378
  /**
@@ -11994,16 +12389,16 @@ $table-body-props: (
11994
12389
  'border-color': var(--joy-scheme-highlight),
11995
12390
  'border-radius': var(--joy-layout-radius),
11996
12391
  'border-style': solid,
11997
- 'border-width': 0px,
12392
+ 'border-width': none,
11998
12393
  'font-family': var(--joy-font-family),
11999
- 'font-letter-spacing': unset,
12000
- 'font-line-height': unset,
12394
+ 'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
12395
+ 'font-line-height': var(--joy-typography-body1-line-height),
12001
12396
  'font-size': var(--joy-typography-body1-font-size),
12002
- 'font-text-decoration': unset,
12003
- 'font-text-transform': unset,
12397
+ 'font-text-decoration': var(--joy-typography-body1-text-decoration),
12398
+ 'font-text-transform': var(--joy-typography-body1-text-transform),
12004
12399
  'font-weight': var(--joy-typography-body1-font-weight),
12005
12400
  'foreground-color': var(--joy-scheme-foreground),
12006
- 'gap': var(--joy-layout-space),
12401
+ 'gap': 0,
12007
12402
  'padding-bottom': calc(var(--joy-layout-space) / 2),
12008
12403
  'padding-left': var(--joy-layout-space),
12009
12404
  'padding-right': var(--joy-layout-space),
@@ -12028,25 +12423,24 @@ $table-body-props: (
12028
12423
  * </auto-generated>
12029
12424
  * ------------------------------------------------------------------------------
12030
12425
  */
12031
- $table-cell-props: (
12032
- 'background-color': var(--joy-scheme-background),
12426
+ $table-body-cell-props: (
12427
+ 'background-color': var(--joy-scheme-transparent),
12033
12428
  'border-color': var(--joy-scheme-highlight),
12034
12429
  'border-radius': var(--joy-layout-radius),
12035
- 'border-style': unset,
12036
12430
  'border-width': 0px,
12037
12431
  'font-family': var(--joy-font-family),
12038
- 'font-letter-spacing': unset,
12039
- 'font-line-height': unset,
12432
+ 'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
12433
+ 'font-line-height': var(--joy-typography-body1-line-height),
12040
12434
  'font-size': var(--joy-typography-body1-font-size),
12041
- 'font-text-decoration': unset,
12042
- 'font-text-transform': unset,
12435
+ 'font-text-decoration': var(--joy-typography-body1-text-decoration),
12436
+ 'font-text-transform': var(--joy-typography-body1-text-transform),
12043
12437
  'font-weight': var(--joy-typography-body1-font-weight),
12044
- 'foreground-color': var(--joy-color-neutral-50),
12438
+ 'foreground-color': var(--joy-scheme-foreground),
12045
12439
  'gap': var(--joy-layout-space),
12046
- 'padding-bottom': 0px,
12440
+ 'padding-bottom': var(--joy-layout-space),
12047
12441
  'padding-left': calc(var(--joy-layout-space)*2),
12048
12442
  'padding-right': calc(var(--joy-layout-space)*2),
12049
- 'padding-top': 0px,
12443
+ 'padding-top': var(--joy-layout-space),
12050
12444
  'shadow': unset unset unset unset unset,
12051
12445
  'shadow-blur': unset,
12052
12446
  'shadow-color': unset,
@@ -12067,25 +12461,67 @@ $table-cell-props: (
12067
12461
  * </auto-generated>
12068
12462
  * ------------------------------------------------------------------------------
12069
12463
  */
12070
- $table-footer-props: (
12071
- 'background-color': var(--joy-scheme-background),
12464
+ $table-body-row-props: (
12072
12465
  'border-color': var(--joy-scheme-highlight),
12073
12466
  'border-radius': var(--joy-layout-radius),
12074
12467
  'border-style': solid,
12075
12468
  'border-width': 0px,
12076
12469
  'font-family': var(--joy-font-family),
12470
+ 'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
12471
+ 'font-line-height': var(--joy-typography-body1-line-height),
12472
+ 'font-size': var(--joy-typography-body1-font-size),
12473
+ 'font-text-decoration': var(--joy-typography-body1-text-decoration),
12474
+ 'font-text-transform': var(--joy-typography-body1-text-transform),
12475
+ 'font-weight': var(--joy-typography-body1-font-weight),
12476
+ 'foreground-color': var(--joy-scheme-foreground),
12477
+ 'gap': 0,
12478
+ 'padding-bottom': 0,
12479
+ 'padding-left': 0,
12480
+ 'padding-right': 0,
12481
+ 'padding-top': 0,
12482
+ 'shadow': unset unset unset unset unset,
12483
+ 'shadow-blur': unset,
12484
+ 'shadow-color': unset,
12485
+ 'shadow-offset-x': unset,
12486
+ 'shadow-offset-y': unset,
12487
+ 'shadow-spread': unset,
12488
+ 'transition-duration': var(--joy-duration-short),
12489
+ 'transition-mode': ease,
12490
+ 'transition-property': (background-color, border-color),
12491
+ 'translate': none
12492
+ );
12493
+ /**
12494
+ * ------------------------------------------------------------------------------
12495
+ * <auto-generated>
12496
+ * This code was generated by a tool.
12497
+ * Changes to this file may cause incorrect behavior and will be lost if
12498
+ * the code is regenerated.
12499
+ * </auto-generated>
12500
+ * ------------------------------------------------------------------------------
12501
+ */
12502
+ $table-column-editor-props: (
12503
+ 'background-color': var(--joy-scheme-background),
12504
+ 'border-color': var(--joy-scheme-highlight),
12505
+ 'border-radius': var(--joy-layout-radius),
12506
+ 'font-family': unset,
12077
12507
  'font-letter-spacing': unset,
12078
12508
  'font-line-height': unset,
12079
- 'font-size': var(--joy-typography-body2-font-size),
12509
+ 'font-size': unset,
12080
12510
  'font-text-decoration': unset,
12081
12511
  'font-text-transform': unset,
12082
- 'font-weight': bold,
12512
+ 'font-weight': unset,
12083
12513
  'foreground-color': var(--joy-scheme-foreground),
12084
12514
  'gap': var(--joy-layout-space),
12085
- 'padding-bottom': calc(var(--joy-layout-space) / 2),
12515
+ 'item-gap': var(--joy-layout-space),
12516
+ 'item-hover-background-color': var(--joy-scheme-highlight),
12517
+ 'item-padding-bottom': calc(var(--joy-layout-space) * 0.5),
12518
+ 'item-padding-left': var(--joy-layout-space),
12519
+ 'item-padding-right': var(--joy-layout-space),
12520
+ 'item-padding-top': calc(var(--joy-layout-space) * 0.5),
12521
+ 'padding-bottom': var(--joy-layout-space),
12086
12522
  'padding-left': var(--joy-layout-space),
12087
12523
  'padding-right': var(--joy-layout-space),
12088
- 'padding-top': calc(var(--joy-layout-space) / 2),
12524
+ 'padding-top': var(--joy-layout-space),
12089
12525
  'shadow': unset unset unset unset unset,
12090
12526
  'shadow-blur': unset,
12091
12527
  'shadow-color': unset,
@@ -12094,7 +12530,7 @@ $table-footer-props: (
12094
12530
  'shadow-spread': unset,
12095
12531
  'transition-duration': var(--joy-duration-short),
12096
12532
  'transition-mode': ease,
12097
- 'transition-property': (all),
12533
+ 'transition-property': (background-color, color),
12098
12534
  'translate': none
12099
12535
  );
12100
12536
  /**
@@ -12106,19 +12542,19 @@ $table-footer-props: (
12106
12542
  * </auto-generated>
12107
12543
  * ------------------------------------------------------------------------------
12108
12544
  */
12109
- $table-header-props: (
12545
+ $table-footer-props: (
12110
12546
  'background-color': var(--joy-scheme-background),
12111
12547
  'border-color': var(--joy-scheme-highlight),
12112
12548
  'border-radius': var(--joy-layout-radius),
12113
12549
  'border-style': solid,
12114
12550
  'border-width': 0px,
12115
12551
  'font-family': var(--joy-font-family),
12116
- 'font-letter-spacing': unset,
12117
- 'font-line-height': unset,
12552
+ 'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
12553
+ 'font-line-height': var(--joy-typography-body2-line-height),
12118
12554
  'font-size': var(--joy-typography-body2-font-size),
12119
- 'font-text-decoration': unset,
12120
- 'font-text-transform': unset,
12121
- 'font-weight': bold,
12555
+ 'font-text-decoration': var(--joy-typography-body2-text-decoration),
12556
+ 'font-text-transform': var(--joy-typography-body2-text-transform),
12557
+ 'font-weight': var(--joy-typography-body2-font-weight),
12122
12558
  'foreground-color': var(--joy-scheme-foreground),
12123
12559
  'gap': var(--joy-layout-space),
12124
12560
  'padding-bottom': calc(var(--joy-layout-space) / 2),
@@ -12145,20 +12581,58 @@ $table-header-props: (
12145
12581
  * </auto-generated>
12146
12582
  * ------------------------------------------------------------------------------
12147
12583
  */
12148
- $table-row-props: (
12149
- 'background-color': var(--joy-color-neutral-500),
12584
+ $table-footer-cell-props: (
12585
+ 'background-color': var(--joy-scheme-background),
12586
+ 'border-color': var(--joy-scheme-highlight),
12587
+ 'border-radius': var(--joy-layout-radius),
12588
+ 'border-width': 0px,
12589
+ 'font-family': var(--joy-font-family),
12590
+ 'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
12591
+ 'font-line-height': var(--joy-typography-body2-line-height),
12592
+ 'font-size': var(--joy-typography-body2-font-size),
12593
+ 'font-text-decoration': var(--joy-typography-body2-text-decoration),
12594
+ 'font-text-transform': var(--joy-typography-body2-text-transform),
12595
+ 'font-weight': var(--joy-typography-body2-font-weight),
12596
+ 'foreground-color': var(--joy-scheme-foreground),
12597
+ 'gap': var(--joy-layout-space),
12598
+ 'padding-bottom': 0px,
12599
+ 'padding-left': calc(var(--joy-layout-space)*2),
12600
+ 'padding-right': calc(var(--joy-layout-space)*2),
12601
+ 'padding-top': 0px,
12602
+ 'shadow': unset unset unset unset unset,
12603
+ 'shadow-blur': unset,
12604
+ 'shadow-color': unset,
12605
+ 'shadow-offset-x': unset,
12606
+ 'shadow-offset-y': unset,
12607
+ 'shadow-spread': unset,
12608
+ 'transition-duration': var(--joy-duration-short),
12609
+ 'transition-mode': ease,
12610
+ 'transition-property': (all),
12611
+ 'translate': none
12612
+ );
12613
+ /**
12614
+ * ------------------------------------------------------------------------------
12615
+ * <auto-generated>
12616
+ * This code was generated by a tool.
12617
+ * Changes to this file may cause incorrect behavior and will be lost if
12618
+ * the code is regenerated.
12619
+ * </auto-generated>
12620
+ * ------------------------------------------------------------------------------
12621
+ */
12622
+ $table-footer-row-props: (
12623
+ 'background-color': var(--joy-scheme-background),
12150
12624
  'border-color': var(--joy-scheme-highlight),
12151
12625
  'border-radius': var(--joy-layout-radius),
12152
12626
  'border-style': solid,
12153
12627
  'border-width': 0px,
12154
12628
  'font-family': var(--joy-font-family),
12155
- 'font-letter-spacing': unset,
12156
- 'font-line-height': unset,
12157
- 'font-size': var(--joy-typography-body1-font-size),
12158
- 'font-text-decoration': unset,
12159
- 'font-text-transform': unset,
12160
- 'font-weight': var(--joy-typography-body1-font-weight),
12161
- 'foreground-color': var(--joy-color-neutral-50),
12629
+ 'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
12630
+ 'font-line-height': var(--joy-typography-body2-line-height),
12631
+ 'font-size': var(--joy-typography-body2-font-size),
12632
+ 'font-text-decoration': var(--joy-typography-body2-text-decoration),
12633
+ 'font-text-transform': var(--joy-typography-body2-text-transform),
12634
+ 'font-weight': var(--joy-typography-body2-font-weight),
12635
+ 'foreground-color': var(--joy-scheme-foreground),
12162
12636
  'gap': var(--joy-layout-space),
12163
12637
  'padding-bottom': var(--joy-layout-space),
12164
12638
  'padding-left': 0,
@@ -12175,6 +12649,126 @@ $table-row-props: (
12175
12649
  'transition-property': (all),
12176
12650
  'translate': none
12177
12651
  );
12652
+ /**
12653
+ * ------------------------------------------------------------------------------
12654
+ * <auto-generated>
12655
+ * This code was generated by a tool.
12656
+ * Changes to this file may cause incorrect behavior and will be lost if
12657
+ * the code is regenerated.
12658
+ * </auto-generated>
12659
+ * ------------------------------------------------------------------------------
12660
+ */
12661
+ $table-header-props: (
12662
+ 'background-color': var(--joy-scheme-background),
12663
+ 'border-color': var(--joy-scheme-highlight),
12664
+ 'border-radius': var(--joy-layout-radius),
12665
+ 'border-style': solid,
12666
+ 'border-width': 0px,
12667
+ 'font-family': var(--joy-font-family),
12668
+ 'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
12669
+ 'font-line-height': var(--joy-typography-caption-line-height),
12670
+ 'font-size': var(--joy-typography-caption-font-size),
12671
+ 'font-text-decoration': var(--joy-typography-caption-text-decoration),
12672
+ 'font-text-transform': var(--joy-typography-caption-text-transform),
12673
+ 'font-weight': var(--joy-typography-caption-font-weight),
12674
+ 'foreground-color': var(--joy-scheme-foreground),
12675
+ 'gap': var(--joy-layout-space),
12676
+ 'padding-bottom': calc(var(--joy-layout-space) / 2),
12677
+ 'padding-left': var(--joy-layout-space),
12678
+ 'padding-right': var(--joy-layout-space),
12679
+ 'padding-top': calc(var(--joy-layout-space) / 2),
12680
+ 'shadow': unset unset unset unset unset,
12681
+ 'shadow-blur': unset,
12682
+ 'shadow-color': unset,
12683
+ 'shadow-offset-x': unset,
12684
+ 'shadow-offset-y': unset,
12685
+ 'shadow-spread': unset,
12686
+ 'transition-duration': var(--joy-duration-short),
12687
+ 'transition-mode': ease,
12688
+ 'transition-property': (all),
12689
+ 'translate': none
12690
+ );
12691
+ /**
12692
+ * ------------------------------------------------------------------------------
12693
+ * <auto-generated>
12694
+ * This code was generated by a tool.
12695
+ * Changes to this file may cause incorrect behavior and will be lost if
12696
+ * the code is regenerated.
12697
+ * </auto-generated>
12698
+ * ------------------------------------------------------------------------------
12699
+ */
12700
+ $table-header-cell-props: (
12701
+ 'background-color': var(--joy-scheme-background),
12702
+ 'border-color': var(--joy-scheme-highlight),
12703
+ 'border-radius': var(--joy-layout-radius),
12704
+ 'border-width': 0px,
12705
+ 'font-family': var(--joy-font-family),
12706
+ 'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
12707
+ 'font-line-height': var(--joy-typography-caption-line-height),
12708
+ 'font-size': var(--joy-typography-caption-font-size),
12709
+ 'font-text-decoration': var(--joy-typography-caption-text-decoration),
12710
+ 'font-text-transform': var(--joy-typography-caption-text-transform),
12711
+ 'font-weight': var(--joy-typography-caption-font-weight),
12712
+ 'foreground-color': var(--joy-scheme-foreground),
12713
+ 'gap': var(--joy-layout-space),
12714
+ 'padding-bottom': var(--joy-layout-space),
12715
+ 'padding-left': calc(var(--joy-layout-space)*2),
12716
+ 'padding-right': calc(var(--joy-layout-space)*2),
12717
+ 'padding-top': var(--joy-layout-space),
12718
+ 'resize-handle-color': var(--joy-color-primary-500),
12719
+ 'resize-handle-width': 2px,
12720
+ 'separator-color': var(--joy-scheme-highlight),
12721
+ 'separator-width': 1px,
12722
+ 'shadow': unset unset unset unset unset,
12723
+ 'shadow-blur': unset,
12724
+ 'shadow-color': unset,
12725
+ 'shadow-offset-x': unset,
12726
+ 'shadow-offset-y': unset,
12727
+ 'shadow-spread': unset,
12728
+ 'transition-duration': var(--joy-duration-short),
12729
+ 'transition-mode': ease,
12730
+ 'transition-property': (all),
12731
+ 'translate': none
12732
+ );
12733
+ /**
12734
+ * ------------------------------------------------------------------------------
12735
+ * <auto-generated>
12736
+ * This code was generated by a tool.
12737
+ * Changes to this file may cause incorrect behavior and will be lost if
12738
+ * the code is regenerated.
12739
+ * </auto-generated>
12740
+ * ------------------------------------------------------------------------------
12741
+ */
12742
+ $table-header-row-props: (
12743
+ 'background-color': var(--joy-scheme-background),
12744
+ 'border-color': var(--joy-scheme-highlight),
12745
+ 'border-radius': var(--joy-layout-radius),
12746
+ 'border-style': solid,
12747
+ 'border-width': var(--joy-layout-thickness),
12748
+ 'font-family': var(--joy-font-family),
12749
+ 'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
12750
+ 'font-line-height': var(--joy-typography-caption-line-height),
12751
+ 'font-size': var(--joy-typography-caption-font-size),
12752
+ 'font-text-decoration': var(--joy-typography-caption-text-decoration),
12753
+ 'font-text-transform': var(--joy-typography-caption-text-transform),
12754
+ 'font-weight': var(--joy-typography-caption-font-weight),
12755
+ 'foreground-color': var(--joy-scheme-foreground),
12756
+ 'gap': 0,
12757
+ 'padding-bottom': 0,
12758
+ 'padding-left': 0,
12759
+ 'padding-right': 0,
12760
+ 'padding-top': 0,
12761
+ 'shadow': unset unset unset unset unset,
12762
+ 'shadow-blur': unset,
12763
+ 'shadow-color': unset,
12764
+ 'shadow-offset-x': unset,
12765
+ 'shadow-offset-y': unset,
12766
+ 'shadow-spread': unset,
12767
+ 'transition-duration': var(--joy-duration-short),
12768
+ 'transition-mode': ease,
12769
+ 'transition-property': (background-color, border-color),
12770
+ 'translate': none
12771
+ );
12178
12772
  /**
12179
12773
  * ------------------------------------------------------------------------------
12180
12774
  * <auto-generated>
@@ -12236,7 +12830,7 @@ $text-box-props: (
12236
12830
  'font-family': var(--joy-font-family),
12237
12831
  'font-letter-spacing': unset,
12238
12832
  'font-line-height': unset,
12239
- 'font-size': 16px,
12833
+ 'font-size': var(--joy-typography-body1-font-size),
12240
12834
  'font-text-decoration': unset,
12241
12835
  'font-text-transform': unset,
12242
12836
  'font-weight': normal,
@@ -12387,11 +12981,11 @@ $tick-bar-props: (
12387
12981
  'font-text-transform': var(--joy-typography-caption-text-transform),
12388
12982
  'font-weight': var(--joy-typography-caption-font-weight),
12389
12983
  'foreground-color': var(--joy-scheme-highlight),
12390
- 'gap': 0px,
12391
- 'padding-bottom': 0px,
12392
- 'padding-left': 0px,
12393
- 'padding-right': 0px,
12394
- 'padding-top': 0px,
12984
+ 'gap': none,
12985
+ 'padding-bottom': none,
12986
+ 'padding-left': none,
12987
+ 'padding-right': none,
12988
+ 'padding-top': none,
12395
12989
  'shadow': unset unset unset unset unset,
12396
12990
  'shadow-blur': unset,
12397
12991
  'shadow-color': unset,
@@ -12407,6 +13001,51 @@ $tick-bar-props: (
12407
13001
  'transition-property': (background-color, color, border-color, opacity, transform),
12408
13002
  'translate': none
12409
13003
  );
13004
+ /**
13005
+ * ------------------------------------------------------------------------------
13006
+ * <auto-generated>
13007
+ * This code was generated by a tool.
13008
+ * Changes to this file may cause incorrect behavior and will be lost if
13009
+ * the code is regenerated.
13010
+ * </auto-generated>
13011
+ * ------------------------------------------------------------------------------
13012
+ */
13013
+ $tile-props: (
13014
+ 'background-color': var(--joy-scheme-background),
13015
+ 'border-color': var(--joy-scheme-highlight),
13016
+ 'border-radius': var(--joy-layout-radius),
13017
+ 'border-style': solid,
13018
+ 'border-width': var(--joy-layout-thickness),
13019
+ 'focus-ring-active-width': 8px,
13020
+ 'focus-ring-color': var(--joy-scheme-highlight),
13021
+ 'focus-ring-inward-offset': 2px,
13022
+ 'focus-ring-outward-offset': 2px,
13023
+ 'font-family': var(--joy-font-family),
13024
+ 'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
13025
+ 'font-line-height': var(--joy-typography-body1-line-height),
13026
+ 'font-size': var(--joy-typography-body1-font-size),
13027
+ 'font-text-decoration': var(--joy-typography-body1-text-decoration),
13028
+ 'font-text-transform': var(--joy-typography-body1-text-transform),
13029
+ 'font-weight': var(--joy-typography-body1-font-weight),
13030
+ 'foreground-color': var(--joy-scheme-foreground),
13031
+ 'gap': var(--joy-layout-space),
13032
+ 'padding-bottom': var(--joy-layout-space),
13033
+ 'padding-left': var(--joy-layout-space),
13034
+ 'padding-right': var(--joy-layout-space),
13035
+ 'padding-top': var(--joy-layout-space),
13036
+ 'ripple-color': var(--joy-scheme-highlight),
13037
+ 'ripple-duration': 0.20s,
13038
+ 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
13039
+ 'shadow-blur': var(--joy-elevation-light-blur-1),
13040
+ 'shadow-color': var(--joy-elevation-light-color-1),
13041
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
13042
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
13043
+ 'shadow-spread': var(--joy-elevation-light-spread-1),
13044
+ 'transition-duration': var(--joy-duration-short),
13045
+ 'transition-mode': ease,
13046
+ 'transition-property': (background-color, color, border-color, box-shadow),
13047
+ 'translate': none
13048
+ );
12410
13049
  /**
12411
13050
  * ------------------------------------------------------------------------------
12412
13051
  * <auto-generated>
@@ -12425,7 +13064,7 @@ $tile-list-props: (
12425
13064
  'font-text-transform': unset,
12426
13065
  'font-weight': unset,
12427
13066
  'gap': unset,
12428
- 'gutter-size': 16px,
13067
+ 'gutter-size': calc(var(--joy-layout-space) * 2),
12429
13068
  'padding-bottom': unset,
12430
13069
  'padding-left': unset,
12431
13070
  'padding-right': unset,
@@ -12453,7 +13092,7 @@ $tile-list-props: (
12453
13092
  $tile-list-item-props: (
12454
13093
  'bg-color': var(--joy-scheme-background),
12455
13094
  'border': 1px solid var(--joy-scheme-highlight),
12456
- 'content-padding': 8px,
13095
+ 'content-padding': var(--joy-layout-space),
12457
13096
  'dragging-opacity': .6,
12458
13097
  'dragover-border-color': red,
12459
13098
  'font-family': unset,
@@ -12465,7 +13104,7 @@ $tile-list-item-props: (
12465
13104
  'font-weight': unset,
12466
13105
  'gap': unset,
12467
13106
  'header-bg-color': var(--joy-scheme-background),
12468
- 'header-padding': 8px,
13107
+ 'header-padding': var(--joy-layout-space),
12469
13108
  'padding-bottom': unset,
12470
13109
  'padding-left': unset,
12471
13110
  'padding-right': unset,
@@ -12499,7 +13138,7 @@ $tile-manager-props: (
12499
13138
  'font-text-decoration': unset,
12500
13139
  'font-text-transform': unset,
12501
13140
  'font-weight': unset,
12502
- 'gap': 16px,
13141
+ 'gap': calc(var(--joy-layout-space) * 2),
12503
13142
  'padding-bottom': unset,
12504
13143
  'padding-left': unset,
12505
13144
  'padding-right': unset,
@@ -12534,10 +13173,10 @@ $tile-manager-tile-props: (
12534
13173
  'border-color': var(--joy-scheme-stroke),
12535
13174
  'border-radius': var(--joy-layout-radius),
12536
13175
  'border-width': 1px,
12537
- 'content-padding-bottom': 16px,
12538
- 'content-padding-left': 16px,
12539
- 'content-padding-right': 16px,
12540
- 'content-padding-top': 16px,
13176
+ 'content-padding-bottom': calc(var(--joy-layout-space) * 2),
13177
+ 'content-padding-left': calc(var(--joy-layout-space) * 2),
13178
+ 'content-padding-right': calc(var(--joy-layout-space) * 2),
13179
+ 'content-padding-top': calc(var(--joy-layout-space) * 2),
12541
13180
  'dragging-opacity': 0.8,
12542
13181
  'drop-target-color': var(--joy-color-primary-500),
12543
13182
  'focus-ring-active-width': 8px,
@@ -12554,10 +13193,10 @@ $tile-manager-tile-props: (
12554
13193
  'gap': unset,
12555
13194
  'header-background': transparent,
12556
13195
  'header-border-color': var(--joy-scheme-stroke),
12557
- 'header-padding-bottom': 12px,
12558
- 'header-padding-left': 16px,
12559
- 'header-padding-right': 16px,
12560
- 'header-padding-top': 12px,
13196
+ 'header-padding-bottom': calc(var(--joy-layout-space) * 1.5),
13197
+ 'header-padding-left': calc(var(--joy-layout-space) * 2),
13198
+ 'header-padding-right': calc(var(--joy-layout-space) * 2),
13199
+ 'header-padding-top': calc(var(--joy-layout-space) * 1.5),
12561
13200
  'padding-bottom': unset,
12562
13201
  'padding-left': unset,
12563
13202
  'padding-right': unset,
@@ -12593,18 +13232,16 @@ $time-box-props: (
12593
13232
  'border-radius': var(--joy-layout-radius),
12594
13233
  'border-style': solid,
12595
13234
  'border-width': var(--joy-layout-thickness),
12596
- 'color': unset,
12597
13235
  'font-family': var(--joy-font-family),
12598
13236
  'font-letter-spacing': unset,
12599
13237
  'font-line-height': unset,
12600
- 'font-size': 16px,
13238
+ 'font-size': var(--joy-typography-body1-font-size),
12601
13239
  'font-text-decoration': unset,
12602
13240
  'font-text-transform': unset,
12603
13241
  'font-weight': normal,
12604
13242
  'foreground-color': var(--joy-scheme-foreground),
12605
13243
  'gap': var(--joy-layout-space),
12606
13244
  'height': 56px,
12607
- 'menu-item-border-radius': unset,
12608
13245
  'padding-bottom': var(--joy-layout-space),
12609
13246
  'padding-left': calc(var(--joy-layout-space) * 1.5),
12610
13247
  'padding-right': calc(var(--joy-layout-space) * 1.5),
@@ -12660,7 +13297,7 @@ $timeline-props: (
12660
13297
  'transition-duration': var(--joy-duration-short),
12661
13298
  'transition-mode': ease,
12662
13299
  'transition-property': (color, background-color, transform),
12663
- 'translate': unset
13300
+ 'translate': none
12664
13301
  );
12665
13302
  /**
12666
13303
  * ------------------------------------------------------------------------------
@@ -12838,7 +13475,7 @@ $title-bar-props: (
12838
13475
  'transition-duration': unset,
12839
13476
  'transition-mode': unset,
12840
13477
  'transition-property': (unset),
12841
- 'translate': unset
13478
+ 'translate': none
12842
13479
  );
12843
13480
  /**
12844
13481
  * ------------------------------------------------------------------------------
@@ -12898,18 +13535,20 @@ $toast-props: (
12898
13535
  'font-text-transform': var(--joy-typography-body1-text-transform),
12899
13536
  'font-weight': var(--joy-typography-body1-font-weight),
12900
13537
  'foreground-color': var(--joy-scheme-foreground),
12901
- 'gap': 8px,
12902
- 'padding-bottom': 8px,
12903
- 'padding-left': 16px,
12904
- 'padding-right': 16px,
12905
- 'padding-top': 8px,
13538
+ 'gap': var(--joy-layout-space),
13539
+ 'offset-y': var(--joy-layout-space),
13540
+ 'padding-bottom': var(--joy-layout-space),
13541
+ 'padding-left': calc(var(--joy-layout-space) * 2),
13542
+ 'padding-right': calc(var(--joy-layout-space) * 2),
13543
+ 'padding-top': var(--joy-layout-space),
13544
+ 'progress-fill-color': currentColor,
12906
13545
  'progress-ring-fill-color': var(--joy-scheme-foreground),
12907
- 'shadow': unset unset unset unset unset,
12908
- 'shadow-blur': unset,
12909
- 'shadow-color': unset,
12910
- 'shadow-offset-x': unset,
12911
- 'shadow-offset-y': unset,
12912
- 'shadow-spread': unset,
13546
+ 'shadow': (var(--joy-elevation-regular-offset-x-0), var(--joy-elevation-regular-offset-x-1)) (var(--joy-elevation-regular-offset-y-0), var(--joy-elevation-regular-offset-y-1)) (var(--joy-elevation-regular-blur-0), var(--joy-elevation-regular-blur-1)) (var(--joy-elevation-regular-spread-0), var(--joy-elevation-regular-spread-1)) (var(--joy-elevation-regular-color-0), var(--joy-elevation-regular-color-1)),
13547
+ 'shadow-blur': (var(--joy-elevation-regular-blur-0), var(--joy-elevation-regular-blur-1)),
13548
+ 'shadow-color': (var(--joy-elevation-regular-color-0), var(--joy-elevation-regular-color-1)),
13549
+ 'shadow-offset-x': (var(--joy-elevation-regular-offset-x-0), var(--joy-elevation-regular-offset-x-1)),
13550
+ 'shadow-offset-y': (var(--joy-elevation-regular-offset-y-0), var(--joy-elevation-regular-offset-y-1)),
13551
+ 'shadow-spread': (var(--joy-elevation-regular-spread-0), var(--joy-elevation-regular-spread-1)),
12913
13552
  'transition-duration': var(--joy-duration-short),
12914
13553
  'transition-mode': ease,
12915
13554
  'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
@@ -12950,12 +13589,12 @@ $toggle-button-props: (
12950
13589
  'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
12951
13590
  'min-width': 64px,
12952
13591
  'padding-bottom': var(--joy-layout-space),
12953
- 'padding-left': var(--joy-layout-space),
12954
- 'padding-right': var(--joy-layout-space),
13592
+ 'padding-left': calc(var(--joy-layout-space) * 2),
13593
+ 'padding-right': calc(var(--joy-layout-space) * 2),
12955
13594
  'padding-top': var(--joy-layout-space),
12956
13595
  'progress-ring-width': var(--joy-layout-thickness),
12957
13596
  'ripple-color': unset,
12958
- 'ripple-duration': 200ms,
13597
+ 'ripple-duration': 0.20s,
12959
13598
  'shadow': unset unset unset unset unset,
12960
13599
  'shadow-blur': unset,
12961
13600
  'shadow-color': unset,
@@ -13005,7 +13644,7 @@ $toggle-button-group-props: (
13005
13644
  'transition-duration': var(--joy-duration-short),
13006
13645
  'transition-mode': ease,
13007
13646
  'transition-property': (background-color, color, border-color, opacity),
13008
- 'translate': unset
13647
+ 'translate': none
13009
13648
  );
13010
13649
  /**
13011
13650
  * ------------------------------------------------------------------------------
@@ -13017,7 +13656,6 @@ $toggle-button-group-props: (
13017
13656
  * ------------------------------------------------------------------------------
13018
13657
  */
13019
13658
  $toggle-switch-props: (
13020
- 'background-color': unset,
13021
13659
  'border-color': unset,
13022
13660
  'border-radius': var(--joy-layout-radius),
13023
13661
  'border-style': solid,
@@ -13029,7 +13667,6 @@ $toggle-switch-props: (
13029
13667
  'font-text-decoration': unset,
13030
13668
  'font-text-transform': unset,
13031
13669
  'font-weight': unset,
13032
- 'foreground-color': unset,
13033
13670
  'gap': var(--joy-layout-space),
13034
13671
  'padding-bottom': unset,
13035
13672
  'padding-left': unset,
@@ -13044,7 +13681,7 @@ $toggle-switch-props: (
13044
13681
  'transition-duration': unset,
13045
13682
  'transition-mode': unset,
13046
13683
  'transition-property': (unset),
13047
- 'translate': unset
13684
+ 'translate': none
13048
13685
  );
13049
13686
  /**
13050
13687
  * ------------------------------------------------------------------------------
@@ -13104,7 +13741,7 @@ $toolbar-props: (
13104
13741
  'font-text-transform': unset,
13105
13742
  'font-weight': normal,
13106
13743
  'foreground-color': var(--joy-scheme-foreground),
13107
- 'gap': 16px,
13744
+ 'gap': calc(var(--joy-layout-space) * 2),
13108
13745
  'height': 64px,
13109
13746
  'line-height': 28px,
13110
13747
  'padding-bottom': var(--joy-layout-space),
@@ -13120,7 +13757,7 @@ $toolbar-props: (
13120
13757
  'transition-duration': var(--joy-duration-short),
13121
13758
  'transition-mode': ease,
13122
13759
  'transition-property': (all),
13123
- 'translate': unset
13760
+ 'translate': none
13124
13761
  );
13125
13762
  /**
13126
13763
  * ------------------------------------------------------------------------------
@@ -13247,7 +13884,7 @@ $tour-step-props: (
13247
13884
  'border-radius': var(--joy-layout-radius),
13248
13885
  'border-style': none,
13249
13886
  'border-width': 0px,
13250
- 'content-margin-bottom': 16px,
13887
+ 'content-margin-bottom': calc(var(--joy-layout-space) * 2),
13251
13888
  'font-family': var(--joy-font-family),
13252
13889
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
13253
13890
  'font-line-height': var(--joy-typography-body2-line-height),
@@ -13258,17 +13895,17 @@ $tour-step-props: (
13258
13895
  'foreground-color': var(--joy-scheme-foreground),
13259
13896
  'gap': var(--joy-layout-space),
13260
13897
  'header-font-weight': 600,
13261
- 'header-margin-bottom': 8px,
13898
+ 'header-margin-bottom': var(--joy-layout-space),
13262
13899
  'padding-bottom': calc(var(--joy-layout-space)*2),
13263
13900
  'padding-left': calc(var(--joy-layout-space)*2),
13264
13901
  'padding-right': calc(var(--joy-layout-space)*2),
13265
13902
  'padding-top': calc(var(--joy-layout-space)*2),
13266
- 'shadow': 0px 16px 32px 0px rgba(0, 0, 0, 0.18),
13903
+ 'shadow': none 16px 32px none rgba(0, 0, 0, 0.18),
13267
13904
  'shadow-blur': 32px,
13268
13905
  'shadow-color': rgba(0, 0, 0, 0.18),
13269
- 'shadow-offset-x': 0px,
13906
+ 'shadow-offset-x': none,
13270
13907
  'shadow-offset-y': 16px,
13271
- 'shadow-spread': 0px,
13908
+ 'shadow-spread': none,
13272
13909
  'transition-duration': var(--joy-duration-short),
13273
13910
  'transition-mode': ease,
13274
13911
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -13320,7 +13957,7 @@ $tree-item-props: (
13320
13957
  'background-color': var(--joy-scheme-background),
13321
13958
  'border-color': var(--joy-scheme-highlight),
13322
13959
  'border-radius': var(--joy-layout-radius),
13323
- 'border-style': solid,
13960
+ 'border-style': none,
13324
13961
  'border-width': 0px,
13325
13962
  'font-family': var(--joy-font-family),
13326
13963
  'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
@@ -13330,14 +13967,14 @@ $tree-item-props: (
13330
13967
  'font-text-transform': var(--joy-typography-body1-text-transform),
13331
13968
  'font-weight': var(--joy-typography-body1-font-weight),
13332
13969
  'foreground-color': var(--joy-scheme-foreground),
13333
- 'gap': 8px,
13970
+ 'gap': var(--joy-layout-space),
13334
13971
  'indent-color': var(--joy-scheme-highlight),
13335
13972
  'indent-offset': calc(var(--joy-layout-space) * 2),
13336
13973
  'indent-size': var(--joy-layout-thickness),
13337
- 'padding-bottom': 8px,
13338
- 'padding-left': 16px,
13339
- 'padding-right': 16px,
13340
- 'padding-top': 8px,
13974
+ 'padding-bottom': var(--joy-layout-space),
13975
+ 'padding-left': calc(var(--joy-layout-space) * 2),
13976
+ 'padding-right': calc(var(--joy-layout-space) * 2),
13977
+ 'padding-top': var(--joy-layout-space),
13341
13978
  'shadow': unset unset unset unset unset,
13342
13979
  'shadow-blur': unset,
13343
13980
  'shadow-color': unset,
@@ -13397,16 +14034,16 @@ $video-props: (
13397
14034
  'border-color': var(--joy-scheme-highlight),
13398
14035
  'border-radius': var(--joy-layout-radius),
13399
14036
  'border-style': solid,
13400
- 'border-width': 0px,
14037
+ 'border-width': none,
13401
14038
  'font-family': var(--joy-font-family),
13402
14039
  'font-letter-spacing': unset,
13403
14040
  'font-line-height': unset,
13404
- 'font-size': 12px,
14041
+ 'font-size': var(--joy-typography-supporting-font-size),
13405
14042
  'font-text-decoration': unset,
13406
14043
  'font-text-transform': unset,
13407
- 'font-weight': normal,
14044
+ 'font-weight': var(--joy-typography-supporting-font-weight),
13408
14045
  'foreground-color': var(--joy-scheme-foreground),
13409
- 'gap': 8px,
14046
+ 'gap': var(--joy-layout-space),
13410
14047
  'legend-font-family': var(--joy-font-family),
13411
14048
  'legend-font-letter-spacing': var(--joy-typography-caption-letter-spacing),
13412
14049
  'legend-font-line-height': var(--joy-typography-caption-line-height),
@@ -13414,10 +14051,10 @@ $video-props: (
13414
14051
  'legend-font-text-decoration': var(--joy-typography-caption-text-decoration),
13415
14052
  'legend-font-text-transform': var(--joy-typography-caption-text-transform),
13416
14053
  'legend-font-weight': var(--joy-typography-caption-font-weight),
13417
- 'padding-bottom': 16px,
13418
- 'padding-left': 16px,
13419
- 'padding-right': 16px,
13420
- 'padding-top': 16px,
14054
+ 'padding-bottom': calc(var(--joy-layout-space) * 2),
14055
+ 'padding-left': calc(var(--joy-layout-space) * 2),
14056
+ 'padding-right': calc(var(--joy-layout-space) * 2),
14057
+ 'padding-top': calc(var(--joy-layout-space) * 2),
13421
14058
  'shadow': unset unset unset unset unset,
13422
14059
  'shadow-blur': unset,
13423
14060
  'shadow-color': unset,
@@ -13472,7 +14109,7 @@ $virtualize-props: (
13472
14109
  * ------------------------------------------------------------------------------
13473
14110
  */
13474
14111
  $wizard-props: (
13475
- 'border-color': unset,
14112
+ 'border-color': none,
13476
14113
  'font-family': unset,
13477
14114
  'font-letter-spacing': unset,
13478
14115
  'font-line-height': unset,
@@ -13513,11 +14150,11 @@ $wizard-step-props: (
13513
14150
  'font-text-decoration': unset,
13514
14151
  'font-text-transform': unset,
13515
14152
  'font-weight': unset,
13516
- 'gap': 8px,
13517
- 'padding-bottom': 8px,
13518
- 'padding-left': 16px,
13519
- 'padding-right': 16px,
13520
- 'padding-top': 8px,
14153
+ 'gap': var(--joy-layout-space),
14154
+ 'padding-bottom': var(--joy-layout-space),
14155
+ 'padding-left': calc(var(--joy-layout-space) * 2),
14156
+ 'padding-right': calc(var(--joy-layout-space) * 2),
14157
+ 'padding-top': var(--joy-layout-space),
13521
14158
  'shadow': unset unset unset unset unset,
13522
14159
  'shadow-blur': unset,
13523
14160
  'shadow-color': unset,
@@ -13546,7 +14183,7 @@ $wrap-props: (
13546
14183
  'font-text-decoration': unset,
13547
14184
  'font-text-transform': unset,
13548
14185
  'font-weight': unset,
13549
- 'gap': 0px,
14186
+ 'gap': none,
13550
14187
  'padding-bottom': unset,
13551
14188
  'padding-left': unset,
13552
14189
  'padding-right': unset,