mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-27 05:00:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: button styles

Browse Source
This commit is contained in:
07akioni 2020-06-23 01:00:22 +08:00
parent f823dc990b
commit 336743598e
4 changed files with 150 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/create.js
View File

@ -25,7 +25,8 @@ function create ({
fallbackLocale,
hljs,
styleSchemes,
fallbackTheme
fallbackTheme,
_themes
}) {
const installTargets = []
const naive = {
@ -33,10 +34,11 @@ function create ({
fallbackLocale: fallbackLocale || locales[0],
hljs,
styleSchemes: styleSchemes || null,
_themes: _themes || null,
fallbackTheme: fallbackTheme || 'light',
setHljs,
setHighlightjs: setHljs,
setStyleSchemes: (schemes) => {
setStyleSchemes: schemes => {
naive.styleSchemes = mergeStyleSchemes(
naive.styleSchemes, schemes
)

17
src/index.js
View File

@ -71,6 +71,11 @@ import enUS from './locale/enUS'
import lightScheme from './_styles-in-js/lightStyleScheme.scss'
import darkScheme from './_styles-in-js/darkStyleScheme.scss'
import lightBaseStyle from './styles/light/base'
import darkBaseStyle from './styles/dark/base'
import lightButtonStyle from './styles/light/Button'
import darkButtonStyle from './styles/dark/Button'
// Deprecated Components
import NimbusFormCard from './_deprecated/NimbusFormCard'
import NimbusConfirmCard from './_deprecated/NimbusConfirmCard'
@ -159,5 +164,15 @@ export default create({
light: lightScheme,
dark: darkScheme
},
fallbackTheme: 'light'
fallbackTheme: 'light',
_themes: {
light: {
base: lightBaseStyle,
NButton: lightButtonStyle
},
dark: {
base: darkBaseStyle,
NButton: darkButtonStyle
}
}
})

66
src/styles/dark/Button.js
View File

@ -1,9 +1,73 @@
import create from '../utils/create-component-base'
export default create({
getDerivedVariables ({ base, derived }) {
getDerivedVariables ({ derived }) {
return {
default: {
color: 'transparent',
hoverColor: 'transparent',
activeColor: 'transparent',
focusColor: 'transparent',
textColor: derived.secondaryTextColor,
hoverTextColor: derived.primaryHoverColor,
activeTextColor: derived.primaryActiveColor,
focusTextColor: derived.primaryHoverColor,
textTypedTextColor: derived.secondaryTextColor,
textTypedHoverTextColor: derived.primaryHoverColor,
textTypedActiveTextColor: derived.primaryActiveColor,
textTypedFocusTextColor: derived.primaryHoverColor,
ghostTypedTextColor: derived.secondaryTextColor,
ghostTypedHoverTextColor: derived.primaryHoverColor,
ghostTypedActiveTextColor: derived.primaryActiveColor,
ghostTypedFocusTextColor: derived.primaryHoverColor,
borderColor: derived.borderColor,
hoverBorderColor: derived.primaryHoverColor,
activeBorderColor: derived.primaryActiveColor,
focusBorderColor: derived.primaryHoverColor,
rippleColor: derived.primaryColor,
iconColor: derived.tertiaryTextColor
},
primary: {
color: derived.primaryColor,
hoverColor: derived.primaryHoverColor,
activeColor: derived.primaryActiveColor,
focusColor: derived.primaryHoverColor,
textColor: derived.baseBackgroundColor
},
info: {
color: derived.infoColor,
hoverColor: derived.infoHoverColor,
activeColor: derived.infoActiveColor,
focusColor: derived.infoHoverColor,
textColor: derived.baseBackgroundColor
},
success: {
color: derived.successColor,
hoverColor: derived.successHoverColor,
activeColor: derived.successActiveColor,
focusColor: derived.successHoverColor,
textColor: derived.baseBackgroundColor
},
warning: {
color: derived.warningColor,
hoverColor: derived.warningHoverColor,
activeColor: derived.warningActiveColor,
focusColor: derived.warningHoverColor,
textColor: derived.baseBackgroundColor
},
error: {
color: derived.errorColor,
hoverColor: derived.errorHoverColor,
activeColor: derived.errorActiveColor,
focusColor: derived.errorHoverColor,
textColor: derived.baseBackgroundColor
}
}
}
})

66
src/styles/light/Button.js
View File

@ -1,9 +1,73 @@
import create from '../utils/create-component-base'
export default create({
getDerivedVariables ({ base, derived }) {
getDerivedVariables ({ derived }) {
return {
default: {
color: 'transparent',
hoverColor: 'transparent',
activeColor: 'transparent',
focusColor: 'transparent',
textColor: derived.secondaryTextColor,
hoverTextColor: derived.primaryHoverColor,
activeTextColor: derived.primaryActiveColor,
focusTextColor: derived.primaryHoverColor,
textTypedTextColor: derived.secondaryTextColor,
textTypedHoverTextColor: derived.primaryHoverColor,
textTypedActiveTextColor: derived.primaryActiveColor,
textTypedFocusTextColor: derived.primaryHoverColor,
ghostTypedTextColor: derived.secondaryTextColor,
ghostTypedHoverTextColor: derived.primaryHoverColor,
ghostTypedActiveTextColor: derived.primaryActiveColor,
ghostTypedFocusTextColor: derived.primaryHoverColor,
borderColor: derived.borderColor,
hoverBorderColor: derived.primaryHoverColor,
activeBorderColor: derived.primaryActiveColor,
focusBorderColor: derived.primaryHoverColor,
rippleColor: derived.primaryColor,
iconColor: derived.tertiaryTextColor
},
primary: {
color: derived.primaryColor,
hoverColor: derived.primaryHoverColor,
activeColor: derived.primaryActiveColor,
focusColor: derived.primaryHoverColor,
textColor: derived.baseBackgroundColor
},
info: {
color: derived.infoColor,
hoverColor: derived.infoHoverColor,
activeColor: derived.infoActiveColor,
focusColor: derived.infoHoverColor,
textColor: derived.baseBackgroundColor
},
success: {
color: derived.successColor,
hoverColor: derived.successHoverColor,
activeColor: derived.successActiveColor,
focusColor: derived.successHoverColor,
textColor: derived.baseBackgroundColor
},
warning: {
color: derived.warningColor,
hoverColor: derived.warningHoverColor,
activeColor: derived.warningActiveColor,
focusColor: derived.warningHoverColor,
textColor: derived.baseBackgroundColor
},
error: {
color: derived.errorColor,
hoverColor: derived.errorHoverColor,
activeColor: derived.errorActiveColor,
focusColor: derived.errorHoverColor,
textColor: derived.baseBackgroundColor
}
}
}
})