// Default theme of Orbtk. Theme ( styles: { // -- [START] Base -- "base": ( properties: { "font_size": "$FONT_SIZE_12", "font": "$REGULAR_FONT", "icon_size": "$ICON_SIZE_16", "icon_font": "$ICON_FONT" }, states: [ ( key: "disabled", properties: { "opacity": 0.5 } ) ] ), "window": ( properties: { "background": "$BACKGROUND_SECONDARY", }, ), "grid": ( base: "base", properties: { "background": "transparent", }, ), "container": ( base: "base", properties: { "padding": 4, }, ), // -- [END] Base -- // -- [START] TextBlock -- "body": ( properties: { "foreground": "$CONTENT_FOREGROUND", "font_size": "$FONT_SIZE_16", "font": "$REGULAR_FONT", }, ), "header": ( base: "body", properties: { "font_size": "$FONT_SIZE_24", } ), "text_block_header": ( base: "base", properties: { "font_size": "$FONT_SIZE_24", }, ), "small_text": ( base: "body", properties: { "font_size": "$FONT_SIZE_12", "foreground": "$CONTENT_FOREGROUND", }, ), // -- [END] TextBlock -- // -- [START] Button -- "button": ( base: "base", properties: { "font": "$REGULAR_FONT", "height": 32, "foreground": "$CONTENT_FOREGROUND", "icon_brush": "$CONTENT_FOREGROUND", "background": "$BUTTON_BACKGROUND", "border_radius": 2, "border_width": 0, "font_size": "$FONT_SIZE_14", "icon_size": "$ICON_SIZE_16", "container_margin": 0, }, states: [ ( key: "hover", properties: { "background": "$BUTTON_BACKGROUND_HOVER", } ), ( key: "selected", properties: { "background": "$ACCENT_COLOR", "foreground": "$BUTTON_FOREGROUND_SELECTED", "icon_brush": "$BUTTON_FOREGROUND_SELECTED", } ), ( key: "pressed", properties: { "font_size": "$FONT_SIZE_13", "background": "$BUTTON_BACKGORUND_PRESSED", "container_margin": 1, } ), ( key: "disabled", properties: { "opacity": 1, "foreground": "$BUTTON_FOREGROUND_DISABLED", "icon_brush": "$BUTTON_FOREGROUND_DISABLED" } ), ], ), "button_single_content": ( base: "button", properties: { "spacing": 0, }, ), "button_primary": ( base: "button", properties: { "background": "$ACCENT_COLOR", "foreground": "$CONRENT_FOREGROUND_ACCENT", "icon_brush": "$CONRENT_FOREGROUND_ACCENT", }, states: [ ( key: "hover", properties: { "background": "$ACCENT_COLOR_LIGHT" } ), ( key: "pressed", properties: { "font_size": "$FONT_SIZE_13", "background": "$ACCENT_COLOR_DARK", "container_margin": 1, } ), ] ), "button_primary_single_content": ( base: "button_primary", properties: { "spacing": 0 }, ), "button_icon_only": ( base: "button", properties: { "icon_size": "$ICON_SIZE_12", "icon_brush": "$CONTENT_FOREGROUND", "background": "transparent", "spacing": 0, "min_width": 24, "height": 24 }, ), "button_square": ( base: "button", properties: { "border_radius": 1, }, ), "button_small": ( base: "button", properties: { "icon_font": "$MDL2_ICON_FONT", "border_radius": 0, "icon_brush": "$CONTENT_FOREGROUND", "icon_size": "$ICON_SIZE_8", "background": "transparent", "border_width": 1, "border_brush": "$BOX_BORDER", "height": 14, "spacing": 0, "padding": 0, }, ), "check_box": ( base: "base", properties: { "foreground": "$CONTENT_FOREGROUND", "icon_size": "$ICON_SIZE_14", "background": "$BOX_BACKGROUND", "border_radius": 2, "border_width": 1, "border_brush": "$BOX_BORDER", "icon_brush": "transparent", "icon_font": "$MDL2_ICON_FONT", "icon": "$MDL2_CHECK_MARK" }, states: [ ( key: "hover", properties: { "border_brush": "$BOX_BORDER_HOVER" } ), ( key: "selected", properties: { "background": "$ACCENT_COLOR", "border_brush": "$ACCENT_COLOR", "icon_brush": "$CHECKBOX_ICON_BRUSH", } ), ( key: "pressed", properties: { "background": "$BOX_BACKGROUND_PRESSED", "border_brush": "$BOX_BORDER_HOVER" } ) ] ), "switch": ( base: "base", properties: { "width": 40, "height": 20, "border_radius": 14, "border_width": 1, "border_brush": "$BOX_BORDER", "background": "$BOX_BACKGROUND", "container_margin": 0, "border_radius": 10, "border_width": 1, }, states: [ ( key: "hover", properties: { "border_brush": "$BOX_BORDER_HOVER" } ), ( key: "selected", properties: { "border_width": 0, "background": "$ACCENT_COLOR" } ), ( key: "pressed", properties: { "background": "$BOX_BACKGROUND_PRESSED", "border_brush": "$BOX_BORDER_HOVER" } ) ] ), "switch_toggle": ( base: "base", properties: { "width": 10, "height": 10, "border_radius": 5, "margin": 4, "background": "$SWITCH_TOGGLE_BACKGROUND", "border_width": 0 }, states: [ ( key: "selected", properties: { "background": "$SWITCH_TOGGLE_BACKGROUND_SELECTED", } ) ] ), // -- [END] Button -- "container": ( base: "base", properties: { "padding": 4, }, ), // -- [START] (Numeric)TextBox -- "text_box": ( base: "base", properties: { "height": 32, "font_size": "$FONT_SIZE_14", "foreground": "$CONTENT_FOREGROUND_SECONDARY", "background": "BOX_BACKGROUND", "border_brush": "$BOX_BORDER", "border_width": 1, "border_radius": 2, "padding_left": 12, "padding_right": 12, }, states: [ ( key: "not_empty", properties: { "foreground": "$CONTENT_FOREGROUND", } ), ( key: "hover", properties: { "border_brush": "$BOX_BORDER_HOVER" } ), ( key: "focused", properties: { "border_brush": "$ACCENT_COLOR", "border_width": 2 } ), ( key: "not_empty_focused", properties: { "foreground": "$CONTENT_FOREGROUND", "border_brush": "$ACCENT_COLOR", "border_width": 2 } ), ] ), "numeric_box": ( base: "text_box", properties: { "foreground": "$CONTENT_FOREGROUND", "icon_up": "$MDL2_SCROLL_CHEVRON_UP_BOLD_LEGACY", "icon_down": "$MDL2_SCROLL_CHEVRON_DOWN_BOLD_LEGACY", } ), "cursor": ( properties: { "background_opacity": 1, "background": "$CURSOR_BACKGROUND", "border_brush": "$CURSOR_BORDER_BRUSH", "border_width": 1 } ), // -- [END] (Numeric)TextBox -- // -- [START] Lists -- "items_widget": ( properties: { "background": "transparent", "border_brush": "transparent", "foreground": "$CONTENT_FOREGROUND", "border_width": 0, "border_radius": 2, "padding": 4, } ), "list_view": ( base: "base", properties: { "foreground": "$CONTENT_FOREGROUND", "background": "$POPUP_BACKGROUND", "border_brush": "transparent", "border_width": 1, "border_radius": 2, }, ), "list_view_item": ( properties: { "font_size": "$FONT_SIZE_12", "foreground": "$CONTENT_FOREGROUND", "background": "transparent", "padding_left": 8, "padding_right": 8, }, states: [ ( key: "hover", properties: { "background": "$ITEM_BACKGROUND_HOVER", } ), ( key: "selected", properties: { "background": "$ACCENT_COLOR", } ), ( key: "pressed", properties: { "background": "$ITEM_BACKGROUND_PRESSED", } ) ] ), "combo_box": ( base: "base", properties: { "background": "$BOX_BACKGROUND", "border_brush": "$BOX_BORDER", "border_radius": 2, "border_width": 1, "font_size": "$FONT_SIZE_12", "foreground": "$CONTENT_FOREGROUND", "height": 32, "icon_size": "$ICON_SIZE_12", "icon": "$MDL2_SCROLL_CHEVRON_DOWN_BOLD_LEGACY", "icon_brush": "$BOX_BORDER", "icon_font": "$MDL2_ICON_FONT", "padding_left": 12, "padding_right": 12, "offset": 1 }, states: [ ( key: "hover", properties: { "border_brush": "$BOX_BORDER_HOVER" } ), ( key: "pressed", properties: { "background": "$BOX_BACKGROUND_PRESSED", "border_brush": "$BOX_BORDER_HOVER" } ) ] ), "combo_box_item": ( properties: { "font_size": "$FONT_SIZE_12", "foreground": "$CONTENT_FOREGROUND", "background": "transparent", "padding_left": 8, "padding_right": 8, }, states: [ ( key: "hover", properties: { "background": "$ITEM_BACKGROUND_HOVER", } ), ( key: "selected", properties: { "background": "$ACCENT_COLOR", } ), ( key: "pressed", properties: { "background": "$ITEM_BACKGROUND_PRESSED", } ) ] ), // -- [END] Lists -- // -- [START] TabWidget -- "tab_widget": ( properties: { "border_brush": "transparent", "border_width": 1, "background": "$BACKGROUND", }, ), "tab_header": ( base: "base", properties: { "height": 28, "font_sze": "$FONT_SIZE_14", "foreground": "$CONTENT_FOREGROUND", "background": "transparent", "padding_left": 16, "padding_right": 8, "border_radius": 0, "margin": { "left": 0, "top": 6, "right": 0, "bottom": 0 } }, states: [ ( key: "hover", properties: { "background": "$TAB_HEADER_HOVER", } ), ( key: "selected", properties: { "background": "$BACKGROUND", } ) ] ), "tab_header_bar": ( properties: { "background": "transparent", "height": 0 } ), "tab_icon_only": ( base: "button", properties: { "icon_size": "$ICON_SIZE_4", "icon_brush": "$CONTENT_FOREGROUND_SECONDARY", "background": "transparent", "icon": "$MDL2_CLEAR", "icon_font": "$MDL2_ICON_FONT", "spacing": 0, "width": 16, "height": 16 } ), // -- [END] TabWidget -- // -- [START] Other widgets -- "slider": ( properties: { "height": 22, "border_radius": 2, "background": "$SLIDER_BACKGROUND", "container_margin": { "left": 0, "top": 10, "right": 0, "bottom": 10, }, "accent_margin": { "left": 0, "top": 10, "right": 0, "bottom": 10, }, "accent_brush": "$ACCENT_COLOR" }, ), "thumb": ( properties: { "width": 22, "height": 22, "border_radius": 11, "background": "$ACCENT_COLOR", "border_width": 0 }, states: [ ( key: "pressed", properties: { "background": "$ACCENT_COLOR_DARK", "border_width": 0 } ) ], ), "progress_bar": ( properties: { "background": "$PROGRESS_BAR_BACKGROUND", "indicator_background": "$ACCENT_COLOR", "indicator_border_radius": 2, "border_radius": 2, "border_width": 0, "height": 4, "padding": 0, }, ), "scroll_bar": ( properties: { "background": "$BUTTON_BACKGORUND_PRESSED", "border_radius": 2, }, ), "popup": ( properties: { "background": "$POPUP_BACKGROUND", "border_brush": "$POPUP_BORDER", "border_width": 0, "border_radius": 2 }, ), // -- [END] Other widgets -- }, )