mod.theme = mod.themes.light // Neumorphism has one ground colour and no borders: every edge you can see is // light falling on a shoulder, not ink. The page, the faces and the wells are // one pale, cool material pushed up or pressed in, so the grounds below are // all the same slate-white and the relief is drawn by the faces in // widgets.splash. mod.theme.color_bg_app = #e9edf0 mod.theme.color_fg_app = #e9edf0 mod.theme.color_bg_container = #e9edf0 // A display is a window pressed into the page, not a pale pane of glass: // its face is a well's shade, a step under the ground, and what it lights // is a deep slate that reads eight to one on it. mod.theme.color_screen = #e2e6ec mod.theme.color_screen_ink = #3b4252 mod.theme.color_outset = #eceff3 mod.theme.color_outset_hover = #eef1f5 mod.theme.color_outset_down = #e5e9ef mod.theme.color_outset_active = #e5e9ef mod.theme.color_outset_focus = #eceff3 mod.theme.color_outset_drag = #eef1f5 mod.theme.color_outset_disabled = #e9edf0 mod.theme.color_outset_1 = #eceff3 mod.theme.color_outset_2 = #e8ebf2 // A well is a hair darker than the page, and opaque: a translucent well // reads as black to a contrast check. mod.theme.color_inset = #e4e8ee mod.theme.color_inset_1 = #e4e8ee mod.theme.color_inset_2 = #e4e8ee mod.theme.color_inset_hover = #e2e6ed mod.theme.color_inset_1_hover = #e2e6ed mod.theme.color_inset_2_hover = #e2e6ed mod.theme.color_inset_focus = #e2e6ed mod.theme.color_inset_1_focus = #e2e6ed mod.theme.color_inset_2_focus = #e2e6ed mod.theme.color_inset_active = #e2e6ed mod.theme.color_inset_1_active = #e2e6ed mod.theme.color_inset_2_active = #e2e6ed mod.theme.color_inset_down = #e0e4eb mod.theme.color_inset_1_down = #e0e4eb mod.theme.color_inset_2_down = #e0e4eb mod.theme.color_inset_drag = #e2e6ed mod.theme.color_inset_1_drag = #e2e6ed mod.theme.color_inset_2_drag = #e2e6ed mod.theme.color_inset_empty = #e4e8ee mod.theme.color_inset_1_empty = #e4e8ee mod.theme.color_inset_2_empty = #e4e8ee mod.theme.color_inset_disabled = #e7ebef mod.theme.color_inset_1_disabled = #e7ebef mod.theme.color_inset_2_disabled = #e7ebef // The bevel pair is the old fake-depth stroke. The faces here draw their // own shoulders, so it survives only on the few stock parts the sheet does // not redraw, as the slate of the shadow side and the white of the lit one. mod.theme.beveling = 0.0 mod.theme.color_bevel = #d3d9e2 mod.theme.color_bevel_hover = #c8cfd9 mod.theme.color_bevel_focus = #c8cfd9 mod.theme.color_bevel_down = #c8cfd9 mod.theme.color_bevel_disabled = #dde2e8 mod.theme.color_bevel_inset_1 = #d3d9e2 mod.theme.color_bevel_inset_2 = #f6f8fb mod.theme.color_bevel_outset_1 = #f6f8fb mod.theme.color_bevel_outset_2 = #d3d9e2 // Slate type on grey-white. The brief's label slate is carried a step // darker so body text holds 4.5:1 on the ground; the pale caption ink is // for scale words and units only. mod.theme.color_text = #636a7a mod.theme.color_text_val = #636a7a mod.theme.color_text_hover = #535a6a mod.theme.color_text_focus = #535a6a mod.theme.color_text_down = #535a6a mod.theme.color_text_active = #535a6a mod.theme.color_text_meta = #636a7a mod.theme.color_text_placeholder = #7f8796 mod.theme.color_text_placeholder_hover = #7f8796 mod.theme.color_text_disabled = #b3bac6 mod.theme.color_text_cursor = #4a7cf6 mod.theme.color_label = #636a7a mod.theme.color_label_inner = #636a7a mod.theme.color_label_inner_hover = #535a6a mod.theme.color_label_inner_focus = #535a6a mod.theme.color_label_inner_down = #535a6a mod.theme.color_label_inner_drag = #535a6a mod.theme.color_label_inner_active = #3860d6 mod.theme.color_label_inner_inactive = #636a7a mod.theme.color_label_inner_disabled = #b3bac6 mod.theme.color_label_outer = #636a7a mod.theme.color_label_outer_off = #636a7a mod.theme.color_label_outer_hover = #535a6a mod.theme.color_label_outer_down = #535a6a mod.theme.color_label_outer_drag = #535a6a mod.theme.color_label_outer_focus = #535a6a mod.theme.color_label_outer_active = #535a6a mod.theme.color_label_outer_active_focus = #535a6a mod.theme.color_label_outer_disabled = #b3bac6 mod.theme.color_icon = #636a7a mod.theme.color_icon_active = #3860d6 mod.theme.color_icon_disabled = #c3c9d3 // The inks on the surface ladder are held to it: body ink reads 4.5:1 and // the second voice 3:1 even on the darkest rung, a quarter toward black. mod.theme.color_on_surface = #3b4150 mod.theme.color_on_surface_variant = #555c6c // Colour lives in tiny places: a dot, a filled track, one label. The fill // blue is carried a little deeper than the brief's so a track still stands // 3:1 off its well; labels take the deeper ink beside it. mod.theme.color_focus = #4a7cf6 mod.theme.color_ctrl_active = #4a7cf6 mod.theme.color_val = #4a7cf6 mod.theme.color_val_hover = #4a7cf6 mod.theme.color_val_focus = #4a7cf6 mod.theme.color_val_drag = #4a7cf6 mod.theme.color_val_1 = #4a7cf6 mod.theme.color_val_2 = #37c6e0 mod.theme.color_mark = #4a7cf6 mod.theme.color_mark_active = #4a7cf6 mod.theme.color_mark_active_hover = #4a7cf6 mod.theme.color_mark_focus = #4a7cf6 mod.theme.color_selection_hover = #4a7cf638 mod.theme.color_selection_focus = #4a7cf638 mod.theme.color_selection_down = #4a7cf638 mod.theme.color_handle = #edf0f4 mod.theme.color_handle_hover = #f0f2f6 mod.theme.color_handle_1 = #edf0f4 mod.theme.color_handle_2 = #e6e9ef // The accent seed: the primary, secondary and tertiary families are // grown from it, and nothing else in this file reaches them. mod.theme.color_ctrl_selected = #4a7cf6 // SLIM. Rows of 26, gaps of 8, a panel's padding 12. The inset and control // rungs below were frozen as numbers when the base theme was read, so they // are stated again here rather than left at the base's sizes. 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 = 28.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: 6 on a control, 12 on a panel. mod.theme.corner_radius = 8.0 mod.theme.container_corner_radius = 12.0 mod.theme.textselection_corner_radius = 2.0 // A round, open grotesque at regular weight for controls; captions are the // only place the semibold goes. use mod.res.* use mod.text.* // The base family is merged, not replaced: only its first member changes, // so the symbol, CJK and emoji members behind it still answer. mod.theme.font_regular = 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_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_family +: {ibm_plex_semibold := FontMember{res: crate_resource("makepad_widgets:resources/Inter.ttf") weight: 600.0 asc: 0.0 desc: 0.0}}} true