@okta/odyssey-react-mui 0.14.3 → 0.14.6

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

@@ -19,6 +19,7 @@ declare module "@mui/material/Alert" {
     // Enable Odyssey variants
     banner: true;
     infobox: true;
+    toast: true;
   }
 }
 

package/src/themes/odyssey/mixins.ts

@@ -0,0 +1,21 @@
+/*!
+ * 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 * as Tokens from "@okta/odyssey-design-tokens";
+
+export const mixins: ThemeOptions["mixins"] = {
+  maxWidth: Tokens.FontLineLengthMax,
+  borderRadius: Tokens.BorderRadiusBase,
+  borderStyle: Tokens.BorderStyleBase,
+  borderWidth: Tokens.BorderWidthBase,
+};

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

@@ -0,0 +1,29 @@
+/*!
+ * 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;
+  }
+
+  interface MixinsOptions {
+    borderRadius?: string;
+    borderStyle?: string;
+    borderWidth?: string;
+    maxWidth?: string;
+  }
+}
+
+export {};

package/src/themes/odyssey/palette.ts

@@ -27,7 +27,7 @@ export const palette: ThemeOptions["palette"] = {
     contrastText: Tokens.ColorTextBodyInverse,
   },
   secondary: {
-    light: "#80C7CA",
+    light: "#80c7ca",
     main: Tokens.ColorPaletteTurquoise500,
     dark: "#004650",
     contrastText: Tokens.ColorTextBodyInverse,
@@ -61,26 +61,26 @@ export const palette: ThemeOptions["palette"] = {
     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: Tokens.ColorNeutralDark,
-    secondary: Tokens.ColorNeutralBase,
-    disabled: Tokens.ColorNeutralBase, // We do not currently have a unique disabled color.
+    primary: Tokens.ColorPaletteNeutral900,
+    secondary: Tokens.ColorPaletteNeutral600,
+    disabled: Tokens.ColorPaletteNeutral500,
   },
   divider: Tokens.ColorBorderDisplay,
   background: {
@@ -94,7 +94,7 @@ export const palette: ThemeOptions["palette"] = {
     hoverOpacity: 0.04,
     selected: "rgba(0, 0, 0, 0.08)",
     selectedOpacity: 0.08,
-    disabled: "rgba(0, 0, 0, 0.26)",
+    disabled: Tokens.ColorPaletteNeutral200,
     disabledBackground: "rgba(0, 0, 0, 0.12)",
     disabledOpacity: 0.38,
     focus: "rgba(0, 0, 0, 0.12)",

package/src/themes/odyssey/theme.ts

@@ -15,6 +15,8 @@ import { createTheme } from "@mui/material/styles";
 import { palette } from "./palette";
 import "./palette.types";
 import { shape } from "./shape";
+import { mixins } from "./mixins";
+import "./mixins.types";
 import { spacing } from "./spacing";
 import { typography } from "./typography";
 import "./typography.types";
@@ -24,6 +26,7 @@ import "./components.types";
 export const theme = createTheme({
   palette,
   shape,
+  mixins,
   spacing,
   typography,
   components,