Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-08-27 01:34:53 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add design tokens for 5.0 redesign (#39848)

Browse Source
This commit is contained in:
diondiondion
2026-07-17 10:40:35 +02:00
committed by GitHub
parent 0a45b0fdb8
commit e95b87ed87
13 changed files with 221 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/mastodon/components/_theme_playground/index.tsx
View File

@@ -55,6 +55,7 @@ export const ThemePlayground: React.FC = () => {
</aside>
</nav>
<main>Test 1 2 3</main>
<div className={classes.overlay}>Hello World</div>
</div>
);
};

67
app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss
View File

@@ -1,11 +1,13 @@
@use '@/styles/mastodon/mixins';
.wrapper {
position: relative;
display: grid;
grid-template-columns: 250px 1fr;
gap: 1rem;
padding: 2rem;
font-size: 16px;
line-height: 1.5;
gap: var(--space-md);
padding: var(--space-3xl);
font-size: var(--fs-lg);
line-height: var(--lh-normal);
overflow-wrap: break-word;
color: var(--color-text-primary);
background-color: var(--color-bg-blend);
@@ -17,18 +19,19 @@
nav {
display: block;
grid-template-rows: min-content;
font-size: 14px;
font-size: var(--fs-sm);
input {
display: block;
box-sizing: border-box;
width: 100%;
margin-block-end: 1rem;
padding: 0.5rem 1rem;
margin-block-end: var(--space-md);
padding: var(--space-xs) var(--space-md);
color: var(--color-text-primary);
background: transparent;
border: 1px solid var(--color-border-primary);
border-radius: 0.5rem;
border-radius: var(--radius-xs);
font: inherit;
&:focus {
border-color: var(--color-border-brand);
@@ -38,9 +41,10 @@
a {
display: block;
padding: 0.5rem 1rem 0.45rem;
border-radius: 0.5rem;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-xs);
color: var(--color-text-secondary);
@include mixins.type-body-compact;
&[aria-current='page'] {
color: var(--color-text-primary);
@@ -55,22 +59,23 @@
'subtitle button';
grid-template-columns: 1fr min-content;
align-items: center;
gap: 0.125rem 0.5rem;
margin-block-start: 1rem;
padding: 0.75rem 1rem;
line-height: 1.2;
border-radius: 1rem;
background-color: var(--color-bg-highlight);
gap: var(--space-3xs) var(--space-xs);
margin-block-start: var(--space-md);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--color-border-primary);
h2 {
grid-area: title;
font-size: 16px;
font-weight: bold;
@include mixins.type-body;
line-height: var(--lh-tighter);
}
.subtitle {
grid-area: subtitle;
font-size: 12px;
@include mixins.type-label-sm;
color: var(--color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
@@ -84,15 +89,31 @@
width: 32px;
height: 32px;
border: none;
background-color: var(--color-bg-highlight);
border-radius: 99rem;
background-color: transparent;
border-radius: var(--radius-round);
&:hover {
background-color: var(--color-bg-highlight);
}
}
}
}
main {
padding: 2rem;
padding: var(--space-3xl);
background-color: var(--color-bg-primary);
border-radius: 1rem;
border-radius: var(--radius-md);
}
.overlay {
position: absolute;
inset: auto var(--space-md) var(--space-md) auto;
width: 30%;
height: 35%;
padding: var(--space-md);
background-color: var(--color-bg-primary);
border-radius: var(--radius-xl);
@include mixins.elevation-2;
}
}

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

@@ -4,7 +4,7 @@
@use 'fonts/roboto-mono';
@use 'mastodon/reset';
@use 'mastodon/theme';
@use 'mastodon/tokens';
@use 'mastodon/basics';
@use 'mastodon/branding';
@use 'mastodon/containers';

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

@@ -1,3 +1,113 @@
/**
* Type styles
*/
@mixin type-heading-lg {
// font-family: Syne;
font-size: var(--fs-3xl);
font-weight: bold;
line-height: var(--lh-tighter);
letter-spacing: var(--ls-tighter);
}
@mixin type-heading-md {
// font-family: Syne;
font-size: var(--fs-2xl);
font-weight: bold;
line-height: var(--lh-tighter);
letter-spacing: var(--ls-tight);
}
@mixin type-heading-sm {
// font-family: Syne;
font-size: var(--fs-xl);
font-weight: bold;
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
@mixin type-body-lg {
// font-family: Inter;
font-size: var(--fs-lg);
font-weight: normal;
line-height: var(--lh-normal);
letter-spacing: var(--ls-normal);
}
@mixin type-body-strong {
// font-family: Inter;
font-size: var(--fs-md);
font-weight: bold;
line-height: var(--lh-normal);
letter-spacing: var(--ls-normal);
}
@mixin type-body {
// font-family: Inter;
font-size: var(--fs-md);
font-weight: normal;
line-height: var(--lh-normal);
letter-spacing: var(--ls-normal);
}
@mixin type-body-compact {
// font-family: Inter;
font-size: var(--fs-sm);
font-weight: normal;
line-height: var(--lh-tight);
letter-spacing: var(--ls-normal);
}
@mixin type-label-lg {
// font-family: Inter;
font-size: var(--fs-sm);
font-weight: bold;
line-height: var(--lh-tight);
letter-spacing: var(--ls-normal);
}
@mixin type-label-md {
// font-family: Inter;
font-size: var(--fs-xs);
font-weight: normal;
line-height: var(--lh-tighter);
letter-spacing: var(--ls-loose);
}
@mixin type-label-sm {
// font-family: Inter;
font-size: var(--fs-2xs);
font-weight: normal;
line-height: var(--lh-tighter);
letter-spacing: var(--ls-loose);
}
@mixin type-micro {
// font-family: 'JetBrains Mono';
font-size: var(--fs-3xs);
font-weight: normal;
line-height: var(--lh-tighter);
letter-spacing: var(--ls-looser);
}
/**
* Elevation styles
*/
@mixin elevation-1 {
border: 1px solid var(--color-border-strong);
box-shadow: 0 1px 0 var(--color-border-strong);
}
@mixin elevation-2 {
border: 1px solid var(--color-border-strong);
box-shadow: 1px 2px 0 var(--color-border-strong);
}
/**
* Search input styles
*/
@mixin search-input {
box-sizing: border-box;
width: 100%;

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

@@ -9,17 +9,10 @@ $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
// Language codes that is written vertically
$vertical-lr-langs: mn-Mong;
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
$no-gap-breakpoint: 1175px;
$mobile-menu-breakpoint: 760px;
$mobile-breakpoint: 630px;
$no-columns-breakpoint: 600px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;

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

@@ -2688,6 +2688,9 @@ a.account__display-name {
}
.zoomable-image {
--media-max-width: 100%;
--media-max-height: 80%;
position: relative;
width: 100%;
height: 100%;
@@ -2699,8 +2702,8 @@ a.account__display-name {
user-select: none;
img {
max-width: $media-modal-media-max-width;
max-height: $media-modal-media-max-height;
max-width: var(--media-max-width);
max-height: var(--media-max-height);
width: auto;
height: auto;
outline: 1px solid var(--color-border-media);
@@ -2729,8 +2732,8 @@ a.account__display-name {
}
&__preview {
max-width: $media-modal-media-max-width;
max-height: $media-modal-media-max-height;
max-width: var(--media-max-width);
max-height: var(--media-max-height);
position: absolute;
z-index: 1;
outline: 1px solid var(--color-border-media);

22
app/javascript/styles/mastodon/tokens/_shape.scss Normal file
View File

@@ -0,0 +1,22 @@
@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;
}
@mixin radius {
--radius-xs: 8px;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-round: calc(1px * infinity);
}

25
app/javascript/styles/mastodon/tokens/_type.scss Normal file
View File

@@ -0,0 +1,25 @@
@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
}
@mixin line-height {
--lh-tighter: 1.3;
--lh-tight: 1.4;
--lh-normal: 1.6;
}
@mixin letter-spacing {
--ls-tighter: -0.02em;
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-loose: 0.01em;
--ls-looser: 0.02em;
}

15
app/javascript/styles/mastodon/theme/index.scss → app/javascript/styles/mastodon/tokens/index.scss
View File

@@ -1,10 +1,17 @@
@use 'base';
@use 'dark';
@use 'light';
@use 'utils';
@use 'theme/base';
@use 'theme/dark';
@use 'theme/light';
@use 'theme/utils';
@use 'shape';
@use 'type';
html {
@include base.palette;
@include shape.space;
@include shape.radius;
@include type.font-size;
@include type.line-height;
@include type.letter-spacing;
}
[data-color-scheme='dark'],

0
app/javascript/styles/mastodon/theme/_base.scss → app/javascript/styles/mastodon/tokens/theme/_base.scss
View File

0
app/javascript/styles/mastodon/theme/_dark.scss → app/javascript/styles/mastodon/tokens/theme/_dark.scss
View File

0
app/javascript/styles/mastodon/theme/_light.scss → app/javascript/styles/mastodon/tokens/theme/_light.scss
View File

0
app/javascript/styles/mastodon/theme/_utils.scss → app/javascript/styles/mastodon/tokens/theme/_utils.scss
View File