424 default link style (#427)

* change color, font-weight of default (inline) link style
* deal with cascades
* remove link styles from style guide's main content so decanter's styles show
* tidy up button-big
* fill out alert color map

core/src/scss/components/alert/_alert--error.scss

@@ -5,13 +5,14 @@
   background-color: color(error, $alert-colors);
   background-image: url("#{$image-path}/alert-error.png");
   background-image: url("#{$image-path}/alert-error.svg");
-  color: $color-white;
+  color: color(light-text, $alert-colors);
 
   a {
-    color: $color-white;
+    color: color(light-text, $alert-colors);
 
-    &:hover {
-      color: $color-cloud;
+    &:hover,
+    &:focus {
+      color: color(light-hover, $alert-colors);
     }
   }
 }

core/src/scss/components/alert/_alert--info.scss

@@ -5,13 +5,14 @@
   background-color: color(info, $alert-colors);
   background-image: url("#{$image-path}/alert-info.png");
   background-image: url("#{$image-path}/alert-info.svg");
-  color: $color-white;
+  color: color(light-text, $alert-colors);
 
   a {
-    color: $color-white;
+    color: color(light-text, $alert-colors);
 
-    &:hover {
-      color: $color-cloud;
+    &:hover,
+    &:focus {
+      color: color(light-hover, $alert-colors);
     }
   }
 }

core/src/scss/components/alert/_alert--success.scss

@@ -5,13 +5,14 @@
   background-color: color(success, $alert-colors);
   background-image: url("#{$image-path}/alert-success.png");
   background-image: url("#{$image-path}/alert-success.svg");
-  color: $color-white;
+  color: color(light-text, $alert-colors);
 
   a {
-    color: $color-white;
+    color: color(light-text, $alert-colors);
 
-    &:hover {
-      color: $color-cloud;
+    &:hover,
+    &:focus {
+      color: color(light-hover, $alert-colors);
     }
   }
 }

core/src/scss/components/alert/_alert--warning.scss

@@ -7,10 +7,6 @@
   background-image: url("#{$image-path}/alert-warning.svg");
 
   a {
-    color: $color-cardinal-red;
-
-    &:hover {
-      color: $color-black;
-    }
+    color: color(warning-link, $alert-colors);
   }
 }

core/src/scss/components/alert/_alert.scss

@@ -18,11 +18,11 @@
 //
 .su-alert {
   @include padding(2rem);
-  background-color: $color-fog;
+  background-color: color(default, $alert-colors);
   background-position: 1rem center;
   background-repeat: no-repeat;
   background-size: 4rem;
-  color: $color-black;
+  color: color(dark-text, $alert-colors);
 
   @include grid-media('md') {
     background-size: 5.2rem;
@@ -53,9 +53,5 @@
     .su-alert__text {
       @include margin(0 null);
     }
-
-    a {
-      text-decoration: underline;
-    }
   }
 }

core/src/scss/components/global-footer/_global-footer.scss

@@ -19,8 +19,10 @@
   a {
     color: rgba($color-white, 0.9);
     text-decoration: none;
+    font-weight: 400;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: color(link--reverse);
       text-decoration: underline;
     }
@@ -136,6 +138,10 @@
     font-size: 1.5rem;
     font-weight: 300;
 
+    a {
+      font-weight: 300;
+    }
+
     @include grid-media-only('xs') {
       @include padding(null null null 2rem);
       font-weight: 400;

core/src/scss/components/link/_link.scss

@@ -3,7 +3,8 @@
 //
 // Link
 //
-// A simple building block element with many variants.
+// Link styling, with many variants. **Default styling** refers to inline
+// links, i.e. links embedded within body text.
 //
 // .su-link--more - More info link
 // .su-link--external - Link to external site

core/src/scss/components/lockup/_lockup.scss

@@ -43,6 +43,7 @@
 
 .su-lockup {
   a {
+    font-weight: $font-regular;
     text-decoration: none;
   }
 }

core/src/scss/components/main-nav/_main-nav.scss

@@ -321,7 +321,8 @@
       }
     }
 
-    //On desktop, if mouse user hovers over a parent menu item, submenu is expanded
+    // On desktop, if mouse user hovers over a parent menu item,
+    // submenu is expanded
     @include grid-media('lg') {
       li:hover > ul {
         display: flex;

core/src/scss/utilities/functions/_color.scss

@@ -3,11 +3,13 @@
 //
 // color($color, $colormap: $core-colors)
 //
-// Return a color from a color map. If only a color is specified, then it returns a color from $core-colors.
-// If a color and a color map are specified, then it returns a color from the particular color map.
+// Return a color from a color map. If only a color is specified, then it
+// returns a color from $core-colors. If a color and a color map are specified,
+// then it returns a color from the particular color map.
 //
-// $color - String - Color variable name from a color map, e.g., brand, link--hover
-// $colormap - Color palette in the form of a SASS map, e.g., $alert-colors, $main-nav-dark-colors.
+// $color - String - Color variable name from a color map, e.g., brand,
+// link-inline--hover $colormap - Color palette in the form of a SASS map,
+// e.g., $alert-colors, $main-nav-dark-colors.
 // Default is $core-colors.
 //
 // Style guide: Functions.Color

core/src/scss/utilities/mixins/button/_button-big.scss

@@ -4,24 +4,14 @@
 // @button-big
 //
 // Big button styling.
+// Same as primary but with larger font-size, more padding.
 //
 // Style guide: Mixins.Button.button-big
 //
-@mixin button-big {
-  @extend %button-base;
-  @include padding(1.5rem 3rem 1.8rem);
-  @include type-c;
-
-  background-color: color(brand--bright);
-  color: color(link--reverse);
 
-  &:hover {
-    background-color: color(bg--reverse);
-    color: color(link--reverse);
-  }
+@mixin button-big {
+  @include button-primary;
 
-  &:focus {
-    box-shadow: $focus-shadow;
-    background-color: color(bg--reverse);
-  }
+  @include type-c;
+  @include padding(1.5rem 3rem 1.8rem);
 }