test: demo theme helper

Esri · Jul 5, 2024 · 2c85573 · 2c85573
1 parent d5f38b0
commit 2c85573
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 33 deletions.
diff --git a/packages/calcite-components/src/demos/_assets/demo-theme.ts b/packages/calcite-components/src/demos/_assets/demo-theme.ts
@@ -1,11 +1,11 @@
 const defaultTheme = {
-  primary: "blue",
-  background: "grey",
+  background: "blue",
+  cornerRadius: "42px",
   shadowColor: "black",
   shadowValues: "0 1px 2px 0 1",
-  cornerRadius: "42px",
-  zIndex: "9999",
   space: "24px",
+  text: "green",
+  zIndex: "9999",
 };
 
 export class DemoTheme extends HTMLElement {
@@ -27,50 +27,61 @@ export class DemoTheme extends HTMLElement {
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
-    if (newValue !== oldValue) {
+    if (newValue !== oldValue && name === "tokens") {
       this.updateTheme(newValue);
     }
   }
 
   updateTheme(newValue: string): void {
-    const tokens = JSON.parse(newValue);
-    const theme = {};
-
-    if (tokens && typeof tokens === "string") {
+    if (typeof newValue === "string") {
       const textIconColorRegex = new RegExp(/(text|icon)-color/);
       const backgroundBorderRegex = new RegExp(/(background|border)-color/);
       const cornerRegex = new RegExp(/corner-radius/);
       const zIndexRegex = new RegExp(/z-index/);
       const spaceRegex = new RegExp(/space/);
       const shadowRegex = new RegExp(/shadow(-color)*/);
-      const tokensList = tokens.split(",").map((token) => token.trim());
-      let stringifiedTheme = "";
 
-      tokensList.forEach((token) => {
-        let value = "";
-        if (textIconColorRegex.test(token)) {
-          value = this._theme.text;
-        } else if (backgroundBorderRegex.test(token)) {
-          value = this._theme.background;
-        } else if (shadowRegex.test(token)) {
-          value = token.includes("color")
-            ? `${this._theme.shadowColor}`
-            : `${this._theme.shadowValues} ${this._theme.shadowColor}`;
-        } else if (cornerRegex.test(token)) {
-          value = `${this._theme.cornerRadius}`;
-        } else if (zIndexRegex.test(token)) {
-          value = `${this._theme.zIndex}`;
-        } else if (spaceRegex.test(token)) {
-          value = `${this._theme.space}`;
-        }
-        theme[token] = value;
-      });
+      const theme = {};
 
-      Object.entries(theme).forEach(([key, value]) => {
-        stringifiedTheme += `${key}: ${value};`;
-      });
+      let tokensList;
+
+      try {
+        tokensList = JSON.parse(newValue);
+      } catch (error) {
+        tokensList = newValue.split(",").map((t) => t.trim());
+      }
+
+      if (Array.isArray(tokensList)) {
+        tokensList.forEach((token) => {
+          let value = "";
+          if (textIconColorRegex.test(token)) {
+            value = this._theme.text;
+          } else if (backgroundBorderRegex.test(token)) {
+            value = this._theme.background;
+          } else if (shadowRegex.test(token)) {
+            value = token.includes("color")
+              ? `${this._theme.shadowColor}`
+              : `${this._theme.shadowValues} ${this._theme.shadowColor}`;
+          } else if (cornerRegex.test(token)) {
+            value = `${this._theme.cornerRadius}`;
+          } else if (zIndexRegex.test(token)) {
+            value = `${this._theme.zIndex}`;
+          } else if (spaceRegex.test(token)) {
+            value = `${this._theme.space}`;
+          }
+          theme[token] = value;
+        });
+      }
+
+      const stringifiedTheme = Object.entries(theme)
+        .map(([key, value]) => {
+          return `${key}: ${value};`;
+        })
+        .join(" ");
 
       this._el.style.cssText = stringifiedTheme;
     }
   }
 }
+
+customElements.define("demo-theme", DemoTheme);
diff --git a/packages/calcite-components/src/demos/button.html b/packages/calcite-components/src/demos/button.html
@@ -93,6 +93,7 @@
 
     <!-- scripts -->
     <script src="_assets/head.js"></script>
+    <script type="module" src="./_assets/demo-theme.js"></script>
   </head>
 
   <body>
@@ -2564,6 +2565,37 @@
           </calcite-button>
         </div>
       </div>
+
+      <!--
+      ***************************************************************
+      * SOLID INVERSE - THEMED
+      ***************************************************************
+    -->
+      <div class="main-container">
+        <div>
+          <p class="right-align">THEMED Solid Inverse</p>
+        </div>
+
+        <!-- Solid Inverse -->
+        <div>
+          <p>
+            <demo-theme
+              tokens="--calcite-button-background-color, 
+                --calcite-button-border-color, 
+                --calcite-button-corner-radius, 
+                --calcite-button-corner-radius-start-start, 
+                --calcite-button-corner-radius-start-end, 
+                --calcite-button-corner-radius-end-start, 
+                --calcite-button-corner-radius-end-end, 
+                --calcite-button-loader-color, 
+                --calcite-button-shadow, 
+                --calcite-button-text-color, 
+                --calcite-button-icon-color"
+              ><calcite-button kind="inverse" scale="l"> Button </calcite-button></demo-theme
+            >
+          </p>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
 </html>