refactor(transfer): cssr var names

src/transfer/src/styles/themed-base/index.cssr.js

@@ -13,18 +13,18 @@ export default c([
     const {
       borderRadius,
       borderColor,
-      listBackgroundColor,
+      listColor,
-      headerBackgroundColor,
+      headerColor,
       headerTextColor,
-      disabledHeaderTextColor,
+      headerTextColorDisabled,
       headerExtraTextColor,
-      buttonBackgroundColor,
+      buttonColor,
-      buttonHoverBackgroundColor,
+      buttonColorHover,
-      buttonActiveBackgroundColor,
+      buttonColorActive,
-      buttonDisabledBackgroundColor,
+      buttonColorDisabled,
       filterBorderColor,
       itemTextColor,
-      itemDisabledTextColor
+      itemTextColorDisabled
     } = props.$local
     return [
       animationStyle,
@@ -38,7 +38,7 @@ export default c([
           position: 'relative',
           transition: `background-color .3s ${easeInOutCubicBezier}`,
           borderRadius,
-          backgroundColor: listBackgroundColor
+          backgroundColor: listColor
         }, [
           cB('virtual-scroller', {
             height: '100%',
@@ -52,7 +52,7 @@ export default c([
           ]),
           cE('border-mask', {
             border: `1px solid ${borderColor}`,
-            transition: `transition: border-color .3s ${easeInOutCubicBezier}`,
+            transition: `border-color .3s ${easeInOutCubicBezier}`,
             pointerEvents: 'none',
             borderRadius,
             position: 'absolute',
@@ -67,7 +67,7 @@ export default c([
             alignItems: 'center',
             backgroundClip: 'padding-box',
             borderRadius,
-            backgroundColor: headerBackgroundColor,
+            backgroundColor: headerColor,
             transition: `
               border-color .3s ${easeInOutCubicBezier},
               background-color .3s ${easeInOutCubicBezier}
@@ -89,7 +89,7 @@ export default c([
               color: headerTextColor
             }, [
               cM('disabled', {
-                color: disabledHeaderTextColor
+                color: headerTextColorDisabled
               })
             ]),
             cE('extra', {
@@ -179,7 +179,7 @@ export default c([
                   ]),
                   cM('disabled', {
                     cursor: 'not-allowed',
-                    color: itemDisabledTextColor
+                    color: itemTextColorDisabled
                   }),
                   cM('source', {
                     animationFillMode: 'forwards'
@@ -248,23 +248,23 @@ export default c([
           cE('icon', {
             pointerEvents: 'none',
             transition: `fill .3s ${easeInOutCubicBezier}`,
-            fill: buttonBackgroundColor
+            fill: buttonColor
           }),
           c('&:hover', [
             cE('icon', {
-              fill: buttonHoverBackgroundColor
+              fill: buttonColorHover
             })
           ]),
           c('&:active', [
             cE('icon', {
-              fill: buttonActiveBackgroundColor
+              fill: buttonColorActive
             })
           ]),
           cM('disabled', {
             cursor: 'not-allowed'
           }, [
             cE('icon', {
-              fill: buttonDisabledBackgroundColor
+              fill: buttonColorDisabled
             })
           ])
         ])

src/transfer/styles/dark.js

@@ -9,19 +9,18 @@ export default create({
       ...commonVariables,
       borderRadius: base.borderRadius,
       borderColor: 'transparent',
-      listBackgroundColor: derived.inputBackgroundOverlayColor,
+      listColor: derived.inputBackgroundOverlayColor,
-      headerBackgroundColor: derived.tableHeaderBackgroundOverlayColor,
+      headerColor: derived.tableHeaderBackgroundOverlayColor,
       headerTextColor: derived.primaryTextOverlayColor,
-      disabledHeaderTextColor: derived.disabledTextOverlayColor,
+      headerTextColorDisabled: derived.disabledTextOverlayColor,
       headerExtraTextColor: derived.secondaryTextOverlayColor,
-      // TODO refactor
+      buttonColor: 'rgba(255, 255, 255, 0.3)',
-      buttonBackgroundColor: 'rgba(255, 255, 255, 0.3)',
+      buttonColorHover: derived.primaryHoverColor,
-      buttonHoverBackgroundColor: derived.primaryHoverColor,
+      buttonColorActive: derived.primaryActiveColor,
-      buttonActiveBackgroundColor: derived.primaryActiveColor,
+      buttonColorDisabled: 'rgba(255, 255, 255, 0.15)',
-      buttonDisabledBackgroundColor: 'rgba(255, 255, 255, 0.15)',
       filterBorderColor: derived.dividerOverlayColor,
       itemTextColor: derived.secondaryTextOverlayColor,
-      itemDisabledTextColor: derived.disabledTextOverlayColor
+      itemTextColorDisabled: derived.disabledTextOverlayColor
     }
   }
 })

src/transfer/styles/light.js

@@ -10,22 +10,21 @@ export default create({
       ...commonVariables,
       borderRadius: base.borderRadius,
       borderColor: derived.dividerOverlayColor,
-      listBackgroundColor: derived.cardBackgroundColor,
+      listColor: derived.cardBackgroundColor,
-      headerBackgroundColor: composite(
+      headerColor: composite(
         derived.cardBackgroundColor,
         derived.tableHeaderBackgroundOverlayColor
       ),
       headerTextColor: derived.primaryTextColor,
-      disabledHeaderTextColor: derived.disabledTextColor,
+      headerTextColorDisabled: derived.disabledTextColor,
       headerExtraTextColor: derived.secondaryTextColor,
-      // TODO refactor
+      buttonColor: 'rgba(0, 0, 0, 0.2)',
-      buttonBackgroundColor: 'rgba(0, 0, 0, 0.2)',
+      buttonColorHover: derived.primaryHoverColor,
-      buttonHoverBackgroundColor: derived.primaryHoverColor,
+      buttonColorActive: derived.primaryActiveColor,
-      buttonActiveBackgroundColor: derived.primaryActiveColor,
+      buttonColorDisabled: 'rgba(0, 0, 0, 0.1)',
-      buttonDisabledBackgroundColor: 'rgba(0, 0, 0, 0.1)',
       filterBorderColor: derived.dividerOverlayColor,
       itemTextColor: derived.secondaryTextColor,
-      itemDisabledTextColor: derived.disabledTextColor
+      itemTextColorDisabled: derived.disabledTextColor
     }
   }
 })

think.md

@@ -191,6 +191,40 @@ shouldMount 可以加到 usecssr
 ## 2020.7.8
 style overrides RFC
 
+## 2020.8.2
+颜色命名的方式
+```
+1.
+{
+  xColor,
+  xActiveColor,
+  xDisabledColor,
+  secondaryTextColor,
+  tertiaryTextColor
+},
+{ // 这种拒绝，因为只有一个状态也需要 default
+  xColor: {
+    default,
+    active,
+    disabled
+  }
+}
+// 现在感觉第三种比较好
+{
+  xColor,
+  xColorActive,
+  xColorDisabled,
+  textColor2, // 暂时可以先不改
+  textColor3, // 
+  textColorDisabled,
+  textColorPrimary,
+  textColorSecondary,
+  textColorTertiary,
+  textColorQ...
+}
+// 还有一点是去掉 backgroundColor 中的 background，因为 color & textColor 区分度已经够了
+```
+
 ```js
 // no import on demand
 import naive from 'naive-ui'