AboutSupportDeveloper GuideVersion 16.1.7

Interface ThemeExtension

Hierarchy

  • DefaultTheme
    • ThemeExtension

Properties

_color _config fontSize fontWeight iconSize lineHeight notificationIndicatorColors? palette px radius selectedScheme shadow transition unit

Properties

_color

_color: {
    aqua: "#00CC88";
    black00: "rgba(0,0,0,0.0)";
    black10: "rgba(0,0,0,0.1)";
    black20: "rgba(0,0,0,0.2)";
    black30: "rgba(0,0,0,0.3)";
    black40: "rgba(0,0,0,0.4)";
    black50: "rgba(0,0,0,0.5)";
    black60: "rgba(0,0,0,0.6)";
    black70: "rgba(0,0,0,0.7)";
    black80: "rgba(0,0,0,0.8)";
    black90: "rgba(0,0,0,0.9)";
    darkGray1: "#53565F";
    darkGray2: "#383A40";
    darkGray3: "#2F3136";
    darkGray4: "#24262B";
    darkGray5: "#1E1F23";
    darkGray6: "#111214";
    functional1: "#207735";
    functional10: "#F48F00";
    functional2: "#46C8F1";
    functional3: "#0A76D3";
    functional4: "#6CADE5";
    functional5: "#0A76D3";
    functional6: "#882BFE";
    functional7: "#F31818";
    functional8: "#C93400";
    functional9: "#FF5E60";
    lightGray1: "#FAFBFE";
    lightGray2: "#F3F5F8";
    lightGray3: "#ECEEF1";
    lightGray4: "#DDDFE4";
    lightGray5: "#C9CBD2";
    lightblue: "#36C3FE";
    lightpink: "#FF8FB8";
    neutralGray: "#7D808A";
    neutralGray80: "rgba(125,128,138,0.8)";
    openFin: "#504CFF";
    openFinDarker: "#4642E0";
    openFinDarkest: "#3D39CD";
    openFinLight: "#5254FB";
    openFinLighter: "#5C5EFE";
    openFinLightest: "#6864FF";
    pink: "#FF5E60";
    purple: "#8C61FF";
    salmon: "#FF8C4C";
    silverGray: "#C0C1C2";
    transparent: "transparent";
    white: "#FFFFFF";
    white00: "rgba(255,255,255,0.0)";
    white10: "rgba(255,255,255,0.1)";
    white20: "rgba(255,255,255,0.2)";
    white30: "rgba(255,255,255,0.3)";
    white40: "rgba(255,255,255,0.4)";
    white50: "rgba(255,255,255,0.5)";
    white60: "rgba(255,255,255,0.6)";
    white70: "rgba(255,255,255,0.7)";
    white80: "rgba(255,255,255,0.8)";
    white90: "rgba(255,255,255,0.9)";
    yellow: "#FFEB00";
}

Type declaration

  • Readonly aqua: "#00CC88"
  • Readonly black00: "rgba(0,0,0,0.0)"
  • Readonly black10: "rgba(0,0,0,0.1)"
  • Readonly black20: "rgba(0,0,0,0.2)"
  • Readonly black30: "rgba(0,0,0,0.3)"
  • Readonly black40: "rgba(0,0,0,0.4)"
  • Readonly black50: "rgba(0,0,0,0.5)"
  • Readonly black60: "rgba(0,0,0,0.6)"
  • Readonly black70: "rgba(0,0,0,0.7)"
  • Readonly black80: "rgba(0,0,0,0.8)"
  • Readonly black90: "rgba(0,0,0,0.9)"
  • Readonly darkGray1: "#53565F"
  • Readonly darkGray2: "#383A40"
  • Readonly darkGray3: "#2F3136"
  • Readonly darkGray4: "#24262B"
  • Readonly darkGray5: "#1E1F23"
  • Readonly darkGray6: "#111214"
  • Readonly functional1: "#207735"
  • Readonly functional10: "#F48F00"
  • Readonly functional2: "#46C8F1"
  • Readonly functional3: "#0A76D3"
  • Readonly functional4: "#6CADE5"
  • Readonly functional5: "#0A76D3"
  • Readonly functional6: "#882BFE"
  • Readonly functional7: "#F31818"
  • Readonly functional8: "#C93400"
  • Readonly functional9: "#FF5E60"
  • Readonly lightGray1: "#FAFBFE"
  • Readonly lightGray2: "#F3F5F8"
  • Readonly lightGray3: "#ECEEF1"
  • Readonly lightGray4: "#DDDFE4"
  • Readonly lightGray5: "#C9CBD2"
  • Readonly lightblue: "#36C3FE"
  • Readonly lightpink: "#FF8FB8"
  • Readonly neutralGray: "#7D808A"
  • Readonly neutralGray80: "rgba(125,128,138,0.8)"
  • Readonly openFin: "#504CFF"
  • Readonly openFinDarker: "#4642E0"
  • Readonly openFinDarkest: "#3D39CD"
  • Readonly openFinLight: "#5254FB"
  • Readonly openFinLighter: "#5C5EFE"
  • Readonly openFinLightest: "#6864FF"
  • Readonly pink: "#FF5E60"
  • Readonly purple: "#8C61FF"
  • Readonly salmon: "#FF8C4C"
  • Readonly silverGray: "#C0C1C2"
  • Readonly transparent: "transparent"
  • Readonly white: "#FFFFFF"
  • Readonly white00: "rgba(255,255,255,0.0)"
  • Readonly white10: "rgba(255,255,255,0.1)"
  • Readonly white20: "rgba(255,255,255,0.2)"
  • Readonly white30: "rgba(255,255,255,0.3)"
  • Readonly white40: "rgba(255,255,255,0.4)"
  • Readonly white50: "rgba(255,255,255,0.5)"
  • Readonly white60: "rgba(255,255,255,0.6)"
  • Readonly white70: "rgba(255,255,255,0.7)"
  • Readonly white80: "rgba(255,255,255,0.8)"
  • Readonly white90: "rgba(255,255,255,0.9)"
  • Readonly yellow: "#FFEB00"

_config

_config: ConfigurationType

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"

selectedScheme

selectedScheme: "light" | "dark"

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