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

fix theme colors

Browse Source
This commit is contained in:
nflnkr 2023-08-24 15:44:51 +03:00
parent 732004c45d
commit 23d41d5ff0
10 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/components/AvatarButton.tsx
View File

@ -23,8 +23,8 @@ export function AvatarButton(props: Props) {
border: `2px solid ${theme.palette.gray.main}`, border: `2px solid ${theme.palette.gray.main}`,
}, },
"&:active .MuiAvatar-root": { "&:active .MuiAvatar-root": {
backgroundColor: theme.palette.purple.dark, backgroundColor: theme.palette.purple.main,
color: theme.palette.purple.dark, color: theme.palette.purple.main,
border: "1px solid black", border: "1px solid black",
}, },
} }

4
lib/components/BurgerButton.tsx
View File

@ -14,11 +14,11 @@ export function BurgerButton(props: IconButtonProps) {
p: 0, p: 0,
color: "black", color: "black",
"&:hover": { "&:hover": {
color: theme.palette.purple.dark, color: theme.palette.purple.main,
backgroundColor: "rgb(0 0 0 / 0)", backgroundColor: "rgb(0 0 0 / 0)",
}, },
"&:active": { "&:active": {
color: theme.palette.purple.dark, color: theme.palette.purple.main,
}, },
}, },
}, props)} }, props)}

2
lib/components/CloseButtonSmall.tsx
View File

@ -12,7 +12,7 @@ export function CloseButtonSmall(props: IconButtonProps) {
height: 12, height: 12,
width: 12, width: 12,
p: 0, p: 0,
color: theme.palette.purple.dark, color: theme.palette.purple.main,
"&:hover": { "&:hover": {
color: theme.palette.orange.main, color: theme.palette.orange.main,
backgroundColor: "rgb(0 0 0 / 0)", backgroundColor: "rgb(0 0 0 / 0)",

2
lib/components/LogoutButton.tsx
View File

@ -20,7 +20,7 @@ export function LogoutButton(props: IconButtonProps) {
backgroundColor: theme.palette.gray.main, backgroundColor: theme.palette.gray.main,
}, },
"&:active": { "&:active": {
backgroundColor: theme.palette.purple.dark, backgroundColor: theme.palette.purple.main,
color: "white", color: "white",
}, },
} }

6
lib/components/PenaLink.tsx
View File

@ -14,11 +14,11 @@ export const PenaLink: OverridableComponent<LinkTypeMap<object, "a">> = (props:
display: "flex", display: "flex",
gap: "3px", gap: "3px",
textUnderlinePosition: "under", textUnderlinePosition: "under",
color: theme.palette.purple.main, color: theme.palette.purple.light,
textDecorationColor: theme.palette.purple.dark, textDecorationColor: theme.palette.purple.main,
textUnderlineOffset: "2px", textUnderlineOffset: "2px",
"&:hover": { "&:hover": {
textDecorationColor: theme.palette.purple.main, textDecorationColor: theme.palette.purple.light,
}, },
"&:active": { "&:active": {
color: "white", color: "white",

2
lib/components/PenaTextField.tsx
View File

@ -93,7 +93,7 @@ export function PenaTextField({
border: `1px solid ${theme.palette.gray.dark}`, border: `1px solid ${theme.palette.gray.dark}`,
}, },
"&.Mui-focused fieldset": { "&.Mui-focused fieldset": {
border: `2px solid ${theme.palette.purple.dark}`, border: `2px solid ${theme.palette.purple.main}`,
}, },
}, },
"& .MuiFormHelperText-root.MuiFormHelperText-contained.MuiFormHelperText-filled.Mui-error": { "& .MuiFormHelperText-root.MuiFormHelperText-contained.MuiFormHelperText-filled.Mui-error": {

2
lib/components/WalletButton.tsx
View File

@ -27,7 +27,7 @@ export function WalletButton(props: Props) {
backgroundColor: theme.palette.gray.main, backgroundColor: theme.palette.gray.main,
}, },
"&:active": { "&:active": {
backgroundColor: theme.palette.purple.dark, backgroundColor: theme.palette.purple.main,
color: "white", color: "white",
}, },
}, },

40
lib/components/theme.ts
View File

@ -27,17 +27,17 @@ export const penaMuiTheme = createTheme({
default: "#F2F3F7", default: "#F2F3F7",
}, },
purple: { purple: {
main: "#944FEE", main: "#7E2AEA",
dark: "#7E2AEA", // from brightPurple -> from purple.main dark: "#581CA7",
light: "#C19AF5", // from fadePurple light: "#944FEE",
}, },
bg: { bg: {
main: "#333647", // from lightPurple/navbarbg.main main: "#333647",
dark: "#252734", // from darkPurple dark: "#252734",
}, },
gray: { gray: {
main: "#9A9AAF", // from grey2 main: "#9A9AAF",
dark: "#4D4D4D", // from grey3 dark: "#4D4D4D",
}, },
orange: { orange: {
main: "#FB5607", main: "#FB5607",
@ -50,8 +50,8 @@ export const penaMuiTheme = createTheme({
{ {
props: { variant: "pena-contained-dark" }, props: { variant: "pena-contained-dark" },
style: ({ theme }) => theme.unstable_sx({ style: ({ theme }) => theme.unstable_sx({
border: `1px solid ${theme.palette.purple.dark}`, border: `1px solid ${theme.palette.purple.main}`,
backgroundColor: theme.palette.purple.dark, backgroundColor: theme.palette.purple.main,
minWidth: "180px", minWidth: "180px",
py: "9px", py: "9px",
px: "43px", px: "43px",
@ -63,12 +63,12 @@ export const penaMuiTheme = createTheme({
textTransform: "none", textTransform: "none",
color: "white", color: "white",
"&:hover": { "&:hover": {
backgroundColor: theme.palette.purple.main, backgroundColor: theme.palette.purple.light,
border: `1px solid ${theme.palette.purple.main}`, border: `1px solid ${theme.palette.purple.light}`,
}, },
"&:active": { "&:active": {
backgroundColor: "#FFFFFF", backgroundColor: "#FFFFFF",
color: theme.palette.purple.dark, color: theme.palette.purple.main,
} }
}), }),
}, },
@ -91,8 +91,8 @@ export const penaMuiTheme = createTheme({
backgroundColor: theme.palette.bg.dark, backgroundColor: theme.palette.bg.dark,
}, },
"&:active": { "&:active": {
backgroundColor: theme.palette.purple.dark, backgroundColor: theme.palette.purple.main,
borderColor: theme.palette.purple.dark, borderColor: theme.palette.purple.main,
} }
}), }),
}, },
@ -149,7 +149,7 @@ export const penaMuiTheme = createTheme({
{ {
props: { variant: "pena-outlined-purple" }, props: { variant: "pena-outlined-purple" },
style: ({ theme }) => theme.unstable_sx({ style: ({ theme }) => theme.unstable_sx({
border: `1px solid ${theme.palette.purple.dark}`, border: `1px solid ${theme.palette.purple.main}`,
backgroundColor: "rgb(0 0 0 / 0)", backgroundColor: "rgb(0 0 0 / 0)",
minWidth: "180px", minWidth: "180px",
py: "9px", py: "9px",
@ -160,7 +160,7 @@ export const penaMuiTheme = createTheme({
lineHeight: "24px", lineHeight: "24px",
fontWeight: 400, fontWeight: 400,
textTransform: "none", textTransform: "none",
color: theme.palette.purple.dark, color: theme.palette.purple.main,
"&:hover": { "&:hover": {
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
}, },
@ -183,11 +183,11 @@ export const penaMuiTheme = createTheme({
textTransform: "none", textTransform: "none",
color: "white", color: "white",
"&:hover": { "&:hover": {
color: theme.palette.purple.main, color: theme.palette.purple.light,
backgroundColor: "rgb(0 0 0 / 0)", backgroundColor: "rgb(0 0 0 / 0)",
}, },
"&:active": { "&:active": {
color: theme.palette.purple.main, color: theme.palette.purple.light,
} }
}), }),
}, },
@ -203,11 +203,11 @@ export const penaMuiTheme = createTheme({
textTransform: "none", textTransform: "none",
color: "black", color: "black",
"&:hover": { "&:hover": {
color: theme.palette.purple.dark, color: theme.palette.purple.main,
backgroundColor: "rgb(0 0 0 / 0)", backgroundColor: "rgb(0 0 0 / 0)",
}, },
"&:active": { "&:active": {
color: theme.palette.purple.dark, color: theme.palette.purple.main,
} }
}), }),
}, },

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@frontend/kitui", "name": "@frontend/kitui",
"version": "1.0.36", "version": "1.0.37",
"description": "test", "description": "test",
"main": "./dist/index.js", "main": "./dist/index.js",
"module": "./dist/index.js", "module": "./dist/index.js",

14
src/App.tsx
View File

@ -97,20 +97,20 @@ export function App() {
flexWrap: "wrap", flexWrap: "wrap",
gap: 1, gap: 1,
}}> }}>
<ColorShowcase
color={theme.palette.purple.light}
text1="theme.palette.purple.light"
text2="#944FEE"
/>
<ColorShowcase <ColorShowcase
color={theme.palette.purple.main} color={theme.palette.purple.main}
text1="theme.palette.purple.main" text1="theme.palette.purple.main"
text2="#944FEE" text2="#7E2AEA"
/> />
<ColorShowcase <ColorShowcase
color={theme.palette.purple.dark} color={theme.palette.purple.dark}
text1="theme.palette.purple.dark" text1="theme.palette.purple.dark"
text2="#7E2AEA" text2="#581CA7"
/>
<ColorShowcase
color={theme.palette.purple.light}
text1="theme.palette.purple.light"
text2="#C19AF5"
/> />
<ColorShowcase <ColorShowcase
color={theme.palette.background.default} color={theme.palette.background.default}