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

package/src/components/Reveal/Reveal.tsx

@@ -0,0 +1,62 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { Box } from '@chakra-ui/react';
+
+import { mergeCss } from '@/utils/mergeCss';
+
+import { revealOpen } from './Reveal.styles';
+import { RevealProps } from './Reveal.types';
+
+/**
+ * Opens a block out of zero height instead of inserting it — for content that
+ * arrives *underneath* something the reader is already looking at: an answer's
+ * rationale, a validation message under a field, a details panel.
+ *
+ * The problem it solves is a layout jump. Rendering the block directly moves
+ * everything below it in one frame, and if the reader's eye is on the element
+ * the content belongs to, that frame reads as the page breaking rather than as
+ * content arriving.
+ *
+ * The caller owns mounting — render it when the content should appear, the same
+ * contract `FlyTo` uses. It does not animate closed; a block that opens *and*
+ * closes is a Collapsible, which keeps its node mounted and can therefore use
+ * `presence`.
+ *
+ * ⚠️ **Costs layout on every frame**, unlike the transform-only primitives here.
+ * Inherent to opening to content-height. Keep it on small blocks — not a long
+ * list, a table, or anything with nested scroll.
+ *
+ * **Adds two elements** — the grid whose track animates, and the `div` inside it
+ * that clips. Layout props land on the outer one, and `children` is no longer a
+ * *direct* child of what surrounds it, so animate the inner element instead of
+ * wrapping when the parent needs its children directly: a `<tr>` needs `<td>`s,
+ * and Ark parts (`Menu.List`, `Tree`) walk their own children for focus and
+ * typeahead.
+ *
+ * ```tsx
+ * {showRationale && <Reveal><Text>{rationale}</Text></Reveal>}
+ * ```
+ */
+export const Reveal = forwardRef(
+  (
+    { durationMs, children, css, ...rest }: RevealProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => (
+    <Box
+      ref={ref}
+      {...rest}
+      css={mergeCss(
+        revealOpen,
+        durationMs === undefined
+          ? undefined
+          : { animationDuration: `${durationMs}ms` },
+        css
+      )}
+    >
+      {/* The grid track animates; this holds the content and clips it while the
+          track is shorter than the content is tall. */}
+      <div>{children}</div>
+    </Box>
+  )
+);
+
+Reveal.displayName = 'Reveal';

package/src/components/Reveal/Reveal.types.ts

@@ -0,0 +1,6 @@
+import type { BoxProps } from '@chakra-ui/react';
+
+export interface RevealProps extends BoxProps {
+  /** Defaults to `motion.base` (300ms). */
+  durationMs?: number;
+}

package/src/components/Reveal/index.ts

@@ -0,0 +1,2 @@
+export { Reveal } from './Reveal';
+export type { RevealProps } from './Reveal.types';

package/src/components/ScaledContext/ScaledContext.stories.tsx

@@ -19,8 +19,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const SampleContent = () => (
-  <Stack gap={3} p={3} borderWidth="1px" borderColor="gray.300" borderRadius="md">
-    <Button variant="outline">Button</Button>
+  <Stack
+    gap={3}
+    p={3}
+    borderWidth="1px"
+    borderColor="border.default"
+    borderRadius="md"
+  >
+    <Button variant="secondary">Button</Button>
     <Checkbox>
       <Checkbox.Control />
       <Checkbox.Label>Checkbox</Checkbox.Label>
@@ -30,7 +36,7 @@ const SampleContent = () => (
 
 export const Default: Story = {
   args: { fontSize: '1rem' },
-  render: args => (
+  render: (args) => (
     <ScaledContext {...args}>
       <SampleContent />
     </ScaledContext>
@@ -49,9 +55,9 @@ export const ScalingRem: Story = {
   },
   render: () => (
     <HStack align="start" gap={8} flexWrap="wrap">
-      {(['0.75rem', '1rem', '1.25rem', '1.5rem'] as const).map(size => (
+      {(['0.75rem', '1rem', '1.25rem', '1.5rem'] as const).map((size) => (
         <Box key={size}>
-          <Text fontSize="xs" color="gray.500" mb={2} fontFamily="mono">
+          <Text fontSize="xs" color="fg.muted" mb={2} fontFamily="mono">
             {size}
           </Text>
           <ScaledContext fontSize={size}>
@@ -68,15 +74,16 @@ export const ScalingPx: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'px values work too — spacing tokens still scale relative to the given font size.',
+        story:
+          'px values work too — spacing tokens still scale relative to the given font size.',
       },
     },
   },
   render: () => (
     <HStack align="start" gap={8} flexWrap="wrap">
-      {(['12px', '14px', '16px', '20px', '24px'] as const).map(size => (
+      {(['12px', '14px', '16px', '20px', '24px'] as const).map((size) => (
         <Box key={size}>
-          <Text fontSize="xs" color="gray.500" mb={2} fontFamily="mono">
+          <Text fontSize="xs" color="fg.muted" mb={2} fontFamily="mono">
             {size}
           </Text>
           <ScaledContext fontSize={size}>
@@ -103,26 +110,26 @@ export const NestedScaling: Story = {
       fontSize="0.875rem"
       p={4}
       borderWidth="1px"
-      borderColor="gray.200"
+      borderColor="border.subtle"
       borderRadius="md"
     >
       <Stack gap={3}>
-        <Text fontSize="xs" color="gray.500" fontFamily="mono">
+        <Text fontSize="xs" color="fg.muted" fontFamily="mono">
           Outer: 0.875rem (compact)
         </Text>
-        <Button variant="outline">Outer Button</Button>
+        <Button variant="secondary">Outer Button</Button>
         <ScaledContext
           fontSize="1.25rem"
           p={3}
           borderWidth="1px"
-          borderColor="primary.light"
+          borderColor="border.strong"
           borderRadius="md"
         >
           <Stack gap={3}>
-            <Text fontSize="xs" color="gray.500" fontFamily="mono">
+            <Text fontSize="xs" color="fg.muted" fontFamily="mono">
               Inner: 1.25rem (spacious)
             </Text>
-            <Button variant="outline">Inner Button</Button>
+            <Button variant="secondary">Inner Button</Button>
             <Checkbox>
               <Checkbox.Control />
               <Checkbox.Label>Inner Checkbox</Checkbox.Label>

package/src/components/SeeMoreButton/SeeMoreButton.border.test.tsx

@@ -0,0 +1,51 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { SeeMoreButton } from './SeeMoreButton';
+import { seeMoreButtonStyles } from './SeeMoreButton.styles';
+
+/**
+ * SeeMoreButton's only border is a top hairline. Button draws a 1px border on
+ * every side and the ghost recipe's `_disabled` makes it transparent, so the
+ * "all shown" (disabled) state used to lose the hairline while the other three
+ * sides kept invisible 1px borders.
+ */
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+const borders = (el: HTMLElement) => {
+  const cs = getComputedStyle(el);
+  return {
+    top: cs.borderTopWidth,
+    right: cs.borderRightWidth,
+    bottom: cs.borderBottomWidth,
+    left: cs.borderLeftWidth,
+    topColor: cs.borderTopColor,
+  };
+};
+
+describe('SeeMoreButton border', () => {
+  it.each([
+    ['enabled', false],
+    ['disabled (all shown)', true],
+  ])('%s: top hairline only, divider colour', (_state, disabled) => {
+    wrap(<SeeMoreButton currentCount={10} maxCount={10} disabled={disabled} />);
+    const b = borders(screen.getByRole('button'));
+    expect(b.top).toBe('1px');
+    expect(b.right).toBe('0px');
+    expect(b.bottom).toBe('0px');
+    expect(b.left).toBe('0px');
+    expect(b.topColor).toContain('border-subtle');
+  });
+
+  it('keeps the hairline colour under _disabled', () => {
+    // jsdom does not expand the `border-color` shorthand the ghost recipe's
+    // `_disabled` sets, so the colour override is checked on the style object:
+    // it must be a top-only longhand, applied after the recipe's shorthand.
+    expect(seeMoreButtonStyles._disabled).toEqual({
+      borderTopColor: 'border.subtle',
+    });
+  });
+});

package/src/components/SeeMoreButton/SeeMoreButton.stories.tsx

@@ -47,3 +47,11 @@ export const Default: Story = {
     );
   },
 };
+
+/**
+ * Renders the ghost Button recipe — same hover wash, press and disabled
+ * colours. Disabled once everything is shown.
+ */
+export const AllShown: Story = {
+  args: { currentCount: 10, maxCount: 10, disabled: true },
+};

package/src/components/SeeMoreButton/SeeMoreButton.styles.ts

@@ -1,12 +1,20 @@
+/**
+ * Layout only. Colours, hover/press and disabled come from the ghost Button
+ * recipe (`<Button variant="ghost">`), so SeeMoreButton cannot drift from it.
+ * The top hairline is structural (it separates the button from the list it
+ * extends), so it is the ONLY border — Button draws 1px on every side, which
+ * would put transparent borders left/right/bottom — and it survives the
+ * disabled ("all shown") state, where the ghost recipe's `_disabled` would
+ * otherwise turn it transparent.
+ */
 export const seeMoreButtonStyles = {
   alignSelf: 'stretch',
   w: '100%',
-  variant: 'unstyled' as any,
   display: 'flex',
-  borderTop: '1px solid',
   borderRadius: 'none',
-  borderColor: 'border.default',
-  color: 'fg.subtle',
+  borderWidth: '0',
+  borderTopWidth: '1px',
+  borderTopColor: 'border.subtle',
   fontSize: 'subtitle',
-  cursor: 'pointer',
-};
+  _disabled: { borderTopColor: 'border.subtle' },
+} as const;

package/src/components/SeeMoreButton/SeeMoreButton.tsx

@@ -1,31 +1,47 @@
 import React from 'react';
-import { Button } from '@chakra-ui/react';
 
-import { IoChevronDownOutline } from '@/components/Icon';
+import { Button } from '@/components/Button';
+import { ChevronDownIcon } from '@/components/Icon';
 import { useTranslate } from '@/hooks/useTranslate';
+import { mergeCss } from '@/utils/mergeCss';
 
+import { polymorphic } from '../../types/polymorphic';
 import { seeMoreButtonStyles } from './SeeMoreButton.styles';
-import { SeeMoreButtonProps } from './SeeMoreButton.types';
+import { SeeMoreButtonOwnProps } from './SeeMoreButton.types';
 
 /**
  * A button component that allows users to load or see more items.
  * It displays the current count and the maximum count of items.
+ * Rendered with the ghost Button recipe (5.0): same colours and states.
  *
  * @param {object} props - Props for the SeeMoreButton component.
  * @param {number} props.currentCount - The current number of items shown.
  * @param {number} props.maxCount - The maximum number of items available.
  */
-export const SeeMoreButton = ({
+const SeeMoreButtonImpl = ({
   currentCount,
   maxCount,
+  _disabled: disabledProp,
   ...rest
-}: SeeMoreButtonProps) => {
+}: SeeMoreButtonOwnProps) => {
   const translate = useTranslate();
 
   return (
-    <Button {...seeMoreButtonStyles} {...rest}>
+    <Button
+      variant="ghost"
+      {...seeMoreButtonStyles}
+      // Merged so a call site's `_disabled` cannot drop the hairline.
+      _disabled={mergeCss(seeMoreButtonStyles._disabled, disabledProp)}
+      {...rest}
+    >
       {translate('see_more')} ({currentCount}/{maxCount}){' '}
-      <IoChevronDownOutline color="inherit" />
+      <ChevronDownIcon color="inherit" />
     </Button>
   );
 };
+
+SeeMoreButtonImpl.displayName = 'SeeMoreButton';
+
+/** Type-level polymorphism over the same runtime — see `polymorphic`. */
+export const SeeMoreButton =
+  polymorphic<SeeMoreButtonOwnProps>(SeeMoreButtonImpl);

package/src/components/SeeMoreButton/SeeMoreButton.types.ts

@@ -1,6 +1,24 @@
-import { ButtonProps } from '@chakra-ui/react';
+import type { ElementType } from 'react';
 
-export interface SeeMoreButtonProps extends ButtonProps {
+// Relative, NOT `@/types/*` — see `src/types/polymorphic.ts`.
+import type { PolymorphicProps } from '../../types/polymorphic';
+import type { ButtonOwnProps } from '../Button/Button.types';
+
+/**
+ * SeeMoreButton always renders the ghost Button recipe, so it takes Button's
+ * props minus the role (`variant` / `isDestructive`).
+ */
+export type SeeMoreButtonOwnProps = Omit<
+  ButtonOwnProps,
+  'variant' | 'isDestructive'
+> & {
   currentCount: number;
   maxCount: number;
-}
+};
+
+/**
+ * Props for `SeeMoreButton`, typed for whatever element `as` renders.
+ * Defaults to `'button'`, so the bare type is unchanged.
+ */
+export type SeeMoreButtonProps<TElement extends ElementType = 'button'> =
+  PolymorphicProps<TElement, SeeMoreButtonOwnProps>;

package/src/components/SegmentedControl/SegmentedControl.styles.ts

@@ -0,0 +1,22 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * `travel`, but delivered through custom properties.
+ *
+ * Ark writes this part's `transition-*` **inline**, and an inline declaration
+ * beats any class, so the ordinary preset never reaches the indicator. The two
+ * halves it does leave reachable are the duration and the timing function, both
+ * read from custom properties — which is the only seam available.
+ *
+ * Local rather than shared for the same reason it exists at all: it is a
+ * workaround for one library part, not a motion anyone should be choosing.
+ * If a second Ark part turns out to need the identical hatch, that is the
+ * moment to promote it.
+ */
+export const indicatorTravel: SystemStyleObject = {
+  '--transition-duration': 'var(--chakra-durations-motion-base)',
+  '--transition-timing-function': 'var(--chakra-easings-emphasized)',
+  _motionReduce: {
+    '--transition-duration': 'var(--chakra-durations-motion-instant)',
+  },
+};

package/src/components/SegmentedControl/SegmentedControl.timing.test.tsx

@@ -0,0 +1,81 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { SegmentedControl } from './SegmentedControl';
+
+/**
+ * Ark writes this part's `transition-*` declarations **inline**, and an inline
+ * declaration beats any class rule — so the ordinary preset props never reach
+ * the indicator, and a change made that way looks identical to `dev`. Retiming
+ * has to go through the custom properties Ark's inline `var()`s read.
+ *
+ * These tests exist because that failure is invisible: the code reads as though
+ * it applied, the component still animates (on Ark's 150ms default), and only a
+ * side-by-side comparison gives it away.
+ */
+const setup = () =>
+  render(
+    <ChakraProvider value={system}>
+      <SegmentedControl
+        options={[
+          { label: 'A', value: 'a' },
+          { label: 'B', value: 'b' },
+        ]}
+      />
+    </ChakraProvider>
+  );
+
+const rulesFor = (el: Element) => {
+  const css = Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('\n');
+  return el.className
+    .split(' ')
+    .filter((c) => c.startsWith('css-'))
+    .flatMap((c) => [...css.matchAll(new RegExp(`\\.${c}\\{([^}]*)\\}`, 'g'))])
+    .map((m) => m[1])
+    .join('\n');
+};
+
+describe('SegmentedControl indicator timing', () => {
+  it('Ark still reads the duration from a custom property', async () => {
+    const { container } = setup();
+    // Since zag 1.43 (Ark 5.39) the indicator only carries its transition
+    // while it is travelling between two values — at rest the inline duration
+    // is a flat `0ms`. Move it once so the declaration under test exists.
+    const radios = container.querySelectorAll('input[type="radio"]');
+    await act(async () => {
+      fireEvent.click(radios[1]);
+    });
+    const inline =
+      container
+        .querySelector('[data-part="indicator"]')
+        ?.getAttribute('style') ?? '';
+    // If Ark ever inlines a concrete duration instead, our override stops
+    // working and this is the line that says so.
+    expect(inline).toContain('var(--transition-duration');
+    expect(inline).not.toMatch(/transition-duration:\s*\d/);
+  });
+
+  it('we define that custom property, so the indicator runs on our timing', () => {
+    const { container } = setup();
+    const el = container.querySelector('[data-part="indicator"]')!;
+    const rules = rulesFor(el);
+    expect(rules).toContain(
+      '--transition-duration:var(--chakra-durations-motion-base)'
+    );
+    expect(rules).toContain(
+      '--transition-timing-function:var(--chakra-easings-emphasized)'
+    );
+  });
+
+  it('and drops to instant under reduced motion', () => {
+    const { container } = setup();
+    const rules = rulesFor(container.querySelector('[data-part="indicator"]')!);
+    expect(rules).toContain(
+      '--transition-duration:var(--chakra-durations-motion-instant)'
+    );
+  });
+});

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -3,6 +3,7 @@ import { SegmentGroup } from '@chakra-ui/react';
 
 import { mergeCss } from '@/utils/mergeCss';
 
+import { indicatorTravel } from './SegmentedControl.styles';
 import {
   SegmentedControlOption,
   SegmentedControlProps,
@@ -107,7 +108,12 @@ export const SegmentedControl = forwardRef<
         css
       )}
     >
-      <SegmentGroup.Indicator borderRadius={indicatorRadius} />
+      <SegmentGroup.Indicator
+        borderRadius={indicatorRadius}
+        // `travel`, delivered through custom properties — see the comment on
+        // `indicatorTravel` for why the ordinary preset cannot reach this part.
+        css={indicatorTravel}
+      />
       {items.map((item) => (
         <SegmentGroup.Item
           key={item.value}

package/src/components/SegmentedProgressBar/SegmentedProgressBar.stories.tsx

@@ -32,7 +32,7 @@ const meta = {
     <Box width="400px">
       <SegmentedProgressBar {...args}>
         <ProgressSegment value={30} filledTrackColor="primary.main" />
-        <ProgressSegment value={20} filledTrackColor="success.main" />
+        <ProgressSegment value={20} filledTrackColor="success.solid" />
       </SegmentedProgressBar>
     </Box>
   ),
@@ -58,9 +58,14 @@ export const BasicUsage: Story = {
         </Text>
         <SegmentedProgressBar max={100} height="12px">
           <ProgressSegment value={60} filledTrackColor="primary.main" />
-          <ProgressSegment value={25} filledTrackColor="success.main" />
+          <ProgressSegment value={25} filledTrackColor="success.solid" />
         </SegmentedProgressBar>
-        <Flex justify="space-between" mt={1} textStyle="subtext" color="gray.600">
+        <Flex
+          justify="space-between"
+          mt={1}
+          textStyle="subtext"
+          color="fg.muted"
+        >
           <Text>Primary: 60</Text>
           <Text>Success: 25</Text>
           <Text>Remaining: 15</Text>
@@ -79,11 +84,16 @@ export const MultipleSegments: Story = {
         </Text>
         <SegmentedProgressBar max={200} height="16px">
           <ProgressSegment value={80} filledTrackColor="primary.main" />
-          <ProgressSegment value={45} filledTrackColor="success.main" />
-          <ProgressSegment value={30} filledTrackColor="warning.main" />
-          <ProgressSegment value={25} filledTrackColor="danger.main" />
+          <ProgressSegment value={45} filledTrackColor="success.solid" />
+          <ProgressSegment value={30} filledTrackColor="warning.solid" />
+          <ProgressSegment value={25} filledTrackColor="danger.solid" />
         </SegmentedProgressBar>
-        <Flex justify="space-between" mt={2} textStyle="subtext" color="gray.600">
+        <Flex
+          justify="space-between"
+          mt={2}
+          textStyle="subtext"
+          color="fg.muted"
+        >
           <Text>Primary: 80</Text>
           <Text>Success: 45</Text>
           <Text>Warning: 30</Text>
@@ -102,23 +112,20 @@ export const WithStripes: Story = {
           Progress Segments with Stripes
         </Text>
         <SegmentedProgressBar max={100} height="16px">
-          <ProgressSegment
-            value={45}
-            filledTrackColor="primary.main"
-            striped
-          />
+          <ProgressSegment value={45} filledTrackColor="primary.main" striped />
           <ProgressSegment
             value={30}
-            filledTrackColor="success.main"
-            striped
-          />
-          <ProgressSegment
-            value={15}
-            filledTrackColor="danger.main"
+            filledTrackColor="success.solid"
             striped
           />
+          <ProgressSegment value={15} filledTrackColor="danger.solid" striped />
         </SegmentedProgressBar>
-        <Flex justify="space-between" mt={2} textStyle="subtext" color="gray.600">
+        <Flex
+          justify="space-between"
+          mt={2}
+          textStyle="subtext"
+          color="fg.muted"
+        >
           <Text>Completed: 45</Text>
           <Text>In Progress: 30</Text>
           <Text>Failed: 15</Text>
@@ -137,7 +144,7 @@ export const DifferentSizes: Story = {
         </Text>
         <SegmentedProgressBar max={100} height="8px">
           <ProgressSegment value={70} filledTrackColor="primary.main" />
-          <ProgressSegment value={20} filledTrackColor="success.main" />
+          <ProgressSegment value={20} filledTrackColor="success.solid" />
         </SegmentedProgressBar>
       </Box>
 
@@ -147,7 +154,7 @@ export const DifferentSizes: Story = {
         </Text>
         <SegmentedProgressBar max={100} height="12px">
           <ProgressSegment value={70} filledTrackColor="primary.main" />
-          <ProgressSegment value={20} filledTrackColor="success.main" />
+          <ProgressSegment value={20} filledTrackColor="success.solid" />
         </SegmentedProgressBar>
       </Box>
 
@@ -157,7 +164,7 @@ export const DifferentSizes: Story = {
         </Text>
         <SegmentedProgressBar max={100} height="20px">
           <ProgressSegment value={70} filledTrackColor="primary.main" />
-          <ProgressSegment value={20} filledTrackColor="success.main" />
+          <ProgressSegment value={20} filledTrackColor="success.solid" />
         </SegmentedProgressBar>
       </Box>
     </VStack>
@@ -171,26 +178,31 @@ export const RealWorldExample: Story = {
         <Text mb={2} fontWeight="semibold">
           Member Invitation Progress
         </Text>
-        <Text mb={4} textStyle="subtext" color="gray.600">
+        <Text mb={4} textStyle="subtext" color="fg.muted">
           Inviting 1,500 members in batches of 100
         </Text>
 
         <SegmentedProgressBar max={1500} height="14px">
           <ProgressSegment
             value={1200}
-            filledTrackColor="success.main"
+            filledTrackColor="success.solid"
             striped
           />
           <ProgressSegment
             value={150}
-            filledTrackColor="danger.main"
+            filledTrackColor="danger.solid"
             striped
           />
         </SegmentedProgressBar>
 
-        <Flex justify="space-between" mt={2} textStyle="subtext" color="gray.600">
-          <Text color="success.600">✓ 1,200 successful</Text>
-          <Text color="danger.600">✗ 150 failed</Text>
+        <Flex
+          justify="space-between"
+          mt={2}
+          textStyle="subtext"
+          color="fg.muted"
+        >
+          <Text color="success.fg">✓ 1,200 successful</Text>
+          <Text color="danger.fg">✗ 150 failed</Text>
           <Text>90% complete</Text>
         </Flex>
       </Box>
@@ -208,7 +220,7 @@ export const EmptyState: Story = {
         <SegmentedProgressBar max={100} height="12px">
           {/* No segments - shows empty state */}
         </SegmentedProgressBar>
-        <Text mt={2} textStyle="subtext" color="gray.600">
+        <Text mt={2} textStyle="subtext" color="fg.muted">
           No progress yet
         </Text>
       </Box>
@@ -226,7 +238,7 @@ export const SingleSegment: Story = {
         <SegmentedProgressBar max={100} height="12px">
           <ProgressSegment value={75} filledTrackColor="primary.main" />
         </SegmentedProgressBar>
-        <Text mt={2} textStyle="subtext" color="gray.600">
+        <Text mt={2} textStyle="subtext" color="fg.muted">
           75% complete
         </Text>
       </Box>
@@ -247,7 +259,12 @@ export const CustomColors: Story = {
           <ProgressSegment value={25} filledTrackColor="#45B7D1" />
           <ProgressSegment value={20} filledTrackColor="#96CEB4" />
         </SegmentedProgressBar>
-        <Flex justify="space-between" mt={2} textStyle="subtext" color="gray.600">
+        <Flex
+          justify="space-between"
+          mt={2}
+          textStyle="subtext"
+          color="fg.muted"
+        >
           <Text>Red: 25</Text>
           <Text>Teal: 25</Text>
           <Text>Blue: 25</Text>

package/src/components/Select/Combobox.stories.tsx

@@ -156,7 +156,7 @@ export const CustomItems = () => {
                 <Combobox.Item item={item} key={item.value}>
                   <Stack gap={0}>
                     <Combobox.ItemText>{item.label}</Combobox.ItemText>
-                    <Span fontSize="xs" color="gray.600">
+                    <Span fontSize="xs" color="fg.muted">
                       {item.role}
                     </Span>
                   </Stack>