@diskette/palette 0.21.0 → 0.21.2

package/dist/cli/cli.js

@@ -1,10 +1,10 @@
 import { defineCommand, runMain } from 'citty';
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
-import { dirname, relative, resolve } from 'node:path';
+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";
+import { getPackageJson } from "./utils.js";
 const alphaColors = ['blackAlpha', 'whiteAlpha'];
 // Combined list of all colors (deduplicated since 'gray' appears in both)
 const allColors = [
@@ -34,6 +34,11 @@ const main = defineCommand({
             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',
+        },
     },
     run({ args }) {
         const selected = args._.filter((c) => allColors.includes(c));
@@ -56,7 +61,10 @@ const main = defineCommand({
             const accentColorNames = selected.filter((c) => !alphaColors.includes(c));
             writeIfNotExists(`${outputPath}/accents.css`, css.accents(accentColorNames));
         }
-        const path = relative(dirname(packageJsonPath), resolve(outputPath));
+        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}`);
     },
 });

package/dist/cli/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * get package.json content from startDir
+ * @param cwd
+ * @returns package.json content
+ */
+export declare const getPackageJson: (cwd: string) => {
+    pkg: any;
+    packageJsonPath: string;
+} | undefined;

package/dist/cli/utils.js

@@ -0,0 +1,44 @@
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import * as url from 'node:url';
+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/dist/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
@@ -36,5 +40,5 @@ export declare const css: {
      */
     tailwind: typeof tailwind;
 };
-export declare function applyColorVars(prefix: 'accent' | 'gray', color: PaletteColor<Color>, theme: 'light' | 'dark', space: 'srgb' | 'p3', set: (name: string, value: string) => void): void;
+export declare function applyColorVars(prefix: 'accent' | 'gray', color: PaletteColor<Color>, theme: 'light' | 'dark', space: 'srgb' | 'p3', set: (name: `--${string}`, value: string) => void): void;
 export {};

package/dist/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

@@ -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

@@ -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.0",
+  "version": "0.21.2",
   "bin": {
     "palette": "./dist/cli/cli.js"
   },