refactor(tag): rename local themed vars

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

@@ -9,15 +9,15 @@ export default c([
     } = props.$local
     const {
       textColor: checkableTextColor,
-      hoverTextColor: checkableHoverTextColor,
-      activeTextColor: checkableActiveTextColor,
-      backgroundColor: checkableBackgroundColor,
-      hoverBackgroundColor: checkableHoverBackgroundColor,
-      activeBackgroundColor: checkableActiveBackgroundColor,
-      checkedTextColor,
-      checkedBackgroundColor,
-      checkedHoverBackgroundColor,
-      checkedActiveBackgroundColor
+      textColorHover: checkableHoverTextColor,
+      textColorActive: checkableActiveTextColor,
+      color: checkableBackgroundColor,
+      colorHover: checkableHoverBackgroundColor,
+      colorActive: checkableActiveBackgroundColor,
+      textColorChecked,
+      colorChecked,
+      colorCheckedHover,
+      colorCheckedActive
     } = checkable
     const {
       easeInOutCubicBezier
@@ -94,15 +94,15 @@ export default c([
           ])
         ]),
         cM('checked', {
-          color: checkedTextColor,
-          backgroundColor: checkedBackgroundColor
+          color: textColorChecked,
+          backgroundColor: colorChecked
         }, [
           cNotM('disabled', [
             c('&:hover', {
-              backgroundColor: checkedHoverBackgroundColor
+              backgroundColor: colorCheckedHover
             }),
             c('&:active', {
-              backgroundColor: checkedActiveBackgroundColor
+              backgroundColor: colorCheckedActive
             })
           ])
         ])

src/tag/src/styles/themed-type.cssr.js

@@ -7,17 +7,17 @@ export default c([
     const {
       borderColor,
       textColor,
-      backgroundColor,
+      color,
       closeColor,
-      closeHoverColor,
-      closeActiveColor
+      closeColorHover,
+      closeColorActive
     } = pallete
     return cTB('tag', [
       cNotM('checkable', [
         cM(`${type}-type`, {
           boxShadow: `inset 0 0 0 1px ${borderColor}`,
           color: textColor,
-          backgroundColor: backgroundColor
+          backgroundColor: color
         }, [
           cE('close', {
             fill: closeColor
@@ -25,10 +25,10 @@ export default c([
           cNotM('disabled', [
             cE('close', [
               c('&:hover', {
-                fill: closeHoverColor
+                fill: closeColorHover
               }),
               c('&:active', {
-                fill: closeActiveColor
+                fill: closeColorActive
               })
             ])
           ])

src/tag/styles/dark.js

@@ -31,63 +31,63 @@ export default create({
       disabledOpacity,
       checkable: {
         textColor: secondaryTextOverlayColor,
-        hoverTextColor: primaryHoverColor,
-        activeTextColor: primaryActiveColor,
-        backgroundColor: 'transparent',
-        hoverBackgroundColor: 'transparent',
-        activeBackgroundColor: 'transparent',
-        checkedTextColor: baseBackgroundColor,
-        checkedBackgroundColor: primaryColor,
-        checkedHoverBackgroundColor: primaryHoverColor,
-        checkedActiveBackgroundColor: primaryActiveColor
+        textColorHover: primaryHoverColor,
+        textColorActive: primaryActiveColor,
+        textColorChecked: baseBackgroundColor,
+        color: 'transparent',
+        colorHover: 'transparent',
+        colorActive: 'transparent',
+        colorChecked: primaryColor,
+        colorCheckedHover: primaryHoverColor,
+        colorCheckedActive: primaryActiveColor
       },
       default: {
         borderColor: borderOverlayColor,
         textColor: secondaryTextOverlayColor,
-        backgroundColor: 'transparent',
+        color: 'transparent',
         closeColor: closeOverlayColor,
-        closeHoverColor: closeHoverOverlayColor,
-        closeActiveColor: closeActiveOverlayColor
+        closeColorHover: closeHoverOverlayColor,
+        closeColorActive: closeActiveOverlayColor
       },
       primary: {
         borderColor: changeColor(primaryColor, { alpha: 0.3 }),
         textColor: primaryColor,
-        backgroundColor: 'transparent',
+        color: 'transparent',
         closeColor: changeColor(primaryColor, { alpha: 0.7 }),
-        closeHoverColor: changeColor(primaryColor, { alpha: 0.85 }),
-        closeActiveColor: changeColor(primaryColor, { alpha: 0.57 })
+        closeColorHover: changeColor(primaryColor, { alpha: 0.85 }),
+        closeColorActive: changeColor(primaryColor, { alpha: 0.57 })
       },
       info: {
         borderColor: changeColor(infoColor, { alpha: 0.3 }),
         textColor: infoColor,
-        backgroundColor: 'transparent',
+        color: 'transparent',
         closeColor: changeColor(infoColor, { alpha: 0.7 }),
-        closeHoverColor: changeColor(infoColor, { alpha: 0.85 }),
-        closeActiveColor: changeColor(infoColor, { alpha: 0.57 })
+        closeColorHover: changeColor(infoColor, { alpha: 0.85 }),
+        closeColorActive: changeColor(infoColor, { alpha: 0.57 })
       },
       success: {
         borderColor: changeColor(successColor, { alpha: 0.3 }),
         textColor: successColor,
-        backgroundColor: 'transparent',
+        color: 'transparent',
         closeColor: changeColor(successColor, { alpha: 0.7 }),
-        closeHoverColor: changeColor(successColor, { alpha: 0.85 }),
-        closeActiveColor: changeColor(successColor, { alpha: 0.57 })
+        closeColorHover: changeColor(successColor, { alpha: 0.85 }),
+        closeColorActive: changeColor(successColor, { alpha: 0.57 })
       },
       warning: {
         borderColor: changeColor(warningColor, { alpha: 0.3 }),
         textColor: warningColor,
-        backgroundColor: 'transparent',
+        color: 'transparent',
         closeColor: changeColor(warningColor, { alpha: 0.7 }),
-        closeHoverColor: changeColor(warningColor, { alpha: 0.85 }),
-        closeActiveColor: changeColor(warningColor, { alpha: 0.57 })
+        closeColorHover: changeColor(warningColor, { alpha: 0.85 }),
+        closeColorActive: changeColor(warningColor, { alpha: 0.57 })
       },
       error: {
         borderColor: changeColor(errorColor, { alpha: 0.3 }),
         textColor: errorColor,
-        backgroundColor: 'transparent',
+        color: 'transparent',
         closeColor: changeColor(errorColor, { alpha: 0.7 }),
-        closeHoverColor: changeColor(errorColor, { alpha: 0.85 }),
-        closeActiveColor: changeColor(errorColor, { alpha: 0.57 })
+        closeColorHover: changeColor(errorColor, { alpha: 0.85 }),
+        closeColorActive: changeColor(errorColor, { alpha: 0.57 })
       }
     }
   }

src/tag/styles/light.js

@@ -32,63 +32,63 @@ export default create({
       disabledOpacity,
       checkable: {
         textColor: secondaryTextOverlayColor,
-        hoverTextColor: primaryHoverColor,
-        activeTextColor: primaryActiveColor,
-        backgroundColor: 'transparent',
-        hoverBackgroundColor: 'transparent',
-        activeBackgroundColor: 'transparent',
-        checkedTextColor: baseBackgroundColor,
-        checkedBackgroundColor: primaryColor,
-        checkedHoverBackgroundColor: primaryHoverColor,
-        checkedActiveBackgroundColor: primaryActiveColor
+        textColorHover: primaryHoverColor,
+        textColorActive: primaryActiveColor,
+        textColorChecked: baseBackgroundColor,
+        color: 'transparent',
+        colorHover: 'transparent',
+        colorActive: 'transparent',
+        colorChecked: primaryColor,
+        colorCheckedHover: primaryHoverColor,
+        colorCheckedActive: primaryActiveColor
       },
       default: {
         borderColor: borderOverlayColor,
         textColor: secondaryTextOverlayColor,
-        backgroundColor: tagBackgroundColor,
+        color: tagBackgroundColor,
         closeColor: closeOverlayColor,
-        closeHoverColor: closeHoverOverlayColor,
-        closeActiveColor: closeActiveOverlayColor
+        closeColorHover: closeHoverOverlayColor,
+        closeColorActive: closeActiveOverlayColor
       },
       primary: {
         borderColor: changeColor(primaryColor, { alpha: 0.3 }),
         textColor: primaryColor,
-        backgroundColor: changeColor(primaryColor, { alpha: 0.1 }),
+        color: changeColor(primaryColor, { alpha: 0.1 }),
         closeColor: changeColor(primaryColor, { alpha: 0.75 }),
-        closeHoverColor: changeColor(primaryColor, { alpha: 0.6 }),
-        closeActiveColor: changeColor(primaryColor, { alpha: 0.9 })
+        closeColorHover: changeColor(primaryColor, { alpha: 0.6 }),
+        closeColorActive: changeColor(primaryColor, { alpha: 0.9 })
       },
       info: {
         borderColor: changeColor(infoColor, { alpha: 0.3 }),
         textColor: infoColor,
-        backgroundColor: changeColor(infoColor, { alpha: 0.1 }),
+        color: changeColor(infoColor, { alpha: 0.1 }),
         closeColor: changeColor(infoColor, { alpha: 0.75 }),
-        closeHoverColor: changeColor(infoColor, { alpha: 0.6 }),
-        closeActiveColor: changeColor(infoColor, { alpha: 0.9 })
+        closeColorHover: changeColor(infoColor, { alpha: 0.6 }),
+        closeColorActive: changeColor(infoColor, { alpha: 0.9 })
       },
       success: {
         borderColor: changeColor(successColor, { alpha: 0.3 }),
         textColor: successColor,
-        backgroundColor: changeColor(successColor, { alpha: 0.1 }),
+        color: changeColor(successColor, { alpha: 0.1 }),
         closeColor: changeColor(successColor, { alpha: 0.75 }),
-        closeHoverColor: changeColor(successColor, { alpha: 0.6 }),
-        closeActiveColor: changeColor(successColor, { alpha: 0.9 })
+        closeColorHover: changeColor(successColor, { alpha: 0.6 }),
+        closeColorActive: changeColor(successColor, { alpha: 0.9 })
       },
       warning: {
         borderColor: changeColor(warningColor, { alpha: 0.35 }),
         textColor: warningColor,
-        backgroundColor: changeColor(warningColor, { alpha: 0.12 }),
+        color: changeColor(warningColor, { alpha: 0.12 }),
         closeColor: changeColor(warningColor, { alpha: 0.75 }),
-        closeHoverColor: changeColor(warningColor, { alpha: 0.6 }),
-        closeActiveColor: changeColor(warningColor, { alpha: 0.9 })
+        closeColorHover: changeColor(warningColor, { alpha: 0.6 }),
+        closeColorActive: changeColor(warningColor, { alpha: 0.9 })
       },
       error: {
         borderColor: changeColor(errorColor, { alpha: 0.23 }),
         textColor: errorColor,
-        backgroundColor: changeColor(errorColor, { alpha: 0.08 }),
+        color: changeColor(errorColor, { alpha: 0.08 }),
         closeColor: changeColor(errorColor, { alpha: 0.65 }),
-        closeHoverColor: changeColor(errorColor, { alpha: 0.5 }),
-        closeActiveColor: changeColor(errorColor, { alpha: 0.8 })
+        closeColorHover: changeColor(errorColor, { alpha: 0.5 }),
+        closeColorActive: changeColor(errorColor, { alpha: 0.8 })
       }
     }
   }