refactor: rename some cssr vars

2025-01-24 12:45:18 +08:00 · 2020-11-16 15:00:12 +08:00 · 2020-11-16 15:00:12 +08:00 · 42f05ff382
commit 42f05ff382
parent 12e58dd5aa
29 changed files with 59 additions and 67 deletions
--- a/src/anchor/src/styles/themed-base.cssr.js
+++ b/src/anchor/src/styles/themed-base.cssr.js
@ -8,8 +8,8 @@ export default c([
      railColorActive,
      linkTextColor,
      linkTextColorHover,
-      linkTextColorActive,
-      linkTextColorMatch
+      linkTextColorPressed,
+      linkTextColorActive
    } = props.$local
    const {
      cubicBezierEaseInOut
@ -108,10 +108,10 @@ export default c([
            color: linkTextColorHover
          }),
          c('&:active', {
-            color: linkTextColorActive
+            color: linkTextColorPressed
          }),
          cM('active', {
-            color: linkTextColorMatch
+            color: linkTextColorActive
          })
        ])
      ])
--- a/src/anchor/styles/dark.js
+++ b/src/anchor/styles/dark.js
@ -22,8 +22,8 @@ export default create({
      linkColor: changeColor(primaryColor, { alpha: 0.15 }),
      linkTextColor: textColor2Overlay,
      linkTextColorHover: primaryColorHover,
-      linkTextColorActive: primaryColorPressed,
-      linkTextColorMatch: primaryColor
+      linkTextColorPressed: primaryColorPressed,
+      linkTextColorActive: primaryColor
    }
  }
 })
--- a/src/anchor/styles/light.js
+++ b/src/anchor/styles/light.js
@ -22,8 +22,8 @@ export default create({
      linkColor: changeColor(primaryColor, { alpha: 0.15 }),
      linkTextColor: textColor2Overlay,
      linkTextColorHover: primaryColorHover,
-      linkTextColorActive: primaryColorPressed,
-      linkTextColorMatch: primaryColor
+      linkTextColorPressed: primaryColorPressed,
+      linkTextColorActive: primaryColor
    }
  }
 })
--- a/src/card/src/styles/themed-base.cssr.js
+++ b/src/card/src/styles/themed-base.cssr.js
@ -14,7 +14,7 @@ export default c([
      borderRadius,
      closeColor,
      closeColorHover,
-      closeColorActive
+      closeColorPressed
    } = props.$local
    return cTB(
      'card',
@ -136,7 +136,7 @@ export default c([
                color: closeColorHover
              }),
              c('&:active', {
-                color: closeColorActive
+                color: closeColorPressed
              })
            ])
          ]),
--- a/src/card/styles/dark.js
+++ b/src/card/styles/dark.js
@ -18,7 +18,7 @@ export default create({
      titleFontWeight: base.fontWeightStrong,
      closeColor: derived.closeColorOverlay,
      closeColorHover: derived.colorColorHoverOverlay,
-      closeColorActive: derived.closeColorPressedOverlay,
+      closeColorPressed: derived.closeColorPressedOverlay,
      borderRadius
    }
  }
--- a/src/card/styles/light.js
+++ b/src/card/styles/light.js
@ -18,7 +18,7 @@ export default create({
      titleFontWeight: base.fontWeightStrong,
      closeColor: derived.closeColor,
      closeColorHover: derived.closeColorHover,
-      closeColorActive: derived.closeColorPressed,
+      closeColorPressed: derived.closeColorPressed,
      borderRadius
    }
  }
--- a/src/checkbox/src/styles/themed-base.cssr.js
+++ b/src/checkbox/src/styles/themed-base.cssr.js
@ -12,7 +12,7 @@ export default c([
      color,
      colorDisabled,
      colorTableHeader,
-      colorModalTableHeader,
+      colorTableHeaderModal,
      iconColor,
      iconColorDisabled,
      borderColor,
@ -156,7 +156,7 @@ export default c([
              cNotM('indeterminate', [
                cNotM('disabled', [
                  cB('checkbox-box', {
-                    backgroundColor: colorModalTableHeader
+                    backgroundColor: colorTableHeaderModal
                  })
                ])
              ])
--- a/src/checkbox/styles/dark.js
+++ b/src/checkbox/styles/dark.js
@ -21,7 +21,7 @@ export default create({
      color: 'transparent',
      colorDisabled: inputColorDisabledOverlay,
      colorTableHeader: cardColor,
-      colorModalTableHeader: modalColor,
+      colorTableHeaderModal: modalColor,
      iconColor: cardColor,
      iconColorDisabled: textColorDisabledOverlay,
      borderColor: borderColorOverlay,
--- a/src/checkbox/styles/light.js
+++ b/src/checkbox/styles/light.js
@ -22,7 +22,7 @@ export default create({
      color: baseColor,
      colorDisabled: inputColorDisabled,
      colorTableHeader: cardColor,
-      colorModalTableHeader: modalColor,
+      colorTableHeaderModal: modalColor,
      iconColor: baseColor,
      iconColorDisabled: textColorDisabled,
      borderColor: borderColor,
--- a/src/dialog/src/styles/themed-base.cssr.js
+++ b/src/dialog/src/styles/themed-base.cssr.js
@ -12,7 +12,7 @@ export default c([
      titleFontWeight,
      closeColor,
      closeColorHover,
-      closeColorActive,
+      closeColorPressed,
      iconColorInfo,
      iconColorSuccess,
      iconColorWarning,
@ -100,7 +100,7 @@ export default c([
              color: closeColorHover
            }),
            c('&:active', {
-              color: closeColorActive
+              color: closeColorPressed
            })
          ])
        ])
--- a/src/dialog/styles/dark.js
+++ b/src/dialog/styles/dark.js
@ -22,7 +22,7 @@ export default create({
      color: modalColor,
      closeColor: closeOverylayColor,
      closeColorHover: colorColorHoverOverlay,
-      closeColorActive: closeActiveOverylayColor,
+      closeColorPressed: closeActiveOverylayColor,
      iconColorInfo: infoColor,
      iconColorSuccess: successColor,
      iconColorWarning: warningColor,
--- a/src/dialog/styles/light.js
+++ b/src/dialog/styles/light.js
@ -22,7 +22,7 @@ export default create({
      color: cardColor,
      closeColor: closeColor,
      closeColorHover: closeColorHover,
-      closeColorActive: closeColorPressed,
+      closeColorPressed: closeColorPressed,
      iconColorInfo: infoColor,
      iconColorSuccess: successColor,
      iconColorWarning: warningColor,
--- a/src/dynamic-tags/styles/_common.js
+++ b/src/dynamic-tags/styles/_common.js
@ -1,4 +0,0 @@
-export default {
-  addHeight: 'unset',
-  addBorderStyle: 'unset'
-}
--- a/src/message/src/styles/themed-base.cssr.js
+++ b/src/message/src/styles/themed-base.cssr.js
@ -28,10 +28,10 @@ export default c([
    const {
      closeColor,
      closeColorHover,
-      closeColorActive,
+      closeColorPressed,
      closeColorLoading,
      closeColorHoverLoading,
-      closeColorActiveLoading
+      closeColorPressedLoading
    } = props.$local
    const {
      cubicBezierEaseInOut
@ -112,8 +112,8 @@ export default c([
          }),
          c('&:active', {
            raw: `
-              fill: ${closeColorActive};
-              stroke: ${closeColorActive};
+              fill: ${closeColorPressed};
+              stroke: ${closeColorPressed};
            `
          })
        ])
@ -134,8 +134,8 @@ export default c([
          }),
          c('&:active', {
            raw: `
-              fill: ${closeColorActiveLoading};
-              stroke: ${closeColorActiveLoading};
+              fill: ${closeColorPressedLoading};
+              stroke: ${closeColorPressedLoading};
            `
          })
        ])
--- a/src/message/styles/dark.js
+++ b/src/message/styles/dark.js
@ -40,10 +40,10 @@ export default create({
      iconColorLoading: 'rgba(255, 255, 255, .5)',
      closeColor: 'rgba(255, 255, 255, .5)',
      closeColorHover: 'rgba(255, 255, 255, .6)',
-      closeColorActive: 'rgba(255, 255, 255, .4)',
+      closeColorPressed: 'rgba(255, 255, 255, .4)',
      closeColorLoading: 'rgba(255, 255, 255, .5)',
      closeColorHoverLoading: 'rgba(255, 255, 255, .6)',
-      closeColorActiveLoading: 'rgba(255, 255, 255, .4)'
+      closeColorPressedLoading: 'rgba(255, 255, 255, .4)'
    }
  }
 })
--- a/src/message/styles/light.js
+++ b/src/message/styles/light.js
@ -42,10 +42,10 @@ export default create({
      iconColorLoading: 'rgba(255, 255, 255, .45)',
      closeColor: 'rgba(255, 255, 255, .5)',
      closeColorHover: 'rgba(255, 255, 255, .6)',
-      closeColorActive: 'rgba(255, 255, 255, .4)',
+      closeColorPressed: 'rgba(255, 255, 255, .4)',
      closeColorLoading: closeColor,
      closeColorHoverLoading: closeColorHover,
-      closeColorActiveLoading: closeColor
+      closeColorPressedLoading: closeColor
    }
  }
 })
--- a/src/notification/src/styles/themed-base.cssr.js
+++ b/src/notification/src/styles/themed-base.cssr.js
@ -66,7 +66,7 @@ export default c([
      textColor,
      closeColor,
      closeColorHover,
-      closeColorActive,
+      closeColorPressed,
      headerTextColor,
      contentTextColor,
      descriptionTextColor,
@ -165,7 +165,7 @@ export default c([
              color: closeColorHover
            }),
            c('&:active', {
-              color: closeColorActive
+              color: closeColorPressed
            })
          ])
        ]),
--- a/src/notification/styles/dark.js
+++ b/src/notification/styles/dark.js
@ -35,7 +35,7 @@ export default create({
      textColor: textColor2Overlay,
      closeColor: closeColorOverlay,
      closeColorHover: colorColorHoverOverlay,
-      closeColorActive: closeColorOverlay,
+      closeColorPressed: closeColorOverlay,
      headerTextColor: textColor1Overlay,
      contentTextColor: textColor2Overlay,
      descriptionTextColor: textColor3Overlay,
--- a/src/notification/styles/light.js
+++ b/src/notification/styles/light.js
@ -35,7 +35,7 @@ export default create({
      textColor: textColor2,
      closeColor: closeColor,
      closeColorHover: closeColorHover,
-      closeColorActive: closeColor,
+      closeColorPressed: closeColor,
      headerTextColor: textColor1Overlay,
      contentTextColor: textColor2,
      descriptionTextColor: textColor3Overlay,
--- a/src/slider/src/styles/themed-base.cssr.js
+++ b/src/slider/src/styles/themed-base.cssr.js
@ -7,8 +7,8 @@ export default c([
    const {
      railColor,
      railColorHover,
-      railFillColor,
-      railFillColorHover,
+      fillColor,
+      fillColorHover,
      handleColor,
      dotColor,
      dotColorModal,
@ -71,7 +71,7 @@ export default c([
            backgroundColor: railColorHover
          }, [
            cE('fill', {
-              backgroundColor: railFillColorHover
+              backgroundColor: fillColorHover
            })
          ]),
          cB('slider-handle', {
@ -83,7 +83,7 @@ export default c([
            backgroundColor: railColorHover
          }, [
            cE('fill', {
-              backgroundColor: railFillColorHover
+              backgroundColor: fillColorHover
            })
          ]),
          cB('slider-handle', {
@ -106,7 +106,7 @@ export default c([
              border-radius: ${pxfy(depx(railHeight) / 2)};
              transition: background-color .3s ${cubicBezierEaseInOut};
            `,
-            backgroundColor: railFillColor
+            backgroundColor: fillColor
          })
        ]),
        cB('slider-handle', {
--- a/src/slider/styles/dark.js
+++ b/src/slider/styles/dark.js
@ -21,8 +21,8 @@ export default create({
      ...sizeVariables,
      railColor: railColorOverlay,
      railColorHover: railColorOverlay,
-      railFillColor: primaryColorSuppl,
-      railFillColorHover: primaryColorSuppl,
+      fillColor: primaryColorSuppl,
+      fillColorHover: primaryColorSuppl,
      handleColor: '#FFF',
      dotColor: cardColor,
      dotColorModal: modalColor,
--- a/src/slider/styles/light.js
+++ b/src/slider/styles/light.js
@ -21,8 +21,8 @@ export default create({
      ...sizeVariables,
      railColor: railColorOverlay,
      railColorHover: railColorOverlay,
-      railFillColor: primaryColor,
-      railFillColorHover: primaryColor,
+      fillColor: primaryColor,
+      fillColorHover: primaryColor,
      handleColor: '#FFF',
      dotColor: cardColor,
      dotColorModal: baseColor,
--- a/src/tree/src/styles/themed-base.cssr.js
+++ b/src/tree/src/styles/themed-base.cssr.js
@ -9,7 +9,7 @@ export default c([
    } = props.$base
    const {
      nodeColorHover,
-      nodeColorActive,
+      nodeColorPressed,
      nodeColorSelected,
      arrowColor,
      nodeTextColor,
@ -173,7 +173,7 @@ export default c([
          }),
          c('&:active', {
            raw: `
-              background-color: ${nodeColorActive};
+              background-color: ${nodeColorPressed};
            `
          }),
          cM('hightlight', [
--- a/src/tree/styles/dark.js
+++ b/src/tree/styles/dark.js
@ -19,7 +19,7 @@ export default create({
    return {
      borderRadiusSmall,
      nodeColorHover: hoverColorOverlay,
-      nodeColorActive: activeColorOverlay,
+      nodeColorPressed: activeColorOverlay,
      nodeColorSelected: changeColor(primaryColor, { alpha: 0.15 }),
      arrowColor: textColor3Overlay,
      nodeTextColor: textColor2Overlay,
--- a/src/tree/styles/light.js
+++ b/src/tree/styles/light.js
@ -19,7 +19,7 @@ export default create({
    return {
      borderRadiusSmall,
      nodeColorHover: hoverColorOverlay,
-      nodeColorActive: activeColorOverlay,
+      nodeColorPressed: activeColorOverlay,
      nodeColorSelected: changeColor(primaryColor, { alpha: 0.1 }),
      arrowColor: textColor3,
      nodeTextColor: textColor2,
--- a/src/upload/src/styles/themed-base.cssr.js
+++ b/src/upload/src/styles/themed-base.cssr.js
@ -10,15 +10,15 @@ export default c([
    } = props.$base
    const {
      draggerColor,
-      draggerBorderColorHover,
+      draggerBorder,
+      draggerBorderHover,
      itemColorHover,
      itemColorHoverError,
      itemTextColorError,
      itemTextColorSuccess,
      itemTextColor,
      itemIconColor,
-      itemDisabledOpacity,
-      draggerBorderColor
+      itemDisabledOpacity
    } = props.$local
    const iconSwitchTransition = createIconSwitchTransition()

@ -55,13 +55,11 @@ export default c([
            border-color .3s ${cubicBezierEaseInOut},
            background-color .3s ${cubicBezierEaseInOut};
          background-color: ${draggerColor};
-          border: 1px dashed ${draggerBorderColor};
+          border: ${draggerBorder};
        `
      }, [
        c('&:hover', {
-          raw: `
-            border-color:${draggerBorderColorHover};
-          `
+          border: draggerBorderHover
        })
      ]),
      cB('upload-file-list', {
@ -211,9 +209,7 @@ export default c([
      ]),
      cM('drag-over', [
        cB('upload-dragger', {
-          raw: `
-            border-color: ${draggerBorderColorHover};
-          `
+          border: draggerBorderHover
        })
      ])
    ])
--- a/src/upload/styles/dark.js
+++ b/src/upload/styles/dark.js
@ -19,8 +19,8 @@ export default create({

    return {
      draggerColor: actionColorOverlay,
-      draggerBorderColor: borderColor,
-      draggerBorderColorHover: primaryColor,
+      draggerBorder: `1px dashed ${borderColor}`,
+      draggerBorderHover: `1px dashed ${primaryColor}`,
      itemColorHover: hoverColorOverlay,
      itemColorHoverError: changeColor(errorColor, {
        alpha: 0.09
--- a/src/upload/styles/light.js
+++ b/src/upload/styles/light.js
@ -19,8 +19,8 @@ export default create({

    return {
      draggerColor: actionColorOverlay,
-      draggerBorderColor: borderColor,
-      draggerBorderColorHover: primaryColor,
+      draggerBorder: `1px dashed ${borderColor}`,
+      draggerBorderHover: `1px dashed ${primaryColor}`,
      itemColorHover: hoverColorOverlay,
      itemColorHoverError: changeColor(errorColor, {
        alpha: 0.06
--- a/themes/tusimple.js
+++ b/themes/tusimple.js
@ -184,11 +184,11 @@ function tusimpleTheme (naive) {
    color: 'rgba(153,153,153,0.10)',
    closeColor: derived.closeColorOverlay,
    closeColorHover: derived.closeColorOverlay,
-    closeColorActive: derived.closeColorOverlay,
+    closeColorPressed: derived.closeColorOverlay,
    borderColorPrimary: 'transparent',
    closeColorPrimary: derived.closeColorOverlay,
    closeColorHoverPrimary: derived.closeColorOverlay,
-    closeColorActivePrimary: derived.closeColorOverlay,
+    closeColorPressedPrimary: derived.closeColorOverlay,
    borderColorInfo: 'transparent',
    borderColorSuccess: 'transparent',
    borderColorWarning: 'transparent',