applied figma styles, closes #851

src/theme/colors.ts

@@ -292,7 +292,9 @@ export const colors = {
       },
     },
   },
-
+  tag: {
+    border: colorsBase.gray.light,
+  },
   radio: {
     bg: colorsBase.primary,
     border: colorsBase.primary,

src/theme/components/tag.ts

@@ -0,0 +1,15 @@
+import { tagAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(tagAnatomy.keys)
+
+const baseStyle = definePartsStyle({
+  container: {
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: 'tag.border',
+    width: 'fit-content',
+  },
+})
+
+export const Tag = defineMultiStyleConfig({ baseStyle })

src/theme/index.ts

@@ -23,6 +23,7 @@ import { Text } from './components/text'
 import { Textarea } from './components/textarea'
 import { editor } from './editor'
 import { spacing } from './space'
+import { Tag } from './components/tag'
 
 export const theme = extendTheme(vtheme, {
   config: {
@@ -95,6 +96,7 @@ export const theme = extendTheme(vtheme, {
     Radio,
     Stepper,
     Tabs,
+    Tag,
     Text,
     Textarea,
   },