naive-ui 2.20.2 → 2.21.2

package/es/button/src/Button.js

@@ -1,14 +1,15 @@
-import { h, ref, computed, inject, nextTick, defineComponent, renderSlot } from 'vue';
+import { h, ref, computed, inject, defineComponent, renderSlot, watchEffect } from 'vue';
 import { useMemo } from 'vooks';
 import { createHoverColor, createPressedColor } from '../../_utils/color/index';
 import { useConfig, useFormItem, useTheme } from '../../_mixins';
 import { NFadeInExpandTransition, NIconSwitchTransition, NBaseLoading, NBaseWave } from '../../_internal';
-import { call, createKey } from '../../_utils';
+import { call, createKey, warnOnce } from '../../_utils';
 import { buttonLight } from '../styles';
 import { buttonGroupInjectionKey } from './ButtonGroup';
 import style from './styles/button.cssr';
 import useRtl from '../../_mixins/use-rtl';
-const buttonProps = Object.assign(Object.assign({}, useTheme.props), { color: String, textColor: String, text: Boolean, block: Boolean, loading: Boolean, disabled: Boolean, circle: Boolean, size: String, ghost: Boolean, round: Boolean, depth: [Number, String], focusable: {
+import { changeColor } from 'seemly';
+const buttonProps = Object.assign(Object.assign({}, useTheme.props), { color: String, textColor: String, text: Boolean, block: Boolean, loading: Boolean, disabled: Boolean, circle: Boolean, size: String, ghost: Boolean, round: Boolean, secondary: Boolean, tertiary: Boolean, quaternary: Boolean, strong: Boolean, focusable: {
         type: Boolean,
         default: true
     }, keyboard: {
@@ -34,11 +35,23 @@ const Button = defineComponent({
     name: 'Button',
     props: buttonProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                const { dashed, ghost, text, secondary, tertiary, quaternary } = props;
+                if ((dashed || ghost || text) &&
+                    (secondary || tertiary || quaternary)) {
+                    warnOnce('button', "`dashed`, `ghost` and `text` props can't be used along with `secondary`, `tertiary` and `quaterary` props.");
+                }
+            });
+        }
         const selfRef = ref(null);
         const waveRef = ref(null);
         const enterPressedRef = ref(false);
         const showBorderRef = useMemo(() => {
-            return (!props.text &&
+            return (!props.quaternary &&
+                !props.tertiary &&
+                !props.secondary &&
+                !props.text &&
                 (!props.color || props.ghost || props.dashed) &&
                 props.bordered);
         });
@@ -62,7 +75,7 @@ const Button = defineComponent({
         const mergedFocusableRef = computed(() => {
             return props.focusable && !props.disabled;
         });
-        const handleMouseDown = (e) => {
+        const handleMousedown = (e) => {
             var _a;
             e.preventDefault();
             if (props.disabled) {
@@ -85,24 +98,17 @@ const Button = defineComponent({
                 }
             }
         };
-        const handleKeyUp = (e) => {
+        const handleKeyup = (e) => {
             switch (e.code) {
                 case 'Enter':
                 case 'NumpadEnter':
                     if (!props.keyboard) {
-                        e.preventDefault();
                         return;
                     }
                     enterPressedRef.value = false;
-                    void nextTick(() => {
-                        var _a;
-                        if (!props.disabled) {
-                            (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.click();
-                        }
-                    });
             }
         };
-        const handleKeyDown = (e) => {
+        const handleKeydown = (e) => {
             switch (e.code) {
                 case 'Enter':
                 case 'NumpadEnter':
@@ -128,10 +134,10 @@ const Button = defineComponent({
             showBorder: showBorderRef,
             enterPressed: enterPressedRef,
             rtlEnabled: rtlEnabledRef,
-            handleMouseDown,
-            handleKeyDown,
+            handleMousedown,
+            handleKeydown,
             handleBlur,
-            handleKeyUp,
+            handleKeyup,
             handleClick,
             customColorCssVars: computed(() => {
                 const { color } = props;
@@ -149,16 +155,12 @@ const Button = defineComponent({
             cssVars: computed(() => {
                 const theme = themeRef.value;
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme;
-                const { rippleDuration, opacityDisabled, fontWeightText, fontWeighGhost, fontWeight } = self;
+                const { rippleDuration, opacityDisabled, fontWeight, fontWeightStrong } = self;
                 const size = mergedSizeRef.value;
-                const { dashed, type, ghost, text, color, round, circle, textColor } = props;
+                const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props;
                 // font
                 const fontProps = {
-                    fontWeight: text
-                        ? fontWeightText
-                        : ghost
-                            ? fontWeighGhost
-                            : fontWeight
+                    fontWeight: strong ? fontWeightStrong : fontWeight
                 };
                 // color
                 let colorProps = {
@@ -174,13 +176,12 @@ const Button = defineComponent({
                     '--text-color-focus': 'initial',
                     '--text-color-disabled': 'initial'
                 };
+                const typeIsTertiary = type === 'tertiary';
+                const typeIsDefault = type === 'default';
+                const mergedType = typeIsTertiary ? 'default' : type;
                 if (text) {
-                    const { depth } = props;
                     const propTextColor = textColor || color;
-                    const mergedTextColor = propTextColor ||
-                        (type === 'default' && depth !== undefined
-                            ? self[createKey('textColorTextDepth', String(depth))]
-                            : self[createKey('textColorText', type)]);
+                    const mergedTextColor = propTextColor || self[createKey('textColorText', mergedType)];
                     colorProps = {
                         '--color': '#0000',
                         '--color-hover': '#0000',
@@ -191,14 +192,15 @@ const Button = defineComponent({
                         '--text-color': mergedTextColor,
                         '--text-color-hover': propTextColor
                             ? createHoverColor(propTextColor)
-                            : self[createKey('textColorTextHover', type)],
+                            : self[createKey('textColorTextHover', mergedType)],
                         '--text-color-pressed': propTextColor
                             ? createPressedColor(propTextColor)
-                            : self[createKey('textColorTextPressed', type)],
+                            : self[createKey('textColorTextPressed', mergedType)],
                         '--text-color-focus': propTextColor
                             ? createHoverColor(propTextColor)
-                            : self[createKey('textColorTextHover', type)],
-                        '--text-color-disabled': propTextColor || self[createKey('textColorTextDisabled', type)]
+                            : self[createKey('textColorTextHover', mergedType)],
+                        '--text-color-disabled': propTextColor ||
+                            self[createKey('textColorTextDisabled', mergedType)]
                     };
                 }
                 else if (ghost || dashed) {
@@ -209,54 +211,123 @@ const Button = defineComponent({
                         '--color-pressed': '#0000',
                         '--color-focus': '#0000',
                         '--color-disabled': '#0000',
-                        '--ripple-color': color || self[createKey('rippleColor', type)],
-                        '--text-color': mergedTextColor || self[createKey('textColorGhost', type)],
+                        '--ripple-color': color || self[createKey('rippleColor', mergedType)],
+                        '--text-color': mergedTextColor || self[createKey('textColorGhost', mergedType)],
                         '--text-color-hover': mergedTextColor
                             ? createHoverColor(mergedTextColor)
-                            : self[createKey('textColorGhostHover', type)],
+                            : self[createKey('textColorGhostHover', mergedType)],
                         '--text-color-pressed': mergedTextColor
                             ? createPressedColor(mergedTextColor)
-                            : self[createKey('textColorGhostPressed', type)],
+                            : self[createKey('textColorGhostPressed', mergedType)],
                         '--text-color-focus': mergedTextColor
                             ? createHoverColor(mergedTextColor)
-                            : self[createKey('textColorGhostHover', type)],
-                        '--text-color-disabled': mergedTextColor || self[createKey('textColorGhostDisabled', type)]
+                            : self[createKey('textColorGhostHover', mergedType)],
+                        '--text-color-disabled': mergedTextColor ||
+                            self[createKey('textColorGhostDisabled', mergedType)]
+                    };
+                }
+                else if (secondary) {
+                    const typeTextColor = typeIsDefault
+                        ? self.textColor
+                        : typeIsTertiary
+                            ? self.textColorTertiary
+                            : self[createKey('color', mergedType)];
+                    const mergedTextColor = color || typeTextColor;
+                    const isColoredType = type !== 'default' && type !== 'tertiary';
+                    colorProps = {
+                        '--color': isColoredType
+                            ? changeColor(mergedTextColor, {
+                                alpha: self.colorOpacitySecondary
+                            })
+                            : self.colorSecondary,
+                        '--color-hover': isColoredType
+                            ? changeColor(mergedTextColor, {
+                                alpha: self.colorOpacitySecondaryHover
+                            })
+                            : self.colorSecondaryHover,
+                        '--color-pressed': isColoredType
+                            ? changeColor(mergedTextColor, {
+                                alpha: self.colorOpacitySecondaryPressed
+                            })
+                            : self.colorSecondaryPressed,
+                        '--color-focus': isColoredType
+                            ? changeColor(mergedTextColor, {
+                                alpha: self.colorOpacitySecondaryHover
+                            })
+                            : self.colorSecondaryHover,
+                        '--color-disabled': self.colorSecondary,
+                        '--ripple-color': '#0000',
+                        '--text-color': mergedTextColor,
+                        '--text-color-hover': mergedTextColor,
+                        '--text-color-pressed': mergedTextColor,
+                        '--text-color-focus': mergedTextColor,
+                        '--text-color-disabled': mergedTextColor
                     };
                 }
+                else if (tertiary || quaternary) {
+                    const typeColor = typeIsDefault
+                        ? self.textColor
+                        : typeIsTertiary
+                            ? self.textColorTertiary
+                            : self[createKey('color', mergedType)];
+                    const mergedColor = color || typeColor;
+                    if (tertiary) {
+                        colorProps['--color'] = self.colorTertiary;
+                        colorProps['--color-hover'] = self.colorTertiaryHover;
+                        colorProps['--color-pressed'] = self.colorTertiaryPressed;
+                        colorProps['--color-focus'] = self.colorSecondaryHover;
+                        colorProps['--color-disabled'] = self.colorTertiary;
+                    }
+                    else {
+                        colorProps['--color'] = self.colorQuaternary;
+                        colorProps['--color-hover'] = self.colorQuaternaryHover;
+                        colorProps['--color-pressed'] = self.colorQuaternaryPressed;
+                        colorProps['--color-focus'] = self.colorQuaternaryHover;
+                        colorProps['--color-disabled'] = self.colorQuaternary;
+                    }
+                    colorProps['--ripple-color'] = '#0000';
+                    colorProps['--text-color'] = mergedColor;
+                    colorProps['--text-color-hover'] = mergedColor;
+                    colorProps['--text-color-pressed'] = mergedColor;
+                    colorProps['--text-color-focus'] = mergedColor;
+                    colorProps['--text-color-disabled'] = mergedColor;
+                }
                 else {
                     colorProps = {
-                        '--color': color || self[createKey('color', type)],
+                        '--color': color || self[createKey('color', mergedType)],
                         '--color-hover': color
                             ? createHoverColor(color)
-                            : self[createKey('colorHover', type)],
+                            : self[createKey('colorHover', mergedType)],
                         '--color-pressed': color
                             ? createPressedColor(color)
-                            : self[createKey('colorPressed', type)],
+                            : self[createKey('colorPressed', mergedType)],
                         '--color-focus': color
                             ? createHoverColor(color)
-                            : self[createKey('colorFocus', type)],
-                        '--color-disabled': color || self[createKey('colorDisabled', type)],
-                        '--ripple-color': color || self[createKey('rippleColor', type)],
+                            : self[createKey('colorFocus', mergedType)],
+                        '--color-disabled': color || self[createKey('colorDisabled', mergedType)],
+                        '--ripple-color': color || self[createKey('rippleColor', mergedType)],
                         '--text-color': textColor ||
                             (color
                                 ? self.textColorPrimary
-                                : self[createKey('textColor', type)]),
+                                : typeIsTertiary
+                                    ? self.textColorTertiary
+                                    : self[createKey('textColor', mergedType)]),
                         '--text-color-hover': textColor ||
                             (color
                                 ? self.textColorHoverPrimary
-                                : self[createKey('textColorHover', type)]),
+                                : self[createKey('textColorHover', mergedType)]),
                         '--text-color-pressed': textColor ||
                             (color
                                 ? self.textColorPressedPrimary
-                                : self[createKey('textColorPressed', type)]),
+                                : self[createKey('textColorPressed', mergedType)]),
                         '--text-color-focus': textColor ||
                             (color
                                 ? self.textColorFocusPrimary
-                                : self[createKey('textColorFocus', type)]),
+                                : self[createKey('textColorFocus', mergedType)]),
                         '--text-color-disabled': textColor ||
                             (color
                                 ? self.textColorDisabledPrimary
-                                : self[createKey('textColorDisabled', type)])
+                                : self[createKey('textColorDisabled', mergedType)])
                     };
                 }
                 // border
@@ -278,11 +349,11 @@ const Button = defineComponent({
                 }
                 else {
                     borderProps = {
-                        '--border': self[createKey('border', type)],
-                        '--border-hover': self[createKey('borderHover', type)],
-                        '--border-pressed': self[createKey('borderPressed', type)],
-                        '--border-focus': self[createKey('borderFocus', type)],
-                        '--border-disabled': self[createKey('borderDisabled', type)]
+                        '--border': self[createKey('border', mergedType)],
+                        '--border-hover': self[createKey('borderHover', mergedType)],
+                        '--border-pressed': self[createKey('borderPressed', mergedType)],
+                        '--border-focus': self[createKey('borderFocus', mergedType)],
+                        '--border-disabled': self[createKey('borderDisabled', mergedType)]
                     };
                 }
                 // size
@@ -322,8 +393,9 @@ const Button = defineComponent({
                 this.enterPressed && `${mergedClsPrefix}-button--pressed`,
                 !this.text && this.dashed && `${mergedClsPrefix}-button--dashed`,
                 this.color && `${mergedClsPrefix}-button--color`,
+                this.secondary && `${mergedClsPrefix}-button--secondary`,
                 this.ghost && `${mergedClsPrefix}-button--ghost` // required for button group border collapse
-            ], tabindex: this.mergedFocusable ? 0 : -1, type: this.attrType, style: this.cssVars, disabled: this.disabled, onClick: this.handleClick, onBlur: this.handleBlur, onMousedown: this.handleMouseDown, onKeyup: this.handleKeyUp, onKeydown: this.handleKeyDown },
+            ], tabindex: this.mergedFocusable ? 0 : -1, type: this.attrType, style: this.cssVars, disabled: this.disabled, onClick: this.handleClick, onBlur: this.handleBlur, onMousedown: this.handleMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown },
             $slots.default && this.iconPlacement === 'right' ? (h("div", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
             h(NFadeInExpandTransition, { width: true }, {
                 default: () => $slots.icon || this.loading ? (h("span", { class: `${mergedClsPrefix}-button__icon`, style: {

package/es/button/src/interface.d.ts

@@ -1,2 +1,2 @@
 export declare type Size = 'tiny' | 'small' | 'medium' | 'large';
-export declare type Type = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error';
+export declare type Type = 'default' | 'tertiary' | 'primary' | 'info' | 'success' | 'warning' | 'error';

package/es/button/src/styles/button.cssr.js

@@ -51,6 +51,7 @@ export default c([cB('button', `
  border: none;
  display: inline-flex;
  flex-wrap: nowrap;
+ flex-shrink: 0;
  align-items: center;
  justify-content: center;
  user-select: none;

package/es/button/styles/dark.js

@@ -6,6 +6,9 @@ const buttonDark = {
     self(vars) {
         const commonSelf = self(vars);
         commonSelf.waveOpacity = '0.8';
+        commonSelf.colorOpacitySecondary = 0.16;
+        commonSelf.colorOpacitySecondaryHover = 0.2;
+        commonSelf.colorOpacitySecondaryPressed = 0.12;
         return commonSelf;
     }
 };

package/es/button/styles/light.d.ts

@@ -14,20 +14,30 @@ export declare const self: (vars: ThemeCommonVars) => {
     fontSizeMedium: string;
     fontSizeLarge: string;
     opacityDisabled: string;
+    colorOpacitySecondary: number;
+    colorOpacitySecondaryHover: number;
+    colorOpacitySecondaryPressed: number;
+    colorSecondary: string;
+    colorSecondaryHover: string;
+    colorSecondaryPressed: string;
+    colorTertiary: string;
+    colorTertiaryHover: string;
+    colorTertiaryPressed: string;
+    colorQuaternary: string;
+    colorQuaternaryHover: string;
+    colorQuaternaryPressed: string;
     color: string;
     colorHover: string;
     colorPressed: string;
     colorFocus: string;
     colorDisabled: string;
     textColor: string;
+    textColorTertiary: string;
     textColorHover: string;
     textColorPressed: string;
     textColorFocus: string;
     textColorDisabled: string;
     textColorText: string;
-    textColorTextDepth1: string;
-    textColorTextDepth2: string;
-    textColorTextDepth3: string;
     textColorTextHover: string;
     textColorTextPressed: string;
     textColorTextFocus: string;
@@ -174,9 +184,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     borderDisabledError: string;
     rippleColorError: string;
     waveOpacity: string;
-    fontWeightText: string;
     fontWeight: string;
-    fontWeighGhost: string;
+    fontWeightStrong: string;
     paddingTiny: string;
     paddingSmall: string;
     paddingMedium: string;

package/es/button/styles/light.js

@@ -1,13 +1,19 @@
 import commonVariables from './_common';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { heightTiny, heightSmall, heightMedium, heightLarge, borderRadius, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, opacityDisabled, textColor1, textColor2, textColor3, primaryColorHover, primaryColorPressed, borderColor, primaryColor, baseColor, infoColor, infoColorHover, infoColorPressed, successColor, successColorHover, successColorPressed, warningColor, warningColorHover, warningColorPressed, errorColor, errorColorHover, errorColorPressed, fontWeight } = vars;
+    const { heightTiny, heightSmall, heightMedium, heightLarge, borderRadius, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, opacityDisabled, textColor2, textColor3, primaryColorHover, primaryColorPressed, borderColor, primaryColor, baseColor, infoColor, infoColorHover, infoColorPressed, successColor, successColorHover, successColorPressed, warningColor, warningColorHover, warningColorPressed, errorColor, errorColorHover, errorColorPressed, fontWeight, buttonColor2, buttonColor2Hover, buttonColor2Pressed, fontWeightStrong } = vars;
     return Object.assign(Object.assign({}, commonVariables), { heightTiny,
         heightSmall,
         heightMedium,
         heightLarge, borderRadiusTiny: borderRadius, borderRadiusSmall: borderRadius, borderRadiusMedium: borderRadius, borderRadiusLarge: borderRadius, fontSizeTiny: fontSizeTiny, fontSizeSmall: fontSizeSmall, fontSizeMedium: fontSizeMedium, fontSizeLarge: fontSizeLarge, opacityDisabled: opacityDisabled, 
+        // secondary
+        colorOpacitySecondary: 0.16, colorOpacitySecondaryHover: 0.2, colorOpacitySecondaryPressed: 0.24, colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, 
+        // tertiary
+        colorTertiary: buttonColor2, colorTertiaryHover: buttonColor2Hover, colorTertiaryPressed: buttonColor2Pressed, 
+        // quaternary
+        colorQuaternary: '#0000', colorQuaternaryHover: buttonColor2Hover, colorQuaternaryPressed: buttonColor2Pressed, 
         // default type
-        color: '#0000', colorHover: '#0000', colorPressed: '#0000', colorFocus: '#0000', colorDisabled: '#0000', textColor: textColor2, textColorHover: primaryColorHover, textColorPressed: primaryColorPressed, textColorFocus: primaryColorHover, textColorDisabled: textColor2, textColorText: textColor2, textColorTextDepth1: textColor1, textColorTextDepth2: textColor2, textColorTextDepth3: textColor3, textColorTextHover: primaryColorHover, textColorTextPressed: primaryColorPressed, textColorTextFocus: primaryColorHover, textColorTextDisabled: textColor2, textColorGhost: textColor2, textColorGhostHover: primaryColorHover, textColorGhostPressed: primaryColorPressed, textColorGhostFocus: primaryColorHover, textColorGhostDisabled: textColor2, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderPressed: `1px solid ${primaryColorPressed}`, borderFocus: `1px solid ${primaryColorHover}`, borderDisabled: `1px solid ${borderColor}`, rippleColor: primaryColor, 
+        color: '#0000', colorHover: '#0000', colorPressed: '#0000', colorFocus: '#0000', colorDisabled: '#0000', textColor: textColor2, textColorTertiary: textColor3, textColorHover: primaryColorHover, textColorPressed: primaryColorPressed, textColorFocus: primaryColorHover, textColorDisabled: textColor2, textColorText: textColor2, textColorTextHover: primaryColorHover, textColorTextPressed: primaryColorPressed, textColorTextFocus: primaryColorHover, textColorTextDisabled: textColor2, textColorGhost: textColor2, textColorGhostHover: primaryColorHover, textColorGhostPressed: primaryColorPressed, textColorGhostFocus: primaryColorHover, textColorGhostDisabled: textColor2, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderPressed: `1px solid ${primaryColorPressed}`, borderFocus: `1px solid ${primaryColorHover}`, borderDisabled: `1px solid ${borderColor}`, rippleColor: primaryColor, 
         // primary
         colorPrimary: primaryColor, colorHoverPrimary: primaryColorHover, colorPressedPrimary: primaryColorPressed, colorFocusPrimary: primaryColorHover, colorDisabledPrimary: primaryColor, textColorPrimary: baseColor, textColorHoverPrimary: baseColor, textColorPressedPrimary: baseColor, textColorFocusPrimary: baseColor, textColorDisabledPrimary: baseColor, textColorTextPrimary: primaryColor, textColorTextHoverPrimary: primaryColorHover, textColorTextPressedPrimary: primaryColorPressed, textColorTextFocusPrimary: primaryColorHover, textColorTextDisabledPrimary: textColor2, textColorGhostPrimary: primaryColor, textColorGhostHoverPrimary: primaryColorHover, textColorGhostPressedPrimary: primaryColorPressed, textColorGhostFocusPrimary: primaryColorHover, textColorGhostDisabledPrimary: primaryColor, borderPrimary: `1px solid ${primaryColor}`, borderHoverPrimary: `1px solid ${primaryColorHover}`, borderPressedPrimary: `1px solid ${primaryColorPressed}`, borderFocusPrimary: `1px solid ${primaryColorHover}`, borderDisabledPrimary: `1px solid ${primaryColor}`, rippleColorPrimary: primaryColor, 
         // info
@@ -17,7 +23,8 @@ export const self = (vars) => {
         // warning
         colorWarning: warningColor, colorHoverWarning: warningColorHover, colorPressedWarning: warningColorPressed, colorFocusWarning: warningColorHover, colorDisabledWarning: warningColor, textColorWarning: baseColor, textColorHoverWarning: baseColor, textColorPressedWarning: baseColor, textColorFocusWarning: baseColor, textColorDisabledWarning: baseColor, textColorTextWarning: warningColor, textColorTextHoverWarning: warningColorHover, textColorTextPressedWarning: warningColorPressed, textColorTextFocusWarning: warningColorHover, textColorTextDisabledWarning: textColor2, textColorGhostWarning: warningColor, textColorGhostHoverWarning: warningColorHover, textColorGhostPressedWarning: warningColorPressed, textColorGhostFocusWarning: warningColorHover, textColorGhostDisabledWarning: warningColor, borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderPressedWarning: `1px solid ${warningColorPressed}`, borderFocusWarning: `1px solid ${warningColorHover}`, borderDisabledWarning: `1px solid ${warningColor}`, rippleColorWarning: warningColor, 
         // error
-        colorError: errorColor, colorHoverError: errorColorHover, colorPressedError: errorColorPressed, colorFocusError: errorColorHover, colorDisabledError: errorColor, textColorError: baseColor, textColorHoverError: baseColor, textColorPressedError: baseColor, textColorFocusError: baseColor, textColorDisabledError: baseColor, textColorTextError: errorColor, textColorTextHoverError: errorColorHover, textColorTextPressedError: errorColorPressed, textColorTextFocusError: errorColorHover, textColorTextDisabledError: textColor2, textColorGhostError: errorColor, textColorGhostHoverError: errorColorHover, textColorGhostPressedError: errorColorPressed, textColorGhostFocusError: errorColorHover, textColorGhostDisabledError: errorColor, borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderPressedError: `1px solid ${errorColorPressed}`, borderFocusError: `1px solid ${errorColorHover}`, borderDisabledError: `1px solid ${errorColor}`, rippleColorError: errorColor, waveOpacity: '0.6', fontWeightText: fontWeight, fontWeight: fontWeight, fontWeighGhost: fontWeight });
+        colorError: errorColor, colorHoverError: errorColorHover, colorPressedError: errorColorPressed, colorFocusError: errorColorHover, colorDisabledError: errorColor, textColorError: baseColor, textColorHoverError: baseColor, textColorPressedError: baseColor, textColorFocusError: baseColor, textColorDisabledError: baseColor, textColorTextError: errorColor, textColorTextHoverError: errorColorHover, textColorTextPressedError: errorColorPressed, textColorTextFocusError: errorColorHover, textColorTextDisabledError: textColor2, textColorGhostError: errorColor, textColorGhostHoverError: errorColorHover, textColorGhostPressedError: errorColorPressed, textColorGhostFocusError: errorColorHover, textColorGhostDisabledError: errorColor, borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderPressedError: `1px solid ${errorColorPressed}`, borderFocusError: `1px solid ${errorColorHover}`, borderDisabledError: `1px solid ${errorColor}`, rippleColorError: errorColor, waveOpacity: '0.6', fontWeight,
+        fontWeightStrong });
 };
 const buttonLight = {
     name: 'Button',