@workday/canvas-kit-docs 11.0.0-alpha.790-next.0 → 11.0.0-alpha.793-next.0

package/dist/mdx/react/table/examples/FixedColumn.tsx

@@ -2,8 +2,24 @@ import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    marginBottom: system.space.x4,
+  }),
+  tableStyles: createStyles({
+    width: px2rem(690),
+  }),
+  tableHeaderStyles: createStyles({
+    position: 'sticky',
+    left: system.space.zero,
+    backgroundColor: system.color.bg.alt.softer,
+    borderRight: `2px solid ${system.color.border.divider}`,
+  }),
+};
 
 export default () => {
   const headingID = useUniqueId();
@@ -77,19 +93,13 @@ export default () => {
   ];
   return (
     <>
-      <Heading as="h3" id={headingID} size="small" marginBottom="s">
+      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
         Performance Car Specs
       </Heading>
-      <Table width={690} aria-labelledby={headingID} tabIndex={0}>
+      <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>
         <Table.Head>
           <Table.Row>
-            <Table.Header
-              scope="col"
-              position="sticky"
-              left="0"
-              backgroundColor="soap100"
-              borderRight={`2px solid ${colors.soap400}`}
-            >
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
               Make
             </Table.Header>
             <Table.Header scope="col">Model</Table.Header>
@@ -106,13 +116,7 @@ export default () => {
           {exampleData.map(item => (
             <>
               <Table.Row>
-                <Table.Header
-                  scope="row"
-                  position="sticky"
-                  left="0"
-                  backgroundColor="soap100"
-                  borderRight={`2px solid ${colors.soap400}`}
-                >
+                <Table.Header scope="row" cs={styleOverrides.tableHeaderStyles}>
                   {item.make}
                 </Table.Header>
                 <Table.Cell>{item.model}</Table.Cell>

package/dist/mdx/react/table/examples/RightToLeft.tsx

@@ -2,6 +2,12 @@ import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const tableHeaderStyles = createStyles({
+  backgroundColor: system.color.bg.alt.softer,
+});
 
 export default () => {
   return (
@@ -10,10 +16,10 @@ export default () => {
         <Table.Caption>משקאות קפה וגדלים</Table.Caption>
         <Table.Head>
           <Table.Row>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={tableHeaderStyles}>
               מַשׁקֶה
             </Table.Header>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={tableHeaderStyles}>
               גודל
             </Table.Header>
           </Table.Row>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.790-next.0",
+  "version": "11.0.0-alpha.793-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.790-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.790-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.790-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.790-next.0",
+    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.793-next.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.793-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.793-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.793-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.1",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "b8255498bfbad751b0b6e2a0172dd2c26b277feb"
+  "gitHead": "8932c60111b24b90d9d1014266095dc9d157f41e"
 }