Add top-level text-content color on body and remove from elements that should inherit in the CSS cascade

Author: webstackdev

src/components/Animations/Computers/index.astro

@@ -9,7 +9,7 @@ import Icon from '@components/Icon/index.astro'
   <div class="relative w-full max-w-lg mx-auto">
     <button
       type="button"
-      class="absolute bottom-1 right-1 z-10 flex items-center justify-center rounded-full border border-border bg-content-inverse p-1 text-content shadow-lg transition-colors hover:bg-content-inverse-offset"
+      class="absolute bottom-1 right-1 z-10 flex items-center justify-center rounded-full border border-border bg-content-inverse p-1 shadow-lg transition-colors hover:bg-content-inverse-offset"
       data-animation-toggle
       aria-label="Pause animation"
       aria-pressed="false"

src/components/BugReporter/index.astro

@@ -29,14 +29,14 @@ const {
 <dialog
   id={dialogId}
   aria-label="Report a bug"
-  class="bg-content-inverse text-content border border-border rounded-md p-4 max-w-xl w-[min(42rem,90vw)]"
+  class="bg-content-inverse border border-border rounded-md p-4 max-w-xl w-[min(42rem,90vw)]"
 >
   <div class="flex items-start justify-between gap-4">
     <h2 class="text-xl font-bold">Report a bug</h2>
     <button
       id={closeButtonId}
       type="button"
-      class="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"
+      class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
     >
       Close
     </button>
@@ -52,7 +52,7 @@ const {
       <input
         name="name"
         autocomplete="name"
-        class="mt-1 w-full rounded-md border border-border bg-content-inverse-offset text-content p-2"
+        class="mt-1 w-full rounded-md border border-border bg-content-inverse-offset p-2"
         placeholder="Your name"
       />
     </label>
@@ -63,7 +63,7 @@ const {
         name="email"
         type="email"
         autocomplete="email"
-        class="mt-1 w-full rounded-md border border-border bg-content-inverse-offset text-content p-2"
+        class="mt-1 w-full rounded-md border border-border bg-content-inverse-offset p-2"
         placeholder="your.email@example.org"
       />
     </label>
@@ -74,12 +74,12 @@ const {
         name="message"
         required
         rows="5"
-        class="mt-1 w-full rounded-md border border-border bg-content-inverse-offset text-content p-2"
+        class="mt-1 w-full rounded-md border border-border bg-content-inverse-offset p-2"
         placeholder="What's the bug? What did you expect?"
       ></textarea>
     </label>
 
-    <p id={statusId} class="mt-3 text-content hidden" aria-live="polite"></p>
+    <p id={statusId} class="mt-3 hidden" aria-live="polite"></p>
 
     <div class="mt-4 flex items-center gap-3">
       <button
@@ -92,7 +92,7 @@ const {
       <button
         id={cancelButtonId}
         type="button"
-        class="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"
+        class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
       >
         Cancel
       </button>

src/components/CallToAction/Newsletter/index.astro

@@ -54,7 +54,7 @@ const {
                 ></path>
               </svg>
             </div>
-            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-content mb-4">
+            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-4">
               {title}
             </h2>
             <p class="text-base md:text-lg text-content-active max-w-2xl mx-auto leading-relaxed">
@@ -70,7 +70,7 @@ const {
                   <label
                     id="newsletter-email-label"
                     for="newsletter-email"
-                    class="text-sm font-medium text-content"
+                    class="text-sm font-medium"
                   >
                     Email address
                   </label>
@@ -79,7 +79,7 @@ const {
                     id="newsletter-email"
                     name="email"
                     placeholder={placeholder}
-                    class="w-full px-6 py-4 border-2 border-border rounded-xl bg-content-inverse text-content placeholder:text-content-active focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
+                    class="w-full px-6 py-4 border-2 border-border rounded-xl bg-content-inverse placeholder:text-content-active focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
                     required
                     aria-describedby="newsletter-message"
                   />

src/components/Carousel/index.astro

@@ -35,7 +35,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
     <carousel-slider data-carousel class="block">
       <section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <header class="text-center mb-12">
-          <h2 id={`${carouselId}-title`} class="text-3xl md:text-4xl font-bold text-content">
+          <h2 id={`${carouselId}-title`} class="text-3xl md:text-4xl font-bold">
             {title}
           </h2>
         </header>
@@ -71,7 +71,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
                         </div>
                       )}
                       <div class="p-6 pt-2">
-                        <h3 class="text-xl font-semibold text-content mb-3 group-hover:text-primary transition-colors">
+                        <h3 class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors">
                           {item.data.title}
                         </h3>
                         {item.data.description && (
@@ -111,7 +111,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
             data-carousel-prev
           >
             <svg
-              class="w-6 h-6 text-content"
+              class="w-6 h-6"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -134,7 +134,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
             data-carousel-next
           >
             <svg
-              class="w-6 h-6 text-content"
+              class="w-6 h-6"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"

src/components/Consent/Banner/index.astro

@@ -21,7 +21,7 @@ import CookieSvg from '@assets/images/site/cookie.svg'
     <button
       type="button"
       aria-label="Close cookie consent"
-      class="consent-modal__close-btn bg-spotlight border-none text-content flex p-1.5 absolute top-0 right-0 transition-all duration-150 ease-in-out hover:bg-spotlight-offset hover:text-content focus:bg-spotlight-offset focus:text-content focus:outline-none z-10"
+      class="consent-modal__close-btn bg-spotlight border-none flex p-1.5 absolute top-0 right-0 transition-all duration-150 ease-in-out hover:bg-spotlight-offset focus:bg-spotlight-offset focus:outline-none z-10"
     >
       <Icon name="close" class="h-8 w-8" />
     </button>

src/components/Consent/Checkbox/index.astro

@@ -47,7 +47,7 @@ const {
         class="border-2 border-border rounded mt-0.5 h-5 w-5 shrink-0 cursor-pointer focus:outline-2 focus:outline-offset-2 focus:outline-primary checked:bg-spotlight checked:border-primary"
       />
       <span id={`${id}-label`} class="sr-only">Consent to data processing</span>
-      <span id={`${id}-description`} class="flex-1 text-sm leading-relaxed text-content">
+      <span id={`${id}-description`} class="flex-1 text-sm leading-relaxed">
         {
           customText ? (
             <Fragment set:html={customText} />

src/components/Consent/Preferences/index.astro

@@ -12,7 +12,7 @@ import logoSvg from '@assets/images/site/logo.svg'
     <div class="px-6 py-4 flex items-center justify-between border-b border-page-base-offset">
       <div class="flex items-center gap-4">
         <Image src={logoSvg} alt="Webstack Builders corporate logo." class="h-8 w-auto" />
-        <h2 id="consent-preferences__title" class="text-2xl font-bold text-content">
+        <h2 id="consent-preferences__title" class="text-2xl font-bold">
           Privacy Preference Center
         </h2>
       </div>
@@ -203,7 +203,7 @@ import logoSvg from '@assets/images/site/logo.svg'
     <div class="bg-content-inverse border-t border-page-base-offset px-6 py-4 flex gap-3 justify-end flex-wrap">
       <button
         id="consent-deny-all"
-        class="px-6 py-2 bg-spotlight text-content rounded-lg hover:bg-spotlight-offset transition-colors duration-200 font-medium"
+        class="px-6 py-2 bg-spotlight rounded-lg hover:bg-spotlight-offset transition-colors duration-200 font-medium"
       >
         Decline All
       </button>

src/components/Errors/NotFoundHero/index.astro

@@ -18,7 +18,7 @@ const {
 
 <div class="mb-8 text-center">
   <h1 class="text-9xl font-bold text-content-muted mb-4">{heading}</h1>
-  <h2 class="text-3xl md:text-4xl font-bold text-content mb-4">{subheading}</h2>
+  <h2 class="text-3xl md:text-4xl font-bold mb-4">{subheading}</h2>
   <p class="text-lg text-content-muted mb-8">
     {description}
   </p>

src/components/Footer/index.astro

@@ -11,7 +11,7 @@ const year = new Date().getFullYear()
 ---
 
 <site-footer transition:persist>
-  <footer class="bg-content-inverse-offset text-content w-full mt-6 pt-4" role="contentinfo">
+  <footer class="bg-content-inverse-offset w-full mt-6 pt-4" role="contentinfo">
     <div
       class:list={[
         styles.footerGrid,
@@ -40,7 +40,7 @@ const year = new Date().getFullYear()
           <p class="hyphens-none">
             <a
               href={`mailto:${contactData.company.email}`}
-              class="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"
+              class="underline decoration-dotted decoration-content underline-offset-4 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="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"
+              class="underline decoration-dotted decoration-content underline-offset-4 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="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"
+              class="underline decoration-dotted decoration-content underline-offset-4 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 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 after:content-['>']",
+            "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-['>']",
           ]}
           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 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-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+                    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-text! 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,11 +114,11 @@ const year = new Date().getFullYear()
         <span class="flex flex-col justify-center lg:pt-3">
           <a
             href="/#newsletter"
-            class="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"
+            class="underline decoration-dotted decoration-content underline-offset-4 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>
-            <span class="hidden lg:block text-content">
+            <span class="hidden lg:block">
               Sign up to stay in touch and get great content
             </span>
           </a>
@@ -128,21 +128,21 @@ const year = new Date().getFullYear()
           <span>
             <a
               href="/consent"
-              class="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"
+              class="underline decoration-dotted decoration-content underline-offset-4 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 text-content">
+              <span class="hidden lg:block">
                 Manage your privacy preferences and data consent
               </span>
             </a>
           </span>
           <span>
             <a
               href="/privacy"
-              class="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"
+              class="underline decoration-dotted decoration-content underline-offset-4 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 text-content">
+              <span class="hidden lg:block">
                 Learn what data we collect and how we use it
               </span>
             </a>
@@ -153,7 +153,7 @@ const year = new Date().getFullYear()
           <a
             href={`${getSiteUrl()}/rss.xml`}
             title="RSS Feed"
-            class="text-content [&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
+            class="[&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
           >
             <span class="sr-only">RSS Feed</span>
             <span><Icon name="feed" variant="inherit" /></span>
@@ -169,7 +169,7 @@ const year = new Date().getFullYear()
           <a
             rel="me"
             href={getSiteUrl()}
-            class="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"
+            class="underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
           >
             {contactData.company.name}
           </a>
@@ -180,7 +180,7 @@ const year = new Date().getFullYear()
         <a
           href={`${getSiteUrl()}/rss.xml`}
           title="RSS Feed"
-          class="text-content [&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
+          class="[&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
         >
           <span class="sr-only">RSS Feed</span>
           <span><Icon name="feed" variant="inherit" /></span>
@@ -193,7 +193,7 @@ const year = new Date().getFullYear()
           id="bugReporterTrigger"
           type="button"
           title="Report a bug"
-          class="text-content [&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
+          class="[&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
         >
           <span class="sr-only">Report a bug</span>
           <span><Icon name="bug" variant="inherit" /></span>