Adds fonts to onboarding (#533)

* improves styles and adds fonts * update changeset
Shopify · Feb 16, 2023 · beae9cb · beae9cb
1 parent ce04cd7
commit beae9cb
Showing 5 changed files with 57 additions and 14 deletions.
diff --git a/.changeset/lovely-schools-taste.md b/.changeset/lovely-schools-taste.md
@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Onboarding fonts and styles
diff --git a/packages/cli/src/virtual-routes/assets/inter-variable-font.ttf b/packages/cli/src/virtual-routes/assets/inter-variable-font.ttf
diff --git a/packages/cli/src/virtual-routes/assets/jetbrainsmono-variable-font.ttf b/packages/cli/src/virtual-routes/assets/jetbrainsmono-variable-font.ttf
diff --git a/packages/cli/src/virtual-routes/assets/styles.css b/packages/cli/src/virtual-routes/assets/styles.css
@@ -1,3 +1,12 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/inter-variable-font.ttf') format("truetype-variations");
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('../assets/jetbrainsmono-variable-font.ttf') format("truetype-variations");
+}
+
 * {
   box-sizing: border-box;
 }
@@ -11,8 +20,7 @@ p {
 
 h1 {
   font-size: 3rem;
-  font-weight: 700;
-  line-height: 1.4;
+  line-height: 1.25;
 }
 
 h2 {
@@ -24,16 +32,17 @@ h2 {
 p {
   font-size: 1rem;
   line-height: 1.4;
+  font-weight: 500;
 }
 
 
 body {
   padding: 0;
   margin: 0;
   background: #FFFFFF;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-
+  -webkit-font-smoothing: antialiased;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -57,10 +66,6 @@ header {
   color: #5C5F62;
 }
 
-header p {
- white-space: nowrap;
-}
-
 header nav {
   display: flex;
   flex-direction: row;
@@ -71,14 +76,16 @@ header nav {
 
 header h1 {
   font-size: 0.75rem;
-  margin-right: 20px;
 }
 
 header p {
+  font-family: 'JetBrains Mono';
+  font-weight: 700;
   font-size: 0.875rem;
   border: 1.5px solid #D2D5D8;
   border-radius: 4px;
   padding: 1px;
+  white-space: nowrap;
 }
 
 main {
@@ -103,16 +110,30 @@ footer a {
   text-decoration: none;
 }
 
-main h1 {
+main > h1 {
   color: #202223;
+  font-weight: 900;
+  margin-bottom: 24px;
+}
+
+
+main > p {
+  margin-bottom: 16px;
+}
+
+main > section {
+  margin-bottom: 40px;
 }
 
+
 main a {
   color: #475F91;
-  font-size: 16px;
+  font-size: 1rem;
   position: relative;
+  font-weight: 500;
 }
 
+
 main a::after {
   content: url("data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.45312 19.3828H13.9297C15.5703 19.3828 16.3828 18.5703 16.3828 16.9609V7.42188C16.3828 5.8125 15.5703 5 13.9297 5H4.45312C2.82031 5 2 5.80469 2 7.42188V16.9609C2 18.5781 2.82031 19.3828 4.45312 19.3828ZM4.46875 18.125C3.6875 18.125 3.25781 17.7109 3.25781 16.8984V7.48438C3.25781 6.67188 3.6875 6.25781 4.46875 6.25781H13.9141C14.6875 6.25781 15.125 6.67188 15.125 7.48438V16.8984C15.125 17.7109 14.6875 18.125 13.9141 18.125H4.46875ZM11.6406 14.1172C11.9844 14.1172 12.2188 13.8516 12.2188 13.4922V9.80469C12.2188 9.34375 11.9609 9.16406 11.5625 9.16406H7.85938C7.49219 9.16406 7.25781 9.39062 7.25781 9.73438C7.25781 10.0781 7.5 10.3047 7.875 10.3047H9.29688L10.4531 10.1797L9.23438 11.3125L6.35156 14.1953C6.24219 14.3047 6.17188 14.4609 6.17188 14.6172C6.17188 14.9688 6.39844 15.1953 6.74219 15.1953C6.92969 15.1953 7.07812 15.125 7.1875 15.0156L10.0625 12.1406L11.1875 10.9375L11.0703 12.1562V13.5078C11.0703 13.875 11.2969 14.1172 11.6406 14.1172Z' fill='%23475F91'/%3E%3C/svg%3E%0A");
   vertical-align: middle;
@@ -121,7 +142,6 @@ main a::after {
 main {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
 }
 
 .Links ul {
@@ -147,6 +167,7 @@ main {
   margin-bottom: .5rem;
   font-size: 1.5rem;
   color: #44474A;
+  font-weight: 700;
 }
 
 
@@ -160,7 +181,7 @@ main {
   box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   font-style: normal;
-  font-size: 16px;
+  font-size: 1rem;
   line-height: 24px;
   color: #5C5F62;
   border: 1px solid #D2D5D8;
@@ -187,8 +208,9 @@ main {
   padding: 2px;
 }
 
-.Banner > h2 {
+.Banner h2 {
   font-size: 1rem;
+  color: #202223;
 }
 
 .Banner.ErrorBanner {

diff --git a/packages/cli/src/virtual-routes/routes/index.tsx b/packages/cli/src/virtual-routes/routes/index.tsx
@@ -9,6 +9,8 @@ import {IconTwitter} from '../components/IconTwitter.jsx';
 import {IconBanner} from '../components/IconBanner.jsx';
 import {IconError} from '../components/IconError.jsx';
 import favicon from '../assets/favicon.svg';
+import interVariableFont from '../assets/inter-variable-font.ttf';
+import jetbrainsmonoVariableFont from '../assets/jetbrainsmono-variable-font.ttf';
 import type {I18nBase, StorefrontClient} from '@shopify/hydrogen';
 
 interface AppLoadContext {
@@ -30,6 +32,20 @@ export const links: LinksFunction = () => [
     type: 'image/svg+xml',
     href: favicon,
   },
+  {
+    rel: 'preload',
+    href: interVariableFont,
+    as: 'font',
+    type: 'font/ttf',
+    crossOrigin: 'anonymous',
+  },
+  {
+    rel: 'preload',
+    href: jetbrainsmonoVariableFont,
+    as: 'font',
+    type: 'font/ttf',
+    crossOrigin: 'anonymous',
+  },
 ];
 
 export async function loader({context}: {context: AppLoadContext}) {