Member Junction
    Preparing search index...

    Interface ComponentStyles

    Defines styles for the component. Container can provide styles to a top level component. The top level component can alter these styles based on the design documentation. Top level component will pass in its computed styles to each sub-component and in turn sub-components do the same recursively down to all levels. Allows sub-components to inherit styles but also make adjustments as required by the design documentation.

    interface ComponentStyles {
        borders: {
            radius:
                | string
                | {
                    full?: string;
                    lg?: string;
                    md?: string;
                    sm?: string;
                    xl?: string;
                    [key: string]: string;
                };
            width: | string
            | {
                medium?: string;
                thick?: string;
                thin?: string;
                [key: string]: string;
            };
        };
        chartPalette?: string[];
        colors: {
            background: string;
            border: string;
            borderFocus?: string;
            borderLight?: string;
            error?: string;
            errorLight?: string;
            info?: string;
            infoLight?: string;
            link?: string;
            linkHover?: string;
            primary: string;
            primaryActive?: string;
            primaryHover: string;
            primaryLight?: string;
            secondary: string;
            secondaryHover?: string;
            shadow?: string;
            shadowLarge?: string;
            shadowMedium?: string;
            success: string;
            successLight?: string;
            surface: string;
            surfaceHover?: string;
            text: string;
            textInverse?: string;
            textSecondary: string;
            textTertiary?: string;
            warning?: string;
            warningLight?: string;
            [key: string]: string;
        };
        divergingScale?: { high: string; low: string; mid?: string };
        overflow: string;
        sequentialScale?: string[];
        shadows?: {
            inner?: string;
            lg?: string;
            md?: string;
            sm?: string;
            xl?: string;
            [key: string]: string;
        };
        spacing: {
            lg: string;
            md: string;
            sm: string;
            xl: string;
            xs: string;
            xxl?: string;
            xxxl?: string;
            [key: string]: string;
        };
        transitions?: {
            fast?: string;
            normal?: string;
            slow?: string;
            [key: string]: string;
        };
        typography: {
            fontFamily: string;
            fontSize: {
                lg: string;
                md: string;
                sm: string;
                xl: string;
                xs?: string;
                xxl?: string;
                xxxl?: string;
                [key: string]: string;
            };
            fontWeight?: {
                bold?: string;
                light?: string;
                medium?: string;
                regular?: string;
                semibold?: string;
                [key: string]: string;
            };
            lineHeight?: {
                normal?: string;
                relaxed?: string;
                tight?: string;
                [key: string]: string;
            };
        };
    }
    Index

    Properties

    borders chartPalette? colors divergingScale? overflow sequentialScale? shadows? spacing transitions? typography

    Properties

    borders: {
        radius:
            | string
            | {
                full?: string;
                lg?: string;
                md?: string;
                sm?: string;
                xl?: string;
                [key: string]: string;
            };
        width: | string
        | { medium?: string; thick?: string; thin?: string; [key: string]: string };
    }
    chartPalette?: string[]

    Categorical color palette for multi-series charts/visualizations. Populated from the host theme's --mj-viz-* tokens by the theme bridge (falling back to the built-in defaults from SetupStyles()). Components should read series colors from here instead of hardcoding a hex array, so chart series follow the active theme/brand.

    colors: {
        background: string;
        border: string;
        borderFocus?: string;
        borderLight?: string;
        error?: string;
        errorLight?: string;
        info?: string;
        infoLight?: string;
        link?: string;
        linkHover?: string;
        primary: string;
        primaryActive?: string;
        primaryHover: string;
        primaryLight?: string;
        secondary: string;
        secondaryHover?: string;
        shadow?: string;
        shadowLarge?: string;
        shadowMedium?: string;
        success: string;
        successLight?: string;
        surface: string;
        surfaceHover?: string;
        text: string;
        textInverse?: string;
        textSecondary: string;
        textTertiary?: string;
        warning?: string;
        warningLight?: string;
        [key: string]: string;
    }
    divergingScale?: { high: string; low: string; mid?: string }

    Diverging ramp for visualizations with a meaningful midpoint — variance vs target, sentiment, gain/loss. mid is the neutral center when present. Populated from the host theme's --mj-viz-div-* tokens by the theme bridge.

    overflow: string
    sequentialScale?: string[]

    Sequential (single-hue) ramp for intensity visualizations — heatmaps, choropleths, density shading. Ordered light-to-dark; interpolate between stops for continuous scales. Populated from the host theme's --mj-viz-seq-* tokens by the theme bridge.

    shadows?: {
        inner?: string;
        lg?: string;
        md?: string;
        sm?: string;
        xl?: string;
        [key: string]: string;
    }
    spacing: {
        lg: string;
        md: string;
        sm: string;
        xl: string;
        xs: string;
        xxl?: string;
        xxxl?: string;
        [key: string]: string;
    }
    transitions?: {
        fast?: string;
        normal?: string;
        slow?: string;
        [key: string]: string;
    }
    typography: {
        fontFamily: string;
        fontSize: {
            lg: string;
            md: string;
            sm: string;
            xl: string;
            xs?: string;
            xxl?: string;
            xxxl?: string;
            [key: string]: string;
        };
        fontWeight?: {
            bold?: string;
            light?: string;
            medium?: string;
            regular?: string;
            semibold?: string;
            [key: string]: string;
        };
        lineHeight?: {
            normal?: string;
            relaxed?: string;
            tight?: string;
            [key: string]: string;
        };
    }

    Settings

    Member Visibility

    On This Page

    Properties