8bit.lol
forked from
futur.blue/pegasus
objective categorical abstract machine language personal data server
futur.blue
1let base_classes =
2 "py-1 px-4 text-lg rounded-lg w-full flex items-center justify-center \
3 transition duration-300 focus-visible:outline-none disabled:text-mist-80"
4
5type kind = [`Primary | `Secondary | `Tertiary | `Danger]
6
7let classes = function
8 | `Primary ->
9 base_classes
10 ^ " bg-white font-serif text-mana-200 shadow-whisper \
11 hover:shadow-shimmer hover:bg-mist-20 hover:text-mist-100 \
12 focus-visible:shadow-shimmer focus-visible:bg-mist-20 \
13 focus-visible:text-mist-100 active:shadow-glow active:text-mana-100 \
14 disabled:bg-mist-60 disabled:shadow-none"
15 | `Secondary ->
16 base_classes
17 ^ " bg-feather font-serif underline text-mana-100 hover:no-underline \
18 focus-visible:shadow-whisper active:shadow-whisper \
19 disabled:no-underline disabled:bg-mist-60 disabled:shadow-none"
20 | `Tertiary ->
21 base_classes
22 ^ " font-sans underline text-mana-100 hover:no-underline \
23 focus-visible:text-mana-200 active:text-mana-200"
24 | `Danger ->
25 base_classes
26 ^ " bg-white font-serif text-phoenix-100 shadow-bleed hover:bg-mist-20 \
27 focus:bg-mist-20 focus:text-phoenix-40 focus-visible:outline-none \
28 active:bg-phoenix-40 active:text-mist-20 disabled:bg-mist-60 \
29 disabled:shadow-none"
30 | `Danger_secondary ->
31 base_classes
32 ^ " bg-feather font-serif underline text-phoenix-100 hover:no-underline \
33 focus-visible:shadow-bleed active:shadow-bleed disabled:no-underline \
34 disabled:text-mist-80"
35
36let[@react.component] make ?id ?name ?(kind = `Primary) ?(type_ = "button")
37 ?formMethod ?onClick ?value ?disabled ?(className = "") ?ref ~children () =
38 <button
39 ?id
40 ?name
41 type_
42 ?formMethod
43 ?onClick
44 ?value
45 ?disabled
46 className=(classes kind ^ " " ^ className)
47 ?ref>
48 children
49 </button>