@eric-emg/symphiq-components 1.2.97 → 1.2.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/styles.css CHANGED
@@ -130,6 +130,7 @@
130
130
  --container-2xl: 42rem;
131
131
  --container-3xl: 48rem;
132
132
  --container-4xl: 56rem;
133
+ --container-5xl: 64rem;
133
134
  --container-6xl: 72rem;
134
135
  --container-7xl: 80rem;
135
136
  --text-xs: 0.75rem;
@@ -384,8 +385,8 @@
384
385
  .top-4 {
385
386
  top: calc(var(--spacing) * 4);
386
387
  }
387
- .top-24 {
388
- top: calc(var(--spacing) * 24);
388
+ .top-6 {
389
+ top: calc(var(--spacing) * 6);
389
390
  }
390
391
  .top-\[var\(--header-height\)\] {
391
392
  top: var(--header-height);
@@ -615,6 +616,9 @@
615
616
  .mb-20 {
616
617
  margin-bottom: calc(var(--spacing) * 20);
617
618
  }
619
+ .ml-1 {
620
+ margin-left: calc(var(--spacing) * 1);
621
+ }
618
622
  .ml-3\.5 {
619
623
  margin-left: calc(var(--spacing) * 3.5);
620
624
  }
@@ -906,12 +910,21 @@
906
910
  .max-w-2xl {
907
911
  max-width: var(--container-2xl);
908
912
  }
913
+ .max-w-4xl {
914
+ max-width: var(--container-4xl);
915
+ }
916
+ .max-w-5xl {
917
+ max-width: var(--container-5xl);
918
+ }
909
919
  .max-w-6xl {
910
920
  max-width: var(--container-6xl);
911
921
  }
912
922
  .max-w-7xl {
913
923
  max-width: var(--container-7xl);
914
924
  }
925
+ .max-w-\[120px\] {
926
+ max-width: 120px;
927
+ }
915
928
  .max-w-\[400px\] {
916
929
  max-width: 400px;
917
930
  }
@@ -1254,6 +1267,10 @@
1254
1267
  border-left-style: var(--tw-border-style);
1255
1268
  border-left-width: 0px;
1256
1269
  }
1270
+ .border-l-2 {
1271
+ border-left-style: var(--tw-border-style);
1272
+ border-left-width: 2px;
1273
+ }
1257
1274
  .border-l-4 {
1258
1275
  border-left-style: var(--tw-border-style);
1259
1276
  border-left-width: 4px;
@@ -1943,6 +1960,12 @@
1943
1960
  background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
1944
1961
  }
1945
1962
  }
1963
+ .bg-black\/50 {
1964
+ background-color: color-mix(in srgb, #000 50%, transparent);
1965
+ @supports (color: color-mix(in lab, red, red)) {
1966
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1967
+ }
1968
+ }
1946
1969
  .bg-black\/60 {
1947
1970
  background-color: color-mix(in srgb, #000 60%, transparent);
1948
1971
  @supports (color: color-mix(in lab, red, red)) {
@@ -1973,6 +1996,9 @@
1973
1996
  background-color: color-mix(in oklab, var(--color-blue-100) 70%, transparent);
1974
1997
  }
1975
1998
  }
1999
+ .bg-blue-200 {
2000
+ background-color: var(--color-blue-200);
2001
+ }
1976
2002
  .bg-blue-400 {
1977
2003
  background-color: var(--color-blue-400);
1978
2004
  }
@@ -2324,6 +2350,12 @@
2324
2350
  background-color: color-mix(in oklab, var(--color-slate-600) 20%, transparent);
2325
2351
  }
2326
2352
  }
2353
+ .bg-slate-600\/40 {
2354
+ background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 40%, transparent);
2355
+ @supports (color: color-mix(in lab, red, red)) {
2356
+ background-color: color-mix(in oklab, var(--color-slate-600) 40%, transparent);
2357
+ }
2358
+ }
2327
2359
  .bg-slate-600\/50 {
2328
2360
  background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 50%, transparent);
2329
2361
  @supports (color: color-mix(in lab, red, red)) {
@@ -2345,12 +2377,24 @@
2345
2377
  background-color: color-mix(in oklab, var(--color-slate-700) 30%, transparent);
2346
2378
  }
2347
2379
  }
2380
+ .bg-slate-700\/40 {
2381
+ background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 40%, transparent);
2382
+ @supports (color: color-mix(in lab, red, red)) {
2383
+ background-color: color-mix(in oklab, var(--color-slate-700) 40%, transparent);
2384
+ }
2385
+ }
2348
2386
  .bg-slate-700\/50 {
2349
2387
  background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent);
2350
2388
  @supports (color: color-mix(in lab, red, red)) {
2351
2389
  background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);
2352
2390
  }
2353
2391
  }
2392
+ .bg-slate-700\/60 {
2393
+ background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 60%, transparent);
2394
+ @supports (color: color-mix(in lab, red, red)) {
2395
+ background-color: color-mix(in oklab, var(--color-slate-700) 60%, transparent);
2396
+ }
2397
+ }
2354
2398
  .bg-slate-700\/70 {
2355
2399
  background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 70%, transparent);
2356
2400
  @supports (color: color-mix(in lab, red, red)) {
@@ -2423,6 +2467,12 @@
2423
2467
  background-color: color-mix(in oklab, var(--color-slate-900) 30%, transparent);
2424
2468
  }
2425
2469
  }
2470
+ .bg-slate-900\/40 {
2471
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 40%, transparent);
2472
+ @supports (color: color-mix(in lab, red, red)) {
2473
+ background-color: color-mix(in oklab, var(--color-slate-900) 40%, transparent);
2474
+ }
2475
+ }
2426
2476
  .bg-slate-900\/50 {
2427
2477
  background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
2428
2478
  @supports (color: color-mix(in lab, red, red)) {
@@ -2489,6 +2539,12 @@
2489
2539
  background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
2490
2540
  }
2491
2541
  }
2542
+ .bg-white\/60 {
2543
+ background-color: color-mix(in srgb, #fff 60%, transparent);
2544
+ @supports (color: color-mix(in lab, red, red)) {
2545
+ background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
2546
+ }
2547
+ }
2492
2548
  .bg-white\/80 {
2493
2549
  background-color: color-mix(in srgb, #fff 80%, transparent);
2494
2550
  @supports (color: color-mix(in lab, red, red)) {
@@ -2899,6 +2955,13 @@
2899
2955
  }
2900
2956
  --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));
2901
2957
  }
2958
+ .from-slate-800\/60 {
2959
+ --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
2960
+ @supports (color: color-mix(in lab, red, red)) {
2961
+ --tw-gradient-from: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
2962
+ }
2963
+ --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));
2964
+ }
2902
2965
  .from-slate-800\/85 {
2903
2966
  --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 85%, transparent);
2904
2967
  @supports (color: color-mix(in lab, red, red)) {
@@ -2906,6 +2969,13 @@
2906
2969
  }
2907
2970
  --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));
2908
2971
  }
2972
+ .from-slate-800\/90 {
2973
+ --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 90%, transparent);
2974
+ @supports (color: color-mix(in lab, red, red)) {
2975
+ --tw-gradient-from: color-mix(in oklab, var(--color-slate-800) 90%, transparent);
2976
+ }
2977
+ --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));
2978
+ }
2909
2979
  .from-slate-800\/95 {
2910
2980
  --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 95%, transparent);
2911
2981
  @supports (color: color-mix(in lab, red, red)) {
@@ -2917,10 +2987,6 @@
2917
2987
  --tw-gradient-from: var(--color-slate-900);
2918
2988
  --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));
2919
2989
  }
2920
- .from-slate-950 {
2921
- --tw-gradient-from: var(--color-slate-950);
2922
- --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));
2923
- }
2924
2990
  .from-transparent {
2925
2991
  --tw-gradient-from: transparent;
2926
2992
  --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));
@@ -3022,8 +3088,19 @@
3022
3088
  --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);
3023
3089
  --tw-gradient-stops: var(--tw-gradient-via-stops);
3024
3090
  }
3025
- .via-slate-900 {
3026
- --tw-gradient-via: var(--color-slate-900);
3091
+ .via-slate-800\/40 {
3092
+ --tw-gradient-via: color-mix(in srgb, oklch(27.9% 0.041 260.031) 40%, transparent);
3093
+ @supports (color: color-mix(in lab, red, red)) {
3094
+ --tw-gradient-via: color-mix(in oklab, var(--color-slate-800) 40%, transparent);
3095
+ }
3096
+ --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);
3097
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
3098
+ }
3099
+ .via-slate-800\/80 {
3100
+ --tw-gradient-via: color-mix(in srgb, oklch(27.9% 0.041 260.031) 80%, transparent);
3101
+ @supports (color: color-mix(in lab, red, red)) {
3102
+ --tw-gradient-via: color-mix(in oklab, var(--color-slate-800) 80%, transparent);
3103
+ }
3027
3104
  --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);
3028
3105
  --tw-gradient-stops: var(--tw-gradient-via-stops);
3029
3106
  }
@@ -3032,6 +3109,11 @@
3032
3109
  --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);
3033
3110
  --tw-gradient-stops: var(--tw-gradient-via-stops);
3034
3111
  }
3112
+ .via-white {
3113
+ --tw-gradient-via: var(--color-white);
3114
+ --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);
3115
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
3116
+ }
3035
3117
  .via-white\/60 {
3036
3118
  --tw-gradient-via: color-mix(in srgb, #fff 60%, transparent);
3037
3119
  @supports (color: color-mix(in lab, red, red)) {
@@ -3249,6 +3331,10 @@
3249
3331
  }
3250
3332
  --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));
3251
3333
  }
3334
+ .to-purple-50 {
3335
+ --tw-gradient-to: var(--color-purple-50);
3336
+ --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));
3337
+ }
3252
3338
  .to-purple-100 {
3253
3339
  --tw-gradient-to: var(--color-purple-100);
3254
3340
  --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));
@@ -3381,6 +3467,13 @@
3381
3467
  }
3382
3468
  --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));
3383
3469
  }
3470
+ .to-slate-900\/60 {
3471
+ --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);
3472
+ @supports (color: color-mix(in lab, red, red)) {
3473
+ --tw-gradient-to: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
3474
+ }
3475
+ --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));
3476
+ }
3384
3477
  .to-slate-900\/85 {
3385
3478
  --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 85%, transparent);
3386
3479
  @supports (color: color-mix(in lab, red, red)) {
@@ -3388,6 +3481,13 @@
3388
3481
  }
3389
3482
  --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));
3390
3483
  }
3484
+ .to-slate-900\/90 {
3485
+ --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);
3486
+ @supports (color: color-mix(in lab, red, red)) {
3487
+ --tw-gradient-to: color-mix(in oklab, var(--color-slate-900) 90%, transparent);
3488
+ }
3489
+ --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));
3490
+ }
3391
3491
  .to-slate-900\/95 {
3392
3492
  --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
3393
3493
  @supports (color: color-mix(in lab, red, red)) {
@@ -3395,10 +3495,6 @@
3395
3495
  }
3396
3496
  --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));
3397
3497
  }
3398
- .to-slate-950 {
3399
- --tw-gradient-to: var(--color-slate-950);
3400
- --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));
3401
- }
3402
3498
  .to-teal-50 {
3403
3499
  --tw-gradient-to: var(--color-teal-50);
3404
3500
  --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));
@@ -3577,6 +3673,9 @@
3577
3673
  .pb-4 {
3578
3674
  padding-bottom: calc(var(--spacing) * 4);
3579
3675
  }
3676
+ .pb-6 {
3677
+ padding-bottom: calc(var(--spacing) * 6);
3678
+ }
3580
3679
  .pb-8 {
3581
3680
  padding-bottom: calc(var(--spacing) * 8);
3582
3681
  }
@@ -3586,6 +3685,9 @@
3586
3685
  .pb-20 {
3587
3686
  padding-bottom: calc(var(--spacing) * 20);
3588
3687
  }
3688
+ .pl-3 {
3689
+ padding-left: calc(var(--spacing) * 3);
3690
+ }
3589
3691
  .pl-4 {
3590
3692
  padding-left: calc(var(--spacing) * 4);
3591
3693
  }
@@ -3972,6 +4074,9 @@
3972
4074
  .opacity-70 {
3973
4075
  opacity: 70%;
3974
4076
  }
4077
+ .opacity-75 {
4078
+ opacity: 75%;
4079
+ }
3975
4080
  .opacity-90 {
3976
4081
  opacity: 90%;
3977
4082
  }
@@ -4502,6 +4607,23 @@
4502
4607
  }
4503
4608
  }
4504
4609
  }
4610
+ .hover\:border-amber-300 {
4611
+ &:hover {
4612
+ @media (hover: hover) {
4613
+ border-color: var(--color-amber-300);
4614
+ }
4615
+ }
4616
+ }
4617
+ .hover\:border-amber-400\/50 {
4618
+ &:hover {
4619
+ @media (hover: hover) {
4620
+ border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
4621
+ @supports (color: color-mix(in lab, red, red)) {
4622
+ border-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
4623
+ }
4624
+ }
4625
+ }
4626
+ }
4505
4627
  .hover\:border-blue-300 {
4506
4628
  &:hover {
4507
4629
  @media (hover: hover) {
@@ -4516,6 +4638,16 @@
4516
4638
  }
4517
4639
  }
4518
4640
  }
4641
+ .hover\:border-blue-400\/50 {
4642
+ &:hover {
4643
+ @media (hover: hover) {
4644
+ border-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 50%, transparent);
4645
+ @supports (color: color-mix(in lab, red, red)) {
4646
+ border-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);
4647
+ }
4648
+ }
4649
+ }
4650
+ }
4519
4651
  .hover\:border-blue-400\/60 {
4520
4652
  &:hover {
4521
4653
  @media (hover: hover) {
@@ -4625,6 +4757,16 @@
4625
4757
  }
4626
4758
  }
4627
4759
  }
4760
+ .hover\:border-slate-500\/50 {
4761
+ &:hover {
4762
+ @media (hover: hover) {
4763
+ border-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 50%, transparent);
4764
+ @supports (color: color-mix(in lab, red, red)) {
4765
+ border-color: color-mix(in oklab, var(--color-slate-500) 50%, transparent);
4766
+ }
4767
+ }
4768
+ }
4769
+ }
4628
4770
  .hover\:border-slate-600 {
4629
4771
  &:hover {
4630
4772
  @media (hover: hover) {
@@ -5646,6 +5788,11 @@
5646
5788
  grid-template-columns: repeat(2, minmax(0, 1fr));
5647
5789
  }
5648
5790
  }
5791
+ .sm\:grid-cols-3 {
5792
+ @media (width >= 40rem) {
5793
+ grid-template-columns: repeat(3, minmax(0, 1fr));
5794
+ }
5795
+ }
5649
5796
  .sm\:grid-cols-\[1fr_auto\] {
5650
5797
  @media (width >= 40rem) {
5651
5798
  grid-template-columns: 1fr auto;