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

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

@@ -43,11 +43,6 @@ const style = {
   DescriptionText: {
     color: "var(--sl-color-neutral-500)",
   },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
-  },
   AlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-red-100)",
@@ -160,12 +155,6 @@ const vanillaStyle = `
       font-weight: 600
     }
 
-    p {
-      line-height: 18px;
-      color: var(--sl-color-gray-800);
-      font-size: var(--sl-font-size-small);
-    }
-
     /* this class is dynamically applied in controller */
     .error-input::part(base) {
       border: 1px solid var(--sl-color-danger-500);
@@ -271,5 +260,5 @@ export const BankingInfoFormView = (props) => {
           : slots.paymentFixedDaySelectSlot))))),
       h("div", { class: classes.BtnContainer },
         h("sl-button", { type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
+        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", onClick: callbacks.onBack }, text.backButton))))));
 };

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

@@ -43,15 +43,6 @@ const style = {
   BoldText: {
     fontWeight: "bold",
   },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
-    "&::part(label)": {
-      padding: "0px",
-      margin: "0px",
-    },
-  },
   ErrorAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-red-100)",
@@ -127,12 +118,6 @@ const vanillaStyle = `
        box-sizing: border-box;
     }
 
-    p {
-      line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
-    }
-
     a {
       cursor: pointer;
     }

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

@@ -56,11 +56,6 @@ const style = {
   DescriptionText: {
     color: "var(--sl-color-neutral-500)",
   },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
-  },
   AlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-red-100)",
@@ -120,11 +115,6 @@ const vanillaStyle = `
        box-sizing: border-box;
     }
 
-    p {
-      line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
-    }
   `;
 export const IndirectTaxFormView = (props) => {
   var _a;
@@ -200,5 +190,5 @@ export const IndirectTaxFormView = (props) => {
         })),
       h("div", { class: classes.BtnContainer },
         h("sl-button", { type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        h("sl-button", { class: classes.SecondaryBtn, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
+        h("sl-button", { type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
 };

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

@@ -117,8 +117,7 @@ const vanillaStyle = `
 
     p {
       line-height: 18px;
-      color: var(--sl-color-gray-800);
-       font-size: var(--sl-font-size-small);
+      font-size: var(--sl-font-size-small);
     }
 
     sl-radio-group::part(base) {

package/dist/collection/global/mixins.js

@@ -24,10 +24,10 @@ export const HostBlock = {
 };
 export const P = {
   "font-size": "var(--sl-font-size-small)",
-  color: "var(--sl-color-gray-800)",
+  color: "var(--sqm-text)",
   "margin-top": "0px",
   "&.Subtitle": {
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     margin: "0px",
   },
 };

package/dist/collection/global/styles.js

@@ -509,7 +509,7 @@ html {
   --sl-focus-ring-color-info: var(--sl-color-info-100);
   --sl-focus-ring-color-warning: var(--sl-color-warning-100);
   --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
-  --sl-focus-ring-width: 3px;
+  --sl-focus-ring-width: 0px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
   --sl-button-font-size-large: var(--sl-font-size-medium);
@@ -584,6 +584,34 @@ html {
   --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: slateblue;
+  --sqm-text-subdued: var(--sl-color-neutral-500);
+  /*
+  --sqm-primary-button-background: var(--sl-color-primary-500);
+  --sqm-primary-button-background-hover: var(--sl-color-primary-300);
+  --sqm-primary-button-color: var(--sl-color-primary-text);
+  --sqm-primary-button-color-border: none;
+  --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-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);
 }
 
 body {
@@ -591,7 +619,7 @@ body {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
-  color: var(--sl-color-gray-800);
+  color: var(--sqm-text);
   line-height: var(--sl-line-height-normal);
   margin: 0;
   background-color: var(--sqm-portal-background);
@@ -623,7 +651,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -634,7 +661,7 @@ h2, .Title {
 .Subtitle {
   text-align: center;
   margin-bottom: 0px;
-  color: var(--sl-color-gray-500);
+  color: var(--sqm-text-subdued);
 }
 .SupportText{
   margin-top: var(--sl-spacing-small);
@@ -663,8 +690,11 @@ sl-details::part(summary) {
   font-weight: var(--sl-font-weight-semibold);
   margin: 0px;
 }
+
+/**************************
+ * Now Deprecated - Use secondarybutton-base instead *
 *::part(defaultbutton-base){
-  background-color: rgba(0,0,0,0);
+
   color: var(--sl-color-gray-800);
   border-color: var(--sl-color-gray-800);
 }
@@ -677,18 +707,34 @@ sl-details::part(summary) {
 *::part(defaultbutton-base):focus{
   box-shadow: none;
 }
+*/
+
 *::part(primarybutton-base){
-  background-color: var(--sl-color-primary-400);
-  color: var(--sl-color-white);
-  border-color: var(--sl-color-primary-400);
+  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);
 }
+
 *::part(primarybutton-base):hover{
-  background-color: var(--sl-color-primary-300);
-  border-color: var(--sl-color-primary-300);
+  background-color: var(--sqm-primary-button-background-hover);
+}
+
+
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
 }
-*::part(primarybutton-base):active{
-  background-color: var(--sl-color-primary-500);
-  border-color: var(--sl-color-primary-500);
+
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover{
+  background-color: var(--sqm-secondary-button-background-hover);
 }
 
 *::part(primarybutton-base):focus{

package/dist/collection/global/styles.ts

@@ -510,7 +510,7 @@ html {
   --sl-focus-ring-color-info: var(--sl-color-info-100);
   --sl-focus-ring-color-warning: var(--sl-color-warning-100);
   --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
-  --sl-focus-ring-width: 3px;
+  --sl-focus-ring-width: 0px;
   --sl-button-font-size-small: var(--sl-font-size-x-small);
   --sl-button-font-size-medium: var(--sl-font-size-small);
   --sl-button-font-size-large: var(--sl-font-size-medium);
@@ -585,6 +585,34 @@ html {
   --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: slateblue;
+  --sqm-text-subdued: var(--sl-color-neutral-500);
+  /*
+  --sqm-primary-button-background: var(--sl-color-primary-500);
+  --sqm-primary-button-background-hover: var(--sl-color-primary-300);
+  --sqm-primary-button-color: var(--sl-color-primary-text);
+  --sqm-primary-button-color-border: none;
+  --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-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);
 }
 
 body {
@@ -592,7 +620,7 @@ body {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
-  color: var(--sl-color-gray-800);
+  color: var(--sqm-text);
   line-height: var(--sl-line-height-normal);
   margin: 0;
   background-color: var(--sqm-portal-background);
@@ -624,7 +652,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -635,7 +662,7 @@ h2, .Title {
 .Subtitle {
   text-align: center;
   margin-bottom: 0px;
-  color: var(--sl-color-gray-500);
+  color: var(--sqm-text-subdued);
 }
 .SupportText{
   margin-top: var(--sl-spacing-small);
@@ -664,8 +691,11 @@ sl-details::part(summary) {
   font-weight: var(--sl-font-weight-semibold);
   margin: 0px;
 }
+
+/**************************
+ * Now Deprecated - Use secondarybutton-base instead *
 *::part(defaultbutton-base){
-  background-color: rgba(0,0,0,0);
+
   color: var(--sl-color-gray-800);
   border-color: var(--sl-color-gray-800);
 }
@@ -678,18 +708,34 @@ sl-details::part(summary) {
 *::part(defaultbutton-base):focus{
   box-shadow: none;
 }
+*/
+
 *::part(primarybutton-base){
-  background-color: var(--sl-color-primary-400);
-  color: var(--sl-color-white);
-  border-color: var(--sl-color-primary-400);
+  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);
 }
+
 *::part(primarybutton-base):hover{
-  background-color: var(--sl-color-primary-300);
-  border-color: var(--sl-color-primary-300);
+  background-color: var(--sqm-primary-button-background-hover);
+}
+
+
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
 }
-*::part(primarybutton-base):active{
-  background-color: var(--sl-color-primary-500);
-  border-color: var(--sl-color-primary-500);
+
+*::part(secondarybutton-base){
+  background-color: var(--sqm-secondary-button-background);
+  color: var(--sqm-secondary-button-color);
+  border-color: var(--sqm-secondary-button-color-border);
+  border-radius: var(--sqm-secondary-button-radius);
+}
+
+*::part(secondarybutton-base):hover{
+  background-color: var(--sqm-secondary-button-background-hover);
 }
 
 *::part(primarybutton-base):focus{

package/dist/collection/tables/GenericTableView.js

@@ -112,6 +112,6 @@ export function GenericTableView(props) {
           })));
         })))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
-      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
-      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: secondarybutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: secondarybutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
 }

package/dist/esm/{GenericTableView-7b9087af.js → GenericTableView-e7addb2b.js}

@@ -113,8 +113,8 @@ function GenericTableView(props) {
           })));
         })))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
-      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
-      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: secondarybutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: secondarybutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
 }
 
 export { GenericTableView as G };