UI shell customization

packages/odyssey-react-mui/src/createContrastColors.ts

@@ -0,0 +1,106 @@
+/*!
+ * 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 { DesignTokens } from "./OdysseyDesignTokensContext";
+
+type RgbColorObject = {
+  red: number;
+  green: number;
+  blue: number;
+};
+
+export type ContrastColors = {
+  focusRingColor: string | undefined;
+  fontColor: string | undefined;
+  itemDisabledFontColor: string | undefined;
+  itemHoverBackgroundColor: string | undefined;
+  itemSelectedBackgroundColor: string | undefined;
+};
+
+const hexToRgb = (hexBackgroundColor: string): RgbColorObject | undefined => {
+  const formattedHexString = hexBackgroundColor.includes("#")
+    ? hexBackgroundColor.split("#")[1]
+    : hexBackgroundColor;
+
+  return {
+    red: parseInt(formattedHexString.slice(0, 2), 16),
+    green: parseInt(formattedHexString.slice(2, 4), 16),
+    blue: parseInt(formattedHexString.slice(4, 6), 16),
+  };
+};
+
+export const generateContrastColors = (
+  backgroundColor: string,
+  odysseyDesignTokens: DesignTokens,
+) => {
+  // Convert hex to RGB
+  const rgbFromHex = hexToRgb(backgroundColor);
+
+  if (rgbFromHex) {
+    const { red, green, blue } = rgbFromHex;
+
+    // Calculate relative luminance
+    // @see https://contrastchecker.online/color-relative-luminance-calculator#:~:text=For%20the%20sRGB%20colorspace%2C%20the,%2B0.055)%2F1.055)%20%5E%202.4
+    // returns a number between 0(black) and 255(white)
+    const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+
+    // 128 is a magic number. This feels like roughly where we should switch from dark to light.
+    const LUMINANCE_THRESHOLD = 128;
+    const LUMINANCE_EDGE_MIN = 108;
+    const LUMINANCE_EDGE_MAX = 142;
+
+    // Luminance values between LUMINANCE_EDGE_MIN-LUMINANCE_EDGE_MAX can cause contrast ration issues
+    // Using #000000 helps in these cases
+    const luminanceValueInEdgeRange =
+      luminance > LUMINANCE_EDGE_MIN && luminance < LUMINANCE_EDGE_MAX;
+
+    // Determine if the color is light or dark.
+    const isLight = luminance > LUMINANCE_THRESHOLD;
+
+    const fontColor = luminanceValueInEdgeRange
+      ? "#000000"
+      : isLight
+        ? odysseyDesignTokens.TypographyColorBody
+        : odysseyDesignTokens.HueNeutralWhite;
+
+    const calculatedFontColorInRgb = hexToRgb(fontColor);
+    const lightFontColorInRgb = hexToRgb(odysseyDesignTokens.HueNeutralWhite);
+    const darkFontColorInRgb = hexToRgb(
+      odysseyDesignTokens.TypographyColorBody,
+    );
+
+    const calculatedFontRgbString = `${calculatedFontColorInRgb?.red}, ${calculatedFontColorInRgb?.green}, ${calculatedFontColorInRgb?.blue}`;
+    const lightFontRgbString = `${lightFontColorInRgb?.red}, ${lightFontColorInRgb?.green}, ${lightFontColorInRgb?.blue}`;
+    const darkFontRgbString = `${darkFontColorInRgb?.red}, ${darkFontColorInRgb?.green}, ${darkFontColorInRgb?.blue}`;
+
+    const getHighlightColor: (
+      luminanceValueInEdgeRange: boolean,
+      isLight: boolean,
+    ) => string = (luminanceValueInEdgeRange, isLight) => {
+      if (luminanceValueInEdgeRange) {
+        return isLight ? darkFontRgbString : lightFontRgbString;
+      }
+
+      return calculatedFontRgbString;
+    };
+
+    return {
+      fontColor,
+      focusRingColor: `rgba(${calculatedFontRgbString}, .8)`,
+      itemDisabledFontColor: `rgba(${calculatedFontRgbString}, .4)`,
+      itemHoverBackgroundColor: `rgba(${getHighlightColor(luminanceValueInEdgeRange, isLight)}, .1)`,
+      itemSelectedBackgroundColor: `rgba(${getHighlightColor(luminanceValueInEdgeRange, isLight)}, .15)`,
+    };
+  }
+
+  return undefined;
+};

packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx

@@ -27,6 +27,26 @@ import {
 } from "../../OdysseyDesignTokensContext";
 import { Support } from "../../Typography";
 import { useUniqueId } from "../../useUniqueId";
+import {
+  UiShellColors,
+  useUiShellContrastColorContext,
+} from "../../ui-shell/UiShell/UiShellColorsProvider";
+import { ContrastColors } from "../../createContrastColors";
+
+const SideNavAccordionContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "backgroundColor" && prop !== "fontColor",
+})<{
+  backgroundColor?: UiShellColors["sideNavBackgroundColor"];
+  fontColor?: ContrastColors["fontColor"];
+}>(({ backgroundColor, fontColor }) => ({
+  width: "100%",
+
+  ".MuiAccordion-root": {
+    backgroundColor: backgroundColor,
+    color: fontColor || "inherit",
+  },
+}));
 
 export type NavAccordionProps = {
   /**
@@ -66,47 +86,95 @@ export type NavAccordionProps = {
 
 const AccordionLabelContainer = styled("span", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "isIconVisible",
+    prop !== "odysseyDesignTokens" &&
+    prop !== "isIconVisible" &&
+    prop !== "sideNavContrastColors",
 })<{
-  odysseyDesignTokens: DesignTokens;
+  sideNavContrastColors?: UiShellColors["sideNavContrastColors"];
   isIconVisible: boolean;
-}>(({ odysseyDesignTokens, isIconVisible }) => ({
+  odysseyDesignTokens: DesignTokens;
+}>(({ sideNavContrastColors, odysseyDesignTokens, isIconVisible }) => ({
   width: "100%",
   marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
   fontWeight: odysseyDesignTokens.TypographyWeightHeading,
-  color: odysseyDesignTokens.TypographyColorHeading,
+  color:
+    sideNavContrastColors?.fontColor ||
+    odysseyDesignTokens.TypographyColorHeading,
+
+  ".Mui-disabled &": {
+    color: odysseyDesignTokens.TypographyColorDisabled,
+
+    ...(sideNavContrastColors?.itemDisabledFontColor && {
+      color: sideNavContrastColors?.itemDisabledFontColor,
+    }),
+  },
 }));
 
 const AccordionSummaryContainer = styled(MuiAccordionSummary, {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
     prop !== "isCompact" &&
-    prop !== "isDisabled",
+    prop !== "isDisabled" &&
+    prop !== "sideNavContrastColors",
 })<{
-  odysseyDesignTokens: DesignTokens;
+  sideNavContrastColors?: UiShellColors["sideNavContrastColors"];
   isCompact?: boolean;
   isDisabled?: boolean;
-}>(({ odysseyDesignTokens, isCompact, isDisabled }) => ({
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens, sideNavContrastColors, isCompact, isDisabled }) => ({
   borderRadius: odysseyDesignTokens.BorderRadiusMain,
   paddingBlock: odysseyDesignTokens.Spacing3,
   paddingInline: odysseyDesignTokens.Spacing4,
 
+  ...(isDisabled && {
+    opacity: "1 !important",
+
+    ...(sideNavContrastColors?.itemDisabledFontColor && {
+      svg: {
+        path: {
+          fill: `${sideNavContrastColors.itemDisabledFontColor} !important`,
+        },
+      },
+    }),
+  }),
+
+  ...(!isDisabled && {
+    "&:hover": {
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
+    },
+  }),
+
+  ...(!isDisabled &&
+    sideNavContrastColors?.fontColor && {
+      svg: {
+        path: {
+          fill: `${sideNavContrastColors.fontColor} !important`,
+        },
+      },
+    }),
+
+  ...(sideNavContrastColors?.itemHoverBackgroundColor && {
+    ...(!isDisabled && {
+      "&:hover": {
+        backgroundColor: sideNavContrastColors.itemHoverBackgroundColor,
+      },
+    }),
+  }),
+
   "&:focus-visible": {
     backgroundColor: "unset",
     outline: "none",
     boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+
+    ...(sideNavContrastColors?.focusRingColor && {
+      boxShadow: `inset 0 0 0 2px ${sideNavContrastColors.focusRingColor}`,
+    }),
   },
 
   ...(isCompact && {
     paddingBlock: odysseyDesignTokens.Spacing2,
     minHeight: "unset",
   }),
-
-  ...(!isDisabled && {
-    "&:hover": {
-      backgroundColor: odysseyDesignTokens.HueNeutral50,
-    },
-  }),
 }));
 
 const NavAccordion = ({
@@ -124,41 +192,48 @@ const NavAccordion = ({
   const headerId = `${id}-header`;
   const contentId = `${id}-content`;
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const shellContrastColors = useUiShellContrastColorContext();
 
   return (
-    <MuiAccordion
-      defaultExpanded={isDefaultExpanded}
-      disabled={isDisabled}
-      disableGutters
-      expanded={isExpanded}
-      className="nav-accordion"
+    <SideNavAccordionContainer
+      backgroundColor={shellContrastColors?.sideNavBackgroundColor}
     >
-      <AccordionSummaryContainer
-        className="nav-accordion-summary"
-        aria-controls={contentId}
-        expandIcon={<ChevronDownIcon />}
-        id={headerId}
-        odysseyDesignTokens={odysseyDesignTokens}
-        isCompact={isCompact}
-        isDisabled={isDisabled}
-      >
-        <Support component="div" translate={translate}>
-          {startIcon && startIcon}
-          <AccordionLabelContainer
-            odysseyDesignTokens={odysseyDesignTokens}
-            isIconVisible={Boolean(startIcon)}
-          >
-            {label}
-          </AccordionLabelContainer>
-        </Support>
-      </AccordionSummaryContainer>
-      <MuiAccordionDetails
-        className="nav-accordion-details"
-        aria-labelledby={headerId}
+      <MuiAccordion
+        defaultExpanded={isDefaultExpanded}
+        disabled={isDisabled}
+        disableGutters
+        expanded={isExpanded}
+        className="nav-accordion"
       >
-        {children}
-      </MuiAccordionDetails>
-    </MuiAccordion>
+        <AccordionSummaryContainer
+          aria-controls={contentId}
+          className="nav-accordion-summary"
+          expandIcon={<ChevronDownIcon />}
+          sideNavContrastColors={shellContrastColors?.sideNavContrastColors}
+          id={headerId}
+          isCompact={isCompact}
+          isDisabled={isDisabled}
+          odysseyDesignTokens={odysseyDesignTokens}
+        >
+          <Support component="div" translate={translate}>
+            {startIcon && startIcon}
+            <AccordionLabelContainer
+              sideNavContrastColors={shellContrastColors?.sideNavContrastColors}
+              isIconVisible={Boolean(startIcon)}
+              odysseyDesignTokens={odysseyDesignTokens}
+            >
+              {label}
+            </AccordionLabelContainer>
+          </Support>
+        </AccordionSummaryContainer>
+        <MuiAccordionDetails
+          className="nav-accordion-details"
+          aria-labelledby={headerId}
+        >
+          {children}
+        </MuiAccordionDetails>
+      </MuiAccordion>
+    </SideNavAccordionContainer>
   );
 };