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}`,
},
"&:active .MuiAvatar-root": {
backgroundColor: theme.palette.purple.dark,
color: theme.palette.purple.dark,
backgroundColor: theme.palette.purple.main,
color: theme.palette.purple.main,
border: "1px solid black",
},
}

4
lib/components/BurgerButton.tsx
View File

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

2
lib/components/CloseButtonSmall.tsx
View File

@ -12,7 +12,7 @@ export function CloseButtonSmall(props: IconButtonProps) {
height: 12,
width: 12,
p: 0,
color: theme.palette.purple.dark,
color: theme.palette.purple.main,
"&:hover": {
color: theme.palette.orange.main,
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,
},
"&:active": {
backgroundColor: theme.palette.purple.dark,
backgroundColor: theme.palette.purple.main,
color: "white",
},
}

6
lib/components/PenaLink.tsx
View File

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

2
lib/components/PenaTextField.tsx
View File

@ -93,7 +93,7 @@ export function PenaTextField({
border: `1px solid ${theme.palette.gray.dark}`,
},
"&.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": {

2
lib/components/WalletButton.tsx
View File

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

40
lib/components/theme.ts
View File

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

2
package.json
View File

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

14
src/App.tsx
View File

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