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

10
stylesheets/_quote.scss
Unescape Escape View File

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

10
stylesheets/_session.scss
Unescape Escape View File

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

2
stylesheets/_session_constants.scss
Unescape Escape View File

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

10
stylesheets/_session_conversation.scss
Unescape Escape View File

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

22
stylesheets/_theme_dark.scss
Unescape Escape View File

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

21
stylesheets/_variables.scss
Unescape Escape View File

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

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

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

Write Preview
Loading…
Cancel
Save