Theme API

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