Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-08-16 07:06:50 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add webfonts for 5.0 redesign (#39868)

Browse Source
This commit is contained in:
diondiondion
2026-07-20 11:38:08 +02:00
committed by GitHub
parent cf46401689
commit 01a6b3aece
22 changed files with 294 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/styles/application.scss
View File

@@ -2,6 +2,8 @@
@use 'mastodon/mixins';
@use 'fonts/roboto';
@use 'fonts/roboto-mono';
@use 'fonts/inter';
@use 'fonts/syne';
@use 'mastodon/reset';
@use 'mastodon/tokens';

2
app/javascript/styles/entrypoints/mailer.scss
View File

@@ -1,4 +1,4 @@
@use '../fonts/inter';
@use '../fonts/inter-mailer';
body {
accent-color: #6364ff;

8
app/javascript/styles/fonts/inter-mailer.scss Normal file
View File

@@ -0,0 +1,8 @@
@font-face {
font-family: Inter;
src: url('../../fonts/inter/inter-variable-font-slnt-wght.woff2')
format('woff2-variations');
font-weight: 100 900;
font-style: normal;
mso-generic-font-family: swiss;
}

35
app/javascript/styles/fonts/inter.scss
View File

@@ -1,8 +1,35 @@
// Regular
@font-face {
font-family: Inter;
src: url('../../fonts/inter/inter-variable-font-slnt-wght.woff2')
format('woff2-variations');
font-weight: 100 900;
src: url('../../fonts/inter/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
mso-generic-font-family: swiss;
font-display: swap;
}
// Italic
@font-face {
font-family: Inter;
src: url('../../fonts/inter/inter-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
// SemiBold (native 600, mapped to 700 so that `font-weight: bold` uses it)
@font-face {
font-family: Inter;
src: url('../../fonts/inter/inter-semibold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
// SemiBold Italic (native 600, mapped to 700 so that `font-weight: bold` uses it)
@font-face {
font-family: Inter;
src: url('../../fonts/inter/inter-semibold-italic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}

7
app/javascript/styles/fonts/syne.scss Normal file
View File

@@ -0,0 +1,7 @@
@font-face {
font-family: Syne;
src: url('../../fonts/syne/syne-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}

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

@@ -3,7 +3,7 @@
*/
@mixin type-heading-lg {
// font-family: Syne;
font-family: var(--font-heading);
font-size: var(--fs-3xl);
font-weight: bold;
line-height: var(--lh-tighter);
@@ -11,7 +11,7 @@
}
@mixin type-heading-md {
// font-family: Syne;
font-family: var(--font-heading);
font-size: var(--fs-2xl);
font-weight: bold;
line-height: var(--lh-tighter);
@@ -19,7 +19,7 @@
}
@mixin type-heading-sm {
// font-family: Syne;
font-family: var(--font-heading);
font-size: var(--fs-xl);
font-weight: bold;
line-height: var(--lh-tight);
@@ -27,7 +27,7 @@
}
@mixin type-body-lg {
// font-family: Inter;
font-family: var(--font-body);
font-size: var(--fs-lg);
font-weight: normal;
line-height: var(--lh-normal);
@@ -35,7 +35,7 @@
}
@mixin type-body-strong {
// font-family: Inter;
font-family: var(--font-body);
font-size: var(--fs-md);
font-weight: bold;
line-height: var(--lh-normal);
@@ -43,7 +43,7 @@
}
@mixin type-body {
// font-family: Inter;
font-family: var(--font-body);
font-size: var(--fs-md);
font-weight: normal;
line-height: var(--lh-normal);
@@ -51,7 +51,7 @@
}
@mixin type-body-compact {
// font-family: Inter;
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: normal;
line-height: var(--lh-tight);
@@ -59,7 +59,7 @@
}
@mixin type-label-lg {
// font-family: Inter;
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: bold;
line-height: var(--lh-tight);
@@ -67,7 +67,7 @@
}
@mixin type-label-md {
// font-family: Inter;
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: normal;
line-height: var(--lh-tighter);
@@ -75,7 +75,7 @@
}
@mixin type-label-sm {
// font-family: Inter;
font-family: var(--font-body);
font-size: var(--fs-2xs);
font-weight: normal;
line-height: var(--lh-tighter);
@@ -83,7 +83,7 @@
}
@mixin type-micro {
// font-family: 'JetBrains Mono';
font-family: var(--font-monospace);
font-size: var(--fs-3xs);
font-weight: normal;
line-height: var(--lh-tighter);

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

@@ -13,6 +13,3 @@ $no-gap-breakpoint: 1175px;
$mobile-menu-breakpoint: 760px;
$mobile-breakpoint: 630px;
$no-columns-breakpoint: 600px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-monospace: 'mastodon-font-monospace' !default;

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

@@ -8,6 +8,14 @@ html {
scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
}
--font-body: mastodon-font-sans-serif, sans-serif;
--font-heading: Syne, sans-serif;
--font-monospace: mastodon-font-monospace, monospace;
&[data-redesign='true'] {
--font-body: Inter, sans-serif;
}
--outline-focus-default: 2px solid var(--color-border-brand);
--avatar-border-radius: 8px;
--max-media-height-small: 460px;
@@ -45,7 +53,7 @@ html.has-modal {
}
body {
font-family: $font-sans-serif, sans-serif;
font-family: var(--font-body);
background: var(--color-bg-primary);
font-size: 13px;
line-height: 18px;
@@ -73,7 +81,6 @@ body {
// Fira Sans => Firefox OS
// Droid Sans => Older Androids (<4.0)
// Helvetica Neue => Older macOS <10.11
// $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
font-family:
system-ui,
-apple-system,
@@ -85,7 +92,6 @@ body {
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
$font-sans-serif,
sans-serif;
}

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

@@ -984,7 +984,7 @@ body > [data-popover-placement] {
.character-counter {
cursor: default;
font-family: $font-sans-serif, sans-serif;
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
line-height: normal;

8
app/javascript/styles/mastodon/forms.scss
View File

@@ -2,7 +2,7 @@
@use 'variables' as *;
code {
font-family: $font-monospace, monospace;
font-family: var(--font-monospace);
font-weight: 400;
}
@@ -895,7 +895,7 @@ code {
width: 100%;
border: 0;
padding: 10px;
font-family: $font-monospace, monospace;
font-family: var(--font-monospace);
background: var(--color-bg-secondary);
color: var(--color-text-primary);
font-size: 14px;
@@ -1146,7 +1146,7 @@ code {
.form_admin_settings_custom_css,
.form_admin_settings_closed_registrations_message {
textarea {
font-family: $font-monospace, monospace;
font-family: var(--font-monospace);
}
}
@@ -1171,7 +1171,7 @@ code {
border: 0;
padding: 10px;
font-size: 14px;
font-family: $font-monospace, monospace;
font-family: var(--font-monospace);
}
button {

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

@@ -168,7 +168,7 @@
}
samp {
font-family: $font-monospace, monospace;
font-family: var(--font-monospace);
}
button.table-action-link {