feat(fuselage): Update input pseudo states

[abhinavkrin]

Proposed changes (including videos or screenshots)

Updates the pseudo states of the input components to match the design spec.

• Placeholder text now uses font-hint and value text font-titles-labels. The placeholder previously used font-annotation, which is ~2.6:1 against white and fails WCAG AA; font-hint is ~4.7:1 and passes. The value colour was darkened alongside it to keep the contrast relationship.
• Disabled inputs use font-disabled instead of font-default, so disabled text is now visually distinct from enabled text.
• Invalid inputs no longer tint their value text red; only the border stays red, per the design file.
• Icons inside inputs follow the input's font colour in every state, including focus, where they were previously blue.
• Adds a hover state. The on-hover hook already existed in the shared input primitive but resolved to the same colour as the resting border, so hovering was a no-op. It now resolves to stroke-dark.

Two related fixes found while working through the states matrix:

• A pressed input no longer loses its state. active-border-color used the lighter stroke-medium, so pressing made the border lighter than hover, and an invalid input dropped its red border entirely while pressed.
• The ::placeholder rule in InputBox/mixins.scss had been commented out behind a "fix placeholder performance issue" TODO since 2019, so native placeholders rendered in the browser's default colour and no placeholder token ever reached them. It is re-enabled; under plain SCSS it compiles to 8 rules totalling ~2.3KB.

Because InputBox is the base for the whole input family, the token changes apply to Select, MultiSelect, AutoComplete and PaginatedSelect as well. Those components set some colours from JSX props rather than the shared mixins, so five hardcoded default values were swapped to titles-labels to keep them consistent.

Issue(s)

CORE-2375

Further comments

A few token pairs now resolve to the same value. These are intentional, not oversights:

• focus-icon-color equals the base text colour, because the ticket asks that icons follow the font colour "always" and the design file shows a dark icon in the focus row.
• hover-border-color and active-border-color are both stroke-dark, and invalid-active-border-color matches the invalid border. The design file has no pressed state, and the alternative was letting a press downgrade the state the user is already in.

Known and deliberately out of scope, both pre-existing:

• A disabled Select/AutoComplete does not dim its value text. Box's color prop emits !important, so the disabled token cannot win by specificity; fixing it means removing those props and wiring the tokens through .rcx-select. Worth its own PR.
• with-icon-addon-colors on .rcx-select emits sibling selectors while the addon is a descendant, so it never matches, and .rcx-autocomplete__addon has no rule at all.

Visual regression: run locally in the Playwright Docker image. 15 baselines changed, all of them input stories, and they are committed here. Every diff is colour-only, with identical image dimensions before and after, so there is no layout shift. The full suite is green at 506 passed.

Downstream note: the equivalent placeholder colour in Rocket.Chat's MessageComposerInput is hardcoded to font-annotation and should move to font-hint when the version is bumped.

CORE-2375

[changeset-bot]

🦋 Changeset detected

Latest commit: 3523166

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@rocket.chat/fuselage	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR