feat: more on Typo

Author: shiftpsh

example/src/stories/Typo.stories.tsx

@@ -13,7 +13,27 @@ export default {
     variant: {
       control: {
         type: 'select',
-        options: ['description', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+        optopns: [
+          'default',
+          'description',
+          'error',
+          'info',
+          'progress',
+          'success',
+          'warn',
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'h5',
+          'h6',
+          'small',
+          'smaller',
+          'tabular',
+          'readable',
+          'no-ligatures',
+          'no-margin',
+        ],
       },
       description: 'The variant of the text',
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.0.1-alpha.25",
+  "version": "0.0.1-alpha.26",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",

src/components/Typo.tsx

@@ -10,6 +10,21 @@ const variants = {
   description: css`
     color: ${({ theme }) => theme.color.text.secondary.main};
   `,
+  error: css`
+    color: ${({ theme }) => theme.color.status.error};
+  `,
+  info: css`
+    color: ${({ theme }) => theme.color.status.info};
+  `,
+  progress: css`
+    color: ${({ theme }) => theme.color.status.progress};
+  `,
+  success: css`
+    color: ${({ theme }) => theme.color.status.success};
+  `,
+  warn: css`
+    color: ${({ theme }) => theme.color.status.warn};
+  `,
   h1: css`
     display: block;
     font-weight: 800;
@@ -84,6 +99,9 @@ const variants = {
   'no-ligatures': css`
     font-variant-ligatures: none;
   `,
+  'no-margin': css`
+    margin: 0;
+  `,
 } as const
 
 export type TypoVariant = keyof typeof variants