@veracity/vui 1.7.0-beta.3 → 1.7.0-redesign.1

package/src/badge/theme.ts

@@ -0,0 +1,140 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md',
+  variant: 'subtleSandstone'
+}
+
+const parts = ['container', 'icon', 'text']
+
+const sizes = {
+  xs: {
+    container: {
+      borderRadius: 'lg',
+      fontSize: 'sm',
+      h: 20,
+      spaceX: 4
+    },
+    icon: {
+      size: 'xs'
+    }
+  },
+  sm: {
+    container: {
+      fontSize: 'sm',
+      h: 24,
+      spaceX: 4
+    },
+    icon: {
+      size: 'xs'
+    }
+  },
+  md: {
+    container: {
+      fontSize: 'sm',
+      h: 32,
+      spaceX: 6
+    },
+    icon: {
+      size: 'sm'
+    }
+  },
+  lg: {
+    container: {
+      fontSize: 'md',
+      h: 40,
+      spaceX: 8
+    },
+    icon: {
+      size: 'md'
+    }
+  }
+}
+
+const variants = {
+  subtleSandstone: {
+    container: {
+      bg: 'sandstone.95',
+      color: 'sandstone.20',
+      borderColor: 'transparent'
+    }
+  },
+  subtleEarth: {
+    container: {
+      bg: 'earth.95',
+      color: 'earth.20'
+    }
+  },
+  subtleBlue: {
+    container: {
+      bg: 'skyBlue.95',
+      color: 'seaBlue.28'
+    }
+  },
+  subtleBlue2: {
+    container: {
+      bg: 'skyBlue.95',
+      color: 'skyBlue.20'
+    }
+  },
+  subtleRed: {
+    container: {
+      bg: 'energyRed.95',
+      color: 'energyRed.45'
+    }
+  },
+  subtleYellow: {
+    container: {
+      bg: 'sunflower.85',
+      color: 'sunflower.20'
+    }
+  },
+  subtleGreen: {
+    container: {
+      bg: 'landGreen.95',
+      color: 'landGreen.30'
+    }
+  },
+
+  /** solids next */
+  solidBlue: {
+    container: {
+      bg: 'skyBlue.65',
+      color: 'skyBlue.20'
+    }
+  },
+
+  solidDarkBlue: {
+    container: {
+      bg: 'darkBlue.18',
+      borderColor: 'darkBlue.18',
+      color: 'white'
+    }
+  },
+  solidRed: {
+    container: {
+      bg: 'energyRed.45',
+      color: 'white'
+    }
+  },
+  solidYellow: {
+    container: {
+      bg: 'sunflower.65',
+      color: 'sunflower.20'
+    }
+  },
+  solidGreen: {
+    container: {
+      bg: 'landGreen.35',
+      color: 'white'
+    }
+  }
+}
+
+export default {
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
+}

package/src/button/button.tsx

@@ -24,7 +24,7 @@ const StateWrapper = styled.span`
 
 export const ButtonBase = styled.buttonBox<ButtonProps>`
   align-items: center;
-  border-radius: md;
+  border-radius: none;
   display: inline-flex;
   flex-shrink: 0;
   font-weight: medium;
@@ -35,13 +35,6 @@ export const ButtonBase = styled.buttonBox<ButtonProps>`
   transition-duration: fast;
   user-select: none;
   width: fit-content;
-
-  &:focus,
-  &:focus:hover {
-    border-color: transparent;
-    outline: none;
-    z-index: 1;
-  }
 `
 /**
  * Triggers given actions on click. Supports multiple states, sizes and variants.
@@ -57,7 +50,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     borderWidth: borderWidthProp,
     children,
     className,
-    colorScheme: colorSchemeProp,
+    colorScheme,
     disabled,
     icon,
     iconLeft,
@@ -66,7 +59,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     isDropDown,
     isElevated,
     isFullWidth,
-		isLoading, // eslint-disable-line
+        isLoading, // eslint-disable-line
     isRound,
     isSplit,
     isTruncated,
@@ -74,28 +67,27 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     state = props.isLoading ? 'loading' : '',
     stateMapping,
     text,
-    variant,
+    variant: variantProp,
     ...rest
   } = mergedProps
   const hasState = Boolean(state) && state !== 'idle'
   const states = { ...buttonStateMapping, ...stateMapping }
+
   const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {}
-  const colorScheme = filterUndefined({
-    colorScheme: states[state]?.colorScheme ?? colorSchemeProp
+
+  const variant = filterUndefined({
+    variant: states[state]?.variant ?? variantProp
   })
 
-  const styles = useStyleConfig('Button', { ...mergedProps, ...colorScheme })
+  const styles = useStyleConfig('Button', { ...mergedProps, ...variant })
   const { borderWidth, h, spaceX = 0, ...buttonStyles } = styles.container
 
-  const context = useMemo(
-    () => filterUndefined({ colorScheme, disabled, size, variant }),
-    [colorScheme, disabled, size, variant]
-  )
+  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
 
   const Content = hasState ? ContentWrapper : React.Fragment
 
   // Apply more space for text and less space for icons
-  const border = borderWidthProp ?? borderWidth ?? 0
+  const border = borderWidthProp ?? borderWidth ?? 1
   const spaceXItem = spaceX - border
   const spaceXText = spaceX * 2 - border
   const iconLeftMr = spaceXItem + 1 + 'px'
@@ -103,23 +95,22 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
   const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px'
   const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
 
-  const disabledBorderColor = variant === 'outlined' ? 'disabled.border' : 'disabled.bg'
-
   const disabledProps = disabled
     ? {
         'aria-disabled': disabled,
-        activeBg: 'disabled.bg',
-        bg: 'disabled.bg',
-        borderColor: disabledBorderColor,
-        hoverBorderColor: disabledBorderColor,
-        color: 'disabled.color',
+        disabledBg: 'bg',
+        disabledBorderColor: 'borderColor',
+        disabledColor: 'color',
+        hoverBg: 'bg',
+        hoverBorderColor: 'borderColor',
+        activeBg: 'bg',
         cursor: 'not-allowed',
-        hoverBg: 'disabled.bg'
+        opacity: 0.5
       }
     : {}
 
   const aliasedProps = filterUndefined({
-    borderRadius: isRound ? h / 2 : undefined,
+    borderRadius: isRound ? h / 2 : 0,
     boxShadow: isElevated ? '2' : undefined,
     minW: icon ? 0 : undefined,
     pointerEvents: hasState ? 'none' : undefined,
@@ -135,7 +126,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
         focusRing={3}
         h={h}
         pl={pl}
-        pr={isDropDown ? 0 : pr}
+        pr={pr}
         ref={ref}
         type="button"
         variant={variant}
@@ -152,16 +143,18 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
 
         <Content>
           {isString(icon) ? <ButtonIcon name={icon} /> : icon}
+
           {!icon && (
             <>
               {isString(iconLeft) ? <ButtonIcon mr={isDropDown ? 0 : iconLeftMr} name={iconLeft} /> : iconLeft}
 
               {children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text)}
 
+              {isDropDown && <ButtonIcon name="falAngleDown" />}
+
               {isString(iconRight) ? <ButtonIcon ml={iconRightMl} name={iconRight} /> : iconRight}
             </>
           )}
-          {isDropDown && <ButtonIcon name="falAngleDown" />}
         </Content>
       </ButtonBase>
     </ButtonProvider>

package/src/button/button.types.ts

@@ -3,12 +3,10 @@ import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 import { AnyString } from '../utils'
 
-export type ButtonColorScheme = 'blue' | 'green' | 'pink' | 'prussian' | 'red'
-
 export type ButtonProps = SystemProps &
   ThemingProps<'Button'> & {
-    /** Available theme colors for this component. @default prussian */
-    colorScheme?: ButtonColorScheme
+    /** Available theme colors for this component. @deprecated */
+    colorScheme?: string
     /** Icon that replaces any other content. */
     icon?: IconProp | JSX.Element
     /** Socket displaying icon on the left side. */
@@ -36,12 +34,10 @@ export type ButtonProps = SystemProps &
     /** Socket placing text as alternative to children. */
     text?: React.ReactNode
   }
+
 export type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString
 
-export type ButtonStateMapping = Record<
-  string,
-  SystemProps & { colorScheme: ButtonProps['colorScheme']; iconProps: IconProps }
->
+export type ButtonStateMapping = Record<string, SystemProps & { variant: ButtonProps['variant']; iconProps: IconProps }>
 
 /** Narrower prop definition for IconButton component */
 export type IconButtonProps = Omit<ButtonProps, 'iconLeft' | 'iconRight' | 'text'>

package/src/button/buttons.tsx

@@ -5,33 +5,33 @@ import Button from './button'
 import { ButtonProps, IconButtonProps } from './button.types'
 
 export const AppButton = vui<'button', ButtonProps>((props, ref) => (
-  <Button colorScheme="blue" ref={ref} variant="solid" {...props} />
+  <Button ref={ref} variant="primaryDark" {...props} />
 ))
 
 export const BackButton = vui<'button', IconButtonProps>((props, ref) => (
-  <IconButton colorScheme="blue" icon="falArrowLeft" ref={ref} variant="text" {...props} />
+  <IconButton icon="falArrowLeft" ref={ref} variant="tertiaryDark" {...props} />
 ))
 
 export const CloseButton = vui<'button', IconButtonProps>((props, ref) => (
-  <IconButton colorScheme="blue" icon="falTimes" ref={ref} variant="text" {...props} />
+  <IconButton icon="falTimes" ref={ref} variant="tertiaryDark" {...props} />
 ))
 
 export const CTAButton = vui<'button', ButtonProps>((props, ref) => (
-  <Button colorScheme="green" ref={ref} variant="solid" {...props} />
+  <Button ref={ref} variant="solidGreen" {...props} />
 ))
 
 export const DangerButton = vui<'button', ButtonProps>((props, ref) => (
-  <Button colorScheme="red" ref={ref} variant="solid" {...props} />
+  <Button ref={ref} variant="solidRed" {...props} />
 ))
 
 export const IconButton = vui<'button', IconButtonProps>((props, ref) => (
-  <Button colorScheme="blue" ref={ref} variant="text" {...props} />
+  <Button ref={ref} variant="tertiaryDark" {...props} />
 ))
 
 export const LineButton = vui<'button', ButtonProps>((props, ref) => (
-  <Button colorScheme="blue" ref={ref} variant="outlined" {...props} />
+  <Button ref={ref} variant="secondaryDark" {...props} />
 ))
 
 export const TextButton = vui<'button', ButtonProps>((props, ref) => (
-  <Button colorScheme="blue" ref={ref} variant="text" {...props} />
+  <Button ref={ref} variant="tertiaryDark" {...props} />
 ))

package/src/button/consts.ts

@@ -2,14 +2,14 @@ import { ButtonStateMapping } from './button.types'
 
 export const buttonStateMapping: ButtonStateMapping = {
   error: {
-    colorScheme: 'red',
+    variant: 'solidRed',
     iconProps: {
       animation: 'fadeDown',
       icon: 'falTimesCircle'
     }
   },
   loading: {
-    colorScheme: 'blue',
+    variant: 'primaryDark',
     iconProps: {
       animation: 'vui-spin 0.6s linear infinite',
       name: 'fadSpinnerThird',
@@ -17,7 +17,7 @@ export const buttonStateMapping: ButtonStateMapping = {
     }
   },
   success: {
-    colorScheme: 'green',
+    variant: 'solidGreen',
     iconProps: {
       animation: 'fadeDown',
       icon: 'falCheckCircle'

package/src/button/theme.ts

@@ -1,77 +1,14 @@
-import { Dict } from '../utils'
-
-function variantOutlined(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    ...variantText(props)?.container,
-    borderColor: `${c}.80`,
-    hoverBorderColor: `${c}.80`,
-    focusRing: 3
-  }
-
-  return { container }
-}
-
-function variantSolid(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    hoverBg: `${c}.90`,
-    hoverBorderColor: `${c}.90`,
-    activeBg: `${c}.100`,
-    bg: `${c}.80`,
-    borderColor: `${c}.80`,
-    borderWidth: 1,
-    color: 'white'
-  }
-
-  // Special cases
-  if (c === 'prussian') {
-    container.activeBg = 'prussian.50'
-    container.hoverBg = 'prussian.60'
-    container.hoverBorderColor = 'prussian.60'
-  }
-
-  return { container }
-}
-
-function variantText(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    hoverBg: `${c}.20`,
-    hoverBorderColor: `${c}.20`,
-    activeBg: `${c}.30`,
-    bg: 'transparent',
-    borderColor: 'transparent',
-    borderWidth: 1,
-    color: `${c}.80`,
-    focusRing: 2
-  }
-
-  // Special cases
-  if (c === 'prussian') {
-    container.activeBg = 'blue.30'
-    container.hoverBg = 'blue.20'
-    container.hoverBorderColor = 'blue.20'
-  }
-
-  return { container }
-}
-
 const baseStyle = {}
 
 const defaultProps = {
-  colorScheme: 'prussian',
   size: 'md',
-  variant: 'solid'
+  variant: 'primaryDark'
 }
 
 const parts = ['container', 'icon', 'text']
 
 const sizes = {
-  xs: {
+  sm: {
     container: {
       fontSize: 'sm',
       h: 24,
@@ -83,7 +20,7 @@ const sizes = {
     },
     text: {}
   },
-  sm: {
+  md: {
     container: {
       fontSize: 'sm',
       h: 32,
@@ -95,7 +32,7 @@ const sizes = {
     },
     text: {}
   },
-  md: {
+  lg: {
     container: {
       fontSize: 'md',
       h: 40,
@@ -107,7 +44,7 @@ const sizes = {
     },
     text: {}
   },
-  lg: {
+  xl: {
     container: {
       fontSize: 'lg',
       h: 48,
@@ -122,9 +59,144 @@ const sizes = {
 }
 
 const variants = {
-  outlined: variantOutlined,
-  solid: variantSolid,
-  text: variantText
+  primaryDark: {
+    container: {
+      bg: 'buttonTypePrimaryDefaultBackgroundColorDark',
+      borderColor: 'buttonTypePrimaryDefaultBorderColorDark',
+      color: 'buttonTypePrimaryDefaultTextColorDark',
+      hoverBg: 'buttonTypePrimaryHoverBackgroundColorDark',
+      hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
+      hoverColor: 'buttonTypePrimaryHoverTextColorDark',
+      activeBg: 'buttonTypePrimaryActiveBackgroundColorDark',
+      activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
+      activeColor: 'buttonTypePrimaryActiveTextColorDark'
+    }
+  },
+
+  secondaryDark: {
+    container: {
+      bg: 'buttonTypeSecondaryDefaultBackgroundColorDark',
+      borderColor: 'buttonTypeSecondaryDefaultBorderColorDark',
+      color: 'buttonTypeSecondaryDefaultTextColorDark',
+      // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
+      // hover will change from 90 to 85
+      hoverBg: 'buttonTypeSecondaryHoverBackgroundColorDark',
+      hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorDark',
+      hoverColor: 'buttonTypeSecondaryHoverTextColorDark',
+      // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
+      // active will change from 95% to 90%
+      activeBg: 'buttonTypeSecondaryActiveBackgroundColorDark',
+      activeBorderColor: 'buttonTypeSecondaryActiveBorderColorDark',
+      activeColor: 'buttonTypeSecondaryActiveTextColorDark'
+    }
+  },
+
+  tertiaryDark: {
+    container: {
+      bg: 'buttonTypeTertiaryDefaultBackgroundColorDark',
+      borderColor: 'buttonTypeTertiaryDefaultBorderColorDark',
+      color: 'buttonTypeTertiaryDefaultTextColorDark',
+      hoverBg: 'buttonTypeTertiaryHoverBackgroundColorDark',
+      hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorDark',
+      hoverColor: 'buttonTypeTertiaryHoverTextColorDark',
+      activeBg: 'buttonTypeTertiaryActiveBackgroundColorDark',
+      activeBorderColor: 'buttonTypeTertiaryActiveBorderColorDark',
+      activeColor: 'buttonTypeTertiaryActiveTextColorDark'
+    }
+  },
+
+  solidGreen: {
+    container: {
+      bg: 'landGreen.35',
+      borderColor: 'landGreen.35',
+      color: 'white',
+      disabledBg: 'landGreen.70',
+      disabledBorderColor: 'landGreen.70',
+      disabledColor: 'white',
+      hoverBg: 'landGreen.25',
+      hoverBorderColor: 'landGreen.25',
+      focusBg: 'landGreen.35',
+      activeBg: 'landGreen.41',
+      activeBorderColor: 'landGreen.41'
+    }
+  },
+
+  solidRed: {
+    container: {
+      bg: 'energyRed.45',
+      borderColor: 'energyRed.45',
+      color: 'white',
+      disabledBg: 'energyRed.80',
+      disabledBorderColor: 'energyRed.80',
+      disabledColor: 'white',
+      // proper order is important next: hover >  focus >  active
+      hoverBg: 'energyRed.35',
+      hoverBorderColor: 'energyRed.35',
+      focusBg: 'energyRed.45',
+      activeBg: 'energyRed.50',
+      activeBorderColor: 'energyRed.50'
+    }
+  },
+
+  // subtleBlue is an internal variant, used in notification; based on primaryDark
+  subtleBlue: {
+    container: {
+      bg: 'transparent',
+      borderColor: 'transparent',
+      color: 'seaBlue.28',
+      disabledBg: 'white',
+      disabledBorderColor: 'darkBlue.75',
+      disabledColor: 'darkBlue.75',
+      // proper order is important next: hover >  focus >  active
+      hoverBg: 'skyBlue.90',
+      hoverBorderColor: 'skyBlue.90',
+      focusBg: 'transparent',
+      activeBg: 'skyBlue.85',
+      activeBorderColor: 'skyBlue.85'
+    }
+  },
+
+  // subtleRed is an internal variant, used in notification; based on primaryDark
+  subtleRed: {
+    container: {
+      bg: 'transparent',
+      borderColor: 'transparent',
+      // proper order is important next: hover >  focus >  active
+      hoverBg: 'energyRed.90',
+      hoverBorderColor: 'energyRed.90',
+      focusBg: 'transparent',
+      activeBg: 'energyRed.85',
+      color: 'energyRed.45'
+    }
+  },
+
+  // subtleYellow is an internal variant, used in notification; based on primaryDark
+  subtleYellow: {
+    container: {
+      bg: 'transparent',
+      borderColor: 'transparent',
+      // proper order is important next: hover >  focus >  active
+      hoverBg: 'sunflower.70',
+      hoverBorderColor: 'sunflower.70',
+      focusBg: 'transparent',
+      activeBg: 'sunflower.65',
+      color: 'sunflower.15'
+    }
+  },
+
+  // subtleGreen is an internal variant, used in notification; based on primaryDark
+  subtleGreen: {
+    container: {
+      bg: 'transparent',
+      borderColor: 'transparent',
+      // proper order is important next: hover >  focus >  active
+      hoverBg: 'landGreen.90',
+      hoverBorderColor: 'landGreen.90',
+      focusBg: 'transparent',
+      activeBg: 'landGreen.85',
+      color: 'landGreen.30'
+    }
+  }
 }
 
 export default {

package/src/buttonGroup/buttonGroup.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 
 import { styled, th, vui } from '../core'
-import { activeClassName, activeItemShade, cs, filterUndefined } from '../utils'
+import { activeClassName, cs, filterUndefined } from '../utils'
 import { ButtonGroupProps } from './buttonGroup.types'
 import { ButtonGroupProvider } from './context'
 import { getInnerBorderColor } from './helpers'
@@ -42,12 +42,12 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
   }
 
   > *:disabled {
-    border-color: disabled.border;
+    border-color: disabled .border;
   }
 
   //
   > .${activeClassName} {
-    background-color: ${p => th.color(`${p.colorScheme}.${activeItemShade}`)};
+    background-color: ${p => th.color('skyBlue.90')};
   }
 `
 
@@ -56,18 +56,15 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
  * Exposes some props to the children via context.
  */
 export const ButtonGroup = vui<'div', ButtonGroupProps>((props, ref) => {
-  const { className, colorScheme, disabled, innerBorderColor, size, variant, ...rest } = props
+  const { className, disabled, innerBorderColor, size, variant = 'secondaryDark', ...rest } = props
 
-  const context = useMemo(
-    () => filterUndefined({ colorScheme, disabled, size, variant }),
-    [colorScheme, disabled, size, variant]
-  )
+  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
 
   return (
     <ButtonGroupProvider value={context}>
       <ButtonGroupBase
         className={cs('vui-buttonGroup', className)}
-        {...{ colorScheme, innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}
+        {...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}
         {...rest}
       />
     </ButtonGroupProvider>

package/src/buttonGroup/buttonGroup.types.ts

@@ -1,11 +1,10 @@
-import { ButtonColorScheme } from '../button/button.types'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type ButtonGroupProps = SystemProps &
   ThemingProps<'ButtonGroup'> & {
-    /** Available theme colors for this component. */
-    colorScheme?: ButtonColorScheme
+    /** Available theme colors for this component. @deprecated */
+    colorScheme?: string
     /** Makes all wrapped buttons disabled. */
     disabled?: boolean
     /** Border color between the buttons. */