Text styles audit (#2236)

* Add responsive font sizing for h1

* Update font family

* Add responsive font sizing and update h2 elements

* Add responsive font sizing and update other heading elements

* Add default font size and weight for body

* Remove set icon size in Link component

* Add fixed text styles for heading elements and use apply

* Add body text style classes to base

* Move text styles to separate plugin

Author: laurakwhit

.vscode/settings.json

@@ -11,5 +11,8 @@
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+  ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
 }

src/app.css

@@ -10,28 +10,14 @@
   *,
   html,
   body {
-    box-sizing: border-box;
+    @apply box-border;
   }
 
   body {
-    @apply surface-background;
-    font-family: theme('fontFamily.primary');
-    position: relative;
-    overscroll-behavior: none;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  titles,
-  labels {
-    font-family: theme('fontFamily.secondary');
+    @apply body-normal surface-background relative overscroll-none;
   }
 
   input[type='search']::-webkit-search-cancel-button {
-    display: none;
+    @apply hidden;
   }
 }

src/lib/components/batch-operations/header.svelte

@@ -32,17 +32,17 @@
 
 <div class="flex items-center justify-between">
   <div class="flex flex-col gap-2">
-    <div class="flex flex-row gap-2 max-sm:flex-col">
-      <h1 class="text-2xl">
+    <div class="flex flex-row items-center gap-2 max-sm:flex-col">
+      <h1>
         {translate('batch.describe-page-title')}
       </h1>
       <Badge type={jobStateToBadgeType[operation.state]}>
         {operation.state}
       </Badge>
     </div>
-    <h2 class="text-sm">
+    <p>
       {operation.jobId}
-    </h2>
+    </p>
   </div>
   {#if operation.state === 'Running'}
     <Tooltip

src/lib/components/data-encoder-settings.svelte

@@ -80,7 +80,7 @@
   >
     <div class="flex w-full flex-col gap-4 xl:w-1/2">
       <div class="flex items-center justify-between space-x-2">
-        <h3 data-testid="data-encoder-title" class="text-xl">
+        <h3 data-testid="data-encoder-title">
           {translate('common.codec-server')}
         </h3>
       </div>

src/lib/components/lines-and-dots/input-and-results-payload.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <div class="flex w-full grow flex-col gap-2 py-4 {$$restProps.class}">
-  <h3 class="flex items-center gap-2 text-2xl">
+  <h3 class="flex items-center gap-2">
     {title}
   </h3>
   {#if content}

src/lib/components/lines-and-dots/workflow-details.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <div class="flex flex-col gap-2">
-  <h3 class="flex items-center text-2xl">Summary</h3>
+  <h3 class="flex items-center">Summary</h3>
   <div
     class="surface-primary grid w-full grid-flow-row grid-cols-1 gap-2 rounded-xl border-2 border-primary p-2 md:grid-cols-2 xl:grid-cols-3"
   >

src/lib/components/schedule/schedule-day-of-month-view.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <div class="my-2 flex flex-col gap-4">
-  <h3 class="text-lg font-medium">
+  <h3>
     {translate('schedules.recurring-dates-heading')}
   </h3>
   <p>{translate('schedules.recurring-dates-description')}</p>

src/lib/components/schedule/schedule-day-of-week-view.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <div class="my-2 flex flex-col gap-4">
-  <h3 class="text-lg font-medium">
+  <h3>
     {translate('schedules.recurring-days-heading')}
   </h3>
   <p>{translate('schedules.recurring-days-description')}</p>

src/lib/components/schedule/schedule-form-view.svelte

@@ -142,7 +142,7 @@
       <Link href={backHref} icon="chevron-left">
         {backTitle}
       </Link>
-      <h1 class="font-base text-2xl">{title}</h1>
+      <h1>{title}</h1>
     </header>
     <form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
       <Alert intent="error" title="" hidden={!$error}>

src/lib/components/schedule/schedule-frequency-panel.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <Panel>
-  <h2 class="mb-4 text-lg">{translate('schedules.schedule-spec')}</h2>
+  <h2 class="mb-4">{translate('schedules.schedule-spec')}</h2>
   <div class="pr-2">
     <ScheduleFrequency {calendar} {interval} {timezoneName} class="text-base" />
   </div>