mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
refactor(typography): text use cssr
This commit is contained in:
07akioni
parent
52956de071
commit
1b313b8b2d
@ -1,74 +1,74 @@
|
||||
@import './mixins/mixins.scss';
|
||||
// @import './mixins/mixins.scss';
|
||||
|
||||
@mixin header-mixin($level) {
|
||||
@include b('h' + $level) {
|
||||
@include once {
|
||||
font-size: map-get($--n-typography-header-font-size, $level);
|
||||
font-weight: $--n-strong-weight;
|
||||
margin: map-get($--n-typography-header-margin, $level);
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
&:first-child {
|
||||
margin-top: 0
|
||||
}
|
||||
}
|
||||
color: map-get($--typography-header-text-color, 'default');
|
||||
@include m(prefix-bar) {
|
||||
@include once {
|
||||
position: relative;
|
||||
padding-left: map-get($--n-typography-header-prefix-width, $level);
|
||||
@include m(align-text) {
|
||||
padding-left: 0;
|
||||
&::before {
|
||||
left: -(map-get($--n-typography-header-prefix-width, $level));
|
||||
}
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
@include once {
|
||||
content: '';
|
||||
width: map-get($--n-typography-header-bar-width, $level);
|
||||
border-radius: map-get($--n-typography-header-bar-width, $level) / 2;
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
background-color: map-get($--typography-header-prefix-color, 'default');
|
||||
}
|
||||
@include m(default-type) {
|
||||
&::before {
|
||||
background-color: map-get($--typography-header-prefix-color, 'default');
|
||||
}
|
||||
}
|
||||
@include m(primary-type) {
|
||||
&::before {
|
||||
background-color: map-get($--typography-header-prefix-color, 'primary');
|
||||
}
|
||||
}
|
||||
@include m(info-type) {
|
||||
&::before {
|
||||
background-color: map-get($--typography-header-prefix-color, 'info');
|
||||
}
|
||||
}
|
||||
@include m(success-type) {
|
||||
&::before {
|
||||
background-color: map-get($--typography-header-prefix-color, 'success');
|
||||
}
|
||||
}
|
||||
@include m(warning-type) {
|
||||
&::before {
|
||||
background-color: map-get($--typography-header-prefix-color, 'warning');
|
||||
}
|
||||
}
|
||||
@include m(error-type) {
|
||||
&::before {
|
||||
background-color: map-get($--typography-header-prefix-color, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @mixin header-mixin($level) {
|
||||
// @include b('h' + $level) {
|
||||
// @include once {
|
||||
// font-size: map-get($--n-typography-header-font-size, $level);
|
||||
// font-weight: $--n-strong-weight;
|
||||
// margin: map-get($--n-typography-header-margin, $level);
|
||||
// transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// &:first-child {
|
||||
// margin-top: 0
|
||||
// }
|
||||
// }
|
||||
// color: map-get($--typography-header-text-color, 'default');
|
||||
// @include m(prefix-bar) {
|
||||
// @include once {
|
||||
// position: relative;
|
||||
// padding-left: map-get($--n-typography-header-prefix-width, $level);
|
||||
// @include m(align-text) {
|
||||
// padding-left: 0;
|
||||
// &::before {
|
||||
// left: -(map-get($--n-typography-header-prefix-width, $level));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &::before {
|
||||
// @include once {
|
||||
// content: '';
|
||||
// width: map-get($--n-typography-header-bar-width, $level);
|
||||
// border-radius: map-get($--n-typography-header-bar-width, $level) / 2;
|
||||
// transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// position: absolute;
|
||||
// }
|
||||
// background-color: map-get($--typography-header-prefix-color, 'default');
|
||||
// }
|
||||
// @include m(default-type) {
|
||||
// &::before {
|
||||
// background-color: map-get($--typography-header-prefix-color, 'default');
|
||||
// }
|
||||
// }
|
||||
// @include m(primary-type) {
|
||||
// &::before {
|
||||
// background-color: map-get($--typography-header-prefix-color, 'primary');
|
||||
// }
|
||||
// }
|
||||
// @include m(info-type) {
|
||||
// &::before {
|
||||
// background-color: map-get($--typography-header-prefix-color, 'info');
|
||||
// }
|
||||
// }
|
||||
// @include m(success-type) {
|
||||
// &::before {
|
||||
// background-color: map-get($--typography-header-prefix-color, 'success');
|
||||
// }
|
||||
// }
|
||||
// @include m(warning-type) {
|
||||
// &::before {
|
||||
// background-color: map-get($--typography-header-prefix-color, 'warning');
|
||||
// }
|
||||
// }
|
||||
// @include m(error-type) {
|
||||
// &::before {
|
||||
// background-color: map-get($--typography-header-prefix-color, 'error');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@include themes-mixin {
|
||||
// @include header-mixin('1');
|
||||
@ -146,76 +146,76 @@
|
||||
// text-decoration-color: map-get($--typography-a-text-color, 'default');
|
||||
// color: map-get($--typography-a-text-color, 'default');
|
||||
// }
|
||||
@include b(text) {
|
||||
@include once {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
@include m(strong) {
|
||||
font-weight: $--n-strong-weight;
|
||||
color: map-get($--typography-text-text-color, 'strong');
|
||||
}
|
||||
@include m(italic) {
|
||||
font-style: italic;
|
||||
}
|
||||
@include m(underline) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
color: map-get($--typography-text-text-color, 'default');
|
||||
@include m(code) {
|
||||
@include once {
|
||||
line-height: 1.4;
|
||||
font-family: $--n-mono-font-family;
|
||||
transition:
|
||||
color .3s $--n-ease-in-out-cubic-bezier,
|
||||
background-color .3s $--n-ease-in-out-cubic-bezier,
|
||||
border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
box-sizing: border-box;
|
||||
padding: .15em .45em 0 .45em;
|
||||
border-radius: $--n-typography-code-border-radius;
|
||||
font-size: .9em;
|
||||
}
|
||||
color: map-get($--typography-code-text-color, 'default');
|
||||
background-color: $--typography-code-background-color;
|
||||
border: 1px solid $--typography-code-border-color;
|
||||
}
|
||||
@include m(default-type) {
|
||||
@include m(primary-depth) {
|
||||
color: map-get($--typography-text-text-color, 'primary-depth');
|
||||
}
|
||||
@include m(secondary-depth) {
|
||||
color: map-get($--typography-text-text-color, 'secondary-depth');
|
||||
}
|
||||
@include m(tertiary-depth) {
|
||||
color: map-get($--typography-text-text-color, 'tertiary-depth');
|
||||
}
|
||||
}
|
||||
@include not-m(default-type) {
|
||||
@include m(primary-depth) {
|
||||
opacity: map-get($--typography-text-opacity, 'primary-depth');
|
||||
}
|
||||
@include m(secondary-depth) {
|
||||
opacity: map-get($--typography-text-opacity, 'secondary-depth');
|
||||
}
|
||||
@include m(tertiary-depth) {
|
||||
opacity: map-get($--typography-text-opacity, 'tertiary-depth');
|
||||
}
|
||||
}
|
||||
@include m(primary-type) {
|
||||
color: map-get($--typography-text-text-color, 'primary');
|
||||
}
|
||||
@include m(info-type) {
|
||||
color: map-get($--typography-text-text-color, 'info');
|
||||
}
|
||||
@include m(success-type) {
|
||||
color: map-get($--typography-text-text-color, 'success');
|
||||
}
|
||||
@include m(warning-type) {
|
||||
color: map-get($--typography-text-text-color, 'warning');
|
||||
}
|
||||
@include m(error-type) {
|
||||
color: map-get($--typography-text-text-color, 'error');
|
||||
}
|
||||
}
|
||||
// @include b(text) {
|
||||
// @include once {
|
||||
// transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// @include m(strong) {
|
||||
// font-weight: $--n-strong-weight;
|
||||
// color: map-get($--typography-text-text-color, 'strong');
|
||||
// }
|
||||
// @include m(italic) {
|
||||
// font-style: italic;
|
||||
// }
|
||||
// @include m(underline) {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// }
|
||||
// color: map-get($--typography-text-text-color, 'default');
|
||||
// @include m(code) {
|
||||
// @include once {
|
||||
// line-height: 1.4;
|
||||
// font-family: $--n-mono-font-family;
|
||||
// transition:
|
||||
// color .3s $--n-ease-in-out-cubic-bezier,
|
||||
// background-color .3s $--n-ease-in-out-cubic-bezier,
|
||||
// border-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// box-sizing: border-box;
|
||||
// padding: .15em .45em 0 .45em;
|
||||
// border-radius: $--n-typography-code-border-radius;
|
||||
// font-size: .9em;
|
||||
// }
|
||||
// color: map-get($--typography-code-text-color, 'default');
|
||||
// background-color: $--typography-code-background-color;
|
||||
// border: 1px solid $--typography-code-border-color;
|
||||
// }
|
||||
// @include m(default-type) {
|
||||
// @include m(primary-depth) {
|
||||
// color: map-get($--typography-text-text-color, 'primary-depth');
|
||||
// }
|
||||
// @include m(secondary-depth) {
|
||||
// color: map-get($--typography-text-text-color, 'secondary-depth');
|
||||
// }
|
||||
// @include m(tertiary-depth) {
|
||||
// color: map-get($--typography-text-text-color, 'tertiary-depth');
|
||||
// }
|
||||
// }
|
||||
// @include not-m(default-type) {
|
||||
// @include m(primary-depth) {
|
||||
// opacity: map-get($--typography-text-opacity, 'primary-depth');
|
||||
// }
|
||||
// @include m(secondary-depth) {
|
||||
// opacity: map-get($--typography-text-opacity, 'secondary-depth');
|
||||
// }
|
||||
// @include m(tertiary-depth) {
|
||||
// opacity: map-get($--typography-text-opacity, 'tertiary-depth');
|
||||
// }
|
||||
// }
|
||||
// @include m(primary-type) {
|
||||
// color: map-get($--typography-text-text-color, 'primary');
|
||||
// }
|
||||
// @include m(info-type) {
|
||||
// color: map-get($--typography-text-text-color, 'info');
|
||||
// }
|
||||
// @include m(success-type) {
|
||||
// color: map-get($--typography-text-text-color, 'success');
|
||||
// }
|
||||
// @include m(warning-type) {
|
||||
// color: map-get($--typography-text-text-color, 'warning');
|
||||
// }
|
||||
// @include m(error-type) {
|
||||
// color: map-get($--typography-text-text-color, 'error');
|
||||
// }
|
||||
// }
|
||||
// @include b(hr) {
|
||||
// @include once {
|
||||
// margin: 12px 0;
|
||||
|
||||
@ -181,6 +181,7 @@ export default create({
|
||||
|
||||
inputBackgroundColor: neutral(base.alphaInput),
|
||||
inputBackgroundOverlayColor: overlay(base.alphaInput),
|
||||
codeBackgroundColor: neutral(base.alphaCode),
|
||||
codeBackgroundOverlayColor: overlay(base.alphaCode),
|
||||
tabBackgroundOverlayColor: overlay(base.alphaTab),
|
||||
avatarBackgroundOverlayColor: overlay(base.alphaAvatar),
|
||||
|
||||
@ -181,6 +181,7 @@ export default create({
|
||||
|
||||
inputBackgroundColor: neutral(base.alphaInput),
|
||||
inputBackgroundOverlayColor: overlay(base.alphaInput),
|
||||
codeBackgroundColor: neutral(base.alphaCode),
|
||||
codeBackgroundOverlayColor: overlay(base.alphaCode),
|
||||
tabBackgroundOverlayColor: overlay(base.alphaTab),
|
||||
avatarBackgroundOverlayColor: overlay(base.alphaAvatar),
|
||||
|
||||
11
src/typography/src/styles/text.js
Normal file
11
src/typography/src/styles/text.js
Normal file
@ -0,0 +1,11 @@
|
||||
import themedBaseStyle from './themed-text.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: [
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: themedBaseStyle
|
||||
}
|
||||
]
|
||||
98
src/typography/src/styles/themed-text.cssr.js
Normal file
98
src/typography/src/styles/themed-text.cssr.js
Normal file
@ -0,0 +1,98 @@
|
||||
import { c, cTB, cM, cNotM } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
easeInOutCubicBezier,
|
||||
strongFontWeight,
|
||||
monoFontFamily
|
||||
} = props.$base
|
||||
const {
|
||||
textColor,
|
||||
textColorStrong,
|
||||
textColorPrimaryDepth,
|
||||
textColorSecondaryDepth,
|
||||
textColorTertiaryDepth,
|
||||
textColorPrimary,
|
||||
textColorInfo,
|
||||
textColorSuccess,
|
||||
textColorWarning,
|
||||
textColorError,
|
||||
textOpacityPrimaryDepth,
|
||||
textOpacitySecondaryDepth,
|
||||
textOpacityTertiaryDepth,
|
||||
codeBorderRadius,
|
||||
codeTextColor,
|
||||
codeColor,
|
||||
codeBorderColor
|
||||
} = props.$local
|
||||
return cTB('text', {
|
||||
transition: `color .3s ${easeInOutCubicBezier}`,
|
||||
color: textColor
|
||||
}, [
|
||||
cM('strong', {
|
||||
fontWeight: strongFontWeight,
|
||||
color: textColorStrong
|
||||
}),
|
||||
cM('italic', {
|
||||
fontStyle: 'italic'
|
||||
}),
|
||||
cM('underline', {
|
||||
textDecoration: 'underline'
|
||||
}),
|
||||
cM('code', {
|
||||
lineHeight: 1.4,
|
||||
fontFamily: monoFontFamily,
|
||||
transition: `
|
||||
color .3s ${easeInOutCubicBezier},
|
||||
border-color .3s ${easeInOutCubicBezier},
|
||||
background-color .3s ${easeInOutCubicBezier}
|
||||
`,
|
||||
boxSizing: 'border-box',
|
||||
padding: '.15em .45em 0 .45em',
|
||||
borderRadius: codeBorderRadius,
|
||||
fontSize: '.9em',
|
||||
color: codeTextColor,
|
||||
backgroundColor: codeColor,
|
||||
border: `1px solid ${codeBorderColor}`
|
||||
}),
|
||||
cM('default-type', [
|
||||
cM('primary-depth', {
|
||||
color: textColorPrimaryDepth
|
||||
}),
|
||||
cM('secondary-depth', {
|
||||
color: textColorSecondaryDepth
|
||||
}),
|
||||
cM('tertiary-depth', {
|
||||
color: textColorTertiaryDepth
|
||||
})
|
||||
]),
|
||||
cNotM('default-type', [
|
||||
cM('primary-depth', {
|
||||
color: textOpacityPrimaryDepth
|
||||
}),
|
||||
cM('secondary-depth', {
|
||||
color: textOpacitySecondaryDepth
|
||||
}),
|
||||
cM('tertiary-depth', {
|
||||
color: textOpacityTertiaryDepth
|
||||
})
|
||||
]),
|
||||
cM('primary-type', {
|
||||
color: textColorPrimary
|
||||
}),
|
||||
cM('info-type', {
|
||||
color: textColorInfo
|
||||
}),
|
||||
cM('success-type', {
|
||||
color: textColorSuccess
|
||||
}),
|
||||
cM('warning-type', {
|
||||
color: textColorWarning
|
||||
}),
|
||||
cM('error-type', {
|
||||
color: textColorError
|
||||
})
|
||||
])
|
||||
}
|
||||
])
|
||||
@ -53,11 +53,18 @@
|
||||
<script>
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles/text'
|
||||
|
||||
export default {
|
||||
name: 'NText',
|
||||
cssrName: 'Typography',
|
||||
mixins: [withapp, themeable],
|
||||
cssrId: 'TypographyText',
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable,
|
||||
usecssr(styles)
|
||||
],
|
||||
props: {
|
||||
code: {
|
||||
type: Boolean,
|
||||
|
||||
@ -8,7 +8,7 @@ export default create({
|
||||
aTextColor: derived.primaryColor,
|
||||
blockquoteTextColor: derived.secondaryTextOverlayColor,
|
||||
blockquotePrefixColor: derived.borderOverlayColor,
|
||||
codeBorderRadius: base.lightBorderRadius,
|
||||
codeBorderRadius: base.smallBorderRadius,
|
||||
liTextColor: derived.secondaryTextOverlayColor,
|
||||
hrColor: derived.dividerOverlayColor,
|
||||
headerFontWeight: base.strongFontWeight,
|
||||
@ -56,7 +56,23 @@ export default create({
|
||||
error: derived.errorColor,
|
||||
warning: derived.warningColor,
|
||||
success: derived.successColor
|
||||
}
|
||||
},
|
||||
textColor: derived.secondaryTextOverlayColor,
|
||||
textColorStrong: derived.primaryTextOverlayColor,
|
||||
textColorPrimaryDepth: derived.primaryTextOverlayColor,
|
||||
textColorSecondaryDepth: derived.secondaryTextOverlayColor,
|
||||
textColorTertiaryDepth: derived.tertiaryTextOverlayColor,
|
||||
textColorPrimary: derived.primaryColor,
|
||||
textColorInfo: derived.infoColor,
|
||||
textColorSuccess: derived.successColor,
|
||||
textColorWarning: derived.warningColor,
|
||||
textColorError: derived.errorColor,
|
||||
textOpacityPrimaryDepth: derived.primaryOpacity,
|
||||
textOpacitySecondaryDepth: derived.secondaryOpacity,
|
||||
textOpacityTertiaryDepth: derived.tertiaryOpacity,
|
||||
codeTextColor: derived.secondaryTextOverlayColor,
|
||||
codeColor: derived.codeBackgroundOverlayColor,
|
||||
codeBorderColor: 'transparent'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -8,7 +8,7 @@ export default create({
|
||||
aTextColor: derived.primaryColor,
|
||||
blockquoteTextColor: derived.secondaryTextColor,
|
||||
blockquotePrefixColor: derived.borderColor,
|
||||
codeBorderRadius: base.lightBorderRadius,
|
||||
codeBorderRadius: base.smallBorderRadius,
|
||||
liTextColor: derived.secondaryTextColor,
|
||||
hrColor: derived.dividerColor,
|
||||
headerFontWeight: base.strongFontWeight,
|
||||
@ -56,7 +56,23 @@ export default create({
|
||||
error: derived.errorColor,
|
||||
warning: derived.warningColor,
|
||||
success: derived.successColor
|
||||
}
|
||||
},
|
||||
textColor: derived.secondaryTextColor,
|
||||
textColorStrong: derived.primaryTextColor,
|
||||
textColorPrimaryDepth: derived.primaryTextColor,
|
||||
textColorSecondaryDepth: derived.secondaryTextColor,
|
||||
textColorTertiaryDepth: derived.tertiaryTextColor,
|
||||
textColorPrimary: derived.primaryColor,
|
||||
textColorInfo: derived.infoColor,
|
||||
textColorSuccess: derived.successColor,
|
||||
textColorWarning: derived.warningColor,
|
||||
textColorError: derived.errorColor,
|
||||
textOpacityPrimaryDepth: derived.primaryOpacity,
|
||||
textOpacitySecondaryDepth: derived.secondaryOpacity,
|
||||
textOpacityTertiaryDepth: derived.tertiaryOpacity,
|
||||
codeTextColor: derived.secondaryTextColor,
|
||||
codeColor: derived.codeBackgroundColor,
|
||||
codeBorderColor: 'transparent'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user