feat(color): Add orange30 to the color palette (#570)

Co-authored-by: Huyen Nguyen <[email protected]>

Author: krasnoff

src/color-system/color-system.tsx

@@ -62,6 +62,7 @@ export const AllPalettes = (): JSX.Element => {
 			<Palette colors={getPaletteByColorName("blue")} />
 			<Palette colors={getPaletteByColorName("green")} />
 			<Palette colors={getPaletteByColorName("red")} />
+			<Palette colors={getPaletteByColorName("orange")} />
 		</>
 	);
 };

src/colors.css

@@ -47,6 +47,8 @@
 	--red70: #a94442;
 	--red80: #f82153;
 	--red90: #850000;
+
+	--orange30: #eda971;
 }
 
 /* Export the variables in order to use them on the Color System Storybook page */
@@ -93,6 +95,8 @@
 	--red70: var(--red70);
 	--red80: var(--red80);
 	--red90: var(--red90);
+
+	--orange30: var(--orange30);
 }
 
 .light-palette {

tailwind.config.js

@@ -78,6 +78,9 @@ module.exports = {
 					800: "var(--red80)",
 					900: "var(--red90)",
 				},
+				orange: {
+					300: "var(--orange30)",
+				},
 			},
 			borderWidth: {
 				1: "1px",