Refactor text decoration and font size for anchor elements to use cascade

Author: webstackdev

_TODO.md

@@ -103,16 +103,6 @@ if (window.matchMedia) {
 ```bash
 ```
 
-
-Good Next Cascade Candidates (similar spirit to the text-* cleanup)
-
-Global/link-default underline styling (biggest repetition)
-
-Evidence: the exact pattern underline decoration-dotted decoration-content underline-offset-4 ... shows up 15 times across just 3 components (Footer/Calendar/BugReporter).
-What to cascade: give "normal text links" a default underline style (dotted + decoration-content + offset) via base CSS (or a shared wrapper scope), and then only override the exceptions.
-Tradeoff: global a { … } is powerful but can surprise you (nav links, button-like links). A scoped approach (e.g., only inside markdown/content areas or only inside certain layout wrappers) is safer.
-Forms: default label + help text styling
-
 Evidence: text-content-active in forms is still repeated ~25 times across 3 form components (Contact/Download/Privacy), often paired with text-sm font-medium.
 What to cascade: set label default to color: var(--color-content-active) and font-weight/size inside a form wrapper (e.g. .form root), so individual labels don't need to specify it.
 Tradeoff: safest when scoped to the Forms components (not global label { … } site-wide).

src/components/BugReporter/index.astro

@@ -36,7 +36,7 @@ const {
     <button
       id={closeButtonId}
       type="button"
-      class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
+      class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
     >
       Close
     </button>
@@ -92,7 +92,7 @@ const {
       <button
         id={cancelButtonId}
         type="button"
-        class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
+        class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
       >
         Cancel
       </button>

src/components/Calendar/index.astro

@@ -9,7 +9,7 @@ const { ...rest } = Astro.props
     type="button"
     data-calendar-trigger
     aria-expanded="false"
-    class="inline-flex items-center text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+    class="inline-flex items-center text-content hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
   >
     <span class="[&_.icon]:h-5 [&_.icon]:w-5">
       <Icon name="calendar-generic-ical" variant="inherit" />
@@ -28,7 +28,7 @@ const { ...rest } = Astro.props
         data-calendar-link="google"
         href="https://calendar.google.com/calendar/render"
         rel="noopener"
-        class="flex items-center text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+        class="flex items-center text-content hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
       >
         <span class="[&_.icon]:h-5 [&_.icon]:w-5">
           <Icon name="calendar-google" variant="inherit" />
@@ -40,7 +40,7 @@ const { ...rest } = Astro.props
         data-calendar-link="outlook"
         href="https://outlook.office.com/calendar/0/deeplink/compose"
         rel="noopener"
-        class="flex items-center text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+        class="flex items-center text-content hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
       >
         <span class="[&_.icon]:h-5 [&_.icon]:w-5">
           <Icon name="calendar-outlook" variant="inherit" />
@@ -51,7 +51,7 @@ const { ...rest } = Astro.props
       <button
         type="button"
         data-calendar-download-ics
-        class="flex items-center text-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+        class="flex items-center text-content hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
       >
         <span class="[&_.icon]:h-5 [&_.icon]:w-5">
           <Icon name="calendar_apple" variant="inherit" />

src/components/Footer/index.astro

@@ -40,7 +40,7 @@ const year = new Date().getFullYear()
           <p class="hyphens-none">
             <a
               href={`mailto:${contactData.company.email}`}
-              class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
+              class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
             >
               {contactData.company.email}
             </a>
@@ -49,7 +49,7 @@ const year = new Date().getFullYear()
             <a
               href={`tel:${contactData.company.telephoneTollFree}`}
               rel="nofollow"
-              class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
+              class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
             >
               Toll Free {formatPhoneNumber(contactData.company.telephoneTollFree)}
             </a>
@@ -58,7 +58,7 @@ const year = new Date().getFullYear()
             <a
               href={`tel:${contactData.company.telephoneLocal}`}
               rel="nofollow"
-              class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
+              class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
             >
               Local {formatPhoneNumber(contactData.company.telephoneLocal)}
             </a>
@@ -72,7 +72,7 @@ const year = new Date().getFullYear()
           id="page-footer__hire-me-anchor"
           class:list={[
             styles.footerHireMeAnchor,
-            "hidden uppercase underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none after:content-['>']",
+            "hidden uppercase hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none after:content-['>']",
           ]}
           aria-label="Available Now. Hire Me"
         >
@@ -91,7 +91,7 @@ const year = new Date().getFullYear()
                     href={social.url}
                     title={social.displayName}
                     rel="me"
-                    class="flex items-baseline uppercase underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+                    class="flex items-baseline uppercase hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
                   >
                     <span class="[&_.icon]:h-4 [&_.icon]:w-4">
                       <Icon name={social.iconName} variant="inherit" />
@@ -114,7 +114,7 @@ const year = new Date().getFullYear()
         <span class="flex flex-col justify-center lg:pt-3">
           <a
             href="/#newsletter"
-            class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
+            class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
           >
             <div class="lg:hidden">Subscribe to</div>
             <span class="lg:font-bold lg:uppercase">Mailing List</span>
@@ -128,7 +128,7 @@ const year = new Date().getFullYear()
           <span>
             <a
               href="/consent"
-              class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
+              class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
             >
               <span class="lg:font-bold lg:uppercase">Consent</span>
               <span class="hidden lg:block">
@@ -139,7 +139,7 @@ const year = new Date().getFullYear()
           <span>
             <a
               href="/privacy"
-              class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
+              class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
             >
               <span class="lg:font-bold lg:uppercase">Privacy Policy</span>
               <span class="hidden lg:block">
@@ -169,7 +169,7 @@ const year = new Date().getFullYear()
           <a
             rel="me"
             href={getSiteUrl()}
-            class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
+            class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
           >
             {contactData.company.name}
           </a>

src/styles/typography.css

@@ -177,4 +177,13 @@
     font-size: 0.75em;
     line-height: 0;
   }
+}
+
+@layer utilities {
+  a {
+    text-decoration-color: var(--color-content);
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 4px;
+  }
 }