Move styles in Brand to css module, update styles

Author: webstackdev

src/components/Brand/index.astro

@@ -5,11 +5,11 @@
 import Logo from '@components/Brand/Logo.astro'
 import WordmarkBuilders from '@components/Brand/WordmarkBuilders.astro'
 import WordmarkWebstack from '@components/Brand/WordmarkWebstack.astro'
-import './index.css'
+import styles from './index.module.css'
 ---
 
 <a
-  class="flex items-stretch hover:brightness-90 focus:brightness-90"
+  class:list={['flex items-stretch', styles.brandLink]}
   href="/"
   rel="home"
   aria-label="Webstack Builders home"

src/components/Brand/index.css

@@ -0,0 +1,23 @@
+.brandLink :global(.logo-block-outer) {
+  fill: var(--color-primary);
+}
+
+.brandLink :global(.logo-block-inner) {
+  fill: var(--color-secondary);
+}
+
+.brandLink :global(.wordmark__svg-path) {
+  fill: var(--color-primary);
+}
+
+.brandLink:is(:hover, :focus, :focus-visible) :global(.logo-block-outer) {
+  fill: var(--color-primary-offset);
+}
+
+.brandLink:is(:hover, :focus, :focus-visible) :global(.logo-block-inner) {
+  fill: var(--color-secondary-offset);
+}
+
+.brandLink:is(:hover, :focus, :focus-visible) :global(.wordmark__svg-path) {
+  fill: var(--color-primary-offset);
+}

src/components/Brand/index.module.css

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly brandLink: string
+}
+
+export default styles

src/components/Brand/index.module.css.d.ts

@@ -5,7 +5,7 @@
 <style>
   /* Theme picker button styles */
   .theme-toggle-btn {
-    background-color: var(--color-primary-offset);
+    background-color: var(--color-primary);
     border-radius: 50%;
     border-width: 0;
     height: var(--header-icon-size);
@@ -17,7 +17,7 @@
 
   .theme-toggle-btn:hover,
   .theme-toggle-btn:focus {
-    background-color: var(--color-primary);
+    background-color: var(--color-primary-offset);
     outline-width: 0;
   }
 

src/components/ThemePicker/ThemeButton.astro

@@ -12,13 +12,13 @@
   --color-primary: var(--theme-color-primary); /* Light theme: #001A39 */
 
   /** A shade of the primary color for accent */
-  --color-primary-offset: var(--theme-color-primary-offset); /* Light theme: #00386d */
+  --color-primary-offset: var(--theme-color-primary-offset); /* Light theme: #003d86 */
 
   /** Secondary color for theme */
   --color-secondary: var(--theme-color-secondary); /* Light theme: #006dca */
 
   /** A shade of the secondary color for accent */
-  --color-secondary-offset: var(--theme-color-secondary-offset); /* Light theme: #0056a3 */
+  --color-secondary-offset: var(--theme-color-secondary-offset); /* Light theme: #1894ff */
 
   /** Accent color for theme */
   --color-accent: var(--theme-color-accent); /* Light theme: #7c3aed */

src/styles/theme-inline.css

@@ -11,7 +11,7 @@
   --a11y-theme-color-primary: #000;
   --a11y-theme-color-primary-offset: #111827;
   --a11y-theme-color-secondary: #000;
-  --a11y-theme-color-secondary-offset: #000;
+  --a11y-theme-color-secondary-offset: #111827;
   --a11y-theme-color-accent: #111827;
   --a11y-theme-color-accent-offset: #e5e7eb;
   --a11y-theme-color-page-base: #fff;

src/styles/themes/a11y.css

@@ -14,13 +14,13 @@
   --theme-color-primary: #f3f4f6;
 
   /** A shade of the primary color for accent */
-  --theme-color-primary-offset: #e5e7eb;
+  --theme-color-primary-offset: #fff;
 
   /** Secondary color for theme */
   --theme-color-secondary: #f3f4f6;
 
   /** A shade of the secondary color for accent */
-  --theme-color-secondary-offset: #d1d5db;
+  --theme-color-secondary-offset: #fff;
 
   /** Accent color for theme */
   --theme-color-accent: #8b5cf6;

src/styles/themes/dark.css

@@ -14,13 +14,13 @@
   --theme-color-primary: #f1f5f9;
 
   /** A shade of the primary color for accent */
-  --theme-color-primary-offset: #cbd5e1;
+  --theme-color-primary-offset: #fff;
 
   /** Secondary color for theme */
   --theme-color-secondary: #dc2626;
 
   /** A shade of the secondary color for accent */
-  --theme-color-secondary-offset: #b91c1c;
+  --theme-color-secondary-offset: #e76868;
 
   /** Accent color for theme */
   --theme-color-accent: #fbbf24;

src/styles/themes/holiday.css

@@ -14,13 +14,13 @@
   --theme-color-primary: #001A39;
 
   /** A shade of the primary color for accent */
-  --theme-color-primary-offset: #00386d;
+  --theme-color-primary-offset: #003d86;
 
   /** Secondary color for theme */
   --theme-color-secondary: #006dca;
 
   /** A shade of the secondary color for accent */
-  --theme-color-secondary-offset: #0056a3;
+  --theme-color-secondary-offset: #1894ff;
 
   /** Accent color for theme */
   --theme-color-accent: #7c3aed;