@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/theme/components.types.ts

@@ -1,111 +0,0 @@
-/*!
- * Copyright (c) 2022-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.
- */
-
-declare module "@mui/material/Alert" {
-  interface AlertPropsVariantOverrides {
-    // Disable Mui defaults
-    filled: false;
-    outlined: false;
-    standard: false;
-    // Enable Odyssey variants
-    banner: true;
-    callout: true;
-    toast: true;
-  }
-}
-
-declare module "@mui/material/Button" {
-  interface ButtonPropsVariantOverrides {
-    contained: false;
-    danger: true;
-    dangerSecondary: true;
-    floating: true;
-    floatingAction: true;
-    outlined: false;
-    primary: true;
-    secondary: true;
-    tertiary: true;
-    text: false;
-  }
-  interface ButtonPropsColorOverrides {
-    inherit: false;
-    primary: false;
-    secondary: false;
-    error: false;
-    info: false;
-    warning: false;
-    success: false;
-  }
-}
-
-declare module "@mui/material/Chip" {
-  interface ChipPropsVariantOverrides {
-    // Enable Odyssey variant for Status component
-    lamp: true;
-    pill: true;
-  }
-}
-
-declare module "@mui/material/Link" {
-  interface LinkPropsVariantOverrides {
-    default: true;
-    monochrome: true;
-    body1: false;
-    body2: false;
-    button: false;
-    h1: false;
-    h2: false;
-    h3: false;
-    h4: false;
-    h5: false;
-    h6: false;
-    inherit: false;
-    overline: false;
-    subtitle1: false;
-    subtitle2: false;
-  }
-
-  interface LinkPropsUnderlineOverrides {
-    none: false;
-    hover: false;
-    always: false;
-  }
-
-  interface LinkPropsColorOverrides {
-    inherit: false;
-    primary: false;
-    secondary: false;
-    error: false;
-    info: false;
-    warning: false;
-    success: false;
-  }
-}
-
-declare module "@mui/material/TableCell" {
-  interface TableCellPropsVariantOverrides {
-    action: true;
-    body: true;
-    date: true;
-    footer: true;
-    head: true;
-    number: true;
-  }
-}
-
-declare module "@mui/material/Tooltip" {
-  interface TooltipComponentsPropsOverrides {
-    placement?: "bottom" | "left" | "right" | "top";
-  }
-}
-
-export {};

package/src/theme/createOdysseyMuiTheme.ts

@@ -1,54 +0,0 @@
-/*!
- * 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 { createTheme } from "@mui/material/styles";
-import * as Tokens from "@okta/odyssey-design-tokens";
-
-import { getComponents } from "./components.js";
-import { mixins } from "./mixins.js";
-import { palette } from "./palette.js";
-import { shape } from "./shape.js";
-import { spacing } from "./spacing.js";
-import { typography } from "./typography.js";
-import "./components.types.js";
-import "./mixins.types.js";
-import "./palette.types.js";
-import "./typography.types.js";
-import { type ContrastMode, defaultContrast } from "../useContrastMode.js";
-
-export type DesignTokens = typeof Tokens;
-export type DesignTokensOverride = Partial<typeof Tokens>;
-
-export const createOdysseyMuiTheme = ({
-  contrastMode = defaultContrast,
-  odysseyTokens,
-  shadowDomElement,
-  shadowRootElement,
-}: {
-  contrastMode?: ContrastMode;
-  odysseyTokens: DesignTokens;
-  /** @deprecated Use `shadowRootElement` */
-  shadowDomElement?: HTMLElement;
-  shadowRootElement?: HTMLElement;
-}) =>
-  createTheme({
-    components: getComponents({
-      contrastMode,
-      odysseyTokens,
-      shadowRootElement: shadowRootElement || shadowDomElement,
-    }),
-    mixins: mixins({ odysseyTokens }),
-    palette: palette({ odysseyTokens }),
-    shape: shape({ odysseyTokens }),
-    spacing: spacing({ odysseyTokens }),
-    typography: typography({ odysseyTokens }),
-  });

package/src/theme/index.ts

@@ -1,13 +0,0 @@
-/*!
- * Copyright (c) 2022-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.
- */
-
-export * from "./theme.js";

package/src/theme/mixins.ts

@@ -1,29 +0,0 @@
-/*!
- * Copyright (c) 2022-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 type { ThemeOptions } from "@mui/material";
-
-import { DesignTokens } from "./theme.js";
-
-export const mixins = ({
-  odysseyTokens,
-}: {
-  odysseyTokens: DesignTokens;
-}): ThemeOptions["mixins"] => {
-  return {
-    maxWidth: odysseyTokens.TypographyLineLengthMax,
-    borderRadius: odysseyTokens.BorderRadiusMain,
-    borderStyle: odysseyTokens.BorderStyleMain,
-    borderWidth: odysseyTokens.BorderWidthMain,
-    insetFocusRing: `inset 0 0 0 2px ${odysseyTokens.PalettePrimaryMain}`,
-  };
-};

package/src/theme/mixins.types.ts

@@ -1,31 +0,0 @@
-/*!
- * Copyright (c) 2022-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.
- */
-
-declare module "@mui/material/styles" {
-  interface Mixins {
-    borderRadius?: string;
-    borderStyle?: string;
-    borderWidth?: string;
-    maxWidth?: string;
-    insetFocusRing?: string;
-  }
-
-  interface MixinsOptions {
-    borderRadius?: string;
-    borderStyle?: string;
-    borderWidth?: string;
-    maxWidth?: string;
-    insetFocusRing?: string;
-  }
-}
-
-export {};

package/src/theme/palette.ts

@@ -1,112 +0,0 @@
-/*!
- * Copyright (c) 2022-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 type { ThemeOptions } from "@mui/material";
-
-import { DesignTokens } from "./theme.js";
-
-export const palette = ({
-  odysseyTokens,
-}: {
-  odysseyTokens: DesignTokens;
-}): ThemeOptions["palette"] => {
-  return {
-    mode: "light",
-    common: {
-      black: odysseyTokens.HueNeutral900,
-      white: odysseyTokens.HueNeutralWhite,
-    },
-    primary: {
-      lighter: odysseyTokens.HueBlue50,
-      light: odysseyTokens.HueBlue300,
-      main: odysseyTokens.HueBlue500,
-      dark: odysseyTokens.HueBlue700,
-      darker: odysseyTokens.HueBlue800,
-      contrastText: odysseyTokens.TypographyColorInverse,
-    },
-    secondary: {
-      light: "#80c7ca",
-      main: "#096256",
-      dark: "#004650",
-      contrastText: odysseyTokens.TypographyColorInverse,
-    },
-    error: {
-      lighter: odysseyTokens.HueRed50,
-      light: odysseyTokens.HueRed300,
-      main: odysseyTokens.HueRed500,
-      dark: odysseyTokens.HueRed900,
-      contrastText: odysseyTokens.TypographyColorInverse,
-    },
-    warning: {
-      lighter: odysseyTokens.HueYellow50,
-      light: odysseyTokens.HueYellow300,
-      main: odysseyTokens.HueYellow500,
-      dark: odysseyTokens.HueYellow900,
-      contrastText: odysseyTokens.TypographyColorBody,
-    },
-    info: {
-      lighter: odysseyTokens.HueBlue50,
-      light: odysseyTokens.HueBlue300,
-      main: odysseyTokens.HueBlue500,
-      dark: odysseyTokens.HueBlue900,
-      contrastText: odysseyTokens.TypographyColorInverse,
-    },
-    success: {
-      lighter: odysseyTokens.HueGreen50,
-      light: odysseyTokens.HueGreen300,
-      main: odysseyTokens.HueGreen500,
-      dark: odysseyTokens.HueGreen900,
-      contrastText: odysseyTokens.TypographyColorInverse,
-    },
-    grey: {
-      50: odysseyTokens.HueNeutral50,
-      100: odysseyTokens.HueNeutral100,
-      200: odysseyTokens.HueNeutral200,
-      300: odysseyTokens.HueNeutral300,
-      400: odysseyTokens.HueNeutral400,
-      500: odysseyTokens.HueNeutral500,
-      600: odysseyTokens.HueNeutral600,
-      700: odysseyTokens.HueNeutral700,
-      800: odysseyTokens.HueNeutral800,
-      900: odysseyTokens.HueNeutral900,
-      // These are "Accent" colors. MUI's palette matches them to the standard greys.
-      A100: odysseyTokens.HueNeutral100,
-      A200: odysseyTokens.HueNeutral200,
-      A400: odysseyTokens.HueNeutral400,
-      A700: odysseyTokens.HueNeutral700,
-    },
-    text: {
-      primary: odysseyTokens.HueNeutral900,
-      secondary: odysseyTokens.HueNeutral600,
-      disabled: odysseyTokens.HueNeutral300,
-    },
-    divider: odysseyTokens.BorderColorDisplay,
-    background: {
-      paper: odysseyTokens.HueNeutralWhite,
-      default: odysseyTokens.HueNeutralWhite,
-    },
-    action: {
-      // We have no equivalents here. It's likely we will update these as their uses are discovered.
-      active: "rgba(0, 0, 0, 0.54)",
-      hover: "rgba(0, 0, 0, 0.04)",
-      hoverOpacity: 0.04,
-      selected: "rgba(0, 0, 0, 0.08)",
-      selectedOpacity: 0.08,
-      disabled: odysseyTokens.HueNeutral200,
-      disabledBackground: "rgba(0, 0, 0, 0.12)",
-      disabledOpacity: 0.38,
-      focus: "rgba(0, 0, 0, 0.12)",
-      focusOpacity: 0.12,
-      activatedOpacity: 0.12,
-    },
-  };
-};

package/src/theme/shape.ts

@@ -1,31 +0,0 @@
-/*!
- * Copyright (c) 2022-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 type { ThemeOptions } from "@mui/material";
-
-import { DesignTokens } from "./theme.js";
-
-export const shape = ({
-  odysseyTokens,
-}: {
-  odysseyTokens: DesignTokens;
-}): ThemeOptions["shape"] => {
-  // Strip units from BorderRadiusBase to accommodate MUI's typing
-  const NumericalBorderRadiusBase =
-    typeof odysseyTokens.BorderRadiusMain === "string"
-      ? Number(odysseyTokens.BorderRadiusMain.replace(/(\d+).*/, "$1"))
-      : odysseyTokens.BorderRadiusMain;
-
-  return {
-    borderRadius: NumericalBorderRadiusBase,
-  };
-};

package/src/theme/spacing.ts

@@ -1,34 +0,0 @@
-/*!
- * Copyright (c) 2022-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 type { ThemeOptions } from "@mui/material";
-
-import type { DesignTokens } from "./theme.js";
-
-export const spacing = ({
-  odysseyTokens,
-}: {
-  odysseyTokens: DesignTokens;
-}): ThemeOptions["spacing"] => {
-  return [
-    odysseyTokens.Spacing0,
-    odysseyTokens.Spacing1,
-    odysseyTokens.Spacing2,
-    odysseyTokens.Spacing3,
-    odysseyTokens.Spacing4,
-    odysseyTokens.Spacing5,
-    odysseyTokens.Spacing6,
-    odysseyTokens.Spacing7,
-    odysseyTokens.Spacing8,
-    odysseyTokens.Spacing9,
-  ];
-};

package/src/theme/theme.ts

@@ -1,13 +0,0 @@
-/*!
- * Copyright (c) 2022-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.
- */
-
-export * from "./createOdysseyMuiTheme.js";

package/src/theme/typography.ts

@@ -1,137 +0,0 @@
-/*!
- * Copyright (c) 2022-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 type { ThemeOptions } from "@mui/material";
-
-import { DesignTokens } from "./theme.js";
-
-export const typography = ({
-  odysseyTokens,
-}: {
-  odysseyTokens: DesignTokens;
-}): ThemeOptions["typography"] => {
-  return {
-    htmlFontSize: 16,
-    fontFamily: odysseyTokens.TypographyFamilyBody,
-    fontSize: 14,
-    fontWeightLight: 300,
-    fontWeightRegular: Number(odysseyTokens.TypographyWeightBody),
-    fontWeightMedium: Number(odysseyTokens.TypographyWeightHeading),
-    fontWeightBold: Number(odysseyTokens.TypographyWeightHeadingBold),
-    allVariants: {
-      fontFeatureSettings: "'lnum', 'pnum'",
-      fontVariant: "normal",
-      letterSpacing: 0,
-    },
-    h1: {
-      fontFamily: odysseyTokens.TypographyFamilyHeading,
-      color: odysseyTokens.TypographyColorHeading,
-      fontWeight: Number(odysseyTokens.TypographyWeightHeading),
-      fontSize: odysseyTokens.TypographySizeHeading1,
-      lineHeight: odysseyTokens.TypographyLineHeightHeading1,
-      marginBottom: odysseyTokens.Spacing2,
-    },
-    h2: {
-      fontFamily: odysseyTokens.TypographyFamilyHeading,
-      color: odysseyTokens.TypographyColorHeading,
-      fontWeight: Number(odysseyTokens.TypographyWeightHeading),
-      fontSize: odysseyTokens.TypographySizeHeading2,
-      lineHeight: odysseyTokens.TypographyLineHeightHeading2,
-      marginBottom: odysseyTokens.Spacing2,
-    },
-    h3: {
-      fontFamily: odysseyTokens.TypographyFamilyHeading,
-      color: odysseyTokens.TypographyColorHeading,
-      fontWeight: Number(odysseyTokens.TypographyWeightHeading),
-      fontSize: odysseyTokens.TypographySizeHeading3,
-      lineHeight: odysseyTokens.TypographyLineHeightHeading3,
-      marginBottom: odysseyTokens.Spacing2,
-    },
-    h4: {
-      fontFamily: odysseyTokens.TypographyFamilyHeading,
-      color: odysseyTokens.TypographyColorHeading,
-      fontWeight: Number(odysseyTokens.TypographyWeightHeading),
-      fontSize: odysseyTokens.TypographySizeHeading4,
-      lineHeight: odysseyTokens.TypographyLineHeightHeading4,
-      marginBottom: odysseyTokens.Spacing2,
-    },
-    h5: {
-      fontFamily: odysseyTokens.TypographyFamilyHeading,
-      color: odysseyTokens.TypographyColorHeading,
-      fontWeight: Number(odysseyTokens.TypographyWeightHeading),
-      fontSize: odysseyTokens.TypographySizeHeading5,
-      lineHeight: odysseyTokens.TypographyLineHeightHeading5,
-      marginBottom: odysseyTokens.Spacing2,
-    },
-    h6: {
-      fontFamily: odysseyTokens.TypographyFamilyHeading,
-      color: odysseyTokens.TypographyColorHeading,
-      fontWeight: Number(odysseyTokens.TypographyWeightHeading),
-      fontSize: odysseyTokens.TypographySizeHeading6,
-      lineHeight: odysseyTokens.TypographyLineHeightHeading6,
-      marginBottom: odysseyTokens.Spacing2,
-    },
-    subtitle1: {
-      // "caption"
-      color: odysseyTokens.TypographyColorSubordinate,
-      fontWeight: Number(odysseyTokens.TypographyWeightBody),
-      fontSize: odysseyTokens.TypographySizeSubordinate,
-      lineHeight: odysseyTokens.TypographyLineHeightBody,
-    },
-    subtitle2: {
-      // "body.light"
-      color: odysseyTokens.TypographyColorSupport,
-      fontFamily: odysseyTokens.TypographyFamilyBody,
-      fontWeight: Number(odysseyTokens.TypographyWeightBody),
-      fontSize: odysseyTokens.TypographySizeBody,
-      fontFeatureSettings: "'lnum', 'pnum'",
-      fontVariant: "normal",
-      lineHeight: odysseyTokens.TypographyLineHeightBody,
-      letterSpacing: "initial",
-      marginBlockEnd: odysseyTokens.Spacing4,
-    },
-    body1: {
-      color: odysseyTokens.TypographyColorBody,
-      fontFamily: odysseyTokens.TypographyFamilyBody,
-      fontWeight: Number(odysseyTokens.TypographyWeightBody),
-      fontSize: odysseyTokens.TypographySizeBody,
-      fontFeatureSettings: "'lnum', 'pnum'",
-      fontVariant: "normal",
-      lineHeight: odysseyTokens.TypographyLineHeightBody,
-      letterSpacing: "initial",
-    },
-    body2: undefined,
-    button: undefined,
-    overline: {
-      fontWeight: Number(odysseyTokens.TypographyWeightHeadingBold),
-      fontFamily: odysseyTokens.TypographyFamilyBody,
-      lineHeight: odysseyTokens.TypographyLineHeightOverline,
-      letterSpacing: "5%",
-      textTransform: "uppercase",
-      fontSize: "0.71428571rem",
-    },
-    legend: {
-      padding: 0,
-      fontFamily: odysseyTokens.TypographyFamilyHeading,
-      fontWeight: Number(odysseyTokens.TypographyWeightHeading),
-      fontSize: odysseyTokens.TypographySizeHeading5,
-      lineHeight: odysseyTokens.TypographyLineHeightHeading5,
-      marginBottom: odysseyTokens.Spacing2,
-    },
-    ui: {
-      fontWeight: Number(odysseyTokens.TypographyWeightBody),
-      fontSize: odysseyTokens.TypographySizeBody,
-      lineHeight: odysseyTokens.TypographyLineHeightUi,
-      letterSpacing: "initial",
-    },
-  };
-};

package/src/theme/typography.types.ts

@@ -1,41 +0,0 @@
-/*!
- * Copyright (c) 2022-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 { CSSProperties } from "react";
-
-declare module "@mui/material/styles" {
-  interface TypographyVariants {
-    legend: CSSProperties;
-    ui: CSSProperties;
-  }
-  interface TypographyVariantsOptions {
-    legend?: CSSProperties;
-    ui: CSSProperties;
-  }
-}
-
-declare module "@mui/material/Typography" {
-  interface TypographyPropsVariantOverrides {
-    body1: true; // Design may refer to this as "body"
-    body2: false;
-    button: false;
-    legend: true;
-    overline: true;
-    subtitle1: true; // Design may refer to this as "caption"
-    subtitle2: true;
-    ui: true;
-    default: true; // used by <Link>
-    monochrome: true; // used by <Link>
-  }
-}
-
-export {};