@diskette/palette 0.11.0 → 0.12.0

package/dist/cli.js

@@ -2,18 +2,35 @@ import * as p from '@clack/prompts';
 import { mkdirSync, statSync, writeFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { blackAlpha, whiteAlpha } from "./colors/index.js";
-import { colors, css, grayColors } from "./index.js";
-function colorOptions() {
-    return colors.map((color) => {
-        const option = {
-            value: color.name,
-            label: color.name,
-        };
-        if (grayColors.includes(color.name)) {
-            option.hint = 'gray';
-        }
-        return option;
+import { accentColors, colors, css, grayColors } from "./index.js";
+function cancel() {
+    p.cancel('Operation cancelled.');
+    process.exit(0);
+}
+async function askColors(label, choices) {
+    const mode = await p.select({
+        message: `Which ${label} colors do you want to generate?`,
+        options: [
+            { value: 'select', label: 'Select specific colors' },
+            {
+                value: 'all',
+                label: `All ${label} colors`,
+                hint: `${choices.length} colors`,
+            },
+        ],
     });
+    if (p.isCancel(mode))
+        cancel();
+    if (mode === 'all')
+        return choices;
+    const selected = await p.autocompleteMultiselect({
+        message: `Select ${label} colors:`,
+        options: choices.map((name) => ({ value: name, label: name })),
+        required: false,
+    });
+    if (p.isCancel(selected))
+        cancel();
+    return selected;
 }
 async function askOutputDir(message) {
     const outputDir = await p.text({
@@ -31,105 +48,43 @@ async function askOutputDir(message) {
             catch { }
         },
     });
-    if (p.isCancel(outputDir)) {
-        p.cancel('Operation cancelled.');
-        process.exit(0);
-    }
+    if (p.isCancel(outputDir))
+        cancel();
     return outputDir;
 }
 async function main() {
     p.intro('Palette CSS Generator');
-    // --- Color Scales ---
-    const scaleMode = await p.select({
-        message: 'Which color scales do you want to generate?',
-        options: [
-            { value: 'all', label: 'All colors', hint: `${colors.length} colors` },
-            { value: 'select', label: 'Select specific colors' },
-        ],
-    });
-    if (p.isCancel(scaleMode)) {
-        p.cancel('Operation cancelled.');
-        process.exit(0);
-    }
-    let scaleColors = colors;
-    if (scaleMode === 'select') {
-        const scaleChoices = await p.autocompleteMultiselect({
-            message: 'Select colors for scales:',
-            options: colorOptions(),
-            required: true,
-        });
-        if (p.isCancel(scaleChoices)) {
-            p.cancel('Operation cancelled.');
-            process.exit(0);
-        }
-        scaleColors = colors.filter((c) => scaleChoices.includes(c.name));
-    }
-    const scalesOutputDir = await askOutputDir('Output directory for color scales:');
-    // --- Semantic Tokens ---
-    const generateSemantic = await p.confirm({
-        message: 'Generate semantic tokens?',
+    const selectedAccentColors = await askColors('accent', accentColors);
+    const selectedGrayColors = await askColors('gray', grayColors.slice(1));
+    const selectedColors = [...selectedAccentColors, ...selectedGrayColors];
+    const generateAccents = await p.confirm({
+        message: 'Generate accents for selected colors?',
     });
-    if (p.isCancel(generateSemantic)) {
-        p.cancel('Operation cancelled.');
-        process.exit(0);
-    }
-    let semanticColors = colors;
-    let semanticOutputDir = null;
-    if (generateSemantic) {
-        const semanticMode = await p.select({
-            message: 'Which colors for semantic tokens?',
-            options: [
-                { value: 'all', label: 'All colors', hint: `${colors.length} colors` },
-                { value: 'select', label: 'Select specific colors' },
-            ],
-        });
-        if (p.isCancel(semanticMode)) {
-            p.cancel('Operation cancelled.');
-            process.exit(0);
-        }
-        if (semanticMode === 'select') {
-            const semanticChoices = await p.autocompleteMultiselect({
-                message: 'Select colors for semantic tokens:',
-                options: colorOptions(),
-                required: true,
-            });
-            if (p.isCancel(semanticChoices)) {
-                p.cancel('Operation cancelled.');
-                process.exit(0);
-            }
-            semanticColors = colors.filter((c) => semanticChoices.includes(c.name));
-        }
-        semanticOutputDir = await askOutputDir('Output directory for semantic tokens:');
-    }
+    if (p.isCancel(generateAccents))
+        cancel();
+    const outputDir = await askOutputDir('Output directory:');
     // --- Generate Files ---
     const s = p.spinner();
     s.start('Generating CSS files...');
-    // Generate color scales
-    const scalesPath = resolve(process.cwd(), scalesOutputDir);
-    mkdirSync(scalesPath, { recursive: true });
-    for (const color of scaleColors) {
-        const name = color.name;
-        writeFileSync(`${scalesPath}/${name}.css`, css.scale('light', color));
-        writeFileSync(`${scalesPath}/${name}-alpha.css`, css.scale('lightAlpha', color));
-        writeFileSync(`${scalesPath}/${name}-dark.css`, css.scale('dark', color));
-        writeFileSync(`${scalesPath}/${name}-dark-alpha.css`, css.scale('darkAlpha', color));
+    const outputPath = resolve(process.cwd(), outputDir);
+    mkdirSync(outputPath, { recursive: true });
+    for (const name of selectedColors) {
+        const palette = colors.find((c) => c.name === name);
+        // Light theme (scales + alphas + semantics)
+        writeFileSync(`${outputPath}/${name}.css`, css.palette(name, palette, { schemes: ['light'], alpha: true }));
+        // Dark theme (scales + alphas + semantics)
+        writeFileSync(`${outputPath}/${name}-dark.css`, css.palette(name, palette, { schemes: ['dark'], alpha: true }));
     }
     // Always generate alpha overlay files
-    writeFileSync(`${scalesPath}/black-alpha.css`, css.alpha(blackAlpha));
-    writeFileSync(`${scalesPath}/white-alpha.css`, css.alpha(whiteAlpha));
-    // Generate semantic tokens
-    if (generateSemantic && semanticOutputDir) {
-        const semanticPath = resolve(process.cwd(), semanticOutputDir);
-        mkdirSync(semanticPath, { recursive: true });
-        for (const color of semanticColors) {
-            writeFileSync(`${semanticPath}/${color.name}.css`, css.semantic(color.name, color));
-        }
+    writeFileSync(`${outputPath}/black-alpha.css`, css.alpha(blackAlpha));
+    writeFileSync(`${outputPath}/white-alpha.css`, css.alpha(whiteAlpha));
+    // Generate accents
+    if (generateAccents) {
+        const accents = css.accents([...selectedAccentColors]);
+        const grays = css.grays(selectedGrayColors, 'diskette-palette');
+        writeFileSync(`${outputPath}/accents.css`, `${accents}\n${grays}`);
     }
     s.stop();
-    let message = `Color scales saved to ${scalesPath}`;
-    if (semanticOutputDir) {
-        message += `\nSemantic tokens saved to ${resolve(process.cwd(), semanticOutputDir)}`;
-    }
-    p.outro(message);
+    p.outro(`CSS saved to ${outputPath}`);
 }
 main().catch(console.error);

package/dist/css.d.ts

@@ -0,0 +1,30 @@
+import type { AnyPalette } from './types.ts';
+type AlphaConfig = {
+    srgb: Record<string, string>;
+    p3: Record<string, string>;
+};
+type PaletteOptions = {
+    /** Which color schemes to include. Defaults to ['light'] */
+    schemes?: ('light' | 'dark')[];
+    /** Include alpha scale variables (e.g., --amber-a1). Defaults to false */
+    alpha?: boolean;
+};
+export declare const css: {
+    /**
+     * Generate combined CSS for scale variables and semantic tokens
+     */
+    palette(name: string, config: AnyPalette, options?: PaletteOptions): string;
+    /**
+     * Generate CSS for alpha-only color scales
+     */
+    alpha(config: AlphaConfig): string;
+    /**
+     * Generate CSS for accent color data attribute selectors
+     */
+    accents(colorNames: string[]): string;
+    /**
+     * Generate CSS for gray color data attribute selectors
+     */
+    grays(names: readonly string[], className: string): string;
+};
+export {};

package/dist/css.js

@@ -0,0 +1,126 @@
+const steps = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const LIGHT_SELECTOR = ':root, .light, .light-theme';
+const DARK_SELECTOR = '.dark, .dark-theme';
+const schemeSelector = (scheme) => scheme === 'light' ? LIGHT_SELECTOR : DARK_SELECTOR;
+/** Convert "amber9" to "--amber-9" or "amberA9" to "--amber-a9" */
+const toVarName = (key) => `--${key.replace(/A?(\d+)/, (m, n) => (m.startsWith('A') ? `-a${n}` : `-${n}`))}`;
+const formatRule = (selector, vars) => `${selector} {\n  ${vars.join(';\n  ')};\n}`;
+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}`;
+const formatNestedBlock = (selector, vars) => `&:where(${selector}) {\n    ${vars.join(';\n    ')};\n  }`;
+export const css = {
+    /**
+     * Generate combined CSS for scale variables and semantic tokens
+     */
+    palette(name, config, options = {}) {
+        const { schemes = ['light'], alpha = false } = options;
+        const output = [];
+        if (schemes.includes('light')) {
+            output.push(formatRule(':root', [
+                `--${name}-contrast: ${config.contrast}`,
+                `--${name}-indicator: var(${toVarName(config.indicator)})`,
+                `--${name}-track: var(${toVarName(config.track)})`,
+            ]));
+        }
+        for (const scheme of schemes) {
+            const isLight = scheme === 'light';
+            const selector = schemeSelector(scheme);
+            const srgbScale = isLight ? config.srgb.light : config.srgb.dark;
+            const p3Scale = isLight ? config.p3.light : config.p3.dark;
+            const srgbSurface = isLight
+                ? config.surface.srgb.light
+                : config.surface.srgb.dark;
+            const p3Surface = isLight
+                ? config.surface.p3.light
+                : config.surface.p3.dark;
+            const srgb = [];
+            const p3 = [];
+            for (const n of steps) {
+                srgb.push(`--${name}-${n}: ${srgbScale[`${name}${n}`]}`);
+                p3.push(`--${name}-${n}: ${p3Scale[`${name}${n}`]}`);
+            }
+            if (alpha) {
+                for (const n of steps) {
+                    srgb.push(`--${name}-a${n}: ${srgbScale[`${name}A${n}`]}`);
+                    p3.push(`--${name}-a${n}: ${p3Scale[`${name}A${n}`]}`);
+                }
+            }
+            srgb.push(`--${name}-surface: ${srgbSurface}`);
+            p3.push(`--${name}-surface: ${p3Surface}`);
+            output.push(formatRule(selector, srgb));
+            output.push(formatP3(selector, p3));
+        }
+        return output.join('\n\n') + '\n';
+    },
+    /**
+     * Generate CSS for alpha-only color scales
+     */
+    alpha(config) {
+        const srgb = [];
+        const p3 = [];
+        for (const key in config.srgb) {
+            srgb.push(`${toVarName(key)}: ${config.srgb[key]}`);
+        }
+        for (const key in config.p3) {
+            p3.push(`${toVarName(key)}: ${config.p3[key]}`);
+        }
+        return ([formatRule(':root', srgb), formatP3(':root', p3)].join('\n\n') + '\n');
+    },
+    /**
+     * Generate CSS for accent color data attribute selectors
+     */
+    accents(colorNames) {
+        const output = colorNames.map((colorName) => {
+            const srgb = [];
+            const alpha = [];
+            for (const n of steps) {
+                srgb.push(`--accent-${n}: var(--${colorName}-${n})`);
+                alpha.push(`--accent-a${n}: var(--${colorName}-a${n})`);
+            }
+            const semantic = [
+                `--accent-contrast: var(--${colorName}-contrast)`,
+                `--accent-surface: var(--${colorName}-surface)`,
+                `--accent-indicator: var(--${colorName}-indicator)`,
+                `--accent-track: var(--${colorName}-track)`,
+            ];
+            return formatRule(`[data-accent-color='${colorName}']`, [
+                ...srgb,
+                ...alpha,
+                ...semantic,
+            ]);
+        });
+        const focus = [];
+        const focusAlpha = [];
+        for (const n of steps) {
+            focus.push(`--focus-${n}: var(--accent-${n})`);
+            focusAlpha.push(`--focus-a${n}: var(--accent-a${n})`);
+        }
+        output.push(formatRule(`[data-accent-color]:where(:not([data-accent-color=''], [data-accent-color='gray']))`, [...focus, ...focusAlpha]));
+        return output.join('\n\n') + '\n';
+    },
+    /**
+     * Generate CSS for gray color data attribute selectors
+     */
+    grays(names, className) {
+        const grays = names.filter((n) => n !== 'gray');
+        const blocks = grays.map((colorName) => {
+            const srgb = [];
+            const alpha = [];
+            for (const n of steps) {
+                srgb.push(`--gray-${n}: var(--${colorName}-${n})`);
+                alpha.push(`--gray-a${n}: var(--${colorName}-a${n})`);
+            }
+            const semantic = [
+                `--gray-contrast: var(--${colorName}-contrast)`,
+                `--gray-surface: var(--${colorName}-surface)`,
+                `--gray-indicator: var(--${colorName}-indicator)`,
+                `--gray-track: var(--${colorName}-track)`,
+            ];
+            return formatNestedBlock(`[data-gray-color='${colorName}']`, [
+                ...srgb,
+                ...alpha,
+                ...semantic,
+            ]);
+        });
+        return `.${className} {\n  ${blocks.join('\n\n  ')}\n}\n`;
+    },
+};

package/dist/index.d.ts

@@ -3939,4 +3939,5 @@ export declare const colors: ({
 export default colors;
 export { accentColors, grayColors } from './types.ts';
 export type { AccentColor, AlphaConfig, AlphaScale, Color, ColorPalette, ColorScale, GrayColor, } from './types.ts';
-export { css, type ColorConfig } from './lib.ts';
+export { css } from './css.ts';
+export { getMatchingGrayColor } from './utils.ts';

package/dist/index.js

@@ -64,4 +64,5 @@ export const colors = [
 ];
 export default colors;
 export { accentColors, grayColors } from "./types.js";
-export { css } from "./lib.js";
+export { css } from "./css.js";
+export { getMatchingGrayColor } from "./utils.js";

package/dist/types.d.ts

@@ -31,6 +31,7 @@ export type ColorPalette<C extends Color> = {
         };
     };
 };
+export type AnyPalette = ColorPalette<any>;
 export type AlphaScale<C extends 'white' | 'back'> = {
     [K in `${C}A${ScaleStep}`]: string;
 };

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import type { AccentColor, GrayColor } from './types.ts';
+export declare function getMatchingGrayColor(accentColor: AccentColor): GrayColor;

package/dist/utils.js

@@ -0,0 +1,37 @@
+export function getMatchingGrayColor(accentColor) {
+    switch (accentColor) {
+        case 'tomato':
+        case 'red':
+        case 'ruby':
+        case 'crimson':
+        case 'pink':
+        case 'plum':
+        case 'purple':
+        case 'violet':
+            return 'mauve';
+        case 'iris':
+        case 'indigo':
+        case 'blue':
+        case 'sky':
+        case 'cyan':
+            return 'slate';
+        case 'teal':
+        case 'jade':
+        case 'mint':
+        case 'green':
+            return 'sage';
+        case 'grass':
+        case 'lime':
+            return 'olive';
+        case 'yellow':
+        case 'amber':
+        case 'orange':
+        case 'brown':
+        case 'gold':
+        case 'bronze':
+            return 'sand';
+        case 'gray':
+        default:
+            return 'gray';
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diskette/palette",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "bin": {
     "palette": "./dist/cli.js"
   },

package/dist/lib.d.ts

@@ -1,30 +0,0 @@
-export type AlphaConfig = {
-    srgb: Record<string, string>;
-    p3: Record<string, string>;
-};
-export type ColorConfig = {
-    srgb: {
-        light: Record<string, string> & {
-            surface: string;
-        };
-        dark: Record<string, string> & {
-            surface: string;
-        };
-    };
-    p3: {
-        light: Record<string, string> & {
-            surface: string;
-        };
-        dark: Record<string, string> & {
-            surface: string;
-        };
-    };
-    contrast: string;
-    indicator: string;
-    track: string;
-};
-export declare const css: {
-    scale(scheme: "light" | "lightAlpha" | "dark" | "darkAlpha", config: ColorConfig): string;
-    alpha(config: AlphaConfig): string;
-    semantic(name: string, config: ColorConfig): string;
-};

package/dist/lib.js

@@ -1,89 +0,0 @@
-const lightSelector = `:root, .light, .light-theme`;
-const darkSelector = `.dark, .dark-theme`;
-/** Convert color key to CSS variable name (e.g., "blue1" → "--blue-1", "blueA1" → "--blue-a1") */
-const toVarName = (key) => '--' + key.replace(/A?(\d)/, (_, num) => (key.includes('A') ? `-a${num}` : `-${num}`));
-export const css = {
-    scale(scheme, config) {
-        const isLight = scheme === 'light' || scheme === 'lightAlpha';
-        const isAlpha = scheme === 'lightAlpha' || scheme === 'darkAlpha';
-        const selector = isLight ? lightSelector : darkSelector;
-        const srgbScale = isLight ? config.srgb.light : config.srgb.dark;
-        const p3Scale = isLight ? config.p3.light : config.p3.dark;
-        const filterEntries = (obj) => Object.entries(obj).filter(([key]) => {
-            if (key === 'surface')
-                return false;
-            const hasAlpha = key.includes('A');
-            return isAlpha ? hasAlpha : !hasAlpha;
-        });
-        const baseVars = filterEntries(srgbScale)
-            .map(([key, value]) => `  ${toVarName(key)}: ${value};`)
-            .join('\n');
-        const p3Vars = filterEntries(p3Scale)
-            .map(([key, value]) => `      ${toVarName(key)}: ${value};`)
-            .join('\n');
-        return `${selector} {
-${baseVars}
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    ${selector} {
-${p3Vars}
-    }
-  }
-}
-`;
-    },
-    alpha(config) {
-        const baseVars = Object.entries(config.srgb)
-            .map(([key, value]) => `  ${toVarName(key)}: ${value};`)
-            .join('\n');
-        const p3Vars = Object.entries(config.p3)
-            .map(([key, value]) => `      ${toVarName(key)}: ${value};`)
-            .join('\n');
-        return `:root {
-${baseVars}
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root {
-${p3Vars}
-    }
-  }
-}
-`;
-    },
-    semantic(name, config) {
-        const varRef = (key) => `var(${toVarName(key)})`;
-        return `:root {
-  --${name}-contrast: ${config.contrast};
-}
-
-:root,
-.light,
-.light-theme {
-  --${name}-surface: ${config.srgb.light.surface};
-  --${name}-indicator: ${varRef(config.indicator)};
-  --${name}-track: ${varRef(config.track)};
-  @supports (color: color(display-p3 1 1 1)) {
-    @media (color-gamut: p3) {
-      --${name}-surface: ${config.p3.light.surface};
-    }
-  }
-}
-
-.dark,
-.dark-theme {
-  --${name}-surface: ${config.srgb.dark.surface};
-  --${name}-indicator: ${varRef(config.indicator)};
-  --${name}-track: ${varRef(config.track)};
-  @supports (color: color(display-p3 1 1 1)) {
-    @media (color-gamut: p3) {
-      --${name}-surface: ${config.p3.dark.surface};
-    }
-  }
-}
-`;
-    },
-};