Replace text-m# with type-#

SU-SWS · Jul 15, 2024 · 33c2ca6 · 33c2ca6
1 parent 33bc50c
commit 33c2ca6
Show file tree

Hide file tree

Showing 45 changed files with 88 additions and 86 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -18,7 +18,11 @@
       "error",
       { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
     ],
-    "no-console": ["error", { "allow": ["warn", "error"] }]
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-restricted-syntax": [
+      "error",
+      "Literal[value=/text-m[\\d]/i]"
+    ]
   },
   "plugins": ["prettier", "unused-imports"],
   "ignorePatterns": ["**/__generated__/**/*"]

diff --git a/src/components/algolia/algolia-search.tsx b/src/components/algolia/algolia-search.tsx
@@ -93,7 +93,7 @@ const SearchBox = (props?: UseSearchBoxProps) => {
         </label>
         <input
           id="search-input"
-          className="h-20 max-w-xl rounded-full text-m1 hocus:shadow-2xl"
+          className="type-2 h-20 max-w-xl rounded-full hocus:shadow-2xl"
           ref={inputRef}
           autoComplete="on"
           autoCorrect="on"

diff --git a/src/components/algolia/hits/default.tsx b/src/components/algolia/hits/default.tsx
@@ -17,7 +17,7 @@ const DefaultHit = ({hit}: {hit: HitType<DefaultAlgoliaHit>}) => {
   return (
     <article className="flex justify-between gap-20 py-12 @container">
       <div>
-        <H2 className="text-m2">
+        <H2 className="type-3">
           <Link href={hit.url.replace(hitUrl.origin, "")}>{hit.title}</Link>
         </H2>
         <p>{hit.summary}</p>

diff --git a/src/components/config-pages/local-footer.tsx b/src/components/config-pages/local-footer.tsx
@@ -88,7 +88,7 @@ const LocalFooter = async ({...props}: Props) => {
           </div>
 
           <div>
-            {localFooterConfig.suLocalFootPrimeH && <H2 className="text-m1">{localFooterConfig.suLocalFootPrimeH}</H2>}
+            {localFooterConfig.suLocalFootPrimeH && <H2 className="type-2">{localFooterConfig.suLocalFootPrimeH}</H2>}
             {localFooterConfig.suLocalFootPrimary && (
               <ul className="list-unstyled">
                 {localFooterConfig.suLocalFootPrimary.map((link, index) => {
@@ -105,9 +105,7 @@ const LocalFooter = async ({...props}: Props) => {
           </div>
 
           <div>
-            {localFooterConfig.suLocalFootSecondH && (
-              <H2 className="text-m1">{localFooterConfig.suLocalFootSecondH}</H2>
-            )}
+            {localFooterConfig.suLocalFootSecondH && <H2 className="type-2">{localFooterConfig.suLocalFootSecondH}</H2>}
 
             {localFooterConfig.suLocalFootSecond && (
               <ul className="list-unstyled">
@@ -211,7 +209,7 @@ const FooterLockup = ({useDefault = true, siteName, lockupOption, ...props}: Foo
         <LockupLogo {...lockupProps} />
 
         <div className="w-[1px] shrink-0 bg-black" />
-        <div className="text-m2 font-normal leading-none text-black">{siteName || "University"}</div>
+        <div className="type-3 font-normal leading-none text-black">{siteName || "University"}</div>
       </Link>
     </div>
   )

diff --git a/src/components/config-pages/super-footer.tsx b/src/components/config-pages/super-footer.tsx
@@ -17,7 +17,7 @@ const SuperFooter = async ({...props}: Props) => {
     <div {...props} className={twMerge("border-b border-black-20 bg-foggy-light py-20", props.className)}>
       <div className="centered flex justify-between">
         <div className="flex-1">
-          {superFooterConfig.suSuperFootTitle && <H2 className="text-m2">{superFooterConfig.suSuperFootTitle}</H2>}
+          {superFooterConfig.suSuperFootTitle && <H2 className="type-3">{superFooterConfig.suSuperFootTitle}</H2>}
 
           <Wysiwyg html={superFooterConfig.suSuperFootText?.processed} />
         </div>

diff --git a/src/components/elements/headers.tsx b/src/components/elements/headers.tsx
@@ -7,31 +7,31 @@ const headingLinkClasses = "[&_a]:text-digital-red [&_a]:hocus:text-black [&_a]:
 
 export const H1 = ({children, className, ...props}: Props) => {
   return (
-    <h1 className={twMerge(className, "text-m4")} {...props}>
+    <h1 className={twMerge(className, "type-5")} {...props}>
       {children}
     </h1>
   )
 }
 
 export const H2 = ({children, className, ...props}: Props) => {
   return (
-    <h2 className={twMerge(headingLinkClasses, "text-m3", className)} {...props}>
+    <h2 className={twMerge(headingLinkClasses, "type-4", className)} {...props}>
       {children}
     </h2>
   )
 }
 
 export const H3 = ({children, className, ...props}: Props) => {
   return (
-    <h3 className={twMerge(headingLinkClasses, "text-m2", className)} {...props}>
+    <h3 className={twMerge(headingLinkClasses, "type-3", className)} {...props}>
       {children}
     </h3>
   )
 }
 
 export const H4 = ({children, className, ...props}: Props) => {
   return (
-    <h4 className={twMerge(headingLinkClasses, "text-m1", className)} {...props}>
+    <h4 className={twMerge(headingLinkClasses, "type-2", className)} {...props}>
       {children}
     </h4>
   )

diff --git a/src/components/elements/lockup/lockup-a.tsx b/src/components/elements/lockup/lockup-a.tsx
@@ -12,7 +12,7 @@ const LockupA = ({line1, line5, siteName, logoUrl}: FooterLockupProps) => {
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
-          <div className="text-m2 font-normal leading-none text-black">{line1 || siteName}</div>
+          <div className="type-3 font-normal leading-none text-black">{line1 || siteName}</div>
         </div>
 
         {line5 && <div className="border-t border-black font-semibold uppercase lg:border-t-0">{line5}</div>}

diff --git a/src/components/elements/lockup/lockup-b.tsx b/src/components/elements/lockup/lockup-b.tsx
@@ -13,8 +13,8 @@ const LockupB = ({line1, line2, siteName, logoUrl}: FooterLockupProps) => {
 
           <div className="w-[1px] shrink-0 bg-black" />
           <div className="font-normal">
-            <div className="text-m0">{line1 || siteName}</div>
-            <div className="text-m1">{line2}</div>
+            <div className="type-0">{line1 || siteName}</div>
+            <div className="type-2">{line2}</div>
           </div>
         </div>
       </Link>

diff --git a/src/components/elements/lockup/lockup-d.tsx b/src/components/elements/lockup/lockup-d.tsx
@@ -13,8 +13,8 @@ const LockupD = ({line1, line3, siteName, logoUrl}: FooterLockupProps) => {
 
           <div className="w-[1px] shrink-0 bg-black" />
           <div className="font-normal">
-            <div className="text-m1">{line1 || siteName}</div>
-            <div className="text-m0 italic">{line3}</div>
+            <div className="type-2">{line1 || siteName}</div>
+            <div className="type-0 italic">{line3}</div>
           </div>
         </div>
       </Link>

diff --git a/src/components/elements/lockup/lockup-e.tsx b/src/components/elements/lockup/lockup-e.tsx
@@ -13,9 +13,9 @@ const LockupE = ({line1, line2, line3, siteName, logoUrl}: FooterLockupProps) =>
 
           <div className="w-[1px] shrink-0 bg-black" />
           <div className="font-normal">
-            <div className="text-m1">{line1 || siteName}</div>
-            <div className="text-m1">{line2 || siteName}</div>
-            <div className="text-m0 italic">{line3}</div>
+            <div className="type-2">{line1 || siteName}</div>
+            <div className="type-2">{line2 || siteName}</div>
+            <div className="type-0 italic">{line3}</div>
           </div>
         </div>
       </Link>

diff --git a/src/components/elements/lockup/lockup-h.tsx b/src/components/elements/lockup/lockup-h.tsx
@@ -9,11 +9,11 @@ const LockupH = ({line1, line3, line4, siteName, logoUrl}: FooterLockupProps) =>
         <div className="flex flex-col gap-4 lg:flex-row">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-            <div className="mt-1 text-m1 font-semibold uppercase">{line4}</div>
+            <div className="type-2 mt-1 font-semibold uppercase">{line4}</div>
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
-          <div className="text-m1 font-normal">
+          <div className="type-2 font-normal">
             <div>{line1 || siteName}</div>
             <div>{line3}</div>
           </div>

diff --git a/src/components/elements/lockup/lockup-i.tsx b/src/components/elements/lockup/lockup-i.tsx
@@ -9,13 +9,13 @@ const LockupI = ({line1, line3, line4, siteName, logoUrl}: FooterLockupProps) =>
         <div className="flex flex-col gap-4 lg:flex-row">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-            <div className="mt-1 text-m1 font-semibold uppercase">{line4}</div>
+            <div className="type-2 mt-1 font-semibold uppercase">{line4}</div>
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
           <div className="mt-auto font-normal">
-            <div className="text-m1">{line1 || siteName}</div>
-            <div className="text-m0 italic">{line3}</div>
+            <div className="type-2">{line1 || siteName}</div>
+            <div className="type-0 italic">{line3}</div>
           </div>
         </div>
       </Link>

diff --git a/src/components/elements/lockup/lockup-m.tsx b/src/components/elements/lockup/lockup-m.tsx
@@ -12,7 +12,7 @@ const LockupM = ({line1, line2, siteName, logoUrl}: FooterLockupProps) => {
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
-          <div className="text-m1 font-normal">
+          <div className="type-2 font-normal">
             <div>{line1 || siteName}</div>
             <div>{line2}</div>
           </div>

diff --git a/src/components/elements/lockup/lockup-o.tsx b/src/components/elements/lockup/lockup-o.tsx
@@ -7,7 +7,7 @@ const LockupO = ({line4, siteName, logoUrl}: FooterLockupProps) => {
     <div className="py-10">
       <Link href="/" className="text-black no-underline">
         <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-        <div className="mt-1 text-m1 font-semibold uppercase">{line4}</div>
+        <div className="type-2 mt-1 font-semibold uppercase">{line4}</div>
       </Link>
     </div>
   )

diff --git a/src/components/elements/lockup/lockup-p.tsx b/src/components/elements/lockup/lockup-p.tsx
@@ -9,11 +9,11 @@ const LockupP = ({line1, line4, siteName, logoUrl}: FooterLockupProps) => {
         <div className="flex flex-col gap-4 lg:flex-row">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-            <div className="mt-1 text-m1 font-semibold uppercase">{line4}</div>
+            <div className="type-2 mt-1 font-semibold uppercase">{line4}</div>
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
-          <div className="mt-auto text-m1 font-normal">{line1 || siteName}</div>
+          <div className="type-2 mt-auto font-normal">{line1 || siteName}</div>
         </div>
       </Link>
     </div>

diff --git a/src/components/elements/lockup/lockup-s.tsx b/src/components/elements/lockup/lockup-s.tsx
@@ -7,10 +7,10 @@ const LockupS = ({line1, line2, line4, siteName, logoUrl}: FooterLockupProps) =>
     <div className="py-10">
       <Link href="/" className="text-black no-underline">
         <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-        <div className="mt-1 border-b border-black text-m1 font-semibold uppercase">{line4}</div>
+        <div className="type-2 mt-1 border-b border-black font-semibold uppercase">{line4}</div>
         <div className="font-normal">
-          <div className="text-m1">{line1 || siteName}</div>
-          <div className="text-m1">{line2}</div>
+          <div className="type-2">{line1 || siteName}</div>
+          <div className="type-2">{line2}</div>
         </div>
       </Link>
     </div>

diff --git a/src/components/elements/lockup/lockup-t.tsx b/src/components/elements/lockup/lockup-t.tsx
@@ -7,11 +7,11 @@ const LockupT = ({line1, line2, line3, line4, siteName, logoUrl}: FooterLockupPr
     <div className="py-10">
       <Link href="/" className="text-black no-underline">
         <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-        <div className="mt-1 border-b border-black text-m1 font-semibold uppercase">{line4}</div>
+        <div className="type-2 mt-1 border-b border-black font-semibold uppercase">{line4}</div>
         <div className="font-normal">
-          <div className="text-m1">{line1 || siteName}</div>
-          <div className="text-m1">{line2}</div>
-          <div className="text-m0 italic">{line3}</div>
+          <div className="type-2">{line1 || siteName}</div>
+          <div className="type-2">{line2}</div>
+          <div className="type-0 italic">{line3}</div>
         </div>
       </Link>
     </div>

diff --git a/src/components/elements/lockup/lockup.tsx b/src/components/elements/lockup/lockup.tsx
@@ -48,7 +48,7 @@ export const Lockup = ({
             <div className="mr-2 border-black pr-2 lg:inline-block lg:border-r">
               <LockupLogo {...lockupProps} />
             </div>
-            <div className="text-m2 font-normal text-black lg:inline-block">{suSiteName || "University"}</div>
+            <div className="type-3 font-normal text-black lg:inline-block">{suSiteName || "University"}</div>
           </div>
         </Link>
       </div>

diff --git a/src/components/elements/paged-list.tsx b/src/components/elements/paged-list.tsx
@@ -197,7 +197,7 @@ const PaginationButton = ({
   return (
     <li className="m-0 flex items-center">
       <button
-        className="group text-m2 font-medium hocus:underline"
+        className="group type-3 font-medium hocus:underline"
         onClick={handleClick}
         aria-current={isCurrent ? "page" : undefined}
         disabled={disabled}

diff --git a/src/components/elements/select-list.tsx b/src/components/elements/select-list.tsx
@@ -153,7 +153,7 @@ const SelectList = ({
       >
         <div className="flex flex-wrap justify-between">
           {label && (
-            <div className={"relative " + (optionChosen ? "top-[-15px] w-full text-m0" : "text-m1")}>
+            <div className={"relative " + (optionChosen ? "type-0 top-[-15px] w-full" : "type-2")}>
               <div id={labelId} className="w-fit bg-white px-5">
                 {label}
               </div>

diff --git a/src/components/elements/wysiwyg.tsx b/src/components/elements/wysiwyg.tsx
@@ -128,14 +128,14 @@ const fixClasses = (classes?: string | boolean): string => {
     .replaceAll(" align-left ", " float-left mr-10 mb-10 ")
     .replaceAll(" align-right ", " float-right ml-10 mb-10 ")
     .replaceAll(" visually-hidden ", " sr-only ")
-    .replaceAll(" font-splash ", " splash-text text-m4 ")
-    .replaceAll(" callout-text ", " font-bold text-m2 ")
+    .replaceAll(" font-splash ", " splash-text type-5 ")
+    .replaceAll(" callout-text ", " font-bold type-3 ")
     .replaceAll(" related-text ", " shadow-lg border border-black-20 p-16 ")
     .replaceAll(
       " drop-cap ",
-      " text-m1 first-letter:font-bold first-letter:text-m6 first-letter:float-left first-letter:my-2 first-letter:mr-4 "
+      " type-2 first-letter:font-bold first-letter:type-7 first-letter:float-left first-letter:my-2 first-letter:mr-4 "
     )
-    .replaceAll(" intro-text ", " text-m2 ")
+    .replaceAll(" intro-text ", " type-3 ")
     .replace(/ tablesaw.*? /g, " ")
     .replace(/ +/g, " ")
     .trim()

diff --git a/src/components/nodes/cards/stanford-course/stanford-course-card.tsx b/src/components/nodes/cards/stanford-course/stanford-course-card.tsx
@@ -13,7 +13,7 @@ const StanfordCourseCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === "h3" ? H3 : H2
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
-      <Heading className="order-last text-m2" id={node.id}>
+      <Heading className="type-3 order-last" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
       <div className="order-first flex gap-5">

diff --git a/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx b/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx
@@ -13,7 +13,7 @@ const StanfordEventSeriesCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === "h3" ? H3 : H2
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
-      <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
+      <Heading className="type-3 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
       {node.suEventSeriesDek && <p>{node.suEventSeriesDek}</p>}

diff --git a/src/components/nodes/cards/stanford-event/stanford-event-card.tsx b/src/components/nodes/cards/stanford-event/stanford-event-card.tsx
@@ -26,19 +26,19 @@ const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
       <div aria-hidden className="flex w-fit flex-col items-start">
-        <div className="mb-4 w-full text-center text-m0 font-semibold">{startMonth.toUpperCase()}</div>
-        <div className="w-full text-center text-m4 font-bold">{startDay}</div>
+        <div className="type-0 mb-4 w-full text-center font-semibold">{startMonth.toUpperCase()}</div>
+        <div className="type-5 w-full text-center font-bold">{startDay}</div>
       </div>
 
       <div className="flex flex-col">
-        <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
+        <Heading className="type-3 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
           <Link href={node.suEventSource?.url || node.path}>{node.title}</Link>
         </Heading>
 
         {node.suEventType && <div className="su-digital-red order-first">{node.suEventType[0].name}</div>}
       </div>
 
-      {node.suEventSubheadline && <div className="mb-5 text-m1 font-bold">{node.suEventSubheadline}</div>}
+      {node.suEventSubheadline && <div className="type-2 mb-5 font-bold">{node.suEventSubheadline}</div>}
 
       <time className="flex items-center gap-5" dateTime={start.toISOString()}>
         <CalendarDaysIcon width={30} className="shrink-0" />

diff --git a/src/components/nodes/cards/stanford-news/stanford-news-card.tsx b/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
@@ -27,7 +27,7 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
   return (
     <ImageCard {...props} aria-labelledby={node.id} imageUrl={image?.url} isArticle>
       <div className="flex flex-col">
-        <Heading className="text-m2 [&_a]:text-black" id={node.id}>
+        <Heading className="type-3 [&_a]:text-black" id={node.id}>
           <Link href={node.suNewsSource?.url || node.path}>{node.title}</Link>
         </Heading>
 

diff --git a/src/components/nodes/cards/stanford-page/stanford-page-card.tsx b/src/components/nodes/cards/stanford-page/stanford-page-card.tsx
@@ -20,7 +20,7 @@ const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === "h3" ? H3 : H2
   return (
     <ImageCard {...props} aria-labelledby={node.id} imageUrl={image?.url} imageAlt={image?.alt} isArticle>
-      <Heading className="text-m2 [&_a]:text-black" id={node.id}>
+      <Heading className="type-3 [&_a]:text-black" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
 

diff --git a/src/components/nodes/cards/stanford-person/stanford-person-card.tsx b/src/components/nodes/cards/stanford-person/stanford-person-card.tsx
@@ -32,7 +32,7 @@ const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
         </div>
       )}
 
-      <Heading className="text-m2" id={node.id}>
+      <Heading className="type-3" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
 

diff --git a/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx b/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx
@@ -22,7 +22,7 @@ const StanfordPolicyCard = ({node, headingLevel, ...props}: Props) => {
   const teaserSummary = node.body?.summary || trimmedBodyText + "..."
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
-      <Heading className="text-m2" id={node.id}>
+      <Heading className="type-3" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
 

diff --git a/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx b/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx
@@ -15,7 +15,7 @@ const StanfordPublicationCard = ({node, headingLevel, ...props}: Props) => {
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
       <div className="flex flex-col">
-        <Heading className="order-last text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
+        <Heading className="type-3 order-last [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
           <Link href={citationUrl || node.path}>{node.title}</Link>
         </Heading>
         <div className="order-first font-bold">Publication</div>

diff --git a/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx b/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx
@@ -19,7 +19,7 @@ const StanfordCourseListItem = ({node, headingLevel, ...props}: Props) => {
   return (
     <article {...props} aria-labelledby={node.id}>
       <div className="flex flex-col">
-        <Heading className="order-last text-m2" id={node.id}>
+        <Heading className="type-3 order-last" id={node.id}>
           <Link href={node.path}>{node.title}</Link>
         </Heading>
 

diff --git a/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx b/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx
@@ -17,7 +17,7 @@ const StanfordEventSeriesListItem = ({node, headingLevel, ...props}: Props) => {
       aria-labelledby={node.id}
       className={twMerge("mx-auto w-full max-w-[500px] border border-black-20 p-10 shadow-xl", props.className)}
     >
-      <Heading className="text-m2" id={node.id}>
+      <Heading className="type-3" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
     </article>