@uzum-tech/ui 0.1.2 → 1.0.1

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

@@ -1,6 +1,20 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
+    closeIconSizeTiny: string;
+    closeIconSizeSmall: string;
+    closeIconSizeMedium: string;
+    closeIconSizeLarge: string;
+    closeSizeTiny: string;
+    closeSizeSmall: string;
+    closeSizeMedium: string;
+    closeSizeLarge: string;
+    paddingTiny: string;
+    paddingSmall: string;
+    paddingMedium: string;
+    paddingLarge: string;
+    closeMargin: string;
+    closeMarginRtl: string;
     closeBorderRadius: string;
     heightTiny: string;
     heightSmall: string;
@@ -12,6 +26,7 @@ declare const self: (vars: ThemeCommonVars) => {
     fontSizeSmall: string;
     fontSizeMedium: string;
     fontSizeLarge: string;
+    fontWeight: string;
     fontWeightStrong: string;
     textColorCheckable: string;
     textColorHoverCheckable: string;
@@ -28,19 +43,19 @@ declare const self: (vars: ThemeCommonVars) => {
     textColor: string;
     color: string;
     colorBordered: string;
+    closeColorHover: string;
+    closeColorPressed: string;
     closeIconColor: string;
     closeIconColorHover: string;
     closeIconColorPressed: string;
-    closeColorHover: string;
-    closeColorPressed: string;
     borderTertiary: string;
     textColorTertiary: string;
     colorTertiary: string;
     colorBorderedTertiary: string;
     closeIconColorTertiary: string;
     closeIconColorHoverTertiary: string;
-    closeColorHoverTertiary: string;
     closeIconColorPressedTertiary: string;
+    closeColorHoverTertiary: string;
     closeColorPressedTertiary: string;
     borderPrimary: string;
     textColorPrimary: string;
@@ -87,18 +102,6 @@ declare const self: (vars: ThemeCommonVars) => {
     closeIconColorPressedError: string;
     closeColorHoverError: string;
     closeColorPressedError: string;
-    closeIconSizeTiny: string;
-    closeIconSizeSmall: string;
-    closeIconSizeMedium: string;
-    closeIconSizeLarge: string;
-    closeSizeTiny: string;
-    closeSizeSmall: string;
-    closeSizeMedium: string;
-    closeSizeLarge: string;
-    padding: string;
-    paddingSizeSmall: string;
-    closeMargin: string;
-    closeMarginRtl: string;
 };
 export type TagThemeVars = ReturnType<typeof self>;
 declare const tagLight: Theme<'Tag', TagThemeVars>;

package/lib/tag/styles/light.js

@@ -1,41 +1,133 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const _common_1 = __importDefault(require("./_common"));
+exports.self = void 0;
 const seemly_1 = require("seemly");
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { textColor2, primaryColor, tertiaryColor, tertiaryColorHover, tertiaryColorActive, tertiaryColorSuppl, infoColor, successColor, warningColor, errorColor, baseColor, borderTagColor, borderTagWidth, opacityDisabled, tagColor, closeIconColor, closeIconColorHover, closeIconColorPressed, borderRadiusSmall: borderRadius, fontSizeMini, fontSizeTiny, fontSizeSmall, fontSizeMedium, heightMini, heightTiny, heightSmall, heightMedium, closeColorHover, closeColorPressed, fontWeightStrong } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { closeBorderRadius: borderRadius, heightTiny: heightMini, heightSmall: heightTiny, heightMedium: heightSmall, heightLarge: heightMedium, borderRadius,
-        opacityDisabled, fontSizeTiny: fontSizeMini, fontSizeSmall: fontSizeTiny, fontSizeMedium: fontSizeSmall, fontSizeLarge: fontSizeMedium, fontWeightStrong, 
+    const { opacityDisabled, borderRadiusSmall: borderRadius, fontWeightStrong, fontWeight, elementsTertiary, fontBodySmall, fontBodyMedium, textQuaternary, elementsPrimary, elementsSenary, elementsQuinary, textPrimary, elementsQuaternary, transparencySecondary, staticDarkGrey, staticWhite, elementsDarkQuinary, brandPrimary600, brandPrimary500, brandQuaternary600, brandQuaternary500, staticGreen, staticOrange, staticRed, staticBlack } = vars;
+    const borderTagWidth = 2;
+    return {
+        closeIconSizeTiny: '16px',
+        closeIconSizeSmall: '16px',
+        closeIconSizeMedium: '16px',
+        closeIconSizeLarge: '16px',
+        closeSizeTiny: '14px',
+        closeSizeSmall: '14px',
+        closeSizeMedium: '16px',
+        closeSizeLarge: '18px',
+        paddingTiny: '2px 6px 2px 10px',
+        paddingSmall: '2px 6px 2px 10px',
+        paddingMedium: '2px 6px 2px 10px',
+        paddingLarge: '2px 6px 2px 10px',
+        closeMargin: '0 0 0 4px',
+        closeMarginRtl: '0 4px 0 0',
+        closeBorderRadius: borderRadius,
+        heightTiny: '16px',
+        heightSmall: '20px',
+        heightMedium: '24px',
+        heightLarge: '32px',
+        borderRadius,
+        opacityDisabled,
+        fontSizeTiny: fontBodySmall,
+        fontSizeSmall: fontBodySmall,
+        fontSizeMedium: fontBodyMedium,
+        fontSizeLarge: fontBodyMedium,
+        fontWeight,
+        fontWeightStrong,
         // checked
-        textColorCheckable: textColor2, textColorHoverCheckable: textColor2, textColorPressedCheckable: textColor2, textColorChecked: baseColor, colorCheckable: '#F3F4F6', colorHoverCheckable: '#E7E8EA', colorPressedCheckable: '#E7E8EA', colorChecked: '#101010', colorCheckedHover: tertiaryColorHover, colorCheckedPressed: tertiaryColorActive, colorDisabledChecked: tertiaryColorSuppl, 
+        textColorCheckable: textPrimary,
+        textColorHoverCheckable: textPrimary,
+        textColorPressedCheckable: textPrimary,
+        textColorChecked: textQuaternary,
+        colorCheckable: elementsTertiary,
+        colorHoverCheckable: elementsQuaternary,
+        colorPressedCheckable: elementsQuaternary,
+        colorChecked: elementsPrimary,
+        colorCheckedHover: elementsSenary,
+        colorCheckedPressed: elementsSenary,
+        colorDisabledChecked: elementsQuinary,
         // default
-        border: `${borderTagWidth}px solid ${borderTagColor}`, textColor: textColor2, color: tagColor, colorBordered: 'rgb(250, 250, 252)', closeIconColor,
-        closeIconColorHover,
-        closeIconColorPressed,
-        closeColorHover,
-        closeColorPressed, 
+        border: `${borderTagWidth}px solid ${elementsQuinary}`,
+        textColor: textPrimary,
+        color: elementsTertiary,
+        colorBordered: elementsTertiary,
+        closeColorHover: transparencySecondary,
+        closeColorPressed: transparencySecondary,
+        closeIconColor: elementsQuinary,
+        closeIconColorHover: elementsDarkQuinary,
+        closeIconColorPressed: elementsSenary,
         // tertiary
-        borderTertiary: `${borderTagWidth}px solid ${borderTagColor})}`, textColorTertiary: '#fff', colorTertiary: tertiaryColor, colorBorderedTertiary: tertiaryColor, closeIconColorTertiary: '#fff', closeIconColorHoverTertiary: '#fff', closeColorHoverTertiary: (0, seemly_1.changeColor)('#fff', { alpha: 0.12 }), closeIconColorPressedTertiary: '#fff', closeColorPressedTertiary: (0, seemly_1.changeColor)('#fff', { alpha: 0.18 }), 
+        borderTertiary: `${borderTagWidth}px solid ${staticDarkGrey})}`,
+        textColorTertiary: staticWhite,
+        colorTertiary: staticBlack,
+        colorBorderedTertiary: staticBlack,
+        closeIconColorTertiary: staticWhite,
+        closeIconColorHoverTertiary: staticWhite,
+        closeIconColorPressedTertiary: staticWhite,
+        closeColorHoverTertiary: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.12 }),
+        closeColorPressedTertiary: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.18 }),
         // primary
-        borderPrimary: `${borderTagWidth}px solid ${(0, seemly_1.changeColor)(primaryColor, {
-            alpha: 0.3
-        })}`, textColorPrimary: primaryColor, colorPrimary: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.12 }), colorBorderedPrimary: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.1 }), closeIconColorPrimary: primaryColor, closeIconColorHoverPrimary: primaryColor, closeIconColorPressedPrimary: primaryColor, closeColorHoverPrimary: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.12 }), closeColorPressedPrimary: (0, seemly_1.changeColor)(primaryColor, { alpha: 0.18 }), borderInfo: `${borderTagWidth}px solid ${(0, seemly_1.changeColor)(infoColor, {
-            alpha: 0.3
-        })}`, textColorInfo: infoColor, colorInfo: (0, seemly_1.changeColor)(infoColor, { alpha: 0.12 }), colorBorderedInfo: (0, seemly_1.changeColor)(infoColor, { alpha: 0.1 }), closeIconColorInfo: infoColor, closeIconColorHoverInfo: infoColor, closeIconColorPressedInfo: infoColor, closeColorHoverInfo: (0, seemly_1.changeColor)(infoColor, { alpha: 0.12 }), closeColorPressedInfo: (0, seemly_1.changeColor)(infoColor, { alpha: 0.18 }), borderSuccess: `${borderTagWidth}px solid ${(0, seemly_1.changeColor)(successColor, {
+        borderPrimary: `${borderTagWidth}px solid ${brandPrimary600}`,
+        textColorPrimary: staticWhite,
+        colorPrimary: brandPrimary500,
+        colorBorderedPrimary: brandPrimary500,
+        closeIconColorPrimary: staticWhite,
+        closeIconColorHoverPrimary: staticWhite,
+        closeIconColorPressedPrimary: staticWhite,
+        closeColorHoverPrimary: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.12 }),
+        closeColorPressedPrimary: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.18 }),
+        // info
+        borderInfo: `${borderTagWidth}px solid ${brandQuaternary600}`,
+        textColorInfo: staticBlack,
+        colorInfo: brandQuaternary500,
+        colorBorderedInfo: brandQuaternary500,
+        closeIconColorInfo: staticBlack,
+        closeIconColorHoverInfo: staticBlack,
+        closeIconColorPressedInfo: staticBlack,
+        closeColorHoverInfo: (0, seemly_1.changeColor)(staticBlack, { alpha: 0.12 }),
+        closeColorPressedInfo: (0, seemly_1.changeColor)(staticBlack, { alpha: 0.18 }),
+        // success
+        borderSuccess: `${borderTagWidth}px solid ${(0, seemly_1.changeColor)(staticGreen, {
             alpha: 0.3
-        })}`, textColorSuccess: successColor, colorSuccess: (0, seemly_1.changeColor)(successColor, { alpha: 0.12 }), colorBorderedSuccess: (0, seemly_1.changeColor)(successColor, { alpha: 0.1 }), closeIconColorSuccess: successColor, closeIconColorHoverSuccess: successColor, closeIconColorPressedSuccess: successColor, closeColorHoverSuccess: (0, seemly_1.changeColor)(successColor, { alpha: 0.12 }), closeColorPressedSuccess: (0, seemly_1.changeColor)(successColor, { alpha: 0.18 }), borderWarning: `${borderTagWidth}px solid ${(0, seemly_1.changeColor)(warningColor, {
+        })}`,
+        textColorSuccess: staticWhite,
+        colorSuccess: staticGreen,
+        colorBorderedSuccess: staticGreen,
+        closeIconColorSuccess: staticWhite,
+        closeIconColorHoverSuccess: staticWhite,
+        closeIconColorPressedSuccess: staticWhite,
+        closeColorHoverSuccess: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.12 }),
+        closeColorPressedSuccess: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.18 }),
+        // warning
+        borderWarning: `${borderTagWidth}px solid ${(0, seemly_1.changeColor)(staticOrange, {
             alpha: 0.35
-        })}`, textColorWarning: warningColor, colorWarning: (0, seemly_1.changeColor)(warningColor, { alpha: 0.15 }), colorBorderedWarning: (0, seemly_1.changeColor)(warningColor, { alpha: 0.12 }), closeIconColorWarning: warningColor, closeIconColorHoverWarning: warningColor, closeIconColorPressedWarning: warningColor, closeColorHoverWarning: (0, seemly_1.changeColor)(warningColor, { alpha: 0.12 }), closeColorPressedWarning: (0, seemly_1.changeColor)(warningColor, { alpha: 0.18 }), borderError: `${borderTagWidth}px solid ${(0, seemly_1.changeColor)(errorColor, {
+        })}`,
+        textColorWarning: staticWhite,
+        colorWarning: staticOrange,
+        colorBorderedWarning: staticOrange,
+        closeIconColorWarning: staticWhite,
+        closeIconColorHoverWarning: staticWhite,
+        closeIconColorPressedWarning: staticWhite,
+        closeColorHoverWarning: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.12 }),
+        closeColorPressedWarning: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.18 }),
+        // error
+        borderError: `${borderTagWidth}px solid ${(0, seemly_1.changeColor)(staticRed, {
             alpha: 0.23
-        })}`, textColorError: errorColor, colorError: (0, seemly_1.changeColor)(errorColor, { alpha: 0.1 }), colorBorderedError: (0, seemly_1.changeColor)(errorColor, { alpha: 0.08 }), closeIconColorError: errorColor, closeIconColorHoverError: errorColor, closeIconColorPressedError: errorColor, closeColorHoverError: (0, seemly_1.changeColor)(errorColor, { alpha: 0.12 }), closeColorPressedError: (0, seemly_1.changeColor)(errorColor, { alpha: 0.18 }) });
+        })}`,
+        textColorError: staticWhite,
+        colorError: staticRed,
+        colorBorderedError: staticRed,
+        closeIconColorError: staticWhite,
+        closeIconColorHoverError: staticWhite,
+        closeIconColorPressedError: staticWhite,
+        closeColorHoverError: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.12 }),
+        closeColorPressedError: (0, seemly_1.changeColor)(staticWhite, { alpha: 0.18 })
+    };
 };
+exports.self = self;
 const tagLight = {
     name: 'Tag',
     common: common_1.commonLight,
-    self
+    self: exports.self
 };
 exports.default = tagLight;

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

@@ -11,124 +11,113 @@ declare const _default: import("vue").DefineComponent<{}, {
         restore: string;
     }>;
     themeCommonDefault: import("vue").ComputedRef<{
-        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;
-        tertiaryColor: string;
-        tertiaryColorHover: string;
-        tertiaryColorActive: string;
-        tertiaryColorSuppl: string;
-        tertiaryElements: string;
-        textColorBase: string;
-        textColor1: string;
-        textColor2: string;
-        textColor3: string;
-        textTertiary: string;
-        boxShadowHover: string;
-        boxShadowFocus: string;
-        boxShadowHoverChecked: string;
-        boxShadowFocusChecked: 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;
-        borderTagColor: string;
-        closeIconColor: string;
-        closeIconColorHover: string;
-        closeIconColorPressed: string;
-        closeColorHover: string;
-        closeColorPressed: 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;
-        avatarTextColor: string;
-        avatarIconColor: string;
-        invertedColor: string;
-        tooltipColor: 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;
+        brandPrimary50: string;
+        brandPrimary100: string;
+        brandPrimary200: string;
+        brandPrimary300: string;
+        brandPrimary400: string;
+        brandPrimary500: string;
+        brandPrimary550: string;
+        brandPrimary600: string;
+        brandSecondary500: string;
+        brandSecondary300: string;
+        brandSecondary600: string;
+        brandTertiary500: string;
+        brandTertiary300: string;
+        brandTertiary600: string;
+        brandQuaternary500: string;
+        brandQuaternary300: string;
+        brandQuaternary600: string;
+        brandQuinary500: string;
+        brandQuinary300: string;
+        brandQuinary600: string;
+        brandQuinary100: string;
+        surfacePrimary: string;
+        surfaceSecondary: string;
+        containerPrimary: string;
+        containerSecondary: string;
+        textPrimary: string;
+        textSecondary: string;
+        textTertiary: string;
+        textQuaternary: string;
+        textBrand: string;
+        elementsPrimary: string;
+        elementsSecondary: string;
+        elementsTertiary: string;
+        elementsQuaternary: string;
+        elementsQuinary: string;
+        elementsDarkQuinary: string;
+        elementsSenary: string;
+        elementsOnContainer: string;
+        transparencyPrimary: string;
+        transparencySecondary: string;
+        transparencyTertiary: string;
+        transparencyQuinary: string;
+        transparencyModal: string;
+        staticBlack: string;
+        staticDarkGrey: string;
+        staticWhite: string;
+        staticRed: string;
+        staticOrange: string;
+        staticGreen: string;
+        staticErrorAccent: string;
+        shadowDepth2: string;
         fontFamily: string;
         fontFamilyMono: string;
-        fontWeight: string;
-        fontWeightStrong: string;
         cubicBezierEaseInOut: string;
         cubicBezierEaseOut: string;
         cubicBezierEaseIn: string;
-        borderWidth: number;
-        borderTagWidth: number;
+        borderRadiusLarge: string;
         borderRadius: string;
+        borderRadiusMedium: string;
         borderRadiusSmall: string;
-        fontSize: string;
-        fontSizeMini: string;
-        fontSizeTiny: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        lineHeight: string;
+        borderRadiusTiny: string;
         heightMini: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
+        fontDisplayLarge: string;
+        fontDisplaySmall: string;
+        fontHeadingLarge: string;
+        fontHeadingMedium: string;
+        fontHeadingSmall: string;
+        fontTitleLarge: string;
+        fontTitleMedium: string;
+        fontTitleSmall: string;
+        fontBodyLarge: string;
+        fontBodyMedium: string;
+        fontBodySmall: string;
+        lineHeightDisplayLarge: string;
+        lineHeightDisplaySmall: string;
+        lineHeightHeadingLarge: string;
+        lineHeightHeadingMedium: string;
+        lineHeightHeadingSmall: string;
+        lineHeightTitleLarge: string;
+        lineHeightTitleMedium: string;
+        lineHeightTitleSmall: string;
+        lineHeightBodyLarge: string;
+        lineHeightBodyMedium: string;
+        lineHeightBodySmall: string;
+        fontWeight: string;
+        fontWeightStrong: string;
+        fontWeightBold: string;
+        iconSmall: string;
+        iconMedium: string;
+        iconLarge: string;
+        iconHuge: string;
+        closeSmall: string;
+        closeMedium: string;
+        closeLarge: string;
+        closeHuge: string;
+        closeBorderRadius: string;
         name: "common";
     }>;
     theme: import("vue").ComputedRef<GlobalThemeOverrides>;

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

@@ -25,12 +25,45 @@ const ColorWandIcon = ((0, vue_1.h)("svg", { viewBox: "0 0 16 16", fill: "none",
     (0, vue_1.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" }),
     (0, vue_1.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" }),
     (0, vue_1.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" })));
+const coloredKeys = [
+    'brandPrimary',
+    'brandSecondary',
+    'brandTertiary',
+    'brandQuaternary',
+    'brandQuinary',
+    'static',
+    'surfacePrimary',
+    'surfaceSecondary',
+    'containerPrimary',
+    'containerSecondary',
+    'textPrimary',
+    'textSecondary',
+    'textTertiary',
+    'textQuaternary',
+    'textBrand',
+    'elementsPrimary',
+    'elementsSecondary',
+    'elementsTertiary',
+    'elementsQuaternary',
+    'elementsQuinary',
+    'elementsDarkQuinary',
+    'elementsSenary',
+    'elementsOnContainer',
+    'transparencyPrimary',
+    'transparencySecondary',
+    'transparencyTertiary',
+    'transparencyQuinary',
+    'transparencyModal'
+];
 // button colorOpacitySecondary var is not color
 const showColorPicker = (key) => {
     if (key.includes('pacity'))
         return false;
-    if (key.includes('color') || key.includes('Color'))
+    if (key.includes('color') ||
+        key.includes('Color') ||
+        !!coloredKeys.find((color) => key.includes(color))) {
         return true;
+    }
     return false;
 };
 exports.default = (0, vue_1.defineComponent)({
@@ -163,7 +196,7 @@ exports.default = (0, vue_1.defineComponent)({
             default: () => {
                 var _a, _b;
                 return [
-                    (0, vue_1.h)(popover_1.UPopover, { scrollable: true, arrowPointToCenter: true, trigger: "manual", show: this.showPanel, displayDirective: "show", placement: "top-end", style: {
+                    (0, vue_1.h)(popover_1.UPopover, { scrollable: true, arrowPointToCenter: true, trigger: "click", show: this.showPanel, displayDirective: "show", placement: "top-end", style: {
                             width: this.isMaximized ? 'calc(100vw - 80px)' : '288px',
                             height: 'calc(100vh - 200px)',
                             padding: 0

package/lib/themes/dark.js

@@ -68,21 +68,23 @@ const styles_63 = require("../slider/styles");
 const styles_64 = require("../space/styles");
 const styles_65 = require("../spin/styles");
 const styles_66 = require("../statistic/styles");
-const styles_67 = require("../steps/styles");
-const styles_68 = require("../switch/styles");
-const styles_69 = require("../table/styles");
-const styles_70 = require("../tabs/styles");
-const styles_71 = require("../tag/styles");
-const styles_72 = require("../thing/styles");
-const styles_73 = require("../time-picker/styles");
-const styles_74 = require("../timeline/styles");
-const styles_75 = require("../tooltip/styles");
-const styles_76 = require("../transfer/styles");
-const styles_77 = require("../tree-select/styles");
-const styles_78 = require("../typography/styles");
-const styles_79 = require("../tree/styles");
-const styles_80 = require("../upload/styles");
-const styles_81 = require("../watermark/styles");
+const styles_67 = require("../status/styles");
+const styles_68 = require("../steps/styles");
+const styles_69 = require("../switch/styles");
+const styles_70 = require("../table/styles");
+const styles_71 = require("../tabs/styles");
+const styles_72 = require("../tag/styles");
+const styles_73 = require("../thing/styles");
+const styles_74 = require("../time-picker/styles");
+const styles_75 = require("../timeline/styles");
+const styles_76 = require("../tooltip/styles");
+const styles_77 = require("../transfer/styles");
+const styles_78 = require("../tree-select/styles");
+const styles_79 = require("../typography/styles");
+const styles_80 = require("../tree/styles");
+const styles_81 = require("../upload/styles");
+const styles_82 = require("../watermark/styles");
+const styles_83 = require("../toggle-button/styles");
 exports.darkTheme = {
     name: 'dark',
     common: common_1.commonDark,
@@ -152,19 +154,21 @@ exports.darkTheme = {
     Space: styles_64.spaceDark,
     Spin: styles_65.spinDark,
     Statistic: styles_66.statisticDark,
-    Steps: styles_67.stepsDark,
-    Switch: styles_68.switchDark,
-    Table: styles_69.tableDark,
-    Tabs: styles_70.tabsDark,
-    Tag: styles_71.tagDark,
-    Thing: styles_72.thingDark,
-    TimePicker: styles_73.timePickerDark,
-    Timeline: styles_74.timelineDark,
-    Tooltip: styles_75.tooltipDark,
-    Transfer: styles_76.transferDark,
-    Tree: styles_79.treeDark,
-    TreeSelect: styles_77.treeSelectDark,
-    Typography: styles_78.typographyDark,
-    Upload: styles_80.uploadDark,
-    Watermark: styles_81.watermarkDark
+    Status: styles_67.statusDark,
+    Steps: styles_68.stepsDark,
+    Switch: styles_69.switchDark,
+    Table: styles_70.tableDark,
+    Tabs: styles_71.tabsDark,
+    Tag: styles_72.tagDark,
+    Thing: styles_73.thingDark,
+    TimePicker: styles_74.timePickerDark,
+    Timeline: styles_75.timelineDark,
+    Tooltip: styles_76.tooltipDark,
+    Transfer: styles_77.transferDark,
+    Tree: styles_80.treeDark,
+    TreeSelect: styles_78.treeSelectDark,
+    Typography: styles_79.typographyDark,
+    Upload: styles_81.uploadDark,
+    Watermark: styles_82.watermarkDark,
+    ToggleButton: styles_83.toggleButtonDark
 };

package/lib/themes/light.js

@@ -70,21 +70,23 @@ const styles_63 = require("../slider/styles");
 const styles_64 = require("../space/styles");
 const styles_65 = require("../spin/styles");
 const styles_66 = require("../statistic/styles");
-const styles_67 = require("../steps/styles");
-const styles_68 = require("../switch/styles");
-const styles_69 = require("../table/styles");
-const styles_70 = require("../tabs/styles");
-const styles_71 = require("../tag/styles");
-const styles_72 = require("../thing/styles");
-const styles_73 = require("../time-picker/styles");
-const styles_74 = require("../timeline/styles");
-const styles_75 = require("../tooltip/styles");
-const styles_76 = require("../transfer/styles");
-const styles_77 = require("../typography/styles");
-const styles_78 = require("../tree/styles");
-const styles_79 = require("../tree-select/styles");
-const styles_80 = require("../upload/styles");
-const styles_81 = require("../watermark/styles");
+const styles_67 = require("../status/styles");
+const styles_68 = require("../steps/styles");
+const styles_69 = require("../switch/styles");
+const styles_70 = require("../table/styles");
+const styles_71 = require("../tabs/styles");
+const styles_72 = require("../tag/styles");
+const styles_73 = require("../thing/styles");
+const styles_74 = require("../time-picker/styles");
+const styles_75 = require("../timeline/styles");
+const styles_76 = require("../tooltip/styles");
+const styles_77 = require("../transfer/styles");
+const styles_78 = require("../typography/styles");
+const styles_79 = require("../tree/styles");
+const styles_80 = require("../tree-select/styles");
+const styles_81 = require("../upload/styles");
+const styles_82 = require("../watermark/styles");
+const styles_83 = require("../toggle-button/styles");
 exports.lightTheme = {
     name: 'light',
     common: common_1.commonLight,
@@ -154,19 +156,21 @@ exports.lightTheme = {
     Space: styles_64.spaceLight,
     Spin: styles_65.spinLight,
     Statistic: styles_66.statisticLight,
-    Steps: styles_67.stepsLight,
-    Switch: styles_68.switchLight,
-    Table: styles_69.tableLight,
-    Tabs: styles_70.tabsLight,
-    Tag: styles_71.tagLight,
-    Thing: styles_72.thingLight,
-    TimePicker: styles_73.timePickerLight,
-    Timeline: styles_74.timelineLight,
-    Tooltip: styles_75.tooltipLight,
-    Transfer: styles_76.transferLight,
-    Tree: styles_78.treeLight,
-    TreeSelect: styles_79.treeSelectLight,
-    Typography: styles_77.typographyLight,
-    Upload: styles_80.uploadLight,
-    Watermark: styles_81.watermarkLight
+    Status: styles_67.statusLight,
+    Steps: styles_68.stepsLight,
+    Switch: styles_69.switchLight,
+    Table: styles_70.tableLight,
+    Tabs: styles_71.tabsLight,
+    Tag: styles_72.tagLight,
+    Thing: styles_73.thingLight,
+    TimePicker: styles_74.timePickerLight,
+    Timeline: styles_75.timelineLight,
+    Tooltip: styles_76.tooltipLight,
+    Transfer: styles_77.transferLight,
+    Tree: styles_79.treeLight,
+    TreeSelect: styles_80.treeSelectLight,
+    Typography: styles_78.typographyLight,
+    Upload: styles_81.uploadLight,
+    Watermark: styles_82.watermarkLight,
+    ToggleButton: styles_83.toggleButtonLight
 };