-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
ui.gleam
110 lines (90 loc) · 3.47 KB
/
ui.gleam
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
// IMPORTS ---------------------------------------------------------------------
import lustre/attribute.{type Attribute, attribute}
import lustre/element.{type Element}
import lustre/ui/alert
import lustre/ui/aside
import lustre/ui/box
import lustre/ui/breadcrumbs
import lustre/ui/button
import lustre/ui/centre
import lustre/ui/cluster
import lustre/ui/colour.{type Scale}
import lustre/ui/field
import lustre/ui/group
import lustre/ui/input
import lustre/ui/sequence
import lustre/ui/stack
import lustre/ui/tag
// TYPES -----------------------------------------------------------------------
/// A theme is a collection of colour scales that define the look and feel of
/// your application. You can consider the "primary" scale as your brand or
/// accent colour. The "greyscale" scale can be used when you want suitable
/// shading without any particular colour or meaning. The "error", "warning",
/// "success", and "info" scales are semantic colours that can be used to communicate
/// meaning to the user.
///
pub type Theme {
Theme(
primary: Scale,
greyscale: Scale,
error: Scale,
warning: Scale,
success: Scale,
info: Scale,
)
}
/// This type enumerates the different colour scales that are available in a
/// theme. It is mostly used to set the variant of an element using the
/// `variant` attribute, but you could also use it in your own custom elements.
///
pub type Variant {
Primary
Greyscale
Error
Warning
Success
Info
}
// ELEMENTS --------------------------------------------------------------------
pub const alert: fn(List(Attribute(msg)), List(Element(msg))) -> Element(msg) = alert.alert
pub const aside: fn(List(Attribute(msg)), Element(msg), Element(msg)) ->
Element(msg) = aside.aside
pub const box: fn(List(Attribute(msg)), List(Element(msg))) -> Element(msg) = box.box
pub const breadcrumbs: fn(
List(Attribute(msg)),
Element(msg),
List(Element(msg)),
) ->
Element(msg) = breadcrumbs.breadcrumbs
pub const button: fn(List(Attribute(msg)), List(Element(msg))) -> Element(msg) = button.button
pub const centre: fn(List(Attribute(msg)), Element(msg)) -> Element(msg) = centre.centre
pub const cluster: fn(List(Attribute(msg)), List(Element(msg))) -> Element(msg) = cluster.cluster
pub const field: fn(
List(Attribute(msg)),
List(Element(msg)),
Element(msg),
List(Element(msg)),
) ->
Element(msg) = field.field
pub const group: fn(List(Attribute(msg)), List(Element(msg))) -> Element(msg) = group.group
pub const input: fn(List(Attribute(msg))) -> Element(msg) = input.input
pub const sequence: fn(List(Attribute(msg)), List(Element(msg))) -> Element(msg) = sequence.sequence
pub const stack: fn(List(Attribute(msg)), List(Element(msg))) -> Element(msg) = stack.stack
pub const tag: fn(List(Attribute(msg)), List(Element(msg))) -> Element(msg) = tag.tag
// ATTRIBUTES ------------------------------------------------------------------
/// Use this attribute to set the colour scale of an element. Unless a child
/// element sets its own variant, it will inherit the variant of its parent. You
/// could, for example, set the variant on some custom alert element to be
/// `Warning`. Then, any buttons or icons inside the alert will inherit the
/// warning palette and be coloured accordingly.
///
pub fn variant(variant: Variant) -> Attribute(a) {
attribute("data-variant", case variant {
Primary -> "primary"
Greyscale -> "greyscale"
Error -> "error"
Warning -> "warning"
Success -> "success"
Info -> "info"
})
}