@veracity/vui 1.9.1 → 2.0.0

package/src/notification/notificationText.tsx

@@ -16,7 +16,8 @@ export const NotificationText = vui<'p', TProps>((props, ref) => {
       flex="1"
       lineHeight="24px"
       minW={0}
-      py={0.5}
+      mx="16px"
+      my="16px"
       ref={ref}
       {...styles.text}
       {...rest}

package/src/notification/notificationTitle.tsx

@@ -1,23 +1,17 @@
 import React from 'react'
 
 import { useStyleConfig, vui } from '../core'
-import { H6, HeadingProps } from '../heading'
+import { T, TProps } from '../t'
 import { cs } from '../utils'
 import { useNotificationContext } from './context'
 
 /** Displays a title within the Notification. */
-export const NotificationTitle = vui<'h6', HeadingProps>((props, ref) => {
+export const NotificationTitle = vui<'span', TProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('Notification', useNotificationContext())
 
   return (
-    <H6
-      className={cs('vui-notificationTitle', className)}
-      display="inline-flex"
-      ref={ref}
-      {...styles.title}
-      {...rest}
-    />
+    <T className={cs('vui-notificationTitle', className)} fontWeight="demi" ref={ref} {...styles.title} {...rest} />
   )
 })
 

package/src/notification/theme.ts

@@ -1,39 +1,7 @@
-import { Dict } from '../utils'
-
-function variantSubtle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    bg: `${c}.20`,
-    borderColor: `${c}.80`,
-    borderWidth: 1,
-    color: `${c}.90`
-  }
-
-  const button = {
-    color: `${c}.90`,
-    hoverBg: `${c}.30`,
-    activeBg: `${c}.40`
-  }
-
-  if (c === 'blue') {
-    container.color = 'blue.80'
-    button.color = 'blue.80'
-  }
-
-  if (c === 'yellow') {
-    container.color = 'yellow.100'
-    button.color = 'yellow.100'
-  }
-
-  return { container, button }
-}
-
 const baseStyle = {}
 
 const defaultProps = {
-  colorScheme: 'blue',
-  variant: 'subtle'
+  variant: 'subtleBlue'
 }
 
 const parts = ['container', 'button', 'icon', 'text', 'title']
@@ -41,7 +9,37 @@ const parts = ['container', 'button', 'icon', 'text', 'title']
 const sizes = {}
 
 const variants = {
-  subtle: variantSubtle
+  subtleBlue: {
+    container: {
+      bg: 'skyBlue.95',
+      borderColor: 'seaBlue.28',
+      color: 'seaBlue.28'
+    },
+    button: {
+      borderColor: 'transparent'
+    }
+  },
+  subtleRed: {
+    container: {
+      bg: 'energyRed.95',
+      borderColor: 'energyRed.45',
+      color: 'energyRed.45'
+    }
+  },
+  subtleYellow: {
+    container: {
+      bg: 'sunflower.85',
+      borderColor: 'sunflower.15',
+      color: 'sunflower.15'
+    }
+  },
+  subtleGreen: {
+    container: {
+      bg: 'landGreen.95',
+      borderColor: 'landGreen.30',
+      color: 'landGreen.30'
+    }
+  }
 }
 
 export default {

package/src/onedesign-tokens/dist/js/es6/rem/button.js

@@ -0,0 +1,85 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 17 Feb 2022 11:35:15 GMT
+ */
+
+export const buttonSizeLargeFontSize = "1.125rem";
+export const buttonSizeLargeLineHeight = "1.75rem";
+export const buttonSizeLargePadding = "0.5rem 1rem";
+export const buttonSizeMediumFontSize = "1rem";
+export const buttonSizeMediumLineHeight = "1.5rem";
+export const buttonSizeMediumPadding = "0.25rem calc(0.25rem * 3)";
+export const buttonSizeSmallFontSize = "0.875rem";
+export const buttonSizeSmallLineHeight = "1.25rem";
+export const buttonSizeSmallPadding = "calc(0.25rem / 2) 0.5rem";
+export const buttonSizeDefaultFontSize = "1rem";
+export const buttonSizeDefaultLineHeight = "1.5rem";
+export const buttonSizeDefaultPadding = "0.25rem calc(0.25rem * 3)";
+export const buttonTypePrimaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBackgroundColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypePrimaryDefaultBackgroundColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypePrimaryDefaultTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryDefaultTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBackgroundColorDark = "hsla(218, 100%, 20%, 1)";
+export const buttonTypePrimaryHoverBackgroundColorLight = "hsla(139, 100%, 70%, 1)";
+export const buttonTypePrimaryHoverTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryHoverTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBackgroundColorDark = "hsla(218, 100%, 35%, 1)";
+export const buttonTypePrimaryActiveBackgroundColorLight = "hsla(139, 100%, 85%, 1)";
+export const buttonTypePrimaryActiveTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryActiveTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorDark = "hsla(196, 74%, 90%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+export const buttonTypeSecondaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorDark = "hsla(196, 74%, 95%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+export const buttonTypeSecondaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeTertiaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBackgroundColorDark = "hsla(196, 74%, 90%, 1)";
+export const buttonTypeTertiaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+export const buttonTypeTertiaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBackgroundColorDark = "hsla(196, 74%, 95%, 1)";
+export const buttonTypeTertiaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+export const buttonTypeTertiaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonDisabledCursor = "default";
+export const buttonDisabledOpacity = "50%";
+export const buttonBorderStyle = "solid";
+export const buttonBorderWidth = "calc(0.125rem / 2)";
+export const buttonFontFamily = "'Avenir Next', Arial, sans-serif";
+export const buttonFontSize = "1rem";
+export const buttonLineHeight = "1.5rem";
+export const buttonFontWeight = "500";
+export const buttonPadding = "calc(0.25rem * 1.5) calc(0.25rem * 3)";
+export const buttonTransition = "all 0.15s ease-in-out";
+export const buttonCursor = "pointer";

package/src/p/theme.ts

@@ -7,23 +7,15 @@ const defaultProps = {
 const sizes = {
   sm: {
     fontSize: 'sm',
-    lineHeight: '18px'
+    lineHeight: '22px'
   },
   md: {
     fontSize: 'md',
-    lineHeight: '24px'
+    lineHeight: '26px'
   },
   lg: {
     fontSize: 'lg',
-    lineHeight: '28px'
-  },
-  xl: {
-    fontSize: '20px',
-    lineHeight: '30px'
-  },
-  xxl: {
-    fontSize: '24px',
-    lineHeight: '36px'
+    lineHeight: '32px'
   }
 }
 

package/src/progress/progress.tsx

@@ -36,7 +36,7 @@ export const Progress = vui<'div', ProgressProps>((props, ref) => {
       h={1}
     >
       <Box
-        bg="prussian.80"
+        bg="seaBlue.28"
         borderRadius="sm"
         position="relative"
         textAlign="right"

package/src/select/selectButton.tsx

@@ -25,7 +25,7 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
     ? {
         activeBg: 'disabled.bg',
         bg: 'disabled.bg',
-        color: 'prussian.80',
+        color: 'darkBlue.18',
         cursor: 'auto',
         disabled: true,
         hoverBg: 'disabled.bg'

package/src/sidemenu/sidemenu.tsx

@@ -49,7 +49,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
             : children}
         </Box>
         <Box borderTop={border} className="vui-sidemenu-bottom" w="100%">
-          <Button borderRadius={0} onClick={toggle} variant="text" w="100%">
+          <Button borderRadius={0} onClick={toggle} variant="tertiaryDark" w="100%">
             <Icon name={icon} position="absolute" right={iconRight} />
           </Button>
         </Box>

package/src/sidemenu/sidemenuItem.tsx

@@ -49,7 +49,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
         justifyContent="space-between"
         onClick={() => onClick?.()}
         p={0}
-        variant="text"
+        variant="tertiaryDark"
         w="100%"
         {...rest}
       >
@@ -60,8 +60,8 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
             icon={displayChildren ? 'falChevronUp' : 'falChevronDown'}
             mr={1}
             onClick={toggle}
-            size="xs"
-            variant="text"
+            size="sm"
+            variant="tertiaryDark"
           />
         )}
       </Button>

package/src/t/theme.ts

@@ -19,7 +19,16 @@ const sizes = {
   }
 }
 
-const variants = {}
+const variants = {
+  label: {
+    fontSize: 'md',
+    fontWeight: 'demi'
+  },
+  caption: {
+    fontSize: 'sm',
+    fontWeight: 'medium'
+  }
+}
 
 export default {
   baseStyle,

package/src/table/tbody.tsx

@@ -20,6 +20,10 @@ export const TbodyBase = styled.tbodyBox`
     &[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {
       background-color: grey.10;
     }
+
+    &[data-variant='basic']:hover td {
+      background-color: transparent;
+    }
   }
 `
 

package/src/table/theme.ts

@@ -31,7 +31,12 @@ const variants = {
       borderBottom: '1px solid grey.20'
     }
   },
-  striped: {}
+  striped: {},
+  basic: {
+    td: {
+      borderBottom: '1px solid grey.20'
+    }
+  }
 }
 
 export default {

package/src/tabs/tabs.types.ts

@@ -7,8 +7,8 @@ import { ThemingProps } from '../theme'
 
 export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn'
 
-export type TabsSize = 'md' | 'sm' | 'lg' | 'xl'
-export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | undefined
+export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl'
+export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined
 
 export type TabsProps = SystemProps &
   ThemingProps<'Tabs'> &

package/src/tabs/tabsNavBar.tsx

@@ -6,47 +6,64 @@ import { Icon } from '../icon'
 import { List, ListItem } from '../list'
 import { cs, Dict } from '../utils'
 import { NavBarIconSize, TabNavBarProps } from './tabs.types'
+import theme from './theme'
 
 const iconSizeMapper: Dict = {
   sm: 'xs',
   md: 'sm',
   lg: 'md',
-  xl: 'lg'
+  xl: 'lg',
+  xxl: 'xl'
 }
 
 export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
   const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
   const iconSize: NavBarIconSize = iconSizeMapper?.[size as string] || 'md'
 
+  const { sizes } = (theme as Dict) ?? {}
+
+  const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize
+  const h = sizes[size ?? 'md'].tabsNavBar.h
+  const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth
+  const py = sizes[size ?? 'md'].tabsNavBar.py
+  const iconMarginRight = size === 'xxl' ? '16px' : '8px'
+
   return (
     <List
-      borderBottom={showBorder ? '1px solid grey.40' : 'none'}
+      borderBottom={showBorder ? '1px solid sandstone.79' : 'none'}
       className={cs('vui-tabsNavBar')}
       display="flex"
       isInteractive
+      mb="20px"
       ref={ref}
-      size={size}
       w={1}
     >
       {tabs?.map?.(tab => (
         <ListItem
+          activeBg="skyBlue.90"
           className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}
+          color="seaBlue.28"
           disabled={tab.disabled}
           display="inline-flex"
+          fontSize={fontSize}
+          h={h}
+          hoverBg="skyBlue.85"
           key={tab.id}
           onClick={() => onNavItemClick?.(tab.id || 0)}
           position="relative"
+          px="16px"
+          py={py}
         >
           <Box alignItems="center">
-            {!!tab.icon && <Icon mr={1} name={tab.icon} size={iconSize} />}
+            {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}
             {tab.title}
           </Box>
           {!tab.disabled && tab.id === activeNavItem && (
             <Box
               animation={animationDirection}
-              bg="prussian.80"
+              bg="seaBlue.28"
               bottom="-1px"
-              h={`${size === 'sm' ? 2 : 4}px`}
+              h={borderWidth}
               left={0}
               position="absolute"
               w={1}

package/src/tabs/theme.ts

@@ -5,10 +5,47 @@ const defaultProps = {}
 const parts = ['container', 'tabsNavBar', 'tab']
 
 const sizes = {
-  sm: {},
-  md: {},
-  lg: {},
-  xl: {}
+  sm: {
+    tabsNavBar: {
+      borderWidth: '2px',
+      fontSize: 'xs',
+      h: '20px',
+      py: '4px'
+    }
+  },
+  md: {
+    tabsNavBar: {
+      borderWidth: '2px',
+      fontSize: 'sm',
+      // lineHeight: '20px',
+      h: '32px',
+      py: '6px'
+    }
+  },
+  lg: {
+    tabsNavBar: {
+      borderWidth: '3px',
+      fontSize: 'md',
+      h: 40,
+      py: '8px'
+    }
+  },
+  xl: {
+    tabsNavBar: {
+      borderWidth: '4px',
+      fontSize: 'lg',
+      h: 48,
+      py: '10px'
+    }
+  },
+  xxl: {
+    tabsNavBar: {
+      borderWidth: '4px',
+      fontSize: 'lg',
+      h: 56,
+      py: '12px'
+    }
+  }
 }
 
 const variants = {}

package/src/tag/tag.tsx

@@ -10,7 +10,7 @@ import TagText from './tagText'
 
 export const TagBase = styled.spanBox`
   align-items: center;
-  border-radius: md;
+  border-radius: xl;
   display: inline-flex;
   font-weight: medium;
   justify-content: center;
@@ -26,8 +26,8 @@ export const TagBase = styled.spanBox`
   }
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    background-color: disabled .bg;
+    color: disabled .color;
     cursor: not-allowed;
     user-select: none;
   }
@@ -42,13 +42,12 @@ export const Tag = vui<'span', TagProps>((props, ref) => {
     casing,
     children,
     className,
-    colorScheme = 'blue',
     disabled,
     icon,
     iconLeft,
     iconRight,
     isFullWidth,
-    isInteractive = props.onClick !== undefined,
+    isInteractive = props.onClick !== undefined && props.onDelete === undefined,
     isRound,
     isTruncated = true,
     itemLeft,
@@ -57,20 +56,21 @@ export const Tag = vui<'span', TagProps>((props, ref) => {
     onDelete,
     size = 'md',
     text,
-    variant = 'subtle',
+    variant = 'subtleBlue',
     weight,
     ...rest
   } = props
   const styles = useStyleConfig('Tag', props)
   const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = styles.container
 
-  const context = useMemo(
-    () => filterUndefined({ colorScheme, disabled, size, variant }),
-    [colorScheme, disabled, size, variant]
-  )
+  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
 
   const spaceX = spaceXBase / 8
-  const spaceXText = (spaceXBase + 4) / 8
+  let spaceXText = (spaceXBase + 4) / 8
+  if (size === 'xs') {
+    spaceXText = spaceXBase / 8
+  }
+
   const pl = icon || itemLeft || iconLeft ? spaceX : spaceXText
   const pr = icon || itemRight || iconRight ? spaceX : spaceXText
 

package/src/tag/tag.types.ts

@@ -2,34 +2,35 @@ import { IconProp } from '../icon'
 import { SystemProps, TypographyProps } from '../system'
 import { ThemingProps } from '../theme'
 
-export type TagProps = SystemProps &
-  ThemingProps<'Tag'> & {
-    /** Alias for textTransform prop. @deprecated */
-    casing?: TypographyProps['textTransform']
-    /** Available theme colors for this component. @default blue */
-    colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow'
-    /** Displays tag and its content in disabled state with appropriate styling. */
-    disabled?: boolean
-    /** Icon that replaces any other content. */
-    icon?: IconProp | JSX.Element
-    /** Socket displaying icon on the left side. */
-    iconLeft?: IconProp | JSX.Element
-    /** Socket displaying icon on the right side. */
-    iconRight?: IconProp | JSX.Element
-    /** Makes the button take full width of the container. @deprecated */
-    isFullWidth?: boolean
-    /** Makes item clickable and focusable with appropriate styling. */
-    isInteractive?: boolean
-    /** Rounds the borders. @default false */
-    isRound?: boolean
-    /** Socket displaying a custom item on the left. */
-    itemLeft?: React.ReactNode
-    /** Socket displaying a custom item on right left. */
-    itemRight?: React.ReactNode
-    /** If provided, displays a remove button with this function as onClick. */
-    onDelete?: () => void
-    /** Socket displaying text as alternative to children. */
-    text?: React.ReactNode
-    /** Alias for fontWeight prop. @deprecated */
-    weight?: TypographyProps['fontWeight']
-  }
+export type TagInnerProps = {
+  /** Alias for textTransform prop. @deprecated */
+  casing?: TypographyProps['textTransform']
+  /** Available theme colors for this component. @deprecated */
+  colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow'
+  /** Displays tag and its content in disabled state with appropriate styling. */
+  disabled?: boolean
+  /** Icon that replaces any other content. */
+  icon?: IconProp | JSX.Element
+  /** Socket displaying icon on the left side. */
+  iconLeft?: IconProp | JSX.Element
+  /** Socket displaying icon on the right side. */
+  iconRight?: IconProp | JSX.Element
+  /** Makes the button take full width of the container. @deprecated */
+  isFullWidth?: boolean
+  /** Makes item clickable and focusable with appropriate styling. The tag will be automatically interactive if the onClick is defined and onDelete is undefined */
+  isInteractive?: boolean
+  /** Rounds the borders. @default false */
+  isRound?: boolean
+  /** Socket displaying a custom item on the left. */
+  itemLeft?: React.ReactNode
+  /** Socket displaying a custom item on right left. */
+  itemRight?: React.ReactNode
+  /** If provided, displays a remove button with this function as onClick. */
+  onDelete?: () => void
+  /** Socket displaying text as alternative to children. */
+  text?: React.ReactNode
+  /** Alias for fontWeight prop. @deprecated */
+  weight?: TypographyProps['fontWeight']
+}
+
+export type TagProps = SystemProps & ThemingProps<'Tag'> & TagInnerProps

package/src/tag/tagButton.tsx

@@ -15,13 +15,12 @@ export const TagButton = vui<'button', ButtonProps>((props, ref) => {
     <Button
       borderColor="transparent"
       className={cs('vui-tagButton', className)}
-      colorScheme={mergedProps.colorScheme}
       disabled={mergedProps.disabled}
       hoverBorderColor="transparent"
       icon="falTimes"
       mr={-0.5}
       ref={ref}
-      variant="text"
+      variant={mergedProps.variant}
       {...styles.button}
       {...rest}
     />