@saasquatch/mint-components 1.15.0-2 → 1.15.0-21

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);
@@ -574,16 +574,44 @@ 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;
 }
 
 body {
@@ -591,12 +619,79 @@ 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);
 }
 
+/** 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));
+}
+
 // .terms-link,
 // .terms-link:visited {
 //   color: var(--sl-color-gray-500);
@@ -623,7 +718,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -634,7 +728,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 +757,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,24 +774,52 @@ 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{
   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

@@ -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);
@@ -575,16 +575,44 @@ 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;
 }
 
 body {
@@ -592,12 +620,79 @@ 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);
 }
 
+/** 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));
+}
+
 // .terms-link,
 // .terms-link:visited {
 //   color: var(--sl-color-gray-500);
@@ -624,7 +719,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -635,7 +729,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 +758,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,24 +775,52 @@ 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{
   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/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 };