From 4e1eb1861b87e0bb333f90af5e4b9e0b17bc448b Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 23 Aug 2022 16:25:08 +1000
Subject: [PATCH] refactor: started converting sass colors in _modules.scss

updated sass colors found here in related files, moved theme independant colors
---
 stylesheets/_modules.scss              | 38 +++++++++++++-------------
 stylesheets/_quote.scss                | 10 +++----
 stylesheets/_session.scss              | 10 +++----
 stylesheets/_session_constants.scss    |  2 --
 stylesheets/_session_conversation.scss | 10 +++----
 stylesheets/_theme_dark.scss           | 22 +++++++--------
 stylesheets/_variables.scss            | 21 ++++++--------
 ts/themes/SessionTheme.tsx             | 34 +++++++++++------------
 8 files changed, 70 insertions(+), 77 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 36d140456..55d06d4ea 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -42,7 +42,7 @@
   display: inline-block;
   position: absolute;
   bottom: 4px;
-  @include color-svg('../images/error.svg', $session-color-danger);
+  @include color-svg('../images/error.svg', var(--color-destructive));
 }
 
 .module-message__error--outgoing {
@@ -104,7 +104,7 @@
   white-space: nowrap;
   text-overflow: clip;
 
-  color: $color-gray-90;
+  color: var(--color-darker-gray-color);
 }
 
 .module-message__generic-attachment__text {
@@ -115,7 +115,7 @@
 }
 
 .module-message__generic-attachment__file-name {
-  color: $color-gray-90;
+  color: var(--color-darker-gray-color);
   font-size: 14px;
   line-height: 18px;
   font-weight: 300;
@@ -151,11 +151,11 @@
 
 .module-message__link-preview__content {
   padding: 8px;
-  background-color: $color-white;
+  background-color: var(--color-white-color);
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  border: 1px solid $color-black-015;
+  border: 1px solid var(--color-lighter-black-color);
 }
 
 .module-message__link-preview__image_container {
@@ -208,7 +208,7 @@
 }
 
 .module-message__link-preview__title {
-  color: $color-gray-90;
+  color: var(--color-darker-gray-color);
   font-size: 16px;
   font-weight: 300;
   letter-spacing: 0.15px;
@@ -393,8 +393,8 @@
 .module-message-detail__delete-button {
   @include button-reset;
 
-  background-color: $session-color-danger;
-  color: $color-white;
+  background-color: var(--color-destructive);
+  color: var(--color-white-color);
   box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
   border-radius: 5px;
   border: solid 1px $color-light-35;
@@ -421,7 +421,7 @@
 }
 
 .module-message-detail__contact__error {
-  color: $session-color-danger;
+  color: var(--color-destructive);
   font-weight: 300;
 }
 
@@ -584,7 +584,7 @@
 
   width: 42px;
   height: 42px;
-  background-color: $color-white;
+  background-color: var(--color-white-color);
   border-radius: 21px;
 }
 
@@ -642,7 +642,7 @@
 }
 
 .module-conversation-list-item__unread-count {
-  color: $color-white;
+  color: var(--color-white-color);
   background-color: $color-loki-green;
   text-align: center;
 
@@ -807,7 +807,7 @@
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  background-color: $color-black-015;
+  background-color: var(--color-lighter-black-color);
 }
 
 .module-image__image {
@@ -842,7 +842,7 @@
 
   width: 48px;
   height: 48px;
-  background-color: $color-white;
+  background-color: var(--color-white-color);
   border-radius: 24px;
 }
 
@@ -865,7 +865,7 @@
   bottom: 0;
   z-index: 2;
 
-  color: $color-white;
+  color: var(--color-white-color);
 
   font-size: 20px;
   font-weight: normal;
@@ -932,7 +932,7 @@
 
 .module-typing-animation__dot--light {
   border-radius: 50%;
-  background-color: $color-white;
+  background-color: var(--color-white-color);
 
   height: 6px;
   width: 6px;
@@ -997,7 +997,7 @@
 // Module: Attachments
 
 .module-attachments {
-  border-top: 1px solid $color-black-015;
+  border-top: 1px solid var(--color-lighter-black-color);
 }
 
 .module-attachments__header {
@@ -1038,7 +1038,7 @@
   display: inline-block;
   position: relative;
   border-radius: 4px;
-  box-shadow: inset 0px 0px 0px 1px $color-black-015;
+  box-shadow: inset 0px 0px 0px 1px var(--color-lighter-black-color);
   background-color: $color-gray-05;
   vertical-align: middle;
 }
@@ -1087,7 +1087,7 @@
   white-space: nowrap;
   text-overflow: clip;
 
-  color: $color-gray-90;
+  color: var(--color-darker-gray-color);
 }
 
 .module-staged-generic-attachment__filename {
@@ -1239,7 +1239,7 @@
   padding: var(--margins-sm);
 }
 .module-staged-link-preview__title {
-  color: $color-gray-90;
+  color: var(--color-darker-gray-color);
   font-weight: 300;
   font-size: 14px;
   line-height: 18px;
diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss
index 6a280ec14..37212dc9e 100644
--- a/stylesheets/_quote.scss
+++ b/stylesheets/_quote.scss
@@ -107,7 +107,7 @@
   font-size: var(--font-size-sm);
   line-height: 18px;
   font-weight: 300;
-  color: $color-gray-90;
+  color: var(--color-darker-gray-color);
   margin-bottom: 5px;
 
   overflow-x: hidden;
@@ -137,7 +137,7 @@
 
 .module-quote__primary__type-label {
   font-style: italic;
-  color: $color-gray-90;
+  color: var(--color-darker-gray-color);
   font-size: var(--font-size-sm);
   line-height: 18px;
 }
@@ -199,7 +199,7 @@
   height: 32px;
   width: 32px;
   border-radius: 50%;
-  background-color: $color-white;
+  background-color: var(--color-white-color);
 }
 
 .module-quote__icon-container__icon {
@@ -242,7 +242,7 @@
   &-file__text {
     font-size: 14px;
     line-height: 18px;
-    color: $color-gray-90;
+    color: var(--color-darker-gray-color);
 
     max-width: calc(100% - 26px);
     overflow-x: hidden;
@@ -272,7 +272,7 @@
 
   &-warning__text {
     margin-inline-start: 6px;
-    color: $color-gray-90;
+    color: var(--color-darker-gray-color);
     font-size: var(--font-size-sm);
     line-height: 18px;
   }
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 0abcac115..4489a8c4f 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -141,10 +141,10 @@ textarea {
       background-color: $session-color-success;
     }
     &.danger {
-      background-color: $session-color-danger;
+      background-color: var(--color-destructive);
     }
     &.danger-alt {
-      background-color: $session-color-danger-alt;
+      background-color: var(--color-destructive-alt);
     }
     &.warning {
       background-color: $session-color-warning;
@@ -169,7 +169,7 @@ textarea {
       @include transparent-background($session-color-secondary);
     }
     &.danger {
-      @include transparent-background($session-color-danger);
+      @include transparent-background(var(--color-destructive));
     }
     &.warning {
       @include transparent-background($session-color-warning-alt);
@@ -241,7 +241,7 @@ textarea {
     background-color: $session-color-success;
   }
   &.danger {
-    background-color: $session-color-danger;
+    background-color: var(--color-destructive);
   }
   &.warning {
     background-color: $session-color-warning-alt;
@@ -668,7 +668,7 @@ label {
     }
 
     &.danger {
-      color: $session-color-danger;
+      color: var(--color-destructive);
     }
   }
 
diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index e8261ab6c..8f1a733f1 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -125,8 +125,6 @@ $session-color-success: #35d388;
 $session-color-error: #edd422;
 $session-color-warning: $session-shade-17;
 $session-color-warning-alt: #ff9d00;
-$session-color-danger: #ff453a;
-$session-color-danger-alt: #ff4538;
 $session-color-primary: $session-shade-13;
 $session-color-secondary: $session-shade-6;
 
diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index fc52b4656..394ce2796 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -20,15 +20,15 @@
 
 @keyframes pulseLight {
   0% {
-    box-shadow: 0px 0px 0px 0px $session-color-danger-alt;
+    box-shadow: 0px 0px 0px 0px var(--color-destructive-alt);
   }
 
   50% {
-    box-shadow: 0px 0px 12px 0px rgba($session-color-danger-alt, 1);
+    box-shadow: 0px 0px 12px 0px rgba(var(--color-destructive-alt), 1);
   }
 
   100% {
-    box-shadow: 0px 0px 0px 0px rgba($session-color-danger-alt, 1);
+    box-shadow: 0px 0px 0px 0px rgba(var(--color-destructive-alt), 1);
   }
 }
 
@@ -424,10 +424,10 @@
       height: var(--margins-sm);
       width: var(--margins-sm);
       border-radius: 50%;
-      background-color: $session-color-danger-alt;
+      background-color: var(--color-destructive-alt);
       margin: 0 var(--margins-sm);
 
-      @include pulse-color($session-color-danger-alt, 1s, infinite);
+      @include pulse-color(var(--color-destructive-alt), 1s, infinite);
     }
   }
 }
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 345b6435f..355e3b6c8 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -119,7 +119,7 @@
   // Module: Message
 
   .module-message__error {
-    @include color-svg('../images/error.svg', $session-color-danger);
+    @include color-svg('../images/error.svg', var(--color-destructive));
   }
 
   .module-message__img-border-overlay {
@@ -152,11 +152,11 @@
   }
 
   .module-message__broken-image--incoming {
-    color: $color-white;
+    color: var(--color-white-color);
   }
 
   .module-message__video-overlay__circle {
-    background-color: $color-white;
+    background-color: var(--color-white-color);
   }
 
   .module-message__video-overlay__play-icon {
@@ -184,7 +184,7 @@
 
   .module-contact-detail__send-message {
     background-color: $blue;
-    color: $color-white;
+    color: var(--color-white-color);
   }
 
   .module-contact-detail__additional-contact {
@@ -204,14 +204,14 @@
   // Module: Message Detail
 
   .module-message-detail__delete-button {
-    background-color: $session-color-danger;
-    color: $color-white;
+    background-color: var(--color-destructive);
+    color: var(--color-white-color);
     box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
     border: solid 1px $color-light-35;
   }
 
   .module-message-detail__contact__error {
-    color: $session-color-danger;
+    color: var(--color-destructive);
   }
 
   // Module: Media Gallery
@@ -264,7 +264,7 @@
   }
 
   .module-conversation-list-item__unread-count {
-    color: $color-white;
+    color: var(--color-white-color);
     background-color: $color-loki-green;
     box-shadow: 0px 0px 0px 1px $color-dark-85;
   }
@@ -316,11 +316,11 @@
   // Module: Typing Animation
 
   .module-typing-animation__dot {
-    background-color: $color-white;
+    background-color: var(--color-white-color);
   }
 
   .module-typing-animation__dot--light {
-    background-color: $color-white;
+    background-color: var(--color-white-color);
   }
 
   // Module: Attachments
@@ -350,7 +350,7 @@
   }
 
   .module-staged-generic-attachment__icon__extension {
-    color: $color-gray-90;
+    color: var(--color-darker-gray-color);
   }
 
   // Module: Staged Placeholder Attachment
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 7114c70c9..331ba42ec 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -5,25 +5,23 @@ $color-loki-green: #3bd110;
 $color-loki-green-dark: #32b10e;
 $color-loki-green-gradient: linear-gradient(to right, rgb(120, 190, 32) 0%, rgb(0, 133, 34) 100%);
 
-$color-white: #ffffff;
 $color-gray-05: #eeefef;
 $color-gray-25: #bbbdbe;
 $color-gray-45: #898a8c;
 $color-gray-60: #6b6d70;
 $color-gray-75: #3d3e44;
-$color-gray-90: #17191d;
 $color-gray-95: #0f1012;
 $color-black: #000000;
 
-$color-white-015: rgba($color-white, 0.15);
-$color-white-02: rgba($color-white, 0.2);
-$color-white-04: rgba($color-white, 0.4);
-$color-white-05: rgba($color-white, 0.5);
-$color-white-06: rgba($color-white, 0.6);
-$color-white-07: rgba($color-white, 0.7);
-$color-white-075: rgba($color-white, 0.75);
-$color-white-08: rgba($color-white, 0.8);
-$color-white-085: rgba($color-white, 0.85);
+$color-white-015: rgba(var(--color-white-color), 0.15);
+$color-white-02: rgba(var(--color-white-color), 0.2);
+$color-white-04: rgba(var(--color-white-color), 0.4);
+$color-white-05: rgba(var(--color-white-color), 0.5);
+$color-white-06: rgba(var(--color-white-color), 0.6);
+$color-white-07: rgba(var(--color-white-color), 0.7);
+$color-white-075: rgba(var(--color-white-color), 0.75);
+$color-white-08: rgba(var(--color-white-color), 0.8);
+$color-white-085: rgba(var(--color-white-color), 0.85);
 $color-light-02: #f9fafa;
 $color-light-10: #eeefef;
 $color-light-20: #c1c5cd;
@@ -44,7 +42,6 @@ $color-black-005: rgba($color-black, 0.05);
 $color-black-008-no-tranparency: #ededed;
 $color-black-016-no-tranparency: #d9d9d9;
 $color-black-012: rgba($color-black, 0.12);
-$color-black-015: rgba($color-black, 0.15);
 $color-black-04: rgba($color-black, 0.4);
 $color-black-06: rgba($color-black, 0.6);
 
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index ccad4d8de..c5de48eb2 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/ts/themes/SessionTheme.tsx
@@ -6,6 +6,7 @@ const white = '#ffffff';
 const black = '#000000';
 const warning = '#e7b100';
 const destructive = '#ff453a';
+const destructiveAlt = '#ff4538';
 const accentLightTheme = '#00e97b';
 const accentDarkTheme = '#00f782';
 const borderLightThemeColor = '#f1f1f1';
@@ -28,6 +29,7 @@ const grayColor = '#616161';
 const lightGrayColor = '#8b8e91';
 const lighterGrayColor = '#e9e9e9';
 const lightestGrayColor = '#f3f3f3';
+const darkerGrayColor = '#17191d';
 
 // DARK COLORS
 const darkColorAccent = accentDarkTheme;
@@ -96,15 +98,6 @@ export const switchHtmlToDarkTheme = () => {
     darkColorSentMessageBg
   );
   document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack);
-  document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
-  document.documentElement.style.setProperty('--color-light-black-color', `rgba(${black}, 0.2)`);
-  document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor);
-
-  document.documentElement.style.setProperty('--color-gray-color', grayColor);
-  document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
-  document.documentElement.style.setProperty('--color-lighter-gray-color', lighterGrayColor);
-  document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);
-  document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor);
   document.documentElement.style.setProperty(
     '--color-clickable-hovered',
     darkColorClickableHovered
@@ -253,14 +246,6 @@ export const switchHtmlToLightTheme = () => {
   );
   // TODO: This might be wrong. Didn't merge correctly.
   document.documentElement.style.setProperty('--color-sent-message-text', black);
-  document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
-  document.documentElement.style.setProperty('--color-light-black-color', `rgba(${black}, 0.2)`);
-  document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor);
-  document.documentElement.style.setProperty('--color-gray-color', grayColor);
-  document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor);
-  document.documentElement.style.setProperty('--color-lighter-gray-color', lighterGrayColor);
-  document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);
-  document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor);
   document.documentElement.style.setProperty(
     '--color-clickable-hovered',
     lightColorClickableHovered
@@ -383,8 +368,21 @@ export const SessionGlobalStyles = createGlobalStyle`
     --search-input-height: 34px;
 
     /* COLORS NOT CHANGING BETWEEN THEMES */
+    --color-light-black-color: ${`rgba(${black}, 0.2)`};
+    --color-lighter-black-color: ${`rgba(${black}, 0.15)`};
+    --color-session-green-color: ${sessionGreenColor};
+
+    --color-white-color: ${white};
+    --color-gray-color: ${grayColor};
+    --color-light-gray-color: ${lightGrayColor};
+    --color-lighter-gray-color: ${lighterGrayColor};
+    --color-lightest-gray-color: ${lightestGrayColor};
+    --color-darker-gray-color: ${darkerGrayColor};
+    --color-light-blue-color: ${lightBlueColor};
+
     --color-warning:  ${warning};
     --color-destructive:  ${destructive};
+    --color-destructive-alt:  ${destructiveAlt};
     /* COLORS */
     --color-accent: ${lightColorAccent};
     --color-accent-button:  ${lightColorAccentButton};
@@ -421,7 +419,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     --color-background-primary: ${lightBackgroundPrimary};
     --color-button-green: ${lightButtonGreen};
     --color-modal-background: ${lightModalBackground};
-
+    --color-avatar-border-color: ${avatarBorderColor};
 
   };
 `;