fix: rename red palette to magenta and add true red palette

- Renamed existing red palette to magenta (pinkish-red hues)
- Created new red palette based on #F91313 (notification error color)
- Updated palette.ts to use magenta for error backgrounds
- New red palette provides true red colors for error states

Resolves #602

Signed-off-by: Jeet Burman <[email protected]>

Author: jeetburman

src/theme/colors/colors.ts

@@ -154,7 +154,7 @@ export const yellow = {
   10: '#663A00'
 };
 
-export const red = {
+export const magenta = {
   70: '#FFF0F0',
   60: '#FFB3B9',
   50: '#FF6179',
@@ -164,6 +164,16 @@ export const red = {
   10: '#660624'
 };
 
+export const red = {
+  70: '#FFE6E6',
+  60: '#FFADAD',
+  50: '#FF7070',
+  40: '#F91313',
+  30: '#CC0F0F',
+  20: '#8C0A0A',
+  10: '#660707'
+};
+
 export const redOrange = {
   70: '#E8BEB3',
   60: '#E1A999',

src/theme/colors/index.ts

@@ -61,6 +61,7 @@ export {
   green,
   jungleGreen,
   keppel,
+  magenta,
   notificationColors,
   patternsBlue,
   primaryColor,

src/theme/palette.ts

@@ -381,11 +381,11 @@ export const lightModePalette: PaletteOptions = {
       tertiary: Colors.yellow[70]
     },
     error: {
-      default: Colors.red[30],
-      hover: Colors.red[20],
-      pressed: Colors.red[10],
-      secondary: Colors.red[60],
-      tertiary: Colors.red[70]
+      default: Colors.magenta[30],
+      hover: Colors.magenta[20],
+      pressed: Colors.magenta[10],
+      secondary: Colors.magenta[60],
+      tertiary: Colors.magenta[70]
     },
     code: Colors.charcoal[90],
 
@@ -406,7 +406,7 @@ export const lightModePalette: PaletteOptions = {
     info: Colors.blue[40],
     success: Colors.green[30],
     warning: Colors.yellow[30],
-    error: Colors.red[30],
+    error: Colors.magenta[30],
     neutral: {
       default: Colors.charcoal[40],
       alt: Colors.charcoal[40]
@@ -543,11 +543,11 @@ export const darkModePalette: PaletteOptions = {
       tertiary: Colors.yellow[10]
     },
     error: {
-      default: Colors.red[40],
-      hover: Colors.red[50],
-      pressed: Colors.red[60],
-      secondary: Colors.red[20],
-      tertiary: Colors.red[10]
+      default: Colors.magenta[40],
+      hover: Colors.magenta[50],
+      pressed: Colors.magenta[60],
+      secondary: Colors.magenta[20],
+      tertiary: Colors.magenta[10]
     },
     code: Colors.charcoal[10],
     constant: {
@@ -567,7 +567,7 @@ export const darkModePalette: PaletteOptions = {
     info: Colors.blue[40],
     success: Colors.green[40],
     warning: Colors.yellow[40],
-    error: Colors.red[40],
+    error: Colors.magenta[40],
     neutral: {
       default: Colors.accentGrey[100],
       alt: Colors.keppel[40]