Fix Tailwind line heights

frontend/src/components/VAudioDetails/VAudioDetails.vue

@@ -136,6 +136,6 @@ dt {
 }
 
 dd {
-  @apply pt-2 text-sm text-base font-semibold capitalize leading-[130%];
+  @apply pt-2 text-base font-semibold capitalize leading-snug;
 }
 </style>

frontend/src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -23,13 +23,11 @@
       <div
         class="audio-info order-2 flex w-full flex-col justify-center lg:order-1 lg:w-auto"
       >
-        <h1
-          class="font-heading text-base font-semibold leading-[1.3] lg:text-3xl lg:line-clamp-2"
-        >
+        <h1 class="description-bold lg:heading-5 lg:line-clamp-2">
           {{ audio.title }}
         </h1>
         <div
-          class="subtitle mt-1 flex flex-col gap-2 text-base leading-[1.3] lg:flex-row lg:items-center"
+          class="subtitle mt-1 flex flex-col gap-2 text-base leading-snug lg:flex-row lg:items-center"
         >
           <i18n as="span" path="audio-track.creator" class="font-semibold">
             <template #creator>

frontend/src/components/VExternalSearch/VExternalSearchForm.vue

@@ -9,14 +9,14 @@
       v-if="!hasNoResults && isSupported"
       path="external-sources.form.supported-title"
       tag="p"
-      class="text-base font-normal leading-[130%]"
+      class="description-regular"
     />
 
     <i18n
       v-else-if="!hasNoResults && !isSupported"
       path="external-sources.form.unsupported-title"
       tag="p"
-      class="text-base font-normal leading-[130%]"
+      class="description-regular"
     >
       <template #openverse>Openverse</template>
       <template #type>{{ $t(`external-sources.form.types.${type}`) }}</template>
@@ -26,7 +26,7 @@
       v-else
       path="external-sources.form.no-results-title"
       tag="p"
-      class="text-base font-normal leading-[130%]"
+      class="description-regular"
     >
       <template #type>{{ $t(`external-sources.form.types.${type}`) }}</template>
       <template #query>{{ searchTerm }}</template>

frontend/src/components/VMediaInfo/VMediaReuse.vue

@@ -6,7 +6,7 @@
     <h2 class="heading-6 md:heading-5 mb-4">
       {{ $t("media-details.reuse.title") }}
     </h2>
-    <p class="text-base font-normal leading-[130%]">
+    <p class="description-regular">
       {{
         $t("media-details.reuse.description", {
           media: media.frontendMediaType,

frontend/src/components/VMediaTag/VMediaTag.vue

@@ -2,7 +2,7 @@
   <Component
     :is="tag"
     v-bind="$attrs"
-    class="inline-flex rounded-full bg-dark-charcoal-10 px-3 py-1 text-sr font-semibold leading-[130%] text-dark-blue md:px-4 md:py-2 md:text-base md:leading-[130%]"
+    class="caption-bold md:description-bold inline-flex rounded-full bg-dark-charcoal-10 px-3 py-1 text-dark-blue md:px-4 md:py-2"
   >
     <!-- @slot Content goes here -->
     <slot />

frontend/src/styles/tailwind.css

@@ -9,7 +9,6 @@
 
   html {
     @apply m-0 font-normal leading-loose text-dark-charcoal;
-    font-display: swap;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -45,17 +44,17 @@ Heading 3           - 28px - 5xl bold
 Heading 4           - 24px - 4xl bold
 Heading 5           - 19px - 3xl semibold
 Heading 6           - 16px - 2xl semibold
-Paragraph Large     - 16px - 2xl regular leading-[190%] (larger)
-Paragraph Small     - 14px - base regular leading-[170%] (large)
-Body                - 14px - base regular (default leading-normal)
-Description Regular - 14px - base
-Description Bold    - 14px - base semibold
-Label Bold          - 13px - sm semibold
-Label Regular       - 13px - sm regular
-Caption Regular     - 12px - sr regular
-Caption Bold        - 12px - sr semibold
-Category            - 12px - sr semibold UPPERCASE
-Time                - 11px - xs semibold (default leading-[120%])
+Paragraph Large     - 16px - 2xl  regular  leading-larger
+Paragraph Small     - 14px - base regular  leading-large
+Body                - 14px - base regular  (default leading-normal)
+Description Regular - 14px - base regular leading-snug
+Description Bold    - 14px - base semibold leading-snug
+Label Bold          - 13px - sm semibold (default leading-snug)
+Label Regular       - 13px - sm regular (default leading-snug)
+Caption Regular     - 12px - sr regular (default leading-snug)
+Caption Bold        - 12px - sr semibold (default leading-snug)
+Category            - 12px - sr semibold UPPERCASE (default leading-snug)
+Time                - 11px - xs semibold (default leading-tight)
 
 
 */
@@ -85,11 +84,11 @@ Time                - 11px - xs semibold (default leading-[120%])
   }
 
   .paragraph-large {
-    @apply text-2xl leading-[190%];
+    @apply text-2xl leading-larger;
   }
 
   .paragraph-small {
-    @apply leading-large text-base;
+    @apply text-base leading-large;
   }
 
   .body {

frontend/tailwind.config.js

@@ -174,15 +174,6 @@ module.exports = {
         "1.2", // 120%
       ],
     },
-    // FIXME: This should be `lineHeight` but fixing it will break VRT
-    lineHeights: {
-      larger: "1.9",
-      large: "1.7",
-      normal: "1.5",
-      snug: "1.3",
-      tight: "1.2",
-      none: "1.0",
-    },
     flexGrow: {
       0: 0,
       DEFAULT: 1,
@@ -195,7 +186,14 @@ module.exports = {
     },
     extend: {
       lineHeight: {
+        loose: "2.0",
+        larger: "1.9",
         relaxed: "1.8",
+        large: "1.7",
+        normal: "1.5",
+        snug: "1.3",
+        tight: "1.2",
+        none: "1.0",
       },
       scale: {
         "-100": "-1",

frontend/test/storybook/playwright.config.ts

@@ -13,7 +13,7 @@ const config: PlaywrightTestConfig = {
   webServer: {
     command: "pnpm storybook",
     timeout: 60_000 * 5, // 5 minutes
-    port: 54000,
+    url: "http://localhost:54000/iframe.html?id=meta-focus--slim-filled",
     reuseExistingServer: !process.env.CI || process.env.PWDEBUG === "1",
   },
   use: {