From 66a880d6ea0be33d29e81edfbef34acda37f4127 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Fri, 5 Apr 2024 18:49:10 -0400 Subject: [PATCH] CSR-2045 update imagery, colors, typography to new Brand Guidelines. --- public/index.html | 2 +- .../funnel-header/funnel-header.vue | 3 +- src/styles/common-typography-styles.scss | 71 +++++++++++++++++++ src/styles/ux-variables.scss | 6 +- 4 files changed, 77 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index b8a80e384..edf50a0f4 100644 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue index 3b412ee03..8de05c3c1 100644 --- a/src/fmg-components/funnel-header/funnel-header.vue +++ b/src/fmg-components/funnel-header/funnel-header.vue @@ -94,6 +94,7 @@ export default { } .logo-image { - max-width: 116px; + max-width: 114px; + height: auto; } diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss index 72b2e5875..b15c07a88 100644 --- a/src/styles/common-typography-styles.scss +++ b/src/styles/common-typography-styles.scss @@ -13,26 +13,31 @@ h1, line-height: 1.325; font-weight: 300; } + h2, .h2 { line-height: 1.325; font-weight: 300; } + h3, .h3 { line-height: 1.375; font-weight: 300; } + h4, .h4 { line-height: 1.6; font-weight: 300; } + h5, .h5 { line-height: 1.325; font-weight: 400; } + h6, .h6 { line-height: 1.7; @@ -70,3 +75,69 @@ caption, line-height: 1.4; font-weight: 500; } + +// Poppins styles from Google Fonts + +// Regular styles + +.poppins-light { + font-family: "Poppins", sans-serif; + font-weight: 300; + font-style: normal; +} + +.poppins-regular { + font-family: "Poppins", sans-serif; + font-weight: 400; + font-style: normal; +} + +.poppins-medium { + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: normal; +} + +.poppins-semibold { + font-family: "Poppins", sans-serif; + font-weight: 600; + font-style: normal; +} + +.poppins-bold { + font-family: "Poppins", sans-serif; + font-weight: 700; + font-style: normal; +} + +// Italic styles + +.poppins-light-italic { + font-family: "Poppins", sans-serif; + font-weight: 300; + font-style: italic; +} + +.poppins-regular-italic { + font-family: "Poppins", sans-serif; + font-weight: 400; + font-style: italic; +} + +.poppins-medium-italic { + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: italic; +} + +.poppins-semibold-italic { + font-family: "Poppins", sans-serif; + font-weight: 600; + font-style: italic; +} + +.poppins-bold-italic { + font-family: "Poppins", sans-serif; + font-weight: 700; + font-style: italic; +} diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 2d26125aa..57d8b56f5 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -10,7 +10,7 @@ $blue-200: #c1dfee; $blue-300: #9fcee6; $blue-400: #69adcf; // Used in theme $blue-500: #3b8fb8; -$blue: #1574a1; // Default Blue +$blue: #0070D1; // Default Blue $blue-700: #06577c; $blue-800: #003d58; $blue-900: #002433; // Used in theme @@ -20,7 +20,7 @@ $red-100: #ffe6e4; $red-200: #fcbfbb; $red-300: #f89892; $red-400: #e65c53; -$red: #d4281c; // Default Red +$red: #DB0020; // Default Red $red-600: #ac160b; $red-700: #840900; $red-800: #5b0600; @@ -115,7 +115,7 @@ $theme-colors: ( $body-color: $gray-600; //Fonts -$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif; +$font-family-sans-serif: Poppins, Arial, Helvetica, sans-serif; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; // stylelint-enable value-keyword-case