fluentui-webcomponents 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/AGENTS.md +27 -8
  2. package/README.md +13 -5
  3. package/core/fluent-element.js +6 -6
  4. package/package.json +1 -1
  5. package/theme/theme-picker.js +28 -7
  6. package/tokens.css +493 -694
package/AGENTS.md CHANGED
@@ -127,21 +127,40 @@ Semantic tokens alias these stops:
127
127
  --colorBrandBackgroundPressed → --brand-40
128
128
  ```
129
129
 
130
- ### Runtime Accent Change
130
+ ### Theme Switching (light-dark() + color-scheme)
131
131
 
132
- ```js
133
- document.documentElement.style.setProperty('--accent-base', '#e3008c');
132
+ Tokens use CSS `light-dark(lightValue, darkValue)` — a single declaration per token. No duplicate dark blocks, no `@media` queries, no `.dark` classes.
133
+
134
+ ```css
135
+ :host, :root {
136
+ color-scheme: light dark;
137
+ --accent-base: light-dark(#0f6cbd, #479ef5);
138
+ --neutral-base: light-dark(#808080, #b0b0b0);
139
+ --colorNeutralBackground1: light-dark(white, var(--neutral-shade-24));
140
+ }
134
141
  ```
135
142
 
136
- One line. Entire palette and all dependent tokens update instantly. Zero JS math.
143
+ Palette stops (`--neutral-10`…`160`, `--brand-10`…`160`, tints, shades) auto-adapt from the `light-dark()` base colors via `color-mix()` — no changes needed.
137
144
 
138
- ### Theme Switching
145
+ Page-level overrides use the `color-scheme` CSS property on `:root`:
139
146
 
140
- ```css
141
- :root.dark { --accent-base: #479ef5; --neutral-base: #b0b0b0; }
142
- body.dark { /* overrides for dark theme tokens */ }
147
+ ```js
148
+ // Light mode
149
+ document.documentElement.style.colorScheme = 'light';
150
+ // Dark mode
151
+ document.documentElement.style.colorScheme = 'dark';
152
+ // Follow system
153
+ document.documentElement.style.colorScheme = 'light dark';
143
154
  ```
144
155
 
156
+ ### Runtime Accent Change
157
+
158
+ ```js
159
+ document.documentElement.style.setProperty('--accent-base-override', '#e3008c');
160
+ ```
161
+
162
+ One line. Overrides the `light-dark()` value. Entire palette and all dependent tokens update instantly. Zero JS math.
163
+
145
164
  ## Form Association
146
165
 
147
166
  ```js
package/README.md CHANGED
@@ -28,15 +28,22 @@ Open `http://localhost:3000/gallery.html` — a single-page showcase of all 26 c
28
28
 
29
29
  **Accent color** (instant, no JS math):
30
30
  ```css
31
- :root { --accent-base: #e3008c; }
31
+ :root { --accent-base-override: #e3008c; }
32
+ ```
33
+ ```js
34
+ document.documentElement.style.setProperty('--accent-base-override', '#e3008c');
32
35
  ```
33
36
 
34
- The entire 16-stop brand palette derives from this single CSS variable via `color-mix(in oklch, ...)`. All component colors update automatically.
37
+ The entire 16-stop brand palette derives from this single CSS variable via `color-mix(in srgb, ...)`. All component colors update automatically.
35
38
 
36
- **Dark theme**:
37
- ```html
38
- <body class="dark">
39
+ **Dark theme** (via `color-scheme` CSS property):
40
+ ```css
41
+ :root { color-scheme: dark; }
42
+ ```
43
+ ```js
44
+ document.documentElement.style.colorScheme = 'dark';
39
45
  ```
46
+ Tokens use `light-dark(lightValue, darkValue)` — no class toggling needed.
40
47
 
41
48
  **Theme picker** (optional):
42
49
  ```html
@@ -77,6 +84,7 @@ The entire 16-stop brand palette derives from this single CSS variable via `colo
77
84
  fluentui-webcomponents/
78
85
  ├── tokens.css # All design tokens (colors, spacing, type, shadows...)
79
86
  ├── gallery.html # Component showcase
87
+ ├── standalone-example.html # Minimal usage (no page CSS needed)
80
88
  ├── core/
81
89
  │ └── fluent-element.js # Base class (~30 lines)
82
90
  ├── components/
package/core/fluent-element.js CHANGED
@@ -1,21 +1,21 @@
1
1
  class FluentElement extends HTMLElement {
2
- static stylesUrl = '';
3
- static template = '';
2
+ static stylesUrl = "";
3
+ static template = "";
4
4
 
5
5
  constructor() {
6
6
  super();
7
- this._root = this.attachShadow({ mode: 'open' });
7
+ this._root = this.attachShadow({ mode: "open" });
8
8
  }
9
9
 
10
10
  connectedCallback() {
11
11
  if (this.constructor.stylesUrl) {
12
- const link = document.createElement('link');
13
- link.rel = 'stylesheet';
12
+ const link = document.createElement("link");
13
+ link.rel = "stylesheet";
14
14
  link.href = this.constructor.stylesUrl;
15
15
  this._root.appendChild(link);
16
16
  }
17
17
 
18
- const tmpl = document.createElement('template');
18
+ const tmpl = document.createElement("template");
19
19
  tmpl.innerHTML = this.constructor.template;
20
20
  this._root.appendChild(tmpl.content.cloneNode(true));
21
21
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluentui-webcomponents",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "fully vibe-coded @microsoft/fluentui to get rid of FAST frameworks.",
5
5
  "homepage": "https://github.com/cheese233/fluentui-webcomponents#readme",
6
6
  "bugs": {
package/theme/theme-picker.js CHANGED
@@ -18,21 +18,42 @@ class FluentThemePicker extends HTMLElement {
18
18
  <select id="theme-select" title="Theme">
19
19
  <option value="light">Light</option>
20
20
  <option value="dark">Dark</option>
21
- <option value="system">System</option>
21
+ <option value="system" selected>System</option>
22
22
  </select>
23
23
  Theme
24
24
  </label>
25
25
  `;
26
26
  this.querySelector('#accent-picker').addEventListener('input', e => {
27
- document.documentElement.style.setProperty('--accent-base', e.target.value);
27
+ document.documentElement.style.setProperty('--accent-base-override', e.target.value);
28
28
  });
29
- this.querySelector('#theme-select').addEventListener('change', e => {
30
- document.body.classList.remove('light', 'dark');
31
- if (e.target.value !== 'system') {
32
- document.body.classList.add(e.target.value);
29
+ const themeSelect = this.querySelector("#theme-select");
30
+
31
+ const applyTheme = (theme) => {
32
+ const root = document.documentElement;
33
+ if (theme === 'system') {
34
+ root.style.colorScheme = 'light dark';
35
+ } else {
36
+ root.style.colorScheme = theme;
33
37
  }
38
+ };
39
+
40
+ themeSelect.addEventListener("change", (e) => {
41
+ applyTheme(e.target.value);
34
42
  });
43
+
44
+ if (window.matchMedia) {
45
+ window
46
+ .matchMedia("(prefers-color-scheme: dark)")
47
+ .addEventListener("change", () => {
48
+ if (themeSelect.value === "system") {
49
+ applyTheme("system");
50
+ }
51
+ });
52
+ }
53
+
54
+ // Initialize with the current selection
55
+ applyTheme(themeSelect.value);
35
56
  }
36
57
  }
37
58
 
38
- customElements.define('fluent-theme-picker', FluentThemePicker);
59
+ customElements.define("fluent-theme-picker", FluentThemePicker);