add colors

2024-07-20 18:10:42 +02:00
parent e3c902f60e
commit 3e570afd05
11 changed files with 287 additions and 28 deletions
@@ -89,6 +89,56 @@ main {
  }
 }

+/* src/colors.css */
+[color]:not([color=standard]) {
+  --primary: hsl(var(--hue), 100%, 80%);
+  --gradient-luma-1: 70%;
+  --gradient-luma-2: 90%;
+  --hover-luma: 75%;
+  --active-luma: 80%;
+  --text-luma: 20%;
+  --surface:
+    linear-gradient(
+      
+      120deg,
+      hsl(var(--hue), 100%, var(--gradient-luma-1)),
+      hsl(var(--hue), 100%, var(--gradient-luma-2)) );
+  --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
+  --surface-active: hsl(var(--hue), 100%, var(--active-luma));
+  --text-normal: hsl(var(--hue), 100%, var(--text-luma));
+}
+@media (prefers-color-scheme: dark) {
+  [color]:not([color=standard]) {
+    --gradient-luma-1: 20%;
+    --gradient-luma-2: 15%;
+    --hover-luma: 25%;
+    --active-luma: 30%;
+    --text-luma: 90%;
+  }
+}
+[color]:not([color=standard]).fill-color {
+  color: white;
+  background-color: var(--primary);
+}
+[color=coral] {
+  --hue: 20;
+}
+[color=yellow] {
+  --hue: 50;
+}
+[color=mint] {
+  --hue: 150;
+}
+[color=lightblue] {
+  --hue: 180;
+}
+[color=blue] {
+  --hue: 220;
+}
+[color=purple] {
+  --hue: 280;
+}
+
 /* src/View/chatPage.css */
 #chat-page-wrapper {
  display: none;