@diskette/palette 0.21.1 → 0.22.0

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/package.json

@@ -0,0 +1,62 @@
+{
+    "name": "@diskette/palette",
+    "type": "module",
+    "version": "0.22.0",
+    "bin": {
+        "palette": "./dist/cli/cli.js"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./colors": {
+            "types": "./dist/colors/index.d.ts",
+            "default": "./dist/colors/index.js"
+        },
+        "./colors/*": {
+            "types": "./dist/colors/*.d.ts",
+            "default": "./dist/colors/*.js"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "packageManager": "pnpm@10.22.0",
+    "scripts": {
+        "build": "rm -rf dist && tsc -p tsconfig.build.json",
+        "prepublishOnly": "pnpm build",
+        "typecheck": "tsc",
+        "test": "vitest run",
+        "lint": "oxlint --type-aware src",
+        "release": "changeset version && changeset publish && git push --follow-tags"
+    },
+    "dependencies": {
+        "@clack/prompts": "1.0.0-alpha.8",
+        "chalk": "^5.6.2"
+    },
+    "devDependencies": {
+        "@changesets/cli": "^2.29.8",
+        "@diskette/fs": "^0.17.0",
+        "@types/node": "^24.10.2",
+        "@types/react": "^19.2.7",
+        "magicast": "^0.5.1",
+        "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.15"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/diskettejs/palette.git"
+    },
+    "keywords": [],
+    "prettier": {
+        "semi": false,
+        "singleQuote": true
+    },
+    "license": "MIT"
+}

package/dist/src/cli/cli.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/cli/cli.js

@@ -0,0 +1,96 @@
+import * as p from '@clack/prompts';
+import chalk from 'chalk';
+import { mkdirSync } from 'node:fs';
+import { relative, resolve } from 'node:path';
+import pkg from '../../package.json' with { type: 'json' };
+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 v${pkg.version}`);
+    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: () => 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);
+        },
+    });
+    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);
+    }
+    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/src/cli/utils.d.ts

@@ -0,0 +1,22 @@
+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
+ * @returns package.json content
+ */
+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/src/cli/utils.js

@@ -0,0 +1,100 @@
+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
+ * @param cwd
+ * @returns package.json content
+ */
+export const getPackageJson = (cwd) => {
+    try {
+        const startDir = path.dirname(url.fileURLToPath(cwd));
+        const packageJsonPath = findPackageJson(startDir);
+        if (packageJsonPath) {
+            const pkg = require(packageJsonPath);
+            return { pkg, packageJsonPath };
+        }
+        return undefined;
+    }
+    catch (error) {
+        // ignore error
+        return undefined;
+    }
+};
+/**
+ * search package.json from startDir
+ * @param startDir
+ * @returns
+ */
+const findPackageJson = (startDir) => {
+    let currentDir = startDir;
+    while (true) {
+        const packageJsonPath = path.join(currentDir, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+            return packageJsonPath;
+        }
+        const parentDir = path.resolve(currentDir, '..');
+        if (parentDir === currentDir) {
+            return '';
+        }
+        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/dist/{css.d.ts → src/css.d.ts}

@@ -13,7 +13,11 @@ declare function palette<C extends Color>(config: PaletteColor<C>, options?: Pal
 declare function alpha(config: AlphaConfig): string;
 declare function accents(colorNames: string[]): string;
 declare function grays(names: readonly string[], className: string): string;
-declare function tailwind(colorNames: string[]): string;
+type TailwindOptions = {
+    /** Include @import for accents.css. Defaults to false */
+    accents?: boolean;
+};
+declare function tailwind(colorNames: string[], options?: TailwindOptions): string;
 export declare const css: {
     /**
      * Generate combined CSS for scale variables and semantic tokens

package/dist/{css.js → src/css.js}

@@ -103,11 +103,23 @@ function grays(names, className) {
     });
     return `.${className} {\n  ${blocks.join('\n\n  ')}\n}\n`;
 }
-function tailwind(colorNames) {
+function tailwind(colorNames, options = {}) {
+    const { accents: includeAccents = false } = options;
+    const imports = [];
     const blocks = [];
+    if (includeAccents) {
+        imports.push(`@import './accents.css';`);
+    }
     for (const name of colorNames) {
         const declarations = [];
         const isAlphaOnly = name === 'white' || name === 'black';
+        if (isAlphaOnly) {
+            imports.push(`@import './${name}-alpha.css';`);
+        }
+        else {
+            imports.push(`@import './${name}.css';`);
+            imports.push(`@import './${name}-dark.css';`);
+        }
         if (!isAlphaOnly) {
             for (const n of steps) {
                 declarations.push(`--color-${name}-${n}: var(--${name}-${n})`);
@@ -127,8 +139,9 @@ function tailwind(colorNames) {
         focus.push(`--color-focus-${n}: var(--accent-${n})`);
         focusAlpha.push(`--color-focus-a${n}: var(--accent-a${n})`);
     }
-    blocks.push(focus.join(';\n'), focusAlpha.join(';\n'));
-    return `@theme inline {\n  ${blocks.join(';\n\n  ')};\n}\n`;
+    blocks.push(focus.join(';\n  '), focusAlpha.join(';\n  '));
+    const importsBlock = imports.length > 0 ? imports.join('\n') + '\n\n' : '';
+    return `${importsBlock}@theme inline {\n  ${blocks.join(';\n\n  ')};\n}\n`;
 }
 export const css = {
     /**

package/dist/{utils.d.ts → src/utils.d.ts}

@@ -1,5 +1,4 @@
 import type { AccentColor, GrayColor } from './types.ts';
-export declare function getMatchingGrayColor(accentColor: AccentColor): GrayColor;
 export declare const LIGHT_SELECTOR = ":root, .light, .light-theme";
 export declare const DARK_SELECTOR = ".dark, .dark-theme";
 export declare const schemeSelector: (scheme: "light" | "dark") => string;
@@ -8,12 +7,4 @@ export declare const toVarName: (key: string) => string;
 export declare const formatRule: (selector: string, vars: string[]) => string;
 export declare const formatP3: (selector: string, vars: string[]) => string;
 export declare const formatNestedBlock: (selector: string, vars: string[]) => string;
-/**
- * get package.json content from startDir
- * @param cwd
- * @returns package.json content
- */
-export declare const getPackageJson: (cwd: string) => {
-    pkg: any;
-    packageJsonPath: string;
-} | undefined;
+export declare function getMatchingGrayColor(accentColor: AccentColor): GrayColor;

package/dist/{utils.js → src/utils.js}

@@ -1,7 +1,11 @@
-import fs from 'node:fs';
-import { createRequire } from 'node:module';
-import path from 'node:path';
-import * as url from 'node:url';
+export const LIGHT_SELECTOR = ':root, .light, .light-theme';
+export const DARK_SELECTOR = '.dark, .dark-theme';
+export const schemeSelector = (scheme) => scheme === 'light' ? LIGHT_SELECTOR : DARK_SELECTOR;
+/** Convert "amber9" to "--amber-9" or "amberA9" to "--amber-a9" */
+export const toVarName = (key) => `--${key.replace(/A?(\d+)/, (m, n) => (m.startsWith('A') ? `-a${n}` : `-${n}`))}`;
+export const formatRule = (selector, vars) => `${selector} {\n  ${vars.join(';\n  ')};\n}`;
+export const formatP3 = (selector, vars) => `@supports (color: color(display-p3 1 1 1)) {\n  @media (color-gamut: p3) {\n    ${selector} {\n      ${vars.join(';\n      ')};\n    }\n  }\n}`;
+export const formatNestedBlock = (selector, vars) => `&:where(${selector}) {\n    ${vars.join(';\n    ')};\n  }`;
 export function getMatchingGrayColor(accentColor) {
     switch (accentColor) {
         case 'tomato':
@@ -39,51 +43,3 @@ export function getMatchingGrayColor(accentColor) {
             return 'gray';
     }
 }
-export const LIGHT_SELECTOR = ':root, .light, .light-theme';
-export const DARK_SELECTOR = '.dark, .dark-theme';
-export const schemeSelector = (scheme) => scheme === 'light' ? LIGHT_SELECTOR : DARK_SELECTOR;
-/** Convert "amber9" to "--amber-9" or "amberA9" to "--amber-a9" */
-export const toVarName = (key) => `--${key.replace(/A?(\d+)/, (m, n) => (m.startsWith('A') ? `-a${n}` : `-${n}`))}`;
-export const formatRule = (selector, vars) => `${selector} {\n  ${vars.join(';\n  ')};\n}`;
-export const formatP3 = (selector, vars) => `@supports (color: color(display-p3 1 1 1)) {\n  @media (color-gamut: p3) {\n    ${selector} {\n      ${vars.join(';\n      ')};\n    }\n  }\n}`;
-export const formatNestedBlock = (selector, vars) => `&:where(${selector}) {\n    ${vars.join(';\n    ')};\n  }`;
-const require = createRequire(import.meta.url);
-/**
- * get package.json content from startDir
- * @param cwd
- * @returns package.json content
- */
-export const getPackageJson = (cwd) => {
-    try {
-        const startDir = path.dirname(url.fileURLToPath(cwd));
-        const packageJsonPath = findPackageJson(startDir);
-        if (packageJsonPath) {
-            const pkg = require(packageJsonPath);
-            return { pkg, packageJsonPath };
-        }
-        return undefined;
-    }
-    catch (error) {
-        // ignore error
-        return undefined;
-    }
-};
-/**
- * search package.json from startDir
- * @param startDir
- * @returns
- */
-const findPackageJson = (startDir) => {
-    let currentDir = startDir;
-    while (true) {
-        const packageJsonPath = path.join(currentDir, 'package.json');
-        if (fs.existsSync(packageJsonPath)) {
-            return packageJsonPath;
-        }
-        const parentDir = path.resolve(currentDir, '..');
-        if (parentDir === currentDir) {
-            return '';
-        }
-        currentDir = parentDir;
-    }
-};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diskette/palette",
   "type": "module",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "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",

package/dist/cli/cli.d.ts

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

package/dist/cli/cli.js

@@ -1,70 +0,0 @@
-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',
-        },
-        accents: {
-            type: 'boolean',
-            alias: 'a',
-            description: 'Generate accents.css with [data-accent-color] selectors',
-        },
-    },
-    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));
-        }
-        const path = relative(dirname(packageJsonPath), resolve(outputPath));
-        console.log(`\nCSS saved to ${outputPath}`);
-    },
-});
-runMain(main);
-export function writeIfNotExists(path, data) {
-    if (existsSync(path)) {
-        return false;
-    }
-    writeFileSync(path, data);
-    return true;
-}