fluentui-webcomponents 0.0.3 → 0.0.5

package/AGENTS.md

@@ -156,7 +156,7 @@ document.documentElement.style.colorScheme = 'light dark';
 ### Runtime Accent Change
 
 ```js
-document.documentElement.style.setProperty('--accent-base', '#e3008c');
+document.documentElement.style.setProperty('--accent-base-override', '#e3008c');
 ```
 
 One line. Overrides the `light-dark()` value. Entire palette and all dependent tokens update instantly. Zero JS math.

package/README.md

@@ -28,7 +28,10 @@ Open `http://localhost:3000/gallery.html` — a single-page showcase of all 26 c
 
 **Accent color** (instant, no JS math):
 ```css
-:root { --accent-base: #e3008c; }
+:root { --accent-base-override: #e3008c; }
+```
+```js
+document.documentElement.style.setProperty('--accent-base-override', '#e3008c');
 ```
 
 The entire 16-stop brand palette derives from this single CSS variable via `color-mix(in srgb, ...)`. All component colors update automatically.

package/core/fluent-element.js

@@ -20,6 +20,8 @@ class FluentElement extends HTMLElement {
     this._root.appendChild(tmpl.content.cloneNode(true));
   }
 
+  disconnectedCallback() {}
+
   static get observedAttributes() {
     return [];
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-webcomponents",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "fully vibe-coded @microsoft/fluentui to get rid of FAST frameworks.",
   "homepage": "https://github.com/cheese233/fluentui-webcomponents#readme",
   "bugs": {

package/theme/theme-picker.js

@@ -24,9 +24,9 @@ class FluentThemePicker extends HTMLElement {
       </label>
     `;
     this.querySelector('#accent-picker').addEventListener('input', e => {
-      document.documentElement.style.setProperty('--accent-base', e.target.value);
+      document.documentElement.style.setProperty('--accent-base-override', e.target.value);
     });
-    const themeSelect = this.querySelector('#theme-select');
+    const themeSelect = this.querySelector("#theme-select");
 
     const applyTheme = (theme) => {
       const root = document.documentElement;
@@ -37,16 +37,18 @@ class FluentThemePicker extends HTMLElement {
       }
     };
 
-    themeSelect.addEventListener('change', e => {
+    themeSelect.addEventListener("change", (e) => {
       applyTheme(e.target.value);
     });
 
     if (window.matchMedia) {
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        if (themeSelect.value === 'system') {
-          applyTheme('system');
-        }
-      });
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", () => {
+          if (themeSelect.value === "system") {
+            applyTheme("system");
+          }
+        });
     }
 
     // Initialize with the current selection
@@ -54,4 +56,4 @@ class FluentThemePicker extends HTMLElement {
   }
 }
 
-customElements.define('fluent-theme-picker', FluentThemePicker);
+customElements.define("fluent-theme-picker", FluentThemePicker);

package/tokens.css

@@ -19,13 +19,21 @@
    Set color-scheme: light dark on :root for auto, override via JS.
    ============================================================ */
 
-:host,
 :root {
     color-scheme: light dark;
+}
 
+:host,
+:root {
     /* ===== Base Colors ===== */
-    --accent-base: light-dark(#0f6cbd, #479ef5);
-    --neutral-base: light-dark(#808080, #b0b0b0);
+    /*
+     * Use var(--foo-override, default) so page-level JS (theme picker)
+     * can override --accent-base via --accent-base-override on :root,
+     * which inherits through :host's var() fallback chain.
+     * Direct :host definitions would block inheritance, so we delegate.
+     */
+    --accent-base: var(--accent-base-override, light-dark(#0f6cbd, #479ef5));
+    --neutral-base: var(--neutral-base-override, light-dark(#808080, #b0b0b0));
 
     /* ===== Trim Endpoints ===== */
     /*