@poupe/theme-builder/dist/core.mjs

Design token management and theme generation system for Poupe UI framework

import { unsafeKeys } from '@poupe/css';
export { formatCSSRules, formatCSSRulesArray, generateCSSRules, generateCSSRulesArray } from '@poupe/css';
import { q as colord, v as hctFromColord, h as hct } from './shared/theme-builder.BWnUhZKi.mjs';
export { k as argb, g as argbFromColord, d as argbFromHct, f as argbFromHctColor, e as argbFromRgbaColor, j as argbFromString, L as colorFormatter, l as colordFromArgb, m as colordFromHct, o as colordFromHctColor, p as colordFromString, J as defaultColors, t as hctFromArgb, u as hctFromRgbaColor, x as hctFromString, G as hexFromArgb, F as hexFromColord, H as hexFromHct, I as hexFromHctColor, M as hexString, E as hsl, A as hslFromArgb, z as hslFromColord, B as hslFromHct, C as hslFromHctColor, D as hslFromString, N as hslString, i as isObjectColor, n as normalizeAlpha, a as rgbFromRgbaColor, c as rgba, b as rgbaFromHctColor, r as rgbaString, s as splitArgb, y as splitHct, K as withKnownColor, w as withNormalizedAlpha } from './shared/theme-builder.BWnUhZKi.mjs';
import { Blend, TonalPalette } from '@poupe/material-color-utilities';
export { DynamicScheme, Hct, TonalPalette, Variant } from '@poupe/material-color-utilities';
export { Colord } from 'colord';
import 'colord/plugins/mix';

const corePaletteKeys = [
  "primary",
  "secondary",
  "tertiary",
  "neutral",
  "neutralVariant",
  "error"
];

function makeColorMix(base, other, ratios) {
  const c0 = colord(base);
  const c1 = colord(other);
  if (typeof ratios === "number") {
    const c = c0.mix(c1, ratios);
    return hctFromColord(c);
  }
  if (Array.isArray(ratios)) {
    const out2 = [];
    for (const r of ratios) {
      const c = c0.mix(c1, r);
      out2.push(hctFromColord(c));
    }
    return out2;
  }
  const out = {};
  for (const k of unsafeKeys(ratios)) {
    const c = c0.mix(c1, ratios[k]);
    out[k] = hctFromColord(c);
  }
  return out;
}

function makeTonalPalette(color, harmonizeTo, isKeyColor = true) {
  let c = hct(color);
  if (harmonizeTo) {
    const c1 = Blend.harmonize(c.toInt(), harmonizeTo.toInt());
    c = hct(c1);
  }
  if (isKeyColor)
    return TonalPalette.fromHct(c);
  return TonalPalette.fromHueAndChroma(c.hue, c.chroma);
}
function makeCustomColor(color, harmonizeTo, name, isKeyColor = true) {
  const tones = makeTonalPalette(color, harmonizeTo, isKeyColor);
  return makeCustomColorFromPalette(tones, name);
}
function makeCustomColorFromPalette(tones, name) {
  return {
    name,
    tones,
    light: {
      color: tones.getHct(40),
      onColor: tones.getHct(100),
      colorContainer: tones.getHct(90),
      onColorContainer: tones.getHct(10)
    },
    dark: {
      color: tones.getHct(80),
      onColor: tones.getHct(20),
      colorContainer: tones.getHct(30),
      onColorContainer: tones.getHct(90)
    }
  };
}

const stateLayerOpacities = {
  hover: 0.08,
  focus: 0.12,
  pressed: 0.12,
  dragged: 0.16,
  disabled: 0.12,
  onDisabled: 0.38
};
function getStateColorMixParams(colorName, state, prefix = "") {
  const opacity = stateLayerOpacities[state];
  const isOnColor = colorName.startsWith("on-");
  const actualOpacity = state === "disabled" && isOnColor ? stateLayerOpacities.onDisabled : opacity;
  let baseColor;
  let onColor;
  if (isOnColor) {
    baseColor = colorName.replace("on-", "");
    onColor = colorName;
  } else {
    baseColor = colorName;
    onColor = `on-${colorName}`;
  }
  return {
    state,
    baseColor: prefix ? `${prefix}${baseColor}` : baseColor,
    onColor: prefix ? `${prefix}${onColor}` : onColor,
    opacityPercent: Math.round(actualOpacity * 100)
  };
}
function makeStateLayerColors(baseColor, onColor) {
  const base = hct(baseColor);
  const on = hct(onColor);
  return makeColorMix(base, on, {
    hover: stateLayerOpacities.hover,
    focus: stateLayerOpacities.focus,
    pressed: stateLayerOpacities.pressed,
    dragged: stateLayerOpacities.dragged,
    disabled: stateLayerOpacities.disabled,
    onDisabled: stateLayerOpacities.onDisabled
  });
}
function makeStateVariants(colors, onColors) {
  const result = {};
  for (const colorName in colors) {
    const baseColor = colors[colorName];
    const onColorKey = `on-${colorName}`;
    const onColor = onColors[onColorKey];
    if (!onColor) {
      throw new Error(`Missing on-color for ${colorName}. Expected key: ${onColorKey}`);
    }
    const states = makeStateLayerColors(baseColor, onColor);
    result[`${colorName}-hover`] = states.hover;
    result[`${colorName}-focus`] = states.focus;
    result[`${colorName}-pressed`] = states.pressed;
    result[`${colorName}-dragged`] = states.dragged;
    result[`${colorName}-disabled`] = states.disabled;
    result[`on-${colorName}-disabled`] = states.onDisabled;
  }
  return result;
}

const hexColorPattern = /^#([\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i;
const isHexColor = (s = "") => !!hexColorPattern.test(s || "");

export { colord, corePaletteKeys, getStateColorMixParams, hct, hctFromColord, hexColorPattern, isHexColor, makeColorMix, makeCustomColor, makeCustomColorFromPalette, makeStateLayerColors, makeStateVariants, makeTonalPalette, stateLayerOpacities };
//# sourceMappingURL=core.mjs.map