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

package/src/components/IconButton/IconButton.styles.ts

@@ -1,42 +1,119 @@
 import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 
+import { disabledControl, disabledText } from '@/utils/disabledControl';
+
+import { resolveLegacyButtonVariant } from '../Button/Button.legacy';
 import {
   buttonColorPalettes,
-  buttonColorPaletteStyles,
-  buttonVariants,
+  buttonVariantStyles,
 } from '../Button/Button.styles';
-import { ButtonColorPalette, ButtonVariant } from '../Button/Button.types';
-
-export {
-  buttonColorPalettes as iconButtonColorPalettes,
-  buttonColorPalettes as iconButtonColorSchemes, // Deprecated
-  buttonVariants as iconButtonVariants,
-};
+import {
+  ButtonColorPalette,
+  LegacyButtonVariant,
+} from '../Button/Button.types';
+import { IconButtonVariant } from './IconButton.types';
 
 type StyleProps = Partial<ChakraButtonProps>;
 
+const PRESSED = '0.97';
+
 /**
- * Override certain Button styles that don't apply to IconButton.
+ * IconButton styles per role (prototype gallery `.ib`, `.ib.secondary`,
+ * `.ib.primary`, `.send`).
+ *
+ * The filled roles reuse Button's so the two never drift; the icon-only roles
+ * differ from Button's ghost/secondary in one way — the resting glyph is
+ * `fg.icon` (3:1 non-text) and darkens to `fg.default` on hover.
  */
-export const iconButtonColorPaletteStyles: Record<
-  ButtonColorPalette,
-  Record<ButtonVariant, StyleProps>
-> = {
-  ...buttonColorPaletteStyles,
-  neutral: {
-    ...buttonColorPaletteStyles.neutral,
-    ghost: {
-      ...buttonColorPaletteStyles.neutral.ghost,
-      color: 'fg.subtle',
-    },
+export const iconButtonVariantStyles: Record<IconButtonVariant, StyleProps> = {
+  ghost: {
+    borderColor: 'transparent',
+    bgColor: 'transparent',
+    color: 'fg.icon',
+    _hover: { bgColor: 'primary.wash', color: 'fg.default' },
+    _active: { bgColor: 'primary.washActive', scale: PRESSED },
+    _disabled: { ...disabledText },
+  },
+  secondary: {
+    borderColor: 'border.default',
+    bgColor: 'transparent',
+    color: 'fg.icon',
+    _hover: { bgColor: 'primary.wash', color: 'fg.default' },
+    _active: { bgColor: 'primary.washActive', scale: PRESSED },
+    _disabled: { ...disabledControl },
+  },
+  primary: buttonVariantStyles.primary,
+  danger: buttonVariantStyles.danger,
+  /** The coral SEND button. */
+  action: {
+    borderColor: 'transparent',
+    bgColor: 'send.bg',
+    color: 'send.fg',
+    _hover: { bgColor: 'send.bgHover' },
+    _active: { bgColor: 'send.bgActive', scale: PRESSED },
+    _disabled: { ...disabledControl },
   },
 };
 
-export {
-  iconButtonColorPaletteStyles as iconButtonColorSchemeStyles, // Deprecated
-};
+export const iconButtonVariants: IconButtonVariant[] = [
+  'ghost',
+  'secondary',
+  'primary',
+  'danger',
+  'action',
+];
+
+/** `isDestructive` recolours the glyph on these only. */
+const destructiveCapable: readonly IconButtonVariant[] = ['ghost', 'secondary'];
 
 export const getIconButtonStyles = (
-  colorPalette: ButtonColorPalette = 'neutral',
-  variant: ButtonVariant = 'ghost'
-): StyleProps => iconButtonColorPaletteStyles[colorPalette][variant];
+  variant: IconButtonVariant = 'ghost',
+  isDestructive = false
+): StyleProps => {
+  const base =
+    iconButtonVariantStyles[variant] ?? iconButtonVariantStyles.ghost;
+  if (!isDestructive || !destructiveCapable.includes(variant)) return base;
+  return {
+    ...base,
+    color: 'danger.fg',
+    _hover: { ...(base._hover as object), color: 'danger.fg' },
+  };
+};
+
+const legacyVariants: LegacyButtonVariant[] = [
+  'solid',
+  'soft',
+  'outline',
+  'ghost',
+];
+
+/**
+ * @deprecated 4.x grid, derived from `iconButtonVariantStyles` through the
+ * IconButton column of the codemod table. Use `iconButtonVariantStyles`.
+ */
+export const iconButtonColorPaletteStyles = Object.fromEntries(
+  buttonColorPalettes.map((palette) => [
+    palette,
+    Object.fromEntries(
+      legacyVariants.map((variant) => {
+        const mapped = resolveLegacyButtonVariant('icon', palette, variant);
+        return [
+          variant,
+          getIconButtonStyles(
+            mapped.variant as IconButtonVariant,
+            mapped.isDestructive
+          ),
+        ];
+      })
+    ),
+  ])
+) as Record<ButtonColorPalette, Record<LegacyButtonVariant, StyleProps>>;
+
+export {
+  /** @deprecated 5.0 removed `colorPalette`. */
+  buttonColorPalettes as iconButtonColorPalettes,
+  /** @deprecated 5.0 removed `colorPalette`. */
+  buttonColorPalettes as iconButtonColorSchemes,
+  /** @deprecated Use iconButtonVariantStyles. */
+  iconButtonColorPaletteStyles as iconButtonColorSchemeStyles,
+};

package/src/components/IconButton/IconButton.tsx

@@ -3,33 +3,60 @@ import { IconButton as ChakraIconButton } from '@chakra-ui/react';
 
 import { focusRing } from '@/utils/focusRing';
 
+import { polymorphic } from '../../types/polymorphic';
+import {
+  isLegacyButtonProps,
+  resolveLegacyButtonVariant,
+  warnLegacyButtonProps,
+} from '../Button/Button.legacy';
+import { buttonTransition } from '../Button/Button.styles';
 import { getIconButtonStyles } from './IconButton.styles';
-import { IconButtonProps } from './IconButton.types';
+import {
+  IconButtonOwnProps,
+  IconButtonProps,
+  IconButtonVariant,
+} from './IconButton.types';
 
 /**
- * IconButton component with two-dimensional variant system.
- *
- * Uses the same `colorPalette` and `variant` system as Button
- * for consistent styling across the design system.
+ * IconButton — one `variant` role per button (5.0 BAZE palette).
  *
  * @example
  * ```tsx
- * <IconButton colorPalette="primary" variant="soft"><Icon /></IconButton>
- * <IconButton colorPalette="danger" variant="solid"><Icon /></IconButton>
- * <IconButton colorPalette="neutral" variant="ghost"><Icon /></IconButton>
+ * <IconButton aria-label="닫기"><XIcon /></IconButton> // ghost
+ * <IconButton aria-label="삭제" isDestructive><TrashIcon /></IconButton>
+ * <IconButton aria-label="추가" variant="primary"><PlusIcon /></IconButton>
+ * <IconButton aria-label="보내기" variant="action"><SendIcon /></IconButton>
  * ```
  */
-export const IconButton = forwardRef(
+const IconButtonImpl = forwardRef(
   (
     {
-      colorPalette = 'neutral',
-      variant = 'ghost',
+      variant: variantProp,
+      isDestructive: isDestructiveProp = false,
       children,
-      ...rest
+      ...restWithLegacy
     }: IconButtonProps,
     ref?: ForwardedRef<HTMLButtonElement>
   ) => {
-    const styles = getIconButtonStyles(colorPalette, variant);
+    // 4.x `colorPalette` / old variant names from untyped callers — mapped,
+    // never forwarded to Chakra. See `Button.legacy.ts`.
+    const { colorPalette: legacyPalette, ...rest } =
+      restWithLegacy as typeof restWithLegacy & { colorPalette?: unknown };
+
+    let variant: IconButtonVariant = variantProp ?? 'ghost';
+    let isDestructive = isDestructiveProp;
+    if (isLegacyButtonProps('icon', legacyPalette, variantProp)) {
+      const resolved = resolveLegacyButtonVariant(
+        'icon',
+        legacyPalette,
+        variantProp
+      );
+      warnLegacyButtonProps('IconButton', legacyPalette, variantProp, resolved);
+      variant = resolved.variant as IconButtonVariant;
+      isDestructive = isDestructive || resolved.isDestructive;
+    }
+
+    const styles = getIconButtonStyles(variant, isDestructive);
 
     return (
       <ChakraIconButton
@@ -38,6 +65,14 @@ export const IconButton = forwardRef(
         rounded="full"
         {...styles}
         {...focusRing}
+        // Same press as Button: it inherits the `_active` scale from the shared
+        // styles, but Chakra's `common` transition list has no `scale`, so the
+        // press used to snap. Same clock and reduced-motion guard as Button.
+        scale="1"
+        transition={buttonTransition}
+        animationStyle="composite"
+        data-variant={variant}
+        data-destructive={isDestructive || undefined}
         {...rest}
       >
         {children}
@@ -46,4 +81,7 @@ export const IconButton = forwardRef(
   }
 );
 
-IconButton.displayName = 'IconButton';
+/** Type-level polymorphism over the same runtime — see the note on `Button`. */
+IconButtonImpl.displayName = 'IconButton';
+
+export const IconButton = polymorphic<IconButtonOwnProps>(IconButtonImpl);

package/src/components/IconButton/IconButton.types.ts

@@ -1,11 +1,15 @@
+import type { ElementType } from 'react';
 import { IconButtonProps as ChakraIconButtonProps } from '@chakra-ui/react';
 
+import type { PolymorphicProps } from '../../types/polymorphic';
+
 // Re-export Button types for consistency
 export type { ButtonVariant } from '../Button/Button.types';
 
 /**
- * IconButton color scheme - reuses Button color schemes.
- * @see ButtonColorScheme
+ * @deprecated 5.0 removed the colour axis — `colorPalette` is no longer an
+ * IconButton prop. Use a `variant` role (and `isDestructive`). Kept only so
+ * existing type imports get a deprecation instead of a hard error.
  */
 export type IconButtonColorPalette =
   | 'primary'
@@ -16,39 +20,62 @@ export type IconButtonColorPalette =
   | 'neutral';
 
 /**
- * IconButton variant - reuses Button variants.
- * @see ButtonVariant
+ * IconButton variant (5.0 BAZE palette).
+ *
+ * - `ghost` (default): icon in `fg.icon`, warm wash on hover
+ * - `secondary`: same, with a `border.default` outline
+ * - `primary`: BAZE black fill
+ * - `danger`: red fill
+ * - `action`: the coral SEND button (`send.*`) — chat composers
  */
-export type IconButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
+export type IconButtonVariant =
+  | 'ghost'
+  | 'secondary'
+  | 'primary'
+  | 'danger'
+  | 'action';
 
 /**
- * IconButton props with two-dimensional variant system.
+ * IconButton props.
  *
- * Uses the same `colorPalette` and `variant` system as Button
- * for consistent styling across the design system.
- *
- * @note Overrides Chakra UI's `variant` and `colorPalette` props.
+ * @note Overrides Chakra UI's `variant`; Chakra's `colorPalette` /
+ *       `colorScheme` are not accepted.
  *
  * @example
  * ```tsx
- * <IconButton colorPalette="primary" variant="solid"><Icon /></IconButton>
- * <IconButton colorPalette="danger" variant="soft"><Icon /></IconButton>
+ * <IconButton aria-label="닫기"><XIcon /></IconButton>
+ * <IconButton aria-label="삭제" isDestructive><TrashIcon /></IconButton>
+ * <IconButton aria-label="보내기" variant="action"><ArrowUpIcon /></IconButton>
  * ```
  */
-export type IconButtonProps = Omit<
+export type IconButtonOwnProps = Omit<
   ChakraIconButtonProps,
-  'variant' | 'colorPalette' | 'colorScheme' | 'icon'
+  'variant' | 'colorPalette' | 'colorScheme' | 'icon' | 'as'
 > & {
   /**
-   * The color scheme of the icon button (semantic color family).
-   * Overrides Chakra UI's colorPalette prop.
-   * @default 'primary'
-   */
-  colorPalette?: IconButtonColorPalette;
-  /**
-   * The visual variant of the icon button (fill style).
+   * The role of the icon button.
    * Overrides Chakra UI's variant prop.
-   * @default 'solid'
+   * @default 'ghost'
    */
   variant?: IconButtonVariant;
+  /**
+   * Danger-coloured icon (`danger.fg`) for `ghost` / `secondary` — a delete
+   * icon in a row. Ignored on filled variants.
+   * @default false
+   */
+  isDestructive?: boolean;
 };
+
+/**
+ * Props for `IconButton`, typed for whatever element `as` renders.
+ *
+ * Defaults to `'button'`, so `IconButtonProps` on its own is unchanged. Same
+ * shape and same reasoning as `ButtonProps` — see `Button.types.ts` and
+ * `src/types/polymorphic.ts`.
+ *
+ * ```tsx
+ * <IconButton as="a" href={file} download aria-label="내려받기"><Icon /></IconButton>
+ * ```
+ */
+export type IconButtonProps<TElement extends ElementType = 'button'> =
+  PolymorphicProps<TElement, IconButtonOwnProps>;

package/src/components/IconButton/index.tsx

@@ -4,9 +4,11 @@ export {
   iconButtonColorPalettes,
   iconButtonColorPaletteStyles,
   iconButtonVariants,
+  iconButtonVariantStyles,
 } from './IconButton.styles';
 export type {
   IconButtonColorPalette,
+  IconButtonOwnProps,
   IconButtonProps,
   IconButtonVariant,
 } from './IconButton.types';

package/src/components/InfoSprinkle/InfoSprinkle.tsx

@@ -51,7 +51,6 @@ export const InfoSprinkle = ({
         <IconButton
           aria-label="Info"
           opacity={0.5}
-          transition="opacity 0.2s"
           _hover={{ opacity: 1, ...(iconButtonProps?._hover as any) }}
           {...iconButtonProps}
           onClick={(e) => {

package/src/components/InlineCode/InlineCode.tsx

@@ -7,16 +7,23 @@ export const InlineCode = ({ children, ...rest }: ChakraCodeProps) => {
   return (
     <ChakraCode
       bg="bg.subtle"
-      color="primary.dark"
-      borderRadius="sm"
-      textStyle="p"
-      // bg.subtle (gray.50) matches the bg.sunken page wash, so on a sunken
-      // page the chip fill vanishes. The chip is too small for a fill bump to
+      color="fg.default"
+      // `xs` (4px) rather than `sm` (6px): on the small, now-shorter chip a 6px
+      // radius reads a little bubbly; the tighter corner is crisper inline.
+      borderRadius="xs"
+      // `subtext` rather than `p`: inline code reads a step below body text so
+      // its chip (padding + ring) and the mono face's larger x-height don't make
+      // it bulge in running prose. `subtext` is the same tier as `p` — same
+      // family/weight/line-height — only one size down, so this changes size
+      // only (a mono override passed by callers still wins, as with `p`).
+      textStyle="subtext"
+      // bg.subtle matches the bg.sunken page wash, so on a sunken page the
+      // chip fill vanishes. The chip is too small for a fill bump to
       // register, so (like SegmentedControl) it gets an outline instead — a
-      // border.default ring, kept lighter than border.strong so it doesn't read
-      // as a heavy box inline in running text. Box-shadow so inline flow and
+      // border.subtle ring, the lightest border role, so it doesn't read as a
+      // heavy box inline in running text. Box-shadow so inline flow and
       // sizing are untouched.
-      boxShadow="0 0 0 1px var(--chakra-colors-border-default)"
+      boxShadow="0 0 0 1px var(--chakra-colors-border-subtle)"
       {...rest}
     >
       {children}

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

@@ -2,7 +2,7 @@ import { Stack, Box, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { IoCall, IoSearch, IoIosMail } from '@/components/Icon';
+import { PhoneFilledIcon, SearchIcon, MailIcon } from '@/components/Icon';
 import { MaxLengthIndicator } from '../MaxLengthIndicator';
 
 import { Input } from './Input';
@@ -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: <IoCall color="gray.300" />,
+    leftIcon: <PhoneFilledIcon color="fg.icon" />,
   },
 };
 
@@ -157,15 +157,15 @@ export const RightIcon: Story = {
     placeholder: 'Search...',
     size: 'md',
     disabled: false,
-    rightIcon: <IoSearch color="gray.300" />,
+    rightIcon: <SearchIcon color="fg.icon" />,
   },
 };
 
 export const BothIcons: Story = {
   args: {
     placeholder: 'Email address',
-    leftIcon: <IoIosMail color="gray.300" />,
-    rightIcon: <IoSearch 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

@@ -9,6 +9,8 @@ import {
 } from 'react';
 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';
 
@@ -322,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={{
@@ -349,18 +354,17 @@ 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}
           css={mergeCss(
+            noZoomOnFocus,
             {
               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);
+    });
+  });
+});