refactor(base-menu-mask): use cssr

src/_base/menu-mask/src/MenuMask.vue

@@ -1,6 +1,6 @@
 <template>
   <transition
-    name="n-base-menu-mask-transition"
+    name="n-fade-in-transition"
   >
     <div
       v-if="active"
@@ -16,8 +16,14 @@
 </template>
 
 <script>
+import usecssr from '../../../_mixins/usecssr'
+import styles from './styles'
+
 export default {
-  name: 'NBaseMenuMask',
+  name: 'BaseMenuMask',
+  mixins: [
+    usecssr(styles)
+  ],
   props: {
     theme: {
       type: String,

src/_base/menu-mask/src/styles/index.js

@@ -0,0 +1,9 @@
+import baseStyle from './themed-base.cssr'
+
+export default [
+  {
+    key: 'theme',
+    watch: ['theme'],
+    CNode: baseStyle
+  }
+]

src/_base/menu-mask/src/styles/themed-base.cssr.js

@@ -0,0 +1,31 @@
+import { cTB, c } from '../../../../_utils/cssr'
+import fadeInTransition from '../../../../styles/_transitions/fade-in'
+
+export default c([
+  ({ props }) => {
+    const {
+      color,
+      textColor
+    } = props.$local
+    return cTB('base-menu-mask', {
+      raw: `
+        font-size: 14px;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 14px;
+        overflow: hidden;
+        color: ${textColor};
+        background-color: ${color};
+      `
+    }, [
+      fadeInTransition()
+    ])
+  }
+])

src/_base/menu-mask/styles/dark.js

@@ -0,0 +1,15 @@
+import create from '../../../styles/_utils/create-component-base'
+import { changeColor } from '../../../_utils/color'
+
+export default create({
+  name: 'BaseMenuMask',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    return {
+      color: changeColor(derived.popoverBackgroundColor, {
+        alpha: 0.75
+      }),
+      textColor: derived.secondaryTextOverlayColor
+    }
+  }
+})

src/_base/menu-mask/styles/light.js

@@ -0,0 +1,15 @@
+import create from '../../../styles/_utils/create-component-base'
+import { changeColor } from '../../../_utils/color'
+
+export default create({
+  name: 'BaseMenuMask',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    return {
+      color: changeColor(derived.popoverBackgroundColor, {
+        alpha: 0.75
+      }),
+      textColor: derived.secondaryTextColor
+    }
+  }
+})

src/_styles/index.scss

@@ -3,13 +3,8 @@
 // don't use ~vue-virtual-scroller, if so rollup won't work
 @import '../../node_modules/vue-virtual-scroller/dist/vue-virtual-scroller';
 
-// @import './BaseLoading.scss';
-@import './BaseMenuMask.scss';
-// @import './BaseTrackingRect.scss';
 @import './Descriptions.scss';
 @import './Form.scss';
 @import './Popover.scss';
-// @import './Tabs.scss';
-// @import './Table.scss';
 @import './Tooltip.scss';
 @import './Upload.scss';

src/cascader/src/styles/themed-base.cssr.js

@@ -120,7 +120,7 @@ c([
               top: 50%;
               transform: translateY(-50%);
               left: 10px;
-              display: block;
+              display: flex;
             `
           }),
           cE('radio', {

src/cascader/styles/dark.js

@@ -1,10 +1,28 @@
 import create from '../../styles/_utils/create-component-base'
 import { composite } from '../../_utils/color'
 import sizeVariables from './_common'
+import baseTrackingRectStyle from '../../_base/tracking-rect/styles/dark'
+import baseMenuMaskStyle from '../../_base/menu-mask/styles/dark'
+import baseSelectMenuStyle from '../../_base/select-menu/styles/dark'
+import baseSelectionStyle from '../../_base/selection/styles/dark'
+import baseLoadingStyle from '../../_base/loading/styles/dark'
+import scrollbarStyle from '../../scrollbar/styles/dark'
+import radioStyle from '../../radio/styles/dark'
+import checkboxStyle from '../../checkbox/styles/dark'
 
 export default create({
   theme: 'dark',
   name: 'Cascader',
+  peer: [
+    baseTrackingRectStyle,
+    baseMenuMaskStyle,
+    baseSelectMenuStyle,
+    baseSelectionStyle,
+    baseLoadingStyle,
+    scrollbarStyle,
+    radioStyle,
+    checkboxStyle
+  ],
   getDerivedVariables ({ base, derived }) {
     const {
       borderRadius,

src/cascader/styles/light.js

@@ -1,10 +1,28 @@
 import create from '../../styles/_utils/create-component-base'
 import { composite } from '../../_utils/color'
 import sizeVariables from './_common'
+import baseTrackingRectStyle from '../../_base/tracking-rect/styles/light'
+import baseMenuMaskStyle from '../../_base/menu-mask/styles/light'
+import baseSelectMenuStyle from '../../_base/select-menu/styles/light'
+import baseSelectionStyle from '../../_base/selection/styles/light'
+import baseLoadingStyle from '../../_base/loading/styles/light'
+import scrollbarStyle from '../../scrollbar/styles/light'
+import radioStyle from '../../radio/styles/light'
+import checkboxStyle from '../../checkbox/styles/light'
 
 export default create({
   theme: 'light',
   name: 'Cascader',
+  peer: [
+    baseTrackingRectStyle,
+    baseMenuMaskStyle,
+    baseSelectMenuStyle,
+    baseSelectionStyle,
+    baseLoadingStyle,
+    scrollbarStyle,
+    radioStyle,
+    checkboxStyle
+  ],
   getDerivedVariables ({ base, derived }) {
     const {
       borderRadius,