[OP#168] Update the font import to use newer syntax (#235)

This PR updates the font import syntax from google fonts. It allows for an additional variable setting and consolidates the import. It also adds an alternative font to use.

.storybook/preview.scss

@@ -10,8 +10,8 @@
   --toc-size: 20rem;
 
   display: grid;
-  justify-items: center;
   grid-template-columns: 1fr var(--toc-size);
+  justify-items: center;
 
   .sbdocs.sbdocs-content + div {
     width: 100%;
@@ -39,10 +39,10 @@
           }
 
           &::before {
-            content: '-';
-            transform: translateX(calc(-1 * var(--op-space-small)));
             border-left: none;
+            content: '-';
             opacity: 1;
+            transform: translateX(calc(-1 * var(--op-space-small)));
           }
         }
       }
@@ -104,6 +104,10 @@
 }
 
 .font-family-demo--alternative {
+  font-family: var(--op-font-family-alt);
+}
+
+.font-family-demo--optional {
   --op-font-family: 'Tilt Neon', sans-serif;
 
   font-family: var(--op-font-family);

src/core/tokens/base_tokens.scss

@@ -1,5 +1,14 @@
-@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
-@import 'https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
+
+// Noto Sans supports:
+// font-weight: {anything between 100 and 900}
+// font-stretch: {anything between 62.5% and 100%}
+// font-style: {normal or italic}
+
+// Noto Serif supports:
+// font-weight: {anything between 100 and 900}
+// font-stretch: {anything between 62.5% and 100%}
+// font-style: {normal or italic}
 
 // Using Mixins allows us to include them at a component level
 // as needed and override them.
@@ -240,7 +249,8 @@ $breakpoint-x-large: 1440px; // medium laptop
   * @tokens Font Family
   * @presenter FontFamily
   */
-  --op-font-family: 'Noto Sans', 'Noto Serif', sans-serif;
+  --op-font-family: 'Noto Sans', sans-serif;
+  --op-font-family-alt: 'Noto Serif', serif;
 }
 
 @mixin spacing-scales {

src/stories/Tokens/Typography/Font.js

@@ -2,9 +2,13 @@ export const createFontFamily = ({ family = 'Noto Sans' }) => {
   const element = document.createElement('p')
   element.innerText = `Font Family Demo using: ${family}`
 
-  if (family === 'Tilt Neon') {
+  if (family === 'Noto Serif') {
     element.className = 'font-family-demo--alternative'
   }
 
+  if (family === 'Tilt Neon') {
+    element.className = 'font-family-demo--optional'
+  }
+
   return element
 }

src/stories/Tokens/Typography/FontFamily.mdx

@@ -8,11 +8,10 @@ import { DesignTokenDocBlock } from 'storybook-design-token'
 
 The Font Family token can be used to change the font used when displaying text
 
-The default font is set to Noto Sans which is loaded via the Google Fonts CDN
+Noto Sans and Noto Serif are both loaded via the Google Fonts CDN with Noto Sans as the default.
 
 ```css
-@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
-@import 'https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
 ```
 
 ## Playground
@@ -41,7 +40,7 @@ If you want to change the font used by default, you can add a new font import to
 **Note** Not all fonts have the same baseline line height. This can cause alignment issues in your text that may require you to adjust the default line height tokens. See [Adjusting Line Heights](?path=/docs/tokens-typography-line-height--base#custom-font)
 
 ```css
-@import 'https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Tilt+Neon:XROT,[email protected],-45..45&display=swap';
 
 :root {
   --op-font-family: 'Tilt Neon', sans-serif;
@@ -53,13 +52,12 @@ If you want to change the font used by default, you can add a new font import to
 Often an application will need multiple fonts. Your headers may use a different font than your body text. Optics provides a single font family token, but you can easily add your own font tokens by following the pattern.
 
 ```css
-@import 'https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap';
-@import 'https://fonts.googleapis.com/css2?family=Roboto&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,slnt,wdth,wght,GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,[email protected],-10..0,25..151,100..1000,-200..150,27..175,323..603,25..135,649..854,-305..-98,560..788,416..570,528..760&family=Tilt+Neon:XROT,[email protected],-45..45&display=swap';
 
 :root {
   --op-font-family: 'Tilt Neon', sans-serif;
-  --ya-font-family-alt: 'Roboto', serif; // Your App prefix. Could stick with --op if you want
-  // or
-  --ya-font-family-body: 'Roboto', serif;
+  --op-font-family-alt: 'Roboto Flex', serif;
+  // Could add others as needed
+  --ya-font-family-body: 'Roboto Flex', serif;  // Your App prefix. Could stick with --op if you want
 }
 ```

src/stories/Tokens/Typography/FontFamily.stories.js

@@ -8,7 +8,7 @@ export default {
   argTypes: {
     family: {
       control: { type: 'select' },
-      options: ['Noto Sans', 'Tilt Neon'],
+      options: ['Noto Sans', 'Noto Serif', 'Tilt Neon'],
     },
   },
 }
@@ -20,6 +20,12 @@ export const Default = {
 }
 
 export const Alternate = {
+  args: {
+    family: 'Noto Serif',
+  },
+}
+
+export const Optional = {
   args: {
     family: 'Tilt Neon',
   },