Redesign: Tweak button sizes (#40308)

app/javascript/mastodon/components/button/redesign.module.scss

@@ -1,3 +1,5 @@
+@use '@/styles/mastodon/mixins';
+
 .base {
   --bg: transparent;
   --bg-hover: color-mix(in srgb, var(--bg) 90%, var(--fg));
@@ -16,8 +18,9 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-size: var(--fs-sm);
-  line-height: 1;
+  column-gap: var(--space-2xs);
+  @include mixins.type-label-lg;
+
   box-sizing: border-box;
 
   &:hover:not(
@@ -65,23 +68,22 @@ a.base {
 // Sizes
 
 .xs {
-  padding: var(--space-3xs) var(--space-2xs);
-  font-size: var(--fs-2xs);
+  padding-inline: var(--space-xs);
   min-height: 20px;
 }
 
 .sm {
-  padding: var(--space-xs);
+  padding: var(--space-2xs) var(--space-sm);
   min-height: 32px;
 }
 
 .md {
-  padding: var(--space-xs) var(--space-sm);
+  padding: var(--space-xs) var(--space-md);
   min-height: 40px;
 }
 
 .lg {
-  padding: var(--space-sm) var(--space-md);
+  padding: var(--space-sm) var(--space-lg);
   min-height: 48px;
 }
 
@@ -182,16 +184,6 @@ a.base {
   height: var(--fs-xl);
 }
 
-// Adds padding to the text label. This is supposed to be there even if there is no icon.
-.content {
-  display: inline-block;
-  margin: 0 var(--space-2xs);
-
-  .xs & {
-    margin: 0 var(--space-3xs);
-  }
-}
-
 .iconOnly {
   aspect-ratio: 1;
   padding: 0;

app/javascript/mastodon/components/button/redesign.stories.tsx

@@ -59,6 +59,9 @@ const meta = {
       },
     },
   },
+  parameters: {
+    redesign: true,
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;

app/javascript/mastodon/components/button/redesign.tsx

@@ -107,7 +107,7 @@ export const Button: React.FC<ButtonProps> = ({
       <Icon id='leading' icon={leadingIcon} className={classes.icon} />
     )}
     {props.loading && <LoadingIcon />}
-    <span className={classes.content}>{children}</span>
+    {children}
     {trailingIcon && (
       <Icon id='trailing' icon={trailingIcon} className={classes.icon} />
     )}

app/javascript/styles/fonts/inter.scss

@@ -16,19 +16,19 @@
   font-display: swap;
 }
 
-// SemiBold (native 600, mapped to 700 so that `font-weight: bold` uses it)
+// Medium (native 500, mapped to 700 so that `font-weight: bold` uses it)
 @font-face {
   font-family: Inter;
-  src: url('../../fonts/inter/inter-semibold.woff2') format('woff2');
+  src: url('../../fonts/inter/inter-medium.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)
+// Medium Italic (native 500, 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');
+  src: url('../../fonts/inter/inter-medium-italic.woff2') format('woff2');
   font-weight: 700;
   font-style: italic;
   font-display: swap;