strata-ui-react 0.3.0 → 0.3.2

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.
@@ -4617,7 +4617,7 @@ const Tooltip = ({ children: t, ...n }) => /* @__PURE__ */ jsx(Tooltip$1.Provide
4617
4617
  className: cn("group relative inset-shadow-1-shadow flex h-[26px] w-[50px] items-center rounded-full bg-size-[6.5rem_100%] bg-surface-dim p-0.5 outline-2 outline-transparent transition-colors ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full hover:cursor-pointer not-disabled:hover:outline-accent disabled:pointer-events-none disabled:opacity-50 data-checked:bg-accent data-checked:active:bg-gray-500", n),
4618
4618
  ref: c,
4619
4619
  ...l,
4620
- children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "size-[14px] translate-x-[6px] rounded-full bg-accent shadow-xs transition-transform duration-500 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] data-checked:size-[18px] data-checked:translate-x-[26px] data-checked:scale-[1.1] data-checked:bg-on-accent data-unchecked:bg-accent" })
4620
+ children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "raised-1 size-[14px] translate-x-[6px] rounded-full bg-accent transition-transform duration-500 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] data-checked:size-[18px] data-checked:translate-x-[26px] data-checked:scale-[1.1] data-checked:bg-on-accent data-unchecked:bg-accent" })
4621
4621
  }), t && /* @__PURE__ */ jsx(Label, {
4622
4622
  htmlFor: l.id,
4623
4623
  children: t
package/dist/styles.css CHANGED
@@ -16,68 +16,6 @@
16
16
  --radius-3xl: 1.5rem;
17
17
  --default-transition-duration: 150ms;
18
18
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
19
- --color-black-75: #181818ff;
20
- --color-black-100: #1e1e1eff;
21
- --color-black-150: #242424ff;
22
- --color-black-200: #2a2a2aff;
23
- --color-black-250: #303030ff;
24
- --color-black-300: #373737ff;
25
- --color-black-400: #404040ff;
26
- --color-black-500: #4a4a4aff;
27
- --color-black-600: #555555ff;
28
- --color-black-700: #666666ff;
29
- --color-black-800: #7a7a7aff;
30
- --color-blue-100: #6bf4ffff;
31
- --color-blue-300: #00dbe7ff;
32
- --color-blue-400: #00aab3ff;
33
- --color-blue-500: #009ba4ff;
34
- --color-blue-600: #007b82ff;
35
- --color-blue-900: #002b2eff;
36
- --color-green-100: #8ef991ff;
37
- --color-green-200: #6aee6fff;
38
- --color-green-300: #4caf50ff;
39
- --color-green-500: #449e48ff;
40
- --color-green-700: #255d27ff;
41
- --color-green-800: #143815ff;
42
- --color-green-900: #0e2c0fff;
43
- --color-lime-100: #daec3dff;
44
- --color-lime-200: #cbdc38ff;
45
- --color-lime-400: #94a126ff;
46
- --color-lime-500: #879322ff;
47
- --color-lime-600: #6b7519ff;
48
- --color-lime-900: #242804ff;
49
- --color-orange-100: #ffdac5ff;
50
- --color-orange-200: #ffc6a2ff;
51
- --color-orange-300: #ff9800ff;
52
- --color-orange-400: #de8400ff;
53
- --color-orange-500: #cb7800ff;
54
- --color-orange-700: #7a4600ff;
55
- --color-orange-800: #4b2900ff;
56
- --color-orange-900: #3b1f00ff;
57
- --color-red-100: #fbd9d8ff;
58
- --color-red-200: #f9c5c4ff;
59
- --color-red-400: #f5706aff;
60
- --color-red-500: #f44336ff;
61
- --color-red-700: #9c241aff;
62
- --color-red-800: #62130cff;
63
- --color-red-900: #4e0d08ff;
64
- --color-slate-100: #dee1e6ff;
65
- --color-slate-400: #8f9aacff;
66
- --color-slate-500: #838d9dff;
67
- --color-slate-600: #67707dff;
68
- --color-slate-700: #393e46ff;
69
- --color-slate-900: #23262cff;
70
- --color-white-25: #fcfcfdff;
71
- --color-white-50: #fafafbff;
72
- --color-white-75: #f7f8f9ff;
73
- --color-white-100: #f4f5f6ff;
74
- --color-white-150: #f1f2f4ff;
75
- --color-white-200: #eceef0ff;
76
- --color-white-300: #e1e3e6ff;
77
- --color-white-400: #d9dce0ff;
78
- --color-white-600: #c4c7ccff;
79
- --color-white-700: #b8bbc0ff;
80
- --color-white-900: #96999dff;
81
19
  --color-primary: var(--strata-primary);
82
20
  --font-heading: var(--strata-font-heading);
83
21
  --font-body: var(--strata-font-body);
@@ -858,9 +796,6 @@
858
796
  .shadow-lg {
859
797
  box-shadow: var(--shadow-position) var(--shadow-position) var(--shadow-blur) 0 var(--shadow-color);
860
798
  }
861
- .shadow-xs {
862
- box-shadow: var(--shadow-position) var(--shadow-position) var(--shadow-blur) 0 var(--shadow-color);
863
- }
864
799
  .outline {
865
800
  outline-style: var(--tw-outline-style);
866
801
  outline-width: 1px;
@@ -1614,166 +1549,293 @@
1614
1549
  }
1615
1550
  }
1616
1551
  }
1617
- @layer base {
1618
- :root {
1619
- --strata-primary: var(--color-blue-500);
1620
- --strata-on-primary: var(--color-white-200);
1621
- --strata-primary-container: var(--color-blue-100);
1622
- --strata-on-primary-container: var(--color-blue-600);
1623
- --strata-on-primary-container-variant: var(--color-blue-900);
1624
- --strata-secondary: var(--color-slate-700);
1625
- --strata-on-secondary: var(--color-white-200);
1626
- --strata-secondary-container: var(--color-slate-100);
1627
- --strata-on-secondary-container: var(--color-slate-600);
1628
- --strata-on-secondary-container-variant: var(--color-slate-900);
1629
- --strata-accent: var(--color-lime-500);
1630
- --strata-on-accent: var(--color-white-200);
1631
- --strata-accent-container: var(--color-lime-100);
1632
- --strata-on-accent-container: var(--color-lime-600);
1633
- --strata-on-accent-container-variant: var(--color-lime-900);
1634
- --strata-error: var(--color-red-500);
1635
- --strata-on-error: var(--color-white-200);
1636
- --strata-error-container: var(--color-red-100);
1637
- --strata-on-error-container: var(--color-red-800);
1638
- --strata-on-error-container-variant: var(--color-red-700);
1639
- --strata-success: var(--color-green-500);
1640
- --strata-on-success: var(--color-white-200);
1641
- --strata-success-container: var(--color-green-100);
1642
- --strata-on-success-container: var(--color-green-800);
1643
- --strata-on-success-container-variant: var(--color-green-700);
1644
- --strata-warning: var(--color-orange-500);
1645
- --strata-on-warning: var(--color-white-200);
1646
- --strata-warning-container: var(--color-orange-100);
1647
- --strata-on-warning-container: var(--color-orange-800);
1648
- --strata-on-warning-container-variant: var(--color-orange-700);
1649
- --strata-surface-dim: var(--color-white-300);
1650
- --strata-surface: var(--color-white-200);
1651
- --strata-surface-bright: var(--color-white-150);
1652
- --strata-surface-container-lowest: var(--color-white-150);
1653
- --strata-surface-container-low: var(--color-white-100);
1654
- --strata-surface-container: var(--color-white-75);
1655
- --strata-surface-container-high: var(--color-white-50);
1656
- --strata-surface-container-highest: var(--color-white-25);
1657
- --strata-on-surface: var(--color-black-200);
1658
- --strata-on-surface-variant: var(--color-black-800);
1659
- --strata-outline: var(--color-white-900);
1660
- --strata-outline-variant: var(--color-white-600);
1661
- --strata-inverse-surface: var(--color-black-100);
1662
- --strata-inverse-on-surface: var(--color-white-200);
1663
- --strata-inverse-primary: var(--color-blue-300);
1664
- --strata-scrim: #00000059;
1665
- --strata-shadow: #00000040;
1666
- --strata-glass-fill-lowest: #ffffff14;
1667
- --strata-glass-fill-low: #ffffff1f;
1668
- --strata-glass-fill-medium: #ffffff29;
1669
- --strata-glass-fill-high: #ffffff33;
1670
- --strata-glass-fill-highest: #ffffff40;
1671
- --strata-on-glass: var(--color-black-400);
1672
- --strata-on-glass-variant: var(--color-black-700);
1673
- --strata-inverse-glass-fill: #1e1e1eff;
1674
- --strata-inverse-on-glass: var(--color-white-400);
1675
- --strata-glass-outline-lowest: #ffffff66;
1676
- --strata-glass-outline-low: #ffffff80;
1677
- --strata-glass-outline-medium: #ffffff99;
1678
- --strata-glass-outline-high: #ffffffb2;
1679
- --strata-glass-outline-highest: #ffffffcc;
1680
- --strata-spacing-3xs: clamp(0.1875rem, 0.1619rem + 0.1136vw, 0.25rem);
1681
- --strata-spacing-2xs: clamp(0.375rem, 0.3239rem + 0.2273vw, 0.5rem);
1682
- --strata-spacing-xs: clamp(0.5625rem, 0.4858rem + 0.3409vw, 0.75rem);
1683
- --strata-spacing-sm: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
1684
- --strata-spacing-md: clamp(1.125rem, 0.9716rem + 0.6818vw, 1.5rem);
1685
- --strata-spacing-lg: clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
1686
- --strata-spacing-xl: clamp(2.25rem, 1.9432rem + 1.3636vw, 3rem);
1687
- --strata-spacing-2xl: clamp(3rem, 2.5909rem + 1.8182vw, 4rem);
1688
- --strata-spacing-3xl: clamp(4.5rem, 3.8864rem + 2.7273vw, 6rem);
1689
- --strata-spacing-3xs-2xs: clamp(0.1875rem, 0.0597rem + 0.5682vw, 0.5rem);
1690
- --strata-spacing-2xs-xs: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
1691
- --strata-spacing-xs-s: clamp(0.5625rem, 0.3835rem + 0.7955vw, 1rem);
1692
- --strata-spacing-s-m: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
1693
- --strata-spacing-m-l: clamp(1.125rem, 0.767rem + 1.5909vw, 2rem);
1694
- --strata-spacing-l-xl: clamp(1.5rem, 0.8864rem + 2.7273vw, 3rem);
1695
- --strata-spacing-xl-2xl: clamp(2.25rem, 1.5341rem + 3.1818vw, 4rem);
1696
- --strata-spacing-2xl-3xl: clamp(3rem, 1.7727rem + 5.4545vw, 6rem);
1697
- --strata-font-display: "Sora", sans-serif;
1698
- --strata-font-heading: "Space Grotesk", sans-serif;
1699
- --strata-font-body: "IBM Plex Sans", sans-serif;
1700
- --strata-text-xs: clamp(0.5926rem, 0.5509rem + 0.1852vw, 0.6944rem);
1701
- --strata-text-sm: clamp(0.6667rem, 0.5985rem + 0.303vw, 0.8333rem);
1702
- --strata-text-base: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
1703
- --strata-text-lg: clamp(0.8438rem, 0.698rem + 0.6477vw, 1.2rem);
1704
- --strata-text-xl: clamp(0.9492rem, 0.7484rem + 0.8923vw, 1.44rem);
1705
- --strata-text-2xl: clamp(1.0679rem, 0.7978rem + 1.2002vw, 1.728rem);
1706
- --strata-text-3xl: clamp(1.2014rem, 0.8445rem + 1.5859vw, 2.0736rem);
1707
- --strata-text-4xl: clamp(1.3515rem, 0.8865rem + 2.0669vw, 2.4883rem);
1708
- --strata-blur-1: blur(8px);
1709
- --strata-blur-2: blur(12px);
1710
- --strata-blur-3: blur(16px);
1711
- --strata-blur-4: blur(20px);
1712
- --strata-blur-5: blur(24px);
1713
- }
1714
- .dark {
1715
- --strata-primary: var(--color-blue-400);
1716
- --strata-on-primary: var(--color-black-100);
1717
- --strata-primary-container: var(--color-blue-900);
1718
- --strata-on-primary-container: var(--color-blue-400);
1719
- --strata-on-primary-container-variant: var(--color-blue-100);
1720
- --strata-secondary: var(--color-slate-500);
1721
- --strata-on-secondary: var(--color-black-100);
1722
- --strata-secondary-container: var(--color-slate-900);
1723
- --strata-on-secondary-container: var(--color-slate-400);
1724
- --strata-on-secondary-container-variant: var(--color-slate-100);
1725
- --strata-accent: var(--color-lime-200);
1726
- --strata-on-accent: var(--color-black-100);
1727
- --strata-accent-container: var(--color-lime-900);
1728
- --strata-on-accent-container: var(--color-lime-400);
1729
- --strata-on-accent-container-variant: var(--color-lime-100);
1730
- --strata-error: var(--color-red-500);
1731
- --strata-on-error: var(--color-black-100);
1732
- --strata-error-container: var(--color-red-900);
1733
- --strata-on-error-container: var(--color-red-400);
1734
- --strata-on-error-container-variant: var(--color-red-200);
1735
- --strata-success: var(--color-green-300);
1736
- --strata-on-success: var(--color-black-100);
1737
- --strata-success-container: var(--color-green-900);
1738
- --strata-on-success-container: var(--color-green-200);
1739
- --strata-on-success-container-variant: var(--color-green-300);
1740
- --strata-warning: var(--color-orange-300);
1741
- --strata-on-warning: var(--color-black-100);
1742
- --strata-warning-container: var(--color-orange-900);
1743
- --strata-on-warning-container: var(--color-orange-400);
1744
- --strata-on-warning-container-variant: var(--color-orange-200);
1745
- --strata-surface-dim: var(--color-black-75);
1746
- --strata-surface: var(--color-black-100);
1747
- --strata-surface-bright: var(--color-black-150);
1748
- --strata-surface-container-lowest: var(--color-black-200);
1749
- --strata-surface-container-low: var(--color-black-250);
1750
- --strata-surface-container: var(--color-black-300);
1751
- --strata-surface-container-high: var(--color-black-400);
1752
- --strata-surface-container-highest: var(--color-black-500);
1753
- --strata-on-surface: var(--color-white-200);
1754
- --strata-on-surface-variant: var(--color-white-900);
1755
- --strata-outline: var(--color-black-600);
1756
- --strata-outline-variant: var(--color-black-400);
1757
- --strata-inverse-surface: var(--color-white-200);
1758
- --strata-inverse-on-surface: var(--color-black-200);
1759
- --strata-inverse-primary: var(--color-blue-600);
1760
- --strata-scrim: #00000059;
1761
- --strata-shadow: #00000099;
1762
- --strata-glass-fill-lowest: #19191926;
1763
- --strata-glass-fill-low: #19191933;
1764
- --strata-glass-fill-medium: #19191940;
1765
- --strata-glass-fill-high: #1919194d;
1766
- --strata-glass-fill-highest: #19191959;
1767
- --strata-on-glass: var(--color-white-400);
1768
- --strata-on-glass-variant: var(--color-white-700);
1769
- --strata-inverse-glass-fill: #eceef0ff;
1770
- --strata-inverse-on-glass: var(--color-black-400);
1771
- --strata-glass-outline-lowest: #ffffff33;
1772
- --strata-glass-outline-low: #ffffff4d;
1773
- --strata-glass-outline-medium: #ffffff66;
1774
- --strata-glass-outline-high: #ffffff80;
1775
- --strata-glass-outline-highest: #ffffff99;
1776
- }
1552
+ :root {
1553
+ --color-amber-50: #fff1efff;
1554
+ --color-amber-100: #ffd8d3ff;
1555
+ --color-amber-200: #ffc6bcff;
1556
+ --color-amber-300: #ffb4a6ff;
1557
+ --color-amber-400: #ff6b35ff;
1558
+ --color-amber-500: #f25a00ff;
1559
+ --color-amber-600: #c24700ff;
1560
+ --color-amber-700: #923300ff;
1561
+ --color-amber-800: #6a2300ff;
1562
+ --color-amber-900: #481500ff;
1563
+ --color-amber-950: #2e0a00ff;
1564
+ --color-black-25: #0a0a0aff;
1565
+ --color-black-50: #121212ff;
1566
+ --color-black-75: #181818ff;
1567
+ --color-black-100: #1e1e1eff;
1568
+ --color-black-150: #242424ff;
1569
+ --color-black-200: #2a2a2aff;
1570
+ --color-black-250: #303030ff;
1571
+ --color-black-300: #373737ff;
1572
+ --color-black-400: #404040ff;
1573
+ --color-black-500: #4a4a4aff;
1574
+ --color-black-600: #555555ff;
1575
+ --color-black-700: #666666ff;
1576
+ --color-black-800: #7a7a7aff;
1577
+ --color-black-900: #9c9c9cff;
1578
+ --color-black-950: #0a0a0aff;
1579
+ --color-blue-50: #d6fbffff;
1580
+ --color-blue-100: #6bf4ffff;
1581
+ --color-blue-200: #00e9f6ff;
1582
+ --color-blue-300: #00dbe7ff;
1583
+ --color-blue-400: #00aab3ff;
1584
+ --color-blue-500: #009ba4ff;
1585
+ --color-blue-600: #007b82ff;
1586
+ --color-blue-700: #005c61ff;
1587
+ --color-blue-800: #00373bff;
1588
+ --color-blue-900: #002b2eff;
1589
+ --color-blue-950: #001a1cff;
1590
+ --color-green-50: #ddfcdeff;
1591
+ --color-green-100: #8ef991ff;
1592
+ --color-green-200: #6aee6fff;
1593
+ --color-green-300: #4caf50ff;
1594
+ --color-green-400: #4bad4fff;
1595
+ --color-green-500: #449e48ff;
1596
+ --color-green-600: #357e38ff;
1597
+ --color-green-700: #255d27ff;
1598
+ --color-green-800: #143815ff;
1599
+ --color-green-900: #0e2c0fff;
1600
+ --color-green-950: #061a06ff;
1601
+ --color-lime-50: #eefe75ff;
1602
+ --color-lime-100: #daec3dff;
1603
+ --color-lime-200: #cbdc38ff;
1604
+ --color-lime-300: #c0d034ff;
1605
+ --color-lime-400: #94a126ff;
1606
+ --color-lime-500: #879322ff;
1607
+ --color-lime-600: #6b7519ff;
1608
+ --color-lime-700: #4f5610ff;
1609
+ --color-lime-800: #2f3406ff;
1610
+ --color-lime-900: #242804ff;
1611
+ --color-lime-950: #151802ff;
1612
+ --color-orange-50: #fff2ebff;
1613
+ --color-orange-100: #ffdac5ff;
1614
+ --color-orange-200: #ffc6a2ff;
1615
+ --color-orange-300: #ff9800ff;
1616
+ --color-orange-400: #de8400ff;
1617
+ --color-orange-500: #cb7800ff;
1618
+ --color-orange-600: #a25f00ff;
1619
+ --color-orange-700: #7a4600ff;
1620
+ --color-orange-800: #4b2900ff;
1621
+ --color-orange-900: #3b1f00ff;
1622
+ --color-orange-950: #251100ff;
1623
+ --color-red-50: #fef1f1ff;
1624
+ --color-red-100: #fbd9d8ff;
1625
+ --color-red-200: #f9c5c4ff;
1626
+ --color-red-300: #f69693ff;
1627
+ --color-red-400: #f5706aff;
1628
+ --color-red-500: #f44336ff;
1629
+ --color-red-600: #d03326ff;
1630
+ --color-red-700: #9c241aff;
1631
+ --color-red-800: #62130cff;
1632
+ --color-red-900: #4e0d08ff;
1633
+ --color-red-950: #320603ff;
1634
+ --color-slate-50: #f3f4f6ff;
1635
+ --color-slate-100: #dee1e6ff;
1636
+ --color-slate-200: #cdd2daff;
1637
+ --color-slate-300: #a9b1bfff;
1638
+ --color-slate-400: #8f9aacff;
1639
+ --color-slate-500: #838d9dff;
1640
+ --color-slate-600: #67707dff;
1641
+ --color-slate-700: #393e46ff;
1642
+ --color-slate-800: #2d3138ff;
1643
+ --color-slate-900: #23262cff;
1644
+ --color-slate-950: #14161aff;
1645
+ --color-white-25: #fcfcfdff;
1646
+ --color-white-50: #fafafbff;
1647
+ --color-white-75: #f7f8f9ff;
1648
+ --color-white-100: #f4f5f6ff;
1649
+ --color-white-150: #f1f2f4ff;
1650
+ --color-white-200: #eceef0ff;
1651
+ --color-white-250: #e7e9ebff;
1652
+ --color-white-300: #e1e3e6ff;
1653
+ --color-white-400: #d9dce0ff;
1654
+ --color-white-500: #cfd2d6ff;
1655
+ --color-white-600: #c4c7ccff;
1656
+ --color-white-700: #b8bbc0ff;
1657
+ --color-white-800: #a8abafff;
1658
+ --color-white-900: #96999dff;
1659
+ --color-white-950: #96999dff;
1660
+ --color-limegreen-50: #eefe75ff;
1661
+ --color-limegreen-100: #daec3dff;
1662
+ --color-limegreen-200: #cbdc38ff;
1663
+ --color-limegreen-300: #c0d034ff;
1664
+ --color-limegreen-400: #94a126ff;
1665
+ --color-limegreen-500: #879322ff;
1666
+ --color-limegreen-600: #6b7519ff;
1667
+ --color-limegreen-700: #4f5610ff;
1668
+ --color-limegreen-800: #2f3406ff;
1669
+ --color-limegreen-900: #242804ff;
1670
+ --color-limegreen-950: #151802ff;
1671
+ --color-grey-50: #f3f4f6ff;
1672
+ --color-grey-100: #dee1e6ff;
1673
+ --color-grey-200: #cdd2daff;
1674
+ --color-grey-300: #a9b1bfff;
1675
+ --color-grey-400: #8f9aacff;
1676
+ --color-grey-500: #838d9dff;
1677
+ --color-grey-600: #67707dff;
1678
+ --color-grey-700: #393e46ff;
1679
+ --color-grey-800: #2d3138ff;
1680
+ --color-grey-900: #23262cff;
1681
+ --color-grey-950: #14161aff;
1682
+ --strata-primary: var(--color-blue-500);
1683
+ --strata-on-primary: var(--color-white-200);
1684
+ --strata-primary-container: var(--color-blue-100);
1685
+ --strata-on-primary-container: var(--color-blue-600);
1686
+ --strata-on-primary-container-variant: var(--color-blue-900);
1687
+ --strata-secondary: var(--color-slate-700);
1688
+ --strata-on-secondary: var(--color-white-200);
1689
+ --strata-secondary-container: var(--color-slate-100);
1690
+ --strata-on-secondary-container: var(--color-slate-600);
1691
+ --strata-on-secondary-container-variant: var(--color-slate-900);
1692
+ --strata-accent: var(--color-lime-500);
1693
+ --strata-on-accent: var(--color-white-200);
1694
+ --strata-accent-container: var(--color-lime-100);
1695
+ --strata-on-accent-container: var(--color-lime-600);
1696
+ --strata-on-accent-container-variant: var(--color-lime-900);
1697
+ --strata-error: var(--color-red-500);
1698
+ --strata-on-error: var(--color-white-200);
1699
+ --strata-error-container: var(--color-red-100);
1700
+ --strata-on-error-container: var(--color-red-800);
1701
+ --strata-on-error-container-variant: var(--color-red-700);
1702
+ --strata-success: var(--color-green-500);
1703
+ --strata-on-success: var(--color-white-200);
1704
+ --strata-success-container: var(--color-green-100);
1705
+ --strata-on-success-container: var(--color-green-800);
1706
+ --strata-on-success-container-variant: var(--color-green-700);
1707
+ --strata-warning: var(--color-orange-500);
1708
+ --strata-on-warning: var(--color-white-200);
1709
+ --strata-warning-container: var(--color-orange-100);
1710
+ --strata-on-warning-container: var(--color-orange-800);
1711
+ --strata-on-warning-container-variant: var(--color-orange-700);
1712
+ --strata-surface-dim: var(--color-white-300);
1713
+ --strata-surface: var(--color-white-200);
1714
+ --strata-surface-bright: var(--color-white-150);
1715
+ --strata-surface-container-lowest: var(--color-white-150);
1716
+ --strata-surface-container-low: var(--color-white-100);
1717
+ --strata-surface-container: var(--color-white-75);
1718
+ --strata-surface-container-high: var(--color-white-50);
1719
+ --strata-surface-container-highest: var(--color-white-25);
1720
+ --strata-on-surface: var(--color-black-200);
1721
+ --strata-on-surface-variant: var(--color-black-800);
1722
+ --strata-outline: var(--color-white-900);
1723
+ --strata-outline-variant: var(--color-white-600);
1724
+ --strata-inverse-surface: var(--color-black-100);
1725
+ --strata-inverse-on-surface: var(--color-white-200);
1726
+ --strata-inverse-primary: var(--color-blue-300);
1727
+ --strata-scrim: #00000059;
1728
+ --strata-shadow: #00000040;
1729
+ --strata-glass-fill-lowest: #ffffff14;
1730
+ --strata-glass-fill-low: #ffffff1f;
1731
+ --strata-glass-fill-medium: #ffffff29;
1732
+ --strata-glass-fill-high: #ffffff33;
1733
+ --strata-glass-fill-highest: #ffffff40;
1734
+ --strata-on-glass: var(--color-black-400);
1735
+ --strata-on-glass-variant: var(--color-black-700);
1736
+ --strata-inverse-glass-fill: #1e1e1eff;
1737
+ --strata-inverse-on-glass: var(--color-white-400);
1738
+ --strata-glass-outline-lowest: #ffffff66;
1739
+ --strata-glass-outline-low: #ffffff80;
1740
+ --strata-glass-outline-medium: #ffffff99;
1741
+ --strata-glass-outline-high: #ffffffb2;
1742
+ --strata-glass-outline-highest: #ffffffcc;
1743
+ --strata-spacing-3xs: clamp(0.1875rem, 0.1619rem + 0.1136vw, 0.25rem);
1744
+ --strata-spacing-2xs: clamp(0.375rem, 0.3239rem + 0.2273vw, 0.5rem);
1745
+ --strata-spacing-xs: clamp(0.5625rem, 0.4858rem + 0.3409vw, 0.75rem);
1746
+ --strata-spacing-sm: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
1747
+ --strata-spacing-md: clamp(1.125rem, 0.9716rem + 0.6818vw, 1.5rem);
1748
+ --strata-spacing-lg: clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
1749
+ --strata-spacing-xl: clamp(2.25rem, 1.9432rem + 1.3636vw, 3rem);
1750
+ --strata-spacing-2xl: clamp(3rem, 2.5909rem + 1.8182vw, 4rem);
1751
+ --strata-spacing-3xl: clamp(4.5rem, 3.8864rem + 2.7273vw, 6rem);
1752
+ --strata-spacing-3xs-2xs: clamp(0.1875rem, 0.0597rem + 0.5682vw, 0.5rem);
1753
+ --strata-spacing-2xs-xs: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
1754
+ --strata-spacing-xs-s: clamp(0.5625rem, 0.3835rem + 0.7955vw, 1rem);
1755
+ --strata-spacing-s-m: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
1756
+ --strata-spacing-m-l: clamp(1.125rem, 0.767rem + 1.5909vw, 2rem);
1757
+ --strata-spacing-l-xl: clamp(1.5rem, 0.8864rem + 2.7273vw, 3rem);
1758
+ --strata-spacing-xl-2xl: clamp(2.25rem, 1.5341rem + 3.1818vw, 4rem);
1759
+ --strata-spacing-2xl-3xl: clamp(3rem, 1.7727rem + 5.4545vw, 6rem);
1760
+ --strata-font-display: "Sora", sans-serif;
1761
+ --strata-font-heading: "Space Grotesk", sans-serif;
1762
+ --strata-font-body: "IBM Plex Sans", sans-serif;
1763
+ --strata-text-xs: clamp(0.5926rem, 0.5509rem + 0.1852vw, 0.6944rem);
1764
+ --strata-text-sm: clamp(0.6667rem, 0.5985rem + 0.303vw, 0.8333rem);
1765
+ --strata-text-base: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
1766
+ --strata-text-lg: clamp(0.8438rem, 0.698rem + 0.6477vw, 1.2rem);
1767
+ --strata-text-xl: clamp(0.9492rem, 0.7484rem + 0.8923vw, 1.44rem);
1768
+ --strata-text-2xl: clamp(1.0679rem, 0.7978rem + 1.2002vw, 1.728rem);
1769
+ --strata-text-3xl: clamp(1.2014rem, 0.8445rem + 1.5859vw, 2.0736rem);
1770
+ --strata-text-4xl: clamp(1.3515rem, 0.8865rem + 2.0669vw, 2.4883rem);
1771
+ --strata-blur-1: blur(8px);
1772
+ --strata-blur-2: blur(12px);
1773
+ --strata-blur-3: blur(16px);
1774
+ --strata-blur-4: blur(20px);
1775
+ --strata-blur-5: blur(24px);
1776
+ }
1777
+ .dark {
1778
+ --strata-primary: var(--color-blue-400);
1779
+ --strata-on-primary: var(--color-black-100);
1780
+ --strata-primary-container: var(--color-blue-900);
1781
+ --strata-on-primary-container: var(--color-blue-400);
1782
+ --strata-on-primary-container-variant: var(--color-blue-100);
1783
+ --strata-secondary: var(--color-slate-500);
1784
+ --strata-on-secondary: var(--color-black-100);
1785
+ --strata-secondary-container: var(--color-slate-900);
1786
+ --strata-on-secondary-container: var(--color-slate-400);
1787
+ --strata-on-secondary-container-variant: var(--color-slate-100);
1788
+ --strata-accent: var(--color-lime-200);
1789
+ --strata-on-accent: var(--color-black-100);
1790
+ --strata-accent-container: var(--color-lime-900);
1791
+ --strata-on-accent-container: var(--color-lime-400);
1792
+ --strata-on-accent-container-variant: var(--color-lime-100);
1793
+ --strata-error: var(--color-red-500);
1794
+ --strata-on-error: var(--color-black-100);
1795
+ --strata-error-container: var(--color-red-900);
1796
+ --strata-on-error-container: var(--color-red-400);
1797
+ --strata-on-error-container-variant: var(--color-red-200);
1798
+ --strata-success: var(--color-green-300);
1799
+ --strata-on-success: var(--color-black-100);
1800
+ --strata-success-container: var(--color-green-900);
1801
+ --strata-on-success-container: var(--color-green-200);
1802
+ --strata-on-success-container-variant: var(--color-green-300);
1803
+ --strata-warning: var(--color-orange-300);
1804
+ --strata-on-warning: var(--color-black-100);
1805
+ --strata-warning-container: var(--color-orange-900);
1806
+ --strata-on-warning-container: var(--color-orange-400);
1807
+ --strata-on-warning-container-variant: var(--color-orange-200);
1808
+ --strata-surface-dim: var(--color-black-75);
1809
+ --strata-surface: var(--color-black-100);
1810
+ --strata-surface-bright: var(--color-black-150);
1811
+ --strata-surface-container-lowest: var(--color-black-200);
1812
+ --strata-surface-container-low: var(--color-black-250);
1813
+ --strata-surface-container: var(--color-black-300);
1814
+ --strata-surface-container-high: var(--color-black-400);
1815
+ --strata-surface-container-highest: var(--color-black-500);
1816
+ --strata-on-surface: var(--color-white-200);
1817
+ --strata-on-surface-variant: var(--color-white-900);
1818
+ --strata-outline: var(--color-black-600);
1819
+ --strata-outline-variant: var(--color-black-400);
1820
+ --strata-inverse-surface: var(--color-white-200);
1821
+ --strata-inverse-on-surface: var(--color-black-200);
1822
+ --strata-inverse-primary: var(--color-blue-600);
1823
+ --strata-scrim: #00000059;
1824
+ --strata-shadow: #00000099;
1825
+ --strata-glass-fill-lowest: #19191926;
1826
+ --strata-glass-fill-low: #19191933;
1827
+ --strata-glass-fill-medium: #19191940;
1828
+ --strata-glass-fill-high: #1919194d;
1829
+ --strata-glass-fill-highest: #19191959;
1830
+ --strata-on-glass: var(--color-white-400);
1831
+ --strata-on-glass-variant: var(--color-white-700);
1832
+ --strata-inverse-glass-fill: #eceef0ff;
1833
+ --strata-inverse-on-glass: var(--color-black-400);
1834
+ --strata-glass-outline-lowest: #ffffff33;
1835
+ --strata-glass-outline-low: #ffffff4d;
1836
+ --strata-glass-outline-medium: #ffffff66;
1837
+ --strata-glass-outline-high: #ffffff80;
1838
+ --strata-glass-outline-highest: #ffffff99;
1777
1839
  }
1778
1840
  @property --tw-translate-x {
1779
1841
  syntax: "*";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "strata-ui-react",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "type": "module",
5
5
  "author": "PHNTMbandit",
6
6
  "repository": {