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

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}) => {