Add .typography-link utility

Author: hasparus

src/app/conf/2025/components/call-for-proposals.tsx

@@ -102,14 +102,14 @@ function NotesTab() {
         <li>
           All speakers are required to adhere to our{" "}
           <Link
-            className="text-neu-800 underline hover:no-underline dark:text-neu-50"
+            className="typography-link dark:text-neu-50"
             href="/conf/2025/resources/#code-of-conduct"
           >
             Code of Conduct
           </Link>
           . We also highly recommend that speakers take our online{" "}
           <a
-            className="text-neu-800 underline hover:no-underline dark:text-neu-50"
+            className="typography-link dark:text-neu-50"
             target="_blank"
             href="https://training.linuxfoundation.org/linux-courses/open-source-compliance-courses/inclusive-speaker-orientation"
           >
@@ -169,7 +169,7 @@ function NotesTab() {
         <a
           href="https://youtu.be/2I5fYBLCfUA"
           target="_blank"
-          className="text-neu-800 underline hover:no-underline dark:text-neu-50"
+          className="typography-link dark:text-neu-50"
         >
           Getting Over Your Imposter Syndrome to Become a Conference Speaker
         </a>
@@ -183,8 +183,13 @@ function NotesTab() {
         community and share your ideas and the work that you are doing and we
         strongly encourage first-time speakers to submit talks for our events.
         In the instance that you aren't sure about your abstract,{" "}
-        <a href="mailto:[email protected]">reach out to us</a> and we will
-        be more than happy to work with you on your proposal.
+        <a
+          href="mailto:[email protected]"
+          className="typography-link dark:text-neu-50"
+        >
+          reach out to us
+        </a>{" "}
+        and we will be more than happy to work with you on your proposal.
       </p>
     </div>
   )
@@ -337,7 +342,7 @@ export function CallForProposals() {
             For any questions regarding the CFP process, please email{" "}
             <a
               href="mailto:[email protected]"
-              className="text-neu-800 underline hover:no-underline dark:text-neu-50"
+              className="typography-link dark:text-neu-50"
             >
               [email protected]
             </a>
@@ -351,7 +356,7 @@ export function CallForProposals() {
             <a
               target="_blank"
               href="https://sessionize.com/playbook/submit-your-session-for-an-event"
-              className="text-neu-800 underline hover:no-underline dark:text-neu-50"
+              className="typography-link dark:text-neu-50"
             >
               how to submit your session
             </a>{" "}

src/app/conf/2025/components/register-section/index.tsx

@@ -36,7 +36,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
             email. If you did not, please contact us for more details:{" "}
             <a
               href="mailto:[email protected]"
-              className="gql-focus-visible text-neu-800 underline hover:no-underline"
+              className="typography-link"
             >
               [email protected]
             </a>
@@ -57,7 +57,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
             register as a Sponsor. For further questions, please email us:{" "}
             <a
               href="mailto:[email protected]"
-              className="gql-focus-visible text-neu-800 underline hover:no-underline"
+              className="typography-link"
             >
               [email protected]
             </a>

tailwind.config.ts

@@ -79,7 +79,8 @@ const config: Config = {
     typography,
     containerQueries,
     plugin(({ addUtilities }) => {
-      const headingStyles = {
+      // heading styles
+      addUtilities({
         ".typography-d1, .typography-h1, .typography-h2, .typography-h3": {
           lineHeight: "1.2",
         },
@@ -107,9 +108,10 @@ const config: Config = {
             fontSize: "32px",
           },
         },
-      }
+      })
 
-      const bodyStyles = {
+      // paragraph styles
+      addUtilities({
         ".typography-body-lg, .typography-body-md, .typography-body-sm, .typography-body-xs":
           {
             lineHeight: "1.5",
@@ -138,9 +140,10 @@ const config: Config = {
             fontSize: "12px",
           },
         },
-      }
+      })
 
-      const specialStyles = {
+      // other text styles
+      addUtilities({
         ".typography-button, .typography-tagline": {
           fontSize: "16px",
           lineHeight: "1",
@@ -154,9 +157,17 @@ const config: Config = {
           lineHeight: "1",
           textTransform: "uppercase",
         },
-      }
+      })
 
-      addUtilities({ ...headingStyles, ...bodyStyles, ...specialStyles })
+      addUtilities({
+        ".typography-link": {
+          color: "theme('colors.neu-800')",
+          textDecoration: "underline",
+          "&:hover": {
+            textDecoration: "none",
+          },
+        },
+      })
     }),
   ],
   darkMode: ["class", 'html[class~="dark"]'],