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

package/src/components/Table/Table.stories.tsx

@@ -1,7 +1,10 @@
+import { useState } from 'react';
 import { Flex } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 
+import { Button } from '../Button';
+import { IoChevronDownOutline } from '../Icon';
+import { IconButton } from '../IconButton';
 import {
   ExpandingTr,
   Table,
@@ -12,9 +15,6 @@ import {
   Thead,
   Tr,
 } from '.';
-import { Button } from '../Button';
-import { IoChevronDownOutline } from '../Icon';
-import { IconButton } from '../IconButton';
 
 const meta = {
   title: 'Components/Table',
@@ -161,7 +161,7 @@ export const InteractiveRows: Story = {
 
 /**
  * Per-row state tints via `<Tr state="...">`, backed by the mode-aware
- * semantic tokens `bg.selected`, `bg.invalid.subtle` and `bg.highlighted`.
+ * semantic tokens `primary.selected`, `bg.invalid.subtle` and `bg.highlighted`.
  */
 export const RowStates: Story = {
   render: (args) => (
@@ -213,9 +213,7 @@ export const StickyHeader: Story = {
           {Array.from({ length: 12 }, (_, i) => (
             <Tr key={i}>
               {columns.map((column) => (
-                <Td key={column.key}>
-                  {data[i % data.length][column.key]}
-                </Td>
+                <Td key={column.key}>{data[i % data.length][column.key]}</Td>
               ))}
             </Tr>
           ))}
@@ -257,9 +255,8 @@ export const ExpandedContent: Story = {
                 <Td w={2}>
                   <IconButton
                     aria-label="Expand"
-                    {...({icon: <IoChevronDownOutline />} as any)}
+                    {...({ icon: <IoChevronDownOutline /> } as any)}
                     onClick={() => setIsExpanded((e) => !e)}
-                    colorScheme="neutral"
                     variant="ghost"
                   />
                 </Td>
@@ -570,8 +567,12 @@ export const StickyOffsetsTrackWidthChanges: Story = {
                   {adminColumns.map((column, index) => (
                     <Td
                       key={column.key}
-                      isSticky={LEFT_STICKY.has(index) || index === RIGHT_STICKY}
-                      stickyDirection={index === RIGHT_STICKY ? 'right' : 'left'}
+                      isSticky={
+                        LEFT_STICKY.has(index) || index === RIGHT_STICKY
+                      }
+                      stickyDirection={
+                        index === RIGHT_STICKY ? 'right' : 'left'
+                      }
                       stickyIndex={index === RIGHT_STICKY ? 0 : index}
                     >
                       {item[column.key]}
@@ -598,9 +599,18 @@ const PAGES: { name: string; status: string }[][] = [
     { name: '박지훈', status: '거절됨' },
   ],
   [
-    { name: '남궁민수 — 아주 아주 길어서 컬럼을 넓히는 이름', status: '승인됨' },
-    { name: '황보지훈 — 아주 아주 길어서 컬럼을 넓히는 이름', status: '승인됨' },
-    { name: '독고영희 — 아주 아주 길어서 컬럼을 넓히는 이름', status: '검토중' },
+    {
+      name: '남궁민수 — 아주 아주 길어서 컬럼을 넓히는 이름',
+      status: '승인됨',
+    },
+    {
+      name: '황보지훈 — 아주 아주 길어서 컬럼을 넓히는 이름',
+      status: '승인됨',
+    },
+    {
+      name: '독고영희 — 아주 아주 길어서 컬럼을 넓히는 이름',
+      status: '검토중',
+    },
   ],
   [
     { name: '최민', status: '거절됨' },
@@ -628,15 +638,17 @@ export const StickyOffsetsSurvivePagination: Story = {
       <Flex direction="column" gap={3} align="start">
         <Flex gap={2} align="center">
           <Button
-            variant="outline"
+            variant="secondary"
             disabled={page === 0}
             onClick={() => setPage((p) => Math.max(0, p - 1))}
           >
             이전
           </Button>
-          <span>{page + 1} / {PAGES.length} 페이지</span>
+          <span>
+            {page + 1} / {PAGES.length} 페이지
+          </span>
           <Button
-            variant="outline"
+            variant="secondary"
             disabled={page === PAGES.length - 1}
             onClick={() => setPage((p) => Math.min(PAGES.length - 1, p + 1))}
           >
@@ -665,8 +677,12 @@ export const StickyOffsetsSurvivePagination: Story = {
                   {adminColumns.map((column, index) => (
                     <Td
                       key={column.key}
-                      isSticky={LEFT_STICKY.has(index) || index === RIGHT_STICKY}
-                      stickyDirection={index === RIGHT_STICKY ? 'right' : 'left'}
+                      isSticky={
+                        LEFT_STICKY.has(index) || index === RIGHT_STICKY
+                      }
+                      stickyDirection={
+                        index === RIGHT_STICKY ? 'right' : 'left'
+                      }
                       stickyIndex={index === RIGHT_STICKY ? 0 : index}
                     >
                       {item[column.key]}

package/src/components/Table/Table.types.ts

@@ -17,7 +17,7 @@ export type TableRowState = 'selected' | 'invalid' | 'highlighted';
 export interface TableRowProps extends Table.RowProps {
   /**
    * Row background tint, driven by the table recipe's semantic tokens
-   * (`bg.selected` / `bg.invalid.subtle` / `bg.highlighted`) so it renders
+   * (`primary.selected` / `bg.invalid.subtle` / `bg.highlighted`) so it renders
    * correctly in both light and dark mode.
    */
   state?: TableRowState;

package/src/components/Tabs/Tab/Tab.styles.ts

@@ -28,19 +28,17 @@ export const verticalStyles = {
  * and **13.62:1** on the dark raised surface — so no surface it can land on is
  * marginal, and the mode-aware two-arm ramp is no longer needed.
  *
- * The indicator moves with the label. It was left on `primary.main` because a
- * 2px underline is a GRAPHIC judged at 3:1, which the old value cleared — but
- * that argument only justified LEAVING it, and an azure bar under an ink label
- * is the half-migrated look.
- *
- * `primary.main` itself is not re-pegged, and should not be: it is a solid fill
- * under white labels (`Checkbox`, `Switch`, `Banner`) where white on
- * `blue.200` measures 2.60:1. Form controls keep the brand hue on purpose —
- * a checkbox is a VALUE, not a place.
+ * The indicator moves with the label, EXCEPT on 5.0's BAZE palette: the
+ * indicator is a 2px underline — a GRAPHIC judged at 3:1, not text at 4.5:1 —
+ * so it reads the brand accent `primary.main` directly (black in light, the
+ * inverted cream fill in dark), matching the house gallery spec. The label
+ * stays on `fg.emphasized` (= `fg.default`): it is still a PLACE, not a
+ * value, and `primary.main` in dark mode is a solid-fill colour tuned for a
+ * button face under `fg.onPrimary`, not for text on the page.
  */
 export const TAB_RAMP = {
   label: 'fg.emphasized',
-  indicator: 'fg.emphasized',
+  indicator: 'primary.main',
 } as const;
 
 export const horizontalSelectedStyles = {

package/src/components/Tabs/Tab/Tab.tsx

@@ -26,6 +26,7 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>(
           color="fg.muted"
           py={3}
           border="none"
+          _hover={{ bg: 'primary.wash', color: 'fg.default' }}
           _selected={horizontalSelectedStyles}
           {...props}
           css={mergeCss(

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { Button, CloseButton, Heading, Text } from '@chakra-ui/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Tab } from '@/components/Tabs/Tab/Tab';
 import { TabList } from '@/components/Tabs/TabList';
@@ -76,23 +76,23 @@ export const CustomStyles: Story = {
     defaultValue: 'profile',
     children: (
       <>
-        <TabList borderBottom="2px solid" borderColor="gray.200" gap={1}>
+        <TabList borderBottom="2px solid" borderColor="border.subtle" gap={1}>
           <Tab
             value="profile"
             bg="transparent"
-            color="gray.600"
+            color="fg.muted"
             fontWeight="medium"
             px={6}
             py={3}
             borderRadius="md"
             _selected={{
-              bg: 'blue.500',
-              color: 'white',
+              bg: 'category.blue.fg',
+              color: 'fg.onPrimary',
               fontWeight: 'bold',
             }}
             _hover={{
-              bg: 'blue.50',
-              color: 'blue.700',
+              bg: 'category.blue.surface',
+              color: 'category.blue.fg',
             }}
           >
             Profile
@@ -100,19 +100,19 @@ export const CustomStyles: Story = {
           <Tab
             value="settings"
             bg="transparent"
-            color="gray.600"
+            color="fg.muted"
             fontWeight="medium"
             px={6}
             py={3}
             borderRadius="md"
             _selected={{
-              bg: 'green.500',
-              color: 'white',
+              bg: 'category.green.fg',
+              color: 'fg.onPrimary',
               fontWeight: 'bold',
             }}
             _hover={{
-              bg: 'green.50',
-              color: 'green.700',
+              bg: 'category.green.surface',
+              color: 'category.green.fg',
             }}
           >
             Settings
@@ -120,51 +120,63 @@ export const CustomStyles: Story = {
           <Tab
             value="notifications"
             bg="transparent"
-            color="gray.600"
+            color="fg.muted"
             fontWeight="medium"
             px={6}
             py={3}
             borderRadius="md"
             _selected={{
-              bg: 'purple.500',
-              color: 'white',
+              bg: 'category.purple.fg',
+              color: 'fg.onPrimary',
               fontWeight: 'bold',
             }}
             _hover={{
-              bg: 'purple.50',
-              color: 'purple.700',
+              bg: 'category.purple.surface',
+              color: 'category.purple.fg',
             }}
           >
             Notifications
           </Tab>
         </TabList>
-        <TabPanel value="profile" bg="blue.50" p={6} borderRadius="md" mt={4}>
-          <Heading size="md" mb={3} color="blue.900">
+        <TabPanel
+          value="profile"
+          bg="category.blue.surface"
+          p={6}
+          borderRadius="md"
+          mt={4}
+        >
+          <Heading size="md" mb={3} color="category.blue.fg">
             Profile Settings
           </Heading>
-          <Text color="gray.700">
+          <Text color="fg.muted">
             Manage your profile information and preferences.
           </Text>
         </TabPanel>
-        <TabPanel value="settings" bg="green.50" p={6} borderRadius="md" mt={4}>
-          <Heading size="md" mb={3} color="green.900">
+        <TabPanel
+          value="settings"
+          bg="category.green.surface"
+          p={6}
+          borderRadius="md"
+          mt={4}
+        >
+          <Heading size="md" mb={3} color="category.green.fg">
             General Settings
           </Heading>
-          <Text color="gray.700">
+          <Text color="fg.muted">
             Configure your account settings and preferences.
           </Text>
         </TabPanel>
         <TabPanel
           value="notifications"
-          bg="purple.50"
+          bg="category.purple.surface"
           p={6}
           borderRadius="md"
           mt={4}
         >
-          <Heading size="md" mb={3} color="purple.900">
+          <Heading size="md" mb={3} color="category.purple.fg">
             Notification Preferences
           </Heading>
-          <Text color="gray.700">
+          <Text color="fg.muted">
             Manage how and when you receive notifications.
           </Text>
         </TabPanel>

package/src/components/Tag/Tag.legacy.test.tsx

@@ -0,0 +1,179 @@
+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 { Chip } from '../Chip';
+import { Tag } from './Tag';
+import { __resetLegacyTagWarnings, mapLegacyTagProps } from './Tag.styles';
+
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+const asAny = (props: Record<string, unknown>) => props as never;
+
+describe('mapLegacyTagProps (4.x → 5.0 table)', () => {
+  it.each([
+    // palette, variant, tone, selected, needsHuman
+    ['primary', 'soft', 'neutral', undefined, false],
+    ['secondary', 'soft', 'neutral', undefined, false],
+    ['neutral', 'soft', 'neutral', undefined, false],
+    ['primary', 'solid', 'neutral', true, false],
+    ['secondary', 'solid', 'neutral', true, false],
+    ['neutral', 'solid', 'neutral', true, false],
+    ['primary', 'outline', 'neutral', undefined, false],
+    ['secondary', 'outline', 'neutral', undefined, false],
+    ['neutral', 'outline', 'neutral', undefined, false],
+    ['danger', 'soft', 'danger', undefined, false],
+    ['success', 'soft', 'success', undefined, false],
+    ['warning', 'soft', 'warning', undefined, false],
+    ['danger', 'solid', 'danger', undefined, true],
+    ['success', 'solid', 'success', undefined, true],
+    ['warning', 'solid', 'warning', undefined, true],
+    ['danger', 'outline', 'neutral', undefined, true],
+    ['success', 'outline', 'neutral', undefined, true],
+    ['warning', 'outline', 'neutral', undefined, true],
+    // 4.x Tag defaults: neutral / soft
+    [undefined, undefined, 'neutral', undefined, false],
+    [undefined, 'solid', 'neutral', true, false],
+    ['danger', undefined, 'danger', undefined, false],
+    // unknown values
+    ['purple', 'soft', 'neutral', undefined, true],
+    ['primary', 'surface', 'neutral', undefined, true],
+  ] as const)(
+    '%s × %s → tone %s, selected %s, needsHuman %s',
+    (palette, variant, tone, selected, needsHuman) => {
+      const r = mapLegacyTagProps(palette, variant);
+      expect(r.tone).toBe(tone);
+      expect(r.selected).toBe(selected);
+      expect(r.needsHuman).toBe(needsHuman);
+    }
+  );
+
+  it('neutral·secondary solid is distinct from soft (4.x selected toggles)', () => {
+    // `<Chip colorScheme={on ? 'primary' : 'neutral'} variant="solid">` and
+    // `<Chip variant={on ? 'solid' : 'soft'}>` both have to keep two looks.
+    for (const palette of ['neutral', 'secondary'] as const) {
+      expect(mapLegacyTagProps(palette, 'solid')).not.toEqual(
+        mapLegacyTagProps(palette, 'soft')
+      );
+    }
+  });
+});
+
+describe('legacy Tag / Chip rendering and warnings', () => {
+  let warn: ReturnType<typeof vi.spyOn>;
+  beforeEach(() => {
+    __resetLegacyTagWarnings();
+    warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('a solid neutral Chip renders selected, a soft one does not', () => {
+    wrap(
+      <>
+        <Chip colorScheme="neutral" variant="solid" data-testid="on">
+          on
+        </Chip>
+        <Chip colorScheme="neutral" variant="soft" data-testid="off">
+          off
+        </Chip>
+      </>
+    );
+    expect(screen.getByTestId('on').hasAttribute('data-selected')).toBe(true);
+    expect(screen.getByTestId('off').hasAttribute('data-selected')).toBe(false);
+  });
+
+  it('a mapped selected is a look only, not a toggle', () => {
+    wrap(
+      <Chip as="button" colorScheme="primary" variant="solid">
+        x
+      </Chip>
+    );
+    const button = screen.getByRole('button');
+    expect(button.hasAttribute('data-selected')).toBe(true);
+    expect(button.getAttribute('aria-pressed')).toBeNull();
+  });
+
+  it('warns once per (palette, variant), naming the combination', () => {
+    wrap(
+      <>
+        <Tag {...asAny({ colorPalette: 'danger', variant: 'solid' })}>a</Tag>
+        <Tag {...asAny({ colorPalette: 'danger', variant: 'solid' })}>b</Tag>
+        <Tag {...asAny({ colorPalette: 'success', variant: 'soft' })}>c</Tag>
+      </>
+    );
+    expect(warn).toHaveBeenCalledTimes(2);
+    const [first, second] = warn.mock.calls.map((c) => String(c[0]));
+    expect(first).toContain('colorPalette="danger" variant="solid"');
+    expect(first).toContain('<Tag tone="danger">');
+    expect(first).toContain('by hand');
+    expect(second).toContain('colorPalette="success" variant="soft"');
+    expect(second).not.toContain('by hand');
+  });
+
+  it('Chip warns per colorScheme × variant with its own name', () => {
+    wrap(
+      <>
+        <Chip>a</Chip>
+        <Chip>b</Chip>
+        <Chip colorScheme="neutral" variant="solid">
+          c
+        </Chip>
+      </>
+    );
+    expect(warn).toHaveBeenCalledTimes(2);
+    const [first, second] = warn.mock.calls.map((c) => String(c[0]));
+    expect(first).toContain('<Chip> is deprecated');
+    expect(first).toContain('colorScheme="primary" variant="soft"');
+    expect(second).toContain('colorScheme="neutral" variant="solid"');
+    expect(second).toContain('<Tag selected>');
+  });
+
+  it('does not forward the internal Chip flag to the DOM', () => {
+    wrap(<Chip data-testid="c">c</Chip>);
+    expect(screen.getByTestId('c').outerHTML.toLowerCase()).not.toContain(
+      'legacycomponent'
+    );
+  });
+});
+
+describe('disabled interactive Tag without a native disabled', () => {
+  it('a disabled link tag is aria-disabled and out of the tab order', () => {
+    wrap(
+      <Tag as="a" href="/x" disabled>
+        Docs
+      </Tag>
+    );
+    const link = screen.getByText('Docs').closest('a')!;
+    expect(link.getAttribute('aria-disabled')).toBe('true');
+    expect(link.getAttribute('tabindex')).toBe('-1');
+  });
+
+  it('a disabled clickable span tag is aria-disabled and not tabbable', () => {
+    wrap(
+      <Tag disabled onClick={() => {}} tabIndex={0} data-testid="t">
+        x
+      </Tag>
+    );
+    const tag = screen.getByTestId('t');
+    expect(tag.getAttribute('aria-disabled')).toBe('true');
+    expect(tag.getAttribute('tabindex')).toBe('-1');
+  });
+
+  it('an enabled link tag and a plain disabled tag are untouched', () => {
+    wrap(
+      <>
+        <Tag as="a" href="/x" data-testid="a">
+          a
+        </Tag>
+        <Tag disabled data-testid="p">
+          p
+        </Tag>
+      </>
+    );
+    expect(screen.getByTestId('a').getAttribute('aria-disabled')).toBeNull();
+    expect(screen.getByTestId('a').getAttribute('tabindex')).toBeNull();
+    expect(screen.getByTestId('p').getAttribute('aria-disabled')).toBeNull();
+  });
+});