fix(tag): styles and theme fixes (#220)

Co-authored-by: Thrasos Kafasis <[email protected]>

src/components/Tag/__snapshots__/Tag.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Tag /> matches snapshot 1`] = `
 <div>
   <span
-    class="tag css-r7er4p-tag-tag"
+    class="tag css-xorq2n-tag-tag"
     id="tag-1"
     style="background-color: purple; color: white;"
   >

src/components/Tag/styles.ts

@@ -3,8 +3,11 @@ import { css, Theme, SerializedStyles } from "@emotion/react";
 export const tag = ({ typeScaleSizes, tag }: Theme): SerializedStyles => css`
   display: inline-flex;
   align-items: center;
-  font-size: ${typeScaleSizes.xs};
-  padding: 0.5rem 0.75rem 0.4rem;
+  font-size: ${typeScaleSizes.sm};
+  line-height: normal;
+  padding: 0.5rem;
   background-color: ${tag.backgroundColor};
   color: ${tag.color};
+  border-radius: 5px;
+  white-space: nowrap;
 `;

src/theme/default/config/tag.ts

@@ -1,6 +1,7 @@
+import Color from "color";
 import { colors } from "../colors";
 
 export default {
-  backgroundColor: colors.primary.lightest,
-  color: colors.white,
+  backgroundColor: Color(colors.primary.lightest).alpha(0.25).string(),
+  color: colors.primary.base,
 };