feat(system): improve typography components

packages/status-react/src/system/heading/heading.tsx

@@ -4,11 +4,21 @@ import type React from 'react'
 
 const Heading = styled('div', {
   fontFamily: theme.fonts.sans,
-  fontSize: '17px',
 
   variants: {
-    size: {},
+    size: {
-    color: {},
+      15: {
+        fontSize: '15px',
+      },
+      17: {
+        fontSize: '17px',
+      },
+    },
+    color: {
+      accent: {
+        color: '$accent-1',
+      },
+    },
     weight: {
       '400': {
         fontWeight: theme.fontWeights[400],
@@ -55,6 +65,9 @@ const Heading = styled('div', {
 
   defaultVariants: {
     align: 'left',
+    color: 'accent',
+    weight: '500',
+    size: '17',
   },
 
   // compoundVariants: {},

packages/status-react/src/system/text/text.tsx

@@ -13,13 +13,25 @@ const Text = styled('div', {
       '12': {
         fontSize: '12px',
       },
+      '13': {
+        fontSize: '13px',
+      },
       '14': {
         fontSize: '14px',
       },
+      '15': {
+        fontSize: '15px',
+      },
     },
     color: {
+      accent: {
+        color: '$accent-1',
+      },
+      primary: {
+        color: '$primary-1',
+      },
       gray: {
-        color: '#939BA1',
+        color: '$gray-1',
       },
     },
     weight: {
@@ -70,6 +82,7 @@ const Text = styled('div', {
   defaultVariants: {
     align: 'left',
     weight: '400',
+    color: 'accent',
   },
 
   // compoundVariants: {},