Toast: Update Toast to use semantic tokens

[terynk]

This pull request introduces updates to the @fluentui/react-toast package to enhance its styling by leveraging semantic tokens and improving its modularity. Key changes include the addition of new semantic styles for Toast components, updates to exports for better accessibility, and the introduction of new semantic tokens for consistent theming.

Updates to @fluentui/react-toast:

• Updated the Toast component to use semantic tokens for styling, marking this as a minor update in the package's change log. (change/@fluentui-react-toast-560606fc-9d0b-489e-9ffe-4f82be76a305.json)
• Added new exports for ToastContainer, getPositionStyles, and TOAST_POSITIONS, improving modularity and usability of the Toast components. (packages/react-components/react-toast/library/src/index.ts) [1] [2]

Introduction of semantic styles:

• Added semantic style hooks for Toast components, including useSemanticToastBodyStyles, useSemanticToastContainerStyles, useSemanticToastFooterStyles, useSemanticToastStyles, and useSemanticToastTitleStyles. These hooks provide consistent styling across Toast elements. (packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts)
• Implemented detailed semantic styles for various Toast elements such as ToastBody, ToastContainer, ToastFooter, ToastTitle, and Toast. These styles utilize semantic tokens for properties like font size, line height, colors, and spacing. [1] [2] [3] [4] [5]

Semantic tokens updates:

• Introduced new semantic tokens for Toast-specific properties, such as _ctrlToastBackgroundFlyoutLumBlend, _ctrlToastBodyForegroundContentNeutralPrimary, _ctrlToastFooterGapBetweenCtrlDefault, and others, ensuring consistent theming and accessibility. (packages/semantic-tokens/etc/semantic-tokens.api.md) [1] [2] [3]
• Updated existing tokens like backgroundFlyoutLumBlend and statusInformativeTintForeground to include fallback values for better theming support. (packages/semantic-tokens/etc/semantic-tokens.api.md) [1] [2]

Integration with semantic style hooks:

• Added the new Toast semantic style hooks to the SEMANTIC_STYLE_HOOKS object for integration with the Fluent UI provider. (packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts) [1] [2]
• Exported the new Toast semantic style hooks for external use. (packages/react-components/semantic-style-hooks-preview/library/src/index.ts)

[github-actions]

Pull request demo site: URL