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

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>

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

@@ -27,7 +27,7 @@ const categoryOptions = [
 
 const Row = ({ label, children }: { label: string; children: ReactNode }) => (
   <Stack gap={2}>
-    <Text fontWeight="semibold" fontSize="sm" color="gray.1000">
+    <Text fontWeight="semibold" fontSize="sm" color="fg.default">
       {label}
     </Text>
     {children}

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

@@ -220,7 +220,7 @@ export const OptionsWithDescription = () => (
               <Select.Item item={item} key={item.value}>
                 <Stack gap={0}>
                   <Select.ItemText>{item.label}</Select.ItemText>
-                  <Span fontSize="xs" color="gray.600">
+                  <Span fontSize="xs" color="fg.muted">
                     {item.description}
                   </Span>
                 </Stack>
@@ -341,12 +341,12 @@ export const HierarchicalOptions = () => (
                   .map((item) => (
                     <Select.Item item={item} key={item.value}>
                       <HStack gap={1}>
-                        <Span color="gray.500" fontWeight="bold">
+                        <Span color="fg.subtle" fontWeight="bold">
                           ∟
                         </Span>
                         <Select.ItemText>{item.label}</Select.ItemText>
                         {item.myGroup && (
-                          <Badge variant="primary">My group</Badge>
+                          <Badge variant="neutral">My group</Badge>
                         )}
                       </HStack>
                       <Select.ItemIndicator />
@@ -397,14 +397,14 @@ export const CustomTriggerValue = () => {
           <Select.Trigger>
             {selected ? (
               <HStack gap={1}>
-                <Span color="gray.600">{selected.groupType}</Span>
-                <Span color="gray.500">&gt;</Span>
-                <Span color="gray.1200" fontWeight="medium">
+                <Span color="fg.muted">{selected.groupType}</Span>
+                <Span color="fg.subtle">&gt;</Span>
+                <Span color="fg.default" fontWeight="medium">
                   {selected.label}
                 </Span>
               </HStack>
             ) : (
-              <Span color="gray.500">Select a group</Span>
+              <Span color="fg.subtle">Select a group</Span>
             )}
           </Select.Trigger>
           <Select.IndicatorGroup>
@@ -463,7 +463,7 @@ export const MultiSelectCustomTags = () => {
         <Select.Control>
           <Select.Trigger>
             {value.length === 0 ? (
-              <Span color="gray.500">Select skills</Span>
+              <Span color="fg.subtle">Select skills</Span>
             ) : (
               <HStack gap={1} flexWrap="wrap">
                 {value.map((val) => {
@@ -475,8 +475,8 @@ export const MultiSelectCustomTags = () => {
                     <HStack
                       key={val}
                       gap={1}
-                      bg="primary.extralight"
-                      color="primary.dark"
+                      bg="primary.selected"
+                      color="fg.default"
                       borderRadius="4px"
                       px={2}
                       py={0.5}
@@ -592,22 +592,22 @@ export const InsideScrollableContainer = () => (
     maxH="140px"
     overflow="auto"
     borderWidth="1px"
-    borderColor="gray.300"
+    borderColor="border.default"
     borderRadius="8px"
     p={3}
   >
     <Stack gap={3}>
-      <Span fontSize="sm" color="gray.600">
+      <Span fontSize="sm" color="fg.muted">
         Scrollable container — open the select, it escapes the clip.
       </Span>
       <SelectField options={options} placeholder="Select an option" />
-      <Span fontSize="sm" color="gray.600">
+      <Span fontSize="sm" color="fg.muted">
         More rows below…
       </Span>
-      <Span fontSize="sm" color="gray.600">
+      <Span fontSize="sm" color="fg.muted">
         …to force the container to scroll.
       </Span>
-      <Span fontSize="sm" color="gray.600">
+      <Span fontSize="sm" color="fg.muted">
         …and a little more.
       </Span>
     </Stack>
@@ -638,12 +638,12 @@ export const StyledParts = () => (
       </Select.Control>
       <Portal>
         <Select.Positioner>
-          <Select.Content css={{ bg: 'gray.50' }}>
+          <Select.Content css={{ bg: 'bg.subtle' }}>
             {frameworkCollection.items.map((item) => (
               <Select.Item
                 item={item}
                 key={item.value}
-                css={{ _highlighted: { bg: 'primary.extralight' } }}
+                css={{ _highlighted: { bg: 'primary.wash' } }}
               >
                 <Select.ItemText>{item.label}</Select.ItemText>
                 <Select.ItemIndicator />
@@ -703,13 +703,13 @@ export const WithOpenChange = () => {
           w="220px"
           p={3}
           borderWidth="1px"
-          borderColor="gray.300"
+          borderColor="border.default"
           borderRadius="8px"
-          bg="gray.50"
+          bg="bg.subtle"
         >
-          <Span fontSize="sm" color="gray.600">
-            Side panel — visible only while the dropdown is open, the same
-            way `LlmModelSelect` reveals its model details panel.
+          <Span fontSize="sm" color="fg.muted">
+            Side panel — visible only while the dropdown is open, the same way
+            `LlmModelSelect` reveals its model details panel.
           </Span>
         </Box>
       )}

package/src/components/Select/Select.styles.ts

@@ -8,28 +8,31 @@
  * update these values to match.
  */
 
+import { disabledControl } from '@/utils/disabledControl';
+
 const focusVars = {
   '--focus-color': 'var(--chakra-colors-primary-main)',
-  '--error-color': 'var(--chakra-colors-danger-main)',
+  '--error-color': 'var(--chakra-colors-danger-solid)',
 };
 
 const fieldBase = {
   ...focusVars,
   bg: 'bg.surface',
   color: 'fg.default',
-  borderColor: 'border.default',
-  _hover: { borderColor: 'primary.lighter' },
-  _focus: { borderColor: 'primary.main' },
+  borderColor: 'border.control',
+  _hover: { borderColor: 'fg.icon' },
+  _focus: {
+    borderColor: 'primary.main',
+    boxShadow: '0 0 0 1px var(--chakra-colors-primary-main)',
+  },
   _invalid: {
-    borderColor: 'danger.main',
-    _hover: { borderColor: 'danger.main' },
-    _focus: { borderColor: 'danger.main' },
+    borderColor: 'danger.solid',
+    _hover: { borderColor: 'danger.solid' },
+    _focus: { borderColor: 'danger.solid' },
   },
   _disabled: {
-    opacity: 1,
+    ...disabledControl,
     cursor: 'not-allowed',
-    bg: 'bg.subtle',
-    color: { base: 'gray.1000', _dark: 'gray.400' },
     fontWeight: 'semibold',
   },
 };
@@ -38,7 +41,10 @@ const fieldBase = {
 export const triggerStyles = {
   ...fieldBase,
   cursor: 'pointer',
-  _open: { borderColor: 'primary.main' },
+  _open: {
+    borderColor: 'primary.main',
+    boxShadow: '0 0 0 1px var(--chakra-colors-primary-main)',
+  },
 };
 
 /** Combobox text input — the typeable control. */
@@ -61,10 +67,10 @@ export const itemStyles = {
   borderRadius: '4px',
   cursor: 'pointer',
   color: 'fg.default',
-  _highlighted: { bg: 'bg.subtle' },
+  _highlighted: { bg: 'primary.wash' },
   _checked: {
-    bg: 'primary.extralight',
-    color: 'primary.dark',
+    bg: 'primary.selected',
+    color: 'fg.default',
     fontWeight: 'bold',
   },
   _disabled: { color: 'fg.subtle', cursor: 'not-allowed' },

package/src/components/Shake/Shake.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
 import { Button } from '../Button';
-import { Chip } from '../Chip';
+import { Tag } from '../Tag';
 import { Input } from '../Input';
 import { Subtext } from '../Typography';
 import { Shake } from '.';
@@ -30,15 +30,13 @@ export const Default: Story = {
       <Stack gap={4} align="flex-start">
         <Button
           size="sm"
-          variant="outline"
+          variant="secondary"
           onClick={() => setAttempts((a) => a + 1)}
         >
           틀린 답 제출
         </Button>
         <Shake trigger={attempts}>
-          <Chip colorScheme="danger" variant="soft">
-            ✕ 다시 시도해 주세요
-          </Chip>
+          <Tag tone="danger">✕ 다시 시도해 주세요</Tag>
         </Shake>
         <Subtext color="fg.muted" mb={0}>
           같은 답을 두 번 내도 두 번 흔들립니다 — 값이 아니라 사건을 셉니다.
@@ -106,17 +104,17 @@ export const ReducedMotion: Story = {
           aria-invalid={signalled || undefined}
           placeholder="답을 입력하세요"
         />
-        {signalled && (
-          <Chip colorScheme="danger" variant="soft">
-            ✕ 다시 시도해 주세요
-          </Chip>
-        )}
+        {signalled && <Tag tone="danger">✕ 다시 시도해 주세요</Tag>}
       </Stack>
     );
 
     return (
       <Stack gap={5} align="flex-start" maxW="620px">
-        <Button size="sm" variant="outline" onClick={() => setN((a) => a + 1)}>
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={() => setN((a) => a + 1)}
+        >
           틀린 답 제출
         </Button>
 
@@ -128,7 +126,7 @@ export const ReducedMotion: Story = {
             <Stack key={col.label} gap={2}>
               <Subtext
                 fontSize="2xs"
-                color={col.reduced ? 'warning.main' : 'fg.muted'}
+                color={col.reduced ? 'warning.fg' : 'fg.muted'}
                 mb={0}
               >
                 {col.label}

package/src/components/Slider/Slider.stories.tsx

@@ -124,7 +124,9 @@ export const RangeWithSliderThumbs: Story = {
     const [value, setValue] = useState([20, 80]);
     return (
       <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <span>Range: {value[0]} - {value[1]}</span>
+        <span>
+          Range: {value[0]} - {value[1]}
+        </span>
         <div style={{ flex: 1 }}>
           <Slider
             value={value}
@@ -154,7 +156,9 @@ export const CustomStyledThumbs: Story = {
     const [value, setValue] = useState([30, 70]);
     return (
       <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <span>Range: {value[0]} - {value[1]}</span>
+        <span>
+          Range: {value[0]} - {value[1]}
+        </span>
         <div style={{ flex: 1 }}>
           <Slider
             value={value}
@@ -162,11 +166,23 @@ export const CustomStyledThumbs: Story = {
             max={100}
             onValueChange={(details) => setValue(details.value)}
           >
-            <SliderTrack bg="gray.100">
-              <SliderFilledTrack bg="blue.500" />
+            <SliderTrack bg="bg.track">
+              <SliderFilledTrack bg="primary.main" />
             </SliderTrack>
-            <SliderThumb index={0} boxSize={5} bg="blue.500" borderWidth={2} borderColor="white" />
-            <SliderThumb index={1} boxSize={5} bg="purple.500" borderWidth={2} borderColor="white" />
+            <SliderThumb
+              index={0}
+              boxSize={5}
+              bg="bg.canvas"
+              borderWidth={2}
+              borderColor="primary.main"
+            />
+            <SliderThumb
+              index={1}
+              boxSize={5}
+              bg="bg.canvas"
+              borderWidth={2}
+              borderColor="category.purple.fg"
+            />
           </Slider>
         </div>
       </div>
@@ -187,7 +203,13 @@ export const Sizes: Story = {
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
         <div>
-          <div style={{ marginBottom: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+          <div
+            style={{
+              marginBottom: '0.5rem',
+              fontSize: '0.875rem',
+              color: 'var(--chakra-colors-fg-muted)',
+            }}
+          >
             Small (sm) - Value: {smallValue[0]}
           </div>
           <Slider
@@ -205,7 +227,13 @@ export const Sizes: Story = {
         </div>
 
         <div>
-          <div style={{ marginBottom: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+          <div
+            style={{
+              marginBottom: '0.5rem',
+              fontSize: '0.875rem',
+              color: 'var(--chakra-colors-fg-muted)',
+            }}
+          >
             Medium (md) - Value: {mediumValue[0]}
           </div>
           <Slider
@@ -223,7 +251,13 @@ export const Sizes: Story = {
         </div>
 
         <div>
-          <div style={{ marginBottom: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+          <div
+            style={{
+              marginBottom: '0.5rem',
+              fontSize: '0.875rem',
+              color: 'var(--chakra-colors-fg-muted)',
+            }}
+          >
             Large (lg) - Value: {largeValue[0]}
           </div>
           <Slider

package/src/components/Slider/SliderThumb/SliderThumb.tsx

@@ -14,7 +14,7 @@ export const SliderThumb = forwardRef(
       <Slider.Thumb
         index={index}
         boxSize={4}
-        bg="white"
+        bg="bg.canvas"
         borderColor="primary.main"
         borderWidth={3}
         borderStyle="solid"

package/src/components/Slider/SliderThumbs/SliderThumbs.tsx

@@ -24,7 +24,7 @@ export const SliderThumbs = forwardRef((props, _ref) => {
   return (
     <Slider.Thumbs
       boxSize={4}
-      bg="white"
+      bg="bg.canvas"
       borderColor="primary.main"
       borderWidth={3}
       borderStyle="solid"

package/src/components/SwapTransition/SwapTransition.stories.tsx

@@ -40,7 +40,7 @@ export const Default: Story = {
         <HStack gap={2}>
           <Button
             size="xs"
-            variant="outline"
+            variant="secondary"
             disabled={step === 0}
             onClick={() => setStep((s) => s - 1)}
           >
@@ -91,7 +91,7 @@ export const Direction: Story = {
         <HStack gap={2}>
           <Button
             size="xs"
-            variant="outline"
+            variant="secondary"
             onClick={() => {
               setBack(true);
               setStep((s) => (s + STEPS.length - 1) % STEPS.length);
@@ -177,8 +177,7 @@ export const CallSiteShapes: Story = {
                   <Button
                     key={o}
                     size="sm"
-                    variant={picked === o ? 'solid' : 'outline'}
-                    colorPalette={picked === o ? 'primary' : 'neutral'}
+                    variant={picked === o ? 'primary' : 'secondary'}
                     onClick={() => setPicked(o)}
                   >
                     {o}

package/src/components/Switch/SwitchControl.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { Switch as ChakraSwitch, SwitchControlProps } from '@chakra-ui/react';
 
+import { disabledControl } from '@/utils/disabledControl';
 import { focusRing } from '@/utils/focusRing';
 
 export const SwitchControl = forwardRef<HTMLSpanElement, SwitchControlProps>(
@@ -16,6 +17,7 @@ export const SwitchControl = forwardRef<HTMLSpanElement, SwitchControlProps>(
       _checked={{ bg: 'primary.main' }}
       animationStyle="feedback"
       transitionProperty="background-color"
+      _disabled={{ ...disabledControl, cursor: 'not-allowed' }}
       {...focusRing}
       {...props}
     >
@@ -27,6 +29,12 @@ export const SwitchControl = forwardRef<HTMLSpanElement, SwitchControlProps>(
         // reverses direction — `standard` vs `emphasized` would not.
         animationStyle="spring"
         transitionProperty="translate"
+        // Chakra's default is a raw `white` thumb that stays `white` when
+        // checked via an undefined `colorPalette.contrast`. bg.surface reads
+        // as the same near-white in light and flips correctly in dark; the
+        // checked thumb is fg.onPrimary (cream) to match Checkbox/Radio.
+        bg="bg.surface"
+        _checked={{ bg: 'fg.onPrimary' }}
       />
     </ChakraSwitch.Control>
   )