naive-ui 2.20.2 → 2.21.2

package/lib/auto-complete/src/AutoComplete.js

@@ -31,7 +31,7 @@ const autoCompleteProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     }, disabled: {
         type: Boolean,
         default: undefined
-    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, size: String, options: {
+    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, inputProps: Object, size: String, options: {
         type: Array,
         default: () => []
     }, zIndex: Number, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onSelect: [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
@@ -237,7 +237,10 @@ exports.default = (0, vue_1.defineComponent)({
                                 });
                             }
                             const { mergedTheme } = this;
-                            return ((0, vue_1.h)(input_1.NInput, { theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, bordered: this.mergedBordered, value: this.mergedValue, placeholder: this.placeholder, size: this.mergedSize, disabled: this.mergedDisabled, clearable: this.clearable, loading: this.loading, onClear: this.handleClear, onFocus: this.handleFocus, onUpdateValue: this.handleInput, onBlur: this.handleBlur }));
+                            return ((0, vue_1.h)(input_1.NInput, { theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, bordered: this.mergedBordered, value: this.mergedValue, placeholder: this.placeholder, size: this.mergedSize, disabled: this.mergedDisabled, clearable: this.clearable, loading: this.loading, inputProps: this.inputProps, onClear: this.handleClear, onFocus: this.handleFocus, onUpdateValue: this.handleInput, onBlur: this.handleBlur }, {
+                                suffix: this.$slots.suffix,
+                                prefix: this.$slots.prefix
+                            }));
                         }
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { show: this.active, to: this.adjustedTo, containerClass: this.namespace, zIndex: this.zIndex, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: "bottom-start", width: "target" }, {

package/lib/avatar/src/Avatar.d.ts

@@ -14,6 +14,7 @@ declare const avatarProps: {
     };
     readonly round: BooleanConstructor;
     readonly onError: PropType<(e: Event) => void>;
+    readonly fallbackSrc: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -60,6 +61,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly round: BooleanConstructor;
     readonly onError: PropType<(e: Event) => void>;
+    readonly fallbackSrc: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -93,6 +95,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     textRef: import("vue").Ref<HTMLElement | null>;
     selfRef: import("vue").Ref<HTMLElement | null>;
+    mergedRoundRef: import("vue").ComputedRef<boolean>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     fitTextTransform: () => void;
     cssVars: import("vue").ComputedRef<{
@@ -100,8 +103,10 @@ declare const _default: import("vue").DefineComponent<{
         '--border-radius': string;
         '--color': string;
         '--bezier': string;
-        '--size': string;
+        '--merged-size': string;
     }>;
+    hasLoadError: import("vue").Ref<boolean>;
+    handleError: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly size?: unknown;
     readonly src?: unknown;
@@ -110,6 +115,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly objectFit?: unknown;
     readonly round?: unknown;
     readonly onError?: unknown;
+    readonly fallbackSrc?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -152,6 +158,7 @@ declare const _default: import("vue").DefineComponent<{
         heightHuge: string;
         color: string;
     }, any>> | undefined;
+    fallbackSrc?: string | undefined;
 }>, {
     round: boolean;
     size: number | "small" | "medium" | "large";

package/lib/avatar/src/Avatar.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
+const Tag_1 = require("../../tag/src/Tag");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const _utils_1 = require("../../_utils");
@@ -15,12 +16,13 @@ const avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, src: String, circle: Boolean, color: String, objectFit: {
         type: String,
         default: 'fill'
-    }, round: Boolean, onError: Function });
+    }, round: Boolean, onError: Function, fallbackSrc: String });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Avatar',
     props: avatarProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const hasLoadErrorRef = (0, vue_1.ref)(false);
         let memoedTextHtml = null;
         const textRef = (0, vue_1.ref)(null);
         const selfRef = (0, vue_1.ref)(null);
@@ -41,13 +43,31 @@ exports.default = (0, vue_1.defineComponent)({
             }
         };
         const themeRef = (0, _mixins_1.useTheme)('Avatar', 'Avatar', index_cssr_1.default, styles_1.avatarLight, props, mergedClsPrefixRef);
+        const TagInjection = (0, vue_1.inject)(Tag_1.tagInjectionKey, null);
+        const mergedRoundRef = (0, vue_1.computed)(() => {
+            if (props.round || props.circle)
+                return true;
+            if (TagInjection) {
+                return TagInjection.roundRef.value;
+            }
+            return false;
+        });
+        const handleError = (e) => {
+            hasLoadErrorRef.value = true;
+            const { onError } = props;
+            if (onError) {
+                onError(e);
+            }
+        };
+        (0, vue_1.watch)(() => props.src, () => (hasLoadErrorRef.value = false));
         return {
             textRef,
             selfRef,
+            mergedRoundRef,
             mergedClsPrefix: mergedClsPrefixRef,
             fitTextTransform,
             cssVars: (0, vue_1.computed)(() => {
-                const { size, round, circle } = props;
+                const { size } = props;
                 const { self: { borderRadius, fontSize, color }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 let height;
                 if (typeof size === 'number') {
@@ -58,18 +78,30 @@ exports.default = (0, vue_1.defineComponent)({
                 }
                 return {
                     '--font-size': fontSize,
-                    '--border-radius': round || circle ? '50%' : borderRadius,
+                    '--border-radius': mergedRoundRef.value ? '50%' : borderRadius,
                     '--color': color,
                     '--bezier': cubicBezierEaseInOut,
-                    '--size': height
+                    '--merged-size': `var(--avatar-size-override, ${height})`
                 };
-            })
+            }),
+            hasLoadError: hasLoadErrorRef,
+            handleError
         };
     },
     render() {
         const { $slots, src, mergedClsPrefix } = this;
-        return ((0, vue_1.h)("span", { ref: "selfRef", class: `${mergedClsPrefix}-avatar`, style: this.cssVars }, !$slots.default && src ? ((0, vue_1.h)("img", { src: src, onError: this.onError, style: { objectFit: this.objectFit } })) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.fitTextTransform }, {
-            default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text`, style: { background: this.color } }, $slots))
-        }))));
+        let img;
+        if (this.hasLoadError) {
+            img = (0, vue_1.h)("img", { src: this.fallbackSrc, style: { objectFit: this.objectFit } });
+        }
+        else if (!(!$slots.default && src)) {
+            img = ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.fitTextTransform }, {
+                default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text`, style: { background: this.color } }, $slots))
+            }));
+        }
+        else {
+            img = ((0, vue_1.h)("img", { src: src, onError: this.handleError, style: { objectFit: this.objectFit } }));
+        }
+        return ((0, vue_1.h)("span", { ref: "selfRef", class: `${mergedClsPrefix}-avatar`, style: this.cssVars }, img));
     }
 });

package/lib/avatar/src/styles/index.cssr.js

@@ -13,8 +13,8 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 
 
 exports.default = (0, cssr_1.cB)('avatar', `
- width: var(--size);
- height: var(--size);
+ width: var(--merged-size);
+ height: var(--merged-size);
  color: #FFF;
  font-size: var(--font-size);
  display: inline-flex;

package/lib/button/src/Button.d.ts

@@ -12,7 +12,10 @@ declare const buttonProps: {
     readonly size: PropType<Size>;
     readonly ghost: BooleanConstructor;
     readonly round: BooleanConstructor;
-    readonly depth: PropType<2 | 1 | 3 | "1" | "2" | "3">;
+    readonly secondary: BooleanConstructor;
+    readonly tertiary: BooleanConstructor;
+    readonly quaternary: BooleanConstructor;
+    readonly strong: BooleanConstructor;
     readonly focusable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -57,20 +60,30 @@ declare const buttonProps: {
         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;
@@ -217,9 +230,8 @@ declare const buttonProps: {
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
@@ -252,20 +264,30 @@ declare const buttonProps: {
         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;
@@ -412,9 +434,8 @@ declare const buttonProps: {
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
@@ -447,20 +468,30 @@ declare const buttonProps: {
         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;
@@ -607,9 +638,8 @@ declare const buttonProps: {
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
@@ -641,7 +671,10 @@ declare const Button: import("vue").DefineComponent<{
     readonly size: PropType<Size>;
     readonly ghost: BooleanConstructor;
     readonly round: BooleanConstructor;
-    readonly depth: PropType<2 | 1 | 3 | "1" | "2" | "3">;
+    readonly secondary: BooleanConstructor;
+    readonly tertiary: BooleanConstructor;
+    readonly quaternary: BooleanConstructor;
+    readonly strong: BooleanConstructor;
     readonly focusable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -686,20 +719,30 @@ declare const Button: import("vue").DefineComponent<{
         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;
@@ -846,9 +889,8 @@ declare const Button: import("vue").DefineComponent<{
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
@@ -881,20 +923,30 @@ declare const Button: import("vue").DefineComponent<{
         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;
@@ -1041,9 +1093,8 @@ declare const Button: import("vue").DefineComponent<{
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
@@ -1076,20 +1127,30 @@ declare const Button: import("vue").DefineComponent<{
         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;
@@ -1236,9 +1297,8 @@ declare const Button: import("vue").DefineComponent<{
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
@@ -1268,10 +1328,10 @@ declare const Button: import("vue").DefineComponent<{
     showBorder: import("vue").ComputedRef<boolean>;
     enterPressed: import("vue").Ref<boolean>;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
-    handleMouseDown: (e: MouseEvent) => void;
-    handleKeyDown: (e: KeyboardEvent) => void;
+    handleMousedown: (e: MouseEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
     handleBlur: () => void;
-    handleKeyUp: (e: KeyboardEvent) => void;
+    handleKeyup: (e: KeyboardEvent) => void;
     handleClick: (e: MouseEvent) => void;
     customColorCssVars: import("vue").ComputedRef<{
         '--border-color': string;
@@ -1322,7 +1382,10 @@ declare const Button: import("vue").DefineComponent<{
     readonly size?: unknown;
     readonly ghost?: unknown;
     readonly round?: unknown;
-    readonly depth?: unknown;
+    readonly secondary?: unknown;
+    readonly tertiary?: unknown;
+    readonly quaternary?: unknown;
+    readonly strong?: unknown;
     readonly focusable?: unknown;
     readonly keyboard?: unknown;
     readonly tag?: unknown;
@@ -1345,10 +1408,14 @@ declare const Button: import("vue").DefineComponent<{
     circle: boolean;
     disabled: boolean;
     focusable: boolean;
+    strong: boolean;
     loading: boolean;
     bordered: boolean;
+    tertiary: boolean;
     keyboard: boolean;
     ghost: boolean;
+    secondary: boolean;
+    quaternary: boolean;
     iconPlacement: "left" | "right";
     attrType: "button" | "reset" | "submit";
 } & {
@@ -1369,20 +1436,30 @@ declare const Button: import("vue").DefineComponent<{
         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;
@@ -1529,9 +1606,8 @@ declare const Button: import("vue").DefineComponent<{
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
@@ -1564,20 +1640,30 @@ declare const Button: import("vue").DefineComponent<{
         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;
@@ -1724,9 +1810,8 @@ declare const Button: import("vue").DefineComponent<{
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
@@ -1759,20 +1844,30 @@ declare const Button: import("vue").DefineComponent<{
         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;
@@ -1919,9 +2014,8 @@ declare const Button: import("vue").DefineComponent<{
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
@@ -1941,7 +2035,6 @@ declare const Button: import("vue").DefineComponent<{
         rippleDuration: string;
     }, any>> | undefined;
     textColor?: string | undefined;
-    depth?: 2 | 1 | 3 | "1" | "2" | "3" | undefined;
 }>, {
     type: Type;
     tag: keyof HTMLElementTagNameMap;
@@ -1952,10 +2045,14 @@ declare const Button: import("vue").DefineComponent<{
     circle: boolean;
     disabled: boolean;
     focusable: boolean;
+    strong: boolean;
     loading: boolean;
     bordered: boolean;
+    tertiary: boolean;
     keyboard: boolean;
     ghost: boolean;
+    secondary: boolean;
+    quaternary: boolean;
     iconPlacement: "left" | "right";
     attrType: "button" | "reset" | "submit";
 }>;