Interface BUITheme

See BUI Theme documentation for more information.

Interface

Properties

color

{ … }{
    background: {
        interactive: {
            active: string;
            disabled: string;
            enabled: string;
            hovered: string;
            visited: string;
        };
        inverse: { medium: string; strong: string; subtle: string };
        overlay: { interactive: string; medium: string; subtle: string };
        positive: {
            interactive: { enabled: string };
            medium: string;
            strong: string;
            subtle: string;
        };
        primary: { medium: string; strong: string; subtle: string };
        secondary: { medium: string; strong: string; subtle: string };
    };
    border: {
        interactive: {
            active: string;
            disabled: string;
            enabled: string;
            hovered: string;
            visited: string;
        };
        inverse: string;
        medium: string;
        positive: {
            interactive: { enabled: string };
            medium: string;
            strong: string;
            subtle: string;
        };
        strong: string;
        subtle: string;
    };
    focused: { default: string; inset: string };
    icon: {
        interactive: {
            active: string;
            disabled: string;
            enabled: string;
            hovered: string;
            visited: string;
        };
        inverse: string;
        oninteractive: string;
        primary: string;
        secondary: string;
    };
    support: {
        error: {
            medium: string;
            strong: string;
            stronger: string;
            subtle: string;
            subtler: string;
        };
        info: {
            medium: string;
            strong: string;
            stronger: string;
            subtle: string;
            subtler: string;
        };
        success: {
            medium: string;
            strong: string;
            stronger: string;
            subtle: string;
            subtler: string;
        };
        warning: {
            medium: string;
            strong: string;
            stronger: string;
            subtle: string;
            subtler: string;
        };
    };
    text: {
        helper: string;
        interactive: {
            active: string;
            disabled: string;
            enabled: string;
            hovered: string;
            visited: string;
        };
        inverse: string;
        oninteractive: string;
        placeholder: string;
        primary: string;
        secondary: string;
    };
}

Property	Description
background
border
focused
icon
support
text

elevation

{ low: string; medium: string }

Property	Description
low
medium

opacity

{ high: string; low: string; medium: string; none: string }

Property	Description
high
low
medium
none

rounded

{ … }

Property	Description
2xl
full
lg
md
sm
xl
xs

spacing

{ … }

Property	Description
2xl
3xl
4xl
5xl
6xl
7xl
8xl
9xl
lg
md
sm
xl
xs

typography

{ … }{
    body: {
        lg: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
        md: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
        sm: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
    };
    heading: {
        h1: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
        h2: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
        h3: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
        h4: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
        h5: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
        h6: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
    };
    label: {
        lg: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
        md: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
        sm: {
            medium: { font: string; letterSpacing: string };
            regular: { font: string; letterSpacing: string };
            semibold: { font: string; letterSpacing: string };
        };
    };
}

Property	Description
body
heading
label