add animations

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%;
-  --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);
   }
 }
 
@@ -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")!