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

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-color: hsl(255deg, 25%, 88%),
$ui-base-lighter-color: hsl(250deg, 24%, 75%), $ui-base-lighter-color: hsl(250deg, 24%, 75%),
$ui-secondary-color: hsl(240deg, 16%, 19%), $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' $emojis-requiring-inversion: 'chains'
); );

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

@ -20,21 +20,6 @@ $ui-base-lighter-color: lighten(
26% 26%
) !default; // Lighter darkest ) !default; // Lighter darkest
$ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest $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 // 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:

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

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

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

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