@veracity/vui 2.1.0 → 2.3.0

package/src/input/consts.ts

@@ -1,30 +1,45 @@
 import { InputStateMapping } from './input.types'
 
-export const greyLightColor = 'warmGrey.90'
-export const greyColor = 'sandstone.60'
-export const redColor = 'energyRed.45'
+export const inputColors = {
+  border: 'sandstone.60',
+  placeholder: 'sandstone.55',
+  inputText: 'sandstone.10',
+  helpText: 'sandstone.30',
+  icons: 'seaBlue.28',
+  disabled: 'sandstone.95',
+  focus: 'seaBlue.28',
+  error: 'energyRed.45',
+  loading: 'seaBlue.80',
+  success: 'landGreen.41'
+}
+
+export const stateIcons = {
+  error: 'falExclamationTriangle',
+  loading: 'fadSpinnerThird',
+  success: 'falCheck'
+}
 
 export const inputStateMapping: InputStateMapping = {
   error: {
-    colorScheme: 'red',
+    variant: 'red',
     iconProps: {
-      color: 'energyRed.45',
-      icon: 'falExclamationTriangle'
+      color: inputColors.error,
+      icon: stateIcons.error
     }
   },
   loading: {
-    colorScheme: 'grey',
+    variant: 'grey',
     iconProps: {
       animation: 'vui-spin 0.6s linear infinite',
-      name: 'fadSpinnerThird',
-      pathFill: ['seaBlue.90', 'seaBlue.28']
+      name: stateIcons.loading,
+      pathFill: [inputColors.loading, inputColors.icons]
     }
   },
   success: {
-    colorScheme: 'green',
+    variant: 'green',
     iconProps: {
-      color: 'landGreen.30',
-      icon: 'falCheck'
+      color: inputColors.success,
+      icon: stateIcons.success
     }
   }
 }

package/src/input/helpText.tsx

@@ -4,7 +4,7 @@ import { useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import P from '../p'
 import { cs } from '../utils'
-import { greyColor, redColor } from './consts'
+import { inputColors } from './consts'
 import { useInputContext } from './context'
 import { HelpTextProps } from './input.types'
 
@@ -15,7 +15,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
-  const color = isError ? redColor : greyColor
+  const color = isError ? inputColors.error : inputColors.helpText
 
   return (
     <P
@@ -27,7 +27,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
       {...styles.helpText}
       {...rest}
     >
-      {isError && <Icon mr={1} name="falExclamationTriangle" pathFill={redColor} size="sm" />}
+      {isError && <Icon mr={1} name="falExclamationTriangle" pathFill={inputColors.error} size="sm" />}
       {children}
     </P>
   )

package/src/input/input.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
-import { greyColor, greyLightColor, inputStateMapping, redColor } from './consts'
+import { inputColors, inputStateMapping } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
 import HelpText from './helpText'
@@ -40,7 +40,6 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     autoFocus,
     children,
     className,
-    colorScheme,
     defaultValue,
     disabled,
     errorText,
@@ -50,7 +49,6 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     input,
     inputProps,
     inputRef,
-    isInvalid,
     itemLeft,
     itemRight,
     helpText,
@@ -80,16 +78,9 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   const [valueInternal, setValueInternal] = useState(defaultValue || '')
   const states = { ...inputStateMapping, ...stateMapping }
 
-  const computedColorScheme = filterUndefined({
-    colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
-  })
-
-  const styles = useStyleConfig('Input', { ...computedColorScheme, ...props })
+  const styles = useStyleConfig('Input', props)
 
-  const context = useMemo(
-    () => filterUndefined({ colorScheme, disabled, size, variant }),
-    [colorScheme, disabled, size, variant]
-  )
+  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
 
   function onChange(e: ChangeEvent) {
     setValueInternal(e.target.value)
@@ -99,7 +90,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
 
   const aliasedProps = filterUndefined({
     'aria-disabled': disabled,
-    bg: readOnly ? greyLightColor : undefined,
+    bg: readOnly ? inputColors.disabled : undefined,
     focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
     focusWithinRingColor: readOnly ? 'transparent' : undefined
   })
@@ -147,7 +138,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
         {showCount && (
           <T
             className="vui-inputCount"
-            color={maxLength && count > maxLength ? redColor : greyColor}
+            color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
             position="absolute"
             right={0}
             size="sm"

package/src/input/input.types.ts

@@ -14,7 +14,7 @@ export type InputProps = SystemProps &
     autoComplete?: string
     /** Passed to the inner input. */
     autoFocus?: boolean
-    /** Available theme colors for this component. @default grey */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'green' | 'grey' | 'red'
     /** Passed to the inner input. */
     defaultValue?: number | string
@@ -32,7 +32,7 @@ export type InputProps = SystemProps &
     inputProps?: InputInputProps
     /** Ref passed to the inner input. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-    /** Styles the input in invalid state. */
+    /** Deprecated. Please use variant="red" and/or state="error" instead. @deprecated*/
     isInvalid?: boolean
     /** Socket displaying a custom element on the left. */
     itemLeft?: React.ReactNode
@@ -41,11 +41,11 @@ export type InputProps = SystemProps &
     /** Socket displaying help text bellow an input. */
     helpText?: React.ReactNode | string
     /** Passed to the inner input. */
-    max?: number | string
+    max?: number
     /** Passed to the inner input. */
     maxLength?: number
     /** Passed to the inner input. */
-    min?: number | string
+    min?: number
     /** Passed to the inner input. */
     name?: string
     /** Passed to the inner input. */
@@ -69,7 +69,7 @@ export type InputProps = SystemProps &
     /** Object definition of styles and content for each state. */
     stateMapping?: InputStateMapping
     /** Passed to the inner input. */
-    step?: number | string
+    step?: number
     /** Passed to the inner input. */
     type?: InputType
     /** Passed to the inner input. */
@@ -85,7 +85,7 @@ export type InputState = 'default' | 'error' | 'loading' | 'success'
 export type InputStateMapping = Record<
   string,
   {
-    colorScheme?: InputProps['colorScheme']
+    variant?: InputProps['variant']
     iconProps: IconProps
   }
 >

package/src/input/inputIcon.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
 import { cs } from '../utils'
+import { inputColors } from './consts'
 import { useInputContext } from './context'
 
 /** Displays an icon within the Input. */
@@ -12,7 +13,7 @@ export const InputIcon = vui<'svg', IconProps>((props, ref) => {
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
-  const color = !mergedProps.disabled ? 'blue.80' : 'grey.50'
+  const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder
 
   return <Icon className={cs('vui-inputIcon', className)} color={color} ref={ref} {...styles.icon} {...rest} />
 })

package/src/input/theme.ts

@@ -1,37 +1,24 @@
-import { Dict } from '../utils'
+import { inputColors } from './consts'
 
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    borderColor: `${c}.80`,
+const baseStyle = {
+  container: {
     focusWithinRing: 2,
-    focusWithinRingColor: `${c}.80`
-  }
-
-  if (c === 'grey') {
-    container.borderColor = `${c}.60`
-    container.focusWithinRingColor = 'blue.50'
+    color: inputColors.inputText
+  },
+  input: {
+    color: { placeholder: inputColors.placeholder }
   }
-
-  const icon = {}
-  const input = {}
-
-  return { container, icon, input }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'grey',
-  size: 'md',
-  variant: 'default'
+  size: 'lg',
+  variant: 'grey'
 }
 
 const parts = ['container', 'icon', 'input']
 
 const sizes = {
-  xs: {
+  sm: {
     container: {
       fontSize: 'sm',
       h: 24
@@ -41,7 +28,7 @@ const sizes = {
     },
     input: {}
   },
-  sm: {
+  md: {
     container: {
       fontSize: 'sm',
       h: 32
@@ -51,7 +38,7 @@ const sizes = {
     },
     input: {}
   },
-  md: {
+  lg: {
     container: {
       fontSize: 'md',
       h: 40
@@ -61,7 +48,7 @@ const sizes = {
     },
     input: {}
   },
-  lg: {
+  xl: {
     container: {
       fontSize: 'lg',
       h: 48
@@ -74,7 +61,24 @@ const sizes = {
 }
 
 const variants = {
-  default: variantDefault
+  grey: {
+    container: {
+      borderColor: inputColors.border,
+      focusWithinRingColor: inputColors.focus
+    }
+  },
+  green: {
+    container: {
+      borderColor: inputColors.success,
+      focusWithinRingColor: inputColors.success
+    }
+  },
+  red: {
+    container: {
+      borderColor: inputColors.error,
+      focusWithinRingColor: inputColors.error
+    }
+  }
 }
 
 export default {

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/skeleton/skeleton.types.ts

@@ -5,7 +5,7 @@ export type SkeletonProps = SystemProps &
   ThemingProps<'Skeleton'> & {
     /** Children are disabled for this component. */
     children?: never
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'grey'
     /** Displays given amount of skeleton elements. */
     repeat?: number

package/src/skeleton/theme.ts

@@ -1,32 +1,8 @@
-import { Dict } from '../utils'
-
-function variantCircle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const styles = {
-    borderRadius: '50%',
-    bg: `${c}.20`
-  }
-
-  return styles
-}
-
-function variantRectangle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const styles = {
-    borderRadius: 'md',
-    bg: `${c}.20`,
-    w: '100%'
-  }
-
-  return styles
+const baseStyle = {
+  bg: 'skyBlue.95'
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'blue',
   size: 'md',
   variant: 'rect'
 }
@@ -47,8 +23,13 @@ const sizes = {
 }
 
 const variants = {
-  circle: variantCircle,
-  rect: variantRectangle
+  circle: {
+    borderRadius: '50%'
+  },
+  rect: {
+    borderRadius: 'md',
+    w: '100%'
+  }
 }
 
 export default {

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/tag/theme.ts

@@ -2,7 +2,8 @@ const baseStyle = {}
 
 const defaultProps = {
   size: 'md',
-  variant: 'subtleBlue'
+  variant: 'subtleBlue',
+  fontWeight: 'medium'
 }
 
 const parts = ['container', 'button', 'icon', 'text']

package/src/theme/components.ts

@@ -38,6 +38,7 @@ import Table from '../table/theme'
 import Tabs from '../tabs/theme'
 import Tag from '../tag/theme'
 import Textarea from '../textarea/theme'
+import Tree from '../tree/theme'
 
 export default {
   Accordion,
@@ -79,5 +80,6 @@ export default {
   Table,
   Tabs,
   Tag,
-  Textarea
+  Textarea,
+  Tree
 }