@diskette/palette 0.9.2 → 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/dist/colors/amber.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/amber.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1412 0.1176 0.0784 / 0.5)',
         },
     },
+    name: 'amber',
 };

package/dist/colors/black-alpha.d.ts

@@ -27,5 +27,6 @@ declare const _default: {
         blackA11: string;
         blackA12: string;
     };
+    name: string;
 };
 export default _default;

package/dist/colors/black-alpha.js

@@ -27,4 +27,5 @@ export default {
         blackA11: 'color(display-p3 0 0 0 / 0.9)',
         blackA12: 'color(display-p3 0 0 0 / 0.95)',
     },
+    name: 'black-alpha',
 };

package/dist/colors/blue.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/blue.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.0706 0.1255 0.2196 / 0.5)',
         },
     },
+    name: 'blue',
 };

package/dist/colors/bronze.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/bronze.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1412 0.1255 0.1176 / 0.5)',
         },
     },
+    name: 'bronze',
 };

package/dist/colors/brown.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/brown.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1412 0.1176 0.102 / 0.5)',
         },
     },
+    name: 'brown',
 };

package/dist/colors/crimson.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/crimson.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1647 0.0863 0.1176 / 0.5)',
         },
     },
+    name: 'crimson',
 };

package/dist/colors/cyan.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/cyan.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.0784 0.1412 0.1725 / 0.5)',
         },
     },
+    name: 'cyan',
 };

package/dist/colors/gold.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/gold.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1412 0.1333 0.1098 / 0.5)',
         },
     },
+    name: 'gold',
 };

package/dist/colors/grass.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/grass.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.102 0.1333 0.102 / 0.5)',
         },
     },
+    name: 'grass',
 };

package/dist/colors/gray.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/gray.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1255 0.1255 0.1255 / 0.5)',
         },
     },
+    name: 'gray',
 };

package/dist/colors/green.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/green.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.0941 0.1412 0.1098 / 0.5)',
         },
     },
+    name: 'green',
 };

package/dist/colors/indigo.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/indigo.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.0941 0.1098 0.2196 / 0.5)',
         },
     },
+    name: 'indigo',
 };

package/dist/colors/iris.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/iris.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1098 0.102 0.2118 / 0.5)',
         },
     },
+    name: 'iris',
 };

package/dist/colors/jade.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/jade.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.0863 0.149 0.1176 / 0.5)',
         },
     },
+    name: 'jade',
 };

package/dist/colors/lime.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/lime.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1098 0.1255 0.0784 / 0.5)',
         },
     },
+    name: 'lime',
 };

package/dist/colors/mauve.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/mauve.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1333 0.1255 0.1333 / 0.5)',
         },
     },
+    name: 'mauve',
 };

package/dist/colors/mint.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/mint.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.0941 0.149 0.1412 / 0.5)',
         },
     },
+    name: 'mint',
 };

package/dist/colors/olive.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/olive.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1176 0.1255 0.1176 / 0.5)',
         },
     },
+    name: 'olive',
 };

package/dist/colors/orange.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/orange.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1412 0.1098 0.0706 / 0.5)',
         },
     },
+    name: 'orange',
 };

package/dist/colors/pink.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/pink.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1725 0.0784 0.149 / 0.5)',
         },
     },
+    name: 'pink',
 };

package/dist/colors/plum.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/plum.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1647 0.0863 0.1725 / 0.5)',
         },
     },
+    name: 'plum',
 };

package/dist/colors/purple.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/purple.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.149 0.0941 0.1961 / 0.5)',
         },
     },
+    name: 'purple',
 };

package/dist/colors/red.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/red.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1647 0.0863 0.0863 / 0.5)',
         },
     },
+    name: 'red',
 };

package/dist/colors/ruby.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/ruby.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1569 0.0941 0.1098 / 0.5)',
         },
     },
+    name: 'ruby',
 };

package/dist/colors/sage.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/sage.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1176 0.1255 0.1176 / 0.5)',
         },
     },
+    name: 'sage',
 };

package/dist/colors/sand.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/sand.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1255 0.1255 0.1255 / 0.5)',
         },
     },
+    name: 'sand',
 };

package/dist/colors/sky.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/sky.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.0863 0.1333 0.2196 / 0.5)',
         },
     },
+    name: 'sky',
 };

package/dist/colors/slate.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/slate.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1176 0.1255 0.1333 / 0.5)',
         },
     },
+    name: 'slate',
 };

package/dist/colors/teal.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/teal.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.0863 0.149 0.1412 / 0.5)',
         },
     },
+    name: 'teal',
 };

package/dist/colors/tomato.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/tomato.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1569 0.0941 0.0784 / 0.5)',
         },
     },
+    name: 'tomato',
 };

package/dist/colors/violet.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/violet.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1333 0.102 0.2118 / 0.5)',
         },
     },
+    name: 'violet',
 };

package/dist/colors/white-alpha.d.ts

@@ -1,31 +1,32 @@
 declare const _default: {
-    readonly srgb: {
-        readonly whiteA1: "rgba(255, 255, 255, 0.05)";
-        readonly whiteA2: "rgba(255, 255, 255, 0.1)";
-        readonly whiteA3: "rgba(255, 255, 255, 0.15)";
-        readonly whiteA4: "rgba(255, 255, 255, 0.2)";
-        readonly whiteA5: "rgba(255, 255, 255, 0.3)";
-        readonly whiteA6: "rgba(255, 255, 255, 0.4)";
-        readonly whiteA7: "rgba(255, 255, 255, 0.5)";
-        readonly whiteA8: "rgba(255, 255, 255, 0.6)";
-        readonly whiteA9: "rgba(255, 255, 255, 0.7)";
-        readonly whiteA10: "rgba(255, 255, 255, 0.8)";
-        readonly whiteA11: "rgba(255, 255, 255, 0.9)";
-        readonly whiteA12: "rgba(255, 255, 255, 0.95)";
+    srgb: {
+        whiteA1: string;
+        whiteA2: string;
+        whiteA3: string;
+        whiteA4: string;
+        whiteA5: string;
+        whiteA6: string;
+        whiteA7: string;
+        whiteA8: string;
+        whiteA9: string;
+        whiteA10: string;
+        whiteA11: string;
+        whiteA12: string;
     };
-    readonly p3: {
-        readonly whiteA1: "color(display-p3 1 1 1 / 0.05)";
-        readonly whiteA2: "color(display-p3 1 1 1 / 0.1)";
-        readonly whiteA3: "color(display-p3 1 1 1 / 0.15)";
-        readonly whiteA4: "color(display-p3 1 1 1 / 0.2)";
-        readonly whiteA5: "color(display-p3 1 1 1 / 0.3)";
-        readonly whiteA6: "color(display-p3 1 1 1 / 0.4)";
-        readonly whiteA7: "color(display-p3 1 1 1 / 0.5)";
-        readonly whiteA8: "color(display-p3 1 1 1 / 0.6)";
-        readonly whiteA9: "color(display-p3 1 1 1 / 0.7)";
-        readonly whiteA10: "color(display-p3 1 1 1 / 0.8)";
-        readonly whiteA11: "color(display-p3 1 1 1 / 0.9)";
-        readonly whiteA12: "color(display-p3 1 1 1 / 0.95)";
+    p3: {
+        whiteA1: string;
+        whiteA2: string;
+        whiteA3: string;
+        whiteA4: string;
+        whiteA5: string;
+        whiteA6: string;
+        whiteA7: string;
+        whiteA8: string;
+        whiteA9: string;
+        whiteA10: string;
+        whiteA11: string;
+        whiteA12: string;
     };
+    name: string;
 };
 export default _default;

package/dist/colors/white-alpha.js

@@ -27,4 +27,5 @@ export default {
         whiteA11: 'color(display-p3 1 1 1 / 0.9)',
         whiteA12: 'color(display-p3 1 1 1 / 0.95)',
     },
+    name: 'white-alpha',
 };

package/dist/colors/yellow.d.ts

@@ -124,5 +124,6 @@ declare const _default: {
             dark: string;
         };
     };
+    name: string;
 };
 export default _default;

package/dist/colors/yellow.js

@@ -124,4 +124,5 @@ export default {
             dark: 'color(display-p3 0.1333 0.1176 0.0706 / 0.5)',
         },
     },
+    name: 'yellow',
 };

package/dist/index.d.ts

@@ -124,6 +124,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -250,6 +251,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -376,6 +378,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -502,6 +505,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -628,6 +632,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -754,6 +759,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -880,6 +886,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -1006,6 +1013,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -1132,6 +1140,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -1258,6 +1267,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -1384,6 +1394,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -1510,6 +1521,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -1636,6 +1648,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -1762,6 +1775,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -1888,6 +1902,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -2014,6 +2029,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -2140,6 +2156,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -2266,6 +2283,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -2392,6 +2410,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -2518,6 +2537,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -2644,6 +2664,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -2770,6 +2791,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -2896,6 +2918,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -3022,6 +3045,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -3148,6 +3172,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -3274,6 +3299,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -3400,6 +3426,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -3526,6 +3553,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -3652,6 +3680,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -3778,6 +3807,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 } | {
     srgb: {
         light: {
@@ -3904,6 +3934,7 @@ export declare const colors: ({
             dark: string;
         };
     };
+    name: string;
 })[];
 export default colors;
 export { accentColors, grayColors } from './types.ts';

package/dist/types.d.ts

@@ -8,6 +8,7 @@ export type ColorScale<C extends Color> = {
     [K in `${C}${ScaleStep}` | `${C}A${ScaleStep}`]: string;
 };
 export type ColorPalette<C extends Color> = {
+    name: C;
     srgb: {
         light: ColorScale<C>;
         dark: ColorScale<C>;
@@ -34,6 +35,7 @@ export type AlphaScale<C extends 'white' | 'back'> = {
     [K in `${C}A${ScaleStep}`]: string;
 };
 export type AlphaConfig<C extends 'white' | 'back'> = {
+    name: C;
     srgb: AlphaScale<C>;
     p3: AlphaScale<C>;
 };

package/package.json

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