Refactor text-offset to text-content-offset

Author: webstackdev

_TODO.md

@@ -219,8 +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:
 
-(47): e.g. index.astro:20
-text-offset (13): e.g. index.astro:39
+text-content-offset (13): e.g. index.astro:39
 bg-primary-bg (7): e.g. index.astro:67
 stroke-text (not a theme token) (seen in class attrs): e.g. index.astro:94
 bg-text (2): index.astro:111, index.spec.ts:299

src/components/Avatar/index.astro

@@ -53,7 +53,7 @@ const avatarAlt = name
       />
     ) : (
       <div
-        class="avatar-placeholder bg-spotlight w-16 h-16 rounded-full flex items-center justify-center text-offset"
+        class="avatar-placeholder bg-spotlight w-16 h-16 rounded-full flex items-center justify-center text-content-offset"
         role="img"
         aria-label={name}
       >

src/components/Breadcrumbs/index.astro

@@ -36,12 +36,12 @@ const breadcrumbSchema =
   breadcrumbs.length > 1 && (
     <div class="mx-auto max-w-300 w-[90%] mt-4">
       <nav aria-label="Breadcrumbs" class="breadcrumbs pl-8">
-        <ol class="flex items-center space-x-2 text-sm text-offset">
+        <ol class="flex items-center space-x-2 text-sm text-content-offset">
           {breadcrumbs.map((item, index) => (
             <li class="flex items-center">
               {index > 0 && (
                 <svg
-                  class="w-4 h-4 mx-2 text-offset opacity-60"
+                  class="w-4 h-4 mx-2 text-content-offset opacity-60"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"

src/components/CallToAction/Featured/index.astro

@@ -70,7 +70,7 @@ const titleId = `${id}-title`
             >
               {title}
             </h3>
-            <p class="text-base md:text-lg text-offset mb-8 leading-relaxed">
+            <p class="text-base md:text-lg text-content-offset mb-8 leading-relaxed">
               {description}
             </p>
             <Button

src/components/Carousel/index.astro

@@ -75,7 +75,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
                           {item.data.title}
                         </h3>
                         {item.data.description && (
-                          <p class="text-offset leading-relaxed text-sm">{item.data.description}</p>
+                          <p class="text-content-offset leading-relaxed text-sm">{item.data.description}</p>
                         )}
                         <div class="mt-4 flex items-center text-primary text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
                           <span>Learn more</span>

src/components/Forms/Download/index.astro

@@ -22,7 +22,7 @@ const downloadUrl = `/downloads/${fileName}`
       <h3 class="text-xl md:text-2xl font-semibold mb-2">
         Download {title}
       </h3>
-      <p class="text-offset">
+      <p class="text-content-offset">
         Fill out the form below to receive your {fileType.toLowerCase()} instantly.
       </p>
     </div>

src/components/Hero/Home/content.astro

@@ -42,7 +42,7 @@ const { pretitle, benefits, primaryLink, secondaryLink } = Astro.props as Props
   {
     benefits && benefits.length > 0 && (
       <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>
+        <div class="text-sm font-semibold text-content-offset mb-4 uppercase tracking-wide">Up to:</div>
         <ul class="space-y-4">
           {benefits.map(benefit => (
             <li class="flex items-start gap-3">

src/pages/testing/carousel.astro

@@ -9,7 +9,7 @@ const pagePath = '/testing/carousel'
 ---
 
 <BaseLayout pageTitle={pageTitle} path={pagePath} description={pageDescription} noindex>
-  <section class="mx-auto mb-12 max-w-3xl space-y-4 text-lg text-offset">
+  <section class="mx-auto mb-12 max-w-3xl space-y-4 text-lg text-content-offset">
     <p>
       This route exists exclusively for automated testing and manual inspections of the carousel. It
       renders the production carousel component inside a stable shell so tests no longer rely on

src/pages/testing/consent-preferences.astro

@@ -9,7 +9,7 @@ const pagePath = '/testing/consent-preferences'
 ---
 
 <BaseLayout pageTitle={pageTitle} path={pagePath} description={pageDescription} noindex>
-  <section class="mx-auto mb-10 max-w-3xl space-y-4 text-lg text-offset">
+  <section class="mx-auto mb-10 max-w-3xl space-y-4 text-lg text-content-offset">
     <p>
       This route renders the production consent preferences modal in isolation so automated tests
       can interact with its web component without relying on marketing content or feature flags.

src/pages/testing/environment-api.astro

@@ -24,7 +24,7 @@ const scriptContent = `window.environmentApiSnapshot = ${JSON.stringify(snapshot
 ---
 
 <BaseLayout pageTitle={pageTitle} path={pagePath} description={pageDescription} noindex>
-  <section class="mx-auto mb-6 max-w-3xl space-y-3 text-lg text-offset">
+  <section class="mx-auto mb-6 max-w-3xl space-y-3 text-lg text-content-offset">
     <p>
       Use this fixture to validate the server-side environment helpers without relying on marketing
       pages.