@uzum-tech/ui 0.1.1 → 1.0.0

package/lib/auto-complete/styles/light.d.ts

@@ -6,14 +6,21 @@ declare const autoCompleteLight: import("../../_mixins").Theme<"AutoComplete", {
     menuBoxShadow: string;
 }, {
     InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+        height: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        optionPaddingSmall: string;
+        optionPaddingMedium: string;
+        optionPaddingLarge: string;
+        loadingSize: string;
         optionFontSizeSmall: string;
         optionFontSizeMedium: string;
         optionFontSizeLarge: string;
-        optionFontSizeHuge: string;
         optionHeightSmall: string;
         optionHeightMedium: string;
         optionHeightLarge: string;
-        optionHeightHuge: string;
+        optionBorderRadius: string;
         borderRadius: string;
         color: string;
         groupHeaderTextColor: string;
@@ -30,22 +37,16 @@ declare const autoCompleteLight: import("../../_mixins").Theme<"AutoComplete", {
         optionColorActivePending: 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", {
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -53,28 +54,31 @@ declare const autoCompleteLight: import("../../_mixins").Theme<"AutoComplete", {
             textColor: string;
             iconColor: string;
             extraTextColor: string;
-            iconSizeSmall: string;
-            iconSizeMedium: string;
-            iconSizeLarge: string;
-            iconSizeHuge: string;
         }, any>;
     }>;
     Input: import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
         countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
+        heightHuge: string;
         fontSizeTiny: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        fontSizeHuge: string;
         lineHeight: string;
         lineHeightTextarea: string;
         borderRadius: string;
         iconSize: string;
-        groupLabelColor: string;
         groupLabelTextColor: string;
         textColor: string;
         textColorDisabled: string;
@@ -114,11 +118,7 @@ declare const autoCompleteLight: import("../../_mixins").Theme<"AutoComplete", {
         iconColorHover: string;
         iconColorPressed: string;
         suffixTextColor: string;
-        paddingTiny: string;
-        paddingSmall: string;
-        paddingMedium: string;
-        paddingLarge: string;
-        clearSize: string;
+        selectionColor: string;
     }, any>;
 }>;
 export default autoCompleteLight;

package/lib/auto-complete/styles/light.js

@@ -6,9 +6,9 @@ const styles_2 = require("../../input/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
 function self(vars) {
-    const { boxShadow2 } = vars;
+    const { shadowDepth2 } = vars;
     return {
-        menuBoxShadow: boxShadow2
+        menuBoxShadow: shadowDepth2
     };
 }
 exports.self = self;

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

@@ -37,12 +37,9 @@ export declare const avatarProps: {
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        heightHuge: string;
         textColor: string;
         iconColor: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -53,12 +50,9 @@ export declare const avatarProps: {
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        heightHuge: string;
         textColor: string;
         iconColor: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -69,12 +63,9 @@ export declare const avatarProps: {
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        heightHuge: string;
         textColor: string;
         iconColor: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
     }, any>>>;
 };
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>;
@@ -113,12 +104,9 @@ declare const _default: import("vue").DefineComponent<{
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        heightHuge: string;
         textColor: string;
         iconColor: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -129,12 +117,9 @@ declare const _default: import("vue").DefineComponent<{
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        heightHuge: string;
         textColor: string;
         iconColor: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -145,12 +130,9 @@ declare const _default: import("vue").DefineComponent<{
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        heightHuge: string;
         textColor: string;
         iconColor: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
     }, any>>>;
 }, {
     textRef: import("vue").Ref<HTMLElement | null>;
@@ -164,8 +146,6 @@ declare const _default: import("vue").DefineComponent<{
         '--u-border': string;
         '--u-border-radius': string;
         '--u-color': string;
-        '--u-color-modal': string;
-        '--u-color-popover': string;
         '--u-text-color': string;
         '--u-icon-color': string;
         '--u-bezier': string;
@@ -213,12 +193,9 @@ declare const _default: import("vue").DefineComponent<{
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        heightHuge: string;
         textColor: string;
         iconColor: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -229,12 +206,9 @@ declare const _default: import("vue").DefineComponent<{
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        heightHuge: string;
         textColor: string;
         iconColor: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
@@ -245,12 +219,9 @@ declare const _default: import("vue").DefineComponent<{
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
-        heightHuge: string;
         textColor: string;
         iconColor: string;
         color: string;
-        colorModal: string;
-        colorPopover: string;
     }, any>>>;
 }>>, {
     readonly lazy: boolean;

package/lib/avatar/src/Avatar.js

@@ -98,16 +98,15 @@ exports.default = (0, vue_1.defineComponent)({
             const size = mergedSizeRef.value;
             const round = mergedRoundRef.value;
             const bordered = mergedBorderedRef.value;
-            const { self: { borderRadius, fontSize, fontWeight, color, border, textColor, iconColor, colorModal, colorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { borderRadius, fontSize, fontWeight, color, border, textColor, iconColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
             let height;
             if (typeof size === 'number') {
                 height = `${size}px`;
             }
             else {
-                const sizeSmallToTiny = size === 'small' ? 'tiny' : size;
-                height = themeRef.value.self[(0, _utils_1.createKey)('height', sizeSmallToTiny)];
+                height = themeRef.value.self[(0, _utils_1.createKey)('height', size)];
             }
-            const getBG = (color) => {
+            const getBackgroundColor = (color) => {
                 return props.disabled || size === 'small' ? 'rgba(0,0,0,0)' : color;
             };
             return {
@@ -115,9 +114,7 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-font-weight': fontWeight,
                 '--u-border': bordered ? border : 'none',
                 '--u-border-radius': round ? '50%' : borderRadius,
-                '--u-color': getBG(color),
-                '--u-color-modal': getBG(colorModal),
-                '--u-color-popover': getBG(colorPopover),
+                '--u-color': getBackgroundColor(color),
                 '--u-text-color': textColor,
                 '--u-icon-color': iconColor,
                 '--u-bezier': cubicBezierEaseInOut,

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

@@ -1,2 +1,2 @@
-export type Size = number | 'small' | 'medium' | 'large';
+export type Size = number | 'tiny' | 'small' | 'medium' | 'large';
 export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';

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

@@ -8,8 +8,6 @@ const cssr_1 = require("../../../_utils/cssr");
 // --u-font-size
 // --u-border-radius
 // --u-color
-// --u-color-modal
-// --u-color-popover
 // --u-bezier
 // --u-merged-size
 exports.default = (0, cssr_1.cB)('avatar', `
@@ -30,7 +28,7 @@ exports.default = (0, cssr_1.cB)('avatar', `
  border-color .3s var(--u-bezier),
  background-color .3s var(--u-bezier),
  color .3s var(--u-bezier);
-`, [(0, cssr_1.insideModal)((0, cssr_1.c)('&', '--u-merged-color: var(--u-color-modal);')), (0, cssr_1.insidePopover)((0, cssr_1.c)('&', '--u-merged-color: var(--u-color-popover);')), (0, cssr_1.c)('img', `
+`, [(0, cssr_1.c)('img', `
  width: 100%;
  height: 100%;
  `), (0, cssr_1.cE)('text', `

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

@@ -9,12 +9,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     heightSmall: string;
     heightMedium: string;
     heightLarge: string;
-    heightHuge: string;
     textColor: string;
     iconColor: string;
     color: string;
-    colorModal: string;
-    colorPopover: string;
 };
 export type AvatarThemeVars = ReturnType<typeof self>;
 declare const avatarLight: Theme<'Avatar', AvatarThemeVars>;

package/lib/avatar/styles/light.js

@@ -2,24 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
-const seemly_1 = require("seemly");
 const self = (vars) => {
-    const { borderRadius, avatarColor, avatarTextColor, avatarIconColor, cardColor, fontSizeLarge, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge, modalColor, popoverColor, fontWeightStrong } = vars;
+    const { borderRadius, heightTiny, heightSmall, heightMedium, heightLarge, fontBodyLarge, fontWeight, elementsSecondary, textSecondary, elementsPrimary, elementsTertiary } = vars;
     return {
         borderRadius,
-        fontSize: fontSizeLarge,
-        fontWeight: fontWeightStrong,
-        border: `2px solid ${cardColor}`,
+        fontSize: fontBodyLarge,
+        fontWeight,
+        border: `2px solid ${elementsSecondary}`,
         heightTiny,
         heightSmall,
         heightMedium,
         heightLarge,
-        heightHuge,
-        textColor: avatarTextColor,
-        iconColor: avatarIconColor,
-        color: (0, seemly_1.composite)(cardColor, avatarColor),
-        colorModal: (0, seemly_1.composite)(modalColor, avatarColor),
-        colorPopover: (0, seemly_1.composite)(popoverColor, avatarColor)
+        textColor: textSecondary,
+        iconColor: elementsPrimary,
+        color: elementsTertiary
     };
 };
 exports.self = self;

package/lib/avatar-group/src/AvatarGroup.d.ts

@@ -29,12 +29,9 @@ export declare const avatarGroupProps: {
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            heightHuge: string;
             textColor: string;
             iconColor: string;
             color: string;
-            colorModal: string;
-            colorPopover: string;
         }, any>;
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -49,12 +46,9 @@ export declare const avatarGroupProps: {
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            heightHuge: string;
             textColor: string;
             iconColor: string;
             color: string;
-            colorModal: string;
-            colorPopover: string;
         }, any>;
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -69,12 +63,9 @@ export declare const avatarGroupProps: {
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            heightHuge: string;
             textColor: string;
             iconColor: string;
             color: string;
-            colorModal: string;
-            colorPopover: string;
         }, any>;
     }>>>;
 };
@@ -101,12 +92,9 @@ declare const _default: import("vue").DefineComponent<{
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            heightHuge: string;
             textColor: string;
             iconColor: string;
             color: string;
-            colorModal: string;
-            colorPopover: string;
         }, any>;
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -121,12 +109,9 @@ declare const _default: import("vue").DefineComponent<{
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            heightHuge: string;
             textColor: string;
             iconColor: string;
             color: string;
-            colorModal: string;
-            colorPopover: string;
         }, any>;
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -141,135 +126,121 @@ declare const _default: import("vue").DefineComponent<{
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            heightHuge: string;
             textColor: string;
             iconColor: string;
             color: string;
-            colorModal: string;
-            colorPopover: string;
         }, any>;
     }>>>;
 }, {
     mergedTheme: import("vue").ComputedRef<{
         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;
-            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";
         };
         self: {
@@ -285,12 +256,9 @@ declare const _default: import("vue").DefineComponent<{
                 heightSmall: string;
                 heightMedium: string;
                 heightLarge: string;
-                heightHuge: string;
                 textColor: string;
                 iconColor: string;
                 color: string;
-                colorModal: string;
-                colorPopover: string;
             }, any>;
         };
         peerOverrides: {
@@ -330,12 +298,9 @@ declare const _default: import("vue").DefineComponent<{
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            heightHuge: string;
             textColor: string;
             iconColor: string;
             color: string;
-            colorModal: string;
-            colorPopover: string;
         }, any>;
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -350,12 +315,9 @@ declare const _default: import("vue").DefineComponent<{
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            heightHuge: string;
             textColor: string;
             iconColor: string;
             color: string;
-            colorModal: string;
-            colorPopover: string;
         }, any>;
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AvatarGroup", {
@@ -370,12 +332,9 @@ declare const _default: import("vue").DefineComponent<{
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
-            heightHuge: string;
             textColor: string;
             iconColor: string;
             color: string;
-            colorModal: string;
-            colorPopover: string;
         }, any>;
     }>>>;
 }>>, {