Add error color

src/components/layout/ButtonLink/index.jsx

@@ -10,7 +10,7 @@ type Props = {
   type: 'button' | 'submit' | 'reset',
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
   weight?: 'light' | 'regular' | 'bolder' | 'bold',
-  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled' | 'error',
   testId?: string,
 }
 

src/components/layout/ButtonLink/index.scss

@@ -74,6 +74,10 @@
   color: $disabled;
 }
 
+.error {
+  color: $error;
+}
+
 .white {
   color: white;
 }

src/components/layout/Heading/index.jsx

@@ -11,7 +11,7 @@ type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4';
 type Props = {
   align?: 'left' | 'center' | 'right',
   margin?: 'sm' | 'md' | 'lg' | 'xl',
-  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled' | 'error',
   tag: HeadingTag,
   truncate?: boolean,
   children: React.Node,

src/components/layout/Heading/index.scss

@@ -95,6 +95,10 @@
   color: $disabled;
 }
 
+.error {
+  color: $error;
+}
+
 .white {
   color: white;
 }

src/components/layout/Paragraph/index.jsx

@@ -11,7 +11,7 @@ type Props = {
   noPadding?: boolean,
   weight?: 'light' | 'regular' | 'bolder' | 'bold',
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
-  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled' | 'error',
   transform?: 'capitalize' | 'lowercase' | 'uppercase',
   children: React.Node,
   dot?: boolean,

src/components/layout/Paragraph/index.scss

@@ -35,6 +35,10 @@
   color: $disabled;
 }
 
+.error {
+  color: $error;
+}
+
 .white {
   color: white;
 }

src/theme/mui.js

@@ -7,6 +7,7 @@ import {
   disabled,
   primary,
   secondary,
+  error,
   md,
   lg,
   bolderFont,
@@ -27,7 +28,7 @@ const palette = {
     main: secondary,
   },
   error: {
-    main: '#FB4F62',
+    main: error,
   },
   contrastThreshold: 3,
   tonalOffset: 0.2,

src/theme/variables.js

@@ -7,6 +7,7 @@ const tertiary = '#f6f9fc'
 const fontColor = '#4a5579'
 const fancyColor = '#fd7890'
 const warningColor = '#ffc05f'
+const errorColor = '#fb4f62'
 const connectedColor = '#00c4c4'
 const disabled = '#65707e'
 const xs = '4px'
@@ -28,6 +29,7 @@ module.exports = Object.assign(
     fontColor,
     fancy: fancyColor,
     warning: warningColor,
+    error: errorColor,
     connected: connectedColor,
     xs,
     sm,