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

Update design token names (#40569)

Browse Source
This commit is contained in:
diondiondion
2026-09-17 14:43:32 +00:00
committed by GitHub
parent d74ed00254
commit 8a90cc0c88
38 changed files with 331 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@
@mixin type-heading-lg {
font-family: var(--font-heading);
font-size: var(--fs-3xl);
font-size: var(--fs-26);
font-weight: 500;
font-variation-settings: 'GEOM' 50;
line-height: var(--lh-tighter);
@@ -13,7 +13,7 @@
@mixin type-heading-md {
font-family: var(--font-heading);
font-size: var(--fs-2xl);
font-size: var(--fs-22);
font-weight: 500;
font-variation-settings: 'GEOM' 50;
line-height: var(--lh-tighter);
@@ -22,7 +22,7 @@
@mixin type-heading-sm {
font-family: var(--font-heading);
font-size: var(--fs-xl);
font-size: var(--fs-20);
font-weight: 500;
font-variation-settings: 'GEOM' 50;
line-height: var(--lh-tight);
@@ -31,7 +31,7 @@
@mixin type-body-lg {
font-family: var(--font-body);
font-size: var(--fs-lg);
font-size: var(--fs-16);
font-weight: normal;
line-height: var(--lh-normal);
letter-spacing: var(--ls-normal);
@@ -39,7 +39,7 @@
@mixin type-body-strong {
font-family: var(--font-body);
font-size: var(--fs-md);
font-size: var(--fs-15);
font-weight: bold;
line-height: var(--lh-normal);
letter-spacing: var(--ls-normal);
@@ -47,7 +47,7 @@
@mixin type-body {
font-family: var(--font-body);
font-size: var(--fs-md);
font-size: var(--fs-15);
font-weight: normal;
line-height: var(--lh-normal);
letter-spacing: var(--ls-normal);
@@ -55,31 +55,31 @@
@mixin type-body-compact {
font-family: var(--font-body);
font-size: var(--fs-sm);
font-size: var(--fs-14);
font-weight: normal;
line-height: var(--lh-tight);
letter-spacing: var(--ls-normal);
}
@mixin type-label-lg {
@mixin type-label {
font-family: var(--font-body);
font-size: var(--fs-sm);
font-size: var(--fs-14);
font-weight: bold;
line-height: var(--lh-tight);
letter-spacing: var(--ls-normal);
}
@mixin type-label-md {
@mixin type-meta {
font-family: var(--font-body);
font-size: var(--fs-xs);
font-size: var(--fs-13);
font-weight: normal;
line-height: var(--lh-tighter);
letter-spacing: var(--ls-loose);
}
@mixin type-label-sm {
@mixin type-caption {
font-family: var(--font-body);
font-size: var(--fs-2xs);
font-size: var(--fs-12);
font-weight: normal;
line-height: var(--lh-tighter);
letter-spacing: var(--ls-loose);
@@ -87,7 +87,7 @@
@mixin type-micro {
font-family: var(--font-body);
font-size: var(--fs-3xs);
font-size: var(--fs-11);
font-weight: normal;
line-height: var(--lh-tighter);
letter-spacing: var(--ls-looser);
@@ -98,12 +98,12 @@
*/
@mixin elevation-1 {
border: var(--border-w-normal) solid var(--color-border-strong);
border: var(--bw-default) solid var(--color-border-strong);
box-shadow: 0 1px 0 var(--color-border-strong);
}
@mixin elevation-2 {
border: var(--border-w-normal) solid var(--color-border-strong);
border: var(--bw-default) solid var(--color-border-strong);
box-shadow: 1px 2px 0 var(--color-border-strong);
}
@@ -112,10 +112,10 @@
*/
@mixin focus($offset: false) {
outline: var(--border-w-strong) solid var(--color-border-brand);
outline: var(--bw-thick) solid var(--color-border-brand);
@if $offset not false {
outline-offset: var(--border-w-strong);
outline-offset: var(--bw-thick);
}
}
@@ -133,7 +133,7 @@
}
inset-inline: 0;
height: calc(var(--space-4xl) * 2);
height: calc(var(--space-10) * 2);
background: linear-gradient(to $position, transparent, $background-color);
pointer-events: none;
}
@@ -150,7 +150,7 @@
background: var(--color-bg-secondary);
color: var(--color-text-primary);
border-radius: 4px;
border: var(--border-w-normal) solid var(--color-border-primary);
border: var(--bw-default) solid var(--color-border-primary);
font-size: 17px;
line-height: normal;
margin: 0;

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

@@ -23,7 +23,7 @@ html {
&[data-redesign='true'] {
--font-body: Inter, sans-serif;
--avatar-border-radius: var(--radius-round);
--mobile-bottom-nav-height: calc(58px + var(--space-md));
--mobile-bottom-nav-height: calc(58px + var(--space-4));
// Compensate for column header height when scrolling elements into view
--column-header-height: 74px;
@@ -191,7 +191,7 @@ body {
font-size: 20px;
line-height: 28px;
font-weight: 400;
margin-bottom: var(--space-md);
margin-bottom: var(--space-4);
}
}
}

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

@@ -6087,7 +6087,7 @@ a.status-card {
height: 100%;
max-width: 100vw;
max-height: 100vh;
padding: var(--space-lg);
padding: var(--space-5);
box-sizing: border-box;
display: flex;
z-index: 9999;
@@ -6098,7 +6098,7 @@ a.status-card {
@media screen and (width <= $mobile-breakpoint) {
padding-bottom: 0;
padding-inline: var(--space-xs);
padding-inline: var(--space-2);
}
> * {

12
app/javascript/styles/mastodon/tokens/_border.scss
View File

@@ -1,11 +1,11 @@
@mixin border-widths {
--border-w-thin: 0.5px;
--border-w-normal: 1px;
--border-w-strong: 2px;
--bw-thin: 0.5px;
--bw-default: 1px;
--bw-thick: 2px;
}
@mixin borders {
--border-thin: var(--border-w-thin) solid var(--color-border-primary);
--border-normal: var(--border-w-normal) solid var(--color-border-primary);
--border-strong: var(--border-w-strong) solid var(--color-border-strong);
--border-thin: var(--bw-thin) solid var(--color-border-primary);
--border-default: var(--bw-default) solid var(--color-border-primary);
--border-thick: var(--bw-thick) solid var(--color-border-strong);
}

34
app/javascript/styles/mastodon/tokens/_shape.scss
View File

@@ -1,22 +1,24 @@
@mixin space {
--space-3xs: 2px;
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 20px;
--space-xl: 24px;
--space-2xl: 28px;
--space-3xl: 32px;
--space-4xl: 36px;
--space-5xl: 40px;
--space-half: 2px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
}
@mixin radius {
--radius-xs: 8px;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-2: 8px;
--radius-3: 12px;
--radius-4: 16px;
--radius-5: 20px;
--radius-6: 24px;
--radius-round: calc(1px * infinity);
}

18
app/javascript/styles/mastodon/tokens/_type.scss
View File

@@ -1,13 +1,13 @@
@mixin font-size {
--fs-3xs: 0.6875rem; // 11px
--fs-2xs: 0.75rem; // 12px
--fs-xs: 0.8125rem; // 13px
--fs-sm: 0.875rem; // 14px
--fs-md: 0.9375rem; // 15px
--fs-lg: 1rem; // 16px
--fs-xl: 1.25rem; // 20px
--fs-2xl: 1.375rem; // 22px
--fs-3xl: 1.625rem; // 26px
--fs-11: 0.6875rem;
--fs-12: 0.75rem;
--fs-13: 0.8125rem;
--fs-14: 0.875rem;
--fs-15: 0.9375rem;
--fs-16: 1rem;
--fs-20: 1.25rem;
--fs-22: 1.375rem;
--fs-26: 1.625rem;
}
@mixin line-height {