@uzum-tech/ui 0.1.2 → 1.0.0

package/es/alert/src/Alert.js

@@ -1,10 +1,9 @@
 import { h, ref, computed, defineComponent, mergeProps, watchEffect } from 'vue';
-import { getMargin } from 'seemly';
-import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
+import { InfoOutlineIcon } from '../../_internal/icons';
 import { UFadeInExpandTransition, UBaseClose, UBaseIcon } from '../../_internal';
 import { useRtl } from '../../_mixins/use-rtl';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { createKey, resolveSlot, resolveWrappedSlot, warnOnce } from '../../_utils';
+import { createKey, resolveSlot, warnOnce } from '../../_utils';
 import { alertLight } from '../styles';
 import style from './styles/index.cssr';
 export const alertProps = Object.assign(Object.assign({}, useTheme.props), { title: String, showIcon: {
@@ -13,10 +12,13 @@ export const alertProps = Object.assign(Object.assign({}, useTheme.props), { tit
     }, 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 });
 export default defineComponent({
@@ -31,41 +33,45 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('Alert', '-alert', style, alertLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('Alert', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = 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 } = getMargin(iconMargin);
+            const { type, layoutType } = props;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-color': self[createKey('color', type)],
-                '--u-close-icon-size': closeIconSize,
-                '--u-close-border-radius': closeBorderRadius,
+                '--u-padding': self[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[createKey('closeColorHover', type)],
                 '--u-close-color-pressed': self[createKey('closeColorPressed', type)],
                 '--u-close-icon-color': self[createKey('closeIconColor', type)],
                 '--u-close-icon-color-hover': self[createKey('closeIconColorHover', type)],
                 '--u-close-icon-color-pressed': self[createKey('closeIconColorPressed', type)],
+                // Icon
                 '--u-icon-color': self[createKey('iconColor', type)],
-                '--u-border': self[createKey('border', type)],
+                '--u-icon-size': self.iconSize,
+                '--u-icon-margin': self.iconMargin,
+                '--u-close-margin': self.closeMargin,
+                // Title
                 '--u-title-text-color': self[createKey('titleTextColor', type)],
-                '--u-content-text-color': self[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[createKey('titleFontSize', layoutType)],
+                '--u-title-line-height': self[createKey('titleLineHeight', layoutType)],
+                '--u-title-font-weight': self[createKey('titleFontWeight', layoutType)],
+                // Description
+                '--u-description-text-color': self[createKey('contentTextColor', type)],
+                '--u-description-font-size': self[createKey('descriptionFontSize', layoutType)],
+                '--u-description-line-height': self[createKey('descriptionLineHeight', layoutType)],
+                '--u-description-font-weight': self[createKey('descriptionFontWeight', layoutType)],
+                '--u-description-space': self[createKey('descriptionSpace', layoutType)],
+                // Actions
+                '--u-actions-margin-top': self.actionsMarginTop,
+                '--u-actions-space': self.actionsSpace
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -96,7 +102,6 @@ export default defineComponent({
         return {
             rtlEnabled: rtlEnabledRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            mergedBordered: mergedBorderedRef,
             visible: visibleRef,
             handleCloseClick,
             handleAfterLeave,
@@ -111,12 +116,17 @@ export default defineComponent({
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h(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 &&
@@ -127,37 +137,23 @@ export default defineComponent({
                     style: this.cssVars,
                     role: 'alert'
                 };
+                const closeNode = this.closable && (h(UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick }));
+                const iconNode = this.showIcon && (h("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, resolveSlot($slots.icon, () => [
+                    h(UBaseIcon, { clsPrefix: mergedClsPrefix }, () => h(InfoOutlineIcon, null))
+                ])));
+                const contentNode = $slots.default && (h("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots.default()));
+                const titleNode = ($slots.header || this.title) && (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 && (h("div", { class: `${mergedClsPrefix}-alert-body__actions` }, $slots.actions()));
                 return this.visible ? (h("div", Object.assign({}, mergeProps(this.$attrs, attrs)),
-                    this.closable && (h(UBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })),
-                    this.bordered && (h("div", { class: `${mergedClsPrefix}-alert__border` })),
-                    this.showIcon && (h("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, resolveSlot($slots.icon, () => [
-                        h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                            default: () => {
-                                switch (this.type) {
-                                    case 'success':
-                                        return h(SuccessIcon, null);
-                                    case 'info':
-                                        return h(InfoIcon, null);
-                                    case 'warning':
-                                        return h(WarningIcon, null);
-                                    case 'error':
-                                        return h(ErrorIcon, null);
-                                    default:
-                                        return null;
-                                }
-                            }
-                        })
-                    ]))),
-                    h("div", { class: [
-                            `${mergedClsPrefix}-alert-body`,
-                            this.mergedBordered &&
-                                `${mergedClsPrefix}-alert-body--bordered`
-                        ] },
-                        resolveWrappedSlot($slots.header, (children) => {
-                            const mergedChildren = children || this.title;
-                            return mergedChildren ? (h("div", { class: `${mergedClsPrefix}-alert-body__title` }, mergedChildren)) : null;
-                        }),
-                        $slots.default && (h("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots))))) : null;
+                    h("div", { class: [`${mergedClsPrefix}-alert-body`] },
+                        h("div", { class: `${mergedClsPrefix}-alert-body__text` },
+                            contentNode,
+                            h("div", { class: `${mergedClsPrefix}-alert-body__title-wrap` },
+                                iconNode,
+                                titleNode)),
+                        h("div", { class: `${mergedClsPrefix}-alert-body__actions-wrap` },
+                            actionsNode,
+                            closeNode)))) : null;
             }
         }));
     }

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

@@ -9,7 +9,6 @@ import { fadeInHeightExpandTransition } from '../../../_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
@@ -17,42 +16,22 @@ import { fadeInHeightExpandTransition } from '../../../_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
 export default 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;
-`, [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;
- `), cM('closable', [cB('alert-body', [cE('title', `
- padding-right: 24px;
- `)])]), cE('icon', {
+`, [cE('icon', {
   color: 'var(--u-icon-color)'
-}), cB('alert-body', {
-  padding: 'var(--u-padding)'
-}, [cE('title', {
-  color: 'var(--u-title-text-color)'
-}), cE('content', {
-  color: 'var(--u-content-text-color)'
-})]), fadeInHeightExpandTransition({
+}), fadeInHeightExpandTransition({
   originalTransition: 'transform .3s var(--u-bezier)',
   enterToProps: {
     transform: 'scale(1)'
@@ -61,16 +40,15 @@ export default cB('alert', `
     transform: 'scale(0.9)'
   }
 }), 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;
  `), cE('close', `
  transition:
  color .3s var(--u-bezier),
@@ -78,26 +56,92 @@ export default cB('alert', `
  position: absolute;
  right: 0;
  top: 0;
- margin: var(--u-close-margin);
- `), cM('show-icon', [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
-cM('right-adjust', [cB('alert-body', {
-  paddingRight: 'calc(var(--u-close-size) + var(--u-padding) + 2px)'
-})]), cB('alert-body', `
+cM('right-adjust', [cB('alert-body', `
+ padding-right: calc(var(--u-close-size) + var(--u-padding) + 2px);
+ `)]), cM('show-icon', [cB('alert-body', [cE('content, title', `
+ padding-left: calc(var(--u-icon-size) + var(--u-icon-margin));
+ `)])]), cM('rounded', 'border-radius: var(--u-border-radius);'), cB('alert-body', `
  border-radius: var(--u-border-radius);
- transition: border-color .3s var(--u-bezier);
- `, [cE('title', `
+ padding: var(--u-padding);
+ `, [cE('text', `
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ `), 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);
- `, [c('& +', [cE('content', {
-  marginTop: '9px'
-})])]), cE('content', {
-  transition: 'color .3s var(--u-bezier)',
-  fontSize: 'var(--u-font-size)'
-})]), cE('icon', {
-  transition: 'color .3s var(--u-bezier)'
-})]);
+ color: var(--u-title-text-color);
+ `), cE('title-wrap', `
+ position: relative;
+ max-width: 100%;
+ `), 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);
+ `, [c('& +', [cE('title-wrap', [cE('title', `
+ margin-bottom: var(--u-description-space);
+ `)])])]), cE('actions', `
+ margin-top: var(--u-actions-margin-top);
+ `, [c('> *', `
+ margin-left: var(--u-actions-space);
+ `)]), cE('actions-wrap', `
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ margin-left: auto;
+ `)]), cE('icon', `
+ transition: color .3s var(--u-bezier);
+ `), cM('closable', [cB('alert-body', [cE('title', `
+ padding-right: var(--u-close-size);
+ `)])]), cM('horizontal', [cB('alert-body', `
+ display: flex;
+ align-items: center;
+ `, [cE('actions', `
+ margin-top: 0px;
+ `), cE('title', `
+ padding-right: 0px;
+ `)]), cM('closable', [cB('alert-body', [cE('title', `
+ padding-right: 0px;
+ `)]), cE('close', `
+ position: relative;
+ margin: 0 0 0 var(--u-close-margin);
+ `)])]), cM('banner', [cB('alert-body', [cE('text', `
+ align-items: flex-start;
+ flex-direction: row;
+ flex-grow: 1;
+ margin-left: -24px;
+ margin-top: -8px;
+ `), cE('content', `
+ line-height: 24px;
+ margin-top: 8px;
+ margin-left: 24px;
+ padding-left: 0;
+ `, [c('& +', [cE('title-wrap', `
+ max-width: 40%;
+ `, [cE('title', `
+ margin-bottom: 0;
+ `)])])]), cE('title-wrap', `
+ margin-top: 8px;
+ margin-left: 24px;
+ flex-shrink: 0;
+ `)]), cM('closable', [cB('alert-body', [cE('text', `
+ `)])]), cM('horizontal', [cB('alert-body', `
+ display: flex;
+ align-items: flex-start;
+ `, [cE('text', `
+ padding-right: 0;
+ `), cE('actions', `
+ margin-top: -8px;
+ margin-bottom: -8px;
+ `)]), cM('closable', [cB('alert-body', [cE('actions, text:last-child', `
+ `)])])])])]);

package/es/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/es/alert/styles/_common.js

@@ -1,10 +1,13 @@
 export 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/es/alert/styles/dark.js

@@ -1,21 +1,8 @@
-import { changeColor } from 'seemly';
 import { commonDark } from '../../_styles/common';
-import commonVars from './_common';
+import { self } from './light';
 const alertDark = {
     name: 'Alert',
     common: 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({}, commonVars), { 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 ${changeColor(infoColorSuppl, { alpha: 0.35 })}`, colorInfo: changeColor(infoColorSuppl, { alpha: 0.25 }), titleTextColorInfo: textColor1, iconColorInfo: infoColorSuppl, contentTextColorInfo: textColor2, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, borderSuccess: `1px solid ${changeColor(successColorSuppl, {
-                alpha: 0.35
-            })}`, colorSuccess: changeColor(successColorSuppl, { alpha: 0.25 }), titleTextColorSuccess: textColor1, iconColorSuccess: successColorSuppl, contentTextColorSuccess: textColor2, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, borderWarning: `1px solid ${changeColor(warningColorSuppl, {
-                alpha: 0.35
-            })}`, colorWarning: changeColor(warningColorSuppl, { alpha: 0.25 }), titleTextColorWarning: textColor1, iconColorWarning: warningColorSuppl, contentTextColorWarning: textColor2, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, borderError: `1px solid ${changeColor(errorColorSuppl, { alpha: 0.35 })}`, colorError: changeColor(errorColorSuppl, { alpha: 0.25 }), titleTextColorError: textColor1, iconColorError: errorColorSuppl, contentTextColorError: textColor2, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed });
-    }
+    self
 };
 export default alertDark;

package/es/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/es/alert/styles/light.js

@@ -1,18 +1,25 @@
-import { changeColor, composite } from 'seemly';
 import { commonLight } from '../../_styles/common';
 import commonVars from './_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({}, commonVars), { 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 ${composite(baseColor, changeColor(infoColor, { alpha: 0.25 }))}`, colorInfo: composite(baseColor, changeColor(infoColor, { alpha: 0.08 })), titleTextColorInfo: textColor1, iconColorInfo: infoColor, contentTextColorInfo: textColor2, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, borderSuccess: `1px solid ${composite(baseColor, changeColor(successColor, { alpha: 0.25 }))}`, colorSuccess: composite(baseColor, changeColor(successColor, { alpha: 0.08 })), titleTextColorSuccess: textColor1, iconColorSuccess: successColor, contentTextColorSuccess: textColor2, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, borderWarning: `1px solid ${composite(baseColor, changeColor(warningColor, { alpha: 0.33 }))}`, colorWarning: composite(baseColor, changeColor(warningColor, { alpha: 0.08 })), titleTextColorWarning: textColor1, iconColorWarning: warningColor, contentTextColorWarning: textColor2, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, borderError: `1px solid ${composite(baseColor, changeColor(errorColor, { alpha: 0.25 }))}`, colorError: composite(baseColor, changeColor(errorColor, { alpha: 0.08 })), titleTextColorError: textColor1, iconColorError: errorColor, contentTextColorError: textColor2, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed });
+export const self = (vars) => {
+    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({}, commonVars), { 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 });
 };
 const alertLight = {
     name: 'Alert',
     common: commonLight,
     self
 };
+export { self as alertSelf };
 export default alertLight;

package/es/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/es/alert/styles/types.js

@@ -0,0 +1 @@
+export {};