From 0f060fd125cd072e6094f95ec0227fc81d06f0a1 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 21 Jun 2020 19:02:13 +0800
Subject: [PATCH] refactor: prepare for new theme system

---
 src/create.js                             | 26 ++++----------------
 src/styles/dark/Button.js                 |  9 +++++++
 src/styles/dark/base.js                   | 15 ++++++++++++
 src/styles/light/Button.js                |  9 +++++++
 src/styles/light/base.js                  | 15 ++++++++++++
 src/styles/utils/create-component-base.js | 18 ++++++++++++++
 src/styles/utils/create-theme-base.js     | 30 +++++++++++++++++++++++
 7 files changed, 101 insertions(+), 21 deletions(-)
 create mode 100644 src/styles/dark/Button.js
 create mode 100644 src/styles/dark/base.js
 create mode 100644 src/styles/light/Button.js
 create mode 100644 src/styles/light/base.js
 create mode 100644 src/styles/utils/create-component-base.js
 create mode 100644 src/styles/utils/create-theme-base.js

diff --git a/src/create.js b/src/create.js
index 94884dfc7..1b0c99c00 100644
--- a/src/create.js
+++ b/src/create.js
@@ -1,25 +1,9 @@
-import { read, createHoverColor, createActiveColor } from './_utils/color'
-
-function extendScheme (scheme) {
-  const extendedScheme = Object.assign({}, scheme)
-  if (extendedScheme.primaryColor) {
-    const primaryColorRgb = read(extendedScheme.primaryColor)
-    if (!extendedScheme.primaryHoverColor) {
-      extendedScheme.primaryHoverColor = createHoverColor(primaryColorRgb)
-    }
-    if (!extendedScheme.primaryActiveColor) {
-      extendedScheme.primaryActiveColor = createActiveColor(primaryColorRgb)
-    }
-  }
-  return extendedScheme
-}
-
-function mergeStyleSchemes (baseSchemes, schemes, extend) {
+function mergeStyleSchemes (baseSchemes, schemes) {
   const mergedSchemes = {}
   Object.keys(baseSchemes).forEach(theme => {
+    const baseScheme = baseSchemes[theme]
     const scheme = (schemes || {})[theme]
-    const extendedScheme = extend ? extendScheme(scheme) : scheme
-    mergedSchemes[theme] = Object.assign({}, baseSchemes[theme], extendedScheme)
+    mergedSchemes[theme] = baseScheme.customize(scheme)
   })
   return mergedSchemes
 }
@@ -52,9 +36,9 @@ function create ({
     fallbackTheme: fallbackTheme || 'light',
     setHljs,
     setHighlightjs: setHljs,
-    setStyleSchemes: (schemes, extend = true) => {
+    setStyleSchemes: (schemes) => {
       naive.styleSchemes = mergeStyleSchemes(
-        naive.styleSchemes, schemes, extend
+        naive.styleSchemes, schemes
       )
     },
     install
diff --git a/src/styles/dark/Button.js b/src/styles/dark/Button.js
new file mode 100644
index 000000000..cc0e4b07a
--- /dev/null
+++ b/src/styles/dark/Button.js
@@ -0,0 +1,9 @@
+import create from '../utils/create-component-base'
+
+export default create({
+  getDerivedVariables ({ base, derived }) {
+    return {
+
+    }
+  }
+})
diff --git a/src/styles/dark/base.js b/src/styles/dark/base.js
new file mode 100644
index 000000000..3f2ab646c
--- /dev/null
+++ b/src/styles/dark/base.js
@@ -0,0 +1,15 @@
+import create from '../utils/create-theme-base'
+
+export default create({
+  base: {
+    baseBackgroundColor: 'rgb(255, 255, 255)'
+  },
+  getDerivedVariables (base) {
+    const derived = {
+      primaryColor: base.primaryDefault,
+      primaryHoverColor: base.primaryHover,
+      primaryActiveColor: base.primaryActive
+    }
+    return derived
+  }
+})
diff --git a/src/styles/light/Button.js b/src/styles/light/Button.js
new file mode 100644
index 000000000..cc0e4b07a
--- /dev/null
+++ b/src/styles/light/Button.js
@@ -0,0 +1,9 @@
+import create from '../utils/create-component-base'
+
+export default create({
+  getDerivedVariables ({ base, derived }) {
+    return {
+
+    }
+  }
+})
diff --git a/src/styles/light/base.js b/src/styles/light/base.js
new file mode 100644
index 000000000..3f2ab646c
--- /dev/null
+++ b/src/styles/light/base.js
@@ -0,0 +1,15 @@
+import create from '../utils/create-theme-base'
+
+export default create({
+  base: {
+    baseBackgroundColor: 'rgb(255, 255, 255)'
+  },
+  getDerivedVariables (base) {
+    const derived = {
+      primaryColor: base.primaryDefault,
+      primaryHoverColor: base.primaryHover,
+      primaryActiveColor: base.primaryActive
+    }
+    return derived
+  }
+})
diff --git a/src/styles/utils/create-component-base.js b/src/styles/utils/create-component-base.js
new file mode 100644
index 000000000..ee1098959
--- /dev/null
+++ b/src/styles/utils/create-component-base.js
@@ -0,0 +1,18 @@
+export default function createBaseComponent (component) {
+  let cachedStyleScheme = null
+  return {
+    getDerivedVariables: component.getDerivedVariables,
+    get styleScheme () {
+      if (!cachedStyleScheme) {
+        cachedStyleScheme = this.createStyleScheme({
+          base: this.theme.base,
+          derived: this.theme.derived
+        })
+      }
+      return cachedStyleScheme
+    },
+    customize (options = {}) {
+      return Object.assign({}, this.styleScheme, options)
+    }
+  }
+}
diff --git a/src/styles/utils/create-theme-base.js b/src/styles/utils/create-theme-base.js
new file mode 100644
index 000000000..605de884e
--- /dev/null
+++ b/src/styles/utils/create-theme-base.js
@@ -0,0 +1,30 @@
+export default function createThemeBase (theme) {
+  function customize (options = {}) {
+    const {
+      base = {},
+      derived = {}
+    } = options
+    const syntheticBase = Object.assign({}, this.base, base)
+    const syntheticDerived = Object.assign(
+      {},
+      this.createDerivedVariables(syntheticBase),
+      derived
+    )
+    return {
+      base: syntheticBase,
+      derived: syntheticDerived
+    }
+  }
+  let cachedDerived = null
+  return {
+    base: theme.base,
+    getDerivedVariables: theme.getDerivedVariables,
+    get derived () {
+      if (!cachedDerived) {
+        cachedDerived = this.getDerivedVariables(this.base)
+      }
+      return cachedDerived
+    },
+    customize
+  }
+}