@veracity/vui 1.9.1 → 2.0.0

package/src/core/vuiProvider/globalStyle.tsx

@@ -16,63 +16,80 @@ type GlobalStyleProps = {
  * - CSS variables for each theme value
  */
 export default createGlobalStyle<GlobalStyleProps>`
-	${fontFaces}
+  ${fontFaces}
+  :root {
+    ${generateCSSVariables}
+  }
+
+  * {
+    --x-ring-color: var(--vui-colors-focusColor);
+    // Fixes a box-shadow issue between some parent and child components
+    --x-shadow: 0 0 0 0 transparent;
+  }
 
-	:root {
-		${generateCSSVariables}
-	}
+  button {
+    --x-ring-color: transparent;
+  }
 
-	* {
-		--x-ring-color: var(--vui-colors-blue-50);
-		// Fixes a box-shadow issue between some parent and child components
-		--x-shadow: 0 0 0 0 transparent;
-	}
+  button:focus-visible, li:focus-visible {
+    --x-ring-color: var(--vui-colors-focusColor);
+    outline: var(--vui-colors-focusColor) solid 3px;
+    z-index: 1;
+  }
 
-	${p =>
+  ${p =>
     p.globalStyle &&
     css`
       body {
-        color: prussian.80;
+        color: sandstone 0.1;
         font-family: avenir;
         font-size: md;
       }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5 {
+        color: darkBlue 0.18;
+      }
     `}
 
-	@keyframes vui-bounce {
-		${bounce}
-	}
+  @keyframes vui-bounce {
+  ${bounce}
+  }
 
-	@keyframes vui-fadeDown {
-		${fadeDown}
-	}
+  @keyframes vui-fadeDown {
+  ${fadeDown}
+  }
 
-	@keyframes vui-fadeIn {
-		${fadeIn}
-	}
+  @keyframes vui-fadeIn {
+  ${fadeIn}
+  }
 
-	@keyframes vui-fadeLeft {
-		${fadeLeft}
-	}
+  @keyframes vui-fadeLeft {
+  ${fadeLeft}
+  }
 
-	@keyframes vui-fadeOut {
-		${fadeOut}
-	}
+  @keyframes vui-fadeOut {
+  ${fadeOut}
+  }
 
-	@keyframes vui-fadeRight {
-		${fadeRight}
-	}
+  @keyframes vui-fadeRight {
+  ${fadeRight}
+  }
 
-	@keyframes vui-fadeUp {
-		${fadeUp}
-	}
+  @keyframes vui-fadeUp {
+  ${fadeUp}
+  }
 
-	@keyframes vui-pulse {
-		${pulse}
-	}
+  @keyframes vui-pulse {
+  ${pulse}
+  }
 
-	@keyframes vui-spin {
-		${spin}
-	}
+  @keyframes vui-spin {
+  ${spin}
+  }
 `
 
 /** Recursively maps through all theme styles and generates a set of CSS properties. */

package/src/footer/footerTrademark.tsx

@@ -20,11 +20,11 @@ export const FooterTrademark = vui<'div', FooterTrademarkProps>((props, ref) =>
     <Box className={cs('vui-footerTrademark', className)} ref={ref} w="100%" wrap {...styles.trademark} {...rest}>
       <FooterColumn centerV flex={{ xs: '0 0 100%', md: '0 0 25%' }}>
         <Link
-          colorScheme="white"
           fontWeight="demi"
           href={linkedIn ?? defaultLinkedInUrl}
           iconLeft={<Link.Icon mr={1} name="fabLinkedin" size="sm" />}
           isExternal
+          variant="white"
         >
           Follow us
         </Link>

package/src/heading/heading.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
+import { omitThemingProps, styled, useStyleConfig, useUp, vui } from '../core'
 import { cs, filterUndefined } from '../utils'
 import { HeadingProps } from './heading.types'
 
@@ -14,6 +14,8 @@ export const Heading = vui<'h2', HeadingProps>((props, ref) => {
   const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
   const styles = useStyleConfig('Heading', props)
 
+  const { fontSize, lineHeight, ...restStyles } = styles
+
   const hClassName = props.size ? `vui-${props.size}` : ''
 
   const aliasedProps = filterUndefined({
@@ -23,8 +25,23 @@ export const Heading = vui<'h2', HeadingProps>((props, ref) => {
     textTransform: casing
   })
 
+  const isDesktop = useUp(993)
+
+  const fontSizeDesktop = fontSize?.desktop || fontSize
+  const fontSizeMobile = fontSize?.mobile || fontSize
+  const lineHeightDesktop = lineHeight?.desktop || lineHeight
+  const lineHeightMobile = lineHeight?.mobile || lineHeight
+
   return (
-    <HeadingBase className={cs('vui-heading', hClassName, className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
+    <HeadingBase
+      className={cs('vui-heading', hClassName, className)}
+      fontSize={isDesktop ? fontSizeDesktop : fontSizeMobile}
+      lineHeight={isDesktop ? lineHeightDesktop : lineHeightMobile}
+      ref={ref}
+      {...restStyles}
+      {...aliasedProps}
+      {...rest}
+    >
       {children ?? text}
     </HeadingBase>
   )

package/src/heading/heading.types.ts

@@ -16,3 +16,5 @@ export type HeadingProps = SystemProps &
     /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight']
   }
+
+export type HeadingSize = 'title' | 'lead' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

package/src/heading/theme.ts

@@ -1,39 +1,97 @@
-const baseStyle = {}
+const baseStyle = {
+  color: 'darkBlue.18'
+}
 
 const defaultProps = {
   size: 'h2'
 }
 
 const sizes = {
+  title: {
+    as: 'h1',
+    fontFamily: 'DNV Display',
+    fontSize: {
+      desktop: '64px',
+      mobile: '42px'
+    },
+    fontWeight: 'medium',
+    lineHeight: {
+      desktop: '74px',
+      mobile: '52px'
+    }
+  },
   h1: {
     as: 'h1',
-    fontSize: '40px',
-    lineHeight: '52px'
+    fontSize: {
+      desktop: '50px',
+      mobile: '36px'
+    },
+    fontWeight: 'regular',
+    lineHeight: {
+      desktop: '62px',
+      mobile: '48px'
+    }
+  },
+  lead: {
+    as: 'h2',
+    color: 'seaBlue.28',
+    fontSize: {
+      desktop: '28px',
+      mobile: '20px'
+    },
+    fontWeight: 'regular',
+    lineHeight: {
+      desktop: '38px',
+      mobile: '28px'
+    }
   },
   h2: {
     as: 'h2',
-    fontSize: '32px',
-    lineHeight: '40px'
+    fontSize: {
+      desktop: '32px',
+      mobile: '28px'
+    },
+    fontWeight: 'regular',
+    lineHeight: {
+      desktop: '42px',
+      mobile: '38px'
+    }
   },
   h3: {
     as: 'h3',
-    fontSize: '24px',
+    fontSize: {
+      desktop: '24px',
+      mobile: '22px'
+    },
+    fontWeight: 'regular',
     lineHeight: '32px'
   },
   h4: {
     as: 'h4',
-    fontSize: '20px',
-    lineHeight: '28px'
+    fontSize: {
+      desktop: '20px',
+      mobile: '18px'
+    },
+    fontWeight: 'demi',
+    lineHeight: '24px'
   },
   h5: {
     as: 'h5',
-    fontSize: '18px',
-    lineHeight: '24px'
+    fontSize: {
+      desktop: '18px',
+      mobile: '16px'
+    },
+    fontWeight: 'demi',
+    lineHeight: {
+      desktop: '26px',
+      mobile: '22px'
+    }
   },
   h6: {
     as: 'h6',
     fontSize: '16px',
-    lineHeight: '20px'
+    fontWeight: 'demi',
+    lineHeight: '22px'
   }
 }
 

package/src/icon/icon.types.ts

@@ -20,7 +20,7 @@ export type IconProps = SvgProps &
     icon?: IconProp
     /** Name of the icon stored in Veracity CDN. */
     name?: IconProp
-    /** Rotates the icon by given amout of degrees clockwise. */
+    /** Rotates the icon by given amount of degrees clockwise. */
     rotate?: number
     /** Uses a scale of 1-10 and multiply of 16px to define icon size. */
     scale?: number

package/src/icon/theme.ts

@@ -20,6 +20,11 @@ const sizes = {
   lg: {
     height: 28,
     width: 28
+  },
+  /** the xl size is introduced for the xxl tabs; should not be listed. */
+  xl: {
+    height: 32,
+    width: 32
   }
 }
 

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './accordion'
 export * from './avatar'
+export * from './badge'
 export * from './box'
 export * from './breadcrumbs'
 export * from './button'

package/src/input/input.tsx

@@ -14,7 +14,7 @@ import InputInput from './inputInput'
 export const InputBase = styled.divBox`
   align-items: center;
   background-color: white;
-  border-radius: md;
+  border-radius: none;
   border-width: 1px;
   display: flex;
   flex-shrink: 0;

package/src/input/inputInput.tsx

@@ -9,7 +9,7 @@ export const InputInputBase = styled.input`
   align-self: stretch;
   background-color: transparent;
   border: none;
-  border-radius: md;
+  border-radius: none;
   flex: 1;
   font-size: inherit;
   min-width: 0;

package/src/link/link.tsx

@@ -9,7 +9,7 @@ import LinkText from './linkText'
 
 export const LinkBase = styled.aBox`
   align-items: center;
-  border-radius: sm;
+  border-radius: none;
   cursor: pointer;
   display: inline-flex;
   line-height: normal;
@@ -27,7 +27,6 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
   const {
     children,
     className,
-    colorScheme,
     decoration,
     hoverDecoration = 'underline',
     iconLeft,
@@ -42,7 +41,7 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
   } = props
   const styles = useStyleConfig('Link', props)
 
-  const context = useMemo(() => filterUndefined({ colorScheme, size, variant }), [colorScheme, size, variant])
+  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
 
   const aliasedProps = filterUndefined({
     fontWeight: weight,

package/src/link/link.types.ts

@@ -4,7 +4,7 @@ import { ThemingProps } from '../theme'
 
 export type LinkProps = SystemProps &
   ThemingProps<'Link'> & {
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'white'
     /** Alias for textDecoration prop. @deprecated */
     decoration?: TypographyProps['textDecoration']

package/src/link/theme.ts

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

package/src/list/listItem.tsx

@@ -29,11 +29,15 @@ 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,6 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
     action,
     children,
     className,
-    colorScheme: colorSchemeProp = 'blue',
     icon,
     onClose,
     size,
@@ -28,40 +27,46 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
     statusMapping,
     text,
     title,
-    variant,
+    variant: variantProp = 'subtleBlue',
+    verticalAlign,
     ...rest
   } = props
   const statuses = { ...notificationStatusMapping, ...statusMapping }
-  const { colorScheme = colorSchemeProp } = statuses[status ?? ''] ?? {}
-  const styles = useStyleConfig('Notification', { colorScheme, ...props })
+  const { variant = variantProp } = statuses[status ?? ''] ?? {}
+  const styles = useStyleConfig('Notification', { variant, ...props })
 
   const iconName = isString(icon) ? icon : statuses[status ?? '']?.iconProps?.name
 
-  const context = filterUndefined<NotificationProps>({ colorScheme, size, status, variant })
+  const context = filterUndefined<NotificationProps>({ size, status })
+
+  const titleDisplay = action ? 'block' : 'inline-flex'
+
+  const alignSelf = verticalAlign === 'center' ? 'center' : 'flex-start'
 
   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 name={iconName} /> : icon}
+        {iconName ? <NotificationIcon alignSelf={alignSelf} name={iconName} /> : icon}
 
         {children ?? (
-          <NotificationText>
-            {isReactText(title) ? <NotificationTitle text={title} /> : title} {text}
+          <NotificationText alignSelf={alignSelf}>
+            {isReactText(title) ? <NotificationTitle display={titleDisplay} text={title} /> : title} {text}
           </NotificationText>
         )}
 
         {action}
 
-        {onClose && <NotificationButton icon="falTimes" onClick={onClose} />}
+        {onClose && (
+          <NotificationButton alignSelf={alignSelf} icon="falTimes" onClick={onClose} variant={variant} w="32px" />
+        )}
       </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. @default blue */
+    /** Available theme colors for this component. @deprecated */
     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,6 +3,7 @@ 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. */
@@ -11,16 +12,20 @@ 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)}
-      colorScheme={mergedProps.colorScheme}
-      ml={1}
-      mr={-0.5}
+      ml="0px"
+      mr="16px"
+      my="16px"
+      px="12px"
+      py="6px"
       ref={ref}
-      size="sm"
-      variant="text"
       {...styles.button}
+      variant={variant}
       {...rest}
     />
   )

package/src/notification/notificationIcon.tsx

@@ -8,18 +8,21 @@ import { useNotificationContext } from './context'
 
 /** Displays an icon based on the status within the Notification. */
 export const NotificationIcon = vui<'svg', IconProps>((props, ref) => {
-  const { className, ...rest } = props
+  const { className, alignSelf, ...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)}
-      mr={1}
-      my={0.5}
+      ml="16px"
+      mt={marginTop}
       ref={ref}
       size="md"
       {...styles.icon}