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

package/src/components/Chip/Chip.stories.tsx

@@ -1,39 +1,22 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Chip, colorSchemes, variants } from '.';
+import { Chip } from '.';
 
 /**
- * A chip component for displaying tags, labels, or status indicators.
+ * **Deprecated since 5.0** — `Chip` is a thin alias of `Tag` and is removed in
+ * 6.0. These stories only show that unmigrated call sites still render; new
+ * code uses `Tag` (`tone`, `selected`, `category`).
  *
- * Uses a two-dimensional variant system:
- * - `colorScheme`: What semantic color (primary, secondary, danger, etc.)
- * - `variant`: How it looks visually (solid, soft, outline)
+ * Mapping: `outline` → neutral · `primary` + `solid` → `selected` ·
+ * `danger` / `success` / `warning` → that `tone` · everything else → neutral.
  */
 const meta = {
-  title: 'Components/Chip',
+  title: 'Components/Chip (deprecated)',
   component: Chip,
   tags: ['autodocs'],
   args: {
     children: 'Chip',
-    colorScheme: 'primary',
-    variant: 'soft',
-  },
-  argTypes: {
-    colorScheme: {
-      control: 'select',
-      options: colorSchemes,
-      description: 'The semantic color of the chip',
-    },
-    variant: {
-      control: 'select',
-      options: variants,
-      description: 'The visual style of the chip',
-    },
-    children: {
-      control: 'text',
-      description: 'The content of the chip',
-    },
   },
 } satisfies Meta<typeof Chip>;
 
@@ -41,223 +24,27 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-/**
- * Default chip with primary color and soft variant.
- */
 export const Default: Story = {};
 
-/**
- * Primary color chips in different variants.
- */
-export const Primary: Story = {
+/** 4.x props on the left of each pair render as the 5.0 Tag on the right. */
+export const LegacyMapping: Story = {
   render: () => (
-    <Flex gap={3} align="center">
-      <Chip colorScheme="primary" variant="solid">
-        Solid
-      </Chip>
+    <Flex gap={3} wrap="wrap" align="center">
       <Chip colorScheme="primary" variant="soft">
-        Soft
-      </Chip>
-      <Chip colorScheme="primary" variant="outline">
-        Outline
-      </Chip>
-    </Flex>
-  ),
-};
-
-/**
- * Secondary color chips in different variants.
- */
-export const Secondary: Story = {
-  render: () => (
-    <Flex gap={3} align="center">
-      <Chip colorScheme="secondary" variant="solid">
-        Solid
-      </Chip>
-      <Chip colorScheme="secondary" variant="soft">
-        Soft
-      </Chip>
-      <Chip colorScheme="secondary" variant="outline">
-        Outline
+        primary soft → neutral
       </Chip>
-    </Flex>
-  ),
-};
-
-/**
- * Danger color chips for error states.
- */
-export const Danger: Story = {
-  render: () => (
-    <Flex gap={3} align="center">
-      <Chip colorScheme="danger" variant="solid">
-        Error
+      <Chip colorScheme="primary" variant="solid">
+        primary solid → selected
       </Chip>
       <Chip colorScheme="danger" variant="soft">
-        Error
-      </Chip>
-      <Chip colorScheme="danger" variant="outline">
-        Error
+        danger → tone danger
       </Chip>
-    </Flex>
-  ),
-};
-
-/**
- * Success color chips for completed states.
- */
-export const Success: Story = {
-  render: () => (
-    <Flex gap={3} align="center">
       <Chip colorScheme="success" variant="solid">
-        Completed
-      </Chip>
-      <Chip colorScheme="success" variant="soft">
-        Completed
-      </Chip>
-      <Chip colorScheme="success" variant="outline">
-        Completed
-      </Chip>
-    </Flex>
-  ),
-};
-
-/**
- * Warning color chips for pending states.
- */
-export const Warning: Story = {
-  render: () => (
-    <Flex gap={3} align="center">
-      <Chip colorScheme="warning" variant="solid">
-        Pending
-      </Chip>
-      <Chip colorScheme="warning" variant="soft">
-        Pending
+        success → tone success
       </Chip>
       <Chip colorScheme="warning" variant="outline">
-        Pending
-      </Chip>
-    </Flex>
-  ),
-};
-
-/**
- * Neutral color chips for default states.
- */
-export const Neutral: Story = {
-  render: () => (
-    <Flex gap={3} align="center">
-      <Chip colorScheme="neutral" variant="solid">
-        Draft
-      </Chip>
-      <Chip colorScheme="neutral" variant="soft">
-        Draft
+        outline → neutral
       </Chip>
-      <Chip colorScheme="neutral" variant="outline">
-        Draft
-      </Chip>
-    </Flex>
-  ),
-};
-
-/**
- * Shows all combinations of colorScheme × variant in a matrix layout.
- */
-export const AllCombinations: Story = {
-  render: () => (
-    <Box>
-      {/* Header row */}
-      <Flex mb={4} gap={4} align="center">
-        <Box w="100px" />
-        {variants.map((variant) => (
-          <Box key={variant} w="100px" textAlign="center">
-            <Text fontWeight="bold" textStyle="subtext">
-              {variant}
-            </Text>
-          </Box>
-        ))}
-      </Flex>
-
-      {/* Color scheme rows */}
-      {colorSchemes.map((colorScheme) => (
-        <Flex key={colorScheme} mb={4} gap={4} align="center">
-          <Box w="100px">
-            <Text fontWeight="medium" textStyle="subtext">
-              {colorScheme}
-            </Text>
-          </Box>
-          {variants.map((variant) => (
-            <Box key={`${colorScheme}-${variant}`} w="100px" textAlign="center">
-              <Chip colorScheme={colorScheme} variant={variant}>
-                Chip
-              </Chip>
-            </Box>
-          ))}
-        </Flex>
-      ))}
-    </Box>
-  ),
-};
-
-/**
- * Chips in use cases with labels.
- */
-export const UseCases: Story = {
-  render: () => (
-    <Flex direction="column" gap={6}>
-      <Box>
-        <Text mb={2} fontWeight="bold">
-          Status indicators:
-        </Text>
-        <Flex gap={2} wrap="wrap">
-          <Chip colorScheme="success" variant="soft">
-            Active
-          </Chip>
-          <Chip colorScheme="warning" variant="soft">
-            Pending
-          </Chip>
-          <Chip colorScheme="danger" variant="soft">
-            Inactive
-          </Chip>
-          <Chip colorScheme="neutral" variant="soft">
-            Draft
-          </Chip>
-        </Flex>
-      </Box>
-
-      <Box>
-        <Text mb={2} fontWeight="bold">
-          Category tags:
-        </Text>
-        <Flex gap={2} wrap="wrap">
-          <Chip colorScheme="primary" variant="outline">
-            React
-          </Chip>
-          <Chip colorScheme="secondary" variant="outline">
-            TypeScript
-          </Chip>
-          <Chip colorScheme="success" variant="outline">
-            Chakra UI
-          </Chip>
-        </Flex>
-      </Box>
-
-      <Box>
-        <Text mb={2} fontWeight="bold">
-          Priority levels:
-        </Text>
-        <Flex gap={2} wrap="wrap">
-          <Chip colorScheme="danger" variant="solid">
-            High
-          </Chip>
-          <Chip colorScheme="warning" variant="solid">
-            Medium
-          </Chip>
-          <Chip colorScheme="neutral" variant="solid">
-            Low
-          </Chip>
-        </Flex>
-      </Box>
     </Flex>
   ),
 };

package/src/components/Chip/Chip.tsx

@@ -1,38 +1,50 @@
 import { ForwardedRef, forwardRef } from 'react';
-import { Badge as ChakraBadge } from '@chakra-ui/react';
-
-import { focusRing } from '@/utils/focusRing';
 
 import { polymorphic } from '../../types/polymorphic';
-import { baseStyles, getChipStyles } from './Chip.styles';
+import { Tag } from '../Tag/Tag';
 import { ChipOwnProps } from './Chip.types';
 
 /**
- * A chip component for displaying tags, labels, or status indicators.
- *
- * Uses a two-dimensional variant system:
- * - `colorScheme`: What semantic color (primary, secondary, danger, etc.)
- * - `variant`: How it looks visually (solid, soft, outline)
+ * @deprecated Since 5.0 `Chip` is a thin alias of `Tag` and will be removed in
+ * 6.0. Replace `<Chip colorScheme="danger" variant="soft">` with
+ * `<Tag tone="danger">`, a "solid" (primary / secondary / neutral) chip with
+ * `<Tag as="button" selected>`, and everything else with `<Tag>`. Full table:
+ * `mapLegacyTagProps`. Warns once per colorScheme × variant in development.
  *
- * @example
- * ```tsx
- * <Chip colorScheme="primary" variant="solid">Active</Chip>
- * <Chip colorScheme="danger" variant="soft">Error</Chip>
- * <Chip colorScheme="success" variant="outline">Completed</Chip>
- * ```
+ * The alias keeps Chip's pill shape (32px radius, roomier padding) so an
+ * unmigrated screen does not shift.
  */
 const ChipImpl = forwardRef(
   (
-    { colorScheme = 'primary', variant = 'soft', ...rest }: ChipOwnProps,
-    ref?: ForwardedRef<HTMLButtonElement>
+    {
+      colorScheme,
+      colorPalette,
+      variant = 'soft',
+      tone,
+      selected,
+      ...rest
+    }: ChipOwnProps,
+    ref?: ForwardedRef<HTMLDivElement>
   ) => {
-    const styles = getChipStyles(colorScheme, variant);
-
+    // Tag owns the mapping (see `mapLegacyTagProps`) and the once-per-combo
+    // dev warning; Chip only supplies its 4.x defaults (primary / soft) and
+    // its name. Passing the pair through, rather than a mapped `selected`,
+    // keeps a "solid" Chip a selected *look* without turning it into a toggle.
+    const legacy = {
+      colorPalette: colorScheme ?? colorPalette ?? 'primary',
+      variant,
+      __legacyComponent: 'Chip',
+    } as object;
     return (
-      <ChakraBadge
-        {...baseStyles}
-        {...styles}
-        {...focusRing}
+      <Tag
+        borderRadius="32px"
+        px={3}
+        py={2}
+        fontWeight="medium"
+        textTransform="none"
+        tone={tone}
+        selected={selected}
+        {...legacy}
         {...rest}
         ref={ref}
       />
@@ -42,5 +54,9 @@ const ChipImpl = forwardRef(
 
 ChipImpl.displayName = 'Chip';
 
-/** Type-level polymorphism over the same runtime — see `polymorphic`. */
+/**
+ * @deprecated Use `Tag`. Removed in 6.0.
+ *
+ * Type-level polymorphism over the same runtime — see `polymorphic`.
+ */
 export const Chip = polymorphic<ChipOwnProps, 'span'>(ChipImpl);

package/src/components/Chip/Chip.types.ts

@@ -1,18 +1,13 @@
 import type { ElementType } from 'react';
-import { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
 
 // Relative, NOT `@/types/*` — see `src/types/polymorphic.ts`.
 import type { PolymorphicProps } from '../../types/polymorphic';
+import type { TagOwnProps } from '../Tag/Tag.types';
 
 /**
- * Chip color schemes - determines the semantic color of the chip.
- *
- * This prop overrides Chakra UI's native `colorScheme` prop to provide
- * a controlled set of color options that align with our design system.
- *
- * @example
- * <Chip colorScheme="primary" variant="solid">Primary</Chip>
- * <Chip colorScheme="danger" variant="soft">Error</Chip>
+ * 4.x Chip colour schemes, mapped onto Tag at runtime.
+ * @deprecated `Chip` is now an alias of `Tag` — use `tone` / `selected` /
+ * `category` on `Tag`. Removed in 6.0.
  */
 export type ChipColorScheme =
   | 'primary'
@@ -23,34 +18,51 @@ export type ChipColorScheme =
   | 'neutral';
 
 /**
- * Chip variants - determines the visual style of the chip.
- *
- * - solid: Filled background with contrasting text
- * - soft: Light background tint with darker text
- * - outline: Transparent background with colored border
+ * 4.x Chip variants, mapped onto Tag at runtime.
+ * @deprecated Use `Tag`. Removed in 6.0.
  */
 export type ChipVariant = 'solid' | 'soft' | 'outline';
 
 /**
- * ChipProps uses a two-dimensional variant system:
- * - `colorScheme`: What semantic color (primary, secondary, danger, etc.)
- * - `variant`: How it looks visually (solid, soft, outline)
+ * @deprecated `Chip` is an alias of `Tag` since 5.0 — use `TagOwnProps`.
+ * Removed in 6.0.
+ *
+ * `colorScheme` / `variant` / `colorPalette` are still in the type ONLY so
+ * unmigrated 4.x call sites keep compiling; they are deprecated aliases,
+ * mapped at runtime by `mapLegacyTagProps` (with a once-per-combination dev
+ * warning) and removed with Chip in 6.0:
+ *
+ * - `primary` / `secondary` / `neutral` × `soft` (default) or `outline` → neutral
+ * - `primary` / `secondary` / `neutral` × `solid` → `selected` (look only — not
+ *   a toggle unless `selected` is passed explicitly)
+ * - `danger` / `success` / `warning` × `soft` → that `tone`
+ * - `danger` / `success` / `warning` × `solid` → that `tone` (no solid fill
+ *   in 5.0 — warns "choose by hand")
+ * - `danger` / `success` / `warning` × `outline` → neutral (warns "choose by hand")
  *
- * This matches the Button component's architecture for consistency.
+ * New Tag props (`tone`, `selected`, `category`) win when given.
  */
-export type ChipOwnProps = Omit<
-  ChakraBadgeProps,
-  'colorScheme' | 'variant' | 'as'
-> & {
+export type ChipOwnProps = TagOwnProps & {
+  /**
+   * @deprecated 4.x alias, mapped at runtime — use Tag's `tone` / `selected`.
+   * Defaults to `primary` (the 4.x Chip default).
+   */
   colorScheme?: ChipColorScheme;
+  /**
+   * @deprecated 4.x alias, mapped at runtime — use Tag's `selected` (for
+   * `solid`) or nothing. Defaults to `soft`.
+   */
   variant?: ChipVariant;
+  /**
+   * @deprecated 4.x alias of `colorScheme` (Chakra's palette prop), mapped
+   * at runtime. `colorScheme` wins when both are given.
+   */
+  colorPalette?: ChipColorScheme;
 };
 
 /**
- * Props for `Chip`, typed for whatever element `as` renders. Defaults to
- * `'span'`, so the bare type is unchanged. A filter chip that navigates is the
- * case that needs this — as a real link it keeps middle-click and
- * open-in-new-tab.
+ * @deprecated `Chip` is an alias of `Tag` since 5.0 — use `TagProps`.
+ * Removed in 6.0.
  */
 export type ChipProps<TElement extends ElementType = 'span'> = PolymorphicProps<
   TElement,

package/src/components/Chip/index.ts

@@ -1,10 +1,4 @@
 export { Chip } from './Chip';
-export {
-  colorSchemes,
-  colorSchemeStyles,
-  getChipStyles,
-  variants,
-} from './Chip.styles';
 export type {
   ChipColorScheme,
   ChipOwnProps,

package/src/components/Code/Code.tsx

@@ -97,7 +97,7 @@ export const Code = ({
       cursor="pointer"
     >
       <ChakraCodeBlock.CopyIndicator
-        copied={<FaCheck color="success.main" boxSize="xs" />}
+        copied={<FaCheck color="success.fg" boxSize="xs" />}
       />
     </ChakraCodeBlock.CopyTrigger>
   ) : null;
@@ -157,13 +157,12 @@ export const Code = ({
                   : String(translate('copy'))
               }
               size="sm"
-              colorPalette="neutral"
               variant="ghost"
               color="fg.muted"
               onClick={handleOverlayCopy}
             >
               {isCopied ? (
-                <FaCheck color="success.main" boxSize="xs" />
+                <FaCheck color="success.fg" boxSize="xs" />
               ) : (
                 <FaRegCopy boxSize="xs" />
               )}

package/src/components/CodeTabs/CodeTabs.contrast.test.tsx

@@ -0,0 +1,109 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '@/theme';
+import { ROLE_TOKEN_PATHS } from '@/theme/colors';
+import { SCHEMES } from '@/theme/palette.generated';
+
+import { CodeTabs } from './CodeTabs';
+import { CODE_CHROME } from './CodeTabs.styles';
+
+/**
+ * The tab bar sits on Shiki `github-dark`, which is dark in both app modes, so
+ * the chrome has to be too. It read `bg.inverse` (= `tooltip.bg`: near-black in
+ * light, light sand in dark) with flipping `fg.muted` labels — ~1.4:1 in light
+ * and ~1.1:1 in dark.
+ *
+ * jsdom cannot resolve a `_dark` conditional into a colour, so the palette is
+ * measured from the generated scheme table for the token names the component
+ * reads, and a render check pins that the component reads them.
+ */
+type Mode = 'light' | 'dark' | 'hcLight' | 'hcDark';
+const MODES: Mode[] = ['light', 'dark', 'hcLight', 'hcDark'];
+type Scheme = keyof typeof SCHEMES;
+
+const BY_PATH = Object.fromEntries(
+  Object.entries(ROLE_TOKEN_PATHS).map(([flat, path]) => [path, flat])
+) as Record<string, keyof (typeof SCHEMES)['ink']['light']>;
+
+const rgb = (hex: string) =>
+  [0, 2, 4].map((i) => parseInt(hex.replace('#', '').slice(i, i + 2), 16));
+
+const luminance = ([r, g, b]: number[]) => {
+  const [R, G, B] = [r, g, b].map((v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+};
+
+const contrast = (a: number[], b: number[]) => {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+};
+
+/** Token (optionally `token/NN` alpha) → rgb, composited over `under`. */
+const resolve = (
+  scheme: Scheme,
+  mode: Mode,
+  token: string,
+  under?: number[]
+) => {
+  const [path, alpha] = token.split('/');
+  const flat = BY_PATH[path];
+  if (!flat) throw new Error(`no scheme entry for ${path}`);
+  const value = rgb(SCHEMES[scheme][mode][flat]);
+  if (!alpha) return value;
+  const t = Number(alpha) / 100;
+  return value.map((v, i) => v * t + under![i] * (1 - t));
+};
+
+const WHITE = [255, 255, 255];
+
+describe('CodeTabs chrome palette', () => {
+  for (const scheme of Object.keys(SCHEMES) as Scheme[]) {
+    for (const mode of MODES) {
+      it(`${scheme} ${mode}: dark surface, labels ≥ 4.5:1`, () => {
+        const bg = resolve(scheme, mode, CODE_CHROME.bg);
+        const hover = resolve(scheme, mode, CODE_CHROME.bgHover);
+        // Dark in every mode: light text on it, like github-dark's own ground.
+        expect(contrast(bg, WHITE)).toBeGreaterThan(7);
+
+        const fg = resolve(scheme, mode, CODE_CHROME.fg);
+        expect(contrast(fg, bg)).toBeGreaterThanOrEqual(4.5);
+        expect(contrast(fg, hover)).toBeGreaterThanOrEqual(4.5);
+
+        const muted = resolve(scheme, mode, CODE_CHROME.fgMuted, bg);
+        expect(contrast(muted, bg)).toBeGreaterThanOrEqual(4.5);
+      });
+    }
+
+    it(`${scheme}: same surface family in light and dark`, () => {
+      // Not the same hex (BAZE dark is a warmer ink), but never flipped.
+      const light = luminance(resolve(scheme, 'light', CODE_CHROME.bg));
+      const dark = luminance(resolve(scheme, 'dark', CODE_CHROME.bg));
+      expect(Math.abs(light - dark)).toBeLessThan(0.05);
+    });
+  }
+});
+
+describe('CodeTabs reads the chrome tokens', () => {
+  it('tab bar and labels use CODE_CHROME', () => {
+    render(
+      <ChakraProvider value={system}>
+        <CodeTabs code={{ js: 'a', py: 'b' }} onCopy={() => {}} />
+      </ChakraProvider>
+    );
+    const selected = screen.getByRole('tab', { name: 'js' });
+    const root = selected.closest<HTMLElement>(
+      '[data-scope="tabs"][data-part="root"]'
+    )!;
+    expect(getComputedStyle(root).backgroundColor).toContain(
+      '--chakra-colors-action-bg'
+    );
+    expect(getComputedStyle(selected).color).toContain(
+      '--chakra-colors-action-fg'
+    );
+  });
+});

package/src/components/CodeTabs/CodeTabs.styles.ts

@@ -0,0 +1,26 @@
+/**
+ * The CodeTabs chrome (tab bar, copy button) and the code body under it.
+ *
+ * The code is highlighted with Shiki's `github-dark`, whose token colours are
+ * written for a dark ground in BOTH app modes, so the surface must stay dark in
+ * both too. `bg.inverse` does not: it is `tooltip.bg`, near-black in light but
+ * light sand in dark, and the `fg.muted` text on it flipped as well (~1.4:1 in
+ * light, ~1.1:1 in dark).
+ *
+ * `action.*` is the one role pair that is dark in every mode (BAZE ink:
+ * #252525 light / #38332E dark, `action.fg` 12.5–13.2:1 on it, high contrast
+ * included), so the chrome reads it. The unselected label is `action.fg` at
+ * 70% — ≥ 7.0:1 on `action.bg` and ≥ 5.6:1 on `action.bgHover`, both schemes,
+ * all four modes.
+ *
+ * Borrowed rather than owned: `action.*` is the Run button's role. A dedicated
+ * `code.*` role family (bg / fg / fgMuted / bgHover) would be the clean home.
+ */
+export const CODE_CHROME = {
+  bg: 'action.bg',
+  bgHover: 'action.bgHover',
+  bgActive: 'action.bgActive',
+  fg: 'action.fg',
+  fgMuted: 'action.fg/70',
+  divider: 'action.fg/15',
+} as const;

package/src/components/CodeTabs/CodeTabs.tsx

@@ -4,6 +4,7 @@ import { Box, Flex } from '@chakra-ui/react';
 import { Code } from '@/components/Code';
 import { Tab, TabList, Tabs } from '@/components/Tabs';
 
+import { CODE_CHROME } from './CodeTabs.styles';
 import { CodeTabsProps } from './CodeTabs.types';
 import { CopyButton } from './CopyButton';
 
@@ -19,13 +20,14 @@ export const CodeTabs = ({ code, onCopy, ...rest }: CodeTabsProps) => {
 
   return (
     <Tabs
-      bgColor="gray.1500"
+      // Fixed dark chrome in both modes — see `CODE_CHROME`.
+      bgColor={CODE_CHROME.bg}
       borderRadius="md"
       value={selectedValue}
       onValueChange={(details) => setSelectedValue(details.value)}
       {...rest}
     >
-      <TabList px={2} alignItems="center">
+      <TabList px={2} alignItems="center" borderColor={CODE_CHROME.divider}>
         <Flex w="100%" flex={1}>
           {languages.map((language) => (
             <Tab
@@ -39,9 +41,11 @@ export const CodeTabs = ({ code, onCopy, ...rest }: CodeTabsProps) => {
               textTransform="uppercase"
               fontWeight="bold"
               textStyle="subtext"
-              _selected={{ color: 'white' }}
+              color={CODE_CHROME.fgMuted}
+              _selected={{ color: CODE_CHROME.fg }}
               _hover={{
-                bgColor: 'whiteAlpha.500',
+                bgColor: CODE_CHROME.bgHover,
+                color: CODE_CHROME.fg,
               }}
             >
               {language}
@@ -60,6 +64,14 @@ export const CodeTabs = ({ code, onCopy, ...rest }: CodeTabsProps) => {
               hideHeader
               aria-hidden={!isSelected}
               containerProps={{
+                // The body sits on the same fixed-dark surface: Chakra's Shiki
+                // adapter strips the `<pre>` that carries github-dark's own
+                // background, so the block would otherwise paint `bg`
+                // (= `bg.canvas`, white in light mode) under light token colours.
+                bg: CODE_CHROME.bg,
+                // Before Shiki loads, the text is plain `color`.
+                color: CODE_CHROME.fg,
+                borderColor: CODE_CHROME.bg,
                 borderRadius: 'none',
                 borderBottomRadius: 'md',
                 gridArea: '1 / 1',