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

refactor: started converting sass colors in _modules.scss

Browse Source 
updated sass colors found here in related files, moved theme independant colors
pull/2521/head
William Grant 3 years ago
parent 07c00463f1
commit 4e1eb1861b
8 changed files with 70 additions and 77 deletions
Show Stats Download Patch File Download Diff File

38
stylesheets/_modules.scss
Unescape Escape View File

@ -42,7 +42,7 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
bottom: 4px; bottom: 4px;
@include color-svg('../images/error.svg', $session-color-danger); @include color-svg('../images/error.svg', var(--color-destructive));
} }
.module-message__error--outgoing { .module-message__error--outgoing {
@ -104,7 +104,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: clip; text-overflow: clip;
color: $color-gray-90; color: var(--color-darker-gray-color);
} }
.module-message__generic-attachment__text { .module-message__generic-attachment__text {
@ -115,7 +115,7 @@
} }
.module-message__generic-attachment__file-name { .module-message__generic-attachment__file-name {
color: $color-gray-90; color: var(--color-darker-gray-color);
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
font-weight: 300; font-weight: 300;
@ -151,11 +151,11 @@
.module-message__link-preview__content { .module-message__link-preview__content {
padding: 8px; padding: 8px;
background-color: $color-white; background-color: var(--color-white-color);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
border: 1px solid $color-black-015; border: 1px solid var(--color-lighter-black-color);
} }
.module-message__link-preview__image_container { .module-message__link-preview__image_container {
@ -208,7 +208,7 @@
} }
.module-message__link-preview__title { .module-message__link-preview__title {
color: $color-gray-90; color: var(--color-darker-gray-color);
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 300;
letter-spacing: 0.15px; letter-spacing: 0.15px;
@ -393,8 +393,8 @@
.module-message-detail__delete-button { .module-message-detail__delete-button {
@include button-reset; @include button-reset;
background-color: $session-color-danger; background-color: var(--color-destructive);
color: $color-white; color: var(--color-white-color);
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border-radius: 5px; border-radius: 5px;
border: solid 1px $color-light-35; border: solid 1px $color-light-35;
@ -421,7 +421,7 @@
} }
.module-message-detail__contact__error { .module-message-detail__contact__error {
color: $session-color-danger; color: var(--color-destructive);
font-weight: 300; font-weight: 300;
} }
@ -584,7 +584,7 @@
width: 42px; width: 42px;
height: 42px; height: 42px;
background-color: $color-white; background-color: var(--color-white-color);
border-radius: 21px; border-radius: 21px;
} }
@ -642,7 +642,7 @@
} }
.module-conversation-list-item__unread-count { .module-conversation-list-item__unread-count {
color: $color-white; color: var(--color-white-color);
background-color: $color-loki-green; background-color: $color-loki-green;
text-align: center; text-align: center;
@ -807,7 +807,7 @@
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
background-color: $color-black-015; background-color: var(--color-lighter-black-color);
} }
.module-image__image { .module-image__image {
@ -842,7 +842,7 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
background-color: $color-white; background-color: var(--color-white-color);
border-radius: 24px; border-radius: 24px;
} }
@ -865,7 +865,7 @@
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
color: $color-white; color: var(--color-white-color);
font-size: 20px; font-size: 20px;
font-weight: normal; font-weight: normal;
@ -932,7 +932,7 @@
.module-typing-animation__dot--light { .module-typing-animation__dot--light {
border-radius: 50%; border-radius: 50%;
background-color: $color-white; background-color: var(--color-white-color);
height: 6px; height: 6px;
width: 6px; width: 6px;
@ -997,7 +997,7 @@
// Module: Attachments // Module: Attachments
.module-attachments { .module-attachments {
border-top: 1px solid $color-black-015; border-top: 1px solid var(--color-lighter-black-color);
} }
.module-attachments__header { .module-attachments__header {
@ -1038,7 +1038,7 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
border-radius: 4px; 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; background-color: $color-gray-05;
vertical-align: middle; vertical-align: middle;
} }
@ -1087,7 +1087,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: clip; text-overflow: clip;
color: $color-gray-90; color: var(--color-darker-gray-color);
} }
.module-staged-generic-attachment__filename { .module-staged-generic-attachment__filename {
@ -1239,7 +1239,7 @@
padding: var(--margins-sm); padding: var(--margins-sm);
} }
.module-staged-link-preview__title { .module-staged-link-preview__title {
color: $color-gray-90; color: var(--color-darker-gray-color);
font-weight: 300; font-weight: 300;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;

10
stylesheets/_quote.scss
Unescape Escape View File

@ -107,7 +107,7 @@
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: 18px; line-height: 18px;
font-weight: 300; font-weight: 300;
color: $color-gray-90; color: var(--color-darker-gray-color);
margin-bottom: 5px; margin-bottom: 5px;
overflow-x: hidden; overflow-x: hidden;
@ -137,7 +137,7 @@
.module-quote__primary__type-label { .module-quote__primary__type-label {
font-style: italic; font-style: italic;
color: $color-gray-90; color: var(--color-darker-gray-color);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: 18px; line-height: 18px;
} }
@ -199,7 +199,7 @@
height: 32px; height: 32px;
width: 32px; width: 32px;
border-radius: 50%; border-radius: 50%;
background-color: $color-white; background-color: var(--color-white-color);
} }
.module-quote__icon-container__icon { .module-quote__icon-container__icon {
@ -242,7 +242,7 @@
&-file__text { &-file__text {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: $color-gray-90; color: var(--color-darker-gray-color);
max-width: calc(100% - 26px); max-width: calc(100% - 26px);
overflow-x: hidden; overflow-x: hidden;
@ -272,7 +272,7 @@
&-warning__text { &-warning__text {
margin-inline-start: 6px; margin-inline-start: 6px;
color: $color-gray-90; color: var(--color-darker-gray-color);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: 18px; line-height: 18px;
} }

10
stylesheets/_session.scss
Unescape Escape View File

@ -141,10 +141,10 @@ textarea {
background-color: $session-color-success; background-color: $session-color-success;
} }
&.danger { &.danger {
background-color: $session-color-danger; background-color: var(--color-destructive);
} }
&.danger-alt { &.danger-alt {
background-color: $session-color-danger-alt; background-color: var(--color-destructive-alt);
} }
&.warning { &.warning {
background-color: $session-color-warning; background-color: $session-color-warning;
@ -169,7 +169,7 @@ textarea {
@include transparent-background($session-color-secondary); @include transparent-background($session-color-secondary);
} }
&.danger { &.danger {
@include transparent-background($session-color-danger); @include transparent-background(var(--color-destructive));
} }
&.warning { &.warning {
@include transparent-background($session-color-warning-alt); @include transparent-background($session-color-warning-alt);
@ -241,7 +241,7 @@ textarea {
background-color: $session-color-success; background-color: $session-color-success;
} }
&.danger { &.danger {
background-color: $session-color-danger; background-color: var(--color-destructive);
} }
&.warning { &.warning {
background-color: $session-color-warning-alt; background-color: $session-color-warning-alt;
@ -668,7 +668,7 @@ label {
} }
&.danger { &.danger {
color: $session-color-danger; color: var(--color-destructive);
} }
} }

2
stylesheets/_session_constants.scss
Unescape Escape View File

@ -125,8 +125,6 @@ $session-color-success: #35d388;
$session-color-error: #edd422; $session-color-error: #edd422;
$session-color-warning: $session-shade-17; $session-color-warning: $session-shade-17;
$session-color-warning-alt: #ff9d00; $session-color-warning-alt: #ff9d00;
$session-color-danger: #ff453a;
$session-color-danger-alt: #ff4538;
$session-color-primary: $session-shade-13; $session-color-primary: $session-shade-13;
$session-color-secondary: $session-shade-6; $session-color-secondary: $session-shade-6;

10
stylesheets/_session_conversation.scss
Unescape Escape View File

@ -20,15 +20,15 @@
@keyframes pulseLight { @keyframes pulseLight {
0% { 0% {
box-shadow: 0px 0px 0px 0px $session-color-danger-alt; box-shadow: 0px 0px 0px 0px var(--color-destructive-alt);
} }
50% { 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% { 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); height: var(--margins-sm);
width: var(--margins-sm); width: var(--margins-sm);
border-radius: 50%; border-radius: 50%;
background-color: $session-color-danger-alt; background-color: var(--color-destructive-alt);
margin: 0 var(--margins-sm); margin: 0 var(--margins-sm);
@include pulse-color($session-color-danger-alt, 1s, infinite); @include pulse-color(var(--color-destructive-alt), 1s, infinite);
} }
} }
} }

22
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -119,7 +119,7 @@
// Module: Message // Module: Message
.module-message__error { .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 { .module-message__img-border-overlay {
@ -152,11 +152,11 @@
} }
.module-message__broken-image--incoming { .module-message__broken-image--incoming {
color: $color-white; color: var(--color-white-color);
} }
.module-message__video-overlay__circle { .module-message__video-overlay__circle {
background-color: $color-white; background-color: var(--color-white-color);
} }
.module-message__video-overlay__play-icon { .module-message__video-overlay__play-icon {
@ -184,7 +184,7 @@
.module-contact-detail__send-message { .module-contact-detail__send-message {
background-color: $blue; background-color: $blue;
color: $color-white; color: var(--color-white-color);
} }
.module-contact-detail__additional-contact { .module-contact-detail__additional-contact {
@ -204,14 +204,14 @@
// Module: Message Detail // Module: Message Detail
.module-message-detail__delete-button { .module-message-detail__delete-button {
background-color: $session-color-danger; background-color: var(--color-destructive);
color: $color-white; color: var(--color-white-color);
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border: solid 1px $color-light-35; border: solid 1px $color-light-35;
} }
.module-message-detail__contact__error { .module-message-detail__contact__error {
color: $session-color-danger; color: var(--color-destructive);
} }
// Module: Media Gallery // Module: Media Gallery
@ -264,7 +264,7 @@
} }
.module-conversation-list-item__unread-count { .module-conversation-list-item__unread-count {
color: $color-white; color: var(--color-white-color);
background-color: $color-loki-green; background-color: $color-loki-green;
box-shadow: 0px 0px 0px 1px $color-dark-85; box-shadow: 0px 0px 0px 1px $color-dark-85;
} }
@ -316,11 +316,11 @@
// Module: Typing Animation // Module: Typing Animation
.module-typing-animation__dot { .module-typing-animation__dot {
background-color: $color-white; background-color: var(--color-white-color);
} }
.module-typing-animation__dot--light { .module-typing-animation__dot--light {
background-color: $color-white; background-color: var(--color-white-color);
} }
// Module: Attachments // Module: Attachments
@ -350,7 +350,7 @@
} }
.module-staged-generic-attachment__icon__extension { .module-staged-generic-attachment__icon__extension {
color: $color-gray-90; color: var(--color-darker-gray-color);
} }
// Module: Staged Placeholder Attachment // Module: Staged Placeholder Attachment

21
stylesheets/_variables.scss
Unescape Escape View File

@ -5,25 +5,23 @@ $color-loki-green: #3bd110;
$color-loki-green-dark: #32b10e; $color-loki-green-dark: #32b10e;
$color-loki-green-gradient: linear-gradient(to right, rgb(120, 190, 32) 0%, rgb(0, 133, 34) 100%); $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-05: #eeefef;
$color-gray-25: #bbbdbe; $color-gray-25: #bbbdbe;
$color-gray-45: #898a8c; $color-gray-45: #898a8c;
$color-gray-60: #6b6d70; $color-gray-60: #6b6d70;
$color-gray-75: #3d3e44; $color-gray-75: #3d3e44;
$color-gray-90: #17191d;
$color-gray-95: #0f1012; $color-gray-95: #0f1012;
$color-black: #000000; $color-black: #000000;
$color-white-015: rgba($color-white, 0.15); $color-white-015: rgba(var(--color-white-color), 0.15);
$color-white-02: rgba($color-white, 0.2); $color-white-02: rgba(var(--color-white-color), 0.2);
$color-white-04: rgba($color-white, 0.4); $color-white-04: rgba(var(--color-white-color), 0.4);
$color-white-05: rgba($color-white, 0.5); $color-white-05: rgba(var(--color-white-color), 0.5);
$color-white-06: rgba($color-white, 0.6); $color-white-06: rgba(var(--color-white-color), 0.6);
$color-white-07: rgba($color-white, 0.7); $color-white-07: rgba(var(--color-white-color), 0.7);
$color-white-075: rgba($color-white, 0.75); $color-white-075: rgba(var(--color-white-color), 0.75);
$color-white-08: rgba($color-white, 0.8); $color-white-08: rgba(var(--color-white-color), 0.8);
$color-white-085: rgba($color-white, 0.85); $color-white-085: rgba(var(--color-white-color), 0.85);
$color-light-02: #f9fafa; $color-light-02: #f9fafa;
$color-light-10: #eeefef; $color-light-10: #eeefef;
$color-light-20: #c1c5cd; $color-light-20: #c1c5cd;
@ -44,7 +42,6 @@ $color-black-005: rgba($color-black, 0.05);
$color-black-008-no-tranparency: #ededed; $color-black-008-no-tranparency: #ededed;
$color-black-016-no-tranparency: #d9d9d9; $color-black-016-no-tranparency: #d9d9d9;
$color-black-012: rgba($color-black, 0.12); $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-04: rgba($color-black, 0.4);
$color-black-06: rgba($color-black, 0.6); $color-black-06: rgba($color-black, 0.6);

34
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -6,6 +6,7 @@ const white = '#ffffff';
const black = '#000000'; const black = '#000000';
const warning = '#e7b100'; const warning = '#e7b100';
const destructive = '#ff453a'; const destructive = '#ff453a';
const destructiveAlt = '#ff4538';
const accentLightTheme = '#00e97b'; const accentLightTheme = '#00e97b';
const accentDarkTheme = '#00f782'; const accentDarkTheme = '#00f782';
const borderLightThemeColor = '#f1f1f1'; const borderLightThemeColor = '#f1f1f1';
@ -28,6 +29,7 @@ const grayColor = '#616161';
const lightGrayColor = '#8b8e91'; const lightGrayColor = '#8b8e91';
const lighterGrayColor = '#e9e9e9'; const lighterGrayColor = '#e9e9e9';
const lightestGrayColor = '#f3f3f3'; const lightestGrayColor = '#f3f3f3';
const darkerGrayColor = '#17191d';
// DARK COLORS // DARK COLORS
const darkColorAccent = accentDarkTheme; const darkColorAccent = accentDarkTheme;
@ -96,15 +98,6 @@ export const switchHtmlToDarkTheme = () => {
darkColorSentMessageBg darkColorSentMessageBg
); );
document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack); 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( document.documentElement.style.setProperty(
'--color-clickable-hovered', '--color-clickable-hovered',
darkColorClickableHovered darkColorClickableHovered
@ -253,14 +246,6 @@ export const switchHtmlToLightTheme = () => {
); );
// TODO: This might be wrong. Didn't merge correctly. // TODO: This might be wrong. Didn't merge correctly.
document.documentElement.style.setProperty('--color-sent-message-text', black); 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( document.documentElement.style.setProperty(
'--color-clickable-hovered', '--color-clickable-hovered',
lightColorClickableHovered lightColorClickableHovered
@ -383,8 +368,21 @@ export const SessionGlobalStyles = createGlobalStyle`
--search-input-height: 34px; --search-input-height: 34px;
/* COLORS NOT CHANGING BETWEEN THEMES */ /* 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-warning: ${warning};
--color-destructive: ${destructive}; --color-destructive: ${destructive};
--color-destructive-alt: ${destructiveAlt};
/* COLORS */ /* COLORS */
--color-accent: ${lightColorAccent}; --color-accent: ${lightColorAccent};
--color-accent-button: ${lightColorAccentButton}; --color-accent-button: ${lightColorAccentButton};
@ -421,7 +419,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--color-background-primary: ${lightBackgroundPrimary}; --color-background-primary: ${lightBackgroundPrimary};
--color-button-green: ${lightButtonGreen}; --color-button-green: ${lightButtonGreen};
--color-modal-background: ${lightModalBackground}; --color-modal-background: ${lightModalBackground};
--color-avatar-border-color: ${avatarBorderColor};
}; };
`; `;

Write Preview
Loading…
Cancel
Save