Theme API
Below is the TypeScript API for the theme. You can use this to define your theme and pass it to the provider.
Default theme
Default theme for each component you could find here (opens in a new tab).
export interface ReablocksTheme {
components: {
avatar: AvatarTheme;
avatarGroup: AvatarGroupTheme;
arrow: ArrowTheme;
badge: BadgeTheme;
button: ButtonTheme;
block: BlockTheme;
chip: ChipTheme;
contextMenu: ContextMenuTheme;
checkbox: CheckboxTheme;
dateFormat: DateFormatTheme;
dialog: DialogTheme;
divider: DividerTheme;
dotsLoader: DotsLoaderTheme;
drawer: DrawerTheme;
ellipsis: EllipsisTheme;
select: SelectTheme;
list: ListTheme;
menu: MenuTheme;
sort: SortTheme;
stack: StackTheme;
card: CardTheme;
kbd: KbdTheme;
verticalSpacer: VerticalSpacerTheme;
notification: NotificationTheme;
input: InputTheme;
calendar: CalendarTheme;
calendarRange: CalendarRangeTheme;
commandPalette: CommandPaletteTheme;
collapse: CollapseTheme;
textarea: TextareaTheme;
typography: TypographyTheme;
radio: RadioTheme;
range: RangeTheme;
redact: RedactTheme;
toggle: ToggleTheme;
tooltip: TooltipTheme;
tree: TreeTheme;
jsonTree: JsonTreeTheme;
popover: PopoverTheme;
pager: PagerTheme;
tabs: TabsTheme;
breadcrumbs: BreadcrumbsTheme;
stepper: StepperTheme;
callout: CalloutTheme;
};
}
interface AvatarTheme {
base: string;
rounded: string;
}
interface AvatarGroupTheme {
base: string;
avatar: string;
overflow: string;
}
interface ArrowTheme {
base: string;
up: string;
down: string;
right: string;
left: string;
}
interface BadgeTheme {
base: string;
disableMargins: string;
badge: string;
position: string;
colors: {
default: string;
primary: string;
secondary: string;
error: string;
};
positions: {
'top-start': string;
'top-end': string;
'bottom-start': string;
'bottom-end': string;
};
}
interface ButtonTheme {
base: string;
disabled: string;
fullWidth: string;
group: string;
groupText: string;
adornment: {
base: string;
start: string;
end: string;
sizes: {
small: string;
medium: string;
large: string;
};
};
variants: {
filled: string;
outline: string;
text: string;
};
colors: {
default: {
filled: string;
outline: string;
text: string;
};
primary: {
filled: string;
outline: string;
text: string;
};
secondary: {
filled: string;
outline: string;
text: string;
};
success: {
filled: string;
outline: string;
text: string;
};
warning: {
filled: string;
outline: string;
text: string;
};
error: {
filled: string;
outline: string;
text: string;
};
};
sizes: {
small: string;
medium: string;
large: string;
};
iconSizes: {
small: string;
medium: string;
large: string;
}
}
interface BlockTheme {
base: string;
disableMargin: string;
label: string;
centerAlign: string;
endAlign: string;
horizontal: {
base: string;
label: string;
};
vertical: {
base: string;
label: string;
};
}
interface ThemeColor {
base?: string;
variants?: {
filled?: string;
outline?: string;
};
selectable?: {
base: string;
variants?: {
filled?: {
base?: string;
selected?: string;
};
outline?: {
base?: string;
selected?: string;
};
};
};
}
interface ChipTheme {
base: string;
adornment: {
base: string;
start: string;
end: string;
sizes: {
small: string;
medium: string;
large: string;
};
};
variants: {
filled: string;
outline: string;
};
colors: {
default: ThemeColor;
primary?: ThemeColor;
secondary?: ThemeColor;
success?: ThemeColor;
warning?: ThemeColor;
error?: ThemeColor;
info?: ThemeColor;
};
sizes: {
small: string;
medium: string;
large: string;
};
focus: string;
deleteButton: {
base: string;
sizes: {
small: string;
medium: string;
large: string;
};
};
disabled: string;
}
interface ContextMenuTheme {
enabled: string;
}
interface CheckboxTheme {
base: string;
label: {
base: string;
clickable: string;
sizes: {
small: string;
medium: string;
large: string;
};
};
border: string;
check: string;
checkbox: string;
disabled: string;
sizes: {
small: string;
medium: string;
large: string;
};
boxVariants: {
hover: {
strokeWidth: number;
stroke: string;
fill: string;
};
pressed: {
scale: number;
};
checked: {
stroke: string;
fill: string;
};
unchecked: {
stroke: string;
fill: string;
};
};
}
interface DateFormatTheme {
base: string;
interactive: string;
}
interface DialogTheme {
base: string;
inner: string;
content: string;
footer: string;
header: {
base: string;
text: string;
closeButton: string;
};
}
interface DialogHeaderTheme {
base: string;
text: string;
closeButton: string;
}
interface DividerTheme {
base?: string;
orientation?: {
vertical?: string;
horizontal?: string;
};
variant?: {
primary?: string;
secondary?: string;
};
disableMargins?: string;
}
interface DotsLoaderTheme {
base: string;
dot: string;
sizes: {
small: string;
medium: string;
large: string;
};
}
interface DrawerTheme {
base: string;
header: {
base: string;
text: string;
};
content: string;
disablePadding: string;
closeButton: {
base: string;
headerless: string;
};
positions: {
top: string;
end: string;
bottom: string;
start: string;
};
}
interface EllipsisTheme {
dots: string;
}
interface SelectTheme {
selectInput: SelectInputTheme;
selectMenu: SelectMenuTheme;
}
interface SelectInputTheme {
base: string;
inputContainer: string;
input: string;
placeholder: string;
prefix: string;
suffix: {
container: string;
button: string;
refresh: string;
loader: string;
close: string;
expand: string;
};
disabled: string;
unfilterable: string;
error: string;
single: {
prefix: string;
inputContainer: string;
input: string;
};
multiple: {
prefix: string;
inputContainer: string;
};
open: string;
chip: {
base: string;
hover: string;
focused: string;
disabled: string;
removeButton: string;
};
}
interface SelectMenuTheme {
base: string;
groupItem: string;
groupTitle: string;
option: {
base: string;
hover: string;
selected: string;
active: string;
disabled: string;
};
}
interface ListTheme {
base: string;
header: string;
listItem: {
base: string;
disabled: string;
active: string;
clickable: string;
disablePadding: string;
disableGutters: string;
dense: {
base: string;
content: string;
startAdornment: string;
endAdornment: string;
};
adornment: {
base: string;
start: string;
end: string;
svg: string;
};
content: string;
};
}
interface MenuTheme {
base: string;
inner: string;
}
interface SortTheme {
base: string;
disabled: string;
hasValue: string;
icon: {
base: string;
ascending: string;
};
}
interface StackTheme {
base: string;
dense: string;
inline: string;
direction: {
row: string;
column: string;
rowReverse: string;
columnReverse: string;
};
alignItems: {
start: string;
end: string;
center: string;
stretch: string;
};
justifyContent: {
start: string;
end: string;
center: string;
spaceBetween: string;
};
}
interface CardTheme {
base: string;
disablePadding: string;
header: string;
headerText: string;
content: string;
}
interface KbdTheme {
base: string;
chip: string;
}
interface VerticalSpacerTheme {
base: string;
size: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
}
interface NotificationTheme {
container: string;
positions: string;
notification: {
base: string;
variants: {
success: {
base: string;
icon?: string;
};
error: {
base: string;
icon?: string;
};
warning: {
base: string;
icon?: string;
};
info: {
base: string;
icon?: string;
};
};
header: string;
content: string;
body: string;
closeContainer: string;
action: string;
closeButton: string;
};
}
interface InputTheme {
base: string;
input: string;
inline: string;
disabled: string;
focused: string;
fullWidth: string;
error: string;
sizes: {
small: string;
medium: string;
large: string;
};
adornment: {
base: string;
start: string;
end: string;
};
}
interface CalendarTheme {
base: string;
header: {
base: string;
prev: string;
mid: string;
next: string;
};
title: string;
content: string;
days: {
header: string;
dayOfWeek: string;
week: string;
day: string;
outside: string;
startRangeDate: string;
cornerStartDateBottom: string;
endRangeDate: string;
cornerEndDateTop: string;
range: string;
};
months: {
root: string;
month: string;
};
years: {
root: string;
year: string;
};
}
interface CalendarRangeTheme extends Omit<CalendarTheme, 'months' | 'years'> {}
interface CommandPaletteTheme {
base: string;
inner: string;
input: {
base: string;
input: string;
icon: string;
};
item: {
base: string;
active: string;
clickable: string;
};
section: {
base: string;
first: string;
};
}
interface CollapseTheme {
base: string;
}
interface TextareaTheme {
base: string;
input: string;
fullWidth: string;
error: string;
disabled: string;
sizes: {
small: string;
medium: string;
large: string;
};
}
interface TypographyTheme {
base?: string;
text?: {
thin?: string;
bold?: string;
extraBold?: string;
italic?: string;
};
variant?: {
default?: string;
mono?: string;
};
colors?: {
primary: string;
secondary: string;
success: string;
warning: string;
error: string;
info: string;
};
sub: string;
smallHeading: string;
secondaryHeading: string;
primaryHeading: string;
pageTitle: string;
disableMargins?: string;
}
interface RadioTheme {
base: string;
radio: {
base: string;
disabled: string;
checked: string;
};
indicator: {
base: string;
sizes: {
small: string;
medium: string;
large: string;
};
};
label: {
base: string;
clickable: string;
};
sizes: {
small: string;
medium: string;
large: string;
};
}
interface RangeTheme {
base: string;
drag: string;
rangeHighlight: {
base: string;
disabled: string;
};
disabled: string;
inputWrapper: {
base: string;
disabled: string;
};
input: string;
tooltip: string;
}
interface RedactTheme {
base: string;
interactive: string;
}
interface ToggleTheme {
base: string;
disabled: string;
checked: string;
handle: {
base: string;
sizes: {
small: string;
medium: string;
large: string;
};
};
sizes: {
small: string;
medium: string;
large: string;
};
}
interface TooltipTheme {
base: string;
disablePointer: string;
}
interface TreeTheme {
base: string;
tree: string;
arrow: string;
node: {
base: string;
collapsed: string;
disabled: string;
leaf: string;
label: string;
button: {
base: string;
icon: string;
};
};
nodeBlock: string;
subtree: string;
}
interface PagerTheme {
base: string;
pages: {
base: string;
page: {
base: string;
active: string;
};
};
ellipsis: string;
pagerDisplayItems: string;
control: string;
firstPage: string;
prevPage: string;
lastPage: string;
nextPage: string;
}
interface PopoverTheme {
base: string;
disablePadding: string;
}
interface TabsTheme {
base: string;
list: {
base: string;
indicator: {
base: string;
size: {
small: string;
medium: string;
large: string;
};
};
divider: string;
variant: {
primary: {
divider: string;
};
secondary: {
divider: string;
};
};
tab: {
base: string;
button: string;
selected: string;
disabled: string;
size: {
small: string;
medium: string;
large: string;
};
};
};
panel: string;
}
interface StepperTheme {
base: string;
step: {
base: string;
marker: {
container: string;
base: string;
active: string;
label: {
base: string;
active: string;
};
};
active: string;
content: string;
};
}
export interface CalloutTheme {
base: {
common: string;
variant: {
default: string;
success: string;
error: string;
warning: string;
info: string;
[key: string]: string;
};
};
icon: {
common: string;
variant: {
default: string;
success: string;
error: string;
warning: string;
info: string;
[key: string]: string;
};
};
text: string;
}