@grida/tailwindcss-colors 4.0.0 → 4.0.2

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 (22) hide show
  1. package/README.md +78 -6
  2. package/css/hex.css +1 -1
  3. package/css/oklch.css +243 -243
  4. package/css/rgb.css +1 -1
  5. package/css/rgba.css +1 -1
  6. package/json/hex.d.cts +14 -0
  7. package/json/hex.json +2 -2
  8. package/json/oklch.d.cts +15 -0
  9. package/json/oklch.json +1 -1
  10. package/json/rgb.d.cts +13 -0
  11. package/json/rgb.json +5 -5
  12. package/json/rgba.d.cts +15 -0
  13. package/json/rgba.json +5 -5
  14. package/json/rgbf.d.cts +14 -0
  15. package/json/rgbf.json +82 -82
  16. package/package.json +45 -15
  17. package/types.d.ts +96 -0
  18. package/json/hex.json.d.ts +0 -53
  19. package/json/oklch.json.d.ts +0 -65
  20. package/json/rgb.json.d.ts +0 -62
  21. package/json/rgba.json.d.ts +0 -65
  22. package/json/rgbf.json.d.ts +0 -63
package/types.d.ts ADDED
@@ -0,0 +1,96 @@
1
+ /**
2
+ * Tailwind CSS color name identifier.
3
+ */
4
+ export type ColorName =
5
+ | "amber"
6
+ | "blue"
7
+ | "cyan"
8
+ | "emerald"
9
+ | "fuchsia"
10
+ | "gray"
11
+ | "green"
12
+ | "indigo"
13
+ | "lime"
14
+ | "neutral"
15
+ | "orange"
16
+ | "pink"
17
+ | "purple"
18
+ | "red"
19
+ | "rose"
20
+ | "sky"
21
+ | "slate"
22
+ | "stone"
23
+ | "teal"
24
+ | "violet"
25
+ | "yellow"
26
+ | "zinc";
27
+
28
+ /**
29
+ * Tailwind CSS color shade identifier.
30
+ *
31
+ * @spec Valid shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
32
+ */
33
+ export type ColorShade =
34
+ | "50"
35
+ | "100"
36
+ | "200"
37
+ | "300"
38
+ | "400"
39
+ | "500"
40
+ | "600"
41
+ | "700"
42
+ | "800"
43
+ | "900"
44
+ | "950";
45
+
46
+ /**
47
+ * RGB color value in hexadecimal format.
48
+ *
49
+ * @unit Hex string
50
+ * @spec Hexadecimal color strings in lowercase format (#rrggbb)
51
+ * @format "#rrggbb"
52
+ * @example #62748e // slate-500
53
+ */
54
+ export type Hex = string;
55
+
56
+ /**
57
+ * RGB color tuple in RGB888 format.
58
+ *
59
+ * @unit RGB888
60
+ * @spec RGB values as unsigned 8-bit integers (0-255)
61
+ * @format [r, g, b]
62
+ * @example [98, 116, 142] // slate-500
63
+ */
64
+ export type RGB = [red: number, green: number, blue: number];
65
+
66
+ /**
67
+ * RGB color tuple in RGB32F format.
68
+ *
69
+ * @unit RGB32F
70
+ * @spec RGB values as 32-bit floating-point numbers (0.0-1.0)
71
+ * @format [r, g, b]
72
+ * @example [0.384, 0.455, 0.557] // slate-500
73
+ */
74
+ export type RGBF = [red: number, green: number, blue: number];
75
+
76
+ /**
77
+ * RGBA color tuple in RGB888A32F format.
78
+ *
79
+ * @unit RGB888A32F
80
+ * @spec RGB values as unsigned 8-bit integers (0-255), alpha as 32-bit float (0.0-1.0)
81
+ * @format [r, g, b, a]
82
+ * @note Alpha is always 1.0 for all Tailwind CSS v4 colors (fully opaque)
83
+ * @example [98, 116, 142, 1] // slate-500
84
+ */
85
+ export type RGBA = [red: number, green: number, blue: number, alpha: number];
86
+
87
+ /**
88
+ * OKLCH color tuple.
89
+ *
90
+ * @unit OKLCH (perceptual color space)
91
+ * @spec Lightness (0.0-1.0), Chroma (0.0+), Hue (0.0-360.0 degrees)
92
+ * @format [l, c, h]
93
+ * @note Hue may be 0 for achromatic colors (grays)
94
+ * @example [0.384, 0.015, 255.59] // slate-500
95
+ */
96
+ export type OKLCH = [lightness: number, chroma: number, hue: number];
package/json/hex.json.d.ts DELETED
@@ -1,53 +0,0 @@
1
- /**
2
- * Tailwind CSS color shade identifier.
3
- *
4
- * @spec Valid shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
5
- */
6
- type ColorShade =
7
- | "50"
8
- | "100"
9
- | "200"
10
- | "300"
11
- | "400"
12
- | "500"
13
- | "600"
14
- | "700"
15
- | "800"
16
- | "900"
17
- | "950";
18
-
19
- /**
20
- * Tailwind CSS v4 color palette in hexadecimal format.
21
- *
22
- * @unit Hex string
23
- * @spec Hexadecimal color strings in lowercase format (#rrggbb)
24
- * @format { [colorFamily]: { [shade]: "#rrggbb" } }
25
- * @example colors.slate["500"] // "#64748e"
26
- * @useCase Web development, CSS, human-readable color strings
27
- */
28
- declare const colors: {
29
- amber: Record<ColorShade, string>;
30
- blue: Record<ColorShade, string>;
31
- cyan: Record<ColorShade, string>;
32
- emerald: Record<ColorShade, string>;
33
- fuchsia: Record<ColorShade, string>;
34
- gray: Record<ColorShade, string>;
35
- green: Record<ColorShade, string>;
36
- indigo: Record<ColorShade, string>;
37
- lime: Record<ColorShade, string>;
38
- neutral: Record<ColorShade, string>;
39
- orange: Record<ColorShade, string>;
40
- pink: Record<ColorShade, string>;
41
- purple: Record<ColorShade, string>;
42
- red: Record<ColorShade, string>;
43
- rose: Record<ColorShade, string>;
44
- sky: Record<ColorShade, string>;
45
- slate: Record<ColorShade, string>;
46
- stone: Record<ColorShade, string>;
47
- teal: Record<ColorShade, string>;
48
- violet: Record<ColorShade, string>;
49
- yellow: Record<ColorShade, string>;
50
- zinc: Record<ColorShade, string>;
51
- };
52
-
53
- export default colors;
package/json/oklch.json.d.ts DELETED
@@ -1,65 +0,0 @@
1
- /**
2
- * OKLCH color tuple.
3
- *
4
- * @unit OKLCH (perceptual color space)
5
- * @spec Lightness (0.0-1.0), Chroma (0.0+), Hue (0.0-360.0 degrees)
6
- * @format [l, c, h]
7
- * @note Hue may be 0 for achromatic colors (grays)
8
- * @example [0.384, 0.015, 255.59] // slate-500
9
- */
10
- type OKLCH = [number, number, number];
11
-
12
- /**
13
- * Tailwind CSS color shade identifier.
14
- *
15
- * @spec Valid shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
16
- */
17
- type ColorShade =
18
- | "50"
19
- | "100"
20
- | "200"
21
- | "300"
22
- | "400"
23
- | "500"
24
- | "600"
25
- | "700"
26
- | "800"
27
- | "900"
28
- | "950";
29
-
30
- /**
31
- * Tailwind CSS v4 color palette in OKLCH format.
32
- *
33
- * @unit OKLCH (perceptual color space)
34
- * @spec Lightness (0.0-1.0), Chroma (0.0+), Hue (0.0-360.0 degrees)
35
- * @format { [colorFamily]: { [shade]: [l, c, h] } }
36
- * @note Hue is 0 for achromatic colors (grays)
37
- * @example colors.slate["500"] // [0.384, 0.015, 255.59]
38
- * @useCase Perceptual color operations, color mixing, modern color spaces
39
- */
40
- declare const colors: {
41
- amber: Record<ColorShade, OKLCH>;
42
- blue: Record<ColorShade, OKLCH>;
43
- cyan: Record<ColorShade, OKLCH>;
44
- emerald: Record<ColorShade, OKLCH>;
45
- fuchsia: Record<ColorShade, OKLCH>;
46
- gray: Record<ColorShade, OKLCH>;
47
- green: Record<ColorShade, OKLCH>;
48
- indigo: Record<ColorShade, OKLCH>;
49
- lime: Record<ColorShade, OKLCH>;
50
- neutral: Record<ColorShade, OKLCH>;
51
- orange: Record<ColorShade, OKLCH>;
52
- pink: Record<ColorShade, OKLCH>;
53
- purple: Record<ColorShade, OKLCH>;
54
- red: Record<ColorShade, OKLCH>;
55
- rose: Record<ColorShade, OKLCH>;
56
- sky: Record<ColorShade, OKLCH>;
57
- slate: Record<ColorShade, OKLCH>;
58
- stone: Record<ColorShade, OKLCH>;
59
- teal: Record<ColorShade, OKLCH>;
60
- violet: Record<ColorShade, OKLCH>;
61
- yellow: Record<ColorShade, OKLCH>;
62
- zinc: Record<ColorShade, OKLCH>;
63
- };
64
-
65
- export default colors;
package/json/rgb.json.d.ts DELETED
@@ -1,62 +0,0 @@
1
- /**
2
- * RGB color tuple in RGB888 format.
3
- *
4
- * @unit RGB888
5
- * @spec RGB values as unsigned 8-bit integers (0-255)
6
- * @format [r, g, b]
7
- * @example [98, 116, 142] // slate-500
8
- */
9
- type RGB = [number, number, number];
10
-
11
- /**
12
- * Tailwind CSS color shade identifier.
13
- *
14
- * @spec Valid shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
15
- */
16
- type ColorShade =
17
- | "50"
18
- | "100"
19
- | "200"
20
- | "300"
21
- | "400"
22
- | "500"
23
- | "600"
24
- | "700"
25
- | "800"
26
- | "900"
27
- | "950";
28
-
29
- /**
30
- * Tailwind CSS v4 color palette in RGB888 format.
31
- *
32
- * @unit RGB888
33
- * @spec RGB values as unsigned 8-bit integers (0-255)
34
- * @format { [colorFamily]: { [shade]: [r, g, b] } }
35
- * @example colors.slate["500"] // [98, 116, 142]
36
- */
37
- declare const colors: {
38
- amber: Record<ColorShade, RGB>;
39
- blue: Record<ColorShade, RGB>;
40
- cyan: Record<ColorShade, RGB>;
41
- emerald: Record<ColorShade, RGB>;
42
- fuchsia: Record<ColorShade, RGB>;
43
- gray: Record<ColorShade, RGB>;
44
- green: Record<ColorShade, RGB>;
45
- indigo: Record<ColorShade, RGB>;
46
- lime: Record<ColorShade, RGB>;
47
- neutral: Record<ColorShade, RGB>;
48
- orange: Record<ColorShade, RGB>;
49
- pink: Record<ColorShade, RGB>;
50
- purple: Record<ColorShade, RGB>;
51
- red: Record<ColorShade, RGB>;
52
- rose: Record<ColorShade, RGB>;
53
- sky: Record<ColorShade, RGB>;
54
- slate: Record<ColorShade, RGB>;
55
- stone: Record<ColorShade, RGB>;
56
- teal: Record<ColorShade, RGB>;
57
- violet: Record<ColorShade, RGB>;
58
- yellow: Record<ColorShade, RGB>;
59
- zinc: Record<ColorShade, RGB>;
60
- };
61
-
62
- export default colors;
package/json/rgba.json.d.ts DELETED
@@ -1,65 +0,0 @@
1
- /**
2
- * RGBA color tuple in RGB888A32F format.
3
- *
4
- * @unit RGB888A32F
5
- * @spec RGB values as unsigned 8-bit integers (0-255), alpha as 32-bit float (0.0-1.0)
6
- * @format [r, g, b, a]
7
- * @note Alpha is always 1.0 for all Tailwind CSS v4 colors (fully opaque)
8
- * @example [98, 116, 142, 1] // slate-500
9
- */
10
- type RGBA = [number, number, number, number];
11
-
12
- /**
13
- * Tailwind CSS color shade identifier.
14
- *
15
- * @spec Valid shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
16
- */
17
- type ColorShade =
18
- | "50"
19
- | "100"
20
- | "200"
21
- | "300"
22
- | "400"
23
- | "500"
24
- | "600"
25
- | "700"
26
- | "800"
27
- | "900"
28
- | "950";
29
-
30
- /**
31
- * Tailwind CSS v4 color palette in RGB888A32F format.
32
- *
33
- * @unit RGB888A32F
34
- * @spec RGB values as unsigned 8-bit integers (0-255), alpha as 32-bit float (0.0-1.0)
35
- * @format { [colorFamily]: { [shade]: [r, g, b, a] } }
36
- * @note Alpha channel is always 1.0 for all colors (fully opaque)
37
- * @example colors.slate["500"] // [98, 116, 142, 1]
38
- * @useCase Canvas rendering, CSS rgba() format compatibility
39
- */
40
- declare const colors: {
41
- amber: Record<ColorShade, RGBA>;
42
- blue: Record<ColorShade, RGBA>;
43
- cyan: Record<ColorShade, RGBA>;
44
- emerald: Record<ColorShade, RGBA>;
45
- fuchsia: Record<ColorShade, RGBA>;
46
- gray: Record<ColorShade, RGBA>;
47
- green: Record<ColorShade, RGBA>;
48
- indigo: Record<ColorShade, RGBA>;
49
- lime: Record<ColorShade, RGBA>;
50
- neutral: Record<ColorShade, RGBA>;
51
- orange: Record<ColorShade, RGBA>;
52
- pink: Record<ColorShade, RGBA>;
53
- purple: Record<ColorShade, RGBA>;
54
- red: Record<ColorShade, RGBA>;
55
- rose: Record<ColorShade, RGBA>;
56
- sky: Record<ColorShade, RGBA>;
57
- slate: Record<ColorShade, RGBA>;
58
- stone: Record<ColorShade, RGBA>;
59
- teal: Record<ColorShade, RGBA>;
60
- violet: Record<ColorShade, RGBA>;
61
- yellow: Record<ColorShade, RGBA>;
62
- zinc: Record<ColorShade, RGBA>;
63
- };
64
-
65
- export default colors;
package/json/rgbf.json.d.ts DELETED
@@ -1,63 +0,0 @@
1
- /**
2
- * RGB color tuple in RGB32F format.
3
- *
4
- * @unit RGB32F
5
- * @spec RGB values as 32-bit floating-point numbers (0.0-1.0)
6
- * @format [r, g, b]
7
- * @example [0.384, 0.455, 0.557] // slate-500
8
- */
9
- type RGBF = [number, number, number];
10
-
11
- /**
12
- * Tailwind CSS color shade identifier.
13
- *
14
- * @spec Valid shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
15
- */
16
- type ColorShade =
17
- | "50"
18
- | "100"
19
- | "200"
20
- | "300"
21
- | "400"
22
- | "500"
23
- | "600"
24
- | "700"
25
- | "800"
26
- | "900"
27
- | "950";
28
-
29
- /**
30
- * Tailwind CSS v4 color palette in RGB32F format.
31
- *
32
- * @unit RGB32F
33
- * @spec RGB values as 32-bit floating-point numbers (0.0-1.0)
34
- * @format { [colorFamily]: { [shade]: [r, g, b] } }
35
- * @example colors.slate["500"] // [0.384, 0.455, 0.557]
36
- * @useCase WebGL, shaders, graphics APIs requiring normalized float values
37
- */
38
- declare const colors: {
39
- amber: Record<ColorShade, RGBF>;
40
- blue: Record<ColorShade, RGBF>;
41
- cyan: Record<ColorShade, RGBF>;
42
- emerald: Record<ColorShade, RGBF>;
43
- fuchsia: Record<ColorShade, RGBF>;
44
- gray: Record<ColorShade, RGBF>;
45
- green: Record<ColorShade, RGBF>;
46
- indigo: Record<ColorShade, RGBF>;
47
- lime: Record<ColorShade, RGBF>;
48
- neutral: Record<ColorShade, RGBF>;
49
- orange: Record<ColorShade, RGBF>;
50
- pink: Record<ColorShade, RGBF>;
51
- purple: Record<ColorShade, RGBF>;
52
- red: Record<ColorShade, RGBF>;
53
- rose: Record<ColorShade, RGBF>;
54
- sky: Record<ColorShade, RGBF>;
55
- slate: Record<ColorShade, RGBF>;
56
- stone: Record<ColorShade, RGBF>;
57
- teal: Record<ColorShade, RGBF>;
58
- violet: Record<ColorShade, RGBF>;
59
- yellow: Record<ColorShade, RGBF>;
60
- zinc: Record<ColorShade, RGBF>;
61
- };
62
-
63
- export default colors;