From 517ba4b226ea03aa77997b78513862cc55b4fbb9 Mon Sep 17 00:00:00 2001 From: Pete Schuster Date: Tue, 26 Feb 2019 10:47:51 -0500 Subject: [PATCH] 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 --- README.md | 2 +- assets/sass/all-digital/base/_defaults.scss | 16 +--------------- assets/sass/all-digital/base/_typography.scss | 1 + .../sass/all-digital/components/_badge.scss | 12 +++++++++--- .../all-digital/components/_card-group.scss | 15 +++++++++++++-- assets/sass/all-digital/components/_card.scss | 5 ++--- assets/sass/all-digital/utils/_mixins.scss | 1 + .../all-digital/utils/mixins/_boxShadow.scss | 3 +++ .../all-digital/utils/mixins/_headings.scss | 19 ++++++++++--------- .../sass/all-digital/utils/themes/_dark.scss | 4 +--- .../sass/all-digital/utils/themes/_grey.scss | 2 +- .../all-digital/utils/themes/dark/_links.scss | 4 ++-- .../utils/variables/_headings.scss | 14 ++++++++------ package.json | 2 +- 14 files changed, 54 insertions(+), 46 deletions(-) create mode 100644 assets/sass/all-digital/utils/mixins/_boxShadow.scss diff --git a/README.md b/README.md index 3b7f22f..9f83238 100755 --- 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 index 0b11573..c8bf15f 100755 --- 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 index b3118bd..4797297 100755 --- 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 index 9ba2834..de0d68f 100755 --- 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 index 77e91a9..5b229e7 100755 --- 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 index 4ccf375..4378383 100755 --- 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 index 39092bb..84e1946 100755 --- 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 new file mode 100644 index 0000000..0bb46a0 --- /dev/null +++ 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 index 41d2d87..0961efb 100755 --- 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 index d655a25..f67550d 100755 --- 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 index 6533b00..0b2884e 100755 --- 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 index 4c14dbf..f3be202 100644 --- 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 index 433678c..027452a 100755 --- 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 index 7a00e2b..c6959ac 100755 --- 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",