mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
feat: dark theme variables in js
This commit is contained in:
07akioni
parent
4e724551a5
commit
3e01d76005
33
src/styles/common-style/index.js
Normal file
33
src/styles/common-style/index.js
Normal file
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
fontFamily: 'naive-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
||||
monoFontFamily: 'naive-ui-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace',
|
||||
|
||||
strongFontWeight: '500',
|
||||
|
||||
easeInOutCubicBezier: 'cubic-bezier(.4, 0, .2, 1)',
|
||||
easeOutCubicBezier: 'cubic-bezier(0, 0, .2, 1)',
|
||||
easeInCubicBezier: 'cubic-bezier(.4, 0, 1, 1)',
|
||||
|
||||
borderRadius: '3px',
|
||||
lightBorderRadius: '2px',
|
||||
|
||||
lineHeight: '1.75',
|
||||
|
||||
tinyHeight: '22px',
|
||||
smallHeight: '28px',
|
||||
mediumHeight: '34px',
|
||||
largeHeight: '40px',
|
||||
hugeHeight: '46px',
|
||||
|
||||
tinyFontSize: '13px',
|
||||
smallFontSize: '14px',
|
||||
mediumFontSize: '14px',
|
||||
largeFontSize: '15px',
|
||||
hugeFontSize: '16px',
|
||||
|
||||
iconTransition: 'fill .3s $--n-ease-in-out-cubic-bezier, stroke .3s $--n-ease-in-out-cubic-bezier',
|
||||
|
||||
transformDebounceScale: 'scale(0.99999)',
|
||||
|
||||
popmenuBoxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.18)'
|
||||
}
|
||||
@ -1,14 +1,172 @@
|
||||
import create from '../utils/create-theme-base'
|
||||
import create from '../utils/create-theme-base.js'
|
||||
import { read, composite } from '../../_utils/color/index.js'
|
||||
import commonVariables from '../common-style/index.js'
|
||||
|
||||
export default create({
|
||||
base: {
|
||||
baseBackgroundColor: 'rgb(255, 255, 255)'
|
||||
getBaseVariables () {
|
||||
return Object.assign({
|
||||
neutralBase: '#000',
|
||||
neutralInvertBase: '#fff',
|
||||
neutralTextBase: '#fff',
|
||||
neutralPopover: 'rgb(72, 72, 78)',
|
||||
neutralCard: 'rgb(24, 24, 28)',
|
||||
neutralModal: 'rgb(44, 44, 50)',
|
||||
neutralBody: 'rgb(16, 16, 20)',
|
||||
|
||||
alpha1: '0.9',
|
||||
alpha2: '0.82',
|
||||
alpha3: '0.52',
|
||||
alpha4: '0.38',
|
||||
|
||||
alphaDisabled: '0.6',
|
||||
alphaDisabledFill: '0.06',
|
||||
alphaPending: '0.09',
|
||||
alphaTablePending: '0.06',
|
||||
alphaActive: '0.03',
|
||||
|
||||
alphaAvatar: '0.18',
|
||||
alphaRail: '0.20',
|
||||
alphaBorder: '0.24',
|
||||
alphaDivider: '0.09',
|
||||
alphaInput: '0.1',
|
||||
alphaAction: '0.06',
|
||||
alphaTab: '0.1',
|
||||
alphaScrollbar: '0.2',
|
||||
alphaScrollbarHover: '0.3',
|
||||
alphaCode: '0.12',
|
||||
alphaTag: '0',
|
||||
|
||||
// primary
|
||||
primaryHover: '#7fe7c4',
|
||||
primaryDefault: '#63e2b7',
|
||||
primaryActive: '#5acea7',
|
||||
primaryHs: 'rgb(42, 148, 125)',
|
||||
|
||||
// info
|
||||
infoHover: '#8acbec',
|
||||
infoDefault: '#70c0e8',
|
||||
infoActive: '#66afd3',
|
||||
infoHs: 'rgb(56, 137, 197)',
|
||||
|
||||
// error
|
||||
errorHover: '#e98b8b',
|
||||
errorDefault: '#e88080',
|
||||
errorActive: '#e57272',
|
||||
errorHs: 'rgb(208, 58, 82)',
|
||||
|
||||
// warning
|
||||
warningHover: '#f5d599',
|
||||
warningDefault: '#f2c97d',
|
||||
warningActive: '#e6c260',
|
||||
warningHs: 'rgb(240, 138, 0)',
|
||||
|
||||
// success
|
||||
successHover: '#7fe7c4',
|
||||
successDefault: '#63e2b7',
|
||||
successActive: '#5acea7',
|
||||
successHs: 'rgb(42, 148, 125)'
|
||||
}, commonVariables)
|
||||
},
|
||||
getDerivedVariables (base) {
|
||||
const baseBackgroundRgb = read(base.neutralBase)
|
||||
const baseInvertBackgroundRgb = read(base.neutralInvertBase)
|
||||
const overlayPrefix = 'rgba(' + baseInvertBackgroundRgb.slice(0, 3).join(', ') + ', '
|
||||
function overlay (alpha) {
|
||||
return overlayPrefix + String(alpha) + ')'
|
||||
}
|
||||
function neutral (alpha) {
|
||||
const overlayRgba = Array.from(baseInvertBackgroundRgb)
|
||||
overlayRgba[3] = Number(alpha)
|
||||
return composite(baseBackgroundRgb, overlayRgba)
|
||||
}
|
||||
const derived = {
|
||||
baseBackgroundColor: base.neutralBase,
|
||||
|
||||
// primary color
|
||||
primaryColor: base.primaryDefault,
|
||||
primaryHoverColor: base.primaryHover,
|
||||
primaryActiveColor: base.primaryActive
|
||||
primaryActiveColor: base.primaryActive,
|
||||
primaryHsColor: base.primaryHs,
|
||||
// info color
|
||||
infoColor: base.infoDefault,
|
||||
infoHoverColor: base.infoHover,
|
||||
infoActiveColor: base.infoActive,
|
||||
infoHsColor: base.infoHs,
|
||||
// success color
|
||||
successColor: base.successDefault,
|
||||
successHoverColor: base.successHover,
|
||||
successActiveColor: base.successActive,
|
||||
successHsColor: base.successHs,
|
||||
// warning color
|
||||
warningColor: base.warningDefault,
|
||||
warningHoverColor: base.warningHover,
|
||||
warningActiveColor: base.warningActive,
|
||||
warningHsColor: base.warningHs,
|
||||
// error color
|
||||
errorColor: base.errorDefault,
|
||||
errorHoverColor: base.errorHover,
|
||||
errorActiveColor: base.errorActive,
|
||||
errorHsColor: base.errorHs,
|
||||
// text color
|
||||
baseTextColor: base.neutralTextBase,
|
||||
primaryTextColor: neutral(base.alpha1),
|
||||
primaryTextOverlayColor: overlay(base.alpha1),
|
||||
secondaryTextColor: neutral(base.alpha2),
|
||||
secondaryTextOverlayColor: overlay(base.alpha2),
|
||||
tertiaryTextColor: neutral(base.alpha3),
|
||||
tertiaryTextOverlayColor: overlay(base.alpha3),
|
||||
quaternaryTextColor: neutral(base.alpha4), // disabled, placeholder, icon
|
||||
quaternaryTextOverlayColor: overlay(base.alpha4),
|
||||
|
||||
primaryOpacity: base.alpha1,
|
||||
secondaryOpacity: base.alpha2,
|
||||
tertiaryOpacity: base.alpha3,
|
||||
pendingOpacity: base.alphaPending,
|
||||
disabledFillOpacity: base.alphaDisabledFill,
|
||||
|
||||
iconColor: neutral(base.alpha4),
|
||||
iconOverlayColor: overlay(base.alpha4),
|
||||
|
||||
dividerColor: neutral(base.alphaDivider),
|
||||
dividerOverlayColor: neutral(base.alphaDivider),
|
||||
borderColor: neutral(base.alphaBorder),
|
||||
borderOverlayColor: neutral(base.alphaBorder),
|
||||
|
||||
closeHoverColor: neutral(base.alpha2),
|
||||
closeHoverOverlayColor: overlay(base.alpha2),
|
||||
closeColor: neutral(base.alpha3),
|
||||
closeOverlayColor: overlay(base.alpha3),
|
||||
disabledCloseColor: neutral(base.alpha4),
|
||||
disabledCloseHoverColor: overlay(base.alpha4),
|
||||
|
||||
scrollbarOverlayBackgroundColor: overlay(base.alphaScrollbar),
|
||||
scrollbarHoverOverlayBackgroundColor: overlay(base.alphaScrollbarHover),
|
||||
|
||||
railBackgroundColor: neutral(base.alphaRail),
|
||||
railOverlayBackgroundColor: overlay(base.alphaRail),
|
||||
|
||||
popoverBackgroundColor: base.neutralPopover,
|
||||
tableBodyBackgroundColor: base.neutralCard,
|
||||
cardBackgroundColor: base.neutralCard,
|
||||
modalBackgroundColor: base.neutralModal,
|
||||
bodyBackgroundColor: base.neutralBody,
|
||||
tagBackgroundColor: neutral(base.alphaTag),
|
||||
|
||||
inputOverlayBackgroundColor: overlay(base.alphaInput),
|
||||
codeOverlayBackgroundColor: overlay(base.alphaCode),
|
||||
tabOverlayBackgroundColor: overlay(base.alphaTab),
|
||||
avatarOverlayBackgroundColor: overlay(base.alphaAvatar),
|
||||
actionOverlayBackgroundColor: overlay(base.alphaAction),
|
||||
tableHeaderOverlayBackgroundColor: overlay(base.alphaAction),
|
||||
|
||||
pendingOverlayBackgroundColor: overlay(base.alphaPending),
|
||||
tablePendingOverlayBackgroundColor: overlay(base.alphaTablePending),
|
||||
activeOverlayBackgroundColor: overlay(base.alphaActive),
|
||||
|
||||
disabledOpacity: base.alphaDisabled,
|
||||
disabledFillBackgroundColor: neutral(base.alphaDisabledFill),
|
||||
|
||||
messageColoredBoxShadow: null
|
||||
}
|
||||
return derived
|
||||
}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import create from '../utils/create-theme-base.js'
|
||||
import { read, composite } from '../../_utils/color/index.js'
|
||||
import commonVariables from '../common-style/index.js'
|
||||
|
||||
export default create({
|
||||
getBaseVariables () {
|
||||
return {
|
||||
return Object.assign({
|
||||
neutralBase: '#FFF',
|
||||
neutralInvertBase: '#000',
|
||||
neutralTextBase: '#000',
|
||||
@ -27,7 +28,7 @@ export default create({
|
||||
alphaRail: '0.14',
|
||||
alphaBorder: '0.14',
|
||||
alphaDivider: '0.08',
|
||||
alphaInput: null,
|
||||
alphaInput: '0',
|
||||
alphaAction: '0.02',
|
||||
alphaTab: '0.04',
|
||||
alphaScrollbar: '0.25',
|
||||
@ -64,7 +65,7 @@ export default create({
|
||||
successDefault: '#18a058',
|
||||
successActive: '#0c7a43',
|
||||
successHs: '#36ad6a'
|
||||
}
|
||||
}, commonVariables)
|
||||
},
|
||||
getDerivedVariables (base) {
|
||||
const baseBackgroundRgb = read(base.neutralBase)
|
||||
@ -151,7 +152,7 @@ export default create({
|
||||
bodyBackgroundColor: base.neutralBody,
|
||||
tagBackgroundColor: neutral(base.alphaTag),
|
||||
|
||||
inputOverlayBackgroundColor: null,
|
||||
inputOverlayBackgroundColor: overlay(base.alphaInput),
|
||||
codeOverlayBackgroundColor: overlay(base.alphaCode),
|
||||
tabOverlayBackgroundColor: overlay(base.alphaTab),
|
||||
avatarOverlayBackgroundColor: overlay(base.alphaAvatar),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user