gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-12-11 17:33:03 +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 {
.warning {
box-shadow: none;
background: color.change($error-red, $alpha: 0.5);
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='number'],
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;
@use '../mastodon/variables' with (
$success-green: color.adjust(
hsl(138deg, 32%, 35%),
$lightness: 8%,
$space: hsl
),
$base-overlay-background: $white,
$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-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
$classic-base-color: hsl(240deg, 16%, 19%);
$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;
$action-button-color: $ui-base-lighter-color !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
$inverted-text-color: $ui-base-color !default;

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

@ -247,9 +247,9 @@
}
.simple_form .not_recommended {
color: lighten($error-red, 12%);
background-color: rgba(lighten($error-red, 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5);
color: var(--clr-text-error);
background-color: var(--clr-bg-error-subtle);
border-color: var(--clr-border-on-bg-error-subtle);
}
.account__header__fields {
@ -382,7 +382,7 @@
}
.batch-table__row--attention {
color: $gold-star;
color: var(--clr-text-warning);
}
.batch-table__row--attention .pending-account__header,
@ -391,7 +391,7 @@
&,
a,
strong {
color: $gold-star;
color: var(--clr-text-warning);
}
}
@ -399,6 +399,6 @@
tbody td.accounts-table__extra,
&__count,
&__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 {
color: $gold-star;
color: var(--clr-text-warning);
font-weight: 700;
}
@ -759,13 +759,13 @@ kbd {
}
&__timestamp {
color: $dark-text-color;
color: var(--clr-text-secondary);
}
&:hover,
&:focus,
&:active {
background: $ui-base-color;
background: var(--clr-bg-primary);
}
}
@ -777,7 +777,7 @@ a.inline-name-tag,
color: var(--clr-text-primary);
&:hover {
color: $highlight-text-color;
color: var(--clr-text-accent);
}
.username {
@ -787,7 +787,7 @@ a.inline-name-tag,
&.suspended {
.username {
text-decoration: line-through;
color: lighten($error-red, 12%);
color: var(--clr-text-error);
}
.avatar {
@ -820,18 +820,18 @@ a.name-tag,
.speech-bubble {
margin-bottom: 20px;
border-inline-start: 4px solid $ui-highlight-color;
border-inline-start: 4px solid var(--clr-text-accent);
&.positive {
border-left-color: $success-green;
border-color: var(--clr-text-success);
}
&.negative {
border-left-color: lighten($error-red, 12%);
border-color: var(--clr-text-error);
}
&.warning {
border-left-color: $gold-star;
border-color: var(--clr-text-warning);
}
&__bubble {
@ -1131,11 +1131,11 @@ a.name-tag,
&.expired {
.expiration {
color: lighten($error-red, 12%);
color: var(--clr-text-error);
}
.permissions-list__item__icon {
color: $dark-text-color;
color: var(--clr-text-secondary);
}
}
}
@ -1278,12 +1278,12 @@ a.name-tag,
}
path:first-child {
fill: var(--clr-bg-accent-subtle) !important;
fill: var(--clr-graph-primary-fill) !important;
fill-opacity: 1 !important;
}
path:last-child {
stroke: var(--clr-text-accent) !important;
stroke: var(--clr-graph-primary-stroke) !important;
fill: none !important;
}
}

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

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

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

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

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

@ -1072,7 +1072,7 @@
text-align: end;
&.character-counter--over {
color: $error-red;
color: var(--clr-text-error);
}
}
@ -2615,13 +2615,13 @@ a.account__display-name {
gap: 10px;
.icon {
color: $highlight-text-color;
color: var(--clr-text-accent);
width: 18px;
height: 18px;
}
.icon-star {
color: $gold-star;
color: var(--clr-text-favourite-highlight);
}
> span {
@ -2632,11 +2632,11 @@ a.account__display-name {
}
.icon-button.star-icon.active {
color: $gold-star;
color: var(--clr-text-favourite-highlight);
}
.icon-button.bookmark-icon.active {
color: var(--mas-accent-bookmark);
color: var(--clr-text-bookmark-highlight);
}
.no-reduce-motion .icon-button.star-icon {
@ -3567,14 +3567,14 @@ a.account__display-name {
position: absolute;
inset-inline-start: 9px;
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);
padding: 1px 6px;
border-radius: 6px;
font-size: 10px;
font-weight: 500;
line-height: 14px;
color: var(--clr-text-primary);
}
&__issue-badge {
@ -3582,7 +3582,7 @@ a.account__display-name {
inset-inline-start: 11px;
bottom: 1px;
display: block;
background: $error-red;
background: var(--clr-text-error);
border-radius: 50%;
width: 0.625rem;
height: 0.625rem;
@ -4862,10 +4862,9 @@ a.status-card {
}
.column-header__issue-btn {
color: $warning-red;
color: var(--clr-text-error);
&:hover {
color: $error-red;
text-decoration: underline;
}
}
@ -6294,54 +6293,34 @@ a.status-card {
padding: 16px;
.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 {
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 {
color: $highlight-text-color;
&:hover,
&:focus,
&:active {
background: color.change($highlight-text-color, $alpha: 0.15);
}
&:focus {
background: color.change($highlight-text-color, $alpha: 0.3);
}
--default-icon-color: var(--clr-text-accent);
--hover-icon-color: var(--clr-text-accent);
--hover-bg-color: var(--clr-bg-accent-subtle-highlighted);
}
&.star-icon.active {
color: $gold-star;
&:hover,
&:focus,
&:active {
background: color.change($gold-star, $alpha: 0.15);
}
&:focus {
background: color.change($gold-star, $alpha: 0.3);
}
--default-icon-color: var(--clr-text-favourite-highlight);
--hover-icon-color: var(--clr-text-favourite-highlight);
--hover-bg-color: rgb(
from var(--clr-text-favourite-highlight) r g b /
var(--clr-bg-accent-subtle-strength)
);
}
&.disabled {
color: $white;
background-color: transparent;
--default-icon-color: white;
--default-bg-color: transparent;
cursor: default;
opacity: 0.4;
}
@ -8880,60 +8859,60 @@ noscript {
width: 50px;
path:first-child {
fill: color.change($highlight-text-color, $alpha: 0.25) !important;
fill: var(--clr-graph-primary-fill) !important;
fill-opacity: 1 !important;
}
path:last-child {
stroke: lighten($highlight-text-color, 6%) !important;
stroke: var(--clr-graph-primary-stroke) !important;
fill: none !important;
}
}
&--requires-review {
.trends__item__name {
color: $gold-star;
color: var(--clr-text-warning);
a {
color: $gold-star;
color: var(--clr-text-warning);
}
}
.trends__item__current {
color: $gold-star;
color: var(--clr-text-warning);
}
.trends__item__sparkline {
path:first-child {
fill: color.change($gold-star, $alpha: 0.25) !important;
fill: var(--clr-graph-warning-fill) !important;
}
path:last-child {
stroke: lighten($gold-star, 6%) !important;
stroke: var(--clr-graph-warning-stroke) !important;
}
}
}
&--disabled {
.trends__item__name {
color: lighten($ui-base-color, 12%);
color: var(--clr-text-disabled);
a {
color: lighten($ui-base-color, 12%);
color: var(--clr-text-disabled);
}
}
.trends__item__current {
color: lighten($ui-base-color, 12%);
color: var(--clr-text-disabled);
}
.trends__item__sparkline {
path:first-child {
fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
fill: var(--clr-graph-disabled-fill) !important;
}
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;
&:focus {
background: lighten($ui-base-color, 2%);
background: var(--clr-bg-secondary);
outline: 0;
}
@ -8965,7 +8944,7 @@ noscript {
&__unread {
display: inline-block;
background: $highlight-text-color;
background: var(--clr-text-accent);
border-radius: 50%;
width: 0.625rem;
height: 0.625rem;
@ -9034,7 +9013,7 @@ noscript {
}
&__root {
background: lighten($ui-base-color, 8%);
background: var(--clr-bg-accent-subtle);
font-size: 13px;
display: flex;
align-items: flex-end;
@ -9082,7 +9061,7 @@ noscript {
top: 19px;
inset-inline-end: 19px;
display: block;
background: $highlight-text-color;
background: var(--clr-text-accent);
border-radius: 50%;
width: 0.625rem;
height: 0.625rem;
@ -9767,7 +9746,7 @@ noscript {
}
&.invalid &__input {
border-color: $error-red;
border-color: var(--clr-text-error);
}
&.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 {
padding: 20px;
@ -10153,12 +10089,12 @@ noscript {
}
.warning-banner {
border: 1px solid $warning-red;
background: color.change($warning-red, $alpha: 0.15);
border: 1px solid var(--clr-border-on-bg-error-subtle);
background: var(--clr-bg-error-subtle);
&__message {
h1 {
color: $warning-red;
color: var(--clr-text-error);
}
a {
@ -11087,11 +11023,11 @@ noscript {
&--follow &__icon,
&--follow-request &__icon {
color: $highlight-text-color;
color: var(--clr-text-accent);
}
&--favourite &__icon {
color: $gold-star;
color: var(--clr-text-favourite-highlight);
}
&--reblog &__icon {
@ -11105,7 +11041,7 @@ noscript {
}
&--moderation-warning &__icon {
color: $red-bookmark;
color: var(--clr-text-bookmark-highlight);
}
&--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-disabled: var(--clr-grey-600);
--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 */
--clr-bg-primary: var(--clr-grey-950);
--clr-bg-secondary-base: var(--clr-indigo-200);
--clr-bg-secondary-strength: 12%;
--clr-bg-secondary-strength: 10%;
--clr-bg-secondary: #{utils.css-alpha(
var(--clr-bg-secondary-base),
var(--clr-bg-secondary-strength)
@ -158,6 +160,15 @@
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 */
--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);
&.success {
background: $success-green;
color: var(--clr-text-on-success-strong);
background: var(--clr-bg-success-strong);
}
&.failure {
background: $error-red;
color: var(--clr-text-on-error-strong);
background: var(--clr-bg-error-strong);
}
}
@ -1074,7 +1076,7 @@ code {
}
.scope-danger {
color: $warning-red;
color: var(--clr-text-error);
}
.form_admin_settings_site_short_description,

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

@ -18,7 +18,7 @@
&.critical {
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,
&:active,
&:focus {
background: $ui-base-color;
background: var(--clr-bg-primary);
}
}
&.active > a {
background: $ui-highlight-color;
background: var(--clr-bg-accent-strong);
cursor: default;
}
@ -76,7 +76,7 @@
}
&.active .avatar-stack .account__avatar {
border-color: $ui-highlight-color;
border-color: var(--clr-text-accent);
}
.trends__item__current {
@ -113,7 +113,7 @@
tbody td {
padding: 15px 0;
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 {
@ -148,7 +148,7 @@
&:focus,
&:hover,
&:active {
color: $highlight-text-color;
color: var(--clr-text-accent);
}
}
}
@ -165,15 +165,15 @@
.icon {
&.active {
color: $highlight-text-color;
color: var(--clr-text-accent);
}
&.passive {
color: $passive-text-color;
color: var(--clr-text-warning);
}
&.active.passive {
color: $active-passive-text-color;
color: var(--clr-text-success);
}
}