From 26e4f0d91e97f77ffb1d3639d12e0b9e94e15851 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Fri, 18 Mar 2022 19:14:30 +0100
Subject: [PATCH] feat(system): improve typography components

---
 .../src/system/heading/heading.tsx            | 19 ++++++++++++++++---
 .../status-react/src/system/text/text.tsx     | 15 ++++++++++++++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/status-react/src/system/heading/heading.tsx b/packages/status-react/src/system/heading/heading.tsx
index 1c754259..3b6ba88f 100644
--- a/packages/status-react/src/system/heading/heading.tsx
+++ b/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: {},
-    color: {},
+    size: {
+      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: {},
diff --git a/packages/status-react/src/system/text/text.tsx b/packages/status-react/src/system/text/text.tsx
index e78d19f2..40925af6 100644
--- a/packages/status-react/src/system/text/text.tsx
+++ b/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: {},