improve colors

dist/index.css

@@ -62,8 +62,8 @@ main {
     background-image:
       linear-gradient(
         120deg,
-        hsla(210, 100%, 50%, 50%),
+        hsla(210, 100%, 50%, 60%),
-        hsla(210, 100%, 50%, 25%));
+        hsla(210, 100%, 50%, 30%));
   }
   #background::before {
     top: -130%;
@@ -91,7 +91,15 @@ main {
 
 /* src/colors.css */
 [color]:not([color=standard]) {
-  --primary: hsl(var(--hue), 100%, 80%);
+  --primary: hsl(var(--hue), 100%, var(--accent-luma));
+  --link: hsl(var(--hue), 100%, var(--accent-luma));
+}
+@media (prefers-color-scheme: dark) {
+  [color]:not([color=standard]) {
+    --accent-luma: var(--accent-luma-dark);
+  }
+}
+[color]:not([color=standard]).tile {
   --gradient-luma-1: 70%;
   --gradient-luma-2: 90%;
   --hover-luma: 75%;
@@ -108,7 +116,7 @@ main {
   --text-normal: hsl(var(--hue), 100%, var(--text-luma));
 }
 @media (prefers-color-scheme: dark) {
-  [color]:not([color=standard]) {
+  [color]:not([color=standard]).tile {
     --gradient-luma-1: 20%;
     --gradient-luma-2: 15%;
     --hover-luma: 25%;
@@ -120,23 +128,39 @@ main {
   color: white;
   background-color: var(--primary);
 }
+[color]:not([color=standard])[selected].fill-color {
+  color: var(--primary);
+  background-color: var(--surface);
+}
 [color=coral] {
   --hue: 20;
+  --accent-luma: 50%;
+  --accent-luma-dark: 70%;
 }
 [color=yellow] {
   --hue: 50;
+  --accent-luma: 50%;
+  --accent-luma-dark: 60%;
 }
 [color=mint] {
   --hue: 150;
+  --accent-luma: 40%;
+  --accent-luma-dark: 60%;
 }
 [color=lightblue] {
   --hue: 180;
+  --accent-luma: 40%;
+  --accent-luma-dark: 60%;
 }
 [color=blue] {
   --hue: 220;
+  --accent-luma: 50%;
+  --accent-luma-dark: 70%;
 }
 [color=purple] {
   --hue: 280;
+  --accent-luma: 50%;
+  --accent-luma-dark: 70%;
 }
 
 /* src/View/chatPage.css */
@@ -265,8 +289,10 @@ main {
   }
 }
 @media (min-width: 1200px) {
-  #home-page > div {
+  #home-page #overview-section,
-    gap: 8rem;
+  #home-page #chat-section {
+    padding-left: 3rem;
+    padding-right: 3rem;
   }
   #home-page #chat-grid {
     margin-top: 3rem;

dist/index.js

@@ -838,7 +838,7 @@
           return mainContent.value = MessagePage(chatViewModel);
       }
     });
-    return /* @__PURE__ */ createElement("article", { id: "chat-page" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("article", { id: "chat-page", "set:color": chatViewModel.color }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { id: "ribbon" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
         class: "ghost",

src/View/chatPage.tsx

@@ -22,7 +22,7 @@ export function ChatPage(chatViewModel: ChatViewModel) {
   });
 
   return (
-    <article id="chat-page">
+    <article id="chat-page" set:color={chatViewModel.color}>
       <div>
         <div id="ribbon">
           <span>

src/View/homePage.css

@@ -51,8 +51,10 @@
 }
 
 @media (min-width: 1200px) {
-  #home-page > div {
+  #home-page #overview-section,
-    gap: 8rem;
+  #home-page #chat-section {
+    padding-left: 3rem;
+    padding-right: 3rem;
   }
 
   #home-page #chat-grid {

src/base.css

@@ -74,8 +74,8 @@ main {
   #background {
     background-image: linear-gradient(
       120deg,
-      hsla(210, 100%, 50%, 50%),
+      hsla(210, 100%, 50%, 60%),
-      hsla(210, 100%, 50%, 25%)
+      hsla(210, 100%, 50%, 30%)
     );
   }
 

src/colors.css

@@ -1,6 +1,17 @@
+/* basic */
 [color]:not([color="standard"]) {
-  --primary: hsl(var(--hue), 100%, 80%);
+  --primary: hsl(var(--hue), 100%, var(--accent-luma));
+  --link: hsl(var(--hue), 100%, var(--accent-luma));
+}
 
+@media (prefers-color-scheme: dark) {
+  [color]:not([color="standard"]) {
+    --accent-luma: var(--accent-luma-dark);
+  }
+}
+
+/* tile */
+[color]:not([color="standard"]).tile {
   --gradient-luma-1: 70%;
   --gradient-luma-2: 90%;
 
@@ -21,7 +32,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  [color]:not([color="standard"]) {
+  [color]:not([color="standard"]).tile {
     --gradient-luma-1: 20%;
     --gradient-luma-2: 15%;
 
@@ -32,31 +43,50 @@
   }
 }
 
+/* fill */
 [color]:not([color="standard"]).fill-color {
   color: white;
   background-color: var(--primary);
 }
 
+[color]:not([color="standard"])[selected].fill-color {
+  color: var(--primary);
+  background-color: var(--surface);
+}
+
+/* definitions */
 [color="coral"] {
   --hue: 20;
+  --accent-luma: 50%;
+  --accent-luma-dark: 70%;
 }
 
 [color="yellow"] {
   --hue: 50;
+  --accent-luma: 50%;
+  --accent-luma-dark: 60%;
 }
 
 [color="mint"] {
   --hue: 150;
+  --accent-luma: 40%;
+  --accent-luma-dark: 60%;
 }
 
 [color="lightblue"] {
   --hue: 180;
+  --accent-luma: 40%;
+  --accent-luma-dark: 60%;
 }
 
 [color="blue"] {
   --hue: 220;
+  --accent-luma: 50%;
+  --accent-luma-dark: 70%;
 }
 
 [color="purple"] {
   --hue: 280;
+  --accent-luma: 50%;
+  --accent-luma-dark: 70%;
 }