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

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

@@ -0,0 +1,168 @@
+/**
+ * Tembo Design System - Color Tokens
+ *
+ * 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)
+ * - Theme-aware: entire system adapts to light/dark mode
+ *
+ * Inspired by: Wise, Linear, Apple HIG
+ */
+export type ThemeMode = 'light' | 'dark';
+/**
+ * Color scale interface
+ * Used for semantic and secondary colors
+ */
+export interface ColorScale {
+    /** Main color - primary usage */
+    main: string;
+    /** Subtle background variant */
+    subtle: string;
+    /** Text color that contrasts with main */
+    contrast: string;
+}
+/**
+ * Complete color palette
+ */
+export interface ColorPalette {
+    mode: ThemeMode;
+    /**
+     * Monochrome foundation - 4 neutral tones
+     * Theme-aware: inverts in dark mode
+     *
+     * 1 = Brightest (backgrounds)
+     * 2 = Subtle (hover states, dividers)
+     * 3 = Medium (borders, disabled text)
+     * 4 = Darkest (text, primary elements)
+     */
+    neutral: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    /**
+     * Absolute colors - never change
+     */
+    absolute: {
+        black: string;
+        white: string;
+    };
+    /**
+     * Links - standard web colors
+     * Same in both themes (chosen for universal contrast)
+     */
+    link: {
+        /** Default link color - standard blue */
+        default: string;
+        /** Hover state */
+        hover: string;
+        /** Visited link color */
+        visited: string;
+        /** Active/pressed state */
+        active: string;
+    };
+    /**
+     * Semantic colors - purpose-driven feedback
+     * Theme-aware: adapts for optimal contrast
+     */
+    semantic: {
+        success: ColorScale;
+        error: ColorScale;
+        warning: ColorScale;
+        info: ColorScale;
+    };
+    /**
+     * Secondary colors - for categories and data visualization
+     * Main color works in both themes, subtle backgrounds adapt
+     */
+    secondary: {
+        blue: ColorScale;
+        purple: ColorScale;
+        pink: ColorScale;
+        amber: ColorScale;
+        emerald: ColorScale;
+        orange: ColorScale;
+    };
+    /**
+     * Surface hierarchy - derived from neutral scale
+     * Convenience tokens for common surfaces
+     */
+    surface: {
+        /** Main page background */
+        page: string;
+        /** Cards, panels, elevated content */
+        card: string;
+        /** Modals, popovers, dropdowns */
+        overlay: string;
+        /** Hover state for interactive surfaces */
+        interactive: string;
+        /** Selected state backgrounds */
+        selected: string;
+        /** Nested/subtle backgrounds */
+        nested: string;
+    };
+    /**
+     * Border colors - derived from neutral scale
+     */
+    border: {
+        /** Subtle borders - dividers, separators */
+        subtle: string;
+        /** Default borders - form inputs, cards */
+        default: string;
+        /** Strong borders - emphasis, focus alternative */
+        strong: string;
+    };
+    /**
+     * Text colors - derived from neutral scale
+     */
+    text: {
+        /** Primary text - headlines, body copy */
+        primary: string;
+        /** Secondary text - labels, supporting info */
+        secondary: string;
+        /** Tertiary text - captions, helper text */
+        tertiary: string;
+        /** Disabled state */
+        disabled: string;
+        /** Text on dark backgrounds */
+        inverse: string;
+    };
+}
+/**
+ * Build color palette for given theme mode
+ */
+export declare const buildColorPalette: (mode?: ThemeMode) => ColorPalette;
+/**
+ * Default light mode palette
+ */
+export declare const lightPalette: ColorPalette;
+/**
+ * Default dark mode palette
+ */
+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']>;
+    link?: Partial<ColorPalette['link']>;
+    semantic?: {
+        success?: Partial<ColorScale>;
+        error?: Partial<ColorScale>;
+        warning?: Partial<ColorScale>;
+        info?: Partial<ColorScale>;
+    };
+    secondary?: {
+        blue?: Partial<ColorScale>;
+        purple?: Partial<ColorScale>;
+        pink?: Partial<ColorScale>;
+        amber?: Partial<ColorScale>;
+        emerald?: Partial<ColorScale>;
+        orange?: Partial<ColorScale>;
+    };
+};

package/dist/theme/tokens/color.js

@@ -0,0 +1,225 @@
+/**
+ * Tembo Design System - Color Tokens
+ *
+ * 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)
+ * - Theme-aware: entire system adapts to light/dark mode
+ *
+ * Inspired by: Wise, Linear, Apple HIG
+ */
+/**
+ * Build light mode colors
+ */
+const buildLightModeColors = () => ({
+    mode: 'light',
+    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
+    },
+    absolute: {
+        black: '#000000',
+        white: '#FFFFFF',
+    },
+    link: {
+        default: '#2563EB', // Standard web blue
+        hover: '#1D4ED8', // Darker blue
+        visited: '#7C3AED', // Purple (standard)
+        active: '#1E40AF', // Even darker blue
+    },
+    semantic: {
+        success: {
+            main: '#059669', // Dark green (readable on white)
+            subtle: '#ECFDF5', // Very light green
+            contrast: '#FFFFFF', // White text on main
+        },
+        error: {
+            main: '#DC2626', // Dark red
+            subtle: '#FEF2F2', // Very light red
+            contrast: '#FFFFFF',
+        },
+        warning: {
+            main: '#D97706', // Dark amber
+            subtle: '#FFFBEB', // Very light yellow
+            contrast: '#FFFFFF',
+        },
+        info: {
+            main: '#2563EB', // Blue (matches link color)
+            subtle: '#EFF6FF', // Very light blue
+            contrast: '#FFFFFF',
+        },
+    },
+    secondary: {
+        blue: {
+            main: '#3B82F6', // Bright blue
+            subtle: '#EFF6FF',
+            contrast: '#FFFFFF',
+        },
+        purple: {
+            main: '#A855F7', // Bright purple
+            subtle: '#FAF5FF',
+            contrast: '#FFFFFF',
+        },
+        pink: {
+            main: '#EC4899', // Bright pink
+            subtle: '#FDF2F8',
+            contrast: '#FFFFFF',
+        },
+        amber: {
+            main: '#F59E0B', // Bright amber
+            subtle: '#FFFBEB',
+            contrast: '#FFFFFF',
+        },
+        emerald: {
+            main: '#10B981', // Bright emerald
+            subtle: '#ECFDF5',
+            contrast: '#FFFFFF',
+        },
+        orange: {
+            main: '#F97316', // Bright orange
+            subtle: '#FFF7ED',
+            contrast: '#FFFFFF',
+        },
+    },
+    // Derived surface tokens
+    surface: {
+        page: '#F7F8F9', // 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]
+    },
+    // Derived border tokens
+    border: {
+        subtle: '#F0F2F5', // Lighter than neutral[3]
+        default: '#E1E4E8', // neutral[3]
+        strong: '#C4CCD4', // Between neutral[3] and neutral[4]
+    },
+    // 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]
+        inverse: '#FFFFFF', // neutral[1]
+    },
+});
+/**
+ * Build dark mode colors
+ */
+const buildDarkModeColors = () => ({
+    mode: 'dark',
+    neutral: {
+        1: '#1A1D21', // Dark background
+        2: '#2E3338', // Slightly lighter
+        3: '#4A5158', // Medium gray
+        4: '#F7F8F9', // Light text
+    },
+    absolute: {
+        black: '#000000',
+        white: '#FFFFFF',
+    },
+    link: {
+        default: '#3B82F6', // Brighter blue for dark bg
+        hover: '#60A5FA', // Even brighter
+        visited: '#A78BFA', // Purple
+        active: '#2563EB', // Standard blue
+    },
+    semantic: {
+        success: {
+            main: '#34D399', // Bright green (readable on dark)
+            subtle: '#064E3B', // Dark green background
+            contrast: '#000000', // Black text on bright
+        },
+        error: {
+            main: '#F87171', // Bright red
+            subtle: '#7F1D1D', // Dark red background
+            contrast: '#000000',
+        },
+        warning: {
+            main: '#FBBF24', // Bright amber
+            subtle: '#78350F', // Dark amber background
+            contrast: '#000000',
+        },
+        info: {
+            main: '#3B82F6', // Bright blue
+            subtle: '#1E3A8A', // Dark blue background
+            contrast: '#FFFFFF',
+        },
+    },
+    secondary: {
+        blue: {
+            main: '#3B82F6', // Same bright blue
+            subtle: '#1E3A8A', // Dark blue background
+            contrast: '#FFFFFF',
+        },
+        purple: {
+            main: '#A855F7', // Same bright purple
+            subtle: '#581C87', // Dark purple background
+            contrast: '#FFFFFF',
+        },
+        pink: {
+            main: '#EC4899', // Same bright pink
+            subtle: '#831843', // Dark pink background
+            contrast: '#FFFFFF',
+        },
+        amber: {
+            main: '#F59E0B', // Same bright amber
+            subtle: '#78350F', // Dark amber background
+            contrast: '#FFFFFF',
+        },
+        emerald: {
+            main: '#10B981', // Same bright emerald
+            subtle: '#064E3B', // Dark emerald background
+            contrast: '#FFFFFF',
+        },
+        orange: {
+            main: '#F97316', // Same bright orange
+            subtle: '#7C2D12', // Dark orange background
+            contrast: '#FFFFFF',
+        },
+    },
+    // 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]
+    },
+    // Derived border tokens
+    border: {
+        subtle: '#3A3F45', // Lighter than neutral[3]
+        default: '#4A5158', // neutral[3]
+        strong: '#5E6C7A', // Between neutral[3] and neutral[4]
+    },
+    // Derived text tokens
+    text: {
+        primary: '#F7F8F9', // neutral[4]
+        secondary: '#B4BCC5', // ~75% opacity
+        tertiary: '#8A96A3', // ~55% opacity
+        disabled: '#5E6C7A', // ~35% opacity
+        inverse: '#1A1D21', // neutral[1]
+    },
+});
+/**
+ * Build color palette for given theme mode
+ */
+export const buildColorPalette = (mode = 'light') => {
+    return mode === 'light' ? buildLightModeColors() : buildDarkModeColors();
+};
+/**
+ * Default light mode palette
+ */
+export const lightPalette = buildLightModeColors();
+/**
+ * Default dark mode palette
+ */
+export const darkPalette = buildDarkModeColors();

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

@@ -0,0 +1,26 @@
+/**
+ * Border radius system
+ * Consistent 8px base (Wise standard)
+ */
+export interface RadiusScale {
+    none: number;
+    sm: number;
+    base: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+}
+export declare const radius: RadiusScale;
+/**
+ * Component-specific radius
+ */
+export interface ComponentRadius {
+    button: number;
+    input: number;
+    card: number;
+    modal: number;
+    avatar: number;
+    badge: number;
+}
+export declare const componentRadius: ComponentRadius;

package/dist/theme/tokens/radius.js

@@ -0,0 +1,17 @@
+export const radius = {
+    none: 0,
+    sm: 4,
+    base: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    full: 9999,
+};
+export const componentRadius = {
+    button: 8,
+    input: 8,
+    card: 8,
+    modal: 12,
+    avatar: 9999,
+    badge: 4,
+};

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

@@ -0,0 +1,27 @@
+/**
+ * Shadow system
+ * Minimal shadows (Wise approach)
+ */
+export interface ShadowScale {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+}
+export declare const shadows: ShadowScale;
+/**
+ * Component-specific shadows
+ */
+export interface ComponentShadows {
+    card: string;
+    dropdown: string;
+    modal: string;
+    tooltip: string;
+}
+export declare const componentShadows: ComponentShadows;
+/**
+ * Dark mode adjustments
+ * In dark mode, borders often work better than shadows
+ */
+export declare const buildDarkModeShadows: () => ComponentShadows;

package/dist/theme/tokens/shadow.js

@@ -0,0 +1,23 @@
+export const shadows = {
+    none: 'none',
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+};
+export const componentShadows = {
+    card: shadows.sm,
+    dropdown: shadows.base,
+    modal: shadows.md,
+    tooltip: shadows.sm,
+};
+/**
+ * Dark mode adjustments
+ * In dark mode, borders often work better than shadows
+ */
+export const buildDarkModeShadows = () => ({
+    card: 'none', // Use border instead
+    dropdown: shadows.base,
+    modal: shadows.md,
+    tooltip: shadows.sm,
+});

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

@@ -0,0 +1,47 @@
+/**
+ * Spacing scale
+ *
+ * Based on 4px base unit for flexibility
+ * Named by size for clarity
+ */
+export interface SpacingScale {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    8: number;
+    10: number;
+    12: number;
+    16: number;
+    20: number;
+}
+export declare const spacing: SpacingScale;
+/**
+ * Component-specific spacing
+ */
+export interface ComponentSpacing {
+    /** Button padding */
+    button: {
+        horizontal: number;
+        vertical: number;
+    };
+    /** Card padding */
+    card: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    /** Form spacing */
+    form: {
+        itemGap: number;
+        labelGap: number;
+    };
+    /** Section spacing */
+    section: {
+        gap: number;
+    };
+}
+export declare const componentSpacing: ComponentSpacing;

package/dist/theme/tokens/spacing.js

@@ -0,0 +1,32 @@
+export const 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,
+};
+export const componentSpacing = {
+    button: {
+        horizontal: 16,
+        vertical: 8,
+    },
+    card: {
+        sm: 16,
+        md: 24,
+        lg: 32,
+    },
+    form: {
+        itemGap: 16,
+        labelGap: 8,
+    },
+    section: {
+        gap: 32,
+    },
+};

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

@@ -0,0 +1,43 @@
+/**
+ * Typography system
+ */
+export interface TypographySystem {
+    fontFamily: {
+        /** Primary font stack */
+        base: string;
+        /** Monospace for code */
+        mono: string;
+    };
+    /** Font sizes */
+    fontSize: {
+        xs: number;
+        sm: number;
+        base: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+        '3xl': number;
+        '4xl': number;
+        '5xl': number;
+    };
+    /** Font weights */
+    fontWeight: {
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+    /** Line heights */
+    lineHeight: {
+        tight: number;
+        base: number;
+        relaxed: number;
+    };
+    /** Letter spacing */
+    letterSpacing: {
+        tight: string;
+        base: string;
+        wide: string;
+    };
+}
+export declare const typography: TypographySystem;

package/dist/theme/tokens/typography.js

@@ -0,0 +1,33 @@
+export const 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: {
+        regular: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+    },
+    lineHeight: {
+        tight: 1.25,
+        base: 1.5,
+        relaxed: 1.75,
+    },
+    letterSpacing: {
+        tight: '-0.01em',
+        base: '0',
+        wide: '0.025em',
+    },
+};