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(',')})`;
};
const makeContrast = (percent, color, mode) => {
percent = mode === 'light' ? -percent : percent;
return brightness(percent, color);
};
export const generateTheme = (brandColor, mode) => {
return ImmutableMap({
'brand-color': brandColor,
'accent-color': brightness(10, hue(-3, brandColor).hex).hex,
'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 {
background: lighten($ui-base-color, 8%);
}
.detailed-status,
.detailed-status__action-bar {
background: darken($ui-base-color, 6%);
background: var(--brand-color-med);
}
// Change the background colors of status__content__spoiler-link
@ -132,7 +127,6 @@ body {
&__item {
a {
background: $ui-base-color;
color: $darker-text-color;
}
}
@ -228,7 +222,7 @@ body {
// Change the default colors used on some parts of the profile pages
.activity-stream-tabs {
background: $account-background-color;
border-bottom-color: lighten($ui-base-color, 8%);
border-bottom-color: var(--brand-color-med);
}
.activity-stream {
@ -238,7 +232,7 @@ body {
.detailed-status.light,
.more.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,
.box-widget,
.directory__tag {
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid var(--brand-color-med);
}
.directory {

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

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

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

@ -50,7 +50,7 @@
}
a {
color: $lighter-text-color;
color: var(--highlight-text-color);
font-weight: 500;
text-decoration: underline;
@ -184,7 +184,7 @@
width: 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 {
color: $inverted-text-color;

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

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

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

@ -43,7 +43,7 @@
kbd {
display: inline-block;
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-radius: 4px;
}

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

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

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

@ -769,7 +769,7 @@
}
.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);
border-radius: 4px;
overflow: hidden;
@ -851,13 +851,13 @@
@media screen and (max-width: $no-gap-breakpoint) {
margin: 0;
border-top: 1px solid lighten($ui-base-color, 8%);
border-top: 1px solid var(--brand-color-med);
& > div {
width: 100%;
padding: 0;
margin-bottom: 0;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid var(--brand-color-med);
&:last-child {
border-bottom: 0;

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

@ -25,7 +25,7 @@
&:hover,
&:focus,
&: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;
justify-content: space-between;
padding: 0 6px;
color: $lighter-text-color;
color: var(--highlight-text-color);
line-height: 0;
}

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

@ -525,7 +525,7 @@ code {
}
.flash-message {
background: lighten($ui-base-color, 8%);
background: var(--brand-color-med);
color: $darker-text-color;
border-radius: 4px;
padding: 15px 10px;
@ -896,7 +896,7 @@ code {
}
&__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);
border-radius: 4px;
padding: 25px 10px;

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

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

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

@ -69,7 +69,7 @@
}
&--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 {
background: lighten($ui-base-color, 8%);
background: var(--brand-color-med);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border-radius: 4px;
padding: 60px 15px;
@ -285,7 +285,7 @@
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 8%);
background: var(--brand-color-med);
}
}
@ -395,7 +395,7 @@
tbody td {
padding: 15px 0;
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 {

6
webpack/config/themes.yml
View File

@ -1,8 +1,2 @@
azure: styles/azure.scss
purple: styles/soapbox-light.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