refactor(odyssey-storybook): refactor to use new tokens

okta · May 10, 2023 · 634ed1d · 634ed1d
1 parent c43e19a
commit 634ed1d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/packages/odyssey-storybook/.storybook/OdysseyTheme.js b/packages/odyssey-storybook/.storybook/OdysseyTheme.js
@@ -1,12 +1,12 @@
 import { create } from "@storybook/theming";
 import {
-  ColorPaletteNeutral000,
-  ColorPaletteNeutral200,
-  ColorPaletteNeutral500,
-  ColorPaletteNeutral600,
-  ColorPaletteNeutralWhite,
-  ColorPrimaryBase,
-  ColorPrimaryDark,
+  HueNeutral50,
+  HueNeutral200,
+  HueNeutral500,
+  HueNeutral600,
+  HueNeutralWhite,
+  PalettePrimaryBase,
+  PalettePrimaryDark,
   ColorTextBody,
   ColorTextBodyInverse,
   FontFamilyBase,
@@ -16,13 +16,13 @@ import {
 export default create({
   base: "light",
 
-  colorPrimary: ColorPrimaryBase,
-  colorSecondary: ColorPrimaryDark,
+  PalettePrimary: PalettePrimaryBase,
+  colorSecondary: PalettePrimaryDark,
 
   // UI
-  appBg: ColorPaletteNeutral000,
-  appContentBg: ColorPaletteNeutralWhite,
-  appBorderColor: ColorPaletteNeutral200,
+  appBg: HueNeutral50,
+  appContentBg: HueNeutralWhite,
+  appBorderColor: HueNeutral200,
   appBorderRadius: 4,
 
   // Typography
@@ -34,13 +34,13 @@ export default create({
   textInverseColor: ColorTextBodyInverse,
 
   // Toolbar default and active colors
-  barTextColor: ColorPaletteNeutral600,
+  barTextColor: HueNeutral600,
   barSelectedColor: ColorTextBody,
-  barBg: ColorPaletteNeutralWhite,
+  barBg: HueNeutralWhite,
 
   // Form colors
-  inputBg: ColorPaletteNeutralWhite,
-  inputBorder: ColorPaletteNeutral500,
+  inputBg: HueNeutralWhite,
+  inputBorder: HueNeutral500,
   inputTextColor: ColorTextBody,
   inputBorderRadius: 4,
 

diff --git a/packages/odyssey-storybook/.storybook/components/TokenTables.tsx b/packages/odyssey-storybook/.storybook/components/TokenTables.tsx
@@ -50,7 +50,11 @@ export const TokenTables = (): ReactNode => {
       if (!parts) return;
 
       let tokenType = parts[0];
-      if (parts[0] === "Color") {
+      if (
+        parts[0] === "Color" ||
+        parts[0] === "Hue" ||
+        parts[0] === "Palette"
+      ) {
         tokenType = `${parts[1]} ${parts[0]}s`;
       }
 
@@ -214,7 +218,8 @@ export const TokenTables = (): ReactNode => {
                     {token.name.includes("Border") &&
                       !token.name.includes("ColorBorder") &&
                       renderBorder(token)}
-                    {token.name.includes("Color") &&
+                    {(token.name.includes("Hue") ||
+                      token.name.includes("Palette")) &&
                       !token.name.includes("ColorText") &&
                       renderColor(token.value)}
                     {token.name.includes("ColorText") &&