@raxium/themes 0.1.6 → 0.1.7

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.
@@ -56,24 +56,30 @@
56
56
  --z-max: 2147483647;
57
57
  --color-rz-green: oklch(76.87% 0.2343 141.32);
58
58
  --color-rz-green-dark: oklch(47.48% 0.2343 141.32);
59
- --color-rz-green-dark-hover: oklch(59.25% 0.2343 141.32);
60
- --color-rz-green-dark-active: oklch(33.16% 0.2343 141.32);
61
- --color-rz-green-light: oklch(82.23% 0.2343 141.32);
62
- --color-rz-green-border: oklch(45.35% 0.2343 141.32);
63
- --color-rz-green-border-hover: oklch(70.57% 0.2343 141.32);
64
- --color-rz-green-border-active: oklch(45.88% 0.2343 141.32);
59
+ --color-rz-green-light: oklch(82.45% 0.2343 141.32);
60
+ --color-rz-green-border: oklch(59.19% 0.2343 141.32);
65
61
  --color-rz-orange: oklch(80.16% 0.1705 73.27);
66
- --color-rz-red: oklch(62.32% 0.2121 25.89);
62
+ --color-rz-orange-light: oklch(85.98% 0.1705 73.27);
63
+ --color-rz-orange-dark: oklch(49.51% 0.1705 73.27);
64
+ --color-rz-orange-border: oklch(61.72% 0.1705 73.27);
65
+ --color-rz-red: oklch(49.67% 0.202 29.03);
66
+ --color-rz-red-light: oklch(53.28% 0.202 29.03);
67
+ --color-rz-red-dark: oklch(30.68% 0.202 29.03);
68
+ --color-rz-red-border: oklch(38.25% 0.202 29.03);
67
69
  --color-rz-blue: oklch(69% 0.1282 229.93);
70
+ --color-rz-blue-light: oklch(74.01% 0.1282 229.93);
71
+ --color-rz-blue-dark: oklch(42.62% 0.1282 229.93);
72
+ --color-rz-blue-border: oklch(53.13% 0.1282 229.93);
73
+ --color-rz-neutral: oklch(54.52% 0 0);
74
+ --color-rz-neutral-light: oklch(58.48% 0 0);
75
+ --color-rz-neutral-dark: oklch(33.68% 0 0);
76
+ --color-rz-neutral-border: oklch(41.98% 0 0);
68
77
  --color-black: oklch(0% 0 0);
69
78
  --color-h00: oklch(0% 0 0);
70
79
  --color-white: oklch(100% 0 0);
71
80
  --color-hff: oklch(100% 0 0);
72
81
  --color-h70: oklch(54.52% 0 0);
73
82
  --color-h4f: oklch(42.76% 0 0);
74
- --color-h9b: oklch(68.95% 0 0);
75
- --color-h83: oklch(61% 0 0);
76
- --color-h37: oklch(33.68% 0 0);
77
83
  --color-hcc: oklch(84.52% 0 0);
78
84
  --color-hbb: oklch(79.21% 0 0);
79
85
  --color-h33: oklch(32.11% 0 0);
@@ -81,7 +87,6 @@
81
87
  --color-h8f: oklch(65% 0 0);
82
88
  --color-h1a: oklch(21.78% 0 0);
83
89
  --color-ha7: oklch(72.84% 0 0);
84
- --color-h5e: oklch(48.19% 0 0);
85
90
  --color-h4c: oklch(41.65% 0 0);
86
91
  --color-h55: oklch(44.95% 0 0);
87
92
  --color-h54: oklch(44.59% 0 0);
@@ -299,6 +304,9 @@
299
304
  .inset-0 {
300
305
  inset: calc(var(--spacing) * 0);
301
306
  }
307
+ .end {
308
+ inset-inline-end: var(--spacing);
309
+ }
302
310
  .-top-\[\.5em\] {
303
311
  top: calc(.5em * -1);
304
312
  }
@@ -1792,130 +1800,608 @@
1792
1800
  }
1793
1801
  @layer components {
1794
1802
  .rui-btn {
1795
- &[data-variant="default"] {
1796
- --rui-ripple-color: var(--color-rz-green-border);
1797
- border-color: var(--color-rz-green-border);
1798
- background-color: var(--color-rz-green);
1799
- color: var(--color-h00);
1800
- &:hover {
1801
- @media (hover: hover) {
1802
- border-color: var(--color-rz-green-border-hover);
1803
+ &[data-variant='solid'] {
1804
+ &[data-color='primary'] {
1805
+ --rui-ripple-color: var(--color-rz-green-border);
1806
+ border-color: var(--color-rz-green-border);
1807
+ background-color: var(--color-rz-green);
1808
+ color: var(--color-h00);
1809
+ &:hover {
1810
+ @media (hover: hover) {
1811
+ background-color: var(--color-rz-green-light);
1812
+ }
1803
1813
  }
1804
- }
1805
- &:hover {
1806
- @media (hover: hover) {
1807
- background-color: var(--color-rz-green-light);
1814
+ &:active {
1815
+ background-color: var(--color-rz-green-dark);
1808
1816
  }
1809
1817
  }
1810
- &:hover {
1811
- @media (hover: hover) {
1812
- --tw-ring-color: var(--color-rz-green-border-hover);
1818
+ &[data-color='default'] {
1819
+ --rui-ripple-color: var(--color-h4f);
1820
+ border-color: var(--color-rz-neutral-border);
1821
+ background-color: var(--color-rz-neutral);
1822
+ color: var(--color-hff);
1823
+ &:hover {
1824
+ @media (hover: hover) {
1825
+ background-color: var(--color-rz-neutral-light);
1826
+ }
1827
+ }
1828
+ &:active {
1829
+ background-color: var(--color-rz-neutral-dark);
1813
1830
  }
1814
1831
  }
1815
- &:active {
1816
- border-color: var(--color-rz-green-border-active);
1832
+ &[data-color='danger'] {
1833
+ --rui-ripple-color: var(--color-rz-red);
1834
+ border-color: var(--color-rz-red-border);
1835
+ background-color: var(--color-rz-red);
1836
+ color: var(--color-hff);
1837
+ &:hover {
1838
+ @media (hover: hover) {
1839
+ background-color: var(--color-rz-red-light);
1840
+ }
1841
+ }
1842
+ &:active {
1843
+ background-color: var(--color-rz-red-dark);
1844
+ }
1817
1845
  }
1818
- &:active {
1819
- background-color: var(--color-rz-green-dark-active);
1846
+ &[data-color='warning'] {
1847
+ --rui-ripple-color: var(--color-rz-orange);
1848
+ border-color: var(--color-rz-orange-border);
1849
+ background-color: var(--color-rz-orange);
1850
+ color: var(--color-hff);
1851
+ &:hover {
1852
+ @media (hover: hover) {
1853
+ background-color: var(--color-rz-orange-light);
1854
+ }
1855
+ }
1856
+ &:active {
1857
+ background-color: var(--color-rz-orange-dark);
1858
+ }
1820
1859
  }
1821
- &:active {
1822
- --tw-ring-color: var(--color-rz-green-border-active);
1860
+ &[data-color='info'] {
1861
+ --rui-ripple-color: var(--color-rz-blue);
1862
+ border-color: var(--color-rz-blue-border);
1863
+ background-color: var(--color-rz-blue);
1864
+ color: var(--color-hff);
1865
+ &:hover {
1866
+ @media (hover: hover) {
1867
+ background-color: var(--color-rz-blue-light);
1868
+ }
1869
+ }
1870
+ &:active {
1871
+ background-color: var(--color-rz-blue-dark);
1872
+ }
1823
1873
  }
1824
1874
  }
1825
- &[data-variant="normal"] {
1826
- --rui-ripple-color: var(--color-h4f);
1827
- border-color: var(--color-h4f);
1828
- background-color: var(--color-h70);
1829
- color: var(--color-hff);
1830
- &:hover {
1831
- @media (hover: hover) {
1832
- border-color: var(--color-h83);
1875
+ &[data-variant='outlined'] {
1876
+ background-color: transparent;
1877
+ &[data-color='primary'] {
1878
+ --rui-ripple-color: var(--color-rz-green);
1879
+ border-color: var(--color-rz-green-border);
1880
+ color: var(--color-rz-green);
1881
+ &:hover {
1882
+ @media (hover: hover) {
1883
+ border-color: var(--color-rz-green-light);
1884
+ }
1885
+ }
1886
+ &:hover {
1887
+ @media (hover: hover) {
1888
+ color: var(--color-rz-green-light);
1889
+ }
1890
+ }
1891
+ &:active {
1892
+ border-color: var(--color-rz-green-dark);
1893
+ }
1894
+ &:active {
1895
+ color: var(--color-rz-green-dark);
1833
1896
  }
1834
1897
  }
1835
- &:hover {
1836
- @media (hover: hover) {
1837
- background-color: var(--color-h9b);
1898
+ &[data-color='default'] {
1899
+ --rui-ripple-color: var(--color-hcc);
1900
+ border-color: var(--color-rz-neutral-border);
1901
+ color: var(--color-h90);
1902
+ &:hover {
1903
+ @media (hover: hover) {
1904
+ border-color: var(--color-rz-neutral-light);
1905
+ }
1906
+ }
1907
+ &:hover {
1908
+ @media (hover: hover) {
1909
+ color: var(--color-hff);
1910
+ }
1911
+ }
1912
+ &:active {
1913
+ border-color: var(--color-rz-neutral-dark);
1914
+ }
1915
+ &:active {
1916
+ color: var(--color-rz-neutral);
1838
1917
  }
1839
1918
  }
1840
- &:hover {
1841
- @media (hover: hover) {
1842
- --tw-ring-color: var(--color-h83);
1919
+ &[data-color='danger'] {
1920
+ --rui-ripple-color: var(--color-rz-red);
1921
+ border-color: var(--color-rz-red-border);
1922
+ color: var(--color-rz-red);
1923
+ &:hover {
1924
+ @media (hover: hover) {
1925
+ border-color: var(--color-rz-red-light);
1926
+ }
1927
+ }
1928
+ &:hover {
1929
+ @media (hover: hover) {
1930
+ color: var(--color-rz-red-light);
1931
+ }
1932
+ }
1933
+ &:active {
1934
+ border-color: var(--color-rz-red-dark);
1935
+ }
1936
+ &:active {
1937
+ color: var(--color-rz-red-dark);
1843
1938
  }
1844
1939
  }
1845
- &:active {
1846
- border-color: var(--color-h37);
1940
+ &[data-color='warning'] {
1941
+ --rui-ripple-color: var(--color-rz-orange);
1942
+ border-color: var(--color-rz-orange-border);
1943
+ color: var(--color-rz-orange);
1944
+ &:hover {
1945
+ @media (hover: hover) {
1946
+ border-color: var(--color-rz-orange-light);
1947
+ }
1948
+ }
1949
+ &:hover {
1950
+ @media (hover: hover) {
1951
+ color: var(--color-rz-orange-light);
1952
+ }
1953
+ }
1954
+ &:active {
1955
+ border-color: var(--color-rz-orange-dark);
1956
+ }
1957
+ &:active {
1958
+ color: var(--color-rz-orange-dark);
1959
+ }
1847
1960
  }
1848
- &:active {
1849
- background-color: var(--color-h4f);
1961
+ &[data-color='info'] {
1962
+ --rui-ripple-color: var(--color-rz-blue);
1963
+ border-color: var(--color-rz-blue-border);
1964
+ color: var(--color-rz-blue);
1965
+ &:hover {
1966
+ @media (hover: hover) {
1967
+ border-color: var(--color-rz-blue-light);
1968
+ }
1969
+ }
1970
+ &:hover {
1971
+ @media (hover: hover) {
1972
+ color: var(--color-rz-blue-light);
1973
+ }
1974
+ }
1975
+ &:active {
1976
+ border-color: var(--color-rz-blue-dark);
1977
+ }
1978
+ &:active {
1979
+ color: var(--color-rz-blue-dark);
1980
+ }
1850
1981
  }
1851
- &:active {
1852
- --tw-ring-color: var(--color-h37);
1982
+ }
1983
+ &[data-variant='filled'] {
1984
+ border-color: transparent;
1985
+ &[data-color='primary'] {
1986
+ --rui-ripple-color: var(--color-rz-green);
1987
+ background-color: color-mix(in srgb, oklch(76.87% 0.2343 141.32) 15%, transparent);
1988
+ @supports (color: color-mix(in lab, red, red)) {
1989
+ background-color: color-mix(in oklab, var(--color-rz-green) 15%, transparent);
1990
+ }
1991
+ color: var(--color-rz-green);
1992
+ &:hover {
1993
+ @media (hover: hover) {
1994
+ background-color: color-mix(in srgb, oklch(82.45% 0.2343 141.32) 30%, transparent);
1995
+ @supports (color: color-mix(in lab, red, red)) {
1996
+ background-color: color-mix(in oklab, var(--color-rz-green-light) 30%, transparent);
1997
+ }
1998
+ }
1999
+ }
2000
+ &:active {
2001
+ background-color: color-mix(in srgb, oklch(47.48% 0.2343 141.32) 15%, transparent);
2002
+ @supports (color: color-mix(in lab, red, red)) {
2003
+ background-color: color-mix(in oklab, var(--color-rz-green-dark) 15%, transparent);
2004
+ }
2005
+ }
2006
+ }
2007
+ &[data-color='default'] {
2008
+ --rui-ripple-color: var(--color-h4f);
2009
+ background-color: color-mix(in srgb, oklch(54.52% 0 0) 15%, transparent);
2010
+ @supports (color: color-mix(in lab, red, red)) {
2011
+ background-color: color-mix(in oklab, var(--color-rz-neutral) 15%, transparent);
2012
+ }
2013
+ color: var(--color-hff);
2014
+ &:hover {
2015
+ @media (hover: hover) {
2016
+ background-color: color-mix(in srgb, oklch(58.48% 0 0) 30%, transparent);
2017
+ @supports (color: color-mix(in lab, red, red)) {
2018
+ background-color: color-mix(in oklab, var(--color-rz-neutral-light) 30%, transparent);
2019
+ }
2020
+ }
2021
+ }
2022
+ &:active {
2023
+ background-color: color-mix(in srgb, oklch(33.68% 0 0) 15%, transparent);
2024
+ @supports (color: color-mix(in lab, red, red)) {
2025
+ background-color: color-mix(in oklab, var(--color-rz-neutral-dark) 15%, transparent);
2026
+ }
2027
+ }
2028
+ }
2029
+ &[data-color='danger'] {
2030
+ --rui-ripple-color: var(--color-rz-red);
2031
+ background-color: color-mix(in srgb, oklch(49.67% 0.202 29.03) 15%, transparent);
2032
+ @supports (color: color-mix(in lab, red, red)) {
2033
+ background-color: color-mix(in oklab, var(--color-rz-red) 15%, transparent);
2034
+ }
2035
+ color: var(--color-rz-red);
2036
+ &:hover {
2037
+ @media (hover: hover) {
2038
+ background-color: color-mix(in srgb, oklch(53.28% 0.202 29.03) 30%, transparent);
2039
+ @supports (color: color-mix(in lab, red, red)) {
2040
+ background-color: color-mix(in oklab, var(--color-rz-red-light) 30%, transparent);
2041
+ }
2042
+ }
2043
+ }
2044
+ &:active {
2045
+ background-color: color-mix(in srgb, oklch(30.68% 0.202 29.03) 15%, transparent);
2046
+ @supports (color: color-mix(in lab, red, red)) {
2047
+ background-color: color-mix(in oklab, var(--color-rz-red-dark) 15%, transparent);
2048
+ }
2049
+ }
2050
+ }
2051
+ &[data-color='warning'] {
2052
+ --rui-ripple-color: var(--color-rz-orange);
2053
+ background-color: color-mix(in srgb, oklch(80.16% 0.1705 73.27) 15%, transparent);
2054
+ @supports (color: color-mix(in lab, red, red)) {
2055
+ background-color: color-mix(in oklab, var(--color-rz-orange) 15%, transparent);
2056
+ }
2057
+ color: var(--color-rz-orange);
2058
+ &:hover {
2059
+ @media (hover: hover) {
2060
+ background-color: color-mix(in srgb, oklch(85.98% 0.1705 73.27) 30%, transparent);
2061
+ @supports (color: color-mix(in lab, red, red)) {
2062
+ background-color: color-mix(in oklab, var(--color-rz-orange-light) 30%, transparent);
2063
+ }
2064
+ }
2065
+ }
2066
+ &:active {
2067
+ background-color: color-mix(in srgb, oklch(49.51% 0.1705 73.27) 15%, transparent);
2068
+ @supports (color: color-mix(in lab, red, red)) {
2069
+ background-color: color-mix(in oklab, var(--color-rz-orange-dark) 15%, transparent);
2070
+ }
2071
+ }
2072
+ }
2073
+ &[data-color='info'] {
2074
+ --rui-ripple-color: var(--color-rz-blue);
2075
+ background-color: color-mix(in srgb, oklch(69% 0.1282 229.93) 15%, transparent);
2076
+ @supports (color: color-mix(in lab, red, red)) {
2077
+ background-color: color-mix(in oklab, var(--color-rz-blue) 15%, transparent);
2078
+ }
2079
+ color: var(--color-rz-blue);
2080
+ &:hover {
2081
+ @media (hover: hover) {
2082
+ background-color: color-mix(in srgb, oklch(74.01% 0.1282 229.93) 30%, transparent);
2083
+ @supports (color: color-mix(in lab, red, red)) {
2084
+ background-color: color-mix(in oklab, var(--color-rz-blue-light) 30%, transparent);
2085
+ }
2086
+ }
2087
+ }
2088
+ &:active {
2089
+ background-color: color-mix(in srgb, oklch(42.62% 0.1282 229.93) 15%, transparent);
2090
+ @supports (color: color-mix(in lab, red, red)) {
2091
+ background-color: color-mix(in oklab, var(--color-rz-blue-dark) 15%, transparent);
2092
+ }
2093
+ }
1853
2094
  }
1854
2095
  }
1855
- &[data-variant="outline"] {
1856
- --rui-ripple-color: var(--color-hcc);
1857
- border-color: var(--color-hcc);
2096
+ &[data-variant='text'] {
2097
+ --tw-border-style: none;
2098
+ border-style: none;
1858
2099
  background-color: transparent;
1859
- color: var(--color-hcc);
1860
- &:hover {
1861
- @media (hover: hover) {
1862
- border-color: var(--color-hff);
2100
+ &[data-color='primary'] {
2101
+ --rui-ripple-color: var(--color-rz-green);
2102
+ color: var(--color-rz-green);
2103
+ &:hover {
2104
+ @media (hover: hover) {
2105
+ background-color: color-mix(in srgb, oklch(82.45% 0.2343 141.32) 30%, transparent);
2106
+ @supports (color: color-mix(in lab, red, red)) {
2107
+ background-color: color-mix(in oklab, var(--color-rz-green-light) 30%, transparent);
2108
+ }
2109
+ }
2110
+ }
2111
+ &:hover {
2112
+ @media (hover: hover) {
2113
+ color: var(--color-rz-green-light);
2114
+ }
2115
+ }
2116
+ &:active {
2117
+ background-color: color-mix(in srgb, oklch(47.48% 0.2343 141.32) 15%, transparent);
2118
+ @supports (color: color-mix(in lab, red, red)) {
2119
+ background-color: color-mix(in oklab, var(--color-rz-green-dark) 15%, transparent);
2120
+ }
1863
2121
  }
1864
2122
  }
1865
- &:hover {
1866
- @media (hover: hover) {
1867
- --tw-ring-color: var(--color-hff);
2123
+ &[data-color='default'] {
2124
+ --rui-ripple-color: var(--color-h8f);
2125
+ color: var(--color-h90);
2126
+ &:hover {
2127
+ @media (hover: hover) {
2128
+ background-color: color-mix(in srgb, oklch(58.48% 0 0) 30%, transparent);
2129
+ @supports (color: color-mix(in lab, red, red)) {
2130
+ background-color: color-mix(in oklab, var(--color-rz-neutral-light) 30%, transparent);
2131
+ }
2132
+ }
2133
+ }
2134
+ &:hover {
2135
+ @media (hover: hover) {
2136
+ color: var(--color-hff);
2137
+ }
2138
+ }
2139
+ &:active {
2140
+ background-color: color-mix(in srgb, oklch(33.68% 0 0) 15%, transparent);
2141
+ @supports (color: color-mix(in lab, red, red)) {
2142
+ background-color: color-mix(in oklab, var(--color-rz-neutral-dark) 15%, transparent);
2143
+ }
2144
+ }
2145
+ &:active {
2146
+ color: var(--color-h90);
1868
2147
  }
1869
2148
  }
1870
- &:active {
1871
- border-color: var(--color-hbb);
2149
+ &[data-color='danger'] {
2150
+ --rui-ripple-color: var(--color-rz-red);
2151
+ color: var(--color-rz-red);
2152
+ &:hover {
2153
+ @media (hover: hover) {
2154
+ background-color: color-mix(in srgb, oklch(53.28% 0.202 29.03) 30%, transparent);
2155
+ @supports (color: color-mix(in lab, red, red)) {
2156
+ background-color: color-mix(in oklab, var(--color-rz-red-light) 30%, transparent);
2157
+ }
2158
+ }
2159
+ }
2160
+ &:hover {
2161
+ @media (hover: hover) {
2162
+ color: var(--color-rz-red-light);
2163
+ }
2164
+ }
2165
+ &:active {
2166
+ background-color: color-mix(in srgb, oklch(30.68% 0.202 29.03) 15%, transparent);
2167
+ @supports (color: color-mix(in lab, red, red)) {
2168
+ background-color: color-mix(in oklab, var(--color-rz-red-dark) 15%, transparent);
2169
+ }
2170
+ }
1872
2171
  }
1873
- &:active {
1874
- --tw-ring-color: var(--color-hbb);
2172
+ &[data-color='warning'] {
2173
+ --rui-ripple-color: var(--color-rz-orange);
2174
+ color: var(--color-rz-orange);
2175
+ &:hover {
2176
+ @media (hover: hover) {
2177
+ background-color: color-mix(in srgb, oklch(85.98% 0.1705 73.27) 30%, transparent);
2178
+ @supports (color: color-mix(in lab, red, red)) {
2179
+ background-color: color-mix(in oklab, var(--color-rz-orange-light) 30%, transparent);
2180
+ }
2181
+ }
2182
+ }
2183
+ &:hover {
2184
+ @media (hover: hover) {
2185
+ color: var(--color-rz-orange-light);
2186
+ }
2187
+ }
2188
+ &:active {
2189
+ background-color: color-mix(in srgb, oklch(49.51% 0.1705 73.27) 15%, transparent);
2190
+ @supports (color: color-mix(in lab, red, red)) {
2191
+ background-color: color-mix(in oklab, var(--color-rz-orange-dark) 15%, transparent);
2192
+ }
2193
+ }
2194
+ }
2195
+ &[data-color='info'] {
2196
+ --rui-ripple-color: var(--color-rz-blue);
2197
+ color: var(--color-rz-blue);
2198
+ &:hover {
2199
+ @media (hover: hover) {
2200
+ background-color: color-mix(in srgb, oklch(74.01% 0.1282 229.93) 30%, transparent);
2201
+ @supports (color: color-mix(in lab, red, red)) {
2202
+ background-color: color-mix(in oklab, var(--color-rz-blue-light) 30%, transparent);
2203
+ }
2204
+ }
2205
+ }
2206
+ &:hover {
2207
+ @media (hover: hover) {
2208
+ color: var(--color-rz-blue-light);
2209
+ }
2210
+ }
2211
+ &:active {
2212
+ background-color: color-mix(in srgb, oklch(42.62% 0.1282 229.93) 15%, transparent);
2213
+ @supports (color: color-mix(in lab, red, red)) {
2214
+ background-color: color-mix(in oklab, var(--color-rz-blue-dark) 15%, transparent);
2215
+ }
2216
+ }
1875
2217
  }
1876
2218
  }
1877
- &[data-variant="text"] {
1878
- --rui-ripple-color: var(--color-h8f);
2219
+ &[data-variant='link'] {
1879
2220
  --tw-border-style: none;
1880
2221
  border-style: none;
1881
2222
  background-color: transparent;
1882
- color: var(--color-hcc);
1883
- &:hover {
1884
- @media (hover: hover) {
1885
- background-color: var(--color-h33);
2223
+ text-decoration-line: underline;
2224
+ text-underline-offset: 2px;
2225
+ &[data-color='primary'] {
2226
+ --rui-ripple-color: var(--color-rz-green);
2227
+ color: var(--color-rz-green);
2228
+ &:hover {
2229
+ @media (hover: hover) {
2230
+ color: var(--color-rz-green-light);
2231
+ }
2232
+ }
2233
+ &:active {
2234
+ color: var(--color-rz-green-dark);
1886
2235
  }
1887
2236
  }
1888
- &:hover {
1889
- @media (hover: hover) {
1890
- color: var(--color-hff);
2237
+ &[data-color='default'] {
2238
+ --rui-ripple-color: var(--color-h8f);
2239
+ color: var(--color-h90);
2240
+ &:hover {
2241
+ @media (hover: hover) {
2242
+ color: var(--color-hff);
2243
+ }
2244
+ }
2245
+ &:active {
2246
+ color: var(--color-h90);
1891
2247
  }
1892
2248
  }
1893
- &:active {
1894
- background-color: var(--color-h24);
2249
+ &[data-color='danger'] {
2250
+ --rui-ripple-color: var(--color-rz-red);
2251
+ color: var(--color-rz-red);
2252
+ &:hover {
2253
+ @media (hover: hover) {
2254
+ color: var(--color-rz-red-light);
2255
+ }
2256
+ }
2257
+ &:active {
2258
+ color: var(--color-rz-red-dark);
2259
+ }
1895
2260
  }
1896
- &:active {
1897
- color: var(--color-h8f);
2261
+ &[data-color='warning'] {
2262
+ --rui-ripple-color: var(--color-rz-orange);
2263
+ color: var(--color-rz-orange);
2264
+ &:hover {
2265
+ @media (hover: hover) {
2266
+ color: var(--color-rz-orange-light);
2267
+ }
2268
+ }
2269
+ &:active {
2270
+ color: var(--color-rz-orange-dark);
2271
+ }
2272
+ }
2273
+ &[data-color='info'] {
2274
+ --rui-ripple-color: var(--color-rz-blue);
2275
+ color: var(--color-rz-blue);
2276
+ &:hover {
2277
+ @media (hover: hover) {
2278
+ color: var(--color-rz-blue-light);
2279
+ }
2280
+ }
2281
+ &:active {
2282
+ color: var(--color-rz-blue-dark);
2283
+ }
1898
2284
  }
1899
2285
  }
1900
- &[data-variant="icon"] {
1901
- --rui-ripple-color: var(--color-h8f);
2286
+ &[data-variant='icon'] {
1902
2287
  background-color: transparent;
1903
- color: var(--color-hcc);
1904
- &:hover {
1905
- @media (hover: hover) {
1906
- background-color: var(--color-h33);
2288
+ &[data-color='primary'] {
2289
+ --rui-ripple-color: var(--color-rz-green);
2290
+ color: var(--color-rz-green);
2291
+ &:hover {
2292
+ @media (hover: hover) {
2293
+ background-color: color-mix(in srgb, oklch(82.45% 0.2343 141.32) 30%, transparent);
2294
+ @supports (color: color-mix(in lab, red, red)) {
2295
+ background-color: color-mix(in oklab, var(--color-rz-green-light) 30%, transparent);
2296
+ }
2297
+ }
2298
+ }
2299
+ &:hover {
2300
+ @media (hover: hover) {
2301
+ color: var(--color-rz-green-light);
2302
+ }
2303
+ }
2304
+ &:active {
2305
+ background-color: color-mix(in srgb, oklch(47.48% 0.2343 141.32) 15%, transparent);
2306
+ @supports (color: color-mix(in lab, red, red)) {
2307
+ background-color: color-mix(in oklab, var(--color-rz-green-dark) 15%, transparent);
2308
+ }
1907
2309
  }
1908
2310
  }
1909
- &:hover {
1910
- @media (hover: hover) {
1911
- color: var(--color-hff);
2311
+ &[data-color='default'] {
2312
+ --rui-ripple-color: var(--color-h8f);
2313
+ color: var(--color-h90);
2314
+ &:hover {
2315
+ @media (hover: hover) {
2316
+ background-color: color-mix(in srgb, oklch(58.48% 0 0) 30%, transparent);
2317
+ @supports (color: color-mix(in lab, red, red)) {
2318
+ background-color: color-mix(in oklab, var(--color-rz-neutral-light) 30%, transparent);
2319
+ }
2320
+ }
2321
+ }
2322
+ &:hover {
2323
+ @media (hover: hover) {
2324
+ color: var(--color-hff);
2325
+ }
2326
+ }
2327
+ &:active {
2328
+ background-color: color-mix(in srgb, oklch(33.68% 0 0) 15%, transparent);
2329
+ @supports (color: color-mix(in lab, red, red)) {
2330
+ background-color: color-mix(in oklab, var(--color-rz-neutral-dark) 15%, transparent);
2331
+ }
2332
+ }
2333
+ &:active {
2334
+ color: var(--color-h90);
1912
2335
  }
1913
2336
  }
1914
- &:active {
1915
- background-color: var(--color-h24);
2337
+ &[data-color='danger'] {
2338
+ --rui-ripple-color: var(--color-rz-red);
2339
+ color: var(--color-rz-red);
2340
+ &:hover {
2341
+ @media (hover: hover) {
2342
+ background-color: color-mix(in srgb, oklch(53.28% 0.202 29.03) 30%, transparent);
2343
+ @supports (color: color-mix(in lab, red, red)) {
2344
+ background-color: color-mix(in oklab, var(--color-rz-red-light) 30%, transparent);
2345
+ }
2346
+ }
2347
+ }
2348
+ &:hover {
2349
+ @media (hover: hover) {
2350
+ color: var(--color-rz-red-light);
2351
+ }
2352
+ }
2353
+ &:active {
2354
+ background-color: color-mix(in srgb, oklch(30.68% 0.202 29.03) 15%, transparent);
2355
+ @supports (color: color-mix(in lab, red, red)) {
2356
+ background-color: color-mix(in oklab, var(--color-rz-red-dark) 15%, transparent);
2357
+ }
2358
+ }
1916
2359
  }
1917
- &:active {
1918
- color: var(--color-h8f);
2360
+ &[data-color='warning'] {
2361
+ --rui-ripple-color: var(--color-rz-orange);
2362
+ color: var(--color-rz-orange);
2363
+ &:hover {
2364
+ @media (hover: hover) {
2365
+ background-color: color-mix(in srgb, oklch(85.98% 0.1705 73.27) 30%, transparent);
2366
+ @supports (color: color-mix(in lab, red, red)) {
2367
+ background-color: color-mix(in oklab, var(--color-rz-orange-light) 30%, transparent);
2368
+ }
2369
+ }
2370
+ }
2371
+ &:hover {
2372
+ @media (hover: hover) {
2373
+ color: var(--color-rz-orange-light);
2374
+ }
2375
+ }
2376
+ &:active {
2377
+ background-color: color-mix(in srgb, oklch(49.51% 0.1705 73.27) 15%, transparent);
2378
+ @supports (color: color-mix(in lab, red, red)) {
2379
+ background-color: color-mix(in oklab, var(--color-rz-orange-dark) 15%, transparent);
2380
+ }
2381
+ }
2382
+ }
2383
+ &[data-color='info'] {
2384
+ --rui-ripple-color: var(--color-rz-blue);
2385
+ color: var(--color-rz-blue);
2386
+ &:hover {
2387
+ @media (hover: hover) {
2388
+ background-color: color-mix(in srgb, oklch(74.01% 0.1282 229.93) 30%, transparent);
2389
+ @supports (color: color-mix(in lab, red, red)) {
2390
+ background-color: color-mix(in oklab, var(--color-rz-blue-light) 30%, transparent);
2391
+ }
2392
+ }
2393
+ }
2394
+ &:hover {
2395
+ @media (hover: hover) {
2396
+ color: var(--color-rz-blue-light);
2397
+ }
2398
+ }
2399
+ &:active {
2400
+ background-color: color-mix(in srgb, oklch(42.62% 0.1282 229.93) 15%, transparent);
2401
+ @supports (color: color-mix(in lab, red, red)) {
2402
+ background-color: color-mix(in oklab, var(--color-rz-blue-dark) 15%, transparent);
2403
+ }
2404
+ }
1919
2405
  }
1920
2406
  }
1921
2407
  }
@@ -1947,10 +2433,7 @@
1947
2433
  border-color: var(--color-rz-green);
1948
2434
  }
1949
2435
  &:active {
1950
- border-color: var(--color-rz-green-dark-active);
1951
- }
1952
- &:active {
1953
- background-color: var(--color-rz-green-dark-active);
2436
+ background-color: var(--color-rz-green-dark);
1954
2437
  }
1955
2438
  &[data-state="checked"] {
1956
2439
  border-color: var(--color-rz-green);
@@ -2136,12 +2619,12 @@
2136
2619
  }
2137
2620
  &[data-state="checked"] {
2138
2621
  &:active {
2139
- border-color: var(--color-rz-green-dark-active);
2622
+ border-color: var(--color-rz-green);
2140
2623
  }
2141
2624
  }
2142
2625
  &[data-state="checked"] {
2143
2626
  &:active {
2144
- background-color: var(--color-rz-green-dark-active);
2627
+ background-color: var(--color-rz-green-dark);
2145
2628
  }
2146
2629
  }
2147
2630
  &[data-disabled] {
@@ -3089,8 +3572,9 @@
3089
3572
  }
3090
3573
  @layer components {
3091
3574
  .rui-toggle {
3092
- border-color: var(--color-h00);
3575
+ border-color: var(--color-h28);
3093
3576
  background-color: var(--color-h1a);
3577
+ color: var(--color-rui-toggle-text);
3094
3578
  &:hover {
3095
3579
  @media (hover: hover) {
3096
3580
  border-color: var(--color-h4c);
@@ -3098,41 +3582,41 @@
3098
3582
  }
3099
3583
  &:hover {
3100
3584
  @media (hover: hover) {
3101
- background-color: var(--color-h5e);
3585
+ background-color: var(--color-h33);
3102
3586
  }
3103
3587
  }
3104
3588
  &:hover {
3105
3589
  @media (hover: hover) {
3106
- --tw-ring-color: var(--color-h4c);
3590
+ color: var(--color-rui-toggle-text-hover);
3107
3591
  }
3108
3592
  }
3109
- &:active {
3110
- border-color: var(--color-h00);
3593
+ &:hover {
3594
+ @media (hover: hover) {
3595
+ --tw-ring-color: var(--color-h4c);
3596
+ }
3111
3597
  }
3112
3598
  &:active {
3113
- background-color: var(--color-h1a);
3599
+ background-color: var(--color-h24);
3114
3600
  }
3115
3601
  &:active {
3116
- color: var(--color-ha7);
3602
+ color: var(--color-rui-toggle-text-active);
3117
3603
  }
3118
3604
  &[data-state='on'] {
3119
- border-color: var(--color-rz-green-dark);
3605
+ border-color: var(--color-rz-green-border);
3120
3606
  background-color: var(--color-rz-green-dark);
3607
+ color: var(--color-hff);
3121
3608
  &:hover {
3122
3609
  @media (hover: hover) {
3123
- border-color: var(--color-rz-green-dark-hover);
3610
+ border-color: var(--color-rz-green-border);
3124
3611
  }
3125
3612
  }
3126
3613
  &:hover {
3127
3614
  @media (hover: hover) {
3128
- background-color: var(--color-rz-green-dark-hover);
3615
+ background-color: var(--color-rz-green);
3129
3616
  }
3130
3617
  }
3131
3618
  &:active {
3132
- border-color: var(--color-rz-green-dark-active);
3133
- }
3134
- &:active {
3135
- background-color: var(--color-rz-green-dark-active);
3619
+ background-color: var(--color-rz-green-dark);
3136
3620
  }
3137
3621
  &:active {
3138
3622
  color: var(--color-ha7);
@@ -3142,11 +3626,12 @@
3142
3626
  }
3143
3627
  @layer components {
3144
3628
  .rui-toggle-group {
3145
- border-color: var(--color-h55);
3629
+ border-color: var(--color-h44);
3146
3630
  }
3147
3631
  .rui-toggle-group-item {
3148
- border-color: var(--color-h55);
3632
+ border-color: var(--color-h44);
3149
3633
  background-color: var(--color-h1a);
3634
+ color: var(--color-rui-toggle-text);
3150
3635
  &:hover {
3151
3636
  @media (hover: hover) {
3152
3637
  border-color: var(--color-h4c);
@@ -3154,40 +3639,41 @@
3154
3639
  }
3155
3640
  &:hover {
3156
3641
  @media (hover: hover) {
3157
- background-color: var(--color-h5e);
3642
+ background-color: var(--color-h33);
3158
3643
  }
3159
3644
  }
3160
3645
  &:hover {
3161
3646
  @media (hover: hover) {
3162
- --tw-ring-color: var(--color-h4c);
3647
+ color: var(--color-rui-toggle-text-hover);
3163
3648
  }
3164
3649
  }
3165
- &:active {
3166
- border-color: var(--color-h00);
3650
+ &:hover {
3651
+ @media (hover: hover) {
3652
+ --tw-ring-color: var(--color-h4c);
3653
+ }
3167
3654
  }
3168
3655
  &:active {
3169
- background-color: var(--color-h1a);
3656
+ background-color: var(--color-h24);
3170
3657
  }
3171
3658
  &:active {
3172
- color: var(--color-ha7);
3659
+ color: var(--color-rui-toggle-text-active);
3173
3660
  }
3174
3661
  &[data-state='on'] {
3662
+ border-color: var(--color-rz-green-border);
3175
3663
  background-color: var(--color-rz-green-dark);
3664
+ color: var(--color-hff);
3176
3665
  &:hover {
3177
3666
  @media (hover: hover) {
3178
- border-color: var(--color-rz-green-dark-hover);
3667
+ border-color: var(--color-rz-green-border);
3179
3668
  }
3180
3669
  }
3181
3670
  &:hover {
3182
3671
  @media (hover: hover) {
3183
- background-color: var(--color-rz-green-dark-hover);
3672
+ background-color: var(--color-rz-green);
3184
3673
  }
3185
3674
  }
3186
3675
  &:active {
3187
- border-color: var(--color-rz-green-dark-active);
3188
- }
3189
- &:active {
3190
- background-color: var(--color-rz-green-dark-active);
3676
+ background-color: var(--color-rz-green-dark);
3191
3677
  }
3192
3678
  &:active {
3193
3679
  color: var(--color-ha7);
@@ -3793,10 +4279,7 @@
3793
4279
  border-color: var(--color-rz-green);
3794
4280
  }
3795
4281
  &:active {
3796
- border-color: var(--color-rz-green-dark-active);
3797
- }
3798
- &:active {
3799
- background-color: var(--color-rz-green-dark-active);
4282
+ background-color: var(--color-rz-green-dark);
3800
4283
  }
3801
4284
  &[data-state="checked"] {
3802
4285
  border-color: var(--color-rz-green);