@vaneui/md 0.3.1-alpha.20251226134656.e7f8e22 → 0.3.1-alpha.20251228133323.630b220

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.esm.js +6244 -3
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +6259 -18
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/index.css +325 -286
  6. package/package.json +6 -7
package/dist/styles/index.css CHANGED
@@ -158,6 +158,8 @@
158
158
  --py-unit: 1;
159
159
  --br-unit: 1;
160
160
  --size-unit: 1;
161
+ --bw: 1px; /* Border width */
162
+ --rw: 1px; /* Ring width */
161
163
  }
162
164
  @layer base {
163
165
  :where(*) {
@@ -436,6 +438,8 @@
436
438
  --py-unit: 1;
437
439
  --br-unit: 1;
438
440
  --size-unit: 1;
441
+ --bw: 1px;
442
+ --rw: 1px;
439
443
  }
440
444
  }
441
445
  @layer base {
@@ -951,30 +955,58 @@
951
955
  border-style: var(--tw-border-style);
952
956
  border-width: 2px;
953
957
  }
958
+ .border-\[length\:var\(--bw\)\] {
959
+ border-style: var(--tw-border-style);
960
+ border-width: var(--bw);
961
+ }
954
962
  .border-x {
955
963
  border-inline-style: var(--tw-border-style);
956
964
  border-inline-width: 1px;
957
965
  }
966
+ .border-x-\[length\:var\(--bw\)\] {
967
+ border-inline-style: var(--tw-border-style);
968
+ border-inline-width: var(--bw);
969
+ }
958
970
  .border-y {
959
971
  border-block-style: var(--tw-border-style);
960
972
  border-block-width: 1px;
961
973
  }
974
+ .border-y-\[length\:var\(--bw\)\] {
975
+ border-block-style: var(--tw-border-style);
976
+ border-block-width: var(--bw);
977
+ }
962
978
  .border-t {
963
979
  border-top-style: var(--tw-border-style);
964
980
  border-top-width: 1px;
965
981
  }
982
+ .border-t-\[length\:var\(--bw\)\] {
983
+ border-top-style: var(--tw-border-style);
984
+ border-top-width: var(--bw);
985
+ }
966
986
  .border-r {
967
987
  border-right-style: var(--tw-border-style);
968
988
  border-right-width: 1px;
969
989
  }
990
+ .border-r-\[length\:var\(--bw\)\] {
991
+ border-right-style: var(--tw-border-style);
992
+ border-right-width: var(--bw);
993
+ }
970
994
  .border-b {
971
995
  border-bottom-style: var(--tw-border-style);
972
996
  border-bottom-width: 1px;
973
997
  }
998
+ .border-b-\[length\:var\(--bw\)\] {
999
+ border-bottom-style: var(--tw-border-style);
1000
+ border-bottom-width: var(--bw);
1001
+ }
974
1002
  .border-l {
975
1003
  border-left-style: var(--tw-border-style);
976
1004
  border-left-width: 1px;
977
1005
  }
1006
+ .border-l-\[length\:var\(--bw\)\] {
1007
+ border-left-style: var(--tw-border-style);
1008
+ border-left-width: var(--bw);
1009
+ }
978
1010
  .border-dashed {
979
1011
  --tw-border-style: dashed;
980
1012
  border-style: dashed;
@@ -1054,141 +1086,9 @@
1054
1086
  .border-violet-400 {
1055
1087
  border-color: var(--color-violet-400);
1056
1088
  }
1057
- .bg-\(--color-bg-accent\) {
1058
- background-color: var(--color-bg-accent);
1059
- }
1060
- .bg-\(--color-bg-brand\) {
1061
- background-color: var(--color-bg-brand);
1062
- }
1063
- .bg-\(--color-bg-danger\) {
1064
- background-color: var(--color-bg-danger);
1065
- }
1066
- .bg-\(--color-bg-filled-accent\) {
1067
- background-color: var(--color-bg-filled-accent);
1068
- }
1069
- .bg-\(--color-bg-filled-brand\) {
1070
- background-color: var(--color-bg-filled-brand);
1071
- }
1072
- .bg-\(--color-bg-filled-danger\) {
1073
- background-color: var(--color-bg-filled-danger);
1074
- }
1075
- .bg-\(--color-bg-filled-info\) {
1076
- background-color: var(--color-bg-filled-info);
1077
- }
1078
- .bg-\(--color-bg-filled-layout-accent\) {
1079
- background-color: var(--color-bg-filled-layout-accent);
1080
- }
1081
- .bg-\(--color-bg-filled-layout-brand\) {
1082
- background-color: var(--color-bg-filled-layout-brand);
1083
- }
1084
- .bg-\(--color-bg-filled-layout-danger\) {
1085
- background-color: var(--color-bg-filled-layout-danger);
1086
- }
1087
- .bg-\(--color-bg-filled-layout-info\) {
1088
- background-color: var(--color-bg-filled-layout-info);
1089
- }
1090
- .bg-\(--color-bg-filled-layout-primary\) {
1091
- background-color: var(--color-bg-filled-layout-primary);
1092
- }
1093
- .bg-\(--color-bg-filled-layout-secondary\) {
1094
- background-color: var(--color-bg-filled-layout-secondary);
1095
- }
1096
- .bg-\(--color-bg-filled-layout-success\) {
1097
- background-color: var(--color-bg-filled-layout-success);
1098
- }
1099
- .bg-\(--color-bg-filled-layout-tertiary\) {
1100
- background-color: var(--color-bg-filled-layout-tertiary);
1101
- }
1102
- .bg-\(--color-bg-filled-layout-warning\) {
1103
- background-color: var(--color-bg-filled-layout-warning);
1104
- }
1105
1089
  .bg-\(--color-bg-filled-primary\) {
1106
1090
  background-color: var(--color-bg-filled-primary);
1107
1091
  }
1108
- .bg-\(--color-bg-filled-secondary\) {
1109
- background-color: var(--color-bg-filled-secondary);
1110
- }
1111
- .bg-\(--color-bg-filled-success\) {
1112
- background-color: var(--color-bg-filled-success);
1113
- }
1114
- .bg-\(--color-bg-filled-tertiary\) {
1115
- background-color: var(--color-bg-filled-tertiary);
1116
- }
1117
- .bg-\(--color-bg-filled-warning\) {
1118
- background-color: var(--color-bg-filled-warning);
1119
- }
1120
- .bg-\(--color-bg-info\) {
1121
- background-color: var(--color-bg-info);
1122
- }
1123
- .bg-\(--color-bg-layout-accent\) {
1124
- background-color: var(--color-bg-layout-accent);
1125
- }
1126
- .bg-\(--color-bg-layout-brand\) {
1127
- background-color: var(--color-bg-layout-brand);
1128
- }
1129
- .bg-\(--color-bg-layout-danger\) {
1130
- background-color: var(--color-bg-layout-danger);
1131
- }
1132
- .bg-\(--color-bg-layout-info\) {
1133
- background-color: var(--color-bg-layout-info);
1134
- }
1135
- .bg-\(--color-bg-layout-primary\) {
1136
- background-color: var(--color-bg-layout-primary);
1137
- }
1138
- .bg-\(--color-bg-layout-secondary\) {
1139
- background-color: var(--color-bg-layout-secondary);
1140
- }
1141
- .bg-\(--color-bg-layout-success\) {
1142
- background-color: var(--color-bg-layout-success);
1143
- }
1144
- .bg-\(--color-bg-layout-tertiary\) {
1145
- background-color: var(--color-bg-layout-tertiary);
1146
- }
1147
- .bg-\(--color-bg-layout-warning\) {
1148
- background-color: var(--color-bg-layout-warning);
1149
- }
1150
- .bg-\(--color-bg-primary\) {
1151
- background-color: var(--color-bg-primary);
1152
- }
1153
- .bg-\(--color-bg-secondary\) {
1154
- background-color: var(--color-bg-secondary);
1155
- }
1156
- .bg-\(--color-bg-success\) {
1157
- background-color: var(--color-bg-success);
1158
- }
1159
- .bg-\(--color-bg-tertiary\) {
1160
- background-color: var(--color-bg-tertiary);
1161
- }
1162
- .bg-\(--color-bg-warning\) {
1163
- background-color: var(--color-bg-warning);
1164
- }
1165
- .bg-\(--color-border-accent\) {
1166
- background-color: var(--color-border-accent);
1167
- }
1168
- .bg-\(--color-border-brand\) {
1169
- background-color: var(--color-border-brand);
1170
- }
1171
- .bg-\(--color-border-danger\) {
1172
- background-color: var(--color-border-danger);
1173
- }
1174
- .bg-\(--color-border-info\) {
1175
- background-color: var(--color-border-info);
1176
- }
1177
- .bg-\(--color-border-primary\) {
1178
- background-color: var(--color-border-primary);
1179
- }
1180
- .bg-\(--color-border-secondary\) {
1181
- background-color: var(--color-border-secondary);
1182
- }
1183
- .bg-\(--color-border-success\) {
1184
- background-color: var(--color-border-success);
1185
- }
1186
- .bg-\(--color-border-tertiary\) {
1187
- background-color: var(--color-border-tertiary);
1188
- }
1189
- .bg-\(--color-border-warning\) {
1190
- background-color: var(--color-border-warning);
1191
- }
1192
1092
  .bg-blue-500 {
1193
1093
  background-color: var(--color-blue-500);
1194
1094
  }
@@ -1210,9 +1110,6 @@
1210
1110
  .bg-red-100 {
1211
1111
  background-color: var(--color-red-100);
1212
1112
  }
1213
- .bg-transparent {
1214
- background-color: transparent;
1215
- }
1216
1113
  .bg-violet-600 {
1217
1114
  background-color: var(--color-violet-600);
1218
1115
  }
@@ -1648,6 +1545,10 @@
1648
1545
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1649
1546
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1650
1547
  }
1548
+ .ring-\[length\:var\(--rw\)\] {
1549
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--rw) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1550
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1551
+ }
1651
1552
  .shadow-orange-500\/50 {
1652
1553
  --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
1653
1554
  @supports (color: color-mix(in lab, red, red)) {
@@ -1962,6 +1863,144 @@
1962
1863
  .\[--size-unit\:5\] {
1963
1864
  --size-unit: 5;
1964
1865
  }
1866
+ .\[background\:transparent\] {
1867
+ background: transparent;
1868
+ }
1869
+ .\[background\:var\(--color-bg-accent\)\] {
1870
+ background: var(--color-bg-accent);
1871
+ }
1872
+ .\[background\:var\(--color-bg-brand\)\] {
1873
+ background: var(--color-bg-brand);
1874
+ }
1875
+ .\[background\:var\(--color-bg-danger\)\] {
1876
+ background: var(--color-bg-danger);
1877
+ }
1878
+ .\[background\:var\(--color-bg-filled-accent\)\] {
1879
+ background: var(--color-bg-filled-accent);
1880
+ }
1881
+ .\[background\:var\(--color-bg-filled-brand\)\] {
1882
+ background: var(--color-bg-filled-brand);
1883
+ }
1884
+ .\[background\:var\(--color-bg-filled-danger\)\] {
1885
+ background: var(--color-bg-filled-danger);
1886
+ }
1887
+ .\[background\:var\(--color-bg-filled-info\)\] {
1888
+ background: var(--color-bg-filled-info);
1889
+ }
1890
+ .\[background\:var\(--color-bg-filled-layout-accent\)\] {
1891
+ background: var(--color-bg-filled-layout-accent);
1892
+ }
1893
+ .\[background\:var\(--color-bg-filled-layout-brand\)\] {
1894
+ background: var(--color-bg-filled-layout-brand);
1895
+ }
1896
+ .\[background\:var\(--color-bg-filled-layout-danger\)\] {
1897
+ background: var(--color-bg-filled-layout-danger);
1898
+ }
1899
+ .\[background\:var\(--color-bg-filled-layout-info\)\] {
1900
+ background: var(--color-bg-filled-layout-info);
1901
+ }
1902
+ .\[background\:var\(--color-bg-filled-layout-primary\)\] {
1903
+ background: var(--color-bg-filled-layout-primary);
1904
+ }
1905
+ .\[background\:var\(--color-bg-filled-layout-secondary\)\] {
1906
+ background: var(--color-bg-filled-layout-secondary);
1907
+ }
1908
+ .\[background\:var\(--color-bg-filled-layout-success\)\] {
1909
+ background: var(--color-bg-filled-layout-success);
1910
+ }
1911
+ .\[background\:var\(--color-bg-filled-layout-tertiary\)\] {
1912
+ background: var(--color-bg-filled-layout-tertiary);
1913
+ }
1914
+ .\[background\:var\(--color-bg-filled-layout-warning\)\] {
1915
+ background: var(--color-bg-filled-layout-warning);
1916
+ }
1917
+ .\[background\:var\(--color-bg-filled-primary\)\] {
1918
+ background: var(--color-bg-filled-primary);
1919
+ }
1920
+ .\[background\:var\(--color-bg-filled-secondary\)\] {
1921
+ background: var(--color-bg-filled-secondary);
1922
+ }
1923
+ .\[background\:var\(--color-bg-filled-success\)\] {
1924
+ background: var(--color-bg-filled-success);
1925
+ }
1926
+ .\[background\:var\(--color-bg-filled-tertiary\)\] {
1927
+ background: var(--color-bg-filled-tertiary);
1928
+ }
1929
+ .\[background\:var\(--color-bg-filled-warning\)\] {
1930
+ background: var(--color-bg-filled-warning);
1931
+ }
1932
+ .\[background\:var\(--color-bg-info\)\] {
1933
+ background: var(--color-bg-info);
1934
+ }
1935
+ .\[background\:var\(--color-bg-layout-accent\)\] {
1936
+ background: var(--color-bg-layout-accent);
1937
+ }
1938
+ .\[background\:var\(--color-bg-layout-brand\)\] {
1939
+ background: var(--color-bg-layout-brand);
1940
+ }
1941
+ .\[background\:var\(--color-bg-layout-danger\)\] {
1942
+ background: var(--color-bg-layout-danger);
1943
+ }
1944
+ .\[background\:var\(--color-bg-layout-info\)\] {
1945
+ background: var(--color-bg-layout-info);
1946
+ }
1947
+ .\[background\:var\(--color-bg-layout-primary\)\] {
1948
+ background: var(--color-bg-layout-primary);
1949
+ }
1950
+ .\[background\:var\(--color-bg-layout-secondary\)\] {
1951
+ background: var(--color-bg-layout-secondary);
1952
+ }
1953
+ .\[background\:var\(--color-bg-layout-success\)\] {
1954
+ background: var(--color-bg-layout-success);
1955
+ }
1956
+ .\[background\:var\(--color-bg-layout-tertiary\)\] {
1957
+ background: var(--color-bg-layout-tertiary);
1958
+ }
1959
+ .\[background\:var\(--color-bg-layout-warning\)\] {
1960
+ background: var(--color-bg-layout-warning);
1961
+ }
1962
+ .\[background\:var\(--color-bg-primary\)\] {
1963
+ background: var(--color-bg-primary);
1964
+ }
1965
+ .\[background\:var\(--color-bg-secondary\)\] {
1966
+ background: var(--color-bg-secondary);
1967
+ }
1968
+ .\[background\:var\(--color-bg-success\)\] {
1969
+ background: var(--color-bg-success);
1970
+ }
1971
+ .\[background\:var\(--color-bg-tertiary\)\] {
1972
+ background: var(--color-bg-tertiary);
1973
+ }
1974
+ .\[background\:var\(--color-bg-warning\)\] {
1975
+ background: var(--color-bg-warning);
1976
+ }
1977
+ .\[background\:var\(--color-border-accent\)\] {
1978
+ background: var(--color-border-accent);
1979
+ }
1980
+ .\[background\:var\(--color-border-brand\)\] {
1981
+ background: var(--color-border-brand);
1982
+ }
1983
+ .\[background\:var\(--color-border-danger\)\] {
1984
+ background: var(--color-border-danger);
1985
+ }
1986
+ .\[background\:var\(--color-border-info\)\] {
1987
+ background: var(--color-border-info);
1988
+ }
1989
+ .\[background\:var\(--color-border-primary\)\] {
1990
+ background: var(--color-border-primary);
1991
+ }
1992
+ .\[background\:var\(--color-border-secondary\)\] {
1993
+ background: var(--color-border-secondary);
1994
+ }
1995
+ .\[background\:var\(--color-border-success\)\] {
1996
+ background: var(--color-border-success);
1997
+ }
1998
+ .\[background\:var\(--color-border-tertiary\)\] {
1999
+ background: var(--color-border-tertiary);
2000
+ }
2001
+ .\[background\:var\(--color-border-warning\)\] {
2002
+ background: var(--color-border-warning);
2003
+ }
1965
2004
  .ring-inset {
1966
2005
  --tw-ring-inset: inset;
1967
2006
  }
@@ -1970,99 +2009,99 @@
1970
2009
  visibility: visible;
1971
2010
  }
1972
2011
  }
1973
- .checked\:bg-\(--color-bg-accent\) {
2012
+ .checked\:\[background\:transparent\] {
1974
2013
  &:checked {
1975
- background-color: var(--color-bg-accent);
2014
+ background: transparent;
1976
2015
  }
1977
2016
  }
1978
- .checked\:bg-\(--color-bg-brand\) {
2017
+ .checked\:\[background\:var\(--color-bg-accent\)\] {
1979
2018
  &:checked {
1980
- background-color: var(--color-bg-brand);
2019
+ background: var(--color-bg-accent);
1981
2020
  }
1982
2021
  }
1983
- .checked\:bg-\(--color-bg-danger\) {
2022
+ .checked\:\[background\:var\(--color-bg-brand\)\] {
1984
2023
  &:checked {
1985
- background-color: var(--color-bg-danger);
2024
+ background: var(--color-bg-brand);
1986
2025
  }
1987
2026
  }
1988
- .checked\:bg-\(--color-bg-filled-accent\) {
2027
+ .checked\:\[background\:var\(--color-bg-danger\)\] {
1989
2028
  &:checked {
1990
- background-color: var(--color-bg-filled-accent);
2029
+ background: var(--color-bg-danger);
1991
2030
  }
1992
2031
  }
1993
- .checked\:bg-\(--color-bg-filled-brand\) {
2032
+ .checked\:\[background\:var\(--color-bg-filled-accent\)\] {
1994
2033
  &:checked {
1995
- background-color: var(--color-bg-filled-brand);
2034
+ background: var(--color-bg-filled-accent);
1996
2035
  }
1997
2036
  }
1998
- .checked\:bg-\(--color-bg-filled-danger\) {
2037
+ .checked\:\[background\:var\(--color-bg-filled-brand\)\] {
1999
2038
  &:checked {
2000
- background-color: var(--color-bg-filled-danger);
2039
+ background: var(--color-bg-filled-brand);
2001
2040
  }
2002
2041
  }
2003
- .checked\:bg-\(--color-bg-filled-info\) {
2042
+ .checked\:\[background\:var\(--color-bg-filled-danger\)\] {
2004
2043
  &:checked {
2005
- background-color: var(--color-bg-filled-info);
2044
+ background: var(--color-bg-filled-danger);
2006
2045
  }
2007
2046
  }
2008
- .checked\:bg-\(--color-bg-filled-primary\) {
2047
+ .checked\:\[background\:var\(--color-bg-filled-info\)\] {
2009
2048
  &:checked {
2010
- background-color: var(--color-bg-filled-primary);
2049
+ background: var(--color-bg-filled-info);
2011
2050
  }
2012
2051
  }
2013
- .checked\:bg-\(--color-bg-filled-secondary\) {
2052
+ .checked\:\[background\:var\(--color-bg-filled-primary\)\] {
2014
2053
  &:checked {
2015
- background-color: var(--color-bg-filled-secondary);
2054
+ background: var(--color-bg-filled-primary);
2016
2055
  }
2017
2056
  }
2018
- .checked\:bg-\(--color-bg-filled-success\) {
2057
+ .checked\:\[background\:var\(--color-bg-filled-secondary\)\] {
2019
2058
  &:checked {
2020
- background-color: var(--color-bg-filled-success);
2059
+ background: var(--color-bg-filled-secondary);
2021
2060
  }
2022
2061
  }
2023
- .checked\:bg-\(--color-bg-filled-tertiary\) {
2062
+ .checked\:\[background\:var\(--color-bg-filled-success\)\] {
2024
2063
  &:checked {
2025
- background-color: var(--color-bg-filled-tertiary);
2064
+ background: var(--color-bg-filled-success);
2026
2065
  }
2027
2066
  }
2028
- .checked\:bg-\(--color-bg-filled-warning\) {
2067
+ .checked\:\[background\:var\(--color-bg-filled-tertiary\)\] {
2029
2068
  &:checked {
2030
- background-color: var(--color-bg-filled-warning);
2069
+ background: var(--color-bg-filled-tertiary);
2031
2070
  }
2032
2071
  }
2033
- .checked\:bg-\(--color-bg-info\) {
2072
+ .checked\:\[background\:var\(--color-bg-filled-warning\)\] {
2034
2073
  &:checked {
2035
- background-color: var(--color-bg-info);
2074
+ background: var(--color-bg-filled-warning);
2036
2075
  }
2037
2076
  }
2038
- .checked\:bg-\(--color-bg-primary\) {
2077
+ .checked\:\[background\:var\(--color-bg-info\)\] {
2039
2078
  &:checked {
2040
- background-color: var(--color-bg-primary);
2079
+ background: var(--color-bg-info);
2041
2080
  }
2042
2081
  }
2043
- .checked\:bg-\(--color-bg-secondary\) {
2082
+ .checked\:\[background\:var\(--color-bg-primary\)\] {
2044
2083
  &:checked {
2045
- background-color: var(--color-bg-secondary);
2084
+ background: var(--color-bg-primary);
2046
2085
  }
2047
2086
  }
2048
- .checked\:bg-\(--color-bg-success\) {
2087
+ .checked\:\[background\:var\(--color-bg-secondary\)\] {
2049
2088
  &:checked {
2050
- background-color: var(--color-bg-success);
2089
+ background: var(--color-bg-secondary);
2051
2090
  }
2052
2091
  }
2053
- .checked\:bg-\(--color-bg-tertiary\) {
2092
+ .checked\:\[background\:var\(--color-bg-success\)\] {
2054
2093
  &:checked {
2055
- background-color: var(--color-bg-tertiary);
2094
+ background: var(--color-bg-success);
2056
2095
  }
2057
2096
  }
2058
- .checked\:bg-\(--color-bg-warning\) {
2097
+ .checked\:\[background\:var\(--color-bg-tertiary\)\] {
2059
2098
  &:checked {
2060
- background-color: var(--color-bg-warning);
2099
+ background: var(--color-bg-tertiary);
2061
2100
  }
2062
2101
  }
2063
- .checked\:bg-transparent {
2102
+ .checked\:\[background\:var\(--color-bg-warning\)\] {
2064
2103
  &:checked {
2065
- background-color: transparent;
2104
+ background: var(--color-bg-warning);
2066
2105
  }
2067
2106
  }
2068
2107
  .hover\:scale-105 {
@@ -2082,226 +2121,226 @@
2082
2121
  }
2083
2122
  }
2084
2123
  }
2085
- .hover\:bg-\(--color-bg-filled-hover-accent\) {
2124
+ .hover\:bg-purple-700 {
2086
2125
  &:hover {
2087
2126
  @media (hover: hover) {
2088
- background-color: var(--color-bg-filled-hover-accent);
2127
+ background-color: var(--color-purple-700);
2089
2128
  }
2090
2129
  }
2091
2130
  }
2092
- .hover\:bg-\(--color-bg-filled-hover-brand\) {
2131
+ .hover\:bg-red-200 {
2093
2132
  &:hover {
2094
2133
  @media (hover: hover) {
2095
- background-color: var(--color-bg-filled-hover-brand);
2134
+ background-color: var(--color-red-200);
2096
2135
  }
2097
2136
  }
2098
2137
  }
2099
- .hover\:bg-\(--color-bg-filled-hover-danger\) {
2138
+ .hover\:text-blue-700 {
2100
2139
  &:hover {
2101
2140
  @media (hover: hover) {
2102
- background-color: var(--color-bg-filled-hover-danger);
2141
+ color: var(--color-blue-700);
2103
2142
  }
2104
2143
  }
2105
2144
  }
2106
- .hover\:bg-\(--color-bg-filled-hover-info\) {
2145
+ .hover\:text-indigo-50 {
2107
2146
  &:hover {
2108
2147
  @media (hover: hover) {
2109
- background-color: var(--color-bg-filled-hover-info);
2148
+ color: var(--color-indigo-50);
2110
2149
  }
2111
2150
  }
2112
2151
  }
2113
- .hover\:bg-\(--color-bg-filled-hover-primary\) {
2152
+ .hover\:underline {
2114
2153
  &:hover {
2115
2154
  @media (hover: hover) {
2116
- background-color: var(--color-bg-filled-hover-primary);
2155
+ text-decoration-line: underline;
2117
2156
  }
2118
2157
  }
2119
2158
  }
2120
- .hover\:bg-\(--color-bg-filled-hover-secondary\) {
2159
+ .hover\:opacity-80 {
2121
2160
  &:hover {
2122
2161
  @media (hover: hover) {
2123
- background-color: var(--color-bg-filled-hover-secondary);
2162
+ opacity: 80%;
2124
2163
  }
2125
2164
  }
2126
2165
  }
2127
- .hover\:bg-\(--color-bg-filled-hover-success\) {
2166
+ .hover\:shadow-lg {
2128
2167
  &:hover {
2129
2168
  @media (hover: hover) {
2130
- background-color: var(--color-bg-filled-hover-success);
2169
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2170
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2131
2171
  }
2132
2172
  }
2133
2173
  }
2134
- .hover\:bg-\(--color-bg-filled-hover-tertiary\) {
2174
+ .hover\:shadow-md {
2135
2175
  &:hover {
2136
2176
  @media (hover: hover) {
2137
- background-color: var(--color-bg-filled-hover-tertiary);
2177
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2178
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2138
2179
  }
2139
2180
  }
2140
2181
  }
2141
- .hover\:bg-\(--color-bg-filled-hover-warning\) {
2182
+ .hover\:shadow-sm {
2142
2183
  &:hover {
2143
2184
  @media (hover: hover) {
2144
- background-color: var(--color-bg-filled-hover-warning);
2185
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2186
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2145
2187
  }
2146
2188
  }
2147
2189
  }
2148
- .hover\:bg-\(--color-bg-hover-accent\) {
2190
+ .hover\:shadow-xl {
2149
2191
  &:hover {
2150
2192
  @media (hover: hover) {
2151
- background-color: var(--color-bg-hover-accent);
2193
+ --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2194
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2152
2195
  }
2153
2196
  }
2154
2197
  }
2155
- .hover\:bg-\(--color-bg-hover-brand\) {
2198
+ .hover\:shadow-xs {
2156
2199
  &:hover {
2157
2200
  @media (hover: hover) {
2158
- background-color: var(--color-bg-hover-brand);
2201
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2202
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2159
2203
  }
2160
2204
  }
2161
2205
  }
2162
- .hover\:bg-\(--color-bg-hover-danger\) {
2206
+ .hover\:ring {
2163
2207
  &:hover {
2164
2208
  @media (hover: hover) {
2165
- background-color: var(--color-bg-hover-danger);
2209
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2210
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2166
2211
  }
2167
2212
  }
2168
2213
  }
2169
- .hover\:bg-\(--color-bg-hover-info\) {
2214
+ .hover\:\[background\:transparent\] {
2170
2215
  &:hover {
2171
2216
  @media (hover: hover) {
2172
- background-color: var(--color-bg-hover-info);
2217
+ background: transparent;
2173
2218
  }
2174
2219
  }
2175
2220
  }
2176
- .hover\:bg-\(--color-bg-hover-primary\) {
2221
+ .hover\:\[background\:var\(--color-bg-filled-hover-accent\)\] {
2177
2222
  &:hover {
2178
2223
  @media (hover: hover) {
2179
- background-color: var(--color-bg-hover-primary);
2224
+ background: var(--color-bg-filled-hover-accent);
2180
2225
  }
2181
2226
  }
2182
2227
  }
2183
- .hover\:bg-\(--color-bg-hover-secondary\) {
2228
+ .hover\:\[background\:var\(--color-bg-filled-hover-brand\)\] {
2184
2229
  &:hover {
2185
2230
  @media (hover: hover) {
2186
- background-color: var(--color-bg-hover-secondary);
2231
+ background: var(--color-bg-filled-hover-brand);
2187
2232
  }
2188
2233
  }
2189
2234
  }
2190
- .hover\:bg-\(--color-bg-hover-success\) {
2235
+ .hover\:\[background\:var\(--color-bg-filled-hover-danger\)\] {
2191
2236
  &:hover {
2192
2237
  @media (hover: hover) {
2193
- background-color: var(--color-bg-hover-success);
2238
+ background: var(--color-bg-filled-hover-danger);
2194
2239
  }
2195
2240
  }
2196
2241
  }
2197
- .hover\:bg-\(--color-bg-hover-tertiary\) {
2242
+ .hover\:\[background\:var\(--color-bg-filled-hover-info\)\] {
2198
2243
  &:hover {
2199
2244
  @media (hover: hover) {
2200
- background-color: var(--color-bg-hover-tertiary);
2245
+ background: var(--color-bg-filled-hover-info);
2201
2246
  }
2202
2247
  }
2203
2248
  }
2204
- .hover\:bg-\(--color-bg-hover-warning\) {
2249
+ .hover\:\[background\:var\(--color-bg-filled-hover-primary\)\] {
2205
2250
  &:hover {
2206
2251
  @media (hover: hover) {
2207
- background-color: var(--color-bg-hover-warning);
2252
+ background: var(--color-bg-filled-hover-primary);
2208
2253
  }
2209
2254
  }
2210
2255
  }
2211
- .hover\:bg-purple-700 {
2256
+ .hover\:\[background\:var\(--color-bg-filled-hover-secondary\)\] {
2212
2257
  &:hover {
2213
2258
  @media (hover: hover) {
2214
- background-color: var(--color-purple-700);
2259
+ background: var(--color-bg-filled-hover-secondary);
2215
2260
  }
2216
2261
  }
2217
2262
  }
2218
- .hover\:bg-red-200 {
2263
+ .hover\:\[background\:var\(--color-bg-filled-hover-success\)\] {
2219
2264
  &:hover {
2220
2265
  @media (hover: hover) {
2221
- background-color: var(--color-red-200);
2266
+ background: var(--color-bg-filled-hover-success);
2222
2267
  }
2223
2268
  }
2224
2269
  }
2225
- .hover\:bg-transparent {
2270
+ .hover\:\[background\:var\(--color-bg-filled-hover-tertiary\)\] {
2226
2271
  &:hover {
2227
2272
  @media (hover: hover) {
2228
- background-color: transparent;
2273
+ background: var(--color-bg-filled-hover-tertiary);
2229
2274
  }
2230
2275
  }
2231
2276
  }
2232
- .hover\:text-blue-700 {
2277
+ .hover\:\[background\:var\(--color-bg-filled-hover-warning\)\] {
2233
2278
  &:hover {
2234
2279
  @media (hover: hover) {
2235
- color: var(--color-blue-700);
2280
+ background: var(--color-bg-filled-hover-warning);
2236
2281
  }
2237
2282
  }
2238
2283
  }
2239
- .hover\:text-indigo-50 {
2284
+ .hover\:\[background\:var\(--color-bg-hover-accent\)\] {
2240
2285
  &:hover {
2241
2286
  @media (hover: hover) {
2242
- color: var(--color-indigo-50);
2287
+ background: var(--color-bg-hover-accent);
2243
2288
  }
2244
2289
  }
2245
2290
  }
2246
- .hover\:underline {
2291
+ .hover\:\[background\:var\(--color-bg-hover-brand\)\] {
2247
2292
  &:hover {
2248
2293
  @media (hover: hover) {
2249
- text-decoration-line: underline;
2294
+ background: var(--color-bg-hover-brand);
2250
2295
  }
2251
2296
  }
2252
2297
  }
2253
- .hover\:opacity-80 {
2298
+ .hover\:\[background\:var\(--color-bg-hover-danger\)\] {
2254
2299
  &:hover {
2255
2300
  @media (hover: hover) {
2256
- opacity: 80%;
2301
+ background: var(--color-bg-hover-danger);
2257
2302
  }
2258
2303
  }
2259
2304
  }
2260
- .hover\:shadow-lg {
2305
+ .hover\:\[background\:var\(--color-bg-hover-info\)\] {
2261
2306
  &:hover {
2262
2307
  @media (hover: hover) {
2263
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2264
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2308
+ background: var(--color-bg-hover-info);
2265
2309
  }
2266
2310
  }
2267
2311
  }
2268
- .hover\:shadow-md {
2312
+ .hover\:\[background\:var\(--color-bg-hover-primary\)\] {
2269
2313
  &:hover {
2270
2314
  @media (hover: hover) {
2271
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2272
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2315
+ background: var(--color-bg-hover-primary);
2273
2316
  }
2274
2317
  }
2275
2318
  }
2276
- .hover\:shadow-sm {
2319
+ .hover\:\[background\:var\(--color-bg-hover-secondary\)\] {
2277
2320
  &:hover {
2278
2321
  @media (hover: hover) {
2279
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2280
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2322
+ background: var(--color-bg-hover-secondary);
2281
2323
  }
2282
2324
  }
2283
2325
  }
2284
- .hover\:shadow-xl {
2326
+ .hover\:\[background\:var\(--color-bg-hover-success\)\] {
2285
2327
  &:hover {
2286
2328
  @media (hover: hover) {
2287
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2288
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2329
+ background: var(--color-bg-hover-success);
2289
2330
  }
2290
2331
  }
2291
2332
  }
2292
- .hover\:shadow-xs {
2333
+ .hover\:\[background\:var\(--color-bg-hover-tertiary\)\] {
2293
2334
  &:hover {
2294
2335
  @media (hover: hover) {
2295
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2296
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2336
+ background: var(--color-bg-hover-tertiary);
2297
2337
  }
2298
2338
  }
2299
2339
  }
2300
- .hover\:ring {
2340
+ .hover\:\[background\:var\(--color-bg-hover-warning\)\] {
2301
2341
  &:hover {
2302
2342
  @media (hover: hover) {
2303
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2304
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2343
+ background: var(--color-bg-hover-warning);
2305
2344
  }
2306
2345
  }
2307
2346
  }
@@ -2423,115 +2462,115 @@
2423
2462
  border-color: var(--color-green-700);
2424
2463
  }
2425
2464
  }
2426
- .active\:bg-\(--color-bg-active-accent\) {
2465
+ .active\:bg-red-300 {
2427
2466
  &:active {
2428
- background-color: var(--color-bg-active-accent);
2467
+ background-color: var(--color-red-300);
2429
2468
  }
2430
2469
  }
2431
- .active\:bg-\(--color-bg-active-brand\) {
2470
+ .active\:text-blue-900 {
2432
2471
  &:active {
2433
- background-color: var(--color-bg-active-brand);
2472
+ color: var(--color-blue-900);
2434
2473
  }
2435
2474
  }
2436
- .active\:bg-\(--color-bg-active-danger\) {
2475
+ .active\:ring {
2437
2476
  &:active {
2438
- background-color: var(--color-bg-active-danger);
2477
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2478
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2439
2479
  }
2440
2480
  }
2441
- .active\:bg-\(--color-bg-active-info\) {
2481
+ .active\:\[background\:transparent\] {
2442
2482
  &:active {
2443
- background-color: var(--color-bg-active-info);
2483
+ background: transparent;
2444
2484
  }
2445
2485
  }
2446
- .active\:bg-\(--color-bg-active-primary\) {
2486
+ .active\:\[background\:var\(--color-bg-active-accent\)\] {
2447
2487
  &:active {
2448
- background-color: var(--color-bg-active-primary);
2488
+ background: var(--color-bg-active-accent);
2449
2489
  }
2450
2490
  }
2451
- .active\:bg-\(--color-bg-active-secondary\) {
2491
+ .active\:\[background\:var\(--color-bg-active-brand\)\] {
2452
2492
  &:active {
2453
- background-color: var(--color-bg-active-secondary);
2493
+ background: var(--color-bg-active-brand);
2454
2494
  }
2455
2495
  }
2456
- .active\:bg-\(--color-bg-active-success\) {
2496
+ .active\:\[background\:var\(--color-bg-active-danger\)\] {
2457
2497
  &:active {
2458
- background-color: var(--color-bg-active-success);
2498
+ background: var(--color-bg-active-danger);
2459
2499
  }
2460
2500
  }
2461
- .active\:bg-\(--color-bg-active-tertiary\) {
2501
+ .active\:\[background\:var\(--color-bg-active-info\)\] {
2462
2502
  &:active {
2463
- background-color: var(--color-bg-active-tertiary);
2503
+ background: var(--color-bg-active-info);
2464
2504
  }
2465
2505
  }
2466
- .active\:bg-\(--color-bg-active-warning\) {
2506
+ .active\:\[background\:var\(--color-bg-active-primary\)\] {
2467
2507
  &:active {
2468
- background-color: var(--color-bg-active-warning);
2508
+ background: var(--color-bg-active-primary);
2469
2509
  }
2470
2510
  }
2471
- .active\:bg-\(--color-bg-filled-active-accent\) {
2511
+ .active\:\[background\:var\(--color-bg-active-secondary\)\] {
2472
2512
  &:active {
2473
- background-color: var(--color-bg-filled-active-accent);
2513
+ background: var(--color-bg-active-secondary);
2474
2514
  }
2475
2515
  }
2476
- .active\:bg-\(--color-bg-filled-active-brand\) {
2516
+ .active\:\[background\:var\(--color-bg-active-success\)\] {
2477
2517
  &:active {
2478
- background-color: var(--color-bg-filled-active-brand);
2518
+ background: var(--color-bg-active-success);
2479
2519
  }
2480
2520
  }
2481
- .active\:bg-\(--color-bg-filled-active-danger\) {
2521
+ .active\:\[background\:var\(--color-bg-active-tertiary\)\] {
2482
2522
  &:active {
2483
- background-color: var(--color-bg-filled-active-danger);
2523
+ background: var(--color-bg-active-tertiary);
2484
2524
  }
2485
2525
  }
2486
- .active\:bg-\(--color-bg-filled-active-info\) {
2526
+ .active\:\[background\:var\(--color-bg-active-warning\)\] {
2487
2527
  &:active {
2488
- background-color: var(--color-bg-filled-active-info);
2528
+ background: var(--color-bg-active-warning);
2489
2529
  }
2490
2530
  }
2491
- .active\:bg-\(--color-bg-filled-active-primary\) {
2531
+ .active\:\[background\:var\(--color-bg-filled-active-accent\)\] {
2492
2532
  &:active {
2493
- background-color: var(--color-bg-filled-active-primary);
2533
+ background: var(--color-bg-filled-active-accent);
2494
2534
  }
2495
2535
  }
2496
- .active\:bg-\(--color-bg-filled-active-secondary\) {
2536
+ .active\:\[background\:var\(--color-bg-filled-active-brand\)\] {
2497
2537
  &:active {
2498
- background-color: var(--color-bg-filled-active-secondary);
2538
+ background: var(--color-bg-filled-active-brand);
2499
2539
  }
2500
2540
  }
2501
- .active\:bg-\(--color-bg-filled-active-success\) {
2541
+ .active\:\[background\:var\(--color-bg-filled-active-danger\)\] {
2502
2542
  &:active {
2503
- background-color: var(--color-bg-filled-active-success);
2543
+ background: var(--color-bg-filled-active-danger);
2504
2544
  }
2505
2545
  }
2506
- .active\:bg-\(--color-bg-filled-active-tertiary\) {
2546
+ .active\:\[background\:var\(--color-bg-filled-active-info\)\] {
2507
2547
  &:active {
2508
- background-color: var(--color-bg-filled-active-tertiary);
2548
+ background: var(--color-bg-filled-active-info);
2509
2549
  }
2510
2550
  }
2511
- .active\:bg-\(--color-bg-filled-active-warning\) {
2551
+ .active\:\[background\:var\(--color-bg-filled-active-primary\)\] {
2512
2552
  &:active {
2513
- background-color: var(--color-bg-filled-active-warning);
2553
+ background: var(--color-bg-filled-active-primary);
2514
2554
  }
2515
2555
  }
2516
- .active\:bg-red-300 {
2556
+ .active\:\[background\:var\(--color-bg-filled-active-secondary\)\] {
2517
2557
  &:active {
2518
- background-color: var(--color-red-300);
2558
+ background: var(--color-bg-filled-active-secondary);
2519
2559
  }
2520
2560
  }
2521
- .active\:bg-transparent {
2561
+ .active\:\[background\:var\(--color-bg-filled-active-success\)\] {
2522
2562
  &:active {
2523
- background-color: transparent;
2563
+ background: var(--color-bg-filled-active-success);
2524
2564
  }
2525
2565
  }
2526
- .active\:text-blue-900 {
2566
+ .active\:\[background\:var\(--color-bg-filled-active-tertiary\)\] {
2527
2567
  &:active {
2528
- color: var(--color-blue-900);
2568
+ background: var(--color-bg-filled-active-tertiary);
2529
2569
  }
2530
2570
  }
2531
- .active\:ring {
2571
+ .active\:\[background\:var\(--color-bg-filled-active-warning\)\] {
2532
2572
  &:active {
2533
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2534
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2573
+ background: var(--color-bg-filled-active-warning);
2535
2574
  }
2536
2575
  }
2537
2576
  .active\:ring-inset {