@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/mdx/tokens/TokenMigrationFinal.mdx

@@ -39,7 +39,7 @@ semantic meaning and theming support.
 #### Before (Old Tokens)
 
 ```javascript
-import {colors, space, borderRadius, type, depth} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 const cardStyles = createStyles({
@@ -71,25 +71,25 @@ import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const cardStyles = createStyles({
-  padding: system.space.x8,
-  backgroundColor: system.color.bg.default,
+  padding: system.padding.xxl,
+  backgroundColor: system.color.surface.default,
   border: `solid ${px2rem(1)}`,
-  borderColor: system.color.border.container,
-  borderRadius: system.shape.x1,
-  color: system.color.text.default,
+  borderColor: system.color.border.strong,
+  borderRadius: system.shape.sm,
+  color: system.color.fg.default,
   boxShadow: system.depth[1],
-  ...system.type.body.medium,
+  ...system.type.body.md,
 });
 
 const headerStyles = createStyles({
-  color: system.color.text.default,
-  marginBottom: system.space.x4,
-  ...system.type.heading.small,
+  color: system.color.fg.default,
+  marginBottom: system.gap.md,
+  ...system.type.heading.sm,
 });
 
 const errorTextStyles = createStyles({
-  color: system.color.text.critical.default,
-  ...system.type.subtext.large,
+  color: system.color.fg.danger.default,
+  ...system.type.subtext.lg,
 });
 ```
 
@@ -98,7 +98,8 @@ const errorTextStyles = createStyles({
 #### Before (Old Tokens)
 
 ```javascript
-import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
 
 const inputStyles = createStyles({
   padding: `${space.xs} ${space.s}`,
@@ -124,25 +125,26 @@ const inputStyles = createStyles({
 #### After (New Tokens - System Approach)
 
 ```javascript
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const inputStyles = createStyles({
-  padding: `${system.space.x3} ${system.space.x4}`,
-  backgroundColor: system.color.bg.default,
+  padding: `${system.padding.sm} ${system.padding.md}`,
+  backgroundColor: system.color.surface.default,
   borderColor: system.color.border.default,
-  borderRadius: system.shape.half,
-  color: system.color.text.default,
+  borderRadius: px2rem(2),
+  color: system.color.fg.default,
   '&:focus': {
-    borderColor: system.color.border.contrast,
-    backgroundColor: system.color.bg.default,
+    borderColor: system.color.border.primary.default,
+    backgroundColor: system.color.surface.default,
   },
   '&.error': {
     borderColor: system.color.border.critical.default,
-    backgroundColor: system.color.bg.critical.subtle,
+    backgroundColor: system.color.surface.critical.default,
   },
   '&:disabled': {
-    backgroundColor: system.color.bg.disabled,
-    color: system.color.text.disabled,
+    backgroundColor: system.color.surface.raised,
+    color: system.color.fg.disabled,
   },
 });
 ```
@@ -152,9 +154,11 @@ const inputStyles = createStyles({
 #### Before (Old Tokens)
 
 ```javascript
-import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {theme} from '@emotion/react';
 
+import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+
 const primaryButtonStyles = createStyles({
   padding: `${space.xs} ${space.m}`,
   backgroundColor: theme.canvas.palette.primary.main,
@@ -170,16 +174,17 @@ const primaryButtonStyles = createStyles({
 #### After (New Tokens - Brand + System)
 
 ```javascript
-import {system, brand} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
 
 const primaryButtonStyles = createStyles({
-  padding: `${system.space.x3} ${system.space.x6}`,
-  backgroundColor: brand.primary.base,
-  borderColor: brand.primary.base,
-  borderRadius: system.shape.x1,
-  color: brand.primary.accent,
+  padding: `${system.padding.sm} ${system.padding.xl}`,
+  backgroundColor: brand.primary600,
+  borderColor: brand.common.focus,
+  borderRadius: system.shape.sm,
+  color: system.color.fg.inverse,
   '&:hover': {
-    backgroundColor: brand.primary.dark,
+    backgroundColor: brand.primary800,
   },
 });
 ```

package/dist/mdx/tokens/TokenMigrationInstall.mdx

@@ -10,10 +10,10 @@ application.
 
 <StorybookInformationHighlight
   emphasis="high"
-  title="Canvas Tokens v3"
-  description="Check out the new v3 tokens package to explore the updated token structure and see how the new CSS variable tokens look in practice. Learn more about how tokens are organized, how to use them in your application, and the benefits of migrating to the new system."
-  link="https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs"
-  linkText="View the Docs"
+  title="Canvas Tokens v4"
+  description="Check out the new v4 tokens package to explore the updated token structure and see how the new CSS variable tokens look in practice. Learn more about how tokens are organized, how to use them in your application, and the benefits of migrating to the new system."
+  link="https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v4-overview--docs"
+  linkText="View v4 Upgrade Guide"
   isExternal
 />
 
@@ -37,6 +37,7 @@ Import the variables at the top level of your application:
 @import '@workday/canvas-tokens-web/css/base/_variables.css';
 @import '@workday/canvas-tokens-web/css/system/_variables.css';
 @import '@workday/canvas-tokens-web/css/brand/_variables.css';
+@import '@workday/canvas-tokens-web/css/component/_variables.css';
 ```
 
 **OR**
@@ -45,8 +46,9 @@ Import the variables at the top level of your application:
 
 ```javascript
 import '@workday/canvas-tokens-web/css/base/_variables.css';
-import '@workday/canvas-tokens-web/css/system/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/component/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
 ```
 
 ## Updating Your Styling Approach
@@ -69,7 +71,8 @@ If you're not already using `createStyles`, migrate from style props to the styl
 ```javascript
 // as style props (old)
 import {space, colors} from '@workday/canvas-kit-react/tokens';
-<Component padding={space.s} color={colors.blackPeppers400}>
+
+<Component padding={space.s} color={colors.blackPepper400}>
 ```
 
 **Within Canvas styling functions**
@@ -83,7 +86,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 //
 const styles = createStyles({
-  padding: system.space.x4, // not required in most cases
+  padding: system.padding.md, // not required in most cases
   color: cssVar(system.color.fg.default, '#000') // used to provide fallback
 })
 
@@ -101,7 +104,7 @@ import {cssVar} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 <Component style={{
-  padding: cssVar(system.space.x4),
+  padding: cssVar(system.padding.md),
   color: cssVar(system.color.fg.default)
 }}>
 ```
@@ -120,11 +123,11 @@ import {calc} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = {
-  // returns 'calc(var(--cnvs-sys-space-x1) + 0.125rem)'
-  padding: calc.add(system.space.x1, '0.125rem'),
-  // returns 'calc(var(--cnvs-sys-space-x1) - 0.125rem)'
-  margin: calc.subtract(system.space.x1, '0.125rem'),
-  // returns 'calc(var(--cnvs-sys-space-x4) * 3)'
-  maxWidth: calc.multiply(system.space.x4, 3),
+  // returns 'calc(var(--cnvs-sys-padding-xxs) + 0.125rem)'
+  padding: calc.add(system.padding.xxs, '0.125rem'),
+  // returns 'calc(var(--cnvs-sys-gap-sm) - 0.125rem)'
+  margin: calc.subtract(system.gap.sm, '0.125rem'),
+  // returns 'calc(var(--cnvs-sys-size-xxxs) * 3)'
+  maxWidth: calc.multiply(system.size.xxxs, 3),
 };
 ```