@workday/canvas-kit-react 10.0.0-alpha.446-next.0 → 10.0.0-alpha.447-next.0

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

@@ -1,44 +1,82 @@
 declare type ValueOf<T> = T[keyof T];
-/** Type for the `space` object with keys and px values (strings) */
+/** Type for the `space` object with keys and rem values (strings) */
 export declare type CanvasSpace = {
-    zero: '0px';
-    xxxs: '4px';
-    xxs: '8px';
-    xs: '12px';
-    s: '16px';
-    m: '24px';
-    l: '32px';
-    xl: '40px';
-    xxl: '64px';
-    xxxl: '80px';
+    zero: '0';
+    xxxs: '0.25rem';
+    xxs: '0.5rem';
+    xs: '0.75rem';
+    s: '1rem';
+    m: '1.5rem';
+    l: '2rem';
+    xl: '2.5rem';
+    xxl: '4rem';
+    xxxl: '5rem';
 };
 /** Type for `CanvasSpace` keys */
 export declare type CanvasSpaceKeys = keyof CanvasSpace;
-/** The px values for CanvasSpace (strings) */
+/** The rem values for CanvasSpace (strings) */
 export declare type CanvasSpaceValues = ValueOf<CanvasSpace>;
-/** An object of space keys and px values (strings) */
+/**
+ * An object of space keys and rem values (strings)
+ *
+ * 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        |
+ *
+ * */
 export declare const space: CanvasSpace;
-/** Type for the `spaceNumbers` object with keys and numeric px values (numbers) */
+/** Type for the `spaceNumbers` object with keys and numeric rem values (numbers) */
 export declare type CanvasSpaceNumbers = {
     zero: 0;
-    xxxs: 4;
-    xxs: 8;
-    xs: 12;
-    s: 16;
-    m: 24;
-    l: 32;
-    xl: 40;
-    xxl: 64;
-    xxxl: 80;
+    xxxs: 0.25;
+    xxs: 0.5;
+    xs: 0.75;
+    s: 1;
+    m: 1.5;
+    l: 2;
+    xl: 2.5;
+    xxl: 4;
+    xxxl: 5;
 };
-/** The numeric px values for CanvasSpaceNumbers (numbers) */
+/** The numeric rem values for CanvasSpaceNumbers (numbers) */
 export declare type CanvasSpaceNumberValues = ValueOf<CanvasSpaceNumbers>;
 /**
- * An object of space keys and their numeric px values (numbers)
- * - These are helpful when you need a raw numeric px value.
+ * 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
- * const buttonPaddingLeft = spaceNumbers.s + iconSize;
+ * ```tsx
+ * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ * ```
+ *
+ * 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        |
+ *
  */
 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,oEAAoE;AACpE,oBAAY,WAAW,GAAG;IACxB,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,KAAK,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,kCAAkC;AAClC,oBAAY,eAAe,GAAG,MAAM,WAAW,CAAC;AAEhD,8CAA8C;AAC9C,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD,sDAAsD;AACtD,eAAO,MAAM,KAAK,EAAE,WAWnB,CAAC;AAEF,mFAAmF;AACnF,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,6DAA6D;AAC7D,oBAAY,uBAAuB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAElE;;;;;;GAMG;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,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"}

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

@@ -1,32 +1,70 @@
-/** An object of space keys and px values (strings) */
+/**
+ * An object of space keys and rem values (strings)
+ *
+ * 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        |
+ *
+ * */
 export const space = {
-    zero: '0px',
-    xxxs: '4px',
-    xxs: '8px',
-    xs: '12px',
-    s: '16px',
-    m: '24px',
-    l: '32px',
-    xl: '40px',
-    xxl: '64px',
-    xxxl: '80px',
+    zero: '0',
+    xxxs: '0.25rem',
+    xxs: '0.5rem',
+    xs: '0.75rem',
+    s: '1rem',
+    m: '1.5rem',
+    l: '2rem',
+    xl: '2.5rem',
+    xxl: '4rem',
+    xxxl: '5rem',
 };
 /**
- * An object of space keys and their numeric px values (numbers)
- * - These are helpful when you need a raw numeric px value.
+ * 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
- * const buttonPaddingLeft = spaceNumbers.s + iconSize;
+ * ```tsx
+ * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ * ```
+ *
+ * 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        |
+ *
  */
 export const spaceNumbers = {
     zero: 0,
-    xxxs: 4,
-    xxs: 8,
-    xs: 12,
-    s: 16,
-    m: 24,
-    l: 32,
-    xl: 40,
-    xxl: 64,
-    xxxl: 80,
+    xxxs: 0.25,
+    xxs: 0.5,
+    xs: 0.75,
+    s: 1,
+    m: 1.5,
+    l: 2,
+    xl: 2.5,
+    xxl: 4,
+    xxxl: 5,
 };

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

@@ -23,7 +23,7 @@ export const TooltipContainer = styled('div')({
     ...type.levels.subtext.medium,
     display: 'inline-flex',
     position: 'relative',
-    padding: spaceNumbers.xxs + spaceNumbers.xxxs,
+    padding: space.xs,
     color: colors.frenchVanilla100,
     a: {
         color: colors.frenchVanilla100,
@@ -34,7 +34,7 @@ export const TooltipContainer = styled('div')({
         content: '""',
         borderRadius: borderRadius.m,
         zIndex: -1,
-        margin: spaceNumbers.xxxs,
+        margin: space.xxxs,
         backgroundColor: 'rgba(0,0,0,.85)',
         position: 'absolute',
         top: 0,
@@ -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.xxs + spaceNumbers.xxxs + 2,
+        padding: `${spaceNumbers.s - 0.125}rem`,
         ':before': {
-            margin: spaceNumbers.xxxs + 2,
+            margin: `${spaceNumbers.xxxs + 0.125}rem`,
         },
     },
     // Hide tooltip when the reference element is either clipped or fully hidden
@@ -56,16 +56,16 @@ export const TooltipContainer = styled('div')({
     },
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
-        left: -spaceNumbers.xxxs,
+        left: `-${space.xxxs}`,
     },
     '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
-        right: -spaceNumbers.xxxs,
+        right: `-${space.xxxs}`,
     },
     '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
-        top: -spaceNumbers.xxxs,
+        top: `-${space.xxxs}`,
     },
     '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
-        bottom: -spaceNumbers.xxxs,
+        bottom: `-${space.xxxs}`,
     },
 }, ({ transformOrigin = defaultTransformOrigin }) => {
     if (transformOrigin === null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.0.0-alpha.446-next.0",
+  "version": "10.0.0-alpha.447-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,7 +49,7 @@
     "@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.446-next.0",
+    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.447-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "7202c6904b61f4ef6d4a221276faa1e13062c8e3"
+  "gitHead": "7fc0c577c5f944eabe967840a78fc77f781833ce"
 }

package/radio/lib/Radio.tsx

@@ -8,7 +8,13 @@ import {
   Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
+import {
+  borderRadius,
+  colors,
+  inputColors,
+  space,
+  spaceNumbers,
+} from '@workday/canvas-kit-react/tokens';
 import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface RadioProps extends Themeable {
@@ -47,13 +53,13 @@ export interface RadioProps extends Themeable {
   variant?: 'inverse' | undefined;
 }
 
-const radioBorderRadius = 9;
-const radioDot = 8;
-const radioHeight = 18;
-const radioTapArea = spaceNumbers.m;
+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 = spaceNumbers.xs;
-const radioWidth = 18;
+const radioLabelDistance = space.xs;
+const radioWidth = radioHeight;
 const rippleRadius = (spaceNumbers.l - radioWidth) / 2;
 
 const RadioContainer = styled('div')({
@@ -70,17 +76,17 @@ const RadioContainer = styled('div')({
  */
 const RadioInputWrapper = styled('div')<Pick<RadioProps, 'disabled'>>({
   display: 'flex',
-  height: radioHeight,
-  width: radioWidth,
+  height: `${radioHeight}rem`,
+  width: `${radioWidth}rem`,
 });
 
 const RadioRipple = styled('span')<Pick<RadioProps, 'disabled' | 'variant'>>(
   {
     borderRadius: borderRadius.circle,
     boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: radioHeight,
+    height: `${radioHeight}rem`,
     transition: 'box-shadow 150ms ease-out',
-    width: radioWidth,
+    width: `${radioWidth}rem`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
   },
@@ -129,7 +135,7 @@ 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}px ${colors.soap200}`,
+      boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${colors.soap200}`,
     },
 
     // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
@@ -212,13 +218,13 @@ const RadioBackground = styled('div')<RadioProps>(
     borderWidth: '1px',
     boxSizing: 'border-box',
     display: 'flex',
-    height: radioHeight,
+    height: `${radioHeight}rem`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: radioWidth,
+    width: `${radioWidth}rem`,
   },
   ({
     checked,

package/select/lib/Select.tsx

@@ -8,14 +8,7 @@ import {
   styled,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import {
-  colors,
-  borderRadius,
-  inputColors,
-  spaceNumbers,
-  type,
-  space,
-} from '@workday/canvas-kit-react/tokens';
+import {colors, borderRadius, inputColors, type, space} from '@workday/canvas-kit-react/tokens';
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {SelectOption} from './SelectOption';
@@ -55,7 +48,7 @@ const StyledSelect = styled('select')<SelectProps & StyledType>(
     height: space.xl,
     minWidth: 280,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: spaceNumbers.xxs,
+    padding: space.xxs,
     margin: 0, // Fix Safari
     MozAppearance: 'none', // FF bugfix: hide arrow so it doesn't show under ours
     WebkitAppearance: 'none',

package/table/lib/TableRow.tsx

@@ -100,7 +100,7 @@ const StyledTableRow = styled('tr')<TableRowProps>(
       fontSize: 13,
       borderRight: cellBorder,
       borderBottom: cellBorder,
-      height: spaceNumbers.xl + spaceNumbers.xxs,
+      height: `${spaceNumbers.xl + spaceNumbers.xxs}rem`,
       boxSizing: 'border-box',
       transition: 'background-color 0.2s',
     },

package/text-area/lib/TextArea.tsx

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

package/text-input/lib/TextInput.tsx

@@ -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, // Compensate for border
+    padding: `${spaceNumbers.xxs}rem`, // Compensate for border
     margin: 0, // Fix Safari
     '&::placeholder': {
       color: inputColors.placeholder,

package/tokens/README.md

@@ -133,42 +133,42 @@ Border Radius variables are in a "t-shirt size" format. Border Radius values are
 Space variables are in a "t-shirt size" format. Space values are in `px` format (`space`) or number
 format (`spaceNumbers`).
 
-| Variable | Size (px) | Size (number) |
-| -------- | --------- | ------------- |
-| `xxxs`   | `'4px'`   | `4`           |
-| `xxs`    | `'8px'`   | `8`           |
-| `xs`     | `'12px'`  | `12`          |
-| `s`      | `'16px'`  | `16`          |
-| `m`      | `'24px'`  | `24`          |
-| `l`      | `'32px'`  | `32`          |
-| `xl`     | `'40px'`  | `40`          |
-| `xxl`    | `'64px'`  | `64`          |
-| `xxxl`   | `'80px'`  | `80`          |
+| 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`
 
 Below are descriptions of these types:
 
-| Name                      | Description                                  |
-| ------------------------- | -------------------------------------------- |
-| `CanvasSpace`             | `space` object with string px values         |
-| `CanvasSpaceValues`       | string px values for CanvasSpace             |
-| `CanvasSpaceNumbers`      | `spaceNumbers` object with numeric px values |
-| `CanvasSpaceNumberValues` | numeric px values for CanvasSpaceNumbers     |
+| 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     |
 
 ### Usage
 
 ```tsx
 import {space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
 
-const iconSize = 20;
+const iconSize = 1.25;
 
 const buttonSyles = {
   paddingTop: space.xs,
   paddingRight: space.s,
   paddingBottom: space.xs,
-  paddingLeft: spaceNumbers.s + iconSize,
+  paddingLeft: `${spaceNumbers.s + iconSize}rem`,
 };
 ```
 

package/tokens/index.ts

@@ -21,8 +21,7 @@ import {
   CanvasSpaceValues,
   CanvasSpaceNumberValues,
   CanvasSpaceNumbers,
-  spaceNumbers,
-} from './lib/space';
+  spaceNumbers} from './lib/space';
 import {type,
   fontFamily,
   monoFontFamily,

package/tokens/lib/depth.ts

@@ -29,7 +29,7 @@ export type CanvasDepth = {
    * ```
    */
   1: {
-    boxShadow: '0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)';
+    boxShadow: '0 0.0625rem 0.25rem rgba(31, 38, 46, 0.12), 0 0.125rem 0.5rem rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 2
@@ -45,7 +45,7 @@ export type CanvasDepth = {
    * ```
    */
   2: {
-    boxShadow: '0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)';
+    boxShadow: '0 0.125rem 0.5rem rgba(31, 38, 46, 0.12), 0 0.25rem 1rem rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 3
@@ -61,7 +61,7 @@ export type CanvasDepth = {
    * ```
    */
   3: {
-    boxShadow: '0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)';
+    boxShadow: '0 0.1875rem 0.75rem rgba(31, 38, 46, 0.12), 0 0.375rem 1.5rem rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 4
@@ -76,7 +76,7 @@ export type CanvasDepth = {
    * ```
    */
   4: {
-    boxShadow: '0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)';
+    boxShadow: '0 0.25rem 1rem rgba(31, 38, 46, 0.12), 0 0.5rem 2rem rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 5
@@ -92,7 +92,7 @@ export type CanvasDepth = {
    * ```
    */
   5: {
-    boxShadow: '0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)';
+    boxShadow: '0 0.3125rem 1.25rem rgba(31, 38, 46, 0.12), 0 0.625rem 2.5rem rgba(31, 38, 46, 0.08)';
   };
   /**
    * ### Depth 6
@@ -108,7 +108,7 @@ export type CanvasDepth = {
    * ```
    */
   6: {
-    boxShadow: '0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)';
+    boxShadow: '0 0.375rem 1.5rem rgba(31, 38, 46, 0.12), 0 0.75rem 3rem rgba(31, 38, 46, 0.08)';
   };
 };
 
@@ -137,26 +137,30 @@ export type CanvasDepthValues = ValueOf<CanvasDepth>;
  * ```
  *
  */
+
 export const depth: CanvasDepth = {
   none: {
     boxShadow: 'none',
   },
   1: {
-    boxShadow: '0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)',
+    boxShadow:
+      '0 0.0625rem 0.25rem rgba(31, 38, 46, 0.12), 0 0.125rem 0.5rem rgba(31, 38, 46, 0.08)',
   },
   2: {
-    boxShadow: '0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)',
+    boxShadow: '0 0.125rem 0.5rem rgba(31, 38, 46, 0.12), 0 0.25rem 1rem rgba(31, 38, 46, 0.08)',
   },
   3: {
-    boxShadow: '0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)',
+    boxShadow:
+      '0 0.1875rem 0.75rem rgba(31, 38, 46, 0.12), 0 0.375rem 1.5rem rgba(31, 38, 46, 0.08)',
   },
   4: {
-    boxShadow: '0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)',
+    boxShadow: '0 0.25rem 1rem rgba(31, 38, 46, 0.12), 0 0.5rem 2rem rgba(31, 38, 46, 0.08)',
   },
   5: {
-    boxShadow: '0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)',
+    boxShadow:
+      '0 0.3125rem 1.25rem rgba(31, 38, 46, 0.12), 0 0.625rem 2.5rem rgba(31, 38, 46, 0.08)',
   },
   6: {
-    boxShadow: '0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)',
+    boxShadow: '0 0.375rem 1.5rem rgba(31, 38, 46, 0.12), 0 0.75rem 3rem rgba(31, 38, 46, 0.08)',
   },
 };