naive-ui 2.20.3 → 2.21.3

package/es/tabs/src/Tab.d.ts

@@ -1,7 +1,5 @@
-declare const _default: import("vue").DefineComponent<{
-    leftPadded: BooleanConstructor;
-    addable: BooleanConstructor;
-} & {
+import type { ExtractPublicPropTypes } from '../../_utils';
+declare const typeProps: {
     readonly label: {
         readonly type: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
@@ -9,22 +7,44 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
         readonly validator: () => boolean;
     };
+    readonly name: {
+        readonly type: import("vue").PropType<string | number>;
+        readonly required: true;
+    };
     readonly tab: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | (() => import("vue").VNodeChild)>;
+    readonly disabled: BooleanConstructor;
+    readonly closable: {
+        readonly type: import("vue").PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly internalLeftPadded: BooleanConstructor;
+    readonly internalAddable: BooleanConstructor;
+};
+export declare type TabProps = ExtractPublicPropTypes<typeof typeProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly label: {
+        readonly type: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | (() => import("vue").VNodeChild)>;
+        readonly default: undefined;
+        readonly validator: () => boolean;
+    };
     readonly name: {
         readonly type: import("vue").PropType<string | number>;
         readonly required: true;
     };
+    readonly tab: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | (() => import("vue").VNodeChild)>;
     readonly disabled: BooleanConstructor;
-    readonly displayDirective: {
-        readonly type: import("vue").PropType<"show" | "if" | "show:lazy">;
-        readonly default: "if";
-    };
     readonly closable: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly internalLeftPadded: BooleanConstructor;
+    readonly internalAddable: BooleanConstructor;
 }, {
     mergedClosable: import("vue").ComputedRef<boolean>;
     style: import("vue").Ref<string | import("vue").CSSProperties | undefined>;
@@ -34,20 +54,18 @@ declare const _default: import("vue").DefineComponent<{
     handleClose(e: MouseEvent): void;
     handleClick(): void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    leftPadded?: unknown;
-    addable?: unknown;
     readonly label?: unknown;
-    readonly tab?: unknown;
     readonly name?: unknown;
+    readonly tab?: unknown;
     readonly disabled?: unknown;
-    readonly displayDirective?: unknown;
     readonly closable?: unknown;
+    readonly internalLeftPadded?: unknown;
+    readonly internalAddable?: unknown;
 } & {
     name: string | number;
     disabled: boolean;
-    displayDirective: "show" | "if" | "show:lazy";
-    addable: boolean;
-    leftPadded: boolean;
+    internalLeftPadded: boolean;
+    internalAddable: boolean;
 } & {
     label?: string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
@@ -62,8 +80,7 @@ declare const _default: import("vue").DefineComponent<{
     }> | (() => import("vue").VNodeChild);
     disabled: boolean;
     closable: boolean | undefined;
-    displayDirective: "show" | "if" | "show:lazy";
-    addable: boolean;
-    leftPadded: boolean;
+    internalLeftPadded: boolean;
+    internalAddable: boolean;
 }>;
 export default _default;

package/es/tabs/src/Tab.js

@@ -1,22 +1,21 @@
 import { h, defineComponent, inject, computed } from 'vue';
 import { AddIcon } from '../../_internal/icons';
 import { NBaseClose, NBaseIcon } from '../../_internal';
-import { render } from '../../_utils';
+import { render, omit } from '../../_utils';
 import { tabsInjectionKey } from './interface';
 import { tabPaneProps } from './TabPane';
+const typeProps = Object.assign({ internalLeftPadded: Boolean, internalAddable: Boolean }, omit(tabPaneProps, ['displayDirective']));
 export default defineComponent({
+    __TAB__: true,
     name: 'Tab',
-    props: Object.assign({
-        leftPadded: Boolean,
-        addable: Boolean
-    }, tabPaneProps),
+    props: typeProps,
     setup(props) {
         const { mergedClsPrefixRef, valueRef, typeRef, closableRef, tabStyleRef, tabChangeIdRef, onBeforeLeaveRef, handleAdd, handleTabClick, handleClose
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(tabsInjectionKey);
         return {
             mergedClosable: computed(() => {
-                if (props.addable)
+                if (props.internalAddable)
                     return false;
                 const { closable } = props;
                 if (closable === undefined)
@@ -36,7 +35,7 @@ export default defineComponent({
             handleClick() {
                 if (props.disabled)
                     return;
-                if (props.addable) {
+                if (props.internalAddable) {
                     handleAdd();
                     return;
                 }
@@ -59,18 +58,18 @@ export default defineComponent({
         };
     },
     render() {
-        const { addable, clsPrefix, name, disabled, label, tab, value, mergedClosable, style, $slots: { default: defaultSlot } } = this;
+        const { internalAddable, clsPrefix, name, disabled, label, tab, value, mergedClosable, style, $slots: { default: defaultSlot } } = this;
         const mergedTab = label !== null && label !== void 0 ? label : tab;
         return (h("div", { class: `${clsPrefix}-tabs-tab-wrapper` },
-            this.leftPadded ? (h("div", { class: `${clsPrefix}-tabs-tab-pad` })) : null,
+            this.internalLeftPadded ? (h("div", { class: `${clsPrefix}-tabs-tab-pad` })) : null,
             h("div", { key: name, "data-name": name, "data-disabled": disabled ? true : undefined, class: [
                     `${clsPrefix}-tabs-tab`,
                     value === name && `${clsPrefix}-tabs-tab--active`,
                     disabled && `${clsPrefix}-tabs-tab--disabled`,
                     mergedClosable && `${clsPrefix}-tabs-tab--closable`,
-                    addable && `${clsPrefix}-tabs-tab--addable`
-                ], onClick: this.handleClick, style: addable ? undefined : style },
-                h("span", { class: `${clsPrefix}-tabs-tab__label` }, addable ? (h(NBaseIcon, { clsPrefix: clsPrefix }, {
+                    internalAddable && `${clsPrefix}-tabs-tab--addable`
+                ], onClick: this.handleClick, style: internalAddable ? undefined : style },
+                h("span", { class: `${clsPrefix}-tabs-tab__label` }, internalAddable ? (h(NBaseIcon, { clsPrefix: clsPrefix }, {
                     default: () => h(AddIcon, null)
                 })) : defaultSlot ? (defaultSlot()) : typeof mergedTab === 'object' ? (mergedTab // VNode
                 ) : (render(mergedTab !== null && mergedTab !== void 0 ? mergedTab : name))),

package/es/tabs/src/Tabs.js

@@ -1,4 +1,4 @@
-import { h, ref, defineComponent, computed, provide, watch, toRef, nextTick, withDirectives, vShow, watchEffect } from 'vue';
+import { h, ref, defineComponent, computed, provide, watch, toRef, nextTick, withDirectives, vShow, watchEffect, cloneVNode } from 'vue';
 import { VResizeObserver, VXScroll } from 'vueuc';
 import { throttle } from 'lodash-es';
 import { useCompitable, onFontsReady, useMergedState } from 'vooks';
@@ -285,11 +285,17 @@ export default defineComponent({
     },
     render() {
         const { mergedClsPrefix, type, addTabFixed, addable, mergedSize, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
-        const children = defaultSlot
+        const tabPaneChildren = defaultSlot
             ? flatten(defaultSlot()).filter((v) => {
                 return v.type.__TAB_PANE__ === true;
             })
             : [];
+        const tabChildren = defaultSlot
+            ? flatten(defaultSlot()).filter((v) => {
+                return v.type.__TAB__ === true;
+            })
+            : [];
+        const showPane = !tabChildren.length;
         const prefix = prefixSlot ? prefixSlot() : null;
         const suffix = suffixSlot ? suffixSlot() : null;
         const isCard = type === 'card';
@@ -310,27 +316,48 @@ export default defineComponent({
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 prefix ? (h("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, prefix)) : null,
-                isSegment ? (h("div", { class: `${mergedClsPrefix}-tabs-rail` }, children.map((tabPaneVNode, index) => {
-                    return (h(Tab, Object.assign({}, tabPaneVNode.props, { leftPadded: index !== 0 }), tabPaneVNode.children
-                        ? {
-                            default: tabPaneVNode.children.tab
+                isSegment ? (h("div", { class: `${mergedClsPrefix}-tabs-rail` }, showPane
+                    ? tabPaneChildren.map((tabPaneVNode, index) => {
+                        return (h(Tab, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 }), tabPaneVNode.children
+                            ? {
+                                default: tabPaneVNode.children.tab
+                            }
+                            : undefined));
+                    })
+                    : tabChildren.map((tabVNode, index) => {
+                        if (index === 0) {
+                            return tabVNode;
+                        }
+                        else {
+                            return createLeftPaddedTabVNode(tabVNode);
                         }
-                        : undefined));
-                }))) : (h(VResizeObserver, { onResize: this.handleNavResize }, {
+                    }))) : (h(VResizeObserver, { onResize: this.handleNavResize }, {
                     default: () => (h("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" },
                         h(VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
                             default: () => {
                                 const rawWrappedTabs = (h("div", { style: this.tabWrapperStyle, class: `${mergedClsPrefix}-tabs-wrapper` },
                                     mergedJustifyContent ? null : (h("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } })),
-                                    children.map((tabPaneVNode, index) => {
-                                        return (h(Tab, Object.assign({}, tabPaneVNode.props, { leftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
-                                            ? {
-                                                default: tabPaneVNode.children.tab
+                                    showPane
+                                        ? tabPaneChildren.map((tabPaneVNode, index) => {
+                                            return (h(Tab, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
+                                                ? {
+                                                    default: tabPaneVNode.children.tab
+                                                }
+                                                : undefined));
+                                        })
+                                        : tabChildren.map((tabVNode, index) => {
+                                            if (index !== 0 &&
+                                                !mergedJustifyContent) {
+                                                return createLeftPaddedTabVNode(tabVNode);
                                             }
-                                            : undefined));
-                                    }),
+                                            else {
+                                                return tabVNode;
+                                            }
+                                        }),
                                     !addTabFixed && addable && isCard
-                                        ? createAddTag(addable, children.length !== 0)
+                                        ? createAddTag(addable, (showPane
+                                            ? tabPaneChildren.length
+                                            : tabChildren.length) !== 0)
                                         : null,
                                     mergedJustifyContent ? null : (h("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } }))));
                                 let wrappedTabs = rawWrappedTabs;
@@ -350,7 +377,8 @@ export default defineComponent({
                     ? createAddTag(addable, true)
                     : null,
                 suffix ? (h("div", { class: `${mergedClsPrefix}-tabs-nav__suffix` }, suffix)) : null),
-            filterMapTabPanes(children, this.mergedValue, this.renderedNames)));
+            showPane &&
+                filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames)));
     }
 });
 function filterMapTabPanes(tabPaneVNodes, value, renderedNames) {
@@ -374,6 +402,18 @@ function filterMapTabPanes(tabPaneVNodes, value, renderedNames) {
     });
     return children;
 }
-function createAddTag(addable, leftPadded) {
-    return (h(Tab, { ref: "addTabInstRef", key: "__addable", name: "__addable", addable: true, leftPadded: leftPadded, disabled: typeof addable === 'object' && addable.disabled }));
+function createAddTag(addable, internalLeftPadded) {
+    return (h(Tab, { ref: "addTabInstRef", key: "__addable", name: "__addable", internalAddable: true, internalLeftPadded: internalLeftPadded, disabled: typeof addable === 'object' && addable.disabled }));
+}
+function createLeftPaddedTabVNode(tabVNode) {
+    const modifiedVNode = cloneVNode(tabVNode);
+    if (modifiedVNode.props) {
+        modifiedVNode.props.internalLeftPadded = true;
+    }
+    else {
+        modifiedVNode.props = {
+            internalLeftPadded: true
+        };
+    }
+    return modifiedVNode;
 }

package/es/tag/src/Tag.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, InjectionKey, Ref } from 'vue';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 export interface TagPublicMethods {
     setTextContent: (textContent: string) => void;
@@ -226,6 +226,10 @@ declare const tagProps: {
         closeMarginRtl: string;
     }, any>>>;
 };
+interface TagInjection {
+    roundRef: Ref<boolean>;
+}
+export declare const tagInjectionKey: InjectionKey<TagInjection>;
 export declare type TagProps = ExtractPublicPropTypes<typeof tagProps>;
 declare const _default: import("vue").DefineComponent<{
     bordered: {
@@ -447,13 +451,14 @@ declare const _default: import("vue").DefineComponent<{
         closeMarginRtl: string;
     }, any>>>;
 }, {
-    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
+    rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    contentRef: import("vue").Ref<HTMLElement | null>;
+    contentRef: Ref<HTMLElement | null>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     handleClick: (e: MouseEvent) => void;
     handleCloseClick: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
+        '--avatar-size-override': string;
         '--bezier': string;
         '--border-radius': string;
         '--border': string;

package/es/tag/src/Tag.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, computed, ref } from 'vue';
+import { h, defineComponent, computed, ref, provide, toRef } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { NBaseClose } from '../../_internal';
 import { warn, createKey, call } from '../../_utils';
@@ -23,6 +23,7 @@ const tagProps = Object.assign(Object.assign(Object.assign({}, useTheme.props),
         },
         default: undefined
     } });
+export const tagInjectionKey = Symbol('tag');
 export default defineComponent({
     name: 'Tag',
     props: tagProps,
@@ -30,6 +31,9 @@ export default defineComponent({
         const contentRef = ref(null);
         const { mergedBorderedRef, mergedClsPrefixRef, NConfigProvider } = useConfig(props);
         const themeRef = useTheme('Tag', 'Tag', style, tagLight, props, mergedClsPrefixRef);
+        provide(tagInjectionKey, {
+            roundRef: toRef(props, 'round')
+        });
         function handleClick(e) {
             if (!props.disabled) {
                 if (props.checkable) {
@@ -67,6 +71,7 @@ export default defineComponent({
                 const { type, size, color: { color, textColor } = {} } = props;
                 const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, [createKey('closeSize', size)]: closeSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeColor', type)]: closeColor, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
                 return {
+                    '--avatar-size-override': `calc(${height} - 8px)`,
                     '--bezier': cubicBezierEaseInOut,
                     '--border-radius': borderRadius,
                     '--border': border,
@@ -96,7 +101,7 @@ export default defineComponent({
             }) });
     },
     render() {
-        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {} } = this;
+        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {}, $slots } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-tag`,
                 {
@@ -107,6 +112,9 @@ export default defineComponent({
                     [`${mergedClsPrefix}-tag--round`]: this.round
                 }
             ], style: this.cssVars, onClick: this.handleClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
+            $slots.avatar && (h("div", { class: `${mergedClsPrefix}-tag__avatar` }, {
+                default: $slots.avatar
+            })),
             h("span", { class: `${mergedClsPrefix}-tag__content`, ref: "contentRef" }, this.$slots),
             !this.checkable && this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-tag__close`, disabled: this.disabled, onClick: this.handleCloseClick })) : null,
             !this.checkable && this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-tag__border`, style: { borderColor } })) : null));

package/es/tag/src/styles/index.cssr.js

@@ -42,7 +42,7 @@ export default cB('tag', `
  color .3s var(--bezier),
  box-shadow .3s var(--bezier),
  opacity .3s var(--bezier);
- line-height: 1.5;
+ line-height: 1;
  height: var(--height);
  font-size: var(--font-size);
 `, [cE('border', `
@@ -55,6 +55,9 @@ export default cB('tag', `
  border-radius: inherit;
  border: var(--border);
  transition: border-color .3s var(--bezier);
+ `), cE('avatar', `
+ display: flex;
+ margin-right: 6px;
  `), cE('close', `
  font-size: var(--close-size);
  margin: var(--close-margin);
@@ -63,10 +66,12 @@ export default cB('tag', `
  `), cM('round', `
  padding: 0 calc(var(--height) / 2);
  border-radius: calc(var(--height) / 2);
- `), cM('disabled', {
-  cursor: 'not-allowed !important',
-  opacity: 'var(--opacity-disabled)'
-}), cM('checkable', `
+ `, [cE('avatar', `
+ margin-left: calc((var(--height) - 8px) / -2);
+ `)]), cM('disabled', `
+ cursor: not-allowed !important;
+ opacity: var(--opacity-disabled);
+ `), cM('checkable', `
  cursor: pointer;
  box-shadow: none;
  color: var(--text-color-checkable);

package/es/tag/src/styles/rtl.cssr.js

@@ -3,4 +3,10 @@ export default cB('tag', [cM('rtl', `
  direction: rtl;
  `, [cE('close', `
  margin: var(--close-margin-rtl);
- `)])]);
+ `), cE('avatar', `
+ margin-left: 6px;
+ margin-right: 0;
+ `), cM('round', [cE('avatar', {
+  marginLeft: '6px',
+  marginRight: '-5px'
+})])])]);

package/es/theme-editor/src/ThemeEditor.d.ts

@@ -79,9 +79,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         tableHeaderColor: string;
         hoverColor: string;
         tableColorHover: string;
+        tableColorStriped: string;
         pressedColor: string;
         opacityDisabled: string;
         inputColorDisabled: string;
+        buttonColor2: string;
+        buttonColor2Hover: string;
+        buttonColor2Pressed: string;
         boxShadow1: string;
         boxShadow2: string;
         boxShadow3: string;

package/es/theme-editor/src/ThemeEditor.js

@@ -18,6 +18,14 @@ const ColorWandIcon = (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "ht
     h("path", { d: "M3.5 3C3.77615 3 4 3.22386 4 3.5V4H4.5C4.77615 4 5 4.22386 5 4.5C5 4.77614 4.77615 5 4.5 5H4V5.5C4 5.77614 3.77615 6 3.5 6C3.22386 6 3 5.77614 3 5.5V5H2.5C2.22386 5 2 4.77614 2 4.5C2 4.22386 2.22386 4 2.5 4H3V3.5C3 3.22386 3.22386 3 3.5 3Z", fill: "currentColor" }),
     h("path", { d: "M12.5 12C12.7761 12 13 11.7761 13 11.5C13 11.2239 12.7761 11 12.5 11H12V10.5C12 10.2239 11.7761 10 11.5 10C11.2239 10 11 10.2239 11 10.5V11H10.5C10.2239 11 10 11.2239 10 11.5C10 11.7761 10.2239 12 10.5 12H11V12.5C11 12.7761 11.2239 13 11.5 13C11.7761 13 12 12.7761 12 12.5V12H12.5Z", fill: "currentColor" }),
     h("path", { d: "M8.72956 4.56346C9.4771 3.81592 10.6891 3.81592 11.4367 4.56347C12.1842 5.31102 12.1842 6.52303 11.4367 7.27058L4.26679 14.4404C3.51924 15.1879 2.30723 15.1879 1.55968 14.4404C0.812134 13.6928 0.812138 12.4808 1.55969 11.7333L8.72956 4.56346ZM8.25002 6.4572L2.26679 12.4404C1.90977 12.7974 1.90977 13.3763 2.26679 13.7333C2.62381 14.0903 3.20266 14.0903 3.55968 13.7333L9.54292 7.75009L8.25002 6.4572ZM10.25 7.04299L10.7295 6.56347C11.0866 6.20645 11.0866 5.6276 10.7296 5.27057C10.3725 4.91355 9.79368 4.91355 9.43666 5.27057L8.95713 5.7501L10.25 7.04299Z", fill: "currentColor" })));
+// button colorOpacitySecondary var is not color
+const showColorPicker = (key) => {
+    if (key.includes('opacity'))
+        return false;
+    if (key.includes('color') || key.includes('Color'))
+        return true;
+    return false;
+};
 export default defineComponent({
     name: 'ThemeEditor',
     inheritAttrs: false,
@@ -255,8 +263,7 @@ export default defineComponent({
                                                         var _a, _b, _c, _d;
                                                         return [
                                                             h("div", { key: `${varKey}Label` }, varKey),
-                                                            varKey.includes('color') ||
-                                                                varKey.includes('Color') ? (h(NColorPicker, { key: varKey, modes: [
+                                                            showColorPicker(varKey) ? (h(NColorPicker, { key: varKey, modes: [
                                                                     'rgb',
                                                                     'hex'
                                                                 ], value: ((_b = (_a = this

package/es/time-picker/src/Panel.d.ts

@@ -146,9 +146,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -212,20 +216,30 @@ declare const _default: import("vue").DefineComponent<{
                 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;
@@ -372,9 +386,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;