@diskette/palette 0.19.0 → 0.20.0

package/dist/css.js

@@ -7,27 +7,34 @@ function palette(config, options = {}) {
     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[n - 1]}`);
-            p3.push(`--${name}-${n}: ${p3Scale[n - 1]}`);
+            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[n + 11]}`);
-                p3.push(`--${name}-a${n}: ${p3Scale[n + 11]}`);
+                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));
     }
@@ -145,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]);
+}