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

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}px` || "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: "inherit",
+    },
+  };
+  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/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",
   },
 };
@@ -62,20 +62,20 @@ export const ErrorStyles = {
   },
 };
 export const Wrapper = {
-  "box-sizing": "border-box",
+  boxSizing: "border-box",
   width: "100%",
-  "max-width": "var(--sqm-content-max-width)",
+  maxWidth: "var(--sqm-content-max-width)",
   height: "auto",
-  "background-color": "var(--sqm-content-background)",
   display: "flex",
   padding: "var(--sl-spacing-xxx-large)",
-  border: "1px solid #eaeaea",
-  "border-radius": "8px",
+  background: "var(--sqm-portal-background)",
+  border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+  borderRadius: "var(--sqm-border-radius-normal)",
 };
 export const AuthWrapper = {
   margin: "auto",
   ...Wrapper,
-  "max-width": "500px",
+  maxWidth: "500px",
   ...Column,
   ...gap({ direction: "column", size: "var(--sl-spacing-x-large)" }),
 };

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);
@@ -522,7 +522,6 @@ html {
   --sl-input-background-color-disabled: var(--sl-color-gray-100);
   --sl-input-border-color: var(--sl-color-gray-300);
   --sl-input-border-color-hover: var(--sl-color-gray-400);
-  --sl-input-border-color-focus: var(--sl-color-primary-500);
   --sl-input-border-color-disabled: var(--sl-color-gray-300);
   --sl-input-border-width: 1px;
   --sl-input-border-radius-small: var(--sl-border-radius-medium);
@@ -574,16 +573,69 @@ html {
   --sl-z-index-toast: 950;
   --sl-z-index-tooltip: 1000;
 }
+  
 :root {
   --sqm-header-background: var(--sl-color-white);
   --sqm-footer-background: var(--sl-color-white);
   --sqm-color-text-error: #e63717;
   --sqm-content-max-width: 700px;
   --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: transparent;
+  --sqm-portal-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: 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: #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: #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;
+  
+  --sqm-border-radius-normal: 18px;
+  --sqm-border-color: white;
+  --sqm-border-thickness: 1px;
+
+
+  --sqm-input-background: #121212;
+  --sqm-input-border: 1px solid #7c7c7c;
+  --sqm-input-border-radius: 30px;
+  --sqm-input-color: white;
+  --sqm-input-focus-border: 1px solid white;
+  --sqm-input-label-color: white;
+  --sqm-border-width: 1px;
+  --sqm-input-label-font-size: white;
+  --sqm-input-disabled-color: white;
+  --sqm-input-disabled-background: #303030;
+  
+  --sl-input-color: var(--sqm-input-color);
+  --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: white !important;
+  --sl-input-border-color: #7c7c7c;
+  --sl-input-border-color-hover: white;
 }
 
 body {
@@ -591,20 +643,78 @@ 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);
 }
 
-// .terms-link,
-// .terms-link:visited {
-//   color: var(--sl-color-gray-500);
-//   text-decoration: none;
-// }
-// .terms-link:hover {
-//   color: var(--sl-color-gray-600);
-// }
+/** AL: Shading variables **/
+sl-alert[type="success"]::part(icon) {
+  color: var(--sqm-success-icon-color, var(--sl-color-success-500));
+}
+
+sl-alert[type="success"]::part(base) {
+  background-color: var(--sqm-success-icon-color, var(--sl-color-success-100));
+}
+
+sl-alert[type="warning"]::part(icon) {
+  color: var(--sqm-warning-icon-color, var(--sl-color-warning-500));
+}
+
+sl-alert[type="warning"]::part(base) {
+  background-color: var(--sqm-warning-icon-color, var(--sl-color-warning-100));
+}
+
+sl-alert[type="danger"]::part(icon) {
+  color: var(--sqm-danger-icon-color, var(--sl-color-danger-500));
+}
+
+sl-alert[type="danger"]::part(base) {
+  background-color: var(--sqm-danger-icon-color, var(--sl-color-danger-100));
+}
+
+
+sl-alert[type="info"]::part(icon) {
+  color: var(--sqm-info-icon-color, var(--sl-color-info-500));
+}
+
+sl-alert[type="info"]::part(base) {
+  background-color: var(--sqm-info-icon-color, var(--sl-color-info-100));
+}
+
+sl-alert[type="neutral"]::part(icon) {
+  color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-500));
+}
+
+sl-alert[type="neutral"]::part(base) {
+  background-color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-100));
+}
+
+sl-badge[type="success"]::part(base) {
+  background-color: var(--sqm-success-badge-background, var(--sl-color-success-100));
+  color: var(--sqm-success-badge-text-color, var(--sl-color-success-700));
+}
+
+sl-badge[type="warning"]::part(base) {
+  background-color: var(--sqm-warning-badge-background, var(--sl-color-warning-100));
+  color: var(--sqm-warning-badge-text-color, var(--sl-color-warning-700));
+}
+
+sl-badge[type="danger"]::part(base) {
+  background-color: var(--sqm-danger-badge-background, var(--sl-color-danger-100));
+  color: var(--sqm-danger-badge-text-color, var(--sl-color-danger-700));
+}
+
+sl-badge[type="info"]::part(base) {
+  background-color: var(--sqm-info-badge-background, var(--sl-color-info-100));
+  color: var(--sqm-info-badge-text-color, var(--sl-color-info-700));
+}
+
+sl-badge[type="neutral"]::part(base) {
+  background-color: var(--sqm-neutral-badge-background, var(--sl-color-neutral-100));
+  color: var(--sqm-neutral-badge-text-color, var(--sl-color-neutral-700));
+}
 
 h1, h2, h3, h4{
   line-height: var(--sl-line-height-dense);
@@ -623,7 +733,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -634,7 +743,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 +772,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,34 +789,80 @@ 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):active{
-  background-color: var(--sl-color-primary-500);
-  border-color: var(--sl-color-primary-500);
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
 }
 
+*::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(tertiarybutton-base){
+  color: var(--sqm-text, var(--sl-color-neutral-800));
+  width: max-content;
+  display: flex;
+  margin: auto;
+}
+
+*::part(tertiarybutton-base):hover{
+  color: #1ed760;
+}
 *::part(primarybutton-base):focus{
   box-shadow: none;
 }
 
-*::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-size: var(--sl-input-font-size-small);
+sl-input::part(input-label), sl-selcet::part(select-label), sl-textarea::part(textarea-label){
+  font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small));
   font-weight: var(--sl-font-weight-semibold);
+  color: var(--sqm-input-label-color, var(--sqm-text), black);
 }
 
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
+sl-input::part(input-base), sl-select::part(select-base), sl-textarea::part(textarea-base){
+  background-color: var(--sqm-input-background, #fff);
+  border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem);
+  color: var(--sqm-input-color, white);
+  border-width: var(--sqm-border-width, 1px);
+}
+
+sl-input::part(base):focus,
+sl-select::part(form-control-wrapper):focus,
+sl-textarea::part(textarea-label):focus {
+  border-color: none;
+  border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus));
 }
 
+sl-input::part(input-label):disabled, sl-select::part(select-label):disabled, sl-textarea::part(textarea-label):disabled{
+  background: var(--sqm-input-disabled-background, #f5f5f5);
+  color: var(--sqm-input-disabled-color, var(--sl-color-gray-600));
+}
+
+sl-input {
+  /* Set the border color when the input is in focus */
+  --sl-input-border-color-focus: white; /* Spotify Green */
+}
+
+
+
 *::part(menuitem-base):hover{
   background-color: var(--sl-color-gray-200);
   color: var(--sl-color-gray-700);