Refresh UI components and showcase; release updated framework packages

packages/styles/src/config.ts

@@ -39,6 +39,8 @@ export interface StylesConfig {
   entry?: string;
   /** Include the complete @wrnexus/ui component catalog stylesheet. Default true. */
   includeUi?: boolean;
+  /** Maximum uncompressed production CSS bytes to inline in the document. Default 4096; 0 disables inlining. Larger limits trade repeat HTML bytes for one fewer blocking request. */
+  inlineMaxBytes?: number;
   /**
    * Optional custom processor. Return the final CSS string. Use this to run
    * Tailwind, PostCSS, Sass, etc. When omitted, the built-in Bun CSS bundler is

packages/styles/src/theme.ts

@@ -39,6 +39,13 @@ export type ThemeToken =
   | `color-on-${"primary" | "secondary"}`
   | "radius"
   | "radius-sm"
+  | "radius-md"
+  | "radius-lg"
+  | "control-height-sm"
+  | "control-height"
+  | "control-height-lg"
+  | "space-panel"
+  | "font-size-ui"
   | "shadow-1"
   | "shadow-2"
   | "shadow-3"
@@ -452,16 +459,16 @@ function resolveDefaultAccent(
 export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
   light: {
     "color-scheme": "light",
-    "color-bg": "#ffffff",
-    "color-background": "#ffffff",
-    "color-foreground": "#0b1020",
+    "color-bg": "#f7f8fa",
+    "color-background": "#f7f8fa",
+    "color-foreground": "#20232b",
     "color-surface-raised": "#ffffff",
-    "color-surface-muted": "#eceff6",
-    "color-surface-soft": "#f1f4f9",
-    "color-text-muted": "#5a6178",
-    "color-text-subtle": "#737b91",
-    "color-border-strong": "#c7cedd",
-    "color-code-background": "#0b1020",
+    "color-surface-muted": "#eef0f4",
+    "color-surface-soft": "#f6f7f9",
+    "color-text-muted": "#606776",
+    "color-text-subtle": "#6b7280",
+    "color-border-strong": "#b9c0cc",
+    "color-code-background": "#20232b",
     "color-code-surface": "#141a30",
     "color-code-text": "#e7ecff",
     "color-code-muted": "#9aa6d0",
@@ -472,34 +479,41 @@ export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
     "space-section": "5rem",
     "space-section-sm": "3.5rem",
     "container-max": "80rem",
-    "color-surface": "#f6f7fb",
-    "color-surface-2": "#eceff6",
-    "color-text": "#0b1020",
-    "color-muted": "#5a6178",
-    "color-border": "#e2e6f0",
+    "color-surface": "#ffffff",
+    "color-surface-2": "#eef0f4",
+    "color-text": "#20232b",
+    "color-muted": "#606776",
+    "color-border": "#e1e4ea",
     ...paletteTokens(THEME_PALETTES.blue, "light"),
-    radius: "8px",
-    "radius-sm": "5px",
+    radius: "10px",
+    "radius-sm": "6px",
+    "radius-md": "10px",
+    "radius-lg": "12px",
+    "control-height-sm": "2rem",
+    "control-height": "2.5rem",
+    "control-height-lg": "2.75rem",
+    "space-panel": "1.25rem",
+    "font-size-ui": "0.875rem",
     "font-sans": '"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif',
-    "shadow-1": "0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.1)",
+    "shadow-1": "0 1px 3px rgba(16,24,40,0.05)",
     "shadow-2": "0 8px 24px rgba(16,24,40,0.10)",
     "shadow-3": "0 20px 50px rgba(16,24,40,0.14)",
   },
   dark: {
     "color-scheme": "dark",
-    "color-bg": "#000000",
-    "color-background": "#000000",
-    "color-foreground": "#f5f5f5",
-    "color-surface-raised": "#111111",
-    "color-surface-muted": "#181818",
-    "color-surface-soft": "#141414",
-    "color-text-muted": "#b3b3b3",
-    "color-text-subtle": "#8a8a8a",
-    "color-border-strong": "#ffffff38",
+    "color-bg": "#101114",
+    "color-background": "#101114",
+    "color-foreground": "#f0f1f4",
+    "color-surface-raised": "#22252d",
+    "color-surface-muted": "#242730",
+    "color-surface-soft": "#1c1f26",
+    "color-text-muted": "#b5bac5",
+    "color-text-subtle": "#959cab",
+    "color-border-strong": "#555d6c",
     "color-code-background": "#050505",
     "color-code-surface": "#101010",
-    "color-code-text": "#f5f5f5",
-    "color-code-muted": "#a3a3a3",
+    "color-code-text": "#f0f1f4",
+    "color-code-muted": "#a7aeba",
     "color-code-border": "#ffffff24",
     "shadow-sm": "0 1px 2px rgba(0,0,0,0.28)",
     "shadow-md": "0 10px 30px rgba(0,0,0,0.35)",
@@ -507,16 +521,23 @@ export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
     "space-section": "5rem",
     "space-section-sm": "3.5rem",
     "container-max": "80rem",
-    "color-surface": "#0a0a0a",
-    "color-surface-2": "#171717",
-    "color-text": "#f5f5f5",
-    "color-muted": "#a3a3a3",
-    "color-border": "#ffffff1f",
+    "color-surface": "#181a20",
+    "color-surface-2": "#20232b",
+    "color-text": "#f0f1f4",
+    "color-muted": "#a7aeba",
+    "color-border": "#30343e",
     ...paletteTokens(THEME_PALETTES.blue, "dark"),
     radius: "10px",
     "radius-sm": "6px",
+    "radius-md": "10px",
+    "radius-lg": "12px",
+    "control-height-sm": "2rem",
+    "control-height": "2.5rem",
+    "control-height-lg": "2.75rem",
+    "space-panel": "1.25rem",
+    "font-size-ui": "0.875rem",
     "font-sans": '"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif',
-    "shadow-1": "0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.35)",
+    "shadow-1": "0 1px 3px rgba(0,0,0,0.18)",
     "shadow-2": "0 10px 30px rgba(0,0,0,0.35)",
     "shadow-3": "0 24px 64px rgba(0,0,0,0.45)",
   },
@@ -599,11 +620,6 @@ function selectorValue(value: string): string {
 function globalThemeCss(): string {
   return (
     '\nhtml,body{font-family:var(--wrn-font-sans,"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif);}\n' +
-    ":root{--wrn-radius-sm:0.55rem;--wrn-radius-md:0.9rem;--wrn-radius-lg:1.35rem;" +
-    "--wrn-shadow-1:0 1px 2px color-mix(in srgb, black 22%, transparent)," +
-    "0 10px 30px color-mix(in srgb, black 14%, transparent);" +
-    "--wrn-shadow-2:0 10px 30px color-mix(in srgb, black 18%, transparent);" +
-    "--wrn-shadow-3:0 24px 64px color-mix(in srgb, black 24%, transparent);}\n" +
     "wrn-slot{display:contents;}\n" +
     "[data-for]{display:none !important;}\n"
   );