Refactor bg-content-inverse-offset CSS classes to bg-page-base-offset

Author: webstackdev

_TODO.md

@@ -219,9 +219,7 @@ Singles: --color-error, --color-error-bg, --color-error-border, --color-error-te
 Tailwind Color Utilities Not Backed By Theme Tokens (quoted class strings)
 High-frequency / likely broken given the @theme contract:
 
-border-trim (91): e.g. index.astro:23, index.astro:22
-Theme has --color-trim for borders, not --color-border.
-bg-content-inverse-offset (52): e.g. index.astro:134, index.astro:14
+bg-page-base-offset (52): e.g. index.astro:134, index.astro:14
 text-content-muted (47): e.g. index.astro:20
 text-offset (13): e.g. index.astro:39
 bg-primary-bg (7): e.g. index.astro:67

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-trim bg-content-inverse p-1 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-trim bg-content-inverse p-1 shadow-lg transition-colors hover:bg-page-base-offset"
       data-animation-toggle
       aria-label="Pause animation"
       aria-pressed="false"

src/components/BugReporter/index.astro

@@ -52,7 +52,7 @@ const {
       <input
         name="name"
         autocomplete="name"
-        class="mt-1 w-full rounded-md border border-trim bg-content-inverse-offset p-2"
+        class="mt-1 w-full rounded-md border border-trim bg-page-base-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-trim bg-content-inverse-offset p-2"
+        class="mt-1 w-full rounded-md border border-trim bg-page-base-offset p-2"
         placeholder="your.email@example.org"
       />
     </label>
@@ -74,7 +74,7 @@ const {
         name="message"
         required
         rows="5"
-        class="mt-1 w-full rounded-md border border-trim bg-content-inverse-offset p-2"
+        class="mt-1 w-full rounded-md border border-trim bg-page-base-offset p-2"
         placeholder="What's the bug? What did you expect?"
       ></textarea>
     </label>

src/components/CallToAction/Newsletter/index.astro

@@ -30,7 +30,7 @@ const {
 ---
 
 <newsletter-form class="block">
-  <section class="py-12 md:py-16 bg-content-inverse-offset">
+  <section class="py-12 md:py-16 bg-page-base-offset">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
       <div class="max-w-4xl mx-auto">
         <div class="bg-content-inverse rounded-2xl shadow-lg p-8 md:p-12 border border-trim">

src/components/Consent/Banner/index.astro

@@ -8,7 +8,7 @@ import CookieSvg from '@assets/images/site/cookie.svg'
 <consent-banner>
   <div
     id="consent-modal-id"
-    class="bg-content-inverse-offset bottom-0 left-0 fixed right-0 w-full z-50"
+    class="bg-page-base-offset bottom-0 left-0 fixed right-0 w-full z-50"
     style="display:none;"
     role="dialog"
     aria-labelledby="consent-modal__title"
@@ -34,7 +34,7 @@ import CookieSvg from '@assets/images/site/cookie.svg'
         /* Mobile: 36px + (8px * 2) = 52px container, half = 26px. Desktop: 48px + (12px * 2) = 72px container, half = 36px */
       }
       <div
-        class="h-13 w-13 -top-6.5 md:h-18 md:w-18 md:-top-9 bg-content-inverse-offset rounded-full absolute left-0 right-0 mx-auto flex items-center justify-center p-2 md:p-3"
+        class="h-13 w-13 -top-6.5 md:h-18 md:w-18 md:-top-9 bg-page-base-offset rounded-full absolute left-0 right-0 mx-auto flex items-center justify-center p-2 md:p-3"
       >
         <Image src={CookieSvg} alt="" class="h-6 w-6 md:h-12 md:w-12" />
       </div>

src/components/Consent/Checkbox/index.astro

@@ -29,7 +29,7 @@ const {
 
 <consent-checkbox data-purpose={purpose} data-form-id={formId ?? undefined}>
   <div
-    class="bg-content-inverse-offset border border-trim rounded-lg my-6 p-4"
+    class="bg-page-base-offset border border-trim rounded-lg my-6 p-4"
     id={`${id}-container`}
     data-component="gdpr-consent"
     data-purpose={purpose}

src/components/Footer/index.astro

@@ -11,7 +11,7 @@ const year = new Date().getFullYear()
 ---
 
 <site-footer transition:persist>
-  <footer class="bg-content-inverse-offset w-full mt-6 pt-4" role="contentinfo">
+  <footer class="bg-page-base-offset w-full mt-6 pt-4" role="contentinfo">
     <div
       class:list={[
         styles.footerGrid,

src/components/Forms/Contact/index.astro

@@ -224,7 +224,7 @@ import './uppy-webcam.css'
           </p>
 
           <div
-            class="border-2 border-dashed border-trim rounded-xl p-8 text-center bg-content-inverse-offset hover:border-primary-hover transition-colors duration-200"
+            class="border-2 border-dashed border-trim rounded-xl p-8 text-center bg-page-base-offset hover:border-primary-hover transition-colors duration-200"
           >
             <div id="uppyContainer" hidden>
               <div id="uppyDashboard"></div>
@@ -250,7 +250,7 @@ import './uppy-webcam.css'
 
         <!-- Data Retention Notice -->
         <div
-          class="text-sm text-content-active space-y-2 bg-content-inverse-offset p-4 rounded-lg border border-trim"
+          class="text-sm text-content-active space-y-2 bg-page-base-offset p-4 rounded-lg border border-trim"
         >
           <p>
             <strong>Data Retention:</strong> Your contact information will be stored for 90 days to respond

src/components/Forms/Privacy/index.astro

@@ -38,7 +38,7 @@ const statusMessage = status ? statusMessages[status] : undefined
       )
     }
 
-    <section class="bg-content-inverse-offset border border-trim rounded-2xl p-6" aria-labelledby="my-data-intro-title">
+    <section class="bg-page-base-offset border border-trim rounded-2xl p-6" aria-labelledby="my-data-intro-title">
       <h2 class="sr-only" id="my-data-intro-title">Overview</h2>
       <p class="text-content-active">
         Use the forms below to request a copy of your data or request its deletion.
@@ -132,7 +132,7 @@ const statusMessage = status ? statusMessages[status] : undefined
       </section>
     </div>
 
-    <section class="bg-content-inverse-offset border border-trim rounded-2xl p-6" aria-labelledby="my-data-next-title">
+    <section class="bg-page-base-offset border border-trim rounded-2xl p-6" aria-labelledby="my-data-next-title">
       <h2 id="my-data-next-title" class="text-xl font-semibold">What Happens Next?</h2>
       <ol class="mt-4 list-decimal ml-6 space-y-3 text-content-active">
         <li>

src/components/Hero/Home/content.astro

@@ -41,7 +41,7 @@ const { pretitle, benefits, primaryLink, secondaryLink } = Astro.props as Props
   {/* Benefits Section */}
   {
     benefits && benefits.length > 0 && (
-      <div class="bg-content-inverse-offset rounded-2xl p-6 md:p-8 border border-trim">
+      <div class="bg-page-base-offset rounded-2xl p-6 md:p-8 border border-trim">
         <div class="text-sm font-semibold text-offset mb-4 uppercase tracking-wide">Up to:</div>
         <ul class="space-y-4">
           {benefits.map(benefit => (