@workday/canvas-kit-docs 12.4.0-1015-next.0 → 12.4.0-1019-next.0

package/dist/es6/lib/docs.js

@@ -138158,7 +138158,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/hideMouseFocus.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "`hideMouseFocus` is deprecated and will be removed in a future major version. Please use [`focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) when applying focus styles to elements."
+    },
     "type": {
       "kind": "symbol",
       "name": "CSSProperties",
@@ -138168,14 +138170,16 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "mouseFocusBehavior",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/hideMouseFocus.ts",
-    "description": "",
+    "description": "A utility that simplifies focus selectors since you can't use nested syntax for some reason. Example:\n[`[data-whatinput=\"mouse\"],\n  [data-whatinput=\"touch\"],\n  [data-whatinput=\"pointer\"]: {\n    '& .my-selector': {\n       ...\n    }\n},",
     "declarations": [
       {
         "name": "mouseFocusBehavior",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/hideMouseFocus.ts"
       }
     ],
-    "tags": {},
+    "tags": {
+      "deprecated": "`mouseFocusBehavior` is deprecated and will be removed in a future major version. Please use [`focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) when applying focus styles to elements."
+    },
     "type": {
       "kind": "function",
       "parameters": [
@@ -139368,24 +139372,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                   }
                 ],
                 "tags": {}
-              },
-              {
-                "kind": "property",
-                "name": "action",
-                "required": true,
-                "type": {
-                  "kind": "symbol",
-                  "name": "CanvasThemePalette",
-                  "value": "CanvasThemePalette"
-                },
-                "description": "",
-                "declarations": [
-                  {
-                    "name": "action",
-                    "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
-                  }
-                ],
-                "tags": {}
               }
             ]
           },

package/dist/mdx/react/button/button/Button.mdx

@@ -94,7 +94,11 @@ or view the example below.
 
 ### Theme Overrides
 
-The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
+The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`. 
+
+> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level.
+
+> **Note:** You should **not** individually theme components wrapping them with the `CanvasProvider`, but rather theme at the root level of the application.
 
 <ExampleCodeBlock code={ThemeOverrides} />
 

package/dist/mdx/react/button/button/examples/ThemeOverrides.tsx

@@ -8,7 +8,7 @@ import {
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
 import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {brand, system} from '@workday/canvas-tokens-web';
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Heading} from '@workday/canvas-kit-react/text';
 
@@ -17,17 +17,24 @@ const parentContainerStyles = createStyles({
   padding: system.space.x4,
 });
 
+const customActionTheme = createStyles({
+  [brand.action.base]: 'teal',
+  [brand.action.accent]: 'white',
+  [brand.action.dark]: 'hsla(180, 100%, 20%)',
+  [brand.action.darkest]: 'hsla(180, 100%, 16%)',
+});
+
 export default () => (
   <div>
     <Heading size="medium" as="h3">
-      Override Primary Color
+      Override Primary Color Via Canvas Provider
     </Heading>
     <CanvasProvider
       theme={{
         canvas: {
           palette: {
-            action: {
-              main: 'teal',
+            primary: {
+              main: 'navy',
             },
           },
         },
@@ -45,19 +52,9 @@ export default () => (
       </Flex>
     </CanvasProvider>
     <Heading size="medium" as="h3">
-      Override Action Color
+      Override Action Color Via CSS Action Token
     </Heading>
-    <CanvasProvider
-      theme={{
-        canvas: {
-          palette: {
-            primary: {
-              main: 'navy',
-            },
-          },
-        },
-      }}
-    >
+    <div className={customActionTheme}>
       <Flex cs={parentContainerStyles}>
         <PrimaryButton>Primary</PrimaryButton>
         <PrimaryButton icon={plusIcon} iconPosition="start">
@@ -68,6 +65,6 @@ export default () => (
         </PrimaryButton>
         <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
       </Flex>
-    </CanvasProvider>
+    </div>
   </div>
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.4.0-1015-next.0",
+  "version": "12.4.0-1019-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,12 +44,12 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.4.0-1015-next.0",
-    "@workday/canvas-kit-preview-react": "^12.4.0-1015-next.0",
-    "@workday/canvas-kit-react": "^12.4.0-1015-next.0",
-    "@workday/canvas-kit-styling": "^12.4.0-1015-next.0",
+    "@workday/canvas-kit-labs-react": "^12.4.0-1019-next.0",
+    "@workday/canvas-kit-preview-react": "^12.4.0-1019-next.0",
+    "@workday/canvas-kit-react": "^12.4.0-1019-next.0",
+    "@workday/canvas-kit-styling": "^12.4.0-1019-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.1.0",
+    "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "d2351f7f9b4ef85afeaaf40ce7100fefb9f2d27b"
+  "gitHead": "76614cb77b6d16bd953592bc7d288a2a71c8f732"
 }