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

Replace "classic" tokens and dark-text-color

Browse Source
This commit is contained in:
diondiondion 2025-09-02 17:00:31 +02:00
parent cc58079e94
commit a2642ed379
10 changed files with 79 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,23 +1,14 @@
@use '../mastodon/functions' as *;
// Dependent colors
$black: #000;
$classic-base-color: hsl(240deg, 16%, 19%);
$classic-primary-color: hsl(240deg, 29%, 70%);
$classic-secondary-color: hsl(255deg, 25%, 88%);
$classic-highlight-color: hsl(240deg, 100%, 69%);
$ui-base-color: $classic-base-color !default;
$ui-primary-color: $classic-primary-color !default;
$ui-secondary-color: $classic-secondary-color !default;
$ui-highlight-color: $classic-highlight-color !default;
$ui-base-color: hsl(240deg, 16%, 19%) !default;
$ui-primary-color: hsl(240deg, 29%, 70%) !default;
$ui-secondary-color: hsl(255deg, 25%, 88%) !default;
$ui-highlight-color: hsl(240deg, 100%, 69%) !default;
@use '../mastodon/variables' with (
$dark-text-color: lighten($ui-primary-color, 12%),
$highlight-text-color: lighten($ui-highlight-color, 10%),
$action-button-color: lighten($ui-base-color, 50%),
$inverted-text-color: $black,
$inverted-text-color: #000,
$lighter-text-color: darken($ui-base-color, 6%),
$light-text-color: $classic-primary-color
$light-text-color: hsl(240deg, 29%, 70%)
);

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

@ -458,12 +458,6 @@ a.sparkline {
background: darken($ui-base-color, 10%);
}
.autosuggest-account {
.display-name__account {
color: $dark-text-color;
}
}
.notification-group--annual-report {
.notification-group__icon,
.notification-group__main .link-button {

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

@ -11,26 +11,20 @@ $blurple-500: #6364ff; // Brand purple
$grey-600: hsl(240deg, 8%, 33%); // Trout
$grey-100: hsl(240deg, 51%, 90%); // Topaz
$classic-base-color: hsl(240deg, 16%, 19%);
$classic-secondary-color: hsl(255deg, 25%, 88%);
$classic-highlight-color: $blurple-500;
@use '../mastodon/variables' with (
$base-overlay-background: $white,
$ui-base-color: $classic-secondary-color,
$ui-base-color: hsl(255deg, 25%, 88%),
$ui-base-lighter-color: hsl(250deg, 24%, 75%),
$ui-secondary-color: $classic-base-color,
$ui-secondary-color: hsl(240deg, 16%, 19%),
$ui-button-secondary-color: $grey-600,
$ui-button-secondary-border-color: $grey-600,
$ui-button-secondary-focus-color: $white,
$ui-button-tertiary-color: $blurple-500,
$ui-button-tertiary-border-color: $blurple-500,
$lighter-text-color: $classic-base-color,
$highlight-text-color: $classic-highlight-color,
$dark-text-color: hsl(240deg, 16%, 32%),
$lighter-text-color: hsl(240deg, 16%, 19%),
$highlight-text-color: $blurple-500,
$light-text-color: hsl(240deg, 16%, 32%),
$inverted-text-color: $black,

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

@ -13,12 +13,6 @@ $blurple-300: #858afa; // Faded Blue
$grey-600: hsl(240deg, 8%, 33%); // Trout
$grey-100: hsl(240deg, 51%, 90%); // Topaz
// Values from the classic Mastodon UI
$classic-base-color: hsl(240deg, 16%, 19%);
$classic-primary-color: hsl(240deg, 29%, 70%);
$classic-secondary-color: hsl(255deg, 25%, 88%);
$classic-highlight-color: $blurple-500;
// Variables for defaults in UI
$base-shadow-color: $black !default;
$base-overlay-background: $black !default;
@ -26,14 +20,14 @@ $base-border-color: $white !default;
$simple-background-color: $white !default;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-color: hsl(240deg, 16%, 19%) !default; // Darkest
$ui-base-lighter-color: lighten(
$ui-base-color,
26%
) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default;
$ui-primary-color: hsl(240deg, 29%, 70%) !default; // Lighter
$ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest
$ui-highlight-color: $blurple-500 !default;
$ui-button-color: $white !default;
$ui-button-background-color: $blurple-500 !default;
$ui-button-focus-background-color: $blurple-600 !default;
@ -56,7 +50,6 @@ $ui-button-tertiary-focus-background-color: $blurple-600 !default;
$ui-button-tertiary-focus-color: $white !default;
// Variables for texts
$dark-text-color: $ui-base-lighter-color !default;
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
$action-button-color: $ui-base-lighter-color !default;
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;

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

@ -708,7 +708,7 @@ kbd {
}
&__timestamp {
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
a,
@ -854,7 +854,7 @@ a.name-tag,
}
time {
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
}
@ -1088,7 +1088,7 @@ a.name-tag,
&__meta {
padding: 0 15px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
a {
color: inherit;
@ -1733,7 +1733,7 @@ a.sparkline {
&__description {
padding: 15px;
font-size: 14px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
}
@ -2168,7 +2168,7 @@ a.sparkline {
width: 8px;
height: 8px;
border-radius: 50%;
background: $dark-text-color;
background: var(--clr-text-tertiary);
}
&.success {

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

@ -1439,11 +1439,11 @@
line-height: 22px;
display: flex;
justify-content: space-between;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
.status__wrapper--filtered {
color: $dark-text-color;
color: var(--clr-text-tertiary);
border: 0;
font-size: inherit;
text-align: center;
@ -1612,7 +1612,7 @@
}
.notification__relative_time {
color: $dark-text-color;
color: var(--clr-text-tertiary);
float: right;
font-size: 14px;
padding-bottom: 1px;
@ -1683,7 +1683,7 @@
padding: 0 10px;
.detailed-status__display-name {
color: $dark-text-color;
color: var(--clr-text-tertiary);
span {
display: inline;
@ -1818,7 +1818,7 @@
.logo {
width: 40px;
height: 40px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
}
@ -1845,7 +1845,7 @@
.detailed-status__meta {
margin-top: 24px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
font-size: 14px;
line-height: 18px;
@ -2210,7 +2210,7 @@
color: var(--clr-text-secondary);
&--missing {
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
p {
@ -2500,11 +2500,11 @@ a.account__display-name {
.status__content,
.status__content p,
.status__content a {
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
.status__display-name strong {
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
.status__avatar {
@ -3449,7 +3449,7 @@ a.account__display-name {
&__source {
font-size: 13px;
line-height: 16px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
@container (width >= 400px) {
padding-inline-start: 60px;
@ -4130,7 +4130,7 @@ a.account__display-name {
}
.getting-started {
color: $dark-text-color;
color: var(--clr-text-tertiary);
overflow: auto;
border: 1px solid var(--clr-border-primary);
border-top: 0;
@ -4728,7 +4728,7 @@ a.status-card {
}
&:disabled {
color: $dark-text-color;
color: var(--clr-text-disabled);
cursor: default;
}
}
@ -4832,7 +4832,7 @@ a.status-card {
}
.loading-indicator {
color: $dark-text-color;
color: var(--clr-text-secondary);
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
@ -5135,7 +5135,7 @@ a.status-card {
}
&__placeholder {
color: $dark-text-color;
color: var(--clr-text-tertiary);
padding-inline-start: 2px;
font-size: 12px;
}
@ -5173,12 +5173,12 @@ a.status-card {
&__dropdown-indicator {
cursor: pointer;
transition: none;
color: $dark-text-color;
color: var(--clr-text-tertiary);
&:hover,
&:active,
&:focus {
color: lighten($dark-text-color, 4%);
color: var(--clr-text-secondary);
}
}
@ -5236,7 +5236,7 @@ a.status-card {
}
.empty-column-indicator {
color: $dark-text-color;
color: var(--clr-text-tertiary);
text-align: center;
padding: 20px;
font-size: 14px;
@ -5253,7 +5253,7 @@ a.status-card {
}
a {
color: $highlight-text-color;
color: var(--clr-text-accent);
text-decoration: none;
&:hover {
@ -5796,7 +5796,7 @@ a.status-card {
&__helper {
margin-top: 4px;
font-size: 0.8em;
color: var(--clr-text-secondary);
color: var(--clr-text-tertiary);
}
}
@ -6418,7 +6418,7 @@ a.status-card {
align-items: center;
gap: 4px;
margin-bottom: 8px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
bdi {
color: inherit;
@ -6429,7 +6429,7 @@ a.status-card {
display: -webkit-box;
font-size: 15px;
line-height: 22px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
line-clamp: 4;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
@ -6446,7 +6446,7 @@ a.status-card {
margin-top: 0;
font-size: 15px;
line-height: 22px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
}
@ -6538,7 +6538,7 @@ a.status-card {
&__hint {
font-size: 14px;
line-height: 20px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
.link-button {
@ -7223,7 +7223,7 @@ a.status-card {
&__icon {
flex: 0 0 auto;
color: $dark-text-color;
color: var(--clr-text-tertiary);
padding: 8px 18px;
cursor: default;
border-inline-end: 1px solid var(--clr-border-primary);
@ -7249,7 +7249,7 @@ a.status-card {
a {
text-decoration: none;
color: $dark-text-color;
color: var(--clr-text-tertiary);
font-weight: 500;
&:hover {
@ -7267,7 +7267,7 @@ a.status-card {
}
.icon {
color: $dark-text-color;
color: var(--clr-text-tertiary);
vertical-align: middle;
}
}
@ -8547,7 +8547,7 @@ noscript {
width: auto;
background: transparent;
text-transform: uppercase;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
dd {
@ -8671,7 +8671,7 @@ noscript {
border-radius: 4px;
&::placeholder {
color: $dark-text-color;
color: var(--clr-text-tertiary);
opacity: 1;
}
@ -8741,7 +8741,7 @@ noscript {
&__name {
flex: 1 1 auto;
color: $dark-text-color;
color: var(--clr-text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -9228,7 +9228,7 @@ noscript {
line-height: 21px;
font-weight: 500;
cursor: pointer;
color: $dark-text-color;
color: var(--clr-text-tertiary);
aspect-ratio: 16 / 9;
.icon {
@ -9310,7 +9310,7 @@ noscript {
.search__icon {
top: 12px;
inset-inline-end: 12px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
}
@ -10100,7 +10100,7 @@ noscript {
}
&__footer {
color: $dark-text-color;
color: var(--clr-text-tertiary);
text-align: center;
font-size: 15px;
line-height: 22px;
@ -10347,10 +10347,10 @@ noscript {
width: auto;
padding: 15px;
margin: 0;
color: $white;
background: color.change($black, $alpha: 0.85);
color: var(--clr-text-on-inverted);
background: var(--clr-bg-inverted);
backdrop-filter: blur(8px);
border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
border: 1px solid var(--clr-border-on-bg-inverted);
border-radius: 8px;
box-shadow:
0 10px 15px -3px color.change($base-shadow-color, $alpha: 0.25),
@ -10394,7 +10394,7 @@ noscript {
background: transparent;
text-transform: uppercase;
cursor: pointer;
color: $blurple-300;
color: var(--clr-text-accent);
font-weight: 700;
border-radius: 4px;
padding: 0 4px;
@ -10402,7 +10402,7 @@ noscript {
&:hover,
&:focus,
&:active {
background: color.change($white, $alpha: 0.15);
background: var(--clr-bg-accent-subtle);
}
}
@ -10678,7 +10678,7 @@ noscript {
&__source {
display: inline-flex;
align-items: center;
color: $dark-text-color;
color: var(--clr-text-tertiary);
gap: 4px;
overflow: hidden;
white-space: nowrap;
@ -10934,7 +10934,7 @@ noscript {
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: $dark-text-color;
color: var(--clr-text-tertiary);
.icon {
width: 28px;
@ -10958,7 +10958,7 @@ noscript {
&--relationships-severance-event &__icon,
&--admin-report &__icon,
&--admin-sign-up &__icon {
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
&--moderation-warning &__icon {
@ -11014,7 +11014,7 @@ noscript {
}
time {
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
@container (width < 350px) {
@ -11033,7 +11033,7 @@ noscript {
}
&__additional-content {
color: $dark-text-color;
color: var(--clr-text-tertiary);
margin-top: -8px; // to offset the parent's `gap` property
font-size: 15px;
line-height: 22px;
@ -11055,7 +11055,7 @@ noscript {
display: flex;
align-items: center;
gap: 4px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
font-size: 15px;
line-height: 22px;
@ -11093,7 +11093,7 @@ noscript {
margin-top: 0;
font-size: 15px;
line-height: 22px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
}
}
@ -11114,7 +11114,7 @@ noscript {
display: flex;
align-items: center;
gap: 8px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
font-size: 15px;
line-height: 22px;
font-weight: 500;
@ -11285,7 +11285,7 @@ noscript {
&__note {
&-label {
color: $dark-text-color;
color: var(--clr-text-tertiary);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
@ -11318,7 +11318,7 @@ noscript {
&__account {
display: block;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
}
@ -11345,7 +11345,7 @@ noscript {
dt {
flex: 0 1 auto;
color: $dark-text-color;
color: var(--clr-text-tertiary);
min-width: 0;
overflow: hidden;
white-space: nowrap;

4
app/javascript/styles/mastodon/css_variables.scss
View File

@ -35,6 +35,7 @@
--clr-text-primary: var(--clr-grey-50);
--clr-text-secondary: var(--clr-grey-400);
--clr-text-tertiary: var(--clr-grey-500);
--clr-text-on-inverted: var(--clr-grey-950);
--clr-text-accent: var(--clr-indigo-400);
--clr-text-accent-subtle: color-mix(
@ -77,7 +78,7 @@
);
--clr-bg-ambient: var(--clr-bg-primary);
--clr-bg-elevated: var(--clr-grey-800);
--clr-bg-inverted: var(--clr-grey-950);
--clr-bg-inverted: var(--clr-grey-50);
--clr-bg-disabled: var(--clr-grey-700);
--clr-bg-accent-subtle-base: var(--clr-indigo-400);
--clr-bg-accent-subtle-strength: 10%;
@ -159,6 +160,7 @@
var(--clr-text-success),
50%
)};
--clr-border-on-bg-inverted: var(--clr-border-primary);
/* GRAPHS/CHARTS TOKENS */

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

@ -228,7 +228,7 @@
.emoji-mart-no-results {
font-size: 14px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
text-align: center;
padding: 5px 6px;
padding-top: 70px;

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

@ -694,7 +694,7 @@ code {
top: 1px;
padding: 10px;
font-size: 14px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
font-family: inherit;
pointer-events: none;
cursor: default;

14
app/javascript/styles/mastodon/polls.scss
View File

@ -145,16 +145,16 @@
}
&.disabled {
border-color: $dark-text-color;
border-color: var(--clr-text-disabled);
&.active {
background: $dark-text-color;
background: var(--clr-text-disabled);
}
&:active,
&:focus,
&:hover {
border-color: $dark-text-color;
border-color: var(--clr-text-disabled);
border-width: 1px;
}
}
@ -189,7 +189,7 @@
&__footer {
padding-top: 6px;
padding-bottom: 5px;
color: $dark-text-color;
color: var(--clr-text-tertiary);
}
&__link {
@ -198,7 +198,7 @@
padding: 0;
margin: 0;
border: 0;
color: $dark-text-color;
color: var(--clr-text-tertiary);
text-decoration: underline;
font-size: inherit;
@ -208,7 +208,7 @@
&:active,
&:focus {
background-color: color.change($dark-text-color, $alpha: 0.1);
background-color: var(--clr-bg-secondary);
}
}
@ -221,7 +221,7 @@
}
.muted .poll {
color: $dark-text-color;
color: var(--clr-text-tertiary);
&__chart {
background: rgba(darken($ui-primary-color, 14%), 0.7);