change theme colors

lib/components/AvatarButton.tsx

@@ -13,11 +13,11 @@ export function AvatarButton(props: IconButtonProps) {
                     width: 36,
                     p: 0,
                     "&:hover .MuiAvatar-root": {
-                        border: `2px solid ${theme.palette.grey2.main}`,
+                        border: `2px solid ${theme.palette.gray.main}`,
                     },
                     "&:active .MuiAvatar-root": {
-                        backgroundColor: theme.palette.brightPurple.main,
+                        backgroundColor: theme.palette.purple.main,
-                        color: theme.palette.brightPurple.main,
+                        color: theme.palette.purple.main,
                         border: "1px solid black",
                     }, 
                 }

lib/components/BurgerButton.tsx

@@ -19,16 +19,16 @@ export function BurgerButton({ onClick, sx, color = "white" }: Props) {
                 p: 0,
                 color,
                 "&:hover": {
-                    color: theme.palette.brightPurple.main,
+                    color: theme.palette.purple.main,
                 },
                 "&:active": {
-                    color: theme.palette.brightPurple.main,
+                    color: theme.palette.purple.main,
                 },
                 ...sx,
             }}
         >
             <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M28 8.005H3M28 16.005H3M28 24.005H3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                <path d="M28 8.005H3M28 16.005H3M28 24.005H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
             </svg>
         </IconButton>
     );

lib/components/CloseButtonSmall.tsx

@@ -16,7 +16,7 @@ export function CloseButtonSmall({ onClick, sx }: Props) {
                 height: 12,
                 width: 12,
                 p: 0,
-                color: theme.palette.brightPurple.main,
+                color: theme.palette.purple.main,
                 "&:hover": {
                     color: theme.palette.orange.main,
                 },

lib/components/LogoutButton.tsx

@@ -14,13 +14,13 @@ export function LogoutButton(props: IconButtonProps) {
                     p: 0,
                     borderRadius: "6px",
                     backgroundColor: theme.palette.background.default,
-                    color: theme.palette.grey2.main,
+                    color: theme.palette.gray.main,
                     "&:hover": {
                         color: theme.palette.background.default,
-                        backgroundColor: theme.palette.grey2.main,
+                        backgroundColor: theme.palette.gray.main,
                     },
                     "&:active": {
-                        backgroundColor: theme.palette.brightPurple.main,
+                        backgroundColor: theme.palette.purple.main,
                         color: "white",
                     },
                 }

lib/components/PenaLink.tsx

@@ -13,8 +13,8 @@ export function PenaLink(props: LinkProps) {
                     display: "flex",
                     gap: "3px",
                     textUnderlinePosition: "under",
-                    color: theme.palette.brightPurple.main,
+                    color: theme.palette.purple.main,
-                    textDecorationColor: theme.palette.brightPurple.main,
+                    textDecorationColor: theme.palette.purple.main,
                     textUnderlineOffset: "3px",
                     "&:active": {
                         color: "#FFFFFF",

lib/components/PenaTextField.tsx

@@ -87,13 +87,13 @@ export function PenaTextField({
                         height: "48px",
                         borderRadius: "8px",
                         "& fieldset": {
-                            border: `1px solid ${theme.palette.grey2.main}`,
+                            border: `1px solid ${theme.palette.gray.main}`,
                         },
                         "&:hover fieldset": {
-                            border: `1px solid ${theme.palette.grey3.main}`,
+                            border: `1px solid ${theme.palette.gray.dark}`,
                         },
                         "&.Mui-focused fieldset": {
-                            border: `2px solid ${theme.palette.brightPurple.main}`,
+                            border: `2px solid ${theme.palette.purple.main}`,
                         },
                     },
                     "& .MuiFormHelperText-root.MuiFormHelperText-contained.MuiFormHelperText-filled.Mui-error": {
@@ -109,7 +109,7 @@ export function PenaTextField({
                         borderRadius: "8px",
                         height: "48px",
                         py: 0,
-                        color: theme.palette.grey3.main,
+                        color: theme.palette.gray.dark,
                         ...placeholderFont,
                     },
                 }}

lib/components/WalletButton.tsx

@@ -19,13 +19,13 @@ export function WalletButton({ onClick, size = 36, sx }: Props) {
                 p: 0,
                 borderRadius: "6px",
                 backgroundColor: theme.palette.background.default,
-                color: theme.palette.grey2.main,
+                color: theme.palette.gray.main,
                 "&:hover": {
                     color: theme.palette.background.default,
-                    backgroundColor: theme.palette.grey2.main,
+                    backgroundColor: theme.palette.gray.main,
                 },
                 "&:active": {
-                    backgroundColor: theme.palette.brightPurple.main,
+                    backgroundColor: theme.palette.purple.main,
                     color: "white",
                 },
                 ...sx,

lib/components/theme.ts

@@ -26,34 +26,22 @@ export const penaMuiTheme = createTheme({
         background: {
             default: "#F2F3F7",
         },
-        lightPurple: {
+        purple: {
-            main: "#333647",
+            main: "#7E2AEA", // from brightPurple
+            light: "#C19AF5", // from fadePurple
         },
-        darkPurple: {
+        bg: {
-            main: "#252734",
+            main: "#333647", // from lightPurple
+            dark: "#252734", // from darkPurple
         },
-        brightPurple: {
+        gray: {
-            main: "#7E2AEA",
+            main: "#9A9AAF", // from grey2
-        },
+            dark: "#4D4D4D", // from grey3
-        fadePurple: {
-            main: "#C19AF5",
-        },
-        grey1: {
-            main: "#434657",
-        },
-        grey2: {
-            main: "#9A9AAF",
-        },
-        grey3: {
-            main: "#4D4D4D",
         },
         orange: {
             main: "#FB5607",
             light: "#FC712F",
         },
-        navbarbg: {
-            main: "#FFFFFF",
-        },
     },
     components: {
         MuiButton: {
@@ -61,8 +49,8 @@ export const penaMuiTheme = createTheme({
                 {
                     props: { variant: "pena-contained-dark" },
                     style: ({ theme }) => theme.unstable_sx({
-                        border: `1px solid ${theme.palette.brightPurple.main}`,
+                        border: `1px solid ${theme.palette.purple.main}`,
-                        backgroundColor: theme.palette.brightPurple.main,
+                        backgroundColor: theme.palette.purple.main,
                         minWidth: "180px",
                         py: "9px",
                         px: "43px",
@@ -79,7 +67,7 @@ export const penaMuiTheme = createTheme({
                         },
                         "&:active": {
                             backgroundColor: "#FFFFFF",
-                            color: theme.palette.brightPurple.main,
+                            color: theme.palette.purple.main,
                         }
                     }),
                 },
@@ -99,11 +87,11 @@ export const penaMuiTheme = createTheme({
                         textTransform: "none",
                         color: "white",
                         "&:hover": {
-                            backgroundColor: theme.palette.darkPurple.main,
+                            backgroundColor: theme.palette.bg.dark,
                         },
                         "&:active": {
-                            backgroundColor: theme.palette.brightPurple.main,
+                            backgroundColor: theme.palette.purple.main,
-                            borderColor: theme.palette.brightPurple.main,
+                            borderColor: theme.palette.purple.main,
                         }
                     }),
                 },
@@ -121,7 +109,7 @@ export const penaMuiTheme = createTheme({
                         lineHeight: "24px",
                         fontWeight: 400,
                         textTransform: "none",
-                        color: theme.palette.darkPurple.main,
+                        color: theme.palette.bg.dark,
                         "&:hover": {
                             backgroundColor: theme.palette.background.default,
                         },
@@ -159,7 +147,7 @@ export const penaMuiTheme = createTheme({
                 {
                     props: { variant: "pena-outlined-purple" },
                     style: ({ theme }) => theme.unstable_sx({
-                        border: `1px solid ${theme.palette.brightPurple.main}`,
+                        border: `1px solid ${theme.palette.purple.main}`,
                         backgroundColor: "rgb(0 0 0 / 0)",
                         minWidth: "180px",
                         py: "9px",
@@ -170,7 +158,7 @@ export const penaMuiTheme = createTheme({
                         lineHeight: "24px",
                         fontWeight: 400,
                         textTransform: "none",
-                        color: theme.palette.brightPurple.main,
+                        color: theme.palette.purple.main,
                         "&:hover": {
                             backgroundColor: theme.palette.background.default,
                         },
@@ -212,10 +200,10 @@ export const penaMuiTheme = createTheme({
                         textTransform: "none",
                         color: "black",
                         "&:hover": {
-                            color: theme.palette.brightPurple.main,
+                            color: theme.palette.purple.main,
                         },
                         "&:active": {
-                            color: theme.palette.brightPurple.main,
+                            color: theme.palette.purple.main,
                         }
                     }),
                 },
@@ -268,7 +256,7 @@ export const penaMuiTheme = createTheme({
             fontWeight: 500,
             fontSize: "20px",
             lineHeight: "24px",
-            color: palette.grey3.main,
+            color: palette.gray.dark,
         },
         oldPrice: {
             fontWeight: 400,
@@ -306,26 +294,16 @@ declare module '@mui/material/Button' {
 
 declare module "@mui/material/styles" {
     interface Palette {
-        lightPurple: Palette["primary"],
+        purple: Palette["primary"],
-        darkPurple: Palette["primary"],
+        bg: Palette["primary"],
-        brightPurple: Palette["primary"],
+        gray: Palette["primary"],
-        fadePurple: Palette["primary"],
-        grey1: Palette["primary"],
-        grey2: Palette["primary"],
-        grey3: Palette["primary"],
         orange: Palette["primary"],
-        navbarbg: Palette["primary"],
     }
     interface PaletteOptions {
-        lightPurple?: PaletteOptions["primary"],
+        purple?: PaletteOptions["primary"],
-        darkPurple?: PaletteOptions["primary"],
+        bg?: PaletteOptions["primary"],
-        brightPurple?: PaletteOptions["primary"],
+        gray?: PaletteOptions["primary"],
-        fadePurple?: PaletteOptions["primary"],
-        grey1?: PaletteOptions["primary"],
-        grey2?: PaletteOptions["primary"],
-        grey3?: PaletteOptions["primary"],
         orange?: PaletteOptions["primary"],
-        navbarbg?: PaletteOptions["primary"],
     }
     interface TypographyVariants {
         infographic: React.CSSProperties;

src/App.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Container, useTheme } from "@mui/material";
+import { Box, Button, Container, Typography, useTheme } from "@mui/material";
 import { PenaLink } from "../lib/components/PenaLink";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
@@ -16,7 +16,7 @@ export function App() {
 
     return (
         <Box sx={{
-            backgroundColor: theme.palette.lightPurple.main,
+            backgroundColor: theme.palette.bg.main,
             minHeight: "100dvh",
             width: "100%",
         }}>
@@ -28,6 +28,7 @@ export function App() {
                 alignItems: "start",
                 color: "white",
             }}>
+                <Typography variant="h4">Components</Typography>
                 <ComponentWithCode
                     code={`<Button variant="pena-contained-dark">Подробнее</Button>`}
                     element={<Button variant="pena-contained-dark">Подробнее</Button>}
@@ -88,6 +89,60 @@ export function App() {
                     code={`<BurgerButton />`}
                     element={<BurgerButton />}
                 />
+                <Typography variant="h4">Colors</Typography>
+                <Typography variant="body2">Click text to copy</Typography>
+                <Box sx={{
+                    width: "100%",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 1,
+                }}>
+                    <ColorShowcase
+                        color={theme.palette.purple.main}
+                        text1="theme.palette.purple.main"
+                        text2="#7E2AEA"
+                    />
+                    <ColorShowcase
+                        color={theme.palette.purple.light}
+                        text1="theme.palette.purple.light"
+                        text2="#C19AF5"
+                    />
+                    <ColorShowcase
+                        color={theme.palette.background.default}
+                        text1="theme.palette.background.default"
+                        text2="#F2F3F7"
+                    />
+                    <ColorShowcase
+                        color={theme.palette.bg.main}
+                        text1="theme.palette.bg.main"
+                        text2="#333647"
+                    />
+                    <ColorShowcase
+                        color={theme.palette.bg.dark}
+                        text1="theme.palette.bg.dark"
+                        text2="#252734"
+                    />
+                    <ColorShowcase
+                        color={theme.palette.gray.main}
+                        text1="theme.palette.gray.main"
+                        text2="#9A9AAF"
+                    />
+                    <ColorShowcase
+                        color={theme.palette.gray.dark}
+                        text1="theme.palette.gray.dark"
+                        text2="#4D4D4D"
+                    />
+                    <ColorShowcase
+                        color={theme.palette.orange.main}
+                        text1="theme.palette.orange.main"
+                        text2="#FB5607"
+                    />
+                    <ColorShowcase
+                        color={theme.palette.orange.light}
+                        text1="theme.palette.orange.light"
+                        text2="#FC712F"
+                    />
+                </Box>
             </Container>
         </Box>
     );
@@ -120,3 +175,37 @@ function ComponentWithCode({ code, element }: {
         </Box>
     );
 }
+
+function ColorShowcase({ color, text1, text2 }: {
+    text1: string;
+    text2: string;
+    color: string;
+}) {
+
+    return (
+        <Box sx={{
+            backgroundColor: color,
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            maxWidth: "350px",
+            p: 2,
+            gap: 1,
+            border: "1px solid white",
+            overflow: "hidden",
+        }}>
+            <Typography
+                onClick={() => navigator.clipboard.writeText(text1)}
+                sx={{
+                    textShadow: "0 0 6px black",
+                }}
+            >{text1}</Typography>
+            <Typography
+                onClick={() => navigator.clipboard.writeText(text2)}
+                sx={{
+                    textShadow: "0 0 6px black",
+                }}
+            >{text2}</Typography>
+        </Box>
+    );
+}