From be9a7a274fd54f1896bb3d1dffd4d65b3e590c60 Mon Sep 17 00:00:00 2001
From: sounmind <devleesche@gmail.com>
Date: Sun, 14 Jul 2024 14:20:50 -0400
Subject: [PATCH] style: add a11y styles for button-link

---
 components/button-link.js | 63 ++++++++++++++++++++++++++++++++++++++-
 components/header.js      |  4 +--
 2 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/components/button-link.js b/components/button-link.js
index dc0e402..7a4c527 100644
--- a/components/button-link.js
+++ b/components/button-link.js
@@ -70,13 +70,55 @@ class ButtonLink extends HTMLElement {
         background-color: var(--primary);
       }
 
+      a.primary:focus {
+        outline: 3px solid var(--primary);
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+
+      a.primary:focus-visible {
+        outline: 3px solid var(--secondary);
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+
+      a.primary:hover {
+        background-color: #5536de;
+        font-weight: var(--font-weight-bold);
+      }
+
+      a.primary:active {
+        background-color: #160b46;
+        color: white;
+      }
+
       a.ghost {
         border: none;
         border-radius: 0;
       }
 
       a.small.ghost {
-        padding: 0;
+        padding: 10px 20px;
+      }
+
+      a.small.ghost:focus {
+        outline: 3px solid var(--primary);
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+
+      a.small.ghost:focus-visible {
+        outline: 3px solid var(--secondary);
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+
+      a.small.ghost:hover {
+        font-weight: var(--font-weight-bold);
+      }
+
+      a.small.ghost:active {
+        color: #846de9;
       }
 
       a.big.ghost {
@@ -95,6 +137,25 @@ class ButtonLink extends HTMLElement {
           border-width: 5px;
         }
       }
+
+      a.big.ghost:focus {
+        outline: 3px solid var(--primary);
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+
+      a.big.ghost:focus-visible {
+        outline: 3px solid var(--secondary);
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+
+      a.big.ghost:hover {
+        font-weight: var(--font-weight-bold);
+      }
+
+      a.big.ghost:active {
+        color: var(--primary);
       }
 
       @media only screen and (min-width: 768px) {
diff --git a/components/header.js b/components/header.js
index 2bc418c..eba8c40 100644
--- a/components/header.js
+++ b/components/header.js
@@ -81,13 +81,13 @@ class Header extends HTMLElement {
       .buttons-container {
         display: none;
         align-items: center;
-        column-gap: 40px;
+        column-gap: 30px;
 
         @media only screen and (min-width: 768px) {
           display: flex !important;
           flex-direction: row !important;
           align-items: center !important;
-          column-gap: 40px !important;
+          column-gap: 30px !important;
           margin-top: 0 !important;
         }
       }