@temboplus/frontend-react-core 0.1.3-beta.2 → 0.1.3-beta.20

package/dist/theme/theme-provider.d.ts

@@ -1,87 +1,29 @@
+import "./theme-overrides.css";
 import React from 'react';
 import type { ThemeConfig } from 'antd';
-import { TemboColorPalette, TemboColorOverrides } from './colors.js';
-import { TemboUIConstants, TemboUIConstantsOverrides } from './constants.js';
+import { UIConstants } from './tokens/constants.js';
+import { ColorPalette, ThemeMode } from './tokens/colors.js';
 /**
- * Shape of the theme context exposed via useTemboTheme()
+ * Theme context value - now includes constants!
  */
-export interface TemboThemeContextValue {
-    colors: TemboColorPalette;
-    constants: TemboUIConstants;
+export interface TemboTheme {
+    colors: ColorPalette;
+    constants: UIConstants;
+    mode: ThemeMode;
 }
 /**
- * Props for TemboThemeProvider
- *
- * @example
- * // Basic usage
- * <TemboThemeProvider>
- *   <App />
- * </TemboThemeProvider>
- *
- * @example
- * // With color overrides
- * <TemboThemeProvider
- *   colors={{
- *     primary: { main: '#007bff' },
- *     action: { main: '#28a745' }
- *   }}
- * >
- *   <App />
- * </TemboThemeProvider>
- *
- * @example
- * // With all customizations
- * <TemboThemeProvider
- *   colors={{ primary: { main: '#007bff' } }}
- *   constants={{ radius: { base: 8 } }}
- *   themeOverrides={{
- *     components: {
- *       Button: { controlHeight: 40 }
- *     }
- *   }}
- * >
- *   <App />
- * </TemboThemeProvider>
+ * Theme provider props
  */
 export interface TemboThemeProviderProps {
     children: React.ReactNode;
-    /** Color palette overrides - supports deep partial overrides */
-    colors?: TemboColorOverrides;
-    /** UI constants overrides - supports deep partial overrides */
-    constants?: TemboUIConstantsOverrides;
-    /** Raw Ant Design ThemeConfig overrides for advanced customization */
-    themeOverrides?: Partial<ThemeConfig>;
+    mode?: ThemeMode;
+    antdThemeOverrides?: Partial<ThemeConfig>;
 }
 /**
  * TemboThemeProvider
- *
- * Wraps your application to provide theming through React context and Ant Design's ConfigProvider.
- * Merges default colors/constants with host overrides and configures Ant Design components.
- *
- * All child components can access theme values via the useTemboTheme() hook.
  */
 export declare const TemboThemeProvider: React.FC<TemboThemeProviderProps>;
 /**
- * Hook to access the active Tembo theme
- *
- * Returns the merged color palette and UI constants with any host overrides applied.
- * Components should always use this hook instead of importing defaults directly.
- *
- * @returns Theme context containing colors and constants
- *
- * @example
- * function MyComponent() {
- *   const { colors, constants } = useTemboTheme();
- *
- *   return (
- *     <div style={{
- *       color: colors.text.primary,
- *       padding: constants.spacing.md,
- *       borderRadius: constants.radius.base
- *     }}>
- *       Themed content
- *     </div>
- *   );
- * }
+ * Hook to access theme - now returns constants too!
  */
-export declare const useTemboTheme: () => TemboThemeContextValue;
+export declare const useNewTemboTheme: () => TemboTheme;

package/dist/theme/theme-provider.js

@@ -1,398 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import "./theme-overrides.css";
 import React from 'react';
 import { ConfigProvider } from 'antd';
-import { buildColorPalette, } from './colors.js';
-import { buildUIConstants, } from './constants.js';
-/**
- * Internal React context carrying the active Tembo theme
- */
+import { defaultUIConstants } from './tokens/constants.js';
+import { buildAntDTheme } from './theme-config.js';
+import { buildColorPalette } from './tokens/colors.js';
 const TemboThemeContext = React.createContext({
-    colors: buildColorPalette(),
-    constants: buildUIConstants(),
+    colors: buildColorPalette('light'),
+    constants: defaultUIConstants,
+    mode: 'light',
 });
-/**
- * Build Ant Design theme configuration from Tembo tokens
- * Maps semantic Tembo color palette and constants to Ant Design's token system
- *
- * @param palette - Complete Tembo color palette
- * @param constants - Complete Tembo UI constants
- * @param overrides - Optional raw Ant Design theme overrides
- * @returns Ant Design ThemeConfig
- */
-const buildAntDThemeConfig = (palette, constants, overrides) => {
-    var _a, _b;
-    const baseTokens = {
-        // Primary colors
-        colorPrimary: palette.primary.main,
-        colorPrimaryHover: palette.primary.hover,
-        colorPrimaryActive: palette.primary.active,
-        colorPrimaryBorder: palette.primary.main,
-        // Text colors
-        colorText: palette.text.primary,
-        colorTextSecondary: palette.text.secondary,
-        colorTextTertiary: palette.text.tertiary,
-        colorTextQuaternary: palette.text.quaternary,
-        colorTextDisabled: palette.text.disabled,
-        // Background colors
-        colorBgBase: palette.surface.background,
-        colorBgContainer: palette.surface.main,
-        colorBgElevated: palette.surface.elevated,
-        colorBgLayout: palette.surface.background,
-        colorBgSpotlight: palette.surface.hover,
-        // Border colors
-        colorBorder: palette.border.main,
-        colorBorderSecondary: palette.border.light,
-        colorSplit: palette.border.divider,
-        // Success colors
-        colorSuccess: palette.success.main,
-        colorSuccessBg: palette.success.bg,
-        colorSuccessBorder: palette.success.border,
-        colorSuccessText: palette.success.text,
-        // Error colors
-        colorError: palette.error.main,
-        colorErrorBg: palette.error.bg,
-        colorErrorBorder: palette.error.border,
-        colorErrorText: palette.error.text,
-        // Warning colors
-        colorWarning: palette.warning.main,
-        colorWarningBg: palette.warning.bg,
-        colorWarningBorder: palette.warning.border,
-        colorWarningText: palette.warning.text,
-        // Info colors
-        colorInfo: palette.info.main,
-        colorInfoBg: palette.info.bg,
-        colorInfoBorder: palette.info.border,
-        colorInfoText: palette.info.text,
-        // Link colors
-        colorLink: palette.utility.link,
-        colorLinkHover: palette.utility.linkHover,
-        colorLinkActive: palette.utility.linkActive,
-        // Border radius
-        borderRadius: constants.radius.base,
-        borderRadiusLG: constants.radius.lg,
-        borderRadiusSM: constants.radius.sm,
-        borderRadiusXS: 6,
-        // Shadows
-        boxShadow: constants.shadow.base,
-        boxShadowSecondary: constants.shadow.card,
-        boxShadowTertiary: constants.shadow.elevated,
-        // Typography
-        fontFamily: constants.typography.fontFamily,
-        fontSize: constants.typography.fontSize.base,
-        fontSizeHeading1: 38,
-        fontSizeHeading2: 30,
-        fontSizeHeading3: 24,
-        fontSizeHeading4: 20,
-        fontSizeHeading5: constants.typography.fontSize.lg,
-        fontWeightStrong: constants.typography.fontWeight.medium,
-        lineHeight: constants.typography.lineHeight.base,
-        lineHeightHeading1: 1.21,
-        lineHeightHeading2: 1.27,
-        lineHeightHeading3: 1.33,
-        lineHeightHeading4: 1.4,
-        lineHeightHeading5: 1.5,
-    };
-    const baseTheme = {
-        token: baseTokens,
-        components: {
-            Button: {
-                colorPrimary: palette.components.button.primary.bg,
-                colorPrimaryHover: palette.components.button.primary.hover,
-                colorPrimaryActive: palette.action.active,
-                colorPrimaryBorder: palette.components.button.primary.bg,
-                primaryColor: palette.components.button.primary.text,
-                colorBorder: palette.components.button.default.border,
-                colorBgContainer: palette.components.button.default.bg,
-                colorText: palette.components.button.default.text,
-                defaultBg: palette.components.button.default.bg,
-                defaultBorderColor: palette.components.button.default.border,
-                defaultColor: palette.components.button.default.text,
-                primaryShadow: 'none',
-                defaultShadow: 'none',
-                dangerShadow: 'none',
-                fontWeight: constants.typography.fontWeight.medium,
-                controlHeight: 32,
-                paddingContentHorizontal: constants.spacing.lg,
-                borderRadius: constants.radius.button,
-                borderRadiusLG: constants.radius.button,
-                borderRadiusSM: constants.radius.sm + 8,
-            },
-            Input: {
-                colorBgContainer: palette.components.input.bg,
-                colorBorder: palette.components.input.border,
-                hoverBorderColor: palette.components.input.borderHover,
-                activeBorderColor: palette.components.input.borderFocus,
-                colorPrimaryHover: palette.components.input.borderFocus,
-                colorTextPlaceholder: palette.components.input.placeholder,
-                borderRadius: constants.radius.input,
-                borderRadiusLG: constants.radius.base,
-                borderRadiusSM: constants.radius.sm,
-            },
-            Select: {
-                colorBgContainer: palette.components.input.bg,
-                colorBorder: palette.components.input.border,
-                colorTextPlaceholder: palette.components.input.placeholder,
-                colorPrimaryHover: palette.action.main,
-                hoverBorderColor: palette.components.input.borderHover,
-                activeBorderColor: palette.components.input.borderFocus,
-                optionSelectedBg: palette.action.main,
-                optionSelectedColor: palette.action.contrast,
-                optionActiveBg: palette.surface.hover,
-                colorBgElevated: palette.utility.white,
-                controlItemBgHover: palette.surface.hover,
-                boxShadowSecondary: constants.shadow.elevated,
-                borderRadius: constants.radius.input,
-                borderRadiusLG: constants.radius.base,
-                borderRadiusSM: constants.radius.sm,
-            },
-            Checkbox: {
-                colorPrimary: palette.action.main,
-                colorPrimaryHover: palette.action.hover,
-                colorBorder: palette.border.strong,
-                borderRadiusSM: 6,
-            },
-            Radio: {
-                colorPrimary: palette.action.main,
-                colorPrimaryHover: palette.action.hover,
-                colorBorder: palette.border.strong,
-            },
-            Switch: {
-                colorPrimary: palette.action.main,
-                colorPrimaryHover: palette.action.hover,
-                colorTextQuaternary: palette.text.quaternary,
-            },
-            Form: {
-                labelColor: palette.text.primary,
-                labelRequiredMarkColor: palette.error.main,
-                labelFontSize: constants.typography.fontSize.base,
-                itemMarginBottom: constants.spacing.lg,
-            },
-            DatePicker: {
-                colorBgContainer: palette.components.input.bg,
-                colorBorder: palette.components.input.border,
-                hoverBorderColor: palette.components.input.borderHover,
-                activeBorderColor: palette.components.input.borderFocus,
-                colorPrimary: palette.action.main,
-                borderRadius: constants.radius.input,
-            },
-            InputNumber: {
-                borderRadius: constants.radius.input,
-            },
-            Table: {
-                colorBgContainer: palette.components.table.bg,
-                headerBg: palette.components.table.headerBg,
-                headerColor: palette.components.table.headerText,
-                borderColor: palette.components.table.border,
-                headerSplitColor: palette.components.table.border,
-                rowHoverBg: palette.components.table.rowHover,
-                rowSelectedBg: palette.action.light,
-                rowSelectedHoverBg: palette.action.lighter,
-                colorText: palette.text.primary,
-                colorTextHeading: palette.text.primary,
-                borderRadius: constants.radius.base,
-                borderRadiusLG: constants.radius.lg,
-            },
-            Card: {
-                colorBgContainer: palette.surface.main,
-                colorBorder: palette.border.main,
-                colorBorderSecondary: palette.border.light,
-                boxShadowTertiary: constants.shadow.card,
-                borderRadius: constants.radius.card,
-                borderRadiusLG: constants.radius.lg + 4,
-            },
-            Statistic: {
-                contentFontSize: 24,
-                colorTextHeading: palette.text.primary,
-            },
-            Descriptions: {
-                labelBg: palette.surface.hover,
-                colorTextSecondary: palette.text.secondary,
-                itemPaddingBottom: constants.spacing.md,
-            },
-            Badge: {
-                colorError: palette.error.main,
-                colorSuccess: palette.success.main,
-                colorInfo: palette.info.main,
-                colorInfoBg: palette.info.bg,
-                borderRadiusSM: constants.radius.input,
-            },
-            Tag: {
-                colorBorder: palette.border.main,
-                defaultBg: palette.surface.hover,
-                borderRadiusSM: constants.radius.sm,
-            },
-            Timeline: {
-                dotBg: palette.surface.main,
-                tailColor: palette.border.main,
-            },
-            Alert: {
-                colorSuccessBg: palette.success.bg,
-                colorSuccessBorder: palette.success.border,
-                colorErrorBg: palette.error.bg,
-                colorErrorBorder: palette.error.border,
-                colorWarningBg: palette.warning.bg,
-                colorWarningBorder: palette.warning.border,
-                colorInfoBg: palette.info.bg,
-                colorInfoBorder: palette.info.border,
-                borderRadiusLG: constants.radius.base,
-            },
-            Modal: {
-                contentBg: palette.surface.elevated,
-                headerBg: palette.surface.elevated,
-                colorBgMask: 'rgba(0, 0, 0, 0.45)',
-                borderRadiusLG: constants.radius.lg,
-            },
-            Drawer: {
-                colorBgElevated: palette.surface.elevated,
-                colorBgMask: 'rgba(0, 0, 0, 0.45)',
-                borderRadiusLG: constants.radius.lg,
-            },
-            Notification: {
-                colorBgElevated: palette.utility.white,
-                borderRadiusLG: constants.radius.base,
-            },
-            Message: {
-                contentBg: palette.utility.white,
-                borderRadiusLG: constants.radius.base,
-            },
-            Spin: {
-                colorPrimary: palette.primary.main,
-            },
-            Progress: {
-                colorSuccess: palette.success.main,
-                colorError: palette.error.main,
-                defaultColor: palette.primary.main,
-                borderRadius: 100,
-            },
-            Skeleton: {
-                colorFill: palette.neutral[200],
-                colorFillContent: palette.neutral[100],
-                borderRadiusSM: constants.radius.sm,
-            },
-            Menu: {
-                itemBg: 'transparent',
-                itemColor: palette.text.primary,
-                itemHoverBg: palette.surface.hover,
-                itemSelectedBg: palette.action.lighter,
-                itemSelectedColor: palette.action.main,
-                itemActiveBg: palette.action.lighter,
-                subMenuItemBg: 'transparent',
-                darkItemBg: palette.components.sidebar.bg,
-                darkSubMenuItemBg: palette.components.sidebar.bg,
-                darkItemColor: palette.components.sidebar.text,
-                darkItemHoverBg: palette.components.sidebar.hover,
-                darkItemSelectedBg: palette.components.sidebar.selected,
-                darkItemSelectedColor: palette.primary.contrast,
-                borderRadius: constants.radius.input,
-                borderRadiusLG: constants.radius.base,
-            },
-            Breadcrumb: {
-                linkColor: palette.utility.link,
-                linkHoverColor: palette.utility.linkHover,
-                itemColor: palette.text.secondary,
-                lastItemColor: palette.text.primary,
-                separatorColor: palette.text.tertiary,
-                borderRadiusSM: 6,
-            },
-            Pagination: {
-                colorPrimary: palette.primary.main,
-                colorPrimaryHover: palette.primary.hover,
-                itemActiveBg: palette.primary.main,
-                borderRadius: constants.radius.sm,
-            },
-            Steps: {
-                colorPrimary: palette.action.main,
-                colorText: palette.text.secondary,
-                colorTextDescription: palette.text.tertiary,
-                borderRadiusSM: 100,
-            },
-            Tabs: {
-                colorPrimary: palette.action.main,
-                colorBorderSecondary: palette.border.main,
-                itemColor: palette.text.secondary,
-                itemHoverColor: palette.action.hover,
-                itemSelectedColor: palette.action.main,
-                inkBarColor: palette.action.main,
-                borderRadiusSM: constants.radius.sm,
-            },
-            Layout: {
-                colorBgBody: palette.surface.background,
-                colorBgHeader: palette.utility.white,
-                colorBgTrigger: palette.components.sidebar.bg,
-                siderBg: palette.components.sidebar.bg,
-                headerBg: palette.utility.white,
-                borderRadiusLG: 0,
-            },
-            Divider: {
-                colorSplit: palette.border.divider,
-            },
-            Typography: {
-                colorText: palette.text.primary,
-                colorTextSecondary: palette.text.secondary,
-                colorTextDescription: palette.text.tertiary,
-            },
-            Tooltip: {
-                colorBgSpotlight: palette.neutral[900],
-                colorTextLightSolid: palette.utility.white,
-                borderRadius: constants.radius.sm,
-            },
-            Popover: {
-                colorBgElevated: palette.utility.white,
-                borderRadiusLG: constants.radius.base,
-            },
-            Dropdown: {
-                boxShadowSecondary: constants.shadow.dropdown,
-            },
-            Calendar: {
-                colorBgContainer: palette.utility.white,
-                colorPrimary: palette.action.main,
-                borderRadiusLG: constants.radius.base,
-            },
-        },
-    };
-    if (!overrides)
-        return baseTheme;
-    return Object.assign(Object.assign({}, baseTheme), { token: Object.assign(Object.assign({}, baseTheme.token), ((_a = overrides.token) !== null && _a !== void 0 ? _a : {})), components: Object.assign(Object.assign({}, baseTheme.components), ((_b = overrides.components) !== null && _b !== void 0 ? _b : {})) });
-};
 /**
  * TemboThemeProvider
- *
- * Wraps your application to provide theming through React context and Ant Design's ConfigProvider.
- * Merges default colors/constants with host overrides and configures Ant Design components.
- *
- * All child components can access theme values via the useTemboTheme() hook.
  */
-export const TemboThemeProvider = ({ children, colors, constants, themeOverrides, }) => {
-    const palette = React.useMemo(() => buildColorPalette(colors), [colors]);
-    const uiConstants = React.useMemo(() => buildUIConstants(constants), [constants]);
-    const theme = React.useMemo(() => buildAntDThemeConfig(palette, uiConstants, themeOverrides), [palette, uiConstants, themeOverrides]);
-    const contextValue = React.useMemo(() => ({
-        colors: palette,
-        constants: uiConstants,
-    }), [palette, uiConstants]);
-    return (_jsx(TemboThemeContext.Provider, { value: contextValue, children: _jsx(ConfigProvider, { theme: theme, children: children }) }));
+export const TemboThemeProvider = ({ children, mode = 'light', antdThemeOverrides, }) => {
+    const colors = React.useMemo(() => buildColorPalette(mode), [mode]);
+    const constants = React.useMemo(() => defaultUIConstants, []);
+    const antdTheme = React.useMemo(() => {
+        var _a, _b;
+        const baseTheme = buildAntDTheme(colors, constants);
+        if (!antdThemeOverrides)
+            return baseTheme;
+        return Object.assign(Object.assign({}, baseTheme), { token: Object.assign(Object.assign({}, baseTheme.token), ((_a = antdThemeOverrides.token) !== null && _a !== void 0 ? _a : {})), components: Object.assign(Object.assign({}, baseTheme.components), ((_b = antdThemeOverrides.components) !== null && _b !== void 0 ? _b : {})) });
+    }, [colors, constants, antdThemeOverrides]);
+    const contextValue = React.useMemo(() => ({ colors, constants, mode }), [colors, constants, mode]);
+    return (_jsx(TemboThemeContext.Provider, { value: contextValue, children: _jsx(ConfigProvider, { theme: antdTheme, children: children }) }));
 };
 /**
- * Hook to access the active Tembo theme
- *
- * Returns the merged color palette and UI constants with any host overrides applied.
- * Components should always use this hook instead of importing defaults directly.
- *
- * @returns Theme context containing colors and constants
- *
- * @example
- * function MyComponent() {
- *   const { colors, constants } = useTemboTheme();
- *
- *   return (
- *     <div style={{
- *       color: colors.text.primary,
- *       padding: constants.spacing.md,
- *       borderRadius: constants.radius.base
- *     }}>
- *       Themed content
- *     </div>
- *   );
- * }
+ * Hook to access theme - now returns constants too!
  */
-export const useTemboTheme = () => React.useContext(TemboThemeContext);
+export const useNewTemboTheme = () => React.useContext(TemboThemeContext);

package/dist/theme/tokens/colors.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Tembo Design System - Monochrome Foundation with Modern Semantics
+ *
+ * Philosophy: Pure monochrome with single accent + modern semantic colors
+ * - Primary actions: Near-black (light) / Near-white (dark)
+ * - All UI elements use neutral scale
+ * - Blue accent for links and focus states
+ * - Modern, vibrant semantic colors with AAA contrast
+ *
+ * Semantic color definitions:
+ * - main: For icons, borders, full backgrounds, text on subtle backgrounds
+ * - subtle: For light/dark background fills
+ * - contrast: For icons & text on main backgrounds
+ */
+export type ThemeMode = 'light' | 'dark';
+/**
+ * Color scale interface
+ */
+export interface ColorScale {
+    /** Main color - for icons, borders, solid backgrounds, text on subtle */
+    main: string;
+    /** Subtle background - for alert/badge backgrounds */
+    subtle: string;
+    /** Contrast color - for text/icons on main backgrounds */
+    contrast: string;
+}
+/**
+ * Complete color palette
+ */
+export interface ColorPalette {
+    mode: ThemeMode;
+    /**
+     * Monochrome neutral scale - carefully calibrated
+     * 10-step scale (0-9) with proper WCAG contrast ratios
+     */
+    neutral: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    absolute: {
+        black: string;
+        white: string;
+    };
+    accent: {
+        default: string;
+        hover: string;
+        active: string;
+        subtle: string;
+    };
+    semantic: {
+        success: ColorScale;
+        error: ColorScale;
+        warning: ColorScale;
+        info: ColorScale;
+    };
+    surface: {
+        page: string;
+        card: string;
+        overlay: string;
+        input: string;
+        interactive: string;
+        selected: string;
+        nested: string;
+    };
+    border: {
+        subtle: string;
+        default: string;
+        strong: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        disabled: string;
+        inverse: string;
+        input: string;
+    };
+    action: {
+        default: string;
+        hover: string;
+        disabled: string;
+        contrast: string;
+    };
+}
+export declare const buildColorPalette: (mode?: ThemeMode) => ColorPalette;
+export declare const lightPalette: ColorPalette;
+export declare const darkPalette: ColorPalette;
+/**
+ * Color palette overrides (for custom theming)
+ */
+export type ColorOverrides = {
+    neutral?: Partial<ColorPalette['neutral']>;
+    accent?: Partial<ColorPalette['accent']>;
+    semantic?: {
+        success?: Partial<ColorScale>;
+        error?: Partial<ColorScale>;
+        warning?: Partial<ColorScale>;
+        info?: Partial<ColorScale>;
+    };
+};