@mindlogic-ai/logician-ui 3.0.0 → 3.1.0-alpha.1

package/src/components/Menu/MenuList.tsx

@@ -21,9 +21,14 @@ export const MenuList = forwardRef<HTMLDivElement, MenuListProps>(
         <Menu.Content
           ref={ref}
           border="1px solid"
-          borderColor="gray.200"
+          borderColor="border.subtle"
           borderRadius="md"
-          boxShadow="0 5px 20px 1px {colors.gray.50}"
+          // Light keeps its original near-white halo; dark uses a real dark
+          // shadow so the menu doesn't glow against the dark canvas.
+          boxShadow={{
+            base: '0 5px 20px 1px {colors.gray.50}',
+            _dark: '0 5px 20px 1px rgba(0, 0, 0, 0.5)',
+          }}
           p="1.5"
           {...rest}
         >

package/src/components/Modal/ModalFooter/ModalFooter.tsx

@@ -9,7 +9,7 @@ export const ModalFooter = ({ className, ...rest }: Dialog.FooterProps) => {
       gap={3}
       pt={4}
       borderTop="1px solid"
-      borderColor="gray.50"
+      borderColor="border.subtle"
       {...rest}
     />
   );

package/src/components/MonthPicker/MonthPicker.tsx

@@ -294,7 +294,7 @@ export const MonthPicker: React.FC<MonthPickerProps> = ({
           <Box>
             <InputGroup
               startElement={
-                <MdOutlineCalendarToday boxSize="xs" color="gray.800" />
+                <MdOutlineCalendarToday boxSize="xs" color="fg.muted" />
               }
             >
               <Input

package/src/components/Pagination/Pagination.tsx

@@ -106,7 +106,7 @@ export const Pagination = ({
               aria-label={translate('previous') as string}
               onClick={handleBack}
               disabled={currentPage <= 1}
-              color={currentPage === 1 ? 'gray.400' : 'gray.1000'}
+              color={currentPage === 1 ? 'fg.subtle' : 'fg.muted'}
             >
               <IoIosArrowBack boxSize="sm" />
             </IconButton>
@@ -116,7 +116,7 @@ export const Pagination = ({
               aria-label={translate('go_next_page_button') as string}
               onClick={handleNext}
               disabled={currentPage >= maxPage}
-              color={currentPage === maxPage ? 'gray.400' : 'gray.1000'}
+              color={currentPage === maxPage ? 'fg.subtle' : 'fg.muted'}
             >
               <IoChevronForward boxSize="sm" />
             </IconButton>

package/src/components/PinInput/PinInput.tsx

@@ -15,7 +15,7 @@ export const PinInput = ({
 }: PinInputProps) => {
   const pinInputRef = useRef<ReactPinInput>(null);
   const primaryColor = useToken('colors', 'primary.main')[0];
-  const grayColor = useToken('colors', 'gray.200')[0];
+  const grayColor = useToken('colors', 'border.default')[0];
 
   useEffect(() => {
     // Automatically focus the PinInput component on mount

package/src/components/Popover/PopoverArrowTip.tsx

@@ -6,7 +6,7 @@ import {
 
 export const PopoverArrowTip = forwardRef<HTMLDivElement, PopoverArrowTipProps>(
   (props, ref) => (
-    <ChakraPopover.ArrowTip ref={ref} borderColor="gray.200" {...props} />
+    <ChakraPopover.ArrowTip ref={ref} borderColor="border.subtle" {...props} />
   )
 );
 PopoverArrowTip.displayName = 'Popover.ArrowTip';

package/src/components/Popover/PopoverContent.tsx

@@ -16,7 +16,7 @@ export const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
         <ChakraPopover.Content
           ref={ref}
           borderWidth="1px"
-          borderColor="gray.200"
+          borderColor="border.subtle"
           {...props}
         >
           <ScaledContext fontSize={baseFontSize}>{children}</ScaledContext>

package/src/components/ProgressBar/ProgressBar.tsx

@@ -14,7 +14,7 @@ export const ProgressBar = ({
   return (
     <ChakraProgress.Root value={value} {...rest}>
       <ChakraProgress.Track
-        bgColor="gray.200"
+        bgColor="bg.muted"
         height={styles.height}
         borderRadius={styles.borderRadius}
         overflow="hidden"

package/src/components/RadialProgress/RadialProgress.stories.tsx

@@ -36,7 +36,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <Box p={8} bg="white" borderRadius="md">
+      <Box p={8} bg="bg.surface" borderRadius="md">
         <Story />
       </Box>
     ),

package/src/components/RadialProgress/RadialProgress.tsx

@@ -19,7 +19,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
   ...rest
 }) => {
   // useToken은 hook이므로 map 안이 아닌 최상위에서 호출
-  const colorTokens = segments.map((s) => s.color).concat('gray.200');
+  const colorTokens = segments.map((s) => s.color).concat('bg.muted');
   const resolvedColors = useToken('colors', colorTokens);
   const resolveColor = (token: string) =>
     resolvedColors[colorTokens.indexOf(token)] || token;
@@ -54,11 +54,11 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
   // Add gray segment for remaining space if needed
   const allSegments: Segment[] =
     segments.length === 0
-      ? [{ color: 'gray.200', value: total }] // Full gray circle if no segments
+      ? [{ color: 'bg.muted', value: total }] // Full gray circle if no segments
       : remainingValue > 0
         ? [
             ...segments,
-            { color: 'gray.200', value: remainingValue }, // Use token instead of theme.colors.gray[200]
+            { color: 'bg.muted', value: remainingValue }, // Use token instead of theme.colors.gray[200]
           ]
         : segments;
 
@@ -149,7 +149,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
       justifyContent="center"
       height={`${size}px`}
       width="100%"
-      backgroundColor="white"
+      backgroundColor="bg.surface"
       className={['ml-radial-progress', className].join(' ')}
       {...rest}
     >
@@ -168,7 +168,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
               cy={centerY}
               r={radius}
               fill="none"
-              stroke={resolveColor('gray.200')}
+              stroke={resolveColor('bg.muted')}
               strokeWidth={strokeWidth}
             />
           ) : (
@@ -196,7 +196,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
           <Text
             fontSize={`${fontSize}px`}
             fontWeight="500"
-            color="gray.600"
+            color="fg.subtle"
             fontFamily="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
             lineHeight="1"
           >
@@ -215,7 +215,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
           transform="translateX(-50%)"
           width={`${shadowWidth}px`}
           height={`${shadowHeight}px`}
-          background="gray.200"
+          background="bg.muted"
           borderRadius="50%"
           filter={`blur(${shadowBlur}px)`}
           opacity="0.3"

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

@@ -5,8 +5,8 @@ export const seeMoreButtonStyles = {
   display: 'flex',
   borderTop: '1px solid',
   borderRadius: 'none',
-  borderColor: 'gray.300',
-  color: 'gray.600',
+  borderColor: 'border.default',
+  color: 'fg.subtle',
   fontSize: 'subtitle',
   cursor: 'pointer',
 };

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -66,7 +66,10 @@ export const SegmentedControl = forwardRef<
         }
       }}
       size={size}
-      bg="gray.50"
+      // Track + selected-indicator flip with the mode (light values preserved:
+      // bg.subtle → gray.50, bg.surface → white/gray.0). The indicator's md
+      // shadow carries the raised affordance in both modes.
+      bg="bg.subtle"
       p="1"
       borderRadius={borderRadius}
       boxShadow="none"
@@ -74,7 +77,7 @@ export const SegmentedControl = forwardRef<
       {...rest}
       css={mergeCss(
         {
-          '--segment-indicator-bg': `var(--chakra-colors-gray-0)`,
+          '--segment-indicator-bg': `var(--chakra-colors-bg-surface)`,
           '--segment-indicator-shadow': `var(--chakra-shadows-md)`,
         },
         css
@@ -93,7 +96,7 @@ export const SegmentedControl = forwardRef<
         >
           <SegmentGroup.ItemText
             data-text={typeof item.label === 'string' ? item.label : undefined}
-            color="gray.800"
+            color="fg.muted"
             fontWeight="500"
             fontSize={fontSize}
             whiteSpace="nowrap"
@@ -111,7 +114,7 @@ export const SegmentedControl = forwardRef<
                 pointerEvents: 'none',
               },
               '[data-state="checked"] &': {
-                color: 'var(--chakra-colors-gray-1500)',
+                color: 'var(--chakra-colors-fg-default)',
                 fontWeight: '600',
               },
             }}

package/src/components/SegmentedProgressBar/ProgressSegment.tsx

@@ -10,7 +10,7 @@ export const ProgressSegment = ({ value, ...rest }: ProgressSegmentProps) => {
       max={value}
       width={`${(value / max) * 100}%`}
       height="100%"
-      bg="gray.200"
+      bg="bg.muted"
       borderRadius={0}
       {...rest}
     />

package/src/components/SegmentedProgressBar/SegmentedProgressBar.tsx

@@ -13,7 +13,7 @@ export const SegmentedProgressBar = ({
         position="relative"
         flex={1}
         display="flex"
-        bgColor="gray.200"
+        bgColor="bg.muted"
         borderRadius="full"
         w="100%"
         h="16px"

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

@@ -15,8 +15,9 @@ const focusVars = {
 
 const fieldBase = {
   ...focusVars,
-  bg: 'white',
-  borderColor: 'gray.400',
+  bg: 'bg.surface',
+  color: 'fg.default',
+  borderColor: { base: 'gray.400', _dark: 'gray.1100' },
   _hover: { borderColor: 'primary.lighter' },
   _focus: { borderColor: 'primary.main' },
   _invalid: {
@@ -27,8 +28,8 @@ const fieldBase = {
   _disabled: {
     opacity: 1,
     cursor: 'not-allowed',
-    bg: 'gray.50',
-    color: 'gray.1000',
+    bg: 'bg.subtle',
+    color: { base: 'gray.1000', _dark: 'gray.400' },
     fontWeight: 'semibold',
   },
 };
@@ -47,8 +48,8 @@ export const inputStyles = {
 
 /** Dropdown panel for both Select and Combobox. */
 export const contentStyles = {
-  bg: 'white',
-  borderColor: 'gray.300',
+  bg: 'bg.surface',
+  borderColor: 'border.default',
   borderWidth: '1px',
   borderRadius: '8px',
   boxShadow: '0px 5px 20px 0px rgba(0, 0, 0, 0.10)',
@@ -59,17 +60,17 @@ export const contentStyles = {
 export const itemStyles = {
   borderRadius: '4px',
   cursor: 'pointer',
-  color: 'gray.1200',
-  _highlighted: { bg: 'gray.50' },
+  color: 'fg.default',
+  _highlighted: { bg: 'bg.subtle' },
   _checked: {
     bg: 'primary.extralight',
     color: 'primary.dark',
     fontWeight: 'bold',
   },
-  _disabled: { color: 'gray.500', cursor: 'not-allowed' },
+  _disabled: { color: 'fg.subtle', cursor: 'not-allowed' },
 };
 
 /** Dropdown chevron — softened so it doesn't outweigh adjacent icons. */
 export const indicatorStyles = {
-  color: 'gray.600',
+  color: 'fg.muted',
 };

package/src/components/Slider/SliderFilledTrack/SliderFilledTrack.tsx

@@ -9,7 +9,7 @@ export const SliderFilledTrack = forwardRef(
       <Slider.Range
         bg="primary.main"
         _disabled={{
-          bg: 'gray.400',
+          bg: 'bg.muted',
         }}
         {...rest}
         ref={ref}

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

@@ -19,8 +19,8 @@ export const SliderThumb = forwardRef(
         borderWidth={3}
         borderStyle="solid"
         _disabled={{
-          bg: 'gray.100',
-          borderColor: 'gray.400',
+          bg: 'bg.muted',
+          borderColor: 'border.default',
           cursor: 'not-allowed',
         }}
         {...focusRing}

package/src/components/Slider/SliderTrack/SliderTrack.tsx

@@ -9,7 +9,7 @@ export const SliderTrack = forwardRef(
     ref?: ForwardedRef<HTMLDivElement>
   ) => {
     return (
-      <Slider.Track bg="gray.200" {...rest} ref={ref}>
+      <Slider.Track bg="bg.muted" {...rest} ref={ref}>
         {children}
       </Slider.Track>
     );

package/src/components/Spinner/Spinner.tsx

@@ -13,7 +13,7 @@ export const Spinner = forwardRef(
         animationDuration="0.65s"
         ref={ref}
         {...rest}
-        css={mergeCss({ '--spinner-track-color': 'colors.gray.200' }, css)}
+        css={mergeCss({ '--spinner-track-color': 'colors.bg.muted' }, css)}
       />
     );
   }

package/src/components/Switch/SwitchControl.tsx

@@ -7,7 +7,7 @@ export const SwitchControl = forwardRef<HTMLSpanElement, SwitchControlProps>(
   (props, ref) => (
     <ChakraSwitch.Control
       ref={ref}
-      bg="gray.200"
+      bg="bg.muted"
       _checked={{ bg: 'primary.main' }}
       {...focusRing}
       {...props}

package/src/components/Table/Table.styles.ts

@@ -28,7 +28,7 @@ export const getStickyStyles = (
     overflow: 'visible',
     [stickyDirection]: `${stickyOffset}px`,
     zIndex: 2,
-    backgroundColor: 'white',
+    backgroundColor: 'bg.surface',
     ...(shouldShowShadow && {
       _after: {
         content: '""',

package/src/components/Table/TableContainer.tsx

@@ -29,7 +29,7 @@ const TableContainerInner = forwardRef<HTMLDivElement, TableContainerProps>(
       <Table.ScrollArea
         border="1px solid"
         borderRadius="md"
-        borderColor="gray.200"
+        borderColor="border.subtle"
         ref={handleRef}
         {...rest}
       >

package/src/components/Table/Tbody.tsx

@@ -8,7 +8,7 @@ export const Tbody = forwardRef<HTMLTableSectionElement, Table.BodyProps>(
     return (
       <Table.Body
         ref={ref}
-        color="gray.1500"
+        color="fg.default"
         fontWeight="medium"
         {...props}
         css={mergeCss(

package/src/components/Table/Thead.tsx

@@ -1,5 +1,5 @@
 import { Table } from '@chakra-ui/react';
 
 export const Thead = ({ ...rest }: Table.HeaderProps) => {
-  return <Table.Header color="gray.800" fontWeight="medium" {...rest} />;
+  return <Table.Header color="fg.muted" fontWeight="medium" {...rest} />;
 };

package/src/components/Tabs/Tab/Tab.tsx

@@ -23,7 +23,7 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>(
           ref={ref}
           variant="ghost"
           colorPalette="neutral"
-          color="gray.800"
+          color="fg.muted"
           py={3}
           border="none"
           _selected={horizontalSelectedStyles}

package/src/components/Tabs/TabList/TabList.tsx

@@ -13,7 +13,7 @@ export const TabList = ({ children, css, ...props }: TabListProps) => {
       <Box
         width="100%"
         borderBottom="1px solid"
-        borderColor="gray.100"
+        borderColor="border.subtle"
         {...tabListStyles}
         {...props}
         css={mergeCss(

package/src/components/Tag/Tag.styles.ts

@@ -20,8 +20,8 @@ export const tagColorPaletteStyles: Record<
       color: 'primary.dark',
     },
     solid: {
-      bgColor: 'primary.main',
-      borderColor: 'primary.main',
+      bgColor: 'blue.500',
+      borderColor: 'blue.500',
       color: 'white',
     },
     outline: {
@@ -37,8 +37,8 @@ export const tagColorPaletteStyles: Record<
       color: 'secondary.dark',
     },
     solid: {
-      bgColor: 'secondary.main',
-      borderColor: 'secondary.main',
+      bgColor: 'violet.500',
+      borderColor: 'violet.500',
       color: 'white',
     },
     outline: {
@@ -54,8 +54,8 @@ export const tagColorPaletteStyles: Record<
       color: 'danger.dark',
     },
     solid: {
-      bgColor: 'danger.main',
-      borderColor: 'danger.main',
+      bgColor: 'rose.500',
+      borderColor: 'rose.500',
       color: 'white',
     },
     outline: {
@@ -71,8 +71,8 @@ export const tagColorPaletteStyles: Record<
       color: 'success.dark',
     },
     solid: {
-      bgColor: 'success.main',
-      borderColor: 'success.main',
+      bgColor: 'green.600',
+      borderColor: 'green.600',
       color: 'white',
     },
     outline: {
@@ -88,9 +88,9 @@ export const tagColorPaletteStyles: Record<
       color: 'warning.dark',
     },
     solid: {
-      bgColor: 'warning.main',
-      borderColor: 'warning.main',
-      color: 'white',
+      bgColor: 'gold.500',
+      borderColor: 'gold.500',
+      color: 'gold.900', // dark text: white/gold.500 was 2.39:1; gold.900 = 6.73:1
     },
     outline: {
       bgColor: 'transparent',
@@ -100,9 +100,12 @@ export const tagColorPaletteStyles: Record<
   },
   neutral: {
     soft: {
-      bgColor: 'gray.100',
-      borderColor: 'gray.300',
-      color: 'gray.800',
+      // Flip surface + border with the mode so the fg.muted text stays legible
+      // in dark. Light values preserved (bg.muted → gray.100, border.default →
+      // gray.300).
+      bgColor: 'bg.muted',
+      borderColor: 'border.default',
+      color: 'fg.muted',
     },
     solid: {
       bgColor: 'gray.800',
@@ -111,8 +114,8 @@ export const tagColorPaletteStyles: Record<
     },
     outline: {
       bgColor: 'transparent',
-      borderColor: 'gray.500',
-      color: 'gray.700',
+      borderColor: 'border.strong', // gray.500 / gray.900 (_dark)
+      color: 'fg.subtle',
     },
   },
 };

package/src/components/Textarea/Textarea.tsx

@@ -48,14 +48,17 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         readOnly={readOnly}
         data-invalid={invalid || undefined}
         resize="none"
-        bg="white"
+        bg="bg.surface"
+        color="fg.default"
         // Chakra v3 `Input` outline variant declares
         // `focusRingColor: var(--focus-color)`, but the matching
         // `Textarea` recipe does not — so the focus ring defaults to
         // `colorPalette.focusRing` (gray.400) and ends up visibly
         // different from Input/Select. Mirror Input's chain explicitly.
         focusRingColor={invalid ? 'danger.main' : 'primary.main'}
-        borderColor={invalid ? 'danger.main' : 'gray.400'}
+        borderColor={
+          invalid ? 'danger.main' : { base: 'gray.400', _dark: 'gray.1100' }
+        }
         _hover={{
           borderColor: invalid ? 'danger.main' : 'primary.lighter',
           ..._hover,
@@ -76,15 +79,15 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         _readOnly={{
           opacity: 1,
           cursor: 'not-allowed',
-          bg: 'gray.50',
-          color: 'gray.600',
-          borderColor: 'gray.200',
+          bg: 'bg.subtle',
+          color: 'fg.muted',
+          borderColor: 'border.subtle',
         }}
         _disabled={{
           opacity: 1,
           cursor: 'not-allowed',
-          bg: 'gray.50',
-          color: 'gray.1000',
+          bg: 'bg.subtle',
+          color: { base: 'gray.1000', _dark: 'gray.400' },
           fontWeight: 'semibold',
         }}
         {...props}

package/src/components/Typography/H3.tsx

@@ -8,7 +8,7 @@ export const H3 = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
     <Heading
       ref={ref}
       as="h3"
-      color="gray.1500"
+      color="fg.default"
       textStyle={fontSize ? undefined : 'h3'}
       fontSize={fontSize}
       wordBreak="keep-all"

package/src/components/Typography/Subtext.tsx

@@ -10,7 +10,7 @@ export const Subtext = forwardRef<HTMLParagraphElement, TextProps>(
         ref={ref}
         textStyle={fontSize ? undefined : 'subtext'}
         fontSize={fontSize}
-        color="gray.1500"
+        color="fg.default"
         wordBreak="keep-all"
         {...rest}
       />

package/src/components/Typography/Subtitle.tsx

@@ -11,7 +11,7 @@ export const Subtitle = forwardRef<HTMLParagraphElement, TextProps>(
         as="h6"
         textStyle={fontSize ? undefined : 'subtitle'}
         fontSize={fontSize}
-        color="gray.1000"
+        color="fg.muted"
         wordBreak="keep-all"
         {...rest}
       />

package/src/components/Typography/Text.tsx

@@ -13,7 +13,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
         // If fontSize is provided, disable textStyle to allow fontSize override
         textStyle={fontSize ? undefined : 'p'}
         fontSize={fontSize}
-        color="gray.1200"
+        color="fg.default"
         wordBreak="keep-all"
         {...rest}
       />

package/src/index.ts

@@ -11,6 +11,7 @@ export * from './components/Chip';
 export * from './components/Code';
 export * from './components/CodeTabs';
 export * from './components/Collapsible';
+export * from './components/ColorMode';
 export * from './components/Container';
 export * from './components/CopyableCode';
 export * from './components/DatePicker';
@@ -106,3 +107,4 @@ export { LanguageContext, useLanguage } from './hooks/useLanguage';
 
 // Theme exports
 export { logicianConfig, system, theme } from './theme';
+export type { SemanticColorToken } from './theme/colors';