@diskette/palette 0.18.0 → 0.20.0

package/README.md

@@ -27,30 +27,31 @@ import blue from '@diskette/palette/colors/blue'
 
 ### Color Structure
 
-Each color provides values for both color spaces and light/dark themes:
+Each color provides separate 12-step arrays for solid and alpha scales, organized by theme and color space:
 
 ```ts
 import blue from '@diskette/palette/colors/blue'
 
-// sRGB values (hex)
-blue.srgb.light.blue9 // '#0090ff'
-blue.srgb.dark.blue9 // '#0090ff'
+// sRGB solid values (hex) - 12-item array indexed 0-11
+blue.light.srgb.solid[8]  // '#0090ff' (step 9)
+blue.dark.srgb.solid[8]   // '#0090ff' (step 9)
 
-// Display P3 values
-blue.p3.light.blue9 // 'color(display-p3 0.247 0.556 0.969)'
-blue.p3.dark.blue9 // 'color(display-p3 0.247 0.556 0.969)'
+// Display P3 solid values
+blue.light.p3.solid[8]  // 'color(display-p3 0.247 0.556 0.969)'
+blue.dark.p3.solid[8]   // 'color(display-p3 0.247 0.556 0.969)'
 
-// Alpha variants
-blue.srgb.light.blueA9 // '#0090ff' (with alpha)
+// Alpha variants - separate 12-item array indexed 0-11
+blue.light.srgb.alpha[8] // alpha step 9
+blue.light.p3.alpha[8]   // alpha step 9 in P3
 
 // Surface (translucent overlay)
 blue.surface.srgb.light // '#f1f9ffcc'
-blue.surface.p3.dark // 'color(display-p3 0.0706 0.1255 0.2196 / 0.5)'
+blue.surface.p3.dark    // 'color(display-p3 0.0706 0.1255 0.2196 / 0.5)'
 
 // Semantic values
-blue.contrast // 'white'
-blue.indicator // 'blue9'
-blue.track // 'blue9'
+blue.contrast  // 'white'
+blue.indicator // 9 (step number)
+blue.track     // 9 (step number)
 ```
 
 ### Generating CSS
@@ -61,16 +62,16 @@ Use the `css` utility to generate CSS custom properties:
 import { css } from '@diskette/palette'
 import blue from '@diskette/palette/colors/blue'
 
-// Generate scale variables for light theme
-const blue = css.scale('light', blue)
-// Output: :root, .light, .light-theme { --blue-1: #fbfdff; ... }
+// Generate CSS variables for light theme
+css.palette(blue)
+// Output: :root { --blue-contrast: white; ... }
+//         :root, .light, .light-theme { --blue-1: #fbfdff; ... }
 
-// Generate alpha variants
-css.scale('lightAlpha', blue)
+// Include dark theme
+css.palette(blue, { schemes: ['light', 'dark'] })
 
-// Generate semantic tokens
-css.semantic('blue', blue)
-// Output: :root { --blue-contrast: white; } ...
+// Include alpha scale variables (--blue-a1, etc.)
+css.palette(blue, { schemes: ['light'], alpha: true })
 ```
 
 ### Alpha Colors
@@ -81,7 +82,47 @@ For transparency overlays:
 import { blackAlpha, whiteAlpha } from '@diskette/palette/colors'
 
 blackAlpha.srgb.blackA5 // 'rgba(0, 0, 0, 0.3)'
-whiteAlpha.p3.whiteA5 // 'color(display-p3 1 1 1 / 0.3)'
+whiteAlpha.p3.whiteA5   // 'color(display-p3 1 1 1 / 0.3)'
+```
+
+## CLI
+
+The package includes a CLI for generating CSS files.
+
+### `palette generate`
+
+Generate CSS files for color palettes.
+
+```bash
+palette generate blue,red,slate -a -o ./styles
+```
+
+```
+styles/
+├── index.css        # Imports + Tailwind v4 @theme mappings
+├── accents.css      # [data-accent-color] selectors (-a flag)
+├── blue.css         # Light theme: --blue-1 through --blue-12, --blue-a1 through --blue-a12
+├── blue-dark.css    # Dark theme variants
+├── red.css
+├── red-dark.css
+├── slate.css
+├── slate-dark.css
+├── black-alpha.css  # --black-a1 through --black-a12
+└── white-alpha.css  # --white-a1 through --white-a12
+```
+
+**Options:**
+- `-o, --output <dir>` - Output directory (required)
+- `-a, --accents` - Generate `accents.css` with `[data-accent-color]` and `[data-gray-color]` selectors
+
+### `palette list`
+
+List available colors.
+
+```bash
+palette list           # List all colors
+palette list --accent  # List only accent colors
+palette list --gray    # List only gray colors
 ```
 
 ## Available Colors
@@ -117,18 +158,27 @@ Each color provides a 12-step scale following Radix Colors conventions:
 
 ## API Reference
 
-### `css.scale(scheme, config)`
+### `css.palette(config, options?)`
 
-Generates CSS custom properties for a color scale.
+Generates CSS custom properties for a color's scale and semantic tokens.
 
 ```ts
-css.scale(scheme: 'light' | 'lightAlpha' | 'dark' | 'darkAlpha', config: ColorConfig): string
+css.palette(config: PaletteColor, options?: {
+  schemes?: ('light' | 'dark')[]  // Defaults to ['light']
+  alpha?: boolean                 // Include alpha scale (--color-a1, etc.). Defaults to false
+}): string
 ```
 
 <details>
 <summary>Example output</summary>
 
 ```css
+:root {
+  --amber-contrast: #21201c;
+  --amber-indicator: var(--amber-9);
+  --amber-track: var(--amber-9);
+}
+
 :root,
 .light,
 .light-theme {
@@ -152,17 +202,7 @@ css.scale(scheme: 'light' | 'lightAlpha' | 'dark' | 'darkAlpha', config: ColorCo
     .light,
     .light-theme {
       --amber-1: color(display-p3 0.995 0.992 0.985);
-      --amber-2: color(display-p3 0.994 0.986 0.921);
-      --amber-3: color(display-p3 0.994 0.969 0.782);
-      --amber-4: color(display-p3 0.989 0.937 0.65);
-      --amber-5: color(display-p3 0.97 0.902 0.527);
-      --amber-6: color(display-p3 0.936 0.844 0.506);
-      --amber-7: color(display-p3 0.89 0.762 0.443);
-      --amber-8: color(display-p3 0.85 0.65 0.3);
-      --amber-9: color(display-p3 1 0.77 0.26);
-      --amber-10: color(display-p3 0.959 0.741 0.274);
-      --amber-11: color(display-p3 0.64 0.4 0);
-      --amber-12: color(display-p3 0.294 0.208 0.145);
+      /* ... */
     }
   }
 }
@@ -180,49 +220,29 @@ Generates CSS custom properties for alpha color scales (blackAlpha, whiteAlpha).
 css.alpha(config: AlphaConfig): string
 ```
 
-### `css.semantic(name, config)`
+### `css.accents(colorNames)`
 
-Generates semantic CSS custom properties for a color.
+Generates CSS for `[data-accent-color]` attribute selectors, mapping accent variables to the specified color.
 
 ```ts
-css.semantic(name: string, config: ColorConfig): string
+css.accents(colorNames: string[]): string
 ```
 
-<details>
-<summary>Example output</summary>
-
-```css
-:root {
-  --amber-contrast: #21201c;
-}
+### `css.grays(names, className)`
 
-:root,
-.light,
-.light-theme {
-  --amber-surface: #fefae4cc;
-  --amber-indicator: var(--amber-9);
-  --amber-track: var(--amber-9);
-  @supports (color: color(display-p3 1 1 1)) {
-    @media (color-gamut: p3) {
-      --amber-surface: color(display-p3 0.9922 0.9843 0.902 / 0.8);
-    }
-  }
-}
+Generates CSS for `[data-gray-color]` attribute selectors nested under a class.
 
-.dark,
-.dark-theme {
-  --amber-surface: #271f1380;
-  --amber-indicator: var(--amber-9);
-  --amber-track: var(--amber-9);
-  @supports (color: color(display-p3 1 1 1)) {
-    @media (color-gamut: p3) {
-      --amber-surface: color(display-p3 0.1412 0.1176 0.0784 / 0.5);
-    }
-  }
-}
+```ts
+css.grays(names: readonly string[], className: string): string
 ```
 
-</details>
+### `css.tailwind(colorNames)`
+
+Generates Tailwind v4 `@theme inline` CSS that maps palette variables to Tailwind color utilities.
+
+```ts
+css.tailwind(colorNames: string[]): string
+```
 
 ## Credits
 

package/dist/cli/cli.d.ts

@@ -1 +1 @@
-export {};
+export declare function writeIfNotExists(path: string, data: string | NodeJS.ArrayBufferView): boolean;

package/dist/cli/cli.js

@@ -1,11 +1,61 @@
-import { cli } from 'cleye';
-import { generate } from "./commands/generate.js";
-import { list } from "./commands/list.js";
-const arg = cli({
-    name: 'palette',
-    // version: pkg.version,
-    commands: [generate, list],
+import { defineCommand, runMain } from 'citty';
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, relative, resolve } from 'node:path';
+import * as palette from "../colors/index.js";
+import { css } from "../css.js";
+import { accentColors, grayColors } from "../types.js";
+import { getPackageJson } from "../utils.js";
+const alphaColors = ['blackAlpha', 'whiteAlpha'];
+// Combined list of all colors (deduplicated since 'gray' appears in both)
+const allColors = [
+    ...new Set([...accentColors, ...grayColors]),
+    ...alphaColors,
+];
+const { pkg, packageJsonPath } = getPackageJson(import.meta.url) ?? {};
+const main = defineCommand({
+    meta: {
+        name: 'palette',
+        version: pkg?.version,
+        description: pkg?.description ?? '',
+    },
+    args: {
+        colors: {
+            type: 'positional',
+            description: 'Colors',
+            required: true,
+        },
+        output: {
+            type: 'string',
+            alias: 'o',
+            description: 'Output directory',
+        },
+    },
+    run({ args }) {
+        const selected = args._.filter((c) => allColors.includes(c));
+        const outputPath = resolve(process.cwd(), args.output);
+        mkdirSync(outputPath, { recursive: true });
+        for (const name of selected) {
+            if (alphaColors.includes(name)) {
+                const alphaName = name;
+                const config = palette[alphaName];
+                const fileName = alphaName === 'blackAlpha' ? 'black-alpha' : 'white-alpha';
+                writeIfNotExists(`${outputPath}/${fileName}.css`, css.alpha(config));
+            }
+            else {
+                const color = palette[name];
+                writeIfNotExists(`${outputPath}/${name}.css`, css.palette(color, { schemes: ['light'], alpha: true }));
+                writeIfNotExists(`${outputPath}/${name}-dark.css`, css.palette(color, { schemes: ['dark'], alpha: true }));
+            }
+        }
+        const path = relative(dirname(packageJsonPath), resolve(outputPath));
+        console.log(`\nCSS saved to ${outputPath}`);
+    },
 });
-if (!arg.command) {
-    arg.showHelp();
+runMain(main);
+export function writeIfNotExists(path, data) {
+    if (existsSync(path)) {
+        return false;
+    }
+    writeFileSync(path, data);
+    return true;
 }

package/dist/colors/amber.d.ts

@@ -1,125 +1,37 @@
 declare const _default: {
-    srgb: {
+    name: "amber";
+    indicator: number;
+    contrast: string;
+    track: number;
+    surface: {
         light: {
-            amber1: string;
-            amber2: string;
-            amber3: string;
-            amber4: string;
-            amber5: string;
-            amber6: string;
-            amber7: string;
-            amber8: string;
-            amber9: string;
-            amber10: string;
-            amber11: string;
-            amber12: string;
-            amberA1: string;
-            amberA2: string;
-            amberA3: string;
-            amberA4: string;
-            amberA5: string;
-            amberA6: string;
-            amberA7: string;
-            amberA8: string;
-            amberA9: string;
-            amberA10: string;
-            amberA11: string;
-            amberA12: string;
+            srgb: string;
+            p3: string;
         };
         dark: {
-            amber1: string;
-            amber2: string;
-            amber3: string;
-            amber4: string;
-            amber5: string;
-            amber6: string;
-            amber7: string;
-            amber8: string;
-            amber9: string;
-            amber10: string;
-            amber11: string;
-            amber12: string;
-            amberA1: string;
-            amberA2: string;
-            amberA3: string;
-            amberA4: string;
-            amberA5: string;
-            amberA6: string;
-            amberA7: string;
-            amberA8: string;
-            amberA9: string;
-            amberA10: string;
-            amberA11: string;
-            amberA12: string;
+            srgb: string;
+            p3: string;
         };
     };
-    p3: {
-        light: {
-            amber1: string;
-            amber2: string;
-            amber3: string;
-            amber4: string;
-            amber5: string;
-            amber6: string;
-            amber7: string;
-            amber8: string;
-            amber9: string;
-            amber10: string;
-            amber11: string;
-            amber12: string;
-            amberA1: string;
-            amberA2: string;
-            amberA3: string;
-            amberA4: string;
-            amberA5: string;
-            amberA6: string;
-            amberA7: string;
-            amberA8: string;
-            amberA9: string;
-            amberA10: string;
-            amberA11: string;
-            amberA12: string;
+    light: {
+        srgb: {
+            solid: [string, string, string, string, string, string, string, string, string, string, string, string];
+            alpha: [string, string, string, string, string, string, string, string, string, string, string, string];
         };
-        dark: {
-            amber1: string;
-            amber2: string;
-            amber3: string;
-            amber4: string;
-            amber5: string;
-            amber6: string;
-            amber7: string;
-            amber8: string;
-            amber9: string;
-            amber10: string;
-            amber11: string;
-            amber12: string;
-            amberA1: string;
-            amberA2: string;
-            amberA3: string;
-            amberA4: string;
-            amberA5: string;
-            amberA6: string;
-            amberA7: string;
-            amberA8: string;
-            amberA9: string;
-            amberA10: string;
-            amberA11: string;
-            amberA12: string;
+        p3: {
+            solid: [string, string, string, string, string, string, string, string, string, string, string, string];
+            alpha: [string, string, string, string, string, string, string, string, string, string, string, string];
         };
     };
-    contrast: string;
-    indicator: string;
-    track: string;
-    surface: {
+    dark: {
         srgb: {
-            light: string;
-            dark: string;
+            solid: [string, string, string, string, string, string, string, string, string, string, string, string];
+            alpha: [string, string, string, string, string, string, string, string, string, string, string, string];
         };
         p3: {
-            light: string;
-            dark: string;
+            solid: [string, string, string, string, string, string, string, string, string, string, string, string];
+            alpha: [string, string, string, string, string, string, string, string, string, string, string, string];
         };
     };
-    name: "amber";
 };
 export default _default;