fix: Brand Assets button styles (#250)

Author: Eva Decker

src/pages/brand-assets/_components/BrandAssetCard.astro

@@ -19,11 +19,15 @@ const { assetName, name, instructions, inverted } = Astro.props;
     <h3>{name}</h3>
     <p>{instructions}</p>
     <div class="buttons">
-      <a class="button" href={`/assets/brand-assets/${assetName}.svg`} download
-        ><RiDownloadLine />SVG</a
+      <a
+        class="button secondary small"
+        href={`/assets/brand-assets/${assetName}.svg`}
+        download><RiDownloadLine />SVG</a
       >
-      <a class="button" href={`/assets/brand-assets/${assetName}.png`} download
-        ><RiDownloadLine />PNG</a
+      <a
+        class="button secondary small"
+        href={`/assets/brand-assets/${assetName}.png`}
+        download><RiDownloadLine />PNG</a
       >
     </div>
   </div>
@@ -66,25 +70,5 @@ const { assetName, name, instructions, inverted } = Astro.props;
 
   .button {
     display: inline-flex;
-    font-size: var(--step--1);
-    align-items: center;
-    gap: var(--space-2xs);
-    border: 3px solid var(--text);
-    padding: var(--space-2xs) var(--space-xs);
-    text-decoration: none;
-    font-weight: 600;
-    border-radius: 3px;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--text);
-        color: var(--bg);
-      }
-    }
-
-    &:focus-visible {
-      outline: 3px solid var(--text);
-      outline-offset: 2px;
-    }
   }
 </style>

src/pages/brand-assets/_components/Swatches.astro

@@ -17,15 +17,15 @@ import { colors } from "~/data/colors";
           </div>
           <div class="buttons">
             <button
-              class="button swatch-toggle"
+              class="button secondary small swatch-toggle"
               data-name={color.id}
               data-color={color.hex}
               title={`Use ${color.name} for site background`}
             >
               Set bg
             </button>
             <button
-              class="button copy-hex"
+              class="button secondary small copy-hex"
               data-clipboard-text={color.hex}
               title={`Copy ${color.name} hex code`}
             >
@@ -112,29 +112,6 @@ import { colors } from "~/data/colors";
   }
 
   .button {
-    background-color: transparent;
     display: inline-flex;
-    align-items: center;
-    color: var(--text);
-    font-size: var(--step--1);
-    gap: var(--space-xs);
-    border: 3px solid var(--text);
-    padding: var(--space-2xs) var(--space-s);
-    text-decoration: none;
-    font-weight: 600;
-    border-radius: 3px;
-    cursor: pointer;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--text);
-        color: var(--bg);
-      }
-    }
-
-    &:focus-visible {
-      outline: 3px solid var(--text);
-      outline-offset: 2px;
-    }
   }
 </style>

src/pages/brand-assets/index.astro

@@ -45,8 +45,10 @@ import Swatches from "./_components/Swatches.astro";
         inverted
       />
     </div>
-    <a class="button" href="/assets/brand-assets/namesake-logos.zip" download
-      ><RiDownloadLine />Download All</a
+    <a
+      class="button secondary"
+      href="/assets/brand-assets/namesake-logos.zip"
+      download><RiDownloadLine />Download All</a
     >
   </section>
   <section>
@@ -58,8 +60,10 @@ import Swatches from "./_components/Swatches.astro";
         >Yann Le Coroller</a
       > and is freely distributed. It emulates the look of printed text.
     </p>
-    <a class="button" href="/assets/brand-assets/alte-haas-grotesk.zip" download
-      ><RiDownloadLine />Download Alte Haas Grotesk</a
+    <a
+      class="button secondary"
+      href="/assets/brand-assets/alte-haas-grotesk.zip"
+      download><RiDownloadLine />Download Alte Haas Grotesk</a
     >
   </section>
   <section>
@@ -102,22 +106,7 @@ import Swatches from "./_components/Swatches.astro";
 
   .button {
     display: inline-flex;
-    gap: var(--space-s);
-    font-weight: 600;
-    background-color: var(--text);
-    border: 3px solid var(--text);
-    border-radius: 3px;
-    color: var(--bg);
-    text-decoration: none;
-    padding: var(--space-s) var(--space-m);
     margin-top: var(--space-m);
-    cursor: pointer;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--bg);
-        color: var(--text);
-      }
-    }
+    padding-inline: var(--space-m);
   }
 </style>

src/styles/base.css

@@ -162,9 +162,9 @@ img {
   border-radius: 5px;
   font-weight: 600;
   text-decoration: none;
-  height: var(--space-3xl);
   gap: var(--space-xs);
   border: 3px solid transparent;
+  cursor: pointer;
 
   &.primary {
     background-color: var(--text);
@@ -192,21 +192,9 @@ img {
     }
   }
 
-  &.ghost {
-    background-color: transparent;
-    color: var(--text);
-    border-color: transparent;
-
-    @media (hover: hover) {
-      &:hover {
-        border-color: var(--text);
-      }
-    }
-  }
-
   &.small {
-    padding: var(--space-xs) var(--space-s);
-    height: var(--space-2xl);
+    padding: var(--space-2xs) var(--space-xs);
+    gap: var(--space-2xs);
     font-size: var(--step--1);
   }