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

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 *;
$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 (
$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
.empty-column-indicator,
.error-column {
@ -293,11 +280,11 @@
input[type='url'],
input[type='datetime-local'],
textarea {
background: darken($ui-base-color, 10%);
background: var(--clr-bg-secondary);
}
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>")
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-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
$ui-base-color: hsl(240deg, 16%, 19%) !default; // Darkest
$ui-base-lighter-color: lighten(
$ui-base-color,
26%
) !default; // Lighter darkest
$ui-primary-color: hsl(240deg, 29%, 70%) !default; // Lighter
$ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest
$ui-highlight-color: $blurple-500 !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
$inverted-text-color: $ui-base-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
// a CSS Custom Property due to this Safari bug:

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

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

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

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

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

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

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

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