naive-ui 2.21.2 → 2.22.0

package/lib/cascader/src/CascaderMenu.d.ts

@@ -43,6 +43,351 @@ declare const _default: import("vue").DefineComponent<{
     maskInstRef: import("vue").Ref<{
         showOnce: (message: string, duration?: number | undefined) => void;
     } | null>;
+    mergedTheme: import("vue").Ref<{
+        common: {
+            baseColor: string;
+            primaryColor: string;
+            primaryColorHover: string;
+            primaryColorPressed: string;
+            primaryColorSuppl: string;
+            infoColor: string;
+            infoColorHover: string;
+            infoColorPressed: string;
+            infoColorSuppl: string;
+            successColor: string;
+            successColorHover: string;
+            successColorPressed: string;
+            successColorSuppl: string;
+            warningColor: string;
+            warningColorHover: string;
+            warningColorPressed: string;
+            warningColorSuppl: string;
+            errorColor: string;
+            errorColorHover: string;
+            errorColorPressed: string;
+            errorColorSuppl: string;
+            textColorBase: string;
+            textColor1: string;
+            textColor2: string;
+            textColor3: string;
+            textColorDisabled: string;
+            placeholderColor: string;
+            placeholderColorDisabled: string;
+            iconColor: string;
+            iconColorHover: string;
+            iconColorPressed: string;
+            iconColorDisabled: string;
+            opacity1: string;
+            opacity2: string;
+            opacity3: string;
+            opacity4: string;
+            opacity5: string;
+            dividerColor: string;
+            borderColor: string;
+            closeColor: string;
+            closeColorHover: string;
+            closeColorPressed: string;
+            closeColorDisabled: string;
+            clearColor: string;
+            clearColorHover: string;
+            clearColorPressed: string;
+            scrollbarColor: string;
+            scrollbarColorHover: string;
+            scrollbarWidth: string;
+            scrollbarHeight: string;
+            scrollbarBorderRadius: string;
+            progressRailColor: string;
+            railColor: string;
+            popoverColor: string;
+            tableColor: string;
+            cardColor: string;
+            modalColor: string;
+            bodyColor: string;
+            tagColor: string;
+            avatarColor: string;
+            invertedColor: string;
+            inputColor: string;
+            codeColor: string;
+            tabColor: string;
+            actionColor: string;
+            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;
+            fontFamily: string;
+            fontFamilyMono: string;
+            fontWeight: string;
+            fontWeightStrong: string;
+            cubicBezierEaseInOut: string;
+            cubicBezierEaseOut: string;
+            cubicBezierEaseIn: string;
+            borderRadius: string;
+            borderRadiusSmall: string;
+            fontSize: string;
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            lineHeight: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
+            heightHuge: string;
+            transformDebounceScale: string;
+            name: "common";
+        };
+        self: {
+            menuBorderRadius: string;
+            menuColor: string;
+            menuBoxShadow: string;
+            menuDividerColor: string;
+            menuHeight: string;
+            optionArrowColor: string;
+            optionHeight: string;
+            optionFontSize: string;
+            optionColorHover: string;
+            optionTextColor: string;
+            optionTextColorActive: string;
+            optionTextColorDisabled: string;
+            optionCheckMarkColor: string;
+            loadingColor: string;
+            columnWidth: string;
+        };
+        peers: {
+            InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+                optionFontSizeSmall: string;
+                optionFontSizeMedium: string;
+                optionFontSizeLarge: string;
+                optionFontSizeHuge: string;
+                optionHeightSmall: string;
+                optionHeightMedium: string;
+                optionHeightLarge: string;
+                optionHeightHuge: string;
+                borderRadius: string;
+                color: string;
+                groupHeaderTextColor: string;
+                actionDividerColor: string;
+                optionTextColor: string;
+                optionTextColorPressed: string;
+                optionTextColorDisabled: string;
+                optionTextColorActive: string;
+                optionOpacityDisabled: string;
+                optionCheckColor: string;
+                optionColorPending: string;
+                optionColorActive: string;
+                actionTextColor: string;
+                loadingColor: string;
+                height: string;
+                paddingSmall: string;
+                paddingMedium: string;
+                paddingLarge: string;
+                paddingHuge: string;
+                optionPaddingSmall: string;
+                optionPaddingMedium: string;
+                optionPaddingLarge: string;
+                optionPaddingHuge: string;
+                loadingSize: string;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    color: string;
+                    colorHover: string;
+                }, any>;
+                Empty: import("../../_mixins").Theme<"Empty", {
+                    fontSizeSmall: string;
+                    fontSizeMedium: string;
+                    fontSizeLarge: string;
+                    fontSizeHuge: string;
+                    textColor: string;
+                    iconColor: string;
+                    extraTextColor: string;
+                    iconSizeSmall: string;
+                    iconSizeMedium: string;
+                    iconSizeLarge: string;
+                    iconSizeHuge: string;
+                }, any>;
+            }>;
+            InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+                fontSizeTiny: string;
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                heightTiny: string;
+                heightSmall: string;
+                heightMedium: string;
+                heightLarge: string;
+                borderRadius: string;
+                textColor: string;
+                textColorDisabled: string;
+                placeholderColor: string;
+                placeholderColorDisabled: string;
+                color: string;
+                colorDisabled: string;
+                colorActive: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                borderFocus: string;
+                boxShadowHover: null;
+                boxShadowActive: string;
+                boxShadowFocus: string;
+                caretColor: string;
+                arrowColor: string;
+                arrowColorDisabled: string;
+                loadingColor: string;
+                borderWarning: string;
+                borderHoverWarning: string;
+                borderActiveWarning: string;
+                borderFocusWarning: string;
+                boxShadowHoverWarning: null;
+                boxShadowActiveWarning: string;
+                boxShadowFocusWarning: string;
+                colorActiveWarning: string;
+                caretColorWarning: string;
+                borderError: string;
+                borderHoverError: string;
+                borderActiveError: string;
+                borderFocusError: string;
+                boxShadowHoverError: null;
+                boxShadowActiveError: string;
+                boxShadowFocusError: string;
+                colorActiveError: string;
+                caretColorError: string;
+                clearColor: string;
+                clearColorHover: string;
+                clearColorPressed: string;
+                paddingSingle: string;
+                clearSize: string;
+                arrowSize: string;
+            }, {
+                Popover: import("../../_mixins").Theme<"Popover", {
+                    fontSize: string;
+                    borderRadius: string;
+                    color: string;
+                    dividerColor: string;
+                    textColor: string;
+                    boxShadow: string;
+                    space: string;
+                    spaceArrow: string;
+                    arrowOffset: string;
+                    arrowOffsetVertical: string;
+                    arrowHeight: string;
+                    padding: string;
+                }, any>;
+            }>;
+            Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                color: string;
+                colorHover: string;
+            }, any>;
+            Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                borderRadius: string;
+                color: string;
+                colorChecked: string;
+                colorDisabled: string;
+                colorDisabledChecked: string;
+                colorTableHeader: string;
+                colorTableHeaderModal: string;
+                colorTableHeaderPopover: string;
+                checkMarkColor: string;
+                checkMarkColorDisabled: string;
+                checkMarkColorDisabledChecked: string;
+                border: string;
+                borderDisabled: string;
+                borderDisabledChecked: string;
+                borderChecked: string;
+                borderFocus: string;
+                boxShadowFocus: string;
+                textColor: string;
+                textColorDisabled: string;
+                sizeSmall: string;
+                sizeMedium: string;
+                sizeLarge: string;
+                labelPadding: string;
+            }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
+        };
+        peerOverrides: {
+            InternalSelectMenu?: {
+                peers?: {
+                    Scrollbar?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Scrollbar", {
+                        color: string;
+                        colorHover: string;
+                    }, any>> | undefined;
+                    Empty?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
+                        fontSizeSmall: string;
+                        fontSizeMedium: string;
+                        fontSizeLarge: string;
+                        fontSizeHuge: string;
+                        textColor: string;
+                        iconColor: string;
+                        extraTextColor: string;
+                        iconSizeSmall: string;
+                        iconSizeMedium: string;
+                        iconSizeLarge: string;
+                        iconSizeHuge: string;
+                    }, any>> | undefined;
+                } | undefined;
+            } | undefined;
+            InternalSelection?: {
+                peers?: {
+                    Popover?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Popover", {
+                        fontSize: string;
+                        borderRadius: string;
+                        color: string;
+                        dividerColor: string;
+                        textColor: string;
+                        boxShadow: string;
+                        space: string;
+                        spaceArrow: string;
+                        arrowOffset: string;
+                        arrowOffsetVertical: string;
+                        arrowHeight: string;
+                        padding: string;
+                    }, any>> | undefined;
+                } | undefined;
+            } | undefined;
+            Scrollbar?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            Checkbox?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+        };
+    }>;
     handleFocusin: (e: FocusEvent) => void;
     handleFocusout: (e: FocusEvent) => void;
     handleClickOutside: (e: MouseEvent) => void;

package/lib/cascader/src/CascaderMenu.js

@@ -46,7 +46,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        const { localeRef, isMountedRef, mergedClsPrefixRef, syncCascaderMenuPosition, handleCascaderMenuClickOutside
+        const { localeRef, isMountedRef, mergedClsPrefixRef, syncCascaderMenuPosition, handleCascaderMenuClickOutside, mergedThemeRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
         const submenuInstRefs = [];
@@ -97,13 +97,12 @@ exports.default = (0, vue_1.defineComponent)({
         };
         return Object.assign({ isMounted: isMountedRef, mergedClsPrefix: mergedClsPrefixRef, selfElRef,
             submenuInstRefs,
-            maskInstRef,
-            handleFocusin,
+            maskInstRef, mergedTheme: mergedThemeRef, handleFocusin,
             handleFocusout,
             handleClickOutside }, exposedRef);
     },
     render() {
-        const { submenuInstRefs, mergedClsPrefix, $slots } = this;
+        const { submenuInstRefs, mergedClsPrefix, $slots, mergedTheme } = this;
         return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
             default: () => {
                 if (!this.show)
@@ -117,7 +116,9 @@ exports.default = (0, vue_1.defineComponent)({
                                     submenuInstRefs[index] = instance;
                                 }
                             }), key: index, tmNodes: submenuOptions, depth: index + 1 }))),
-                        (0, vue_1.h)(_internal_1.NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, (0, vue_1.renderSlot)($slots, 'empty', undefined, () => [(0, vue_1.h)(empty_1.NEmpty, null)]))),
+                        (0, vue_1.h)(_internal_1.NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, (0, vue_1.renderSlot)($slots, 'empty', undefined, () => [
+                        (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+                    ]))),
                     $slots.action && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu-action`, "data-action": true }, {
                         default: $slots.action
                     })),

package/lib/cascader/src/CascaderOption.d.ts

@@ -293,6 +293,19 @@ declare const _default: import("vue").DefineComponent<{
                 sizeLarge: string;
                 labelPadding: string;
             }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
         };
         peerOverrides: {
             InternalSelectMenu?: {
@@ -344,6 +357,11 @@ declare const _default: import("vue").DefineComponent<{
                     [x: string]: any;
                 } | undefined;
             } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
         };
     }>;
     handleClick: (e: MouseEvent) => void;

package/lib/cascader/src/CascaderSelectMenu.d.ts

@@ -305,6 +305,19 @@ declare const _default: import("vue").DefineComponent<{
                 sizeLarge: string;
                 labelPadding: string;
             }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
         };
         peerOverrides: {
             InternalSelectMenu?: {
@@ -356,6 +369,11 @@ declare const _default: import("vue").DefineComponent<{
                     [x: string]: any;
                 } | undefined;
             } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
         };
     }>;
     mergedClsPrefix: import("vue").Ref<string>;

package/lib/cascader/src/CascaderSubmenu.d.ts

@@ -286,6 +286,19 @@ declare const _default: import("vue").DefineComponent<{
                 sizeLarge: string;
                 labelPadding: string;
             }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
         };
         peerOverrides: {
             InternalSelectMenu?: {
@@ -337,6 +350,11 @@ declare const _default: import("vue").DefineComponent<{
                     [x: string]: any;
                 } | undefined;
             } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
         };
     }>;
     scrollbarInstRef: import("vue").Ref<{

package/lib/cascader/styles/dark.js

@@ -6,6 +6,7 @@ const styles_3 = require("../../_internal/scrollbar/styles");
 const styles_4 = require("../../checkbox/styles");
 const common_1 = require("../../_styles/common");
 const light_1 = require("./light");
+const styles_5 = require("../../empty/styles");
 const cascaderDark = {
     name: 'Cascader',
     common: common_1.commonDark,
@@ -13,7 +14,8 @@ const cascaderDark = {
         InternalSelectMenu: styles_2.internalSelectMenuDark,
         InternalSelection: styles_1.internalSelectionDark,
         Scrollbar: styles_3.scrollbarDark,
-        Checkbox: styles_4.checkboxDark
+        Checkbox: styles_4.checkboxDark,
+        Empty: styles_5.emptyLight
     },
     self: light_1.self
 };

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

@@ -186,6 +186,19 @@ declare const cascaderLight: import("../../_mixins").Theme<"Cascader", {
         sizeLarge: string;
         labelPadding: string;
     }, any>;
+    Empty: import("../../_mixins").Theme<"Empty", {
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        textColor: string;
+        iconColor: string;
+        extraTextColor: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        iconSizeHuge: string;
+    }, any>;
 }>;
 export default cascaderLight;
 export declare type CascaderTheme = typeof cascaderLight;

package/lib/cascader/styles/light.js

@@ -7,6 +7,7 @@ const styles_3 = require("../../_internal/scrollbar/styles");
 const styles_4 = require("../../checkbox/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
+const styles_5 = require("../../empty/styles");
 const self = (vars) => {
     const { borderRadius, boxShadow2, popoverColor, textColor2, textColor3, primaryColor, textColorDisabled, dividerColor, hoverColor, fontSizeMedium, heightMedium } = vars;
     return {
@@ -35,7 +36,8 @@ const cascaderLight = (0, _mixins_1.createTheme)({
         InternalSelectMenu: styles_2.internalSelectMenuLight,
         InternalSelection: styles_1.internalSelectionLight,
         Scrollbar: styles_3.scrollbarLight,
-        Checkbox: styles_4.checkboxLight
+        Checkbox: styles_4.checkboxLight,
+        Empty: styles_5.emptyLight
     },
     self: exports.self
 });

package/lib/color-picker/src/ColorInputUnit.d.ts

@@ -208,9 +208,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;

package/lib/color-picker/src/ColorPicker.d.ts

@@ -130,9 +130,9 @@ export declare const colorPickerPanelProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -410,9 +410,9 @@ export declare const colorPickerPanelProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -690,9 +690,9 @@ export declare const colorPickerPanelProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1009,9 +1009,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1289,9 +1289,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1569,9 +1569,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1906,9 +1906,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2186,9 +2186,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2466,9 +2466,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;