Add OdysseyDesignTokensContext

packages/odyssey-react-mui/src/Fieldset.tsx

@@ -10,11 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { Box } from "@mui/material";
 import { memo, ReactElement } from "react";
 
-import { Box } from "@mui/material";
 import { Infobox } from "./Infobox";
 import { Legend, Subordinate } from "./Typography";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 import { useUniqueId } from "./useUniqueId";
 
 export type FieldsetProps = {
@@ -52,6 +53,7 @@ const Fieldset = ({
   legend,
   name,
 }: FieldsetProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const id = useUniqueId(idOverride);
 
   return (
@@ -61,14 +63,14 @@ const Fieldset = ({
       name={name}
       id={id}
       sx={{
-        maxWidth: (theme) => theme.mixins.maxWidth,
-        margin: (theme) => theme.spacing(0),
-        marginBlockEnd: (theme) => theme.spacing(6),
-        padding: (theme) => theme.spacing(0),
         border: "0",
+        margin: odysseyDesignTokens.Spacing0,
+        marginBlockEnd: odysseyDesignTokens.Spacing6,
+        maxWidth: odysseyDesignTokens.TypographyLineLengthMax,
+        padding: odysseyDesignTokens.Spacing0,
 
         "&:last-child": {
-          marginBlockEnd: (theme) => theme.spacing(0),
+          marginBlockEnd: odysseyDesignTokens.Spacing0,
         },
       }}
     >

packages/odyssey-react-mui/src/OdysseyDesignTokensContext.tsx

@@ -0,0 +1,19 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import * as Tokens from "@okta/odyssey-design-tokens";
+import { createContext, useContext } from "react";
+
+export const OdysseyDesignTokensContext = createContext<typeof Tokens>(Tokens);
+
+export const useOdysseyDesignTokens = () =>
+  useContext(OdysseyDesignTokensContext);

packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx

@@ -20,6 +20,7 @@ import { ScopedCssBaseline, ThemeOptions } from "@mui/material";
 import { deepmerge } from "@mui/utils";
 import { createOdysseyMuiTheme, DesignTokensOverride } from "./theme";
 import * as Tokens from "@okta/odyssey-design-tokens";
+import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext";
 
 export type OdysseyThemeProviderProps = {
   children: ReactNode;
@@ -32,8 +33,14 @@ const OdysseyThemeProvider = ({
   designTokensOverride,
   themeOverride,
 }: OdysseyThemeProviderProps) => {
-  const odysseyTokens = { ...Tokens, ...designTokensOverride };
-  const odysseyTheme = createOdysseyMuiTheme(odysseyTokens);
+  const odysseyTokens = useMemo(
+    () => ({ ...Tokens, ...designTokensOverride }),
+    [designTokensOverride]
+  );
+  const odysseyTheme = useMemo(
+    () => createOdysseyMuiTheme(odysseyTokens),
+    [odysseyTokens]
+  );
 
   const customOdysseyTheme = useMemo(
     () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),
@@ -42,7 +49,11 @@ const OdysseyThemeProvider = ({
 
   return (
     <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
-      <ScopedCssBaseline>{children}</ScopedCssBaseline>
+      <ScopedCssBaseline>
+        <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
+          {children}
+        </OdysseyDesignTokensContext.Provider>
+      </ScopedCssBaseline>
     </MuiThemeProvider>
   );
 };

packages/odyssey-react-mui/src/index.ts

@@ -54,6 +54,8 @@ export type {
   ThemeOptions,
 } from "@mui/material";
 
+export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
+
 export * from "./Autocomplete";
 export * from "./Banner";
 export * from "./Box";

packages/odyssey-react-mui/src/theme/index.ts

@@ -11,4 +11,3 @@
  */
 
 export * from "./theme";
-export { useTheme } from "@mui/material/styles";

packages/odyssey-storybook/src/guidelines/CustomTheming.stories.mdx

@@ -10,11 +10,11 @@ While our internal system relies on Material-UI, you don't need to know any of t
 
 ## Custom Component with Odyssey styles
 
-Customizing component styles with Odyssey theming is very simple. Just import `useTheme`, and everything is in there ready for you.
+Customizing component styles with Odyssey theming is very simple. Just import `useOdysseyDesignTokens`, and everything is in there ready for you.
 
 ```tsx
 import { css } from "@emotion/react";
-import { useTheme } from "@okta/odyssey-react-mui";
+import { useOdysseyDesignTokens } from "@okta/odyssey-react-mui";
 import { MouseEventHandler, ReactNode, useMemo } from "react";
 
 export type WhatchamacallitProps = {
@@ -26,15 +26,15 @@ export const Whatchamacallit = ({
   children,
   onClick,
 }: WhatchamacallitProps) => {
-  const theme = useTheme();
+  const odysseyDesignTokens = useOdysseyDesignTokens();
 
   const whatchamacallitStyles = useMemo(
     () => css`
-      border-radius: ${theme.shape.borderRadius};
-      color: ${theme.palette.text.secondary};
-      padding: ${theme.spacing(2)};
+      border-radius: ${odysseyDesignTokens.BorderRadiusMain};
+      color: ${odysseyDesignTokens.PaletteDangerText};
+      padding: ${odysseyDesignTokens.Spacing2};
     `,
-    [theme]
+    [odysseyDesignTokens]
   );
 
   return (
@@ -49,7 +49,7 @@ If the global theme switches from light to dark mode, you'll get that change as
 
 ### Theme Variables
 
-When using `useTheme`, you have access to these configuration variables:
+When using `useOdysseyDesignTokens`, you have access to these configuration variables:
 
 - `breakpoints`
 - `components`