mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-07 13:48:31 +08:00
refactor(transfer): cssr var names
This commit is contained in:
07akioni
parent
a5d1feee79
commit
2b46b90a0c
@ -13,18 +13,18 @@ export default c([
|
||||
const {
|
||||
borderRadius,
|
||||
borderColor,
|
||||
listBackgroundColor,
|
||||
headerBackgroundColor,
|
||||
listColor,
|
||||
headerColor,
|
||||
headerTextColor,
|
||||
disabledHeaderTextColor,
|
||||
headerTextColorDisabled,
|
||||
headerExtraTextColor,
|
||||
buttonBackgroundColor,
|
||||
buttonHoverBackgroundColor,
|
||||
buttonActiveBackgroundColor,
|
||||
buttonDisabledBackgroundColor,
|
||||
buttonColor,
|
||||
buttonColorHover,
|
||||
buttonColorActive,
|
||||
buttonColorDisabled,
|
||||
filterBorderColor,
|
||||
itemTextColor,
|
||||
itemDisabledTextColor
|
||||
itemTextColorDisabled
|
||||
} = props.$local
|
||||
return [
|
||||
animationStyle,
|
||||
@ -38,7 +38,7 @@ export default c([
|
||||
position: 'relative',
|
||||
transition: `background-color .3s ${easeInOutCubicBezier}`,
|
||||
borderRadius,
|
||||
backgroundColor: listBackgroundColor
|
||||
backgroundColor: listColor
|
||||
}, [
|
||||
cB('virtual-scroller', {
|
||||
height: '100%',
|
||||
@ -52,7 +52,7 @@ export default c([
|
||||
]),
|
||||
cE('border-mask', {
|
||||
border: `1px solid ${borderColor}`,
|
||||
transition: `transition: border-color .3s ${easeInOutCubicBezier}`,
|
||||
transition: `border-color .3s ${easeInOutCubicBezier}`,
|
||||
pointerEvents: 'none',
|
||||
borderRadius,
|
||||
position: 'absolute',
|
||||
@ -67,7 +67,7 @@ export default c([
|
||||
alignItems: 'center',
|
||||
backgroundClip: 'padding-box',
|
||||
borderRadius,
|
||||
backgroundColor: headerBackgroundColor,
|
||||
backgroundColor: headerColor,
|
||||
transition: `
|
||||
border-color .3s ${easeInOutCubicBezier},
|
||||
background-color .3s ${easeInOutCubicBezier}
|
||||
@ -89,7 +89,7 @@ export default c([
|
||||
color: headerTextColor
|
||||
}, [
|
||||
cM('disabled', {
|
||||
color: disabledHeaderTextColor
|
||||
color: headerTextColorDisabled
|
||||
})
|
||||
]),
|
||||
cE('extra', {
|
||||
@ -179,7 +179,7 @@ export default c([
|
||||
]),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed',
|
||||
color: itemDisabledTextColor
|
||||
color: itemTextColorDisabled
|
||||
}),
|
||||
cM('source', {
|
||||
animationFillMode: 'forwards'
|
||||
@ -248,23 +248,23 @@ export default c([
|
||||
cE('icon', {
|
||||
pointerEvents: 'none',
|
||||
transition: `fill .3s ${easeInOutCubicBezier}`,
|
||||
fill: buttonBackgroundColor
|
||||
fill: buttonColor
|
||||
}),
|
||||
c('&:hover', [
|
||||
cE('icon', {
|
||||
fill: buttonHoverBackgroundColor
|
||||
fill: buttonColorHover
|
||||
})
|
||||
]),
|
||||
c('&:active', [
|
||||
cE('icon', {
|
||||
fill: buttonActiveBackgroundColor
|
||||
fill: buttonColorActive
|
||||
})
|
||||
]),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed'
|
||||
}, [
|
||||
cE('icon', {
|
||||
fill: buttonDisabledBackgroundColor
|
||||
fill: buttonColorDisabled
|
||||
})
|
||||
])
|
||||
])
|
||||
|
||||
@ -9,19 +9,18 @@ export default create({
|
||||
...commonVariables,
|
||||
borderRadius: base.borderRadius,
|
||||
borderColor: 'transparent',
|
||||
listBackgroundColor: derived.inputBackgroundOverlayColor,
|
||||
headerBackgroundColor: derived.tableHeaderBackgroundOverlayColor,
|
||||
listColor: derived.inputBackgroundOverlayColor,
|
||||
headerColor: derived.tableHeaderBackgroundOverlayColor,
|
||||
headerTextColor: derived.primaryTextOverlayColor,
|
||||
disabledHeaderTextColor: derived.disabledTextOverlayColor,
|
||||
headerTextColorDisabled: derived.disabledTextOverlayColor,
|
||||
headerExtraTextColor: derived.secondaryTextOverlayColor,
|
||||
// TODO refactor
|
||||
buttonBackgroundColor: 'rgba(255, 255, 255, 0.3)',
|
||||
buttonHoverBackgroundColor: derived.primaryHoverColor,
|
||||
buttonActiveBackgroundColor: derived.primaryActiveColor,
|
||||
buttonDisabledBackgroundColor: 'rgba(255, 255, 255, 0.15)',
|
||||
buttonColor: 'rgba(255, 255, 255, 0.3)',
|
||||
buttonColorHover: derived.primaryHoverColor,
|
||||
buttonColorActive: derived.primaryActiveColor,
|
||||
buttonColorDisabled: 'rgba(255, 255, 255, 0.15)',
|
||||
filterBorderColor: derived.dividerOverlayColor,
|
||||
itemTextColor: derived.secondaryTextOverlayColor,
|
||||
itemDisabledTextColor: derived.disabledTextOverlayColor
|
||||
itemTextColorDisabled: derived.disabledTextOverlayColor
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -10,22 +10,21 @@ export default create({
|
||||
...commonVariables,
|
||||
borderRadius: base.borderRadius,
|
||||
borderColor: derived.dividerOverlayColor,
|
||||
listBackgroundColor: derived.cardBackgroundColor,
|
||||
headerBackgroundColor: composite(
|
||||
listColor: derived.cardBackgroundColor,
|
||||
headerColor: composite(
|
||||
derived.cardBackgroundColor,
|
||||
derived.tableHeaderBackgroundOverlayColor
|
||||
),
|
||||
headerTextColor: derived.primaryTextColor,
|
||||
disabledHeaderTextColor: derived.disabledTextColor,
|
||||
headerTextColorDisabled: derived.disabledTextColor,
|
||||
headerExtraTextColor: derived.secondaryTextColor,
|
||||
// TODO refactor
|
||||
buttonBackgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||
buttonHoverBackgroundColor: derived.primaryHoverColor,
|
||||
buttonActiveBackgroundColor: derived.primaryActiveColor,
|
||||
buttonDisabledBackgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
buttonColor: 'rgba(0, 0, 0, 0.2)',
|
||||
buttonColorHover: derived.primaryHoverColor,
|
||||
buttonColorActive: derived.primaryActiveColor,
|
||||
buttonColorDisabled: 'rgba(0, 0, 0, 0.1)',
|
||||
filterBorderColor: derived.dividerOverlayColor,
|
||||
itemTextColor: derived.secondaryTextColor,
|
||||
itemDisabledTextColor: derived.disabledTextColor
|
||||
itemTextColorDisabled: derived.disabledTextColor
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
34
think.md
34
think.md
@ -191,6 +191,40 @@ shouldMount 可以加到 usecssr
|
||||
## 2020.7.8
|
||||
style overrides RFC
|
||||
|
||||
## 2020.8.2
|
||||
颜色命名的方式
|
||||
```
|
||||
1.
|
||||
{
|
||||
xColor,
|
||||
xActiveColor,
|
||||
xDisabledColor,
|
||||
secondaryTextColor,
|
||||
tertiaryTextColor
|
||||
},
|
||||
{ // 这种拒绝，因为只有一个状态也需要 default
|
||||
xColor: {
|
||||
default,
|
||||
active,
|
||||
disabled
|
||||
}
|
||||
}
|
||||
// 现在感觉第三种比较好
|
||||
{
|
||||
xColor,
|
||||
xColorActive,
|
||||
xColorDisabled,
|
||||
textColor2, // 暂时可以先不改
|
||||
textColor3, //
|
||||
textColorDisabled,
|
||||
textColorPrimary,
|
||||
textColorSecondary,
|
||||
textColorTertiary,
|
||||
textColorQ...
|
||||
}
|
||||
// 还有一点是去掉 backgroundColor 中的 background，因为 color & textColor 区分度已经够了
|
||||
```
|
||||
|
||||
```js
|
||||
// no import on demand
|
||||
import naive from 'naive-ui'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user