Add tag styling to theme (#133)

* Add brand colors to theme * add default tag styles * lint and move tags
uwblueprint · Feb 8, 2022 · 76a4d60 · 76a4d60
1 parent e6caea1
commit 76a4d60
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/frontend/src/components/pages/Default.tsx b/frontend/src/components/pages/Default.tsx
@@ -121,7 +121,7 @@ const DesignSystemDisplay = () => {
           },
         ].map((style, index) => (
           <Tag
-            bg={style.backgroundColor}
+            bgColor={style.backgroundColor}
             color={style.textColor}
             size="lg"
             key={index}
@@ -196,6 +196,9 @@ const DesignSystemDisplay = () => {
       <ChakraButton variant="link" isDisabled>
         Link Disabled
       </ChakraButton>
+      <br />
+      <Tag>Default Tag</Tag>
+      <Tag variant="outline">Outline Tag</Tag>
       <Tabs>
         <TabList>
           <Tab>Tab 1</Tab>

diff --git a/frontend/src/theme/index.ts b/frontend/src/theme/index.ts
@@ -122,6 +122,22 @@ const customTheme = extendTheme(
             textStyle: "caption",
           },
         },
+        variants: {
+          subtle: {
+            container: {
+              backgroundColor: "green.light",
+              color: "green.dark",
+              borderRadius: "full",
+            },
+          },
+          outline: {
+            container: {
+              color: "text.gray",
+              boxShadow: `inset 0 0 0px 1px ${colors.text.gray}`,
+              borderRadius: "full",
+            },
+          },
+        },
       },
       Button: {
         baseStyle: {