@okta/odyssey-react-mui 1.23.0 → 1.24.0

package/src/Tag.tsx

@@ -21,6 +21,7 @@ import {
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { CloseCircleFilledIcon } from "./icons.generated";
+import { useContrastContext, ContrastMode } from "./ContrastModeProvider";
 
 export const tagColorVariants = [
   "default",
@@ -57,61 +58,98 @@ export type TagProps = {
 const getChipColors = (
   colorVariant: TagColorVariant,
   odysseyDesignTokens: DesignTokens,
+  contrastMode: ContrastMode,
 ) => {
   const colors = {
     default: {
-      background: odysseyDesignTokens.HueNeutral100,
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueNeutral200,
+        text: odysseyDesignTokens.HueNeutral700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueNeutral100,
+        text: odysseyDesignTokens.HueNeutral700,
+      }),
       hover: odysseyDesignTokens.HueNeutral200,
       active: odysseyDesignTokens.HueNeutral300,
-      text: odysseyDesignTokens.HueNeutral700,
       border: odysseyDesignTokens.HueNeutral200,
       deleteIcon: odysseyDesignTokens.HueNeutral500,
-      deleteIconHover: odysseyDesignTokens.HueNeutral600,
+      deleteIconHover: odysseyDesignTokens.HueNeutral700,
     },
     info: {
-      background: odysseyDesignTokens.HueBlue100,
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueBlue200,
+        text: odysseyDesignTokens.HueBlue700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueBlue100,
+        text: odysseyDesignTokens.HueBlue700,
+      }),
       hover: odysseyDesignTokens.HueBlue200,
       active: odysseyDesignTokens.HueBlue300,
-      text: odysseyDesignTokens.HueBlue700,
       border: odysseyDesignTokens.HueBlue200,
       deleteIcon: odysseyDesignTokens.HueBlue500,
-      deleteIconHover: odysseyDesignTokens.HueBlue600,
+      deleteIconHover: odysseyDesignTokens.HueBlue700,
     },
     accentOne: {
-      background: odysseyDesignTokens.HueAccentOne100,
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentOne200,
+        text: odysseyDesignTokens.HueAccentOne700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentOne100,
+        text: odysseyDesignTokens.HueAccentOne700,
+      }),
       hover: odysseyDesignTokens.HueAccentOne200,
       active: odysseyDesignTokens.HueAccentOne300,
-      text: odysseyDesignTokens.HueAccentOne700,
       border: odysseyDesignTokens.HueAccentOne200,
       deleteIcon: odysseyDesignTokens.HueAccentOne500,
-      deleteIconHover: odysseyDesignTokens.HueAccentOne600,
+      deleteIconHover: odysseyDesignTokens.HueAccentOne700,
     },
     accentTwo: {
-      background: odysseyDesignTokens.HueAccentTwo100,
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentTwo200,
+        text: odysseyDesignTokens.HueAccentTwo800,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentTwo100,
+        text: odysseyDesignTokens.HueAccentTwo700,
+      }),
       hover: odysseyDesignTokens.HueAccentTwo200,
       active: odysseyDesignTokens.HueAccentTwo300,
-      text: odysseyDesignTokens.HueAccentTwo700,
       border: odysseyDesignTokens.HueAccentTwo200,
       deleteIcon: odysseyDesignTokens.HueAccentTwo500,
-      deleteIconHover: odysseyDesignTokens.HueAccentTwo600,
+      deleteIconHover: odysseyDesignTokens.HueAccentTwo700,
     },
     accentThree: {
-      background: odysseyDesignTokens.HueAccentThree100,
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentThree200,
+        text: odysseyDesignTokens.HueAccentThree700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentThree100,
+        text: odysseyDesignTokens.HueAccentThree700,
+      }),
       hover: odysseyDesignTokens.HueAccentThree200,
       active: odysseyDesignTokens.HueAccentThree300,
-      text: odysseyDesignTokens.HueAccentThree700,
       border: odysseyDesignTokens.HueAccentThree200,
       deleteIcon: odysseyDesignTokens.HueAccentThree500,
-      deleteIconHover: odysseyDesignTokens.HueAccentThree600,
+      deleteIconHover: odysseyDesignTokens.HueAccentThree700,
     },
     accentFour: {
-      background: odysseyDesignTokens.HueAccentFour100,
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentFour200,
+        text: odysseyDesignTokens.HueAccentFour700,
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentFour100,
+        text: odysseyDesignTokens.HueAccentFour700,
+      }),
       hover: odysseyDesignTokens.HueAccentFour200,
       active: odysseyDesignTokens.HueAccentFour300,
-      text: odysseyDesignTokens.HueAccentFour700,
       border: odysseyDesignTokens.HueAccentFour200,
       deleteIcon: odysseyDesignTokens.HueAccentFour500,
-      deleteIconHover: odysseyDesignTokens.HueAccentFour600,
+      deleteIconHover: odysseyDesignTokens.HueAccentFour700,
     },
   };
 
@@ -120,13 +158,16 @@ const getChipColors = (
 
 const StyledTag = styled(MuiChip, {
   shouldForwardProp: (prop) =>
-    !["colorVariant", "odysseyDesignTokens"].includes(prop as string),
+    !["colorVariant", "contrastMode", "odysseyDesignTokens"].includes(
+      prop as string,
+    ),
 })<{
   colorVariant: TagColorVariant;
+  contrastMode: ContrastMode;
   odysseyDesignTokens: DesignTokens;
   as?: React.ElementType; // Allow the 'as' prop to be forwarded
-}>(({ colorVariant, odysseyDesignTokens }) => {
-  const colors = getChipColors(colorVariant, odysseyDesignTokens);
+}>(({ colorVariant, contrastMode, odysseyDesignTokens }) => {
+  const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);
 
   return {
     backgroundColor: colors.background,
@@ -169,6 +210,7 @@ const Tag = ({
 }: TagProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { chipElementType } = useContext(TagListContext);
+  const { contrastMode } = useContrastContext();
 
   const renderTag = useCallback(
     (muiProps: MuiPropsContextType) => (
@@ -180,6 +222,7 @@ const Tag = ({
         data-se={testId}
         colorVariant={colorVariant}
         odysseyDesignTokens={odysseyDesignTokens}
+        contrastMode={contrastMode}
         disabled={isDisabled}
         icon={icon}
         label={label}
@@ -200,6 +243,7 @@ const Tag = ({
       translate,
       colorVariant,
       odysseyDesignTokens,
+      contrastMode,
     ],
   );
 

package/src/Typography.test.tsx

@@ -0,0 +1,26 @@
+/*!
+ * Copyright (c) 2024-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 { render, screen } from "@testing-library/react";
+import { Typography } from "./Typography";
+
+describe("Typography", () => {
+  test("renders Overline", () => {
+    render(
+      <Typography ariaLabel="overline" variant="overline">
+        Overline test
+      </Typography>,
+    );
+
+    expect(screen.getByLabelText("overline")).toBeVisible();
+  });
+});

package/src/Typography.tsx

@@ -34,9 +34,10 @@ export type TypographyVariantValue =
   | "h5"
   | "h6"
   | "body"
+  | "legend"
+  | "overline"
   | "subordinate"
-  | "support"
-  | "legend";
+  | "support";
 
 export const typographyVariantMapping: Record<
   TypographyVariantValue,
@@ -49,9 +50,10 @@ export const typographyVariantMapping: Record<
   h5: "h5",
   h6: "h6",
   body: "body1",
+  legend: "legend",
+  overline: "overline",
   subordinate: "subtitle1",
   support: "subtitle2",
-  legend: "legend",
 } as const;
 
 export const typographyColorValues = [
@@ -102,9 +104,12 @@ const Typography = ({
 }: TypographyProps) => {
   const component = useMemo(() => {
     if (!componentProp) {
-      if (variant === "body") {
-        return "p";
-      } else if (variant === "subordinate" || variant === "support") {
+      if (
+        variant === "body" ||
+        variant === "subordinate" ||
+        variant === "support" ||
+        variant === "overline"
+      ) {
         return "p";
       } else {
         return variant;
@@ -406,6 +411,32 @@ const Legend = ({
 const MemoizedLegend = memo(Legend);
 MemoizedLegend.displayName = "Legend";
 
+const Overline = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  color,
+  component,
+  testId,
+  translate,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    color={color}
+    component={component}
+    testId={testId}
+    translate={translate}
+    variant="overline"
+  />
+);
+
+const MemoizedOverline = memo(Overline);
+MemoizedOverline.displayName = "Overline";
+
 export {
   MemoizedTypography as Typography,
   MemoizedHeading1 as Heading1,
@@ -415,6 +446,7 @@ export {
   MemoizedHeading5 as Heading5,
   MemoizedHeading6 as Heading6,
   MemoizedLegend as Legend,
+  MemoizedOverline as Overline,
   MemoizedParagraph as Paragraph,
   MemoizedSubordinate as Subordinate,
   MemoizedSupport as Support,

package/src/index.ts

@@ -34,6 +34,7 @@ export {
   Paper,
   /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ScopedCssBaseline,
+  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ThemeProvider,
 } from "@mui/material";
 
@@ -49,6 +50,7 @@ export type {
   MenuListProps,
   PaperProps,
   ScopedCssBaselineProps,
+  StackProps,
   ThemeOptions,
 } from "@mui/material";
 
@@ -68,6 +70,7 @@ export * from "./Callout";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
+export * from "./ContrastModeProvider";
 export * from "./CssBaseline";
 export * from "./createShadowDomElements";
 export * from "./createUniqueId";
@@ -100,6 +103,7 @@ export * from "./RadioGroup";
 export * from "./ScreenReaderText";
 export * from "./SearchField";
 export * from "./Select";
+export * from "./Stack";
 export * from "./Status";
 export * from "./Surface";
 export * from "./Tabs";

package/src/labs/datePickerTheme.tsx

@@ -47,10 +47,6 @@ const dateStyles: StateStyles = {
   hoverSelected: ({ theme }) => ({
     backgroundColor: theme.palette.primary.dark,
     color: theme.palette.primary.contrastText,
-
-    "@media (pointer: fine)": {
-      backgroundColor: theme.palette.primary.main,
-    },
   }),
   outsideOfMonth: ({ theme }) => ({
     backgroundColor: "transparent",
@@ -158,8 +154,8 @@ export const datePickerTheme: ThemeOptions = {
             borderStyle: theme.mixins.borderStyle,
             borderWidth: theme.mixins.borderWidth,
             borderRadius: theme.mixins.borderRadius,
-            paddingBlock: theme.spacing(3),
-            paddingInline: theme.spacing(3),
+            paddingBlock: theme.spacing(6),
+            paddingInline: theme.spacing(6),
           },
         }),
       },