@graphcommerce/next-ui 10.0.0-canary.67 → 10.0.0-canary.72

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,6 +1,7 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import type { SnackbarProps, SxProps, Theme } from '@mui/material'
-import { Box, Fab, lighten, Portal, Snackbar, SnackbarContent } from '@mui/material'
+import { Box, Fab, Portal, Snackbar, SnackbarContent } from '@mui/material'
 import React, { useEffect, useState } from 'react'
 import { iconCheckmark, iconClose, iconSadFace } from '../icons'
 import iconInfo from '../icons/info.svg'
@@ -108,13 +109,13 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
         open={showSnackbar}
         autoHideDuration={autoHide ? 5000 : null}
         className={classes.root}
-        sx={[
+        sx={sxx(
           {
             pointerEvents: 'none',
             '& > *': { pointerEvents: 'auto' },
           },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
         onClose={hideSnackbar}
       >
         <SnackbarContent
@@ -122,8 +123,8 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
           className={classes.content}
           sx={(theme) => ({
             '&.variantPill': {
-              backgroundColor: theme.palette.background.paper,
-              color: theme.palette.text.primary,
+              backgroundColor: theme.vars.palette.background.paper,
+              color: theme.vars.palette.text.primary,
               [theme.breakpoints.up('md')]: {
                 ...breakpointVal(
                   'borderRadius',
@@ -154,7 +155,6 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                 gridArea: 'children',
               },
             },
-
             '&.disableIcon .MuiSnackbarContent-message': {
               gridTemplate: {
                 xs: `"children close"
@@ -180,10 +180,22 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
           message={
             <>
               {!disableIcon && <IconSvg src={icon2} size='large' />}
-              <Box gridArea='children'>{children}</Box>
+              <Box
+                sx={{
+                  gridArea: 'children',
+                }}
+              >
+                {children}
+              </Box>
               {/* </Box> */}
               {action && (
-                <Box className={classes.actionButton} onClick={hideSnackbar} gridArea='action'>
+                <Box
+                  className={classes.actionButton}
+                  onClick={hideSnackbar}
+                  sx={{
+                    gridArea: 'action',
+                  }}
+                >
                   {action}
                 </Box>
               )}
@@ -196,7 +208,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                   onMouseDown={preventAnimationBubble}
                   onTouchStart={preventAnimationBubble}
                   sx={(theme) => ({
-                    backgroundColor: lighten(theme.palette.background.paper, 0.1),
+                    backgroundColor: theme.lighten(theme.vars.palette.background.paper, 0.1),
                   })}
                 >
                   <IconSvg src={iconClose} />

package/StarRatingField/StarRatingField.tsx

@@ -27,7 +27,7 @@ export function StarRatingField(props: StarRatingFieldProps) {
           src={iconStar}
           size='large'
           className={classes.starFull}
-          sx={(theme) => ({ fill: theme.palette.divider, stroke: 'none', margin: '0 3px' })}
+          sx={(theme) => ({ fill: theme.vars.palette.divider, stroke: 'none', margin: '0 3px' })}
         />
       }
       icon={

package/Stepper/Stepper.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import { extendableComponent } from '../Styles'
@@ -18,19 +19,19 @@ export function Stepper(props: StepperProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           marginTop: '-2px',
           display: 'grid',
           gridAutoFlow: 'column',
           gap: theme.spacings.xxs,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {[...Array(steps).keys()].map((step: number) => (
         <Box
-          sx={[
+          sx={sxx(
             {
               height: 2,
               bgcolor: 'divider',
@@ -38,7 +39,7 @@ export function Stepper(props: StepperProps) {
             currentStep - 1 >= step && {
               bgcolor: 'secondary.main',
             },
-          ]}
+          )}
           className={`${classes.step} ${currentStep - 1 >= step ? classes.activeStep : ''}`}
           key={step}
         />

package/Styles/withTheme.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { ThemeProvider } from '@mui/material'
 import React from 'react'
@@ -43,21 +44,22 @@ export function withTheme<T>(
   Component: (value: T & WithSx) => React.ReactElement<any, any> | null,
   theme: Theme,
 ): React.FC<T & WithSx> {
-  return (data: T & WithSx) => {
+  // eslint-disable-next-line react/function-component-definition
+  return function WithTheme(data: T & WithSx) {
     const { sx = [] } = data
     return (
       <ThemeProvider theme={theme}>
-        <Component
-          {...data}
-          sx={[
+        {React.createElement(Component, {
+          ...data,
+          sx: sxx(
             {
               typography: 'body1',
-              color: theme.palette.text.primary,
-              backgroundColor: theme.palette.background.default,
+              color: theme.vars.palette.text.primary,
+              backgroundColor: theme.vars.palette.background.default,
             },
-            ...(Array.isArray(sx) ? sx : [sx]),
-          ]}
-        />
+            sx,
+          ),
+        })}
       </ThemeProvider>
     )
   }

package/Tabs/TabItem.tsx

@@ -1,5 +1,5 @@
 import { Box, ButtonBase, type SxProps, type Theme } from '@mui/material'
-import { alpha, useTheme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import { forwardRef } from 'react'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
@@ -46,7 +46,7 @@ export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>((props, ref)
     sx,
     disableRipple = true,
     className,
-    color = (theme) => theme.palette.background.default,
+    color = (theme) => theme.vars.palette.background.default,
     variant = 'chrome',
     ...other
   } = props
@@ -74,12 +74,11 @@ export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>((props, ref)
           pb: spacing,
           mx: `calc(${spacing} / 2)`,
           transition: 'background-color 0.2s ease-in-out',
-
           '&:hover:not(.selected) .TabItem-content': {
-            bgcolor: alpha(color(theme), 0.5),
+            bgcolor: theme.alpha(color(theme), 0.5),
           },
           '&:focus:not(.selected) .TabItem-content': {
-            bgcolor: alpha(color(theme), 0.5),
+            bgcolor: theme.alpha(color(theme), 0.5),
           },
           '&::before': {
             opacity: 0,

package/TextInputNumber/TextInputNumber.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
 import {
@@ -95,7 +96,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
       variant={variant}
       inputRef={forkRef}
       className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
-      sx={[
+      sx={sxx(
         {
           width: responsiveVal(90, 120),
         },
@@ -117,61 +118,86 @@ export function TextInputNumber(props: TextInputNumberProps) {
             display: 'none',
           },
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       autoComplete='off'
-      InputProps={{
-        ...textFieldProps.InputProps,
-        startAdornment: (
-          <Box>
-            <Fab
-              aria-label={t`Decrease`}
-              size='smaller'
-              sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
-              onPointerDown={() => setDirection('down')}
-              onPointerUp={stop}
-              tabIndex={-1}
-              {...DownProps}
-              className={`${classes.button} ${DownProps.className ?? ''}`}
-            >
-              {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
-            </Fab>
-          </Box>
-        ),
-        endAdornment: (
-          <Box>
-            <Fab
-              aria-label={t`Increase`}
-              size='smaller'
-              sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
-              onPointerDown={() => setDirection('up')}
-              onPointerUp={() => setDirection(null)}
-              tabIndex={-1}
-              {...UpProps}
-              className={`${classes.button} ${UpProps.className ?? ''}`}
-            >
-              {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
-            </Fab>
-          </Box>
-        ),
-      }}
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
         if (textFieldProps.onChange) textFieldProps.onChange(e)
         updateDisabled(e.target)
       }}
-      inputProps={{
-        'aria-label': t`Number`,
-        ...inputProps,
-        sx: [
-          {
-            typography: 'body1',
-            textAlign: 'center',
-            '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-              appearance: 'none',
+      slotProps={{
+        input: {
+          ...textFieldProps.InputProps,
+          startAdornment: (
+            <Box>
+              <Fab
+                aria-label={t`Decrease`}
+                size='smaller'
+                sx={sxx(
+                  {
+                    minHeight: '30px',
+                  },
+                  variant === 'standard'
+                    ? {
+                        boxShadow: 4,
+                      }
+                    : {
+                        boxShadow: 0,
+                      },
+                )}
+                onPointerDown={() => setDirection('down')}
+                onPointerUp={stop}
+                tabIndex={-1}
+                {...DownProps}
+                className={`${classes.button} ${DownProps.className ?? ''}`}
+              >
+                {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
+              </Fab>
+            </Box>
+          ),
+          endAdornment: (
+            <Box>
+              <Fab
+                aria-label={t`Increase`}
+                size='smaller'
+                sx={sxx(
+                  {
+                    minHeight: '30px',
+                  },
+                  variant === 'standard'
+                    ? {
+                        boxShadow: 4,
+                      }
+                    : {
+                        boxShadow: 0,
+                      },
+                )}
+                onPointerDown={() => setDirection('up')}
+                onPointerUp={() => setDirection(null)}
+                tabIndex={-1}
+                {...UpProps}
+                className={`${classes.button} ${UpProps.className ?? ''}`}
+              >
+                {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
+              </Fab>
+            </Box>
+          ),
+        },
+
+        htmlInput: {
+          'aria-label': t`Number`,
+          ...inputProps,
+          sx: [
+            {
+              typography: 'body1',
+              textAlign: 'center',
+              '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+                appearance: 'none',
+              },
             },
-          },
-        ],
-        className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
+          ],
+          className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
+        },
       }}
     />
   )

package/Theme/DarkLightModeThemeProvider.tsx

@@ -1,100 +1,41 @@
 import { Trans } from '@lingui/react/macro'
-import type { FabProps, ListItemButtonProps, Theme } from '@mui/material'
-import {
-  Fab,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  ThemeProvider, // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-  useMediaQuery,
-} from '@mui/material'
-import { useRouter } from 'next/router'
-import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+import type { FabProps, ListItemButtonProps } from '@mui/material'
+import { Fab, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { useColorScheme } from '@mui/material/styles'
 import { iconMoon, iconSun } from '../icons'
 import { IconSvg } from '../IconSvg'
-import { getCssFlag, setCssFlag } from '../utils/cssFlags'
 
 type Mode = 'dark' | 'light'
-type UserMode = 'auto' | Mode
-
-type ColorModeContext = {
-  userMode: UserMode
-  browserMode: Mode
-  currentMode: Mode
-  isSingleMode: boolean
-  toggle: () => void
-}
-
-/** @public */
-export const colorModeContext = createContext(undefined as unknown as ColorModeContext)
-colorModeContext.displayName = 'ColorModeContext'
-
-export type ThemeProviderProps = {
-  children: React.ReactNode
-  ssrMode?: Mode
-  listenToBrowser?: boolean
-} & (
-  | { light: Theme; dark?: undefined }
-  | { light?: undefined; dark: Theme }
-  | { light: Theme; dark: Theme }
-)
 
 /**
- * Wrapper around `import { ThemeProvider } from '@mui/material'`
+ * Hook to get and set the color mode. Uses MUI's useColorScheme() when CSS variables are enabled.
  *
- * The multi DarkLightModeThemeProvider allows switching between light and dark mode based on URL
- * and on user input.
+ * @public
  */
-export function DarkLightModeThemeProvider(props: ThemeProviderProps) {
-  const { children, light, dark, ssrMode = 'light', listenToBrowser = true } = props
-  const [configuredMode, setConfiguredMode] = useState<UserMode>(listenToBrowser ? 'auto' : ssrMode)
-  const setThemeMode = (mode: UserMode) => {
-    setConfiguredMode(mode)
-    setCssFlag('color-scheme', mode)
+export function useColorMode() {
+  const colorScheme = useColorScheme()
+
+  if (!colorScheme.mode) {
+    // CSS variables not enabled, return safe defaults
+    return {
+      userMode: 'light' as const,
+      browserMode: 'light' as Mode,
+      currentMode: 'light' as Mode,
+      isSingleMode: true,
+      toggle: () => {},
+    }
   }
 
-  const browserMode: Mode = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light'
+  const { mode, setMode, systemMode } = colorScheme
+  const currentMode: Mode = mode === 'system' ? (systemMode ?? 'light') : mode
 
-  // If the user has set a mode, use that. Otherwise, use the browser mode.
-  const currentMode = configuredMode === 'auto' ? browserMode : configuredMode
-
-  let theme: Theme = light || dark // Default
-  if (light && currentMode === 'light') theme = light
-  else if (dark) theme = dark
-
-  useEffect(() => {
-    const flag = getCssFlag('color-scheme') as Mode
-    if (flag) setConfiguredMode(flag)
-  }, [setConfiguredMode])
-
-  // If a URL parameter is present, switch from auto to light or dark mode
-  const { asPath } = useRouter()
-  useEffect(() => {
-    if (asPath.includes('darkmode')) setConfiguredMode('dark')
-  }, [asPath])
-
-  // Create the context
-  const colorContext: ColorModeContext = useMemo(
-    () => ({
-      browserMode,
-      userMode: configuredMode,
-      currentMode,
-      isSingleMode: !light || !dark,
-      toggle: () => setThemeMode(currentMode === 'light' ? 'dark' : 'light'),
-    }),
-    [browserMode, configuredMode, currentMode, light, dark],
-  )
-
-  return (
-    <colorModeContext.Provider value={colorContext}>
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
-    </colorModeContext.Provider>
-  )
-}
-
-/** @public */
-export function useColorMode() {
-  return useContext(colorModeContext)
+  return {
+    userMode: mode,
+    browserMode: (systemMode ?? 'light') as Mode,
+    currentMode,
+    isSingleMode: false,
+    toggle: () => setMode(currentMode === 'light' ? 'dark' : 'light'),
+  }
 }
 
 /** @public */
@@ -115,8 +56,6 @@ export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
 /**
  * A button that switches between light and dark mode
  *
- * To disable this functionality
- *
  * @public
  */
 export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
@@ -128,7 +67,7 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
   }
 
   return (
-    <ListItemButton {...props} sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]} dense onClick={toggle}>
+    <ListItemButton {...props} sx={sx} dense onClick={toggle}>
       <ListItemIcon sx={{ minWidth: 'unset', paddingRight: '8px' }}>
         <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
       </ListItemIcon>
@@ -138,3 +77,17 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
     </ListItemButton>
   )
 }
+
+/**
+ * @deprecated Use ThemeProvider from @mui/material with cssVariables enabled instead. The
+ *   dark/light mode toggle now uses MUI's built-in useColorScheme() hook.
+ */
+export function DarkLightModeThemeProvider({ children }: { children: React.ReactNode }) {
+  console.warn(
+    'DarkLightModeThemeProvider is deprecated. Use ThemeProvider from @mui/material with cssVariables enabled instead.',
+  )
+  return children
+}
+
+/** @deprecated No longer needed, context is provided by MUI's ThemeProvider with cssVariables */
+export const colorModeContext = null

package/Theme/MuiButton.ts

@@ -1,8 +1,7 @@
 import type { ComponentsVariants, Theme } from '@mui/material'
-import { alpha, darken, lighten } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
-declare module '@mui/material/Button/Button' {
+declare module '@mui/material/Button' {
   interface ButtonPropsVariantOverrides {
     pill: true
     inline: true
@@ -25,7 +24,7 @@ export const MuiButtonResponsive: ButtonVariants = [
       ...theme.typography.body2,
       padding: `${responsiveVal(3, 5)} ${responsiveVal(8, 15)}`,
       '&.MuiLoadingButton-loading:hover': {
-        backgroundColor: theme.palette.action.disabledBackground,
+        backgroundColor: theme.vars.palette.action.disabledBackground,
       },
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(9, 15) },
       '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(9, 15) },
@@ -37,7 +36,7 @@ export const MuiButtonResponsive: ButtonVariants = [
       ...theme.typography.body1,
       padding: `${responsiveVal(7, 9)} ${responsiveVal(15, 22)}`,
       '&.MuiLoadingButton-loading:hover': {
-        backgroundColor: theme.palette.action.disabledBackground,
+        backgroundColor: theme.vars.palette.action.disabledBackground,
       },
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(16, 24) },
       '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(16, 24) },
@@ -50,7 +49,7 @@ export const MuiButtonResponsive: ButtonVariants = [
       fontWeight: theme.typography.fontWeightBold,
       padding: `${responsiveVal(10, 15)} ${responsiveVal(28, 58)}`,
       '&.MuiLoadingButton-loading:hover': {
-        backgroundColor: theme.palette.action.disabledBackground,
+        backgroundColor: theme.vars.palette.action.disabledBackground,
       },
       '& .MuiLoadingButton-loadingIndicatorEnd': { right: responsiveVal(30, 60) },
       '& .MuiLoadingButton-loadingIndicatorStart': { left: responsiveVal(30, 60) },
@@ -112,36 +111,36 @@ export const MuiButtonPill: ButtonVariants = [
   {
     props: { variant: 'pill', color: 'primary' },
     style: ({ theme }) => ({
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.palette.primary.dark },
+      backgroundColor: theme.vars.palette.primary.main,
+      color: theme.vars.palette.primary.contrastText,
+      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.vars.palette.primary.dark },
     }),
   },
   {
     props: { variant: 'pill', color: 'secondary' },
     style: ({ theme }) => ({
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.secondary.contrastText,
-      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.palette.secondary.dark },
+      backgroundColor: theme.vars.palette.secondary.main,
+      color: theme.vars.palette.secondary.contrastText,
+      '&:hover:not(.Mui-disabled)': { backgroundColor: theme.vars.palette.secondary.dark },
     }),
   },
   {
     props: { variant: 'pill', color: 'inherit' },
     style: ({ theme }) => ({
-      backgroundColor: theme.palette.background.paper,
+      backgroundColor: theme.vars.palette.background.paper,
       '&:hover:not(.Mui-disabled)': {
-        backgroundColor:
-          theme.palette.mode === 'light'
-            ? darken(theme.palette.background.default, 0.05)
-            : lighten(theme.palette.background.default, 0.2),
+        backgroundColor: theme.darken(theme.vars.palette.background.default, 0.05),
+        ...theme.applyStyles('dark', {
+          backgroundColor: theme.lighten(theme.vars.palette.background.default, 0.2),
+        }),
       },
     }),
   },
   {
     props: { variant: 'pill', disabled: true },
     style: ({ theme }) => ({
-      backgroundColor: theme.palette.action.disabledBackground,
-      color: theme.palette.action.disabled,
+      backgroundColor: theme.vars.palette.action.disabledBackground,
+      color: theme.vars.palette.action.disabled,
     }),
   },
 ]
@@ -150,16 +149,18 @@ export const MuiButtonInline: ButtonVariants = [
   {
     props: { variant: 'inline', color: 'primary' },
     style: ({ theme }) => ({
-      color: theme.palette.primary.main,
-      '&:hover:not(.Mui-disabled)': { backgroundColor: alpha(theme.palette.primary.main, 0.19) },
+      color: theme.vars.palette.primary.main,
+      '&:hover:not(.Mui-disabled)': {
+        backgroundColor: theme.alpha(theme.vars.palette.primary.main, 0.19),
+      },
     }),
   },
   {
     props: { variant: 'inline', color: 'secondary' },
     style: ({ theme }) => ({
-      color: theme.palette.secondary.main,
+      color: theme.vars.palette.secondary.main,
       '&:hover:not(.Mui-disabled)': {
-        backgroundColor: theme.palette.secondary.light,
+        backgroundColor: theme.vars.palette.secondary.light,
       },
     }),
   },

package/Theme/MuiChip.ts

@@ -1,8 +1,7 @@
 import type { ComponentsVariants, Theme } from '@mui/material'
-import { darken } from '@mui/material'
 import { responsiveVal } from '../Styles'
 
-declare module '@mui/material/Chip/Chip' {
+declare module '@mui/material/Chip' {
   interface ChipPropsSizeOverrides {
     responsive: true
   }
@@ -54,36 +53,36 @@ export const MuiChip: ChipVariants = [
   {
     props: { variant: 'outlined' },
     style: ({ theme }) => ({
-      borderColor: theme.palette.divider,
-      backgroundColor: theme.palette.background.default,
+      borderColor: theme.vars.palette.divider,
+      backgroundColor: theme.vars.palette.background.default,
       '&:active': {
         boxShadow: 'none',
       },
       '& .MuiChip-deleteIcon': {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
       },
       '&.MuiChip-clickable:hover': {
-        backgroundColor: darken(theme.palette.background.default, 0.05),
+        backgroundColor: theme.darken(theme.vars.palette.background.default, 0.05),
       },
       '& .MuiChip-deleteIcon:hover': {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
       },
     }),
   },
   {
     props: { color: 'primary' },
     style: ({ theme }) => ({
-      borderColor: theme.palette.text.primary,
-      color: theme.palette.text.primary,
+      borderColor: theme.vars.palette.text.primary,
+      color: theme.vars.palette.text.primary,
       '&:hover': {
-        background: `${theme.palette.background.default} !important`,
-        borderColor: `${theme.palette.divider} !important`,
+        background: `${theme.vars.palette.background.default} !important`,
+        borderColor: `${theme.vars.palette.divider} !important`,
       },
       '&:focus': {
-        background: `${theme.palette.background.paper} !important`,
+        background: `${theme.vars.palette.background.paper} !important`,
       },
       '& .MuiChip-deleteIcon:hover': {
-        color: theme.palette.text.primary,
+        color: theme.vars.palette.text.primary,
       },
     }),
   },