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

package/src/components/Button/Button.styles.ts

@@ -1,59 +1,384 @@
-import { ButtonProps } from '@chakra-ui/react';
+import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 
-import { ButtonVariant } from '@/components/Button/Button.types';
-import theme from '@/theme/index';
+import { ButtonColorPalette, ButtonVariant } from './Button.types';
 
-export const variantStyles: Record<
-  Exclude<ButtonVariant, undefined>,
-  Partial<ButtonProps>
+type StyleProps = Partial<ChakraButtonProps>;
+
+/**
+ * Two-dimensional Button styles using the Golden Ratio color system.
+ *
+ * Combines `colorPalette` (semantic color) with `variant` (visual appearance)
+ * to create a flexible, consistent button styling system.
+ *
+ * ## Color Palettes:
+ * - `primary`: Blue - main brand actions
+ * - `secondary`: Violet - accent actions
+ * - `danger`: Rose - destructive actions
+ * - `success`: Green - positive actions
+ * - `warning`: Gold - caution actions
+ * - `neutral`: Gray - low-emphasis actions
+ *
+ * ## Variants:
+ * - `solid`: Filled background (most prominent)
+ * - `soft`: Light tinted background (subtle)
+ * - `outline`: Border only (medium emphasis)
+ * - `ghost`: No background or border (lowest emphasis)
+ */
+export const buttonColorPaletteStyles: Record<
+  ButtonColorPalette,
+  Record<ButtonVariant, StyleProps>
 > = {
+  /**
+   * Primary (Blue) color scheme
+   */
   primary: {
-    borderColor: 'primary.main',
-    bgColor: 'primary.main',
-    color: 'white',
-    _hover: {
-      borderColor: 'blue.800',
-      bgColor: 'blue.800',
+    solid: {
+      borderColor: 'primary.main',
+      bgColor: 'primary.main', // #1751D0
+      color: 'white',
+      _hover: {
+        borderColor: 'blue.600',
+        bgColor: 'blue.600', // #1241A6
+      },
+      _active: {
+        bgColor: 'primary.dark', // #0D317D
+      },
+    },
+    soft: {
+      borderColor: 'primary.lighter', // #B9CBF3
+      bgColor: 'primary.lightest', // #E8EEFB
+      color: 'primary.dark', // #0D317D
+      _hover: {
+        borderColor: 'primary.light',
+        bgColor: 'primary.lighter', // #B9CBF3
+      },
+      _active: {
+        bgColor: 'primary.light', // #7DA0E8
+      },
+    },
+    outline: {
+      borderColor: 'primary.main',
+      bgColor: 'transparent',
+      color: 'primary.main',
+      _hover: {
+        bgColor: 'primary.lightest', // #E8EEFB
+      },
+      _active: {
+        bgColor: 'primary.lighter', // #B9CBF3
+      },
     },
-    // TODO: pressed styles currently not applying accurately in Storybook
-    _pressed: {
-      bgColor: 'blue.1000',
+    ghost: {
+      borderColor: 'transparent',
+      bgColor: 'transparent',
+      color: 'primary.main',
+      _hover: {
+        bgColor: 'primary.lightest', // #E8EEFB
+      },
+      _active: {
+        bgColor: 'primary.lighter', // #B9CBF3
+      },
     },
   },
+
+  /**
+   * Secondary (Violet) color scheme
+   */
   secondary: {
-    borderColor: '#dbe7ff',
-    bgColor: 'primary.light',
-    color: 'primary.main',
-    _hover: {
-      borderColor: '#c8d9ff',
-      bgColor: 'blue.200',
+    solid: {
+      borderColor: 'secondary.main',
+      bgColor: 'secondary.main', // #9117D0
+      color: 'white',
+      _hover: {
+        borderColor: 'violet.600',
+        bgColor: 'violet.600', // #7412A6
+      },
+      _active: {
+        bgColor: 'secondary.dark', // #570D7D
+      },
     },
-    _pressed: {
-      bgColor: 'blue.400',
+    soft: {
+      borderColor: 'secondary.lighter', // #DEB9F3
+      bgColor: 'secondary.lightest', // #F4E8FB
+      color: 'secondary.dark', // #570D7D
+      _hover: {
+        borderColor: 'secondary.light',
+        bgColor: 'secondary.lighter', // #DEB9F3
+      },
+      _active: {
+        bgColor: 'secondary.light', // #C17DE8
+      },
     },
-  },
-  tertiary: {
-    borderColor: 'gray.400',
-    bgColor: 'white',
-    color: 'gray.1200',
-    _hover: {
-      bgColor: 'gray.50',
+    outline: {
+      borderColor: 'secondary.main',
+      bgColor: 'transparent',
+      color: 'secondary.main',
+      _hover: {
+        bgColor: 'secondary.lightest', // #F4E8FB
+      },
+      _active: {
+        bgColor: 'secondary.lighter', // #DEB9F3
+      },
+    },
+    ghost: {
+      borderColor: 'transparent',
+      bgColor: 'transparent',
+      color: 'secondary.main',
+      _hover: {
+        bgColor: 'secondary.lightest', // #F4E8FB
+      },
+      _active: {
+        bgColor: 'secondary.lighter', // #DEB9F3
+      },
     },
   },
+
+  /**
+   * Danger (Rose) color scheme
+   */
   danger: {
-    borderColor: 'danger.main',
-    bgColor: 'danger.main',
-    color: 'white',
-    _hover: {
-      bgColor: theme.colors.red[600],
+    solid: {
+      borderColor: 'danger.main',
+      bgColor: 'danger.main', // #D01721
+      color: 'white',
+      _hover: {
+        borderColor: 'rose.600',
+        bgColor: 'rose.600', // #A6121A
+      },
+      _active: {
+        bgColor: 'danger.dark', // #7D0D14
+      },
+    },
+    soft: {
+      borderColor: 'danger.lighter', // #F3B9BD
+      bgColor: 'danger.lightest', // #FBE8E9
+      color: 'danger.dark', // #7D0D14
+      _hover: {
+        borderColor: 'danger.light',
+        bgColor: 'danger.lighter', // #F3B9BD
+      },
+      _active: {
+        bgColor: 'danger.light', // #E87D84
+      },
+    },
+    outline: {
+      borderColor: 'danger.main',
+      bgColor: 'transparent',
+      color: 'danger.main',
+      _hover: {
+        bgColor: 'danger.lightest', // #FBE8E9
+      },
+      _active: {
+        bgColor: 'danger.lighter', // #F3B9BD
+      },
+    },
+    ghost: {
+      borderColor: 'transparent',
+      bgColor: 'transparent',
+      color: 'danger.main',
+      _hover: {
+        bgColor: 'danger.lightest', // #FBE8E9
+      },
+      _active: {
+        bgColor: 'danger.lighter', // #F3B9BD
+      },
     },
   },
-  link: {
-    borderColor: 'transparent',
-    bgColor: 'transparent',
-    borderRadius: 'none',
-    _hover: {
+
+  /**
+   * Success (Green) color scheme
+   */
+  success: {
+    solid: {
+      borderColor: 'success.main',
+      bgColor: 'success.main', // #1AA612
+      color: 'white',
+      _hover: {
+        borderColor: 'success.dark',
+        bgColor: 'success.dark', // #147D0D
+      },
+      _active: {
+        bgColor: 'green.800', // #0D5309
+      },
+    },
+    soft: {
+      borderColor: 'success.lighter', // #BDF3B9
+      bgColor: 'success.lightest', // #E9FBE8
+      color: 'success.dark', // #147D0D
+      _hover: {
+        borderColor: 'success.light',
+        bgColor: 'success.lighter', // #BDF3B9
+      },
+      _active: {
+        bgColor: 'success.light', // #84E87D
+      },
+    },
+    outline: {
+      borderColor: 'success.main',
       bgColor: 'transparent',
+      color: 'success.main',
+      _hover: {
+        bgColor: 'success.lightest', // #E9FBE8
+      },
+      _active: {
+        bgColor: 'success.lighter', // #BDF3B9
+      },
+    },
+    ghost: {
+      borderColor: 'transparent',
+      bgColor: 'transparent',
+      color: 'success.main',
+      _hover: {
+        bgColor: 'success.lightest', // #E9FBE8
+      },
+      _active: {
+        bgColor: 'success.lighter', // #BDF3B9
+      },
     },
   },
+
+  /**
+   * Warning (Gold) color scheme
+   */
+  warning: {
+    solid: {
+      borderColor: 'warning.main',
+      bgColor: 'warning.main', // #D0A117
+      color: 'white',
+      _hover: {
+        borderColor: 'gold.600',
+        bgColor: 'gold.600', // #A68112
+      },
+      _active: {
+        bgColor: 'warning.dark', // #7D610D
+      },
+    },
+    soft: {
+      borderColor: 'warning.lighter', // #F3E4B9
+      bgColor: 'warning.lightest', // #FBF6E8
+      color: 'warning.dark', // #7D610D
+      _hover: {
+        borderColor: 'warning.light',
+        bgColor: 'warning.lighter', // #F3E4B9
+      },
+      _active: {
+        bgColor: 'warning.light', // #E8CD7D
+      },
+    },
+    outline: {
+      borderColor: 'warning.main',
+      bgColor: 'transparent',
+      color: 'warning.dark', // Use dark for better contrast
+      _hover: {
+        bgColor: 'warning.lightest', // #FBF6E8
+      },
+      _active: {
+        bgColor: 'warning.lighter', // #F3E4B9
+      },
+    },
+    ghost: {
+      borderColor: 'transparent',
+      bgColor: 'transparent',
+      color: 'warning.dark', // Use dark for better contrast
+      _hover: {
+        bgColor: 'warning.lightest', // #FBF6E8
+      },
+      _active: {
+        bgColor: 'warning.lighter', // #F3E4B9
+      },
+    },
+  },
+
+  /**
+   * Neutral (Gray) color scheme
+   */
+  neutral: {
+    solid: {
+      borderColor: 'gray.700',
+      bgColor: 'gray.700', // #737D96
+      color: 'white',
+      _hover: {
+        borderColor: 'gray.800',
+        bgColor: 'gray.800', // #616B85
+      },
+      _active: {
+        bgColor: 'gray.900', // #505A74
+      },
+    },
+    soft: {
+      borderColor: 'gray.200', // #E2E6F0
+      bgColor: 'gray.100', // #F0F3F9
+      color: 'gray.1200', // #2A3142
+      _hover: {
+        borderColor: 'gray.300',
+        bgColor: 'gray.200', // #E2E6F0
+      },
+      _active: {
+        bgColor: 'gray.300', // #CDD3E0
+      },
+    },
+    outline: {
+      borderColor: 'gray.300', // #CDD3E0
+      bgColor: 'transparent',
+      color: 'gray.1200', // #2A3142
+      _hover: {
+        bgColor: 'gray.50', // #F7F9FC
+      },
+      _active: {
+        bgColor: 'gray.100', // #F0F3F9
+      },
+    },
+    ghost: {
+      borderColor: 'transparent',
+      bgColor: 'transparent',
+      color: 'gray.1200', // #2A3142
+      _hover: {
+        bgColor: 'gray.50', // #F7F9FC
+      },
+      _active: {
+        bgColor: 'gray.100', // #F0F3F9
+      },
+    },
+  },
+};
+
+/**
+ * Get button styles for a given colorPalette and variant combination.
+ */
+export const getButtonStyles = (
+  colorPalette: ButtonColorPalette = 'primary',
+  variant: ButtonVariant = 'solid'
+): StyleProps => {
+  return buttonColorPaletteStyles[colorPalette][variant];
 };
+
+/**
+ * List of all available color palettes.
+ */
+export const buttonColorPalettes: ButtonColorPalette[] = [
+  'primary',
+  'secondary',
+  'danger',
+  'success',
+  'warning',
+  'neutral',
+];
+
+/**
+ * @deprecated Use buttonColorPalettes instead. Will be removed in next major version.
+ */
+export const buttonColorSchemes = buttonColorPalettes;
+
+/**
+ * @deprecated Use buttonColorPaletteStyles instead. Will be removed in next major version.
+ */
+export const buttonColorSchemeStyles = buttonColorPaletteStyles;
+
+/**
+ * List of all available variants.
+ */
+export const buttonVariants: ButtonVariant[] = [
+  'solid',
+  'soft',
+  'outline',
+  'ghost',
+];

package/src/components/Button/Button.tsx

@@ -1,32 +1,53 @@
 import { forwardRef } from 'react';
-import { Button as ChakraButton, useTheme, useToken } from '@chakra-ui/react';
+import { Button as ChakraButton, useToken } from '@chakra-ui/react';
 
-import { variantStyles } from './Button.styles';
+import { getButtonStyles } from './Button.styles';
 import { ButtonProps } from './Button.types';
 
-export const Button = forwardRef(
+/**
+ * Button component with two-dimensional variant system.
+ *
+ * Combines `colorPalette` (semantic color) with `variant` (visual appearance)
+ * for flexible, consistent button styling.
+ *
+ * @example
+ * ```tsx
+ * <Button colorPalette="primary" variant="soft">Submit</Button>
+ * <Button colorPalette="danger" variant="solid">Delete</Button>
+ * <Button colorPalette="secondary" variant="outline">Cancel</Button>
+ * <Button colorPalette="neutral" variant="ghost">Close</Button>
+ * ```
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    {
-      variant = 'secondary', // default to secondary as they are less likely to cause bigger design issues
-      _focus,
-      size,
-      ...rest
-    }: ButtonProps,
+    { colorPalette, variant = 'soft', _focus, size, children, ...rest },
     ref
   ) => {
-    const theme = useTheme();
-    const primaryMainColor = useToken(
-      'colors',
-      theme.semanticTokens.colors.primary.main
-    );
+    const primaryMainColor = useToken('colors', 'primary.main')[0];
+
+    const palette = colorPalette ?? 'primary';
+
+    const styles = getButtonStyles(palette, variant);
+
+    /**
+     * Chakra Button automatically maps size prop to textStyle:
+     * - 2xs, xs → textStyle="xs" (10.5px with 14px base)
+     * - sm, md → textStyle="sm" (12.25px with 14px base) ← default
+     * - lg, xl → textStyle="md" (14px with 14px base)
+     * - 2xl → textStyle="lg" (15.75px with 14px base)
+     *
+     * We override fontSize for xs size to 'sm' (12.25px) for better readability.
+     * Other sizes use Chakra's default textStyle mapping.
+     */
     return (
       <ChakraButton
         border="1px solid"
         lineHeight="1.2"
+        fontWeight="semibold"
         size={size}
-        fontSize={size === 'xs' ? 'sm' : size} // xs is too small
-        variant={variant === 'link' ? 'link' : undefined} // if variant isn't link, use our custom variant styles
-        {...variantStyles[variant]}
+        fontSize={size === 'xs' ? 'sm' : undefined} // Override xs: 10.5px → 12.25px
+        borderRadius="md"
+        {...styles}
         _focus={{
           outline: 'none',
           boxShadow: `rgb(255, 255, 255) 0px 0px 0px 2px, ${primaryMainColor} 0px 0px 0px 4px`,
@@ -35,7 +56,9 @@ export const Button = forwardRef(
         transition="all 0.25s ease-in-out"
         ref={ref}
         {...rest}
-      />
+      >
+        {children}
+      </ChakraButton>
     );
   }
 );

package/src/components/Button/Button.types.ts

@@ -1,13 +1,70 @@
 import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 
-export type ButtonVariant =
+/**
+ * Button color palette - defines the semantic color family.
+ *
+ * This overrides Chakra UI's colorPalette prop with our Golden Ratio
+ * color system values. Chakra's default colorPalettes are not supported.
+ *
+ * - `primary`: Blue - main brand actions, CTAs
+ * - `secondary`: Violet - accent actions, highlights
+ * - `danger`: Rose - destructive actions, errors
+ * - `success`: Green - positive actions, confirmations
+ * - `warning`: Gold - caution actions, alerts
+ * - `neutral`: Gray - low-emphasis, tertiary actions
+ */
+export type ButtonColorPalette =
   | 'primary'
   | 'secondary'
-  | 'tertiary'
   | 'danger'
-  | 'link'
-  | undefined;
+  | 'success'
+  | 'warning'
+  | 'neutral';
 
-export type ButtonProps = Omit<ChakraButtonProps, 'variant'> & {
+/**
+ * Button variant - defines the visual appearance/fill style.
+ *
+ * This overrides Chakra UI's variant prop with our custom variants.
+ * Chakra's default variants (solid, outline, ghost, link) are replaced
+ * with our Golden Ratio-based styling system.
+ *
+ * - `solid`: Filled background with contrasting text (most prominent)
+ * - `soft`: Light tinted background with darker text (subtle)
+ * - `outline`: Transparent with colored border (medium emphasis)
+ * - `ghost`: Transparent with no border (lowest emphasis)
+ */
+export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost';
+
+/**
+ * Button props with two-dimensional variant system.
+ *
+ * Combines `colorPalette` (what color) with `variant` (how it looks)
+ * for flexible, consistent button styling.
+ *
+ * @note Overrides Chakra UI's `variant` and `colorPalette` props.
+ *       Chakra's default values are not supported.
+ *
+ * @example
+ * ```tsx
+ * <Button colorPalette="primary" variant="solid">Submit</Button>
+ * <Button colorPalette="danger" variant="soft">Delete</Button>
+ * <Button colorPalette="secondary" variant="outline">Cancel</Button>
+ * ```
+ */
+export type ButtonProps = Omit<
+  ChakraButtonProps,
+  'variant' | 'colorScheme' | 'colorPalette' | 'leftIcon' | 'rightIcon'
+> & {
+  /**
+   * The color palette of the button (semantic color family).
+   * Overrides Chakra UI's colorPalette prop (Chakra v3).
+   * @default 'primary'
+   */
+  colorPalette?: ButtonColorPalette;
+  /**
+   * The visual variant of the button (fill style).
+   * Overrides Chakra UI's variant prop.
+   * @default 'solid'
+   */
   variant?: ButtonVariant;
 };

package/src/components/Button/index.tsx

@@ -1,3 +1,12 @@
 export { Button } from './Button';
-export { variantStyles } from './Button.styles';
-export type { ButtonProps } from './Button.types';
+export {
+  buttonColorPalettes,
+  buttonColorPaletteStyles,
+  buttonVariants,
+  getButtonStyles,
+} from './Button.styles';
+export type {
+  ButtonColorPalette,
+  ButtonProps,
+  ButtonVariant,
+} from './Button.types';

package/src/components/Card/Card.styles.ts

@@ -1,10 +1,12 @@
-import theme from '@/theme/index';
+/**
+ * Card styles using the Golden Ratio color system.
+ */
 
-// Light mode styles only
+// Light mode styles only - using semantic tokens
 export const cardStyles = {
-  bgColor: theme.colors.white,
-  color: theme.colors.black,
-  borderColor: theme.colors.gray[100],
+  bgColor: 'white',
+  color: 'gray.1300', // Primary text color
+  borderColor: 'gray.200', // #E2E6F0
 };
 
 export const clickableStyles = {
@@ -12,7 +14,6 @@ export const clickableStyles = {
   _hover: {
     boxShadow: 'lg',
     ['.card-image']: {
-      // TODO: define in theme
       transition: '0.3s all',
       transform: 'scale(1.05)',
       backgroundSize: '105%',
@@ -23,8 +24,8 @@ export const clickableStyles = {
 export const variantStyles = {
   default: {},
   gradient: {
-    bg: `linear-gradient(180deg, #F5F8FD 0%, #FFFFFF 100%)`,
-    border: `1px solid`,
-    borderColor: 'blue.600',
+    bg: 'linear-gradient(180deg, #F5F8FD 0%, #FFFFFF 100%)',
+    border: '1px solid',
+    borderColor: 'blue.300', // #1241A6
   },
 };

package/src/components/Card/Card.tsx

@@ -7,10 +7,10 @@ import { CardProps } from './Card.types';
 export const Card = forwardRef<HTMLDivElement, CardProps>(
   ({ clickable, variant = 'default', ...rest }, ref) => {
     return (
-      <ChakraCard
+      <ChakraCard.Root
         ref={ref}
         position="relative"
-        bgColor="inherit"
+        bg="white"
         color="inherit"
         boxShadow="none"
         border="1px solid"

package/src/components/Card/Card.types.ts

@@ -1,8 +1,8 @@
-import { CardProps as ChakraCardProps } from '@chakra-ui/react';
+import { CardRootProps as ChakraCardRootProps } from '@chakra-ui/react';
 
 export type CardVariant = 'default' | 'gradient';
 
-export type CardProps = ChakraCardProps & {
+export type CardProps = ChakraCardRootProps & {
   clickable?: boolean;
   variant?: CardVariant;
 };