Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-09-12 09:56:05 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Refactor color-bg-blend token (#40350)

Browse Source
This commit is contained in:
diondiondion
2026-09-02 09:11:02 +00:00
committed by GitHub
parent 89bc0eb426
commit 2dc35e5572
7 changed files with 12 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
View File

@@ -13,10 +13,10 @@
padding: var(--space-xl) var(--space-lg) var(--half-bottom-spacing);
margin-bottom: var(--half-bottom-spacing);
background: var(--color-bg-blend-solid);
background: var(--color-bg-blend);
&::after {
@include mixins.scroll-gradient(top, var(--color-bg-blend-solid));
@include mixins.scroll-gradient(top, var(--color-bg-blend));
opacity: 0;
transition: opacity ease 250ms;

2
app/javascript/mastodon/features/navigation_panel/redesign/index.stories.tsx
View File

@@ -14,7 +14,7 @@ const meta = {
style={{
width: 320,
height: 600,
backgroundColor: 'var(--color-bg-blend-solid)',
backgroundColor: 'var(--color-bg-blend)',
}}
>
<RedesignNavigationPanel {...args} />

4
app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
View File

@@ -28,10 +28,10 @@
margin-top: auto;
padding: var(--space-xl);
padding-top: var(--space-2xs);
background-color: var(--color-bg-blend-solid);
background-color: var(--color-bg-blend);
&::before {
@include mixins.scroll-gradient(bottom, var(--color-bg-blend-solid));
@include mixins.scroll-gradient(bottom, var(--color-bg-blend));
opacity: 0;
transition: opacity ease 250ms;

4
app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss
View File

@@ -60,7 +60,7 @@
background: linear-gradient(
to bottom,
var(--color-bg-blend-solid) var(--column-header-gradient-start),
var(--color-bg-blend) var(--column-header-gradient-start),
transparent var(--column-header-gradient-start)
);
position: sticky;
@@ -69,7 +69,7 @@
border-top: 0;
@media (width >= $mobile-menu-breakpoint) {
border-top: 10px solid var(--color-bg-blend-solid);
border-top: 10px solid var(--color-bg-blend);
}
// Fix bg color for legacy column headers.

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

@@ -28,7 +28,7 @@ html {
// Compensate for column header height when scrolling elements into view
--column-header-height: 74px;
background: var(--color-bg-blend-solid);
background: var(--color-bg-blend);
}
// Variable for easily inverting directional UI elements,

9
app/javascript/styles/mastodon/tokens/theme/_dark.scss
View File

@@ -40,15 +40,10 @@
--overlay-strength-secondary: 4%;
--color-bg-secondary: var(--color-grey-900);
--color-bg-tertiary: var(--color-grey-800); // legacy
--color-bg-blend-strength: 30%;
--color-bg-blend: #{utils.css-alpha(
var(--color-black),
var(--color-bg-blend-strength)
)};
--color-bg-blend-solid: color-mix(
--color-bg-blend: color-mix(
in srgb,
var(--color-bg-primary),
var(--color-black) var(--color-bg-blend-strength)
var(--color-black) 30%
);
--color-bg-highlight: #{utils.css-alpha(var(--color-text-primary), 5%)};

9
app/javascript/styles/mastodon/tokens/theme/_light.scss
View File

@@ -36,15 +36,10 @@
--overlay-strength-secondary: 4%;
--color-bg-secondary: var(--color-grey-50);
--color-bg-tertiary: var(--color-grey-100); // legacy
--color-bg-blend-strength: 4%;
--color-bg-blend: #{utils.css-alpha(
var(--color-grey-950),
var(--color-bg-blend-strength)
)};
--color-bg-blend-solid: color-mix(
--color-bg-blend: color-mix(
in srgb,
var(--color-bg-primary),
var(--color-grey-950) var(--color-bg-blend-strength)
var(--color-grey-950) 4%
);
--color-bg-highlight: #{utils.css-alpha(var(--color-text-primary), 4%)};