@temboplus/frontend-react-core 0.1.3-beta.12 → 0.1.3-beta.14

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

@@ -1,11 +1,13 @@
 import React from 'react';
-import { type ThemeConfig } from 'antd';
-import { ColorPalette, ThemeMode } from './tokens/color.js';
+import type { ThemeConfig } from 'antd';
+import { UIConstants } from './tokens/constants.js';
+import { ColorPalette, ThemeMode } from './tokens/colors.js';
 /**
- * Theme context value
+ * Theme context value - now includes constants!
  */
 export interface TemboTheme {
     colors: ColorPalette;
+    constants: UIConstants;
     mode: ThemeMode;
 }
 /**
@@ -13,22 +15,32 @@ export interface TemboTheme {
  */
 export interface TemboThemeProviderProps {
     children: React.ReactNode;
-    /** Theme mode - 'light' or 'dark' */
     mode?: ThemeMode;
-    /** Raw Ant Design theme overrides (advanced usage) */
     antdThemeOverrides?: Partial<ThemeConfig>;
 }
 /**
  * TemboThemeProvider
- *
- * Wraps your application with monochrome-first theming system.
- * Supports seamless light/dark mode switching.
  */
 export declare const TemboThemeProvider: React.FC<TemboThemeProviderProps>;
 /**
- * Hook to access current theme
+ * Hook to access theme - now returns constants too!
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { colors, constants, mode } = useTemboTheme();
  *
- * Returns the active color palette and theme mode.
- * Use this in components that need direct access to theme tokens.
+ *   return (
+ *     <div style={{
+ *       color: colors.text.primary,
+ *       padding: constants.spacing[4],
+ *       borderRadius: constants.radius.base,
+ *       fontWeight: constants.typography.fontWeight.medium,
+ *     }}>
+ *       Content
+ *     </div>
+ *   );
+ * }
+ * ```
  */
 export declare const useNewTemboTheme: () => TemboTheme;

package/dist/theme/theme-provider.js

@@ -1,38 +1,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { ConfigProvider } from 'antd';
+import { defaultUIConstants } from './tokens/constants.js';
 import { buildAntDTheme } from './theme-config.js';
-import { buildColorPalette } from './tokens/color.js';
+import { buildColorPalette } from './tokens/colors.js';
 const TemboThemeContext = React.createContext({
     colors: buildColorPalette('light'),
+    constants: defaultUIConstants,
     mode: 'light',
 });
 /**
  * TemboThemeProvider
- *
- * Wraps your application with monochrome-first theming system.
- * Supports seamless light/dark mode switching.
  */
 export const TemboThemeProvider = ({ children, mode = 'light', antdThemeOverrides, }) => {
-    // Build color palette for current mode
     const colors = React.useMemo(() => buildColorPalette(mode), [mode]);
-    // Build Ant Design theme configuration
+    const constants = React.useMemo(() => defaultUIConstants, []);
     const antdTheme = React.useMemo(() => {
         var _a, _b;
-        const baseTheme = buildAntDTheme(colors);
+        const baseTheme = buildAntDTheme(colors, constants);
         if (!antdThemeOverrides)
             return baseTheme;
-        // Deep merge overrides
         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, antdThemeOverrides]);
-    // Build context value
-    const contextValue = React.useMemo(() => ({ colors, mode }), [colors, mode]);
+    }, [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 current theme
+ * Hook to access theme - now returns constants too!
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { colors, constants, mode } = useTemboTheme();
  *
- * Returns the active color palette and theme mode.
- * Use this in components that need direct access to theme tokens.
+ *   return (
+ *     <div style={{
+ *       color: colors.text.primary,
+ *       padding: constants.spacing[4],
+ *       borderRadius: constants.radius.base,
+ *       fontWeight: constants.typography.fontWeight.medium,
+ *     }}>
+ *       Content
+ *     </div>
+ *   );
+ * }
+ * ```
  */
 export const useNewTemboTheme = () => React.useContext(TemboThemeContext);

package/dist/theme/tokens/{color.d.ts → colors.d.ts}

@@ -4,12 +4,10 @@
  * Monochrome-first design system with purposeful color usage.
  *
  * Philosophy:
- * - Monochrome foundation (4 neutral tones)
- * - Color used purposefully (semantic feedback, categories, data viz)
- * - Standard blue for links (web conventions)
+ * - 6 neutral tones for optimal contrast and clean mapping
+ * - Monochrome foundation with semantic color accents
+ * - Standard blue for links and focus states
  * - Theme-aware: entire system adapts to light/dark mode
- *
- * Inspired by: Wise, Linear, Apple HIG
  */
 export type ThemeMode = 'light' | 'dark';
 /**
@@ -30,19 +28,24 @@ export interface ColorScale {
 export interface ColorPalette {
     mode: ThemeMode;
     /**
-     * Monochrome foundation - 4 neutral tones
+     * Monochrome foundation - 6 neutral tones
      * Theme-aware: inverts in dark mode
+     * Optimized for accessibility with proper contrast ratios
      *
-     * 1 = Brightest (backgrounds)
-     * 2 = Subtle (hover states, dividers)
-     * 3 = Medium (borders, disabled text)
-     * 4 = Darkest (text, primary elements)
+     * 1 = Brightest (pure backgrounds)
+     * 2 = Very light (page backgrounds)
+     * 3 = Light (hover states, subtle borders)
+     * 4 = Medium (default borders)
+     * 5 = Dark (secondary text, strong borders)
+     * 6 = Darkest (primary text, actions)
      */
     neutral: {
         1: string;
         2: string;
         3: string;
         4: string;
+        5: string;
+        6: string;
     };
     /**
      * Absolute colors - never change
@@ -53,7 +56,7 @@ export interface ColorPalette {
     };
     /**
      * Links - standard web colors
-     * Same in both themes (chosen for universal contrast)
+     * Also used for focus rings (blue is universal web standard)
      */
     link: {
         /** Default link color - standard blue */
@@ -88,8 +91,7 @@ export interface ColorPalette {
         orange: ColorScale;
     };
     /**
-     * Surface hierarchy - derived from neutral scale
-     * Convenience tokens for common surfaces
+     * Surface hierarchy
      */
     surface: {
         /** Main page background */
@@ -106,18 +108,18 @@ export interface ColorPalette {
         nested: string;
     };
     /**
-     * Border colors - derived from neutral scale
+     * Border colors
      */
     border: {
         /** Subtle borders - dividers, separators */
         subtle: string;
         /** Default borders - form inputs, cards */
         default: string;
-        /** Strong borders - emphasis, focus alternative */
+        /** Strong borders - emphasis */
         strong: string;
     };
     /**
-     * Text colors - derived from neutral scale
+     * Text colors
      */
     text: {
         /** Primary text - headlines, body copy */
@@ -131,6 +133,20 @@ export interface ColorPalette {
         /** Text on dark backgrounds */
         inverse: string;
     };
+    /**
+     * Monochrome actions - for buttons and interactive elements
+     * Inverts automatically with theme mode
+     */
+    action: {
+        /** Default action background */
+        default: string;
+        /** Hover state background */
+        hover: string;
+        /** Disabled state background */
+        disabled: string;
+        /** Text/icons on action backgrounds */
+        contrast: string;
+    };
 }
 /**
  * Build color palette for given theme mode
@@ -146,7 +162,6 @@ export declare const lightPalette: ColorPalette;
 export declare const darkPalette: ColorPalette;
 /**
  * Color palette overrides (for custom theming)
- * Allows partial overrides while maintaining type safety
  */
 export type ColorOverrides = {
     neutral?: Partial<ColorPalette['neutral']>;

package/dist/theme/tokens/{color.js → colors.js}

@@ -4,47 +4,49 @@
  * Monochrome-first design system with purposeful color usage.
  *
  * Philosophy:
- * - Monochrome foundation (4 neutral tones)
- * - Color used purposefully (semantic feedback, categories, data viz)
- * - Standard blue for links (web conventions)
+ * - 6 neutral tones for optimal contrast and clean mapping
+ * - Monochrome foundation with semantic color accents
+ * - Standard blue for links and focus states
  * - Theme-aware: entire system adapts to light/dark mode
- *
- * Inspired by: Wise, Linear, Apple HIG
  */
 /**
- * Build light mode colors
+ * Build light mode colors with 6-tone neutral scale
  */
 const buildLightModeColors = () => ({
     mode: 'light',
+    // 6 neutral tones - optimized for accessibility
     neutral: {
-        1: '#FFFFFF', // Pure white - cards, inputs
-        2: '#F7F8F9', // Light gray - page backgrounds, hover
-        3: '#E1E4E8', // Medium gray - borders
-        4: '#2E3338', // Dark gray - text, primary elements
+        1: '#FFFFFF', // Pure white
+        2: '#F5F7FA', // Very light gray - page backgrounds
+        3: '#E5E7EB', // Light gray - hover, subtle borders
+        4: '#D1D5DB', // Medium gray - default borders
+        5: '#6B7280', // Dark gray - secondary text, strong borders
+        6: '#111827', // Near black - primary text, actions
     },
     absolute: {
         black: '#000000',
         white: '#FFFFFF',
     },
+    // Standard blue for links and focus states
     link: {
         default: '#2563EB', // Standard web blue
         hover: '#1D4ED8', // Darker blue
-        visited: '#7C3AED', // Purple (standard)
+        visited: '#7C3AED', // Purple (web standard)
         active: '#1E40AF', // Even darker blue
     },
     semantic: {
         success: {
-            main: '#059669', // Dark green (readable on white)
+            main: '#059669', // Dark green (7.0:1 contrast)
             subtle: '#ECFDF5', // Very light green
             contrast: '#FFFFFF', // White text on main
         },
         error: {
-            main: '#DC2626', // Dark red
+            main: '#DC2626', // Dark red (6.5:1 contrast)
             subtle: '#FEF2F2', // Very light red
             contrast: '#FFFFFF',
         },
         warning: {
-            main: '#D97706', // Dark amber
+            main: '#D97706', // Dark amber (6.0:1 contrast)
             subtle: '#FFFBEB', // Very light yellow
             contrast: '#FFFFFF',
         },
@@ -86,40 +88,50 @@ const buildLightModeColors = () => ({
             contrast: '#FFFFFF',
         },
     },
-    // Derived surface tokens
+    // Derived surface tokens (from 6-tone scale)
     surface: {
-        page: '#F7F8F9', // neutral[2]
+        page: '#F5F7FA', // neutral[2]
         card: '#FFFFFF', // neutral[1]
         overlay: '#FFFFFF', // neutral[1]
-        interactive: '#F0F2F5', // Between neutral[1] and neutral[2]
-        selected: '#F7F8F9', // neutral[2]
-        nested: '#FAFBFC', // Between neutral[1] and neutral[2]
+        interactive: '#E5E7EB', // neutral[3]
+        selected: '#E5E7EB', // neutral[3]
+        nested: '#FAFBFC', // Between neutral[1] and [2]
     },
     // Derived border tokens
     border: {
-        subtle: '#F0F2F5', // Lighter than neutral[3]
-        default: '#E1E4E8', // neutral[3]
-        strong: '#C4CCD4', // Between neutral[3] and neutral[4]
+        subtle: '#E5E7EB', // neutral[3]
+        default: '#D1D5DB', // neutral[4]
+        strong: '#6B7280', // neutral[5]
     },
     // Derived text tokens
     text: {
-        primary: '#2E3338', // neutral[4]
-        secondary: '#5E6C7A', // ~70% opacity of neutral[4]
-        tertiary: '#8A96A3', // ~50% opacity of neutral[4]
-        disabled: '#C4CCD4', // ~30% opacity of neutral[4]
+        primary: '#111827', // neutral[6] - 16:1 contrast ✅
+        secondary: '#6B7280', // neutral[5] - 4.6:1 contrast ✅
+        tertiary: '#6B7280', // neutral[5] - same as secondary
+        disabled: '#D1D5DB', // neutral[4] - clear disabled state
         inverse: '#FFFFFF', // neutral[1]
     },
+    // Monochrome actions
+    action: {
+        default: '#111827', // neutral[6] - dark button
+        hover: '#1F2937', // Slightly lighter than neutral[6]
+        disabled: '#E5E7EB', // neutral[3] - light disabled
+        contrast: '#FFFFFF', // neutral[1] - white text
+    },
 });
 /**
- * Build dark mode colors
+ * Build dark mode colors with inverted 6-tone scale
  */
 const buildDarkModeColors = () => ({
     mode: 'dark',
+    // 6 neutral tones - inverted for dark mode
     neutral: {
-        1: '#1A1D21', // Dark background
-        2: '#2E3338', // Slightly lighter
-        3: '#4A5158', // Medium gray
-        4: '#F7F8F9', // Light text
+        1: '#111827', // Near black
+        2: '#1F2937', // Very dark gray
+        3: '#374151', // Dark gray
+        4: '#4B5563', // Medium gray
+        5: '#9CA3AF', // Light gray
+        6: '#F9FAFB', // Off white
     },
     absolute: {
         black: '#000000',
@@ -133,7 +145,7 @@ const buildDarkModeColors = () => ({
     },
     semantic: {
         success: {
-            main: '#34D399', // Bright green (readable on dark)
+            main: '#34D399', // Bright green
             subtle: '#064E3B', // Dark green background
             contrast: '#000000', // Black text on bright
         },
@@ -187,26 +199,33 @@ const buildDarkModeColors = () => ({
     },
     // Derived surface tokens
     surface: {
-        page: '#1A1D21', // neutral[1]
-        card: '#2E3338', // neutral[2]
-        overlay: '#2E3338', // neutral[2]
-        interactive: '#3A3F45', // Between neutral[2] and neutral[3]
-        selected: '#2E3338', // neutral[2]
-        nested: '#242729', // Between neutral[1] and neutral[2]
+        page: '#1F2937', // neutral[2]
+        card: '#111827', // neutral[1]
+        overlay: '#1F2937', // neutral[2]
+        interactive: '#374151', // neutral[3]
+        selected: '#374151', // neutral[3]
+        nested: '#1A1F2E', // Between neutral[1] and [2]
     },
     // Derived border tokens
     border: {
-        subtle: '#3A3F45', // Lighter than neutral[3]
-        default: '#4A5158', // neutral[3]
-        strong: '#5E6C7A', // Between neutral[3] and neutral[4]
+        subtle: '#374151', // neutral[3]
+        default: '#4B5563', // neutral[4]
+        strong: '#9CA3AF', // neutral[5]
     },
     // Derived text tokens
     text: {
-        primary: '#F7F8F9', // neutral[4]
-        secondary: '#B4BCC5', // ~75% opacity
-        tertiary: '#8A96A3', // ~55% opacity
-        disabled: '#5E6C7A', // ~35% opacity
-        inverse: '#1A1D21', // neutral[1]
+        primary: '#F9FAFB', // neutral[6]
+        secondary: '#9CA3AF', // neutral[5]
+        tertiary: '#9CA3AF', // neutral[5]
+        disabled: '#4B5563', // neutral[4]
+        inverse: '#111827', // neutral[1]
+    },
+    // Monochrome actions (inverted)
+    action: {
+        default: '#F9FAFB', // neutral[6] - light button
+        hover: '#E5E7EB', // Slightly darker
+        disabled: '#374151', // neutral[3] - dark disabled
+        contrast: '#111827', // neutral[1] - dark text
     },
 });
 /**

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

@@ -0,0 +1,126 @@
+/**
+ * Tembo Design System - Constants
+ *
+ * All non-color design tokens: typography, spacing, radius, shadows, etc.
+ * Bold rounded corners with subtle shadows for elevation.
+ */
+export interface UIConstants {
+    /**
+     * Typography tokens
+     */
+    typography: {
+        fontFamily: {
+            base: string;
+            mono: string;
+        };
+        fontSize: {
+            xs: number;
+            sm: number;
+            base: number;
+            lg: number;
+            xl: number;
+            '2xl': number;
+            '3xl': number;
+            '4xl': number;
+            '5xl': number;
+        };
+        fontWeight: {
+            light: number;
+            regular: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+            heavy: number;
+        };
+        lineHeight: {
+            tight: number;
+            base: number;
+            relaxed: number;
+        };
+        letterSpacing: {
+            tight: string;
+            base: string;
+            wide: string;
+        };
+    };
+    /**
+     * Spacing scale (4px base unit)
+     */
+    spacing: {
+        0: number;
+        1: number;
+        2: number;
+        3: number;
+        4: number;
+        5: number;
+        6: number;
+        8: number;
+        10: number;
+        12: number;
+        16: number;
+        20: number;
+    };
+    /**
+     * Border radius tokens
+     * Bold, smooth rounded corners throughout the design
+     */
+    radius: {
+        none: number;
+        sm: number;
+        base: number;
+        md: number;
+        lg: number;
+        xl: number;
+        full: number;
+        button: number;
+        input: number;
+        card: number;
+        modal: number;
+        avatar: number;
+    };
+    /**
+     * Box shadow tokens
+     * Subtle shadows for gentle elevation
+     * Inputs and buttons have no shadow - shadows only for raised/overlay elements
+     */
+    shadow: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        card: string;
+        modal: string;
+        popover: string;
+        tooltip: string;
+    };
+    /**
+     * Z-index layers
+     */
+    zIndex: {
+        dropdown: number;
+        modal: number;
+        popover: number;
+        tooltip: number;
+        notification: number;
+    };
+    /**
+     * Transition timing
+     */
+    transition: {
+        fast: string;
+        base: string;
+        slow: string;
+    };
+}
+/**
+ * Default UI constants
+ * Bold rounded corners with subtle shadows for elevation
+ */
+export declare const defaultUIConstants: UIConstants;
+/**
+ * Dark mode adjustments
+ * Shadows are more subtle/absent in dark mode
+ */
+export declare const buildDarkModeConstants: () => Pick<UIConstants, "shadow">;

package/dist/theme/tokens/constants.js

@@ -0,0 +1,126 @@
+/**
+ * Tembo Design System - Constants
+ *
+ * All non-color design tokens: typography, spacing, radius, shadows, etc.
+ * Bold rounded corners with subtle shadows for elevation.
+ */
+/**
+ * Default UI constants
+ * Bold rounded corners with subtle shadows for elevation
+ */
+export const defaultUIConstants = {
+    typography: {
+        fontFamily: {
+            base: "Avenir, MarkPro, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+            mono: "'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace",
+        },
+        fontSize: {
+            xs: 12,
+            sm: 13,
+            base: 14,
+            lg: 16,
+            xl: 18,
+            '2xl': 20,
+            '3xl': 24,
+            '4xl': 30,
+            '5xl': 36,
+        },
+        fontWeight: {
+            light: 300,
+            regular: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+            heavy: 800,
+        },
+        lineHeight: {
+            tight: 1.25,
+            base: 1.5,
+            relaxed: 1.75,
+        },
+        letterSpacing: {
+            tight: '-0.01em',
+            base: '0',
+            wide: '0.025em',
+        },
+    },
+    spacing: {
+        0: 0,
+        1: 4,
+        2: 8,
+        3: 12,
+        4: 16,
+        5: 20,
+        6: 24,
+        8: 32,
+        10: 40,
+        12: 48,
+        16: 64,
+        20: 80,
+    },
+    /**
+     * Bold rounded corners
+     */
+    radius: {
+        none: 0,
+        sm: 12,
+        base: 24, // Bold default radius
+        md: 28,
+        lg: 32,
+        xl: 40,
+        full: 9999,
+        // Alias tokens
+        button: 24, // base - bold rounded buttons
+        input: 24, // base - bold rounded inputs
+        card: 28, // md - smooth cards
+        modal: 32, // lg - prominent modals
+        avatar: 9999, // full - circular
+    },
+    /**
+     * Subtle shadows - only for elevated/overlay elements
+     */
+    shadow: {
+        none: 'none',
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        base: '0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+        md: '0 4px 8px 0 rgba(0, 0, 0, 0.08)',
+        lg: '0 8px 16px 0 rgba(0, 0, 0, 0.10)',
+        xl: '0 12px 24px 0 rgba(0, 0, 0, 0.12)',
+        // Alias tokens - semantic shadows
+        card: '0 2px 4px 0 rgba(0, 0, 0, 0.06)', // base - gentle
+        modal: '0 8px 16px 0 rgba(0, 0, 0, 0.10)', // lg - prominent
+        popover: '0 4px 8px 0 rgba(0, 0, 0, 0.08)', // md - medium
+        tooltip: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', // sm - subtle
+    },
+    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)',
+    },
+};
+/**
+ * Dark mode adjustments
+ * Shadows are more subtle/absent in dark mode
+ */
+export const buildDarkModeConstants = () => ({
+    shadow: {
+        none: 'none',
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.2)',
+        base: '0 2px 4px 0 rgba(0, 0, 0, 0.25)',
+        md: '0 4px 8px 0 rgba(0, 0, 0, 0.3)',
+        lg: '0 8px 16px 0 rgba(0, 0, 0, 0.35)',
+        xl: '0 12px 24px 0 rgba(0, 0, 0, 0.4)',
+        // Alias tokens - adjusted for dark mode
+        card: 'none', // No shadow on cards in dark mode
+        modal: '0 8px 16px 0 rgba(0, 0, 0, 0.35)', // Stronger in dark
+        popover: '0 4px 8px 0 rgba(0, 0, 0, 0.3)', // Stronger in dark
+        tooltip: '0 1px 2px 0 rgba(0, 0, 0, 0.2)', // Stronger in dark
+    },
+});