@veracity/vui 1.7.0-redesign.6 → 1.7.1

package/src/link/theme.ts

@@ -1,25 +1,27 @@
-function variantDefault() {
-  const container = {
-    color: `seaBlue.28`,
-    hoverColor: `seaBlue.28`
-  }
+import { Dict } from '../utils'
 
-  return { container }
-}
+function variantDefault(props: Dict) {
+  const { colorScheme: c } = props
 
-function variantWhite() {
   const container = {
-    color: `white`,
-    hoverColor: `white`
+    color: `${c}.80`,
+    hoverColor: `${c}.60`
+  }
+
+  if (c === 'white') {
+    container.color = 'white'
+    container.hoverColor = 'white'
   }
 
   return { container }
 }
 
-function variantLight() {
+function variantLight(props: Dict) {
+  const { colorScheme: c } = props
+
   const container = {
-    color: `seaBlue.28`,
-    hoverColor: `seaBlue.28`
+    color: `${c}.60`,
+    hoverColor: `${c}.40`
   }
 
   return { container }
@@ -34,6 +36,7 @@ const variantPlain = {
 const baseStyle = {}
 
 const defaultProps = {
+  colorScheme: 'blue',
   size: 'md',
   variant: 'default'
 }
@@ -43,8 +46,7 @@ const parts = ['container', 'icon', 'text']
 const sizes = {
   sm: {
     container: {
-      fontSize: 'xs',
-      lineHeight: '16px'
+      fontSize: 'sm'
     },
     icon: {
       size: 'xs'
@@ -52,8 +54,7 @@ const sizes = {
   },
   md: {
     container: {
-      fontSize: 'sm',
-      lineHeight: '20px'
+      fontSize: 'md'
     },
     icon: {
       size: 'xs'
@@ -61,17 +62,7 @@ const sizes = {
   },
   lg: {
     container: {
-      fontSize: 'md',
-      lineHeight: '24px'
-    },
-    icon: {
-      size: 'sm'
-    }
-  },
-  xl: {
-    container: {
-      fontSize: 'lg',
-      lineHeight: '28px'
+      fontSize: 'lg'
     },
     icon: {
       size: 'sm'
@@ -82,8 +73,7 @@ const sizes = {
 const variants = {
   default: variantDefault,
   light: variantLight,
-  plain: variantPlain,
-  white: variantWhite
+  plain: variantPlain
 }
 
 export default {

package/src/list/listItem.tsx

@@ -29,15 +29,11 @@ export const ListItemBase = styled.liBox`
   transition-duration: fast;
 
   &[aria-disabled='true'] {
-    background-color: disabled .bg;
-    color: disabled .color;
+    background-color: disabled.bg;
+    color: disabled.color;
     cursor: not-allowed;
     user-select: none;
   }
-
-  &:focus-visible {
-    z-index: 1;
-  }
 `
 
 /**

package/src/notification/consts.ts

@@ -2,35 +2,35 @@ import { NotificationStatusMapping } from './notification.types'
 
 export const notificationStatusMapping: NotificationStatusMapping = {
   error: {
+    colorScheme: 'red',
     iconProps: {
       name: 'falTimesCircle'
-    },
-    variant: 'subtleRed'
+    }
   },
   info: {
+    colorScheme: 'blue',
     iconProps: {
       name: 'falInfoCircle'
-    },
-    variant: 'subtleBlue'
+    }
   },
   loading: {
+    colorScheme: 'blue',
     iconProps: {
       animation: 'vui-spin 0.6s linear infinite',
       name: 'fadSpinnerThird',
       pathFill: ['blue.40', 'blue.60']
-    },
-    variant: 'subtleBlue'
+    }
   },
   success: {
+    colorScheme: 'green',
     iconProps: {
       name: 'falCheckCircle'
-    },
-    variant: 'subtleGreen'
+    }
   },
   warning: {
+    colorScheme: 'yellow',
     iconProps: {
       name: 'falExclamationCircle'
-    },
-    variant: 'subtleYellow'
+    }
   }
 }

package/src/notification/notification.tsx

@@ -20,7 +20,7 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
     action,
     children,
     className,
-    colorScheme: colorSchemeProp,
+    colorScheme: colorSchemeProp = 'blue',
     icon,
     onClose,
     size,
@@ -28,46 +28,40 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
     statusMapping,
     text,
     title,
-    variant: variantProp = 'subtleBlue',
-    verticalAlign,
+    variant,
     ...rest
   } = props
   const statuses = { ...notificationStatusMapping, ...statusMapping }
-  const { variant = variantProp } = statuses[status ?? ''] ?? {}
-  const styles = useStyleConfig('Notification', { variant, ...props })
+  const { colorScheme = colorSchemeProp } = statuses[status ?? ''] ?? {}
+  const styles = useStyleConfig('Notification', { colorScheme, ...props })
 
   const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name
 
-  const context = filterUndefined<NotificationProps>({ size, status })
-
-  const titleDisplay = action ? 'block' : 'inline-flex'
-
-  const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start'
+  const context = filterUndefined<NotificationProps>({ colorScheme, size, status, variant })
 
   return (
     <NotificationProvider value={context}>
       <Box
         borderRadius="md"
-        borderWidth={1}
         className={cs('vui-notification', className)}
+        px={1.5}
+        py={1}
         ref={ref}
         w="fit-content"
         {...styles.container}
         {...rest}
       >
-        {iconName ? <NotificationIcon alignSelf={alignSelf} name={iconName} /> : icon}
+        {iconName ? <NotificationIcon name={iconName} /> : icon}
 
         {children ?? (
-          <NotificationText alignSelf={alignSelf}>
-            {isReactText(title) ? <NotificationTitle display={titleDisplay} text={title} /> : title} {text}
+          <NotificationText>
+            {isReactText(title) ? <NotificationTitle text={title} /> : title} {text}
           </NotificationText>
         )}
 
         {action}
 
-        {onClose && (
-          <NotificationButton alignSelf={alignSelf} icon="falTimes" onClick={onClose} variant={variant} w="32px" />
-        )}
+        {onClose && <NotificationButton icon="falTimes" onClick={onClose} />}
       </Box>
     </NotificationProvider>
   )

package/src/notification/notification.types.ts

@@ -8,7 +8,7 @@ export type NotificationProps = Omit<BoxProps, 'size' | 'variant'> &
   ThemingProps<'Notification'> & {
     /** Socket displaying a button on the right. */
     action?: ReactNode
-    /** Available theme colors for this component. @deprecated */
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'green' | 'red' | 'yellow'
     /** Socket displaying an icon on the left. */
     icon?: IconProp | JSX.Element
@@ -29,7 +29,7 @@ export type NotificationStatus = 'error' | 'info' | 'loading' | 'success' | 'war
 export type NotificationStatusMapping = Record<
   string,
   {
+    colorScheme?: NotificationProps['colorScheme']
     iconProps: IconProps
-    variant?: NotificationProps['variant']
   }
 >

package/src/notification/notificationButton.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import Button, { ButtonProps } from '../button'
 import { useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
-import { notificationStatusMapping } from './consts'
 import { useNotificationContext } from './context'
 
 /** Displays an action button within the Notification. */
@@ -12,20 +11,16 @@ export const NotificationButton = vui<'button', ButtonProps>((props, ref) => {
   const mergedProps = { ...useNotificationContext(), ...props }
   const styles = useStyleConfig('Notification', useNotificationContext())
 
-  const { status = '' } = mergedProps
-  const { variant } = notificationStatusMapping[status] ?? {}
-
   return (
     <Button
       className={cs('vui-notificationButton', className)}
-      ml="0px"
-      mr="16px"
-      my="16px"
-      px="12px"
-      py="6px"
+      colorScheme={mergedProps.colorScheme}
+      ml={1}
+      mr={-0.5}
       ref={ref}
+      size="sm"
+      variant="text"
       {...styles.button}
-      variant={variant}
       {...rest}
     />
   )

package/src/notification/notificationIcon.tsx

@@ -8,21 +8,18 @@ import { useNotificationContext } from './context'
 
 /** Displays an icon based on the status within the Notification. */
 export const NotificationIcon = vui<'svg', IconProps>((props, ref) => {
-  const { className, alignSelf, ...rest } = props
+  const { className, ...rest } = props
   const mergedProps = { ...useNotificationContext(), ...props }
   const styles = useStyleConfig('Notification', useNotificationContext())
 
   const { status = '' } = mergedProps
   const { iconProps } = notificationStatusMapping[status] ?? {}
 
-  const marginTop = alignSelf === 'center' ? '0' : '16px'
-
   return (
     <Icon
-      alignSelf={alignSelf}
       className={cs('vui-notificationIcon', className)}
-      ml="16px"
-      mt={marginTop}
+      mr={1}
+      my={0.5}
       ref={ref}
       size="md"
       {...styles.icon}

package/src/notification/notificationText.tsx

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

package/src/notification/notificationTitle.tsx

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

package/src/notification/theme.ts

@@ -1,7 +1,39 @@
+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 = {
-  variant: 'subtleBlue'
+  colorScheme: 'blue',
+  variant: 'subtle'
 }
 
 const parts = ['container', 'button', 'icon', 'text', 'title']
@@ -9,37 +41,7 @@ const parts = ['container', 'button', 'icon', 'text', 'title']
 const sizes = {}
 
 const variants = {
-  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'
-    }
-  }
+  subtle: variantSubtle
 }
 
 export default {

package/src/p/theme.ts

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

package/src/progress/progress.tsx

@@ -36,7 +36,7 @@ export const Progress = vui<'div', ProgressProps>((props, ref) => {
       h={1}
     >
       <Box
-        bg="seaBlue.28"
+        bg="prussian.80"
         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: 'darkBlue.18',
+        color: 'prussian.80',
         cursor: 'auto',
         disabled: true,
         hoverBg: 'disabled.bg'

package/src/t/theme.ts

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

package/src/table/tbody.tsx

@@ -20,10 +20,6 @@ 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,12 +31,7 @@ const variants = {
       borderBottom: '1px solid grey.20'
     }
   },
-  striped: {},
-  basic: {
-    td: {
-      borderBottom: '1px solid grey.20'
-    }
-  }
+  striped: {}
 }
 
 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' | 'xxl'
-export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined
+export type TabsSize = 'md' | 'sm' | 'lg' | 'xl'
+export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | undefined
 
 export type TabsProps = SystemProps &
   ThemingProps<'Tabs'> &

package/src/tabs/tabsNavBar.tsx

@@ -6,64 +6,47 @@ 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',
-  xxl: 'xl'
+  xl: 'lg'
 }
 
 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 sandstone.79' : 'none'}
+      borderBottom={showBorder ? '1px solid grey.40' : '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={iconMarginRight} name={tab.icon} size={iconSize} />}
+            {!!tab.icon && <Icon mr={1} name={tab.icon} size={iconSize} />}
             {tab.title}
           </Box>
           {!tab.disabled && tab.id === activeNavItem && (
             <Box
               animation={animationDirection}
-              bg="seaBlue.28"
+              bg="prussian.80"
               bottom="-1px"
-              h={borderWidth}
+              h={`${size === 'sm' ? 2 : 4}px`}
               left={0}
               position="absolute"
               w={1}

package/src/tabs/theme.ts

@@ -5,47 +5,10 @@ const defaultProps = {}
 const parts = ['container', 'tabsNavBar', 'tab']
 
 const sizes = {
-  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'
-    }
-  }
+  sm: {},
+  md: {},
+  lg: {},
+  xl: {}
 }
 
 const variants = {}