feat!: Update Canvas Kit to use Inter

.storybook/manager-head.html

@@ -1,66 +1,10 @@
 <link rel="icon" type="image/png" href="/canvas-kit-favicon.png" sizes="192x192" />
 <link rel="shortcut icon" href="/canvas-kit-favicon.ico" />
 <link
-  href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500&display=swap"
+  href="https://design.workdaycdn.com/assets/fonts/Inter/Inter.ttf"
   rel="stylesheet"
 />
 <script src="https://use.fontawesome.com/660238b999.js"></script>
 <script>
   document.title = 'Canvas Kit Storybook';
 </script>
-<style>
-  [title^='_hidden_'] {
-    /* display: none !important; */
-  }
-</style>
-
-<style type="text/css">
-  /* body {
-    font-family: 'Roboto', sans-serif;
-    background: #e6f1ff !important;
-    font-size: 14px;
-  }
-  #storybook-explorer-tree {
-    font-family: 'Roboto', sans-serif;
-  }
-  .sto-1ngr21r {
-    color: #0875e1 !important;
-    font-size: 20px;
-    font-family: 'Roboto', sans-serif;
-  }
-
-  #storybook-explorer-menu svg {
-    color: #0875e1;
-  }
-
-  #storybook-explorer-menu button:focus,
-  #storybook-explorer-menu a[data-selected]:hover {
-    background-color: #a6d2ff;
-  }
-
-  #storybook-explorer-menu a[data-selected='true'],
-  #storybook-explorer-menu a[data-selected='true']:hover {
-    background-color: #0875e1;
-    color: #e6f1ff;
-  }
-
-  #storybook-explorer-menu a[data-selected='true'] svg {
-    color: #d7eafc;
-  }
-
-  .sidebar-subheading button,
-  .sidebar-subheading span,
-  .sidebar-item span {
-    color: #5e6a75;
-  }
-
-  .os-content button:hover,
-  .os-content button:focus {
-    background-color: #a6d2ff;
-    color: #0875e1;
-  }
-
-  .os-content button:hover svg {
-    color: #0875e1;
-  } */
-</style>

.storybook/preview-head.html

@@ -3,9 +3,9 @@
 </script>
 
 <style type="text/css">
-  body {
+  html, body {
     padding: 0 !important;
-    font-family: sans-serif;
+    font-family: 'Inter', sans-serif;
   }
 
   .story > * {
@@ -34,48 +34,31 @@
   }
 </style>
 <!-- preload fonts for Chromatic -->
-<link rel="preload" href="Roboto-Light.ttf" as="font" type="font/ttf" crossorigin />
-<link rel="preload" href="Roboto-Regular.ttf" as="font" type="font/ttf" crossorigin />
-<link rel="preload" href="Roboto-Medium.ttf" as="font" type="font/ttf" crossorigin />
-<link rel="preload" href="Roboto-Bold.ttf" as="font" type="font/ttf" crossorigin />
-<link rel="preload" href="RobotoMono-Regular.ttf" as="font" type="font/ttf" crossorigin />
+<link ref="preload" href="Inter.ttf" as="font" type="font/ttf" crossorigin />
+<link ref="preload" href="Inter-Italic.ttf" as="font" type="font/ttf" crossorigin />
+<link rel="preload" href="Roboto-Mono.ttf" as="font" type="font/ttf" crossorigin />
 
 <!-- Font faces -->
 <style>
   @font-face {
-    font-family: 'Roboto';
+    font-family: 'Inter';
     font-style: normal;
-    font-weight: 300;
-    src: local('Roboto Light'), local('Roboto-Light'), url(Roboto-Light.ttf) format('truetype');
+    font-weight: 100 900;
+    src: local('Inter'), url(Inter.ttf) format('truetype');
   }
 
   @font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Roboto Regular'), local('Roboto-Regular'),
-      url(Roboto-Regular.ttf) format('truetype');
-  }
-
-  @font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 500;
-    src: local('Roboto Medium'), local('Roboto-Medium'), url(Roboto-Medium.ttf) format('truetype');
-  }
-
-  @font-face {
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 700;
-    src: local('Roboto Bold'), local('Roboto-Bold'), url(Roboto-Bold.ttf) format('truetype');
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 100 900;
+    src: local('Inter-Italic'), url(Inter-Italic.ttf) format('truetype');
   }
 
   @font-face {
     font-family: 'Roboto Mono';
     font-style: normal;
-    font-weight: 400;
-    src: local('Roboto Mono'), local('RobotoMono-Regular'),
-      url(RobotoMono-Regular.ttf) format('truetype');
+    font-weight: 100 700;
+    src: local('Roboto Mono'), local('Roboto-Mono'),
+      url(Roboto-Mono.ttf) format('truetype');
   }
 </style>

.storybook/preview.js

@@ -5,6 +5,8 @@ import '@workday/canvas-tokens-web/css/base/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';
 import '@workday/canvas-tokens-web/css/system/_variables.css';
 
+import './updated-type.css';
+
 import {CanvasProviderDecorator} from '../utils/storybook';
 import routes from './routes';
 import theme from './theme';

.storybook/updated-type.css

@@ -0,0 +1,75 @@
+/* TODO: Remove this when tokens are available */
+:root {
+  --cnvs-sys-font-family-default: 'Inter';
+  --cnvs-sys-font-family-mono: 'Roboto Mono';
+  --cnvs-sys-font-family-global: 'Noto Sans';
+
+  --cnvs-sys-font-weight-light: 300;
+  --cnvs-sys-font-weight-regular: 400;
+  --cnvs-sys-font-weight-medium: 500;
+  --cnvs-sys-font-weight-bold: 700;
+
+  --cnvs-sys-font-size-subtext-sm: 0.625rem;
+  --cnvs-sys-font-size-subtext-md: 0.75rem;
+  --cnvs-sys-font-size-subtext-lg: 0.875rem;
+  --cnvs-sys-font-size-body-sm: 1rem;
+  --cnvs-sys-font-size-body-md: 1.125rem;
+  --cnvs-sys-font-size-body-lg: 1.25rem;
+  --cnvs-sys-font-size-heading-sm: 1.5rem;
+  --cnvs-sys-font-size-heading-md: 1.75rem;
+  --cnvs-sys-font-size-heading-lg: 2rem;
+  --cnvs-sys-font-size-title-sm: 2.5rem;
+  --cnvs-sys-font-size-title-md: 3rem;
+  --cnvs-sys-font-size-title-lg: 3.5rem;
+
+  --cnvs-sys-letter-spacing-subtext-sm: calc(0.25px / 16px);
+  --cnvs-sys-letter-spacing-subtext-md: calc(0.12px / 16px);
+  --cnvs-sys-letter-spacing-subtext-lg: calc(0px / 16px);
+  --cnvs-sys-letter-spacing-body-sm: calc(-0.16px / 16px);
+  --cnvs-sys-letter-spacing-body-md: calc(-0.18px / 16px);
+  --cnvs-sys-letter-spacing-body-lg: calc(-0.2px / 16px);
+  --cnvs-sys-letter-spacing-heading-sm: calc(-0.48px / 16px);
+  --cnvs-sys-letter-spacing-heading-md: calc(-0.56px / 16px);
+  --cnvs-sys-letter-spacing-heading-lg: calc(-0.64px / 16px);
+  --cnvs-sys-letter-spacing-title-sm: calc(-1.2px / 16px);
+  --cnvs-sys-letter-spacing-title-md: calc(-1.44px / 16px);
+  --cnvs-sys-letter-spacing-title-lg: calc(-2.24px / 16px);
+
+  --cnvs-sys-line-height-subtext-sm: 0.875rem;
+  --cnvs-sys-line-height-subtext-md: 1rem;
+  --cnvs-sys-line-height-subtext-lg: 1.25rem;
+  --cnvs-sys-line-height-body-sm: 1.5rem;
+  --cnvs-sys-line-height-body-md: 1.625rem;
+  --cnvs-sys-line-height-body-lg: 1.75rem;
+  --cnvs-sys-line-height-heading-sm: 2rem;
+  --cnvs-sys-line-height-heading-md: 2.25rem;
+  --cnvs-sys-line-height-heading-lg: 2.5rem;
+  --cnvs-sys-line-height-title-sm: 3rem;
+  --cnvs-sys-line-height-title-md: 3.5rem;
+  --cnvs-sys-line-height-title-lg: 4rem;
+
+  --cnvs-sys-font-subtext-sm:
+    var(--cnvs-sys-font-size-subtext-sm) / var(--cnvs-sys-line-height-subtext-sm);
+  --cnvs-sys-font-subtext-md:
+    var(--cnvs-sys-font-size-subtext-md) / var(--cnvs-sys-line-height-subtext-md);
+  --cnvs-sys-font-subtext-lg:
+    var(--cnvs-sys-font-size-subtext-lg) / var(--cnvs-sys-line-height-subtext-lg);
+  --cnvs-sys-font-body-sm:
+    var(--cnvs-sys-font-size-body-sm) / var(--cnvs-sys-line-height-body-sm);
+  --cnvs-sys-font-body-md:
+    var(--cnvs-sys-font-size-body-md) / var(--cnvs-sys-line-height-body-md);
+  --cnvs-sys-font-body-lg:
+    var(--cnvs-sys-font-size-body-lg) / var(--cnvs-sys-line-height-body-lg);
+  --cnvs-sys-font-heading-sm:
+    var(--cnvs-sys-font-size-heading-sm) / var(--cnvs-sys-line-height-heading-sm);
+  --cnvs-sys-font-heading-md:
+    var(--cnvs-sys-font-size-heading-md) / var(--cnvs-sys-line-height-heading-md);
+  --cnvs-sys-font-heading-lg:
+    var(--cnvs-sys-font-size-heading-lg) / var(--cnvs-sys-line-height-heading-lg);
+  --cnvs-sys-font-title-sm:
+    var(--cnvs-sys-font-size-title-sm) / var(--cnvs-sys-line-height-title-sm);
+  --cnvs-sys-font-title-md:
+    var(--cnvs-sys-font-size-title-md) / var(--cnvs-sys-line-height-title-md);
+  --cnvs-sys-font-title-lg:
+    var(--cnvs-sys-font-size-title-lg) / var(--cnvs-sys-line-height-title-lg);
+}

README.md

@@ -45,8 +45,8 @@ or
 npm install @workday/canvas-kit-react @workday/canvas-tokens-web
 ```
 
-> **Note:** If your application does not already provide `Roboto` as a font, you can install
-> `@workday/canvas-kit-react-fonts`. The example below shows how to inject the fonts, but you can
+> **Note:** If your application does not already provide `Inter` our our other fonts, you can use
+> `@workday/canvas-kit-react/fonts`. The example below shows how to inject the fonts, but you can
 > omit this if you're already loading fonts.
 
 **Usage**
@@ -55,10 +55,9 @@ To ensure fonts are loaded correctly, update your root `index.js` file.
 
 ```jsx
 import {createRoot} from 'react-dom/client';
-import {injectGlobal} from '@emotion/css';
-import {fonts} from '@workday/canvas-kit-react-fonts';
+import {fonts} from '@workday/canvas-kit-react/fonts';
 import {system} from '@workday/canvas-tokens-web';
-import {cssVar} from '@workday/canvas-kit-styling';
+import {cssVar, injectGlobal} from '@workday/canvas-kit-styling';
 
 import '@workday/canvas-tokens-web/css/base/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';

cypress/support/component-index.html

@@ -45,48 +45,25 @@
     <!-- Font faces -->
     <style>
       @font-face {
-        font-family: 'Roboto';
+        font-family: 'Inter';
         font-style: normal;
-        font-weight: 300;
-        src: local('Roboto Light'), local('Roboto-Light'),
-          url(https://design.workdaycdn.com/beta/assets/fonts@1.0.0/roboto/ttf/Roboto-Light.ttf)
-            format('truetype');
+        font-weight: 100 900;
+        src: local('Inter'), url(Inter.ttf) format('truetype');
       }
 
       @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 400;
-        src: local('Roboto Regular'), local('Roboto-Regular'),
-          url(https://design.workdaycdn.com/beta/assets/fonts@1.0.0/roboto/ttf/Roboto-Regular.ttf)
-            format('truetype');
-      }
-
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 500;
-        src: local('Roboto Medium'), local('Roboto-Medium'),
-          url(https://design.workdaycdn.com/beta/assets/fonts@1.0.0/roboto/ttf/Roboto-Medium.ttf)
-            format('truetype');
-      }
-
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 700;
-        src: local('Roboto Bold'), local('Roboto-Bold'),
-          url(https://design.workdaycdn.com/beta/assets/fonts@1.0.0/roboto/ttf/Roboto-Bold.ttf)
-            format('truetype');
+        font-family: 'Inter';
+        font-style: italic;
+        font-weight: 100 900;
+        src: local('Inter-Italic'), url(Inter-Italic.ttf) format('truetype');
       }
 
       @font-face {
         font-family: 'Roboto Mono';
         font-style: normal;
-        font-weight: 400;
-        src: local('Roboto Mono'), local('RobotoMono-Regular'),
-          url(https://design.workdaycdn.com/beta/assets/fonts@1.0.0/roboto/ttf/RobotoMono-Regular.ttf)
-            format('truetype');
+        font-weight: 100 700;
+        src: local('Roboto Mono'), local('Roboto-Mono'),
+          url(Roboto-Mono.ttf) format('truetype');
       }
 
       /* Disable transitions for Cypress*/

modules/docs/lib/stackblitzFiles/main.tsx

@@ -1,6 +1,6 @@
 import {createRoot} from 'react-dom/client';
 
-import {fonts} from '@workday/canvas-kit-react-fonts';
+import {fonts} from '@workday/canvas-kit-react/fonts';
 import {injectGlobal} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 import '@workday/canvas-tokens-web/css/base/_variables.css';

modules/docs/lib/stackblitzFiles/packageJSONFile.ts

@@ -22,7 +22,6 @@ export const packageJSONFile = `{
     "@workday/canvas-kit-labs-react": "${version}",
     "@workday/canvas-kit-preview-react": "${version}",
     "@workday/canvas-kit-react": "${version}",
-    "@workday/canvas-kit-react-fonts": "^${version}",
     "@workday/canvas-kit-styling": "${version}",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"

modules/docs/llm/llm-style-props-migration.txt

@@ -2276,7 +2276,7 @@ injectGlobal({
 
 ```tsx
 import {createRoot} from 'react-dom/client';
-import {fonts} from '@workday/canvas-kit-react-fonts';
+import {fonts} from '@workday/canvas-kit-react/fonts';
 import {system} from '@workday/canvas-tokens-web';
 import {cssVar, injectGlobal} from '@workday/canvas-kit-styling';
 import {App} from './App';