egui_charts/tokens/
mod.rs

1//! Design tokens: default spacing, sizing, rounding,
2//! stroke, shadow and engine colour values. UI chrome reads the applied theme.
3//!
4//! All values live in the single static [`DESIGN_TOKENS`], a plain struct
5//! literal evaluated at compile time, so reading a token costs a memory load and
6//! nothing is parsed or allocated at startup.
7//!
8//! # Usage
9//!
10//! ```rust
11//! use egui_charts::tokens::DESIGN_TOKENS;
12//!
13//! // Spacing
14//! let gap = DESIGN_TOKENS.spacing.md;
15//! let padding = DESIGN_TOKENS.spacing.lg;
16//!
17//! // Colors
18//! let bullish = DESIGN_TOKENS.semantic.chart.bullish;
19//! let accent = DESIGN_TOKENS.semantic.brand.accent;
20//!
21//! // Sizing
22//! let btn_height = DESIGN_TOKENS.sizing.button_md;
23//!
24//! // Strokes
25//! let thin = DESIGN_TOKENS.stroke.hairline;
26//! ```
27
28use egui::Color32;
29
30mod resolved;
31mod semantic;
32mod sizing;
33
34pub use resolved::*;
35pub use semantic::*;
36pub use sizing::*;
37
38/// The crate's design tokens.
39pub static DESIGN_TOKENS: DesignTokens = DesignTokens {
40    spacing: SpacingTokens {
41        xs: 2.0,
42        sm: 4.0,
43        md: 6.0,
44        lg: 8.0,
45        xl: 12.0,
46        xxl: 16.0,
47        xxxl: 24.0,
48        hairline: 1.0,
49        section_lg: 40.0,
50        panel_gap: 4.0,
51    },
52    sizing: SizingTokens {
53        target_min: 24.0,
54        icon_xs: 12.0,
55        icon_14: 14.0,
56        icon_sm: 16.0,
57        icon_md: 20.0,
58        icon_btn: 22.0,
59        icon_lg: 24.0,
60        icon_xxl: 32.0,
61        button_sm: 24.0,
62        button_md: 28.0,
63        button_dialog: 32.0,
64        button_lg: 36.0,
65        button_xl: 40.0,
66        button_xxl: 48.0,
67        list_item_height: 28.0,
68        control_height: 18.0,
69        toolbar: ToolbarSizingTokens {
70            left_width: 52.0,
71            bottom_height: 28.0,
72            right_icon_width: 52.0,
73            right_panel_width: 300.0,
74            button_width: 52.0,
75            button_height: 38.0,
76            hover_margin_h: 9.0,
77            hover_margin_v: 2.0,
78            inner_rounding: 6.0,
79            icon_size: 24.0, // Icon size in toolbar buttons (the icon grid)
80            separator_margin: 8.0,
81            separator_gap: 6.0,
82            right_sidebar_width: 52.0,
83            right_btn_size: 44.0,
84            right_icon_size: 24.0, // Icon size inside the 44px buttons (the icon grid)
85            right_btn_spacing: 2.0,
86            right_hover_margin: 3.0,
87            right_hover_rounding: 8.0,
88            separator_height: 20.0,
89            separator_width: 1.0,
90        },
91        panel: PanelSizingTokens {
92            bottom_default_height: 150.0,
93        },
94        dialog: DialogSizingTokens {
95            submenu_width: 200.0,
96            submenu_item_height: 38.0,
97            color_picker_width: 160.0,
98            color_picker_height: 150.0,
99            menu_settings_width: 220.0,
100            menu_settings_height: 400.0,
101            default_width: 400.0,
102            default_height: 300.0,
103            default_min_height: 100.0,
104            confirm_width: 350.0,
105            prompt_width_sm: 350.0,
106            prompt_width_lg: 450.0,
107            alert_width: 480.0,
108            properties_height: 450.0,
109            label_width: 100.0,
110            input_width: 100.0,
111            series_sidebar_width: 140.0,
112            grid_dropdown_width: 140.0,
113            indicator_item_width: 130.0,
114            button_min_width_xs: 60.0,
115        },
116        settings_dialog: SettingsDialogSizingTokens {
117            width: 620.0,
118            height: 720.0,
119            rounding: 6.0,
120            title_height: 52.0,
121            title_font_size: 18.0,
122            title_padding_left: 24.0,
123            close_button_size: 32.0,
124            close_button_margin: 10.0,
125            close_icon_size: 10.0,
126            sidebar_width: 160.0,
127            tab_height: 40.0,
128            tab_padding_h: 16.0,
129            tab_padding_v: 8.0,
130            tab_icon_size: 20.0,
131            tab_icon_text_gap: 12.0,
132            tab_font_size: 13.0,
133            content_padding_top: 16.0,
134            content_padding_h: 24.0,
135            content_min_width: 400.0,
136            row_height: 40.0,
137            row_spacing: 4.0,
138            label_width: 110.0,
139            dropdown_width: 160.0,
140            checkbox_size: 18.0,
141            input_width_margin: 60.0,
142            section_spacing: 16.0,
143            footer_height: 60.0,
144            footer_padding_h: 24.0,
145            footer_padding_v: 12.0,
146            button_height: 34.0,
147            button_min_width: 72.0,
148            button_gap: 8.0,
149            small_dropdown_width: 80.0,
150            template_button_width: 100.0,
151            template_menu_width: 180.0,
152            template_menu_max_height: 300.0,
153            indicator_width: 3.0,
154            indicator_offset: 4.0,
155        },
156        context_menu: ContextMenuSizingTokens {
157            min_width: 220.0,
158            max_width: 380.0,
159            rounding: 6.0,
160            padding_v: 4.0,
161            item_height: 32.0,
162            item_padding_h: 12.0,
163            icon_width: 28.0,
164            icon_size: 20.0,
165            font_size: 15.0,
166            shortcut_font_size: 12.0,
167            separator_height: 9.0,
168            separator_thickness: 1.0,
169            separator_margin_h: 12.0,
170            submenu_arrow_size: 8.0,
171            shortcut_width: 70.0,
172            screen_edge_padding: 4.0,
173        },
174        symbol_header: SymbolHeaderSizingTokens {
175            height: 28.0,
176            quote_box_height: 18.0,
177        },
178        candle: CandleSizingTokens {
179            body_width_ratio: 0.6,
180            wick_width: 1.0,
181            wick_width_hidpi: 2.0,
182            min_body_height: 1.0,
183            volume_alpha: 128,
184        },
185        floating_toolbar: FloatingToolbarSizingTokens {
186            default_x: 100.0,
187            default_y: 100.0,
188            drag_handle_width: 24.0,
189            button_size: 24.0,
190            color_size: 20.0,
191            separator_width: 8.0,
192            drag_handle_height: 20.0,
193            height: 32.0,
194            dot_size: 1.5,
195            dot_spacing: 4.0,
196            separator_height: 16.0,
197        },
198        command_palette: CommandPaletteSizingTokens {
199            width: 500.0,
200            height: 400.0,
201            margin_x: 40.0,
202            margin_y: 100.0,
203            input_padding: 60.0,
204            scroll_padding: 80.0,
205        },
206        replay: ReplaySizingTokens {
207            control_bar_height: 40.0,
208            button_size: 28.0,
209            speed_dropdown_width: 60.0,
210            date_display_width: 150.0,
211            progress_bar_width: 200.0,
212        },
213        drawing_toolbar_ext: DrawingToolbarExtSizingTokens {
214            submenu_width_lg: 200.0,
215            submenu_width_xl: 220.0,
216            name_offset_active: 42.0,
217            name_offset_inactive: 36.0,
218            submenu_offset_y: 70.0,
219            submenu_margin: 10.0,
220        },
221        annotation: AnnotationSizingTokens {
222            label_padding_x: 8.0,
223            label_padding_y: 4.0,
224            callout_padding_x: 10.0,
225            callout_padding_y: 6.0,
226            pointer_size: 8.0,
227            table_cell_width: 70.0,
228            table_cell_height: 22.0,
229            table_header_height: 26.0,
230            signpost_padding_x: 6.0,
231            text_padding_y: 5.0,
232        },
233        media: MediaSizingTokens {
234            image_min_width: 60.0,
235            image_min_height: 45.0,
236            image_default_width: 120.0,
237            image_default_height: 90.0,
238            checkerboard_size: 10.0,
239            tweet_card_width: 280.0,
240            tweet_card_height: 120.0,
241            idea_card_width: 200.0,
242            idea_card_height: 80.0,
243            profile_radius: 18.0,
244        },
245        crosshair: CrosshairSizingTokens {
246            dot_radius: 4.0,
247            label_offset_x: 5.0,
248            label_rounding: 2.0,
249            plus_symbol_spacing: 16.0,
250        },
251        position_tool: PositionToolSizingTokens {
252            min_width: 200.0,
253            label_offset_y: 20.0,
254        },
255        charts_ext: ChartsExtSizingTokens {
256            volume_bubbles_max_diameter: 40.0,
257            heatmap_strip_height: 24.0,
258            realtime_button_width: 28.0,
259        },
260        technical_labels: TechnicalLabelsSizingTokens {
261            gann_label_width: 28.0,
262            gann_label_height: 14.0,
263            elliott_label_size: 18.0,
264            fib_label_offset_x: 80.0,
265            channel_label_width: 70.0,
266            channel_label_height: 36.0,
267            channel_offset_x: 60.0,
268            cycle_label_width: 40.0,
269            pattern_label_width: 70.0,
270            pattern_label_height: 16.0,
271            line_label_width: 40.0,
272            line_label_height: 14.0,
273            line_arc_radius: 40.0,
274            hs_label_width: 35.0,
275        },
276        tooltip: TooltipSizingTokens {
277            cursor_offset_x: 15.0,
278        },
279        drawing: DrawingSizingTokens {
280            magnet_distance: 20.0,
281        },
282        notification: NotificationSizingTokens { panel_width: 320.0 },
283        menu: MenuSizingTokens { item_height: 28.0 },
284    },
285    rounding: RoundingTokens {
286        none: 0.0,
287        xs: 2.0,
288        sm: 4.0,
289        md: 6.0,
290        lg: 8.0,
291        xl: 12.0,
292        pill: 9999.0,
293        button: 4.0,
294        panel: 6.0,
295        dialog: 6.0,
296    },
297    stroke: StrokeTokens {
298        extra_thin: 0.5,
299        light: 0.8,
300        hairline: 1.0,
301        medium: 1.5,
302        thick: 2.0,
303    },
304    shadow: ShadowTokens { offset_sm: 2.0 },
305    layout: LayoutTokens {
306        menu_shadow_offset_x: 0.0,
307        menu_shadow_offset_y: 2.0,
308    },
309    semantic: SemanticTokens {
310        ui: UiSemanticTokens {
311            text_muted_dark: Color32::from_rgb(150, 150, 150),
312            border_dark: Color32::from_rgb(74, 74, 74),
313        },
314        chart: ChartSemanticTokens {
315            bg: Color32::from_rgb(15, 15, 15),
316            bg_axis: Color32::from_rgb(15, 15, 15),
317            grid_line: Color32::from_rgb(34, 34, 34),
318            grid_line_major: Color32::from_rgba_unmultiplied_const(255, 255, 255, 18),
319            axis_text: Color32::from_rgb(255, 255, 255),
320            axis_text_secondary: Color32::from_rgb(184, 184, 184),
321            crosshair_line: Color32::from_rgba_unmultiplied_const(178, 181, 190, 120),
322            crosshair_label_bg: Color32::from_rgb(55, 59, 70),
323            crosshair_label_text: Color32::from_rgb(209, 212, 220),
324            bullish: Color32::from_rgb(8, 153, 129),
325            bearish: Color32::from_rgb(242, 54, 69),
326            volume_up_alpha: 128,
327            volume_down_alpha: 128,
328            watermark_alpha: 60,
329            selection_text: Color32::WHITE,
330        },
331        // Hover and pressed accents step darker so white text keeps 4.5:1 on all three.
332        brand: BrandSemanticTokens {
333            accent: Color32::from_rgb(41, 98, 255),
334            accent_hover: Color32::from_rgb(35, 88, 230),
335            accent_active: Color32::from_rgb(31, 78, 205),
336        },
337        status: StatusSemanticTokens {
338            error: Color32::from_rgb(244, 67, 54),
339            caution: Color32::from_rgb(255, 235, 59),
340        },
341        footprint: FootprintSemanticTokens {
342            poc: Color32::from_rgb(255, 235, 59),
343            value_area: Color32::from_rgba_unmultiplied_const(255, 193, 7, 50),
344            imbalance_buy: Color32::from_rgba_unmultiplied_const(38, 166, 154, 200),
345            imbalance_sell: Color32::from_rgba_unmultiplied_const(242, 54, 69, 200),
346        },
347        indicators: IndicatorSemanticTokens {
348            ma: Color32::from_rgb(255, 152, 0),
349            ema: Color32::from_rgb(33, 150, 243),
350        },
351        drawings: DrawingSemanticTokens {
352            label_text: Color32::from_rgb(209, 212, 220),
353            fib_50: Color32::from_rgb(156, 39, 176),
354            fib_100: Color32::from_rgb(0, 188, 212),
355        },
356        extended: ExtendedSemanticTokens {
357            accent: Color32::from_rgb(41, 98, 255),
358            success: Color32::from_rgb(76, 175, 80),
359            error: Color32::from_rgb(244, 67, 54),
360            caution: Color32::from_rgb(255, 235, 59),
361            info: Color32::from_rgb(33, 150, 243),
362            disabled: Color32::from_rgb(158, 158, 158),
363            purple: Color32::from_rgb(156, 39, 176),
364            gray: Color32::from_rgb(128, 128, 128),
365            light_gray: Color32::from_rgb(224, 224, 224),
366            favorite_gold: Color32::from_rgb(255, 193, 7),
367            chart_bg: Color32::from_rgb(15, 15, 15),
368            chart_axis_bg: Color32::from_rgb(15, 15, 15),
369            chart_tooltip_bg: Color32::from_rgb(42, 46, 57),
370            chart_text: Color32::from_rgb(255, 255, 255),
371            chart_text_secondary: Color32::from_rgb(184, 184, 184),
372            chart_text_muted: Color32::from_rgb(112, 112, 112),
373            chart_crosshair_label_bg: Color32::from_rgb(55, 59, 70),
374            bullish: Color32::from_rgb(8, 153, 129),
375            bearish: Color32::from_rgb(242, 54, 69),
376        },
377        tpo: TpoSemanticTokens {
378            poc: Color32::from_rgb(214, 220, 229),
379            value_area: Color32::from_rgba_unmultiplied_const(91, 151, 143, 24),
380            initial_balance: Color32::from_rgb(185, 193, 205),
381            single_print: Color32::from_rgba_unmultiplied_const(173, 125, 145, 36),
382            session_separator: Color32::from_rgb(100, 100, 100),
383            letter_default: Color32::from_rgb(189, 189, 189),
384            grid: Color32::from_rgba_unmultiplied_const(255, 255, 255, 20),
385            period_1: Color32::from_rgb(218, 75, 119),
386            period_2: Color32::from_rgb(207, 90, 122),
387            period_3: Color32::from_rgb(192, 105, 125),
388            period_4: Color32::from_rgb(176, 119, 128),
389            period_5: Color32::from_rgb(160, 132, 131),
390            period_6: Color32::from_rgb(144, 144, 132),
391            period_7: Color32::from_rgb(127, 155, 132),
392            period_8: Color32::from_rgb(110, 164, 132),
393            period_9: Color32::from_rgb(93, 172, 131),
394            period_10: Color32::from_rgb(77, 179, 130),
395            period_11: Color32::from_rgb(61, 185, 130),
396            period_12: Color32::from_rgb(47, 190, 132),
397        },
398    },
399};
egui_charts/tokens/mod.rs

egui_charts/tokens/
mod.rs
