source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(Mentions): use genCssVar hook to generate CSS variables (#56550)

Browse Source 
* update

* update

* update

* update

* update

* update
This commit is contained in:
lijianan
2026-01-10 11:58:32 +08:00
committed by GitHub
parent d937a3930f
commit 3f5129ac44
3 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/mentions/style/index.ts
View File

@@ -17,6 +17,7 @@ import {
import { resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import { genCssVar } from '../../theme/util/genStyleUtils';
export interface ComponentToken extends SharedComponentToken {
/**
@@ -144,8 +145,8 @@ const genDropdownStyle: GenerateStyle<MentionsToken> = (token) => {
};
const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
const { componentCls, calc, colorText, antCls, colorTextDisabled } = token;
const { componentCls, colorText, antCls, colorTextDisabled, calc } = token;
const [varName, varRef] = genCssVar(antCls, '_mentions_'); // TODO: change to `mentions`
return {
[componentCls]: [
// =========================== Common ===========================
@@ -167,9 +168,9 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
// ========================== Mentions ==========================
{
'--mentions-padding-inline': token.paddingInline,
'--mentions-padding-block': token.paddingBlock,
'--mentions-control-height': token.controlHeight,
[varName('padding-inline')]: token.paddingInline,
[varName('padding-block')]: token.paddingBlock,
[varName('control-height')]: token.controlHeight,
display: 'flex',
padding: 0,
@@ -199,11 +200,11 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
color: colorText,
boxSizing: 'border-box',
margin: 0,
minHeight: calc('var(--mentions-control-height)')
minHeight: calc(varRef('control-height'))
.sub(calc(token.lineWidth).mul(2).equal())
.equal(),
paddingInline: 'var(--mentions-padding-inline)',
paddingBlock: 'var(--mentions-padding-block)',
paddingInline: varRef('padding-inline'),
paddingBlock: varRef('padding-block'),
overflow: 'inherit',
overflowX: 'hidden',
overflowY: 'auto',
@@ -250,7 +251,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
insetInlineEnd: 'var(--mentions-padding-inline)',
insetInlineEnd: varRef('padding-inline'),
columnGap: token.marginXS,
[`${componentCls}-clear-icon`]: {
@@ -288,7 +289,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
paddingInlineEnd: calc(token.paddingXXS)
.mul(1.5)
.add(token.fontSizeIcon)
.add('var(--mentions-padding-inline)')
.add(varRef('padding-inline'))
.equal(),
},
},
@@ -302,17 +303,16 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
},
},
},
// ============================ Size ============================
{
'&-lg': {
'--mentions-padding-inline': token.paddingInlineLG,
'--mentions-padding-block': token.paddingBlockLG,
'--mentions-control-height': token.controlHeightLG,
[varName('padding-inline')]: token.paddingInlineLG,
[varName('padding-block')]: token.paddingBlockLG,
[varName('control-height')]: token.controlHeightLG,
},
'&-sm': {
'--mentions-padding-inline': token.paddingInlineSM,
'--mentions-padding-block': token.paddingBlockSM,
'--mentions-control-height': token.controlHeightSM,
[varName('padding-inline')]: token.paddingInlineSM,
[varName('padding-block')]: token.paddingBlockSM,
[varName('control-height')]: token.controlHeightSM,
},
},
],

16
components/theme/util/genStyleUtils.ts
View File

@@ -42,15 +42,19 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge
getCompUnitless: (() => unitless) as GetCompUnitless<ComponentTokenMap, AliasToken>,
});
type CssVarName = (inputs: string) => `--${string}`;
type CssVarRef = (inputs: string, fallback?: string) => `var(--${string})`;
type CalcCssVarName = (inputs: string) => `--${string}`;
export const genCssVar = (antCls: string, component: string): readonly [CssVarName, CssVarRef] => {
const cssPrefix = `--${antCls.replace(/\./g, '')}-${component}-` as `--${string}`;
const varName: CssVarName = (name) => {
type CalcCssVarRef = (inputs: string, fallback?: string) => `var(--${string})`;
export const genCssVar = (
antCls: string,
component: string,
): readonly [CalcCssVarName, CalcCssVarRef] => {
const cssPrefix = `--${antCls.replace(/\./g, '')}-${component}-` satisfies `--${string}`;
const varName: CalcCssVarName = (name) => {
return `${cssPrefix}${name}`;
};
const varRef: CssVarRef = (name, fallback) => {
const varRef: CalcCssVarRef = (name, fallback) => {
return fallback ? `var(${cssPrefix}${name}, ${fallback})` : `var(${cssPrefix}${name})`;
};
return [varName, varRef] as const;

2
package.json
View File

@@ -338,7 +338,7 @@
},
{
"path": "./dist/antd-with-locales.min.js",
"limit": "617 KiB",
"limit": "618 KiB",
"gzip": true
}
],