From 891d7e106df7ca63ab1e70877397a59920841c8c Mon Sep 17 00:00:00 2001
From: Sergei Sergienko <divelix1@gmail.com>
Date: Tue, 14 May 2024 21:35:24 +0300
Subject: [PATCH] feat: Tuned light theme colors

---
 src/assets/base.css             | 19 +++++++++++--------
 src/assets/main.css             |  2 ++
 src/components/CoordControl.vue |  4 ++++
 src/components/Help.vue         |  1 +
 src/components/Vis3D.vue        |  2 +-
 src/components/VisQuat.vue      |  2 +-
 6 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 162db49..fb2e706 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,6 +1,7 @@
 :root {
   --c-light-0: #ffffff;
   --c-light-1: #eeeeee;
+  --c-light-11: #d8d8d8;
   --c-light-2: #aaaaaa;
   --c-light-3: #888888;
   --c-light-4: #777777;
@@ -24,7 +25,7 @@
   --c-y-t: #00ff0077;
   --c-z-t: #0000ff77;
 
-  --quat-bg-alpha: 0.3;
+  --quat-bg-alpha: 0.5;
   --c-bg-quat-x: rgba(255, 0, 0, var(--quat-bg-alpha));
   --c-bg-quat-y: rgba(0, 255, 0, var(--quat-bg-alpha));
   --c-bg-quat-z: rgba(0, 0, 255, var(--quat-bg-alpha));
@@ -37,29 +38,31 @@
 :root {
   --c-text-main: var(--c-dark-t);
   --c-text-accent: var(--c-dark-0);
+  --c-text-help: var(--c-dark-2);
 
-  --c-bg-main: var(--c-light-1);
-  --c-bg-accent: var(--c-light-2);
+  --c-bg-main: var(--c-light-2);
+  --c-bg-accent: var(--c-light-11);
   --c-bg-canvas: var(--c-light-2);
 
   --c-selection: var(--c-light-1);
   --c-bg-tooltip: var(--c-light-0);
   --c-text-tooltip: var(--c-dark-0);
 
-  --c-btn-border: var(--c-light-t);
-  --c-btn-bg: var(--c-light-3);
-  --c-btn-bg-hover: var(--c-light-4);
-  --c-btn-bg-active: var(--c-light-5);
+  --c-btn-border: var(--c-text-main);
+  --c-btn-bg: var(--c-light-11);
+  --c-btn-bg-hover: var(--c-light-2);
+  --c-btn-bg-active: var(--c-light-3);
   --c-table-bg: var(--c-light-3);
   --c-table-header: var(--c-light-4);
   --c-table-border: var(--c-light-t);
-  --c-svg: var(--c-dark-t);
+  --c-svg: var(--c-text-main);
   --c-svg-hover: var(--c-dark-0);
 }
 
 .dark {
   --c-text-main: var(--c-light-t);
   --c-text-accent: var(--c-light-0);
+  --c-text-help: var(--c-light-t);
 
   --c-bg-main: var(--c-dark-1);
   --c-bg-accent: var(--c-dark-2);
diff --git a/src/assets/main.css b/src/assets/main.css
index ed49dfe..d93b6dc 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -8,10 +8,12 @@
 }
 
 h1 {
+  color: var(--c-text-accent);
   user-select: none;
 }
 
 h2 {
+  color: var(--c-text-accent);
   user-select: none;
 }
 
diff --git a/src/components/CoordControl.vue b/src/components/CoordControl.vue
index 245c22e..6dc12fe 100644
--- a/src/components/CoordControl.vue
+++ b/src/components/CoordControl.vue
@@ -82,6 +82,10 @@ button {
     border-radius: 0% 0% 50% 50%;
 }
 
+.label span {
+    color: var(--c-text-accent);
+}
+
 .x .label {
     background-color: var(--c-x-t);
 }
diff --git a/src/components/Help.vue b/src/components/Help.vue
index f37c450..3f034ad 100644
--- a/src/components/Help.vue
+++ b/src/components/Help.vue
@@ -119,6 +119,7 @@ button:active {
 table {
     border-collapse: collapse;
     line-height: 1;
+    color: var(--c-text-help)
 }
 
 .header-row {
diff --git a/src/components/Vis3D.vue b/src/components/Vis3D.vue
index 5ce373d..c3a7bf2 100644
--- a/src/components/Vis3D.vue
+++ b/src/components/Vis3D.vue
@@ -15,7 +15,7 @@ const CYL_RADIUS = 0.05
 const CYL_LENGTH = 1
 const CYL_RESOLUTION = 10
 const DARK_COLOR = 0x222222
-const LIGHT_COLOR = 0xaaaaaa
+const LIGHT_COLOR = 0xd8d8d8
 
 // Reactive stuff
 const isEdit: ShallowRef<Boolean> = inject("isEdit")!
diff --git a/src/components/VisQuat.vue b/src/components/VisQuat.vue
index 750a75e..02d6ebf 100644
--- a/src/components/VisQuat.vue
+++ b/src/components/VisQuat.vue
@@ -220,7 +220,7 @@ textarea {
     border-color: var(--c-btn-border);
     border-radius: 10px;
     color: var(--c-text-accent);
-    width: 200px;
+    width: 400px;
     height: 120px;
     padding: 10px;
     margin: 10px;