Sana Canvas Announcements

Sana Canvas v16 Release

Sana Canvas v16 delivers the alignment of Canvas components 1:1 with the Sana visual design language, bringing enhanced accessibility, refined geometric styling, and a streamlined system icon library.

We highly recommend consulting our Sana Canvas Kit v16 Upgrade Guide for Developers for step-by-step migration instructions.

Key Themes of v16

1:1 Sana Visual Alignment

Sana isn’t just an option—it’s now the baseline. Use Sana Canvas v16 with v4.4.0 tokens and the data theme to receive the modern, visual upgrades offered through this version. Learn more about how to enable the full Sana Canvas theme below. 

Enhanced Accessibility and Contrast

Design system excellence starts with inclusion. We’ve overhauled checked states across Checkbox, Radio, and Switch components using system.color.brand.accent.positive This ensures robust, out-of-the-box WCAG compliance and higher visual clarity for all users. Consumer themes that customize brand.success.base should ensure a minimum 3:1 contrast ratio against white foreground elements.

Modernized Geometry with Progressive Corner Shapes

We are introducing cornerShapeStencil, a new utility built on the CSS corner-shape property. Components like Card, Menu, and MultiSelect now feature smoother, more refined corner geometry in supporting browsers while gracefully falling back to standard border-radius.

Modular Hyperlink and Navigation Rules

Hyperlink styling is now decoupled into two distinct properties: color via variant (default, inverse, secondary) and decoration via linkType (inline, standalone). Legacy compound variants like standaloneInverse have been removed in favor of this cleaner API.

How to Enable the Full Sana Canvas Theme

Sana Canvas Kit v16 components are intended to be used with Tokens v4.4.0 and the sana-canvas data theme to get the full updated visual styling — updated brand colors, neutrals, surfaces, and shapes.

Step 1: Confirm you’re on Sana Canvas Tokens v4.4.0

Step 2: Import the Sana CSS variables last in your root CSS file. Order matters; Sana variables must come last.

Step 3: Set data-theme="sana-canvas" on your <html> tag

That’s it! Removing the attribute reverts to classic Canvas.

You can update to v16 without applying the Sana Canvas data theme with no breaking changes, however you will not get the full Sana Canvas styling.

Release Overview

The table below contains a high-level overview of the updates that are rolled out as part of the v16 release. The impact for designers and developers is defined as follows:

• None: Inapplicable to the role or no actions are required to adopt the change.
• Low: Minor manual adjustments may be needed to maintain layout intent.
• Medium: Requires review of component groupings due to new shape/spacing logic.
• High: Requires coordination between design and engineering for structural or breaking changes

Change	Description	Designer Impact	Developer Impact
Buttons	Reduced inline-padding, min-width, and font-weight. New outline variant for DeleteButton.	Medium	High
Popups	Tooltip light surface container, border updates, and pill shape	High	High
Navigation	Modular Hyperlink API (variant vs linkType)	Medium	Medium
Containers	Card updated with progressive corner geometry	Low	Medium
Indicators	Avatar palette updates and new magenta/green options; Toast padding & layout standardization	Low	Medium
Inputs	Form inputs updated to 12px corners (shape.lg); inline padding also increased to 12px to accommodate the larger corner radii; tinted backgrounds removed for error states	Medium	High
Text	No direct change to Text components, but font changed; new font configuration required	High	High
New components	Addition of KBD (Labs) and Tabs (Preview)	High	Medium

Major Component Updates

New Component Additions

• KBD (Labs): Display keyboard inputs and shortcuts using accessible, visually consistent key representations (<KBD><KBD.Item>⌘</KBD.Item><KBD.Item>C</KBD.Item></KBD>).
• Tabs (Preview): A newly structured Tabs component supporting filled and outlined variants aligned with Sana Canvas specs.

Visual and Structural Redesigns

• Avatar: Refreshed color palette (blue, amber, purple) for higher contrast, and introduced magenta and green variants.
• Buttons: Font weight set to medium across the board; minWidth and paddingInline decreased across small, medium, and large sizes. Added an outline variant to DeleteButton.
• Form Inputs (Text Input, Text Area, Select, MultiSelect, FormField): Updated corner radii to 12px (shape.lg). Error/caution validation states no longer apply tinted background colors.
• Menu & Dropdowns: Menu items now use asymmetric padding (8px top/bottom, 12px left), 20px (md) icons, and reduced item gaps (2px). Menu.Popper trigger offset increased from 4px to 8px.
• Toast: Container-level padding replaces fragmented child padding, gap standardized to 12px, corners updated to shape.xl, and CloseIcon converted to an extraSmall tertiary button.
• Tooltip: Standardized to a light surface container with a visible border system.color.border.default, shape.full pill shape, and high-contrast outline fallbacks.

Developer Automation: Codemods

To streamline the migration process, we provide an automated codemod script that traverses your codebase’s AST to handle structural and API changes automatically.

Run the v16 codemod directly using:

npx @workday/canvas-kit-codemod v16 [path]

v16 Codemod Transformations

• Hyperlink Props (updateHyperlinkProps): Converts deprecated variant="standalone" to linkType="standalone" and variant="standaloneInverse"to variant="inverse" linkType="standalone".
• Component Imports: Automatically flags and updates modified component imports across packages.
• Card: Renames the deprecated variant="borderless" to variant="alt".
• Sidepanel: Renames the variant="alternate" to variant="overlay". It only transforms SidePanel imported from @workday/canvas-kit-react.

Note: Codemods must be run sequentially. If you are currently on v14, execute the v15 codemod prior to running the v16 migration. Always perform QA and code reviews following execution.

Asset Package Access

The updated icon package is live on NPM, Artifactory and available in SAS for immediate integration into your builds. Additionally, a comprehensive v16 icons codemod script  is now available with the Sana Canvas Kit v16 release.

July 2026 Design Asset Release

We are excited to announce the launch of our updated system icons—a major milestone in our brand evolution that introduces a fluid, approachable visual style tailored for Workday’s AI-driven future.

This update is officially designated as v5 across code. In tandem with this release, our asset library has been officially renamed to the Sana Canvas Asset Library.

What’s New in v5 System Icons

Refined Visual Language and Overhaul

• 800+ Modernized Icons: Over 800 clean, Sana-aligned system icons designed to swap seamlessly into existing layouts.
• Unified Sana Integration: Original Sana-designed icons are now native to our NPM codebase, creating a cohesive visual experience across all product features.
• Renamed & Restructured Architecture: Icons have undergone a comprehensive reorganization to support our updated taxonomy. Because legacy icons do not map 1:1 to v5, review our v5 Icon Migration Codemod  for a complete cross-reference.

Migration and Acceleration Tools

Paired with the Sana Canvas v16 rollout, we are providing automated migration utilities to ensure a seamless upgrade for engineers.