/** * Color System for IntelligenceBank UI Primitives * * Colors sourced from the ib-ui library design system. * This file provides a comprehensive color palette compatible with the * IntelligenceBank main platform. * * @see /Users/charlyvanni/Workspace/IntelligenceBank/ib/dev_override/ib-ui/src/Atoms/Colors */ /** * Grey scale colors - Used for backgrounds, borders, and text * Ranges from lightest (grey100) to darkest (grey900) */ export declare const greyScale: { /** Lightest grey - subtle backgrounds */ readonly grey100: "#F7F7F7"; /** Light grey - card backgrounds, dividers */ readonly grey150: "#E5E5E5"; /** Light grey - borders, disabled backgrounds */ readonly grey200: "#D9D9D9"; /** Medium light grey - borders */ readonly grey300: "#BFBFBF"; /** Medium grey - disabled text */ readonly grey400: "#A1A1A1"; /** Medium grey - secondary text, icons */ readonly grey500: "#737373"; /** Medium dark grey - secondary text */ readonly grey600: "#595959"; /** Dark grey - primary text alternative */ readonly grey700: "#3F3F3F"; /** Dark grey - headers, primary backgrounds (PRIMARY_DEFAULT) */ readonly grey800: "#262626"; /** Darkest grey - near black */ readonly grey900: "#191919"; }; /** * Green colors - Used for success states, confirmations, positive actions */ export declare const greenColors: { /** Lightest green - success backgrounds */ readonly greenLighter: "#E5F6E8"; /** Light green - success highlights */ readonly greenLight: "#54C164"; /** Base green - primary success color */ readonly greenBase: "#2B8048"; /** Dark green - success hover states */ readonly greenDark: "#046211"; /** Darkest green - success active states */ readonly greenDarker: "#033707"; }; /** * Red colors - Used for errors, warnings, destructive actions */ export declare const redColors: { /** Very light red - error backgrounds (alternative) */ readonly redLighter2: "#FCECE7"; /** Lightest red - error backgrounds */ readonly redLighter: "#FFE3E5"; /** Light red - error highlights */ readonly redLight: "#F16C71"; /** Base red - primary error color */ readonly redBase: "#CA212B"; /** Dark red - error hover states */ readonly redDark: "#97090E"; /** Darkest red - error active states */ readonly redDarker: "#5F0508"; }; /** * Blue colors - Used for informational states, links, selected items */ export declare const blueColors: { /** Very light blue - info backgrounds (alternative) */ readonly blueLighter2: "#E0EBFD"; /** Lightest blue - info backgrounds */ readonly blueLighter: "#DDE9FC"; /** Light blue - info highlights */ readonly blueLight: "#5493F0"; /** Base blue - primary info color */ readonly blueBase: "#0053CD"; /** Dark blue - info hover states */ readonly blueDark: "#003B91"; /** Darkest blue - info active states */ readonly blueDarker: "#012355"; /** Link blue - standard link color */ readonly blueLink: "#0066CC"; }; /** * Orange colors - Used for warning states, pending status, attention */ export declare const orangeColors: { /** Very light orange - warning backgrounds (alternative) */ readonly orangeLighter2: "#FFEFC6"; /** Lightest orange - warning backgrounds */ readonly orangeLighter: "#FFEEDD"; /** Light orange - warning highlights */ readonly orangeLight: "#FFBA7C"; /** Base orange - primary warning color */ readonly orangeBase: "#F86C05"; /** Dark orange - warning hover states */ readonly orangeDark: "#B3520C"; /** Darkest orange - warning active states */ readonly orangeDarker: "#6D3106"; }; /** * Legacy text colors - For backward compatibility with ib-ui */ export declare const textColors: { /** Primary text color */ readonly textColor: "#4a4a4a"; /** Faded text color */ readonly textColorFade: "rgba(74,74,74, 0.5)"; /** Instruction/help text color */ readonly instructionColor: "#737474"; /** Help text color (same as lighterGrey) */ readonly helpTextColor: "#9b9b9b"; /** White text for dark backgrounds */ readonly whiteTextColor: "#ffffff"; /** Highlight text color (white) */ readonly highlightTextColor: "#ffffff"; }; /** * Legacy grey colors - For backward compatibility with ib-ui */ export declare const legacyGreyColors: { /** Light grey (same as grey500) */ readonly lightGrey: "#727274"; /** Lighter grey */ readonly lighterGrey: "#9b9b9b"; /** Lightest grey */ readonly lightestGrey: "#f4f4f4"; }; /** * Border colors */ export declare const borderColors: { /** Standard border grey */ readonly borderGrey: "#d0d0d0"; /** Lighter border grey */ readonly borderLighterGrey: "#e0e0e0"; /** Border shadow color */ readonly borderShadow: "#d8d8d8"; }; /** * Icon colors */ export declare const iconColors: { /** Standard icon grey */ readonly iconGrey: "#a3a3a3"; /** Disabled icon grey */ readonly iconGreyDisabled: "rgba(163,163,163, 0.5)"; /** Icon background overlay */ readonly iconBackground: "rgba(0, 0, 0, 0.10)"; }; /** * Background colors */ export declare const backgroundColors: { /** Processing/loading background overlay */ readonly backgroundProcessingColor: "rgba(163, 163, 163, .3)"; /** Standard white background */ readonly backgroundWhiteColor: "#ffffff"; /** Row/stripe background grey */ readonly rowGrey: "#f9f9f9"; }; /** * Base colors */ export declare const baseColors: { /** White */ readonly whiteColor: "#ffffff"; /** Black */ readonly blackColor: "#000000"; /** Yellow (notification, highlight) */ readonly yellow: "#FFEFC6"; }; /** * Status colors for messaging, alerts, notifications */ export declare const statusColors: { /** Success status (green) */ readonly successColor: "#21B63C"; /** Error status (red) */ readonly errorColor: "#d31818"; /** Warning status (orange) */ readonly warningColor: "#f88b07"; /** Info status (orange) */ readonly infoColor: "#f88b07"; /** Notice status (orange) */ readonly noticeColor: "#FFA500"; }; /** * Snackbar/Toast background colors */ export declare const snackbarColors: { /** Snackbar error background */ readonly snackbarErrorBackground: "#D01C23"; /** Snackbar success background */ readonly snackbarSuccessBackground: "#108c27"; /** Snackbar warning background */ readonly snackbarWarningBackground: "#F97E24"; }; /** * Progress bar colors */ export declare const progressColors: { /** Completed progress */ readonly progressBarCompletedColor: "#108C27"; /** Error progress */ readonly progressBarErrorColor: "#D01C23"; }; /** * Transparent black overlays - for various UI states */ export declare const transparentBlack: { /** 50% black overlay */ readonly transparentBlack50: "rgba(0, 0, 0, 0.50)"; /** 20% black overlay */ readonly transparentBlack20: "rgba(0, 0, 0, 0.20)"; /** 8% black overlay - subtle hover */ readonly transparentBlack08: "rgba(0, 0, 0, 0.08)"; /** 5% black overlay - very subtle */ readonly transparentBlack05: "rgba(0, 0, 0, 0.05)"; }; /** * Transparent white overlays - for dark backgrounds */ export declare const transparentWhite: { /** 50% white overlay */ readonly transparentWhite50: "rgba(255,255,255,0.50)"; /** 20% white overlay */ readonly transparentWhite20: "rgba(255,255,255,0.20)"; /** 5% white overlay */ readonly transparentWhite05: "rgba(255,255,255,0.05)"; }; /** * Default/fallback values for the 6 dynamic tenant colors. * * These values are used when constructing the theme and no tenant-specific * colors are provided from the login API response. * * IMPORTANT: Components should NOT import these directly. * Instead, use: * - theme.colors.highlight (via useTheme()) * - var(--color-highlight) (in CSS) * * The theme handles the "default vs dynamic" resolution automatically. * * Login Response Field → Theme Property → CSS Variable * ───────────────────────────────────────────────────────────────────────── * colourPrimary → colors.primary → --color-primary * colourPrimaryText → colors.primaryText → --color-primary-text * colourSecondary → colors.secondary → --color-secondary * colourSecondaryText → colors.secondaryText → --color-secondary-text * colourHighlight → colors.highlight → --color-highlight * colourHighlightText → colors.highlightText → --color-highlight-text */ export declare const defaultPaletteColors: { /** Primary color fallback - white background */ readonly PRIMARY_DEFAULT: "#ffffff"; /** Primary text color fallback - black on primary backgrounds */ readonly PRIMARY_TEXT_DEFAULT: "#000000"; /** Secondary color fallback - orange accent */ readonly SECONDARY_DEFAULT: "#F68D32"; /** Secondary text color fallback - white on secondary backgrounds */ readonly SECONDARY_TEXT_DEFAULT: "#ffffff"; /** Highlight/accent color fallback - brand orange */ readonly HIGHLIGHT_DEFAULT: "#F4770B"; /** Highlight text color fallback - white on highlight backgrounds */ readonly HIGHLIGHT_TEXT_DEFAULT: "#ffffff"; }; /** * User default colors */ export declare const userDefaultColors: { /** Default text color for user-generated content */ readonly userDefaultTextColor: "#000000"; /** Default background color for user-generated content */ readonly userDefaultBackgroundColor: "#ffffff"; }; /** * Form element colors */ export declare const formColors: { /** Slider track/thumb color */ readonly sliderGrey: "#bdbdbd"; }; /** * Shadow values from ib-ui design system */ export declare const ibUiShadows: { /** Level 1 shadow - subtle elevation */ readonly shadow100: "0px 1px 3px rgba(0, 0, 0, 0.25)"; /** Level 2 shadow - cards, dropdowns */ readonly shadow200: "0px 2px 5px rgba(0, 0, 0, 0.25)"; /** Level 3 shadow - modals, popovers */ readonly shadow300: "0px 3px 12px rgba(0, 0, 0, 0.25)"; /** Footer shadow - upward facing */ readonly shadowFooter: "0px -1px 2px rgba(0, 0, 0, 0.25)"; /** Selected item shadow - emphasized */ readonly shadowSelected: "0px 2px 5px rgba(0, 0, 0, 0.50)"; }; /** * Border radius values from ib-ui design system */ export declare const borderRadius: { /** Small radius - buttons, inputs (4px) */ readonly borderRadiusSmall: "4px"; /** Medium radius - cards (8px) */ readonly borderRadiusMedium: "8px"; /** Large radius - modals, containers (16px) */ readonly borderRadiusLarge: "16px"; }; /** * All grey colors combined (scale + legacy) */ export declare const allGreyColors: { /** Light grey (same as grey500) */ readonly lightGrey: "#727274"; /** Lighter grey */ readonly lighterGrey: "#9b9b9b"; /** Lightest grey */ readonly lightestGrey: "#f4f4f4"; /** Lightest grey - subtle backgrounds */ readonly grey100: "#F7F7F7"; /** Light grey - card backgrounds, dividers */ readonly grey150: "#E5E5E5"; /** Light grey - borders, disabled backgrounds */ readonly grey200: "#D9D9D9"; /** Medium light grey - borders */ readonly grey300: "#BFBFBF"; /** Medium grey - disabled text */ readonly grey400: "#A1A1A1"; /** Medium grey - secondary text, icons */ readonly grey500: "#737373"; /** Medium dark grey - secondary text */ readonly grey600: "#595959"; /** Dark grey - primary text alternative */ readonly grey700: "#3F3F3F"; /** Dark grey - headers, primary backgrounds (PRIMARY_DEFAULT) */ readonly grey800: "#262626"; /** Darkest grey - near black */ readonly grey900: "#191919"; }; /** * All semantic colors combined (ib-ui version) */ export declare const ibUiSemanticColors: { readonly green: { /** Lightest green - success backgrounds */ readonly greenLighter: "#E5F6E8"; /** Light green - success highlights */ readonly greenLight: "#54C164"; /** Base green - primary success color */ readonly greenBase: "#2B8048"; /** Dark green - success hover states */ readonly greenDark: "#046211"; /** Darkest green - success active states */ readonly greenDarker: "#033707"; }; readonly red: { /** Very light red - error backgrounds (alternative) */ readonly redLighter2: "#FCECE7"; /** Lightest red - error backgrounds */ readonly redLighter: "#FFE3E5"; /** Light red - error highlights */ readonly redLight: "#F16C71"; /** Base red - primary error color */ readonly redBase: "#CA212B"; /** Dark red - error hover states */ readonly redDark: "#97090E"; /** Darkest red - error active states */ readonly redDarker: "#5F0508"; }; readonly blue: { /** Very light blue - info backgrounds (alternative) */ readonly blueLighter2: "#E0EBFD"; /** Lightest blue - info backgrounds */ readonly blueLighter: "#DDE9FC"; /** Light blue - info highlights */ readonly blueLight: "#5493F0"; /** Base blue - primary info color */ readonly blueBase: "#0053CD"; /** Dark blue - info hover states */ readonly blueDark: "#003B91"; /** Darkest blue - info active states */ readonly blueDarker: "#012355"; /** Link blue - standard link color */ readonly blueLink: "#0066CC"; }; readonly orange: { /** Very light orange - warning backgrounds (alternative) */ readonly orangeLighter2: "#FFEFC6"; /** Lightest orange - warning backgrounds */ readonly orangeLighter: "#FFEEDD"; /** Light orange - warning highlights */ readonly orangeLight: "#FFBA7C"; /** Base orange - primary warning color */ readonly orangeBase: "#F86C05"; /** Dark orange - warning hover states */ readonly orangeDark: "#B3520C"; /** Darkest orange - warning active states */ readonly orangeDarker: "#6D3106"; }; }; /** * Complete color palette - all colors from ib-ui */ export declare const ibUiColors: { readonly grey: { /** Lightest grey - subtle backgrounds */ readonly grey100: "#F7F7F7"; /** Light grey - card backgrounds, dividers */ readonly grey150: "#E5E5E5"; /** Light grey - borders, disabled backgrounds */ readonly grey200: "#D9D9D9"; /** Medium light grey - borders */ readonly grey300: "#BFBFBF"; /** Medium grey - disabled text */ readonly grey400: "#A1A1A1"; /** Medium grey - secondary text, icons */ readonly grey500: "#737373"; /** Medium dark grey - secondary text */ readonly grey600: "#595959"; /** Dark grey - primary text alternative */ readonly grey700: "#3F3F3F"; /** Dark grey - headers, primary backgrounds (PRIMARY_DEFAULT) */ readonly grey800: "#262626"; /** Darkest grey - near black */ readonly grey900: "#191919"; }; readonly green: { /** Lightest green - success backgrounds */ readonly greenLighter: "#E5F6E8"; /** Light green - success highlights */ readonly greenLight: "#54C164"; /** Base green - primary success color */ readonly greenBase: "#2B8048"; /** Dark green - success hover states */ readonly greenDark: "#046211"; /** Darkest green - success active states */ readonly greenDarker: "#033707"; }; readonly red: { /** Very light red - error backgrounds (alternative) */ readonly redLighter2: "#FCECE7"; /** Lightest red - error backgrounds */ readonly redLighter: "#FFE3E5"; /** Light red - error highlights */ readonly redLight: "#F16C71"; /** Base red - primary error color */ readonly redBase: "#CA212B"; /** Dark red - error hover states */ readonly redDark: "#97090E"; /** Darkest red - error active states */ readonly redDarker: "#5F0508"; }; readonly blue: { /** Very light blue - info backgrounds (alternative) */ readonly blueLighter2: "#E0EBFD"; /** Lightest blue - info backgrounds */ readonly blueLighter: "#DDE9FC"; /** Light blue - info highlights */ readonly blueLight: "#5493F0"; /** Base blue - primary info color */ readonly blueBase: "#0053CD"; /** Dark blue - info hover states */ readonly blueDark: "#003B91"; /** Darkest blue - info active states */ readonly blueDarker: "#012355"; /** Link blue - standard link color */ readonly blueLink: "#0066CC"; }; readonly orange: { /** Very light orange - warning backgrounds (alternative) */ readonly orangeLighter2: "#FFEFC6"; /** Lightest orange - warning backgrounds */ readonly orangeLighter: "#FFEEDD"; /** Light orange - warning highlights */ readonly orangeLight: "#FFBA7C"; /** Base orange - primary warning color */ readonly orangeBase: "#F86C05"; /** Dark orange - warning hover states */ readonly orangeDark: "#B3520C"; /** Darkest orange - warning active states */ readonly orangeDarker: "#6D3106"; }; readonly status: { /** Success status (green) */ readonly successColor: "#21B63C"; /** Error status (red) */ readonly errorColor: "#d31818"; /** Warning status (orange) */ readonly warningColor: "#f88b07"; /** Info status (orange) */ readonly infoColor: "#f88b07"; /** Notice status (orange) */ readonly noticeColor: "#FFA500"; }; readonly snackbar: { /** Snackbar error background */ readonly snackbarErrorBackground: "#D01C23"; /** Snackbar success background */ readonly snackbarSuccessBackground: "#108c27"; /** Snackbar warning background */ readonly snackbarWarningBackground: "#F97E24"; }; readonly progress: { /** Completed progress */ readonly progressBarCompletedColor: "#108C27"; /** Error progress */ readonly progressBarErrorColor: "#D01C23"; }; readonly text: { /** Primary text color */ readonly textColor: "#4a4a4a"; /** Faded text color */ readonly textColorFade: "rgba(74,74,74, 0.5)"; /** Instruction/help text color */ readonly instructionColor: "#737474"; /** Help text color (same as lighterGrey) */ readonly helpTextColor: "#9b9b9b"; /** White text for dark backgrounds */ readonly whiteTextColor: "#ffffff"; /** Highlight text color (white) */ readonly highlightTextColor: "#ffffff"; }; readonly border: { /** Standard border grey */ readonly borderGrey: "#d0d0d0"; /** Lighter border grey */ readonly borderLighterGrey: "#e0e0e0"; /** Border shadow color */ readonly borderShadow: "#d8d8d8"; }; readonly icon: { /** Standard icon grey */ readonly iconGrey: "#a3a3a3"; /** Disabled icon grey */ readonly iconGreyDisabled: "rgba(163,163,163, 0.5)"; /** Icon background overlay */ readonly iconBackground: "rgba(0, 0, 0, 0.10)"; }; readonly background: { /** Processing/loading background overlay */ readonly backgroundProcessingColor: "rgba(163, 163, 163, .3)"; /** Standard white background */ readonly backgroundWhiteColor: "#ffffff"; /** Row/stripe background grey */ readonly rowGrey: "#f9f9f9"; }; readonly form: { /** Slider track/thumb color */ readonly sliderGrey: "#bdbdbd"; }; readonly base: { /** White */ readonly whiteColor: "#ffffff"; /** Black */ readonly blackColor: "#000000"; /** Yellow (notification, highlight) */ readonly yellow: "#FFEFC6"; }; readonly transparentBlack: { /** 50% black overlay */ readonly transparentBlack50: "rgba(0, 0, 0, 0.50)"; /** 20% black overlay */ readonly transparentBlack20: "rgba(0, 0, 0, 0.20)"; /** 8% black overlay - subtle hover */ readonly transparentBlack08: "rgba(0, 0, 0, 0.08)"; /** 5% black overlay - very subtle */ readonly transparentBlack05: "rgba(0, 0, 0, 0.05)"; }; readonly transparentWhite: { /** 50% white overlay */ readonly transparentWhite50: "rgba(255,255,255,0.50)"; /** 20% white overlay */ readonly transparentWhite20: "rgba(255,255,255,0.20)"; /** 5% white overlay */ readonly transparentWhite05: "rgba(255,255,255,0.05)"; }; readonly highlight: "#F4770B"; readonly palette: { /** Primary color fallback - white background */ readonly PRIMARY_DEFAULT: "#ffffff"; /** Primary text color fallback - black on primary backgrounds */ readonly PRIMARY_TEXT_DEFAULT: "#000000"; /** Secondary color fallback - orange accent */ readonly SECONDARY_DEFAULT: "#F68D32"; /** Secondary text color fallback - white on secondary backgrounds */ readonly SECONDARY_TEXT_DEFAULT: "#ffffff"; /** Highlight/accent color fallback - brand orange */ readonly HIGHLIGHT_DEFAULT: "#F4770B"; /** Highlight text color fallback - white on highlight backgrounds */ readonly HIGHLIGHT_TEXT_DEFAULT: "#ffffff"; }; readonly user: { /** Default text color for user-generated content */ readonly userDefaultTextColor: "#000000"; /** Default background color for user-generated content */ readonly userDefaultBackgroundColor: "#ffffff"; }; }; export type GreyScale = typeof greyScale; export type GreenColors = typeof greenColors; export type RedColors = typeof redColors; export type BlueColors = typeof blueColors; export type OrangeColors = typeof orangeColors; export type TextColors = typeof textColors; export type BorderColors = typeof borderColors; export type IconColors = typeof iconColors; export type BackgroundColors = typeof backgroundColors; export type BaseColors = typeof baseColors; export type StatusColors = typeof statusColors; export type SnackbarColors = typeof snackbarColors; export type ProgressColors = typeof progressColors; export type TransparentBlack = typeof transparentBlack; export type TransparentWhite = typeof transparentWhite; export type DefaultPaletteColors = typeof defaultPaletteColors; export type IbUiShadowsType = typeof ibUiShadows; export type BorderRadius = typeof borderRadius; export type IbUiColors = typeof ibUiColors; export default ibUiColors; //# sourceMappingURL=colors.d.ts.map