From 59f1729195111d4db56f9208a341238d31aa78bd Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Tue, 5 Jan 2021 18:58:23 +0800
Subject: [PATCH] refactor(layout): new theme

---
 src/layout/src/Layout.vue                     |  37 +++--
 src/layout/src/LayoutFooter.vue               |  39 +++--
 src/layout/src/LayoutHeader.vue               |  40 +++--
 src/layout/src/LayoutSider.vue                |  56 +++++--
 src/layout/src/styles/layout-footer.cssr.js   |  20 +++
 .../src/styles/layout-header-footer/index.js  |   9 --
 .../layout-header-footer/themed-base.cssr.js  |  55 -------
 src/layout/src/styles/layout-header.cssr.js   |  25 +++
 src/layout/src/styles/layout-sider.cssr.js    | 125 +++++++++++++++
 src/layout/src/styles/layout-sider/index.js   |   9 --
 .../styles/layout-sider/themed-base.cssr.js   | 150 ------------------
 src/layout/src/styles/layout.cssr.js          |  36 +++++
 src/layout/src/styles/layout/index.js         |   9 --
 .../src/styles/layout/themed-base.cssr.js     |  65 --------
 src/layout/styles/dark.js                     |  16 +-
 src/layout/styles/light.js                    |  16 +-
 src/styles.js                                 |   2 +-
 src/styles.new.js                             |   4 +-
 18 files changed, 358 insertions(+), 355 deletions(-)
 create mode 100644 src/layout/src/styles/layout-footer.cssr.js
 delete mode 100644 src/layout/src/styles/layout-header-footer/index.js
 delete mode 100644 src/layout/src/styles/layout-header-footer/themed-base.cssr.js
 create mode 100644 src/layout/src/styles/layout-header.cssr.js
 create mode 100644 src/layout/src/styles/layout-sider.cssr.js
 delete mode 100644 src/layout/src/styles/layout-sider/index.js
 delete mode 100644 src/layout/src/styles/layout-sider/themed-base.cssr.js
 create mode 100644 src/layout/src/styles/layout.cssr.js
 delete mode 100644 src/layout/src/styles/layout/index.js
 delete mode 100644 src/layout/src/styles/layout/themed-base.cssr.js

diff --git a/src/layout/src/Layout.vue b/src/layout/src/Layout.vue
index a8ef70085..1a0a8f824 100644
--- a/src/layout/src/Layout.vue
+++ b/src/layout/src/Layout.vue
@@ -4,7 +4,6 @@
     :class="{
       [`n-layout--${position}-positioned`]: true,
       'n-layout--has-sider': hasSider,
-      [`n-${mergedTheme}-theme`]: mergedTheme,
       [`n-layout--${siderCollapseMode}-collapse-mode`]: siderCollapseMode
     }"
     :style="mergedLayoutStyle"
@@ -12,7 +11,7 @@
     <n-scrollbar
       v-if="!nativeScrollbar"
       ref="scrollbar"
-      :theme="mergedTheme"
+      :theme="'light'"
       v-bind="scrollbarProps"
     >
       <slot />
@@ -22,27 +21,27 @@
 </template>
 
 <script>
-import { nextTick } from 'vue'
+import { nextTick, defineComponent, computed } from 'vue'
 import { NScrollbar } from '../../scrollbar'
+import { useTheme } from '../../_mixins'
+import { layoutLight } from '../styles'
 import layoutModeMixin from './layoutModeMixin'
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles/layout'
+import style from './styles/layout.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Layout',
   alias: ['LayoutContent'],
-  cssrName: 'Layout',
-  cssrId: 'Layout',
   components: {
     NScrollbar
   },
-  mixins: [configurable, themeable, layoutModeMixin, withCssr(styles)],
+  mixins: [layoutModeMixin],
   provide () {
     return {
       NLayout: this
     }
   },
   props: {
+    ...useTheme.props,
     nativeScrollbar: {
       type: Boolean,
       default: true
@@ -52,6 +51,22 @@ export default {
       default: undefined
     }
   },
+  setup (props) {
+    const themeRef = useTheme('Layout', 'Layout', style, layoutLight, props)
+    const {
+      common: { cubicBezierEaseInOut },
+      self: { color, textColor }
+    } = themeRef.value
+    return {
+      cssVars: computed(() => {
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--color': color,
+          '--text-color': textColor
+        }
+      })
+    }
+  },
   data () {
     return {
       hasSider: false,
@@ -86,7 +101,7 @@ export default {
           marginLeft: this.styleMarginLeft,
           transition: this.transitionDisabled ? 'none' : null
         },
-        this.mergedStyle
+        this.cssVars
       )
     },
     transitionDisabled () {
@@ -113,5 +128,5 @@ export default {
       })
     }
   }
-}
+})
 </script>
diff --git a/src/layout/src/LayoutFooter.vue b/src/layout/src/LayoutFooter.vue
index 862e6d376..4e7c4998d 100644
--- a/src/layout/src/LayoutFooter.vue
+++ b/src/layout/src/LayoutFooter.vue
@@ -3,30 +3,51 @@
     class="n-layout-footer"
     :class="{
       [`n-layout-footer--${position}-positioned`]: position,
-      [`n-${mergedTheme}-theme`]: mergedTheme,
       [`n-layout-footer--bordered`]: bordered
     }"
-    :style="mergedStyle"
+    :style="cssVars"
   >
     <slot />
   </div>
 </template>
 
 <script>
+import { computed, defineComponent } from 'vue'
 import layoutModeMixin from './layoutModeMixin'
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles/layout-header-footer'
+import { useTheme } from '../../_mixins'
+import { layoutLight } from '../styles'
+import style from './styles/layout-footer.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'LayoutFooter',
-  cssrName: 'Layout',
-  cssrId: 'LayoutHeaderFooter',
-  mixins: [configurable, themeable, layoutModeMixin, withCssr(styles)],
+  mixins: [layoutModeMixin],
   props: {
+    ...useTheme.props,
     bordered: {
       type: Boolean,
       default: false
     }
+  },
+  setup (props) {
+    const themeRef = useTheme(
+      'Layout',
+      'LayoutFooter',
+      style,
+      layoutLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: { footerBorderColor }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--footer-border-color': footerBorderColor
+        }
+      })
+    }
   }
-}
+})
 </script>
diff --git a/src/layout/src/LayoutHeader.vue b/src/layout/src/LayoutHeader.vue
index 08cb671db..bb31e7683 100644
--- a/src/layout/src/LayoutHeader.vue
+++ b/src/layout/src/LayoutHeader.vue
@@ -3,30 +3,52 @@
     class="n-layout-header"
     :class="{
       [`n-layout-header--${position}-positioned`]: position,
-      [`n-${mergedTheme}-theme`]: mergedTheme,
       [`n-layout-header--bordered`]: bordered
     }"
-    :style="mergedStyle"
+    :style="cssVars"
   >
     <slot />
   </div>
 </template>
 
 <script>
+import { defineComponent, computed } from 'vue'
+import { useTheme } from '../../_mixins'
 import layoutModeMixin from './layoutModeMixin'
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles/layout-header-footer'
+import { layoutLight } from '../styles'
+import style from './styles/layout-header.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'LayoutHeader',
-  cssrName: 'Layout',
-  cssrId: 'LayoutHeaderFooter',
-  mixins: [configurable, themeable, layoutModeMixin, withCssr(styles)],
+  mixins: [layoutModeMixin],
   props: {
+    ...useTheme.props,
     bordered: {
       type: Boolean,
       default: false
     }
+  },
+  setup (props) {
+    const themeRef = useTheme(
+      'Layout',
+      'LayoutHeader',
+      style,
+      layoutLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: { headerColor, headerBorderColor }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--header-color': headerColor,
+          '--header-border-color': headerBorderColor
+        }
+      })
+    }
   }
-}
+})
 </script>
diff --git a/src/layout/src/LayoutSider.vue b/src/layout/src/LayoutSider.vue
index 054bfb716..56d1a990d 100644
--- a/src/layout/src/LayoutSider.vue
+++ b/src/layout/src/LayoutSider.vue
@@ -5,11 +5,10 @@
       [`n-layout-sider--${position}-positioned`]: position,
       [`n-layout-sider--bordered`]: bordered,
       [`n-layout-sider--collapsed`]: collapsed,
-      [`n-layout-sider--show-content`]: showContent,
-      [`n-${mergedTheme}-theme`]: mergedTheme
+      [`n-layout-sider--show-content`]: showContent
     }"
     :style="{
-      ...mergedStyle,
+      ...cssVars,
       transform: styleTransform,
       maxWidth: styleMaxWidth,
       width: styleWidth
@@ -19,7 +18,7 @@
       v-if="!nativeScrollbar"
       ref="scrollbar"
       class="n-layout-sider__content"
-      :theme="mergedTheme"
+      :theme="'light'"
       v-bind="scrollbarProps"
     >
       <slot />
@@ -45,25 +44,25 @@
 </template>
 
 <script>
-import { nextTick } from 'vue'
+import { defineComponent, computed, nextTick } from 'vue'
+import { useTheme } from '../../_mixins'
+import { NScrollbar } from '../../scrollbar'
+import { layoutLight } from '../styles'
+import style from './styles/layout-sider.cssr.js'
 import layoutModeMixin from './layoutModeMixin'
-import { configurable, themeable, withCssr } from '../../_mixins'
 import ToggleButton from './ToggleButton.vue'
 import ToggleBar from './ToggleBar.vue'
-import { NScrollbar } from '../../scrollbar'
-import styles from './styles/layout-sider'
 
-export default {
+export default defineComponent({
   name: 'LayoutSider',
-  cssrName: 'Layout',
-  cssrId: 'LayoutSider',
   components: {
     ToggleButton,
     ToggleBar,
     NScrollbar
   },
-  mixins: [configurable, themeable, layoutModeMixin, withCssr(styles)],
+  mixins: [layoutModeMixin],
   props: {
+    ...useTheme.props,
     bordered: {
       type: Boolean,
       default: false
@@ -125,6 +124,37 @@ export default {
       default: undefined
     }
   },
+  setup (props) {
+    const themeRef = useTheme(
+      'Layout',
+      'LayoutSider',
+      style,
+      layoutLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            siderColor,
+            siderToggleButtonColor,
+            siderBorderColor,
+            siderToggleBarColor,
+            siderToggleBarColorHover
+          }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--sider-color': siderColor,
+          '--sider-border-color': siderBorderColor,
+          '--sider-toggle-button-color': siderToggleButtonColor,
+          '--sider-toggle-bar-color': siderToggleBarColor,
+          '--sider-toggle-bar-color-hover': siderToggleBarColorHover
+        }
+      })
+    }
+  },
   data () {
     return {
       collapseTimerId: null,
@@ -249,5 +279,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/layout/src/styles/layout-footer.cssr.js b/src/layout/src/styles/layout-footer.cssr.js
new file mode 100644
index 000000000..8e47733d3
--- /dev/null
+++ b/src/layout/src/styles/layout-footer.cssr.js
@@ -0,0 +1,20 @@
+import { cB, cM } from '../../../_utils/cssr'
+
+// vars:
+// --footer-border-color
+export default cB('layout-footer', `
+  transition:
+    background-color .3s var(--bezier),
+    border-color .3s var(--bezier);
+  box-sizing: border-box;
+`, [
+  cM('absolute-positioned', `
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  `),
+  cM('bordered', `
+    border-top: solid 1px var(--footer-border-color);
+  `)
+])
diff --git a/src/layout/src/styles/layout-header-footer/index.js b/src/layout/src/styles/layout-header-footer/index.js
deleted file mode 100644
index fd9338f5d..000000000
--- a/src/layout/src/styles/layout-header-footer/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: baseStyle
-  }
-]
diff --git a/src/layout/src/styles/layout-header-footer/themed-base.cssr.js b/src/layout/src/styles/layout-header-footer/themed-base.cssr.js
deleted file mode 100644
index 1a9311e7e..000000000
--- a/src/layout/src/styles/layout-header-footer/themed-base.cssr.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { cTB, c, cM } from '../../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      headerColor,
-      headerBorderColor,
-      footerBorderColor
-    } = props.$local
-    const {
-      cubicBezierEaseInOut
-    } = props.$global
-    return [
-      cTB('layout-header', {
-        raw: `
-          transition:
-            background-color .3s ${cubicBezierEaseInOut},
-            box-shadow .3s ${cubicBezierEaseInOut},
-            border-color .3s ${cubicBezierEaseInOut};
-          box-sizing: border-box;
-          width: 100%;
-          background-color: ${headerColor};
-        `
-      }, [
-        cM('bordered', {
-          raw: `
-            border-bottom: solid 1px ${headerBorderColor};
-          `
-        })
-      ]),
-      cTB('layout-footer', {
-        raw: `
-          transition:
-            background-color .3s ${cubicBezierEaseInOut},
-            border-color .3s ${cubicBezierEaseInOut};
-          box-sizing: border-box;
-        `
-      }, [
-        cM('absolute-positioned', {
-          raw: `
-            position: absolute;
-            left: 0;
-            right: 0;
-            bottom: 0;
-          `
-        }),
-        cM('bordered', {
-          raw: `
-            border-top: solid 1px ${footerBorderColor};
-          `
-        })
-      ])
-    ]
-  }
-])
diff --git a/src/layout/src/styles/layout-header.cssr.js b/src/layout/src/styles/layout-header.cssr.js
new file mode 100644
index 000000000..d463653d6
--- /dev/null
+++ b/src/layout/src/styles/layout-header.cssr.js
@@ -0,0 +1,25 @@
+import { cB, cM } from '../../../_utils/cssr'
+
+// vars:
+// --bezier
+// --header-color
+// --header-border-color
+export default cB('layout-header', `
+  transition:
+    background-color .3s var(--bezier),
+    box-shadow .3s var(--bezier),
+    border-color .3s var(--bezier);
+  box-sizing: border-box;
+  width: 100%;
+  background-color: var(--header-color);
+`, [
+  cM('absolute-positioned', `
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+  `),
+  cM('bordered', `
+    border-bottom: solid 1px var(--header-border-color);
+  `)
+])
diff --git a/src/layout/src/styles/layout-sider.cssr.js b/src/layout/src/styles/layout-sider.cssr.js
new file mode 100644
index 000000000..75aae22a9
--- /dev/null
+++ b/src/layout/src/styles/layout-sider.cssr.js
@@ -0,0 +1,125 @@
+import { c, cB, cE, cM } from '../../../_utils/cssr'
+
+// vars:
+// --bezier
+// --sider-color
+// --sider-border-color
+// --sider-toggle-button-color
+// --sider-toggle-bar-color
+// --sider-toggle-bar-color-hover
+export default cB('layout-sider', `
+  box-sizing: border-box;
+  position: relative;
+  z-index: auto;
+  transition:
+    min-width .3s var(--bezier),
+    max-width .3s var(--bezier),
+    transform .3s var(--bezier),
+    background-color .3s var(--bezier);
+  background-color: var(--sider-color);
+`, [
+  cB('layout-toggle-button', `
+    z-index: 1;
+    transition:
+      transform .3s var(--bezier),
+      fill .3s var(--bezier);
+    cursor: pointer;
+    width: 36px;
+    height: 36px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateX(50%) translateY(-50%);
+    fill: var(--sider-toggle-button-color);
+  `),
+  cB('layout-toggle-bar', `
+    cursor: pointer;
+    height: 72px;
+    width: 32px;
+    position: absolute;
+    top: calc(50% - 36px);
+    right: -28px;
+  `, [
+    cE('top, bottom', `
+      position: absolute;
+      width: 4px;
+      border-radius: 2px;
+      height: 38px;
+      left: 14px;
+      transition: 
+        background-color .3s var(--bezier),
+        transform .3s var(--bezier);
+    `),
+    cE('bottom', `
+      position: absolute;
+      top: 34px;
+    `),
+    c('&:hover', [
+      cE('top', {
+        transform: 'rotate(12deg) scale(1.15) translateY(-2px)'
+      }),
+      cE('bottom', {
+        transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
+      })
+    ]),
+    cM('collapsed', [
+      c('&:hover', [
+        cE('top', {
+          transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
+        }),
+        cE('bottom', {
+          transform: 'rotate(12deg) scale(1.15) translateY(2px)'
+        })
+      ])
+    ]),
+    cE('top, bottom', {
+      backgroundColor: 'var(--sider-toggle-bar-color)'
+    }),
+    c('&:hover', [
+      cE('top, bottom', {
+        backgroundColor: 'var(--sider-toggle-bar-color-hover)'
+      })
+    ])
+  ]),
+  cE('border', `
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 1px;
+    transition: background-color .3s var(--bezier);
+  `),
+  cE('content', `
+    opacity: 0;
+    transition: opacity .3s var(--bezier);
+  `),
+  cM('show-content', [
+    cE('content', {
+      opacity: 1
+    })
+  ]),
+  cM('collapsed', [
+    cB('layout-toggle-button', {
+      transform: 'translateX(50%) translateY(-50%) rotate(180deg)'
+    })
+  ]),
+  cM('absolute-positioned', `
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+  `, [
+    cE('content', `
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    `)
+  ]),
+  cM('bordered', [
+    cE('border', {
+      backgroundColor: 'var(--sider-border-color)'
+    })
+  ])
+])
diff --git a/src/layout/src/styles/layout-sider/index.js b/src/layout/src/styles/layout-sider/index.js
deleted file mode 100644
index fd9338f5d..000000000
--- a/src/layout/src/styles/layout-sider/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: baseStyle
-  }
-]
diff --git a/src/layout/src/styles/layout-sider/themed-base.cssr.js b/src/layout/src/styles/layout-sider/themed-base.cssr.js
deleted file mode 100644
index 96e2176df..000000000
--- a/src/layout/src/styles/layout-sider/themed-base.cssr.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import { cTB, c, cB, cE, cM } from '../../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      siderColor,
-      siderToggleButtonColor,
-      siderBorderColor,
-      siderToggleBarColor,
-      siderToggleBarColorHover
-    } = props.$local
-    const {
-      cubicBezierEaseInOut
-    } = props.$global
-    return cTB('layout-sider', {
-      raw: `
-        box-sizing: border-box;
-        position: relative;
-        z-index: auto;
-        transition:
-          min-width .3s ${cubicBezierEaseInOut},
-          max-width .3s ${cubicBezierEaseInOut},
-          transform .3s ${cubicBezierEaseInOut},
-          background-color .3s ${cubicBezierEaseInOut};
-        background-color: ${siderColor};
-      `
-    }, [
-      cB('layout-toggle-button', {
-        raw: `
-          z-index: 1;
-          transition:
-            transform .3s ${cubicBezierEaseInOut},
-            fill .3s ${cubicBezierEaseInOut};
-          cursor: pointer;
-          width: 36px;
-          height: 36px;
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateX(50%) translateY(-50%);
-          fill: ${siderToggleButtonColor};
-        `
-      }),
-      cB('layout-toggle-bar', {
-        raw: `
-          cursor: pointer;
-          height: 72px;
-          width: 32px;
-          position: absolute;
-          top: calc(50% - 36px);
-          right: -28px;
-        `
-      }, [
-        cE('top, bottom', {
-          raw: `
-            position: absolute;
-            width: 4px;
-            border-radius: 2px;
-            height: 38px;
-            left: 14px;
-            transition: 
-              background-color .3s ${cubicBezierEaseInOut},
-              transform .3s ${cubicBezierEaseInOut};
-          `
-        }),
-        cE('bottom', {
-          raw: `
-            position: absolute;
-            top: 34px;
-          `
-        }),
-        c('&:hover', [
-          cE('top', {
-            transform: 'rotate(12deg) scale(1.15) translateY(-2px)'
-          }),
-          cE('bottom', {
-            transform: 'rotate(-12deg) scale(1.15) translateY(2px)'
-          })
-        ]),
-        cM('collapsed', [
-          c('&:hover', [
-            cE('top', {
-              transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
-            }),
-            cE('bottom', {
-              transform: 'rotate(12deg) scale(1.15) translateY(2px)'
-            })
-          ])
-        ]),
-        cE('top, bottom', {
-          backgroundColor: siderToggleBarColor
-        }),
-        c('&:hover', [
-          cE('top, bottom', {
-            backgroundColor: siderToggleBarColorHover
-          })
-        ])
-      ]),
-      cE('border', {
-        raw: `
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          width: 1px;
-          transition: background-color .3s ${cubicBezierEaseInOut};
-        `
-      }),
-      cE('content', {
-        raw: `
-          opacity: 0;
-          transition: opacity .3s ${cubicBezierEaseInOut};
-        `
-      }),
-      cM('show-content', [
-        cE('content', {
-          opacity: 1
-        })
-      ]),
-      cM('collapsed', [
-        cB('layout-toggle-button', {
-          transform: 'translateX(50%) translateY(-50%) rotate(180deg)'
-        })
-      ]),
-      cM('absolute-positioned', {
-        raw: `
-          position: absolute;
-          left: 0;
-          top: 0;
-          bottom: 0;
-        `
-      }, [
-        cE('content', {
-          raw: `
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-          `
-        })
-      ]),
-      cM('bordered', [
-        cE('border', {
-          backgroundColor: siderBorderColor
-        })
-      ])
-    ])
-  }
-])
diff --git a/src/layout/src/styles/layout.cssr.js b/src/layout/src/styles/layout.cssr.js
new file mode 100644
index 000000000..bc23ecfbf
--- /dev/null
+++ b/src/layout/src/styles/layout.cssr.js
@@ -0,0 +1,36 @@
+import { cB, cM } from '../../../_utils/cssr'
+
+// vars:
+// --color
+// --text-color
+export default cB('layout', `
+  color: var(--text-color);
+  background-color: var(--color);
+  box-sizing: border-box;
+  position: relative;
+  z-index: auto;
+  transition:
+    margin-left .3s var(--bezier),
+    background-color .3s var(--bezier),
+    color .3s var(--bezier);
+  flex: auto;
+  overflow-x: hidden;
+`, [
+  cM('has-sider', `
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    flex-direction: row;
+  `),
+  cM('absolute-positioned', `
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  `, [
+    cB('layout-sider', `
+      z-index: 1;
+    `)
+  ])
+])
diff --git a/src/layout/src/styles/layout/index.js b/src/layout/src/styles/layout/index.js
deleted file mode 100644
index fd9338f5d..000000000
--- a/src/layout/src/styles/layout/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: baseStyle
-  }
-]
diff --git a/src/layout/src/styles/layout/themed-base.cssr.js b/src/layout/src/styles/layout/themed-base.cssr.js
deleted file mode 100644
index 79f58f776..000000000
--- a/src/layout/src/styles/layout/themed-base.cssr.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { cTB, c, cB, cM } from '../../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const {
-      textColor,
-      color
-    } = props.$local
-    const {
-      cubicBezierEaseInOut
-    } = props.$global
-    return [
-      cTB('layout', {
-        raw: `
-        color: ${textColor};
-        background-color: ${color};
-        box-sizing: border-box;
-        position: relative;
-        z-index: auto;
-        transition:
-          margin-left .3s ${cubicBezierEaseInOut},
-          background-color .3s ${cubicBezierEaseInOut},
-          color .3s ${cubicBezierEaseInOut};
-        flex: auto;
-        overflow-x: hidden;
-      `
-      }, [
-        cM('has-sider', {
-          raw: `
-            display: flex;
-            flex-wrap: nowrap;
-            width: 100%;
-            flex-direction: row;
-          `
-        }),
-        cM('absolute-positioned', {
-          raw: `
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-          `
-        }, [
-          cB('layout-sider', {
-            raw: `
-              z-index: 1;
-            `
-          })
-        ])
-      ]),
-      cTB('layout-content', {
-        raw: `
-          transition:
-            margin-left .3s ${cubicBezierEaseInOut},
-            background-color .3s ${cubicBezierEaseInOut},
-            color .3s ${cubicBezierEaseInOut};
-          box-sizing: border-box;
-          position: relative;
-          z-index: auto;
-        `
-      })
-    ]
-  }
-])
diff --git a/src/layout/styles/dark.js b/src/layout/styles/dark.js
index bf8e44e69..7bc942880 100644
--- a/src/layout/styles/dark.js
+++ b/src/layout/styles/dark.js
@@ -1,12 +1,14 @@
-import create from '../../_styles/utils/create-component-base'
 import { composite } from 'seemly'
-import { baseDark } from '../../_styles/base'
+import { commonDark } from '../../_styles/new-common'
+import { scrollbarDark } from '../../scrollbar/styles'
 
-export default create({
+export default {
   name: 'Layout',
-  theme: 'dark',
-  peer: [baseDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    Scrollbar: scrollbarDark
+  },
+  self (vars) {
     const {
       textColor2Overlay,
       bodyColor,
@@ -28,4 +30,4 @@ export default create({
       siderToggleBarColorHover: composite(bodyColor, scrollbarColorHoverOverlay)
     }
   }
-})
+}
diff --git a/src/layout/styles/light.js b/src/layout/styles/light.js
index 9b584d31e..3acdc5c66 100644
--- a/src/layout/styles/light.js
+++ b/src/layout/styles/light.js
@@ -1,12 +1,14 @@
-import create from '../../_styles/utils/create-component-base'
 import { composite } from 'seemly'
-import { baseLight } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
+import { scrollbarLight } from '../../scrollbar/styles'
 
-export default create({
+export default {
   name: 'Layout',
-  theme: 'light',
-  peer: [baseLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    Scrollbar: scrollbarLight
+  },
+  self (vars) {
     const {
       textColor2,
       bodyColor,
@@ -28,4 +30,4 @@ export default create({
       siderToggleBarColorHover: composite(bodyColor, scrollbarColorHoverOverlay)
     }
   }
-})
+}
diff --git a/src/styles.js b/src/styles.js
index 8cf9198b9..dc7563ee5 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -48,7 +48,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { iconDark, iconLight } from './icon/styles'
 // export { inputDark, inputLight } from './input/styles'
 // export { inputNumberDark, inputNumberLight } from './input-number/styles'
-export { layoutDark, layoutLight } from './layout/styles'
+// export { layoutDark, layoutLight } from './layout/styles'
 export { listDark, listLight } from './list/styles'
 export { loadingBarDark, loadingBarLight } from './loading-bar/styles'
 export { logDark, logLight } from './log/styles'
diff --git a/src/styles.new.js b/src/styles.new.js
index b24456098..b47602f19 100644
--- a/src/styles.new.js
+++ b/src/styles.new.js
@@ -30,6 +30,7 @@ import { gridDark } from './grid/styles'
 import { iconDark } from './icon/styles'
 import { inputDark } from './input/styles'
 import { inputNumberDark } from './input-number/styles'
+import { layoutDark } from './layout/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -63,5 +64,6 @@ export const darkTheme = {
   Grid: gridDark,
   Icon: iconDark,
   Input: inputDark,
-  InputNumber: inputNumberDark
+  InputNumber: inputNumberDark,
+  Layout: layoutDark
 }