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

package/src/components/ColorMode/useColorMode.ts

@@ -0,0 +1,74 @@
+'use client';
+import { useCallback } from 'react';
+import { useTheme } from 'next-themes';
+
+import type { ColorMode } from './ColorModeProvider';
+
+export interface UseColorModeReturn {
+  /**
+   * The resolved color mode actually being rendered: `'light'` or `'dark'`.
+   * If a forced mode is active (e.g. factchat's short-term force-light), this
+   * reflects the forced value.
+   */
+  colorMode: ColorMode;
+  /** The raw user preference, including `'system'`. */
+  colorModePreference: string | undefined;
+  /** Set the preference. Accepts `'light' | 'dark' | 'system'`. */
+  setColorMode: (mode: ColorMode | 'system') => void;
+  /** Toggle between light and dark based on the currently resolved mode. */
+  toggleColorMode: () => void;
+}
+
+/**
+ * Typed color-mode accessor backed by `next-themes`.
+ *
+ * Must be called under a {@link ColorModeProvider} (mounted by
+ * {@link LogicianProvider}).
+ *
+ * @example
+ * ```tsx
+ * const { colorMode, toggleColorMode } = useColorMode();
+ * ```
+ */
+export function useColorMode(): UseColorModeReturn {
+  const { theme, resolvedTheme, forcedTheme, setTheme } = useTheme();
+
+  // `colorMode` reflects what's actually rendered (a forced mode wins).
+  const colorMode = (forcedTheme ?? resolvedTheme ?? 'light') as ColorMode;
+
+  // Toggle/preference operate on the *user* preference, not the forced
+  // override — so a staged `forcedColorMode` rollout doesn't invert the stored
+  // value, and the preference is preserved for when the force is removed.
+  const resolvedPreference = (resolvedTheme ?? 'light') as ColorMode;
+
+  const toggleColorMode = useCallback(() => {
+    setTheme(resolvedPreference === 'dark' ? 'light' : 'dark');
+  }, [resolvedPreference, setTheme]);
+
+  return {
+    colorMode,
+    colorModePreference: theme,
+    setColorMode: setTheme,
+    toggleColorMode,
+  };
+}
+
+/**
+ * Returns one of two values based on the resolved color mode — the Logician
+ * equivalent of Chakra v2's `useColorModeValue`.
+ *
+ * Prefer semantic tokens (`color="fg.default"`) over this hook; reach for it
+ * only when a value can't be expressed as a token (e.g. a chart color array).
+ *
+ * @example
+ * ```tsx
+ * const stroke = useColorModeValue('#1751D0', '#4A79DC');
+ * ```
+ */
+export function useColorModeValue<TLight, TDark>(
+  light: TLight,
+  dark: TDark
+): TLight | TDark {
+  const { colorMode } = useColorMode();
+  return colorMode === 'dark' ? dark : light;
+}

package/src/components/CopyableCode/CopyableCode.tsx

@@ -33,7 +33,9 @@ export const CopyableCode = ({
           top={0}
           bottom={0}
           w={24}
-          bg="linear-gradient(to right, transparent, #fff 15%)"
+          // Fade matches the Card surface (bg.surface) so it flips with the
+          // mode instead of fading to white on dark.
+          bg="linear-gradient(to right, transparent, var(--chakra-colors-bg-surface) 15%)"
           pointerEvents="none"
         />
       </Card>

package/src/components/DatePicker/RangeDatePicker.tsx

@@ -39,7 +39,7 @@ export const RangeDatePicker = ({
       propsConfigs={{
         triggerBtnProps: {
           fontWeight: 'regular',
-          color: 'gray.1500',
+          color: 'fg.default',
           fontSize: 'md',
           ...propsConfigs?.triggerBtnProps,
         },
@@ -58,7 +58,10 @@ export const RangeDatePicker = ({
             boxShadow: 'lg',
             border: 'none',
             borderWidth: 0,
-            bg: 'gray.0',
+            // Flip the popover surface with the mode; gray.0 stayed white and
+            // framed the (already dark) calendars in dark mode. bg.surface keeps
+            // the same light value and resolves to gray.1400 under .dark.
+            bg: 'bg.surface',
             ...propsConfigs?.popoverCompProps?.popoverContentProps,
           },
           ...propsConfigs?.popoverCompProps,
@@ -79,7 +82,7 @@ export const RangeDatePicker = ({
             borderWidth: '1px',
             borderColor: 'primary.extralight',
             borderRadius: 16,
-            bg: 'white',
+            bg: 'bg.surface',
             ...propsConfigs?.calendarPanelProps?.contentProps,
           },
           bodyProps: {
@@ -95,7 +98,7 @@ export const RangeDatePicker = ({
         },
         weekdayLabelProps: {
           mb: 2,
-          color: 'gray.1000',
+          color: 'fg.muted',
           fontSize: 'sm',
           fontWeight: 'regular',
           ...propsConfigs?.weekdayLabelProps,
@@ -104,7 +107,7 @@ export const RangeDatePicker = ({
           defaultBtnProps: {
             width: 34,
             height: 34,
-            color: 'gray.1500',
+            color: 'fg.default',
             fontWeight: 'regular',
             _hover: {
               background: 'primary.extralight',
@@ -163,7 +166,7 @@ export const RangeDatePicker = ({
             {...(propsConfigs?.triggerBtnProps as ButtonProps)}
           >
             <MdOutlineCalendarToday
-              color="gray.400"
+              color="fg.subtle"
               style={{ marginInlineEnd: 3 }}
             />
             {selectedDates && selectedDates.length > 0

package/src/components/DatePicker/SingleDatePicker.tsx

@@ -40,7 +40,7 @@ export const SingleDatePicker = ({
         triggerBtnProps: {
           justifyContent: 'left',
           fontWeight: 'regular',
-          color: 'gray.1500',
+          color: 'fg.default',
           fontSize: 'md',
           ...propsConfigs?.triggerBtnProps,
         },
@@ -82,7 +82,7 @@ export const SingleDatePicker = ({
         },
         weekdayLabelProps: {
           mb: 2,
-          color: 'gray.1000',
+          color: 'fg.muted',
           fontWeight: 'regular',
           ...propsConfigs?.weekdayLabelProps,
         },
@@ -90,7 +90,7 @@ export const SingleDatePicker = ({
           defaultBtnProps: {
             width: 34,
             height: 34,
-            color: 'gray.1500',
+            color: 'fg.default',
             fontSize: 'sm',
             fontWeight: 'regular',
             _hover: {
@@ -124,7 +124,7 @@ export const SingleDatePicker = ({
             {...(propsConfigs?.triggerBtnProps as ButtonProps)}
           >
             <MdOutlineCalendarToday
-              color="gray.400"
+              color="fg.subtle"
               style={{ marginInlineEnd: 3 }}
             />
             {selectedDate

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -67,7 +67,7 @@ User Agent: ${errorInfo.userAgent}`;
           p={12}
           textAlign="center"
           w="full"
-          bgColor="white"
+          bgColor="bg.surface"
           boxShadow="2xl"
         >
           <VStack gap={6} align="center" w="full" mx="auto">
@@ -83,10 +83,10 @@ User Agent: ${errorInfo.userAgent}`;
 
             {/* Error Title */}
             <VStack gap={3} align="center" w="full">
-              <H1 color="gray.1200" textStyle="h2" fontWeight="bold">
+              <H1 color="fg.default" textStyle="h2" fontWeight="bold">
                 {translate('error_boundary_title')}
               </H1>
-              <Subtitle color="gray.1000" textStyle="h5" maxW="md">
+              <Subtitle color="fg.muted" textStyle="h5" maxW="md">
                 {translate('error_boundary_subtitle')}
               </Subtitle>
             </VStack>

package/src/components/FileInput/FileInput.tsx

@@ -36,7 +36,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
         align="center"
         justify="center"
         border="1px dashed"
-        borderColor="gray.300"
+        borderColor="border.default"
         position="relative"
         overflow="hidden"
         borderRadius="md"
@@ -85,14 +85,14 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
               <Flex w="100%" flexDir="column" align="center" justify="center">
                 <Box
                   borderRadius="lg"
-                  bgColor={bgImage ? 'transparent' : 'gray.100'}
+                  bgColor={bgImage ? 'transparent' : 'bg.muted'}
                   p={3}
                   mb={2}
                   w="fit-content"
                 >
-                  <LuUpload color={bgImage ? 'gray.1200' : 'gray.600'} />
+                  <LuUpload color={bgImage ? 'fg.default' : 'fg.subtle'} />
                 </Box>
-                <Text color={bgImage ? 'gray.1200' : 'gray.600'}>
+                <Text color={bgImage ? 'fg.default' : 'fg.subtle'}>
                   {fileInputLabel || translate('upload_your_file')}
                 </Text>
               </Flex>

package/src/components/FileItem/FileItem.tsx

@@ -44,7 +44,7 @@ export const FileItem = ({
       justifyContent="space-between"
       alignItems="center"
       border="1px solid"
-      borderColor="gray.200"
+      borderColor="border.subtle"
       w="100%"
       position="relative"
       _before={{
@@ -60,7 +60,7 @@ export const FileItem = ({
     >
       <Flex w="60%" alignItems="center" gap={2}>
         <Box minW={5}>
-          <CiFileOn color={error ? errorColor : 'gray.800'} />
+          <CiFileOn color={error ? errorColor : 'fg.muted'} />
         </Box>
         <Text truncate color={error ? errorColor : undefined}>
           {fileName}
@@ -89,7 +89,7 @@ export const FileItem = ({
                   colorPalette="neutral"
                   variant="ghost"
                 >
-                  <IoClose color="gray.600" boxSize="md" />
+                  <IoClose color="fg.subtle" boxSize="md" />
                 </IconButton>
               </Flex>
             )}
@@ -113,7 +113,7 @@ export const FileItem = ({
                       colorPalette="neutral"
                       variant="ghost"
                     >
-                      <LuDownload color="gray.800" />
+                      <LuDownload color="fg.muted" />
                     </IconButton>
                   </Tooltip>
                 )}
@@ -134,7 +134,7 @@ export const FileItem = ({
                       colorPalette="neutral"
                       variant="ghost"
                     >
-                      <FaRegTrashAlt boxSize="sm" color="gray.800" />
+                      <FaRegTrashAlt boxSize="sm" color="fg.muted" />
                     </IconButton>
                   </Tooltip>
                 )}

package/src/components/FileList/FileList.tsx

@@ -48,7 +48,7 @@ export const FileList = ({
     <Box
       w="100%"
       border="1px solid"
-      borderColor="gray.200"
+      borderColor="border.subtle"
       borderRadius="md"
       overflow="hidden"
     >
@@ -67,7 +67,7 @@ export const FileList = ({
               }
               border={0}
               borderBottom="1px solid"
-              borderBottomColor="gray.50"
+              borderBottomColor="border.subtle"
               progress={file.progress}
               error={file.error}
               fileSize={file.size}
@@ -91,10 +91,10 @@ export const FileList = ({
             cursor: 'pointer',
           }}
         >
-          <Subtitle color="gray.600">
+          <Subtitle color="fg.subtle">
             {translate('see_more')} ({visibleCount}/{files.length})
           </Subtitle>
-          <IoChevronDownOutline color="gray.600" />
+          <IoChevronDownOutline color="fg.subtle" />
         </Button>
       )}
     </Box>

package/src/components/FormLabel/FormLabel.tsx

@@ -1,7 +1,7 @@
 import { Box, Field } from '@chakra-ui/react';
 
 export const FormLabel = (props: Field.LabelProps) => (
-  <Box color="gray.1000">
+  <Box color="fg.muted">
     <Field.Label
       {...props}
       style={{

package/src/components/IconButton/IconButton.styles.ts

@@ -27,7 +27,7 @@ export const iconButtonColorPaletteStyles: Record<
     ...buttonColorPaletteStyles.neutral,
     ghost: {
       ...buttonColorPaletteStyles.neutral.ghost,
-      color: 'gray.600',
+      color: 'fg.subtle',
     },
   },
 };

package/src/components/InfoSprinkle/InfoSprinkle.tsx

@@ -29,7 +29,7 @@ export const InfoSprinkle = ({
           {...iconButtonProps}
         >
           <LuInfo
-            color={(iconButtonProps?.color as string) ?? 'gray.1000'}
+            color={(iconButtonProps?.color as string) ?? 'fg.muted'}
             boxSize={iconButtonProps?.size ?? 'xs'}
           />
         </IconButton>

package/src/components/InlineCode/InlineCode.tsx

@@ -6,7 +6,7 @@ import {
 export const InlineCode = ({ children, ...rest }: ChakraCodeProps) => {
   return (
     <ChakraCode
-      bg="gray.50"
+      bg="bg.subtle"
       color="primary.dark"
       borderRadius="sm"
       textStyle="p"

package/src/components/Input/Input.tsx

@@ -318,8 +318,11 @@ export const Input = forwardRef(
           disabled={disabled}
           readOnly={readOnly}
           data-invalid={invalid || undefined}
-          bg="white"
-          borderColor={invalid ? 'danger.main' : 'gray.400'}
+          bg="bg.surface"
+          color="fg.default"
+          borderColor={
+            invalid ? 'danger.main' : { base: 'gray.400', _dark: 'gray.1100' }
+          }
           _hover={{
             borderColor: invalid ? 'danger.main' : 'primary.lighter',
             ..._hover,
@@ -340,15 +343,15 @@ export const Input = forwardRef(
           _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',
           }}
           {...rest}

package/src/components/LineGraph/LineGraph.tsx

@@ -35,15 +35,18 @@ export const LineGraph = <T extends DatumBase>({
             // No dashes
             strokeDasharray=""
             vertical={false}
-            stroke="gray.400"
+            // recharts passes this straight to SVG and never resolves Chakra
+            // tokens, so use the CSS var directly — it flips with the .dark class.
+            stroke="var(--chakra-colors-border-default)"
           />
           <XAxis
             dataKey="name"
             // Color of line
             stroke="transparent"
-            // Props of text
+            // Props of text. CSS var (not a Chakra token) so the axis labels
+            // flip with the mode — recharts won't resolve 'gray.1200' itself.
             tick={{
-              fill: 'gray.1200',
+              fill: 'var(--chakra-colors-fg-muted)',
               fontSize: `${useToken('fontSizes', 'sm')}`,
             }}
             tickMargin={8}
@@ -51,9 +54,9 @@ export const LineGraph = <T extends DatumBase>({
           <YAxis
             // Color of line
             stroke="transparent"
-            // Props of text
+            // CSS var (see XAxis) so the labels flip with the mode.
             tick={{
-              fill: 'gray.1200',
+              fill: 'var(--chakra-colors-fg-muted)',
               fontSize: `${useToken('fontSizes', 'sm')}`,
             }}
             tickMargin={0}

package/src/components/Loaders/PageLoader.tsx

@@ -16,7 +16,7 @@ export const PageLoader = ({
       justify="center"
       opacity={isLoading ? 0.5 : 0}
       transition="0.3s opacity ease"
-      bg="white"
+      bg="bg.canvas"
       zIndex={9999}
       {...rest}
     >

package/src/components/Loaders/SectionLoader.tsx

@@ -15,7 +15,7 @@ export const SectionLoader = ({
       left={0}
       align="center"
       justify="center"
-      bg="white"
+      bg="bg.canvas"
       transition="0.3 opacity ease"
       zIndex={9999}
       {...rest}

package/src/components/LogicianProvider/LogicianProvider.tsx

@@ -3,6 +3,8 @@ import React, { useEffect, useMemo } from 'react';
 import type { SystemConfig } from '@chakra-ui/react';
 import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react';
 
+import type { ColorMode } from '@/components/ColorMode';
+import { ColorModeProvider } from '@/components/ColorMode';
 import type { SupportedLanguage } from '@/components/MonthPicker/constants';
 import { LanguageContext } from '@/hooks/useLanguage';
 
@@ -85,6 +87,28 @@ export interface LogicianProviderProps {
    * @default true
    */
   loadFonts?: boolean;
+
+  /**
+   * Initial color mode preference when none is stored.
+   * @default 'system'
+   */
+  defaultColorMode?: ColorMode | 'system';
+
+  /**
+   * Pin the app to a single color mode, ignoring stored/system preference.
+   * Use for a staged rollout (e.g. force light while a product migrates its
+   * components). Leave undefined for normal light/dark/system behavior.
+   */
+  forcedColorMode?: ColorMode;
+
+  /**
+   * Set to `false` to skip mounting the color-mode provider — e.g. if the host
+   * app already mounts its own. Disabling it means `useColorMode`,
+   * `useColorModeValue`, and `ColorModeToggle` won't work unless a
+   * `ColorModeProvider` is supplied elsewhere.
+   * @default true
+   */
+  enableColorMode?: boolean;
   children?: React.ReactNode;
 }
 
@@ -111,6 +135,9 @@ export const LogicianProvider: React.FC<LogicianProviderProps> = ({
   config,
   language = 'en',
   loadFonts = true,
+  defaultColorMode = 'system',
+  forcedColorMode,
+  enableColorMode = true,
   children,
 }) => {
   useEffect(() => {
@@ -129,11 +156,24 @@ export const LogicianProvider: React.FC<LogicianProviderProps> = ({
 
   const languageValue = useMemo(() => ({ language }), [language]);
 
-  return (
+  const tree = (
     <LanguageContext.Provider value={languageValue}>
       <ChakraProvider value={system}>{children}</ChakraProvider>
     </LanguageContext.Provider>
   );
+
+  if (!enableColorMode) {
+    return tree;
+  }
+
+  return (
+    <ColorModeProvider
+      defaultTheme={defaultColorMode}
+      forcedTheme={forcedColorMode}
+    >
+      {tree}
+    </ColorModeProvider>
+  );
 };
 
 LogicianProvider.displayName = 'LogicianProvider';

package/src/components/MDXEditor/MDXEditor.css

@@ -19,3 +19,22 @@
 [data-radix-select-content] {
   z-index: 9999 !important;
 }
+
+/*
+ * Block-type select dropdown popup. It's portaled outside `.mdxeditor`, so the
+ * scoped css prop can't reach it — flip its surface/text/highlight onto the
+ * semantic tokens here (they resolve per color mode via the `.dark` class).
+ */
+.mdxeditor-select-content {
+  background: var(--chakra-colors-bg-surface) !important;
+  color: var(--chakra-colors-fg-default);
+}
+
+.mdxeditor-select-content [class*='_selectItem_'] {
+  color: var(--chakra-colors-fg-default);
+}
+
+.mdxeditor-select-content [class*='_selectItem_'][data-highlighted],
+.mdxeditor-select-content [class*='_selectItem_']:hover {
+  background: var(--chakra-colors-bg-muted) !important;
+}

package/src/components/MDXEditor/MDXEditor.tsx

@@ -39,16 +39,6 @@ export const MDXEditor = forwardRef<
   const [error, setError] = useState<string | null>(null);
 
   // Resolve theme tokens to actual values
-  const [gray50, gray100, gray800, primaryLight, primaryLighter, primaryMain] =
-    useToken('colors', [
-      'gray.50',
-      'gray.100',
-      'gray.800',
-      'primary.light',
-      'primary.lighter',
-      'primary.main',
-    ]);
-
   const [space1, space2, space4] = useToken('spacing', ['1', '2', '4']);
   const [radiusSm] = useToken('radii', ['sm']);
 
@@ -99,7 +89,7 @@ export const MDXEditor = forwardRef<
           width: '100%',
           minHeight: '300px',
           height: '100%',
-          background: 'white',
+          background: 'var(--chakra-colors-bg-surface)',
           display: 'flex',
           flexDirection: 'column',
         },
@@ -108,10 +98,16 @@ export const MDXEditor = forwardRef<
           gap: space2,
           padding: space2,
           borderBottomWidth: '1px',
-          background: gray50,
+          background: 'var(--chakra-colors-bg-subtle)',
           flexShrink: 0,
           cursor: 'default',
         },
+        // Block-type select trigger in the toolbar — mdxeditor themes it with
+        // its own vars (left white), so flip it onto the semantic surface.
+        '& [class*="_selectTrigger_"]': {
+          background: 'var(--chakra-colors-bg-surface)',
+          color: 'var(--chakra-colors-fg-default)',
+        },
         // Target the root contenteditable wrapper
         '& [class*="_rootContentEditableWrapper_"]': {
           flex: 1,
@@ -135,7 +131,7 @@ export const MDXEditor = forwardRef<
         },
         '& .content-editable': {
           padding: space4,
-          color: 'black',
+          color: 'var(--chakra-colors-fg-default)',
           display: 'flex',
           flexDirection: 'column',
           gap: radiusSm,
@@ -221,22 +217,22 @@ export const MDXEditor = forwardRef<
 
           '& blockquote': {
             borderLeftWidth: '4px',
-            borderLeftColor: primaryLight,
-            background: primaryLighter,
+            borderLeftColor: 'var(--chakra-colors-primary-light)',
+            background: 'var(--chakra-colors-primary-lighter)',
             paddingLeft: space4,
             paddingBlock: space2,
             marginBlock: space4,
-            color: gray800,
+            color: 'var(--chakra-colors-fg-muted)',
           },
 
           '& a': {
-            color: primaryMain,
+            color: 'var(--chakra-colors-primary-main)',
             textDecoration: 'underline',
           },
 
           '& code': {
             fontFamily: 'mono',
-            background: gray100,
+            background: 'var(--chakra-colors-bg-muted)',
             paddingInline: space1,
             borderRadius: radiusSm,
 

package/src/components/Markdown/Markdown.module.css

@@ -1,5 +1,5 @@
 .markdownStyles {
-  color: black;
+  color: var(--chakra-colors-fg-default, #1e2433);
   display: flex;
   flex-direction: column;
   gap: 1em; /* Intended for longer form content like update modals */

package/src/components/MaxLengthIndicator/MaxLengthIndicator.tsx

@@ -18,7 +18,7 @@ export const MaxLengthIndicator = ({
   }, [value]);
 
   return (
-    <Subtitle textStyle="subtext" color="gray.600" {...rest}>
+    <Subtitle textStyle="subtext" color="fg.subtle" {...rest}>
       {currentValue}/{maxLength}
     </Subtitle>
   );

package/src/components/Menu/MenuItem.tsx

@@ -17,15 +17,18 @@ export const MenuItem = ({
   return (
     <Menu.Item
       value={value}
-      color={isDangerVariant ? 'danger.main' : 'gray.1000'}
+      // Map item text/hover onto semantic tokens so they flip with the mode.
+      // Was gray.1000 / hover gray.1500 / hover bg gray.50 — none flipped, so
+      // items rendered dim and hover went near-black on a dark menu.
+      color={isDangerVariant ? 'danger.main' : 'fg.muted'}
       py={2}
       minW="fit-content"
       fontWeight="semibold"
       gap={3}
       cursor="pointer"
       _hover={{
-        color: isDangerVariant ? 'danger.main' : 'gray.1500',
-        backgroundColor: isDangerVariant ? 'danger.lightest' : 'gray.50',
+        color: isDangerVariant ? 'danger.main' : 'fg.default',
+        backgroundColor: isDangerVariant ? 'danger.lightest' : 'bg.subtle',
       }}
       {...focusRing}
       {...rest}