refactor: colors to tailwind

[JammingBen]

Migrates color and background-color to Tailwind.

Migration

The theme color roles now exist as tailwind variables and can be used like so: bg-role-primary, text-role-on-primary. This also supports variations, e.g. hover:text-role-on-primary or bg-role-primary/50.

Also these oc-helper classes are now redundant:

• oc-text-muted > text-role-on-surface-variant
• oc-text-error > text-role-on-error

refs #937

[Copilot]

Pull Request Overview

This PR migrates color and background-color styling from CSS variables to Tailwind utility classes. The migration introduces new utility classes in the design system for color roles (oc-role-{name}) and replaces legacy classes like oc-text-muted and oc-text-error with semantic role-based equivalents.

Key changes:

• Introduction of new Tailwind utility classes for color roles in the design system layer
• Migration of inline CSS color/background properties to Tailwind classes
• Replacement of legacy helper classes with semantic role-based equivalents
• Removal of redundant CSS color definitions in favor of utility classes

Reviewed Changes

Copilot reviewed 138 out of 138 changed files in this pull request and generated 7 comments.

File	Description
packages/design-system/src/styles/colors.css	New utility classes for color roles
packages/design-system/src/styles/layers.css	Integration of new color utilities
Various component and test files	Migration from CSS variables to Tailwind classes

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}