@getflip/swirl-components 0.113.1 → 0.115.0

package/dist/collection/collection-manifest.json

@@ -42,7 +42,6 @@
     "./components/swirl-table-column/swirl-table-column.js",
     "./components/swirl-tag/swirl-tag.js",
     "./components/swirl-text/swirl-text.js",
-    "./components/swirl-theme-provider/swirl-theme-provider.js",
     "./components/swirl-thumbnail/swirl-thumbnail.js",
     "./components/swirl-toast/swirl-toast.js",
     "./components/swirl-toast-provider/swirl-toast-provider.js",
@@ -299,6 +298,7 @@
     "./components/swirl-table-row/swirl-table-row.js",
     "./components/swirl-table-row-group/swirl-table-row-group.js",
     "./components/swirl-tabs/swirl-tabs.js",
+    "./components/swirl-theme-provider/swirl-theme-provider.js",
     "./components/swirl-time-input/swirl-time-input.js",
     "./components/swirl-tree-navigation-item/swirl-tree-navigation-item.js",
     "./components/swirl-video-thumbnail/swirl-video-thumbnail.js",

package/dist/collection/components/swirl-stack/swirl-stack.js

@@ -4,6 +4,7 @@ export class SwirlStack {
   constructor() {
     this.align = "start";
     this.as = "div";
+    this.height = undefined;
     this.justify = "start";
     this.orientation = "vertical";
     this.spacing = "0";
@@ -12,7 +13,7 @@ export class SwirlStack {
   render() {
     const Tag = this.as;
     const className = classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
-    return (h(Host, null, h(Tag, { class: className, style: { gap: `var(--s-space-${this.spacing})` } }, h("slot", null))));
+    return (h(Host, { style: { height: this.height } }, h(Tag, { class: className, style: { gap: `var(--s-space-${this.spacing})`, height: this.height } }, h("slot", null))));
   }
   static get is() { return "swirl-stack"; }
   static get encapsulation() { return "shadow"; }
@@ -69,6 +70,23 @@ export class SwirlStack {
         "reflect": false,
         "defaultValue": "\"div\""
       },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false
+      },
       "justify": {
         "type": "string",
         "mutable": false,

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

@@ -1,25 +1,8 @@
 import { h, Host, } from "@stencil/core";
-import { hsla, parseToHsla, toRgba } from "color2k";
 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",
-};
 export class SwirlThemeProvider {
   constructor() {
+    this.setDesignTokens = [];
     this.config = undefined;
   }
   componentWillLoad() {
@@ -33,27 +16,27 @@ export class SwirlThemeProvider {
     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;
     }
@@ -61,9 +44,9 @@ export class SwirlThemeProvider {
     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;
     }
@@ -90,8 +73,8 @@ export class SwirlThemeProvider {
     });
   }
   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");
     }
@@ -100,59 +83,49 @@ export class SwirlThemeProvider {
       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)));
@@ -176,11 +149,11 @@ export class SwirlThemeProvider {
         "mutable": false,
         "complexType": {
           "original": "SwirlThemeProviderConfig",
-          "resolved": "{ rootElement?: HTMLElement; storage?: SwirlThemeProviderStorage; tenantColors?: SwirlThemeProviderTenantColors; }",
+          "resolved": "{ rootElement?: HTMLElement; storage?: SwirlThemeProviderStorage; themes?: SwirlThemes; }",
           "references": {
             "SwirlThemeProviderConfig": {
-              "location": "local",
-              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-theme-provider/swirl-theme-provider.tsx"
+              "location": "import",
+              "path": "./swirl-theme-provider.types"
             }
           }
         },
@@ -205,12 +178,12 @@ export class SwirlThemeProvider {
           "text": ""
         },
         "complexType": {
-          "original": "SwirlThemeChangeEventData",
-          "resolved": "{ activeTheme: SwirlTheme; preferredTheme: SwirlTheme; }",
+          "original": "SwirlOSThemeChangeEventData",
+          "resolved": "{ activeTheme: SwirlOSTheme; preferredTheme: SwirlOSTheme; }",
           "references": {
-            "SwirlThemeChangeEventData": {
-              "location": "local",
-              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-theme-provider/swirl-theme-provider.tsx"
+            "SwirlOSThemeChangeEventData": {
+              "location": "import",
+              "path": "./swirl-theme-provider.types"
             }
           }
         }
@@ -218,55 +191,55 @@ export class SwirlThemeProvider {
   }
   static get methods() {
     return {
-      "getActiveTheme": {
+      "getActiveOSTheme": {
         "complexType": {
-          "signature": "() => Promise<SwirlTheme>",
+          "signature": "() => Promise<SwirlOSTheme>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             },
-            "SwirlTheme": {
-              "location": "local",
-              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-theme-provider/swirl-theme-provider.tsx"
+            "SwirlOSTheme": {
+              "location": "import",
+              "path": "./swirl-theme-provider.types"
             }
           },
-          "return": "Promise<SwirlTheme>"
+          "return": "Promise<SwirlOSTheme>"
         },
         "docs": {
-          "text": "Returns the active app theme.",
+          "text": "Returns the active OS theme.",
           "tags": [{
               "name": "returns",
               "text": "SwirlTheme"
             }]
         }
       },
-      "getPreferredTheme": {
+      "getPreferredOSTheme": {
         "complexType": {
-          "signature": "() => Promise<SwirlTheme>",
+          "signature": "() => Promise<SwirlOSTheme>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             },
-            "SwirlTheme": {
-              "location": "local",
-              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-theme-provider/swirl-theme-provider.tsx"
+            "SwirlOSTheme": {
+              "location": "import",
+              "path": "./swirl-theme-provider.types"
             }
           },
-          "return": "Promise<SwirlTheme>"
+          "return": "Promise<SwirlOSTheme>"
         },
         "docs": {
-          "text": "Returns the user's preferred theme stored in local storage.",
+          "text": "Returns the user's preferred OS theme stored in local storage.",
           "tags": [{
               "name": "returns",
               "text": "SwirlTheme"
             }]
         }
       },
-      "setPreferredTheme": {
+      "setPreferredOSTheme": {
         "complexType": {
-          "signature": "(theme: SwirlTheme) => Promise<void>",
+          "signature": "(theme: SwirlOSTheme) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -275,19 +248,19 @@ export class SwirlThemeProvider {
             "Promise": {
               "location": "global"
             },
-            "SwirlTheme": {
-              "location": "local",
-              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-theme-provider/swirl-theme-provider.tsx"
+            "SwirlOSTheme": {
+              "location": "import",
+              "path": "./swirl-theme-provider.types"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Sets the user's preferred theme and stores it in local storage. Overrides\nthe OS theme.",
+          "text": "Sets the user's preferred OS theme and stores it in local storage. Overrides\nthe system theme.",
           "tags": []
         }
       },
-      "resetPreferredTheme": {
+      "resetPreferredOSTheme": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -299,7 +272,7 @@ export class SwirlThemeProvider {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Resets the user's preferred theme, using the OS theme instead.",
+          "text": "Resets the user's preferred OS theme, using the system theme instead.",
           "tags": []
         }
       }

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

@@ -24,21 +24,21 @@ describe("swirl-theme-provider", () => {
       components: [SwirlThemeProvider],
       html: `<swirl-theme-provider></swirl-theme-provider>`,
     });
-    expect(await page.root.getActiveTheme()).toBe("dark");
+    expect(await page.root.getActiveOSTheme()).toBe("dark");
   });
   it("overrides the os theme with a preferred user theme", async () => {
     const page = await newSpecPage({
       components: [SwirlThemeProvider],
       html: `<swirl-theme-provider></swirl-theme-provider>`,
     });
-    expect(await page.root.getActiveTheme()).toBe("dark");
-    expect(await page.root.getPreferredTheme()).toBeNull();
-    await page.root.setPreferredTheme("light");
-    expect(await page.root.getActiveTheme()).toBe("light");
-    expect(await page.root.getPreferredTheme()).toBe("light");
-    await page.root.resetPreferredTheme();
-    expect(await page.root.getActiveTheme()).toBe("dark");
-    expect(await page.root.getPreferredTheme()).toBeNull();
+    expect(await page.root.getActiveOSTheme()).toBe("dark");
+    expect(await page.root.getPreferredOSTheme()).toBeNull();
+    await page.root.setPreferredOSTheme("light");
+    expect(await page.root.getActiveOSTheme()).toBe("light");
+    expect(await page.root.getPreferredOSTheme()).toBe("light");
+    await page.root.resetPreferredOSTheme();
+    expect(await page.root.getActiveOSTheme()).toBe("dark");
+    expect(await page.root.getPreferredOSTheme()).toBeNull();
   });
   it("adds custom tenant color properties", async () => {
     const page = await newSpecPage({
@@ -46,17 +46,66 @@ describe("swirl-theme-provider", () => {
       html: `<swirl-theme-provider></swirl-theme-provider>`,
     });
     page.root.config = {
-      tenantColors: {
-        primary: "red",
-        primaryContrast: "blue",
-        secondary: "green",
-        secondaryContrast: "orange",
-        text: "purple",
+      themes: {
+        dark: {
+          favicon: {
+            id: "d3458010-97c6-40a7-896d-804ab6c33496",
+            link: "https://master.flip-app.dev/media/themes/d3458010-97c6-40a7-896d-804ab6c33496",
+            file_name: "dark-favIcon.png",
+          },
+          company_icon: {
+            id: "6d1c1da4-fa4b-4d77-b44d-b1fa58ed6337",
+            link: "https://master.flip-app.dev/media/themes/6d1c1da4-fa4b-4d77-b44d-b1fa58ed6337",
+            file_name: "dark-companyIcon.png",
+          },
+          company_logo: {
+            id: "618f411b-eaad-4c06-8834-54fce38fcbad",
+            link: "https://master.flip-app.dev/media/themes/618f411b-eaad-4c06-8834-54fce38fcbad",
+            file_name: "dark-companyLogo.png",
+          },
+          design_tokens: [
+            {
+              id: "text-highlight",
+              color: {
+                r: 255,
+                g: 0,
+                b: 0,
+                a: 255,
+              },
+            },
+          ],
+        },
+        light: {
+          favicon: {
+            id: "49ab1bb9-17d9-45c0-87b4-2247bb8c3648",
+            link: "https://master.flip-app.dev/media/themes/49ab1bb9-17d9-45c0-87b4-2247bb8c3648",
+            file_name: "light-favIcon.png",
+          },
+          company_icon: {
+            id: "0eaddd17-3468-4243-bdd8-6fae1222e032",
+            link: "https://master.flip-app.dev/media/themes/0eaddd17-3468-4243-bdd8-6fae1222e032",
+            file_name: "light-companyIcon.png",
+          },
+          company_logo: {
+            id: "b39cb0c9-9097-48c8-900b-6e24686aac5e",
+            link: "https://master.flip-app.dev/media/themes/b39cb0c9-9097-48c8-900b-6e24686aac5e",
+            file_name: "light-companyLogo.png",
+          },
+          design_tokens: [
+            {
+              id: "text-highlight",
+              color: {
+                r: 0,
+                g: 255,
+                b: 0,
+                a: 255,
+              },
+            },
+          ],
+        },
       },
     };
     await page.waitForChanges();
-    expect(page.doc.documentElement.style.getPropertyValue("--s-action-primary-default")).toBe("red");
-    expect(page.doc.documentElement.style.getPropertyValue("--s-surface-highlight-default")).toBe("green");
-    expect(page.doc.documentElement.style.getPropertyValue("--s-text-highlight")).toBe("purple");
+    expect(page.doc.documentElement.style.getPropertyValue("--s-text-highlight")).toBe("rgba(255, 0, 0, 255)");
   });
 });