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

package/dist/mdx/style-props/stylePropsMigrationOverview.mdx

@@ -1,5 +1,5 @@
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-import {StorybookStatusIndicator, DownloadLLMFile} from '@workday/canvas-kit-docs';
+import {DownloadLLMFile, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 
 
 # Style Props Deprecation Overview
@@ -48,7 +48,7 @@ assist with your migration process.
   migration
 
 <DownloadLLMFile
-  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-style-props-migration.txt"
+  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm/llm-style-props-migration.txt"
   filename="llm-style-props-migration.txt"
 />
 
@@ -100,8 +100,8 @@ will trigger component re-render.
 ```tsx
 // `createStyles` returns a string of className
 const buttonStyles = createStyles({
-  backgroundColor: system.color.bg.primary.default,
-  color: system.color.text.inverse,
+  backgroundColor: system.color.brand.accent.primary,
+  color: system.color.fg.inverse,
 });
 
 export const MyButton = () => <button className={buttonStyles}>Click me</button>;
@@ -135,8 +135,8 @@ import {BaseButton} from '@workday/canvas-kit-react/button';
 import {createStyles} from '@workday/canvas-kit-styling';
 // `createStyles` returns a string of className
 const buttonStyles = createStyles({
-  backgroundColor: system.color.bg.primary.default,
-  color: system.color.text.inverse,
+  backgroundColor: system.color.brand.accent.primary,
+  color: system.color.fg.inverse,
 });
 
 export const MyButton = () => <BaseButton cs={buttonStyles}>Click me</button>;
@@ -158,13 +158,13 @@ Examples:
 const buttonStencil = createStencil({
   vars: {color: '', background: ''},
   base: ({color, backgroundColor}) => ({
-    color: cssVar(color, system.color.text.default),
+    color: cssVar(color, system.color.fg.default),
     backgroundColor: cssVar(backgroundColor, system.color.bg.default),
   }),
   modifiers: {
     variant: {
-      primary: {background: system.color.bg.primary.default},
-      secondary: {background: system.color.bg.muted.default},
+      primary: {background: system.color.brand.accent.primary},
+      secondary: {background: system.color.accent.muted.default},
     },
   },
 });
@@ -177,7 +177,7 @@ const buttonStencil = createStencil({
 const customButtonStencil = createStencil({
   base: {
     // Set the color variable to the primary color
-    [buttonStencil.vars.color]: system.color.fg.primary.default,
+    [buttonStencil.vars.color]: system.color.brand.fg.primary.default,
   },
 });
 ```
@@ -237,7 +237,7 @@ from scratch.
 const customIconStencil = createStencil({
   extends: systemIconStencil,
   base: {
-    margin: system.space.x2,
+    margin: system.gap.sm,
   },
 });
 ```
@@ -255,8 +255,8 @@ logic.
 const badgeStencil = createStencil({
   modifiers: {
     status: {
-      success: {background: system.color.bg.success.default},
-      error: {background: system.color.bg.negative.default},
+      success: {background: system.color.accent.success},
+      error: {background: system.color.brand.accent.critical},
     },
   },
 });
@@ -289,7 +289,7 @@ const myCustomStencil = createStencil({
     {
       // apply styles when the variant is primary AND the size is large
       modifiers: {variant: 'primary', size: 'large'},
-      styles: {paddingInline: system.space.x5},
+      styles: {paddingInline: system.padding.xl},
     },
   ],
 });
@@ -328,8 +328,8 @@ more information.
 ✅ **Do**
 
 ```tsx
-color: system.color.text.default;
-margin: system.space.x2;
+color: system.color.fg.default;
+margin: system.gap.md;
 ```
 
 ❌ **Don’t**
@@ -411,13 +411,13 @@ const StyledButton = styled('button')({
 #### After (Canvas Kit Styling)
 
 ```tsx
-import {createStyles} from '@workday/canvas-kit-styling';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const primaryButtonStyles = createStyles({
-  backgroundColor: system.color.bg.primary.default,
-  color: system.color.text.inverse,
+  backgroundColor: system.color.brand.accent.primary,
+  color: system.color.fg.inverse,
 });
 
 <PrimaryButton cs={primaryButtonStyles}>Click me</PrimaryButton>;

package/dist/mdx/styling/mdx/CreateStyles.mdx

@@ -1,6 +1,6 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-import {system} from '@workday/canvas-tokens-web'
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
+import {system} from '@workday/canvas-tokens-web';
 
 import CreateStyles from './examples/CreateStyles';
 
@@ -23,38 +23,40 @@ The CSS will look like this:
 
 ```css
 .css-m39zwu {
-  background: var(--cnvs-sys-color-bg-primary-default);
-  color: var(--cnvs-sys-color-text-inverse);
+  background: var(--cnvs-sys-color-bg-default);
+  color: var(--cnvs-sys-color-fg-inverse);
 }
 ```
-<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4,}}>
-	<InformationHighlight.Icon />
-	<InformationHighlight.Heading> Note</InformationHighlight.Heading>
-	<InformationHighlight.Body>
-		The `createStyles` function handles wrapping our Tokens in `var(--tokenName)`.
-	</InformationHighlight.Body>
+
+<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.gap.md}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading> Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    The `createStyles` function handles wrapping our Tokens in `var(--tokenName)`.
+  </InformationHighlight.Body>
 </InformationHighlight>
 
 We're using `className` for simplicity here.
 
 <ExampleCodeBlock code={CreateStyles} />
 
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{marginBlock: system.space.x4,}}>
-	<InformationHighlight.Icon />
-	<InformationHighlight.Heading> Caution: Performance Hit</InformationHighlight.Heading>
-	<InformationHighlight.Body>
-		Do not inline the call to `createStyles` in the render function of a component. This will cause performance issues as a new style is inserted into the browser on every render.
-	</InformationHighlight.Body>
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{marginBlock: system.gap.md}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading> Caution: Performance Hit</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    Do not inline the call to `createStyles` in the render function of a component. This will cause
+    performance issues as a new style is inserted into the browser on every render.
+  </InformationHighlight.Body>
 </InformationHighlight>
 
 ```tsx
 // Bad example (inside render function)
-import {system} from '@workday/canvas-tokens-webs';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {base} from '@workday/canvas-tokens-webs';
 
 function MyComponent() {
-  const styles = createStyles({color: system.color.static.red.default}); // Don't do this
-  return <PrimaryButton className={createStyles({color: system.color.static.red.default})}>Text</PrimaryButton>;
+  const styles = createStyles({color: base.red600}); // Don't do this
+  return <PrimaryButton className={createStyles({color: base.red600})}>Text</PrimaryButton>;
 }
 ```
 
@@ -73,35 +75,34 @@ that have complex styles and dynamic properties.
 
 ```tsx
 // Bad example (inside render function)
-import {system} from '@workday/canvas-tokens-webs';
+import {base} from '@workday/canvas-tokens-webs';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 
 function MyComponent() {
-  const styles = createStyles({color: system.color.static.red.default}); // Don't do this
+  const styles = createStyles({color: base.red600}); // Don't do this
   return <PrimaryButton cs={styles}>Text</PrimaryButton>;
 }
 
 // Good example (outside render function)
-import {system} from '@workday/canvas-tokens-webs';
+import {base} from '@workday/canvas-tokens-webs';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 
-const styles = createStyles({color: system.color.static.red.default});
+const styles = createStyles({color: base.red600});
 
 function MyComponent() {
   return <PrimaryButton cs={styles}>Text</PrimaryButton>;
 }
 ```
 
-<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4,}}>
-	<InformationHighlight.Icon />
-	<InformationHighlight.Heading>Note</InformationHighlight.Heading>
-	<InformationHighlight.Body>
-		Most of our components support using the `cs` prop to apply the static styles. It merges everything together and applies `className` and `style` attributes to a React element
-	</InformationHighlight.Body>
+<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.gap.md}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    Most of our components support using the `cs` prop to apply the static styles. It merges
+    everything together and applies `className` and `style` attributes to a React element
+  </InformationHighlight.Body>
 </InformationHighlight>
 
-
-
 ## Performance Benefits
 
 `createStyles` is performant because:

package/dist/mdx/styling/mdx/CustomizingStyles.mdx

@@ -22,7 +22,7 @@ import {Text} from '@Workday/canvas-kit-react/text';
 
 const uppercaseTextStyles = createStyles({
   textTransform: 'uppercase',
-  margin: system.space.x4
+  margin: system.gap.md
 })
 //...
 <Text cs={uppercaseTextStyles}>My uppercased text</Text>;
@@ -39,7 +39,7 @@ import {Text} from '@Workday/canvas-kit-react/text';
 
 const uppercaseTextStyles = createStyles({
   textTransform: 'uppercase',
-  margin: system.space.x4
+  margin: system.gap.md
 })
 //...
 <Text className={uppercaseTextStyles}>My uppercased text</Text>;
@@ -111,9 +111,9 @@ const NavIcon = ({iconColor, iconHover, iconBackground, iconBackgroundHover, ico
 
 ```tsx
 // v11
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 
 const navIconStencil = createStencil({
   // We extend `systemIconStencil` to inherit it's base styles, modifiers and variables so that we can customize it
@@ -129,7 +129,7 @@ const navIconStencil = createStencil({
     display: 'inline-flex',
     pointerEvents: 'unset',
     // instead of using our old tokens it's better to use our new system tokens
-    margin: `${system.space.x1} ${system.space.x1} 0 0`,
+    margin: `${system.gap.xs} ${system.gap.xs} 0 0`,
     padding: '0',
     '&:hover, &.hover': {
       // systemIconStencil doesn't have hover specific variables

package/dist/mdx/styling/mdx/MergingStyles.mdx

@@ -1,6 +1,7 @@
-import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {system} from '@workday/canvas-tokens-web';
+
 import StylingOverrides from './examples/StylingOverrides';
 
 
@@ -60,8 +61,9 @@ cause style class merging. For example:
 
 ```tsx
 import styled from '@emotion/styled';
-import {createStyles} from '@workday/canvas-kit-styling';
+
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
 
 const styles1 = createStyles({
   padding: 4,
@@ -149,7 +151,7 @@ by making all styles have the same specificity of `0-1-0` and inserting `base` s
 in `base`, a `modifier`, and a `compound` modifier, the `compound` modifier would win because it is
 the last defined. This should be the expected order.
 
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{marginBlock: system.space.x4}}>
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{marginBlock: system.gap.md}}>
   <InformationHighlight.Icon />
   <InformationHighlight.Heading>Caution</InformationHighlight.Heading>
   <InformationHighlight.Body>

package/dist/mdx/styling/mdx/Overview.mdx

@@ -1,5 +1,5 @@
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {system} from '@workday/canvas-tokens-web';
 
 
@@ -282,10 +282,10 @@ components extend the `cs` prop so that you can statically apply styles to them.
 > babel plugin to extract these styles statically in a future version.
 
 ```tsx
-import {system} from '@workday/canvas-tokens-webs';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {base} from '@workday/canvas-tokens-webs';
 
-const styles = createStyles({color: system.color.static.red.default});
+const styles = createStyles({color: base.red600});
 
 function MyComponent() {
   return <PrimaryButton cs={styles}>Text</PrimaryButton>;
@@ -300,19 +300,19 @@ hashing, caching, and style injection.
 
 ```tsx
 // Bad example (inside render function)
-import {system} from '@workday/canvas-tokens-webs';
+import {base} from '@workday/canvas-tokens-webs';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 
 function MyComponent() {
-  const styles = createStyles({color: system.color.static.red.default}); // Don't do this
+  const styles = createStyles({color: base.red600}); // Don't do this
   return <PrimaryButton cs={styles}>Text</PrimaryButton>;
 }
 
 // Good example (outside render function)
-import {system} from '@workday/canvas-tokens-webs';
+import {base} from '@workday/canvas-tokens-webs';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 
-const styles = createStyles({color: system.color.static.red.default});
+const styles = createStyles({color: base.red600});
 
 function MyComponent() {
   return <PrimaryButton cs={styles}>Text</PrimaryButton>;
@@ -322,7 +322,7 @@ function MyComponent() {
 Most of our components support using the `cs` prop to apply the static styles. It merges everything
 together and applies `className` and `style` attributes to a React element.
 
-<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4}}>
+<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.gap.md}}>
   <InformationHighlight.Icon />
   <InformationHighlight.Heading>Information</InformationHighlight.Heading>
   <InformationHighlight.Body>
@@ -344,7 +344,7 @@ In the example below, we leverage `parts`, `vars`, `base` and `modifiers` to cre
 ```tsx
 import {createStencil}from '@workday/canvas-kit-styling';
 import {Card} from '@workday/canvas-kit-react/card';
-import {system} from '@workday/canvas-tokens-webs';
+import {system} from '@workday/canvas-tokens-web';
 
 const themedCardStencil = createStencil({
   vars: {
@@ -356,10 +356,10 @@ const themedCardStencil = createStencil({
     header: 'themed-card-header'
   },
   base: ({headerPart, headerColor}) => ({
-    padding: system.space.x4,
+    padding: system.padding.md,
     boxShadow: system.depth[2],
     backgroundColor: system.color.bg.default,
-    color: system.color.text.default,
+    color: system.color.fg.default,
     // Targets the header part via [data-part="themed-card-header"]"]
     [headerPart]: {
       color: headerColor
@@ -369,10 +369,10 @@ const themedCardStencil = createStencil({
     isDarkTheme: {
     // If the prop `isDarkTheme` is true, style the component and it's parts
       true: ({headerPart}) => ({
-        backgroundColor: system.color.bg.contrast.default,
-        color: system.color.text.inverse
+        backgroundColor: system.color.surface.contrast.default,
+        color: system.color.fg.inverse
         [headerPart]: {
-          color: system.color.text.inverse
+          color: system.color.fg.inverse
         }
       })
     }
@@ -394,7 +394,7 @@ const ThemedCard = ({isDarkTheme, headerColor, elemProps}) => {
 };
 ```
 
-<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4}}>
+<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.gap.md}}>
   <InformationHighlight.Icon />
   <InformationHighlight.Heading>Information</InformationHighlight.Heading>
   <InformationHighlight.Body>

package/dist/mdx/styling/mdx/Stencils.mdx

@@ -1,6 +1,6 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-import {system} from '@workday/canvas-tokens-web'
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
+import {system} from '@workday/canvas-tokens-web';
 
 import CreateStencil from './examples/CreateStencil';
 
@@ -22,15 +22,17 @@ We created Stencils as the reusable primitive of components. Stencils provide:
 - `compound`: compound modifiers - styles that match multiple modifiers
 
 ## Basic Example
-In the example below, Stencils allow you to dynamically style elements or components based on properties.
+
+In the example below, Stencils allow you to dynamically style elements or components based on
+properties.
 
 <ExampleCodeBlock code={CreateStencil} />
 
 ## When to Use `createStencil`
+
 - When you're styling parts of a component that rely on dynamic properties.
 - When you want to create a reusable component with dynamic styles.
 
-
 Use a Stencil when building reusable components that have dynamic styles and properties.
 
 ## Concepts
@@ -99,16 +101,16 @@ element.style {
 Variables are automatically added to the config of a Stencil. They share the same namespace as
 modifiers, so **do not have a modifier with the same name as a variable**.
 
-<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4,}}>
-	<InformationHighlight.Icon />
-	<InformationHighlight.Heading>Note</InformationHighlight.Heading>
-	<InformationHighlight.Body>
-		Variables should be used sparingly. Style properties can be easily overridden without
-variables. Variables are useful if you want to expose changing properties regardless of selectors.
-For example, Buttons use variables for colors of all states (hover, active, focus, disabled, and
-nested icons). Without variables, overriding the focus color would require deeply nested selector
-overrides.
-	</InformationHighlight.Body>
+<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.gap.md}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    Variables should be used sparingly. Style properties can be easily overridden without variables.
+    Variables are useful if you want to expose changing properties regardless of selectors. For
+    example, Buttons use variables for colors of all states (hover, active, focus, disabled, and
+    nested icons). Without variables, overriding the focus color would require deeply nested
+    selector overrides.
+  </InformationHighlight.Body>
 </InformationHighlight>
 
 #### Cascading Variables
@@ -122,13 +124,13 @@ where a component expects a parent component to set a CSS variable and that it s
 component. An example of this is the relationship between `SystemIcon` and `Button`. The `Button`
 components set the `SystemIcon` variables and they should cascade into the `SystemIcon` component.
 
-<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4,}}>
-	<InformationHighlight.Icon />
-	<InformationHighlight.Heading>Note</InformationHighlight.Heading>
-	<InformationHighlight.Body>
-		Non-cascade variables _could_ be initialized. If you use uninitialized variables, be sure
-to use a fallback in your styles.
-	</InformationHighlight.Body>
+<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.gap.md}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    Non-cascade variables _could_ be initialized. If you use uninitialized variables, be sure to use
+    a fallback in your styles.
+  </InformationHighlight.Body>
 </InformationHighlight>
 
 ```tsx
@@ -447,13 +449,13 @@ API. Consumers can also use the type safe Stencil to target that element to styl
 general rule, a Stencil maps to a component. Multiple Stencils per component usually means nested
 elements that are not targets for style overrides.
 
-<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.space.x4,}}>
-	<InformationHighlight.Icon />
-	<InformationHighlight.Heading>Note</InformationHighlight.Heading>
-	<InformationHighlight.Body>
-		While component parts are a way to give access to elements in order to style, they
- should be used sparingly. Using component parts increases CSS specificity. A component part should
- not be used on a nested component that has its own Stencil. The result will be any style
- properties defined with a component part will have a higher specificity than other styles.
-	</InformationHighlight.Body>
+<InformationHighlight className="sb-unstyled" cs={{marginBlock: system.gap.md}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    While component parts are a way to give access to elements in order to style, they should be
+    used sparingly. Using component parts increases CSS specificity. A component part should not be
+    used on a nested component that has its own Stencil. The result will be any style properties
+    defined with a component part will have a higher specificity than other styles.
+  </InformationHighlight.Body>
 </InformationHighlight>