makepad_widgets/
theme_mobile_light.rs

1use crate::makepad_platform::*;
2
3live_design! {
4    link theme_mobile_light;
5    use link::shaders::*;
6    
7    // GLOBAL PARAMETERS
8    pub THEME_COLOR_CONTRAST = 1.0
9    pub THEME_COLOR_TINT = #f00
10    pub THEME_COLOR_TINT_AMOUNT = 0.0
11    pub THEME_SPACE_FACTOR = 6. // Increase for a less dense layout
12    pub THEME_CORNER_RADIUS = 2.5
13    pub THEME_BEVELING = 0.75
14    pub THEME_FONT_SIZE_BASE = 7.5
15    pub THEME_FONT_SIZE_CONTRAST = 2.5// Greater values = greater font-size steps between font-formats (i.e. from H3 to H2)
16
17    // DIMENSIONS
18    pub THEME_SPACE_1 = (0.5 * (THEME_SPACE_FACTOR))
19    pub THEME_SPACE_2 = (1.0 * (THEME_SPACE_FACTOR))
20    pub THEME_SPACE_3 = (1.5 * (THEME_SPACE_FACTOR))
21
22    pub THEME_MSPACE_1 = {top: (THEME_SPACE_1), right: (THEME_SPACE_1), bottom: (THEME_SPACE_1), left: (THEME_SPACE_1)} 
23    pub THEME_MSPACE_H_1 = {top: 0., right: (THEME_SPACE_1), bottom: 0., left: (THEME_SPACE_1)}
24    pub THEME_MSPACE_V_1 = {top: (THEME_SPACE_1), right: 0., bottom: (THEME_SPACE_1), left: 0.}
25    pub THEME_MSPACE_2 = {top: (THEME_SPACE_2), right: (THEME_SPACE_2), bottom: (THEME_SPACE_2), left: (THEME_SPACE_2)}
26    pub THEME_MSPACE_H_2 = {top: 0., right: (THEME_SPACE_2), bottom: 0., left: (THEME_SPACE_2)}
27    pub THEME_MSPACE_V_2 = {top: (THEME_SPACE_2), right: 0., bottom: (THEME_SPACE_2), left: 0.}
28    pub THEME_MSPACE_3 = {top: (THEME_SPACE_3), right: (THEME_SPACE_3), bottom: (THEME_SPACE_3), left: (THEME_SPACE_3)}
29    pub THEME_MSPACE_H_3 = {top: 0., right: (THEME_SPACE_3), bottom: 0., left: (THEME_SPACE_3)}
30    pub THEME_MSPACE_V_3 = {top: (THEME_SPACE_3), right: 0., bottom: (THEME_SPACE_3), left: 0.}
31
32    pub THEME_DATA_ITEM_HEIGHT = 23.0
33    pub THEME_DATA_ICON_WIDTH = 16.0
34    pub THEME_DATA_ICON_HEIGHT = 24.0
35
36    pub THEME_CONTAINER_CORNER_RADIUS = (THEME_CORNER_RADIUS * 2.)
37    pub THEME_TEXTSELECTION_CORNER_RADIUS = (THEME_CORNER_RADIUS * .5)
38    pub THEME_TAB_HEIGHT = 32.0,
39    pub THEME_SPLITTER_HORIZONTAL = 16.0,
40    pub THEME_SPLITTER_SIZE = 10.0,
41    pub THEME_SPLITTER_MIN_HORIZONTAL = (THEME_TAB_HEIGHT),
42    pub THEME_SPLITTER_MAX_HORIZONTAL = (THEME_TAB_HEIGHT + THEME_SPLITTER_SIZE),
43    pub THEME_SPLITTER_MIN_VERTICAL = (THEME_SPLITTER_HORIZONTAL),
44    pub THEME_SPLITTER_MAX_VERTICAL = (THEME_SPLITTER_HORIZONTAL + THEME_SPLITTER_SIZE),
45    pub THEME_SPLITTER_SIZE = 5.0
46    pub THEME_DOCK_BORDER_SIZE: 0.0
47
48    // COLOR PALETTE
49    // HIGHER VALUE = HIGHER CONTRAST, RECOMMENDED VALUES: 0.5 - 2.5
50
51    pub THEME_COLOR_W = #FFFFFFFF
52    pub THEME_COLOR_W_H = #FFFFFF00
53    pub THEME_COLOR_B = #000000FF
54    pub THEME_COLOR_B_H = #00000000
55
56    pub THEME_COLOR_WHITE = (mix(THEME_COLOR_W, #FFFFFF00, pow(0.1, THEME_COLOR_CONTRAST)))
57    pub THEME_COLOR_U_5 = (mix(THEME_COLOR_W, THEME_COLOR_W_H, pow(0.35, THEME_COLOR_CONTRAST)))
58    pub THEME_COLOR_U_4 = (mix(THEME_COLOR_W, THEME_COLOR_W_H, pow(0.6, THEME_COLOR_CONTRAST)))
59    pub THEME_COLOR_U_3 = (mix(THEME_COLOR_W, THEME_COLOR_W_H, pow(0.75, THEME_COLOR_CONTRAST)))
60    pub THEME_COLOR_U_2 = (mix(THEME_COLOR_W, THEME_COLOR_W_H, pow(0.9, THEME_COLOR_CONTRAST)))
61    pub THEME_COLOR_U_1 = (mix(THEME_COLOR_W, THEME_COLOR_W_H, pow(0.95, THEME_COLOR_CONTRAST)))
62    pub THEME_COLOR_U_HIDDEN = (THEME_COLOR_W_H)
63
64    pub THEME_COLOR_D_HIDDEN = (THEME_COLOR_B_H)
65    pub THEME_COLOR_D_1 = (mix(THEME_COLOR_B, THEME_COLOR_B_H, pow(0.85, THEME_COLOR_CONTRAST)))
66    pub THEME_COLOR_D_2 = (mix(THEME_COLOR_B, THEME_COLOR_B_H, pow(0.75, THEME_COLOR_CONTRAST)))
67    pub THEME_COLOR_D_3 = (mix(THEME_COLOR_B, THEME_COLOR_B_H, pow(0.6, THEME_COLOR_CONTRAST)))
68    pub THEME_COLOR_D_4 = (mix(THEME_COLOR_B, THEME_COLOR_B_H, pow(0.4, THEME_COLOR_CONTRAST)))
69    pub THEME_COLOR_BLACK = (mix(THEME_COLOR_B, THEME_COLOR_B_H, pow(0.1, THEME_COLOR_CONTRAST)))
70
71    // BASICS
72    pub THEME_COLOR_MAKEPAD = #FF5C39FF
73
74    pub THEME_COLOR_BG_APP = (mix(
75        mix(THEME_COLOR_B, THEME_COLOR_TINT, THEME_COLOR_TINT_AMOUNT),
76        mix(THEME_COLOR_W, THEME_COLOR_TINT, THEME_COLOR_TINT_AMOUNT),
77        pow(0.3, THEME_COLOR_CONTRAST)))
78    pub THEME_COLOR_FG_APP = (mix(
79        mix(THEME_COLOR_B, THEME_COLOR_TINT, THEME_COLOR_TINT_AMOUNT),
80        mix(THEME_COLOR_W, THEME_COLOR_TINT, THEME_COLOR_TINT_AMOUNT),
81        pow(0.36, THEME_COLOR_CONTRAST))
82    )
83    pub THEME_COLOR_BG_HIGHLIGHT = (THEME_COLOR_FG_APP)
84    pub THEME_COLOR_BG_UNFOCUSSED = (THEME_COLOR_BG_HIGHLIGHT * 0.85)
85    pub THEME_COLOR_APP_CAPTION_BAR = (THEME_COLOR_D_HIDDEN)
86    pub THEME_COLOR_DRAG_QUAD = (THEME_COLOR_U_5)
87
88    pub THEME_COLOR_CURSOR = (THEME_COLOR_BLACK)
89    pub THEME_COLOR_CURSOR_BORDER = (THEME_COLOR_WHITE)
90
91    pub THEME_COLOR_TEXT = (THEME_COLOR_U_5)
92    pub THEME_COLOR_TEXT_D = (THEME_COLOR_D_4)
93    pub THEME_COLOR_TEXT_HL = (THEME_COLOR_TEXT)
94
95    pub THEME_COLOR_TEXT_DOWN = (THEME_COLOR_U_4)
96    pub THEME_COLOR_TEXT_HOVER = (THEME_COLOR_WHITE)
97    pub THEME_COLOR_TEXT_ACTIVE = (THEME_COLOR_U_5)
98    pub THEME_COLOR_TEXT_INACTIVE = (THEME_COLOR_U_5)
99    pub THEME_COLOR_TEXT_FOCUS = (THEME_COLOR_U_5)
100    pub THEME_COLOR_TEXT_PLACEHOLDER = (THEME_COLOR_U_4)
101    pub THEME_COLOR_TEXT_META = (THEME_COLOR_U_4)
102
103    pub THEME_COLOR_TEXT_CURSOR = (THEME_COLOR_WHITE)
104
105    pub THEME_COLOR_BG_CONTAINER = (THEME_COLOR_D_3 * 0.8)
106    pub THEME_COLOR_BG_EVEN = (THEME_COLOR_BG_CONTAINER * 0.875)
107    pub THEME_COLOR_BG_ODD = (THEME_COLOR_BG_CONTAINER * 1.125)
108    pub THEME_COLOR_BG_HIGHLIGHT = (THEME_COLOR_U_1) // Code-blocks and quotes.
109    pub THEME_COLOR_BG_HIGHLIGHT_INLINE = (THEME_COLOR_U_3) // i.e. inline code
110
111    pub THEME_COLOR_BEVEL_1 = (THEME_COLOR_U_3)
112    pub THEME_COLOR_BEVEL_2 = (THEME_COLOR_D_3)
113
114    // WIDGET COLORS
115    pub THEME_COLOR_OUTSET = (THEME_COLOR_U_1)
116    pub THEME_COLOR_OUTSET_DOWN = (THEME_COLOR_D_1)
117    pub THEME_COLOR_OUTSET_HOVER = (THEME_COLOR_U_2)
118    pub THEME_COLOR_OUTSET_ACTIVE = (THEME_COLOR_U_2)
119    pub THEME_COLOR_OUTSET_INACTIVE = (THEME_COLOR_D_HIDDEN)
120
121    // Background of textinputs, radios, checkboxes etc.
122    pub THEME_COLOR_INSET = (THEME_COLOR_D_1)
123    pub THEME_COLOR_INSET_1 = (THEME_COLOR_D_4)
124    pub THEME_COLOR_INSET_1_HOVER = (THEME_COLOR_D_4)
125    pub THEME_COLOR_INSET_2 = (THEME_COLOR_D_HIDDEN)
126
127    // Progress bars, slider amounts etc.
128    pub THEME_COLOR_VAL = (THEME_COLOR_U_3)
129    pub THEME_COLOR_VAL_HOVER = (THEME_COLOR_U_4)
130    pub THEME_COLOR_VAL_ACTIVE = (THEME_COLOR_U_5)
131    pub THEME_COLOR_VAL_TRACK_DEFAULT = (THEME_COLOR_D_3)
132    pub THEME_COLOR_VAL_TRACK_HOVER = (THEME_COLOR_D_3)
133    pub THEME_COLOR_VAL_TRACK_ACTIVE = (THEME_COLOR_D_4)
134
135    // WIDGET SPECIFIC COLORS
136    pub THEME_COLOR_DIVIDER = (THEME_COLOR_D_4)
137
138    pub THEME_COLOR_SLIDER_MINIMAL_HANDLE = (THEME_COLOR_WHITE)
139    pub THEME_COLOR_SLIDER_MINIMAL_HANDLE_HOVER = (THEME_COLOR_WHITE)
140    pub THEME_COLOR_SLIDER_MINIMAL_HANDLE_ACTIVE = (THEME_COLOR_WHITE)
141
142    pub THEME_COLOR_SLIDES_CHAPTER = (THEME_COLOR_MAKEPAD)
143    pub THEME_COLOR_SLIDES_BG = (THEME_COLOR_D_4)
144
145    pub THEME_COLOR_SLIDER_HANDLE_1 = #8
146    pub THEME_COLOR_SLIDER_HANDLE_1_HOVER = #A
147    pub THEME_COLOR_SLIDER_HANDLE_2 = #282828
148    pub THEME_COLOR_SLIDER_HANDLE_2_HOVER = #3
149
150    pub THEME_COLOR_SCROLLBAR_HOVER = (THEME_COLOR_U_3)
151
152    pub THEME_COLOR_DOCK_CONTAINER = (THEME_COLOR_BG_CONTAINER)
153    pub THEME_COLOR_DOCK_TAB_ACTIVE = (THEME_COLOR_FG_APP)
154    pub THEME_COLOR_DOCK_TAB_ACTIVE_MINIMAL = (THEME_COLOR_U_4)
155
156
157    // TODO: THESE ARE APPLICATION SPECIFIC COLORS THAT SHOULD BE MOVED FROM THE GENERAL THEME TO THE GIVEN PROJECT
158    pub THEME_COLOR_HIGH = #C00
159    pub THEME_COLOR_MID = #FA0
160    pub THEME_COLOR_LOW = #8A0
161    pub THEME_COLOR_PANIC = #f0f
162    pub THEME_COLOR_ICON_WAIT = (THEME_COLOR_LOW),
163    pub THEME_COLOR_ERROR = (THEME_COLOR_HIGH),
164    pub THEME_COLOR_WARNING = (THEME_COLOR_MID),
165    pub THEME_COLOR_ICON_PANIC = (THEME_COLOR_HIGH)
166
167
168    // TYPOGRAPHY
169    pub THEME_FONT_SIZE_CODE = 9.0
170    pub THEME_FONT_LINE_SPACING = 1.43
171
172    pub THEME_FONT_SIZE_1 = (THEME_FONT_SIZE_BASE + 16 * THEME_FONT_SIZE_CONTRAST)
173    pub THEME_FONT_SIZE_2 = (THEME_FONT_SIZE_BASE + 8 * THEME_FONT_SIZE_CONTRAST)
174    pub THEME_FONT_SIZE_3 = (THEME_FONT_SIZE_BASE + 4 * THEME_FONT_SIZE_CONTRAST)
175    pub THEME_FONT_SIZE_4 = (THEME_FONT_SIZE_BASE + 2 * THEME_FONT_SIZE_CONTRAST)
176    pub THEME_FONT_SIZE_P = (THEME_FONT_SIZE_BASE + 1 * THEME_FONT_SIZE_CONTRAST)
177
178    pub THEME_FONT_LABEL = {
179        font: { path: dep("crate://self/resources/IBMPlexSans-Text.ttf") },
180        font2: { path: dep("crate://self/resources/LXGWWenKaiRegular.ttf") },
181    } // TODO: LEGACY, REMOVE. REQUIRED BY RUN LIST IN STUDIO ATM
182    pub THEME_FONT_REGULAR = {
183        font: { path: dep("crate://self/resources/IBMPlexSans-Text.ttf") }
184        font2: { path: dep("crate://self/resources/LXGWWenKaiRegular.ttf") },
185    }
186    pub THEME_FONT_BOLD = {
187        font: { path: dep("crate://self/resources/IBMPlexSans-SemiBold.ttf") }
188        font2: { path: dep("crate://self/resources/LXGWWenKaiBold.ttf") },
189    }
190    pub THEME_FONT_ITALIC = {
191        font: { path: dep("crate://self/resources/IBMPlexSans-Italic.ttf") }
192        font2: { path: dep("crate://self/resources/LXGWWenKaiRegular.ttf") },
193    }
194    pub THEME_FONT_BOLD_ITALIC = {
195        font: { path: dep("crate://self/resources/IBMPlexSans-BoldItalic.ttf") },
196        font2: { path: dep("crate://self/resources/LXGWWenKaiBold.ttf") },
197    }
198    pub THEME_FONT_CODE = {
199        font: { path: dep("crate://self/resources/LiberationMono-Regular.ttf") }
200        font_size: (THEME_FONT_SIZE_CODE)
201        //brightness: 1.1
202        line_scale: 1.2,
203        line_spacing: 1.16
204    }
205}
makepad_widgets/theme_mobile_light.rs

makepad_widgets/
theme_mobile_light.rs
