Refine baseline type sizes

src/app/admin/baseline/page.tsx

@@ -52,7 +52,7 @@ export default function ComponentsPage() {
       <div
         className={clsx(
           'flex gap-8',
-          debugGrid && 'debug-baseline-grid'
+          debugGrid && 'bg-baseline-grid'
         )}
       >
         <div className="[&>*]:flex">

src/components/Badge.tsx

@@ -27,8 +27,8 @@ export default function Badge({
       );
     case 'small':
       return clsx(
-        'px-[4px] py-[2.5px]',
-        'md:px-[4.5px] md:py-[3px]',
+        'h-max-baseline',
+        'px-[5px] py-[2.75px]',
         'text-[0.7rem] font-medium rounded-[0.25rem]',
         highContrast
           ? 'text-invert bg-invert'
@@ -44,7 +44,7 @@ export default function Badge({
   };
   return (
     <span className={clsx(
-      'leading-none inline-flex',
+      'leading-none',
       stylesForType(),
       uppercase && 'uppercase tracking-wider',
       className,

src/components/OGTile.tsx

@@ -110,9 +110,8 @@ export default function OGTile({
           />}
       </div>
       <div className={clsx(
-        'md:text-lg',
+        'font-sans leading-tight',
         'flex flex-col gap-1 p-3',
-        'font-sans leading-none',
         'bg-gray-50 dark:bg-gray-900/50',
         'group-active:bg-gray-50 group-active:dark:bg-gray-900/50',
         'group-hover:bg-gray-100 group-hover:dark:bg-gray-900/70',

src/components/ShareModal.tsx

@@ -24,7 +24,7 @@ export default function ShareModal({
       <div className="space-y-3 md:space-y-4 w-full">
         <div className={clsx(
           'flex items-center gap-x-3',
-          'text-xl md:text-3xl leading-snug',
+          'text-2xl leading-snug',
         )}>
           <TbPhotoShare size={22} className="hidden xs:block" />
           <div className="flex-grow">

src/simulation/PhotoFilmSimulation.tsx

@@ -23,10 +23,7 @@ export default function PhotoFilmSimulation({
       label={medium}
       labelSmall={small}
       href={pathForFilmSimulation(simulation)}
-      icon={<PhotoFilmSimulationIcon
-        simulation={simulation}
-        className="translate-y-[-0.5px]"
-      />}
+      icon={<PhotoFilmSimulationIcon simulation={simulation} />}
       title={`Film Simulation: ${large}`}
       type={type}
       badged={badged}

src/site/NavClient.tsx

@@ -57,7 +57,6 @@ export default function NavClient({
               className={clsx(
                 'flex items-center',
                 'w-full min-h-[4rem]',
-                'leading-none',
               )}>
               <div className="flex-grow">
                 <ViewSwitcher

src/site/globals.css

@@ -162,21 +162,25 @@
   /* Utilities: Baseline Grid */
   .space-y-baseline {
     @apply
-      space-y-[1.125rem] md:space-y-[1.25rem]
+      space-y-[1.1875rem] md:space-y-[1.25rem]
   }
   .gap-y-baseline {
     @apply
-      gap-y-[1.125rem] md:gap-y-[1.25rem]
+      gap-y-[1.1875rem] md:gap-y-[1.25rem]
   }
   .gap-baseline {
     @apply
-      gap-[1.125rem] md:gap-[1.25rem]
+      gap-[1.1875rem] md:gap-[1.25rem]
   }
-  .debug-baseline-grid {
+  .max-h-baseline {
     @apply
-      bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.125rem)]
+      max-h-[1.1875rem] md:max-h-[1.25rem]
+  }
+  .bg-baseline-grid {
+    @apply
+      bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.1875rem)]
       md:bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.25rem)]
-      dark:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.125rem)]
+      dark:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.1875rem)]
       dark:md:bg-[repeating-linear-gradient(to_bottom,#222,#222_1px,transparent_1px,transparent_1.25rem)]
   }
 }

tailwind.config.js

@@ -12,13 +12,13 @@ module.exports = {
       ...defaultTheme.screens,
     },
     fontSize: {
-      'xs':   ['0.75rem', '1rem'],        // 12px on 16px
-      'sm':   ['0.8125rem', '1.125rem'],  // 13px on 18px [Default: mobile]
-      'base': ['0.875rem', '1.25rem'],    // 14px on 20px [Default: desktop]
-      'lg':   ['1rem', '1.25rem'],        // 16px on 20px
-      'xl':   ['1.125rem', '1.25rem'],    // 18px on 20px
-      '2xl':  ['1.25rem', '1.25rem'],     // 20px on 20px
-      '3xl':  ['1.5rem', '1.5rem'],       // 24px on 24px
+      'xs':   ['0.75rem', '1rem'],          // 12px on 16px
+      'sm':   ['0.84375rem', '1.1875rem'],  // 13.5px on 19px [Default: mobile]
+      'base': ['0.875rem', '1.25rem'],      // 14px on 20px   [Default: desktop]
+      'lg':   ['1rem', '1.25rem'],          // 16px on 20px
+      'xl':   ['1.125rem', '1.25rem'],      // 18px on 20px
+      '2xl':  ['1.25rem', '1.25rem'],       // 20px on 20px
+      '3xl':  ['1.5rem', '1.5rem'],         // 24px on 24px
     },
     extend: {
       fontFamily: {