@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
188 lines (187 loc) • 12.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.monoFontFamily = exports.fontFamily = exports.type = exports.spaceNumbers = exports.space = exports.depth = exports.gradients = exports.colors = exports.borderRadius = exports.BrandingColor = exports.typeColors = exports.statusColors = exports.inputColors = exports.iconColors = exports.commonColors = exports.chartingColors = exports.chartingColorOffsets = exports.buttonColors = exports.canvas = void 0;
const canvas_colors_web_1 = require("@workday/canvas-colors-web");
Object.defineProperty(exports, "buttonColors", { enumerable: true, get: function () { return canvas_colors_web_1.buttonColors; } });
Object.defineProperty(exports, "chartingColorOffsets", { enumerable: true, get: function () { return canvas_colors_web_1.chartingColorOffsets; } });
Object.defineProperty(exports, "chartingColors", { enumerable: true, get: function () { return canvas_colors_web_1.chartingColors; } });
Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return canvas_colors_web_1.colors; } });
Object.defineProperty(exports, "commonColors", { enumerable: true, get: function () { return canvas_colors_web_1.commonColors; } });
Object.defineProperty(exports, "gradients", { enumerable: true, get: function () { return canvas_colors_web_1.gradients; } });
Object.defineProperty(exports, "iconColors", { enumerable: true, get: function () { return canvas_colors_web_1.iconColors; } });
Object.defineProperty(exports, "inputColors", { enumerable: true, get: function () { return canvas_colors_web_1.inputColors; } });
Object.defineProperty(exports, "statusColors", { enumerable: true, get: function () { return canvas_colors_web_1.statusColors; } });
Object.defineProperty(exports, "typeColors", { enumerable: true, get: function () { return canvas_colors_web_1.typeColors; } });
const radius_1 = require("./lib/radius");
Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return radius_1.borderRadius; } });
const colors_types_1 = require("./lib/colors.types");
Object.defineProperty(exports, "BrandingColor", { enumerable: true, get: function () { return colors_types_1.BrandingColor; } });
const depth_1 = require("./lib/depth");
Object.defineProperty(exports, "depth", { enumerable: true, get: function () { return depth_1.depth; } });
const space_1 = require("./lib/space");
Object.defineProperty(exports, "space", { enumerable: true, get: function () { return space_1.space; } });
Object.defineProperty(exports, "spaceNumbers", { enumerable: true, get: function () { return space_1.spaceNumbers; } });
const type_1 = require("./lib/type");
Object.defineProperty(exports, "type", { enumerable: true, get: function () { return type_1.type; } });
Object.defineProperty(exports, "fontFamily", { enumerable: true, get: function () { return type_1.fontFamily; } });
Object.defineProperty(exports, "monoFontFamily", { enumerable: true, get: function () { return type_1.monoFontFamily; } });
exports.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: canvas_colors_web_1.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: canvas_colors_web_1.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: canvas_colors_web_1.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).
*/
colors: canvas_colors_web_1.colors,
/**
* @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: canvas_colors_web_1.commonColors,
/**
* @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: depth_1.depth,
/**
* @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: type_1.fontFamily,
/**
* @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: canvas_colors_web_1.gradients,
/**
* @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: canvas_colors_web_1.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: canvas_colors_web_1.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).
*/
monoFontFamily: type_1.monoFontFamily,
/**
* @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: space_1.space,
/**
* @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: canvas_colors_web_1.statusColors,
/**
* @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: type_1.type,
/**
* @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: canvas_colors_web_1.typeColors,
};