@workday/canvas-kit-docs 13.0.0-alpha.1016-next.0 → 13.0.0-alpha.1024-next.0

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

@@ -19,6 +19,7 @@ any questions.
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
   - [External Hyperlink](#external-hyperlink)
+  - [Tabs](#tabs)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -90,7 +91,7 @@ yarn remove @workday/canvas-kit-codemod
 
 ### Styling API and CSS Tokens
 
-**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114)
+**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3119](https://github.com/Workday/canvas-kit/pull/3119), [#3120](https://github.com/Workday/canvas-kit/pull/3120)
 
 Several components have been refactored to use our
 [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
@@ -104,8 +105,10 @@ The React interface **has not changed**, but CSS variables are now used for dyna
 The following components are affected:
 
 - `ExternalHyperlink`
+- `LoadingSparkles`
 - `Menu`
 - `Skeleton`
+- `Tabs`
 
 ## External Hyperlink
 
@@ -125,6 +128,13 @@ The following components are affected:
 </ExternalHyperlink>
 ```
 
+## Tabs
+
+**PR:** [#3119](https://github.com/Workday/canvas-kit/pull/3119)
+
+- The `disabled` icon color has been updated to use `system.color.fg.disabled`. This has made the icon darker for better contrast. 
+
+**Note:** There should be no developer impact and the visual changes are safe to accept.
 
 ## Troubleshooting
 

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": "13.0.0-alpha.1016-next.0",
+  "version": "13.0.0-alpha.1024-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": "^13.0.0-alpha.1016-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1016-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.1016-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.1016-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1024-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1024-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.1024-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.1024-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": "adaf9ca63978245025920184f65b0019ee8e952d"
+  "gitHead": "698ba5a6dcaf31c0a081fa13ec319480d4061319"
 }