feat: Implement Sana Canvas Text Input, Text Area, Form Field, and Color Picker

[jamesfan]

Summary

Fixes: #3983

Release Category

Components

---

Checklist

• MDX documentation adheres to Canvas Kit's Documentation Guidelines
• Label ready for review has been added to PR

For the Reviewer

• PR title is short and descriptive
• PR summary describes the change (Fixes/Resolves linked correctly)
• PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
• Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Summary by CodeRabbit

• Style
  • Updated text input styling to use a larger border radius for a more consistent, modern appearance.
  • Adjusted error (critical) and caution state visuals by removing background color fills while keeping the existing border and shadow indicators (including hover/focus behavior).

[coderabbitai]

📝 Walkthrough

Walkthrough

textInputStencil in TextInput.tsx is updated: borderRadius switches from system.legacy.shape.md to system.shape.lg, and backgroundColor is removed from both the error (critical) and caution modifier blocks. No other logic or API changes are introduced.

Changes

TextInput stencil styling updates

Layer / File(s)	Summary
textInputStencil token and variant style updates modules/react/text-input/lib/TextInput.tsx	borderRadius updated from system.legacy.shape.md to system.shape.lg in the base stencil styles. backgroundColor removed from the error and caution modifier blocks; their borderColor/boxShadow hover and focus selector rules are preserved.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐇 Hop, hop! The corners grow round,
With system.shape.lg now found.
No more background in error red,
Nor caution's tint — clean styles instead.
The stencil gleams, legacy unwound! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The pull request shows only changes to TextInput component in the raw summary, but the linked issue #3983 requires updates across Text Input, Text Area, Form Field, and Color Picker components. Cannot fully validate compliance without seeing all component changes.	Provide summaries of changes to Text Area, Form Field, and Color Picker components to verify all linked issue objectives are met.
Out of Scope Changes check	❓ Inconclusive	The raw summary only covers TextInput.tsx changes. The broader PR scope includes three additional components, but without complete file-level summaries, it is unclear whether all changes are properly scoped to token updates only.	Review summaries of all component files to confirm changes are limited to token and style updates with no unintended refactoring or API changes.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main feature: implementing Sana Canvas token and style updates for Text Input, Text Area, Form Field, and Color Picker components to align with v16 design standards.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cypress]

Workday/canvas-kit    Run #11035

Run Properties:   Passed #11035  •  2937853fd2 ℹ️: Merge bf299e6d3671553d0e2a7672aa2acf638fddded6 into 70f2ee99c66df706e5101477f627...

Project	Workday/canvas-kit
Branch Review	feat/2026-06-15-sc-text-input-area-ff-cp
Run status	Passed #11035
Run duration	02m 25s
Commit	2937853fd2 ℹ️: Merge bf299e6d3671553d0e2a7672aa2acf638fddded6 into 70f2ee99c66df706e5101477f627...
Committer	James Fan
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	17
Skipped	0
Passing	809
View all changes introduced in this branch ↗︎

UI Coverage  19.72%
Untested elements	1521
Tested elements	371

Accessibility  99.4%
Failed rules	5 critical   5 serious   0 moderate   2 minor
Failed elements	68