gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-12-13 15:22:41 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Replace success/warning/error tokens

Browse Source
This commit is contained in:
diondiondion 2025-09-02 16:11:11 +02:00
parent f40871ed3a
commit 09027ab86a
12 changed files with 95 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -283,16 +283,9 @@
.simple_form { .simple_form {
.warning { .warning {
box-shadow: none; box-shadow: none;
background: color.change($error-red, $alpha: 0.5);
text-shadow: none; text-shadow: none;
} }
.recommended {
border-color: $ui-highlight-color;
color: $ui-highlight-color;
background-color: color.change($ui-highlight-color, $alpha: 0.1);
}
input[type='text'], input[type='text'],
input[type='number'], input[type='number'],
input[type='email'], input[type='email'],

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

@ -16,11 +16,6 @@ $classic-secondary-color: hsl(255deg, 25%, 88%);
$classic-highlight-color: $blurple-500; $classic-highlight-color: $blurple-500;
@use '../mastodon/variables' with ( @use '../mastodon/variables' with (
$success-green: color.adjust(
hsl(138deg, 32%, 35%),
$lightness: 8%,
$space: hsl
),
$base-overlay-background: $white, $base-overlay-background: $white,
$ui-base-color: $classic-secondary-color, $ui-base-color: $classic-secondary-color,

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

@ -13,13 +13,6 @@ $blurple-300: #858afa; // Faded Blue
$grey-600: hsl(240deg, 8%, 33%); // Trout $grey-600: hsl(240deg, 8%, 33%); // Trout
$grey-100: hsl(240deg, 51%, 90%); // Topaz $grey-100: hsl(240deg, 51%, 90%); // Topaz
$success-green: #79bd9a !default; // Padua
$error-red: $red-500 !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
$red-bookmark: $warning-red;
// Values from the classic Mastodon UI // Values from the classic Mastodon UI
$classic-base-color: hsl(240deg, 16%, 19%); $classic-base-color: hsl(240deg, 16%, 19%);
$classic-primary-color: hsl(240deg, 29%, 70%); $classic-primary-color: hsl(240deg, 29%, 70%);
@ -67,8 +60,6 @@ $dark-text-color: $ui-base-lighter-color !default;
$highlight-text-color: lighten($ui-highlight-color, 8%) !default; $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;
$passive-text-color: $gold-star !default;
$active-passive-text-color: $success-green !default;
// For texts on inverted backgrounds // For texts on inverted backgrounds
$inverted-text-color: $ui-base-color !default; $inverted-text-color: $ui-base-color !default;

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

@ -247,9 +247,9 @@
} }
.simple_form .not_recommended { .simple_form .not_recommended {
color: lighten($error-red, 12%); color: var(--clr-text-error);
background-color: rgba(lighten($error-red, 12%), 0.1); background-color: var(--clr-bg-error-subtle);
border-color: rgba(lighten($error-red, 12%), 0.5); border-color: var(--clr-border-on-bg-error-subtle);
} }
.account__header__fields { .account__header__fields {
@ -382,7 +382,7 @@
} }
.batch-table__row--attention { .batch-table__row--attention {
color: $gold-star; color: var(--clr-text-warning);
} }
.batch-table__row--attention .pending-account__header, .batch-table__row--attention .pending-account__header,
@ -391,7 +391,7 @@
&, &,
a, a,
strong { strong {
color: $gold-star; color: var(--clr-text-warning);
} }
} }
@ -399,6 +399,6 @@
tbody td.accounts-table__extra, tbody td.accounts-table__extra,
&__count, &__count,
&__count small { &__count small {
color: $gold-star; color: var(--clr-text-warning);
} }
} }

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

@ -147,7 +147,7 @@ $content-width: 840px;
} }
.warning a { .warning a {
color: $gold-star; color: var(--clr-text-warning);
font-weight: 700; font-weight: 700;
} }
@ -759,13 +759,13 @@ kbd {
} }
&__timestamp { &__timestamp {
color: $dark-text-color; color: var(--clr-text-secondary);
} }
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: $ui-base-color; background: var(--clr-bg-primary);
} }
} }
@ -777,7 +777,7 @@ a.inline-name-tag,
color: var(--clr-text-primary); color: var(--clr-text-primary);
&:hover { &:hover {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
.username { .username {
@ -787,7 +787,7 @@ a.inline-name-tag,
&.suspended { &.suspended {
.username { .username {
text-decoration: line-through; text-decoration: line-through;
color: lighten($error-red, 12%); color: var(--clr-text-error);
} }
.avatar { .avatar {
@ -820,18 +820,18 @@ a.name-tag,
.speech-bubble { .speech-bubble {
margin-bottom: 20px; margin-bottom: 20px;
border-inline-start: 4px solid $ui-highlight-color; border-inline-start: 4px solid var(--clr-text-accent);
&.positive { &.positive {
border-left-color: $success-green; border-color: var(--clr-text-success);
} }
&.negative { &.negative {
border-left-color: lighten($error-red, 12%); border-color: var(--clr-text-error);
} }
&.warning { &.warning {
border-left-color: $gold-star; border-color: var(--clr-text-warning);
} }
&__bubble { &__bubble {
@ -1131,11 +1131,11 @@ a.name-tag,
&.expired { &.expired {
.expiration { .expiration {
color: lighten($error-red, 12%); color: var(--clr-text-error);
} }
.permissions-list__item__icon { .permissions-list__item__icon {
color: $dark-text-color; color: var(--clr-text-secondary);
} }
} }
} }
@ -1278,12 +1278,12 @@ a.name-tag,
} }
path:first-child { path:first-child {
fill: var(--clr-bg-accent-subtle) !important; fill: var(--clr-graph-primary-fill) !important;
fill-opacity: 1 !important; fill-opacity: 1 !important;
} }
path:last-child { path:last-child {
stroke: var(--clr-text-accent) !important; stroke: var(--clr-graph-primary-stroke) !important;
fill: none !important; fill: none !important;
} }
} }

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

@ -170,7 +170,7 @@
} }
path:last-child { path:last-child {
stroke: var(--indigo-3) !important; stroke: var(--clr-graph-primary-stroke) !important;
fill: none !important; fill: none !important;
} }
} }

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

@ -213,7 +213,7 @@ button {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 1.7; line-height: 1.7;
color: lighten($error-red, 4%); color: var(--clr-text-error);
text-align: center; text-align: center;
& > div { & > div {

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

@ -1072,7 +1072,7 @@
text-align: end; text-align: end;
&.character-counter--over { &.character-counter--over {
color: $error-red; color: var(--clr-text-error);
} }
} }
@ -2615,13 +2615,13 @@ a.account__display-name {
gap: 10px; gap: 10px;
.icon { .icon {
color: $highlight-text-color; color: var(--clr-text-accent);
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.icon-star { .icon-star {
color: $gold-star; color: var(--clr-text-favourite-highlight);
} }
> span { > span {
@ -2632,11 +2632,11 @@ a.account__display-name {
} }
.icon-button.star-icon.active { .icon-button.star-icon.active {
color: $gold-star; color: var(--clr-text-favourite-highlight);
} }
.icon-button.bookmark-icon.active { .icon-button.bookmark-icon.active {
color: var(--mas-accent-bookmark); color: var(--clr-text-bookmark-highlight);
} }
.no-reduce-motion .icon-button.star-icon { .no-reduce-motion .icon-button.star-icon {
@ -3567,14 +3567,14 @@ a.account__display-name {
position: absolute; position: absolute;
inset-inline-start: 9px; inset-inline-start: 9px;
top: -13px; top: -13px;
background: $ui-highlight-color; color: var(--clr-text-on-accent-strong);
background: var(--clr-bg-accent-strong);
border: 2px solid var(--clr-bg-primary); border: 2px solid var(--clr-bg-primary);
padding: 1px 6px; padding: 1px 6px;
border-radius: 6px; border-radius: 6px;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
line-height: 14px; line-height: 14px;
color: var(--clr-text-primary);
} }
&__issue-badge { &__issue-badge {
@ -3582,7 +3582,7 @@ a.account__display-name {
inset-inline-start: 11px; inset-inline-start: 11px;
bottom: 1px; bottom: 1px;
display: block; display: block;
background: $error-red; background: var(--clr-text-error);
border-radius: 50%; border-radius: 50%;
width: 0.625rem; width: 0.625rem;
height: 0.625rem; height: 0.625rem;
@ -4862,10 +4862,9 @@ a.status-card {
} }
.column-header__issue-btn { .column-header__issue-btn {
color: $warning-red; color: var(--clr-text-error);
&:hover { &:hover {
color: $error-red;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -6294,54 +6293,34 @@ a.status-card {
padding: 16px; padding: 16px;
.icon-button { .icon-button {
color: $white; --default-icon-color: white;
--default-bg-color: transparent;
--hover-icon-color: white;
--hover-bg-color: rgb(255 255 255 / 12%);
.icon { .icon {
filter: var(--overlay-icon-shadow); filter: var(--overlay-icon-shadow);
} }
&:hover,
&:focus,
&:active {
color: $white;
background-color: color.change($white, $alpha: 0.15);
}
&:focus {
background-color: color.change($white, $alpha: 0.3);
}
&.active { &.active {
color: $highlight-text-color; --default-icon-color: var(--clr-text-accent);
--hover-icon-color: var(--clr-text-accent);
&:hover, --hover-bg-color: var(--clr-bg-accent-subtle-highlighted);
&:focus,
&:active {
background: color.change($highlight-text-color, $alpha: 0.15);
}
&:focus {
background: color.change($highlight-text-color, $alpha: 0.3);
}
} }
&.star-icon.active { &.star-icon.active {
color: $gold-star; --default-icon-color: var(--clr-text-favourite-highlight);
--hover-icon-color: var(--clr-text-favourite-highlight);
&:hover, --hover-bg-color: rgb(
&:focus, from var(--clr-text-favourite-highlight) r g b /
&:active { var(--clr-bg-accent-subtle-strength)
background: color.change($gold-star, $alpha: 0.15); );
}
&:focus {
background: color.change($gold-star, $alpha: 0.3);
}
} }
&.disabled { &.disabled {
color: $white; --default-icon-color: white;
background-color: transparent; --default-bg-color: transparent;
cursor: default; cursor: default;
opacity: 0.4; opacity: 0.4;
} }
@ -8880,60 +8859,60 @@ noscript {
width: 50px; width: 50px;
path:first-child { path:first-child {
fill: color.change($highlight-text-color, $alpha: 0.25) !important; fill: var(--clr-graph-primary-fill) !important;
fill-opacity: 1 !important; fill-opacity: 1 !important;
} }
path:last-child { path:last-child {
stroke: lighten($highlight-text-color, 6%) !important; stroke: var(--clr-graph-primary-stroke) !important;
fill: none !important; fill: none !important;
} }
} }
&--requires-review { &--requires-review {
.trends__item__name { .trends__item__name {
color: $gold-star; color: var(--clr-text-warning);
a { a {
color: $gold-star; color: var(--clr-text-warning);
} }
} }
.trends__item__current { .trends__item__current {
color: $gold-star; color: var(--clr-text-warning);
} }
.trends__item__sparkline { .trends__item__sparkline {
path:first-child { path:first-child {
fill: color.change($gold-star, $alpha: 0.25) !important; fill: var(--clr-graph-warning-fill) !important;
} }
path:last-child { path:last-child {
stroke: lighten($gold-star, 6%) !important; stroke: var(--clr-graph-warning-stroke) !important;
} }
} }
} }
&--disabled { &--disabled {
.trends__item__name { .trends__item__name {
color: lighten($ui-base-color, 12%); color: var(--clr-text-disabled);
a { a {
color: lighten($ui-base-color, 12%); color: var(--clr-text-disabled);
} }
} }
.trends__item__current { .trends__item__current {
color: lighten($ui-base-color, 12%); color: var(--clr-text-disabled);
} }
.trends__item__sparkline { .trends__item__sparkline {
path:first-child { path:first-child {
fill: rgba(lighten($ui-base-color, 12%), 0.25) !important; fill: var(--clr-graph-disabled-fill) !important;
} }
path:last-child { path:last-child {
stroke: lighten(lighten($ui-base-color, 12%), 6%) !important; stroke: var(--clr-graph-disabled-stroke) !important;
} }
} }
} }
@ -8951,7 +8930,7 @@ noscript {
padding-bottom: 0; padding-bottom: 0;
&:focus { &:focus {
background: lighten($ui-base-color, 2%); background: var(--clr-bg-secondary);
outline: 0; outline: 0;
} }
@ -8965,7 +8944,7 @@ noscript {
&__unread { &__unread {
display: inline-block; display: inline-block;
background: $highlight-text-color; background: var(--clr-text-accent);
border-radius: 50%; border-radius: 50%;
width: 0.625rem; width: 0.625rem;
height: 0.625rem; height: 0.625rem;
@ -9034,7 +9013,7 @@ noscript {
} }
&__root { &__root {
background: lighten($ui-base-color, 8%); background: var(--clr-bg-accent-subtle);
font-size: 13px; font-size: 13px;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -9082,7 +9061,7 @@ noscript {
top: 19px; top: 19px;
inset-inline-end: 19px; inset-inline-end: 19px;
display: block; display: block;
background: $highlight-text-color; background: var(--clr-text-accent);
border-radius: 50%; border-radius: 50%;
width: 0.625rem; width: 0.625rem;
height: 0.625rem; height: 0.625rem;
@ -9767,7 +9746,7 @@ noscript {
} }
&.invalid &__input { &.invalid &__input {
border-color: $error-red; border-color: var(--clr-text-error);
} }
&.expanded .search__popout { &.expanded .search__popout {
@ -9823,49 +9802,6 @@ noscript {
} }
} }
.copypaste {
display: flex;
align-items: center;
gap: 10px;
input {
display: block;
font-family: inherit;
background: darken($ui-base-color, 8%);
border: 1px solid $highlight-text-color;
color: var(--clr-text-secondary);
border-radius: 4px;
padding: 6px 9px;
line-height: 22px;
font-size: 14px;
transition: border-color 300ms linear;
flex: 1 1 auto;
overflow: hidden;
&:focus {
outline: 0;
background: darken($ui-base-color, 4%);
}
}
.button {
flex: 0 0 auto;
transition: background 300ms linear;
}
&.copied {
input {
border: 1px solid var(--clr-text-success);
transition: none;
}
.button {
background: var(--clr-bg-success-strong);
transition: none;
}
}
}
.privacy-policy { .privacy-policy {
padding: 20px; padding: 20px;
@ -10153,12 +10089,12 @@ noscript {
} }
.warning-banner { .warning-banner {
border: 1px solid $warning-red; border: 1px solid var(--clr-border-on-bg-error-subtle);
background: color.change($warning-red, $alpha: 0.15); background: var(--clr-bg-error-subtle);
&__message { &__message {
h1 { h1 {
color: $warning-red; color: var(--clr-text-error);
} }
a { a {
@ -11087,11 +11023,11 @@ noscript {
&--follow &__icon, &--follow &__icon,
&--follow-request &__icon { &--follow-request &__icon {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
&--favourite &__icon { &--favourite &__icon {
color: $gold-star; color: var(--clr-text-favourite-highlight);
} }
&--reblog &__icon { &--reblog &__icon {
@ -11105,7 +11041,7 @@ noscript {
} }
&--moderation-warning &__icon { &--moderation-warning &__icon {
color: $red-bookmark; color: var(--clr-text-bookmark-highlight);
} }
&--follow-request &__actions { &--follow-request &__actions {

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

@ -51,12 +51,14 @@
--clr-text-on-success-strong: var(--clr-white); --clr-text-on-success-strong: var(--clr-white);
--clr-text-disabled: var(--clr-grey-600); --clr-text-disabled: var(--clr-grey-600);
--clr-text-on-disabled: var(--clr-grey-400); --clr-text-on-disabled: var(--clr-grey-400);
--clr-text-bookmark-highlight: var(--clr-text-error);
--clr-text-favourite-highlight: var(--clr-text-warning);
/* BACKGROUND TOKENS */ /* BACKGROUND TOKENS */
--clr-bg-primary: var(--clr-grey-950); --clr-bg-primary: var(--clr-grey-950);
--clr-bg-secondary-base: var(--clr-indigo-200); --clr-bg-secondary-base: var(--clr-indigo-200);
--clr-bg-secondary-strength: 12%; --clr-bg-secondary-strength: 10%;
--clr-bg-secondary: #{utils.css-alpha( --clr-bg-secondary: #{utils.css-alpha(
var(--clr-bg-secondary-base), var(--clr-bg-secondary-base),
var(--clr-bg-secondary-strength) var(--clr-bg-secondary-strength)
@ -158,6 +160,15 @@
50% 50%
)}; )};
/* GRAPHS/CHARTS TOKENS */
--clr-graph-primary-stroke: var(--clr-text-accent);
--clr-graph-primary-fill: var(--clr-bg-accent-subtle);
--clr-graph-warning-stroke: var(--clr-text-warning);
--clr-graph-warning-fill: var(--clr-bg-warning-subtle);
--clr-graph-disabled-stroke: var(--clr-text-disabled);
--clr-graph-disabled-fill: var(--clr-bg-disabled);
/* LEGACY TOKENS */ /* LEGACY TOKENS */
--rich-text-container-color: rgb(87 24 60 / 100%); --rich-text-container-color: rgb(87 24 60 / 100%);

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

@ -57,11 +57,13 @@ code {
color: var(--clr-text-primary); color: var(--clr-text-primary);
&.success { &.success {
background: $success-green; color: var(--clr-text-on-success-strong);
background: var(--clr-bg-success-strong);
} }
&.failure { &.failure {
background: $error-red; color: var(--clr-text-on-error-strong);
background: var(--clr-bg-error-strong);
} }
} }
@ -1074,7 +1076,7 @@ code {
} }
.scope-danger { .scope-danger {
color: $warning-red; color: var(--clr-text-error);
} }
.form_admin_settings_site_short_description, .form_admin_settings_site_short_description,

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

@ -18,7 +18,7 @@
&.critical { &.critical {
font-weight: 700; font-weight: 700;
color: $gold-star; color: var(--clr-text-warning);
} }
} }

16
app/javascript/styles/mastodon/widgets.scss
View File

@ -25,12 +25,12 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: $ui-base-color; background: var(--clr-bg-primary);
} }
} }
&.active > a { &.active > a {
background: $ui-highlight-color; background: var(--clr-bg-accent-strong);
cursor: default; cursor: default;
} }
@ -76,7 +76,7 @@
} }
&.active .avatar-stack .account__avatar { &.active .avatar-stack .account__avatar {
border-color: $ui-highlight-color; border-color: var(--clr-text-accent);
} }
.trends__item__current { .trends__item__current {
@ -113,7 +113,7 @@
tbody td { tbody td {
padding: 15px 0; padding: 15px 0;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--clr-border-primary);
} }
tbody tr:last-child td { tbody tr:last-child td {
@ -148,7 +148,7 @@
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
} }
} }
@ -165,15 +165,15 @@
.icon { .icon {
&.active { &.active {
color: $highlight-text-color; color: var(--clr-text-accent);
} }
&.passive { &.passive {
color: $passive-text-color; color: var(--clr-text-warning);
} }
&.active.passive { &.active.passive {
color: $active-passive-text-color; color: var(--clr-text-success);
} }
} }