From b4df5148ee853d46056d41785318ff256f1f00b7 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 23 Aug 2022 14:48:24 +1000 Subject: [PATCH] refactor: converted sass colors for global.scss and other related sasss files removed unused grey colors --- stylesheets/_global.scss | 18 +++++++++--------- stylesheets/_index.scss | 2 +- stylesheets/_lightbox.scss | 2 +- stylesheets/_modules.scss | 2 +- stylesheets/_quote.scss | 2 +- stylesheets/_theme_dark.scss | 12 ++++++------ stylesheets/_variables.scss | 13 ------------- ts/themes/SessionTheme.tsx | 12 ++++++++++++ 8 files changed, 31 insertions(+), 32 deletions(-) diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 6e39e09cc..f43c5a2ca 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -28,7 +28,7 @@ body { border: solid 2px var(--color-text-opposite); &:hover { - background: $color-light-45; + background: var(--color-light-gray-color); } } ::-webkit-scrollbar-track { @@ -73,12 +73,12 @@ button.grey { margin: 1em auto; padding: 1em; font-family: inherit; - color: $grey; - background: $grey_l; - box-shadow: 0 0 10px -5px rgba($grey, 0.5); + color: var(--color-gray-color); + background: var(--color-lightest-gray-color); + box-shadow: 0 0 10px -5px rgba(var(--color-gray-color), 0.5); &:hover { - box-shadow: 0 0 10px -3px rgba($grey, 0.7); + box-shadow: 0 0 10px -3px rgba(var(--color-gray-color), 0.7); } &[disabled='disabled'] { @@ -119,7 +119,7 @@ a { z-index: 100; // what's the right color? - background-color: $blue_l; + background-color: var(--color-light-blue-color); color: black; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); @@ -166,7 +166,7 @@ $loading-height: 16px; width: $loading-height; border-radius: 2 * $loading-height; border: solid 3px; - border-color: $blue_l $blue_l $grey_l $grey_l !important; + border-color: var(--color-light-blue-color) var(--color-light-blue-color) var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important; animation: rotate 1s linear infinite; } @@ -185,7 +185,7 @@ $loading-height: 16px; width: 22px; height: 22px; padding: 3px; - background: $grey; + background: var(--color-gray-color); &:before { content: ''; @@ -238,7 +238,7 @@ $loading-height: 16px; .dot { width: 14px; height: 14px; - border: 3px solid $color-white; + border: 3px solid white; border-radius: 50%; float: left; margin: 0 6px; diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index d3d3a53d9..1544d29db 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -34,7 +34,7 @@ .message { font-style: italic; - color: $grey; + color: var(--color-gray-color); font-size: 12px; margin-bottom: 16px; } diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss index 9ac1f5914..0e454af01 100644 --- a/stylesheets/_lightbox.scss +++ b/stylesheets/_lightbox.scss @@ -33,7 +33,7 @@ } &:hover { - background: $grey; + background: var(--color-gray-color); } &.save { diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c747f792d..046ab75c0 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -615,7 +615,7 @@ align-items: center; flex-grow: 1; font-size: 28px; - color: $color-light-45; + color: var(--color-light-gray-color); } // Module: Conversation List Item diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index 1c05a339b..816803839 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -161,7 +161,7 @@ width: 100%; height: 100%; cursor: pointer; - @include color-svg('../images/x.svg', $grey); + @include color-svg('../images/x.svg', var(--color-gray-color)); } .module-quote__icon-container { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 3791e1fdb..345b6435f 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -39,12 +39,12 @@ button.grey { border: solid 1px #ccc; - color: $grey; - background: $grey_l; - box-shadow: 0 0 10px -5px rgba($grey, 0.5); + color: var(--color-gray-color); + background: var(--color-lightest-gray-color); + box-shadow: 0 0 10px -5px rgba(var(--color-gray-color), 0.5); &:hover { - box-shadow: 0 0 10px -3px rgba($grey, 0.7); + box-shadow: 0 0 10px -3px rgba(var(--color-gray-color), 0.7); } } @@ -52,7 +52,7 @@ position: relative; &::before { border: solid 3px; - border-color: $blue_l $blue_l $grey_l $grey_l !important; + border-color: var(--color-light-blue-color) var(--color-light-blue-color) var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important; } } @@ -192,7 +192,7 @@ } .module-contact-detail__additional-contact__type { - color: $color-light-45; + color: var(--color-light-gray-color); } // Module: Contact List Item diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index ce82c3227..849173bb9 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -7,14 +7,11 @@ $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-02: #f8f9f9; $color-gray-05: #eeefef; -$color-gray-15: #d5d6d6; $color-gray-25: #bbbdbe; $color-gray-45: #898a8c; $color-gray-60: #6b6d70; $color-gray-75: #3d3e44; -$color-gray-85: #23252a; $color-gray-90: #17191d; $color-gray-95: #0f1012; $color-black: #000000; @@ -32,7 +29,6 @@ $color-light-02: #f9fafa; $color-light-10: #eeefef; $color-light-20: #c1c5cd; $color-light-35: #a4a6a9; -$color-light-45: #8b8e91; $color-light-60: #62656a; $color-light-90: #070c14; @@ -57,16 +53,7 @@ $color-black-06: rgba($color-black, 0.6); // Old colors -$blue_l: #a2d2f4; $blue: #2090ea; -$grey_l: #f3f3f3; -$grey_l1: #bdbdbd; -$grey_l1_5: #e6e6e6; -$grey_l2: #d9d9d9; // ~ Equivalent to darken($grey_l, 10%), unreliably compiles -$grey_l3: darken($grey_l, 20%); -$grey_l4: darken($grey_l, 40%); -$grey: #616161; -$grey_d: #454545; // A few layout variables used cross-file diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 78871b4c7..03742c3d0 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -14,6 +14,10 @@ const borderDarkThemeColor = '#ffffff0F'; // THEME INDEPEDENT COLORS const sessionBlack = '#282829'; const avatarBorderColor = '#00000059'; +const grayColor = '#616161'; +const lightGrayColor = '#8b8e91'; +const lightestGrayColor = '#f3f3f3'; +const lightBlueColor = '#a2d2f4'; // DARK COLORS const darkColorAccent = accentDarkTheme; @@ -83,6 +87,10 @@ export const switchHtmlToDarkTheme = () => { ); document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack); document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor); + document.documentElement.style.setProperty('--color-gray-color', grayColor); + document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor); + 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 @@ -232,6 +240,10 @@ 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-gray-color', grayColor); + document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor); + 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