@uzum-tech/ui 0.1.2 → 1.0.0

package/es/drawer/src/DrawerContent.d.ts

@@ -1,10 +1,14 @@
-import { type CSSProperties, type PropType } from 'vue';
+import { type CSSProperties, type PropType, VNodeChild, VNode } from 'vue';
+import { ButtonProps } from '../../button';
 import type { ScrollbarProps } from '../../_internal';
-import type { ExtractPublicPropTypes } from '../../_utils';
+import type { ExtractPublicPropTypes, MouseEventHandler } from '../../_utils';
 export declare const drawerContentProps: {
-    title: {
-        type: StringConstructor;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
     };
+    title: StringConstructor;
+    subtitle: StringConstructor;
     headerStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
     bodyStyle: PropType<string | CSSProperties>;
@@ -14,13 +18,25 @@ export declare const drawerContentProps: {
         default: boolean;
     };
     scrollbarProps: PropType<ScrollbarProps>;
-    closable: BooleanConstructor;
+    footer: PropType<() => VNodeChild>;
+    sideText: StringConstructor;
+    cancelText: StringConstructor;
+    submitText: StringConstructor;
+    onSideClick: PropType<MouseEventHandler>;
+    onCancelClick: PropType<MouseEventHandler>;
+    onSubmitClick: PropType<MouseEventHandler>;
+    sideButtonProps: PropType<ButtonProps>;
+    cancelButtonProps: PropType<ButtonProps>;
+    submitButtonProps: PropType<ButtonProps>;
 };
 export type DrawerContentProps = ExtractPublicPropTypes<typeof drawerContentProps>;
 declare const _default: import("vue").DefineComponent<{
-    title: {
-        type: StringConstructor;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
     };
+    title: StringConstructor;
+    subtitle: StringConstructor;
     headerStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
     bodyStyle: PropType<string | CSSProperties>;
@@ -30,153 +46,159 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     scrollbarProps: PropType<ScrollbarProps>;
-    closable: BooleanConstructor;
+    footer: PropType<() => VNodeChild>;
+    sideText: StringConstructor;
+    cancelText: StringConstructor;
+    submitText: StringConstructor;
+    onSideClick: PropType<MouseEventHandler>;
+    onCancelClick: PropType<MouseEventHandler>;
+    onSubmitClick: PropType<MouseEventHandler>;
+    sideButtonProps: PropType<ButtonProps>;
+    cancelButtonProps: PropType<ButtonProps>;
+    submitButtonProps: PropType<ButtonProps>;
 }, {
     handleCloseClick: () => void;
+    renderActionButtons: () => null | VNode;
     mergedTheme: import("vue").Ref<{
         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: {
-            bodyPadding: string;
-            headerPadding: string;
-            footerPadding: string;
             color: string;
             textColor: string;
             titleTextColor: string;
-            titleFontSize: string;
-            titleFontWeight: string;
-            boxShadow: string;
-            lineHeight: string;
-            headerBorderBottom: string;
-            footerBorderTop: string;
+            subtitleTextColor: string;
             closeIconColor: string;
             closeIconColorHover: string;
             closeIconColorPressed: string;
-            closeSize: string;
-            closeIconSize: string;
+            closeColor: string;
             closeColorHover: string;
             closeColorPressed: string;
-            closeBorderRadius: string;
             resizableTriggerColorHover: string;
+            maskColor: string;
+            closeIconSize: string;
+            titleLineHeight: string;
+            titleFontSize: string;
+            titleFontWeight: string;
+            closeSize: string;
+            subtitleFontWeight: string;
+            subtitleLineHeight: string;
+            subtitleFontSize: string;
+            bodyPadding: string;
+            headerPadding: string;
+            footerPadding: string;
+            headerBorderBottom: string;
+            footerBorderTop: string;
+            closeBorderRadius: string;
+            subtitleMarginTop: string;
+            actionsSpace: string;
         };
         peers: {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
@@ -193,10 +215,15 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
+    disabled: import("vue").ComputedRef<boolean>;
+    loading: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
     };
+    title: StringConstructor;
+    subtitle: StringConstructor;
     headerStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
     bodyStyle: PropType<string | CSSProperties>;
@@ -206,7 +233,16 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     scrollbarProps: PropType<ScrollbarProps>;
-    closable: BooleanConstructor;
+    footer: PropType<() => VNodeChild>;
+    sideText: StringConstructor;
+    cancelText: StringConstructor;
+    submitText: StringConstructor;
+    onSideClick: PropType<MouseEventHandler>;
+    onCancelClick: PropType<MouseEventHandler>;
+    onSubmitClick: PropType<MouseEventHandler>;
+    sideButtonProps: PropType<ButtonProps>;
+    cancelButtonProps: PropType<ButtonProps>;
+    submitButtonProps: PropType<ButtonProps>;
 }>>, {
     closable: boolean;
     nativeScrollbar: boolean;

package/es/drawer/src/DrawerContent.js

@@ -1,23 +1,37 @@
 import { defineComponent, h, inject } from 'vue';
 import { UBaseClose, UScrollbar } from '../../_internal';
-import { throwError } from '../../_utils';
+import { UButton } from '../../button';
+import { render, resolveWrappedSlot, throwError } from '../../_utils';
 import { drawerInjectionKey } from './interface';
+import { capitalize } from 'lodash';
 export const drawerContentProps = {
-    title: {
-        type: String
+    closable: {
+        type: Boolean,
+        default: true
     },
+    title: String,
+    subtitle: String,
     headerStyle: [Object, String],
     footerStyle: [Object, String],
     bodyStyle: [Object, String],
     bodyContentStyle: [Object, String],
     nativeScrollbar: { type: Boolean, default: true },
     scrollbarProps: Object,
-    closable: Boolean
+    footer: Function,
+    sideText: String,
+    cancelText: String,
+    submitText: String,
+    onSideClick: Function,
+    onCancelClick: Function,
+    onSubmitClick: Function,
+    sideButtonProps: Object,
+    cancelButtonProps: Object,
+    submitButtonProps: Object
 };
 export default defineComponent({
     name: 'DrawerContent',
     props: drawerContentProps,
-    setup() {
+    setup(props) {
         const UDrawer = inject(drawerInjectionKey, null);
         if (!UDrawer) {
             throwError('drawer-content', '`u-drawer-content` must be placed inside `u-drawer`.');
@@ -26,24 +40,79 @@ export default defineComponent({
         function handleCloseClick() {
             doUpdateShow(false);
         }
+        function renderActionButtons() {
+            if (!UDrawer)
+                return null;
+            const buttons = ['side', 'cancel', 'submit'];
+            const buttonProps = {
+                side: {
+                    quaternary: true,
+                    type: 'primary'
+                },
+                cancel: {
+                    secondary: true,
+                    type: 'tertiary'
+                },
+                submit: {
+                    type: 'primary'
+                }
+            };
+            const clsPrefix = UDrawer.mergedClsPrefixRef.value;
+            return (h("div", { class: `${clsPrefix}-drawer-footer__actions` }, buttons.map((type) => {
+                const _text = (type + 'Text');
+                const _click = ('on' +
+                    capitalize(type) +
+                    'Click');
+                const _buttonProps = (type +
+                    'ButtonProps');
+                return props[_text] ? (h(UButton, Object.assign({ class: [
+                        `${clsPrefix}-drawer-footer__button`,
+                        type === 'side' && `${clsPrefix}-drawer-footer__button--first`
+                    ] }, buttonProps[type], { loading: UDrawer.loadingRef.value, disabled: UDrawer.disabledRef.value, style: `
+                  --u-font-size: 16px;
+                  --u-font-weight: 600;
+                  --u-padding: 13px 20px;
+                ` }, props[_buttonProps], { onClick: props[_click] }), {
+                    default: () => render(props[_text])
+                })) : null;
+            })));
+        }
         return {
             handleCloseClick,
+            renderActionButtons,
             mergedTheme: UDrawer.mergedThemeRef,
-            mergedClsPrefix: UDrawer.mergedClsPrefixRef
+            mergedClsPrefix: UDrawer.mergedClsPrefixRef,
+            disabled: UDrawer.disabledRef,
+            loading: UDrawer.loadingRef
         };
     },
     render() {
-        const { title, mergedClsPrefix, nativeScrollbar, mergedTheme, bodyStyle, bodyContentStyle, headerStyle, footerStyle, scrollbarProps, closable, $slots } = this;
+        var _a, _b;
+        const { title, subtitle, mergedClsPrefix, nativeScrollbar, mergedTheme, bodyStyle, bodyContentStyle, headerStyle, footerStyle, scrollbarProps, closable, $slots } = this;
+        const footerNode = resolveWrappedSlot($slots.footer, (children) => {
+            return children ||
+                this.sideText ||
+                this.submitText ||
+                this.cancelText ||
+                this.footer ? (h("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle }, children ||
+                (this.footer ? [render(this.footer)] : this.renderActionButtons()))) : null;
+        });
+        const closeNode = closable && (h(UBaseClose, { onClick: this.handleCloseClick, clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-drawer-header__close` }));
         return (h("div", { role: "none", class: [
                 `${mergedClsPrefix}-drawer-content`,
                 nativeScrollbar &&
                     `${mergedClsPrefix}-drawer-content--native-scrollbar`
             ] },
-            $slots.header || title || closable ? (h("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle, role: "none" },
-                h("div", { class: `${mergedClsPrefix}-drawer-header__main`, role: "heading", "aria-level": "1" }, $slots.header !== undefined ? $slots.header() : title),
-                closable && (h(UBaseClose, { onClick: this.handleCloseClick, clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-drawer-header__close`, absolute: true })))) : null,
+            $slots.header ||
+                title ||
+                $slots.description ||
+                subtitle ||
+                closable ? (h("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle, role: "none" },
+                ($slots.header || title) && (h("div", { class: `${mergedClsPrefix}-drawer-header__main`, role: "heading", "aria-level": "1" }, ((_a = $slots.header) === null || _a === void 0 ? void 0 : _a.call($slots)) || title)),
+                ($slots.description || subtitle) && (h("div", { class: `${mergedClsPrefix}-drawer-header__description`, role: "heading", "aria-level": "2" }, ((_b = $slots.description) === null || _b === void 0 ? void 0 : _b.call($slots)) || subtitle)),
+                closeNode)) : null,
             nativeScrollbar ? (h("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle, role: "none" },
                 h("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle, role: "none" }, $slots))) : (h(UScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
-            $slots.footer ? (h("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle, role: "none" }, $slots.footer())) : null));
+            footerNode));
     }
 });

package/es/drawer/src/interface.d.ts

@@ -1,8 +1,10 @@
-import type { Ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { DrawerTheme } from '../styles';
 export type DrawerBodyInjection = Ref<HTMLElement | null> | null;
 export declare const drawerBodyInjectionKey: import("vue").InjectionKey<DrawerBodyInjection>;
+export type DrawerSizes = 'small' | 'medium' | 'large';
+export type DrawerActions = 'side' | 'cancel' | 'submit';
 export interface DrawerInjection {
     isMountedRef: Ref<boolean>;
     mergedThemeRef: Ref<MergedTheme<DrawerTheme>>;
@@ -10,5 +12,8 @@ export interface DrawerInjection {
     doUpdateShow: (show: boolean) => void;
     doUpdateWidth: (value: number) => void;
     doUpdateHeight: (value: number) => void;
+    disabledRef: ComputedRef<boolean>;
+    loadingRef: ComputedRef<boolean>;
+    mergedSizeRef: ComputedRef<DrawerSizes>;
 }
 export declare const drawerInjectionKey: import("vue").InjectionKey<DrawerInjection>;

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

@@ -8,7 +8,6 @@ import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr';
 // --u-line-height
 // --u-color
 // --u-text-color
-// --u-box-shadow
 // --u-bezier
 // --u-bezier-out
 // --u-bezier-in
@@ -30,16 +29,15 @@ import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr';
 // --u-close-icon-size
 export default c([cB('drawer', `
  word-break: break-word;
- line-height: var(--u-line-height);
  position: absolute;
  pointer-events: all;
- box-shadow: var(--u-box-shadow);
  transition:
  background-color .3s var(--u-bezier),
  color .3s var(--u-bezier);
  background-color: var(--u-color);
  color: var(--u-text-color);
  box-sizing: border-box;
+ max-width: 100%;
  `, [slideInFromRightTransition(), slideInFromLeftTransition(), slideInFromTopTransition(), slideInFromBottomTransition(), cM('unselectable', `
  user-select: none; 
  -webkit-user-select: none;
@@ -67,29 +65,6 @@ export default c([cB('drawer', `
  `), cB('drawer-body-content-wrapper', `
  box-sizing: border-box;
  padding: var(--u-body-padding);
- `), cB('drawer-header', `
- font-weight: var(--u-title-font-weight);
- line-height: 1;
- font-size: var(--u-title-font-size);
- color: var(--u-title-text-color);
- padding: var(--u-header-padding);
- transition: border .3s var(--u-bezier);
- border-bottom: 1px solid var(--u-divider-color);
- border-bottom: var(--u-header-border-bottom);
- display: flex;
- justify-content: space-between;
- align-items: center;
- `, [cE('close', `
- margin-left: 6px;
- transition:
- background-color .3s var(--u-bezier),
- color .3s var(--u-bezier);
- `)]), cB('drawer-footer', `
- display: flex;
- justify-content: flex-end;
- border-top: var(--u-footer-border-top);
- transition: border .3s var(--u-bezier);
- padding: var(--u-footer-padding);
  `)]), cM('right-placement', `
  top: 0;
  bottom: 0;
@@ -134,7 +109,61 @@ export default c([cB('drawer', `
  left: 0;
  transform: translateY(-1.5px);
  cursor: ns-resize;
- `)])]), c('body', [c('>', [cB('drawer-container', {
+ `)])]), cB('drawer-header', `
+ font-weight: var(--u-title-font-weight);
+ line-height: var(--u-title-line-height);
+ font-size: var(--u-title-font-size);
+ color: var(--u-title-text-color);
+ padding: var(--u-header-padding);
+ transition: border .3s var(--u-bezier);
+ border-bottom: 1px solid var(--u-divider-color);
+ border-bottom: var(--u-header-border-bottom);
+ position: relative;
+ `, [cE('main:first-child,description:first-child', `
+ padding-right: var(--u-close-size);
+ `), cE('close', `
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: var(--u-header-padding);
+ margin-bottom: 0;
+ margin-left: 0;
+ transition:
+ background-color .3s var(--u-bezier),
+ color .3s var(--u-bezier);
+ `, [c('&:not(:hover):before, &:not(:focus):before', `
+ background-color: var(--u-close-color);
+ `)]), cE('description', `
+ margin-top: var(--u-subtitle-margin-top);
+ font-weight: var(--u-subtitle-font-weight);
+ line-height: var(--u-subtitle-line-height);
+ font-size: var(--u-subtitle-font-size);
+ color: var(--u-subtitle-text-color);
+ `, [c('&:first-child', `
+ margin-top: 0;
+ `)])]), cB('drawer-footer', `
+ display: flex;
+ justify-content: flex-end;
+ border-top: var(--u-footer-border-top);
+ transition: border .3s var(--u-bezier);
+ padding: var(--u-footer-padding);
+ `, [cE('actions', `
+ width: 100%;
+ justify-content: flex-end;
+ display: flex;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ margin-top: calc(var(--u-actions-space) * -1);
+ `), cE('button', `
+ margin-left: var(--u-actions-space);
+ margin-top: var(--u-actions-space);
+ `, [cM('first', `
+ margin-left: calc(var(--u-actions-space) * -1);
+ `, [c('&:last-child', `
+ margin-right: auto;
+ `), c('+', [cB('drawer-footer__button', `
+ margin-left: auto;
+ `)])])])]), c('body', [c('>', [cB('drawer-container', {
   position: 'fixed'
 })])]), cB('drawer-container', `
  position: relative;
@@ -147,7 +176,7 @@ export default c([cB('drawer', `
  `, [c('> *', {
   pointerEvents: 'all'
 })]), cB('drawer-mask', `
- background-color: rgba(0, 0, 0, .3);
+ background-color: var(--u-mask-color);
  position: absolute;
  left: 0;
  right: 0;

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

@@ -0,0 +1,11 @@
+declare const _default: {
+    bodyPadding: string;
+    headerPadding: string;
+    footerPadding: string;
+    headerBorderBottom: string;
+    footerBorderTop: string;
+    closeBorderRadius: string;
+    subtitleMarginTop: string;
+    actionsSpace: string;
+};
+export default _default;

package/es/drawer/styles/_common.js

@@ -0,0 +1,10 @@
+export default {
+    bodyPadding: '32px',
+    headerPadding: '32px 32px 24px',
+    footerPadding: '24px 32px 32px',
+    headerBorderBottom: '1px solid transparent',
+    footerBorderTop: '1px solid transparent',
+    closeBorderRadius: '10px',
+    subtitleMarginTop: '16px',
+    actionsSpace: '16px'
+};