chore: styles

src/assets/styles/components/badge-grid.css

@@ -14,7 +14,7 @@
 
     &:focus img,
     &:focus-within img {
-      outline: var(--outline)
+      outline: var(--outline-default)
     }
   }
 

src/assets/styles/components/banners.css

@@ -1,9 +1,12 @@
-.footnotes + .banner {
-  margin-top: 0;
+* + .banner {
+  margin-top: var(--sizing-base);
+}
+
+.banner:has(+ *) {
+  margin-bottom: var(--sizing-base);
 }
 
 .banner {
-  margin: var(--sizing-base) 0;
   padding: var(--sizing-md);
   border: 1px solid;
 

src/assets/styles/components/buttons.css

@@ -8,7 +8,7 @@ button,
 
   &:not(.theme-toggle) {
     border: 2px solid var(--accent-color);
-    padding: var(--sizing-sm) var(--sizing-lg);
+    padding: var(--sizing-xs) var(--sizing-md);
     cursor: pointer;
     display: inline-flex;
     flex-direction: row;
@@ -36,25 +36,14 @@ button,
   &:not(.theme-toggle, .active):focus,
   &:not(.theme-toggle, .active):focus-within {
     transition-property: none;
-    outline: 2px dashed var(--accent-color);
-    padding: calc(var(--sizing-sm) + 2px) calc(var(--sizing-lg) + 2px);
+    outline: var(--outline-default);
+    padding: calc(var(--sizing-xs) + 2px) calc(var(--sizing-md) + 2px);
     border: 0;
   }
 
   &.theme-toggle:focus,
   &.theme-toggle:focus-within {
-    outline: 2px dashed var(--accent-color);
-  }
-
-  &.small {
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-sm);
-    padding: var(--sizing-xs) var(--sizing-sm);
-
-    &:not(.active):focus,
-    &:not(.active):focus-within {
-      padding: var(--sizing-xs) calc(var(--sizing-sm) + 2px);
-    }
+    outline: var(--outline-default);
   }
 
   &.secondary {

src/assets/styles/components/forms.css

@@ -32,7 +32,7 @@ input:focus-within,
 textarea:focus,
 textarea:focus-within {
   border: 0;
-  outline: 2px dashed var(--accent-color);
+  outline: var(--outline-default);
   padding: calc(var(--sizing-sm) + 1px);
 }
 
@@ -46,7 +46,7 @@ select {
   &:focus,
   &:focus-within {
     border: 0;
-    outline: var(--outline)
+    outline: var(--outline-default)
   }
 }
 

src/assets/styles/components/menu.css

@@ -29,7 +29,7 @@
 
   &:focus,
   &:focus-within {
-    outline: 2px dashed var(--accent-color);
+    outline: var(--outline-default);
   }
 
   & svg {
@@ -132,8 +132,8 @@
 
     &:focus,
     &:focus-within {
-      border-top: 2px dashed var(--accent-color);
-      border-bottom: 2px dashed var(--accent-color);
+      border-top: var(--outline-default);
+      border-bottom: var(--outline-default);
     }
   }
 

src/assets/styles/components/modal.css

@@ -25,7 +25,7 @@
 
       &:focus svg,
       &:focus-within svg {
-        outline: var(--outline);
+        outline: var(--outline-default);
       }
 
       & svg {
@@ -34,7 +34,7 @@
         transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
 
         &:focus {
-          outline: var(--outline);
+          outline: var(--outline-default);
         }
 
         &:hover,
@@ -76,7 +76,7 @@
 
   &:focus svg,
   &:focus-within svg {
-    outline: var(--outline);
+    outline: var(--outline-default);
   }
 
   & svg {
@@ -86,7 +86,7 @@
     transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
 
     &:focus {
-      outline: var(--outline);
+      outline: var(--outline-default);
     }
 
     &:hover,

src/assets/styles/components/music-chart.css

@@ -65,7 +65,7 @@
 
       &:focus,
       &:focus-within {
-        outline: var(--outline);
+        outline: var(--outline-default);
       }
     }
 

src/assets/styles/components/tab-buttons.css

@@ -30,7 +30,7 @@ input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-window"]) {
 #tracks-window:not(:checked) ~ [for="tracks-window"]:focus,
 #tracks-window:not(:checked) ~ [for="tracks-window"]:focus-within {
   transition-property: none;
-  outline: 2px dashed var(--accent-color);
+  outline: var(--outline-default);
   border: 0;
 }