@uzum-tech/ui 1.4.1 → 1.5.0

package/es/_internal/icons/SiderUnionBorder.js

@@ -3,6 +3,6 @@ export default defineComponent({
     name: 'SiderUnionBorder',
     render() {
         return (h("svg", { viewBox: "0 0 35 82", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            h("path", { d: "M15 0L0 0V82H15V72.0682C15 67.6499 18.7463 64.209 22.7412 62.3215C29.9427 58.9189 35 50.9123 35 41.5775C35 32.2426 29.9427 24.236 22.7412 20.8334C18.7463 18.946 15 15.505 15 11.0867V0Z", fill: "currentColor" })));
+            h("path", { d: "M15 0L0 0V82H15V72.0682C15 67.6499 18.7463 64.209 22.7412 62.3215C29.9427 58.9189 35 50.9123 35 41.5775C35 32.2426 29.9427 24.236 22.7412 20.8334C18.7463 18.946 15 15.505 15 11.0867V0Z", fill: "#fff" })));
     }
 });

package/es/_internal/index.d.ts

@@ -23,3 +23,5 @@ export type { CheckboxBaseProps, UseCheckbox, OnUpdateChecked, OnUpdateCheckedIm
 export { radioBaseProps, radioGroupInjectionKey, useRadio } from './radio';
 export type { OnUpdateValue, OnUpdateValueImpl, RadioGroupInjection, UseRadio, RadioBaseProps } from './radio';
 export { default as UBaseAccountOption } from './account-option';
+export { default as InternalUText, internalTextProps } from './typography/src/text';
+export type { InternalTextProps } from './typography/src/text';

package/es/_internal/index.js

@@ -16,3 +16,4 @@ export { UScrollbar, UxScrollbar } from './scrollbar';
 export { checkboxGroupInjectionKey, checkboxBaseProps, useCheckbox } from './checkbox';
 export { radioBaseProps, radioGroupInjectionKey, useRadio } from './radio';
 export { default as UBaseAccountOption } from './account-option';
+export { default as InternalUText, internalTextProps } from './typography/src/text';

package/es/_internal/typography/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InternalUText, internalTextProps } from './src/text';
+export type { InternalTextProps } from './src/text';

package/es/_internal/typography/index.js

@@ -0,0 +1 @@
+export { default as InternalUText, internalTextProps } from './src/text';

package/es/_internal/typography/src/styles/text.cssr.d.ts

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

package/es/_internal/typography/src/styles/text.cssr.js

@@ -0,0 +1,78 @@
+import { cB, cM, c } from '../../../../_utils/cssr';
+// vars:
+// --u-text-color
+// --u-font-weight-strong
+// --u-font-famliy-mono
+// --u-code-border-radius
+// --u-code-text-color
+// --u-code-color
+// --u-code-border
+export default cB('text', `
+ transition: color .3s var(--u-bezier);
+ color: var(--u-text-color);
+ margin: 0;
+ padding: 0;
+`, [cM('strong', `
+ font-weight: var(--u-font-weight-strong);
+ `), cM('italic', {
+  fontStyle: 'italic'
+}), cM('underline', {
+  textDecoration: 'underline'
+}), cM('strikethrough', {
+  textDecoration: 'line-through'
+}), cM('variant', `
+ font-family: var(--u-variant-font-family);
+ font-size: var(--u-variant-font-size);
+ font-weight: var(--u-variant-font-weight);
+ line-height: var(--u-variant-line-height);
+ letter-spacing: var(--u-variant-letter-spacing);
+ font-style: var(--u-variant-font-style);
+ `), c('code&', `
+ line-height: 1.4;
+ display: inline-block;
+ font-family: var(--u-font-famliy-mono);
+ transition: 
+ color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier);
+ box-sizing: border-box;
+ padding: .05em .35em 0 .35em;
+ border-radius: var(--u-code-border-radius);
+ font-size: .9em;
+ color: var(--u-code-text-color);
+ background-color: var(--u-code-color);
+ border: var(--u-code-border);
+ `), c('blockquote&', `
+ font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ margin: 0;
+ margin-top: 12px;
+ margin-bottom: 12px;
+ box-sizing: border-box;
+ padding-left: 12px;
+ border-left: 4px solid var(--u-prefix-color);
+ color: var(--u-text-color);
+ transition:
+ color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier);
+ `, [c('&:first-child', {
+  marginTop: 0
+}), c('&:last-child', {
+  marginBottom: 0
+}), cM('align-text', {
+  marginLeft: '-16px'
+})]), c('a&', `
+ cursor: pointer;
+ transition:
+ color .3s var(--u-bezier),
+ text-decoration-color .3s var(--u-bezier);
+ text-decoration-color: var(--u-text-color);
+ color: var(--u-a-text-color);
+ `), c('p&', `
+ box-sizing: border-box;
+ transition: color .3s var(--u-bezier);
+ margin: var(--u-margin);
+ font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ color: var(--u-text-color);
+ `, [c('&:first-child', 'margin-top: 0;'), c('&:last-child', 'margin-bottom: 0;')])]);

package/es/_internal/typography/src/text.d.ts

@@ -0,0 +1,246 @@
+import { type PropType, ExtractPublicPropTypes } from 'vue';
+import { TypographyVariant } from './variants';
+export declare const internalTextProps: {
+    readonly variant: {
+        readonly type: PropType<TypographyVariant>;
+        readonly default: undefined;
+    };
+    readonly tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: undefined;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: PropType<"default" | "success" | "info" | "warning" | "error">;
+        readonly default: "default";
+    };
+    readonly strong: BooleanConstructor;
+    readonly italic: BooleanConstructor;
+    readonly underline: BooleanConstructor;
+    readonly strikethrough: BooleanConstructor;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+};
+export type InternalTextProps = ExtractPublicPropTypes<typeof internalTextProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly variant: {
+        readonly type: PropType<TypographyVariant>;
+        readonly default: undefined;
+    };
+    readonly tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: undefined;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: PropType<"default" | "success" | "info" | "warning" | "error">;
+        readonly default: "default";
+    };
+    readonly strong: BooleanConstructor;
+    readonly italic: BooleanConstructor;
+    readonly underline: BooleanConstructor;
+    readonly strikethrough: BooleanConstructor;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+}, {
+    mergedClsPrefix: import("vue").Ref<string>;
+    tagToRender: keyof HTMLElementTagNameMap;
+    cssVars: import("vue").ComputedRef<Record<string, 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 variant: {
+        readonly type: PropType<TypographyVariant>;
+        readonly default: undefined;
+    };
+    readonly tag: {
+        readonly type: PropType<keyof HTMLElementTagNameMap>;
+        readonly default: undefined;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: PropType<"default" | "success" | "info" | "warning" | "error">;
+        readonly default: "default";
+    };
+    readonly strong: BooleanConstructor;
+    readonly italic: BooleanConstructor;
+    readonly underline: BooleanConstructor;
+    readonly strikethrough: BooleanConstructor;
+    readonly theme: PropType<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Typography", {
+        margin: string;
+        aTextColor: string;
+        blockquoteTextColor: string;
+        blockquotePrefixColor: string;
+        codeBorderRadius: string;
+        fontSize: string;
+        lineHeight: string;
+        textColor: string;
+        textColorPrimary: string;
+        textColorInfo: string;
+        textColorSuccess: string;
+        textColorWarning: string;
+        textColorError: string;
+        codeTextColor: string;
+        codeColor: string;
+        codeBorder: string;
+    }, any>>>;
+}>>, {
+    readonly type: "default" | "info" | "success" | "warning" | "error";
+    readonly tag: keyof HTMLElementTagNameMap;
+    readonly strong: boolean;
+    readonly text: string;
+    readonly italic: boolean;
+    readonly underline: boolean;
+    readonly strikethrough: boolean;
+    readonly variant: TypographyVariant;
+}, {}>;
+export default _default;

package/es/_internal/typography/src/text.js

@@ -0,0 +1,79 @@
+import { h, defineComponent, computed } from 'vue';
+import { typographyLight } from '../styles';
+import style from './styles/text.cssr';
+import { getVariantCssVars, getVariantTag } from './variants';
+import { useTheme, useConfig, useThemeClass } from '../../../_mixins';
+import { createKey } from '../../../_utils/cssr';
+export const internalTextProps = Object.assign(Object.assign({}, useTheme.props), { variant: {
+        type: String,
+        default: undefined
+    }, tag: {
+        type: String,
+        default: undefined
+    }, text: {
+        type: String,
+        default: undefined
+    }, type: {
+        type: String,
+        default: 'default'
+    }, strong: Boolean, italic: Boolean, underline: Boolean, strikethrough: Boolean });
+export default defineComponent({
+    name: 'InternalUText',
+    props: internalTextProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme('Typography', '-text', style, typographyLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { variant } = props;
+            const textColorKey = props.type === 'default'
+                ? 'textColor'
+                : createKey('textColor', props.type);
+            const { common: { fontWeightStrong, fontFamilyMono, cubicBezierEaseInOut, fontFamilyWixMadeforDisplay }, self: { aTextColor, codeTextColor, codeBorderRadius, codeColor, codeBorder, [textColorKey]: textColor, fontSize, lineHeight, margin, blockquotePrefixColor } } = themeRef.value;
+            const baseVars = {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-a-text-color': aTextColor,
+                '--u-text-color': textColor,
+                '--u-font-weight-strong': fontWeightStrong,
+                '--u-font-famliy-mono': fontFamilyMono,
+                '--u-code-border-radius': codeBorderRadius,
+                '--u-code-text-color': codeTextColor,
+                '--u-code-color': codeColor,
+                '--u-code-border': codeBorder,
+                '--u-font-size': fontSize,
+                '--u-line-height': lineHeight,
+                '--u-margin': margin,
+                '--u-prefix-color': blockquotePrefixColor
+            };
+            return getVariantCssVars(variant, baseVars, fontFamilyWixMadeforDisplay);
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('text', computed(() => `${(props === null || props === void 0 ? void 0 : props.variant) || ''}${(props === null || props === void 0 ? void 0 : props.tag) || ''}`), cssVarsRef, props)
+            : undefined;
+        const tagToRender = props.tag || (props.variant && getVariantTag(props.variant)) || 'span';
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            tagToRender,
+            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() {
+        var _a, _b, _c;
+        const { mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const textClass = [
+            `${mergedClsPrefix}-text`,
+            this.themeClass,
+            {
+                [`${mergedClsPrefix}-text--variant`]: this.variant,
+                [`${mergedClsPrefix}-text--strong`]: this.strong,
+                [`${mergedClsPrefix}-text--italic`]: this.italic,
+                [`${mergedClsPrefix}-text--underline`]: this.underline,
+                [`${mergedClsPrefix}-text--strikethrough`]: this.strikethrough
+            }
+        ];
+        const children = this.text || ((_c = (_b = this.$slots).default) === null || _c === void 0 ? void 0 : _c.call(_b));
+        return h(this.tagToRender, { class: textClass, style: this.cssVars }, children);
+    }
+});

package/es/_internal/typography/src/variants.d.ts

@@ -0,0 +1,13 @@
+export type TypographyVariant = 'display-l' | 'display-s' | 'heading-l-semi-bold' | 'heading-l-bold' | 'heading-m-semi-bold' | 'heading-m-bold' | 'heading-s-semi-bold' | 'heading-s-bold' | 'title-l-medium' | 'title-l-semi-bold' | 'title-l-bold' | 'title-m-medium' | 'title-m-semi-bold' | 'title-m-bold' | 'title-s-medium' | 'title-s-semi-bold' | 'title-s-bold' | 'body-l-medium' | 'body-l-semi-bold' | 'body-l-bold' | 'body-m-medium' | 'body-m-semi-bold' | 'body-m-bold' | 'body-s-medium' | 'body-s-semi-bold' | 'body-s-bold';
+export interface TypographyVariantConfig {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    fontStyle: string;
+    lineHeight: string;
+    letterSpacing: string;
+    tag: keyof HTMLElementTagNameMap;
+}
+export declare function getVariantCssVars(variant: TypographyVariant | undefined, baseVars: Record<string, string>, fontFamilyVariant: string): Record<string, string>;
+export declare function getVariantTag(variant: TypographyVariant): keyof HTMLElementTagNameMap;
+export declare const variantToCssVars: Record<TypographyVariant, TypographyVariantConfig>;

package/es/_internal/typography/src/variants.js

@@ -0,0 +1,132 @@
+const fontFamily = 'var(--u-font-famliy-variant)';
+const baseStyles = {
+    display: {
+        l: {
+            fontSize: '42px',
+            lineHeight: '48px',
+            letterSpacing: '-0.014em',
+            tag: 'h1'
+        },
+        s: {
+            fontSize: '36px',
+            lineHeight: '44px',
+            letterSpacing: '-0.013em',
+            tag: 'h1'
+        }
+    },
+    heading: {
+        l: {
+            fontSize: '32px',
+            lineHeight: '40px',
+            letterSpacing: '-0.01em',
+            tag: 'h2'
+        },
+        m: {
+            fontSize: '28px',
+            lineHeight: '36px',
+            letterSpacing: '-0.009em',
+            tag: 'h2'
+        },
+        s: {
+            fontSize: '24px',
+            lineHeight: '30px',
+            letterSpacing: '-0.01em',
+            tag: 'h2'
+        }
+    },
+    title: {
+        l: {
+            fontSize: '22px',
+            lineHeight: '32px',
+            letterSpacing: '-0.01em',
+            tag: 'h3'
+        },
+        m: {
+            fontSize: '20px',
+            lineHeight: '30px',
+            letterSpacing: '-0.009em',
+            tag: 'h3'
+        },
+        s: { fontSize: '18px', lineHeight: '28px', letterSpacing: '0', tag: 'h3' }
+    },
+    body: {
+        l: {
+            fontSize: '16px',
+            lineHeight: '24px',
+            letterSpacing: '0.004em',
+            tag: 'p'
+        },
+        m: {
+            fontSize: '14px',
+            lineHeight: '21px',
+            letterSpacing: '0.006em',
+            tag: 'p'
+        },
+        s: {
+            fontSize: '12px',
+            lineHeight: '16px',
+            letterSpacing: '0.008em',
+            tag: 'p'
+        }
+    }
+};
+const fontWeights = {
+    medium: { weight: '500', style: 'medium' },
+    'semi-bold': { weight: '600', style: 'semibold' },
+    bold: { weight: '700', style: 'bold' }
+};
+function createVariant(category, size, weight) {
+    const base = baseStyles[category][size];
+    const { weight: fontWeight, style: fontStyle } = fontWeights[weight];
+    return {
+        fontFamily,
+        fontSize: base.fontSize,
+        fontWeight,
+        fontStyle,
+        lineHeight: base.lineHeight,
+        letterSpacing: base.letterSpacing,
+        tag: base.tag
+    };
+}
+export function getVariantCssVars(variant, baseVars, fontFamilyVariant) {
+    if (!variant || !variantToCssVars[variant]) {
+        return baseVars;
+    }
+    const variantStyles = variantToCssVars[variant];
+    return Object.assign(Object.assign({}, baseVars), { '--u-font-famliy-variant': fontFamilyVariant, '--u-variant-font-size': variantStyles.fontSize, '--u-variant-font-weight': variantStyles.fontWeight, '--u-variant-line-height': variantStyles.lineHeight, '--u-variant-font-family': variantStyles.fontFamily, '--u-variant-font-style': variantStyles.fontStyle, '--u-variant-letter-spacing': variantStyles.letterSpacing });
+}
+export function getVariantTag(variant) {
+    return variantToCssVars[variant].tag;
+}
+export const variantToCssVars = {
+    // Display variants
+    'display-l': createVariant('display', 'l', 'bold'),
+    'display-s': createVariant('display', 's', 'bold'),
+    // Heading variants
+    'heading-l-semi-bold': createVariant('heading', 'l', 'semi-bold'),
+    'heading-l-bold': createVariant('heading', 'l', 'bold'),
+    'heading-m-semi-bold': createVariant('heading', 'm', 'semi-bold'),
+    'heading-m-bold': createVariant('heading', 'm', 'bold'),
+    'heading-s-semi-bold': createVariant('heading', 's', 'semi-bold'),
+    'heading-s-bold': createVariant('heading', 's', 'bold'),
+    // Title variants
+    'title-l-medium': createVariant('title', 'l', 'medium'),
+    'title-l-semi-bold': createVariant('title', 'l', 'semi-bold'),
+    'title-l-bold': createVariant('title', 'l', 'bold'),
+    'title-m-medium': createVariant('title', 'm', 'medium'),
+    'title-m-semi-bold': createVariant('title', 'm', 'semi-bold'),
+    'title-m-bold': createVariant('title', 'm', 'bold'),
+    'title-s-medium': createVariant('title', 's', 'medium'),
+    'title-s-semi-bold': createVariant('title', 's', 'semi-bold'),
+    'title-s-bold': createVariant('title', 's', 'bold'),
+    // Body variants
+    'body-l-medium': createVariant('body', 'l', 'medium'),
+    'body-l-semi-bold': createVariant('body', 'l', 'semi-bold'),
+    'body-l-bold': createVariant('body', 'l', 'bold'),
+    'body-m-medium': createVariant('body', 'm', 'medium'),
+    'body-m-semi-bold': createVariant('body', 'm', 'semi-bold'),
+    'body-m-bold': createVariant('body', 'm', 'bold'),
+    'body-s-medium': createVariant('body', 's', 'medium'),
+    'body-s-semi-bold': createVariant('body', 's', 'semi-bold'),
+    'body-s-bold': createVariant('body', 's', 'bold')
+};

package/es/_internal/typography/styles/dark.d.ts

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

package/es/_internal/typography/styles/dark.js

@@ -0,0 +1,8 @@
+import { commonDark } from '../../../styles';
+import { self } from './light';
+const typographyDark = {
+    name: 'Typography',
+    common: commonDark,
+    self
+};
+export default typographyDark;

package/es/_internal/typography/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as typographyDark } from './dark';
+export { default as typographyLight } from './light';
+export type { TypographyThemeVars, TypographyTheme } from './light';

package/es/_internal/typography/styles/index.js

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

package/es/_internal/typography/styles/light.d.ts

@@ -0,0 +1,24 @@
+import { Theme } from '../../../_mixins';
+import { ThemeCommonVars } from '../../../config-provider';
+export declare const self: (vars: ThemeCommonVars) => {
+    margin: string;
+    aTextColor: string;
+    blockquoteTextColor: string;
+    blockquotePrefixColor: string;
+    codeBorderRadius: string;
+    fontSize: string;
+    lineHeight: string;
+    textColor: string;
+    textColorPrimary: string;
+    textColorInfo: string;
+    textColorSuccess: string;
+    textColorWarning: string;
+    textColorError: string;
+    codeTextColor: string;
+    codeColor: string;
+    codeBorder: string;
+};
+export type TypographyThemeVars = ReturnType<typeof self>;
+declare const typographyLight: Theme<'Typography', TypographyThemeVars>;
+export default typographyLight;
+export type TypographyTheme = typeof typographyLight;

package/es/_internal/typography/styles/light.js

@@ -0,0 +1,28 @@
+import { commonLight } from '../../../styles';
+export const self = (vars) => {
+    const { borderRadiusSmall, brandPrimary500, elementsQuaternary, textPrimary, brandQuaternary500, staticRed, staticOrange, staticGreen, elementsTertiary, fontBodyMedium, lineHeightBodyMedium, codeBorder } = vars;
+    return {
+        margin: '16px 0 16px 0',
+        aTextColor: brandPrimary500,
+        blockquoteTextColor: textPrimary,
+        blockquotePrefixColor: elementsQuaternary,
+        codeBorderRadius: borderRadiusSmall,
+        fontSize: fontBodyMedium,
+        lineHeight: lineHeightBodyMedium,
+        textColor: textPrimary,
+        textColorPrimary: brandPrimary500,
+        textColorInfo: brandQuaternary500,
+        textColorSuccess: staticGreen,
+        textColorWarning: staticOrange,
+        textColorError: staticRed,
+        codeTextColor: textPrimary,
+        codeColor: elementsTertiary,
+        codeBorder
+    };
+};
+const typographyLight = {
+    name: 'Typography',
+    common: commonLight,
+    self
+};
+export default typographyLight;