@saasquatch/mint-components 1.15.0-98 → 1.16.0-0

package/dist/collection/components/sqm-stat-container/sqm-stat-container.js

@@ -4,8 +4,6 @@ import { StatContainerView } from "./sqm-stat-container-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Stat Container
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero", "sqb-program-section", "sqb-conditional-section"]
- * @validChildren ["sqm-big-stat"]
  * @slots [{"name":"", "title":"Stats"}]
  * @exampleGroup Statistics
  * @example Container with Three Stats - <sqm-stat-container space="xxx-large" display="flex"><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global"><p>Points Balance</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"><p>Giftcards Earned</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><p>Referrals</p></sqm-big-stat></sqm-stat-container>
@@ -21,29 +19,12 @@ export class StatContainer {
      */
     this.space = "xxx-large";
     /**
-     * @undocumented
      * @uiName Display
      * @uiType string
      * @uiEnum ["grid", "flex"]
      * @uiEnumNames ["Grid", "Flex"]
      */
-    this.display = "flex";
-    /**
-     * Controls the alignment of the flexbox
-     *
-     * @uiName Alignment
-     * @uiType string
-     * @uiEnum ["left", "right", "center"]
-     * @uiEnumNames ["Left", "Right", "Center"]
-     */
-    this.alignment = "center";
-    /**
-     * @uiName Gap
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
-     */
-    this.gap = "x-large";
+    this.display = "grid";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -101,9 +82,6 @@ export class StatContainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }, {
             "text": "Display",
             "name": "uiName"
           }, {
@@ -120,95 +98,7 @@ export class StatContainer {
       },
       "attribute": "display",
       "reflect": false,
-      "defaultValue": "\"flex\""
-    },
-    "hideBorder": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Hide border",
-            "name": "uiName"
-          }, {
-            "text": "boolean",
-            "name": "uiType"
-          }],
-        "text": "Hide the seperating border between stats"
-      },
-      "attribute": "hide-border",
-      "reflect": false
-    },
-    "alignment": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"left\" | \"right\" | \"center\"",
-        "resolved": "\"center\" | \"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Alignment",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"left\", \"right\", \"center\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Left\", \"Right\", \"Center\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": "Controls the alignment of the flexbox"
-      },
-      "attribute": "alignment",
-      "reflect": false,
-      "defaultValue": "\"center\""
-    },
-    "gap": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Spacing",
-        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
-        "references": {
-          "Spacing": {
-            "location": "import",
-            "path": "../../global/mixins"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Gap",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "gap",
-      "reflect": false,
-      "defaultValue": "\"x-large\""
+      "defaultValue": "\"grid\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -9,328 +9,36 @@
  *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
  *
  */
-// @ts-nocheck
-export const Default = null;
-export const Netflix = {
-  main: {
-    brandFont: "Netflix Sans, Arial, sans-serif",
-    brandColor: "#E50914",
-  },
-  border: {
-    borderColor: "#333333",
-    borderRadius: 4,
-    borderThickness: 1,
-  },
-  color: {
-    textColorShades: {
-      mainText: "white",
-      subduedText: "#B3B3B3",
-    },
-    backgroundColor: "#101010",
-    accentColorShades: {
-      text: "#E50914",
-      icon: "#E50914",
-      border: "#E50914",
-      background: "#300609",
-    },
-    success: {
-      text: "#66BB6A",
-      border: "#4CAF50",
-      background: "#1B5E20",
-      iconAndBadge: "#4CAF50",
-    },
-    warning: {
-      text: "#FFCA28",
-      border: "#FFA726",
-      background: "#F57C00",
-      iconAndBadge: "#FFA726",
-    },
-    critical: {
-      text: "#EF9A9A",
-      border: "#E50914",
-      background: "#B71C1C",
-      iconAndBadge: "#E50914",
-    },
-    informative: {
-      text: "#64B5F6",
-      border: "#42A5F5",
-      background: "#1976D2",
-      iconAndBadge: "#42A5F5",
-    },
-    neutral: {
-      text: "white",
-      iconAndBadge: "#B3B3B3",
-      border: "#333333",
-      background: "#222222",
-    },
-  },
-  primaryButton: {
-    buttonColor: {
-      background: "#E50914",
-      border: "transparent",
-      label: "#FFFFFF",
-    },
-    buttonHoverColor: {
-      background: "#CC0000",
-      border: "transparent",
-      label: "#FFFFFF",
-    },
-    borderRadius: 4,
-  },
-  secondaryButton: {
-    buttonColor: {
-      background: "transparent",
-      border: "#B3B3B3",
-      label: "#FFFFFF",
-    },
-    buttonHoverColor: {
-      background: "#333333",
-      border: "#B3B3B3",
-      label: "#FFFFFF",
-    },
-    borderRadius: 4,
-  },
-  formFields: {
-    formFieldColor: {
-      background: "#222222",
-      border: "#B3B3B3",
-      inputText: "#B3B3B3",
-    },
-    hoverStateColor: "#777777",
-    selectedStateColor: "#E50914",
-    borderRadius: 4,
-  },
-};
-export const Amazon = {
-  main: {
-    brandFont: "Amazon Ember, Arial, sans-serif",
-    brandColor: "#FF9900",
-  },
-  border: {
-    borderColor: "#D5D9D9",
-    borderRadius: 4,
-    borderThickness: 1,
-  },
-  color: {
-    backgroundColor: "#ffffff",
-    textColorShades: {
-      mainText: "#2f2f2f",
-      subduedText: "#565959",
-    },
-    accentColorShades: {
-      text: "#FF9900",
-      icon: "#FF9900",
-      border: "#FFBF66",
-      background: "#FFF4DD",
-    },
-    success: {
-      text: "#198754",
-      border: "#BCE8B2",
-      background: "#D4EDDA",
-      iconAndBadge: "#28A745",
-    },
-    warning: {
-      text: "#856404",
-      border: "#FFEBA2",
-      background: "#FFF3CD",
-      iconAndBadge: "#FFC107",
-    },
-    critical: {
-      text: "#721C24",
-      border: "#F5C6CB",
-      background: "#F8D7DA",
-      iconAndBadge: "#DC3545",
-    },
-    informative: {
-      text: "#004085",
-      border: "#B8DAFF",
-      background: "#CCE5FF",
-      iconAndBadge: "#007BFF",
-    },
-    neutral: {
-      text: "#232F3E",
-      iconAndBadge: "#565959",
-      border: "#D5D9D9",
-      background: "#F0F2F2",
-    },
-  },
-  primaryButton: {
-    buttonColor: {
-      background: "#FF9900",
-      border: "transparent",
-      label: "#FFFFFF",
-    },
-    buttonHoverColor: {
-      background: "#EB9100",
-      border: "transparent",
-      label: "#FFFFFF",
-    },
-    borderRadius: 4,
-  },
-  secondaryButton: {
-    buttonColor: {
-      background: "#FFFFFF",
-      border: "#888C8C",
-      label: "#232F3E",
-    },
-    buttonHoverColor: {
-      background: "#F0F2F2",
-      border: "#888C8C",
-      label: "#232F3E",
-    },
-    borderRadius: 4,
-  },
-  formFields: {
-    formFieldColor: {
-      background: "#FFFFFF",
-      border: "#D5D9D9",
-      inputText: "#2f2f2f",
-    },
-    borderRadius: 4,
-    hoverStateColor: "#A2A2A2",
-    selectedStateColor: "#007185",
-  },
-};
-export const Spotify = {
-  main: {
-    brandColor: "#1ed760",
-  },
-  border: {
-    borderColor: "#f4f4f4",
-    borderRadius: 18,
-    borderThickness: 1,
-  },
-  color: {
-    textColorShades: {
-      mainText: "white",
-      subduedText: "white",
-    },
-    backgroundColor: "#121212",
-    accentColorShades: {
-      icon: "#1ed760",
-    },
-  },
-  primaryButton: {
-    buttonColor: {
-      background: "#1ed760",
-      border: "transparent",
-      label: "#121212",
-    },
-    buttonHoverColor: {
-      background: "#1DB954",
-      border: "transparent",
-      label: "#121212",
-    },
-    borderRadius: 30,
-  },
-  secondaryButton: {
-    buttonColor: {
-      background: "#191414",
-      border: "#FFFFFF",
-      label: "#FFFFFF",
-    },
-    buttonHoverColor: {
-      background: "#282828",
-      border: "#FFFFFF",
-      label: "#121212",
-    },
-    borderRadius: 30,
-  },
-  formFields: {
-    formFieldColor: {
-      background: "#121212",
-      border: "#7c7c7c",
-      inputText: "#fff",
-    },
-    borderRadius: 30,
-    hoverStateColor: "white",
-    selectedStateColor: "white",
-  },
-};
-export const Google = {
-  main: { brandColor: "#4285F4", brandFont: "Roboto, Arial, sans-serif" },
-  border: {
-    borderColor: "#DADCE0",
-    borderRadius: 4,
-    borderThickness: 1,
-  },
-  color: {
-    textColorShades: {
-      mainText: "#212124",
-      subduedText: "#5F6368",
-    },
-    backgroundColor: "#FFFFFF",
-    accentColorShades: {
-      text: "#1A73E8",
-      border: "#8AB4F8",
-      background: "#E8F0FE",
-      icon: "#4285F4",
-    },
-    success: {
-      text: "#044e1d",
-      border: "#A8DCD7",
-      background: "#E6F4EA",
-      iconAndBadge: "#34A853",
-    },
-    warning: {
-      text: "#996a3d",
-      border: "#FCD667",
-      background: "#FFF7EE",
-      iconAndBadge: "#FBBC04",
-    },
-    critical: {
-      text: "#760b09",
-      border: "#F28B82",
-      background: "#FCE8E6",
-      iconAndBadge: "#EA4335",
-    },
-    informative: {
-      text: "#01368c",
-      border: "#BFDBFE",
-      background: "#E8F0FE",
-      iconAndBadge: "#4285F4",
-    },
-    neutral: {
-      text: "#202124",
-      border: "#DADCE0",
-      background: "#F8F9FA",
-      iconAndBadge: "#5F6368",
-    },
-  },
-  primaryButton: {
-    buttonColor: {
-      background: "#4285F4",
-      border: "transparent",
-      label: "#FFFFFF",
-    },
-    buttonHoverColor: {
-      background: "#3C7CD1",
-      border: "transparent",
-      label: "#FFFFFF",
-    },
-    borderRadius: 4,
-  },
-  secondaryButton: {
-    buttonColor: {
-      background: "#FFFFFF",
-      border: "#DADCE0",
-      label: "#4285F4",
-    },
-    buttonHoverColor: {
-      background: "#E8F0FE",
-      border: "#DADCE0",
-      label: "#4285F4",
-    },
-    borderRadius: 4,
-  },
-  formFields: {
-    formFieldColor: {
-      background: "#FFFFFF",
-      border: "#DADCE0",
-      inputText: "#202124",
-    },
-    borderRadius: 4,
-    hoverStateColor: "#9AA0A6",
-    selectedStateColor: "#4285F4",
-  },
-};
+import { autoColorScaleCss } from "./AutoColor";
+//
+export const Default = `
+ // No CSS
+`;
+export const Orangey = `
+:root{
+    ${autoColorScaleCss("orange")}
+}
+`;
+export const Netflix = `
+:root{
+    ${autoColorScaleCss("#e50914")}
+}
+`;
+export const SaaSquatchCorporate = `
+:root{
+    ${autoColorScaleCss("#65bd60")}
+    --sl-font-sans: Arial;
+}
+`;
+export const NYTimes = `
+:root{
+    ${autoColorScaleCss("black")}
+    --sl-font-sans: Georgia, 'Times New Roman', serif;
+}
+`;
+export const Klip = `
+:root{
+    ${autoColorScaleCss("#4225C4")};
+}
+
+`;