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

The parent module that contains all Workday Canvas Kit React components

import { system } from '@workday/canvas-tokens-web';
import { BoxProps } from '@workday/canvas-kit-react/layout';
type TypeSize = 'large' | 'medium' | 'small';
type TokenName = `${keyof typeof system.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': {
            color: "--cnvs-sys-color-text-strong";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            lineHeight: "--cnvs-sys-line-height-title-large";
            fontSize: "--cnvs-sys-font-size-title-large";
        };
        'title.medium': {
            color: "--cnvs-sys-color-text-strong";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            lineHeight: "--cnvs-sys-line-height-title-medium";
            fontSize: "--cnvs-sys-font-size-title-medium";
        };
        'title.small': {
            color: "--cnvs-sys-color-text-strong";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            lineHeight: "--cnvs-sys-line-height-title-small";
            fontSize: "--cnvs-sys-font-size-title-small";
        };
        'heading.large': {
            color: "--cnvs-sys-color-text-strong";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            lineHeight: "--cnvs-sys-line-height-heading-large";
            fontSize: "--cnvs-sys-font-size-heading-large";
        };
        'heading.medium': {
            color: "--cnvs-sys-color-text-strong";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            lineHeight: "--cnvs-sys-line-height-heading-medium";
            fontSize: "--cnvs-sys-font-size-heading-medium";
        };
        'heading.small': {
            color: "--cnvs-sys-color-text-strong";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-bold";
            lineHeight: "--cnvs-sys-line-height-heading-small";
            fontSize: "--cnvs-sys-font-size-heading-small";
        };
        'body.large': {
            color: "--cnvs-sys-color-text-default";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            lineHeight: "--cnvs-sys-line-height-body-large";
            fontSize: "--cnvs-sys-font-size-body-large";
        };
        'body.medium': {
            color: "--cnvs-sys-color-text-default";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            lineHeight: "--cnvs-sys-line-height-body-medium";
            fontSize: "--cnvs-sys-font-size-body-medium";
        };
        'body.small': {
            color: "--cnvs-sys-color-text-default";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            lineHeight: "--cnvs-sys-line-height-body-small";
            fontSize: "--cnvs-sys-font-size-body-small";
            letterSpacing: "--cnvs-base-letter-spacing-200";
        };
        'subtext.large': {
            color: "--cnvs-sys-color-text-default";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            lineHeight: "--cnvs-sys-line-height-subtext-large";
            fontSize: "--cnvs-sys-font-size-subtext-large";
            letterSpacing: "--cnvs-base-letter-spacing-150";
        };
        'subtext.medium': {
            color: "--cnvs-sys-color-text-default";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            lineHeight: "--cnvs-sys-line-height-subtext-medium";
            fontSize: "--cnvs-sys-font-size-subtext-medium";
            letterSpacing: "--cnvs-base-letter-spacing-100";
        };
        'subtext.small': {
            color: "--cnvs-sys-color-text-default";
            fontFamily: "--cnvs-sys-font-family-default";
            fontWeight: "--cnvs-sys-font-weight-normal";
            lineHeight: "--cnvs-sys-line-height-subtext-small";
            fontSize: "--cnvs-sys-font-size-subtext-small";
            letterSpacing: "--cnvs-base-letter-spacing-50";
        };
    };
    variant: {
        error: {
            color: "--cnvs-sys-color-text-critical-default";
        };
        hint: {
            color: "--cnvs-sys-color-text-hint";
        };
        inverse: {
            color: "--cnvs-sys-color-text-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