PenaSide/UIKit
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

change theme colors

Browse Source
This commit is contained in:
nflnkr 2023-08-21 16:37:25 +03:00
parent 0fadd8fc76
commit 77a9346b5a
9 changed files with 137 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/components/AvatarButton.tsx
View File

@ -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,
color: theme.palette.brightPurple.main,
backgroundColor: theme.palette.purple.main,
color: theme.palette.purple.main,
border: "1px solid black",
},
}

6
lib/components/BurgerButton.tsx
View File

@ -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>
);

2
lib/components/CloseButtonSmall.tsx
View File

@ -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,
},

6
lib/components/LogoutButton.tsx
View File

@ -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",
},
}

4
lib/components/PenaLink.tsx
View File

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

8
lib/components/PenaTextField.tsx
View File

@ -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,
},
}}

6
lib/components/WalletButton.tsx
View File

@ -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,

76
lib/components/theme.ts
View File

@ -26,34 +26,22 @@ export const penaMuiTheme = createTheme({
background: {
default: "#F2F3F7",
},
lightPurple: {
main: "#333647",
purple: {
main: "#7E2AEA", // from brightPurple
light: "#C19AF5", // from fadePurple
},
darkPurple: {
main: "#252734",
bg: {
main: "#333647", // from lightPurple
dark: "#252734", // from darkPurple
},
brightPurple: {
main: "#7E2AEA",
},
fadePurple: {
main: "#C19AF5",
},
grey1: {
main: "#434657",
},
grey2: {
main: "#9A9AAF",
},
grey3: {
main: "#4D4D4D",
gray: {
main: "#9A9AAF", // from grey2
dark: "#4D4D4D", // from grey3
},
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}`,
backgroundColor: theme.palette.brightPurple.main,
border: `1px solid ${theme.palette.purple.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,
borderColor: theme.palette.brightPurple.main,
backgroundColor: theme.palette.purple.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"],
darkPurple: Palette["primary"],
brightPurple: Palette["primary"],
fadePurple: Palette["primary"],
grey1: Palette["primary"],
grey2: Palette["primary"],
grey3: Palette["primary"],
purple: Palette["primary"],
bg: Palette["primary"],
gray: Palette["primary"],
orange: Palette["primary"],
navbarbg: Palette["primary"],
}
interface PaletteOptions {
lightPurple?: PaletteOptions["primary"],
darkPurple?: PaletteOptions["primary"],
brightPurple?: PaletteOptions["primary"],
fadePurple?: PaletteOptions["primary"],
grey1?: PaletteOptions["primary"],
grey2?: PaletteOptions["primary"],
grey3?: PaletteOptions["primary"],
purple?: PaletteOptions["primary"],
bg?: PaletteOptions["primary"],
gray?: PaletteOptions["primary"],
orange?: PaletteOptions["primary"],
navbarbg?: PaletteOptions["primary"],
}
interface TypographyVariants {
infographic: React.CSSProperties;

93
src/App.tsx
View File

@ -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>
);
}