@diskette/palette 0.21.2 → 0.22.1

package/README.md

@@ -87,20 +87,24 @@ 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.
+The package includes an interactive CLI for generating CSS files.
 
 ```bash
-palette generate blue,red,slate -a -o ./styles
+npx @diskette/palette
 ```
 
+The CLI guides you through:
+
+1. **Select accent colors** - Choose from all available accent colors with color swatches, plus alpha colors (blackAlpha, whiteAlpha)
+2. **Select gray colors** - Natural pairings are pre-selected based on your accent choices
+3. **Output directory** - Where to save the generated files (default: `./palette`)
+4. **Generate accents.css?** - Include `[data-accent-color]` and `[data-gray-color]` selectors
+5. **Generate Tailwind v4 config?** - Include `@theme inline` mappings in `index.css`
+
+Example output:
+
 ```
-styles/
-├── index.css        # Imports + Tailwind v4 @theme mappings
-├── accents.css      # [data-accent-color] selectors (-a flag)
+palette/
 ├── blue.css         # Light theme: --blue-1 through --blue-12, --blue-a1 through --blue-a12
 ├── blue-dark.css    # Dark theme variants
 ├── red.css
@@ -108,21 +112,9 @@ styles/
 ├── 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
+├── white-alpha.css  # --white-a1 through --white-a12
+├── accents.css      # [data-accent-color] selectors (optional)
+└── index.css        # Tailwind v4 @theme mappings (optional)
 ```
 
 ## Available Colors

package/dist/cli/cli.d.ts

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

package/dist/cli/cli.js

@@ -1,78 +1,95 @@
-import { defineCommand, runMain } from 'citty';
-import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
-import { 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',
+import * as p from '@clack/prompts';
+import chalk from 'chalk';
+import { mkdirSync } from 'node:fs';
+import { relative, resolve } from 'node:path';
+import { accentColors, grayColors, } from "../types.js";
+import { getMatchingGrayColor } from "../utils.js";
+import { alphaColors, capitalize, getColorHex, writeAccentsFile, writeColorFiles, writeTailwindFile, } from "./utils.js";
+const accentOptions = {
+    Accents: accentColors
+        .filter((c) => c !== 'gray')
+        .map((c) => {
+        const hex = getColorHex(c);
+        const swatch = hex ? chalk.bgHex(hex)('  ') + ' ' : '';
+        return { value: c, label: `${swatch}${capitalize(c)}` };
+    }),
+    Alpha: alphaColors.map((c) => {
+        const [label] = c.split('Alpha');
+        return { value: c, label: capitalize(label) };
+    }),
+};
+const grayOptions = grayColors.map((c) => {
+    const hex = getColorHex(c);
+    const swatch = hex ? chalk.bgHex(hex)('  ') + ' ' : '';
+    return { value: c, label: `${swatch}${capitalize(c)}` };
+});
+async function main() {
+    p.intro(`palette v0.22.1`);
+    const results = await p.group({
+        colors: () => p.groupMultiselect({
+            message: 'Select accent colors',
+            options: accentOptions,
             required: true,
+            initialValues: [...alphaColors],
+        }),
+        grays: ({ results }) => {
+            // Get matching grays for selected accent colors
+            const selectedAccents = (results.colors ?? []).filter((c) => accentColors.includes(c));
+            const matchingGrays = [
+                ...new Set(selectedAccents.map(getMatchingGrayColor)),
+            ];
+            return p.multiselect({
+                message: 'Select gray colors (natural pairings pre-selected)',
+                options: grayOptions,
+                initialValues: matchingGrays,
+                required: false,
+            });
         },
-        output: {
-            type: 'string',
-            alias: 'o',
-            description: 'Output directory',
-        },
-        accents: {
-            type: 'boolean',
-            alias: 'a',
-            description: 'Generate accents.css with [data-accent-color] selectors',
-        },
-        tailwind: {
-            type: 'boolean',
-            alias: 't',
-            description: 'Generate index.css with Tailwind v4 @theme mappings',
+        output: () => p.text({
+            message: 'Output directory',
+            placeholder: './palette',
+            defaultValue: './palette',
+        }),
+        accents: () => p.confirm({
+            message: 'Generate accents.css?',
+            initialValue: true,
+        }),
+        tailwind: () => p.confirm({
+            message: 'Generate Tailwind v4 config?',
+            initialValue: false,
+        }),
+    }, {
+        onCancel: () => {
+            p.cancel('Operation cancelled.');
+            process.exit(0);
         },
-    },
-    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 }));
-            }
-        }
-        if (args.accents) {
-            const accentColorNames = selected.filter((c) => !alphaColors.includes(c));
-            writeIfNotExists(`${outputPath}/accents.css`, css.accents(accentColorNames));
-        }
-        if (args.tailwind) {
-            const tailwindColorNames = selected.map((c) => c === 'blackAlpha' ? 'black' : c === 'whiteAlpha' ? 'white' : c);
-            writeIfNotExists(`${outputPath}/index.css`, css.tailwind(tailwindColorNames, { accents: args.accents }));
-        }
-        console.log(`\nCSS saved to ${outputPath}`);
-    },
-});
-runMain(main);
-export function writeIfNotExists(path, data) {
-    if (existsSync(path)) {
-        return false;
+    });
+    const selectedGrays = (results.grays ?? []);
+    const allColors = [...results.colors, ...selectedGrays];
+    if (allColors.length === 0) {
+        p.cancel('No colors selected.');
+        process.exit(0);
+    }
+    const cwd = process.cwd();
+    const outputPath = resolve(cwd, results.output);
+    mkdirSync(outputPath, { recursive: true });
+    const s = p.spinner();
+    s.start('Generating CSS files...');
+    writeColorFiles(allColors, outputPath);
+    if (results.accents) {
+        writeAccentsFile(allColors, outputPath);
+    }
+    if (results.tailwind) {
+        writeTailwindFile(allColors, outputPath, results.accents);
     }
-    writeFileSync(path, data);
-    return true;
+    s.stop();
+    const rel = relative(cwd, outputPath);
+    const display = rel.startsWith('..') ? rel : `./${rel}`;
+    const extras = [
+        results.accents && 'accents.css',
+        results.tailwind && 'index.css',
+    ].filter(Boolean);
+    p.log.success(`Generated ${allColors.length} color${allColors.length > 1 ? 's' : ''}${extras.length ? ` + ${extras.join(', ')}` : ''}`);
+    p.outro(`Saved to ${display}`);
 }
+main();

package/dist/cli/utils.d.ts

@@ -1,3 +1,6 @@
+import { type Color } from '../types.ts';
+export declare const alphaColors: readonly ["blackAlpha", "whiteAlpha"];
+export type AlphaColor = (typeof alphaColors)[number];
 /**
  * get package.json content from startDir
  * @param cwd
@@ -7,3 +10,13 @@ export declare const getPackageJson: (cwd: string) => {
     pkg: any;
     packageJsonPath: string;
 } | undefined;
+export declare function writeColorFiles(selected: string[], outputPath: string): void;
+export declare function writeAlphaColorFile(name: AlphaColor, outputPath: string): void;
+export declare function writePaletteColorFiles(name: Color, outputPath: string): void;
+export declare function writeAccentsFile(selected: string[], outputPath: string): void;
+export declare function writeTailwindFile(selected: string[], outputPath: string, includeAccents: boolean): void;
+export declare function writeIfNotExists(path: string, data: string | NodeJS.ArrayBufferView): boolean;
+export declare const capitalize: (s: string) => string;
+/** Get hex color (step 9) for a palette color */
+export declare const getColorHex: (name: string) => string | null;
+export declare function invariant(condition: unknown, message?: string | Error): asserts condition;

package/dist/cli/utils.js

@@ -1,7 +1,12 @@
-import fs from 'node:fs';
+import fs, { existsSync, writeFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import * as url from 'node:url';
+import * as colors from "../colors/index.js";
+import * as palette from "../colors/index.js";
+import { css } from "../css.js";
+import {} from "../types.js";
+export const alphaColors = ['blackAlpha', 'whiteAlpha'];
 const require = createRequire(import.meta.url);
 /**
  * get package.json content from startDir
@@ -42,3 +47,54 @@ const findPackageJson = (startDir) => {
         currentDir = parentDir;
     }
 };
+export function writeColorFiles(selected, outputPath) {
+    for (const name of selected) {
+        if (alphaColors.includes(name)) {
+            writeAlphaColorFile(name, outputPath);
+        }
+        else {
+            writePaletteColorFiles(name, outputPath);
+        }
+    }
+}
+export function writeAlphaColorFile(name, outputPath) {
+    const config = palette[name];
+    const fileName = name === 'blackAlpha' ? 'black-alpha' : 'white-alpha';
+    writeIfNotExists(`${outputPath}/${fileName}.css`, css.alpha(config));
+}
+export function writePaletteColorFiles(name, outputPath) {
+    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 }));
+}
+export function writeAccentsFile(selected, outputPath) {
+    const accentColorNames = selected.filter((c) => !alphaColors.includes(c));
+    writeIfNotExists(`${outputPath}/accents.css`, css.accents(accentColorNames));
+}
+export function writeTailwindFile(selected, outputPath, includeAccents) {
+    const tailwindColorNames = selected.map((c) => c === 'blackAlpha' ? 'black' : c === 'whiteAlpha' ? 'white' : c);
+    writeIfNotExists(`${outputPath}/index.css`, css.tailwind(tailwindColorNames, { accents: includeAccents }));
+}
+export function writeIfNotExists(path, data) {
+    if (existsSync(path)) {
+        return false;
+    }
+    writeFileSync(path, data);
+    return true;
+}
+export const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+/** Get hex color (step 9) for a palette color */
+export const getColorHex = (name) => {
+    const color = colors[name];
+    invariant(color, `${color} is missing its step 9`);
+    return color?.dark?.srgb?.solid?.[8] ?? null;
+};
+export function invariant(condition, message) {
+    if (condition) {
+        return;
+    }
+    if (message && typeof message === 'string') {
+        throw new Error(message);
+    }
+    throw message;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diskette/palette",
   "type": "module",
-  "version": "0.21.2",
+  "version": "0.22.1",
   "bin": {
     "palette": "./dist/cli/cli.js"
   },
@@ -23,19 +23,22 @@
     "dist"
   ],
   "dependencies": {
-    "citty": "^0.1.6"
+    "@clack/prompts": "1.0.0-alpha.8",
+    "chalk": "^5.6.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.7",
+    "@changesets/cli": "^2.29.8",
     "@diskette/fs": "^0.17.0",
-    "@types/node": "^24.3.0",
+    "@types/node": "^24.10.2",
+    "@types/react": "^19.2.7",
     "magicast": "^0.5.1",
-    "oxlint": "^1.16.0",
-    "oxlint-tsgolint": "^0.2.0",
-    "prettier": "^3.6.2",
-    "tsx": "^4.20.5",
+    "oxlint": "^1.32.0",
+    "oxlint-tsgolint": "^0.8.5",
+    "prettier": "^3.7.4",
+    "react": "^19.2.1",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.2",
-    "vitest": "^4.0.14"
+    "vitest": "^4.0.15"
   },
   "repository": {
     "type": "git",
@@ -48,10 +51,10 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/inject-meta.ts",
     "typecheck": "tsc",
     "test": "vitest run",
     "lint": "oxlint --type-aware src",
-    "release": "changeset version && changeset publish && git push --follow-tags"
+    "release": "changeset version && pnpm build && changeset publish && git push --follow-tags"
   }
 }