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

Replace $primary-text-color

This commit is contained in:
Alex Gleason 2020-05-31 18:44:20 -05:00
parent 36f888c027
commit 4a2493a7e2
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
24 changed files with 116 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,17 @@ import { brightness, hue, convert } from 'chromatism';
const initialState = ImmutableMap(); const initialState = ImmutableMap();
const modes = ImmutableMap({
light: ImmutableMap({
'primary-text-color': '#000000',
'primary-text-color-faint': 'rgba(0, 0, 0, 0.7)',
}),
dark: ImmutableMap({
'primary-text-color': '#ffffff',
'primary-text-color-faint': 'rgba(255, 255, 255, 0.7)',
}),
});
const cssrgba = (color, a) => { const cssrgba = (color, a) => {
const { r, g, b } = convert(color).rgb; const { r, g, b } = convert(color).rgb;
return `rgba(${[r, g, b, a].join(',')})`; return `rgba(${[r, g, b, a].join(',')})`;
@ -18,14 +29,14 @@ const makeContrast = (percent, color, mode) => {
}; };
export const generateTheme = (brandColor, mode) => { export const generateTheme = (brandColor, mode) => {
return ImmutableMap({ return modes.get(mode).merge(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),
'brand-color-med': cssrgba(brandColor, 0.2), 'brand-color-med': cssrgba(brandColor, 0.2),
'highlight-text-color': makeContrast(5, brandColor, mode).hex, 'highlight-text-color': makeContrast(5, brandColor, mode).hex,
'brand-color-hicontrast': makeContrast(15, brandColor, mode).hex, 'brand-color-hicontrast': makeContrast(15, brandColor, mode).hex,
}); }));
}; };
export const setTheme = themeData => { export const setTheme = themeData => {

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

@ -187,7 +187,7 @@ body {
// Change the default color used for the text in an empty column or on the error column // Change the default color used for the text in an empty column or on the error column
.empty-column-indicator, .empty-column-indicator,
.error-column { .error-column {
color: $primary-text-color; color: var(--primary-text-color);
background: $white; background: $white;
} }
@ -210,12 +210,12 @@ body {
.status.light { .status.light {
.status__content { .status__content {
color: $primary-text-color; color: var(--primary-text-color);
} }
.display-name { .display-name {
strong { strong {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
} }
@ -226,7 +226,7 @@ body {
.name { .name {
a { a {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
@ -235,7 +235,7 @@ body {
} }
.account__header__content { .account__header__content {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
} }

1
app/styles/soapbox-light/variables.scss
View File

@ -22,7 +22,6 @@ $ui-primary-color: #9bcbed;
$ui-secondary-color: $classic-base-color !default; $ui-secondary-color: $classic-base-color !default;
$ui-highlight-color: #990099; $ui-highlight-color: #990099;
$primary-text-color: $black !default;
$darker-text-color: $classic-base-color !default; $darker-text-color: $classic-base-color !default;
$dark-text-color: #444b5d; $dark-text-color: #444b5d;
$action-button-color: #606984; $action-button-color: #606984;

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

@ -189,7 +189,7 @@ $small-breakpoint: 960px;
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
font-size: 16px; font-size: 16px;
line-height: 28px; line-height: 28px;
color: $primary-text-color; color: var(--primary-text-color);
text-align: right; text-align: right;
padding: 10px 15px; padding: 10px 15px;
@ -274,7 +274,7 @@ $small-breakpoint: 960px;
a { a {
display: block; display: block;
color: $primary-text-color; color: var(--primary-text-color);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -586,7 +586,7 @@ $small-breakpoint: 960px;
h1 { h1 {
font-weight: 500; font-weight: 500;
color: $primary-text-color; color: var(--primary-text-color);
margin-bottom: 0; margin-bottom: 0;
small { small {
@ -659,8 +659,6 @@ $small-breakpoint: 960px;
} }
.public-layout { .public-layout {
$gab-background: $gab-background-base-dark !default;
position: relative; position: relative;
background-color: var(--brand-color); background-color: var(--brand-color);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 889" width="1440px" height="889px"><path d="M 0 0 L 0 851.82031 C 115.03104 776.54213 236.097 723.10606 363.20703 691.54492 C 640.06491 622.80164 852.93698 468.14039 954.31055 358.01367 C 1092.1151 208.31032 1206.0509 47.69868 1365.3828 13.457031 C 1391.8162 7.7762737 1416.6827 3.2957237 1440 0.001953125 L 1440 0 L 0 0 z" fill="#{hex-color($gab-background)}"/></svg>'); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 889" width="1440px" height="889px"><path d="M 0 0 L 0 851.82031 C 115.03104 776.54213 236.097 723.10606 363.20703 691.54492 C 640.06491 622.80164 852.93698 468.14039 954.31055 358.01367 C 1092.1151 208.31032 1206.0509 47.69868 1365.3828 13.457031 C 1391.8162 7.7762737 1416.6827 3.2957237 1440 0.001953125 L 1440 0 L 0 0 z" fill="#{hex-color($gab-background)}"/></svg>');
@ -966,7 +964,7 @@ $small-breakpoint: 960px;
.brand__tagline { .brand__tagline {
display: block; display: block;
width: 470px; width: 470px;
color: $primary-text-color; color: var(--primary-text-color);
font-size: 30px; font-size: 30px;
line-height: 1.4; line-height: 1.4;
margin-top: 25px; margin-top: 25px;

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

@ -78,7 +78,7 @@
strong { strong {
font-size: 15px; font-size: 15px;
color: $primary-text-color; color: var(--primary-text-color);
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -108,7 +108,7 @@
.page, .page,
.gap { .gap {
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--primary-text-color);
font-weight: 500; font-weight: 500;
display: inline-block; display: inline-block;
padding: 6px 10px; padding: 6px 10px;
@ -310,7 +310,7 @@
} }
strong { strong {
color: $primary-text-color; color: var(--primary-text-color);
font-weight: 700; font-weight: 700;
} }
} }

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

@ -165,7 +165,7 @@ button {
} }
.explanation-box { .explanation-box {
color: $primary-text-color; color: var(--primary-text-color);
padding: 15px 20px; padding: 15px 20px;
font-size: 14px; font-size: 14px;
background-color: var(--brand-color-faint); background-color: var(--brand-color-faint);

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

@ -8,7 +8,7 @@
border: 10px none; border: 10px none;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
color: $primary-text-color; color: var(--primary-text-color);
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-family: inherit; font-family: inherit;
@ -188,7 +188,7 @@
&.overlayed { &.overlayed {
box-sizing: content-box; box-sizing: content-box;
background: rgba($base-overlay-background, 0.6); background: rgba($base-overlay-background, 0.6);
color: rgba($primary-text-color, 0.7); color: var(--primary-text-color-faint);
border-radius: 4px; border-radius: 4px;
padding: 2px; padding: 2px;
@ -372,7 +372,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 2px; padding-top: 2px;
color: $primary-text-color; color: var(--primary-text-color);
&:focus { &:focus {
outline: 0; outline: 0;
@ -592,7 +592,7 @@
} }
a.status__content__spoiler-link { a.status__content__spoiler-link {
color: $primary-text-color; color: var(--primary-text-color);
background: $ui-primary-color; background: $ui-primary-color;
&:hover { &:hover {
@ -756,7 +756,7 @@
.domain__domain-name { .domain__domain-name {
flex: 1 1 auto; flex: 1 1 auto;
display: block; display: block;
color: $primary-text-color; color: var(--primary-text-color);
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -961,7 +961,7 @@ a .account__avatar {
display: block; display: block;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: $primary-text-color; color: var(--primary-text-color);
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
&:lang(#{$lang}) { &:lang(#{$lang}) {
@ -998,7 +998,7 @@ a .account__avatar {
.status__display-name, .status__display-name,
.account__display-name { .account__display-name {
strong { strong {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
@ -1044,7 +1044,7 @@ a.account__display-name {
strong { strong {
font-size: 16px; font-size: 16px;
color: $primary-text-color; color: var(--primary-text-color);
} }
.display-name__account { .display-name__account {
@ -1139,7 +1139,7 @@ a.account__display-name {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $primary-text-color; color: var(--primary-text-color);
text-decoration: underline; text-decoration: underline;
} }
} }
@ -1678,13 +1678,13 @@ a.account__display-name {
&__btn { &__btn {
display: block; display: block;
text-align: left; text-align: left;
color: $primary-text-color; color: var(--primary-text-color);
text-decoration: none; text-decoration: none;
font-size: 15px; font-size: 15px;
padding: 0 20px; padding: 0 20px;
&:hover { &:hover {
color: darken($primary-text-color, 14%); color: var(--primary-text-color-faint);
span { span {
text-decoration: underline; text-decoration: underline;
@ -1949,7 +1949,7 @@ a.account__display-name {
.column-link { .column-link {
background: var(--brand-color-med); background: var(--brand-color-med);
color: $primary-text-color; color: var(--primary-text-color);
display: block; display: block;
font-size: 16px; font-size: 16px;
padding: 15px; padding: 15px;
@ -1973,7 +1973,7 @@ a.account__display-name {
&:focus, &:focus,
&:active { &:active {
background: transparent; background: transparent;
color: $primary-text-color; color: var(--primary-text-color);
} }
&.active { &.active {
@ -2098,7 +2098,7 @@ a.account__display-name {
&:focus, &:focus,
&:active { &:active {
color: $primary-text-color; color: var(--primary-text-color);
border-bottom-color: var(--highlight-text-color); border-bottom-color: var(--highlight-text-color);
} }
@ -2179,7 +2179,7 @@ a.account__display-name {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
@ -2455,7 +2455,7 @@ a.status-card.compact:hover {
} }
&.active { &.active {
color: $primary-text-color; color: var(--primary-text-color);
border-radius: 10px; border-radius: 10px;
background-color: var(--brand-color-faint); background-color: var(--brand-color-faint);
} }
@ -2513,11 +2513,11 @@ a.status-card.compact:hover {
&:hover {color: lighten($darker-text-color, 7%);} &:hover {color: lighten($darker-text-color, 7%);}
&.active { &.active {
color: $primary-text-color; color: var(--primary-text-color);
background: var(--brand-color-med); background: var(--brand-color-med);
&:hover { &:hover {
color: $primary-text-color; color: var(--primary-text-color);
background: var(--brand-color-med); background: var(--brand-color-med);
} }
} }
@ -2683,7 +2683,7 @@ a.status-card.compact:hover {
.video-error-cover { .video-error-cover {
align-items: center; align-items: center;
background: $base-overlay-background; background: $base-overlay-background;
color: $primary-text-color; color: var(--primary-text-color);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -2756,7 +2756,7 @@ a.status-card.compact:hover {
background: rgba($base-overlay-background, 0.5); background: rgba($base-overlay-background, 0.5);
border-radius: 8px; border-radius: 8px;
padding: 8px 12px; padding: 8px 12px;
color: $primary-text-color; color: var(--primary-text-color);
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
} }
@ -2890,7 +2890,7 @@ a.status-card.compact:hover {
} }
.relationship-tag { .relationship-tag {
color: $primary-text-color; color: var(--primary-text-color);
margin-bottom: 4px; margin-bottom: 4px;
display: block; display: block;
vertical-align: top; vertical-align: top;
@ -3244,14 +3244,14 @@ a.status-card.compact:hover {
&:hover, &:hover,
&.active { &.active {
background: var(--brand-color); background: var(--brand-color);
color: $primary-text-color; color: var(--primary-text-color);
outline: 0; outline: 0;
.privacy-dropdown__option__content { .privacy-dropdown__option__content {
color: $primary-text-color; color: var(--primary-text-color);
strong { strong {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
} }
@ -3299,7 +3299,7 @@ a.status-card.compact:hover {
background: var(--brand-color); background: var(--brand-color);
.icon-button { .icon-button {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
} }
@ -3433,7 +3433,7 @@ a.status-card.compact:hover {
.media-gallery__gifv__label { .media-gallery__gifv__label {
display: block; display: block;
position: absolute; position: absolute;
color: $primary-text-color; color: var(--primary-text-color);
background: rgba($base-overlay-background, 0.5); background: rgba($base-overlay-background, 0.5);
bottom: 6px; bottom: 6px;
left: 6px; left: 6px;
@ -3572,7 +3572,7 @@ a.status-card.compact:hover {
&::before { &::before {
content: 'GIF'; content: 'GIF';
position: absolute; position: absolute;
color: $primary-text-color; color: var(--primary-text-color);
background: rgba($base-overlay-background, 0.5); background: rgba($base-overlay-background, 0.5);
bottom: 6px; bottom: 6px;
left: 6px; left: 6px;
@ -3664,7 +3664,7 @@ a.status-card.compact:hover {
.status__video-player-expand, .status__video-player-expand,
.status__video-player-mute { .status__video-player-mute {
color: $primary-text-color; color: var(--primary-text-color);
opacity: 0.8; opacity: 0.8;
position: absolute; position: absolute;
right: 4px; right: 4px;
@ -3673,7 +3673,7 @@ a.status-card.compact:hover {
.status__video-player-spoiler { .status__video-player-spoiler {
display: none; display: none;
color: $primary-text-color; color: var(--primary-text-color);
left: 4px; left: 4px;
position: absolute; position: absolute;
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
@ -4008,7 +4008,7 @@ a.status-card.compact:hover {
.media-spoiler-video-play-icon { .media-spoiler-video-play-icon {
border-radius: 100px; border-radius: 100px;
color: rgba($primary-text-color, 0.8); color: var(--primary-text-color-faint);
font-size: 36px; font-size: 36px;
left: 50%; left: 50%;
padding: 5px; padding: 5px;
@ -4073,7 +4073,7 @@ a.status-card.compact:hover {
position: relative; position: relative;
&.active { &.active {
color: $primary-text-color; color: var(--primary-text-color);
&::before, &::before,
&::after { &::after {
@ -4262,7 +4262,7 @@ noscript {
padding: 10px; padding: 10px;
font-family: $font-monospace, monospace; font-family: $font-monospace, monospace;
background: var(--brand-color-med); background: var(--brand-color-med);
color: $primary-text-color; color: var(--primary-text-color);
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
margin-bottom: 15px; margin-bottom: 15px;
@ -4711,7 +4711,7 @@ noscript {
&__label { &__label {
flex: 1 1; flex: 1 1;
color: $primary-text-color; color: var(--primary-text-color);
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
line-height: 19px; line-height: 19px;
@ -4782,7 +4782,7 @@ noscript {
margin-top: 6px; margin-top: 6px;
&__name { &__name {
color: $primary-text-color; color: var(--primary-text-color);
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
line-height: 16px; line-height: 16px;
@ -4808,7 +4808,7 @@ noscript {
} }
&__icon { &__icon {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
} }
@ -4969,7 +4969,7 @@ noscript {
} }
span { span {
color: $primary-text-color; color: var(--primary-text-color);
font-size: 15px; font-size: 15px;
line-height: 1.25; line-height: 1.25;
} }
@ -5017,7 +5017,7 @@ noscript {
&__bio { &__bio {
display: block; display: block;
flex: 1 1; flex: 1 1;
color: $primary-text-color; color: var(--primary-text-color);
margin: 15px 0; margin: 15px 0;
font-size: 15px; font-size: 15px;
line-height: 1.25; line-height: 1.25;
@ -5155,7 +5155,7 @@ noscript {
} }
&__title-text { &__title-text {
color: $primary-text-color; color: var(--primary-text-color);
font-size: 27px; font-size: 27px;
font-weight: bold; font-weight: bold;
line-height: 32px; line-height: 32px;

4
app/styles/soapbox/components/account-header.scss
View File

@ -128,7 +128,7 @@
display: block; display: block;
&:first-of-type { &:first-of-type {
color: $primary-text-color; color: var(--primary-text-color);
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
line-height: 24px; line-height: 24px;
@ -148,7 +148,7 @@
&:hover, &:hover,
&.active { &.active {
border-bottom: 2px solid $primary-text-color; border-bottom: 2px solid var(--primary-text-color);
} }
&.score {border-bottom: 0 !important;} &.score {border-bottom: 0 !important;}
} }

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

@ -30,7 +30,7 @@
} }
.compose-form__warning { .compose-form__warning {
color: $primary-text-color; color: var(--primary-text-color);
margin-bottom: 10px; margin-bottom: 10px;
background: $ui-primary-color; background: $ui-primary-color;
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);

4
app/styles/soapbox/components/group-card.scss
View File

@ -47,7 +47,7 @@
padding: 15px; padding: 15px;
.group-card__title { .group-card__title {
color: $primary-text-color; color: var(--primary-text-color);
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
@ -60,7 +60,7 @@
} }
.group-card__description { .group-card__description {
color: $primary-text-color; color: var(--primary-text-color);
font-size: 14px; font-size: 14px;
} }
} }

4
app/styles/soapbox/components/group-detail.scss
View File

@ -26,11 +26,11 @@
text-decoration: none; text-decoration: none;
padding: 16px 22px; padding: 16px 22px;
text-align: center; text-align: center;
color: $primary-text-color; color: var(--primary-text-color);
&:hover, &:hover,
&--active { &--active {
border-bottom: 2px solid $primary-text-color; border-bottom: 2px solid var(--primary-text-color);
} }
} }

4
app/styles/soapbox/components/group-sidebar-panel.scss
View File

@ -3,13 +3,13 @@
padding: 0 15px 15px; padding: 0 15px 15px;
&__show-all { &__show-all {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
&__item { &__item {
display: block; display: block;
color: $primary-text-color; color: var(--primary-text-color);
text-decoration: none; text-decoration: none;
margin-bottom: 15px; margin-bottom: 15px;

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

@ -27,7 +27,7 @@
display: block; display: block;
padding-left: 10px; padding-left: 10px;
margin-bottom: 10px; margin-bottom: 10px;
color: $primary-text-color; color: var(--primary-text-color);
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }

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

@ -98,7 +98,7 @@
background: rgba($base-overlay-background, 0.5); background: rgba($base-overlay-background, 0.5);
box-sizing: border-box; box-sizing: border-box;
border: 0; border: 0;
color: $primary-text-color; color: var(--primary-text-color);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -158,7 +158,7 @@
} }
.media-modal__button { .media-modal__button {
background-color: $primary-text-color; background-color: var(--primary-text-color);
height: 12px; height: 12px;
width: 12px; width: 12px;
border-radius: 6px; border-radius: 6px;

4
app/styles/soapbox/components/user-panel.scss
View File

@ -43,7 +43,7 @@
&__account { &__account {
a { a {
text-decoration: none; text-decoration: none;
color: $primary-text-color; color: var(--primary-text-color);
} }
&__name { &__name {
@ -85,7 +85,7 @@
a { a {
text-decoration: none; text-decoration: none;
color: $primary-text-color; color: var(--primary-text-color);
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;

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

@ -30,7 +30,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $primary-text-color; color: var(--primary-text-color);
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
padding: 12px 16px; padding: 12px 16px;
@ -329,7 +329,7 @@
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
color: $primary-text-color; color: var(--primary-text-color);
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
@ -337,7 +337,7 @@
&:focus, &:focus,
&:active { &:active {
text-decoration: underline; text-decoration: underline;
color: $primary-text-color; color: var(--primary-text-color);
} }
&--hollow { &--hollow {
@ -574,7 +574,7 @@
h1 { h1 {
font-size: 20px; font-size: 20px;
line-height: 18px * 1.5; line-height: 18px * 1.5;
color: $primary-text-color; color: var(--primary-text-color);
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -584,7 +584,7 @@
small { small {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--primary-text-color);
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -695,7 +695,7 @@
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
margin-bottom: 5px; margin-bottom: 5px;
color: $primary-text-color; color: var(--primary-text-color);
font-family: $font-display, sans-serif; font-family: $font-display, sans-serif;
} }
} }
@ -744,7 +744,7 @@
strong { strong {
font-weight: 700; font-weight: 700;
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
} }
@ -801,7 +801,7 @@
.account__header__content { .account__header__content {
padding: 20px; padding: 20px;
padding-bottom: 0; padding-bottom: 0;
color: $primary-text-color; color: var(--primary-text-color);
} }
&__extra, &__extra,

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

@ -36,7 +36,7 @@
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 24px;
line-height: 21px; line-height: 21px;
color: $primary-text-color; color: var(--primary-text-color);
font-family: $font-display, sans-serif; font-family: $font-display, sans-serif;
margin-bottom: 20px; margin-bottom: 20px;
line-height: 30px; line-height: 30px;

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

@ -20,7 +20,7 @@
&--active { &--active {
background-color: var(--brand-color); background-color: var(--brand-color);
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
} }
@ -126,7 +126,7 @@
background: transparent; background: transparent;
border: 0; border: 0;
margin: 0; margin: 0;
color: $primary-text-color; color: var(--primary-text-color);
appearance: textfield; appearance: textfield;
&::-webkit-inner-spin-button, &::-webkit-inner-spin-button,

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

@ -48,13 +48,13 @@
margin-right: auto; margin-right: auto;
span { span {
color: $primary-text-color; color: var(--primary-text-color);
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;
&:last-of-type { &:last-of-type {
color: darken($primary-text-color, 20%); color: var(--primary-text-color-faint);
} }
} }
} }

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

@ -49,7 +49,7 @@ code {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
padding-top: 5px; padding-top: 5px;
color: $primary-text-color; color: var(--primary-text-color);
display: block; display: block;
width: auto; width: auto;
} }
@ -148,7 +148,7 @@ code {
& > label { & > label {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--primary-text-color);
font-weight: 500; font-weight: 500;
min-width: 150px; min-width: 150px;
flex: 0 0 auto; flex: 0 0 auto;
@ -170,7 +170,7 @@ code {
.label_input > label { .label_input > label {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--primary-text-color);
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
word-wrap: break-word; word-wrap: break-word;
@ -192,7 +192,7 @@ code {
& > label { & > label {
font-family: inherit; font-family: inherit;
font-size: 16px; font-size: 16px;
color: $primary-text-color; color: var(--primary-text-color);
display: block; display: block;
font-weight: 500; font-weight: 500;
padding-top: 5px; padding-top: 5px;
@ -266,7 +266,7 @@ code {
margin-bottom: 5px; margin-bottom: 5px;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--primary-text-color);
display: block; display: block;
width: auto; width: auto;
} }
@ -276,7 +276,7 @@ code {
label { label {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $primary-text-color; color: var(--primary-text-color);
display: inline-block; display: inline-block;
width: auto; width: auto;
position: relative; position: relative;
@ -300,8 +300,8 @@ code {
input[type=email], input[type=email],
input[type=password], input[type=password],
textarea { textarea {
color: rgba($primary-text-color, 0.5); color: var(--primary-text-color-faint);
border-color: rgba($primary-text-color, 0.5); border-color: var(--primary-text-color-faint);
} }
} }
@ -312,7 +312,7 @@ code {
textarea { textarea {
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
color: $primary-text-color; color: var(--primary-text-color);
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
@ -390,7 +390,7 @@ code {
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
background: var(--brand-color); background: var(--brand-color);
color: $primary-text-color; color: var(--primary-text-color);
font-size: 18px; font-size: 18px;
line-height: inherit; line-height: inherit;
height: auto; height: auto;
@ -440,7 +440,7 @@ code {
appearance: none; appearance: none;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
color: $primary-text-color; color: var(--primary-text-color);
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
@ -509,7 +509,7 @@ code {
&.rich-formatting { &.rich-formatting {
&, &,
p { p {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
} }
@ -550,7 +550,7 @@ code {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $primary-text-color; color: var(--primary-text-color);
text-decoration: underline; text-decoration: underline;
} }
} }
@ -568,7 +568,7 @@ code {
padding: 10px; padding: 10px;
font-family: $font-monospace, monospace; font-family: $font-monospace, monospace;
background: var(--brand-color-med); background: var(--brand-color-med);
color: $primary-text-color; color: var(--primary-text-color);
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
@ -719,7 +719,7 @@ code {
.warning { .warning {
box-sizing: border-box; box-sizing: border-box;
background: rgba($error-value-color, 0.5); background: rgba($error-value-color, 0.5);
color: $primary-text-color; color: var(--primary-text-color);
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3); text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4); box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
border-radius: 4px; border-radius: 4px;
@ -727,7 +727,7 @@ code {
margin-bottom: 15px; margin-bottom: 15px;
a { a {
color: $primary-text-color; color: var(--primary-text-color);
text-decoration: underline; text-decoration: underline;
&:hover, &:hover,
@ -787,7 +787,7 @@ code {
h4 { h4 {
font-size: 16px; font-size: 16px;
color: $primary-text-color; color: var(--primary-text-color);
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
border: 0; border: 0;

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

@ -77,7 +77,7 @@
flex: 0 auto; flex: 0 auto;
font-size: 14px; font-size: 14px;
background: var(--brand-color); background: var(--brand-color);
color: $primary-text-color; color: var(--primary-text-color);
text-transform: none; text-transform: none;
line-height: 36px; line-height: 36px;
height: auto; height: auto;
@ -89,7 +89,7 @@
height: auto; height: auto;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
fill: $primary-text-color; fill: var(--primary-text-color);
} }
&:active, &:active,

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

@ -113,7 +113,7 @@ a.table-action-link {
font-weight: 500; font-weight: 500;
&:hover { &:hover {
color: $primary-text-color; color: var(--primary-text-color);
} }
i.fa { i.fa {

3
app/styles/soapbox/variables.scss
View File

@ -9,7 +9,6 @@
// STATIC COLORS // STATIC COLORS
$gab-brand-default: #990099 !default; $gab-brand-default: #990099 !default;
$gab-alert-red: #e600e6 !default;
$gab-secondary-text: #999 !default; $gab-secondary-text: #999 !default;
$gab-text-highlight: #e600e6 !default; $gab-text-highlight: #e600e6 !default;
$gab-small-cta-primary: #607cf5 !default; $gab-small-cta-primary: #607cf5 !default;
@ -72,7 +71,6 @@ $classic-highlight-color: $gab-text-highlight;
// Variables for defaults in UI // Variables for defaults in UI
$base-shadow-color: $black !default; $base-shadow-color: $black !default;
$base-overlay-background: $black !default; $base-overlay-background: $black !default;
$base-border-color: $white !default;
$simple-background-color: $white !default; $simple-background-color: $white !default;
$valid-value-color: $success-green !default; $valid-value-color: $success-green !default;
$error-value-color: $error-red !default; $error-value-color: $error-red !default;
@ -89,7 +87,6 @@ $nav-ui-highlight-color: $gab-text-highlight !default;
$nav-ui-search-bg-color: darken($nav-ui-highlight-color, 52%) !default; $nav-ui-search-bg-color: darken($nav-ui-highlight-color, 52%) !default;
// Variables for texts // Variables for texts
$primary-text-color: $white !default;
$darker-text-color: $gab-secondary-text !default; $darker-text-color: $gab-secondary-text !default;
$dark-text-color: $ui-base-lighter-color !default; $dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default; $secondary-text-color: $ui-secondary-color !default;

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

@ -142,7 +142,7 @@
margin-top: 10px; margin-top: 10px;
a { a {
color: $primary-text-color; color: var(--primary-text-color);
text-decoration: none; text-decoration: none;
} }
} }
@ -237,7 +237,7 @@
margin: 10px 0; margin: 10px 0;
h1 { h1 {
color: $primary-text-color; color: var(--primary-text-color);
font-size: 36px; font-size: 36px;
line-height: 1.1; line-height: 1.1;
font-weight: 700; font-weight: 700;
@ -303,7 +303,7 @@
flex: 1 1 auto; flex: 1 1 auto;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: $primary-text-color; color: var(--primary-text-color);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -325,7 +325,7 @@
&, &,
.fa, .fa,
small { small {
color: $primary-text-color; color: var(--primary-text-color);
} }
} }
@ -407,7 +407,7 @@
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: $primary-text-color; color: var(--primary-text-color);
small { small {
display: block; display: block;