@diskette/palette 0.19.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,25 +1,37 @@
 declare const _default: {
     name: "amber";
-    indicator: string;
+    indicator: number;
     contrast: string;
-    track: string;
+    track: number;
     surface: {
-        p3: {
-            light: string;
-            dark: string;
+        light: {
+            srgb: string;
+            p3: string;
         };
-        srgb: {
-            light: string;
-            dark: string;
+        dark: {
+            srgb: string;
+            p3: string;
         };
     };
-    srgb: {
-        light: [string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string];
-        dark: [string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, 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];
+        };
+        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];
+        };
     };
-    p3: {
-        light: [string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string];
-        dark: [string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string];
+    dark: {
+        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];
+        };
+        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];
+        };
     };
 };
 export default _default;

package/dist/colors/amber.js

@@ -1,125 +1,141 @@
 import {} from "../types.js";
 export default {
     name: 'amber',
-    indicator: 'amber9',
+    indicator: 9,
     contrast: '#21201c',
-    track: 'amber9',
+    track: 9,
     surface: {
-        p3: {
-            light: 'color(display-p3 0.9922 0.9843 0.902 / 0.8)',
-            dark: 'color(display-p3 0.1412 0.1176 0.0784 / 0.5)',
+        light: {
+            srgb: '#fefae4cc',
+            p3: 'color(display-p3 0.9922 0.9843 0.902 / 0.8)',
         },
-        srgb: {
-            light: '#fefae4cc',
-            dark: '#271f1380',
+        dark: {
+            srgb: '#271f1380',
+            p3: 'color(display-p3 0.1412 0.1176 0.0784 / 0.5)',
         },
     },
-    srgb: {
-        light: [
-            '#fefdfb',
-            '#fefbe9',
-            '#fff7c2',
-            '#ffee9c',
-            '#fbe577',
-            '#f3d673',
-            '#e9c162',
-            '#e2a336',
-            '#ffc53d',
-            '#ffba18',
-            '#ab6400',
-            '#4f3422',
-            '#c0800004',
-            '#f4d10016',
-            '#ffde003d',
-            '#ffd40063',
-            '#f8cf0088',
-            '#eab5008c',
-            '#dc9b009d',
-            '#da8a00c9',
-            '#ffb300c2',
-            '#ffb300e7',
-            '#ab6400',
-            '#341500dd',
-        ],
-        dark: [
-            '#16120c',
-            '#1d180f',
-            '#302008',
-            '#3f2700',
-            '#4d3000',
-            '#5c3d05',
-            '#714f19',
-            '#8f6424',
-            '#ffc53d',
-            '#ffd60a',
-            '#ffca16',
-            '#ffe7b3',
-            '#e63c0006',
-            '#fd9b000d',
-            '#fa820022',
-            '#fc820032',
-            '#fd8b0041',
-            '#fd9b0051',
-            '#ffab2567',
-            '#ffae3587',
-            '#ffc53d',
-            '#ffd60a',
-            '#ffca16',
-            '#ffe7b3',
-        ],
+    light: {
+        srgb: {
+            solid: [
+                '#fefdfb',
+                '#fefbe9',
+                '#fff7c2',
+                '#ffee9c',
+                '#fbe577',
+                '#f3d673',
+                '#e9c162',
+                '#e2a336',
+                '#ffc53d',
+                '#ffba18',
+                '#ab6400',
+                '#4f3422',
+            ],
+            alpha: [
+                '#c0800004',
+                '#f4d10016',
+                '#ffde003d',
+                '#ffd40063',
+                '#f8cf0088',
+                '#eab5008c',
+                '#dc9b009d',
+                '#da8a00c9',
+                '#ffb300c2',
+                '#ffb300e7',
+                '#ab6400',
+                '#341500dd',
+            ],
+        },
+        p3: {
+            solid: [
+                'color(display-p3 0.995 0.992 0.985)',
+                'color(display-p3 0.994 0.986 0.921)',
+                'color(display-p3 0.994 0.969 0.782)',
+                'color(display-p3 0.989 0.937 0.65)',
+                'color(display-p3 0.97 0.902 0.527)',
+                'color(display-p3 0.936 0.844 0.506)',
+                'color(display-p3 0.89 0.762 0.443)',
+                'color(display-p3 0.85 0.65 0.3)',
+                'color(display-p3 1 0.77 0.26)',
+                'color(display-p3 0.959 0.741 0.274)',
+                'color(display-p3 0.64 0.4 0)',
+                'color(display-p3 0.294 0.208 0.145)',
+            ],
+            alpha: [
+                'color(display-p3 0.757 0.514 0.024 / 0.016)',
+                'color(display-p3 0.902 0.804 0.008 / 0.079)',
+                'color(display-p3 0.965 0.859 0.004 / 0.22)',
+                'color(display-p3 0.969 0.82 0.004 / 0.35)',
+                'color(display-p3 0.933 0.796 0.004 / 0.475)',
+                'color(display-p3 0.875 0.682 0.004 / 0.495)',
+                'color(display-p3 0.804 0.573 0 / 0.557)',
+                'color(display-p3 0.788 0.502 0 / 0.699)',
+                'color(display-p3 1 0.686 0 / 0.742)',
+                'color(display-p3 0.945 0.643 0 / 0.726)',
+                'color(display-p3 0.64 0.4 0)',
+                'color(display-p3 0.294 0.208 0.145)',
+            ],
+        },
     },
-    p3: {
-        light: [
-            'color(display-p3 0.995 0.992 0.985)',
-            'color(display-p3 0.994 0.986 0.921)',
-            'color(display-p3 0.994 0.969 0.782)',
-            'color(display-p3 0.989 0.937 0.65)',
-            'color(display-p3 0.97 0.902 0.527)',
-            'color(display-p3 0.936 0.844 0.506)',
-            'color(display-p3 0.89 0.762 0.443)',
-            'color(display-p3 0.85 0.65 0.3)',
-            'color(display-p3 1 0.77 0.26)',
-            'color(display-p3 0.959 0.741 0.274)',
-            'color(display-p3 0.64 0.4 0)',
-            'color(display-p3 0.294 0.208 0.145)',
-            'color(display-p3 0.757 0.514 0.024 / 0.016)',
-            'color(display-p3 0.902 0.804 0.008 / 0.079)',
-            'color(display-p3 0.965 0.859 0.004 / 0.22)',
-            'color(display-p3 0.969 0.82 0.004 / 0.35)',
-            'color(display-p3 0.933 0.796 0.004 / 0.475)',
-            'color(display-p3 0.875 0.682 0.004 / 0.495)',
-            'color(display-p3 0.804 0.573 0 / 0.557)',
-            'color(display-p3 0.788 0.502 0 / 0.699)',
-            'color(display-p3 1 0.686 0 / 0.742)',
-            'color(display-p3 0.945 0.643 0 / 0.726)',
-            'color(display-p3 0.64 0.4 0)',
-            'color(display-p3 0.294 0.208 0.145)',
-        ],
-        dark: [
-            'color(display-p3 0.082 0.07 0.05)',
-            'color(display-p3 0.111 0.094 0.064)',
-            'color(display-p3 0.178 0.128 0.049)',
-            'color(display-p3 0.239 0.156 0)',
-            'color(display-p3 0.29 0.193 0)',
-            'color(display-p3 0.344 0.245 0.076)',
-            'color(display-p3 0.422 0.314 0.141)',
-            'color(display-p3 0.535 0.399 0.189)',
-            'color(display-p3 1 0.77 0.26)',
-            'color(display-p3 1 0.87 0.15)',
-            'color(display-p3 1 0.8 0.29)',
-            'color(display-p3 0.984 0.909 0.726)',
-            'color(display-p3 0.992 0.298 0 / 0.017)',
-            'color(display-p3 0.988 0.651 0 / 0.047)',
-            'color(display-p3 1 0.6 0 / 0.118)',
-            'color(display-p3 1 0.557 0 / 0.185)',
-            'color(display-p3 1 0.592 0 / 0.24)',
-            'color(display-p3 1 0.659 0.094 / 0.299)',
-            'color(display-p3 1 0.714 0.263 / 0.383)',
-            'color(display-p3 0.996 0.729 0.306 / 0.5)',
-            'color(display-p3 1 0.769 0.259)',
-            'color(display-p3 1 0.871 0.149)',
-            'color(display-p3 1 0.8 0.29)',
-            'color(display-p3 0.984 0.909 0.726)',
-        ],
+    dark: {
+        srgb: {
+            solid: [
+                '#16120c',
+                '#1d180f',
+                '#302008',
+                '#3f2700',
+                '#4d3000',
+                '#5c3d05',
+                '#714f19',
+                '#8f6424',
+                '#ffc53d',
+                '#ffd60a',
+                '#ffca16',
+                '#ffe7b3',
+            ],
+            alpha: [
+                '#e63c0006',
+                '#fd9b000d',
+                '#fa820022',
+                '#fc820032',
+                '#fd8b0041',
+                '#fd9b0051',
+                '#ffab2567',
+                '#ffae3587',
+                '#ffc53d',
+                '#ffd60a',
+                '#ffca16',
+                '#ffe7b3',
+            ],
+        },
+        p3: {
+            solid: [
+                'color(display-p3 0.082 0.07 0.05)',
+                'color(display-p3 0.111 0.094 0.064)',
+                'color(display-p3 0.178 0.128 0.049)',
+                'color(display-p3 0.239 0.156 0)',
+                'color(display-p3 0.29 0.193 0)',
+                'color(display-p3 0.344 0.245 0.076)',
+                'color(display-p3 0.422 0.314 0.141)',
+                'color(display-p3 0.535 0.399 0.189)',
+                'color(display-p3 1 0.77 0.26)',
+                'color(display-p3 1 0.87 0.15)',
+                'color(display-p3 1 0.8 0.29)',
+                'color(display-p3 0.984 0.909 0.726)',
+            ],
+            alpha: [
+                'color(display-p3 0.992 0.298 0 / 0.017)',
+                'color(display-p3 0.988 0.651 0 / 0.047)',
+                'color(display-p3 1 0.6 0 / 0.118)',
+                'color(display-p3 1 0.557 0 / 0.185)',
+                'color(display-p3 1 0.592 0 / 0.24)',
+                'color(display-p3 1 0.659 0.094 / 0.299)',
+                'color(display-p3 1 0.714 0.263 / 0.383)',
+                'color(display-p3 0.996 0.729 0.306 / 0.5)',
+                'color(display-p3 1 0.769 0.259)',
+                'color(display-p3 1 0.871 0.149)',
+                'color(display-p3 1 0.8 0.29)',
+                'color(display-p3 0.984 0.909 0.726)',
+            ],
+        },
     },
 };