@veracity/vui 2.3.0 → 2.4.0

package/src/icons/baseIcons/types.ts

@@ -1,10 +1,10 @@
 export type BaseIcon =
   | 'conCertificate'
   | 'conCreateDataset'
-  | 'conDataSearchAlt'
-  | 'conDataSearchPlus'
   | 'conDatabase'
   | 'conDatabasePlus'
+  | 'conDataSearchAlt'
+  | 'conDataSearchPlus'
   | 'conDataset'
   | 'conFolderPlus'
   | 'conInsightSearchAlt'
@@ -82,6 +82,7 @@ export type BaseIcon =
   | 'fabGoogle'
   | 'fabGoogleDrive'
   | 'fabLinkedinIn'
+  | 'fabMarkdown'
   | 'fabMedium'
   | 'fabOsi'
   | 'fabSlack'
@@ -119,14 +120,14 @@ export type BaseIcon =
   | 'falArrowFromTop'
   | 'falArrowLeft'
   | 'falArrowRight'
+  | 'falArrows'
+  | 'falArrowsLeftRight'
+  | 'falArrowsUpDown'
   | 'falArrowToBottom'
   | 'falArrowToLeft'
   | 'falArrowToRight'
   | 'falArrowToTop'
   | 'falArrowUp'
-  | 'falArrows'
-  | 'falArrowsLeftRight'
-  | 'falArrowsUpDown'
   | 'falAward'
   | 'falBalanceScale'
   | 'falBan'
@@ -135,8 +136,8 @@ export type BaseIcon =
   | 'falBinoculars'
   | 'falBold'
   | 'falBolt'
-  | 'falBookOpen'
   | 'falBookmark'
+  | 'falBookOpen'
   | 'falBrainCircuit'
   | 'falBroadcastTower'
   | 'falBroom'
@@ -344,10 +345,10 @@ export type BaseIcon =
   | 'falUserFriends'
   | 'falUserHeadset'
   | 'falUserPlus'
-  | 'falUserShield'
-  | 'falUserTimes'
   | 'falUsers'
   | 'falUsersClass'
+  | 'falUserShield'
+  | 'falUserTimes'
   | 'falWater'
   | 'falWind'
   | 'falWindTurbine'

package/src/input/consts.ts

@@ -5,9 +5,9 @@ export const inputColors = {
   placeholder: 'sandstone.55',
   inputText: 'sandstone.10',
   helpText: 'sandstone.30',
-  icons: 'seaBlue.28',
+  icons: 'seaBlue.main',
   disabled: 'sandstone.95',
-  focus: 'seaBlue.28',
+  focus: 'seaBlue.main',
   error: 'energyRed.45',
   loading: 'seaBlue.80',
   success: 'landGreen.41'

package/src/link/theme.ts

@@ -1,7 +1,7 @@
 function variantDefault() {
   const container = {
-    color: `seaBlue.28`,
-    hoverColor: `seaBlue.28`
+    color: `seaBlue.main`,
+    hoverColor: `seaBlue.main`
   }
 
   return { container }
@@ -18,8 +18,8 @@ function variantWhite() {
 
 function variantLight() {
   const container = {
-    color: `seaBlue.28`,
-    hoverColor: `seaBlue.28`
+    color: `seaBlue.main`,
+    hoverColor: `seaBlue.main`
   }
 
   return { container }

package/src/list/listItem.tsx

@@ -29,8 +29,8 @@ export const ListItemBase = styled.liBox`
   transition-duration: fast;
 
   &[aria-disabled='true'] {
-    background-color: sandstone.95;
-    color: sandstone.10;
+    background-color: disabled.bg;
+    color: disabled.color;
     cursor: not-allowed;
     user-select: none;
   }

package/src/message/consts.ts

@@ -13,7 +13,7 @@ export const spacingDictionary = {
 }
 
 export const messageColors = {
-  info: 'seaBlue.28',
+  info: 'seaBlue.main',
   warning: 'terracotta.30',
   error: 'energyRed.45',
   success: 'landGreen.35'

package/src/notification/theme.ts

@@ -12,8 +12,8 @@ const variants = {
   subtleBlue: {
     container: {
       bg: 'skyBlue.95',
-      borderColor: 'seaBlue.28',
-      color: 'seaBlue.28'
+      borderColor: 'seaBlue.main',
+      color: 'seaBlue.main'
     },
     button: {
       borderColor: 'transparent'

package/src/pagination/theme.ts

@@ -1,14 +1,14 @@
 const base = {
   bg: 'transparent',
   border: 'none',
-  color: 'darkBlue.18'
+  color: 'darkBlue.main'
 }
 
 const baseStyle = {
   button: {
     ...base,
-    color: 'seaBlue.28',
-    hoverBg: 'skyBlue.80',
+    color: 'seaBlue.main',
+    hoverBg: 'skyBlue.main',
     minW: 24
   },
   ellipsis: { ...base },

package/src/progress/progress.tsx

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

package/src/select/selectButton.tsx

@@ -19,13 +19,13 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
 
   const text = valueText || placeholder
   const textColor = disabled ? 'sandstone.10' : !valueText ? 'sandstone.10' : undefined
-  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.28'
+  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'
 
   const readOnlyProps = readOnly
     ? {
         activeBg: 'sandstone.95',
         bg: 'sandstone.95',
-        color: 'seaBlue.28',
+        color: 'seaBlue.main',
         cursor: 'auto',
         disabled: true,
         hoverBg: 'sandstone.95',

package/src/select/selectOption.tsx

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

package/src/spinner/theme.ts

@@ -56,10 +56,10 @@ const variants = {
   lightBackground: {
     circle: {
       borderColor: 'seaBlue.80',
-      borderTopColor: 'seaBlue.28'
+      borderTopColor: 'seaBlue.main'
     },
     text: {
-      color: 'seaBlue.28'
+      color: 'seaBlue.main'
     }
   },
   darkBackground: {

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

@@ -164,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%)',
@@ -249,8 +249,8 @@ export const sandstone = {
 
 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
@@ -267,7 +267,10 @@ export const skyBlue = {
   15: 'hsl(196, 74%, 15%)',
   10: 'hsl(196, 74%, 10%)',
   5: 'hsl(196, 74%, 5%)',
-  main: 'hsl(196, 74%, 77%)'
+  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 = {
@@ -431,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}