@uzum-tech/ui 1.3.0 → 1.4.0

package/lib/ellipsis/src/Ellipsis.d.ts

@@ -7,7 +7,7 @@ export declare const ellipsisProps: {
     readonly expandTrigger: PropType<"click">;
     readonly lineClamp: PropType<string | number>;
     readonly tooltip: {
-        readonly type: PropType<boolean | PopoverProps>;
+        readonly type: PropType<PopoverProps | boolean>;
         readonly default: true;
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Ellipsis", unknown, {
@@ -118,7 +118,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly expandTrigger: PropType<"click">;
     readonly lineClamp: PropType<string | number>;
     readonly tooltip: {
-        readonly type: PropType<boolean | PopoverProps>;
+        readonly type: PropType<PopoverProps | boolean>;
         readonly default: true;
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Ellipsis", unknown, {
@@ -225,118 +225,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     mergedTheme: import("vue").ComputedRef<{
-        common: {
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            opacityDisabled: 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;
-            staticDeepBlue: string;
-            staticErrorAccent: string;
-            shadowDepth2: string;
-            shadowDepth: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadiusLarge: string;
-            borderRadius: string;
-            borderRadiusMedium: string;
-            borderRadiusSmall: 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";
-        };
+        common: import("../..").ThemeCommonVars;
         self: unknown;
         peers: {
             Tooltip: import("../../_mixins").Theme<"Tooltip", {
@@ -406,7 +295,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly expandTrigger: PropType<"click">;
     readonly lineClamp: PropType<string | number>;
     readonly tooltip: {
-        readonly type: PropType<boolean | PopoverProps>;
+        readonly type: PropType<PopoverProps | boolean>;
         readonly default: true;
     };
     readonly theme: PropType<import("../../_mixins").Theme<"Ellipsis", unknown, {

package/lib/ellipsis/src/Ellipsis.js

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ellipsisProps = exports.createCursorClass = exports.createLineClampClass = void 0;
+exports.ellipsisProps = void 0;
+exports.createLineClampClass = createLineClampClass;
+exports.createCursorClass = createCursorClass;
 const vue_1 = require("vue");
 const tooltip_1 = require("../../tooltip");
 const use_config_1 = require("../../_mixins/use-config");
@@ -13,11 +15,9 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 function createLineClampClass(clsPrefix) {
     return `${clsPrefix}-ellipsis--line-clamp`;
 }
-exports.createLineClampClass = createLineClampClass;
 function createCursorClass(clsPrefix, cursor) {
     return `${clsPrefix}-ellipsis--cursor-${cursor}`;
 }
-exports.createCursorClass = createCursorClass;
 exports.ellipsisProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { expandTrigger: String, lineClamp: [Number, String], tooltip: {
         type: [Boolean, Object],
         default: true

package/lib/ellipsis/src/PerformantEllipsis.d.ts

@@ -2,7 +2,7 @@ export declare const UPerformantEllipsis: import("vue").DefineComponent<{
     readonly expandTrigger: import("vue").PropType<"click">;
     readonly lineClamp: import("vue").PropType<string | number>;
     readonly tooltip: {
-        readonly type: import("vue").PropType<boolean | import("../..").PopoverProps>;
+        readonly type: import("vue").PropType<import("../..").PopoverProps | boolean>;
         readonly default: true;
     };
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Ellipsis", unknown, {
@@ -114,7 +114,7 @@ export declare const UPerformantEllipsis: import("vue").DefineComponent<{
     readonly expandTrigger: import("vue").PropType<"click">;
     readonly lineClamp: import("vue").PropType<string | number>;
     readonly tooltip: {
-        readonly type: import("vue").PropType<boolean | import("../..").PopoverProps>;
+        readonly type: import("vue").PropType<import("../..").PopoverProps | boolean>;
         readonly default: true;
     };
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Ellipsis", unknown, {

package/lib/empty/src/Empty.d.ts

@@ -1,6 +1,7 @@
 import { type PropType, type VNodeChild } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const emptyProps: {
+    title: StringConstructor;
     description: StringConstructor;
     showDescription: {
         type: BooleanConstructor;
@@ -20,12 +21,18 @@ export declare const emptyProps: {
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
@@ -33,12 +40,18 @@ export declare const emptyProps: {
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
@@ -46,17 +59,24 @@ export declare const emptyProps: {
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>>>;
 };
 export type EmptyProps = ExtractPublicPropTypes<typeof emptyProps>;
 declare const _default: import("vue").DefineComponent<{
+    title: StringConstructor;
     description: StringConstructor;
     showDescription: {
         type: BooleanConstructor;
@@ -76,12 +96,18 @@ declare const _default: import("vue").DefineComponent<{
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
@@ -89,12 +115,18 @@ declare const _default: import("vue").DefineComponent<{
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
@@ -102,29 +134,40 @@ declare const _default: import("vue").DefineComponent<{
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
     mergedRenderIcon: import("vue").ComputedRef<() => VNodeChild>;
+    localizedTitle: import("vue").ComputedRef<string>;
     localizedDescription: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
         '--u-icon-size': string;
-        '--u-font-size': string;
+        '--u-title-font-size': string;
+        '--u-description-font-size': string;
         '--u-bezier': string;
-        '--u-text-color': string;
+        '--u-title-color': string;
+        '--u-description-color': string;
         '--u-icon-color': string;
+        '--u-icon-bg-color': string;
         '--u-extra-text-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
     description: StringConstructor;
     showDescription: {
         type: BooleanConstructor;
@@ -144,12 +187,18 @@ declare const _default: import("vue").DefineComponent<{
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
@@ -157,12 +206,18 @@ declare const _default: import("vue").DefineComponent<{
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
@@ -170,17 +225,23 @@ declare const _default: import("vue").DefineComponent<{
         iconSizeMedium: string;
         iconSizeLarge: string;
         iconSizeHuge: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        fontSizeLarge: string;
-        fontSizeHuge: string;
-        textColor: string;
+        titleFontSizeSmall: string;
+        titleFontSizeMedium: string;
+        titleFontSizeLarge: string;
+        titleFontSizeHuge: string;
+        descriptionFontSizeSmall: string;
+        descriptionFontSizeMedium: string;
+        descriptionFontSizeLarge: string;
+        descriptionFontSizeHuge: string;
+        titleColor: string;
+        descriptionColor: string;
         iconColor: string;
+        iconBgColor: string;
         extraTextColor: string;
     }, any>>>;
 }>>, {
-    size: "small" | "medium" | "large" | "huge";
     showDescription: boolean;
     showIcon: boolean;
+    size: "small" | "medium" | "large" | "huge";
 }, {}>;
 export default _default;

package/lib/empty/src/Empty.js

@@ -12,7 +12,7 @@ const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.emptyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { description: String, showDescription: {
+exports.emptyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, description: String, showDescription: {
         type: Boolean,
         default: true
     }, showIcon: {
@@ -30,6 +30,10 @@ exports.default = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('Empty', '-empty', index_cssr_1.default, styles_1.emptyLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Empty');
         const UConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
+        const mergedTitleRef = (0, vue_1.computed)(() => {
+            var _a, _b, _c;
+            return ((_a = props.title) !== null && _a !== void 0 ? _a : (_c = (_b = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef.value) === null || _b === void 0 ? void 0 : _b.Empty) === null || _c === void 0 ? void 0 : _c.title);
+        });
         const mergedDescriptionRef = (0, vue_1.computed)(() => {
             var _a, _b, _c;
             return ((_a = props.description) !== null && _a !== void 0 ? _a : (_c = (_b = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef.value) === null || _b === void 0 ? void 0 : _b.Empty) === null || _c === void 0 ? void 0 : _c.description);
@@ -37,17 +41,20 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedRenderIconRef = (0, vue_1.computed)(() => {
             var _a, _b;
             return ((_b = (_a = UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Empty) === null || _b === void 0 ? void 0 : _b.renderIcon) ||
-                (() => (0, vue_1.h)(icons_1.EmptyIcon, null));
+                (() => (0, vue_1.h)(icons_1.FileHeart, null));
         });
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { size } = props;
-            const { common: { cubicBezierEaseInOut }, self: { [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, textColor, iconColor, extraTextColor } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { titleColor, descriptionColor, iconColor, iconBgColor, extraTextColor, [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize, [(0, _utils_1.createKey)('descriptionFontSize', size)]: descriptionFontSize } } = themeRef.value;
             return {
                 '--u-icon-size': iconSize,
-                '--u-font-size': fontSize,
+                '--u-title-font-size': titleFontSize,
+                '--u-description-font-size': descriptionFontSize,
                 '--u-bezier': cubicBezierEaseInOut,
-                '--u-text-color': textColor,
+                '--u-title-color': titleColor,
+                '--u-description-color': descriptionColor,
                 '--u-icon-color': iconColor,
+                '--u-icon-bg-color': iconBgColor,
                 '--u-extra-text-color': extraTextColor
             };
         });
@@ -62,6 +69,9 @@ exports.default = (0, vue_1.defineComponent)({
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedRenderIcon: mergedRenderIconRef,
+            localizedTitle: (0, vue_1.computed)(() => {
+                return mergedTitleRef.value || localeRef.value.title;
+            }),
             localizedDescription: (0, vue_1.computed)(() => {
                 return mergedDescriptionRef.value || localeRef.value.description;
             }),
@@ -73,9 +83,17 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const { $slots, mergedClsPrefix, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
-        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-empty`, this.themeClass], style: this.cssVars },
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-empty`,
+                `${mergedClsPrefix}-empty--${this.size}`,
+                this.themeClass
+            ], style: this.cssVars },
             this.showIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__icon` }, $slots.icon ? ($slots.icon()) : ((0, vue_1.h)(icon_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })))) : null,
-            this.showDescription ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__description` }, $slots.default ? $slots.default() : this.localizedDescription)) : null,
+            this.showDescription ? ((0, vue_1.h)(vue_1.Fragment, null,
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__title` }, $slots.title ? $slots.title() : this.localizedTitle),
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__description` }, $slots.description
+                    ? $slots.description()
+                    : this.localizedDescription))) : null,
             $slots.extra ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__extra` }, $slots.extra())) : null));
     }
 });

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

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 const cssr_1 = require("../../../_utils/cssr");
 // vars:
-// --u-font-size
+// --u-title-font-size
+// --u-description-font-size
 // --u-icon-size
 // --u-icon-color
 // --u-bezier
@@ -15,23 +16,49 @@ exports.default = (0, cssr_1.cB)('empty', `
  display: flex;
  flex-direction: column;
  align-items: center;
- font-size: var(--u-font-size);
-`, [(0, cssr_1.cE)('icon', `
- width: var(--u-icon-size);
- height: var(--u-icon-size);
+`, [(0, cssr_1.cM)('small', [(0, cssr_1.cE)('icon', `
+ width: 48px;
+ height: 48px;
+ margin-bottom: 16px;
+ `)]), (0, cssr_1.cM)('medium', [(0, cssr_1.cE)('icon', `
+ width: 48px;
+ height: 48px;
+ margin-bottom: 16px;
+ `)]), (0, cssr_1.cM)('large', [(0, cssr_1.cE)('icon', `
+ width: 80px;
+ height: 80px;
+ margin-bottom: 32px;
+ `)]), (0, cssr_1.cM)('huge', [(0, cssr_1.cE)('icon', `
+ width: 80px;
+ height: 80px;
+ margin-bottom: 32px;
+ `)]), (0, cssr_1.cE)('icon', `
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ background-color: var(--u-icon-bg-color);
  font-size: var(--u-icon-size);
  line-height: var(--u-icon-size);
  color: var(--u-icon-color);
  transition:
  color .3s var(--u-bezier);
- `, [(0, cssr_1.c)('+', [(0, cssr_1.cE)('description', `
- margin-top: 8px;
- `)])]), (0, cssr_1.cE)('description', `
+ `), (0, cssr_1.cE)('title', `
+ text-align: center;
+ transition: color .3s var(--u-bezier);
+ font-size: var(--u-title-font-size);
+ color: var(--u-title-color);
+ max-width: 352px;
+ margin-bottom: 8px;
+ `), (0, cssr_1.cE)('description', `
+ text-align: center;
  transition: color .3s var(--u-bezier);
- color: var(--u-text-color);
+ font-size: var(--u-description-font-size);
+ color: var(--u-description-color);
+ max-width: 352px;
  `), (0, cssr_1.cE)('extra', `
  text-align: center;
  transition: color .3s var(--u-bezier);
- margin-top: 12px;
+ margin-top: 32px;
  color: var(--u-extra-text-color);
  `)]);

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

@@ -5,12 +5,18 @@ export declare const self: (vars: ThemeCommonVars) => {
     iconSizeMedium: string;
     iconSizeLarge: string;
     iconSizeHuge: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
-    fontSizeHuge: string;
-    textColor: string;
+    titleFontSizeSmall: string;
+    titleFontSizeMedium: string;
+    titleFontSizeLarge: string;
+    titleFontSizeHuge: string;
+    descriptionFontSizeSmall: string;
+    descriptionFontSizeMedium: string;
+    descriptionFontSizeLarge: string;
+    descriptionFontSizeHuge: string;
+    titleColor: string;
+    descriptionColor: string;
     iconColor: string;
+    iconBgColor: string;
     extraTextColor: string;
 };
 export type EmptyThemeVars = ReturnType<typeof self>;

package/lib/empty/styles/light.js

@@ -3,18 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { fontBodyMedium, fontBodyLarge, fontTitleSmall, textTertiary, textPrimary, elementsDarkQuinary } = vars;
+    const { fontBodyMedium, fontTitleLarge, fontTitleSmall, textSecondary, textPrimary, brandPrimary500, brandPrimary100 } = vars;
     return {
-        iconSizeSmall: '34px',
-        iconSizeMedium: '40px',
-        iconSizeLarge: '46px',
-        iconSizeHuge: '52px',
-        fontSizeSmall: fontBodyMedium,
-        fontSizeMedium: fontBodyMedium,
-        fontSizeLarge: fontBodyLarge,
-        fontSizeHuge: fontTitleSmall,
-        textColor: textTertiary,
-        iconColor: elementsDarkQuinary,
+        iconSizeSmall: '16px',
+        iconSizeMedium: '16px',
+        iconSizeLarge: '32px',
+        iconSizeHuge: '32px',
+        titleFontSizeSmall: fontTitleSmall,
+        titleFontSizeMedium: fontTitleSmall,
+        titleFontSizeLarge: fontTitleLarge,
+        titleFontSizeHuge: fontTitleLarge,
+        descriptionFontSizeSmall: fontBodyMedium,
+        descriptionFontSizeMedium: fontBodyMedium,
+        descriptionFontSizeLarge: fontTitleSmall,
+        descriptionFontSizeHuge: fontTitleSmall,
+        titleColor: textPrimary,
+        descriptionColor: textSecondary,
+        iconColor: brandPrimary500,
+        iconBgColor: brandPrimary100,
         extraTextColor: textPrimary
     };
 };