@udixio/theme 1.1.0 → 1.3.0

package/dist/define-config-B1QPKKY_.js

@@ -0,0 +1,430 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { p as getRotatedHue, o as getPiecewiseHue, H as Hct, k as tonalSpotVariant } from "./loader-Bc0bstAD.js";
+import { TonalPalette } from "@material/material-color-utilities";
+const getExpressiveNeutralHue = (sourceColorHct) => {
+  const hue = getRotatedHue(
+    sourceColorHct,
+    [0, 71, 124, 253, 278, 300, 360],
+    [10, 0, 10, 0, 10, 0]
+  );
+  return hue;
+};
+const getExpressiveNeutralChroma = (sourceColorHct, isDark) => {
+  const neutralHue = getExpressiveNeutralHue(sourceColorHct);
+  return isDark ? Hct.isYellow(neutralHue) ? 6 : 14 : 18;
+};
+const expressiveVariant = {
+  name: "expressive",
+  palettes: {
+    primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 36 : 48),
+    secondary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColorHct,
+        [0, 105, 140, 204, 253, 278, 300, 333, 360],
+        [-160, 155, -100, 96, -96, -156, -165, -160]
+      ),
+      isDark ? 16 : 24
+    ),
+    tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColorHct,
+        [0, 105, 140, 204, 253, 278, 300, 333, 360],
+        [-165, 160, -105, 101, -101, -160, -170, -165]
+      ),
+      48
+    ),
+    neutral: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(
+      getExpressiveNeutralHue(sourceColorHct),
+      getExpressiveNeutralChroma(sourceColorHct, isDark)
+    ),
+    neutralVariant: ({ sourceColorHct, isDark }) => {
+      const expressiveNeutralHue = getExpressiveNeutralHue(sourceColorHct);
+      const expressiveNeutralChroma = getExpressiveNeutralChroma(
+        sourceColorHct,
+        isDark
+      );
+      return TonalPalette.fromHueAndChroma(
+        expressiveNeutralHue,
+        expressiveNeutralChroma * (expressiveNeutralHue >= 105 && expressiveNeutralHue < 125 ? 1.6 : 2.3)
+      );
+    },
+    error: ({ sourceColorHct }) => {
+      const errorHue = getPiecewiseHue(
+        sourceColorHct,
+        [0, 3, 13, 23, 33, 43, 153, 273, 360],
+        [12, 22, 32, 12, 22, 32, 22, 12]
+      );
+      return TonalPalette.fromHueAndChroma(errorHue, 64);
+    }
+  },
+  customPalettes: ({ colorHct, isDark }) => TonalPalette.fromHueAndChroma(
+    getRotatedHue(
+      colorHct,
+      [0, 105, 140, 204, 253, 278, 300, 333, 360],
+      [-160, 155, -100, 96, -96, -156, -165, -160]
+    ),
+    isDark ? 16 : 24
+  )
+};
+const neutralVariant = {
+  name: "neutral",
+  palettes: {
+    primary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
+      sourceColorHct.hue,
+      Hct.isBlue(sourceColorHct.hue) ? 12 : 8
+    ),
+    secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
+      sourceColorHct.hue,
+      Hct.isBlue(sourceColorHct.hue) ? 6 : 4
+    ),
+    tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColorHct,
+        [0, 38, 105, 161, 204, 278, 333, 360],
+        [-32, 26, 10, -39, 24, -15, -32]
+      ),
+      20
+    ),
+    neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4),
+    neutralVariant: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.4 * 2.2),
+    error: ({ sourceColorHct }) => {
+      const errorHue = getPiecewiseHue(
+        sourceColorHct,
+        [0, 3, 13, 23, 33, 43, 153, 273, 360],
+        [12, 22, 32, 12, 22, 32, 22, 12]
+      );
+      return TonalPalette.fromHueAndChroma(errorHue, 50);
+    }
+  },
+  customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(
+    colorHct.hue,
+    Hct.isBlue(colorHct.hue) ? 6 : 4
+  )
+};
+const getVibrantNeutralHue = (sourceColorHct) => {
+  return getRotatedHue(
+    sourceColorHct,
+    [0, 38, 105, 140, 333, 360],
+    [-14, 10, -14, 10, -14]
+  );
+};
+const getVibrantNeutralChroma = (sourceColorHct) => {
+  getVibrantNeutralHue(sourceColorHct);
+  return 28;
+};
+const vibrantVariant = {
+  name: "vibrant",
+  palettes: {
+    primary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
+    secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColorHct,
+        [0, 38, 105, 140, 333, 360],
+        [-14, 10, -14, 10, -14]
+      ),
+      56
+    ),
+    tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColorHct,
+        [0, 38, 71, 105, 140, 161, 253, 333, 360],
+        [-72, 35, 24, -24, 62, 50, 62, -72]
+      ),
+      56
+    ),
+    neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
+      getVibrantNeutralHue(sourceColorHct),
+      getVibrantNeutralChroma(sourceColorHct)
+    ),
+    neutralVariant: ({ sourceColorHct }) => {
+      const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
+      const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
+      return TonalPalette.fromHueAndChroma(
+        vibrantNeutralHue,
+        vibrantNeutralChroma * 1.29
+      );
+    },
+    error: ({ sourceColorHct }) => {
+      const errorHue = getPiecewiseHue(
+        sourceColorHct,
+        [0, 3, 13, 23, 33, 43, 153, 273, 360],
+        [12, 22, 32, 12, 22, 32, 22, 12]
+      );
+      return TonalPalette.fromHueAndChroma(errorHue, 80);
+    }
+  },
+  customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(
+    getRotatedHue(
+      colorHct,
+      [0, 38, 105, 140, 333, 360],
+      [-14, 10, -14, 10, -14]
+    ),
+    56
+  )
+};
+const fidelityVariant = {
+  name: "fidelity",
+  palettes: {
+    primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma),
+    secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
+      sourceColorHct.hue,
+      sourceColorHct.chroma * 0.5
+    ),
+    tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(
+      getRotatedHue(
+        sourceColorHct,
+        [0, 20, 71, 161, 333, 360],
+        [-40, 48, -32, 40, -32]
+      ),
+      sourceColorHct.chroma
+    ),
+    neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
+    neutralVariant: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
+    error: ({ sourceColorHct }) => {
+      const errorHue = getPiecewiseHue(
+        sourceColorHct,
+        [0, 3, 13, 23, 33, 43, 153, 273, 360],
+        [12, 22, 32, 12, 22, 32, 22, 12]
+      );
+      return TonalPalette.fromHueAndChroma(errorHue, 60);
+    }
+  },
+  customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(colorHct.hue, colorHct.chroma)
+};
+const Variants = {
+  Expressive: expressiveVariant,
+  Neutral: neutralVariant,
+  TonalSpot: tonalSpotVariant,
+  Vibrant: vibrantVariant,
+  Fidelity: fidelityVariant
+};
+class PluginAbstract {
+  constructor(options) {
+    __publicField(this, "options");
+    __publicField(this, "pluginInstance");
+    this.options = options;
+  }
+  init(api) {
+    var _a, _b;
+    this.pluginInstance = new this.pluginClass(api, this.options);
+    (_b = (_a = this.pluginInstance).onInit) == null ? void 0 : _b.call(_a);
+    return this;
+  }
+  getInstance() {
+    if (!this.pluginInstance) {
+      throw new Error(`Plugin ${this.name} is not initialized`);
+    }
+    return this.pluginInstance;
+  }
+}
+class PluginImplAbstract {
+  constructor(api, options) {
+    var _a;
+    this.api = api;
+    this.options = options;
+    (_a = this.onInit) == null ? void 0 : _a.call(this);
+  }
+}
+var FontFamily = /* @__PURE__ */ ((FontFamily2) => {
+  FontFamily2["Expressive"] = "expressive";
+  FontFamily2["Neutral"] = "neutral";
+  return FontFamily2;
+})(FontFamily || {});
+class FontPlugin extends PluginAbstract {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "dependencies", []);
+    __publicField(this, "name", "font");
+    __publicField(this, "pluginClass", FontPluginImpl);
+  }
+}
+class FontPluginImpl extends PluginImplAbstract {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "_fontFamily");
+    __publicField(this, "_fontStyles");
+  }
+  get fontFamily() {
+    if (!this._fontFamily) throw new Error("Font family not initialized");
+    return this._fontFamily;
+  }
+  set fontFamily(value) {
+    this._fontFamily = value;
+  }
+  get fontStyles() {
+    if (!this._fontStyles) throw new Error("Font styles not initialized");
+    return this._fontStyles;
+  }
+  set fontStyles(value) {
+    this._fontStyles = value;
+  }
+  getFonts() {
+    return {
+      fontStyles: this.fontStyles,
+      fontFamily: this.fontFamily
+    };
+  }
+  onInit() {
+    var _a, _b, _c, _d;
+    this.fontFamily = {
+      expressive: ((_b = (_a = this.options) == null ? void 0 : _a.fontFamily) == null ? void 0 : _b.expressive) ?? [
+        "Roboto",
+        "sans-serif"
+      ],
+      neutral: ((_d = (_c = this.options) == null ? void 0 : _c.fontFamily) == null ? void 0 : _d.neutral) ?? ["Roboto", "sans-serif"]
+    };
+    this.fontStyles = {
+      display: {
+        large: {
+          fontWeight: 400,
+          fontSize: 3.5625,
+          lineHeight: 4,
+          letterSpacing: -0.015625,
+          fontFamily: "expressive"
+          /* Expressive */
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 2.8125,
+          lineHeight: 3.25,
+          fontFamily: "expressive"
+          /* Expressive */
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 2.25,
+          lineHeight: 2.75,
+          fontFamily: "expressive"
+          /* Expressive */
+        }
+      },
+      headline: {
+        large: {
+          fontWeight: 400,
+          fontSize: 2,
+          lineHeight: 2.5,
+          fontFamily: "expressive"
+          /* Expressive */
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 1.75,
+          lineHeight: 2.25,
+          fontFamily: "expressive"
+          /* Expressive */
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 1.5,
+          lineHeight: 2,
+          fontFamily: "expressive"
+          /* Expressive */
+        }
+      },
+      title: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1.375,
+          lineHeight: 1.75,
+          fontFamily: "neutral"
+          /* Neutral */
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 1,
+          lineHeight: 1.5,
+          fontFamily: "neutral",
+          letterSpacing: 9375e-6
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: "neutral",
+          letterSpacing: 625e-5
+        }
+      },
+      label: {
+        large: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: "neutral",
+          letterSpacing: 625e-5
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: "neutral",
+          letterSpacing: 0.03125
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.6875,
+          lineHeight: 1,
+          fontFamily: "neutral",
+          letterSpacing: 0.03125
+        }
+      },
+      body: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1,
+          lineHeight: 1.5625,
+          fontFamily: "neutral",
+          letterSpacing: 0.03125
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: "neutral",
+          letterSpacing: 0.015625
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: "neutral",
+          letterSpacing: 0.025
+        }
+      }
+    };
+    if (this.options && this.options.fontStyles)
+      Object.entries(this.options.fontStyles).forEach(([key, fontParam]) => {
+        const fontRole = key;
+        Object.entries(fontParam).forEach(([size, fontStyle]) => {
+          const fontSize = size;
+          if (fontStyle) {
+            this.fontStyles[fontRole][fontSize] = {
+              ...this.fontStyles[fontRole][fontSize],
+              ...fontStyle
+            };
+          }
+        });
+      });
+  }
+}
+function defineConfig(configObject) {
+  if (!configObject || typeof configObject !== "object") {
+    throw new Error("The configuration is missing or not an object");
+  }
+  if (!("sourceColor" in configObject)) {
+    throw new Error("Invalid configuration");
+  }
+  return configObject;
+}
+export {
+  FontFamily as F,
+  PluginAbstract as P,
+  Variants as V,
+  PluginImplAbstract as a,
+  FontPlugin as b,
+  defineConfig as d,
+  expressiveVariant as e,
+  neutralVariant as n,
+  vibrantVariant as v
+};