@diskette/palette 0.25.1 → 0.26.0

package/dist/cli/cli.js

@@ -26,7 +26,7 @@ const grayOptions = grayOptionsList.map((c) => {
     return { value: c, label: `${swatch}${capitalize(c)}` };
 });
 async function main() {
-    p.intro(`palette v0.25.1`);
+    p.intro(`palette v0.26.0`);
     const results = await p.group({
         colors: () => p.groupMultiselect({
             message: 'Select accent colors',

package/dist/types.d.ts

@@ -34,9 +34,40 @@ 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 interface ColorSteps {
+    /** App background, striped table background, canvas area */
+    step1: string;
+    /** Subtle component background: cards, sidebars, code blocks */
+    step2: string;
+    /** UI component background (normal state) */
+    step3: string;
+    /** UI component background (hover state) */
+    step4: string;
+    /** UI component background (pressed/selected state) */
+    step5: string;
+    /** Subtle borders: sidebars, headers, cards, alerts, separators */
+    step6: string;
+    /** Subtle borders on interactive components */
+    step7: string;
+    /** Stronger borders on interactive components, focus rings */
+    step8: string;
+    /** Solid backgrounds: headers, buttons, graphics, overlays. Highest chroma. */
+    step9: string;
+    /** Solid background hover state (where step9 is normal state) */
+    step10: string;
+    /** Low-contrast text */
+    step11: string;
+    /** High-contrast text */
+    step12: string;
+    /** Foreground color for text on solid backgrounds (step9/10). Usually "white" or "black". */
+    contrast: string;
+    /** Accent color for indicators, badges, and status dots */
+    indicator: string;
+    /** Accent color for slider tracks and progress bars */
+    track: string;
+    /** Translucent surface color for cards and overlays */
+    surface: string;
+}
 export type AlphaScale<C extends 'white' | 'back'> = {
     [K in `${C}A${Steps}`]: string;
 };

package/dist/utils.d.ts

@@ -59,3 +59,11 @@ export declare function getColorModes(color: Color, opts?: {
     light: ColorSteps;
     dark: ColorSteps;
 };
+export declare function getColorPair(color: AccentColor, opts?: {
+    mode?: 'light' | 'dark';
+    variant?: 'alpha' | 'solid';
+    type?: 'p3' | 'srgb';
+}): {
+    accent: ColorSteps;
+    gray: ColorSteps;
+};

package/dist/utils.js

@@ -85,15 +85,27 @@ export function getMatchingGrayColor(accentColor) {
  */
 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 colorDef = colors[color];
+    const scales = colorDef[mode][type][variant];
+    const result = scales.reduce((acc, current, index) => {
         const key = `step${index + 1}`;
         acc[key] = current;
         return acc;
     }, {});
+    result.contrast = colorDef.contrast;
+    result.indicator = scales[colorDef.indicator - 1];
+    result.track = scales[colorDef.track - 1];
+    result.surface = colorDef.surface[mode][type];
+    return result;
 }
 export function getColorModes(color, opts) {
     const light = getColor(color, opts);
     const dark = getColor(color, opts);
     return { light, dark };
 }
+export function getColorPair(color, opts) {
+    const accent = getColor(color, opts);
+    const grayName = getMatchingGrayColor(color);
+    const gray = getColor(grayName, opts);
+    return { accent, gray };
+}

package/package.json

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