refactor(radio): clean cssr codes

src/_mixins/usecssr.js

@@ -67,7 +67,7 @@ function setupMutableStyle (
     process.env.NODE_ENV !== 'production' &&
     (dependencyValue === null || dependencyValue === undefined)
   ) {
-    console.error(`[naive-ui/mixins/usecssr]: dependency key ${name}.${dependencyKey} should not be nullable`)
+    console.error(`[naive-ui/mixins/usecssr]: dependency key ${name}.${dependencyKey} should not be nullable`, instance)
   }
   const mountId = createMutableStyleId(
     id,

src/radio/src/Radio.vue

@@ -24,9 +24,9 @@
       @blur="handleRadioInputBlur"
     >
     <div
-      class="n-radio__control"
+      class="n-radio__dot"
       :class="{
-        'n-radio__control--checked': syntheticChecked
+        'n-radio__dot--checked': syntheticChecked
       }"
     />
     <div class="n-radio__label">
@@ -39,7 +39,7 @@
 import asformitem from '../../_mixins/asformitem'
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
-import radioMixin from './radioMixin'
+import radioMixin from './radio-mixin'
 import usecssr from '../../_mixins/usecssr'
 import styles from './styles/radio/index.js'
 
@@ -73,7 +73,9 @@ export default {
         }
         return 'medium'
       }
-    ), radioMixin ],
+    ),
+    radioMixin
+  ],
   props: {
     size: {
       validator (value) {

src/radio/src/RadioButton.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import radioMixin from './radioMixin'
+import radioMixin from './radio-mixin'
 import usecssr from '../../_mixins/usecssr'
 import styles from './styles/radio-button/index.js'
 

src/radio/src/RadioGroup.vue

@@ -81,8 +81,8 @@ export default {
   mixins: [
     withapp,
     themeable,
-    usecssr(styles),
     hollowoutable,
+    usecssr(styles),
     asformitem({
       change: 'change'
     }, 'small')

src/radio/src/styles/radio-button/index.js

@@ -1,14 +1,6 @@
-import sizeStyle from './themed-size.cssr.js'
 import baseStyle from './themed-base.cssr.js'
 
 export default [
-  {
-    key: 'syntheticSize',
-    watch: [
-      'syntheticSize'
-    ],
-    CNode: sizeStyle
-  },
   {
     key: 'syntheticTheme',
     watch: [

src/radio/src/styles/radio-button/themed-base.cssr.js

@@ -3,12 +3,12 @@ import { c, cTB, cB, cE, cM, cNotM } from '../../../../_utils/cssr'
 export default c([
   ({ props }) => {
     const {
-      buttonBorderColorDefault,
+      buttonBorderColor,
       buttonBorderColorActive,
-      buttonBackgroundColorActive,
-      buttonLabelColorDefault,
-      buttonLabelColorActive,
-      buttonLabelColorHover,
+      buttonColorActive,
+      buttonTextColor,
+      buttonTextColorActive,
+      buttonTextColorHover,
       disabledOpacity,
       borderMaskWidth,
       buttonBoxShadowFocus,
@@ -21,99 +21,99 @@ export default c([
     return cTB('radio-group', [
       cM('button-group', {
         raw: `
-            white-space: nowrap;
-            height: 28px;
-            line-height: 28px;
-          `
+          white-space: nowrap;
+          height: 28px;
+          line-height: 28px;
+        `
       }),
       cM('transition-disabled', [
         cB('radio-button', {
           raw: `
-              transition: none !important;
-            `
+            transition: none !important;
+          `
         })
       ]),
       cB('radio-button', {
         raw: `
-            vertical-align: bottom;
-            outline: none;
-            position: relative;
-            user-select: none;
-            display: inline-block;
-            height: 28px;
-            line-height: 28px;
-            box-sizing: border-box;
-            padding-left: 14px;
-            padding-right: 14px;
-            white-space: nowrap;
-            transition: background-color .3s ${easeInOutCubicBezier}, opacity .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier}, color .3s ${easeInOutCubicBezier};
-          `,
-        color: buttonLabelColorDefault,
-        borderTop: `1px solid ${buttonBorderColorDefault}`,
-        borderBottom: `1px solid ${buttonBorderColorDefault}`
+          vertical-align: bottom;
+          outline: none;
+          position: relative;
+          user-select: none;
+          display: inline-block;
+          height: 28px;
+          line-height: 28px;
+          box-sizing: border-box;
+          padding-left: 14px;
+          padding-right: 14px;
+          white-space: nowrap;
+          transition: background-color .3s ${easeInOutCubicBezier}, opacity .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier}, color .3s ${easeInOutCubicBezier};
+        `,
+        color: buttonTextColor,
+        borderTop: `1px solid ${buttonBorderColor}`,
+        borderBottom: `1px solid ${buttonBorderColor}`
       }, [
         cE('radio-input', {
           raw: `
-              width: 0;
-              height: 0;
-              opacity: 0;
-              margin: 0;
-            `
+            width: 0;
+            height: 0;
+            opacity: 0;
+            margin: 0;
+          `
         }),
         cE('border-mask', {
           raw: `
-              pointer-events: none;
-              position: absolute;
-              box-shadow: inset 0 0 0 ${borderMaskWidth} transparent;
-              transition: box-shadow .3s ${easeInOutCubicBezier};
-              left: -1px;
-              bottom: -1px;
-              right: -1px;
-              top: -1px;
-            `
+            pointer-events: none;
+            position: absolute;
+            box-shadow: inset 0 0 0 ${borderMaskWidth} transparent;
+            transition: box-shadow .3s ${easeInOutCubicBezier};
+            left: -1px;
+            bottom: -1px;
+            right: -1px;
+            top: -1px;
+          `
         }),
         c('&:first-child', {
           raw: `
-              border-top-left-radius: ${buttonBorderRadius};
-              border-bottom-left-radius: ${buttonBorderRadius};
-            `,
-          borderLeft: `1px solid ${buttonBorderColorDefault}`
+            border-top-left-radius: ${buttonBorderRadius};
+            border-bottom-left-radius: ${buttonBorderRadius};
+          `,
+          borderLeft: `1px solid ${buttonBorderColor}`
         }, [
           cE('border-mask', {
             raw: `
-                border-top-left-radius: ${buttonBorderRadius};
-                border-bottom-left-radius: ${buttonBorderRadius};
-              `
+              border-top-left-radius: ${buttonBorderRadius};
+              border-bottom-left-radius: ${buttonBorderRadius};
+            `
           })
         ]),
         c('&:last-child', {
           raw: `
-              border-top-right-radius: ${buttonBorderRadius};
-              border-bottom-right-radius: ${buttonBorderRadius};
-            `,
-          borderRight: `1px solid ${buttonBorderColorDefault}`
+            border-top-right-radius: ${buttonBorderRadius};
+            border-bottom-right-radius: ${buttonBorderRadius};
+          `,
+          borderRight: `1px solid ${buttonBorderColor}`
         }, [
           cE('border-mask', {
             raw: `
-                border-top-right-radius: ${buttonBorderRadius};
-                border-bottom-right-radius: ${buttonBorderRadius};
-              `
+              border-top-right-radius: ${buttonBorderRadius};
+              border-bottom-right-radius: ${buttonBorderRadius};
+            `
           })
         ]),
         cNotM('disabled', {
           raw: `
-              cursor: pointer;
-            `
+            cursor: pointer;
+          `
         }, [
           c('&:hover', [
             cE('border-mask', {
               raw: `
-                  transition: box-shadow .3s ${easeInOutCubicBezier};
-                `,
+                transition: box-shadow .3s ${easeInOutCubicBezier};
+              `,
               boxShadow: buttonBoxShadowHover
             }),
             cNotM('checked', {
-              color: buttonLabelColorHover
+              color: buttonTextColorHover
             })
           ]),
           cM('focus', [
@@ -125,14 +125,14 @@ export default c([
           ])
         ]),
         cM('checked', {
-          backgroundColor: buttonBackgroundColorActive,
-          color: buttonLabelColorActive,
+          backgroundColor: buttonColorActive,
+          color: buttonTextColorActive,
           borderColor: buttonBorderColorActive
         }),
         cM('disabled', {
           raw: `
-              cursor: not-allowed;
-            `,
+            cursor: not-allowed;
+          `,
           opacity: disabledOpacity
         })
       ])

src/radio/src/styles/radio-button/themed-size.cssr.js

@@ -1,25 +0,0 @@
-import { c, cB, cM } from '../../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const size = props.$instance.syntheticSize
-    const height = props.$local.height[size]
-    const fontSize = props.$local.fontSize[size]
-    return cB(
-      'radio-group',
-      [
-        cM(`${size}-size`, [
-          cM('button-group', {
-            lineHeight: height,
-            height
-          }),
-          cM('radio-button', {
-            lineHeight: height,
-            height,
-            fontSize
-          })
-        ])
-      ]
-    )
-  }
-])

src/radio/src/styles/radio-group/index.js

@@ -5,7 +5,8 @@ export default [
   {
     key: 'syntheticSize',
     watch: [
-      'syntheticSize'
+      'syntheticSize',
+      'syntheticTheme'
     ],
     CNode: sizeStyle
   },

src/radio/src/styles/radio-group/themed-base.cssr.js

@@ -3,7 +3,7 @@ import { c, cTB, cE, cM } from '../../../../_utils/cssr'
 export default c([
   ({ props }) => {
     const {
-      buttonBorderColorDefault,
+      buttonBorderColor,
       buttonBorderColorActive,
       disabledOpacity
     } = props.$local
@@ -12,18 +12,19 @@ export default c([
     } = props.$base
     return cTB('radio-group', {
       raw: `
-          display: inline-block;
-        `
+        display: inline-block;
+      `
     }, [
       cE('splitor', {
         raw: `
-            display: inline-block;
-            vertical-align: bottom;
-            height: 28px;
-            width: 1px;
-            transition: background-color .3s ${easeInOutCubicBezier}, opacity .3s ${easeInOutCubicBezier};
-          `,
-        backgroundColor: buttonBorderColorDefault
+          display: inline-block;
+          vertical-align: bottom;
+          width: 1px;
+          transition:
+            background-color .3s ${easeInOutCubicBezier},
+            opacity .3s ${easeInOutCubicBezier};
+        `,
+        backgroundColor: buttonBorderColor
       }, [
         cM('checked', {
           backgroundColor: buttonBorderColorActive

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

@@ -3,17 +3,17 @@ import { c, cTB, cE, cM, cNotM, cB } from '../../../../_utils/cssr'
 export default c([
   ({ props }) => {
     const {
-      boxShadowDefault,
+      boxShadow,
       boxShadowActive,
       boxShadowFocus,
       boxShadowHover,
       boxShadowDisabled,
-      backgroundColorDefault,
-      backgroundColorDisabled,
-      labelTextColorDefault,
-      labelTextColorDisabled,
-      controlBackgroundColorActive,
-      controlBackgroundColorDisabled
+      color,
+      colorDisabled,
+      textColor,
+      textColorDisabled,
+      dotColorActive,
+      dotColorDisabled
     } = props.$local
     const {
       easeInOutCubicBezier
@@ -41,7 +41,7 @@ export default c([
               margin: 0;
             `
           }),
-          cE('control', {
+          cE('dot', {
             raw: `
               transition:
               background-color .3s ${easeInOutCubicBezier},
@@ -50,8 +50,8 @@ export default c([
               position: relative;
               border-radius: 50%;
             `,
-            backgroundColor: backgroundColorDefault,
-            boxShadow: boxShadowDefault
+            backgroundColor: color,
+            boxShadow: boxShadow
           }
           , [
             c('&::before', {
@@ -70,7 +70,7 @@ export default c([
                   background-color .3s ${easeInOutCubicBezier},
                   transform .3s ${easeInOutCubicBezier};
               `,
-              backgroundColor: controlBackgroundColorActive
+              backgroundColor: dotColorActive
             }),
             cM('checked', {
               boxShadow: boxShadowActive
@@ -89,7 +89,7 @@ export default c([
               white-space: nowrap;
               transition: color .3s ${easeInOutCubicBezier};
             `,
-            color: labelTextColorDefault
+            color: textColor
           }),
           cNotM('disabled', {
             raw: `
@@ -97,13 +97,13 @@ export default c([
             `
           }, [
             c('&:hover', [
-              cE('control', {
+              cE('dot', {
                 boxShadow: boxShadowHover
               })
             ]),
             cM('focus', [
               c('&:not(:active)', [
-                cE('control', {
+                cE('dot', {
                   boxShadow: boxShadowFocus
                 })
               ])
@@ -114,12 +114,12 @@ export default c([
               cursor: not-allowed;
             `
           }, [
-            cE('control', {
+            cE('dot', {
               boxShadow: boxShadowDisabled,
-              backgroundColor: backgroundColorDisabled
+              backgroundColor: colorDisabled
             }, [
               c('&::before', {
-                backgroundColor: controlBackgroundColorDisabled
+                backgroundColor: dotColorDisabled
               }),
               cM('checked', {
                 raw: `
@@ -129,20 +129,20 @@ export default c([
               })
             ]),
             cE('label', {
-              color: labelTextColorDisabled
+              color: textColorDisabled
             })
           ])
         ]
       ),
       cTB('radio-group', {
         raw: `
-            display: inline-block;
-          `
+          display: inline-block;
+        `
       }, [
         cB('radio', {
           raw: `
-              margin-right: 18px;
-            `
+            margin-right: 18px;
+          `
         })
       ])
     ]

src/radio/src/styles/radio/themed-size.cssr.js

@@ -11,7 +11,7 @@ export default c([
         cM(`${size}-size`, {
           fontSize
         }, [
-          cE('control', {
+          cE('dot', {
             height: radioSize,
             width: radioSize
           })

src/radio/styles/_common.js

@@ -1,17 +1,13 @@
 export default {
   height: {
-    tiny: '22px',
-    small: ' 28px',
+    small: '28px',
     medium: '34px',
-    large: '40px',
-    huge: '48px'
+    large: '40px'
   },
   fontSize: {
-    tiny: '13px',
     small: '14px',
     medium: '14px',
-    large: '15px',
-    huge: '16px'
+    large: '15px'
   },
   radioSize: {
     small: '14px',

src/radio/styles/dark.js

@@ -21,28 +21,28 @@ export default create({
     const borderMaskWidth = '1px'
     return {
       ...commonVariables,
-      boxShadowDefault: `inset 0 0 0 1px ${borderOverlayColor}`,
+      boxShadow: `inset 0 0 0 1px ${borderOverlayColor}`,
       boxShadowActive: `inset 0 0 0 1px ${primaryColor}`,
       boxShadowFocus: `(inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })})`,
       boxShadowHover: `inset 0 0 0 1px ${primaryColor}`,
       boxShadowDisabled: `inset 0 0 0 1px ${borderOverlayColor}`,
-      backgroundColorDefault: 'transparent',
-      backgroundColorDisabled: disabledBackgroundColor,
-      labelTextColorDefault: secondaryTextOverlayColor,
-      labelTextColorDisabled: disabledTextOverlayColor,
-      controlBackgroundColorActive: primaryColor,
-      controlBackgroundColorDisabled: borderOverlayColor,
-      buttonBorderColorDefault: borderOverlayColor,
+      color: 'transparent',
+      colorDisabled: disabledBackgroundColor,
+      textColor: secondaryTextOverlayColor,
+      textColorDisabled: disabledTextOverlayColor,
+      dotColorActive: primaryColor,
+      dotColorDisabled: borderOverlayColor,
+      buttonBorderColor: borderOverlayColor,
       buttonBorderColorActive: primaryColor,
       buttonBorderColorHover: primaryColor,
-      buttonBackgroundColorDefault: 'transparent',
-      buttonBackgroundColorActive: primaryColor,
-      buttonLabelColorDefault: secondaryTextOverlayColor,
-      buttonLabelColorActive: baseBackgroundColor,
-      buttonLabelColorHover: primaryColor,
+      buttonColor: 'transparent',
+      buttonColorActive: primaryColor,
+      buttonTextColor: secondaryTextOverlayColor,
+      buttonTextColorActive: baseBackgroundColor,
+      buttonTextColorHover: primaryColor,
       disabledOpacity: disabledOpacity,
       borderMaskWidth: borderMaskWidth,
-      buttonBoxShadowFocus: `(inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })})`,
+      buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`,
       buttonBoxShadowHover: `inset 0 0 0 ${borderMaskWidth} ${primaryColor}`,
       buttonBorderRadius: borderRadius
     }

src/radio/styles/light.js

@@ -21,28 +21,28 @@ export default create({
     const borderMaskWidth = '0px'
     return {
       ...commonVariables,
-      boxShadowDefault: `inset 0 0 0 1px ${borderColor}`,
+      boxShadow: `inset 0 0 0 1px ${borderColor}`,
       boxShadowActive: `inset 0 0 0 1px ${primaryColor}`,
-      boxShadowFocus: `(inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })})`,
+      boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`,
       boxShadowHover: `inset 0 0 0 1px ${primaryColor}`,
       boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`,
-      backgroundColorDefault: baseBackgroundColor,
-      backgroundColorDisabled: disabledBackgroundColor,
-      labelTextColorDefault: secondaryTextColor,
-      labelTextColorDisabled: disabledTextColor,
-      controlBackgroundColorActive: primaryColor,
-      controlBackgroundColorDisabled: borderColor,
-      buttonBorderColorDefault: borderColor,
+      color: baseBackgroundColor,
+      colorDisabled: disabledBackgroundColor,
+      textColor: secondaryTextColor,
+      textColorDisabled: disabledTextColor,
+      dotColorActive: primaryColor,
+      dotColorDisabled: borderColor,
+      buttonBorderColor: borderColor,
       buttonBorderColorActive: primaryColor,
       buttonBorderColorHover: borderColor,
-      buttonBackgroundColorDefault: baseBackgroundColor,
-      buttonBackgroundColorActive: baseBackgroundColor,
-      buttonLabelColorDefault: secondaryTextColor,
-      buttonLabelColorActive: primaryColor,
-      buttonLabelColorHover: primaryColor,
+      buttonColor: baseBackgroundColor,
+      buttonColorActive: baseBackgroundColor,
+      buttonTextColor: secondaryTextColor,
+      buttonTextColorActive: primaryColor,
+      buttonTextColorHover: primaryColor,
       disabledOpacity: disabledOpacity,
       borderMaskWidth: borderMaskWidth,
-      buttonBoxShadowFocus: `(inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })})`,
+      buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`,
       buttonBoxShadowHover: `inset 0 0 0 ${borderMaskWidth} transparent`,
       buttonBorderRadius: borderRadius
     }