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

package/src/components/Toast/Toast.styles.ts

@@ -3,31 +3,38 @@ import { BoxProps } from '@chakra-ui/react';
 import type { ToastStatus } from './Toast.types';
 
 /**
- * Toast variant styles using the Golden Ratio color system.
+ * Toast variant styles on the BAZE token set.
  *
- * Uses `lightest` backgrounds with `lighter` borders and `dark` text
- * for optimal readability and WCAG AA compliance.
+ * Each status is bg `{s}.bg` + text `{s}.fg` + a 1px `{s}.border` outline —
+ * `info` reads its own `info.*` family instead of borrowing `primary.*`.
+ * `neutral` carries no status (it is the default when none is given):
+ * `border.default` / `bg.surface` / `fg.default`.
  */
 export const toastStyles: Record<ToastStatus, BoxProps> = {
   info: {
-    bg: 'primary.extralight', // #E8EEFB
-    color: 'primary.dark', // #0D317D
-    borderColor: 'primary.lighter', // #B9CBF3
+    bg: 'info.bg',
+    color: 'info.fg',
+    borderColor: 'info.border',
   },
   warning: {
-    bg: 'warning.extralight', // #FBF6E8
-    color: 'warning.dark', // #7D610D
-    borderColor: 'warning.lighter', // #F3E4B9
+    bg: 'warning.bg',
+    color: 'warning.fg',
+    borderColor: 'warning.border',
   },
   success: {
-    bg: 'success.extralight', // #E9FBE8
-    color: 'success.dark', // #147D0D
-    borderColor: 'success.lighter', // #BDF3B9
+    bg: 'success.bg',
+    color: 'success.fg',
+    borderColor: 'success.border',
   },
   error: {
-    bg: 'danger.extralight', // #FBE8E9
-    color: 'danger.dark', // #7D0D14
-    borderColor: 'danger.lighter', // #F3B9BD
+    bg: 'danger.bg',
+    color: 'danger.fg',
+    borderColor: 'danger.border',
+  },
+  neutral: {
+    bg: 'bg.surface',
+    color: 'fg.default',
+    borderColor: 'border.default',
   },
 };
 
@@ -38,27 +45,33 @@ export const toastStyles: Record<ToastStatus, BoxProps> = {
  */
 export const closeButtonStyles: Record<ToastStatus, BoxProps> = {
   info: {
-    color: 'primary.darker',
+    color: 'info.fg',
     _hover: {
-      bg: 'primary.lighter',
+      bg: 'info.border',
     },
   },
   warning: {
-    color: 'warning.darker',
+    color: 'warning.fg',
     _hover: {
-      bg: 'warning.lighter',
+      bg: 'warning.border',
     },
   },
   success: {
-    color: 'success.darker',
+    color: 'success.fg',
     _hover: {
-      bg: 'success.lighter',
+      bg: 'success.border',
     },
   },
   error: {
-    color: 'danger.darker',
+    color: 'danger.fg',
+    _hover: {
+      bg: 'danger.border',
+    },
+  },
+  neutral: {
+    color: 'fg.default',
     _hover: {
-      bg: 'danger.lighter',
+      bg: 'bg.muted',
     },
   },
 };
@@ -90,27 +103,33 @@ const actionBase: BoxProps = {
 export const actionStyles: Record<ToastStatus, BoxProps> = {
   info: {
     ...actionBase,
-    color: 'primary.dark',
-    _hover: { bg: 'primary.lighter' },
-    _focusVisible: { outline: '2px solid', outlineColor: 'primary.dark' },
+    color: 'info.fg',
+    _hover: { bg: 'info.border' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'info.fg' },
   },
   warning: {
     ...actionBase,
-    color: 'warning.dark',
-    _hover: { bg: 'warning.lighter' },
-    _focusVisible: { outline: '2px solid', outlineColor: 'warning.dark' },
+    color: 'warning.fg',
+    _hover: { bg: 'warning.border' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'warning.fg' },
   },
   success: {
     ...actionBase,
-    color: 'success.dark',
-    _hover: { bg: 'success.lighter' },
-    _focusVisible: { outline: '2px solid', outlineColor: 'success.dark' },
+    color: 'success.fg',
+    _hover: { bg: 'success.border' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'success.fg' },
   },
   error: {
     ...actionBase,
-    color: 'danger.dark',
-    _hover: { bg: 'danger.lighter' },
-    _focusVisible: { outline: '2px solid', outlineColor: 'danger.dark' },
+    color: 'danger.fg',
+    _hover: { bg: 'danger.border' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'danger.fg' },
+  },
+  neutral: {
+    ...actionBase,
+    color: 'fg.default',
+    _hover: { bg: 'bg.muted' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'fg.default' },
   },
 };
 

package/src/components/Toast/Toast.tsx

@@ -17,7 +17,7 @@ import { ToastIcon } from './ToastIcon/ToastIcon';
 export const Toast = ({
   title,
   description,
-  status = 'success',
+  status = 'neutral',
   onClose,
   action,
   ...rest

package/src/components/Toast/Toast.types.ts

@@ -10,7 +10,7 @@ import {
  * Toast status type - common toast statuses used in Logician UI
  * Subset of Zag.js Type, excluding 'loading' for UI consistency
  */
-export type ToastStatus = 'info' | 'warning' | 'success' | 'error';
+export type ToastStatus = 'info' | 'warning' | 'success' | 'error' | 'neutral';
 
 /**
  * The single action a toast can carry.
@@ -61,6 +61,14 @@ export interface UseToastOptions extends Omit<ToastOptions, 'action'> {
   styles?: BoxProps;
 }
 
+/**
+ * Options for `useToast().update(id, options)`. Every field is optional;
+ * `status` (or Chakra's `type`) re-colours the toast.
+ */
+export type UseToastUpdateOptions = Partial<UseToastOptions> & {
+  meta?: ToasterCreateOptions['meta'];
+};
+
 /**
  * Extended toast options for toaster.create()
  * Extends Chakra's ToastOptions with custom metadata

package/src/components/Toast/Toast.update.test.tsx

@@ -0,0 +1,124 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { system } from '@/theme';
+
+import type { UseToastOptions, UseToastUpdateOptions } from './Toast.types';
+import { Toaster, toaster } from './Toaster';
+import { useToast } from './useToast';
+
+/**
+ * `useToast` renders from `meta.status`, so an `update(id, { status | type })`
+ * that left `meta.status` (and the status styles baked into `meta.styles`)
+ * behind kept the old colours and icon.
+ */
+let showToast: ReturnType<typeof useToast>;
+
+const Harness = () => {
+  showToast = useToast();
+  return null;
+};
+
+const renderToaster = () =>
+  render(
+    <ChakraProvider value={system}>
+      <Toaster />
+      <Harness />
+    </ChakraProvider>
+  );
+
+const fire = (options: UseToastOptions) => {
+  let id = '';
+  act(() => {
+    id = showToast(options);
+  });
+  return id;
+};
+
+const update = (id: string, options: UseToastUpdateOptions) =>
+  act(() => {
+    showToast.update(id, options);
+  });
+
+const rootOf = (text: string) =>
+  screen
+    .getByText(text)
+    .closest<HTMLElement>('[data-scope="toast"][data-part="root"]')!;
+
+const background = (el: HTMLElement) =>
+  getComputedStyle(el).getPropertyValue('background');
+
+afterEach(() => {
+  act(() => {
+    toaster.remove();
+  });
+});
+
+describe('useToast update', () => {
+  it('status changes the colours', async () => {
+    renderToaster();
+    const id = fire({ status: 'info', description: 'Working', duration: null });
+    await screen.findByText('Working');
+    expect(background(rootOf('Working'))).toContain('--chakra-colors-info-bg');
+
+    update(id, { status: 'success', description: 'Done' });
+    await screen.findByText('Done');
+    await waitFor(() =>
+      expect(background(rootOf('Done'))).toContain('--chakra-colors-success-bg')
+    );
+  });
+
+  it("Chakra's `type` changes the colours too", async () => {
+    renderToaster();
+    const id = fire({ status: 'info', description: 'Working', duration: null });
+    await screen.findByText('Working');
+
+    update(id, { type: 'error', description: 'Failed' });
+    await screen.findByText('Failed');
+    expect(background(rootOf('Failed'))).toContain('--chakra-colors-danger-bg');
+  });
+
+  it('a raw toaster.update({ type }) on a useToast toast changes the status', async () => {
+    renderToaster();
+    const id = fire({ description: 'Neutral', duration: null });
+    await screen.findByText('Neutral');
+    expect(rootOf('Neutral').querySelectorAll('svg')).toHaveLength(1);
+
+    act(() => {
+      toaster.update(id, { type: 'warning', description: 'Careful' });
+    });
+    await screen.findByText('Careful');
+    // Status icon + close ×.
+    expect(rootOf('Careful').querySelectorAll('svg')).toHaveLength(2);
+  });
+
+  it('updating to neutral drops the status icon', async () => {
+    renderToaster();
+    const id = fire({
+      status: 'success',
+      description: 'Saved',
+      duration: null,
+    });
+    await screen.findByText('Saved');
+
+    update(id, { status: 'neutral', description: 'Plain' });
+    await screen.findByText('Plain');
+    expect(rootOf('Plain').querySelectorAll('svg')).toHaveLength(1);
+  });
+
+  it('keeps the action across an update that does not mention it', async () => {
+    renderToaster();
+    const id = fire({
+      status: 'info',
+      description: 'Working',
+      duration: null,
+      action: { label: 'Undo', onClick: () => {} },
+    });
+    await screen.findByRole('button', { name: 'Undo' });
+
+    update(id, { status: 'success', description: 'Done' });
+    await screen.findByText('Done');
+    expect(screen.getByRole('button', { name: 'Undo' })).toBeInTheDocument();
+  });
+});

package/src/components/Toast/ToastIcon/ToastIcon.tsx

@@ -11,10 +11,12 @@ import { ToastProps, ToastStatus } from '../Toast.types';
 
 export const ToastIcon = ({ status }: Required<Pick<ToastProps, 'status'>>) => {
   const iconProps: Record<ToastStatus, ReactNode> = {
-    info: <InfoCircleIcon boxSize="md" color="primary.main" />,
-    warning: <WarningIcon boxSize="lg" color="warning.main" />,
-    success: <CircleCheckIcon boxSize="lg" color="success.main" />,
-    error: <AlertCircleFilledIcon boxSize="lg" color="danger.main" />,
+    info: <InfoCircleIcon boxSize="md" color="info.fg" />,
+    warning: <WarningIcon boxSize="lg" color="warning.fg" />,
+    success: <CircleCheckIcon boxSize="lg" color="success.fg" />,
+    error: <AlertCircleFilledIcon boxSize="lg" color="danger.fg" />,
+    // neutral carries no status — no icon
+    neutral: null,
   };
 
   return iconProps[status];

package/src/components/Toast/Toaster.tsx

@@ -71,15 +71,27 @@ export const Toaster = () => (
           (toast.action
             ? { label: toast.action.label, onClick: () => {} }
             : undefined);
+        // `useToast` carries the real status in `meta.status` because Zag's
+        // own `type` is required and does not know `neutral` — see the note
+        // in `useToast.tsx`. A plain `toaster.create({ type })` (no `meta`)
+        // still renders correctly off `toast.type`, and so does a raw
+        // `toaster.update(id, { type })` on a `useToast` toast: `type` no
+        // longer matches the `statusType` it was paired with, so it wins.
+        const meta = toast.meta;
+        const status =
+          meta?.status &&
+          (meta.statusType === undefined || meta.statusType === toast.type)
+            ? meta.status
+            : toast.type;
 
         return (
           <Toast
             title={toast.title}
             description={toast.description}
-            status={toast.type}
+            status={status}
             onClose={onClose}
             action={action}
-            {...toastStyles[toast.type as keyof typeof toastStyles]}
+            {...toastStyles[status as keyof typeof toastStyles]}
             {...customStyles}
           />
         );

package/src/components/Toast/useToast.tsx

@@ -1,19 +1,27 @@
 import { useRef } from 'react';
 
-import {
-  TOAST_ACTION_DURATION,
-  TOAST_DEFAULT_DURATION,
-  toastStyles,
-} from './Toast.styles';
+import { TOAST_ACTION_DURATION, TOAST_DEFAULT_DURATION } from './Toast.styles';
 import {
   ToasterCreateOptions,
+  ToastStatus,
   ToastStatusChangeDetails,
   UseToastOptions,
+  UseToastUpdateOptions,
 } from './Toast.types';
 import { toaster } from './Toaster';
 
 const MAX_TOASTS = 3;
 
+/**
+ * Zag's own toast store only knows `info/success/warning/error/loading` and
+ * REQUIRES one — `neutral` is ours, not Zag's, and both omitting `type` and
+ * passing `'neutral'` throw from inside the machine. `'info'` only feeds Zag's
+ * priority sort; the status that actually renders travels in `meta.status`
+ * and is read back out in `Toaster`.
+ */
+const toZagType = (status: ToastStatus) =>
+  status === 'neutral' ? 'info' : status;
+
 /**
  * Custom hook for managing toast notifications
  * @returns Toast management functions
@@ -22,7 +30,7 @@ export const useToast = () => {
   const activeToasts = useRef<string[]>([]); // Track active toast IDs
 
   const showToast = ({
-    status = 'success',
+    status = 'neutral',
     title,
     description,
     styles: stylesProp,
@@ -40,11 +48,6 @@ export const useToast = () => {
           : TOAST_DEFAULT_DURATION;
 
     // NOTE: placement is not supported - must be configured in Toaster.tsx createToaster()
-    const styles = {
-      ...toastStyles[status],
-      ...stylesProp,
-    };
-
     // Close the earliest toast if the limit is reached
     if (activeToasts.current.length >= MAX_TOASTS) {
       const [oldestToastId] = activeToasts.current;
@@ -59,10 +62,17 @@ export const useToast = () => {
       duration,
       title,
       description,
-      type: status, // Maps to our status
+      type: toZagType(status),
       meta: {
         // Pass custom data through meta
-        styles, // for custom toast style
+        status, // the real status — `Toaster` renders from this, not `type`
+        // The `type` that `status` was paired with. A later
+        // `toaster.update(id, { type })` changes `type` without touching
+        // `meta.status`; the mismatch tells `Toaster` that `type` is newer.
+        statusType: toZagType(status),
+        // Only the caller's overrides — `Toaster` applies the status styles
+        // itself, so they follow the status when it is updated.
+        styles: stylesProp,
         action, // ReactNode label, so it travels in meta rather than `action`
         onClose: () => toaster.dismiss(toastId), // Custom close handler
       },
@@ -88,9 +98,39 @@ export const useToast = () => {
     activeToasts.current = [];
   };
 
+  /**
+   * Update a toast in place. `status` (or Chakra's `type`) changes the colours
+   * and icon; `meta` is merged into the toast's existing meta rather than
+   * replacing it, so the close handler and the action survive the update.
+   */
+  const update = (
+    id: string,
+    { status, styles, action, meta, ...rest }: UseToastUpdateOptions
+  ) => {
+    const current =
+      toaster.getVisibleToasts().find((toast) => toast.id === id)?.meta ?? {};
+    const nextStatus: ToastStatus | undefined =
+      status ?? (rest.type as ToastStatus | undefined);
+
+    return toaster.update(id, {
+      ...rest,
+      ...(nextStatus && { type: toZagType(nextStatus) }),
+      meta: {
+        ...current,
+        ...meta,
+        ...(nextStatus && {
+          status: nextStatus,
+          statusType: toZagType(nextStatus),
+        }),
+        ...(styles !== undefined && { styles }),
+        ...(action !== undefined && { action }),
+      },
+    } as ToasterCreateOptions);
+  };
+
   return Object.assign(showToast, {
     dismiss: toaster.dismiss,
     dismissAll,
-    update: toaster.update,
+    update,
   });
 };

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,6 +1,6 @@
+import { useState } from 'react';
 import { Box, Button, HStack, IconButton, VStack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
 
 import { FaRegCopy } from '../Icon';
 import { Tooltip } from './Tooltip';
@@ -143,8 +143,8 @@ export const CustomStylesWithArrow: Story = {
           content="Danger color tooltip"
           showArrow
           contentProps={{
-            css: { '--tooltip-bg': 'var(--chakra-colors-danger-main)' },
-            bgColor: 'danger.main',
+            css: { '--tooltip-bg': 'var(--chakra-colors-danger-solid)' },
+            bgColor: 'danger.solid',
           }}
         >
           <Button colorPalette="danger" variant="outline">
@@ -156,8 +156,8 @@ export const CustomStylesWithArrow: Story = {
           content="Success color tooltip"
           showArrow
           contentProps={{
-            css: { '--tooltip-bg': 'var(--chakra-colors-success-main)' },
-            bgColor: 'success.main',
+            css: { '--tooltip-bg': 'var(--chakra-colors-success-solid)' },
+            bgColor: 'success.solid',
           }}
         >
           <Button colorPalette="success" variant="outline">
@@ -169,9 +169,9 @@ export const CustomStylesWithArrow: Story = {
           content="Warning color tooltip"
           showArrow
           contentProps={{
-            css: { '--tooltip-bg': 'var(--chakra-colors-warning-main)' },
-            bgColor: 'warning.main',
-            color: 'gray.1500',
+            css: { '--tooltip-bg': 'var(--chakra-colors-warning-solid)' },
+            bgColor: 'warning.solid',
+            color: 'warning.onSolid',
           }}
         >
           <Button colorPalette="warning" variant="outline">
@@ -225,7 +225,7 @@ export const CustomStylesWithoutArrow: Story = {
         <Tooltip
           content="Danger color tooltip"
           contentProps={{
-            bgColor: 'danger.main',
+            bgColor: 'danger.solid',
           }}
         >
           <Button colorPalette="danger" variant="outline">
@@ -236,7 +236,7 @@ export const CustomStylesWithoutArrow: Story = {
         <Tooltip
           content="Success color tooltip"
           contentProps={{
-            bgColor: 'success.main',
+            bgColor: 'success.solid',
           }}
         >
           <Button colorPalette="success" variant="outline">
@@ -247,8 +247,8 @@ export const CustomStylesWithoutArrow: Story = {
         <Tooltip
           content="Warning color tooltip"
           contentProps={{
-            bgColor: 'warning.main',
-            color: 'gray.1500',
+            bgColor: 'warning.solid',
+            color: 'warning.onSolid',
           }}
         >
           <Button colorPalette="warning" variant="outline">

package/src/components/Tooltip/Tooltip.tsx

@@ -43,7 +43,7 @@ export const Tooltip = forwardRef(
           <ChakraTooltip.Positioner>
             <ChakraTooltip.Content
               ref={ref}
-              color="white"
+              color="tooltip.fg"
               fontSize="sm"
               px={2}
               py={1}
@@ -57,7 +57,7 @@ export const Tooltip = forwardRef(
               {...contentProps}
               css={mergeCss(
                 {
-                  '--tooltip-bg': 'var(--chakra-colors-gray-1200)',
+                  '--tooltip-bg': 'var(--chakra-colors-tooltip-bg)',
                   // zag sets `data-instant` when the pointer moves from one
                   // open tooltip to the next. It already skips the delay
                   // there; skip the enter/exit too, so sweeping a toolbar

package/src/components/Tree/Tree.GuideElbow.stories.tsx

@@ -1,8 +1,8 @@
 import { Box, HStack, Stack, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Tree } from './Tree';
 import { createTreeCollection } from './index';
+import { Tree } from './Tree';
 
 /**
  * Stories for the `elbow` option on `Tree.BranchIndentGuide`.
@@ -155,7 +155,7 @@ export const GuideColor: Story = {
         [
           ['border.default (기본)', undefined],
           ['border.strong', 'border.strong'],
-          ['primary.light', 'primary.light'],
+          ['primary.main', 'primary.main'],
         ] as const
       ).map(([label, guideColor]) => (
         <Stack key={label} gap={2} width="280px">

package/src/components/Tree/TreeBranchControl.tsx

@@ -19,7 +19,7 @@ export const TreeBranchControl = forwardRef<
       cursor="pointer"
       color="fg.default"
       _hover={{ bg: 'bg.subtle' }}
-      _selected={{ bg: 'primary.lightest', color: 'primary.dark' }}
+      _selected={{ bg: 'primary.selected', color: 'fg.default' }}
       {...focusRing}
       {...props}
     />

package/src/components/Tree/TreeBranchIndentGuide.test.tsx

@@ -199,7 +199,7 @@ describe('Tree.BranchIndentGuide elbow', () => {
   });
 
   it('paints the guide with the custom guideColor token', () => {
-    const cls = renderGuide(true, { guideColor: 'red.500' });
+    const cls = renderGuide(true, { guideColor: 'danger.fg' });
     const anchor = styleAnchor(cls);
     const css = sheetText();
     const footRule =
@@ -208,6 +208,6 @@ describe('Tree.BranchIndentGuide elbow', () => {
           `${anchor}\\s*~\\s*\\[data-part="item"\\]::before\\s*\\{[^}]*\\}`
         )
       )?.[0] ?? '';
-    expect(footRule).toMatch(/--chakra-colors-red-500|red\.500/);
+    expect(footRule).toMatch(/--chakra-colors-danger-fg|danger\.fg/);
   });
 });

package/src/components/Tree/TreeItem.tsx

@@ -23,7 +23,7 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
         cursor="pointer"
         color="fg.default"
         _hover={{ bg: 'bg.subtle' }}
-        _selected={{ bg: 'primary.lightest', color: 'primary.dark' }}
+        _selected={{ bg: 'primary.selected', color: 'fg.default' }}
         {...focusRing}
         {...props}
       />

package/src/components/Typography/Caption.tsx

@@ -12,10 +12,10 @@ import { TypographyOwnProps } from './Typography.types';
  *
  * Scale: `Text` (p, 14–16px) → `Subtext` (12.88–14px) → `Caption` (11–12px).
  *
- * Defaults to `fg.muted` since captions are secondary by nature; every aspect
- * stays one Chakra prop away, so a brand/status variant is a single override
- * (e.g. `color="danger.main"`). Passing `fontSize` opts out of the baked-in
- * `textStyle` so an explicit size wins.
+ * Defaults to `fg.subtle` since captions are the most de-emphasised tier in
+ * the scale; every aspect stays one Chakra prop away, so a brand/status
+ * variant is a single override (e.g. `color="danger.fg"`). Passing `fontSize`
+ * opts out of the baked-in `textStyle` so an explicit size wins.
  */
 const CaptionImpl = forwardRef<HTMLParagraphElement, TypographyOwnProps>(
   (props, ref) => {
@@ -27,7 +27,7 @@ const CaptionImpl = forwardRef<HTMLParagraphElement, TypographyOwnProps>(
         // If fontSize is provided, disable textStyle to allow the override
         textStyle={fontSize ? undefined : 'caption'}
         fontSize={fontSize}
-        color="fg.muted"
+        color="fg.subtle"
         wordBreak="keep-all"
         {...rest}
       />