@okta/odyssey-react-mui 1.22.0 → 1.24.0

package/dist/theme/components.js

@@ -208,7 +208,8 @@ export const components = ({
             justifyContent: "center",
             alignItems: "center",
             borderRadius: 0,
-            border: 0,
+            borderWidth: 0,
+            borderBottomWidth: "1px",
             ...(ownerState.onClose !== undefined && {
               paddingInline: odysseyTokens.Spacing6
             })
@@ -519,176 +520,138 @@ export const components = ({
       },
       styleOverrides: {
         root: ({
-          ownerState
-        }) => ({
-          minWidth: "unset",
-          paddingBlock: odysseyTokens.Spacing3,
-          paddingInline: odysseyTokens.Spacing4,
-          display: "inline-flex",
-          height: odysseyTokens.Spacing7,
-          position: "relative",
-          marginBlock: "0",
-          marginInline: "0",
-          transitionProperty: "color, background-color, border-color, box-shadow",
-          transitionDuration: "100ms",
-          transitionTimingFunction: "linear",
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          borderRadius: odysseyTokens.BorderRadiusMain,
-          borderColor: "transparent",
-          fontSize: odysseyTokens.TypographySizeBody,
-          fontWeight: odysseyTokens.TypographyWeightHeading,
-          fontFamily: odysseyTokens.TypographyFamilyButton,
-          lineHeight: odysseyTokens.TypographyLineHeightUi,
-          whiteSpace: "nowrap",
-          [`.${buttonClasses.root} + &`]: {
-            marginInlineStart: odysseyTokens.Spacing2
-          },
-          "&:focus-visible": {
-            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px"
-          },
-          "&:disabled": {
-            pointerEvents: "none"
-          },
-          [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
-            "& > *:nth-of-type(1)": {
-              fontSize: `${odysseyTokens.TypographyLineHeightUi}em`
-            }
-          },
-          ...(ownerState.variant === "primary" && {
-            color: odysseyTokens.HueNeutralWhite,
-            backgroundColor: odysseyTokens.PalettePrimaryMain,
-            "&:hover": {
-              backgroundColor: odysseyTokens.PalettePrimaryDark
-            },
-            "&:active": {
-              backgroundColor: odysseyTokens.PalettePrimaryDarker
-            },
-            "&:disabled": {
-              color: odysseyTokens.PalettePrimaryLight,
-              backgroundColor: odysseyTokens.HueBlue100
-            }
-          }),
-          ...(ownerState.variant === "secondary" && {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral300,
-            color: odysseyTokens.TypographyColorBody,
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral100
-            },
-            "&:active": {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.BorderColorPrimaryControl,
-              color: odysseyTokens.TypographyColorAction
-            },
-            "&:disabled": {
-              backgroundColor: odysseyTokens.HueNeutral100,
-              borderColor: "transparent",
-              color: odysseyTokens.TypographyColorDisabled
-            }
-          }),
-          ...(ownerState.variant === "danger" && {
-            backgroundColor: odysseyTokens.PaletteDangerMain,
-            color: odysseyTokens.HueNeutralWhite,
-            "&:hover": {
-              backgroundColor: odysseyTokens.PaletteDangerDark
+          ownerState,
+          theme
+        }) => {
+          const contrastMode = theme.odysseyContrastMode;
+          return {
+            minWidth: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            display: "inline-flex",
+            height: odysseyTokens.Spacing7,
+            position: "relative",
+            marginBlock: "0",
+            marginInline: "0",
+            transitionProperty: "color, background-color, border-color, box-shadow",
+            transitionDuration: "100ms",
+            transitionTimingFunction: "linear",
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            borderColor: "transparent",
+            fontSize: odysseyTokens.TypographySizeBody,
+            fontWeight: odysseyTokens.TypographyWeightHeading,
+            fontFamily: odysseyTokens.TypographyFamilyButton,
+            lineHeight: odysseyTokens.TypographyLineHeightUi,
+            whiteSpace: "nowrap",
+            [`.${buttonClasses.root} + &`]: {
+              marginInlineStart: odysseyTokens.Spacing2
             },
             "&:focus-visible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
-            },
-            "&:active": {
-              backgroundColor: odysseyTokens.PaletteDangerDarker
-            },
-            "&:disabled": {
-              color: odysseyTokens.PaletteDangerLight,
-              backgroundColor: odysseyTokens.HueRed100
-            }
-          }),
-          ...(ownerState.variant === "dangerSecondary" && {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral300,
-            color: odysseyTokens.PaletteDangerMain,
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral100,
-              color: odysseyTokens.PaletteDangerMain
-            },
-            "&:active": {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.PaletteDangerMain,
-              color: odysseyTokens.PaletteDangerMain
-            },
-            "&:disabled": {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.PaletteDangerLight,
-              color: odysseyTokens.PaletteDangerLight
-            }
-          }),
-          ...(ownerState.variant === "floating" && {
-            backgroundColor: "transparent",
-            color: odysseyTokens.TypographyColorBody,
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral100
-            },
-            "&:active": {
-              backgroundColor: odysseyTokens.HueNeutral200
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px"
             },
             "&:disabled": {
-              backgroundColor: "transparent",
-              color: odysseyTokens.TypographyColorDisabled
-            }
-          }),
-          ...(ownerState.variant === "floatingAction" && {
-            backgroundColor: "transparent",
-            color: odysseyTokens.TypographyColorAction,
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral100
+              pointerEvents: "none"
             },
-            "&:active": {
-              backgroundColor: odysseyTokens.HueNeutral200
+            [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
+              "& > *:nth-of-type(1)": {
+                fontSize: `${odysseyTokens.TypographyLineHeightUi}em`
+              }
             },
-            "&:disabled": {
+            ...(ownerState.variant === "primary" && {
+              color: odysseyTokens.HueNeutralWhite,
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
+              "&:hover": {
+                backgroundColor: odysseyTokens.PalettePrimaryDark
+              },
+              "&:active": {
+                backgroundColor: odysseyTokens.PalettePrimaryDarker
+              },
+              "&:disabled": {
+                color: odysseyTokens.PalettePrimaryLight,
+                backgroundColor: odysseyTokens.HueBlue100
+              }
+            }),
+            ...(ownerState.variant === "secondary" && {
               backgroundColor: "transparent",
-              color: odysseyTokens.TypographyColorDisabled
-            }
-          }),
-          ...(ownerState.size === "small" && {
-            height: odysseyTokens.Spacing6,
-            paddingBlock: odysseyTokens.Spacing2,
-            paddingInline: odysseyTokens.Spacing3,
-            fontSize: odysseyTokens.TypographySizeBody
-          }),
-          ...(ownerState.size === "large" && {
-            height: odysseyTokens.Spacing8,
-            paddingBlock: odysseyTokens.Spacing4,
-            paddingInline: odysseyTokens.Spacing4
-          }),
-          ...(ownerState.fullWidth === true && {
-            width: "100%",
-            marginBlock: "0",
-            marginInline: "0",
-            "&:not(:last-child)": {
-              marginBlockEnd: odysseyTokens.Spacing4
-            }
-          }),
-          ...(ownerState.children === "" && {
-            minWidth: "auto",
-            padding: odysseyTokens.Spacing3,
-            [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
-              margin: "0"
-            },
-            ...(ownerState.size === "large" && {
-              padding: odysseyTokens.Spacing4
+              borderColor: odysseyTokens.HueNeutral300,
+              color: odysseyTokens.TypographyColorBody,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral100
+              },
+              "&:active": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.BorderColorPrimaryControl,
+                color: odysseyTokens.TypographyColorAction
+              },
+              "&:disabled": {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueNeutral200,
+                  borderColor: "transparent",
+                  color: odysseyTokens.TypographyColorDisabled
+                }),
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.HueNeutral100,
+                  borderColor: "transparent",
+                  color: odysseyTokens.TypographyColorDisabled
+                })
+              }
             }),
-            ...(ownerState.size === "small" && {
-              padding: odysseyTokens.Spacing2
+            ...(ownerState.variant === "danger" && {
+              backgroundColor: odysseyTokens.PaletteDangerMain,
+              color: odysseyTokens.HueNeutralWhite,
+              "&:hover": {
+                backgroundColor: odysseyTokens.PaletteDangerDark
+              },
+              "&:focus-visible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
+              },
+              "&:active": {
+                backgroundColor: odysseyTokens.PaletteDangerDarker
+              },
+              "&:disabled": {
+                color: odysseyTokens.PaletteDangerLight,
+                backgroundColor: odysseyTokens.HueRed100
+              }
             }),
-            ...(ownerState.size === "large" && {
-              padding: odysseyTokens.Spacing4
+            ...(ownerState.variant === "dangerSecondary" && {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral300,
+              color: odysseyTokens.PaletteDangerMain,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                color: odysseyTokens.PaletteDangerMain
+              },
+              "&:active": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.PaletteDangerMain,
+                color: odysseyTokens.PaletteDangerMain
+              },
+              "&:disabled": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.PaletteDangerLight,
+                color: odysseyTokens.PaletteDangerLight
+              }
+            }),
+            ...(ownerState.variant === "floating" && {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorBody,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral100
+              },
+              "&:active": {
+                backgroundColor: odysseyTokens.HueNeutral200
+              },
+              "&:disabled": {
+                backgroundColor: "transparent",
+                color: odysseyTokens.TypographyColorDisabled
+              }
             })
-          })
-        }),
+          };
+        },
         endIcon: ({
           ownerState
         }) => ({
@@ -883,117 +846,151 @@ export const components = ({
       },
       styleOverrides: {
         root: ({
-          ownerState
-        }) => ({
-          height: "auto",
-          paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
-          paddingInline: odysseyTokens.Spacing3,
-          fontSize: odysseyTokens.TypographySizeBody,
-          lineHeight: odysseyTokens.TypographyLineHeightUi,
-          borderRadius: odysseyTokens.BorderRadiusRound,
-          backgroundColor: odysseyTokens.HueNeutral100,
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderColor: odysseyTokens.HueNeutral200,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          color: odysseyTokens.HueNeutral700,
-          ...(ownerState.onDelete && {
-            paddingInlineEnd: odysseyTokens.Spacing2
-          }),
-          [`&.${chipClasses.disabled}`]: {
-            opacity: 1,
-            pointerEvents: "none",
-            borderColor: odysseyTokens.BorderColorDisabled,
-            color: odysseyTokens.TypographyColorDisabled,
-            [`& .${chipClasses.deleteIcon}`]: {
-              color: odysseyTokens.HueNeutral300
-            }
-          },
-          ...(ownerState.clickable && {
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral200
-            },
-            [`&.${chipClasses.focusVisible}`]: {
-              backgroundColor: odysseyTokens.HueNeutral200,
-              outlineColor: odysseyTokens.FocusOutlineColorPrimary,
-              outlineOffset: odysseyTokens.FocusOutlineOffsetTight,
-              outlineStyle: odysseyTokens.FocusOutlineStyle,
-              outlineWidth: odysseyTokens.FocusOutlineWidthMain
-            },
-            "&:active": {
-              boxShadow: "none",
-              backgroundColor: odysseyTokens.HueNeutral300
-            }
-          }),
-          [`& .${chipClasses.icon}`]: {
-            margin: 0,
-            marginInlineEnd: odysseyTokens.Spacing1
-          },
-          ...(ownerState.variant === "lamp" && {
-            paddingBlock: 0,
-            paddingInline: 0,
-            borderRadius: 0,
-            border: 0,
-            backgroundColor: "transparent",
-            color: odysseyTokens.TypographyColorBody,
-            "&::before": {
-              content: "''",
-              width: odysseyTokens.Spacing2,
-              height: odysseyTokens.Spacing2,
-              marginInlineEnd: odysseyTokens.Spacing2,
-              borderRadius: "100%",
-              backgroundColor: odysseyTokens.HueNeutral600
-            },
-            [`&.${chipClasses.colorError}`]: {
-              "&::before": {
-                border: 0,
-                backgroundColor: odysseyTokens.PaletteDangerMain
+          ownerState,
+          theme
+        }) => {
+          const contrastMode = theme.odysseyContrastMode;
+          return {
+            height: "auto",
+            paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
+            paddingInline: odysseyTokens.Spacing3,
+            fontSize: odysseyTokens.TypographySizeBody,
+            lineHeight: odysseyTokens.TypographyLineHeightUi,
+            borderRadius: odysseyTokens.BorderRadiusRound,
+            backgroundColor: odysseyTokens.HueNeutral100,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderColor: odysseyTokens.HueNeutral200,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            color: odysseyTokens.HueNeutral700,
+            ...(ownerState.onDelete && {
+              paddingInlineEnd: odysseyTokens.Spacing2
+            }),
+            [`&.${chipClasses.disabled}`]: {
+              opacity: 1,
+              pointerEvents: "none",
+              borderColor: odysseyTokens.BorderColorDisabled,
+              color: odysseyTokens.TypographyColorDisabled,
+              [`& .${chipClasses.deleteIcon}`]: {
+                color: odysseyTokens.HueNeutral300
               }
             },
-            [`&.${chipClasses.colorSuccess}`]: {
-              "&::before": {
-                border: 0,
-                backgroundColor: odysseyTokens.PaletteSuccessMain
+            ...(ownerState.clickable && {
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral200
+              },
+              [`&.${chipClasses.focusVisible}`]: {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+                outlineOffset: odysseyTokens.FocusOutlineOffsetTight,
+                outlineStyle: odysseyTokens.FocusOutlineStyle,
+                outlineWidth: odysseyTokens.FocusOutlineWidthMain
+              },
+              "&:active": {
+                boxShadow: "none",
+                backgroundColor: odysseyTokens.HueNeutral300
               }
+            }),
+            [`& .${chipClasses.icon}`]: {
+              margin: 0,
+              marginInlineEnd: odysseyTokens.Spacing1
             },
-            [`&.${chipClasses.colorWarning}`]: {
+            ...(ownerState.variant === "lamp" && {
+              paddingBlock: 0,
+              paddingInline: 0,
+              borderRadius: 0,
+              border: 0,
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorBody,
               "&::before": {
-                border: 0,
-                backgroundColor: odysseyTokens.HueYellow200
+                content: "''",
+                width: odysseyTokens.Spacing2,
+                height: odysseyTokens.Spacing2,
+                marginInlineEnd: odysseyTokens.Spacing2,
+                borderRadius: "100%",
+                backgroundColor: odysseyTokens.HueNeutral600
+              },
+              [`&.${chipClasses.colorError}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.PaletteDangerMain
+                }
+              },
+              [`&.${chipClasses.colorSuccess}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.PaletteSuccessMain
+                }
+              },
+              [`&.${chipClasses.colorWarning}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.HueYellow200
+                }
               }
+            }),
+            ...(ownerState.variant === "pill" && {
+              paddingBlock: odysseyTokens.Spacing1,
+              paddingInline: odysseyTokens.Spacing2,
+              borderRadius: odysseyTokens.BorderRadiusMain,
+              border: 0,
+              fontWeight: odysseyTokens.TypographyWeightHeadingBold,
+              lineHeight: odysseyTokens.TypographyLineHeightOverline,
+              fontSize: "0.71428571rem",
+              textTransform: "uppercase",
+              ...(contrastMode === "lowContrast" && {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                color: odysseyTokens.HueNeutral700
+              }),
+              ...(contrastMode === "highContrast" && {
+                backgroundColor: odysseyTokens.HueNeutral50,
+                color: odysseyTokens.TypographyColorSubordinate
+              }),
+              [`&.${chipClasses.colorError}`]: {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueRed100,
+                  color: odysseyTokens.HueRed700
+                }),
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.PaletteDangerLighter,
+                  color: odysseyTokens.TypographyColorDanger
+                })
+              },
+              [`&.${chipClasses.colorInfo}`]: {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueBlue100,
+                  color: odysseyTokens.HueBlue700
+                }),
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.PalettePrimaryLighter,
+                  color: odysseyTokens.PalettePrimaryText
+                })
+              },
+              [`&.${chipClasses.colorSuccess}`]: {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueGreen200,
+                  color: odysseyTokens.HueGreen700
+                }),
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.PaletteSuccessLighter,
+                  color: odysseyTokens.TypographyColorSuccess
+                })
+              },
+              [`&.${chipClasses.colorWarning}`]: {
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.HueYellow100,
+                  color: odysseyTokens.HueYellow700
+                }),
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.PaletteWarningLighter,
+                  color: odysseyTokens.TypographyColorWarning
+                })
+              }
+            }),
+            [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+              backgroundColor: odysseyTokens.HueNeutral200
             }
-          }),
-          ...(ownerState.variant === "pill" && {
-            paddingBlock: odysseyTokens.Spacing1,
-            paddingInline: odysseyTokens.Spacing2,
-            borderRadius: odysseyTokens.BorderRadiusMain,
-            border: 0,
-            fontWeight: odysseyTokens.TypographyWeightHeadingBold,
-            lineHeight: odysseyTokens.TypographyLineHeightOverline,
-            backgroundColor: odysseyTokens.HueNeutral50,
-            color: odysseyTokens.TypographyColorSubordinate,
-            fontSize: "0.71428571rem",
-            textTransform: "uppercase",
-            [`&.${chipClasses.colorError}`]: {
-              backgroundColor: odysseyTokens.PaletteDangerLighter,
-              color: odysseyTokens.TypographyColorDanger
-            },
-            [`&.${chipClasses.colorInfo}`]: {
-              backgroundColor: odysseyTokens.PalettePrimaryLighter,
-              color: odysseyTokens.PalettePrimaryText
-            },
-            [`&.${chipClasses.colorSuccess}`]: {
-              backgroundColor: odysseyTokens.PaletteSuccessLighter,
-              color: odysseyTokens.TypographyColorSuccess
-            },
-            [`&.${chipClasses.colorWarning}`]: {
-              backgroundColor: odysseyTokens.PaletteWarningLighter,
-              color: odysseyTokens.TypographyColorWarning
-            }
-          }),
-          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
-            backgroundColor: odysseyTokens.HueNeutral200
-          }
-        }),
+          };
+        },
         label: {
           padding: 0,
           [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
@@ -1559,24 +1556,18 @@ export const components = ({
       },
       styleOverrides: {
         root: {
-          display: "flex",
-          justifyContent: "flex-start",
-          alignItems: "center",
           fontSize: odysseyTokens.TypographySizeSubordinate,
           lineHeight: odysseyTokens.TypographyLineHeightBody,
+          marginBlockEnd: odysseyTokens.Spacing2,
           marginBlockStart: odysseyTokens.Spacing1,
+          textAlign: "start",
           [`.${formLabelClasses.root} + &`]: {
             marginBlockStart: `-${odysseyTokens.Spacing1}`,
             color: odysseyTokens.TypographyColorSubordinate
           },
-          marginBlockEnd: odysseyTokens.Spacing2,
           "&:last-child": {
             marginBlockEnd: 0
           },
-          textAlign: "start",
-          ".field-hint-link-component": {
-            marginInlineStart: odysseyTokens.Spacing1
-          },
           ".Mui-disabled &": {
             color: odysseyTokens.TypographyColorDisabled,
             a: {
@@ -2778,7 +2769,8 @@ export const components = ({
           subtitle1: "p",
           body1: "p",
           inherit: "p",
-          legend: "legend"
+          legend: "legend",
+          overline: "p"
         }
       },
       styleOverrides: {
@@ -2787,6 +2779,16 @@ export const components = ({
           [`&:last-child`]: {
             marginBlockEnd: 0
           }
+        },
+        overline: {
+          fontSize: odysseyTokens.TypographySizeOverline,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          lineHeight: odysseyTokens.TypographyLineHeightOverline,
+          letterSpacing: odysseyTokens.TypographyLetterSpacingOverline,
+          textTransform: "none",
+          ":is(:lang(en-*), :lang(en))": {
+            textTransform: "uppercase"
+          }
         }
       }
     }