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

package/src/components/Input/Input.stories.tsx

@@ -54,7 +54,7 @@ export const ControlledWithValue: Story = {
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-        <Text fontSize="sm" color="gray.600">
+        <Text fontSize="sm" color="fg.muted">
           Current value: "{value}"
         </Text>
       </Stack>
@@ -148,7 +148,7 @@ export const LeftIcon: Story = {
     placeholder: 'Phone number',
     size: 'md',
     disabled: false,
-    leftIcon: <PhoneFilledIcon color="gray.300" />,
+    leftIcon: <PhoneFilledIcon color="fg.icon" />,
   },
 };
 
@@ -157,15 +157,15 @@ export const RightIcon: Story = {
     placeholder: 'Search...',
     size: 'md',
     disabled: false,
-    rightIcon: <SearchIcon color="gray.300" />,
+    rightIcon: <SearchIcon color="fg.icon" />,
   },
 };
 
 export const BothIcons: Story = {
   args: {
     placeholder: 'Email address',
-    leftIcon: <MailIcon color="gray.300" />,
-    rightIcon: <SearchIcon color="gray.300" />,
+    leftIcon: <MailIcon color="fg.icon" />,
+    rightIcon: <SearchIcon color="fg.icon" />,
   },
 };
 
@@ -185,10 +185,10 @@ export const NumberWithMask: Story = {
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-        <Text fontSize="sm" color="gray.600">
+        <Text fontSize="sm" color="fg.muted">
           Raw value: {value}
         </Text>
-        <Text fontSize="xs" color="gray.500">
+        <Text fontSize="xs" color="fg.subtle">
           Numbers are automatically formatted with commas
         </Text>
       </Stack>
@@ -211,7 +211,7 @@ export const TrimWhiteSpace: Story = {
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-        <Text fontSize="xs" color="gray.500">
+        <Text fontSize="xs" color="fg.subtle">
           Try typing spaces at the beginning or end
         </Text>
       </Stack>
@@ -234,7 +234,7 @@ export const NoSpaces: Story = {
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-        <Text fontSize="xs" color="gray.500">
+        <Text fontSize="xs" color="fg.subtle">
           Try typing spaces - they will be removed
         </Text>
       </Stack>
@@ -250,7 +250,7 @@ export const FocusState: Story = {
     return (
       <Stack gap={2}>
         <Input {...args} />
-        <Text fontSize="xs" color="gray.500">
+        <Text fontSize="xs" color="fg.subtle">
           Focus border should be primary.main color
         </Text>
       </Stack>

package/src/components/Input/Input.tsx

@@ -10,6 +10,7 @@ import {
 import { Input as ChakraInput, InputGroup } from '@chakra-ui/react';
 
 import { noZoomOnFocus } from '@/theme/formControls';
+import { disabledControl } from '@/utils/disabledControl';
 import { formatNumber } from '@/utils/formatNumber';
 import { mergeCss } from '@/utils/mergeCss';
 
@@ -323,23 +324,26 @@ export const Input = forwardRef(
           bg="bg.surface"
           color="fg.default"
           borderColor={
-            borderColor ?? (invalid ? 'danger.main' : 'border.default')
+            borderColor ?? (invalid ? 'danger.solid' : 'border.control')
           }
           _hover={{
-            borderColor: invalid ? 'danger.main' : 'primary.lighter',
+            borderColor: invalid ? 'danger.solid' : 'fg.icon',
             ..._hover,
           }}
           _focus={{
-            borderColor: invalid ? 'danger.main' : 'primary.main',
+            borderColor: invalid ? 'danger.solid' : 'primary.main',
+            boxShadow: invalid
+              ? 'none'
+              : '0 0 0 1px var(--chakra-colors-primary-main)',
             ..._focus,
           }}
           _invalid={{
-            borderColor: 'danger.main',
+            borderColor: 'danger.solid',
             _hover: {
-              borderColor: 'danger.main',
+              borderColor: 'danger.solid',
             },
             _focus: {
-              borderColor: 'danger.main',
+              borderColor: 'danger.solid',
             },
           }}
           _readOnly={{
@@ -350,10 +354,8 @@ export const Input = forwardRef(
             borderColor: 'border.subtle',
           }}
           _disabled={{
-            opacity: 1,
+            ...disabledControl,
             cursor: 'not-allowed',
-            bg: 'bg.subtle',
-            color: { base: 'gray.1000', _dark: 'gray.400' },
             fontWeight: 'semibold',
           }}
           {...rest}
@@ -362,7 +364,7 @@ export const Input = forwardRef(
             {
               paddingInlineEnd: rightElementWidth,
               '--focus-color': 'var(--chakra-colors-primary-main)',
-              '--error-color': 'var(--chakra-colors-danger-main)',
+              '--error-color': 'var(--chakra-colors-danger-solid)',
             },
             css
           )}

package/src/components/LineGraph/LineGraph.tsx

@@ -10,7 +10,10 @@ import {
   YAxis,
 } from 'recharts';
 
+import { useColorMode } from '@/components/ColorMode';
+
 import { DatumBase, LineGraphProps } from './LineGraph.types';
+import { seriesColor } from './seriesColors';
 
 export const LineGraph = <T extends DatumBase>({
   data = [],
@@ -19,6 +22,11 @@ export const LineGraph = <T extends DatumBase>({
   ...rest
 }: LineGraphProps<T>) => {
   const primaryColor = useToken('colors', 'primary.main')[0];
+  // Series 1 is the neutral brand line; further series cycle hues with no
+  // status meaning (see seriesColors.ts). Strokes read the generated palette
+  // directly because no semantic role fits a chart line.
+  const { colorMode } = useColorMode();
+  const isDark = colorMode === 'dark';
   return (
     <Box h="400px" {...rest}>
       <ResponsiveContainer width="100%" height="100%">
@@ -44,7 +52,7 @@ export const LineGraph = <T extends DatumBase>({
             // Color of line
             stroke="transparent"
             // Props of text. CSS var (not a Chakra token) so the axis labels
-            // flip with the mode — recharts won't resolve 'gray.1200' itself.
+            // flip with the mode — recharts won't resolve 'fg.muted' itself.
             tick={{
               fill: 'var(--chakra-colors-fg-muted)',
               fontSize: `${useToken('fontSizes', 'sm')}`,
@@ -62,11 +70,21 @@ export const LineGraph = <T extends DatumBase>({
             tickMargin={0}
           />
           <Tooltip
-            // The tooltip surface stays light in both modes, so the label keeps
-            // a fixed near-black. Must be a CSS var, not 'gray.1500' — recharts
+            // recharts' default tooltip box is an unstyled white div, which is
+            // why the label used to need a raw fixed-dark colour regardless of
+            // mode. Themeing the box itself with CSS vars (so it flips too)
+            // removes that special case — label and surface move together,
+            // same as every other themed surface. CSS vars because recharts
             // won't resolve Chakra tokens (see XAxis/YAxis above).
+            contentStyle={{
+              backgroundColor: 'var(--chakra-colors-bg-surface)',
+              borderColor: 'var(--chakra-colors-border-default)',
+            }}
             labelStyle={{
-              color: 'var(--chakra-colors-gray-1500)',
+              color: 'var(--chakra-colors-fg-default)',
+            }}
+            itemStyle={{
+              color: 'var(--chakra-colors-fg-default)',
             }}
           />
           {displayLegend && (
@@ -76,13 +94,13 @@ export const LineGraph = <T extends DatumBase>({
               }}
             />
           )}
-          {dataKeys.map(({ key, label, color }) => (
+          {dataKeys.map(({ key, label, color }, index) => (
             <Line
               key={`line-${key}`}
               type="monotone"
               dataKey={key}
               name={label}
-              stroke={color ?? primaryColor}
+              stroke={color ?? seriesColor(index, primaryColor, isDark)}
               dot={{ r: 0 }}
             />
           ))}

package/src/components/LineGraph/seriesColors.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+
+import { SYSTEM_HUES } from '@/theme/palette.generated';
+
+import { CHART_SERIES_HUES, seriesColor } from './seriesColors';
+
+const lum = (hex: string) => {
+  const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+  const [r, g, b] = c.map((v) =>
+    v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
+  );
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+const contrast = (a: string, b: string) => {
+  const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p);
+  return (x + 0.05) / (y + 0.05);
+};
+
+describe('chart series colours', () => {
+  it('never default a series to a status or link hue', () => {
+    const banned = new Set(['red', 'yellow', 'green', 'blue']);
+    expect(CHART_SERIES_HUES.filter(({ hue }) => banned.has(hue))).toEqual([]);
+  });
+
+  it('series 1 is the primary line, series 2 is brown', () => {
+    expect(seriesColor(0, '#252525', false)).toBe('#252525');
+    expect(seriesColor(1, '#252525', false)).toBe(SYSTEM_HUES.brown.base);
+  });
+
+  it('every default stroke clears 3:1 against the page in both modes', () => {
+    CHART_SERIES_HUES.forEach((_, i) => {
+      expect(
+        contrast(seriesColor(i + 1, '', false), '#FFFFFF')
+      ).toBeGreaterThanOrEqual(3);
+      expect(
+        contrast(seriesColor(i + 1, '', true), '#1F1E1D')
+      ).toBeGreaterThanOrEqual(3);
+    });
+  });
+});

package/src/components/LineGraph/seriesColors.ts

@@ -0,0 +1,42 @@
+import type { SystemHue } from '@/theme/colors';
+import { SYSTEM_HUES } from '@/theme/palette.generated';
+
+/**
+ * Default stroke order for multi-series charts.
+ *
+ * Series 1 is the neutral brand line (`primary.main`); the rest cycle hues
+ * that carry no meaning in the system. Red, yellow and green are the danger,
+ * warning and success colours, and blue is info and links, so none of them
+ * may colour a series by default — a red "UV" line reads as an error.
+ *
+ * Every stroke clears 3:1 against the page in both modes. Cyan, mint and
+ * orange are too light at their base value in light mode (≈1.9:1), so they
+ * come last and use their increased-contrast value there.
+ */
+type SeriesHue = {
+  hue: Exclude<SystemHue, 'red' | 'yellow' | 'green' | 'blue'>;
+  light: 'base' | 'hc';
+};
+
+export const CHART_SERIES_HUES: readonly SeriesHue[] = [
+  { hue: 'brown', light: 'base' },
+  { hue: 'indigo', light: 'base' },
+  { hue: 'pink', light: 'base' },
+  { hue: 'teal', light: 'base' },
+  { hue: 'purple', light: 'base' },
+  { hue: 'cyan', light: 'hc' },
+  { hue: 'mint', light: 'hc' },
+  { hue: 'orange', light: 'hc' },
+];
+
+/** Stroke for series `index` (0-based); index 0 is the caller's primary line. */
+export const seriesColor = (
+  index: number,
+  primary: string,
+  isDark: boolean
+): string => {
+  if (index === 0) return primary;
+  const { hue, light } =
+    CHART_SERIES_HUES[(index - 1) % CHART_SERIES_HUES.length];
+  return isDark ? SYSTEM_HUES[hue].baseDark : SYSTEM_HUES[hue][light];
+};

package/src/components/Loaders/LoaderStatus.tsx

@@ -0,0 +1,25 @@
+import { VisuallyHidden } from '@chakra-ui/react';
+
+import { useTranslate } from '@/hooks/useTranslate';
+
+import LoadersTranslations from './Loaders.translations.json';
+
+/**
+ * Live-region props and the spoken text for a loader overlay.
+ *
+ * Live regions announce their text content, not `aria-label`, so the label is
+ * visually hidden text inside the status element. An idle loader exposes no
+ * status at all — an always-present "Loading" status on an idle page tells a
+ * screen reader the page is busy when it is not.
+ */
+export const useLoaderStatus = (isLoading: boolean, label?: string) => {
+  const translate = useTranslate(LoadersTranslations);
+  const text = label ?? (translate('loading') as string);
+
+  return {
+    statusProps: isLoading
+      ? ({ role: 'status', 'aria-live': 'polite' } as const)
+      : ({ 'aria-hidden': true } as const),
+    statusText: isLoading ? <VisuallyHidden>{text}</VisuallyHidden> : null,
+  };
+};

package/src/components/Loaders/Loaders.styles.ts

@@ -0,0 +1,28 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * The `thinking` loader's three dots.
+ *
+ * Local to this component for the same reason `Spinner`'s turn is local to
+ * `Spinner.styles.ts` (see `src/theme/claude.md` → Motion → Components): a
+ * loop with one caller belongs next to that caller, not in the shared
+ * `animationStyle` vocabulary of eight. The 1.2s period and 0.15s stagger are
+ * fixed by the house spec for this exact loader — not a preference this
+ * component is free to retune — so they are named constants here rather than
+ * literals scattered across the JSX.
+ *
+ * Reduced motion drops the loop entirely (`_motionReduce`): unlike `Spinner`,
+ * which slows rather than stops because a frozen spinner reads as a hung
+ * request, three static coral dots still read as "thinking" without motion —
+ * there is no "stopped" misreading to guard against.
+ */
+export const THINKING_DOT_DURATION = '1.2s';
+export const THINKING_DOT_STAGGER = '0.15s';
+
+export const thinkingDotAnimation: SystemStyleObject = {
+  animationName: 'pulse',
+  animationDuration: THINKING_DOT_DURATION,
+  animationTimingFunction: 'ease-in-out',
+  animationIterationCount: 'infinite',
+  _motionReduce: { animation: 'none' },
+};

package/src/components/Loaders/Loaders.test.tsx

@@ -0,0 +1,63 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '@/theme';
+
+import { PageLoader } from './PageLoader';
+import { SectionLoader } from './SectionLoader';
+
+const withTheme = (ui: React.ReactElement) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('PageLoader', () => {
+  it('renders a status region', () => {
+    withTheme(<PageLoader isLoading />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders three thinking dots for variant="thinking"', () => {
+    const { container } = withTheme(
+      <PageLoader isLoading variant="thinking" />
+    );
+    // Spinner is absent; three dots render instead.
+    expect(container.querySelectorAll('[aria-hidden="true"] > *')).toHaveLength(
+      3
+    );
+  });
+});
+
+describe('PageLoader status', () => {
+  it('an idle loader exposes no status', () => {
+    withTheme(<PageLoader isLoading={false} />);
+    expect(screen.queryByRole('status')).toBeNull();
+  });
+
+  it('while loading, the status carries its label as text content', () => {
+    withTheme(<PageLoader isLoading />);
+    // Live regions announce text, not aria-label.
+    expect(screen.getByRole('status').textContent).toBe('로딩 중');
+  });
+
+  it('label overrides the announced text', () => {
+    withTheme(<PageLoader isLoading label="Saving" />);
+    expect(screen.getByRole('status')).toHaveTextContent('Saving');
+  });
+});
+
+describe('SectionLoader', () => {
+  it('while loading, the status carries its label as text content', () => {
+    withTheme(<SectionLoader isLoading />);
+    expect(screen.getByRole('status').textContent).toBe('로딩 중');
+  });
+
+  it('renders nothing when not loading', () => {
+    const { container } = withTheme(<SectionLoader isLoading={false} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders a status region with the thinking dots variant', () => {
+    withTheme(<SectionLoader isLoading variant="thinking" />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+});

package/src/components/Loaders/Loaders.translations.json

@@ -0,0 +1,9 @@
+{
+  "loading": {
+    "ko": "로딩 중",
+    "en": "Loading",
+    "zh": "加载中",
+    "ja": "読み込み中",
+    "es": "Cargando"
+  }
+}

package/src/components/Loaders/PageLoader.stories.tsx

@@ -22,7 +22,21 @@ export const Basic: Story = {
   },
   render: (args) => {
     return (
-      <Box position="relative" p="128px" bg="red">
+      <Box position="relative" p="128px" bg="danger.bg">
+        <PageLoader {...args} />
+      </Box>
+    );
+  },
+};
+
+export const Thinking: Story = {
+  args: {
+    isLoading: true,
+    variant: 'thinking',
+  },
+  render: (args) => {
+    return (
+      <Box position="relative" p="128px" bg="danger.bg">
         <PageLoader {...args} />
       </Box>
     );

package/src/components/Loaders/PageLoader.tsx

@@ -2,10 +2,28 @@ import { Box, Flex, FlexProps } from '@chakra-ui/react';
 
 import { Spinner } from '@/components/Spinner';
 
+import { useLoaderStatus } from './LoaderStatus';
+import { ThinkingDots } from './ThinkingDots';
+
+export type LoaderVariant = 'default' | 'thinking';
+
+export type LoaderProps = FlexProps & {
+  isLoading: boolean;
+  variant?: LoaderVariant;
+  /**
+   * What a screen reader announces while loading. Defaults to the translated
+   * "loading" string (`로딩 중`).
+   */
+  label?: string;
+};
+
 export const PageLoader = ({
   isLoading,
+  variant = 'default',
+  label,
   ...rest
-}: FlexProps & { isLoading: boolean }) => {
+}: LoaderProps) => {
+  const { statusProps, statusText } = useLoaderStatus(isLoading, label);
   return (
     <Flex
       position="fixed"
@@ -22,11 +40,17 @@ export const PageLoader = ({
       transitionProperty="opacity"
       bg="bg.canvas"
       zIndex={9999}
+      {...statusProps}
       {...rest}
     >
-      <Box position="relative">
-        <Spinner boxSize="60px" borderWidth="6px" css={{ zIndex: 999 }} />
-      </Box>
+      {statusText}
+      {variant === 'thinking' ? (
+        <ThinkingDots />
+      ) : (
+        <Box position="relative">
+          <Spinner boxSize="60px" borderWidth="6px" css={{ zIndex: 999 }} />
+        </Box>
+      )}
     </Flex>
   );
 };

package/src/components/Loaders/SectionLoader.stories.tsx

@@ -11,15 +11,22 @@ const meta = {
   },
   render: (args) => {
     return (
-      <Box p="128px" bg="primary.lighter">
+      <Box p="128px" bg="primary.washActive">
         <SectionLoader {...args} />
       </Box>
     );
-  }
+  },
 } satisfies Meta<typeof SectionLoader>;
 
 export default meta;
 
 type Story = StoryObj<typeof SectionLoader>;
 
-export const Basic: Story = {}
+export const Basic: Story = {};
+
+export const Thinking: Story = {
+  args: {
+    isLoading: true,
+    variant: 'thinking',
+  },
+};

package/src/components/Loaders/SectionLoader.tsx

@@ -1,11 +1,18 @@
-import { Flex, FlexProps } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 
 import { Spinner } from '@/components/Spinner';
 
+import { useLoaderStatus } from './LoaderStatus';
+import type { LoaderProps } from './PageLoader';
+import { ThinkingDots } from './ThinkingDots';
+
 export const SectionLoader = ({
   isLoading,
+  variant = 'default',
+  label,
   ...rest
-}: FlexProps & { isLoading: boolean }) => {
+}: LoaderProps) => {
+  const { statusProps, statusText } = useLoaderStatus(isLoading, label);
   if (!isLoading) return;
   return (
     <Flex
@@ -20,9 +27,15 @@ export const SectionLoader = ({
       animationStyle="feedback"
       transitionProperty="opacity"
       zIndex={9999}
+      {...statusProps}
       {...rest}
     >
-      <Spinner boxSize="60px" borderWidth="6px" />
+      {statusText}
+      {variant === 'thinking' ? (
+        <ThinkingDots />
+      ) : (
+        <Spinner boxSize="60px" borderWidth="6px" />
+      )}
     </Flex>
   );
 };

package/src/components/Loaders/ThinkingDots.tsx

@@ -0,0 +1,27 @@
+import { Box, HStack } from '@chakra-ui/react';
+
+import { THINKING_DOT_STAGGER, thinkingDotAnimation } from './Loaders.styles';
+
+/**
+ * Three coral (`action.mark`) dots pulsing in sequence — the `thinking`
+ * loader variant. ARIA lives on the loader shell that renders this, not
+ * here, so it stays a pure decoration.
+ */
+export const ThinkingDots = () => (
+  <HStack gap="1.5" aria-hidden="true">
+    {[0, 1, 2].map((index) => (
+      <Box
+        key={index}
+        boxSize="8px"
+        borderRadius="full"
+        bg="action.mark"
+        css={{
+          ...thinkingDotAnimation,
+          animationDelay: `calc(${THINKING_DOT_STAGGER} * ${index})`,
+        }}
+      />
+    ))}
+  </HStack>
+);
+
+ThinkingDots.displayName = 'ThinkingDots';

package/src/components/Loaders/index.ts

@@ -1,2 +1,3 @@
-export { PageLoader } from './PageLoader';
+export { type LoaderProps, type LoaderVariant, PageLoader } from './PageLoader';
 export { SectionLoader } from './SectionLoader';
+export { ThinkingDots } from './ThinkingDots';