mod.theme = mod.themes.light // Cardboard. Kraft corrugated board, hand made: every control is a piece of // card cut out and glued on, or laid back into the window it was cut from, // and every word and line is drawn in black felt marker. The board is a warm // kraft brown with its fibres and a quiet drift of tone; the cut edges show // the fluted layer between the two liners. What is chosen is black card or // a marker fill; coloured paper (yellow, blue, red) and cream paper are glued // on where a role needs a colour. The faces are drawn in widgets.splash; this // file holds the tokens every face and every stock widget reads. use mod.res.* use mod.text.* // The board. mod.theme.color_bg_app = #b08659 mod.theme.color_fg_app = #b08659 mod.theme.color_bg_container = #b08659 // Raised pieces the sheet does not redraw: the board's own kraft, a shade // lighter on top and darker at the foot. mod.theme.color_outset = #b38a5d mod.theme.color_outset_1 = #c29a6c mod.theme.color_outset_2 = #9c744b mod.theme.color_outset_hover = #b99063 mod.theme.color_outset_1_hover = #c7a072 mod.theme.color_outset_2_hover = #a17a50 mod.theme.color_outset_down = #a27a50 mod.theme.color_outset_1_down = #96704a mod.theme.color_outset_2_down = #ab8358 mod.theme.color_outset_focus = #b38a5d mod.theme.color_outset_1_focus = #c29a6c mod.theme.color_outset_2_focus = #9c744b mod.theme.color_outset_active = #2a2724 mod.theme.color_outset_1_active = #2a2724 mod.theme.color_outset_2_active = #2a2724 mod.theme.color_outset_disabled = #ab9580 mod.theme.color_outset_1_disabled = #ab9580 mod.theme.color_outset_2_disabled = #ab9580 // Wells: a window cut through the board, its floor the deeper kraft under // it. Opaque in every state. mod.theme.color_inset = #a37b51 mod.theme.color_inset_1 = #a37b51 mod.theme.color_inset_2 = #a37b51 mod.theme.color_inset_hover = #a98157 mod.theme.color_inset_1_hover = #a98157 mod.theme.color_inset_2_hover = #a98157 mod.theme.color_inset_focus = #a98157 mod.theme.color_inset_1_focus = #a98157 mod.theme.color_inset_2_focus = #a98157 mod.theme.color_inset_active = #a37b51 mod.theme.color_inset_1_active = #a37b51 mod.theme.color_inset_2_active = #a37b51 mod.theme.color_inset_down = #9b744b mod.theme.color_inset_1_down = #9b744b mod.theme.color_inset_2_down = #9b744b mod.theme.color_inset_drag = #9b744b mod.theme.color_inset_1_drag = #9b744b mod.theme.color_inset_2_drag = #9b744b mod.theme.color_inset_empty = #a37b51 mod.theme.color_inset_1_empty = #a37b51 mod.theme.color_inset_2_empty = #a37b51 mod.theme.color_inset_disabled = #ad9073 mod.theme.color_inset_1_disabled = #ad9073 mod.theme.color_inset_2_disabled = #ad9073 // Every edge a stock face strokes is a line of marker. mod.theme.color_bevel = #x18140e mod.theme.color_bevel_hover = #x18140e mod.theme.color_bevel_focus = #x2f5f9e mod.theme.color_bevel_down = #x18140e mod.theme.color_bevel_active = #x18140e mod.theme.color_bevel_empty = #x18140e mod.theme.color_bevel_disabled = #7d6a55 mod.theme.color_bevel_inset_1 = #x18140e mod.theme.color_bevel_inset_2 = #x18140e mod.theme.color_bevel_outset_1 = #x18140e mod.theme.color_bevel_outset_2 = #x18140e mod.theme.beveling = 0.5 // Ink: black felt marker, #x18140e, 5.6:1 on the board. Disabled words are // the same marker gone dry, a brown that still reads. mod.theme.color_text = #x18140e mod.theme.color_text_hover = #100c08 mod.theme.color_text_focus = #100c08 mod.theme.color_text_active = #100c08 mod.theme.color_text_down = #100c08 mod.theme.color_text_disabled = #x6e5a44 mod.theme.color_text_placeholder = #4a3a2a mod.theme.color_text_placeholder_hover = #x3e3022 mod.theme.color_text_val = #x18140e mod.theme.color_text_meta = #221a10 mod.theme.color_text_cursor = #x18140e mod.theme.color_cursor = #x18140e mod.theme.color_label = #x18140e mod.theme.color_label_hover = #100c08 mod.theme.color_label_focus = #100c08 mod.theme.color_label_active = #100c08 mod.theme.color_label_down = #100c08 mod.theme.color_label_disabled = #x6e5a44 mod.theme.color_label_inner = #x18140e mod.theme.color_label_inner_hover = #100c08 mod.theme.color_label_inner_focus = #x18140e mod.theme.color_label_inner_down = #100c08 mod.theme.color_label_inner_drag = #100c08 mod.theme.color_label_inner_active = #100c08 mod.theme.color_label_inner_inactive = #221a10 mod.theme.color_label_inner_disabled = #x6e5a44 mod.theme.color_label_outer = #x18140e mod.theme.color_label_outer_off = #x18140e mod.theme.color_label_outer_hover = #100c08 mod.theme.color_label_outer_down = #100c08 mod.theme.color_label_outer_drag = #100c08 mod.theme.color_label_outer_focus = #100c08 mod.theme.color_label_outer_active = #100c08 mod.theme.color_label_outer_active_focus = #100c08 mod.theme.color_label_outer_disabled = #x6e5a44 mod.theme.color_icon = #x18140e mod.theme.color_icon_hover = #100c08 mod.theme.color_icon_focus = #x18140e mod.theme.color_icon_active = #100c08 mod.theme.color_icon_down = #100c08 mod.theme.color_icon_disabled = #x6e5a44 mod.theme.color_on_surface = #x18140e mod.theme.color_on_surface_variant = #x18140e // The accent seed is the marker itself: the grown primary is black card // with cream words. Focus is a blue ballpoint line. mod.theme.color_ctrl_selected = #2a2724 mod.theme.color_text_on_accent = #xf1e6cf mod.theme.color_focus = #x2f5f9e mod.theme.color_ctrl_active = #x18140e mod.theme.color_val = #x18140e mod.theme.color_val_hover = #x18140e mod.theme.color_val_focus = #x18140e mod.theme.color_val_drag = #x18140e mod.theme.color_val_disabled = #7d6a55 mod.theme.color_mark = #x18140e mod.theme.color_mark_active = #x18140e mod.theme.color_mark_active_hover = #100c08 mod.theme.color_mark_focus = #x18140e mod.theme.color_mark_disabled = #7d6a55 // Selected text: a yellow highlighter stroke. mod.theme.color_selection = #00000000 mod.theme.color_selection_hover = #xe8c2404d mod.theme.color_selection_focus = #xe8c24080 mod.theme.color_selection_down = #xe8c24080 mod.theme.color_bg_highlight = #c29a6c mod.theme.color_bg_highlight_inline = #xe8c24066 mod.theme.color_handle = #c29a6c mod.theme.color_handle_hover = #c7a072 mod.theme.color_handle_1 = #c7a072 mod.theme.color_handle_2 = #9c744b // Rows of a tree or a table: strips of cream paper glued on the board, every // other one a shade warmer; the chosen row a strip of yellow paper. mod.theme.color_bg_even = #xe6d8bc mod.theme.color_bg_odd = #xdfcfb1 mod.theme.color_highlight = #e2b84a // The instruments: black card behind a cream paper frame, yellow figures // painted on it, the unlit segments a ghost. mod.theme.color_screen = #2a2724 mod.theme.color_screen_ink = #xf2c94e mod.theme.screen_ghost = 0.10 mod.theme.color_lamp_plain = #xfff6e4 mod.theme.color_lamp_off = #2a2520 // The surface ladder: kraft for the board, cream paper above it. mod.theme.color_surface = #b08659 mod.theme.color_surface_dim = #a37b51 mod.theme.color_surface_bright = #c29a6c mod.theme.color_surface_container_lowest = #a37b51 mod.theme.color_surface_container_low = #b38a5d mod.theme.color_surface_container = #xe6d8bc mod.theme.color_surface_container_high = #xece0c7 mod.theme.color_surface_container_highest = #xf1e6cf mod.theme.color_outline = #x18140e mod.theme.color_outline_variant = #x6e5a44 mod.theme.color_inverse_surface = #2a2724 mod.theme.color_inverse_on_surface = #xf1e6cf // SPACING. Rows of 26 points, gaps of 8, a panel's padding 12. The rungs // below were frozen as numbers when the base 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.data_item_height = 22.0 mod.theme.corner_radius = 5.0 mod.theme.container_corner_radius = 6.0 mod.theme.textselection_corner_radius = 1.5 mod.theme.radius_xs = 2.0 mod.theme.radius_s = 3.0 mod.theme.radius_m = 5.0 mod.theme.radius_l = 6.0 // TYPE, all of it by hand. Headings and captions in felt marker capitals // (Permanent Marker); everything else hand printed (Caveat) in its heaviest // weight, so it reads as a felt-tip at 1x. Caveat is small on its body (an // x-height of 0.36 of the size, against Inter's 0.54), so it is set // larger: 12.5 for working text, 13 on the controls. Both // hands carry tall line boxes for their size (Caveat 1.26 em, Permanent // Marker 1.43), so each line box is drawn in to the ink (the asc and desc // fudges), or a 26 point row and an 80 point panel would overflow. mod.theme.font_size_p = 12.5 mod.theme.font_size_base = 12.5 mod.theme.type_title_l_size = 15.0 mod.theme.type_title_m_size = 13.0 mod.theme.type_title_s_size = 11.5 mod.theme.type_body_l_size = 13.5 mod.theme.type_body_m_size = 12.5 mod.theme.type_body_s_size = 11.5 mod.theme.type_label_l_size = 13.0 mod.theme.type_label_m_size = 12.0 mod.theme.type_label_s_size = 11.0 mod.theme.font_size_4 = 13.0 mod.theme.font_regular = mod.theme.font_regular{font_size: 12.5 font_family: mod.theme.font_regular.font_family{ibm_plex_text := FontMember{res: crate_resource("self:resources/Caveat-Variable.ttf") weight: 700.0 asc: -0.16 desc: 0.06}}} mod.theme.font_label = mod.theme.font_label{font_size: 13.0 font_family: mod.theme.font_label.font_family{ibm_plex_text := FontMember{res: crate_resource("self:resources/Caveat-Variable.ttf") weight: 700.0 asc: -0.16 desc: 0.06}}} mod.theme.font_bold = mod.theme.font_bold{font_size: 12.0 font_family: mod.theme.font_bold.font_family{ibm_plex_semibold := FontMember{res: crate_resource("self:resources/PermanentMarker-Regular.ttf") weight: 400.0 asc: -0.25 desc: 0.1}}} // The type roles were frozen from the base's faces; stated again so every // role reads in its hand. Titles in marker, body and labels hand printed. mod.theme.font_title_l = mod.theme.font_bold{font_size: 14.0 line_spacing: 1.15} mod.theme.font_title_m = mod.theme.font_bold{font_size: 12.0 line_spacing: 1.15} mod.theme.font_title_s = mod.theme.font_bold{font_size: 10.5 line_spacing: 1.15} mod.theme.font_body_l = mod.theme.font_regular{font_size: 13.5 line_spacing: 1.2} mod.theme.font_body_m = mod.theme.font_regular{font_size: 12.5 line_spacing: 1.2} mod.theme.font_body_s = mod.theme.font_regular{font_size: 11.5 line_spacing: 1.2} mod.theme.font_label_l = mod.theme.font_label{font_size: 13.0 line_spacing: 1.1} mod.theme.font_label_m = mod.theme.font_label{font_size: 12.0 line_spacing: 1.1} mod.theme.font_label_s = mod.theme.font_label{font_size: 11.0 line_spacing: 1.1} // 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 = #x2f5f9e true