thaw 0.4.8

An easy to use leptos component library
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

use thaw_macro::WriteCSSVars;

#[derive(Clone, WriteCSSVars)]
pub struct CommonTheme {
    pub font_family_base: String,
    pub font_family_monospace: String,
    pub font_family_numeric: String,

    pub font_size_base_100: String,
    pub font_size_base_200: String,
    pub font_size_base_300: String,
    pub font_size_base_400: String,
    pub font_size_base_500: String,
    pub font_size_base_600: String,
    pub font_size_base_700: String,
    pub font_size_base_800: String,
    pub font_size_base_900: String,
    pub font_size_base_1000: String,

    pub line_height_base_200: String,
    pub line_height_base_300: String,
    pub line_height_base_400: String,
    pub line_height_base_500: String,

    pub font_weight_regular: String,
    pub font_weight_semibold: String,
    pub font_weight_bold: String,

    pub stroke_width_thin: String,
    pub stroke_width_thick: String,
    pub stroke_width_thicker: String,
    pub stroke_width_thickest: String,

    pub border_radius_none: String,
    pub border_radius_small: String,
    pub border_radius_medium: String,
    pub border_radius_large: String,
    pub border_radius_x_large: String,
    pub border_radius_circular: String,

    pub spacing_horizontal_x_x_s: String,
    pub spacing_horizontal_x_s: String,
    pub spacing_horizontal_s_nudge: String,
    pub spacing_horizontal_s: String,
    pub spacing_horizontal_m_nudge: String,
    pub spacing_horizontal_m: String,
    pub spacing_horizontal_l: String,
    pub spacing_horizontal_x_x_l: String,
    pub spacing_vertical_none: String,
    pub spacing_vertical_x_x_s: String,
    pub spacing_vertical_x_s: String,
    pub spacing_vertical_s_nudge: String,
    pub spacing_vertical_s: String,
    pub spacing_vertical_m_nudge: String,
    pub spacing_vertical_m: String,
    pub spacing_vertical_l: String,
    pub spacing_vertical_x_x_l: String,

    pub duration_ultra_fast: String,
    pub duration_faster: String,
    pub duration_normal: String,
    pub duration_gentle: String,
    pub duration_slow: String,
    pub curve_accelerate_mid: String,
    pub curve_decelerate_max: String,
    pub curve_decelerate_mid: String,
    pub curve_easy_ease: String,
}

impl CommonTheme {
    pub fn new() -> Self {
        Self {
            font_family_base: "'Segoe UI', 'Segoe UI Web (West European)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),
            font_family_monospace: "Consolas, ui-monospace, 'Courier New', Courier, monospace".into(),
            font_family_numeric: "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),

            font_size_base_100: "10px".into(),
            font_size_base_200: "12px".into(),
            font_size_base_300: "14px".into(),
            font_size_base_400: "16px".into(),
            font_size_base_500: "20px".into(),
            font_size_base_600: "24px".into(),
            font_size_base_700: "28px".into(),
            font_size_base_800: "32px".into(),
            font_size_base_900: "40px".into(),
            font_size_base_1000: "60px".into(),

            line_height_base_200: "16px".into(),
            line_height_base_300: "20px".into(),
            line_height_base_400: "22px".into(),
            line_height_base_500: "28px".into(),

            font_weight_regular: "400".into(),
            font_weight_semibold: "600".into(),
            font_weight_bold: "700".into(),

            stroke_width_thin: "1px".into(),
            stroke_width_thick: "2px".into(),
            stroke_width_thicker: "3px".into(),
            stroke_width_thickest: "4px".into(),

            border_radius_none: "0".into(),
            border_radius_small: "2px".into(),
            border_radius_medium: "4px".into(),
            border_radius_large: "6px".into(),
            border_radius_x_large: "8px".into(),
            border_radius_circular: "10000px".into(),

            spacing_horizontal_x_x_s: "2px".into(),
            spacing_horizontal_x_s: "4px".into(),
            spacing_horizontal_s_nudge: "6px".into(),
            spacing_horizontal_s: "8px".into(),
            spacing_horizontal_m_nudge: "10px".into(),
            spacing_horizontal_m: "12px".into(),
            spacing_horizontal_l: "16px".into(),
            spacing_horizontal_x_x_l: "24px".into(),
            spacing_vertical_none: "0".into(),
            spacing_vertical_x_x_s: "2px".into(),
            spacing_vertical_x_s: "4px".into(),
            spacing_vertical_s_nudge: "6px".into(),
            spacing_vertical_s: "8px".into(),
            spacing_vertical_m_nudge: "10px".into(),
            spacing_vertical_m: "12px".into(),
            spacing_vertical_l: "16px".into(),
            spacing_vertical_x_x_l: "24px".into(),

            duration_ultra_fast: "50ms".into(),
            duration_faster: "100ms".into(),
            duration_normal: "200ms".into(),
            duration_gentle: "250ms".into(),
            duration_slow: "300ms".into(),
            curve_accelerate_mid: "cubic-bezier(1,0,1,1)".into(),
            curve_decelerate_max: "cubic-bezier(0.1,0.9,0.2,1)".into(),
            curve_decelerate_mid: "cubic-bezier(0,0,0,1)".into(),
            curve_easy_ease: "cubic-bezier(0.33,0,0.67,1)".into(),
        }
    }
}