Auto Resize Button Height + Focus States

Button height will now auto adjust when there is a line break to help account for localization. Link colors will now properly change when using `skeleton-auto.css` to be more accessible colors when in dark or light theme. Focus states will now appear for `pressed` and keyboard navigation for accessibility improvements.
shelegdmitriy · May 1, 2023 · ae5e73d · ae5e73d
1 parent 709987c
commit ae5e73d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/css/brands.css b/css/brands.css
@@ -33,23 +33,26 @@
 button {
   display: inline-block;
   text-decoration: none;
-  height: 48px;
+  height: 100%;
   text-align: center;
   vertical-align: middle;
   font-size: 18px;
   width: 300px;
   font-weight: 700;
-  line-height: 48px;
+  line-height: 20px;
+  padding: 14px 12px 12px 12px;
   letter-spacing: 0.1px;
   white-space: wrap;
+  outline: none;
   border-radius: 8px;
   cursor: pointer;
-}
+
+}     
 button:hover,
 .button:focus {
-  color: #333;
+  color: #212121;
   border-color: #888;
-  outline: 0;
+  outline: #7AB8FF solid 3px
 }
 .button.button-primary {
   color: #fff;

diff --git a/css/skeleton-auto.css b/css/skeleton-auto.css
@@ -125,11 +125,29 @@ p {
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a {
-  color: #4899F7;
+  color: #2457F5;
+}
+a:hover {
+  color: #083BDA; 
+}
+a:focus {
+  outline: #7AB8FF solid 2px;
+  border-radius: 2px;
+}         
+
+/* Link Color Dark Theme */
+@media (prefers-color-scheme: dark) {
+  a {
+    color: #4899F7;
 }
 a:hover {
   color: #7AB8FF;
 }
+a:focus {
+  outline: #7AB8FF solid 2px;
+  border-radius: 2px;
+}
+}
 
 /* Code
 –––––––––––––––––––––––––––––––––––––––––––––––––– */