@saasquatch/mint-components 1.15.0-5 → 1.15.0-7

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -124,6 +124,14 @@ export class TaskCard {
      * @uiGroup Button
      */
     this.hideButton = false;
+    /**
+     * @uiName Button Style
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonStyle = "primary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -135,6 +143,7 @@ export class TaskCard {
     const { states, callbacks } = isDemo()
       ? useTaskCardDemo(this)
       : useTaskCard(this);
+    console.log("button style from controller", this.buttonStyle);
     return (h(TaskCardView, { callbacks: callbacks, states: {
         loading,
         loadingEvent: states.loadingEvent,
@@ -733,6 +742,143 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "false"
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Card Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "border-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "buttonStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\"",
+        "resolved": "\"primary\" | \"secondary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button Style",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"primary\", \"secondary\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Primary\", \"Secondary\"]",
+            "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "button-style",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/sqm-task-card/useTaskCard.js

@@ -36,8 +36,18 @@ export function useTaskCard(props) {
   function onClick() {
     props.eventKey ? sendEvent(props.eventKey) : openLink();
   }
+  const styles = {
+    card: {
+      backgroundColor: props.backgroundColor,
+      textColor: props.textColor,
+      borderColor: props.borderColor,
+      borderRadius: props.borderRadius,
+      buttonStyle: props.buttonStyle,
+    },
+  };
   return {
     states: { loadingEvent, locale },
+    styles,
     callbacks: { sendEvent, onClick },
   };
 }

package/dist/collection/components/views/copy-text-view.js

@@ -1,41 +1,6 @@
 import { h } from "@stencil/core";
 import { HostBlock } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  HostBlock: HostBlock,
-  inputStyle: {
-    "&::part(input)": { textOverflow: "ellipsis", width: "100%" },
-    "&::part(base)": { cursor: "pointer", overflow: "visible" },
-    width: "100%",
-  },
-  inputErrorStyle: {
-    "&::part(base)": {
-      border: "2px solid red",
-    },
-  },
-  ContainerDiv: {
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    justifyContent: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  containerStyle: {
-    display: "flex",
-    alignItems: "center",
-    gap: "var(--sl-spacing-x-small)",
-    width: "100%",
-  },
-  errorTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-danger-500)",
-  },
-  notificationTextStyle: {
-    margin: "0",
-    color: "var(--sl-color-neutral-500)",
-  },
-};
 const vanillaStyle = `
   :host{
     display: block;   
@@ -58,10 +23,60 @@ const disabledStyles = `
     cursor: default;
   }
 `;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 export function CopyTextView(props) {
   const { buttonStyle = "icon" } = props;
+  const style = {
+    HostBlock: HostBlock,
+    inputStyle: {
+      "&::part(input)": {
+        textOverflow: "ellipsis",
+        width: "100%",
+        color: props.textColor || "var(--sqm-text)",
+      },
+      "&::part(base)": {
+        cursor: "pointer",
+        overflow: "visible",
+        borderRadius: props.borderRadius || "var(--sl-border-radius-medium)",
+        background: props.backgroundColor || "var(--sl-color-white)",
+        border: `1px solid ${props.borderColor || "transparent"}`,
+      },
+      width: "100%",
+    },
+    icon: {
+      "&::part(base)": {
+        color: props.textColor || "var(--sqm-text)",
+      },
+    },
+    inputErrorStyle: {
+      "&::part(base)": {
+        border: "2px solid red",
+      },
+    },
+    ContainerDiv: {
+      display: "flex",
+      alignItems: "flex-start",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    containerStyle: {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    errorTextStyle: {
+      margin: "0",
+      color: "var(--sl-color-danger-500)",
+    },
+    notificationTextStyle: {
+      margin: "0",
+      color: "var(--sl-color-neutral-500)",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   const error = !props.loading && props.error;
   const inputText = error ? props.inputPlaceholderText : props.copyString;
   const disabled = error || props.loading || props.disabled;
@@ -70,7 +85,7 @@ export function CopyTextView(props) {
     : props.buttonStyle === "button-outside"
       ? "top"
       : "top-end";
-  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: "base: copy-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
+  const copyButton = (h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: tooltipPlacement, disabled: props.disabled, open: props.open, skidding: props.buttonStyle === "icon" ? -5 : 0, slot: "suffix" }, buttonStyle === "icon" ? (h("sl-icon-button", { class: sheet.classes.icon, exportparts: "base: icon-button-base", onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, name: "files", disabled: disabled })) : (h("sl-button", { exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, size: "medium", style: { width: `${buttonStyle === "button-below" && "100%"}` }, disabled: disabled, type: "primary" }, props.copyButtonLabel || "Copy"))));
   return (h("div", { class: sheet.classes.ContainerDiv },
     h("style", { type: "text/css" },
       styleString,

package/dist/collection/global/styles.js

@@ -590,7 +590,7 @@ html {
   --sqm-text-subdued: var(--sl-color-neutral-500);
  */
 
-  --sqm-text: slateblue;
+  --sqm-text: white;
   --sqm-text-subdued: var(--sl-color-neutral-500);
   /*
   --sqm-primary-button-background: var(--sl-color-primary-500);
@@ -600,18 +600,18 @@ html {
   --sqm-primary-button-radius: var(--sl-border-radius-large);
  */
 
-  --sqm-primary-button-background: tomato;
-  --sqm-primary-button-background-hover: darkred;
-  --sqm-primary-button-color: white;
+  --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: var(--sl-color-primary-200);
-  --sqm-secondary-button-background-hover: var(--sl-color-primary-100);
-  --sqm-secondary-button-color: var(--sl-color-secondary-500);
-  --sqm-secondary-button-color-border: var(--sl-color-primary-200);
-  --sqm-secondary-button-radius: var(--sl-border-radius-large);
+  --sqm-secondary-button-background: #191414; /* Spotify Black */
+  --sqm-secondary-button-background-hover: #282828; /* Slightly lighter black for hover effect */
+  --sqm-secondary-button-color: #FFFFFF; /* Spotify White for text */
+  --sqm-secondary-button-color-border: #FFFFFF; /* Spotify White for border */
+  --sqm-secondary-button-radius: 30px;
 }
 
 body {
@@ -741,6 +741,18 @@ sl-details::part(summary) {
   box-shadow: none;
 }
 
+sl-input::part(input-base){
+  border: 3px dashed red !important;
+}
+
+sl-input::part(input){
+  broder: 3px dashed red !important;
+}
+
+sl-input::part(input-base){
+  border: 3px dashed red !important;
+}
+
 *::part(input-label), *::part(select-label), *::part(textarea-label){
   font-size: var(--sl-input-font-size-small);
   font-weight: var(--sl-font-weight-semibold);

package/dist/collection/global/styles.ts

@@ -591,7 +591,7 @@ html {
   --sqm-text-subdued: var(--sl-color-neutral-500);
  */
 
-  --sqm-text: slateblue;
+  --sqm-text: white;
   --sqm-text-subdued: var(--sl-color-neutral-500);
   /*
   --sqm-primary-button-background: var(--sl-color-primary-500);
@@ -601,18 +601,18 @@ html {
   --sqm-primary-button-radius: var(--sl-border-radius-large);
  */
 
-  --sqm-primary-button-background: tomato;
-  --sqm-primary-button-background-hover: darkred;
-  --sqm-primary-button-color: white;
+  --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: var(--sl-color-primary-200);
-  --sqm-secondary-button-background-hover: var(--sl-color-primary-100);
-  --sqm-secondary-button-color: var(--sl-color-secondary-500);
-  --sqm-secondary-button-color-border: var(--sl-color-primary-200);
-  --sqm-secondary-button-radius: var(--sl-border-radius-large);
+  --sqm-secondary-button-background: #191414; /* Spotify Black */
+  --sqm-secondary-button-background-hover: #282828; /* Slightly lighter black for hover effect */
+  --sqm-secondary-button-color: #FFFFFF; /* Spotify White for text */
+  --sqm-secondary-button-color-border: #FFFFFF; /* Spotify White for border */
+  --sqm-secondary-button-radius: 30px;
 }
 
 body {
@@ -742,6 +742,18 @@ sl-details::part(summary) {
   box-shadow: none;
 }
 
+sl-input::part(input-base){
+  border: 3px dashed red !important;
+}
+
+sl-input::part(input){
+  broder: 3px dashed red !important;
+}
+
+sl-input::part(input-base){
+  border: 3px dashed red !important;
+}
+
 *::part(input-label), *::part(select-label), *::part(textarea-label){
   font-size: var(--sl-input-font-size-small);
   font-weight: var(--sl-font-weight-semibold);