refactor: 🛠 use genCssVar hook to generate CSS variables (#56546)

* refactor: 🛠 use genCssVar hook to generate CSS variables

* update

* update

* update

* update

* update

* Update components/tooltip/style/index.ts

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: lijianan <574980606@qq.com>

* update

* fix: update

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: thinkasany <480968828@qq.com>
This commit is contained in:
lijianan
2026-01-09 22:24:19 +08:00
committed by GitHub
parent ba47850fa0
commit 75ddcdfd00
20 changed files with 254 additions and 214 deletions

View File

@@ -24,7 +24,7 @@ const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token)
// == Variable ==
// ==============================================================
{
[varName`size`]: unit(floatButtonSize),
[varName('size')]: unit(floatButtonSize),
},
// ==============================================================
@@ -35,8 +35,8 @@ const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token)
margin: 0,
padding: `${unit(token.paddingXXS)} 0`,
width: varRef`size`,
minHeight: varRef`size`,
width: varRef('size'),
minHeight: varRef('size'),
height: 'auto',
wordBreak: 'break-word',
whiteSpace: 'normal',

View File

@@ -20,8 +20,8 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
// == Variable ==
// ==============================================================
{
[varName`list-transform-start`]: `translate(0,${unit(floatButtonSize)})`,
[varName`list-trigger-offset`]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`,
[varName('list-transform-start')]: `translate(0,${unit(floatButtonSize)})`,
[varName('list-trigger-offset')]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`,
},
// ==============================================================
@@ -80,7 +80,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
'&-enter, &-appear': {
opacity: 0,
transform: varRef`list-transform-start`,
transform: varRef('list-transform-start'),
'&-active': {
opacity: 1,
@@ -91,7 +91,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
'&-leave': {
'&-active': {
opacity: 0,
transform: varRef`list-transform-start`,
transform: varRef('list-transform-start'),
},
},
},
@@ -100,28 +100,28 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
// ======================== Placements ========================
'&-top': {
[listCls]: {
bottom: varRef`list-trigger-offset`,
bottom: varRef('list-trigger-offset'),
},
},
'&-bottom': {
[listCls]: {
[varName`list-transform-start`]: `translate(0, calc(${unit(floatButtonSize)} * -1))`,
top: varRef`list-trigger-offset`,
[varName('list-transform-start')]: `translate(0, calc(${unit(floatButtonSize)} * -1))`,
top: varRef('list-trigger-offset'),
},
},
'&-left': {
[listCls]: {
[varName`list-transform-start`]: `translate(${unit(floatButtonSize)}, 0)`,
right: varRef`list-trigger-offset`,
[varName('list-transform-start')]: `translate(${unit(floatButtonSize)}, 0)`,
right: varRef('list-trigger-offset'),
},
},
'&-right': {
[listCls]: {
[varName`list-transform-start`]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`,
left: varRef`list-trigger-offset`,
[varName('list-transform-start')]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`,
left: varRef('list-trigger-offset'),
},
},
},