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 $highlight-text-color

Browse Source
This commit is contained in:
diondiondion 2025-09-02 17:38:25 +02:00
parent 0405b97d4e
commit a05127667b
12 changed files with 89 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,6 @@ $ui-secondary-color: hsl(255deg, 25%, 88%) !default;
$ui-highlight-color: hsl(240deg, 100%, 69%) !default; $ui-highlight-color: hsl(240deg, 100%, 69%) !default;
@use '../mastodon/variables' with ( @use '../mastodon/variables' with (
$highlight-text-color: lighten($ui-highlight-color, 10%),
$action-button-color: lighten($ui-base-color, 50%), $action-button-color: lighten($ui-base-color, 50%),
$inverted-text-color: #000, $inverted-text-color: #000,
$lighter-text-color: darken($ui-base-color, 6%), $lighter-text-color: darken($ui-base-color, 6%),

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

@ -6,7 +6,7 @@
@use '../mastodon/theme_utils' as *; @use '../mastodon/theme_utils' as *;
.simple_form .button.button-tertiary { .simple_form .button.button-tertiary {
color: $highlight-text-color; color: var(--clr-text-accent);
&:hover, &:hover,
&:focus, &:focus,
@ -316,7 +316,7 @@
.status__content, .status__content,
.reply-indicator__content { .reply-indicator__content {
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }

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

@ -24,7 +24,6 @@ $grey-100: hsl(240deg, 51%, 90%); // Topaz
$ui-button-tertiary-border-color: $blurple-500, $ui-button-tertiary-border-color: $blurple-500,
$lighter-text-color: hsl(240deg, 16%, 19%), $lighter-text-color: hsl(240deg, 16%, 19%),
$highlight-text-color: $blurple-500,
$light-text-color: hsl(240deg, 16%, 32%), $light-text-color: hsl(240deg, 16%, 32%),
$inverted-text-color: $black, $inverted-text-color: $black,

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

@ -50,7 +50,6 @@ $ui-button-tertiary-focus-background-color: $blurple-600 !default;
$ui-button-tertiary-focus-color: $white !default; $ui-button-tertiary-focus-color: $white !default;
// Variables for texts // Variables for texts
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
$action-button-color: $ui-base-lighter-color !default; $action-button-color: $ui-base-lighter-color !default;
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default; $action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;

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

@ -68,8 +68,8 @@ $fluid-breakpoint: $maximum-width + 20px;
position: absolute; position: absolute;
inset-inline-start: 0; inset-inline-start: 0;
top: 1em; top: 1em;
background: $highlight-text-color; background: var(--clr-bg-accent-strong);
color: $ui-base-color; color: var(--clr-text-on-accent-strong);
border-radius: 50%; border-radius: 50%;
width: 4ch; width: 4ch;
height: 4ch; height: 4ch;

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

@ -222,8 +222,8 @@
display: inline-flex; display: inline-flex;
padding: 4px; padding: 4px;
padding-inline-end: 8px; padding-inline-end: 8px;
border: 1px solid $highlight-text-color; border: 1px solid var(--clr-text-accent);
color: $highlight-text-color; color: var(--clr-text-accent);
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -283,7 +283,7 @@
width: 120px; width: 120px;
flex: 0 0 auto; flex: 0 0 auto;
color: var(--clr-text-primary); color: var(--clr-text-primary);
background: rgba(darken($ui-base-color, 8%), 0.5); background: var(--clr-bg-secondary);
} }
dd { dd {
@ -292,7 +292,7 @@
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: none; text-decoration: none;
&:hover, &:hover,

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

@ -152,7 +152,7 @@ $content-width: 840px;
} }
.simple-navigation-active-leaf a { .simple-navigation-active-leaf a {
color: $highlight-text-color; color: var(--clr-text-accent);
border-bottom: 0; border-bottom: 0;
} }
} }
@ -556,7 +556,7 @@ kbd {
} }
&.selected { &.selected {
color: $highlight-text-color; color: var(--clr-text-accent);
border-bottom: 2px solid $ui-highlight-color; border-bottom: 2px solid $ui-highlight-color;
} }
} }
@ -640,7 +640,7 @@ kbd {
font-size: 14px; font-size: 14px;
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -992,7 +992,7 @@ a.name-tag,
border: 1px solid var(--clr-border-primary); border: 1px solid var(--clr-border-primary);
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
dl:first-child .verified { dl:first-child .verified {
@ -1055,7 +1055,7 @@ a.name-tag,
margin-bottom: 10px; margin-bottom: 10px;
&:hover { &:hover {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
.account-role { .account-role {
@ -1693,7 +1693,7 @@ a.sparkline {
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -1789,7 +1789,7 @@ a.sparkline {
border-radius: 4px; border-radius: 4px;
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -1916,9 +1916,9 @@ a.sparkline {
align-items: center; align-items: center;
width: calc(1.375rem + 1px); width: calc(1.375rem + 1px);
height: calc(1.375rem + 1px); height: calc(1.375rem + 1px);
background: $ui-base-color; background: var(--clr-bg-primary);
border: 1px solid $highlight-text-color; border: 1px solid var(--clr-text-accent);
color: $highlight-text-color; color: var(--clr-text-accent);
border-radius: 8px; border-radius: 8px;
} }
@ -1926,7 +1926,7 @@ a.sparkline {
position: absolute; position: absolute;
content: ''; content: '';
width: 1px; width: 1px;
background: $highlight-text-color; background: var(--clr-text-accent);
bottom: 0; bottom: 0;
top: calc(1.875rem + 1px); top: calc(1.875rem + 1px);
inset-inline-start: 0.6875rem; inset-inline-start: 0.6875rem;

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

@ -447,12 +447,12 @@
} }
&.active { &.active {
color: $highlight-text-color; color: var(--clr-text-accent);
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: $highlight-text-color; color: var(--clr-text-accent);
background-color: transparent; background-color: transparent;
} }
} }
@ -711,8 +711,8 @@
.spoiler-input__input { .spoiler-input__input {
padding: 12px 12px - 5px; padding: 12px 12px - 5px;
background: color.change($ui-highlight-color, $alpha: 0.05); background: var(--clr-bg-accent-subtle);
color: $highlight-text-color; color: var(--clr-text-accent);
} }
&__dropdowns { &__dropdowns {
@ -1199,7 +1199,7 @@
} }
a.unhandled-link { a.unhandled-link {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
.status__content__text { .status__content__text {
@ -1352,7 +1352,7 @@
overflow: hidden; overflow: hidden;
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
@ -1419,7 +1419,7 @@
} }
&.unhandled-link { &.unhandled-link {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
} }
@ -1434,7 +1434,7 @@
align-items: center; align-items: center;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
color: $highlight-text-color; color: var(--clr-text-accent);
border: 0; border: 0;
background: transparent; background: transparent;
padding: 0; padding: 0;
@ -1938,7 +1938,7 @@
} }
.status__prepend { .status__prepend {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
@ -2112,10 +2112,10 @@
&__domain-pill { &__domain-pill {
display: inline-flex; display: inline-flex;
background: color.change($highlight-text-color, $alpha: 0.2); background: var(--clr-bg-accent-subtle);
border-radius: 4px; border-radius: 4px;
border: 0; border: 0;
color: $highlight-text-color; color: var(--clr-text-accent);
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@ -2172,10 +2172,10 @@
} }
&__handle { &__handle {
border: 2px dashed $highlight-text-color; border: 2px dashed var(--clr-border-on-accent-subtle);
background: color.change($highlight-text-color, $alpha: 0.1); background: var(--clr-bg-accent-subtle);
padding: 12px 8px; padding: 12px 8px;
color: $highlight-text-color; color: var(--clr-text-accent);
border-radius: 4px; border-radius: 4px;
&__label { &__label {
@ -2211,7 +2211,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
color: $highlight-text-color; color: var(--clr-text-accent);
} }
h6 { h6 {
@ -3617,7 +3617,7 @@ a.account__display-name {
} }
.copy-paste-text { .copy-paste-text {
background: lighten($ui-base-color, 4%); background: var(--clr-bg-secondary);
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--clr-border-primary); border: 1px solid var(--clr-border-primary);
padding: 16px; padding: 16px;
@ -3634,7 +3634,7 @@ a.account__display-name {
&.focused { &.focused {
transition: none; transition: none;
outline: 0; outline: 0;
border-color: $highlight-text-color; border-color: var(--clr-text-accent);
} }
&.copied { &.copied {
@ -3938,7 +3938,7 @@ a.account__display-name {
background: transparent; background: transparent;
border: 1px solid var(--clr-border-primary); border: 1px solid var(--clr-border-primary);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
color: $highlight-text-color; color: var(--clr-text-accent);
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
font-size: 16px; font-size: 16px;
@ -3964,7 +3964,7 @@ a.account__display-name {
background: transparent; background: transparent;
border: 0; border: 0;
font-family: inherit; font-family: inherit;
color: $highlight-text-color; color: var(--clr-text-accent);
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
font-size: 16px; font-size: 16px;
@ -4293,7 +4293,7 @@ a.status-card {
.status-card__host, .status-card__host,
.status-card__author, .status-card__author,
.status-card__description { .status-card__description {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
} }
@ -4309,7 +4309,7 @@ a.status-card {
.status-card__host, .status-card__host,
.status-card__author, .status-card__author,
.status-card__description { .status-card__description {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
} }
@ -4529,14 +4529,14 @@ a.status-card {
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: none; text-decoration: none;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
text-decoration: underline; text-decoration: underline;
color: lighten($highlight-text-color, 4%); color: var(--clr-text-accent-subtle);
} }
} }
@ -4588,7 +4588,7 @@ a.status-card {
z-index: 1; z-index: 1;
&.active { &.active {
box-shadow: 0 1px 0 color.change($highlight-text-color, $alpha: 0.3); box-shadow: 0 1px 0 var(--clr-bg-accent-subtle);
&::before { &::before {
display: block; display: block;
@ -4635,12 +4635,12 @@ a.status-card {
&__mode-button { &__mode-button {
margin-left: auto; margin-left: auto;
color: $highlight-text-color; color: var(--clr-text-accent);
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
color: lighten($highlight-text-color, 6%); color: var(--clr-text-accent-subtle);
} }
} }
} }
@ -4688,7 +4688,7 @@ a.status-card {
.column-header__back-button { .column-header__back-button {
flex: 1; flex: 1;
color: $highlight-text-color; color: var(--clr-text-accent);
&.compact { &.compact {
flex: 0 0 auto; flex: 0 0 auto;
@ -4698,8 +4698,8 @@ a.status-card {
&.active { &.active {
.column-header__icon { .column-header__icon {
color: $highlight-text-color; color: var(--clr-text-accent);
text-shadow: 0 0 10px color.change($highlight-text-color, $alpha: 0.4); text-shadow: 0 0 10px var(--clr-bg-accent-subtle);
} }
} }
@ -5291,7 +5291,7 @@ a.status-card {
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -6085,7 +6085,7 @@ a.status-card {
} }
button { button {
color: $highlight-text-color; color: var(--clr-text-accent);
padding: 0; padding: 0;
border: 0; border: 0;
background: 0; background: 0;
@ -6354,7 +6354,7 @@ a.status-card {
&:focus { &:focus {
outline: 0; outline: 0;
background-color: $highlight-text-color; background-color: var(--clr-text-accent);
} }
} }
@ -6851,7 +6851,7 @@ a.status-card {
a { a {
text-decoration: none; text-decoration: none;
color: $highlight-text-color; color: var(--clr-text-accent);
font-weight: 500; font-weight: 500;
&:hover { &:hover {
@ -6876,7 +6876,7 @@ a.status-card {
} }
.status__content a { .status__content a {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
.status__content, .status__content,
@ -7041,7 +7041,7 @@ a.status-card {
overflow-x: hidden; overflow-x: hidden;
.status__content a { .status__content a {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
.status__content, .status__content,
@ -7157,7 +7157,7 @@ a.status-card {
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
hr { hr {
@ -7177,7 +7177,7 @@ a.status-card {
} }
.loading-bar { .loading-bar {
background-color: $highlight-text-color; background-color: var(--clr-bg-accent-strong);
height: 3px; height: 3px;
position: fixed; position: fixed;
top: 0; top: 0;
@ -8258,7 +8258,7 @@ noscript {
max-width: 400px; max-width: 400px;
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
@ -9097,7 +9097,7 @@ noscript {
&__item { &__item {
flex-shrink: 0; flex-shrink: 0;
background: lighten($ui-base-color, 12%); background: var(--clr-bg-tertiary);
color: var(--clr-text-secondary); color: var(--clr-text-secondary);
border: 0; border: 0;
border-radius: 3px; border-radius: 3px;
@ -9139,7 +9139,7 @@ noscript {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 16%); background: var(--clr-bg-accent-subtle);
transition: all 200ms ease-out; transition: all 200ms ease-out;
transition-property: background-color, color; transition-property: background-color, color;
color: color-mix( color: color-mix(
@ -9152,12 +9152,8 @@ noscript {
&.active { &.active {
transition: all 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color, color; transition-property: background-color, color;
background-color: color.mix( background-color: var(--clr-bg-accent-subtle);
lighten($ui-base-color, 12%), color: var(--clr-text-accent);
$ui-highlight-color,
80%
);
color: lighten($highlight-text-color, 8%);
} }
} }
@ -9448,7 +9444,7 @@ noscript {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
@ -9484,7 +9480,7 @@ noscript {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
} }
@ -9960,7 +9956,7 @@ noscript {
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: underline; text-decoration: underline;
&:focus, &:focus,
@ -10017,8 +10013,8 @@ noscript {
margin: 10px; margin: 10px;
margin-bottom: 5px; margin-bottom: 5px;
border-radius: 8px; border-radius: 8px;
border: 1px solid $highlight-text-color; border: 1px solid var(--clr-border-on-bg-accent-subtle);
background: color.change($highlight-text-color, $alpha: 0.15); background: var(--clr-bg-accent-subtle);
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
@ -10049,7 +10045,7 @@ noscript {
} }
h1 { h1 {
color: $highlight-text-color; color: var(--clr-text-accent);
font-size: 22px; font-size: 22px;
line-height: 33px; line-height: 33px;
font-weight: 700; font-weight: 700;
@ -10083,7 +10079,7 @@ noscript {
padding: 15px 10px; padding: 15px 10px;
.icon-button { .icon-button {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
} }
@ -10344,7 +10340,7 @@ noscript {
padding: 20px; padding: 20px;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--clr-border-primary); border: 1px solid var(--clr-border-primary);
color: $highlight-text-color; color: var(--clr-text-accent);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
background: none; background: none;
@ -10995,7 +10991,7 @@ noscript {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
} }
@ -11277,7 +11273,7 @@ noscript {
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-inline-start: 4px solid $highlight-text-color; border-inline-start: 4px solid var(--clr-text-accent);
pointer-events: none; pointer-events: none;
} }
} }

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

@ -149,7 +149,7 @@
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;

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

@ -51,10 +51,10 @@
} }
.emoji-mart-anchor-selected { .emoji-mart-anchor-selected {
color: $highlight-text-color; color: var(--clr-text-accent);
&:hover { &:hover {
color: lighten($highlight-text-color, 4%); color: var(--clr-text-accent-subtle);
} }
.emoji-mart-anchor-bar { .emoji-mart-anchor-bar {
@ -68,7 +68,7 @@
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 4px; height: 4px;
background-color: $highlight-text-color; background-color: var(--clr-text-accent);
} }
.emoji-mart-anchors { .emoji-mart-anchors {

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

@ -145,7 +145,7 @@ code {
} }
label a { label a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-decoration: underline; text-decoration: underline;
&:hover, &:hover,
@ -195,7 +195,7 @@ code {
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
@ -209,7 +209,7 @@ code {
color: var(--clr-text-secondary); color: var(--clr-text-secondary);
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
code { code {
@ -892,7 +892,7 @@ code {
} }
a { a {
color: $highlight-text-color; color: var(--clr-text-accent);
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: 700;
@ -900,7 +900,7 @@ code {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: lighten($highlight-text-color, 8%); color: var(--clr-text-accent-subtle);
} }
} }
} }
@ -1242,7 +1242,7 @@ code {
flex: 1 1 auto; flex: 1 1 auto;
&.completed { &.completed {
background: $highlight-text-color; background: var(--clr-text-accent);
} }
} }
@ -1290,14 +1290,14 @@ code {
} }
.active .circle { .active .circle {
border-color: $highlight-text-color; border-color: var(--clr-text-accent);
&::before { &::before {
content: ''; content: '';
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: $highlight-text-color; background: var(--clr-text-accent);
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -1306,8 +1306,8 @@ code {
} }
.completed .circle { .completed .circle {
border-color: $highlight-text-color; border-color: var(--clr-text-accent);
background: $highlight-text-color; background: var(--clr-text-accent);
} }
} }

8
app/javascript/styles/mastodon/tables.scss
View File

@ -46,7 +46,7 @@
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
@ -143,7 +143,7 @@ a.table-action-link {
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
&:first-child { &:first-child {
@ -248,7 +248,7 @@ a.table-action-link {
background: transparent; background: transparent;
border: 0; border: 0;
font: inherit; font: inherit;
color: $highlight-text-color; color: var(--clr-text-accent);
border-radius: 4px; border-radius: 4px;
font-weight: 700; font-weight: 700;
padding: 8px; padding: 8px;
@ -256,7 +256,7 @@ a.table-action-link {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 8%); background: var(--clr-bg-secondary);
} }
} }
} }