oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: converted sass colors for global.scss and other related sasss files 

removed unused grey colors
This commit is contained in:
William Grant 2022-08-23 14:48:24 +10:00
parent 407e9fa7da
commit b4df5148ee
8 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
stylesheets/_global.scss
View File

@ -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;

2
stylesheets/_index.scss
View File

@ -34,7 +34,7 @@
.message {
font-style: italic;
color: $grey;
color: var(--color-gray-color);
font-size: 12px;
margin-bottom: 16px;
}

2
stylesheets/_lightbox.scss
View File

@ -33,7 +33,7 @@
}
&:hover {
background: $grey;
background: var(--color-gray-color);
}
&.save {

2
stylesheets/_modules.scss
View File

@ -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

2
stylesheets/_quote.scss
View File

@ -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 {

12
stylesheets/_theme_dark.scss
View File

@ -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

13
stylesheets/_variables.scss
View File

@ -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

12
ts/themes/SessionTheme.tsx
View File

@ -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