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

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"

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/SliderThumb/SliderThumb.tsx

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

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';

package/src/theme/Palette.stories.tsx

@@ -6,7 +6,7 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
-import { lighten, readableColor } from 'polished';
+import { readableColor } from 'polished';
 import { MouseEventHandler, useState } from 'react';
 
 import { Tooltip } from '../components/Tooltip';
@@ -27,20 +27,48 @@ import { colors, semanticTokens } from './colors';
  * E.g., '{colors.blue.500}' -> '#1751D0'
  */
 const resolveTokenReference = (reference: string): string => {
-  // Check if it's a reference string like '{colors.blue.500}'
-  const match = reference.match(/^\{colors\.(\w+)\.(\d+)\}$/);
-  if (!match) {
-    // Already a hex value or unknown format
+  // Scale reference, e.g. '{colors.blue.500}' or '{colors.gray.1500}'.
+  const scaleMatch = reference.match(/^\{colors\.(\w+)\.(\w+)\}$/);
+  if (scaleMatch) {
+    const [, colorName, shade] = scaleMatch;
+    const colorScale = (colors as any)[colorName];
+    if (colorScale && colorScale[shade]) {
+      return colorScale[shade].value;
+    }
     return reference;
   }
-  const [, colorName, shade] = match;
-  const colorScale = (colors as any)[colorName];
-  if (colorScale && colorScale[shade]) {
-    return colorScale[shade].value;
+  // Flat reference with no shade, e.g. '{colors.white}' / '{colors.black}'.
+  const flatMatch = reference.match(/^\{colors\.(\w+)\}$/);
+  if (flatMatch) {
+    const entry = (colors as any)[flatMatch[1]];
+    if (entry && typeof entry.value === 'string') {
+      return entry.value;
+    }
   }
+  // Already a hex value or unknown format.
   return reference;
 };
 
+/**
+ * A semantic token `value` is either a plain reference string (legacy) or a
+ * mode-conditional object `{ base, _dark }`. Resolve it to concrete light/dark
+ * hex codes so the palette can show both modes side by side.
+ */
+type TokenValue = string | { base: string; _dark?: string };
+
+const resolveTokenValue = (
+  value: TokenValue
+): { light: string; dark: string } => {
+  if (typeof value === 'string') {
+    const hex = resolveTokenReference(value);
+    return { light: hex, dark: hex };
+  }
+  return {
+    light: resolveTokenReference(value.base),
+    dark: resolveTokenReference(value._dark ?? value.base),
+  };
+};
+
 const meta = {
   title: 'Setup/Theme',
   parameters: {
@@ -84,6 +112,59 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+// Safe readableColor that falls back to black
+const safeReadableColor = (color: string) => {
+  try {
+    return readableColor(color);
+  } catch {
+    return '#000000';
+  }
+};
+
+const SwatchHalf = ({
+  label,
+  hex,
+}: {
+  label: string;
+  hex: string;
+}) => {
+  const [wasCopied, setWasCopied] = useState<boolean>();
+  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
+    navigator.clipboard.writeText(hex);
+    setWasCopied(true);
+    setTimeout(() => setWasCopied(false), 2000);
+  };
+  return (
+    <Tooltip content="Copy hex code" placement="top">
+      <Flex
+        flex="1"
+        h="72px"
+        direction="column"
+        justify="space-between"
+        bg={hex}
+        p={2}
+        as="button"
+        transition="transform 0.1s ease-in-out"
+        // @ts-expect-error as prop
+        onClick={handleClick}
+        _hover={{ transform: 'scale(1.03)' }}
+      >
+        <Text color={safeReadableColor(hex)} fontSize="10px" textAlign="left">
+          {label}
+        </Text>
+        <Text
+          color={safeReadableColor(hex)}
+          fontSize="10px"
+          fontFamily="mono"
+          textAlign="left"
+        >
+          {wasCopied ? 'Copied!' : hex}
+        </Text>
+      </Flex>
+    </Tooltip>
+  );
+};
+
 const ColorCard = ({
   color,
   shade,
@@ -91,88 +172,33 @@ const ColorCard = ({
 }: {
   color: string;
   shade: string;
-  shadeValue: string;
+  shadeValue: TokenValue;
 }) => {
-  const [wasCopied, setWasCopied] = useState<boolean>();
-  // Resolve the token reference to actual hex value
-  const hexCode = resolveTokenReference(shadeValue);
-
-  const handleClick: MouseEventHandler<HTMLButtonElement> = () => {
-    navigator.clipboard.writeText(hexCode);
-    setWasCopied(true);
-    setTimeout(() => {
-      setWasCopied(false);
-    }, 2000);
-  };
-
-  // Safe lighten that falls back to the original color
-  const safeLighten = (amount: number, color: string) => {
-    try {
-      return lighten(amount, color);
-    } catch {
-      return color;
-    }
-  };
-
-  // Safe readableColor that falls back to black
-  const safeReadableColor = (color: string) => {
-    try {
-      return readableColor(color);
-    } catch {
-      return '#000000';
-    }
-  };
+  // Resolve to concrete light/dark hex so both modes are visible at once.
+  const { light, dark } = resolveTokenValue(shadeValue);
+  const hasDark = dark !== light;
 
   return (
-    <Flex flexDir="column" align="center" key={shade} p={3}>
-      <Tooltip content="Copy hex code" placement="top">
-        <Flex
-          w="100px"
-          h="100px"
-          align="flex-end"
-          bg={hexCode}
-          borderRadius="md"
-          boxShadow="md"
-          as="button"
-          transition="transform 0.1s ease-in-out"
-          // @ts-expect-error as prop
-          onClick={handleClick}
-          _hover={{
-            transform: 'scale(1.05)',
-          }}
-        >
-          {wasCopied ? (
-            <Flex
-              color={safeReadableColor(hexCode)}
-              w="100%"
-              h="100%"
-              justify="center"
-              align="center"
-            >
-              Copied!
-            </Flex>
-          ) : (
-            <Box
-              textAlign="center"
-              mt={4}
-              color={safeReadableColor(safeLighten(0.2, hexCode))}
-              bgColor={safeLighten(0.2, hexCode)}
-              m={2}
-              p={1}
-              w="100%"
-              borderRadius="md"
-            >
-              <Text color="inherit" textStyle="subtext">
-                {hexCode}
-              </Text>
-            </Box>
-          )}
-        </Flex>
-      </Tooltip>
-      <Text color="gray.1200" mt={2} textStyle="subtext" textAlign="center" wordBreak="break-word">
+    <Flex flexDir="column" align="stretch" key={shade} p={2}>
+      <Flex
+        borderRadius="md"
+        overflow="hidden"
+        boxShadow="md"
+        border="1px solid"
+        borderColor="border.subtle"
+      >
+        <SwatchHalf label={hasDark ? 'Light' : ''} hex={light} />
+        {hasDark && <SwatchHalf label="Dark" hex={dark} />}
+      </Flex>
+      <Text
+        color="fg.muted"
+        mt={2}
+        textStyle="subtext"
+        textAlign="center"
+        wordBreak="break-word"
+      >
         {color}.{shade}
       </Text>
-      <Subtext color="gray.700" textAlign="center" wordBreak="break-word">{shadeValue !== hexCode && shadeValue}</Subtext>
     </Flex>
   );
 };
@@ -275,7 +301,7 @@ export const SemanticTokens: Story = {
                     key={shade}
                     color={color}
                     shade={shade}
-                    shadeValue={(shadeValue as any).value as string}
+                    shadeValue={(shadeValue as any).value as TokenValue}
                   />
                 ))}
               </Grid>
@@ -733,7 +759,7 @@ export const Default: Story = {
                     key={shade}
                     color={color}
                     shade={shade}
-                    shadeValue={(shadeValue as any).value as string}
+                    shadeValue={(shadeValue as any).value as TokenValue}
                   />
                 ))}
               </Grid>