moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More SCSS variable replacements

This commit is contained in:
Alex Gleason 2020-05-31 15:17:10 -05:00
parent 86d585ffbd
commit 4d484153ac
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
17 changed files with 79 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/soapbox/reducers/theme.js
View File

@ -12,12 +12,19 @@ const cssrgba = (color, a) => {
return `rgba(${[r, g, b, a].join(',')})`; return `rgba(${[r, g, b, a].join(',')})`;
}; };
const makeContrast = (percent, color, mode) => {
percent = mode === 'light' ? -percent : percent;
return brightness(percent, color);
};
export const generateTheme = (brandColor, mode) => { export const generateTheme = (brandColor, mode) => {
return ImmutableMap({ return ImmutableMap({
'brand-color': brandColor, 'brand-color': brandColor,
'accent-color': brightness(10, hue(-3, brandColor).hex).hex, 'accent-color': brightness(10, hue(-3, brandColor).hex).hex,
'brand-color-faint': cssrgba(brandColor, 0.1), 'brand-color-faint': cssrgba(brandColor, 0.1),
'highlight-text-color': brandColor, 'brand-color-med': cssrgba(brandColor, 0.2),
'highlight-text-color': makeContrast(10, brandColor, mode).hex,
'brand-color-hicontrast': makeContrast(20, brandColor, mode).hex,
}); });
}; };

12
app/styles/soapbox-light/diff.scss
View File

@ -80,12 +80,7 @@ body {
} }
.focusable:focus .status.status-direct { .focusable:focus .status.status-direct {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
}
.detailed-status,
.detailed-status__action-bar {
background: darken($ui-base-color, 6%);
} }
// Change the background colors of status__content__spoiler-link // Change the background colors of status__content__spoiler-link
@ -132,7 +127,6 @@ body {
&__item { &__item {
a { a {
background: $ui-base-color;
color: $darker-text-color; color: $darker-text-color;
} }
} }
@ -228,7 +222,7 @@ body {
// Change the default colors used on some parts of the profile pages // Change the default colors used on some parts of the profile pages
.activity-stream-tabs { .activity-stream-tabs {
background: $account-background-color; background: $account-background-color;
border-bottom-color: lighten($ui-base-color, 8%); border-bottom-color: var(--brand-color-med);
} }
.activity-stream { .activity-stream {
@ -238,7 +232,7 @@ body {
.detailed-status.light, .detailed-status.light,
.more.light, .more.light,
.status.light { .status.light {
border-bottom-color: lighten($ui-base-color, 8%); border-bottom-color: var(--brand-color-med);
} }
} }

2
app/styles/soapbox/about.scss
View File

@ -928,7 +928,7 @@ $small-breakpoint: 960px;
.hero-widget, .hero-widget,
.box-widget, .box-widget,
.directory__tag { .directory__tag {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
} }
.directory { .directory {

2
app/styles/soapbox/accounts.scss
View File

@ -13,7 +13,7 @@
&:active, &:active,
&:focus { &:focus {
.card__bar { .card__bar {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
} }
} }
} }

90
app/styles/soapbox/components.scss
View File

@ -391,7 +391,7 @@
} }
a { a {
color: var(--brand-color); color: var(--brand-color-hicontrast);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -453,7 +453,7 @@
display: block; display: block;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
color: var(--brand-color); color: var(--highlight-text-color);
border: 0; border: 0;
background: transparent; background: transparent;
padding: 0; padding: 0;
@ -491,7 +491,7 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
clear: both; clear: both;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
} }
.status__prepend-icon-wrapper { .status__prepend-icon-wrapper {
@ -514,7 +514,7 @@
.detailed-status, .detailed-status,
.detailed-status__action-bar { .detailed-status__action-bar {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
} }
} }
} }
@ -546,8 +546,8 @@
} }
&.status-direct:not(.read) { &.status-direct:not(.read) {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
border-bottom-color: lighten($ui-base-color, 12%); border-bottom-color: var(--brand-color-med);
} }
&.light { &.light {
@ -730,13 +730,13 @@
user-select: text; user-select: text;
a { a {
color: $lighter-text-color; color: var(--highlight-text-color);
} }
} }
.domain { .domain {
padding: 10px; padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
.domain__domain-name { .domain__domain-name {
flex: 1 1 auto; flex: 1 1 auto;
@ -762,7 +762,7 @@
padding: 10px; padding: 10px;
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
} }
&.compact { &.compact {
@ -859,7 +859,7 @@ a .account__avatar {
.account__disclaimer { .account__disclaimer {
padding: 10px; padding: 10px;
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--brand-color-med);
color: $dark-text-color; color: $dark-text-color;
strong { strong {
@ -886,8 +886,8 @@ a .account__avatar {
} }
.account__action-bar { .account__action-bar {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--brand-color-med);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
line-height: 36px; line-height: 36px;
overflow: hidden; overflow: hidden;
flex: 0 0 auto; flex: 0 0 auto;
@ -927,7 +927,7 @@ a .account__avatar {
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
flex: 0 1 100%; flex: 0 1 100%;
border-right: 1px solid lighten($ui-base-color, 8%); border-right: 1px solid var(--brand-color-med);
padding: 10px 0; padding: 10px 0;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
@ -1640,7 +1640,7 @@ a.account__display-name {
display: block; display: block;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
background: $gab-background-container; background: $gab-background-container;
&--highlighted { &--highlighted {
@ -1739,7 +1739,7 @@ a.account__display-name {
.drawer__header { .drawer__header {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 16px; font-size: 16px;
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -1932,7 +1932,7 @@ a.account__display-name {
} }
.column-link { .column-link {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
color: $primary-text-color; color: $primary-text-color;
display: block; display: block;
font-size: 16px; font-size: 16px;
@ -2122,7 +2122,7 @@ a.account__display-name {
.status-card { .status-card {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--brand-color-med);
border-radius: 4px; border-radius: 4px;
color: $dark-text-color; color: $dark-text-color;
margin-top: 14px; margin-top: 14px;
@ -2179,7 +2179,7 @@ a.status-card {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
} }
} }
@ -2231,7 +2231,7 @@ a.status-card {
.status-card__image { .status-card__image {
flex: 0 0 100px; flex: 0 0 100px;
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
position: relative; position: relative;
& > .fa { & > .fa {
@ -2317,7 +2317,7 @@ a.status-card.compact:hover {
} }
.load-gap { .load-gap {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
} }
.regeneration-indicator { .regeneration-indicator {
@ -2498,11 +2498,11 @@ a.status-card.compact:hover {
&.active { &.active {
color: $primary-text-color; color: $primary-text-color;
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
&:hover { &:hover {
color: $primary-text-color; color: $primary-text-color;
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
} }
} }
} }
@ -2617,7 +2617,7 @@ a.status-card.compact:hover {
height: 42px; height: 42px;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent; background-color: transparent;
border: 0 solid lighten($ui-base-color, 26%); border: 0 solid var(--brand-color-med);
border-width: 6px; border-width: 6px;
border-radius: 50%; border-radius: 50%;
} }
@ -2634,11 +2634,11 @@ a.status-card.compact:hover {
0% { 0% {
width: 0; width: 0;
height: 0; height: 0;
background-color: lighten($ui-base-color, 26%); background-color: var(--brand-color-med);
} }
29% { 29% {
background-color: lighten($ui-base-color, 26%); background-color: var(--brand-color-med);
} }
30% { 30% {
@ -2756,13 +2756,13 @@ a.status-card.compact:hover {
} }
.modal-container--preloader { .modal-container--preloader {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
} }
.account--panel { .account--panel {
background: var(--brand-color-faint); background: var(--brand-color-faint);
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--brand-color-med);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 10px 0; padding: 10px 0;
@ -2775,7 +2775,7 @@ a.status-card.compact:hover {
} }
.column-settings__outer { .column-settings__outer {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
padding: 15px; padding: 15px;
} }
@ -2808,7 +2808,7 @@ a.status-card.compact:hover {
} }
&__multi-value { &__multi-value {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
&__remove { &__remove {
cursor: pointer; cursor: pointer;
@ -2841,7 +2841,7 @@ a.status-card.compact:hover {
} }
&__indicator-separator { &__indicator-separator {
background-color: lighten($ui-base-color, 8%); background-color: var(--brand-color-med);
} }
&__menu { &__menu {
@ -3123,7 +3123,7 @@ a.status-card.compact:hover {
.upload-progress { .upload-progress {
padding: 10px; padding: 10px;
color: $lighter-text-color; color: var(--highlight-text-color);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -3254,7 +3254,7 @@ a.status-card.compact:hover {
.privacy-dropdown__option__content { .privacy-dropdown__option__content {
flex: 1 1 auto; flex: 1 1 auto;
color: $lighter-text-color; color: var(--highlight-text-color);
strong { strong {
font-weight: 500; font-weight: 500;
@ -3366,7 +3366,7 @@ a.status-card.compact:hover {
h5 { h5 {
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
cursor: default; cursor: default;
display: flex; display: flex;
padding: 15px; padding: 15px;
@ -3449,7 +3449,7 @@ a.status-card.compact:hover {
.attachment-list { .attachment-list {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--brand-color-med);
border-radius: 4px; border-radius: 4px;
margin-top: 14px; margin-top: 14px;
overflow: hidden; overflow: hidden;
@ -3459,7 +3459,7 @@ a.status-card.compact:hover {
color: $dark-text-color; color: $dark-text-color;
padding: 8px 18px; padding: 8px 18px;
cursor: default; cursor: default;
border-right: 1px solid lighten($ui-base-color, 8%); border-right: 1px solid var(--brand-color-med);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -4029,7 +4029,7 @@ a.status-card.compact:hover {
.notification__filter-bar, .notification__filter-bar,
.account__section-headline { .account__section-headline {
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
cursor: default; cursor: default;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@ -4067,7 +4067,7 @@ a.status-card.compact:hover {
transform: translateX(-50%); transform: translateX(-50%);
border-style: solid; border-style: solid;
border-width: 0 10px 10px; border-width: 0 10px 10px;
border-color: transparent transparent lighten($ui-base-color, 8%); border-color: transparent transparent var(--brand-color-med);
} }
&::after { &::after {
@ -4283,8 +4283,8 @@ noscript {
padding: 14px 10px; padding: 14px 10px;
padding-bottom: 16px; padding-bottom: 16px;
background: var(--brand-color-faint); background: var(--brand-color-faint);
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--brand-color-med);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
&__message { &__message {
position: relative; position: relative;
@ -4441,7 +4441,7 @@ noscript {
.list { .list {
padding: 4px; padding: 4px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
} }
.list__wrapper { .list__wrapper {
@ -4561,7 +4561,7 @@ noscript {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -4731,7 +4731,7 @@ noscript {
} }
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
} }
&__content { &__content {
@ -4772,7 +4772,7 @@ noscript {
} }
&__username { &__username {
color: $lighter-text-color; color: var(--highlight-text-color);
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }
@ -5174,7 +5174,7 @@ noscript {
background-color: darken($ui-base-color, 8%); background-color: darken($ui-base-color, 8%);
border-bottom: 1px solid; border-bottom: 1px solid;
border-top: 1px solid; border-top: 1px solid;
border-color: darken($ui-base-color, 4%); border-color: var(--brand-color-faint);
transition: max-height 150ms ease; transition: max-height 150ms ease;
overflow: hidden; overflow: hidden;

4
app/styles/soapbox/components/compose-form.scss
View File

@ -50,7 +50,7 @@
} }
a { a {
color: $lighter-text-color; color: var(--highlight-text-color);
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
@ -184,7 +184,7 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.autosuggest-account .display-name__account {color: $lighter-text-color;} .autosuggest-account .display-name__account {color: var(--highlight-text-color);}
.compose-form__modifiers { .compose-form__modifiers {
color: $inverted-text-color; color: $inverted-text-color;

4
app/styles/soapbox/components/detailed-status.scss
View File

@ -53,8 +53,8 @@
.detailed-status__action-bar { .detailed-status__action-bar {
background: var(--brand-color-faint); background: var(--brand-color-faint);
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--brand-color-med);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }

2
app/styles/soapbox/components/hotkeys-modal.scss
View File

@ -43,7 +43,7 @@
kbd { kbd {
display: inline-block; display: inline-block;
padding: 2px 8px; padding: 2px 8px;
background-color: lighten($ui-base-color, 8%); background-color: var(--brand-color-med);
border: 1px solid darken($ui-base-color, 4%); border: 1px solid darken($ui-base-color, 4%);
border-radius: 4px; border-radius: 4px;
} }

6
app/styles/soapbox/components/modal.scss
View File

@ -240,7 +240,7 @@
.onboarding-modal__nav, .onboarding-modal__nav,
.error-modal__nav { .error-modal__nav {
color: $lighter-text-color; color: var(--highlight-text-color);
border: 0; border: 0;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -376,7 +376,7 @@
& > div { & > div {
flex: 1 1 auto; flex: 1 1 auto;
text-align: right; text-align: right;
color: $lighter-text-color; color: var(--highlight-text-color);
padding-right: 10px; padding-right: 10px;
} }
@ -563,7 +563,7 @@
.confirmation-modal__cancel-button, .confirmation-modal__cancel-button,
.mute-modal__cancel-button { .mute-modal__cancel-button {
background-color: transparent; background-color: transparent;
color: $lighter-text-color; color: var(--highlight-text-color);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;

6
app/styles/soapbox/containers.scss
View File

@ -769,7 +769,7 @@
} }
.public-account-bio { .public-account-bio {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
@ -851,13 +851,13 @@
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
margin: 0; margin: 0;
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--brand-color-med);
& > div { & > div {
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;

2
app/styles/soapbox/dashboard.scss
View File

@ -25,7 +25,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
} }
} }
} }

2
app/styles/soapbox/emoji_picker.scss
View File

@ -36,7 +36,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 6px; padding: 0 6px;
color: $lighter-text-color; color: var(--highlight-text-color);
line-height: 0; line-height: 0;
} }

4
app/styles/soapbox/forms.scss
View File

@ -525,7 +525,7 @@ code {
} }
.flash-message { .flash-message {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
color: $darker-text-color; color: $darker-text-color;
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
@ -896,7 +896,7 @@ code {
} }
&__connection { &__connection {
background-color: lighten($ui-base-color, 8%); background-color: var(--brand-color-med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px; border-radius: 4px;
padding: 25px 10px; padding: 25px 10px;

4
app/styles/soapbox/introduction.scss
View File

@ -98,7 +98,7 @@
display: inline-block; display: inline-block;
background: darken($ui-base-color, 8%); background: darken($ui-base-color, 8%);
font-size: 15px; font-size: 15px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--brand-color-med);
border-radius: 2px; border-radius: 2px;
padding: 1px 3px; padding: 1px 3px;
} }
@ -132,7 +132,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
} }
&.active { &.active {

2
app/styles/soapbox/stream_entries.scss
View File

@ -69,7 +69,7 @@
} }
&--highlighted .entry { &--highlighted .entry {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
} }
} }

6
app/styles/soapbox/widgets.scss
View File

@ -229,7 +229,7 @@
} }
.page-header { .page-header {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px; border-radius: 4px;
padding: 60px 15px; padding: 60px 15px;
@ -285,7 +285,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: lighten($ui-base-color, 8%); background: var(--brand-color-med);
} }
} }
@ -395,7 +395,7 @@
tbody td { tbody td {
padding: 15px 0; padding: 15px 0;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--brand-color-med);
} }
tbody tr:last-child td { tbody tr:last-child td {

6
webpack/config/themes.yml
View File

@ -1,8 +1,2 @@
azure: styles/azure.scss azure: styles/azure.scss
purple: styles/soapbox-light.scss
purple-dark: styles/application.scss purple-dark: styles/application.scss
purple-contrast: styles/contrast.scss
halloween: styles/halloween.scss
aquatic: styles/neenster.scss
paleblue: styles/glinner.scss
lime: styles/lime.scss