@veracity/vui 1.9.1 → 2.0.0

package/src/tag/theme.ts

@@ -1,87 +1,27 @@
-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: 'subtle'
+  variant: 'subtleBlue'
 }
 
 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',
@@ -89,7 +29,7 @@ const sizes = {
       spaceX: 4
     },
     button: {
-      size: 'xs'
+      size: 'sm'
     },
     icon: {
       size: 'xs'
@@ -102,7 +42,7 @@ const sizes = {
       spaceX: 6
     },
     button: {
-      size: 'xs'
+      size: 'sm'
     },
     icon: {
       size: 'sm'
@@ -115,7 +55,7 @@ const sizes = {
       spaceX: 8
     },
     button: {
-      size: 'sm'
+      size: 'md'
     },
     icon: {
       size: 'md'
@@ -124,8 +64,171 @@ const sizes = {
 }
 
 const variants = {
-  solid: variantSolid,
-  subtle: variantSubtle
+  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'
+    }
+  }
 }
 
 export default {

package/src/textarea/textarea.tsx

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

package/src/theme/components.ts

@@ -1,5 +1,6 @@
 import Accordion from '../accordion/theme'
 import Avatar from '../avatar/theme'
+import Badge from '../badge/theme'
 import Box from '../box/theme'
 import Breadcrumbs from '../breadcrumbs/theme'
 import Button from '../button/theme'
@@ -41,6 +42,7 @@ import Textarea from '../textarea/theme'
 export default {
   Accordion,
   Avatar,
+  Badge,
   Box,
   Breadcrumbs,
   Button,