fix(odyssey-storybook): match storybook ui to new tokens

okta · May 23, 2023 · 5f58185 · 5f58185
1 parent 85c2614
commit 5f58185
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/packages/odyssey-storybook/.storybook/OdysseyTheme.js b/packages/odyssey-storybook/.storybook/OdysseyTheme.js
@@ -5,18 +5,18 @@ import {
   HueNeutral500,
   HueNeutral600,
   HueNeutralWhite,
-  PalettePrimaryBase,
+  PalettePrimaryMain,
   PalettePrimaryDark,
-  ColorTextBody,
-  ColorTextBodyInverse,
-  FontFamilyBase,
-  FontFamilyMono,
+  TypographyColorBody,
+  TypographyColorBodyInverse,
+  TypographyFamilyBody,
+  TypographyFamilyMono,
 } from "@okta/odyssey-design-tokens";
 
 export default create({
   base: "light",
 
-  PalettePrimary: PalettePrimaryBase,
+  PalettePrimary: PalettePrimaryMain,
   colorSecondary: PalettePrimaryDark,
 
   // UI
@@ -26,22 +26,22 @@ export default create({
   appBorderRadius: 4,
 
   // Typography
-  fontBase: FontFamilyBase,
-  fontCode: FontFamilyMono,
+  fontBase: TypographyFamilyBody,
+  fontCode: TypographyFamilyMono,
 
   // Text colors
-  textColor: ColorTextBody,
-  textInverseColor: ColorTextBodyInverse,
+  textColor: TypographyColorBody,
+  textInverseColor: TypographyColorBodyInverse,
 
   // Toolbar default and active colors
   barTextColor: HueNeutral600,
-  barSelectedColor: ColorTextBody,
+  barSelectedColor: TypographyColorBody,
   barBg: HueNeutralWhite,
 
   // Form colors
   inputBg: HueNeutralWhite,
   inputBorder: HueNeutral500,
-  inputTextColor: ColorTextBody,
+  inputTextColor: TypographyColorBody,
   inputBorderRadius: 4,
 
   brandTitle: "Odyssey Design System",

diff --git a/packages/odyssey-storybook/.storybook/preview-head.html b/packages/odyssey-storybook/.storybook/preview-head.html
@@ -1,14 +1,9 @@
 <!-- .storybook/preview-head.html -->
 
-<link rel="preconnect" href="https://fonts.gstatic.com" />
-
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-  href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap"
-  rel="stylesheet"
-/>
-
-<link
-  href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono&display=swap"
   rel="stylesheet"
 />
 
@@ -58,4 +53,13 @@
   .sbdocs .sb-dont .innerZoomElementWrapper > div {
     display: block;
   }
+
+  .sbdocs .sbdocs-h1,
+  .sbdocs .sbdocs-h2,
+  .sbdocs .sbdocs-h3,
+  .sbdocs .sbdocs-h4,
+  .sbdocs .sbdocs-h5,
+  .sbdocs .sbdocs-h6 {
+    font-weight: 500;
+  }
 </style>