tailvars 1.1.1 → 1.2.0

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 (43) hide show
  1. package/README.md +4 -0
  2. package/base.css +21 -23
  3. package/biome.json +10 -0
  4. package/colors/amber.css +11 -11
  5. package/colors/blue.css +11 -11
  6. package/colors/cyan.css +11 -11
  7. package/colors/emerald.css +11 -11
  8. package/colors/fuchsia.css +11 -11
  9. package/colors/gray.css +11 -11
  10. package/colors/green.css +11 -11
  11. package/colors/indigo.css +11 -11
  12. package/colors/lime.css +11 -11
  13. package/colors/mauve.css +11 -11
  14. package/colors/mist.css +11 -11
  15. package/colors/neutral.css +11 -11
  16. package/colors/olive.css +11 -11
  17. package/colors/orange.css +11 -11
  18. package/colors/pink.css +11 -11
  19. package/colors/purple.css +11 -11
  20. package/colors/red.css +11 -11
  21. package/colors/rose.css +11 -11
  22. package/colors/sky.css +11 -11
  23. package/colors/slate.css +11 -11
  24. package/colors/stone.css +11 -11
  25. package/colors/taupe.css +11 -11
  26. package/colors/teal.css +11 -11
  27. package/colors/violet.css +11 -11
  28. package/colors/yellow.css +11 -11
  29. package/colors/zinc.css +11 -11
  30. package/docs/.zed/settings.json +3 -0
  31. package/docs/index.html +21 -0
  32. package/docs/package-lock.json +1042 -0
  33. package/docs/package.json +23 -0
  34. package/docs/postcss.config.mjs +5 -0
  35. package/docs/public/vite.svg +1 -0
  36. package/docs/src/assets/lit.svg +1 -0
  37. package/docs/src/doc-section.js +27 -0
  38. package/docs/src/global-css-mixin.js +12 -0
  39. package/docs/src/hero-section.js +75 -0
  40. package/docs/src/index.css +31 -0
  41. package/docs/src/preflight.css +368 -0
  42. package/index.min.css +1 -0
  43. package/package.json +12 -2
package/colors/rose.css CHANGED
@@ -1,13 +1,13 @@
1
1
  * {
2
- --color-rose-50: oklch(96.9% 0.015 12.422 / var(--color-rose-50-opacity, var(--color-rose-opacity, var(--color-opacity))));
3
- --color-rose-100: oklch(94.1% 0.03 12.58 / var(--color-rose-100-opacity, var(--color-rose-opacity, var(--color-opacity))));
4
- --color-rose-200: oklch(89.2% 0.058 10.001 / var(--color-rose-200-opacity, var(--color-rose-opacity, var(--color-opacity))));
5
- --color-rose-300: oklch(81% 0.117 11.638 / var(--color-rose-300-opacity, var(--color-rose-opacity, var(--color-opacity))));
6
- --color-rose-400: oklch(71.2% 0.194 13.428 / var(--color-rose-400-opacity, var(--color-rose-opacity, var(--color-opacity))));
7
- --color-rose-500: oklch(64.5% 0.246 16.439 / var(--color-rose-500-opacity, var(--color-rose-opacity, var(--color-opacity))));
8
- --color-rose-600: oklch(58.6% 0.253 17.585 / var(--color-rose-600-opacity, var(--color-rose-opacity, var(--color-opacity))));
9
- --color-rose-700: oklch(51.4% 0.222 16.935 / var(--color-rose-700-opacity, var(--color-rose-opacity, var(--color-opacity))));
10
- --color-rose-800: oklch(45.5% 0.188 13.697 / var(--color-rose-800-opacity, var(--color-rose-opacity, var(--color-opacity))));
11
- --color-rose-900: oklch(41% 0.159 10.272 / var(--color-rose-900-opacity, var(--color-rose-opacity, var(--color-opacity))));
12
- --color-rose-950: oklch(27.1% 0.105 12.094 / var(--color-rose-950-opacity, var(--color-rose-opacity, var(--color-opacity))));
2
+ --color-rose-50: oklch(96.9% 0.015 12.422 / var(--color-rose-50-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
3
+ --color-rose-100: oklch(94.1% 0.03 12.58 / var(--color-rose-100-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
4
+ --color-rose-200: oklch(89.2% 0.058 10.001 / var(--color-rose-200-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
5
+ --color-rose-300: oklch(81% 0.117 11.638 / var(--color-rose-300-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
6
+ --color-rose-400: oklch(71.2% 0.194 13.428 / var(--color-rose-400-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
7
+ --color-rose-500: oklch(64.5% 0.246 16.439 / var(--color-rose-500-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
8
+ --color-rose-600: oklch(58.6% 0.253 17.585 / var(--color-rose-600-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
9
+ --color-rose-700: oklch(51.4% 0.222 16.935 / var(--color-rose-700-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
10
+ --color-rose-800: oklch(45.5% 0.188 13.697 / var(--color-rose-800-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
11
+ --color-rose-900: oklch(41% 0.159 10.272 / var(--color-rose-900-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
12
+ --color-rose-950: oklch(27.1% 0.105 12.094 / var(--color-rose-950-opacity, var(--color-rose-opacity, var(--color-opacity, 100%))));
13
13
  }
package/colors/sky.css CHANGED
@@ -1,13 +1,13 @@
1
1
  * {
2
- --color-sky-50: oklch(97.7% 0.013 236.62 / var(--color-sky-50-opacity, var(--color-sky-opacity, var(--color-opacity))));
3
- --color-sky-100: oklch(95.1% 0.026 236.824 / var(--color-sky-100-opacity, var(--color-sky-opacity, var(--color-opacity))));
4
- --color-sky-200: oklch(90.1% 0.058 230.902 / var(--color-sky-200-opacity, var(--color-sky-opacity, var(--color-opacity))));
5
- --color-sky-300: oklch(82.8% 0.111 230.318 / var(--color-sky-300-opacity, var(--color-sky-opacity, var(--color-opacity))));
6
- --color-sky-400: oklch(74.6% 0.16 232.661 / var(--color-sky-400-opacity, var(--color-sky-opacity, var(--color-opacity))));
7
- --color-sky-500: oklch(68.5% 0.169 237.323 / var(--color-sky-500-opacity, var(--color-sky-opacity, var(--color-opacity))));
8
- --color-sky-600: oklch(58.8% 0.158 241.966 / var(--color-sky-600-opacity, var(--color-sky-opacity, var(--color-opacity))));
9
- --color-sky-700: oklch(50% 0.134 242.749 / var(--color-sky-700-opacity, var(--color-sky-opacity, var(--color-opacity))));
10
- --color-sky-800: oklch(44.3% 0.11 240.79 / var(--color-sky-800-opacity, var(--color-sky-opacity, var(--color-opacity))));
11
- --color-sky-900: oklch(39.1% 0.09 240.876 / var(--color-sky-900-opacity, var(--color-sky-opacity, var(--color-opacity))));
12
- --color-sky-950: oklch(29.3% 0.066 243.157 / var(--color-sky-950-opacity, var(--color-sky-opacity, var(--color-opacity))));
2
+ --color-sky-50: oklch(97.7% 0.013 236.62 / var(--color-sky-50-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
3
+ --color-sky-100: oklch(95.1% 0.026 236.824 / var(--color-sky-100-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
4
+ --color-sky-200: oklch(90.1% 0.058 230.902 / var(--color-sky-200-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
5
+ --color-sky-300: oklch(82.8% 0.111 230.318 / var(--color-sky-300-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
6
+ --color-sky-400: oklch(74.6% 0.16 232.661 / var(--color-sky-400-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
7
+ --color-sky-500: oklch(68.5% 0.169 237.323 / var(--color-sky-500-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
8
+ --color-sky-600: oklch(58.8% 0.158 241.966 / var(--color-sky-600-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
9
+ --color-sky-700: oklch(50% 0.134 242.749 / var(--color-sky-700-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
10
+ --color-sky-800: oklch(44.3% 0.11 240.79 / var(--color-sky-800-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
11
+ --color-sky-900: oklch(39.1% 0.09 240.876 / var(--color-sky-900-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
12
+ --color-sky-950: oklch(29.3% 0.066 243.157 / var(--color-sky-950-opacity, var(--color-sky-opacity, var(--color-opacity, 100%))));
13
13
  }
package/colors/slate.css CHANGED
@@ -1,13 +1,13 @@
1
1
  * {
2
- --color-slate-50: oklch(98.4% 0.003 247.858 / var(--color-slate-50-opacity, var(--color-slate-opacity, var(--color-opacity))));
3
- --color-slate-100: oklch(96.8% 0.007 247.896 / var(--color-slate-100-opacity, var(--color-slate-opacity, var(--color-opacity))));
4
- --color-slate-200: oklch(92.9% 0.013 255.508 / var(--color-slate-200-opacity, var(--color-slate-opacity, var(--color-opacity))));
5
- --color-slate-300: oklch(86.9% 0.022 252.894 / var(--color-slate-300-opacity, var(--color-slate-opacity, var(--color-opacity))));
6
- --color-slate-400: oklch(70.4% 0.04 256.788 / var(--color-slate-400-opacity, var(--color-slate-opacity, var(--color-opacity))));
7
- --color-slate-500: oklch(55.4% 0.046 257.417 / var(--color-slate-500-opacity, var(--color-slate-opacity, var(--color-opacity))));
8
- --color-slate-600: oklch(44.6% 0.043 257.281 / var(--color-slate-600-opacity, var(--color-slate-opacity, var(--color-opacity))));
9
- --color-slate-700: oklch(37.2% 0.044 257.287 / var(--color-slate-700-opacity, var(--color-slate-opacity, var(--color-opacity))));
10
- --color-slate-800: oklch(27.9% 0.041 260.031 / var(--color-slate-800-opacity, var(--color-slate-opacity, var(--color-opacity))));
11
- --color-slate-900: oklch(20.8% 0.042 265.755 / var(--color-slate-900-opacity, var(--color-slate-opacity, var(--color-opacity))));
12
- --color-slate-950: oklch(12.9% 0.042 264.695 / var(--color-slate-950-opacity, var(--color-slate-opacity, var(--color-opacity))));
2
+ --color-slate-50: oklch(98.4% 0.003 247.858 / var(--color-slate-50-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
3
+ --color-slate-100: oklch(96.8% 0.007 247.896 / var(--color-slate-100-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
4
+ --color-slate-200: oklch(92.9% 0.013 255.508 / var(--color-slate-200-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
5
+ --color-slate-300: oklch(86.9% 0.022 252.894 / var(--color-slate-300-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
6
+ --color-slate-400: oklch(70.4% 0.04 256.788 / var(--color-slate-400-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
7
+ --color-slate-500: oklch(55.4% 0.046 257.417 / var(--color-slate-500-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
8
+ --color-slate-600: oklch(44.6% 0.043 257.281 / var(--color-slate-600-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
9
+ --color-slate-700: oklch(37.2% 0.044 257.287 / var(--color-slate-700-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
10
+ --color-slate-800: oklch(27.9% 0.041 260.031 / var(--color-slate-800-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
11
+ --color-slate-900: oklch(20.8% 0.042 265.755 / var(--color-slate-900-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
12
+ --color-slate-950: oklch(12.9% 0.042 264.695 / var(--color-slate-950-opacity, var(--color-slate-opacity, var(--color-opacity, 100%))));
13
13
  }
package/colors/stone.css CHANGED
@@ -1,13 +1,13 @@
1
1
  * {
2
- --color-stone-50: oklch(98.5% 0.001 106.423 / var(--color-stone-50-opacity, var(--color-stone-opacity, var(--color-opacity))));
3
- --color-stone-100: oklch(97% 0.001 106.424 / var(--color-stone-100-opacity, var(--color-stone-opacity, var(--color-opacity))));
4
- --color-stone-200: oklch(92.3% 0.003 48.717 / var(--color-stone-200-opacity, var(--color-stone-opacity, var(--color-opacity))));
5
- --color-stone-300: oklch(86.9% 0.005 56.366 / var(--color-stone-300-opacity, var(--color-stone-opacity, var(--color-opacity))));
6
- --color-stone-400: oklch(70.9% 0.01 56.259 / var(--color-stone-400-opacity, var(--color-stone-opacity, var(--color-opacity))));
7
- --color-stone-500: oklch(55.3% 0.013 58.071 / var(--color-stone-500-opacity, var(--color-stone-opacity, var(--color-opacity))));
8
- --color-stone-600: oklch(44.4% 0.011 73.639 / var(--color-stone-600-opacity, var(--color-stone-opacity, var(--color-opacity))));
9
- --color-stone-700: oklch(37.4% 0.01 67.558 / var(--color-stone-700-opacity, var(--color-stone-opacity, var(--color-opacity))));
10
- --color-stone-800: oklch(26.8% 0.007 34.298 / var(--color-stone-800-opacity, var(--color-stone-opacity, var(--color-opacity))));
11
- --color-stone-900: oklch(21.6% 0.006 56.043 / var(--color-stone-900-opacity, var(--color-stone-opacity, var(--color-opacity))));
12
- --color-stone-950: oklch(14.7% 0.004 49.25 / var(--color-stone-950-opacity, var(--color-stone-opacity, var(--color-opacity))));
2
+ --color-stone-50: oklch(98.5% 0.001 106.423 / var(--color-stone-50-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
3
+ --color-stone-100: oklch(97% 0.001 106.424 / var(--color-stone-100-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
4
+ --color-stone-200: oklch(92.3% 0.003 48.717 / var(--color-stone-200-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
5
+ --color-stone-300: oklch(86.9% 0.005 56.366 / var(--color-stone-300-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
6
+ --color-stone-400: oklch(70.9% 0.01 56.259 / var(--color-stone-400-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
7
+ --color-stone-500: oklch(55.3% 0.013 58.071 / var(--color-stone-500-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
8
+ --color-stone-600: oklch(44.4% 0.011 73.639 / var(--color-stone-600-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
9
+ --color-stone-700: oklch(37.4% 0.01 67.558 / var(--color-stone-700-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
10
+ --color-stone-800: oklch(26.8% 0.007 34.298 / var(--color-stone-800-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
11
+ --color-stone-900: oklch(21.6% 0.006 56.043 / var(--color-stone-900-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
12
+ --color-stone-950: oklch(14.7% 0.004 49.25 / var(--color-stone-950-opacity, var(--color-stone-opacity, var(--color-opacity, 100%))));
13
13
  }
package/colors/taupe.css CHANGED
@@ -1,13 +1,13 @@
1
1
  * {
2
- --color-taupe-50: oklch(98.6% 0.002 67.8 / var(--color-taupe-50-opacity, var(--color-taupe-opacity, var(--color-opacity))));
3
- --color-taupe-100: oklch(96% 0.002 17.2 / var(--color-taupe-100-opacity, var(--color-taupe-opacity, var(--color-opacity))));
4
- --color-taupe-200: oklch(92.2% 0.005 34.3 / var(--color-taupe-200-opacity, var(--color-taupe-opacity, var(--color-opacity))));
5
- --color-taupe-300: oklch(86.8% 0.007 39.5 / var(--color-taupe-300-opacity, var(--color-taupe-opacity, var(--color-opacity))));
6
- --color-taupe-400: oklch(71.4% 0.014 41.2 / var(--color-taupe-400-opacity, var(--color-taupe-opacity, var(--color-opacity))));
7
- --color-taupe-500: oklch(54.7% 0.021 43.1 / var(--color-taupe-500-opacity, var(--color-taupe-opacity, var(--color-opacity))));
8
- --color-taupe-600: oklch(43.8% 0.017 39.3 / var(--color-taupe-600-opacity, var(--color-taupe-opacity, var(--color-opacity))));
9
- --color-taupe-700: oklch(36.7% 0.016 35.7 / var(--color-taupe-700-opacity, var(--color-taupe-opacity, var(--color-opacity))));
10
- --color-taupe-800: oklch(26.8% 0.011 36.5 / var(--color-taupe-800-opacity, var(--color-taupe-opacity, var(--color-opacity))));
11
- --color-taupe-900: oklch(21.4% 0.009 43.1 / var(--color-taupe-900-opacity, var(--color-taupe-opacity, var(--color-opacity))));
12
- --color-taupe-950: oklch(14.7% 0.004 49.3 / var(--color-taupe-950-opacity, var(--color-taupe-opacity, var(--color-opacity))));
2
+ --color-taupe-50: oklch(98.6% 0.002 67.8 / var(--color-taupe-50-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
3
+ --color-taupe-100: oklch(96% 0.002 17.2 / var(--color-taupe-100-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
4
+ --color-taupe-200: oklch(92.2% 0.005 34.3 / var(--color-taupe-200-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
5
+ --color-taupe-300: oklch(86.8% 0.007 39.5 / var(--color-taupe-300-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
6
+ --color-taupe-400: oklch(71.4% 0.014 41.2 / var(--color-taupe-400-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
7
+ --color-taupe-500: oklch(54.7% 0.021 43.1 / var(--color-taupe-500-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
8
+ --color-taupe-600: oklch(43.8% 0.017 39.3 / var(--color-taupe-600-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
9
+ --color-taupe-700: oklch(36.7% 0.016 35.7 / var(--color-taupe-700-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
10
+ --color-taupe-800: oklch(26.8% 0.011 36.5 / var(--color-taupe-800-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
11
+ --color-taupe-900: oklch(21.4% 0.009 43.1 / var(--color-taupe-900-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
12
+ --color-taupe-950: oklch(14.7% 0.004 49.3 / var(--color-taupe-950-opacity, var(--color-taupe-opacity, var(--color-opacity, 100%))));
13
13
  }
package/colors/teal.css CHANGED
@@ -1,13 +1,13 @@
1
1
  * {
2
- --color-teal-50: oklch(98.4% 0.014 180.72 / var(--color-teal-50-opacity, var(--color-teal-opacity, var(--color-opacity))));
3
- --color-teal-100: oklch(95.3% 0.051 180.801 / var(--color-teal-100-opacity, var(--color-teal-opacity, var(--color-opacity))));
4
- --color-teal-200: oklch(91% 0.096 180.426 / var(--color-teal-200-opacity, var(--color-teal-opacity, var(--color-opacity))));
5
- --color-teal-300: oklch(85.5% 0.138 181.071 / var(--color-teal-300-opacity, var(--color-teal-opacity, var(--color-opacity))));
6
- --color-teal-400: oklch(77.7% 0.152 181.912 / var(--color-teal-400-opacity, var(--color-teal-opacity, var(--color-opacity))));
7
- --color-teal-500: oklch(70.4% 0.14 182.503 / var(--color-teal-500-opacity, var(--color-teal-opacity, var(--color-opacity))));
8
- --color-teal-600: oklch(60% 0.118 184.704 / var(--color-teal-600-opacity, var(--color-teal-opacity, var(--color-opacity))));
9
- --color-teal-700: oklch(51.1% 0.096 186.391 / var(--color-teal-700-opacity, var(--color-teal-opacity, var(--color-opacity))));
10
- --color-teal-800: oklch(43.7% 0.078 188.216 / var(--color-teal-800-opacity, var(--color-teal-opacity, var(--color-opacity))));
11
- --color-teal-900: oklch(38.6% 0.063 188.416 / var(--color-teal-900-opacity, var(--color-teal-opacity, var(--color-opacity))));
12
- --color-teal-950: oklch(27.7% 0.046 192.524 / var(--color-teal-950-opacity, var(--color-teal-opacity, var(--color-opacity))));
2
+ --color-teal-50: oklch(98.4% 0.014 180.72 / var(--color-teal-50-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
3
+ --color-teal-100: oklch(95.3% 0.051 180.801 / var(--color-teal-100-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
4
+ --color-teal-200: oklch(91% 0.096 180.426 / var(--color-teal-200-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
5
+ --color-teal-300: oklch(85.5% 0.138 181.071 / var(--color-teal-300-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
6
+ --color-teal-400: oklch(77.7% 0.152 181.912 / var(--color-teal-400-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
7
+ --color-teal-500: oklch(70.4% 0.14 182.503 / var(--color-teal-500-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
8
+ --color-teal-600: oklch(60% 0.118 184.704 / var(--color-teal-600-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
9
+ --color-teal-700: oklch(51.1% 0.096 186.391 / var(--color-teal-700-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
10
+ --color-teal-800: oklch(43.7% 0.078 188.216 / var(--color-teal-800-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
11
+ --color-teal-900: oklch(38.6% 0.063 188.416 / var(--color-teal-900-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
12
+ --color-teal-950: oklch(27.7% 0.046 192.524 / var(--color-teal-950-opacity, var(--color-teal-opacity, var(--color-opacity, 100%))));
13
13
  }
package/colors/violet.css CHANGED
@@ -1,13 +1,13 @@
1
1
  * {
2
- --color-violet-50: oklch(96.9% 0.016 293.756 / var(--color-violet-50-opacity, var(--color-violet-opacity, var(--color-opacity))));
3
- --color-violet-100: oklch(94.3% 0.029 294.588 / var(--color-violet-100-opacity, var(--color-violet-opacity, var(--color-opacity))));
4
- --color-violet-200: oklch(89.4% 0.057 293.283 / var(--color-violet-200-opacity, var(--color-violet-opacity, var(--color-opacity))));
5
- --color-violet-300: oklch(81.1% 0.111 293.571 / var(--color-violet-300-opacity, var(--color-violet-opacity, var(--color-opacity))));
6
- --color-violet-400: oklch(70.2% 0.183 293.541 / var(--color-violet-400-opacity, var(--color-violet-opacity, var(--color-opacity))));
7
- --color-violet-500: oklch(60.6% 0.25 292.717 / var(--color-violet-500-opacity, var(--color-violet-opacity, var(--color-opacity))));
8
- --color-violet-600: oklch(54.1% 0.281 293.009 / var(--color-violet-600-opacity, var(--color-violet-opacity, var(--color-opacity))));
9
- --color-violet-700: oklch(49.1% 0.27 292.581 / var(--color-violet-700-opacity, var(--color-violet-opacity, var(--color-opacity))));
10
- --color-violet-800: oklch(43.2% 0.232 292.759 / var(--color-violet-800-opacity, var(--color-violet-opacity, var(--color-opacity))));
11
- --color-violet-900: oklch(38% 0.189 293.745 / var(--color-violet-900-opacity, var(--color-violet-opacity, var(--color-opacity))));
12
- --color-violet-950: oklch(28.3% 0.141 291.089 / var(--color-violet-950-opacity, var(--color-violet-opacity, var(--color-opacity))));
2
+ --color-violet-50: oklch(96.9% 0.016 293.756 / var(--color-violet-50-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
3
+ --color-violet-100: oklch(94.3% 0.029 294.588 / var(--color-violet-100-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
4
+ --color-violet-200: oklch(89.4% 0.057 293.283 / var(--color-violet-200-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
5
+ --color-violet-300: oklch(81.1% 0.111 293.571 / var(--color-violet-300-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
6
+ --color-violet-400: oklch(70.2% 0.183 293.541 / var(--color-violet-400-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
7
+ --color-violet-500: oklch(60.6% 0.25 292.717 / var(--color-violet-500-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
8
+ --color-violet-600: oklch(54.1% 0.281 293.009 / var(--color-violet-600-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
9
+ --color-violet-700: oklch(49.1% 0.27 292.581 / var(--color-violet-700-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
10
+ --color-violet-800: oklch(43.2% 0.232 292.759 / var(--color-violet-800-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
11
+ --color-violet-900: oklch(38% 0.189 293.745 / var(--color-violet-900-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
12
+ --color-violet-950: oklch(28.3% 0.141 291.089 / var(--color-violet-950-opacity, var(--color-violet-opacity, var(--color-opacity, 100%))));
13
13
  }
package/colors/yellow.css CHANGED
@@ -1,13 +1,13 @@
1
1
  * {
2
- --color-yellow-50: oklch(98.7% 0.026 102.212 / var(--color-yellow-50-opacity, var(--color-yellow-opacity, var(--color-opacity))));
3
- --color-yellow-100: oklch(97.3% 0.071 103.193 / var(--color-yellow-100-opacity, var(--color-yellow-opacity, var(--color-opacity))));
4
- --color-yellow-200: oklch(94.5% 0.129 101.54 / var(--color-yellow-200-opacity, var(--color-yellow-opacity, var(--color-opacity))));
5
- --color-yellow-300: oklch(90.5% 0.182 98.111 / var(--color-yellow-300-opacity, var(--color-yellow-opacity, var(--color-opacity))));
6
- --color-yellow-400: oklch(85.2% 0.199 91.936 / var(--color-yellow-400-opacity, var(--color-yellow-opacity, var(--color-opacity))));
7
- --color-yellow-500: oklch(79.5% 0.184 86.047 / var(--color-yellow-500-opacity, var(--color-yellow-opacity, var(--color-opacity))));
8
- --color-yellow-600: oklch(68.1% 0.162 75.834 / var(--color-yellow-600-opacity, var(--color-yellow-opacity, var(--color-opacity))));
9
- --color-yellow-700: oklch(55.4% 0.135 66.442 / var(--color-yellow-700-opacity, var(--color-yellow-opacity, var(--color-opacity))));
10
- --color-yellow-800: oklch(47.6% 0.114 61.907 / var(--color-yellow-800-opacity, var(--color-yellow-opacity, var(--color-opacity))));
11
- --color-yellow-900: oklch(42.1% 0.095 57.708 / var(--color-yellow-900-opacity, var(--color-yellow-opacity, var(--color-opacity))));
12
- --color-yellow-950: oklch(28.6% 0.066 53.813 / var(--color-yellow-950-opacity, var(--color-yellow-opacity, var(--color-opacity))));
2
+ --color-yellow-50: oklch(98.7% 0.026 102.212 / var(--color-yellow-50-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
3
+ --color-yellow-100: oklch(97.3% 0.071 103.193 / var(--color-yellow-100-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
4
+ --color-yellow-200: oklch(94.5% 0.129 101.54 / var(--color-yellow-200-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
5
+ --color-yellow-300: oklch(90.5% 0.182 98.111 / var(--color-yellow-300-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
6
+ --color-yellow-400: oklch(85.2% 0.199 91.936 / var(--color-yellow-400-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
7
+ --color-yellow-500: oklch(79.5% 0.184 86.047 / var(--color-yellow-500-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
8
+ --color-yellow-600: oklch(68.1% 0.162 75.834 / var(--color-yellow-600-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
9
+ --color-yellow-700: oklch(55.4% 0.135 66.442 / var(--color-yellow-700-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
10
+ --color-yellow-800: oklch(47.6% 0.114 61.907 / var(--color-yellow-800-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
11
+ --color-yellow-900: oklch(42.1% 0.095 57.708 / var(--color-yellow-900-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
12
+ --color-yellow-950: oklch(28.6% 0.066 53.813 / var(--color-yellow-950-opacity, var(--color-yellow-opacity, var(--color-opacity, 100%))));
13
13
  }
package/colors/zinc.css CHANGED
@@ -1,13 +1,13 @@
1
1
  * {
2
- --color-zinc-50: oklch(98.5% 0 0 / var(--color-zinc-50-opacity, var(--color-zinc-opacity, var(--color-opacity))));
3
- --color-zinc-100: oklch(96.7% 0.001 286.375 / var(--color-zinc-100-opacity, var(--color-zinc-opacity, var(--color-opacity))));
4
- --color-zinc-200: oklch(92% 0.004 286.32 / var(--color-zinc-200-opacity, var(--color-zinc-opacity, var(--color-opacity))));
5
- --color-zinc-300: oklch(87.1% 0.006 286.286 / var(--color-zinc-300-opacity, var(--color-zinc-opacity, var(--color-opacity))));
6
- --color-zinc-400: oklch(70.5% 0.015 286.067 / var(--color-zinc-400-opacity, var(--color-zinc-opacity, var(--color-opacity))));
7
- --color-zinc-500: oklch(55.2% 0.016 285.938 / var(--color-zinc-500-opacity, var(--color-zinc-opacity, var(--color-opacity))));
8
- --color-zinc-600: oklch(44.2% 0.017 285.786 / var(--color-zinc-600-opacity, var(--color-zinc-opacity, var(--color-opacity))));
9
- --color-zinc-700: oklch(37% 0.013 285.805 / var(--color-zinc-700-opacity, var(--color-zinc-opacity, var(--color-opacity))));
10
- --color-zinc-800: oklch(27.4% 0.006 286.033 / var(--color-zinc-800-opacity, var(--color-zinc-opacity, var(--color-opacity))));
11
- --color-zinc-900: oklch(21% 0.006 285.885 / var(--color-zinc-900-opacity, var(--color-zinc-opacity, var(--color-opacity))));
12
- --color-zinc-950: oklch(14.1% 0.005 285.823 / var(--color-zinc-950-opacity, var(--color-zinc-opacity, var(--color-opacity))));
2
+ --color-zinc-50: oklch(98.5% 0 0 / var(--color-zinc-50-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
3
+ --color-zinc-100: oklch(96.7% 0.001 286.375 / var(--color-zinc-100-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
4
+ --color-zinc-200: oklch(92% 0.004 286.32 / var(--color-zinc-200-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
5
+ --color-zinc-300: oklch(87.1% 0.006 286.286 / var(--color-zinc-300-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
6
+ --color-zinc-400: oklch(70.5% 0.015 286.067 / var(--color-zinc-400-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
7
+ --color-zinc-500: oklch(55.2% 0.016 285.938 / var(--color-zinc-500-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
8
+ --color-zinc-600: oklch(44.2% 0.017 285.786 / var(--color-zinc-600-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
9
+ --color-zinc-700: oklch(37% 0.013 285.805 / var(--color-zinc-700-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
10
+ --color-zinc-800: oklch(27.4% 0.006 286.033 / var(--color-zinc-800-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
11
+ --color-zinc-900: oklch(21% 0.006 285.885 / var(--color-zinc-900-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
12
+ --color-zinc-950: oklch(14.1% 0.005 285.823 / var(--color-zinc-950-opacity, var(--color-zinc-opacity, var(--color-opacity, 100%))));
13
13
  }
package/docs/.zed/settings.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "tab_size": 2
3
+ }
package/docs/index.html ADDED
@@ -0,0 +1,21 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>docs</title>
8
+ <link global rel="stylesheet" href="./src/index.css" />
9
+ <script type="module" src="/src/doc-section.js"></script>
10
+ <script type="module" src="/src/hero-section.js"></script>
11
+ </head>
12
+ <body>
13
+ <div class="container">
14
+ <hero-section
15
+ title="--tailvars"
16
+ subtitle="Putting the CSS back into your Tailwind"
17
+ class="no-container"
18
+ ></hero-section>
19
+ </div>
20
+ </body>
21
+ </html>