@saasquatch/mint-components 1.15.0-42 → 1.15.0-43

package/dist/collection/global/styles.ts

@@ -77,8 +77,6 @@ declare global {
   }
 }
 
-console.log("The branding config is ", window.SquatchBrandingConfig);
-
 const style = `
 /* vietnamese */
 @font-face {
@@ -583,50 +581,24 @@ html {
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
   
-  --sqm-text: ${window.SquatchBrandingConfig?.font.textColor || "white"};
+  --sqm-text: ${window.SquatchBrandingConfig?.font?.textColor || "white"};
   --sqm-text-subdued: ${
-    window.SquatchBrandingConfig?.font.secondaryTextColor || "#b3b3b3"
+    window.SquatchBrandingConfig?.font?.secondaryTextColor || "#b3b3b3"
   };
+  --sqm-primary-color: #1ed760;
 
-  --sqm-primary-color: ${
-    window.SquatchBrandingConfig?.color?.primaryColor || "#1ed760"
-  };
-  --sqm-primary-button-background:${
-    window.SquatchBrandingConfig?.primaryButton?.buttonColor || "#1ed760"
-  };
-  --sqm-primary-button-background-hover: ${
-    window.SquatchBrandingConfig?.primaryButton?.hoverColor || "#1ed760"
-  };
-  --sqm-primary-button-color: ${
-    window.SquatchBrandingConfig?.primaryButton?.buttonTextColor || "#FFFFFF"
-  };
-  --sqm-primary-button-color-border: ${
-    window.SquatchBrandingConfig?.primaryButton?.buttonBorderColor ||
-    "transparent"
-  };
-  --sqm-primary-button-radius: ${
-    window.SquatchBrandingConfig?.primaryButton?.borderRadius || "4px"
-  };
+  --sqm-primary-button-background: #1ed760;
+  --sqm-primary-button-background-hover: #1DB954;
+  --sqm-primary-button-color: #121212;
+  --sqm-primary-button-color-border: transparent;
+  --sqm-primary-button-radius: 30px;
 
 
-  --sqm-secondary-button-background: ${
-    window.SquatchBrandingConfig?.secondaryButton?.buttonColor || "#191414"
-  };
-  --sqm-secondary-button-background-hover: ${
-    window.SquatchBrandingConfig?.secondaryButton?.hoverColor || "#282828"
-  };
-
-  
-  --sqm-secondary-button-color: ${
-    window.SquatchBrandingConfig?.secondaryButton?.buttonTextColor || "#FFFFFF"
-  };
-  --sqm-secondary-button-color-border: ${
-    window.SquatchBrandingConfig?.secondaryButton?.buttonBorderColor ||
-    "#FFFFFF"
-  };
-  --sqm-secondary-button-radius: ${
-    window.SquatchBrandingConfig?.secondaryButton?.borderRadius || "30px"
-  };
+  --sqm-secondary-button-background: #191414;
+  --sqm-secondary-button-background-hover: #282828; 
+  --sqm-secondary-button-color: #FFFFFF; 
+  --sqm-secondary-button-color-border: #FFFFFF; 
+  --sqm-secondary-button-radius: 30px;
 
   --sqm-tertiary-button-background: transparent;
   --sqm-tertiary-button-background-hover: var(--sqm-primary-color); 
@@ -635,134 +607,55 @@ html {
   --sqm-tertiary-button-radius: 30px;
   
   --sqm-border-radius-normal: ${
-    window.SquatchBrandingConfig?.border?.radius || "18px"
-  }; 
+    window.SquatchBrandingConfig?.border?.radius || "18"
+  }px;
   --sqm-border-color: ${window.SquatchBrandingConfig?.border?.color || "white"};
-
-  --sqm-border-thickness: ${
-    window.SquatchBrandingConfig?.border?.thickness || "1px"
-  };
+  --sqm-border-thickness: 1px;
 
   --sqm-accent-color-icon: ${
-    window.SquatchBrandingConfig?.color?.accentColorShades?.iconAndBadge ||
-    "#1ed760"
-  };
-  --sqm-accent-color-text: ${
-    window.SquatchBrandingConfig?.color?.accentColorShades?.text || "#fff"
-  };    
-  --sqm-accent-color-border: ${
-    window.SquatchBrandingConfig?.color?.accentColorShades?.border || "#1ed760"
-  };
-  --sqm-accent-color-background: ${
-    window.SquatchBrandingConfig?.color?.accentColorShades?.background ||
-    "#0d4a27"
+    window.SquatchBrandingConfig?.color?.accentColorShades?.icon || "#1ed760"
   };
+  --sqm-accent-color-text: #ffffff;     
+  --sqm-accent-color-border: #1db954;
+  --sqm-accent-color-background: #0d4a27;
 
-  --sqm-success-color-icon: ${
-    window.SquatchBrandingConfig?.color?.success?.iconAndBadge ||
-    "var(--sl-color-success-600)"
-  };
-  --sqm-success-color-text: ${
-    window.SquatchBrandingConfig?.color?.success?.text ||
-    "var(--sl-color-success-950)"
-  };
-  --sqm-success-color-border: ${
-    window.SquatchBrandingConfig?.color?.success?.border ||
-    "var(--sl-color-success-400)"
-  };
-  --sqm-success-color-background: ${
-    window.SquatchBrandingConfig?.color?.success?.background ||
-    "var(--sl-color-success-300)"
-  };
+  --sqm-success-color-icon: var(--sl-color-success-600);
+  --sqm-success-color-text: var(--sl-color-success-950);
+  --sqm-success-color-border: var(--sl-color-success-400);
+  --sqm-success-color-background: var(--sl-color-success-300);
   
-  --sqm-warning-color-icon: ${
-    window.SquatchBrandingConfig?.color?.warning?.iconAndBadge ||
-    "var(--sl-color-warning-600)"
-  };
-  --sqm-warning-color-text: ${
-    window.SquatchBrandingConfig?.color?.warning?.text ||
-    "var(--sl-color-warning-950)"
-  };
-  --sqm-warning-color-border: ${
-    window.SquatchBrandingConfig?.color?.warning?.border ||
-    "var(--sl-color-warning-400)"
-  };
-  --sqm-warning-color-background: ${
-    window.SquatchBrandingConfig?.color?.warning?.background ||
-    "var(--sl-color-warning-300)"
-  };
-
-  --sqm-danger-color-icon: ${
-    window.SquatchBrandingConfig?.color?.critical?.iconAndBadge ||
-    "var(--sl-color-danger-600)"
-  };
-  --sqm-danger-color-text: ${
-    window.SquatchBrandingConfig?.color?.critical?.text ||
-    "var(--sl-color-danger-950)"
-  };
-  --sqm-danger-color-border: ${
-    window.SquatchBrandingConfig?.color?.critical?.border ||
-    "var(--sl-color-danger-400)"
-  };
-  --sqm-danger-color-background: ${
-    window.SquatchBrandingConfig?.color?.critical?.background ||
-    "var(--sl-color-danger-300)"
-  };
-
-  --sqm-informative-color-icon: ${
-    window.SquatchBrandingConfig?.color?.informative?.iconAndBadge ||
-    "var(--sl-color-sky-600)"
-  };
-  --sqm-informative-color-text: ${
-    window.SquatchBrandingConfig?.color?.informative?.text ||
-    "var(--sl-color-sky-950)"
-  };
-  --sqm-informative-color-border: ${
-    window.SquatchBrandingConfig?.color?.informative?.border ||
-    "var(--sl-color-sky-400)"
-  };
-  --sqm-informative-color-background: ${
-    window.SquatchBrandingConfig?.color?.informative?.background ||
-    "var(--sl-color-sky-300)"
-  };
-
-  --sqm-input-background: ${
-    window.SquatchBrandingConfig?.inputs?.background || "#fff"
-  };
-  --sqm-input-border-color: ${
-    window.SquatchBrandingConfig?.inputs?.borderColor || "#eaeaea"
-  };
-  --sqm-input-border-radius: ${
-    window.SquatchBrandingConfig?.inputs?.borderRadius || "4px"
-  };
-  --sqm-input-color: ${
-    window.SquatchBrandingConfig?.inputs?.textColor || "#000"
-  };
-  --sqm-input-label-color: ${
-    window.SquatchBrandingConfig?.inputs?.labelColor || "#000"
-  };
-  --sqm-border-width: ${
-    window.SquatchBrandingConfig?.inputs?.borderThickness || "1px"
-  };
-  --sqm-border-color-focus: ${
-    window.SquatchBrandingConfig?.inputs?.focusBorderColor || "#eaeaea"
-  };
-  --sqm-border-color-hover: ${
-    window.SquatchBrandingConfig?.inputs?.hoverBorderColor || "#ccc"
-  };
-  --sqm-input-label-font-size: ${
-    window.SquatchBrandingConfig?.inputs?.labelFontSize || "18px"
-  };
-  --sqm-input-disabled-color: ${
-    window.SquatchBrandingConfig?.inputs?.labelFontSize || "#fff"
-  };
-  --sqm-input-disabled-background: ${
-    window.SquatchBrandingConfig?.inputs?.disabledBackground || "#fff"
-  };
+  --sqm-warning-color-icon: var(--sl-color-warning-600);
+  --sqm-warning-color-text: var(--sl-color-warning-950);
+  --sqm-warning-color-border: var(--sl-color-warning-400);
+  --sqm-warning-color-background: var(--sl-color-warning-300);
+
+  --sqm-danger-color-icon: var(--sl-color-danger-600);
+  --sqm-danger-color-text: var(--sl-color-danger-950);
+  --sqm-danger-color-border: var(--sl-color-danger-400);
+  --sqm-danger-color-background: var(--sl-color-danger-300);
+
+  --sqm-informative-color-icon: var(--sl-color-sky-600);
+  --sqm-informative-color-text: var(--sl-color-sky-950);
+  --sqm-informative-color-border: var(--sl-color-sky-400);
+  --sqm-informative-color-background: var(--sl-color-sky-300);
+
+  --sqm-input-background: #121212;
+  --sqm-input-border: 1px solid #7c7c7c;
+  --sqm-input-border-color: #7c7c7c;
+  --sqm-input-border-radius: 30px;
+  --sqm-input-color: var(--sqm-text);
+  --sqm-input-focus-border: 1px solid white;
+  --sqm-input-label-color: white;
+  --sqm-border-width: 1px;
+  --sqm-border-color-focus: white;
+  --sqm-border-color-hover: white;
+  --sqm-input-label-font-size: white;
+  --sqm-input-disabled-color: white;
+  --sqm-input-disabled-background: #303030;
 
   --sl-input-border-radius-medium: var(--sqm-input-border-radius, var(--sqm-border-radius-normal));
-  --sl-input-color-hover: var(--sqm-input-color-hover);
-  --sl-input-color-focus: var(--sqm-input-color-focus);
+  --sl-input-color-hover: var(--sqm-input-color);
+  --sl-input-color-focus: var(--sqm-input-color);
   --sl-input-color-disabled: var(--sqm-input-disabled-color);
   --sl-input-border-color-disabled: #7c7c7c;
   --sl-input-border-color-focus: var(--sqm-input-border-color-focus, white);
@@ -801,9 +694,7 @@ html {
 }
 
 body {
-  font-family: ${
-    window.SquatchBrandingConfig.font.font || "var(--sl-font-sans)"
-  };
+  font-family: var(--sl-font-sans);
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
@@ -818,6 +709,39 @@ body {
   color: var(--sqm-text) !important;
 }
 
+sqm-tabs::part(active-tab-indicator) {
+  border: red;
+  :root {
+    --tabs-border-color: pink;
+  
+  }
+}
+
+sl-tab-group::part(nav) {
+  border-bottom: 1px solid blue; /* Emphasize the separator */
+}
+
+sl-tab-group {
+  /* Set the active tab indicator color to Spotify Green */
+  --indicator-color: #1db954; 
+
+  /* Set the border color separating tabs from content */
+  --sl-tab-group-border-color: #333333; 
+
+  /* You might also want to adjust the nav area's background */
+  background-color: #1a1a1a; /* Dark background for the entire group or just the nav */
+  border-radius: 8px; /* Rounded corners for the entire tab group */
+  padding: 1rem; /* Adjust overall padding */
+}
+
+sl-tab::part(base)[active] {
+  /* You can add a top/left/right border to the active tab button itself if desired */
+  /* For a look like your previous input fields, you might want to mimic that border. */
+  border: 1px solid #1db954; /* Spotify Green border */
+  border-bottom-color: transparent; /* Hide the bottom border to let the indicator show */
+  border-radius: 4px 4px 0 0; /* Keep top corners rounded */
+}
+
 sl-spinner {
   --sl-color-primary-500: var(--sqm-accent-color-icon)
   --sl-spinner-stroke-width: 4px;
@@ -903,6 +827,10 @@ h1, h2, h3, h4{
   line-height: var(--sl-line-height-dense);
 }
 
+sl-button::part(base){
+  width: 100%;
+}
+
 sqm-share-button{
   flex: 1;
 }
@@ -914,7 +842,7 @@ sqm-hero img {
 
 sl-details::part(base){
   background-color: inherit;
-  border-color: var(--sqm-border-color);
+  border-color: var(--sqm-border-color)
 }
 
 sl-details::part(summary) {
@@ -924,8 +852,7 @@ sl-details::part(summary) {
 }
 
 *::part(primarybutton-base){
-  width: 100%;
-  background-color: var(--sqm-primary-button-background) !important;
+  background-color: var(--sqm-primary-button-background);
   color: var(--sqm-primary-button-color);
   border-color: var(--sqm-primary-button-color-border);
   border-radius: var(--sqm-primary-button-radius);
@@ -955,7 +882,7 @@ sl-details::part(summary) {
   color: var(--sqm-tertiary-button-color);
   border-color: var(--sqm-tertiary-button-color-border);
   border-radius: var(--sqm-tertiary-button-radius);
-  width: 100%;
+  width: max-content;
   display: flex;
   margin: auto;
 }
@@ -977,14 +904,6 @@ sl-details::part(summary) {
   border-width: var(--sqm-border-width, 1px);
 }
 
-*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{
-  border-color: var(--sqm-border-color-hover);
-}
-
-*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{
-  border-color: var(--sqm-border-color-focus);
-}
-
 sqm-name-fields::part(input-base) {
   background-color: var(--sqm-input-background, #fff);
   border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
@@ -995,7 +914,8 @@ sqm-name-fields::part(input-base) {
 sl-input::part(base):focus,
 sl-select::part(form-control-wrapper):focus,
 sl-textarea::part(textarea-label):focus {
-  border-color: var(--sqm-border-color-focus);
+  border-color: none;
+  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
 }
 
 *::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{

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;
+}

package/dist/esm/{ErrorView-eaafd6f5.js → ErrorView-48e2b969.js}

@@ -1,4 +1,4 @@
-import { h } from './index-b3a06de8.js';
+import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 const styles = {

package/dist/esm/{GenericTableView-dd9be3ea.js → GenericTableView-3b6f9ccc.js}

@@ -1,4 +1,4 @@
-import { h } from './index-b3a06de8.js';
+import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { g as gap } from './mixins-f750863a.js';