@workday/canvas-kit-docs 14.0.0-alpha.1227-next.0 → 14.0.0-alpha.1229-next.0

package/dist/es6/lib/docs.js

@@ -363542,327 +363542,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "MenuPopperProps",
+    "name": "TabsMenuPopperProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tabs/lib/TabsMenuPopper.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "MenuPopperProps",
+        "name": "TabsMenuPopperProps",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tabs/lib/TabsMenuPopper.tsx"
       }
     ],
     "tags": {},
     "type": {
-      "kind": "object",
-      "properties": [
-        {
-          "kind": "property",
-          "name": "anchorElement",
-          "required": false,
-          "type": {
-            "kind": "union",
-            "value": [
-              {
-                "kind": "symbol",
-                "name": "React.RefObject",
-                "typeParameters": [
-                  {
-                    "kind": "external",
-                    "name": "Element",
-                    "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
-                  }
-                ],
-                "value": "RefObject<T>"
-              },
-              {
-                "kind": "external",
-                "name": "Element",
-                "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
-              },
-              {
-                "kind": "primitive",
-                "value": "null"
-              }
-            ]
-          },
-          "description": "The reference element used to position the Popper. Popper content will try to follow the\n`anchorElement` if it moves and will reposition itself if there is no longer room in the\nwindow.",
-          "declarations": [
-            {
-              "name": "anchorElement",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "children",
-          "required": true,
-          "type": {
-            "kind": "union",
-            "value": [
-              {
-                "kind": "parenthesis",
-                "value": {
-                  "kind": "function",
-                  "parameters": [
-                    {
-                      "kind": "parameter",
-                      "name": "props",
-                      "type": {
-                        "kind": "object",
-                        "properties": [
-                          {
-                            "kind": "property",
-                            "name": "placement",
-                            "required": true,
-                            "type": {
-                              "kind": "symbol",
-                              "name": "Placement",
-                              "value": "Placement"
-                            },
-                            "description": "",
-                            "declarations": [
-                              {
-                                "name": "placement",
-                                "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-                              }
-                            ],
-                            "tags": {}
-                          }
-                        ]
-                      },
-                      "required": true,
-                      "rest": false,
-                      "description": "",
-                      "declarations": [
-                        {
-                          "name": "props",
-                          "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-                        }
-                      ],
-                      "tags": {}
-                    }
-                  ],
-                  "members": [],
-                  "returnType": {
-                    "kind": "external",
-                    "name": "ReactNode",
-                    "url": "https://reactjs.org/docs/rendering-elements.html"
-                  }
-                }
-              },
-              {
-                "kind": "external",
-                "name": "ReactNode",
-                "url": "https://reactjs.org/docs/rendering-elements.html"
-              }
-            ]
-          },
-          "description": "The content of the Popper. If a function is provided, it will be treated as a Render Prop and\npass the `placement` chosen by PopperJS. This `placement` value is useful if your popup needs\nto animate and that animation depends on the direction of the content in relation to the\n`anchorElement`.",
-          "declarations": [
-            {
-              "name": "children",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "getAnchorClientRect",
-          "required": false,
-          "type": {
-            "kind": "function",
-            "parameters": [],
-            "members": [],
-            "returnType": {
-              "kind": "symbol",
-              "name": "DOMRect",
-              "value": "DOMRect"
-            }
-          },
-          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`.",
-          "declarations": [
-            {
-              "name": "getAnchorClientRect",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "open",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "Determines if `Popper` content should be rendered. The content only exists in the DOM when\n`open` is `true`",
-          "declarations": [
-            {
-              "name": "open",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {
-            "default": "true"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "placement",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "Placement",
-            "value": "Placement"
-          },
-          "description": "The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,\n`right`, `bottom`, or `left`. Each placement can also be modified using any of the following\nvariations: `-start` or `-end`.",
-          "declarations": [
-            {
-              "name": "placement",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {
-            "default": "bottom"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "fallbackPlacements",
-          "required": false,
-          "type": {
-            "kind": "array",
-            "value": {
-              "kind": "symbol",
-              "name": "Placement",
-              "value": "Placement"
-            }
-          },
-          "description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
-          "declarations": [
-            {
-              "name": "fallbackPlacements",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "onPlacementChange",
-          "required": false,
-          "type": {
-            "kind": "function",
-            "parameters": [
-              {
-                "kind": "parameter",
-                "name": "placement",
-                "type": {
-                  "kind": "symbol",
-                  "name": "Placement",
-                  "value": "Placement"
-                },
-                "required": true,
-                "rest": false,
-                "description": "",
-                "declarations": [
-                  {
-                    "name": "placement",
-                    "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-                  }
-                ],
-                "tags": {}
-              }
-            ],
-            "members": [],
-            "returnType": {
-              "kind": "primitive",
-              "value": "void"
-            }
-          },
-          "description": "A callback function that will be called whenever PopperJS chooses a placement that is different\nfrom the provided `placement` preference. If a `placement` preference doesn't fit, PopperJS\nwill choose a new one and call this callback.",
-          "declarations": [
-            {
-              "name": "onPlacementChange",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "popperOptions",
-          "required": false,
-          "type": {
-            "kind": "symbol",
-            "name": "Partial",
-            "typeParameters": [
-              {
-                "kind": "external",
-                "name": "PopperOptions",
-                "url": "https://popper.js.org/docs/v2/constructors/#options"
-              }
-            ],
-            "value": "Partial<T>"
-          },
-          "description": "The additional options passed to the Popper's `popper.js` instance.",
-          "declarations": [
-            {
-              "name": "popperOptions",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "portal",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "If false, render the Popper within the\nDOM hierarchy of its parent. A non-portal Popper will constrained by the parent container\noverflows. If you set this to `false`, you may experience issues where you content gets cut off\nby scrollbars or `overflow: hidden`",
-          "declarations": [
-            {
-              "name": "portal",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {
-            "default": "true"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "popperInstanceRef",
-          "required": false,
-          "type": {
-            "kind": "external",
-            "name": "Ref",
-            "url": "https://reactjs.org/docs/refs-and-the-dom.html",
-            "typeParameters": [
-              {
-                "kind": "symbol",
-                "name": "Instance",
-                "value": "Instance"
-              }
-            ]
-          },
-          "description": "Reference to the PopperJS instance. Useful for making direct method calls on the popper\ninstance like `update`.",
-          "declarations": [
-            {
-              "name": "popperInstanceRef",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
-            }
-          ],
-          "tags": {}
-        }
-      ]
+      "kind": "alias",
+      "name": "TabsMenuPopper"
     }
   },
   {
@@ -418461,6 +418153,46 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     }
   },
+  {
+    "name": "maybeWrapCSSVariables",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
+    "description": "Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with\n`{padding: 'var(--foo)'}`. It also works on variables in the middle of the property. Takes any\nstring and returns a string with CSS variables wrapped if necessary.\n\n```ts\nmaybeWrapCSSVariables('1rem'); // 1rem\nmaybeWrapCSSVariables('--foo'); // var(--foo)\nmaybeWrapCSSVariables('var(--foo)'); // var(--foo)\nmaybeWrapCSSVariables('calc(--foo)'); // calc(var(--foo))\n```",
+    "declarations": [
+      {
+        "name": "maybeWrapCSSVariables",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "function",
+      "parameters": [
+        {
+          "kind": "parameter",
+          "name": "input",
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "required": true,
+          "rest": false,
+          "description": "",
+          "declarations": [
+            {
+              "name": "input",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
+            }
+          ],
+          "tags": {}
+        }
+      ],
+      "members": [],
+      "returnType": {
+        "kind": "primitive",
+        "value": "string"
+      }
+    }
+  },
   {
     "name": "wrapProperty",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "13.2.23",
-    "@workday/canvas-kit-preview-react": "13.2.23",
-    "@workday/canvas-kit-react": "13.2.23",
-    "@workday/canvas-kit-react-fonts": "^13.2.23",
-    "@workday/canvas-kit-styling": "13.2.23",
+    "@workday/canvas-kit-labs-react": "13.2.24",
+    "@workday/canvas-kit-preview-react": "13.2.24",
+    "@workday/canvas-kit-react": "13.2.24",
+    "@workday/canvas-kit-react-fonts": "^13.2.24",
+    "@workday/canvas-kit-styling": "13.2.24",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "13.2.23",
-    "@workday/canvas-kit-preview-react": "13.2.23",
-    "@workday/canvas-kit-react": "13.2.23",
-    "@workday/canvas-kit-react-fonts": "^13.2.23",
-    "@workday/canvas-kit-styling": "13.2.23",
+    "@workday/canvas-kit-labs-react": "13.2.24",
+    "@workday/canvas-kit-preview-react": "13.2.24",
+    "@workday/canvas-kit-react": "13.2.24",
+    "@workday/canvas-kit-react-fonts": "^13.2.24",
+    "@workday/canvas-kit-styling": "13.2.24",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -9,6 +9,7 @@ any questions.
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Theming](#theming)
+  - [Canvas Provider](#canvas-provider-)
 - [Component Updates](#component-updates)
   - [Avatar in Preview](#avatar-in-preview)
   - [Branding Changes](#branding-changes)
@@ -101,10 +102,64 @@ yarn remove @workday/canvas-kit-codemod
 
 ## Theming
 
-**PR:** [#3394](https://github.com/Workday/canvas-kit/pull/3394)
+### Canvas Provider 🚨
 
-- `CanvasThemePalette` has been updated to include a `lighter` color.
-- `CanvasTheme` has been updated to include a `lighter` color.
+**PRs:** [#3407](https://github.com/Workday/canvas-kit/pull/3407), [#3394](https://github.com/Workday/canvas-kit/pull/3394)
+
+- `CanvasThemePalette` and `CanvasTheme` type have been updated to include a `lighter` property.
+- `CanvasProvider` `theme` prop has been updated to include a `lighter` color for each palette.
+
+#### Breaking Changes
+
+Canvas Provider has been updated to **remove** default branding colors to ensure proper cascading of our CSS variables. Instead of generating a palette and shifting the brightness and darkness with `chroma.js`, we use `oklch` to generate the palette colors.
+
+**Before in v13**
+In v13, the `useTheme` hook would call `createCanvasTheme` which generated a palette given a `main` color via `chroma.js`.
+
+```tsx
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
+  <App/>
+</CanvasProvider>
+```
+
+**After in v14**
+We use `oklch` to generate the palette colors. The color shifting will be different. If you want more control over the colors, we suggest providing the full palette object.
+
+```tsx
+<CanvasProvider theme={
+	{canvas: {
+		palette: {
+			primary: {
+				lightest: base.blue25,
+				light: base.blue200,
+				main: base.blue600,
+				dark: base.blue700,
+				darkest: base.blue800,
+				contrast: base.neutral0,
+			},
+		},
+	}}}>
+  <App/>
+</CanvasProvider>
+```
+
+**Or**
+
+```tsx
+<CanvasProvider theme={{canvas: {palette: {primary: {main: cssVar(base.blue600)}}}}}>
+  <App/>
+</CanvasProvider>
+```
+
+> **Note:** The way `chroma.js` and `oklch` generate colors **is different**. While we work on a better algorithm to determine hue, chroma and lightness and color shifting that best represents an accessible palette, **you may see color discrepancies**. If you want to continue using the old way of generating a color palette with `chroma.js`, you can use `createCanvasTheme`.
+
+```tsx
+<CanvasProvider theme={{canvas: createCanvasTheme({palette: {primary: {main: cssVar(base.blue600)}}})}}>
+  <App/>
+</CanvasProvider>
+```
+
+The reason for this change is to ensure that the CSS variables properly cascade to all components. Before in v13, the `CanvasProvider` would add the brand tokens under a class name, creating a higher specificity.
 
 ## Component Updates
 

package/dist/mdx/preview-react/text-input/examples/ThemedError.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
-import {system} from '@workday/canvas-tokens-web';
+import {system, base} from '@workday/canvas-tokens-web';
 import {cssVar} from '@workday/canvas-kit-styling';
 
 export default () => {
@@ -15,11 +15,12 @@ export default () => {
     canvas: {
       palette: {
         error: {
-          lightest: cssVar(system.color.static.amber.softer),
+          lightest: cssVar(base.purple100),
+          main: cssVar(base.purple600),
         },
         common: {
           focusOutline: cssVar(system.color.static.green.default),
-          errorInner: cssVar(system.color.static.amber.stronger),
+          errorInner: cssVar(base.purple600),
         },
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1227-next.0",
+  "version": "14.0.0-alpha.1229-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1227-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1227-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1227-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1227-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1229-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1229-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1229-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1229-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "9d444fbcf8bd4529d421da61a649c99fa365f6f1"
+  "gitHead": "9058e7f2709a2212664672616bf6c8222f3e6eba"
 }