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;

dist/index.js

@@ -1112,15 +1112,10 @@
         }
       }
     );
-    const isShowingChat = createProxyState(
-      [chatListViewModel2.selectedChat],
-      () => chatListViewModel2.selectedChat.value != void 0
-    );
     return /* @__PURE__ */ createElement(
       "div",
       {
         id: "chat-page-wrapper",
-        "toggle:open": isShowingChat,
         "children:set": chatPageContent
       }
     );
@@ -1677,6 +1672,12 @@
     storageModel,
     settingsViewModel
   );
+  chatListViewModel.selectedChat.subscribe(() => {
+    document.body.toggleAttribute(
+      "showing-chat",
+      chatListViewModel.selectedChat.value != void 0
+    );
+  });
   document.body.append(/* @__PURE__ */ createElement("div", { id: "background" }));
   document.querySelector("main").append(
     HomePage(settingsViewModel, connectionViewModel, chatListViewModel),

dist/styles.css

@@ -14,6 +14,20 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
+/* 
+ANIMATION
+*/
+@keyframes slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+}
+
+:root {
+  --animation-duration: 0.4s;
+}
+
 /*
 COLORS
  */