Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-08-11 08:55:35 -05:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Add new theme tokens bg-blend, bg-highlight, and border-strong (#39786)

Browse Source
This commit is contained in:
diondiondion
2026-07-13 11:50:22 +02:00
committed by GitHub
parent 52f5cd665e
commit 6ec3ee49cb
8 changed files with 186 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/styles/mastodon/theme/_dark.scss
View File

@@ -40,11 +40,12 @@
--overlay-strength-secondary: 4%;
--color-bg-secondary: var(--color-grey-900);
--color-bg-tertiary: var(--color-grey-800); // legacy
--color-bg-blend: #{utils.css-alpha(var(--color-black), 30%)};
--color-bg-highlight: #{utils.css-alpha(var(--color-text-primary), 5%)};
// Utility
--color-bg-inverted: var(--color-grey-50);
--color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)};
--color-bg-overlay-highlight: #{utils.css-alpha(var(--color-white), 5%)};
--color-bg-overlay-highlight: var(--color-bg-highlight); // legacy
--color-bg-overlay: var(--color-black); // legacy
--color-bg-media-base: var(--color-black); // legacy
--color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy
@@ -75,6 +76,7 @@
/* BORDER TOKENS */
--color-border-primary: var(--color-grey-800);
--color-border-strong: var(--color-grey-100);
--color-border-brand: var(--color-text-brand);
--color-border-brand-soft: var(--color-indigo-800);
--color-border-error: var(--color-red-300);

6
app/javascript/styles/mastodon/theme/_light.scss
View File

@@ -36,11 +36,12 @@
--overlay-strength-secondary: 4%;
--color-bg-secondary: var(--color-grey-50);
--color-bg-tertiary: var(--color-grey-100); // legacy
--color-bg-blend: #{utils.css-alpha(var(--color-text-primary), 4%)};
--color-bg-highlight: #{utils.css-alpha(var(--color-text-primary), 4%)};
// Utility
--color-bg-inverted: var(--color-grey-950);
--color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)};
--color-bg-overlay-highlight: #{utils.css-alpha(var(--color-grey-950), 5%)};
--color-bg-overlay-highlight: var(--color-bg-highlight); // legacy
--color-bg-overlay: var(--color-bg-primary); // legacy
--color-bg-media-base: var(--color-black); // legacy
--color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy
@@ -71,6 +72,7 @@
/* BORDER TOKENS */
--color-border-primary: var(--color-grey-200);
--color-border-strong: var(--color-grey-950);
--color-border-brand: var(--color-text-brand);
--color-border-brand-soft: var(--color-indigo-200);
--color-border-error: var(--color-red-700);