mod.theme = mod.themes.dark // Neumorphic, dark appearance: soft moulded surfaces on one navy-charcoal // ground. Every control is pressed out of the same material; relief is // carried by light (a faint lift above, a soft fall below, a one-pixel // contact line), and state lives only in small lights of one accent. // Every state of a family is spelled out, because the base derived its // states once, from its own colours. mod.theme.color_bg_app = #2c2f36 mod.theme.color_fg_app = #2c2f36 mod.theme.color_bg_container = #2c2f36 mod.theme.color_bg_even = #2e3138 mod.theme.color_bg_odd = #2c2f36 // Raised faces: buttons, handles, tabs. The faces in widgets.splash draw a // shallow dish over these; the tokens are what the stock parts still read. mod.theme.color_outset = #2f323a mod.theme.color_outset_1 = #292c32 mod.theme.color_outset_2 = #353840 mod.theme.color_outset_hover = #33363e mod.theme.color_outset_1_hover = #2d3036 mod.theme.color_outset_2_hover = #393c44 mod.theme.color_outset_down = #25282e mod.theme.color_outset_1_down = #25282e mod.theme.color_outset_2_down = #25282e mod.theme.color_outset_focus = #2f323a mod.theme.color_outset_1_focus = #292c32 mod.theme.color_outset_2_focus = #353840 mod.theme.color_outset_active = #25282e mod.theme.color_outset_disabled = #2c2f36 mod.theme.color_outset_1_disabled = #2c2f36 mod.theme.color_outset_2_disabled = #2c2f36 // Wells: tracks, boxes, slots. Sunk to about half the ground's light. mod.theme.color_inset = #16181c mod.theme.color_inset_1 = #16181c mod.theme.color_inset_2 = #16181c mod.theme.color_inset_hover = #181a1f mod.theme.color_inset_1_hover = #181a1f mod.theme.color_inset_2_hover = #181a1f mod.theme.color_inset_focus = #181a1f mod.theme.color_inset_1_focus = #181a1f mod.theme.color_inset_2_focus = #181a1f mod.theme.color_inset_active = #181a1f mod.theme.color_inset_1_active = #181a1f mod.theme.color_inset_2_active = #181a1f mod.theme.color_inset_down = #131519 mod.theme.color_inset_1_down = #131519 mod.theme.color_inset_2_down = #131519 mod.theme.color_inset_drag = #181a1f mod.theme.color_inset_1_drag = #181a1f mod.theme.color_inset_2_drag = #181a1f mod.theme.color_inset_empty = #16181c mod.theme.color_inset_1_empty = #16181c mod.theme.color_inset_2_empty = #16181c mod.theme.color_inset_disabled = #22252a mod.theme.color_inset_1_disabled = #22252a mod.theme.color_inset_2_disabled = #22252a // The edge a stock face still strokes: the near-black contact line on the // shadow side, the faint lift on the lit one. mod.theme.color_bevel = #111317 mod.theme.color_bevel_hover = #111317 mod.theme.color_bevel_focus = #111317 mod.theme.color_bevel_down = #0b0d11 mod.theme.color_bevel_disabled = #1d2025 mod.theme.color_bevel_inset_1 = #0b0d11 mod.theme.color_bevel_inset_2 = #3a3d44 mod.theme.color_bevel_outset_1 = #3a3d44 mod.theme.color_bevel_outset_2 = #0b0d11 mod.theme.beveling = 0.5 // Cool grey type. The dim label grey of the references is kept for the // captions the faces print themselves; everything a person reads is a step // brighter so it holds 4.5:1 on every rung. mod.theme.color_text = #b9bfca mod.theme.color_text_hover = #d7dde6 mod.theme.color_text_focus = #d7dde6 mod.theme.color_text_down = #d7dde6 mod.theme.color_text_active = #d7dde6 mod.theme.color_text_val = #a3a9b4 mod.theme.color_text_meta = #a3a9b4 mod.theme.color_text_placeholder = #7c818b mod.theme.color_text_placeholder_hover = #868b95 mod.theme.color_text_disabled = #5a5e66 mod.theme.color_text_cursor = #45ebe0 mod.theme.color_cursor = #45ebe0 mod.theme.color_label = #b9bfca mod.theme.color_label_inner = #b9bfca mod.theme.color_label_inner_hover = #d7dde6 mod.theme.color_label_inner_focus = #b9bfca mod.theme.color_label_inner_down = #d7dde6 mod.theme.color_label_inner_drag = #d7dde6 mod.theme.color_label_inner_active = #45ebe0 mod.theme.color_label_inner_inactive = #b9bfca mod.theme.color_label_inner_disabled = #5a5e66 mod.theme.color_label_outer = #b9bfca mod.theme.color_label_outer_off = #b9bfca mod.theme.color_label_outer_hover = #d7dde6 mod.theme.color_label_outer_down = #d7dde6 mod.theme.color_label_outer_drag = #d7dde6 mod.theme.color_label_outer_focus = #b9bfca mod.theme.color_label_outer_active = #d7dde6 mod.theme.color_label_outer_active_focus = #d7dde6 mod.theme.color_label_outer_disabled = #5a5e66 mod.theme.color_icon = #b9bfca mod.theme.color_icon_active = #45ebe0 mod.theme.color_icon_disabled = #4a4e56 // One light: cyan. It fills nothing larger than a line or a dot. mod.theme.color_focus = #45ebe0 mod.theme.color_ctrl_active = #45ebe0 mod.theme.color_val = #45ebe0 mod.theme.color_val_hover = #45ebe0 mod.theme.color_val_focus = #45ebe0 mod.theme.color_val_drag = #45ebe0 mod.theme.color_val_1 = #45ebe0 mod.theme.color_val_2 = #2fc4bb mod.theme.color_mark = #45ebe0 mod.theme.color_mark_active = #45ebe0 mod.theme.color_mark_active_hover = #45ebe0 mod.theme.color_mark_focus = #45ebe0 mod.theme.color_selection = #45ebe038 mod.theme.color_selection_hover = #45ebe038 mod.theme.color_selection_focus = #45ebe038 mod.theme.color_selection_down = #45ebe038 mod.theme.color_bg_highlight = #1e3a3c mod.theme.color_bg_highlight_inline = #1e3a3c mod.theme.color_handle = #33363e mod.theme.color_handle_hover = #373a42 mod.theme.color_handle_1 = #33363e mod.theme.color_handle_2 = #2b2e34 // The accent seed: the primary, secondary and tertiary families are grown // from `color_ctrl_selected`. mod.theme.color_ctrl_selected = #45ebe0 // Meaning only where there is meaning: the family's warm coral stops. mod.theme.color_error = #e8837e mod.theme.color_on_error = #2d0f11 mod.theme.color_warning = #e8b35c mod.theme.color_on_warning = #3a2a08 mod.theme.color_terminal_bg = #16181c mod.theme.color_terminal_text = #b9bfca // The surface ladder in the ground's own navy-charcoal, with its inks held // to it: body ink 4.5:1 and the second voice 3:1 on the brightest rung. A // border that must be seen stands 3:1 off the ground; the decorative one // is the contact line. mod.theme.color_surface = #2c2f36 mod.theme.color_surface_dim = #22252a mod.theme.color_surface_bright = #3a3d45 mod.theme.color_surface_container_lowest = #1c1e23 mod.theme.color_surface_container_low = #2e3138 mod.theme.color_surface_container = #30333a mod.theme.color_surface_container_high = #34373e mod.theme.color_surface_container_highest = #3a3d45 mod.theme.color_on_surface = #d7dde6 mod.theme.color_on_surface_variant = #a9afba mod.theme.color_outline = #737984 mod.theme.color_outline_variant = #1d2025 mod.theme.color_inverse_surface = #d7dde6 mod.theme.color_inverse_on_surface = #2c2f36 // SLIM. Rows of 26, gaps of 8, a panel's padding 12. The inset and control // rungs were frozen as numbers when the base theme was read, so they are // stated again here. mod.theme.space_factor = 6.0 mod.theme.space_1 = 4.0 mod.theme.space_2 = 8.0 mod.theme.space_3 = 12.0 mod.theme.space_4 = 16.0 mod.theme.space_5 = 20.0 mod.theme.space_6 = 24.0 mod.theme.mspace_1 = mod.turtle.Inset{top: 4.0 right: 4.0 bottom: 4.0 left: 4.0} mod.theme.mspace_h_1 = mod.turtle.Inset{top: 0.0 right: 4.0 bottom: 0.0 left: 4.0} mod.theme.mspace_v_1 = mod.turtle.Inset{top: 4.0 right: 0.0 bottom: 4.0 left: 0.0} mod.theme.mspace_2 = mod.turtle.Inset{top: 8.0 right: 8.0 bottom: 8.0 left: 8.0} mod.theme.mspace_h_2 = mod.turtle.Inset{top: 0.0 right: 8.0 bottom: 0.0 left: 8.0} mod.theme.mspace_v_2 = mod.turtle.Inset{top: 8.0 right: 0.0 bottom: 8.0 left: 0.0} mod.theme.mspace_3 = mod.turtle.Inset{top: 12.0 right: 12.0 bottom: 12.0 left: 12.0} mod.theme.mspace_h_3 = mod.turtle.Inset{top: 0.0 right: 12.0 bottom: 0.0 left: 12.0} mod.theme.mspace_v_3 = mod.turtle.Inset{top: 12.0 right: 0.0 bottom: 12.0 left: 0.0} mod.theme.size_control_s = 22.0 mod.theme.size_control_m = 26.0 mod.theme.size_control_l = 32.0 mod.theme.tab_height = 26.0 mod.theme.tab_flat_height = 26.0 mod.theme.splitter_min_horizontal = 28.0 mod.theme.splitter_max_horizontal = 33.0 mod.theme.data_item_height = 24.0 // The token the corner tests hold this sheet to. The faces in // widgets.splash draw their own true radii: 7 on a control, 10 on a panel. mod.theme.corner_radius = 3.5 mod.theme.container_corner_radius = 5.0 mod.theme.textselection_corner_radius = 2.0 // A round, open grotesque. Labels at 8.25 points (a cap of about a third of // the 26 point row), values regular, button labels medium, captions // semibold. mod.theme.font_size_base = 8.25 mod.theme.font_size_p = 8.25 mod.theme.font_size_code = 8.0 mod.theme.type_title_l_size = 13.0 mod.theme.type_title_m_size = 11.5 mod.theme.type_title_s_size = 10.0 mod.theme.type_body_l_size = 9.5 mod.theme.type_body_m_size = 8.25 mod.theme.type_body_s_size = 7.5 mod.theme.type_label_l_size = 8.25 mod.theme.type_label_m_size = 7.5 mod.theme.type_label_s_size = 7.0 use mod.res.* use mod.text.* mod.theme.font_regular = mod.theme.font_regular{font_size: 8.25 font_family: mod.theme.font_regular.font_family{ibm_plex_text := FontMember{res: crate_resource("makepad_widgets:resources/Inter.ttf") weight: 400.0 asc: 0.0 desc: 0.0}}} mod.theme.font_label = mod.theme.font_label{font_size: 8.25 font_family: mod.theme.font_label.font_family{ibm_plex_text := FontMember{res: crate_resource("makepad_widgets:resources/Inter.ttf") weight: 400.0 asc: 0.0 desc: 0.0}}} mod.theme.font_bold = mod.theme.font_bold{font_size: 8.25 font_family: mod.theme.font_bold.font_family{ibm_plex_semibold := FontMember{res: crate_resource("makepad_widgets:resources/Inter.ttf") weight: 600.0 asc: 0.0 desc: 0.0}}} mod.theme.font_code = mod.theme.font_code{font_size: 8.0} mod.theme.font_title_l = mod.theme.font_bold{font_size: 13.0 line_spacing: 1.2} mod.theme.font_title_m = mod.theme.font_bold{font_size: 11.5 line_spacing: 1.2} mod.theme.font_title_s = mod.theme.font_bold{font_size: 10.0 line_spacing: 1.2} mod.theme.font_body_l = mod.theme.font_regular{font_size: 9.5 line_spacing: 1.35} mod.theme.font_body_m = mod.theme.font_regular{font_size: 8.25 line_spacing: 1.35} mod.theme.font_body_s = mod.theme.font_regular{font_size: 7.5 line_spacing: 1.35} mod.theme.font_label_l = mod.theme.font_bold{font_size: 8.25 line_spacing: 1.2} mod.theme.font_label_m = mod.theme.font_bold{font_size: 7.5 line_spacing: 1.2} mod.theme.font_label_s = mod.theme.font_bold{font_size: 7.0 line_spacing: 1.2} true