Styling

Property

  • styling

Purpose

  • Allows setting granular styles for various parts of the interface.

  • Note not all the Partial<CSSStyleDeclaration> properties are used but left for future needs

export interface StyleConfig {
  root?: RootStyles;
  header?: HeaderStyles;
  propertyPanel?: PropertyPanelStyles;
  form?: FormStyles;
  componentSelection?: ComponentSelectionStyles;
  tab?: TabStyles;
}

export interface RootStyles {
  checkboxColor?: ChoiceColorType;
  css?: Partial<CSSStyleDeclaration>;
  cssDropDownMenu?: Partial<CSSStyleDeclaration>;
  toolButtonColor?: string;
  toolButtonBackgroundColor?: string;
  toolButtonHoverBackgroundColor?: string;
}

export interface HeaderStyles {
  css?: Partial<CSSStyleDeclaration>;
}

export interface PropertyPanelStyles {
  propertyPanelHeaderBackground?: string;
  propertyPanelBackground?: string;
  propertyPanelTop?: string;
}

export interface FormStyles {
  pointerOverComponentBorder?: string;
  dragNDropHoverBackgroundColor?: string;
  emptyFormTextColor?: string;
  emptyFormMinHeight?: string;
  cssDragNDropLeftRight?: Partial<CSSStyleDeclaration>;
  cssDragNDropTopBottom?: Partial<CSSStyleDeclaration>;
}

export interface ComponentSelectionStyles {
  componentItemHoverBackgroundColor?: string;
  utilityMenuHoverColor?: string;
  css?: Partial<CSSStyleDeclaration>;
  minimizedBorder?: string;
}

export interface TabStyles {
  activeTabColor?: string;
  activeTabBackgroundColor?: string;
}