@veracity/vui 1.7.0-redesign.6 → 1.7.0

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/vuiProvider/globalStyle.tsx

@@ -16,81 +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;
-    z-index: 1;
-  }
+	${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>

package/src/heading/theme.ts

@@ -1,61 +1,39 @@
-const baseStyle = {
-  color: 'darkBlue.18'
-}
+const baseStyle = {}
 
 const defaultProps = {
   size: 'h2'
 }
 
 const sizes = {
-  title: {
-    as: 'h1',
-    fontFamily: 'DNV Display',
-    fontSize: '64px',
-    fontWeight: 'medium',
-    lineHeight: '74px'
-  },
   h1: {
     as: 'h1',
-    fontSize: '50px',
-    fontWeight: 'regular',
-    lineHeight: '62px'
-  },
-  lead: {
-    as: 'h2',
-    color: 'seaBlue.28',
-    fontSize: '28px',
-    fontWeight: 'regular',
-    lineHeight: '38px'
+    fontSize: '40px',
+    lineHeight: '52px'
   },
   h2: {
     as: 'h2',
     fontSize: '32px',
-    fontWeight: 'regular',
-    lineHeight: '42px'
+    lineHeight: '40px'
   },
   h3: {
     as: 'h3',
     fontSize: '24px',
-    fontWeight: 'regular',
     lineHeight: '32px'
   },
   h4: {
     as: 'h4',
     fontSize: '20px',
-    fontWeight: 'demi',
-    lineHeight: '24px'
+    lineHeight: '28px'
   },
   h5: {
     as: 'h5',
     fontSize: '18px',
-    fontWeight: 'demi',
-    lineHeight: '26px'
+    lineHeight: '24px'
   },
   h6: {
     as: 'h6',
     fontSize: '16px',
-    fontWeight: 'demi',
-    lineHeight: '22px'
+    lineHeight: '20px'
   }
 }
 

package/src/icon/icon.types.ts

@@ -20,7 +20,7 @@ export type IconProps = SvgProps &
     icon?: IconProp
     /** Name of the icon stored in Veracity CDN. */
     name?: IconProp
-    /** Rotates the icon by given amount of degrees clockwise. */
+    /** Rotates the icon by given amout of degrees clockwise. */
     rotate?: number
     /** Uses a scale of 1-10 and multiply of 16px to define icon size. */
     scale?: number

package/src/icon/theme.ts

@@ -20,11 +20,6 @@ const sizes = {
   lg: {
     height: 28,
     width: 28
-  },
-  /** the xl size is introduced for the xxl tabs; should not be listed. */
-  xl: {
-    height: 32,
-    width: 32
   }
 }
 

package/src/index.ts

@@ -1,6 +1,5 @@
 export * from './accordion'
 export * from './avatar'
-export * from './badge'
 export * from './box'
 export * from './button'
 export * from './buttonGroup'

package/src/input/input.tsx

@@ -14,7 +14,7 @@ import InputInput from './inputInput'
 export const InputBase = styled.divBox`
   align-items: center;
   background-color: white;
-  border-radius: none;
+  border-radius: md;
   border-width: 1px;
   display: flex;
   flex-shrink: 0;

package/src/input/inputInput.tsx

@@ -9,7 +9,7 @@ export const InputInputBase = styled.input`
   align-self: stretch;
   background-color: transparent;
   border: none;
-  border-radius: none;
+  border-radius: md;
   flex: 1;
   font-size: inherit;
   min-width: 0;

package/src/link/link.tsx

@@ -9,7 +9,7 @@ import LinkText from './linkText'
 
 export const LinkBase = styled.aBox`
   align-items: center;
-  border-radius: none;
+  border-radius: sm;
   cursor: pointer;
   display: inline-flex;
   line-height: normal;
@@ -27,6 +27,7 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
   const {
     children,
     className,
+    colorScheme,
     decoration,
     hoverDecoration = 'underline',
     iconLeft,
@@ -41,7 +42,7 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
   } = props
   const styles = useStyleConfig('Link', props)
 
-  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
+  const context = useMemo(() => filterUndefined({ colorScheme, size, variant }), [colorScheme, size, variant])
 
   const aliasedProps = filterUndefined({
     fontWeight: weight,

package/src/link/link.types.ts

@@ -4,6 +4,8 @@ import { ThemingProps } from '../theme'
 
 export type LinkProps = SystemProps &
   ThemingProps<'Link'> & {
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'white'
     /** Alias for textDecoration prop. @deprecated */
     decoration?: TypographyProps['textDecoration']
     /** Alias for hoverTextDecoration prop. @deprecated */