dev: customization via css variables

jeremycolin · Sep 25, 2024 · 76954f3 · 76954f3
1 parent 0e6bdf6
commit 76954f3
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 21 deletions.
diff --git a/packages/website-analyzer-demo/package.json b/packages/website-analyzer-demo/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "website-analyzer-wc": "1.0.2"
+    "website-analyzer-wc": "1.0.3"
   },
   "devDependencies": {
     "typescript": "^5.5.3",

diff --git a/packages/website-analyzer-wc/src/main.ts b/packages/website-analyzer-wc/src/main.ts
@@ -18,9 +18,35 @@ import {
 import { fetchPerformanceData } from "./performance/apis/pagespeed-insights";
 import { Translations } from "./translations";
 
+export interface Configuration {
+  "background-color"?: string;
+  "text-color"?: string;
+  "button-color"?: string;
+  "button-text-color"?: string;
+  "spinner-color"?: string;
+  "font-size"?: string;
+  "form-height"?: string;
+  "min-container-height"?: string;
+  "legend-link-color"?: string;
+}
+
+const configuration: Array<keyof Configuration> = [
+  "background-color",
+  "text-color",
+  "button-color",
+  "button-text-color",
+  "spinner-color",
+  "font-size",
+  "form-height",
+  "min-container-height",
+  "legend-link-color",
+];
+
 export class WebsiteAnalyzer extends HTMLElement {
   constructor() {
     super();
+  }
+  connectedCallback() {
     const translations = TRANSLATIONS as Translations;
 
     try {
@@ -36,6 +62,14 @@ export class WebsiteAnalyzer extends HTMLElement {
       shadowRoot.appendChild(template.content.cloneNode(true));
 
       const container = getContainer(shadowRoot);
+
+      // apply configuration styles
+      configuration.forEach((key) => {
+        if (this.hasAttribute(key)) {
+          container.style.setProperty(`--wa-wc-${key}`, this.getAttribute(key));
+        }
+      });
+
       const form = getForm(shadowRoot);
       const input = getInput(shadowRoot);
 

diff --git a/packages/website-analyzer-wc/src/performance/performance-bar.ts b/packages/website-analyzer-wc/src/performance/performance-bar.ts
@@ -28,7 +28,7 @@ export const performanceBar = (value: number, metric: Vital, translations: Trans
   return html`<div id="performance-bar">
     <div class="legend-metric-title">
       ${translations[`${metric}.legend`]}
-      <a href="https://web.dev/${metric}">${metric.toUpperCase()}</a>
+      <a href="https://web.dev/${metric}" class="legend-metric-link">${metric.toUpperCase()}</a>
     </div>
     <div
       class="legend-metric"

diff --git a/packages/website-analyzer-wc/src/style.css b/packages/website-analyzer-wc/src/style.css
@@ -1,31 +1,43 @@
+#container {
+  --wa-wc-background-color: #ffffff;
+  --wa-wc-text-color: #000000;
+  --wa-wc-button-color: #475569;
+  --wa-wc-button-text-color: #ffffff;
+  --wa-wc-spinner-color: #475569;
+  --wa-wc-font-size: 1rem;
+  --wa-wc-form-height: 3rem;
+  --wa-wc-min-container-height: 27rem;
+  --wa-wc-legend-link-color: revert;
+}
+
 #container {
   display: flex;
   flex-direction: column;
   padding: 1rem;
   padding-bottom: 0.5rem;
-  min-height: 27rem;
-  background-color: #ffffff;
+  min-height: var(--wa-wc-min-container-height);
+  background-color: var(--wa-wc-background-color);
   line-height: initial;
 }
 
 #form {
   display: flex;
-  height: 3rem;
+  height: var(--wa-wc-form-height);
 }
 
 #input {
   flex: 1;
   padding: 0 0.5rem;
   margin-right: 1rem;
-  background-color: #ffffff;
-  color: #000000;
-  border: 2px solid #94a3b8;
+  background-color: var(--wa-wc-background-color);
+  color: var(--wa-wc-text-color);
+  border: 2px solid color-mix(in srgb, var(--wa-wc-button-color) 50%, transparent);
   border-radius: 4px;
   outline: none;
 }
 
 #input:focus {
-  border: 2px solid #475569;
+  border: 2px solid var(--wa-wc-button-color);
 }
 
 #input.error {
@@ -42,30 +54,31 @@ button {
   cursor: pointer;
   border: 0;
   padding: 0 1rem;
-  background: #475569;
-  color: #ffffff;
+  background: var(--wa-wc-button-color);
+  color: var(--wa-wc-button-text-color);
 }
 
 #loading-spinner {
   height: 4rem;
   width: 4rem;
   margin: auto;
+  color: var(--wa-wc-spinner-color);
 }
 
 #no-data {
-  color: #000000;
+  color: var(--wa-wc-text-color);
   margin: auto;
 }
 
 #performance-bars-container-legend {
   font-weight: 600;
   margin-top: 2rem;
-  color: #000000;
+  color: var(--wa-wc-text-color);
   text-align: left;
 }
 
 #performance-bar {
-  color: #000000;
+  color: var(--wa-wc-text-color);
   height: 5rem;
 }
 
@@ -74,6 +87,10 @@ button {
   margin-top: 1.5rem;
 }
 
+.legend-metric-link {
+  color: var(--wa-wc-legend-link-color);
+}
+
 .legend-metric {
   font-weight: 500;
   margin-top: 0.2rem;
@@ -87,7 +104,7 @@ button {
 
 .marker {
   display: inline-block;
-  border-right: 2px solid black;
+  border-right: 2px solid var(--wa-wc-text-color);
   height: 2rem;
   position: relative;
   top: -24px;
@@ -111,7 +128,7 @@ button {
 button,
 .legend-metric-title,
 .legend-metric {
-  font-size: 1rem;
+  font-size: var(--wa-wc-font-size);
 }
 
 @media only screen and (max-width: 600px) {
@@ -121,7 +138,7 @@ button,
   button,
   .legend-metric-title,
   .legend-metric {
-    font-size: 0.8rem;
+    font-size: calc(var(--wa-wc-font-size) * 0.8);
   }
 
   .legend-metric-title {
@@ -133,6 +150,6 @@ button,
   }
 
   #container {
-    min-height: 24rem;
+    min-height: calc(var(--wa-wc-min-container-height) * 24 / 27);
   }
 }
diff --git a/packages/website-analyzer-wc/src/templates/spinner.html b/packages/website-analyzer-wc/src/templates/spinner.html
@@ -1,11 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" id="loading-spinner">
   <path
-    fill="#475569"
+    fill="currentColor"
     d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
     opacity="0.25"
   />
   <path
-    fill="#475569"
+    fill="currentColor"
     d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"
   >
     <animateTransform

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml