@veracity/vui 2.2.0 → 2.4.0

package/src/select/select.tsx

@@ -22,6 +22,7 @@ export function Select(props: SelectProps) {
     disabled,
     isInvalid,
     isMultiple,
+    maxHeight,
     name,
     onChange,
     options,
@@ -59,7 +60,7 @@ export function Select(props: SelectProps) {
         <>
           {selectButton ?? <SelectButton />}
           <SelectContent>
-            <SelectGroup tabIndex={1000}>
+            <SelectGroup maxH={maxHeight} tabIndex={1000}>
               {children ??
                 options?.map?.(option => <SelectOption key={option.value} title={option.text} {...option} />)}
             </SelectGroup>

package/src/select/select.types.ts

@@ -26,6 +26,8 @@ export type SelectProps = ThemingProps<'Select'> &
     disabled?: boolean
     /** Represents invalid form input and is styled accordingly. */
     isInvalid?: boolean
+    /** Maximum container height in px. */
+    maxHeight?: number
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string
     /** Data prop to display an array of options in the popover. */

package/src/select/selectButton.tsx

@@ -18,24 +18,25 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
   const styles = useStyleConfig('Select', useSelectContext())
 
   const text = valueText || placeholder
-  const textColor = disabled ? 'disabled.text' : !valueText ? 'grey.60' : undefined
-  const iconColor = disabled ? 'disabled.text' : 'blue.80'
+  const textColor = disabled ? 'sandstone.10' : !valueText ? 'sandstone.10' : undefined
+  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'
 
   const readOnlyProps = readOnly
     ? {
-        activeBg: 'disabled.bg',
-        bg: 'disabled.bg',
-        color: 'darkBlue.18',
+        activeBg: 'sandstone.95',
+        bg: 'sandstone.95',
+        color: 'seaBlue.main',
         cursor: 'auto',
         disabled: true,
-        hoverBg: 'disabled.bg'
+        hoverBg: 'sandstone.95',
+        opacity: 1
       }
     : {}
 
   const isInvalidProps = isInvalid
     ? {
-        borderColor: 'red.80',
-        hoverBorderColor: 'red.80'
+        borderColor: 'energyRed.45',
+        hoverBorderColor: 'energyRed.45'
       }
     : {}
 

package/src/select/selectOption.tsx

@@ -39,12 +39,15 @@ export const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {
 
   return (
     <ListItem
+      activeBg="skyBlue.active"
       className={cs('vui-selectOption', className)}
       disabled={disabled}
+      hoverBg="skyBlue.hover"
       isInteractive
       isSelected={isSelected}
       onClick={onClick}
       ref={ref}
+      selectedBg="skyBlue.selected"
       title={title}
       value={valueProp}
       {...styles.item}

package/src/spinner/spinner.types.ts

@@ -5,7 +5,7 @@ export type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> &
   Omit<ThemingProps<'Spinner'>, 'size'> & {
     /** Children are disabled for this component. */
     children?: never
-    /** Available theme colors for this component. @default blue */
+    /** @deprecated use 'variant' instead */
     colorScheme?: 'blue' | 'grey' | 'prussian'
     /** Color of the 'empty' part of the circle. */
     emptyColor?: string | 'transparent'

package/src/spinner/theme.ts

@@ -1,28 +1,8 @@
-import { Dict } from '../utils'
-
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    color: `${c}.50`
-  }
-
-  const circle = {
-    borderColor: `${c}.20`,
-    borderTopColor: `${c}.50`
-  }
-
-  const text = {}
-
-  return { container, circle, text }
-}
-
 const baseStyle = {}
 
 const defaultProps = {
-  colorScheme: 'blue',
   size: 'page',
-  variant: 'default'
+  variant: 'lightBackground'
 }
 
 const parts = ['container', 'circle', 'text']
@@ -73,7 +53,24 @@ const sizes = {
 }
 
 const variants = {
-  default: variantDefault
+  lightBackground: {
+    circle: {
+      borderColor: 'seaBlue.80',
+      borderTopColor: 'seaBlue.main'
+    },
+    text: {
+      color: 'seaBlue.main'
+    }
+  },
+  darkBackground: {
+    circle: {
+      borderColor: 'digiGreen.30',
+      borderTopColor: 'digiGreen.78'
+    },
+    text: {
+      color: 'digiGreen.78'
+    }
+  }
 }
 
 export default {

package/src/table/tableSortIcon.tsx

@@ -10,10 +10,8 @@ import { TableSortIconProps } from './table.types'
 export const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {
   const { className, order, ...rest } = props
   const styles = useStyleConfig('Table', useTableContext())
-
-  // Rotating 1 icon is works better than switching multiple
   const rotate = order === 'asc' ? 180 : 0
-  const pathFill = order !== undefined ? ['blue.80', 'grey.40'] : 'grey.40'
+  const pathFill = order !== undefined ? ['seaBlue.main', 'sandstone.main'] : 'sandstone.main'
 
   return (
     <Icon

package/src/table/tbody.tsx

@@ -10,15 +10,19 @@ import Tr from './tr'
 export const TbodyBase = styled.tbodyBox`
   tr {
     :hover td {
-      background-color: grey.20;
+      background-color: skyBlue.hover;
     }
 
     &[data-selected='true']:hover td {
-      background-color: blue.20;
+      background-color: skyBlue.hover;
+    }
+
+    &[data-selected='true'] td {
+      border-bottom-color: sandstone.main;
     }
 
     &[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {
-      background-color: grey.10;
+      background-color: sandstone.95;
     }
 
     &[data-variant='basic']:hover td {

package/src/table/th.tsx

@@ -40,9 +40,9 @@ export const Th = vui<'th', ThProps>((props, ref) => {
   const sortOrder = isActive ? sort.order : undefined
   const isInteractive = isInteractiveProp ?? onClick !== undefined
 
-  const activeProps = isActive ? { bg: 'blue.10' } : {}
-
+  const activeProps = isActive ? { bg: 'skyBlue.active' } : {}
   const disabledProps = disabled ? { bg: 'disabled.bg', color: 'disabled.color', cursor: 'not-allowed' } : {}
+  const hoverBg = isSortable ? 'skyBlue.hover' : undefined
 
   const interactiveProps =
     !disabled && isInteractive
@@ -59,6 +59,7 @@ export const Th = vui<'th', ThProps>((props, ref) => {
       className={cs('vui-th', className)}
       data-active={isActive}
       data-disabled={disabled}
+      hoverBg={hoverBg}
       px={2}
       ref={ref}
       {...styles.th}

package/src/table/thead.tsx

@@ -7,16 +7,6 @@ import { TheadProps } from './table.types'
 import Th from './th'
 import Tr from './tr'
 
-export const TheadBase = styled.theadBox`
-  tr:not(:last-of-type) th {
-    border-bottom: 1px solid grey.20;
-  }
-
-  tr:last-of-type th {
-    border-bottom: 1px solid grey.40;
-  }
-`
-
 /** Displays Table head with support for columns and sticky. */
 export const Thead = vui<'thead', TheadProps>((props, ref) => {
   const { children, className, ...rest } = props
@@ -32,6 +22,12 @@ export const Thead = vui<'thead', TheadProps>((props, ref) => {
       }
     : {}
 
+  const TheadBase = styled.theadBox`
+    tr th {
+      border-bottom: ${rest.borderBottom || '1px solid sandstone.main'};
+    }
+  `
+
   return (
     <TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>
       {children ?? (

package/src/table/theme.ts

@@ -1,4 +1,10 @@
-const baseStyle = {}
+const baseStyle = {
+  th: {
+    fontSize: 14,
+    fontWeight: 500,
+    color: 'darkBlue.main'
+  }
+}
 
 const defaultProps = {
   size: 'lg',
@@ -28,13 +34,13 @@ const sizes = {
 const variants = {
   bordered: {
     td: {
-      borderBottom: '1px solid grey.20'
+      borderBottom: '1px solid sandstone.90'
     }
   },
   striped: {},
   basic: {
     td: {
-      borderBottom: '1px solid grey.20'
+      borderBottom: '1px solid sandstone.90'
     }
   }
 }

package/src/table/tr.tsx

@@ -15,7 +15,7 @@ export const Tr = vui<'tr', TrProps>((props, ref) => {
   const { variant } = useTableContext() ?? {}
   const styles = useStyleConfig('Table', useTableContext())
 
-  const selectedProps = isSelected ? { bg: 'blue.10' } : {}
+  const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}
 
   return (
     <TrBase

package/src/tabs/tabsNavBar.tsx

@@ -42,7 +42,7 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
         <ListItem
           activeBg="skyBlue.90"
           className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}
-          color="seaBlue.28"
+          color="seaBlue.main"
           disabled={tab.disabled}
           display="inline-flex"
           fontSize={fontSize}
@@ -61,7 +61,7 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
           {!tab.disabled && tab.id === activeNavItem && (
             <Box
               animation={animationDirection}
-              bg="seaBlue.28"
+              bg="seaBlue.main"
               bottom="-1px"
               h={borderWidth}
               left={0}

package/src/tag/theme.ts

@@ -87,14 +87,14 @@ const variants = {
       hoverBg: 'skyBlue.90',
       activeBg: 'skyBlue.85',
       borderColor: 'skyBlue.95',
-      color: 'seaBlue.28'
+      color: 'seaBlue.main'
     },
     button: {
       bg: 'transparent',
       hoverBg: 'skyBlue.90',
       activeBg: 'skyBlue.85',
       hoverBorderColor: 'transparent',
-      color: 'seaBlue.28'
+      color: 'seaBlue.main'
     }
   },
   subtleRed: {
@@ -149,10 +149,10 @@ const variants = {
   /** solids next */
   solidBlue: {
     container: {
-      bg: 'seaBlue.28',
+      bg: 'seaBlue.main',
       hoverBg: 'seaBlue.35',
       activeBg: 'seaBlue.40',
-      borderColor: 'seaBlue.28',
+      borderColor: 'seaBlue.main',
       color: 'white'
     },
     button: {

package/src/theme/foundations/colors.ts

@@ -105,7 +105,8 @@ export const darkBlue = {
   18: 'hsl(223, 67%, 18%)', // main
   15: 'hsl(223, 67%, 15%)',
   10: 'hsl(223, 67%, 10%)',
-  5: 'hsl(223, 67%, 5%)'
+  5: 'hsl(223, 67%, 5%)',
+  main: 'hsl(223, 67%, 18%)'
 }
 
 export const digiGreen = {
@@ -127,7 +128,8 @@ export const digiGreen = {
   20: 'hsl(139, 100%, 20%)',
   15: 'hsl(139, 100%, 15%)',
   10: 'hsl(139, 100%, 10%)',
-  5: 'hsl(139, 100%, 5%)'
+  5: 'hsl(139, 100%, 5%)',
+  main: 'hsl(139, 100%, 78%)'
 }
 
 export const earth = {
@@ -149,7 +151,8 @@ export const earth = {
   20: 'hsl(35, 53%, 20%)',
   15: 'hsl(35, 53%, 15%)',
   10: 'hsl(35, 53%, 10%)',
-  5: 'hsl(35, 53%, 5%)'
+  5: 'hsl(35, 53%, 5%)',
+  main: 'hsl(35, 53%, 89%)'
 }
 
 export const energyRed = {
@@ -161,7 +164,7 @@ export const energyRed = {
   70: 'hsl(357, 83%, 70%)',
   65: 'hsl(357, 83%, 65%)',
   60: 'hsl(357, 83%, 60%)',
-  54: 'hsl(357,83%, 54%)', //main
+  54: 'hsl(357, 83%, 54%)', //main
   50: 'hsl(357, 83%, 50%)',
   45: 'hsl(357, 83%, 45%)',
   40: 'hsl(357, 83%, 40%)',
@@ -171,7 +174,8 @@ export const energyRed = {
   20: 'hsl(357, 83%, 20%)',
   15: 'hsl(357, 83%, 15%)',
   10: 'hsl(357, 83%, 10%)',
-  5: 'hsl(357, 83%, 5%)'
+  5: 'hsl(357, 83%, 5%)',
+  main: 'hsl(357, 83%, 54%)'
 }
 
 export const landGreen = {
@@ -193,7 +197,8 @@ export const landGreen = {
   20: 'hsl(114, 49%, 20%)',
   15: 'hsl(114, 49%, 15%)',
   10: 'hsl(114, 49%, 10%)',
-  5: 'hsl(114, 49%, 5%)'
+  5: 'hsl(114, 49%, 5%)',
+  main: 'hsl(114, 49%, 41%)'
 }
 
 export const seaBlue = {
@@ -215,7 +220,8 @@ export const seaBlue = {
   20: 'hsl(218, 100%, 20%)',
   15: 'hsl(218, 100%, 15%)',
   10: 'hsl(218, 100%, 10%)',
-  5: 'hsl(218, 100%, 5%)'
+  5: 'hsl(218, 100%, 5%)',
+  main: 'hsl(218, 100%, 28%)'
 }
 
 export const sandstone = {
@@ -237,13 +243,14 @@ export const sandstone = {
   20: 'hsl(40, 3%, 20%)',
   15: 'hsl(40, 3%, 15%)',
   10: 'hsl(40, 3%, 10%)',
-  5: 'hsl(40, 3%, 5%)'
+  5: 'hsl(40, 3%, 5%)',
+  main: 'hsl(40, 3%, 79%)'
 }
 
 export const skyBlue = {
   97: 'hsl(196, 74%, 97%)',
-  95: 'hsl(196, 74%, 95%)',
-  90: 'hsl(196, 74%, 90%)',
+  95: 'hsl(196, 74%, 95%)', // active, selected
+  90: 'hsl(196, 74%, 90%)', // hover
   85: 'hsl(196, 74%, 85%)',
   80: 'hsl(196, 74%, 80%)',
   77: 'hsl(196, 74%, 77%)', // main
@@ -259,7 +266,11 @@ export const skyBlue = {
   20: 'hsl(196, 74%, 20%)',
   15: 'hsl(196, 74%, 15%)',
   10: 'hsl(196, 74%, 10%)',
-  5: 'hsl(196, 74%, 5%)'
+  5: 'hsl(196, 74%, 5%)',
+  main: 'hsl(196, 74%, 77%)', // skyBlue.77
+  active: 'hsl(196, 74%, 95%)', // skyBlue.95
+  hover: 'hsl(196, 74%, 90%)', // skyBlue.90
+  selected: 'hsl(196, 74%, 95%)' // skyBlue.95
 }
 
 export const sunflower = {
@@ -281,7 +292,8 @@ export const sunflower = {
   20: 'hsl(55, 100%, 20%)',
   15: 'hsl(55, 100%, 15%)',
   10: 'hsl(55, 100%, 10%)',
-  5: 'hsl(55, 100%, 5%)'
+  5: 'hsl(55, 100%, 5%)',
+  main: 'hsl(55, 100%, 73%)'
 }
 
 export const terracotta = {
@@ -303,7 +315,8 @@ export const terracotta = {
   20: 'hsl(34, 100%, 20%)',
   15: 'hsl(34, 100%, 15%)',
   10: 'hsl(34, 100%, 10%)',
-  5: 'hsl(34, 100%, 5%)'
+  5: 'hsl(34, 100%, 5%)',
+  main: 'hsl(34, 100%, 35%)'
 }
 
 export const warmGrey = {
@@ -325,7 +338,8 @@ export const warmGrey = {
   20: 'hsl(30, 8%, 20%)',
   15: 'hsl(30, 8%, 15%)',
   10: 'hsl(30, 8%, 10%)',
-  5: 'hsl(30, 8%, 5%)'
+  5: 'hsl(30, 8%, 5%)',
+  main: 'hsl(30, 8%, 56%)'
 }
 
 export const blue = {
@@ -420,9 +434,9 @@ export const yellow = {
 }
 
 export const disabled = {
-  bg: grey[10],
-  border: grey[50],
-  color: grey[50]
+  bg: sandstone[95],
+  border: sandstone[10],
+  color: sandstone[10]
 }
 
 export default {

package/src/theme/foundations/fonts.ts

@@ -1,3 +1,4 @@
 export default {
-  avenir: `'Avenir Next', Verdana, Geneva, Tahoma, sans-serif`
+  avenir: `'Avenir Next', Verdana, Geneva, Tahoma, sans-serif`,
+  dnvDisplay: `'DNV Display'`
 }

package/src/toast/toast.tsx

@@ -10,13 +10,14 @@ export const toasterWidth = 420
 const Toaster = () => {
   const { toasts } = useVuiContext()
 
-  const padding = toasts?.list?.length ? { md: '16px', sm: '4px', xs: '2px' } : 0
+  const padding = { md: '16px', sm: '4px', xs: '2px' }
   const right = { md: '1rem', sm: 0, xs: 0 }
   const width = { md: toasterWidth, sm: toasterWidth, xs: '100%' }
+  const bottom = toasts?.list?.length ? '1rem' : '-2rem'
 
   return (
     <Box
-      bottom="1rem"
+      bottom={bottom}
       className="vui-toaster"
       display="block"
       maxW={width}

package/src/tooltip/{tooltip.setup.ts → consts.ts}

@@ -1,6 +1,10 @@
 export const pointerSize = 12
 
-export const color = 'prussian.80'
+export const bg = 'darkBlue.18'
+
+export const borderRaduis = 1
+
+export const boxShadow = 2
 
 export const pointerPlacement = {
   top: {

package/src/tooltip/tooltip.tsx

@@ -4,7 +4,7 @@ import React, { JSXElementConstructor, ReactElement } from 'react'
 import Box from '../box'
 import { useUp, v } from '../core'
 import { Link } from '../link'
-import { color, pointerPlacement, pointerSize } from './tooltip.setup'
+import { bg, pointerPlacement, pointerSize } from './consts'
 import { TooltipProps } from './tooltip.types'
 import { TooltipContent } from './tooltipContent'
 
@@ -33,7 +33,7 @@ export const Tooltip = (props: TooltipProps) => {
         <TooltipContent fontSize={fontSize} maxWidth={maxWidth}>
           {isDesktop && (
             <Box
-              bg={color}
+              bg={bg}
               bottom={pointerPlacement[placement].bottom}
               h={`${pointerSize}px`}
               left={pointerPlacement[placement].left}

package/src/tooltip/tooltipContent.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 
 import Box from '../box'
-import { color } from './tooltip.setup'
+import { bg, borderRaduis, boxShadow } from './consts'
 import { TooltipProps } from './tooltip.types'
 
 export const TooltipContent = ({ children, fontSize = '16px', maxWidth = '400px' }: TooltipProps) => (
   <Box
-    bg={color}
-    boxShadow="2"
+    bg={bg}
+    borderRadius={borderRaduis}
+    boxShadow={boxShadow}
     className="vui-tooltip-content"
     color="white"
     fontSize={fontSize}

package/dist/cjs/tooltip/tooltip.setup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.setup.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.setup.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B,eAAO,MAAM,KAAK,gBAAgB,CAAA;AAElC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAA"}

package/dist/esm/tooltip/tooltip.setup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.setup.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.setup.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B,eAAO,MAAM,KAAK,gBAAgB,CAAA;AAElC,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAA"}