@sincpro/mobile-ui 0.7.2 → 1.0.1

package/dist/primitives/BaseButton.d.ts

@@ -1,128 +1,128 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
 import { FC } from "react";
 declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent min-h-0";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "py-1.5 px-3 min-h-[36px]";
+        medium: "py-2.5 px-4 min-h-[44px]";
+        large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", {
+}, undefined, "rounded-md items-center justify-center flex-row min-h-[44px]", {
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent min-h-0";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "py-1.5 px-3 min-h-[36px]";
+        medium: "py-2.5 px-4 min-h-[44px]";
+        large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent min-h-0";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "py-1.5 px-3 min-h-[36px]";
+        medium: "py-2.5 px-4 min-h-[44px]";
+        large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
+}, undefined>>;
 declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-9 h-9";
+        medium: "w-11 h-11";
+        large: "w-[52px] h-[52px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-lg items-center justify-center aspect-square", {
+}, undefined, "rounded-md items-center justify-center aspect-square", {
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-9 h-9";
+        medium: "w-11 h-11";
+        large: "w-[52px] h-[52px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-9 h-9";
+        medium: "w-11 h-11";
+        large: "w-[52px] h-[52px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-lg items-center justify-center aspect-square", unknown, unknown, undefined>>;
+}, undefined>>;
 export interface BaseButtonProps extends VariantProps<typeof button> {
     title: string;
     onPress?: () => void;

package/dist/primitives/BaseButton.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { theme } from "../theme";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
-import { LinearGradient } from "expo-linear-gradient";
+import Icon from "../Display/Display.Icon.js";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 // ============================================================================
 // STYLE VARIANTS
 // ============================================================================
 const button = tv({
-    base: "rounded-lg items-center justify-center flex-row min-h-[44px]",
+    base: "rounded-md items-center justify-center flex-row min-h-[44px]",
     variants: {
         variant: {
-            primary: "shadow-sm",
-            accent: "shadow-sm",
-            secondary: "bg-bg-card border border-primary shadow-sm",
+            primary: "bg-accent",
+            accent: "bg-transparent",
+            secondary: "bg-bg-muted border border-border-strong",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -37,12 +36,12 @@ const button = tv({
     },
 });
 const buttonIcon = tv({
-    base: "rounded-lg items-center justify-center aspect-square",
+    base: "rounded-md items-center justify-center aspect-square",
     variants: {
         variant: {
-            primary: "shadow-sm",
-            accent: "shadow-sm",
-            secondary: "bg-bg-card border border-primary shadow-sm",
+            primary: "bg-accent",
+            accent: "bg-transparent",
+            secondary: "bg-bg-muted border border-border-strong",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -67,15 +66,15 @@ const buttonIcon = tv({
 const textColor = tv({
     variants: {
         variant: {
-            primary: "text-white",
-            accent: "text-white",
-            secondary: "text-primary",
-            outline: "text-primary",
+            primary: "text-text-on-accent",
+            accent: "text-text-accent",
+            secondary: "text-text-primary",
+            outline: "text-text-accent",
             outlineDanger: "text-danger",
             outlineBlack: "text-text-primary",
             flat: "text-text-primary",
-            link: "text-primary",
-            transparent: "text-white",
+            link: "text-text-accent",
+            transparent: "text-text-inverse",
         },
         disabled: {
             true: "opacity-50",
@@ -85,17 +84,17 @@ const textColor = tv({
         {
             variant: "primary",
             disabled: true,
-            className: "text-white/70",
+            className: "text-text-on-accent",
         },
         {
             variant: "accent",
             disabled: true,
-            className: "text-white/70",
+            className: "text-text-accent",
         },
         {
             variant: "transparent",
             disabled: true,
-            className: "text-white/70",
+            className: "text-text-inverse/70",
         },
         {
             variant: ["secondary", "outline", "link"],
@@ -128,14 +127,14 @@ const textColor = tv({
 // ============================================================================
 function getLoadingColorDynamic(variant) {
     const map = {
-        primary: theme.text.inverse,
-        accent: theme.text.inverse,
-        secondary: theme.primary,
-        outline: theme.primary,
+        primary: theme.text.onAccent,
+        accent: theme.text.accent,
+        secondary: theme.text.primary,
+        outline: theme.text.accent,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
         flat: theme.text.primary,
-        link: theme.primary,
+        link: theme.text.accent,
         transparent: theme.text.inverse,
     };
     return map[variant] ?? theme.text.inverse;
@@ -143,8 +142,8 @@ function getLoadingColorDynamic(variant) {
 function getIconColorDynamic(variant, disabled) {
     if (disabled) {
         const disabledMap = {
-            primary: theme.icon.inverse + "70",
-            accent: theme.icon.inverse + "70",
+            primary: theme.text.onAccent + "70",
+            accent: theme.text.accent + "70",
             secondary: theme.icon.disabled,
             outline: theme.icon.disabled,
             outlineDanger: theme.danger + "7f",
@@ -156,14 +155,14 @@ function getIconColorDynamic(variant, disabled) {
         return disabledMap[variant] ?? theme.icon.disabled;
     }
     const enabledMap = {
-        primary: theme.icon.inverse,
-        accent: theme.icon.inverse,
-        secondary: theme.primary,
-        outline: theme.primary,
+        primary: theme.text.onAccent,
+        accent: theme.text.accent,
+        secondary: theme.text.primary,
+        outline: theme.text.accent,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
         flat: theme.text.primary,
-        link: theme.primary,
+        link: theme.text.accent,
         transparent: theme.icon.inverse,
     };
     return enabledMap[variant] ?? theme.icon.inverse;
@@ -203,27 +202,12 @@ export const BaseButton = ({ title, onPress, variant = "primary", size = "medium
     if (variant === "link") {
         return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
     }
-    if (variant === "primary" || variant === "accent") {
-        const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
-        const hasFlex = className?.includes("flex-1");
-        return (_jsx(View, { className: className, style: hasFlex ? { flex: 1 } : undefined, children: _jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
-                    borderRadius: 8,
-                    opacity: disabled ? 0.7 : 1,
-                }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsxs(View, { className: button({ size, disabled }), style: { backgroundColor: "transparent" }, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title }))] }) }) }) }));
-    }
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title }))] }));
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, semibold: variant === "primary", variant: textVariantValue, children: title }))] }));
 };
 export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
     const iconColorValue = getIconColor(variant ?? "primary", disabled);
     const loadingColorValue = getLoadingColor(variant ?? "primary");
     const iconSizeValue = getIconSize(size ?? "medium");
-    if (variant === "primary" || variant === "accent") {
-        const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
-        return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
-                borderRadius: 8,
-                opacity: disabled ? 0.7 : 1,
-            }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }) }) }));
-    }
     return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
 };
 // ============================================================================

package/dist/primitives/Box.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 function Box({ className, style, ...props }) {
     return _jsx(View, { className: cn(className), style: style, ...props });

package/dist/primitives/Pressable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { TouchableOpacity, } from "react-native";
 function Pressable({ className, disabled = false, hitSlop = 8, activeOpacity = 0.7, accessibilityRole = "button", style, children, ...rest }) {
     const isDisabled = !!disabled;

package/dist/primitives/Row.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 function Row({ spacing = 2, align = "center", justify = "start", wrap = false, className, style, ...props }) {
     const alignMap = {

package/dist/primitives/Stack.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 function Stack({ spacing = 4, align = "stretch", className, style, ...props }) {
     const alignMap = {

package/dist/primitives/index.d.ts

@@ -1,6 +1,6 @@
-export { AspectRatio, type AspectRatioProps, } from "../primitives/AspectRatio";
-export { Box } from "../primitives/Box";
-export { Pressable, type PressableProps } from "../primitives/Pressable";
-export { Row } from "../primitives/Row";
-export { Spacer, type SpacerProps } from "../primitives/Spacer";
-export { Stack } from "../primitives/Stack";
+export { AspectRatio, type AspectRatioProps, } from "./AspectRatio.js";
+export { Box } from "./Box.js";
+export { Pressable, type PressableProps } from "./Pressable.js";
+export { Row } from "./Row.js";
+export { Spacer, type SpacerProps } from "./Spacer.js";
+export { Stack } from "./Stack.js";

package/dist/primitives/index.js

@@ -1,6 +1,6 @@
-export { AspectRatio, } from "../primitives/AspectRatio";
-export { Box } from "../primitives/Box";
-export { Pressable } from "../primitives/Pressable";
-export { Row } from "../primitives/Row";
-export { Spacer } from "../primitives/Spacer";
-export { Stack } from "../primitives/Stack";
+export { AspectRatio, } from "./AspectRatio.js";
+export { Box } from "./Box.js";
+export { Pressable } from "./Pressable.js";
+export { Row } from "./Row.js";
+export { Spacer } from "./Spacer.js";
+export { Stack } from "./Stack.js";

package/dist/theme/active.d.ts

@@ -1,4 +1,4 @@
-import type { ThemeTokens } from "../theme/types";
+import type { ThemeTokens } from "./types.js";
 export declare function setActiveTheme(tokens: ThemeTokens): void;
 export declare function getActiveTheme(): ThemeTokens;
 export declare function subscribeTheme(listener: () => void): () => void;

package/dist/theme/active.js

@@ -1,8 +1,21 @@
-import { DEFAULT_THEME } from "../theme/default";
+import { DEFAULT_THEME } from "./default.js";
+import { validateTheme } from "./validate.js";
 const activeTheme = { ...DEFAULT_THEME };
 const listeners = new Set();
 let version = 0;
+// Detection helper: we don't want validation warnings to spam the console while running
+// runtime tests under Node (they intentionally pass partial themes). The check is cheap
+// and runs once at module load.
+const isReactNative = typeof navigator !== "undefined" &&
+    navigator.product === "ReactNative";
 export function setActiveTheme(tokens) {
+    if (__DEV__ && isReactNative) {
+        const issues = validateTheme(tokens);
+        if (issues.length > 0) {
+            const fmt = issues.map((i) => `  · ${i.path}: ${i.message}`).join("\n");
+            console.warn(`[@sincpro/mobile-ui] setActiveTheme received a theme with issues:\n${fmt}\nRendering will fall back to default styles for missing keys.`);
+        }
+    }
     Object.assign(activeTheme, tokens);
     version += 1;
     listeners.forEach((listener) => listener());

package/dist/theme/build.d.ts

@@ -0,0 +1,33 @@
+import type { ThemeTokens } from "./types.js";
+export type BrandThemeMode = "light" | "dark";
+export type BuildThemeFromBrandOptions = {
+    /** Theme name (e.g. `acme-light`). */
+    name: string;
+    /** Brand seed fill (CTA / primary). */
+    brand: string;
+    mode: BrandThemeMode;
+    /**
+     * Brand-colored text on page/card. If omitted, derived by darkening (light)
+     * or lightening (dark) the seed until it is usable as text.
+     */
+    brandText?: string;
+    /** Optional secondary seed; defaults to a shifted brand hue. */
+    secondary?: string;
+    /** Optional accent seed; defaults to brand. */
+    accent?: string;
+};
+/**
+ * Builds a complete `ThemeTokens` from a brand seed — Material-style derivation
+ * for mobile apps that rebrand without hand-authoring every token.
+ *
+ * Starts from `DEFAULT_THEME` / `DEFAULT_DARK_THEME` and overlays derived roles
+ * so consumers always get containers, state layers, and material chrome.
+ *
+ * @example
+ * setActiveTheme(buildThemeFromBrand({
+ *   name: "acme-light",
+ *   brand: "#0066FF",
+ *   mode: "light",
+ * }));
+ */
+export declare function buildThemeFromBrand(opts: BuildThemeFromBrandOptions): ThemeTokens;

package/dist/theme/build.js

@@ -0,0 +1,118 @@
+import { containerPair, mixHex, shiftLightness } from "./color.js";
+import { resolveOnColor } from "./contrast.js";
+import { DEFAULT_DARK_THEME } from "./dark.js";
+import { DEFAULT_THEME } from "./default.js";
+import { mergeTheme } from "./define.js";
+const STATE_LIGHT = { hover: 0.08, press: 0.12, focus: 0.12, drag: 0.16 };
+const STATE_DARK = { hover: 0.1, press: 0.16, focus: 0.14, drag: 0.2 };
+const MATERIAL_LIGHT = { blur: 24, opacity: 0.78, borderOpacity: 0.18 };
+const MATERIAL_DARK = { blur: 28, opacity: 0.62, borderOpacity: 0.22 };
+const SUCCESS = "#2F6B3C";
+const WARNING = "#7E5E12";
+const DANGER = "#9B3B30";
+const INFO = "#0F5C6E";
+function deriveBrandText(brand, mode) {
+    if (mode === "light") {
+        return shiftLightness(brand, -0.28);
+    }
+    // Dark surfaces need a light brand text — mix toward white until AA-friendly.
+    return mixHex(brand, "#FFFFFF", 0.62);
+}
+/**
+ * Builds a complete `ThemeTokens` from a brand seed — Material-style derivation
+ * for mobile apps that rebrand without hand-authoring every token.
+ *
+ * Starts from `DEFAULT_THEME` / `DEFAULT_DARK_THEME` and overlays derived roles
+ * so consumers always get containers, state layers, and material chrome.
+ *
+ * @example
+ * setActiveTheme(buildThemeFromBrand({
+ *   name: "acme-light",
+ *   brand: "#0066FF",
+ *   mode: "light",
+ * }));
+ */
+export function buildThemeFromBrand(opts) {
+    const { name, brand, mode } = opts;
+    const base = mode === "light" ? DEFAULT_THEME : DEFAULT_DARK_THEME;
+    const secondary = opts.secondary ?? shiftLightness(brand, mode === "light" ? -0.18 : -0.08);
+    const accent = opts.accent ?? brand;
+    const brandText = opts.brandText ?? deriveBrandText(brand, mode);
+    const primaryC = containerPair(brand, mode);
+    const secondaryC = containerPair(secondary, mode);
+    const accentC = containerPair(accent, mode);
+    const successC = containerPair(SUCCESS, mode);
+    const warningC = containerPair(WARNING, mode);
+    const dangerC = containerPair(DANGER, mode);
+    const infoC = containerPair(INFO, mode);
+    const page = mode === "light" ? mixHex(brand, "#FFFFFF", 0.96) : "#0C0C0C";
+    const card = mode === "light" ? "#FFFFFF" : "#161616";
+    const muted = mode === "light" ? mixHex(brand, "#FFFFFF", 0.92) : mixHex(brand, "#000000", 0.88);
+    const bgAccent = primaryC.container;
+    const hover = mode === "light" ? mixHex(brand, "#FFFFFF", 0.9) : mixHex(brand, "#000000", 0.82);
+    const disabled = mode === "light" ? mixHex(brand, "#FFFFFF", 0.86) : mixHex("#FFFFFF", "#000000", 0.85);
+    return mergeTheme(base, {
+        name,
+        primary: brand,
+        secondary,
+        accent,
+        bg: {
+            page,
+            card,
+            popover: card,
+            muted,
+            accent: bgAccent,
+            hover,
+            disabled,
+            inverse: mode === "light" ? "#0C0C0C" : mixHex(brand, "#FFFFFF", 0.94),
+            containerLowest: mode === "light" ? page : "#0A0A0A",
+            container: muted,
+            containerHigh: mode === "light" ? mixHex(brand, "#FFFFFF", 0.84) : "#1E1E1E",
+        },
+        text: {
+            accent: brandText,
+            onPrimary: resolveOnColor(brand),
+            onSecondary: resolveOnColor(secondary),
+            onAccent: resolveOnColor(accent),
+            onDanger: resolveOnColor(DANGER),
+            onSuccess: resolveOnColor(SUCCESS),
+        },
+        border: {
+            focus: brandText,
+            default: mode === "light" ? mixHex(brand, "#FFFFFF", 0.82) : "#262626",
+            light: muted,
+            strong: mode === "light" ? mixHex(brand, "#000000", 0.25) : "#3A3A3A",
+        },
+        ring: brandText,
+        success: SUCCESS,
+        warning: WARNING,
+        danger: DANGER,
+        info: INFO,
+        successLight: successC.container,
+        warningLight: warningC.container,
+        dangerLight: dangerC.container,
+        infoLight: infoC.container,
+        container: {
+            primary: primaryC.container,
+            onPrimary: primaryC.onContainer,
+            secondary: secondaryC.container,
+            onSecondary: secondaryC.onContainer,
+            accent: accentC.container,
+            onAccent: accentC.onContainer,
+            success: successC.container,
+            onSuccess: successC.onContainer,
+            warning: warningC.container,
+            onWarning: warningC.onContainer,
+            danger: dangerC.container,
+            onDanger: dangerC.onContainer,
+            info: infoC.container,
+            onInfo: infoC.onContainer,
+        },
+        state: mode === "light" ? { ...STATE_LIGHT } : { ...STATE_DARK },
+        material: mode === "light" ? { ...MATERIAL_LIGHT } : { ...MATERIAL_DARK },
+        gradient: {
+            primary: [shiftLightness(brand, 0.12), brand],
+            accent: [brand, secondary],
+        },
+    });
+}

package/dist/theme/color.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Color primitives for theme derivation (HSL). Used by buildThemeFromBrand
+ * and container/tonal helpers — keeps brand math in one place.
+ */
+export type Hsl = {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function hexToHsl(hex: string): Hsl;
+export declare function hslToHex({ h, s, l }: Hsl): string;
+/** Mix two hex colors. `t=0` → a, `t=1` → b. */
+export declare function mixHex(a: string, b: string, t: number): string;
+/** Shift lightness in HSL. delta in [-1, 1] absolute L change. */
+export declare function shiftLightness(hex: string, delta: number): string;
+/** Soft container fill + on-container ink (M3-style tonal pair). */
+export declare function containerPair(seed: string, mode: "light" | "dark"): {
+    container: string;
+    onContainer: string;
+};