Add focus styles to calls to action and buttons.

assets/styles/common/_global.scss

@@ -4,6 +4,7 @@
   --primary-alpha: $primary-alpha;
   --primary-fg: $primary-foreground;
   --accent: $accent;
+  --accent-alpha: $accent-alpha;
   --accent-dark: $accent-dark;
   --accent-fg: $accent-foreground;
   --success: $success-color;

assets/styles/components/_buttons.scss

@@ -1,3 +1,4 @@
+.button,
 button,
 input[type="submit"],
 a.call-to-action {
@@ -16,14 +17,14 @@ a.call-to-action {
 
   // Share hover and focus styles
   &:focus,
+  &.focus,
   &:hover {
     text-decoration: none;
   }
 
   &:focus,
   &.focus {
     outline: 0;
-    // box-shadow: $btn-focus-box-shadow;
   }
 
   // Disabled comes first so active can properly restyle
@@ -40,31 +41,102 @@ a.call-to-action {
   }
 }
 
+.button,
 button,
 input[type="submit"] {
   background-color: var(--primary);
   border-color: var(--primary);
   color: var(--primary-fg);
 
   &:focus,
+  &.focus,
   &:hover {
     background-color: var(--primary-dark);
     border-color: var(--primary-dark);
     color: var(--primary-fg);
   }
+
+  &:focus,
+  &.focus {
+    box-shadow:
+      0 0 0 $btn-border-width var(--primary-fg),
+      0 0 0 (2 * $btn-border-width) var(--primary-dark);
+  }
+
+  &.button--accent {
+    background-color: var(--accent);
+    border-color: var(--accent);
+    color: var(--accent-fg);
+
+    &:focus,
+    &.focus,
+    &:hover {
+      background-color: var(--accent-dark);
+      border-color: var(--accent-dark);
+      color: var(--accent-fg);
+    }
+
+    &:focus,
+    &.focus {
+      box-shadow:
+        0 0 0 $btn-border-width var(--accent-fg),
+        0 0 0 (2 * $btn-border-width) var(--accent-dark);
+    }
+
+    &:active,
+    &.active {
+      background-image: none;
+      @include btn-active-box-shadow( "accent" );
+    }
+  }
 }
 
-a.call-to-action {
+.call-to-action {
   background-color: var(--primary-fg);
   border-color: var(--primary);
   color: var(--primary);
 
   &:focus,
+  &.focus,
   &:hover {
     background-color: var(--primary-fg);
     border-color: var(--primary-dark);
     color: var(--primary-dark);
   }
+
+  &:focus,
+  &.focus {
+    box-shadow:
+      0 0 0 $btn-border-width var(--primary-fg),
+      0 0 0 (2 * $btn-border-width) var(--primary-dark);
+  }
+
+  &.call-to-action--accent {
+    background-color: var(--accent-fg);
+    border-color: var(--accent);
+    color: var(--accent);
+
+    &:focus,
+    &.focus,
+    &:hover {
+      background-color: var(--accent-fg);
+      border-color: var(--accent-dark);
+      color: var(--accent-dark);
+    }
+
+    &:focus,
+    &.focus {
+      box-shadow:
+        0 0 0 $btn-border-width var(--accent-fg),
+        0 0 0 (2 * $btn-border-width) var(--accent-dark);
+    }
+
+    &:active,
+    &.active {
+      background-image: none;
+      @include btn-active-box-shadow( "accent" );
+    }
+  }
 }
 
 [class$="--accent"] .call-to-action {
@@ -73,46 +145,84 @@ a.call-to-action {
   color: var(--accent-fg);
 
   &:focus,
+  &.focus,
   &:hover {
     background-color: var(--accent-dark);
     border-color: var(--accent-fg);
     color: var(--accent-fg);
   }
 
+  &:focus,
+  &.focus {
+    box-shadow:
+      0 0 0 $btn-border-width var(--accent-dark),
+      0 0 0 (2 * $btn-border-width) var(--accent-fg);
+  }
+
   &:active,
   &.active {
     background-image: none;
     @include btn-active-box-shadow( "accent" );
   }
 }
 
-.button--secondary {
-  background-color: transparent;
-  border-color: var(--primary);
-  color: var(--primary);
-
-  &:focus,
-  &:hover {
-    border-color: var(--primary-dark);
-    color: var(--primary-dark);
-  }
-}
-
-.button--circle--primary {
+.button--circle {
   align-items: center;
   background-color: var(--primary);
-  color: var(--primary-fg);
+  border-color: var(--primary);
   border-radius: 50%;
+  border-style: solid;
+  border-width: $btn-border-width;
+  color: var(--primary-fg);
   display: flex;
   justify-content: center;
   height: 3.75rem;
   width: 3.75rem;
 
   &:focus,
+  &.focus,
   &:hover {
     background-color: var(--primary-dark);
     border-color: var(--primary-dark);
     color: var(--primary-fg);
     text-decoration: none;
   }
+
+  &:focus,
+  &.focus {
+    box-shadow:
+    0 0 0 $btn-border-width var(--primary-fg),
+    0 0 0 (2 * $btn-border-width) var(--primary-dark);
+  }
+
+  &:active,
+  &.active {
+    background-image: none;
+    @include btn-active-box-shadow();
+  }
+
+  &--accent {
+    background-color: var(--accent);
+    color: var(--accent-fg);
+
+    &:focus,
+    &.focus,
+    &:hover {
+      background-color: var(--accent-dark);
+      border-color: var(--accent-dark);
+      color: var(--accent-fg);
+    }
+
+    &:focus,
+    &.focus {
+      box-shadow:
+      0 0 0 $btn-border-width var(--accent-fg),
+      0 0 0 (2 * $btn-border-width) var(--accent-dark);
+    }
+
+    &:active,
+    &.active {
+      @include btn-active-box-shadow( "accent" );
+    }
+  }
 }

src/components/_preview.hbs

@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <link media="all" rel="stylesheet" href="{{ path '/styles/aetna.css' }}">
     <title>Preview Layout</title>
+	<style type="text/css">
+		body { padding: 1em; }
+	</style>
 </head>
 <body>
 

src/components/button/README.md

@@ -0,0 +1 @@
+# Buttons

src/components/button/button--accent.hbs

@@ -0,0 +1 @@
+<button class="button button--accent">{{text}}</button>

src/components/button/button--circle.hbs

@@ -0,0 +1 @@
+<a href="#" class="button--circle">OK</a>

src/components/button/button.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	title: "Button",
+	status: "prototype",
+	context: {
+		text: "Do Something"
+	}
+};

src/components/button/button.hbs

@@ -0,0 +1 @@
+<button class="button">{{text}}</button>

src/components/call-to-action/README.md

@@ -1 +1 @@
-# Buttons
+# Calls to Action

src/components/call-to-action/call-to-action--accent.hbs

@@ -0,0 +1 @@
+<a class="call-to-action call-to-action--accent" href="#">{{text}}</a>

src/components/call-to-action/call-to-action.hbs

@@ -1 +1 @@
-<button class="button">{{text}}</button>
+<a class="call-to-action" href="#">{{text}}</a>