@uzum-tech/ui 1.4.2 → 1.5.0

package/es/_styles/common/_common.js

@@ -1,6 +1,7 @@
 export default {
     fontFamily: 'v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     fontFamilyMono: 'v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace',
+    fontFamilyWixMadeforDisplay: '"Wix Madefor Display", v-sans, system-ui, sans-serif',
     cubicBezierEaseInOut: 'cubic-bezier(.4, 0, .2, 1)',
     cubicBezierEaseOut: 'cubic-bezier(0, 0, .2, 1)',
     cubicBezierEaseIn: 'cubic-bezier(.4, 0, 1, 1)',
@@ -48,5 +49,6 @@ export default {
     closeMedium: '32px',
     closeLarge: '56px',
     closeHuge: '96px',
-    closeBorderRadius: '100%'
+    closeBorderRadius: '100%',
+    codeBorder: '1px solid #0000'
 };

package/es/_styles/common/light.d.ts

@@ -60,6 +60,7 @@ declare const derived: {
     shadowDepth: string;
     fontFamily: string;
     fontFamilyMono: string;
+    fontFamilyWixMadeforDisplay: string;
     cubicBezierEaseInOut: string;
     cubicBezierEaseOut: string;
     cubicBezierEaseIn: string;
@@ -108,6 +109,7 @@ declare const derived: {
     closeLarge: string;
     closeHuge: string;
     closeBorderRadius: string;
+    codeBorder: string;
     name: "common";
 };
 export default derived;

package/es/action-card/index.d.ts

@@ -0,0 +1,4 @@
+export { default as UActionCard } from './src/ActionCard';
+export type { ActionCardProps } from './src/ActionCard';
+export { actionCardLight, actionCardDark } from './styles';
+export type { ActionCardTheme, ActionCardThemeVars } from './styles';

package/es/action-card/index.js

@@ -0,0 +1,2 @@
+export { default as UActionCard } from './src/ActionCard';
+export { actionCardLight, actionCardDark } from './styles';

package/es/action-card/src/ActionCard.d.ts

@@ -0,0 +1,313 @@
+import { type PropType } from 'vue';
+import { type ExtractPublicPropTypes, type MaybeArray } from '../../_utils';
+export declare const actionCardProps: {
+    readonly title: StringConstructor;
+    readonly description: StringConstructor;
+    readonly icon: PropType<string | (() => any)>;
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly tag: {
+        readonly type: PropType<"button" | "a" | "div">;
+        readonly default: "div";
+    };
+    readonly descriptionLineClamp: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+};
+export type ActionCardProps = ExtractPublicPropTypes<typeof actionCardProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly title: StringConstructor;
+    readonly description: StringConstructor;
+    readonly icon: PropType<string | (() => any)>;
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly tag: {
+        readonly type: PropType<"button" | "a" | "div">;
+        readonly default: "div";
+    };
+    readonly descriptionLineClamp: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    mergedClassNames: import("vue").ComputedRef<(string | {
+        [x: string]: boolean;
+    } | undefined)[]>;
+    handleClick: (e: MouseEvent) => void;
+    cssVars: import("vue").ComputedRef<{
+        '--u-bezier': string;
+        '--u-border-radius': string;
+        '--u-padding': string;
+        '--u-background-color': string;
+        '--u-hover-background-color': string;
+        '--u-pressed-background-color': string;
+        '--u-icon-size': string;
+        '--u-icon-color': string;
+        '--u-icon-margin-bottom': string;
+        '--u-title-font-size': string;
+        '--u-title-font-weight': string;
+        '--u-title-line-height': string;
+        '--u-title-color': string;
+        '--u-disabled-color': string;
+        '--u-text-gap': string;
+        '--u-description-font-size': string;
+        '--u-description-font-weight': string;
+        '--u-description-line-height': string;
+        '--u-description-color': string;
+        '--u-min-height': string;
+        '--u-max-height': string;
+        '--u-width': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly title: StringConstructor;
+    readonly description: StringConstructor;
+    readonly icon: PropType<string | (() => any)>;
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly tag: {
+        readonly type: PropType<"button" | "a" | "div">;
+        readonly default: "div";
+    };
+    readonly descriptionLineClamp: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"ActionCard", {
+        minHeight: string;
+        maxHeight: string;
+        width: string;
+        borderRadius: string;
+        padding: string;
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        pressedBackgroundColor: string;
+        iconSize: string;
+        iconColor: string;
+        iconMarginBottom: string;
+        titleFontSize: string;
+        titleFontWeight: string;
+        titleLineHeight: string;
+        titleColor: string;
+        textGap: string;
+        descriptionFontSize: string;
+        descriptionFontWeight: string;
+        descriptionLineHeight: string;
+        descriptionColor: string;
+        disabledColor: string;
+    }, any>>>;
+}>>, {
+    readonly disabled: boolean;
+    readonly loading: boolean;
+    readonly tag: "a" | "div" | "button";
+    readonly descriptionLineClamp: number;
+}, {}>;
+export default _default;

package/es/action-card/src/ActionCard.js

@@ -0,0 +1,101 @@
+import { h, defineComponent, computed, Fragment } from 'vue';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { call } from '../../_utils';
+import { UBaseSkeleton } from '../../_internal';
+import { actionCardLight } from '../styles';
+import style from './styles/index.cssr';
+import { UEllipsis } from '../../ellipsis';
+export const actionCardProps = Object.assign(Object.assign({}, useTheme.props), { title: String, description: String, icon: [String, Object], disabled: {
+        type: Boolean,
+        default: false
+    }, loading: {
+        type: Boolean,
+        default: false
+    }, onClick: [Function, Array], tag: {
+        type: String,
+        default: 'div'
+    }, descriptionLineClamp: {
+        type: Number,
+        default: 1
+    } });
+export default defineComponent({
+    name: 'ActionCard',
+    props: actionCardProps,
+    setup(props) {
+        const { inlineThemeDisabled, mergedClsPrefixRef } = useConfig(props);
+        const themeRef = useTheme('ActionCard', '-action-card', style, actionCardLight, props, mergedClsPrefixRef);
+        const handleClick = (e) => {
+            if (props.disabled || props.loading)
+                return;
+            const { onClick } = props;
+            if (onClick)
+                call(onClick, e);
+        };
+        const cssVarsRef = computed(() => {
+            const { self: { borderRadius, padding, backgroundColor, hoverBackgroundColor, pressedBackgroundColor, iconSize, iconColor, iconMarginBottom, titleFontSize, titleFontWeight, titleLineHeight, titleColor, textGap, descriptionFontSize, descriptionFontWeight, descriptionLineHeight, descriptionColor, disabledColor, minHeight, maxHeight, width }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-border-radius': borderRadius,
+                '--u-padding': padding,
+                '--u-background-color': backgroundColor,
+                '--u-hover-background-color': hoverBackgroundColor,
+                '--u-pressed-background-color': pressedBackgroundColor,
+                '--u-icon-size': iconSize,
+                '--u-icon-color': iconColor,
+                '--u-icon-margin-bottom': iconMarginBottom,
+                '--u-title-font-size': titleFontSize,
+                '--u-title-font-weight': titleFontWeight,
+                '--u-title-line-height': titleLineHeight,
+                '--u-title-color': titleColor,
+                '--u-disabled-color': disabledColor,
+                '--u-text-gap': textGap,
+                '--u-description-font-size': descriptionFontSize,
+                '--u-description-font-weight': descriptionFontWeight,
+                '--u-description-line-height': descriptionLineHeight,
+                '--u-description-color': descriptionColor,
+                '--u-min-height': minHeight,
+                '--u-max-height': maxHeight,
+                '--u-width': width
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('action-card', undefined, cssVarsRef, props)
+            : undefined;
+        const mergedClassNames = computed(() => {
+            return [
+                `${mergedClsPrefixRef.value}-action-card`,
+                themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value,
+                {
+                    [`${mergedClsPrefixRef.value}-action-card--disabled`]: props.disabled,
+                    [`${mergedClsPrefixRef.value}-action-card--loading`]: props.loading,
+                    [`${mergedClsPrefixRef.value}-action-card--height-auto`]: props.descriptionLineClamp > 1
+                }
+            ];
+        });
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedClassNames,
+            handleClick,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        const { mergedClsPrefix, mergedClassNames, handleClick, title, description, icon, loading, disabled, tag: Component, onRender, descriptionLineClamp } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h(Component, { class: mergedClassNames, onClick: handleClick, role: "button", tabindex: disabled || loading ? -1 : 0, style: this.cssVars },
+            loading && (h("div", { class: `${mergedClsPrefix}-action-card__skeleton` },
+                icon && (h("div", { class: `${mergedClsPrefix}-action-card__skeleton-icon` },
+                    h(UBaseSkeleton, { circle: true, width: "var(--u-icon-size)", height: "var(--u-icon-size)" }))),
+                h("div", { class: `${mergedClsPrefix}-action-card__skeleton-text` },
+                    h(UBaseSkeleton, { height: "var(--u-title-line-height)", width: "60%" }),
+                    description && (h(Fragment, null, Array.from({ length: descriptionLineClamp }).map((_, i) => (h(UBaseSkeleton, { key: i, height: "var(--u-description-line-height)", width: "80%" })))))))),
+            !loading && (h("div", { class: `${mergedClsPrefix}-action-card__content` },
+                icon && !loading && (h("div", { class: `${mergedClsPrefix}-action-card__icon` }, typeof icon === 'function' ? icon() : icon)),
+                h("div", { class: `${mergedClsPrefix}-action-card__text` },
+                    title && !loading && (h("div", { class: `${mergedClsPrefix}-action-card__title` }, title)),
+                    description && !loading && (h("div", { class: `${mergedClsPrefix}-action-card__description` },
+                        h(UEllipsis, { lineClamp: descriptionLineClamp }, description))))))));
+    }
+});

package/es/action-card/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/action-card/src/styles/index.cssr.js

@@ -0,0 +1,113 @@
+import { c, cB, cE, cM } from '../../../_utils/cssr';
+// vars:
+// --u-bezier
+// --u-width
+// --u-min-height
+// --u-max-height
+// --u-border-radius
+// --u-padding
+// --u-background-color
+// --u-hover-background-color
+// --u-pressed-background-color
+// --u-icon-size
+// --u-icon-color
+// --u-icon-margin-bottom
+// --u-title-font-size
+// --u-title-font-weight
+// --u-title-line-height
+// --u-title-color
+// --u-text-gap
+// --u-description-font-size
+// --u-description-font-weight
+// --u-description-line-height
+// --u-description-color
+// --u-disabled-color
+export default cB('action-card', `
+ position: relative;
+ width: var(--u-width);
+ min-height: var(--u-min-height);
+ max-height: var(--u-max-height);
+ border-radius: var(--u-border-radius);
+ padding: var(--u-padding);
+ background-color: var(--u-background-color);
+ cursor: pointer;
+ transition: background-color var(--u-bezier);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: hidden;
+ user-select: none;
+ box-sizing: border-box;
+ border: none;
+ display: inline-flex;
+ text-align: left;
+ text-decoration: none;
+ 
+ font-style: inherit;
+ font-variant-ligatures: inherit;
+ font-weight: inherit;
+ font-size: inherit;
+ font-family: inherit;
+ text-rendering: inherit;
+ color: inherit;
+ text-align: inherit;
+`, [cM('height-auto', `
+ max-height: none;
+ `), cM('disabled', `
+ cursor: not-allowed;
+ color: var(--u-disabled-color);
+ `, [cE('icon', `
+ color: var(--u-disabled-color);
+ `), cE('title', `
+ color: var(--u-disabled-color);
+ `), cE('description', `
+ color: var(--u-disabled-color);
+ `)]), cM('loading', `
+ cursor: default;
+ `), cE('skeleton', `
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ flex: 1;
+ `), cE('skeleton-icon', `
+ margin-bottom: var(--u-icon-margin-bottom);
+ flex-shrink: 0;
+ `), cE('skeleton-text', `
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ justify-content: end;
+ gap: var(--u-text-gap);
+ `), cE('content', `
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ flex: 1;
+ `), cE('icon', `
+ height: var(--u-icon-size);
+ width: var(--u-icon-size);
+ font-size: var(--u-icon-size);
+ color: var(--u-icon-color);
+ margin-bottom: var(--u-icon-margin-bottom);
+ flex-shrink: 0;
+ `), cE('text', `
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ gap: var(--u-text-gap);
+ justify-content: end;
+ `), cE('title', `
+ font-size: var(--u-title-font-size);
+ font-weight: var(--u-title-font-weight);
+ line-height: var(--u-title-line-height);
+ color: var(--u-title-color);
+ `), cE('description', `
+ font-size: var(--u-description-font-size);
+ font-weight: var(--u-description-font-weight);
+ line-height: var(--u-description-line-height);
+ color: var(--u-description-color);
+ `), c('&:hover:not(.u-action-card--disabled):not(.u-action-card--loading)', `
+ background-color: var(--u-hover-background-color);
+ `), c('&:active:not(.u-action-card--disabled):not(.u-action-card--loading)', `
+ background-color: var(--u-pressed-background-color);
+ `)]);

package/es/action-card/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { ActionCardTheme } from './light';
+declare const actionCardDark: ActionCardTheme;
+export default actionCardDark;

package/es/action-card/styles/dark.js

@@ -0,0 +1,11 @@
+import { commonDark } from '../../_styles/common';
+import { self } from './light';
+const actionCardDark = {
+    name: 'ActionCard',
+    common: commonDark,
+    self: (vars) => {
+        const lightVars = self(vars);
+        return Object.assign({}, lightVars);
+    }
+};
+export default actionCardDark;

package/es/action-card/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as actionCardDark } from './dark';
+export { default as actionCardLight } from './light';
+export type { ActionCardTheme, ActionCardThemeVars } from './light';

package/es/action-card/styles/index.js

@@ -0,0 +1,2 @@
+export { default as actionCardDark } from './dark';
+export { default as actionCardLight } from './light';

package/es/action-card/styles/light.d.ts

@@ -0,0 +1,29 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import type { Theme } from '../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    minHeight: string;
+    maxHeight: string;
+    width: string;
+    borderRadius: string;
+    padding: string;
+    backgroundColor: string;
+    hoverBackgroundColor: string;
+    pressedBackgroundColor: string;
+    iconSize: string;
+    iconColor: string;
+    iconMarginBottom: string;
+    titleFontSize: string;
+    titleFontWeight: string;
+    titleLineHeight: string;
+    titleColor: string;
+    textGap: string;
+    descriptionFontSize: string;
+    descriptionFontWeight: string;
+    descriptionLineHeight: string;
+    descriptionColor: string;
+    disabledColor: string;
+};
+export type ActionCardThemeVars = ReturnType<typeof self>;
+declare const actionCardLight: Theme<'ActionCard', ActionCardThemeVars>;
+export default actionCardLight;
+export type ActionCardTheme = typeof actionCardLight;

package/es/action-card/styles/light.js

@@ -0,0 +1,33 @@
+import { commonLight } from '../../_styles/common';
+export const self = (vars) => {
+    const { borderRadiusLarge, elementsQuaternary, elementsTertiary, elementsQuinary, textTertiary, textPrimary, textSecondary, fontWeightStrong, lineHeightBodyLarge, iconSmall, fontBodyLarge, fontWeight } = vars;
+    return {
+        minHeight: '148px',
+        maxHeight: '148px',
+        width: '288px',
+        borderRadius: borderRadiusLarge,
+        padding: '24px',
+        backgroundColor: elementsTertiary,
+        hoverBackgroundColor: elementsQuaternary,
+        pressedBackgroundColor: elementsQuinary,
+        iconSize: iconSmall,
+        iconColor: textPrimary,
+        iconMarginBottom: '24px',
+        titleFontSize: fontBodyLarge,
+        titleFontWeight: fontWeightStrong,
+        titleLineHeight: lineHeightBodyLarge,
+        titleColor: textPrimary,
+        textGap: '4px',
+        descriptionFontSize: fontBodyLarge,
+        descriptionFontWeight: fontWeight,
+        descriptionLineHeight: lineHeightBodyLarge,
+        descriptionColor: textSecondary,
+        disabledColor: textTertiary
+    };
+};
+const actionCardLight = {
+    name: 'ActionCard',
+    common: commonLight,
+    self
+};
+export default actionCardLight;