release: realignment to UX (#3)

* merges ux-alignment branch commit a6f62ad Author: Schuster <[email protected]> Date: Tue Nov 7 11:51:09 2017 -0500 adds dark link variant commit 7fef28b Author: Schuster <[email protected]> Date: Tue Nov 7 11:47:23 2017 -0500 adds button primary on dark variant commit ddcc35d Author: Schuster <[email protected]> Date: Tue Nov 7 11:11:02 2017 -0500 updates heading line heights commit f33546f Author: Schuster <[email protected]> Date: Tue Nov 7 11:04:19 2017 -0500 updates badge commit 3fb6d7c Author: Schuster <[email protected]> Date: Tue Nov 7 11:04:14 2017 -0500 updates h5bp commit 81ddc06 Author: Schuster <[email protected]> Date: Tue Nov 7 10:23:03 2017 -0500 align secondary colors commit e4dbb36 Author: Schuster <[email protected]> Date: Tue Nov 7 10:03:58 2017 -0500 find and replace renamed greys commit 4d0273d Author: Schuster <[email protected]> Date: Tue Nov 7 10:00:47 2017 -0500 udpates commit 0c615c9 Author: Schuster <[email protected]> Date: Tue Nov 7 09:18:50 2017 -0500 updates greys * bump versions * adds back merge
Comcast · Nov 7, 2017 · de3cd0a · de3cd0a
1 parent 56fbefe
commit de3cd0a
Show file tree

Hide file tree

Showing 25 changed files with 148 additions and 134 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Welcome to the All Digital brought to you by Comcast.
 In your project:
 
 ```bash
-npm install git+https://github.com/Comcast/all-digital.git#v1.12.0
+npm install git+https://github.com/Comcast/all-digital.git#v2.0.0
 ```
 
 ## Usage

diff --git a/assets/sass/all-digital/base/_forms.scss b/assets/sass/all-digital/base/_forms.scss
@@ -149,7 +149,7 @@ textarea {
 }
 
 input::placeholder {
-  color: $cool-grey8;
+  color: $cool-grey11;
 }
 
 // override normalize

diff --git a/assets/sass/all-digital/base/_links.scss b/assets/sass/all-digital/base/_links.scss
@@ -5,21 +5,24 @@ a,
 
   &:hover {
     text-decoration: underline;
-    color: $link-hover-color;
+  }
+
+  &:active {
+    color: $link-active-color;
   }
 
   @include ui-dark {
     color: map-get($ui-dark-map, link-color);
 
-    &:hover {
-      color: map-get($ui-dark-map, link-hover-color);
+    &:active {
+      color: map-get($ui-dark-map, link-active-color);
     }
   }
 
   @include ui-blue {
     color: map-get($ui-blue-map, link-color);
 
-    &:hover {
+    &:active {
       color: map-get($ui-blue-map, link-color);
     }
   }

diff --git a/assets/sass/all-digital/base/_typography.scss b/assets/sass/all-digital/base/_typography.scss
@@ -43,7 +43,7 @@ address {
 
 pre {
   margin: 0 0 1.5em;
-  background: $grey-27;
+  background: $cool-grey4;
   padding: 0.5em;
   word-wrap: normal;
 }
@@ -56,7 +56,7 @@ blockquote {
   @include font-size(20);
   display: block;
   margin: 0 0 20px;
-  border-left: 3px solid $grey-9;
+  border-left: 3px solid $cool-grey4;
   padding-left: 10px;
   overflow: hidden;
 

diff --git a/assets/sass/all-digital/components/_badge.scss b/assets/sass/all-digital/components/_badge.scss
@@ -2,22 +2,22 @@
   @include heading5;
   display: inline-block;
   padding: calc-target(2, $heading5-size) calc-target(6, $heading5-size);
-  color: $cool-grey9;
+  color: $cool-grey12;
   border-radius: calc-target(3, $heading5-size);
   background-color: $cool-grey6;
 
-  + & {
+  + .badge {
     margin-left: 6px;
   }
 }
 
 .badge--success {
-  background-color: $green-lime;
-  color: $cool-grey10;
+  background-color: $minty;
+  color: $cool-grey14;
 }
 
 .badge--info {
-  background-color: $blue-jeans;
+  background-color: $blue-deep;
   color: $white;
 }
 

diff --git a/assets/sass/all-digital/components/_buttons.scss b/assets/sass/all-digital/components/_buttons.scss
@@ -124,7 +124,21 @@
   }
 
   @include ui-dark {
+    border-color: map-get($ui-dark-map, button-primary-border-color);
+    background-color: map-get($ui-dark-map, button-primary-background-color);
     color: map-get($ui-dark-map, button-primary-text-color);
+
+    &:hover,
+    &.pseudo-class-hover {
+      border-color: map-get($ui-dark-map, button-primary-border-color-hover);
+      background-color: map-get($ui-dark-map, button-primary-background-color-hover);
+    }
+
+    &:active,
+    &.pseudo-class-active {
+      border-color: map-get($ui-dark-map, button-primary-border-color-active);
+      background-color: map-get($ui-dark-map, button-primary-background-color-active);
+    }
   }
 
   @include ui-blue {

diff --git a/assets/sass/all-digital/components/_card.scss b/assets/sass/all-digital/components/_card.scss
@@ -229,6 +229,6 @@ button.card {
     margin: 0 2px;
     width: 6px;
     height: 6px;
-    background: $cool-grey7;
+    background: $cool-grey8;
   }
 }
diff --git a/assets/sass/all-digital/components/_form-boolean.scss b/assets/sass/all-digital/components/_form-boolean.scss
@@ -48,7 +48,7 @@
   input[type="checkbox"] ~ .form-control__label::before {
     border-radius: 3px;
     background-color: $cool-grey2;
-    border: 1px solid $cool-grey8;
+    border: 1px solid $cool-grey11;
   }
 
   input[type="checkbox"]:checked ~ .form-control__label::before {
@@ -60,7 +60,7 @@
   input[type="radio"] ~ .form-control__label::before {
     border-radius: 50%;
     background: $cool-grey2;
-    border: 1px solid $cool-grey8;
+    border: 1px solid $cool-grey11;
   }
 
   input[type="radio"]:checked ~ .form-control__label::before {
@@ -71,21 +71,21 @@
   @include ui-dark {
     input[type="checkbox"] ~ .form-control__label::before,
     input[type="radio"] ~ .form-control__label::before {
-      border-color: $cool-grey7;
+      border-color: $cool-grey8;
       background-color: transparent;
     }
 
     input[type="checkbox"]:checked ~ .form-control__label::before,
     input[type="radio"]:checked ~ .form-control__label::before {
-      border-color: $blue-jeans;
+      border-color: $blue-deep;
     }
 
     input[type="radio"]:checked ~ .form-control__label::before {
       background-color: $cool-grey2;
     }
 
     input[type="checkbox"]:checked ~ .form-control__label::before {
-      background-color: $blue-jeans;
+      background-color: $blue-deep;
     }
   }
 }
diff --git a/assets/sass/all-digital/components/_form-controls.scss b/assets/sass/all-digital/components/_form-controls.scss
@@ -25,7 +25,6 @@ $form-control: (
 .form-control__helper {
   margin: 0;
   padding-bottom: 5px;
-  color: $grey-36;
 
   input + & {
     padding-top: 5px;
@@ -40,7 +39,6 @@ $form-control: (
 
 .form-control__label-body {
   display: block;
-  color: $grey-72;
 
   &.heading5 {
     margin-bottom: 0;

diff --git a/assets/sass/all-digital/components/_form-toggle.scss b/assets/sass/all-digital/components/_form-toggle.scss
@@ -28,7 +28,7 @@
   &:before {
     width: 54px;
     height: 30px;
-    background-color: $cool-grey8;
+    background-color: $cool-grey11;
     border-radius: 30px;
     transition: background 0.4s;
     content: 'OFF ';

diff --git a/assets/sass/all-digital/components/_link-group.scss b/assets/sass/all-digital/components/_link-group.scss
@@ -9,7 +9,7 @@
   margin-bottom: 12px;
   margin-left: 10px;
   padding-left: 10px;
-  border-left: 1px solid $cool-grey7;
+  border-left: 1px solid $cool-grey8;
 
   &:first-child {
     margin-left: 0;

diff --git a/assets/sass/all-digital/components/_loading.scss b/assets/sass/all-digital/components/_loading.scss
@@ -19,19 +19,19 @@
 
 .loading__content {
   @include horizontal-vertical-align();
-  background-color: rgba($cool-grey7, 0.2);
+  background-color: rgba($cool-grey8, 0.2);
   border-radius: 50%;
   width: 100px;
   height: 100px;
   font-size: 0;
   text-align: center;
 
   .page-section & {
-    background-color: $cool-grey7;
+    background-color: $cool-grey8;
   }
 
   @include ui-blue {
-    background-color: rgba($cool-grey7, 0.2);
+    background-color: rgba($cool-grey8, 0.2);
   }
 }
 

diff --git a/assets/sass/all-digital/utils/_variables.scss b/assets/sass/all-digital/utils/_variables.scss
@@ -2,83 +2,68 @@
 // site specific colors and overrides
 // ==========================================================================
 
-// brand colors
-$blue-genie:        #2b9cd8;
-$blue-berry:        #1f6f9a;
-$blue-sky:          #0272b6;
-$blue-ocean:        #00619a;
-$blue-moon:         #015383;
-$blue-knight:       #051219;
-$blue-jeans:        #0b7dbf;
-
-$red-cherry:        #c90318;
-
-$yellow-banana:     #fece00;
-$yellow-pumpkin:    #ffa700;
-
-$green-lime:        #5bc942;
-$green-grass:       #19a926;
-$green-forest:      #007B76;
-
-// additional colors
-$minty:             #65d0a7;
-$lagoon:            #1bcfe1;
-$green-tea:         #1ee2c9;
-$smolder:           #1f232e;
-$urban:             #051219;
-$red-watermelon:    #fb543f;
-$turq:              #50c3d5;
-$haute:             #ff5a5a;
-$tangerine:         #ff9271;
-$berry:             #ff638d;
-$bramble:           #bc43d3;
-$reign:             #7155d3;
-
-// greys
-$white:             #fff;
-$grey-5:            #f2f2f2;
-$grey-9:            #e8e8e8;
-$grey-18:           #d1d1d1;
-$grey-27:           #bababa;
-$grey-36:           #a3a3a3;
-$grey-45:           #8c8c8c;
-$grey-54:           #757575;
-$grey-63:           #5e5e5e;
-$grey-72:           #474747;
-$grey-81:           #303030;
-$grey-90:           #191919;
-$black:             #000;
-
 // cool greys
+$white:             #fff;
 $cool-grey1:        #fbfcfc;
 $cool-grey2:        #f2f4f5;
 $cool-grey3:        #eef1f3;
 $cool-grey4:        #ebeef0;
 $cool-grey5:        #e6eaed;
 $cool-grey6:        #dde2e6;
-$cool-grey7:        #b1b9bf;
-$cool-grey8:        #6c747c;
-$cool-grey9:        #44484c;
-$cool-grey10:       #191919;
+$cool-grey7:        #c7cdd2;
+$cool-grey8:        #b1b9bf;
+$cool-grey9:        #9ba4aa;
+$cool-grey10:       #868f96;
+$cool-grey11:       #646a70;
+$cool-grey12:       #44484c;
+$cool-grey13:       #2a2c2d;
+$cool-grey14:       #191919;
+$black:             #000;
+
+// action blue
+$blue-sky:          #0272B6;
+$blue-deep:         #0B7DBB;
+$blue-genie:        #2B9CD8;
+$blue-ocean:        #00619A;
+$blue-moon:         #015383;
+
+// secondary colors
+$minty:             #65d0a7;
+$turq:              #50c3d5;
+$green-tea:         #1ee2c9;
+$lagoon:            #1bcfe1;
+$haute:             #D9003A;
+$bramble:           #AA2DC1;
+$reign:             #5736CB;
+$winkle:            #3475CA;
+$royal:             #2D42A0;
+$gunmetal:          #2F3845;
+$smolder:           #1f232e;
+$urban:             #051219;
+$red-watermelon:    #fb543f;
+$yellow-pumpkin:    #ffa700;
+$red-cherry:        #c90318;
 
 // ==========================================================================
 // functional color palette
 // ==========================================================================
 
 // general
-$text-color:        $cool-grey10;
+$text-color:        $cool-grey12;
 $link-color:        $blue-sky;
 $link-hover-color:  $blue-sky;
+$link-active-color: $blue-moon;
+
 $background-color:  $white;
 
 // color degrees
 $primary:           $blue-sky;
-$secondary:         $blue-berry;
+$secondary:         $blue-deep;
 
 // ui colors
-$ui-success:        $green-lime;
+$ui-success:        $minty;
 $ui-info:           $blue-sky;
-$ui-warning:        $yellow-banana;
+$ui-warning:        $yellow-pumpkin;
 $ui-danger:         $red-cherry;
 
 // ==========================================================================

diff --git a/assets/sass/all-digital/utils/themes/_dark.scss b/assets/sass/all-digital/utils/themes/_dark.scss
@@ -23,8 +23,10 @@ $ui-dark-map: (
 
 @import 'dark/buttons';
 @import 'dark/page-sections';
+@import 'dark/links';
 
 $ui-dark-map: map-merge($ui-dark-map, $headings);
 $ui-dark-map: map-merge($ui-dark-map, $forms);
 $ui-dark-map: map-merge($ui-dark-map, $buttons);
 $ui-dark-map: map-merge($ui-dark-map, $page-sections);
+$ui-dark-map: map-merge($ui-dark-map, $links);
diff --git a/assets/sass/all-digital/utils/themes/dark/_buttons.scss b/assets/sass/all-digital/utils/themes/dark/_buttons.scss
@@ -1,6 +1,17 @@
 $buttons: (
   button-text-color:                                  $white,
+
   button-secondary-border-color:                      transparent,
   button-secondary-text-color-hover:                  $cool-grey1,
-  button-secondary-text-color-active:                 $cool-grey2
+  button-secondary-text-color-active:                 $cool-grey2,
+
+  button-primary-border-color:                        $blue-deep,
+  button-primary-background-color:                    $blue-deep,
+  button-primary-text-color:                          $white,
+
+  button-primary-border-color-hover:                  $blue-ocean,
+  button-primary-background-color-hover:              $blue-ocean,
+
+  button-primary-border-color-active:                 $blue-moon,
+  button-primary-background-color-active:             $blue-moon
 );
diff --git a/assets/sass/all-digital/utils/themes/dark/_links.scss b/assets/sass/all-digital/utils/themes/dark/_links.scss
@@ -0,0 +1,4 @@
+$links: (
+  link-color:           $blue-genie,
+  link-active-color:    $blue-sky
+);
diff --git a/assets/sass/all-digital/utils/themes/grey/_card.scss b/assets/sass/all-digital/utils/themes/grey/_card.scss
@@ -1,8 +1,8 @@
 $card: (
-  card-text-color:                           $cool-grey10,
+  card-text-color:                           $cool-grey14,
   card-background-color:                     $white,
   card-border-color:                         $cool-grey5,
-  card-secondary-text-color:                 $cool-grey10,
+  card-secondary-text-color:                 $cool-grey14,
   card-secondary-background-color:           $cool-grey1,
   card-secondary-border-color:               $cool-grey5
 );
diff --git a/assets/sass/all-digital/utils/themes/grey/_forms.scss b/assets/sass/all-digital/utils/themes/grey/_forms.scss
@@ -1,5 +1,5 @@
 $forms: (
-  text-input-border-color: $cool-grey8,
+  text-input-border-color: $cool-grey11,
   text-input-background-color: rgba($white, 0.75),
   text-input-text-color: inherit
 );