@workday/canvas-kit-docs 9.0.0-alpha.362-next.2 → 9.0.0-alpha.364-next.3

package/dist/es6/lib/docs.js

@@ -208738,7 +208738,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208775,7 +208775,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208812,7 +208812,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208849,7 +208849,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208886,7 +208886,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208923,7 +208923,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -208998,7 +208998,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209020,7 +209020,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209042,7 +209042,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209064,7 +209064,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209086,7 +209086,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [
@@ -209108,7 +209108,7 @@ export var docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "type": {
                   "kind": "string",
-                  "value": "0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)"
+                  "value": "0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)"
                 },
                 "description": "",
                 "declarations": [

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

@@ -14,6 +14,8 @@ any questions.
 	- [Toast](#toast)
 - [Utility Updates](#utility-updates)
   - [focusRing](#focusring)
+- [Token Updates](#token-updates)
+	- [Depth](#depth)
 
 ## Codemod
 
@@ -165,4 +167,14 @@ the correct props.
 
 We're removing memoization from focus ring. The `memoize` argument passed to `focusRing` is no
 longer valid and we've removed the exported `memoizedFocusRing`. There is no codemod for this
-change. We couldn't find any example of `memoize` or `memoizedFocusRing` being used.
+change. We couldn't find any example of `memoize` or `memoizedFocusRing` being used.
+
+## Token Updates
+
+### Depth
+
+In v7, we released an update to our depth tokens that was too bold and harsh for web applications.
+We've modified the depth token styles to be more subtle and improve visual design. This change
+affects all components which use depth tokens including `Card`, `Toast`, `Dialog`, `Popup`, `Modal`,
+and `Menu`. We have not changed which depth values each component references (i.e., `Card` remains
+at `depth[1]`).

package/dist/mdx/react/tokens/examples/Tokens.tsx

@@ -1,29 +1,48 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import {pickForegroundColor, StyledType} from '@workday/canvas-kit-react/common';
+import {pickForegroundColor} from '@workday/canvas-kit-react/common';
 
 import {colors, type, depth, space, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {Text} from '@workday/canvas-kit-react/text';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
-const StyledCard = styled(Box)<StyledType>({
-  width: 200,
-  height: 200,
-  margin: 20,
-  borderRadius: 4,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
+const DepthCard = ({depth, children}) => {
+  return (
+    <Flex
+      depth={depth}
+      width={200}
+      height={200}
+      borderRadius="s"
+      alignItems="center"
+      justifyContent="center"
+      backgroundColor="frenchVanilla100"
+    >
+      {children}
+    </Flex>
+  );
+};
 
 export default () => (
-  <Flex>
-    <StyledCard depth="none">Depth None</StyledCard>
-    <StyledCard depth={1}>Depth 1</StyledCard>
-    <StyledCard depth={2}>Depth 2</StyledCard>
-    <StyledCard depth={3}>Depth 3</StyledCard>
-    <StyledCard depth={4}>Depth 4</StyledCard>
-    <StyledCard depth={5}>Depth 5</StyledCard>
-    <StyledCard depth={6}>Depth 6</StyledCard>
+  <Flex gap="m" flexDirection="column">
+    <Flex gap="m" flexWrap="wrap">
+      <DepthCard depth="none">Depth None</DepthCard>
+      <DepthCard depth={1}>Depth 1</DepthCard>
+      <DepthCard depth={2}>Depth 2</DepthCard>
+      <DepthCard depth={3}>Depth 3</DepthCard>
+      <DepthCard depth={4}>Depth 4</DepthCard>
+      <DepthCard depth={5}>Depth 5</DepthCard>
+      <DepthCard depth={6}>Depth 6</DepthCard>
+    </Flex>
+    <Text>Depth on a colored background</Text>
+    <Flex backgroundColor="soap400" gap="m" padding="m" flexWrap="wrap">
+      <DepthCard depth="none">Depth None</DepthCard>
+      <DepthCard depth={1}>Depth 1</DepthCard>
+      <DepthCard depth={2}>Depth 2</DepthCard>
+      <DepthCard depth={3}>Depth 3</DepthCard>
+      <DepthCard depth={4}>Depth 4</DepthCard>
+      <DepthCard depth={5}>Depth 5</DepthCard>
+      <DepthCard depth={6}>Depth 6</DepthCard>
+    </Flex>
   </Flex>
 );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.0-alpha.362-next.2+ea2fe722",
+  "version": "9.0.0-alpha.364-next.3+338b6108",
   "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": "^9.0.0-alpha.362-next.2+ea2fe722",
-    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.362-next.2+ea2fe722",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.362-next.2+ea2fe722",
+    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.364-next.3+338b6108",
+    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.364-next.3+338b6108",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.364-next.3+338b6108",
     "@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": "ea2fe722d1176835120f765c4b9b88dcd5234fe5"
+  "gitHead": "338b6108ddc7d5cf29960927389f7cd85e198e86"
 }