@saasquatch/mint-components 1.15.0-37 → 1.15.0-39

package/dist/collection/components/sqm-pagination/sqm-pagination.js

@@ -20,11 +20,11 @@ export class Pagination {
      */
     this.paginationText = "{currentPage} of {totalPages}";
     /**
-     * The type of the button (primary or secondary) that will be used to copy the link.
+     * The type of the button that is used (primary, secondary, or tertiary).
      * @uiName Button Type
      * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
      * @uiGroup Style
      */
     this.buttonType = "secondary";
@@ -65,8 +65,8 @@ export class Pagination {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"primary\" | \"secondary\"",
-        "resolved": "\"primary\" | \"secondary\"",
+        "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
         "references": {}
       },
       "required": false,
@@ -79,16 +79,16 @@ export class Pagination {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"primary\", \"secondary\"]",
+            "text": "[\"primary\", \"secondary\", \"tertiary\"]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Secondary\"]",
+            "text": "[\"Primary\", \"Secondary\", \"Tertiary\"]",
             "name": "uiEnumNames"
           }, {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+        "text": "The type of the button that is used (primary, secondary, or tertiary)."
       },
       "attribute": "button-type",
       "reflect": false,

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password.js

@@ -445,7 +445,7 @@ export class PortalChangePassword {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalChangePasswordViewProps>",
-        "resolved": "{ states?: { open: boolean; error: string; loading: boolean; success: boolean; content: { modalChangePasswordHeader: string; cancelText: string; changePasswordButtonText: string; passwordFieldLabel: string; confirmPasswordFieldLabel: string; successMessage: string; portalChangePasswordHeader: string; portalChangePasswordButtonText: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }; borderRadius?: string; buttonType?: \"primary\" | \"secondary\" | \"tertiary\"; background?: string; }",
+        "resolved": "{ states?: { open: boolean; error: string; loading: boolean; success: boolean; content: { modalChangePasswordHeader: string; cancelText: string; changePasswordButtonText: string; passwordFieldLabel: string; confirmPasswordFieldLabel: string; successMessage: string; portalChangePasswordHeader: string; portalChangePasswordButtonText: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }; borderRadius?: string; background?: string; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer-view.js

@@ -9,8 +9,8 @@ const vanillaStyle = `
   }
   a{
     cursor:pointer;
-    color: inherit;
-    text-decoration: none;
+    color: var(--sqm-text-subdued);
+    text-decoration: none ;
   }
 `;
 export function PortalFooterView(props) {
@@ -26,14 +26,14 @@ export function PortalFooterView(props) {
       "flex-direction": "column",
       "align-items": "center",
       "font-size": "var(--sl-font-size-small)",
-      color: "var(--sl-color-gray-600)",
+      color: "var(--sqm-text-subdued)",
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
       "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
       "row-gap": `var(--sl-spacing-small)`,
       "& a:hover": {
-        color: "var(--sl-color-gray-900)",
+        color: "var(--sqm-text)",
       },
     },
     SupportText: {
@@ -41,7 +41,7 @@ export function PortalFooterView(props) {
       margin: 0,
     },
     PoweredByLink: {
-      color: "var(--sl-color-gray-400)",
+      color: "var(--sqm-text-subdued)",
       "font-size": "var(--sl-font-size-small)",
       display: "flex",
       alignItems: "center",
@@ -50,7 +50,7 @@ export function PortalFooterView(props) {
         shapeRendering: "geometricprecision",
       },
       "&:hover, &:hover *": {
-        color: "var(--sl-color-gray-900)",
+        color: "var(--sqm-text)",
       },
     },
   };

package/dist/collection/components/sqm-referral-code/sqm-referral-code.js

@@ -62,11 +62,11 @@ export class ReferralCode {
      */
     this.buttonStyle = "icon";
     /**
-     * The type of the button (primary or secondary) that will be used to copy the link.
+     * The type of the button that is used (primary, secondary, or tertiary).
      * @uiName Button Type
      * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
      * @uiGroup Style
      */
     this.buttonType = "primary";
@@ -394,8 +394,8 @@ export class ReferralCode {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"primary\" | \"secondary\"",
-        "resolved": "\"primary\" | \"secondary\"",
+        "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
         "references": {}
       },
       "required": false,
@@ -408,16 +408,16 @@ export class ReferralCode {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"primary\", \"secondary\"]",
+            "text": "[\"primary\", \"secondary\", \"tertiary\"]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Secondary\"]",
+            "text": "[\"Primary\", \"Secondary\", \"Tertiary\"]",
             "name": "uiEnumNames"
           }, {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+        "text": "The type of the button that is used (primary, secondary, or tertiary)."
       },
       "attribute": "button-type",
       "reflect": false,
@@ -428,7 +428,7 @@ export class ReferralCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; textColor?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\" | \"tertiary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-share-code/sqm-share-code.js

@@ -50,11 +50,11 @@ export class ShareCode {
      */
     this.buttonStyle = "icon";
     /**
-     * The type of the button (primary or secondary) that will be used to copy the link.
+     * The type of the button that is used (primary, secondary, or tertiary).
      * @uiName Button Type
      * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
      * @uiGroup Style
      */
     this.buttonType = "primary";
@@ -311,8 +311,8 @@ export class ShareCode {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"primary\" | \"secondary\"",
-        "resolved": "\"primary\" | \"secondary\"",
+        "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
         "references": {}
       },
       "required": false,
@@ -325,16 +325,16 @@ export class ShareCode {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"primary\", \"secondary\"]",
+            "text": "[\"primary\", \"secondary\", \"tertiary\"]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Secondary\"]",
+            "text": "[\"Primary\", \"Secondary\", \"Tertiary\"]",
             "name": "uiEnumNames"
           }, {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+        "text": "The type of the button that is used (primary, secondary, or tertiary)."
       },
       "attribute": "button-type",
       "reflect": false,
@@ -374,7 +374,7 @@ export class ShareCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; textColor?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\" | \"tertiary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -39,11 +39,11 @@ export class ShareLink {
      */
     this.copyButtonLabel = "Copy Link";
     /**
-     * The type of the button (primary or secondary) that will be used to copy the link.
+     * The type of the button that is used (primary, secondary, or tertiary).
      * @uiName Button Type
      * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
      * @uiGroup Style
      */
     this.buttonType = "primary";
@@ -306,8 +306,8 @@ export class ShareLink {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"primary\" | \"secondary\"",
-        "resolved": "\"primary\" | \"secondary\"",
+        "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
         "references": {}
       },
       "required": false,
@@ -320,16 +320,16 @@ export class ShareLink {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"primary\", \"secondary\"]",
+            "text": "[\"primary\", \"secondary\", \"tertiary\"]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Secondary\"]",
+            "text": "[\"Primary\", \"Secondary\", \"Tertiary\"]",
             "name": "uiEnumNames"
           }, {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+        "text": "The type of the button that is used (primary, secondary, or tertiary)."
       },
       "attribute": "button-type",
       "reflect": false,
@@ -373,7 +373,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; textColor?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\" | \"tertiary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -2,6 +2,12 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export const style = {
   Description: {
+    "& .icon": {
+      color: "var(--sqm-text)",
+      "&:hover": {
+        color: "var(--sqm-accent-color-icon)",
+      },
+    },
     "& input[type=checkbox]": {
       display: "none",
     },
@@ -48,6 +54,6 @@ export function Details(props) {
     h("span", { class: sheet.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
+        h("sl-icon", { class: "icon", exportparts: "base: chevron-icon", name: "chevron-down" })),
       h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }

package/dist/collection/components/sqm-task-card/progress-bar/progress-bar-view.js

@@ -48,7 +48,8 @@ const style = {
       width: "100%",
       height: "4px",
       borderRadius: "4px",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
+      background: "red",
     },
     "& .progress": {
       display: "block",
@@ -61,7 +62,7 @@ const style = {
       width: "12px",
       height: "12px",
       display: "flex",
-      backgroundColor: "var(--sl-color-primary-300)",
+      backgroundColor: "var(--sqm-accent-color-icon)",
       borderRadius: "50%",
       position: "relative",
       left: "47%",

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

@@ -9,7 +9,7 @@ import * as SVGs from "./SVGs";
 export function TaskCardView(props) {
   var _a, _b;
   const { callbacks, states, content } = props;
-  console.log("text color from the view ", content.textColor);
+  console.log("buttonType ", content.buttonType);
   const style = {
     TaskCard: {
       display: "inline-block",
@@ -26,8 +26,8 @@ export function TaskCardView(props) {
         color: content.textColor || "var(--sqm-text)",
       },
       "& .main.complete": {
-        background: content.backgroundColor || "var(--sl-color-primary-50)",
-        borderColor: content.borderColor || "var(--sl-color-primary-500)",
+        background: "var(--sl-color-primary-50)",
+        borderColor: "var(--sqm-accent-color-border)",
       },
       "& .main.expired": {
         color: content.textColor || "var(--sqm-text)",
@@ -88,7 +88,7 @@ export function TaskCardView(props) {
         top: "5%",
         alignSelf: "center",
         lineHeight: "0",
-        color: content.textColor || "var(--sqm-text)",
+        color: "var(--sqm-accent-color-icon)",
         fontSize: "var(--sl-font-size-large)",
         marginRight: "var(--sl-spacing-x-small)",
       },
@@ -150,7 +150,7 @@ export function TaskCardView(props) {
     },
   };
   const sheet = createStyleSheet(style);
-  const contenttring = sheet.toString();
+  const contentString = sheet.toString();
   const dateStart = content.rewardDuration &&
     DateTime.fromISO(content.rewardDuration.split("/")[0]);
   const dateEnd = content.rewardDuration &&
@@ -185,7 +185,7 @@ export function TaskCardView(props) {
   `;
   return (h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
     h("style", { type: "text/css" },
-      contenttring,
+      contentString,
       vanillaStyle),
     !states.loading && taskNotStarted && (h("div", { class: sheet.classes.NotStarted },
       h("span", { class: "icon" },
@@ -233,7 +233,7 @@ export function TaskCardView(props) {
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
         states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
         h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
@@ -263,9 +263,7 @@ export function TaskCardView(props) {
                 .setLocale(luxonLocale(states.locale))
                 .toLocaleString(DateTime.DATETIME_MED),
             })))),
-          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonStyle === "primary"
-              ? "primary"
-              : "secondary"}button-base`, id: "sl-button", type: content.buttonStyle === "primary" ? "primary" : "default", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
+          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonType || "primary"}button-base`, type: "primary", id: "sl-button", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
               opacity: taskComplete || taskUnavailable ? "0.45" : "1",
             } }, content.buttonText)))))))));
 }

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

@@ -127,11 +127,11 @@ export class TaskCard {
     /**
      * @uiName Button Style
      * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
      * @uiGroup Style
      */
-    this.buttonStyle = "primary";
+    this.buttonType = "primary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -143,7 +143,6 @@ 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,
@@ -846,12 +845,12 @@ export class TaskCard {
       "attribute": "border-radius",
       "reflect": false
     },
-    "buttonStyle": {
+    "buttonType": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"primary\" | \"secondary\"",
-        "resolved": "\"primary\" | \"secondary\"",
+        "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
         "references": {}
       },
       "required": false,
@@ -864,10 +863,10 @@ export class TaskCard {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"primary\", \"secondary\"]",
+            "text": "[\"primary\", \"secondary\", \"tertiary\"]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Secondary\"]",
+            "text": "[\"Primary\", \"Secondary\", \"Tertiary\"]",
             "name": "uiEnumNames"
           }, {
             "text": "Style",
@@ -875,7 +874,7 @@ export class TaskCard {
           }],
         "text": ""
       },
-      "attribute": "button-style",
+      "attribute": "button-type",
       "reflect": false,
       "defaultValue": "\"primary\""
     },
@@ -920,6 +919,7 @@ export class TaskCard {
 }
 function useTaskCardDemo(props) {
   return deepmerge({
+    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),

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

@@ -42,7 +42,7 @@ export function useTaskCard(props) {
       textColor: props.textColor,
       borderColor: props.borderColor,
       borderRadius: props.borderRadius,
-      buttonStyle: props.buttonStyle,
+      buttonType: props.buttonType,
     },
   };
   return {

package/dist/collection/components/sqm-timeline/sqm-timeline-entry-view.js

@@ -24,7 +24,7 @@ export function TimelineEntryView(props) {
         display: "none",
         color: "transparent",
         userSelect: "none",
-        background: props.lineColor || "var(--sl-color-primary-500)",
+        background: props.lineColor || "var(--sqm-accent-color-icon)",
         width: "4px",
         borderRadius: "4px",
         margin: "-2px",
@@ -39,7 +39,7 @@ export function TimelineEntryView(props) {
         position: "relative",
         top: "4px",
         zIndex: "1",
-        color: props.lineColor || "var(--sl-color-primary-500)",
+        color: props.lineColor || "var(--sqm-accent-color-icon)",
         marginRight: "var(--sl-spacing-large)",
       },
       "& .reward": {

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.js

@@ -33,24 +33,26 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   RadioContainer: {
@@ -59,12 +61,15 @@ const style = {
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Checkbox: {
@@ -78,8 +83,8 @@ const style = {
   InputContainer: {
     padding: "16px",
     margin: "16px 0px 16px 0px",
-    borderTop: "1px solid var(--sl-color-gray-300)",
-    borderBottom: "1px solid var(--sl-color-gray-300)",
+    borderTop: "1px solid var(--sqm-border-color)",
+    borderBottom: "1px solid var(--sqm-border-color)",
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -116,23 +121,6 @@ const style = {
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",
   },
-  InfoAlert: {
-    "&::part(base)": {
-      backgroundColor: "transparent",
-      borderTop: "none",
-      border: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-yellow-500)",
-    },
-  },
   InfoWarningIcon: {
     height: "26px",
     width: "26px",
@@ -157,12 +145,12 @@ const vanillaStyle = `
 
     /* this class is dynamically applied in controller */
     .error-input::part(base) {
-      border: 1px solid var(--sl-color-danger-500);
-      border-radius: var(--sl-input-border-radius-medium);
+      border: 1px solid var(--sqm-danger-color-border);
+      border-radius: var(--sqm-input-border-radius);
     }
 
     .error-input::part(help-text) {
-      color: var(--sl-color-danger-500) !important;
+      color: var(--sqm-danger-color-text);
     }
     
   `;

package/dist/collection/components/tax-and-cash/sqm-docusign-form/docusign-iframe/DocusignIframe.js

@@ -40,7 +40,7 @@ export const DocusignExpiredView = (props) => {
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text)",
         }, name: "clock" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignExpired)),
@@ -55,7 +55,7 @@ export const DocusignErrorView = (props) => {
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-gray-500)",
+          color: "var(--sqm-text)",
         }, name: "exclamation-octagon" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignError)),