Add design tokens for 5.0 redesign (#39848)

app/javascript/styles/application.scss

@@ -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';

app/javascript/styles/mastodon/_mixins.scss

@@ -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%;

app/javascript/styles/mastodon/_variables.scss

@@ -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;

app/javascript/styles/mastodon/components.scss

@@ -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);

app/javascript/styles/mastodon/tokens/_shape.scss

@@ -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);
+}

app/javascript/styles/mastodon/tokens/_type.scss

@@ -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;
+}

app/javascript/styles/mastodon/tokens/index.scss

@@ -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'],