@okta/odyssey-react-mui 0.14.1

package/src/themes/odyssey/palette.ts

@@ -0,0 +1,100 @@
+/*!
+ * 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";
+
+export const palette: ThemeOptions["palette"] = {
+  mode: "light",
+  common: {
+    black: "#1d1d21",
+    white: "#ffffff",
+  },
+  primary: {
+    light: "#a7b5ec",
+    main: "#1662dd",
+    dark: "#00297a",
+    contrastText: "#ffffff",
+  },
+  secondary: {
+    light: "#80C7CA",
+    main: "#2D8C9E",
+    dark: "#004650",
+    contrastText: "#ffffff",
+  },
+  error: {
+    light: "#f88c90",
+    main: "#da372c",
+    dark: "#640019",
+    contrastText: "#ffffff",
+  },
+  warning: {
+    light: "#f9dc77",
+    main: "#ffc61c",
+    dark: "#663800",
+    contrastText: "#1d1d21",
+  },
+  info: {
+    light: "#a7b5ec",
+    main: "#1662dd",
+    dark: "#00297a",
+    contrastText: "#ffffff",
+  },
+  success: {
+    light: "#84d2b1",
+    main: "#00b478",
+    dark: "#00503c",
+    contrastText: "#ffffff",
+  },
+  grey: {
+    50: "#f5f5f6",
+    100: "#ebebed",
+    200: "#d7d7dc",
+    300: "#c1c1c8",
+    400: "#aaaab4",
+    500: "#8c8c96",
+    600: "#6e6e78",
+    700: "#585862",
+    800: "#41414b",
+    900: "#1d1d21",
+    // These are "Accent" colors. MUI's palette matches them to the standard greys.
+    A100: "#ebebed",
+    A200: "#d7d7dc",
+    A400: "#aaaab4",
+    A700: "#585862",
+  },
+  text: {
+    primary: "#1d1d21",
+    secondary: "#6e6e78",
+    // We do not currently have a unique disabled color.
+    disabled: "#6e6e78",
+  },
+  // Currently mapping this to ColorBorderDisplay.
+  divider: "#d7d7dc",
+  background: {
+    paper: "#ffffff",
+    default: "#ffffff",
+  },
+  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: "rgba(0, 0, 0, 0.26)",
+    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/themes/odyssey/shape.ts

@@ -0,0 +1,18 @@
+/*!
+ * 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 shape: ThemeOptions["shape"] = {
+  borderRadius: Tokens.BorderRadiusBase,
+};

package/src/themes/odyssey/spacing.ts

@@ -0,0 +1,27 @@
+/*!
+ * 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 spacing: ThemeOptions["spacing"] = [
+  0,
+  Tokens.SpaceScale0,
+  Tokens.SpaceScale1,
+  Tokens.SpaceScale2,
+  Tokens.SpaceScale3,
+  Tokens.SpaceScale4,
+  Tokens.SpaceScale5,
+  Tokens.SpaceScale6,
+  Tokens.SpaceScale7,
+  Tokens.SpaceScale8,
+];

package/src/themes/odyssey/theme.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.
+ */
+
+import { createTheme } from "@mui/material/styles";
+
+import { palette } from "./palette";
+import { shape } from "./shape";
+import { spacing } from "./spacing";
+import { typography } from "./typography";
+import "./typography.types";
+import { components } from "./components";
+import "./components.types";
+
+export const theme = createTheme({
+  palette,
+  shape,
+  spacing,
+  typography,
+  components,
+});

package/src/themes/odyssey/typography.ts

@@ -0,0 +1,92 @@
+/*!
+ * 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 typography: ThemeOptions["typography"] = {
+  htmlFontSize: 16,
+  fontFamily: Tokens.FontFamilyBase,
+  fontSize: 14,
+  fontWeightLight: 300,
+  fontWeightRegular: Number(Tokens.FontWeightNormal),
+  fontWeightMedium: 500,
+  fontWeightBold: Number(Tokens.FontWeightBold),
+  h1: {
+    fontFamily: Tokens.FontFamilyBase,
+    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,
+  subtitle2: undefined,
+  body: {
+    fontFamily: Tokens.FontFamilyBase,
+    fontWeight: Number(Tokens.FontWeightNormal),
+    fontSize: Tokens.FontScale1,
+    lineHeight: Tokens.FontLineHeightBody,
+    letterSpacing: "initial",
+  },
+  body1: undefined,
+  body2: undefined,
+  button: undefined,
+  caption: {
+    fontFamily: Tokens.FontFamilyBase,
+    fontWeight: Tokens.FontWeightNormal,
+    fontSize: Tokens.FontScale0,
+    lineHeight: Tokens.FontLineHeightBody,
+    letterSpacing: "initial",
+  },
+  overline: undefined,
+};

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

@@ -0,0 +1,36 @@
+/*!
+ * 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 {
+    body: CSSProperties;
+  }
+  interface TypographyVariantsOptions {
+    body?: CSSProperties;
+  }
+}
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    body1: false;
+    body2: false;
+    body: true;
+    button: false;
+    overline: false;
+    subtitle1: false;
+    subtitle2: false;
+    default: true; // used by Link
+    monochrome: true; // used by Link
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,13 @@
+/*!
+ * Copyright (c) 2021-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 { oid, useOid } from "./oid";

package/src/utils/oid.test.ts

@@ -0,0 +1,21 @@
+/*!
+ * Copyright (c) 2021-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 { oid, length } from "./oid";
+
+describe("oid", () => {
+  it("returns a nice id string", () => {
+    const result = oid();
+    expect(typeof result).toBe("string");
+    expect(result).toHaveLength(length);
+  });
+});

package/src/utils/oid.ts

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) 2021-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 { useMemo } from "react";
+
+export const length = 6;
+
+export const oid = (): string => Math.random().toString(36).slice(-length);
+
+export const useOid = (id?: string): string => {
+  const _oid = useMemo(oid, [oid]);
+  return id || _oid;
+};

package/test/a11yCheck.ts

@@ -0,0 +1,28 @@
+/*!
+ * 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 { RenderResult } from "@testing-library/react";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { axe } from "jest-axe";
+
+export const a11yCheck = (renderFn: () => RenderResult): void => {
+  describe("accessibility", () => {
+    it("meets WCAG 2.1 AA criteria", async () => {
+      const { container } = renderFn();
+      const results = await axe(container, {
+        runOnly: ["section508", "wcag21a", "wcag21aa"],
+      });
+
+      expect(results).toHaveNoViolations();
+    });
+  });
+};

package/test/index.ts

@@ -0,0 +1,13 @@
+/*!
+ * 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 "./a11yCheck";

package/tsconfig.json

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

package/tsconfig.production.json

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