naive-ui 2.20.3 → 2.21.3

package/lib/button/src/Button.js

@@ -14,7 +14,8 @@ const styles_1 = require("../styles");
 const ButtonGroup_1 = require("./ButtonGroup");
 const button_cssr_1 = __importDefault(require("./styles/button.cssr"));
 const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
-const buttonProps = Object.assign(Object.assign({}, _mixins_1.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: {
+const seemly_1 = require("seemly");
+const buttonProps = Object.assign(Object.assign({}, _mixins_1.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: {
@@ -40,11 +41,23 @@ const Button = (0, vue_1.defineComponent)({
     name: 'Button',
     props: buttonProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                const { dashed, ghost, text, secondary, tertiary, quaternary } = props;
+                if ((dashed || ghost || text) &&
+                    (secondary || tertiary || quaternary)) {
+                    (0, _utils_1.warnOnce)('button', "`dashed`, `ghost` and `text` props can't be used along with `secondary`, `tertiary` and `quaterary` props.");
+                }
+            });
+        }
         const selfRef = (0, vue_1.ref)(null);
         const waveRef = (0, vue_1.ref)(null);
         const enterPressedRef = (0, vue_1.ref)(false);
         const showBorderRef = (0, vooks_1.useMemo)(() => {
-            return (!props.text &&
+            return (!props.quaternary &&
+                !props.tertiary &&
+                !props.secondary &&
+                !props.text &&
                 (!props.color || props.ghost || props.dashed) &&
                 props.bordered);
         });
@@ -68,7 +81,7 @@ const Button = (0, vue_1.defineComponent)({
         const mergedFocusableRef = (0, vue_1.computed)(() => {
             return props.focusable && !props.disabled;
         });
-        const handleMouseDown = (e) => {
+        const handleMousedown = (e) => {
             var _a;
             e.preventDefault();
             if (props.disabled) {
@@ -91,24 +104,17 @@ const Button = (0, vue_1.defineComponent)({
                 }
             }
         };
-        const handleKeyUp = (e) => {
+        const handleKeyup = (e) => {
             switch (e.code) {
                 case 'Enter':
                 case 'NumpadEnter':
                     if (!props.keyboard) {
-                        e.preventDefault();
                         return;
                     }
                     enterPressedRef.value = false;
-                    void (0, vue_1.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':
@@ -134,10 +140,10 @@ const Button = (0, vue_1.defineComponent)({
             showBorder: showBorderRef,
             enterPressed: enterPressedRef,
             rtlEnabled: rtlEnabledRef,
-            handleMouseDown,
-            handleKeyDown,
+            handleMousedown,
+            handleKeydown,
             handleBlur,
-            handleKeyUp,
+            handleKeyup,
             handleClick,
             customColorCssVars: (0, vue_1.computed)(() => {
                 const { color } = props;
@@ -155,16 +161,12 @@ const Button = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.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 = {
@@ -180,13 +182,12 @@ const Button = (0, vue_1.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[(0, _utils_1.createKey)('textColorTextDepth', String(depth))]
-                            : self[(0, _utils_1.createKey)('textColorText', type)]);
+                    const mergedTextColor = propTextColor || self[(0, _utils_1.createKey)('textColorText', mergedType)];
                     colorProps = {
                         '--color': '#0000',
                         '--color-hover': '#0000',
@@ -197,14 +198,15 @@ const Button = (0, vue_1.defineComponent)({
                         '--text-color': mergedTextColor,
                         '--text-color-hover': propTextColor
                             ? (0, index_1.createHoverColor)(propTextColor)
-                            : self[(0, _utils_1.createKey)('textColorTextHover', type)],
+                            : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
                         '--text-color-pressed': propTextColor
                             ? (0, index_1.createPressedColor)(propTextColor)
-                            : self[(0, _utils_1.createKey)('textColorTextPressed', type)],
+                            : self[(0, _utils_1.createKey)('textColorTextPressed', mergedType)],
                         '--text-color-focus': propTextColor
                             ? (0, index_1.createHoverColor)(propTextColor)
-                            : self[(0, _utils_1.createKey)('textColorTextHover', type)],
-                        '--text-color-disabled': propTextColor || self[(0, _utils_1.createKey)('textColorTextDisabled', type)]
+                            : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
+                        '--text-color-disabled': propTextColor ||
+                            self[(0, _utils_1.createKey)('textColorTextDisabled', mergedType)]
                     };
                 }
                 else if (ghost || dashed) {
@@ -215,54 +217,123 @@ const Button = (0, vue_1.defineComponent)({
                         '--color-pressed': '#0000',
                         '--color-focus': '#0000',
                         '--color-disabled': '#0000',
-                        '--ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', type)],
-                        '--text-color': mergedTextColor || self[(0, _utils_1.createKey)('textColorGhost', type)],
+                        '--ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
+                        '--text-color': mergedTextColor || self[(0, _utils_1.createKey)('textColorGhost', mergedType)],
                         '--text-color-hover': mergedTextColor
                             ? (0, index_1.createHoverColor)(mergedTextColor)
-                            : self[(0, _utils_1.createKey)('textColorGhostHover', type)],
+                            : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
                         '--text-color-pressed': mergedTextColor
                             ? (0, index_1.createPressedColor)(mergedTextColor)
-                            : self[(0, _utils_1.createKey)('textColorGhostPressed', type)],
+                            : self[(0, _utils_1.createKey)('textColorGhostPressed', mergedType)],
                         '--text-color-focus': mergedTextColor
                             ? (0, index_1.createHoverColor)(mergedTextColor)
-                            : self[(0, _utils_1.createKey)('textColorGhostHover', type)],
-                        '--text-color-disabled': mergedTextColor || self[(0, _utils_1.createKey)('textColorGhostDisabled', type)]
+                            : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
+                        '--text-color-disabled': mergedTextColor ||
+                            self[(0, _utils_1.createKey)('textColorGhostDisabled', mergedType)]
+                    };
+                }
+                else if (secondary) {
+                    const typeTextColor = typeIsDefault
+                        ? self.textColor
+                        : typeIsTertiary
+                            ? self.textColorTertiary
+                            : self[(0, _utils_1.createKey)('color', mergedType)];
+                    const mergedTextColor = color || typeTextColor;
+                    const isColoredType = type !== 'default' && type !== 'tertiary';
+                    colorProps = {
+                        '--color': isColoredType
+                            ? (0, seemly_1.changeColor)(mergedTextColor, {
+                                alpha: Number(self.colorOpacitySecondary)
+                            })
+                            : self.colorSecondary,
+                        '--color-hover': isColoredType
+                            ? (0, seemly_1.changeColor)(mergedTextColor, {
+                                alpha: Number(self.colorOpacitySecondaryHover)
+                            })
+                            : self.colorSecondaryHover,
+                        '--color-pressed': isColoredType
+                            ? (0, seemly_1.changeColor)(mergedTextColor, {
+                                alpha: Number(self.colorOpacitySecondaryPressed)
+                            })
+                            : self.colorSecondaryPressed,
+                        '--color-focus': isColoredType
+                            ? (0, seemly_1.changeColor)(mergedTextColor, {
+                                alpha: Number(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[(0, _utils_1.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[(0, _utils_1.createKey)('color', type)],
+                        '--color': color || self[(0, _utils_1.createKey)('color', mergedType)],
                         '--color-hover': color
                             ? (0, index_1.createHoverColor)(color)
-                            : self[(0, _utils_1.createKey)('colorHover', type)],
+                            : self[(0, _utils_1.createKey)('colorHover', mergedType)],
                         '--color-pressed': color
                             ? (0, index_1.createPressedColor)(color)
-                            : self[(0, _utils_1.createKey)('colorPressed', type)],
+                            : self[(0, _utils_1.createKey)('colorPressed', mergedType)],
                         '--color-focus': color
                             ? (0, index_1.createHoverColor)(color)
-                            : self[(0, _utils_1.createKey)('colorFocus', type)],
-                        '--color-disabled': color || self[(0, _utils_1.createKey)('colorDisabled', type)],
-                        '--ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', type)],
+                            : self[(0, _utils_1.createKey)('colorFocus', mergedType)],
+                        '--color-disabled': color || self[(0, _utils_1.createKey)('colorDisabled', mergedType)],
+                        '--ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
                         '--text-color': textColor ||
                             (color
                                 ? self.textColorPrimary
-                                : self[(0, _utils_1.createKey)('textColor', type)]),
+                                : typeIsTertiary
+                                    ? self.textColorTertiary
+                                    : self[(0, _utils_1.createKey)('textColor', mergedType)]),
                         '--text-color-hover': textColor ||
                             (color
                                 ? self.textColorHoverPrimary
-                                : self[(0, _utils_1.createKey)('textColorHover', type)]),
+                                : self[(0, _utils_1.createKey)('textColorHover', mergedType)]),
                         '--text-color-pressed': textColor ||
                             (color
                                 ? self.textColorPressedPrimary
-                                : self[(0, _utils_1.createKey)('textColorPressed', type)]),
+                                : self[(0, _utils_1.createKey)('textColorPressed', mergedType)]),
                         '--text-color-focus': textColor ||
                             (color
                                 ? self.textColorFocusPrimary
-                                : self[(0, _utils_1.createKey)('textColorFocus', type)]),
+                                : self[(0, _utils_1.createKey)('textColorFocus', mergedType)]),
                         '--text-color-disabled': textColor ||
                             (color
                                 ? self.textColorDisabledPrimary
-                                : self[(0, _utils_1.createKey)('textColorDisabled', type)])
+                                : self[(0, _utils_1.createKey)('textColorDisabled', mergedType)])
                     };
                 }
                 // border
@@ -284,11 +355,11 @@ const Button = (0, vue_1.defineComponent)({
                 }
                 else {
                     borderProps = {
-                        '--border': self[(0, _utils_1.createKey)('border', type)],
-                        '--border-hover': self[(0, _utils_1.createKey)('borderHover', type)],
-                        '--border-pressed': self[(0, _utils_1.createKey)('borderPressed', type)],
-                        '--border-focus': self[(0, _utils_1.createKey)('borderFocus', type)],
-                        '--border-disabled': self[(0, _utils_1.createKey)('borderDisabled', type)]
+                        '--border': self[(0, _utils_1.createKey)('border', mergedType)],
+                        '--border-hover': self[(0, _utils_1.createKey)('borderHover', mergedType)],
+                        '--border-pressed': self[(0, _utils_1.createKey)('borderPressed', mergedType)],
+                        '--border-focus': self[(0, _utils_1.createKey)('borderFocus', mergedType)],
+                        '--border-disabled': self[(0, _utils_1.createKey)('borderDisabled', mergedType)]
                     };
                 }
                 // size
@@ -328,8 +399,9 @@ const Button = (0, vue_1.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' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
             (0, vue_1.h)(_internal_1.NFadeInExpandTransition, { width: true }, {
                 default: () => $slots.icon || this.loading ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__icon`, style: {

package/lib/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/lib/button/styles/dark.js

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

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

@@ -14,20 +14,30 @@ export declare const self: (vars: ThemeCommonVars) => {
     fontSizeMedium: string;
     fontSizeLarge: string;
     opacityDisabled: string;
+    colorOpacitySecondary: string;
+    colorOpacitySecondaryHover: string;
+    colorOpacitySecondaryPressed: string;
+    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/lib/button/styles/light.js

@@ -7,13 +7,19 @@ exports.self = void 0;
 const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 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({}, _common_1.default), { 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
@@ -23,7 +29,8 @@ 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 });
 };
 exports.self = self;
 const buttonLight = {