@veracity/vui 1.8.0-redesign.0 → 1.8.1

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 ref={ref} variant="primaryDark" {...props} />
+  <Button colorScheme="blue" ref={ref} variant="solid" {...props} />
 ))
 
 export const BackButton = vui<'button', IconButtonProps>((props, ref) => (
-  <IconButton icon="falArrowLeft" ref={ref} variant="tertiaryDark" {...props} />
+  <IconButton colorScheme="blue" icon="falArrowLeft" ref={ref} variant="text" {...props} />
 ))
 
 export const CloseButton = vui<'button', IconButtonProps>((props, ref) => (
-  <IconButton icon="falTimes" ref={ref} variant="tertiaryDark" {...props} />
+  <IconButton colorScheme="blue" icon="falTimes" ref={ref} variant="text" {...props} />
 ))
 
 export const CTAButton = vui<'button', ButtonProps>((props, ref) => (
-  <Button ref={ref} variant="solidGreen" {...props} />
+  <Button colorScheme="green" ref={ref} variant="solid" {...props} />
 ))
 
 export const DangerButton = vui<'button', ButtonProps>((props, ref) => (
-  <Button ref={ref} variant="solidRed" {...props} />
+  <Button colorScheme="red" ref={ref} variant="solid" {...props} />
 ))
 
 export const IconButton = vui<'button', IconButtonProps>((props, ref) => (
-  <Button ref={ref} variant="tertiaryDark" {...props} />
+  <Button colorScheme="blue" ref={ref} variant="text" {...props} />
 ))
 
 export const LineButton = vui<'button', ButtonProps>((props, ref) => (
-  <Button ref={ref} variant="secondaryDark" {...props} />
+  <Button colorScheme="blue" ref={ref} variant="outlined" {...props} />
 ))
 
 export const TextButton = vui<'button', ButtonProps>((props, ref) => (
-  <Button ref={ref} variant="tertiaryDark" {...props} />
+  <Button colorScheme="blue" ref={ref} variant="text" {...props} />
 ))

package/src/button/consts.ts

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

package/src/button/theme.ts

@@ -1,14 +1,77 @@
+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: 'primaryDark'
+  variant: 'solid'
 }
 
 const parts = ['container', 'icon', 'text']
 
 const sizes = {
-  sm: {
+  xs: {
     container: {
       fontSize: 'sm',
       h: 24,
@@ -20,7 +83,7 @@ const sizes = {
     },
     text: {}
   },
-  md: {
+  sm: {
     container: {
       fontSize: 'sm',
       h: 32,
@@ -32,7 +95,7 @@ const sizes = {
     },
     text: {}
   },
-  lg: {
+  md: {
     container: {
       fontSize: 'md',
       h: 40,
@@ -44,7 +107,7 @@ const sizes = {
     },
     text: {}
   },
-  xl: {
+  lg: {
     container: {
       fontSize: 'lg',
       h: 48,
@@ -59,144 +122,9 @@ const sizes = {
 }
 
 const variants = {
-  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'
-    }
-  }
+  outlined: variantOutlined,
+  solid: variantSolid,
+  text: variantText
 }
 
 export default {

package/src/buttonGroup/buttonGroup.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 
 import { styled, th, vui } from '../core'
-import { activeClassName, cs, filterUndefined } from '../utils'
+import { activeClassName, activeItemShade, 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('skyBlue.90')};
+    background-color: ${p => th.color(`${p.colorScheme}.${activeItemShade}`)};
   }
 `
 
@@ -56,15 +56,18 @@ 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, disabled, innerBorderColor, size, variant = 'secondaryDark', ...rest } = props
+  const { className, colorScheme, disabled, innerBorderColor, size, variant, ...rest } = props
 
-  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
+  const context = useMemo(
+    () => filterUndefined({ colorScheme, disabled, size, variant }),
+    [colorScheme, disabled, size, variant]
+  )
 
   return (
     <ButtonGroupProvider value={context}>
       <ButtonGroupBase
         className={cs('vui-buttonGroup', className)}
-        {...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}
+        {...{ colorScheme, innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }}
         {...rest}
       />
     </ButtonGroupProvider>

package/src/buttonGroup/buttonGroup.types.ts

@@ -1,10 +1,11 @@
+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. @deprecated */
-    colorScheme?: string
+    /** Available theme colors for this component. */
+    colorScheme?: ButtonColorScheme
     /** Makes all wrapped buttons disabled. */
     disabled?: boolean
     /** Border color between the buttons. */

package/src/buttonGroup/helpers.ts

@@ -2,9 +2,11 @@ import { ButtonGroupProps } from './buttonGroup.types'
 
 /** Returns appropriate color for the border between the buttons. */
 export function getInnerBorderColor(props: ButtonGroupProps): string {
-  const { disabled, variant } = props
+  const { colorScheme = 'prussian', disabled, variant = 'solid' } = props
 
   if (disabled) return 'disabled.border'
 
-  return `${variant}`
+  const shade = variant === 'solid' ? '100' : '80'
+
+  return `${colorScheme}.${shade}`
 }

package/src/buttonToggleGroup/buttonToggleGroup.tsx

@@ -13,7 +13,9 @@ export const ButtonToggleGroup = (props: ButtonToggleGroupProps) => {
   return (
     <ButtonGroup
       className={cs('vui-buttonToggleGroup', className)}
+      colorScheme="blue"
       innerBorderColor={isDimmedBorder ? dimmedBorderColor : ''}
+      variant="outlined"
       {...props}
     />
   )

package/src/checkbox/checkbox.tsx

@@ -8,7 +8,7 @@ import { CheckboxProps, CheckboxStyleProps } from './checkbox.types'
 import { useCheckboxGroupContext } from './context'
 
 const CheckboxControl = styled.spanBox`
-  border-radius: none;
+  border-radius: sm;
   display: inline-flex;
   flex-shrink: 0;
   position: relative;

package/src/copyToClipboard/copyToClipboard.tsx

@@ -15,7 +15,7 @@ import { useCopyToClipboard } from './useCopyToClipboard'
  *
  */
 export const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref) => {
-  const { disabled, copyText, className, size = 'sm', variant = 'tertiaryDark', ...rest } = props
+  const { disabled, copyText, className, size = 'xs', variant = 'text', ...rest } = props
 
   const { copy, isCopyDisabled } = useCopyToClipboard(copyText)
 

package/src/core/media.tsx

@@ -10,10 +10,10 @@ import { ChildrenProp } from './types'
 type ScreenWidth = Screen | AnyNumber | AnyString
 
 export type RenderOnScreenProps = {
-  /** Changes direction to below the breakpoint. */
-  isDown?: boolean
   /** Breakpoint to compare viewport width against. */
-  screen?: Screen
+  maxWidth?: Screen
+  /** Breakpoint to compare viewport width against. */
+  minWidth?: Screen
 }
 
 /** Returns CSS media string with appropriate min-width and max-width values. */
@@ -29,38 +29,42 @@ export const mediaDown = (width: ScreenWidth) => (props: StyledProps<unknown>) =
 export const mediaUp = (width: ScreenWidth) => (props: StyledProps<unknown>) =>
   `@media (min-width: ${th.screen(width)(props)})`
 
-/** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
-export const RenderOnDesktop: FC<RenderOnScreenProps & ChildrenProp> = props => <RenderOnScreen {...props} />
-
-/** Renders its content when viewport width is below 'md' breakpoint (default: below 960px). */
-export const RenderOnMobile: FC<RenderOnScreenProps & ChildrenProp> = props => <RenderOnScreen isDown {...props} />
-
 /**
  * Renders its content when viewport width is at or above a provided breakpoint.
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
-export const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp> = ({ children, isDown, screen = 'md' }) => {
-  const mediaFn = isDown ? useDown : useUp
-  return mediaFn(screen) ? <>{children}</> : null
+export const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp> = ({ children, maxWidth, minWidth }) => {
+  if (minWidth && maxWidth) {
+    return (
+      <RenderBetween maxWidth={maxWidth} minWidth={minWidth}>
+        {children}
+      </RenderBetween>
+    )
+  }
+  if (minWidth) {
+    return <RenderOver width={minWidth}>{children}</RenderOver>
+  }
+  if (maxWidth) {
+    return <RenderUnder width={maxWidth}>{children}</RenderUnder>
+  }
+  return <>{children}</>
 }
-
-/** Returns true if current viewport width is between provided min and max widths. */
-export function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth) {
-  const isDown = useDown(maxWidth)
-  const isUp = useUp(minWidth)
-
-  return isDown && isUp
+const RenderBetween: FC<{ maxWidth: Screen; minWidth: Screen } & ChildrenProp> = ({ children, maxWidth, minWidth }) => {
+  const isBetween = useBetween(minWidth, maxWidth)
+  return isBetween ? <>{children}</> : null
 }
-
-/** Returns true if current viewport width is smaller than provided width. */
-export function useDown(width: ScreenWidth) {
-  const { value, viewportWidth } = useMedia(width)
-
-  return viewportWidth !== null && value !== null && viewportWidth < value
+const RenderOver: FC<{ width: Screen } & ChildrenProp> = ({ children, width }) => {
+  const isOver = useUp(width)
+  return isOver ? <>{children}</> : null
+}
+const RenderUnder: FC<{ width: Screen } & ChildrenProp> = ({ children, width }) => {
+  const isUnder = useDown(width)
+  return isUnder ? <>{children}</> : null
 }
 
+/** /!\ No need to export it, keep it internal */
 /** Returns viewport width and provided screen width as a number. */
-export function useMedia(width: ScreenWidth) {
+function useMedia(width: ScreenWidth) {
   const theme = useTheme()
   const viewportWidth = useViewportWidth()
   const valueString = th.screen(width)({ theme }) as string
@@ -69,9 +73,27 @@ export function useMedia(width: ScreenWidth) {
   return { value, viewportWidth }
 }
 
+/** Returns true if current viewport width is smaller than provided width. */
+export function useDown(width: ScreenWidth) {
+  const { value, viewportWidth } = useMedia(width)
+
+  return viewportWidth !== null && value !== null && viewportWidth < value
+}
+
 /** Returns true if current viewport width is larger than or equal to provided width. */
 export function useUp(width: ScreenWidth) {
   const { value, viewportWidth } = useMedia(width)
 
   return viewportWidth !== null && value !== null && viewportWidth >= value
 }
+
+/** Returns true if current viewport width is between provided min and max widths. */
+export function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth) {
+  const isDown = useDown(maxWidth)
+  const isUp = useUp(minWidth)
+
+  return isDown && isUp
+}
+
+/** Return the width of the viewport. */
+export { useViewportWidth }

package/src/core/vuiProvider/globalStyle.tsx

@@ -16,80 +16,63 @@ type GlobalStyleProps = {
  * - CSS variables for each theme value
  */
 export default createGlobalStyle<GlobalStyleProps>`
-  ${fontFaces}
-  :root {
-    ${generateCSSVariables}
-  }
-
-  * {
-    --x-ring-color: var(--vui-colors-focusColor);
-    // Fixes a box-shadow issue between some parent and child components
-    --x-shadow: 0 0 0 0 transparent;
-  }
+	${fontFaces}
 
-  button {
-    --x-ring-color: transparent;
-  }
+	:root {
+		${generateCSSVariables}
+	}
 
-  button:focus-visible, li:focus-visible {
-    --x-ring-color: var(--vui-colors-focusColor);
-    outline: var(--vui-colors-focusColor) solid 3px;
-    z-index: 1;
-  }
+	* {
+		--x-ring-color: var(--vui-colors-blue-50);
+		// Fixes a box-shadow issue between some parent and child components
+		--x-shadow: 0 0 0 0 transparent;
+	}
 
-  ${p =>
+	${p =>
     p.globalStyle &&
     css`
       body {
-        color: sandstone 0.1;
+        color: prussian.80;
         font-family: avenir;
         font-size: md;
       }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5 {
-        color: darkBlue 0.18;
-      }
     `}
 
-  @keyframes vui-bounce {
-  ${bounce}
-  }
+	@keyframes vui-bounce {
+		${bounce}
+	}
 
-  @keyframes vui-fadeDown {
-  ${fadeDown}
-  }
+	@keyframes vui-fadeDown {
+		${fadeDown}
+	}
 
-  @keyframes vui-fadeIn {
-  ${fadeIn}
-  }
+	@keyframes vui-fadeIn {
+		${fadeIn}
+	}
 
-  @keyframes vui-fadeLeft {
-  ${fadeLeft}
-  }
+	@keyframes vui-fadeLeft {
+		${fadeLeft}
+	}
 
-  @keyframes vui-fadeOut {
-  ${fadeOut}
-  }
+	@keyframes vui-fadeOut {
+		${fadeOut}
+	}
 
-  @keyframes vui-fadeRight {
-  ${fadeRight}
-  }
+	@keyframes vui-fadeRight {
+		${fadeRight}
+	}
 
-  @keyframes vui-fadeUp {
-  ${fadeUp}
-  }
+	@keyframes vui-fadeUp {
+		${fadeUp}
+	}
 
-  @keyframes vui-pulse {
-  ${pulse}
-  }
+	@keyframes vui-pulse {
+		${pulse}
+	}
 
-  @keyframes vui-spin {
-  ${spin}
-  }
+	@keyframes vui-spin {
+		${spin}
+	}
 `
 
 /** Recursively maps through all theme styles and generates a set of CSS properties. */

package/src/footer/footerTrademark.tsx

@@ -20,11 +20,11 @@ export const FooterTrademark = vui<'div', FooterTrademarkProps>((props, ref) =>
     <Box className={cs('vui-footerTrademark', className)} ref={ref} w="100%" wrap {...styles.trademark} {...rest}>
       <FooterColumn centerV flex={{ xs: '0 0 100%', md: '0 0 25%' }}>
         <Link
+          colorScheme="white"
           fontWeight="demi"
           href={linkedIn ?? defaultLinkedInUrl}
           iconLeft={<Link.Icon mr={1} name="fabLinkedin" size="sm" />}
           isExternal
-          variant="white"
         >
           Follow us
         </Link>