@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
160 lines • 6.79 kB
TypeScript
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