import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as i}from"./index-BeeV6X6A.js";import{M as r,C as t}from"./index-DLgQDw3r.js";import{ButtonStory as d,TextFieldStory as m,RadioGroupStory as c}from"./Custom Theming.stories-CxVTbjdx.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-Cf-Lpz6Y.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./OdysseyThemeProvider-Bh0Bu-2o.js";import"./Button-BEA5U6Tg.js";import"./BaseButton-DYZHKnV3.js";import"./MuiPropsContext-DhRylJZk.js";import"./Tooltip-CsVWtVfL.js";import"./Tooltip-Cq2rQGbD.js";import"./Grow-C8kUeGCY.js";import"./utils-kUZVaD1e.js";import"./inheritsLoose-CJ6Ie9dp.js";import"./TransitionGroupContext-DAL84N7p.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./getReactElementRef-DsIevm5t.js";import"./resolveComponentProps-DXQ8X87i.js";import"./isHostComponent-DVu5iVWx.js";import"./useControlled-NQulfz4l.js";import"./Popper-BARIxJrI.js";import"./popper-BVOCD5jc.js";import"./ownerDocument-DW-IO8s5.js";import"./Portal-C6D59xAE.js";import"./Button-BzIwUmSM.js";import"./ButtonBase-BNqa2TMD.js";import"./assertThisInitialized-B9jnkVVz.js";import"./OdysseyProvider-qIn9QVYS.js";import"./TextField-BhK0y2Zt.js";import"./Field-DH3L8v09.js";import"./Box-1mvP3NLW.js";import"./Box-BcMTQ_R2.js";import"./createBox-Dxawkfow.js";import"./List-CmjR1pNu.js";import"./ListItem-C0ExFtXb.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-CiGre9wK.js";import"./ScreenReaderText-CebALBsG.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-CsNAE1E3.js";import"./FieldHint-B3Jif_Up.js";import"./Typography-Cz6D417Y.js";import"./Typography-ClQ35Rr-.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./inputUtils-Dbi8XkA6.js";import"./InputBase-DeB4_faH.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./InputAdornment-CdR3XT6f.js";import"./RadioGroup-BYJZ378_.js";import"./Radio-BdNnpooK.js";import"./Hint-DoJneNg9.js";import"./FormControlLabel-0BBemR80.js";import"./Stack-B7OGvu7C.js";import"./createStyled-D6bTcpHC.js";import"./useThemeProps-DwvbKxez.js";import"./Radio-B4gVvwps.js";import"./SwitchBase-CefEM0OA.js";import"./createSvgIcon-ClUWwDzL.js";import"./createChainedFunction-BO_9K8Jh.js";import"./RadioGroup-CtUWSbQc.js";import"./FormGroup-HFkGZ983.js";import"./Paper-D-_O-EjU.js";import"./MenuList-BMOesnfs.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./MenuItem-CmSG6PNu.js";import"./MenuContext-DKMyPMNY.js";import"./MenuItem-vhp8G-Nb.js";function s(o){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...i(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{}),`
`,e.jsx(n.h1,{id:"custom-theming-odyssey-components",children:"Custom Theming Odyssey Components"}),`
`,e.jsx(n.p,{children:"Odyssey has its own theming system which other devs can hook into."}),`
`,e.jsx(n.p,{children:"While our internal system relies on Material-UI, you don't need to know any of that to interact with it."}),`
`,e.jsx(n.h2,{id:"custom-component-with-odyssey-styles",children:"Custom Component with Odyssey styles"}),`
`,e.jsxs(n.p,{children:["Customizing component styles with Odyssey theming is very simple. Just import ",e.jsx(n.code,{children:"useOdysseyDesignTokens"}),", and everything is in there ready for you."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { css } from "@emotion/react";
import { useOdysseyDesignTokens } from "@okta/odyssey-react-mui";
import { MouseEventHandler, ReactNode, useMemo } from "react";

export type WhatchamacallitProps = {
  children: ReactNode;
  onClick: MouseEventHandler;
};

export const Whatchamacallit = ({
  children,
  onClick,
}: WhatchamacallitProps) => {
  const odysseyDesignTokens = useOdysseyDesignTokens();

  const whatchamacallitStyles = useMemo(
    () => css\`
      border-radius: \${odysseyDesignTokens.BorderRadiusMain};
      color: \${odysseyDesignTokens.PaletteDangerText};
      padding: \${odysseyDesignTokens.Spacing2};
    \`,
    [odysseyDesignTokens],
  );

  return (
    <button css={whatchamacallitStyles} onClick={onClick}>
      {children}
    </button>
  );
};
`})}),`
`,e.jsxs(n.p,{children:["If the global theme switches from light to dark mode, you'll get that change as well. You can find out the current mode under ",e.jsx(n.code,{children:"theme.pallet.mode"}),"."]}),`
`,e.jsx(n.h3,{id:"theme-variables",children:"Theme Variables"}),`
`,e.jsxs(n.p,{children:["When using ",e.jsx(n.code,{children:"useOdysseyDesignTokens"}),", you have access to these configuration variables:"]}),`
`,e.jsxs(n.ul,{children:[`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"breakpoints"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"components"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"direction"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"mixins"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"palette"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"shadows"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"shape"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"spacing"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"transitions"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"typography"})}),`
`,e.jsx(n.li,{children:e.jsx(n.code,{children:"zIndex"})}),`
`]}),`
`,e.jsxs(n.p,{children:["Light and dark modes are defined by ",e.jsx(n.code,{children:"palette.mode"}),"."]}),`
`,e.jsxs(n.p,{children:["If you need to know about right-to-left, that's ",e.jsx(n.code,{children:"direction"}),". It gives you either ",e.jsx(n.code,{children:"'ltr'"})," or ",e.jsx(n.code,{children:"'rtl'"}),"."]}),`
`,e.jsx(n.h2,{id:"overridding-global-theme-properties",children:"Overridding Global Theme Properties"}),`
`,e.jsx(n.p,{children:"You can also override Odyssey's global theme. Doing so is much more complex than adding styles to a component and should only be used by teams that absolutely need customizing global styles."}),`
`,e.jsx(n.p,{children:"In general, we advise teams never shift any colors or spacing values from the defaults unless you have an explict design reason to do so."}),`
`,e.jsxs(n.p,{children:["To customize your theme, you need to use ",e.jsx(n.code,{children:"MuiThemeProvider"})," directly after merging your theme changes with the Odyssey theme."]}),`
`,e.jsxs(n.p,{children:["Our theming utilizes MUI's ",e.jsx(n.code,{children:"ThemeOptions"})," under-the-hood, so you can find more in-depth information customizing the theme ",e.jsx(n.a,{href:"https://mui.com/material-ui/customization/theming/",rel:"nofollow",children:"in their docs"}),"."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`import {
  ThemeOptions,
  OdysseyCacheProvider,
  DesignTokensOverride,
  createOdysseyMuiTheme,
  createTheme,
  deepmerge,
  MuiThemeProvider,
} from "@okta/odyssey-react-mui";

import { useMemo } from "react";
import * as Tokens from "@okta/odyssey-design-tokens";

const themeOverrides: ThemeOptions = useMemo(() => {
  return {
    components: {
      MuiAlert: {
        styleOverrides: {
          root: ({ theme }) => ({
            color: theme.palette.text.secondary,
          }),
        },
      },
    },
    mixins: {
      borderWidth: Tokens.BorderWidthBase + 2,
    },
    palette: {
      primary: {
        main: Tokens.ColorPaletteNeutral900,
      }
    },
    shape: {
      borderRadius: 4,
    },
    spacing: [
      Tokens.SpaceScale0,
      Tokens.SpaceScale1,
      Tokens.SpaceScale2,
      Tokens.SpaceScale3,
      Tokens.SpaceScale4,
      Tokens.SpaceScale5,
      Tokens.SpaceScale6,
      Tokens.SpaceScale7,
      Tokens.SpaceScale8,
      Tokens.SpaceScale9,
    ],
    typography: {
      fontSize: 16,
    },
}, []);

const odysseyTheme = createOdysseyMuiTheme(Tokens);
const customOdysseyTheme = useMemo(
  () =>
    themeOverrides && createTheme(deepmerge(odysseyTheme, themeOverrides)),
  [odysseyTheme, themeOverrides]
);

const YourAppRoot = ({ children }) => (
  <OdysseyProvider muiTheme={muiTheme}>
    {children}
  </OdysseyProvider>
);
`})}),`
`,e.jsx(n.h2,{id:"custom-theme-examples",children:"Custom Theme Examples"}),`
`,e.jsx(n.p,{children:"A way to use a custom theme to override the Odyssey default theme."}),`
`,e.jsx(n.h3,{id:"behavior",children:"Behavior"}),`
`,e.jsxs(n.p,{children:["Visually, the MUI components under ",e.jsx(n.code,{children:"OdysseyThemeProvider"})," with a custom theme would consume that theme."]}),`
`,e.jsx(n.h4,{id:"button-primary",children:"Button Primary"}),`
`,e.jsx(t,{of:d}),`
`,e.jsx(n.h4,{id:"input-default",children:"Input Default"}),`
`,e.jsx(t,{of:m}),`
`,e.jsx(n.h4,{id:"radio-default",children:"Radio Default"}),`
`,e.jsx(t,{of:c})]})}function Re(o={}){const{wrapper:n}={...i(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(s,{...o})}):s(o)}export{Re as default};
