Improve hero colors

Author: webstackdev

src/components/Animations/Computers/index.astro

@@ -14,7 +14,10 @@ import Icon from '@components/Icon/index.astro'
       aria-label="Pause animation"
       aria-pressed="false"
     >
-      <span data-animation-icon="pause" class="flex h-10 w-10 items-center justify-center bg-transparent">
+      <span
+        data-animation-icon="pause"
+        class="flex h-10 w-10 items-center justify-center bg-transparent"
+      >
         <Icon name="pause" size={20} variant="custom" class="text-primary-inverse fill-primary-inverse stroke-primary-inverse" />
       </span>
       <span

src/components/Animations/Hero/index.astro

@@ -25,7 +25,7 @@ const { pretitle, benefits } = Astro.props as Props
 
         <h1
           id="home-hero-title"
-          class="text-4xl md:text-5xl lg:text-7xl font-bold text-primary leading-none"
+          class="text-4xl md:text-5xl lg:text-7xl font-bold text-content-active leading-none"
         >
           Senior<br />
           Platform<br />
@@ -65,7 +65,23 @@ const { pretitle, benefits } = Astro.props as Props
           <Button href="/about" variant="success" text="Read My Story" />
           <a
             href="/contact"
-            class="sm:ml-6 py-3 text-primary font-bold underline underline-offset-4 decoration-2 decoration-dotted decoration-primary transition-colors hover:text-content-offset hover:decoration-content-offset focus-visible:text-content-offset focus-visible:underline focus-visible:decoration-2 focus-visible:decoration-dotted focus-visible:decoration-content-offset"
+            class:list={[
+              [
+                'py-3', 'sm:ml-6', 'transition-colors',
+              ],
+              [
+                'text-content', 'font-bold',
+              ],
+              [
+                'underline', 'underline-offset-4', 'decoration-2', 'decoration-dotted', 'decoration-content',
+              ],
+              [
+                'hover:text-content-offset', 'hover:decoration-content-offset',
+              ],
+              [
+                'focus-visible:text-content-offset', 'focus-visible:underline', 'focus-visible:decoration-2', 'focus-visible:decoration-dotted', 'focus-visible:decoration-content-offset',
+              ],
+            ]}
           >
             Get in Touch <span aria-hidden="true" class="md:text-3xl">→</span>
           </a>

src/styles/theme-inline.css

@@ -63,7 +63,7 @@
   --color-content-offset: var(--theme-color-content-offset); /* Light theme: #9ca3af */
 
   /** A shade of the text color for hover and focus states */
-  --color-content-active: var(--theme-color-content-active); /* Light theme: #9ca3af */
+  --color-content-active: var(--theme-color-content-active); /* Light theme: #001a39 */
 
   /** Main content text color */
   --color-content-inverse: var(--theme-color-content-inverse); /* Light theme: #f3f4f6 */

src/styles/themes/dark.css

@@ -14,7 +14,7 @@
   --theme-color-primary: #f3f4f6;
 
   /** A shade of the primary color for accent */
-  --theme-color-primary-offset: #fff;
+  --theme-color-primary-offset: #d1d5db;
 
   /** A shade of the primary color for accent */
   --theme-color-primary-inverse: #001A39;
@@ -65,7 +65,7 @@
   --theme-color-content-offset: #e5e7eb; /** --color-content-offset */
 
   /** A shade of the text color for hover and focus states */
-  --theme-color-content-active: #e5e7eb; /** --color-content-active */
+  --theme-color-content-active: #9ca3af; /** --color-content-active */
 
   /** Main content text color */
   --theme-color-content-inverse: #001a39; /** --color-content */

src/styles/themes/light.css

@@ -65,7 +65,7 @@
   --theme-color-content-offset: #9ca3af; /** --color-content-offset */
 
   /** A shade of the text color for hover and focus states */
-  --theme-color-content-active: #9ca3af; /** --color-content-active */
+  --theme-color-content-active: #001a39; /** --color-content-active */
 
   /** Main content text color opposite */
   --theme-color-content-inverse: #f3f4f6; /** --color-content */