@mindlogic-ai/logician-ui 4.0.0 → 5.0.0-alpha.0

package/src/components/Button/Button.tsx

@@ -1,26 +1,30 @@
 import { forwardRef } from 'react';
-import { Button as ChakraButton } from '@chakra-ui/react';
+import { Button as ChakraButton, SystemStyleObject } from '@chakra-ui/react';
 
 import { focusRing } from '@/utils/focusRing';
 import { mergeCss } from '@/utils/mergeCss';
 
 import { polymorphic } from '../../types/polymorphic';
+import {
+  isLegacyButtonProps,
+  resolveLegacyButtonVariant,
+  warnLegacyButtonProps,
+} from './Button.legacy';
 import { buttonTransition, getButtonStyles } from './Button.styles';
-import { ButtonOwnProps, ButtonProps } from './Button.types';
+import { ButtonOwnProps, ButtonProps, ButtonVariant } from './Button.types';
 
 /**
- * Button component with two-dimensional variant system.
- *
- * Combines `colorPalette` (semantic color) with `variant` (visual appearance)
- * for flexible, consistent button styling.
+ * Button — one `variant` role per button (5.0 BAZE palette).
  *
  * @example
  * ```tsx
- * <Button colorPalette="primary" variant="soft">Submit</Button>
- * <Button colorPalette="danger" variant="solid">Delete</Button>
- * <Button colorPalette="secondary" variant="outline">Cancel</Button>
- * <Button colorPalette="neutral" variant="ghost">Close</Button>
- * <Button colorPalette="primary" variant="solid" lift>Get started</Button>
+ * <Button variant="primary">저장</Button>
+ * <Button variant="secondary">취소</Button>
+ * <Button>더 보기</Button> // subtle
+ * <Button variant="ghost" isDestructive>삭제</Button>
+ * <Button variant="danger">영구 삭제</Button>
+ * <Button variant="action"><Sparkles />실행</Button> // coral icon
+ * <Button variant="primary" lift>Get started</Button>
  *
  * // `as` carries the element's own props (see Button.types.ts):
  * <Button as="a" href="/docs" target="_blank">문서</Button>
@@ -29,21 +33,39 @@ import { ButtonOwnProps, ButtonProps } from './Button.types';
 const ButtonImpl = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
-      colorPalette,
-      variant = 'soft',
+      variant: variantProp,
+      isDestructive: isDestructiveProp = false,
       size,
       lift,
       children,
       _hover: hoverProp,
       _active: activeProp,
       _disabled: disabledProp,
-      ...rest
+      css: cssProp,
+      ...restWithLegacy
     },
     ref
   ) => {
-    const palette = colorPalette ?? 'primary';
+    // 4.x callers (untyped JS, `as any`) can still hand us `colorPalette` and
+    // an old variant name. Strip it so it never reaches Chakra's own recipe,
+    // and map the pair onto a 5.0 role — see `Button.legacy.ts`.
+    const { colorPalette: legacyPalette, ...rest } =
+      restWithLegacy as typeof restWithLegacy & { colorPalette?: unknown };
+
+    let variant: ButtonVariant = variantProp ?? 'subtle';
+    let isDestructive = isDestructiveProp;
+    if (isLegacyButtonProps('button', legacyPalette, variantProp)) {
+      const resolved = resolveLegacyButtonVariant(
+        'button',
+        legacyPalette,
+        variantProp
+      );
+      warnLegacyButtonProps('Button', legacyPalette, variantProp, resolved);
+      variant = resolved.variant;
+      isDestructive = isDestructive || resolved.isDestructive;
+    }
 
-    const base = getButtonStyles(palette, variant);
+    const base = getButtonStyles(variant, isDestructive);
 
     // Merged rather than spread after: each variant already owns `_hover` and
     // `_active` for its colours, and replacing either would drop them.
@@ -66,7 +88,12 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonProps>(
           _active: { ...base._active, translate: '0 0', filter: 'none' },
           // `:hover` still matches a disabled button, so the lift has to be
           // switched off here rather than left to pointer-events.
-          _disabled: { translate: '0 0', filter: 'none' },
+          // Merged so the variant's fixed disabled colours survive.
+          _disabled: {
+            ...(base._disabled as object),
+            translate: '0 0',
+            filter: 'none',
+          },
         }
       : base;
 
@@ -120,7 +147,12 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonProps>(
         transition={buttonTransition}
         animationStyle="composite"
         ref={ref}
+        data-variant={variant}
+        data-destructive={isDestructive || undefined}
         {...rest}
+        // The `action` icon rule lives in `css` (a nested selector cannot be a
+        // style prop); merged so a call site's `css` adds to it.
+        css={mergeCss(base.css as SystemStyleObject | undefined, cssProp)}
       >
         {children}
       </ChakraButton>

package/src/components/Button/Button.types.ts

@@ -9,17 +9,38 @@ import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 import type { PolymorphicProps } from '../../types/polymorphic';
 
 /**
- * Button color palette - defines the semantic color family.
+ * Button variant — one role per value (5.0 BAZE palette).
  *
- * This overrides Chakra UI's colorPalette prop with our Golden Ratio
- * color system values. Chakra's default colorPalettes are not supported.
+ * Overrides Chakra UI's `variant` prop; Chakra's own variants are not supported.
+ * There is no separate colour axis any more: the role *is* the colour.
  *
- * - `primary`: Blue - main brand actions, CTAs
- * - `secondary`: Violet - accent actions, highlights
- * - `danger`: Rose - destructive actions, errors
- * - `success`: Green - positive actions, confirmations
- * - `warning`: Gold - caution actions, alerts
- * - `neutral`: Gray - low-emphasis, tertiary actions
+ * - `primary`: BAZE black fill — the one main action of a screen
+ * - `action`: black "run" button whose icon is coral (`action.iconOnSolid`)
+ * - `secondary`: outlined surface button — cancel, alternative actions
+ * - `subtle`: quiet warm-wash fill — low-emphasis actions (the default)
+ * - `ghost`: no fill, no border — toolbars, inline actions
+ * - `danger`: red fill — a confirmed destructive action
+ *
+ * For a *secondary* destructive action (a "delete" link-ish button next to a
+ * form) keep `secondary`/`ghost`/`subtle` and add `isDestructive`.
+ */
+export type ButtonVariant =
+  | 'primary'
+  | 'action'
+  | 'secondary'
+  | 'subtle'
+  | 'ghost'
+  | 'danger';
+
+/**
+ * @deprecated 5.0 removed the colour axis — `colorPalette` is no longer a
+ * Button prop. Pick a `variant` role instead (and `isDestructive` for a
+ * danger-coloured secondary/ghost/subtle button). Kept only so existing type
+ * imports get a deprecation instead of a hard error; will be removed in 6.0.
+ *
+ * Old → new: `primary|neutral` + `solid` → `primary`; `danger` + `solid` →
+ * `danger`; any + `outline` → `secondary`; any + `soft` → `subtle`;
+ * `danger` + `outline|ghost|soft` → same role + `isDestructive`.
  */
 export type ButtonColorPalette =
   | 'primary'
@@ -30,33 +51,23 @@ export type ButtonColorPalette =
   | 'neutral';
 
 /**
- * Button variant - defines the visual appearance/fill style.
- *
- * This overrides Chakra UI's variant prop with our custom variants.
- * Chakra's default variants (solid, outline, ghost, link) are replaced
- * with our Golden Ratio-based styling system.
- *
- * - `solid`: Filled background with contrasting text (most prominent)
- * - `soft`: Light tinted background with darker text (subtle)
- * - `outline`: Transparent with colored border (medium emphasis)
- * - `ghost`: Transparent with no border (lowest emphasis)
+ * @deprecated 4.x variant names. Still accepted at runtime (mapped, with a
+ * development warning) but no longer part of `ButtonVariant`.
  */
-export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
+export type LegacyButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
 
 /**
- * Button props with two-dimensional variant system.
- *
- * Combines `colorPalette` (what color) with `variant` (how it looks)
- * for flexible, consistent button styling.
+ * Button props.
  *
- * @note Overrides Chakra UI's `variant` and `colorPalette` props.
- *       Chakra's default values are not supported.
+ * @note Overrides Chakra UI's `variant`; Chakra's `colorPalette` /
+ *       `colorScheme` are not accepted.
  *
  * @example
  * ```tsx
- * <Button colorPalette="primary" variant="solid">Submit</Button>
- * <Button colorPalette="danger" variant="soft">Delete</Button>
- * <Button colorPalette="secondary" variant="outline">Cancel</Button>
+ * <Button variant="primary">저장</Button>
+ * <Button variant="secondary">취소</Button>
+ * <Button variant="ghost" isDestructive>삭제</Button>
+ * <Button variant="danger">영구 삭제</Button>
  * ```
  */
 export type ButtonOwnProps = Omit<
@@ -64,17 +75,19 @@ export type ButtonOwnProps = Omit<
   'variant' | 'colorScheme' | 'colorPalette' | 'leftIcon' | 'rightIcon' | 'as'
 > & {
   /**
-   * The color palette of the button (semantic color family).
-   * Overrides Chakra UI's colorPalette prop (Chakra v3).
-   * @default 'primary'
-   */
-  colorPalette?: ButtonColorPalette;
-  /**
-   * The visual variant of the button (fill style).
+   * The role of the button (fill, border and text colour together).
    * Overrides Chakra UI's variant prop.
-   * @default 'solid'
+   * @default 'subtle'
    */
   variant?: ButtonVariant;
+  /**
+   * Danger-coloured text (`danger.fg`) for a destructive action that does not
+   * deserve a red fill. Applies to `secondary`, `ghost` and `subtle`; the
+   * border and fill stay the variant's own. Ignored on `primary`, `action` and
+   * `danger` (use `variant="danger"` for a filled destructive button).
+   * @default false
+   */
+  isDestructive?: boolean;
   /**
    * Raises the button 1px on hover and puts a shadow under it, so it reads as
    * lifting toward the pointer. Pressing sets it back down, under the existing

package/src/components/Button/Button.variants.test.tsx

@@ -0,0 +1,149 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { system } from '../../theme';
+import { IconButton } from '../IconButton';
+import { getIconButtonStyles } from '../IconButton/IconButton.styles';
+import { Button } from './Button';
+import {
+  __resetLegacyButtonWarnings,
+  resolveLegacyButtonVariant,
+} from './Button.legacy';
+import { buttonVariantStyles, getButtonStyles } from './Button.styles';
+
+/**
+ * 5.0 API: one `variant` role, `isDestructive` for danger text, and runtime
+ * mapping of the removed 4.x `colorPalette × variant` pair.
+ */
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('Button variants (5.0)', () => {
+  it("defaults to 'subtle'", () => {
+    wrap(<Button>A</Button>);
+    expect(screen.getByRole('button').dataset.variant).toBe('subtle');
+  });
+
+  it.each(Object.keys(buttonVariantStyles))('renders %s', (variant) => {
+    wrap(<Button variant={variant as never}>A</Button>);
+    expect(screen.getByRole('button').dataset.variant).toBe(variant);
+  });
+
+  it('reads no raw palette scales', () => {
+    const raw = JSON.stringify(buttonVariantStyles);
+    expect(raw).not.toMatch(/"(blue|violet|rose|gold|green|gray)\.\d/);
+  });
+
+  it('isDestructive recolours text on secondary/ghost/subtle only', () => {
+    expect(getButtonStyles('secondary', true).color).toBe('danger.fg');
+    expect(getButtonStyles('ghost', true).color).toBe('danger.fg');
+    expect(getButtonStyles('subtle', true).color).toBe('danger.fg');
+    // border stays the variant's own
+    expect(getButtonStyles('secondary', true).borderColor).toBe(
+      'border.default'
+    );
+    expect(getButtonStyles('primary', true).color).toBe('fg.onPrimary');
+    expect(getButtonStyles('danger', true).color).toBe('danger.onSolid');
+  });
+
+  it('disabled is a fixed colour pair, not opacity', () => {
+    expect(buttonVariantStyles.primary._disabled).toMatchObject({
+      bg: 'disabled.bg',
+      color: 'disabled.fg',
+      opacity: 1,
+    });
+    expect(buttonVariantStyles.ghost._disabled).toMatchObject({
+      bg: 'transparent',
+      color: 'disabled.fg',
+    });
+  });
+});
+
+describe('legacy 4.x props', () => {
+  let warn: ReturnType<typeof vi.spyOn>;
+  beforeEach(() => {
+    __resetLegacyButtonWarnings();
+    warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+  afterEach(() => warn.mockRestore());
+
+  it('danger/outline renders as secondary + destructive, and warns once', () => {
+    const legacy = { colorPalette: 'danger', variant: 'outline' } as any;
+    wrap(
+      <>
+        <Button {...legacy}>삭제</Button>
+        <Button {...legacy}>삭제</Button>
+      </>
+    );
+    const [first] = screen.getAllByRole('button');
+    expect(first.dataset.variant).toBe('secondary');
+    expect(first.dataset.destructive).toBe('true');
+    // never forwarded to the DOM / Chakra
+    expect(first.getAttribute('colorpalette')).toBeNull();
+    expect(warn).toHaveBeenCalledTimes(1);
+  });
+
+  it('maps the codemod table', () => {
+    const m = (p: unknown, v: unknown, k: 'button' | 'icon' = 'button') => {
+      const r = resolveLegacyButtonVariant(k, p, v);
+      return `${r.variant}${r.isDestructive ? '+d' : ''}`;
+    };
+    expect(m(undefined, 'solid')).toBe('primary');
+    expect(m('neutral', 'solid')).toBe('primary');
+    expect(m('danger', 'solid')).toBe('danger');
+    expect(m('neutral', 'outline')).toBe('secondary');
+    expect(m('primary', 'ghost')).toBe('ghost');
+    expect(m('danger', 'ghost')).toBe('ghost+d');
+    expect(m('danger', 'soft')).toBe('subtle+d');
+    expect(m('primary', 'soft')).toBe('subtle');
+    expect(m('primary', undefined)).toBe('subtle');
+    expect(
+      resolveLegacyButtonVariant('button', 'warning', 'solid').needsHuman
+    ).toBe(true);
+    expect(m('danger', 'soft', 'icon')).toBe('ghost+d');
+    expect(m('neutral', 'ghost', 'icon')).toBe('ghost');
+    expect(m(undefined, undefined, 'icon')).toBe('ghost');
+  });
+
+  it('a new variant with no colorPalette does not warn', () => {
+    wrap(<Button variant="primary">A</Button>);
+    expect(warn).not.toHaveBeenCalled();
+  });
+});
+
+describe('IconButton variants (5.0)', () => {
+  it("defaults to 'ghost' with fg.icon", () => {
+    wrap(
+      <IconButton aria-label="x">
+        <svg />
+      </IconButton>
+    );
+    expect(screen.getByRole('button').dataset.variant).toBe('ghost');
+    expect(getIconButtonStyles().color).toBe('fg.icon');
+  });
+
+  it('action is the coral send button', () => {
+    wrap(
+      <IconButton aria-label="send" variant="action">
+        <svg />
+      </IconButton>
+    );
+    expect(screen.getByRole('button').dataset.variant).toBe('action');
+    expect(getIconButtonStyles('action').bgColor).toBe('send.bg');
+    expect(getIconButtonStyles('action').color).toBe('send.fg');
+  });
+
+  it('legacy danger colorPalette maps to ghost + destructive', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    wrap(
+      <IconButton aria-label="x" {...({ colorPalette: 'danger' } as any)}>
+        <svg />
+      </IconButton>
+    );
+    const button = screen.getByRole('button');
+    expect(button.dataset.variant).toBe('ghost');
+    expect(button.dataset.destructive).toBe('true');
+    warn.mockRestore();
+  });
+});

package/src/components/Button/index.tsx

@@ -3,6 +3,7 @@ export {
   buttonColorPalettes,
   buttonColorPaletteStyles,
   buttonVariants,
+  buttonVariantStyles,
   getButtonStyles,
 } from './Button.styles';
 export type {
@@ -10,4 +11,5 @@ export type {
   ButtonOwnProps,
   ButtonProps,
   ButtonVariant,
+  LegacyButtonVariant,
 } from './Button.types';

package/src/components/Card/Card.styles.ts

@@ -19,27 +19,20 @@ export const clickableStyles = {
 };
 
 /**
- * The wash card: one tier off the page with a hairline. For a block that
+ * The wash card: a neutral `bg.muted` ground, borderless. For a block that
  * summarises or concludes (an AI summary, a total after a purchase, the
- * invitation being accepted). It is what `gradient` used to paint with a
- * 180deg wash and a brand-tinted border; the gradient read as decoration and
- * the tinted border claimed brand for a surface that is not an action.
- *
- * The tier is `bg.subtle` in light but `bg.muted` in dark: `bg.subtle` sits
- * one grayDark step above `bg.surface` there, too close to read as a different
- * surface, and `border.subtle` resolves to the same step, so the hairline would
- * vanish. `border.default` keeps the edge in both modes.
+ * invitation being accepted) — the wash alone separates it from the page, so
+ * it does not need a hairline on top of it. (Not the sand `secondary.surface`:
+ * that tint reads peach as a background and is accent-only.)
  */
 const washStyles = {
-  bg: { base: 'bg.subtle', _dark: 'bg.muted' },
-  borderColor: 'border.default',
+  bg: 'bg.muted',
+  borderColor: 'transparent',
 };
 
 export const variantStyles = {
   default: {},
   wash: washStyles,
-  /** @deprecated Renders as `wash`; use `variant="wash"`. */
-  gradient: washStyles,
   // Soft resting elevation — a gentle shadow does the separating, so the border
   // can soften to `border.subtle` (which alone would be too faint, especially in
   // dark mode). Use for standalone content cards that should read as raised

package/src/components/Card/Card.tsx

@@ -19,12 +19,7 @@ const CardImpl = forwardRef<HTMLDivElement, CardOwnProps>(
         color="fg.default"
         boxShadow="none"
         border="1px solid"
-        // border.default (gray.300 / gray.1100 _dark) instead of border.subtle:
-        // subtle's _dark (gray.1300 #1E2433) is ~invisible on bg.surface in dark,
-        // so cards blended into the canvas. default gives the card a discernible
-        // edge in both modes. The `wash` variant softens it back to
-        // border.subtle because its `bg.subtle` fill already separates it.
-        borderColor="border.default"
+        borderColor="border.subtle"
         borderRadius="lg"
         // Was `transitionDuration="normal"` — a Chakra v2 token absent from v3.
         // It fell through as a literal, `transition-duration: normal` is invalid

package/src/components/Card/Card.types.ts

@@ -4,11 +4,7 @@ import { CardRootProps as ChakraCardRootProps } from '@chakra-ui/react';
 // Relative, NOT `@/types/*` — see `src/types/polymorphic.ts`.
 import type { PolymorphicProps } from '../../types/polymorphic';
 
-/**
- * `gradient` is a deprecated alias of `wash` and renders identically; it stays
- * so consumers on the alpha line keep compiling while they migrate.
- */
-export type CardVariant = 'default' | 'wash' | 'gradient' | 'elevated';
+export type CardVariant = 'default' | 'wash' | 'elevated';
 
 export type CardOwnProps = Omit<ChakraCardRootProps, 'as'> & {
   clickable?: boolean;

package/src/components/Checkbox/CheckboxControl.tsx

@@ -4,6 +4,7 @@ import {
   CheckboxControlProps,
 } from '@chakra-ui/react';
 
+import { disabledControl } from '@/utils/disabledControl';
 import { focusRing } from '@/utils/focusRing';
 
 import { checkmarkDraw } from './Checkbox.styles';
@@ -13,20 +14,26 @@ export const CheckboxControl = forwardRef<HTMLDivElement, CheckboxControlProps>(
     <ChakraCheckbox.Control
       ref={ref}
       borderRadius="xs"
-      // The unchecked box is border-only, so it needs a clearly visible outline.
-      // gray.500 in light; gray.800 in dark (border.strong's gray.900 was only
-      // 2.80:1 on canvas — gray.800 reaches the 3:1 non-text-contrast bar).
-      borderColor={{ base: 'gray.500', _dark: 'gray.800' }}
+      // The unchecked box is border-only, so it needs a clearly visible outline;
+      // border.control is the 3:1 non-text-contrast token built for exactly this
+      // (input/checkbox/radio borders), on the same raised surface as Input.
+      bg="bg.surface"
+      borderColor="border.control"
       borderWidth="1px"
-      _checked={{ bgColor: 'primary.main', borderColor: 'primary.main' }}
-      _indeterminate={{ bgColor: 'primary.main', borderColor: 'primary.main' }}
+      _checked={{
+        bgColor: 'primary.main',
+        borderColor: 'primary.main',
+        color: 'fg.onPrimary',
+      }}
+      _indeterminate={{
+        bgColor: 'primary.main',
+        borderColor: 'primary.main',
+        color: 'fg.onPrimary',
+      }}
       cursor="pointer"
       _disabled={{
+        ...disabledControl,
         cursor: 'not-allowed',
-        // Flip the disabled fill (was a flat light gray.300 that stayed bright
-        // on dark, unlike Input/Textarea whose disabled fills flip).
-        bgColor: { base: 'gray.300', _dark: 'gray.1200' },
-        borderColor: 'border.subtle',
       }}
       // The box fills first, then the tick is stroked on 60ms later. Firing them
       // together reads as one indistinct flash; the gap makes it two beats —