@diskette/palette 0.10.0 → 0.12.0

package/README.md

@@ -224,182 +224,6 @@ css.semantic(name: string, config: ColorConfig): string
 
 </details>
 
-## Examples
-
-### Generate a Complete CSS File
-
-```ts
-// scripts/generate-css.ts
-import { writeFileSync } from 'node:fs'
-import { css, colors } from '@diskette/palette'
-import { blackAlpha, whiteAlpha } from '@diskette/palette/colors'
-
-let output = ''
-
-// Generate scales for all colors
-for (const color of colors) {
-  output += css.scale('light', color)
-  output += css.scale('lightAlpha', color)
-  output += css.scale('dark', color)
-  output += css.scale('darkAlpha', color)
-}
-
-// Generate alpha colors
-output += css.alpha(blackAlpha)
-output += css.alpha(whiteAlpha)
-
-writeFileSync('dist/colors.css', output)
-```
-
-### Generate CSS for Selected Colors
-
-```ts
-// scripts/generate-theme.ts
-import { writeFileSync } from 'node:fs'
-import { css } from '@diskette/palette'
-import blue from '@diskette/palette/colors/blue'
-import gray from '@diskette/palette/colors/gray'
-
-const output = [
-  // Base scales
-  css.scale('light', blue),
-  css.scale('dark', blue),
-  css.scale('light', gray),
-  css.scale('dark', gray),
-
-  // Semantic tokens
-  css.semantic('blue', blue),
-  css.semantic('gray', gray),
-].join('\n')
-
-writeFileSync('src/styles/theme.css', output)
-```
-
-### Generate CSS with Custom Build Script
-
-```ts
-// build-colors.ts
-import { writeFileSync, mkdirSync } from 'node:fs'
-import { css, colors } from '@diskette/palette'
-
-mkdirSync('dist', { recursive: true })
-
-// Generate individual files per color
-for (const color of colors) {
-  const name = Object.keys(color.srgb.light)[0].replace(/\d+$/, '')
-
-  const content = [
-    css.scale('light', color),
-    css.scale('dark', color),
-    css.semantic(name, color),
-  ].join('\n')
-
-  writeFileSync(`dist/${name}.css`, content)
-}
-
-// Generate combined file
-let combined = ''
-for (const color of colors) {
-  const name = Object.keys(color.srgb.light)[0].replace(/\d+$/, '')
-  combined += css.scale('light', color)
-  combined += css.scale('dark', color)
-  combined += css.semantic(name, color)
-}
-writeFileSync('dist/all-colors.css', combined)
-```
-
-### Use with vanilla-extract
-
-```ts
-// src/styles/colors.css.ts
-import { createGlobalTheme } from '@vanilla-extract/css'
-import blue from '@diskette/palette/colors/blue'
-import gray from '@diskette/palette/colors/gray'
-
-// Create CSS variables from the palette
-createGlobalTheme(':root', {
-  colors: {
-    blue1: blue.srgb.light.blue1,
-    blue2: blue.srgb.light.blue2,
-    blue3: blue.srgb.light.blue3,
-    // ... etc
-    blue9: blue.srgb.light.blue9,
-    blue10: blue.srgb.light.blue10,
-    blue11: blue.srgb.light.blue11,
-    blue12: blue.srgb.light.blue12,
-    gray1: gray.srgb.light.gray1,
-    // ... etc
-  },
-})
-
-// For dark mode
-createGlobalTheme('.dark', {
-  colors: {
-    blue1: blue.srgb.dark.blue1,
-    blue2: blue.srgb.dark.blue2,
-    // ... etc
-  },
-})
-```
-
-### Generate Semantic Tokens Only
-
-```ts
-// scripts/semantic-tokens.ts
-import { writeFileSync } from 'node:fs'
-import { css, colors } from '@diskette/palette'
-
-let output = ''
-
-for (const color of colors) {
-  // Extract color name from first key (e.g., "blue1" -> "blue")
-  const name = Object.keys(color.srgb.light)[0].replace(/\d+$/, '')
-  output += css.semantic(name, color)
-}
-
-writeFileSync('dist/semantic.css', output)
-```
-
-### Access Colors Directly in JavaScript
-
-```ts
-import blue from '@diskette/palette/colors/blue'
-
-// Use in CSS-in-JS libraries
-const styles = {
-  button: {
-    backgroundColor: blue.srgb.light.blue9,
-    color: blue.contrast,
-    '&:hover': {
-      backgroundColor: blue.srgb.light.blue10,
-    },
-  },
-}
-
-// Use P3 colors for wider gamut displays
-const p3Styles = {
-  button: {
-    backgroundColor: blue.p3.light.blue9,
-  },
-}
-
-// Access surface colors for overlays
-const overlay = {
-  backgroundColor: blue.surface.srgb.light, // '#f1f9ffcc'
-}
-```
-
-### NPM Script Integration
-
-```json
-{
-  "scripts": {
-    "build:css": "tsx scripts/generate-css.ts",
-    "build": "pnpm build:css && vite build"
-  }
-}
-```
-
 ## Credits
 
 Color values are derived from [Radix Colors](https://www.radix-ui.com/colors) by [WorkOS](https://workos.com/).

package/dist/cli.d.ts

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

package/dist/cli.js

@@ -0,0 +1,90 @@
+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 { 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({
+        message,
+        validate(value) {
+            if (!value) {
+                return 'Please enter a path';
+            }
+            try {
+                const stat = statSync(resolve(process.cwd(), value));
+                if (!stat.isDirectory()) {
+                    return 'Path must be a directory, not a file';
+                }
+            }
+            catch { }
+        },
+    });
+    if (p.isCancel(outputDir))
+        cancel();
+    return outputDir;
+}
+async function main() {
+    p.intro('Palette CSS Generator');
+    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(generateAccents))
+        cancel();
+    const outputDir = await askOutputDir('Output directory:');
+    // --- Generate Files ---
+    const s = p.spinner();
+    s.start('Generating CSS files...');
+    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(`${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();
+    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,10 @@
 {
   "name": "@diskette/palette",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.12.0",
+  "bin": {
+    "palette": "./dist/cli.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -39,6 +42,9 @@
     "singleQuote": true
   },
   "license": "MIT",
+  "dependencies": {
+    "@clack/prompts": "1.0.0-alpha.7"
+  },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
     "typecheck": "tsc",

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};
-    }
-  }
-}
-`;
-    },
-};