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

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)',
   },
 };

package/tokens/lib/space.ts

@@ -5,73 +5,111 @@ type ValueOf<T> = T[keyof T];
 // but writing it this way removes the `readonly` in the hint,
 // which adds a lot of visual noise and can be confusing for folks.
 
-/** Type for the `space` object with keys and px values (strings) */
+/** Type for the `space` object with keys and rem values (strings) */
 export 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 type CanvasSpaceKeys = keyof CanvasSpace;
 
-/** The px values for CanvasSpace (strings) */
+/** The rem values for CanvasSpace (strings) */
 export 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 const space: 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 the `spaceNumbers` object with keys and numeric px values (numbers) */
+/** Type for the `spaceNumbers` object with keys and numeric rem values (numbers) */
 export 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 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 const spaceNumbers: 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,
 };

package/tooltip/lib/TooltipContainer.tsx

@@ -50,7 +50,7 @@ export const TooltipContainer = styled('div')<TooltipContainerProps>(
     ...type.levels.subtext.medium,
     display: 'inline-flex',
     position: 'relative',
-    padding: spaceNumbers.xxs + spaceNumbers.xxxs,
+    padding: space.xs,
     color: colors.frenchVanilla100,
     a: {
       color: colors.frenchVanilla100,
@@ -61,7 +61,7 @@ export const TooltipContainer = styled('div')<TooltipContainerProps>(
       content: '""',
       borderRadius: borderRadius.m,
       zIndex: -1,
-      margin: spaceNumbers.xxxs,
+      margin: space.xxxs,
       backgroundColor: 'rgba(0,0,0,.85)',
       position: 'absolute',
       top: 0,
@@ -72,9 +72,9 @@ export const TooltipContainer = styled('div')<TooltipContainerProps>(
 
     // 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`,
       },
     },
 
@@ -86,16 +86,16 @@ export const TooltipContainer = styled('div')<TooltipContainerProps>(
 
     // 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}) => {