Set up color maps for Decanter and refactor main nav colors to refer …

…to color maps (#420) * WIP color maps with function to retrieve color; refactor brand bar and alerts to use color map and function; start refactoring main nav colors * WIP refactor main nav colors * WIP refactor main nav colors * Add warnings to color function * finish up main nav default style color refactor * Finish up refactoring main-nav--dark colors * Fix main-nav--light variant, when mobile search is present the background color is now white; beginning color map refactoring * WIP main-nav--light color refactor * WIP main-nav--light refactoring; change link-border to border * Finish refactoring main-nav--light colors to use color map * Refactor to replace .su-main-nav.su-main-nav--dark selectors with just .su-main-nav--dark * fixup su-main-nav--dark * Continue cleanup of main nav styles * Main-nav code cleanup remove redundancy * WIP fixup * bg color transition fixup * main-nav--light mobile minus sign fixup * have colors in brand bar, global footer, logo, button primary to refer to color map * main-nav--light fixup * main-nav--light fixup * doc, styleguide and button/link colors * fixup * Doc * cc indentation fix * fixup * Change all reference to $color-dark-red in $main-nav-colors to $color-bright-red * Remove nesting of main nav color maps and $theme in function @color * Add a local variable $_color-map for variants that gets defined at the top of each variant's scss file * Fix styleguide comments * Namespace color map variable * Change @warn to @error in function @color
SU-SWS · Jun 11, 2019 · 0f7a682 · 0f7a682
1 parent d0e6561
commit 0f7a682
Show file tree

Hide file tree

Showing 27 changed files with 930 additions and 603 deletions.
diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
diff --git a/core/src/scss/components/alert/_alert--error.scss b/core/src/scss/components/alert/_alert--error.scss
@@ -2,7 +2,7 @@
 
 // Error alert.
 .su-alert--error {
-  background-color: map-get($alert-colors, 'error');
+  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;

diff --git a/core/src/scss/components/alert/_alert--info.scss b/core/src/scss/components/alert/_alert--info.scss
@@ -2,7 +2,7 @@
 
 // Info alert.
 .su-alert--info {
-  background-color: map-get($alert-colors, 'info');
+  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;

diff --git a/core/src/scss/components/alert/_alert--success.scss b/core/src/scss/components/alert/_alert--success.scss
@@ -2,7 +2,7 @@
 
 // Success alert.
 .su-alert--success {
-  background-color: map-get($alert-colors, 'success');
+  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;

diff --git a/core/src/scss/components/alert/_alert--warning.scss b/core/src/scss/components/alert/_alert--warning.scss
@@ -2,7 +2,7 @@
 
 // Warning alert.
 .su-alert--warning {
-  background-color: map-get($alert-colors, 'warning');
+  background-color: color(warning, $alert-colors);
   background-image: url("#{$image-path}/alert-warning.png");
   background-image: url("#{$image-path}/alert-warning.svg");
 

diff --git a/core/src/scss/components/brand-bar/_brand-bar--bright.scss b/core/src/scss/components/brand-bar/_brand-bar--bright.scss
@@ -2,5 +2,5 @@
 
 // Brand bar with white wordmark on bright red background.
 .su-brand-bar--bright {
-  background-color: $color-bright-red;
+  background-color: color(brand--bright);
 }
diff --git a/core/src/scss/components/brand-bar/_brand-bar--dark.scss b/core/src/scss/components/brand-bar/_brand-bar--dark.scss
@@ -2,5 +2,5 @@
 
 // Brand bar with white wordmark on dark grey background.
 .su-brand-bar--dark {
-  background-color: $color-black;
+  background-color: color(bg--reverse);
 }
diff --git a/core/src/scss/components/brand-bar/_brand-bar--white.scss b/core/src/scss/components/brand-bar/_brand-bar--white.scss
@@ -2,10 +2,10 @@
 
 // Brand bar with cardinal red wordmark on white background.
 .su-brand-bar--white {
-  background-color: $color-white;
+  background-color: color(bg);
 
   .su-brand-bar__logo {
     @include font-smoothing(auto);
-    color: $color-cardinal-red;
+    color: color(brand);
   }
 }
diff --git a/core/src/scss/components/brand-bar/_brand-bar.scss b/core/src/scss/components/brand-bar/_brand-bar.scss
@@ -16,7 +16,7 @@
 .su-brand-bar {
   width: 100%;
   height: 30px;
-  background-color: $color-cardinal-red;
+  background-color: color(brand);
 }
 
 .su-brand-bar__container {

diff --git a/core/src/scss/components/global-footer/_global-footer.scss b/core/src/scss/components/global-footer/_global-footer.scss
@@ -13,15 +13,15 @@
 // Global styles for the global footer.
 .su-global-footer {
   @include modular-spacing('padding', 1 null);
-  background-color: $color-cardinal-red;
-  color: $color-white;
+  background-color: color(brand);
+  color: color(link--reverse);
 
   a {
     color: rgba($color-white, 0.9);
     text-decoration: none;
 
     &:hover {
-      color: $color-white;
+      color: color(link--reverse);
       text-decoration: underline;
     }
   }
@@ -42,7 +42,7 @@
 
     a {
       @include logo;
-      color: $color-white;
+      color: color(link--reverse);
       font-size: 3.4rem;
 
       @include grid-media-only('xs') {

diff --git a/core/src/scss/components/logo/_logo.scss b/core/src/scss/components/logo/_logo.scss
@@ -12,11 +12,11 @@
 //
 .su-logo {
   @include logo;
-  color: $color-cardinal-red;
+  color: color(brand);
 
   &:hover,
   &:active,
   &:focus {
-    color: $color-cardinal-red;
+    color: color(brand);
   }
 }
diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss
@@ -1,128 +1,139 @@
 @charset "UTF-8";
 
-.su-main-nav {
-  &.su-main-nav--dark {
-    @include grid-media-max('md') {
-      .su-main-nav__toggle {
-        color: $color-white;
-
-        &:hover,
-        &:focus {
-          &::before {
-            background-color: $color-white;
-          }
+.su-main-nav--dark {
+  $_su-main-nav-color-map: $main-nav-dark-colors;
+
+  @include grid-media-max('md') {
+    .su-main-nav__toggle {
+      color: color(link, $_su-main-nav-color-map);
+
+      &:hover,
+      &:focus {
+        &::before {
+          background-color: color(border--hover, $_su-main-nav-color-map);
         }
+      }
 
-        &:active {
-          &::before {
-            background-color: $color-vivid-red;
-          }
+      &:active {
+        &::before {
+          background-color: color(border--active, $_su-main-nav-color-map);
         }
+      }
 
-        &::after {
-          background: url("#{$image-path}/hamburger-white.svg") no-repeat 3px 0;
+      &::after {
+        background: url("#{$image-path}/hamburger-white.svg") no-repeat 3px 0;
+      }
+
+      &[aria-expanded="true"] {
+        &::before {
+          background-color: color(border--expanded, $_su-main-nav-color-map);
         }
 
-        &[aria-expanded="true"] {
-          &::before {
-            background-color: $color-white;
-          }
+        &:hover::before {
+          background-color: color(border--expanded-hover, $_su-main-nav-color-map);
+        }
 
-          &::after {
-            background: url("#{$image-path}/close-white.svg") no-repeat 3px 0;
-            background-size: 16px 16px;
-          }
+        &:active::before {
+          background-color: color(border--expanded-active, $_su-main-nav-color-map);
+        }
 
-          &:hover::before {
-            background-color: $color-vivid-red;
-          }
+        &::after {
+          background: url("#{$image-path}/close-white.svg") no-repeat 3px 0;
+          background-size: 16px 16px;
         }
       }
     }
+  }
 
-    // desktop first level menu style override
+  // desktop first level menu style override
+  @include grid-media('lg') {
     > ul {
-      @include grid-media('lg') {
-        > li {
-          > a {
-            color: $color-white;
-
-            &:hover,
-            &:focus {
-              color: $color-white;
-
-              &::before {
-                background-color: $color-white;
-              }
-            }
+      > li {
+        > a {
+          color: color(link, $_su-main-nav-color-map);
 
-            &:active {
-              color: $color-white;
+          &:hover,
+          &:focus {
+            color: color(link--hover, $_su-main-nav-color-map);
 
-              &::before {
-                background-color: $color-white;
-              }
+            &::before {
+              background-color: color(border--hover, $_su-main-nav-color-map);
             }
+          }
 
-            &[aria-expanded="true"] {
-              color: $color-white;
+          &:active {
+            color: color(link--active, $_su-main-nav-color-map);
 
-              &::before {
-                background-color: $color-white;
-              }
+            &::before {
+              background-color: color(border--active, $_su-main-nav-color-map);
+            }
+          }
 
-              &:hover {
-                color: $color-white;
+          &[aria-expanded="true"] {
+            color: color(link--expanded, $_su-main-nav-color-map);
 
-                &::before {
-                  background-color: $color-vivid-red;
-                }
-              }
+            &::before {
+              background-color: color(border--expanded, $_su-main-nav-color-map);
             }
-          }
 
-          &.su-main-nav__item--parent {
-            > a::after {
-              background: url("#{$image-path}/caret-down-white.svg") no-repeat 0 0;
-              background-size: 100%;
+            &:hover {
+              color: color(link--hover, $_su-main-nav-color-map);
             }
           }
+        }
+      }
 
-          &.su-main-nav__item--current {
-            > a {
-              color: $color-white;
+      > .su-main-nav__item--parent {
+        &,
+        &.su-main-nav__item--expanded {
+          > a::after {
+            background: url("#{$image-path}/caret-down-white.svg") no-repeat 0 0;
+            background-size: 100%;
+          }
+        }
+      }
+
+      > .su-main-nav__item--current {
+        > a {
+          color: color(link--active, $_su-main-nav-color-map);
 
-              &::before {
-                background-color: $color-vivid-red;
-              }
+          &::before {
+            background-color: color(border--active, $_su-main-nav-color-map);
+          }
 
-              &:hover,
-              &:focus {
-                color: $color-white;
+          &:hover,
+          &:focus {
+            color: color(link--active-hover, $_su-main-nav-color-map);
 
-                &::before {
-                  background-color: $color-white;
-                }
-              }
+            &::before {
+              background-color: color(border--active-hover, $_su-main-nav-color-map);
             }
+          }
 
-            &.su-main-nav__item--expanded {
-              > a:focus {
-                color: $color-white;
+          &:active::before {
+            background-color: color(border--active, $_su-main-nav-color-map);
+          }
+        }
+      }
 
-                &::before {
-                  background-color: $color-white;
-                }
-              }
+      > .su-main-nav__item--expanded {
+        &,
+        &.su-main-nav__item--current {
+          > a,
+          > a:focus {
+            &::before {
+              background-color: color(border--expanded, $_su-main-nav-color-map);
+            }
+          }
+        }
 
-              > a[aria-expanded="true"]:hover {
-                color: $color-white;
+        > a[aria-expanded="true"] {
+          &:hover::before {
+            background-color: color(border--expanded-hover, $_su-main-nav-color-map);
+          }
 
-                &::before {
-                  background-color: $color-vivid-red;
-                }
-              }
-            }
+          &:active::before {
+            background-color: color(border--expanded-active, $_su-main-nav-color-map);
           }
         }
       }