@workday/canvas-kit-react 11.0.0-alpha.772-next.0 → 11.0.0-alpha.774-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/commonjs/table/lib/Table.js +1 -1
  2. package/dist/commonjs/table/lib/TableCaption.js +1 -1
  3. package/dist/commonjs/table/lib/TableCell.js +1 -1
  4. package/dist/commonjs/table/lib/TableHead.js +1 -1
  5. package/dist/commonjs/table/lib/TableHeader.js +1 -1
  6. package/dist/es6/table/lib/Table.js +2 -2
  7. package/dist/es6/table/lib/TableCaption.js +2 -2
  8. package/dist/es6/table/lib/TableCell.js +2 -2
  9. package/dist/es6/table/lib/TableHead.js +3 -3
  10. package/dist/es6/table/lib/TableHeader.js +3 -3
  11. package/package.json +5 -5
  12. package/table/lib/Table.tsx +3 -3
  13. package/table/lib/TableCaption.tsx +2 -2
  14. package/table/lib/TableCell.tsx +3 -3
  15. package/table/lib/TableHead.tsx +4 -4
  16. package/table/lib/TableHeader.tsx +5 -5
package/dist/commonjs/table/lib/Table.js CHANGED
@@ -17,7 +17,7 @@ const TableCaption_1 = require("./TableCaption");
17
17
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
18
18
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
19
19
  const tableStencil = canvas_kit_styling_1.createStencil({
20
- base: { name: "c93ea3", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-base-palette-soap-500);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-base-palette-black-pepper-300);" }
20
+ base: { name: "2ced58", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-sys-color-text-default);" }
21
21
  }, "cnvs-table");
22
22
  /**
23
23
  * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
package/dist/commonjs/table/lib/TableCaption.js CHANGED
@@ -10,7 +10,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
10
10
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
11
11
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
12
12
  const tableCaptionStencil = canvas_kit_styling_1.createStencil({
13
- base: { name: "4d712b", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-500);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
13
+ base: { name: "78005d", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-container);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
14
14
  }, "cnvs-table-caption");
15
15
  exports.TableCaption = common_1.createComponent('caption')({
16
16
  displayName: 'Table.Caption',
package/dist/commonjs/table/lib/TableCell.js CHANGED
@@ -10,7 +10,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
10
10
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
11
11
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
12
12
  const tableCellStencil = canvas_kit_styling_1.createStencil({
13
- base: { name: "ad28fe", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
13
+ base: { name: "02da1e", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
14
14
  }, "cnvs-table-cell");
15
15
  exports.TableCell = common_1.createComponent('td')({
16
16
  displayName: 'Table.Cell',
package/dist/commonjs/table/lib/TableHead.js CHANGED
@@ -10,7 +10,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
10
10
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
11
11
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
12
12
  const tableHeadStencil = canvas_kit_styling_1.createStencil({
13
- base: { name: "e43572", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-base-palette-soap-100);min-height:3rem;th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
13
+ base: { name: "6f3bdd", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
14
14
  }, "cnvs-table-head");
15
15
  exports.TableHead = common_1.createComponent('thead')({
16
16
  displayName: 'Table.Head',
package/dist/commonjs/table/lib/TableHeader.js CHANGED
@@ -10,7 +10,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
10
10
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
11
11
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
12
12
  const tableHeaderStencil = canvas_kit_styling_1.createStencil({
13
- base: { name: "ead3aa", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400);justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
13
+ base: { name: "ead3aa", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
14
14
  }, "cnvs-table-header");
15
15
  exports.TableHeader = common_1.createComponent('th')({
16
16
  displayName: 'Table.Header',
package/dist/es6/table/lib/Table.js CHANGED
@@ -9,9 +9,9 @@ import { TableCell } from './TableCell';
9
9
  import { TableFooter } from './TableFooter';
10
10
  import { TableCaption } from './TableCaption';
11
11
  import { createStencil, px2rem } from '@workday/canvas-kit-styling';
12
- import { base, system } from '@workday/canvas-tokens-web';
12
+ import { system } from '@workday/canvas-tokens-web';
13
13
  const tableStencil = createStencil({
14
- base: { name: "c93ea3", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-base-palette-soap-500);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-base-palette-black-pepper-300);" }
14
+ base: { name: "2ced58", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-sys-color-text-default);" }
15
15
  }, "cnvs-table");
16
16
  /**
17
17
  * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
package/dist/es6/table/lib/TableCaption.js CHANGED
@@ -2,9 +2,9 @@ import React from 'react';
2
2
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
3
3
  import { createComponent } from '@workday/canvas-kit-react/common';
4
4
  import { createStencil, px2rem } from '@workday/canvas-kit-styling';
5
- import { base, system } from '@workday/canvas-tokens-web';
5
+ import { system } from '@workday/canvas-tokens-web';
6
6
  const tableCaptionStencil = createStencil({
7
- base: { name: "4d712b", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-500);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
7
+ base: { name: "78005d", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-container);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
8
8
  }, "cnvs-table-caption");
9
9
  export const TableCaption = createComponent('caption')({
10
10
  displayName: 'Table.Caption',
package/dist/es6/table/lib/TableCell.js CHANGED
@@ -2,9 +2,9 @@ import React from 'react';
2
2
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
3
3
  import { createComponent } from '@workday/canvas-kit-react/common';
4
4
  import { createStencil, px2rem } from '@workday/canvas-kit-styling';
5
- import { base, system } from '@workday/canvas-tokens-web';
5
+ import { system } from '@workday/canvas-tokens-web';
6
6
  const tableCellStencil = createStencil({
7
- base: { name: "ad28fe", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
7
+ base: { name: "02da1e", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
8
8
  }, "cnvs-table-cell");
9
9
  export const TableCell = createComponent('td')({
10
10
  displayName: 'Table.Cell',
package/dist/es6/table/lib/TableHead.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
2
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
3
3
  import { createComponent } from '@workday/canvas-kit-react/common';
4
- import { createStencil } from '@workday/canvas-kit-styling';
5
- import { base } from '@workday/canvas-tokens-web';
4
+ import { calc, createStencil } from '@workday/canvas-kit-styling';
5
+ import { system } from '@workday/canvas-tokens-web';
6
6
  const tableHeadStencil = createStencil({
7
- base: { name: "e43572", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-base-palette-soap-100);min-height:3rem;th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
7
+ base: { name: "6f3bdd", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
8
8
  }, "cnvs-table-head");
9
9
  export const TableHead = createComponent('thead')({
10
10
  displayName: 'Table.Head',
package/dist/es6/table/lib/TableHeader.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
2
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
3
3
  import { createComponent } from '@workday/canvas-kit-react/common';
4
- import { createStencil, px2rem } from '@workday/canvas-kit-styling';
5
- import { base, system } from '@workday/canvas-tokens-web';
4
+ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
5
+ import { system } from '@workday/canvas-tokens-web';
6
6
  const tableHeaderStencil = createStencil({
7
- base: { name: "ead3aa", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400);justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
7
+ base: { name: "ead3aa", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
8
8
  }, "cnvs-table-header");
9
9
  export const TableHeader = createComponent('th')({
10
10
  displayName: 'Table.Header',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "11.0.0-alpha.772-next.0",
3
+ "version": "11.0.0-alpha.774-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,10 +49,10 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.772-next.0",
53
- "@workday/canvas-kit-styling": "^11.0.0-alpha.772-next.0",
52
+ "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.774-next.0",
53
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.774-next.0",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
- "@workday/canvas-tokens-web": "^1.3.0",
55
+ "@workday/canvas-tokens-web": "^1.3.1",
56
56
  "@workday/design-assets-types": "^0.2.8",
57
57
  "chroma-js": "^2.1.0",
58
58
  "csstype": "^3.0.2",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "ab84efb51ed17fc8b13819d17d42bd0cebd60768"
70
+ "gitHead": "f984e871afc408cdd6a8b61808324907c01aff92"
71
71
  }
package/table/lib/Table.tsx CHANGED
@@ -9,16 +9,16 @@ import {TableCell} from './TableCell';
9
9
  import {TableFooter} from './TableFooter';
10
10
  import {TableCaption} from './TableCaption';
11
11
  import {createStencil, px2rem} from '@workday/canvas-kit-styling';
12
- import {base, system} from '@workday/canvas-tokens-web';
12
+ import {system} from '@workday/canvas-tokens-web';
13
13
 
14
14
  const tableStencil = createStencil({
15
15
  base: {
16
16
  ...system.type.subtext.large,
17
17
  display: 'grid',
18
- border: `${px2rem(1)} solid ${base.soap500}`,
18
+ border: `${px2rem(1)} solid ${system.color.border.container}`,
19
19
  borderRadius: system.shape.x2,
20
20
  overflow: 'auto',
21
- color: base.blackPepper300,
21
+ color: system.color.text.default,
22
22
  },
23
23
  });
24
24
 
package/table/lib/TableCaption.tsx CHANGED
@@ -2,12 +2,12 @@ import React from 'react';
2
2
  import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
3
3
  import {createComponent} from '@workday/canvas-kit-react/common';
4
4
  import {createStencil, px2rem} from '@workday/canvas-kit-styling';
5
- import {base, system} from '@workday/canvas-tokens-web';
5
+ import {system} from '@workday/canvas-tokens-web';
6
6
 
7
7
  const tableCaptionStencil = createStencil({
8
8
  base: {
9
9
  display: 'flex',
10
- borderBottom: `${px2rem(1)} solid ${base.soap500}`,
10
+ borderBottom: `${px2rem(1)} solid ${system.color.border.container}`,
11
11
  padding: `${system.space.x2} ${system.space.x4}`,
12
12
  },
13
13
  });
package/table/lib/TableCell.tsx CHANGED
@@ -2,14 +2,14 @@ import React from 'react';
2
2
  import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
3
3
  import {createComponent} from '@workday/canvas-kit-react/common';
4
4
  import {createStencil, px2rem} from '@workday/canvas-kit-styling';
5
- import {base, system} from '@workday/canvas-tokens-web';
5
+ import {system} from '@workday/canvas-tokens-web';
6
6
 
7
7
  const tableCellStencil = createStencil({
8
8
  base: {
9
9
  display: 'grid',
10
10
  alignItems: 'center',
11
- backgroundColor: base.frenchVanilla100,
12
- borderBottom: `${px2rem(1)} solid ${base.soap400}`,
11
+ backgroundColor: system.color.bg.default,
12
+ borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
13
13
  gridTemplateColumns: '1fr',
14
14
  justifyContent: 'start',
15
15
  minHeight: '3.5rem',
package/table/lib/TableHead.tsx CHANGED
@@ -1,14 +1,14 @@
1
1
  import React from 'react';
2
2
  import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
3
3
  import {createComponent} from '@workday/canvas-kit-react/common';
4
- import {createStencil} from '@workday/canvas-kit-styling';
5
- import {base} from '@workday/canvas-tokens-web';
4
+ import {calc, createStencil} from '@workday/canvas-kit-styling';
5
+ import {system} from '@workday/canvas-tokens-web';
6
6
 
7
7
  const tableHeadStencil = createStencil({
8
8
  base: {
9
9
  display: 'grid',
10
- backgroundColor: base.soap100,
11
- minHeight: '3rem',
10
+ backgroundColor: system.color.bg.alt.softer,
11
+ minHeight: calc.subtract(system.space.x16, system.space.x4),
12
12
  'th ': {
13
13
  '&:first-of-type': {
14
14
  borderInlineStart: 'none',
package/table/lib/TableHeader.tsx CHANGED
@@ -1,17 +1,17 @@
1
1
  import React from 'react';
2
2
  import {GridProps, mergeStyles} from '@workday/canvas-kit-react/layout';
3
3
  import {createComponent} from '@workday/canvas-kit-react/common';
4
- import {createStencil, px2rem} from '@workday/canvas-kit-styling';
5
- import {base, system} from '@workday/canvas-tokens-web';
4
+ import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
5
+ import {system} from '@workday/canvas-tokens-web';
6
6
 
7
7
  const tableHeaderStencil = createStencil({
8
8
  base: {
9
9
  display: 'grid',
10
10
  alignItems: 'center',
11
- backgroundColor: base.frenchVanilla100,
12
- borderBottom: `${px2rem(1)} solid ${base.soap400}`,
11
+ backgroundColor: system.color.bg.default,
12
+ borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
13
13
  justifyContent: 'start',
14
- minHeight: '3.5rem',
14
+ minHeight: calc.subtract(system.space.x16, system.space.x2),
15
15
  padding: `${system.space.x2} ${system.space.x4}`,
16
16
  wordBreak: 'break-word',
17
17
  fontWeight: system.fontWeight.medium,