AboutSupportDeveloper GuideVersion 20.0.5

Interface ThemeExtension

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";
}

Type declaration

  • Readonly base: "12px"
  • Readonly large: "14px"
  • Readonly small: "10px"
  • Readonly xlarge: "16px"
  • Readonly xsmall: "8px"
  • Readonly xxlarge: "18px"
  • Readonly xxxlarge: "20px"
  • Readonly xxxxlarge: "40px"

fontWeight

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

Type declaration

  • Readonly bold: 600
  • Readonly normal: 400

iconSize

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

Type declaration

  • Readonly base: "15px"
  • Readonly large: "20px"
  • Readonly small: "12px"
  • Readonly xlarge: "24px"
  • Readonly xsmall: "8px"
  • Readonly xxlarge: "32px"
  • Readonly xxxlarge: "48px"

lineHeight

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

Type declaration

  • Readonly heading: 1.2
  • Readonly text: 1.5
  • Readonly ui: 1

Optional notificationIndicatorColors

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";
}

Type declaration

  • Readonly base: "12px"
  • Readonly large: "16px"
  • Readonly small: "8px"
  • Readonly xlarge: "20px"
  • Readonly xsmall: "4px"
  • Readonly xxlarge: "24px"
  • Readonly xxxlarge: "32px"
  • Readonly xxxxlarge: "48px"

radius

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

Type declaration

  • Readonly base: "8px"
  • Readonly large: "24px"
  • Readonly none: "0"
  • Readonly pill: "100vh"
  • Readonly round: "50%"
  • Readonly small: "4px"
  • Readonly xsmall: "2px"

shadow

shadow: {
    base: string;
}

Type declaration

  • base: string

transition

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

Type declaration

  • Readonly base: "200ms cubic-bezier(0.16, 1, 0.3, 1)"
  • Readonly none: "0ms"

unit

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

Type declaration

  • Readonly base: 12
  • Readonly large: 16
  • Readonly small: 8
  • Readonly xlarge: 20
  • Readonly xsmall: 4
  • Readonly xxlarge: 24
  • Readonly xxxlarge: 32
  • Readonly xxxxlarge: 48

Settings

Theme

On This Page