Rework colors variables to use primary/secondary and make them config…

…urable
l3mpire · Oct 17, 2022 · 26db8ea · 26db8ea
1 parent 8bee421
commit 26db8ea
Show file tree

Hide file tree

Showing 22 changed files with 132 additions and 44 deletions.
diff --git a/app/_settings.json b/app/_settings.json
@@ -8,7 +8,9 @@
       "gods": [],
       "production": true,
       "staging": false,
-      "enableLogClient": false
+      "enableLogClient": false,
+      "primaryColor": "#A5E6BA",
+      "secondaryColor": "#13C4A3"
     },
 
     "debug": false,

diff --git a/app/settings-dev.json b/app/settings-dev.json
@@ -8,7 +8,9 @@
       "gods": [],
       "production": false,
       "staging": false,
-      "enableLogClient": false
+      "enableLogClient": false,
+      "primaryColor": "#A5E6BA",
+      "secondaryColor": "#13C4A3"
     },
 
     "debug": false,

diff --git a/core/client/_variables.scss b/core/client/_variables.scss
@@ -1,5 +1,27 @@
-$primary-color: #E8C97A;
-$secondary-color: #3B3A4F;
+:root {
+  --edit-border-size: 1rem;
+  --edit-border-radius: 1rem;
+  --primary-color: #A5E6BA;
+  --secondary-color: #13C4A3;
+
+  // We split the HSL (Hue Saturarion Lightness) value to play with th lightness color
+  // #A5E6BA converted to hsl(139, 57%, 77%);
+  --primary-color-hs: 139, 57%; 
+  --primary-color-l: 77%; 
+  // #13C4A3 converted to hsl(169, 82%, 82%);
+  --secondary-color-hs: 169, 82%; 
+  --secondary-color-l: 82%; 
+
+  // And now if we want our color lighter, we increase the lightness value BUT our value shouldn't be more than 100% or it will be black.
+  --primary-color-lighten-20: hsl(var(--primary-color-hs), calc(var(--primary-color-l) + 20%));
+
+  // Or darker, we decrease the lightness value
+  --secondary-color-darken-5: hsl(var(--secondary-color-hs), calc(var(--secondary-color-l) - 5%));
+  --secondary-color-darken-10: hsl(var(--secondary-color-hs), calc(var(--secondary-color-l) - 10%));
+  --secondary-color-darken-15: hsl(var(--secondary-color-hs), calc(var(--secondary-color-l) - 15%));
+  --secondary-color-darken-20: hsl(var(--secondary-color-hs), calc(var(--secondary-color-l) - 20%));
+}
+
 $text-color: #D17851;
 $lem-border: rgba(0, 38, 255, 0.08);
 $primary-color-transparent-1: rgba(59, 58, 79, 0.4);
@@ -12,6 +34,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 +45,12 @@ $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;
 $new-yellow: #E7DFC6;
 $new-red: #C73E1D;
 $new-dark-primary: #201d2c;
@@ -46,6 +67,8 @@ $breakpoints: (
 
 @mixin media-max($_key) {
   @media screen and (max-width: map-get($breakpoints, $_key)) {
-    & { @content; }
+    & {
+      @content;
+    }
   }
 }
diff --git a/core/client/helpers.js b/core/client/helpers.js
@@ -303,19 +303,61 @@ const vectorToTextDirection = vector => {
   return undefined;
 };
 
+const getHslFromHex = H => {
+  // Convert hex to RGB first
+  let r = 0; let g = 0; let b = 0;
+
+  if (H.length === 4) {
+    r = `0x${H[1]}${H[1]}`;
+    g = `0x${H[2]}${H[2]}`;
+    b = `0x${H[3]}${H[3]}`;
+  } else if (H.length === 7) {
+    r = `0x${H[1]}${H[2]}`;
+    g = `0x${H[3]}${H[4]}`;
+    b = `0x${H[5]}${H[6]}`;
+  }
+  // Then to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const cmin = Math.min(r, g, b);
+  const cmax = Math.max(r, g, b);
+  const delta = cmax - cmin;
+  let h = 0;
+  let s = 0;
+  let l = 0;
+
+  if (delta === 0) h = 0;
+  else if (cmax === r) h = ((g - b) / delta) % 6;
+  else if (cmax === g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+
+  h = Math.round(h * 60);
+
+  if (h < 0) h += 360;
+
+  l = (cmax + cmin) / 2;
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return { h, s, l };
+};
+
 export {
   allowPhaserMouseInputs,
   canAnswerCall,
   clamp,
-  guestSkin,
-  formatURLs,
   formatURL,
+  formatURLs,
   generateEntityThumbnail,
+  getHslFromHex,
+  guestSkin,
   meteorCallWithPromise,
   nearestDuration,
   replaceTextVars,
   setReaction,
-  toggleUIInputs,
   textDirectionToVector,
+  toggleUIInputs,
   vectorToTextDirection,
 };
diff --git a/core/client/lemverse.js b/core/client/lemverse.js
@@ -2,7 +2,7 @@ import hotkeys from 'hotkeys-js';
 import Phaser from 'phaser';
 import audioManager from './audio-manager';
 import meetingRoom from './meeting-room';
-import { setReaction } from './helpers';
+import { setReaction, getHslFromHex } from './helpers';
 import { guestAllowed, permissionTypes } from '../lib/misc';
 import initSentryClient from './sentry';
 
@@ -60,6 +60,23 @@ const extractLevelIdFromURL = () => {
   return `lvl_${levelId}`;
 };
 
+const initAppColor = () => {
+  const { primaryColor } = Meteor.settings.public.lp;
+  const { secondaryColor } = Meteor.settings.public.lp;
+  const rootStyle = document.querySelector(':root').style;
+
+  rootStyle.setProperty('--primary-color', primaryColor);
+  rootStyle.setProperty('--secondary-color', secondaryColor);
+
+  const primaryHSL = getHslFromHex(primaryColor);
+  const secondaryHSL = getHslFromHex(secondaryColor);
+
+  rootStyle.setProperty('--primary-color-hs', `${primaryHSL.h}, ${primaryHSL.s}%`);
+  rootStyle.setProperty('--primary-color-l', `${primaryHSL.l}%`);
+  rootStyle.setProperty('--secondary-color-hs', `${secondaryHSL.h}, ${secondaryHSL.s}%`);
+  rootStyle.setProperty('--secondary-color-l', `${secondaryHSL.l}%`);
+};
+
 Template.lemverse.onCreated(function () {
   Session.set('editor', 0);
   Session.set('sceneWorldReady', false);
@@ -75,6 +92,8 @@ Template.lemverse.onCreated(function () {
     peer.destroy();
   });
 
+  initAppColor();
+
   const extractedLevelId = extractLevelIdFromURL();
   if (extractedLevelId) Meteor.call('teleportUserInLevel', extractedLevelId);
 

diff --git 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: var(--secondary-color-darken-15);
 
     &:hover {
-      background-color: darken($light-green, 5%);
+      background-color: var(--secondary-color-darken-5);
       color: #fff;
     }
   }
@@ -85,7 +85,7 @@
   outline: none;
 
   &:focus {
-    border: 1px solid $new-green;
+    border: 1px solid var(--primary-color);
   }
 
   &[type="range"] {

diff --git 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: var(--secondary-color);
     }
 
     .character-body-part-container {

diff --git 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: var(--secondary-color);
           }
         }
       }

diff --git 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: var(--secondary-color);
 
           &:hover {
-            background-color: darken($light-green, 5%);
+            background-color: var(--secondary-color-darken-5);
           }
         }
       }

diff --git 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 var(--secondary-color);
   }
 
   &::before {

diff --git 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(var(--primary-color), 0.5);
 
       svg {
         margin: 0.3rem;
         height: 30px;
         width: 30px;
-        fill: $new-green;
+        fill: var(--primary-color);
       }
 
       &:hover,
       &.selected {
-        background-color: $new-green;
+        background-color: var(--primary-color);
 
         svg {
           fill: $new-dark-secondary;

diff --git a/core/client/ui/settings.scss b/core/client/ui/settings.scss
@@ -88,13 +88,13 @@ div.settings {
 
         &.selected {
           button {
-            background-color: #A5E6BA;
+            background-color: var(--primary-color);
             color: #211d2c;
           }
 
           &:hover {
             button {
-              background-color: $new-green;
+              background-color: var(--primary-color);
             }
           }
         }

diff --git a/core/client/ui/team-settings-members.scss b/core/client/ui/team-settings-members.scss
@@ -29,10 +29,10 @@
 
     .js-selectable {
       &.selected {
-        background-color: rgba($light-green, 0.35);
+        background-color: rgba(var(--secondary-color), 0.35);
 
         &:hover {
-          background-color: rgba($light-green, 0.5);
+          background-color: rgba(var(--secondary-color), 0.5);
         }
       }
     }

diff --git 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
@@ -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, var(--secondary-color-darken-15) 0%, var(--secondary-color-darken-15) 50%, darken($light-red, 15%) 50%, darken($light-red, 15%) 100%);
+      background: -webkit-linear-gradient(0deg, var(--secondary-color-darken-15) 0%, var(--secondary-color-darken-15) 50%, darken($light-red, 15%) 50%, darken($light-red, 15%) 100%);
+      background: -moz-linear-gradient(0deg, var(--secondary-color-darken-15) 0%, var(--secondary-color-darken-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
@@ -47,10 +47,10 @@
       }
 
       &.selected {
-        background-color: rgba($light-green, 0.35);
+        background-color: rgba(var(--secondary-color), 0.35);
 
         &:hover {
-          background-color: rgba($light-green, 0.5);
+          background-color: rgba(var(--secondary-color), 0.5);
         }
       }
 

diff --git 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: var(--primary-color);
         }
 
         @media (hover: hover) {
           &:hover {
-            background-color: lighten($new-green, 20%);
+            background-color: var(--primary-color-lighten-20);
           }
         }
 

diff --git 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: var(--secondary-color-darken-10);
       }
     }
 

diff --git 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: var(--secondary-color);
 
         &:hover {
-          background-color: darken($light-green, 10%);
+          background-color: var(--secondary-color-darken-10);
         }
       }
 
@@ -67,10 +67,10 @@
       }
 
       &.js-channel-mute {
-        background-color: $light-green;
+        background-color: var(--secondary-color);
 
         &:hover {
-          background-color: darken($light-green, 10%);
+          background-color: var(--secondary-color-darken-10)
         }
       }