Extended Tokens: Text area

[etudie]

This pull request introduces updates to the @fluentui/react-textarea package and its related styles, focusing on transitioning from legacy tokens to semantic tokens for improved maintainability and consistency. Additionally, changes were made to semantic token definitions to support this transition. The updates enhance the styling of the Textarea component and ensure alignment with the new semantic token system.

Updates to Textarea Component Styles:

• Replaced legacy tokens (tokens) with semantic tokens (semanticTokens) for styling properties such as borderRadius, backgroundColor, and border in useTextareaStyles.styles.ts. This ensures consistent theming across components. [1] [2] [3] [4]

• Updated placeholder text and typography styles (e.g., fontSize, lineHeight) to use semantic tokens for better alignment with design specifications. [1] [2]

Semantic Token Enhancements:

• Added new semantic tokens, such as _ctrlFocusOuterStrokeInteractive and _ctrlInputBackgroundRestDarker, to support the updated Textarea styles. These tokens provide fallback values for better compatibility. [1] [2]

• Enhanced existing semantic tokens by adding fallback values sourced from legacy tokens, ensuring smooth transition and backward compatibility. For example, ctrlInputBackgroundDisabled now includes a fallback to colorNeutralBackgroundDisabled. [1] [2]

Token Definitions in semantic-tokens:

• Updated tokens.ts to include fallback values for semantic tokens, such as ctrlInputBackgroundRest and ctrlInputStrokeRest. These changes align token definitions with the new semantic token system.

• Imported legacy token values into tokens.ts to provide additional fallbacks for semantic tokens, ensuring consistent rendering across different themes.

[github-actions]

Pull request demo site: URL