@okta/odyssey-react-mui 0.14.1 → 0.14.4

package/src/themes/odyssey/components.types.ts

@@ -10,6 +10,47 @@
  * 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;
+    infobox: true;
+  }
+}
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsVariantOverrides {
+    floating: true;
+    primary: true;
+    secondary: true;
+    danger: true;
+    text: false;
+    contained: false;
+    outlined: false;
+  }
+  interface ButtonPropsSizeOverrides {
+    s: true;
+    m: true;
+    l: true;
+    small: false;
+    medium: false;
+    large: false;
+  }
+  interface ButtonPropsColorOverrides {
+    inherit: false;
+    primary: false;
+    secondary: false;
+    error: false;
+    info: false;
+    warning: false;
+    success: false;
+  }
+}
+
 declare module "@mui/material/Link" {
   interface LinkPropsVariantOverrides {
     default: true;
@@ -46,33 +87,5 @@ declare module "@mui/material/Link" {
     success: false;
   }
 }
-declare module "@mui/material/Button" {
-  interface ButtonPropsVariantOverrides {
-    floating: true;
-    primary: true;
-    secondary: true;
-    danger: true;
-    text: false;
-    contained: false;
-    outlined: false;
-  }
-  interface ButtonPropsSizeOverrides {
-    s: true;
-    m: true;
-    l: true;
-    small: false;
-    medium: false;
-    large: false;
-  }
-  interface ButtonPropsColorOverrides {
-    inherit: false;
-    primary: false;
-    secondary: false;
-    error: false;
-    info: false;
-    warning: false;
-    success: false;
-  }
-}
 
 export {};

package/src/themes/odyssey/palette.ts

@@ -11,77 +11,81 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
+import * as Tokens from "@okta/odyssey-design-tokens";
 
 export const palette: ThemeOptions["palette"] = {
   mode: "light",
   common: {
-    black: "#1d1d21",
-    white: "#ffffff",
+    black: Tokens.ColorNeutralDark,
+    white: Tokens.ColorPaletteNeutralWhite,
   },
   primary: {
-    light: "#a7b5ec",
-    main: "#1662dd",
-    dark: "#00297a",
-    contrastText: "#ffffff",
+    lighter: Tokens.ColorPaletteBlue000,
+    light: Tokens.ColorPaletteBlue300,
+    main: Tokens.ColorPaletteBlue500,
+    dark: Tokens.ColorPaletteBlue900,
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   secondary: {
-    light: "#80C7CA",
-    main: "#2D8C9E",
+    light: "#80c7ca",
+    main: Tokens.ColorPaletteTurquoise500,
     dark: "#004650",
-    contrastText: "#ffffff",
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   error: {
-    light: "#f88c90",
-    main: "#da372c",
-    dark: "#640019",
-    contrastText: "#ffffff",
+    lighter: Tokens.ColorPaletteRed000,
+    light: Tokens.ColorPaletteRed300,
+    main: Tokens.ColorPaletteRed500,
+    dark: Tokens.ColorPaletteRed900,
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   warning: {
-    light: "#f9dc77",
-    main: "#ffc61c",
-    dark: "#663800",
-    contrastText: "#1d1d21",
+    lighter: Tokens.ColorPaletteYellow000,
+    light: Tokens.ColorPaletteYellow300,
+    main: Tokens.ColorPaletteYellow500,
+    dark: Tokens.ColorPaletteYellow900,
+    contrastText: Tokens.ColorTextBody,
   },
   info: {
-    light: "#a7b5ec",
-    main: "#1662dd",
-    dark: "#00297a",
-    contrastText: "#ffffff",
+    lighter: Tokens.ColorPaletteBlue000,
+    light: Tokens.ColorPaletteBlue300,
+    main: Tokens.ColorPaletteBlue500,
+    dark: Tokens.ColorPaletteBlue900,
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   success: {
-    light: "#84d2b1",
-    main: "#00b478",
-    dark: "#00503c",
-    contrastText: "#ffffff",
+    lighter: Tokens.ColorPaletteGreen000,
+    light: Tokens.ColorPaletteGreen300,
+    main: Tokens.ColorPaletteGreen500,
+    dark: Tokens.ColorPaletteGreen900,
+    contrastText: Tokens.ColorTextBodyInverse,
   },
   grey: {
-    50: "#f5f5f6",
-    100: "#ebebed",
-    200: "#d7d7dc",
+    50: Tokens.ColorPaletteNeutral000,
+    100: Tokens.ColorPaletteNeutral100,
+    200: Tokens.ColorPaletteNeutral200,
     300: "#c1c1c8",
     400: "#aaaab4",
-    500: "#8c8c96",
-    600: "#6e6e78",
+    500: Tokens.ColorPaletteNeutral500,
+    600: Tokens.ColorPaletteNeutral600,
     700: "#585862",
     800: "#41414b",
-    900: "#1d1d21",
+    900: Tokens.ColorPaletteNeutral900,
     // These are "Accent" colors. MUI's palette matches them to the standard greys.
-    A100: "#ebebed",
-    A200: "#d7d7dc",
+    A100: Tokens.ColorPaletteNeutral100,
+    A200: Tokens.ColorPaletteNeutral200,
     A400: "#aaaab4",
     A700: "#585862",
   },
   text: {
-    primary: "#1d1d21",
-    secondary: "#6e6e78",
-    // We do not currently have a unique disabled color.
-    disabled: "#6e6e78",
+    primary: Tokens.ColorNeutralDark,
+    secondary: Tokens.ColorNeutralBase,
+    disabled: Tokens.ColorNeutralBase, // We do not currently have a unique disabled color.
   },
-  // Currently mapping this to ColorBorderDisplay.
-  divider: "#d7d7dc",
+  divider: Tokens.ColorBorderDisplay,
   background: {
-    paper: "#ffffff",
-    default: "#ffffff",
+    paper: Tokens.ColorBackgroundBase,
+    default: Tokens.ColorBackgroundBase,
   },
   action: {
     // We have no equivalents here. It's likely we will update these as their uses are discovered.

package/src/themes/odyssey/palette.types.ts

@@ -0,0 +1,22 @@
+/*!
+ * 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 PaletteColor {
+    lighter?: string;
+  }
+  interface SimplePaletteColorOptions {
+    lighter?: string;
+  }
+}
+
+export {};

package/src/themes/odyssey/theme.ts

@@ -13,6 +13,7 @@
 import { createTheme } from "@mui/material/styles";
 
 import { palette } from "./palette";
+import "./palette.types";
 import { shape } from "./shape";
 import { spacing } from "./spacing";
 import { typography } from "./typography";

package/src/themes/odyssey/typography.ts

@@ -21,52 +21,46 @@ export const typography: ThemeOptions["typography"] = {
   fontWeightRegular: Number(Tokens.FontWeightNormal),
   fontWeightMedium: 500,
   fontWeightBold: Number(Tokens.FontWeightBold),
-  h1: {
+  allVariants: {
     fontFamily: Tokens.FontFamilyBase,
+    fontFeatureSettings: "'lnum', 'pnum'",
+    fontVariant: "normal",
+    letterSpacing: 0,
+  },
+  h1: {
     fontWeight: Tokens.FontWeightBold,
     fontSize: Tokens.FontSizeHeading1,
     lineHeight: Tokens.FontLineHeightHeading1,
-    letterSpacing: "initial",
     marginBottom: Tokens.SpaceScale1,
   },
   h2: {
-    fontFamily: Tokens.FontFamilyBase,
     fontWeight: Tokens.FontWeightBold,
     fontSize: Tokens.FontSizeHeading2,
     lineHeight: Tokens.FontLineHeightHeading2,
-    letterSpacing: "initial",
     marginBottom: Tokens.SpaceScale1,
   },
   h3: {
-    fontFamily: Tokens.FontFamilyBase,
     fontWeight: Tokens.FontWeightBold,
     fontSize: Tokens.FontSizeHeading3,
     lineHeight: Tokens.FontLineHeightHeading3,
-    letterSpacing: "initial",
     marginBottom: Tokens.SpaceScale1,
   },
   h4: {
-    fontFamily: Tokens.FontFamilyBase,
     fontWeight: Tokens.FontWeightBold,
     fontSize: Tokens.FontSizeHeading4,
     lineHeight: Tokens.FontLineHeightHeading4,
-    letterSpacing: "initial",
     marginBottom: Tokens.SpaceScale1,
   },
   h5: {
-    fontFamily: Tokens.FontFamilyBase,
     fontWeight: Tokens.FontWeightBold,
     fontSize: Tokens.FontSizeHeading5,
     lineHeight: Tokens.FontLineHeightHeading5,
-    letterSpacing: "initial",
     marginBottom: Tokens.SpaceScale1,
   },
   h6: {
-    fontFamily: Tokens.FontFamilyBase,
     fontWeight: Tokens.FontWeightBold,
     fontSize: Tokens.FontScale2,
     lineHeight: Tokens.FontLineHeightHeading6,
-    letterSpacing: "initial",
     marginBottom: Tokens.SpaceScale1,
   },
   subtitle1: undefined,
@@ -75,6 +69,8 @@ export const typography: ThemeOptions["typography"] = {
     fontFamily: Tokens.FontFamilyBase,
     fontWeight: Number(Tokens.FontWeightNormal),
     fontSize: Tokens.FontScale1,
+    fontFeatureSettings: "'lnum', 'pnum'",
+    fontVariant: "normal",
     lineHeight: Tokens.FontLineHeightBody,
     letterSpacing: "initial",
   },
@@ -82,11 +78,9 @@ export const typography: ThemeOptions["typography"] = {
   body2: undefined,
   button: undefined,
   caption: {
-    fontFamily: Tokens.FontFamilyBase,
     fontWeight: Tokens.FontWeightNormal,
     fontSize: Tokens.FontScale0,
     lineHeight: Tokens.FontLineHeightBody,
-    letterSpacing: "initial",
   },
   overline: undefined,
 };

package/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@okta/odyssey-typescript/tsconfig.react.json"
+  "extends": "@okta/odyssey-typescript/tsconfig.react.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
 }

package/tsconfig.production.json

@@ -1,7 +1,8 @@
 {
   "extends": "@okta/odyssey-typescript/tsconfig.react.types.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "dist",
+    "jsx": "react-jsx"
   },
   "exclude": ["./test", "**/*.test.**", "**/dist/**/*"]
 }