gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-11-29 19:03:41 +00:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

Replaced $ui-primary-color & updated toggle styles

Browse Source
This commit is contained in:
diondiondion 2025-09-04 17:36:50 +02:00
parent d596baa4bc
commit fac1398c31
7 changed files with 52 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,6 @@
@use '../mastodon/functions' as *; @use '../mastodon/functions' as *;
$ui-base-color: hsl(240deg, 16%, 19%) !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 ( @use '../mastodon/variables' with (
$action-button-color: lighten($ui-base-color, 50%), $action-button-color: lighten($ui-base-color, 50%),

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

@ -200,19 +200,6 @@
} }
} }
.react-toggle-track {
background: $ui-primary-color;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background: lighten($ui-primary-color, 10%);
}
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
.react-toggle-track {
background: lighten($ui-highlight-color, 10%);
}
// Change the default color used for the text in an empty column or on the error column // Change the default color used for the text in an empty column or on the error column
.empty-column-indicator, .empty-column-indicator,
.error-column { .error-column {
@ -293,11 +280,11 @@
input[type='url'], input[type='url'],
input[type='datetime-local'], input[type='datetime-local'],
textarea { textarea {
background: darken($ui-base-color, 10%); background: var(--clr-bg-secondary);
} }
select { select {
background: darken($ui-base-color, 10%) background: var(--clr-bg-secondary)
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
no-repeat right 8px center / auto 14px; no-repeat right 8px center / auto 14px;
} }

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

@ -13,17 +13,12 @@ $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
// Variables for defaults in UI
$base-border-color: $white !default;
$simple-background-color: $white !default;
// Tell UI to use selected colors // Tell UI to use selected colors
$ui-base-color: hsl(240deg, 16%, 19%) !default; // Darkest $ui-base-color: hsl(240deg, 16%, 19%) !default; // Darkest
$ui-base-lighter-color: lighten( $ui-base-lighter-color: lighten(
$ui-base-color, $ui-base-color,
26% 26%
) !default; // Lighter darkest ) !default; // Lighter darkest
$ui-primary-color: hsl(240deg, 29%, 70%) !default; // Lighter
$ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest $ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest
$ui-highlight-color: $blurple-500 !default; $ui-highlight-color: $blurple-500 !default;
$ui-button-color: $white !default; $ui-button-color: $white !default;
@ -54,7 +49,7 @@ $action-button-focus-color: lighten($ui-base-lighter-color, 4%) !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;
$lighter-text-color: $ui-base-lighter-color !default; $lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default; $light-text-color: hsl(240deg, 29%, 70%) !default;
// Keep this filter a SCSS variable rather than // Keep this filter a SCSS variable rather than
// a CSS Custom Property due to this Safari bug: // a CSS Custom Property due to this Safari bug:

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

@ -114,9 +114,9 @@
} }
.current { .current {
background: $simple-background-color; color: var(--clr-bg-inverted);
background: var(--clr-text-on-inverted);
border-radius: 100px; border-radius: 100px;
color: $inverted-text-color;
cursor: default; cursor: default;
margin: 0 10px; margin: 0 10px;
} }

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

@ -571,7 +571,7 @@
display: block; display: block;
line-height: 16px; line-height: 16px;
font-size: 12px; font-size: 12px;
color: $ui-primary-color; color: var(--clr-text-secondary);
} }
} }
@ -638,16 +638,15 @@
} }
&__warning { &__warning {
color: $inverted-text-color; color: var(--clr-text-primary);
background: $ui-primary-color; background: var(--clr-bg-warning-subtle);
box-shadow: 0 2px 6px var(--clr-shadow-primary); border: 1px solid var(--clr-border-on-bg-warning-subtle);
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
strong { strong {
color: $inverted-text-color;
font-weight: 500; font-weight: 500;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
@ -658,7 +657,7 @@
} }
a { a {
color: $lighter-text-color; color: var(--clr-text-accent);
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
@ -694,8 +693,6 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
color: var(--clr-text-primary); color: var(--clr-text-primary);
// background: var(--clr-bg-secondary);
background: transparent; background: transparent;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
@ -3961,6 +3958,16 @@ a.account__display-name {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.react-toggle--focus,
.react-toggle:focus-within {
outline: var(--outline-focus-default);
outline-offset: 2px;
.react-toggle-track {
border-color: transparent;
}
}
.react-toggle-screenreader-only, .react-toggle-screenreader-only,
.sr-only { .sr-only {
border: 0; border: 0;
@ -3984,15 +3991,25 @@ a.account__display-name {
height: 20px; height: 20px;
padding: 0; padding: 0;
border-radius: 10px; border-radius: 10px;
background-color: $ui-primary-color; background-color: rgb(from var(--clr-bg-accent-subtle) r g b / 50%);
} border: 1px solid rgb(from var(--clr-text-accent) r g b / 50%);
box-sizing: border-box;
.react-toggle--focus { .react-toggle:hover:not(.react-toggle--disabled) & {
outline: $ui-button-focus-outline; background-color: rgb(
} from var(--clr-bg-accent-subtle) r g b /
calc(50% + var(--clr-bg-accent-subtle-strength))
);
}
.react-toggle--checked .react-toggle-track { .react-toggle--checked & {
background-color: $ui-highlight-color; background-color: var(--clr-bg-accent-strong);
border-color: var(--clr-bg-accent-strong);
}
.react-toggle--checked:not(.react-toggle--disabled):hover & {
background-color: var(--clr-bg-accent-strong-highlighted);
}
} }
.react-toggle-track-check, .react-toggle-track-check,
@ -4007,24 +4024,15 @@ a.account__display-name {
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
background-color: $ui-button-color; background-color: var(--clr-text-on-accent-strong);
box-sizing: border-box; box-sizing: border-box;
transition: all 0.25s ease; transition: all 0.25s ease;
transition-property: border-color, left; transition-property: border-color, left;
}
.react-toggle--checked .react-toggle-thumb { .react-toggle--checked & {
inset-inline-start: 32px - 16px - 2px; inset-inline-start: 32px - 16px - 2px;
border-color: $ui-highlight-color; border-color: var(--clr-bg-accent-strong);
} }
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background: darken($ui-primary-color, 5%);
}
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
.react-toggle-track {
background: lighten($ui-highlight-color, 5%);
} }
.follow_requests-unlocked_explanation, .follow_requests-unlocked_explanation,

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

@ -972,7 +972,7 @@ code {
.qr-code { .qr-code {
flex: 0 0 auto; flex: 0 0 auto;
background: $simple-background-color; background: white;
padding: 4px; padding: 4px;
margin: 0 10px 20px 0; margin: 0 10px 20px 0;
box-shadow: 0 0 15px var(--clr-shadow-primary); box-shadow: 0 0 15px var(--clr-shadow-primary);

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

@ -14,12 +14,12 @@
&__chart { &__chart {
border-radius: 4px; border-radius: 4px;
display: block; display: block;
background: darken($ui-primary-color, 5%); background: rgb(from var(--clr-text-accent) r g b / 60%);
height: 5px; height: 5px;
min-width: 1%; min-width: 1%;
&.leading { &.leading {
background: $ui-highlight-color; background: var(--clr-text-accent);
} }
} }
@ -39,12 +39,12 @@
// duplication // duplication
&::-moz-progress-bar { &::-moz-progress-bar {
border-radius: 4px; border-radius: 4px;
background: darken($ui-primary-color, 5%); background: rgb(from var(--clr-text-accent) r g b / 60%);
} }
&::-webkit-progress-value { &::-webkit-progress-value {
border-radius: 4px; border-radius: 4px;
background: darken($ui-primary-color, 5%); background: rgb(from var(--clr-text-accent) r g b / 60%);
} }
} }
@ -81,13 +81,13 @@
color: var(--clr-text-primary); color: var(--clr-text-primary);
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
background: $ui-base-color; background: var(--clr-bg-primary);
border: 1px solid var(--clr-text-secondary); border: 1px solid var(--clr-text-secondary);
border-radius: 4px; border-radius: 4px;
padding: 8px 12px; padding: 8px 12px;
&:focus { &:focus {
border-color: $ui-highlight-color; border-color: var(--clr-text-accent);
} }
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
@ -165,7 +165,7 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: $ui-primary-color; border-color: var(--clr-text-primary);
border-width: 1px; border-width: 1px;
} }
} }
@ -224,10 +224,10 @@
color: var(--clr-text-tertiary); color: var(--clr-text-tertiary);
&__chart { &__chart {
background: rgba(darken($ui-primary-color, 14%), 0.7); background: rgb(from var(--clr-text-accent) r g b / 40%);
&.leading { &.leading {
background: color.change($ui-highlight-color, $alpha: 0.5); background: rgb(from var(--clr-text-accent) r g b / 60%);
} }
} }
} }