Properties
fontFamily
fontFamily: string
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
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;
}
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
Register top-level theme keys here and their types to construct the Theme schema from discrete parts