jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-2045 update imagery, colors, typography to new Brand Guidelines.

Browse source
This commit is contained in:
Bryan Mauger 2024-04-05 18:49:10 -04:00
parent 8c868a11df
commit 66a880d6ea
4 changed files with 77 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -11,7 +11,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

3
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -94,6 +94,7 @@ export default {
} }
.logo-image { .logo-image {
max-width: 116px; max-width: 114px;
height: auto;
} }
</style> </style>

71
src/styles/common-typography-styles.scss
View file

@ -13,26 +13,31 @@ h1,
line-height: 1.325; line-height: 1.325;
font-weight: 300; font-weight: 300;
} }
h2, h2,
.h2 { .h2 {
line-height: 1.325; line-height: 1.325;
font-weight: 300; font-weight: 300;
} }
h3, h3,
.h3 { .h3 {
line-height: 1.375; line-height: 1.375;
font-weight: 300; font-weight: 300;
} }
h4, h4,
.h4 { .h4 {
line-height: 1.6; line-height: 1.6;
font-weight: 300; font-weight: 300;
} }
h5, h5,
.h5 { .h5 {
line-height: 1.325; line-height: 1.325;
font-weight: 400; font-weight: 400;
} }
h6, h6,
.h6 { .h6 {
line-height: 1.7; line-height: 1.7;
@ -70,3 +75,69 @@ caption,
line-height: 1.4; line-height: 1.4;
font-weight: 500; 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;
}

6
src/styles/ux-variables.scss
View file

@ -10,7 +10,7 @@ $blue-200: #c1dfee;
$blue-300: #9fcee6; $blue-300: #9fcee6;
$blue-400: #69adcf; // Used in theme $blue-400: #69adcf; // Used in theme
$blue-500: #3b8fb8; $blue-500: #3b8fb8;
$blue: #1574a1; // Default Blue $blue: #0070D1; // Default Blue
$blue-700: #06577c; $blue-700: #06577c;
$blue-800: #003d58; $blue-800: #003d58;
$blue-900: #002433; // Used in theme $blue-900: #002433; // Used in theme
@ -20,7 +20,7 @@ $red-100: #ffe6e4;
$red-200: #fcbfbb; $red-200: #fcbfbb;
$red-300: #f89892; $red-300: #f89892;
$red-400: #e65c53; $red-400: #e65c53;
$red: #d4281c; // Default Red $red: #DB0020; // Default Red
$red-600: #ac160b; $red-600: #ac160b;
$red-700: #840900; $red-700: #840900;
$red-800: #5b0600; $red-800: #5b0600;
@ -115,7 +115,7 @@ $theme-colors: (
$body-color: $gray-600; $body-color: $gray-600;
//Fonts //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", $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace; monospace;
// stylelint-enable value-keyword-case // stylelint-enable value-keyword-case