Rest of bg-* and text-* CSS class refactors

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

src/components/Avatar/index.astro

@@ -53,7 +53,7 @@ const avatarAlt = name
       />
     ) : (
       <div
-        class="avatar-placeholder bg-primary 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-offset"
         role="img"
         aria-label={name}
       >

src/components/Breadcrumbs/index.astro

@@ -58,7 +58,7 @@ const breadcrumbSchema =
               )}
 
               {item.isCurrentPage ? (
-                <span class="text-text font-medium" aria-current="page">
+                <span class="text-content font-medium" aria-current="page">
                   {item.label}
                 </span>
               ) : (

src/components/BugReporter/index.astro

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

src/components/Calendar/index.astro

@@ -9,7 +9,7 @@ const { ...rest } = Astro.props
     type="button"
     data-calendar-trigger
     aria-expanded="false"
-    class="inline-flex items-center text-text underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+    class="inline-flex items-center text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
   >
     <span class="[&_.icon]:h-5 [&_.icon]:w-5">
       <Icon name="calendar-generic-ical" variant="inherit" />
@@ -19,7 +19,7 @@ const { ...rest } = Astro.props
 
   <div
     data-calendar-menu
-    class="hidden mt-2 border border-border rounded-md bg-content-inverse text-text p-3 w-[min(22rem,90vw)]"
+    class="hidden mt-2 border border-border rounded-md bg-content-inverse text-content p-3 w-[min(22rem,90vw)]"
     role="menu"
     aria-label="Add this event to your calendar"
   >
@@ -28,7 +28,7 @@ const { ...rest } = Astro.props
         data-calendar-link="google"
         href="https://calendar.google.com/calendar/render"
         rel="noopener"
-        class="flex items-center text-text underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+        class="flex items-center text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
       >
         <span class="[&_.icon]:h-5 [&_.icon]:w-5">
           <Icon name="calendar-google" variant="inherit" />
@@ -40,7 +40,7 @@ const { ...rest } = Astro.props
         data-calendar-link="outlook"
         href="https://outlook.office.com/calendar/0/deeplink/compose"
         rel="noopener"
-        class="flex items-center text-text underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+        class="flex items-center text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
       >
         <span class="[&_.icon]:h-5 [&_.icon]:w-5">
           <Icon name="calendar-outlook" variant="inherit" />
@@ -51,7 +51,7 @@ const { ...rest } = Astro.props
       <button
         type="button"
         data-calendar-download-ics
-        class="flex items-center text-text underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+        class="flex items-center text-content underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-text! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
       >
         <span class="[&_.icon]:h-5 [&_.icon]:w-5">
           <Icon name="calendar_apple" variant="inherit" />

src/components/CallToAction/Download/README.md

@@ -71,7 +71,7 @@ The component uses CSS custom properties for theming:
 
 - `--color-primary`: Primary brand color
 - `--color-accent`: Accent color for gradients
-- `--color-text`: Text color (used for button text)
+- `--color-content`: Text color (used for button text)
 
 ### Layout
 

src/components/CallToAction/Featured/index.astro

@@ -66,7 +66,7 @@ const titleId = `${id}-title`
           <div class="max-w-xl">
             <h3
               id={titleId}
-              class="text-2xl md:text-3xl lg:text-4xl font-bold text-text mb-4 leading-tight"
+              class="text-2xl md:text-3xl lg:text-4xl font-bold text-content mb-4 leading-tight"
             >
               {title}
             </h3>

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-text mb-4">
+            <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">
@@ -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-text 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-text-offset focus:border-primary focus:ring-0 focus:outline-none transition-colors duration-200"
                     required
                     aria-describedby="newsletter-message"
                   />
@@ -89,7 +89,7 @@ const {
                     type="submit"
                     id="newsletter-submit"
                     data-e2e-state="idle"
-                    class="px-8 py-4 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
+                    class="px-8 py-4 bg-spotlight hover:bg-spotlight-offset text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
                   >
                     <span id="button-text">{buttonText}</span>
                     <svg

src/components/Carousel/index.astro

@@ -71,7 +71,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
                         </div>
                       )}
                       <div class="p-6 pt-2">
-                        <h3 class="text-xl font-semibold text-text mb-3 group-hover:text-primary transition-colors">
+                        <h3 class="text-xl font-semibold text-content mb-3 group-hover:text-primary transition-colors">
                           {item.data.title}
                         </h3>
                         {item.data.description && (
@@ -106,7 +106,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
           {/* Navigation Buttons */}
           <button
             type="button"
-            class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-border shadow-lg hover:bg-primary hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
+            class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-border shadow-lg hover:bg-spotlight hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
             aria-label="Previous slide"
             data-carousel-prev
           >
@@ -129,7 +129,7 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug}`
 
           <button
             type="button"
-            class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-border shadow-lg hover:bg-primary hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
+            class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-border shadow-lg hover:bg-spotlight hover:border-primary transition-all duration-300 flex items-center justify-center z-10 disabled:opacity-30 disabled:cursor-not-allowed"
             aria-label="Next slide"
             data-carousel-next
           >

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-secondary border-none text-text flex p-1.5 absolute top-0 right-0 transition-all duration-150 ease-in-out hover:bg-secondary-offset hover:text-text focus:bg-secondary-offset focus:text-text focus:outline-none z-10"
+      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"
     >
       <Icon name="close" class="h-8 w-8" />
     </button>