@eric-emg/symphiq-components 1.2.170 → 1.2.171

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/fesm2022/symphiq-components.mjs +3237 -1110
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +105 -8
  4. package/index.d.ts.map +1 -1
  5. package/package.json +2 -2
  6. package/styles.css +188 -0
package/styles.css CHANGED
@@ -111,8 +111,11 @@
111
111
  --color-indigo-500: oklch(58.5% 0.233 277.117);
112
112
  --color-indigo-600: oklch(51.1% 0.262 276.966);
113
113
  --color-indigo-700: oklch(45.7% 0.24 277.023);
114
+ --color-indigo-900: oklch(35.9% 0.144 278.697);
114
115
  --color-indigo-950: oklch(25.7% 0.09 281.288);
116
+ --color-violet-50: oklch(96.9% 0.016 293.756);
115
117
  --color-violet-100: oklch(94.3% 0.029 294.588);
118
+ --color-violet-200: oklch(89.4% 0.057 293.283);
116
119
  --color-violet-300: oklch(81.1% 0.111 293.571);
117
120
  --color-violet-400: oklch(70.2% 0.183 293.541);
118
121
  --color-violet-500: oklch(60.6% 0.25 292.717);
@@ -130,6 +133,7 @@
130
133
  --color-purple-800: oklch(43.8% 0.218 303.724);
131
134
  --color-purple-900: oklch(38.1% 0.176 304.987);
132
135
  --color-purple-950: oklch(29.1% 0.149 302.717);
136
+ --color-fuchsia-50: oklch(97.7% 0.017 320.058);
133
137
  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
134
138
  --color-fuchsia-400: oklch(74% 0.238 322.16);
135
139
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
@@ -1875,6 +1879,12 @@
1875
1879
  .border-purple-400 {
1876
1880
  border-color: var(--color-purple-400);
1877
1881
  }
1882
+ .border-purple-400\/30 {
1883
+ border-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 30%, transparent);
1884
+ @supports (color: color-mix(in lab, red, red)) {
1885
+ border-color: color-mix(in oklab, var(--color-purple-400) 30%, transparent);
1886
+ }
1887
+ }
1878
1888
  .border-purple-500 {
1879
1889
  border-color: var(--color-purple-500);
1880
1890
  }
@@ -2136,6 +2146,9 @@
2136
2146
  .border-transparent {
2137
2147
  border-color: transparent;
2138
2148
  }
2149
+ .border-violet-200 {
2150
+ border-color: var(--color-violet-200);
2151
+ }
2139
2152
  .border-yellow-200 {
2140
2153
  border-color: var(--color-yellow-200);
2141
2154
  }
@@ -2877,12 +2890,21 @@
2877
2890
  background-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
2878
2891
  }
2879
2892
  }
2893
+ .bg-purple-500\/30 {
2894
+ background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);
2895
+ @supports (color: color-mix(in lab, red, red)) {
2896
+ background-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
2897
+ }
2898
+ }
2880
2899
  .bg-purple-500\/40 {
2881
2900
  background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 40%, transparent);
2882
2901
  @supports (color: color-mix(in lab, red, red)) {
2883
2902
  background-color: color-mix(in oklab, var(--color-purple-500) 40%, transparent);
2884
2903
  }
2885
2904
  }
2905
+ .bg-purple-600 {
2906
+ background-color: var(--color-purple-600);
2907
+ }
2886
2908
  .bg-purple-600\/80 {
2887
2909
  background-color: color-mix(in srgb, oklch(55.8% 0.288 302.321) 80%, transparent);
2888
2910
  @supports (color: color-mix(in lab, red, red)) {
@@ -2901,6 +2923,12 @@
2901
2923
  background-color: color-mix(in oklab, var(--color-purple-900) 30%, transparent);
2902
2924
  }
2903
2925
  }
2926
+ .bg-purple-900\/50 {
2927
+ background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 50%, transparent);
2928
+ @supports (color: color-mix(in lab, red, red)) {
2929
+ background-color: color-mix(in oklab, var(--color-purple-900) 50%, transparent);
2930
+ }
2931
+ }
2904
2932
  .bg-red-50 {
2905
2933
  background-color: var(--color-red-50);
2906
2934
  }
@@ -3153,6 +3181,12 @@
3153
3181
  background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
3154
3182
  }
3155
3183
  }
3184
+ .bg-slate-800\/80 {
3185
+ background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 80%, transparent);
3186
+ @supports (color: color-mix(in lab, red, red)) {
3187
+ background-color: color-mix(in oklab, var(--color-slate-800) 80%, transparent);
3188
+ }
3189
+ }
3156
3190
  .bg-slate-800\/90 {
3157
3191
  background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 90%, transparent);
3158
3192
  @supports (color: color-mix(in lab, red, red)) {
@@ -3794,6 +3828,20 @@
3794
3828
  }
3795
3829
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3796
3830
  }
3831
+ .from-purple-900\/30 {
3832
+ --tw-gradient-from: color-mix(in srgb, oklch(38.1% 0.176 304.987) 30%, transparent);
3833
+ @supports (color: color-mix(in lab, red, red)) {
3834
+ --tw-gradient-from: color-mix(in oklab, var(--color-purple-900) 30%, transparent);
3835
+ }
3836
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3837
+ }
3838
+ .from-purple-900\/40 {
3839
+ --tw-gradient-from: color-mix(in srgb, oklch(38.1% 0.176 304.987) 40%, transparent);
3840
+ @supports (color: color-mix(in lab, red, red)) {
3841
+ --tw-gradient-from: color-mix(in oklab, var(--color-purple-900) 40%, transparent);
3842
+ }
3843
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3844
+ }
3797
3845
  .from-purple-950\/20 {
3798
3846
  --tw-gradient-from: color-mix(in srgb, oklch(29.1% 0.149 302.717) 20%, transparent);
3799
3847
  @supports (color: color-mix(in lab, red, red)) {
@@ -3965,6 +4013,10 @@
3965
4013
  --tw-gradient-from: transparent;
3966
4014
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3967
4015
  }
4016
+ .from-violet-50 {
4017
+ --tw-gradient-from: var(--color-violet-50);
4018
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4019
+ }
3968
4020
  .from-violet-600 {
3969
4021
  --tw-gradient-from: var(--color-violet-600);
3970
4022
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -4090,6 +4142,19 @@
4090
4142
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
4091
4143
  --tw-gradient-stops: var(--tw-gradient-via-stops);
4092
4144
  }
4145
+ .via-indigo-50 {
4146
+ --tw-gradient-via: var(--color-indigo-50);
4147
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
4148
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
4149
+ }
4150
+ .via-indigo-900\/30 {
4151
+ --tw-gradient-via: color-mix(in srgb, oklch(35.9% 0.144 278.697) 30%, transparent);
4152
+ @supports (color: color-mix(in lab, red, red)) {
4153
+ --tw-gradient-via: color-mix(in oklab, var(--color-indigo-900) 30%, transparent);
4154
+ }
4155
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
4156
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
4157
+ }
4093
4158
  .via-purple-50 {
4094
4159
  --tw-gradient-via: var(--color-purple-50);
4095
4160
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -4179,6 +4244,11 @@
4179
4244
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
4180
4245
  --tw-gradient-stops: var(--tw-gradient-via-stops);
4181
4246
  }
4247
+ .via-slate-800 {
4248
+ --tw-gradient-via: var(--color-slate-800);
4249
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
4250
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
4251
+ }
4182
4252
  .via-slate-800\/40 {
4183
4253
  --tw-gradient-via: color-mix(in srgb, oklch(27.9% 0.041 260.031) 40%, transparent);
4184
4254
  @supports (color: color-mix(in lab, red, red)) {
@@ -4490,6 +4560,10 @@
4490
4560
  --tw-gradient-to: var(--color-emerald-800);
4491
4561
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4492
4562
  }
4563
+ .to-fuchsia-50 {
4564
+ --tw-gradient-to: var(--color-fuchsia-50);
4565
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4566
+ }
4493
4567
  .to-fuchsia-600 {
4494
4568
  --tw-gradient-to: var(--color-fuchsia-600);
4495
4569
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -4554,6 +4628,13 @@
4554
4628
  --tw-gradient-to: var(--color-indigo-600);
4555
4629
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4556
4630
  }
4631
+ .to-indigo-900\/30 {
4632
+ --tw-gradient-to: color-mix(in srgb, oklch(35.9% 0.144 278.697) 30%, transparent);
4633
+ @supports (color: color-mix(in lab, red, red)) {
4634
+ --tw-gradient-to: color-mix(in oklab, var(--color-indigo-900) 30%, transparent);
4635
+ }
4636
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4637
+ }
4557
4638
  .to-orange-50 {
4558
4639
  --tw-gradient-to: var(--color-orange-50);
4559
4640
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -4634,6 +4715,10 @@
4634
4715
  }
4635
4716
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4636
4717
  }
4718
+ .to-purple-50 {
4719
+ --tw-gradient-to: var(--color-purple-50);
4720
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4721
+ }
4637
4722
  .to-purple-50\/30 {
4638
4723
  --tw-gradient-to: color-mix(in srgb, oklch(97.7% 0.014 308.299) 30%, transparent);
4639
4724
  @supports (color: color-mix(in lab, red, red)) {
@@ -4696,6 +4781,13 @@
4696
4781
  }
4697
4782
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4698
4783
  }
4784
+ .to-purple-900\/40 {
4785
+ --tw-gradient-to: color-mix(in srgb, oklch(38.1% 0.176 304.987) 40%, transparent);
4786
+ @supports (color: color-mix(in lab, red, red)) {
4787
+ --tw-gradient-to: color-mix(in oklab, var(--color-purple-900) 40%, transparent);
4788
+ }
4789
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
4790
+ }
4699
4791
  .to-red-50 {
4700
4792
  --tw-gradient-to: var(--color-red-50);
4701
4793
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -4964,6 +5056,9 @@
4964
5056
  .bg-clip-text {
4965
5057
  background-clip: text;
4966
5058
  }
5059
+ .stroke-slate-200 {
5060
+ stroke: var(--color-slate-200);
5061
+ }
4967
5062
  .p-0\.5 {
4968
5063
  padding: calc(var(--spacing) * 0.5);
4969
5064
  }
@@ -5096,9 +5191,15 @@
5096
5191
  .pr-3 {
5097
5192
  padding-right: calc(var(--spacing) * 3);
5098
5193
  }
5194
+ .pr-4 {
5195
+ padding-right: calc(var(--spacing) * 4);
5196
+ }
5099
5197
  .pr-7 {
5100
5198
  padding-right: calc(var(--spacing) * 7);
5101
5199
  }
5200
+ .pr-10 {
5201
+ padding-right: calc(var(--spacing) * 10);
5202
+ }
5102
5203
  .pr-24 {
5103
5204
  padding-right: calc(var(--spacing) * 24);
5104
5205
  }
@@ -5135,6 +5236,9 @@
5135
5236
  .pl-4 {
5136
5237
  padding-left: calc(var(--spacing) * 4);
5137
5238
  }
5239
+ .pl-10 {
5240
+ padding-left: calc(var(--spacing) * 10);
5241
+ }
5138
5242
  .pl-12 {
5139
5243
  padding-left: calc(var(--spacing) * 12);
5140
5244
  }
@@ -5553,6 +5657,9 @@
5553
5657
  .text-violet-400 {
5554
5658
  color: var(--color-violet-400);
5555
5659
  }
5660
+ .text-violet-600 {
5661
+ color: var(--color-violet-600);
5662
+ }
5556
5663
  .text-violet-700 {
5557
5664
  color: var(--color-violet-700);
5558
5665
  }
@@ -5887,6 +5994,12 @@
5887
5994
  --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
5888
5995
  }
5889
5996
  }
5997
+ .shadow-purple-300\/50 {
5998
+ --tw-shadow-color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 50%, transparent);
5999
+ @supports (color: color-mix(in lab, red, red)) {
6000
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-300) 50%, transparent) var(--tw-shadow-alpha), transparent);
6001
+ }
6002
+ }
5890
6003
  .shadow-purple-500\/10 {
5891
6004
  --tw-shadow-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 10%, transparent);
5892
6005
  @supports (color: color-mix(in lab, red, red)) {
@@ -8075,6 +8188,16 @@
8075
8188
  }
8076
8189
  }
8077
8190
  }
8191
+ .hover\:shadow-purple-400\/60 {
8192
+ &:hover {
8193
+ @media (hover: hover) {
8194
+ --tw-shadow-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 60%, transparent);
8195
+ @supports (color: color-mix(in lab, red, red)) {
8196
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-400) 60%, transparent) var(--tw-shadow-alpha), transparent);
8197
+ }
8198
+ }
8199
+ }
8200
+ }
8078
8201
  .hover\:shadow-purple-500\/10 {
8079
8202
  &:hover {
8080
8203
  @media (hover: hover) {
@@ -8105,6 +8228,16 @@
8105
8228
  }
8106
8229
  }
8107
8230
  }
8231
+ .hover\:shadow-purple-500\/50 {
8232
+ &:hover {
8233
+ @media (hover: hover) {
8234
+ --tw-shadow-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 50%, transparent);
8235
+ @supports (color: color-mix(in lab, red, red)) {
8236
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
8237
+ }
8238
+ }
8239
+ }
8240
+ }
8108
8241
  .hover\:shadow-red-100\/50 {
8109
8242
  &:hover {
8110
8243
  @media (hover: hover) {
@@ -8221,6 +8354,11 @@
8221
8354
  border-color: var(--color-blue-500);
8222
8355
  }
8223
8356
  }
8357
+ .focus\:border-purple-500 {
8358
+ &:focus {
8359
+ border-color: var(--color-purple-500);
8360
+ }
8361
+ }
8224
8362
  .focus\:border-red-500 {
8225
8363
  &:focus {
8226
8364
  border-color: var(--color-red-500);
@@ -8247,6 +8385,14 @@
8247
8385
  --tw-ring-color: var(--color-blue-500);
8248
8386
  }
8249
8387
  }
8388
+ .focus\:ring-purple-500\/20 {
8389
+ &:focus {
8390
+ --tw-ring-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 20%, transparent);
8391
+ @supports (color: color-mix(in lab, red, red)) {
8392
+ --tw-ring-color: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
8393
+ }
8394
+ }
8395
+ }
8250
8396
  .focus\:ring-red-500 {
8251
8397
  &:focus {
8252
8398
  --tw-ring-color: var(--color-red-500);
@@ -8749,6 +8895,11 @@
8749
8895
  }
8750
8896
  }
8751
8897
  }
8898
+ .md\:col-span-2 {
8899
+ @media (width >= 48rem) {
8900
+ grid-column: span 2 / span 2;
8901
+ }
8902
+ }
8752
8903
  .md\:ml-4 {
8753
8904
  @media (width >= 48rem) {
8754
8905
  margin-left: calc(var(--spacing) * 4);
@@ -9066,6 +9217,11 @@
9066
9217
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
9067
9218
  }
9068
9219
  }
9220
+ .dark\:stroke-slate-700 {
9221
+ @media (prefers-color-scheme: dark) {
9222
+ stroke: var(--color-slate-700);
9223
+ }
9224
+ }
9069
9225
  .dark\:text-amber-300 {
9070
9226
  @media (prefers-color-scheme: dark) {
9071
9227
  color: var(--color-amber-300);
@@ -9086,6 +9242,11 @@
9086
9242
  color: var(--color-emerald-300);
9087
9243
  }
9088
9244
  }
9245
+ .dark\:text-emerald-400 {
9246
+ @media (prefers-color-scheme: dark) {
9247
+ color: var(--color-emerald-400);
9248
+ }
9249
+ }
9089
9250
  .dark\:text-orange-300 {
9090
9251
  @media (prefers-color-scheme: dark) {
9091
9252
  color: var(--color-orange-300);
@@ -9096,6 +9257,11 @@
9096
9257
  color: var(--color-red-300);
9097
9258
  }
9098
9259
  }
9260
+ .dark\:text-rose-400 {
9261
+ @media (prefers-color-scheme: dark) {
9262
+ color: var(--color-rose-400);
9263
+ }
9264
+ }
9099
9265
  .dark\:text-slate-200 {
9100
9266
  @media (prefers-color-scheme: dark) {
9101
9267
  color: var(--color-slate-200);
@@ -9106,16 +9272,38 @@
9106
9272
  color: var(--color-slate-300);
9107
9273
  }
9108
9274
  }
9275
+ .dark\:text-slate-400 {
9276
+ @media (prefers-color-scheme: dark) {
9277
+ color: var(--color-slate-400);
9278
+ }
9279
+ }
9109
9280
  .dark\:text-slate-500 {
9110
9281
  @media (prefers-color-scheme: dark) {
9111
9282
  color: var(--color-slate-500);
9112
9283
  }
9113
9284
  }
9285
+ .dark\:text-violet-400 {
9286
+ @media (prefers-color-scheme: dark) {
9287
+ color: var(--color-violet-400);
9288
+ }
9289
+ }
9114
9290
  .dark\:text-white {
9115
9291
  @media (prefers-color-scheme: dark) {
9116
9292
  color: var(--color-white);
9117
9293
  }
9118
9294
  }
9295
+ .dark\:hover\:bg-blue-900\/50 {
9296
+ @media (prefers-color-scheme: dark) {
9297
+ &:hover {
9298
+ @media (hover: hover) {
9299
+ background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
9300
+ @supports (color: color-mix(in lab, red, red)) {
9301
+ background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
9302
+ }
9303
+ }
9304
+ }
9305
+ }
9306
+ }
9119
9307
  .dark\:hover\:bg-slate-600 {
9120
9308
  @media (prefers-color-scheme: dark) {
9121
9309
  &:hover {