@getflip/swirl-components 0.114.0 → 0.115.0

package/dist/components/swirl-theme-provider.js

@@ -1,247 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-/**
- * A simple guard function:
- *
- * ```js
- * Math.min(Math.max(low, value), high)
- * ```
- */
-function guard(low, high, value) {
-  return Math.min(Math.max(low, value), high);
-}
-
-class ColorError extends Error {
-  constructor(color) {
-    super(`Failed to parse color: "${color}"`);
-  }
-
-}
-
-var ColorError$1 = ColorError;
-
-/**
- * Parses a color into red, gree, blue, alpha parts
- *
- * @param color the input color. Can be a RGB, RBGA, HSL, HSLA, or named color
- */
-
-function parseToRgba(color) {
-  if (typeof color !== 'string') throw new ColorError$1(color);
-  if (color.trim().toLowerCase() === 'transparent') return [0, 0, 0, 0];
-  let normalizedColor = color.trim();
-  normalizedColor = namedColorRegex.test(color) ? nameToHex(color) : color;
-  const reducedHexMatch = reducedHexRegex.exec(normalizedColor);
-
-  if (reducedHexMatch) {
-    const arr = Array.from(reducedHexMatch).slice(1);
-    return [...arr.slice(0, 3).map(x => parseInt(r(x, 2), 16)), parseInt(r(arr[3] || 'f', 2), 16) / 255];
-  }
-
-  const hexMatch = hexRegex.exec(normalizedColor);
-
-  if (hexMatch) {
-    const arr = Array.from(hexMatch).slice(1);
-    return [...arr.slice(0, 3).map(x => parseInt(x, 16)), parseInt(arr[3] || 'ff', 16) / 255];
-  }
-
-  const rgbaMatch = rgbaRegex.exec(normalizedColor);
-
-  if (rgbaMatch) {
-    const arr = Array.from(rgbaMatch).slice(1);
-    return [...arr.slice(0, 3).map(x => parseInt(x, 10)), parseFloat(arr[3] || '1')];
-  }
-
-  const hslaMatch = hslaRegex.exec(normalizedColor);
-
-  if (hslaMatch) {
-    const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
-    if (guard(0, 100, s) !== s) throw new ColorError$1(color);
-    if (guard(0, 100, l) !== l) throw new ColorError$1(color);
-    return [...hslToRgb(h, s, l), a || 1];
-  }
-
-  throw new ColorError$1(color);
-}
-
-function hash(str) {
-  let hash = 5381;
-  let i = str.length;
-
-  while (i) {
-    hash = hash * 33 ^ str.charCodeAt(--i);
-  }
-  /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
-   * integers. Since we want the results to be always positive, convert the
-   * signed int to an unsigned by doing an unsigned bitshift. */
-
-
-  return (hash >>> 0) % 2341;
-}
-
-const colorToInt = x => parseInt(x.replace(/_/g, ''), 36);
-
-const compressedColorMap = '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'.split(' ').reduce((acc, next) => {
-  const key = colorToInt(next.substring(0, 3));
-  const hex = colorToInt(next.substring(3)).toString(16); // NOTE: padStart could be used here but it breaks Node 6 compat
-  // https://github.com/ricokahler/color2k/issues/351
-
-  let prefix = '';
-
-  for (let i = 0; i < 6 - hex.length; i++) {
-    prefix += '0';
-  }
-
-  acc[key] = `${prefix}${hex}`;
-  return acc;
-}, {});
-/**
- * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
- */
-
-function nameToHex(color) {
-  const normalizedColorName = color.toLowerCase().trim();
-  const result = compressedColorMap[hash(normalizedColorName)];
-  if (!result) throw new ColorError$1(color);
-  return `#${result}`;
-}
-
-const r = (str, amount) => Array.from(Array(amount)).map(() => str).join('');
-
-const reducedHexRegex = new RegExp(`^#${r('([a-f0-9])', 3)}([a-f0-9])?$`, 'i');
-const hexRegex = new RegExp(`^#${r('([a-f0-9]{2})', 3)}([a-f0-9]{2})?$`, 'i');
-const rgbaRegex = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${r(',\\s*(\\d+)\\s*', 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, 'i');
-const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
-const namedColorRegex = /^[a-z]+$/i;
-
-const roundColor = color => {
-  return Math.round(color * 255);
-};
-
-const hslToRgb = (hue, saturation, lightness) => {
-  let l = lightness / 100;
-
-  if (saturation === 0) {
-    // achromatic
-    return [l, l, l].map(roundColor);
-  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
-
-  const huePrime = (hue % 360 + 360) % 360 / 60;
-  const chroma = (1 - Math.abs(2 * l - 1)) * (saturation / 100);
-  const secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
-  let red = 0;
-  let green = 0;
-  let blue = 0;
-
-  if (huePrime >= 0 && huePrime < 1) {
-    red = chroma;
-    green = secondComponent;
-  } else if (huePrime >= 1 && huePrime < 2) {
-    red = secondComponent;
-    green = chroma;
-  } else if (huePrime >= 2 && huePrime < 3) {
-    green = chroma;
-    blue = secondComponent;
-  } else if (huePrime >= 3 && huePrime < 4) {
-    green = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 4 && huePrime < 5) {
-    red = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 5 && huePrime < 6) {
-    red = chroma;
-    blue = secondComponent;
-  }
-
-  const lightnessModification = l - chroma / 2;
-  const finalRed = red + lightnessModification;
-  const finalGreen = green + lightnessModification;
-  const finalBlue = blue + lightnessModification;
-  return [finalRed, finalGreen, finalBlue].map(roundColor);
-};
-
-// taken from:
-/**
- * Parses a color in hue, saturation, lightness, and the alpha channel.
- *
- * Hue is a number between 0 and 360, saturation, lightness, and alpha are
- * decimal percentages between 0 and 1
- */
-
-function parseToHsla(color) {
-  const [red, green, blue, alpha] = parseToRgba(color).map((value, index) => // 3rd index is alpha channel which is already normalized
-  index === 3 ? value : value / 255);
-  const max = Math.max(red, green, blue);
-  const min = Math.min(red, green, blue);
-  const lightness = (max + min) / 2; // achromatic
-
-  if (max === min) return [0, 0, lightness, alpha];
-  const delta = max - min;
-  const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
-  const hue = 60 * (red === max ? (green - blue) / delta + (green < blue ? 6 : 0) : green === max ? (blue - red) / delta + 2 : (red - green) / delta + 4);
-  return [hue, saturation, lightness, alpha];
-}
-
-/**
- * Takes in hsla parts and constructs an hsla string
- *
- * @param hue The color circle (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue
- * @param saturation Percentage of saturation, given as a decimal between 0 and 1
- * @param lightness Percentage of lightness, given as a decimal between 0 and 1
- * @param alpha Percentage of opacity, given as a decimal between 0 and 1
- */
-
-function hsla(hue, saturation, lightness, alpha) {
-  return `hsla(${(hue % 360).toFixed()}, ${guard(0, 100, saturation * 100).toFixed()}%, ${guard(0, 100, lightness * 100).toFixed()}%, ${parseFloat(guard(0, 1, alpha).toFixed(3))})`;
-}
-
-/**
- * Takes in rgba parts and returns an rgba string
- *
- * @param red The amount of red in the red channel, given in a number between 0 and 255 inclusive
- * @param green The amount of green in the red channel, given in a number between 0 and 255 inclusive
- * @param blue The amount of blue in the red channel, given in a number between 0 and 255 inclusive
- * @param alpha Percentage of opacity, given as a decimal between 0 and 1
- */
-
-function rgba(red, green, blue, alpha) {
-  return `rgba(${guard(0, 255, red).toFixed()}, ${guard(0, 255, green).toFixed()}, ${guard(0, 255, blue).toFixed()}, ${parseFloat(guard(0, 1, alpha).toFixed(3))})`;
-}
-
-/**
- * Takes in any color and returns it as an rgba string.
- */
-
-function toRgba(color) {
-  return rgba(...parseToRgba(color));
-}
-
 const swirlThemeProviderCss = ".sc-swirl-theme-provider-h{display:block}";
 
 const preferredThemeStorageKey = "swirl-preferred-theme";
-const tenantColorMapping = {
-  "--s-action-primary-default": "primary",
-  "--s-action-primary-hovered": "primaryHovered",
-  "--s-action-primary-pressed": "primaryPressed",
-  "--s-text-on-action-primary": "primaryContrast",
-  "--s-icon-on-action-primary": "primaryContrast",
-  "--s-surface-highlight-default": "secondary",
-  "--s-surface-highlight-hovered": "secondaryHovered",
-  "--s-surface-highlight-pressed": "secondaryPressed",
-  "--s-on-surface-highlight-default": "secondaryHovered",
-  "--s-text-on-surface-highlight": "secondaryContrast",
-  "--s-icon-on-surface-highlight": "secondaryContrast",
-  "--s-text-highlight": "text",
-  "--s-interactive-primary-default": "text",
-  "--s-interactive-primary-hovered": "textHovered",
-  "--s-interactive-primary-pressed": "textPressed",
-};
 const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemeProvider extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.themeChange = createEvent(this, "themeChange", 7);
+    this.setDesignTokens = [];
     this.config = undefined;
   }
   componentWillLoad() {
@@ -255,27 +22,27 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
     this.updateAppTheme();
   }
   /**
-   * Returns the active app theme.
+   * Returns the active OS theme.
    * @returns SwirlTheme
    */
-  async getActiveTheme() {
-    return this.appTheme;
+  async getActiveOSTheme() {
+    return this.appOSTheme;
   }
   /**
-   * Returns the user's preferred theme stored in local storage.
+   * Returns the user's preferred OS theme stored in local storage.
    * @returns SwirlTheme
    */
-  async getPreferredTheme() {
+  async getPreferredOSTheme() {
     if (!Boolean(this.resolvedConfig.storage)) {
       return;
     }
     return this.resolvedConfig.storage.getItem(preferredThemeStorageKey);
   }
   /**
-   * Sets the user's preferred theme and stores it in local storage. Overrides
-   * the OS theme.
+   * Sets the user's preferred OS theme and stores it in local storage. Overrides
+   * the system theme.
    */
-  async setPreferredTheme(theme) {
+  async setPreferredOSTheme(theme) {
     if (!Boolean(this.resolvedConfig.storage)) {
       return;
     }
@@ -283,9 +50,9 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
     this.updateAppTheme();
   }
   /**
-   * Resets the user's preferred theme, using the OS theme instead.
+   * Resets the user's preferred OS theme, using the system theme instead.
    */
-  async resetPreferredTheme() {
+  async resetPreferredOSTheme() {
     if (!Boolean(this.resolvedConfig.storage)) {
       return;
     }
@@ -312,8 +79,8 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
     });
   }
   async updateAppTheme() {
-    this.appTheme = (await this.getPreferredTheme()) || this.osTheme;
-    if (this.appTheme === "dark") {
+    this.appOSTheme = (await this.getPreferredOSTheme()) || this.osTheme;
+    if (this.appOSTheme === "dark") {
       document.documentElement.classList.remove("theme-light");
       document.documentElement.classList.add("theme-dark");
     }
@@ -322,59 +89,49 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
       document.documentElement.classList.add("theme-light");
     }
     this.updateTenantVariables();
+    this.updateTenantAssets();
     const themeChangeEventData = {
-      activeTheme: await this.getActiveTheme(),
-      preferredTheme: await this.getPreferredTheme(),
+      activeTheme: await this.getActiveOSTheme(),
+      preferredTheme: await this.getPreferredOSTheme(),
     };
-    if (!Boolean(this.recentThemeChangeEventData) ||
+    if (!Boolean(this.recentOSThemeChangeEventData) ||
       themeChangeEventData.activeTheme !==
-        this.recentThemeChangeEventData.activeTheme ||
+        this.recentOSThemeChangeEventData.activeTheme ||
       themeChangeEventData.preferredTheme !==
-        this.recentThemeChangeEventData.preferredTheme) {
-      this.recentThemeChangeEventData = themeChangeEventData;
-      this.themeChange.emit(this.recentThemeChangeEventData);
+        this.recentOSThemeChangeEventData.preferredTheme) {
+      this.recentOSThemeChangeEventData = themeChangeEventData;
+      this.themeChange.emit(this.recentOSThemeChangeEventData);
+    }
+  }
+  updateTenantAssets() {
+    const theme = this.resolvedConfig?.themes?.[this.appOSTheme];
+    if (!Boolean(theme)) {
+      return;
     }
+    document.head
+      .querySelector('link[rel="icon"]')
+      ?.setAttribute("href", theme.favicon.link);
   }
   updateTenantVariables() {
-    const tenantTheme = this.resolvedConfig?.tenantColors;
-    if (!Boolean(tenantTheme)) {
+    const theme = this.resolvedConfig?.themes?.[this.appOSTheme];
+    if (!Boolean(theme)) {
       this.resetTenantVariables();
       return;
     }
     const rootElement = this.resolvedConfig.rootElement;
-    // generate state colors (hovered, pressed) from base colors
-    const primaryHsla = parseToHsla(tenantTheme.primary);
-    const secondaryHsla = parseToHsla(tenantTheme.secondary);
-    const textHsla = parseToHsla(tenantTheme.text);
-    const primaryHovered = toRgba(hsla(primaryHsla[0], primaryHsla[1] - 0.21, primaryHsla[2] + 0.09, 1));
-    const primaryPressed = toRgba(hsla(primaryHsla[0], primaryHsla[1] - 0.2, primaryHsla[2] + 0.17, 1));
-    const secondaryHovered = toRgba(hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.07, 1));
-    const secondaryPressed = toRgba(hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.15, 1));
-    const textHovered = toRgba(hsla(textHsla[0], textHsla[1] - 0.34, textHsla[2] + 0.1, 1));
-    const textPressed = toRgba(hsla(textHsla[0], textHsla[1] - 0.48, textHsla[2] + 0.2, 1));
-    const tenantThemeWithGeneratedStateColors = {
-      ...tenantTheme,
-      primaryHovered: primaryHovered,
-      primaryPressed: primaryPressed,
-      secondaryHovered: secondaryHovered,
-      secondaryPressed: secondaryPressed,
-      textHovered: textHovered,
-      textPressed: textPressed,
-    };
-    // set custom properties for tenant theme colors
-    Object.entries(tenantColorMapping).forEach(([key, value]) => rootElement.style.setProperty(key, tenantThemeWithGeneratedStateColors[value]));
+    this.setDesignTokens = [];
+    theme.design_tokens.forEach((token) => {
+      const propertyName = `--s-${token.id}`;
+      rootElement.style.setProperty(propertyName, `rgba(${token.color.r}, ${token.color.g}, ${token.color.b}, ${token.color.a})`);
+      this.setDesignTokens.push(propertyName);
+    });
   }
   resetTenantVariables() {
     const rootElement = this.resolvedConfig.rootElement;
-    [
-      ...Object.keys(tenantColorMapping),
-      "primaryHovered",
-      "primaryPressed",
-      "secondaryHovered",
-      "secondaryPressed",
-      "textHovered",
-      "textPressed",
-    ].forEach((key) => rootElement.style.removeProperty(key));
+    this.setDesignTokens.forEach((property) => {
+      rootElement.style.removeProperty(property);
+    });
+    this.setDesignTokens = [];
   }
   render() {
     return (h(Host, null, h("slot", null)));
@@ -385,10 +142,10 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
   static get style() { return swirlThemeProviderCss; }
 }, [6, "swirl-theme-provider", {
     "config": [16],
-    "getActiveTheme": [64],
-    "getPreferredTheme": [64],
-    "setPreferredTheme": [64],
-    "resetPreferredTheme": [64]
+    "getActiveOSTheme": [64],
+    "getPreferredOSTheme": [64],
+    "setPreferredOSTheme": [64],
+    "resetPreferredOSTheme": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {