Move theme picker styles into CSS modules. Update colors for nav and theme picker button.

Author: webstackdev

.gitignore

@@ -73,4 +73,4 @@ __pycache__/
 *.py[cod]
 
 # Planning docs
-CONTENT_PLANNING*.md
+CONTENT*.md

src/components/Navigation/NavToggle.astro

@@ -10,7 +10,7 @@ import styles from './navToggle.module.css'
   data-testid="nav-toggle"
   class:list={[
     'nav-toggle-btn',
-    'lg:hidden inline-flex items-center justify-center rounded-full border-0 bg-primary-offset text-content-inverse transition-colors duration-150 ease-linear hover:bg-spotlight focus:bg-spotlight focus:outline-none',
+    'lg:hidden inline-flex items-center justify-center rounded-full border-0 bg-primary text-content-inverse transition-colors duration-150 ease-linear hover:bg-spotlight focus:bg-primary-offset focus:outline-none',
     styles.button,
   ]}
   type="button"

src/components/ThemePicker/ThemeButton.astro

@@ -1,61 +1,20 @@
 ---
 // Theme Picker Toggle Button
+import styles from './themeButton.module.css'
 ---
 
-<style>
-  /* Theme picker button styles */
-  .theme-toggle-btn {
-    background-color: var(--color-primary);
-    border-radius: 50%;
-    border-width: 0;
-    height: var(--header-icon-size);
-    position: relative;
-    transition: 0.15s linear;
-    width: var(--header-icon-size);
-    z-index: var(--z-content-overlay);
-  }
-
-  .theme-toggle-btn:hover,
-  .theme-toggle-btn:focus {
-    background-color: var(--color-primary-offset);
-    outline-width: 0;
-  }
-
-  .theme-toggle-svg {
-    height: var(--header-icon-size);
-    position: relative;
-    transform: rotate(0deg);
-    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-    width: var(--header-icon-size);
-    z-index: inherit;
-  }
-
-  .theme-toggle-path {
-    fill: var(--color-page-base);
-  }
-
-  .theme-toggle-circle {
-    fill: none;
-    stroke-dasharray: var(--circle-stroke);
-    stroke-dashoffset: var(--circle-stroke);
-    stroke-linecap: round;
-    stroke-width: 0.3rem;
-    transition: stroke-dashoffset 0.3s linear 0.1s;
-  }
-
-  /* Animation for theme picker active state */
-  .theme-toggle-btn[aria-expanded='true'] .theme-toggle-svg {
-    fill: var(--color-page-base);
-    transform: rotate(90deg);
-  }
-
-  .theme-toggle-btn[aria-expanded='true'] .theme-toggle-circle {
-    stroke-dashoffset: 0;
-  }
-</style>
-
 <button
-  class="theme-toggle-btn themepicker-toggle__toggle-btn"
+  class:list={[
+    'theme-toggle-btn themepicker-toggle__toggle-btn',
+    'relative inline-flex items-center justify-center',
+    'w-(--header-icon-size) h-(--header-icon-size)',
+    'rounded-full border-0',
+    'bg-primary hover:bg-primary-offset',
+    'focus:bg-primary-offset focus:outline-none focus-visible:bg-primary-offset',
+    'transition-colors duration-150 ease-linear',
+    'z-(--z-content-overlay)',
+    styles.toggleBtn,
+  ]}
   type="button"
   aria-expanded="false"
   aria-controls="theme-picker-panel"
@@ -65,17 +24,22 @@
 >
   <svg
     viewBox="0 0 50 50"
-    class="theme-toggle-svg"
+    class:list={[
+      'w-(--header-icon-size) h-(--header-icon-size)',
+      'relative',
+      'transition-transform duration-300 ease-[cubic-bezier(0.165,0.84,0.44,1)]',
+      styles.toggleSvg,
+    ]}
     xmlns="http://www.w3.org/2000/svg"
     aria-hidden="true"
     focusable="false"
   >
     <g>
       <path
-        class="theme-toggle-path"
+        class:list={['fill-page-base']}
         d="M 31.6,15.4 V 14.2 C 31.6,13.54 31.06,13 30.4,13 H 16 c -0.66,0 -1.2,0.54 -1.2,1.2 V 19 c 0,0.66 0.54,1.2 1.2,1.2 h 14.4 c 0.66,0 1.2,-0.54 1.2,-1.2 v -1.2 h 1.2 v 4.8 h -12 v 13.2 c 0,0.66 0.54,1.2 1.2,1.2 h 2.4 c 0.66,0 1.2,-0.54 1.2,-1.2 V 25 h 9.6 v -9.6 z"
       ></path>
-      <circle class="theme-toggle-circle" r="23" cx="25" cy="25"></circle>
+      <circle class={styles.toggleCircle} r="23" cx="25" cy="25"></circle>
     </g>
   </svg>
 </button>

src/components/ThemePicker/index.astro

@@ -66,7 +66,7 @@ const { closeComponent = 'close', label = 'Select theme' } = Astro.props
                       <span class="themepicker__themeName">{theme.name}</span>
                       {theme.description && (
                         <span
-                          class="themepicker__tooltip absolute left-full top-full ml-1 mt-1 z-20 max-w-xs whitespace-normal break-words rounded-md border border-trim bg-content-inverse-inverse px-2 py-1 text-xs text-content-inverse opacity-0 pointer-events-none group-hover:opacity-100 group-focus:opacity-100 group-focus-visible:opacity-100"
+                          class="themepicker__tooltip absolute left-full top-full ml-1 mt-1 z-20 max-w-xs whitespace-normal wrap-break-word rounded-md border border-trim bg-content-inverse-inverse px-2 py-1 text-xs text-content-inverse opacity-0 pointer-events-none group-hover:opacity-100 group-focus:opacity-100 group-focus-visible:opacity-100"
                           data-theme-tooltip
                         >
                           {theme.description}

src/components/ThemePicker/themeButton.module.css

@@ -0,0 +1,17 @@
+.toggleCircle {
+  fill: none;
+  stroke-dasharray: var(--circle-stroke);
+  stroke-dashoffset: var(--circle-stroke);
+  stroke-linecap: round;
+  stroke-width: 0.3rem;
+  transition: stroke-dashoffset 0.3s linear 0.1s;
+}
+
+.toggleBtn[aria-expanded='true'] .toggleSvg {
+  fill: var(--color-page-base);
+  transform: rotate(90deg);
+}
+
+.toggleBtn[aria-expanded='true'] .toggleCircle {
+  stroke-dashoffset: 0;
+}

src/components/ThemePicker/themeButton.module.css.d.ts

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly toggleBtn: string
+  readonly toggleSvg: string
+  readonly toggleCircle: string
+}
+
+export default styles