UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

160 lines 6.79 kB
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