add animations

dist/index.css

@@ -1,4 +1,10 @@
 /* src/base.css */
+#home-page,
+#home-page #chat-section,
+#chat-page,
+#chat-page #main > div {
+  animation: slide-up var(--animation-duration) ease;
+}
 #background {
   position: fixed;
   top: 0px;
@@ -78,6 +84,8 @@ main {
 /* src/colors.css */
 [color]:not([color=standard]) {
   --primary: hsl(var(--hue), 100%, var(--accent-luma));
+  --primary-hover: hsl(var(--hue), 95%, var(--accent-luma));
+  --primary-active: hsl(var(--hue), 80%, var(--accent-luma));
   --text-on-color: hsl(0, 0%, var(--accent-text-luma));
   --link: hsl(var(--hue), 100%, var(--accent-luma));
 }
@@ -121,18 +129,12 @@ main {
   background-color: var(--surface);
 }
 [color]:not([color=standard]).subtle-background {
-  --gradient-luma-1: 97%;
-  --gradient-luma-2: 92%;
-  background-image:
-    linear-gradient(
-      120deg,
-      hsl(var(--hue), 100%, var(--gradient-luma-1)),
-      hsl(var(--hue), 100%, var(--gradient-luma-2)));
+  --luma: var(--subtle-luma);
+  background: hsl(var(--hue), 30%, var(--luma));
 }
 @media (prefers-color-scheme: dark) {
   [color]:not([color=standard]).subtle-background {
-    --gradient-luma-1: 2%;
-    --gradient-luma-2: 6%;
+    --luma: var(--subtle-luma-dark);
   }
 }
 [color=coral] {
@@ -141,13 +143,17 @@ main {
   --accent-luma-dark: 70%;
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 [color=yellow] {
   --hue: 50;
   --accent-luma: 50%;
   --accent-luma-dark: 60%;
-  --accent-text-luma: 100%;
+  --accent-text-luma: 0%;
   --accent-text-luma-dark: 0%;
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 [color=mint] {
   --hue: 150;
@@ -155,6 +161,8 @@ main {
   --accent-luma-dark: 60%;
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 0%;
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 [color=lightblue] {
   --hue: 180;
@@ -162,6 +170,8 @@ main {
   --accent-luma-dark: 60%;
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 0%;
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 [color=blue] {
   --hue: 220;
@@ -169,6 +179,8 @@ main {
   --accent-luma-dark: 70%;
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 [color=purple] {
   --hue: 280;
@@ -176,13 +188,18 @@ main {
   --accent-luma-dark: 70%;
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 
 /* src/View/chatPage.css */
 #chat-page-wrapper {
   display: none;
 }
-#chat-page-wrapper[open] {
+body[showing-chat] #home-page {
+  display: none;
+}
+body[showing-chat] #chat-page-wrapper {
   display: flex;
   position: absolute;
   top: 0px;