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

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Box, Flex, VStack, HStack, Text } from '@chakra-ui/react';
-import { FaUniversity } from '../Icon';
-import { IconButton, iconButtonColorPalettes, iconButtonVariants } from '.';
-import { IconButtonColorPalette, IconButtonVariant } from './IconButton.types';
+import { Grid, HStack, Text, VStack } from '@chakra-ui/react';
+import { FaUniversity, SendIcon, TrashIcon } from '../Icon';
+import { IconButton, iconButtonVariants } from '.';
+import { IconButtonVariant } from './IconButton.types';
 
 const meta = {
   title: 'Components/IconButton',
@@ -13,15 +13,14 @@ const meta = {
     'aria-label': 'University',
   },
   argTypes: {
-    colorPalette: {
-      control: 'select',
-      options: iconButtonColorPalettes,
-      description: 'Semantic color family (overrides Chakra colorPalette)',
-    },
     variant: {
       control: 'select',
       options: iconButtonVariants,
-      description: 'Visual appearance (overrides Chakra variant)',
+      description: 'Role. Default `ghost`.',
+    },
+    isDestructive: {
+      control: 'boolean',
+      description: 'Danger icon on ghost / secondary',
     },
     children: {
       table: { disable: true },
@@ -35,8 +34,7 @@ type Story = StoryObj<typeof IconButton>;
 
 export const Basic: Story = {
   args: {
-    colorPalette: 'primary',
-    variant: 'solid',
+    variant: 'ghost',
   },
 };
 
@@ -46,231 +44,80 @@ export const Basic: Story = {
 export const Sizes: Story = {
   render: (args) => (
     <HStack gap={4} align="center">
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">xs</Text>
-        <IconButton {...args} size="xs" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">sm</Text>
-        <IconButton {...args} size="sm" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">md</Text>
-        <IconButton {...args} size="md" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">lg</Text>
-        <IconButton {...args} size="lg" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">xl</Text>
-        <IconButton {...args} size="xl" colorPalette="primary" variant="solid" />
-      </VStack>
-      <VStack gap={1}>
-        <Text fontSize="sm" color="gray.600">2xl</Text>
-        <IconButton {...args} size="2xl" colorPalette="primary" variant="solid" />
-      </VStack>
-    </HStack>
-  ),
-};
-
-/**
- * Complete icon button matrix showing all colorPalette × variant combinations.
- */
-export const AllCombinations: Story = {
-  render: (args) => (
-    <VStack gap={6} align="stretch">
-      {/* Header row */}
-      <HStack gap={4}>
-        <Box w="100px" />
-        {iconButtonVariants.map((variant) => (
-          <Box key={variant} w="80px" textAlign="center">
-            <Text fontWeight="bold" color="gray.600">
-              {variant}
-            </Text>
-          </Box>
-        ))}
-      </HStack>
-
-      {/* Color scheme rows */}
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <HStack key={colorPalette} gap={4}>
-          <Box w="100px">
-            <Text fontWeight="bold" color="gray.600">
-              {colorPalette}
-            </Text>
-          </Box>
-          {iconButtonVariants.map((variant) => (
-            <Box key={`${colorPalette}-${variant}`} w="80px" textAlign="center">
-              <IconButton
-                {...args}
-                colorPalette={colorPalette}
-                variant={variant}
-              />
-            </Box>
-          ))}
-        </HStack>
-      ))}
-    </VStack>
-  ),
-};
-
-/**
- * Primary color scheme in all variants.
- */
-export const Primary: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="primary" variant={variant} />
+      {(['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const).map((size) => (
+        <VStack key={size} gap={1}>
+          <Text fontSize="sm" color="fg.muted">
+            {size}
+          </Text>
+          <IconButton {...args} size={size} variant="primary" />
         </VStack>
       ))}
-    </Flex>
-  ),
-};
-
-/**
- * Secondary color scheme in all variants.
- */
-export const Secondary: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="secondary" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
-  ),
-};
-
-/**
- * Danger color scheme in all variants.
- */
-export const Danger: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="danger" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
-  ),
-};
-
-/**
- * Success color scheme in all variants.
- */
-export const Success: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="success" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
+    </HStack>
   ),
 };
 
-/**
- * Warning color scheme in all variants.
- */
-export const Warning: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="warning" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
-  ),
+const NOTES: Record<IconButtonVariant, string> = {
+  ghost: '기본 — fg.icon, hover 시 워시',
+  secondary: '테두리 있는 ghost',
+  primary: 'BAZE 블랙 면',
+  danger: '빨간 면',
+  action: '보내기 — 코랄 면 + 블랙 화살표',
 };
 
 /**
- * Neutral color scheme in all variants.
+ * Every role, enabled and disabled.
  */
-export const Neutral: Story = {
+export const Variants: Story = {
   render: (args) => (
-    <Flex gap={4} wrap="wrap">
+    <Grid templateColumns="max-content max-content max-content 1fr" gap={4}>
       {iconButtonVariants.map((variant) => (
-        <VStack key={variant} gap={1}>
-          <Text color="gray.600">{variant}</Text>
-          <IconButton {...args} colorPalette="neutral" variant={variant} />
-        </VStack>
-      ))}
-    </Flex>
-  ),
-};
-
-/**
- * Solid variant across all color schemes.
- */
-export const SolidVariant: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <VStack key={colorPalette} gap={1}>
-          <Text color="gray.600">{colorPalette}</Text>
-          <IconButton {...args} colorPalette={colorPalette} variant="solid" />
-        </VStack>
-      ))}
-    </Flex>
-  ),
-};
-
-/**
- * Soft variant across all color schemes.
- */
-export const SoftVariant: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <VStack key={colorPalette} gap={1}>
-          <Text color="gray.600">{colorPalette}</Text>
-          <IconButton {...args} colorPalette={colorPalette} variant="soft" />
-        </VStack>
+        <HStack key={variant} display="contents">
+          <Text fontSize="sm" fontWeight="semibold" color="fg.default">
+            {variant}
+          </Text>
+          <IconButton {...args} variant={variant} />
+          <IconButton {...args} variant={variant} disabled />
+          <Text fontSize="sm" color="fg.muted">
+            {NOTES[variant]}
+          </Text>
+        </HStack>
       ))}
-    </Flex>
+    </Grid>
   ),
 };
 
 /**
- * Outline variant across all color schemes.
+ * `isDestructive`: a delete icon in a row. Ghost and secondary only.
  */
-export const OutlineVariant: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <VStack key={colorPalette} gap={1}>
-          <Text color="gray.600">{colorPalette}</Text>
-          <IconButton {...args} colorPalette={colorPalette} variant="outline" />
-        </VStack>
-      ))}
-    </Flex>
+export const Destructive: Story = {
+  render: () => (
+    <HStack gap={4}>
+      <IconButton aria-label="삭제" isDestructive>
+        <TrashIcon />
+      </IconButton>
+      <IconButton aria-label="삭제" variant="secondary" isDestructive>
+        <TrashIcon />
+      </IconButton>
+      <IconButton aria-label="삭제" isDestructive disabled>
+        <TrashIcon />
+      </IconButton>
+    </HStack>
   ),
 };
 
 /**
- * Ghost variant across all color schemes.
+ * `action` is the coral SEND button of a chat composer (`send.*` tokens).
+ * Disabled (nothing typed yet) is the fixed disabled pair.
  */
-export const GhostVariant: Story = {
-  render: (args) => (
-    <Flex gap={4} wrap="wrap">
-      {iconButtonColorPalettes.map((colorPalette) => (
-        <VStack key={colorPalette} gap={1}>
-          <Text color="gray.600">{colorPalette}</Text>
-          <IconButton {...args} colorPalette={colorPalette} variant="ghost" />
-        </VStack>
-      ))}
-    </Flex>
+export const ActionSend: Story = {
+  render: () => (
+    <HStack gap={4}>
+      <IconButton aria-label="보내기" variant="action">
+        <SendIcon />
+      </IconButton>
+      <IconButton aria-label="보내기" variant="action" disabled>
+        <SendIcon />
+      </IconButton>
+    </HStack>
   ),
 };

package/src/components/IconButton/IconButton.styles.ts

@@ -1,42 +1,119 @@
 import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 
+import { disabledControl, disabledText } from '@/utils/disabledControl';
+
+import { resolveLegacyButtonVariant } from '../Button/Button.legacy';
 import {
   buttonColorPalettes,
-  buttonColorPaletteStyles,
-  buttonVariants,
+  buttonVariantStyles,
 } from '../Button/Button.styles';
-import { ButtonColorPalette, ButtonVariant } from '../Button/Button.types';
-
-export {
-  buttonColorPalettes as iconButtonColorPalettes,
-  buttonColorPalettes as iconButtonColorSchemes, // Deprecated
-  buttonVariants as iconButtonVariants,
-};
+import {
+  ButtonColorPalette,
+  LegacyButtonVariant,
+} from '../Button/Button.types';
+import { IconButtonVariant } from './IconButton.types';
 
 type StyleProps = Partial<ChakraButtonProps>;
 
+const PRESSED = '0.97';
+
 /**
- * Override certain Button styles that don't apply to IconButton.
+ * IconButton styles per role (prototype gallery `.ib`, `.ib.secondary`,
+ * `.ib.primary`, `.send`).
+ *
+ * The filled roles reuse Button's so the two never drift; the icon-only roles
+ * differ from Button's ghost/secondary in one way — the resting glyph is
+ * `fg.icon` (3:1 non-text) and darkens to `fg.default` on hover.
  */
-export const iconButtonColorPaletteStyles: Record<
-  ButtonColorPalette,
-  Record<ButtonVariant, StyleProps>
-> = {
-  ...buttonColorPaletteStyles,
-  neutral: {
-    ...buttonColorPaletteStyles.neutral,
-    ghost: {
-      ...buttonColorPaletteStyles.neutral.ghost,
-      color: 'fg.subtle',
-    },
+export const iconButtonVariantStyles: Record<IconButtonVariant, StyleProps> = {
+  ghost: {
+    borderColor: 'transparent',
+    bgColor: 'transparent',
+    color: 'fg.icon',
+    _hover: { bgColor: 'primary.wash', color: 'fg.default' },
+    _active: { bgColor: 'primary.washActive', scale: PRESSED },
+    _disabled: { ...disabledText },
+  },
+  secondary: {
+    borderColor: 'border.default',
+    bgColor: 'transparent',
+    color: 'fg.icon',
+    _hover: { bgColor: 'primary.wash', color: 'fg.default' },
+    _active: { bgColor: 'primary.washActive', scale: PRESSED },
+    _disabled: { ...disabledControl },
+  },
+  primary: buttonVariantStyles.primary,
+  danger: buttonVariantStyles.danger,
+  /** The coral SEND button. */
+  action: {
+    borderColor: 'transparent',
+    bgColor: 'send.bg',
+    color: 'send.fg',
+    _hover: { bgColor: 'send.bgHover' },
+    _active: { bgColor: 'send.bgActive', scale: PRESSED },
+    _disabled: { ...disabledControl },
   },
 };
 
-export {
-  iconButtonColorPaletteStyles as iconButtonColorSchemeStyles, // Deprecated
-};
+export const iconButtonVariants: IconButtonVariant[] = [
+  'ghost',
+  'secondary',
+  'primary',
+  'danger',
+  'action',
+];
+
+/** `isDestructive` recolours the glyph on these only. */
+const destructiveCapable: readonly IconButtonVariant[] = ['ghost', 'secondary'];
 
 export const getIconButtonStyles = (
-  colorPalette: ButtonColorPalette = 'neutral',
-  variant: ButtonVariant = 'ghost'
-): StyleProps => iconButtonColorPaletteStyles[colorPalette][variant];
+  variant: IconButtonVariant = 'ghost',
+  isDestructive = false
+): StyleProps => {
+  const base =
+    iconButtonVariantStyles[variant] ?? iconButtonVariantStyles.ghost;
+  if (!isDestructive || !destructiveCapable.includes(variant)) return base;
+  return {
+    ...base,
+    color: 'danger.fg',
+    _hover: { ...(base._hover as object), color: 'danger.fg' },
+  };
+};
+
+const legacyVariants: LegacyButtonVariant[] = [
+  'solid',
+  'soft',
+  'outline',
+  'ghost',
+];
+
+/**
+ * @deprecated 4.x grid, derived from `iconButtonVariantStyles` through the
+ * IconButton column of the codemod table. Use `iconButtonVariantStyles`.
+ */
+export const iconButtonColorPaletteStyles = Object.fromEntries(
+  buttonColorPalettes.map((palette) => [
+    palette,
+    Object.fromEntries(
+      legacyVariants.map((variant) => {
+        const mapped = resolveLegacyButtonVariant('icon', palette, variant);
+        return [
+          variant,
+          getIconButtonStyles(
+            mapped.variant as IconButtonVariant,
+            mapped.isDestructive
+          ),
+        ];
+      })
+    ),
+  ])
+) as Record<ButtonColorPalette, Record<LegacyButtonVariant, StyleProps>>;
+
+export {
+  /** @deprecated 5.0 removed `colorPalette`. */
+  buttonColorPalettes as iconButtonColorPalettes,
+  /** @deprecated 5.0 removed `colorPalette`. */
+  buttonColorPalettes as iconButtonColorSchemes,
+  /** @deprecated Use iconButtonVariantStyles. */
+  iconButtonColorPaletteStyles as iconButtonColorSchemeStyles,
+};

package/src/components/IconButton/IconButton.tsx

@@ -4,34 +4,59 @@ import { IconButton as ChakraIconButton } from '@chakra-ui/react';
 import { focusRing } from '@/utils/focusRing';
 
 import { polymorphic } from '../../types/polymorphic';
+import {
+  isLegacyButtonProps,
+  resolveLegacyButtonVariant,
+  warnLegacyButtonProps,
+} from '../Button/Button.legacy';
 import { buttonTransition } from '../Button/Button.styles';
 import { getIconButtonStyles } from './IconButton.styles';
-import { IconButtonOwnProps, IconButtonProps } from './IconButton.types';
+import {
+  IconButtonOwnProps,
+  IconButtonProps,
+  IconButtonVariant,
+} from './IconButton.types';
 
 /**
- * IconButton component with two-dimensional variant system.
- *
- * Uses the same `colorPalette` and `variant` system as Button
- * for consistent styling across the design system.
+ * IconButton — one `variant` role per button (5.0 BAZE palette).
  *
  * @example
  * ```tsx
- * <IconButton colorPalette="primary" variant="soft"><Icon /></IconButton>
- * <IconButton colorPalette="danger" variant="solid"><Icon /></IconButton>
- * <IconButton colorPalette="neutral" variant="ghost"><Icon /></IconButton>
+ * <IconButton aria-label="닫기"><XIcon /></IconButton> // ghost
+ * <IconButton aria-label="삭제" isDestructive><TrashIcon /></IconButton>
+ * <IconButton aria-label="추가" variant="primary"><PlusIcon /></IconButton>
+ * <IconButton aria-label="보내기" variant="action"><SendIcon /></IconButton>
  * ```
  */
 const IconButtonImpl = forwardRef(
   (
     {
-      colorPalette = 'neutral',
-      variant = 'ghost',
+      variant: variantProp,
+      isDestructive: isDestructiveProp = false,
       children,
-      ...rest
+      ...restWithLegacy
     }: IconButtonProps,
     ref?: ForwardedRef<HTMLButtonElement>
   ) => {
-    const styles = getIconButtonStyles(colorPalette, variant);
+    // 4.x `colorPalette` / old variant names from untyped callers — mapped,
+    // never forwarded to Chakra. See `Button.legacy.ts`.
+    const { colorPalette: legacyPalette, ...rest } =
+      restWithLegacy as typeof restWithLegacy & { colorPalette?: unknown };
+
+    let variant: IconButtonVariant = variantProp ?? 'ghost';
+    let isDestructive = isDestructiveProp;
+    if (isLegacyButtonProps('icon', legacyPalette, variantProp)) {
+      const resolved = resolveLegacyButtonVariant(
+        'icon',
+        legacyPalette,
+        variantProp
+      );
+      warnLegacyButtonProps('IconButton', legacyPalette, variantProp, resolved);
+      variant = resolved.variant as IconButtonVariant;
+      isDestructive = isDestructive || resolved.isDestructive;
+    }
+
+    const styles = getIconButtonStyles(variant, isDestructive);
 
     return (
       <ChakraIconButton
@@ -46,6 +71,8 @@ const IconButtonImpl = forwardRef(
         scale="1"
         transition={buttonTransition}
         animationStyle="composite"
+        data-variant={variant}
+        data-destructive={isDestructive || undefined}
         {...rest}
       >
         {children}

package/src/components/IconButton/IconButton.types.ts

@@ -7,8 +7,9 @@ import type { PolymorphicProps } from '../../types/polymorphic';
 export type { ButtonVariant } from '../Button/Button.types';
 
 /**
- * IconButton color scheme - reuses Button color schemes.
- * @see ButtonColorScheme
+ * @deprecated 5.0 removed the colour axis — `colorPalette` is no longer an
+ * IconButton prop. Use a `variant` role (and `isDestructive`). Kept only so
+ * existing type imports get a deprecation instead of a hard error.
  */
 export type IconButtonColorPalette =
   | 'primary'
@@ -19,23 +20,32 @@ export type IconButtonColorPalette =
   | 'neutral';
 
 /**
- * IconButton variant - reuses Button variants.
- * @see ButtonVariant
+ * IconButton variant (5.0 BAZE palette).
+ *
+ * - `ghost` (default): icon in `fg.icon`, warm wash on hover
+ * - `secondary`: same, with a `border.default` outline
+ * - `primary`: BAZE black fill
+ * - `danger`: red fill
+ * - `action`: the coral SEND button (`send.*`) — chat composers
  */
-export type IconButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
+export type IconButtonVariant =
+  | 'ghost'
+  | 'secondary'
+  | 'primary'
+  | 'danger'
+  | 'action';
 
 /**
- * IconButton props with two-dimensional variant system.
- *
- * Uses the same `colorPalette` and `variant` system as Button
- * for consistent styling across the design system.
+ * IconButton props.
  *
- * @note Overrides Chakra UI's `variant` and `colorPalette` props.
+ * @note Overrides Chakra UI's `variant`; Chakra's `colorPalette` /
+ *       `colorScheme` are not accepted.
  *
  * @example
  * ```tsx
- * <IconButton colorPalette="primary" variant="solid"><Icon /></IconButton>
- * <IconButton colorPalette="danger" variant="soft"><Icon /></IconButton>
+ * <IconButton aria-label="닫기"><XIcon /></IconButton>
+ * <IconButton aria-label="삭제" isDestructive><TrashIcon /></IconButton>
+ * <IconButton aria-label="보내기" variant="action"><ArrowUpIcon /></IconButton>
  * ```
  */
 export type IconButtonOwnProps = Omit<
@@ -43,17 +53,17 @@ export type IconButtonOwnProps = Omit<
   'variant' | 'colorPalette' | 'colorScheme' | 'icon' | 'as'
 > & {
   /**
-   * The color scheme of the icon button (semantic color family).
-   * Overrides Chakra UI's colorPalette prop.
-   * @default 'primary'
-   */
-  colorPalette?: IconButtonColorPalette;
-  /**
-   * The visual variant of the icon button (fill style).
+   * The role of the icon button.
    * Overrides Chakra UI's variant prop.
-   * @default 'solid'
+   * @default 'ghost'
    */
   variant?: IconButtonVariant;
+  /**
+   * Danger-coloured icon (`danger.fg`) for `ghost` / `secondary` — a delete
+   * icon in a row. Ignored on filled variants.
+   * @default false
+   */
+  isDestructive?: boolean;
 };
 
 /**

package/src/components/IconButton/index.tsx

@@ -4,6 +4,7 @@ export {
   iconButtonColorPalettes,
   iconButtonColorPaletteStyles,
   iconButtonVariants,
+  iconButtonVariantStyles,
 } from './IconButton.styles';
 export type {
   IconButtonColorPalette,

package/src/components/InlineCode/InlineCode.tsx

@@ -7,7 +7,7 @@ export const InlineCode = ({ children, ...rest }: ChakraCodeProps) => {
   return (
     <ChakraCode
       bg="bg.subtle"
-      color="primary.dark"
+      color="fg.default"
       // `xs` (4px) rather than `sm` (6px): on the small, now-shorter chip a 6px
       // radius reads a little bubbly; the tighter corner is crisper inline.
       borderRadius="xs"
@@ -17,13 +17,13 @@ export const InlineCode = ({ children, ...rest }: ChakraCodeProps) => {
       // family/weight/line-height — only one size down, so this changes size
       // only (a mono override passed by callers still wins, as with `p`).
       textStyle="subtext"
-      // bg.subtle (gray.50) matches the bg.sunken page wash, so on a sunken
-      // page the chip fill vanishes. The chip is too small for a fill bump to
+      // bg.subtle matches the bg.sunken page wash, so on a sunken page the
+      // chip fill vanishes. The chip is too small for a fill bump to
       // register, so (like SegmentedControl) it gets an outline instead — a
-      // border.default ring, kept lighter than border.strong so it doesn't read
-      // as a heavy box inline in running text. Box-shadow so inline flow and
+      // border.subtle ring, the lightest border role, so it doesn't read as a
+      // heavy box inline in running text. Box-shadow so inline flow and
       // sizing are untouched.
-      boxShadow="0 0 0 1px var(--chakra-colors-border-default)"
+      boxShadow="0 0 0 1px var(--chakra-colors-border-subtle)"
       {...rest}
     >
       {children}