fix: Improve tag/badge style (#173)

packages/fuselage/src/components/Tag/index.js

@@ -6,12 +6,14 @@ import { Box } from '../..';
 export function Tag({
   variant = 'secondary',
   disabled,
+  textStyle = 'micro',
   round,
   onClick,
   ...props
 }) {
   return <Box
     is='div'
+    textStyle={textStyle}
     componentClassName='rcx-tag'
     mod-secondary={variant === 'secondary'}
     mod-primary={variant === 'primary'}
@@ -25,6 +27,10 @@ export function Tag({
 }
 
 Tag.propTypes = {
+  textStyle: PropTypes.oneOf([
+    'h1', 's1', 's2', 'p1', 'p2', 'c1', 'c2', 'micro', 'mono',
+    'headline', 'subtitle', 'paragraph', 'caption',
+  ]),
   variant: PropTypes.oneOf(['secondary', 'primary', 'danger']),
   round: PropTypes.bool,
   disabled: PropTypes.bool,

packages/fuselage/src/components/Tag/styles.scss

@@ -11,8 +11,6 @@
 
   border-radius: $spaces-x4;
 
-  @include use-text-style(micro);
-
   &--secondary {
     color: $colors-b500;
     background-color: $colors-b100;