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

package/dist/es6/lib/docs.js

@@ -21276,7 +21276,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     "tags": {},
     "type": {
       "kind": "number",
-      "value": 1
+      "value": 0.0625
     }
   },
   {
@@ -21291,8 +21291,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     ],
     "tags": {},
     "type": {
-      "kind": "number",
-      "value": 280
+      "kind": "primitive",
+      "value": "string"
     }
   },
   {
@@ -54040,19 +54040,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           },
           {
             "kind": "string",
-            "value": "40px"
+            "value": "2.5rem"
           },
           {
             "kind": "string",
-            "value": "80px"
+            "value": "5rem"
           },
           {
             "kind": "string",
-            "value": "32px"
+            "value": "2rem"
           },
           {
             "kind": "string",
-            "value": "24px"
+            "value": "1.5rem"
           }
         ]
       }
@@ -228588,7 +228588,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.0625rem 0.25rem rgba(31, 38, 46, 0.12), 0 0.125rem 0.5rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228625,7 +228625,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.125rem 0.5rem rgba(31, 38, 46, 0.12), 0 0.25rem 1rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228662,7 +228662,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.1875rem 0.75rem rgba(31, 38, 46, 0.12), 0 0.375rem 1.5rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228699,7 +228699,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.25rem 1rem rgba(31, 38, 46, 0.12), 0 0.5rem 2rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228736,7 +228736,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.3125rem 1.25rem rgba(31, 38, 46, 0.12), 0 0.625rem 2.5rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228773,7 +228773,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.375rem 1.5rem rgba(31, 38, 46, 0.12), 0 0.75rem 3rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228848,7 +228848,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.0625rem 0.25rem rgba(31, 38, 46, 0.12), 0 0.125rem 0.5rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228870,7 +228870,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.125rem 0.5rem rgba(31, 38, 46, 0.12), 0 0.25rem 1rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228892,7 +228892,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.1875rem 0.75rem rgba(31, 38, 46, 0.12), 0 0.375rem 1.5rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228914,7 +228914,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.25rem 1rem rgba(31, 38, 46, 0.12), 0 0.5rem 2rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228936,7 +228936,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.3125rem 1.25rem rgba(31, 38, 46, 0.12), 0 0.625rem 2.5rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -228958,7 +228958,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)"
+                  "value": "0 0.375rem 1.5rem rgba(31, 38, 46, 0.12), 0 0.75rem 3rem rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -229140,23 +229140,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "value": [
           {
             "kind": "string",
-            "value": "8px"
+            "value": "4px"
           },
           {
             "kind": "string",
-            "value": "0px"
+            "value": "999px"
           },
           {
             "kind": "string",
-            "value": "4px"
+            "value": "2px"
           },
           {
             "kind": "string",
-            "value": "999px"
+            "value": "0px"
           },
           {
             "kind": "string",
-            "value": "2px"
+            "value": "8px"
           }
         ]
       }
@@ -229182,7 +229182,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "CanvasSpace",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
-    "description": "Type for the `space` object with keys and px values (strings)",
+    "description": "Type for the `space` object with keys and rem values (strings)",
     "declarations": [
       {
         "name": "CanvasSpace",
@@ -229199,7 +229199,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "0px"
+            "value": "0"
           },
           "description": "",
           "declarations": [
@@ -229216,7 +229216,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "4px"
+            "value": "0.25rem"
           },
           "description": "",
           "declarations": [
@@ -229233,7 +229233,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "8px"
+            "value": "0.5rem"
           },
           "description": "",
           "declarations": [
@@ -229250,7 +229250,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "12px"
+            "value": "0.75rem"
           },
           "description": "",
           "declarations": [
@@ -229267,7 +229267,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "16px"
+            "value": "1rem"
           },
           "description": "",
           "declarations": [
@@ -229284,7 +229284,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "24px"
+            "value": "1.5rem"
           },
           "description": "",
           "declarations": [
@@ -229301,7 +229301,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "32px"
+            "value": "2rem"
           },
           "description": "",
           "declarations": [
@@ -229318,7 +229318,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "40px"
+            "value": "2.5rem"
           },
           "description": "",
           "declarations": [
@@ -229335,7 +229335,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "64px"
+            "value": "4rem"
           },
           "description": "",
           "declarations": [
@@ -229352,7 +229352,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "string",
-            "value": "80px"
+            "value": "5rem"
           },
           "description": "",
           "declarations": [
@@ -229394,7 +229394,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "CanvasSpaceValues",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
-    "description": "The px values for CanvasSpace (strings)",
+    "description": "The rem values for CanvasSpace (strings)",
     "declarations": [
       {
         "name": "CanvasSpaceValues",
@@ -229410,43 +229410,43 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "value": [
           {
             "kind": "string",
-            "value": "40px"
+            "value": "2.5rem"
           },
           {
             "kind": "string",
-            "value": "80px"
+            "value": "5rem"
           },
           {
             "kind": "string",
-            "value": "32px"
+            "value": "2rem"
           },
           {
             "kind": "string",
-            "value": "24px"
+            "value": "1.5rem"
           },
           {
             "kind": "string",
-            "value": "16px"
+            "value": "1rem"
           },
           {
             "kind": "string",
-            "value": "12px"
+            "value": "0.75rem"
           },
           {
             "kind": "string",
-            "value": "8px"
+            "value": "0.5rem"
           },
           {
             "kind": "string",
-            "value": "0px"
+            "value": "0"
           },
           {
             "kind": "string",
-            "value": "4px"
+            "value": "0.25rem"
           },
           {
             "kind": "string",
-            "value": "64px"
+            "value": "4rem"
           }
         ]
       }
@@ -229455,7 +229455,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "space",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
-    "description": "An object of space keys and px values (strings)",
+    "description": "An object of space keys and rem values (strings)\n\nBelow is a table to show the equivalent values from `px` to `rem`.\nThis is based on the default browser font size which is `16px`.\n\n| px Value  | rem Value | space token |\n| --------- | --------- | ----------- |\n| 0         | 0         | zero        |\n| 4px       | 0.25rem   | xxxs        |\n| 8px       | 0.5rem    | xxs         |\n| 12px      | 0.75rem   | xs          |\n| 16px      | 1rem      | s           |\n| 24px      | 1.5rem    | m           |\n| 32px      | 2rem      | l           |\n| 40px      | 2.5rem    | xl          |\n| 64px      | 4rem      | xxl         |\n| 80px      | 5rem      | xxxl        |",
     "declarations": [
       {
         "name": "space",
@@ -229472,7 +229472,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "CanvasSpaceNumbers",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
-    "description": "Type for the `spaceNumbers` object with keys and numeric px values (numbers)",
+    "description": "Type for the `spaceNumbers` object with keys and numeric rem values (numbers)",
     "declarations": [
       {
         "name": "CanvasSpaceNumbers",
@@ -229506,7 +229506,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "number",
-            "value": 4
+            "value": 0.25
           },
           "description": "",
           "declarations": [
@@ -229523,7 +229523,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "number",
-            "value": 8
+            "value": 0.5
           },
           "description": "",
           "declarations": [
@@ -229540,7 +229540,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "number",
-            "value": 12
+            "value": 0.75
           },
           "description": "",
           "declarations": [
@@ -229557,7 +229557,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "number",
-            "value": 16
+            "value": 1
           },
           "description": "",
           "declarations": [
@@ -229574,7 +229574,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "number",
-            "value": 24
+            "value": 1.5
           },
           "description": "",
           "declarations": [
@@ -229591,7 +229591,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "number",
-            "value": 32
+            "value": 2
           },
           "description": "",
           "declarations": [
@@ -229608,7 +229608,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "number",
-            "value": 40
+            "value": 2.5
           },
           "description": "",
           "declarations": [
@@ -229625,7 +229625,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "number",
-            "value": 64
+            "value": 4
           },
           "description": "",
           "declarations": [
@@ -229642,7 +229642,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "required": true,
           "type": {
             "kind": "number",
-            "value": 80
+            "value": 5
           },
           "description": "",
           "declarations": [
@@ -229659,7 +229659,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "CanvasSpaceNumberValues",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
-    "description": "The numeric px values for CanvasSpaceNumbers (numbers)",
+    "description": "The numeric rem values for CanvasSpaceNumbers (numbers)",
     "declarations": [
       {
         "name": "CanvasSpaceNumberValues",
@@ -229679,39 +229679,39 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           },
           {
             "kind": "number",
-            "value": 4
+            "value": 1
           },
           {
             "kind": "number",
-            "value": 12
+            "value": 2
           },
           {
             "kind": "number",
-            "value": 16
+            "value": 4
           },
           {
             "kind": "number",
-            "value": 24
+            "value": 5
           },
           {
             "kind": "number",
-            "value": 32
+            "value": 0.5
           },
           {
             "kind": "number",
-            "value": 40
+            "value": 1.5
           },
           {
             "kind": "number",
-            "value": 8
+            "value": 0.25
           },
           {
             "kind": "number",
-            "value": 64
+            "value": 0.75
           },
           {
             "kind": "number",
-            "value": 80
+            "value": 2.5
           }
         ]
       }
@@ -229720,7 +229720,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "spaceNumbers",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
-    "description": "An object of space keys and their numeric px values (numbers)\n- These are helpful when you need a raw numeric px value.\n- Here's an example usage to perform calculations:",
+    "description": "An object of space keys and their numeric rem values (numbers)\n- These are helpful when you need a raw numeric rem value.\n- Here's an example usage to perform calculations:",
     "declarations": [
       {
         "name": "spaceNumbers",
@@ -229728,7 +229728,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     ],
     "tags": {
-      "example": "const buttonPaddingLeft = spaceNumbers.s + iconSize;"
+      "example": "```tsx\nconst buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;\n```\n\nBelow is a table to show the equivalent values from `px` to `rem`.\nThis is based on the default browser font size which is `16px`.\n\n| px Value  | rem Value | space token |\n| --------- | --------- | ----------- |\n| 0         | 0         | zero        |\n| 4px       | 0.25rem   | xxxs        |\n| 8px       | 0.5rem    | xxs         |\n| 12px      | 0.75rem   | xs          |\n| 16px      | 1rem      | s           |\n| 24px      | 1.5rem    | m           |\n| 32px      | 2rem      | l           |\n| 40px      | 2.5rem    | xl          |\n| 64px      | 4rem      | xxl         |\n| 80px      | 5rem      | xxxl        |"
     },
     "type": {
       "kind": "symbol",
@@ -230108,43 +230108,43 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "value": [
           {
             "kind": "string",
-            "value": "0.875rem"
+            "value": "2.5rem"
           },
           {
             "kind": "string",
-            "value": "1.25rem"
+            "value": "2rem"
           },
           {
             "kind": "string",
-            "value": "0.625rem"
+            "value": "1.5rem"
           },
           {
             "kind": "string",
-            "value": "0.75rem"
+            "value": "1rem"
           },
           {
             "kind": "string",
-            "value": "1rem"
+            "value": "0.75rem"
           },
           {
             "kind": "string",
-            "value": "1.125rem"
+            "value": "0.875rem"
           },
           {
             "kind": "string",
-            "value": "1.5rem"
+            "value": "1.25rem"
           },
           {
             "kind": "string",
-            "value": "1.75rem"
+            "value": "0.625rem"
           },
           {
             "kind": "string",
-            "value": "2rem"
+            "value": "1.125rem"
           },
           {
             "kind": "string",
-            "value": "2.5rem"
+            "value": "1.75rem"
           },
           {
             "kind": "string",

package/dist/mdx/10.0-UPGRADE_GUIDE.mdx

@@ -5,6 +5,8 @@ This guide contains an overview of the changes in Canvas Kit v10. Please
 any questions.
 
 - [Codemod](#codemod)
+- [Token Updates](#token-updates)
+  - [Space and Depth](#space-and-depth)
 
 ## Codemod
 
@@ -35,4 +37,50 @@ handled by the codemod are marked with 🤖 in the Upgrade Guide.**
 
 **Please verify all changes made by the codemod.** As a safety precaution, we recommend committing
 the changes from the codemod as a single isolated commit (separate from other changes) so you can
-roll back more easily if necessary.
+roll back more easily if necessary.
+
+## Token Updates
+
+### Space and Depth
+
+**PR:** [#2229](https://github.com/Workday/canvas-kit/pull/2229)
+
+In v10, we have updated our `space` and `depth` token values from `px` to `rem`. This is based on
+the default browser font size which is `16px`.
+
+These updates just mean that we have moved the values from `px` to `rem`. The values have been
+updated on a 1:1 basis. None of the base value have changed, just the unit.
+
+Below is a table to show what each token value is, what is corresponds too and what the new `rem`
+value is in `px`:
+
+| 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        |
+
+You can convert a `px` value to a `rem` value by dividing your `px` value by `16`(if your default
+browser font size hasn't been updated, the value will be `16`).
+
+For example:
+
+| Equation    | rem Value |
+| ----------- | --------- |
+| `16px/16px` | `1rem`    |
+| `32px/16px` | `2rem`    |
+| `8px/16px`  | `0.5rem`  |
+
+#### Why Did We Make This Change?
+
+We wanted to move away from absolute units in tokens to relative units for better accessibility and
+adaptability to different viewport/screen sizes. If a user changes their default browser font size,
+these sizes should change along with it. Since `px` are a fixed unit and do not scale, utilizing
+`rem` will allow these tokens to scale with a new default font size.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "10.0.0-alpha.446-next.0",
+  "version": "10.0.0-alpha.447-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^10.0.0-alpha.446-next.0",
-    "@workday/canvas-kit-preview-react": "^10.0.0-alpha.446-next.0",
-    "@workday/canvas-kit-react": "^10.0.0-alpha.446-next.0",
+    "@workday/canvas-kit-labs-react": "^10.0.0-alpha.447-next.0",
+    "@workday/canvas-kit-preview-react": "^10.0.0-alpha.447-next.0",
+    "@workday/canvas-kit-react": "^10.0.0-alpha.447-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "7202c6904b61f4ef6d4a221276faa1e13062c8e3"
+  "gitHead": "7fc0c577c5f944eabe967840a78fc77f781833ce"
 }