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

fix(code): cssr styles

Browse Source
This commit is contained in:
07akioni 2020-08-07 21:54:10 +08:00
parent d8791a9486
commit 0b503d539f
5 changed files with 179 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_styles/Code.scss
View File

@ -19,12 +19,6 @@
// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
// }
// &.#{block(light-theme)} {
// .hljs {
// display: block;
// overflow-x: auto;
// padding: 0.5em;
// background: #fafafa;
// }
// .hljs-comment,
// .hljs-quote {

6
src/code/src/Code.vue
View File

@ -6,7 +6,11 @@ import styles from './styles/index.js'
export default {
name: 'Code',
mixins: [withapp, themeable, usecssr(styles)],
mixins: [
withapp,
themeable,
usecssr(styles)
],
props: {
language: {
type: String,

210
src/code/src/styles/themed-base.cssr.js
View File

@ -1,196 +1,36 @@
import { c, cTB, cB, prefix } from '../../../_utils/cssr'
import { c, cTB } from '../../../_utils/cssr'
export default c([
({ props }) => {
const local = props.$local
const { monoFontFamily, easeInOutCubicBezier, strongFontWeight } = props.$base
const { monoFontFamily, easeInOutCubicBezier } = props.$base
const {
codeTextColor
} = local
textColor,
highlightStyle
} = props.$local
return [
cTB(
'code',
[
c('[class^=hljs]', {
color: codeTextColor
})
]),
cB('code', {
raw: `
margin: 0;
font-size: 14px;
font-family: ${monoFontFamily};
`
},
[
c('code', {
fontFamily: monoFontFamily
}),
c('[class^=hljs]', {
transition: `
color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier}
{
raw: `
margin: 0;
font-size: 14px;
font-family: ${monoFontFamily};
`
}),
c(`&${prefix}light-theme`,
[
c('hljs', {
raw: `
display: block;
overflow-x: auto;
padding: 0.5em;
background: #fafafa;
`
}),
c('.hljs-comment, .hljs-quote', {
raw: `
color: #a0a1a7;
font-style: italic;
`
}),
c('.hljs-doctag, .hljs-keyword, .hljs-formula', {
raw: `
color: #a626a4;
`
}),
c(`.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst`, {
raw: `
color: #e45649;
`
}),
c('.hljs-literal', {
raw: `
color: #0184bb;
`
}),
c(`.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string`, {
color: `#50a14f`
}),
c(`.hljs-built_in,
.hljs-class .hljs-title`, {
color: `#c18401`
}),
c(`.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number`, {
color: `#986801`
}),
c(`.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title`, {
color: `#4078f2`
}),
c('.hljs-emphasis', {
fontStyle: `italic`
}),
c('.hljs-strong', {
fontWeight: strongFontWeight
}),
c('.hljs-link', {
textDecoration: 'underline'
}),
c(`.hljs-function .hljs-params, .hljs-function .hljs-params .hljs-typing`, {
color: `#383a42`
})
]),
c(`&${prefix}dark-theme`,
[
c('hljs', {
raw: `
display: block;
overflow-x: auto;
padding: 0.5em;
line-height: 1.3em;
color: #abb2bf;
background: #282c34;
`
}),
c('.hljs-comment, .hljs-quote', {
raw: `
color: #61aeee;
font-style: italic;
`
}),
c('.hljs-pattern-match, .hljs-keyword, .hljs-operator', {
raw: `
color: #F92672;
`
}),
c(`.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst`, {
raw: `
color: #A6E22E;
`
}),
c('.hljs-literal', {
raw: `
color: #FD971F;
`
}),
c(`.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string`, {
color: `#7e57c2`
}),
c(`.hljs-built_in,
.hljs-class .hljs-title`, {
color: `#e2b93d`
}),
c(`.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number`, {
color: `#9CCC65`
}),
c(`.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title`, {
color: `#b18eb1`
}),
c('.hljs-emphasis', {
fontStyle: `italic`
}),
c('.hljs-strong', {
fontWeight: strongFontWeight
}),
c('.hljs-link', {
textDecoration: 'underline'
}),
c(`.hljs-function .hljs-params, .hljs-function .hljs-params .hljs-typing`, {
color: `#e06c75`
})
])
])
},
[
c('code', {
fontFamily: monoFontFamily
}),
c('[class^=hljs]', {
color: textColor,
transition: `
color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier}
`
}),
highlightStyle
]
)
]
}
])

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

@ -1,4 +1,5 @@
import create from '../../styles/_utils/create-component-base'
import { c } from '../../_utils/cssr'
export default create({
theme: 'dark',
@ -8,7 +9,70 @@ export default create({
secondaryTextColor
} = derived
return {
codeTextColor: secondaryTextColor
textColor: secondaryTextColor,
highlightStyle: [
c(`
.hljs-pattern-match,
.hljs-keyword, .hljs-operator
`, {
color: '#F92672'
}),
c('.hljs-pattern-match .hljs-constructor', {
color: '#61aeee'
}),
c('.hljs-function', {
color: '#61aeee'
}),
c('.hljs-function .hljs-params', {
color: '#A6E22E'
}),
c('.hljs-function .hljs-params .hljs-typing', {
color: '#FD971F'
}),
c('.hljs-module-access .hljs-module', {
color: '#7e57c2'
}),
c('.hljs-constructor', {
color: '#e2b93d'
}),
c('.hljs-constructor .hljs-string', {
color: '#9CCC65'
}),
c('.hljs-comment, .hljs-quote', {
color: '#b18eb1',
fontStyle: 'italic'
}),
c('.hljs-doctag, .hljs-formula', {
color: '#c678dd'
}),
c('.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst', {
color: '#e06c75'
}),
c('.hljs-literal', {
color: '#56b6c2'
}),
c('.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string', {
color: '#98c379'
}),
c('.hljs-built_in, .hljs-class .hljs-title', {
color: '#e6c07b'
}),
c('.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number', {
color: '#d19a66'
}),
c('.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title', {
color: '#61aeee'
}),
c('.hljs-emphasis', {
fontStyle: 'italic'
}),
c('.hljs-strong', {
fontWeight: base.strongFontWeight
}),
c('.hljs-link', {
textDecoration: 'underline'
})
]
}
}
})

85
src/code/styles/light.js
View File

@ -1,4 +1,5 @@
import create from '../../styles/_utils/create-component-base'
import { c } from '../../_utils/cssr'
export default create({
theme: 'light',
@ -8,7 +9,89 @@ export default create({
secondaryTextColor
} = derived
return {
codeTextColor: secondaryTextColor
textColor: secondaryTextColor,
highlightStyle: [
c(`
.hljs-comment,
.hljs-quote
`, {
raw: `
color: #a0a1a7;
font-style: italic;
`
}),
c(`
.hljs-doctag,
.hljs-keyword,
.hljs-formula
`, {
color: '#a626a4'
}),
c(`
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst
`, {
color: '#e45649'
}),
c('.hljs-literal', {
color: '#0184bb'
}),
c(`
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string
`, {
color: `#50a14f`
}),
c(`
.hljs-built_in,
.hljs-class .hljs-title
`, {
color: `#c18401`
}),
c(`
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number
`, {
color: `#986801`
}),
c(`
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title
`, {
color: `#4078f2`
}),
c('.hljs-emphasis', {
fontStyle: `italic`
}),
c('.hljs-strong', {
fontWeight: base.strongFontWeight
}),
c('.hljs-link', {
textDecoration: 'underline'
}),
c(`
.hljs-function .hljs-params,
.hljs-function .hljs-params .hljs-typing
`, {
color: '#383a42'
})
]
}
}
})