@diskette/palette 0.12.0 → 0.13.0

package/dist/cli.js

@@ -64,8 +64,6 @@ async function main() {
         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) {
@@ -84,7 +82,18 @@ async function main() {
         const grays = css.grays(selectedGrayColors, 'diskette-palette');
         writeFileSync(`${outputPath}/accents.css`, `${accents}\n${grays}`);
     }
-    s.stop();
+    // Generate Tailwind theme with imports
+    const imports = [
+        ...selectedColors.flatMap((name) => [
+            `./${name}.css`,
+            `./${name}-dark.css`,
+        ]),
+        './black-alpha.css',
+        './white-alpha.css',
+    ]
+        .map((path) => `@import '${path}';`)
+        .join('\n');
+    writeFileSync(`${outputPath}/index.css`, `${imports}\n\n${css.tailwind(['white', 'black', 'accent', ...selectedColors])}`);
     p.outro(`CSS saved to ${outputPath}`);
 }
 main().catch(console.error);

package/dist/css.d.ts

@@ -9,22 +9,31 @@ type PaletteOptions = {
     /** Include alpha scale variables (e.g., --amber-a1). Defaults to false */
     alpha?: boolean;
 };
+declare function palette(name: string, config: AnyPalette, options?: PaletteOptions): string;
+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;
 export declare const css: {
     /**
      * Generate combined CSS for scale variables and semantic tokens
      */
-    palette(name: string, config: AnyPalette, options?: PaletteOptions): string;
+    palette: typeof palette;
     /**
      * Generate CSS for alpha-only color scales
      */
-    alpha(config: AlphaConfig): string;
+    alpha: typeof alpha;
     /**
      * Generate CSS for accent color data attribute selectors
      */
-    accents(colorNames: string[]): string;
+    accents: typeof accents;
     /**
      * Generate CSS for gray color data attribute selectors
      */
-    grays(names: readonly string[], className: string): string;
+    grays: typeof grays;
+    /**
+     * Generate Tailwind v4 @theme inline CSS mapping palette variables
+     */
+    tailwind: typeof tailwind;
 };
 export {};

package/dist/css.js

@@ -1,126 +1,145 @@
+import { formatNestedBlock, formatP3, formatRule, schemeSelector, toVarName, } from "./utils.js";
 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)})`,
-            ]));
+function 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}`]}`);
         }
-        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 = [];
+        if (alpha) {
             for (const n of steps) {
-                srgb.push(`--${name}-${n}: ${srgbScale[`${name}${n}`]}`);
-                p3.push(`--${name}-${n}: ${p3Scale[`${name}${n}`]}`);
+                srgb.push(`--${name}-a${n}: ${srgbScale[`${name}A${n}`]}`);
+                p3.push(`--${name}-a${n}: ${p3Scale[`${name}A${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) {
+        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';
+}
+function 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';
+}
+function accents(colorNames) {
+    const output = colorNames.map((colorName) => {
         const srgb = [];
-        const p3 = [];
-        for (const key in config.srgb) {
-            srgb.push(`${toVarName(key)}: ${config.srgb[key]}`);
+        const alpha = [];
+        for (const n of steps) {
+            srgb.push(`--accent-${n}: var(--${colorName}-${n})`);
+            alpha.push(`--accent-a${n}: var(--${colorName}-a${n})`);
         }
-        for (const key in config.p3) {
-            p3.push(`${toVarName(key)}: ${config.p3[key]}`);
+        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';
+}
+function 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})`);
         }
-        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 = [];
+        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`;
+}
+function tailwind(colorNames) {
+    const blocks = [];
+    for (const name of colorNames) {
+        const declarations = [];
+        const isAlphaOnly = name === 'white' || name === 'black';
+        if (!isAlphaOnly) {
             for (const n of steps) {
-                srgb.push(`--accent-${n}: var(--${colorName}-${n})`);
-                alpha.push(`--accent-a${n}: var(--${colorName}-a${n})`);
+                declarations.push(`--color-${name}-${n}: var(--${name}-${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})`);
+            declarations.push(`--color-${name}-a${n}: var(--${name}-a${n})`);
+        }
+        if (!isAlphaOnly) {
+            declarations.push(`--color-${name}-contrast: var(--${name}-contrast)`, `--color-${name}-surface: var(--${name}-surface)`, `--color-${name}-track: var(--${name}-track)`, `--color-${name}-indicator: var(--${name}-indicator)`);
         }
-        output.push(formatRule(`[data-accent-color]:where(:not([data-accent-color=''], [data-accent-color='gray']))`, [...focus, ...focusAlpha]));
-        return output.join('\n\n') + '\n';
-    },
+        blocks.push(declarations.join(';\n  '));
+    }
+    return `@theme inline {\n  ${blocks.join(';\n\n  ')};\n}\n`;
+}
+export const css = {
+    /**
+     * Generate combined CSS for scale variables and semantic tokens
+     */
+    palette,
+    /**
+     * Generate CSS for alpha-only color scales
+     */
+    alpha,
+    /**
+     * Generate CSS for accent color data attribute selectors
+     */
+    accents,
     /**
      * 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`;
-    },
+    grays,
+    /**
+     * Generate Tailwind v4 @theme inline CSS mapping palette variables
+     */
+    tailwind,
 };

package/dist/utils.d.ts

@@ -1,2 +1,10 @@
 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;
+/** Convert "amber9" to "--amber-9" or "amberA9" to "--amber-a9" */
+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;

package/dist/utils.js

@@ -35,3 +35,11 @@ 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  }`;

package/package.json

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