Remove text-content-muted classes

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:
 
-bg-page-base-offset (52): e.g. index.astro:134, index.astro:14
-text-content-muted (47): e.g. index.astro:20
+(47): e.g. index.astro:20
 text-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

src/components/Consent/Preferences/index.astro

@@ -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-content-muted leading-relaxed">
+        <p id="consent-preferences__settings-desc" class="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/Errors/NotFoundHero/index.astro

@@ -17,9 +17,9 @@ const {
 ---
 
 <div class="mb-8 text-center">
-  <h1 class="text-9xl font-bold text-content-muted mb-4">{heading}</h1>
+  <h1 class="text-9xl font-bold mb-4">{heading}</h1>
   <h2 class="text-3xl md:text-4xl font-bold mb-4">{subheading}</h2>
-  <p class="text-lg text-content-muted mb-8">
+  <p class="text-lg mb-8">
     {description}
   </p>
   <div class="space-y-4">

src/components/Layout/Markdown/Lead/index.astro

@@ -16,7 +16,7 @@ export interface Props {
 const { modifiedDate, publishDate, author, readingTime, tags } = Astro.props
 ---
 
-<div class="flex flex-wrap gap-2 items-center text-sm text-content-muted mt-4 pt-4 border-trim">
+<div class="flex flex-wrap gap-2 items-center text-sm mt-4 pt-4 border-trim">
   {publishDate && <PublishDate publishDate={publishDate} />}
   {modifiedDate && modifiedDate !== publishDate && <ModifiedDate modifiedDate={modifiedDate} />}
   {author && <Author author={author} />}

src/components/Layout/Markdown/Subtitle/index.astro

@@ -6,6 +6,6 @@ export interface Props {
 const { subtitle } = Astro.props
 ---
 
-<p class="text-lg text-content-muted)] leading-relaxed" itemprop="description">
+<p class="text-lg)] leading-relaxed" itemprop="description">
   {subtitle}
 </p>

src/components/Social/Mastodon/client/index.ts

@@ -331,7 +331,7 @@ export class MastodonModalElement extends LitElement {
             <h2 id=${modalTitleId} class="m-0 text-xl font-semibold">Share to Mastodon</h2>
             <button
               type="button"
-              class="modal-close flex items-center justify-center w-8 h-8 p-0 border-0 bg-transparent rounded text-content-muted cursor-pointer transition-all duration-150 hover:bg-content-inverse-muted hover:text-content"
+              class="modal-close flex items-center justify-center w-8 h-8 p-0 border-0 bg-transparent rounded cursor-pointer transition-all duration-150 hover:bg-content-inverse-muted hover:text-content"
               aria-label="Close modal"
               @click=${() => this.closeModal()}
             >
@@ -377,7 +377,7 @@ export class MastodonModalElement extends LitElement {
                   class="flex items-stretch border border-trim rounded-md overflow-hidden bg-content-inverse-input focus-within:outline-2 focus-within:outline-primary focus-within:outline-offset-2"
                 >
                   <span
-                    class="flex items-center px-3 py-2 bg-content-inverse-muted text-content-muted text-sm select-none"
+                    class="flex items-center px-3 py-2 bg-content-inverse-muted text-sm select-none"
                     aria-hidden="true"
                   >
                     https://
@@ -398,7 +398,7 @@ export class MastodonModalElement extends LitElement {
 
               ${this.savedInstances.length > 0
                 ? html`<div id="saved-instances" class="flex flex-col gap-2">
-                    <p class="m-0 text-sm font-medium text-content-muted">Previously used:</p>
+                    <p class="m-0 text-sm font-medium">Previously used:</p>
                     <div class="saved-list flex flex-wrap gap-2">
                       ${this.savedInstances.map(
                         instance =>

src/components/Toc/index.astro

@@ -61,7 +61,7 @@ const tocTree = buildTocTree(items)
                           href={`#${node.slug}`}
                           data-toc-link
                           data-toc-slug={node.slug}
-                          class="block text-sm text-content-active transition-colors hover:text-primary data-[current=true]:text-content-muted"
+                          class="block text-sm text-content-active transition-colors hover:text-primary data-[current=true]:text-content-active"
                         >
                           {node.text}
                         </a>

src/pages/articles/index.astro

@@ -48,7 +48,7 @@ const section = 'Articles'
             )}
 
             <div class="p-6 md:p-8 space-y-4">
-              <div class="flex flex-wrap items-center gap-3 text-sm text-content-muted">
+              <div class="flex flex-wrap items-center gap-3 text-sm">
                 <time
                   datetime={article.data.publishDate.toISOString()}
                   class="flex items-center gap-1"
@@ -97,13 +97,13 @@ const section = 'Articles'
               </h2>
 
               {article.data.description && (
-                <p class="text-content-muted leading-relaxed line-clamp-3">
+                <p class="leading-relaxed line-clamp-3">
                   {article.data.description}
                 </p>
               )}
 
               <div class="flex items-center justify-between pt-4">
-                <div class="flex items-center gap-2 text-sm text-content-muted">
+                <div class="flex items-center gap-2 text-sm">
                   <svg
                     class="w-4 h-4"
                     aria-hidden="true"

src/pages/case-studies/index.astro

@@ -55,7 +55,7 @@ const section = 'Case Studies'
                 </h2>
 
                 {caseStudy.data.description && (
-                  <p class="text-content-muted text-sm leading-relaxed line-clamp-3">
+                  <p class="text-sm leading-relaxed line-clamp-3">
                     {caseStudy.data.description}
                   </p>
                 )}
@@ -69,7 +69,7 @@ const section = 'Case Studies'
 
                   <time
                     datetime={caseStudy.data.publishDate.toISOString()}
-                    class="block text-sm text-content-muted"
+                    class="block text-sm"
                   >
                     {caseStudy.data.publishDate.toLocaleDateString('en-US', {
                       year: 'numeric',
@@ -81,7 +81,7 @@ const section = 'Case Studies'
                 {caseStudy.data.tags && (
                   <div class="flex flex-wrap gap-2 pt-2">
                     {caseStudy.data.tags.slice(0, 3).map((tag: string) => (
-                      <span class="text-xs font-medium text-content-muted bg-page-base-offset px-2 py-1 rounded-full">
+                      <span class="text-xs font-medium bg-page-base-offset px-2 py-1 rounded-full">
                         {tag}
                       </span>
                     ))}

src/pages/consent/index.astro

@@ -12,7 +12,7 @@ const description =
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
     <header class="text-center mb-16">
       <h1 class="text-4xl md:text-5xl font-bold mb-6">Cookie Policy & Settings</h1>
-      <p class="text-xl text-content-muted max-w-3xl mx-auto">
+      <p class="text-xl max-w-3xl mx-auto">
         Manage your cookie preferences and learn how we use cookies to improve your experience.
       </p>
     </header>