feat: better components

client/src/app.css

@@ -1,24 +1,105 @@
 @import 'tailwindcss';
-@import 'tw-animate-css';
+@import "tw-animate-css";
 
-@theme {
-	--color-crust: #11111b;
-	--color-mantle: #181825;
-	--color-base: #1e1e2e;
+@custom-variant dark (&:where(.dark, .dark *));
 
-	--color-surface-0: #313244;
-	--color-surface-1: #45475a;
-	--color-surface-2: #585b70;
+@theme inline {
+  --spacing-body: calc(100vh - 180px);
 
-	--color-overlay-0: #6c7086;
-	--color-overlay-1: #7f849c;
-	--color-overlay-2: #9399b2;
+  --color-accent: var(--sky);
 
-	--color-subtext-0: #a6adc8;
-	--color-subtext-1: #bac2de;
-
-	--color-text: #cdd6f4;
-
-	--color-sky: #89dceb;
-	--color-red: #f38ba8;
+  --color-rosewater: var(--rosewater);
+  --color-flamingo: var(--flamingo);
+  --color-pink: var(--pink);
+  --color-mauve: var(--mauve);
+  --color-red: var(--red);
+  --color-maroon: var(--maroon);
+  --color-peach: var(--peach);
+  --color-yellow: var(--yellow);
+  --color-green: var(--green);
+  --color-teal: var(--teal);
+  --color-sky: var(--sky);
+  --color-sapphire: var(--sapphire);
+  --color-blue: var(--blue);
+  --color-lavender: var(--lavender);
+  --color-text: var(--text);
+  --color-subtext-1: var(--subtext-1);
+  --color-subtext: var(--subtext);
+  --color-overlay-2: var(--overlay-2);
+  --color-overlay-1: var(--overlay-1);
+  --color-overlay: var(--overlay);
+  --color-surface-2: var(--surface-2);
+  --color-surface-1: var(--surface-1);
+  --color-surface: var(--surface);
+  --color-based: var(--based);
+  --color-mantle: var(--mantle);
+  --color-crust: var(--crust);
 }
+
+@layer base {
+  :root {
+    --rosewater: hsl(11deg, 59%, 67%);
+    --flamingo: hsl(0deg, 60%, 67%);
+    --pink: hsl(316deg, 73%, 69%);
+    --mauve: hsl(266deg, 85%, 58%);
+    --red: hsl(347deg, 87%, 44%);
+    --maroon: hsl(355deg, 76%, 59%);
+    --peach: hsl(22deg, 99%, 52%);
+    --yellow: hsl(35deg, 77%, 49%);
+    --green: hsl(109deg, 58%, 40%);
+    --teal: hsl(183deg, 74%, 35%);
+    --sky: hsl(197deg, 97%, 46%);
+    --sapphire: hsl(189deg, 70%, 42%);
+    --blue: hsl(220deg, 91%, 54%);
+    --lavender: hsl(231deg, 97%, 72%);
+    --text: hsl(234deg, 16%, 35%); 
+    --subtext-1: hsl(233deg, 13%, 41%);
+    --subtext: hsl(233deg, 10%, 47%);
+    --overlay-2: hsl(232deg, 10%, 53%);
+    --overlay-1: hsl(231deg, 10%, 59%);
+    --overlay: hsl(228deg, 11%, 65%);
+    --surface-2: hsl(227deg, 12%, 71%);
+    --surface-1: hsl(225deg, 14%, 77%);
+    --surface: hsl(223deg, 16%, 83%);
+    --based: hsl(220deg, 23%, 95%);
+    --mantle: hsl(220deg, 22%, 92%);
+    --crust: hsl(220deg, 21%, 89%);
+  }
+
+  .dark {
+    --rosewater: hsl(10deg, 56%, 91%);
+    --flamingo: hsl(0deg, 59%, 88%);
+    --pink: hsl(316deg, 72%, 86%);
+    --mauve: hsl(267deg, 84%, 81%);
+    --red: hsl(343deg, 81%, 75%);
+    --maroon: hsl(350deg, 65%, 77%);
+    --peach: hsl(23deg, 92%, 75%);
+    --yellow: hsl(41deg, 86%, 83%);
+    --green: hsl(115deg, 54%, 76%);
+    --teal: hsl(170deg, 57%, 73%);
+    --sky: hsl(189deg, 71%, 73%);
+    --sapphire: hsl(199deg, 76%, 69%);
+    --blue: hsl(217deg, 92%, 76%);
+    --lavender: hsl(232deg, 97%, 85%);
+    --text: hsl(226deg, 64%, 88%);
+    --subtext-1: hsl(227deg, 35%, 80%);
+    --subtext: hsl(228deg, 24%, 72%);
+    --overlay-2: hsl(228deg, 17%, 64%);
+    --overlay-1: hsl(230deg, 13%, 55%);
+    --overlay: hsl(231deg, 11%, 47%);
+    --surface-2: hsl(233deg, 12%, 39%);
+    --surface-1: hsl(234deg, 13%, 31%);
+    --surface: hsl(237deg, 16%, 23%);
+    --based: hsl(240deg, 21%, 15%);
+    --mantle: hsl(240deg, 21%, 12%);
+    --crust: hsl(240deg, 23%, 9%);
+  }
+}
+
+/*
+-- Cheat sheet --
+
+Focus Outline: blue
+Border: surface-1
+Hover: bump color by 2 (eg crust -> based), if accent color drop opacity (eg blue -> blue/90)
+*/