create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/ui-kit/src/motion/motion-showcase.stories.tsx

@@ -0,0 +1,234 @@
+// Motion Showcase — quay toàn bộ animation của ui-kit 1 chỗ (motion identity).
+// Parity matrix antd→tokens: docs/parity-matrix.md
+import { useState, type ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../ui/button/index';
+import { Modal } from '../ui/modal/index';
+import { Drawer } from '../ui/drawer/index';
+import { notification } from '../ui/notification/index';
+import { message } from '../ui/message/index';
+import { Spinner as SpinnerComp } from '../ui/spinner/index';
+import { Switch } from '../ui/switch/index';
+import { AvatarGroup } from '../ui/avatar-group/index';
+import { Icon } from '../ui/icons/index.js';
+import { Badge } from '../ui/badge/index';
+import { Progress } from '../ui/progress/index';
+import { Result } from '../ui/result/index';
+import { Tag } from '../ui/tag/index';
+
+const meta = { title: 'Theming & Motion/Motion Showcase', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function OverlayDemo() {
+  const [modal, setModal] = useState(false);
+  const [drawer, setDrawer] = useState(false);
+  return (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+      <Button type="primary" onClick={() => setModal(true)}>Modal zoom</Button>
+      <Button onClick={() => setDrawer(true)}>Drawer slide</Button>
+      <Button onClick={() => notification.info('Slide-in phải →')}>Notification</Button>
+      <Button onClick={() => message.success('Toast fade-up')}>Message</Button>
+      <Modal open={modal} title="Zoom + fade" onCancel={() => setModal(false)} onOk={() => setModal(false)}>
+        Đóng = zoom-out + fade (exit nhanh hơn enter 30%).
+      </Modal>
+      <Drawer open={drawer} title="Slide drawer" onClose={() => setDrawer(false)}>
+        Đóng = slide-out phải (exit animation).
+      </Drawer>
+    </div>
+  );
+}
+
+function SpinnerMatrix() {
+  return (
+    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
+      {(['ring', 'dots', 'bars'] as const).map((v) => (
+        <div key={v} style={{ textAlign: 'center' }}>
+          <SpinnerComp label={`spinner-${v}`} variant={v} />
+          <div style={{ fontSize: 12, marginTop: 4 }}>{v}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ToggleDemo() {
+  const [on, setOn] = useState(false);
+  return (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+      <Switch checked={on} onChange={setOn} checkedChildren="Bật" unCheckedChildren="Tắt" />
+      <span style={{ fontSize: 12 }}>Spring toggle</span>
+    </div>
+  );
+}
+
+export const NenTang: Story = {
+  name: 'Overlay + Feedback',
+  render: () => <OverlayDemo />,
+};
+export const SpinnerVariants: Story = { name: 'Spinner variants', render: () => <SpinnerMatrix /> };
+export const Toggle: Story = { render: () => <ToggleDemo /> };
+
+
+// ── Motion Waves (motion-max 2026-10-18) — 12 keyframe mới: bp-float/pulse-soft/
+// shake/bounce-in/slide-in-left/right/glow/ripple/marquee/check-draw/indeterminate/
+// flip/odometer. Infinite CHỈ cho trạng thái (pulse/float/indeterminate/marquee);
+// còn lại 150–500ms one-shot. reduced-motion: block global + motion-reduce:animate-none
+// ở chỗ infinite kết thúc ngoài màn hình (indeterminate). ──
+
+/** Replay helper — tăng key để remount node, animation chạy lại. */
+function Replay({ label, children }: { label: string; children: (key: number) => ReactNode }) {
+  const [key, setKey] = useState(0);
+  return (
+    <div className="flex flex-col items-center gap-2 rounded-xl border border-line bg-s1 p-4">
+      <div className="grid h-16 place-items-center">{children(key)}</div>
+      <Button size="small" onClick={() => setKey((k) => k + 1)}>
+        {label}
+      </Button>
+    </div>
+  );
+}
+
+/** 12 keyframe mới — mỗi ô 1 hiệu ứng, nút Replay chạy lại one-shot. */
+export const MotionWaves: Story = {
+  name: 'Motion Waves — 12 keyframe mới (motion-max)',
+  render: () => (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+      <Replay label="shake">
+        {(k) => (
+          <span key={k} className="text-2xl font-semibold text-st-fail animate-[bp-shake_400ms_var(--ease-toggle)]">
+            Lỗi form
+          </span>
+        )}
+      </Replay>
+      <Replay label="bounce-in">
+        {(k) => (
+          <Tag key={k} className="animate-[bp-bounce-in_var(--motion-base)_var(--ease-enter)]">
+            bounce-in
+          </Tag>
+        )}
+      </Replay>
+      <Replay label="slide-in-left">
+        {(k) => (
+          <span key={k} className="text-body text-ink animate-[bp-slide-in-left_var(--motion-base)_var(--ease-enter)]">
+            ← từ trái
+          </span>
+        )}
+      </Replay>
+      <Replay label="slide-in-right">
+        {(k) => (
+          <span key={k} className="text-body text-ink animate-[bp-slide-in-right_var(--motion-base)_var(--ease-enter)]">
+            từ phải →
+          </span>
+        )}
+      </Replay>
+      <Replay label="flip">
+        {(k) => (
+          <span
+            key={k}
+            className="grid size-12 place-items-center rounded-xl border border-line bg-s2 animate-[bp-flip_360ms_var(--ease-enter)]"
+          >
+            <Icon name="star" size={18} className="text-accent" />
+          </span>
+        )}
+      </Replay>
+      <Replay label="odometer">
+        {(k) => (
+          <span key={k} className="inline-block overflow-hidden text-2xl font-semibold tabular-nums text-ink">
+            <span className="inline-block animate-[bp-odometer_300ms_var(--ease-enter)]">42</span>
+          </span>
+        )}
+      </Replay>
+      <Replay label="check-draw">
+        {(k) => (
+          <svg key={k} viewBox="0 0 52 52" className="size-12 text-st-done" aria-hidden="true">
+            <circle cx="26" cy="26" r="23" fill="none" stroke="currentColor" strokeWidth="2.5" opacity="0.45" pathLength={1} strokeDasharray={1} style={{ animation: 'bp-check-draw 320ms var(--ease-enter) both' }} />
+            <path d="M16 27l7.5 7.5L37 20" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" pathLength={1} strokeDasharray={1} style={{ animation: 'bp-check-draw 420ms 200ms var(--ease-enter) both' }} />
+          </svg>
+        )}
+      </Replay>
+      {/* infinite — trạng thái */}
+      <div className="flex flex-col items-center gap-2 rounded-xl border border-line bg-s1 p-4">
+        <div className="grid h-16 place-items-center">
+          <span aria-hidden="true" className="text-3xl animate-[bp-float_3s_ease-in-out_infinite]">
+            🎈
+          </span>
+        </div>
+        <span className="text-meta text-ink3">float 3s ∞ (empty-state icon)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2 rounded-xl border border-line bg-s1 p-4">
+        <div className="grid h-16 place-items-center">
+          <Badge variant="failed">đang sự cố</Badge>
+        </div>
+        <span className="text-meta text-ink3">pulse-soft 2s ∞ (failed dot)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2 rounded-xl border border-line bg-s1 p-4">
+        <div className="grid h-16 w-full place-items-center">
+          <span className="grid size-12 animate-[bp-glow_2.2s_ease-in-out_infinite] place-items-center rounded-xl bg-accent text-white">
+            <Icon name="bell" size={18} />
+          </span>
+        </div>
+        <span className="text-meta text-ink3">glow 2.2s ∞ (accent thở)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2 rounded-xl border border-line bg-s1 p-4">
+        <div className="grid h-16 w-full place-items-center">
+          <div className="w-full">
+            <Progress indeterminate />
+          </div>
+        </div>
+        <span className="text-meta text-ink3">indeterminate 1.4s ∞ (loading)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2 rounded-xl border border-line bg-s1 p-4">
+        <div className="grid h-16 w-full place-items-center overflow-hidden">
+          <Button type="primary">Ripple — click thử</Button>
+        </div>
+        <span className="text-meta text-ink3">ripple 500ms (click)</span>
+      </div>
+    </div>
+  ),
+};
+
+/** Marquee — logo strip chạy vô hạn (dải nhân đôi translateX -50%); reduced-motion → dừng. */
+export const Marquee: Story = {
+  name: 'Marquee — logo strip ∞',
+  render: () => {
+    const logos = ['Acme', 'Globex', 'Initech', 'Umbrella', 'Stark', 'Wayne'];
+    return (
+      <div className="overflow-hidden rounded-xl border border-line bg-s1 py-4">
+        <div className="flex w-max animate-[bp-marquee_18s_linear_infinite] gap-10 motion-reduce:animate-none">
+          {[...logos, ...logos].map((logo, i) => (
+            <span key={`${logo}-${i}`} className="flex items-center gap-2 text-body font-semibold text-ink3">
+              <Icon name="heart" size={12} />
+              {logo}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+/** StatusMotion — hiệu ứng gắn TRẠNG THÁI thật: Result check-draw, Progress
+ * indeterminate, Badge failed pulse, AvatarGroup pop-in stagger. */
+export const StatusMotion: Story = {
+  name: 'Status motion — check-draw · indeterminate · pulse · pop-in',
+  render: () => (
+    <div className="grid max-w-3xl grid-cols-1 gap-4 sm:grid-cols-2">
+      <Result status="success" title="Đã gate" subTitle="Check-draw stroke vẽ tay khi success" />
+      <div className="flex flex-col justify-center gap-4 rounded-xl border border-line bg-s1 p-4">
+        <Progress indeterminate />
+        <span className="text-meta text-ink3">Progress không biết % — bar chạy vô hạn</span>
+        <Badge variant="failed">sự cố — DDL quá hạn</Badge>
+        <AvatarGroup
+          items={[
+            { name: 'Alice Nguyen' },
+            { name: 'Binh Vu' },
+            { name: 'Chi Tran' },
+            { name: 'Duong Pham' },
+          ]}
+        />
+        <span className="text-meta text-ink3">AvatarGroup pop-in stagger 60ms/vị trí</span>
+      </div>
+    </div>
+  ),
+};

package/stack-template/app/ui-kit/src/motion/motion.md

@@ -0,0 +1,38 @@
+# Motion guidelines — identity "mượt mà" của ui-kit
+
+## Nguyên tắc
+1. **CHỈ animate transform + opacity** (GPU 60fps) — cấm width/height/top/left.
+2. Mọi animation tôn trọng `prefers-reduced-motion` (fallback tức thì — tự động qua block global trong tailwind.css).
+3. Exit nhanh hơn enter ~30% (element ra không cần chờ).
+4. CSS thuần — KHÔNG runtime animation lib trong ui-kit (app-level có motion 12 riêng).
+
+## Duration scale
+| Token | Giá trị | Dùng cho |
+|---|---|---|
+| `--motion-instant` | 90ms | hover tint, focus ring fade |
+| `--motion-fast` | 160ms | exit animations, tooltip/popconfirm hide |
+| `--motion-base` | 240ms | enter animations, drawer/modal open, tab transition |
+| `--motion-slow` | 360ms | large surface, multi-element stagger |
+
+## Easing
+| Token | Giá trị | Dùng cho |
+|---|---|---|
+| `--ease-enter` | cubic-bezier(0.16, 1, 0.3, 1) | element VÀO (decelerate — kết thúc mượt) |
+| `--ease-exit` | cubic-bezier(0.4, 0, 1, 1) | element RA (accelerate — rời nhanh) |
+| `--ease-toggle` | cubic-bezier(0.34, 1.56, 0.64, 1) | toggle/press (spring nhẹ — overshoot) |
+
+## Khi nào animate gì
+| Tình huống | Animation |
+|---|---|
+| Overlay mở (Modal/Drawer/Popover/Dropdown) | fade + zoom/slide-in, `--ease-enter --motion-base` |
+| Overlay đóng | fade + zoom/slide-out, `--ease-exit --motion-fast` |
+| Content xuất hiện (EmptyState/Result/feed) | fade-up, `--motion-base` |
+| Button press | scale 0.97 (active), `--motion-instant` |
+| Input focus ring | fade-in, `--motion-instant` |
+| Switch/Checkbox tick | spring `--ease-toggle` |
+| Notification/Message | slide-in-right → slide-out-right |
+| Tab switch | gạch accent slide (không fade cả panel) |
+| Skeleton | shimmer pulse 1.2s infinite |
+
+## A11y
+`prefers-reduced-motion: reduce` → toàn bộ animation/transition = 0.01ms (tức thì).

package/stack-template/app/ui-kit/src/provider/index.tsx

@@ -0,0 +1,77 @@
+// UiKitProvider — theming layer (Phase theming, roadmap 2026-10-17):
+// - theme 'dark' → data-bp-theme="dark" (themes/dark.css — palette direction B archive)
+// - accent override → set --accent/--accent-hi trên scope (CSS vars cascade — con ghi đè
+//   cha tự nhiên; scaffold project mới đổi brand 1 dòng)
+// - theme OBJECT (batch F 2026-10-18) → runtime token overrides: set cặp --var/value
+//   tương ứng trên wrapping div (canvas/s1/s2/s3/accent/accentHi/ink/ink2/ink3/line/
+//   done/doing/fail → --c-canvas/--c-s1/…/--st-fail). Con cháu subtree ăn theo cascade —
+//   CÙNG cơ chế với dark theme (attr + CSS vars, KHÔNG React context — tokens = nguồn).
+//   Không truyền theme → không style attr, behavior cũ giữ nguyên.
+import type { ReactNode } from 'react';
+
+/** Runtime-overridable token keys → CSS var names (map đủ bộ màu chính). */
+export type ThemeTokens = Partial<
+  Record<
+    'canvas' | 's1' | 's2' | 's3' | 'accent' | 'accentHi' | 'ink' | 'ink2' | 'ink3' | 'line' | 'done' | 'doing' | 'fail',
+    string
+  >
+>;
+
+const TOKEN_VAR: Record<keyof ThemeTokens, `--${string}`> = {
+  canvas: '--c-canvas',
+  s1: '--c-s1',
+  s2: '--c-s2',
+  s3: '--c-s3',
+  accent: '--accent',
+  accentHi: '--accent-hi',
+  ink: '--ink',
+  ink2: '--ink2',
+  ink3: '--ink3',
+  line: '--line',
+  done: '--st-done',
+  doing: '--st-doing',
+  fail: '--st-fail',
+};
+
+export interface UiKitProviderProps {
+  children: ReactNode;
+  /**
+   * 'light' (mặc định — antd look) | 'dark' (direction B archive) | object runtime
+   * tokens (vd `{ accent: '#7c3aed', canvas: '#fdf6e3' }` — render CSS vars trên
+   * scope, cascade xuống subtree).
+   */
+  theme?: 'light' | 'dark' | ThemeTokens;
+  /** Override màu accent — hex/rgb bất kỳ (vd brand color của project scaffolded). */
+  accent?: string;
+  /** Hover accent — mặc định derive không có; truyền nếu cần (vd #4096ff cho antd blue). */
+  accentHover?: string;
+  className?: string;
+}
+
+export function UiKitProvider({
+  children,
+  theme = 'light',
+  accent,
+  accentHover,
+  className,
+}: UiKitProviderProps) {
+  const style: Record<string, string> = {};
+  if (accent) style['--accent'] = accent;
+  if (accentHover) style['--accent-hi'] = accentHover;
+  // Theme object áp SAU legacy accent props — key trùng thì object thắng.
+  if (theme && typeof theme === 'object') {
+    for (const [key, value] of Object.entries(theme)) {
+      if (value) style[TOKEN_VAR[key as keyof typeof TOKEN_VAR]] = value;
+    }
+  }
+
+  return (
+    <div
+      data-bp-theme={theme === 'dark' ? 'dark' : undefined}
+      style={Object.keys(style).length ? (style as React.CSSProperties) : undefined}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+}

package/stack-template/app/ui-kit/src/provider/provider.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from '../ui/badge/index';
+import { Button } from '../ui/button/index';
+import { UiKitProvider } from './index';
+
+const meta = {
+  title: 'Theming & Motion/UiKitProvider',
+  component: UiKitProvider,
+  tags: ['autodocs'],
+} satisfies Meta<typeof UiKitProvider>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+function DemoContent() {
+  return (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Button type="primary">Primary</Button>
+      <Badge variant="created">Created</Badge>
+      <Badge variant="doing">Doing</Badge>
+    </div>
+  );
+}
+
+// Canvas-backed wrapper so surface tokens (--c-canvas) are visible in the demo.
+function Canvas({ children }: { children: React.ReactNode }) {
+  return <div style={{ background: 'var(--c-canvas)', padding: 16 }}>{children}</div>;
+}
+
+export const LightDefault: Story = {
+  args: { children: 'x' },
+  name: 'Light (default)',
+  render: () => (
+    <UiKitProvider>
+      <DemoContent />
+    </UiKitProvider>
+  ),
+};
+
+export const DarkDirectionB: Story = {
+  args: { children: 'x' },
+  name: 'Dark (direction B)',
+  render: () => (
+    <Canvas>
+      <UiKitProvider theme="dark">
+        <DemoContent />
+      </UiKitProvider>
+    </Canvas>
+  ),
+};
+
+export const AccentOverride: Story = {
+  args: { children: 'x' },
+  name: 'Accent override (scaffold brand, one line)',
+  render: () => (
+    <div style={{ display: 'grid', gap: 16 }}>
+      <UiKitProvider accent="#1677ff" accentHover="#4096ff">
+        <DemoContent />
+      </UiKitProvider>
+      <UiKitProvider accent="#e11d48" accentHover="#fb7185">
+        <DemoContent />
+      </UiKitProvider>
+    </div>
+  ),
+};
+
+export const CustomTheme: Story = {
+  name: 'CustomTheme — runtime tokens (purple accent + cream canvas)',
+  args: { children: 'x' },
+  render: () => (
+    <div style={{ display: 'grid', gap: 16 }}>
+      <UiKitProvider theme={{ accent: '#7c3aed', accentHi: '#a78bfa', canvas: '#fdf6e3', s2: '#fffdf8', line: '#e7e5e4' }}>
+        <Canvas>
+          <DemoContent />
+          <p style={{ margin: '8px 0 0', fontSize: 13, color: 'var(--ink2)' }}>
+            Button + badges inherit the runtime tokens via CSS var cascade — no re-render of the design system.
+          </p>
+        </Canvas>
+      </UiKitProvider>
+      <UiKitProvider theme={{ accent: '#0d9488', accentHi: '#2dd4bf', canvas: '#f0fdfa' }}>
+        <Canvas>
+          <DemoContent />
+        </Canvas>
+      </UiKitProvider>
+    </div>
+  ),
+};

package/stack-template/app/ui-kit/src/provider/provider.test.tsx

@@ -0,0 +1,121 @@
+// UiKitProvider tests — theme attr + accent var + nested override.
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Badge } from '../ui/badge/index';
+import { UiKitProvider } from './index';
+
+afterEach(cleanup);
+
+describe('UiKitProvider', () => {
+  it('mặc định light → KHÔNG data-bp-theme', () => {
+    const { container } = render(
+      <UiKitProvider>
+        <span>x</span>
+      </UiKitProvider>,
+    );
+    expect(container.firstElementChild).not.toHaveAttribute('data-bp-theme');
+  });
+
+  it('theme dark → data-bp-theme="dark" (dark.css scope ăn)', () => {
+    const { container } = render(
+      <UiKitProvider theme="dark">
+        <span>x</span>
+      </UiKitProvider>,
+    );
+    expect(container.firstElementChild).toHaveAttribute('data-bp-theme', 'dark');
+  });
+
+  it('accent → inline var --accent trên scope (CSS cascade xuống con)', () => {
+    const { container } = render(
+      <UiKitProvider accent="#ff0000" accentHover="#cc0000">
+        <Badge variant="created">created</Badge>
+      </UiKitProvider>,
+    );
+    const scope = container.firstElementChild as HTMLElement;
+    expect(scope.style.getPropertyValue('--accent')).toBe('#ff0000');
+    expect(scope.style.getPropertyValue('--accent-hi')).toBe('#cc0000');
+  });
+
+  it('nested: provider con ghi đè accent cha (CSS cascade)', () => {
+    const { container } = render(
+      <UiKitProvider accent="#111111">
+        <UiKitProvider accent="#222222">
+          <span data-testid="inner">i</span>
+        </UiKitProvider>
+      </UiKitProvider>,
+    );
+    const outer = container.firstElementChild as HTMLElement;
+    const inner = outer.querySelector('[data-testid="inner"]')!.parentElement as HTMLElement;
+    expect(inner.style.getPropertyValue('--accent')).toBe('#222222');
+    expect(outer.style.getPropertyValue('--accent')).toBe('#111111');
+  });
+
+  it('không truyền theme → KHÔNG style attr (behavior cũ)', () => {
+    const { container } = render(
+      <UiKitProvider>
+        <span>x</span>
+      </UiKitProvider>,
+    );
+    const scope = container.firstElementChild as HTMLElement;
+    expect(scope).not.toHaveAttribute('style');
+  });
+
+  it('theme object → đủ cặp var/value đúng map (--c-canvas, --accent, --st-done…)', () => {
+    const { container } = render(
+      <UiKitProvider
+        theme={{
+          canvas: '#fdf6e3',
+          s2: '#fffdf8',
+          accent: '#7c3aed',
+          accentHi: '#a78bfa',
+          ink: '#1f2937',
+          done: '#16a34a',
+          doing: '#f59e0b',
+          fail: '#dc2626',
+          line: '#e7e5e4',
+        }}
+      >
+        <span>x</span>
+      </UiKitProvider>,
+    );
+    const scope = container.firstElementChild as HTMLElement;
+    expect(scope.style.getPropertyValue('--c-canvas')).toBe('#fdf6e3');
+    expect(scope.style.getPropertyValue('--c-s2')).toBe('#fffdf8');
+    expect(scope.style.getPropertyValue('--accent')).toBe('#7c3aed');
+    expect(scope.style.getPropertyValue('--accent-hi')).toBe('#a78bfa');
+    expect(scope.style.getPropertyValue('--ink')).toBe('#1f2937');
+    expect(scope.style.getPropertyValue('--st-done')).toBe('#16a34a');
+    expect(scope.style.getPropertyValue('--st-doing')).toBe('#f59e0b');
+    expect(scope.style.getPropertyValue('--st-fail')).toBe('#dc2626');
+    expect(scope.style.getPropertyValue('--line')).toBe('#e7e5e4');
+    // không data attr — object theme không bật dark scope
+    expect(scope).not.toHaveAttribute('data-bp-theme');
+  });
+
+  it('theme object trùng key legacy accent → object thắng; key còn lại vẫn set', () => {
+    const { container } = render(
+      <UiKitProvider accent="#ff0000" theme={{ accent: '#7c3aed', ink: '#1f2937' }}>
+        <span>x</span>
+      </UiKitProvider>,
+    );
+    const scope = container.firstElementChild as HTMLElement;
+    expect(scope.style.getPropertyValue('--accent')).toBe('#7c3aed');
+    expect(scope.style.getPropertyValue('--ink')).toBe('#1f2937');
+  });
+
+  it('theme object nested: con ghi đè đúng var, cha giữ var của mình', () => {
+    const { container } = render(
+      <UiKitProvider theme={{ accent: '#111111', canvas: '#ffffff' }}>
+        <UiKitProvider theme={{ accent: '#222222' }}>
+          <span data-testid="inner">i</span>
+        </UiKitProvider>
+      </UiKitProvider>,
+    );
+    const outer = container.firstElementChild as HTMLElement;
+    const inner = outer.querySelector('[data-testid="inner"]')!.parentElement as HTMLElement;
+    expect(inner.style.getPropertyValue('--accent')).toBe('#222222');
+    expect(inner.style.getPropertyValue('--c-canvas')).toBe(''); // con không set → không style local
+    expect(outer.style.getPropertyValue('--accent')).toBe('#111111');
+    expect(outer.style.getPropertyValue('--c-canvas')).toBe('#ffffff');
+  });
+});