feat: Add new eslint rules for consistent token usage

[AverageZ]

Summary

Resolves #4143

Adds eslint-plugin-canvas-kit, a publishable ESLint plugin for enforcing Canvas Kit styling and token conventions.

The plugin provides rules that:

• discourage inline React style props
• require Canvas breakpoint tokens instead of hardcoded pixel media-query values
• require cssVar() when system tokens are used in createStyles
• flag deprecated or semantically mismatched design-token usage
• flag raw CSS values where a Canvas token should be used

The goal is earlier, clearer feedback while writing styles, so token, theming, and responsive-design mistakes are caught before review or release.

The repository’s ESLint configuration now enables the plugin’s recommended rules for TypeScript and JSX source files.

Scope and rollout

The rules are enabled for source files, but existing violations remain—primarily in stories and examples. This PR adds the plugin and establishes its initial coverage without bundling a broad cleanup of existing example code.

Some valid edge cases may still need a targeted ESLint disable, particularly when integrating with third-party libraries that require runtime inline positioning or dimensions.

Release Category

Infrastructure

Release Note

Adds eslint-plugin-canvas-kit, with recommended rules for enforcing Canvas Kit styling and design-token conventions.

Breaking Changes

None for package consumers adopting the plugin voluntarily.

Within this repository, contributors may see new lint failures when adding or changing TypeScript/JSX styles that do not follow the enforced Canvas styling conventions.

Testing

yarn test modules/eslint-plugin-canvas-kit

Reviewer starting points

• eslint.config.js — enables the plugin’s recommended rules
• modules/eslint-plugin-canvas-kit/index.js — plugin and recommended-config registration
• modules/eslint-plugin-canvas-kit/rules/ — rule implementations
• modules/eslint-plugin-canvas-kit/spec/ — RuleTester coverage

Feedback requested

Please focus on:

• whether the allowed token and breakpoint values match current Canvas styling conventions
• whether the rules are scoped narrowly enough to avoid unintended failures
• whether any rule needs a clearer escape hatch for legitimate exceptions

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

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.}

[cypress]

Workday/canvas-kit    Run #11604

Run Properties:   Passed #11604  •  7a9bac7e48 ℹ️: Merge 24e8e56fbf3aa87ce92670fb2241cf7183d50d02 into f4ae86b34eec3edc8e580c9384d4...

Project	Workday/canvas-kit
Branch Review	feat-4143-eslint-rules
Run status	Passed #11604
Run duration	02m 31s
Commit	7a9bac7e48 ℹ️: Merge 24e8e56fbf3aa87ce92670fb2241cf7183d50d02 into f4ae86b34eec3edc8e580c9384d4...
Committer	Alex Zajac
View all properties for this run ↗︎

---

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

UI Coverage  19.37%
Untested elements	1567
Tested elements	374

Accessibility  99.06%
Failed rules	5 critical   5 serious   3 moderate   2 minor
Failed elements	76

[AverageZ]

retarget #4167 from master to prerelease/minor before merge?