Skip to content

Commit

Permalink
refactor: rename ConnectModal style token name
Browse files Browse the repository at this point in the history
  • Loading branch information
tingzhao.ytz committed Feb 7, 2025
1 parent 3320a45 commit 3ed7f2c
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 43 deletions.
3 changes: 2 additions & 1 deletion docs/guide/demos/custom-token-web3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@ const App: React.FC = () => {
theme={{
web3Components: {
ConnectModal: {
hoverBg: 'green',
walletGroupTextColor: 'red',
descriptionColor: 'blue',
},
},
}}
Expand Down
81 changes: 39 additions & 42 deletions packages/web3/src/connect-modal/style/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,22 @@ import { isDarkTheme } from '../utils';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
// Component token here
selectedBg: string;
selectedColor: string;
hoverBg: string;
splitColor: string;
selectedWalletBg: string;
selectedWalletColor: string;
hoverWalletBg: string;
panelSplitLineColor: string;
modalTitleStartColor: string;
modalTitleEndColor: string;
groupTextColor: string;
listItemDescriptionColor: string;
cardBg: string;
iconSize: number;
walletGroupTextColor: string;
descriptionColor: string;
getWalletCardBg: string;
walletIconSize: number;
simpleGuideBg: string;
walletListWidth: number;
modalMinHeight: number;
}

export interface ConnectModalToken extends Web3AliasToken, ComponentToken {
// Custom token here
}
type ConnectModalToken = Web3AliasToken & ComponentToken;

const resetStyle = (token: ConnectModalToken): CSSInterpolation => {
const { web3ComponentsCls: componentCls } = token;
Expand Down Expand Up @@ -87,7 +85,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
paddingBottom: token.paddingContentVerticalLG,
width: token.walletListWidth,
flexShrink: 0,
borderRight: `1px solid ${token.splitColor}`,
borderRight: `1px solid ${token.panelSplitLineColor}`,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
Expand Down Expand Up @@ -118,7 +116,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
[`${componentCls}-group`]: {
marginBlockEnd: token.marginSM,
[`${componentCls}-group-title`]: {
color: token.groupTextColor,
color: token.walletGroupTextColor,
fontSize: token.fontSizeSM,
paddingInline: token.paddingXS,
},
Expand All @@ -141,17 +139,17 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
[`${componentCls}-icon`]: {
borderRadius: 8,
overflow: 'hidden',
width: token.iconSize,
height: token.iconSize,
fontSize: token.iconSize,
lineHeight: `${token.iconSize}px`,
width: token.walletIconSize,
height: token.walletIconSize,
fontSize: token.walletIconSize,
lineHeight: `${token.walletIconSize}px`,
flexShrink: 0,
},
[`${componentCls}-img`]: {
borderRadius: 8,
overflow: 'hidden',
width: token.iconSize,
height: token.iconSize,
width: token.walletIconSize,
height: token.walletIconSize,
flexShrink: 0,
},
[`${componentCls}-name`]: {
Expand Down Expand Up @@ -183,7 +181,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
marginBlockEnd: 0,
},
'&:hover': {
background: token.hoverBg,
background: token.hoverWalletBg,
[`&:has(${componentCls}-qr-btn:not(:hover))`]: {
[`${componentCls}-plugin-tag:not(:disabled)`]: {
color: token.colorPrimaryTextHover,
Expand All @@ -204,7 +202,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
},
},
'&.selected': {
background: token.selectedBg,
background: token.selectedWalletBg,
},
},
},
Expand Down Expand Up @@ -234,16 +232,16 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
},
},
[`${componentCls}-footer`]: {
color: token.listItemDescriptionColor,
borderBlockStart: `1px solid ${token.splitColor}`,
color: token.descriptionColor,
borderBlockStart: `1px solid ${token.panelSplitLineColor}`,
paddingInline: token.paddingMD,
paddingBlockStart: token.padding,
},
[`${componentCls}-simple-guide`]: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
color: token.listItemDescriptionColor,
color: token.descriptionColor,
margin: `${token.marginSM}px ${token.marginMD}px`,
padding: `${token.paddingXS}px ${token.paddingMD}px`,
borderRadius: 18,
Expand All @@ -270,7 +268,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
textAlign: 'center',
color: token.colorText,
'&:hover': {
background: token.hoverBg,
background: token.hoverWalletBg,
},
},
[`${componentCls}-main-panel-header-title`]: {
Expand Down Expand Up @@ -324,7 +322,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
},
[`${componentCls}-guide-item-description`]: {
fontSize: token.fontSizeSM,
color: token.listItemDescriptionColor,
color: token.descriptionColor,
marginBlockStart: token.marginXXS,
wordBreak: 'break-word',
},
Expand Down Expand Up @@ -363,7 +361,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
color: token.colorText,
},
'.ant-list-item-meta-description': {
color: token.listItemDescriptionColor,
color: token.descriptionColor,
},
[`${componentCls}-get-wallet-btn`]: {
borderColor: token.colorPrimary,
Expand All @@ -387,7 +385,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
},
p: {
fontSize: token.fontSizeSM,
color: token.groupTextColor,
color: token.walletGroupTextColor,
lineHeight: 1.5,
},
},
Expand All @@ -405,7 +403,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
marginBlockEnd: token.margin,
boxSizing: 'border-box',
paddingInline: token.paddingXL,
background: token.cardBg,
background: token.getWalletCardBg,
borderRadius: token.borderRadiusSM,
cursor: 'pointer',
border: `1px solid transparent`,
Expand Down Expand Up @@ -433,7 +431,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
},
[`${componentCls}-card-description`]: {
fontSize: token.fontSize,
color: token.listItemDescriptionColor,
color: token.descriptionColor,
},
},
'&:last-child': {
Expand All @@ -447,7 +445,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
},
[`${componentCls}-card-list-tips-description`]: {
fontSize: token.fontSize,
color: token.listItemDescriptionColor,
color: token.descriptionColor,
},
},
[`${componentCls}-qr-code-container`]: {
Expand Down Expand Up @@ -475,7 +473,7 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => {
color: token.colorTextDisabled,
},
[`${componentCls}-qr-code-tips`]: {
color: token.listItemDescriptionColor,
color: token.descriptionColor,
fontSize: token.fontSizeLG,
position: 'relative',
width: '100%',
Expand Down Expand Up @@ -569,25 +567,24 @@ const genModalStyle: GenerateStyle<ConnectModalToken> = (token) => {

export function useStyle(prefixCls: string): UseStyleResult {
return useAntdStyle('ConnectModal', (token) => {
console.log('get token', token);
const isDark = isDarkTheme(token);
const hoverBg = new TinyColor(isDark ? token.colorWhite : '#000')
const hoverWalletBg = new TinyColor(isDark ? token.colorWhite : '#000')
.setAlpha(0.08)
.onBackground(token.colorBgContainer)
.toRgbString();

const connectModalToken: ConnectModalToken = {
...token,
selectedColor: token.colorBgContainer,
hoverBg,
selectWalletBg: hoverBg,
splitColor: new TinyColor(token.colorText).setAlpha(0.06).toRgbString(),
selectedWalletColor: token.colorBgContainer,
hoverWalletBg,
selectedWalletBg: hoverWalletBg,
panelSplitLineColor: new TinyColor(token.colorText).setAlpha(0.06).toRgbString(),
modalTitleStartColor: token.colorPrimary,
modalTitleEndColor: new TinyColor(token.colorText).setAlpha(0.85).toRgbString(),
groupTextColor: new TinyColor(token.colorText).setAlpha(0.65).toRgbString(),
listItemDescriptionColor: new TinyColor(token.colorText).setAlpha(0.65).toRgbString(),
cardBg: new TinyColor(token.colorText).setAlpha(0.03).toRgbString(),
iconSize: token.sizeXL,
walletGroupTextColor: new TinyColor(token.colorText).setAlpha(0.65).toRgbString(),
descriptionColor: new TinyColor(token.colorText).setAlpha(0.65).toRgbString(),
getWalletCardBg: new TinyColor(token.colorText).setAlpha(0.03).toRgbString(),
walletIconSize: token.sizeXL,
web3ComponentsCls: `.${prefixCls}`,
simpleGuideBg: new TinyColor(token.colorText).complement().setAlpha(0.06).toRgbString(),
walletListWidth: 328,
Expand Down

0 comments on commit 3ed7f2c

Please sign in to comment.