diff --git a/app/javascript/fonts/inter/inter-medium-italic.woff2 b/app/javascript/fonts/inter/inter-medium-italic.woff2 new file mode 100644 index 00000000000..0dc5a3068f0 Binary files /dev/null and b/app/javascript/fonts/inter/inter-medium-italic.woff2 differ diff --git a/app/javascript/fonts/inter/inter-medium.woff2 b/app/javascript/fonts/inter/inter-medium.woff2 new file mode 100644 index 00000000000..fdfdcc699fc Binary files /dev/null and b/app/javascript/fonts/inter/inter-medium.woff2 differ diff --git a/app/javascript/fonts/inter/inter-semibold-italic.woff2 b/app/javascript/fonts/inter/inter-semibold-italic.woff2 deleted file mode 100644 index d67d01c6c45..00000000000 Binary files a/app/javascript/fonts/inter/inter-semibold-italic.woff2 and /dev/null differ diff --git a/app/javascript/fonts/inter/inter-semibold.woff2 b/app/javascript/fonts/inter/inter-semibold.woff2 deleted file mode 100644 index fbae113d285..00000000000 Binary files a/app/javascript/fonts/inter/inter-semibold.woff2 and /dev/null differ diff --git a/app/javascript/mastodon/components/button/redesign.module.scss b/app/javascript/mastodon/components/button/redesign.module.scss index 186fb0b6be2..0fe785fc87b 100644 --- a/app/javascript/mastodon/components/button/redesign.module.scss +++ b/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; diff --git a/app/javascript/mastodon/components/button/redesign.stories.tsx b/app/javascript/mastodon/components/button/redesign.stories.tsx index f2b4ef3d8ce..747d4b55722 100644 --- a/app/javascript/mastodon/components/button/redesign.stories.tsx +++ b/app/javascript/mastodon/components/button/redesign.stories.tsx @@ -59,6 +59,9 @@ const meta = { }, }, }, + parameters: { + redesign: true, + }, } satisfies Meta; export default meta; diff --git a/app/javascript/mastodon/components/button/redesign.tsx b/app/javascript/mastodon/components/button/redesign.tsx index 3543da046ba..7b1ae332331 100644 --- a/app/javascript/mastodon/components/button/redesign.tsx +++ b/app/javascript/mastodon/components/button/redesign.tsx @@ -107,7 +107,7 @@ export const Button: React.FC = ({ )} {props.loading && } - {children} + {children} {trailingIcon && ( )} diff --git a/app/javascript/styles/fonts/inter.scss b/app/javascript/styles/fonts/inter.scss index 3431277e3e2..0b18b1cafc1 100644 --- a/app/javascript/styles/fonts/inter.scss +++ b/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;