@veracity/vui 1.7.0-redesign.6 → 1.7.1

package/src/tag/tag.tsx

@@ -10,7 +10,7 @@ import TagText from './tagText'
 
 export const TagBase = styled.spanBox`
   align-items: center;
-  border-radius: xl;
+  border-radius: md;
   display: inline-flex;
   font-weight: medium;
   justify-content: center;
@@ -26,8 +26,8 @@ export const TagBase = styled.spanBox`
   }
 
   &[aria-disabled='true'] {
-    background-color: disabled .bg;
-    color: disabled .color;
+    background-color: disabled.bg;
+    color: disabled.color;
     cursor: not-allowed;
     user-select: none;
   }
@@ -42,7 +42,7 @@ export const Tag = vui<'span', TagProps>((props, ref) => {
     casing,
     children,
     className,
-    colorScheme,
+    colorScheme = 'blue',
     disabled,
     icon,
     iconLeft,
@@ -57,21 +57,20 @@ export const Tag = vui<'span', TagProps>((props, ref) => {
     onDelete,
     size = 'md',
     text,
-    variant,
+    variant = 'subtle',
     weight,
     ...rest
   } = props
   const styles = useStyleConfig('Tag', props)
   const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = styles.container
 
-  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
+  const context = useMemo(
+    () => filterUndefined({ colorScheme, disabled, size, variant }),
+    [colorScheme, disabled, size, variant]
+  )
 
   const spaceX = spaceXBase / 8
-  let spaceXText = (spaceXBase + 4) / 8
-  if (size === 'xs') {
-    spaceXText = spaceXBase / 8
-  }
-
+  const spaceXText = (spaceXBase + 4) / 8
   const pl = icon || itemLeft || iconLeft ? spaceX : spaceXText
   const pr = icon || itemRight || iconRight ? spaceX : spaceXText
 

package/src/tag/tag.types.ts

@@ -2,35 +2,34 @@ import { IconProp } from '../icon'
 import { SystemProps, TypographyProps } from '../system'
 import { ThemingProps } from '../theme'
 
-export type TagInnerProps = {
-  /** Alias for textTransform prop. @deprecated */
-  casing?: TypographyProps['textTransform']
-  /** Available theme colors for this component. @deprecated */
-  colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow'
-  /** Displays tag and its content in disabled state with appropriate styling. */
-  disabled?: boolean
-  /** Icon that replaces any other content. */
-  icon?: IconProp | JSX.Element
-  /** Socket displaying icon on the left side. */
-  iconLeft?: IconProp | JSX.Element
-  /** Socket displaying icon on the right side. */
-  iconRight?: IconProp | JSX.Element
-  /** Makes the button take full width of the container. @deprecated */
-  isFullWidth?: boolean
-  /** Makes item clickable and focusable with appropriate styling. */
-  isInteractive?: boolean
-  /** Rounds the borders. @default false */
-  isRound?: boolean
-  /** Socket displaying a custom item on the left. */
-  itemLeft?: React.ReactNode
-  /** Socket displaying a custom item on right left. */
-  itemRight?: React.ReactNode
-  /** If provided, displays a remove button with this function as onClick. */
-  onDelete?: () => void
-  /** Socket displaying text as alternative to children. */
-  text?: React.ReactNode
-  /** Alias for fontWeight prop. @deprecated */
-  weight?: TypographyProps['fontWeight']
-}
-
-export type TagProps = SystemProps & ThemingProps<'Tag'> & TagInnerProps
+export type TagProps = SystemProps &
+  ThemingProps<'Tag'> & {
+    /** Alias for textTransform prop. @deprecated */
+    casing?: TypographyProps['textTransform']
+    /** Available theme colors for this component. @default blue */
+    colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow'
+    /** Displays tag and its content in disabled state with appropriate styling. */
+    disabled?: boolean
+    /** Icon that replaces any other content. */
+    icon?: IconProp | JSX.Element
+    /** Socket displaying icon on the left side. */
+    iconLeft?: IconProp | JSX.Element
+    /** Socket displaying icon on the right side. */
+    iconRight?: IconProp | JSX.Element
+    /** Makes the button take full width of the container. @deprecated */
+    isFullWidth?: boolean
+    /** Makes item clickable and focusable with appropriate styling. */
+    isInteractive?: boolean
+    /** Rounds the borders. @default false */
+    isRound?: boolean
+    /** Socket displaying a custom item on the left. */
+    itemLeft?: React.ReactNode
+    /** Socket displaying a custom item on right left. */
+    itemRight?: React.ReactNode
+    /** If provided, displays a remove button with this function as onClick. */
+    onDelete?: () => void
+    /** Socket displaying text as alternative to children. */
+    text?: React.ReactNode
+    /** Alias for fontWeight prop. @deprecated */
+    weight?: TypographyProps['fontWeight']
+  }

package/src/tag/tagButton.tsx

@@ -14,14 +14,14 @@ export const TagButton = vui<'button', ButtonProps>((props, ref) => {
   return (
     <Button
       borderColor="transparent"
-      // borderRadius={isRound ? undefined : 2}
       className={cs('vui-tagButton', className)}
+      colorScheme={mergedProps.colorScheme}
       disabled={mergedProps.disabled}
       hoverBorderColor="transparent"
       icon="falTimes"
       mr={-0.5}
       ref={ref}
-      variant={mergedProps.variant}
+      variant="text"
       {...styles.button}
       {...rest}
     />

package/src/tag/theme.ts

@@ -1,27 +1,87 @@
+import { Dict } from '../utils'
+
+function variantSolid(props: Dict) {
+  const { colorScheme: c } = props
+
+  const container = {
+    hoverBg: `${c}.90`,
+    activeBg: `${c}.100`,
+    bg: `${c}.80`,
+    color: 'white',
+    focusRing: 3
+  }
+
+  const button = {
+    hoverBg: `${c}.70`,
+    activeBg: `${c}.60`,
+    bg: `${c}.80`,
+    color: 'white'
+  }
+
+  if (c === 'prussian') {
+    container.hoverBg = 'prussian.60'
+    container.activeBg = 'prussian.50'
+    button.hoverBg = 'prussian.60'
+    button.activeBg = 'prussian.50'
+  }
+
+  if (c === 'yellow') {
+    container.hoverBg = 'yellow.80'
+    container.activeBg = 'yellow.90'
+    container.bg = 'yellow.70'
+    button.hoverBg = 'yellow.60'
+    button.activeBg = 'yellow.50'
+    button.bg = 'yellow.70'
+  }
+
+  return { container, button }
+}
+
+function variantSubtle(props: Dict) {
+  const { colorScheme: c } = props
+
+  const container = {
+    hoverBg: `${c}.30`,
+    activeBg: `${c}.40`,
+    bg: `${c}.20`,
+    color: `${c}.90`
+  }
+
+  const button = {
+    hoverBg: `${c}.30`,
+    activeBg: `${c}.40`,
+    color: `${c}.90`
+  }
+
+  if (c === 'blue') {
+    container.color = 'blue.80'
+    button.color = 'blue.80'
+  }
+
+  if (c === 'grey') {
+    container.color = 'prussian.80'
+    button.color = 'prussian.80'
+  }
+
+  if (c === 'yellow') {
+    container.color = 'yellow.100'
+    button.color = 'yellow.100'
+  }
+
+  return { container, button }
+}
+
 const baseStyle = {}
 
 const defaultProps = {
+  colorScheme: 'blue',
   size: 'md',
-  variant: 'subtleBlue'
+  variant: 'subtle'
 }
 
 const parts = ['container', 'button', 'icon', 'text']
 
 const sizes = {
-  xs: {
-    container: {
-      borderRadius: 'lg',
-      fontSize: 'sm',
-      h: 20,
-      spaceX: 4
-    },
-    button: {
-      size: 'sm'
-    },
-    icon: {
-      size: 'xs'
-    }
-  },
   sm: {
     container: {
       fontSize: 'sm',
@@ -29,7 +89,7 @@ const sizes = {
       spaceX: 4
     },
     button: {
-      size: 'sm'
+      size: 'xs'
     },
     icon: {
       size: 'xs'
@@ -42,7 +102,7 @@ const sizes = {
       spaceX: 6
     },
     button: {
-      size: 'sm'
+      size: 'xs'
     },
     icon: {
       size: 'sm'
@@ -55,7 +115,7 @@ const sizes = {
       spaceX: 8
     },
     button: {
-      size: 'md'
+      size: 'sm'
     },
     icon: {
       size: 'md'
@@ -64,171 +124,8 @@ const sizes = {
 }
 
 const variants = {
-  subtleGrey: {
-    container: {
-      bg: 'sandstone.95',
-      hoverBg: 'sandstone.90',
-      borderColor: 'sandstone.90',
-      color: 'sandstone.20',
-      activeBg: 'sandstone.85'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'sandstone.90',
-      hoverBorderColor: 'transparent',
-      color: 'sandstone.20',
-      activeBg: 'sandstone.85'
-    }
-  },
-  subtleBlue: {
-    container: {
-      bg: 'skyBlue.95',
-      hoverBg: 'skyBlue.90',
-      activeBg: 'skyBlue.85',
-      borderColor: 'skyBlue.95',
-      color: 'seaBlue.28'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'skyBlue.90',
-      activeBg: 'skyBlue.85',
-      hoverBorderColor: 'transparent',
-      color: 'seaBlue.28'
-    }
-  },
-  subtleRed: {
-    container: {
-      bg: 'energyRed.95',
-      borderColor: 'energyRed.95',
-      hoverBg: 'energyRed.90',
-      activeBg: 'energyRed.85',
-      color: 'energyRed.45'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'energyRed.90',
-      activeBg: 'energyRed.85',
-      hoverBorderColor: 'transparent',
-      color: 'energyRed.45'
-    }
-  },
-  subtleYellow: {
-    container: {
-      bg: 'sunflower.85',
-      hoverBg: 'sunflower.70',
-      activeBg: 'sunflower.65',
-      borderColor: 'terracotta.30',
-      color: 'sunflower.20'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'sunflower.70',
-      activeBg: 'sunflower.65',
-      hoverBorderColor: 'transparent',
-      color: 'sunflower.20'
-    }
-  },
-  subtleGreen: {
-    container: {
-      bg: 'landGreen.95',
-      hoverBg: 'landGreen.90',
-      borderColor: 'landGreen.30',
-      color: 'landGreen.30',
-      activeBg: 'landGreen.85'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'landGreen.90',
-      activeBg: 'landGreen.85',
-      hoverBorderColor: 'transparent',
-      color: 'landGreen.30'
-    }
-  },
-
-  /** solids next */
-  solidBlue: {
-    container: {
-      bg: 'seaBlue.28',
-      hoverBg: 'seaBlue.35',
-      activeBg: 'seaBlue.40',
-      borderColor: 'seaBlue.28',
-      color: 'white'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'seaBlue.35',
-      activeBg: 'seaBlue.40',
-      hoverBorderColor: 'transparent',
-      activeBorderColor: 'transparent',
-      color: 'white'
-    }
-  },
-  solidDarkBlue: {
-    container: {
-      bg: 'darkBlue.18',
-      hoverBg: 'darkBlue.25',
-      activeBg: 'darkBlue.35',
-      borderColor: 'darkBlue.18',
-      color: 'white'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'darkBlue.25',
-      activeBg: 'darkBlue.35',
-      hoverBorderColor: 'transparent',
-      color: 'white'
-    }
-  },
-  solidRed: {
-    container: {
-      bg: 'energyRed.45',
-      hoverBg: 'energyRed.54',
-      activeBg: 'energyRed.60',
-      borderColor: 'energyRed.45',
-      color: 'white'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'energyRed.54',
-      activeBg: 'energyRed.60',
-      hoverBorderColor: 'transparent',
-      activeBorderColor: 'transparent',
-      color: 'white'
-    }
-  },
-  solidYellow: {
-    container: {
-      bg: 'sunflower.65',
-      hoverBg: 'sunflower.80',
-      activeBg: 'sunflower.85',
-      borderColor: 'sunflower.65',
-      color: 'sunflower.15'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'sunflower.80',
-      activeBg: 'sunflower.85',
-      hoverBorderColor: 'transparent',
-      color: 'sunflower.15'
-    }
-  },
-  solidGreen: {
-    container: {
-      bg: 'landGreen.35',
-      hoverBg: 'landGreen.41',
-      activeBg: 'landGreen.45',
-      borderColor: 'landGreen.35',
-      color: 'white'
-    },
-    button: {
-      bg: 'transparent',
-      hoverBg: 'landGreen.41',
-      activeBg: 'landGreen.45',
-      hoverBorderColor: 'transparent',
-      activeBorderColor: 'transparent',
-      color: 'white'
-    }
-  }
+  solid: variantSolid,
+  subtle: variantSubtle
 }
 
 export default {

package/src/textarea/textarea.tsx

@@ -7,7 +7,7 @@ import { getInitialCount } from './helpers'
 import { TextareaProps } from './textarea.types'
 
 const TextareaTextarea = styled.textareaBox`
-  border-radius: none;
+  border-radius: md;
   border-width: 1px;
   outline: none;
   padding: 1;

package/src/theme/components.ts

@@ -1,6 +1,5 @@
 import Accordion from '../accordion/theme'
 import Avatar from '../avatar/theme'
-import Badge from '../badge/theme'
 import Box from '../box/theme'
 import Button from '../button/theme'
 import Card from '../card/theme'
@@ -39,7 +38,6 @@ import Textarea from '../textarea/theme'
 export default {
   Accordion,
   Avatar,
-  Badge,
   Box,
   Button,
   Card,