@uzum-tech/ui 0.1.2 → 1.0.1

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

@@ -4,23 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 const cssr_1 = require("../../../_utils/cssr");
-// vars:
-// --u-font-size
-// --u-bezier
-// --u-text-color
-// --u-color
-// --u-color-hover
-// --u-border-radius
-// --u-border-color
-// --u-border-color-modal
-// --u-border-color-popover
-// --u-color-modal
-// --u-color-popover
-// --u-color-hover-modal
-// --u-color-hover-popover
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('list', `
  --u-merged-border-color: var(--u-border-color);
  --u-merged-color: var(--u-color);
+ --u-merged-color-focus: var(--u-color-focus);
  --u-merged-color-hover: var(--u-color-hover);
  margin: 0;
  font-size: var(--u-font-size);
@@ -32,57 +19,164 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('list', `
  list-style-type: none;
  color: var(--u-text-color);
  background-color: var(--u-merged-color);
- `, [(0, cssr_1.cM)('show-divider', [(0, cssr_1.cB)('list-item', [(0, cssr_1.c)('&:not(:last-child)', [(0, cssr_1.cE)('divider', `
- background-color: var(--u-merged-border-color);
- `)])])]), (0, cssr_1.cM)('clickable', [(0, cssr_1.cB)('list-item', `
+ `, [(0, cssr_1.cM)('clickable', [(0, cssr_1.cB)('list-item', `
  cursor: pointer;
  `)]), (0, cssr_1.cM)('bordered', `
  border: 1px solid var(--u-merged-border-color);
  border-radius: var(--u-border-radius);
- `), (0, cssr_1.cM)('hoverable', [(0, cssr_1.cB)('list-item', `
+ `, [(0, cssr_1.cB)('list-item', [(0, cssr_1.c)('&:first-child', `
  border-radius: var(--u-border-radius);
- `, [(0, cssr_1.c)('&:hover', `
- background-color: var(--u-merged-color-hover);
- `, [(0, cssr_1.cE)('divider', `
- background-color: transparent;
- `)])])]), (0, cssr_1.cM)('bordered, hoverable', [(0, cssr_1.cB)('list-item', `
- padding: 12px 20px;
- `), (0, cssr_1.cE)('header, footer', `
- padding: 12px 20px;
- `)]), (0, cssr_1.cE)('header, footer', `
- padding: 12px 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ `), (0, cssr_1.c)('&:last-child', `
+ border-radius: var(--u-border-radius);
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ `)])]), (0, cssr_1.cE)('header, footer', `
+ padding: var(--u-padding);
+ padding-left: 0px;
+ padding-right: 0px;
  box-sizing: border-box;
  transition: border-color .3s var(--u-bezier);
  `, [(0, cssr_1.c)('&:not(:last-child)', `
  border-bottom: 1px solid var(--u-merged-border-color);
- `)]), (0, cssr_1.cB)('list-item', `
- position: relative;
- padding: 12px 0; 
- box-sizing: border-box;
- display: flex;
- flex-wrap: nowrap;
- align-items: center;
+ `)]), (0, cssr_1.cM)('bordered, hoverable', [(0, cssr_1.cE)('header, footer', `
+ padding: var(--u-padding);
+ `)])]), (0, cssr_1.cB)('list-item', `
  transition:
  background-color .3s var(--u-bezier),
+ transform .3s var(--u-bezier),
  border-color .3s var(--u-bezier);
- `, [(0, cssr_1.cE)('prefix', `
- margin-right: 20px;
- flex: 0;
- `), (0, cssr_1.cE)('suffix', `
- margin-left: 20px;
- flex: 0;
- `), (0, cssr_1.cE)('main', `
+ box-sizing: border-box;
+ position: relative;
+ outline: none;
+ display: flex;
+ align-items: center;
+ padding: var(--u-padding);
+ padding-left: 0;
+ padding-right: 0;
+ `, [(0, cssr_1.cE)('main', `
  flex: 1;
+ `), (0, cssr_1.c)('&:focus', `
+ outline: none;
  `), (0, cssr_1.cE)('divider', `
+ margin: 0;
+ border: 0;
+ background: var(--u-merged-border-color);
  height: 1px;
+ width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
- right: 0;
- background-color: transparent;
- transition: background-color .3s var(--u-bezier);
- pointer-events: none;
- `)])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('list', `
+ `), (0, cssr_1.cE)('icon', `
+ display: flex;
+ font-size: var(--u-icon-size);
+ margin-left: var(--u-icon-space);
+ `), (0, cssr_1.cE)('suffix', `
+ margin-left: var(--u-suffix-space);
+ `), (0, cssr_1.cE)('prefix', `
+ margin-right: var(--u-prefix-space);
+ `), (0, cssr_1.cE)('content', `
+ flex-grow: 1;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ `, [(0, cssr_1.cM)('right', `
+ margin-left: auto;
+ text-align: right;
+ align-items: flex-end;
+ `, [(0, cssr_1.cE)('title', `
+ font-weight: 600;
+ `)]), (0, cssr_1.c)('+', [(0, cssr_1.cE)('content', `
+ margin-left: 24px;
+ flex-grow: 0;
+ `)])]), (0, cssr_1.cE)('text', `
+ flex-grow: 1;
+ display: flex;
+ align-items: flex-start;
+ `), (0, cssr_1.cE)('title', `
+ padding-top: 4px;
+ flex-grow: 1;
+ margin-bottom: 4px;
+ font-size: var(--u-title-size);
+ font-weight: 500;
+ line-height: var(--u-title-line-height);
+ `, [(0, cssr_1.c)('&:last-child', `
+ margin-bottom: 0;
+ `)]), (0, cssr_1.cE)('subtitle', `
+ padding-bottom: 4px;
+ flex-grow: 1;
+ font-size: var(--u-subtitle-size);
+ font-weight: 500;
+ line-height: var(--u-subtitle-line-height);
+ color: var(--u-subtitle-color);
+ `), (0, cssr_1.cE)('subtitle,title', [(0, cssr_1.c)('&:last-child:first-child', `
+ padding: 12px 0;
+ `)]), (0, cssr_1.cE)('avatar', `
+ display: flex;
+ margin-right: var(--u-avatar-space);
+ `), (0, cssr_1.c)('&:last-child', [(0, cssr_1.cE)('divider', `
+ display: none;
+ `)]), (0, cssr_1.cM)('default', `
+ min-height: var(--u-min-height);
+ padding: var(--u-padding);
+ `, [(0, cssr_1.cE)('main', `
+ display: flex;
+ align-items: center;
+ `)]), (0, cssr_1.cM)('description-first', [(0, cssr_1.cE)('title', `
+ padding-top: 0;
+ padding-bottom: 4px;
+ order: 1;
+ margin-top: 4px;
+ margin-bottom: 0px;
+ `, [(0, cssr_1.c)('&:last-child', `
+ margin-top: 0;
+ `)]), (0, cssr_1.cE)('subtitle', `
+ padding-bottom: 0;
+ padding-top: 4px;
+ `)]), (0, cssr_1.cM)('columns-even', [(0, cssr_1.cE)('content', [(0, cssr_1.cM)('right', `
+ flex-grow: 1;
+ text-align: left;
+ align-items: stretch;
+ `)])]), (0, cssr_1.cM)('bordered', `
+ padding: var(--u-padding);
+ `), (0, cssr_1.cNotM)('loading', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cNotM)('loading-skeleton', [(0, cssr_1.cM)('hoverable', `
+ cursor: pointer;
+ user-select: none;
+ padding: var(--u-padding);
+ `, [(0, cssr_1.c)('&:hover', `
+ background: var(--u-merged-color-hover);
+ `), (0, cssr_1.c)('&:focus,&:active', `
+ background: var(--u-merged-color-focus);
+ `), (0, cssr_1.cM)('pressed', `
+ transform: scale(var(--u-pressed-scale));
+ `), (0, cssr_1.c)('&:active', `
+ transform: scale(var(--u-pressed-scale));
+ `)])])])]), (0, cssr_1.cM)('rounded', `
+ border-radius: var(--u-border-radius);
+ `), (0, cssr_1.cM)('disabled', [(0, cssr_1.cE)('text, subtitle', `
+ color: var(--u-text-color-disabled);
+ `)]), (0, cssr_1.cM)('loading-skeleton', [(0, cssr_1.cE)('content', `
+ padding: 5px 0;
+ `), (0, cssr_1.cE)('content--left', `
+ flex-grow: 0;
+ width: calc(66.38% - 8px);
+ `), (0, cssr_1.cE)('content--right', `
+ flex-grow: 0;
+ width: calc(33.62% - 8px);
+ `), (0, cssr_1.cE)('title,subtitle', [(0, cssr_1.c)('&:first-child:last-child', `
+ padding: 0;
+ `)]), (0, cssr_1.cE)('title', `
+ margin-bottom: 8px;
+ `, [(0, cssr_1.c)('&:last-child', `
+ margin-bottom: 0;
+ `)]), (0, cssr_1.cM)('description-first', [(0, cssr_1.cE)('title', `
+ margin-bottom: 0;
+ margin-top: 8px;
+ `, [(0, cssr_1.c)('&:last-child', `
+ margin-top: 0;
+ `)])])])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('list', `
  --u-merged-color-hover: var(--u-color-hover-modal);
  --u-merged-color: var(--u-color-modal);
  --u-merged-border-color: var(--u-border-color-modal);

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

@@ -1,6 +1,21 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import { type Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    padding: string;
+    iconSize: string;
+    iconSpace: string;
+    suffixSpace: string;
+    prefixSpace: string;
+    titleSize: string;
+    titleLineHeight: string;
+    subtitleSize: string;
+    subtitleLineHeight: string;
+    subtitleColor: string;
+    avatarSpace: string;
+    minHeight: string;
+    colorFocus: string;
+    pressedScale: string;
+    textColorDisabled: string;
     textColor: string;
     color: string;
     colorHover: string;

package/lib/list/styles/light.js

@@ -1,23 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
-const seemly_1 = require("seemly");
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { textColor2, cardColor, modalColor, popoverColor, dividerColor, borderRadius, fontSize, hoverColor } = vars;
+    const { borderRadius, iconMedium, fontBodyLarge, lineHeightBodyLarge, lineHeightBodyMedium, textSecondary, iconSmall, elementsQuaternary, textTertiary, textPrimary, fontBodyMedium, containerPrimary, elementsTertiary } = vars;
     return {
-        textColor: textColor2,
-        color: cardColor,
-        colorHover: hoverColor,
-        colorModal: modalColor,
-        colorHoverModal: (0, seemly_1.composite)(modalColor, hoverColor),
-        colorPopover: popoverColor,
-        colorHoverPopover: (0, seemly_1.composite)(popoverColor, hoverColor),
-        borderColor: dividerColor,
-        borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor),
-        borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor),
+        padding: '8px 24px',
+        iconSize: iconMedium,
+        iconSpace: '16px',
+        suffixSpace: '20px',
+        prefixSpace: '20px',
+        titleSize: fontBodyLarge,
+        titleLineHeight: lineHeightBodyLarge,
+        subtitleSize: fontBodyMedium,
+        subtitleLineHeight: lineHeightBodyMedium,
+        subtitleColor: textSecondary,
+        avatarSpace: iconSmall,
+        minHeight: '64px',
+        colorFocus: elementsQuaternary,
+        pressedScale: '0.98',
+        textColorDisabled: textTertiary,
+        textColor: textPrimary,
+        color: containerPrimary,
+        colorHover: elementsTertiary,
+        colorModal: containerPrimary,
+        colorHoverModal: elementsTertiary,
+        colorPopover: containerPrimary,
+        colorHoverPopover: elementsTertiary,
+        borderColor: elementsQuaternary,
+        borderColorModal: elementsQuaternary,
+        borderColorPopover: elementsQuaternary,
         borderRadius,
-        fontSize
+        fontSize: fontBodyMedium
     };
 };
 exports.self = self;

package/lib/loading-bar/styles/dark.js

@@ -1,16 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
 const loadingBarDark = {
     name: 'LoadingBar',
     common: common_1.commonDark,
-    self(vars) {
-        const { primaryColor } = vars;
-        return {
-            colorError: 'red',
-            colorLoading: primaryColor,
-            height: '2px'
-        };
-    }
+    self: light_1.self
 };
 exports.default = loadingBarDark;

package/lib/loading-bar/styles/light.d.ts

@@ -1,6 +1,6 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
     colorError: string;
     colorLoading: string;
     height: string;

package/lib/loading-bar/styles/light.js

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { primaryColor, errorColor } = vars;
+    const { brandPrimary500, staticRed } = vars;
     return {
-        colorError: errorColor,
-        colorLoading: primaryColor,
+        colorError: staticRed,
+        colorLoading: brandPrimary500,
         height: '2px'
     };
 };
+exports.self = self;
 const loadingBarLight = {
     name: 'LoadingBar',
     common: common_1.commonLight,
-    self
+    self: exports.self
 };
 exports.default = loadingBarLight;

package/lib/log/src/Log.d.ts

@@ -263,124 +263,113 @@ declare const _default: import("vue").DefineComponent<{
     } | null>;
     mergedTheme: import("vue").ComputedRef<{
         common: {
-            baseColor: string;
-            primaryColor: string;
-            primaryColorHover: string;
-            primaryColorPressed: string;
-            primaryColorSuppl: string;
-            infoColor: string;
-            infoColorHover: string;
-            infoColorPressed: string;
-            infoColorSuppl: string;
-            successColor: string;
-            successColorHover: string;
-            successColorPressed: string;
-            successColorSuppl: string;
-            warningColor: string;
-            warningColorHover: string;
-            warningColorPressed: string;
-            warningColorSuppl: string;
-            errorColor: string;
-            errorColorHover: string;
-            errorColorPressed: string;
-            errorColorSuppl: string;
-            tertiaryColor: string;
-            tertiaryColorHover: string;
-            tertiaryColorActive: string;
-            tertiaryColorSuppl: string;
-            tertiaryElements: string;
-            textColorBase: string;
-            textColor1: string;
-            textColor2: string;
-            textColor3: string;
-            textTertiary: string;
-            boxShadowHover: string;
-            boxShadowFocus: string;
-            boxShadowHoverChecked: string;
-            boxShadowFocusChecked: string;
-            textColorDisabled: string;
-            placeholderColor: string;
-            placeholderColorDisabled: string;
-            iconColor: string;
-            iconColorHover: string;
-            iconColorPressed: string;
-            iconColorDisabled: string;
-            opacity1: string;
-            opacity2: string;
-            opacity3: string;
-            opacity4: string;
-            opacity5: string;
-            dividerColor: string;
-            borderColor: string;
-            borderTagColor: string;
-            closeIconColor: string;
-            closeIconColorHover: string;
-            closeIconColorPressed: string;
-            closeColorHover: string;
-            closeColorPressed: string;
-            clearColor: string;
-            clearColorHover: string;
-            clearColorPressed: string;
             scrollbarColor: string;
             scrollbarColorHover: string;
             scrollbarWidth: string;
             scrollbarHeight: string;
             scrollbarBorderRadius: string;
-            progressRailColor: string;
-            railColor: string;
-            popoverColor: string;
-            tableColor: string;
-            cardColor: string;
-            modalColor: string;
-            bodyColor: string;
-            tagColor: string;
-            avatarColor: string;
-            avatarTextColor: string;
-            avatarIconColor: string;
-            invertedColor: string;
-            tooltipColor: string;
-            inputColor: string;
-            codeColor: string;
-            tabColor: string;
-            actionColor: string;
-            tableHeaderColor: string;
-            hoverColor: string;
-            tableColorHover: string;
-            tableColorStriped: string;
-            pressedColor: string;
             opacityDisabled: string;
-            inputColorDisabled: string;
-            buttonColor2: string;
-            buttonColor2Hover: string;
-            buttonColor2Pressed: string;
-            boxShadow1: string;
-            boxShadow2: string;
-            boxShadow3: string;
+            brandPrimary50: string;
+            brandPrimary100: string;
+            brandPrimary200: string;
+            brandPrimary300: string;
+            brandPrimary400: string;
+            brandPrimary500: string;
+            brandPrimary550: string;
+            brandPrimary600: string;
+            brandSecondary500: string;
+            brandSecondary300: string;
+            brandSecondary600: string;
+            brandTertiary500: string;
+            brandTertiary300: string;
+            brandTertiary600: string;
+            brandQuaternary500: string;
+            brandQuaternary300: string;
+            brandQuaternary600: string;
+            brandQuinary500: string;
+            brandQuinary300: string;
+            brandQuinary600: string;
+            brandQuinary100: string;
+            surfacePrimary: string;
+            surfaceSecondary: string;
+            containerPrimary: string;
+            containerSecondary: string;
+            textPrimary: string;
+            textSecondary: string;
+            textTertiary: string;
+            textQuaternary: string;
+            textBrand: string;
+            elementsPrimary: string;
+            elementsSecondary: string;
+            elementsTertiary: string;
+            elementsQuaternary: string;
+            elementsQuinary: string;
+            elementsDarkQuinary: string;
+            elementsSenary: string;
+            elementsOnContainer: string;
+            transparencyPrimary: string;
+            transparencySecondary: string;
+            transparencyTertiary: string;
+            transparencyQuinary: string;
+            transparencyModal: string;
+            staticBlack: string;
+            staticDarkGrey: string;
+            staticWhite: string;
+            staticRed: string;
+            staticOrange: string;
+            staticGreen: string;
+            staticErrorAccent: string;
+            shadowDepth2: string;
             fontFamily: string;
             fontFamilyMono: string;
-            fontWeight: string;
-            fontWeightStrong: string;
             cubicBezierEaseInOut: string;
             cubicBezierEaseOut: string;
             cubicBezierEaseIn: string;
-            borderWidth: number;
-            borderTagWidth: number;
+            borderRadiusLarge: string;
             borderRadius: string;
+            borderRadiusMedium: string;
             borderRadiusSmall: string;
-            fontSize: string;
-            fontSizeMini: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            lineHeight: string;
+            borderRadiusTiny: string;
             heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;
             heightLarge: string;
             heightHuge: string;
+            fontDisplayLarge: string;
+            fontDisplaySmall: string;
+            fontHeadingLarge: string;
+            fontHeadingMedium: string;
+            fontHeadingSmall: string;
+            fontTitleLarge: string;
+            fontTitleMedium: string;
+            fontTitleSmall: string;
+            fontBodyLarge: string;
+            fontBodyMedium: string;
+            fontBodySmall: string;
+            lineHeightDisplayLarge: string;
+            lineHeightDisplaySmall: string;
+            lineHeightHeadingLarge: string;
+            lineHeightHeadingMedium: string;
+            lineHeightHeadingSmall: string;
+            lineHeightTitleLarge: string;
+            lineHeightTitleMedium: string;
+            lineHeightTitleSmall: string;
+            lineHeightBodyLarge: string;
+            lineHeightBodyMedium: string;
+            lineHeightBodySmall: string;
+            fontWeight: string;
+            fontWeightStrong: string;
+            fontWeightBold: string;
+            iconSmall: string;
+            iconMedium: string;
+            iconLarge: string;
+            iconHuge: string;
+            closeSmall: string;
+            closeMedium: string;
+            closeLarge: string;
+            closeHuge: string;
+            closeBorderRadius: string;
             name: "common";
         };
         self: {

package/lib/log/styles/dark.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styles_1 = require("../../_internal/scrollbar/styles");
 const common_1 = require("../../_styles/common");
 const styles_2 = require("../../code/styles");
+const light_1 = require("./light");
 const logDark = {
     name: 'Log',
     common: common_1.commonDark,
@@ -10,15 +11,6 @@ const logDark = {
         Scrollbar: styles_1.scrollbarDark,
         Code: styles_2.codeDark
     },
-    self(vars) {
-        const { textColor2, inputColor, fontSize, primaryColor } = vars;
-        return {
-            loaderFontSize: fontSize,
-            loaderTextColor: textColor2,
-            loaderColor: inputColor,
-            loaderBorder: '1px solid #0000',
-            loadingColor: primaryColor
-        };
-    }
+    self: light_1.self
 };
 exports.default = logDark;

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

@@ -1,5 +1,5 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
     loaderFontSize: string;
     loaderTextColor: string;
     loaderColor: string;

package/lib/log/styles/light.js

@@ -1,19 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
 const styles_1 = require("../../_internal/scrollbar/styles");
 const common_1 = require("../../_styles/common");
 const styles_2 = require("../../code/styles");
 const _mixins_1 = require("../../_mixins");
 const self = (vars) => {
-    const { textColor2, modalColor, borderColor, fontSize, primaryColor } = vars;
+    const { fontBodyMedium, textPrimary, containerPrimary, elementsQuaternary, elementsPrimary } = vars;
     return {
-        loaderFontSize: fontSize,
-        loaderTextColor: textColor2,
-        loaderColor: modalColor,
-        loaderBorder: `1px solid ${borderColor}`,
-        loadingColor: primaryColor
+        loaderFontSize: fontBodyMedium,
+        loaderTextColor: textPrimary,
+        loaderColor: containerPrimary,
+        loaderBorder: `1px solid ${elementsQuaternary}`,
+        loadingColor: elementsPrimary
     };
 };
+exports.self = self;
 const logLight = (0, _mixins_1.createTheme)({
     name: 'Log',
     common: common_1.commonLight,
@@ -21,6 +23,6 @@ const logLight = (0, _mixins_1.createTheme)({
         Scrollbar: styles_1.scrollbarLight,
         Code: styles_2.codeLight
     },
-    self
+    self: exports.self
 });
 exports.default = logLight;