@diskette/palette 0.15.0 → 0.18.0

package/dist/cli/cli.js

@@ -0,0 +1,11 @@
+import { cli } from 'cleye';
+import { generate } from "./commands/generate.js";
+import { list } from "./commands/list.js";
+const arg = cli({
+    name: 'palette',
+    // version: pkg.version,
+    commands: [generate, list],
+});
+if (!arg.command) {
+    arg.showHelp();
+}

package/dist/cli/commands/generate.d.ts

@@ -0,0 +1,64 @@
+export declare const generate: import("cleye").Command<{
+    name: "generate";
+    alias: "gen";
+    parameters: "[colors]"[];
+    flags: {
+        grays: {
+            type: StringConstructor;
+            alias: string;
+            description: string;
+        };
+        accents: {
+            type: BooleanConstructor;
+            alias: string;
+            description: string;
+            default: boolean;
+        };
+        output: {
+            type: StringConstructor;
+            alias: string;
+            description: string;
+        };
+    };
+    help: {
+        description: string;
+        examples: string[];
+    };
+}, {
+    command: "generate";
+} & import("type-flag").TypeFlag<{
+    grays: {
+        type: StringConstructor;
+        alias: string;
+        description: string;
+    };
+    accents: {
+        type: BooleanConstructor;
+        alias: string;
+        description: string;
+        default: boolean;
+    };
+    output: {
+        type: StringConstructor;
+        alias: string;
+        description: string;
+    };
+} & {
+    help: BooleanConstructor;
+}> & {
+    _: {
+        colors: string | undefined;
+    };
+    showHelp: (options?: {
+        version?: string;
+        description?: string;
+        usage?: false | string | string[];
+        examples?: string | string[];
+        render?: (nodes: {
+            id?: string;
+            type: keyof import("cleye").Renderers;
+            data: any;
+        }[], renderers: import("cleye").Renderers) => string;
+    }) => void;
+    showVersion: () => void;
+}>;

package/dist/cli/commands/generate.js

@@ -0,0 +1,87 @@
+import { command } from 'cleye';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { blackAlpha, whiteAlpha } from "../../colors/index.js";
+import { css } from "../../css.js";
+import { accentColors, colors, grayColors } from "../../index.js";
+function parseColors(input, available) {
+    if (!input)
+        return [];
+    if (input === 'all')
+        return [...available];
+    return input.split(',').filter((c) => available.includes(c));
+}
+export const generate = command({
+    name: 'generate',
+    alias: 'gen',
+    parameters: ['[colors]'],
+    flags: {
+        grays: {
+            type: String,
+            alias: 'g',
+            description: 'Gray colors to generate (comma-separated or "all")',
+        },
+        accents: {
+            type: Boolean,
+            alias: 'a',
+            description: 'Generate accents.css with semantic accent tokens',
+            default: false,
+        },
+        output: {
+            type: String,
+            alias: 'o',
+            description: 'Output directory',
+        },
+    },
+    help: {
+        description: 'Generate CSS files for color palettes',
+        examples: [
+            'palette generate blue,red -g slate -a -o ./styles',
+            'palette gen all -g all -a -o ./styles',
+        ],
+    },
+}, (argv) => {
+    if (!argv.flags.output) {
+        console.error('Error: --output (-o) is required');
+        process.exit(1);
+    }
+    const selectedAccentColors = parseColors(argv._.colors, accentColors);
+    const selectedGrayColors = parseColors(argv.flags.grays, grayColors.filter((g) => g !== 'gray'));
+    const selectedColors = [...selectedAccentColors, ...selectedGrayColors];
+    if (selectedColors.length === 0) {
+        console.error('No colors selected. Use positional args or --grays flag.');
+        console.error('Run "palette list" to see available colors.');
+        process.exit(1);
+    }
+    const outputPath = resolve(process.cwd(), argv.flags.output);
+    mkdirSync(outputPath, { recursive: true });
+    for (const name of selectedColors) {
+        const palette = colors[name];
+        writeFileSync(`${outputPath}/${name}.css`, css.palette(name, palette, { schemes: ['light'], alpha: true }));
+        writeFileSync(`${outputPath}/${name}-dark.css`, css.palette(name, palette, { schemes: ['dark'], alpha: true }));
+        console.log(`  ${name}.css, ${name}-dark.css`);
+    }
+    writeFileSync(`${outputPath}/black-alpha.css`, css.alpha(blackAlpha));
+    writeFileSync(`${outputPath}/white-alpha.css`, css.alpha(whiteAlpha));
+    console.log('  black-alpha.css, white-alpha.css');
+    if (argv.flags.accents) {
+        const accents = css.accents([...selectedAccentColors]);
+        const grays = css.grays(selectedGrayColors, 'diskette-palette');
+        writeFileSync(`${outputPath}/accents.css`, `${accents}\n${grays}`);
+        console.log('  accents.css');
+    }
+    const imports = [
+        ...(argv.flags.accents ? ['./accents.css'] : []),
+        ...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])}`);
+    console.log('  index.css');
+    console.log(`\nCSS saved to ${outputPath}`);
+});

package/dist/cli/commands/list.d.ts

@@ -0,0 +1,48 @@
+export declare const list: import("cleye").Command<{
+    name: "list";
+    alias: "ls";
+    flags: {
+        accent: {
+            type: BooleanConstructor;
+            description: string;
+            default: boolean;
+        };
+        gray: {
+            type: BooleanConstructor;
+            description: string;
+            default: boolean;
+        };
+    };
+    help: {
+        description: string;
+    };
+}, {
+    command: "list";
+} & import("type-flag").TypeFlag<{
+    accent: {
+        type: BooleanConstructor;
+        description: string;
+        default: boolean;
+    };
+    gray: {
+        type: BooleanConstructor;
+        description: string;
+        default: boolean;
+    };
+} & {
+    help: BooleanConstructor;
+}> & {
+    _: {};
+    showHelp: (options?: {
+        version?: string;
+        description?: string;
+        usage?: false | string | string[];
+        examples?: string | string[];
+        render?: (nodes: {
+            id?: string;
+            type: keyof import("cleye").Renderers;
+            data: any;
+        }[], renderers: import("cleye").Renderers) => string;
+    }) => void;
+    showVersion: () => void;
+}>;

package/dist/cli/commands/list.js

@@ -0,0 +1,33 @@
+import { command } from 'cleye';
+import { accentColors, grayColors } from "../../index.js";
+export const list = command({
+    name: 'list',
+    alias: 'ls',
+    flags: {
+        accent: {
+            type: Boolean,
+            description: 'List only accent colors',
+            default: false,
+        },
+        gray: {
+            type: Boolean,
+            description: 'List only gray colors',
+            default: false,
+        },
+    },
+    help: {
+        description: 'List available colors',
+    },
+}, (argv) => {
+    const showAll = !argv.flags.accent && !argv.flags.gray;
+    if (showAll || argv.flags.accent) {
+        console.log('Accent colors:');
+        console.log(`  ${accentColors.join(', ')}`);
+    }
+    if (showAll)
+        console.log();
+    if (showAll || argv.flags.gray) {
+        console.log('Gray colors:');
+        console.log(`  ${grayColors.filter((g) => g !== 'gray').join(', ')}`);
+    }
+});

package/dist/colors/amber.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             amberA10: string;
             amberA11: string;
             amberA12: string;
-            surface: string;
         };
         dark: {
             amber1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             amberA10: string;
             amberA11: string;
             amberA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             amberA10: string;
             amberA11: string;
             amberA12: string;
-            surface: string;
         };
         dark: {
             amber1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             amberA10: string;
             amberA11: string;
             amberA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "amber";
 };
 export default _default;

package/dist/colors/amber.js

@@ -25,7 +25,6 @@ export default {
             amberA10: '#ffb300e7',
             amberA11: '#ab6400',
             amberA12: '#341500dd',
-            surface: '#fefae4cc',
         },
         dark: {
             amber1: '#16120c',
@@ -52,7 +51,6 @@ export default {
             amberA10: '#ffd60a',
             amberA11: '#ffca16',
             amberA12: '#ffe7b3',
-            surface: '#271f1380',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             amberA10: 'color(display-p3 0.945 0.643 0 / 0.726)',
             amberA11: 'color(display-p3 0.64 0.4 0)',
             amberA12: 'color(display-p3 0.294 0.208 0.145)',
-            surface: 'color(display-p3 0.9922 0.9843 0.902 / 0.8)',
         },
         dark: {
             amber1: 'color(display-p3 0.082 0.07 0.05)',
@@ -108,7 +105,6 @@ export default {
             amberA10: 'color(display-p3 1 0.871 0.149)',
             amberA11: 'color(display-p3 1 0.8 0.29)',
             amberA12: 'color(display-p3 0.984 0.909 0.726)',
-            surface: 'color(display-p3 0.1412 0.1176 0.0784 / 0.5)',
         },
     },
     contrast: '#21201c',

package/dist/colors/blue.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             blueA10: string;
             blueA11: string;
             blueA12: string;
-            surface: string;
         };
         dark: {
             blue1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             blueA10: string;
             blueA11: string;
             blueA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             blueA10: string;
             blueA11: string;
             blueA12: string;
-            surface: string;
         };
         dark: {
             blue1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             blueA10: string;
             blueA11: string;
             blueA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "blue";
 };
 export default _default;

package/dist/colors/blue.js

@@ -25,7 +25,6 @@ export default {
             blueA10: '#0086f0fa',
             blueA11: '#006dcbf2',
             blueA12: '#002359ee',
-            surface: '#f1f9ffcc',
         },
         dark: {
             blue1: '#0d1520',
@@ -52,7 +51,6 @@ export default {
             blueA10: '#3b9eff',
             blueA11: '#70b8ff',
             blueA12: '#c2e6ff',
-            surface: '#11213d80',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             blueA10: 'color(display-p3 0 0.376 0.886 / 0.765)',
             blueA11: 'color(display-p3 0.15 0.44 0.84)',
             blueA12: 'color(display-p3 0.102 0.193 0.379)',
-            surface: 'color(display-p3 0.9529 0.9765 0.9961 / 0.8)',
         },
         dark: {
             blue1: 'color(display-p3 0.057 0.081 0.122)',
@@ -108,7 +105,6 @@ export default {
             blueA10: 'color(display-p3 0.357 0.631 1 / 0.971)',
             blueA11: 'color(display-p3 0.49 0.72 1)',
             blueA12: 'color(display-p3 0.788 0.898 0.99)',
-            surface: 'color(display-p3 0.0706 0.1255 0.2196 / 0.5)',
         },
     },
     contrast: 'white',

package/dist/colors/bronze.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             bronzeA10: string;
             bronzeA11: string;
             bronzeA12: string;
-            surface: string;
         };
         dark: {
             bronze1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             bronzeA10: string;
             bronzeA11: string;
             bronzeA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             bronzeA10: string;
             bronzeA11: string;
             bronzeA12: string;
-            surface: string;
         };
         dark: {
             bronze1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             bronzeA10: string;
             bronzeA11: string;
             bronzeA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "bronze";
 };
 export default _default;

package/dist/colors/bronze.js

@@ -25,7 +25,6 @@ export default {
             bronzeA10: '#4c150097',
             bronzeA11: '#3d0f00ab',
             bronzeA12: '#1d0600d4',
-            surface: '#fdf5f3cc',
         },
         dark: {
             bronze1: '#141110',
@@ -52,7 +51,6 @@ export default {
             bronzeA10: '#fecab5a9',
             bronzeA11: '#ffd7c6d1',
             bronzeA12: '#fff1e9ec',
-            surface: '#27211d80',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             bronzeA10: 'color(display-p3 0.255 0.082 0 / 0.585)',
             bronzeA11: 'color(display-p3 0.471 0.373 0.336)',
             bronzeA12: 'color(display-p3 0.251 0.191 0.172)',
-            surface: 'color(display-p3 0.9843 0.9608 0.9529 / 0.8)',
         },
         dark: {
             bronze1: 'color(display-p3 0.076 0.067 0.063)',
@@ -108,7 +105,6 @@ export default {
             bronzeA10: 'color(display-p3 1 0.839 0.761 / 0.635)',
             bronzeA11: 'color(display-p3 0.81 0.707 0.655)',
             bronzeA12: 'color(display-p3 0.921 0.88 0.854)',
-            surface: 'color(display-p3 0.1412 0.1255 0.1176 / 0.5)',
         },
     },
     contrast: 'white',

package/dist/colors/brown.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             brownA10: string;
             brownA11: string;
             brownA12: string;
-            surface: string;
         };
         dark: {
             brown1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             brownA10: string;
             brownA11: string;
             brownA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             brownA10: string;
             brownA11: string;
             brownA12: string;
-            surface: string;
         };
         dark: {
             brown1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             brownA10: string;
             brownA11: string;
             brownA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "brown";
 };
 export default _default;

package/dist/colors/brown.js

@@ -25,7 +25,6 @@ export default {
             brownA10: '#723300ac',
             brownA11: '#522100b9',
             brownA12: '#140600d1',
-            surface: '#fbf8f4cc',
         },
         dark: {
             brown1: '#12110f',
@@ -52,7 +51,6 @@ export default {
             brownA10: '#ffc18cb3',
             brownA11: '#fed1aad9',
             brownA12: '#feecd4f2',
-            surface: '#271f1b80',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             brownA10: 'color(display-p3 0.388 0.188 0 / 0.655)',
             brownA11: 'color(display-p3 0.485 0.374 0.288)',
             brownA12: 'color(display-p3 0.236 0.202 0.183)',
-            surface: 'color(display-p3 0.9843 0.9725 0.9569 / 0.8)',
         },
         dark: {
             brown1: 'color(display-p3 0.071 0.067 0.059)',
@@ -108,7 +105,6 @@ export default {
             brownA10: 'color(display-p3 1 0.792 0.596 / 0.677)',
             brownA11: 'color(display-p3 0.835 0.715 0.597)',
             brownA12: 'color(display-p3 0.938 0.885 0.802)',
-            surface: 'color(display-p3 0.1412 0.1176 0.102 / 0.5)',
         },
     },
     contrast: 'white',

package/dist/colors/crimson.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             crimsonA10: string;
             crimsonA11: string;
             crimsonA12: string;
-            surface: string;
         };
         dark: {
             crimson1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             crimsonA10: string;
             crimsonA11: string;
             crimsonA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             crimsonA10: string;
             crimsonA11: string;
             crimsonA12: string;
-            surface: string;
         };
         dark: {
             crimson1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             crimsonA10: string;
             crimsonA11: string;
             crimsonA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "crimson";
 };
 export default _default;

package/dist/colors/crimson.js

@@ -25,7 +25,6 @@ export default {
             crimsonA10: '#d70056cb',
             crimsonA11: '#c4004fe2',
             crimsonA12: '#530026e9',
-            surface: '#fef5f8cc',
         },
         dark: {
             crimson1: '#191114',
@@ -52,7 +51,6 @@ export default {
             crimsonA10: '#ff5693ed',
             crimsonA11: '#ff92ad',
             crimsonA12: '#ffd5eafd',
-            surface: '#2f151f80',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             crimsonA10: 'color(display-p3 0.737 0 0.275 / 0.734)',
             crimsonA11: 'color(display-p3 0.731 0.195 0.388)',
             crimsonA12: 'color(display-p3 0.352 0.111 0.221)',
-            surface: 'color(display-p3 0.9922 0.9608 0.9725 / 0.8)',
         },
         dark: {
             crimson1: 'color(display-p3 0.093 0.068 0.078)',
@@ -108,7 +105,6 @@ export default {
             crimsonA10: 'color(display-p3 1 0.42 0.62 / 0.853)',
             crimsonA11: 'color(display-p3 1 0.56 0.66)',
             crimsonA12: 'color(display-p3 0.966 0.834 0.906)',
-            surface: 'color(display-p3 0.1647 0.0863 0.1176 / 0.5)',
         },
     },
     contrast: 'white',

package/dist/colors/cyan.d.ts

@@ -25,7 +25,6 @@ declare const _default: {
             cyanA10: string;
             cyanA11: string;
             cyanA12: string;
-            surface: string;
         };
         dark: {
             cyan1: string;
@@ -52,7 +51,6 @@ declare const _default: {
             cyanA10: string;
             cyanA11: string;
             cyanA12: string;
-            surface: string;
         };
     };
     p3: {
@@ -81,7 +79,6 @@ declare const _default: {
             cyanA10: string;
             cyanA11: string;
             cyanA12: string;
-            surface: string;
         };
         dark: {
             cyan1: string;
@@ -108,7 +105,6 @@ declare const _default: {
             cyanA10: string;
             cyanA11: string;
             cyanA12: string;
-            surface: string;
         };
     };
     contrast: string;
@@ -124,6 +120,6 @@ declare const _default: {
             dark: string;
         };
     };
-    name: string;
+    name: "cyan";
 };
 export default _default;

package/dist/colors/cyan.js

@@ -25,7 +25,6 @@ export default {
             cyanA10: '#0094b7f8',
             cyanA11: '#007491ef',
             cyanA12: '#00323ef2',
-            surface: '#eff9facc',
         },
         dark: {
             cyan1: '#0b161a',
@@ -52,7 +51,6 @@ export default {
             cyanA10: '#28d6ffcd',
             cyanA11: '#52e1fee5',
             cyanA12: '#bbf3fef7',
-            surface: '#11252d80',
         },
     },
     p3: {
@@ -81,7 +79,6 @@ export default {
             cyanA10: 'color(display-p3 0 0.435 0.608 / 0.738)',
             cyanA11: 'color(display-p3 0.08 0.48 0.63)',
             cyanA12: 'color(display-p3 0.108 0.232 0.277)',
-            surface: 'color(display-p3 0.9412 0.9765 0.9804 / 0.8)',
         },
         dark: {
             cyan1: 'color(display-p3 0.053 0.085 0.098)',
@@ -108,7 +105,6 @@ export default {
             cyanA10: 'color(display-p3 0.4 0.839 1 / 0.786)',
             cyanA11: 'color(display-p3 0.446 0.79 0.887)',
             cyanA12: 'color(display-p3 0.757 0.919 0.962)',
-            surface: 'color(display-p3 0.0784 0.1412 0.1725 / 0.5)',
         },
     },
     contrast: 'white',