Finish up refactor of unused CSS variables to theme variables

Author: webstackdev

_TODO.md

@@ -204,29 +204,12 @@ Error Context: .cache/playwright/output/01-smoke-dynamic-pages-Dyn-8a015-ages-ha
 [mobile-safari] › test/e2e/specs/01-smoke/dynamic-pages.spec.ts:171:3 › Dynamic Pages @smoke › @ready dynamic pages have no console errors
 ```
 
-Undefined var(--color-…) Tokens (definitely not in theme-inline.css)
-
---color-text (9): index.astro:47, button.module.css:56
---color-bg-offset (4): index.astro:36, button.module.css:150
---color-danger-bg (4): index.astro:33, index.module.css:12
---color-success-bg (3): index.astro:38, index.astro:198
---color-twitter (3): button.module.css:93
---color-border (2): themePicker.module.css:51, index.ts:461
---color-gray-500 (2): uppy-dashboard.css:3292
---color-link-shadow (2): index.ts:30
-Singles: --color-error, --color-error-bg, --color-error-border, --color-error-text (all in index.astro:205); --color-gray-100 (uppy-dashboard.css:3112); --color-info-bg (index.astro:35); --color-success-border, --color-success-text (index.astro:199); --color-theme-sprites (ADDING_ICONS.md:50)
-
-Tailwind Color Utilities Not Backed By Theme Tokens (quoted class strings)
-High-frequency / likely broken given the @theme contract:
-
-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
-
-Default-palette style utilities that don’t exist in theme-inline.css (so likely broken now unless reintroduced elsewhere):
-
-bg-gray-100 (4): e.g. index.astro:166
-text-blue-400 (16): e.g. index.astro:205
-bg-blue-50 (5): e.g. index.astro:147
-border-blue-200 (3): e.g. index.astro:826
-Similar one-offs: bg-purple-100, text-purple-600, border-blue-500, bg-orange-100, etc. (all in the scan output)
+--color-blue-200
+--color-blue-400
+--color-blue-50
+--color-blue-500
+--color-gray-100
+--color-gray-500
+--color-orange-100
+--color-purple-100
+--color-purple-600

src/components/Button/button.module.css

@@ -53,14 +53,14 @@
 .variantPrimary {
   background-color: var(--color-primary);
   box-shadow: var(--shadow-sm);
-  color: var(--color-text);
+  color: var(--color-content);
 }
 
 .variantPrimary:hover,
 .variantPrimary:focus-visible {
   background-color: var(--color-primary-offset);
   box-shadow: var(--shadow-hover);
-  color: var(--color-text);
+  color: var(--color-content);
   transform: translateY(-1px);
 }
 
@@ -72,14 +72,14 @@
 
 .variantSecondary {
   background-color: var(--color-secondary);
-  color: var(--color-text);
+  color: var(--color-content);
 }
 
 .variantSecondary:hover,
 .variantSecondary:focus-visible {
   background-color: var(--color-secondary-offset);
   box-shadow: var(--shadow-hover);
-  color: var(--color-text);
+  color: var(--color-content);
   transform: translateY(-1px);
 }
 
@@ -90,15 +90,15 @@
 }
 
 .variantTwitter {
-  background-color: var(--color-twitter);
-  border-color: var(--color-twitter);
-  color: var(--color-text);
+  background-color: var(--color-x);
+  border-color: var(--color-x);
+  color: var(--color-content);
 }
 
 .variantTwitter:hover,
 .variantTwitter:focus-visible {
   background-color: transparent;
-  color: var(--color-twitter);
+  color: var(--color-x);
 }
 
 .variantSuccess {
@@ -121,7 +121,7 @@
 
 .variantWarning {
   background-color: var(--color-warning);
-  color: var(--color-text);
+  color: var(--color-content);
 }
 
 .variantWarning:hover,
@@ -141,16 +141,16 @@
   aspect-ratio: 1 / 1;
   background-color: transparent;
   box-shadow: none;
-  color: var(--color-text);
+  color: var(--color-content);
   padding: 0.5rem;
 }
 
 .variantIcon:hover,
 .variantIcon:focus-visible {
-  background-color: var(--color-bg-offset);
+  background-color: var(--color-page-base-offset);
   color: var(--color-primary);
 }
 
 .variantIcon:active {
-  background-color: var(--color-bg-offset);
+  background-color: var(--color-page-base-offset);
 }

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-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.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-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! 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" />
@@ -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-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.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-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! 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-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.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-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! 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-content underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.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-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! 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/Featured/index.astro

@@ -58,7 +58,7 @@ const titleId = `${id}-title`
 <div class="py-8 md:py-12" data-audience={audience}>
   <aside class="container mx-auto px-4 sm:px-6 lg:px-8" aria-labelledby={titleId}>
     <div
-      class="bg-linear-to-br from-(--color-success-bg) to-(--color-info-bg) rounded-2xl shadow-xl overflow-hidden"
+      class="bg-linear-to-br from-(--color-success-inverse) to-(--color-info-inverse) rounded-2xl shadow-xl overflow-hidden"
     >
       <div class={`grid gap-8 ${image ? 'lg:grid-cols-2' : 'lg:grid-cols-1'} items-center`}>
         <!-- Content Column -->

src/components/Callout/index.astro

@@ -30,22 +30,22 @@ const iconMap = {
 
 // Map callout types to their background color CSS custom properties
 const backgroundColorMap = {
-  warning: 'var(--color-danger-bg)',
-  action: 'var(--color-danger-bg)',
-  info: 'var(--color-info-bg)',
-  tip: 'var(--color-bg-offset)',
-  note: 'var(--color-bg-offset)',
-  success: 'var(--color-success-bg)',
-  danger: 'var(--color-danger-bg)',
+  warning: 'var(--color-danger-inverse)',
+  action: 'var(--color-danger-inverse)',
+  info: 'var(--color-info-inverse)',
+  tip: 'var(--color-page-base-offset)',
+  note: 'var(--color-page-base-offset)',
+  success: 'var(--color-success-inverse)',
+  danger: 'var(--color-danger-inverse)',
 } as const
 
 // Map callout types to their border/icon color CSS custom properties
 const borderColorMap = {
   warning: 'var(--color-danger)',
   action: 'var(--color-danger)',
   info: 'var(--color-info)',
-  tip: 'var(--color-text)',
-  note: 'var(--color-text)',
+  tip: 'var(--color-content)',
+  note: 'var(--color-content)',
   success: 'var(--color-success)',
   danger: 'var(--color-danger)',
 } as const

src/components/Footer/index.astro

@@ -91,7 +91,7 @@ const year = new Date().getFullYear()
                     href={social.url}
                     title={social.displayName}
                     rel="me"
-                    class="flex items-baseline uppercase underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-text! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
+                    class="flex items-baseline uppercase underline decoration-dotted decoration-content underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
                   >
                     <span class="[&_.icon]:h-4 [&_.icon]:w-4">
                       <Icon name={social.iconName} variant="inherit" />
@@ -153,7 +153,7 @@ const year = new Date().getFullYear()
           <a
             href={`${getSiteUrl()}/rss.xml`}
             title="RSS Feed"
-            class="[&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
+            class="[&_.icon]:fill-content! [&_.icon]:stroke-icons! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
           >
             <span class="sr-only">RSS Feed</span>
             <span><Icon name="feed" variant="inherit" /></span>
@@ -180,7 +180,7 @@ const year = new Date().getFullYear()
         <a
           href={`${getSiteUrl()}/rss.xml`}
           title="RSS Feed"
-          class="[&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
+          class="[&_.icon]:fill-content! [&_.icon]:stroke-icons! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
         >
           <span class="sr-only">RSS Feed</span>
           <span><Icon name="feed" variant="inherit" /></span>
@@ -193,7 +193,7 @@ const year = new Date().getFullYear()
           id="bugReporterTrigger"
           type="button"
           title="Report a bug"
-          class="[&_.icon]:fill-content! [&_.icon]:stroke-text! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
+          class="[&_.icon]:fill-content! [&_.icon]:stroke-icons! [&_.icon]:h-10 [&_.icon]:w-10 hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary! focus:outline-none"
         >
           <span class="sr-only">Report a bug</span>
           <span><Icon name="bug" variant="inherit" /></span>

src/components/Forms/Download/index.astro

@@ -195,16 +195,16 @@ const downloadUrl = `/downloads/${fileName}`
 
 <style>
   #downloadFormStatus.success {
-    background-color: var(--color-success-bg);
-    border: 1px solid var(--color-success-border);
-    color: var(--color-success-text);
+    background-color: var(--color-success-inverse);
+    border: 1px solid var(--color-success-offset);
+    color: var(--color-success);
     display: block;
   }
 
   #downloadFormStatus.error {
-    background-color: var(--color-error-bg);
-    border: 1px solid var(--color-error-border);
-    color: var(--color-error-text);
+    background-color: var(--color-danger-inverse);
+    border: 1px solid var(--color-danger-offset);
+    color: var(--color-danger);
     display: block;
   }
 </style>

src/components/Icon/ADDING_ICONS.md

@@ -47,7 +47,7 @@ Icons integrate with the site's theming system via CSS custom properties:
 ```css
 /* In src/styles/icons.css */
 [astro-icon] {
-  color: var(--color-theme-sprites);
+  color: var(--color-icons);
   fill: currentColor;
 }
 ```

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

@@ -458,7 +458,7 @@ export class MastodonModalElement extends LitElement {
       <style>
         .saved-list :global(.saved-instance) {
           background: var(--color-page-base-offset);
-          border: 1px solid var(--color-border);
+          border: 1px solid var(--color-trim);
           border-radius: 0.25rem;
           color: var(--color-primary);
           cursor: pointer;
@@ -473,7 +473,7 @@ export class MastodonModalElement extends LitElement {
         }
 
         .modal-status.error {
-          color: var(--color-error);
+          color: var(--color-danger);
         }
 
         .modal-status.success {

src/components/Test/client/webComponent.ts

@@ -12,7 +12,7 @@ export class TestWebComponent extends LitElement {
   static override styles = css`
     :host {
       display: block;
-      border: 1px dashed var(--color-border, #888);
+      border: 1px dashed var(--color-trim, #888);
       padding: 0.5rem;
     }
   `