@eric-emg/symphiq-components 1.2.97 → 1.2.99

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,6 +385,9 @@
384
385
  .top-4 {
385
386
  top: calc(var(--spacing) * 4);
386
387
  }
388
+ .top-6 {
389
+ top: calc(var(--spacing) * 6);
390
+ }
387
391
  .top-24 {
388
392
  top: calc(var(--spacing) * 24);
389
393
  }
@@ -615,6 +619,9 @@
615
619
  .mb-20 {
616
620
  margin-bottom: calc(var(--spacing) * 20);
617
621
  }
622
+ .ml-1 {
623
+ margin-left: calc(var(--spacing) * 1);
624
+ }
618
625
  .ml-3\.5 {
619
626
  margin-left: calc(var(--spacing) * 3.5);
620
627
  }
@@ -906,12 +913,21 @@
906
913
  .max-w-2xl {
907
914
  max-width: var(--container-2xl);
908
915
  }
916
+ .max-w-4xl {
917
+ max-width: var(--container-4xl);
918
+ }
919
+ .max-w-5xl {
920
+ max-width: var(--container-5xl);
921
+ }
909
922
  .max-w-6xl {
910
923
  max-width: var(--container-6xl);
911
924
  }
912
925
  .max-w-7xl {
913
926
  max-width: var(--container-7xl);
914
927
  }
928
+ .max-w-\[120px\] {
929
+ max-width: 120px;
930
+ }
915
931
  .max-w-\[400px\] {
916
932
  max-width: 400px;
917
933
  }
@@ -1254,6 +1270,10 @@
1254
1270
  border-left-style: var(--tw-border-style);
1255
1271
  border-left-width: 0px;
1256
1272
  }
1273
+ .border-l-2 {
1274
+ border-left-style: var(--tw-border-style);
1275
+ border-left-width: 2px;
1276
+ }
1257
1277
  .border-l-4 {
1258
1278
  border-left-style: var(--tw-border-style);
1259
1279
  border-left-width: 4px;
@@ -1943,6 +1963,12 @@
1943
1963
  background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
1944
1964
  }
1945
1965
  }
1966
+ .bg-black\/50 {
1967
+ background-color: color-mix(in srgb, #000 50%, transparent);
1968
+ @supports (color: color-mix(in lab, red, red)) {
1969
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1970
+ }
1971
+ }
1946
1972
  .bg-black\/60 {
1947
1973
  background-color: color-mix(in srgb, #000 60%, transparent);
1948
1974
  @supports (color: color-mix(in lab, red, red)) {
@@ -1973,6 +1999,9 @@
1973
1999
  background-color: color-mix(in oklab, var(--color-blue-100) 70%, transparent);
1974
2000
  }
1975
2001
  }
2002
+ .bg-blue-200 {
2003
+ background-color: var(--color-blue-200);
2004
+ }
1976
2005
  .bg-blue-400 {
1977
2006
  background-color: var(--color-blue-400);
1978
2007
  }
@@ -2324,6 +2353,12 @@
2324
2353
  background-color: color-mix(in oklab, var(--color-slate-600) 20%, transparent);
2325
2354
  }
2326
2355
  }
2356
+ .bg-slate-600\/40 {
2357
+ background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 40%, transparent);
2358
+ @supports (color: color-mix(in lab, red, red)) {
2359
+ background-color: color-mix(in oklab, var(--color-slate-600) 40%, transparent);
2360
+ }
2361
+ }
2327
2362
  .bg-slate-600\/50 {
2328
2363
  background-color: color-mix(in srgb, oklch(44.6% 0.043 257.281) 50%, transparent);
2329
2364
  @supports (color: color-mix(in lab, red, red)) {
@@ -2345,12 +2380,24 @@
2345
2380
  background-color: color-mix(in oklab, var(--color-slate-700) 30%, transparent);
2346
2381
  }
2347
2382
  }
2383
+ .bg-slate-700\/40 {
2384
+ background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 40%, transparent);
2385
+ @supports (color: color-mix(in lab, red, red)) {
2386
+ background-color: color-mix(in oklab, var(--color-slate-700) 40%, transparent);
2387
+ }
2388
+ }
2348
2389
  .bg-slate-700\/50 {
2349
2390
  background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent);
2350
2391
  @supports (color: color-mix(in lab, red, red)) {
2351
2392
  background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);
2352
2393
  }
2353
2394
  }
2395
+ .bg-slate-700\/60 {
2396
+ background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 60%, transparent);
2397
+ @supports (color: color-mix(in lab, red, red)) {
2398
+ background-color: color-mix(in oklab, var(--color-slate-700) 60%, transparent);
2399
+ }
2400
+ }
2354
2401
  .bg-slate-700\/70 {
2355
2402
  background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 70%, transparent);
2356
2403
  @supports (color: color-mix(in lab, red, red)) {
@@ -2423,6 +2470,12 @@
2423
2470
  background-color: color-mix(in oklab, var(--color-slate-900) 30%, transparent);
2424
2471
  }
2425
2472
  }
2473
+ .bg-slate-900\/40 {
2474
+ background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 40%, transparent);
2475
+ @supports (color: color-mix(in lab, red, red)) {
2476
+ background-color: color-mix(in oklab, var(--color-slate-900) 40%, transparent);
2477
+ }
2478
+ }
2426
2479
  .bg-slate-900\/50 {
2427
2480
  background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
2428
2481
  @supports (color: color-mix(in lab, red, red)) {
@@ -2489,6 +2542,12 @@
2489
2542
  background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
2490
2543
  }
2491
2544
  }
2545
+ .bg-white\/60 {
2546
+ background-color: color-mix(in srgb, #fff 60%, transparent);
2547
+ @supports (color: color-mix(in lab, red, red)) {
2548
+ background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
2549
+ }
2550
+ }
2492
2551
  .bg-white\/80 {
2493
2552
  background-color: color-mix(in srgb, #fff 80%, transparent);
2494
2553
  @supports (color: color-mix(in lab, red, red)) {
@@ -2899,6 +2958,13 @@
2899
2958
  }
2900
2959
  --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
2960
  }
2961
+ .from-slate-800\/60 {
2962
+ --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
2963
+ @supports (color: color-mix(in lab, red, red)) {
2964
+ --tw-gradient-from: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
2965
+ }
2966
+ --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));
2967
+ }
2902
2968
  .from-slate-800\/85 {
2903
2969
  --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 85%, transparent);
2904
2970
  @supports (color: color-mix(in lab, red, red)) {
@@ -2906,6 +2972,13 @@
2906
2972
  }
2907
2973
  --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
2974
  }
2975
+ .from-slate-800\/90 {
2976
+ --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 90%, transparent);
2977
+ @supports (color: color-mix(in lab, red, red)) {
2978
+ --tw-gradient-from: color-mix(in oklab, var(--color-slate-800) 90%, transparent);
2979
+ }
2980
+ --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));
2981
+ }
2909
2982
  .from-slate-800\/95 {
2910
2983
  --tw-gradient-from: color-mix(in srgb, oklch(27.9% 0.041 260.031) 95%, transparent);
2911
2984
  @supports (color: color-mix(in lab, red, red)) {
@@ -2917,10 +2990,6 @@
2917
2990
  --tw-gradient-from: var(--color-slate-900);
2918
2991
  --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
2992
  }
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
2993
  .from-transparent {
2925
2994
  --tw-gradient-from: transparent;
2926
2995
  --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 +3091,19 @@
3022
3091
  --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
3092
  --tw-gradient-stops: var(--tw-gradient-via-stops);
3024
3093
  }
3025
- .via-slate-900 {
3026
- --tw-gradient-via: var(--color-slate-900);
3094
+ .via-slate-800\/40 {
3095
+ --tw-gradient-via: color-mix(in srgb, oklch(27.9% 0.041 260.031) 40%, transparent);
3096
+ @supports (color: color-mix(in lab, red, red)) {
3097
+ --tw-gradient-via: color-mix(in oklab, var(--color-slate-800) 40%, transparent);
3098
+ }
3099
+ --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);
3100
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
3101
+ }
3102
+ .via-slate-800\/80 {
3103
+ --tw-gradient-via: color-mix(in srgb, oklch(27.9% 0.041 260.031) 80%, transparent);
3104
+ @supports (color: color-mix(in lab, red, red)) {
3105
+ --tw-gradient-via: color-mix(in oklab, var(--color-slate-800) 80%, transparent);
3106
+ }
3027
3107
  --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
3108
  --tw-gradient-stops: var(--tw-gradient-via-stops);
3029
3109
  }
@@ -3032,6 +3112,11 @@
3032
3112
  --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
3113
  --tw-gradient-stops: var(--tw-gradient-via-stops);
3034
3114
  }
3115
+ .via-white {
3116
+ --tw-gradient-via: var(--color-white);
3117
+ --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);
3118
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
3119
+ }
3035
3120
  .via-white\/60 {
3036
3121
  --tw-gradient-via: color-mix(in srgb, #fff 60%, transparent);
3037
3122
  @supports (color: color-mix(in lab, red, red)) {
@@ -3249,6 +3334,10 @@
3249
3334
  }
3250
3335
  --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
3336
  }
3337
+ .to-purple-50 {
3338
+ --tw-gradient-to: var(--color-purple-50);
3339
+ --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));
3340
+ }
3252
3341
  .to-purple-100 {
3253
3342
  --tw-gradient-to: var(--color-purple-100);
3254
3343
  --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 +3470,13 @@
3381
3470
  }
3382
3471
  --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
3472
  }
3473
+ .to-slate-900\/60 {
3474
+ --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent);
3475
+ @supports (color: color-mix(in lab, red, red)) {
3476
+ --tw-gradient-to: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
3477
+ }
3478
+ --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));
3479
+ }
3384
3480
  .to-slate-900\/85 {
3385
3481
  --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 85%, transparent);
3386
3482
  @supports (color: color-mix(in lab, red, red)) {
@@ -3388,6 +3484,13 @@
3388
3484
  }
3389
3485
  --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
3486
  }
3487
+ .to-slate-900\/90 {
3488
+ --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);
3489
+ @supports (color: color-mix(in lab, red, red)) {
3490
+ --tw-gradient-to: color-mix(in oklab, var(--color-slate-900) 90%, transparent);
3491
+ }
3492
+ --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));
3493
+ }
3391
3494
  .to-slate-900\/95 {
3392
3495
  --tw-gradient-to: color-mix(in srgb, oklch(20.8% 0.042 265.755) 95%, transparent);
3393
3496
  @supports (color: color-mix(in lab, red, red)) {
@@ -3395,10 +3498,6 @@
3395
3498
  }
3396
3499
  --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
3500
  }
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
3501
  .to-teal-50 {
3403
3502
  --tw-gradient-to: var(--color-teal-50);
3404
3503
  --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 +3676,9 @@
3577
3676
  .pb-4 {
3578
3677
  padding-bottom: calc(var(--spacing) * 4);
3579
3678
  }
3679
+ .pb-6 {
3680
+ padding-bottom: calc(var(--spacing) * 6);
3681
+ }
3580
3682
  .pb-8 {
3581
3683
  padding-bottom: calc(var(--spacing) * 8);
3582
3684
  }
@@ -3586,6 +3688,9 @@
3586
3688
  .pb-20 {
3587
3689
  padding-bottom: calc(var(--spacing) * 20);
3588
3690
  }
3691
+ .pl-3 {
3692
+ padding-left: calc(var(--spacing) * 3);
3693
+ }
3589
3694
  .pl-4 {
3590
3695
  padding-left: calc(var(--spacing) * 4);
3591
3696
  }
@@ -3972,6 +4077,9 @@
3972
4077
  .opacity-70 {
3973
4078
  opacity: 70%;
3974
4079
  }
4080
+ .opacity-75 {
4081
+ opacity: 75%;
4082
+ }
3975
4083
  .opacity-90 {
3976
4084
  opacity: 90%;
3977
4085
  }
@@ -4502,6 +4610,23 @@
4502
4610
  }
4503
4611
  }
4504
4612
  }
4613
+ .hover\:border-amber-300 {
4614
+ &:hover {
4615
+ @media (hover: hover) {
4616
+ border-color: var(--color-amber-300);
4617
+ }
4618
+ }
4619
+ }
4620
+ .hover\:border-amber-400\/50 {
4621
+ &:hover {
4622
+ @media (hover: hover) {
4623
+ border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
4624
+ @supports (color: color-mix(in lab, red, red)) {
4625
+ border-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
4626
+ }
4627
+ }
4628
+ }
4629
+ }
4505
4630
  .hover\:border-blue-300 {
4506
4631
  &:hover {
4507
4632
  @media (hover: hover) {
@@ -4516,6 +4641,16 @@
4516
4641
  }
4517
4642
  }
4518
4643
  }
4644
+ .hover\:border-blue-400\/50 {
4645
+ &:hover {
4646
+ @media (hover: hover) {
4647
+ border-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 50%, transparent);
4648
+ @supports (color: color-mix(in lab, red, red)) {
4649
+ border-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);
4650
+ }
4651
+ }
4652
+ }
4653
+ }
4519
4654
  .hover\:border-blue-400\/60 {
4520
4655
  &:hover {
4521
4656
  @media (hover: hover) {
@@ -4625,6 +4760,16 @@
4625
4760
  }
4626
4761
  }
4627
4762
  }
4763
+ .hover\:border-slate-500\/50 {
4764
+ &:hover {
4765
+ @media (hover: hover) {
4766
+ border-color: color-mix(in srgb, oklch(55.4% 0.046 257.417) 50%, transparent);
4767
+ @supports (color: color-mix(in lab, red, red)) {
4768
+ border-color: color-mix(in oklab, var(--color-slate-500) 50%, transparent);
4769
+ }
4770
+ }
4771
+ }
4772
+ }
4628
4773
  .hover\:border-slate-600 {
4629
4774
  &:hover {
4630
4775
  @media (hover: hover) {
@@ -5646,6 +5791,11 @@
5646
5791
  grid-template-columns: repeat(2, minmax(0, 1fr));
5647
5792
  }
5648
5793
  }
5794
+ .sm\:grid-cols-3 {
5795
+ @media (width >= 40rem) {
5796
+ grid-template-columns: repeat(3, minmax(0, 1fr));
5797
+ }
5798
+ }
5649
5799
  .sm\:grid-cols-\[1fr_auto\] {
5650
5800
  @media (width >= 40rem) {
5651
5801
  grid-template-columns: 1fr auto;