mod.theme = mod.themes.dark // Kids toy: an activity board. The ground is a royal-blue board of glossy // moulded plastic with a faint pebble grain; every control is a chunky part // of injection-moulded plastic pressed into it, each kind in its own primary // colour -- red, green, yellow, purple, orange, magenta, teal -- with a deep // rounded shoulder, a soft window reflection and a short soft shadow. Fields, // readouts and value boxes are navy windows in thick coloured frames. The // faces are drawn in widgets.splash; this file holds the tokens every face // and every stock widget reads. Every state of a family is spelled out, // because the base derived its states once, from its own colours. use mod.res.* use mod.text.* // The board. mod.theme.color_bg_app = #2763b9 mod.theme.color_fg_app = #2763b9 mod.theme.color_bg_container = #2763b9 mod.theme.color_bg_even = #00000000 mod.theme.color_bg_odd = #00000000 // A plain container is a teal plastic tile: white words keep 5:1 on it. mod.theme.color_surface_container = #0f7a78 mod.theme.color_surface_container_lowest = #1d4f9e // The ladder's lifted rungs, stated: grown from the board's blue they came // out paler than the white ink reads on (4.1:1). mod.theme.color_surface_container_highest = #1f55a0 mod.theme.color_surface_bright = #2159aa mod.theme.color_highlight = #ffd21f // Raised parts a stock face draws without a face of this sheet's: a blue // plastic a step lighter than the board. mod.theme.color_outset = #3a7bd2 mod.theme.color_outset_1 = #4385da mod.theme.color_outset_2 = #2f6cc2 mod.theme.color_outset_hover = #4a8ae0 mod.theme.color_outset_1_hover = #5293e6 mod.theme.color_outset_2_hover = #3876cc mod.theme.color_outset_focus = #3a7bd2 mod.theme.color_outset_1_focus = #4385da mod.theme.color_outset_2_focus = #2f6cc2 mod.theme.color_outset_active = #e0342a mod.theme.color_outset_1_active = #e0342a mod.theme.color_outset_2_active = #c42a22 mod.theme.color_outset_down = #2f6cc2 mod.theme.color_outset_1_down = #2f6cc2 mod.theme.color_outset_2_down = #2a62b2 mod.theme.color_outset_drag = #2f6cc2 mod.theme.color_outset_1_drag = #2f6cc2 mod.theme.color_outset_2_drag = #2a62b2 mod.theme.color_outset_disabled = #5a6f9a mod.theme.color_outset_1_disabled = #5a6f9a mod.theme.color_outset_2_disabled = #52668e // Wells moulded into the board: navy floors. mod.theme.color_inset = #15367f mod.theme.color_inset_1 = #15367f mod.theme.color_inset_2 = #1b4290 mod.theme.color_inset_hover = #1a3c88 mod.theme.color_inset_1_hover = #1a3c88 mod.theme.color_inset_2_hover = #20479a mod.theme.color_inset_focus = #15367f mod.theme.color_inset_1_focus = #15367f mod.theme.color_inset_2_focus = #1b4290 mod.theme.color_inset_active = #15367f mod.theme.color_inset_1_active = #15367f mod.theme.color_inset_2_active = #1b4290 mod.theme.color_inset_down = #12306f mod.theme.color_inset_1_down = #12306f mod.theme.color_inset_2_down = #183c86 mod.theme.color_inset_drag = #15367f mod.theme.color_inset_1_drag = #15367f mod.theme.color_inset_2_drag = #1b4290 mod.theme.color_inset_empty = #15367f mod.theme.color_inset_1_empty = #15367f mod.theme.color_inset_2_empty = #1b4290 mod.theme.color_inset_disabled = #3f5683 mod.theme.color_inset_1_disabled = #3f5683 mod.theme.color_inset_2_disabled = #3f5683 // The moulding seam every stock face strokes: a deep navy, never black. mod.theme.beveling = 0.67 mod.theme.color_bevel = #0d2457 mod.theme.color_bevel_hover = #0d2457 mod.theme.color_bevel_focus = #ffd21f mod.theme.color_bevel_active = #0d2457 mod.theme.color_bevel_empty = #0d2457 mod.theme.color_bevel_down = #0d2457 mod.theme.color_bevel_drag = #0d2457 mod.theme.color_bevel_disabled = #33497a mod.theme.color_bevel_inset_1 = #0d2457 mod.theme.color_bevel_inset_2 = #0d2457 mod.theme.color_bevel_outset_1 = #0d2457 mod.theme.color_bevel_outset_2 = #0a1d48 mod.theme.color_bevel_inset_1_hover = #0d2457 mod.theme.color_bevel_inset_2_hover = #0d2457 mod.theme.color_bevel_outset_1_hover = #0d2457 mod.theme.color_bevel_outset_2_hover = #0a1d48 mod.theme.color_bevel_inset_1_focus = #ffd21f mod.theme.color_bevel_inset_2_focus = #ffd21f mod.theme.color_bevel_outset_1_focus = #ffd21f mod.theme.color_bevel_outset_2_focus = #ffd21f mod.theme.color_bevel_inset_1_down = #0d2457 mod.theme.color_bevel_inset_2_down = #0d2457 mod.theme.color_bevel_outset_1_down = #0d2457 mod.theme.color_bevel_outset_2_down = #0d2457 mod.theme.color_bevel_inset_1_disabled = #33497a mod.theme.color_bevel_inset_2_disabled = #33497a mod.theme.color_bevel_outset_1_disabled = #33497a mod.theme.color_bevel_outset_2_disabled = #33497a // Ink. White on the board and on the coloured parts; dim and disabled words // a pale board blue, never below 3:1 on the board. mod.theme.color_text = #f6f8ff mod.theme.color_text_hover = #ffffff mod.theme.color_text_focus = #ffffff mod.theme.color_text_active = #ffffff mod.theme.color_text_down = #eef3ff mod.theme.color_text_val = #f2f6ff mod.theme.color_text_hl = #ffffff mod.theme.color_text_disabled = #9db3dc mod.theme.color_text_placeholder = #a9c0ea mod.theme.color_text_placeholder_hover = #b8cbef mod.theme.color_text_meta = #c6d6f4 mod.theme.color_text_cursor = #ffffff mod.theme.color_cursor = #ffffff mod.theme.color_cursor_focus = #ffffff mod.theme.color_label = #ffffff mod.theme.color_label_hover = #ffffff mod.theme.color_label_focus = #ffffff mod.theme.color_label_active = #ffffff mod.theme.color_label_down = #f2f6ff mod.theme.color_label_disabled = #9db3dc mod.theme.color_label_inner = #ffffff mod.theme.color_label_inner_hover = #ffffff mod.theme.color_label_inner_focus = #ffffff mod.theme.color_label_inner_active = #ffffff mod.theme.color_label_inner_down = #f2f6ff mod.theme.color_label_inner_drag = #f2f6ff mod.theme.color_label_inner_inactive = #c6d6f4 mod.theme.color_label_inner_disabled = #9db3dc mod.theme.color_label_outer = #ffffff mod.theme.color_label_outer_off = #d6e2f8 mod.theme.color_label_outer_hover = #ffffff mod.theme.color_label_outer_focus = #ffffff mod.theme.color_label_outer_active = #ffffff mod.theme.color_label_outer_active_focus = #ffffff mod.theme.color_label_outer_down = #f2f6ff mod.theme.color_label_outer_drag = #f2f6ff mod.theme.color_label_outer_disabled = #9db3dc mod.theme.color_on_surface = #ffffff mod.theme.color_on_surface_variant = #ffffff mod.theme.color_icon = #f2f6ff mod.theme.color_icon_hover = #ffffff mod.theme.color_icon_focus = #ffffff mod.theme.color_icon_active = #ffffff mod.theme.color_icon_down = #eef3ff mod.theme.color_icon_disabled = #9db3dc mod.theme.color_mark = #ffffff // The light. Focus is a toy-yellow ring; a value a stock face fills is the // same yellow; the accent seed is the board's red, so the primary, secondary // and tertiary families grow from the toy red. mod.theme.color_focus = #ffd21f mod.theme.color_ctrl_active = #ffffff mod.theme.color_val = #ffd21f mod.theme.color_val_hover = #ffdc45 mod.theme.color_val_focus = #ffd21f mod.theme.color_val_drag = #ffdc45 mod.theme.color_val_disabled = #7d8bab mod.theme.color_mark_active = #ffffff mod.theme.color_mark_active_hover = #ffffff mod.theme.color_mark_focus = #ffffff mod.theme.color_mark_disabled = #9db3dc mod.theme.color_ctrl_selected = #e0342a mod.theme.color_bg_highlight = #3272c8 mod.theme.color_bg_highlight_inline = #1d4c9c mod.theme.color_text_on_accent = #ffffff // Selected text: a lighter board blue over the navy floor. mod.theme.color_selection = #00000000 mod.theme.color_selection_hover = #00000000 mod.theme.color_selection_down = #4a90ffa6 mod.theme.color_selection_focus = #4a90ffa6 // A stock handle is white plastic. mod.theme.color_handle = #f4f2ec mod.theme.color_handle_hover = #ffffff mod.theme.color_handle_1 = #ffffff mod.theme.color_handle_2 = #d9d6cd // Screens: navy glass, warm white figures. mod.theme.color_screen = #0d2154 mod.theme.color_screen_ink = #fff3b8 mod.theme.screen_ghost = 0.09 mod.theme.color_lamp_plain = #fffaf0 mod.theme.color_lamp_off = #0b1a40 mod.theme.color_terminal_bg = #0d2154 mod.theme.color_terminal_text = #f6f8ff // SPACING. Rows of 24 points, gaps of 8, panels padded 12. The base theme // froze everything it derives from space_factor when it was built, so every // rung this sheet depends on is stated again here. mod.theme.space_factor = 8.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 = 24.0 mod.theme.space_6 = 32.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 = 20.0 mod.theme.size_control_m = 24.0 mod.theme.size_control_l = 28.0 mod.theme.tab_height = 26.0 mod.theme.tab_flat_height = 24.0 mod.theme.data_item_height = 22.0 // Toy corners are round: stock shaders draw a corner twice the number // written, so a cap gets 5 points and a panel 8. mod.theme.corner_radius = 2.5 mod.theme.container_corner_radius = 4.0 mod.theme.textselection_corner_radius = 1.5 mod.theme.radius_s = 4.0 mod.theme.radius_m = 5.0 mod.theme.radius_l = 8.0 // TYPE. Fredoka, round and bubbly: regular for words, its medium for the // labels on the parts, its semibold for captions and titles. mod.theme.font_size_p = 8.5 mod.theme.font_size_base = 8.5 mod.theme.type_label_l_size = 8.5 mod.theme.type_label_m_size = 7.75 mod.theme.type_label_s_size = 7.0 mod.theme.type_body_l_size = 9.25 mod.theme.type_body_m_size = 8.5 mod.theme.type_body_s_size = 7.75 mod.theme.type_title_s_size = 9.5 mod.theme.type_title_m_size = 10.5 mod.theme.type_title_l_size = 12.0 mod.theme.font_size_4 = 10.5 mod.theme.font_regular = mod.theme.font_regular{font_size: 8.5 font_family: mod.theme.font_regular.font_family{ibm_plex_text := FontMember{res: crate_resource("self:resources/Fredoka-Variable.ttf") weight: 420.0 asc: 0.0 desc: 0.0}}} mod.theme.font_label = mod.theme.font_label{font_size: 8.5 font_family: mod.theme.font_label.font_family{ibm_plex_text := FontMember{res: crate_resource("self:resources/Fredoka-Variable.ttf") weight: 520.0 asc: 0.0 desc: 0.0}}} mod.theme.font_bold = mod.theme.font_bold{font_size: 9.0 font_family: mod.theme.font_bold.font_family{ibm_plex_semibold := FontMember{res: crate_resource("self:resources/Fredoka-Variable.ttf") weight: 620.0 asc: 0.0 desc: 0.0}}} // The type roles were frozen from the base's faces; stated again so every // role reads in the one family. mod.theme.font_title_l = mod.theme.font_bold{font_size: 12.0 line_spacing: 1.2} mod.theme.font_title_m = mod.theme.font_bold{font_size: 10.5 line_spacing: 1.2} mod.theme.font_title_s = mod.theme.font_bold{font_size: 9.5 line_spacing: 1.2} mod.theme.font_body_l = mod.theme.font_regular{font_size: 9.25 line_spacing: 1.35} mod.theme.font_body_m = mod.theme.font_regular{font_size: 8.5 line_spacing: 1.35} mod.theme.font_body_s = mod.theme.font_regular{font_size: 7.75 line_spacing: 1.35} mod.theme.font_label_l = mod.theme.font_label{font_size: 8.5 line_spacing: 1.2} mod.theme.font_label_m = mod.theme.font_label{font_size: 7.75 line_spacing: 1.2} mod.theme.font_label_s = mod.theme.font_label{font_size: 7.0 line_spacing: 1.2} // No surface material: every face that matters is drawn by the sheet. mod.theme.material_level = 0.0 mod.theme.material_margin = 0.0 mod.theme.material_glow = 0.0 mod.theme.material_ink_glow = 0.0 mod.theme.color_material_glow = #ffd21f true