@diskette/palette 0.10.0 → 0.11.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,135 @@
+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;
+    });
+}
+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)) {
+        p.cancel('Operation cancelled.');
+        process.exit(0);
+    }
+    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?',
+    });
+    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:');
+    }
+    // --- 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));
+    }
+    // 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));
+        }
+    }
+    s.stop();
+    let message = `Color scales saved to ${scalesPath}`;
+    if (semanticOutputDir) {
+        message += `\nSemantic tokens saved to ${resolve(process.cwd(), semanticOutputDir)}`;
+    }
+    p.outro(message);
+}
+main().catch(console.error);

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@diskette/palette",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.11.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",