@uzum-tech/ui 0.1.1 → 1.0.0

package/es/card/src/Card.js

@@ -17,10 +17,6 @@ export const cardBaseProps = {
         type: [Boolean, Object],
         default: false
     },
-    size: {
-        type: String,
-        default: 'medium'
-    },
     bordered: {
         type: Boolean,
         default: true
@@ -35,7 +31,10 @@ export const cardBaseProps = {
     }
 };
 export const cardBasePropKeys = keysOf(cardBaseProps);
-export const cardProps = Object.assign(Object.assign({}, useTheme.props), cardBaseProps);
+export const cardProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), cardBaseProps), { size: {
+        type: String,
+        default: 'medium'
+    } });
 export default defineComponent({
     name: 'Card',
     props: cardProps,
@@ -50,39 +49,37 @@ export default defineComponent({
         const rtlEnabledRef = useRtl('Card', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = 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, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [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, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('lineHeight', size)]: lineHeight, [createKey('titleFontSize', size)]: titleFontSize, [createKey('titleLineHeight', size)]: titleLineHeight }, common: { cubicBezierEaseInOut } } = themeRef.value;
             const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = 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/es/card/src/styles/index.cssr.js

@@ -1,10 +1,8 @@
-import { asModal, c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr';
+import { c, cB, cE, cM } from '../../../_utils/cssr';
 // vars:
 // --u-bezier
 // --u-border-radius
 // --u-color
-// --u-color-modal
-// --u-color-popover
 // --u-text-color
 // --u-line-height
 // --u-padding-top
@@ -25,11 +23,10 @@ import { asModal, c, cB, cE, cM, insideModal, insidePopover } from '../../../_ut
 // --u-border-color
 // --u-box-shadow
 // --u-color-embedded
-// --u-color-embedded-modal
-// --u-color-embedded-popover
 export default c([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%;
@@ -44,9 +41,7 @@ export default c([cB('card', `
  background-color .3s var(--u-bezier),
  box-shadow .3s var(--u-bezier),
  border-color .3s var(--u-bezier);
- `, [asModal({
-  background: 'var(--u-color-modal)'
-}), cM('hoverable', [c('&:hover', 'box-shadow: var(--u-box-shadow);')]), cM('content-segmented', [c('>', [cE('content', {
+ `, [cM('hoverable', [c('&:hover', 'box-shadow: var(--u-box-shadow);')]), cM('content-segmented', [c('>', [cE('content', {
   paddingTop: 'var(--u-padding-bottom)'
 })])]), cM('content-soft-segmented', [c('>', [cE('content', `
  margin: 0 var(--u-padding-left);
@@ -60,13 +55,14 @@ export default c([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);
  `, [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;
@@ -75,8 +71,6 @@ export default c([cB('card', `
  `), 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);
  `), cE('close', `
@@ -123,12 +117,4 @@ export default c([cB('card', `
   borderTop: '1px solid var(--u-border-color)'
 })])])]), cM('embedded', `
  background-color: var(--u-color-embedded);
- `)]), insideModal(cB('card', `
- background: var(--u-color-modal);
- `, [cM('embedded', `
- background-color: var(--u-color-embedded-modal);
- `)])), insidePopover(cB('card', `
- background: var(--u-color-popover);
- `, [cM('embedded', `
- background-color: var(--u-color-embedded-popover);
- `)]))]);
+ `)])]);

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

@@ -2,11 +2,5 @@ export 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/es/card/styles/dark.js

@@ -3,13 +3,6 @@ import { self } from './light';
 const cardDark = {
     name: 'Card',
     common: commonDark,
-    self(vars) {
-        const commonSelf = self(vars);
-        const { cardColor, modalColor, popoverColor } = vars;
-        commonSelf.colorEmbedded = cardColor;
-        commonSelf.colorEmbeddedModal = modalColor;
-        commonSelf.colorEmbeddedPopover = popoverColor;
-        return commonSelf;
-    }
+    self
 };
 export default cardDark;

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

@@ -1,11 +1,8 @@
 import { commonLight } from '../../_styles/common';
 import commonVariables from './_common';
 export 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({}, commonVariables), { 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({}, commonVariables), { 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 });
 };
 const cardLight = {
     name: 'Card',

package/es/carousel/src/CarouselItem.js

@@ -1,5 +1,5 @@
 import { h, defineComponent, computed, ref, onMounted, onBeforeUnmount } from 'vue';
-import { camelCase } from 'lodash-es';
+import { camelCase } from 'lodash';
 import { useConfig } from '../../_mixins';
 import { useCarouselContext } from './CarouselContext';
 const CarouselItemName = 'CarouselItem';