mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
refactor(alert): use cssr
This commit is contained in:
07akioni
parent
32c589a617
commit
e86c737101
@ -48,7 +48,7 @@ export default c([
|
||||
])
|
||||
`)
|
||||
|
||||
fs.writeFileSync(path.resolve(cssrPath, 'index.js'), `import baseStyle from './themed-base.cssr.js'
|
||||
fs.writeFileSync(path.resolve(cssrPath, 'index.js'), `import themedBaseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
@ -56,7 +56,7 @@ export default [
|
||||
watch: [
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: baseStyle
|
||||
CNode: themedBaseStyle
|
||||
}
|
||||
]
|
||||
`)
|
||||
|
||||
@ -73,7 +73,7 @@ function setupMutableStyle (
|
||||
if (isStyleMounted(mountId)) return
|
||||
const cssrPropsGetter = styles[renderedTheme][options.name]
|
||||
if (process.env.NODE_ENV !== 'production' && !cssrPropsGetter) {
|
||||
console.error(`[naive-ui/mixins/usecssr]: ${options.name}'s style not found`)
|
||||
console.error(`[naive-ui/mixins/usecssr]: ${options.name}'s style not found`, styles)
|
||||
}
|
||||
// themeVariables: { base, derived }
|
||||
const themeVariables = getThemeVariables(naive, renderedTheme)
|
||||
|
||||
@ -1,110 +0,0 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
@mixin alert-type-mixin ($type) {
|
||||
@include m($type + '-type') {
|
||||
background-color: map-get($--alert-background-color, $type);
|
||||
box-shadow: inset 0 0 0 1.2px map-get($--alert-border-color, $type);
|
||||
text-align: left;
|
||||
@include e(icon) {
|
||||
@include b(icon) {
|
||||
fill: map-get($--alert-icon-color, $type);
|
||||
stroke: map-get($--alert-icon-color, $type);
|
||||
}
|
||||
}
|
||||
@include b(alert-body) {
|
||||
@include e(title) {
|
||||
color: map-get($--alert-title-text-color, $type);
|
||||
}
|
||||
@include e(content) {
|
||||
color: map-get($--alert-content-text-color, $type);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(alert) {
|
||||
@include once {
|
||||
line-height: 1.75;
|
||||
@include fade-in-height-expand-transition($original-transition: (transform .3s $--n-ease-in-out-cubic-bezier));
|
||||
&.#{block(fade-in-height-expand-transition)}-leave, &.#{block(fade-in-height-expand-transition)}-enter-to {
|
||||
transform: scale(1);
|
||||
}
|
||||
&.#{block(fade-in-height-expand-transition)}-leave-to, &.#{block(fade-in-height-expand-transition)}-enter {
|
||||
transform: scale(.9);
|
||||
}
|
||||
border-radius: $--n-alert-border-radius;
|
||||
position: relative;
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
|
||||
@include e(icon) {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
@include b(icon) {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
@include e(close) {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 14px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
@include b(icon) {
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
@include b(alert-body) {
|
||||
padding: 16px 16px 16px 48px;
|
||||
@include e(title) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
font-weight: $--n-strong-weight;
|
||||
& + {
|
||||
@include e(content) {
|
||||
margin-top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(content) {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@include m(no-icon) {
|
||||
@include b(alert-body) {
|
||||
padding-left: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(close) {
|
||||
@include b(icon) {
|
||||
fill: map-get($--alert-close-color, 'default');
|
||||
stroke: map-get($--alert-close-color, 'default');
|
||||
}
|
||||
&:hover {
|
||||
@include b(icon) {
|
||||
fill: map-get($--alert-close-color, 'hover');
|
||||
stroke: map-get($--alert-close-color, 'hover');
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
@include b(icon) {
|
||||
fill: map-get($--alert-close-color, 'active');
|
||||
stroke: map-get($--alert-close-color, 'active');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include alert-type-mixin('default');
|
||||
@include alert-type-mixin('success');
|
||||
@include alert-type-mixin('info');
|
||||
@include alert-type-mixin('error');
|
||||
@include alert-type-mixin('warning');
|
||||
}
|
||||
}
|
||||
@ -20,7 +20,6 @@
|
||||
@import "./Tooltip.scss";
|
||||
@import "./Notification.scss";
|
||||
@import "./Pagination.scss";
|
||||
@import './Alert.scss';
|
||||
@import './DatePicker.scss';
|
||||
@import './Radio.scss';
|
||||
@import './Form.scss';
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
* need to be refined later.
|
||||
*/
|
||||
|
||||
import { over } from 'lodash-es'
|
||||
|
||||
function floor (number) {
|
||||
return Math.floor(Number(number))
|
||||
}
|
||||
@ -87,6 +89,8 @@ export function read (color) {
|
||||
* @param {[number, number, number, number]} overlay
|
||||
*/
|
||||
export function composite (base, overlay) {
|
||||
if (!Array.isArray(base)) base = read(base)
|
||||
if (!Array.isArray(overlay)) overlay = read(overlay)
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (base.length === 3 && base[3] !== 1) {
|
||||
console.error('[naive-ui/utils/color/composite]: base color has alpha')
|
||||
|
||||
@ -69,14 +69,16 @@
|
||||
|
||||
<script>
|
||||
import NIcon from '../../Icon'
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import mdCheckmarkCircle from '../../_icons/md-checkmark-circle'
|
||||
import mdAlert from '../../_icons/md-alert'
|
||||
import mdInformationCircle from '../../_icons/md-information-circle'
|
||||
import mdCloseCircle from '../../_icons/md-close-circle'
|
||||
import mdClose from '../../_icons/md-close'
|
||||
import FadeInHeightExpandTransition from '../../_transition/FadeInHeightExpandTransition'
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles'
|
||||
|
||||
export default {
|
||||
name: 'Alert',
|
||||
@ -89,7 +91,11 @@ export default {
|
||||
FadeInHeightExpandTransition,
|
||||
mdClose
|
||||
},
|
||||
mixins: [ withapp, themeable ],
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable,
|
||||
usecssr(styles)
|
||||
],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
import themedBaseStyle from './themed-base.cssr.js'
|
||||
import themedTypeStyle from './themed-type.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
@ -6,6 +7,14 @@ export default [
|
||||
watch: [
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: baseStyle
|
||||
CNode: themedBaseStyle
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
watch: [
|
||||
'type',
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: themedTypeStyle
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,6 +1,85 @@
|
||||
import { c, cTB, cB, cE, cM, cNotM } from '../../../_utils/cssr'
|
||||
import { c, cTB, cB, cE, cM } from '../../../_utils/cssr'
|
||||
import fadeInHeightExpandTranstion from '../../../styles/_transitions/fade-in-height-expand'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const { easeInOutCubicBezier } = props.$base
|
||||
const { borderRadius, titleFontWeight } = props.$local
|
||||
return cTB('alert', {
|
||||
boxSizing: 'border-box',
|
||||
lineHeight: 1.75,
|
||||
borderRadius,
|
||||
position: 'relative',
|
||||
transition: `
|
||||
background-color .3s ${easeInOutCubicBezier},
|
||||
border-color .3s ${easeInOutCubicBezier}
|
||||
`
|
||||
}, [
|
||||
fadeInHeightExpandTranstion({
|
||||
originalTransition: `transform .3s ${easeInOutCubicBezier}`,
|
||||
enterToProps: {
|
||||
transform: 'scale(1)'
|
||||
},
|
||||
leaveToProps: {
|
||||
transform: 'scale(0.9)'
|
||||
}
|
||||
}),
|
||||
cE('icon', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
`
|
||||
}, [
|
||||
cB('icon', {
|
||||
fontSize: '26px'
|
||||
})
|
||||
]),
|
||||
cE('close', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 14px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
`
|
||||
}, [
|
||||
cB('icon', {
|
||||
raw: `
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('alert-body', {
|
||||
padding: '16px 16px 16px 48px'
|
||||
}, [
|
||||
cE('title', {
|
||||
transition: `color .3s ${easeInOutCubicBezier}`,
|
||||
fontSize: '16px',
|
||||
lineHeight: '19px',
|
||||
fontWeight: titleFontWeight
|
||||
}, [
|
||||
c('& +', [
|
||||
cE('content', {
|
||||
marginTop: '9px'
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('content', {
|
||||
transition: `color .3s ${easeInOutCubicBezier}`,
|
||||
fontSize: '14px'
|
||||
})
|
||||
]),
|
||||
cM('no-icon', [
|
||||
cB('alert-body', {
|
||||
paddingLeft: '19px'
|
||||
})
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
|
||||
58
src/alert/src/styles/themed-type.cssr.js
Normal file
58
src/alert/src/styles/themed-type.cssr.js
Normal file
@ -0,0 +1,58 @@
|
||||
import { c, cTB, cB, cE, cM } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const type = props.$instance.type
|
||||
const pallete = props.$local[type]
|
||||
const {
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
iconColor,
|
||||
titleTextColor,
|
||||
contentTextColor,
|
||||
closeColor,
|
||||
closeHoverColor,
|
||||
closeActiveColor
|
||||
} = pallete
|
||||
return cTB('alert', [
|
||||
cM(type + '-type', {
|
||||
backgroundColor,
|
||||
border: `1px solid ${borderColor}`,
|
||||
textAlign: 'start'
|
||||
}, [
|
||||
cE('close', [
|
||||
cB('icon', {
|
||||
fill: closeColor,
|
||||
stroke: closeColor
|
||||
}),
|
||||
c('&:hover', [
|
||||
cB('icon', {
|
||||
fill: closeHoverColor,
|
||||
stroke: closeHoverColor
|
||||
})
|
||||
]),
|
||||
c('&:active', [
|
||||
cB('icon', {
|
||||
fill: closeActiveColor,
|
||||
stroke: closeActiveColor
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('icon', [
|
||||
cB('icon', {
|
||||
fill: iconColor,
|
||||
stroke: iconColor
|
||||
})
|
||||
]),
|
||||
cB('alert-body', [
|
||||
cE('title', {
|
||||
color: titleTextColor
|
||||
}),
|
||||
cE('content', {
|
||||
color: contentTextColor
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
@ -1,9 +1,80 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import { changeColor } from '../../_utils/color/index'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
name: '',
|
||||
name: 'Alert',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
return {}
|
||||
const {
|
||||
borderRadius,
|
||||
strongFontWeight
|
||||
} = base
|
||||
const {
|
||||
dividerOverlayColor,
|
||||
inputBackgroundOverlayColor,
|
||||
primaryTextOverlayColor,
|
||||
secondaryTextOverlayColor,
|
||||
closeOverlayColor,
|
||||
closeHoverOverlayColor,
|
||||
closeActiveOverlayColor,
|
||||
infoHsColor,
|
||||
successHsColor,
|
||||
warningHsColor,
|
||||
errorHsColor
|
||||
} = derived
|
||||
return {
|
||||
titleFontWeight: strongFontWeight,
|
||||
borderRadius,
|
||||
default: {
|
||||
borderColor: dividerOverlayColor,
|
||||
backgroundColor: inputBackgroundOverlayColor,
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: secondaryTextOverlayColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
},
|
||||
info: {
|
||||
borderColor: changeColor(infoHsColor, { alpha: 0.35 }),
|
||||
backgroundColor: changeColor(infoHsColor, { alpha: 0.25 }),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: infoHsColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
},
|
||||
success: {
|
||||
borderColor: changeColor(successHsColor, { alpha: 0.35 }),
|
||||
backgroundColor: changeColor(successHsColor, { alpha: 0.25 }),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: successHsColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
},
|
||||
warning: {
|
||||
borderColor: changeColor(warningHsColor, { alpha: 0.35 }),
|
||||
backgroundColor: changeColor(warningHsColor, { alpha: 0.25 }),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: warningHsColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
},
|
||||
error: {
|
||||
borderColor: changeColor(errorHsColor, { alpha: 0.35 }),
|
||||
backgroundColor: changeColor(errorHsColor, { alpha: 0.25 }),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: errorHsColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeOverlayColor,
|
||||
closeHoverColor: closeHoverOverlayColor,
|
||||
closeActiveColor: closeActiveOverlayColor
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,9 +1,81 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import { composite, changeColor } from '../../_utils/color/index'
|
||||
|
||||
export default create({
|
||||
theme: 'light',
|
||||
name: '',
|
||||
name: 'Alert',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
return {}
|
||||
const {
|
||||
borderRadius,
|
||||
strongFontWeight
|
||||
} = base
|
||||
const {
|
||||
baseBackgroundColor,
|
||||
dividerOverlayColor,
|
||||
actionBackgroundColor,
|
||||
primaryTextOverlayColor,
|
||||
secondaryTextOverlayColor,
|
||||
closeColor,
|
||||
closeHoverColor,
|
||||
closeActiveColor,
|
||||
infoColor,
|
||||
successColor,
|
||||
warningColor,
|
||||
errorColor
|
||||
} = derived
|
||||
return {
|
||||
titleFontWeight: strongFontWeight,
|
||||
borderRadius,
|
||||
default: {
|
||||
borderColor: dividerOverlayColor,
|
||||
backgroundColor: actionBackgroundColor,
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: secondaryTextOverlayColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
},
|
||||
info: {
|
||||
borderColor: composite(baseBackgroundColor, changeColor(infoColor, { alpha: 0.25 })),
|
||||
backgroundColor: composite(baseBackgroundColor, changeColor(infoColor, { alpha: 0.08 })),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: infoColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
},
|
||||
success: {
|
||||
borderColor: composite(baseBackgroundColor, changeColor(successColor, { alpha: 0.25 })),
|
||||
backgroundColor: composite(baseBackgroundColor, changeColor(successColor, { alpha: 0.08 })),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: successColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
},
|
||||
warning: {
|
||||
borderColor: composite(baseBackgroundColor, changeColor(warningColor, { alpha: 0.33 })),
|
||||
backgroundColor: composite(baseBackgroundColor, changeColor(warningColor, { alpha: 0.08 })),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: warningColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
},
|
||||
error: {
|
||||
borderColor: composite(baseBackgroundColor, changeColor(errorColor, { alpha: 0.25 })),
|
||||
backgroundColor: composite(baseBackgroundColor, changeColor(errorColor, { alpha: 0.08 })),
|
||||
titleTextColor: primaryTextOverlayColor,
|
||||
iconColor: errorColor,
|
||||
contentTextColor: secondaryTextOverlayColor,
|
||||
closeColor: closeColor,
|
||||
closeHoverColor: closeHoverColor,
|
||||
closeActiveColor: closeActiveColor
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -93,6 +93,8 @@ import tagLightStyle from './tag/styles/light'
|
||||
import tagDarkStyle from './tag/styles/dark'
|
||||
import dynamicTagsLightStyle from './dynamic-tags/styles/light'
|
||||
import dynamicTagsDarkStyle from './dynamic-tags/styles/dark'
|
||||
import alertLightStyle from './alert/styles/light'
|
||||
import alertDarkStyle from './alert/styles/dark'
|
||||
|
||||
// Can be remove after refactoring
|
||||
import baseSelectionLightStyle from './_base/selection/styles/light'
|
||||
@ -208,6 +210,8 @@ export default create({
|
||||
tagDarkStyle,
|
||||
dynamicTagsLightStyle,
|
||||
dynamicTagsDarkStyle,
|
||||
alertLightStyle,
|
||||
alertDarkStyle,
|
||||
// Can be remove after refactoring
|
||||
baseSelectionLightStyle,
|
||||
baseSelectionDarkStyle
|
||||
|
||||
@ -9,13 +9,17 @@ export default function ({
|
||||
duration = '.3s',
|
||||
originalTransition = '',
|
||||
leavingDelay = '0s',
|
||||
foldPadding = false
|
||||
foldPadding = false,
|
||||
enterToProps = null,
|
||||
leaveToProps = null
|
||||
} = {}) {
|
||||
return [
|
||||
c(`&.${namespace}-fade-in-height-expand-transition-leave, &.${namespace}-fade-in-height-expand-transition-enter-to`, {
|
||||
...enterToProps,
|
||||
opacity: 1
|
||||
}),
|
||||
c(`&.${namespace}-fade-in-height-expand-transition-leave-to, &.${namespace}-fade-in-height-expand-transition-enter`, {
|
||||
...leaveToProps,
|
||||
opacity: 0,
|
||||
marginTop: '0 !important',
|
||||
marginBottom: '0 !important',
|
||||
|
||||
@ -21,6 +21,8 @@ export default create({
|
||||
alpha4: '0.38',
|
||||
alpha5: '0.28',
|
||||
|
||||
alphaClose: '0.52',
|
||||
|
||||
alphaDisabled: '0.6',
|
||||
alphaDisabledInput: '0.06',
|
||||
alphaPending: '0.09',
|
||||
@ -149,18 +151,17 @@ export default create({
|
||||
borderOverlayColor: overlay(base.alphaBorder),
|
||||
|
||||
// close
|
||||
closeHoverColor: neutral(base.alpha3 * 1.25),
|
||||
closeHoverOverlayColor: overlay(base.alpha3 * 1.25),
|
||||
closeColor: neutral(base.alpha3),
|
||||
closeOverlayColor: overlay(base.alpha3),
|
||||
closeActiveColor: neutral(base.alpha3 * 0.8),
|
||||
closeActiveOverlayColor: overlay(base.alpha3 * 0.8),
|
||||
closeHoverColor: neutral(base.alphaClose * 1.25),
|
||||
closeHoverOverlayColor: overlay(base.alphaClose * 1.25),
|
||||
closeColor: neutral(base.alphaClose),
|
||||
closeOverlayColor: overlay(base.alphaClose),
|
||||
closeActiveColor: neutral(base.alphaClose * 0.8),
|
||||
closeActiveOverlayColor: overlay(base.alphaClose * 0.8),
|
||||
disabledCloseColor: neutral(base.alpha4),
|
||||
disabledCloseOverlayColor: overlay(base.alpha4),
|
||||
closeOpacity: base.alpha3,
|
||||
closeHoverOpacity: base.alpha3 * 1.25,
|
||||
closeActiveOpacity: base.alpha3 * 0.8,
|
||||
closeDisabledOpacity: base.alpha4,
|
||||
closeOpacity: base.alphaClose,
|
||||
closeHoverOpacity: base.alphaClose * 1.25,
|
||||
closeActiveOpacity: base.alphaClose * 0.8,
|
||||
|
||||
scrollbarBackgroundOverlayColor: overlay(base.alphaScrollbar),
|
||||
scrollbarHoverBackgroundOverlayColor: overlay(base.alphaScrollbarHover),
|
||||
|
||||
@ -21,6 +21,8 @@ export default create({
|
||||
alpha4: '0.24', // disabled text, placeholder, icon
|
||||
alpha5: '0.18', // disabled placeholder
|
||||
|
||||
alphaClose: '0.6',
|
||||
|
||||
alphaDisabled: '0.5',
|
||||
alphaDisabledInput: '0.02',
|
||||
alphaPending: '0.04',
|
||||
@ -149,18 +151,17 @@ export default create({
|
||||
borderOverlayColor: overlay(base.alphaBorder),
|
||||
|
||||
// close
|
||||
closeHoverColor: neutral(base.alpha3 * 0.8),
|
||||
closeHoverOverlayColor: overlay(base.alpha3 * 0.8),
|
||||
closeColor: neutral(base.alpha3),
|
||||
closeOverlayColor: overlay(base.alpha3),
|
||||
closeActiveColor: neutral(base.alpha3 * 1.2),
|
||||
closeActiveOverlayColor: overlay(base.alpha3 * 1.2),
|
||||
closeHoverColor: neutral(base.alphaClose * 0.8),
|
||||
closeHoverOverlayColor: overlay(base.alphaClose * 0.8),
|
||||
closeColor: neutral(base.alphaClose),
|
||||
closeOverlayColor: overlay(base.alphaClose),
|
||||
closeActiveColor: neutral(base.alphaClose * 1.25),
|
||||
closeActiveOverlayColor: overlay(base.alphaClose * 1.25),
|
||||
disabledCloseColor: neutral(base.alpha4),
|
||||
disabledCloseOverlayColor: overlay(base.alpha4),
|
||||
closeOpacity: base.alpha3,
|
||||
closeHoverOpacity: base.alpha3 * 0.8,
|
||||
closeActiveOpacity: base.alpha3 * 1.25,
|
||||
closeDisabledOpacity: base.alpha4,
|
||||
closeOpacity: base.alphaClose,
|
||||
closeHoverOpacity: base.alphaClose * 0.8,
|
||||
closeActiveOpacity: base.alphaClose * 1.25,
|
||||
|
||||
scrollbarBackgroundOverlayColor: overlay(base.alphaScrollbar),
|
||||
scrollbarHoverBackgroundOverlayColor: overlay(base.alphaScrollbarHover),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user