@diskette/palette 0.18.0 → 0.20.0

package/dist/colors/yellow.js

@@ -1,124 +1,141 @@
+import {} from "../types.js";
 export default {
-    srgb: {
+    name: 'yellow',
+    indicator: 9,
+    contrast: '#21201c',
+    track: 9,
+    surface: {
         light: {
-            yellow1: '#fdfdf9',
-            yellow2: '#fefce9',
-            yellow3: '#fffab8',
-            yellow4: '#fff394',
-            yellow5: '#ffe770',
-            yellow6: '#f3d768',
-            yellow7: '#e4c767',
-            yellow8: '#d5ae39',
-            yellow9: '#ffe629',
-            yellow10: '#ffdc00',
-            yellow11: '#9e6c00',
-            yellow12: '#473b1f',
-            yellowA1: '#aaaa0006',
-            yellowA2: '#f4dd0016',
-            yellowA3: '#ffee0047',
-            yellowA4: '#ffe3016b',
-            yellowA5: '#ffd5008f',
-            yellowA6: '#ebbc0097',
-            yellowA7: '#d2a10098',
-            yellowA8: '#c99700c6',
-            yellowA9: '#ffe100d6',
-            yellowA10: '#ffdc00',
-            yellowA11: '#9e6c00',
-            yellowA12: '#2e2000e0',
+            srgb: '#fefbe4cc',
+            p3: 'color(display-p3 0.9961 0.9922 0.902 / 0.8)',
         },
         dark: {
-            yellow1: '#14120b',
-            yellow2: '#1b180f',
-            yellow3: '#2d2305',
-            yellow4: '#362b00',
-            yellow5: '#433500',
-            yellow6: '#524202',
-            yellow7: '#665417',
-            yellow8: '#836a21',
-            yellow9: '#ffe629',
-            yellow10: '#ffff57',
-            yellow11: '#f5e147',
-            yellow12: '#f6eeb4',
-            yellowA1: '#d1510004',
-            yellowA2: '#f9b4000b',
-            yellowA3: '#ffaa001e',
-            yellowA4: '#fdb70028',
-            yellowA5: '#febb0036',
-            yellowA6: '#fec40046',
-            yellowA7: '#fdcb225c',
-            yellowA8: '#fdca327b',
-            yellowA9: '#ffe629',
-            yellowA10: '#ffff57',
-            yellowA11: '#fee949f5',
-            yellowA12: '#fef6baf6',
+            srgb: '#231f1380',
+            p3: 'color(display-p3 0.1333 0.1176 0.0706 / 0.5)',
         },
     },
-    p3: {
-        light: {
-            yellow1: 'color(display-p3 0.992 0.992 0.978)',
-            yellow2: 'color(display-p3 0.995 0.99 0.922)',
-            yellow3: 'color(display-p3 0.997 0.982 0.749)',
-            yellow4: 'color(display-p3 0.992 0.953 0.627)',
-            yellow5: 'color(display-p3 0.984 0.91 0.51)',
-            yellow6: 'color(display-p3 0.934 0.847 0.474)',
-            yellow7: 'color(display-p3 0.876 0.785 0.46)',
-            yellow8: 'color(display-p3 0.811 0.689 0.313)',
-            yellow9: 'color(display-p3 1 0.92 0.22)',
-            yellow10: 'color(display-p3 0.977 0.868 0.291)',
-            yellow11: 'color(display-p3 0.6 0.44 0)',
-            yellow12: 'color(display-p3 0.271 0.233 0.137)',
-            yellowA1: 'color(display-p3 0.675 0.675 0.024 / 0.024)',
-            yellowA2: 'color(display-p3 0.953 0.855 0.008 / 0.079)',
-            yellowA3: 'color(display-p3 0.988 0.925 0.004 / 0.251)',
-            yellowA4: 'color(display-p3 0.98 0.875 0.004 / 0.373)',
-            yellowA5: 'color(display-p3 0.969 0.816 0.004 / 0.491)',
-            yellowA6: 'color(display-p3 0.875 0.71 0 / 0.526)',
-            yellowA7: 'color(display-p3 0.769 0.604 0 / 0.542)',
-            yellowA8: 'color(display-p3 0.725 0.549 0 / 0.687)',
-            yellowA9: 'color(display-p3 1 0.898 0 / 0.781)',
-            yellowA10: 'color(display-p3 0.969 0.812 0 / 0.71)',
-            yellowA11: 'color(display-p3 0.6 0.44 0)',
-            yellowA12: 'color(display-p3 0.271 0.233 0.137)',
+    light: {
+        srgb: {
+            solid: [
+                '#fdfdf9',
+                '#fefce9',
+                '#fffab8',
+                '#fff394',
+                '#ffe770',
+                '#f3d768',
+                '#e4c767',
+                '#d5ae39',
+                '#ffe629',
+                '#ffdc00',
+                '#9e6c00',
+                '#473b1f',
+            ],
+            alpha: [
+                '#aaaa0006',
+                '#f4dd0016',
+                '#ffee0047',
+                '#ffe3016b',
+                '#ffd5008f',
+                '#ebbc0097',
+                '#d2a10098',
+                '#c99700c6',
+                '#ffe100d6',
+                '#ffdc00',
+                '#9e6c00',
+                '#2e2000e0',
+            ],
         },
-        dark: {
-            yellow1: 'color(display-p3 0.078 0.069 0.047)',
-            yellow2: 'color(display-p3 0.103 0.094 0.063)',
-            yellow3: 'color(display-p3 0.168 0.137 0.039)',
-            yellow4: 'color(display-p3 0.209 0.169 0)',
-            yellow5: 'color(display-p3 0.255 0.209 0)',
-            yellow6: 'color(display-p3 0.31 0.261 0.07)',
-            yellow7: 'color(display-p3 0.389 0.331 0.135)',
-            yellow8: 'color(display-p3 0.497 0.42 0.182)',
-            yellow9: 'color(display-p3 1 0.92 0.22)',
-            yellow10: 'color(display-p3 1 1 0.456)',
-            yellow11: 'color(display-p3 0.948 0.885 0.392)',
-            yellow12: 'color(display-p3 0.959 0.934 0.731)',
-            yellowA1: 'color(display-p3 0.973 0.369 0 / 0.013)',
-            yellowA2: 'color(display-p3 0.996 0.792 0 / 0.038)',
-            yellowA3: 'color(display-p3 0.996 0.71 0 / 0.11)',
-            yellowA4: 'color(display-p3 0.996 0.741 0 / 0.152)',
-            yellowA5: 'color(display-p3 0.996 0.765 0 / 0.202)',
-            yellowA6: 'color(display-p3 0.996 0.816 0.082 / 0.261)',
-            yellowA7: 'color(display-p3 1 0.831 0.263 / 0.345)',
-            yellowA8: 'color(display-p3 1 0.831 0.314 / 0.463)',
-            yellowA9: 'color(display-p3 1 0.922 0.22)',
-            yellowA10: 'color(display-p3 1 1 0.455)',
-            yellowA11: 'color(display-p3 0.948 0.885 0.392)',
-            yellowA12: 'color(display-p3 0.959 0.934 0.731)',
+        p3: {
+            solid: [
+                'color(display-p3 0.992 0.992 0.978)',
+                'color(display-p3 0.995 0.99 0.922)',
+                'color(display-p3 0.997 0.982 0.749)',
+                'color(display-p3 0.992 0.953 0.627)',
+                'color(display-p3 0.984 0.91 0.51)',
+                'color(display-p3 0.934 0.847 0.474)',
+                'color(display-p3 0.876 0.785 0.46)',
+                'color(display-p3 0.811 0.689 0.313)',
+                'color(display-p3 1 0.92 0.22)',
+                'color(display-p3 0.977 0.868 0.291)',
+                'color(display-p3 0.6 0.44 0)',
+                'color(display-p3 0.271 0.233 0.137)',
+            ],
+            alpha: [
+                'color(display-p3 0.675 0.675 0.024 / 0.024)',
+                'color(display-p3 0.953 0.855 0.008 / 0.079)',
+                'color(display-p3 0.988 0.925 0.004 / 0.251)',
+                'color(display-p3 0.98 0.875 0.004 / 0.373)',
+                'color(display-p3 0.969 0.816 0.004 / 0.491)',
+                'color(display-p3 0.875 0.71 0 / 0.526)',
+                'color(display-p3 0.769 0.604 0 / 0.542)',
+                'color(display-p3 0.725 0.549 0 / 0.687)',
+                'color(display-p3 1 0.898 0 / 0.781)',
+                'color(display-p3 0.969 0.812 0 / 0.71)',
+                'color(display-p3 0.6 0.44 0)',
+                'color(display-p3 0.271 0.233 0.137)',
+            ],
         },
     },
-    contrast: '#21201c',
-    indicator: 'yellow10',
-    track: 'yellow10',
-    surface: {
+    dark: {
         srgb: {
-            light: '#fefbe4cc',
-            dark: '#231f1380',
+            solid: [
+                '#14120b',
+                '#1b180f',
+                '#2d2305',
+                '#362b00',
+                '#433500',
+                '#524202',
+                '#665417',
+                '#836a21',
+                '#ffe629',
+                '#ffff57',
+                '#f5e147',
+                '#f6eeb4',
+            ],
+            alpha: [
+                '#d1510004',
+                '#f9b4000b',
+                '#ffaa001e',
+                '#fdb70028',
+                '#febb0036',
+                '#fec40046',
+                '#fdcb225c',
+                '#fdca327b',
+                '#ffe629',
+                '#ffff57',
+                '#fee949f5',
+                '#fef6baf6',
+            ],
         },
         p3: {
-            light: 'color(display-p3 0.9961 0.9922 0.902 / 0.8)',
-            dark: 'color(display-p3 0.1333 0.1176 0.0706 / 0.5)',
+            solid: [
+                'color(display-p3 0.078 0.069 0.047)',
+                'color(display-p3 0.103 0.094 0.063)',
+                'color(display-p3 0.168 0.137 0.039)',
+                'color(display-p3 0.209 0.169 0)',
+                'color(display-p3 0.255 0.209 0)',
+                'color(display-p3 0.31 0.261 0.07)',
+                'color(display-p3 0.389 0.331 0.135)',
+                'color(display-p3 0.497 0.42 0.182)',
+                'color(display-p3 1 0.92 0.22)',
+                'color(display-p3 1 1 0.456)',
+                'color(display-p3 0.948 0.885 0.392)',
+                'color(display-p3 0.959 0.934 0.731)',
+            ],
+            alpha: [
+                'color(display-p3 0.973 0.369 0 / 0.013)',
+                'color(display-p3 0.996 0.792 0 / 0.038)',
+                'color(display-p3 0.996 0.71 0 / 0.11)',
+                'color(display-p3 0.996 0.741 0 / 0.152)',
+                'color(display-p3 0.996 0.765 0 / 0.202)',
+                'color(display-p3 0.996 0.816 0.082 / 0.261)',
+                'color(display-p3 1 0.831 0.263 / 0.345)',
+                'color(display-p3 1 0.831 0.314 / 0.463)',
+                'color(display-p3 1 0.922 0.22)',
+                'color(display-p3 1 1 0.455)',
+                'color(display-p3 0.948 0.885 0.392)',
+                'color(display-p3 0.959 0.934 0.731)',
+            ],
         },
     },
-    name: 'yellow',
 };

package/dist/css.d.ts

@@ -1,4 +1,4 @@
-import type { AnyColorScale } from './types.ts';
+import type { Color, PaletteColor } from './types.ts';
 type AlphaConfig = {
     srgb: Record<string, string>;
     p3: Record<string, string>;
@@ -9,7 +9,7 @@ type PaletteOptions = {
     /** Include alpha scale variables (e.g., --amber-a1). Defaults to false */
     alpha?: boolean;
 };
-declare function palette(name: string, config: AnyColorScale, options?: PaletteOptions): string;
+declare function palette<C extends Color>(config: PaletteColor<C>, options?: PaletteOptions): string;
 declare function alpha(config: AlphaConfig): string;
 declare function accents(colorNames: string[]): string;
 declare function grays(names: readonly string[], className: string): string;
@@ -36,4 +36,5 @@ export declare const css: {
      */
     tailwind: typeof tailwind;
 };
+export declare function applyColorVars(prefix: 'accent' | 'gray', color: PaletteColor<Color>, theme: 'light' | 'dark', space: 'srgb' | 'p3', set: (name: string, value: string) => void): void;
 export {};

package/dist/css.js

@@ -1,32 +1,40 @@
 import { formatNestedBlock, formatP3, formatRule, schemeSelector, toVarName, } from "./utils.js";
 const steps = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-function palette(name, config, options = {}) {
+function palette(config, options = {}) {
     const { schemes = ['light'], alpha = false } = options;
+    const name = config.name;
     const output = [];
     if (schemes.includes('light')) {
         output.push(formatRule(':root', [
             `--${name}-contrast: ${config.contrast}`,
-            `--${name}-indicator: var(${toVarName(config.indicator)})`,
-            `--${name}-track: var(${toVarName(config.track)})`,
+            `--${name}-indicator: var(--${name}-${config.indicator})`,
+            `--${name}-track: var(--${name}-${config.track})`,
         ]));
     }
     for (const scheme of schemes) {
         const isLight = scheme === 'light';
         const selector = schemeSelector(scheme);
-        const srgbScale = isLight ? config.srgb.light : config.srgb.dark;
-        const p3Scale = isLight ? config.p3.light : config.p3.dark;
+        const schemeData = isLight ? config.light : config.dark;
+        const srgbScale = schemeData.srgb;
+        const p3Scale = schemeData.p3;
+        const surfaceSrgb = isLight
+            ? config.surface.light.srgb
+            : config.surface.dark.srgb;
+        const surfaceP3 = isLight ? config.surface.light.p3 : config.surface.dark.p3;
         const srgb = [];
         const p3 = [];
         for (const n of steps) {
-            srgb.push(`--${name}-${n}: ${srgbScale[`${name}${n}`]}`);
-            p3.push(`--${name}-${n}: ${p3Scale[`${name}${n}`]}`);
+            srgb.push(`--${name}-${n}: ${srgbScale.solid[n - 1]}`);
+            p3.push(`--${name}-${n}: ${p3Scale.solid[n - 1]}`);
         }
         if (alpha) {
             for (const n of steps) {
-                srgb.push(`--${name}-a${n}: ${srgbScale[`${name}A${n}`]}`);
-                p3.push(`--${name}-a${n}: ${p3Scale[`${name}A${n}`]}`);
+                srgb.push(`--${name}-a${n}: ${srgbScale.alpha[n - 1]}`);
+                p3.push(`--${name}-a${n}: ${p3Scale.alpha[n - 1]}`);
             }
         }
+        srgb.push(`--${name}-surface: ${surfaceSrgb}`);
+        p3.push(`--${name}-surface: ${surfaceP3}`);
         output.push(formatRule(selector, srgb));
         output.push(formatP3(selector, p3));
     }
@@ -144,3 +152,14 @@ export const css = {
      */
     tailwind,
 };
+export function applyColorVars(prefix, color, theme, space, set) {
+    const scale = color[theme][space];
+    for (let step = 0; step <= 12; step++) {
+        set(`--${prefix}-${step}`, scale.solid[step]);
+        set(`--${prefix}-a${step}`, scale.alpha[step]);
+    }
+    set(`--${prefix}-contrast`, color.contrast);
+    set(`--${prefix}-surface`, color.surface[theme][space]);
+    set(`--${prefix}-indicator`, scale.solid[color.indicator - 1]);
+    set(`--${prefix}-track`, scale.solid[color.track]);
+}