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

package/eslint/rules/no-deprecated-tokens.test.ts

@@ -0,0 +1,130 @@
+/**
+ * RuleTester suite for logician-ui/no-deprecated-tokens.
+ *
+ * Run: npx vitest run --config codemods/vitest.config.ts
+ * (that config includes eslint/**\/*.test.ts — Node-only, like the codemods).
+ */
+import { createRequire } from 'module';
+import { afterAll, describe, it } from 'vitest';
+
+const require = createRequire(import.meta.url);
+const { RuleTester } = require('eslint');
+const rule = require('./no-deprecated-tokens');
+
+RuleTester.describe = describe;
+RuleTester.it = it;
+RuleTester.itOnly = it.only;
+RuleTester.afterAll = afterAll;
+
+const tester = new RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    ecmaFeatures: { jsx: true },
+  },
+});
+
+const deprecated = (name: string, replacement: string) => ({
+  messageId: 'deprecated',
+  data: { name, replacement },
+});
+
+tester.run('no-deprecated-tokens', rule, {
+  valid: [
+    // 5.0 names
+    "const a = 'primary.wash';",
+    "const a = 'var(--chakra-colors-primary-wash-active)';",
+    "const a = '{colors.success.solid}';",
+    // Neighbours that only look like a deprecated name
+    "const a = 'primary.lighter2';",
+    "const a = 'slate.8000';",
+    "const a = 'foo.primary.light';",
+    "const a = 'theme.colors.primary.light';",
+    "const a = 'x colors.primary.light';",
+    "const a = 'var(--chakra-colors-slate-3000)';",
+    "const a = 'fg.default';",
+    // Type-level literals are not style usages
+    "type T = 'slate.800' | 'primary.light';",
+    'type T = `primary.lighter`;',
+    // removedPrimitives: false turns primitive warnings off
+    { code: "const a = 'blue.500';", options: [{ removedPrimitives: false }] },
+  ],
+  invalid: [
+    {
+      code: "const a = 'primary.lightest';",
+      errors: [deprecated('primary.lightest', 'primary.wash')],
+    },
+    {
+      code: '<Box bg="slate.800" />',
+      errors: [deprecated('slate.800', 'neutral.9')],
+    },
+    // Dashed CSS variable: matched kebab-case, replacement suggested kebab-case
+    {
+      code: "const a = 'var(--chakra-colors-primary-lighter)';",
+      errors: [
+        deprecated(
+          '--chakra-colors-primary-lighter',
+          'var(--chakra-colors-primary-wash-active)'
+        ),
+      ],
+    },
+    {
+      code: "const a = 'var(--chakra-colors-primary-fill-strong)';",
+      errors: [
+        deprecated(
+          '--chakra-colors-primary-fill-strong',
+          'var(--chakra-colors-primary-hover)'
+        ),
+      ],
+    },
+    // Chakra token references with a colors. prefix keep the prefix
+    {
+      code: "const a = '{colors.success.main}';",
+      errors: [deprecated('colors.success.main', 'colors.success.solid')],
+    },
+    {
+      code: "const a = 'color-mix(in oklab, {colors.warning.fill} 70%, black)';",
+      errors: [deprecated('colors.warning.fill', 'colors.warning.solid')],
+    },
+    {
+      code: "const a = token('colors.danger.main');",
+      errors: [deprecated('colors.danger.main', 'colors.danger.solid')],
+    },
+    {
+      code: "const a = '{colors.grayDark.200}';",
+      errors: [{ messageId: 'primitive' }],
+    },
+    {
+      code: "const a = 'var(--chakra-colors-gray-dark-200)';",
+      errors: [{ messageId: 'primitive' }],
+    },
+    {
+      code: "const a = '{colors.gray.300}';",
+      errors: [
+        {
+          messageId: 'primitive',
+          data: {
+            name: 'colors.gray.300',
+            hint: "Use 'colors.neutral.5'.",
+          },
+        },
+      ],
+    },
+    // Template literal quasis
+    {
+      code: 'const a = `1px solid var(--chakra-colors-slate-300) ${x} {colors.danger.main}`;',
+      errors: [
+        deprecated(
+          '--chakra-colors-slate-300',
+          'var(--chakra-colors-neutral-5)'
+        ),
+        deprecated('colors.danger.main', 'colors.danger.solid'),
+      ],
+    },
+    {
+      code: "const a = 'blue.500';",
+      errors: [{ messageId: 'primitive' }],
+    },
+  ],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "4.0.0",
+  "version": "5.0.0-alpha.0",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,11 +20,16 @@
       "types": "./dist/styles.d.ts",
       "import": "./dist/styles.mjs",
       "require": "./dist/styles.js"
-    }
+    },
+    "./eslint": "./eslint/index.js",
+    "./codemods/5.0/*": "./codemods/5.0/*"
   },
   "files": [
     "dist",
     "src",
+    "eslint",
+    "codemods",
+    "MIGRATION-5.0.md",
     "README.md",
     "USAGE.md"
   ],
@@ -37,10 +42,12 @@
     "build": "rollup -c rollup.config.mjs",
     "build:watch": "rollup -c rollup.config.mjs --watch",
     "prepublishOnly": "yarn build",
-    "lint": "eslint src --ext .ts,.tsx && yarn run check-exports",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "lint": "eslint --rulesdir eslint/rules src --ext .ts,.tsx && yarn run check-exports",
+    "lint:fix": "eslint --rulesdir eslint/rules src --ext .ts,.tsx --fix",
     "type-check": "tsc --noEmit",
-    "test": "vitest run",
+    "test": "vitest run && vitest run --config codemods/vitest.config.ts && node scripts/palette/generate.mjs --check",
+    "test:codemods": "vitest run --config codemods/vitest.config.ts",
+    "palette:check": "node scripts/palette/generate.mjs --check",
     "test:watch": "vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -104,6 +111,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "@types/jscodeshift": "^17.3.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/svgo": "^3.0.0",
@@ -122,6 +130,8 @@
     "eslint-plugin-unused-imports": "^4.2.0",
     "formik": "^2.4.9",
     "framer-motion": "^10.0.0",
+    "jscodeshift": "^17.3.0",
+    "jsdom": "^25.0.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "react": "^18.0.0",
@@ -134,10 +144,9 @@
     "svgo": "^4.0.0",
     "tsc-alias": "^1.8.0",
     "typescript": "^5.2.0",
-    "jsdom": "^25.0.0",
     "vite": "^5.0.0",
-    "vitest": "^3.2.4",
     "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^3.2.4",
     "yup": "^1.7.1"
   },
   "keywords": [

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { Box, Flex, Text } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Accordion, AccordionButton, AccordionItem, AccordionPanel } from '.';
 
@@ -172,26 +172,30 @@ export const WithCustomContent: Story = {
   },
   render: (args) => {
     return (
-      <Accordion {...args} borderColor="red.500">
+      <Accordion {...args} borderColor="danger.border">
         <AccordionItem value="errors">
-          <AccordionButton bg="red.50" p={3} borderBottomColor="red.500">
+          <AccordionButton
+            bg="danger.bg"
+            p={3}
+            borderBottomColor="danger.border"
+          >
             <Flex align="center" gap={2}>
               <Box
                 as="span"
                 fontSize="xl"
-                color="red.500"
+                color="danger.fg"
                 aria-label="Error icon"
               >
                 ⚠️
               </Box>
-              <Text fontWeight="bold" color="gray.800">
+              <Text fontWeight="bold" color="fg.default">
                 Failed Upload Rows (3 errors)
               </Text>
             </Flex>
           </AccordionButton>
           <AccordionPanel p={4}>
-            <Box bg="gray.50" p={4} borderRadius="md">
-              <Text fontSize="sm" color="gray.700" mb={2}>
+            <Box bg="bg.subtle" p={4} borderRadius="md">
+              <Text fontSize="sm" color="fg.muted" mb={2}>
                 This heavy content is lazy-loaded only when expanded
               </Text>
               <Box as="ul" pl={4}>
@@ -203,24 +207,28 @@ export const WithCustomContent: Story = {
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="warnings">
-          <AccordionButton bg="yellow.50" p={3} borderBottomColor="yellow.500">
+          <AccordionButton
+            bg="warning.bg"
+            p={3}
+            borderBottomColor="warning.border"
+          >
             <Flex align="center" gap={2}>
               <Box
                 as="span"
                 fontSize="xl"
-                color="yellow.600"
+                color="warning.fg"
                 aria-label="Warning icon"
               >
                 ⚡
               </Box>
-              <Text fontWeight="bold" color="gray.800">
+              <Text fontWeight="bold" color="fg.default">
                 Warning Messages (2 warnings)
               </Text>
             </Flex>
           </AccordionButton>
           <AccordionPanel p={4}>
-            <Box bg="gray.50" p={4} borderRadius="md">
-              <Text fontSize="sm" color="gray.700">
+            <Box bg="bg.subtle" p={4} borderRadius="md">
+              <Text fontSize="sm" color="fg.muted">
                 Content is mounted when expanded and unmounted when collapsed
                 (check React DevTools)
               </Text>

package/src/components/Appear/Appear.stories.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { Badge } from '../Badge';
 import { Button } from '../Button';
 import { Card } from '../Card';
-import { Chip } from '../Chip';
+import { Tag } from '../Tag';
 import { Collapsible } from '../Collapsible';
 import { Menu } from '../Menu';
 import { Subtext, Text } from '../Typography';
@@ -45,9 +45,7 @@ export const Default: Story = {
           ].map((v) => (
             <Stack key={v.label} gap={2} align="center" w="110px">
               <Appear key={`${v.label}-${run}`} {...v.props}>
-                <Chip colorScheme="primary" variant="soft">
-                  {v.label}
-                </Chip>
+                <Tag>{v.label}</Tag>
               </Appear>
               <Subtext fontFamily="mono" fontSize="2xs" color="fg.muted" mb={0}>
                 {v.label === '페이드'
@@ -114,7 +112,7 @@ export const WhichOne: Story = {
           </Button>
           <Button
             size="sm"
-            variant="outline"
+            variant="secondary"
             onClick={() => setOpen((v) => !v)}
           >
             {open ? '닫기' : '열기'} — presence만 가능
@@ -137,7 +135,7 @@ export const WhichOne: Story = {
             </Subtext>
             <Menu>
               <Menu.Trigger asChild>
-                <Button size="xs" variant="outline">
+                <Button size="xs" variant="secondary">
                   메뉴 열기
                 </Button>
               </Menu.Trigger>
@@ -171,14 +169,9 @@ export const WhichOne: Story = {
             </Subtext>
             <Stack key={run} gap="2px">
               {['첫째 줄', '둘째 줄', '셋째 줄', '넷째 줄'].map((t, i) => (
-                <Chip
-                  key={t}
-                  colorScheme="neutral"
-                  variant="outline"
-                  {...staggerProps(i)}
-                >
+                <Tag key={t} {...staggerProps(i)}>
                   {t}
-                </Chip>
+                </Tag>
               ))}
             </Stack>
           </Stack>

package/src/components/Avatar/Avatar.hue.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+
+import { SYSTEM_HUE_NAMES } from '@/theme/colors';
+
+import { avatarFallbackColors, hueForName } from './Avatar';
+
+describe('hueForName', () => {
+  it('is stable for the same name', () => {
+    expect(hueForName('Jaeho Shin')).toBe(hueForName('Jaeho Shin'));
+    expect(hueForName('정빈')).toBe(hueForName('정빈'));
+  });
+
+  it('only ever returns a declared system hue', () => {
+    for (const name of ['A', 'Sean Park', '김민재', 'z'.repeat(50)]) {
+      expect(SYSTEM_HUE_NAMES).toContain(hueForName(name));
+    }
+  });
+
+  it('has no hue for an empty/undefined name', () => {
+    expect(hueForName(undefined)).toBeUndefined();
+    expect(hueForName('')).toBeUndefined();
+  });
+
+  it('a nameless avatar falls back to the neutral pair, not red', () => {
+    // 4.x/early 5.0 picked SYSTEM_HUE_NAMES[0] — red — for every placeholder
+    // avatar, which reads as an error state.
+    for (const name of [undefined, '']) {
+      expect(avatarFallbackColors(name)).toEqual({
+        bg: 'bg.muted',
+        color: 'secondary.fgStrong',
+      });
+    }
+  });
+
+  it('a named avatar and an explicit colorHue still get their hue', () => {
+    const hue = hueForName('Sean Park');
+    expect(avatarFallbackColors('Sean Park')).toEqual({
+      bg: `category.${hue}.surface`,
+      color: `category.${hue}.fg`,
+    });
+    expect(avatarFallbackColors(undefined, 'blue')).toEqual({
+      bg: 'category.blue.surface',
+      color: 'category.blue.fg',
+    });
+  });
+
+  it('spreads different names across more than one hue', () => {
+    const names = [
+      'Jaeho Shin',
+      'Jeongbin Kim',
+      'Sean Park',
+      'Kunyoung Park',
+      'Namkyung Jo',
+      'Taehoon Kim',
+      'Minjae Kim',
+      'Hyungjoon Yang',
+      'Hyunwoo Kim',
+      'Joonpyo Lee',
+      'Seungwook Kim',
+      'WonJoon Shin',
+    ];
+    const hues = new Set(names.map(hueForName));
+    // Not a cryptographic hash — just enough spread that the wheel is
+    // visibly in use rather than every name landing on one hue.
+    expect(hues.size).toBeGreaterThan(1);
+  });
+});

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,8 @@
 import { Box, Flex, VStack, HStack, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { SYSTEM_HUE_NAMES } from '@/theme/colors';
+
 import { Avatar } from '.';
 
 const meta = {
@@ -50,13 +52,13 @@ export const Sizes: Story = {
       <VStack gap={8} align="stretch">
         {/* Sizes with name fallback */}
         <Box>
-          <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+          <Text fontSize="lg" fontWeight="bold" mb={4} color="fg.default">
             Sizes with Name Fallback
           </Text>
           <Flex gap={4} wrap="wrap" align="center">
             {sizes.map((size) => (
               <VStack key={size} gap={2} align="center">
-                <Text fontSize="sm" color="gray.600" fontWeight="medium">
+                <Text fontSize="sm" color="fg.muted" fontWeight="medium">
                   {size}
                 </Text>
                 <Avatar name="John Doe" size={size} />
@@ -67,13 +69,13 @@ export const Sizes: Story = {
 
         {/* Sizes with image */}
         <Box>
-          <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+          <Text fontSize="lg" fontWeight="bold" mb={4} color="fg.default">
             Sizes with Image
           </Text>
           <Flex gap={4} wrap="wrap" align="center">
             {sizes.map((size) => (
               <VStack key={size} gap={2} align="center">
-                <Text fontSize="sm" color="gray.600" fontWeight="medium">
+                <Text fontSize="sm" color="fg.muted" fontWeight="medium">
                   {size}
                 </Text>
                 <Avatar
@@ -88,7 +90,7 @@ export const Sizes: Story = {
 
         {/* Sizes comparison */}
         <Box>
-          <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+          <Text fontSize="lg" fontWeight="bold" mb={4} color="fg.default">
             Size Comparison
           </Text>
           <HStack gap={4} align="flex-end">
@@ -99,7 +101,7 @@ export const Sizes: Story = {
                   src="https://i.pravatar.cc/150?img=2"
                   size={size}
                 />
-                <Text fontSize="xs" color="gray.600">
+                <Text fontSize="xs" color="fg.muted">
                   {size}
                 </Text>
               </VStack>
@@ -120,7 +122,7 @@ export const WithImage: Story = {
     <VStack gap={8} align="stretch">
       {/* Regular image */}
       <Box>
-        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="fg.default">
           Regular Image
         </Text>
         <HStack gap={4}>
@@ -143,7 +145,7 @@ export const WithImage: Story = {
       </Box>
       {/* Custom background override */}
       <Box>
-        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="fg.default">
           Custom Background (bg prop)
         </Text>
         <HStack gap={4}>
@@ -154,7 +156,7 @@ export const WithImage: Story = {
               size="lg"
               bg="white"
             />
-            <Text fontSize="xs" color="gray.600">
+            <Text fontSize="xs" color="fg.muted">
               bg="white"
             </Text>
           </VStack>
@@ -163,10 +165,10 @@ export const WithImage: Story = {
               name="React"
               src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg"
               size="lg"
-              bg="blue.100"
+              bg="category.blue.surface"
             />
-            <Text fontSize="xs" color="gray.600">
-              bg="blue.100"
+            <Text fontSize="xs" color="fg.muted">
+              bg="category.blue.surface"
             </Text>
           </VStack>
         </HStack>
@@ -202,7 +204,7 @@ export const Group: Story = {
     <VStack gap={8} align="stretch">
       {/* Small group */}
       <Box>
-        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="fg.default">
           Small Group (md size)
         </Text>
         <HStack gap={-2}>
@@ -214,7 +216,7 @@ export const Group: Story = {
 
       {/* Large group with size variation */}
       <Box>
-        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="fg.default">
           Large Group (sm size)
         </Text>
         <HStack gap={-2}>
@@ -244,7 +246,7 @@ export const Group: Story = {
 
       {/* Extra large group */}
       <Box>
-        <Text fontSize="lg" fontWeight="bold" mb={4} color="gray.700">
+        <Text fontSize="lg" fontWeight="bold" mb={4} color="fg.default">
           Extra Large Group (lg size)
         </Text>
         <HStack gap={-3}>
@@ -276,31 +278,31 @@ export const Group: Story = {
 export const Initials: Story = {
   render: () => (
     <VStack gap={4} align="stretch">
-      <Text fontSize="lg" fontWeight="bold" mb={2} color="gray.700">
+      <Text fontSize="lg" fontWeight="bold" mb={2} color="fg.default">
         Different Name Formats
       </Text>
       <Flex gap={4} wrap="wrap">
         <VStack gap={1}>
           <Avatar name="John Doe" size="lg" />
-          <Text fontSize="sm" color="gray.600">
+          <Text fontSize="sm" color="fg.muted">
             John Doe
           </Text>
         </VStack>
         <VStack gap={1}>
           <Avatar name="Jane" size="lg" />
-          <Text fontSize="sm" color="gray.600">
+          <Text fontSize="sm" color="fg.muted">
             Jane
           </Text>
         </VStack>
         <VStack gap={1}>
           <Avatar name="A B C" size="lg" />
-          <Text fontSize="sm" color="gray.600">
+          <Text fontSize="sm" color="fg.muted">
             A B C
           </Text>
         </VStack>
         <VStack gap={1}>
           <Avatar name="김철수" size="lg" />
-          <Text fontSize="sm" color="gray.600">
+          <Text fontSize="sm" color="fg.muted">
             김철수
           </Text>
         </VStack>
@@ -328,7 +330,7 @@ export const SizeMatrix: Story = {
           <Box w="120px" />
           {sizes.map((size) => (
             <Box key={size} w="80px" textAlign="center">
-              <Text fontWeight="bold" color="gray.600">
+              <Text fontWeight="bold" color="fg.muted">
                 {size}
               </Text>
             </Box>
@@ -339,7 +341,7 @@ export const SizeMatrix: Story = {
         {users.map((user, idx) => (
           <HStack key={idx} gap={4} align="center">
             <Box w="120px">
-              <Text fontWeight="medium" color="gray.600">
+              <Text fontWeight="medium" color="fg.muted">
                 {user.name}
               </Text>
             </Box>
@@ -354,7 +356,7 @@ export const SizeMatrix: Story = {
         {/* Fallback row */}
         <HStack gap={4} align="center">
           <Box w="120px">
-            <Text fontWeight="medium" color="gray.600">
+            <Text fontWeight="medium" color="fg.muted">
               Fallback
             </Text>
           </Box>
@@ -368,3 +370,57 @@ export const SizeMatrix: Story = {
     );
   },
 };
+
+/**
+ * No image, no `src` that loads — the fallback initials tint by a stable hash
+ * of `name` over the 12 `category.*` hues, so the same person reads as the
+ * same colour everywhere and different people spread across the wheel
+ * instead of all landing on one colour.
+ */
+export const FallbackHues: Story = {
+  render: () => {
+    const names = [
+      'Jaeho Shin',
+      'Jeongbin Kim',
+      'Sean Park',
+      'Kunyoung Park',
+      'Namkyung Jo',
+      'Taehoon Kim',
+      'Minjae Kim',
+      'Hyungjoon Yang',
+      'Hyunwoo Kim',
+      'Joonpyo Lee',
+      'Seungwook Kim',
+      'WonJoon Shin',
+    ];
+
+    return (
+      <Flex gap={4} wrap="wrap">
+        {names.map((name) => (
+          <VStack key={name} gap={2} align="center">
+            <Avatar name={name} size="lg" />
+            <Text fontSize="xs" color="fg.muted">
+              {name}
+            </Text>
+          </VStack>
+        ))}
+      </Flex>
+    );
+  },
+};
+
+/** `colorHue` overrides the hashed hue when a caller needs a specific one. */
+export const ExplicitHue: Story = {
+  render: () => (
+    <Flex gap={4} wrap="wrap">
+      {SYSTEM_HUE_NAMES.map((hue) => (
+        <VStack key={hue} gap={2} align="center">
+          <Avatar name="Same Name" colorHue={hue} size="lg" />
+          <Text fontSize="xs" color="fg.muted">
+            {hue}
+          </Text>
+        </VStack>
+      ))}
+    </Flex>
+  ),
+};