@workday/canvas-kit-react/dist/es6/text/lib/Text.d.ts

The parent module that contains all Workday Canvas Kit React components

import { BoxProps } from '@workday/canvas-kit-react/layout';
import { system } from '@workday/canvas-tokens-web';
type TypeSize = 'large' | 'medium' | 'small';
type TokenName = `${keyof typeof system.legacy.type}.${TypeSize}`;
export interface TextProps extends BoxProps {
    /**
     * Type token as string with level and size separated by dot.
     * These values map to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles).
     *
     * ```tsx
     * <Text typeLevel="body.small">Small body text</Text>
     * ```
     */
    typeLevel?: TokenName;
    /**
     * Type variant token names: `error`, `hint` or `inverse`.
     *
     * ```tsx
     * <Text variant="error" typeLevel="subtext.large">Error text</Text>
     * ```
     */
    variant?: 'error' | 'hint' | 'inverse';
}
export declare const textStencil: import("@workday/canvas-kit-styling").Stencil<{
    typeLevel: {
        'title.large': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
            lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
            color: "--cnvs-sys-color-fg-strong";
        };
        'title.medium': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
            lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
            color: "--cnvs-sys-color-fg-strong";
        };
        'title.small': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
            fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
            color: "--cnvs-sys-color-fg-strong";
        };
        'heading.large': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
            lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
            color: "--cnvs-sys-color-fg-strong";
        };
        'heading.medium': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
            lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
            color: "--cnvs-sys-color-fg-strong";
        };
        'heading.small': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
            lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
            color: "--cnvs-sys-color-fg-strong";
        };
        'body.large': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
            lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
            color: "--cnvs-sys-color-fg-default";
        };
        'body.medium': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
            lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
            color: "--cnvs-sys-color-fg-default";
        };
        'body.small': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
            lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
            color: "--cnvs-sys-color-fg-default";
        };
        'subtext.large': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
            lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
            color: "--cnvs-sys-color-fg-default";
        };
        'subtext.medium': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
            lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
            color: "--cnvs-sys-color-fg-default";
        };
        'subtext.small': {
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
            lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
            letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
            color: "--cnvs-sys-color-fg-default";
        };
    };
    variant: {
        error: {
            color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
        };
        hint: {
            color: "--cnvs-sys-color-fg-muted-default";
        };
        inverse: {
            color: "--cnvs-sys-color-fg-inverse";
        };
    };
}, {}, {}, never, never>;
/**
 * This is a generic base component intended to render any text.
 * It has `typeLevel` and `variant` style props that simplify navigating
 * our type hierarchy and using [Canvas type tokens](https://canvas.workday.com/tokens/type#type-styles).
 * By default, it renders a semantic `span` element,
 * but you can adjust this as needed with the `as` prop.
 *
 * The type hierarchy is organized into four levels, which correspond to our [Canvas type
 * levels](https://canvas.workday.com/tokens/type#type-styles).
 *
 * - `title`: Intended to be used for large page titles.
 * - `heading`: Intended to be used for headings and large text.
 * - `body`: Intended to be used for standard body text.
 * - `subtext`: Intended to be used for small subtext content or in tight spaces.
 *
 * Each level has three sizes: `large`, `medium`, and `small`.
 *
 * You can provide any level and size to the `typeLevel` prop, and it will apply the correct styles
 * accordingly. In the example below we're providing the `subtext` level and `small` size to the
 * component with the value `subtext.small`.
 *
 * ```tsx
 * import { Text } from '@workday/canvas-kit-react/text';
 *
 * const CustomErrorText = () => (
 *   <Text typeLevel="subtext.small" variant="error">
 *     Error Text
 *   </Text>
 * );
 * ```
 */
export declare const Text: import("@workday/canvas-kit-react/common").ElementComponent<"span", TextProps>;
export {};
//# sourceMappingURL=Text.d.ts.map