From 3e01d760053fb9c87c77adee7968fabd7eeda2ab Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 21 Jun 2020 22:22:24 +0800 Subject: [PATCH] feat: dark theme variables in js --- src/styles/common-style/index.js | 33 ++++++ src/styles/dark/base.js | 166 ++++++++++++++++++++++++++++++- src/styles/light/base.js | 9 +- 3 files changed, 200 insertions(+), 8 deletions(-) create mode 100644 src/styles/common-style/index.js diff --git a/src/styles/common-style/index.js b/src/styles/common-style/index.js new file mode 100644 index 000000000..ca99b4865 --- /dev/null +++ b/src/styles/common-style/index.js @@ -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)' +} diff --git a/src/styles/dark/base.js b/src/styles/dark/base.js index 3f2ab646c..9e1efaea4 100644 --- a/src/styles/dark/base.js +++ b/src/styles/dark/base.js @@ -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 } diff --git a/src/styles/light/base.js b/src/styles/light/base.js index 6a417e8fc..e9a9f4c19 100644 --- a/src/styles/light/base.js +++ b/src/styles/light/base.js @@ -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),