Styling

class algomancy_gui.configuration.stylingconfig.StylingConfig(assets_path='', layout_selection=LayoutSelection.SIDEBAR, color_configuration=<algomancy_gui.configuration.colorconfig.ColorConfig object>, card_highlight_mode=CardHighlightMode.SUBTLE_LIGHT, logo_path='', button_path='', use_cqm_loader=False, use_data_page_spinner=True, use_scenario_page_spinner=True, use_compare_page_spinner=True)[source]

Manages the configuration and customization of application styling.

The StylingConfig class provides a mechanism to configure various UI styling options such as layout, colors, logos, and button visuals. It allows for the definition of consistent styling themes and reusable configurations for an application.

Parameters:

  • layout_selection (LayoutSelection) – Defines the layout selection for the application interface (e.g., sidebar layout).

  • color_configuration (algomancy_gui.configuration.colorconfig.ColorConfig) – Manages the colors for different UI components such as background, text, and highlights.

  • logo_url (str) – Path or URL to the logo image file to be used in the UI. important: should be provided as a path relative to the assets folder.

  • button_url (str) – Path or URL to the button image file to be used in the UI. important: should be provided as a path relative to the assets folder.

  • card_highlight_mode (str) – Specifies the mode for highlighting cards in the UI, affecting the appearance of card components.

assets_path: str = ''
layout_selection: LayoutSelection = 'sidebar'
color_configuration: ColorConfig = <algomancy_gui.configuration.colorconfig.ColorConfig object>
card_highlight_mode: str = 'subtle-light'
logo_path: str = ''
button_path: str = ''
use_cqm_loader: bool = False
use_data_page_spinner: bool = True
use_scenario_page_spinner: bool = True
use_compare_page_spinner: bool = True
as_dict()[source]
static format_from_assets(name)[source]
property card_surface_shading

Get the surface shading color for cards based on the specified highlight mode.

Returns:

Hexadecimal representation of the shading color for card surfaces.

initiate_theme_colors()[source]

Retrieves theme colors from the ColorConfig and formats them for CSS styling.

Returns:

Dictionary mapping CSS color variables to their corresponding color values.

Return type:

dict[str, str]

class algomancy_gui.configuration.colorconfig.ColorConfig(background_color='#000000', theme_color_primary='#343a40', theme_color_secondary='#009688', theme_color_tertiary='#000000', text_color='#FFFFFF', text_color_highlight='#000000', text_color_selected='#FFFFFF', menu_hover=None, status_colors=None, button_color_mode=ButtonColorMode.SEPARATE, button_text='#FFFFFF', button_colors=None)[source]

Configuration for color settings in the GUI.

This class manages all color-related configurations for the application interface, including background colors, theme colors, text colors, status indicators, and button styling. It provides methods for color manipulation and supports both unified and separate button color modes.

Parameters:

  • background_color (str) – Hexadecimal color code for the main background. Defaults to “#000000” (black).

  • theme_color_primary (str) – Primary theme color used for main UI elements. Defaults to “#343a40” (dark gray).

  • theme_color_secondary (str) – Secondary theme color used for accents and highlights. Defaults to “#009688” (teal).

  • theme_color_tertiary (str) – Tertiary theme color for additional UI elements. Defaults to “#000000” (black).

  • text_color (str) – Default text color. Defaults to “#FFFFFF” (white).

  • text_color_highlight (str) – Color for highlighted text elements. Defaults to “#000000” (black).

  • text_color_selected (str) – Color for selected text elements. Defaults to “#FFFFFF” (white).

  • menu_hover (str | None) – Optional custom color for menu hover states. If None, a default hover color is calculated based on the primary theme color.

  • status_colors (dict[str, str] | None) – Optional dictionary mapping status names to color codes. Supported keys include: - “processing”: Color for items being processed - “queued”: Color for queued items - “completed”: Color for completed items - “failed”: Color for failed items - “created”: Color for newly created items If not provided or keys are missing, defaults are calculated using linear combinations of theme colors.

  • button_color_mode (ButtonColorMode) – Determines how button colors are applied. Options: - ButtonColorMode.UNIFIED: All buttons share the same base color - ButtonColorMode.SEPARATE: Each button type has its own distinct color Defaults to ButtonColorMode.SEPARATE.

  • button_text (str) – Color for text on buttons. Defaults to “#FFFFFF” (white).

  • button_colors (dict[str, str] | None) –

    Optional dictionary for customizing button colors. The available keys depend on the button_color_mode:

    For SEPARATE mode, individual button types can be customized: - “derive”, “derive_hover”: Derive button and its hover state - “delete”, “delete_hover”: Delete button and its hover state - “save”, “save_hover”: Save button and its hover state - “import”, “import_hover”: Import button and its hover state - “upload”, “upload_hover”: Upload button and its hover state - “download”, “download_hover”: Download button and its hover state - Modal buttons: “derive_cancel”, “delete_cancel”, etc. with “_hover” variants - “new_scenario”, “new_scenario_hover”: New scenario button - “compare”: Compare toggle button - “standard”: Standard toggle button

    For UNIFIED mode, use these keys: - “unified_color”: Base color for all buttons - “unified_hover”: Hover color for all buttons

    Scenario page action buttons (work in both modes): - “scenario_process”, “scenario_process_hover”: Process button (created state) - “scenario_refresh”, “scenario_refresh_hover”: Refresh button (completed state) - “scenario_cancel”, “scenario_cancel_hover”: Cancel/Delete button

    If not provided or keys are missing, defaults are calculated based on theme colors with different ratios for visual distinction in SEPARATE mode.

Note

Button color modes affect how colors are retrieved and applied:

  • SEPARATE mode: Each button type gets a unique color by default, calculated as a linear combination between secondary and primary theme colors at different ratios (0.0 for derive, 0.2 for delete, 0.4 for save, etc.). This creates visual distinction between different actions.

  • UNIFIED mode: All buttons use the secondary theme color by default, providing a consistent look across all button types.

Custom colors in the button_colors dictionary always take precedence over calculated defaults.

Example

>>> # Create configuration with separate button colors
>>> config = ColorConfig(
...     background_color="#FFFFFF",
...     theme_color_primary="#3366CA",
...     theme_color_secondary="#009688",
...     button_color_mode=ButtonColorMode.SEPARATE,
...     button_colors={
...         "derive": "#FF5733",
...         "delete": "#C70039"
...     }
... )

>>> # Create configuration with unified button colors
>>> config_unified = ColorConfig(
...     button_color_mode=ButtonColorMode.UNIFIED,
...     button_colors={
...         "unified_color": "#4CAF50",
...         "unified_hover": "#45A049"
...     }
... )
static reduce_color_opacity(color, opacity)[source]

Reduces the opacity of a color by setting its alpha channel.

Parameters:

  • color (str) – The hexadecimal color value (e.g., “#RRGGBB” or “#RRGGBBAA”).

  • opacity (float) – The desired opacity level, must be between 0 and 1 inclusive, where 0 is fully transparent and 1 is fully opaque.

Raises:

  • AssertionError – If the opacity parameter is not within the range [0, 1].

  • ValueError – If the color format is invalid.

Returns:

Hexadecimal representation with alpha channel (e.g., “#RRGGBBAA”).

Return type:

str

static linear_combination_hex(a_hex, b_hex, t)[source]

Performs a linear combination of two hexadecimal color values based on a given ratio.

This static method calculates a blended color between two hex colors using a provided ratio t. The calculation is performed by linearly interpolating the red, green, and blue components separately.

Parameters:

  • a_hex (str) – str First hexadecimal color value in string format (e.g., “#RRGGBB”).

  • b_hex (str) – str Second hexadecimal color value in string format (e.g., “#RRGGBB”).

  • t (float) – float Blend ratio must be a value between 0 and 1 inclusive, where 0 corresponds to the first color, and 1 corresponds to the second color.

Raises:

AssertionError – If the t parameter is not within the range [0, 1].

Returns:

Hexadecimal representation of the blended color (e.g., “#RRGGBB”).

Return type:

str

class algomancy_gui.configuration.stylingconfig.LayoutSelection(*values)[source]

Bases: StrEnum

Enum for different layout selection options.

Determines which core layout structure is applied to the application interface.

SIDEBAR = 'sidebar'

Default layout with sidebar navigation

class algomancy_gui.configuration.stylingconfig.CardHighlightMode(*values)[source]

Bases: StrEnum

Enum for different card highlight modes.

Determines how Dash.Card objects are styled relative to the background color.

LIGHT = 'light'

Background color + 20% white

SUBTLE_LIGHT = 'subtle-light'

Background color + 10% white

SUBTLE_DARK = 'subtle-dark'

Background color + 10% black

DARK = 'dark'

Background color + 20% black

class algomancy_gui.configuration.colorconfig.ButtonColorMode(*values)[source]

Bases: StrEnum

Enum for different button color application modes.

Determines how button colors are applied in the GUI.

UNIFIED = 'unified'

All buttons share the same base color

SEPARATE = 'separate'

Each button has its own distinct color