fix: changed to DesignTokens type rather than the overrides in theme …

…creation
okta · Jun 2, 2023 · ca954ac · ca954ac
1 parent a98dd87
commit ca954ac
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 41 deletions.
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -29,6 +29,7 @@ import { tableHeadClasses } from "@mui/material/TableHead";
 import { tableRowClasses } from "@mui/material/TableRow";
 import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
 import { tooltipClasses } from "@mui/material/Tooltip";
+
 import {
   AlertTriangleFilledIcon,
   ArrowDownIcon,
@@ -40,10 +41,10 @@ import {
   InformationCircleFilledIcon,
   SubtractIcon,
 } from "../iconDictionary";
-import { DesignTokensOverride } from ".";
+import { DesignTokens } from "./theme";
 
 export const components = (
-  odysseyTokens: DesignTokensOverride
+  odysseyTokens: DesignTokens
 ): ThemeOptions["components"] => {
   return {
     MuiAlert: {

diff --git a/packages/odyssey-react-mui/src/theme/index.ts b/packages/odyssey-react-mui/src/theme/index.ts
@@ -10,9 +10,5 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import * as Tokens from "@okta/odyssey-design-tokens";
-
 export * from "./theme";
 export { useTheme } from "@mui/material/styles";
-
-export type DesignTokensOverride = Partial<typeof Tokens>;
diff --git a/packages/odyssey-react-mui/src/theme/mixins.ts b/packages/odyssey-react-mui/src/theme/mixins.ts
@@ -11,11 +11,10 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
-import { DesignTokensOverride } from ".";
 
-export const mixins = (
-  odysseyTokens: DesignTokensOverride
-): ThemeOptions["mixins"] => {
+import { DesignTokens } from "./theme";
+
+export const mixins = (odysseyTokens: DesignTokens): ThemeOptions["mixins"] => {
   return {
     maxWidth: odysseyTokens.TypographyLineLengthMax,
     borderRadius: odysseyTokens.BorderRadiusMain,

diff --git a/packages/odyssey-react-mui/src/theme/palette.ts b/packages/odyssey-react-mui/src/theme/palette.ts
@@ -11,11 +11,11 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
-import { DesignTokensOverride } from ".";
-import * as Tokens from "@okta/odyssey-design-tokens";
+
+import { DesignTokens } from "./theme";
 
 export const palette = (
-  odysseyTokens: DesignTokensOverride
+  odysseyTokens: DesignTokens
 ): ThemeOptions["palette"] => {
   return {
     mode: "light",
@@ -26,7 +26,7 @@ export const palette = (
     primary: {
       lighter: odysseyTokens.HueBlue50,
       light: odysseyTokens.HueBlue300,
-      main: odysseyTokens.HueBlue500 ?? Tokens.HueBlue500,
+      main: odysseyTokens.HueBlue500,
       dark: odysseyTokens.HueBlue900,
       contrastText: odysseyTokens.TypographyColorBodyInverse,
     },
@@ -39,28 +39,28 @@ export const palette = (
     error: {
       lighter: odysseyTokens.HueRed50,
       light: odysseyTokens.HueRed300,
-      main: odysseyTokens.HueRed500 ?? Tokens.HueRed500,
+      main: odysseyTokens.HueRed500,
       dark: odysseyTokens.HueRed900,
       contrastText: odysseyTokens.TypographyColorBodyInverse,
     },
     warning: {
       lighter: odysseyTokens.HueYellow50,
       light: odysseyTokens.HueYellow300,
-      main: odysseyTokens.HueYellow500 ?? Tokens.HueYellow500,
+      main: odysseyTokens.HueYellow500,
       dark: odysseyTokens.HueYellow900,
       contrastText: odysseyTokens.TypographyColorBody,
     },
     info: {
       lighter: odysseyTokens.HueBlue50,
       light: odysseyTokens.HueBlue300,
-      main: odysseyTokens.HueBlue500 ?? Tokens.HueBlue500,
+      main: odysseyTokens.HueBlue500,
       dark: odysseyTokens.HueBlue900,
       contrastText: odysseyTokens.TypographyColorBodyInverse,
     },
     success: {
       lighter: odysseyTokens.HueGreen50,
       light: odysseyTokens.HueGreen300,
-      main: odysseyTokens.HueGreen500 ?? Tokens.HueGreen500,
+      main: odysseyTokens.HueGreen500,
       dark: odysseyTokens.HueGreen900,
       contrastText: odysseyTokens.TypographyColorBodyInverse,
     },

diff --git a/packages/odyssey-react-mui/src/theme/shape.ts b/packages/odyssey-react-mui/src/theme/shape.ts
@@ -11,11 +11,10 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
-import { DesignTokensOverride } from ".";
 
-export const shape = (
-  odysseyTokens: DesignTokensOverride
-): ThemeOptions["shape"] => {
+import { DesignTokens } from "./theme";
+
+export const shape = (odysseyTokens: DesignTokens): ThemeOptions["shape"] => {
   // Strip units from BorderRadiusBase to accommodate MUI's typing
   const NumericalBorderRadiusBase =
     typeof odysseyTokens.BorderRadiusMain === "string"

diff --git a/packages/odyssey-react-mui/src/theme/spacing.ts b/packages/odyssey-react-mui/src/theme/spacing.ts
@@ -11,22 +11,22 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
-import { DesignTokensOverride } from ".";
-import * as Tokens from "@okta/odyssey-design-tokens";
+
+import type { DesignTokens } from "./theme";
 
 export const spacing = (
-  odysseyTokens: DesignTokensOverride
+  odysseyTokens: DesignTokens
 ): ThemeOptions["spacing"] => {
   return [
-    odysseyTokens.Spacing0 ?? Tokens.Spacing0,
-    odysseyTokens.Spacing1 ?? Tokens.Spacing1,
-    odysseyTokens.Spacing2 ?? Tokens.Spacing2,
-    odysseyTokens.Spacing3 ?? Tokens.Spacing3,
-    odysseyTokens.Spacing4 ?? Tokens.Spacing4,
-    odysseyTokens.Spacing5 ?? Tokens.Spacing5,
-    odysseyTokens.Spacing6 ?? Tokens.Spacing6,
-    odysseyTokens.Spacing7 ?? Tokens.Spacing7,
-    odysseyTokens.Spacing8 ?? Tokens.Spacing8,
-    odysseyTokens.Spacing9 ?? Tokens.Spacing9,
+    odysseyTokens.Spacing0,
+    odysseyTokens.Spacing1,
+    odysseyTokens.Spacing2,
+    odysseyTokens.Spacing3,
+    odysseyTokens.Spacing4,
+    odysseyTokens.Spacing5,
+    odysseyTokens.Spacing6,
+    odysseyTokens.Spacing7,
+    odysseyTokens.Spacing8,
+    odysseyTokens.Spacing9,
   ];
 };
diff --git a/packages/odyssey-react-mui/src/theme/theme.ts b/packages/odyssey-react-mui/src/theme/theme.ts
@@ -11,6 +11,7 @@
  */
 
 import { createTheme } from "@mui/material/styles";
+import * as Tokens from "@okta/odyssey-design-tokens";
 
 import { components } from "./components";
 import { mixins } from "./mixins";
@@ -22,15 +23,16 @@ import "./components.types";
 import "./mixins.types";
 import "./palette.types";
 import "./typography.types";
-import { DesignTokensOverride } from ".";
 
-export const createOdysseyMuiTheme = (odysseyTokens: DesignTokensOverride) => {
-  return createTheme({
+export type DesignTokens = typeof Tokens;
+export type DesignTokensOverride = Partial<typeof Tokens>;
+
+export const createOdysseyMuiTheme = (odysseyTokens: DesignTokens) =>
+  createTheme({
     components: components(odysseyTokens),
     mixins: mixins(odysseyTokens),
     palette: palette(odysseyTokens),
     shape: shape(odysseyTokens),
     spacing: spacing(odysseyTokens),
     typography: typography(odysseyTokens),
   });
-};
diff --git a/packages/odyssey-react-mui/src/theme/typography.ts b/packages/odyssey-react-mui/src/theme/typography.ts
@@ -11,10 +11,11 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
-import { DesignTokensOverride } from ".";
+
+import { DesignTokens } from "./theme";
 
 export const typography = (
-  odysseyTokens: DesignTokensOverride
+  odysseyTokens: DesignTokens
 ): ThemeOptions["typography"] => {
   return {
     htmlFontSize: 16,