tags, table and toggler

theme/components/Table.ts

@@ -2,18 +2,24 @@ import type { tableAnatomy as parts } from '@chakra-ui/anatomy';
 import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
 import { mode } from '@chakra-ui/theme-tools';
 import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
+import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
 const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
+  const transitionProps = getDefaultTransitionProps();
+
   return {
     th: {
       border: 0,
       color: mode('gray.500', 'gray.50')(props),
+      ...transitionProps,
     },
     thead: {
       backgroundColor: mode('gray.50', 'whiteAlpha.200')(props),
+      ...transitionProps,
     },
     td: {
       borderColor: mode('gray.200', 'whiteAlpha.200')(props),
+      ...transitionProps,
     },
   }
 }

theme/components/Tag.ts

@@ -2,12 +2,16 @@ import type { tagAnatomy as parts } from '@chakra-ui/anatomy';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import { mode } from '@chakra-ui/theme-tools';
 import type { PartsStyleFunction } from '@chakra-ui/theme-tools';
+import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
 const variantGray: PartsStyleFunction<typeof parts> = (props) => {
+  const transitionProps = getDefaultTransitionProps();
+
   return {
     container: {
       bg: mode('gray.200', 'gray.600')(props),
       color: mode('gray.600', 'gray.50')(props),
+      ...transitionProps,
     },
   }
 }

ui/header/ColorModeToggler.tsx

@@ -14,11 +14,10 @@ import { dataAttr, __DEV__ } from '@chakra-ui/utils'
 import * as React from 'react'
 import { SunIcon, MoonIcon } from '@chakra-ui/icons'
 import { useColorMode, useColorModeValue } from '@chakra-ui/react';
+import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
 
 import styles from './ColorModeToggler.module.css';
 
-const TRANSITION_DURATION = 150;
-
 export interface ColorModeTogglerProps
   extends Omit<UseCheckboxProps, 'isIndeterminate'>,
   Omit<HTMLChakraProps<'label'>, keyof UseCheckboxProps>,
@@ -38,16 +37,18 @@ export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((prop
 
   const trackBg = useColorModeValue('blackAlpha.100', 'whiteAlpha.200')
   const thumbBg = useColorModeValue('white', 'black')
+  const transitionProps = getDefaultTransitionProps();
 
   const trackStyles: SystemStyleObject = React.useMemo(() => ({
     bg: trackBg,
-  }), [ trackBg ])
+    ...transitionProps,
+  }), [ trackBg, transitionProps ])
 
   const thumbStyles: SystemStyleObject = React.useMemo(() => ({
     bg: thumbBg,
-    transitionProperty: 'transform',
-    transitionDuration: `${ TRANSITION_DURATION }ms`,
-  }), [ thumbBg ])
+    ...transitionProps,
+    transitionProperty: 'background-color, transform',
+  }), [ thumbBg, transitionProps ])
 
   return (
     <chakra.label
@@ -60,14 +61,24 @@ export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((prop
         className={ styles.track }
         __css={ trackStyles }
       >
-        <MoonIcon className={ styles.nightIcon } boxSize={ 4 } color={ useColorModeValue('blue.600', 'white') }/>
+        <MoonIcon
+          className={ styles.nightIcon }
+          boxSize={ 4 }
+          color={ useColorModeValue('blue.600', 'white') }
+          { ...transitionProps }
+        />
         <chakra.div
           className={ styles.thumb }
           data-checked={ dataAttr(state.isChecked) }
           data-hover={ dataAttr(state.isHovered) }
           __css={ thumbStyles }
         />
-        <SunIcon className={ styles.dayIcon } boxSize={ 4 } color={ useColorModeValue('gray.500', 'blue.600') }/>
+        <SunIcon
+          className={ styles.dayIcon }
+          boxSize={ 4 }
+          color={ useColorModeValue('gray.500', 'blue.600') }
+          { ...transitionProps }
+        />
       </chakra.div>
     </chakra.label>
   )