@basic-ui/material 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/Table/TableRow.tsx

@@ -19,7 +19,7 @@ export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(
         display="flex"
         flexDirection="row"
         width="100%"
-        variant="body1"
+        variant="body-medium"
         px={2}
         __css={{
           borderBottomStyle: 'solid',

package/src/Text/LoremIpsum.tsx

@@ -9,7 +9,7 @@ export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
   const phrases = [];
   for (let i = 0; i < count; i++) {
     phrases.push(
-      <Text variant="body1" key={`p-${i}`} m={'1.2em'}>
+      <Text variant="body-medium" key={`p-${i}`} m={'1.2em'}>
         {phrase}
       </Text>
     );

package/src/Text/Text.story.tsx

@@ -6,7 +6,46 @@ export default {
   title: 'components/Text',
 };
 
+const loremIpsum =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
+  'Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque,' +
+  'possimus nihil molestias sapiente necessitatibus dolor saepe inventore,' +
+  'soluta id accusantium voluptas beatae.';
+
 const Example = () => {
+  const variantMapping = {
+    'display-large': 'Display large',
+    'display-medium': 'Display medium',
+    'display-small': 'Display small',
+    'headline-large': 'Headline large',
+    'headline-medium': 'Headline medium',
+    'headline-small': 'Headline small',
+    'title-large': 'Title large',
+    'title-medium': 'Title medium',
+    'title-small': 'Title small',
+    'label-large': 'Label large',
+    'label-medium': 'Label medium',
+    'label-small': 'Label small',
+    'body-large': `Body large. ${loremIpsum}`,
+    'body-medium': `Body medium. ${loremIpsum}`,
+    'body-small': `Body small. ${loremIpsum}`,
+  };
+  const variants = Object.keys(variantMapping).map((v) => (
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};
+
+export const AllVariants = () => <Example />;
+
+export const LegacyVariants = () => {
   const variantMapping = {
     h1: 'Heading 1',
     h2: 'Heading 2',
@@ -16,16 +55,14 @@ const Example = () => {
     h6: 'Heading 6',
     subtitle1: 'Subtitle 1',
     subtitle2: 'Subtitle 2',
-    body1:
-      'Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.',
-    body2:
-      'Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.',
+    body1: `Body 1. ${loremIpsum}`,
+    body2: `Body 2. ${loremIpsum}`,
     button: 'Button text',
     caption: 'Caption text',
     overline: 'Overline text',
   };
   const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v} mb={2}>
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
       {variantMapping[v]}
     </Text>
   ));
@@ -36,5 +73,3 @@ const Example = () => {
     </Box>
   );
 };
-
-export const AllVariants = () => <Example />;

package/src/Text/Text.tsx

@@ -1,10 +1,13 @@
+import type { ElementType } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 
-export type TextVariants =
+/**
+ * @deprecated
+ */
+export type LegacyTextVariants =
   | 'h1'
   | 'h2'
   | 'h3'
@@ -19,11 +22,28 @@ export type TextVariants =
   | 'overline'
   | 'button';
 
+export type TextVariants =
+  | 'display-large'
+  | 'display-medium'
+  | 'display-small'
+  | 'headline-large'
+  | 'headline-medium'
+  | 'headline-small'
+  | 'title-large'
+  | 'title-medium'
+  | 'title-small'
+  | 'label-large'
+  | 'label-medium'
+  | 'label-small'
+  | 'body-large'
+  | 'body-medium'
+  | 'body-small';
+
 export interface TextProps extends BoxProps {
-  variant?: TextVariants;
+  variant?: LegacyTextVariants | TextVariants;
 }
 
-const mappings: { [key: string]: React.ElementType<any> } = {
+const mappings: { [key: string]: ElementType<any> } = {
   h1: 'h1',
   h2: 'h2',
   h3: 'h3',
@@ -43,7 +63,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
   props,
   forwardedRef
 ) {
-  const { as, variant = 'body1', ...otherProps } = props;
+  const { as, variant = 'body-medium', ...otherProps } = props;
   let Comp = as;
   if (!Comp) {
     Comp = mappings[variant] || 'p';

package/src/TextField/FilledContainer.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { get } from '@styled-system/css';
 import { rem } from 'polished';
 
@@ -78,10 +78,10 @@ const BorderBottom = () => (
 );
 
 export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
-  children?: React.ReactNode;
+  children?: ReactNode;
   color?: string;
   hasFocus?: boolean;
-  label?: React.ReactNode;
+  label?: ReactNode;
   labelIsFloating: boolean;
   inputId: string;
   error?: boolean;

package/src/TextField/HelperText.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { Box } from '../Box';
 import { Text } from '../Text';
@@ -7,9 +7,9 @@ import { alpha } from '../color';
 import type { TextProps } from '../Text/Text';
 
 export interface HelperTextProps extends TextProps {
-  children?: React.ReactNode;
-  leftSide?: React.ReactNode;
-  rightSide?: React.ReactNode;
+  children?: ReactNode;
+  leftSide?: ReactNode;
+  rightSide?: ReactNode;
   error?: boolean;
   disabled?: boolean;
 }
@@ -46,7 +46,7 @@ export const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(
         display="flex"
         pt={1}
         color={color}
-        variant="caption"
+        variant="label-small"
         ref={forwardedRef}
         lineHeight="normal"
         __css={{

package/src/TextField/IconContainer.tsx

@@ -1,13 +1,12 @@
 import { rem } from 'polished';
-import type { FC } from 'react';
-import * as React from 'react';
+import type { FC, ReactNode } from 'react';
 
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';
 
 export const IconContainer: FC<{
-  children?: React.ReactNode;
+  children?: ReactNode;
   position: 'start' | 'end';
 }> = ({ position, children }) => (
   <Box

package/src/TextField/Input.tsx

@@ -1,10 +1,11 @@
 import { rem } from 'polished';
-import type { InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { alpha } from '../color';
+import { EASING_STANDARD } from '../motion';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,
@@ -19,8 +20,8 @@ export interface InputProps
   multiline?: boolean;
   variant?: 'filled' | 'outlined';
   hasLabel?: boolean;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 }
 
 export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
@@ -72,7 +73,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
             variant === 'filled'
               ? alpha('on.surface-variant', 0.87)
               : alpha('on.surface-variant', 0.6),
-          transition: `opacity .18s cubic-bezier(.4,0,.2,1)`,
+          transition: `opacity .18s ${EASING_STANDARD}`,
         },
         ':disabled::placeholder': {
           color: alpha('on.surface', 0.38),

package/src/TextField/OutlinedContainer.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import {
   forwardRef,
   useEffect,
@@ -5,7 +6,6 @@ import {
   useState,
   useRef,
 } from 'react';
-import * as React from 'react';
 
 import { NotchedOutline } from '../NotchedOutline';
 import type { BoxProps } from '../Box';
@@ -22,8 +22,8 @@ const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export interface OutlinedContainerProps extends BoxProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
+  children?: ReactNode;
+  label?: ReactNode;
   color?: string;
   error?: boolean;
   theme: Theme;

package/src/TextField/TextField.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef, useState, useId } from 'react';
-import * as React from 'react';
 import { wrapEvent, useControlledState } from '@basic-ui/core';
 
 import type { InputProps } from './Input';
@@ -32,7 +32,7 @@ export type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {
   variant?: 'outlined' | 'filled';
   containerProps?: Omit<BoxProps, 'color'>;
   color?: 'primary' | 'secondary';
-  label?: React.ReactNode;
+  label?: ReactNode;
   helperText?: string;
   maxLength?: number;
   hideCharacterCounter?: boolean;
@@ -40,8 +40,8 @@ export type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {
   value?: string;
   multiline?: boolean;
   error?: boolean | string;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 };
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -1,9 +1,9 @@
-import React, { useMemo, useDeferredValue, useEffect } from 'react';
+import { useMemo, useDeferredValue, useEffect } from 'react';
 import {
   CorePalette,
   argbFromHex,
   hexFromArgb,
-} from '@material/material-color-utilities';
+} from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
 import type { Color } from '@basic-ui/color-picker';
 import { toColor } from '@basic-ui/color-picker';
 
@@ -68,6 +68,8 @@ const ThemeBuilder = () => {
         sx={{ gap: 3 }}
         flexDirection="column"
         width="300px"
+        position="fixed"
+        top="0"
       >
         <Box display="flex">
           <TextFieldColorPicker
@@ -131,31 +133,33 @@ const ThemeBuilder = () => {
           </Button>
         </Box>
       </Box>
-      <Box width="600px" mx="auto">
-        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Light theme
-            </Text>
-            <ThemeColors scheme={scheme} />
+      <Box width="100%" pl="300px">
+        <Box width="600px" mx="auto">
+          <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
+            <Box flex="1">
+              <Text variant="title-medium" as="h1" pb={'0.3em'}>
+                Light theme
+              </Text>
+              <ThemeColors scheme={scheme} />
+            </Box>
+            <Box flex="1">
+              <Text variant="title-medium" as="h1" pb={'0.3em'}>
+                Dark theme
+              </Text>
+              <ThemeColors scheme={scheme.modes.dark} />
+            </Box>
           </Box>
-          <Box flex="1">
-            <Text variant="h5" as="h1" pb={'0.3em'}>
-              Dark theme
-            </Text>
-            <ThemeColors scheme={scheme.modes.dark} />
+          <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
+            <TonalColors palette={a1} />
+            <TonalColors palette={secondaryColorTonal} />
+            <TonalColors palette={tertiaryColorTonal} />
+            <TonalColors palette={error} />
+            <TonalColors palette={neutralColorTonal} />
+            <TonalColors palette={n2} />
+          </Box>
+          <Box as="pre" fontFamily="monospace" fontSize="12px">
+            {JSON.stringify({ colors: scheme }, null, 2)}
           </Box>
-        </Box>
-        <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
-          <TonalColors palette={a1} />
-          <TonalColors palette={secondaryColorTonal} />
-          <TonalColors palette={tertiaryColorTonal} />
-          <TonalColors palette={error} />
-          <TonalColors palette={neutralColorTonal} />
-          <TonalColors palette={n2} />
-        </Box>
-        <Box as="pre" fontFamily="monospace" fontSize="12px">
-          {JSON.stringify({ colors: scheme }, null, 2)}
         </Box>
       </Box>
     </Box>

package/src/ThemeExplorer/ThemeColors.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import { Box } from '..';
 import { ColorRow } from './components';

package/src/ThemeExplorer/components.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
-import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
+import { hexFromArgb, TonalPalette } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
 
 import { Box, Text, Tooltip } from '../';
 
@@ -53,7 +53,12 @@ export const ColorItem = memo(
             }
           }}
         >
-          <Text variant="body2" as="span" fontSize="11px" lineHeight="11px">
+          <Text
+            variant="body-small"
+            as="span"
+            fontSize="11px"
+            lineHeight="11px"
+          >
             {token}
           </Text>
         </Box>

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -1,5 +1,5 @@
 import type { TonalPalette } from '@material/material-color-utilities';
-import { hexFromArgb } from '@material/material-color-utilities';
+import { hexFromArgb } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
 
 export function makeColorScheme(opts: {
   primary: TonalPalette;

package/src/ThemeExplorer/useDeferredColor.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useDeferredValue } from 'react';
-import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
+import { TonalPalette, argbFromHex } from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
 import type { Color } from '@basic-ui/color-picker';
 
 import { useLocalStorageCachedState } from './useLocalStorageCachedState';

package/src/Tooltip/Tooltip.story.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Tooltip } from './';
 import { Button } from '../Button';

package/src/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 import type { PopperProps } from '@basic-ui/core';
 import { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';
-import type { FC } from 'react';
-import React, { forwardRef } from 'react';
+import type { ElementType, FC, ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
@@ -10,15 +10,16 @@ import { alpha } from '../color';
 export interface TooltipProps
   extends BoxProps,
     Omit<PopperProps, 'color' | 'anchorEl'> {
-  label: React.ReactNode;
+  label: ReactNode;
   disabled?: boolean;
 }
 
 const BaseTooltip: FC<
   BoxProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
   } & Omit<PopperProps, 'color' | 'anchorEl'>
 > = _BaseTooltip as any;
+
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   function Tooltip(props, forwardedRef) {
     const { placement = 'bottom', __css, ...otherProps } = props;
@@ -31,15 +32,12 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         placement={placement}
         distance={8}
         __css={{
+          variant: ['text.body-medium', 'text.body-small'],
           bg: alpha('#616161', 0.9),
           color: '#fff',
-          fontSize: [2, 2, 1],
-          fontFamily: 'body',
-          fontWeight: 'regular',
-          lineHeight: [1.2, 1.2, 1.33],
-          px: [3, 3, 2],
-          py: [2, 2, 1],
-          borderRadius: '4px',
+          px: 2,
+          py: 1,
+          borderRadius: 'extra-small',
           zIndex: 'tooltip',
           ...__css,
         }}

package/src/color.ts

@@ -17,17 +17,38 @@ export const alpha =
     return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
   };
 
+export function mixColor(
+  baseColor: string,
+  overlayColor: string
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity: number
+): (theme: any) => string;
+export function mixColor(
+  baseColor: string,
+  overlayColor: string,
+  overlayOpacity?: number
+): (theme: any) => string {
+  return (theme) => {
+    baseColor = get(theme, `colors.${baseColor}`, baseColor);
+    overlayColor = overlayOpacity
+      ? alpha(overlayColor, overlayOpacity)(theme)
+      : get(theme, `colors.${overlayColor}`, overlayColor);
+
+    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;
+  };
+}
+
 export function getColorOverlay(
   theme: Theme,
   baseColor: string,
   overlayColor: string,
   overlayOpacity: number
 ): SystemStyleObject {
-  baseColor = get(theme, `colors.${baseColor}`) || baseColor;
-  overlayColor = alpha(overlayColor, overlayOpacity)(theme);
-
   return {
-    background: `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`,
+    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),
   };
 }
 

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
 export * from './ProgressSpinner';
@@ -33,5 +34,6 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';

package/src/motion.ts

@@ -0,0 +1,7 @@
+export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+export const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+export const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+export const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+export const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+export const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';

package/src/theme/theme.ts

@@ -5,6 +5,24 @@
 // - https://material.io/design/typography/the-type-system.html#type-scale
 import { rem, em } from 'polished';
 
+import { EASING_STANDARD } from '../motion';
+
+function font(
+  fontFamily: 'plain' | 'brand',
+  lineHeight: number,
+  fontSize: number,
+  letterSpacing: number,
+  weight: number
+) {
+  return {
+    fontFamily,
+    lineHeight: rem(lineHeight),
+    fontSize: rem(fontSize),
+    letterSpacing: rem(letterSpacing),
+    fontWeight: weight,
+  };
+}
+
 export const theme = {
   googleFonts:
     'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,600,700&display=swap',
@@ -123,6 +141,8 @@ export const theme = {
   fonts: {
     body: 'Roboto, sans-serif',
     heading: 'Roboto, sans-serif',
+    brand: 'Roboto, sans-serif',
+    plain: 'Roboto, sans-serif',
     monospace: '"Roboto Mono", monospace',
   },
   fontSizes: {
@@ -172,6 +192,21 @@ export const theme = {
       fontFamily: 'body',
       lineHeight: 'body',
     },
+    'display-large': font('brand', 64, 57, 0, 400),
+    'display-medium': font('brand', 52, 45, 0, 400),
+    'display-small': font('brand', 44, 36, 0, 400),
+    'headline-large': font('brand', 40, 32, 0, 400),
+    'headline-medium': font('brand', 36, 28, 0, 400),
+    'headline-small': font('brand', 32, 24, 0, 400),
+    'title-large': font('brand', 28, 22, 0, 400),
+    'title-medium': font('plain', 24, 16, 0.15, 500),
+    'title-small': font('plain', 20, 14, 0.1, 500),
+    'label-large': font('plain', 20, 14, 0.1, 500),
+    'label-medium': font('plain', 16, 12, 0.5, 500),
+    'label-small': font('plain', 16, 11, 0.5, 500),
+    'body-large': font('plain', 24, 16, 0.5, 400),
+    'body-medium': font('plain', 20, 14, 0.25, 400),
+    'body-small': font('plain', 16, 12, 0.4, 400),
     h1: {
       variant: 'text.heading',
       fontWeight: 'light',
@@ -297,7 +332,7 @@ export const theme = {
   buttons: {
     variants: {
       base: {
-        variant: 'text.button',
+        variant: 'text.label-large',
         boxShadow: 'none',
         py: 0,
         px: rem(24),
@@ -362,30 +397,36 @@ export const theme = {
     elevations: {
       none: {},
       default: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         '&:hover': {
           boxShadow: 1,
         },
-        '&:hover:disabled': {
+        '&:active,&:focus-visible,&:disabled': {
           boxShadow: 0,
         },
       },
       elevated: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 1,
         '&:hover': {
           boxShadow: 2,
         },
+        '&:active,&:focus-visible': {
+          boxShadow: 1,
+        },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0,
         },
       },
       floating: {
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
         boxShadow: 3,
         ':hover': {
           boxShadow: 4,
         },
+        '&:active,&:focus-visible': {
+          boxShadow: 3,
+        },
         '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
           boxShadow: 0,
         },
@@ -426,7 +467,7 @@ export const theme = {
         height: rem(32),
         borderRadius: 'small',
         outline: 'none',
-        transition: 'box-shadow .28s cubic-bezier(.4,0,.2,1)',
+        transition: `box-shadow .28s ${EASING_STANDARD}`,
       },
       filled: {
         variant: 'chips.variants.base',