@uzum-tech/ui 0.1.1 → 1.0.0

package/lib/alert/src/Alert.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.alertProps = void 0;
 const vue_1 = require("vue");
-const seemly_1 = require("seemly");
 const icons_1 = require("../../_internal/icons");
 const _internal_1 = require("../../_internal");
 const use_rtl_1 = require("../../_mixins/use-rtl");
@@ -19,10 +18,13 @@ exports.alertProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, type: {
         type: String,
         default: 'default'
-    }, bordered: {
+    }, layoutType: {
+        type: String,
+        default: 'alert'
+    }, rounded: {
         type: Boolean,
         default: true
-    }, closable: Boolean, onClose: Function, onAfterLeave: Function, 
+    }, actionsHorizontal: Boolean, closable: Boolean, onClose: Function, onAfterLeave: Function, 
     /** @deprecated */
     onAfterHide: Function });
 exports.default = (0, vue_1.defineComponent)({
@@ -37,41 +39,45 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Alert', '-alert', index_cssr_1.default, styles_1.alertLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Alert', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-            const { fontSize, borderRadius, titleFontWeight, lineHeight, iconSize, iconMargin, iconMarginRtl, closeIconSize, closeBorderRadius, closeSize, closeMargin, closeMarginRtl, padding } = self;
-            const { type } = props;
-            const { left, right } = (0, seemly_1.getMargin)(iconMargin);
+            const { type, layoutType } = props;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-color': self[(0, _utils_1.createKey)('color', type)],
-                '--u-close-icon-size': closeIconSize,
-                '--u-close-border-radius': closeBorderRadius,
+                '--u-padding': self[(0, _utils_1.createKey)('padding', layoutType)],
+                '--u-border-radius': self.borderRadius,
+                // Close
+                '--u-close-icon-size': self.closeIconSize,
+                '--u-close-size': self.closeSize,
+                '--u-close-border-radius': self.closeBorderRadius,
                 '--u-close-color-hover': self[(0, _utils_1.createKey)('closeColorHover', type)],
                 '--u-close-color-pressed': self[(0, _utils_1.createKey)('closeColorPressed', type)],
                 '--u-close-icon-color': self[(0, _utils_1.createKey)('closeIconColor', type)],
                 '--u-close-icon-color-hover': self[(0, _utils_1.createKey)('closeIconColorHover', type)],
                 '--u-close-icon-color-pressed': self[(0, _utils_1.createKey)('closeIconColorPressed', type)],
+                // Icon
                 '--u-icon-color': self[(0, _utils_1.createKey)('iconColor', type)],
-                '--u-border': self[(0, _utils_1.createKey)('border', type)],
+                '--u-icon-size': self.iconSize,
+                '--u-icon-margin': self.iconMargin,
+                '--u-close-margin': self.closeMargin,
+                // Title
                 '--u-title-text-color': self[(0, _utils_1.createKey)('titleTextColor', type)],
-                '--u-content-text-color': self[(0, _utils_1.createKey)('contentTextColor', type)],
-                '--u-line-height': lineHeight,
-                '--u-border-radius': borderRadius,
-                '--u-font-size': fontSize,
-                '--u-title-font-weight': titleFontWeight,
-                '--u-icon-size': iconSize,
-                '--u-icon-margin': iconMargin,
-                '--u-icon-margin-rtl': iconMarginRtl,
-                '--u-close-size': closeSize,
-                '--u-close-margin': closeMargin,
-                '--u-close-margin-rtl': closeMarginRtl,
-                '--u-padding': padding,
-                '--u-icon-margin-left': left,
-                '--u-icon-margin-right': right
+                '--u-title-font-size': self[(0, _utils_1.createKey)('titleFontSize', layoutType)],
+                '--u-title-line-height': self[(0, _utils_1.createKey)('titleLineHeight', layoutType)],
+                '--u-title-font-weight': self[(0, _utils_1.createKey)('titleFontWeight', layoutType)],
+                // Description
+                '--u-description-text-color': self[(0, _utils_1.createKey)('contentTextColor', type)],
+                '--u-description-font-size': self[(0, _utils_1.createKey)('descriptionFontSize', layoutType)],
+                '--u-description-line-height': self[(0, _utils_1.createKey)('descriptionLineHeight', layoutType)],
+                '--u-description-font-weight': self[(0, _utils_1.createKey)('descriptionFontWeight', layoutType)],
+                '--u-description-space': self[(0, _utils_1.createKey)('descriptionSpace', layoutType)],
+                // Actions
+                '--u-actions-margin-top': self.actionsMarginTop,
+                '--u-actions-space': self.actionsSpace
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -102,7 +108,6 @@ exports.default = (0, vue_1.defineComponent)({
         return {
             rtlEnabled: rtlEnabledRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            mergedBordered: mergedBorderedRef,
             visible: visibleRef,
             handleCloseClick,
             handleAfterLeave,
@@ -117,12 +122,17 @@ exports.default = (0, vue_1.defineComponent)({
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)(_internal_1.UFadeInExpandTransition, { onAfterLeave: this.handleAfterLeave }, {
             default: () => {
+                var _a;
                 const { mergedClsPrefix, $slots } = this;
                 const attrs = {
                     class: [
                         `${mergedClsPrefix}-alert`,
                         this.themeClass,
                         this.closable && `${mergedClsPrefix}-alert--closable`,
+                        this.rounded && `${mergedClsPrefix}-alert--rounded`,
+                        `${mergedClsPrefix}-alert--${this.layoutType}`,
+                        this.actionsHorizontal &&
+                            `${mergedClsPrefix}-alert--horizontal`,
                         this.showIcon && `${mergedClsPrefix}-alert--show-icon`,
                         // fix: https://github.com/tusen-ai/naive-ui/issues/4588
                         !this.title &&
@@ -133,37 +143,23 @@ exports.default = (0, vue_1.defineComponent)({
                     style: this.cssVars,
                     role: 'alert'
                 };
+                const closeNode = this.closable && ((0, vue_1.h)(_internal_1.UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick }));
+                const iconNode = this.showIcon && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, (0, _utils_1.resolveSlot)($slots.icon, () => [
+                    (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, () => (0, vue_1.h)(icons_1.InfoOutlineIcon, null))
+                ])));
+                const contentNode = $slots.default && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots.default()));
+                const titleNode = ($slots.header || this.title) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, ((_a = $slots.header) === null || _a === void 0 ? void 0 : _a.call($slots)) || this.title));
+                const actionsNode = $slots.actions && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__actions` }, $slots.actions()));
                 return this.visible ? ((0, vue_1.h)("div", Object.assign({}, (0, vue_1.mergeProps)(this.$attrs, attrs)),
-                    this.closable && ((0, vue_1.h)(_internal_1.UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })),
-                    this.bordered && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert__border` })),
-                    this.showIcon && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, (0, _utils_1.resolveSlot)($slots.icon, () => [
-                        (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                            default: () => {
-                                switch (this.type) {
-                                    case 'success':
-                                        return (0, vue_1.h)(icons_1.SuccessIcon, null);
-                                    case 'info':
-                                        return (0, vue_1.h)(icons_1.InfoIcon, null);
-                                    case 'warning':
-                                        return (0, vue_1.h)(icons_1.WarningIcon, null);
-                                    case 'error':
-                                        return (0, vue_1.h)(icons_1.ErrorIcon, null);
-                                    default:
-                                        return null;
-                                }
-                            }
-                        })
-                    ]))),
-                    (0, vue_1.h)("div", { class: [
-                            `${mergedClsPrefix}-alert-body`,
-                            this.mergedBordered &&
-                                `${mergedClsPrefix}-alert-body--bordered`
-                        ] },
-                        (0, _utils_1.resolveWrappedSlot)($slots.header, (children) => {
-                            const mergedChildren = children || this.title;
-                            return mergedChildren ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, mergedChildren)) : null;
-                        }),
-                        $slots.default && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots))))) : null;
+                    (0, vue_1.h)("div", { class: [`${mergedClsPrefix}-alert-body`] },
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__text` },
+                            contentNode,
+                            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title-wrap` },
+                                iconNode,
+                                titleNode)),
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__actions-wrap` },
+                            actionsNode,
+                            closeNode)))) : null;
             }
         }));
     }

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

@@ -14,7 +14,6 @@ const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-
 // --u-close-icon-color-hover
 // --u-close-icon-color-pressed
 // --u-icon-color
-// --u-border
 // --u-title-text-color
 // --u-content-text-color
 // --u-line-height
@@ -22,42 +21,22 @@ const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-
 // --u-font-size
 // --u-title-font-weight
 // --u-icon-size
-// --u-icon-margin
 // --u-close-size
 // --u-close-icon-size
 // --u-close-margin
 // --u-padding
-// --u-icon-margin-left
-// --u-icon-margin-right
+// --u-icon-margin
+// --u-close-margin
 exports.default = (0, cssr_1.cB)('alert', `
  line-height: var(--u-line-height);
- border-radius: var(--u-border-radius);
  position: relative;
  transition: background-color .3s var(--u-bezier);
  background-color: var(--u-color);
  text-align: start;
  word-break: break-word;
-`, [(0, cssr_1.cE)('border', `
- border-radius: inherit;
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- transition: border-color .3s var(--u-bezier);
- border: var(--u-border);
- pointer-events: none;
- `), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('alert-body', [(0, cssr_1.cE)('title', `
- padding-right: 24px;
- `)])]), (0, cssr_1.cE)('icon', {
+`, [(0, cssr_1.cE)('icon', {
   color: 'var(--u-icon-color)'
-}), (0, cssr_1.cB)('alert-body', {
-  padding: 'var(--u-padding)'
-}, [(0, cssr_1.cE)('title', {
-  color: 'var(--u-title-text-color)'
-}), (0, cssr_1.cE)('content', {
-  color: 'var(--u-content-text-color)'
-})]), (0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
+}), (0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
   originalTransition: 'transform .3s var(--u-bezier)',
   enterToProps: {
     transform: 'scale(1)'
@@ -66,16 +45,15 @@ exports.default = (0, cssr_1.cB)('alert', `
     transform: 'scale(0.9)'
   }
 }), (0, cssr_1.cE)('icon', `
- position: absolute;
- left: 0;
- top: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  width: var(--u-icon-size);
  height: var(--u-icon-size);
  font-size: var(--u-icon-size);
- margin: var(--u-icon-margin);
+ position: absolute;
+ top: calc((var(--u-title-line-height) - var(--u-icon-size)) / 2);
+ left: 0;
  `), (0, cssr_1.cE)('close', `
  transition:
  color .3s var(--u-bezier),
@@ -83,26 +61,92 @@ exports.default = (0, cssr_1.cB)('alert', `
  position: absolute;
  right: 0;
  top: 0;
- margin: var(--u-close-margin);
- `), (0, cssr_1.cM)('show-icon', [(0, cssr_1.cB)('alert-body', {
-  paddingLeft: 'calc(var(--u-icon-margin-left) + var(--u-icon-size) + var(--u-icon-margin-right))'
-})]),
+ margin: var(--u-padding);
+ width: var(--u-close-icon-size);
+ height: var(--u-close-icon-size);
+ `),
 // fix: https://github.com/tusen-ai/naive-ui/issues/4588
-(0, cssr_1.cM)('right-adjust', [(0, cssr_1.cB)('alert-body', {
-  paddingRight: 'calc(var(--u-close-size) + var(--u-padding) + 2px)'
-})]), (0, cssr_1.cB)('alert-body', `
+(0, cssr_1.cM)('right-adjust', [(0, cssr_1.cB)('alert-body', `
+ padding-right: calc(var(--u-close-size) + var(--u-padding) + 2px);
+ `)]), (0, cssr_1.cM)('show-icon', [(0, cssr_1.cB)('alert-body', [(0, cssr_1.cE)('content, title', `
+ padding-left: calc(var(--u-icon-size) + var(--u-icon-margin));
+ `)])]), (0, cssr_1.cM)('rounded', 'border-radius: var(--u-border-radius);'), (0, cssr_1.cB)('alert-body', `
  border-radius: var(--u-border-radius);
- transition: border-color .3s var(--u-bezier);
- `, [(0, cssr_1.cE)('title', `
+ padding: var(--u-padding);
+ `, [(0, cssr_1.cE)('text', `
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ `), (0, cssr_1.cE)('title', `
  transition: color .3s var(--u-bezier);
- font-size: 16px;
- line-height: 19px;
+ font-size: var(--u-title-font-size);
+ line-height: var(--u-title-line-height);
  font-weight: var(--u-title-font-weight);
- `, [(0, cssr_1.c)('& +', [(0, cssr_1.cE)('content', {
-  marginTop: '9px'
-})])]), (0, cssr_1.cE)('content', {
-  transition: 'color .3s var(--u-bezier)',
-  fontSize: 'var(--u-font-size)'
-})]), (0, cssr_1.cE)('icon', {
-  transition: 'color .3s var(--u-bezier)'
-})]);
+ color: var(--u-title-text-color);
+ `), (0, cssr_1.cE)('title-wrap', `
+ position: relative;
+ max-width: 100%;
+ `), (0, cssr_1.cE)('content', `
+ order: 1;
+ transition: color .3s var(--u-bezier);
+ font-size: var(--u-description-font-size);
+ line-height: var(--u-description-line-height);
+ font-weight: var(--u-description-font-weight);
+ color: var(--u-description-text-color);
+ `, [(0, cssr_1.c)('& +', [(0, cssr_1.cE)('title-wrap', [(0, cssr_1.cE)('title', `
+ margin-bottom: var(--u-description-space);
+ `)])])]), (0, cssr_1.cE)('actions', `
+ margin-top: var(--u-actions-margin-top);
+ `, [(0, cssr_1.c)('> *', `
+ margin-left: var(--u-actions-space);
+ `)]), (0, cssr_1.cE)('actions-wrap', `
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ margin-left: auto;
+ `)]), (0, cssr_1.cE)('icon', `
+ transition: color .3s var(--u-bezier);
+ `), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('alert-body', [(0, cssr_1.cE)('title', `
+ padding-right: var(--u-close-size);
+ `)])]), (0, cssr_1.cM)('horizontal', [(0, cssr_1.cB)('alert-body', `
+ display: flex;
+ align-items: center;
+ `, [(0, cssr_1.cE)('actions', `
+ margin-top: 0px;
+ `), (0, cssr_1.cE)('title', `
+ padding-right: 0px;
+ `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('alert-body', [(0, cssr_1.cE)('title', `
+ padding-right: 0px;
+ `)]), (0, cssr_1.cE)('close', `
+ position: relative;
+ margin: 0 0 0 var(--u-close-margin);
+ `)])]), (0, cssr_1.cM)('banner', [(0, cssr_1.cB)('alert-body', [(0, cssr_1.cE)('text', `
+ align-items: flex-start;
+ flex-direction: row;
+ flex-grow: 1;
+ margin-left: -24px;
+ margin-top: -8px;
+ `), (0, cssr_1.cE)('content', `
+ line-height: 24px;
+ margin-top: 8px;
+ margin-left: 24px;
+ padding-left: 0;
+ `, [(0, cssr_1.c)('& +', [(0, cssr_1.cE)('title-wrap', `
+ max-width: 40%;
+ `, [(0, cssr_1.cE)('title', `
+ margin-bottom: 0;
+ `)])])]), (0, cssr_1.cE)('title-wrap', `
+ margin-top: 8px;
+ margin-left: 24px;
+ flex-shrink: 0;
+ `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('alert-body', [(0, cssr_1.cE)('text', `
+ `)])]), (0, cssr_1.cM)('horizontal', [(0, cssr_1.cB)('alert-body', `
+ display: flex;
+ align-items: flex-start;
+ `, [(0, cssr_1.cE)('text', `
+ padding-right: 0;
+ `), (0, cssr_1.cE)('actions', `
+ margin-top: -8px;
+ margin-bottom: -8px;
+ `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('alert-body', [(0, cssr_1.cE)('actions, text:last-child', `
+ `)])])])])]);

package/lib/alert/styles/_common.d.ts

@@ -1,11 +1,12 @@
 declare const _default: {
     iconMargin: string;
-    iconMarginRtl: string;
-    iconSize: string;
-    closeIconSize: string;
-    closeSize: string;
     closeMargin: string;
-    closeMarginRtl: string;
-    padding: string;
+    actionsMarginTop: string;
+    actionsSpace: string;
+    closeBorderRadius: string;
+    paddingAlert: string;
+    descriptionSpaceAlert: string;
+    paddingBanner: string;
+    descriptionSpaceBanner: string;
 };
 export default _default;

package/lib/alert/styles/_common.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    iconMargin: '11px 8px 0 12px',
-    iconMarginRtl: '11px 12px 0 8px',
-    iconSize: '24px',
-    closeIconSize: '16px',
-    closeSize: '20px',
-    closeMargin: '13px 14px 0 0',
-    closeMarginRtl: '13px 0 0 14px',
-    padding: '13px'
+    iconMargin: '16px',
+    closeMargin: '12px',
+    actionsMarginTop: '24px',
+    actionsSpace: '16px',
+    closeBorderRadius: '50%',
+    // Alert
+    paddingAlert: '24px 24px',
+    descriptionSpaceAlert: '8px',
+    // Banner
+    paddingBanner: '20px 24px',
+    descriptionSpaceBanner: '24px'
 };

package/lib/alert/styles/dark.js

@@ -1,26 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const seemly_1 = require("seemly");
 const common_1 = require("../../_styles/common");
-const _common_1 = __importDefault(require("./_common"));
+const light_1 = require("./light");
 const alertDark = {
     name: 'Alert',
     common: common_1.commonDark,
-    self(vars) {
-        const { lineHeight, borderRadius, fontWeightStrong, dividerColor, inputColor, textColor1, textColor2, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, infoColorSuppl, successColorSuppl, warningColorSuppl, errorColorSuppl, fontSize } = vars;
-        return Object.assign(Object.assign({}, _common_1.default), { fontSize,
-            lineHeight, titleFontWeight: fontWeightStrong, borderRadius, border: `1px solid ${dividerColor}`, color: inputColor, titleTextColor: textColor1, iconColor: textColor2, contentTextColor: textColor2, closeBorderRadius: borderRadius, closeColorHover,
-            closeColorPressed,
-            closeIconColor,
-            closeIconColorHover,
-            closeIconColorPressed, borderInfo: `1px solid ${(0, seemly_1.changeColor)(infoColorSuppl, { alpha: 0.35 })}`, colorInfo: (0, seemly_1.changeColor)(infoColorSuppl, { alpha: 0.25 }), titleTextColorInfo: textColor1, iconColorInfo: infoColorSuppl, contentTextColorInfo: textColor2, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, borderSuccess: `1px solid ${(0, seemly_1.changeColor)(successColorSuppl, {
-                alpha: 0.35
-            })}`, colorSuccess: (0, seemly_1.changeColor)(successColorSuppl, { alpha: 0.25 }), titleTextColorSuccess: textColor1, iconColorSuccess: successColorSuppl, contentTextColorSuccess: textColor2, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, borderWarning: `1px solid ${(0, seemly_1.changeColor)(warningColorSuppl, {
-                alpha: 0.35
-            })}`, colorWarning: (0, seemly_1.changeColor)(warningColorSuppl, { alpha: 0.25 }), titleTextColorWarning: textColor1, iconColorWarning: warningColorSuppl, contentTextColorWarning: textColor2, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, borderError: `1px solid ${(0, seemly_1.changeColor)(errorColorSuppl, { alpha: 0.35 })}`, colorError: (0, seemly_1.changeColor)(errorColorSuppl, { alpha: 0.25 }), titleTextColorError: textColor1, iconColorError: errorColorSuppl, contentTextColorError: textColor2, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed });
-    }
+    self: light_1.self
 };
 exports.default = alertDark;

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

@@ -1,22 +1,31 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins/use-theme';
-declare const self: (vars: ThemeCommonVars) => {
-    fontSize: string;
-    lineHeight: string;
-    titleFontWeight: string;
+export declare const self: (vars: ThemeCommonVars) => {
+    iconSize: string;
+    closeIconSize: string;
+    closeSize: string;
+    titleFontSizeAlert: string;
+    titleLineHeightAlert: string;
+    titleFontWeightAlert: string;
+    descriptionFontSizeAlert: string;
+    descriptionLineHeightAlert: string;
+    descriptionFontWeightAlert: string;
+    titleFontSizeBanner: string;
+    titleLineHeightBanner: string;
+    titleFontWeightBanner: string;
+    descriptionFontSizeBanner: string;
+    descriptionLineHeightBanner: string;
+    descriptionFontWeightBanner: string;
     borderRadius: string;
-    border: string;
     color: string;
     titleTextColor: string;
     iconColor: string;
     contentTextColor: string;
-    closeBorderRadius: string;
     closeColorHover: string;
     closeColorPressed: string;
     closeIconColor: string;
     closeIconColorHover: string;
     closeIconColorPressed: string;
-    borderInfo: string;
     colorInfo: string;
     titleTextColorInfo: string;
     iconColorInfo: string;
@@ -26,7 +35,6 @@ declare const self: (vars: ThemeCommonVars) => {
     closeIconColorInfo: string;
     closeIconColorHoverInfo: string;
     closeIconColorPressedInfo: string;
-    borderSuccess: string;
     colorSuccess: string;
     titleTextColorSuccess: string;
     iconColorSuccess: string;
@@ -36,7 +44,6 @@ declare const self: (vars: ThemeCommonVars) => {
     closeIconColorSuccess: string;
     closeIconColorHoverSuccess: string;
     closeIconColorPressedSuccess: string;
-    borderWarning: string;
     colorWarning: string;
     titleTextColorWarning: string;
     iconColorWarning: string;
@@ -46,7 +53,6 @@ declare const self: (vars: ThemeCommonVars) => {
     closeIconColorWarning: string;
     closeIconColorHoverWarning: string;
     closeIconColorPressedWarning: string;
-    borderError: string;
     colorError: string;
     titleTextColorError: string;
     iconColorError: string;
@@ -56,16 +62,27 @@ declare const self: (vars: ThemeCommonVars) => {
     closeIconColorError: string;
     closeIconColorHoverError: string;
     closeIconColorPressedError: string;
+    colorPrimary: string;
+    titleTextColorPrimary: string;
+    iconColorPrimary: string;
+    contentTextColorPrimary: string;
+    closeColorHoverPrimary: string;
+    closeColorPressedPrimary: string;
+    closeIconColorPrimary: string;
+    closeIconColorHoverPrimary: string;
+    closeIconColorPressedPrimary: string;
     iconMargin: string;
-    iconMarginRtl: string;
-    iconSize: string;
-    closeIconSize: string;
-    closeSize: string;
     closeMargin: string;
-    closeMarginRtl: string;
-    padding: string;
+    actionsMarginTop: string;
+    actionsSpace: string;
+    closeBorderRadius: string;
+    paddingAlert: string;
+    descriptionSpaceAlert: string;
+    paddingBanner: string;
+    descriptionSpaceBanner: string;
 };
 export type AlertThemeVars = ReturnType<typeof self>;
 declare const alertLight: Theme<'Alert', AlertThemeVars>;
+export { self as alertSelf };
 export default alertLight;
 export type AlertTheme = typeof alertLight;

package/lib/alert/styles/light.js

@@ -3,21 +3,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const seemly_1 = require("seemly");
+exports.alertSelf = exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const _common_1 = __importDefault(require("./_common"));
 const self = (vars) => {
-    const { lineHeight, borderRadius, fontWeightStrong, baseColor, dividerColor, actionColor, textColor1, textColor2, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, infoColor, successColor, warningColor, errorColor, fontSize } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { fontSize,
-        lineHeight, titleFontWeight: fontWeightStrong, borderRadius, border: `1px solid ${dividerColor}`, color: actionColor, titleTextColor: textColor1, iconColor: textColor2, contentTextColor: textColor2, closeBorderRadius: borderRadius, closeColorHover,
-        closeColorPressed,
-        closeIconColor,
-        closeIconColorHover,
-        closeIconColorPressed, borderInfo: `1px solid ${(0, seemly_1.composite)(baseColor, (0, seemly_1.changeColor)(infoColor, { alpha: 0.25 }))}`, colorInfo: (0, seemly_1.composite)(baseColor, (0, seemly_1.changeColor)(infoColor, { alpha: 0.08 })), titleTextColorInfo: textColor1, iconColorInfo: infoColor, contentTextColorInfo: textColor2, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, borderSuccess: `1px solid ${(0, seemly_1.composite)(baseColor, (0, seemly_1.changeColor)(successColor, { alpha: 0.25 }))}`, colorSuccess: (0, seemly_1.composite)(baseColor, (0, seemly_1.changeColor)(successColor, { alpha: 0.08 })), titleTextColorSuccess: textColor1, iconColorSuccess: successColor, contentTextColorSuccess: textColor2, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, borderWarning: `1px solid ${(0, seemly_1.composite)(baseColor, (0, seemly_1.changeColor)(warningColor, { alpha: 0.33 }))}`, colorWarning: (0, seemly_1.composite)(baseColor, (0, seemly_1.changeColor)(warningColor, { alpha: 0.08 })), titleTextColorWarning: textColor1, iconColorWarning: warningColor, contentTextColorWarning: textColor2, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, borderError: `1px solid ${(0, seemly_1.composite)(baseColor, (0, seemly_1.changeColor)(errorColor, { alpha: 0.25 }))}`, colorError: (0, seemly_1.composite)(baseColor, (0, seemly_1.changeColor)(errorColor, { alpha: 0.08 })), titleTextColorError: textColor1, iconColorError: errorColor, contentTextColorError: textColor2, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed });
+    const { iconMedium, closeMedium, fontTitleSmall, lineHeightTitleSmall, fontWeightStrong, fontWeightBold, fontBodyLarge, lineHeightBodyLarge, fontWeight, borderRadiusLarge, staticBlack, staticWhite, transparencyTertiary, transparencyQuinary, transparencySecondary, transparencyPrimary, elementsTertiary, textPrimary, staticGreen, brandSecondary600, staticRed, brandPrimary500 } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { iconSize: iconMedium, closeIconSize: iconMedium, closeSize: closeMedium, titleFontSizeAlert: fontTitleSmall, titleLineHeightAlert: lineHeightTitleSmall, titleFontWeightAlert: fontWeightStrong, descriptionFontSizeAlert: fontBodyLarge, descriptionLineHeightAlert: lineHeightBodyLarge, descriptionFontWeightAlert: fontWeight, titleFontSizeBanner: fontBodyLarge, titleLineHeightBanner: lineHeightBodyLarge, titleFontWeightBanner: fontWeightBold, descriptionFontSizeBanner: fontBodyLarge, descriptionLineHeightBanner: lineHeightBodyLarge, descriptionFontWeightBanner: fontWeight, borderRadius: borderRadiusLarge, 
+        // Default
+        color: staticBlack, titleTextColor: staticWhite, iconColor: staticWhite, contentTextColor: staticWhite, closeColorHover: transparencyTertiary, closeColorPressed: transparencyQuinary, closeIconColor: staticWhite, closeIconColorHover: staticWhite, closeIconColorPressed: staticWhite, 
+        // Info
+        colorInfo: elementsTertiary, titleTextColorInfo: textPrimary, iconColorInfo: textPrimary, contentTextColorInfo: textPrimary, closeColorHoverInfo: transparencySecondary, closeColorPressedInfo: transparencyPrimary, closeIconColorInfo: textPrimary, closeIconColorHoverInfo: textPrimary, closeIconColorPressedInfo: textPrimary, 
+        // Success
+        colorSuccess: staticGreen, titleTextColorSuccess: staticWhite, iconColorSuccess: staticWhite, contentTextColorSuccess: staticWhite, closeColorHoverSuccess: transparencyTertiary, closeColorPressedSuccess: transparencyQuinary, closeIconColorSuccess: staticWhite, closeIconColorHoverSuccess: staticWhite, closeIconColorPressedSuccess: staticWhite, 
+        // Warning
+        colorWarning: brandSecondary600, titleTextColorWarning: staticBlack, iconColorWarning: staticBlack, contentTextColorWarning: staticBlack, closeColorHoverWarning: transparencyTertiary, closeColorPressedWarning: transparencyQuinary, closeIconColorWarning: staticBlack, closeIconColorHoverWarning: staticBlack, closeIconColorPressedWarning: staticBlack, 
+        // Error
+        colorError: staticRed, titleTextColorError: staticWhite, iconColorError: staticWhite, contentTextColorError: staticWhite, closeColorHoverError: transparencyTertiary, closeColorPressedError: transparencyQuinary, closeIconColorError: staticWhite, closeIconColorHoverError: staticWhite, closeIconColorPressedError: staticWhite, 
+        // Primary
+        colorPrimary: brandPrimary500, titleTextColorPrimary: staticWhite, iconColorPrimary: staticWhite, contentTextColorPrimary: staticWhite, closeColorHoverPrimary: transparencyTertiary, closeColorPressedPrimary: transparencyQuinary, closeIconColorPrimary: staticWhite, closeIconColorHoverPrimary: staticWhite, closeIconColorPressedPrimary: staticWhite });
 };
+exports.self = self;
+exports.alertSelf = exports.self;
 const alertLight = {
     name: 'Alert',
     common: common_1.commonLight,
-    self
+    self: exports.self
 };
 exports.default = alertLight;

package/lib/alert/styles/types.d.ts

@@ -0,0 +1,4 @@
+import { ExtractWithoutPostfix } from '../../_utils';
+import { AlertThemeVars } from './light';
+export type RewritePostfix = 'Warning' | 'Info' | 'Success' | 'Error' | 'Primary';
+export type RewriteStyle = ExtractWithoutPostfix<keyof AlertThemeVars, RewritePostfix>;

package/lib/{calendar/styles/_common.js → alert/styles/types.js}

@@ -1,5 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    titleFontSize: '22px'
-};