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

package/src/components/Avatar/Avatar.tsx

@@ -11,6 +11,8 @@ import {
   AvatarRootProvider,
 } from '@chakra-ui/react';
 
+import { SYSTEM_HUE_NAMES, SystemHue } from '@/theme/colors';
+
 export type {
   AvatarFallbackProps,
   AvatarGroupProps,
@@ -22,11 +24,59 @@ export type {
 export type AvatarProps = ChakraAvatarRootProps & {
   src?: string;
   name?: string;
+  /**
+   * Overrides the hue the fallback initials are tinted — by default a stable
+   * hash of `name` picks one of the 12 `category.*` hues (see
+   * {@link hueForName}), so the same person reads as the same colour
+   * everywhere without a colour being stored anywhere. With no `name` and no
+   * `colorHue` the fallback is the neutral pair
+   * (`bg.muted` / `secondary.fgStrong`), not a hue.
+   */
+  colorHue?: SystemHue;
 };
 
+/**
+ * A stable hash of `name` into one of `SYSTEM_HUE_NAMES`, so a given name
+ * always lands on the same hue (no lookup table, nothing to keep in sync) and
+ * different names spread across the 12-hue wheel instead of clustering on
+ * one. Decorative only — `category.*` carries no status meaning — so a
+ * collision between two people's initials is a cosmetic coincidence, not a
+ * data bug.
+ */
+export function hueForName(name: string): SystemHue;
+export function hueForName(name: string | undefined): SystemHue | undefined;
+export function hueForName(name: string | undefined): SystemHue | undefined {
+  // No name, no identity to colour: `undefined` so the caller falls back to
+  // the neutral pair. `SYSTEM_HUE_NAMES[0]` is red, and a red placeholder
+  // avatar reads as an error state.
+  if (!name) return undefined;
+  let hash = 0;
+  for (let i = 0; i < name.length; i += 1) {
+    // `| 0` keeps the running hash a 32-bit int so it can't grow unbounded
+    // over a long name before the modulo at the end.
+    hash = (hash * 31 + name.charCodeAt(i)) | 0;
+  }
+  const index = Math.abs(hash) % SYSTEM_HUE_NAMES.length;
+  return SYSTEM_HUE_NAMES[index];
+}
+
+/**
+ * Fallback (initials / icon) colours: the person's hue when there is one,
+ * otherwise the neutral pair Badge `neutral` uses.
+ */
+export function avatarFallbackColors(
+  name: string | undefined,
+  colorHue?: SystemHue
+): { bg: string; color: string } {
+  const hue = colorHue ?? hueForName(name);
+  if (!hue) return { bg: 'bg.muted', color: 'secondary.fgStrong' };
+  return { bg: `category.${hue}.surface`, color: `category.${hue}.fg` };
+}
+
 const AvatarComponent = forwardRef<HTMLDivElement, AvatarProps>(
   (props, ref) => {
-    const { src, name, ...rest } = props;
+    const { src, name, colorHue, ...rest } = props;
+    const fallback = avatarFallbackColors(name, colorHue);
     return (
       <ChakraAvatar.Root
         ref={ref}
@@ -36,7 +86,11 @@ const AvatarComponent = forwardRef<HTMLDivElement, AvatarProps>(
         bgColor="transparent"
         {...rest}
       >
-        <ChakraAvatar.Fallback name={name} />
+        <ChakraAvatar.Fallback
+          name={name}
+          bg={fallback.bg}
+          color={fallback.color}
+        />
         <ChakraAvatar.Image src={src} />
       </ChakraAvatar.Root>
     );

package/src/components/Avatar/index.tsx

@@ -6,4 +6,4 @@ export type {
   AvatarProps,
   AvatarRootProps,
 } from './Avatar';
-export { Avatar } from './Avatar';
+export { Avatar, avatarFallbackColors, hueForName } from './Avatar';

package/src/components/Badge/Badge.stories.tsx

@@ -1,8 +1,7 @@
-import { Flex, Box } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Badge, badgeVariantStyles } from '.';
-import { BadgeVariant } from './Badge.types';
+import { Badge, badgeVariants } from '.';
 
 const meta = {
   title: 'Components/Badge',
@@ -13,8 +12,9 @@ const meta = {
   argTypes: {
     variant: {
       control: 'select',
-      options: Object.keys(badgeVariantStyles),
-      description: 'Color variant of the badge',
+      options: badgeVariants,
+      description:
+        'Colour role. `neutral` (grey wash) is the default; the rest report a status.',
     },
     size: {
       control: 'select',
@@ -27,6 +27,7 @@ const meta = {
     },
   },
 } satisfies Meta<typeof Badge>;
+
 export default meta;
 
 type Story = StoryObj<typeof meta>;
@@ -34,66 +35,39 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {};
 
 /**
- * All badge color variants using the Golden Ratio color system.
- * Each variant uses `lightest` background with `dark` text for WCAG AA compliance.
+ * The five 5.0 variants. `neutral` = `bg.muted` + `secondary.fgStrong`;
+ * status variants = `{status}.bg` + `{status}.fg`.
  */
 export const AllVariants: Story = {
-  render: () => {
-    const variants = Object.keys(badgeVariantStyles) as BadgeVariant[];
-    return (
-      <Flex gap={4} wrap="wrap">
-        {variants.map((variant) => (
-          <Box key={variant} textAlign="center">
-            <Badge variant={variant}>
-              {variant.charAt(0).toUpperCase() + variant.slice(1)}
-            </Badge>
-          </Box>
-        ))}
-      </Flex>
-    );
-  },
-};
-
-export const Primary: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Default',
-  },
+  render: () => (
+    <Flex gap={4} wrap="wrap">
+      {badgeVariants.map((variant) => (
+        <Badge key={variant} variant={variant}>
+          {variant.charAt(0).toUpperCase() + variant.slice(1)}
+        </Badge>
+      ))}
+    </Flex>
+  ),
 };
 
-export const Secondary: Story = {
-  args: {
-    variant: 'secondary',
-    children: 'Featured',
-  },
+export const Neutral: Story = {
+  args: { variant: 'neutral', children: 'Draft' },
 };
 
 export const Success: Story = {
-  args: {
-    variant: 'success',
-    children: 'Completed',
-  },
+  args: { variant: 'success', children: 'Completed' },
 };
 
 export const Warning: Story = {
-  args: {
-    variant: 'warning',
-    children: 'Pending',
-  },
+  args: { variant: 'warning', children: 'Pending' },
 };
 
 export const Danger: Story = {
-  args: {
-    variant: 'danger',
-    children: 'Error',
-  },
+  args: { variant: 'danger', children: 'Error' },
 };
 
-export const Neutral: Story = {
-  args: {
-    variant: 'neutral',
-    children: 'Draft',
-  },
+export const Info: Story = {
+  args: { variant: 'info', children: 'New' },
 };
 
 export const Sizes: Story = {

package/src/components/Badge/Badge.styles.ts

@@ -1,9 +1,9 @@
+import { isDev } from '@/utils/isDev';
+
 import { BadgeVariant } from './Badge.types';
 
 /**
- * Badge base styles using the Golden Ratio color system.
- *
- * These styles are shared across all badge variants.
+ * Badge base styles, shared by every variant.
  */
 export const baseStyles = {
   borderRadius: '2xl',
@@ -13,63 +13,69 @@ export const baseStyles = {
   justifyContent: 'center',
 };
 
+/**
+ * Badge colours per variant (5.0 BAZE tokens).
+ *
+ * `neutral` is a neutral `bg.muted` fill with `secondary.fgStrong` text — the
+ * sand tint (`secondary.surface`) is not a component background, so the
+ * secondary identity rides on the text only. The status variants use their family's soft
+ * `.bg` + `.fg`, which the contrast audit checks in both modes.
+ */
 export const variantStyles: Record<
   BadgeVariant,
   { bgColor: string; color: string }
 > = {
-  /**
-   * Primary badge - Default, general purpose
-   * Blue extralight background with dark blue text
-   */
-  primary: {
-    bgColor: 'primary.extralight', // #E8EEFB
-    color: 'primary.dark', // #0D317D
-  },
-
-  /**
-   * Secondary badge - Accent, highlight
-   * Violet extralight background with dark violet text
-   */
-  secondary: {
-    bgColor: 'secondary.extralight', // #F4E8FB
-    color: 'secondary.dark', // #570D7D
+  neutral: {
+    bgColor: 'bg.muted',
+    color: 'secondary.fgStrong',
   },
-
-  /**
-   * Success badge - Positive states
-   * Green extralight background with dark green text
-   */
   success: {
-    bgColor: 'success.extralight', // #E9FBE8
-    color: 'success.dark', // #147D0D
+    bgColor: 'success.bg',
+    color: 'success.fg',
   },
-
-  /**
-   * Warning badge - Caution states
-   * Gold extralight background with dark gold text
-   */
   warning: {
-    bgColor: 'warning.extralight', // #FBF6E8
-    color: 'warning.dark', // #7D610D
+    bgColor: 'warning.bg',
+    color: 'warning.fg',
   },
-
-  /**
-   * Danger badge - Error/negative states
-   * Rose extralight background with dark rose text
-   */
   danger: {
-    bgColor: 'danger.extralight', // #FBE8E9
-    color: 'danger.dark', // #7D0D14
+    bgColor: 'danger.bg',
+    color: 'danger.fg',
   },
-
-  /**
-   * Neutral badge - Neutral information
-   * Muted neutral surface with default foreground; both flip in dark mode.
-   * Light values are unchanged (bg.muted → gray.100; fg.default → gray.1300,
-   * one imperceptible step from the previous gray.1200).
-   */
-  neutral: {
-    bgColor: 'bg.muted', // gray.100 / gray.1200 (_dark)
-    color: 'fg.default', // gray.1300 / gray.50 (_dark)
+  info: {
+    bgColor: 'info.bg',
+    color: 'info.fg',
   },
 };
+
+/** Every 5.0 badge variant, in display order. */
+export const badgeVariants: BadgeVariant[] = [
+  'neutral',
+  'success',
+  'warning',
+  'danger',
+  'info',
+];
+
+const warned = new Set<string>();
+
+/**
+ * Resolve a (possibly 4.x) variant to a 5.0 one. `primary` / `secondary` and
+ * anything unknown fall back to `neutral`, warning once per value in
+ * development so a consumer's untyped call site still renders.
+ */
+export const resolveBadgeVariant = (variant: unknown): BadgeVariant => {
+  if (
+    typeof variant === 'string' &&
+    Object.prototype.hasOwnProperty.call(variantStyles, variant)
+  ) {
+    return variant as BadgeVariant;
+  }
+  if (variant !== undefined && isDev() && !warned.has(String(variant))) {
+    warned.add(String(variant));
+    console.warn(
+      `[logician-ui] <Badge variant="${String(variant)}"> was removed in 5.0 and now renders as "neutral". ` +
+        'Use variant="neutral" (or a status variant: success | warning | danger | info).'
+    );
+  }
+  return 'neutral';
+};

package/src/components/Badge/Badge.tsx

@@ -2,31 +2,35 @@ import { ForwardedRef, forwardRef } from 'react';
 import { Badge as ChakraBadge } from '@chakra-ui/react';
 
 import { polymorphic } from '../../types/polymorphic';
-import { baseStyles, variantStyles } from './Badge.styles';
+import { baseStyles, resolveBadgeVariant, variantStyles } from './Badge.styles';
 import { BadgeOwnProps } from './Badge.types';
 
 /**
- * Badge component with color variants using the Golden Ratio color system.
+ * Badge — a small, non-interactive label.
+ *
+ * `neutral` (default) is the grey-wash everyday badge; `success` / `warning` /
+ * `danger` / `info` report a status. For an unread/notification number use
+ * `CountBadge`; for a removable or selectable label use `Tag`.
  *
  * @example
  * ```tsx
- * <Badge>Default</Badge>
+ * <Badge>Pro</Badge>
  * <Badge variant="success">Completed</Badge>
  * <Badge variant="danger">Error</Badge>
  * <Badge variant="warning">Pending</Badge>
- * <Badge variant="secondary">Featured</Badge>
- * <Badge variant="neutral">Draft</Badge>
+ * <Badge variant="info">New</Badge>
  * ```
  */
 const BadgeImpl = forwardRef(
   (
-    { textTransform = 'none', variant = 'primary', ...rest }: BadgeOwnProps,
+    { textTransform = 'none', variant, ...rest }: BadgeOwnProps,
     ref?: ForwardedRef<HTMLButtonElement>
   ) => {
+    const resolved = resolveBadgeVariant(variant);
     return (
       <ChakraBadge
         {...baseStyles}
-        {...variantStyles[variant]}
+        {...variantStyles[resolved]}
         w="fit-content"
         textTransform={textTransform}
         {...rest}

package/src/components/Badge/Badge.types.ts

@@ -5,30 +5,34 @@ import { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
 import type { PolymorphicProps } from '../../types/polymorphic';
 
 /**
- * Badge variant types for the Golden Ratio color system.
+ * Badge variants (5.0).
  *
- * Each variant uses the `lightest` background shade with `dark` text
- * for optimal readability and WCAG AA compliance.
+ * - `neutral` (default): neutral `bg.muted` with `secondary.fgStrong`
+ *   text — the everyday label ("Pro", "Beta", "Draft").
+ * - `success` / `warning` / `danger` / `info`: the status family's soft
+ *   `{status}.bg` surface with `{status}.fg` text. Use these ONLY when the
+ *   badge reports a status — never as decoration.
  *
- * - `primary`: Default blue badge for general purpose
- * - `secondary`: Violet accent badge
- * - `success`: Green badge for positive states
- * - `warning`: Gold badge for caution states
- * - `danger`: Rose badge for error/negative states
- * - `neutral`: Gray badge for neutral information
+ * **Breaking in 5.0:** `primary` and `secondary` were removed. At runtime they
+ * still render (as `neutral`) and warn once in development.
  */
 export type BadgeVariant =
-  | 'primary'
-  | 'secondary'
+  | 'neutral'
   | 'success'
   | 'warning'
   | 'danger'
-  | 'neutral';
+  | 'info';
+
+/**
+ * 4.x variants that 5.0 maps to `neutral` at runtime.
+ * @deprecated Removed from the type in 5.0; use `neutral`.
+ */
+export type LegacyBadgeVariant = 'primary' | 'secondary';
 
 export type BadgeOwnProps = Omit<ChakraBadgeProps, 'variant' | 'as'> & {
   /**
-   * The color variant of the badge.
-   * @default 'primary'
+   * The colour role of the badge.
+   * @default 'neutral'
    */
   variant?: BadgeVariant;
 };

package/src/components/Badge/index.ts

@@ -1,6 +1,12 @@
 export { Badge } from './Badge';
 export {
   baseStyles as badgeStyles,
+  badgeVariants,
   variantStyles as badgeVariantStyles,
 } from './Badge.styles';
-export type { BadgeOwnProps, BadgeProps, BadgeVariant } from './Badge.types';
+export type {
+  BadgeOwnProps,
+  BadgeProps,
+  BadgeVariant,
+  LegacyBadgeVariant,
+} from './Badge.types';

package/src/components/Banner/Banner.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { VStack } from '@chakra-ui/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
+import { H5, Subtext } from '../Typography';
 import { Banner } from './Banner';
-import { Subtext, H5 } from '../Typography';
 
 const meta = {
   title: 'Components/Banner',
@@ -43,6 +43,13 @@ export const Danger: Story = {
   },
 };
 
+export const Neutral: Story = {
+  args: {
+    variant: 'neutral',
+    children: 'This is a brand notice banner.',
+  },
+};
+
 export const AllSizes: Story = {
   render: () => (
     <VStack gap={4} align="stretch">
@@ -59,7 +66,7 @@ export const AllSizes: Story = {
   ),
 };
 
-const variants = ['info', 'success', 'warning', 'danger'] as const;
+const variants = ['info', 'success', 'warning', 'danger', 'neutral'] as const;
 
 export const AllVariants: Story = {
   render: () => (

package/src/components/Banner/Banner.styles.ts

@@ -8,46 +8,58 @@ import { BannerProps, BannerSize } from './Banner.types';
 type VariantType = NonNullable<BannerProps['variant']>;
 
 /**
- * Banner variant styles using the Golden Ratio color system.
+ * Banner variant styles on the BAZE token set.
  *
- * Uses `lightest` backgrounds with `lighter` borders and `dark` text
- * for optimal readability and WCAG AA compliance.
+ * Every status variant is border `{s}.border` + bg `{s}.bg` + text/icon
+ * `{s}.fg`, with a `{s}.solid` left accent bar — `info` now reads its own
+ * `info.*` family instead of borrowing `primary.*`. `neutral` is the brand
+ * notice band: border `secondary.border`, bar `primary.main`, bg
+ * `bg.subtle` (neutral — the sand tint is not a background), text
+ * `fg.default`.
  */
 export const bannerStyles: Record<VariantType, BoxProps> = {
   info: {
-    bg: 'primary.extralight', // #E8EEFB
-    borderColor: 'primary.lighter', // #B9CBF3
-    color: 'primary.dark', // #0D317D
+    bg: 'info.bg',
+    borderColor: 'info.border',
+    color: 'info.fg',
   },
   success: {
-    bg: 'success.extralight', // #E9FBE8
-    borderColor: 'success.lighter', // #BDF3B9
-    color: 'success.dark', // #147D0D
+    bg: 'success.bg',
+    borderColor: 'success.border',
+    color: 'success.fg',
   },
   warning: {
-    bg: 'warning.extralight', // #FBF6E8
-    borderColor: 'warning.lighter', // #F3E4B9
-    color: 'warning.dark', // #7D610D
+    bg: 'warning.bg',
+    borderColor: 'warning.border',
+    color: 'warning.fg',
   },
   danger: {
-    bg: 'danger.extralight', // #FBE8E9
-    borderColor: 'danger.lighter', // #F3B9BD
-    color: 'danger.dark', // #7D0D14
+    bg: 'danger.bg',
+    borderColor: 'danger.border',
+    color: 'danger.fg',
+  },
+  neutral: {
+    bg: 'bg.subtle',
+    borderColor: 'secondary.border',
+    color: 'fg.default',
   },
 };
 
 export const accentStyles: Record<VariantType, BoxProps['_before']> = {
   info: {
-    bg: 'primary.main',
+    bg: 'info.solid',
   },
   success: {
-    bg: 'success.main',
+    bg: 'success.solid',
   },
   warning: {
-    bg: 'warning.main',
+    bg: 'warning.solid',
   },
   danger: {
-    bg: 'danger.dark',
+    bg: 'danger.solid',
+  },
+  neutral: {
+    bg: 'primary.main',
   },
 };
 
@@ -55,24 +67,28 @@ export const iconConfig: Record<
   VariantType,
   { Icon: React.ComponentType<IconProps>; color: string }
 > = {
-  info: { Icon: LuInfo, color: 'primary.main' },
-  success: { Icon: IoIosCheckmarkCircle, color: 'success.main' },
-  warning: { Icon: IoWarning, color: 'warning.main' },
-  danger: { Icon: MdError, color: 'danger.main' },
+  info: { Icon: LuInfo, color: 'info.fg' },
+  success: { Icon: IoIosCheckmarkCircle, color: 'success.fg' },
+  warning: { Icon: IoWarning, color: 'warning.fg' },
+  danger: { Icon: MdError, color: 'danger.fg' },
+  neutral: { Icon: LuInfo, color: 'fg.default' },
 };
 
 export const textStyles: Record<VariantType, TypographyProps> = {
   info: {
-    color: 'primary.dark',
+    color: 'info.fg',
   },
   success: {
-    color: 'success.dark',
+    color: 'success.fg',
   },
   warning: {
-    color: 'warning.dark',
+    color: 'warning.fg',
   },
   danger: {
-    color: 'danger.dark',
+    color: 'danger.fg',
+  },
+  neutral: {
+    color: 'fg.default',
   },
 };
 

package/src/components/Banner/Banner.types.ts

@@ -3,7 +3,7 @@ import { BoxProps } from '@chakra-ui/react';
 export type BannerSize = 'sm' | 'md' | 'lg';
 
 export interface BannerProps extends BoxProps {
-  variant?: 'info' | 'success' | 'warning' | 'danger';
+  variant?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
   hideIcon?: boolean;
   size?: BannerSize;
 }

package/src/components/BottomSheet/BottomSheet.stories.tsx

@@ -7,11 +7,10 @@
  * emulation) to try the gestures; with a mouse the same drags work by
  * pointer.
  */
+import { useState } from 'react';
 import { Box, HStack, Stack } from '@chakra-ui/react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { useState } from 'react';
-
 import { Button } from '../Button';
 import {
   BoltIcon,
@@ -134,7 +133,7 @@ export const NonModalSnapPoints: Story = {
           <Button onClick={() => setOpen((o) => !o)}>
             {open ? '시트 닫기' : '시트 열기'}
           </Button>
-          <Button variant="outline" onClick={() => setClicks((c) => c + 1)}>
+          <Button variant="secondary" onClick={() => setClicks((c) => c + 1)}>
             뒤의 페이지 버튼 ({clicks})
           </Button>
         </HStack>
@@ -193,7 +192,7 @@ export const LongScrollingList: Story = {
               <Button variant="ghost" onClick={() => setOpen(false)}>
                 취소
               </Button>
-              <Button variant="solid" onClick={() => setOpen(false)}>
+              <Button variant="primary" onClick={() => setOpen(false)}>
                 확인
               </Button>
             </BottomSheetFooter>

package/src/components/BottomSheet/BottomSheetCloseButton.tsx

@@ -28,7 +28,6 @@ export const BottomSheetCloseButton = forwardRef<
         aria-label={translate('close') as string}
         size="sm"
         variant="ghost"
-        colorPalette="neutral"
         {...rest}
       >
         {children ?? <CloseIcon boxSize="xs" aria-hidden />}

package/src/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx

@@ -20,7 +20,7 @@ export const BreadcrumbLink = forwardRef(
   ) => {
     return (
       <Breadcrumb.Link
-        color="primary.dark"
+        color="fg.default"
         _hover={{
           textDecoration: 'underline',
         }}