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

package/src/components/LogicianProvider/LogicianProvider.stories.tsx

@@ -29,10 +29,10 @@ export const Default: Story = {
         {/* Font showcase */}
         <Box
           p={4}
-          bg="gray.50"
+          bg="bg.subtle"
           borderRadius="md"
           borderWidth="1px"
-          borderColor="gray.200"
+          borderColor="border.subtle"
           w="100%"
         >
           <VStack align="start" gap={2}>
@@ -51,23 +51,13 @@ export const Default: Story = {
 
         {/* Border radius showcase */}
         <Box>
-          <Button
-            colorPalette="primary"
-            variant="soft"
-            mr={4}
-            borderRadius="md"
-          >
+          <Button variant="subtle" mr={4} borderRadius="md">
             Medium Radius (8px)
           </Button>
-          <Button
-            colorPalette="secondary"
-            variant="soft"
-            mr={4}
-            borderRadius="lg"
-          >
+          <Button variant="subtle" mr={4} borderRadius="lg">
             Large Radius (12px)
           </Button>
-          <Button colorPalette="primary" variant="outline" borderRadius="xl">
+          <Button variant="secondary" borderRadius="xl">
             XL Radius (32px)
           </Button>
         </Box>
@@ -80,7 +70,7 @@ export const Default: Story = {
               Container xs (480px max)
             </Text>
           </Container>
-          <Container maxW="sm" bg="secondary.extralight" p={4} borderRadius="md">
+          <Container maxW="sm" bg="bg.muted" p={4} borderRadius="md">
             <Text fontSize="sm" color="secondary.dark">
               Container sm (640px max)
             </Text>
@@ -120,7 +110,7 @@ export const Default: Story = {
               sm: 'warning.extralight',
               md: 'success.extralight',
               lg: 'primary.extralight',
-              xl: 'secondary.extralight',
+              xl: 'bg.muted',
             }}
             borderColor={{
               base: 'danger.main',
@@ -202,10 +192,10 @@ export const WithCustomConfig: Story = {
           {/* Info box */}
           <Box
             p={4}
-            bg="gray.50"
+            bg="bg.subtle"
             borderRadius="md"
             borderWidth="1px"
-            borderColor="gray.200"
+            borderColor="border.subtle"
             w="100%"
           >
             <VStack align="start" gap={2}>
@@ -225,23 +215,13 @@ export const WithCustomConfig: Story = {
 
           {/* Border radius showcase */}
           <Box>
-            <Button
-              colorPalette="primary"
-              variant="soft"
-              mr={4}
-              borderRadius="md"
-            >
+            <Button variant="subtle" mr={4} borderRadius="md">
               Medium Radius (4px)
             </Button>
-            <Button
-              colorPalette="secondary"
-              variant="soft"
-              mr={4}
-              borderRadius="lg"
-            >
+            <Button variant="subtle" mr={4} borderRadius="lg">
               Large Radius (20px)
             </Button>
-            <Button colorPalette="primary" variant="outline" borderRadius="xl">
+            <Button variant="secondary" borderRadius="xl">
               XL Radius (50px)
             </Button>
           </Box>
@@ -249,22 +229,27 @@ export const WithCustomConfig: Story = {
           {/* Container showcase */}
           <VStack gap={4} w="100%" align="start">
             <Text fontWeight="bold">Container Sizes (Custom):</Text>
-            <Container maxW="xs" bg="primary.extralight" p={4} borderRadius="md">
-              <Text fontSize="sm" color="primary.dark">
-                Container xs (300px max) - Much smaller!
-              </Text>
-            </Container>
             <Container
-              maxW="sm"
-              bg="secondary.extralight"
+              maxW="xs"
+              bg="primary.extralight"
               p={4}
               borderRadius="md"
             >
+              <Text fontSize="sm" color="primary.dark">
+                Container xs (300px max) - Much smaller!
+              </Text>
+            </Container>
+            <Container maxW="sm" bg="bg.muted" p={4} borderRadius="md">
               <Text fontSize="sm" color="secondary.dark">
                 Container sm (500px max) - Smaller
               </Text>
             </Container>
-            <Container maxW="md" bg="success.extralight" p={4} borderRadius="md">
+            <Container
+              maxW="md"
+              bg="success.extralight"
+              p={4}
+              borderRadius="md"
+            >
               <Text fontSize="sm" color="success.dark">
                 Container md (900px max) - Larger!
               </Text>
@@ -302,7 +287,7 @@ export const WithCustomConfig: Story = {
                 sm: 'warning.extralight',
                 md: 'success.extralight',
                 lg: 'primary.extralight',
-                xl: 'secondary.extralight',
+                xl: 'bg.muted',
               }}
               borderColor={{
                 base: 'danger.main',
@@ -331,14 +316,14 @@ export const WithCustomConfig: Story = {
                 🖥️ xl (1600px+) ⚠️ CUSTOM - Purple
               </Text>
             </Box>
-            <Text fontSize="sm" color="gray.700">
+            <Text fontSize="sm" color="fg.muted">
               💡 Tip: Resize your browser window between 320px-375px to see the
               difference! Default switches to yellow at 320px, but this custom
               config switches at 375px.
             </Text>
           </VStack>
 
-          <Text color="gray.1200" fontSize="sm">
+          <Text color="fg.default" fontSize="sm">
             ✅ All Logician colors, semantic tokens, and component styles are
             preserved while FactChat-specific configurations (fonts, radii,
             containers, breakpoints) are overridden.

package/src/components/LogicianProvider/LogicianProvider.tsx

@@ -8,7 +8,13 @@ import { ColorModeProvider } from '@/components/ColorMode';
 import type { SupportedLanguage } from '@/components/MonthPicker/constants';
 import { LanguageContext } from '@/hooks/useLanguage';
 
-import { logicianConfig, system as defaultSystem } from '../../theme';
+import {
+  createLogicianTheme,
+  logicianConfig,
+  type LogicianThemeOptions,
+  normalizeSemanticOverrides,
+  system as defaultSystem,
+} from '../../theme';
 
 const FONT_STYLESHEETS = [
   // Pretendard Variable — covers Korean + Latin with dynamic subsetting
@@ -67,6 +73,18 @@ export interface LogicianProviderProps {
    */
   config?: SystemConfig;
 
+  /**
+   * Palette options for the built-in theme — which raw scale fills the
+   * neutral/secondary semantic steps. Omit for BAZE (`{ neutral: 'ink',
+   * secondary: 'sand' }`).
+   *
+   * @example
+   * ```tsx
+   * <LogicianProvider theme={{ neutral: 'slate' }}>…</LogicianProvider>
+   * ```
+   */
+  theme?: LogicianThemeOptions;
+
   /**
    * Language code for internationalization.
    * Used by date pickers, month pickers, and other locale-aware components.
@@ -133,6 +151,7 @@ export interface LogicianProviderProps {
  */
 export const LogicianProvider: React.FC<LogicianProviderProps> = ({
   config,
+  theme,
   language = 'en',
   loadFonts = true,
   defaultColorMode = 'system',
@@ -146,13 +165,24 @@ export const LogicianProvider: React.FC<LogicianProviderProps> = ({
     }
   }, [loadFonts]);
 
+  const neutral = theme?.neutral;
+  const secondary = theme?.secondary;
   const system = useMemo(() => {
-    if (!config) {
+    const isDefaultPalette =
+      (neutral ?? 'ink') === 'ink' && (secondary ?? 'sand') === 'sand';
+    if (!config && isDefaultPalette) {
       return defaultSystem;
     }
-    // Merge defaultConfig, logicianConfig, and user config
-    return createSystem(defaultConfig, logicianConfig, config);
-  }, [config]);
+    const base = isDefaultPalette
+      ? logicianConfig
+      : createLogicianTheme({ neutral, secondary });
+    // Merge defaultConfig, the Logician palette config, and user config. The
+    // user's `{ base }` colour overrides are copied to `_light` so they still
+    // win over the library's `_light` roles (see normalizeSemanticOverrides).
+    return config
+      ? createSystem(defaultConfig, base, normalizeSemanticOverrides(config))
+      : createSystem(defaultConfig, base);
+  }, [config, neutral, secondary]);
 
   const languageValue = useMemo(() => ({ language }), [language]);
 

package/src/components/Masonry/Masonry.stories.tsx

@@ -48,7 +48,8 @@ const generateItems = (count: number) => {
   return Array.from({ length: count }).map((_, index) => ({
     id: index,
     height: 100 + Math.floor(Math.random() * 200), // Random heights between 100-300px
-    color: index % 2 === 0 ? 'blue.50' : 'purple.50',
+    color:
+      index % 2 === 0 ? 'category.blue.surface' : 'category.purple.surface',
     title: `Item ${index + 1}`,
   }));
 };
@@ -81,7 +82,7 @@ export const Basic: Story = {
 // Example with realistic content
 export const WithRealContent: Story = {
   render: (args) => {
-    const bgColor = 'gray.50'; // Light mode only
+    const bgColor = 'bg.subtle';
     const categories = [
       {
         name: 'Social Media',
@@ -118,21 +119,32 @@ export const WithRealContent: Story = {
             shadow="sm"
             mb={4}
           >
-            <Text fontWeight="bold" textStyle="h5" mb={2} color="blue.500">
+            <Text
+              fontWeight="bold"
+              textStyle="h5"
+              mb={2}
+              color="category.blue.fg"
+            >
               {category.name}
             </Text>
             {category.items.map((item) => (
               <Box
                 key={item}
                 p={2}
-                _hover={{ bg: 'gray.100' }}
+                _hover={{ bg: 'primary.wash' }}
                 borderRadius="md"
                 transition="background 0.2s"
                 cursor="pointer"
                 display="flex"
                 alignItems="center"
               >
-                <Box w="24px" h="24px" bg="blue.100" borderRadius="full" mr={2} />
+                <Box
+                  w="24px"
+                  h="24px"
+                  bg="category.blue.surface"
+                  borderRadius="full"
+                  mr={2}
+                />
                 <Text>{item}</Text>
               </Box>
             ))}

package/src/components/Menu/Menu.stories.tsx

@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
+import { Button } from '../Button/Button';
 import { IoChevronDownOutline, SlSettings } from '../Icon';
 import { IconButton } from '../IconButton';
-import { Button } from '../Button/Button';
 import { Menu } from './Menu';
 import { MenuItemProps } from './MenuItem.types';
 
@@ -44,7 +44,7 @@ export default meta;
 type Story = StoryObj<MenuStoryProps>;
 
 const renderItems = (items: StoryMenuItemData[]) =>
-  items.map(item => (
+  items.map((item) => (
     <Menu.Item
       key={item.label}
       value={item.label}
@@ -61,7 +61,7 @@ export const Default: Story = {
   render: ({ label, baseFontSize, menuItems }) => (
     <Menu baseFontSize={baseFontSize}>
       <Menu.Trigger asChild>
-        <Button variant="outline">
+        <Button variant="secondary">
           {label} <IoChevronDownOutline />
         </Button>
       </Menu.Trigger>
@@ -73,14 +73,22 @@ export const Default: Story = {
 export const WithIcons: Story = {
   args: {
     menuItems: [
-      { label: 'Profile', onClick: () => alert('Profile clicked'), itemIcon: <SlSettings /> },
-      { label: 'Settings', onClick: () => alert('Settings clicked'), itemIcon: <SlSettings /> },
+      {
+        label: 'Profile',
+        onClick: () => alert('Profile clicked'),
+        itemIcon: <SlSettings />,
+      },
+      {
+        label: 'Settings',
+        onClick: () => alert('Settings clicked'),
+        itemIcon: <SlSettings />,
+      },
     ],
   },
   render: ({ label, baseFontSize, menuItems }) => (
     <Menu baseFontSize={baseFontSize}>
       <Menu.Trigger asChild>
-        <Button variant="outline">
+        <Button variant="secondary">
           {label} <IoChevronDownOutline />
         </Button>
       </Menu.Trigger>
@@ -92,14 +100,22 @@ export const WithIcons: Story = {
 export const WithRightIcons: Story = {
   args: {
     menuItems: [
-      { label: 'Profile', onClick: () => alert('Profile clicked'), rightItemIcon: <SlSettings /> },
-      { label: 'Settings', onClick: () => alert('Settings clicked'), rightItemIcon: <SlSettings /> },
+      {
+        label: 'Profile',
+        onClick: () => alert('Profile clicked'),
+        rightItemIcon: <SlSettings />,
+      },
+      {
+        label: 'Settings',
+        onClick: () => alert('Settings clicked'),
+        rightItemIcon: <SlSettings />,
+      },
     ],
   },
   render: ({ label, baseFontSize, menuItems }) => (
     <Menu baseFontSize={baseFontSize}>
       <Menu.Trigger asChild>
-        <Button variant="outline">
+        <Button variant="secondary">
           {label} <IoChevronDownOutline />
         </Button>
       </Menu.Trigger>
@@ -111,14 +127,24 @@ export const WithRightIcons: Story = {
 export const WithBothIcons: Story = {
   args: {
     menuItems: [
-      { label: 'Profile', itemIcon: <SlSettings />, rightItemIcon: <IoChevronDownOutline />, onClick: () => alert('Profile clicked') },
-      { label: 'Settings', itemIcon: <SlSettings />, rightItemIcon: <IoChevronDownOutline />, onClick: () => alert('Settings clicked') },
+      {
+        label: 'Profile',
+        itemIcon: <SlSettings />,
+        rightItemIcon: <IoChevronDownOutline />,
+        onClick: () => alert('Profile clicked'),
+      },
+      {
+        label: 'Settings',
+        itemIcon: <SlSettings />,
+        rightItemIcon: <IoChevronDownOutline />,
+        onClick: () => alert('Settings clicked'),
+      },
     ],
   },
   render: ({ label, baseFontSize, menuItems }) => (
     <Menu baseFontSize={baseFontSize}>
       <Menu.Trigger asChild>
-        <Button variant="outline">
+        <Button variant="secondary">
           {label} <IoChevronDownOutline />
         </Button>
       </Menu.Trigger>
@@ -131,13 +157,18 @@ export const WithDangerItem: Story = {
   args: {
     menuItems: [
       { label: 'Profile', onClick: () => alert('Profile clicked') },
-      { label: 'Delete', onClick: () => alert('Delete clicked'), itemIcon: <SlSettings />, variant: 'danger' },
+      {
+        label: 'Delete',
+        onClick: () => alert('Delete clicked'),
+        itemIcon: <SlSettings />,
+        variant: 'danger',
+      },
     ],
   },
   render: ({ label, baseFontSize, menuItems }) => (
     <Menu baseFontSize={baseFontSize}>
       <Menu.Trigger asChild>
-        <Button variant="outline">
+        <Button variant="secondary">
           {label} <IoChevronDownOutline />
         </Button>
       </Menu.Trigger>
@@ -151,7 +182,9 @@ export const IconButtonTrigger: Story = {
   render: ({ baseFontSize, menuItems }) => (
     <Menu baseFontSize={baseFontSize}>
       <Menu.Trigger asChild>
-        <IconButton aria-label="Open menu"><IoChevronDownOutline /></IconButton>
+        <IconButton aria-label="Open menu">
+          <IoChevronDownOutline />
+        </IconButton>
       </Menu.Trigger>
       <Menu.List>{renderItems(menuItems)}</Menu.List>
     </Menu>
@@ -160,21 +193,26 @@ export const IconButtonTrigger: Story = {
 
 export const SelectiveIcon: Story = {
   render: function SelectiveIconRender({ label, baseFontSize, menuItems }) {
-    const [selectedLabel, setSelectedLabel] = useState<string | null>(menuItems[0].label);
+    const [selectedLabel, setSelectedLabel] = useState<string | null>(
+      menuItems[0].label
+    );
 
     return (
       <Menu baseFontSize={baseFontSize}>
         <Menu.Trigger asChild>
-          <Button variant="outline">
+          <Button variant="secondary">
             {label} <IoChevronDownOutline />
           </Button>
         </Menu.Trigger>
         <Menu.List>
-          {menuItems.map(item => (
+          {menuItems.map((item) => (
             <Menu.Item
               key={item.label}
               value={item.label}
-              onClick={() => { setSelectedLabel(item.label); item.onClick?.(); }}
+              onClick={() => {
+                setSelectedLabel(item.label);
+                item.onClick?.();
+              }}
               icon={selectedLabel === item.label ? <SlSettings /> : undefined}
             >
               {item.label}

package/src/components/Menu/MenuItem.highlight.test.tsx

@@ -0,0 +1,72 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Menu } from './Menu';
+import { ItemVariant } from './MenuItem.types';
+
+/**
+ * Zag menus never hover-highlight through `:hover` alone: the active row carries
+ * `data-highlighted` (keyboard and pointer alike). Item colours set only under
+ * `_hover` left arrow-key navigation on Chakra's recipe `bg.emphasized/60`.
+ */
+const cssText = () =>
+  Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('\n');
+
+/** Every rule body whose selector targets this element's classes and `[data-highlighted]`. */
+const highlightedRules = (el: HTMLElement) => {
+  const css = cssText();
+  return Array.from(el.classList).flatMap((cls) => {
+    const out: string[] = [];
+    const re = new RegExp(
+      `\\.${cls.replace(/[^\w-]/g, (c) => `\\\\${c}`)}[^{}]*data-highlighted[^{}]*\\{([^}]*)\\}`,
+      'g'
+    );
+    for (const m of css.matchAll(re)) out.push(m[1]);
+    return out;
+  });
+};
+
+const renderMenu = () =>
+  render(
+    <ChakraProvider value={system}>
+      <Menu defaultOpen>
+        <Menu.Trigger>open</Menu.Trigger>
+        <Menu.List portalled={false}>
+          <Menu.Item value="edit">Edit</Menu.Item>
+          <Menu.Item value="delete" variant={ItemVariant.Danger}>
+            Delete
+          </Menu.Item>
+        </Menu.List>
+      </Menu>
+    </ChakraProvider>
+  );
+
+describe('MenuItem highlight', () => {
+  it('arrow keys highlight the row with the item role tokens', async () => {
+    renderMenu();
+    const menu = await screen.findByRole('menu');
+    await act(async () => {
+      fireEvent.keyDown(menu, { key: 'ArrowDown' });
+    });
+    const items = screen.getAllByRole('menuitem');
+    const highlighted = items.find((i) => i.hasAttribute('data-highlighted'));
+    expect(highlighted).toBeDefined();
+
+    const rules = highlightedRules(items[0]).join(';');
+    expect(rules).toContain('--chakra-colors-primary-wash');
+    expect(rules).toContain('--chakra-colors-fg-default');
+  });
+
+  it('the danger row highlights with danger.bg', async () => {
+    renderMenu();
+    await screen.findByRole('menu');
+    const danger = screen.getByRole('menuitem', { name: 'Delete' });
+    expect(highlightedRules(danger).join(';')).toContain(
+      '--chakra-colors-danger-bg'
+    );
+  });
+});

package/src/components/Menu/MenuItem.tsx

@@ -19,9 +19,7 @@ const MenuItemImpl = ({
     <Menu.Item
       value={value}
       // Map item text/hover onto semantic tokens so they flip with the mode.
-      // Was gray.1000 / hover gray.1500 / hover bg gray.50 — none flipped, so
-      // items rendered dim and hover went near-black on a dark menu.
-      color={isDangerVariant ? 'danger.main' : 'fg.muted'}
+      color={isDangerVariant ? 'danger.fg' : 'fg.muted'}
       py={2}
       minW="fit-content"
       fontWeight="semibold"
@@ -29,9 +27,14 @@ const MenuItemImpl = ({
       cursor="pointer"
       // Same as `Button`: the style prop outranks the recipe's disabled cursor.
       _disabled={{ cursor: 'not-allowed' }}
-      _hover={{
-        color: isDangerVariant ? 'danger.main' : 'fg.default',
-        backgroundColor: isDangerVariant ? 'danger.lightest' : 'bg.subtle',
+      // `_highlighted`, not `_hover`: Zag keeps DOM focus on the menu content
+      // and marks the active row with `data-highlighted` (aria-activedescendant),
+      // setting it on pointer move as well as on arrow keys. A `_hover`-only
+      // block left keyboard navigation on Chakra's recipe `bg.emphasized/60`,
+      // and the danger row never showed `danger.bg`.
+      _highlighted={{
+        color: isDangerVariant ? 'danger.fg' : 'fg.default',
+        backgroundColor: isDangerVariant ? 'danger.bg' : 'primary.wash',
       }}
       {...focusRing}
       {...rest}

package/src/components/Menu/MenuList.tsx

@@ -53,7 +53,7 @@ export const MenuList = forwardRef<HTMLDivElement, MenuListProps>(
           // Light keeps its original near-white halo; dark uses a real dark
           // shadow so the menu doesn't glow against the dark canvas.
           boxShadow={{
-            base: '0 5px 20px 1px {colors.gray.50}',
+            base: '0 5px 20px 1px {colors.neutral.1}',
             _dark: '0 5px 20px 1px rgba(0, 0, 0, 0.5)',
           }}
           p="1.5"