color
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;
subtle: string;
subtler: string;
};
info: { medium: string; strong: string; subtle: string; subtler: string };
success: {
medium: string;
strong: string;
subtle: string;
subtler: string;
};
warning: {
medium: string;
strong: 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;
};
}
elevation
elevation: { low: string; medium: string }
opacity
opacity: { high: string; low: string; medium: string; none: string }
rounded
rounded: {
"2xl": string;
full: string;
lg: string;
md: string;
sm: string;
xl: string;
xs: string;
}
spacing
spacing: {
"2xl": string;
"3xl": string;
"4xl": string;
"5xl": string;
"6xl": string;
"7xl": string;
"8xl": string;
"9xl": string;
lg: string;
md: string;
sm: string;
xl: string;
xs: string;
}
typography
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 };
};
};
}
See BUI Theme documentation for more information.