@uzum-tech/ui 0.1.1 → 1.0.0

package/lib/card/src/Card.js

@@ -23,10 +23,6 @@ exports.cardBaseProps = {
         type: [Boolean, Object],
         default: false
     },
-    size: {
-        type: String,
-        default: 'medium'
-    },
     bordered: {
         type: Boolean,
         default: true
@@ -41,7 +37,10 @@ exports.cardBaseProps = {
     }
 };
 exports.cardBasePropKeys = (0, _utils_1.keysOf)(exports.cardBaseProps);
-exports.cardProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), exports.cardBaseProps);
+exports.cardProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), exports.cardBaseProps), { size: {
+        type: String,
+        default: 'medium'
+    } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Card',
     props: exports.cardProps,
@@ -56,39 +55,37 @@ exports.default = (0, vue_1.defineComponent)({
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Card', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { size } = props;
-            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, lineHeight, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeBorderRadius, closeIconSize, closeSize, boxShadow, colorPopover, colorEmbedded, colorEmbeddedModal, colorEmbeddedPopover, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { color, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeBorderRadius, closeIconSize, closeSize, boxShadow, colorEmbedded, fontWeight, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('lineHeight', size)]: lineHeight, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize, [(0, _utils_1.createKey)('titleLineHeight', size)]: titleLineHeight }, common: { cubicBezierEaseInOut } } = themeRef.value;
             const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = (0, seemly_1.getPadding)(padding);
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-border-radius': borderRadius,
                 '--u-color': color,
-                '--u-color-modal': colorModal,
-                '--u-color-popover': colorPopover,
                 '--u-color-embedded': colorEmbedded,
-                '--u-color-embedded-modal': colorEmbeddedModal,
-                '--u-color-embedded-popover': colorEmbeddedPopover,
                 '--u-color-target': colorTarget,
-                '--u-text-color': textColor,
-                '--u-line-height': lineHeight,
                 '--u-action-color': actionColor,
                 '--u-title-text-color': titleTextColor,
                 '--u-title-font-weight': titleFontWeight,
+                '--u-title-line-height': titleLineHeight,
+                '--u-title-font-size': titleFontSize,
                 '--u-close-icon-color': closeIconColor,
                 '--u-close-icon-color-hover': closeIconColorHover,
                 '--u-close-icon-color-pressed': closeIconColorPressed,
                 '--u-close-color-hover': closeColorHover,
                 '--u-close-color-pressed': closeColorPressed,
+                '--u-close-size': closeSize,
+                '--u-close-icon-size': closeIconSize,
+                '--u-close-border-radius': closeBorderRadius,
                 '--u-border-color': borderColor,
                 '--u-box-shadow': boxShadow,
                 // size
                 '--u-padding-top': paddingTop,
                 '--u-padding-bottom': paddingBottom,
                 '--u-padding-left': paddingLeft,
+                '--u-text-color': textColor,
                 '--u-font-size': fontSize,
-                '--u-title-font-size': titleFontSize,
-                '--u-close-size': closeSize,
-                '--u-close-icon-size': closeIconSize,
-                '--u-close-border-radius': closeBorderRadius
+                '--u-line-height': lineHeight,
+                '--u-font-weight': fontWeight
             };
         });
         const themeClassHandle = inlineThemeDisabled

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

@@ -8,8 +8,6 @@ const cssr_1 = require("../../../_utils/cssr");
 // --u-bezier
 // --u-border-radius
 // --u-color
-// --u-color-modal
-// --u-color-popover
 // --u-text-color
 // --u-line-height
 // --u-padding-top
@@ -30,11 +28,10 @@ const cssr_1 = require("../../../_utils/cssr");
 // --u-border-color
 // --u-box-shadow
 // --u-color-embedded
-// --u-color-embedded-modal
-// --u-color-embedded-popover
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
  font-size: var(--u-font-size);
  line-height: var(--u-line-height);
+ font-weight: var(--u-font-weight);
  display: flex;
  flex-direction: column;
  width: 100%;
@@ -49,9 +46,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
  background-color .3s var(--u-bezier),
  box-shadow .3s var(--u-bezier),
  border-color .3s var(--u-bezier);
- `, [(0, cssr_1.asModal)({
-  background: 'var(--u-color-modal)'
-}), (0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--u-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
+ `, [(0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--u-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
   paddingTop: 'var(--u-padding-bottom)'
 })])]), (0, cssr_1.cM)('content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', `
  margin: 0 var(--u-padding-left);
@@ -65,13 +60,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
  box-sizing: border-box;
  display: flex;
  align-items: center;
- font-size: var(--u-title-font-size);
  padding:
  var(--u-padding-top)
  var(--u-padding-left)
  var(--u-padding-bottom)
  var(--u-padding-left);
  `, [(0, cssr_1.cE)('main', `
+ font-size: var(--u-title-font-size);
+ line-height: var(--u-title-line-height);
  font-weight: var(--u-title-font-weight);
  transition: color .3s var(--u-bezier);
  flex: 1;
@@ -80,8 +76,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
  `), (0, cssr_1.cE)('extra', `
  display: flex;
  align-items: center;
- font-size: var(--u-font-size);
- font-weight: 400;
  transition: color .3s var(--u-bezier);
  color: var(--u-text-color);
  `), (0, cssr_1.cE)('close', `
@@ -128,12 +122,4 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
   borderTop: '1px solid var(--u-border-color)'
 })])])]), (0, cssr_1.cM)('embedded', `
  background-color: var(--u-color-embedded);
- `)]), (0, cssr_1.insideModal)((0, cssr_1.cB)('card', `
- background: var(--u-color-modal);
- `, [(0, cssr_1.cM)('embedded', `
- background-color: var(--u-color-embedded-modal);
- `)])), (0, cssr_1.insidePopover)((0, cssr_1.cB)('card', `
- background: var(--u-color-popover);
- `, [(0, cssr_1.cM)('embedded', `
- background-color: var(--u-color-embedded-popover);
- `)]))]);
+ `)])]);

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

@@ -3,11 +3,5 @@ declare const _default: {
     paddingMedium: string;
     paddingLarge: string;
     paddingHuge: string;
-    titleFontSizeSmall: string;
-    titleFontSizeMedium: string;
-    titleFontSizeLarge: string;
-    titleFontSizeHuge: string;
-    closeIconSize: string;
-    closeSize: string;
 };
 export default _default;

package/lib/card/styles/_common.js

@@ -4,11 +4,5 @@ exports.default = {
     paddingSmall: '12px 16px 12px',
     paddingMedium: '19px 24px 20px',
     paddingLarge: '23px 32px 24px',
-    paddingHuge: '27px 40px 28px',
-    titleFontSizeSmall: '16px',
-    titleFontSizeMedium: '18px',
-    titleFontSizeLarge: '18px',
-    titleFontSizeHuge: '18px',
-    closeIconSize: '18px',
-    closeSize: '22px'
+    paddingHuge: '27px 40px 28px'
 };

package/lib/card/styles/dark.js

@@ -5,13 +5,6 @@ const light_1 = require("./light");
 const cardDark = {
     name: 'Card',
     common: common_1.commonDark,
-    self(vars) {
-        const commonSelf = (0, light_1.self)(vars);
-        const { cardColor, modalColor, popoverColor } = vars;
-        commonSelf.colorEmbedded = cardColor;
-        commonSelf.colorEmbeddedModal = modalColor;
-        commonSelf.colorEmbeddedPopover = popoverColor;
-        return commonSelf;
-    }
+    self: light_1.self
 };
 exports.default = cardDark;

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

@@ -1,41 +1,45 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import { type Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
-    lineHeight: string;
+    titleFontSizeSmall: string;
+    titleFontSizeMedium: string;
+    titleFontSizeLarge: string;
+    titleFontSizeHuge: string;
+    titleLineHeightSmall: string;
+    titleLineHeightMedium: string;
+    titleLineHeightLarge: string;
+    titleLineHeightHuge: string;
+    titleFontWeight: string;
+    fontSizeSmall: string;
+    fontSizeMedium: string;
+    fontSizeLarge: string;
+    fontSizeHuge: string;
+    lineHeightSmall: string;
+    lineHeightMedium: string;
+    lineHeightLarge: string;
+    lineHeightHuge: string;
+    fontWeight: string;
+    closeIconSize: string;
+    closeSize: string;
     color: string;
-    colorModal: string;
-    colorPopover: string;
     colorTarget: string;
     colorEmbedded: string;
-    colorEmbeddedModal: string;
-    colorEmbeddedPopover: string;
     textColor: string;
     titleTextColor: string;
     borderColor: string;
     actionColor: string;
-    titleFontWeight: string;
     closeColorHover: string;
     closeColorPressed: string;
-    closeBorderRadius: string;
     closeIconColor: string;
     closeIconColorHover: string;
     closeIconColorPressed: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
-    fontSizeHuge: string;
+    closeBorderRadius: string;
     boxShadow: string;
     borderRadius: string;
     paddingSmall: string;
     paddingMedium: string;
     paddingLarge: string;
     paddingHuge: string;
-    titleFontSizeSmall: string;
-    titleFontSizeMedium: string;
-    titleFontSizeLarge: string;
-    titleFontSizeHuge: string;
-    closeIconSize: string;
-    closeSize: string;
 };
 export type CardThemeVars = ReturnType<typeof self>;
 declare const cardLight: Theme<'Card', CardThemeVars>;

package/lib/card/styles/light.js

@@ -7,11 +7,8 @@ exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const _common_1 = __importDefault(require("./_common"));
 const self = (vars) => {
-    const { primaryColor, borderRadius, lineHeight, fontSize, cardColor, textColor2, textColor1, dividerColor, fontWeightStrong, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, modalColor, boxShadow1, popoverColor, actionColor } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, colorEmbeddedModal: actionColor, colorEmbeddedPopover: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor, titleFontWeight: fontWeightStrong, closeColorHover,
-        closeColorPressed, closeBorderRadius: borderRadius, closeIconColor,
-        closeIconColorHover,
-        closeIconColorPressed, fontSizeSmall: fontSize, fontSizeMedium: fontSize, fontSizeLarge: fontSize, fontSizeHuge: fontSize, boxShadow: boxShadow1, borderRadius });
+    const { borderRadius, fontWeight, fontWeightStrong, transparencySecondary, elementsQuinary, elementsDarkQuinary, elementsSenary, fontBodyLarge, fontTitleSmall, lineHeightBodyLarge, lineHeightTitleSmall, lineHeightBodyMedium, iconMedium, closeMedium, containerPrimary, textPrimary, elementsQuaternary, containerSecondary, fontBodyMedium, shadowDepth2, closeBorderRadius } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { titleFontSizeSmall: fontBodyLarge, titleFontSizeMedium: fontTitleSmall, titleFontSizeLarge: fontTitleSmall, titleFontSizeHuge: fontTitleSmall, titleLineHeightSmall: lineHeightBodyLarge, titleLineHeightMedium: lineHeightTitleSmall, titleLineHeightLarge: lineHeightTitleSmall, titleLineHeightHuge: lineHeightTitleSmall, titleFontWeight: fontWeightStrong, fontSizeSmall: fontBodyMedium, fontSizeMedium: fontBodyMedium, fontSizeLarge: fontBodyMedium, fontSizeHuge: fontBodyMedium, lineHeightSmall: lineHeightBodyMedium, lineHeightMedium: lineHeightBodyMedium, lineHeightLarge: lineHeightBodyMedium, lineHeightHuge: lineHeightBodyMedium, fontWeight, closeIconSize: iconMedium, closeSize: closeMedium, color: containerPrimary, colorTarget: elementsQuaternary, colorEmbedded: containerSecondary, textColor: textPrimary, titleTextColor: textPrimary, borderColor: elementsQuaternary, actionColor: containerSecondary, closeColorHover: transparencySecondary, closeColorPressed: transparencySecondary, closeIconColor: elementsQuinary, closeIconColorHover: elementsDarkQuinary, closeIconColorPressed: elementsSenary, closeBorderRadius, boxShadow: shadowDepth2, borderRadius });
 };
 exports.self = self;
 const cardLight = {