From fb61be916c742b8b0e188da5718d93bcf25b8444 Mon Sep 17 00:00:00 2001 From: Rachel Yoo Date: Wed, 16 Jul 2025 13:14:46 -0400 Subject: [PATCH 1/3] add infolabel to semantic style hooks --- .../etc/semantic-style-hooks-preview.api.md | 8 + .../library/package.json | 1 + .../src/component-styles/InfoLabel/index.ts | 2 + .../useSemanticInfoButtonStyles.styles.ts | 140 ++++++++++++++++++ .../useSemanticInfoLabelStyles.styles.ts | 55 +++++++ .../component-styles/semanticStyleHooks.ts | 4 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 3 + .../src/fluentLegacyVariants.ts | 4 + packages/semantic-tokens/src/index.ts | 1 + packages/semantic-tokens/src/legacy/tokens.ts | 5 + .../src/legacyVariant/tokens.ts | 10 +- 12 files changed, 233 insertions(+), 1 deletion(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts 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 e94e18c92768b0..049f2bfb4c2a04 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 @@ -27,6 +27,8 @@ import { FieldState } from '@fluentui/react-field'; import { FlatTreeState } from '@fluentui/react-tree'; import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider'; import { ImageState } from '@fluentui/react-image'; +import { InfoButtonState } from '@fluentui/react-infolabel'; +import { InfoLabelState } from '@fluentui/react-infolabel'; import { InlineDrawerState } from '@fluentui/react-drawer'; import { InputState } from '@fluentui/react-input'; import { LabelState } from '@fluentui/react-label'; @@ -137,6 +139,12 @@ export const useSemanticFlatTreeStyles: (_state: unknown) => FlatTreeState; // @public (undocumented) export const useSemanticImageStyles: (_state: unknown) => ImageState; +// @public +export const useSemanticInfoButtonStyles: (_state: unknown) => InfoButtonState; + +// @public +export const useSemanticInfoLabelStyles: (_state: unknown) => InfoLabelState; + // @public export const useSemanticInlineDrawerStyles: (_state: unknown) => InlineDrawerState; 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 01d55a6def018c..41a68d981030ce 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -37,6 +37,7 @@ "@fluentui/react-input": "^9.5.6", "@fluentui/react-icons": "^2.0.245", "@fluentui/react-image": "^9.1.84", + "@fluentui/react-infolabel": "^9.2.0", "@fluentui/react-jsx-runtime": "^9.0.54", "@fluentui/react-label": "^9.1.87", "@fluentui/react-link": "^9.4.6", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/index.ts new file mode 100644 index 00000000000000..d9dba62f5300d9 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/index.ts @@ -0,0 +1,2 @@ +export { useSemanticInfoButtonStyles } from './useSemanticInfoButtonStyles.styles'; +export { useSemanticInfoLabelStyles } from './useSemanticInfoLabelStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts new file mode 100644 index 00000000000000..fe9a4034936a56 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts @@ -0,0 +1,140 @@ +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { infoButtonClassNames, type InfoButtonState } from '@fluentui/react-infolabel'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useButtonStyles = makeStyles({ + base: { + alignItems: 'center', + boxSizing: 'border-box', + display: 'inline-flex', + justifyContent: 'center', + textDecorationLine: 'none', + verticalAlign: 'middle', + position: 'relative', + + backgroundColor: semanticTokens.nullColor, + color: semanticTokens.foregroundCtrlOnTransparentRest, + + ...shorthands.borderStyle('none'), + borderRadius: semanticTokens.cornerCtrlRest, + margin: '0', + padding: semanticTokens.gapInsideCtrlSmDefault, + + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline-flex', + }, + + ':hover': { + backgroundColor: semanticTokens.nullColor, + color: semanticTokens.foregroundCtrlOnTransparentHover, + cursor: 'pointer', + + [`& .${iconFilledClassName}`]: { + display: 'inline-flex', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + }, + ':hover:active': { + backgroundColor: semanticTokens.nullColor, + color: semanticTokens.foregroundCtrlOnTransparentPressed, + }, + }, + + selected: { + backgroundColor: semanticTokens.nullColor, + color: semanticTokens._ctrlInfoLabelForegroundColorSelected, + + [`& .${iconFilledClassName}`]: { + display: 'inline-flex', + }, + [`& .${iconRegularClassName}`]: { + display: 'none', + }, + + '@media (forced-colors: active)': { + backgroundColor: 'Highlight', + color: 'Canvas', + }, + }, + + highContrast: { + '@media (forced-colors: active)': { + color: 'CanvasText', + + ':hover,:hover:active': { + forcedColorAdjust: 'none', + backgroundColor: 'Highlight', + color: 'Canvas', + }, + }, + }, + + focusIndicator: createFocusOutlineStyle(), + + large: { + padding: semanticTokens.gapBetweenContentXSmall, + }, +}); + +const usePopoverSurfaceStyles = makeStyles({ + base: { + maxWidth: '264px', + }, + smallMedium: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, + large: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + }, +}); + +/** + * Apply styling to the InfoButton slots based on the state + */ +export const useSemanticInfoButtonStyles = (_state: unknown): InfoButtonState => { + 'use no memo'; + + const state = _state as InfoButtonState; + + const { size } = state; + const { open } = state.popover; + const buttonStyles = useButtonStyles(); + const popoverSurfaceStyles = usePopoverSurfaceStyles(); + + state.info.className = mergeClasses( + infoButtonClassNames.info, + popoverSurfaceStyles.base, + size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, + state.info.className, + ); + + state.root.className = mergeClasses( + state.root.className, + infoButtonClassNames.root, + buttonStyles.base, + buttonStyles.highContrast, + buttonStyles.focusIndicator, + open && buttonStyles.selected, + size === 'large' && buttonStyles.large, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts new file mode 100644 index 00000000000000..35bdad26dfeaa9 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts @@ -0,0 +1,55 @@ +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { makeStyles, mergeClasses } from '@griffel/react'; +import { infoLabelClassNames, type InfoLabelState } from '@fluentui/react-infolabel'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useLabelStyles = makeStyles({ + base: { + verticalAlign: 'top', + cursor: 'inherit', + color: 'inherit', + }, +}); + +const useInfoButtonStyles = makeStyles({ + base: { + verticalAlign: 'top', + + // Negative margin to align with the text + marginTop: `calc(0px - ${semanticTokens.gapBetweenContentXSmall})`, + marginBottom: `calc(0px - ${semanticTokens.gapBetweenContentXSmall})`, + }, + + large: { + // Negative margin to align with the text + marginTop: '-1px', + marginBottom: '-1px', + }, +}); + +/** + * Apply styling to the InfoLabel slots based on the state + */ +export const useSemanticInfoLabelStyles = (_state: unknown): InfoLabelState => { + 'use no memo'; + + const state = _state as InfoLabelState; + + state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className); + + const labelStyles = useLabelStyles(); + state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className); + + const infoButtonStyles = useInfoButtonStyles(); + if (state.infoButton) { + state.infoButton.className = mergeClasses( + state.infoButton.className, + infoLabelClassNames.infoButton, + infoButtonStyles.base, + state.size === 'large' && infoButtonStyles.large, + getSlotClassNameProp_unstable(state.infoButton), + ); + } + + 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 cf5528ccdd4531..7c80f5b99e2a68 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 @@ -80,6 +80,7 @@ import { useSemanticToolbarToggleButtonStyles, } from './Toolbar'; import { useSemanticTooltipStyles } from './Tooltip'; +import { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './InfoLabel'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -179,4 +180,7 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useTabListStyles_unstable: useSemanticTabListStyles, //Tooltip styles useTooltipStyles_unstable: useSemanticTooltipStyles, + // InfoLabel styles + useInfoButtonStyles_unstable: useSemanticInfoButtonStyles, + useInfoLabelStyles_unstable: useSemanticInfoLabelStyles, }; 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 4540ee25973598..d370a65c37608a 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 @@ -83,3 +83,4 @@ export { useSemanticToolbarRadioButtonStyles, useSemanticToolbarToggleButtonStyles, } from './component-styles/Toolbar'; +export { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './component-styles/InfoLabel'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index dc9974f6476aed..6d3e69b7c07537 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -1786,6 +1786,9 @@ export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-wid // @public (undocumented) export const ctrlFocusOuterStrokeWidthRaw = "--smtc-ctrl-focus-outer-stroke-width"; +// @public +export const _ctrlInfoLabelForegroundColorSelected = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorNeutralForeground2BrandSelected)))"; + // @public (undocumented) export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled, var(--colorNeutralBackgroundDisabled)))"; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index aa4c7c894e7967..3cca859a0dea04 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -325,6 +325,10 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorTransparentStrokeInteractive', originalToken: 'ctrlFocusOuterStroke', }, + _ctrlInfoLabelForegroundColorSelected: { + f2Token: 'colorNeutralForeground2BrandSelected', + originalToken: 'foregroundCtrlActiveBrandRest', + }, _ctrlInputBackgroundRestDarker: { f2Token: 'colorNeutralBackground3', originalToken: 'ctrlInputBackgroundRest', diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index b5554c0afab905..cefba3dc63181a 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1860,6 +1860,7 @@ export { _ctrlFieldStatusSuccessTintForeground, _ctrlFieldStatusWarningTintForeground, _ctrlFocusOuterStrokeInteractive, + _ctrlInfoLabelForegroundColorSelected, _ctrlInputBackgroundRestDarker, _ctrlInputBackgroundRestLighter, _ctrlInputBottomLineStrokeBrandPressed, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index dcfb009ffd8454..c9d3fcd83e0188 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -689,6 +689,11 @@ export const spacingVerticalSNudge = 'var(--spacingVerticalSNudge)'; * @public */ export const colorPaletteDarkOrangeForeground1 = 'var(--colorPaletteDarkOrangeForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandSelected | `colorNeutralForeground2BrandSelected`} design token. + * @public + */ +export const colorNeutralForeground2BrandSelected = 'var(--colorNeutralForeground2BrandSelected)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground4 | `colorNeutralForeground4`} design token. * @public diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index d44da7777df174..91a35d688a9114 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -132,6 +132,7 @@ import { spacingHorizontalM, colorPaletteDarkOrangeForeground1, colorTransparentStrokeInteractive, + colorNeutralForeground2BrandSelected, colorNeutralBackground3, colorNeutralForeground4, fontSizeBase200, @@ -181,6 +182,7 @@ import { backgroundCtrlActiveBrandPressedRaw, paddingCtrlLgTextBottomRaw, paddingCtrlSmTextBottomRaw, + foregroundCtrlActiveBrandRestRaw, foregroundCtrlOnSubtleHoverRaw, foregroundCtrlNeutralPrimaryHoverRaw, foregroundCtrlOnSubtlePressedRaw, @@ -200,7 +202,6 @@ import { textRampItemBodyLineHeightRaw, foregroundCtrlActiveBrandHoverRaw, foregroundCtrlActiveBrandPressedRaw, - foregroundCtrlActiveBrandRestRaw, foregroundCtrlIconOnSubtleHoverRaw, foregroundCtrlIconOnSubtlePressedRaw, } from '../optional/variables'; @@ -751,6 +752,13 @@ export const _ctrlFieldStatusWarningTintForeground = `var(${statusWarningTintFor * please use ctrlFocusOuterStroke instead. */ export const _ctrlFocusOuterStrokeInteractive = `var(${ctrlFocusOuterStrokeRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorTransparentStrokeInteractive}))`; +/** + * This is a legacy variant for foregroundCtrlActiveBrandRest 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 foregroundCtrlActiveBrandRest instead. + */ +export const _ctrlInfoLabelForegroundColorSelected = `var(${foregroundCtrlActiveBrandRestRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorNeutralForeground2BrandSelected}))`; /** * This is a legacy variant for ctrlInputBackgroundRest to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. From dc14ba092ff80f002e6dc14d569e567fc78fdcc7 Mon Sep 17 00:00:00 2001 From: Rachel Yoo Date: Thu, 17 Jul 2025 14:03:39 -0400 Subject: [PATCH 2/3] add missing getSlotClassNameProp --- .../InfoLabel/useSemanticInfoButtonStyles.styles.ts | 3 ++- .../InfoLabel/useSemanticInfoLabelStyles.styles.ts | 13 +++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts index fe9a4034936a56..c843d78e9b1e22 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts @@ -119,10 +119,11 @@ export const useSemanticInfoButtonStyles = (_state: unknown): InfoButtonState => const popoverSurfaceStyles = usePopoverSurfaceStyles(); state.info.className = mergeClasses( + state.info.className, infoButtonClassNames.info, popoverSurfaceStyles.base, size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium, - state.info.className, + getSlotClassNameProp_unstable(state.info), ); state.root.className = mergeClasses( diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts index 35bdad26dfeaa9..109279599bccd0 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoLabelStyles.styles.ts @@ -35,10 +35,19 @@ export const useSemanticInfoLabelStyles = (_state: unknown): InfoLabelState => { const state = _state as InfoLabelState; - state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className); + state.root.className = mergeClasses( + state.root.className, + infoLabelClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); const labelStyles = useLabelStyles(); - state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className); + state.label.className = mergeClasses( + state.label.className, + infoLabelClassNames.label, + labelStyles.base, + getSlotClassNameProp_unstable(state.label), + ); const infoButtonStyles = useInfoButtonStyles(); if (state.infoButton) { From 7be761ec6d933f4dbc9aa8144fda9953c4fea8f0 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Thu, 17 Jul 2025 16:08:02 -0700 Subject: [PATCH 3/3] Update hover and pressed states to reflect high contrast transparency --- .../useSemanticInfoButtonStyles.styles.ts | 4 ++-- .../etc/semantic-tokens.api.md | 4 ++-- .../semantic-tokens/src/fluentOverrides.ts | 4 ++-- packages/semantic-tokens/src/legacy/tokens.ts | 20 +++++++++---------- .../semantic-tokens/src/nullable/tokens.ts | 6 ++++-- 5 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts index c843d78e9b1e22..0a6c21390b64ab 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/InfoLabel/useSemanticInfoButtonStyles.styles.ts @@ -34,7 +34,7 @@ const useButtonStyles = makeStyles({ }, ':hover': { - backgroundColor: semanticTokens.nullColor, + backgroundColor: semanticTokens.backgroundCtrlOutlineHover, color: semanticTokens.foregroundCtrlOnTransparentHover, cursor: 'pointer', @@ -46,7 +46,7 @@ const useButtonStyles = makeStyles({ }, }, ':hover:active': { - backgroundColor: semanticTokens.nullColor, + backgroundColor: semanticTokens.backgroundCtrlOutlinePressed, color: semanticTokens.foregroundCtrlOnTransparentPressed, }, }, diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 6d3e69b7c07537..2a493e9830610f 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -263,13 +263,13 @@ export const backgroundCtrlOutlineDisabled = "var(--smtc-background-ctrl-outline export const backgroundCtrlOutlineDisabledRaw = "--smtc-background-ctrl-outline-disabled"; // @public (undocumented) -export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--smtc-null-color, var(--colorTransparentBackground)))"; +export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--smtc-null-color, var(--colorTransparentBackgroundHover)))"; // @public (undocumented) export const backgroundCtrlOutlineHoverRaw = "--smtc-background-ctrl-outline-hover"; // @public (undocumented) -export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--smtc-null-color, var(--colorTransparentBackground)))"; +export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--smtc-null-color, var(--colorTransparentBackgroundPressed)))"; // @public (undocumented) export const backgroundCtrlOutlinePressedRaw = "--smtc-background-ctrl-outline-pressed"; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 5e947f8e058ae8..89dee73fffce83 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -22,8 +22,8 @@ export const fluentOverrides: FluentOverrides = { backgroundCtrlNeutralHover: { f2Token: 'colorNeutralBackground1Hover' }, backgroundCtrlNeutralPressed: { f2Token: 'colorNeutralBackground1Pressed' }, backgroundCtrlNeutralRest: { f2Token: 'colorNeutralBackground1' }, - backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackground' }, - backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackground' }, + backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackgroundHover' }, + backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackgroundPressed' }, backgroundCtrlOutlineRest: { f2Token: 'colorTransparentBackground' }, backgroundCtrlShapeSafeNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, backgroundCtrlShapeSafeNeutralHover: { f2Token: 'colorNeutralStrokeAccessibleHover' }, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index c9d3fcd83e0188..4991cb8aa64792 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -49,6 +49,16 @@ export const colorNeutralBackground1Pressed = 'var(--colorNeutralBackground1Pres * @public */ export const colorNeutralBackground1 = 'var(--colorNeutralBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token. + * @public + */ +export const colorTransparentBackgroundHover = 'var(--colorTransparentBackgroundHover)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundPressed | `colorTransparentBackgroundPressed`} design token. + * @public + */ +export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackground | `colorTransparentBackground`} design token. * @public @@ -739,13 +749,3 @@ export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; * @public */ export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token. - * @public - */ -export const colorTransparentBackgroundHover = 'var(--colorTransparentBackgroundHover)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundPressed | `colorTransparentBackgroundPressed`} design token. - * @public - */ -export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; diff --git a/packages/semantic-tokens/src/nullable/tokens.ts b/packages/semantic-tokens/src/nullable/tokens.ts index 21acddcd0d1dcd..ee4ba36776825f 100644 --- a/packages/semantic-tokens/src/nullable/tokens.ts +++ b/packages/semantic-tokens/src/nullable/tokens.ts @@ -8,6 +8,8 @@ import { colorNeutralStroke1Pressed, colorNeutralStrokeDisabled, colorTransparentBackground, + colorTransparentBackgroundHover, + colorTransparentBackgroundPressed, colorSubtleBackground, } from '../legacy/tokens'; import { @@ -93,8 +95,8 @@ export const strokeCardOnSecondaryHover = `var(${strokeCardOnSecondaryHoverRaw}, export const strokeCardOnSecondaryPressed = `var(${strokeCardOnSecondaryPressedRaw}, unset)`; export const strokeCardOnSecondaryDisabled = `var(${strokeCardOnSecondaryDisabledRaw}, unset)`; export const backgroundCtrlOutlineRest = `var(${backgroundCtrlOutlineRestRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; -export const backgroundCtrlOutlineHover = `var(${backgroundCtrlOutlineHoverRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; -export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`; +export const backgroundCtrlOutlineHover = `var(${backgroundCtrlOutlineHoverRaw}, var(${nullColorRaw}, ${colorTransparentBackgroundHover}))`; +export const backgroundCtrlOutlinePressed = `var(${backgroundCtrlOutlinePressedRaw}, var(${nullColorRaw}, ${colorTransparentBackgroundPressed}))`; export const backgroundCtrlOutlineDisabled = `var(${backgroundCtrlOutlineDisabledRaw}, unset)`; export const backgroundCtrlSubtleRest = `var(${backgroundCtrlSubtleRestRaw}, var(${nullColorRaw}, ${colorSubtleBackground}))`; export const backgroundCtrlSubtleDisabled = `var(${backgroundCtrlSubtleDisabledRaw}, var(${nullColorRaw}, ${colorTransparentBackground}))`;