@diskette/palette 0.26.3 → 0.28.0

package/dist/css.js

@@ -133,13 +133,18 @@ function tailwind(colorNames, options = {}) {
         }
         blocks.push(declarations.join(';\n  '));
     }
+    const grays = [];
+    const graysAlpha = [];
     const focus = [];
     const focusAlpha = [];
     for (const n of steps) {
         focus.push(`--color-focus-${n}: var(--accent-${n})`);
         focusAlpha.push(`--color-focus-a${n}: var(--accent-a${n})`);
+        grays.push(`--color-gray-${n}: var(--gray-${n})`);
+        graysAlpha.push(`--color-gray-a${n}: var(--gray-a${n})`);
     }
-    blocks.push(focus.join(';\n  '), focusAlpha.join(';\n  '));
+    grays.push('--color-gray-contrast: var(--gray-contrast);', '--color-gray-surface: var(--gray-surface);', '--color-gray-indicator: var(--gray-indicator);', '--color-gray-track: var(--gray-track);');
+    blocks.push(focus.join(';\n  '), focusAlpha.join(';\n  '), grays.join(';\n  '), graysAlpha.join(';\n  '));
     const importsBlock = imports.length > 0 ? imports.join('\n') + '\n\n' : '';
     return `${importsBlock}@theme inline {\n  ${blocks.join(';\n\n  ')};\n}\n`;
 }

package/dist/index.d.ts

@@ -1120,4 +1120,4 @@ export default colors;
 export { accentColors, grayColors } from './types.ts';
 export type { AccentColor, AlphaConfig, AlphaScale, Color, ColorScale, ColorSteps, GrayColor, PaletteColor, ScaleSteps, Steps, } from './types.ts';
 export { applyColorVars, css } from './css.ts';
-export { getColor, getColorModes, getMatchingGrayColor, toVarName, } from './utils.ts';
+export { getColorModes, getColorSteps, 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 { getColor, getColorModes, getMatchingGrayColor, toVarName, } from "./utils.js";
+export { getColorModes, getColorSteps, getMatchingGrayColor, toVarName, } from "./utils.js";

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { AccentColor, Color, ColorSteps, GrayColor } from './types.ts';
+import type { AccentColor, Color, ColorSteps, GrayColor, PaletteColor } 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;
@@ -47,23 +47,15 @@ export declare function getMatchingGrayColor(accentColor: AccentColor): GrayColo
  * - Step `11` is designed for low-contrast text.
  * - Step `12` is designed for high-contrast text.
  */
-export declare function getColor(color: Color, opts?: {
+export declare function getColorSteps(color: PaletteColor<Color>, opts?: {
     mode?: 'light' | 'dark';
     variant?: 'alpha' | 'solid';
     type?: 'p3' | 'srgb';
 }): ColorSteps;
-export declare function getColorModes(color: Color, opts?: {
+export declare function getColorModes(color: PaletteColor<Color>, opts?: {
     variant?: 'alpha' | 'solid';
     type?: 'p3' | 'srgb';
 }): {
     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

@@ -1,3 +1,4 @@
+import pink from "./colors/pink.js";
 import colors from "./index.js";
 export const LIGHT_SELECTOR = ':root, .light, .light-theme';
 export const DARK_SELECTOR = '.dark, .dark-theme';
@@ -83,29 +84,22 @@ export function getMatchingGrayColor(accentColor) {
  * - Step `11` is designed for low-contrast text.
  * - Step `12` is designed for high-contrast text.
  */
-export function getColor(color, opts) {
+export function getColorSteps(color, opts) {
     const { variant = 'solid', type = 'p3', mode = 'dark' } = opts ?? {};
-    const colorDef = colors[color];
-    const scales = colorDef[mode][type][variant];
+    const scales = color[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];
+    result.contrast = color.contrast;
+    result.indicator = scales[color.indicator - 1];
+    result.track = scales[color.track - 1];
+    result.surface = color.surface[mode][type];
     return result;
 }
 export function getColorModes(color, opts) {
-    const light = getColor(color, opts);
-    const dark = getColor(color, opts);
+    const light = getColorSteps(color, opts);
+    const dark = getColorSteps(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.26.3",
+  "version": "0.28.0",
   "bin": {
     "palette": "./dist/cli/cli.js"
   },