@sukramj/fabric-ui 0.2.1 → 0.2.2

package/README.md

@@ -74,7 +74,14 @@ host's stylesheet, after Tailwind:
 `.dark` on `<html>` switches the dark tokens; `data-skin="ha"` on `<html>`
 resolves the tokens from Home Assistant's variables. `applySkin("ha")` and
 `startHaBridge()` (from `@sukramj/fabric-ui/theme`) do both inside an
-Ingress frame and are inert elsewhere.
+Ingress frame and are inert elsewhere. A host on a skin of its own (any
+other `data-skin`, or none) keeps the standalone tokens; the HA skin's
+extras (`accent-color` and `color-scheme` on native controls,
+`--ha-on-primary-color` from Home Assistant's `--text-primary-color`) apply
+only under `data-skin="ha"`. The standalone shell sets the HA skin and the
+mode in a pre-paint script (`src/shell/index.html`) so the first frame
+already wears them; a host that wants the same does it in its own
+`index.html`.
 
 ### Event stream
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sukramj/fabric-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "The web interface of go-fabric nodes: Svelte 5 pages, UI kit, design tokens with a Home Assistant theme bridge, and the generated API client.",
   "license": "Apache-2.0",
   "author": "SukramJ",

package/src/lib/kit/Button.svelte

@@ -1,5 +1,6 @@
 <!-- Ported from openccu-loom assets/ui/src/lib/components/ui//Button.svelte:1-72 at b40b289a; the disabled fills use the
-     tokens instead of the slate ramp. -->
+     tokens instead of the slate ramp, and the label on the primary fill uses --ha-on-primary-color (Home Assistant's
+     --text-primary-color under the HA skin). -->
 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { HTMLButtonAttributes } from "svelte/elements";
@@ -18,7 +19,7 @@
     "disabled:bg-[var(--ha-secondary-background-color)] disabled:text-[var(--ha-disabled-text-color)] disabled:shadow-none";
   const disabledMuted = "disabled:opacity-50 disabled:text-[var(--ha-disabled-text-color)]";
   const variants: Record<Variant, string> = {
-    default: `bg-[var(--ha-primary-color)] text-white hover:bg-[var(--ha-primary-color-hover)] shadow-sm ${disabledFill}`,
+    default: `bg-[var(--ha-primary-color)] text-[var(--ha-on-primary-color)] hover:bg-[var(--ha-primary-color-hover)] shadow-sm ${disabledFill}`,
     outline: `border border-[var(--ha-divider-color)] bg-[var(--ha-card-background-color)] text-[var(--ha-primary-text-color)] hover:bg-[var(--ha-secondary-background-color)] ${disabledMuted}`,
     ghost: `text-[var(--ha-primary-text-color)] hover:bg-[var(--ha-secondary-background-color)] ${disabledMuted}`,
     destructive: `bg-[var(--ha-error-color)] text-white hover:brightness-95 shadow-sm ${disabledFill}`,

package/src/lib/kit/Tabs.svelte

@@ -20,14 +20,17 @@
 
   const listClass = $derived(
     variant === "underline"
-      ? cn("flex gap-1 overflow-x-auto border-b border-[var(--ha-divider-color)]", cls)
+      ? // The divider is an inset shadow, not a border the active marker
+        // overlaps with -mb-px: that 1px overflow made the scrollable list
+        // show a vertical scrollbar.
+        cn("flex gap-1 overflow-x-auto overflow-y-hidden shadow-[inset_0_-1px_0_var(--ha-divider-color)]", cls)
       : cn("inline-flex flex-wrap gap-0.5 rounded-lg bg-[var(--ha-secondary-background-color)] p-0.5", cls),
   );
 
   function itemClass(isActive: boolean): string {
     if (variant === "underline") {
       return cn(
-        "-mb-px inline-flex items-center justify-center gap-2 whitespace-nowrap border-b-2 px-4 py-3 text-center text-sm font-medium transition",
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap border-b-2 px-4 py-3 text-center text-sm font-medium transition",
         fill && "flex-1",
         isActive
           ? "border-[var(--ha-primary-color)] text-[var(--ha-primary-color)]"

package/src/lib/theme/ha-bridge.ts

@@ -115,7 +115,10 @@ export function startHaBridge(): () => void {
         const ps = parentWin.getComputedStyle(parentRoot);
         for (const name of HA_THEME_VARS) {
           const value = ps.getPropertyValue(name).trim();
+          // A variable the parent no longer defines (a theme switched back
+          // to the default) is dropped, so the token falls back again.
           if (value) ourRoot.style.setProperty(name, value);
+          else ourRoot.style.removeProperty(name);
         }
         // Follow Home Assistant's light/dark by its background luminance;
         // this overrides the page's own choice while embedded.

package/src/lib/theme/tokens.css

@@ -7,7 +7,9 @@
  *    on <html> flips it).
  *  - html[data-skin="ha"] — the tokens resolve from Home Assistant's own
  *    variables (var(--primary-color, …)); ha-bridge.ts copies the live values
- *    onto :root inside an Ingress frame, and the literals are the defaults.
+ *    onto :root inside an Ingress frame, and the literals are the defaults:
+ *    Home Assistant's own default light and dark palettes. The standalone
+ *    shell uses this skin too, set before the first paint (index.html).
  *  - the palette remap recolours plain Tailwind palette utilities under the
  *    HA skin.
  *  - .table-reflow turns a data table into cards on a phone.
@@ -45,6 +47,8 @@
   --ha-elevation-modal: 0 10px 25px -5px rgb(0 0 0 / 0.15);
   --ha-radius-card: 12px;
   --ha-radius-control: 8px;
+  /* The label on a primary fill. */
+  --ha-on-primary-color: #ffffff;
 }
 
 html.dark {
@@ -92,6 +96,11 @@ html[data-skin="ha"] {
   --ha-elevation-card: var(--ha-card-box-shadow, none); /* HA cards are flat */
   --ha-elevation-modal: var(--ha-card-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.18));
   --font-sans: var(--ha-font-family-body, "Roboto", "Noto", "Helvetica Neue", Arial, sans-serif);
+  /* Home Assistant's text-on-primary, for a light primary in a custom theme. */
+  --ha-on-primary-color: var(--text-primary-color, #ffffff);
+  /* Native controls (checkboxes, radios, range, scrollbars) take the theme. */
+  accent-color: var(--ha-primary-color);
+  color-scheme: light;
 }
 
 html[data-skin="ha"].dark {
@@ -105,6 +114,7 @@ html[data-skin="ha"].dark {
   --ha-primary-text-color: var(--primary-text-color, #e1e1e1);
   --ha-secondary-text-color: var(--secondary-text-color, #9b9b9b);
   --ha-disabled-text-color: var(--disabled-text-color, #6f6f6f);
+  color-scheme: dark;
 }
 
 /* Base document colours track the theme tokens so the boot paint and any