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
139
140
141
|
type align = [
| `start
| `center
| `end_
];
type justify = [
| `around
| `between
| `evenly
| `start
| `center
| `end_
];
module Media = {
let onDesktop = rules => {
String.concat(" md:", rules);
};
};
module Color = {
type t =
| None
| Transparent
| Gray0
| Gray1
| Gray2
| Gray3
| Gray4
| Gray5
| Gray6
| Gray7
| Gray8
| Gray9
| Gray10
| Gray11
| Gray12
| Gray13
| Gray14
| Primary;
let oneScaleUp = color => {
switch (color) {
| Gray0 => Gray1
| Gray1 => Gray2
| Gray2 => Gray3
| Gray3 => Gray4
| Gray4 => Gray5
| Gray5 => Gray6
| Gray6 => Gray7
| Gray7 => Gray8
| Gray8 => Gray9
| Gray9 => Gray10
| Gray10 => Gray11
| Gray11 => Gray12
| Gray12 => Gray13
| Gray13 => Gray14
| Gray14 => Gray14
| _ => color
};
};
let primary = "#FFC53D";
let gray0 = "#080808";
let gray1 = "#0F0F0F";
let gray2 = "#151515";
let gray3 = "#191919";
let gray4 = "#1E1E1E";
let gray5 = "#252525";
let gray6 = "#2A2A2A";
let gray7 = "#313131";
let gray8 = "#3A3A3A";
let gray9 = "#484848";
let gray10 = "#6E6E6E";
let gray11 = "#B4B4B4";
let gray12 = "#EEEEEE";
let gray13 = "#F5F5F5";
let gray14 = "#FFFFFF";
let brokenWhite = gray10;
let white = gray12;
let black = gray1;
let fadedBlack = gray3;
};
let none = "none";
type kind =
| Text
| Background
| Border;
let to_string = kind =>
switch (kind) {
| Text => "text"
| Background => "bg"
| Border => "border"
};
let color = (~kind, value) =>
switch ((value: Color.t)) {
| None => to_string(kind) ++ "-none"
| Transparent => to_string(kind) ++ "-transparent"
| Gray0 => to_string(kind) ++ "-[" ++ Color.gray0 ++ "]"
| Gray1 => to_string(kind) ++ "-[" ++ Color.gray1 ++ "]"
| Gray2 => to_string(kind) ++ "-[" ++ Color.gray2 ++ "]"
| Gray3 => to_string(kind) ++ "-[" ++ Color.gray3 ++ "]"
| Gray4 => to_string(kind) ++ "-[" ++ Color.gray4 ++ "]"
| Gray5 => to_string(kind) ++ "-[" ++ Color.gray5 ++ "]"
| Gray6 => to_string(kind) ++ "-[" ++ Color.gray6 ++ "]"
| Gray7 => to_string(kind) ++ "-[" ++ Color.gray7 ++ "]"
| Gray8 => to_string(kind) ++ "-[" ++ Color.gray8 ++ "]"
| Gray9 => to_string(kind) ++ "-[" ++ Color.gray9 ++ "]"
| Gray10 => to_string(kind) ++ "-[" ++ Color.gray10 ++ "]"
| Gray11 => to_string(kind) ++ "-[" ++ Color.gray11 ++ "]"
| Gray12 => to_string(kind) ++ "-[" ++ Color.gray12 ++ "]"
| Gray13 => to_string(kind) ++ "-[" ++ Color.gray13 ++ "]"
| Gray14 => to_string(kind) ++ "-[" ++ Color.gray14 ++ "]"
| Primary => to_string(kind) ++ "-[" ++ Color.primary ++ "]"
};
let text = value => color(~kind=Text, value);
let background = value => color(~kind=Background, value);
let border = value => color(~kind=Border, value);
let hover = value =>
switch (value) {
| [] => ""
| [value] => " hover:" ++ value
| values => " hover:" ++ String.concat(" hover:", values)
};
let button =
Cx.make([
"px-4 py-1 border-2 rounded-md",
"transition-[background-color] duration-250 ease-out",
border(Color.Gray5),
text(Color.Gray12),
hover([background(Color.Gray6), border(Color.Gray7)]),
]);
|
