Extended Tokens: Input

[Xue (etudie)]

This pull request introduces updates to the @fluentui/react-input package, focusing on replacing hardcoded tokens with semanticTokens for styling consistency and adding new semantic token definitions. These changes aim to improve maintainability and alignment with design specifications.

Updates to @fluentui/react-input styling:

• Replaced tokens with semanticTokens in useInputStyles.styles.ts for properties like borderRadius, backgroundColor, borderColor, and color, ensuring a more consistent and semantic approach to styling. [1] [2] [3] [4] [5] [6] [7] [8] [9]

Dependency and token updates:

• Added @fluentui/semantic-tokens as a dependency in package.json to support the use of semantic tokens.
• Introduced a new semantic token foregroundCtrlIconOnNeutralRest in semantic-tokens and updated its fallback value to include colorNeutralForeground3. [1] [2] [3]

Changelog:

• Added a changelog entry for the @fluentui/react-input package to document the minor update and its impact on dependent packages.

[Mitch-At-Work]

Looks like we'll need to account for the corner radius similar to textArea here:

[Mitch-At-Work]

Looks like both pressed (active) and selected (focus-within) states use the same color for the colored bottom border bar, but they should have alternate states based on original spec, let's review those and ensure that pressed takes priority and has it's legacy color enabled (+ pressed semantic token)

[Mitch-At-Work]

Some minor tweaks required on the bottom bar

[Xue (etudie)]

Updated border

Can you clarify on this? I'll reach out. Thanks! Mitch-At-Work

Looks like both pressed (active) and selected (focus-within) states use the same color for the colored bottom border bar, but they should have alternate states based on original spec, let's review those and ensure that pressed takes priority and has it's legacy color enabled (+ pressed semantic token)

[github-actions]

Pull request demo site: URL