AboutSupportDeveloper GuideVersion 22.3.24

Interface ThemeExtension

interface ThemeExtension {
    fontFamily: string;
    fontSize: {
        base: "12px";
        large: "14px";
        small: "10px";
        xlarge: "16px";
        xsmall: "8px";
        xxlarge: "18px";
        xxxlarge: "20px";
        xxxxlarge: "40px";
    };
    fontWeight: {
        bold: 600;
        normal: 400;
    };
    iconSize: {
        base: "15px";
        large: "20px";
        small: "12px";
        xlarge: "24px";
        xsmall: "8px";
        xxlarge: "32px";
        xxxlarge: "48px";
    };
    lineHeight: {
        heading: 1.2;
        text: 1.5;
        ui: 1;
    };
    notificationIndicatorColors?: Record<string, Omit<NotificationIndicatorColorsSet, "foreground"> & {
        foreground: string;
    }>;
    palette: Record<
        | "background1"
        | "background2"
        | "background3"
        | "background4"
        | "background5"
        | "background6"
        | "brandPrimary"
        | "brandSecondary"
        | "brandPrimaryActive"
        | "brandPrimaryHover"
        | "brandPrimaryFocused"
        | "brandPrimaryText"
        | "brandSecondaryActive"
        | "brandSecondaryHover"
        | "brandSecondaryFocused"
        | "brandSecondaryText"
        | "inputBackground"
        | "inputColor"
        | "inputPlaceholder"
        | "inputDisabled"
        | "inputFocused"
        | "inputBorder"
        | "statusSuccess"
        | "statusWarning"
        | "statusCritical"
        | "statusActive"
        | "textDefault"
        | "textHelp"
        | "textInactive"
        | "borderNeutral"
        | "contentBackground1"
        | "contentBackground2"
        | "contentBackground3"
        | "contentBackground4"
        | "contentBackground5"
        | "linkDefault"
        | "linkHover", string>;
    px: {
        base: "12px";
        large: "16px";
        small: "8px";
        xlarge: "20px";
        xsmall: "4px";
        xxlarge: "24px";
        xxxlarge: "32px";
        xxxxlarge: "48px";
    };
    radius: {
        base: "8px";
        large: "24px";
        none: "0";
        pill: "100vh";
        round: "50%";
        small: "4px";
        xsmall: "2px";
    };
    shadow: {
        base: string;
    };
    transition: {
        base: "200ms cubic-bezier(0.16, 1, 0.3, 1)";
        none: "0ms";
    };
    unit: {
        base: 12;
        large: 16;
        small: 8;
        xlarge: 20;
        xsmall: 4;
        xxlarge: 24;
        xxxlarge: 32;
        xxxxlarge: 48;
    };
}

Hierarchy

  • DefaultTheme
    • ThemeExtension

Properties

fontFamily fontSize fontWeight iconSize lineHeight notificationIndicatorColors? palette px radius shadow transition unit

Properties

fontFamily

fontFamily: string

Register top-level theme keys here and their types to construct the Theme schema from discrete parts

  • Provides some validation when providing an external theme
  • Enables auto-completion in styled components.

fontSize

fontSize: {
    base: "12px";
    large: "14px";
    small: "10px";
    xlarge: "16px";
    xsmall: "8px";
    xxlarge: "18px";
    xxxlarge: "20px";
    xxxxlarge: "40px";
}

fontWeight

fontWeight: {
    bold: 600;
    normal: 400;
}

iconSize

iconSize: {
    base: "15px";
    large: "20px";
    small: "12px";
    xlarge: "24px";
    xsmall: "8px";
    xxlarge: "32px";
    xxxlarge: "48px";
}

lineHeight

lineHeight: {
    heading: 1.2;
    text: 1.5;
    ui: 1;
}

OptionalnotificationIndicatorColors

notificationIndicatorColors?: Record<string, Omit<NotificationIndicatorColorsSet, "foreground"> & {
    foreground: string;
}>

palette

palette: Record<
    | "background1"
    | "background2"
    | "background3"
    | "background4"
    | "background5"
    | "background6"
    | "brandPrimary"
    | "brandSecondary"
    | "brandPrimaryActive"
    | "brandPrimaryHover"
    | "brandPrimaryFocused"
    | "brandPrimaryText"
    | "brandSecondaryActive"
    | "brandSecondaryHover"
    | "brandSecondaryFocused"
    | "brandSecondaryText"
    | "inputBackground"
    | "inputColor"
    | "inputPlaceholder"
    | "inputDisabled"
    | "inputFocused"
    | "inputBorder"
    | "statusSuccess"
    | "statusWarning"
    | "statusCritical"
    | "statusActive"
    | "textDefault"
    | "textHelp"
    | "textInactive"
    | "borderNeutral"
    | "contentBackground1"
    | "contentBackground2"
    | "contentBackground3"
    | "contentBackground4"
    | "contentBackground5"
    | "linkDefault"
    | "linkHover", string>

px

px: {
    base: "12px";
    large: "16px";
    small: "8px";
    xlarge: "20px";
    xsmall: "4px";
    xxlarge: "24px";
    xxxlarge: "32px";
    xxxxlarge: "48px";
}

radius

radius: {
    base: "8px";
    large: "24px";
    none: "0";
    pill: "100vh";
    round: "50%";
    small: "4px";
    xsmall: "2px";
}

shadow

shadow: {
    base: string;
}

transition

transition: {
    base: "200ms cubic-bezier(0.16, 1, 0.3, 1)";
    none: "0ms";
}

unit

unit: {
    base: 12;
    large: 16;
    small: 8;
    xlarge: 20;
    xsmall: 4;
    xxlarge: 24;
    xxxlarge: 32;
    xxxxlarge: 48;
}

Settings

On This Page

Properties