Add basic theme selector for ui3

Templarian · Templarian · commit c8f88893b21e · 2025-03-27T23:07:54.000-05:00
diff --git a/src/index.html b/src/index.html
@@ -75,6 +75,19 @@
       background: #FFF;
       color: #453C4F;
     }
+    header select {
+      padding: 0.375rem 0.25rem;
+      border-radius: 0.25rem;
+      border: 1px solid #FFF;
+      background: transparent;
+      color: #FFF;
+      margin-right: 0.5rem;
+      font-size: 1rem;
+    }
+    header select option {
+      color: #222;
+      background: #FFF;
+    }
     aside {
       grid-row: 2;
       grid-column: 1;
@@ -171,7 +184,7 @@
       bottom: -1px;
       left: -1px;
       border-radius: 0.25rem 0.25rem 0 0;
-      box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+      box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
     }
     main > h2 > button > svg {
       width: 24px;
@@ -297,6 +310,29 @@
         container.classList.toggle('show', markdownCache[name]);
       });
     }
+    window.addEventListener('load', () => {
+      const themeSelect = document.getElementById('theme');
+      function setTheme(value) {
+        localStorage.setItem('theme', value);
+        if (value !== '') {
+          const s = document.createElement('link');
+          s.setAttribute('rel', 'stylesheet');
+          s.setAttribute('type', 'text/css');
+          s.setAttribute('href', './theme-ui3.css');
+          document.head.appendChild(s);
+        }
+      }
+      themeSelect.addEventListener('change', (e) => {
+        const value = e.target.value;
+        setTheme(value);
+        window.location.reload();
+      });
+      const themeCache = localStorage.getItem('theme');
+      if (themeCache !== null) {
+        setTheme(themeCache);
+        themeSelect.value = themeCache;
+      }
+    });
   </script>
   <div class="wrapper">
     <header>
@@ -305,6 +341,12 @@
       </svg>
       <h1>Pictogrammers Components</h1>
       <span></span>
+      <label>
+        <select id="theme">
+          <option value="">None</option>
+          <option value="ui3">UI3</option>
+        </select>
+      </label>
       <a href="https://github.com/Pictogrammers/Components">
         <svg viewBox="0 0 24 24">
           <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
diff --git a/src/pg/annoy/annoy.css b/src/pg/annoy/annoy.css
@@ -60,7 +60,7 @@ div {
   bottom: -1px;
   left: -1px;
   border-radius: 50%;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
 
 [part=close] svg {
diff --git a/src/pg/button/button.css b/src/pg/button/button.css
@@ -13,7 +13,7 @@
   background-color: var(--pg-button-background-color, #FFFFFF);
   color: var(--pg-button-color, #453C4F);
   padding: var(--pg-button-padding, 0.25rem 0.5rem);
-  border-radius: 0.25rem;
+  border-radius: var(--pg-button-border-radius, 0.25rem);
   outline: none;
   --pg-icon-color: var(--pg-button-color, #453C4F);
 }
@@ -42,7 +42,7 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
 [part="button"]:focus::before {
   pointer-events: none;
@@ -53,7 +53,7 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
 [part="button"].start {
diff --git a/src/pg/buttonLink/buttonLink.css b/src/pg/buttonLink/buttonLink.css
@@ -46,7 +46,7 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
 [part="button"]:focus::before {
   pointer-events: none;
@@ -57,7 +57,7 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
 [part="button"].start {
diff --git a/src/pg/inputFileLocal/inputFileLocal.css b/src/pg/inputFileLocal/inputFileLocal.css
@@ -42,7 +42,7 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
 
 [part="label"]:focus::before {
@@ -54,7 +54,7 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
 [part="file"] {
diff --git a/src/pg/inputPixelEditor/inputPixelEditor.css b/src/pg/inputPixelEditor/inputPixelEditor.css
@@ -17,7 +17,7 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.125rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
 canvas {
diff --git a/src/pg/menu/README.md b/src/pg/menu/README.md
@@ -27,4 +27,13 @@ connectedCallback() {
     value: 'item1'
   }];
 }
-```
+```
+
+## CSS Variables
+
+| Variable | Default |
+| -------- | ------- |
+| `--pg-menu-padding` | `0.25rem` |
+| `--pg-menu-border-width` | `0` |
+| `--pg-menu-background-color` | `transparent` |
+| `--pg-menu-box-shadow` | `none` |
diff --git a/src/pg/menu/menu.ts b/src/pg/menu/menu.ts
@@ -29,7 +29,25 @@ export default class PgMenu extends HTMLElement {
           const { index } = e.detail;
           this.dispatchEvent(new CustomEvent('select', {
             detail: { index, item }
-          }))
+          }));
+        });
+        $item.addEventListener('up', (e: any) => {
+          const { index } = e.detail;
+          let first = this.items[0].disabled ? 1 : 0;
+          if (index === first) {
+            this.focus(this.items.length - 1);
+          } else {
+            this.focus(index - 1);
+          }
+        });
+        $item.addEventListener('down', (e: any) => {
+          const { index } = e.detail;
+          if (index === this.items.length - 1) {
+            let first = this.items[0].disabled ? 1 : 0;
+            this.focus(first);
+          } else {
+            this.focus(index + 1);
+          }
         });
       }
     });
@@ -51,9 +69,9 @@ export default class PgMenu extends HTMLElement {
   getItemOffset(startIndex, endIndex): number {
     const computedStyle = getComputedStyle(this.$items);
     let height = parseInt(computedStyle.getPropertyValue('padding-top'), 10);
-    const total = this.$items.children.length;
+    const total = this.items.length;
     if (startIndex > total || endIndex > total) {
-      throw new Error('startIndex or endIndex out of bounds');
+      throw new Error('startIndex or endIndex not within range of items');
     }
     for (let i = startIndex; i < endIndex; i++) {
       const ele = this.$items.children[i] as any;
@@ -62,7 +80,15 @@ export default class PgMenu extends HTMLElement {
     return height;
   }
 
+  /**
+   * Get the height of an individiaual item.
+   * @param index Item index
+   * @returns {number} Item height
+   */
   getItemHeight(index) {
+    if (index > this.items.length) {
+      throw new Error('index outside range of items');
+    }
     const ele = this.$items.children[index] as any;
     return ele.getHeight();
   }
diff --git a/src/pg/menuItem/menuItem.ts b/src/pg/menuItem/menuItem.ts
@@ -35,7 +35,21 @@ export default class PgMenuItem extends HTMLElement {
       this.dispatchEvent(new CustomEvent('select', {
         detail: { index: this.index }
       }));
-    })
+    });
+    this.$label.addEventListener('keydown', (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          this.dispatchEvent(new CustomEvent('down', {
+            detail: { index: this.index }
+          }));
+          break;
+        case 'ArrowUp':
+          this.dispatchEvent(new CustomEvent('up', {
+            detail: { index: this.index }
+          }));
+          break;
+      }
+    });
   }
 
   focus() {
diff --git a/src/pg/overlayMenu/__examples__/basic/basic.html b/src/pg/overlayMenu/__examples__/basic/basic.html
@@ -1,4 +1,5 @@
 <div class="example">
   <button part="button">Create Menu Overlay</button>
   <p>Result: <code part="result"></code></p></p>
+  <p>input: <code part="input"></code></p></p>
 </div>
diff --git a/src/pg/overlayMenu/__examples__/basic/basic.ts b/src/pg/overlayMenu/__examples__/basic/basic.ts
@@ -12,6 +12,7 @@ import style from './basic.css';
 export default class XPgOverlayMenuBasic extends HTMLElement {
   @Part() $button: HTMLButtonElement;
   @Part() $result: HTMLSpanElement;
+  @Part() $input: HTMLSpanElement;
 
   connectedCallback() {
     this.$button.addEventListener('click', this.#handleClick.bind(this));
@@ -34,7 +35,10 @@ export default class XPgOverlayMenuBasic extends HTMLElement {
     const result = await PgOverlayMenu.open({
       source: this.$button,
       value: this.#value,
-      items
+      items,
+      oninput: (value) => {
+        this.$input.textContent = value;
+      }
     });
     if (result !== undefined) {
       this.#value = result;
diff --git a/src/pg/overlayMenu/overlayMenu.ts b/src/pg/overlayMenu/overlayMenu.ts
@@ -78,6 +78,7 @@ export default class PgOverlayMenu extends PgOverlay {
   #toggle(e: ToggleEvent) {
     if (e.newState === 'closed') {
       this.close();
+      this.source?.focus();
     }
   }
 
@@ -87,5 +88,6 @@ export default class PgOverlayMenu extends PgOverlay {
   #handleSelect(e: any) {
     e.detail.item.index = e.detail.index;
     this.close(e.detail.item);
+    this.source?.focus();
   }
 }
diff --git a/src/pg/search/search.css b/src/pg/search/search.css
@@ -24,7 +24,7 @@ input:active {
   box-shadow: 0 0 0 3px var(--pg-search-active-glow, rgb(79, 143, 249, 0.6));
 }
 input:focus {
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 .active input + svg path {
   fill: #453C4F;
diff --git a/src/pg/tabs/partials/tab.css b/src/pg/tabs/partials/tab.css
@@ -38,7 +38,7 @@
   bottom: 0;
   left: -1px;
   border-radius: 0.25rem 0.25rem 0 0;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
 
 [part="button"]:focus::before {
@@ -50,5 +50,5 @@
   bottom: 0;
   left: -1px;
   border-radius: 0.25rem 0.25rem 0 0;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
diff --git a/src/theme-ui3.css b/src/theme-ui3.css
@@ -0,0 +1,17 @@
+:root {
+  /* Focus */
+  --pg-focus-color: rgb(79, 143, 249, 0.6);
+  /* Button */
+  --pg-button-font-size: 1rem;
+  --pg-button-line-height: 1.5rem;
+  --pg-button-border-color: #453C4F;
+  --pg-button-background-color: #FFFFFF;
+  --pg-button-color: #453C4F;
+  --pg-button-padding: 0.25rem 0.5rem;
+  --pg-button-border-radius: 0.25rem;
+  /* Button :hover */
+  --pg-button-hover-border-color: #453C4F;
+  --pg-button-hover-background-color: #453C4F;
+  --pg-button-hover-color: #FFFFFF;
+  --pg-button-hover-color: #FFFFFF;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -14,7 +14,8 @@ export default config({
   },
   watch: [],
   copy: [
-    { from: "api/", to: `api/` }
+    { from: "api/", to: `api/` },
+    { from: "src/theme-ui3.css", to: `theme-ui3.css` }
   ],
   before: (components, args, mode) => {
     // Components + GreenText(# of Components)

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ div {`
`60`	`60`	`bottom: -1px;`
`61`	`61`	`left: -1px;`
`62`	`62`	`border-radius: 50%;`
`63`		`- box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));`
	`63`	`+ box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`[part=close] svg {`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`bottom: -1px;`
`18`	`18`	`left: -1px;`
`19`	`19`	`border-radius: 0.125rem;`
`20`		`- box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));`
	`20`	`+ box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`canvas {`