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 @ui-button variables

Browse Source
This commit is contained in:
diondiondion 2025-10-22 15:13:43 +02:00
parent d3c50d5265
commit adf82541e7
4 changed files with 12 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,9 +13,5 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout
$ui-base-color: hsl(255deg, 25%, 88%),
$ui-base-lighter-color: hsl(250deg, 24%, 75%),
$ui-secondary-color: hsl(240deg, 16%, 19%),
$ui-button-secondary-color: $grey-600,
$ui-button-secondary-border-color: $grey-600,
$ui-button-secondary-focus-color: $white,
$emojis-requiring-inversion: 'chains'
);

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

@ -20,21 +20,6 @@ $ui-base-lighter-color: lighten(
26%
) !default; // Lighter darkest
$ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest
$ui-button-color: $white !default;
$ui-button-background-color: $blurple-500 !default;
$ui-button-focus-background-color: $blurple-600 !default;
$ui-button-focus-outline-color: $blurple-400 !default;
$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
$ui-button-disabled-color: color.adjust(
$ui-button-background-color,
$alpha: -0.3
) !default;
$ui-button-secondary-color: $blurple-500 !default;
$ui-button-secondary-border-color: $blurple-500 !default;
$ui-button-secondary-focus-border-color: $blurple-300 !default;
$ui-button-secondary-focus-color: $blurple-300 !default;
// Keep this filter a SCSS variable rather than
// a CSS Custom Property due to this Safari bug:

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

@ -158,7 +158,7 @@ body {
a {
&:focus {
border-radius: 4px;
outline: $ui-button-focus-outline;
outline: var(--outline-focus-default);
}
&:focus:not(:focus-visible) {

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

@ -56,9 +56,9 @@
}
.help-button {
background: $ui-button-background-color;
color: var(--clr-text-on-accent-strong);
background: var(--clr-bg-accent-strong);
border: 0;
color: $ui-button-color;
border-radius: 20px;
cursor: pointer;
width: 24px;
@ -70,7 +70,7 @@
&:active,
&:focus,
&:hover {
background-color: $ui-button-focus-background-color;
background: var(--clr-bg-accent-strong-highlighted);
}
&:focus-visible {
@ -2241,8 +2241,8 @@ body > [data-popper-placement] {
border-radius: $height;
min-width: $height - 2 * $h-padding; // to ensure that it is never narrower than a circle
line-height: $height + 1px; // to visually center the numbers
background-color: $ui-button-background-color;
color: $white;
color: var(--clr-text-on-accent-strong);
background: var(--clr-bg-accent-strong);
border-width: 1px;
border-style: solid;
border-color: var(--clr-bg-primary);
@ -5936,7 +5936,7 @@ a.status-card {
}
&:focus-visible {
box-shadow: 0 0 0 2px $ui-button-focus-outline-color;
box-shadow: 0 0 0 2px var(--clr-text-accent);
}
&[aria-hidden='true'] {
@ -9128,7 +9128,7 @@ noscript {
}
&:focus-visible {
outline: $ui-button-focus-outline;
outline: var(--clr-text-accent);
border-color: transparent;
}
}
@ -10639,8 +10639,8 @@ noscript {
}
&__badge {
background: $ui-button-background-color;
color: $white;
color: var(--clr-text-on-accent-strong);
background: var(--clr-bg-accent-strong);
border-radius: 100px;
padding: 2px 8px;
}
@ -10708,10 +10708,10 @@ noscript {
}
.filtered-notifications-banner__badge {
background: $ui-button-background-color;
color: var(--clr-text-on-accent-strong);
background: var(--clr-bg-accent-strong);
border-radius: 4px;
padding: 1px 6px;
color: $white;
}
}