From 9f1f4b82632a1e2231a3a63fbf6deaf7d33520c7 Mon Sep 17 00:00:00 2001
From: Alim TUNC <alim@refty.co>
Date: Fri, 30 Sep 2022 16:30:37 +0200
Subject: [PATCH] Rework colors variables to use primary/secondary and make
 them configurable

---
 .gitignore                                          |  3 +++
 core/client/_variables.scss                         | 13 ++++++++-----
 core/client/ui/_forms.scss                          |  6 +++---
 core/client/ui/avatar-viewer.scss                   |  2 +-
 core/client/ui/editor-characters.scss               |  2 +-
 core/client/ui/radial-menu.scss                     |  4 ++--
 core/client/ui/remote-stream.scss                   |  2 +-
 core/client/ui/settings-character.scss              |  6 +++---
 core/client/ui/settings.scss                        |  2 +-
 core/client/ui/toolboxes/edit-toolbox.scss          |  2 +-
 core/client/ui/toolboxes/entity-editor.scss         |  6 +++---
 core/client/ui/user-list-selection.scss             |  4 ++--
 core/client/ui/user-panel.scss                      |  4 ++--
 core/modules/console/client/console.scss            |  2 +-
 core/modules/messages/client/messages-list.scss     |  8 ++++----
 core/modules/messages/client/messages-reaction.scss |  4 ++--
 core/modules/quests/client/quest-entity.scss        |  2 +-
 core/modules/quests/client/quest-toolbar.scss       |  4 ++--
 18 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/.gitignore b/.gitignore
index 61cea2020..40df5b745 100644
--- a/.gitignore
+++ b/.gitignore
@@ -108,3 +108,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# scss
+core/client/_theme.scss
diff --git a/core/client/_variables.scss b/core/client/_variables.scss
index 2e9ff5c1c..e8007b061 100644
--- a/core/client/_variables.scss
+++ b/core/client/_variables.scss
@@ -1,5 +1,5 @@
-$primary-color: #E8C97A;
-$secondary-color: #3B3A4F;
+@import "_theme";
+
 $text-color: #D17851;
 $lem-border: rgba(0, 38, 255, 0.08);
 $primary-color-transparent-1: rgba(59, 58, 79, 0.4);
@@ -12,6 +12,7 @@ $lem-color-6: #3bbc84;
 $lem-color-7: #d14e53;
 $lem-color-8: #3c3c3c;
 $lem-color-9: #1d1d1d;
+$lem-color-10: #3B3A4F;
 
 // Shade of grey
 $gray100: #f0f7f8;
@@ -22,14 +23,14 @@ $gray500: #425a65;
 $main-color: #201d2c;
 $highlight-color: #b18800;
 $light-red: #EB584E;
-$light-green: #13C4A3;
 $light-blue: #4381C1;
 $light-yellow: #FFE19C;
 $light-orange: #FFBB04;
 $main-text-color: #eeebf1;
 $radius: 0.5rem;
 
-$new-green: #A5E6BA;
+$primary-color: $theme-primary-color;
+$light-primary-color: $theme-light-primary-color;
 $new-yellow: #E7DFC6;
 $new-red: #C73E1D;
 $new-dark-primary: #201d2c;
@@ -46,6 +47,8 @@ $breakpoints: (
 
 @mixin media-max($_key) {
   @media screen and (max-width: map-get($breakpoints, $_key)) {
-    & { @content; }
+    & {
+      @content;
+    }
   }
 }
diff --git a/core/client/ui/_forms.scss b/core/client/ui/_forms.scss
index f728ecb61..f137a7bbd 100644
--- a/core/client/ui/_forms.scss
+++ b/core/client/ui/_forms.scss
@@ -24,10 +24,10 @@
   }
 
   &.green {
-    background-color: darken($light-green, 15%);
+    background-color: darken($secondary-color, 15%);
 
     &:hover {
-      background-color: darken($light-green, 5%);
+      background-color: darken($secondary-color, 5%);
       color: #fff;
     }
   }
@@ -78,7 +78,7 @@
   outline: none;
 
   &:focus {
-    border: 1px solid $new-green;
+    border: 1px solid $primary-color;
   }
 
   &[type="range"] {
diff --git a/core/client/ui/avatar-viewer.scss b/core/client/ui/avatar-viewer.scss
index d40f31f9e..b9d2fd40a 100644
--- a/core/client/ui/avatar-viewer.scss
+++ b/core/client/ui/avatar-viewer.scss
@@ -62,7 +62,7 @@ $frame-height: 85px;
     }
 
     &.online::before {
-      background-color: $light-green;
+      background-color: $secondary-color;
     }
 
     .character-body-part-container {
diff --git a/core/client/ui/editor-characters.scss b/core/client/ui/editor-characters.scss
index 4a1eebbb5..031db613a 100644
--- a/core/client/ui/editor-characters.scss
+++ b/core/client/ui/editor-characters.scss
@@ -71,7 +71,7 @@
           cursor: pointer;
 
           &.selected {
-            background-color: $light-green;
+            background-color: $secondary-color;
           }
         }
       }
diff --git a/core/client/ui/radial-menu.scss b/core/client/ui/radial-menu.scss
index 83266ba87..d1ea313d4 100644
--- a/core/client/ui/radial-menu.scss
+++ b/core/client/ui/radial-menu.scss
@@ -147,10 +147,10 @@ $z-index: 4;
 
       &.on {
         button {
-          background-color: $light-green;
+          background-color: $secondary-color;
 
           &:hover {
-            background-color: darken($light-green, 5%);
+            background-color: darken($secondary-color, 5%);
           }
         }
       }
diff --git a/core/client/ui/remote-stream.scss b/core/client/ui/remote-stream.scss
index b0edc3896..8193b8294 100644
--- a/core/client/ui/remote-stream.scss
+++ b/core/client/ui/remote-stream.scss
@@ -38,7 +38,7 @@
   }
 
   &.talking {
-    border: 2px solid $light-green;
+    border: 2px solid $secondary-color;
   }
 
   &::before {
diff --git a/core/client/ui/settings-character.scss b/core/client/ui/settings-character.scss
index 523b742a2..ec18a18f0 100644
--- a/core/client/ui/settings-character.scss
+++ b/core/client/ui/settings-character.scss
@@ -43,18 +43,18 @@
       height: 45px;
       cursor: pointer;
       border-radius: 10px;
-      border: 1px solid rgba($new-green, 0.5);
+      border: 1px solid rgba($primary-color, 0.5);
 
       svg {
         margin: 0.3rem;
         height: 30px;
         width: 30px;
-        fill: $new-green;
+        fill: $primary-color;
       }
 
       &:hover,
       &.selected {
-        background-color: $new-green;
+        background-color: $primary-color;
 
         svg {
           fill: $new-dark-secondary;
diff --git a/core/client/ui/settings.scss b/core/client/ui/settings.scss
index 1d9561e68..24f27a80c 100644
--- a/core/client/ui/settings.scss
+++ b/core/client/ui/settings.scss
@@ -94,7 +94,7 @@ div.settings {
 
           &:hover {
             button {
-              background-color: $new-green;
+              background-color: $primary-color;
             }
           }
         }
diff --git a/core/client/ui/toolboxes/edit-toolbox.scss b/core/client/ui/toolboxes/edit-toolbox.scss
index 45bda8965..2c82cc4e2 100644
--- a/core/client/ui/toolboxes/edit-toolbox.scss
+++ b/core/client/ui/toolboxes/edit-toolbox.scss
@@ -18,7 +18,7 @@
   bottom: 0;
   width: 350px;
   height: 100%;
-  background-color: rgba($secondary-color, 0.95);
+  background-color: rgba($lem-color-10, 0.95);
   z-index: 100;
   display: flex;
   flex-direction: column;
diff --git a/core/client/ui/toolboxes/entity-editor.scss b/core/client/ui/toolboxes/entity-editor.scss
index f7547c045..adb99528a 100644
--- a/core/client/ui/toolboxes/entity-editor.scss
+++ b/core/client/ui/toolboxes/entity-editor.scss
@@ -20,9 +20,9 @@
       transition: margin-left .5s ease;
       width: calc(200% - 20px);
       height: 20px;
-      background: linear-gradient(0deg, darken($light-green, 15%) 0%, darken($light-green, 15%) 50%, darken($light-red, 15%) 50%, darken($light-red, 15%) 100%);
-      background: -webkit-linear-gradient(0deg, darken($light-green, 15%) 0%, darken($light-green, 15%) 50%, darken($light-red, 15%) 50%, darken($light-red, 15%) 100%);
-      background: -moz-linear-gradient(0deg, darken($light-green, 15%) 0%, darken($light-green, 15%) 50%, darken($light-red, 15%) 50%, #f00 100%);
+      background: linear-gradient(0deg, darken($secondary-color, 15%) 0%, darken($secondary-color, 15%) 50%, darken($light-red, 15%) 50%, darken($light-red, 15%) 100%);
+      background: -webkit-linear-gradient(0deg, darken($secondary-color, 15%) 0%, darken($secondary-color, 15%) 50%, darken($light-red, 15%) 50%, darken($light-red, 15%) 100%);
+      background: -moz-linear-gradient(0deg, darken($secondary-color, 15%) 0%, darken($secondary-color, 15%) 50%, darken($light-red, 15%) 50%, #f00 100%);
       border-radius: 10px;
 
       &.off {
diff --git a/core/client/ui/user-list-selection.scss b/core/client/ui/user-list-selection.scss
index 3699bf398..74af7c9a5 100644
--- a/core/client/ui/user-list-selection.scss
+++ b/core/client/ui/user-list-selection.scss
@@ -47,10 +47,10 @@
       }
 
       &.selected {
-        background-color: rgba($light-green, 0.35);
+        background-color: rgba($secondary-color, 0.35);
 
         &:hover {
-          background-color: rgba($light-green, 0.5);
+          background-color: rgba($secondary-color, 0.5);
         }
       }
 
diff --git a/core/client/ui/user-panel.scss b/core/client/ui/user-panel.scss
index 90d1a2c37..53e312dca 100644
--- a/core/client/ui/user-panel.scss
+++ b/core/client/ui/user-panel.scss
@@ -157,12 +157,12 @@
         }
 
         &.active {
-          background-color: $new-green;
+          background-color: $primary-color;
         }
 
         @media (hover: hover) {
           &:hover {
-            background-color: lighten($new-green, 20%);
+            background-color: lighten($primary-color, 20%);
           }
         }
 
diff --git a/core/modules/console/client/console.scss b/core/modules/console/client/console.scss
index c12a7828c..9cc638ac9 100644
--- a/core/modules/console/client/console.scss
+++ b/core/modules/console/client/console.scss
@@ -78,7 +78,7 @@ $button-text-color: white;
       }
 
       &.has-content {
-        background-color: darken($light-green, 10%);
+        background-color: darken($secondary-color, 10%);
       }
     }
 
diff --git a/core/modules/messages/client/messages-list.scss b/core/modules/messages/client/messages-list.scss
index 7f58b7c37..d6d74c733 100644
--- a/core/modules/messages/client/messages-list.scss
+++ b/core/modules/messages/client/messages-list.scss
@@ -51,10 +51,10 @@
       font-weight: bold;
 
       &.js-channel-subscribe {
-        background-color: $light-green;
+        background-color: $secondary-color;
 
         &:hover {
-          background-color: darken($light-green, 10%);
+          background-color: darken($secondary-color, 10%);
         }
       }
 
@@ -67,10 +67,10 @@
       }
 
       &.js-channel-mute {
-        background-color: $light-green;
+        background-color: $secondary-color;
 
         &:hover {
-          background-color: darken($light-green, 10%);
+          background-color: darken($secondary-color, 10%);
         }
       }
 
diff --git a/core/modules/messages/client/messages-reaction.scss b/core/modules/messages/client/messages-reaction.scss
index 115e86457..5da3862da 100644
--- a/core/modules/messages/client/messages-reaction.scss
+++ b/core/modules/messages/client/messages-reaction.scss
@@ -67,10 +67,10 @@ $z-index: 4;
 
       &.on {
         button {
-          background-color: $light-green;
+          background-color: $secondary-color;
 
           &:hover {
-            background-color: darken($light-green, 5%);
+            background-color: darken($secondary-color, 5%);
           }
         }
       }
diff --git a/core/modules/quests/client/quest-entity.scss b/core/modules/quests/client/quest-entity.scss
index 2cce428c4..8a51442bb 100644
--- a/core/modules/quests/client/quest-entity.scss
+++ b/core/modules/quests/client/quest-entity.scss
@@ -57,7 +57,7 @@
 
     .js-quest-subscribe {
       &.subscribe {
-        background-color: $light-green;
+        background-color: $secondary-color;
       }
 
       &.unsubscribe {
diff --git a/core/modules/quests/client/quest-toolbar.scss b/core/modules/quests/client/quest-toolbar.scss
index f5462f1b4..a43c158f2 100644
--- a/core/modules/quests/client/quest-toolbar.scss
+++ b/core/modules/quests/client/quest-toolbar.scss
@@ -76,12 +76,12 @@
       }
 
       &.js-quest-join {
-        background-color: $light-green;
+        background-color: $secondary-color;
         color: white;
         font-weight: bold;
 
         &:hover {
-          background-color: darken($light-green, 10%);
+          background-color: darken($secondary-color, 10%);
         }
       }