refactor: prepare for new theme system

src/create.js

@@ -1,25 +1,9 @@
-import { read, createHoverColor, createActiveColor } from './_utils/color'
+function mergeStyleSchemes (baseSchemes, schemes) {
-
-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) {
   const mergedSchemes = {}
   Object.keys(baseSchemes).forEach(theme => {
+    const baseScheme = baseSchemes[theme]
     const scheme = (schemes || {})[theme]
-    const extendedScheme = extend ? extendScheme(scheme) : scheme
+    mergedSchemes[theme] = baseScheme.customize(scheme)
-    mergedSchemes[theme] = Object.assign({}, baseSchemes[theme], extendedScheme)
   })
   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

src/styles/dark/Button.js

@@ -0,0 +1,9 @@
+import create from '../utils/create-component-base'
+
+export default create({
+  getDerivedVariables ({ base, derived }) {
+    return {
+
+    }
+  }
+})

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
+  }
+})

src/styles/light/Button.js

@@ -0,0 +1,9 @@
+import create from '../utils/create-component-base'
+
+export default create({
+  getDerivedVariables ({ base, derived }) {
+    return {
+
+    }
+  }
+})

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
+  }
+})

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)
+    }
+  }
+}

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
+  }
+}