mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
refactor(button): ts
This commit is contained in:
07akioni
parent
196bfd575d
commit
db888dd571
@ -1,3 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
export { default as NButton } from './src/Button.vue'
|
||||
export { default as NButtonGroup } from './src/ButtonGroup.vue'
|
||||
3
src/button/index.ts
Normal file
3
src/button/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
/* istanbul ignore file */
|
||||
export { default as NButton } from './src/Button'
|
||||
export { default as NButtonGroup } from './src/ButtonGroup'
|
||||
@ -1,100 +1,36 @@
|
||||
<template>
|
||||
<button
|
||||
ref="selfRef"
|
||||
class="n-button"
|
||||
:class="{
|
||||
'n-button--disabled': disabled,
|
||||
'n-button--block': block,
|
||||
'n-button--pressed': enterPressed,
|
||||
'n-button--dashed': !text && dashed,
|
||||
'n-button--color': color,
|
||||
[`n-button--${type}-type`]: true
|
||||
}"
|
||||
:tabindex="mergedFocusable ? 0 : -1"
|
||||
:type="attrType"
|
||||
:style="cssVars"
|
||||
:disabled="disabled"
|
||||
@click="handleClick"
|
||||
@blur="handleBlur"
|
||||
@mousedown="handleMouseDown"
|
||||
@keyup.enter="handleKeyUpEnter"
|
||||
@keydown.enter="handleKeyDownEnter"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.default && iconPlacement === 'right'"
|
||||
class="n-button__content"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<n-fade-in-expand-transition width>
|
||||
<span
|
||||
v-if="$slots.icon || loading"
|
||||
class="n-button__icon"
|
||||
:style="{
|
||||
margin: !$slots.default ? 0 : ''
|
||||
}"
|
||||
>
|
||||
<n-icon-switch-transition>
|
||||
<n-base-loading
|
||||
v-if="loading"
|
||||
key="loading"
|
||||
class="n-icon-slot"
|
||||
:stroke-width="24"
|
||||
/>
|
||||
<div v-else key="icon" class="n-icon-slot">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
</n-icon-switch-transition>
|
||||
</span>
|
||||
</n-fade-in-expand-transition>
|
||||
<span
|
||||
v-if="$slots.default && iconPlacement === 'left'"
|
||||
class="n-button__content"
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
<n-base-wave v-if="!text" ref="waveRef" />
|
||||
<div
|
||||
v-if="showBorder"
|
||||
class="n-button__border"
|
||||
:style="customColorCssVars"
|
||||
/>
|
||||
<div
|
||||
v-if="showBorder"
|
||||
class="n-button__state-border"
|
||||
:style="customColorCssVars"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed, inject, nextTick } from 'vue'
|
||||
import { useMemo } from 'vooks'
|
||||
import {
|
||||
createHoverColor,
|
||||
createPressedColor
|
||||
} from '../../_utils/color/index.js'
|
||||
import { useTheme } from '../../_mixins'
|
||||
h,
|
||||
ref,
|
||||
computed,
|
||||
inject,
|
||||
nextTick,
|
||||
defineComponent,
|
||||
PropType,
|
||||
renderSlot,
|
||||
CSSProperties
|
||||
} from 'vue'
|
||||
import { useMemo } from 'vooks'
|
||||
import { createHoverColor, createPressedColor } from '../../_utils/color/index'
|
||||
import { useFormItem, useTheme } from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
import {
|
||||
NFadeInExpandTransition,
|
||||
NIconSwitchTransition,
|
||||
NBaseLoading,
|
||||
NBaseWave
|
||||
} from '../../_base'
|
||||
import type { BaseWaveRef } from '../../_base'
|
||||
import { createKey } from '../../_utils'
|
||||
import { buttonLight } from '../styles'
|
||||
import style from './styles/button.cssr.js'
|
||||
import type { ButtonTheme } from '../styles'
|
||||
import type { ButtonGroupInjection } from './ButtonGroup'
|
||||
import type { Type, Size } from './interface'
|
||||
import style from './styles/button.cssr'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'Button',
|
||||
components: {
|
||||
NBaseLoading,
|
||||
NBaseWave,
|
||||
NIconSwitchTransition,
|
||||
NFadeInExpandTransition
|
||||
},
|
||||
props: {
|
||||
...useTheme.props,
|
||||
...(useTheme.props as ThemeProps<ButtonTheme>),
|
||||
color: {
|
||||
type: String,
|
||||
default: undefined
|
||||
@ -120,9 +56,7 @@ export default {
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return ['tiny', 'small', 'medium', 'large'].includes(value)
|
||||
},
|
||||
type: String as PropType<Size | undefined>,
|
||||
default: undefined
|
||||
},
|
||||
ghost: {
|
||||
@ -142,17 +76,7 @@ export default {
|
||||
default: true
|
||||
},
|
||||
type: {
|
||||
// TODO: warning message
|
||||
validator (value) {
|
||||
return [
|
||||
'default',
|
||||
'primary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error'
|
||||
].includes(value)
|
||||
},
|
||||
type: String as PropType<Type>,
|
||||
default: 'default'
|
||||
},
|
||||
dashed: {
|
||||
@ -160,51 +84,52 @@ export default {
|
||||
default: false
|
||||
},
|
||||
iconPlacement: {
|
||||
default: 'left',
|
||||
validator (value) {
|
||||
return ['left', 'right'].includes(value)
|
||||
}
|
||||
type: String as PropType<'left' | 'right'>,
|
||||
default: 'left'
|
||||
},
|
||||
attrType: {
|
||||
default: 'button',
|
||||
validator (value) {
|
||||
return ['button', 'submit', 'reset'].includes(value)
|
||||
}
|
||||
type: String as PropType<'button' | 'submit' | 'reset'>,
|
||||
default: 'button'
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const selfRef = ref(null)
|
||||
const waveRef = ref(null)
|
||||
const selfRef = ref<HTMLElement | null>(null)
|
||||
const waveRef = ref<BaseWaveRef | null>(null)
|
||||
const enterPressedRef = ref(false)
|
||||
const showBorderRef = useMemo(() => {
|
||||
return !props.text && (!props.color || props.ghost || props.dashed)
|
||||
})
|
||||
const mergedSizeRef = computed(() => {
|
||||
const { size } = props
|
||||
if (size) return size
|
||||
const NButtonGroup = inject('NButtonGroup', {})
|
||||
const { size: buttonGroupSize } = NButtonGroup
|
||||
if (buttonGroupSize) return buttonGroupSize
|
||||
const NFormItem = inject('NFormItem', null)
|
||||
const { mergedSize: formItemSize } = NFormItem || {}
|
||||
if (formItemSize) {
|
||||
return formItemSize
|
||||
const NButtonGroup = inject<ButtonGroupInjection>('NButtonGroup', {})
|
||||
const { mergedSize: mergedSizeRef } = useFormItem(
|
||||
{},
|
||||
{
|
||||
defaultSize: 'medium',
|
||||
mergedSize: (NFormItem) => {
|
||||
const { size } = props
|
||||
if (size) return size
|
||||
const { size: buttonGroupSize } = NButtonGroup
|
||||
if (buttonGroupSize) return buttonGroupSize
|
||||
const { mergedSize: formItemSize } = NFormItem || {}
|
||||
if (formItemSize) {
|
||||
return formItemSize
|
||||
}
|
||||
return 'medium'
|
||||
}
|
||||
}
|
||||
return 'medium'
|
||||
})
|
||||
)
|
||||
const mergedFocusableRef = computed(() => {
|
||||
return props.focusable && !props.disabled
|
||||
})
|
||||
const handleMouseDown = (e) => {
|
||||
const handleMouseDown = (e: MouseEvent): void => {
|
||||
e.preventDefault()
|
||||
if (props.disabled) {
|
||||
return
|
||||
}
|
||||
if (mergedFocusableRef.value) {
|
||||
selfRef.value.focus({ preventScroll: true })
|
||||
selfRef.value?.focus({ preventScroll: true })
|
||||
}
|
||||
}
|
||||
const handleClick = (e) => {
|
||||
const handleClick = (): void => {
|
||||
if (!props.disabled) {
|
||||
if (!props.text) {
|
||||
const { value } = waveRef
|
||||
@ -214,24 +139,30 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleKeyUpEnter = (e) => {
|
||||
const handleKeyUp = (e: KeyboardEvent): void => {
|
||||
if (!props.keyboard) {
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
enterPressedRef.value = false
|
||||
nextTick(() => {
|
||||
if (!props.disabled) {
|
||||
selfRef.value.click()
|
||||
}
|
||||
})
|
||||
switch (e.code) {
|
||||
case 'Enter':
|
||||
enterPressedRef.value = false
|
||||
void nextTick(() => {
|
||||
if (!props.disabled) {
|
||||
selfRef.value?.click()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handleKeyDownEnter = (e) => {
|
||||
const handleKeyDown = (e: KeyboardEvent): void => {
|
||||
e.preventDefault()
|
||||
if (!props.keyboard) return
|
||||
enterPressedRef.value = true
|
||||
switch (e.code) {
|
||||
case 'Enter':
|
||||
enterPressedRef.value = true
|
||||
}
|
||||
}
|
||||
const handleBlur = (e) => {
|
||||
const handleBlur = (): void => {
|
||||
enterPressedRef.value = false
|
||||
}
|
||||
const themeRef = useTheme('Button', 'Button', style, buttonLight, props)
|
||||
@ -243,9 +174,9 @@ export default {
|
||||
showBorder: showBorderRef,
|
||||
enterPressed: enterPressedRef,
|
||||
handleMouseDown,
|
||||
handleKeyDownEnter,
|
||||
handleKeyDown,
|
||||
handleBlur,
|
||||
handleKeyUpEnter,
|
||||
handleKeyUp,
|
||||
handleClick,
|
||||
customColorCssVars: computed(() => {
|
||||
const { color } = props
|
||||
@ -420,6 +351,85 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { $slots } = this
|
||||
return (
|
||||
<button
|
||||
ref="selfRef"
|
||||
class={[
|
||||
'n-button',
|
||||
`n-button--${this.type}-type`,
|
||||
{
|
||||
'n-button--disabled': this.disabled,
|
||||
'n-button--block': this.block,
|
||||
'n-button--pressed': this.enterPressed,
|
||||
'n-button--dashed': !this.text && this.dashed,
|
||||
'n-button--color': this.color,
|
||||
'n-button--ghost': this.ghost // required for button group border collapse
|
||||
}
|
||||
]}
|
||||
tabindex={this.mergedFocusable ? 0 : -1}
|
||||
type={this.attrType}
|
||||
style={this.cssVars as CSSProperties}
|
||||
disabled={this.disabled}
|
||||
onClick={this.handleClick}
|
||||
onBlur={this.handleBlur}
|
||||
onMousedown={this.handleMouseDown}
|
||||
onKeyup={this.handleKeyUp}
|
||||
onKeydown={this.handleKeyDown}
|
||||
>
|
||||
{$slots.default && this.iconPlacement === 'right' ? (
|
||||
<div class="n-button__content">{renderSlot($slots, 'default')}</div>
|
||||
) : null}
|
||||
|
||||
<NFadeInExpandTransition width>
|
||||
{{
|
||||
default: () =>
|
||||
$slots.icon || this.loading ? (
|
||||
<span
|
||||
class="n-button__icon"
|
||||
style={{
|
||||
margin: !$slots.default ? 0 : ''
|
||||
}}
|
||||
>
|
||||
<NIconSwitchTransition>
|
||||
{{
|
||||
default: () =>
|
||||
this.loading ? (
|
||||
<NBaseLoading
|
||||
key="loading"
|
||||
class="n-icon-slot"
|
||||
strokeWidth={24}
|
||||
/>
|
||||
) : (
|
||||
<div key="icon" class="n-icon-slot">
|
||||
{renderSlot($slots, 'icon')}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</NIconSwitchTransition>
|
||||
</span>
|
||||
) : null
|
||||
}}
|
||||
</NFadeInExpandTransition>
|
||||
{$slots.default && this.iconPlacement === 'left' ? (
|
||||
<span class="n-button__content">{renderSlot($slots, 'default')}</span>
|
||||
) : null}
|
||||
{!this.text ? <NBaseWave ref="waveRef" /> : null}
|
||||
{this.showBorder ? (
|
||||
<div
|
||||
class="n-button__border"
|
||||
style={this.customColorCssVars as CSSProperties}
|
||||
/>
|
||||
) : null}
|
||||
{this.showBorder ? (
|
||||
<div
|
||||
class="n-button__state-border"
|
||||
style={this.customColorCssVars as CSSProperties}
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
})
|
||||
40
src/button/src/ButtonGroup.tsx
Normal file
40
src/button/src/ButtonGroup.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { h, renderSlot, PropType, defineComponent, provide } from 'vue'
|
||||
import { useStyle } from '../../_mixins'
|
||||
import type { Size } from './interface'
|
||||
import style from './styles/button-group.cssr'
|
||||
|
||||
export interface ButtonGroupInjection {
|
||||
size?: Size | undefined
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ButtonGroup',
|
||||
props: {
|
||||
size: {
|
||||
type: String as PropType<Size | undefined>,
|
||||
default: undefined
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
useStyle('ButtonGroup', style)
|
||||
provide<ButtonGroupInjection>('NButtonGroup', props)
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
'n-button-group',
|
||||
{
|
||||
'n-button-group--vertical': this.vertical
|
||||
}
|
||||
]}
|
||||
>
|
||||
{renderSlot(this.$slots, 'default')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-button-group"
|
||||
:class="{
|
||||
'n-button-group--vertical': vertical
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useStyle } from '../../_mixins'
|
||||
import style from './styles/button-group.cssr.js'
|
||||
|
||||
export default {
|
||||
name: 'ButtonGroup',
|
||||
provide () {
|
||||
return {
|
||||
NButtonGroup: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
size: {
|
||||
validator (value) {
|
||||
return ['tiny', 'small', 'medium', 'large'].includes(value)
|
||||
},
|
||||
default: undefined
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
useStyle('ButtonGroup', style)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
9
src/button/src/interface.ts
Normal file
9
src/button/src/interface.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export type Size = 'tiny' | 'small' | 'medium' | 'large'
|
||||
|
||||
export type Type =
|
||||
| 'default'
|
||||
| 'primary'
|
||||
| 'info'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
@ -1,9 +1,11 @@
|
||||
import { CNode } from 'css-render'
|
||||
import { c, cB, cM, cE, cNotM } from '../../../_utils/cssr/index'
|
||||
import { Type } from '../interface'
|
||||
|
||||
const zero = '0!important'
|
||||
const n1 = '-1px!important'
|
||||
|
||||
function createLeftBorderStyle (type) {
|
||||
function createLeftBorderStyle (type: Type): CNode {
|
||||
return cM(type + '-type', [
|
||||
c('& +', [
|
||||
cB('button', {}, [
|
||||
@ -20,7 +22,7 @@ function createLeftBorderStyle (type) {
|
||||
])
|
||||
}
|
||||
|
||||
function createTopBorderStyle (type) {
|
||||
function createTopBorderStyle (type: Type): CNode {
|
||||
return cM(type + '-type', [
|
||||
c('& +', [
|
||||
cB('button', [
|
||||
@ -1,7 +1,8 @@
|
||||
import commonVariables from './_common'
|
||||
import { commonDark } from '../../_styles/new-common'
|
||||
import type { ButtonTheme } from './light'
|
||||
|
||||
export default {
|
||||
const buttonDark: ButtonTheme = {
|
||||
name: 'Button',
|
||||
common: commonDark,
|
||||
self (vars) {
|
||||
@ -215,3 +216,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default buttonDark
|
||||
@ -1,2 +0,0 @@
|
||||
export { default as buttonDark } from './dark.js'
|
||||
export { default as buttonLight } from './light.js'
|
||||
3
src/button/styles/index.ts
Normal file
3
src/button/styles/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { default as buttonDark } from './dark'
|
||||
export { default as buttonLight } from './light'
|
||||
export type { ButtonThemeVars, ButtonTheme } from './light'
|
||||
@ -1,217 +0,0 @@
|
||||
import commonVariables from './_common'
|
||||
import { commonLight } from '../../_styles/new-common'
|
||||
|
||||
export default {
|
||||
name: 'Button',
|
||||
common: commonLight,
|
||||
self (vars) {
|
||||
const {
|
||||
heightTiny,
|
||||
heightSmall,
|
||||
heightMedium,
|
||||
heightLarge,
|
||||
borderRadius,
|
||||
fontSizeTiny,
|
||||
fontSizeSmall,
|
||||
fontSizeMedium,
|
||||
fontSizeLarge,
|
||||
opacityDisabled,
|
||||
textColor2,
|
||||
primaryColorHover,
|
||||
primaryColorPressed,
|
||||
borderColorOverlay,
|
||||
primaryColor,
|
||||
baseColor,
|
||||
infoColor,
|
||||
infoColorHover,
|
||||
infoColorPressed,
|
||||
successColor,
|
||||
successColorHover,
|
||||
successColorPressed,
|
||||
warningColor,
|
||||
warningColorHover,
|
||||
warningColorPressed,
|
||||
errorColor,
|
||||
errorColorHover,
|
||||
errorColorPressed
|
||||
} = vars
|
||||
return {
|
||||
...commonVariables,
|
||||
heightTiny: heightTiny,
|
||||
heightSmall: heightSmall,
|
||||
heightMedium: heightMedium,
|
||||
heightLarge: heightLarge,
|
||||
borderRadiusTiny: borderRadius,
|
||||
borderRadiusSmall: borderRadius,
|
||||
borderRadiusMedium: borderRadius,
|
||||
borderRadiusLarge: borderRadius,
|
||||
fontSizeTiny: fontSizeTiny,
|
||||
fontSizeSmall: fontSizeSmall,
|
||||
fontSizeMedium: fontSizeMedium,
|
||||
fontSizeLarge: fontSizeLarge,
|
||||
opacityDisabled: opacityDisabled,
|
||||
// default type
|
||||
color: 'transparent',
|
||||
colorHover: 'transparent',
|
||||
colorPressed: 'transparent',
|
||||
colorFocus: 'transparent',
|
||||
colorDisabled: 'transparent',
|
||||
textColor: textColor2,
|
||||
textColorHover: primaryColorHover,
|
||||
textColorPressed: primaryColorPressed,
|
||||
textColorFocus: primaryColorHover,
|
||||
textColorDisabled: textColor2,
|
||||
textColorText: textColor2,
|
||||
textColorTextHover: primaryColorHover,
|
||||
textColorTextPressed: primaryColorPressed,
|
||||
textColorTextFocus: primaryColorHover,
|
||||
textColorTextDisabled: textColor2,
|
||||
textColorGhost: textColor2,
|
||||
textColorGhostHover: primaryColorHover,
|
||||
textColorGhostPressed: primaryColorPressed,
|
||||
textColorGhostFocus: primaryColorHover,
|
||||
textColorGhostDisabled: textColor2,
|
||||
border: `1px solid ${borderColorOverlay}`,
|
||||
borderHover: `1px solid ${primaryColorHover}`,
|
||||
borderPressed: `1px solid ${primaryColorPressed}`,
|
||||
borderFocus: `1px solid ${primaryColorHover}`,
|
||||
borderDisabled: `1px solid ${borderColorOverlay}`,
|
||||
rippleColor: primaryColor,
|
||||
// primary
|
||||
colorPrimary: primaryColor,
|
||||
colorHoverPrimary: primaryColorHover,
|
||||
colorPressedPrimary: primaryColorPressed,
|
||||
colorFocusPrimary: primaryColorHover,
|
||||
colorDisabledPrimary: primaryColor,
|
||||
textColorPrimary: baseColor,
|
||||
textColorHoverPrimary: baseColor,
|
||||
textColorPressedPrimary: baseColor,
|
||||
textColorFocusPrimary: baseColor,
|
||||
textColorDisabledPrimary: baseColor,
|
||||
textColorTextPrimary: primaryColor,
|
||||
textColorTextHoverPrimary: primaryColorHover,
|
||||
textColorTextPressedPrimary: primaryColorPressed,
|
||||
textColorTextFocusPrimary: primaryColorHover,
|
||||
textColorTextDisabledPrimary: textColor2,
|
||||
textColorGhostPrimary: primaryColor,
|
||||
textColorGhostHoverPrimary: primaryColorHover,
|
||||
textColorGhostPressedPrimary: primaryColorPressed,
|
||||
textColorGhostFocusPrimary: primaryColorHover,
|
||||
textColorGhostDisabledPrimary: primaryColor,
|
||||
borderPrimary: `1px solid ${primaryColor}`,
|
||||
borderHoverPrimary: `1px solid ${primaryColorHover}`,
|
||||
borderPressedPrimary: `1px solid ${primaryColorPressed}`,
|
||||
borderFocusPrimary: `1px solid ${primaryColorHover}`,
|
||||
borderDisabledPrimary: `1px solid ${primaryColor}`,
|
||||
rippleColorPrimary: primaryColor,
|
||||
// info
|
||||
colorInfo: infoColor,
|
||||
colorHoverInfo: infoColorHover,
|
||||
colorPressedInfo: infoColorPressed,
|
||||
colorFocusInfo: infoColorHover,
|
||||
colorDisabledInfo: infoColor,
|
||||
textColorInfo: baseColor,
|
||||
textColorHoverInfo: baseColor,
|
||||
textColorPressedInfo: baseColor,
|
||||
textColorFocusInfo: baseColor,
|
||||
textColorDisabledInfo: baseColor,
|
||||
textColorTextInfo: infoColor,
|
||||
textColorTextHoverInfo: infoColorHover,
|
||||
textColorTextPressedInfo: infoColorPressed,
|
||||
textColorTextFocusInfo: infoColorHover,
|
||||
textColorTextDisabledInfo: textColor2,
|
||||
textColorGhostInfo: infoColor,
|
||||
textColorGhostHoverInfo: infoColorHover,
|
||||
textColorGhostPressedInfo: infoColorPressed,
|
||||
textColorGhostFocusInfo: infoColorHover,
|
||||
textColorGhostDisabledInfo: infoColor,
|
||||
borderInfo: `1px solid ${infoColor}`,
|
||||
borderHoverInfo: `1px solid ${infoColorHover}`,
|
||||
borderPressedInfo: `1px solid ${infoColorPressed}`,
|
||||
borderFocusInfo: `1px solid ${infoColorHover}`,
|
||||
borderDisabledInfo: `1px solid ${infoColor}`,
|
||||
rippleColorInfo: infoColor,
|
||||
// success
|
||||
colorSuccess: successColor,
|
||||
colorHoverSuccess: successColorHover,
|
||||
colorPressedSuccess: successColorPressed,
|
||||
colorFocusSuccess: successColorHover,
|
||||
colorDisabledSuccess: successColor,
|
||||
textColorSuccess: baseColor,
|
||||
textColorHoverSuccess: baseColor,
|
||||
textColorPressedSuccess: baseColor,
|
||||
textColorFocusSuccess: baseColor,
|
||||
textColorDisabledSuccess: baseColor,
|
||||
textColorTextSuccess: successColor,
|
||||
textColorTextHoverSuccess: successColorHover,
|
||||
textColorTextPressedSuccess: successColorPressed,
|
||||
textColorTextFocusSuccess: successColorHover,
|
||||
textColorTextDisabledSuccess: textColor2,
|
||||
textColorGhostSuccess: successColor,
|
||||
textColorGhostHoverSuccess: successColorHover,
|
||||
textColorGhostPressedSuccess: successColorPressed,
|
||||
textColorGhostFocusSuccess: successColorHover,
|
||||
textColorGhostDisabledSuccess: successColor,
|
||||
borderSuccess: `1px solid ${successColor}`,
|
||||
borderHoverSuccess: `1px solid ${successColorHover}`,
|
||||
borderPressedSuccess: `1px solid ${successColorPressed}`,
|
||||
borderFocusSuccess: `1px solid ${successColorHover}`,
|
||||
borderDisabledSuccess: `1px solid ${successColor}`,
|
||||
rippleColorSuccess: successColor,
|
||||
// warning
|
||||
colorWarning: warningColor,
|
||||
colorHoverWarning: warningColorHover,
|
||||
colorPressedWarning: warningColorPressed,
|
||||
colorFocusWarning: warningColorHover,
|
||||
colorDisabledWarning: warningColor,
|
||||
textColorWarning: baseColor,
|
||||
textColorHoverWarning: baseColor,
|
||||
textColorPressedWarning: baseColor,
|
||||
textColorFocusWarning: baseColor,
|
||||
textColorDisabledWarning: baseColor,
|
||||
textColorTextWarning: warningColor,
|
||||
textColorTextHoverWarning: warningColorHover,
|
||||
textColorTextPressedWarning: warningColorPressed,
|
||||
textColorTextFocusWarning: warningColorHover,
|
||||
textColorTextDisabledWarning: textColor2,
|
||||
textColorGhostWarning: warningColor,
|
||||
textColorGhostHoverWarning: warningColorHover,
|
||||
textColorGhostPressedWarning: warningColorPressed,
|
||||
textColorGhostFocusWarning: warningColorHover,
|
||||
textColorGhostDisabledWarning: warningColor,
|
||||
borderWarning: `1px solid ${warningColor}`,
|
||||
borderHoverWarning: `1px solid ${warningColorHover}`,
|
||||
borderPressedWarning: `1px solid ${warningColorPressed}`,
|
||||
borderFocusWarning: `1px solid ${warningColorHover}`,
|
||||
borderDisabledWarning: `1px solid ${warningColor}`,
|
||||
rippleColorWarning: warningColor,
|
||||
// error
|
||||
colorError: errorColor,
|
||||
colorHoverError: errorColorHover,
|
||||
colorPressedError: errorColorPressed,
|
||||
colorFocusError: errorColorHover,
|
||||
colorDisabledError: errorColor,
|
||||
textColorError: baseColor,
|
||||
textColorHoverError: baseColor,
|
||||
textColorPressedError: baseColor,
|
||||
textColorFocusError: baseColor,
|
||||
textColorDisabledError: baseColor,
|
||||
textColorTextError: errorColor,
|
||||
textColorTextHoverError: errorColorHover,
|
||||
textColorTextPressedError: errorColorPressed,
|
||||
textColorTextFocusError: errorColorHover,
|
||||
textColorTextDisabledError: textColor2,
|
||||
textColorGhostError: errorColor,
|
||||
textColorGhostHoverError: errorColorHover,
|
||||
textColorGhostPressedError: errorColorPressed,
|
||||
textColorGhostFocusError: errorColorHover,
|
||||
textColorGhostDisabledError: errorColor,
|
||||
borderError: `1px solid ${errorColor}`,
|
||||
borderHoverError: `1px solid ${errorColorHover}`,
|
||||
borderPressedError: `1px solid ${errorColorPressed}`,
|
||||
borderFocusError: `1px solid ${errorColorHover}`,
|
||||
borderDisabledError: `1px solid ${errorColor}`,
|
||||
rippleColorError: errorColor
|
||||
}
|
||||
}
|
||||
}
|
||||
226
src/button/styles/light.ts
Normal file
226
src/button/styles/light.ts
Normal file
@ -0,0 +1,226 @@
|
||||
import commonVariables from './_common'
|
||||
import { commonLight } from '../../_styles/new-common'
|
||||
import type { ThemeCommonVars } from '../../_styles/new-common'
|
||||
import type { Theme } from '../../_mixins'
|
||||
|
||||
const self = (vars: ThemeCommonVars) => {
|
||||
const {
|
||||
heightTiny,
|
||||
heightSmall,
|
||||
heightMedium,
|
||||
heightLarge,
|
||||
borderRadius,
|
||||
fontSizeTiny,
|
||||
fontSizeSmall,
|
||||
fontSizeMedium,
|
||||
fontSizeLarge,
|
||||
opacityDisabled,
|
||||
textColor2,
|
||||
primaryColorHover,
|
||||
primaryColorPressed,
|
||||
borderColorOverlay,
|
||||
primaryColor,
|
||||
baseColor,
|
||||
infoColor,
|
||||
infoColorHover,
|
||||
infoColorPressed,
|
||||
successColor,
|
||||
successColorHover,
|
||||
successColorPressed,
|
||||
warningColor,
|
||||
warningColorHover,
|
||||
warningColorPressed,
|
||||
errorColor,
|
||||
errorColorHover,
|
||||
errorColorPressed
|
||||
} = vars
|
||||
return {
|
||||
...commonVariables,
|
||||
heightTiny: heightTiny,
|
||||
heightSmall: heightSmall,
|
||||
heightMedium: heightMedium,
|
||||
heightLarge: heightLarge,
|
||||
borderRadiusTiny: borderRadius,
|
||||
borderRadiusSmall: borderRadius,
|
||||
borderRadiusMedium: borderRadius,
|
||||
borderRadiusLarge: borderRadius,
|
||||
fontSizeTiny: fontSizeTiny,
|
||||
fontSizeSmall: fontSizeSmall,
|
||||
fontSizeMedium: fontSizeMedium,
|
||||
fontSizeLarge: fontSizeLarge,
|
||||
opacityDisabled: opacityDisabled,
|
||||
// default type
|
||||
color: 'transparent',
|
||||
colorHover: 'transparent',
|
||||
colorPressed: 'transparent',
|
||||
colorFocus: 'transparent',
|
||||
colorDisabled: 'transparent',
|
||||
textColor: textColor2,
|
||||
textColorHover: primaryColorHover,
|
||||
textColorPressed: primaryColorPressed,
|
||||
textColorFocus: primaryColorHover,
|
||||
textColorDisabled: textColor2,
|
||||
textColorText: textColor2,
|
||||
textColorTextHover: primaryColorHover,
|
||||
textColorTextPressed: primaryColorPressed,
|
||||
textColorTextFocus: primaryColorHover,
|
||||
textColorTextDisabled: textColor2,
|
||||
textColorGhost: textColor2,
|
||||
textColorGhostHover: primaryColorHover,
|
||||
textColorGhostPressed: primaryColorPressed,
|
||||
textColorGhostFocus: primaryColorHover,
|
||||
textColorGhostDisabled: textColor2,
|
||||
border: `1px solid ${borderColorOverlay}`,
|
||||
borderHover: `1px solid ${primaryColorHover}`,
|
||||
borderPressed: `1px solid ${primaryColorPressed}`,
|
||||
borderFocus: `1px solid ${primaryColorHover}`,
|
||||
borderDisabled: `1px solid ${borderColorOverlay}`,
|
||||
rippleColor: primaryColor,
|
||||
// primary
|
||||
colorPrimary: primaryColor,
|
||||
colorHoverPrimary: primaryColorHover,
|
||||
colorPressedPrimary: primaryColorPressed,
|
||||
colorFocusPrimary: primaryColorHover,
|
||||
colorDisabledPrimary: primaryColor,
|
||||
textColorPrimary: baseColor,
|
||||
textColorHoverPrimary: baseColor,
|
||||
textColorPressedPrimary: baseColor,
|
||||
textColorFocusPrimary: baseColor,
|
||||
textColorDisabledPrimary: baseColor,
|
||||
textColorTextPrimary: primaryColor,
|
||||
textColorTextHoverPrimary: primaryColorHover,
|
||||
textColorTextPressedPrimary: primaryColorPressed,
|
||||
textColorTextFocusPrimary: primaryColorHover,
|
||||
textColorTextDisabledPrimary: textColor2,
|
||||
textColorGhostPrimary: primaryColor,
|
||||
textColorGhostHoverPrimary: primaryColorHover,
|
||||
textColorGhostPressedPrimary: primaryColorPressed,
|
||||
textColorGhostFocusPrimary: primaryColorHover,
|
||||
textColorGhostDisabledPrimary: primaryColor,
|
||||
borderPrimary: `1px solid ${primaryColor}`,
|
||||
borderHoverPrimary: `1px solid ${primaryColorHover}`,
|
||||
borderPressedPrimary: `1px solid ${primaryColorPressed}`,
|
||||
borderFocusPrimary: `1px solid ${primaryColorHover}`,
|
||||
borderDisabledPrimary: `1px solid ${primaryColor}`,
|
||||
rippleColorPrimary: primaryColor,
|
||||
// info
|
||||
colorInfo: infoColor,
|
||||
colorHoverInfo: infoColorHover,
|
||||
colorPressedInfo: infoColorPressed,
|
||||
colorFocusInfo: infoColorHover,
|
||||
colorDisabledInfo: infoColor,
|
||||
textColorInfo: baseColor,
|
||||
textColorHoverInfo: baseColor,
|
||||
textColorPressedInfo: baseColor,
|
||||
textColorFocusInfo: baseColor,
|
||||
textColorDisabledInfo: baseColor,
|
||||
textColorTextInfo: infoColor,
|
||||
textColorTextHoverInfo: infoColorHover,
|
||||
textColorTextPressedInfo: infoColorPressed,
|
||||
textColorTextFocusInfo: infoColorHover,
|
||||
textColorTextDisabledInfo: textColor2,
|
||||
textColorGhostInfo: infoColor,
|
||||
textColorGhostHoverInfo: infoColorHover,
|
||||
textColorGhostPressedInfo: infoColorPressed,
|
||||
textColorGhostFocusInfo: infoColorHover,
|
||||
textColorGhostDisabledInfo: infoColor,
|
||||
borderInfo: `1px solid ${infoColor}`,
|
||||
borderHoverInfo: `1px solid ${infoColorHover}`,
|
||||
borderPressedInfo: `1px solid ${infoColorPressed}`,
|
||||
borderFocusInfo: `1px solid ${infoColorHover}`,
|
||||
borderDisabledInfo: `1px solid ${infoColor}`,
|
||||
rippleColorInfo: infoColor,
|
||||
// success
|
||||
colorSuccess: successColor,
|
||||
colorHoverSuccess: successColorHover,
|
||||
colorPressedSuccess: successColorPressed,
|
||||
colorFocusSuccess: successColorHover,
|
||||
colorDisabledSuccess: successColor,
|
||||
textColorSuccess: baseColor,
|
||||
textColorHoverSuccess: baseColor,
|
||||
textColorPressedSuccess: baseColor,
|
||||
textColorFocusSuccess: baseColor,
|
||||
textColorDisabledSuccess: baseColor,
|
||||
textColorTextSuccess: successColor,
|
||||
textColorTextHoverSuccess: successColorHover,
|
||||
textColorTextPressedSuccess: successColorPressed,
|
||||
textColorTextFocusSuccess: successColorHover,
|
||||
textColorTextDisabledSuccess: textColor2,
|
||||
textColorGhostSuccess: successColor,
|
||||
textColorGhostHoverSuccess: successColorHover,
|
||||
textColorGhostPressedSuccess: successColorPressed,
|
||||
textColorGhostFocusSuccess: successColorHover,
|
||||
textColorGhostDisabledSuccess: successColor,
|
||||
borderSuccess: `1px solid ${successColor}`,
|
||||
borderHoverSuccess: `1px solid ${successColorHover}`,
|
||||
borderPressedSuccess: `1px solid ${successColorPressed}`,
|
||||
borderFocusSuccess: `1px solid ${successColorHover}`,
|
||||
borderDisabledSuccess: `1px solid ${successColor}`,
|
||||
rippleColorSuccess: successColor,
|
||||
// warning
|
||||
colorWarning: warningColor,
|
||||
colorHoverWarning: warningColorHover,
|
||||
colorPressedWarning: warningColorPressed,
|
||||
colorFocusWarning: warningColorHover,
|
||||
colorDisabledWarning: warningColor,
|
||||
textColorWarning: baseColor,
|
||||
textColorHoverWarning: baseColor,
|
||||
textColorPressedWarning: baseColor,
|
||||
textColorFocusWarning: baseColor,
|
||||
textColorDisabledWarning: baseColor,
|
||||
textColorTextWarning: warningColor,
|
||||
textColorTextHoverWarning: warningColorHover,
|
||||
textColorTextPressedWarning: warningColorPressed,
|
||||
textColorTextFocusWarning: warningColorHover,
|
||||
textColorTextDisabledWarning: textColor2,
|
||||
textColorGhostWarning: warningColor,
|
||||
textColorGhostHoverWarning: warningColorHover,
|
||||
textColorGhostPressedWarning: warningColorPressed,
|
||||
textColorGhostFocusWarning: warningColorHover,
|
||||
textColorGhostDisabledWarning: warningColor,
|
||||
borderWarning: `1px solid ${warningColor}`,
|
||||
borderHoverWarning: `1px solid ${warningColorHover}`,
|
||||
borderPressedWarning: `1px solid ${warningColorPressed}`,
|
||||
borderFocusWarning: `1px solid ${warningColorHover}`,
|
||||
borderDisabledWarning: `1px solid ${warningColor}`,
|
||||
rippleColorWarning: warningColor,
|
||||
// error
|
||||
colorError: errorColor,
|
||||
colorHoverError: errorColorHover,
|
||||
colorPressedError: errorColorPressed,
|
||||
colorFocusError: errorColorHover,
|
||||
colorDisabledError: errorColor,
|
||||
textColorError: baseColor,
|
||||
textColorHoverError: baseColor,
|
||||
textColorPressedError: baseColor,
|
||||
textColorFocusError: baseColor,
|
||||
textColorDisabledError: baseColor,
|
||||
textColorTextError: errorColor,
|
||||
textColorTextHoverError: errorColorHover,
|
||||
textColorTextPressedError: errorColorPressed,
|
||||
textColorTextFocusError: errorColorHover,
|
||||
textColorTextDisabledError: textColor2,
|
||||
textColorGhostError: errorColor,
|
||||
textColorGhostHoverError: errorColorHover,
|
||||
textColorGhostPressedError: errorColorPressed,
|
||||
textColorGhostFocusError: errorColorHover,
|
||||
textColorGhostDisabledError: errorColor,
|
||||
borderError: `1px solid ${errorColor}`,
|
||||
borderHoverError: `1px solid ${errorColorHover}`,
|
||||
borderPressedError: `1px solid ${errorColorPressed}`,
|
||||
borderFocusError: `1px solid ${errorColorHover}`,
|
||||
borderDisabledError: `1px solid ${errorColor}`,
|
||||
rippleColorError: errorColor
|
||||
}
|
||||
}
|
||||
|
||||
export type ButtonThemeVars = ReturnType<typeof self>
|
||||
|
||||
const buttonLight: Theme<ButtonThemeVars> = {
|
||||
name: 'Button',
|
||||
common: commonLight,
|
||||
self
|
||||
}
|
||||
|
||||
export default buttonLight
|
||||
export type ButtonTheme = typeof buttonLight
|
||||
Loading…
Reference in New Issue
Block a user