@godxjp/ui 5.0.2 → 6.0.0

package/src/test/__tests__/render-loop-guard.test.tsx

@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { RenderLoopGuard, withRenderLoopGuard } from "../render-loop-guard";
+
+function BadCounter() {
+  const [, bump] = React.useState(0);
+  bump(1);
+  return <div>loop</div>;
+}
+
+describe("RenderLoopGuard", () => {
+  it("passes for stable components", () => {
+    render(
+      <RenderLoopGuard maxRenders={10} label="Stable">
+        <p>ok</p>
+      </RenderLoopGuard>,
+    );
+    expect(screen.getByText("ok")).toBeInTheDocument();
+  });
+
+  it("throws when render count exceeds maxRenders", () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => undefined);
+    expect(() =>
+      render(
+        <RenderLoopGuard maxRenders={5} label="BadCounter">
+          <BadCounter />
+        </RenderLoopGuard>,
+      ),
+    ).toThrow(/Possible infinite render loop|Too many re-renders/i);
+    errorSpy.mockRestore();
+  });
+
+  it("withRenderLoopGuard wraps StrictMode", () => {
+    render(withRenderLoopGuard(<span data-testid="child">child</span>, { maxRenders: 10 }));
+    expect(screen.getByTestId("child")).toBeInTheDocument();
+  });
+});

package/src/test/jest-dom.d.ts

@@ -0,0 +1,4 @@
+// Loads @testing-library/jest-dom's matcher augmentation onto vitest's `expect`
+// (toBeInTheDocument, toHaveAttribute, …) for type-checking. Picked up via the
+// tsconfig `include: ["src"]` glob. Self-contained — see docs/DEVELOPMENT.md §5.
+import "@testing-library/jest-dom/vitest";

package/src/test/render-loop-guard.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+/**
+ * Test-only guard that surfaces runaway re-render loops as a clear error instead
+ * of a hung test. Counts its own renders; once they exceed `maxRenders` it throws,
+ * so an effect/state loop in the tree under test fails fast and legibly.
+ *
+ * Self-contained (no external tooling dependency) — see docs/DEVELOPMENT.md §5.
+ */
+const DEFAULT_MAX_RENDERS = 50;
+
+export type RenderLoopGuardProps = {
+  children: React.ReactNode;
+  /** Render budget before the guard throws. */
+  maxRenders?: number;
+  /** Optional label included in the error for easier triage. */
+  label?: string;
+};
+
+export function RenderLoopGuard({
+  children,
+  maxRenders = DEFAULT_MAX_RENDERS,
+  label,
+}: RenderLoopGuardProps): React.ReactElement {
+  const renders = React.useRef(0);
+  renders.current += 1;
+
+  if (renders.current > maxRenders) {
+    throw new Error(
+      `Possible infinite render loop${label ? ` in "${label}"` : ""}: ` +
+        `exceeded ${maxRenders} renders.`,
+    );
+  }
+
+  return <>{children}</>;
+}
+
+export type RenderLoopGuardOptions = Pick<RenderLoopGuardProps, "maxRenders" | "label">;
+
+/** Wrap a UI element in the guard (inside StrictMode, to surface loops sooner). */
+export function withRenderLoopGuard(
+  ui: React.ReactElement,
+  options?: RenderLoopGuardOptions,
+): React.ReactElement {
+  return (
+    <React.StrictMode>
+      <RenderLoopGuard {...options}>{ui}</RenderLoopGuard>
+    </React.StrictMode>
+  );
+}

package/src/test/render.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { render, type RenderOptions, type RenderResult } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { withRenderLoopGuard } from "./render-loop-guard";
+import { AppProvider } from "../app/app-provider";
+
+function AllProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <AppProvider persist={false} defaultLocale="vi" fallbackLocale="en">
+      <MemoryRouter>{children}</MemoryRouter>
+    </AppProvider>
+  );
+}
+
+export type RenderWithUiOptions = Omit<RenderOptions, "wrapper"> & {
+  loopGuard?: boolean | { maxRenders?: number; label?: string };
+};
+
+export function renderWithUi(ui: React.ReactElement, options?: RenderWithUiOptions): RenderResult {
+  const { loopGuard = true, ...renderOptions } = options ?? {};
+  const guardedUi =
+    loopGuard === false ? ui : withRenderLoopGuard(ui, loopGuard === true ? undefined : loopGuard);
+
+  return render(guardedUi, { wrapper: AllProviders, ...renderOptions });
+}
+
+export * from "@testing-library/react";
+export { default as userEvent } from "@testing-library/user-event";
+export { RenderLoopGuard, withRenderLoopGuard } from "./render-loop-guard";

package/src/test/theme-globals.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import {
+  DENSITY_CLASS,
+  DENSITY_GLOBALS,
+  FONT_SIZE_GLOBALS,
+  PRIMARY_COLOR_GLOBALS,
+  PRIMARY_COLOR_VARS,
+  themeGlobalsToClassName,
+  themeGlobalsToCssVars,
+} from "./theme-globals";
+
+describe("themeGlobalsToCssVars", () => {
+  describe("primaryColor presets", () => {
+    it.each(PRIMARY_COLOR_GLOBALS)(
+      "preset %s defines primary, ring, accent, foreground",
+      (preset) => {
+        const vars = PRIMARY_COLOR_VARS[preset];
+        expect(vars["--primary"]).toMatch(/^\d+ \d+% \d+%$/);
+        expect(vars["--ring"]).toMatch(/^\d+ \d+% \d+%$/);
+        expect(vars["--accent"]).toMatch(/^\d+ \d+% \d+%$/);
+        expect(vars["--accent-foreground"]).toMatch(/^\d+ \d+% \d+%$/);
+        expect(vars["--primary-foreground"]).toBe("0 0% 100%");
+      },
+    );
+
+    it("maps partner orange to Tailwind hsl aliases", () => {
+      expect(themeGlobalsToCssVars({ primaryColor: "partner" })).toMatchObject({
+        "--primary": "24 95% 53%",
+        "--accent": "24 95% 95%",
+        "--color-primary": "hsl(24 95% 53%)",
+        "--color-ring": "hsl(24 95% 53%)",
+        "--color-accent": "hsl(24 95% 95%)",
+        "--color-accent-foreground": "hsl(24 95% 28%)",
+      });
+    });
+
+    it("defaults to GodX navy when primaryColor omitted", () => {
+      const vars = themeGlobalsToCssVars({});
+      expect(vars["--color-primary"]).toBe("hsl(211 73% 15%)");
+      expect(vars["--color-ring"]).toBe("hsl(24 99% 46%)");
+      expect(vars["--accent"]).toBe("24 99% 95%");
+    });
+  });
+
+  describe("fontSize scale", () => {
+    it.each(FONT_SIZE_GLOBALS)("fontSize=%s produces stable output", (fontSize) => {
+      const vars = themeGlobalsToCssVars({ fontSize });
+      expect(vars).toBeTypeOf("object");
+    });
+
+    it("scales typography for sm and lg", () => {
+      expect(themeGlobalsToCssVars({ fontSize: "sm" })["--font-size-sm"]).toBe("0.8125rem");
+      expect(themeGlobalsToCssVars({ fontSize: "lg" })["--font-size-sm"]).toBe("0.9375rem");
+    });
+
+    it("default fontSize does not override --font-size-sm", () => {
+      expect(themeGlobalsToCssVars({ fontSize: "default" })).not.toHaveProperty("--font-size-sm");
+    });
+  });
+
+  it("merges fontSize + primaryColor in one object", () => {
+    const vars = themeGlobalsToCssVars({ fontSize: "lg", primaryColor: "crm" });
+    expect(vars["--font-size-base"]).toBe("1.0625rem");
+    expect(vars["--primary"]).toBe("262 83% 58%");
+    expect(vars["--color-primary"]).toBe("hsl(262 83% 58%)");
+  });
+});
+
+describe("themeGlobalsToClassName", () => {
+  it.each(DENSITY_GLOBALS)("density %s maps to ui-density-* class", (density) => {
+    expect(themeGlobalsToClassName({ density })).toBe(DENSITY_CLASS[density]);
+  });
+
+  it("defaults density to ui-density-default", () => {
+    expect(themeGlobalsToClassName({})).toBe(DENSITY_CLASS.default);
+  });
+});

package/src/test/theme-globals.ts

@@ -0,0 +1,134 @@
+import type { CSSProperties } from "react";
+import type { PageDensityProp } from "../props/vocabulary/layout.prop";
+
+/** Density toolbar → `ui-density-*` class (same as PageContainer density). */
+export const DENSITY_GLOBALS = [
+  "compact",
+  "default",
+  "comfortable",
+] as const satisfies readonly PageDensityProp[];
+
+export type DensityGlobal = (typeof DENSITY_GLOBALS)[number];
+
+export const DENSITY_CLASS: Record<DensityGlobal, string> = {
+  compact: "ui-density-compact",
+  default: "ui-density-default",
+  comfortable: "ui-density-comfortable",
+};
+
+export const DENSITY_CLASS_NAMES = Object.values(DENSITY_CLASS);
+
+/** Scales typography tokens — mirrors app `theme.css` overrides. */
+export const FONT_SIZE_GLOBALS = ["sm", "default", "lg"] as const;
+export type FontSizeGlobal = (typeof FONT_SIZE_GLOBALS)[number];
+
+const FONT_SIZE_VARS: Record<FontSizeGlobal, Record<string, string>> = {
+  sm: {
+    "--font-size-xs": "0.6875rem",
+    "--font-size-sm": "0.8125rem",
+    "--font-size-base": "0.9375rem",
+    "--font-size-lg": "1rem",
+    "--font-size-xl": "1.125rem",
+    "--font-size-2xl": "1.25rem",
+  },
+  default: {},
+  lg: {
+    "--font-size-xs": "0.8125rem",
+    "--font-size-sm": "0.9375rem",
+    "--font-size-base": "1.0625rem",
+    "--font-size-lg": "1.1875rem",
+    "--font-size-xl": "1.3125rem",
+    "--font-size-2xl": "1.625rem",
+  },
+};
+
+/** Brand primary presets — HSL components (no `hsl()` wrapper), like `theme.css`. */
+export const PRIMARY_COLOR_GLOBALS = ["brand", "crm", "logistics", "partner", "slate"] as const;
+export type PrimaryColorGlobal = (typeof PRIMARY_COLOR_GLOBALS)[number];
+
+export const PRIMARY_COLOR_LABELS: Record<PrimaryColorGlobal, string> = {
+  brand: "GodX Navy",
+  crm: "CRM Violet",
+  logistics: "Logistics Teal",
+  partner: "Partner Orange",
+  slate: "HQ Slate",
+};
+
+/** Primary, focus ring, and tinted accent mirror service theme.css overrides. */
+export const PRIMARY_COLOR_VARS: Record<PrimaryColorGlobal, Record<string, string>> = {
+  brand: {
+    "--primary": "211 73% 15%",
+    "--primary-foreground": "0 0% 100%",
+    "--ring": "24 99% 46%",
+    "--accent": "24 99% 95%",
+    "--accent-foreground": "24 99% 28%",
+  },
+  crm: {
+    "--primary": "262 83% 58%",
+    "--primary-foreground": "0 0% 100%",
+    "--ring": "262 83% 58%",
+    "--accent": "262 83% 96%",
+    "--accent-foreground": "262 83% 28%",
+  },
+  logistics: {
+    "--primary": "173 80% 36%",
+    "--primary-foreground": "0 0% 100%",
+    "--ring": "173 80% 36%",
+    "--accent": "173 80% 94%",
+    "--accent-foreground": "173 80% 22%",
+  },
+  partner: {
+    "--primary": "24 95% 53%",
+    "--primary-foreground": "0 0% 100%",
+    "--ring": "24 95% 53%",
+    "--accent": "24 95% 95%",
+    "--accent-foreground": "24 95% 28%",
+  },
+  slate: {
+    "--primary": "215 25% 27%",
+    "--primary-foreground": "0 0% 100%",
+    "--ring": "215 25% 27%",
+    "--accent": "215 25% 94%",
+    "--accent-foreground": "215 25% 20%",
+  },
+};
+
+export type ThemeGlobals = {
+  density?: DensityGlobal;
+  fontSize?: FontSizeGlobal;
+  primaryColor?: PrimaryColorGlobal;
+};
+
+function hslFromComponents(components: string): string {
+  return `hsl(${components})`;
+}
+
+/** CSS vars for :root — includes Tailwind @theme `--color-*` aliases. */
+export function themeGlobalsToCssVars(globals: ThemeGlobals): Record<string, string> {
+  const fontSize = globals.fontSize ?? "default";
+  const primaryColor = globals.primaryColor ?? "brand";
+  const primary = PRIMARY_COLOR_VARS[primaryColor];
+
+  return {
+    ...FONT_SIZE_VARS[fontSize],
+    "--primary": primary["--primary"],
+    "--primary-foreground": primary["--primary-foreground"],
+    "--ring": primary["--ring"],
+    "--accent": primary["--accent"],
+    "--accent-foreground": primary["--accent-foreground"],
+    "--color-primary": hslFromComponents(primary["--primary"]),
+    "--color-primary-foreground": hslFromComponents(primary["--primary-foreground"]),
+    "--color-ring": hslFromComponents(primary["--ring"]),
+    "--color-accent": hslFromComponents(primary["--accent"]),
+    "--color-accent-foreground": hslFromComponents(primary["--accent-foreground"]),
+  };
+}
+
+export function themeGlobalsToStyle(globals: ThemeGlobals): CSSProperties {
+  return themeGlobalsToCssVars(globals);
+}
+
+export function themeGlobalsToClassName(globals: ThemeGlobals): string {
+  const density = globals.density ?? "default";
+  return DENSITY_CLASS[density];
+}

package/src/test/theme-test-utils.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { render, type RenderOptions, type RenderResult } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { AppProvider } from "../app/app-provider";
+import type { AppProviderProp } from "../props/components/app.prop";
+import {
+  DENSITY_CLASS,
+  themeGlobalsToCssVars,
+  type FontSizeGlobal,
+  type PrimaryColorGlobal,
+} from "./theme-globals";
+import { densityClass } from "../lib/variants";
+import type { PageDensityProp } from "../props/vocabulary/layout.prop";
+
+export type ThemeTestOptions = {
+  density?: PageDensityProp;
+  fontSize?: FontSizeGlobal;
+  primaryColor?: PrimaryColorGlobal;
+  app?: Partial<AppProviderProp>;
+};
+
+type RenderWithThemeOptions = Omit<RenderOptions, "wrapper"> &
+  ThemeTestOptions & {
+    initialEntries?: string[];
+  };
+
+/** Renders UI under density + brand tokens — mirrors preview theme globals. */
+export function ThemeTestRoot({
+  children,
+  density = "default",
+  fontSize = "default",
+  primaryColor = "brand",
+  app,
+}: React.PropsWithChildren<ThemeTestOptions>) {
+  const style = themeGlobalsToCssVars({ density, fontSize, primaryColor }) as React.CSSProperties;
+  return (
+    <div className={densityClass[density]} style={style}>
+      <AppProvider persist={false} defaultLocale="vi" fallbackLocale="en" {...app}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </AppProvider>
+    </div>
+  );
+}
+
+export function renderWithTheme(
+  ui: React.ReactElement,
+  options?: RenderWithThemeOptions,
+): RenderResult {
+  const {
+    density = "default",
+    fontSize = "default",
+    primaryColor = "brand",
+    app,
+    ...renderOptions
+  } = options ?? {};
+
+  return render(ui, {
+    wrapper: ({ children }) => (
+      <ThemeTestRoot density={density} fontSize={fontSize} primaryColor={primaryColor} app={app}>
+        {children}
+      </ThemeTestRoot>
+    ),
+    ...renderOptions,
+  });
+}
+
+export { DENSITY_CLASS, densityClass };

package/src/theme/example.service.css

@@ -0,0 +1,37 @@
+/* Service theme — the ONLY file apps may use to customize design tokens.
+ * Copy to: apps/<your-app>/src/theme.css
+ * Import this file once in main.tsx (instead of @godxjp/ui/styles directly). */
+
+@import "@godxjp/ui/styles";
+
+/* Override tokens below. Do NOT add component styles or Tailwind utilities here. */
+:root {
+  /* Brand — pair primary with a focus ring and tinted accent: */
+  /* --primary: 211 73% 15%; */
+  /* --primary-foreground: 0 0% 100%; */
+  /* --ring: 24 99% 46%; */
+  /* --accent: 24 99% 95%; */
+  /* --accent-foreground: 24 99% 28%; */
+
+  /* Semantic status (optional — defaults in base.css): */
+  /* --success: 146 40% 58%; */
+  /* --warning: 44 100% 49%; */
+  /* --info: 223 42% 50%; */
+  /* --attention: 24 99% 46%; */
+
+  /* Tracking-code identity (optional — do not reuse for status): */
+  /* --tracking-internal: 211 73% 15%; */
+  /* --tracking-seller: 44 5% 42%; */
+  /* --tracking-yamato: 24 99% 46%; */
+
+  /* Layout density (optional): */
+  /* --space-page-x: var(--space-8); */
+
+  /* Primitive component tokens — override tokens only, no selector CSS: */
+  /* --card-space-inset: var(--space-section-active); */
+  /* --card-space-header-y: var(--space-stack-sm); */
+  /* --card-space-body-y: var(--space-section-active); */
+  /* --card-space-footer-y: var(--space-stack-sm); */
+  /* --card-title-font-size: var(--font-size-base); */
+  /* --card-header-background-alpha: 0.55; */
+}

package/src/tokens/base.css

@@ -0,0 +1,13 @@
+/* @godxjp/ui — token manifest.
+ * Services MUST NOT edit package token files directly.
+ * App-specific overrides live in app theme.css after importing @godxjp/ui/styles.
+ */
+
+@import "./foundation.css";
+@import "./primitives/layout.css";
+@import "./primitives/control.css";
+@import "./primitives/card.css";
+@import "./primitives/table.css";
+@import "./primitives/feedback.css";
+@import "./primitives/badge.css";
+@import "./primitives/navigation.css";

package/src/tokens/foundation.css

@@ -0,0 +1,151 @@
+/* Foundation tokens: color, typography, raw spacing, ratio, radius, shadow. */
+
+:root {
+  /* Color system (HSL components) — dxs-kintai: warm hue-60 neutral spine,
+   * SmartHR blue primary, 和色/wa-iro semantics. */
+  --background: 60 33% 99%; /* #fdfdfb warm off-white */
+  --foreground: 48 8% 13%; /* #23221e SmartHR TEXT_BLACK */
+  --card: 60 33% 99%;
+  --card-foreground: 48 8% 13%;
+  --popover: 60 33% 99%;
+  --popover-foreground: 48 8% 13%;
+  --primary: 204 100% 39%; /* SmartHR MAIN #0077c7 */
+  --primary-foreground: 60 33% 99%;
+  --secondary: 45 15% 95%; /* #f4f3f0 */
+  --secondary-foreground: 48 8% 13%;
+  --muted: 45 15% 95%;
+  --muted-foreground: 44 5% 42%; /* #706d65 SmartHR TEXT_GREY */
+  --accent: 40 13% 91%; /* #ebe9e5 */
+  --accent-foreground: 48 8% 13%;
+  --destructive: 357 64% 44%; /* 茜 #b7282e */
+  --destructive-foreground: 60 33% 99%;
+  --border: 30 7% 83%; /* #d6d3d0 SmartHR BORDER */
+  --input: 30 7% 83%;
+  --ring: 204 100% 39%;
+  --success: 146 40% 58%; /* 若竹 #68be8d */
+  --success-foreground: 60 33% 99%;
+  --warning: 44 100% 49%; /* 山吹 #f8b500 */
+  --warning-foreground: 48 8% 13%;
+  --info: 221 40% 50%; /* 群青 #4c6cb3 */
+  --info-foreground: 60 33% 99%;
+  --attention: 25 99% 46%; /* 朱 #eb6101 */
+  --attention-foreground: 60 33% 99%;
+  --tracking-internal: 204 100% 39%;
+  --tracking-seller: 44 5% 42%;
+  --tracking-yamato: 25 99% 46%;
+
+  /* 和色 (wa-iro) — traditional Japanese accent palette for charts, tags,
+   * decoration. Decorative hex (NOT semantic): never remap a wa-iro to a
+   * semantic role beyond the five canonical mappings used above. */
+  --wa-ai: #165e83; /* 藍   indigo */
+  --wa-gunjo: #4c6cb3; /* 群青 ultramarine */
+  --wa-ruri: #1e50a2; /* 瑠璃 lapis */
+  --wa-kon: #223a70; /* 紺   navy */
+  --wa-wakatake: #68be8d; /* 若竹 young bamboo */
+  --wa-moegi: #006e54; /* 萌葱 spring green */
+  --wa-yamabuki: #f8b500; /* 山吹 mountain yellow */
+  --wa-shu: #eb6101; /* 朱   vermilion */
+  --wa-akane: #b7282e; /* 茜   madder */
+  --wa-enji: #b94047; /* 臙脂 cochineal */
+  --wa-sakura: #fef4f4; /* 桜   cherry (soft bg) */
+  --wa-sumi: #595857; /* 墨   warm ink */
+  --wa-nezu: #949495; /* 鼠   mouse-grey */
+
+  /* Neutral + blue ramps (data viz, fine UI shading). */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+
+  /* Shape and elevation */
+  --radius: 0.375rem;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+
+  /* Typography scale — M PLUS 2 (JIS L1+L2 kanji, Vietnamese subset), one notch
+   * larger than the JP-dense base for comfortable reading (body 14px). */
+  --font-family-sans:
+    "M PLUS 2", "Be Vietnam Pro", "Hiragino Sans", "Noto Sans JP", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-size-xs: 0.8125rem; /* 13px */
+  --font-size-sm: 0.875rem; /* 14px — body */
+  --font-size-base: 0.9375rem; /* 15px */
+  --font-size-lg: 1.1875rem; /* 19px */
+  --font-size-xl: 1.375rem; /* 22px */
+  --font-size-2xl: 1.625rem; /* 26px */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-body: 1.7;
+  --letter-spacing-tight: 0;
+
+  /* Raw spacing scale */
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Golden ratio scale */
+  --ratio-phi: 1.6180339887;
+  --phi-unit: var(--space-4);
+  --phi-n2: calc(var(--phi-unit) / var(--ratio-phi) / var(--ratio-phi));
+  --phi-n1: calc(var(--phi-unit) / var(--ratio-phi));
+  --phi-0: var(--phi-unit);
+  --phi-p1: calc(var(--phi-unit) * var(--ratio-phi));
+  --phi-p2: calc(var(--phi-p1) * var(--ratio-phi));
+}
+
+.dark {
+  /* Warm-tinted dark spine — keeps the hue-60 character at low lightness. */
+  --background: 48 9% 9%;
+  --foreground: 60 20% 96%;
+  --card: 48 8% 12%;
+  --card-foreground: 60 20% 96%;
+  --popover: 48 8% 12%;
+  --popover-foreground: 60 20% 96%;
+  --primary: 204 90% 60%; /* SmartHR blue lifted for dark contrast */
+  --primary-foreground: 48 9% 9%;
+  --secondary: 45 6% 18%;
+  --secondary-foreground: 60 20% 96%;
+  --muted: 45 6% 18%;
+  --muted-foreground: 44 6% 64%;
+  --accent: 45 7% 22%;
+  --accent-foreground: 60 20% 96%;
+  --destructive: 357 55% 52%;
+  --destructive-foreground: 60 20% 96%;
+  --border: 45 6% 22%;
+  --input: 45 6% 22%;
+  --ring: 204 90% 60%;
+  --success: 146 45% 55%;
+  --success-foreground: 48 9% 9%;
+  --warning: 44 95% 55%;
+  --warning-foreground: 48 9% 9%;
+  --info: 221 55% 62%;
+  --info-foreground: 48 9% 9%;
+  --attention: 25 95% 56%;
+  --attention-foreground: 48 9% 9%;
+  --tracking-internal: 204 90% 60%;
+  --tracking-seller: 44 6% 64%;
+  --tracking-yamato: 25 95% 56%;
+}

package/src/tokens/primitives/badge.css

@@ -0,0 +1,13 @@
+/* Badge primitive tokens. */
+
+:root {
+  --space-badge-gap: var(--space-inline-xs);
+  --space-badge-x: var(--space-2);
+  --space-badge-y: var(--space-1);
+  --code-badge-height: 1.75rem;
+  --code-badge-gap: var(--space-inline-sm);
+  --code-badge-padding-x: var(--space-2);
+  --code-badge-bg-alpha: 0.055;
+  --code-badge-border-alpha: 0.28;
+  --code-badge-separator-alpha: 0.22;
+}

package/src/tokens/primitives/card.css

@@ -0,0 +1,29 @@
+/* Card primitive tokens: card chrome derives from foundation + layout primitives. */
+
+:root {
+  --card-space-inset: var(--space-section-active);
+  --card-space-header-y: var(--space-stack-sm);
+  --card-space-body-y: var(--space-section-active);
+  --card-space-footer-y: var(--space-stack-sm);
+  --card-space-gap: var(--space-stack-xs);
+  --card-title-font-size: var(--font-size-base);
+  --card-title-line-height: var(--line-height-tight);
+  --card-title-font-weight: var(--font-weight-semibold);
+  --card-description-font-size: var(--font-size-sm);
+  --card-description-line-height: var(--line-height-normal);
+  --card-background: var(--card);
+  --card-foreground-token: var(--card-foreground);
+  --card-border-token: var(--border);
+  --card-header-background: var(--muted);
+  --card-header-background-alpha: 0.55;
+  --card-radius: var(--radius);
+  --card-stat-label-font-size: var(--font-size-xs);
+  --card-stat-label-font-weight: var(--font-weight-medium);
+  --card-stat-label-letter-spacing: 0.04em;
+  --card-stat-value-font-size: 1.625rem;
+  --card-stat-value-line-height: 1.1;
+  --card-stat-value-font-weight: var(--font-weight-semibold);
+  --card-stat-hint-font-size: var(--font-size-xs);
+  --card-stat-gap: var(--space-stack-xs);
+  --card-stat-icon-size: 2.25rem;
+}