@godxjp/ui 13.14.0 → 13.15.1

package/dist/app/app-provider.d.ts

@@ -1,7 +1,7 @@
 import { type AppDateFormat, type AppLocale, type AppTimeFormat, type AppTimezone } from "./types";
 import type { AppContextValue, AppProviderProp } from "../props/components/app.prop";
 export type { AppProviderProp, AppContextValue } from "../props/components/app.prop";
-export declare function AppProvider({ children, defaultLocale, fallbackLocale, defaultTimezone, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, storageKey, persist, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, }: AppProviderProp): import("react/jsx-runtime").JSX.Element;
+export declare function AppProvider({ children, defaultLocale, fallbackLocale, defaultTimezone, systemTimezone, defaultTimeFormat, defaultDateFormat, timezoneOptions, storageKey, persist, theme: initialTheme, brand: initialBrand, density: initialDensity, fontSize: initialFontSize, onLocaleChange, onTimezoneChange, onTimeFormatChange, onDateFormatChange, onThemeChange, onBrandChange, onDensityChange, onFontSizeChange, }: AppProviderProp): import("react/jsx-runtime").JSX.Element;
 export declare function useAppContext(): AppContextValue;
 /** Returns null outside AppProvider — used by pickers for optional context. */
 export declare function useOptionalAppContext(): AppContextValue | null;

package/dist/app/app-provider.js

@@ -14,6 +14,9 @@ import {
   syncDatetimeContext
 } from "../lib/datetime";
 import { DEFAULT_STORAGE_KEY, readStoredPreferences, writeStoredPreferences } from "./storage";
+import {
+  applyThemeAxes
+} from "./theme-axes";
 import { resolveDefaultTimeFormat } from "./time-format-labels";
 import { resolveDefaultTimezone } from "./timezones";
 import {
@@ -56,10 +59,18 @@ function AppProvider({
   timezoneOptions,
   storageKey = DEFAULT_STORAGE_KEY,
   persist = true,
+  theme: initialTheme = "light",
+  brand: initialBrand = null,
+  density: initialDensity = "default",
+  fontSize: initialFontSize = "default",
   onLocaleChange,
   onTimezoneChange,
   onTimeFormatChange,
-  onDateFormatChange
+  onDateFormatChange,
+  onThemeChange,
+  onBrandChange,
+  onDensityChange,
+  onFontSizeChange
 }) {
   const initialLocale = defaultLocale;
   const [locale, setLocaleState] = React.useState(initialLocale);
@@ -72,8 +83,21 @@ function AppProvider({
   const [dateFormat, setDateFormatState] = React.useState(
     () => resolveInitialDateFormat(void 0, defaultDateFormat, initialLocale)
   );
+  const [theme, setThemeState] = React.useState(initialTheme);
+  const [brand, setBrandState] = React.useState(initialBrand);
+  const [density, setDensityState] = React.useState(initialDensity);
+  const [fontSize, setFontSizeState] = React.useState(initialFontSize);
   const hasMountedRef = React.useRef(false);
-  const prefsRef = React.useRef({ locale, timezone, timeFormat, dateFormat });
+  const prefsRef = React.useRef({
+    locale,
+    timezone,
+    timeFormat,
+    dateFormat,
+    theme,
+    brand,
+    density,
+    fontSize
+  });
   React.useEffect(() => {
     const stored = persist ? readStoredPreferences(storageKey) : {};
     const nextLocale = stored.locale ?? defaultLocale;
@@ -88,28 +112,48 @@ function AppProvider({
       defaultDateFormat,
       nextLocale
     );
+    const nextTheme = stored.theme ?? initialTheme;
+    const nextBrand = stored.brand ?? initialBrand;
+    const nextDensity = stored.density ?? initialDensity;
+    const nextFontSize = stored.fontSize ?? initialFontSize;
     prefsRef.current = {
       locale: nextLocale,
       timezone: nextTimezone,
       timeFormat: nextTimeFormat,
-      dateFormat: nextDateFormat
+      dateFormat: nextDateFormat,
+      theme: nextTheme,
+      brand: nextBrand,
+      density: nextDensity,
+      fontSize: nextFontSize
     };
     setLocaleState(nextLocale);
     setTimezoneState(nextTimezone);
     setTimeFormatState(nextTimeFormat);
     setDateFormatState(nextDateFormat);
+    setThemeState(nextTheme);
+    setBrandState(nextBrand);
+    setDensityState(nextDensity);
+    setFontSizeState(nextFontSize);
   }, [
     defaultDateFormat,
     defaultLocale,
     defaultTimeFormat,
     defaultTimezone,
+    initialTheme,
+    initialBrand,
+    initialDensity,
+    initialFontSize,
     persist,
     storageKey,
     systemTimezone
   ]);
   React.useEffect(() => {
-    prefsRef.current = { locale, timezone, timeFormat, dateFormat };
-  }, [locale, timezone, timeFormat, dateFormat]);
+    prefsRef.current = { locale, timezone, timeFormat, dateFormat, theme, brand, density, fontSize };
+  }, [locale, timezone, timeFormat, dateFormat, theme, brand, density, fontSize]);
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    applyThemeAxes(document.documentElement, { theme, brand, density, fontSize });
+  }, [theme, brand, density, fontSize]);
   const setLocale = React.useCallback(
     (next) => {
       prefsRef.current = { ...prefsRef.current, locale: next };
@@ -146,6 +190,42 @@ function AppProvider({
     },
     [onDateFormatChange, persist, storageKey]
   );
+  const setTheme = React.useCallback(
+    (next) => {
+      prefsRef.current = { ...prefsRef.current, theme: next };
+      setThemeState(next);
+      onThemeChange?.(next);
+      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+    },
+    [onThemeChange, persist, storageKey]
+  );
+  const setBrand = React.useCallback(
+    (next) => {
+      prefsRef.current = { ...prefsRef.current, brand: next };
+      setBrandState(next);
+      onBrandChange?.(next);
+      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+    },
+    [onBrandChange, persist, storageKey]
+  );
+  const setDensity = React.useCallback(
+    (next) => {
+      prefsRef.current = { ...prefsRef.current, density: next };
+      setDensityState(next);
+      onDensityChange?.(next);
+      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+    },
+    [onDensityChange, persist, storageKey]
+  );
+  const setFontSize = React.useCallback(
+    (next) => {
+      prefsRef.current = { ...prefsRef.current, fontSize: next };
+      setFontSizeState(next);
+      onFontSizeChange?.(next);
+      if (persist) writeStoredPreferences(storageKey, prefsRef.current);
+    },
+    [onFontSizeChange, persist, storageKey]
+  );
   const requestHeaders = React.useMemo(
     () => buildRequestHeaders(locale, timezone, timeFormat, dateFormat),
     [locale, timezone, timeFormat, dateFormat]
@@ -185,10 +265,18 @@ function AppProvider({
       dayPickerLocale: getDayPickerLocale(locale),
       requestHeaders,
       timezoneOptions,
+      theme,
+      brand,
+      density,
+      fontSize,
       setLocale,
       setTimezone,
       setTimeFormat,
-      setDateFormat
+      setDateFormat,
+      setTheme,
+      setBrand,
+      setDensity,
+      setFontSize
     }),
     [
       locale,
@@ -199,10 +287,18 @@ function AppProvider({
       dateFnsLocale,
       requestHeaders,
       timezoneOptions,
+      theme,
+      brand,
+      density,
+      fontSize,
       setLocale,
       setTimezone,
       setTimeFormat,
-      setDateFormat
+      setDateFormat,
+      setTheme,
+      setBrand,
+      setDensity,
+      setFontSize
     ]
   );
   return /* @__PURE__ */ jsx(AppContext.Provider, { value, children });

package/dist/app/index.d.ts

@@ -6,6 +6,7 @@ export * from "./date-formats";
 export * from "./time-format-labels";
 export * from "./date-format-labels";
 export * from "./storage";
+export * from "./theme-axes";
 export * from "./request-headers";
 export { AppProvider, useAppContext, useOptionalAppContext, useAppLocale, useAppTimezone, useAppTimeFormat, useAppDateFormat, } from "./app-provider";
 export { useFormatting, useDateTime } from "./use-formatting";

package/dist/app/index.js

@@ -6,6 +6,7 @@ export * from "./date-formats";
 export * from "./time-format-labels";
 export * from "./date-format-labels";
 export * from "./storage";
+export * from "./theme-axes";
 export * from "./request-headers";
 import {
   AppProvider,

package/dist/app/storage.d.ts

@@ -1,3 +1,4 @@
+import { type AppBrand, type AppDensity, type AppFontSize, type AppTheme } from "./theme-axes";
 import type { AppLocale, AppTimezone, AppTimeFormat, AppDateFormat } from "./types";
 declare const DEFAULT_STORAGE_KEY = "godxjp.app";
 export type StoredAppPreferences = {
@@ -5,6 +6,11 @@ export type StoredAppPreferences = {
     timezone?: AppTimezone;
     timeFormat?: AppTimeFormat;
     dateFormat?: AppDateFormat;
+    theme?: AppTheme;
+    /** `null` = explicit opt-out (keep app token); on read, null/invalid → undefined. */
+    brand?: AppBrand | null;
+    density?: AppDensity;
+    fontSize?: AppFontSize;
 };
 export declare function readStoredPreferences(storageKey: string): StoredAppPreferences;
 export declare function writeStoredPreferences(storageKey: string, preferences: StoredAppPreferences): void;

package/dist/app/storage.js

@@ -1,6 +1,12 @@
 import { isAppLocale } from "./locales";
 import { isAppDateFormat } from "./date-formats";
 import { isAppTimeFormat } from "./time-formats";
+import {
+  isAppBrand,
+  isAppDensity,
+  isAppFontSize,
+  isAppTheme
+} from "./theme-axes";
 const DEFAULT_STORAGE_KEY = "godxjp.app";
 function readStoredPreferences(storageKey) {
   if (typeof window === "undefined") return {};
@@ -12,7 +18,11 @@ function readStoredPreferences(storageKey) {
       locale: isAppLocale(parsed.locale) ? parsed.locale : void 0,
       timezone: typeof parsed.timezone === "string" ? parsed.timezone : void 0,
       timeFormat: isAppTimeFormat(parsed.timeFormat) ? parsed.timeFormat : void 0,
-      dateFormat: isAppDateFormat(parsed.dateFormat) ? parsed.dateFormat : void 0
+      dateFormat: isAppDateFormat(parsed.dateFormat) ? parsed.dateFormat : void 0,
+      theme: isAppTheme(parsed.theme) ? parsed.theme : void 0,
+      brand: isAppBrand(parsed.brand) ? parsed.brand : void 0,
+      density: isAppDensity(parsed.density) ? parsed.density : void 0,
+      fontSize: isAppFontSize(parsed.fontSize) ? parsed.fontSize : void 0
     };
   } catch {
     return {};

package/dist/app/theme-axes.d.ts

@@ -0,0 +1,30 @@
+import type { PageDensityProp } from "../props/vocabulary/layout.prop";
+/** Light / dark spine — `data-theme` (alias of the legacy `.dark` class). */
+export type AppTheme = "light" | "dark";
+/** Primary-palette preset — `data-brand`. `null` = keep the app's own `--primary`. */
+export type AppBrand = "brand" | "crm" | "logistics" | "partner" | "slate";
+/** Control / table / spacing density — `data-density` (same vocab as PageContainer). */
+export type AppDensity = PageDensityProp;
+/** Base type size — `data-font-size`; a preset rescales the whole golden scale. */
+export type AppFontSize = "sm" | "default" | "lg";
+export declare const APP_THEMES: readonly ["light", "dark"];
+export declare const APP_BRANDS: readonly ["brand", "crm", "logistics", "partner", "slate"];
+export declare const APP_DENSITIES: readonly ["compact", "default", "comfortable"];
+export declare const APP_FONT_SIZES: readonly ["sm", "default", "lg"];
+/** The four axes as held by AppProvider. `brand: null` opts out (app token wins). */
+export type AppThemeAxes = {
+    theme: AppTheme;
+    brand: AppBrand | null;
+    density: AppDensity;
+    fontSize: AppFontSize;
+};
+export declare const isAppTheme: (v: unknown) => v is AppTheme;
+export declare const isAppBrand: (v: unknown) => v is AppBrand;
+export declare const isAppDensity: (v: unknown) => v is AppDensity;
+export declare const isAppFontSize: (v: unknown) => v is AppFontSize;
+/**
+ * Write the axis attributes onto a root element (default `<html>`). Pass `brand: null`
+ * to remove `data-brand` so the app's own `--primary` token applies. SSR-safe: callers
+ * guard `typeof document`. Exported for non-React / imperative consumers too.
+ */
+export declare function applyThemeAxes(el: HTMLElement, axes: Partial<AppThemeAxes>): void;

package/dist/app/theme-axes.js

@@ -0,0 +1,38 @@
+const APP_THEMES = ["light", "dark"];
+const APP_BRANDS = [
+  "brand",
+  "crm",
+  "logistics",
+  "partner",
+  "slate"
+];
+const APP_DENSITIES = [
+  "compact",
+  "default",
+  "comfortable"
+];
+const APP_FONT_SIZES = ["sm", "default", "lg"];
+const isAppTheme = (v) => APP_THEMES.includes(v);
+const isAppBrand = (v) => APP_BRANDS.includes(v);
+const isAppDensity = (v) => APP_DENSITIES.includes(v);
+const isAppFontSize = (v) => APP_FONT_SIZES.includes(v);
+function applyThemeAxes(el, axes) {
+  if (axes.theme !== void 0) el.dataset.theme = axes.theme;
+  if (axes.density !== void 0) el.dataset.density = axes.density;
+  if (axes.fontSize !== void 0) el.dataset.fontSize = axes.fontSize;
+  if (axes.brand !== void 0) {
+    if (axes.brand === null) delete el.dataset.brand;
+    else el.dataset.brand = axes.brand;
+  }
+}
+export {
+  APP_BRANDS,
+  APP_DENSITIES,
+  APP_FONT_SIZES,
+  APP_THEMES,
+  applyThemeAxes,
+  isAppBrand,
+  isAppDensity,
+  isAppFontSize,
+  isAppTheme
+};

package/dist/components/layout/page-container.js

@@ -38,7 +38,7 @@ function PageContainerRoot({
   footer,
   breadcrumb,
   linkComponent: LinkComponent = "a",
-  density = "default",
+  density,
   variant = "default",
   stickyFooter = false,
   footerReveal = "always",
@@ -54,7 +54,9 @@ function PageContainerRoot({
       "data-revealed": revealed ? "true" : void 0,
       className: cn(
         "ui-page-container",
-        densityClass[density],
+        // Unset → no class, so the page inherits the global density axis
+        // (:root[data-density]); an explicit prop emits a class that overrides it.
+        density && densityClass[density],
         pageContainerVariantClass[variant],
         stickyFooter && "ui-page-container--sticky-footer",
         reveal && "ui-page-container--reveal-footer",

package/dist/components/navigation/app-setting-picker.d.ts

@@ -2,8 +2,9 @@ import * as React from "react";
 import type { AppSettingPickerProp } from "../../props/components/app.prop";
 export type { AppSettingKind, AppSettingPickerProp, AppSettingPickerProp as AppSettingPickerProps, } from "../../props/components/app.prop";
 /**
- * One provider-bound Select for any single AppProvider setting — replaces the former
- * Locale/Timezone/Date-format/Time-format pickers. Mount under `<AppProvider>` and it
- * reads/writes the matching context (`kind`); or pass value + onValueChange to control it.
+ * One provider-bound Select for any single AppProvider setting — locale / timezone /
+ * date-format / time-format and the four theme axes (theme / brand / density / fontSize).
+ * Mount under `<AppProvider>` and it reads/writes the matching context (`kind`); or pass
+ * value + onValueChange to control it.
  */
 export declare const AppSettingPicker: React.ForwardRefExoticComponent<AppSettingPickerProp & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/navigation/app-setting-picker.js

@@ -1,10 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CalendarDays, Clock, Globe, Languages } from "lucide-react";
+import {
+  CalendarDays,
+  Clock,
+  Globe,
+  Languages,
+  Palette,
+  Rows3,
+  SunMoon,
+  Type
+} from "lucide-react";
 import { APP_DATE_FORMAT_OPTIONS, getDateFormatLabel } from "../../app/date-format-labels";
 import { APP_TIME_FORMAT_OPTIONS, getTimeFormatLabel } from "../../app/time-format-labels";
 import { getTimezoneLabel, resolveTimezonePickerOptions } from "../../app/timezones";
 import { APP_LOCALES } from "../../app/types";
+import {
+  APP_BRANDS,
+  APP_DENSITIES,
+  APP_FONT_SIZES,
+  APP_THEMES
+} from "../../app/theme-axes";
 import { useOptionalAppContext } from "../../app/app-provider";
 import { useTranslation } from "../../i18n/use-translation";
 import { cn } from "../../lib/utils";
@@ -19,30 +34,48 @@ const ICON = {
   locale: Languages,
   timezone: Globe,
   dateFormat: CalendarDays,
-  timeFormat: Clock
+  timeFormat: Clock,
+  theme: SunMoon,
+  brand: Palette,
+  density: Rows3,
+  fontSize: Type
 };
 const TRIGGER_WIDTH = {
   locale: "sm:w-40",
   timezone: "sm:w-56",
   dateFormat: "sm:w-44",
-  timeFormat: "sm:w-44"
+  timeFormat: "sm:w-44",
+  theme: "sm:w-36",
+  brand: "sm:w-44",
+  density: "sm:w-40",
+  fontSize: "sm:w-36"
 };
 const ARIA_KEY = {
   locale: "navigation.localePicker.ariaLabel",
   timezone: "navigation.timezonePicker.ariaLabel",
   dateFormat: "navigation.dateFormatPicker.ariaLabel",
-  timeFormat: "navigation.timeFormatPicker.ariaLabel"
+  timeFormat: "navigation.timeFormatPicker.ariaLabel",
+  theme: "navigation.themePicker.ariaLabel",
+  brand: "navigation.brandPicker.ariaLabel",
+  density: "navigation.densityPicker.ariaLabel",
+  fontSize: "navigation.fontSizePicker.ariaLabel"
 };
+const BRAND_NONE = "__app__";
 const AppSettingPicker = React.forwardRef(
   function AppSettingPicker2({ kind, className, disabled, id, name, value, onValueChange }, ref) {
     const ctx = useOptionalAppContext();
     const { t, locale, fallbackLocale } = useTranslation();
-    const current = value ?? ctx?.[kind];
+    const raw = value ?? ctx?.[kind];
+    const current = raw == null ? kind === "brand" ? BRAND_NONE : void 0 : String(raw);
     const setter = ctx ? {
       locale: ctx.setLocale,
       timezone: ctx.setTimezone,
       dateFormat: ctx.setDateFormat,
-      timeFormat: ctx.setTimeFormat
+      timeFormat: ctx.setTimeFormat,
+      theme: ctx.setTheme,
+      density: ctx.setDensity,
+      fontSize: ctx.setFontSize,
+      brand: (next) => ctx.setBrand(next === BRAND_NONE ? null : next)
     }[kind] : void 0;
     const handleChange = onValueChange ?? setter;
     const items = React.useMemo(() => {
@@ -64,6 +97,23 @@ const AppSettingPicker = React.forwardRef(
             value: option.value,
             label: getTimeFormatLabel(option.value, locale, fallbackLocale)
           }));
+        case "theme":
+          return APP_THEMES.map((v) => ({ value: v, label: t(`navigation.themePicker.${v}`) }));
+        case "density":
+          return APP_DENSITIES.map((v) => ({
+            value: v,
+            label: t(`navigation.densityPicker.${v}`)
+          }));
+        case "fontSize":
+          return APP_FONT_SIZES.map((v) => ({
+            value: v,
+            label: t(`navigation.fontSizePicker.${v}`)
+          }));
+        case "brand":
+          return [
+            { value: BRAND_NONE, label: t("navigation.brandPicker.none") },
+            ...APP_BRANDS.map((v) => ({ value: v, label: t(`navigation.brandPicker.${v}`) }))
+          ];
       }
     }, [kind, ctx?.timezoneOptions, current, t, locale, fallbackLocale]);
     const unbound = current === void 0 || !handleChange;

package/dist/i18n/messages/en.json

@@ -201,6 +201,32 @@
         "one": "Total {total} item",
         "other": "Total {total} items"
       }
+    },
+    "themePicker": {
+      "ariaLabel": "Theme",
+      "light": "Light",
+      "dark": "Dark"
+    },
+    "densityPicker": {
+      "ariaLabel": "Density",
+      "compact": "Compact",
+      "default": "Default",
+      "comfortable": "Comfortable"
+    },
+    "fontSizePicker": {
+      "ariaLabel": "Font size",
+      "sm": "Small",
+      "default": "Default",
+      "lg": "Large"
+    },
+    "brandPicker": {
+      "ariaLabel": "Brand",
+      "none": "App default",
+      "brand": "GodX Navy",
+      "crm": "CRM Violet",
+      "logistics": "Logistics Teal",
+      "partner": "Partner Orange",
+      "slate": "HQ Slate"
     }
   },
   "locale": {

package/dist/i18n/messages/ja.json

@@ -198,6 +198,32 @@
       "pageSize": "ページサイズ",
       "pageSizeOption": "{size} / ページ",
       "total": "全 {total} 件"
+    },
+    "themePicker": {
+      "ariaLabel": "テーマ",
+      "light": "ライト",
+      "dark": "ダーク"
+    },
+    "densityPicker": {
+      "ariaLabel": "密度",
+      "compact": "コンパクト",
+      "default": "標準",
+      "comfortable": "広め"
+    },
+    "fontSizePicker": {
+      "ariaLabel": "文字サイズ",
+      "sm": "小",
+      "default": "標準",
+      "lg": "大"
+    },
+    "brandPicker": {
+      "ariaLabel": "ブランド",
+      "none": "アプリ既定",
+      "brand": "GodX Navy",
+      "crm": "CRM Violet",
+      "logistics": "Logistics Teal",
+      "partner": "Partner Orange",
+      "slate": "HQ Slate"
     }
   },
   "locale": {

package/dist/i18n/messages/vi.json

@@ -198,6 +198,32 @@
       "pageSize": "Số dòng mỗi trang",
       "pageSizeOption": "{size} / trang",
       "total": "Tổng {total} mục"
+    },
+    "themePicker": {
+      "ariaLabel": "Giao diện",
+      "light": "Sáng",
+      "dark": "Tối"
+    },
+    "densityPicker": {
+      "ariaLabel": "Mật độ",
+      "compact": "Gọn",
+      "default": "Mặc định",
+      "comfortable": "Thoáng"
+    },
+    "fontSizePicker": {
+      "ariaLabel": "Cỡ chữ",
+      "sm": "Nhỏ",
+      "default": "Mặc định",
+      "lg": "Lớn"
+    },
+    "brandPicker": {
+      "ariaLabel": "Thương hiệu",
+      "none": "Mặc định app",
+      "brand": "GodX Navy",
+      "crm": "CRM Violet",
+      "logistics": "Logistics Teal",
+      "partner": "Partner Orange",
+      "slate": "HQ Slate"
     }
   },
   "locale": {

package/dist/props/components/app.prop.d.ts

@@ -2,6 +2,7 @@
 import type { Locale } from "date-fns";
 import type { DayPickerProps } from "react-day-picker";
 import type { AppLocale, AppRequestHeaders, AppTimeFormat, AppTimezone, AppTimezoneDefault, AppDateFormat } from "../../app/types";
+import type { AppBrand, AppDensity, AppFontSize, AppTheme } from "../../app/theme-axes";
 import type { ChildrenProp, ClassNameProp, DisabledProp, IdProp, NameProp, OnValueChangeProp, ValueProp } from "../vocabulary";
 /** @see AppProvider */
 export type AppProviderProp = {
@@ -27,13 +28,31 @@ export type AppProviderProp = {
     storageKey?: string;
     /** Persist user choices. Default: true. */
     persist?: boolean;
+    /**
+     * Initial light/dark theme — written to `<html data-theme>`. Default: `"light"`.
+     * (The legacy `.dark` class still works as an equal alias.)
+     */
+    theme?: AppTheme;
+    /**
+     * Initial brand palette preset — written to `<html data-brand>`. OPT-IN: omit
+     * (or `null`) to keep the brand `--primary` your own `theme.css` defines.
+     */
+    brand?: AppBrand | null;
+    /** Initial density — written to `<html data-density>`. Default: `"default"`. */
+    density?: AppDensity;
+    /** Initial base type size — written to `<html data-font-size>`. Default: `"default"`. */
+    fontSize?: AppFontSize;
     onLocaleChange?: (locale: AppLocale) => void;
     onTimezoneChange?: (timezone: AppTimezone) => void;
     onTimeFormatChange?: (timeFormat: AppTimeFormat) => void;
     onDateFormatChange?: (dateFormat: AppDateFormat) => void;
+    onThemeChange?: (theme: AppTheme) => void;
+    onBrandChange?: (brand: AppBrand | null) => void;
+    onDensityChange?: (density: AppDensity) => void;
+    onFontSizeChange?: (fontSize: AppFontSize) => void;
 };
 /** Which AppProvider setting the {@link AppSettingPicker} reads/writes. */
-export type AppSettingKind = "locale" | "timezone" | "dateFormat" | "timeFormat";
+export type AppSettingKind = "locale" | "timezone" | "dateFormat" | "timeFormat" | "theme" | "brand" | "density" | "fontSize";
 /**
  * @see AppSettingPicker — one provider-bound Select for any single AppProvider setting.
  * Replaces the former Locale/Timezone/Date-format/Time-format pickers; pick the target
@@ -62,8 +81,17 @@ export type AppContextValue = {
     requestHeaders: AppRequestHeaders;
     /** Configured timezone list; `undefined` → full IANA in the timezone-picker recipe. */
     timezoneOptions?: readonly AppTimezone[];
+    /** Current theme axes (mirror `<html data-*>`). */
+    theme: AppTheme;
+    brand: AppBrand | null;
+    density: AppDensity;
+    fontSize: AppFontSize;
     setLocale: (locale: AppLocale) => void;
     setTimezone: (timezone: AppTimezone) => void;
     setTimeFormat: (timeFormat: AppTimeFormat) => void;
     setDateFormat: (dateFormat: AppDateFormat) => void;
+    setTheme: (theme: AppTheme) => void;
+    setBrand: (brand: AppBrand | null) => void;
+    setDensity: (density: AppDensity) => void;
+    setFontSize: (fontSize: AppFontSize) => void;
 };

package/dist/styles/density.css

@@ -1,47 +1,61 @@
 /*
- * DENSITY — one knob retunes φ-unit, controls, tables (PageContainer density prop).
- * Owner: .ui-density-* classes only. Apps use <PageContainer density>, never these classes.
+ * DENSITY — one knob retunes φ-unit, controls, tables. Two entry points, same vars:
+ *   • `<PageContainer density>` → `.ui-density-*` class (scoped to a descendant,
+ *     wins for its subtree by proximity).
+ *   • the density AXIS → `:root[data-density="*"]` on <html> (AppProvider density prop),
+ *     so density cascades app-wide incl. portalled overlays. PageContainer inherits it
+ *     when its `density` prop is unset (emits no class).
+ *
+ * INTENTIONALLY UNLAYERED — do NOT wrap in `@layer components`. The active
+ * tokens (--control-height, --table-row-height, --phi-unit…) get their defaults
+ * from UNLAYERED `:root` rules in tokens/components/*.css. A layered block always
+ * loses to an unlayered one regardless of specificity, so a layered
+ * `:root[data-density]` would silently never override those defaults (the axis
+ * would be a no-op on <html>). Unlayered, `:root[data-density="x"]` (0,2,0) beats
+ * the `:root` default (0,1,0) by specificity. Apps use the prop / axis, never
+ * these classes directly.
  */
 
-@layer components {
-  .ui-density-compact {
-    --control-height: var(--control-height-compact);
-    --control-padding-x: var(--control-padding-x-compact);
-    --table-row-height: var(--table-row-height-compact);
-    --phi-unit: var(--space-3);
-    --checkbox-size: var(--checkbox-size-compact);
-    --switch-width: var(--switch-width-compact);
-    --switch-height: var(--switch-height-compact);
-    --switch-thumb-size: var(--switch-thumb-size-compact);
-    --switch-thumb-translate: var(--switch-thumb-translate-compact);
-    --table-cell-padding-y: var(--space-1);
-    /* Tighter overlay/card chrome at compact density (12px vertical). */
-    --space-chrome-y: var(--space-3);
-  }
+.ui-density-compact,
+:root[data-density="compact"] {
+  --control-height: var(--control-height-compact);
+  --control-padding-x: var(--control-padding-x-compact);
+  --table-row-height: var(--table-row-height-compact);
+  --phi-unit: var(--space-3);
+  --checkbox-size: var(--checkbox-size-compact);
+  --switch-width: var(--switch-width-compact);
+  --switch-height: var(--switch-height-compact);
+  --switch-thumb-size: var(--switch-thumb-size-compact);
+  --switch-thumb-translate: var(--switch-thumb-translate-compact);
+  --table-cell-padding-y: var(--space-1);
+  /* Tighter overlay/card chrome at compact density (12px vertical). */
+  --space-chrome-y: var(--space-3);
+}
 
-  .ui-density-default {
-    --control-height: var(--control-height-default);
-    --control-padding-x: var(--control-padding-x-default);
-    --table-row-height: var(--table-row-height-default);
-    --table-cell-padding-y: var(--space-2);
-  }
+.ui-density-default,
+:root[data-density="default"] {
+  --control-height: var(--control-height-default);
+  --control-padding-x: var(--control-padding-x-default);
+  --table-row-height: var(--table-row-height-default);
+  --table-cell-padding-y: var(--space-2);
+}
 
-  .ui-density-comfortable {
-    --control-height: var(--control-height-comfortable);
-    /* Comfortable steps 44 → 36 → 32 (design spacing-density), steeper than the
-     * default 4px step so sm/xs aren't left 4px too tall. */
-    --control-height-sm: calc(var(--control-height) - 0.5rem);
-    --control-height-xs: calc(var(--control-height) - 0.75rem);
-    --control-padding-x: var(--control-padding-x-comfortable);
-    --table-row-height: var(--table-row-height-comfortable);
-    --phi-unit: var(--space-6);
-    --checkbox-size: var(--checkbox-size-comfortable);
-    --switch-width: var(--switch-width-comfortable);
-    --switch-height: var(--switch-height-comfortable);
-    --switch-thumb-size: var(--switch-thumb-size-comfortable);
-    --switch-thumb-translate: var(--switch-thumb-translate-comfortable);
-    --table-cell-padding-y: var(--space-2);
-    /* Roomier overlay/card chrome at comfortable density (24px vertical). */
-    --space-chrome-y: var(--space-6);
-  }
+.ui-density-comfortable,
+:root[data-density="comfortable"] {
+  --control-height: var(--control-height-comfortable);
+  /* Comfortable steps 44 → 36 → 32 (design spacing-density), steeper than the
+   * default 4px step so sm/xs aren't left 4px too tall. */
+  --control-height-sm: calc(var(--control-height) - 0.5rem);
+  --control-height-xs: calc(var(--control-height) - 0.75rem);
+  --control-padding-x: var(--control-padding-x-comfortable);
+  --table-row-height: var(--table-row-height-comfortable);
+  --phi-unit: var(--space-6);
+  --checkbox-size: var(--checkbox-size-comfortable);
+  --switch-width: var(--switch-width-comfortable);
+  --switch-height: var(--switch-height-comfortable);
+  --switch-thumb-size: var(--switch-thumb-size-comfortable);
+  --switch-thumb-translate: var(--switch-thumb-translate-comfortable);
+  --table-cell-padding-y: var(--space-2);
+  /* Roomier overlay/card chrome at comfortable density (24px vertical). */
+  --space-chrome-y: var(--space-6);
 }

package/dist/tokens/axes.css

@@ -0,0 +1,59 @@
+/* THEME AXES — global consumer API. AppProvider's theme/brand/density/fontSize
+ * props write `data-*` attributes onto <html>; the selectors here bind each axis
+ * to tokens (Rule #21 "every component honours every theme axis"). Density lives
+ * in density.css (shared with the .ui-density-* classes); the dark theme aliases
+ * in foundation.css. Every axis is a NO-OP at its default value, so apps that set
+ * nothing — or override tokens in their own theme.css — are unaffected.
+ *
+ * `:root[data-…]` (specificity 0,2,0) intentionally outranks an app theme.css
+ * `:root` (0,1,0): when an axis IS set it wins; when it is NOT set the app token
+ * override wins. brand is therefore fully opt-in (no default rule). */
+
+/* ── font-size axis — base-driven: a preset sets ONLY --font-size-base and the
+ *    whole golden modular scale (foundation.css) rescales from it. The `default`
+ *    value emits no rule → foundation 14px stands. */
+:root[data-font-size="sm"] {
+  --font-size-base: 0.8125rem; /* 13px */
+}
+:root[data-font-size="lg"] {
+  --font-size-base: 1rem; /* 16px */
+}
+
+/* ── brand axis — primary-palette presets (canonical values; src/test/theme-globals.ts
+ *    mirrors these for the Storybook toolbar). OPT-IN: no `default` rule, so an app
+ *    that pins --primary in its own theme.css keeps it unless it sets data-brand. */
+:root[data-brand="brand"] {
+  --primary: 211 73% 15%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 24 99% 46%;
+  --accent: 24 99% 95%;
+  --accent-foreground: 24 99% 28%;
+}
+:root[data-brand="crm"] {
+  --primary: 262 83% 58%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 262 83% 58%;
+  --accent: 262 83% 96%;
+  --accent-foreground: 262 83% 28%;
+}
+:root[data-brand="logistics"] {
+  --primary: 173 80% 36%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 173 80% 36%;
+  --accent: 173 80% 94%;
+  --accent-foreground: 173 80% 22%;
+}
+:root[data-brand="partner"] {
+  --primary: 24 95% 53%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 24 95% 53%;
+  --accent: 24 95% 95%;
+  --accent-foreground: 24 95% 28%;
+}
+:root[data-brand="slate"] {
+  --primary: 215 25% 27%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 215 25% 27%;
+  --accent: 215 25% 94%;
+  --accent-foreground: 215 25% 20%;
+}

package/dist/tokens/base.css

@@ -5,6 +5,7 @@
 
 @import "./foundation.css";
 @import "./semantic/layout.css";
+@import "./axes.css";
 @import "./components/control.css";
 @import "./components/form.css";
 @import "./components/card.css";

package/dist/tokens/foundation.css

@@ -162,8 +162,11 @@
   --phi-p2: calc(var(--phi-p1) * var(--ratio-phi));
 }
 
-.dark {
-  /* Warm-tinted dark spine — keeps the hue-60 character at low lightness. */
+.dark,
+:root[data-theme="dark"] {
+  /* Warm-tinted dark spine — keeps the hue-60 character at low lightness.
+   * `data-theme="dark"` is the theme axis (AppProvider theme prop → <html>); the
+   * legacy `.dark` class stays an equal alias so existing toggles keep working. */
   --background: 48 9% 9%;
   --foreground: 60 20% 96%;
   --card: 48 8% 12%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "13.14.0",
+  "version": "13.15.1",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,