SUL23-468: Changed button font size and basefont size

src/components/layout/global-footer.tsx

@@ -1,7 +1,7 @@
 const GlobalFooter = () => {
   return (
     <div
-      className="global-footer basefont-20 rs-py-1 text-white bg-cardinal-red">
+      className="global-footer basefont-18 rs-py-1 text-white bg-cardinal-red">
       <div className="centered flex flex-col lg:flex-row" title="Common Stanford resources">
         <div className="text-center mt-5 mb-9">
           <a  rel="nofollow" className="logo text-white hocus:text-white type-3" href="https://www.stanford.edu">

src/components/node/stanford-course/card.tsx

@@ -11,7 +11,7 @@ const StanfordCourseCard = ({node, h3Heading, ...props}: Props) => {
   const HeadingElement = h3Heading ? 'h3' : 'h2';
   return (
     <article
-      className="block w-full basefont-20 leading-display bg-white text-black border border-solid border-black-10 shadow-md rs-pt-2 rs-px-2 rs-pb-3" {...props}>
+      className="block w-full basefont-18 leading-display bg-white text-black border border-solid border-black-10 shadow-md rs-pt-2 rs-px-2 rs-pb-3" {...props}>
       <div className="rs-pb-0">
         <span className="font-bold leading-cozy">
           {node.suCourseSubject?.name}

src/components/node/stanford-person/horizontal-card.tsx

@@ -18,7 +18,7 @@ const HorizontalPersonCard = ({node, h3Heading, ...props}: Props) => {
 
   return (
     <article
-      className="flex flex-col @3xl:flex-row w-full basefont-20 leading-display bg-white text-black border-x border-t border-b-5 border-solid border-black-10  border-b-digital-red shadow-md rs-pt-2 rs-px-2 rs-pb-3 mt-0" {...props}>
+      className="flex flex-col @3xl:flex-row w-full basefont-18 leading-display bg-white text-black border-x border-t border-b-5 border-solid border-black-10  border-b-digital-red shadow-md rs-pt-2 rs-px-2 rs-pb-3 mt-0" {...props}>
       {imageUrl &&
         <div className="flex items-center mx-auto mb-50 @3xl:ml-0 @3xl:mb-0 @3xl:mr-50">
           <div className="relative aspect-[1/1] w-[155px]">

src/components/node/stanford-person/list-item.tsx

@@ -9,7 +9,7 @@ const StanfordPersonListItem = ({node, ...props}: { node: NodeStanfordPerson })
 
   return (
     <article
-      className="@container flex flex-col gap-lg w-full basefont-20 leading-display bg-white text-black" {...props}>
+      className="@container flex flex-col gap-lg w-full basefont-18 leading-display bg-white text-black" {...props}>
       {imageUrl &&
         <div
           className="relative rounded-full overflow-hidden aspect-[1/1] w-[130px] @lg:w-[215px] mx-auto">

src/components/node/stanford-person/vertical-card.tsx

@@ -18,7 +18,7 @@ const VerticalPersonCard = ({node, h3Heading, ...props}: Props) => {
 
   return (
     <article
-      className="@container w-full basefont-20 leading-display bg-white text-black border-x border-t-5 border-b border-solid border-black-10 border-t-digital-red shadow-md rs-pt-2 rs-px-2 rs-pb-3 mt-70" {...props}>
+      className="@container w-full basefont-18 leading-display bg-white text-black border-x border-t-5 border-b border-solid border-black-10 border-t-digital-red shadow-md rs-pt-2 rs-px-2 rs-pb-3 mt-70" {...props}>
       {imageUrl &&
         <div
           className="relative flex justify-center pb-70 @lg:pb-80">

src/components/paragraph/sul-contact-card/manual-fields-card.tsx

@@ -26,7 +26,7 @@ const ManualFieldsCard = ({paragraph}: Props) => {
   return (
     <div className="@container">
       <div
-        className="flex w-full basefont-20 leading-display shadow-md border-0 rounded flex-col @6xl:flex-row">
+        className="flex w-full basefont-18 leading-display shadow-md border-0 rounded flex-col @6xl:flex-row">
 
         {imageUrl &&
           <div className="overflow-hidden aspect-[16/9] relative flex-shrink-0 @6xl:w-1/2">

src/components/paragraph/sul-contact-card/node-reference-card.tsx

@@ -26,7 +26,7 @@ const NodeReferenceCard = ({paragraph}: Props) => {
   return (
     <div className="@container">
       <div
-        className="flex w-full basefont-20 leading-display shadow-md border-0 rounded flex-col @6xl:flex-row">
+        className="flex w-full basefont-18 leading-display shadow-md border-0 rounded flex-col @6xl:flex-row">
 
         {imageUrl &&
           <div className="overflow-hidden aspect-[16/9] relative flex-shrink-0 @6xl:w-1/2">

src/components/patterns/banner.tsx

@@ -31,7 +31,7 @@ const Banner = ({
   const hasCardText = header || superHeader || body || link;
 
   return (
-    <div className="hero basefont-20 relative h-full mx-auto w-full lg:max-h-500" {...props}>
+    <div className="hero basefont-18 relative h-full mx-auto w-full lg:max-h-500" {...props}>
       <div
         className="w-full overflow-hidden relative max-h-500 min-h-[30rem] lg:min-h-[50rem] bg-[grey]">
         {image}
@@ -41,7 +41,7 @@ const Banner = ({
         <div
           className={`mx-auto block lg:absolute lg:top-auto lg:bottom-36 ${overlayPosition === 'right' ? 'lg:right-36' : 'lg:left-36'}`}>
           <div
-            className="card basefont-20 leading-display bg-white text-black border border-solid border-black-10 shadow relative lg:max-w-[50%]">
+            className="card basefont-18 leading-display bg-white text-black border border-solid border-black-10 shadow relative lg:max-w-[50%]">
             <Card
               header={header}
               superHeader={superHeader}

src/components/patterns/card.tsx

@@ -45,7 +45,7 @@ const Card = ({
   }
   return (
     <div
-      className="card block w-full basefont-20 leading-display bg-white text-black border border-solid border-black-10 shadow-md">
+      className="card block w-full basefont-18 leading-display bg-white text-black border border-solid border-black-10 shadow-md">
 
       {(image) &&
         <div className="overflow-hidden aspect-[16/9] relative" aria-hidden="true">

src/components/patterns/horizontal-card.tsx

@@ -69,7 +69,7 @@ const HorizontalCard = ({
       }
 
       <div
-        className="@container centered relative basefont-20 leading-display text-white mt-[77px] @6xl:mt-0 pt-[5.8rem] pb-[7.2rem] lg:px-80">
+        className="@container centered relative basefont-18 leading-display text-white mt-[77px] @6xl:mt-0 pt-[5.8rem] pb-[7.2rem] lg:px-80">
 
         <div className="grid @6xl:grid-cols-2 gap-2xl items-center">
           {(image || video) &&
@@ -101,7 +101,7 @@ const HorizontalCard = ({
             {link?.url &&
               <Link
                 href={link.url}
-                className="border-2 border-digital-red rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 text-white hocus:bg-black-true hocus:text-white rs-mt-neg1 bg-digital-red"
+                className="border-2 border-digital-red rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-18 text-white hocus:bg-black-true hocus:text-white rs-mt-neg1 bg-digital-red"
                 {...linkAttributes}
               >
                 {link.title}

src/components/patterns/link.tsx

@@ -9,7 +9,7 @@ export const DrupalLinkButton = ({href, children, className = '', ...props}: Pro
     <Link
       href={href}
       {...props}
-      className={twMerge("rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1", className)}
+      className={twMerge("rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-18 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1", className)}
     >
       {children}
     </Link>
@@ -21,7 +21,7 @@ export const DrupalLinkSecondaryButton = ({href, children, className = '', ...pr
     <Link
       href={href}
       {...props}
-      className={twMerge("rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline border-3 border-digital-red border-solid hover:border-cardinal-red focus:border-black-true active:border-black-true group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-white hover:bg-cardinal-red active:bg-black-true focus:bg-black-true text-black hocus:text-white rs-mt-neg1", className)}
+      className={twMerge("rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline border-3 border-digital-red border-solid hover:border-cardinal-red focus:border-black-true active:border-black-true group transition-colors px-26 pt-10 pb-11 text-16 md:text-18 bg-white hover:bg-cardinal-red active:bg-black-true focus:bg-black-true text-black hocus:text-white rs-mt-neg1", className)}
     >
       {children}
     </Link>
@@ -33,7 +33,7 @@ export const DrupalLinkBigButton = ({href, children, className = '', ...props}:
     <Link
       href={href}
       {...props}
-      className={twMerge("rounded-full cta-button font-large leading-display block w-fit no-underline hocus:underline group transition-colors px-36 py-16 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1", className)}
+      className={twMerge("rounded-full cta-button font-large leading-display block w-fit no-underline hocus:underline group transition-colors px-36 py-16 text-16 md:text-18 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1", className)}
     >
       {children}
     </Link>

src/components/search/search-form.tsx

@@ -49,9 +49,9 @@ const SearchFormComponent = ({action = '/search', inputProps = {}, ...props}: Fo
         </div>
         <button
           type="submit"
-          className="rounded-full p-15 bg-digital-red hover:bg-cardinal-red-dark transition text-white hocus:underline"
+          className="rounded-full p-15 text-16 md:text-18 bg-digital-red hover:bg-cardinal-red-dark transition text-white hocus:underline"
         >
-          Search
+         Search
         </button>
       </form>
     </div>