refactor(button): optimize styles use css var

src/button/src/Button.vue

@@ -63,7 +63,7 @@
       <slot />
     </div>
     <n-base-wave v-if="!text" ref="wave" />
-    <div class="n-button__border-mask" />
+    <div v-if="!text" class="n-button__border-mask" />
   </button>
 </template>
 

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

@@ -6,8 +6,7 @@ export default c([
   ({ props }) => {
     const {
       waveDuration,
-      opacityDisabled,
-      textColorPrimary
+      opacityDisabled
     } = props.$local
     const {
       cubicBezierEaseInOut,
@@ -32,7 +31,6 @@ export default c([
           user-select: none;
           text-align: center;
           cursor: pointer;
-          color: ${textColorPrimary};
           transition:
             background-color .3s ${cubicBezierEaseInOut},
             opacity .3s ${cubicBezierEaseInOut},
@@ -119,9 +117,13 @@ export default c([
             width: 100%;
           `
         }),
-        cM('disabled', {
-          cursor: 'not-allowed'
-        }),
+        cM('dashed', {
+          borderStyle: 'dashed'
+        }, [
+          cE('border-mask', {
+            borderStyle: 'dashed'
+          })
+        ]),
         cNotM('disabled', [
           cM('rippling', [
             c('&::after', {
@@ -133,17 +135,8 @@ export default c([
             })
           ])
         ]),
-        cM('text', {
-          raw: `
-            border: none !important;
-            background-color: transparent !important;
-          `
-        }, [
-          cE('border-mask', {
-            raw: `border: none !important;`
-          })
-        ]),
         cM('disabled', {
+          cursor: 'not-allowed',
           opacity: opacityDisabled
         })
       ]

src/button/src/styles/themed-color.cssr.js

@@ -1,6 +1,38 @@
 import { c, cB, cTB, cE, cM, cNotM, createKey } from '../../../_utils/cssr'
 import { read, createHoverColor, createPressedColor } from '../../../_utils/color'
 
+export default c([
+  ({ props }) => {
+    const digest = props.colorDigest || props.$instance.type
+    const pallete = props.colorDigest ? createPallete(props.color) : extractPallete(props.$local, digest)
+    return [
+      createRippleAnimation(),
+      cTB(
+        'button',
+        [
+          cM(`${digest}-colored`, {
+            '--ripple-color': pallete.rippleColor || pallete.borderColor || pallete.color
+          }, [
+            // wave animation
+            cB('base-wave', [
+              cM('active', {
+                zIndex: 1,
+                animationName: `button-wave-spread, button-wave-opacity`
+              })
+            ]),
+            // background-color
+            createBackgroundStyle(pallete),
+            // text-color
+            ['base', 'ghost', 'text'].map(appearance => createTextStyle(pallete, appearance)),
+            // border-color
+            createBorderStyle(pallete)
+          ])
+        ]
+      )
+    ]
+  }
+])
+
 function createPallete (color) {
   const rgb = read(color)
   const colorHover = createHoverColor(rgb)
@@ -53,18 +85,18 @@ function extractPallete (props, type) {
   }
 }
 
-function createRippleAnimation (digest, color, theme) {
+function createRippleAnimation () {
   return [
-    c(`@keyframes a${theme ? theme + '-' : ''}${digest}-button-wave-spread`, {
+    c(`@keyframes button-wave-spread`, {
       from: {
-        boxShadow: `0 0 0.5px 0 ${color}`
+        boxShadow: `0 0 0.5px 0 var(--ripple-color)`
       },
       to: {
         // don't use exact 5px since chrome will display the animation with glitches
-        boxShadow: `0 0 0.5px 4.5px ${color}`
+        boxShadow: `0 0 0.5px 4.5px var(--ripple-color)`
       }
     }),
-    c(`@keyframes a${theme ? theme + '-' : ''}${digest}-button-wave-opacity`, {
+    c(`@keyframes button-wave-opacity`, {
       from: {
         opacity: 0.6
       },
@@ -119,96 +151,68 @@ function createTextStyle (pallete, appearance) {
   ])
 }
 
-export default c([
-  ({ props }) => {
-    const digest = props.colorDigest || props.$instance.type
-    const pallete = props.colorDigest ? createPallete(props.color) : extractPallete(props.$local, digest)
-    const theme = props.$renderedTheme
-    return [
-      createRippleAnimation(
-        digest,
-        pallete.rippleColor || pallete.borderColor || pallete.color,
-        theme
-      ),
-      cTB(
-        'button',
-        [
-          cM(`${digest}-colored`, [
-            // wave animation
-            cB('base-wave', [
-              cM('active', {
-                zIndex: 1,
-                animationName: `a${theme ? theme + '-' : ''}${digest}-button-wave-spread, a${theme ? theme + '-' : ''}${digest}-button-wave-opacity`
-              })
-            ]),
-            // background-color
-            cM('base', {
-              backgroundColor: pallete.color
-            }, [
-              cM('disabled', {
-                backgroundColor: pallete.colorDisabled
-              }),
-              cNotM('disabled', [
-                c('&:focus', {
-                  backgroundColor: pallete.colorFocus
-                }),
-                c('&:hover', {
-                  backgroundColor: pallete.colorHover
-                }),
-                c('&:active', {
-                  backgroundColor: pallete.colorPressed
-                }),
-                cM('pressed', {
-                  backgroundColor: pallete.colorPressed
-                })
-              ])
-            ]),
-            cM('ghost, text', {
-              backgroundColor: 'transparent'
-            }),
-            // text-color
-            ['base', 'ghost', 'text'].map(appearance => createTextStyle(pallete, appearance)),
-            // border-color
-            cM('ghost, base', {
-              borderColor: pallete.borderColor || pallete.color
-            }, [
-              cM('disabled', {
-                borderColor: pallete.borderColorDisabled || pallete.colorDisabled
-              }),
-              cNotM('disabled', [
-                c('&:focus', {
-                  borderColor: pallete.borderColorFocus || pallete.colorFocus
-                }, [
-                  createBorderMaskStyle(pallete.borderColorFocus || pallete.colorFocus)
-                ]),
-                c('&:hover', {
-                  borderColor: pallete.borderColorHover || pallete.colorHover
-                }, [
-                  createBorderMaskStyle(pallete.borderColorHover || pallete.colorHover)
-                ]),
-                c('&:active', {
-                  borderColor: pallete.borderColorPressed || pallete.colorPressed
-                }, [
-                  createBorderMaskStyle(pallete.borderColorPressed || pallete.colorPressed)
-                ]),
-                cM('pressed', {
-                  borderColor: pallete.borderColorPressed || pallete.colorPressed
-                }, [
-                  createBorderMaskStyle(pallete.borderColorPressed || pallete.colorPressed)
-                ])
-              ])
-            ]),
-            // dashed
-            cM('dashed', {
-              borderStyle: 'dashed'
-            }, [
-              cE('border-mask', {
-                borderStyle: 'dashed'
-              })
-            ])
-          ])
-        ]
-      )
-    ]
-  }
-])
+function createBorderStyle (pallete) {
+  return [
+    cM('ghost, base', {
+      borderColor: pallete.borderColor || pallete.color
+    }, [
+      cM('disabled', {
+        borderColor: pallete.borderColorDisabled || pallete.colorDisabled
+      }),
+      cNotM('disabled', [
+        c('&:focus', {
+          borderColor: pallete.borderColorFocus || pallete.colorFocus
+        }, [
+          createBorderMaskStyle(pallete.borderColorFocus || pallete.colorFocus)
+        ]),
+        c('&:hover', {
+          borderColor: pallete.borderColorHover || pallete.colorHover
+        }, [
+          createBorderMaskStyle(pallete.borderColorHover || pallete.colorHover)
+        ]),
+        c('&:active', {
+          borderColor: pallete.borderColorPressed || pallete.colorPressed
+        }, [
+          createBorderMaskStyle(pallete.borderColorPressed || pallete.colorPressed)
+        ]),
+        cM('pressed', {
+          borderColor: pallete.borderColorPressed || pallete.colorPressed
+        }, [
+          createBorderMaskStyle(pallete.borderColorPressed || pallete.colorPressed)
+        ])
+      ])
+    ]),
+    cM('text', {
+      border: 'none'
+    })
+  ]
+}
+
+function createBackgroundStyle (pallete) {
+  return [
+    cM('base', {
+      backgroundColor: pallete.color
+    }, [
+      cM('disabled', {
+        backgroundColor: pallete.colorDisabled
+      }),
+      cNotM('disabled', [
+        c('&:focus', {
+          backgroundColor: pallete.colorFocus
+        }),
+        c('&:hover', {
+          backgroundColor: pallete.colorHover
+        }),
+        c('&:active', {
+          backgroundColor: pallete.colorPressed
+        }),
+        cM('pressed', {
+          backgroundColor: pallete.colorPressed
+        })
+      ])
+    ]),
+    cM('ghost, text', {
+      backgroundColor: 'transparent'
+    })
+  ]
+}

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

@@ -21,7 +21,6 @@ export default c([
           borderRadius,
           fontSize
         }, [
-
           cM('base, ghost', {
             height,
             lineHeight,

src/button/styles/dark.js

@@ -14,90 +14,168 @@ export default create({
       colorPressed: 'transparent',
       colorFocus: 'transparent',
       colorDisabled: 'transparent',
-
-      textColor: derived.textColorSecondary,
+      textColor: derived.textColor2,
       textColorHover: derived.primaryColorHover,
       textColorPressed: derived.primaryColorPressed,
       textColorFocus: derived.primaryColorHover,
-      textColorDisabled: derived.textColorSecondary,
-
-      textColorText: derived.textColorSecondary,
+      textColorDisabled: derived.textColor2,
+      textColorText: derived.textColor2,
       textColorTextHover: derived.primaryColorHover,
       textColorTextPressed: derived.primaryColorPressed,
       textColorTextFocus: derived.primaryColorHover,
-      textColorTextDisabled: derived.textColorSecondary,
-
-      textColorGhost: derived.textColorSecondary,
+      textColorTextDisabled: derived.textColor2,
+      textColorGhost: derived.textColor2,
       textColorGhostHover: derived.primaryColorHover,
       textColorGhostPressed: derived.primaryColorPressed,
       textColorGhostFocus: derived.primaryColorHover,
-      textColorGhostDisabled: derived.textColorSecondary,
-
+      textColorGhostDisabled: derived.textColor2,
       borderColor: derived.borderColorOverlay,
       borderColorHover: derived.primaryColorHover,
       borderColorPressed: derived.primaryColorPressed,
       borderColorFocus: derived.primaryColorHover,
       borderColorDisabled: derived.borderColorOverlay,
-
       rippleColor: derived.primaryColor,
-
-      iconColor: derived.textColorSecondary,
-
-      // type primary
+      iconColor: derived.textColor2,
+      // primary
       colorPrimary: derived.primaryColor,
       colorPrimaryHover: derived.primaryColorHover,
       colorPrimaryPressed: derived.primaryColorPressed,
       colorPrimaryFocus: derived.primaryColorHover,
       colorPrimaryDisabled: derived.primaryColor,
       textColorPrimary: derived.baseColor,
+      textColorPrimaryHover: derived.baseColor,
+      textColorPrimaryPressed: derived.baseColor,
+      textColorPrimaryFocus: derived.baseColor,
       textColorPrimaryDisabled: derived.baseColor,
+      textColorPrimaryText: derived.textColor2,
+      textColorPrimaryTextHover: derived.primaryColorHover,
+      textColorPrimaryTextPressed: derived.primaryColorPressed,
+      textColorPrimaryTextFocus: derived.primaryColorHover,
+      textColorPrimaryTextDisabled: derived.textColor2,
+      textColorPrimaryGhost: derived.primaryColor,
+      textColorPrimaryGhostHover: derived.primaryColorHover,
+      textColorPrimaryGhostPressed: derived.primaryColorPressed,
+      textColorPrimaryGhostFocus: derived.primaryColorHover,
       textColorPrimaryGhostDisabled: derived.primaryColor,
-      textColorPrimaryTextDisabled: derived.primaryColor,
+      borderColorPrimary: derived.primaryColor,
+      borderColorPrimaryHover: derived.primaryColorHover,
+      borderColorPrimaryPressed: derived.primaryColorPressed,
+      borderColorPrimaryFocus: derived.primaryColorHover,
       borderColorPrimaryDisabled: derived.primaryColor,
-      // type info
+      rippleColorPrimary: derived.primaryColor,
+      iconColorPrimary: derived.primaryColor,
+      // info
       colorInfo: derived.infoColor,
       colorInfoHover: derived.infoColorHover,
       colorInfoPressed: derived.infoColorPressed,
       colorInfoFocus: derived.infoColorHover,
       colorInfoDisabled: derived.infoColor,
       textColorInfo: derived.baseColor,
+      textColorInfoHover: derived.baseColor,
+      textColorInfoPressed: derived.baseColor,
+      textColorInfoFocus: derived.baseColor,
       textColorInfoDisabled: derived.baseColor,
+      textColorInfoText: derived.textColor2,
+      textColorInfoTextHover: derived.infoColorHover,
+      textColorInfoTextPressed: derived.infoColorPressed,
+      textColorInfoTextFocus: derived.infoColorHover,
+      textColorInfoTextDisabled: derived.textColor2,
+      textColorInfoGhost: derived.infoColor,
+      textColorInfoGhostHover: derived.infoColorHover,
+      textColorInfoGhostPressed: derived.infoColorPressed,
+      textColorInfoGhostFocus: derived.infoColorHover,
       textColorInfoGhostDisabled: derived.infoColor,
-      textColorInfoTextDisabled: derived.infoColor,
+      borderColorInfo: derived.infoColor,
+      borderColorInfoHover: derived.infoColorHover,
+      borderColorInfoPressed: derived.infoColorPressed,
+      borderColorInfoFocus: derived.infoColorHover,
       borderColorInfoDisabled: derived.infoColor,
-      // type success
+      rippleColorInfo: derived.infoColor,
+      iconColorInfo: derived.infoColor,
+      // success
       colorSuccess: derived.successColor,
-      colorSuccessHover: derived.successHoverColor,
+      colorSuccessHover: derived.successColorHover,
       colorSuccessPressed: derived.successColorPressed,
-      colorSuccessFocus: derived.successHoverColor,
+      colorSuccessFocus: derived.successColorHover,
       colorSuccessDisabled: derived.successColor,
       textColorSuccess: derived.baseColor,
+      textColorSuccessHover: derived.baseColor,
+      textColorSuccessPressed: derived.baseColor,
+      textColorSuccessFocus: derived.baseColor,
       textColorSuccessDisabled: derived.baseColor,
+      textColorSuccessText: derived.textColor2,
+      textColorSuccessTextHover: derived.successColorHover,
+      textColorSuccessTextPressed: derived.successColorPressed,
+      textColorSuccessTextFocus: derived.successColorHover,
+      textColorSuccessTextDisabled: derived.textColor2,
+      textColorSuccessGhost: derived.successColor,
+      textColorSuccessGhostHover: derived.successColorHover,
+      textColorSuccessGhostPressed: derived.successColorPressed,
+      textColorSuccessGhostFocus: derived.successColorHover,
       textColorSuccessGhostDisabled: derived.successColor,
-      textColorSuccessTextDisabled: derived.successColor,
+      borderColorSuccess: derived.successColor,
+      borderColorSuccessHover: derived.successColorHover,
+      borderColorSuccessPressed: derived.successColorPressed,
+      borderColorSuccessFocus: derived.successColorHover,
       borderColorSuccessDisabled: derived.successColor,
-      // type warning
+      rippleColorSuccess: derived.successColor,
+      iconColorSuccess: derived.successColor,
+      // warning
       colorWarning: derived.warningColor,
       colorWarningHover: derived.warningColorHover,
       colorWarningPressed: derived.warningColorPressed,
       colorWarningFocus: derived.warningColorHover,
       colorWarningDisabled: derived.warningColor,
       textColorWarning: derived.baseColor,
+      textColorWarningHover: derived.baseColor,
+      textColorWarningPressed: derived.baseColor,
+      textColorWarningFocus: derived.baseColor,
       textColorWarningDisabled: derived.baseColor,
+      textColorWarningText: derived.textColor2,
+      textColorWarningTextHover: derived.warningColorHover,
+      textColorWarningTextPressed: derived.warningColorPressed,
+      textColorWarningTextFocus: derived.warningColorHover,
+      textColorWarningTextDisabled: derived.textColor2,
+      textColorWarningGhost: derived.warningColor,
+      textColorWarningGhostHover: derived.warningColorHover,
+      textColorWarningGhostPressed: derived.warningColorPressed,
+      textColorWarningGhostFocus: derived.warningColorHover,
       textColorWarningGhostDisabled: derived.warningColor,
-      textColorWarningTextDisabled: derived.warningColor,
+      borderColorWarning: derived.warningColor,
+      borderColorWarningHover: derived.warningColorHover,
+      borderColorWarningPressed: derived.warningColorPressed,
+      borderColorWarningFocus: derived.warningColorHover,
       borderColorWarningDisabled: derived.warningColor,
-      // type error
+      rippleColorWarning: derived.warningColor,
+      iconColorWarning: derived.warningColor,
+      // error
       colorError: derived.errorColor,
       colorErrorHover: derived.errorColorHover,
       colorErrorPressed: derived.errorColorPressed,
       colorErrorFocus: derived.errorColorHover,
       colorErrorDisabled: derived.errorColor,
       textColorError: derived.baseColor,
+      textColorErrorHover: derived.baseColor,
+      textColorErrorPressed: derived.baseColor,
+      textColorErrorFocus: derived.baseColor,
       textColorErrorDisabled: derived.baseColor,
+      textColorErrorText: derived.textColor2,
+      textColorErrorTextHover: derived.errorColorHover,
+      textColorErrorTextPressed: derived.errorColorPressed,
+      textColorErrorTextFocus: derived.errorColorHover,
+      textColorErrorTextDisabled: derived.textColor2,
+      textColorErrorGhost: derived.errorColor,
+      textColorErrorGhostHover: derived.errorColorHover,
+      textColorErrorGhostPressed: derived.errorColorPressed,
+      textColorErrorGhostFocus: derived.errorColorHover,
       textColorErrorGhostDisabled: derived.errorColor,
-      textColorErrorTextDisabled: derived.errorColor,
-      borderColorErrorDisabled: derived.errorColor
+      borderColorError: derived.errorColor,
+      borderColorErrorHover: derived.errorColorHover,
+      borderColorErrorPressed: derived.errorColorPressed,
+      borderColorErrorFocus: derived.errorColorHover,
+      borderColorErrorDisabled: derived.errorColor,
+      rippleColorError: derived.errorColor,
+      iconColorError: derived.errorColor
     }
   }
 })

src/button/styles/light.js

@@ -14,90 +14,168 @@ export default create({
       colorPressed: 'transparent',
       colorFocus: 'transparent',
       colorDisabled: 'transparent',
-
-      textColor: derived.textColorSecondary,
+      textColor: derived.textColor2,
       textColorHover: derived.primaryColorHover,
       textColorPressed: derived.primaryColorPressed,
       textColorFocus: derived.primaryColorHover,
-      textColorDisabled: derived.textColorSecondary,
-
-      textColorText: derived.textColorSecondary,
+      textColorDisabled: derived.textColor2,
+      textColorText: derived.textColor2,
       textColorTextHover: derived.primaryColorHover,
       textColorTextPressed: derived.primaryColorPressed,
       textColorTextFocus: derived.primaryColorHover,
-      textColorTextDisabled: derived.textColorSecondary,
-
-      textColorGhost: derived.textColorSecondary,
+      textColorTextDisabled: derived.textColor2,
+      textColorGhost: derived.textColor2,
       textColorGhostHover: derived.primaryColorHover,
       textColorGhostPressed: derived.primaryColorPressed,
       textColorGhostFocus: derived.primaryColorHover,
-      textColorGhostDisabled: derived.textColorSecondary,
-
-      borderColor: derived.borderColor,
+      textColorGhostDisabled: derived.textColor2,
+      borderColor: derived.borderColorOverlay,
       borderColorHover: derived.primaryColorHover,
       borderColorPressed: derived.primaryColorPressed,
       borderColorFocus: derived.primaryColorHover,
-      borderColorDisabled: derived.borderColor,
-
+      borderColorDisabled: derived.borderColorOverlay,
       rippleColor: derived.primaryColor,
-
-      iconColor: derived.textColorSecondary,
-
-      // type primary
+      iconColor: derived.textColor2,
+      // primary
       colorPrimary: derived.primaryColor,
       colorPrimaryHover: derived.primaryColorHover,
       colorPrimaryPressed: derived.primaryColorPressed,
       colorPrimaryFocus: derived.primaryColorHover,
       colorPrimaryDisabled: derived.primaryColor,
       textColorPrimary: derived.baseColor,
+      textColorPrimaryHover: derived.baseColor,
+      textColorPrimaryPressed: derived.baseColor,
+      textColorPrimaryFocus: derived.baseColor,
       textColorPrimaryDisabled: derived.baseColor,
+      textColorPrimaryText: derived.textColor2,
+      textColorPrimaryTextHover: derived.primaryColorHover,
+      textColorPrimaryTextPressed: derived.primaryColorPressed,
+      textColorPrimaryTextFocus: derived.primaryColorHover,
+      textColorPrimaryTextDisabled: derived.textColor2,
+      textColorPrimaryGhost: derived.primaryColor,
+      textColorPrimaryGhostHover: derived.primaryColorHover,
+      textColorPrimaryGhostPressed: derived.primaryColorPressed,
+      textColorPrimaryGhostFocus: derived.primaryColorHover,
       textColorPrimaryGhostDisabled: derived.primaryColor,
-      textColorPrimaryTextDisabled: derived.primaryColor,
+      borderColorPrimary: derived.primaryColor,
+      borderColorPrimaryHover: derived.primaryColorHover,
+      borderColorPrimaryPressed: derived.primaryColorPressed,
+      borderColorPrimaryFocus: derived.primaryColorHover,
       borderColorPrimaryDisabled: derived.primaryColor,
-      // type info
+      rippleColorPrimary: derived.primaryColor,
+      iconColorPrimary: derived.primaryColor,
+      // info
       colorInfo: derived.infoColor,
       colorInfoHover: derived.infoColorHover,
       colorInfoPressed: derived.infoColorPressed,
       colorInfoFocus: derived.infoColorHover,
       colorInfoDisabled: derived.infoColor,
       textColorInfo: derived.baseColor,
+      textColorInfoHover: derived.baseColor,
+      textColorInfoPressed: derived.baseColor,
+      textColorInfoFocus: derived.baseColor,
       textColorInfoDisabled: derived.baseColor,
+      textColorInfoText: derived.textColor2,
+      textColorInfoTextHover: derived.infoColorHover,
+      textColorInfoTextPressed: derived.infoColorPressed,
+      textColorInfoTextFocus: derived.infoColorHover,
+      textColorInfoTextDisabled: derived.textColor2,
+      textColorInfoGhost: derived.infoColor,
+      textColorInfoGhostHover: derived.infoColorHover,
+      textColorInfoGhostPressed: derived.infoColorPressed,
+      textColorInfoGhostFocus: derived.infoColorHover,
       textColorInfoGhostDisabled: derived.infoColor,
-      textColorInfoTextDisabled: derived.infoColor,
+      borderColorInfo: derived.infoColor,
+      borderColorInfoHover: derived.infoColorHover,
+      borderColorInfoPressed: derived.infoColorPressed,
+      borderColorInfoFocus: derived.infoColorHover,
       borderColorInfoDisabled: derived.infoColor,
-      // type success
+      rippleColorInfo: derived.infoColor,
+      iconColorInfo: derived.infoColor,
+      // success
       colorSuccess: derived.successColor,
-      colorSuccessHover: derived.successHoverColor,
+      colorSuccessHover: derived.successColorHover,
       colorSuccessPressed: derived.successColorPressed,
-      colorSuccessFocus: derived.successHoverColor,
+      colorSuccessFocus: derived.successColorHover,
       colorSuccessDisabled: derived.successColor,
       textColorSuccess: derived.baseColor,
+      textColorSuccessHover: derived.baseColor,
+      textColorSuccessPressed: derived.baseColor,
+      textColorSuccessFocus: derived.baseColor,
       textColorSuccessDisabled: derived.baseColor,
+      textColorSuccessText: derived.textColor2,
+      textColorSuccessTextHover: derived.successColorHover,
+      textColorSuccessTextPressed: derived.successColorPressed,
+      textColorSuccessTextFocus: derived.successColorHover,
+      textColorSuccessTextDisabled: derived.textColor2,
+      textColorSuccessGhost: derived.successColor,
+      textColorSuccessGhostHover: derived.successColorHover,
+      textColorSuccessGhostPressed: derived.successColorPressed,
+      textColorSuccessGhostFocus: derived.successColorHover,
       textColorSuccessGhostDisabled: derived.successColor,
-      textColorSuccessTextDisabled: derived.successColor,
+      borderColorSuccess: derived.successColor,
+      borderColorSuccessHover: derived.successColorHover,
+      borderColorSuccessPressed: derived.successColorPressed,
+      borderColorSuccessFocus: derived.successColorHover,
       borderColorSuccessDisabled: derived.successColor,
-      // type warning
+      rippleColorSuccess: derived.successColor,
+      iconColorSuccess: derived.successColor,
+      // warning
       colorWarning: derived.warningColor,
       colorWarningHover: derived.warningColorHover,
       colorWarningPressed: derived.warningColorPressed,
       colorWarningFocus: derived.warningColorHover,
       colorWarningDisabled: derived.warningColor,
       textColorWarning: derived.baseColor,
+      textColorWarningHover: derived.baseColor,
+      textColorWarningPressed: derived.baseColor,
+      textColorWarningFocus: derived.baseColor,
       textColorWarningDisabled: derived.baseColor,
+      textColorWarningText: derived.textColor2,
+      textColorWarningTextHover: derived.warningColorHover,
+      textColorWarningTextPressed: derived.warningColorPressed,
+      textColorWarningTextFocus: derived.warningColorHover,
+      textColorWarningTextDisabled: derived.textColor2,
+      textColorWarningGhost: derived.warningColor,
+      textColorWarningGhostHover: derived.warningColorHover,
+      textColorWarningGhostPressed: derived.warningColorPressed,
+      textColorWarningGhostFocus: derived.warningColorHover,
       textColorWarningGhostDisabled: derived.warningColor,
-      textColorWarningTextDisabled: derived.warningColor,
+      borderColorWarning: derived.warningColor,
+      borderColorWarningHover: derived.warningColorHover,
+      borderColorWarningPressed: derived.warningColorPressed,
+      borderColorWarningFocus: derived.warningColorHover,
       borderColorWarningDisabled: derived.warningColor,
-      // type error
+      rippleColorWarning: derived.warningColor,
+      iconColorWarning: derived.warningColor,
+      // error
       colorError: derived.errorColor,
       colorErrorHover: derived.errorColorHover,
       colorErrorPressed: derived.errorColorPressed,
       colorErrorFocus: derived.errorColorHover,
       colorErrorDisabled: derived.errorColor,
       textColorError: derived.baseColor,
+      textColorErrorHover: derived.baseColor,
+      textColorErrorPressed: derived.baseColor,
+      textColorErrorFocus: derived.baseColor,
       textColorErrorDisabled: derived.baseColor,
+      textColorErrorText: derived.textColor2,
+      textColorErrorTextHover: derived.errorColorHover,
+      textColorErrorTextPressed: derived.errorColorPressed,
+      textColorErrorTextFocus: derived.errorColorHover,
+      textColorErrorTextDisabled: derived.textColor2,
+      textColorErrorGhost: derived.errorColor,
+      textColorErrorGhostHover: derived.errorColorHover,
+      textColorErrorGhostPressed: derived.errorColorPressed,
+      textColorErrorGhostFocus: derived.errorColorHover,
       textColorErrorGhostDisabled: derived.errorColor,
-      textColorErrorTextDisabled: derived.errorColor,
-      borderColorErrorDisabled: derived.errorColor
+      borderColorError: derived.errorColor,
+      borderColorErrorHover: derived.errorColorHover,
+      borderColorErrorPressed: derived.errorColorPressed,
+      borderColorErrorFocus: derived.errorColorHover,
+      borderColorErrorDisabled: derived.errorColor,
+      rippleColorError: derived.errorColor,
+      iconColorError: derived.errorColor
     }
   }
 })