@grida/tailwindcss-colors 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Grida
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,273 @@
+# `@grida/tailwindcss-colors`
+
+Tailwind CSS color data package for programmatic access.
+
+This package provides Tailwind CSS color palettes in JSON format for applications that need to **programmatically access** Tailwind color values (e.g., building custom color pickers, canvas rendering, dynamic color manipulation). Colors are sourced directly from the official Tailwind CSS package.
+
+> **When to use this package:** You need Tailwind color values in your JavaScript/TypeScript code (e.g., `colors.slate["500"]`).  
+> **When NOT to use this package:** You only need Tailwind colors in CSS - use Tailwind CSS directly instead.
+
+## Features
+
+- **🌳 Tree-shakable** - Import only the format you need. Bundlers automatically exclude unused formats from your bundle.
+- **📦 Lightweight** - ~96KB total (all formats). Individual JSON files are ~5.5-16KB each.
+- **🎯 Modular exports** - Each format is a separate file with explicit `exports` mapping for optimal tree-shaking.
+- **📊 Multiple formats** - RGB, RGBF, RGBA, HEX, and OKLCH formats for different use cases.
+- **🔢 Numerically sorted** - Colors are sorted by shade (50, 100, 200...) for predictable iteration.
+- **📝 TypeScript support** - Full TypeScript definitions included for all JSON formats.
+- **🎨 Complete palette** - All 22 Tailwind CSS v4 color families with 11 shades each (242 colors total).
+
+## Overview
+
+This package contains the complete Tailwind CSS color system in multiple formats:
+
+**JSON Files** (for programmatic access - **main purpose**):
+
+| Format    | File              | Value Type     | Unit         | Description                                                    |
+| --------- | ----------------- | -------------- | ------------ | -------------------------------------------------------------- |
+| **RGB**   | `json/rgb.json`   | `[r, g, b]`    | RGB888       | RGB values as integers (0-255)                                 |
+| **RGBF**  | `json/rgbf.json`  | `[r, g, b]`    | RGB32F       | RGB values as floats (0-1)                                     |
+| **RGBA**  | `json/rgba.json`  | `[r, g, b, a]` | `RGB888A32F` | RGB values as integers (0-255), alpha as float (0-1, always 1) |
+| **HEX**   | `json/hex.json`   | `string`       | -            | Hex color strings (e.g., `"#64748e"`)                          |
+| **OKLCH** | `json/oklch.json` | `[l, c, h]`    | -            | OKLCH values: lightness (0-1), chroma (0+), hue (0-360)        |
+
+**CSS Files** (not recommended - use Tailwind CSS directly):
+
+- **RGB** (`css/rgb.css`) - Colors in `rgb()` format
+- **RGBA** (`css/rgba.css`) - Colors in `rgba()` format
+- **HEX** (`css/hex.css`) - Colors in hexadecimal format
+- **OKLCH** (`css/oklch.css`) - Colors in OKLCH format
+
+## Installation
+
+```bash
+npm install @grida/tailwindcss-colors
+# or
+pnpm add @grida/tailwindcss-colors
+# or
+yarn add @grida/tailwindcss-colors
+```
+
+## Usage
+
+> **Note:** This package is designed for **programmatic access** to Tailwind color values. If you only need Tailwind colors in CSS, use Tailwind CSS directly - there's no reason to install this package.
+
+### CSS Files (Not Recommended)
+
+<details>
+<summary>CSS files are provided for completeness, but are not the intended use case.</summary>
+
+If you need Tailwind colors in CSS, use Tailwind CSS directly:
+
+```css
+/* Use Tailwind CSS instead */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Then use Tailwind classes */
+.my-element {
+  @apply bg-slate-500 text-gray-100;
+}
+```
+
+The CSS files in this package are only provided for edge cases where you need CSS custom properties without Tailwind CSS:
+
+```css
+@import "@grida/tailwindcss-colors/css/rgba.css";
+```
+
+```css
+.my-element {
+  background-color: var(--slate-500);
+  color: var(--gray-100);
+}
+```
+
+</details>
+
+### JSON Files (Recommended)
+
+**Main Purpose:** This package is designed for applications that need to **programmatically access** Tailwind color values, such as:
+
+- Building custom color pickers
+- Dynamic color manipulation
+- Canvas/graphics rendering
+- Color analysis and processing
+- Any use case where you need the actual color values in code
+
+#### TypeScript Setup
+
+To import JSON files in TypeScript, add `resolveJsonModule` to your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
+}
+```
+
+#### Importing Colors
+
+Import JSON files for programmatic access. The package provides TypeScript types automatically:
+
+```typescript
+// RGB array [r, g, b] - nested by color family
+import rgbColors from "@grida/tailwindcss-colors/json/rgb.json";
+const slate500 = rgbColors.slate["500"]; // [98, 116, 142]
+
+// RGBF array [r, g, b] - RGB values as floats (0-1)
+import rgbfColors from "@grida/tailwindcss-colors/json/rgbf.json";
+const slate500Rgbf = rgbfColors.slate["500"]; // [0.384, 0.455, 0.557]
+
+// RGBA array [r, g, b, a] - RGB: 0-255, Alpha: 0-1 (always 1 for Tailwind colors)
+import rgbaColors from "@grida/tailwindcss-colors/json/rgba.json";
+const slate500Rgba = rgbaColors.slate["500"]; // [98, 116, 142, 1]
+
+// Hex string
+import hexColors from "@grida/tailwindcss-colors/json/hex.json";
+const slate500Hex = hexColors.slate["500"]; // "#64748e"
+
+// OKLCH array [l, c, h]
+import oklchColors from "@grida/tailwindcss-colors/json/oklch.json";
+const slate500Oklch = oklchColors.slate["500"]; // [0.384, 0.015, 255.59]
+
+// Access all shades of a color family
+const allSlateColors = rgbColors.slate; // { "50": [...], "100": [...], ... }
+
+// Iterate over color families
+Object.keys(rgbColors).forEach((family) => {
+  console.log(`Color family: ${family}`);
+  console.log(`Available shades:`, Object.keys(rgbColors[family]));
+});
+```
+
+#### JavaScript (CommonJS)
+
+```javascript
+// Only import what you need - modular exports enable tree-shaking
+const rgbColors = require("@grida/tailwindcss-colors/json/rgb.json");
+const slate500 = rgbColors.slate["500"]; // [98, 116, 142]
+```
+
+#### Tree-shaking
+
+This package is fully tree-shakable. When you import a specific format, bundlers (webpack, Rollup, Vite, etc.) will only include that file in your bundle:
+
+```typescript
+// ✅ Only rgb.json is included (~6.6KB)
+import rgbColors from "@grida/tailwindcss-colors/json/rgb.json";
+
+// ✅ Only hex.json is included (~5.5KB)
+import hexColors from "@grida/tailwindcss-colors/json/hex.json";
+
+// ❌ Unused formats are automatically excluded
+// rgba.json, rgbf.json, oklch.json are NOT bundled
+```
+
+The `exports` field in `package.json` ensures that only explicitly imported files are included in your bundle.
+
+#### Usage Examples
+
+**React Component:**
+
+```typescript
+import hexColors from "@grida/tailwindcss-colors/json/hex.json";
+
+function ColorSwatch({ family, shade }: { family: string; shade: string }) {
+  const color = hexColors[family]?.[shade];
+  return (
+    <div style={{ backgroundColor: color }}>
+      {family}-{shade}
+    </div>
+  );
+}
+```
+
+**Canvas Rendering:**
+
+```typescript
+import rgbaColors from "@grida/tailwindcss-colors/json/rgba.json";
+
+// RGBA: RGB values are 0-255, alpha is 0-1 (always 1 for Tailwind colors)
+const [r, g, b, a] = rgbaColors.slate["500"]; // [98, 116, 142, 1]
+ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`; // rgba(98, 116, 142, 1)
+ctx.fillRect(0, 0, 100, 100);
+```
+
+**Dynamic Color Selection:**
+
+```typescript
+import rgbColors from "@grida/tailwindcss-colors/json/rgb.json";
+
+function getColor(family: string, shade: string): [number, number, number] {
+  return rgbColors[family]?.[shade] ?? [0, 0, 0];
+}
+
+const primaryColor = getColor("blue", "500"); // [43, 127, 255]
+```
+
+## Color Palette
+
+The package includes all standard Tailwind v4 color families:
+
+- Slate, Gray, Zinc, Neutral, Stone
+- Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose
+
+Each color family includes shades from `50` to `950`.
+
+## Format
+
+### JSON Format
+
+JSON files use a nested structure grouped by color family:
+
+```json
+{
+  "slate": {
+    "50": [248, 250, 252],
+    "100": [241, 245, 249],
+    ...
+    "950": [2, 6, 23]
+  },
+  "blue": {
+    ...
+  }
+}
+```
+
+### CSS Format
+
+CSS files provide colors as CSS custom properties following the pattern:
+
+```css
+:root {
+  --{color-name}-{shade}: {color-value};
+}
+```
+
+For example:
+
+- `--slate-50`: Lightest shade
+- `--slate-500`: Middle shade
+- `--slate-950`: Darkest shade
+
+## Which one to use?
+
+Choose the format that best fits your use case:
+
+- **RGB** (`rgb.json`) - Use when you need integer RGB values (0-255). Most compact format. Unit: `RGB888`.
+- **RGBF** (`rgbf.json`) - Use when you need floating-point RGB values (0-1) for WebGL, shaders, or graphics APIs. Slightly larger file size due to floating-point storage. Unit: `RGB32F`.
+- **RGBA** (`rgba.json`) - Use when you need RGB with alpha channel. RGB values are integers (0-255), alpha is float (0-1). Unit: `RGB888A32F`.
+- **HEX** (`hex.json`) - Use for web development, CSS, or when you need human-readable color strings.
+- **OKLCH** (`oklch.json`) - Use for perceptual color operations, color mixing, or modern color spaces.
+
+> **Note:** RGBF is slightly larger than RGB as it stores numbers in floating-point format. If you are very sensitive about bundle size, use `rgb.json` instead.
+
+## Notes
+
+- Colors are sourced directly from the official Tailwind CSS package (`tailwindcss/colors`)
+- Package version matches Tailwind CSS version for consistency
+- Alpha channel (`a`) is always `1` for all colors in Tailwind CSS v4 colors
+- Use the format that best suits your rendering needs (RGBA for canvas, HEX for web, OKLCH for modern color spaces)

package/css/hex.css

@@ -0,0 +1,244 @@
+:root {
+  --amber-50: #fffbeb;
+  --amber-100: #fef3c6;
+  --amber-200: #fee685;
+  --amber-300: #ffd230;
+  --amber-400: #ffba00;
+  --amber-500: #fd9a00;
+  --amber-600: #e17100;
+  --amber-700: #bb4d00;
+  --amber-800: #973c00;
+  --amber-900: #7b3306;
+  --amber-950: #461901;
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-200: #bedbff;
+  --blue-300: #8ec5ff;
+  --blue-400: #51a2ff;
+  --blue-500: #2b7fff;
+  --blue-600: #155dfc;
+  --blue-700: #1447e6;
+  --blue-800: #193cb8;
+  --blue-900: #1c398e;
+  --blue-950: #162456;
+  --cyan-50: #ecfeff;
+  --cyan-100: #cefafe;
+  --cyan-200: #a2f4fd;
+  --cyan-300: #53eafd;
+  --cyan-400: #00d3f2;
+  --cyan-500: #00b8db;
+  --cyan-600: #0092b8;
+  --cyan-700: #007595;
+  --cyan-800: #005f78;
+  --cyan-900: #104e64;
+  --cyan-950: #053345;
+  --emerald-50: #ecfdf5;
+  --emerald-100: #d0fae5;
+  --emerald-200: #a4f4cf;
+  --emerald-300: #5ee9b5;
+  --emerald-400: #00d492;
+  --emerald-500: #00bc7d;
+  --emerald-600: #096;
+  --emerald-700: #007a55;
+  --emerald-800: #006045;
+  --emerald-900: #004f3b;
+  --emerald-950: #002c22;
+  --fuchsia-50: #fdf4ff;
+  --fuchsia-100: #fae8ff;
+  --fuchsia-200: #f6cfff;
+  --fuchsia-300: #f4a8ff;
+  --fuchsia-400: #ed6aff;
+  --fuchsia-500: #e12afb;
+  --fuchsia-600: #c800de;
+  --fuchsia-700: #a800b7;
+  --fuchsia-800: #8a0194;
+  --fuchsia-900: #721378;
+  --fuchsia-950: #4b004f;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5dc;
+  --gray-400: #99a1af;
+  --gray-500: #6a7282;
+  --gray-600: #4a5565;
+  --gray-700: #364153;
+  --gray-800: #1e2939;
+  --gray-900: #101828;
+  --gray-950: #030712;
+  --green-50: #f0fdf4;
+  --green-100: #dcfce7;
+  --green-200: #b9f8cf;
+  --green-300: #7bf1a8;
+  --green-400: #05df72;
+  --green-500: #00c950;
+  --green-600: #00a63e;
+  --green-700: #008236;
+  --green-800: #016630;
+  --green-900: #0d542b;
+  --green-950: #032e15;
+  --indigo-50: #eef2ff;
+  --indigo-100: #e0e7ff;
+  --indigo-200: #c6d2ff;
+  --indigo-300: #a3b3ff;
+  --indigo-400: #7c86ff;
+  --indigo-500: #615fff;
+  --indigo-600: #4f39f6;
+  --indigo-700: #432dd7;
+  --indigo-800: #372aac;
+  --indigo-900: #312c85;
+  --indigo-950: #1e1a4d;
+  --lime-50: #f7fee7;
+  --lime-100: #ecfcca;
+  --lime-200: #d8f999;
+  --lime-300: #bbf451;
+  --lime-400: #9ae600;
+  --lime-500: #7ccf00;
+  --lime-600: #5ea500;
+  --lime-700: #497d00;
+  --lime-800: #3c6300;
+  --lime-900: #35530e;
+  --lime-950: #192e03;
+  --neutral-50: #fafafa;
+  --neutral-100: #f5f5f5;
+  --neutral-200: #e5e5e5;
+  --neutral-300: #d4d4d4;
+  --neutral-400: #a1a1a1;
+  --neutral-500: #737373;
+  --neutral-600: #525252;
+  --neutral-700: #404040;
+  --neutral-800: #262626;
+  --neutral-900: #171717;
+  --neutral-950: #0a0a0a;
+  --orange-50: #fff7ed;
+  --orange-100: #ffedd4;
+  --orange-200: #ffd6a7;
+  --orange-300: #ffb86a;
+  --orange-400: #ff8904;
+  --orange-500: #ff6900;
+  --orange-600: #f54900;
+  --orange-700: #ca3500;
+  --orange-800: #9f2d00;
+  --orange-900: #7e2a0c;
+  --orange-950: #441306;
+  --pink-50: #fdf2f8;
+  --pink-100: #fce7f3;
+  --pink-200: #fccee8;
+  --pink-300: #fda5d5;
+  --pink-400: #fb64b6;
+  --pink-500: #f6339a;
+  --pink-600: #e60076;
+  --pink-700: #c6005c;
+  --pink-800: #a3004c;
+  --pink-900: #861043;
+  --pink-950: #510424;
+  --purple-50: #faf5ff;
+  --purple-100: #f3e8ff;
+  --purple-200: #e9d4ff;
+  --purple-300: #dab2ff;
+  --purple-400: #c27aff;
+  --purple-500: #ad46ff;
+  --purple-600: #9810fa;
+  --purple-700: #8200db;
+  --purple-800: #6e11b0;
+  --purple-900: #59168b;
+  --purple-950: #3c0366;
+  --red-50: #fef2f2;
+  --red-100: #ffe2e2;
+  --red-200: #ffc9c9;
+  --red-300: #ffa2a2;
+  --red-400: #ff6467;
+  --red-500: #fb2c36;
+  --red-600: #e7000b;
+  --red-700: #c10007;
+  --red-800: #9f0712;
+  --red-900: #82181a;
+  --red-950: #460809;
+  --rose-50: #fff1f2;
+  --rose-100: #ffe4e6;
+  --rose-200: #ffccd3;
+  --rose-300: #ffa1ad;
+  --rose-400: #ff637e;
+  --rose-500: #ff2056;
+  --rose-600: #ec003f;
+  --rose-700: #c70036;
+  --rose-800: #a50036;
+  --rose-900: #8b0836;
+  --rose-950: #4d0218;
+  --sky-50: #f0f9ff;
+  --sky-100: #dff2fe;
+  --sky-200: #b8e6fe;
+  --sky-300: #74d4ff;
+  --sky-400: #00bcff;
+  --sky-500: #00a6f4;
+  --sky-600: #0084d1;
+  --sky-700: #0069a8;
+  --sky-800: #00598a;
+  --sky-900: #024a70;
+  --sky-950: #052f4a;
+  --slate-50: #f8fafc;
+  --slate-100: #f1f5f9;
+  --slate-200: #e2e8f0;
+  --slate-300: #cad5e2;
+  --slate-400: #90a1b9;
+  --slate-500: #62748e;
+  --slate-600: #45556c;
+  --slate-700: #314158;
+  --slate-800: #1d293d;
+  --slate-900: #0f172b;
+  --slate-950: #020618;
+  --stone-50: #fafaf9;
+  --stone-100: #f5f5f4;
+  --stone-200: #e7e5e4;
+  --stone-300: #d6d3d1;
+  --stone-400: #a6a09b;
+  --stone-500: #79716b;
+  --stone-600: #57534d;
+  --stone-700: #44403b;
+  --stone-800: #292524;
+  --stone-900: #1c1917;
+  --stone-950: #0c0a09;
+  --teal-50: #f0fdfa;
+  --teal-100: #cbfbf1;
+  --teal-200: #96f7e4;
+  --teal-300: #46ecd5;
+  --teal-400: #00d5be;
+  --teal-500: #00bba7;
+  --teal-600: #009689;
+  --teal-700: #00786f;
+  --teal-800: #005f5a;
+  --teal-900: #0b4f4a;
+  --teal-950: #022f2e;
+  --violet-50: #f5f3ff;
+  --violet-100: #ede9fe;
+  --violet-200: #ddd6ff;
+  --violet-300: #c4b4ff;
+  --violet-400: #a684ff;
+  --violet-500: #8e51ff;
+  --violet-600: #7f22fe;
+  --violet-700: #7008e7;
+  --violet-800: #5d0ec0;
+  --violet-900: #4d179a;
+  --violet-950: #2f0d68;
+  --yellow-50: #fefce8;
+  --yellow-100: #fef9c2;
+  --yellow-200: #fff085;
+  --yellow-300: #ffdf20;
+  --yellow-400: #fcc800;
+  --yellow-500: #efb100;
+  --yellow-600: #d08700;
+  --yellow-700: #a65f00;
+  --yellow-800: #894b00;
+  --yellow-900: #733e0a;
+  --yellow-950: #432004;
+  --zinc-50: #fafafa;
+  --zinc-100: #f4f4f5;
+  --zinc-200: #e4e4e7;
+  --zinc-300: #d4d4d8;
+  --zinc-400: #9f9fa9;
+  --zinc-500: #71717b;
+  --zinc-600: #52525c;
+  --zinc-700: #3f3f46;
+  --zinc-800: #27272a;
+  --zinc-900: #18181b;
+  --zinc-950: #09090b;
+}