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;
@use '../mastodon/variables' with (
$highlight-text-color: lighten($ui-highlight-color, 10%),
$action-button-color: lighten($ui-base-color, 50%),
$inverted-text-color: #000,
$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 *;
.simple_form .button.button-tertiary {
color: $highlight-text-color;
color: var(--clr-text-accent);
&:hover,
&:focus,
@ -316,7 +316,7 @@
.status__content,
.reply-indicator__content {
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,
$lighter-text-color: hsl(240deg, 16%, 19%),
$highlight-text-color: $blurple-500,
$light-text-color: hsl(240deg, 16%, 32%),
$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;
// Variables for texts
$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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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