diff --git a/src/alert/src/styles/themed-type.cssr.js b/src/alert/src/styles/themed-type.cssr.js
index 7e5dfd14d..413a930bd 100644
--- a/src/alert/src/styles/themed-type.cssr.js
+++ b/src/alert/src/styles/themed-type.cssr.js
@@ -5,14 +5,14 @@ export default c([
     const type = props.$instance.type
     const pallete = props.$local[type]
     const {
-      backgroundColor,
+      color: backgroundColor,
       borderColor,
       iconColor,
       titleTextColor,
       contentTextColor,
       closeColor,
-      closeHoverColor,
-      closeActiveColor
+      closeColorHover,
+      closeColorActive
     } = pallete
     return cTB('alert', [
       cM(type + '-type', {
@@ -26,14 +26,14 @@ export default c([
           }),
           c('&:hover', [
             cB('icon', {
-              fill: closeHoverColor,
-              stroke: closeHoverColor
+              fill: closeColorHover,
+              stroke: closeColorHover
             })
           ]),
           c('&:active', [
             cB('icon', {
-              fill: closeActiveColor,
-              stroke: closeActiveColor
+              fill: closeColorActive,
+              stroke: closeColorActive
             })
           ])
         ]),
diff --git a/src/alert/styles/dark.js b/src/alert/styles/dark.js
index 32180e214..060f3023b 100644
--- a/src/alert/styles/dark.js
+++ b/src/alert/styles/dark.js
@@ -27,53 +27,53 @@ export default create({
       borderRadius,
       default: {
         borderColor: dividerOverlayColor,
-        backgroundColor: inputBackgroundOverlayColor,
+        color: inputBackgroundOverlayColor,
         titleTextColor: primaryTextOverlayColor,
         iconColor: secondaryTextOverlayColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeOverlayColor,
-        closeHoverColor: closeHoverOverlayColor,
-        closeActiveColor: closeActiveOverlayColor
+        closeColorHover: closeHoverOverlayColor,
+        closeColorActive: closeActiveOverlayColor
       },
       info: {
         borderColor: changeColor(infoHsColor, { alpha: 0.35 }),
-        backgroundColor: changeColor(infoHsColor, { alpha: 0.25 }),
+        color: changeColor(infoHsColor, { alpha: 0.25 }),
         titleTextColor: primaryTextOverlayColor,
         iconColor: infoHsColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeOverlayColor,
-        closeHoverColor: closeHoverOverlayColor,
-        closeActiveColor: closeActiveOverlayColor
+        closeColorHover: closeHoverOverlayColor,
+        closeColorActive: closeActiveOverlayColor
       },
       success: {
         borderColor: changeColor(successHsColor, { alpha: 0.35 }),
-        backgroundColor: changeColor(successHsColor, { alpha: 0.25 }),
+        color: changeColor(successHsColor, { alpha: 0.25 }),
         titleTextColor: primaryTextOverlayColor,
         iconColor: successHsColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeOverlayColor,
-        closeHoverColor: closeHoverOverlayColor,
-        closeActiveColor: closeActiveOverlayColor
+        closeColorHover: closeHoverOverlayColor,
+        closeColorActive: closeActiveOverlayColor
       },
       warning: {
         borderColor: changeColor(warningHsColor, { alpha: 0.35 }),
-        backgroundColor: changeColor(warningHsColor, { alpha: 0.25 }),
+        color: changeColor(warningHsColor, { alpha: 0.25 }),
         titleTextColor: primaryTextOverlayColor,
         iconColor: warningHsColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeOverlayColor,
-        closeHoverColor: closeHoverOverlayColor,
-        closeActiveColor: closeActiveOverlayColor
+        closeColorHover: closeHoverOverlayColor,
+        closeColorActive: closeActiveOverlayColor
       },
       error: {
         borderColor: changeColor(errorHsColor, { alpha: 0.35 }),
-        backgroundColor: changeColor(errorHsColor, { alpha: 0.25 }),
+        color: changeColor(errorHsColor, { alpha: 0.25 }),
         titleTextColor: primaryTextOverlayColor,
         iconColor: errorHsColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeOverlayColor,
-        closeHoverColor: closeHoverOverlayColor,
-        closeActiveColor: closeActiveOverlayColor
+        closeColorHover: closeHoverOverlayColor,
+        closeColorActive: closeActiveOverlayColor
       }
     }
   }
diff --git a/src/alert/styles/light.js b/src/alert/styles/light.js
index bb70704c5..9487a7a3f 100644
--- a/src/alert/styles/light.js
+++ b/src/alert/styles/light.js
@@ -17,7 +17,7 @@ export default create({
       secondaryTextOverlayColor,
       closeColor,
       closeHoverColor,
-      closeActiveColor,
+      closeColorActive,
       infoColor,
       successColor,
       warningColor,
@@ -28,53 +28,53 @@ export default create({
       borderRadius,
       default: {
         borderColor: dividerOverlayColor,
-        backgroundColor: actionBackgroundColor,
+        color: actionBackgroundColor,
         titleTextColor: primaryTextOverlayColor,
         iconColor: secondaryTextOverlayColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeColor,
-        closeHoverColor: closeHoverColor,
-        closeActiveColor: closeActiveColor
+        closeColorHover: closeHoverColor,
+        closeColorActive: closeColorActive
       },
       info: {
         borderColor: composite(baseBackgroundColor, changeColor(infoColor, { alpha: 0.25 })),
-        backgroundColor: composite(baseBackgroundColor, changeColor(infoColor, { alpha: 0.08 })),
+        color: composite(baseBackgroundColor, changeColor(infoColor, { alpha: 0.08 })),
         titleTextColor: primaryTextOverlayColor,
         iconColor: infoColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeColor,
-        closeHoverColor: closeHoverColor,
-        closeActiveColor: closeActiveColor
+        closeColorHover: closeHoverColor,
+        closeColorActive: closeColorActive
       },
       success: {
         borderColor: composite(baseBackgroundColor, changeColor(successColor, { alpha: 0.25 })),
-        backgroundColor: composite(baseBackgroundColor, changeColor(successColor, { alpha: 0.08 })),
+        color: composite(baseBackgroundColor, changeColor(successColor, { alpha: 0.08 })),
         titleTextColor: primaryTextOverlayColor,
         iconColor: successColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeColor,
-        closeHoverColor: closeHoverColor,
-        closeActiveColor: closeActiveColor
+        closeColorHover: closeHoverColor,
+        closeColorActive: closeColorActive
       },
       warning: {
         borderColor: composite(baseBackgroundColor, changeColor(warningColor, { alpha: 0.33 })),
-        backgroundColor: composite(baseBackgroundColor, changeColor(warningColor, { alpha: 0.08 })),
+        color: composite(baseBackgroundColor, changeColor(warningColor, { alpha: 0.08 })),
         titleTextColor: primaryTextOverlayColor,
         iconColor: warningColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeColor,
-        closeHoverColor: closeHoverColor,
-        closeActiveColor: closeActiveColor
+        closeColorHover: closeHoverColor,
+        closeColorActive: closeColorActive
       },
       error: {
         borderColor: composite(baseBackgroundColor, changeColor(errorColor, { alpha: 0.25 })),
-        backgroundColor: composite(baseBackgroundColor, changeColor(errorColor, { alpha: 0.08 })),
+        color: composite(baseBackgroundColor, changeColor(errorColor, { alpha: 0.08 })),
         titleTextColor: primaryTextOverlayColor,
         iconColor: errorColor,
         contentTextColor: secondaryTextOverlayColor,
         closeColor: closeColor,
-        closeHoverColor: closeHoverColor,
-        closeActiveColor: closeActiveColor
+        closeColorHover: closeHoverColor,
+        closeColorActive: closeColorActive
       }
     }
   }
diff --git a/src/avatar/src/styles/themed-base.cssr.js b/src/avatar/src/styles/themed-base.cssr.js
index 0216c47d9..1eb2f153c 100644
--- a/src/avatar/src/styles/themed-base.cssr.js
+++ b/src/avatar/src/styles/themed-base.cssr.js
@@ -4,7 +4,7 @@ export default c([
   ({ props }) => {
     const {
       borderRadius,
-      backgroundColor
+      color: backgroundColor
     } = props.$local
     const {
       easeInOutCubicBezier
diff --git a/src/avatar/styles/dark.js b/src/avatar/styles/dark.js
index 9c1ba2d63..8e94acdb0 100644
--- a/src/avatar/styles/dark.js
+++ b/src/avatar/styles/dark.js
@@ -14,7 +14,7 @@ export default create({
     return {
       ...commonVariables,
       borderRadius,
-      backgroundColor: avatarBackgroundOverlayColor
+      color: avatarBackgroundOverlayColor
     }
   }
 })
diff --git a/src/avatar/styles/light.js b/src/avatar/styles/light.js
index 0629b8768..95d453698 100644
--- a/src/avatar/styles/light.js
+++ b/src/avatar/styles/light.js
@@ -14,7 +14,7 @@ export default create({
     return {
       ...commonVariables,
       borderRadius,
-      backgroundColor: avatarBackgroundOverlayColor
+      color: avatarBackgroundOverlayColor
     }
   }
 })
diff --git a/src/drawer/src/styles/themed-base.cssr.js b/src/drawer/src/styles/themed-base.cssr.js
index 2485e85ee..9a19f4a58 100644
--- a/src/drawer/src/styles/themed-base.cssr.js
+++ b/src/drawer/src/styles/themed-base.cssr.js
@@ -8,7 +8,7 @@ import fadeInTransition from '../../../styles/_transitions/fade-in'
 export default c([
   ({ props }) => {
     const {
-      backgroundColor,
+      color: backgroundColor,
       textColor
     } = props.$local
     const base = props.$base
diff --git a/src/drawer/styles/dark.js b/src/drawer/styles/dark.js
index a591603bf..19dc1a9b7 100644
--- a/src/drawer/styles/dark.js
+++ b/src/drawer/styles/dark.js
@@ -5,7 +5,7 @@ export default create({
   name: 'Drawer',
   getDerivedVariables ({ derived }) {
     return {
-      backgroundColor: derived.modalBackgroundColor,
+      color: derived.modalBackgroundColor,
       textColor: derived.secondaryTextOverlayColor
     }
   }
diff --git a/src/drawer/styles/light.js b/src/drawer/styles/light.js
index d7fecae16..0a5f0b1a8 100644
--- a/src/drawer/styles/light.js
+++ b/src/drawer/styles/light.js
@@ -5,7 +5,7 @@ export default create({
   name: 'Drawer',
   getDerivedVariables ({ derived }) {
     return {
-      backgroundColor: derived.modalBackgroundColor,
+      color: derived.modalBackgroundColor,
       textColor: derived.secondaryTextOverlayColor
     }
   }
diff --git a/src/input-group-label/src/styles/themed-base.cssr.js b/src/input-group-label/src/styles/themed-base.cssr.js
index 3fdd52d81..d0b83e822 100644
--- a/src/input-group-label/src/styles/themed-base.cssr.js
+++ b/src/input-group-label/src/styles/themed-base.cssr.js
@@ -7,7 +7,7 @@ export default c([
     } = props.$base
     const {
       borderRadius,
-      backgroundColor,
+      color: backgroundColor,
       textColor,
       boxShadow
     } = props.$local
diff --git a/src/input-group-label/styles/dark.js b/src/input-group-label/styles/dark.js
index 0fc8a41a4..f505beb49 100644
--- a/src/input-group-label/styles/dark.js
+++ b/src/input-group-label/styles/dark.js
@@ -8,7 +8,7 @@ export default create({
     return {
       ...commonVariables,
       borderRadius: base.borderRadius,
-      backgroundColor: derived.inputBackgroundOverlayColor,
+      color: derived.inputBackgroundOverlayColor,
       textColor: derived.secondaryTextColor,
       boxShadow: `inset 0 0 0 1px transparent`
     }
diff --git a/src/input-group-label/styles/light.js b/src/input-group-label/styles/light.js
index d748da359..b8d80d628 100644
--- a/src/input-group-label/styles/light.js
+++ b/src/input-group-label/styles/light.js
@@ -8,7 +8,7 @@ export default create({
     return {
       ...commonVariables,
       borderRadius: base.borderRadius,
-      backgroundColor: derived.actionBackgroundColor,
+      color: derived.actionBackgroundColor,
       textColor: derived.secondaryTextColor,
       boxShadow: `inset 0 0 0 1px ${derived.borderColor}`
     }