Merge pull request #32 from BinaryStudioAcademy/task/OV-10-business-s…

…tyles OV-10: + colors and typography
BinaryStudioAcademy · Aug 21, 2024 · 1f44fca · 1f44fca
2 parents 5eed89c + 78518d0
commit 1f44fca
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 3 deletions.
diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts
@@ -7,9 +7,8 @@ const colors = {
         50: '#e2e1ec',
     },
     brand: {
-        900: '#1a365d',
-        200: '#b3e0ff',
         secondary: {
+            50: '#3BAF28',
             300: '#ff6e1c',
             600: '#eb5500',
             900: '#e13b00',

diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
@@ -3,7 +3,55 @@ import { colors } from './colors.styles.js';
 const components = {
     Heading: {
         baseStyle: {
-            color: colors.text.accent,
+            color: colors.white,
+            fontFamily: 'Poppins, sans-serif',
+            textAlign: 'left',
+        },
+        variants: {
+            H1: {
+                fontSize: '54px',
+                fontWeight: '600',
+                lineHeight: '64px',
+            },
+            H2: {
+                fontSize: '30px',
+                fontWeight: '600',
+                lineHeight: '32px',
+            },
+            H3: {
+                fontSize: '18px',
+                fontWeight: '700',
+                lineHeight: '27px',
+            },
+        },
+    },
+    Text: {
+        baseStyle: {
+            color: colors.white,
+            fontFamily: 'Poppins, sans-serif',
+            textAlign: 'left',
+        },
+        variants: {
+            body1: {
+                fontSize: '16px',
+                fontWeight: '500',
+                lineHeight: '22px',
+            },
+            bodySmall: {
+                fontSize: '14px',
+                fontWeight: '400',
+                lineHeight: '20px',
+            },
+            caption: {
+                fontSize: '12px',
+                fontWeight: '400',
+                lineHeight: '16px',
+            },
+            button: {
+                fontSize: '14px',
+                fontWeight: '600',
+                lineHeight: '16px',
+            },
         },
     },
     Button: {