WIP 2

apps/metamigo-frontend/app/_styles/globals.css

@@ -1,107 +0,0 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
-    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

apps/metamigo-frontend/app/_styles/theme.ts

@@ -0,0 +1,112 @@
+import { Roboto, Playfair_Display, Poppins } from "next/font/google";
+
+const roboto = Roboto({
+  weight: ["400"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+const playfair = Playfair_Display({
+  weight: ["900"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+const poppins = Poppins({
+  weight: ["400", "700"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const fonts = {
+  roboto,
+  playfair,
+  poppins,
+};
+
+export const colors: any = {
+  lightGray: "#ededf0",
+  mediumGray: "#e3e5e5",
+  darkGray: "#33302f",
+  mediumBlue: "#4285f4",
+  green: "#349d7b",
+  lavender: "#a5a6f6",
+  darkLavender: "#5d5fef",
+  pink: "#fcddec",
+  cdrLinkOrange: "#ff7115",
+  coreYellow: "#fac942",
+  helpYellow: "#fff4d5",
+  dwcDarkBlue: "#191847",
+  hazyMint: "#ecf7f8",
+  leafcutterElectricBlue: "#4d6aff",
+  leafcutterLightBlue: "#fafbfd",
+  waterbearElectricPurple: "#332c83",
+  waterbearLightSmokePurple: "#eff3f8",
+  bumpedPurple: "#212058",
+  mutedPurple: "#373669",
+  warningPink: "#ef5da8",
+  lightPink: "#fff0f7",
+  lightGreen: "#f0fff3",
+  lightOrange: "#fff5f0",
+  beige: "#f6f2f1",
+  almostBlack: "#33302f",
+  white: "#ffffff",
+};
+
+export const typography: any = {
+  h1: {
+    fontFamily: playfair.style.fontFamily,
+    fontSize: 45,
+    fontWeight: 700,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h2: {
+    fontFamily: poppins.style.fontFamily,
+    fontSize: 35,
+    fontWeight: 700,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h3: {
+    fontFamily: poppins.style.fontFamily,
+    fontWeight: 400,
+    fontSize: 27,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h4: {
+    fontFamily: poppins.style.fontFamily,
+    fontWeight: 700,
+    fontSize: 18,
+  },
+  h5: {
+    fontFamily: roboto.style.fontFamily,
+    fontWeight: 700,
+    fontSize: 16,
+    lineHeight: "24px",
+    textTransform: "uppercase",
+    textAlign: "center",
+    margin: 1,
+  },
+  h6: {
+    fontFamily: roboto.style.fontFamily,
+    fontWeight: 400,
+    fontSize: 14,
+    textAlign: "center",
+  },
+  p: {
+    fontFamily: roboto.style.fontFamily,
+    fontSize: 17,
+    lineHeight: "26.35px",
+    fontWeight: 400,
+    margin: 0,
+  },
+  small: {
+    fontFamily: roboto.style.fontFamily,
+    fontSize: 13,
+    lineHeight: "18px",
+    fontWeight: 400,
+    margin: 0,
+  },
+};