Refactor bg-primary-bg to bg-blue-100

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:
 
-text-content-offset (13): e.g. index.astro:39
-bg-primary-bg (7): e.g. index.astro:67
+bg-blue-100 (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/pages/articles/index.astro

@@ -78,7 +78,7 @@ const section = 'Articles'
                 {article.data.tags && article.data.tags.length > 0 && (
                   <div class="flex flex-wrap gap-2">
                     {article.data.tags.slice(0, 3).map((tag: string) => (
-                      <span class="text-xs font-medium text-primary bg-primary-bg px-2 py-1 rounded-full uppercase tracking-wide">
+                      <span class="text-xs font-medium text-primary bg-blue-100 px-2 py-1 rounded-full uppercase tracking-wide">
                         {tag}
                       </span>
                     ))}

src/pages/case-studies/index.astro

@@ -62,7 +62,7 @@ const section = 'Case Studies'
 
                 <div class="space-y-3">
                   {caseStudy.data.client && (
-                    <span class="inline-block text-sm font-medium text-primary bg-primary-bg px-3 py-1 rounded-full">
+                    <span class="inline-block text-sm font-medium text-primary bg-blue-100 px-3 py-1 rounded-full">
                       Client: {caseStudy.data.client}
                     </span>
                   )}

src/pages/offline/index.astro

@@ -64,7 +64,7 @@ const description =
           <div class="action-item text-left">
             <div class="flex items-start space-x-4">
               <div
-                class="shrink-0 w-12 h-12 bg-primary-bg rounded-lg flex items-center justify-center"
+                class="shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"
               >
                 <svg
                   class="w-6 h-6 text-primary"
@@ -218,7 +218,7 @@ const description =
 
       <!-- Contact Info -->
       <section
-        class="contact-info bg-primary-bg rounded-xl p-6"
+        class="contact-info bg-blue-100 rounded-xl p-6"
         aria-labelledby="offline-contact-title"
       >
         <h2 class="text-lg font-semibold mb-4" id="offline-contact-title">

src/pages/privacy/index.astro

@@ -50,7 +50,7 @@ const lastUpdatedText = lastUpdatedDate.toLocaleDateString('en-US', {
           </ul>
         </div>
 
-        <div class="bg-primary-bg rounded-xl p-6">
+        <div class="bg-blue-100 rounded-xl p-6">
           <h3 class="text-xl font-semibold mb-4">Automatically Collected Information</h3>
           <p class="mb-4">
             We automatically collect certain information when you visit our website:

src/pages/services/index.astro

@@ -45,7 +45,7 @@ const section = 'Services'
                 >
                   <div class="flex items-start space-x-6">
                     {service.data.cover && (
-                      <div class="relative shrink-0 w-16 h-16 bg-primary-bg rounded-lg overflow-hidden group-hover:bg-primary-bg-hover transition-colors">
+                      <div class="relative shrink-0 w-16 h-16 bg-blue-100 rounded-lg overflow-hidden group-hover:bg-blue-100-hover transition-colors">
                         <Picture
                           src={service.data.cover}
                           alt={service.data.coverAlt}

src/pages/tags/[tag].astro

@@ -219,7 +219,7 @@ const section = 'Tags'
                     <div class="space-y-3 pt-2">
                       {/* Client or Author info */}
                       {'client' in item.data && item.data.client && (
-                        <span class="inline-block text-sm font-medium text-primary bg-primary-bg px-3 py-1 rounded-full">
+                        <span class="inline-block text-sm font-medium text-primary bg-blue-100 px-3 py-1 rounded-full">
                           Client: {item.data.client}
                         </span>
                       )}

src/styles/print.css

@@ -10,6 +10,7 @@
     --theme-color-page-active: var(--a11y-theme-color-page-active);
     --theme-color-page-base-offset: var(--a11y-theme-color-page-base-offset);
     --theme-color-content: var(--a11y-theme-color-content);
+    --theme-color-content-offset: var(--a11y-theme-color-content-active);
     --theme-color-content-active: var(--a11y-theme-color-content-active);
     --theme-color-content-inverse: var(--a11y-theme-color-content-inverse);
     --theme-color-content-inverse-active: var(--a11y-theme-color-content-inverse-active);

src/styles/theme-inline.css

@@ -50,7 +50,7 @@
   /** Main content text color */
   --color-content: var(--theme-color-content); /* Light theme: #374151 */
 
-  /** @TODO: A shade of the text color for accent */
+  /** A shade of the text color for accent */
   --color-content-offset: var(--theme-color-content-offset); /* Light theme: #9ca3af */
 
   /** A shade of the text color for hover and focus states */

src/styles/themes/a11y.css

@@ -136,14 +136,17 @@
   /** Main content text color */
   --theme-color-content: var(--a11y-theme-color-content); /** --color-content */
 
+  /** A shade of the text color for accent */
+  --theme-color-content-offset: var(--a11y-theme-color-content-active); /** --color-content-offset */
+
   /** A shade of the text color for hover and focus states */
-  --theme-color-content-active: var(--a11y-theme-color-content-active); /** --color-content-offset */
+  --theme-color-content-active: var(--a11y-theme-color-content-active); /** --color-content-active */
 
   /** Main content text color */
   --theme-color-content-inverse: var(--a11y-theme-color-content-inverse); /** --color-content */
 
   /** A shade of the text color for hover and focus states */
-  --theme-color-content-inverse-active: var(--a11y-theme-color-content-inverse-active); /** --color-content-offset */
+  --theme-color-content-inverse-active: var(--a11y-theme-color-content-inverse-active); /** --color-content-inverse-active */
 
   /**
    * =============================================================================