Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-09-27 17:58:38 -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

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

@@ -4,10 +4,10 @@
position: relative;
display: grid;
grid-template-columns: 250px 1fr;
gap: var(--space-md);
padding: var(--space-3xl);
gap: var(--space-4);
padding: var(--space-8);
font-family: Inter, sans-serif;
font-size: var(--fs-lg);
font-size: var(--fs-16);
line-height: var(--lh-normal);
overflow-wrap: break-word;
color: var(--color-text-primary);
@@ -32,18 +32,18 @@
nav {
display: block;
grid-template-rows: min-content;
font-size: var(--fs-sm);
font-size: var(--fs-14);
input {
display: block;
box-sizing: border-box;
width: 100%;
margin-block-end: var(--space-md);
padding: var(--space-xs) var(--space-md);
margin-block-end: var(--space-4);
padding: var(--space-2) var(--space-4);
color: var(--color-text-primary);
background: transparent;
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-xs);
border-radius: var(--radius-2);
font: inherit;
&:focus {
@@ -54,8 +54,8 @@
a {
display: block;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-xs);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-2);
color: var(--color-text-secondary);
@include mixins.type-body-compact;
@@ -72,10 +72,10 @@
'subtitle button';
grid-template-columns: 1fr min-content;
align-items: center;
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);
gap: var(--space-half) var(--space-2);
margin-block-start: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-4);
border: 1px solid var(--color-border-primary);
h2 {
@@ -87,7 +87,7 @@
.subtitle {
grid-area: subtitle;
@include mixins.type-label-sm;
@include mixins.type-caption;
color: var(--color-text-secondary);
overflow: hidden;
@@ -113,19 +113,19 @@
}
main {
padding: var(--space-3xl);
padding: var(--space-8);
background-color: var(--color-bg-primary);
border-radius: var(--radius-md);
border-radius: var(--radius-4);
}
.overlay {
position: absolute;
inset: auto var(--space-md) var(--space-md) auto;
inset: auto var(--space-4) var(--space-4) auto;
width: 30%;
height: 35%;
padding: var(--space-md);
padding: var(--space-4);
background-color: var(--color-bg-primary);
border-radius: var(--radius-xl);
border-radius: var(--radius-6);
@include mixins.elevation-2;
}

16
app/javascript/mastodon/components/autosuggest/styles.module.scss
View File

@@ -29,13 +29,13 @@
.item {
display: flex;
gap: var(--space-xs);
min-height: var(--space-3xl);
gap: var(--space-2);
min-height: var(--space-8);
}
.itemIcon {
width: var(--space-3xl);
height: var(--space-3xl);
width: var(--space-8);
height: var(--space-8);
display: flex;
align-items: center;
justify-content: center;
@@ -47,19 +47,19 @@
.itemHashUses {
color: var(--color-text-tertiary);
margin-inline-start: auto;
font-size: var(--fs-xs);
font-size: var(--fs-13);
}
.itemAccountName {
@include mixins.type-label-lg;
@include mixins.type-label;
display: flex;
align-items: stretch;
gap: var(--space-2xs);
gap: var(--space-1);
}
.itemAccountHandle {
@include mixins.type-label-sm;
@include mixins.type-caption;
color: var(--color-text-tertiary);
}

2
app/javascript/mastodon/components/badge/redesign.module.scss
View File

@@ -6,6 +6,6 @@
line-height: 1.1;
&:not(.badgeWithoutIcon) {
padding-inline: var(--space-3xs) var(--space-2xs);
padding-inline: var(--space-half) var(--space-1);
}
}

8
app/javascript/mastodon/components/badge/styles.module.scss
View File

@@ -6,15 +6,15 @@
justify-content: center;
max-width: 100%;
min-width: 1lh;
padding: var(--space-2xs);
gap: var(--space-2xs);
border-radius: var(--radius-xs);
padding: var(--space-1);
gap: var(--space-1);
border-radius: var(--radius-2);
color: var(--color-text-primary);
font-size: 13px;
font-weight: 400;
&:not(.badgeWithoutIcon) {
padding-inline-end: var(--space-xs);
padding-inline-end: var(--space-2);
}
> svg {

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

@@ -31,8 +31,8 @@
}
.sheet {
padding: var(--space-md);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: var(--space-4);
border-radius: var(--radius-5) var(--radius-5) 0 0;
background: var(--color-bg-primary);
overflow: hidden;
text-align: start;

22
app/javascript/mastodon/components/button/redesign.module.scss
View File

@@ -4,9 +4,9 @@
--bg: transparent;
--bg-hover: color-mix(in srgb, var(--bg) 90%, var(--fg));
--fg: var(--color-text-primary);
--inline-padding: var(--space-xs);
--inline-padding: var(--space-2);
@include mixins.type-label-lg;
@include mixins.type-label;
background-color: var(--bg);
border-radius: var(--radius-round);
@@ -21,7 +21,7 @@
display: inline-flex;
justify-content: center;
align-items: center;
column-gap: var(--space-2xs);
column-gap: var(--space-1);
padding-inline: var(--inline-padding);
box-sizing: border-box;
@@ -74,23 +74,23 @@ a.base {
}
.sm {
--inline-padding: var(--space-sm);
--inline-padding: var(--space-3);
padding-block: var(--space-2xs);
padding-block: var(--space-1);
min-height: 32px;
}
.md {
--inline-padding: var(--space-md);
--inline-padding: var(--space-4);
padding-block: var(--space-xs);
padding-block: var(--space-2);
min-height: 40px;
}
.lg {
--inline-padding: var(--space-lg);
--inline-padding: var(--space-5);
padding-block: var(--space-sm);
padding-block: var(--space-3);
min-height: 48px;
}
@@ -215,8 +215,8 @@ a.base {
.icon,
.loading {
width: var(--fs-xl);
height: var(--fs-xl);
width: var(--fs-20);
height: var(--fs-20);
}
.iconCustom {

12
app/javascript/mastodon/components/callout/redesign.module.scss
View File

@@ -4,18 +4,18 @@
.rootSmall {
align-items: center;
background-color: var(--color-bg-highlight);
border-radius: var(--radius-sm);
border-radius: var(--radius-3);
box-sizing: border-box;
display: flex;
gap: var(--space-xs);
gap: var(--space-2);
}
.rootLarge {
padding: var(--space-sm);
padding: var(--space-3);
}
.rootSmall {
padding: var(--space-xs);
padding: var(--space-2);
}
.textWrapper {
@@ -23,6 +23,6 @@
}
.icon {
width: var(--space-lg);
height: var(--space-lg);
width: var(--space-5);
height: var(--space-5);
}

32
app/javascript/mastodon/components/card/styles.module.scss
View File

@@ -2,17 +2,17 @@
.root {
border: 0.5px solid var(--color-border-primary);
border-radius: var(--radius-md);
border-radius: var(--radius-4);
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden;
padding: var(--space-sm);
padding: var(--space-3);
position: relative;
transition: background 200ms ease-in-out;
&:has(.image) {
column-gap: var(--space-sm);
column-gap: var(--space-3);
display: grid;
grid-template-columns: minmax(0, 1fr) 120px;
padding-inline-end: 0;
@@ -30,14 +30,14 @@ a.root {
&:focus,
&:focus-visible {
border-radius: var(--radius-md);
border-radius: var(--radius-4);
outline: var(--outline-focus-default);
outline-offset: 2px;
}
}
.title {
@include mixins.type-label-md;
@include mixins.type-meta;
color: var(--color-text-secondary);
display: flex;
@@ -56,20 +56,20 @@ a.root {
.titleImage {
border-radius: var(--radius-round);
display: block;
height: var(--space-lg);
margin-inline-end: var(--space-xs);
height: var(--space-5);
margin-inline-end: var(--space-2);
overflow: hidden;
width: var(--space-lg);
width: var(--space-5);
}
.body {
@include mixins.type-label-lg;
@include mixins.type-label;
overflow-wrap: break-word;
flex-grow: 1;
* + & {
padding-block-start: var(--space-xs);
padding-block-start: var(--space-2);
}
a {
@@ -85,8 +85,8 @@ a.root {
// Linked body
a.body {
padding-inline: var(--space-sm);
margin-inline: calc(-1 * var(--space-sm));
padding-inline: var(--space-3);
margin-inline: calc(-1 * var(--space-3));
color: inherit;
text-decoration: none;
@@ -103,7 +103,7 @@ a.body {
contain: size;
grid-column: 2;
grid-row: 1 / span 9999; // Handles unlimited space
margin-block: calc(-1 * var(--space-sm));
margin-block: calc(-1 * var(--space-3));
> img {
height: 100%;
@@ -113,7 +113,7 @@ a.body {
}
.actions {
margin-block-start: var(--space-sm);
margin-block-start: var(--space-3);
}
.clamp {
@@ -122,6 +122,6 @@ a.body {
.delete {
position: absolute;
top: var(--space-xs);
right: var(--space-xs);
top: var(--space-2);
right: var(--space-2);
}

14
app/javascript/mastodon/components/column_header/styles.module.scss
View File

@@ -9,7 +9,7 @@
// Make bottom half of column header transparent to make the
// overlay gradient on the `.layout` class work
--column-header-gradient-start: calc(100% - var(--space-sm));
--column-header-gradient-start: calc(100% - var(--space-3));
background: linear-gradient(
to bottom,
@@ -47,7 +47,7 @@
// Ensure that a header without buttons is as tall as one with buttons
min-height: 32px;
padding: var(--space-sm);
padding: var(--space-3);
text-align: center;
color: var(--color-text-primary);
background: linear-gradient(
@@ -61,16 +61,16 @@
}
@media (width >= variables.$mobile-menu-breakpoint) {
border-top-left-radius: var(--radius-xl);
border-top-right-radius: var(--radius-xl);
border-top-left-radius: var(--radius-6);
border-top-right-radius: var(--radius-6);
}
&[data-has-unread='true']::after {
content: '';
grid-row: 1;
grid-column: 2;
width: var(--space-xs);
height: var(--space-xs);
width: var(--space-2);
height: var(--space-2);
background-color: var(--color-text-brand);
border-radius: var(--radius-round);
justify-self: center;
@@ -93,7 +93,7 @@
border: none;
font: inherit;
background: transparent;
border-radius: var(--radius-xs);
border-radius: var(--radius-2);
&:focus-visible {
outline: var(--outline-focus-default);

24
app/javascript/mastodon/components/form_fields/redesign.module.scss
View File

@@ -23,42 +23,42 @@
}
label {
font-size: var(--fs-sm);
font-size: var(--fs-14);
}
}
.icon {
width: var(--space-lg);
height: var(--space-lg);
width: var(--space-5);
height: var(--space-5);
}
// Text Input
.inputWrapper {
label {
font-size: var(--fs-sm);
font-size: var(--fs-14);
}
span {
color: var(--color-text-tertiary);
font-size: var(--fs-2xs);
line-height: var(--fs-lg);
font-size: var(--fs-12);
line-height: var(--fs-16);
}
}
input.input {
font-size: var(--fs-lg);
font-size: var(--fs-16);
background: none;
border-radius: var(--space-xs);
border-radius: var(--space-2);
border: 0.5px solid var(--color-text-tertiary);
padding: var(--space-xs);
padding: var(--space-2);
transition:
background 200ms,
border 200ms,
opacity 200ms;
&:hover:not(:disabled) {
box-shadow: 0 1px var(--space-2xs) 0
box-shadow: 0 1px var(--space-1) 0
rgb(from var(--color-text-primary) r g b / 10%);
background: var(--color-bg-highlight);
}
@@ -77,8 +77,8 @@ input.input {
svg {
width: 20px;
height: 20px;
inset-inline-start: var(--space-xs);
inset-block-start: var(--space-xs);
inset-inline-start: var(--space-2);
inset-block-start: var(--space-2);
}
}

28
app/javascript/mastodon/components/menu/styles.module.scss
View File

@@ -6,9 +6,9 @@
display: flex;
flex-direction: column;
padding: var(--space-2xs);
padding: var(--space-1);
inset: unset; // override default [popover] UA styles
border-radius: var(--radius-md);
border-radius: var(--radius-4);
background: var(--color-bg-primary);
overflow: hidden;
z-index: calc(infinity);
@@ -25,16 +25,16 @@
}
.itemGroupLabel {
@include mixins.type-label-sm;
@include mixins.type-caption;
color: var(--color-text-tertiary);
padding: var(--space-xs) var(--space-sm) 0;
padding: var(--space-2) var(--space-3) 0;
}
.itemDivider {
height: 1px;
background-color: var(--color-border-primary);
margin: var(--space-2xs) var(--space-sm);
margin: var(--space-1) var(--space-3);
border: none;
}
@@ -46,9 +46,9 @@
box-sizing: border-box;
display: flex;
align-items: center;
border-radius: var(--radius-sm);
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-3);
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
color: var(--color-text-primary);
text-decoration: none;
cursor: var(--cursor);
@@ -78,7 +78,7 @@
&:focus {
// Override overeager global styles
border-radius: var(--radius-sm);
border-radius: var(--radius-3);
}
&:focus-visible {
@@ -109,10 +109,10 @@
}
.itemDescription {
@include mixins.type-label-sm;
@include mixins.type-caption;
display: block;
margin-top: var(--space-3xs);
margin-top: var(--space-half);
color: var(--color-text-secondary);
.item[aria-disabled='true'] &,
@@ -124,13 +124,13 @@
}
.itemIcon {
width: var(--space-lg);
height: var(--space-lg);
width: var(--space-5);
height: var(--space-5);
}
.itemTrailingContent {
margin-inline-start: auto;
// Add additional space after the text.
padding-inline-start: var(--space-xs);
padding-inline-start: var(--space-2);
}

14
app/javascript/mastodon/components/modal_shell/redesign.module.scss
View File

@@ -3,13 +3,13 @@
.modal {
@include mixins.elevation-1;
border-radius: var(--radius-xl);
border-radius: var(--radius-6);
box-sizing: border-box;
background: var(--color-bg-primary);
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-md);
gap: var(--space-4);
padding: var(--space-4);
pointer-events: auto;
user-select: text;
overflow: hidden;
@@ -22,7 +22,7 @@
.titleWrapper {
display: flex;
align-items: start;
gap: var(--space-md);
gap: var(--space-4);
}
.title {
@@ -33,15 +33,15 @@
.closeButton {
// Prevent close button from increasing spacing around title
margin-block: calc(-1 * var(--space-xs));
margin-inline-end: calc(-1 * var(--space-xs));
margin-block: calc(-1 * var(--space-2));
margin-inline-end: calc(-1 * var(--space-2));
}
.actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
gap: var(--space-4);
}
.actionsLeft {

10
app/javascript/mastodon/components/status/attachments.module.scss
View File

@@ -4,7 +4,7 @@
> :global(.status-card) {
margin-top: 0;
border: var(--border-thin);
border-radius: var(--radius-md);
border-radius: var(--radius-4);
> a {
transition: background 200ms ease-in-out;
@@ -14,14 +14,14 @@
}
:global(.status-card__host) {
@include mixins.type-label-md;
@include mixins.type-meta;
// Overrides hover styles.
color: var(--color-text-secondary);
}
:global(.status-card__title) {
@include mixins.type-label-lg;
@include mixins.type-label;
// Overrides hover styles.
color: var(--color-text-primary);
@@ -38,6 +38,6 @@
}
.cardAuthor {
padding-inline-start: var(--space-xs);
gap: var(--space-2xs);
padding-inline-start: var(--space-2);
gap: var(--space-1);
}

4
app/javascript/mastodon/components/status/header.module.scss
View File

@@ -38,7 +38,7 @@
@include mixins.type-body;
display: flex;
gap: var(--space-2xs);
gap: var(--space-1);
}
// Overrides .header a
@@ -54,5 +54,5 @@ a.headerNameLink {
}
.headerHandle {
@include mixins.type-label-md;
@include mixins.type-meta;
}

12
app/javascript/mastodon/components/status/prepend.module.scss
View File

@@ -1,7 +1,7 @@
@use '@/styles/mastodon/mixins';
.root {
@include mixins.type-label-md;
@include mixins.type-meta;
display: grid;
grid-template-columns: subgrid;
@@ -34,18 +34,18 @@
.replyIcon {
border-block-start: 2px solid var(--color-border-primary);
border-inline-start: 2px solid var(--color-border-primary);
border-top-left-radius: var(--radius-md);
border-top-left-radius: var(--radius-4);
box-sizing: border-box;
margin: var(--space-xs) var(--col-gap) 0 var(--space-2xs);
margin: var(--space-2) var(--col-gap) 0 var(--space-1);
width: calc(var(--avatar-size) / 2 + 1px);
height: calc(100% - var(--space-xs));
height: calc(100% - var(--space-2));
justify-self: end;
}
.contents {
display: flex;
align-items: center;
gap: var(--space-2xs);
gap: var(--space-1);
}
// Add a tag to override .root a
@@ -58,5 +58,5 @@ a.account {
@include mixins.line-clamp(1);
display: block;
margin-block-start: var(--space-2xs);
margin-block-start: var(--space-1);
}

28
app/javascript/mastodon/components/status/quote.module.scss
View File

@@ -9,9 +9,9 @@
.spoiler {
background: var(--color-bg-highlight);
border-radius: var(--radius-sm);
margin: var(--space-2xs) 0;
padding: var(--space-xs);
border-radius: var(--radius-3);
margin: var(--space-1) 0;
padding: var(--space-2);
}
.body {
@@ -36,17 +36,17 @@
.reply {
color: var(--color-text-tertiary);
margin-bottom: var(--space-xs);
margin-bottom: var(--space-2);
}
.media {
margin-top: var(--space-2xs);
margin-top: var(--space-1);
}
.mediaGrid {
display: grid;
height: 260px;
gap: var(--space-3xs);
gap: var(--space-half);
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
aspect-ratio: 3/2;
@@ -68,21 +68,21 @@
.image {
max-height: 260px;
border-radius: var(--radius-xs);
border-radius: var(--radius-2);
}
.videoDuration {
@include mixins.type-label-md;
@include mixins.type-meta;
display: flex;
gap: var(--space-2xs);
gap: var(--space-1);
align-items: center;
position: absolute;
inset-block-end: var(--space-xs);
inset-inline-start: var(--space-xs);
padding: var(--space-2xs) var(--space-3xs);
inset-block-end: var(--space-2);
inset-inline-start: var(--space-2);
padding: var(--space-1) var(--space-half);
background: var(--color-bg-highlight);
border-radius: var(--radius-xs);
border-radius: var(--radius-2);
color: var(--color-text-primary);
svg {
@@ -104,5 +104,5 @@
}
.infoPopup {
padding: var(--space-sm);
padding: var(--space-3);
}

24
app/javascript/mastodon/components/status/styles.module.scss
View File

@@ -1,7 +1,7 @@
@use '@/styles/mastodon/mixins';
.root {
--col-gap: var(--space-xs);
--col-gap: var(--space-2);
--avatar-size: 40px;
--content-col: 2;
@@ -9,14 +9,14 @@
grid-template-columns: calc(var(--avatar-size) + var(--col-gap)) auto;
grid-template-rows: minmax(calc(var(--avatar-size) + var(--col-gap)), auto);
grid-auto-rows: auto;
row-gap: var(--space-xs);
padding: var(--space-md);
row-gap: var(--space-2);
padding: var(--space-4);
}
.variantThread {
--avatar-size: 32px;
padding: var(--space-xs) 0;
padding: var(--space-2) 0;
}
.variantPage {
@@ -24,7 +24,7 @@
}
.isQuote {
padding: var(--space-sm);
padding: var(--space-3);
}
.isMessage {
@@ -73,7 +73,7 @@
}
.translateInfo {
@include mixins.type-label-md;
@include mixins.type-meta;
color: var(--color-text-secondary);
margin-inline-start: auto;
@@ -95,7 +95,7 @@
.content {
display: flex;
flex-direction: column;
gap: var(--space-xs);
gap: var(--space-2);
position: relative;
}
@@ -103,7 +103,7 @@
--fade-time: 100ms;
overflow: clip;
border-radius: var(--radius-xs);
border-radius: var(--radius-2);
&::after {
content: '';
@@ -113,7 +113,7 @@
var(--color-bg-highlight) 1px,
transparent 0
);
background-size: var(--space-xs) var(--space-xs);
background-size: var(--space-2) var(--space-2);
background-repeat: repeat;
// See: https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/
@@ -170,7 +170,7 @@
}
.contentImage {
border-radius: var(--radius-md);
border-radius: var(--radius-4);
position: relative;
background-size: cover;
background-position: center;
@@ -190,12 +190,12 @@
.hashtagsWrapper,
.hashtags {
display: flex;
gap: var(--space-2xs);
gap: var(--space-1);
flex-wrap: nowrap;
}
.hashtagsWrapper {
padding: var(--space-2xs) 0;
padding: var(--space-1) 0;
}
.hashtags {

74
app/javascript/mastodon/features/compose/redesign/attachments.module.scss
View File

@@ -11,7 +11,7 @@
.mediaGrid {
display: grid;
gap: var(--space-3xs);
gap: var(--space-half);
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
aspect-ratio: 3/2;
@@ -26,7 +26,7 @@
}
.mediaUpload {
border-radius: var(--radius-md);
border-radius: var(--radius-4);
position: relative;
background-size: cover;
background-position: center;
@@ -51,21 +51,21 @@
.mediaMenuButton {
position: absolute;
top: var(--space-xs);
right: var(--space-xs);
top: var(--space-2);
right: var(--space-2);
}
.mediaAlt {
@include mixins.type-micro;
display: block;
padding: var(--space-2xs);
border-radius: var(--radius-xs);
padding: var(--space-1);
border-radius: var(--radius-2);
background: var(--color-bg-inverted);
color: var(--color-text-inverted);
position: absolute;
bottom: var(--space-xs);
right: var(--space-xs);
bottom: var(--space-2);
right: var(--space-2);
text-transform: uppercase;
}
@@ -76,26 +76,26 @@
// Audio
.audioWrapper {
--height: var(--space-5xl);
--height: var(--space-10);
display: flex;
align-items: center;
border-radius: var(--radius-md);
gap: var(--space-2xs);
border-radius: var(--radius-4);
gap: var(--space-1);
border: 0.5px solid var(--color-text-tertiary);
padding: var(--space-xs);
padding: var(--space-2);
}
.audioCover {
height: var(--height);
width: auto;
aspect-ratio: 1;
border-radius: var(--radius-sm);
border-radius: var(--radius-3);
}
.audioControl {
overflow: hidden;
border-radius: var(--radius-sm);
border-radius: var(--radius-3);
display: block;
box-sizing: border-box;
flex-grow: 1;
@@ -107,27 +107,27 @@
.poll {
display: flex;
flex-direction: column;
gap: var(--space-sm);
gap: var(--space-3);
border: 0.5px solid var(--color-text-tertiary);
border-radius: var(--radius-md);
padding: var(--space-xs);
border-radius: var(--radius-4);
padding: var(--space-2);
ol {
display: flex;
flex-direction: column;
gap: var(--space-xs);
gap: var(--space-2);
counter-reset: poll;
width: 100%;
}
label {
@include mixins.type-label-sm;
@include mixins.type-caption;
}
}
.pollOption {
display: flex;
gap: var(--space-sm);
gap: var(--space-3);
align-items: center;
counter-increment: poll;
@@ -135,18 +135,18 @@
@include mixins.type-micro;
content: counter(poll, upper-alpha);
width: var(--space-lg);
height: var(--space-lg);
width: var(--space-5);
height: var(--space-5);
flex-shrink: 0;
line-height: var(--space-lg);
line-height: var(--space-5);
text-align: center;
border-radius: var(--radius-xs);
border-radius: var(--radius-2);
background: var(--color-bg-highlight);
}
}
.pollAddNew {
margin-left: var(--space-lg);
margin-left: var(--space-5);
}
.pollMultipleToggle {
@@ -173,9 +173,9 @@
.quoteSpoiler {
background: var(--color-bg-highlight);
border-radius: var(--radius-sm);
margin: var(--space-2xs) 0;
padding: var(--space-xs);
border-radius: var(--radius-3);
margin: var(--space-1) 0;
padding: var(--space-2);
}
.quoteBody {
@@ -194,11 +194,11 @@
.quoteReply {
color: var(--color-text-tertiary);
margin-bottom: var(--space-xs);
margin-bottom: var(--space-2);
}
.quoteMedia {
margin-top: var(--space-2xs);
margin-top: var(--space-1);
&.mediaGrid {
height: 260px;
@@ -206,22 +206,22 @@
.mediaUpload {
max-height: 260px;
border-radius: var(--radius-xs);
border-radius: var(--radius-2);
}
}
.quoteVideoDuration {
@include mixins.type-label-md;
@include mixins.type-meta;
display: flex;
gap: var(--space-2xs);
gap: var(--space-1);
align-items: center;
position: absolute;
inset-block-end: var(--space-xs);
inset-inline-start: var(--space-xs);
padding: var(--space-2xs) var(--space-3xs);
inset-block-end: var(--space-2);
inset-inline-start: var(--space-2);
padding: var(--space-1) var(--space-half);
background: var(--color-bg-highlight);
border-radius: var(--radius-xs);
border-radius: var(--radius-2);
color: var(--color-text-primary);
svg {

14
app/javascript/mastodon/features/compose/redesign/modals.module.scss
View File

@@ -4,20 +4,20 @@
.attachmentRoot {
min-width: 400px;
padding: var(--space-md) 0;
padding: var(--space-4) 0;
.title,
.footer {
padding: 0 var(--space-md);
padding: 0 var(--space-4);
}
}
.attachmentItem {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-xs);
margin: 0 var(--space-xs);
gap: var(--space-3);
padding: var(--space-2) var(--space-2);
margin: 0 var(--space-2);
transition:
opacity 200ms,
var(--transition, none);
@@ -32,12 +32,12 @@
height: 60px;
width: 90px;
object-fit: cover;
border-radius: var(--radius-md);
border-radius: var(--radius-4);
}
}
.attachmentHandle {
padding: var(--space-xs) 0;
padding: var(--space-2) 0;
aspect-ratio: auto;
cursor: inherit;
}

46
app/javascript/mastodon/features/compose/redesign/styles.module.scss
View File

@@ -6,14 +6,14 @@
background: var(--color-bg-primary);
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-md);
gap: var(--space-2);
padding: var(--space-4);
z-index: 1; // To cover the sidebar
@media (width >= #{variables.$mobile-menu-breakpoint}) {
@include mixins.elevation-2;
border-radius: var(--radius-xl);
border-radius: var(--radius-6);
overflow: hidden;
}
}
@@ -44,9 +44,9 @@
}
.toolbar {
margin-top: var(--space-xs);
margin-top: var(--space-2);
display: flex;
gap: var(--space-xs);
gap: var(--space-2);
align-items: center;
flex-wrap: wrap;
@@ -58,7 +58,7 @@
.flexGrowWrap {
display: flex;
align-items: center;
gap: var(--space-xs);
gap: var(--space-2);
flex-grow: 1;
@container (width < 310px) {
@@ -72,18 +72,18 @@
.toolbarMessage {
display: flex;
gap: var(--space-2xs);
gap: var(--space-1);
align-items: center;
color: var(--color-text-secondary);
svg {
width: var(--space-lg);
height: var(--space-lg);
width: var(--space-5);
height: var(--space-5);
}
}
.textareaWrapper {
--fade-size: var(--space-xl);
--fade-size: var(--space-6);
overflow-y: auto;
flex-grow: 1;
@@ -119,13 +119,13 @@
.textareaMirror {
@include mixins.type-body-lg;
padding: var(--space-xs);
padding: var(--space-2);
}
.textarea {
flex-grow: 1;
flex-shrink: 0;
border-radius: var(--radius-xs);
border-radius: var(--radius-2);
transition: border 200ms;
cursor: text;
border: none;
@@ -160,21 +160,21 @@ textarea.textarea {
.attachments {
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-top: var(--space-md);
gap: var(--space-2);
margin-top: var(--space-4);
}
.footer {
display: flex;
align-items: center;
gap: var(--space-2xs);
gap: var(--space-1);
flex-wrap: wrap;
}
.counter {
display: flex;
align-items: center;
gap: var(--space-3xs);
gap: var(--space-half);
font-family: var(--font-monospace);
color: var(--color-text-tertiary);
margin-inline-start: auto;
@@ -187,10 +187,10 @@ textarea.textarea {
// Language selector
.languageMenu {
padding: var(--space-xs);
padding: var(--space-2);
input {
margin-bottom: var(--space-xs);
margin-bottom: var(--space-2);
&:focus::placeholder {
color: transparent;
@@ -214,7 +214,7 @@ textarea.textarea {
// Reply
.reply {
column-gap: var(--space-2xs);
column-gap: var(--space-1);
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
@@ -222,12 +222,12 @@ textarea.textarea {
&::before {
border-block-start: 2px solid var(--color-border-primary);
border-inline-start: 2px solid var(--color-border-primary);
border-top-left-radius: var(--radius-md);
border-top-left-radius: var(--radius-4);
box-sizing: border-box;
content: '';
display: block;
grid-row: span 2;
margin: var(--space-xs) var(--space-2xs) 0;
margin: var(--space-2) var(--space-1) 0;
width: 20px;
}
@@ -240,7 +240,7 @@ textarea.textarea {
.replyAccount {
display: flex;
align-items: center;
margin-bottom: var(--space-2xs);
margin-bottom: var(--space-1);
> a,
> span {
@@ -249,7 +249,7 @@ textarea.textarea {
}
.replyAvatar {
margin-inline-end: var(--space-xs);
margin-inline-end: var(--space-2);
border-radius: var(--radius-round);
overflow: hidden;
}

18
app/javascript/mastodon/features/compose/redesign/trigger.module.scss
View File

@@ -3,8 +3,8 @@
.button {
&:not(.buttonInline) {
position: fixed;
bottom: var(--space-md);
right: var(--space-md);
bottom: var(--space-4);
right: var(--space-4);
z-index: 2;
}
}
@@ -29,20 +29,20 @@
bottom: 0;
min-height: 270px;
height: auto;
max-height: calc(100vh - (var(--space-md) * 2));
max-height: calc(100vh - (var(--space-4) * 2));
min-width: 300px;
width: calc(100vw - var(--space-md) * 2);
width: calc(100vw - var(--space-4) * 2);
max-width: 500px;
margin: var(--space-md);
margin: var(--space-4);
}
}
.composerMinimized {
bottom: 0;
width: min(320px, calc(100vw - var(--space-md) * 2));
padding: var(--space-md);
margin: var(--space-md);
border-radius: var(--radius-xl);
width: min(320px, calc(100vw - var(--space-4) * 2));
padding: var(--space-4);
margin: var(--space-4);
border-radius: var(--radius-6);
@media (width < #{variables.$mobile-menu-breakpoint}) {
bottom: var(--mobile-bottom-nav-height);

8
app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
View File

@@ -1,9 +1,9 @@
.root {
display: flex;
align-items: center;
padding: var(--space-xs);
padding: var(--space-2);
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-sm);
border-radius: var(--radius-3);
& > :global(.account) {
flex-grow: 1;
@@ -12,9 +12,9 @@
--account-outer-spacing: 0;
--avatar-border-radius: var(--radius-round);
--account-name-color: var(--color-text-primary);
--account-name-size: var(--fs-sm);
--account-name-size: var(--fs-14);
--account-handle-color: var(--color-text-secondary);
--account-handle-size: var(--fs-2xs);
--account-handle-size: var(--fs-12);
}
& :global(.display-name) {

8
app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss
View File

@@ -4,10 +4,10 @@
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
margin-top: var(--space-xl);
gap: var(--space-2);
margin-top: var(--space-6);
@include mixins.type-label-sm;
@include mixins.type-caption;
}
.heading {
@@ -18,7 +18,7 @@
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-xs);
gap: var(--space-2);
a {
color: var(--color-text-secondary);

12
app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
View File

@@ -9,9 +9,9 @@
// We're distributing the bottom spacing between padding and margin so that
// not too much of it overlaps the navigation links when scrolled down
--half-bottom-spacing: calc(var(--space-xl) / 2);
--half-bottom-spacing: calc(var(--space-6) / 2);
padding: var(--space-xl) var(--space-lg) var(--half-bottom-spacing);
padding: var(--space-6) var(--space-5) var(--half-bottom-spacing);
margin-bottom: var(--half-bottom-spacing);
background: var(--navigation-background-color);
@@ -32,11 +32,11 @@
display: flex;
align-items: center;
column-gap: var(--space-xs);
column-gap: var(--space-2);
min-width: 0;
color: inherit;
text-decoration: none;
outline-offset: var(--space-3xs);
outline-offset: var(--space-half);
&:hover {
text-decoration: none;
@@ -64,7 +64,7 @@
}
.poweredBy {
@include mixins.type-label-sm;
@include mixins.type-caption;
grid-column: 2;
text-wrap: balance;
@@ -73,7 +73,7 @@
svg {
width: 1em;
height: 1em;
margin-inline-end: var(--space-3xs);
margin-inline-end: var(--space-half);
vertical-align: middle;
color: inherit;
}

12
app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss
View File

@@ -3,7 +3,7 @@
.root {
&:not(:last-child) {
margin-bottom: var(--space-md);
margin-bottom: var(--space-4);
}
:any-link {
@@ -20,10 +20,10 @@
@include navigation-link.link-base;
min-height: 32px;
padding: var(--space-2xs) var(--space-xs);
margin-bottom: var(--space-3xs);
padding: var(--space-1) var(--space-2);
margin-bottom: var(--space-half);
@include mixins.type-label-md;
@include mixins.type-meta;
color: var(--color-text-secondary);
}
@@ -40,7 +40,7 @@
}
.emptyState {
@include mixins.type-label-sm;
@include mixins.type-caption;
padding-inline: var(--space-xs);
padding-inline: var(--space-2);
}

4
app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.module.scss
View File

@@ -1,7 +1,7 @@
@use '@/styles/mastodon/mixins';
.description {
margin-bottom: var(--space-md);
margin-bottom: var(--space-4);
@include mixins.type-body-compact;
@@ -11,5 +11,5 @@
.buttons {
display: flex;
flex-direction: column;
gap: var(--space-xs);
gap: var(--space-2);
}

12
app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss
View File

@@ -5,7 +5,7 @@
position: fixed;
bottom: env(safe-area-inset-bottom);
inset-inline: 0;
padding: 0 var(--space-md) var(--space-md);
padding: 0 var(--space-4) var(--space-4);
z-index: 100;
display: flex;
@@ -13,7 +13,7 @@
// which somehow makes more sense for the focus order
flex-direction: column-reverse;
align-items: end;
gap: var(--space-xs);
gap: var(--space-2);
// Allow clicking through this container
pointer-events: none;
@@ -38,7 +38,7 @@
}
.list {
padding: var(--space-2xs);
padding: var(--space-1);
> li {
flex-grow: 1;
@@ -46,8 +46,8 @@
}
.loggedOutInfo {
gap: var(--space-xs);
padding: var(--space-xs) var(--space-md);
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
}
.logoLockup {
@@ -92,7 +92,7 @@
inset-block: 0;
inset-inline-start: calc(-1 * var(--pull-tolerance));
width: var(--navigation-max-width);
max-width: calc(100vw - var(--space-3xl));
max-width: calc(100vw - var(--space-8));
padding-inline-start: var(--pull-tolerance);
touch-action: pan-y;
background: var(--color-bg-primary);

24
app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
View File

@@ -2,24 +2,24 @@
@use '@/styles/mastodon/variables';
.wrapper {
padding-bottom: var(--space-3xs);
padding-bottom: var(--space-half);
}
.wrapperWithSpace {
padding-bottom: var(--space-md);
padding-bottom: var(--space-4);
}
@mixin link-base {
--icon-size: 20px;
--border-radius: var(--radius-sm);
--border-radius: var(--radius-3);
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
padding: var(--space-xs);
column-gap: var(--space-sm);
padding: var(--space-2);
column-gap: var(--space-3);
border-radius: var(--border-radius);
border: none;
color: var(--color-text-primary);
@@ -64,7 +64,7 @@
--icon-size: 24px;
flex-direction: column;
row-gap: var(--space-2xs);
row-gap: var(--space-1);
padding-inline: 0;
@include mixins.type-micro;
}
@@ -76,7 +76,7 @@
width: 100%;
justify-content: center;
gap: 0;
padding-block: var(--space-sm);
padding-block: var(--space-3);
transition:
background-color 200ms,
color 200ms;
@@ -105,9 +105,9 @@
content: '';
position: absolute;
top: var(--space-4xs);
left: calc(50% + var(--space-3xs));
width: var(--space-xs);
height: var(--space-xs);
left: calc(50% + var(--space-half));
width: var(--space-2);
height: var(--space-2);
border-radius: var(--radius-round);
background-color: var(--color-bg-brand-base);
border: 1px solid var(--color-bg-primary);
@@ -130,7 +130,7 @@
.badge {
.linkStacked & {
position: absolute;
top: var(--space-3xs);
inset-inline-start: calc(50% + var(--space-3xs));
top: var(--space-half);
inset-inline-start: calc(50% + var(--space-half));
}
}

12
app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
View File

@@ -24,16 +24,16 @@
}
.list {
margin-top: var(--space-xl);
margin-inline: var(--space-md);
margin-top: var(--space-6);
margin-inline: var(--space-4);
}
.footer {
position: sticky;
bottom: 0;
margin-top: auto;
padding: var(--space-xl);
padding-top: var(--space-2xs);
padding: var(--space-6);
padding-top: var(--space-1);
background-color: var(--navigation-background-color);
&::before {
@@ -51,6 +51,6 @@
.footerNav {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2xs);
margin-bottom: var(--space-xs);
gap: var(--space-1);
margin-bottom: var(--space-2);
}

4
app/javascript/mastodon/features/ui/components/column_loading/styles.module.scss
View File

@@ -1,13 +1,13 @@
@use '@/styles/mastodon/mixins';
.loadingWrapper {
@include mixins.type-label-md;
@include mixins.type-meta;
display: grid;
justify-items: center;
align-content: center;
height: 100%;
gap: var(--space-sm);
gap: var(--space-3);
opacity: 0;
animation: fade-in 300ms ease-in 1.2s forwards;
}

6
app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss
View File

@@ -15,7 +15,7 @@
padding-bottom: env(safe-area-inset-bottom);
@media (min-width: $no-gap-breakpoint) {
padding-inline: var(--space-2xs);
padding-inline: var(--space-1);
}
@media (min-width: $mobile-menu-breakpoint) {
@@ -24,7 +24,7 @@
minmax(var(--navigation-min-width), 1fr)
minmax(0, var(--main-column-max-width))
minmax(0, 1fr);
gap: var(--space-xs);
gap: var(--space-2);
}
}
@@ -36,7 +36,7 @@
.multiColumnRoot {
--multi-column-navigation-width: 320px;
--multi-column-gap: var(--space-xs);
--multi-column-gap: var(--space-2);
position: relative;
display: flex;

2
app/javascript/mastodon/features/ui/components/columns_area/redesign_multicol.module.scss
View File

@@ -2,7 +2,7 @@
.root {
--multi-column-navigation-width: 320px;
--multi-column-gap: var(--space-xs);
--multi-column-gap: var(--space-2);
position: relative;
display: flex;

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 {