mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-24 12:45:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: deprecate scss style scheme

Browse Source
This commit is contained in:
07akioni 2020-09-22 15:13:46 +08:00
parent ae51669359
commit 8dc5d9c2e3
6 changed files with 86 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/_deprecated/style-scheme.js Normal file
View File

@ -0,0 +1,79 @@
export const lightStyleScheme = {
'primaryColor': '#18a058',
'primaryHoverColor': '#36ad6a',
'primaryActiveColor': '#0c7a43',
'infoColor': '#2080f0',
'infoHoverColor': '#4098fc',
'infoActiveColor': '#1060c9',
'successColor': '#18a058',
'successHoverColor': '#36ad6a',
'successActiveColor': '#0c7a43',
'errorColor': '#d03050',
'errorHoverColor': '#de576d',
'errorActiveColor': '#ab1f3f',
'warningColor': '#f0a020',
'warningHoverColor': '#fcb040',
'warningActiveColor': '#c97c10',
'primaryTextColor': '#2e2e2e',
'secondaryTextColor': '#474747',
'tertiaryTextColor': '#9e9e9e',
'quaternaryTextColor': '#c2c2c2',
'primaryTextOverlayColor': 'rgba(0, 0, 0, .82)',
'secondaryTextOverlayColor': 'rgba(0, 0, 0, .72)',
'tertiaryTextOverlayColor': 'rgba(0, 0, 0, .38)',
'quaternaryTextOverlayColor': 'rgba(0, 0, 0, .24)',
'baseBackgroundColor': '#FFF',
'popoverBackgroundColor': '#FFF',
'modalBackgroundColor': '#FFF',
'cardBackgroundColor': '#FFF',
'bodyBackgroundColor': '#f8f8f8',
'closeColor': '#9e9e9e',
'closeOverlayColor': 'rgba(0, 0, 0, .38)',
'dividerColor': '#ebebeb',
'dividerOverlayColor': 'rgba(0, 0, 0, .08)',
'borderColor': '#dbdbdb',
'borderOverlayColor': 'rgba(0, 0, 0, .14)',
'easeInOutCubicBezier': 'cubic-bezier(.4, 0, .2, 1)',
'tableHeaderOverlayBackgroundColor': 'rgba(0, 0, 0, .02)',
'inputOverlayBackgroundColor': null
}
export const darkStyleScheme = {
'primaryColor': '#63e2b7',
'primaryHoverColor': '#7fe7c4',
'primaryActiveColor': '#5acea7',
'infoColor': '#70C0E8',
'infoHoverColor': '#8acbec',
'infoActiveColor': '#66afd3',
'successColor': '#64e3b8',
'successHoverColor': '#7ee7c4',
'successActiveColor': '#5acea7',
'errorColor': '#e88080',
'errorHoverColor': '#e98b8b',
'errorActiveColor': '#e57272',
'warningColor': '#f2c97d',
'warningHoverColor': '#f5d599',
'warningActiveColor': '#e6c260',
'primaryTextColor': '#e6e6e6',
'secondaryTextColor': '#d1d1d1',
'tertiaryTextColor': '#858585',
'quaternaryTextColor': '#616161',
'primaryTextOverlayColor': 'rgba(255, 255, 255, .9)',
'secondaryTextOverlayColor': 'rgba(255, 255, 255, .82)',
'tertiaryTextOverlayColor': 'rgba(255, 255, 255, .52)',
'quaternaryTextOverlayColor': 'rgba(255, 255, 255, .38)',
'baseBackgroundColor': '#000',
'popoverBackgroundColor': '#48484e',
'modalBackgroundColor': '#2c2c32',
'cardBackgroundColor': '#18181c',
'bodyBackgroundColor': '#101014',
'closeColor': '#858585',
'closeOverlayColor': 'rgba(255, 255, 255, .52)',
'dividerColor': '#171717',
'dividerOverlayColor': 'rgba(255, 255, 255, .09)',
'borderColor': '#3d3d3d',
'borderOverlayColor': 'rgba(255, 255, 255, .24)',
'easeInOutCubicBezier': 'cubic-bezier(.4, 0, .2, 1)',
'tableHeaderOverlayBackgroundColor': 'rgba(255, 255, 255, .06)',
'inputOverlayBackgroundColor': 'rgba(255, 255, 255, .1)'
}

45
src/_styles-in-js/darkStyleScheme.scss
View File

@ -1,45 +0,0 @@
@import '../_styles/themes/dark/index.scss';
@import '../_styles/themes/common.scss';
@include setup-dark-theme($in-js-env: true);
/* stylelint-disable */
:export {
primaryColor: $--n-primary-color;
primaryHoverColor: $--n-primary-hover-color;
primaryActiveColor: $--n-primary-active-color;
infoColor: $--n-info-color;
infoHoverColor: $--n-info-hover-color;
infoActiveColor: $--n-info-active-color;
successColor: $--n-success-color;
successHoverColor: $--n-success-hover-color;
successActiveColor: $--n-success-active-color;
errorColor: $--n-error-color;
errorHoverColor: $--n-error-hover-color;
errorActiveColor: $--n-error-active-color;
warningColor: $--n-warning-color;
warningHoverColor: $--n-warning-hover-color;
warningActiveColor: $--n-warning-active-color;
primaryTextColor: $--neutral-text-1;
secondaryTextColor: $--neutral-text-2;
tertiaryTextColor: $--neutral-text-3;
quaternaryTextColor: $--neutral-text-4;
primaryTextOverlayColor: $--overlay-text-1;
secondaryTextOverlayColor: $--overlay-text-2;
tertiaryTextOverlayColor: $--overlay-text-3;
quaternaryTextOverlayColor: $--overlay-text-4;
baseBackgroundColor: $--n-base-background-color;
popoverBackgroundColor: $--neutral-popover;
modalBackgroundColor: $--neutral-modal;
cardBackgroundColor: $--neutral-card;
bodyBackgroundColor: $--neutral-body;
closeColor: $--neutral-text-3;
closeOverlayColor: $--overlay-text-3;
dividerColor: $--neutral-divider;
dividerOverlayColor: $--overlay-divider;
borderColor: $--neutral-border;
borderOverlayColor: $--overlay-border;
easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
tableHeaderOverlayBackgroundColor: $--n-table-header-overlay-background-color;
inputOverlayBackgroundColor: $--n-input-overlay-background-color;
}

45
src/_styles-in-js/lightStyleScheme.scss
View File

@ -1,45 +0,0 @@
@import '../_styles/themes/light/index.scss';
@import '../_styles/themes/common.scss';
@include setup-light-theme($in-js-env: true);
/* stylelint-disable */
:export {
primaryColor: $--n-primary-color;
primaryHoverColor: $--n-primary-hover-color;
primaryActiveColor: $--n-primary-active-color;
infoColor: $--n-info-color;
infoHoverColor: $--n-info-hover-color;
infoActiveColor: $--n-info-active-color;
successColor: $--n-success-color;
successHoverColor: $--n-success-hover-color;
successActiveColor: $--n-success-active-color;
errorColor: $--n-error-color;
errorHoverColor: $--n-error-hover-color;
errorActiveColor: $--n-error-active-color;
warningColor: $--n-warning-color;
warningHoverColor: $--n-warning-hover-color;
warningActiveColor: $--n-warning-active-color;
primaryTextColor: $--neutral-text-1;
secondaryTextColor: $--neutral-text-2;
tertiaryTextColor: $--neutral-text-3;
quaternaryTextColor: $--neutral-text-4;
primaryTextOverlayColor: $--overlay-text-1;
secondaryTextOverlayColor: $--overlay-text-2;
tertiaryTextOverlayColor: $--overlay-text-3;
quaternaryTextOverlayColor: $--overlay-text-4;
baseBackgroundColor: $--n-base-background-color;
popoverBackgroundColor: $--neutral-popover;
modalBackgroundColor: $--neutral-modal;
cardBackgroundColor: $--neutral-card;
bodyBackgroundColor: $--neutral-body;
closeColor: $--neutral-text-3;
closeOverlayColor: $--overlay-text-3;
dividerColor: $--neutral-divider;
dividerOverlayColor: $--overlay-divider;
borderColor: $--neutral-border;
borderOverlayColor: $--overlay-border;
easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
tableHeaderOverlayBackgroundColor: $--n-table-header-overlay-background-color;
inputOverlayBackgroundColor: $--n-input-overlay-background-color;
}

3
src/_utils/naive/styleScheme.js
View File

@ -1,5 +1,4 @@
import darkStyleScheme from '../../_styles-in-js/darkStyleScheme.scss'
import lightStyleScheme from '../../_styles-in-js/lightStyleScheme.scss'
import { lightStyleScheme, darkStyleScheme } from '../../_deprecated/style-scheme'
const styleScheme = {
dark: darkStyleScheme,

7
src/index.js
View File

@ -210,8 +210,7 @@ import NimbusServiceLayout from './_deprecated/NimbusServiceLayout'
import NimbusIcon from './_deprecated/NimbusIcon'
// deprecated
import lightScheme from './_styles-in-js/lightStyleScheme.scss'
import darkScheme from './_styles-in-js/darkStyleScheme.scss'
import { lightStyleScheme, darkStyleScheme } from './_deprecated/style-scheme'
import create from './create'
@ -431,7 +430,7 @@ export default create({
],
// deprecated
styleSchemes: {
light: lightScheme,
dark: darkScheme
light: lightStyleScheme,
dark: darkStyleScheme
}
})

7
src/pagination/tests/Pagination.spec.js
View File

@ -5,8 +5,7 @@ import Pagination from '../index'
import create from '../../create'
import zhCN from '../../locale/zhCN'
import enUS from '../../locale/enUS'
import lightScheme from '../../_styles-in-js/lightStyleScheme.scss'
import darkScheme from '../../_styles-in-js/darkStyleScheme.scss'
import { lightStyleScheme, darkStyleScheme } from '../../_deprecated/style-scheme'
import paginationLightStyle from '../styles/light'
import paginationDarkStyle from '../styles/dark'
import baseDarkStyle from '../../styles/base/dark'
@ -29,8 +28,8 @@ describe('n-pagination', () => {
paginationDarkStyle
],
styleSchemes: {
light: lightScheme,
dark: darkScheme
light: lightStyleScheme,
dark: darkStyleScheme
}
})
Vue.use(naive)