Focus states

Author: bradfrost

packages/docs/src/scss/abstracts/_mixins.scss

@@ -7,57 +7,71 @@
  * 1) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/
  */
 @mixin typographyBody() {
-	font-family: $font-primary;
-	font-size: $font-size-med-2;
-	font-weight: 500;
-	line-height: 1.6;
-	-webkit-text-size-adjust: 100%; /* 1 */
+  font-family: $font-primary;
+  font-size: $font-size-med-2;
+  font-weight: 500;
+  line-height: 1.6;
+  -webkit-text-size-adjust: 100%; /* 1 */
 }
 
 /**
  * XL Type Styles
  */
 @mixin typographyBodyLarge() {
-	font-size: $font-size-med-2;
-	line-height: $line-height-large;
+  font-size: $font-size-med-2;
+  line-height: $line-height-large;
 }
 
 /**
  * XL Heading Styles
  */
 @mixin typographyHeadingXl() {
-	font-weight: $font-weight-bold;
-	font-size: $font-size-large-2;
-	line-height: 1.1;
+  font-weight: $font-weight-bold;
+  font-size: $font-size-large-2;
+  line-height: 1.1;
 
-	@media all and (min-width: $bp-med) {
-		font-size: $font-size-xl;
-	}
+  @media all and (min-width: $bp-med) {
+    font-size: $font-size-xl;
+  }
 }
 
 /**
  * Large Heading Styles
  */
 @mixin typographyHeadingLarge() {
-	font-size: $font-size-large;
-	font-weight: 700;
-	line-height: 1.6;
+  font-size: $font-size-large;
+  font-weight: 700;
+  line-height: 1.6;
 }
 
 /**
  * Medium 2 Heading Styles
  */
 @mixin typographyHeadingMed2() {
-	font-size: $font-size-med-2;
-	font-weight: 700;
-	line-height: 1.2;
+  font-size: $font-size-med-2;
+  font-weight: 700;
+  line-height: 1.2;
 }
 
 /**
  * Medium Heading Styles
  */
 @mixin typographyHeadingMed() {
-	font-size: $font-size-med;
-	font-weight: 700;
-	line-height: 1.2;
+  font-size: $font-size-med;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+/*------------------------------------*\
+    #FOCUS
+\*------------------------------------*/
+
+@mixin focus() {
+  outline: 2px dotted $color-black;
+  outline-offset: 4px;
+}
+
+@mixin focusInverted() {
+  outline: 1px dotted $color-white;
+  outline-offset: 4px;
 }

packages/docs/src/scss/base/_buttons.scss

@@ -7,5 +7,9 @@
  * 1) These should be styled using c-btn
  */
 button {
-	cursor: pointer;
+  cursor: pointer;
+
+  &:focus {
+    @include focus();
+  }
 }

packages/docs/src/scss/base/_links.scss

@@ -6,16 +6,20 @@
  * Link base styles
  */
 a {
-	color: $color-links;
-	text-decoration: none;
-	transition: color $anim-fade-quick $anim-ease;
+  color: $color-links;
+  text-decoration: none;
+  transition: color $anim-fade-quick $anim-ease;
 
-	&:hover,
-	&:focus {
-		color: $color-links-hover;
-	}
+  &:hover,
+  &:focus {
+    color: $color-links-hover;
+  }
 
-	&:active {
-		color: $color-links-active;
-	}
+  &:focus {
+    @include focus();
+  }
+
+  &:active {
+    color: $color-links-active;
+  }
 }

packages/docs/src/scss/components/_logo.scss

@@ -17,14 +17,18 @@
 .c-logo__link {
   display: flex;
   align-items: center;
+
+  &:focus {
+    @include focusInverted();
+  }
 }
 
 /**
  * Logo image
  */
 .c-logo__img {
   display: block;
-  max-width: 3rem;
+  max-width: 2.4rem;
   margin-right: 0.5rem;
   animation: rotate 10s linear infinite;
 }

packages/docs/src/scss/components/_tree-nav.scss

@@ -10,7 +10,8 @@
 }
 
 .c-tree-nav__link {
-  display: block;
+  display: flex;
+  align-items: center;
   margin-bottom: 1.2rem;
   color: inherit;
   font-weight: $font-weight-bold;
@@ -22,6 +23,7 @@
 
   &:focus {
     color: $color-white;
+    @include focusInverted();
   }
 }
 
@@ -45,6 +47,14 @@
   }
 }
 
+.c-tree-nav__icon {
+  transition: transform $anim-fade-quick $anim-ease;
+
+  .c-tree-nav__item.is-active & {
+    transform: rotate(180deg);
+  }
+}
+
 .c-tree-nav__subnav-link {
   color: inherit;
   display: block;
@@ -54,6 +64,10 @@
   &:focus {
     color: $color-white;
   }
+
+  &:focus {
+    @include focusInverted();
+  }
 }
 
 .c-tree-nav__link--btn {