Leatherface/mastodon
0
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2026-03-29 03:00:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge commit 'c44cc1f5c3bafb49a324f8f72a42a91d09eecfe3' into glitch-soc/merge-upstream

Browse Source
This commit is contained in:
Claire
2026-02-12 18:00:45 +01:00
parent f90670683a c44cc1f5c3
commit e451416d90
114 changed files with 848 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,7 @@
}
@mixin search-popout {
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;

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

@@ -411,7 +411,7 @@ body > [data-popper-placement] {
&__suggestions {
box-shadow: var(--dropdown-shadow);
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 0 0 4px 4px;
color: var(--color-text-primary);
@@ -2066,7 +2066,7 @@ body > [data-popper-placement] {
}
&__popout {
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
box-shadow: var(--dropdown-shadow);
@@ -2770,7 +2770,7 @@ a.account__display-name {
}
.dropdown-menu {
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
padding: 4px;
@@ -5169,7 +5169,7 @@ a.status-card {
@include search-popout;
padding: 0;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
}
&__menu-list {
@@ -5339,7 +5339,7 @@ a.status-card {
position: relative;
margin-top: 5px;
z-index: 2;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
box-shadow: var(--dropdown-shadow);
@@ -5366,7 +5366,7 @@ a.status-card {
z-index: 4;
top: -5px;
inset-inline-start: -9px;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 4px;
box-shadow: var(--dropdown-shadow);
@@ -5433,7 +5433,7 @@ a.status-card {
inset-inline-start: 0;
z-index: -1;
border-radius: 4px;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
box-shadow: 0 0 5px var(--color-shadow-primary);
}
@@ -5538,7 +5538,7 @@ a.status-card {
.language-dropdown__dropdown,
.visibility-dropdown__dropdown {
box-shadow: var(--dropdown-shadow);
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
padding: 4px;
border-radius: 4px;
@@ -5653,7 +5653,7 @@ a.status-card {
.emoji-mart-search {
padding: 10px;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
input {
padding: 8px 12px;
@@ -5686,7 +5686,7 @@ a.status-card {
.emoji-mart-scroll {
padding: 0 10px 10px;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
}
&__results {
@@ -5812,7 +5812,7 @@ a.status-card {
inset-inline-start: 0;
margin-top: -2px;
width: 100%;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 0 0 4px 4px;
box-shadow: var(--dropdown-shadow);
@@ -6569,7 +6569,7 @@ a.status-card {
width: 588px;
max-height: 80vh;
flex-direction: column;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
border-radius: 16px;
@@ -6653,7 +6653,7 @@ a.status-card {
}
&__popout {
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border: 1px solid var(--color-border-primary);
box-shadow: var(--dropdown-shadow);
@@ -6935,7 +6935,7 @@ a.status-card {
.actions-modal {
border-radius: 8px 8px 0 0;
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
backdrop-filter: $backdrop-blur-filter;
border-color: var(--color-border-primary);
box-shadow: var(--dropdown-shadow);
@@ -7123,7 +7123,7 @@ a.status-card {
&--solid {
color: var(--color-text-primary);
background: var(--color-bg-elevated);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
}
@@ -10510,6 +10510,8 @@ noscript {
position: relative;
&__scroll-button {
--scroll-button-bg: var(--color-bg-brand-base);
position: absolute;
height: 100%;
background: transparent;
@@ -10517,7 +10519,6 @@ noscript {
cursor: pointer;
top: 0;
color: var(--color-text-primary);
opacity: 0.5;
&.left {
left: 0;
@@ -10530,7 +10531,7 @@ noscript {
&__icon {
border-radius: 50%;
color: var(--color-text-on-brand-base);
background: var(--color-bg-brand-base);
background: var(--scroll-button-bg);
display: flex;
align-items: center;
justify-content: center;
@@ -10546,7 +10547,7 @@ noscript {
&:hover,
&:focus,
&:active {
opacity: 1;
--scroll-button-bg: var(--color-bg-brand-base-hover);
}
}

39
app/javascript/styles/mastodon/theme/_base.scss
View File

@@ -1,27 +1,40 @@
@mixin palette {
--color-black: #000;
--color-grey-950: #181821;
--color-grey-800: #292938;
--color-grey-700: #444664;
--color-grey-600: #545778;
--color-grey-500: #696d91;
--color-grey-400: #8b8dac;
--color-grey-300: #b4b6cb;
--color-grey-200: #d8d9e3;
--color-grey-100: #f0f0f5;
--color-grey-50: #f0f1ff;
--color-grey-950: #181820;
--color-grey-800: #3a3a50;
--color-grey-700: #44445f;
--color-grey-600: #535374;
--color-grey-500: #67678e;
--color-grey-400: #88a;
--color-grey-300: #b2b1c8;
--color-grey-200: #d7d6e1;
--color-grey-100: #eeedf3;
--color-grey-50: #f6f6f9;
--color-white: #fff;
--color-indigo-700: #5638cc;
--color-indigo-600: #6147e6;
--color-indigo-400: #8886ff;
--color-indigo-400: #8280f9;
--color-indigo-300: #a5abfd;
--color-indigo-200: #c8cdfe;
--color-indigo-100: #e0e3ff;
--color-indigo-50: #f0f1ff;
--color-red-500: #ff637e;
--color-red-600: #ec003f;
--color-red-50: #fef2f2;
--color-red-100: #ffe2e2;
--color-red-300: #ffa2a2;
--color-red-800: #9f0712;
--color-red-900: #82181a;
--color-red-950: #460809;
--color-yellow-50: #fffbeb;
--color-yellow-100: #fef3c6;
--color-yellow-400: #ffb900;
--color-yellow-600: #e17100;
--color-yellow-700: #bb4d00;
--color-yellow-900: #7b3306;
--color-yellow-950: #461901;
--color-green-50: #f0fdf4;
--color-green-100: #dcfce7;
--color-green-400: #05df72;
--color-green-600: #00a63e;
--color-green-900: #0d542b;
--color-green-950: #032e15;
}

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

@@ -3,11 +3,11 @@
@mixin tokens {
/* TEXT TOKENS */
--color-text-primary: var(--color-grey-50);
--color-text-secondary: var(--color-grey-400);
--color-text-tertiary: var(--color-grey-500);
--color-text-primary: var(--color-grey-100);
--color-text-secondary: var(--color-grey-300);
--color-text-tertiary: var(--color-grey-400);
--color-text-on-inverted: var(--color-grey-950);
--color-text-brand: var(--color-indigo-400);
--color-text-brand: var(--color-indigo-300);
--color-text-brand-soft: color-mix(
in oklab,
var(--color-text-primary),
@@ -15,7 +15,7 @@
);
--color-text-on-brand-base: var(--color-white);
--color-text-brand-on-inverted: var(--color-indigo-600);
--color-text-error: var(--color-red-500);
--color-text-error: var(--color-red-300);
--color-text-on-error-base: var(--color-white);
--color-text-warning: var(--color-yellow-400);
--color-text-on-warning-base: var(--color-white);
@@ -36,8 +36,8 @@
// Neutrals
--color-bg-primary: var(--color-grey-950);
--overlay-strength-secondary: 8%;
--color-bg-secondary-base: var(--color-indigo-200);
--overlay-strength-secondary: 4%;
--color-bg-secondary-base: var(--color-white);
--color-bg-secondary: #{utils.css-alpha(
var(--color-bg-secondary-base),
var(--overlay-strength-secondary)
@@ -55,7 +55,6 @@
// Utility
--color-bg-ambient: var(--color-bg-primary);
--color-bg-elevated: var(--color-bg-primary);
--color-bg-inverted: var(--color-grey-50);
--color-bg-media-base: var(--color-black);
--color-bg-media-strength: 65%;
@@ -67,16 +66,16 @@
--color-bg-disabled: var(--color-grey-700);
// Brand
--overlay-strength-brand: 10%;
--color-bg-brand-base: var(--color-indigo-600);
--overlay-strength-brand: 22%;
--color-bg-brand-base: var(--color-indigo-700);
--color-bg-brand-base-hover: color-mix(
in oklab,
var(--color-bg-brand-base),
black var(--overlay-strength-brand)
var(--color-bg-primary) var(--overlay-strength-brand)
);
--color-bg-brand-soft: #{utils.css-alpha(
var(--color-bg-brand-base),
calc(var(--overlay-strength-brand) * 1.5)
#6f4df5,
calc(var(--overlay-strength-brand) * 2)
)};
--color-bg-brand-softer: #{utils.css-alpha(
var(--color-bg-brand-base),
@@ -84,21 +83,15 @@
)};
// Error
--overlay-strength-error: 12%;
--color-bg-error-base: var(--color-red-600);
--overlay-strength-error: 10%;
--color-bg-error-base: var(--color-red-800);
--color-bg-error-base-hover: color-mix(
in oklab,
var(--color-bg-error-base),
black var(--overlay-strength-error)
var(--color-bg-primary) var(--overlay-strength-error)
);
--color-bg-error-soft: #{utils.css-alpha(
var(--color-bg-error-base),
calc(var(--overlay-strength-error) * 1.5)
)};
--color-bg-error-softer: #{utils.css-alpha(
var(--color-bg-error-base),
var(--overlay-strength-error)
)};
--color-bg-error-soft: var(--color-red-900);
--color-bg-error-softer: var(--color-red-950);
// Warning
--overlay-strength-warning: 10%;
@@ -106,16 +99,10 @@
--color-bg-warning-base-hover: color-mix(
in oklab,
var(--color-bg-warning-base),
black var(--overlay-strength-warning)
var(--color-bg-primary) var(--overlay-strength-warning)
);
--color-bg-warning-soft: #{utils.css-alpha(
var(--color-bg-warning-base),
calc(var(--overlay-strength-warning) * 1.5)
)};
--color-bg-warning-softer: #{utils.css-alpha(
var(--color-bg-warning-base),
var(--overlay-strength-warning)
)};
--color-bg-warning-soft: var(--color-yellow-900);
--color-bg-warning-softer: var(--color-yellow-950);
// Success
--overlay-strength-success: 15%;
@@ -123,16 +110,10 @@
--color-bg-success-base-hover: color-mix(
in oklab,
var(--color-bg-success-base),
black var(--overlay-strength-success)
var(--color-bg-primary) var(--overlay-strength-success)
);
--color-bg-success-soft: #{utils.css-alpha(
var(--color-bg-success-base),
calc(var(--overlay-strength-success) * 1.5)
)};
--color-bg-success-softer: #{utils.css-alpha(
var(--color-bg-success-base),
var(--overlay-strength-success)
)};
--color-bg-success-soft: var(--color-green-900);
--color-bg-success-softer: var(--color-green-950);
/* BORDER TOKENS */
@@ -194,12 +175,9 @@
/* TEXT TOKENS */
--color-text-primary: var(--color-grey-50);
--color-text-secondary: var(--color-grey-300);
--color-text-tertiary: var(--color-grey-400);
--color-text-brand: var(--color-indigo-300);
--color-text-status-links: var(--color-text-brand);
/* BORDER TOKENS */
--border-strength-primary: 18%;
--border-strength-primary: 30%;
}

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

@@ -7,7 +7,7 @@
--color-text-secondary: var(--color-grey-600);
--color-text-tertiary: var(--color-grey-500);
--color-text-on-inverted: var(--color-white);
--color-text-brand: var(--color-indigo-600);
--color-text-brand: var(--color-indigo-700);
--color-text-brand-soft: color-mix(
in oklab,
var(--color-text-primary),
@@ -15,7 +15,7 @@
);
--color-text-on-brand-base: var(--color-white);
--color-text-brand-on-inverted: var(--color-indigo-400);
--color-text-error: var(--color-red-600);
--color-text-error: var(--color-red-800);
--color-text-on-error-base: var(--color-white);
--color-text-warning: var(--color-yellow-600);
--color-text-on-warning-base: var(--color-white);
@@ -32,8 +32,8 @@
// Neutrals
--color-bg-primary: var(--color-white);
--overlay-strength-secondary: 5%;
--color-bg-secondary-base: var(--color-grey-600);
--overlay-strength-secondary: 4%;
--color-bg-secondary-base: #000550;
--color-bg-secondary: #{color-mix(
in oklab,
var(--color-bg-primary),
@@ -52,7 +52,6 @@
// Utility
--color-bg-ambient: var(--color-bg-primary);
--color-bg-elevated: var(--color-bg-primary);
--color-bg-inverted: var(--color-grey-950);
--color-bg-media-base: var(--color-black);
--color-bg-media-strength: 65%;
@@ -64,38 +63,32 @@
--color-bg-disabled: var(--color-grey-400);
// Brand
--overlay-strength-brand: 8%;
--color-bg-brand-base: var(--color-indigo-600);
--overlay-strength-brand: 6%;
--color-bg-brand-base: var(--color-indigo-700);
--color-bg-brand-base-hover: color-mix(
in oklab,
var(--color-bg-brand-base),
black var(--overlay-strength-brand)
);
--color-bg-brand-soft: #{utils.css-alpha(
var(--color-bg-brand-base),
calc(var(--overlay-strength-brand) * 1.5)
#0012d8,
calc(var(--overlay-strength-brand) * 2)
)};
--color-bg-brand-softer: #{utils.css-alpha(
var(--color-bg-brand-base),
#0012d8,
var(--overlay-strength-brand)
)};
// Error
--overlay-strength-error: 12%;
--color-bg-error-base: var(--color-red-600);
--overlay-strength-error: 5%;
--color-bg-error-base: var(--color-red-800);
--color-bg-error-base-hover: color-mix(
in oklab,
var(--color-bg-error-base),
black var(--overlay-strength-error)
);
--color-bg-error-soft: #{utils.css-alpha(
var(--color-bg-error-base),
calc(var(--overlay-strength-error) * 1.5)
)};
--color-bg-error-softer: #{utils.css-alpha(
var(--color-bg-error-base),
var(--overlay-strength-error)
)};
--color-bg-error-soft: var(--color-red-100);
--color-bg-error-softer: var(--color-red-50);
// Warning
--overlay-strength-warning: 10%;
@@ -105,14 +98,8 @@
var(--color-bg-warning-base),
black var(--overlay-strength-warning)
);
--color-bg-warning-soft: #{utils.css-alpha(
var(--color-bg-warning-base),
calc(var(--overlay-strength-warning) * 1.5)
)};
--color-bg-warning-softer: #{utils.css-alpha(
var(--color-bg-warning-base),
var(--overlay-strength-warning)
)};
--color-bg-warning-soft: var(--color-yellow-100);
--color-bg-warning-softer: var(--color-yellow-50);
// Success
--overlay-strength-success: 15%;
@@ -122,14 +109,8 @@
var(--color-bg-success-base),
black var(--overlay-strength-success)
);
--color-bg-success-soft: #{utils.css-alpha(
var(--color-bg-success-base),
calc(var(--overlay-strength-success) * 1.5)
)};
--color-bg-success-softer: #{utils.css-alpha(
var(--color-bg-success-base),
var(--overlay-strength-success)
)};
--color-bg-success-soft: var(--color-green-100);
--color-bg-success-softer: var(--color-green-50);
/* BORDER TOKENS */