Format

Author: hasparus

src/app/conf/2025/components/top-minds/index.tsx

@@ -77,7 +77,7 @@ export default function TopMindsSection({
       {...rest}
     >
       <div className="flex grid-cols-2 flex-wrap [@media(444px<width<743px)]:grid [@media(width<=444px)]:flex-col [@media(width<=743px)]:justify-center [@media(width>=970px)]:*:border-b-0">
-        <h3 className="mr-auto flex w-full grow text-pretty pb-6 pr-6 typography-h2 [@media(width>857px)]:basis-0">
+        <h3 className="typography-h2 mr-auto flex w-full grow text-pretty pb-6 pr-6 [@media(width>857px)]:basis-0">
           Meet the top industry minds
         </h3>
         <TopMindCard
@@ -160,7 +160,7 @@ function TopMindCard({
       <div className="flex flex-1 items-stretch border-t border-sec-dark">
         <div className="flex grow flex-col justify-center gap-1 p-3 sm:h-[80px]">
           <h4 className="typography-body-md">{name}</h4>
-          <p className="text-neu-700 typography-body-xs">{title}</p>
+          <p className="typography-body-xs text-neu-700">{title}</p>
         </div>
         <div className="flex border-l border-sec-dark max-sm:divide-x sm:flex-col sm:items-center sm:divide-y sm:border-l">
           {SocialIconType.all.map(type => {

src/app/conf/2025/schedule/_components/filters.tsx

@@ -95,7 +95,7 @@ function FiltersCombobox({
     <Combobox immediate multiple value={value} onChange={onChange}>
       <div className={clsx("flex flex-col", className)}>
         {label && (
-          <Combobox.Label className="mb-1 block font-mono font-medium uppercase text-neu-900 typography-menu">
+          <Combobox.Label className="typography-menu mb-1 block font-mono font-medium uppercase text-neu-900">
             {label}
           </Combobox.Label>
         )}
@@ -104,7 +104,7 @@ function FiltersCombobox({
             value={query}
             onChange={e => setQuery(e.target.value)}
             className={clsx(
-              "bg-transparent leading-none text-neu-800 !outline-offset-0 typography-body-sm [text-box:trim-both_cap_alphabetic] placeholder:text-neu-600 focus:outline-none max-lg:typography-body-md",
+              "typography-body-sm bg-transparent leading-none text-neu-800 !outline-offset-0 [text-box:trim-both_cap_alphabetic] max-lg:typography-body-md placeholder:text-neu-600 focus:outline-none",
             )}
             placeholder={placeholder}
             autoComplete="true"
@@ -206,7 +206,7 @@ function FilterComboboxOption({
   return (
     <div
       className={clsx(
-        "relative flex cursor-default select-none items-center p-1 font-sans typography-body-sm",
+        "typography-body-sm relative flex cursor-default select-none items-center p-1 font-sans",
         active && "bg-neu-100 dark:bg-neu-50",
       )}
     >

src/app/conf/2025/schedule/_components/schedule-list.tsx

@@ -160,7 +160,7 @@ export function ScheduleList({
             ([date, concurrentSessionsGroup], index) => (
               <div
                 key={date}
-                className="bg-neu-200 pt-px typography-body-sm dark:bg-neu-50"
+                className="typography-body-sm bg-neu-200 pt-px dark:bg-neu-50"
               >
                 <h3
                   className="bg-neu-50 py-4 dark:bg-neu-0 lg:mb-px"
@@ -173,7 +173,7 @@ export function ScheduleList({
                     <div key={`concurrent sessions on ${sessionDate}`}>
                       <div className="mr-px flex flex-col max-lg:ml-px lg:mb-px lg:flex-row">
                         <div className="relative border-neu-50 bg-neu-50 dark:bg-neu-0 max-lg:-mx-px max-lg:mt-px max-lg:border-x lg:mr-px">
-                          <span className="mt-3 inline-block w-20 whitespace-nowrap pb-0.5 pl-4 typography-body-sm lg:mr-6 lg:w-28 lg:pb-4 lg:pl-0">
+                          <span className="typography-body-sm mt-3 inline-block w-20 whitespace-nowrap pb-0.5 pl-4 lg:mr-6 lg:w-28 lg:pb-4 lg:pl-0">
                             {format(parseISO(sessionDate), "hh:mmaaaa 'PDT'")}
                           </span>
                         </div>
@@ -207,7 +207,7 @@ function BookmarkOnSched({ year }: { year: `202${number}` }) {
       href={`https://graphqlconf${year}.sched.com`}
       target="_blank"
       rel="noreferrer"
-      className="mb-8 block w-fit decoration-neu-400 typography-link"
+      className="typography-link mb-8 block w-fit decoration-neu-400"
     >
       Bookmark sessions & plan your days on Sched
       <svg

src/app/conf/2025/schedule/_components/schedule-session-card.tsx

@@ -85,7 +85,7 @@ export function ScheduleSessionCard({
                 ))}
               </span>
             )}
-            <span className="mt-2 flex items-center gap-0.5 typography-body-xs">
+            <span className="typography-body-xs mt-2 flex items-center gap-0.5">
               <PinIcon className="size-4 text-pri-base" />
               {session.venue}
             </span>