tarrien/Mastodon
1
0 Fork 0
Code Issues Pull Requests 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 authored and GitHub committed 2026-07-13 09:50:22 +00:00
1 parent 52f5cd665e
commit 6ec3ee49cb
8 files changed
+186 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/javascript/styles/mastodon/theme/_dark.scss
+4 -2
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);
app/javascript/styles/mastodon/theme/_light.scss
+4 -2
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);