"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("@chakra-ui/react");
// Configure color mode with enhanced dark mode support
const config = {
    initialColorMode: 'system',
    useSystemColorMode: true,
    cssVarPrefix: 'bfui',
};
// Define design tokens
const breakpoints = { sm: '30em', md: '48em', lg: '62em', xl: '80em' };
const space = { 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 6: '1.5rem' };
const radii = { sm: '0.25rem', md: '0.375rem', lg: '0.5rem' };
const fontSizes = { base: '1rem', lg: '1.125rem', xl: '1.25rem' };
const fontWeights = { normal: 400, medium: 500, semibold: 600, bold: 700 };
const shadows = {
    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
};
// Enhanced global styles with dark mode transitions
const styles = {
    global: (props) => ({
        body: {
            bg: 'surface-bg',
            color: 'text-body',
            minH: '100vh',
            transitionProperty: 'background-color, color',
            transitionDuration: '200ms',
            transitionTimingFunction: 'ease-in-out',
        },
        '*:focus': {
            boxShadow: `0 0 0 3px var(--bfui-colors-focus-ring)`,
            outline: 'none',
        },
        '*:focus:not(:focus-visible)': {
            boxShadow: 'none',
        },
        // Improve readability in dark mode
        '@media (prefers-color-scheme: dark)': {
            img: {
                opacity: 0.9,
            },
            'pre, code': {
                backgroundColor: 'gray.800',
            },
        },
        // Smooth transitions for color mode changes
        '*': {
            transitionProperty: 'background-color, border-color',
            transitionDuration: '200ms',
            transitionTimingFunction: 'ease-in-out',
        },
    }),
};
// Enhanced semantic color tokens with comprehensive dark mode support
const semanticTokens = {
    colors: {
        // Surface colors
        'surface-bg': { default: 'white', _dark: 'gray.900' },
        'surface-raised': { default: 'gray.50', _dark: 'gray.800' },
        'surface-overlay': { default: 'white', _dark: 'gray.800' },
        'surface-hover': { default: 'gray.50', _dark: 'gray.700' },
        'surface-active': { default: 'gray.100', _dark: 'gray.600' },
        // Border colors
        'border-default': { default: 'gray.200', _dark: 'gray.700' },
        'border-muted': { default: 'gray.100', _dark: 'gray.800' },
        'border-strong': { default: 'gray.300', _dark: 'gray.600' },
        // Text colors
        'text-primary': { default: 'gray.900', _dark: 'gray.50' },
        'text-secondary': { default: 'gray.700', _dark: 'gray.200' },
        'text-body': { default: 'gray.600', _dark: 'gray.400' },
        'text-muted': { default: 'gray.500', _dark: 'gray.500' },
        'text-on-primary': { default: 'white', _dark: 'gray.900' },
        // Brand colors
        'brand-primary': { default: 'blue.500', _dark: 'blue.400' },
        'brand-primary-hover': { default: 'blue.600', _dark: 'blue.300' },
        'brand-secondary': { default: 'purple.500', _dark: 'purple.400' },
        'brand-ai': { default: 'purple.600', _dark: 'purple.400' },
        // Status colors
        'status-success': { default: 'green.500', _dark: 'green.400' },
        'status-warning': { default: 'yellow.500', _dark: 'yellow.400' },
        'status-error': { default: 'red.500', _dark: 'red.400' },
        'status-info': { default: 'blue.500', _dark: 'blue.400' },
        // Interactive colors
        'interactive-default': { default: 'gray.600', _dark: 'gray.400' },
        'interactive-hover': { default: 'gray.700', _dark: 'gray.300' },
        'interactive-active': { default: 'gray.800', _dark: 'gray.200' },
        'interactive-disabled': { default: 'gray.300', _dark: 'gray.700' },
        // Focus colors
        'focus-ring': { default: 'blue.500', _dark: 'blue.400' },
        'focus-bg': { default: 'blue.50', _dark: 'blue.900' },
    },
    shadows: {
        'elevation-low': { default: shadows.sm, _dark: '0 2px 4px rgba(0, 0, 0, 0.4)' },
        'elevation-medium': { default: shadows.md, _dark: '0 4px 8px rgba(0, 0, 0, 0.5)' },
        'elevation-high': { default: shadows.lg, _dark: '0 8px 16px rgba(0, 0, 0, 0.6)' },
    },
};
// Text styles for consistent typography
const textStyles = {
    h1: {
        fontSize: { base: '2rem', md: '2.5rem', lg: '3rem' },
        fontWeight: 'bold',
        lineHeight: '1.2',
        letterSpacing: '-0.02em',
    },
    h2: {
        fontSize: { base: '1.75rem', md: '2rem', lg: '2.25rem' },
        fontWeight: 'bold',
        lineHeight: '1.25',
        letterSpacing: '-0.01em',
    },
    h3: {
        fontSize: { base: '1.5rem', md: '1.75rem', lg: '2rem' },
        fontWeight: 'semibold',
        lineHeight: '1.3',
    },
    h4: {
        fontSize: { base: '1.25rem', md: '1.5rem' },
        fontWeight: 'semibold',
        lineHeight: '1.4',
    },
    h5: {
        fontSize: { base: '1.125rem', md: '1.25rem' },
        fontWeight: 'medium',
        lineHeight: '1.5',
    },
    h6: {
        fontSize: { base: '1rem', md: '1.125rem' },
        fontWeight: 'medium',
        lineHeight: '1.5',
    },
    body1: {
        fontSize: 'base',
        lineHeight: '1.6',
    },
    body2: {
        fontSize: 'sm',
        lineHeight: '1.5',
    },
    caption: {
        fontSize: 'xs',
        lineHeight: '1.4',
        color: 'text-muted',
    },
    small: {
        fontSize: 'xs',
        lineHeight: '1.3',
    },
};
// Multi-part Card component styling
const { definePartsStyle, defineMultiStyleConfig } = (0, react_1.createMultiStyleConfigHelpers)(['container', 'header', 'title', 'body', 'footer', 'image']);
// Base styles for Card parts
const baseContainer = (0, react_1.defineStyle)({ bg: 'surface-bg', border: '1px solid', borderColor: 'border-default', borderRadius: 'lg', boxShadow: 'sm', position: 'relative', transition: 'all 0.2s ease', w: '100%' });
const baseHeader = (0, react_1.defineStyle)({ p: 4, borderBottom: '1px solid', borderColor: 'border-default' });
const baseTitle = (0, react_1.defineStyle)({ fontSize: 'lg', fontWeight: 'semibold', color: 'text-primary', lineHeight: '1.2' });
const baseBody = (0, react_1.defineStyle)({ p: 4, color: 'text-body' });
const baseFooter = (0, react_1.defineStyle)({ p: 4, borderTop: '1px solid', borderColor: 'border-default' });
const baseImage = (0, react_1.defineStyle)({ borderTopRadius: 'lg', overflow: 'hidden' });
// Define Card multi-style config
const cardTheme = defineMultiStyleConfig({
    baseStyle: definePartsStyle({ container: baseContainer, header: baseHeader, title: baseTitle, body: baseBody, footer: baseFooter, image: baseImage }),
    variants: {
        default: definePartsStyle({}),
        elevated: definePartsStyle({ container: { boxShadow: 'md', border: 'none' } }),
        outlined: definePartsStyle({ container: { boxShadow: 'none' } }),
    },
    sizes: {
        small: definePartsStyle({ container: { p: 3 }, header: { p: 3 }, body: { p: 3 }, footer: { p: 3 }, title: { fontSize: 'base' } }),
        medium: definePartsStyle({ container: { p: 4 }, header: { p: 4 }, body: { p: 4 }, footer: { p: 4 }, title: { fontSize: 'lg' } }),
        large: definePartsStyle({ container: { p: 6 }, header: { p: 6 }, body: { p: 6 }, footer: { p: 6 }, title: { fontSize: 'xl' } }),
    },
});
// TODO: Expand button styleConfig to use semanticTokens for primary, secondary, error, etc.
// Simple styleConfig for Button component
const buttonTheme = {
    baseStyle: {
        fontWeight: 'medium',
        borderRadius: 'md',
    },
    sizes: {
        sm: { fontSize: 'sm', px: 3, py: 2 },
        md: { fontSize: 'md', px: 4, py: 2 },
        lg: { fontSize: 'lg', px: 6, py: 3 },
    },
    variants: {
        solid: {
            bg: 'brand-primary',
            color: 'text-on-primary',
            _hover: { bg: 'brand-primary-hover' },
            _focus: { boxShadow: `0 0 0 3px var(--bfui-colors-focus-ring)` },
            _disabled: { bg: 'interactive-disabled', cursor: 'not-allowed' },
        },
        outline: {
            border: '2px solid',
            borderColor: 'brand-primary',
            color: 'brand-primary',
            _hover: { bg: 'focus-bg' },
            _focus: { boxShadow: `0 0 0 3px var(--bfui-colors-focus-ring)` },
            _disabled: { borderColor: 'interactive-disabled', color: 'interactive-disabled', cursor: 'not-allowed' },
        },
        ghost: {
            color: 'brand-primary',
            _hover: { bg: 'surface-hover' },
            _active: { bg: 'surface-active' },
            _focus: { boxShadow: `0 0 0 3px var(--bfui-colors-focus-ring)` },
        },
        link: {
            color: 'brand-primary',
            _hover: { textDecoration: 'underline', color: 'brand-primary-hover' },
            _focus: { boxShadow: `0 0 0 3px var(--bfui-colors-focus-ring)` },
        },
        ai: {
            bg: 'brand-ai',
            color: 'text-on-primary',
            _hover: { bg: 'brand-secondary' },
            _focus: { boxShadow: `0 0 0 3px var(--bfui-colors-focus-ring)` },
        },
    },
    defaultProps: {
        variant: 'solid',
        size: 'md',
        colorScheme: 'blue',
    },
};
// Alert multi-part style config
const { definePartsStyle: defineAlertParts, defineMultiStyleConfig: defineAlertConfig } = (0, react_1.createMultiStyleConfigHelpers)(['container', 'title', 'description', 'icon']);
const alertBase = defineAlertParts({
    container: { borderRadius: 'md', p: 4 },
    title: { fontWeight: 'bold' },
    description: { mt: 2 },
    icon: { mr: 2 },
});
const alertTheme = defineAlertConfig({
    baseStyle: alertBase,
    variants: {
        subtle: defineAlertParts({ container: { bg: 'blue.50', border: '1px solid', borderColor: 'blue.200' } }),
        solid: defineAlertParts({ container: { bg: 'blue.500', color: 'white' } }),
        'left-accent': defineAlertParts({ container: { borderLeftWidth: '4px', borderColor: 'blue.500', bg: 'blue.50' } }),
        'top-accent': defineAlertParts({ container: { borderTopWidth: '4px', borderColor: 'blue.500', bg: 'blue.50' } }),
    },
    defaultProps: { variant: 'subtle' },
});
// Additional design tokens
const zIndices = {
    hide: -1,
    base: 0,
    dropdown: 1000,
    sticky: 1100,
    modal: 1300,
    popover: 1400,
    skipLink: 1500,
    toast: 1600,
    tooltip: 1700,
};
const transitions = {
    fast: '150ms ease-in-out',
    normal: '200ms ease-in-out',
    slow: '300ms ease-in-out',
};
// Extend Chakra theme with comprehensive dark mode support
const theme = (0, react_1.extendTheme)({
    config,
    breakpoints,
    space,
    radii,
    fontSizes,
    fontWeights,
    shadows,
    styles,
    semanticTokens,
    textStyles,
    zIndices,
    transitions,
    components: {
        Card: cardTheme,
        Button: buttonTheme,
        Alert: alertTheme,
        // Focus styles for all interactive components
        Input: {
            baseStyle: {
                field: {
                    _focus: {
                        borderColor: 'brand-primary',
                        boxShadow: `0 0 0 1px var(--bfui-colors-brand-primary)`,
                    },
                },
            },
        },
        Select: {
            baseStyle: {
                field: {
                    _focus: {
                        borderColor: 'brand-primary',
                        boxShadow: `0 0 0 1px var(--bfui-colors-brand-primary)`,
                    },
                },
            },
        },
        Textarea: {
            baseStyle: {
                _focus: {
                    borderColor: 'brand-primary',
                    boxShadow: `0 0 0 1px var(--bfui-colors-brand-primary)`,
                },
            },
        },
    },
});
exports.default = theme;
// TODO: Scaffold styleConfigs for additional component categories:
// Layout & Containers: Grid, Flex, Section/PageWrapper, Sidebar, Header, Footer, Modal/Dialog
// Navigation: NavMenu, Breadcrumb, Tabs, Pagination, SidebarMenu, Stepper/ProgressIndicator
// Forms & Inputs: Input, Textarea, Select/Dropdown, Radio, Checkbox, Switch/Toggle, DatePicker, FileUpload, TokenInput
// Buttons & Actions: Button (primary, secondary, tertiary), IconButton, SplitButton, ButtonGroup, Submit/Cancel actions
// Display Components: Avatar, Badge/Pill, Tooltip, Popover, Chip/Tag, Icon, Label, Divider
// Feedback & Status: Alert (success, warning, error, info), Toast/Snackbar, Spinner, Skeleton, ProgressBar
// Data Presentation: Table, DataList, ChartContainer, JSONViewer, CodeBlock
// Content & Typography: Heading (h1–h6), Paragraph, Blockquote, List (ordered/unordered), RichTextRenderer
// LLM-Specific: PromptEditor/ChatInput, ModelOutputViewer, ContextDebuggerPanel, TokenUsageMeter, WorkflowVisualizer
// Utilities: ThemeToggle (light/dark), AccessibilityToggles, KeyboardShortcutsHelper, ComponentShowcaseWrapper 
//# sourceMappingURL=theme.js.map