Merge pull request #238 from US-CBP/bugfix/cbp-app-remove-fonts

Remove Roboto fonts from `cbp-app`

packages/web-components/.storybook/manager-head.html

@@ -1 +1,2 @@
-<link rel="icon"  type="image/svg+xml" href="assets/images/cbp-seal.svg">
+<link rel="icon" type="image/svg+xml" href="assets/images/cbp-seal.svg" />
+

packages/web-components/.storybook/preview-head.html

@@ -1,6 +1,9 @@
 <base href="./" />
 
 <link rel="stylesheet"  type="text/css" href="assets/css/storybook-canvas.css">
+<!--<link rel="stylesheet" type="text/css" href="assets/css/roboto_flex.css" />-->
+<link rel="stylesheet" type="text/css" href="assets/css/roboto.css" />
+<link rel="stylesheet" type="text/css" href="assets/css/roboto_mono.css" />
 
 <!-- Loading the CBP DS components as a module allows them to be rebuilt and watched properly -->
 <!--<script type="module" src="../www/build/cbp-web-components.esm.js" /> -->

packages/web-components/assets/css/roboto.css

@@ -0,0 +1,95 @@
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: normal;
+  font-weight: 100;
+  src: url('../fonts/roboto/Roboto-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: italic;
+  font-weight: 100;
+  src: url('../fonts/roboto/Roboto-ThinItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/roboto/Roboto-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/roboto/Roboto-LightItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/roboto/Roboto-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/roboto/Roboto-RegularItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/roboto/Roboto-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: italic;
+  font-weight: 500;
+  src: url('../fonts/roboto/Roboto-MediumItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/roboto/Roboto-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/roboto/Roboto-BoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: normal;
+  font-weight: 900;
+  src: url('../fonts/roboto/Roboto-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-display: swap;
+  font-style: italic;
+  font-weight: 900;
+  src: url('../fonts/roboto/Roboto-BlackItalic.woff2') format('woff2');
+}

packages/web-components/assets/css/roboto_flex.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Flex';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/roboto-flex/roboto-flex-v26-latin_latin-ext-regular.woff2') format('woff2');
+}

packages/web-components/assets/css/roboto_mono.css

@@ -0,0 +1,17 @@
+/* roboto-mono-regular - latin_latin-ext */
+@font-face {
+  font-display: swap; 
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-regular.woff2') format('woff2');
+}
+
+/* roboto-mono-700 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-700.woff2') format('woff2');
+}

packages/web-components/assets/css/roboto_mono_all.css

@@ -0,0 +1,112 @@
+/* roboto-mono-100 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 100;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-100.woff2') format('woff2');
+}
+/* roboto-mono-100italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 100;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-100italic.woff2') format('woff2');
+}
+/* roboto-mono-200 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-200.woff2') format('woff2');
+}
+/* roboto-mono-200italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 200;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-200italic.woff2') format('woff2');
+}
+/* roboto-mono-300 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-300.woff2') format('woff2');
+}
+/* roboto-mono-300italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-300italic.woff2') format('woff2');
+}
+/* roboto-mono-regular - latin_latin-ext */
+@font-face {
+  font-display: swap; 
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-regular.woff2') format('woff2');
+}
+/* roboto-mono-italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-italic.woff2') format('woff2');
+}
+/* roboto-mono-500 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-500.woff2') format('woff2');
+}
+/* roboto-mono-500italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 500;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-500italic.woff2') format('woff2');
+}
+/* roboto-mono-600 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-600.woff2') format('woff2');
+}
+/* roboto-mono-600italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-600italic.woff2') format('woff2');
+}
+/* roboto-mono-700 - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-700.woff2') format('woff2');
+}
+/* roboto-mono-700italic - latin_latin-ext */
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto Mono';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../fonts/roboto-mono/roboto-mono-v23-latin_latin-ext-700italic.woff2') format('woff2');
+}

packages/web-components/src/components/cbp-app/cbp-app.specs.mdx

@@ -10,7 +10,7 @@ The App component is a wrapper that packages high level design tokens (as CSS va
 
 ## Functional Requirements
 
-* The App component contains necessary high-level CSS and fonts to remove the need for external dependencies referenced by HTML `link` tags.
+* The App component contains necessary high-level CSS to minimize the need for external dependencies referenced by HTML `link` tags.
 * As the highest level container of the application, system-wide functionality may be hoisted to this tag, such as dark mode, debugging, etc. (TBD)
 
 ## Technical Specifications
@@ -35,4 +35,5 @@ n/a
 ### Additional Notes and Considerations
 
 * The `cbp-app` component is hidden in most component stories but is still present as a wrapper to load the required CSS and fonts. See the "Page Template" stories for examples where this component is exposed in the story markup.
+* Embedded fonts were removed from this component to improve the "First Contentful Paint" metric.
 * TODO: investigate options for dark mode, debugging, performance, etc.

packages/web-components/src/components/cbp-app/cbp-app.tsx

@@ -10,7 +10,7 @@ import { Component, Prop, Host, h, Env } from '@stencil/core';
  */
 @Component({
   tag: 'cbp-app',
-  styleUrls: ['reset.scss', 'roboto.scss', 'css-variables.scss', 'core.scss', 'cbp-app.scss']
+  styleUrls: ['reset.scss', 'css-variables.scss', 'core.scss', 'cbp-app.scss']
 })
 export class CbpApp {
 

packages/web-components/src/components/cbp-app/css-variables.scss

@@ -37,8 +37,8 @@
   --cbp-font-size-heading-xxl: 1.802rem;
   --cbp-font-size-masthead-2: 2.027rem;
   --cbp-font-size-masthead-1: 2.280rem;
-  --cbp-font-family-roboto-mono: 'Roboto-mono', 'Roboto Mono Web', Consolas, 'Bitstream Vera Sans Mono', Courier, monospace;
-  --cbp-font-family-roboto: 'Roboto', Calibri, Tahoma, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 'Apple color emoji', 'Segoe UI Emoji', 'Segoe Ui Symbol', sans-serif;
+  --cbp-font-family-roboto-mono: 'Roboto Mono', 'Roboto Mono Web', Consolas, 'Bitstream Vera Sans Mono', Courier, monospace;
+  --cbp-font-family-roboto: 'Roboto', 'Roboto Flex', Calibri, Tahoma, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 'Apple color emoji', 'Segoe UI Emoji', 'Segoe Ui Symbol', sans-serif;
   --cbp-space-16x: 4rem;
   --cbp-space-15x: 3.75rem;
   --cbp-space-14x: 3.5rem;