@diskette/palette 0.23.2 → 0.25.0

package/dist/cli/cli.js

@@ -2,47 +2,50 @@ import * as p from '@clack/prompts';
 import chalk from 'chalk';
 import { mkdirSync } from 'node:fs';
 import { relative, resolve } from 'node:path';
-import { accentColors, grayColors, } from "../types.js";
+import { accentColors, grayColors } from "../types.js";
 import { getMatchingGrayColor } from "../utils.js";
 import { buildOutputFiles, confirmOverwrites, writeOutputFiles, } from "./output.js";
-import { alphaColors, capitalize, getColorHex } from "./utils.js";
+import { alphaColors, capitalize, getColorHex, invariant } from "./utils.js";
+const accentOptionsList = [...accentColors];
+const alphaOptionsList = [...alphaColors];
 const accentOptions = {
-    Accents: accentColors
-        .filter((c) => c !== 'gray')
-        .map((c) => {
+    Accents: accentOptionsList.map((c) => {
         const hex = getColorHex(c);
         const swatch = hex ? chalk.bgHex(hex)('  ') + ' ' : '';
         return { value: c, label: `${swatch}${capitalize(c)}` };
     }),
-    Alpha: alphaColors.map((c) => {
+    Alpha: alphaOptionsList.map((c) => {
         const [label] = c.split('Alpha');
         return { value: c, label: capitalize(label) };
     }),
 };
-const grayOptions = grayColors.map((c) => {
+const grayOptionsList = [...grayColors];
+const grayOptions = grayOptionsList.map((c) => {
     const hex = getColorHex(c);
     const swatch = hex ? chalk.bgHex(hex)('  ') + ' ' : '';
     return { value: c, label: `${swatch}${capitalize(c)}` };
 });
 async function main() {
-    p.intro(`palette v0.23.2`);
+    p.intro(`palette v0.25.0`);
     const results = await p.group({
         colors: () => p.groupMultiselect({
             message: 'Select accent colors',
             options: accentOptions,
             required: true,
-            initialValues: [...alphaColors],
+            initialValues: alphaOptionsList,
         }),
         grays: ({ results }) => {
-            // Get matching grays for selected accent colors
-            const selectedAccents = (results.colors ?? []).filter((c) => accentColors.includes(c));
-            const matchingGrays = [
-                ...new Set(selectedAccents.map(getMatchingGrayColor)),
-            ];
+            const colors = results.colors ?? [];
+            const grays = [];
+            for (const color of colors) {
+                if (accentOptionsList.includes(color)) {
+                    grays.push(getMatchingGrayColor(color));
+                }
+            }
             return p.multiselect({
                 message: 'Select gray colors (natural pairings pre-selected)',
                 options: grayOptions,
-                initialValues: matchingGrays,
+                initialValues: grays,
                 required: false,
             });
         },
@@ -65,23 +68,15 @@ async function main() {
             process.exit(0);
         },
     });
-    const selectedGrays = (results.grays ?? []);
-    const allColors = [...results.colors, ...selectedGrays];
-    if (allColors.length === 0) {
-        p.cancel('No colors selected.');
-        process.exit(0);
-    }
+    // TODO: figure out why results.grays is typed as unknown
+    invariant(Array.isArray(results.grays) &&
+        results.grays.every((g) => typeof g === 'string'));
+    const grays = results.grays;
     const cwd = process.cwd();
     const outputPath = resolve(cwd, results.output);
     mkdirSync(outputPath, { recursive: true });
     // Build file list, confirm overwrites, and write
-    const allFiles = buildOutputFiles({
-        colors: allColors,
-        grays: selectedGrays,
-        outputPath,
-        accents: results.accents,
-        tailwind: results.tailwind,
-    });
+    const allFiles = buildOutputFiles(outputPath, { ...results, grays });
     const filesToWrite = await confirmOverwrites(allFiles);
     const s = p.spinner({ withGuide: false });
     const writeResults = writeOutputFiles(filesToWrite);

package/dist/cli/output.d.ts

@@ -8,12 +8,11 @@ export type WriteResult = {
     status: 'written' | 'skipped' | 'error';
     error?: Error;
 };
-export declare function buildOutputFiles(config: {
+export declare function buildOutputFiles(outputPath: string, results: {
     colors: string[];
     grays: string[];
-    outputPath: string;
-    accents?: boolean;
-    tailwind?: boolean;
+    accents: boolean;
+    tailwind: boolean;
 }): OutputFile[];
 export declare function confirmOverwrites(files: OutputFile[]): Promise<OutputFile[]>;
 export declare function writeOutputFiles(files: OutputFile[]): WriteResult[];

package/dist/cli/output.js

@@ -56,8 +56,9 @@ function tailwindFile(names, outputPath, accents) {
         content: () => css.tailwind(names, { accents }),
     };
 }
-export function buildOutputFiles(config) {
-    const { colors, grays, outputPath, accents, tailwind } = config;
+export function buildOutputFiles(outputPath, results) {
+    const { grays, accents, tailwind } = results;
+    const colors = [...results.colors, ...results.grays];
     const files = [];
     for (const name of colors) {
         if (isAlphaColor(name)) {
@@ -110,7 +111,11 @@ export function writeOutputFiles(files) {
             return { path: file.path, status: 'written' };
         }
         catch (error) {
-            return { path: file.path, status: 'error', error: error };
+            return {
+                path: file.path,
+                status: 'error',
+                error: error,
+            };
         }
     });
 }

package/dist/cli/utils.d.ts

@@ -1,14 +1,5 @@
 export declare const alphaColors: readonly ["blackAlpha", "whiteAlpha"];
 export type AlphaColor = (typeof alphaColors)[number];
-/**
- * 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 const capitalize: (s: string) => string;
 /** Get hex color (step 9) for a palette color */
 export declare const getColorHex: (name: string) => string | null;

package/dist/cli/utils.js

@@ -1,50 +1,6 @@
-import fs from 'node:fs';
-import { createRequire } from 'node:module';
-import path from 'node:path';
-import * as url from 'node:url';
 import * as colors from "../colors/index.js";
 import {} from "../types.js";
 export const alphaColors = ['blackAlpha', 'whiteAlpha'];
-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;
-    }
-};
 export const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 /** Get hex color (step 9) for a palette color */
 export const getColorHex = (name) => {

package/dist/css.js

@@ -80,7 +80,7 @@ function accents(colorNames) {
     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 = 'diskette-theme') {
+function grays(names, className = 'diskette-palette') {
     const grays = names.filter((n) => n !== 'gray');
     const blocks = grays.map((colorName) => {
         const srgb = [];

package/dist/index.d.ts

@@ -1118,6 +1118,6 @@ export declare const colors: {
 };
 export default colors;
 export { accentColors, grayColors } from './types.ts';
-export type { AccentColor, AlphaConfig, AlphaScale, Color, ColorScale, GrayColor, PaletteColor, ScaleSteps, } from './types.ts';
+export type { AccentColor, AlphaConfig, AlphaScale, Color, ColorScale, ColorSteps, GrayColor, PaletteColor, ScaleSteps, } from './types.ts';
 export { applyColorVars, css } from './css.ts';
-export { getMatchingGrayColor, toVarName } from './utils.ts';
+export { getColor, getColorModes, getMatchingGrayColor, toVarName, } from './utils.ts';

package/dist/index.js

@@ -65,4 +65,4 @@ export const colors = {
 export default colors;
 export { accentColors, grayColors } from "./types.js";
 export { applyColorVars, css } from "./css.js";
-export { getMatchingGrayColor, toVarName } from "./utils.js";
+export { getColor, getColorModes, getMatchingGrayColor, toVarName, } from "./utils.js";

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 export declare const grayColors: readonly ["gray", "mauve", "slate", "sage", "olive", "sand"];
 export type GrayColor = (typeof grayColors)[number];
-export declare const accentColors: readonly ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"];
+export declare const accentColors: readonly ["gray", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "bronze", "gold", "brown", "orange", "amber", "yellow", "lime", "mint", "sky"];
 export type AccentColor = (typeof accentColors)[number];
 export type Color = AccentColor | GrayColor;
 type Tuple<T, N extends number, R extends T[] = []> = R['length'] extends N ? R : Tuple<T, N, [...R, T]>;
@@ -33,8 +33,12 @@ export interface PaletteColor<C extends Color> {
         };
     };
 }
+export type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ColorSteps = {
+    [K in `step${Steps}`]: string;
+};
 export type AlphaScale<C extends 'white' | 'back'> = {
-    [K in `${C}A${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`]: string;
+    [K in `${C}A${Steps}`]: string;
 };
 export type AlphaConfig<C extends 'white' | 'back'> = {
     name: C;

package/dist/types.js

@@ -8,12 +8,6 @@ export const grayColors = [
 ];
 export const accentColors = [
     'gray',
-    'gold',
-    'bronze',
-    'brown',
-    'yellow',
-    'amber',
-    'orange',
     'tomato',
     'red',
     'ruby',
@@ -30,6 +24,12 @@ export const accentColors = [
     'jade',
     'green',
     'grass',
+    'bronze',
+    'gold',
+    'brown',
+    'orange',
+    'amber',
+    'yellow',
     'lime',
     'mint',
     'sky',

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { AccentColor, GrayColor } from './types.ts';
+import type { AccentColor, Color, ColorSteps, GrayColor } from './types.ts';
 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,3 +8,54 @@ 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;
 export declare function getMatchingGrayColor(accentColor: AccentColor): GrayColor;
+/**
+ * Steps `1` and `2` are designed for app backgrounds and subtle component backgrounds.
+ * Appropriate applications include:
+ * - Main app background
+ * - Striped table background
+ * - Code block background
+ * - Card background
+ * - Sidebar background
+ * - Canvas area background
+ *
+ * Steps `3`, `4`, and `5` are designed for UI component backgrounds.
+ * - Step `3` is for normal states.
+ * - Step `4` is for hover states.
+ * - Step `5` is for pressed or selected states.
+ * Steps `11` and `12`—which are designed for text
+ *
+ * Steps `6`, `7`, and `8` are designed for borders.
+ * - Step `6` is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
+ * - Step `7` is designed for subtle borders on interactive components.
+ * - Step `8` is designed for stronger borders on interactive components and focus rings. Most of the components use --focus-8 for the focus outline color.
+ *
+ * Step `9` has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because `9` is the purest step, it has a wide range of applications:
+ * - Website/App backgrounds
+ * - Website section backgrounds
+ * - Header backgrounds
+ * - Component backgrounds
+ * - Graphics/Logos
+ * - Overlays
+ * - Coloured shadows
+ * - Accent borders
+ *
+ * Step `10` is designed for component hover states, where step `9` is the component's normal state background.
+ *
+ * Most step 9 colors are designed for white foreground text. `Sky`, `Mint`, `Lime`, `Yellow`, and `Amber` are designed for dark foreground text and steps `9` and `10`.
+ *
+ * Steps `11` and `12` are designed for text.
+ * - Step `11` is designed for low-contrast text.
+ * - Step `12` is designed for high-contrast text.
+ */
+export declare function getColor(color: Color, opts?: {
+    mode?: 'light' | 'dark';
+    variant?: 'alpha' | 'solid';
+    type?: 'p3' | 'srgb';
+}): ColorSteps;
+export declare function getColorModes(color: Color, opts?: {
+    variant?: 'alpha' | 'solid';
+    type?: 'p3' | 'srgb';
+}): {
+    light: ColorSteps;
+    dark: ColorSteps;
+};

package/dist/utils.js

@@ -1,3 +1,4 @@
+import colors from "./index.js";
 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;
@@ -43,3 +44,56 @@ export function getMatchingGrayColor(accentColor) {
             return 'gray';
     }
 }
+/**
+ * Steps `1` and `2` are designed for app backgrounds and subtle component backgrounds.
+ * Appropriate applications include:
+ * - Main app background
+ * - Striped table background
+ * - Code block background
+ * - Card background
+ * - Sidebar background
+ * - Canvas area background
+ *
+ * Steps `3`, `4`, and `5` are designed for UI component backgrounds.
+ * - Step `3` is for normal states.
+ * - Step `4` is for hover states.
+ * - Step `5` is for pressed or selected states.
+ * Steps `11` and `12`—which are designed for text
+ *
+ * Steps `6`, `7`, and `8` are designed for borders.
+ * - Step `6` is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
+ * - Step `7` is designed for subtle borders on interactive components.
+ * - Step `8` is designed for stronger borders on interactive components and focus rings. Most of the components use --focus-8 for the focus outline color.
+ *
+ * Step `9` has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because `9` is the purest step, it has a wide range of applications:
+ * - Website/App backgrounds
+ * - Website section backgrounds
+ * - Header backgrounds
+ * - Component backgrounds
+ * - Graphics/Logos
+ * - Overlays
+ * - Coloured shadows
+ * - Accent borders
+ *
+ * Step `10` is designed for component hover states, where step `9` is the component's normal state background.
+ *
+ * Most step 9 colors are designed for white foreground text. `Sky`, `Mint`, `Lime`, `Yellow`, and `Amber` are designed for dark foreground text and steps `9` and `10`.
+ *
+ * Steps `11` and `12` are designed for text.
+ * - Step `11` is designed for low-contrast text.
+ * - Step `12` is designed for high-contrast text.
+ */
+export function getColor(color, opts) {
+    const { variant = 'solid', type = 'p3', mode = 'dark' } = opts ?? {};
+    const scales = colors[color][mode][type][variant];
+    return scales.reduce((acc, current, index) => {
+        const key = `step${index + 1}`;
+        acc[key] = current;
+        return acc;
+    }, {});
+}
+export function getColorModes(color, opts) {
+    const light = getColor(color, opts);
+    const dark = getColor(color, opts);
+    return { light, dark };
+}

package/package.json

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