@zccz14/ux 0.1.6 → 0.2.0

package/README.md

@@ -7,8 +7,8 @@
 - **Sidebar** — one animated icon-collapse sidebar: 16rem expanded, 3rem collapsed, 200 ms width transition. Midas, 1Exchange and 1earn-style shells without animation are replaced by this behavior.
 - **Navigation groups only** — the sidebar has no separate bottom section. Settings and status destinations live in the navigation groups like every other destination, so the bottom edge of every app's sidebar looks the same.
 - **AppHeader** — sidebar trigger, current page title, your `headerSlot`, and the Linkit account control (`LinkitMyInfo`), in that order. Role badges such as 超级管理员 stay out of the shell: administrator affordances live in the administrator navigation group and pages.
-- **Logo** — you pass the light and dark logo marks; the shell renders the active variant inside a fixed 1.75rem box and controls the display size itself, so the logo size is identical everywhere. The title beside the logo disappears while collapsed.
-- **Linkit integration** — the signed-in viewer's `resolvedTheme` picks the logo variant, the viewer's language selects the shell copy (中文/English), and theme, language and account controls all live in the `LinkitMyInfo` dialog.
+- **Logo** — you pass one mark; the shell renders it inside a fixed 1.75rem box and controls the display size itself, so the logo size is identical everywhere. Pass a mark that follows the current colour (an icon using `currentColor`, or an SVG with mode-aware fills) so it keeps working in both themes. The title beside the logo disappears while collapsed.
+- **Linkit integration** — the viewer's language selects the shell copy (中文/English), and theme, language and account controls all live in the `LinkitMyInfo` dialog. The shell never reads the theme itself: it renders whatever colour scheme its own CSS resolves (see [Styling](#styling)).
 
 ## Installation
 
@@ -16,7 +16,7 @@
 npm install @zccz14/ux
 ```
 
-Peer dependencies: `react` (18 or 19), `react-dom`, `react-router-dom` 7, `@base-ui/react` ≥ 1.6, `linkit-react-components` ≥ 0.5.1 (older versions do not publish `resolvedTheme`).
+Peer dependencies: `react` (18 or 19), `react-dom`, `react-router-dom` 7, `@base-ui/react` ≥ 1.6, `linkit-react-components` ≥ 0.6.
 
 ## Usage
 
@@ -41,7 +41,7 @@ export function App() {
       <LinkitProvider linkitBaseUrl="https://linkit.ntnl.io" lang="zh-CN">
         <HashRouter>
           <AppLayout
-            logo={{ light: <CybionMark />, dark: <CybionMark /> }}
+            logo={<CybionMark />}
             title="Cybion"
             nav={[
               {
@@ -74,7 +74,7 @@ export function App() {
 
 | Prop | Type | Required | Description |
 | --- | --- | --- | --- |
-| `logo` | `{ light: ReactNode; dark: ReactNode }` | yes | The two logo variants. The shell renders the one that matches `useLinkit().resolvedTheme` at its own fixed size. |
+| `logo` | `ReactNode` | yes | The logo mark. The shell renders it at its own fixed 1.75rem size; pass a mark that follows the current colour. |
 | `title` | `string` | yes | App name beside the logo. Hidden while the sidebar is collapsed. |
 | `nav` | `AppNavGroup[]` | yes | Navigation groups rendered in the sidebar. |
 | `headerSlot` | `ReactNode` | no | Rendered immediately left of `LinkitMyInfo` in the AppHeader. Use it for page-level actions such as refresh. |
@@ -101,14 +101,18 @@ type AppNavGroup = { label: string; items: AppNavItem[] };
 
 ## Styling
 
-Import `@zccz14/ux/styles.css` once. It consumes the app's shadcn theme tokens with built-in fallbacks: `--background`, `--foreground`, `--border`, `--accent`, `--muted`, `--ring`, `--sidebar`, `--sidebar-foreground`, `--sidebar-accent`, `--sidebar-accent-foreground`, `--sidebar-border`, `--sidebar-ring`.
+Import `@zccz14/ux/styles.css` once. It consumes the app's shadcn theme tokens and falls back to its own values, so the shell stays readable even when a token is missing: `--background`, `--foreground`, `--border`, `--accent`, `--muted`, `--ring`, `--sidebar`, `--sidebar-foreground`, `--sidebar-accent`, `--sidebar-accent-foreground`, `--sidebar-border`, `--sidebar-ring`.
+
+Those tokens are read through a `--ux-*` layer declared twice — a light set on `:root` and a dark set on `.dark` — so every fallback has a dark counterpart. A missing `--sidebar` therefore renders dark in dark mode instead of a light sidebar. The shell also sets `color-scheme` per mode, so native scrollbars and controls follow the theme without help from a theme provider.
+
+Theme state itself is not the shell's business: whatever toggles `.dark` on `<html>` (in this family, `LinkitProvider`) decides the mode, and the shell follows.
 
 ## Migrating an app from its local shell
 
 1. Replace the local `SidebarProvider` / `Sidebar` / `AppHeader` copy with one `AppLayout` at the top of `App.tsx`.
-2. Move legacy header buttons (refresh, settings, language, theme) into `headerSlot`. Role badges are dropped: administrator affordances belong to the administrator navigation group and pages, and theme/language preferences live in the `LinkitMyInfo` profile dialog (`linkit-react-components` 0.5+).
+2. Move legacy header buttons (refresh, settings, language, theme) into `headerSlot`. Role badges are dropped: administrator affordances belong to the administrator navigation group and pages, and theme/language preferences live in the `LinkitMyInfo` profile dialog (`linkit-react-components` 0.6+).
 3. Move any sidebar footer item (settings, environment status) into the last navigation group.
-4. Pass the logo pair and delete per-call sizes; the shell normalizes every mark to its 1.75rem box.
+4. Pass the single logo mark and delete per-call sizes; the shell normalizes every mark to its 1.75rem box.
 
 ## Development
 

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { AppLayout } from "./app-layout.js";
-export type { AppLayoutProps, AppLogo, AppNavGroup, AppNavItem } from "./types.js";
+export type { AppLayoutProps, AppNavGroup, AppNavItem } from "./types.js";

package/dist/index.js

@@ -1,9 +1,9 @@
-import { jsxs as l, jsx as e, Fragment as w } from "react/jsx-runtime";
-import { useState as g, useCallback as x, useEffect as M, useSyncExternalStore as L } from "react";
-import { Dialog as m } from "@base-ui/react/dialog";
-import { Tooltip as h } from "@base-ui/react/tooltip";
-import { useLinkit as N, LinkitMyInfo as S } from "linkit-react-components";
-import { useLocation as k, NavLink as C } from "react-router-dom";
+import { jsxs as s, jsx as e, Fragment as y } from "react/jsx-runtime";
+import { useState as f, useCallback as g, useEffect as w, useSyncExternalStore as M } from "react";
+import { Dialog as h } from "@base-ui/react/dialog";
+import { Tooltip as p } from "@base-ui/react/tooltip";
+import { useLinkit as L, LinkitMyInfo as S } from "linkit-react-components";
+import { useLocation as v, NavLink as C } from "react-router-dom";
 const O = {
   closeNavigation: "Close navigation",
   navigation: "Navigation",
@@ -16,8 +16,8 @@ const O = {
 function I(a) {
   return a.toLowerCase().startsWith("zh") ? P : O;
 }
-function T() {
-  return /* @__PURE__ */ l(
+function E() {
+  return /* @__PURE__ */ s(
     "svg",
     {
       "aria-hidden": "true",
@@ -34,8 +34,8 @@ function T() {
     }
   );
 }
-function E() {
-  return /* @__PURE__ */ l(
+function T() {
+  return /* @__PURE__ */ s(
     "svg",
     {
       "aria-hidden": "true",
@@ -52,65 +52,65 @@ function E() {
     }
   );
 }
-const b = "sidebar_state", W = 3600 * 24 * 7, _ = "(max-width: 767px)";
+const m = "sidebar_state", W = 3600 * 24 * 7, N = "(max-width: 767px)";
 function $() {
-  const a = document.cookie.split("; ").find((n) => n.startsWith(`${b}=`));
-  return a ? a.slice(b.length + 1) !== "false" : !0;
+  const a = document.cookie.split("; ").find((n) => n.startsWith(`${m}=`));
+  return a ? a.slice(m.length + 1) !== "false" : !0;
 }
 function j(a) {
-  document.cookie = `${b}=${a}; path=/; max-age=${W}`;
+  document.cookie = `${m}=${a}; path=/; max-age=${W}`;
 }
 function B(a) {
-  const n = window.matchMedia(_);
+  const n = window.matchMedia(N);
   return n.addEventListener("change", a), () => n.removeEventListener("change", a);
 }
 function A() {
-  return L(
+  return M(
     B,
-    () => window.matchMedia(_).matches,
+    () => window.matchMedia(N).matches,
     () => !1
   );
 }
 function D() {
-  const a = A(), [n, t] = g($), [c, i] = g(!1), d = x((r) => {
-    t(r), j(r);
-  }, []), u = x(() => {
+  const a = A(), [n, t] = f($), [l, r] = f(!1), d = g((c) => {
+    t(c), j(c);
+  }, []), u = g(() => {
     if (a) {
-      i((r) => !r);
+      r((c) => !c);
       return;
     }
     d(!n);
   }, [a, n, d]);
-  return M(() => {
-    function r(s) {
-      (s.metaKey || s.ctrlKey) && s.key === "b" && (s.preventDefault(), u());
+  return w(() => {
+    function c(i) {
+      (i.metaKey || i.ctrlKey) && i.key === "b" && (i.preventDefault(), u());
     }
-    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
-  }, [u]), { isMobile: a, open: n, openMobile: c, setOpenMobile: i, toggleSidebar: u };
+    return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
+  }, [u]), { isMobile: a, open: n, openMobile: l, setOpenMobile: r, toggleSidebar: u };
 }
-function y(a, n) {
+function k(a, n) {
   let t;
-  for (const c of a)
-    for (const i of c.items)
-      (i.to === "/" ? n === "/" : n === i.to || n.startsWith(`${i.to}/`)) && (!t || i.to.length > t.to.length) && (t = i);
+  for (const l of a)
+    for (const r of l.items)
+      (r.to === "/" ? n === "/" : n === r.to || n.startsWith(`${r.to}/`)) && (!t || r.to.length > t.to.length) && (t = r);
   return t;
 }
 function K({
   collapsed: a,
   end: n,
   item: t,
-  onNavigate: c
+  onNavigate: l
 }) {
-  return /* @__PURE__ */ l(h.Root, { children: [
-    /* @__PURE__ */ l(
-      h.Trigger,
+  return /* @__PURE__ */ s(p.Root, { children: [
+    /* @__PURE__ */ s(
+      p.Trigger,
       {
         render: /* @__PURE__ */ e(
           C,
           {
             className: "ux-nav-item",
             end: n,
-            onClick: c,
+            onClick: l,
             to: t.to
           }
         ),
@@ -120,102 +120,102 @@ function K({
         ]
       }
     ),
-    /* @__PURE__ */ e(h.Portal, { children: /* @__PURE__ */ e(
-      h.Positioner,
+    /* @__PURE__ */ e(p.Portal, { children: /* @__PURE__ */ e(
+      p.Positioner,
       {
         className: "ux-tooltip-positioner",
         side: "right",
         sideOffset: 6,
-        children: /* @__PURE__ */ e(h.Popup, { className: "ux-tooltip", hidden: !a, children: t.label })
+        children: /* @__PURE__ */ e(p.Popup, { className: "ux-tooltip", hidden: !a, children: t.label })
       }
     ) })
   ] });
 }
-function v({
+function x({
   copy: a,
   logo: n,
   nav: t,
-  onNavigate: c,
-  state: i,
+  onNavigate: l,
+  state: r,
   title: d
 }) {
-  const { resolvedTheme: u } = N(), { pathname: r } = k(), s = y(t, r);
-  return /* @__PURE__ */ l(w, { children: [
-    /* @__PURE__ */ l("div", { className: "ux-sidebar__header", children: [
-      /* @__PURE__ */ e("span", { className: "ux-sidebar__logo", children: u === "dark" ? n.dark : n.light }),
+  const { pathname: u } = v(), c = k(t, u);
+  return /* @__PURE__ */ s(y, { children: [
+    /* @__PURE__ */ s("div", { className: "ux-sidebar__header", children: [
+      /* @__PURE__ */ e("span", { className: "ux-sidebar__logo", children: n }),
       /* @__PURE__ */ e("span", { className: "ux-sidebar__title", children: d })
     ] }),
-    /* @__PURE__ */ e("nav", { "aria-label": a.navigation, className: "ux-sidebar__nav", children: t.map((o) => /* @__PURE__ */ l("div", { className: "ux-nav-group", children: [
-      /* @__PURE__ */ e("div", { className: "ux-nav-group__label", children: o.label }),
-      o.items.map((p) => (
+    /* @__PURE__ */ e("nav", { "aria-label": a.navigation, className: "ux-sidebar__nav", children: t.map((i) => /* @__PURE__ */ s("div", { className: "ux-nav-group", children: [
+      /* @__PURE__ */ e("div", { className: "ux-nav-group__label", children: i.label }),
+      i.items.map((o) => (
         // NavLink would mark a parent section current on its children's
         // routes; follow matchActiveItem instead so only the deepest
         // match (or the exact path) stays marked.
         /* @__PURE__ */ e(
           K,
           {
-            collapsed: i === "collapsed",
-            end: p !== s || p.to === r,
-            item: p,
-            onNavigate: c
+            collapsed: r === "collapsed",
+            end: o !== c || o.to === u,
+            item: o,
+            onNavigate: l
           },
-          p.to
+          o.to
         )
       ))
-    ] }, o.label)) })
+    ] }, i.label)) })
   ] });
 }
 function H({
   children: a,
   headerSlot: n,
   logo: t,
-  nav: c,
-  pageTitle: i,
+  nav: l,
+  pageTitle: r,
   title: d
 }) {
-  var f;
-  const { pathname: u } = k(), { lang: r } = N(), s = I(r), o = D(), p = i ?? ((f = y(c, u)) == null ? void 0 : f.label);
-  return /* @__PURE__ */ e(h.Provider, { delay: 0, children: /* @__PURE__ */ l(
+  var b;
+  const { pathname: u } = v(), { lang: c } = L(), i = I(c), o = D(), _ = r ?? ((b = k(l, u)) == null ? void 0 : b.label);
+  return /* @__PURE__ */ e(p.Provider, { delay: 0, children: /* @__PURE__ */ s(
     "div",
     {
       className: "ux-app-layout",
       "data-state": o.open ? "expanded" : "collapsed",
       children: [
         /* @__PURE__ */ e("aside", { className: "ux-sidebar", children: /* @__PURE__ */ e(
-          v,
+          x,
           {
-            copy: s,
+            copy: i,
             logo: t,
-            nav: c,
+            nav: l,
             state: o.open ? "expanded" : "collapsed",
             title: d
           }
         ) }),
         o.isMobile ? /* @__PURE__ */ e(
-          m.Root,
+          h.Root,
           {
             open: o.openMobile,
             onOpenChange: o.setOpenMobile,
-            children: /* @__PURE__ */ l(m.Portal, { children: [
-              /* @__PURE__ */ e(m.Backdrop, { className: "ux-drawer-backdrop" }),
-              /* @__PURE__ */ l(m.Popup, { className: "ux-drawer", children: [
-                /* @__PURE__ */ e(m.Title, { className: "ux-visually-hidden", children: s.navigation }),
+            children: /* @__PURE__ */ s(h.Portal, { children: [
+              /* @__PURE__ */ e(h.Backdrop, { className: "ux-drawer-backdrop" }),
+              /* @__PURE__ */ s(h.Popup, { className: "ux-drawer", children: [
+                /* @__PURE__ */ e(h.Title, { className: "ux-visually-hidden", children: i.navigation }),
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    "aria-label": s.closeNavigation,
+                    "aria-label": i.closeNavigation,
                     className: "ux-drawer__close",
                     type: "button",
                     onClick: () => o.setOpenMobile(!1),
-                    children: /* @__PURE__ */ e(T, {})
+                    children: /* @__PURE__ */ e(E, {})
                   }
                 ),
                 /* @__PURE__ */ e(
-                  v,
+                  x,
                   {
-                    copy: s,
+                    copy: i,
                     logo: t,
-                    nav: c,
+                    nav: l,
                     onNavigate: () => o.setOpenMobile(!1),
                     state: "expanded",
                     title: d
@@ -225,21 +225,21 @@ function H({
             ] })
           }
         ) : null,
-        /* @__PURE__ */ l("div", { className: "ux-shell", children: [
-          /* @__PURE__ */ l("header", { className: "ux-app-header", children: [
+        /* @__PURE__ */ s("div", { className: "ux-shell", children: [
+          /* @__PURE__ */ s("header", { className: "ux-app-header", children: [
             /* @__PURE__ */ e(
               "button",
               {
                 "aria-expanded": o.isMobile ? o.openMobile : o.open,
-                "aria-label": s.toggleSidebar,
+                "aria-label": i.toggleSidebar,
                 className: "ux-app-header__trigger",
                 type: "button",
                 onClick: o.toggleSidebar,
-                children: /* @__PURE__ */ e(E, {})
+                children: /* @__PURE__ */ e(T, {})
               }
             ),
             /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "ux-app-header__separator" }),
-            /* @__PURE__ */ e("p", { className: "ux-app-header__title", children: p }),
+            /* @__PURE__ */ e("p", { className: "ux-app-header__title", children: _ }),
             /* @__PURE__ */ e("div", { className: "ux-app-header__slot", children: n }),
             /* @__PURE__ */ e(S, {})
           ] }),

package/dist/styles.css

@@ -1,11 +1,52 @@
 /* @zccz14/ux — unified AppLayout shell. Include this file once from the consuming application. */
 
+/*
+ * Colour layer. Every shell colour resolves through a --ux-* token, and every
+ * --ux-* token prefers the host app's shadcn token over a built-in fallback:
+ * light values on :root, dark values on .dark. Both sets exist because the
+ * fallback is the only thing left when an app omits part of the shadcn token
+ * set — without a dark set, a missing --sidebar would keep the sidebar light
+ * in dark mode.
+ */
+:root {
+  --ux-background: var(--background, #fff);
+  --ux-foreground: var(--foreground, #0f172a);
+  --ux-border: var(--border, #e2e8f0);
+  --ux-accent: var(--accent, var(--muted, #f1f5f9));
+  --ux-ring: var(--ring, #2563eb);
+  --ux-sidebar: var(--sidebar, #fafafa);
+  --ux-sidebar-foreground: var(--sidebar-foreground, var(--foreground, #0f172a));
+  --ux-sidebar-accent: var(--sidebar-accent, var(--accent, #f1f5f9));
+  --ux-sidebar-accent-foreground: var(--sidebar-accent-foreground, var(--foreground, #0f172a));
+  --ux-sidebar-border: var(--sidebar-border, var(--border, #e2e8f0));
+  --ux-sidebar-ring: var(--sidebar-ring, var(--ring, #2563eb));
+}
+
+.dark {
+  --ux-background: var(--background, #121212);
+  --ux-foreground: var(--foreground, #f2f2f2);
+  --ux-border: var(--border, #383838);
+  --ux-accent: var(--accent, var(--muted, #303030));
+  --ux-ring: var(--ring, #d4d4d4);
+  --ux-sidebar: var(--sidebar, #161616);
+  --ux-sidebar-foreground: var(--sidebar-foreground, var(--foreground, #f2f2f2));
+  --ux-sidebar-accent: var(--sidebar-accent, var(--accent, #303030));
+  --ux-sidebar-accent-foreground: var(--sidebar-accent-foreground, var(--foreground, #f2f2f2));
+  --ux-sidebar-border: var(--sidebar-border, var(--border, #383838));
+  --ux-sidebar-ring: var(--sidebar-ring, var(--ring, #d4d4d4));
+}
+
 .ux-app-layout {
   display: flex;
   height: 100svh;
   overflow: hidden;
-  color: var(--foreground, #0f172a);
-  background: var(--background, #fff);
+  color: var(--ux-foreground);
+  color-scheme: light;
+  background: var(--ux-background);
+}
+
+.dark .ux-app-layout {
+  color-scheme: dark;
 }
 
 /* --- Sidebar --- */
@@ -16,9 +57,9 @@
   flex-direction: column;
   width: 16rem;
   overflow: hidden;
-  color: var(--sidebar-foreground, var(--foreground, #0f172a));
-  background: var(--sidebar, #fafafa);
-  border-right: 1px solid var(--sidebar-border, #e2e8f0);
+  color: var(--ux-sidebar-foreground);
+  background: var(--ux-sidebar);
+  border-right: 1px solid var(--ux-sidebar-border);
   transition: width 200ms linear;
 }
 
@@ -46,7 +87,7 @@
   padding-right: 3rem;
 }
 
-/* The framework owns the logo display size: both logo variants render inside a fixed 1.75rem box. */
+/* The framework owns the logo display size: the mark renders inside a fixed 1.75rem box. */
 .ux-sidebar__logo {
   display: flex;
   flex: none;
@@ -105,11 +146,12 @@
   font-weight: 500;
   white-space: nowrap;
   opacity: 0.7;
-  transition: opacity 200ms linear;
+  transition: margin-top 200ms linear, opacity 200ms linear;
 }
 
 .ux-app-layout[data-state="collapsed"] .ux-nav-group__label {
-  display: none;
+  margin-top: -2rem;
+  opacity: 0;
 }
 
 .ux-nav-item {
@@ -134,19 +176,19 @@
 }
 
 .ux-nav-item:hover {
-  color: var(--sidebar-accent-foreground, #0f172a);
-  background: var(--sidebar-accent, #f1f5f9);
+  color: var(--ux-sidebar-accent-foreground);
+  background: var(--ux-sidebar-accent);
 }
 
 .ux-nav-item:focus-visible {
-  outline: 2px solid var(--sidebar-ring, #2563eb);
+  outline: 2px solid var(--ux-sidebar-ring);
   outline-offset: -2px;
 }
 
 .ux-nav-item[aria-current="page"] {
-  color: var(--sidebar-accent-foreground, #0f172a);
+  color: var(--ux-sidebar-accent-foreground);
   font-weight: 500;
-  background: var(--sidebar-accent, #f1f5f9);
+  background: var(--ux-sidebar-accent);
 }
 
 .ux-app-layout[data-state="collapsed"] .ux-nav-item {
@@ -204,8 +246,8 @@
   gap: 0.75rem;
   height: 3.5rem;
   padding: 0 1rem;
-  background: var(--background, #fff);
-  border-bottom: 1px solid var(--border, #e2e8f0);
+  background: var(--ux-background);
+  border-bottom: 1px solid var(--ux-border);
 }
 
 .ux-app-header__trigger {
@@ -227,11 +269,11 @@
 }
 
 .ux-app-header__trigger:hover {
-  background: var(--accent, var(--muted, #f1f5f9));
+  background: var(--ux-accent);
 }
 
 .ux-app-header__trigger:focus-visible {
-  outline: 2px solid var(--ring, #2563eb);
+  outline: 2px solid var(--ux-ring);
   outline-offset: 2px;
 }
 
@@ -244,7 +286,7 @@
   flex: none;
   width: 1px;
   height: 1.25rem;
-  background: var(--border, #e2e8f0);
+  background: var(--ux-border);
 }
 
 .ux-app-header__title {
@@ -302,13 +344,18 @@
   width: 18rem;
   max-width: calc(100vw - 3rem);
   overflow: hidden;
-  color: var(--sidebar-foreground, var(--foreground, #0f172a));
-  background: var(--sidebar, #fafafa);
-  border-right: 1px solid var(--sidebar-border, #e2e8f0);
+  color: var(--ux-sidebar-foreground);
+  color-scheme: light;
+  background: var(--ux-sidebar);
+  border-right: 1px solid var(--ux-sidebar-border);
   outline: none;
   transition: transform 200ms ease-out, opacity 200ms ease-out;
 }
 
+.dark .ux-drawer {
+  color-scheme: dark;
+}
+
 .ux-drawer[data-starting-style],
 .ux-drawer[data-ending-style] {
   opacity: 0;
@@ -335,11 +382,11 @@
 }
 
 .ux-drawer__close:hover {
-  background: var(--sidebar-accent, #f1f5f9);
+  background: var(--ux-sidebar-accent);
 }
 
 .ux-drawer__close:focus-visible {
-  outline: 2px solid var(--sidebar-ring, #2563eb);
+  outline: 2px solid var(--ux-sidebar-ring);
   outline-offset: 2px;
 }
 
@@ -360,12 +407,12 @@
   align-items: center;
   max-width: 16rem;
   padding: 0.375rem 0.75rem;
-  color: var(--background, #fff);
+  color: var(--ux-background);
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 1.25;
   white-space: nowrap;
-  background: var(--foreground, #0f172a);
+  background: var(--ux-foreground);
   border-radius: 0.375rem;
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
   transition: opacity 120ms ease-out, transform 120ms ease-out;

package/dist/types.d.ts

@@ -1,8 +1,4 @@
 import type { ReactNode } from "react";
-export type AppLogo = {
-    light: ReactNode;
-    dark: ReactNode;
-};
 export type AppNavItem = {
     to: string;
     label: string;
@@ -13,7 +9,7 @@ export type AppNavGroup = {
     items: AppNavItem[];
 };
 export type AppLayoutProps = {
-    logo: AppLogo;
+    logo: ReactNode;
     title: string;
     nav: AppNavGroup[];
     headerSlot?: ReactNode;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zccz14/ux",
-  "version": "0.1.6",
-  "description": "Unified AppLayout shell for the NTNL app family: one animated icon sidebar, a fixed-size dark/light logo, and the Linkit-integrated AppHeader.",
+  "version": "0.2.0",
+  "description": "Unified AppLayout shell for the NTNL app family: one animated icon sidebar, a fixed-size logo box, and the Linkit-integrated AppHeader.",
   "license": "MIT",
   "repository": {
     "type": "git",