Field: Update to use Semantic Tokens

[terynk]

This pull request introduces a new useSemanticFieldStyles hook and integrates it into the Fluent UI library. The changes include defining and exporting the new hook, updating relevant style tokens, and adding the hook to the semantic style hooks configuration. Below is a summary of the most significant changes:

New Hook Implementation and Integration

• Created the useSemanticFieldStyles hook in Field/useSemanticFieldStyles.styles.ts to provide styling for Field components, including handling various states, orientations, and validation messages.
• Exported the useSemanticFieldStyles hook in Field/index.ts and added it to the SEMANTIC_STYLE_HOOKS configuration in semanticStyleHooks.ts. [1] [2] [3]
• Updated the main library export file to include useSemanticFieldStyles.

Semantic Tokens Updates

• Added new semantic tokens for Field styling, such as padding, spacing, and color tokens, to support the new hook. [1] [2] [3] [4] [5]
• Updated existing tokens to include fallback values for better compatibility. [1] [2]

Token Mapping and Overrides

• Added mappings for the new Field tokens in fluentLegacyVariants.ts and fluentOverrides.ts to ensure compatibility with both legacy and Fluent 2 design systems. [1] [2] [3] [4]

These changes collectively enhance the Fluent UI library by introducing a standardized way to style Field components, improving maintainability and consistency across the framework.

[Mitch-At-Work]

Semantic token usage looks good!

Just a few small minor comments before landing

[github-actions]

Pull request demo site: URL