mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
refactor: rename alert, avatar, drawer, input-group-label cssr vars
This commit is contained in:
parent
a1cfb6cf7e
commit
964a8b5988
@ -5,14 +5,14 @@ export default c([
|
||||
const type = props.$instance.type
|
||||
const pallete = props.$local[type]
|
||||
const {
|
||||
backgroundColor,
|
||||
color: backgroundColor,
|
||||
borderColor,
|
||||
iconColor,
|
||||
titleTextColor,
|
||||
contentTextColor,
|
||||
closeColor,
|
||||
closeHoverColor,
|
||||
closeActiveColor
|
||||
closeColorHover,
|
||||
closeColorActive
|
||||
} = pallete
|
||||
return cTB('alert', [
|
||||
cM(type + '-type', {
|
||||
@ -26,14 +26,14 @@ export default c([
|
||||
}),
|
||||
c('&:hover', [
|
||||
cB('icon', {
|
||||
fill: closeHoverColor,
|
||||
stroke: closeHoverColor
|
||||
fill: closeColorHover,
|
||||
stroke: closeColorHover
|
||||
})
|
||||
]),
|
||||
c('&:active', [
|
||||
cB('icon', {
|
||||
fill: closeActiveColor,
|
||||
stroke: closeActiveColor
|
||||
fill: closeColorActive,
|
||||
stroke: closeColorActive
|
||||
})
|
||||
])
|
||||
]),
|
||||
|
@ -27,53 +27,53 @@ export default create({
|
||||
borderRadius,
|
||||
default: {
|
||||
borderColor: dividerOverlayColor,
|
||||
backgroundColor: inputBackgroundOverlayColor,
|
||||
color: inputBackgroundOverlayColor,
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: secondaryTextOverlayColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
closeColorHover: closeHoverOverlayColor,
|
||||
closeColorActive: closeActiveOverlayColor
|
||||
},
|
||||
info: {
|
||||
borderColor: changeColor(infoHsColor, { alpha: 0.35 }),
|
||||
backgroundColor: changeColor(infoHsColor, { alpha: 0.25 }),
|
||||
color: changeColor(infoHsColor, { alpha: 0.25 }),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: infoHsColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
closeColorHover: closeHoverOverlayColor,
|
||||
closeColorActive: closeActiveOverlayColor
|
||||
},
|
||||
success: {
|
||||
borderColor: changeColor(successHsColor, { alpha: 0.35 }),
|
||||
backgroundColor: changeColor(successHsColor, { alpha: 0.25 }),
|
||||
color: changeColor(successHsColor, { alpha: 0.25 }),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: successHsColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
closeColorHover: closeHoverOverlayColor,
|
||||
closeColorActive: closeActiveOverlayColor
|
||||
},
|
||||
warning: {
|
||||
borderColor: changeColor(warningHsColor, { alpha: 0.35 }),
|
||||
backgroundColor: changeColor(warningHsColor, { alpha: 0.25 }),
|
||||
color: changeColor(warningHsColor, { alpha: 0.25 }),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: warningHsColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
closeColorHover: closeHoverOverlayColor,
|
||||
closeColorActive: closeActiveOverlayColor
|
||||
},
|
||||
error: {
|
||||
borderColor: changeColor(errorHsColor, { alpha: 0.35 }),
|
||||
backgroundColor: changeColor(errorHsColor, { alpha: 0.25 }),
|
||||
color: changeColor(errorHsColor, { alpha: 0.25 }),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: errorHsColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
closeColorHover: closeHoverOverlayColor,
|
||||
closeColorActive: closeActiveOverlayColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -17,7 +17,7 @@ export default create({
|
||||
secondaryTextOverlayColor,
|
||||
closeColor,
|
||||
closeHoverColor,
|
||||
closeActiveColor,
|
||||
closeColorActive,
|
||||
infoColor,
|
||||
successColor,
|
||||
warningColor,
|
||||
@ -28,53 +28,53 @@ export default create({
|
||||
borderRadius,
|
||||
default: {
|
||||
borderColor: dividerOverlayColor,
|
||||
backgroundColor: actionBackgroundColor,
|
||||
color: actionBackgroundColor,
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: secondaryTextOverlayColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
closeColorHover: closeHoverColor,
|
||||
closeColorActive: closeColorActive
|
||||
},
|
||||
info: {
|
||||
borderColor: composite(baseBackgroundColor, changeColor(infoColor, { alpha: 0.25 })),
|
||||
backgroundColor: composite(baseBackgroundColor, changeColor(infoColor, { alpha: 0.08 })),
|
||||
color: composite(baseBackgroundColor, changeColor(infoColor, { alpha: 0.08 })),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: infoColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
closeColorHover: closeHoverColor,
|
||||
closeColorActive: closeColorActive
|
||||
},
|
||||
success: {
|
||||
borderColor: composite(baseBackgroundColor, changeColor(successColor, { alpha: 0.25 })),
|
||||
backgroundColor: composite(baseBackgroundColor, changeColor(successColor, { alpha: 0.08 })),
|
||||
color: composite(baseBackgroundColor, changeColor(successColor, { alpha: 0.08 })),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: successColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
closeColorHover: closeHoverColor,
|
||||
closeColorActive: closeColorActive
|
||||
},
|
||||
warning: {
|
||||
borderColor: composite(baseBackgroundColor, changeColor(warningColor, { alpha: 0.33 })),
|
||||
backgroundColor: composite(baseBackgroundColor, changeColor(warningColor, { alpha: 0.08 })),
|
||||
color: composite(baseBackgroundColor, changeColor(warningColor, { alpha: 0.08 })),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: warningColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
closeColorHover: closeHoverColor,
|
||||
closeColorActive: closeColorActive
|
||||
},
|
||||
error: {
|
||||
borderColor: composite(baseBackgroundColor, changeColor(errorColor, { alpha: 0.25 })),
|
||||
backgroundColor: composite(baseBackgroundColor, changeColor(errorColor, { alpha: 0.08 })),
|
||||
color: composite(baseBackgroundColor, changeColor(errorColor, { alpha: 0.08 })),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: errorColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
closeColorHover: closeHoverColor,
|
||||
closeColorActive: closeColorActive
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
borderRadius,
|
||||
backgroundColor
|
||||
color: backgroundColor
|
||||
} = props.$local
|
||||
const {
|
||||
easeInOutCubicBezier
|
||||
|
@ -14,7 +14,7 @@ export default create({
|
||||
return {
|
||||
...commonVariables,
|
||||
borderRadius,
|
||||
backgroundColor: avatarBackgroundOverlayColor
|
||||
color: avatarBackgroundOverlayColor
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -14,7 +14,7 @@ export default create({
|
||||
return {
|
||||
...commonVariables,
|
||||
borderRadius,
|
||||
backgroundColor: avatarBackgroundOverlayColor
|
||||
color: avatarBackgroundOverlayColor
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -8,7 +8,7 @@ import fadeInTransition from '../../../styles/_transitions/fade-in'
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
backgroundColor,
|
||||
color: backgroundColor,
|
||||
textColor
|
||||
} = props.$local
|
||||
const base = props.$base
|
||||
|
@ -5,7 +5,7 @@ export default create({
|
||||
name: 'Drawer',
|
||||
getDerivedVariables ({ derived }) {
|
||||
return {
|
||||
backgroundColor: derived.modalBackgroundColor,
|
||||
color: derived.modalBackgroundColor,
|
||||
textColor: derived.secondaryTextOverlayColor
|
||||
}
|
||||
}
|
||||
|
@ -5,7 +5,7 @@ export default create({
|
||||
name: 'Drawer',
|
||||
getDerivedVariables ({ derived }) {
|
||||
return {
|
||||
backgroundColor: derived.modalBackgroundColor,
|
||||
color: derived.modalBackgroundColor,
|
||||
textColor: derived.secondaryTextOverlayColor
|
||||
}
|
||||
}
|
||||
|
@ -7,7 +7,7 @@ export default c([
|
||||
} = props.$base
|
||||
const {
|
||||
borderRadius,
|
||||
backgroundColor,
|
||||
color: backgroundColor,
|
||||
textColor,
|
||||
boxShadow
|
||||
} = props.$local
|
||||
|
@ -8,7 +8,7 @@ export default create({
|
||||
return {
|
||||
...commonVariables,
|
||||
borderRadius: base.borderRadius,
|
||||
backgroundColor: derived.inputBackgroundOverlayColor,
|
||||
color: derived.inputBackgroundOverlayColor,
|
||||
textColor: derived.secondaryTextColor,
|
||||
boxShadow: `inset 0 0 0 1px transparent`
|
||||
}
|
||||
|
@ -8,7 +8,7 @@ export default create({
|
||||
return {
|
||||
...commonVariables,
|
||||
borderRadius: base.borderRadius,
|
||||
backgroundColor: derived.actionBackgroundColor,
|
||||
color: derived.actionBackgroundColor,
|
||||
textColor: derived.secondaryTextColor,
|
||||
boxShadow: `inset 0 0 0 1px ${derived.borderColor}`
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user