gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-29 10:53:39 +00:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

Replaced $inverted-text-color

Browse Source
This commit is contained in:
diondiondion 2025-09-05 13:20:09 +02:00
parent 023bf14c10
commit 58a3885d23
6 changed files with 18 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/styles/contrast/variables.scss
View File

@ -3,8 +3,5 @@
$ui-base-color: hsl(240deg, 16%, 19%) !default;
@use '../mastodon/variables' with (
$action-button-color: lighten($ui-base-color, 50%),
$inverted-text-color: #000,
$lighter-text-color: darken($ui-base-color, 6%),
$light-text-color: hsl(240deg, 29%, 70%)
$action-button-color: lighten($ui-base-color, 50%)
);

6
app/javascript/styles/mastodon-light/variables.scss
View File

@ -5,11 +5,9 @@
$lighten-multiplier: -1
);
$black: #000; // Black
$white: #fff; // White
$blurple-500: #6364ff; // Brand purple
$grey-600: hsl(240deg, 8%, 33%); // Trout
$grey-100: hsl(240deg, 51%, 90%); // Topaz
@use '../mastodon/variables' with (
$ui-base-color: hsl(255deg, 25%, 88%),
@ -21,10 +19,6 @@ $grey-100: hsl(240deg, 51%, 90%); // Topaz
$ui-button-tertiary-color: $blurple-500,
$ui-button-tertiary-border-color: $blurple-500,
$lighter-text-color: hsl(240deg, 16%, 19%),
$light-text-color: hsl(240deg, 16%, 32%),
$inverted-text-color: $black,
$action-button-color: hsl(240deg, 16%, 45%),
$emojis-requiring-inversion: 'chains'
);

10
app/javascript/styles/mastodon/_mixins.scss
View File

@ -1,7 +1,3 @@
@use 'sass:color';
@use 'variables' as *;
@use 'theme_utils' as *;
@mixin search-input {
outline: 0;
box-sizing: border-box;
@ -23,12 +19,12 @@
padding: 10px 14px;
padding-bottom: 14px;
margin-top: 10px;
color: $light-text-color;
color: var(--clr-text-secondary);
box-shadow: 2px 4px 15px var(--clr-shadow-primary);
h4 {
text-transform: uppercase;
color: $light-text-color;
color: var(--clr-text-secondary);
font-size: 13px;
font-weight: 500;
margin-bottom: 10px;
@ -44,6 +40,6 @@
em {
font-weight: 500;
color: $inverted-text-color;
color: var(--clr-text-primary);
}
}

5
app/javascript/styles/mastodon/_variables.scss
View File

@ -45,11 +45,6 @@ $ui-button-tertiary-focus-color: $white !default;
$action-button-color: $ui-base-lighter-color !default;
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
// For texts on inverted backgrounds
$inverted-text-color: $ui-base-color !default;
$lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: hsl(240deg, 29%, 70%) !default;
// Keep this filter a SCSS variable rather than
// a CSS Custom Property due to this Safari bug:
// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245

2
app/javascript/styles/mastodon/accounts.scss
View File

@ -143,7 +143,7 @@
.disabled {
cursor: default;
color: lighten($inverted-text-color, 10%);
color: var(--clr-text-disabled);
}
@media screen and (width <= 700px) {

138
app/javascript/styles/mastodon/components.scss
View File

@ -417,48 +417,7 @@
}
}
.text-icon-button {
color: $lighter-text-color;
border: 0;
border-radius: 4px;
background: transparent;
cursor: pointer;
font-weight: 600;
font-size: 11px;
padding: 0 3px;
line-height: 27px;
white-space: nowrap;
&:hover,
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
background-color: color.change($lighter-text-color, $alpha: 0.15);
}
&:focus-visible {
outline: var(--outline-focus-default);
}
&.disabled {
color: lighten($lighter-text-color, 20%);
background-color: transparent;
cursor: default;
}
&.active {
color: var(--clr-text-accent);
&:hover,
&:active,
&:focus {
color: var(--clr-text-accent);
background-color: transparent;
}
}
}
[data-popper-placement] {
body > [data-popper-placement] {
z-index: 9999;
}
@ -4002,8 +3961,8 @@ a.account__display-name {
.follow_requests-unlocked_explanation,
.switch-to-advanced {
color: $light-text-color;
background-color: $ui-base-color;
color: var(--clr-text-secondary);
background-color: var(--clr-bg-secondary);
padding: 15px;
border-radius: 4px;
margin-top: 4px;
@ -4012,7 +3971,7 @@ a.account__display-name {
line-height: 18px;
a {
color: $ui-button-tertiary-color;
color: var(--clr-text-accent);
font-weight: bold;
}
}
@ -5111,7 +5070,7 @@ a.status-card {
}
&__multi-value {
background: lighten($ui-base-color, 8%);
background: var(--clr-bg-secondary);
&__remove {
cursor: pointer;
@ -5119,7 +5078,7 @@ a.status-card {
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 12%);
background: var(--clr-bg-accent-subtle);
color: color-mix(
in oklab,
var(--clr-text-primary),
@ -5149,14 +5108,14 @@ a.status-card {
}
&__indicator-separator {
background-color: lighten($ui-base-color, 8%);
background-color: var(--clr-border-primary);
}
&__menu {
@include search-popout;
padding: 0;
background: $ui-secondary-color;
background: var(--clr-bg-elevated);
}
&__menu-list {
@ -5164,13 +5123,14 @@ a.status-card {
}
&__option {
color: $inverted-text-color;
color: var(--clr-text-primary);
border-radius: 4px;
font-size: 14px;
&--is-focused,
&--is-selected {
background: darken($ui-secondary-color, 10%);
color: var(--clr-text-on-accent-strong);
background: var(--clr-bg-accent-strong);
}
}
}
@ -6657,29 +6617,6 @@ a.status-card {
}
}
.boost-modal__action-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: $ui-secondary-color;
padding: 15px;
& > div {
flex: 1 1 auto;
text-align: end;
color: $lighter-text-color;
padding-inline-end: 10px;
}
.icon {
vertical-align: middle;
}
.button {
flex: 0 0 auto;
}
}
.report-modal {
width: 90vw;
max-width: 700px;
@ -6896,55 +6833,6 @@ a.status-card {
}
}
.report-modal__container {
display: flex;
border-top: 1px solid var(--clr-border-primary);
@media screen and (width <= 480px) {
flex-wrap: wrap;
overflow-y: auto;
}
}
.report-modal__statuses,
.report-modal__comment {
box-sizing: border-box;
width: 50%;
min-width: 50%;
@media screen and (width <= 480px) {
width: 100%;
}
}
.report-modal__statuses,
.focal-point-modal__content {
flex: 1 1 auto;
min-height: 20vh;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
.status__content a {
color: var(--clr-text-accent);
}
.status__content,
.status__content p {
color: $inverted-text-color;
}
@media screen and (width <= 480px) {
max-height: 10vh;
}
}
.focal-point-modal__content {
@media screen and (width <= 480px) {
max-height: 40vh;
}
}
.setting-divider {
background: transparent;
border: 0;
@ -8701,7 +8589,7 @@ noscript {
&__name {
flex: 1 1 auto;
color: var(--clr-text-tertiary);
color: var(--clr-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -8711,7 +8599,7 @@ noscript {
}
a {
color: var(--clr-text-secondary);
color: var(--clr-text-primary);
text-decoration: none;
font-size: 14px;
font-weight: 500;