refactor(v4.0.0-alpha): beginning of a new era

apps/client/src/styles/_colors.css

@@ -0,0 +1,69 @@
+/* Color Palettes */
+@layer base {
+  :root {
+    /* Zinc - Primary/Secondary */
+    --zinc-50: 0 0% 98%;
+    --zinc-100: 240 4.8% 95.9%;
+    --zinc-200: 240 5.9% 90%;
+    --zinc-300: 240 4.9% 83.9%;
+    --zinc-400: 240 5% 64.9%;
+    --zinc-500: 240 3.8% 46.1%;
+    --zinc-600: 240 5.2% 33.9%;
+    --zinc-700: 240 5.3% 26.1%;
+    --zinc-800: 240 3.7% 15.9%;
+    --zinc-900: 240 5.9% 10%;
+    --zinc-950: 240 10% 3.9%;
+
+    /* Amber - Warning */
+    --amber-50: 48 100% 96.1%;
+    --amber-100: 48 96.5% 88.8%;
+    --amber-200: 48 96.6% 76.7%;
+    --amber-300: 45.9 96.7% 64.5%;
+    --amber-400: 43.3 96.4% 56.3%;
+    --amber-500: 37.7 92.1% 50.2%;
+    --amber-600: 32.1 94.6% 43.7%;
+    --amber-700: 26 90.5% 37.1%;
+    --amber-800: 22.7 82.5% 31.4%;
+    --amber-900: 21.7 77.8% 26.5%;
+    --amber-950: 20.9 91.7% 14.1%;
+
+    /* Emerald - Success */
+    --emerald-50: 151.8 81% 95.9%;
+    --emerald-100: 149.3 80.4% 90%;
+    --emerald-200: 152.4 76% 80.4%;
+    --emerald-300: 156.2 71.6% 66.9%;
+    --emerald-400: 158.1 64.4% 51.6%;
+    --emerald-500: 160.1 84.1% 39.4%;
+    --emerald-600: 161.4 93.5% 30.4%;
+    --emerald-700: 162.9 93.5% 24.3%;
+    --emerald-800: 163.1 88.1% 19.8%;
+    --emerald-900: 164.2 85.7% 16.5%;
+    --emerald-950: 165.7 91.3% 9%;
+
+    /* Sky - Info */
+    --sky-50: 204 100% 97.1%;
+    --sky-100: 204 93.8% 93.7%;
+    --sky-200: 200.6 94.4% 86.1%;
+    --sky-300: 199.4 95.5% 73.9%;
+    --sky-400: 198.4 93.2% 59.6%;
+    --sky-500: 198.6 88.7% 48.4%;
+    --sky-600: 200.4 98% 39.4%;
+    --sky-700: 201.3 96.3% 32.2%;
+    --sky-800: 201 90% 27.5%;
+    --sky-900: 202 80.3% 23.9%;
+    --sky-950: 204 80.2% 15.9%;
+
+    /* Rose - Error */
+    --rose-50: 355.7 100% 97.3%;
+    --rose-100: 355.6 100% 94.7%;
+    --rose-200: 352.7 96.1% 90%;
+    --rose-300: 352.6 95.7% 81.8%;
+    --rose-400: 351.3 94.5% 71.4%;
+    --rose-500: 349.7 89.2% 60.2%;
+    --rose-600: 346.8 77.2% 49.8%;
+    --rose-700: 345.3 82.7% 40.8%;
+    --rose-800: 343.4 79.7% 34.7%;
+    --rose-900: 341.5 75.5% 30.4%;
+    --rose-950: 343.1 87.7% 15.9%;
+  }
+}

apps/client/src/styles/_fonts.css

@@ -0,0 +1,7 @@
+/* Font: IBM Plex Sans */
+@import url("@fontsource/ibm-plex-sans/latin-400.css");
+@import url("@fontsource/ibm-plex-sans/latin-400-italic.css");
+@import url("@fontsource/ibm-plex-sans/latin-500.css");
+@import url("@fontsource/ibm-plex-sans/latin-500-italic.css");
+@import url("@fontsource/ibm-plex-sans/latin-600.css");
+@import url("@fontsource/ibm-plex-sans/latin-600-italic.css");

apps/client/src/styles/_tailwind.css

@@ -0,0 +1,4 @@
+/* Tailwind CSS */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/client/src/styles/_theme.css

@@ -0,0 +1,74 @@
+/* Theme */
+@layer base {
+  :root {
+    --background: var(--zinc-50);
+    --foreground: var(--zinc-950);
+    --border: var(--zinc-200);
+
+    /* Primary */
+    --primary: var(--zinc-900);
+    --primary-accent: var(--zinc-800);
+    --primary-foreground: var(--zinc-50);
+
+    /* Secondary */
+    --secondary: var(--zinc-200);
+    --secondary-accent: var(--zinc-100);
+    --secondary-foreground: var(--zinc-950);
+
+    /* Error */
+    --error: var(--rose-500);
+    --error-accent: var(--rose-400);
+    --error-foreground: var(--rose-50);
+
+    /* Warning */
+    --warning: var(--amber-500);
+    --warning-accent: var(--amber-400);
+    --warning-foreground: var(--amber-50);
+
+    /* Info */
+    --info: var(--sky-500);
+    --info-accent: var(--sky-400);
+    --info-foreground: var(--sky-50);
+
+    /* Success */
+    --success: var(--emerald-500);
+    --success-accent: var(--emerald-400);
+    --success-foreground: var(--emerald-50);
+  }
+
+  .dark {
+    --background: var(--zinc-950);
+    --foreground: var(--zinc-50);
+    --border: var(--zinc-800);
+
+    /* Primary */
+    --primary: var(--zinc-100);
+    --primary-accent: var(--zinc-200);
+    --primary-foreground: var(--zinc-950);
+
+    /* Secondary */
+    --secondary: var(--zinc-800);
+    --secondary-accent: var(--zinc-900);
+    --secondary-foreground: var(--zinc-50);
+
+    /* Error */
+    --error: var(--rose-700);
+    --error-accent: var(--rose-800);
+    --error-foreground: var(--rose-50);
+
+    /* Warning */
+    --warning: var(--amber-700);
+    --warning-accent: var(--amber-800);
+    --warning-foreground: var(--amber-50);
+
+    /* Info */
+    --info: var(--sky-700);
+    --info-accent: var(--sky-800);
+    --info-foreground: var(--sky-50);
+
+    /* Success */
+    --success: var(--emerald-700);
+    --success-accent: var(--emerald-800);
+    --success-foreground: var(--emerald-50);
+  }
+}

apps/client/src/styles/main.css

@@ -0,0 +1,8 @@
+@import url("./_tailwind.css");
+@import url("./_colors.css");
+@import url("./_theme.css");
+@import url("./_fonts.css");
+
+* {
+  @apply border-border/50;
+}