@workday/canvas-kit-react 10.0.0-alpha.538-next.0 → 10.0.0-alpha.540-next.0

package/dist/es6/text-input/lib/TextInput.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createComponent, ErrorType, errorRing, styled, } from '@workday/canvas-kit-react/common';
-import { borderRadius, inputColors, spaceNumbers, type } from '@workday/canvas-kit-react/tokens';
+import { borderRadius, inputColors, space, type } from '@workday/canvas-kit-react/tokens';
 const StyledTextInput = styled('input')({
     ...type.levels.subtext.large,
     border: `1px solid ${inputColors.border}`,
@@ -10,7 +10,7 @@ const StyledTextInput = styled('input')({
     boxSizing: 'border-box',
     height: 40,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: `${spaceNumbers.xxs}rem`,
+    padding: space.xxs,
     margin: 0,
     '&::placeholder': {
         color: inputColors.placeholder,

package/dist/es6/tokens/lib/space.d.ts

@@ -37,46 +37,59 @@ export declare type CanvasSpaceValues = ValueOf<CanvasSpace>;
  *
  * */
 export declare const space: CanvasSpace;
-/** Type for the `spaceNumbers` object with keys and numeric rem values (numbers) */
+/**
+ * Example using `space` with calc instead of deprecated `spaceNumbers`.
+ *
+ * ```tsx
+ *  // With deprecated `spaceNumbers`
+ * {
+ *  paddingLeft: spaceNumbers.xl + 2 // 42px
+ * }
+ * ```
+ *
+ * ```tsx
+ * // With `rem` based `space` tokens
+ * {
+ *  padding: `calc(${space.xl} + 2px)` // 42px
+ * }
+ * ```
+ *
+ * @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
+ */
 export declare type CanvasSpaceNumbers = {
     zero: 0;
-    xxxs: 0.25;
-    xxs: 0.5;
-    xs: 0.75;
-    s: 1;
-    m: 1.5;
-    l: 2;
-    xl: 2.5;
-    xxl: 4;
-    xxxl: 5;
+    xxxs: 4;
+    xxs: 8;
+    xs: 12;
+    s: 16;
+    m: 24;
+    l: 32;
+    xl: 40;
+    xxl: 64;
+    xxxl: 80;
 };
-/** The numeric rem values for CanvasSpaceNumbers (numbers) */
+/** The numeric rem values for CanvasSpaceNumbers (numbers)
+ * @deprecated ⚠️ `CanvasSpaceNumberValues` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
+ */
 export declare type CanvasSpaceNumberValues = ValueOf<CanvasSpaceNumbers>;
 /**
- * An object of space keys and their numeric rem values (numbers)
- * - These are helpful when you need a raw numeric rem value.
- * - Here's an example usage to perform calculations:
- * @example
+ * Example using `space` with calc instead of deprecated `spaceNumbers`.
+ *
  * ```tsx
- * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ *  // With deprecated `spaceNumbers`
+ * {
+ *  paddingLeft: spaceNumbers.xl + 2 // 42px
+ * }
  * ```
  *
- * Below is a table to show the equivalent values from `px` to `rem`.
- * This is based on the default browser font size which is `16px`.
- *
- * | px Value  | rem Value | space token |
- * | --------- | --------- | ----------- |
- * | 0         | 0         | zero        |
- * | 4px       | 0.25rem   | xxxs        |
- * | 8px       | 0.5rem    | xxs         |
- * | 12px      | 0.75rem   | xs          |
- * | 16px      | 1rem      | s           |
- * | 24px      | 1.5rem    | m           |
- * | 32px      | 2rem      | l           |
- * | 40px      | 2.5rem    | xl          |
- * | 64px      | 4rem      | xxl         |
- * | 80px      | 5rem      | xxxl        |
+ * ```tsx
+ * // With `rem` based `space` tokens
+ * {
+ *  padding: `calc(${space.xl} + 2px)` // 42px
+ * }
+ * ```
  *
+ * @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
  */
 export declare const spaceNumbers: CanvasSpaceNumbers;
 export {};

package/dist/es6/tokens/lib/space.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/space.ts"],"names":[],"mappings":"AAAA,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAO7B,qEAAqE;AACrE,oBAAY,WAAW,GAAG;IACxB,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,SAAS,CAAC;IAChB,GAAG,EAAE,QAAQ,CAAC;IACd,EAAE,EAAE,SAAS,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,QAAQ,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,QAAQ,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,kCAAkC;AAClC,oBAAY,eAAe,GAAG,MAAM,WAAW,CAAC;AAEhD,+CAA+C;AAC/C,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;KAmBK;AACL,eAAO,MAAM,KAAK,EAAE,WAWnB,CAAC;AAEF,oFAAoF;AACpF,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,GAAG,CAAC;IACT,EAAE,EAAE,IAAI,CAAC;IACT,CAAC,EAAE,CAAC,CAAC;IACL,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,CAAC,CAAC;IACL,EAAE,EAAE,GAAG,CAAC;IACR,GAAG,EAAE,CAAC,CAAC;IACP,IAAI,EAAE,CAAC,CAAC;CACT,CAAC;AAEF,8DAA8D;AAC9D,oBAAY,uBAAuB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY,EAAE,kBAW1B,CAAC"}
+{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/space.ts"],"names":[],"mappings":"AAAA,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAO7B,qEAAqE;AACrE,oBAAY,WAAW,GAAG;IACxB,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,SAAS,CAAC;IAChB,GAAG,EAAE,QAAQ,CAAC;IACd,EAAE,EAAE,SAAS,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,QAAQ,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,QAAQ,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,kCAAkC;AAClC,oBAAY,eAAe,GAAG,MAAM,WAAW,CAAC;AAEhD,+CAA+C;AAC/C,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;KAmBK;AACL,eAAO,MAAM,KAAK,EAAE,WAWnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,CAAC,CAAC;IACR,GAAG,EAAE,CAAC,CAAC;IACP,EAAE,EAAE,EAAE,CAAC;IACP,CAAC,EAAE,EAAE,CAAC;IACN,CAAC,EAAE,EAAE,CAAC;IACN,CAAC,EAAE,EAAE,CAAC;IACN,EAAE,EAAE,EAAE,CAAC;IACP,GAAG,EAAE,EAAE,CAAC;IACR,IAAI,EAAE,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,oBAAY,uBAAuB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,kBAW1B,CAAC"}

package/dist/es6/tokens/lib/space.js

@@ -31,40 +31,33 @@ export const space = {
     xxxl: '5rem',
 };
 /**
- * An object of space keys and their numeric rem values (numbers)
- * - These are helpful when you need a raw numeric rem value.
- * - Here's an example usage to perform calculations:
- * @example
+ * Example using `space` with calc instead of deprecated `spaceNumbers`.
+ *
  * ```tsx
- * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ *  // With deprecated `spaceNumbers`
+ * {
+ *  paddingLeft: spaceNumbers.xl + 2 // 42px
+ * }
  * ```
  *
- * Below is a table to show the equivalent values from `px` to `rem`.
- * This is based on the default browser font size which is `16px`.
- *
- * | px Value  | rem Value | space token |
- * | --------- | --------- | ----------- |
- * | 0         | 0         | zero        |
- * | 4px       | 0.25rem   | xxxs        |
- * | 8px       | 0.5rem    | xxs         |
- * | 12px      | 0.75rem   | xs          |
- * | 16px      | 1rem      | s           |
- * | 24px      | 1.5rem    | m           |
- * | 32px      | 2rem      | l           |
- * | 40px      | 2.5rem    | xl          |
- * | 64px      | 4rem      | xxl         |
- * | 80px      | 5rem      | xxxl        |
+ * ```tsx
+ * // With `rem` based `space` tokens
+ * {
+ *  padding: `calc(${space.xl} + 2px)` // 42px
+ * }
+ * ```
  *
+ * @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
  */
 export const spaceNumbers = {
     zero: 0,
-    xxxs: 0.25,
-    xxs: 0.5,
-    xs: 0.75,
-    s: 1,
-    m: 1.5,
-    l: 2,
-    xl: 2.5,
-    xxl: 4,
-    xxxl: 5,
+    xxxs: 4,
+    xxs: 8,
+    xs: 12,
+    s: 16,
+    m: 24,
+    l: 32,
+    xl: 40,
+    xxl: 64,
+    xxxl: 80,
 };

package/dist/es6/tooltip/lib/TooltipContainer.js

@@ -1,6 +1,6 @@
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { borderRadius, colors, space, spaceNumbers, type } from '@workday/canvas-kit-react/tokens';
+import { borderRadius, colors, space, type } from '@workday/canvas-kit-react/tokens';
 import { getTranslateFromOrigin } from '@workday/canvas-kit-react/common';
 const tooltipAnimation = (transformOrigin) => {
     const translate = getTranslateFromOrigin(transformOrigin, space.xxxs);
@@ -44,9 +44,9 @@ export const TooltipContainer = styled('div')({
     },
     // offset tooltips by 2 pixels when a keyboard focus ring is detected
     '[data-whatinput=keyboard] &': {
-        padding: `${spaceNumbers.s - 0.125}rem`,
+        padding: `calc(${space.s} - 0.125rem)`,
         ':before': {
-            margin: `${spaceNumbers.xxxs + 0.125}rem`,
+            margin: `calc(${space.xxxs} + 0.125rem)`,
         },
     },
     // Hide tooltip when the reference element is either clipped or fully hidden

package/layout/lib/Box.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
 import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
+import {CSProps, handleCsProp} from '@workday/canvas-kit-styling';
 
 // style props
 import {background} from './utils/background';
@@ -34,9 +35,10 @@ import {CommonStyleProps} from './utils/styleProps';
  * - space
  * - text
  */
-export type BoxProps = CommonStyleProps & {
-  children?: React.ReactNode;
-};
+export type BoxProps = CommonStyleProps &
+  CSProps & {
+    children?: React.ReactNode;
+  };
 
 const omittedProps = [
   'display',
@@ -142,7 +144,7 @@ export const Box = createComponent('div')({
     );
 
     return (
-      <BoxComponent as={Element} ref={ref} {...elemProps}>
+      <BoxComponent as={Element} ref={ref} {...handleCsProp(elemProps)}>
         {children}
       </BoxComponent>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.0.0-alpha.538-next.0",
+  "version": "10.0.0-alpha.540-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,10 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.538-next.0",
+    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.540-next.0",
+    "@workday/canvas-kit-styling": "^10.0.0-alpha.540-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
+    "@workday/canvas-tokens-web": "0.1.6",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
     "csstype": "^3.0.2",
@@ -66,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "aa04f7e8012dc4b9c142331720e357cf66c0ae5a"
+  "gitHead": "fc8abdabca2c55aad11f09a8f05570bd55aa3478"
 }

package/popup/lib/PopupCloseIcon.tsx

@@ -21,7 +21,7 @@ export const PopupCloseIcon = createSubcomponent('button')({
       icon={xIcon}
       type="button"
       position="absolute"
-      right={space.xxxs}
+      insetInlineEnd={space.xxxs}
       top={space.xxxs}
       {...elemProps}
     />

package/radio/lib/Radio.tsx

@@ -8,13 +8,7 @@ import {
   Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {
-  borderRadius,
-  colors,
-  inputColors,
-  space,
-  spaceNumbers,
-} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, inputColors, space} from '@workday/canvas-kit-react/tokens';
 import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface RadioProps extends Themeable {
@@ -53,19 +47,12 @@ export interface RadioProps extends Themeable {
   variant?: 'inverse' | undefined;
 }
 
-const radioBorderRadius = `${spaceNumbers.xxs + 0.0625}rem`;
-const radioDot = space.xxs;
-const radioHeight = (spaceNumbers.xl - spaceNumbers.xxxs) / 2;
-const radioTapArea = space.m;
-const radioContainerHeight = radioTapArea;
-const radioLabelDistance = space.xs;
-const radioWidth = radioHeight;
-const rippleRadius = (spaceNumbers.l - radioWidth) / 2;
+const radioBorderRadius = 9;
 
 const RadioContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',
-  minHeight: radioContainerHeight,
+  minHeight: space.m,
   position: 'relative',
 });
 
@@ -76,17 +63,17 @@ const RadioContainer = styled('div')({
  */
 const RadioInputWrapper = styled('div')<Pick<RadioProps, 'disabled'>>({
   display: 'flex',
-  height: `${radioHeight}rem`,
-  width: `${radioWidth}rem`,
+  height: `calc(${space.s} + 2px)`,
+  width: `calc(${space.s} + 2px)`,
 });
 
 const RadioRipple = styled('span')<Pick<RadioProps, 'disabled' | 'variant'>>(
   {
     borderRadius: borderRadius.circle,
     boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: `${radioHeight}rem`,
+    height: `calc(${space.s} + 2px)`,
     transition: 'box-shadow 150ms ease-out',
-    width: `${radioWidth}rem`,
+    width: `calc(${space.s} + 2px)`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
   },
@@ -97,9 +84,9 @@ const RadioRipple = styled('span')<Pick<RadioProps, 'disabled' | 'variant'>>(
 
 const RadioInput = styled('input')<RadioProps & StyledType>(
   {
-    borderRadius: radioBorderRadius,
-    width: radioTapArea,
-    height: radioTapArea,
+    borderRadius: `calc(${space.xxs} + 1px)`,
+    width: space.m,
+    height: space.m,
     margin: 0,
     marginTop: '-3px',
     marginLeft: '-3px',
@@ -135,7 +122,9 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
     // `span:first-of-type` refers to `RadioRipple`, the light grey
     // element that animates around the component on hover
     '&:hover ~ span:first-of-type': {
-      boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${colors.soap200}`,
+      boxShadow: disabled
+        ? undefined
+        : `0 0 0 calc((${space.l} - (${space.s} + 2px)) / 2) ${colors.soap200}`,
     },
 
     // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
@@ -218,13 +207,13 @@ const RadioBackground = styled('div')<RadioProps>(
     borderWidth: '1px',
     boxSizing: 'border-box',
     display: 'flex',
-    height: `${radioHeight}rem`,
+    height: `calc(${space.s} + 2px)`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: `${radioWidth}rem`,
+    width: `calc(${space.s} + 2px)`,
   },
   ({
     checked,
@@ -261,10 +250,10 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked' | 'variant'>>(
     borderRadius: radioBorderRadius,
     display: 'flex',
     flexDirection: 'column',
-    height: radioDot,
+    height: space.xxs,
     pointerEvents: 'none',
     transition: 'transform 200ms ease, opacity 200ms ease',
-    width: radioDot,
+    width: space.xxs,
   },
   ({theme, variant}) => ({
     backgroundColor:
@@ -319,12 +308,7 @@ export const Radio = createComponent('input')({
           </RadioBackground>
         </RadioInputWrapper>
         {label && (
-          <LabelText
-            paddingLeft={radioLabelDistance}
-            htmlFor={inputId}
-            disabled={disabled}
-            variant={variant}
-          >
+          <LabelText paddingLeft={space.xs} htmlFor={inputId} disabled={disabled} variant={variant}>
             {label}
           </LabelText>
         )}

package/segmented-control/lib/SegmentedControlButton.tsx

@@ -29,11 +29,13 @@ const getIconButtonColors = (toggled?: boolean): ButtonColors => {
       icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
     },
     focus: {
-      background: toggled ? colors.blueberry400 : undefined,
+      background: toggled ? colors.blueberry400 : colors.soap200,
       icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+      border: toggled ? 'transparent' : colors.soap500,
     },
     disabled: {
       background: toggled ? colors.soap100 : colors.soap100,
+      border: colors.soap500,
       icon: colors.soap600,
       opacity: '1',
     },

package/table/lib/Table.tsx

@@ -17,8 +17,7 @@ const TableComponent = styled('table')(type.levels.subtext.large, {
 });
 
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
   public render() {

package/table/lib/TableRow.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import styled, {CSSObject} from '@emotion/styled';
 import {rgba} from 'polished';
-import {colors, space, spaceNumbers, statusColors} from '@workday/canvas-kit-react/tokens';
+import {colors, space, statusColors} from '@workday/canvas-kit-react/tokens';
 import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
 import {borderColor, borderWidth, cellBorder} from './Table';
 
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export enum TableRowState {
   Error,
@@ -19,8 +18,7 @@ export enum TableRowState {
 }
 
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   /**
@@ -108,7 +106,7 @@ const StyledTableRow = styled('tr')<TableRowProps>(
       fontSize: 13,
       borderRight: cellBorder,
       borderBottom: cellBorder,
-      height: `${spaceNumbers.xl + spaceNumbers.xxs}rem`,
+      height: `calc(${space.xl} + ${space.xxs})`,
       boxSizing: 'border-box',
       transition: 'background-color 0.2s',
     },
@@ -201,8 +199,7 @@ const StyledTableRow = styled('tr')<TableRowProps>(
 );
 
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export const TableRow = createComponent('tr')({
   displayName: 'TableRow',

package/text-area/lib/TextArea.tsx

@@ -8,13 +8,7 @@ import {
   styled,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import {
-  borderRadius,
-  inputColors,
-  space,
-  spaceNumbers,
-  type,
-} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, inputColors, space, type} from '@workday/canvas-kit-react/tokens';
 
 export interface TextAreaProps extends Themeable, GrowthBehavior {
   /**
@@ -66,7 +60,7 @@ const StyledTextArea = styled('textarea')<TextAreaProps & StyledType>(
     borderRadius: borderRadius.m,
     boxSizing: 'border-box',
     minHeight: space.xxl,
-    minWidth: `${spaceNumbers.xxxl * 3 + spaceNumbers.xl}rem`,
+    minWidth: `calc((${space.xxxl} * 3) + ${space.xl})`,
     transition: '0.2s box-shadow, 0.2s border-color',
     padding: space.xxs, // Compensate for border
     margin: 0, // Fix Safari

package/text-input/lib/TextInput.tsx

@@ -8,7 +8,7 @@ import {
   styled,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import {borderRadius, inputColors, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, inputColors, space, type} from '@workday/canvas-kit-react/tokens';
 
 export interface TextInputProps extends Themeable, GrowthBehavior {
   /**
@@ -33,7 +33,7 @@ const StyledTextInput = styled('input')<
     boxSizing: 'border-box',
     height: 40,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: `${spaceNumbers.xxs}rem`, // Compensate for border
+    padding: space.xxs, // Compensate for border
     margin: 0, // Fix Safari
     '&::placeholder': {
       color: inputColors.placeholder,

package/tokens/README.md

@@ -130,45 +130,42 @@ Border Radius variables are in a "t-shirt size" format. Border Radius values are
 
 ## Space
 
-Space variables are in a "t-shirt size" format. Space values are in `px` format (`space`) or number
-format (`spaceNumbers`).
-
-| Variable | Size (rem)  | Size (number) |
-| -------- | ----------- | ------------- |
-| `xxxs`   | `'0.25rem'` | `0.25`        |
-| `xxs`    | `'0.5rem'`  | `0.5`         |
-| `xs`     | `'0.75rem'` | `0.75`        |
-| `s`      | `'1rem'`    | `1`           |
-| `m`      | `'1.5rem'`  | `1.5`         |
-| `l`      | `'2rem'`    | `2`           |
-| `xl`     | `'2.5rem'`  | `2.5`         |
-| `xxl`    | `'4rem'`    | `4`           |
-| `xxxl`   | `'5rem'`    | `5`           |
-
-The following space types are also provided: `CanvasSpace`, `CanvasSpaceValues`,
-`CanvasSpaceNumbers`, `CanvasSpaceNumberValues`
+Space variables are in a "t-shirt size" format. Space values are in `rem` format (`space`)
+
+| Variable | Size (rem)  | Size (calculated pixels) |
+| -------- | ----------- | ------------------------ |
+| `zero`   | `'0rem'`    | `0px`                    |
+| `xxxs`   | `'0.25rem'` | `4px`                    |
+| `xxs`    | `'0.5rem'`  | `8px`                    |
+| `xs`     | `'0.75rem'` | `12px`                   |
+| `s`      | `'1rem'`    | `16px`                   |
+| `m`      | `'1.5rem'`  | `24px`                   |
+| `l`      | `'2rem'`    | `32px`                   |
+| `xl`     | `'2.5rem'`  | `40px`                   |
+| `xxl`    | `'4rem'`    | `64px`                   |
+| `xxxl`   | `'5rem'`    | `80px`                   |
+
+The following space types are also provided: `CanvasSpace`, `CanvasSpaceValues`.
 
 Below are descriptions of these types:
 
-| Name                      | Description                                   |
-| ------------------------- | --------------------------------------------- |
-| `CanvasSpace`             | `space` object with string rem values         |
-| `CanvasSpaceValues`       | string rem values for CanvasSpace             |
-| `CanvasSpaceNumbers`      | `spaceNumbers` object with numeric rem values |
-| `CanvasSpaceNumberValues` | numeric rem values for CanvasSpaceNumbers     |
+| Name                | Description                           |
+| ------------------- | ------------------------------------- |
+| `CanvasSpace`       | `space` object with string rem values |
+| `CanvasSpaceValues` | string rem values for CanvasSpace     |
 
 ### Usage
 
 ```tsx
-import {space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
+import {space} from '@workday/canvas-kit-react/tokens';
 
-const iconSize = 1.25;
+const iconSize = '1.25rem';
 
 const buttonSyles = {
-  paddingTop: space.xs,
-  paddingRight: space.s,
+  paddingTop: `calc(${space.xs} + 2px)`,
+  paddingInlineStart: space.s,
   paddingBottom: space.xs,
-  paddingLeft: `${spaceNumbers.s + iconSize}rem`,
+  paddingInlineEnd: `calc(${space.s} + ${iconSize})`,
 };
 ```