ColorTheme

This enum defines the color theme of the MagicPalette.

  • Cat: Uses a color theme based on Catppuccin.
  • Pure: Uses a color theme based on the origin color theme of coop.

MagicPalette

Use MagicPalette to create custom components that are matches the design of the magic component set. The base platte is based on the Catppuccin theme. There is also an alternative color palette called pure, it's the origin color platte of coop the successor project of vivi.

The dark variant is based on catppuccin macchiato colors and the light variant on catppuccin latte.

Properties

  • background (out brush): fines the default background brush. Use this if none of the more specialized background brushes apply.
  • foreground (out brush): Defines the foreground brush that is used for content that is displayed on background brush.
  • placeholder_foreground (out brush): Defines the foreground brush that is used for placeholder content.
  • alternate_background (out brush): Defines an alternate background brush that is used for example for text input controls or panels like a side bar.
  • control_background (out brush): Defines the default background brush for controls, such as push buttons, combo boxes, etc.
  • control_foreground (out brush): Defines the foreground brush that is used for content that is displayed on control_background brush.
  • accent_background (in_out brush): Defines the background brush for highlighted controls such as primary buttons.
  • accent_foreground (out brush): Defines the foreground brush that is used for content that is displayed on accent-background brush.
  • alternate_accent_background (out brush): Defines an alternate accent background brush.
  • destructive_background (out brush): Defines the background brush for destructive controls such as destructive buttons.
  • destructive_foreground (out brush): Defines the foreground brush that is used for content that is displayed on accent-background brush.
  • border (out brush): Defines the brush that is used for borders such as separators and component borders.
  • focus_border (out brush): Defines brush of focus borders.
  • state_pressed (out brush): Defines the brush of the state overlay if the component is pressed.
  • state_hovered (out brush): Defines the brush of the state overlay if the component is hovered by the mouse pointer.
  • selection_background (out brush): Defines the background brush of a text selection.
  • dark_color_scheme (out brush): If color_scheme is set to dark it is true otherwise false.
  • color_scheme (in_out ColorScheme): Read this property to determine the color scheme used by the palette. Set this property to force a dark or light color scheme.
  • color_theme (in_out ColorTheme): Defines the color theme of the magic palette.

MagicFontSettings

Use MagicFontSettings to create custom components that matches the font settings of the magic style.

Properties

  • light_font_weight (out int): Defines the light font weight of the magic style.
  • regular_font_weight (out int): Defines the regular font weight of the magic style.
  • semi_bold_font_weight (out int): Defines the semi bold font weight of the magic style.
  • light (out TextStyle): Defines a text style for a sub text.
  • supporting (out TextStyle): Defines a text style for a supporting text.
  • body (out TextStyle): Defines the body text style of magic.
  • body_strong (out TextStyle): Defines body text style with more bold font.
  • header_1 (out TextStyle): Defines a header text style first order.
  • header_2 (out TextStyle): Defines a header text style second order .
  • header_3 (out TextStyle): Defines a header text style third order.

MagicIconSettings

Use MagicIconSettings to create custom components that matches the icon settings of the magic style.

Properties

  • body (out IconStyle): Defines the body icon style of magic.

MagicAnimationSettings

Use MagicAnimationSettings to create animations for custom components that matches the animation settings of the magic style.

Properties

  • color_duration (out duration): Defines the animation duration for color animations.
  • resize_duration (out duration): Defines the animation duration of resizing of an element.
  • move_in_duration (out duration): Defines the animation duration of elements entering the screen.
  • move_out_duration (out duration): Defines the animation duration of elements exit the screen.
  • move_in_easing (out easing): Defines the animation easing of elements entering the screen.
  • move_out_easing (out easing): Defines the animation easing of elements exit the screen.

MagicSizeSettings

Use MagicSizeSettings to define sizes of custom components that matches the settings of the magic style.

Properties

  • mobile_size (in_out bool): If set to true the size settings are increased to make the components better touchable on mobile. (default value: false)
  • box_height (out length): Defines the height of box elements like checkbox.
  • item_height (out length): Defines the height of list item elements.
  • control_height (out length): Defines the default height of controls like buttons.
  • app_bar_height (out length): Defines the min height of the app bar.
  • min_text_field_width (out length): Defines the min width of text input elements.
  • min_text_area_height (out length): Defines the min height of a text area.

MagicLayoutSettings

Use MagicLayoutSettings to define padding and spacing of custom components that matches the settings of the magic style.

Properties

  • layout_spacing (out length): Defines the default inner spacing of layouts.
  • layout_padding (out length): Defines the default padding of layouts.
  • alternate_layout_padding (out length): Defines the alternate padding of layouts.
  • control_spacing (out length): Defines the default inner spacing of elements inside of a component.
  • control_padding (out length): Defines the default padding of a component.
  • text_input_padding (out length): Defines the default padding of a text input components.
  • control_style (out LayoutStyle): Defines the default layout style of controls / components.
  • control_style (out LayoutStyle): Defines the default layout style of e.g. AppBar.
  • text_input_style (out LayoutStyle): Defines the default layout style of text input elements.

MagicBorderSettings

Use MagicBorderSettings to define border setting of custom components that matches the magic style.

Properties

  • bar_border_radius (out length): Defines the border radius of bar elements like checkbox.
  • box_border_radius (out length): Defines the border radius of box elements like checkbox.
  • control_border_radius (out length): Defines the default border radius of elements inside of a component.
  • control_border_width (out length): Defines the default border width of elements inside of a component.
  • alternate_border_style (out BorderStyle): Defines the style of a background border with a alternate background color.
  • popup_border_style (out BorderStyle): Defines the style of a popup border.