@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
853 lines • 31.8 kB
TypeScript
import { buttonColors, chartingColorOffsets, chartingColors, colors, commonColors, gradients, iconColors, inputColors, statusColors, typeColors } from '@workday/canvas-colors-web';
import { borderRadius, CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues } from './lib/radius';
import { BrandingColor, CanvasColor } from './lib/colors.types';
import { depth, CanvasDepth, CanvasDepthValues } from './lib/depth';
import { space, CanvasSpace, CanvasSpaceKeys, CanvasSpaceValues, CanvasSpaceNumberValues, CanvasSpaceNumbers, spaceNumbers } from './lib/space';
import { type, fontFamily, monoFontFamily, CanvasType, CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy } from './lib/type';
import { CSSProperties } from './lib/types';
export declare const canvas: {
/**
* @deprecated Use brand or system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
buttonColors: {
delete: {
background: string;
border: string;
text: string;
activeBackground: string;
activeBorder: string;
activeText: string;
disabledBackground: string;
disabledBorder: string;
disabledText: string;
focusBackground: string;
focusBorder: string;
focusText: string;
hoverBackground: string;
hoverBorder: string;
hoverText: string;
};
primary: {
background: string;
border: string;
text: string;
activeBackground: string;
activeBorder: string;
activeText: string;
disabledBackground: string;
disabledBorder: string;
disabledText: string;
focusBackground: string;
focusBorder: string;
focusText: string;
hoverBackground: string;
hoverBorder: string;
hoverText: string;
};
secondary: {
background: string;
border: string;
text: string;
activeBackground: string;
activeBorder: string;
activeText: string;
disabledBackground: string;
disabledBorder: string;
disabledText: string;
focusBackground: string;
focusBorder: string;
focusText: string;
hoverBackground: string;
hoverBorder: string;
hoverText: string;
};
};
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
chartingColorOffsets: {
barAndColumn: number;
pie: number;
lineAndArea: number;
bubble: number;
};
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
chartingColors: {
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
13: string;
14: string;
15: string;
16: string;
17: string;
18: string;
19: string;
20: string;
21: string;
22: string;
23: string;
24: string;
25: string;
26: string;
27: string;
28: string;
29: string;
30: string;
31: string;
32: string;
33: string;
34: string;
35: string;
36: string;
37: string;
38: string;
39: string;
40: string;
41: string;
42: string;
43: string;
44: string;
45: string;
46: string;
47: string;
48: string;
49: string;
50: string;
51: string;
52: string;
53: string;
54: string;
55: string;
56: string;
57: string;
58: string;
59: string;
60: string;
61: string;
62: string;
63: string;
64: string;
65: string;
66: string;
67: string;
68: string;
69: string;
70: string;
71: string;
72: string;
73: string;
74: string;
75: string;
76: string;
77: string;
78: string;
79: string;
80: string;
81: string;
82: string;
83: string;
84: string;
85: string;
86: string;
};
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
colors: {
[key: string]: string;
cinnamon600: string;
cinnamon500: string;
cinnamon400: string;
cinnamon300: string;
cinnamon200: string;
cinnamon100: string;
peach600: string;
peach500: string;
peach400: string;
peach300: string;
peach200: string;
peach100: string;
chiliMango600: string;
chiliMango500: string;
chiliMango400: string;
chiliMango300: string;
chiliMango200: string;
chiliMango100: string;
cantaloupe600: string;
cantaloupe500: string;
cantaloupe400: string;
cantaloupe300: string;
cantaloupe200: string;
cantaloupe100: string;
sourLemon600: string;
sourLemon500: string;
sourLemon400: string;
sourLemon300: string;
sourLemon200: string;
sourLemon100: string;
juicyPear600: string;
juicyPear500: string;
juicyPear400: string;
juicyPear300: string;
juicyPear200: string;
juicyPear100: string;
kiwi600: string;
kiwi500: string;
kiwi400: string;
kiwi300: string;
kiwi200: string;
kiwi100: string;
greenApple600: string;
greenApple500: string;
greenApple400: string;
greenApple300: string;
greenApple200: string;
greenApple100: string;
watermelon600: string;
watermelon500: string;
watermelon400: string;
watermelon300: string;
watermelon200: string;
watermelon100: string;
jewel600: string;
jewel500: string;
jewel400: string;
jewel300: string;
jewel200: string;
jewel100: string;
toothpaste600: string;
toothpaste500: string;
toothpaste400: string;
toothpaste300: string;
toothpaste200: string;
toothpaste100: string; /**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `commonColors.background` | `system.color.bg.default` |
* | `commonColors.backgroundAlt` | `system.color.bg.alt.default` |
* | `commonColors.focusOutline` | `system.color.border.primary.default` |
* | `commonColors.focusBackground` | `system.color.bg.primary.default` |
* | `commonColors.hoverBackground` | `system.color.bg.alt.strong` |
* | `commonColors.divider` | `system.color.border.divider` |
*/
blueberry600: string;
blueberry500: string;
blueberry400: string;
blueberry300: string;
blueberry200: string;
blueberry100: string;
plum600: string;
plum500: string;
plum400: string;
plum300: string;
plum200: string;
plum100: string;
berrySmoothie600: string;
berrySmoothie500: string;
berrySmoothie400: string;
berrySmoothie300: string;
berrySmoothie200: string;
berrySmoothie100: string;
blackberry600: string;
blackberry500: string;
blackberry400: string;
blackberry300: string;
blackberry200: string;
blackberry100: string;
islandPunch600: string;
islandPunch500: string;
islandPunch400: string;
islandPunch300: string;
islandPunch200: string;
islandPunch100: string;
grapeSoda600: string;
grapeSoda500: string;
grapeSoda400: string;
grapeSoda300: string;
grapeSoda200: string;
grapeSoda100: string;
pomegranate600: string;
pomegranate500: string;
pomegranate400: string;
pomegranate300: string;
pomegranate200: string;
pomegranate100: string;
fruitPunch600: string;
fruitPunch500: string;
fruitPunch400: string;
fruitPunch300: string;
fruitPunch200: string;
fruitPunch100: string;
rootBeer600: string;
rootBeer500: string;
rootBeer400: string;
rootBeer300: string;
rootBeer200: string;
rootBeer100: string;
toastedMarshmallow600: string;
toastedMarshmallow500: string;
toastedMarshmallow400: string;
toastedMarshmallow300: string;
toastedMarshmallow200: string;
toastedMarshmallow100: string;
coconut600: string;
coconut500: string;
coconut400: string; /**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
coconut300: string;
coconut200: string;
coconut100: string;
cappuccino600: string;
cappuccino500: string;
cappuccino400: string;
cappuccino300: string;
cappuccino200: string; /**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `iconColors.active` | `system.color.fg.primary.default` |
* | `iconColors.disabled` | `system.color.fg.disabled.default` |
* | `iconColors.hover` | `system.color.fg.muted.stronger` |
* | `iconColors.inverse` | `system.color.fg.inverse` |
* | `iconColors.standard` | `system.color.fg.muted.soft` |
*/
cappuccino100: string;
soap600: string;
soap500: string;
soap400: string;
soap300: string;
soap200: string;
soap100: string;
licorice600: string;
licorice500: string;
licorice400: string;
licorice300: string;
licorice200: string;
licorice100: string;
frenchVanilla600: string;
frenchVanilla500: string;
frenchVanilla400: string;
frenchVanilla300: string;
frenchVanilla200: string;
frenchVanilla100: string;
blackPepper600: string;
blackPepper500: string;
blackPepper400: string;
blackPepper300: string;
blackPepper200: string;
blackPepper100: string;
};
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `commonColors.background` | `system.color.bg.default` |
* | `commonColors.backgroundAlt` | `system.color.bg.alt.default` |
* | `commonColors.focusOutline` | `system.color.border.primary.default` |
* | `commonColors.focusBackground` | `system.color.bg.primary.default` |
* | `commonColors.hoverBackground` | `system.color.bg.alt.strong` |
* | `commonColors.divider` | `system.color.border.divider` |
*/
commonColors: {
background: string;
backgroundAlt: string;
focusOutline: string;
focusBackground: string;
hoverBackground: string;
divider: string;
};
/**
* @deprecated Use system depth tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `depth[0]` | `{boxShadow: 'none'}` |
* | `depth[1]` | `{boxShadow: system.depth[1]}` |
* | `depth[2]` | `{boxShadow: system.depth[2]}` |
* | `depth[3]` | `{boxShadow: system.depth[3]}` |
* | `depth[4]` | `{boxShadow: system.depth[4]}` |
* | `depth[5]` | `{boxShadow: system.depth[5]}` |
* | `depth[6]` | `{boxShadow: system.depth[6]}` |
*/
depth: CanvasDepth;
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
fontFamily: string;
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
gradients: {
[key: string]: string;
cinnamon: string;
peach: string;
chiliMango: string;
cantaloupe: string;
sourLemon: string;
juicyPear: string;
kiwi: string;
greenApple: string;
watermelon: string;
jewel: string;
toothpaste: string;
blueberry: string;
plum: string;
berrySmoothie: string;
blackberry: string;
islandPunch: string;
grapeSoda: string;
pomegranate: string;
fruitPunch: string;
rootBeer: string;
toastedMarshmallow: string;
cappuccino: string;
licorice: string;
blackPepper: string;
};
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `iconColors.active` | `system.color.fg.primary.default` |
* | `iconColors.disabled` | `system.color.fg.disabled.default` |
* | `iconColors.hover` | `system.color.fg.muted.stronger` |
* | `iconColors.inverse` | `system.color.fg.inverse` |
* | `iconColors.standard` | `system.color.fg.muted.soft` |
*/
iconColors: {
active: string;
disabled: string;
hover: string;
inverse: string;
standard: string;
};
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `inputColors.background` | `system.color.bg.default` |
* | `inputColors.border` | `system.color.border.input.default` |
* | `inputColors.placeholder` | `system.color.fg.muted.default` |
* | `inputColors.text` | `system.color.fg.default` |
* | `inputColors.icon` | `system.color.fg.muted.soft` |
* | `inputColors.iconHover` | `system.color.fg.muted.stronger` |
* | `inputColors.selectionControlFill` | `system.color.bg.primary.default` |
* | `inputColors.hoverBorder` | `system.color.border.input.strong` |
* | `inputColors.focusBorder` | `system.color.border.primary.default` |
* | `inputColors.disabled.background` | `system.color.bg.alt.softer` |
* | `inputColors.disabled.border` | `system.color.border.input.disabled` |
* | `inputColors.disabled.text` | `system.color.fg.disabled` |
* | `inputColors.disabled.icon` | `system.color.fg.disabled` |
* | `inputColors.error.border` | `system.color.border.critical.default` |
* | `inputColors.error.message` | `base.blackPepper100` |
* | `inputColors.error.icon` | `system.color.fg.critical.default` |
* | `inputColors.alert.border` | `system.color.border.caution.default` |
* | `inputColors.alert.message` | `base.blackPepper100` |
* | `inputColors.alert.icon` | `base.cantaloupe500` |
*/
inputColors: {
background: string;
border: string;
placeholder: string;
text: string;
icon: string;
iconHover: string;
selectionControlFill: string;
hoverBorder: string;
focusBorder: string;
disabled: {
background: string;
border: string;
text: string;
icon: string;
};
error: {
border: string;
message: string;
icon: string;
};
alert: {
border: string;
message: string;
icon: string;
};
};
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
monoFontFamily: string;
/**
* @deprecated Use system space tokens from `@workday/canvas-tokens-web` instead. Check new values column for the new tokens. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @example
* ```ts
* // before
* import { space } from '@workday/canvas-kit-react/tokens';
* const space = space.zero;
*
* // now
* import { system } from '@workday/canvas-tokens-web';
* import { cssVar } from '@workday/canvas-kit-styling';
* const space = cssVar(system.space.zero);
* ```
*/
space: CanvasSpace;
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Property | Tokens for foreground (text and icons) | Tokens for border |
* |-------------------------|-------------------------------------|---------------------------------------|
* | `statusColors.active` | `system.color.fg.primary.default` | `system.color.border.primary.default` |
* | `statusColors.success` | `system.color.fg.success.default` | none |
* | `statusColors.warning` | `system.color.fg.caution.default` | `system.color.border.caution.default` |
* | `statusColors.error` | `system.color.fg.critical.default` | `system.color.border.critical.default`|
*/
statusColors: {
active: string;
success: string;
warning: string;
error: string;
};
/**
* @deprecated Use system type tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see {@link } for values mapping table
* @example
* ```ts
* // before
* import { type } from '@workday/canvas-kit-react/tokens';
* const styles = css({
* ...type.levels.body.large,
* fontWeight: type.properties.fontWeights.bold,
* color: type.variants.error,
* })
*
* // now
* import { system } from '@workday/canvas-tokens-web';
* import { createStyles } from '@workday/canvas-kit-styling';
* const styles = createStyles({
* ...system.type.body.large,
* fontWeight: system.fontWeight.bold,
* color: system.color.fg.critical.default,
* })
* ```
*/
type: CanvasType;
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Property | Tokens for text |
* |-------------------------------------|-----------------------------------|
* | `typeColors.body` | `system.color.fg.default` |
* | `typeColors.heading` | `system.color.fg.strong` |
* | `typeColors.hint` | `system.color.fg.muted.default` |
* | `typeColors.inverse` | `system.color.fg.inverse` |
* | `typeColors.label` | `system.color.fg.default` |
* | `typeColors.link` | `system.color.fg.primary.default` |
* | `typeColors.selectHighlight` | `system.color.fg.primary.default` |
* | `typeColors.selectHighlightInverse` | `system.color.fg.inverse` |
*/
typeColors: {
body: string;
heading: string;
hint: string;
inverse: string;
label: string;
link: string;
selectHighlight: string;
selectHighlightInverse: string;
};
};
export {
/**
* @deprecated Use brand or system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
buttonColors,
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
chartingColorOffsets,
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
*/
chartingColors,
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `commonColors.background` | `system.color.bg.default` |
* | `commonColors.backgroundAlt` | `system.color.bg.alt.default` |
* | `commonColors.focusOutline` | `system.color.border.primary.default` |
* | `commonColors.focusBackground` | `system.color.bg.primary.default` |
* | `commonColors.hoverBackground` | `system.color.bg.alt.strong` |
* | `commonColors.divider` | `system.color.border.divider` |
*/
commonColors,
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `iconColors.active` | `system.color.fg.primary.default` |
* | `iconColors.disabled` | `system.color.fg.disabled.default` |
* | `iconColors.hover` | `system.color.fg.muted.stronger` |
* | `iconColors.inverse` | `system.color.fg.inverse` |
* | `iconColors.standard` | `system.color.fg.muted.soft` |
*/
iconColors,
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `inputColors.background` | `system.color.bg.default` |
* | `inputColors.border` | `system.color.border.input.default` |
* | `inputColors.placeholder` | `system.color.fg.muted.default` |
* | `inputColors.text` | `system.color.fg.default` |
* | `inputColors.icon` | `system.color.fg.muted.soft` |
* | `inputColors.iconHover` | `system.color.fg.muted.stronger` |
* | `inputColors.selectionControlFill` | `system.color.bg.primary.default` |
* | `inputColors.hoverBorder` | `system.color.border.input.strong` |
* | `inputColors.focusBorder` | `system.color.border.primary.default` |
* | `inputColors.disabled.background` | `system.color.bg.alt.softer` |
* | `inputColors.disabled.border` | `system.color.border.input.disabled` |
* | `inputColors.disabled.text` | `system.color.fg.disabled` |
* | `inputColors.disabled.icon` | `system.color.fg.disabled` |
* | `inputColors.error.border` | `system.color.border.critical.default` |
* | `inputColors.error.message` | `base.blackPepper100` |
* | `inputColors.error.icon` | `system.color.fg.critical.default` |
* | `inputColors.alert.border` | `system.color.border.caution.default` |
* | `inputColors.alert.message` | `base.blackPepper100` |
* | `inputColors.alert.icon` | `base.cantaloupe500` |
*/
inputColors,
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Property | Tokens for foreground (text and icons) | Tokens for border |
* |-------------------------|-------------------------------------|---------------------------------------|
* | `statusColors.active` | `system.color.fg.primary.default` | `system.color.border.primary.default` |
* | `statusColors.success` | `system.color.fg.success.default` | none |
* | `statusColors.warning` | `system.color.fg.caution.default` | `system.color.border.caution.default` |
* | `statusColors.error` | `system.color.fg.critical.default` | `system.color.border.critical.default`|
*/
statusColors,
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Property | Tokens for text |
* |-------------------------------------|-----------------------------------|
* | `typeColors.body` | `system.color.fg.default` |
* | `typeColors.heading` | `system.color.fg.strong` |
* | `typeColors.hint` | `system.color.fg.muted.default` |
* | `typeColors.inverse` | `system.color.fg.inverse` |
* | `typeColors.label` | `system.color.fg.default` |
* | `typeColors.link` | `system.color.fg.primary.default` |
* | `typeColors.selectHighlight` | `system.color.fg.primary.default` |
* | `typeColors.selectHighlightInverse` | `system.color.fg.inverse` |
*/
typeColors, };
export {
/**
* @deprecated
*/
BrandingColor,
/**
* @deprecated Use shape system tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
// TODO: update link
* @see {@link } for values mapping table
* @example
* ```ts
* // before
* import { borderRadius } from '@workday/canvas-kit-react/tokens';
* const borderRadius = borderRadius.zero;
*
* // now
* import { system } from '@workday/canvas-tokens-web';
* const borderRadius = system.shape.zero;
* ```
*/
borderRadius,
/**
* @deprecated Use system color tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
// TODO: update link
* @see {@link } for values mapping table
* @example
* ```ts
* // before
* import { colors } from '@workday/canvas-kit-react/tokens';
* const color = cssVar(colors.blueberry400);
*
* // now
* import { system } from '@workday/canvas-tokens-web';
* import { cssVar } from '@workday/canvas-kit-styling';
* const color = cssVar(system.color.bg.primary.default);
* ```
*/
colors,
/**
* @deprecated
*/
gradients,
/**
* @deprecated Use system depth tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see
* | Old Token | New Token |
* |----------------|---------------------|
* | `depth[0]` | `{boxShadow: 'none'}` |
* | `depth[1]` | `{boxShadow: system.depth[1]}` |
* | `depth[2]` | `{boxShadow: system.depth[2]}` |
* | `depth[3]` | `{boxShadow: system.depth[3]}` |
* | `depth[4]` | `{boxShadow: system.depth[4]}` |
* | `depth[5]` | `{boxShadow: system.depth[5]}` |
* | `depth[6]` | `{boxShadow: system.depth[6]}` |
* @example
* ```ts
* // before
* import { depth } from '@workday/canvas-kit-react/tokens';
* const depth = depth[1];
*
* // now
* import { system } from '@workday/canvas-tokens-web';
* import { cssVar } from '@workday/canvas-kit-styling';
* const depth = {boxShadow: cssVar(system.depth[1])};
* ```
*/
depth,
/**
* @deprecated Use system space tokens from `@workday/canvas-tokens-web` instead. Check new values column for the new tokens. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @example
* ```ts
* // before
* import { space } from '@workday/canvas-kit-react/tokens';
* const space = space.zero;
*
* // now
* import { system } from '@workday/canvas-tokens-web';
* import { cssVar } from '@workday/canvas-kit-styling';
* const space = cssVar(system.space.zero);
* ```
*/
space,
/**
* @deprecated Use system space tokens from `@workday/canvas-tokens-web` instead with canvas calc functions. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
// TODO: update link
* @see {@link } for values mapping table
*/
spaceNumbers,
/**
* @deprecated Use system type tokens from `@workday/canvas-tokens-web` instead. View Docs [here](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
* @see {@link } for values mapping table
* @example
* ```ts
* // before
* import { type } from '@workday/canvas-kit-react/tokens';
* const styles = css({
* ...type.levels.body.large,
* fontWeight: type.properties.fontWeights.bold,
* color: type.variants.error,
* })
*
* // now
* import { system } from '@workday/canvas-tokens-web';
* import { createStyles } from '@workday/canvas-kit-styling';
* const styles = createStyles({
* ...system.type.body.large,
* fontWeight: system.fontWeight.bold,
* color: system.color.fg.critical.default,
* })
* ```
*/
type,
/**
* @deprecated
*/
fontFamily,
/**
* @deprecated
*/
monoFontFamily, };
export type {
/**
* @deprecated
*/
CanvasBorderRadius,
/**
* @deprecated
*/
CanvasBorderRadiusKeys,
/**
* @deprecated
*/
CanvasBorderRadiusValues,
/**
* @deprecated
*/
CanvasColor,
/**
* @deprecated
*/
CanvasDepth,
/**
* @deprecated
*/
CanvasDepthValues,
/**
* @deprecated
*/
CanvasSpace,
/**
* @deprecated
*/
CanvasSpaceKeys,
/**
* @deprecated
*/
CanvasSpaceValues,
/**
* @deprecated
*/
CanvasSpaceNumberValues,
/**
* @deprecated
*/
CanvasSpaceNumbers,
/**
* @deprecated
*/
CanvasType,
/**
* @deprecated
*/
CanvasTypeProperties,
/**
* @deprecated
*/
CanvasTypeVariants,
/**
* @deprecated
*/
CanvasTypeHierarchy,
/**
* @deprecated
*/
CSSProperties, };
//# sourceMappingURL=index.d.ts.map