mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
feat(code): css in js (#236)
This commit is contained in:
HaiboTang
07akioni
parent
8fd1f9a295
commit
e2389f0d0e
@ -1,8 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
import NCode from './src/main.vue'
|
||||
|
||||
NCode.install = function (Vue) {
|
||||
Vue.component(NCode.name, NCode)
|
||||
}
|
||||
|
||||
export default NCode
|
||||
@ -1,176 +1,176 @@
|
||||
@import "./mixins/mixins.scss";
|
||||
// @import "./mixins/mixins.scss";
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(code) {
|
||||
[class^=hljs] {
|
||||
color: $--code-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include b(code) {
|
||||
// [class^=hljs] {
|
||||
// color: $--code-text-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@include b(code) {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-family: $--n-mono-font-family;
|
||||
code {
|
||||
font-family: $--n-mono-font-family;
|
||||
}
|
||||
[class^=hljs] {
|
||||
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;
|
||||
}
|
||||
// @include b(code) {
|
||||
// margin: 0;
|
||||
// font-size: 14px;
|
||||
// font-family: $--n-mono-font-family;
|
||||
// code {
|
||||
// font-family: $--n-mono-font-family;
|
||||
// }
|
||||
// [class^=hljs] {
|
||||
// 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 {
|
||||
color: #a0a1a7;
|
||||
font-style: italic;
|
||||
}
|
||||
// .hljs-comment,
|
||||
// .hljs-quote {
|
||||
// color: #a0a1a7;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-formula {
|
||||
color: #a626a4;
|
||||
}
|
||||
// .hljs-doctag,
|
||||
// .hljs-keyword,
|
||||
// .hljs-formula {
|
||||
// color: #a626a4;
|
||||
// }
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name,
|
||||
.hljs-selector-tag,
|
||||
.hljs-deletion,
|
||||
.hljs-subst {
|
||||
color: #e45649;
|
||||
}
|
||||
// .hljs-section,
|
||||
// .hljs-name,
|
||||
// .hljs-selector-tag,
|
||||
// .hljs-deletion,
|
||||
// .hljs-subst {
|
||||
// color: #e45649;
|
||||
// }
|
||||
|
||||
.hljs-literal {
|
||||
color: #0184bb;
|
||||
}
|
||||
// .hljs-literal {
|
||||
// color: #0184bb;
|
||||
// }
|
||||
|
||||
.hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta-string {
|
||||
color: #50a14f;
|
||||
}
|
||||
// .hljs-string,
|
||||
// .hljs-regexp,
|
||||
// .hljs-addition,
|
||||
// .hljs-attribute,
|
||||
// .hljs-meta-string {
|
||||
// color: #50a14f;
|
||||
// }
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title {
|
||||
color: #c18401;
|
||||
}
|
||||
// .hljs-built_in,
|
||||
// .hljs-class .hljs-title {
|
||||
// color: #c18401;
|
||||
// }
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-number {
|
||||
color: #986801;
|
||||
}
|
||||
// .hljs-attr,
|
||||
// .hljs-variable,
|
||||
// .hljs-template-variable,
|
||||
// .hljs-type,
|
||||
// .hljs-selector-class,
|
||||
// .hljs-selector-attr,
|
||||
// .hljs-selector-pseudo,
|
||||
// .hljs-number {
|
||||
// color: #986801;
|
||||
// }
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-title {
|
||||
color: #4078f2;
|
||||
}
|
||||
// .hljs-symbol,
|
||||
// .hljs-bullet,
|
||||
// .hljs-link,
|
||||
// .hljs-meta,
|
||||
// .hljs-selector-id,
|
||||
// .hljs-title {
|
||||
// color: #4078f2;
|
||||
// }
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
// .hljs-emphasis {
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: $--n-strong-weight;
|
||||
}
|
||||
// .hljs-strong {
|
||||
// font-weight: $--n-strong-weight;
|
||||
// }
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
// .hljs-link {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
|
||||
.hljs-function .hljs-params {
|
||||
color: #383a42;
|
||||
}
|
||||
.hljs-function .hljs-params .hljs-typing {
|
||||
color: #383a42;
|
||||
}
|
||||
}
|
||||
&.#{block(dark-theme)} {
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
line-height: 1.3em;
|
||||
color: #abb2bf;
|
||||
background: #282c34;
|
||||
}
|
||||
.hljs-keyword, .hljs-operator {
|
||||
color: #F92672;
|
||||
}
|
||||
.hljs-pattern-match {
|
||||
color: #F92672;
|
||||
}
|
||||
.hljs-pattern-match .hljs-constructor {
|
||||
color: #61aeee;
|
||||
}
|
||||
.hljs-function {
|
||||
color: #61aeee;
|
||||
}
|
||||
.hljs-function .hljs-params {
|
||||
color: #A6E22E;
|
||||
}
|
||||
.hljs-function .hljs-params .hljs-typing {
|
||||
color: #FD971F;
|
||||
}
|
||||
.hljs-module-access .hljs-module {
|
||||
color: #7e57c2;
|
||||
}
|
||||
.hljs-constructor {
|
||||
color: #e2b93d;
|
||||
}
|
||||
.hljs-constructor .hljs-string {
|
||||
color: #9CCC65;
|
||||
}
|
||||
.hljs-comment, .hljs-quote {
|
||||
color: #b18eb1;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-doctag, .hljs-formula {
|
||||
color: #c678dd;
|
||||
}
|
||||
.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
|
||||
color: #e06c75;
|
||||
}
|
||||
.hljs-literal {
|
||||
color: #56b6c2;
|
||||
}
|
||||
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
|
||||
color: #98c379;
|
||||
}
|
||||
.hljs-built_in, .hljs-class .hljs-title {
|
||||
color: #e6c07b;
|
||||
}
|
||||
.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
|
||||
color: #d19a66;
|
||||
}
|
||||
.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
|
||||
color: #61aeee;
|
||||
}
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-strong {
|
||||
font-weight: $--n-strong-weight;
|
||||
}
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .hljs-function .hljs-params {
|
||||
// color: #383a42;
|
||||
// }
|
||||
// .hljs-function .hljs-params .hljs-typing {
|
||||
// color: #383a42;
|
||||
// }
|
||||
// }
|
||||
// &.#{block(dark-theme)} {
|
||||
// .hljs {
|
||||
// display: block;
|
||||
// overflow-x: auto;
|
||||
// padding: 0.5em;
|
||||
// line-height: 1.3em;
|
||||
// color: #abb2bf;
|
||||
// background: #282c34;
|
||||
// }
|
||||
// .hljs-keyword, .hljs-operator {
|
||||
// color: #F92672;
|
||||
// }
|
||||
// .hljs-pattern-match {
|
||||
// color: #F92672;
|
||||
// }
|
||||
// .hljs-pattern-match .hljs-constructor {
|
||||
// color: #61aeee;
|
||||
// }
|
||||
// .hljs-function {
|
||||
// color: #61aeee;
|
||||
// }
|
||||
// .hljs-function .hljs-params {
|
||||
// color: #A6E22E;
|
||||
// }
|
||||
// .hljs-function .hljs-params .hljs-typing {
|
||||
// color: #FD971F;
|
||||
// }
|
||||
// .hljs-module-access .hljs-module {
|
||||
// color: #7e57c2;
|
||||
// }
|
||||
// .hljs-constructor {
|
||||
// color: #e2b93d;
|
||||
// }
|
||||
// .hljs-constructor .hljs-string {
|
||||
// color: #9CCC65;
|
||||
// }
|
||||
// .hljs-comment, .hljs-quote {
|
||||
// color: #b18eb1;
|
||||
// font-style: italic;
|
||||
// }
|
||||
// .hljs-doctag, .hljs-formula {
|
||||
// color: #c678dd;
|
||||
// }
|
||||
// .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
|
||||
// color: #e06c75;
|
||||
// }
|
||||
// .hljs-literal {
|
||||
// color: #56b6c2;
|
||||
// }
|
||||
// .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
|
||||
// color: #98c379;
|
||||
// }
|
||||
// .hljs-built_in, .hljs-class .hljs-title {
|
||||
// color: #e6c07b;
|
||||
// }
|
||||
// .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
|
||||
// color: #d19a66;
|
||||
// }
|
||||
// .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
|
||||
// color: #61aeee;
|
||||
// }
|
||||
// .hljs-emphasis {
|
||||
// font-style: italic;
|
||||
// }
|
||||
// .hljs-strong {
|
||||
// font-weight: $--n-strong-weight;
|
||||
// }
|
||||
// .hljs-link {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -53,4 +53,4 @@ function cTB (selector, ...rest) {
|
||||
])
|
||||
}
|
||||
|
||||
export { c, cTB, cB, cE, cM, cNotM, insideFormItem, insideModal, namespace }
|
||||
export { c, cTB, cB, cE, cM, cNotM, insideFormItem, insideModal, namespace, prefix }
|
||||
|
||||
8
src/code/index.js
Normal file
8
src/code/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import NCode from './src/Code.vue'
|
||||
|
||||
NCode.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + NCode.name, NCode)
|
||||
}
|
||||
|
||||
export default NCode
|
||||
@ -1,10 +1,12 @@
|
||||
<script>
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles/index.js'
|
||||
|
||||
export default {
|
||||
name: 'NCode',
|
||||
mixins: [ withapp, themeable ],
|
||||
name: 'Code',
|
||||
mixins: [withapp, themeable, usecssr(styles)],
|
||||
props: {
|
||||
language: {
|
||||
type: String,
|
||||
11
src/code/src/styles/index.js
Normal file
11
src/code/src/styles/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: [
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
196
src/code/src/styles/themed-base.cssr.js
Normal file
196
src/code/src/styles/themed-base.cssr.js
Normal file
@ -0,0 +1,196 @@
|
||||
import { c, cTB, cB, prefix } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const local = props.$local
|
||||
const { monoFontFamily, easeInOutCubicBezier, strongFontWeight } = props.$base
|
||||
const {
|
||||
codeTextColor
|
||||
} = 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}
|
||||
`
|
||||
}),
|
||||
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`
|
||||
})
|
||||
|
||||
])
|
||||
])
|
||||
]
|
||||
}
|
||||
])
|
||||
14
src/code/styles/dark.js
Normal file
14
src/code/styles/dark.js
Normal file
@ -0,0 +1,14 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
name: 'Code',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
secondaryTextColor
|
||||
} = derived
|
||||
return {
|
||||
codeTextColor: secondaryTextColor
|
||||
}
|
||||
}
|
||||
})
|
||||
14
src/code/styles/light.js
Normal file
14
src/code/styles/light.js
Normal file
@ -0,0 +1,14 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
|
||||
export default create({
|
||||
theme: 'light',
|
||||
name: 'Code',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
secondaryTextColor
|
||||
} = derived
|
||||
return {
|
||||
codeTextColor: secondaryTextColor
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -62,7 +62,7 @@ import AutoComplete from './auto-complete'
|
||||
import Empty from './Empty'
|
||||
import Element from './element'
|
||||
import Log from './Log'
|
||||
import Code from './Code'
|
||||
import Code from './code'
|
||||
import Typography from './typography'
|
||||
import Upload from './Upload'
|
||||
import InputGroup from './input-group'
|
||||
@ -111,6 +111,8 @@ import backTopLightStyle from './back-top/styles/light'
|
||||
import backTopDarkStyle from './back-top/styles/dark'
|
||||
import autoComplateLightStyle from './auto-complete/styles/light'
|
||||
import autoComplateDarkStyle from './auto-complete/styles/dark'
|
||||
import codeLightStyle from './code/styles/light'
|
||||
import codeDarkStyle from './code/styles/dark'
|
||||
|
||||
// Can be remove after refactoring
|
||||
import baseSelectionLightStyle from './_base/selection/styles/light'
|
||||
@ -244,6 +246,8 @@ export default create({
|
||||
autoComplateDarkStyle,
|
||||
backTopLightStyle,
|
||||
backTopDarkStyle,
|
||||
codeLightStyle,
|
||||
codeDarkStyle,
|
||||
// Can be remove after refactoring
|
||||
baseSelectionLightStyle,
|
||||
baseSelectionDarkStyle
|
||||
|
||||
Loading…
Reference in New Issue
Block a user