1 files changed, 141 insertions, 0 deletions
diff --git a/bs5/universal/native/shared/Theme.re b/bs5/universal/native/shared/Theme.re
new file mode 100644
index 0000000..31fd01d
--- /dev/null
+++ b/bs5/universal/native/shared/Theme.re
@@ -0,0 +1,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)]),
+  ]);