oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

refactor: finished converting sass colors in _modules.scss

Browse source 
consolidated some of the gray shades
This commit is contained in:
William Grant 2022-08-24 11:55:45 +10:00
parent 4e1eb1861b
commit 49df281454
6 changed files with 94 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
stylesheets/_modal.scss
View file

@ -108,18 +108,18 @@
// button { // button {
// float: right; // float: right;
// margin-inline-start: 10px; // margin-inline-start: 10px;
// background-color: $color-loki-green; // background-color: var(--color-session-green-color);
// border-radius: 100px; // border-radius: 100px;
// padding: 5px 15px; // padding: 5px 15px;
// border: 1px solid $color-loki-green; // border: 1px solid var(--color-session-green-color);
// color: white; // color: white;
// outline: none; // outline: none;
// user-select: none; // user-select: none;
// &:hover, // &:hover,
// &:disabled { // &:disabled {
// background-color: $color-loki-green-dark; // background-color: var(--color-session-green-color)-dark;
// border-color: $color-loki-green-dark; // border-color: var(--color-session-green-color)-dark;
// } // }
// &:disabled { // &:disabled {

64
stylesheets/_modules.scss
View file

@ -200,7 +200,7 @@
height: 32px; height: 32px;
width: 32px; width: 32px;
border-radius: 50%; border-radius: 50%;
background-color: $color-gray-05; background-color: var(--color-lighter-gray-color);
} }
.module-message__link-preview__text--with-icon { .module-message__link-preview__text--with-icon {
@ -222,7 +222,7 @@
.module-message__link-preview__location { .module-message__link-preview__location {
margin-top: 4px; margin-top: 4px;
color: $color-gray-60; color: var(--color-gray-color);
font-size: 12px; font-size: 12px;
height: 16px; height: 16px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
@ -255,7 +255,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
color: $color-gray-60; color: var(--color-gray-color);
} }
.module-contact-list-item--with-click-handler { .module-contact-list-item--with-click-handler {
@ -347,7 +347,7 @@
} }
.module-conversation-header__expiration__clock-icon { .module-conversation-header__expiration__clock-icon {
@include color-svg('../images/timer.svg', $color-gray-60); @include color-svg('../images/timer.svg', var(--color-gray-color));
height: 20px; height: 20px;
width: 20px; width: 20px;
display: inline-block; display: inline-block;
@ -397,7 +397,7 @@
color: var(--color-white-color); 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 var(--color-light-gray-color);
cursor: pointer; cursor: pointer;
margin: 1em auto; margin: 1em auto;
padding: 1em; padding: 1em;
@ -493,7 +493,7 @@
} }
.module-document-list-item--with-separator { .module-document-list-item--with-separator {
border-bottom: 1px solid $color-light-02; border-bottom: 1px solid var(--color-lightest-gray-color);
} }
.module-document-list-item__content { .module-document-list-item__content {
@ -510,7 +510,7 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
@include color-svg('../images/file.svg', $color-light-35); @include color-svg('../images/file.svg', var(--color-light-gray-color));
} }
.module-document-list-item__metadata { .module-document-list-item__metadata {
@ -546,7 +546,7 @@
height: 94px; height: 94px;
width: 94px; width: 94px;
cursor: pointer; cursor: pointer;
background-color: $color-light-10; background-color: var(--color-lighter-gray-color);
margin-inline-end: 4px; margin-inline-end: 4px;
margin-bottom: 4px; margin-bottom: 4px;
position: relative; position: relative;
@ -567,7 +567,7 @@
} }
.module-media-grid-item__icon-image { .module-media-grid-item__icon-image {
@include color-svg('../images/image.svg', $color-light-35); @include color-svg('../images/image.svg', var(--color-light-gray-color));
} }
.module-media-grid-item__image-container { .module-media-grid-item__image-container {
@ -596,15 +596,15 @@
height: 36px; height: 36px;
width: 36px; width: 36px;
@include color-svg('../images/play.svg', $color-loki-green); @include color-svg('../images/play.svg', var(--color-session-green-color));
} }
.module-media-grid-item__icon-video { .module-media-grid-item__icon-video {
@include color-svg('../images/movie.svg', $color-light-35); @include color-svg('../images/movie.svg', var(--color-light-gray-color));
} }
.module-media-grid-item__icon-generic { .module-media-grid-item__icon-generic {
@include color-svg('../images/file.svg', $color-light-35); @include color-svg('../images/file.svg', var(--color-light-gray-color));
} }
/* Module: Empty State*/ /* Module: Empty State*/
@ -633,7 +633,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $color-dark-70; background-color: var(--color-dark-gray-color);
} }
&--is-blocked { &--is-blocked {
@ -643,7 +643,7 @@
.module-conversation-list-item__unread-count { .module-conversation-list-item__unread-count {
color: var(--color-white-color); color: var(--color-white-color);
background-color: $color-loki-green; background-color: var(--color-session-green-color);
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
@ -663,7 +663,7 @@
line-height: 16px; line-height: 16px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 0px 0px 1px $color-dark-85; box-shadow: 0px 0px 0px 1px var(--color-darker-gray-color);
} }
.module-conversation-list-item__content { .module-conversation-list-item__content {
@ -704,7 +704,7 @@
.module-conversation-list-item__header__date--has-unread { .module-conversation-list-item__header__date--has-unread {
font-weight: 300; font-weight: 300;
color: $color-gray-05; color: var(--color-lighter-gray-color);
} }
.module-conversation-list-item__message { .module-conversation-list-item__message {
@ -720,7 +720,7 @@
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: 18px; line-height: 18px;
color: $color-gray-25; color: var(--color-light-gray-color);
height: 1.3em; height: 1.3em;
overflow: hidden; overflow: hidden;
@ -733,13 +733,13 @@
.module-conversation-list-item__message__text--has-unread { .module-conversation-list-item__message__text--has-unread {
font-weight: 400; font-weight: 400;
color: $color-gray-05; color: var(--color-lighter-gray-color);
} }
// Module: Main Header // Module: Main Header
.module-main-header__search__input { .module-main-header__search__input {
color: $color-dark-05; color: var(--color-lighter-gray-color);
background-color: $color-gray-95; background-color: $color-gray-95;
border: 1px solid $color-light-60; border: 1px solid $color-light-60;
padding: 0 26px 0 30px; padding: 0 26px 0 30px;
@ -756,12 +756,8 @@
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
&:focus {
outline: solid 1px $blue;
}
&::placeholder { &::placeholder {
color: $color-gray-45; color: var(--color-light-gray-color);
} }
} }
@ -854,7 +850,7 @@
height: 36px; height: 36px;
width: 36px; width: 36px;
@include color-svg('../images/play.svg', $color-loki-green); @include color-svg('../images/play.svg', var(--color-session-green-color));
} }
.module-image__text-container { .module-image__text-container {
@ -923,7 +919,7 @@
.module-typing-animation__dot { .module-typing-animation__dot {
border-radius: 50%; border-radius: 50%;
background-color: $color-gray-60; background-color: var(--color-gray-color);
height: 6px; height: 6px;
width: 6px; width: 6px;
@ -1015,7 +1011,7 @@
height: 20px; height: 20px;
z-index: 2; z-index: 2;
@include color-svg('../images/x-16.svg', $color-black); @include color-svg('../images/x-16.svg', var(--color-black-color));
} }
.module-attachments__rail { .module-attachments__rail {
@ -1039,7 +1035,7 @@
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px var(--color-lighter-black-color); box-shadow: inset 0px 0px 0px 1px var(--color-lighter-black-color);
background-color: $color-gray-05; background-color: var(--color-lighter-gray-color);
vertical-align: middle; vertical-align: middle;
} }
@ -1051,7 +1047,7 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
z-index: 2; z-index: 2;
@include color-svg('../images/x-16.svg', $color-black); @include color-svg('../images/x-16.svg', var(--color-black-color));
} }
.module-staged-generic-attachment__icon { .module-staged-generic-attachment__icon {
@ -1179,7 +1175,7 @@
.module-staged-placeholder-attachment { .module-staged-placeholder-attachment {
margin: 1px; margin: 1px;
border-radius: 4px; border-radius: 4px;
border: 1px solid $color-gray-25; border: 1px solid var(--color-light-gray-color);
height: 120px; height: 120px;
width: 120px; width: 120px;
display: inline-block; display: inline-block;
@ -1188,7 +1184,7 @@
position: relative; position: relative;
&:hover { &:hover {
background: $color-gray-05; background: var(--color-lighter-gray-color);
} }
} }
@ -1202,7 +1198,7 @@
height: 36px; height: 36px;
width: 36px; width: 36px;
@include color-svg('../images/plus-36.svg', $color-gray-45); @include color-svg('../images/plus-36.svg', var(--color-light-gray-color));
} }
// Module: Staged Link Preview // Module: Staged Link Preview
@ -1251,7 +1247,7 @@
} }
.module-staged-link-preview__location { .module-staged-link-preview__location {
margin-top: 4px; margin-top: 4px;
color: $color-gray-60; color: var(--color-gray-color);
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
height: 16px; height: 16px;
letter-spacing: 0.25px; letter-spacing: 0.25px;
@ -1266,7 +1262,7 @@
height: 16px; height: 16px;
width: 16px; width: 16px;
@include color-svg('../images/x-16.svg', $color-gray-60); @include color-svg('../images/x-16.svg', var(--color-gray-color));
} }
// Module: Left Pane // Module: Left Pane

28
stylesheets/_quote.scss
View file

@ -54,27 +54,27 @@
} }
.module-quote__icon-container__icon--file { .module-quote__icon-container__icon--file {
@include color-svg('../images/file.svg', $color-loki-green); @include color-svg('../images/file.svg', var(--color-session-green-color));
} }
.module-quote__icon-container__icon--image { .module-quote__icon-container__icon--image {
@include color-svg('../images/image.svg', $color-loki-green); @include color-svg('../images/image.svg', var(--color-session-green-color));
} }
.module-quote__icon-container__icon--microphone { .module-quote__icon-container__icon--microphone {
@include color-svg('../images/microphone.svg', $color-loki-green); @include color-svg('../images/microphone.svg', var(--color-session-green-color));
} }
.module-quote__icon-container__icon--play { .module-quote__icon-container__icon--play {
@include color-svg('../images/play.svg', $color-loki-green); @include color-svg('../images/play.svg', var(--color-session-green-color));
} }
.module-quote__icon-container__icon--movie { .module-quote__icon-container__icon--movie {
@include color-svg('../images/movie.svg', $color-loki-green); @include color-svg('../images/movie.svg', var(--color-session-green-color));
} }
.module-quote__generic-file__text { .module-quote__generic-file__text {
color: $color-dark-05; color: var(--color-lighter-gray-color);
} }
.module-quote__reference-warning { .module-quote__reference-warning {
background-color: $color-black-06; background-color: var(--color-black-color)-06;
} }
.module-quote__reference-warning__icon { .module-quote__reference-warning__icon {
@ -82,7 +82,7 @@
} }
.module-quote__reference-warning__text { .module-quote__reference-warning__text {
color: $color-dark-05; color: var(--color-lighter-gray-color);
} }
.module-quote-container { .module-quote-container {
@ -207,19 +207,19 @@
height: 24px; height: 24px;
&--file { &--file {
@include color-svg('../images/file.svg', $color-loki-green); @include color-svg('../images/file.svg', var(--color-session-green-color));
} }
&--image { &--image {
@include color-svg('../images/image.svg', $color-loki-green); @include color-svg('../images/image.svg', var(--color-session-green-color));
} }
&--microphone { &--microphone {
@include color-svg('../images/microphone.svg', $color-loki-green); @include color-svg('../images/microphone.svg', var(--color-session-green-color));
} }
&--play { &--play {
@include color-svg('../images/play.svg', $color-loki-green); @include color-svg('../images/play.svg', var(--color-session-green-color));
} }
&--movie { &--movie {
@include color-svg('../images/movie.svg', $color-loki-green); @include color-svg('../images/movie.svg', var(--color-session-green-color));
} }
} }
@ -267,7 +267,7 @@
&-warning__icon { &-warning__icon {
height: 16px; height: 16px;
width: 16px; width: 16px;
@include color-svg('../images/broken-link.svg', $color-gray-60); @include color-svg('../images/broken-link.svg', var(--color-gray-color));
} }
&-warning__text { &-warning__text {

76
stylesheets/_theme_dark.scss
View file

@ -5,9 +5,9 @@
&.modal { &.modal {
.content { .content {
textarea { textarea {
background-color: $color-dark-85; background-color: var(--color-darker-gray-color);
border: 1px solid $color-dark-60; border: 1px solid $color-dark-60;
color: $color-dark-05; color: var(--color-lighter-gray-color);
} }
} }
} }
@ -15,8 +15,8 @@
.result { .result {
.open { .open {
border: solid 1px $color-dark-60; border: solid 1px $color-dark-60;
background-color: $color-dark-85; background-color: var(--color-darker-gray-color);
color: $color-dark-05; color: var(--color-lighter-gray-color);
&:before { &:before {
@include header-icon-white('../images/open_link.svg'); @include header-icon-white('../images/open_link.svg');
@ -24,17 +24,17 @@
} }
.link { .link {
color: $color-dark-05; color: var(--color-lighter-gray-color);
border: solid 1px $color-dark-60; border: solid 1px $color-dark-60;
border-right: none; border-right: none;
background-color: $color-dark-85; background-color: var(--color-darker-gray-color);
} }
} }
} }
// _global // _global
.title-bar { .title-bar {
color: $color-dark-05; color: var(--color-lighter-gray-color);
} }
button.grey { button.grey {
@ -64,7 +64,7 @@
input.search { input.search {
border: 1px solid $color-light-60; border: 1px solid $color-light-60;
color: $color-dark-05; color: var(--color-lighter-gray-color);
background-color: $color-gray-95; background-color: $color-gray-95;
&:focus { &:focus {
@ -148,7 +148,7 @@
} }
.module-message__broken-image { .module-message__broken-image {
color: $color-dark-05; color: var(--color-lighter-gray-color);
} }
.module-message__broken-image--incoming { .module-message__broken-image--incoming {
@ -160,24 +160,24 @@
} }
.module-message__video-overlay__play-icon { .module-message__video-overlay__play-icon {
@include color-svg('../images/play.svg', $color-loki-green); @include color-svg('../images/play.svg', var(--color-session-green-color));
} }
.module-message__broken-video-screenshot { .module-message__broken-video-screenshot {
color: $color-dark-05; color: var(--color-lighter-gray-color);
} }
.module-message__link-preview__content { .module-message__link-preview__content {
background-color: $color-gray-95; background-color: $color-gray-95;
border: 1px solid $color-gray-60; border: 1px solid var(--color-gray-color);
} }
.module-message__link-preview__title { .module-message__link-preview__title {
color: $color-gray-05; color: var(--color-lighter-gray-color);
} }
.module-message__link-preview__location { .module-message__link-preview__location {
color: $color-gray-25; color: var(--color-light-gray-color);
} }
// Module: Contact Detail // Module: Contact Detail
@ -188,7 +188,7 @@
} }
.module-contact-detail__additional-contact { .module-contact-detail__additional-contact {
border-top: 1px solid $color-dark-70; border-top: 1px solid var(--color-dark-gray-color);
} }
.module-contact-detail__additional-contact__type { .module-contact-detail__additional-contact__type {
@ -207,7 +207,7 @@
background-color: var(--color-destructive); background-color: var(--color-destructive);
color: var(--color-white-color); 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 var(--color-light-gray-color);
} }
.module-message-detail__contact__error { .module-message-detail__contact__error {
@ -217,17 +217,17 @@
// Module: Media Gallery // Module: Media Gallery
.module-media-gallery__tab { .module-media-gallery__tab {
background-color: $color-dark-85; background-color: var(--color-darker-gray-color);
} }
.module-media-gallery__tab--active { .module-media-gallery__tab--active {
border-bottom: 2px solid $color-loki-green; border-bottom: 2px solid var(--color-session-green-color);
} }
// Module: Document List Item // Module: Document List Item
.module-document-list-item--with-separator { .module-document-list-item--with-separator {
border-bottom: 1px solid $color-dark-70; border-bottom: 1px solid var(--color-dark-gray-color);
} }
.module-document-list-item__icon { .module-document-list-item__icon {
@ -237,7 +237,7 @@
// Module: Media Grid Item // Module: Media Grid Item
.module-media-grid-item { .module-media-grid-item {
background-color: $color-dark-85; background-color: var(--color-darker-gray-color);
} }
.module-media-grid-item__icon-image { .module-media-grid-item__icon-image {
@ -260,29 +260,29 @@
// Module: Conversation List Item // Module: Conversation List Item
.module-conversation-list-item--is-selected { .module-conversation-list-item--is-selected {
background-color: $color-dark-70; background-color: var(--color-dark-gray-color);
} }
.module-conversation-list-item__unread-count { .module-conversation-list-item__unread-count {
color: var(--color-white-color); color: var(--color-white-color);
background-color: $color-loki-green; background-color: var(--color-session-green-color);
box-shadow: 0px 0px 0px 1px $color-dark-85; box-shadow: 0px 0px 0px 1px var(--color-darker-gray-color);
} }
.module-conversation-list-item__header__name { .module-conversation-list-item__header__name {
color: $color-gray-05; color: var(--color-lighter-gray-color);
} }
.module-conversation-list-item__header__date--has-unread { .module-conversation-list-item__header__date--has-unread {
color: $color-gray-05; color: var(--color-lighter-gray-color);
} }
.module-conversation-list-item__message__text { .module-conversation-list-item__message__text {
color: $color-gray-25; color: var(--color-light-gray-color);
} }
.module-conversation-list-item__message__text--has-unread { .module-conversation-list-item__message__text--has-unread {
color: $color-gray-05; color: var(--color-lighter-gray-color);
} }
// Module: Main Header // Module: Main Header
@ -291,10 +291,10 @@
background-color: $color-gray-95; background-color: $color-gray-95;
border-radius: 14px; border-radius: 14px;
border: solid 1px $color-gray-75; border: solid 1px $color-gray-75;
color: $color-gray-05; color: var(--color-lighter-gray-color);
&::placeholder { &::placeholder {
color: $color-gray-45; color: var(--color-light-gray-color);
} }
&:focus { &:focus {
@ -330,19 +330,19 @@
} }
.module-attachments__close-button { .module-attachments__close-button {
@include color-svg('../images/x-16.svg', $color-gray-45); @include color-svg('../images/x-16.svg', var(--color-light-gray-color));
} }
// Module: Staged Generic Attachment // Module: Staged Generic Attachment
.module-staged-generic-attachment { .module-staged-generic-attachment {
box-shadow: inset 0px 0px 0px 1px $color-gray-45; box-shadow: inset 0px 0px 0px 1px var(--color-light-gray-color);
background-color: $color-gray-75; background-color: $color-gray-75;
color: $color-dark-05; color: var(--color-lighter-gray-color);
} }
.module-staged-generic-attachment__close-button { .module-staged-generic-attachment__close-button {
@include color-svg('../images/x.svg', $color-gray-45); @include color-svg('../images/x.svg', var(--color-light-gray-color));
} }
.module-staged-generic-attachment__icon { .module-staged-generic-attachment__icon {
@ -356,7 +356,7 @@
// Module: Staged Placeholder Attachment // Module: Staged Placeholder Attachment
.module-staged-placeholder-attachment { .module-staged-placeholder-attachment {
border: 1px solid $color-gray-60; border: 1px solid var(--color-gray-color);
&:hover { &:hover {
background: $color-gray-75; background: $color-gray-75;
@ -364,24 +364,24 @@
} }
.module-staged-placeholder-attachment__plus-icon { .module-staged-placeholder-attachment__plus-icon {
@include color-svg('../images/plus-36.svg', $color-gray-60); @include color-svg('../images/plus-36.svg', var(--color-gray-color));
} }
// Module: Staged Link Preview // Module: Staged Link Preview
.module-staged-link-preview__close-button { .module-staged-link-preview__close-button {
@include color-svg('../images/x-16.svg', $color-gray-25); @include color-svg('../images/x-16.svg', var(--color-light-gray-color));
} }
// Module: Message Search Result // Module: Message Search Result
.module-message-search-result { .module-message-search-result {
&:hover { &:hover {
background-color: $color-dark-70; background-color: var(--color-dark-gray-color);
} }
} }
.module-message__link-preview__icon-container__circle-background { .module-message__link-preview__icon-container__circle-background {
background-color: $color-gray-25; background-color: var(--color-light-gray-color);
} }
} }

22
stylesheets/_variables.scss
View file

@ -1,17 +1,11 @@
// Loki colors // Loki colors
$color-loki-dark-gray: #323232; $color-loki-dark-gray: #323232;
$color-loki-extra-dark-gray: #101010; $color-loki-extra-dark-gray: #101010;
$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-gray-05: #eeefef;
$color-gray-25: #bbbdbe;
$color-gray-45: #898a8c;
$color-gray-60: #6b6d70;
$color-gray-75: #3d3e44; $color-gray-75: #3d3e44;
$color-gray-95: #0f1012; $color-gray-95: #0f1012;
$color-black: #000000;
$color-white-015: rgba(var(--color-white-color), 0.15); $color-white-015: rgba(var(--color-white-color), 0.15);
$color-white-02: rgba(var(--color-white-color), 0.2); $color-white-02: rgba(var(--color-white-color), 0.2);
@ -22,28 +16,22 @@ $color-white-07: rgba(var(--color-white-color), 0.7);
$color-white-075: rgba(var(--color-white-color), 0.75); $color-white-075: rgba(var(--color-white-color), 0.75);
$color-white-08: rgba(var(--color-white-color), 0.8); $color-white-08: rgba(var(--color-white-color), 0.8);
$color-white-085: rgba(var(--color-white-color), 0.85); $color-white-085: rgba(var(--color-white-color), 0.85);
$color-light-02: #f9fafa;
$color-light-10: #eeefef;
$color-light-20: #c1c5cd; $color-light-20: #c1c5cd;
$color-light-35: #a4a6a9;
$color-light-60: #62656a; $color-light-60: #62656a;
$color-light-90: #070c14; $color-light-90: #070c14;
$color-dark-05: #efefef;
$color-dark-30: #a8a9aa; $color-dark-30: #a8a9aa;
$color-dark-55: #88898c; $color-dark-55: #88898c;
$color-dark-60: #797a7c; $color-dark-60: #797a7c;
$color-dark-70: #414347;
$color-dark-72: #31343c; $color-dark-72: #31343c;
$color-dark-85: #1a1c20;
$color-dark-90: #121417; $color-dark-90: #121417;
$color-black-008: rgba($color-black, 0.08); $color-black-008: rgba(var(--color-black-color), 0.08);
$color-black-005: rgba($color-black, 0.05); $color-black-005: rgba(var(--color-black-color), 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(var(--color-black-color), 0.12);
$color-black-04: rgba($color-black, 0.4); $color-black-04: rgba(var(--color-black-color), 0.4);
$color-black-06: rgba($color-black, 0.6); $color-black-06: rgba(var(--color-black-color), 0.6);
// Old colors // Old colors

3
ts/themes/SessionTheme.tsx
View file

@ -29,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 darkGrayColor = '#414347';
const darkerGrayColor = '#17191d'; const darkerGrayColor = '#17191d';
// DARK COLORS // DARK COLORS
@ -368,6 +369,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--search-input-height: 34px; --search-input-height: 34px;
/* COLORS NOT CHANGING BETWEEN THEMES */ /* COLORS NOT CHANGING BETWEEN THEMES */
--color-black-color: ${black};
--color-light-black-color: ${`rgba(${black}, 0.2)`}; --color-light-black-color: ${`rgba(${black}, 0.2)`};
--color-lighter-black-color: ${`rgba(${black}, 0.15)`}; --color-lighter-black-color: ${`rgba(${black}, 0.15)`};
--color-session-green-color: ${sessionGreenColor}; --color-session-green-color: ${sessionGreenColor};
@ -377,6 +379,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--color-light-gray-color: ${lightGrayColor}; --color-light-gray-color: ${lightGrayColor};
--color-lighter-gray-color: ${lighterGrayColor}; --color-lighter-gray-color: ${lighterGrayColor};
--color-lightest-gray-color: ${lightestGrayColor}; --color-lightest-gray-color: ${lightestGrayColor};
--color-dark-gray-color: ${darkGrayColor};
--color-darker-gray-color: ${darkerGrayColor}; --color-darker-gray-color: ${darkerGrayColor};
--color-light-blue-color: ${lightBlueColor}; --color-light-blue-color: ${lightBlueColor};