@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
71 lines (70 loc) • 6.28 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { system } from '@workday/canvas-tokens-web';
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil } from '@workday/canvas-kit-styling';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
export const textStencil = createStencil({
base: { name: "43uvhp", styles: "box-sizing:border-box;" },
modifiers: {
typeLevel: {
// Title level styles
'title.large': { name: "404jg3", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-large);font-size:var(--cnvs-sys-font-size-title-large);color:var(--cnvs-sys-color-text-strong);" },
'title.medium': { name: "3jd5k9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);color:var(--cnvs-sys-color-text-strong);" },
'title.small': { name: "3f3zt2", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);color:var(--cnvs-sys-color-text-strong);" },
// Heading level styles
'heading.large': { name: "407elo", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-large);font-size:var(--cnvs-sys-font-size-heading-large);color:var(--cnvs-sys-color-text-strong);" },
'heading.medium': { name: "bn0f0", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);color:var(--cnvs-sys-color-text-strong);" },
'heading.small': { name: "12hwj5", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-small);font-size:var(--cnvs-sys-font-size-heading-small);color:var(--cnvs-sys-color-text-strong);" },
// Body level styles
'body.large': { name: "2i8dxj", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-large);font-size:var(--cnvs-sys-font-size-body-large);color:var(--cnvs-sys-color-text-default);" },
'body.medium': { name: "2vu7uk", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-default);" },
'body.small': { name: "384qg4", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
// Subtext level styles
'subtext.large': { name: "28y0ae", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
'subtext.medium': { name: "3ssb0x", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
'subtext.small': { name: "22k9w9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
},
variant: {
error: { name: "41dgud", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
hint: { name: "2e63vp", styles: "color:var(--cnvs-sys-color-text-hint);" },
inverse: { name: "3y6pt", styles: "color:var(--cnvs-sys-color-text-inverse);" }
}
}
}, "text-8fe759");
/**
* 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 const Text = createComponent('span')({
displayName: 'Text',
Component: ({ children, typeLevel, variant, ...elemProps }, ref, Element) => {
return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, textStencil({ typeLevel, variant })), children: children }));
},
});