import { createFontSizes, DEFAULT_BASE_FONT_SIZE, FONT_SCALE_PRESETS, TypographyConfig, FontSizes, FontScalePreset } from './typography'; export declare const productionTheme: { readonly colors: { readonly primary: "#ffffff"; readonly primaryText: "#000000"; readonly secondary: "#F68D32"; readonly secondaryText: "#ffffff"; readonly highlight: "#F4770B"; readonly highlightText: "#ffffff"; readonly white: "#FFFFFF"; readonly black: "#000000"; readonly text: { readonly primary: "#4a4a4a"; readonly secondary: "rgba(0, 0, 0, 0.7)"; readonly muted: "#949494"; readonly inverse: "#FFFFFF"; readonly fade: "rgba(74,74,74, 0.5)"; readonly instruction: "#737474"; readonly help: "#9b9b9b"; }; readonly status: { readonly success: "#21B63C"; readonly error: "#d31818"; readonly warning: "#f88b07"; readonly info: "#f88b07"; readonly notice: "#FFA500"; }; readonly snackbar: { readonly success: "#108c27"; readonly error: "#D01C23"; readonly warning: "#F97E24"; }; readonly progress: { readonly complete: "#108C27"; readonly error: "#D01C23"; }; readonly background: { readonly default: "#FFFFFF"; readonly hover: "#efefef"; readonly active: "#e8e8e8"; readonly disabled: "#eee"; readonly processing: "rgba(163, 163, 163, .3)"; readonly row: "#f9f9f9"; }; readonly border: { readonly light: "#f5f5f5"; readonly medium: "#BFBFBF"; readonly input: "#949494"; readonly dotted: "#eee"; readonly grey: "#d0d0d0"; readonly shadow: "#d8d8d8"; }; readonly icon: { readonly grey: "#a3a3a3"; readonly disabled: "rgba(163,163,163, 0.5)"; readonly background: "rgba(0, 0, 0, 0.10)"; }; readonly grey: { readonly 100: "#F7F7F7"; readonly 150: "#E5E5E5"; readonly 200: "#D9D9D9"; readonly 300: "#BFBFBF"; readonly 400: "#A1A1A1"; readonly 500: "#737373"; readonly 600: "#595959"; readonly 700: "#3F3F3F"; readonly 800: "#262626"; readonly 900: "#191919"; }; readonly semantic: { readonly green: { readonly lighter: "#E5F6E8"; readonly light: "#54C164"; readonly base: "#2B8048"; readonly dark: "#046211"; readonly darker: "#033707"; }; readonly red: { readonly lighter2: "#FCECE7"; readonly lighter: "#FFE3E5"; readonly light: "#F16C71"; readonly base: "#CA212B"; readonly dark: "#97090E"; readonly darker: "#5F0508"; }; readonly blue: { readonly lighter2: "#E0EBFD"; readonly lighter: "#DDE9FC"; readonly light: "#5493F0"; readonly base: "#0053CD"; readonly dark: "#003B91"; readonly darker: "#012355"; readonly link: "#0066CC"; }; readonly orange: { readonly lighter2: "#FFEFC6"; readonly lighter: "#FFEEDD"; readonly light: "#FFBA7C"; readonly base: "#F86C05"; readonly dark: "#B3520C"; readonly darker: "#6D3106"; }; }; readonly transparent: { readonly black50: "rgba(0, 0, 0, 0.50)"; readonly black20: "rgba(0, 0, 0, 0.20)"; readonly black08: "rgba(0, 0, 0, 0.08)"; readonly black05: "rgba(0, 0, 0, 0.05)"; readonly white50: "rgba(255,255,255,0.50)"; readonly white20: "rgba(255,255,255,0.20)"; readonly white05: "rgba(255,255,255,0.05)"; }; }; readonly typography: { readonly fontFamily: "\"Roboto\", sans-serif"; readonly fontFamilyIcons: "\"Material Symbols Outlined\""; readonly baseFontSize: 14; readonly fontSize: FontSizes; readonly fontWeight: { readonly regular: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; }; readonly lineHeight: { readonly tight: "1.25"; readonly normal: "1.5"; readonly relaxed: "20px"; }; }; readonly spacing: { readonly 0: "0"; readonly px: "1px"; readonly 1: "4px"; readonly 2: "6px"; readonly 3: "8px"; readonly 4: "10px"; readonly 5: "12px"; readonly 6: "16px"; readonly 7: "24px"; readonly 8: "32px"; }; readonly sizes: { readonly buttonHeight: "36px"; readonly headerHeight: "48px"; readonly navHeight: "52px"; readonly thumbnailSmall: "96px"; readonly thumbnailLarge: "200px"; readonly iconSize: "24px"; }; readonly borders: { readonly radius: { readonly sm: "4px"; readonly md: "8px"; readonly full: "9999px"; readonly small: "4px"; readonly medium: "8px"; readonly large: "16px"; }; readonly width: { readonly thin: "1px"; readonly medium: "2px"; }; }; readonly shadows: { readonly card: "0px 2px 8px 2px rgb(0 0 0 / 18%)"; readonly dropdown: "0px 2px 5px rgba(0, 0, 0, 0.25)"; readonly menu: "0 2px 8px rgba(0, 0, 0, 0.2)"; readonly snackbar: "0px 2px 5px rgb(0 0 0 / 25%)"; readonly ibUi: { readonly 100: "0px 1px 3px rgba(0, 0, 0, 0.25)"; readonly 200: "0px 2px 5px rgba(0, 0, 0, 0.25)"; readonly 300: "0px 3px 12px rgba(0, 0, 0, 0.25)"; readonly footer: "0px -1px 2px rgba(0, 0, 0, 0.25)"; readonly selected: "0px 2px 5px rgba(0, 0, 0, 0.50)"; }; }; readonly transitions: { readonly fast: "opacity 0.2s, transform 0.1s"; readonly normal: "200ms"; readonly slow: "400ms"; readonly easing: { readonly slide: "cubic-bezier(0.17, 0.04, 0.03, 0.94)"; readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)"; }; }; readonly zIndex: { readonly base: 0; readonly header: 1; readonly dropdown: 99; readonly modal: 1000; readonly snackbar: 10000; }; }; export type Theme = typeof productionTheme; /** * Theme configuration options for createTheme(). */ export interface ThemeConfig { /** * Typography configuration options. */ typography?: Partial; /** * Dynamic tenant colors (from login API response). */ colors?: { primary?: string; primaryText?: string; secondary?: string; secondaryText?: string; highlight?: string; highlightText?: string; }; } /** * Creates a customized theme with the given configuration. * Use this to create themes with different base font sizes for accessibility, * or to apply tenant-specific colors from the login API response. * * @param config - Theme configuration options * @returns A complete theme object * * @example * // Default theme (same as importing `theme`) * const defaultTheme = createTheme(); * * @example * // Large accessibility mode (16px base) * const largeTheme = createTheme({ * typography: { baseFontSize: 16 } * }); * * @example * // With tenant colors from login response * const tenantTheme = createTheme({ * colors: { * primary: loginResponse.colourPrimary, * highlight: loginResponse.colourHighlight, * } * }); * * @example * // Using font scale presets * import { FONT_SCALE_PRESETS } from '@intelligencebank/connectingib'; * const comfortableTheme = createTheme({ * typography: { baseFontSize: FONT_SCALE_PRESETS.comfortable } * }); */ export declare function createTheme(config?: ThemeConfig): Theme; export declare const theme: { readonly colors: { readonly primary: "#ffffff"; readonly primaryText: "#000000"; readonly secondary: "#F68D32"; readonly secondaryText: "#ffffff"; readonly highlight: "#F4770B"; readonly highlightText: "#ffffff"; readonly white: "#FFFFFF"; readonly black: "#000000"; readonly text: { readonly primary: "#4a4a4a"; readonly secondary: "rgba(0, 0, 0, 0.7)"; readonly muted: "#949494"; readonly inverse: "#FFFFFF"; readonly fade: "rgba(74,74,74, 0.5)"; readonly instruction: "#737474"; readonly help: "#9b9b9b"; }; readonly status: { readonly success: "#21B63C"; readonly error: "#d31818"; readonly warning: "#f88b07"; readonly info: "#f88b07"; readonly notice: "#FFA500"; }; readonly snackbar: { readonly success: "#108c27"; readonly error: "#D01C23"; readonly warning: "#F97E24"; }; readonly progress: { readonly complete: "#108C27"; readonly error: "#D01C23"; }; readonly background: { readonly default: "#FFFFFF"; readonly hover: "#efefef"; readonly active: "#e8e8e8"; readonly disabled: "#eee"; readonly processing: "rgba(163, 163, 163, .3)"; readonly row: "#f9f9f9"; }; readonly border: { readonly light: "#f5f5f5"; readonly medium: "#BFBFBF"; readonly input: "#949494"; readonly dotted: "#eee"; readonly grey: "#d0d0d0"; readonly shadow: "#d8d8d8"; }; readonly icon: { readonly grey: "#a3a3a3"; readonly disabled: "rgba(163,163,163, 0.5)"; readonly background: "rgba(0, 0, 0, 0.10)"; }; readonly grey: { readonly 100: "#F7F7F7"; readonly 150: "#E5E5E5"; readonly 200: "#D9D9D9"; readonly 300: "#BFBFBF"; readonly 400: "#A1A1A1"; readonly 500: "#737373"; readonly 600: "#595959"; readonly 700: "#3F3F3F"; readonly 800: "#262626"; readonly 900: "#191919"; }; readonly semantic: { readonly green: { readonly lighter: "#E5F6E8"; readonly light: "#54C164"; readonly base: "#2B8048"; readonly dark: "#046211"; readonly darker: "#033707"; }; readonly red: { readonly lighter2: "#FCECE7"; readonly lighter: "#FFE3E5"; readonly light: "#F16C71"; readonly base: "#CA212B"; readonly dark: "#97090E"; readonly darker: "#5F0508"; }; readonly blue: { readonly lighter2: "#E0EBFD"; readonly lighter: "#DDE9FC"; readonly light: "#5493F0"; readonly base: "#0053CD"; readonly dark: "#003B91"; readonly darker: "#012355"; readonly link: "#0066CC"; }; readonly orange: { readonly lighter2: "#FFEFC6"; readonly lighter: "#FFEEDD"; readonly light: "#FFBA7C"; readonly base: "#F86C05"; readonly dark: "#B3520C"; readonly darker: "#6D3106"; }; }; readonly transparent: { readonly black50: "rgba(0, 0, 0, 0.50)"; readonly black20: "rgba(0, 0, 0, 0.20)"; readonly black08: "rgba(0, 0, 0, 0.08)"; readonly black05: "rgba(0, 0, 0, 0.05)"; readonly white50: "rgba(255,255,255,0.50)"; readonly white20: "rgba(255,255,255,0.20)"; readonly white05: "rgba(255,255,255,0.05)"; }; }; readonly typography: { readonly fontFamily: "\"Roboto\", sans-serif"; readonly fontFamilyIcons: "\"Material Symbols Outlined\""; readonly baseFontSize: 14; readonly fontSize: FontSizes; readonly fontWeight: { readonly regular: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; }; readonly lineHeight: { readonly tight: "1.25"; readonly normal: "1.5"; readonly relaxed: "20px"; }; }; readonly spacing: { readonly 0: "0"; readonly px: "1px"; readonly 1: "4px"; readonly 2: "6px"; readonly 3: "8px"; readonly 4: "10px"; readonly 5: "12px"; readonly 6: "16px"; readonly 7: "24px"; readonly 8: "32px"; }; readonly sizes: { readonly buttonHeight: "36px"; readonly headerHeight: "48px"; readonly navHeight: "52px"; readonly thumbnailSmall: "96px"; readonly thumbnailLarge: "200px"; readonly iconSize: "24px"; }; readonly borders: { readonly radius: { readonly sm: "4px"; readonly md: "8px"; readonly full: "9999px"; readonly small: "4px"; readonly medium: "8px"; readonly large: "16px"; }; readonly width: { readonly thin: "1px"; readonly medium: "2px"; }; }; readonly shadows: { readonly card: "0px 2px 8px 2px rgb(0 0 0 / 18%)"; readonly dropdown: "0px 2px 5px rgba(0, 0, 0, 0.25)"; readonly menu: "0 2px 8px rgba(0, 0, 0, 0.2)"; readonly snackbar: "0px 2px 5px rgb(0 0 0 / 25%)"; readonly ibUi: { readonly 100: "0px 1px 3px rgba(0, 0, 0, 0.25)"; readonly 200: "0px 2px 5px rgba(0, 0, 0, 0.25)"; readonly 300: "0px 3px 12px rgba(0, 0, 0, 0.25)"; readonly footer: "0px -1px 2px rgba(0, 0, 0, 0.25)"; readonly selected: "0px 2px 5px rgba(0, 0, 0, 0.50)"; }; }; readonly transitions: { readonly fast: "opacity 0.2s, transform 0.1s"; readonly normal: "200ms"; readonly slow: "400ms"; readonly easing: { readonly slide: "cubic-bezier(0.17, 0.04, 0.03, 0.94)"; readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)"; }; }; readonly zIndex: { readonly base: 0; readonly header: 1; readonly dropdown: 99; readonly modal: 1000; readonly snackbar: 10000; }; }; export { productionTheme as defaultTheme }; export { ThemeProvider } from './ThemeProvider'; export type { ThemeProviderProps } from './ThemeProvider'; export { createFontSizes, DEFAULT_BASE_FONT_SIZE, FONT_SCALE_PRESETS, }; export type { TypographyConfig, FontSizes, FontScalePreset }; export * from './colors'; export default productionTheme; //# sourceMappingURL=index.d.ts.map