@veracity/vui 2.2.0 → 2.3.0

package/src/icons/baseIcons/icons.ts

@@ -34,10 +34,14 @@ export { default as culAutoSave } from './cul/culAutoSave'
 export { default as culCircleChart } from './cul/culCircleChart'
 export { default as culCircleChartAlt } from './cul/culCircleChartAlt'
 export { default as culCovid } from './cul/culCovid'
+export { default as culCreateReport } from './cul/culCreateReport'
+export { default as culDatacatalogue } from './cul/culDatacatalogue'
+export { default as culDataset } from './cul/culDataset'
 export { default as culDeepSearch } from './cul/culDeepSearch'
 export { default as culDotsMenu } from './cul/culDotsMenu'
 export { default as culEyeAssess } from './cul/culEyeAssess'
 export { default as culFileDownloadAlt } from './cul/culFileDownloadAlt'
+export { default as culFileStandard } from './cul/culFileStandard'
 export { default as culFilterAlt } from './cul/culFilterAlt'
 export { default as culGlobePlus } from './cul/culGlobePlus'
 export { default as culListDense } from './cul/culListDense'
@@ -86,6 +90,10 @@ export { default as fabYoutube } from './fab/fabYoutube'
 export { default as fadSpinnerThird } from './fad/fadSpinnerThird'
 export { default as falAddressBook } from './fal/falAddressBook'
 export { default as falAddressCard } from './fal/falAddressCard'
+export { default as falAlignCenter } from './fal/falAlignCenter'
+export { default as falAlignJustify } from './fal/falAlignJustify'
+export { default as falAlignLeft } from './fal/falAlignLeft'
+export { default as falAlignRight } from './fal/falAlignRight'
 export { default as falAnalytics } from './fal/falAnalytics'
 export { default as falAngleDoubleDown } from './fal/falAngleDoubleDown'
 export { default as falAngleDoubleLeft } from './fal/falAngleDoubleLeft'
@@ -123,7 +131,11 @@ export { default as falBalanceScale } from './fal/falBalanceScale'
 export { default as falBan } from './fal/falBan'
 export { default as falBars } from './fal/falBars'
 export { default as falBell } from './fal/falBell'
+export { default as falBinoculars } from './fal/falBinoculars'
+export { default as falBold } from './fal/falBold'
+export { default as falBolt } from './fal/falBolt'
 export { default as falBookOpen } from './fal/falBookOpen'
+export { default as falBookmark } from './fal/falBookmark'
 export { default as falBrainCircuit } from './fal/falBrainCircuit'
 export { default as falBroadcastTower } from './fal/falBroadcastTower'
 export { default as falBroom } from './fal/falBroom'
@@ -173,6 +185,7 @@ export { default as falCodeCommit } from './fal/falCodeCommit'
 export { default as falCodeMerge } from './fal/falCodeMerge'
 export { default as falCog } from './fal/falCog'
 export { default as falCogs } from './fal/falCogs'
+export { default as falCoins } from './fal/falCoins'
 export { default as falComment } from './fal/falComment'
 export { default as falCommentAlt } from './fal/falCommentAlt'
 export { default as falCompressAlt } from './fal/falCompressAlt'
@@ -219,20 +232,25 @@ export { default as falFileWord } from './fal/falFileWord'
 export { default as falFilter } from './fal/falFilter'
 export { default as falFlag } from './fal/falFlag'
 export { default as falFolder } from './fal/falFolder'
+export { default as falFolderArrow } from './fal/falFolderArrow'
 export { default as falFolderOpen } from './fal/falFolderOpen'
 export { default as falFolderPlus } from './fal/falFolderPlus'
 export { default as falFolders } from './fal/falFolders'
 export { default as falGlassesAlt } from './fal/falGlassesAlt'
 export { default as falGlobe } from './fal/falGlobe'
+export { default as falGrid } from './fal/falGrid'
+export { default as falHeading } from './fal/falHeading'
 export { default as falHome } from './fal/falHome'
 export { default as falHourglass } from './fal/falHourglass'
 export { default as falImage } from './fal/falImage'
 export { default as falInfoCircle } from './fal/falInfoCircle'
+export { default as falItalic } from './fal/falItalic'
 export { default as falKey } from './fal/falKey'
 export { default as falLayerGroup } from './fal/falLayerGroup'
 export { default as falLayerPlus } from './fal/falLayerPlus'
 export { default as falLink } from './fal/falLink'
 export { default as falList } from './fal/falList'
+export { default as falListOl } from './fal/falListOl'
 export { default as falLockAlt } from './fal/falLockAlt'
 export { default as falLongArrowDown } from './fal/falLongArrowDown'
 export { default as falLongArrowLeft } from './fal/falLongArrowLeft'
@@ -247,7 +265,10 @@ export { default as falMapMarkerAltSlash } from './fal/falMapMarkerAltSlash'
 export { default as falMapMarkerCheck } from './fal/falMapMarkerCheck'
 export { default as falMapMarkerExclamation } from './fal/falMapMarkerExclamation'
 export { default as falMinus } from './fal/falMinus'
+export { default as falNoStream } from './fal/falNoStream'
+export { default as falPaintBrushAlt } from './fal/falPaintBrushAlt'
 export { default as falPaperclip } from './fal/falPaperclip'
+export { default as falParagraph } from './fal/falParagraph'
 export { default as falPause } from './fal/falPause'
 export { default as falPauseCircle } from './fal/falPauseCircle'
 export { default as falPen } from './fal/falPen'
@@ -259,6 +280,7 @@ export { default as falPlus } from './fal/falPlus'
 export { default as falPlusCircle } from './fal/falPlusCircle'
 export { default as falPlusSquare } from './fal/falPlusSquare'
 export { default as falPoundSign } from './fal/falPoundSign'
+export { default as falPreview } from './fal/falPreview'
 export { default as falPrint } from './fal/falPrint'
 export { default as falProjectDiagram } from './fal/falProjectDiagram'
 export { default as falPuzzlePiece } from './fal/falPuzzlePiece'
@@ -284,6 +306,7 @@ export { default as falSignInAlt } from './fal/falSignInAlt'
 export { default as falSignOut } from './fal/falSignOut'
 export { default as falSignOutAlt } from './fal/falSignOutAlt'
 export { default as falSlidersV } from './fal/falSlidersV'
+export { default as falSnapshot } from './fal/falSnapshot'
 export { default as falSnowBlowing } from './fal/falSnowBlowing'
 export { default as falSnowflake } from './fal/falSnowflake'
 export { default as falSolarPanel } from './fal/falSolarPanel'
@@ -294,10 +317,13 @@ export { default as falStepForward } from './fal/falStepForward'
 export { default as falStop } from './fal/falStop'
 export { default as falStopCircle } from './fal/falStopCircle'
 export { default as falStopwatch } from './fal/falStopwatch'
+export { default as falStream } from './fal/falStream'
 export { default as falSuitcase } from './fal/falSuitcase'
 export { default as falSun } from './fal/falSun'
 export { default as falSync } from './fal/falSync'
+export { default as falTable } from './fal/falTable'
 export { default as falTachometer } from './fal/falTachometer'
+export { default as falTasks } from './fal/falTasks'
 export { default as falTemperatureHigh } from './fal/falTemperatureHigh'
 export { default as falTh } from './fal/falTh'
 export { default as falThLarge } from './fal/falThLarge'
@@ -306,6 +332,7 @@ export { default as falTimes } from './fal/falTimes'
 export { default as falTimesCircle } from './fal/falTimesCircle'
 export { default as falToggleOff } from './fal/falToggleOff'
 export { default as falToggleOn } from './fal/falToggleOn'
+export { default as falTools } from './fal/falTools'
 export { default as falTrashAlt } from './fal/falTrashAlt'
 export { default as falUnlockAlt } from './fal/falUnlockAlt'
 export { default as falUser } from './fal/falUser'
@@ -332,6 +359,7 @@ export { default as fasCaretUp } from './fas/fasCaretUp'
 export { default as fasChartNetwork } from './fas/fasChartNetwork'
 export { default as fasCheckCircle } from './fas/fasCheckCircle'
 export { default as fasDiamond } from './fas/fasDiamond'
+export { default as fasFile } from './fas/fasFile'
 export { default as fasFolder } from './fas/fasFolder'
 export { default as fasGripDotsVertical } from './fas/fasGripDotsVertical'
 export { default as fasLayerGroup } from './fas/fasLayerGroup'

package/src/icons/baseIcons/types.ts

@@ -1,4 +1,5 @@
 export type BaseIcon =
+  | 'conCertificate'
   | 'conCreateDataset'
   | 'conDataSearchAlt'
   | 'conDataSearchPlus'
@@ -6,25 +7,17 @@ export type BaseIcon =
   | 'conDatabasePlus'
   | 'conDataset'
   | 'conFolderPlus'
+  | 'conInsightSearchAlt'
   | 'conLNGBunkering'
+  | 'conMachineLearning'
   | 'conReport'
   | 'conReport1'
+  | 'conReport2'
+  | 'conSearchLens'
   | 'conSensorAlt'
   | 'conSensorPlus'
   | 'conUploadFile'
   | 'conUploadFile1'
-  | 'conCertificate'
-  | 'conCreateDataset'
-  | 'conDatabase'
-  | 'conDatabasePlus'
-  | 'conDataset'
-  | 'conFolderPlus'
-  | 'conInsightSearchAlt'
-  | 'conMachineLearning'
-  | 'conReport'
-  | 'conReport2'
-  | 'conSearchLens'
-  | 'conUploadFile'
   | 'conUploadFile2'
   | 'cubBellship'
   | 'cubDNV'
@@ -42,10 +35,14 @@ export type BaseIcon =
   | 'culCircleChart'
   | 'culCircleChartAlt'
   | 'culCovid'
+  | 'culCreateReport'
+  | 'culDatacatalogue'
+  | 'culDataset'
   | 'culDeepSearch'
   | 'culDotsMenu'
   | 'culEyeAssess'
   | 'culFileDownloadAlt'
+  | 'culFileStandard'
   | 'culFilterAlt'
   | 'culGlobePlus'
   | 'culListDense'
@@ -94,6 +91,10 @@ export type BaseIcon =
   | 'fadSpinnerThird'
   | 'falAddressBook'
   | 'falAddressCard'
+  | 'falAlignCenter'
+  | 'falAlignJustify'
+  | 'falAlignLeft'
+  | 'falAlignRight'
   | 'falAnalytics'
   | 'falAngleDoubleDown'
   | 'falAngleDoubleLeft'
@@ -131,7 +132,11 @@ export type BaseIcon =
   | 'falBan'
   | 'falBars'
   | 'falBell'
+  | 'falBinoculars'
+  | 'falBold'
+  | 'falBolt'
   | 'falBookOpen'
+  | 'falBookmark'
   | 'falBrainCircuit'
   | 'falBroadcastTower'
   | 'falBroom'
@@ -181,6 +186,7 @@ export type BaseIcon =
   | 'falCodeMerge'
   | 'falCog'
   | 'falCogs'
+  | 'falCoins'
   | 'falComment'
   | 'falCommentAlt'
   | 'falCompressAlt'
@@ -227,20 +233,25 @@ export type BaseIcon =
   | 'falFilter'
   | 'falFlag'
   | 'falFolder'
+  | 'falFolderArrow'
   | 'falFolderOpen'
   | 'falFolderPlus'
   | 'falFolders'
   | 'falGlassesAlt'
   | 'falGlobe'
+  | 'falGrid'
+  | 'falHeading'
   | 'falHome'
   | 'falHourglass'
   | 'falImage'
   | 'falInfoCircle'
+  | 'falItalic'
   | 'falKey'
   | 'falLayerGroup'
   | 'falLayerPlus'
   | 'falLink'
   | 'falList'
+  | 'falListOl'
   | 'falLockAlt'
   | 'falLongArrowDown'
   | 'falLongArrowLeft'
@@ -255,7 +266,10 @@ export type BaseIcon =
   | 'falMapMarkerCheck'
   | 'falMapMarkerExclamation'
   | 'falMinus'
+  | 'falNoStream'
+  | 'falPaintBrushAlt'
   | 'falPaperclip'
+  | 'falParagraph'
   | 'falPause'
   | 'falPauseCircle'
   | 'falPen'
@@ -267,6 +281,7 @@ export type BaseIcon =
   | 'falPlusCircle'
   | 'falPlusSquare'
   | 'falPoundSign'
+  | 'falPreview'
   | 'falPrint'
   | 'falProjectDiagram'
   | 'falPuzzlePiece'
@@ -292,6 +307,7 @@ export type BaseIcon =
   | 'falSignOut'
   | 'falSignOutAlt'
   | 'falSlidersV'
+  | 'falSnapshot'
   | 'falSnowBlowing'
   | 'falSnowflake'
   | 'falSolarPanel'
@@ -302,10 +318,13 @@ export type BaseIcon =
   | 'falStop'
   | 'falStopCircle'
   | 'falStopwatch'
+  | 'falStream'
   | 'falSuitcase'
   | 'falSun'
   | 'falSync'
+  | 'falTable'
   | 'falTachometer'
+  | 'falTasks'
   | 'falTemperatureHigh'
   | 'falTh'
   | 'falThLarge'
@@ -314,6 +333,7 @@ export type BaseIcon =
   | 'falTimesCircle'
   | 'falToggleOff'
   | 'falToggleOn'
+  | 'falTools'
   | 'falTrashAlt'
   | 'falUnlockAlt'
   | 'falUser'
@@ -340,6 +360,7 @@ export type BaseIcon =
   | 'fasChartNetwork'
   | 'fasCheckCircle'
   | 'fasDiamond'
+  | 'fasFile'
   | 'fasFolder'
   | 'fasGripDotsVertical'
   | 'fasLayerGroup'

package/src/input/consts.ts

@@ -9,7 +9,7 @@ export const inputColors = {
   disabled: 'sandstone.95',
   focus: 'seaBlue.28',
   error: 'energyRed.45',
-  loading: 'seaBlue.70',
+  loading: 'seaBlue.80',
   success: 'landGreen.41'
 }
 

package/src/list/listItem.tsx

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

package/src/message/consts.ts

@@ -6,8 +6,15 @@ export const iconDictionary = {
 }
 
 export const spacingDictionary = {
-  md: 8,
-  xs: 4,
-  sm: 6,
-  lg: 10
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 10
+}
+
+export const messageColors = {
+  info: 'seaBlue.28',
+  warning: 'terracotta.30',
+  error: 'energyRed.45',
+  success: 'landGreen.35'
 }

package/src/message/message.tsx

@@ -14,14 +14,14 @@ export const MessageBase = styled.divBox`
 
 /** Displays a simple message text. */
 export const Message = vui<'span', MessageProps>((props, ref) => {
-  const { children, className, text, size = 'md', variant = 'info', ...rest } = props
+  const { children, className, text, size = 'lg', variant = 'info', ...rest } = props
   const styles = useStyleConfig('Message', props)
 
   return (
     <MessageBase className={cs('vui-message', className)} ref={ref} {...styles} {...rest}>
       <Box>
-        <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={size} />
-        <T size={size}>{children ?? text}</T>
+        <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.fontSize} />
+        <T size={styles.fontSize}>{children ?? text}</T>
       </Box>
     </MessageBase>
   )

package/src/message/theme.ts

@@ -1,36 +1,39 @@
+import { messageColors } from './consts'
+
 const baseStyle = {}
 
 const defaultProps = {
-  variant: 'info'
+  variant: 'info',
+  size: 'lg'
 }
 
 const sizes = {
-  xs: {
+  sm: {
     fontSize: 'xs'
   },
-  sm: {
+  md: {
     fontSize: 'sm'
   },
-  md: {
+  lg: {
     fontSize: 'md'
   },
-  lg: {
+  xl: {
     fontSize: 'lg'
   }
 }
 
 const variants = {
   info: {
-    color: 'blue.80'
+    color: messageColors.info
   },
   warning: {
-    color: 'yellow.90'
+    color: messageColors.warning
   },
   error: {
-    color: 'red.80'
+    color: messageColors.error
   },
   success: {
-    color: 'green.80'
+    color: messageColors.success
   }
 }
 

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.28'
 
   const readOnlyProps = readOnly
     ? {
-        activeBg: 'disabled.bg',
-        bg: 'disabled.bg',
-        color: 'darkBlue.18',
+        activeBg: 'sandstone.95',
+        bg: 'sandstone.95',
+        color: 'seaBlue.28',
         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.95"
       className={cs('vui-selectOption', className)}
       disabled={disabled}
+      hoverBg="skyBlue.90"
       isInteractive
       isSelected={isSelected}
       onClick={onClick}
       ref={ref}
+      selectedBg="skyBlue.95"
       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.28'
+    },
+    text: {
+      color: 'seaBlue.28'
+    }
+  },
+  darkBackground: {
+    circle: {
+      borderColor: 'digiGreen.30',
+      borderTopColor: 'digiGreen.78'
+    },
+    text: {
+      color: 'digiGreen.78'
+    }
+  }
 }
 
 export default {

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 = {
@@ -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,7 +243,8 @@ 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 = {
@@ -259,7 +266,8 @@ 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%)'
 }
 
 export const sunflower = {
@@ -281,7 +289,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 +312,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 +335,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 = {

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: {