@temboplus/frontend-react-core 0.1.3-beta.1 → 0.1.3-beta.3

package/dist/theme/colors.js

@@ -0,0 +1,212 @@
+import { merge } from "lodash";
+/**
+ * Base color values for light theme
+ * These are the actual color values that get mapped to the palette
+ */
+const lightModeColors = {
+    neutral: {
+        0: '#ffffff',
+        1: '#fafafa',
+        2: '#f5f5f5',
+        3: '#f0f0f0',
+        4: '#e5e5e5',
+        5: '#d4d4d4',
+        6: '#b3b3b3',
+        7: '#999999',
+        8: '#666666',
+        9: '#1a1a1a',
+        10: '#000000',
+    },
+};
+/**
+ * Base color values for dark theme
+ * Inverted neutral scale for dark mode
+ */
+const darkModeColors = {
+    neutral: {
+        0: '#000000',
+        1: '#1a1a1a',
+        2: '#666666',
+        3: '#999999',
+        4: '#b3b3b3',
+        5: '#d4d4d4',
+        6: '#e5e5e5',
+        7: '#f0f0f0',
+        8: '#f5f5f5',
+        9: '#fafafa',
+        10: '#ffffff',
+    },
+};
+/**
+ * Build default color palette for a given theme mode
+ *
+ * @param mode - 'light' or 'dark'
+ * @returns Complete color palette with theme-aware neutral scale
+ */
+const buildDefaultPalette = (mode) => {
+    const modeColors = mode === 'light' ? lightModeColors : darkModeColors;
+    return {
+        primary: {
+            main: '#000000',
+            hover: '#1a1a1a',
+            active: '#000000',
+            light: '#666666',
+            lighter: '#999999',
+            contrast: '#FFFFFF',
+        },
+        action: {
+            main: '#1a6985',
+            hover: '#145268',
+            active: '#0f3d4f',
+            light: '#e8f2f5',
+            lighter: '#f4f9fa',
+            disabled: '#a3c9d6',
+            contrast: '#FFFFFF',
+        },
+        absolute: {
+            white: '#ffffff',
+            black: '#000000',
+        },
+        neutral: {
+            // Numeric scale (theme-aware)
+            0: modeColors.neutral[0],
+            1: modeColors.neutral[1],
+            2: modeColors.neutral[2],
+            3: modeColors.neutral[3],
+            4: modeColors.neutral[4],
+            5: modeColors.neutral[5],
+            6: modeColors.neutral[6],
+            7: modeColors.neutral[7],
+            8: modeColors.neutral[8],
+            9: modeColors.neutral[9],
+            10: modeColors.neutral[10],
+            // Convenient aliases (map to numeric scale)
+            brightest: modeColors.neutral[0],
+            lightest: modeColors.neutral[1],
+            lighter: modeColors.neutral[2],
+            light: modeColors.neutral[3],
+            medium: modeColors.neutral[5],
+            dark: modeColors.neutral[7],
+            darker: modeColors.neutral[8],
+            darkest: modeColors.neutral[9],
+            dimmest: modeColors.neutral[10],
+        },
+        success: {
+            main: '#10b981',
+            bg: '#ecfdf5',
+            border: '#a7f3d0',
+            text: '#047857',
+        },
+        error: {
+            main: '#ef4444',
+            bg: '#fef2f2',
+            border: '#fecaca',
+            text: '#dc2626',
+        },
+        warning: {
+            main: '#f59e0b',
+            bg: '#fffbeb',
+            border: '#fde68a',
+            text: '#d97706',
+        },
+        info: {
+            main: '#1a6985',
+            bg: '#e8f2f5',
+            border: '#b8d9e6',
+            text: '#0f3d4f',
+        },
+        surface: {
+            background: modeColors.neutral[0],
+            main: modeColors.neutral[0],
+            elevated: modeColors.neutral[0],
+            hover: modeColors.neutral[1],
+            subtle: modeColors.neutral[1],
+        },
+        text: {
+            primary: modeColors.neutral[10],
+            secondary: modeColors.neutral[8],
+            tertiary: modeColors.neutral[7],
+            quaternary: modeColors.neutral[6],
+            disabled: modeColors.neutral[5],
+            inverse: modeColors.neutral[0],
+        },
+        border: {
+            main: modeColors.neutral[4],
+            light: modeColors.neutral[3],
+            strong: modeColors.neutral[5],
+            divider: modeColors.neutral[4],
+        },
+        components: {
+            button: {
+                primary: {
+                    bg: '#1a6985',
+                    hover: '#145268',
+                    text: '#FFFFFF',
+                },
+                default: {
+                    bg: modeColors.neutral[0],
+                    border: modeColors.neutral[5],
+                    text: modeColors.neutral[10],
+                    hover: modeColors.neutral[1],
+                },
+            },
+            input: {
+                bg: modeColors.neutral[0],
+                border: modeColors.neutral[5],
+                borderHover: modeColors.neutral[7],
+                borderFocus: '#1a6985',
+                placeholder: modeColors.neutral[7],
+            },
+            table: {
+                bg: modeColors.neutral[0],
+                headerBg: modeColors.neutral[1],
+                headerText: modeColors.neutral[10],
+                border: modeColors.neutral[4],
+                rowHover: modeColors.neutral[1],
+            },
+            sidebar: {
+                bg: '#000000',
+                hover: 'rgba(255, 255, 255, 0.08)',
+                selected: 'rgba(255, 255, 255, 0.12)',
+                text: '#FFFFFF',
+                textSecondary: 'rgba(255, 255, 255, 0.65)',
+            },
+        },
+        utility: {
+            transparent: 'transparent',
+            link: '#1a6985',
+            linkHover: '#145268',
+            linkActive: '#0f3d4f',
+        },
+    };
+};
+/**
+ * Default color palette for light theme
+ */
+export const defaultColorPalette = buildDefaultPalette('light');
+/**
+ * Build a complete color palette by merging overrides with defaults
+ * Performs deep merge to allow partial nested overrides
+ *
+ * @param overrides - Partial color palette overrides
+ * @param mode - Theme mode ('light' or 'dark')
+ * @returns Complete color palette with overrides applied
+ */
+export const buildColorPalette = (overrides, mode = 'light') => {
+    const basePalette = buildDefaultPalette(mode);
+    if (!overrides)
+        return basePalette;
+    const merged = merge({}, basePalette, overrides);
+    // After merging, ensure neutral aliases are synced with numeric values
+    // This handles cases where overrides might change the numeric scale
+    merged.neutral.brightest = merged.neutral[0];
+    merged.neutral.lightest = merged.neutral[1];
+    merged.neutral.lighter = merged.neutral[2];
+    merged.neutral.light = merged.neutral[3];
+    merged.neutral.medium = merged.neutral[5];
+    merged.neutral.dark = merged.neutral[7];
+    merged.neutral.darker = merged.neutral[8];
+    merged.neutral.darkest = merged.neutral[9];
+    merged.neutral.dimmest = merged.neutral[10];
+    return merged;
+};

package/dist/theme/constants.js

@@ -0,0 +1,82 @@
+import { merge } from 'lodash';
+/**
+ * Default UI constants
+ * Professional, accessible defaults suitable for most applications
+ */
+export const defaultUIConstants = {
+    typography: {
+        fontFamily: "Avenir, MarkPro, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+        fontSize: {
+            xs: 12,
+            sm: 13,
+            base: 14,
+            lg: 16,
+            xl: 18,
+        },
+        fontWeight: {
+            normal: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+        },
+        lineHeight: {
+            tight: 1.25,
+            base: 1.5715,
+            relaxed: 1.75,
+        },
+    },
+    spacing: {
+        xs: 4,
+        sm: 8,
+        md: 12,
+        lg: 16,
+        xl: 24,
+        '2xl': 32,
+        '3xl': 48,
+    },
+    radius: {
+        none: 0,
+        sm: 8,
+        base: 12,
+        md: 14,
+        lg: 16,
+        xl: 20,
+        full: 9999,
+        button: 24,
+        input: 10,
+        card: 16,
+    },
+    shadow: {
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        base: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08)',
+        md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08)',
+        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08)',
+        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08)',
+        card: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        elevated: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08)',
+        dropdown: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08)',
+    },
+    zIndex: {
+        dropdown: 1000,
+        modal: 1050,
+        popover: 1060,
+        tooltip: 1070,
+        notification: 1080,
+    },
+    transition: {
+        fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
+        base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
+        slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+};
+/**
+ * Build complete UI constants by merging overrides with defaults
+ *
+ * @param overrides - Partial UI constants overrides
+ * @returns Complete UI constants with overrides applied
+ */
+export const buildUIConstants = (overrides) => {
+    if (!overrides)
+        return defaultUIConstants;
+    return merge(defaultUIConstants, overrides);
+};

package/dist/theme/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../theme-provider-Dqvy24OD.js");require("react"),require("antd"),require("lodash"),exports.TemboThemeProvider=e.TemboThemeProvider,exports.buildColorPalette=e.buildColorPalette,exports.buildUIConstants=e.buildUIConstants,exports.defaultColorPalette=e.defaultColorPalette,exports.defaultUIConstants=e.defaultUIConstants,exports.useTemboTheme=e.useTemboTheme;
+"use strict";var e=require("../theme-provider-RhAw3jw_.js");require("react"),require("antd"),require("lodash"),exports.TemboThemeProvider=e.TemboThemeProvider,exports.buildColorPalette=e.buildColorPalette,exports.buildUIConstants=e.buildUIConstants,exports.defaultColorPalette=e.defaultColorPalette,exports.defaultUIConstants=e.defaultUIConstants,exports.useTemboTheme=e.useTemboTheme;
 //# sourceMappingURL=index.cjs.js.map

package/dist/theme/index.js

@@ -1,2 +1,2 @@
-export{T as TemboThemeProvider,b as buildColorPalette,c as buildUIConstants,d as defaultColorPalette,a as defaultUIConstants,u as useTemboTheme}from"../theme-provider-D_oV1J_K.js";import"react";import"antd";import"lodash";
+export{T as TemboThemeProvider,b as buildColorPalette,c as buildUIConstants,d as defaultColorPalette,a as defaultUIConstants,u as useTemboTheme}from"../theme-provider-Ca4P0Hcp.js";import"react";import"antd";import"lodash";
 //# sourceMappingURL=index.js.map

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ThemeConfig } from 'antd';
-import { TemboColorPalette, TemboColorOverrides } from './colors.js';
+import { TemboColorPalette, TemboColorOverrides, ThemeMode } from './colors.js';
 import { TemboUIConstants, TemboUIConstantsOverrides } from './constants.js';
 /**
  * Shape of the theme context exposed via useTemboTheme()
@@ -8,6 +8,7 @@ import { TemboUIConstants, TemboUIConstantsOverrides } from './constants.js';
 export interface TemboThemeContextValue {
     colors: TemboColorPalette;
     constants: TemboUIConstants;
+    mode: ThemeMode;
 }
 /**
  * Props for TemboThemeProvider
@@ -19,6 +20,12 @@ export interface TemboThemeContextValue {
  * </TemboThemeProvider>
  *
  * @example
+ * // With dark mode
+ * <TemboThemeProvider mode="dark">
+ *   <App />
+ * </TemboThemeProvider>
+ *
+ * @example
  * // With color overrides
  * <TemboThemeProvider
  *   colors={{
@@ -32,6 +39,7 @@ export interface TemboThemeContextValue {
  * @example
  * // With all customizations
  * <TemboThemeProvider
+ *   mode="dark"
  *   colors={{ primary: { main: '#007bff' } }}
  *   constants={{ radius: { base: 8 } }}
  *   themeOverrides={{
@@ -45,6 +53,8 @@ export interface TemboThemeContextValue {
  */
 export interface TemboThemeProviderProps {
     children: React.ReactNode;
+    /** Theme mode - 'light' or 'dark' */
+    mode?: ThemeMode;
     /** Color palette overrides - supports deep partial overrides */
     colors?: TemboColorOverrides;
     /** UI constants overrides - supports deep partial overrides */
@@ -57,6 +67,7 @@ export interface TemboThemeProviderProps {
  *
  * 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.
+ * Supports light and dark mode through the mode prop.
  *
  * All child components can access theme values via the useTemboTheme() hook.
  */
@@ -64,22 +75,23 @@ 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.
+ * Returns the merged color palette, UI constants, and current theme mode.
  * Components should always use this hook instead of importing defaults directly.
  *
- * @returns Theme context containing colors and constants
+ * @returns Theme context containing colors, constants, and mode
  *
  * @example
  * function MyComponent() {
- *   const { colors, constants } = useTemboTheme();
+ *   const { colors, constants, mode } = useTemboTheme();
  *
  *   return (
  *     <div style={{
  *       color: colors.text.primary,
  *       padding: constants.spacing.md,
- *       borderRadius: constants.radius.base
+ *       borderRadius: constants.radius.base,
+ *       backgroundColor: colors.neutral.lightest
  *     }}>
- *       Themed content
+ *       Current theme: {mode}
  *     </div>
  *   );
  * }