fix: Add change notes to visual diff

modules/docs/llm/upgrade-guides/14.0-VISUAL-CHANGES.md

@@ -0,0 +1,114 @@
+# Canvas Kit 14.0 and Tokens v3.0 Visual Changes
+
+This guide contains an overview of the changes in Canvas Kit v14. If you have any issues, feel free
+to report them [here](https://github.com/Workday/canvas-kit/issues). For a mode detailed overview of
+the changes in v14, please view our
+[v14 Upgrade Guide](/help/upgrade-guides/canvas-v14-upgrade-guide/).
+
+> **Note:** The visual changes highlight v14 changes + the use of v3 tokens.
+
+![Avatar](images/v14-avatar.png)
+
+- Avatar in Preview has background colors of: 'blue' | 'amber' | 'teal' | 'purple' (default is
+  'blue')
+- Avatar sizes include: 'extraExtraSmall' | 'extraSmall' | 'small' | 'medium' | 'large' |
+  'extraLarge' | 'extraExtraLarge'
+- This change is both component and token level change.
+
+![Breadcrumbs](images/v14-breadcrumbs.png)
+
+- Breadcrumbs no longer have an underline. This change was made to align with the new brand
+  direction and to highlight that stand alone links should not have an underline.
+- This change is a component level change and not a token change.
+
+![Primary Button](images/v14-primary-button.png)
+
+- Primary Button background color is 'blue' (default)
+- Primary Button inverse variant changed from white to a shade of blue (blue25).
+- This is only a token level change.
+
+![Secondary Button](images/v14-secondary-button.png)
+
+- Secondary Buttons changed from back on hover to a shade of neutral.
+- Secondary Button inverse variant focus: the background changed from white to translucent.
+- Secondary Button inverse variant hover: the background changes from gray to transparent.
+- This a token level change.
+
+![Tertiary Button](images/v14-tertiary-button.png)
+
+- The border radius on Tertiary Buttons is now rounded.
+- The underline has been removed on the default state. Hoever and active still show the underline.
+- This is a component level change.
+
+![Card](images/v14-card.png)
+
+- Cards removed the default box shadow.
+- We also added a borderless and filled variant.
+- This a component level change.
+
+![Checkbox](images/v14-checkbox.png)
+
+- Error and Alert states now have either a light red or light amber background.
+- This is a component and token level change.
+
+![Radio](images/v14-radio.png)
+
+- Error and Alert states now have either a light red or light amber background.
+- This is a component and token level change.
+
+![Select](images/v14-select.png)
+
+- Error and Alert states now have either a light red or light amber background.
+- The border radius on inputs is now 6px vs 4px in v13..
+- This is a component and token level change.
+
+![Text Area](images/v14-text-area.png)
+
+- Error and Alert states now have either a light red or light amber background.
+- The border radius on inputs is now 6px vs 4px in v13..
+- This is a component and token level change.
+
+![Text Input](images/v14-text-input.png)
+
+- Error and Alert states now have either a light red or light amber background.
+- The border radius on inputs is now 6px vs 4px in v13..
+- This is a component and token level change.
+
+![Count Badge](images/v14-count-badge.png)
+
+- A low emphasis was added for default and inverse variants.
+- This is a component level change.
+
+![Expandable](images/v14-expandable.png)
+
+- Hover state changed to a shade lighter of gray.
+- This was a component and token level change.
+
+![Info Highlight](images/v14-info-highlight.png)
+
+- Some colors shifted to match the new brand direction.
+- This is a token level change.
+
+![Loading Dots](images/v14-loading-dots.png)
+
+- The default color changed to a darker shade of gray for better contrast.
+- The inverse variant also changed to a lighter shade for better contrast.
+- This is a token level change.
+
+![Pill](images/v14-pill.png)
+
+- The component now uses the Avatar from the Preview package.
+- Some colors shifted to match the new brand direction.
+- This is a components and token level change.
+
+![Status Indicator](images/v14-status-indicator-preview.png)
+
+- Status Indicator now uses rounded corners.
+- A new variant was added: 'AI'.
+- Some colors shifted to match the new brand direction, most notably the `caution` variant.
+- New semantic variants where added.
+
+![Tabs](images/v14-tabs.png)
+
+- Some colors shifted to match the new brand direction.
+- This is a token level change.

modules/docs/mdx/14.0-VISUAL-CHANGES.mdx

@@ -22,28 +22,102 @@ import textInputImage from './images/v14-text-input.png';
 
 <Meta title="Guides/Upgrade Guides/v14.0/Visual Changes" />
 
-# Canvas Kit 14.0 Visual Changes
+# Canvas Kit 14.0 and Tokens v3.0 Visual Changes
 
 This guide contains an overview of the changes in Canvas Kit v14. If you have any issues, feel free
 to report them [here](https://github.com/Workday/canvas-kit/issues). For a mode detailed overview of
 the changes in v14, please view our
 [v14 Upgrade Guide](/help/upgrade-guides/canvas-v14-upgrade-guide/).
 
+>**Note:** The visual changes highlight v14 changes + the use of v3 tokens.
+
 <Graphic src={{url: avatarImage}} />
+
+- Avatar in Preview has background colors of: 'blue' | 'amber' | 'teal' | 'purple' (default is 'blue')
+- Avatar sizes include: 'extraExtraSmall' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge'
+- This change is both component and token level change.
+
+
 <Graphic src={{url: breadcrumbsImage}} />
+
+- Breadcrumbs no longer have an underline. This change was made to align with the new brand direction and to highlight that stand alone links should not have an underline.
+- This change is a component level change and not a token change.
+
 <Graphic src={{url: primaryButtonImage}} />
+
+- Primary Button background color is 'blue' (default)
+- Primary Button inverse variant changed from white to a shade of blue (blue25).
+- This is only a token level change.
+
 <Graphic src={{url: secondaryButtonImage}} />
+
+- Secondary Buttons changed from back on hover to a shade of neutral.
+- Secondary Button inverse variant focus: the background changed from white to translucent.
+- Secondary Button inverse variant hover: the background changes from gray to transparent.
+- This a token level change.
+
 <Graphic src={{url: tertiaryButtonImage}} />
+- The border radius on Tertiary Buttons is now rounded.
+- The underline has been removed on the default state. Hoever and active still show the underline.
+- This is a component level change.
+
+
 <Graphic src={{url: cardImage}} />
+- Cards removed the default box shadow.
+- We also added a borderless and filled variant.
+- This a component level change.
+
 <Graphic src={{url: checkboxImage}} />
+- Error and Alert states now have either a light red or light amber background.
+- This is a component and token level change.
+
 <Graphic src={{url: radioImage}} />
+- Error and Alert states now have either a light red or light amber background.
+- This is a component and token level change.
+
 <Graphic src={{url: selectImage}} />
+- Error and Alert states now have either a light red or light amber background.
+- The border radius on inputs is now 6px vs 4px in v13..
+- This is a component and token level change.
+
 <Graphic src={{url: textAreaImage}} />
+- Error and Alert states now have either a light red or light amber background.
+- The border radius on inputs is now 6px vs 4px in v13..
+- This is a component and token level change.
+
 <Graphic src={{url: textInputImage}} />
+- Error and Alert states now have either a light red or light amber background.
+- The border radius on inputs is now 6px vs 4px in v13..
+- This is a component and token level change.
+
 <Graphic src={{url: countBadgeImage}} />
+- A low emphasis was added for default and inverse variants.
+- This is a component level change.
+
 <Graphic src={{url: expandableImage}} />
+- Hover state changed to a shade lighter of gray.
+- This was a component and token level change.
+
 <Graphic src={{url: infoHighlightImage}} />
+- Some colors shifted to match the new brand direction.
+- This is a token level change.
+
 <Graphic src={{url: loadingDotsImage}} />
+- The default color changed to a darker shade of gray for better contrast.
+- The inverse variant also changed to a lighter shade for better contrast.
+- This is a token level change.
+
 <Graphic src={{url: pillImage}} />
+- The component now uses the Avatar from the Preview package.
+- Some colors shifted to match the new brand direction.
+- This is a components and token level change.
+
 <Graphic src={{url: statusIndicatorImage}} />
+- Status Indicator now uses rounded corners.
+- A new variant was added: 'AI'.
+- Some colors shifted to match the new brand direction, most notably the `caution` variant.
+- New semantic variants where added.
+
 <Graphic src={{url: tabsImage}} />
+- Some colors shifted to match the new brand direction.
+- This is a token level change.

modules/mcp/lib/config.json

@@ -3,6 +3,7 @@
     "upgrade-guides/12.0-UPGRADE-GUIDE.md",
     "upgrade-guides/13.0-UPGRADE-GUIDE.md",
     "upgrade-guides/14.0-UPGRADE-GUIDE.md",
+    "upgrade-guides/14.0-VISUAL-CHANGES.md",
     "llm-txt/llm-token-migration-14.txt",
     "llm-txt/llm-style-props-migration.txt"
   ]