From 1b77ffdbd9882def93fd592f81f43561e08710bd Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 18 Jul 2025 11:33:51 -0700 Subject: [PATCH 1/4] Squish and export nessecary types --- ...-213ed5af-e9e3-44d7-a136-ba202f583a40.json | 7 + .../library/etc/react-toast.api.md | 15 ++ .../react-toast/library/src/index.ts | 3 + .../etc/semantic-style-hooks-preview.api.md | 20 ++ .../src/component-styles/Toast/index.ts | 5 + .../useSemanticToastBodyStyles.styles.ts | 64 ++++++ .../useSemanticToastContainerStyles.styles.ts | 30 +++ .../useSemanticToastFooterStyles.styles.ts | 30 +++ .../Toast/useSemanticToastStyles.styles.ts | 46 +++++ .../useSemanticToastTitleStyles.styles.ts | 120 +++++++++++ .../component-styles/semanticStyleHooks.ts | 13 ++ .../library/src/index.ts | 7 + .../etc/semantic-tokens.api.md | 83 +++++++- .../semantic-tokens/src/control/tokens.ts | 9 +- .../src/fluentLegacyVariants.ts | 100 +++++++++ .../semantic-tokens/src/fluentOverrides.ts | 5 +- packages/semantic-tokens/src/index.ts | 25 +++ packages/semantic-tokens/src/legacy/tokens.ts | 40 ++++ .../src/legacyVariant/tokens.ts | 192 ++++++++++++++++++ 19 files changed, 804 insertions(+), 10 deletions(-) create mode 100644 change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastTitleStyles.styles.ts diff --git a/change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json b/change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json new file mode 100644 index 0000000000000..97141582535c0 --- /dev/null +++ b/change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Export ToastContainer state and classNames nessecary for style overrides", + "packageName": "@fluentui/react-toast", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-toast/library/etc/react-toast.api.md b/packages/react-components/react-toast/library/etc/react-toast.api.md index c5c8d6f1c179f..2ff4dedc17eac 100644 --- a/packages/react-components/react-toast/library/etc/react-toast.api.md +++ b/packages/react-components/react-toast/library/etc/react-toast.api.md @@ -64,6 +64,21 @@ export type ToastBodyState = ComponentState & { // @public (undocumented) export const toastClassNames: SlotClassNames; +// @public (undocumented) +export const toastContainerClassNames: SlotClassNames; + +// @public +export type ToastContainerState = ComponentState & Pick & Pick & { + transitionTimeout: number; + timerTimeout: number; + running: boolean; + onTransitionEntering: () => void; + nodeRef: React_2.Ref; + onMotionFinish?: (event: null, data: { + direction: 'enter' | 'exit'; + }) => void; +}; + // @public export const Toaster: React_2.FC; diff --git a/packages/react-components/react-toast/library/src/index.ts b/packages/react-components/react-toast/library/src/index.ts index 7015d8e818dbb..3e57242a6cefe 100644 --- a/packages/react-components/react-toast/library/src/index.ts +++ b/packages/react-components/react-toast/library/src/index.ts @@ -40,3 +40,6 @@ export { toastFooterClassNames, } from './ToastFooter'; export type { ToastFooterProps, ToastFooterState, ToastFooterSlots } from './ToastFooter'; + +export { toastContainerClassNames } from './ToastContainer'; +export type { ToastContainerState } from './ToastContainer'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 049f2bfb4c2a0..4bb76911bab3d 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -60,6 +60,11 @@ import { TabListState } from '@fluentui/react-tabs'; import { TabState } from '@fluentui/react-tabs'; import { TextareaState } from '@fluentui/react-textarea'; import { TextState } from '@fluentui/react-text'; +import { ToastBodyState } from '@fluentui/react-toast'; +import { ToastContainerState } from '@fluentui/react-toast'; +import { ToastFooterState } from '@fluentui/react-toast'; +import { ToastState } from '@fluentui/react-toast'; +import { ToastTitleState } from '@fluentui/react-toast'; import { ToggleButtonState } from '@fluentui/react-button'; import { ToolbarDividerState } from '@fluentui/react-toolbar'; import { ToolbarGroupState } from '@fluentui/react-toolbar'; @@ -250,6 +255,21 @@ export const useSemanticTextareaStyles: (_state: unknown) => TextareaState; // @public export const useSemanticTextStyles: (_state: unknown) => TextState; +// @public +export const useSemanticToastBodyStyles: (_state: unknown) => ToastBodyState; + +// @public +export const useSemanticToastContainerStyles: (_state: unknown) => ToastContainerState; + +// @public +export const useSemanticToastFooterStyles: (_state: unknown) => ToastFooterState; + +// @public +export const useSemanticToastStyles: (_state: unknown) => ToastState; + +// @public +export const useSemanticToastTitleStyles: (_state: unknown) => ToastTitleState; + // @public (undocumented) export const useSemanticToggleButtonStyles: (_state: unknown) => ToggleButtonState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts new file mode 100644 index 0000000000000..eaae3de502120 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts @@ -0,0 +1,5 @@ +export { useSemanticToastBodyStyles } from './useSemanticToastBodyStyles.styles'; +export { useSemanticToastContainerStyles } from './useSemanticToastContainerStyles.styles'; +export { useSemanticToastFooterStyles } from './useSemanticToastFooterStyles.styles'; +export { useSemanticToastStyles } from './useSemanticToastStyles.styles'; +export { useSemanticToastTitleStyles } from './useSemanticToastTitleStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts new file mode 100644 index 0000000000000..acba9e24d3057 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts @@ -0,0 +1,64 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { toastBodyClassNames, type ToastBodyState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseClassName = makeResetStyles({ + gridColumnStart: 2, + gridColumnEnd: 3, + paddingTop: '6px', //not connected to tokens in Figma + fontSize: semanticTokens.textRampItemBodyFontSize, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + color: semanticTokens.foregroundContentNeutralPrimary, + wordBreak: 'break-word', +}); + +const useSubtitleBaseClassName = makeResetStyles({ + paddingTop: '4px', //not connected to tokens in Figma + gridColumnStart: 2, + gridColumnEnd: 3, + fontSize: semanticTokens.textRampMetadataFontSize, + lineHeight: semanticTokens.textRampMetadataLineHeight, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + color: semanticTokens.foregroundContentNeutralSecondary, +}); + +const useInvertedStyles = makeStyles({ + root: { + color: semanticTokens._ctrlToastBodyForegroundContentNeutralPrimary, + }, + subtitle: { + color: semanticTokens._ctrlToastBodyForegroundContentNeutralSecondary, + }, +}); + +/** + * Apply styling to the ToastBody slots based on the state + */ +export const useSemanticToastBodyStyles = (_state: unknown): ToastBodyState => { + 'use no memo'; + const state = _state as ToastBodyState; + const rootBaseClassName = useRootBaseClassName(); + const subtitleBaseClassName = useSubtitleBaseClassName(); + const invertedStyles = useInvertedStyles(); + state.root.className = mergeClasses( + state.root.className, + toastBodyClassNames.root, + rootBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.root, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.subtitle) { + state.subtitle.className = mergeClasses( + state.subtitle.className, + toastBodyClassNames.subtitle, + subtitleBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, + getSlotClassNameProp_unstable(state.subtitle), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts new file mode 100644 index 0000000000000..81bb85e77bd18 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts @@ -0,0 +1,30 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { toastContainerClassNames, type ToastContainerState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + + +const useRootBaseClassName = makeResetStyles({ + boxSizing: 'border-box', + marginTop: semanticTokens.gapBetweenCtrlLgDefault, + pointerEvents: 'all', + borderRadius: semanticTokens._ctrlToastContainerFlyoutRest, + ...createCustomFocusIndicatorStyle({ + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens._ctrlToastContainerCtrlFocusOuterStroke}`, + }), +}); + +/** + * Apply styling to the ToastContainer slots based on the state + */ +export const useSemanticToastContainerStyles = (_state: unknown): ToastContainerState => { + 'use no memo'; + + const state = _state as ToastContainerState; + + const rootBaseClassName = useRootBaseClassName(); + state.root.className = mergeClasses(state.root.className, toastContainerClassNames.root, rootBaseClassName, getSlotClassNameProp_unstable(state.root)); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts new file mode 100644 index 0000000000000..5097a3265a177 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts @@ -0,0 +1,30 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import {toastFooterClassNames, type ToastFooterState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useRootBaseClassName = makeResetStyles({ + paddingTop: semanticTokens._ctrlToastFooterPaddingContentSmall, + gridColumnStart: 2, + gridColumnEnd: 3, + display: 'flex', + alignItems: 'center', + gap: semanticTokens._ctrlToastFooterGapBetweenCtrlDefault, +}); + +/** + * Apply styling to the ToastFooter slots based on the state + */ +export const useSemanticToastFooterStyles = (_state: unknown): ToastFooterState => { + 'use no memo'; + + const state = _state as ToastFooterState; + + const rootBaseClassName = useRootBaseClassName(); + state.root.className = mergeClasses(state.root.className, toastFooterClassNames.root, rootBaseClassName, getSlotClassNameProp_unstable(state.root)); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts new file mode 100644 index 0000000000000..3dd63e21518e7 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts @@ -0,0 +1,46 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { toastClassNames, type ToastState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseClassName = makeResetStyles({ + display: 'grid', + gridTemplateColumns: 'auto 1fr auto', + padding: semanticTokens.paddingContentSmall, + borderRadius: semanticTokens._ctrlToastCornerFlyoutRest, + border: `1px solid ${semanticTokens._ctrlToastStrokeFlyout}`, + boxShadow: semanticTokens._ctrlToastShadowFlyout, + fontSize: semanticTokens.textRampItemHeaderFontSize, + lineHeight: semanticTokens._ctrlToastTextRampItemHeaderLineHeight, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + color: semanticTokens.foregroundContentNeutralPrimary, + backgroundColor: semanticTokens.backgroundFlyoutLumBlend +}); + +const useStyles = makeStyles({ + inverted: { + color: semanticTokens._ctrlToastForegroundContentNeutralPrimary, + backgroundColor: semanticTokens._ctrlToastBackgroundFlyoutLumBlend, + }, +}); + +/** + * Apply styling to the Toast slots based on the state + */ +export const useSemanticToastStyles = (_state: unknown): ToastState => { + 'use no memo'; + + const state = _state as ToastState; + + const rootBaseClassName = useRootBaseClassName(); + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + toastClassNames.root, + rootBaseClassName, + state.backgroundAppearance === 'inverted' && styles.inverted, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastTitleStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastTitleStyles.styles.ts new file mode 100644 index 0000000000000..8951007b10f7e --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastTitleStyles.styles.ts @@ -0,0 +1,120 @@ +import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react'; +import { toastTitleClassNames, type ToastTitleState } from '@fluentui/react-toast'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useRootBaseClassName = makeResetStyles({ + display: 'flex', + gridColumnEnd: 3, + color: semanticTokens.foregroundContentNeutralPrimary, + wordBreak: 'break-word', +}); + +const useMediaBaseClassName = makeResetStyles({ + display: 'flex', + paddingTop: '2px', + gridColumnEnd: 2, + paddingRight: semanticTokens.gapInsideCtrlDefault, + fontSize: semanticTokens._ctrlToastTextRampItemHeaderFontSize, + color: semanticTokens.foregroundContentNeutralPrimary, +}); + +const useActionBaseClassName = makeResetStyles({ + display: 'flex', + alignItems: 'start', + paddingLeft: semanticTokens._ctrlToastTitleGapBetweenCtrlDefault, + gridColumnEnd: -1, + color: semanticTokens._ctrlToastTitleCtrlLinkForegroundBrandRest, +}); + +const useInvertedStyles = makeStyles({ + root: { + color: semanticTokens._ctrlToastTitleForegroundContentNeutralPrimary, + }, + + action: { + color: semanticTokens._ctrlToastTitleCtrlLinkForegroundBrandRestInverted, + }, + + media: { + color: semanticTokens._ctrlToastTitleForegroundContentNeutralPrimaryMedia, + }, +}); + +const useIntentIconStyles = makeStyles({ + success: { + color: semanticTokens.statusSuccessTintForeground, + }, + error: { + color: semanticTokens._ctrlToastTitleStatusDangerTintForeground, + }, + warning: { + color: semanticTokens._ctrlToastTitleStatusWarningTintForeground, + }, + info: { + color: semanticTokens._ctrlToastTitleStatusInformativeTintForeground, + }, +}); + +const useIntentIconStylesInverted = makeStyles({ + success: { + color: semanticTokens._ctrlToastTitleStatusSuccessTintForegroundInverted, + }, + error: { + color: semanticTokens._ctrlToastTitleStatusDangerTintForegroundInverted, + }, + warning: { + color: semanticTokens._ctrlToastTitleStatusWarningTintForegroundInverted, + }, + info: { + color: semanticTokens._ctrlToastTitleStatusInformativeTintForegroundInverted, + }, +}); + +/** + * Apply styling to the ToastTitle slots based on the state + */ +export const useSemanticToastTitleStyles = (_state: unknown): ToastTitleState => { + 'use no memo'; + + const state = _state as ToastTitleState; + + const rootBaseClassName = useRootBaseClassName(); + const actionBaseClassName = useActionBaseClassName(); + const mediaBaseClassName = useMediaBaseClassName(); + const intentIconStyles = useIntentIconStyles(); + const intentIconStylesInverted = useIntentIconStylesInverted(); + const { intent } = state; + const invertedStyles = useInvertedStyles(); + state.root.className = mergeClasses( + state.root.className, + toastTitleClassNames.root, + rootBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.root, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.media) { + state.media.className = mergeClasses( + state.media.className, + toastTitleClassNames.media, + mediaBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.media, + intent && intentIconStyles[intent], + intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], + getSlotClassNameProp_unstable(state.media), + ); + } + + if (state.action) { + state.action.className = mergeClasses( + state.action.className, + toastTitleClassNames.action, + actionBaseClassName, + state.backgroundAppearance === 'inverted' && invertedStyles.action, + getSlotClassNameProp_unstable(state.action), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 7c80f5b99e2a6..240a108c09ed0 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -81,6 +81,13 @@ import { } from './Toolbar'; import { useSemanticTooltipStyles } from './Tooltip'; import { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './InfoLabel'; +import { + useSemanticToastContainerStyles, + useSemanticToastBodyStyles, + useSemanticToastFooterStyles, + useSemanticToastStyles, + useSemanticToastTitleStyles, +} from './Toast'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -183,4 +190,10 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // InfoLabel styles useInfoButtonStyles_unstable: useSemanticInfoButtonStyles, useInfoLabelStyles_unstable: useSemanticInfoLabelStyles, + //Toast styles + useToastBodyStyles_unstable: useSemanticToastBodyStyles, + useToastContainerStyles_unstable: useSemanticToastContainerStyles, + useToastFooterStyles_unstable: useSemanticToastFooterStyles, + useToastStyles_unstable: useSemanticToastStyles, + useToastTitleStyles_unstable: useSemanticToastTitleStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index d370a65c37608..e52bf83283768 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -84,3 +84,10 @@ export { useSemanticToolbarToggleButtonStyles, } from './component-styles/Toolbar'; export { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './component-styles/InfoLabel'; +export { + useSemanticToastBodyStyles, + useSemanticToastContainerStyles, + useSemanticToastFooterStyles, + useSemanticToastStyles, + useSemanticToastTitleStyles, +} from './component-styles/Toast'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 2a493e9830610..26e5a5a9ff84c 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -353,7 +353,7 @@ export const backgroundFlyoutColorBlend = "var(--smtc-background-flyout-color-bl export const backgroundFlyoutColorBlendRaw = "--smtc-background-flyout-color-blend"; // @public (undocumented) -export const backgroundFlyoutLumBlend = "var(--smtc-background-flyout-lum-blend)"; +export const backgroundFlyoutLumBlend = "var(--smtc-background-flyout-lum-blend, var(--colorNeutralBackground1))"; // @public (undocumented) export const backgroundFlyoutLumBlendRaw = "--smtc-background-flyout-lum-blend"; @@ -3226,6 +3226,81 @@ export const _ctrlTabSmGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, v // @public export const _ctrlTabSmPaddingHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalSNudge))"; +// @public +export const _ctrlToastBackgroundFlyoutLumBlend = "var(--smtc-background-flyout-lum-blend, var(--colorNeutralBackgroundInverted))"; + +// @public +export const _ctrlToastBodyForegroundContentNeutralPrimary = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundInverted2)))"; + +// @public +export const _ctrlToastBodyForegroundContentNeutralSecondary = "var(--smtc-foreground-content-neutral-secondary, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForegroundInverted2)))"; + +// @public +export const _ctrlToastContainerCtrlFocusOuterStroke = "var(--smtc-ctrl-focus-outer-stroke, var(--smtc-background-ctrl-brand-rest, var(--colorStrokeFocus2)))"; + +// @public +export const _ctrlToastContainerFlyoutRest = "var(--smtc-corner-flyout-rest, var(--borderRadiusMedium))"; + +// @public +export const _ctrlToastCornerFlyoutRest = "var(--smtc-corner-flyout-rest, var(--borderRadiusMedium))"; + +// @public +export const _ctrlToastFooterGapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default, 14px)"; + +// @public +export const _ctrlToastFooterPaddingContentSmall = "var(--smtc-padding-content-small, 16px)"; + +// @public +export const _ctrlToastForegroundContentNeutralPrimary = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundInverted2)))"; + +// @public +export const _ctrlToastShadowFlyout = "var(--smtc-shadow-flyout, var(--shadow8))"; + +// @public +export const _ctrlToastStrokeFlyout = "var(--smtc-stroke-flyout, var(--smtc-null-color, var(--colorTransparentStroke)))"; + +// @public +export const _ctrlToastTextRampItemHeaderFontSize = "var(--smtc-text-ramp-item-header-font-size, var(--smtc-text-global-body2-font-size, 16px))"; + +// @public +export const _ctrlToastTextRampItemHeaderLineHeight = "var(--smtc-text-ramp-item-header-line-height, var(--smtc-text-global-body2-line-height, 20px))"; + +// @public +export const _ctrlToastTitleCtrlLinkForegroundBrandRest = "var(--smtc-ctrl-link-foreground-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForeground1)))"; + +// @public +export const _ctrlToastTitleCtrlLinkForegroundBrandRestInverted = "var(--smtc-ctrl-link-foreground-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForegroundInverted)))"; + +// @public +export const _ctrlToastTitleForegroundContentNeutralPrimary = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundInverted2)))"; + +// @public +export const _ctrlToastTitleForegroundContentNeutralPrimaryMedia = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundInverted)))"; + +// @public +export const _ctrlToastTitleGapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default, 12px)"; + +// @public +export const _ctrlToastTitleStatusDangerTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorStatusDangerForeground1))"; + +// @public +export const _ctrlToastTitleStatusDangerTintForegroundInverted = "var(--smtc-status-danger-tint-foreground, var(--colorStatusDangerForegroundInverted))"; + +// @public +export const _ctrlToastTitleStatusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForeground3))"; + +// @public +export const _ctrlToastTitleStatusInformativeTintForegroundInverted = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForegroundInverted2))"; + +// @public +export const _ctrlToastTitleStatusSuccessTintForegroundInverted = "var(--smtc-status-success-tint-foreground, var(--colorStatusSuccessForegroundInverted))"; + +// @public +export const _ctrlToastTitleStatusWarningTintForeground = "var(--smtc-status-warning-tint-foreground, var(--colorStatusWarningForeground1))"; + +// @public +export const _ctrlToastTitleStatusWarningTintForegroundInverted = "var(--smtc-status-warning-tint-foreground, var(--colorStatusWarningForegroundInverted))"; + // @public (undocumented) export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background, var(--colorNeutralBackground1))"; @@ -3665,7 +3740,7 @@ export const gapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default, 8px)" export const gapBetweenCtrlDefaultRaw = "--smtc-gap-between-ctrl-default"; // @public (undocumented) -export const gapBetweenCtrlLgDefault = "var(--smtc-gap-between-ctrl-lg-default)"; +export const gapBetweenCtrlLgDefault = "var(--smtc-gap-between-ctrl-lg-default, 16px)"; // @public (undocumented) export const gapBetweenCtrlLgDefaultRaw = "--smtc-gap-between-ctrl-lg-default"; @@ -4537,7 +4612,7 @@ export const paddingContentNone = "var(--smtc-padding-content-none, var(--spacin export const paddingContentNoneRaw = "--smtc-padding-content-none"; // @public (undocumented) -export const paddingContentSmall = "var(--smtc-padding-content-small)"; +export const paddingContentSmall = "var(--smtc-padding-content-small, 12px)"; // @public (undocumented) export const paddingContentSmallRaw = "--smtc-padding-content-small"; @@ -4927,7 +5002,7 @@ export const statusInformativeTintBackground = "var(--smtc-status-informative-ti export const statusInformativeTintBackgroundRaw = "--smtc-status-informative-tint-background"; // @public (undocumented) -export const statusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForeground3))"; +export const statusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForeground2))"; // @public (undocumented) export const statusInformativeTintForegroundRaw = "--smtc-status-informative-tint-foreground"; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index e8e04aec7513f..84978cce9facb 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -71,7 +71,6 @@ import { colorNeutralBackground3, colorTransparentStroke, colorNeutralBackground5, - colorNeutralForeground3, colorNeutralBackground4, colorPaletteMarigoldBackground3, colorPaletteBerryForeground3, @@ -323,7 +322,7 @@ export const paddingContentNone = `var(${paddingContentNoneRaw}, ${spacingHorizo export const paddingContentAlignOutdentTextOnSubtle = `var(${paddingContentAlignOutdentTextOnSubtleRaw})`; export const paddingContentXxSmall = `var(${paddingContentXxSmallRaw})`; export const paddingContentXSmall = `var(${paddingContentXSmallRaw})`; -export const paddingContentSmall = `var(${paddingContentSmallRaw})`; +export const paddingContentSmall = `var(${paddingContentSmallRaw}, 12px)`; export const paddingContentMedium = `var(${paddingContentMediumRaw})`; export const paddingContentLarge = `var(${paddingContentLargeRaw}, ${spacingHorizontalXXL})`; export const paddingContentXLarge = `var(${paddingContentXLargeRaw})`; @@ -351,7 +350,7 @@ export const gapBetweenContentMedium = `var(${gapBetweenContentMediumRaw})`; export const gapBetweenContentLarge = `var(${gapBetweenContentLargeRaw})`; export const gapBetweenContentXLarge = `var(${gapBetweenContentXLargeRaw})`; export const gapBetweenContentXxLarge = `var(${gapBetweenContentXxLargeRaw})`; -export const gapBetweenCtrlLgDefault = `var(${gapBetweenCtrlLgDefaultRaw})`; +export const gapBetweenCtrlLgDefault = `var(${gapBetweenCtrlLgDefaultRaw}, 16px)`; export const gapBetweenCtrlSmDefault = `var(${gapBetweenCtrlSmDefaultRaw})`; export const gapInsideCtrlDefault = `var(${gapInsideCtrlDefaultRaw}, ${spacingHorizontalS})`; export const gapInsideCtrlSmDefault = `var(${gapInsideCtrlSmDefaultRaw}, ${spacingHorizontalXS})`; @@ -405,7 +404,7 @@ export const backgroundCtrlNeutralPressed = `var(${backgroundCtrlNeutralPressedR export const backgroundCtrlNeutralDisabled = `var(${backgroundCtrlNeutralDisabledRaw}, ${colorNeutralBackgroundDisabled})`; export const backgroundCtrlSubtleHover = `var(${backgroundCtrlSubtleHoverRaw}, ${colorSubtleBackgroundHover})`; export const backgroundCtrlSubtlePressed = `var(${backgroundCtrlSubtlePressedRaw}, ${colorSubtleBackgroundPressed})`; -export const backgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw})`; +export const backgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw}, ${colorNeutralBackground1})`; export const backgroundFlyoutColorBlend = `var(${backgroundFlyoutColorBlendRaw})`; export const cornerZero = `var(${cornerZeroRaw}, ${borderRadiusNone})`; export const cornerBezel = `var(${cornerBezelRaw})`; @@ -450,7 +449,7 @@ export const statusImportantTintBackground = `var(${statusImportantTintBackgroun export const statusImportantTintStroke = `var(${statusImportantTintStrokeRaw}, ${colorTransparentStroke})`; export const statusImportantTintForeground = `var(${statusImportantTintForegroundRaw}, ${colorNeutralForeground1})`; export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw}, ${colorNeutralBackground5})`; -export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground3})`; +export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground2})`; export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke1})`; export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw}, ${colorNeutralBackground4})`; export const statusAwayForeground = `var(${statusAwayForegroundRaw}, ${colorPaletteMarigoldBackground3})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 3cca859a0dea0..0effd5ae8b5e0 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -716,6 +716,106 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { _ctrlTabSmPaddingHorizontalDefault: { f2Token: 'spacingHorizontalSNudge', originalToken: 'paddingCtrlHorizontalDefault', + }, + _ctrlToastBackgroundFlyoutLumBlend: { + f2Token: 'colorNeutralBackgroundInverted', + originalToken: 'backgroundFlyoutLumBlend', + }, + _ctrlToastBodyForegroundContentNeutralPrimary: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlToastBodyForegroundContentNeutralSecondary: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'foregroundContentNeutralSecondary', + }, + _ctrlToastContainerCtrlFocusOuterStroke: { + f2Token: 'colorStrokeFocus2', + originalToken: 'ctrlFocusOuterStroke', + }, + _ctrlToastContainerFlyoutRest: { + f2Token: 'borderRadiusMedium', + originalToken: 'cornerFlyoutRest', + }, + _ctrlToastCornerFlyoutRest: { + f2Token: 'borderRadiusMedium', + originalToken: 'cornerFlyoutRest', + }, + _ctrlToastFooterGapBetweenCtrlDefault: { + originalToken: 'gapBetweenCtrlDefault', + rawValue: '14px', + }, + _ctrlToastFooterPaddingContentSmall: { + originalToken: 'paddingContentSmall', + rawValue: '16px', + }, + _ctrlToastForegroundContentNeutralPrimary: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlToastShadowFlyout: { + f2Token: 'shadow8', + originalToken: 'shadowFlyout', + }, + _ctrlToastStrokeFlyout: { + f2Token: 'colorTransparentStroke', + originalToken: 'strokeFlyout', + }, + _ctrlToastTextRampItemHeaderFontSize: { + originalToken: 'textRampItemHeaderFontSize', + rawValue: '16px', + }, + _ctrlToastTextRampItemHeaderLineHeight: { + originalToken: 'textRampItemHeaderLineHeight', + rawValue: '20px', + }, + _ctrlToastTitleCtrlLinkForegroundBrandRest: { + f2Token: 'colorBrandForeground1', + originalToken: 'ctrlLinkForegroundBrandRest', + }, + _ctrlToastTitleCtrlLinkForegroundBrandRestInverted: { + f2Token: 'colorBrandForegroundInverted', + originalToken: 'ctrlLinkForegroundBrandRest', + }, + _ctrlToastTitleForegroundContentNeutralPrimary: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlToastTitleForegroundContentNeutralPrimaryMedia: { + f2Token: 'colorNeutralForegroundInverted', + originalToken: 'foregroundContentNeutralPrimary', + }, + _ctrlToastTitleGapBetweenCtrlDefault: { + originalToken: 'gapBetweenCtrlDefault', + rawValue: '12px', + }, + _ctrlToastTitleStatusDangerTintForeground: { + f2Token: 'colorStatusDangerForeground1', + originalToken: 'statusDangerTintForeground', + }, + _ctrlToastTitleStatusDangerTintForegroundInverted: { + f2Token: 'colorStatusDangerForegroundInverted', + originalToken: 'statusDangerTintForeground', + }, + _ctrlToastTitleStatusInformativeTintForeground: { + f2Token: 'colorNeutralForeground3', + originalToken: 'statusInformativeTintForeground', + }, + _ctrlToastTitleStatusInformativeTintForegroundInverted: { + f2Token: 'colorNeutralForegroundInverted2', + originalToken: 'statusInformativeTintForeground', + }, + _ctrlToastTitleStatusSuccessTintForegroundInverted: { + f2Token: 'colorStatusSuccessForegroundInverted', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlToastTitleStatusWarningTintForeground: { + f2Token: 'colorStatusWarningForeground1', + originalToken: 'statusWarningTintForeground', + }, + _ctrlToastTitleStatusWarningTintForegroundInverted: { + f2Token: 'colorStatusWarningForegroundInverted', + originalToken: 'statusWarningTintForeground', }, _ctrlTooltipPaddingBottom: { originalToken: 'paddingCtrlTextBottom', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 89dee73fffce8..d5a33d0555ae6 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -33,6 +33,7 @@ export const fluentOverrides: FluentOverrides = { backgroundCtrlSubtleHover: { f2Token: 'colorSubtleBackgroundHover' }, backgroundCtrlSubtlePressed: { f2Token: 'colorSubtleBackgroundPressed' }, backgroundCtrlSubtleRest: { f2Token: 'colorSubtleBackground' }, + backgroundFlyoutLumBlend: { f2Token: 'colorNeutralBackground1' }, backgroundFlyoutSolid: { f2Token: 'colorNeutralBackground1' }, backgroundSmoke: { f2Token: 'colorBackgroundOverlay' }, cornerCircular: { f2Token: 'borderRadiusCircular' }, @@ -209,6 +210,7 @@ export const fluentOverrides: FluentOverrides = { gapBetweenContentSmall: { rawValue: '8px' }, gapBetweenContentXSmall: { f2Token: 'spacingVerticalXXS' }, gapBetweenCtrlDefault: { rawValue: '8px' }, + gapBetweenCtrlLgDefault: { rawValue: '16px' }, gapBetweenListItem: { f2Token: 'spacingVerticalXXS' }, gapBetweenTextSmall: { f2Token: 'spacingHorizontalXS' }, gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' }, @@ -223,6 +225,7 @@ export const fluentOverrides: FluentOverrides = { paddingContentAlignOutdentIconOnSubtle: { f2Token: 'spacingHorizontalM' }, paddingContentLarge: { f2Token: 'spacingHorizontalXXL' }, paddingContentNone: { f2Token: 'spacingHorizontalNone' }, + paddingContentSmall: { rawValue: '12px' }, paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' }, paddingCtrlHorizontalIconOnly: { rawValue: '5px' }, paddingCtrlLgHorizontalDefault: { f2Token: 'spacingHorizontalL' }, @@ -267,7 +270,7 @@ export const fluentOverrides: FluentOverrides = { statusInformativeForeground: { f2Token: 'colorNeutralForeground3' }, statusInformativeStroke: { f2Token: 'colorNeutralStroke2' }, statusInformativeTintBackground: { f2Token: 'colorNeutralBackground4' }, - statusInformativeTintForeground: { f2Token: 'colorNeutralForeground3' }, + statusInformativeTintForeground: { f2Token: 'colorNeutralForeground2' }, statusInformativeTintStroke: { f2Token: 'colorNeutralStroke1' }, statusOofForeground: { f2Token: 'colorPaletteBerryForeground3' }, statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index cefba3dc63181..2f8d8773a3ca5 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1958,6 +1958,31 @@ export { _ctrlTabSizeDefault, _ctrlTabSmGapInsideDefault, _ctrlTabSmPaddingHorizontalDefault, + _ctrlToastBackgroundFlyoutLumBlend, + _ctrlToastBodyForegroundContentNeutralPrimary, + _ctrlToastBodyForegroundContentNeutralSecondary, + _ctrlToastContainerCtrlFocusOuterStroke, + _ctrlToastContainerFlyoutRest, + _ctrlToastCornerFlyoutRest, + _ctrlToastFooterGapBetweenCtrlDefault, + _ctrlToastFooterPaddingContentSmall, + _ctrlToastForegroundContentNeutralPrimary, + _ctrlToastShadowFlyout, + _ctrlToastStrokeFlyout, + _ctrlToastTextRampItemHeaderFontSize, + _ctrlToastTextRampItemHeaderLineHeight, + _ctrlToastTitleCtrlLinkForegroundBrandRest, + _ctrlToastTitleCtrlLinkForegroundBrandRestInverted, + _ctrlToastTitleForegroundContentNeutralPrimary, + _ctrlToastTitleForegroundContentNeutralPrimaryMedia, + _ctrlToastTitleGapBetweenCtrlDefault, + _ctrlToastTitleStatusDangerTintForeground, + _ctrlToastTitleStatusDangerTintForegroundInverted, + _ctrlToastTitleStatusInformativeTintForeground, + _ctrlToastTitleStatusInformativeTintForegroundInverted, + _ctrlToastTitleStatusSuccessTintForegroundInverted, + _ctrlToastTitleStatusWarningTintForeground, + _ctrlToastTitleStatusWarningTintForegroundInverted, _ctrlTooltipPaddingBottom, _ctrlTooltipPaddingLeft, _ctrlTooltipPaddingRight, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 4991cb8aa6479..3a45db196930c 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -749,3 +749,43 @@ export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; * @public */ export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackgroundInverted | `colorNeutralBackgroundInverted`} design token. + * @public + */ +export const colorNeutralBackgroundInverted = 'var(--colorNeutralBackgroundInverted)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundInverted2 | `colorNeutralForegroundInverted2`} design token. + * @public + */ +export const colorNeutralForegroundInverted2 = 'var(--colorNeutralForegroundInverted2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#shadow8 | `shadow8`} design token. + * @public + */ +export const shadow8 = 'var(--shadow8)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForegroundInverted | `colorBrandForegroundInverted`} design token. + * @public + */ +export const colorBrandForegroundInverted = 'var(--colorBrandForegroundInverted)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerForegroundInverted | `colorStatusDangerForegroundInverted`} design token. + * @public + */ +export const colorStatusDangerForegroundInverted = 'var(--colorStatusDangerForegroundInverted)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessForegroundInverted | `colorStatusSuccessForegroundInverted`} design token. + * @public + */ +export const colorStatusSuccessForegroundInverted = 'var(--colorStatusSuccessForegroundInverted)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForeground1 | `colorStatusWarningForeground1`} design token. + * @public + */ +export const colorStatusWarningForeground1 = 'var(--colorStatusWarningForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningForegroundInverted | `colorStatusWarningForegroundInverted`} design token. + * @public + */ +export const colorStatusWarningForegroundInverted = 'var(--colorStatusWarningForegroundInverted)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 91a35d688a911..b529a6ba789ab 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -17,6 +17,7 @@ import { ctrlInputBottomLineStrokePressedRaw, ctrlInputBackgroundDisabledRaw, } from '../components/input/variables'; +import { ctrlLinkForegroundBrandRestRaw } from '../components/link/variables'; import { ctrlListIndentLevel1Raw } from '../components/list/variables'; import { ctrlProgressBackgroundEmptyRaw, @@ -80,6 +81,10 @@ import { textGlobalBody3LineHeightRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, + backgroundFlyoutLumBlendRaw, + paddingContentSmallRaw, + textGlobalBody2FontSizeRaw, + statusInformativeTintForegroundRaw, } from '../control/variables'; import { colorTransparentBackground, @@ -154,6 +159,16 @@ import { colorNeutralForeground1Pressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, + colorNeutralBackgroundInverted, + colorNeutralForegroundInverted2, + shadow8, + colorBrandForeground1, + colorBrandForegroundInverted, + colorNeutralForegroundInverted, + colorStatusDangerForegroundInverted, + colorStatusSuccessForegroundInverted, + colorStatusWarningForeground1, + colorStatusWarningForegroundInverted, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, } from '../legacy/tokens'; @@ -204,6 +219,8 @@ import { foregroundCtrlActiveBrandPressedRaw, foregroundCtrlIconOnSubtleHoverRaw, foregroundCtrlIconOnSubtlePressedRaw, + foregroundContentNeutralSecondaryRaw, + textRampItemHeaderFontSizeRaw, } from '../optional/variables'; /** @@ -1438,6 +1455,181 @@ export const _ctrlTabSmGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spa * please use paddingCtrlHorizontalDefault instead. */ export const _ctrlTabSmPaddingHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * This is a legacy variant for backgroundFlyoutLumBlend to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use backgroundFlyoutLumBlend instead. + */ +export const _ctrlToastBackgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw}, ${colorNeutralBackgroundInverted})`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlToastBodyForegroundContentNeutralPrimary = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForegroundInverted2}))`; +/** + * This is a legacy variant for foregroundContentNeutralSecondary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralSecondary instead. + */ +export const _ctrlToastBodyForegroundContentNeutralSecondary = `var(${foregroundContentNeutralSecondaryRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForegroundInverted2}))`; +/** + * This is a legacy variant for ctrlFocusOuterStroke to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlFocusOuterStroke instead. + */ +export const _ctrlToastContainerCtrlFocusOuterStroke = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorStrokeFocus2}))`; +/** + * This is a legacy variant for cornerFlyoutRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use cornerFlyoutRest instead. + */ +export const _ctrlToastContainerFlyoutRest = `var(${cornerFlyoutRestRaw}, ${borderRadiusMedium})`; +/** + * This is a legacy variant for cornerFlyoutRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use cornerFlyoutRest instead. + */ +export const _ctrlToastCornerFlyoutRest = `var(${cornerFlyoutRestRaw}, ${borderRadiusMedium})`; +/** + * This is a legacy variant for gapBetweenCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapBetweenCtrlDefault instead. + */ +export const _ctrlToastFooterGapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw}, 14px)`; +/** + * This is a legacy variant for paddingContentSmall to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingContentSmall instead. + */ +export const _ctrlToastFooterPaddingContentSmall = `var(${paddingContentSmallRaw}, 16px)`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlToastForegroundContentNeutralPrimary = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForegroundInverted2}))`; +/** + * This is a legacy variant for shadowFlyout to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use shadowFlyout instead. + */ +export const _ctrlToastShadowFlyout = `var(${shadowFlyoutRaw}, ${shadow8})`; +/** + * This is a legacy variant for strokeFlyout to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use strokeFlyout instead. + */ +export const _ctrlToastStrokeFlyout = `var(${strokeFlyoutRaw}, var(${nullColorRaw}, ${colorTransparentStroke}))`; +/** + * This is a legacy variant for textRampItemHeaderFontSize to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textRampItemHeaderFontSize instead. + */ +export const _ctrlToastTextRampItemHeaderFontSize = `var(${textRampItemHeaderFontSizeRaw}, var(${textGlobalBody2FontSizeRaw}, 16px))`; +/** + * This is a legacy variant for textRampItemHeaderLineHeight to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use textRampItemHeaderLineHeight instead. + */ +export const _ctrlToastTextRampItemHeaderLineHeight = `var(${textRampItemHeaderLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}, 20px))`; +/** + * This is a legacy variant for ctrlLinkForegroundBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlLinkForegroundBrandRest instead. + */ +export const _ctrlToastTitleCtrlLinkForegroundBrandRest = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForeground1}))`; +/** + * This is a legacy variant for ctrlLinkForegroundBrandRest to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use ctrlLinkForegroundBrandRest instead. + */ +export const _ctrlToastTitleCtrlLinkForegroundBrandRestInverted = `var(${ctrlLinkForegroundBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForegroundInverted}))`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlToastTitleForegroundContentNeutralPrimary = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForegroundInverted2}))`; +/** + * This is a legacy variant for foregroundContentNeutralPrimary to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use foregroundContentNeutralPrimary instead. + */ +export const _ctrlToastTitleForegroundContentNeutralPrimaryMedia = `var(${foregroundContentNeutralPrimaryRaw}, var(${foregroundCtrlNeutralPrimaryRestRaw}, ${colorNeutralForegroundInverted}))`; +/** + * This is a legacy variant for gapBetweenCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use gapBetweenCtrlDefault instead. + */ +export const _ctrlToastTitleGapBetweenCtrlDefault = `var(${gapBetweenCtrlDefaultRaw}, 12px)`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlToastTitleStatusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorStatusDangerForeground1})`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlToastTitleStatusDangerTintForegroundInverted = `var(${statusDangerTintForegroundRaw}, ${colorStatusDangerForegroundInverted})`; +/** + * This is a legacy variant for statusInformativeTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusInformativeTintForeground instead. + */ +export const _ctrlToastTitleStatusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground3})`; +/** + * This is a legacy variant for statusInformativeTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusInformativeTintForeground instead. + */ +export const _ctrlToastTitleStatusInformativeTintForegroundInverted = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForegroundInverted2})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlToastTitleStatusSuccessTintForegroundInverted = `var(${statusSuccessTintForegroundRaw}, ${colorStatusSuccessForegroundInverted})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlToastTitleStatusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorStatusWarningForeground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlToastTitleStatusWarningTintForegroundInverted = `var(${statusWarningTintForegroundRaw}, ${colorStatusWarningForegroundInverted})`; /** * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. From 35d822263ef115c328cdac266fda743318fb173f Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 18 Jul 2025 12:09:04 -0700 Subject: [PATCH 2/4] Add deprecation message --- .../src/components/ToastContainer/ToastContainer.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts index eb6b0f46485b4..f05e84d8be0f2 100644 --- a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts +++ b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts @@ -42,7 +42,7 @@ export type ToastContainerState = ComponentState & */ onTransitionEntering: () => void; /** - * @deprecated + * @deprecated now merged with root ref */ nodeRef: React.Ref; From 5eb9364453e15730e23c85a8f0b72e71572b7e4e Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 18 Jul 2025 12:43:35 -0700 Subject: [PATCH 3/4] Lint tokens file --- packages/semantic-tokens/src/fluentLegacyVariants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 0effd5ae8b5e0..99e30e8cbc0d8 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -717,7 +717,7 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'paddingCtrlHorizontalDefault', }, - _ctrlToastBackgroundFlyoutLumBlend: { + _ctrlToastBackgroundFlyoutLumBlend: { f2Token: 'colorNeutralBackgroundInverted', originalToken: 'backgroundFlyoutLumBlend', }, @@ -769,7 +769,7 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { originalToken: 'textRampItemHeaderLineHeight', rawValue: '20px', }, - _ctrlToastTitleCtrlLinkForegroundBrandRest: { + _ctrlToastTitleCtrlLinkForegroundBrandRest: { f2Token: 'colorBrandForeground1', originalToken: 'ctrlLinkForegroundBrandRest', }, From 598432afaa3de89483ea2104b93f1772463baba0 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Fri, 18 Jul 2025 13:33:20 -0700 Subject: [PATCH 4/4] Lint and update --- .../semantic-style-hooks-preview/library/package.json | 1 + .../Menu/useSemanticMenuItemSwitchStyles.styles.ts | 1 - .../Toast/useSemanticToastBodyStyles.styles.ts | 1 + .../Toast/useSemanticToastContainerStyles.styles.ts | 8 ++++++-- .../Toast/useSemanticToastFooterStyles.styles.ts | 9 +++++++-- .../Toast/useSemanticToastStyles.styles.ts | 2 +- 6 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 41a68d981030c..b009bb64951a3 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -61,6 +61,7 @@ "@fluentui/react-text": "^9.4.36", "@fluentui/react-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", + "@fluentui/react-toast": "^9.4.8", "@fluentui/react-toolbar": "^9.4.5", "@fluentui/react-tooltip": "^9.6.6", "@fluentui/react-tree": "^9.10.9", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemSwitchStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemSwitchStyles.styles.ts index c7fe9dd9b61e7..4f0df7b46d395 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemSwitchStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemSwitchStyles.styles.ts @@ -155,7 +155,6 @@ export const useSemanticMenuItemSwitchStyles = (_state: unknown): MenuItemSwitch useMenuItemStyles_unstable({ ...state, components: { - // eslint-disable-next-line @typescript-eslint/no-deprecated ...state.components, checkmark: 'span', submenuIndicator: 'span', diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts index acba9e24d3057..aa44b17440571 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts @@ -38,6 +38,7 @@ const useInvertedStyles = makeStyles({ */ export const useSemanticToastBodyStyles = (_state: unknown): ToastBodyState => { 'use no memo'; + const state = _state as ToastBodyState; const rootBaseClassName = useRootBaseClassName(); const subtitleBaseClassName = useSubtitleBaseClassName(); diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts index 81bb85e77bd18..150a74e692c52 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts @@ -4,7 +4,6 @@ import { toastContainerClassNames, type ToastContainerState } from '@fluentui/re import * as semanticTokens from '@fluentui/semantic-tokens'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; - const useRootBaseClassName = makeResetStyles({ boxSizing: 'border-box', marginTop: semanticTokens.gapBetweenCtrlLgDefault, @@ -24,7 +23,12 @@ export const useSemanticToastContainerStyles = (_state: unknown): ToastContainer const state = _state as ToastContainerState; const rootBaseClassName = useRootBaseClassName(); - state.root.className = mergeClasses(state.root.className, toastContainerClassNames.root, rootBaseClassName, getSlotClassNameProp_unstable(state.root)); + state.root.className = mergeClasses( + state.root.className, + toastContainerClassNames.root, + rootBaseClassName, + getSlotClassNameProp_unstable(state.root), + ); return state; }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts index 5097a3265a177..e1b5179a10a0a 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastFooterStyles.styles.ts @@ -1,5 +1,5 @@ import { makeResetStyles, mergeClasses } from '@griffel/react'; -import {toastFooterClassNames, type ToastFooterState } from '@fluentui/react-toast'; +import { toastFooterClassNames, type ToastFooterState } from '@fluentui/react-toast'; import * as semanticTokens from '@fluentui/semantic-tokens'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; @@ -24,7 +24,12 @@ export const useSemanticToastFooterStyles = (_state: unknown): ToastFooterState const state = _state as ToastFooterState; const rootBaseClassName = useRootBaseClassName(); - state.root.className = mergeClasses(state.root.className, toastFooterClassNames.root, rootBaseClassName, getSlotClassNameProp_unstable(state.root)); + state.root.className = mergeClasses( + state.root.className, + toastFooterClassNames.root, + rootBaseClassName, + getSlotClassNameProp_unstable(state.root), + ); return state; }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts index 3dd63e21518e7..a85a7263ba0ca 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastStyles.styles.ts @@ -14,7 +14,7 @@ const useRootBaseClassName = makeResetStyles({ lineHeight: semanticTokens._ctrlToastTextRampItemHeaderLineHeight, fontWeight: semanticTokens.textStyleDefaultHeaderWeight, color: semanticTokens.foregroundContentNeutralPrimary, - backgroundColor: semanticTokens.backgroundFlyoutLumBlend + backgroundColor: semanticTokens.backgroundFlyoutLumBlend, }); const useStyles = makeStyles({