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%;
+  --luma: var(--subtle-luma);
-  --gradient-luma-2: 92%;
+  background: hsl(var(--hue), 30%, var(--luma));
-  background-image:
-    linear-gradient(
-      120deg,
-      hsl(var(--hue), 100%, var(--gradient-luma-1)),
-      hsl(var(--hue), 100%, var(--gradient-luma-2)));
 }
 @media (prefers-color-scheme: dark) {
   [color]:not([color=standard]).subtle-background {
-    --gradient-luma-1: 2%;
+    --luma: var(--subtle-luma-dark);
-    --gradient-luma-2: 6%;
   }
 }
 [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
  */

src/View/chatPage.css

@@ -3,7 +3,11 @@
   display: none;
 }
 
-#chat-page-wrapper[open] {
+body[showing-chat] #home-page {
+  display: none;
+}
+
+body[showing-chat] #chat-page-wrapper {
   display: flex;
 
   position: absolute;

src/View/chatPageWrapper.tsx

@@ -16,15 +16,10 @@ export function ChatPageWrapper(chatListViewModel: ChatListViewModel) {
       }
     }
   );
-  const isShowingChat = React.createProxyState(
-    [chatListViewModel.selectedChat],
-    () => chatListViewModel.selectedChat.value != undefined
-  );
 
   return (
     <div
       id="chat-page-wrapper"
-      toggle:open={isShowingChat}
       children:set={chatPageContent}
     ></div>
   );

src/base.css

@@ -1,3 +1,13 @@
+/* Animation */
+#home-page,
+#home-page #chat-section,
+#chat-page,
+#chat-page #main > div {
+  animation: slide-up var(--animation-duration) ease;
+}
+
+/* Gradient */
+
 #background {
   position: fixed;
 

src/colors.css

@@ -1,6 +1,9 @@
 /* basic */
 [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));
 }
@@ -58,20 +61,13 @@
 
 /* subtle */
 [color]:not([color="standard"]).subtle-background {
-  --gradient-luma-1: 97%;
+  --luma: var(--subtle-luma);
-  --gradient-luma-2: 92%;
+  background: hsl(var(--hue), 30%, var(--luma));
-
-  background-image: linear-gradient(
-    120deg,
-    hsl(var(--hue), 100%, var(--gradient-luma-1)),
-    hsl(var(--hue), 100%, var(--gradient-luma-2))
-  );
 }
 
 @media (prefers-color-scheme: dark) {
   [color]:not([color="standard"]).subtle-background {
-    --gradient-luma-1: 2%;
+    --luma: var(--subtle-luma-dark);
-    --gradient-luma-2: 6%;
   }
 }
 
@@ -84,6 +80,9 @@
 
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
+
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 
 [color="yellow"] {
@@ -92,8 +91,11 @@
   --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"] {
@@ -104,6 +106,9 @@
 
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 0%;
+
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 
 [color="lightblue"] {
@@ -114,6 +119,9 @@
 
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 0%;
+
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 
 [color="blue"] {
@@ -124,6 +132,9 @@
 
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
+
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }
 
 [color="purple"] {
@@ -134,4 +145,7 @@
 
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
+
+  --subtle-luma: 95%;
+  --subtle-luma-dark: 5%;
 }

src/index.tsx

@@ -36,6 +36,13 @@ const chatListViewModel = new ChatListViewModel(
 );
 
 // view
+chatListViewModel.selectedChat.subscribe(() => {
+  document.body.toggleAttribute(
+    "showing-chat",
+    chatListViewModel.selectedChat.value != undefined
+  );
+});
+
 document.body.append(<div id="background"></div>);
 document
   .querySelector("main")!