@saasquatch/mint-components 1.15.0-40 → 1.15.0-41

package/dist/collection/global/styles.ts

@@ -71,6 +71,12 @@
   --teal-7: #004551;
 } */
 
+declare global {
+  interface Window {
+    SquatchBrandingConfig: BrandingConfig | null;
+  }
+}
+
 const style = `
 /* vietnamese */
 @font-face {
@@ -568,18 +574,17 @@ html {
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: #121212;
+  --sqm-portal-background: ${
+    window.SquatchBrandingConfig?.color?.background || "#121212"
+  };
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
   
-  /*
-  --sqm-text: var(--sl-color-neutral-800);
-  --sqm-text-subdued: var(--sl-color-neutral-500);
- */
-
-  --sqm-text: white;
-  --sqm-text-subdued: #b3b3b3;
+  --sqm-text: ${window.SquatchBrandingConfig?.font?.textColor || "white"};
+  --sqm-text-subdued: ${
+    window.SquatchBrandingConfig?.font?.secondaryTextColor || "#b3b3b3"
+  };
   --sqm-primary-color: #1ed760;
 
   --sqm-primary-button-background: #1ed760;
@@ -601,11 +606,15 @@ html {
   --sqm-tertiary-button-color-border: transparent; 
   --sqm-tertiary-button-radius: 30px;
   
-  --sqm-border-radius-normal: 18px;
-  --sqm-border-color: white;
+  --sqm-border-radius-normal: ${
+    window.SquatchBrandingConfig?.border?.radius || "18"
+  }px;
+  --sqm-border-color: ${window.SquatchBrandingConfig?.border?.color || "white"};
   --sqm-border-thickness: 1px;
 
-  --sqm-accent-color-icon: #1ed760;       
+  --sqm-accent-color-icon: ${
+    window.SquatchBrandingConfig?.color?.accentColorShades?.icon || "#1ed760"
+  };
   --sqm-accent-color-text: #ffffff;     
   --sqm-accent-color-border: #1db954;
   --sqm-accent-color-background: #0d4a27;
@@ -692,7 +701,12 @@ body {
   color: var(--sqm-text);
   line-height: var(--sl-line-height-normal);
   margin: 0;
-  background-color: var(--sqm-portal-background);
+  background-color: var(--sqm-portal-background) !important;
+}
+
+.story-div {
+  background: var(--sqm-portal-background) !important;
+  color: var(--sqm-text) !important;
 }
 
 sqm-tabs::part(active-tab-indicator) {

package/dist/collection/utils/parseStates.js

@@ -0,0 +1,12 @@
+export function parseStates(states) {
+  if (typeof states === "string") {
+    try {
+      return JSON.parse(states);
+    }
+    catch (e) {
+      return undefined;
+    }
+  }
+  if (typeof states === "object")
+    return states;
+}