feat: Tuned light theme colors

Divelix · May 14, 2024 · 891d7e1 · 891d7e1
1 parent e11e62d
commit 891d7e1
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;