transition and shadow tokens

theme/foundations/transition.ts

+const transitionDuration = {
+  'ultra-fast': '50ms',
+  faster: '100ms',
+  fast: '150ms',
+  normal: '200ms',
+  slow: '300ms',
+  slower: '400ms',
+  'ultra-slow': '500ms',
+};
+
+const transition = {
+  duration: transitionDuration,
+};
+
+export default transition;

theme/index.ts

@@ -5,6 +5,7 @@ import config from './config';
 import borders from './foundations/borders';
 import breakpoints from './foundations/breakpoints';
 import colors from './foundations/colors';
+import transition from './foundations/transition';
 import typography from './foundations/typography';
 import global from './global';
 
@@ -18,6 +19,7 @@ const overrides = {
     global,
   },
   breakpoints,
+  transition,
 };
 
 export default extendTheme(overrides);

theme/utils/getOutlinedFieldStyles.ts

@@ -35,7 +35,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
     _focusVisible: {
       zIndex: 1,
       borderColor: getColor(theme, fc),
-      boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      boxShadow: 'md',
     },
     _placeholder: {
       color: mode('blackAlpha.600', 'whiteAlpha.600')(props),

ui/blocks/header/ColorModeToggler.tsx

@@ -49,12 +49,12 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
     boxSizing: 'content-box',
     cursor: 'pointer',
     ...transitionProps,
-    transitionDuration: '500ms',
+    transitionDuration: 'ultra-slow',
   }), [ trackBg, transitionProps ]);
 
   const thumbStyles: SystemStyleObject = React.useMemo(() => ({
     bg: thumbBg,
-    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+    boxShadow: 'md',
     width: '24px',
     height: '24px',
     borderRadius: 'md',
@@ -62,7 +62,7 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
     transform: state.isChecked ? 'translate(44px, 4px)' : 'translate(4px, 4px)',
     ...transitionProps,
     transitionProperty: 'background-color, transform',
-    transitionDuration: '500ms',
+    transitionDuration: 'ultra-slow',
   }), [ thumbBg, transitionProps, state.isChecked ]);
 
   return (