Refactor text-text-offset and text-text Tailwind styles to text-content-offset and text-content

Author: webstackdev

_TODO.md

@@ -80,3 +80,126 @@ window.addEventListener('afterprint', (event) => {
   // You can also use this event to send an AJAX request to a server for print tracking.
 })
 ```
+
+or listen for changes:
+
+```typescript
+if (window.matchMedia) {
+    var mediaQueryList = window.matchMedia('print');
+    mediaQueryList.addListener(function(mql) {
+        if (mql.matches) {
+            // Equivalent to onbeforeprint
+            console.log('Entering print mode (before print dialog)');
+        } else {
+            // Equivalent to onafterprint
+            console.log('Exiting print mode (after print dialog)');
+        }
+    });
+}
+```
+
+```bash
+1) [mobile-chrome] › test/e2e/specs/01-smoke/critical-paths.spec.ts:38:3 › Critical Paths @smoke › @ready mobile navigation works across main pages
+
+TimeoutError: page.waitForFunction: Timeout 15000ms exceeded.
+
+    at ../helpers/pageObjectModels/BasePage.ts:263
+
+  261 |     }
+  262 |
+> 263 |     await this._page.waitForFunction(
+      |                      ^
+  264 |       () => {
+  265 |         const header = document.getElementById('header')
+  266 |         const menu = document.querySelector('.main-nav-menu')
+    at BasePage.openMobileMenu (/home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/test/e2e/helpers/pageObjectModels/BasePage.ts:263:22)
+    at /home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/test/e2e/specs/01-smoke/critical-paths.spec.ts:53:7
+
+attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
+.cache/playwright/output/01-smoke-critical-paths-Cr-fda54-ion-works-across-main-pages-mobile-chrome/test-failed-1.png
+────────────────────────────────────────────────────────────────────────────────────────────────
+
+Error Context: .cache/playwright/output/01-smoke-critical-paths-Cr-fda54-ion-works-across-main-pages-mobile-chrome/error-context.md
+
+2) [mobile-safari] › test/e2e/specs/01-smoke/critical-paths.spec.ts:114:3 › Critical Paths @smoke › @ready main pages have no errors
+
+Error: expect(received).toHaveLength(expected)
+
+Expected length: 0
+Received length: 1
+Received array:  [[Fetch API cannot load http: /localhost:4321/offline due to access control checks.]]
+
+    at ../helpers/pageObjectModels/BasePage.ts:665
+
+  663 |     const errors = await this._page.pageErrors()
+  664 |     const filteredErrors = errors.filter((error) => !this.isIgnorablePageError(error))
+> 665 |     expect(filteredErrors).toHaveLength(0)
+      |                            ^
+  666 |     return filteredErrors
+  667 |   }
+  668 |
+    at BasePage.expectNoErrors (/home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/test/e2e/helpers/pageObjectModels/BasePage.ts:665:28)
+    at /home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/test/e2e/specs/01-smoke/critical-paths.spec.ts:118:7
+
+attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
+.cache/playwright/output/01-smoke-critical-paths-Cr-4a53f-y-main-pages-have-no-errors-mobile-safari/test-failed-1.png
+────────────────────────────────────────────────────────────────────────────────────────────────
+
+Error Context: .cache/playwright/output/01-smoke-critical-paths-Cr-4a53f-y-main-pages-have-no-errors-mobile-safari/error-context.md
+
+2 failed
+[mobile-chrome] › test/e2e/specs/01-smoke/critical-paths.spec.ts:38:3 › Critical Paths @smoke › @ready mobile navigation works across main pages
+[mobile-safari] › test/e2e/specs/01-smoke/critical-paths.spec.ts:114:3 › Critical Paths @smoke › @ready main pages have no errors
+
+
+
+  1) [webkit] › test/e2e/specs/01-smoke/dynamic-pages.spec.ts:171:3 › Dynamic Pages @smoke › @ready dynamic pages have no console errors
+
+Error: expect(received).toHaveLength(expected)
+
+Expected length: 0
+Received length: 1
+Received array:  ["Failed to load resource: the server responded with a status of 403 (Forbidden)"]
+
+  192 |
+  193 |     // Fail if there are any unexpected 404s or errors
+> 194 |     expect(errorChecker.getFilteredErrors()).toHaveLength(0)
+      |                                              ^
+  195 |     expect(errorChecker.getFiltered404s()).toHaveLength(0)
+  196 |   })
+  197 | })
+    at /home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/test/e2e/specs/01-smoke/dynamic-pages.spec.ts:194:46
+
+attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
+.cache/playwright/output/01-smoke-dynamic-pages-Dyn-8a015-ages-have-no-console-errors-webkit/test-failed-1.png
+────────────────────────────────────────────────────────────────────────────────────────────────
+
+Error Context: .cache/playwright/output/01-smoke-dynamic-pages-Dyn-8a015-ages-have-no-console-errors-webkit/error-context.md
+
+2) [mobile-safari] › test/e2e/specs/01-smoke/dynamic-pages.spec.ts:171:3 › Dynamic Pages @smoke › @ready dynamic pages have no console errors
+
+Error: expect(received).toHaveLength(expected)
+
+Expected length: 0
+Received length: 1
+Received array:  ["Failed to load resource: the server responded with a status of 403 (Forbidden)"]
+
+  192 |
+  193 |     // Fail if there are any unexpected 404s or errors
+> 194 |     expect(errorChecker.getFilteredErrors()).toHaveLength(0)
+      |                                              ^
+  195 |     expect(errorChecker.getFiltered404s()).toHaveLength(0)
+  196 |   })
+  197 | })
+    at /home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/test/e2e/specs/01-smoke/dynamic-pages.spec.ts:194:46
+
+attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
+.cache/playwright/output/01-smoke-dynamic-pages-Dyn-8a015-ages-have-no-console-errors-mobile-safari/test-failed-1.png
+────────────────────────────────────────────────────────────────────────────────────────────────
+
+Error Context: .cache/playwright/output/01-smoke-dynamic-pages-Dyn-8a015-ages-have-no-console-errors-mobile-safari/error-context.md
+
+2 failed
+[webkit] › test/e2e/specs/01-smoke/dynamic-pages.spec.ts:171:3 › Dynamic Pages @smoke › @ready dynamic pages have no console errors
+[mobile-safari] › test/e2e/specs/01-smoke/dynamic-pages.spec.ts:171:3 › Dynamic Pages @smoke › @ready dynamic pages have no console errors
+```

src/components/CallToAction/Newsletter/index.astro

@@ -57,7 +57,7 @@ const {
             <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-content mb-4">
               {title}
             </h2>
-            <p class="text-base md:text-lg text-text-offset max-w-2xl mx-auto leading-relaxed">
+            <p class="text-base md:text-lg text-content-active max-w-2xl mx-auto leading-relaxed">
               {description}
             </p>
           </div>
@@ -70,7 +70,7 @@ const {
                   <label
                     id="newsletter-email-label"
                     for="newsletter-email"
-                    class="text-sm font-medium text-text"
+                    class="text-sm font-medium text-content"
                   >
                     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-text-offset 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 text-content placeholder:text-content-active focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
                     required
                     aria-describedby="newsletter-message"
                   />
@@ -145,7 +145,7 @@ const {
               <!-- Status Message -->
               <p
                 id="newsletter-message"
-                class="text-sm text-text-offset text-center"
+                class="text-sm text-content-active text-center"
                 role="status"
                 aria-live="polite"
                 aria-atomic="true"

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-text">
+          <h2 id={`${carouselId}-title`} class="text-3xl md:text-4xl font-bold text-content">
             {title}
           </h2>
         </header>
@@ -111,7 +111,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
             data-carousel-prev
           >
             <svg
-              class="w-6 h-6 text-text"
+              class="w-6 h-6 text-content"
               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-text"
+              class="w-6 h-6 text-content"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"

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-text">
+      <span id={`${id}-description`} class="flex-1 text-sm leading-relaxed text-content">
         {
           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-text">
+        <h2 id="consent-preferences__title" class="text-2xl font-bold text-content">
           Privacy Preference Center
         </h2>
       </div>
@@ -21,7 +21,7 @@ import logoSvg from '@assets/images/site/logo.svg'
     <div class="px-6 py-8">
       {/* Introduction */}
       <div class="mb-8">
-        <p id="consent-preferences__settings-desc" class="text-text-muted leading-relaxed">
+        <p id="consent-preferences__settings-desc" class="text-content-muted leading-relaxed">
           When you visit our website, we may store information in your browser or device to make the
           site work and provide a better experience. This includes both cookies and local storage.
           The information we collect might relate to you, your preferences, or your device. You can

src/components/Copy/index.astro

@@ -45,8 +45,8 @@ const floatButtonClass =
 
 const iconButtonColorClass = [
   'text-content fill-content',
-  'hover:text-text-offset hover:fill-content-active',
-  'focus-visible:text-text-offset focus-visible:fill-content-active',
+  'hover:text-content-active hover:fill-content-active',
+  'focus-visible:text-content-active focus-visible:fill-content-active',
   'cursor-pointer',
 ].join(' ')
 ---

src/components/Errors/NotFoundHero/index.astro

@@ -17,9 +17,9 @@ const {
 ---
 
 <div class="mb-8 text-center">
-  <h1 class="text-9xl font-bold text-text-muted mb-4">{heading}</h1>
+  <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>
-  <p class="text-lg text-text-muted mb-8">
+  <p class="text-lg text-content-muted mb-8">
     {description}
   </p>
   <div class="space-y-4">

src/components/Footer/index.astro

@@ -118,7 +118,7 @@ const year = new Date().getFullYear()
           >
             <div class="lg:hidden">Subscribe to</div>
             <span class="lg:font-bold lg:uppercase">Mailing List</span>
-            <span class="hidden lg:block text-text">
+            <span class="hidden lg:block text-content">
               Sign up to stay in touch and get great content
             </span>
           </a>
@@ -131,7 +131,7 @@ const year = new Date().getFullYear()
               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"
             >
               <span class="lg:font-bold lg:uppercase">Consent</span>
-              <span class="hidden lg:block text-text">
+              <span class="hidden lg:block text-content">
                 Manage your privacy preferences and data consent
               </span>
             </a>
@@ -142,7 +142,7 @@ const year = new Date().getFullYear()
               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"
             >
               <span class="lg:font-bold lg:uppercase">Privacy Policy</span>
-              <span class="hidden lg:block text-text">
+              <span class="hidden lg:block text-content">
                 Learn what data we collect and how we use it
               </span>
             </a>