@uzum-tech/ui 0.1.2 → 1.0.0

package/es/message/src/MessageProvider.js

@@ -9,7 +9,7 @@ export const messageProviderProps = Object.assign(Object.assign({}, useTheme.pro
         default: 3000
     }, keepAliveOnHover: Boolean, max: Number, placement: {
         type: String,
-        default: 'top'
+        default: 'top-right'
     }, closable: Boolean, containerStyle: [String, Object] });
 export default defineComponent({
     name: 'MessageProvider',

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

@@ -1,5 +1,4 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
-import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.cssr';
 import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-in-height-expand.cssr';
 // vars:
 // --u-margin
@@ -20,7 +19,6 @@ import { fadeInHeightExpandTransition } from '../../../_styles/transitions/fade-
 // --u-icon-color-loading
 // --u-close-size
 // --u-close-icon-size
-// --u-close-margin
 // --u-close-color-hover
 // --u-close-color-pressed
 // --u-close-border-radius
@@ -45,7 +43,7 @@ export default c([cB('message-wrapper', `
 })]), cB('message', `
  box-sizing: border-box;
  display: flex;
- align-items: center;
+ align-items: flex-start;
  transition:
  color .3s var(--u-bezier),
  box-shadow .3s var(--u-bezier),
@@ -57,7 +55,8 @@ export default c([cB('message-wrapper', `
  border-radius: var(--u-border-radius);
  flex-wrap: nowrap;
  overflow: hidden;
- max-width: var(--u-max-width);
+ width: var(--u-min-width);
+ max-width: min(var(--u-max-width), calc(100vw - 32px));
  color: var(--u-text-color);
  background-color: var(--u-color);
  box-shadow: var(--u-box-shadow);
@@ -65,6 +64,8 @@ export default c([cB('message-wrapper', `
  display: inline-block;
  line-height: var(--u-line-height);
  font-size: var(--u-font-size);
+ font-weight: var(--u-font-weight);
+ padding-right: 16px;
  `), cE('icon', `
  position: relative;
  margin: var(--u-icon-margin);
@@ -72,21 +73,20 @@ export default c([cB('message-wrapper', `
  width: var(--u-icon-size);
  font-size: var(--u-icon-size);
  flex-shrink: 0;
- `, [['default', 'info', 'success', 'warning', 'error', 'loading'].map(type => cM(`${type}-type`, [c('> *', `
- color: var(--u-icon-color-${type});
- transition: color .3s var(--u-bezier);
- `)])), c('> *', `
+ `, [c('> *', `
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
- `, [iconSwitchTransition()])]), cE('close', `
- margin: var(--u-close-margin);
+ `)]), cE('close', `
+ margin-left: auto;
  transition:
  background-color .3s var(--u-bezier),
  color .3s var(--u-bezier);
  flex-shrink: 0;
+ width: var(--u-c-lose-icon-size);
+ height: var(--u-c-lose-icon-size);
  `, [c('&:hover', `
  color: var(--u-close-icon-color-hover);
  `), c('&:active', `

package/es/message/styles/_common.d.ts

@@ -4,10 +4,5 @@ declare const _default: {
     maxWidth: string;
     minWidth: string;
     iconMargin: string;
-    closeMargin: string;
-    closeSize: string;
-    closeIconSize: string;
-    iconSize: string;
-    fontSize: string;
 };
 export default _default;

package/es/message/styles/_common.js

@@ -1,12 +1,7 @@
 export default {
     margin: '0 0 8px 0',
-    padding: '10px 20px',
+    padding: '16px',
     maxWidth: '720px',
-    minWidth: '420px',
-    iconMargin: '0 10px 0 0',
-    closeMargin: '0 0 0 10px',
-    closeSize: '20px',
-    closeIconSize: '16px',
-    iconSize: '20px',
-    fontSize: '14px'
+    minWidth: '480px',
+    iconMargin: '0 16px 0 0'
 };

package/es/message/styles/light.d.ts

@@ -1,74 +1,67 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins/use-theme';
 export declare const self: (vars: ThemeCommonVars) => {
+    closeSize: string;
+    closeIconSize: string;
+    iconSize: string;
+    fontSize: string;
+    fontWeight: string;
     closeBorderRadius: string;
-    textColor: string;
-    textColorInfo: string;
-    textColorSuccess: string;
-    textColorError: string;
-    textColorWarning: string;
-    textColorLoading: string;
+    lineHeight: string;
+    borderRadius: string;
     color: string;
-    colorInfo: string;
-    colorSuccess: string;
-    colorError: string;
-    colorWarning: string;
-    colorLoading: string;
-    boxShadow: string;
-    boxShadowInfo: string;
-    boxShadowSuccess: string;
-    boxShadowError: string;
-    boxShadowWarning: string;
-    boxShadowLoading: string;
+    textColor: string;
     iconColor: string;
-    iconColorInfo: string;
-    iconColorSuccess: string;
-    iconColorWarning: string;
-    iconColorError: string;
-    iconColorLoading: string;
     closeColorHover: string;
     closeColorPressed: string;
     closeIconColor: string;
     closeIconColorHover: string;
     closeIconColorPressed: string;
+    colorInfo: string;
+    textColorInfo: string;
+    iconColorInfo: string;
     closeColorHoverInfo: string;
     closeColorPressedInfo: string;
     closeIconColorInfo: string;
     closeIconColorHoverInfo: string;
     closeIconColorPressedInfo: string;
+    colorSuccess: string;
+    textColorSuccess: string;
+    iconColorSuccess: string;
     closeColorHoverSuccess: string;
     closeColorPressedSuccess: string;
     closeIconColorSuccess: string;
     closeIconColorHoverSuccess: string;
     closeIconColorPressedSuccess: string;
+    colorError: string;
+    textColorError: string;
+    iconColorError: string;
     closeColorHoverError: string;
     closeColorPressedError: string;
     closeIconColorError: string;
     closeIconColorHoverError: string;
     closeIconColorPressedError: string;
+    colorWarning: string;
+    textColorWarning: string;
+    iconColorWarning: string;
     closeColorHoverWarning: string;
     closeColorPressedWarning: string;
     closeIconColorWarning: string;
     closeIconColorHoverWarning: string;
     closeIconColorPressedWarning: string;
+    colorLoading: string;
+    textColorLoading: string;
+    iconColorLoading: string;
     closeColorHoverLoading: string;
     closeColorPressedLoading: string;
     closeIconColorLoading: string;
     closeIconColorHoverLoading: string;
     closeIconColorPressedLoading: string;
-    loadingColor: string;
-    lineHeight: string;
-    borderRadius: string;
     margin: string;
     padding: string;
     maxWidth: string;
     minWidth: string;
     iconMargin: string;
-    closeMargin: string;
-    closeSize: string;
-    closeIconSize: string;
-    iconSize: string;
-    fontSize: string;
 };
 export type MessageThemeVars = ReturnType<typeof self>;
 declare const messageLight: Theme<'Message', MessageThemeVars>;

package/es/message/styles/light.js

@@ -1,13 +1,20 @@
 import commonVariables from './_common';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { textColor2, closeIconColor, closeIconColorHover, closeIconColorPressed, infoColor, successColor, errorColor, warningColor, popoverColor, boxShadow2, primaryColor, lineHeight, borderRadius, closeColorHover, closeColorPressed } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { closeBorderRadius: borderRadius, textColor: textColor2, textColorInfo: textColor2, textColorSuccess: textColor2, textColorError: textColor2, textColorWarning: textColor2, textColorLoading: textColor2, color: popoverColor, colorInfo: popoverColor, colorSuccess: popoverColor, colorError: popoverColor, colorWarning: popoverColor, colorLoading: popoverColor, boxShadow: boxShadow2, boxShadowInfo: boxShadow2, boxShadowSuccess: boxShadow2, boxShadowError: boxShadow2, boxShadowWarning: boxShadow2, boxShadowLoading: boxShadow2, iconColor: textColor2, iconColorInfo: infoColor, iconColorSuccess: successColor, iconColorWarning: warningColor, iconColorError: errorColor, iconColorLoading: primaryColor, closeColorHover,
-        closeColorPressed,
-        closeIconColor,
-        closeIconColorHover,
-        closeIconColorPressed, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, closeColorHoverLoading: closeColorHover, closeColorPressedLoading: closeColorPressed, closeIconColorLoading: closeIconColor, closeIconColorHoverLoading: closeIconColorHover, closeIconColorPressedLoading: closeIconColorPressed, loadingColor: primaryColor, lineHeight,
-        borderRadius });
+    const { closeMedium, iconMedium, fontBodyLarge, lineHeightBodyLarge, borderRadiusLarge, fontWeightStrong, transparencyTertiary, transparencyQuinary, staticWhite, staticBlack, staticGreen, staticRed, brandSecondary600 } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { closeSize: closeMedium, closeIconSize: iconMedium, iconSize: iconMedium, fontSize: fontBodyLarge, fontWeight: fontWeightStrong, closeBorderRadius: '100%', lineHeight: lineHeightBodyLarge, borderRadius: borderRadiusLarge, 
+        // Default
+        color: staticBlack, textColor: staticWhite, iconColor: staticWhite, closeColorHover: transparencyTertiary, closeColorPressed: transparencyQuinary, closeIconColor: staticWhite, closeIconColorHover: staticWhite, closeIconColorPressed: staticWhite, 
+        // Info
+        colorInfo: staticBlack, textColorInfo: staticWhite, iconColorInfo: staticWhite, closeColorHoverInfo: transparencyTertiary, closeColorPressedInfo: transparencyQuinary, closeIconColorInfo: staticWhite, closeIconColorHoverInfo: staticWhite, closeIconColorPressedInfo: staticWhite, 
+        // Success
+        colorSuccess: staticGreen, textColorSuccess: staticWhite, iconColorSuccess: staticWhite, closeColorHoverSuccess: transparencyTertiary, closeColorPressedSuccess: transparencyQuinary, closeIconColorSuccess: staticWhite, closeIconColorHoverSuccess: staticWhite, closeIconColorPressedSuccess: staticWhite, 
+        // Error
+        colorError: staticRed, textColorError: staticWhite, iconColorError: staticWhite, closeColorHoverError: transparencyTertiary, closeColorPressedError: transparencyQuinary, closeIconColorError: staticWhite, closeIconColorHoverError: staticWhite, closeIconColorPressedError: staticWhite, 
+        // Warning
+        colorWarning: brandSecondary600, textColorWarning: staticBlack, iconColorWarning: staticBlack, closeColorHoverWarning: transparencyTertiary, closeColorPressedWarning: transparencyQuinary, closeIconColorWarning: staticBlack, closeIconColorHoverWarning: staticBlack, closeIconColorPressedWarning: staticBlack, 
+        // Loading
+        colorLoading: staticBlack, textColorLoading: staticWhite, iconColorLoading: staticWhite, closeColorHoverLoading: transparencyTertiary, closeColorPressedLoading: transparencyQuinary, closeIconColorLoading: staticWhite, closeIconColorHoverLoading: staticWhite, closeIconColorPressedLoading: staticWhite });
 };
 const messageLight = {
     name: 'Message',

package/es/message/styles/types.d.ts

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

package/es/message/styles/types.js

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