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>

src/lib/components/schedule/schedule-input-payload.svelte

@@ -39,10 +39,7 @@
       />
     {/key}
   </PayloadDecoder>
-  <span
-    class="font-secondary text-xs font-light italic"
-    class:text-red-700={error}
-  >
+  <span class="text-xs font-light italic" class:text-red-700={error}>
     {translate('workflows.signal-payload-input-label-hint')}
   </span>
 </div>

src/lib/components/schedule/schedule-notes.svelte

@@ -5,6 +5,6 @@
 </script>
 
 <div>
-  <h2 class="mb-4 text-lg">{translate('common.notes')}</h2>
+  <h2 class="mb-4">{translate('common.notes')}</h2>
   <p>{notes}</p>
 </div>

src/lib/components/schedule/schedule-recent-runs.svelte

@@ -35,7 +35,7 @@
 
 <Panel class="w-full">
   <div class="flex justify-between">
-    <h2 class="mb-4 text-lg">{translate('schedules.recent-runs')}</h2>
+    <h2 class="mb-4">{translate('schedules.recent-runs')}</h2>
     <Link
       href={routeForWorkflowsWithQuery({
         namespace,

src/lib/components/schedule/schedule-upcoming-runs.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <Panel>
-  <h2 class="mb-4 text-lg">{translate('schedules.upcoming-runs')}</h2>
+  <h2 class="mb-4">{translate('schedules.upcoming-runs')}</h2>
   {#each futureRuns.slice(0, 5) as run}
     <div class="row">
       <p>

src/lib/components/schedule/schedules-calendar-view.svelte

@@ -45,7 +45,7 @@
 </script>
 
 <Tabs class="mt-8 w-full">
-  <h2 class="mb-4 text-lg">{translate('schedules.schedule-spec')}</h2>
+  <h2 class="mb-4">{translate('schedules.schedule-spec')}</h2>
   <TabList label="Schedule Tabs" class="flex flex-wrap gap-6">
     {#if schedule}
       <Tab
@@ -112,7 +112,7 @@
     </TabPanel>
     <TabPanel id="string-panel" tabId="string-tab">
       <div class="my-2 flex w-full flex-col gap-4">
-        <h3 class="text-lg font-medium">
+        <h3>
           {translate('schedules.cron-view-title')}
         </h3>
         <p>{translate('schedules.cron-view-description')}</p>

src/lib/components/schedule/schedules-interval-view.svelte

@@ -35,7 +35,7 @@
 </script>
 
 <div class="my-2 flex flex-col gap-4">
-  <h3 class="text-lg font-medium">
+  <h3>
     {translate('schedules.interval-view-heading')}
   </h3>
   <p>
@@ -94,7 +94,7 @@
       error={error(second)}
     />
   </div>
-  <h3 class="mt-4 text-lg font-medium">
+  <h3 class="mt-4">
     {translate('schedules.offset-heading')}
   </h3>
   <p>

src/lib/components/schedule/schedules-time-view.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div class="flex flex-col gap-4">
-  <h3 class="text-lg font-medium">
+  <h3>
     {translate('schedules.time-view-heading')}
   </h3>
   <p>

src/lib/components/worker-compatibility.svelte

@@ -33,7 +33,7 @@
   $: defaultVersion = getCurrentCompatibilityDefaultVersion(compatibility);
 </script>
 
-<h2 class="text-base font-medium" data-testid="version-sets">
+<h2 data-testid="version-sets">
   {translate('workers.version-sets')}
 </h2>
 <Table class="mb-6 w-full min-w-[600px] table-fixed">
@@ -77,7 +77,7 @@
     </tr>
   {/each}
 </Table>
-<h2 class="flex items-center gap-2 text-base font-medium" data-testid="workers">
+<h2 class="flex items-center gap-2" data-testid="workers">
   {translate('workers.workers')}
   <Badge type="count" class="rounded-sm">{workers?.pollers?.length || 0}</Badge>
 </h2>

src/lib/components/worker-rules.svelte

@@ -32,7 +32,7 @@
   };
 </script>
 
-<h2 class="text-base font-medium" data-testid="worker-rules">
+<h2 data-testid="worker-rules">
   {translate('workers.assignment-rules')}
 </h2>
 <Table class="mb-6 w-full table-fixed">
@@ -81,7 +81,7 @@
   {/if}
 </Table>
 
-<h2 class="text-base font-medium" data-testid="worker-rules">
+<h2 data-testid="worker-rules">
   {translate('workers.redirect-rules')}
 </h2>
 <Table class="mb-6 w-full table-fixed">

src/lib/components/worker-table.svelte

@@ -14,7 +14,7 @@
   export let workers: GetPollersResponse;
 </script>
 
-<h2 class="flex items-center gap-2 text-base font-medium" data-testid="workers">
+<h2 class="flex items-center gap-2" data-testid="workers">
   {translate('workers.workers')}
   <Badge type="count" class="rounded-sm">{workers?.pollers?.length || 0}</Badge>
 </h2>

src/lib/components/workflow-status.svelte

@@ -42,9 +42,7 @@
   };
 
   const workflowStatus = cva(
-    [
-      'flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap text-black',
-    ],
+    ['flex items-center rounded-sm px-1 py-0.5 whitespace-nowrap text-black'],
     {
       variants: {
         status: {

src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte

@@ -79,10 +79,10 @@
       bind:value={name}
     />
     <div>
-      <span class="font-secondary text-sm font-medium"
+      <span class="text-sm font-medium"
         >{translate('workflows.signal-payload-input-label')}</span
       >
-      <span class="font-secondary text-xs font-light italic">
+      <span class="text-xs font-light italic">
         {translate('workflows.signal-payload-input-label-hint')}
       </span>
       <CodeBlock

src/lib/components/workflow/input-and-results.svelte

@@ -48,7 +48,7 @@
 </script>
 
 <article class="flex w-full flex-col" {...$$restProps}>
-  <h3 class="mb-2 flex items-center gap-2 text-lg">
+  <h3 class="mb-2 flex items-center gap-2">
     {title}
     {#if showParsedContentCount}
       <Badge type="count" class="rounded-sm">{payloads.length}</Badge>

src/lib/components/workflow/pending-activities.svelte

@@ -55,7 +55,7 @@
         {#each pendingActivities as { id, ...pendingActivity } (id)}
           {@const failed = pendingActivity.attempt > 1}
           <div class="pending-activity-row-container">
-            <h3 class="w-full self-start text-sm font-normal text-slate-500">
+            <h3 class="w-full self-start text-sm text-secondary">
               {pendingActivity.activityId}
             </h3>
             <div class="pending-activity-row">

src/lib/components/workflow/workflow-summary.svelte

@@ -33,7 +33,7 @@
   >
     <div class="flex flex-col gap-2 xl:flex-row">
       <div class="grow basis-1/3 overflow-hidden">
-        <h3 class="font-medium">{translate('common.execution-details')}</h3>
+        <h4>{translate('common.execution-details')}</h4>
         <div class="h-0.5 rounded-full bg-inverse" />
         <WorkflowDetail
           title={translate('common.workflow-type')}
@@ -55,7 +55,7 @@
         />
       </div>
       <div class="grow overflow-hidden">
-        <h3 class="font-medium">{translate('common.task-queue')}</h3>
+        <h4>{translate('common.task-queue')}</h4>
         <div class="h-0.5 rounded-full bg-inverse" />
         <WorkflowDetail
           content={workflow?.taskQueue}
@@ -74,9 +74,9 @@
         />
       </div>
       <div class="grow-0">
-        <h3 class="font-medium">
+        <h4>
           {translate('workflows.start-and-close-time')}
-        </h3>
+        </h4>
         <div class="h-0.5 rounded-full bg-inverse" />
         <WorkflowDetail
           title={translate('common.start-time')}

src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte

@@ -36,7 +36,7 @@
     {#if updating}
       <Loading />
     {:else}
-      <h2 class="text-lg font-medium">
+      <h2>
         {#if query}
           {translate('workflows.workflow-query-empty-state-title')}
         {:else}

src/lib/components/workflow/workflows-summary-configurable-table/table-header-cell.svelte

@@ -15,6 +15,6 @@
 
 <style lang="postcss">
   .workflows-summary-table-header-cell {
-    @apply whitespace-nowrap px-2 text-left font-secondary text-sm font-medium;
+    @apply whitespace-nowrap px-2 text-left text-sm font-medium;
   }
 </style>

src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte

@@ -65,7 +65,7 @@
   }
 
   .batch-actions-table-cell {
-    @apply overflow-visible whitespace-nowrap px-2 text-left font-secondary text-sm font-medium;
+    @apply overflow-visible whitespace-nowrap px-2 text-left text-sm font-medium;
   }
 
   .configuration-button-table-cell {

src/lib/holocene/accordion.svelte

@@ -54,11 +54,11 @@
     on:click={toggleAccordion}
   >
     <div class="space-between flex w-full flex-row items-center">
-      <h2 class="flex w-full items-center gap-2 text-lg font-medium">
+      <h3 class="flex w-full items-center gap-2">
         {#if icon}<Icon name={icon} />{/if}
         {title}
         <slot name="summary" />
-      </h2>
+      </h3>
       <div
         class="flex flex-row items-center gap-2 pr-2"
         on:click|stopPropagation
@@ -68,7 +68,7 @@
       </div>
       <Icon class="m-2" name={open ? 'chevron-up' : 'chevron-down'} />
     </div>
-    <p class="flex items-center font-secondary">
+    <p class="flex items-center">
       {#if error}
         <Badge class="mr-2" type="danger">{error}</Badge>
       {/if}

src/lib/holocene/alert.svelte

@@ -64,7 +64,7 @@
 
 <style lang="postcss">
   .alert {
-    @apply items-start gap-2 break-words rounded-lg border-2 p-5 font-primary text-sm text-primary;
+    @apply items-start gap-2 break-words rounded-lg border-2 p-5 text-sm text-primary;
   }
 
   .alert.success {
@@ -84,6 +84,6 @@
   }
 
   .content :global(> *) {
-    @apply font-secondary text-sm font-normal;
+    @apply text-sm font-normal;
   }
 </style>