267 lines
12 KiB
Text
267 lines
12 KiB
Text
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
|