Add styling for secondary buttons and links

Author: pichfl

addon/styles/colors.css

@@ -29,6 +29,9 @@
   background-color: var(--color-gray-900);
   color: var(--color-gray-300);
 
+  --color-link: var(--color-brand);
+  --color-link-hover: var(--color-brand-hc-light);
+
   & h1,
   & h2,
   & h3,

addon/styles/components/es-button.css

@@ -1,9 +1,13 @@
 .es-button,
 a.es-button,
 a.es-button:link,
-a.es-button:visited {
-  background-color: var(--color-brand);
-  color: var(--color-white);
+a.es-button:visited,
+.es-button-secondary,
+a.es-button-secondary,
+a.es-button-secondary:link,
+a.es-button-secondary:visited {
+  background-color: var(--color-button-bg);
+  color: var(--color-button-text);
   padding-left: var(--spacing-3);
   padding-right: var(--spacing-3);
   padding-top: var(--spacing-1);
@@ -12,13 +16,42 @@ a.es-button:visited {
   border-radius: var(--radius-lg);
   font-size: var(--font-size-md);
   line-height: var(--line-height-md);
+  transition: background-color 0.2s, color 0.1s;
+  box-shadow: 0 0 2px -1px var(--color-gray-800), 0 2px 9px -5px var(--color-gray-800);
 }
 
-.es-button:active {
-  background: var(--color-brand-hc-dark);
+.es-button:focus,
+a.es-button:focus,
+.es-button-secondary:focus,
+a.es-button-secondary:focus {
+  box-shadow: var(--focus), 0 0 2px -1px var(--color-gray-800), 0 2px 8px -4px var(--color-gray-800);
 }
 
-a.es-button {
+.es-button:hover,
+.es-button:active,
+a.es-button:hover,
+a.es-button:active {
+  background: var(--color-button-bg-hover);
+}
+
+a.es-button,
+a.es-button-secondary {
   display: inline-block;
   text-decoration: none;
 }
+
+.es-button-secondary,
+a.es-button-secondary,
+a.es-button-secondary:link,
+a.es-button-secondary:visited {
+  background: var(--color-button-secondary-bg);
+  color: var(--color-button-secondary-text);
+}
+
+.es-button-secondary:hover,
+.es-button-secondary:active,
+a.es-button-secondary:hover,
+a.es-button-secondary:active {
+  background: var(--color-button-secondary-bg-hover);
+  color: var(--color-button-secondary-text-hover);
+}

addon/styles/global.css

@@ -67,6 +67,20 @@
 
   --radius: 0.3125rem;
   --radius-lg: 0.625rem;
+
+
+  --color-button-text: var(--color-white);
+  --color-button-bg: var(--color-brand);
+  --color-button-bg-hover: var(--color-brand-hc-dark);
+  --color-button-secondary-text: var(--color-brand);
+  --color-button-secondary-bg: var(--color-white);
+  --color-button-secondary-bg-hover: var(--color-brand);
+  --color-button-secondary-text-hover: var(--color-white);
+
+  --color-link: var(--color-brand-hc-dark);
+  --color-link-hover: var(--color-brand);
+
+  --focus: 0 0 0px 3px rgba(25, 116, 220, 0.8);
 }
 
 @media (min-width: 1008px) {
@@ -129,26 +143,23 @@ main {
 main a,
 main a:link,
 main a:visited {
-  color: var(--color-brand-hc-dark);
+  color: var(--color-link);
   text-decoration: none;
   background: no-repeat left bottom
     linear-gradient(var(--color-brand-40), var(--color-brand-40));
   background-size: 100% 0.1875rem;
 }
 
 main a:focus,
-main a:hover {
-  color: var(--color-brand);
-}
-
+main a:hover,
 main a:active,
 main .active {
-  color: var(--color-brand);
+  color: var(--color-link-hover);
 }
 
 *:focus {
   outline: none;
-  box-shadow: 0 0 0px 3px rgba(25, 116, 220, 0.8);
+  box-shadow: var(--focus);
 }
 
 p {