228 lines
10 KiB
Text
228 lines
10 KiB
Text
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
|