updates to latest branding guidelines (#20)

* updates cards and bgs * updates headings * update link colors * unlink badge from heading5 * one more * use mixin * more * update here * updates from ux * fix buttons * more * updates package and docs
Comcast · Feb 26, 2019 · 517ba4b · 517ba4b
1 parent a2dccf7
commit 517ba4b
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 46 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#v2.6.0
+npm install git+https://github.com/Comcast/all-digital.git#v3.0.0
 ```
 
 ## Usage

diff --git a/assets/sass/all-digital/base/_defaults.scss b/assets/sass/all-digital/base/_defaults.scss
@@ -24,26 +24,12 @@ body {
 
 .ui-blue {
   background-color: map-get($ui-blue-map, background-color);
-  background-size: cover;
   color: map-get($ui-blue-map, text-color);
-
-  @include respond-to(700) {
-    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2255%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22a%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22550%22%20y1%3D%224%22%20x2%3D%22550%22%20y2%3D%22343%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230066A0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23076699%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23003A74%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23a)%22%20d%3D%22M0%200h1100v343H0z%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%3E%3Cg%20fill%3D%22%230E74A0%22%3E%3Cellipse%20cx%3D%2272%22%20cy%3D%22121%22%20rx%3D%2295%22%20ry%3D%2249%22%2F%3E%3Cellipse%20cx%3D%22781%22%20cy%3D%22171%22%20rx%3D%22132%22%20ry%3D%22166%22%2F%3E%3Cellipse%20cx%3D%221041%22%20cy%3D%22231%22%20rx%3D%22135%22%20ry%3D%22160%22%2F%3E%3Cellipse%20cx%3D%22541%22%20cy%3D%22195%22%20rx%3D%22132%22%20ry%3D%22125%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230057A0%22%3E%3Cellipse%20cx%3D%22383%22%20cy%3D%2223%22%20rx%3D%22205%22%20ry%3D%22136%22%2F%3E%3Cellipse%20cx%3D%22278%22%20cy%3D%22270%22%20rx%3D%2283%22%20ry%3D%2232%22%2F%3E%3Cellipse%20cx%3D%221083%22%20cy%3D%2223%22%20rx%3D%22117%22%20ry%3D%2258%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
-  }
 }
 
 .ui-dark {
-  background-image: radial-gradient(at 20% 25%, rgba(46, 160, 221, 0.16) 0, rgba(46, 160, 221, 0) 100%),
-    radial-gradient(at 60% 50%, rgba(46, 160, 221, 0.12) 0, rgba(46, 160, 221, 0) 100%),
-    linear-gradient(to bottom, rgba(46, 160, 221, 0.05) 0, rgba(46, 160, 221, 0) 100%);
   background-color: map-get($ui-dark-map, background-color);
-  background-size: 160% 768px, 100% 768px, 100% 768px;
-  background-repeat: no-repeat;
   color: map-get($ui-dark-map, text-color);
-
-  @include respond-to(768) {
-    background-size: 160% 100%, 100% 100%, 100% 100%;
-  }
 }
 
 .ui-grey {
@@ -52,6 +38,6 @@ body {
 }
 
 .ui-light {
-  background: $background-color;
+  background-color: $background-color;
   color: $text-color;
 }
diff --git a/assets/sass/all-digital/base/_typography.scss b/assets/sass/all-digital/base/_typography.scss
@@ -44,6 +44,7 @@ address {
 pre {
   margin: 0 0 1.5em;
   background: $cool-grey4;
+  color: $black;
   padding: 0.5em;
   word-wrap: normal;
 }

diff --git a/assets/sass/all-digital/components/_badge.scss b/assets/sass/all-digital/components/_badge.scss
@@ -1,10 +1,16 @@
+$badge-font-size: 12;
+
 .badge {
-  @include heading5;
+  @include font-size($badge-font-size);
+  margin-bottom: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
   display: inline-block;
-  padding: calc-target(2, $heading5-size) calc-target(6, $heading5-size);
+  padding: calc-target(2, $badge-font-size) calc-target(6, $badge-font-size);
   color: $cool-grey12;
-  border-radius: calc-target(3, $heading5-size);
+  border-radius: calc-target(3, $badge-font-size);
   background-color: $cool-grey6;
+  letter-spacing: .5px;
 
   + .badge {
     margin-left: 6px;

diff --git a/assets/sass/all-digital/components/_card-group.scss b/assets/sass/all-digital/components/_card-group.scss
@@ -1,12 +1,20 @@
 .card-group {
+  @include boxShadow;
+  margin: 0 0 12px #{-($wrapper-gutters + 1px)};
+  width: calc(100% + #{($wrapper-gutters * 2 + 2px)});
   margin-bottom: 24px;
+
+  @include respond-to(768) {
+    width: auto;
+    margin-left: 0;
+  }
 }
 
 .card-group__item {
-  margin-top: -1px;
+  border-top: 1px solid $card-border-color;
 
   &:first-child {
-    margin-top: 0;
+    border-top: 0;
 
     > .card {
       border-top-left-radius: 3px;
@@ -22,7 +30,10 @@
   }
 
   > .card {
+    width: 100%;
+    margin-left: 0;
     margin-bottom: 0;
     border-radius: 0;
+    box-shadow: none;
   }
 }
diff --git a/assets/sass/all-digital/components/_card.scss b/assets/sass/all-digital/components/_card.scss
@@ -1,15 +1,16 @@
 .card {
+  @include boxShadow;
   display: block;
   margin: 0 0 12px #{-($wrapper-gutters + 1px)};
   width: calc(100% + #{($wrapper-gutters * 2 + 2px)});
   padding: 18px 12px;
-  border: 1px solid $card-border-color;
   background: $card-background-color;
   position: relative;
   border-radius: 3px;
   justify-content: space-between;
   align-items: center;
   flex-wrap: nowrap;
+  border: 1px solid transparent;
 
   @include respond-to(768) {
     padding-right: 24px;
@@ -20,12 +21,10 @@
 
   @include ui-dark {
     background: rgba(255, 255, 255, 0.1);
-    border-color: transparent;
   }
 
   @include ui-blue {
     background: rgba(255, 255, 255, 0.1);
-    border-color: transparent;
   }
 }
 

diff --git a/assets/sass/all-digital/utils/_mixins.scss b/assets/sass/all-digital/utils/_mixins.scss
@@ -15,3 +15,4 @@
 @import 'mixins/clearfix';
 @import 'mixins/transform';
 @import 'mixins/theme';
+@import 'mixins/boxShadow';
diff --git a/assets/sass/all-digital/utils/mixins/_boxShadow.scss b/assets/sass/all-digital/utils/mixins/_boxShadow.scss
@@ -0,0 +1,3 @@
+@mixin boxShadow {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
+}
diff --git a/assets/sass/all-digital/utils/mixins/_headings.scss b/assets/sass/all-digital/utils/mixins/_headings.scss
@@ -3,7 +3,7 @@
   margin: 0 0 12px;
   line-height: calc-target($display1-height, $display1-size, 1);
   color: $display1-color;
-  font-weight: 100;
+  font-weight: 700;
   text-transform: none;
   font-family: $primary-font-stack;
   letter-spacing: 0.2px;
@@ -35,7 +35,7 @@
   margin: 0 0 12px;
   line-height: calc-target($display2-height, $display2-size, 1);
   color: $display2-color;
-  font-weight: 100;
+  font-weight: 700;
   text-transform: none;
   font-family: $primary-font-stack;
   letter-spacing: 0.2px;
@@ -67,7 +67,7 @@
   margin: 0 0 12px;
   line-height: calc-target($display3-height, $display3-size, 1);
   color: $display3-color;
-  font-weight: 100;
+  font-weight: 700;
   text-transform: none;
   font-family: $primary-font-stack;
   letter-spacing: 0.2px;
@@ -99,7 +99,7 @@
   margin: 0 0 12px;
   line-height: calc-target($heading1-height, $heading1-size, 1);
   color: $heading1-color;
-  font-weight: 100;
+  font-weight: 500;
   text-transform: none;
   font-family: $primary-font-stack;
   letter-spacing: 0.2px;
@@ -131,7 +131,7 @@
   margin: 0 0 12px;
   line-height: calc-target($heading2-height, $heading2-size, 1);
   color: $heading2-color;
-  font-weight: 200;
+  font-weight: 500;
   text-transform: none;
   font-family: $primary-font-stack;
   letter-spacing: 0.2px;
@@ -163,7 +163,7 @@
   margin: 0 0 12px;
   line-height: calc-target($heading3-height, $heading3-size, 1);
   color: $heading3-color;
-  font-weight: 200;
+  font-weight: 500;
   text-transform: none;
   font-family: $primary-font-stack;
   letter-spacing: 0.2px;
@@ -203,6 +203,7 @@
   @include respond-to(1024) {
     @include font-size($body1-size-large);
     line-height: calc-target($body1-height-large, $body1-size-large, 1);
+    color: $body1-color-large;
   }
 
   @include ui-dark {
@@ -311,7 +312,7 @@
   font-weight: 700;
   text-transform: uppercase;
   font-family: $primary-font-stack;
-  letter-spacing: 0.5px;
+  letter-spacing: 2px;
 
   @include ui-dark {
     color: map-get($ui-dark-map, heading4-color);
@@ -335,10 +336,10 @@
   margin: 0 0 12px;
   line-height: calc-target($heading5-height, $heading5-size, 1);
   color: $heading5-color;
-  font-weight: 500;
+  font-weight: 700;
   text-transform: uppercase;
   font-family: $primary-font-stack;
-  letter-spacing: 0.5px;
+  letter-spacing: 2px;
 
   @include ui-dark {
     color: map-get($ui-dark-map, heading5-color);

diff --git a/assets/sass/all-digital/utils/themes/_dark.scss b/assets/sass/all-digital/utils/themes/_dark.scss
@@ -5,9 +5,7 @@
 // general
 $ui-dark-map: (
   text-color:                  $white,
-  background-color:            #030b0f,
-  link-color:                  $blue-genie,
-  link-hover-color:            $blue-genie
+  background-color:            $gunmetal
 );
 
 // ==========================================================================

diff --git a/assets/sass/all-digital/utils/themes/_grey.scss b/assets/sass/all-digital/utils/themes/_grey.scss
@@ -5,7 +5,7 @@
 // general
 $ui-grey-map: (
   text-color:                   $text-color,
-  background-color:             $cool-grey3
+  background-color:             $cool-grey2
 );
 
 // ==========================================================================

diff --git a/assets/sass/all-digital/utils/themes/dark/_links.scss b/assets/sass/all-digital/utils/themes/dark/_links.scss
@@ -1,4 +1,4 @@
 $links: (
-  link-color:           $blue-genie,
-  link-active-color:    $blue-sky
+  link-color:           $white,
+  link-active-color:    $white
 );
diff --git a/assets/sass/all-digital/utils/variables/_headings.scss b/assets/sass/all-digital/utils/variables/_headings.scss
@@ -3,13 +3,13 @@ $display2-color:  $cool-grey14;
 $display3-color:  $cool-grey14;
 $heading1-color:  $cool-grey14;
 $heading2-color:  $cool-grey14;
-$heading3-color:  $cool-grey14;
+$heading3-color:  $cool-grey12;
 $body1-color:     $cool-grey14;
 $body2-color:     $cool-grey12;
 $body3-color:     $cool-grey12;
 $body4-color:     $cool-grey14;
-$heading4-color:  $cool-grey14;
-$heading5-color:  $cool-grey14;
+$heading4-color:  $cool-grey11;
+$heading5-color:  $cool-grey11;
 
 $display1-size:   50;
 $display2-size:   40;
@@ -25,9 +25,9 @@ $heading4-size:   15;
 $heading5-size:   12;
 
 $display1-height:   75;
-$display2-height:   55;
-$display3-height:   40;
-$heading1-height:   32;
+$display2-height:   60;
+$display3-height:   45;
+$heading1-height:   36;
 $heading2-height:   30;
 $heading3-height:   27;
 $body1-height:      24;
@@ -54,3 +54,5 @@ $heading1-height-large:   40;
 $heading2-height-large:   36;
 $heading3-height-large:   30;
 $body1-height-large:      27;
+
+$body1-color-large:      $cool-grey12;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "all-digital",
-  "version": "2.7.0",
+  "version": "3.0.0",
   "description": "CSS for All Digital",
   "repository": {
     "type": "git",