From c40b53cd64831a8ae2b292211b04bee2bcf39977 Mon Sep 17 00:00:00 2001 From: Mason Tejera Date: Tue, 15 Jul 2025 17:07:05 -0700 Subject: [PATCH 1/6] initial attempt --- .../library/package.json | 1 + .../src/component-styles/Tooltip/index.ts | 1 + .../useSemanticTooltipStyles.styles.ts | 49 +++ .../component-styles/semanticStyleHooks.ts | 3 + .../etc/semantic-tokens.api.md | 397 ++++-------------- .../src/components/tooltip/tokens.ts | 9 +- .../src/fluentLegacyVariants.ts | 16 + .../semantic-tokens/src/fluentOverrides.ts | 15 +- packages/semantic-tokens/src/index.ts | 4 + .../src/legacyVariant/tokens.ts | 28 ++ .../semantic-tokens/src/optional/tokens.ts | 4 +- 11 files changed, 194 insertions(+), 333 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts 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 cf9f329f97693..01d55a6def018 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-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", "@fluentui/react-toolbar": "^9.4.5", + "@fluentui/react-tooltip": "^9.6.6", "@fluentui/react-tree": "^9.10.9", "@fluentui/react-utilities": "^9.19.0", "@fluentui/semantic-tokens": "0.0.0-alpha.1", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts new file mode 100644 index 0000000000000..6aeb457bbf1cf --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts @@ -0,0 +1 @@ +export { useSemanticTooltipStyles } from './useSemanticTooltipStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts new file mode 100644 index 0000000000000..39d877f0977c9 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts @@ -0,0 +1,49 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { TooltipState } from '@fluentui/react-tooltip'; +import { tokens } from '@fluentui/react-theme'; + +const useStyles = makeStyles({ + root: { + borderRadius: semanticTokens.ctrlTooltipCorner, + + paddingTop: semanticTokens._ctrlTooltipPaddingTop, + paddingBottom: semanticTokens._ctrlTooltipPaddingBottom, + paddingLeft: semanticTokens._ctrlTooltipPaddingLeft, + paddingRight: semanticTokens._ctrlTooltipPaddingRight, + + backgroundColor: semanticTokens.ctrlTooltipBackground, + color: semanticTokens.ctrlTooltipForeground, + + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampMetadataFontSize, + lineHeight: semanticTokens.textRampMetadataLineHeight, + + filter: semanticTokens._ctrlTooltipShadow, + }, + + // Semantic-tokens does not include inverted tokens, use existing tokens for now. + inverted: { + backgroundColor: tokens.colorNeutralBackgroundStatic, + color: tokens.colorNeutralForegroundStaticInverted, + }, +}); + +export const useSemanticTooltipStyles = (_state: unknown): TooltipState => { + 'use no memo'; + + const state = _state as TooltipState; + + const styles = useStyles(); + const { appearance } = state; + + state.content.className = mergeClasses( + state.content.className, + appearance === 'inverted' && styles.inverted, + styles.root, + getSlotClassNameProp_unstable(state.content), + ); + + 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 9aead4e2d0f70..106d93f77ad80 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 @@ -79,6 +79,7 @@ import { useSemanticToolbarRadioButtonStyles, useSemanticToolbarToggleButtonStyles, } from './Toolbar'; +import { useSemanticTooltipStyles } from './Tooltip'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -145,6 +146,8 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Tabs styles useTabStyles_unstable: useSemanticTabStyles, useTabListStyles_unstable: useSemanticTabListStyles, + //Tooltip styles + useTooltipStyles_unstable: useSemanticTooltipStyles, // Slider styles useSliderStyles_unstable: useSemanticSliderStyles, // Menu styles diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index d8be2aa2fdbd3..6fbac161d6e2a 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -401,7 +401,7 @@ export const backgroundLayerTertiary = "var(--smtc-background-layer-tertiary, va export const backgroundLayerTertiaryRaw = "--smtc-background-layer-tertiary"; // @public (undocumented) -export const backgroundSmoke = "var(--smtc-background-smoke, var(--colorBackgroundOverlay))"; +export const backgroundSmoke = "var(--smtc-background-smoke)"; // @public (undocumented) export const backgroundSmokeRaw = "--smtc-background-smoke"; @@ -509,7 +509,7 @@ export const cornerCircular = "var(--smtc-corner-circular, var(--borderRadiusCir export const cornerCircularRaw = "--smtc-corner-circular"; // @public (undocumented) -export const cornerCtrlHover = "var(--smtc-corner-ctrl-hover, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; +export const cornerCtrlHover = "var(--smtc-corner-ctrl-hover, var(--smtc-corner-ctrl-rest))"; // @public (undocumented) export const cornerCtrlHoverRaw = "--smtc-corner-ctrl-hover"; @@ -533,7 +533,7 @@ export const cornerCtrlLgRest = "var(--smtc-corner-ctrl-lg-rest, var(--borderRad export const cornerCtrlLgRestRaw = "--smtc-corner-ctrl-lg-rest"; // @public (undocumented) -export const cornerCtrlPressed = "var(--smtc-corner-ctrl-pressed, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; +export const cornerCtrlPressed = "var(--smtc-corner-ctrl-pressed, var(--smtc-corner-ctrl-rest))"; // @public (undocumented) export const cornerCtrlPressedRaw = "--smtc-corner-ctrl-pressed"; @@ -1030,39 +1030,6 @@ export const ctrlCardStateRest = "var(--smtc-ctrl-card-state-rest)"; // @public (undocumented) export const ctrlCardStateRestRaw = "--smtc-ctrl-card-state-rest"; -// @public -export const _ctrlCheckboxBorderColorChecked = "var(--smtc-stroke-ctrl-on-active-brand-hover, var(--smtc-stroke-ctrl-on-brand-hover, var(--colorCompoundBrandBackground)))"; - -// @public -export const _ctrlCheckboxBorderColorCheckedHover = "var(--smtc-stroke-ctrl-on-active-brand-hover, var(--smtc-stroke-ctrl-on-brand-hover, var(--colorCompoundBrandBackgroundHover)))"; - -// @public -export const _ctrlCheckboxForegroundUnchecked = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground3)))"; - -// @public -export const _ctrlCheckboxForegroundUncheckedHover = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; - -// @public -export const _ctrlCheckboxIndicatorBorderColorCheckedPressed = "var(--smtc-stroke-ctrl-on-active-brand-pressed, var(--smtc-stroke-ctrl-on-brand-pressed, var(--colorCompoundBrandBackgroundPressed)))"; - -// @public -export const _ctrlCheckboxIndicatorBorderColorMixed = "var(--smtc-background-ctrl-active-brand-rest, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandStroke)))"; - -// @public -export const _ctrlCheckboxIndicatorBorderColorMixedHover = "var(--smtc-background-ctrl-active-brand-hover, var(--smtc-background-ctrl-brand-hover, var(--colorCompoundBrandStrokeHover)))"; - -// @public -export const _ctrlCheckboxIndicatorBorderColorMixedPressed = "var(--smtc-background-ctrl-active-brand-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorCompoundBrandStrokePressed)))"; - -// @public -export const _ctrlCheckboxIndicatorColorMixed = "var(--smtc-background-ctrl-active-brand-rest, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandForeground1)))"; - -// @public -export const _ctrlCheckboxIndicatorColorMixedHover = "var(--smtc-background-ctrl-active-brand-hover, var(--smtc-background-ctrl-brand-hover, var(--colorCompoundBrandForeground1Hover)))"; - -// @public -export const _ctrlCheckboxIndicatorColorMixedPressed = "var(--smtc-background-ctrl-active-brand-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorCompoundBrandForeground1Pressed)))"; - // @public (undocumented) export const ctrlChoiceBaseBackgroundDisabled = "var(--smtc-ctrl-choice-base-background-disabled, var(--smtc-background-ctrl-outline-disabled, var(--colorTransparentBackground)))"; @@ -1118,7 +1085,7 @@ export const ctrlChoiceBaseStrokeRest = "var(--smtc-ctrl-choice-base-stroke-rest export const ctrlChoiceBaseStrokeRestRaw = "--smtc-ctrl-choice-base-stroke-rest"; // @public (undocumented) -export const ctrlChoiceCheckboxCorner = "var(--smtc-ctrl-choice-checkbox-corner, var(--borderRadiusSmall))"; +export const ctrlChoiceCheckboxCorner = "var(--smtc-ctrl-choice-checkbox-corner)"; // @public (undocumented) export const ctrlChoiceCheckboxCornerRaw = "--smtc-ctrl-choice-checkbox-corner"; @@ -1232,7 +1199,7 @@ export const ctrlChoicePaddingVertical = "var(--smtc-ctrl-choice-padding-vertica export const ctrlChoicePaddingVerticalRaw = "--smtc-ctrl-choice-padding-vertical"; // @public (undocumented) -export const ctrlChoiceRadioCorner = "var(--smtc-ctrl-choice-radio-corner, var(--smtc-corner-circular, var(--borderRadiusCircular)))"; +export const ctrlChoiceRadioCorner = "var(--smtc-ctrl-choice-radio-corner, var(--smtc-corner-circular))"; // @public (undocumented) export const ctrlChoiceRadioCornerRaw = "--smtc-ctrl-choice-radio-corner"; @@ -1250,7 +1217,7 @@ export const ctrlChoiceRadioDotSizePressed = "var(--smtc-ctrl-choice-radio-dot-s export const ctrlChoiceRadioDotSizePressedRaw = "--smtc-ctrl-choice-radio-dot-size-pressed"; // @public (undocumented) -export const ctrlChoiceRadioDotSizeRest = "var(--smtc-ctrl-choice-radio-dot-size-rest, 16px)"; +export const ctrlChoiceRadioDotSizeRest = "var(--smtc-ctrl-choice-radio-dot-size-rest)"; // @public (undocumented) export const ctrlChoiceRadioDotSizeRestRaw = "--smtc-ctrl-choice-radio-dot-size-rest"; @@ -1574,22 +1541,19 @@ export const ctrlDialogBackground = "var(--smtc-ctrl-dialog-background)"; export const ctrlDialogBackgroundRaw = "--smtc-ctrl-dialog-background"; // @public (undocumented) -export const ctrlDialogBaseCorner = "var(--smtc-ctrl-dialog-base-corner, var(--smtc-corner-card-rest, var(--borderRadiusXLarge)))"; +export const ctrlDialogBaseCorner = "var(--smtc-ctrl-dialog-base-corner, var(--smtc-corner-card-rest))"; // @public (undocumented) export const ctrlDialogBaseCornerRaw = "--smtc-ctrl-dialog-base-corner"; // @public (undocumented) -export const ctrlDialogBaseShadow = "var(--smtc-ctrl-dialog-base-shadow, var(--shadow64))"; +export const ctrlDialogBaseShadow = "var(--smtc-ctrl-dialog-base-shadow)"; // @public (undocumented) export const ctrlDialogBaseShadowRaw = "--smtc-ctrl-dialog-base-shadow"; -// @public -export const _ctrlDialogGapBetweenContentMedium = "var(--smtc-gap-between-content-medium, 8px)"; - // @public (undocumented) -export const ctrlDialogLayerBackground = "var(--smtc-ctrl-dialog-layer-background, var(--smtc-background-layer-primary-solid, var(--colorNeutralBackground1)))"; +export const ctrlDialogLayerBackground = "var(--smtc-ctrl-dialog-layer-background, var(--smtc-background-layer-primary-solid))"; // @public (undocumented) export const ctrlDialogLayerBackgroundRaw = "--smtc-ctrl-dialog-layer-background"; @@ -1601,7 +1565,7 @@ export const ctrlDialogLayerPaddingBottom = "var(--smtc-ctrl-dialog-layer-paddin export const ctrlDialogLayerPaddingBottomRaw = "--smtc-ctrl-dialog-layer-padding-bottom"; // @public (undocumented) -export const ctrlDialogStroke = "var(--smtc-ctrl-dialog-stroke, var(--smtc-null-color, var(--colorNeutralStroke2)))"; +export const ctrlDialogStroke = "var(--smtc-ctrl-dialog-stroke, unset)"; // @public (undocumented) export const ctrlDialogStrokeRaw = "--smtc-ctrl-dialog-stroke"; @@ -2050,15 +2014,6 @@ export const ctrlLinkOnPageUnderlineDashed = "var(--smtc-ctrl-link-on-page-under // @public (undocumented) export const ctrlLinkOnPageUnderlineDashedRaw = "--smtc-ctrl-link-on-page-underline-dashed"; -// @public -export const _ctrlListBackgroundColorHover = "var(--smtc-background-ctrl-subtle-hover, var(--colorTransparentBackground))"; - -// @public -export const _ctrlListBackgroundColorPressed = "var(--smtc-background-ctrl-subtle-pressed, var(--colorTransparentBackground))"; - -// @public -export const _ctrlListBackgroundColorRest = "var(--smtc-background-ctrl-subtle-rest, var(--smtc-null-color, var(--colorTransparentBackground)))"; - // @public (undocumented) export const ctrlListBackgroundSelectedDisabled = "var(--smtc-ctrl-list-background-selected-disabled, var(--smtc-background-ctrl-subtle-disabled))"; @@ -2168,7 +2123,7 @@ export const ctrlListChoiceStrokeSelectedRest = "var(--smtc-ctrl-list-choice-str export const ctrlListChoiceStrokeSelectedRestRaw = "--smtc-ctrl-list-choice-stroke-selected-rest"; // @public (undocumented) -export const ctrlListCornerHover = "var(--smtc-ctrl-list-corner-hover, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; +export const ctrlListCornerHover = "var(--smtc-ctrl-list-corner-hover, var(--smtc-corner-ctrl-rest))"; // @public (undocumented) export const ctrlListCornerHoverRaw = "--smtc-ctrl-list-corner-hover"; @@ -2185,15 +2140,6 @@ export const ctrlListCornerRest = "var(--smtc-ctrl-list-corner-rest, var(--smtc- // @public (undocumented) export const ctrlListCornerRestRaw = "--smtc-ctrl-list-corner-rest"; -// @public -export const _ctrlListForegroundColorHover = "var(--smtc-foreground-ctrl-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-hover, var(--colorNeutralForeground1)))"; - -// @public -export const _ctrlListForegroundColorPressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--colorNeutralForeground1)))"; - -// @public -export const _ctrlListForegroundColorRest = "var(--smtc-foreground-ctrl-on-subtle-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground1)))"; - // @public (undocumented) export const ctrlListForegroundSelectedDisabled = "var(--smtc-ctrl-list-foreground-selected-disabled, var(--smtc-background-ctrl-subtle-disabled))"; @@ -2236,9 +2182,6 @@ export const ctrlListIndentLevel3 = "var(--smtc-ctrl-list-indent-level3)"; // @public (undocumented) export const ctrlListIndentLevel3Raw = "--smtc-ctrl-list-indent-level3"; -// @public -export const _ctrlListItemStroke = "var(--smtc-stroke-width-ctrl-outline-rest, var(--smtc-stroke-width-default, var(--colorStrokeFocus2)))"; - // @public (undocumented) export const ctrlListLgCornerHover = "var(--smtc-ctrl-list-lg-corner-hover, var(--smtc-corner-ctrl-lg-rest))"; @@ -2318,7 +2261,7 @@ export const ctrlListPillStretchPaddingHint = "var(--smtc-ctrl-list-pill-stretch export const ctrlListPillStretchPaddingHintRaw = "--smtc-ctrl-list-pill-stretch-padding-hint"; // @public (undocumented) -export const ctrlListPillWidth = "var(--smtc-ctrl-list-pill-width, var(--strokeWidthThicker))"; +export const ctrlListPillWidth = "var(--smtc-ctrl-list-pill-width)"; // @public (undocumented) export const ctrlListPillWidthRaw = "--smtc-ctrl-list-pill-width"; @@ -2407,84 +2350,6 @@ export const ctrlLiteFilterStrokeWidthSelected = "var(--smtc-ctrl-lite-filter-st // @public (undocumented) export const ctrlLiteFilterStrokeWidthSelectedRaw = "--smtc-ctrl-lite-filter-stroke-width-selected"; -// @public -export const _ctrlMenuGroupHeaderColor = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3))"; - -// @public -export const _ctrlMenuGroupHeaderFontWeight = "var(--smtc-text-style-default-regular-weight, var(--fontWeightSemibold))"; - -// @public -export const _ctrlMenuGroupHeaderHeight = "var(--smtc-size-ctrl-default, 32px)"; - -// @public -export const _ctrlMenuGroupHeaderPaddingHorizontal = "var(--smtc-padding-ctrl-horizontal-default, 8px)"; - -// @public -export const _ctrlMenuItemContentPaddingX = "var(--smtc-padding-ctrl-text-side, 2px)"; - -// @public -export const _ctrlMenuItemGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, 4px)"; - -// @public -export const _ctrlMenuItemPaddingBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge)))"; - -// @public -export const _ctrlMenuItemPaddingTop = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalSNudge))"; - -// @public -export const _ctrlMenuItemPaddingX = "var(--smtc-ctrl-list-indent-level1, var(--smtc-padding-ctrl-horizontal-default, var(--spacingVerticalSNudge)))"; - -// @public -export const _ctrlMenuItemSecondaryContentFontSize = "var(--smtc-text-ramp-item-body-font-size, var(--smtc-text-global-body3-font-size, var(--fontSizeBase200)))"; - -// @public -export const _ctrlMenuItemSecondaryContentForegroundHover = "var(--smtc-foreground-ctrl-neutral-secondary-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3Hover)))"; - -// @public -export const _ctrlMenuItemSecondaryContentForegroundRest = "var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3))"; - -// @public -export const _ctrlMenuItemSizeDefault = "var(--smtc-size-ctrl-default, 32px)"; - -// @public -export const _ctrlMenuItemSubTextForegroundHover = "var(--smtc-foreground-ctrl-neutral-secondary-hover, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3Hover)))"; - -// @public -export const _ctrlMenuItemSubTextForegroundPressed = "var(--smtc-foreground-ctrl-neutral-secondary-pressed, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3Pressed)))"; - -// @public -export const _ctrlMenuPopoverCornerFlyoutRest = "var(--smtc-corner-flyout-rest, var(--borderRadiusMedium))"; - -// @public -export const _ctrlMenuPopoverShadowFlyout = "var(--smtc-shadow-flyout, var(--shadow16))"; - -// @public -export const _ctrlMenuPopoverStrokeFlyout = "var(--smtc-stroke-flyout, var(--smtc-null-color, var(--colorTransparentStroke)))"; - -// @public -export const _ctrlMessageBarActionsMultilinePaddingRight = "var(--smtc-padding-content-align-default, var(--spacingVerticalM))"; - -// @public -export const _ctrlMessageBarErrorIconColor = "var(--smtc-status-danger-tint-foreground, var(--colorStatusDangerForeground1))"; - -// @public -export const _ctrlMessageBarGapBetweenCtrl = "var(--smtc-gap-between-ctrl-default, var(--spacingHorizontalM))"; - -// @public -export const _ctrlMessageBarPaddingContentAlignDefault = "var(--smtc-padding-content-align-default, 12px)"; - -// @public -export const _ctrlMessageBarPaddingVertical = "var(--smtc-padding-content-align-outdent-icon-on-subtle, 0px)"; - -// @public -export const _ctrlMessageBarReflowSpacerMarginBottom = "var(--smtc-padding-content-align-default, var(--spacingVerticalS))"; - -// @public -export const _ctrlMessageBarSpacingTop = "var(--smtc-padding-content-align-default, var(--spacingVerticalMNudge))"; - -// @public -export const _ctrlMessageBarTitleLineHeight = "var(--smtc-text-ramp-item-header-line-height, var(--smtc-text-global-body2-line-height, var(--lineHeightBase300)))"; - // @public export const _ctrlPersonaTreeIconOnSubtlePressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--colorNeutralForeground3Pressed)))"; @@ -2542,66 +2407,6 @@ export const ctrlProgressSmHeightFilled = "var(--smtc-ctrl-progress-sm-height-fi // @public (undocumented) export const ctrlProgressSmHeightFilledRaw = "--smtc-ctrl-progress-sm-height-filled"; -// @public -export const _ctrlRadioBackgroundActiveBrandHover = "var(--smtc-background-ctrl-active-brand-hover, var(--smtc-background-ctrl-brand-hover, var(--colorTransparentBackground)))"; - -// @public -export const _ctrlRadioBackgroundActiveBrandPressed = "var(--smtc-background-ctrl-active-brand-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorTransparentBackground)))"; - -// @public -export const _ctrlRadioBackgroundActiveBrandRest = "var(--smtc-background-ctrl-active-brand-rest, var(--smtc-background-ctrl-brand-rest, var(--colorTransparentBackground)))"; - -// @public -export const _ctrlRadioBackgroundActiveDisabled = "var(--smtc-background-ctrl-active-brand-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorTransparentBackground)))"; - -// @public -export const _ctrlRadioBaseBackgroundDisabled = "var(--smtc-ctrl-choice-base-background-disabled, var(--smtc-background-ctrl-outline-disabled, var(--colorTransparentBackground)))"; - -// @public -export const _ctrlRadioBaseBackgroundHover = "var(--smtc-ctrl-choice-base-background-hover, var(--smtc-background-ctrl-outline-hover, var(--colorTransparentBackground)))"; - -// @public -export const _ctrlRadioBaseBackgroundPressed = "var(--smtc-ctrl-choice-base-background-pressed, var(--smtc-background-ctrl-outline-pressed, var(--colorTransparentBackground)))"; - -// @public -export const _ctrlRadioChoiceBaseSize = "var(--smtc-ctrl-choice-base-size, var(--smtc-size-ctrl-icon, 16px))"; - -// @public -export const _ctrlRadioForegroundContentDisabled = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForegroundDisabled)))"; - -// @public -export const _ctrlRadioForegroundContentNeutralHover = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2)))"; - -// @public -export const _ctrlRadioForegroundContentNeutralRest = "var(--smtc-foreground-content-neutral-primary, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground3)))"; - -// @public -export const _ctrlRadioForegroundOnActiveBrandHover = "var(--smtc-foreground-ctrl-on-active-brand-hover, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandForeground1Hover)))"; - -// @public -export const _ctrlRadioForegroundOnActiveBrandPressed = "var(--smtc-foreground-ctrl-on-active-brand-pressed, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandForeground1Pressed)))"; - -// @public -export const _ctrlRadioForegroundOnActiveBrandRest = "var(--smtc-foreground-ctrl-on-active-brand-rest, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandForeground1)))"; - -// @public -export const _ctrlRadioForegroundOnActiveDisabled = "var(--smtc-foreground-ctrl-on-active-brand-disabled, var(--smtc-foreground-ctrl-on-brand-disabled, var(--colorNeutralForegroundDisabled)))"; - -// @public -export const _ctrlRadioPaddingTextTop = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalXS))"; - -// @public -export const _ctrlRadioPaddingVertical = "var(--smtc-padding-ctrl-text-top, var(--spacingVerticalS))"; - -// @public -export const _ctrlRadioStrokeOnActiveBrandHover = "var(--smtc-stroke-ctrl-on-active-brand-hover, var(--smtc-stroke-ctrl-on-brand-hover, var(--colorCompoundBrandStrokeHover)))"; - -// @public -export const _ctrlRadioStrokeOnActiveBrandPressed = "var(--smtc-stroke-ctrl-on-active-brand-pressed, var(--smtc-stroke-ctrl-on-brand-pressed, var(--colorCompoundBrandStrokePressed)))"; - -// @public -export const _ctrlRadioStrokeOnActiveBrandRest = "var(--smtc-stroke-ctrl-on-active-brand-rest, var(--smtc-stroke-ctrl-on-brand-rest, var(--colorCompoundBrandStroke)))"; - // @public (undocumented) export const ctrlRatingIconForegroundEmpty = "var(--smtc-ctrl-rating-icon-foreground-empty, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralBackground6)))"; @@ -2849,68 +2654,65 @@ export const ctrlSegmentedStrokeRest = "var(--smtc-ctrl-segmented-stroke-rest, v export const ctrlSegmentedStrokeRestRaw = "--smtc-ctrl-segmented-stroke-rest"; // @public (undocumented) -export const ctrlSliderBarCorner = "var(--smtc-ctrl-slider-bar-corner, var(--smtc-corner-circular, var(--borderRadiusXLarge)))"; +export const ctrlSliderBarCorner = "var(--smtc-ctrl-slider-bar-corner, var(--smtc-corner-circular))"; // @public (undocumented) export const ctrlSliderBarCornerRaw = "--smtc-ctrl-slider-bar-corner"; // @public (undocumented) -export const ctrlSliderBarForegroundEmptyDisabled = "var(--smtc-ctrl-slider-bar-foreground-empty-disabled, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralBackgroundDisabled)))"; +export const ctrlSliderBarForegroundEmptyDisabled = "var(--smtc-ctrl-slider-bar-foreground-empty-disabled, var(--smtc-ctrl-progress-background-empty))"; // @public (undocumented) export const ctrlSliderBarForegroundEmptyDisabledRaw = "--smtc-ctrl-slider-bar-foreground-empty-disabled"; // @public (undocumented) -export const ctrlSliderBarForegroundEmptyHover = "var(--smtc-ctrl-slider-bar-foreground-empty-hover, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralStrokeAccessible)))"; +export const ctrlSliderBarForegroundEmptyHover = "var(--smtc-ctrl-slider-bar-foreground-empty-hover, var(--smtc-ctrl-progress-background-empty))"; // @public (undocumented) export const ctrlSliderBarForegroundEmptyHoverRaw = "--smtc-ctrl-slider-bar-foreground-empty-hover"; // @public (undocumented) -export const ctrlSliderBarForegroundEmptyPressed = "var(--smtc-ctrl-slider-bar-foreground-empty-pressed, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralStrokeAccessible)))"; +export const ctrlSliderBarForegroundEmptyPressed = "var(--smtc-ctrl-slider-bar-foreground-empty-pressed, var(--smtc-ctrl-progress-background-empty))"; // @public (undocumented) export const ctrlSliderBarForegroundEmptyPressedRaw = "--smtc-ctrl-slider-bar-foreground-empty-pressed"; // @public (undocumented) -export const ctrlSliderBarForegroundEmptyRest = "var(--smtc-ctrl-slider-bar-foreground-empty-rest, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralStrokeAccessible)))"; +export const ctrlSliderBarForegroundEmptyRest = "var(--smtc-ctrl-slider-bar-foreground-empty-rest, var(--smtc-ctrl-progress-background-empty))"; // @public (undocumented) export const ctrlSliderBarForegroundEmptyRestRaw = "--smtc-ctrl-slider-bar-foreground-empty-rest"; // @public (undocumented) -export const ctrlSliderBarForegroundFilledDisabled = "var(--smtc-ctrl-slider-bar-foreground-filled-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorNeutralForegroundDisabled)))"; +export const ctrlSliderBarForegroundFilledDisabled = "var(--smtc-ctrl-slider-bar-foreground-filled-disabled, var(--smtc-background-ctrl-brand-disabled))"; // @public (undocumented) export const ctrlSliderBarForegroundFilledDisabledRaw = "--smtc-ctrl-slider-bar-foreground-filled-disabled"; // @public (undocumented) -export const ctrlSliderBarForegroundFilledHover = "var(--smtc-ctrl-slider-bar-foreground-filled-hover, var(--smtc-background-ctrl-brand-hover, var(--colorCompoundBrandBackgroundHover)))"; +export const ctrlSliderBarForegroundFilledHover = "var(--smtc-ctrl-slider-bar-foreground-filled-hover, var(--smtc-background-ctrl-brand-hover))"; // @public (undocumented) export const ctrlSliderBarForegroundFilledHoverRaw = "--smtc-ctrl-slider-bar-foreground-filled-hover"; // @public (undocumented) -export const ctrlSliderBarForegroundFilledPressed = "var(--smtc-ctrl-slider-bar-foreground-filled-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorCompoundBrandBackgroundPressed)))"; +export const ctrlSliderBarForegroundFilledPressed = "var(--smtc-ctrl-slider-bar-foreground-filled-pressed, var(--smtc-background-ctrl-brand-pressed))"; // @public (undocumented) export const ctrlSliderBarForegroundFilledPressedRaw = "--smtc-ctrl-slider-bar-foreground-filled-pressed"; // @public (undocumented) -export const ctrlSliderBarForegroundFilledRest = "var(--smtc-ctrl-slider-bar-foreground-filled-rest, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandBackground)))"; +export const ctrlSliderBarForegroundFilledRest = "var(--smtc-ctrl-slider-bar-foreground-filled-rest, var(--smtc-background-ctrl-brand-rest))"; // @public (undocumented) export const ctrlSliderBarForegroundFilledRestRaw = "--smtc-ctrl-slider-bar-foreground-filled-rest"; // @public (undocumented) -export const ctrlSliderBarHeight = "var(--smtc-ctrl-slider-bar-height, var(--smtc-ctrl-progress-height-filled, 4px))"; +export const ctrlSliderBarHeight = "var(--smtc-ctrl-slider-bar-height, var(--smtc-ctrl-progress-height-filled))"; // @public (undocumented) export const ctrlSliderBarHeightRaw = "--smtc-ctrl-slider-bar-height"; -// @public -export const _ctrlSliderBarSizeDefault = "var(--smtc-size-ctrl-default, 32px)"; - // @public (undocumented) export const ctrlSliderLgBarHeight = "var(--smtc-ctrl-slider-lg-bar-height, var(--smtc-ctrl-progress-lg-height-filled))"; @@ -2935,89 +2737,80 @@ export const ctrlSliderLgThumbSizeRest = "var(--smtc-ctrl-slider-lg-thumb-size-r // @public (undocumented) export const ctrlSliderLgThumbSizeRestRaw = "--smtc-ctrl-slider-lg-thumb-size-rest"; -// @public -export const _ctrlSliderPaddingDefault = "var(--smtc-padding-ctrl-horizontal-default, 10px)"; - // @public (undocumented) -export const ctrlSliderSmBarHeight = "var(--smtc-ctrl-slider-sm-bar-height, var(--smtc-ctrl-progress-sm-height-filled, 2px))"; +export const ctrlSliderSmBarHeight = "var(--smtc-ctrl-slider-sm-bar-height, var(--smtc-ctrl-progress-sm-height-filled))"; // @public (undocumented) export const ctrlSliderSmBarHeightRaw = "--smtc-ctrl-slider-sm-bar-height"; -// @public -export const _ctrlSliderSmBarSizeDefault = "var(--smtc-size-ctrl-default, 24px)"; - -// @public -export const _ctrlSliderSmPaddingDefault = "var(--smtc-padding-ctrl-horizontal-default, 8px)"; - // @public (undocumented) -export const ctrlSliderSmThumbSizeHover = "var(--smtc-ctrl-slider-sm-thumb-size-hover, var(--smtc-size-ctrl-sm-icon, 16px))"; +export const ctrlSliderSmThumbSizeHover = "var(--smtc-ctrl-slider-sm-thumb-size-hover, var(--smtc-size-ctrl-sm-icon))"; // @public (undocumented) export const ctrlSliderSmThumbSizeHoverRaw = "--smtc-ctrl-slider-sm-thumb-size-hover"; // @public (undocumented) -export const ctrlSliderSmThumbSizePressed = "var(--smtc-ctrl-slider-sm-thumb-size-pressed, var(--smtc-size-ctrl-sm-icon, 16px))"; +export const ctrlSliderSmThumbSizePressed = "var(--smtc-ctrl-slider-sm-thumb-size-pressed, var(--smtc-size-ctrl-sm-icon))"; // @public (undocumented) export const ctrlSliderSmThumbSizePressedRaw = "--smtc-ctrl-slider-sm-thumb-size-pressed"; // @public (undocumented) -export const ctrlSliderSmThumbSizeRest = "var(--smtc-ctrl-slider-sm-thumb-size-rest, var(--smtc-size-ctrl-sm-icon, 16px))"; +export const ctrlSliderSmThumbSizeRest = "var(--smtc-ctrl-slider-sm-thumb-size-rest, var(--smtc-size-ctrl-sm-icon))"; // @public (undocumented) export const ctrlSliderSmThumbSizeRestRaw = "--smtc-ctrl-slider-sm-thumb-size-rest"; // @public (undocumented) -export const ctrlSliderThumbBackgroundDisabled = "var(--smtc-ctrl-slider-thumb-background-disabled, var(--smtc-foreground-ctrl-on-brand-disabled, var(--colorNeutralForegroundDisabled)))"; +export const ctrlSliderThumbBackgroundDisabled = "var(--smtc-ctrl-slider-thumb-background-disabled, var(--smtc-foreground-ctrl-on-brand-disabled))"; // @public (undocumented) export const ctrlSliderThumbBackgroundDisabledRaw = "--smtc-ctrl-slider-thumb-background-disabled"; // @public (undocumented) -export const ctrlSliderThumbBackgroundHover = "var(--smtc-ctrl-slider-thumb-background-hover, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandBackgroundHover)))"; +export const ctrlSliderThumbBackgroundHover = "var(--smtc-ctrl-slider-thumb-background-hover, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) export const ctrlSliderThumbBackgroundHoverRaw = "--smtc-ctrl-slider-thumb-background-hover"; // @public (undocumented) -export const ctrlSliderThumbBackgroundPressed = "var(--smtc-ctrl-slider-thumb-background-pressed, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandBackgroundPressed)))"; +export const ctrlSliderThumbBackgroundPressed = "var(--smtc-ctrl-slider-thumb-background-pressed, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) export const ctrlSliderThumbBackgroundPressedRaw = "--smtc-ctrl-slider-thumb-background-pressed"; // @public (undocumented) -export const ctrlSliderThumbBackgroundRest = "var(--smtc-ctrl-slider-thumb-background-rest, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorCompoundBrandBackground)))"; +export const ctrlSliderThumbBackgroundRest = "var(--smtc-ctrl-slider-thumb-background-rest, var(--smtc-foreground-ctrl-on-brand-rest))"; // @public (undocumented) export const ctrlSliderThumbBackgroundRestRaw = "--smtc-ctrl-slider-thumb-background-rest"; // @public (undocumented) -export const ctrlSliderThumbCorner = "var(--smtc-ctrl-slider-thumb-corner, var(--smtc-corner-circular, var(--borderRadiusCircular)))"; +export const ctrlSliderThumbCorner = "var(--smtc-ctrl-slider-thumb-corner, var(--smtc-corner-circular))"; // @public (undocumented) export const ctrlSliderThumbCornerRaw = "--smtc-ctrl-slider-thumb-corner"; // @public (undocumented) -export const ctrlSliderThumbInnerStrokeDisabled = "var(--smtc-ctrl-slider-thumb-inner-stroke-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorNeutralBackground1)))"; +export const ctrlSliderThumbInnerStrokeDisabled = "var(--smtc-ctrl-slider-thumb-inner-stroke-disabled, var(--smtc-background-ctrl-brand-disabled))"; // @public (undocumented) export const ctrlSliderThumbInnerStrokeDisabledRaw = "--smtc-ctrl-slider-thumb-inner-stroke-disabled"; // @public (undocumented) -export const ctrlSliderThumbInnerStrokeHover = "var(--smtc-ctrl-slider-thumb-inner-stroke-hover, var(--smtc-background-ctrl-brand-hover, var(--colorNeutralBackground1)))"; +export const ctrlSliderThumbInnerStrokeHover = "var(--smtc-ctrl-slider-thumb-inner-stroke-hover, var(--smtc-background-ctrl-brand-hover))"; // @public (undocumented) export const ctrlSliderThumbInnerStrokeHoverRaw = "--smtc-ctrl-slider-thumb-inner-stroke-hover"; // @public (undocumented) -export const ctrlSliderThumbInnerStrokePressed = "var(--smtc-ctrl-slider-thumb-inner-stroke-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorNeutralBackground1)))"; +export const ctrlSliderThumbInnerStrokePressed = "var(--smtc-ctrl-slider-thumb-inner-stroke-pressed, var(--smtc-background-ctrl-brand-pressed))"; // @public (undocumented) export const ctrlSliderThumbInnerStrokePressedRaw = "--smtc-ctrl-slider-thumb-inner-stroke-pressed"; // @public (undocumented) -export const ctrlSliderThumbInnerStrokeRest = "var(--smtc-ctrl-slider-thumb-inner-stroke-rest, var(--smtc-background-ctrl-brand-rest, var(--colorNeutralBackground1)))"; +export const ctrlSliderThumbInnerStrokeRest = "var(--smtc-ctrl-slider-thumb-inner-stroke-rest, var(--smtc-background-ctrl-brand-rest))"; // @public (undocumented) export const ctrlSliderThumbInnerStrokeRestRaw = "--smtc-ctrl-slider-thumb-inner-stroke-rest"; @@ -3041,25 +2834,25 @@ export const ctrlSliderThumbInnerStrokeWidthRest = "var(--smtc-ctrl-slider-thumb export const ctrlSliderThumbInnerStrokeWidthRestRaw = "--smtc-ctrl-slider-thumb-inner-stroke-width-rest"; // @public (undocumented) -export const ctrlSliderThumbOuterStrokeDisabled = "var(--smtc-ctrl-slider-thumb-outer-stroke-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorNeutralForegroundDisabled)))"; +export const ctrlSliderThumbOuterStrokeDisabled = "var(--smtc-ctrl-slider-thumb-outer-stroke-disabled, var(--smtc-background-ctrl-brand-disabled))"; // @public (undocumented) export const ctrlSliderThumbOuterStrokeDisabledRaw = "--smtc-ctrl-slider-thumb-outer-stroke-disabled"; // @public (undocumented) -export const ctrlSliderThumbOuterStrokeHover = "var(--smtc-ctrl-slider-thumb-outer-stroke-hover, var(--smtc-background-ctrl-brand-hover, var(--colorNeutralStroke1)))"; +export const ctrlSliderThumbOuterStrokeHover = "var(--smtc-ctrl-slider-thumb-outer-stroke-hover, var(--smtc-background-ctrl-brand-hover))"; // @public (undocumented) export const ctrlSliderThumbOuterStrokeHoverRaw = "--smtc-ctrl-slider-thumb-outer-stroke-hover"; // @public (undocumented) -export const ctrlSliderThumbOuterStrokePressed = "var(--smtc-ctrl-slider-thumb-outer-stroke-pressed, var(--smtc-background-ctrl-brand-pressed, var(--colorNeutralStroke1)))"; +export const ctrlSliderThumbOuterStrokePressed = "var(--smtc-ctrl-slider-thumb-outer-stroke-pressed, var(--smtc-background-ctrl-brand-pressed))"; // @public (undocumented) export const ctrlSliderThumbOuterStrokePressedRaw = "--smtc-ctrl-slider-thumb-outer-stroke-pressed"; // @public (undocumented) -export const ctrlSliderThumbOuterStrokeRest = "var(--smtc-ctrl-slider-thumb-outer-stroke-rest, var(--smtc-background-ctrl-brand-rest, var(--colorNeutralStroke1)))"; +export const ctrlSliderThumbOuterStrokeRest = "var(--smtc-ctrl-slider-thumb-outer-stroke-rest, var(--smtc-background-ctrl-brand-rest))"; // @public (undocumented) export const ctrlSliderThumbOuterStrokeRestRaw = "--smtc-ctrl-slider-thumb-outer-stroke-rest"; @@ -3071,19 +2864,19 @@ export const ctrlSliderThumbOuterStrokeWidth = "var(--smtc-ctrl-slider-thumb-out export const ctrlSliderThumbOuterStrokeWidthRaw = "--smtc-ctrl-slider-thumb-outer-stroke-width"; // @public (undocumented) -export const ctrlSliderThumbSizeHover = "var(--smtc-ctrl-slider-thumb-size-hover, var(--smtc-size-ctrl-icon, 20px))"; +export const ctrlSliderThumbSizeHover = "var(--smtc-ctrl-slider-thumb-size-hover, var(--smtc-size-ctrl-icon))"; // @public (undocumented) export const ctrlSliderThumbSizeHoverRaw = "--smtc-ctrl-slider-thumb-size-hover"; // @public (undocumented) -export const ctrlSliderThumbSizePressed = "var(--smtc-ctrl-slider-thumb-size-pressed, var(--smtc-size-ctrl-icon, 20px))"; +export const ctrlSliderThumbSizePressed = "var(--smtc-ctrl-slider-thumb-size-pressed, var(--smtc-size-ctrl-icon))"; // @public (undocumented) export const ctrlSliderThumbSizePressedRaw = "--smtc-ctrl-slider-thumb-size-pressed"; // @public (undocumented) -export const ctrlSliderThumbSizeRest = "var(--smtc-ctrl-slider-thumb-size-rest, var(--smtc-size-ctrl-icon, 20px))"; +export const ctrlSliderThumbSizeRest = "var(--smtc-ctrl-slider-thumb-size-rest, var(--smtc-size-ctrl-icon))"; // @public (undocumented) export const ctrlSliderThumbSizeRestRaw = "--smtc-ctrl-slider-thumb-size-rest"; @@ -3181,48 +2974,6 @@ export const _ctrlSwitchStrokeOnActiveBrandHover = "var(--smtc-stroke-ctrl-on-ac // @public export const _ctrlSwitchStrokeOnActiveBrandRest = "var(--smtc-stroke-ctrl-on-active-brand-rest, var(--smtc-stroke-ctrl-on-brand-rest, var(--colorTransparentStroke)))"; -// @public -export const _ctrlTabBackgroundActiveBrandDisabled = "var(--smtc-background-ctrl-active-brand-disabled, var(--smtc-background-ctrl-brand-disabled, var(--colorNeutralForegroundDisabled)))"; - -// @public -export const _ctrlTabForegroundActiveBrandHover = "var(--smtc-foreground-ctrl-active-brand-hover, var(--smtc-foreground-ctrl-brand-hover, var(--colorNeutralForeground1Hover)))"; - -// @public -export const _ctrlTabForegroundActiveBrandPressed = "var(--smtc-foreground-ctrl-active-brand-pressed, var(--smtc-foreground-ctrl-brand-pressed, var(--colorNeutralForeground1Pressed)))"; - -// @public -export const _ctrlTabForegroundActiveBrandRest = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorNeutralForeground1)))"; - -// @public -export const _ctrlTabForegroundOnSubtleHover = "var(--smtc-foreground-ctrl-icon-on-subtle-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Hover)))"; - -// @public -export const _ctrlTabForegroundOnSubtlePressed = "var(--smtc-foreground-ctrl-icon-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Pressed)))"; - -// @public -export const _ctrlTabForegroundOnTransparentHover = "var(--smtc-foreground-ctrl-on-transparent-hover, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Hover)))"; - -// @public -export const _ctrlTabForegroundOnTransparentPressed = "var(--smtc-foreground-ctrl-on-transparent-pressed, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground2Pressed)))"; - -// @public -export const _ctrlTabGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalSNudge))"; - -// @public -export const _ctrlTabPaddingHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalMNudge))"; - -// @public -export const _ctrlTabPaddingTextSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXXS))"; - -// @public -export const _ctrlTabSizeDefault = "var(--smtc-size-ctrl-default, 32px)"; - -// @public -export const _ctrlTabSmGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalXXS))"; - -// @public -export const _ctrlTabSmPaddingHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalSNudge))"; - // @public (undocumented) export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background)"; @@ -3302,19 +3053,19 @@ export const foregroundCtrlActiveBrandDisabled = "var(--smtc-foreground-ctrl-act export const foregroundCtrlActiveBrandDisabledRaw = "--smtc-foreground-ctrl-active-brand-disabled"; // @public (undocumented) -export const foregroundCtrlActiveBrandHover = "var(--smtc-foreground-ctrl-active-brand-hover, var(--smtc-foreground-ctrl-brand-hover, var(--colorCompoundBrandForeground1Hover)))"; +export const foregroundCtrlActiveBrandHover = "var(--smtc-foreground-ctrl-active-brand-hover, var(--smtc-foreground-ctrl-brand-hover))"; // @public (undocumented) export const foregroundCtrlActiveBrandHoverRaw = "--smtc-foreground-ctrl-active-brand-hover"; // @public (undocumented) -export const foregroundCtrlActiveBrandPressed = "var(--smtc-foreground-ctrl-active-brand-pressed, var(--smtc-foreground-ctrl-brand-pressed, var(--colorCompoundBrandForeground1Pressed)))"; +export const foregroundCtrlActiveBrandPressed = "var(--smtc-foreground-ctrl-active-brand-pressed, var(--smtc-foreground-ctrl-brand-pressed))"; // @public (undocumented) export const foregroundCtrlActiveBrandPressedRaw = "--smtc-foreground-ctrl-active-brand-pressed"; // @public (undocumented) -export const foregroundCtrlActiveBrandRest = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorCompoundBrandForeground1)))"; +export const foregroundCtrlActiveBrandRest = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest))"; // @public (undocumented) export const foregroundCtrlActiveBrandRestRaw = "--smtc-foreground-ctrl-active-brand-rest"; @@ -3368,7 +3119,7 @@ export const foregroundCtrlIconOnNeutralPressed = "var(--smtc-foreground-ctrl-ic export const foregroundCtrlIconOnNeutralPressedRaw = "--smtc-foreground-ctrl-icon-on-neutral-pressed"; // @public (undocumented) -export const foregroundCtrlIconOnNeutralRest = "var(--smtc-foreground-ctrl-icon-on-neutral-rest, var(--smtc-foreground-ctrl-neutral-primary-rest, var(--colorNeutralForeground3)))"; +export const foregroundCtrlIconOnNeutralRest = "var(--smtc-foreground-ctrl-icon-on-neutral-rest, var(--smtc-foreground-ctrl-neutral-primary-rest))"; // @public (undocumented) export const foregroundCtrlIconOnNeutralRestRaw = "--smtc-foreground-ctrl-icon-on-neutral-rest"; @@ -3614,7 +3365,7 @@ export const gapBetweenContentNone = "var(--smtc-gap-between-content-none)"; export const gapBetweenContentNoneRaw = "--smtc-gap-between-content-none"; // @public (undocumented) -export const gapBetweenContentSmall = "var(--smtc-gap-between-content-small, 8px)"; +export const gapBetweenContentSmall = "var(--smtc-gap-between-content-small)"; // @public (undocumented) export const gapBetweenContentSmallRaw = "--smtc-gap-between-content-small"; @@ -3644,7 +3395,7 @@ export const gapBetweenContentXxSmall = "var(--smtc-gap-between-content-xx-small export const gapBetweenContentXxSmallRaw = "--smtc-gap-between-content-xx-small"; // @public (undocumented) -export const gapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default, 8px)"; +export const gapBetweenCtrlDefault = "var(--smtc-gap-between-ctrl-default)"; // @public (undocumented) export const gapBetweenCtrlDefaultRaw = "--smtc-gap-between-ctrl-default"; @@ -4372,7 +4123,7 @@ export const materialAcrylicDefaultLumBlend = "var(--smtc-material-acrylic-defau export const materialAcrylicDefaultLumBlendRaw = "--smtc-material-acrylic-default-lum-blend"; // @public (undocumented) -export const materialAcrylicDefaultSolid = "var(--smtc-material-acrylic-default-solid, var(--smtc-background-layer-primary-solid, var(--colorNeutralBackground1)))"; +export const materialAcrylicDefaultSolid = "var(--smtc-material-acrylic-default-solid, var(--smtc-background-layer-primary-solid))"; // @public (undocumented) export const materialAcrylicDefaultSolidRaw = "--smtc-material-acrylic-default-solid"; @@ -4455,12 +4206,6 @@ export const materialMicaThinSolid = "var(--smtc-material-mica-thin-solid, var(- // @public (undocumented) export const materialMicaThinSolidRaw = "--smtc-material-mica-thin-solid"; -// @public -export const _nullBackgroundColorHover = "var(--smtc-null-color, var(--colorTransparentBackgroundHover))"; - -// @public -export const _nullBackgroundColorPressed = "var(--smtc-null-color, var(--colorTransparentBackgroundPressed))"; - // @public (undocumented) export const nullColor = "var(--smtc-null-color, var(--colorTransparentBackground))"; @@ -4486,13 +4231,13 @@ export const paddingCardNestedImage = "var(--smtc-padding-card-nested-image, var export const paddingCardNestedImageRaw = "--smtc-padding-card-nested-image"; // @public (undocumented) -export const paddingContentAlignDefault = "var(--smtc-padding-content-align-default, var(--spacingVerticalS))"; +export const paddingContentAlignDefault = "var(--smtc-padding-content-align-default)"; // @public (undocumented) export const paddingContentAlignDefaultRaw = "--smtc-padding-content-align-default"; // @public (undocumented) -export const paddingContentAlignOutdentIconOnSubtle = "var(--smtc-padding-content-align-outdent-icon-on-subtle, var(--spacingHorizontalM))"; +export const paddingContentAlignOutdentIconOnSubtle = "var(--smtc-padding-content-align-outdent-icon-on-subtle)"; // @public (undocumented) export const paddingContentAlignOutdentIconOnSubtleRaw = "--smtc-padding-content-align-outdent-icon-on-subtle"; @@ -4654,7 +4399,7 @@ export const paddingCtrlToNestedControl = "var(--smtc-padding-ctrl-to-nested-con export const paddingCtrlToNestedControlRaw = "--smtc-padding-ctrl-to-nested-control"; // @public (undocumented) -export const paddingFlyoutDefault = "var(--smtc-padding-flyout-default, var(--smtc-padding-content-align-outdent-text-on-subtle, 4px))"; +export const paddingFlyoutDefault = "var(--smtc-padding-flyout-default, var(--smtc-padding-content-align-outdent-text-on-subtle))"; // @public (undocumented) export const paddingFlyoutDefaultRaw = "--smtc-padding-flyout-default"; @@ -4744,7 +4489,7 @@ export const sizeCtrlIcon = "var(--smtc-size-ctrl-icon, 20px)"; export const sizeCtrlIconRaw = "--smtc-size-ctrl-icon"; // @public (undocumented) -export const sizeCtrlIconSecondary = "var(--smtc-size-ctrl-icon-secondary, 20px)"; +export const sizeCtrlIconSecondary = "var(--smtc-size-ctrl-icon-secondary)"; // @public (undocumented) export const sizeCtrlIconSecondaryRaw = "--smtc-size-ctrl-icon-secondary"; @@ -4834,7 +4579,7 @@ export const statusDangerStroke = "var(--smtc-status-danger-stroke, var(--smtc-s export const statusDangerStrokeRaw = "--smtc-status-danger-stroke"; // @public (undocumented) -export const statusDangerTintBackground = "var(--smtc-status-danger-tint-background, var(--colorStatusDangerBackground1))"; +export const statusDangerTintBackground = "var(--smtc-status-danger-tint-background)"; // @public (undocumented) export const statusDangerTintBackgroundRaw = "--smtc-status-danger-tint-background"; @@ -4846,7 +4591,7 @@ export const statusDangerTintForeground = "var(--smtc-status-danger-tint-foregro export const statusDangerTintForegroundRaw = "--smtc-status-danger-tint-foreground"; // @public (undocumented) -export const statusDangerTintStroke = "var(--smtc-status-danger-tint-stroke, var(--colorStatusDangerBorder1))"; +export const statusDangerTintStroke = "var(--smtc-status-danger-tint-stroke)"; // @public (undocumented) export const statusDangerTintStrokeRaw = "--smtc-status-danger-tint-stroke"; @@ -4870,7 +4615,7 @@ export const statusImportantStroke = "var(--smtc-status-important-stroke, var(-- export const statusImportantStrokeRaw = "--smtc-status-important-stroke"; // @public (undocumented) -export const statusImportantTintBackground = "var(--smtc-status-important-tint-background, var(--colorNeutralBackground3))"; +export const statusImportantTintBackground = "var(--smtc-status-important-tint-background)"; // @public (undocumented) export const statusImportantTintBackgroundRaw = "--smtc-status-important-tint-background"; @@ -4918,7 +4663,7 @@ export const statusInformativeTintForeground = "var(--smtc-status-informative-ti export const statusInformativeTintForegroundRaw = "--smtc-status-informative-tint-foreground"; // @public (undocumented) -export const statusInformativeTintStroke = "var(--smtc-status-informative-tint-stroke, var(--colorNeutralStroke1))"; +export const statusInformativeTintStroke = "var(--smtc-status-informative-tint-stroke)"; // @public (undocumented) export const statusInformativeTintStrokeRaw = "--smtc-status-informative-tint-stroke"; @@ -4984,19 +4729,19 @@ export const statusSuccessStroke = "var(--smtc-status-success-stroke, var(--smtc export const statusSuccessStrokeRaw = "--smtc-status-success-stroke"; // @public (undocumented) -export const statusSuccessTintBackground = "var(--smtc-status-success-tint-background, var(--colorStatusSuccessBackground1))"; +export const statusSuccessTintBackground = "var(--smtc-status-success-tint-background)"; // @public (undocumented) export const statusSuccessTintBackgroundRaw = "--smtc-status-success-tint-background"; // @public (undocumented) -export const statusSuccessTintForeground = "var(--smtc-status-success-tint-foreground, var(--colorStatusSuccessForeground1))"; +export const statusSuccessTintForeground = "var(--smtc-status-success-tint-foreground)"; // @public (undocumented) export const statusSuccessTintForegroundRaw = "--smtc-status-success-tint-foreground"; // @public (undocumented) -export const statusSuccessTintStroke = "var(--smtc-status-success-tint-stroke, var(--colorStatusSuccessBorder1))"; +export const statusSuccessTintStroke = "var(--smtc-status-success-tint-stroke)"; // @public (undocumented) export const statusSuccessTintStrokeRaw = "--smtc-status-success-tint-stroke"; @@ -5020,19 +4765,19 @@ export const statusWarningStroke = "var(--smtc-status-warning-stroke, var(--smtc export const statusWarningStrokeRaw = "--smtc-status-warning-stroke"; // @public (undocumented) -export const statusWarningTintBackground = "var(--smtc-status-warning-tint-background, var(--colorStatusWarningBackground1))"; +export const statusWarningTintBackground = "var(--smtc-status-warning-tint-background)"; // @public (undocumented) export const statusWarningTintBackgroundRaw = "--smtc-status-warning-tint-background"; // @public (undocumented) -export const statusWarningTintForeground = "var(--smtc-status-warning-tint-foreground, var(--colorStatusWarningForeground3))"; +export const statusWarningTintForeground = "var(--smtc-status-warning-tint-foreground)"; // @public (undocumented) export const statusWarningTintForegroundRaw = "--smtc-status-warning-tint-foreground"; // @public (undocumented) -export const statusWarningTintStroke = "var(--smtc-status-warning-tint-stroke, var(--colorStatusWarningBorder1))"; +export const statusWarningTintStroke = "var(--smtc-status-warning-tint-stroke)"; // @public (undocumented) export const statusWarningTintStrokeRaw = "--smtc-status-warning-tint-stroke"; @@ -5500,7 +5245,7 @@ export const textCtrlWeightDefault = "var(--smtc-text-ctrl-weight-default, var(- export const textCtrlWeightDefaultRaw = "--smtc-text-ctrl-weight-default"; // @public (undocumented) -export const textCtrlWeightSelected = "var(--smtc-text-ctrl-weight-selected, var(--fontWeightSemibold))"; +export const textCtrlWeightSelected = "var(--smtc-text-ctrl-weight-selected)"; // @public (undocumented) export const textCtrlWeightSelectedRaw = "--smtc-text-ctrl-weight-selected"; @@ -5650,13 +5395,13 @@ export const textRampItemBodyLineHeight = "var(--smtc-text-ramp-item-body-line-h export const textRampItemBodyLineHeightRaw = "--smtc-text-ramp-item-body-line-height"; // @public (undocumented) -export const textRampItemHeaderFontSize = "var(--smtc-text-ramp-item-header-font-size, var(--smtc-text-global-body2-font-size, var(--fontSizeBase300)))"; +export const textRampItemHeaderFontSize = "var(--smtc-text-ramp-item-header-font-size, var(--smtc-text-global-body2-font-size))"; // @public (undocumented) export const textRampItemHeaderFontSizeRaw = "--smtc-text-ramp-item-header-font-size"; // @public (undocumented) -export const textRampItemHeaderLineHeight = "var(--smtc-text-ramp-item-header-line-height, var(--smtc-text-global-body2-line-height, var(--lineHeightBase400)))"; +export const textRampItemHeaderLineHeight = "var(--smtc-text-ramp-item-header-line-height, var(--smtc-text-global-body2-line-height))"; // @public (undocumented) export const textRampItemHeaderLineHeightRaw = "--smtc-text-ramp-item-header-line-height"; @@ -5770,7 +5515,7 @@ export const textRampLgSubsectionHeaderLineHeight = "var(--smtc-text-ramp-lg-sub export const textRampLgSubsectionHeaderLineHeightRaw = "--smtc-text-ramp-lg-subsection-header-line-height"; // @public (undocumented) -export const textRampMetadataFontSize = "var(--smtc-text-ramp-metadata-font-size, var(--smtc-text-global-caption1-font-size, var(--fontSizeBase200)))"; +export const textRampMetadataFontSize = "var(--smtc-text-ramp-metadata-font-size, var(--smtc-text-global-caption1-font-size))"; // @public (undocumented) export const textRampMetadataFontSizeRaw = "--smtc-text-ramp-metadata-font-size"; @@ -5794,25 +5539,25 @@ export const textRampPageHeaderLineHeight = "var(--smtc-text-ramp-page-header-li export const textRampPageHeaderLineHeightRaw = "--smtc-text-ramp-page-header-line-height"; // @public (undocumented) -export const textRampReadingBodyFontSize = "var(--smtc-text-ramp-reading-body-font-size, var(--smtc-text-global-body2-font-size, var(--fontSizeBase300)))"; +export const textRampReadingBodyFontSize = "var(--smtc-text-ramp-reading-body-font-size, var(--smtc-text-global-body2-font-size))"; // @public (undocumented) export const textRampReadingBodyFontSizeRaw = "--smtc-text-ramp-reading-body-font-size"; // @public (undocumented) -export const textRampReadingBodyLineHeight = "var(--smtc-text-ramp-reading-body-line-height, var(--smtc-text-global-body2-line-height, var(--lineHeightBase300)))"; +export const textRampReadingBodyLineHeight = "var(--smtc-text-ramp-reading-body-line-height, var(--smtc-text-global-body2-line-height))"; // @public (undocumented) export const textRampReadingBodyLineHeightRaw = "--smtc-text-ramp-reading-body-line-height"; // @public (undocumented) -export const textRampSectionHeaderFontSize = "var(--smtc-text-ramp-section-header-font-size, var(--smtc-text-global-subtitle1-font-size, var(--fontSizeBase500)))"; +export const textRampSectionHeaderFontSize = "var(--smtc-text-ramp-section-header-font-size, var(--smtc-text-global-subtitle1-font-size))"; // @public (undocumented) export const textRampSectionHeaderFontSizeRaw = "--smtc-text-ramp-section-header-font-size"; // @public (undocumented) -export const textRampSectionHeaderLineHeight = "var(--smtc-text-ramp-section-header-line-height, var(--smtc-text-global-subtitle1-line-height, var(--lineHeightBase500)))"; +export const textRampSectionHeaderLineHeight = "var(--smtc-text-ramp-section-header-line-height, var(--smtc-text-global-subtitle1-line-height))"; // @public (undocumented) export const textRampSectionHeaderLineHeightRaw = "--smtc-text-ramp-section-header-line-height"; diff --git a/packages/semantic-tokens/src/components/tooltip/tokens.ts b/packages/semantic-tokens/src/components/tooltip/tokens.ts index 447e1286986fd..c329641175f04 100644 --- a/packages/semantic-tokens/src/components/tooltip/tokens.ts +++ b/packages/semantic-tokens/src/components/tooltip/tokens.ts @@ -1,5 +1,6 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { cornerCtrlRestRaw } from '../../control/variables'; +import { borderRadiusMedium, colorNeutralBackground1, colorNeutralForeground1 } from '../../legacy/tokens'; import { ctrlFabShadowRestRaw } from '../fab/variables'; import { ctrlTooltipCornerRaw, @@ -8,7 +9,7 @@ import { ctrlTooltipShadowRaw, } from './variables'; -export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}))`; -export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw})`; -export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw})`; -export const ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}))`; +export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; +export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw}, ${colorNeutralBackground1})`; +export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw}, ${colorNeutralForeground1})`; +export const ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey))))`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 79ef9f0cd9309..aa4c7c894e796 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -713,6 +713,22 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'paddingCtrlHorizontalDefault', }, + _ctrlTooltipPaddingBottom: { + originalToken: 'paddingCtrlTextBottom', + rawValue: '6px', + }, + _ctrlTooltipPaddingLeft: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '11px ', + }, + _ctrlTooltipPaddingRight: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '11px', + }, + _ctrlTooltipPaddingTop: { + originalToken: 'paddingCtrlTextTop', + rawValue: '4px', + }, _ctrlTreeGapInsideDefault: { f2Token: 'spacingVerticalXXS', originalToken: 'gapInsideCtrlDefault', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 42d6c0bbde31d..c43655ab437e0 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -154,6 +154,19 @@ export const fluentOverrides: FluentOverrides = { ctrlSliderThumbSizePressed: { rawValue: '20px' }, ctrlSliderThumbSizeRest: { rawValue: '20px' }, ctrlSpinnerStrokeWidth: { f2Token: 'strokeWidthThicker' }, + ctrlTooltipBackground: { + f2Token: 'colorNeutralBackground1', + }, + ctrlTooltipCorner: { + f2Token: 'borderRadiusMedium', + }, + ctrlTooltipForeground: { + f2Token: 'colorNeutralForeground1', + }, + ctrlTooltipShadow: { + rawValue: + `drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) ` + `drop-shadow(0 4px 8px var(--colorNeutralShadowKey))`, + }, foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' }, foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' }, @@ -335,8 +348,8 @@ export const fluentOverrides: FluentOverrides = { textRampLgItemBodyLineHeight: { f2Token: 'lineHeightBase400' }, textRampLgLegalFontSize: { f2Token: 'fontSizeBase200' }, // React-badge uses the same as medium font size for large textRampLgLegalLineHeight: { f2Token: 'lineHeightBase200' }, // React-badge uses the same as medium line height for large - textRampMetadataFontSize: { f2Token: 'fontSizeBase200' }, // should be fontSizeBase100 per Menu design textRampMetadataLineHeight: { f2Token: 'lineHeightBase200' }, + textRampMetadataFontSize: { f2Token: 'fontSizeBase200' }, // should be fontSizeBase100 per Menu design textRampReadingBodyFontSize: { f2Token: 'fontSizeBase300' }, textRampReadingBodyLineHeight: { f2Token: 'lineHeightBase300' }, textRampSectionHeaderFontSize: { f2Token: 'fontSizeBase500' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 5a8d4dc37dd0b..360368ef110cb 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1969,5 +1969,9 @@ export { _ctrlTreePaddingTextTop, _nullBackgroundColorHover, _nullBackgroundColorPressed, + _ctrlTooltipPaddingLeft, + _ctrlTooltipPaddingRight, + _ctrlTooltipPaddingTop, + _ctrlTooltipPaddingBottom, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 1fa7cdc2ede18..14b2c66837ae3 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -1514,3 +1514,31 @@ export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparen * please use nullColor instead. */ export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault 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 paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTooltipPaddingLeft = `var(${paddingCtrlHorizontalDefaultRaw}, 11px )`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault 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 paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTooltipPaddingRight = `var(${paddingCtrlHorizontalDefaultRaw}, 11px)`; +/** + * This is a legacy variant for paddingCtrlTextTop 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 paddingCtrlTextTop instead. + */ +export const _ctrlTooltipPaddingTop = `var(${paddingCtrlTextTopRaw}, 4px)`; +/** + * This is a legacy variant for paddingCtrlTextBottom 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 paddingCtrlTextBottom instead. + */ +export const _ctrlTooltipPaddingBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, 6px))`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index 33bf954821c14..f5870504e2f21 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -447,8 +447,8 @@ export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var export const textRampItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}, ${lineHeightBase300}))`; export const textRampMetadataFontSize = `var(${textRampMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200}))`; -export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}, ${fontSizeBase200}))`; -export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}, ${lineHeightBase200}))`; +export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}))`; +export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}))`; export const textRampSmPageHeaderFontSize = `var(${textRampSmPageHeaderFontSizeRaw}, var(${textGlobalSubtitle1FontSizeRaw}))`; export const textRampSmPageHeaderLineHeight = `var(${textRampSmPageHeaderLineHeightRaw}, var(${textGlobalSubtitle1LineHeightRaw}))`; export const textRampSmSectionHeaderFontSize = `var(${textRampSmSectionHeaderFontSizeRaw}, var(${textGlobalSubtitle2FontSizeRaw}))`; From 958d363f7954647cbfc6d96bba1edc2d1a82a642 Mon Sep 17 00:00:00 2001 From: Mason Tejera Date: Wed, 16 Jul 2025 10:11:37 -0700 Subject: [PATCH 2/6] Teryns feedback --- .../useSemanticTooltipStyles.styles.ts | 2 +- .../component-styles/semanticStyleHooks.ts | 10 +-- .../src/fluentLegacyVariants.ts | 5 ++ packages/semantic-tokens/src/index.ts | 9 +-- .../src/legacyVariant/tokens.ts | 65 +++++++++++-------- .../semantic-tokens/src/optional/tokens.ts | 4 +- 6 files changed, 55 insertions(+), 40 deletions(-) diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts index 39d877f0977c9..586f7653f0073 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts @@ -1,7 +1,7 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import * as semanticTokens from '@fluentui/semantic-tokens'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; -import { TooltipState } from '@fluentui/react-tooltip'; +import type { TooltipState } from '@fluentui/react-tooltip'; import { tokens } from '@fluentui/react-theme'; const useStyles = makeStyles({ 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 106d93f77ad80..cf5528ccdd453 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 @@ -143,11 +143,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useMessageBarBodyStyles_unstable: useSemanticMessageBarBodyStyles, useMessageBarActionsStyles_unstable: useSemanticMessageBarActionsStyles, useMessageBarTitleStyles_unstable: useSemanticMessageBarTitleStyles, - // Tabs styles - useTabStyles_unstable: useSemanticTabStyles, - useTabListStyles_unstable: useSemanticTabListStyles, - //Tooltip styles - useTooltipStyles_unstable: useSemanticTooltipStyles, // Slider styles useSliderStyles_unstable: useSemanticSliderStyles, // Menu styles @@ -179,4 +174,9 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useToolbarGroupStyles_unstable: useSemanticToolbarGroupStyles, useToolbarRadioButtonStyles_unstable: useSemanticToolbarRadioButtonStyles, useToolbarToggleButtonStyles_unstable: useSemanticToolbarToggleButtonStyles, + // Tabs styles + useTabStyles_unstable: useSemanticTabStyles, + useTabListStyles_unstable: useSemanticTabListStyles, + //Tooltip styles + useTooltipStyles_unstable: useSemanticTooltipStyles, }; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index aa4c7c894e796..98a50c737ea9e 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -729,6 +729,11 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { originalToken: 'paddingCtrlTextTop', rawValue: '4px', }, + _ctrlTooltipShadow: { + rawValue: + 'drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey))', + originalToken: 'ctrlTooltipShadow', + }, _ctrlTreeGapInsideDefault: { f2Token: 'spacingVerticalXXS', originalToken: 'gapInsideCtrlDefault', diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 360368ef110cb..2c4b85493b87b 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1957,6 +1957,11 @@ export { _ctrlTabSizeDefault, _ctrlTabSmGapInsideDefault, _ctrlTabSmPaddingHorizontalDefault, + _ctrlTooltipPaddingBottom, + _ctrlTooltipPaddingLeft, + _ctrlTooltipPaddingRight, + _ctrlTooltipPaddingTop, + _ctrlTooltipShadow, _ctrlTreeGapInsideDefault, _ctrlTreeIconOnSubtle, _ctrlTreeIconOnSubtleHover, @@ -1969,9 +1974,5 @@ export { _ctrlTreePaddingTextTop, _nullBackgroundColorHover, _nullBackgroundColorPressed, - _ctrlTooltipPaddingLeft, - _ctrlTooltipPaddingRight, - _ctrlTooltipPaddingTop, - _ctrlTooltipPaddingBottom, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 14b2c66837ae3..6145eae4a50c6 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -11,6 +11,7 @@ import { ctrlChoiceBaseBackgroundPressedRaw, ctrlChoiceBaseSizeRaw, } from '../components/choice/variables'; +import { ctrlFabShadowRestRaw } from '../components/fab/variables'; import { ctrlFocusInnerStrokeWidthRaw, ctrlFocusOuterStrokeRaw } from '../components/focus/variables'; import { ctrlInputBackgroundRestRaw, @@ -24,6 +25,7 @@ import { ctrlProgressHeightFilledRaw, } from '../components/progress/variables'; import { ctrlSpinnerStrokeWidthRaw } from '../components/spinner/variables'; +import { ctrlTooltipShadowRaw } from '../components/tooltip/variables'; import { nullColorRaw, strokeWidthDefaultRaw, @@ -1430,6 +1432,41 @@ export const _ctrlTabSmGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spa * please use paddingCtrlHorizontalDefault instead. */ export const _ctrlTabSmPaddingHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * This is a legacy variant for paddingCtrlTextBottom 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 paddingCtrlTextBottom instead. + */ +export const _ctrlTooltipPaddingBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, 6px))`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault 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 paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTooltipPaddingLeft = `var(${paddingCtrlHorizontalDefaultRaw}, 11px )`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault 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 paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTooltipPaddingRight = `var(${paddingCtrlHorizontalDefaultRaw}, 11px)`; +/** + * This is a legacy variant for paddingCtrlTextTop 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 paddingCtrlTextTop instead. + */ +export const _ctrlTooltipPaddingTop = `var(${paddingCtrlTextTopRaw}, 4px)`; +/** + * This is a legacy variant for ctrlTooltipShadow 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 ctrlTooltipShadow instead. + */ +export const __ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey))))`; /** * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -1514,31 +1551,3 @@ export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparen * please use nullColor instead. */ export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; -/** - * This is a legacy variant for paddingCtrlHorizontalDefault 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 paddingCtrlHorizontalDefault instead. - */ -export const _ctrlTooltipPaddingLeft = `var(${paddingCtrlHorizontalDefaultRaw}, 11px )`; -/** - * This is a legacy variant for paddingCtrlHorizontalDefault 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 paddingCtrlHorizontalDefault instead. - */ -export const _ctrlTooltipPaddingRight = `var(${paddingCtrlHorizontalDefaultRaw}, 11px)`; -/** - * This is a legacy variant for paddingCtrlTextTop 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 paddingCtrlTextTop instead. - */ -export const _ctrlTooltipPaddingTop = `var(${paddingCtrlTextTopRaw}, 4px)`; -/** - * This is a legacy variant for paddingCtrlTextBottom 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 paddingCtrlTextBottom instead. - */ -export const _ctrlTooltipPaddingBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, 6px))`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index f5870504e2f21..33bf954821c14 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -447,8 +447,8 @@ export const textRampItemBodyFontSize = `var(${textRampItemBodyFontSizeRaw}, var export const textRampItemBodyLineHeight = `var(${textRampItemBodyLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}, ${lineHeightBase300}))`; export const textRampMetadataFontSize = `var(${textRampMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; export const textRampMetadataLineHeight = `var(${textRampMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200}))`; -export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}))`; -export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}))`; +export const textRampLegalFontSize = `var(${textRampLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}, ${fontSizeBase200}))`; +export const textRampLegalLineHeight = `var(${textRampLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}, ${lineHeightBase200}))`; export const textRampSmPageHeaderFontSize = `var(${textRampSmPageHeaderFontSizeRaw}, var(${textGlobalSubtitle1FontSizeRaw}))`; export const textRampSmPageHeaderLineHeight = `var(${textRampSmPageHeaderLineHeightRaw}, var(${textGlobalSubtitle1LineHeightRaw}))`; export const textRampSmSectionHeaderFontSize = `var(${textRampSmSectionHeaderFontSizeRaw}, var(${textGlobalSubtitle2FontSizeRaw}))`; From bd173187cac6a66755e2651ac8d5a2141bbdbf8a Mon Sep 17 00:00:00 2001 From: Mason Tejera Date: Wed, 16 Jul 2025 10:46:51 -0700 Subject: [PATCH 3/6] run build script --- .../src/Tooltip/TooltipDefault.stories.tsx | 2 +- .../etc/semantic-tokens.api.md | 420 ++++++++++++++---- .../src/legacyVariant/tokens.ts | 2 +- 3 files changed, 347 insertions(+), 77 deletions(-) diff --git a/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipDefault.stories.tsx b/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipDefault.stories.tsx index f23b9b95cfb0a..bc7d2c36d450a 100644 --- a/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipDefault.stories.tsx +++ b/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipDefault.stories.tsx @@ -5,7 +5,7 @@ import { SlideTextRegular } from '@fluentui/react-icons'; import type { TooltipProps } from '@fluentui/react-components'; export const Default = (props: Partial) => ( - +