From f0f3eeb0fccb80bbac28fbb4b83ae2423ad4d539 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 14 Jul 2025 14:49:41 -0700 Subject: [PATCH 1/8] Squish for rebase --- ...-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json | 7 + .../react-badge/library/package.json | 1 + .../components/Badge/useBadgeStyles.styles.ts | 150 ++++++------ .../etc/semantic-tokens.api.md | 131 ++++++++--- .../src/components/badge/tokens.ts | 9 +- .../semantic-tokens/src/control/tokens.ts | 22 +- .../src/fluentLegacyVariants.ts | 102 ++++++++ .../semantic-tokens/src/fluentOverrides.ts | 28 +++ packages/semantic-tokens/src/index.ts | 25 ++ packages/semantic-tokens/src/legacy/tokens.ts | 115 ++++++++- .../src/legacyVariant/tokens.ts | 220 +++++++++++++++++- .../semantic-tokens/src/optional/tokens.ts | 39 ++-- 12 files changed, 704 insertions(+), 145 deletions(-) create mode 100644 change/@fluentui-react-badge-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json diff --git a/change/@fluentui-react-badge-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json b/change/@fluentui-react-badge-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json new file mode 100644 index 0000000000000..32d7d23f431be --- /dev/null +++ b/change/@fluentui-react-badge-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Feat: Add semantic tokens to Badge\"", + "packageName": "@fluentui/react-badge", + "email": "terynkum@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-badge/library/package.json b/packages/react-components/react-badge/library/package.json index 633fe850136a6..fb894be4b2935 100644 --- a/packages/react-components/react-badge/library/package.json +++ b/packages/react-components/react-badge/library/package.json @@ -23,6 +23,7 @@ "@fluentui/react-shared-contexts": "^9.23.1", "@fluentui/react-theme": "^9.1.24", "@fluentui/react-utilities": "^9.19.0", + "@fluentui/semantic-tokens": "0.0.0-alpha.1", "@griffel/react": "^1.5.22", "@swc/helpers": "^0.5.1" }, diff --git a/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts b/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts index cedfe6a3c3a1a..fc4c9f9aa8587 100644 --- a/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts +++ b/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts @@ -1,7 +1,8 @@ import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; +import { tokens } from '@fluentui/react-theme'; import type { BadgeSlots, BadgeState } from './Badge.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; export const badgeClassNames: SlotClassNames = { root: 'fui-Badge', @@ -10,7 +11,6 @@ export const badgeClassNames: SlotClassNames = { // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to. // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon. -const textPadding = tokens.spacingHorizontalXXS; const useRootClassName = makeResetStyles({ display: 'inline-flex', @@ -18,13 +18,16 @@ const useRootClassName = makeResetStyles({ alignItems: 'center', justifyContent: 'center', position: 'relative', - ...typographyStyles.caption1Strong, + fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + fontSize: semanticTokens.textRampLegalFontSize, //fix + lineHeight: semanticTokens.textRampLegalLineHeight, //fix height: '20px', minWidth: '20px', - padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`, - borderRadius: tokens.borderRadiusCircular, + padding: `0 calc(${semanticTokens.ctrlBadgePadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + borderRadius: semanticTokens.cornerCircular, // Use a transparent stroke (rather than no border) so the border is visible in high contrast - borderColor: tokens.colorTransparentStroke, + borderColor: semanticTokens._ctrlBadgeNullColor, '::after': { content: '""', @@ -35,14 +38,17 @@ const useRootClassName = makeResetStyles({ right: 0, borderStyle: 'solid', borderColor: 'inherit', - borderWidth: tokens.strokeWidthThin, + borderWidth: semanticTokens.strokeWidthDefault, borderRadius: 'inherit', }, }); const useRootStyles = makeStyles({ fontSmallToTiny: { - ...typographyStyles.caption2Strong, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens._ctrlBadgeTextStyleSemiBoldWeight, + fontSize: semanticTokens.textRampSmLegalFontSize, + lineHeight: semanticTokens.textRampSmLegalLineHeight, }, // size @@ -66,7 +72,7 @@ const useRootStyles = makeStyles({ small: { minWidth: '16px', height: '16px', - padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`, + padding: `0 calc(${semanticTokens.ctrlBadgeSmPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, }, medium: { // Set by useRootClassName @@ -74,19 +80,19 @@ const useRootStyles = makeStyles({ large: { minWidth: '24px', height: '24px', - padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`, + padding: `0 calc(${semanticTokens.ctrlBadgeLgPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, }, 'extra-large': { minWidth: '32px', height: '32px', - padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`, + padding: `0 calc(${semanticTokens._ctrlBadgeXLPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, }, // shape - square: { borderRadius: tokens.borderRadiusNone }, - rounded: { borderRadius: tokens.borderRadiusMedium }, - roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall }, + square: { borderRadius: semanticTokens.cornerZero }, + rounded: { borderRadius: semanticTokens.ctrlBadgeCorner }, + roundedSmallToTiny: { borderRadius: semanticTokens._ctrlBadgeSmallTinyCorner }, circular: { // Set by useRootClassName }, @@ -106,36 +112,36 @@ const useRootStyles = makeStyles({ // Set by useRootClassName }, 'filled-brand': { - backgroundColor: tokens.colorBrandBackground, - color: tokens.colorNeutralForegroundOnBrand, + backgroundColor: semanticTokens.statusBrandBackground, + color: semanticTokens.statusBrandForeground, }, 'filled-danger': { - backgroundColor: tokens.colorPaletteRedBackground3, - color: tokens.colorNeutralForegroundOnBrand, + backgroundColor: semanticTokens.statusDangerBackground, + color: semanticTokens.statusDangerForeground, }, 'filled-important': { - backgroundColor: tokens.colorNeutralForeground1, - color: tokens.colorNeutralBackground1, + backgroundColor: semanticTokens.statusImportantBackground, + color: semanticTokens.statusImportantForeground, }, 'filled-informative': { - backgroundColor: tokens.colorNeutralBackground5, - color: tokens.colorNeutralForeground3, + backgroundColor: semanticTokens.statusInformativeBackground, + color: semanticTokens.statusInformativeForeground, }, 'filled-severe': { - backgroundColor: tokens.colorPaletteDarkOrangeBackground3, + backgroundColor: tokens.colorPaletteDarkOrangeBackground3, //come back to this one color: tokens.colorNeutralForegroundOnBrand, }, 'filled-subtle': { - backgroundColor: tokens.colorNeutralBackground1, + backgroundColor: tokens.colorNeutralBackground1, //come back to this one color: tokens.colorNeutralForeground1, }, 'filled-success': { - backgroundColor: tokens.colorPaletteGreenBackground3, - color: tokens.colorNeutralForegroundOnBrand, + backgroundColor: semanticTokens.statusSuccessBackground, + color: semanticTokens.statusSuccessForeground, }, 'filled-warning': { - backgroundColor: tokens.colorPaletteYellowBackground3, - color: tokens.colorNeutralForeground1Static, + backgroundColor: semanticTokens._ctrlBadgeStatusWarningBackground, + color: semanticTokens.statusWarningForeground, }, // appearance: ghost @@ -144,28 +150,28 @@ const useRootStyles = makeStyles({ // No shared colors between ghost appearances }, 'ghost-brand': { - color: tokens.colorBrandForeground1, + color: semanticTokens.statusBrandTintForeground, }, 'ghost-danger': { - color: tokens.colorPaletteRedForeground3, + color: semanticTokens.statusDangerTintForeground, }, 'ghost-important': { - color: tokens.colorNeutralForeground1, + color: semanticTokens.statusImportantTintForeground, }, 'ghost-informative': { - color: tokens.colorNeutralForeground3, + color: semanticTokens.statusInformativeTintForeground, }, 'ghost-severe': { - color: tokens.colorPaletteDarkOrangeForeground3, + color: tokens.colorPaletteDarkOrangeForeground3, //come back to this one }, 'ghost-subtle': { - color: tokens.colorNeutralForegroundStaticInverted, + color: tokens.colorNeutralForegroundStaticInverted, //come back to this one }, 'ghost-success': { - color: tokens.colorPaletteGreenForeground3, + color: semanticTokens._ctrlBadgeStatusSuccessTintForeground3, }, 'ghost-warning': { - color: tokens.colorPaletteYellowForeground2, + color: semanticTokens._ctrlBadgeStatusWarningTintForeground2, }, // appearance: outline @@ -174,32 +180,32 @@ const useRootStyles = makeStyles({ ...shorthands.borderColor('currentColor'), }, 'outline-brand': { - color: tokens.colorBrandForeground1, + color: semanticTokens.statusBrandTintForeground, }, 'outline-danger': { - color: tokens.colorPaletteRedForeground3, - ...shorthands.borderColor(tokens.colorPaletteRedBorder2), + color: semanticTokens.statusDangerTintForeground, + ...shorthands.borderColor(semanticTokens.statusDangerStroke), }, 'outline-important': { - color: tokens.colorNeutralForeground3, - ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible), + color: semanticTokens.statusImportantTintForeground, + ...shorthands.borderColor(semanticTokens.statusImportantStroke), }, 'outline-informative': { - color: tokens.colorNeutralForeground3, - ...shorthands.borderColor(tokens.colorNeutralStroke2), + color: semanticTokens.statusInformativeTintForeground, + ...shorthands.borderColor(semanticTokens.statusInformativeStroke), }, 'outline-severe': { - color: tokens.colorPaletteDarkOrangeForeground3, + color: tokens.colorPaletteDarkOrangeForeground3, //come back to this one }, 'outline-subtle': { - color: tokens.colorNeutralForegroundStaticInverted, + color: tokens.colorNeutralForegroundStaticInverted, //come back to this one }, 'outline-success': { - color: tokens.colorPaletteGreenForeground3, - ...shorthands.borderColor(tokens.colorPaletteGreenBorder2), + color: semanticTokens._ctrlBadgeStatusSuccessTintForeground3, + ...shorthands.borderColor(semanticTokens.statusSuccessStroke), }, 'outline-warning': { - color: tokens.colorPaletteYellowForeground2, + color: semanticTokens._ctrlBadgeStatusWarningTintForeground2, }, // appearance: tint @@ -208,67 +214,69 @@ const useRootStyles = makeStyles({ // No shared colors between tint appearances }, 'tint-brand': { - backgroundColor: tokens.colorBrandBackground2, - color: tokens.colorBrandForeground2, - ...shorthands.borderColor(tokens.colorBrandStroke2), + backgroundColor: semanticTokens.statusBrandTintBackground, + color: semanticTokens._ctrlBadgeStatusBrandTintForeground, + ...shorthands.borderColor(semanticTokens.statusBrandTintStroke), }, 'tint-danger': { - backgroundColor: tokens.colorPaletteRedBackground1, - color: tokens.colorPaletteRedForeground1, - ...shorthands.borderColor(tokens.colorPaletteRedBorder1), + backgroundColor: semanticTokens._ctrlBadgeStatusDangerTintBackground, + color: semanticTokens._ctrlBadgeStatusDangerTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusDangerTintStroke), }, 'tint-important': { - backgroundColor: tokens.colorNeutralForeground3, - color: tokens.colorNeutralBackground1, - ...shorthands.borderColor(tokens.colorTransparentStroke), + backgroundColor: semanticTokens._ctrlBadgeStatusImportantTintBackground, + color: semanticTokens._ctrlBadgeStatusImportantTintForeground, + ...shorthands.borderColor(semanticTokens.statusImportantTintStroke), }, 'tint-informative': { - backgroundColor: tokens.colorNeutralBackground4, - color: tokens.colorNeutralForeground3, - ...shorthands.borderColor(tokens.colorNeutralStroke2), + backgroundColor: semanticTokens.statusInformativeTintBackground, + color: semanticTokens.statusInformativeTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusInformativeTintStroke), }, 'tint-severe': { + //come back to this backgroundColor: tokens.colorPaletteDarkOrangeBackground1, color: tokens.colorPaletteDarkOrangeForeground1, ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1), }, 'tint-subtle': { + //come back to this backgroundColor: tokens.colorNeutralBackground1, color: tokens.colorNeutralForeground3, ...shorthands.borderColor(tokens.colorNeutralStroke2), }, 'tint-success': { - backgroundColor: tokens.colorPaletteGreenBackground1, - color: tokens.colorPaletteGreenForeground1, - ...shorthands.borderColor(tokens.colorPaletteGreenBorder1), + backgroundColor: semanticTokens._ctrlBadgeStatusSuccessTintBackground, + color: semanticTokens._ctrlBadgeStatusSuccessTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusSuccessTintStroke), }, 'tint-warning': { - backgroundColor: tokens.colorPaletteYellowBackground1, - color: tokens.colorPaletteYellowForeground1, - ...shorthands.borderColor(tokens.colorPaletteYellowBorder1), + backgroundColor: semanticTokens._ctrlBadgeStatusWarningTintBackground, + color: semanticTokens._ctrlBadgeStatusWarningTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusWarningTintStroke), }, }); const useIconRootClassName = makeResetStyles({ display: 'flex', lineHeight: '1', - margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root + margin: `0 calc(-1 * ${semanticTokens._ctrlBadgePaddingTextSide})`, // Remove text padding added to root fontSize: '12px', }); const useIconStyles = makeStyles({ beforeText: { - marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`, + marginRight: `calc(${semanticTokens._ctrlBadgePaddingRightSide} + ${semanticTokens._ctrlBadgePaddingTextSide})`, }, afterText: { - marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`, + marginLeft: `calc(${semanticTokens._ctrlBadgePaddingLeftSide} + ${semanticTokens._ctrlBadgePaddingTextSide})`, }, beforeTextXL: { - marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`, + marginRight: `calc(${semanticTokens._ctrlBadgePaddingRightSideXL} + ${semanticTokens._ctrlBadgePaddingTextSide})`, }, afterTextXL: { - marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`, + marginLeft: `calc(${semanticTokens._ctrlBadgePaddingLeftSideXL} + ${semanticTokens._ctrlBadgePaddingTextSide})`, }, // size diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index bc8332f3d1fc2..408c4d860f397 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -788,7 +788,7 @@ export const ctrlBadgeBeaconSize = "var(--smtc-ctrl-badge-beacon-size)"; export const ctrlBadgeBeaconSizeRaw = "--smtc-ctrl-badge-beacon-size"; // @public (undocumented) -export const ctrlBadgeCorner = "var(--smtc-ctrl-badge-corner)"; +export const ctrlBadgeCorner = "var(--smtc-ctrl-badge-corner, var(--borderRadiusMedium))"; // @public (undocumented) export const ctrlBadgeCornerRaw = "--smtc-ctrl-badge-corner"; @@ -824,7 +824,7 @@ export const ctrlBadgeLgIconSize = "var(--smtc-ctrl-badge-lg-icon-size)"; export const ctrlBadgeLgIconSizeRaw = "--smtc-ctrl-badge-lg-icon-size"; // @public (undocumented) -export const ctrlBadgeLgPadding = "var(--smtc-ctrl-badge-lg-padding)"; +export const ctrlBadgeLgPadding = "var(--smtc-ctrl-badge-lg-padding, var(--spacingHorizontalXS))"; // @public (undocumented) export const ctrlBadgeLgPaddingRaw = "--smtc-ctrl-badge-lg-padding"; @@ -847,18 +847,39 @@ export const ctrlBadgeLgTextPaddingTop = "var(--smtc-ctrl-badge-lg-text-padding- // @public (undocumented) export const ctrlBadgeLgTextPaddingTopRaw = "--smtc-ctrl-badge-lg-text-padding-top"; +// @public +export const _ctrlBadgeNullColor = "var(--smtc-null-color, var(--colorTransparentStroke))"; + // @public (undocumented) -export const ctrlBadgePadding = "var(--smtc-ctrl-badge-padding)"; +export const ctrlBadgePadding = "var(--smtc-ctrl-badge-padding, var(--spacingHorizontalXS))"; + +// @public +export const _ctrlBadgePaddingLeftSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXXS))"; + +// @public +export const _ctrlBadgePaddingLeftSideXL = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXS))"; // @public (undocumented) export const ctrlBadgePaddingRaw = "--smtc-ctrl-badge-padding"; +// @public +export const _ctrlBadgePaddingRightSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXXS))"; + +// @public +export const _ctrlBadgePaddingRightSideXL = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXS))"; + +// @public +export const _ctrlBadgePaddingTextSide = "var(--smtc-padding-ctrl-text-side, var(--spacingHorizontalXXS))"; + // @public (undocumented) export const ctrlBadgeSize = "var(--smtc-ctrl-badge-size)"; // @public (undocumented) export const ctrlBadgeSizeRaw = "--smtc-ctrl-badge-size"; +// @public +export const _ctrlBadgeSmallTinyCorner = "var(--smtc-ctrl-badge-corner, var(--borderRadiusSmall))"; + // @public (undocumented) export const ctrlBadgeSmCorner = "var(--smtc-ctrl-badge-sm-corner)"; @@ -872,7 +893,7 @@ export const ctrlBadgeSmIconSize = "var(--smtc-ctrl-badge-sm-icon-size)"; export const ctrlBadgeSmIconSizeRaw = "--smtc-ctrl-badge-sm-icon-size"; // @public (undocumented) -export const ctrlBadgeSmPadding = "var(--smtc-ctrl-badge-sm-padding)"; +export const ctrlBadgeSmPadding = "var(--smtc-ctrl-badge-sm-padding, var(--spacingHorizontalXXS))"; // @public (undocumented) export const ctrlBadgeSmPaddingRaw = "--smtc-ctrl-badge-sm-padding"; @@ -895,6 +916,54 @@ export const ctrlBadgeSmTextPaddingTop = "var(--smtc-ctrl-badge-sm-text-padding- // @public (undocumented) export const ctrlBadgeSmTextPaddingTopRaw = "--smtc-ctrl-badge-sm-text-padding-top"; +// @public +export const _ctrlBadgeStatusBrandTintForeground = "var(--smtc-status-brand-tint-foreground, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForeground2)))"; + +// @public +export const _ctrlBadgeStatusDangerTintBackground = "var(--smtc-status-danger-tint-background, var(--colorPaletteRedBackground1))"; + +// @public +export const _ctrlBadgeStatusDangerTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorPaletteRedForeground1))"; + +// @public +export const _ctrlBadgeStatusDangerTintStroke = "var(--smtc-status-danger-tint-stroke, var(--colorPaletteRedBorder1))"; + +// @public +export const _ctrlBadgeStatusImportantTintBackground = "var(--smtc-status-important-tint-background, var(--colorNeutralForeground3))"; + +// @public +export const _ctrlBadgeStatusImportantTintForeground = "var(--smtc-status-important-tint-foreground, var(--colorNeutralBackground1))"; + +// @public +export const _ctrlBadgeStatusInformativeTintStroke = "var(--smtc-status-informative-tint-stroke, var(--colorNeutralStroke2))"; + +// @public +export const _ctrlBadgeStatusSuccessTintBackground = "var(--smtc-status-success-tint-background, var(--colorPaletteGreenBackground1))"; + +// @public +export const _ctrlBadgeStatusSuccessTintForeground = "var(--smtc-status-success-tint-foreground, var(--colorPaletteGreenForeground1))"; + +// @public +export const _ctrlBadgeStatusSuccessTintForeground3 = "var(--smtc-status-success-tint-foreground, var(--colorPaletteGreenForeground3))"; + +// @public +export const _ctrlBadgeStatusSuccessTintStroke = "var(--smtc-status-success-tint-stroke, var(--colorPaletteGreenBorder1))"; + +// @public +export const _ctrlBadgeStatusWarningBackground = "var(--smtc-status-warning-background, var(--colorPaletteYellowBackground3))"; + +// @public +export const _ctrlBadgeStatusWarningTintBackground = "var(--smtc-status-warning-tint-background, var(--colorPaletteYellowBackground1))"; + +// @public +export const _ctrlBadgeStatusWarningTintForeground = "var(--smtc-status-warning-tint-foreground, var(--colorPaletteYellowForeground1))"; + +// @public +export const _ctrlBadgeStatusWarningTintForeground2 = "var(--smtc-status-warning-tint-foreground, var(--colorPaletteYellowForeground2))"; + +// @public +export const _ctrlBadgeStatusWarningTintStroke = "var(--smtc-status-warning-tint-stroke, var(--colorPaletteYellowBorder1))"; + // @public (undocumented) export const ctrlBadgeTextPaddingBottom = "var(--smtc-ctrl-badge-text-padding-bottom, var(--smtc-ctrl-badge-text-padding-top))"; @@ -907,6 +976,12 @@ export const ctrlBadgeTextPaddingTop = "var(--smtc-ctrl-badge-text-padding-top)" // @public (undocumented) export const ctrlBadgeTextPaddingTopRaw = "--smtc-ctrl-badge-text-padding-top"; +// @public +export const _ctrlBadgeTextStyleSemiBoldWeight = "var(--smtc-text-style-default-regular-weight, var(--fontWeightSemibold))"; + +// @public +export const _ctrlBadgeXLPadding = "var(--smtc-ctrl-badge-lg-padding, var(--spacingHorizontalSNudge))"; + // @public (undocumented) export const ctrlBooleanSelectionHint = "var(--smtc-ctrl-boolean-selection-hint)"; @@ -4609,13 +4684,13 @@ export const statusAwayForeground = "var(--smtc-status-away-foreground)"; export const statusAwayForegroundRaw = "--smtc-status-away-foreground"; // @public (undocumented) -export const statusBrandBackground = "var(--smtc-status-brand-background, var(--smtc-background-ctrl-brand-rest))"; +export const statusBrandBackground = "var(--smtc-status-brand-background, var(--smtc-background-ctrl-brand-rest, var(--colorBrandBackground)))"; // @public (undocumented) export const statusBrandBackgroundRaw = "--smtc-status-brand-background"; // @public (undocumented) -export const statusBrandForeground = "var(--smtc-status-brand-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; +export const statusBrandForeground = "var(--smtc-status-brand-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand)))"; // @public (undocumented) export const statusBrandForegroundRaw = "--smtc-status-brand-foreground"; @@ -4627,19 +4702,19 @@ export const statusBrandStroke = "var(--smtc-status-brand-stroke, var(--smtc-bac export const statusBrandStrokeRaw = "--smtc-status-brand-stroke"; // @public (undocumented) -export const statusBrandTintBackground = "var(--smtc-status-brand-tint-background)"; +export const statusBrandTintBackground = "var(--smtc-status-brand-tint-background, var(--colorBrandBackground2))"; // @public (undocumented) export const statusBrandTintBackgroundRaw = "--smtc-status-brand-tint-background"; // @public (undocumented) -export const statusBrandTintForeground = "var(--smtc-status-brand-tint-foreground, var(--smtc-foreground-ctrl-brand-rest))"; +export const statusBrandTintForeground = "var(--smtc-status-brand-tint-foreground, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForeground1)))"; // @public (undocumented) export const statusBrandTintForegroundRaw = "--smtc-status-brand-tint-foreground"; // @public (undocumented) -export const statusBrandTintStroke = "var(--smtc-status-brand-tint-stroke)"; +export const statusBrandTintStroke = "var(--smtc-status-brand-tint-stroke, var(--colorBrandStroke2))"; // @public (undocumented) export const statusBrandTintStrokeRaw = "--smtc-status-brand-tint-stroke"; @@ -4651,13 +4726,13 @@ export const statusDangerBackground = "var(--smtc-status-danger-background, var( export const statusDangerBackgroundRaw = "--smtc-status-danger-background"; // @public (undocumented) -export const statusDangerForeground = "var(--smtc-status-danger-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; +export const statusDangerForeground = "var(--smtc-status-danger-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand)))"; // @public (undocumented) export const statusDangerForegroundRaw = "--smtc-status-danger-foreground"; // @public (undocumented) -export const statusDangerStroke = "var(--smtc-status-danger-stroke, var(--smtc-status-danger-background))"; +export const statusDangerStroke = "var(--smtc-status-danger-stroke, var(--smtc-status-danger-background, var(--colorPaletteRedBorder2)))"; // @public (undocumented) export const statusDangerStrokeRaw = "--smtc-status-danger-stroke"; @@ -4681,19 +4756,19 @@ export const statusDangerTintStroke = "var(--smtc-status-danger-tint-stroke, var export const statusDangerTintStrokeRaw = "--smtc-status-danger-tint-stroke"; // @public (undocumented) -export const statusImportantBackground = "var(--smtc-status-important-background)"; +export const statusImportantBackground = "var(--smtc-status-important-background, var(--colorNeutralForeground1))"; // @public (undocumented) export const statusImportantBackgroundRaw = "--smtc-status-important-background"; // @public (undocumented) -export const statusImportantForeground = "var(--smtc-status-important-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; +export const statusImportantForeground = "var(--smtc-status-important-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralBackground1)))"; // @public (undocumented) export const statusImportantForegroundRaw = "--smtc-status-important-foreground"; // @public (undocumented) -export const statusImportantStroke = "var(--smtc-status-important-stroke, var(--smtc-status-important-background))"; +export const statusImportantStroke = "var(--smtc-status-important-stroke, var(--smtc-status-important-background, var(--colorNeutralStrokeAccessible)))"; // @public (undocumented) export const statusImportantStrokeRaw = "--smtc-status-important-stroke"; @@ -4705,43 +4780,43 @@ export const statusImportantTintBackground = "var(--smtc-status-important-tint-b export const statusImportantTintBackgroundRaw = "--smtc-status-important-tint-background"; // @public (undocumented) -export const statusImportantTintForeground = "var(--smtc-status-important-tint-foreground)"; +export const statusImportantTintForeground = "var(--smtc-status-important-tint-foreground, var(--colorNeutralForeground1))"; // @public (undocumented) export const statusImportantTintForegroundRaw = "--smtc-status-important-tint-foreground"; // @public (undocumented) -export const statusImportantTintStroke = "var(--smtc-status-important-tint-stroke)"; +export const statusImportantTintStroke = "var(--smtc-status-important-tint-stroke, var(--colorTransparentStroke))"; // @public (undocumented) export const statusImportantTintStrokeRaw = "--smtc-status-important-tint-stroke"; // @public (undocumented) -export const statusInformativeBackground = "var(--smtc-status-informative-background)"; +export const statusInformativeBackground = "var(--smtc-status-informative-background, var(--colorNeutralBackground5))"; // @public (undocumented) export const statusInformativeBackgroundRaw = "--smtc-status-informative-background"; // @public (undocumented) -export const statusInformativeForeground = "var(--smtc-status-informative-foreground, var(--smtc-foreground-ctrl-neutral-secondary-rest))"; +export const statusInformativeForeground = "var(--smtc-status-informative-foreground, var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--colorNeutralForeground3)))"; // @public (undocumented) export const statusInformativeForegroundRaw = "--smtc-status-informative-foreground"; // @public (undocumented) -export const statusInformativeStroke = "var(--smtc-status-informative-stroke, var(--smtc-status-informative-background))"; +export const statusInformativeStroke = "var(--smtc-status-informative-stroke, var(--smtc-status-informative-background, var(--colorNeutralStroke2)))"; // @public (undocumented) export const statusInformativeStrokeRaw = "--smtc-status-informative-stroke"; // @public (undocumented) -export const statusInformativeTintBackground = "var(--smtc-status-informative-tint-background)"; +export const statusInformativeTintBackground = "var(--smtc-status-informative-tint-background, var(--colorNeutralBackground4))"; // @public (undocumented) export const statusInformativeTintBackgroundRaw = "--smtc-status-informative-tint-background"; // @public (undocumented) -export const statusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground)"; +export const statusInformativeTintForeground = "var(--smtc-status-informative-tint-foreground, var(--colorNeutralForeground3))"; // @public (undocumented) export const statusInformativeTintForegroundRaw = "--smtc-status-informative-tint-foreground"; @@ -4801,13 +4876,13 @@ export const statusSuccessBackground = "var(--smtc-status-success-background, va export const statusSuccessBackgroundRaw = "--smtc-status-success-background"; // @public (undocumented) -export const statusSuccessForeground = "var(--smtc-status-success-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; +export const statusSuccessForeground = "var(--smtc-status-success-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForegroundOnBrand)))"; // @public (undocumented) export const statusSuccessForegroundRaw = "--smtc-status-success-foreground"; // @public (undocumented) -export const statusSuccessStroke = "var(--smtc-status-success-stroke, var(--smtc-status-success-background))"; +export const statusSuccessStroke = "var(--smtc-status-success-stroke, var(--smtc-status-success-background, var(--colorPaletteGreenBorder2)))"; // @public (undocumented) export const statusSuccessStrokeRaw = "--smtc-status-success-stroke"; @@ -4837,7 +4912,7 @@ export const statusWarningBackground = "var(--smtc-status-warning-background, va export const statusWarningBackgroundRaw = "--smtc-status-warning-background"; // @public (undocumented) -export const statusWarningForeground = "var(--smtc-status-warning-foreground, var(--smtc-foreground-ctrl-on-brand-rest))"; +export const statusWarningForeground = "var(--smtc-status-warning-foreground, var(--smtc-foreground-ctrl-on-brand-rest, var(--colorNeutralForeground1Static)))"; // @public (undocumented) export const statusWarningForegroundRaw = "--smtc-status-warning-foreground"; @@ -5491,13 +5566,13 @@ export const textRampItemHeaderLineHeight = "var(--smtc-text-ramp-item-header-li export const textRampItemHeaderLineHeightRaw = "--smtc-text-ramp-item-header-line-height"; // @public (undocumented) -export const textRampLegalFontSize = "var(--smtc-text-ramp-legal-font-size, var(--smtc-text-global-caption2-font-size))"; +export const textRampLegalFontSize = "var(--smtc-text-ramp-legal-font-size, var(--smtc-text-global-caption2-font-size, var(--fontSizeBase200)))"; // @public (undocumented) export const textRampLegalFontSizeRaw = "--smtc-text-ramp-legal-font-size"; // @public (undocumented) -export const textRampLegalLineHeight = "var(--smtc-text-ramp-legal-line-height, var(--smtc-text-global-caption2-line-height))"; +export const textRampLegalLineHeight = "var(--smtc-text-ramp-legal-line-height, var(--smtc-text-global-caption2-line-height, var(--lineHeightBase200)))"; // @public (undocumented) export const textRampLegalLineHeightRaw = "--smtc-text-ramp-legal-line-height"; @@ -5671,13 +5746,13 @@ export const textRampSmItemHeaderLineHeight = "var(--smtc-text-ramp-sm-item-head export const textRampSmItemHeaderLineHeightRaw = "--smtc-text-ramp-sm-item-header-line-height"; // @public (undocumented) -export const textRampSmLegalFontSize = "var(--smtc-text-ramp-sm-legal-font-size, var(--smtc-text-global-caption2-font-size))"; +export const textRampSmLegalFontSize = "var(--smtc-text-ramp-sm-legal-font-size, var(--smtc-text-global-caption2-font-size, var(--fontSizeBase100)))"; // @public (undocumented) export const textRampSmLegalFontSizeRaw = "--smtc-text-ramp-sm-legal-font-size"; // @public (undocumented) -export const textRampSmLegalLineHeight = "var(--smtc-text-ramp-sm-legal-line-height, var(--smtc-text-global-caption2-line-height))"; +export const textRampSmLegalLineHeight = "var(--smtc-text-ramp-sm-legal-line-height, var(--smtc-text-global-caption2-line-height, var(--lineHeightBase100)))"; // @public (undocumented) export const textRampSmLegalLineHeightRaw = "--smtc-text-ramp-sm-legal-line-height"; diff --git a/packages/semantic-tokens/src/components/badge/tokens.ts b/packages/semantic-tokens/src/components/badge/tokens.ts index ad02e02f05691..f41ed94e29ca1 100644 --- a/packages/semantic-tokens/src/components/badge/tokens.ts +++ b/packages/semantic-tokens/src/components/badge/tokens.ts @@ -1,5 +1,6 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { iconThemeCtrlDefaultRestRaw } from '../../control/variables'; +import { borderRadiusMedium, spacingHorizontalXS, spacingHorizontalXXS } from '../../legacy/tokens'; import { ctrlBadgeTextPaddingTopRaw, ctrlBadgeTextPaddingBottomRaw, @@ -33,15 +34,15 @@ export const ctrlBadgeLgTextPaddingBottom = `var(${ctrlBadgeLgTextPaddingBottomR export const ctrlBadgeIconTheme = `var(${ctrlBadgeIconThemeRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; export const ctrlBadgeBeaconSize = `var(${ctrlBadgeBeaconSizeRaw})`; export const ctrlBadgeSize = `var(${ctrlBadgeSizeRaw})`; -export const ctrlBadgeCorner = `var(${ctrlBadgeCornerRaw})`; +export const ctrlBadgeCorner = `var(${ctrlBadgeCornerRaw}, ${borderRadiusMedium})`; export const ctrlBadgeGap = `var(${ctrlBadgeGapRaw})`; export const ctrlBadgeIconSize = `var(${ctrlBadgeIconSizeRaw})`; -export const ctrlBadgePadding = `var(${ctrlBadgePaddingRaw})`; +export const ctrlBadgePadding = `var(${ctrlBadgePaddingRaw}, ${spacingHorizontalXS})`; export const ctrlBadgeSmSize = `var(${ctrlBadgeSmSizeRaw})`; export const ctrlBadgeSmCorner = `var(${ctrlBadgeSmCornerRaw})`; export const ctrlBadgeSmIconSize = `var(${ctrlBadgeSmIconSizeRaw})`; -export const ctrlBadgeSmPadding = `var(${ctrlBadgeSmPaddingRaw})`; +export const ctrlBadgeSmPadding = `var(${ctrlBadgeSmPaddingRaw}, ${spacingHorizontalXXS})`; export const ctrlBadgeLgSize = `var(${ctrlBadgeLgSizeRaw})`; export const ctrlBadgeLgIconSize = `var(${ctrlBadgeLgIconSizeRaw})`; export const ctrlBadgeLgCorner = `var(${ctrlBadgeLgCornerRaw})`; -export const ctrlBadgeLgPadding = `var(${ctrlBadgeLgPaddingRaw})`; +export const ctrlBadgeLgPadding = `var(${ctrlBadgeLgPaddingRaw}, ${spacingHorizontalXS})`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index af103f8aa0790..59cc617324a9a 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -53,6 +53,8 @@ import { colorNeutralForegroundDisabled, colorNeutralForeground2, colorNeutralForegroundOnBrand, + colorBrandBackground2, + colorBrandStroke2, colorPaletteRedBackground3, colorStatusDangerBackground1, colorStatusDangerBorder1, @@ -66,6 +68,10 @@ import { colorStatusSuccessBorder1, colorStatusSuccessForeground1, colorNeutralBackground3, + colorTransparentStroke, + colorNeutralBackground5, + colorNeutralForeground3, + colorNeutralBackground4, colorTransparentBackground, shadow64, } from '../legacy/tokens'; @@ -422,8 +428,8 @@ export const materialAcrylicBlur = `var(${materialAcrylicBlurRaw})`; export const materialMicaBlur = `var(${materialMicaBlurRaw})`; export const iconThemeCtrlDefaultRest = `var(${iconThemeCtrlDefaultRestRaw})`; export const iconThemeCtrlDefaultSelected = `var(${iconThemeCtrlDefaultSelectedRaw})`; -export const statusBrandTintBackground = `var(${statusBrandTintBackgroundRaw})`; -export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw})`; +export const statusBrandTintBackground = `var(${statusBrandTintBackgroundRaw}, ${colorBrandBackground2})`; +export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw}, ${colorBrandStroke2})`; export const statusDangerBackground = `var(${statusDangerBackgroundRaw}, ${colorPaletteRedBackground3})`; export const statusDangerTintBackground = `var(${statusDangerTintBackgroundRaw}, ${colorStatusDangerBackground1})`; export const statusDangerTintStroke = `var(${statusDangerTintStrokeRaw}, ${colorStatusDangerBorder1})`; @@ -436,14 +442,14 @@ export const statusSuccessBackground = `var(${statusSuccessBackgroundRaw}, ${col export const statusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw}, ${colorStatusSuccessBackground1})`; export const statusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw}, ${colorStatusSuccessBorder1})`; export const statusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorStatusSuccessForeground1})`; -export const statusImportantBackground = `var(${statusImportantBackgroundRaw})`; +export const statusImportantBackground = `var(${statusImportantBackgroundRaw}, ${colorNeutralForeground1})`; export const statusImportantTintBackground = `var(${statusImportantTintBackgroundRaw}, ${colorNeutralBackground3})`; -export const statusImportantTintStroke = `var(${statusImportantTintStrokeRaw})`; -export const statusImportantTintForeground = `var(${statusImportantTintForegroundRaw})`; -export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw})`; -export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw})`; +export const statusImportantTintStroke = `var(${statusImportantTintStrokeRaw}, ${colorTransparentStroke})`; +export const statusImportantTintForeground = `var(${statusImportantTintForegroundRaw}, ${colorNeutralForeground1})`; +export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw}, ${colorNeutralBackground5})`; +export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground3})`; export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke1})`; -export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw})`; +export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw}, ${colorNeutralBackground4})`; export const statusAwayForeground = `var(${statusAwayForegroundRaw})`; export const statusOofForeground = `var(${statusOofForegroundRaw})`; export const aiBrandStop1 = `var(${aiBrandStop1Raw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index e665ba8695096..63086c55544e3 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -1,3 +1,5 @@ +import { _ctrlBadgeStatusSuccessTintForeground } from './legacyVariant/tokens'; + export type LegacyFluentVariantValue = | { originalToken: string; @@ -81,6 +83,62 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'strokeWidthThin', originalToken: 'ctrlAvatarPresenceBadgeStrokeWidth', }, + _ctrlBadgeNullColor: { + f2Token: 'colorTransparentStroke', + originalToken: 'nullColor', + }, + _ctrlBadgePaddingLeftSide: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgePaddingLeftSideXL: { + f2Token: 'spacingHorizontalXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgePaddingRightSide: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgePaddingRightSideXL: { + f2Token: 'spacingHorizontalXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgePaddingTextSide: { + f2Token: 'spacingHorizontalXXS', + originalToken: 'paddingCtrlTextSide', + }, + _ctrlBadgeSmallTinyCorner: { + f2Token: 'borderRadiusSmall', + originalToken: 'ctrlBadgeCorner', + }, + _ctrlBadgeStatusBrandTintForeground: { + f2Token: 'colorBrandForeground2', + originalToken: 'statusBrandTintForeground', + }, + _ctrlBadgeStatusDangerTintForeground: { + f2Token: 'colorPaletteRedForeground1', + originalToken: 'statusDangerTintForeground', + }, + _ctrlBadgeStatusImportantTintForeground: { + f2Token: 'colorNeutralBackground1', + originalToken: 'statusImportantTintForeground', + }, + _ctrlBadgeStatusSuccessTintForeground: { + f2Token: 'colorPaletteGreenForeground1', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlBadgeStatusWarningTintForeground: { + f2Token: 'colorPaletteYellowForeground1', + originalToken: 'statusWarningTintForeground', + }, + _ctrlBadgeTextStyleSemiBoldWeight: { + f2Token: 'fontWeightSemibold', + originalToken: 'textStyleDefaultRegularWeight', + }, + _ctrlBadgeXLPadding: { + f2Token: 'spacingHorizontalSNudge', + originalToken: 'ctrlBadgeLgPadding', + }, _ctrlButtonGapInsideDefault: { f2Token: 'spacingHorizontalSNudge', originalToken: 'gapInsideCtrlDefault', @@ -533,4 +591,48 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorTransparentBackgroundPressed', originalToken: 'nullColor', }, + _ctrlBadgeStatusDangerTintBackground: { + f2Token: 'colorPaletteRedBackground1', + originalToken: 'statusDangerTintBackground', + }, + _ctrlBadgeStatusDangerTintStroke: { + f2Token: 'colorPaletteRedBorder1', + originalToken: 'statusDangerTintStroke', + }, + _ctrlBadgeStatusImportantTintBackground: { + f2Token: 'colorNeutralForeground3', + originalToken: 'statusImportantTintBackground', + }, + _ctrlBadgeStatusInformativeTintStroke: { + f2Token: 'colorNeutralStroke2', + originalToken: 'statusInformativeTintStroke', + }, + _ctrlBadgeStatusSuccessTintBackground: { + f2Token: 'colorPaletteGreenBackground1', + originalToken: 'statusSuccessTintBackground', + }, + _ctrlBadgeStatusSuccessTintForeground3: { + f2Token: 'colorPaletteGreenForeground3', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlBadgeStatusSuccessTintStroke: { + f2Token: 'colorPaletteGreenBorder1', + originalToken: 'statusSuccessTintStroke', + }, + _ctrlBadgeStatusWarningBackground: { + f2Token: 'colorPaletteYellowBackground3', + originalToken: 'statusWarningBackground', + }, + _ctrlBadgeStatusWarningTintBackground: { + f2Token: 'colorPaletteYellowBackground1', + originalToken: 'statusWarningTintBackground', + }, + _ctrlBadgeStatusWarningTintForeground2: { + f2Token: 'colorPaletteYellowForeground2', + originalToken: 'statusWarningTintForeground', + }, + _ctrlBadgeStatusWarningTintStroke: { + f2Token: 'colorPaletteYellowBorder1', + originalToken: 'statusWarningTintStroke', + }, }; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 4cfe3ccf36f64..a5b97c6bd2950 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -52,6 +52,10 @@ export const fluentOverrides: FluentOverrides = { ctrlAvatarSize: { rawValue: '32px' }, ctrlAvatarTextFontSize: { f2Token: 'fontSizeBase300' }, ctrlAvatarTextLineHeight: { rawValue: '1' }, + ctrlBadgeCorner: { f2Token: 'borderRadiusMedium' }, + ctrlBadgeLgPadding: { f2Token: 'spacingHorizontalXS' }, + ctrlBadgePadding: { f2Token: 'spacingHorizontalXS' }, + ctrlBadgeSmPadding: { f2Token: 'spacingHorizontalXXS' }, ctrlChoiceBaseBackgroundDisabled: { f2Token: 'colorTransparentBackground' }, ctrlChoiceBaseBackgroundHover: { rawValue: 'unset' }, ctrlChoiceBaseBackgroundPressed: { f2Token: 'colorNeutralStrokeAccessiblePressed' }, @@ -223,17 +227,37 @@ export const fluentOverrides: FluentOverrides = { sizeCtrlLgIcon: { rawValue: '24px' }, sizeCtrlSmDefault: { rawValue: '32px' }, sizeCtrlSmIcon: { rawValue: '20px' }, + statusBrandBackground: { f2Token: 'colorBrandBackground' }, + statusBrandForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, + statusBrandTintBackground: { f2Token: 'colorBrandBackground2' }, + statusBrandTintForeground: { f2Token: 'colorBrandForeground1' }, + statusBrandTintStroke: { f2Token: 'colorBrandStroke2' }, statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, + statusDangerForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, + statusDangerStroke: { f2Token: 'colorPaletteRedBorder2' }, statusDangerTintBackground: { f2Token: 'colorStatusDangerBackground1' }, statusDangerTintForeground: { f2Token: 'colorPaletteRedForeground3' }, statusDangerTintStroke: { f2Token: 'colorStatusDangerBorder1' }, + statusImportantBackground: { f2Token: 'colorNeutralForeground1' }, + statusImportantForeground: { f2Token: 'colorNeutralBackground1' }, + statusImportantStroke: { f2Token: 'colorNeutralStrokeAccessible' }, statusImportantTintBackground: { f2Token: 'colorNeutralBackground3' }, + statusImportantTintForeground: { f2Token: 'colorNeutralForeground1' }, + statusImportantTintStroke: { f2Token: 'colorTransparentStroke' }, + statusInformativeBackground: { f2Token: 'colorNeutralBackground5' }, + statusInformativeForeground: { f2Token: 'colorNeutralForeground3' }, + statusInformativeStroke: { f2Token: 'colorNeutralStroke2' }, + statusInformativeTintBackground: { f2Token: 'colorNeutralBackground4' }, + statusInformativeTintForeground: { f2Token: 'colorNeutralForeground3' }, statusInformativeTintStroke: { f2Token: 'colorNeutralStroke1' }, statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, + statusSuccessForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, + statusSuccessStroke: { f2Token: 'colorPaletteGreenBorder2' }, statusSuccessTintBackground: { f2Token: 'colorStatusSuccessBackground1' }, statusSuccessTintForeground: { f2Token: 'colorStatusSuccessForeground1' }, statusSuccessTintStroke: { f2Token: 'colorStatusSuccessBorder1' }, statusWarningBackground: { f2Token: 'colorPaletteDarkOrangeBackground3' }, + statusWarningForeground: { f2Token: 'colorNeutralForeground1Static' }, statusWarningTintBackground: { f2Token: 'colorStatusWarningBackground1' }, statusWarningTintForeground: { f2Token: 'colorStatusWarningForeground3' }, statusWarningTintStroke: { f2Token: 'colorStatusWarningBorder1' }, @@ -298,6 +322,8 @@ export const fluentOverrides: FluentOverrides = { textRampItemBodyLineHeight: { f2Token: 'lineHeightBase300' }, textRampItemHeaderFontSize: { f2Token: 'fontSizeBase300' }, textRampItemHeaderLineHeight: { f2Token: 'lineHeightBase400' }, + textRampLegalFontSize: { f2Token: 'fontSizeBase200' }, + textRampLegalLineHeight: { f2Token: 'lineHeightBase200' }, textRampLgItemBodyFontSize: { f2Token: 'fontSizeBase400' }, textRampLgItemBodyLineHeight: { f2Token: 'lineHeightBase400' }, textRampMetadataFontSize: { f2Token: 'fontSizeBase200' }, // should be fontSizeBase100 per Menu design @@ -307,6 +333,8 @@ export const fluentOverrides: FluentOverrides = { textRampSectionHeaderLineHeight: { f2Token: 'lineHeightBase500' }, textRampSmItemBodyFontSize: { f2Token: 'fontSizeBase200' }, textRampSmItemBodyLineHeight: { f2Token: 'lineHeightBase200' }, + textRampSmLegalFontSize: { f2Token: 'fontSizeBase100' }, + textRampSmLegalLineHeight: { f2Token: 'lineHeightBase100' }, textStyleDefaultHeaderFontFamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultHeaderWeight: { f2Token: 'fontWeightSemibold' }, textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 7147951e1a7a1..52bf3170ad7a3 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1799,6 +1799,20 @@ export { _ctrlAvatarCornerGroupXLg, _ctrlAvatarPresenceBadgeStrokeWidthLg, _ctrlAvatarPresenceBadgeStrokeWidthSm, + _ctrlBadgeNullColor, + _ctrlBadgePaddingLeftSide, + _ctrlBadgePaddingLeftSideXL, + _ctrlBadgePaddingRightSide, + _ctrlBadgePaddingRightSideXL, + _ctrlBadgePaddingTextSide, + _ctrlBadgeSmallTinyCorner, + _ctrlBadgeStatusBrandTintForeground, + _ctrlBadgeStatusDangerTintForeground, + _ctrlBadgeStatusImportantTintForeground, + _ctrlBadgeStatusSuccessTintForeground, + _ctrlBadgeStatusWarningTintForeground, + _ctrlBadgeTextStyleSemiBoldWeight, + _ctrlBadgeXLPadding, _ctrlButtonGapInsideDefault, _ctrlCheckboxBorderColorChecked, _ctrlCheckboxBorderColorCheckedHover, @@ -1912,5 +1926,16 @@ export { _ctrlTreePaddingTextTop, _nullBackgroundColorHover, _nullBackgroundColorPressed, + _ctrlBadgeStatusDangerTintBackground, + _ctrlBadgeStatusDangerTintStroke, + _ctrlBadgeStatusImportantTintBackground, + _ctrlBadgeStatusInformativeTintStroke, + _ctrlBadgeStatusSuccessTintBackground, + _ctrlBadgeStatusSuccessTintForeground3, + _ctrlBadgeStatusSuccessTintStroke, + _ctrlBadgeStatusWarningBackground, + _ctrlBadgeStatusWarningTintBackground, + _ctrlBadgeStatusWarningTintForeground2, + _ctrlBadgeStatusWarningTintStroke, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index b9bd9e6ecb18b..fe4930caf2dc1 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -129,6 +129,16 @@ export const colorNeutralForeground3 = 'var(--colorNeutralForeground3)'; * @public */ export const fontSizeBase300 = 'var(--fontSizeBase300)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXS | `spacingHorizontalXS`} design token. + * @public + */ +export const spacingHorizontalXS = 'var(--spacingHorizontalXS)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXS | `spacingHorizontalXXS`} design token. + * @public + */ +export const spacingHorizontalXXS = 'var(--spacingHorizontalXXS)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorNeutralStrokeDisabled | `colorNeutralStrokeDisabled`} design token. * @public @@ -319,11 +329,6 @@ export const spacingVerticalXXS = 'var(--spacingVerticalXXS)'; * @public */ export const spacingHorizontalSNudge = 'var(--spacingHorizontalSNudge)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXS | `spacingHorizontalXS`} design token. - * @public - */ -export const spacingHorizontalXS = 'var(--spacingHorizontalXS)'; /** * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalM | `spacingHorizontalM`} design token. * @public @@ -339,6 +344,16 @@ export const spacingHorizontalNone = 'var(--spacingHorizontalNone)'; * @public */ export const spacingHorizontalL = 'var(--spacingHorizontalL)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground2 | `colorBrandBackground2`} design token. + * @public + */ +export const colorBrandBackground2 = 'var(--colorBrandBackground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2 | `colorBrandStroke2`} design token. + * @public + */ +export const colorBrandStroke2 = 'var(--colorBrandStroke2)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground3 | `colorPaletteRedBackground3`} design token. * @public @@ -364,11 +379,26 @@ export const colorStatusDangerBorder1 = 'var(--colorStatusDangerBorder1)'; * @public */ export const colorNeutralBackground3 = 'var(--colorNeutralBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground5 | `colorNeutralBackground5`} design token. + * @public + */ +export const colorNeutralBackground5 = 'var(--colorNeutralBackground5)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground4 | `colorNeutralBackground4`} design token. + * @public + */ +export const colorNeutralBackground4 = 'var(--colorNeutralBackground4)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground3 | `colorPaletteGreenBackground3`} design token. * @public */ export const colorPaletteGreenBackground3 = 'var(--colorPaletteGreenBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder2 | `colorPaletteGreenBorder2`} design token. + * @public + */ +export const colorPaletteGreenBorder2 = 'var(--colorPaletteGreenBorder2)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorStatusSuccessBackground1 | `colorStatusSuccessBackground1`} design token. * @public @@ -389,6 +419,11 @@ export const colorStatusSuccessBorder1 = 'var(--colorStatusSuccessBorder1)'; * @public */ export const colorPaletteDarkOrangeBackground3 = 'var(--colorPaletteDarkOrangeBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1Static | `colorNeutralForeground1Static`} design token. + * @public + */ +export const colorNeutralForeground1Static = 'var(--colorNeutralForeground1Static)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorStatusWarningBackground1 | `colorStatusWarningBackground1`} design token. * @public @@ -549,6 +584,26 @@ export const strokeWidthThickest = 'var(--strokeWidthThickest)'; * @public */ export const borderRadiusLarge = 'var(--borderRadiusLarge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground2 | `colorBrandForeground2`} design token. + * @public + */ +export const colorBrandForeground2 = 'var(--colorBrandForeground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground1 | `colorPaletteRedForeground1`} design token. + * @public + */ +export const colorPaletteRedForeground1 = 'var(--colorPaletteRedForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground1 | `colorPaletteGreenForeground1`} design token. + * @public + */ +export const colorPaletteGreenForeground1 = 'var(--colorPaletteGreenForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground1 | `colorPaletteYellowForeground1`} design token. + * @public + */ +export const colorPaletteYellowForeground1 = 'var(--colorPaletteYellowForeground1)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokeHover | `colorCompoundBrandStrokeHover`} design token. * @public @@ -614,11 +669,6 @@ export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)'; * @public */ export const spacingHorizontalMNudge = 'var(--spacingHorizontalMNudge)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#spacingHorizontalXXS | `spacingHorizontalXXS`} design token. - * @public - */ -export const spacingHorizontalXXS = 'var(--spacingHorizontalXXS)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorTransparentBackgroundHover | `colorTransparentBackgroundHover`} design token. * @public @@ -629,3 +679,48 @@ export const colorTransparentBackgroundHover = 'var(--colorTransparentBackground * @public */ export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground1 | `colorPaletteRedBackground1`} design token. + * @public + */ +export const colorPaletteRedBackground1 = 'var(--colorPaletteRedBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorder1 | `colorPaletteRedBorder1`} design token. + * @public + */ +export const colorPaletteRedBorder1 = 'var(--colorPaletteRedBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground1 | `colorPaletteGreenBackground1`} design token. + * @public + */ +export const colorPaletteGreenBackground1 = 'var(--colorPaletteGreenBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground3 | `colorPaletteGreenForeground3`} design token. + * @public + */ +export const colorPaletteGreenForeground3 = 'var(--colorPaletteGreenForeground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder1 | `colorPaletteGreenBorder1`} design token. + * @public + */ +export const colorPaletteGreenBorder1 = 'var(--colorPaletteGreenBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground3 | `colorPaletteYellowBackground3`} design token. + * @public + */ +export const colorPaletteYellowBackground3 = 'var(--colorPaletteYellowBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground1 | `colorPaletteYellowBackground1`} design token. + * @public + */ +export const colorPaletteYellowBackground1 = 'var(--colorPaletteYellowBackground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground2 | `colorPaletteYellowForeground2`} design token. + * @public + */ +export const colorPaletteYellowForeground2 = 'var(--colorPaletteYellowForeground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorder1 | `colorPaletteYellowBorder1`} design token. + * @public + */ +export const colorPaletteYellowBorder1 = 'var(--colorPaletteYellowBorder1)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index d5974f2f1f79b..e6899ae7a3942 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -4,6 +4,7 @@ import { ctrlAvatarCornerGroupRaw, ctrlAvatarPresenceBadgeStrokeWidthRaw, } from '../components/avatar/variables'; +import { ctrlBadgeCornerRaw, ctrlBadgeLgPaddingRaw } from '../components/badge/variables'; import { ctrlChoiceBaseBackgroundDisabledRaw, ctrlChoiceBaseBackgroundHoverRaw, @@ -26,6 +27,13 @@ import { foregroundCtrlNeutralPrimaryRestRaw, paddingCtrlTextTopRaw, cornerCtrlRestRaw, + paddingCtrlTextSideRaw, + foregroundCtrlBrandRestRaw, + statusDangerTintForegroundRaw, + statusImportantTintForegroundRaw, + statusSuccessTintForegroundRaw, + statusWarningTintForegroundRaw, + textStyleDefaultRegularWeightRaw, gapInsideCtrlDefaultRaw, backgroundCtrlBrandHoverRaw, backgroundCtrlBrandPressedRaw, @@ -34,15 +42,12 @@ import { foregroundCtrlNeutralSecondaryRestRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, - textStyleDefaultRegularWeightRaw, sizeCtrlDefaultRaw, paddingCtrlHorizontalDefaultRaw, - paddingCtrlTextSideRaw, textGlobalBody3FontSizeRaw, cornerFlyoutRestRaw, shadowFlyoutRaw, paddingContentAlignDefaultRaw, - statusDangerTintForegroundRaw, gapBetweenCtrlDefaultRaw, paddingContentAlignOutdentIconOnSubtleRaw, textGlobalBody2LineHeightRaw, @@ -53,7 +58,15 @@ import { textGlobalBody3LineHeightRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, - foregroundCtrlBrandRestRaw, + statusDangerTintBackgroundRaw, + statusDangerTintStrokeRaw, + statusImportantTintBackgroundRaw, + statusInformativeTintStrokeRaw, + statusSuccessTintBackgroundRaw, + statusSuccessTintStrokeRaw, + statusWarningBackgroundRaw, + statusWarningTintBackgroundRaw, + statusWarningTintStrokeRaw, } from '../control/variables'; import { colorTransparentBackground, @@ -67,6 +80,15 @@ import { borderRadiusSmall, borderRadiusXLarge, strokeWidthThin, + colorTransparentStroke, + spacingHorizontalXXS, + spacingHorizontalXS, + colorBrandForeground2, + colorPaletteRedForeground1, + colorNeutralBackground1, + colorPaletteGreenForeground1, + colorPaletteYellowForeground1, + fontWeightSemibold, spacingHorizontalSNudge, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, @@ -81,15 +103,12 @@ import { colorCompoundBrandForeground1Pressed, colorTransparentStrokeInteractive, colorNeutralBackground3, - colorNeutralBackground1, colorNeutralForeground4, - fontWeightSemibold, spacingVerticalSNudge, fontSizeBase200, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, shadow16, - colorTransparentStroke, spacingVerticalM, colorStatusDangerForeground1, spacingHorizontalM, @@ -107,10 +126,19 @@ import { colorNeutralForeground2Hover, colorNeutralForeground2Pressed, spacingHorizontalMNudge, - spacingHorizontalXXS, spacingVerticalXXS, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, + colorPaletteRedBackground1, + colorPaletteRedBorder1, + colorNeutralStroke2, + colorPaletteGreenBackground1, + colorPaletteGreenForeground3, + colorPaletteGreenBorder1, + colorPaletteYellowBackground3, + colorPaletteYellowBackground1, + colorPaletteYellowForeground2, + colorPaletteYellowBorder1, } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, @@ -128,6 +156,7 @@ import { foregroundCtrlOnTransparentPressedRaw, foregroundCtrlOnTransparentRestRaw, paddingCtrlTextBottomRaw, + statusBrandTintForegroundRaw, strokeCtrlOnActiveBrandHoverRaw, foregroundContentNeutralPrimaryRaw, strokeCtrlOnActiveBrandPressedRaw, @@ -277,6 +306,104 @@ export const _ctrlAvatarPresenceBadgeStrokeWidthLg = `var(${ctrlAvatarPresenceBa * please use ctrlAvatarPresenceBadgeStrokeWidth instead. */ export const _ctrlAvatarPresenceBadgeStrokeWidthSm = `var(${ctrlAvatarPresenceBadgeStrokeWidthRaw}, var(${strokeWidthDefaultRaw}, ${strokeWidthThin}))`; +/** + * This is a legacy variant for nullColor 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 nullColor instead. + */ +export const _ctrlBadgeNullColor = `var(${nullColorRaw}, ${colorTransparentStroke})`; +/** + * This is a legacy variant for paddingCtrlTextSide 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 paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingLeftSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for paddingCtrlTextSide 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 paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingLeftSideXL = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXS})`; +/** + * This is a legacy variant for paddingCtrlTextSide 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 paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingRightSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for paddingCtrlTextSide 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 paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingRightSideXL = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXS})`; +/** + * This is a legacy variant for paddingCtrlTextSide 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 paddingCtrlTextSide instead. + */ +export const _ctrlBadgePaddingTextSide = `var(${paddingCtrlTextSideRaw}, ${spacingHorizontalXXS})`; +/** + * This is a legacy variant for ctrlBadgeCorner 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 ctrlBadgeCorner instead. + */ +export const _ctrlBadgeSmallTinyCorner = `var(${ctrlBadgeCornerRaw}, ${borderRadiusSmall})`; +/** + * This is a legacy variant for statusBrandTintForeground 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 statusBrandTintForeground instead. + */ +export const _ctrlBadgeStatusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForeground2}))`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlBadgeStatusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedForeground1})`; +/** + * This is a legacy variant for statusImportantTintForeground 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 statusImportantTintForeground instead. + */ +export const _ctrlBadgeStatusImportantTintForeground = `var(${statusImportantTintForegroundRaw}, ${colorNeutralBackground1})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlBadgeStatusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlBadgeStatusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorPaletteYellowForeground1})`; +/** + * This is a legacy variant for textStyleDefaultRegularWeight 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 textStyleDefaultRegularWeight instead. + */ +export const _ctrlBadgeTextStyleSemiBoldWeight = `var(${textStyleDefaultRegularWeightRaw}, ${fontWeightSemibold})`; +/** + * This is a legacy variant for ctrlBadgeLgPadding 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 ctrlBadgeLgPadding instead. + */ +export const _ctrlBadgeXLPadding = `var(${ctrlBadgeLgPaddingRaw}, ${spacingHorizontalSNudge})`; /** * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -1068,3 +1195,80 @@ export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparen * please use nullColor instead. */ export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; +/** + * This is a legacy variant for statusDangerTintBackground 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 statusDangerTintBackground instead. + */ +export const _ctrlBadgeStatusDangerTintBackground = `var(${statusDangerTintBackgroundRaw}, ${colorPaletteRedBackground1})`; +/** + * This is a legacy variant for statusDangerTintStroke 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 statusDangerTintStroke instead. + */ +export const _ctrlBadgeStatusDangerTintStroke = `var(${statusDangerTintStrokeRaw}, ${colorPaletteRedBorder1})`; +/** + * This is a legacy variant for statusImportantTintBackground 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 statusImportantTintBackground instead. + */ +export const _ctrlBadgeStatusImportantTintBackground = `var(${statusImportantTintBackgroundRaw}, ${colorNeutralForeground3})`; +/** + * This is a legacy variant for statusInformativeTintStroke 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 statusInformativeTintStroke instead. + */ +export const _ctrlBadgeStatusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke2})`; +/** + * This is a legacy variant for statusSuccessTintBackground 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 statusSuccessTintBackground instead. + */ +export const _ctrlBadgeStatusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw}, ${colorPaletteGreenBackground1})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlBadgeStatusSuccessTintForeground3 = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground3})`; +/** + * This is a legacy variant for statusSuccessTintStroke 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 statusSuccessTintStroke instead. + */ +export const _ctrlBadgeStatusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw}, ${colorPaletteGreenBorder1})`; +/** + * This is a legacy variant for statusWarningBackground 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 statusWarningBackground instead. + */ +export const _ctrlBadgeStatusWarningBackground = `var(${statusWarningBackgroundRaw}, ${colorPaletteYellowBackground3})`; +/** + * This is a legacy variant for statusWarningTintBackground 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 statusWarningTintBackground instead. + */ +export const _ctrlBadgeStatusWarningTintBackground = `var(${statusWarningTintBackgroundRaw}, ${colorPaletteYellowBackground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlBadgeStatusWarningTintForeground2 = `var(${statusWarningTintForegroundRaw}, ${colorPaletteYellowForeground2})`; +/** + * This is a legacy variant for statusWarningTintStroke 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 statusWarningTintStroke instead. + */ +export const _ctrlBadgeStatusWarningTintStroke = `var(${statusWarningTintStrokeRaw}, ${colorPaletteYellowBorder1})`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index bc03886629bf3..bfe8f91a94418 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -89,6 +89,8 @@ import { lineHeightBase400, fontSizeBase200, lineHeightBase200, + fontSizeBase100, + lineHeightBase100, fontSizeBase400, fontWeightSemibold, spacingVerticalXXS, @@ -127,6 +129,11 @@ import { colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, colorNeutralBackground1, + colorBrandBackground, + colorPaletteRedBorder2, + colorNeutralForeground1Static, + colorPaletteGreenBorder2, + colorNeutralStroke2, } from '../legacy/tokens'; import { strokeCardOnPrimaryRestRaw, @@ -439,8 +446,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}))`; -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}))`; @@ -455,8 +462,8 @@ export const textRampSmItemBodyFontSize = `var(${textRampSmItemBodyFontSizeRaw}, export const textRampSmItemBodyLineHeight = `var(${textRampSmItemBodyLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200}))`; export const textRampSmMetadataFontSize = `var(${textRampSmMetadataFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}))`; export const textRampSmMetadataLineHeight = `var(${textRampSmMetadataLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; -export const textRampSmLegalFontSize = `var(${textRampSmLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}))`; -export const textRampSmLegalLineHeight = `var(${textRampSmLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}))`; +export const textRampSmLegalFontSize = `var(${textRampSmLegalFontSizeRaw}, var(${textGlobalCaption2FontSizeRaw}, ${fontSizeBase100}))`; +export const textRampSmLegalLineHeight = `var(${textRampSmLegalLineHeightRaw}, var(${textGlobalCaption2LineHeightRaw}, ${lineHeightBase100}))`; export const textRampLgPageHeaderFontSize = `var(${textRampLgPageHeaderFontSizeRaw}, var(${textGlobalTitle1FontSizeRaw}))`; export const textRampLgPageHeaderLineHeight = `var(${textRampLgPageHeaderLineHeightRaw}, var(${textGlobalTitle1LineHeightRaw}))`; export const textRampLgSectionHeaderFontSize = `var(${textRampLgSectionHeaderFontSizeRaw}, var(${textGlobalTitle2FontSizeRaw}))`; @@ -618,20 +625,20 @@ export const iconThemeCtrlSubtlePressed = `var(${iconThemeCtrlSubtlePressedRaw}, export const iconThemeCtrlSubtleSelected = `var(${iconThemeCtrlSubtleSelectedRaw}, var(${iconThemeCtrlDefaultSelectedRaw}))`; export const iconThemeCtrlChevronDefault = `var(${iconThemeCtrlChevronDefaultRaw}, var(${iconThemeCtrlDefaultRestRaw}))`; export const iconThemeCtrlChevronSelected = `var(${iconThemeCtrlChevronSelectedRaw}, var(${iconThemeCtrlDefaultSelectedRaw}))`; -export const statusBrandBackground = `var(${statusBrandBackgroundRaw}, var(${backgroundCtrlBrandRestRaw}))`; +export const statusBrandBackground = `var(${statusBrandBackgroundRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorBrandBackground}))`; export const statusBrandStroke = `var(${statusBrandStrokeRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const statusBrandForeground = `var(${statusBrandForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const statusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}))`; -export const statusDangerStroke = `var(${statusDangerStrokeRaw}, var(${statusDangerBackgroundRaw}))`; -export const statusDangerForeground = `var(${statusDangerForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; +export const statusBrandForeground = `var(${statusBrandForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand}))`; +export const statusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForeground1}))`; +export const statusDangerStroke = `var(${statusDangerStrokeRaw}, var(${statusDangerBackgroundRaw}, ${colorPaletteRedBorder2}))`; +export const statusDangerForeground = `var(${statusDangerForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand}))`; export const statusWarningStroke = `var(${statusWarningStrokeRaw}, var(${statusWarningBackgroundRaw}))`; -export const statusWarningForeground = `var(${statusWarningForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const statusSuccessStroke = `var(${statusSuccessStrokeRaw}, var(${statusSuccessBackgroundRaw}))`; -export const statusSuccessForeground = `var(${statusSuccessForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const statusImportantStroke = `var(${statusImportantStrokeRaw}, var(${statusImportantBackgroundRaw}))`; -export const statusImportantForeground = `var(${statusImportantForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}))`; -export const statusInformativeStroke = `var(${statusInformativeStrokeRaw}, var(${statusInformativeBackgroundRaw}))`; -export const statusInformativeForeground = `var(${statusInformativeForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; +export const statusWarningForeground = `var(${statusWarningForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForeground1Static}))`; +export const statusSuccessStroke = `var(${statusSuccessStrokeRaw}, var(${statusSuccessBackgroundRaw}, ${colorPaletteGreenBorder2}))`; +export const statusSuccessForeground = `var(${statusSuccessForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralForegroundOnBrand}))`; +export const statusImportantStroke = `var(${statusImportantStrokeRaw}, var(${statusImportantBackgroundRaw}, ${colorNeutralStrokeAccessible}))`; +export const statusImportantForeground = `var(${statusImportantForegroundRaw}, var(${foregroundCtrlOnBrandRestRaw}, ${colorNeutralBackground1}))`; +export const statusInformativeStroke = `var(${statusInformativeStrokeRaw}, var(${statusInformativeBackgroundRaw}, ${colorNeutralStroke2}))`; +export const statusInformativeForeground = `var(${statusInformativeForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}, ${colorNeutralForeground3}))`; export const statusNeutralStroke = `var(${statusNeutralStrokeRaw}, var(${statusNeutralBackgroundRaw}))`; export const statusNeutralForeground = `var(${statusNeutralForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; export const statusNeutralTintForeground = `var(${statusNeutralTintForegroundRaw}, var(${foregroundCtrlNeutralSecondaryRestRaw}))`; From 5959a406a37bf0abe1e5a872b3e7ff254d9cdacb Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 14 Jul 2025 15:50:24 -0700 Subject: [PATCH 2/8] Rebase and fix conflicts --- .../src/fluentLegacyVariants.ts | 88 ++++---- .../semantic-tokens/src/fluentOverrides.ts | 2 + packages/semantic-tokens/src/index.ts | 22 +- packages/semantic-tokens/src/legacy/tokens.ts | 90 ++++---- .../src/legacyVariant/tokens.ts | 194 +++++++++--------- .../semantic-tokens/src/optional/tokens.ts | 4 +- 6 files changed, 201 insertions(+), 199 deletions(-) diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 63086c55544e3..c857af0893de7 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -115,22 +115,66 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorBrandForeground2', originalToken: 'statusBrandTintForeground', }, + _ctrlBadgeStatusDangerTintBackground: { + f2Token: 'colorPaletteRedBackground1', + originalToken: 'statusDangerTintBackground', + }, _ctrlBadgeStatusDangerTintForeground: { f2Token: 'colorPaletteRedForeground1', originalToken: 'statusDangerTintForeground', }, + _ctrlBadgeStatusDangerTintStroke: { + f2Token: 'colorPaletteRedBorder1', + originalToken: 'statusDangerTintStroke', + }, + _ctrlBadgeStatusImportantTintBackground: { + f2Token: 'colorNeutralForeground3', + originalToken: 'statusImportantTintBackground', + }, _ctrlBadgeStatusImportantTintForeground: { f2Token: 'colorNeutralBackground1', originalToken: 'statusImportantTintForeground', }, + _ctrlBadgeStatusInformativeTintStroke: { + f2Token: 'colorNeutralStroke2', + originalToken: 'statusInformativeTintStroke', + }, + _ctrlBadgeStatusSuccessTintBackground: { + f2Token: 'colorPaletteGreenBackground1', + originalToken: 'statusSuccessTintBackground', + }, _ctrlBadgeStatusSuccessTintForeground: { f2Token: 'colorPaletteGreenForeground1', originalToken: 'statusSuccessTintForeground', }, + _ctrlBadgeStatusSuccessTintForeground3: { + f2Token: 'colorPaletteGreenForeground3', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlBadgeStatusSuccessTintStroke: { + f2Token: 'colorPaletteGreenBorder1', + originalToken: 'statusSuccessTintStroke', + }, + _ctrlBadgeStatusWarningBackground: { + f2Token: 'colorPaletteYellowBackground3', + originalToken: 'statusWarningBackground', + }, + _ctrlBadgeStatusWarningTintBackground: { + f2Token: 'colorPaletteYellowBackground1', + originalToken: 'statusWarningTintBackground', + }, _ctrlBadgeStatusWarningTintForeground: { f2Token: 'colorPaletteYellowForeground1', originalToken: 'statusWarningTintForeground', }, + _ctrlBadgeStatusWarningTintForeground2: { + f2Token: 'colorPaletteYellowForeground2', + originalToken: 'statusWarningTintForeground', + }, + _ctrlBadgeStatusWarningTintStroke: { + f2Token: 'colorPaletteYellowBorder1', + originalToken: 'statusWarningTintStroke', + }, _ctrlBadgeTextStyleSemiBoldWeight: { f2Token: 'fontWeightSemibold', originalToken: 'textStyleDefaultRegularWeight', @@ -591,48 +635,4 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorTransparentBackgroundPressed', originalToken: 'nullColor', }, - _ctrlBadgeStatusDangerTintBackground: { - f2Token: 'colorPaletteRedBackground1', - originalToken: 'statusDangerTintBackground', - }, - _ctrlBadgeStatusDangerTintStroke: { - f2Token: 'colorPaletteRedBorder1', - originalToken: 'statusDangerTintStroke', - }, - _ctrlBadgeStatusImportantTintBackground: { - f2Token: 'colorNeutralForeground3', - originalToken: 'statusImportantTintBackground', - }, - _ctrlBadgeStatusInformativeTintStroke: { - f2Token: 'colorNeutralStroke2', - originalToken: 'statusInformativeTintStroke', - }, - _ctrlBadgeStatusSuccessTintBackground: { - f2Token: 'colorPaletteGreenBackground1', - originalToken: 'statusSuccessTintBackground', - }, - _ctrlBadgeStatusSuccessTintForeground3: { - f2Token: 'colorPaletteGreenForeground3', - originalToken: 'statusSuccessTintForeground', - }, - _ctrlBadgeStatusSuccessTintStroke: { - f2Token: 'colorPaletteGreenBorder1', - originalToken: 'statusSuccessTintStroke', - }, - _ctrlBadgeStatusWarningBackground: { - f2Token: 'colorPaletteYellowBackground3', - originalToken: 'statusWarningBackground', - }, - _ctrlBadgeStatusWarningTintBackground: { - f2Token: 'colorPaletteYellowBackground1', - originalToken: 'statusWarningTintBackground', - }, - _ctrlBadgeStatusWarningTintForeground2: { - f2Token: 'colorPaletteYellowForeground2', - originalToken: 'statusWarningTintForeground', - }, - _ctrlBadgeStatusWarningTintStroke: { - f2Token: 'colorPaletteYellowBorder1', - originalToken: 'statusWarningTintStroke', - }, }; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index a5b97c6bd2950..5a637bb70a2b1 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -340,4 +340,6 @@ export const fluentOverrides: FluentOverrides = { textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultRegularLetterSpacing: { rawValue: '0' }, textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, + 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 }; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 52bf3170ad7a3..3f82bc36b6287 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1807,10 +1807,21 @@ export { _ctrlBadgePaddingTextSide, _ctrlBadgeSmallTinyCorner, _ctrlBadgeStatusBrandTintForeground, + _ctrlBadgeStatusDangerTintBackground, _ctrlBadgeStatusDangerTintForeground, + _ctrlBadgeStatusDangerTintStroke, + _ctrlBadgeStatusImportantTintBackground, _ctrlBadgeStatusImportantTintForeground, + _ctrlBadgeStatusInformativeTintStroke, + _ctrlBadgeStatusSuccessTintBackground, _ctrlBadgeStatusSuccessTintForeground, + _ctrlBadgeStatusSuccessTintForeground3, + _ctrlBadgeStatusSuccessTintStroke, + _ctrlBadgeStatusWarningBackground, + _ctrlBadgeStatusWarningTintBackground, _ctrlBadgeStatusWarningTintForeground, + _ctrlBadgeStatusWarningTintForeground2, + _ctrlBadgeStatusWarningTintStroke, _ctrlBadgeTextStyleSemiBoldWeight, _ctrlBadgeXLPadding, _ctrlButtonGapInsideDefault, @@ -1926,16 +1937,5 @@ export { _ctrlTreePaddingTextTop, _nullBackgroundColorHover, _nullBackgroundColorPressed, - _ctrlBadgeStatusDangerTintBackground, - _ctrlBadgeStatusDangerTintStroke, - _ctrlBadgeStatusImportantTintBackground, - _ctrlBadgeStatusInformativeTintStroke, - _ctrlBadgeStatusSuccessTintBackground, - _ctrlBadgeStatusSuccessTintForeground3, - _ctrlBadgeStatusSuccessTintStroke, - _ctrlBadgeStatusWarningBackground, - _ctrlBadgeStatusWarningTintBackground, - _ctrlBadgeStatusWarningTintForeground2, - _ctrlBadgeStatusWarningTintStroke, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index fe4930caf2dc1..38bf9b9eb6c11 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -589,21 +589,66 @@ export const borderRadiusLarge = 'var(--borderRadiusLarge)'; * @public */ export const colorBrandForeground2 = 'var(--colorBrandForeground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground1 | `colorPaletteRedBackground1`} design token. + * @public + */ +export const colorPaletteRedBackground1 = 'var(--colorPaletteRedBackground1)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedForeground1 | `colorPaletteRedForeground1`} design token. * @public */ export const colorPaletteRedForeground1 = 'var(--colorPaletteRedForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorder1 | `colorPaletteRedBorder1`} design token. + * @public + */ +export const colorPaletteRedBorder1 = 'var(--colorPaletteRedBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground1 | `colorPaletteGreenBackground1`} design token. + * @public + */ +export const colorPaletteGreenBackground1 = 'var(--colorPaletteGreenBackground1)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground1 | `colorPaletteGreenForeground1`} design token. * @public */ export const colorPaletteGreenForeground1 = 'var(--colorPaletteGreenForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground3 | `colorPaletteGreenForeground3`} design token. + * @public + */ +export const colorPaletteGreenForeground3 = 'var(--colorPaletteGreenForeground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder1 | `colorPaletteGreenBorder1`} design token. + * @public + */ +export const colorPaletteGreenBorder1 = 'var(--colorPaletteGreenBorder1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground3 | `colorPaletteYellowBackground3`} design token. + * @public + */ +export const colorPaletteYellowBackground3 = 'var(--colorPaletteYellowBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground1 | `colorPaletteYellowBackground1`} design token. + * @public + */ +export const colorPaletteYellowBackground1 = 'var(--colorPaletteYellowBackground1)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground1 | `colorPaletteYellowForeground1`} design token. * @public */ export const colorPaletteYellowForeground1 = 'var(--colorPaletteYellowForeground1)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground2 | `colorPaletteYellowForeground2`} design token. + * @public + */ +export const colorPaletteYellowForeground2 = 'var(--colorPaletteYellowForeground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorder1 | `colorPaletteYellowBorder1`} design token. + * @public + */ +export const colorPaletteYellowBorder1 = 'var(--colorPaletteYellowBorder1)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandStrokeHover | `colorCompoundBrandStrokeHover`} design token. * @public @@ -679,48 +724,3 @@ export const colorTransparentBackgroundHover = 'var(--colorTransparentBackground * @public */ export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground1 | `colorPaletteRedBackground1`} design token. - * @public - */ -export const colorPaletteRedBackground1 = 'var(--colorPaletteRedBackground1)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBorder1 | `colorPaletteRedBorder1`} design token. - * @public - */ -export const colorPaletteRedBorder1 = 'var(--colorPaletteRedBorder1)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground1 | `colorPaletteGreenBackground1`} design token. - * @public - */ -export const colorPaletteGreenBackground1 = 'var(--colorPaletteGreenBackground1)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenForeground3 | `colorPaletteGreenForeground3`} design token. - * @public - */ -export const colorPaletteGreenForeground3 = 'var(--colorPaletteGreenForeground3)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBorder1 | `colorPaletteGreenBorder1`} design token. - * @public - */ -export const colorPaletteGreenBorder1 = 'var(--colorPaletteGreenBorder1)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground3 | `colorPaletteYellowBackground3`} design token. - * @public - */ -export const colorPaletteYellowBackground3 = 'var(--colorPaletteYellowBackground3)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBackground1 | `colorPaletteYellowBackground1`} design token. - * @public - */ -export const colorPaletteYellowBackground1 = 'var(--colorPaletteYellowBackground1)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowForeground2 | `colorPaletteYellowForeground2`} design token. - * @public - */ -export const colorPaletteYellowForeground2 = 'var(--colorPaletteYellowForeground2)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteYellowBorder1 | `colorPaletteYellowBorder1`} design token. - * @public - */ -export const colorPaletteYellowBorder1 = 'var(--colorPaletteYellowBorder1)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index e6899ae7a3942..31c7fbc1f61e5 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -29,10 +29,19 @@ import { cornerCtrlRestRaw, paddingCtrlTextSideRaw, foregroundCtrlBrandRestRaw, + statusDangerTintBackgroundRaw, statusDangerTintForegroundRaw, + statusDangerTintStrokeRaw, + statusImportantTintBackgroundRaw, statusImportantTintForegroundRaw, + statusInformativeTintStrokeRaw, + statusSuccessTintBackgroundRaw, statusSuccessTintForegroundRaw, + statusSuccessTintStrokeRaw, + statusWarningBackgroundRaw, + statusWarningTintBackgroundRaw, statusWarningTintForegroundRaw, + statusWarningTintStrokeRaw, textStyleDefaultRegularWeightRaw, gapInsideCtrlDefaultRaw, backgroundCtrlBrandHoverRaw, @@ -58,15 +67,6 @@ import { textGlobalBody3LineHeightRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, - statusDangerTintBackgroundRaw, - statusDangerTintStrokeRaw, - statusImportantTintBackgroundRaw, - statusInformativeTintStrokeRaw, - statusSuccessTintBackgroundRaw, - statusSuccessTintStrokeRaw, - statusWarningBackgroundRaw, - statusWarningTintBackgroundRaw, - statusWarningTintStrokeRaw, } from '../control/variables'; import { colorTransparentBackground, @@ -84,15 +84,25 @@ import { spacingHorizontalXXS, spacingHorizontalXS, colorBrandForeground2, + colorPaletteRedBackground1, colorPaletteRedForeground1, + colorPaletteRedBorder1, + colorNeutralForeground3, colorNeutralBackground1, + colorNeutralStroke2, + colorPaletteGreenBackground1, colorPaletteGreenForeground1, + colorPaletteGreenForeground3, + colorPaletteGreenBorder1, + colorPaletteYellowBackground3, + colorPaletteYellowBackground1, colorPaletteYellowForeground1, + colorPaletteYellowForeground2, + colorPaletteYellowBorder1, fontWeightSemibold, spacingHorizontalSNudge, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, - colorNeutralForeground3, colorNeutralForeground2, colorCompoundBrandBackgroundPressed, colorCompoundBrandStroke, @@ -129,16 +139,6 @@ import { spacingVerticalXXS, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, - colorPaletteRedBackground1, - colorPaletteRedBorder1, - colorNeutralStroke2, - colorPaletteGreenBackground1, - colorPaletteGreenForeground3, - colorPaletteGreenBorder1, - colorPaletteYellowBackground3, - colorPaletteYellowBackground1, - colorPaletteYellowForeground2, - colorPaletteYellowBorder1, } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, @@ -362,6 +362,13 @@ export const _ctrlBadgeSmallTinyCorner = `var(${ctrlBadgeCornerRaw}, ${borderRad * please use statusBrandTintForeground instead. */ export const _ctrlBadgeStatusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForeground2}))`; +/** + * This is a legacy variant for statusDangerTintBackground 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 statusDangerTintBackground instead. + */ +export const _ctrlBadgeStatusDangerTintBackground = `var(${statusDangerTintBackgroundRaw}, ${colorPaletteRedBackground1})`; /** * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -369,6 +376,20 @@ export const _ctrlBadgeStatusBrandTintForeground = `var(${statusBrandTintForegro * please use statusDangerTintForeground instead. */ export const _ctrlBadgeStatusDangerTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedForeground1})`; +/** + * This is a legacy variant for statusDangerTintStroke 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 statusDangerTintStroke instead. + */ +export const _ctrlBadgeStatusDangerTintStroke = `var(${statusDangerTintStrokeRaw}, ${colorPaletteRedBorder1})`; +/** + * This is a legacy variant for statusImportantTintBackground 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 statusImportantTintBackground instead. + */ +export const _ctrlBadgeStatusImportantTintBackground = `var(${statusImportantTintBackgroundRaw}, ${colorNeutralForeground3})`; /** * This is a legacy variant for statusImportantTintForeground to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -376,6 +397,20 @@ export const _ctrlBadgeStatusDangerTintForeground = `var(${statusDangerTintForeg * please use statusImportantTintForeground instead. */ export const _ctrlBadgeStatusImportantTintForeground = `var(${statusImportantTintForegroundRaw}, ${colorNeutralBackground1})`; +/** + * This is a legacy variant for statusInformativeTintStroke 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 statusInformativeTintStroke instead. + */ +export const _ctrlBadgeStatusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke2})`; +/** + * This is a legacy variant for statusSuccessTintBackground 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 statusSuccessTintBackground instead. + */ +export const _ctrlBadgeStatusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw}, ${colorPaletteGreenBackground1})`; /** * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -383,6 +418,34 @@ export const _ctrlBadgeStatusImportantTintForeground = `var(${statusImportantTin * please use statusSuccessTintForeground instead. */ export const _ctrlBadgeStatusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground1})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlBadgeStatusSuccessTintForeground3 = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground3})`; +/** + * This is a legacy variant for statusSuccessTintStroke 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 statusSuccessTintStroke instead. + */ +export const _ctrlBadgeStatusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw}, ${colorPaletteGreenBorder1})`; +/** + * This is a legacy variant for statusWarningBackground 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 statusWarningBackground instead. + */ +export const _ctrlBadgeStatusWarningBackground = `var(${statusWarningBackgroundRaw}, ${colorPaletteYellowBackground3})`; +/** + * This is a legacy variant for statusWarningTintBackground 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 statusWarningTintBackground instead. + */ +export const _ctrlBadgeStatusWarningTintBackground = `var(${statusWarningTintBackgroundRaw}, ${colorPaletteYellowBackground1})`; /** * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -390,6 +453,20 @@ export const _ctrlBadgeStatusSuccessTintForeground = `var(${statusSuccessTintFor * please use statusWarningTintForeground instead. */ export const _ctrlBadgeStatusWarningTintForeground = `var(${statusWarningTintForegroundRaw}, ${colorPaletteYellowForeground1})`; +/** + * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusWarningTintForeground instead. + */ +export const _ctrlBadgeStatusWarningTintForeground2 = `var(${statusWarningTintForegroundRaw}, ${colorPaletteYellowForeground2})`; +/** + * This is a legacy variant for statusWarningTintStroke 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 statusWarningTintStroke instead. + */ +export const _ctrlBadgeStatusWarningTintStroke = `var(${statusWarningTintStrokeRaw}, ${colorPaletteYellowBorder1})`; /** * This is a legacy variant for textStyleDefaultRegularWeight to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -1195,80 +1272,3 @@ export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparen * please use nullColor instead. */ export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; -/** - * This is a legacy variant for statusDangerTintBackground 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 statusDangerTintBackground instead. - */ -export const _ctrlBadgeStatusDangerTintBackground = `var(${statusDangerTintBackgroundRaw}, ${colorPaletteRedBackground1})`; -/** - * This is a legacy variant for statusDangerTintStroke 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 statusDangerTintStroke instead. - */ -export const _ctrlBadgeStatusDangerTintStroke = `var(${statusDangerTintStrokeRaw}, ${colorPaletteRedBorder1})`; -/** - * This is a legacy variant for statusImportantTintBackground 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 statusImportantTintBackground instead. - */ -export const _ctrlBadgeStatusImportantTintBackground = `var(${statusImportantTintBackgroundRaw}, ${colorNeutralForeground3})`; -/** - * This is a legacy variant for statusInformativeTintStroke 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 statusInformativeTintStroke instead. - */ -export const _ctrlBadgeStatusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke2})`; -/** - * This is a legacy variant for statusSuccessTintBackground 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 statusSuccessTintBackground instead. - */ -export const _ctrlBadgeStatusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw}, ${colorPaletteGreenBackground1})`; -/** - * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. - * It's purpose is to support Fluent UI legacy fallback variants only. - * This token is not intended for use in new semantic theme implementations - * please use statusSuccessTintForeground instead. - */ -export const _ctrlBadgeStatusSuccessTintForeground3 = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteGreenForeground3})`; -/** - * This is a legacy variant for statusSuccessTintStroke 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 statusSuccessTintStroke instead. - */ -export const _ctrlBadgeStatusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw}, ${colorPaletteGreenBorder1})`; -/** - * This is a legacy variant for statusWarningBackground 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 statusWarningBackground instead. - */ -export const _ctrlBadgeStatusWarningBackground = `var(${statusWarningBackgroundRaw}, ${colorPaletteYellowBackground3})`; -/** - * This is a legacy variant for statusWarningTintBackground 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 statusWarningTintBackground instead. - */ -export const _ctrlBadgeStatusWarningTintBackground = `var(${statusWarningTintBackgroundRaw}, ${colorPaletteYellowBackground1})`; -/** - * This is a legacy variant for statusWarningTintForeground to enable backwards compatibility. - * It's purpose is to support Fluent UI legacy fallback variants only. - * This token is not intended for use in new semantic theme implementations - * please use statusWarningTintForeground instead. - */ -export const _ctrlBadgeStatusWarningTintForeground2 = `var(${statusWarningTintForegroundRaw}, ${colorPaletteYellowForeground2})`; -/** - * This is a legacy variant for statusWarningTintStroke 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 statusWarningTintStroke instead. - */ -export const _ctrlBadgeStatusWarningTintStroke = `var(${statusWarningTintStrokeRaw}, ${colorPaletteYellowBorder1})`; diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index bfe8f91a94418..c3127444097cc 100644 --- a/packages/semantic-tokens/src/optional/tokens.ts +++ b/packages/semantic-tokens/src/optional/tokens.ts @@ -478,8 +478,8 @@ export const textRampLgItemBodyFontSize = `var(${textRampLgItemBodyFontSizeRaw}, export const textRampLgItemBodyLineHeight = `var(${textRampLgItemBodyLineHeightRaw}, var(${textGlobalBody2LineHeightRaw}, ${lineHeightBase400}))`; export const textRampLgMetadataFontSize = `var(${textRampLgMetadataFontSizeRaw}, var(${textGlobalBody3FontSizeRaw}))`; export const textRampLgMetadataLineHeight = `var(${textRampLgMetadataLineHeightRaw}, var(${textGlobalBody3LineHeightRaw}))`; -export const textRampLgLegalFontSize = `var(${textRampLgLegalFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}))`; -export const textRampLgLegalLineHeight = `var(${textRampLgLegalLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}))`; +export const textRampLgLegalFontSize = `var(${textRampLgLegalFontSizeRaw}, var(${textGlobalCaption1FontSizeRaw}, ${fontSizeBase200}))`; +export const textRampLgLegalLineHeight = `var(${textRampLgLegalLineHeightRaw}, var(${textGlobalCaption1LineHeightRaw}, ${lineHeightBase200}))`; export const textCtrlWeightDefault = `var(${textCtrlWeightDefaultRaw}, var(${textStyleDefaultRegularWeightRaw}))`; export const textCtrlButtonWeightDefault = `var(${textCtrlButtonWeightDefaultRaw}, var(${textStyleDefaultRegularWeightRaw}, ${fontWeightSemibold}))`; export const textCtrlButtonWeightSelected = `var(${textCtrlButtonWeightSelectedRaw}, var(${textCtrlWeightSelectedRaw}))`; From 2d2974b3b737da6a99bdfe5abb1b609085bc4742 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 14 Jul 2025 15:53:31 -0700 Subject: [PATCH 3/8] Add large text font --- .../library/src/components/Badge/useBadgeStyles.styles.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts b/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts index fc4c9f9aa8587..428ae94e74885 100644 --- a/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts +++ b/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts @@ -20,8 +20,8 @@ const useRootClassName = makeResetStyles({ position: 'relative', fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily, fontWeight: semanticTokens.textStyleDefaultHeaderWeight, - fontSize: semanticTokens.textRampLegalFontSize, //fix - lineHeight: semanticTokens.textRampLegalLineHeight, //fix + fontSize: semanticTokens.textRampLegalFontSize, + lineHeight: semanticTokens.textRampLegalLineHeight, height: '20px', minWidth: '20px', padding: `0 calc(${semanticTokens.ctrlBadgePadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, @@ -78,11 +78,15 @@ const useRootStyles = makeStyles({ // Set by useRootClassName }, large: { + fontSize: semanticTokens.textRampLgLegalFontSize, + lineHeight: semanticTokens.textRampLgLegalLineHeight, minWidth: '24px', height: '24px', padding: `0 calc(${semanticTokens.ctrlBadgeLgPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, }, 'extra-large': { + fontSize: semanticTokens.textRampLgLegalFontSize, + lineHeight: semanticTokens.textRampLgLegalLineHeight, minWidth: '32px', height: '32px', padding: `0 calc(${semanticTokens._ctrlBadgeXLPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, From 61ec0c80aa53117df6c85c14ce8a19b6ea5d377b Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 14 Jul 2025 17:30:22 -0700 Subject: [PATCH 4/8] Setup badge presence styles --- .../components/Badge/useBadgeStyles.styles.ts | 2 +- .../etc/semantic-style-hooks-preview.api.md | 4 + .../library/package.json | 1 + .../src/component-styles/Badge/index.ts | 2 + .../Badge/useSemanticBadgeStyles.styles.ts | 352 ++++++++++++++++++ .../useSemanticPresenceBadgeStyles.styles.ts | 143 +++++++ .../component-styles/semanticStyleHooks.ts | 4 + .../library/src/index.ts | 1 + .../etc/semantic-tokens.api.md | 4 +- .../semantic-tokens/src/control/tokens.ts | 3 +- .../src/fluentLegacyVariants.ts | 8 + .../semantic-tokens/src/fluentOverrides.ts | 1 + packages/semantic-tokens/src/index.ts | 2 + packages/semantic-tokens/src/legacy/tokens.ts | 10 + .../src/legacyVariant/tokens.ts | 16 + 15 files changed, 549 insertions(+), 4 deletions(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticBadgeStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts diff --git a/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts b/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts index 428ae94e74885..b56ddce2324fe 100644 --- a/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts +++ b/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts @@ -100,7 +100,7 @@ const useRootStyles = makeStyles({ circular: { // Set by useRootClassName }, - // hide the boder when appearance is "ghost" + // hide the border when appearance is "ghost" borderGhost: { // The border is applied in an ::after pseudo-element because it should not affect layout. 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 1a7e5816aa48a..00a9351c2331a 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 @@ -6,6 +6,7 @@ import { AccordionHeaderState } from '@fluentui/react-accordion'; import { AvatarState } from '@fluentui/react-avatar'; +import { BadgeState } from '@fluentui/react-badge'; import { ButtonState } from '@fluentui/react-button'; import { CheckboxState } from '@fluentui/react-checkbox'; import { CompoundButtonState } from '@fluentui/react-button'; @@ -63,6 +64,9 @@ export const useSemanticAccordionHeaderStyles: (_state: unknown) => AccordionHea // @public (undocumented) export const useSemanticAvatarStyles: (_state: unknown) => AvatarState; +// @public +export const useSemanticBadgeStyles: (_state: unknown) => BadgeState; + // @public (undocumented) export const useSemanticButtonStyles: (_state: unknown) => ButtonState; 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 6213549059a70..5ccec0400537a 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -26,6 +26,7 @@ "dependencies": { "@fluentui/react-accordion": "^9.6.8", "@fluentui/react-avatar": "^9.7.6", + "@fluentui/react-badge": "^9.2.54", "@fluentui/react-button": "^9.4.6", "@fluentui/react-checkbox": "^9.3.6", "@fluentui/react-dialog": "^9.12.8", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/index.ts new file mode 100644 index 0000000000000..e9cc09f99f64a --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/index.ts @@ -0,0 +1,2 @@ +export { useSemanticBadgeStyles } from './useSemanticBadgeStyles.styles'; +export { useSemanticPresenceBadgeStyles } from './useSemanticPresenceBadgeStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticBadgeStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticBadgeStyles.styles.ts new file mode 100644 index 0000000000000..85b0d5103f2d4 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticBadgeStyles.styles.ts @@ -0,0 +1,352 @@ +import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { badgeClassNames, type BadgeState } from '@fluentui/react-badge'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to. +// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon. + +const useRootClassName = makeResetStyles({ + display: 'inline-flex', + boxSizing: 'border-box', + alignItems: 'center', + justifyContent: 'center', + position: 'relative', + fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily, + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + fontSize: semanticTokens.textRampLegalFontSize, + lineHeight: semanticTokens.textRampLegalLineHeight, + height: '20px', + minWidth: '20px', + padding: `0 calc(${semanticTokens.ctrlBadgePadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + borderRadius: semanticTokens.cornerCircular, + // Use a transparent stroke (rather than no border) so the border is visible in high contrast + borderColor: semanticTokens._ctrlBadgeNullColor, + + '::after': { + content: '""', + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + borderStyle: 'solid', + borderColor: 'inherit', + borderWidth: semanticTokens.strokeWidthDefault, + borderRadius: 'inherit', + }, +}); + +const useRootStyles = makeStyles({ + fontSmallToTiny: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontWeight: semanticTokens._ctrlBadgeTextStyleSemiBoldWeight, + fontSize: semanticTokens.textRampSmLegalFontSize, + lineHeight: semanticTokens.textRampSmLegalLineHeight, + }, + + // size + + tiny: { + width: '6px', + height: '6px', + fontSize: '4px', + lineHeight: '4px', + minWidth: 'unset', + padding: 'unset', + }, + 'extra-small': { + width: '10px', + height: '10px', + fontSize: '6px', + lineHeight: '6px', + minWidth: 'unset', + padding: 'unset', + }, + small: { + minWidth: '16px', + height: '16px', + padding: `0 calc(${semanticTokens.ctrlBadgeSmPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + medium: { + // Set by useRootClassName + }, + large: { + fontSize: semanticTokens.textRampLgLegalFontSize, + lineHeight: semanticTokens.textRampLgLegalLineHeight, + minWidth: '24px', + height: '24px', + padding: `0 calc(${semanticTokens.ctrlBadgeLgPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + 'extra-large': { + fontSize: semanticTokens.textRampLgLegalFontSize, + lineHeight: semanticTokens.textRampLgLegalLineHeight, + minWidth: '32px', + height: '32px', + padding: `0 calc(${semanticTokens._ctrlBadgeXLPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + + // shape + + square: { borderRadius: semanticTokens.cornerZero }, + rounded: { borderRadius: semanticTokens.ctrlBadgeCorner }, + roundedSmallToTiny: { borderRadius: semanticTokens._ctrlBadgeSmallTinyCorner }, + circular: { + // Set by useRootClassName + }, + // hide the border when appearance is "ghost" + + borderGhost: { + // The border is applied in an ::after pseudo-element because it should not affect layout. + // The padding and size of the badge should be the same regardless of whether or not it has a border. + '::after': { + display: 'none', + }, + }, + + // appearance: filled + + filled: { + // Set by useRootClassName + }, + 'filled-brand': { + backgroundColor: semanticTokens.statusBrandBackground, + color: semanticTokens.statusBrandForeground, + }, + 'filled-danger': { + backgroundColor: semanticTokens.statusDangerBackground, + color: semanticTokens.statusDangerForeground, + }, + 'filled-important': { + backgroundColor: semanticTokens.statusImportantBackground, + color: semanticTokens.statusImportantForeground, + }, + 'filled-informative': { + backgroundColor: semanticTokens.statusInformativeBackground, + color: semanticTokens.statusInformativeForeground, + }, + 'filled-severe': { + backgroundColor: tokens.colorPaletteDarkOrangeBackground3, // Missing semantic token equivalent + color: tokens.colorNeutralForegroundOnBrand, + }, + 'filled-subtle': { + backgroundColor: tokens.colorNeutralBackground1, // Missing semantic token equivalent + color: tokens.colorNeutralForeground1, + }, + 'filled-success': { + backgroundColor: semanticTokens.statusSuccessBackground, + color: semanticTokens.statusSuccessForeground, + }, + 'filled-warning': { + backgroundColor: semanticTokens._ctrlBadgeStatusWarningBackground, + color: semanticTokens.statusWarningForeground, + }, + + // appearance: ghost + + ghost: { + // No shared colors between ghost appearances + }, + 'ghost-brand': { + color: semanticTokens.statusBrandTintForeground, + }, + 'ghost-danger': { + color: semanticTokens.statusDangerTintForeground, + }, + 'ghost-important': { + color: semanticTokens.statusImportantTintForeground, + }, + 'ghost-informative': { + color: semanticTokens.statusInformativeTintForeground, + }, + 'ghost-severe': { + color: tokens.colorPaletteDarkOrangeForeground3, // Missing semantic token equivalent + }, + 'ghost-subtle': { + color: tokens.colorNeutralForegroundStaticInverted, // Missing semantic token equivalents + }, + 'ghost-success': { + color: semanticTokens._ctrlBadgeStatusSuccessTintForeground3, + }, + 'ghost-warning': { + color: semanticTokens._ctrlBadgeStatusWarningTintForeground2, + }, + + // appearance: outline + + outline: { + ...shorthands.borderColor('currentColor'), + }, + 'outline-brand': { + color: semanticTokens.statusBrandTintForeground, + }, + 'outline-danger': { + color: semanticTokens.statusDangerTintForeground, + ...shorthands.borderColor(semanticTokens.statusDangerStroke), + }, + 'outline-important': { + color: semanticTokens.statusImportantTintForeground, + ...shorthands.borderColor(semanticTokens.statusImportantStroke), + }, + 'outline-informative': { + color: semanticTokens.statusInformativeTintForeground, + ...shorthands.borderColor(semanticTokens.statusInformativeStroke), + }, + 'outline-severe': { + color: tokens.colorPaletteDarkOrangeForeground3, // Missing semantic token equivalent + }, + 'outline-subtle': { + color: tokens.colorNeutralForegroundStaticInverted, // Missing semantic token equivalent + }, + 'outline-success': { + color: semanticTokens._ctrlBadgeStatusSuccessTintForeground3, + ...shorthands.borderColor(semanticTokens.statusSuccessStroke), + }, + 'outline-warning': { + color: semanticTokens._ctrlBadgeStatusWarningTintForeground2, + }, + + // appearance: tint + + tint: { + // No shared colors between tint appearances + }, + 'tint-brand': { + backgroundColor: semanticTokens.statusBrandTintBackground, + color: semanticTokens._ctrlBadgeStatusBrandTintForeground, + ...shorthands.borderColor(semanticTokens.statusBrandTintStroke), + }, + 'tint-danger': { + backgroundColor: semanticTokens._ctrlBadgeStatusDangerTintBackground, + color: semanticTokens._ctrlBadgeStatusDangerTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusDangerTintStroke), + }, + 'tint-important': { + backgroundColor: semanticTokens._ctrlBadgeStatusImportantTintBackground, + color: semanticTokens._ctrlBadgeStatusImportantTintForeground, + ...shorthands.borderColor(semanticTokens.statusImportantTintStroke), + }, + 'tint-informative': { + backgroundColor: semanticTokens.statusInformativeTintBackground, + color: semanticTokens.statusInformativeTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusInformativeTintStroke), + }, + 'tint-severe': { + //come back to this + backgroundColor: tokens.colorPaletteDarkOrangeBackground1, + color: tokens.colorPaletteDarkOrangeForeground1, + ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1), + }, + 'tint-subtle': { + //come back to this + backgroundColor: tokens.colorNeutralBackground1, + color: tokens.colorNeutralForeground3, + ...shorthands.borderColor(tokens.colorNeutralStroke2), + }, + 'tint-success': { + backgroundColor: semanticTokens._ctrlBadgeStatusSuccessTintBackground, + color: semanticTokens._ctrlBadgeStatusSuccessTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusSuccessTintStroke), + }, + 'tint-warning': { + backgroundColor: semanticTokens._ctrlBadgeStatusWarningTintBackground, + color: semanticTokens._ctrlBadgeStatusWarningTintForeground, + ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusWarningTintStroke), + }, +}); + +const useIconRootClassName = makeResetStyles({ + display: 'flex', + lineHeight: '1', + margin: `0 calc(-1 * ${semanticTokens._ctrlBadgePaddingTextSide})`, // Remove text padding added to root + fontSize: '12px', +}); + +const useIconStyles = makeStyles({ + beforeText: { + marginRight: `calc(${semanticTokens._ctrlBadgePaddingRightSide} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + afterText: { + marginLeft: `calc(${semanticTokens._ctrlBadgePaddingLeftSide} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + + beforeTextXL: { + marginRight: `calc(${semanticTokens._ctrlBadgePaddingRightSideXL} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + afterTextXL: { + marginLeft: `calc(${semanticTokens._ctrlBadgePaddingLeftSideXL} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + }, + + // size + + tiny: { + fontSize: '6px', + }, + 'extra-small': { + fontSize: '10px', + }, + small: { + fontSize: '12px', + }, + medium: { + // Set by useIconRootClassName + }, + large: { + fontSize: '16px', + }, + 'extra-large': { + fontSize: '20px', + }, +}); + +/** + * Applies style classnames to slots + */ +export const useSemanticBadgeStyles = (_state: unknown): BadgeState => { + 'use no memo'; + + const state = _state as BadgeState; + const rootClassName = useRootClassName(); + const rootStyles = useRootStyles(); + + const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny'; + + state.root.className = mergeClasses( + state.root.className, + badgeClassNames.root, + rootClassName, + smallToTiny && rootStyles.fontSmallToTiny, + rootStyles[state.size], + rootStyles[state.shape], + state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, + state.appearance === 'ghost' && rootStyles.borderGhost, + rootStyles[state.appearance], + rootStyles[`${state.appearance}-${state.color}` as const], + getSlotClassNameProp_unstable(state.root), + ); + + const iconRootClassName = useIconRootClassName(); + const iconStyles = useIconStyles(); + if (state.icon) { + let iconPositionClass; + if (state.root.children) { + if (state.size === 'extra-large') { + iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL; + } else { + iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText; + } + } + + state.icon.className = mergeClasses( + state.icon.className, + badgeClassNames.icon, + iconRootClassName, + iconPositionClass, + iconStyles[state.size], + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts new file mode 100644 index 0000000000000..dc2967c1b3ab4 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts @@ -0,0 +1,143 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { presenceBadgeClassNames, type PresenceBadgeState, type PresenceBadgeStatus } from '@fluentui/react-badge'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const getIsBusy = (status: PresenceBadgeStatus): boolean => { + if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') { + return true; + } + + return false; +}; + +const useRootClassName = makeResetStyles({ + display: 'inline-flex', + boxSizing: 'border-box', + alignItems: 'center', + justifyContent: 'center', + + borderRadius: semanticTokens.cornerCircular, + backgroundColor: semanticTokens.statusImportantForeground, + + // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background. + // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background + // using padding and backgroundClip. The icon has margin: -1px to account for the padding. + // (* except size="tiny", where backgroundClip is unset) + padding: '1px', + backgroundClip: 'content-box', +}); + +const useIconClassName = makeResetStyles({ + display: 'flex', + margin: '-1px', +}); + +const useStyles = makeStyles({ + statusBusy: { + color: semanticTokens._ctrlBadgeStatusBusyTintForeground, + }, + statusAway: { + color: semanticTokens.statusAwayForeground, + }, + statusAvailable: { + color: semanticTokens._ctrlBadgeStatusAvailableTintForeground, + }, + statusOffline: { + color: semanticTokens.statusInformativeTintForeground, + }, + statusOutOfOffice: { + color: tokens.colorPaletteBerryForeground3, + }, + statusUnknown: { + color: tokens.colorNeutralForeground3, + }, + outOfOffice: { + color: tokens.colorNeutralBackground1, + }, + outOfOfficeAvailable: { + color: tokens.colorPaletteLightGreenForeground3, + }, + outOfOfficeBusy: { + color: tokens.colorPaletteRedBackground3, + }, + outOfOfficeUnknown: { + color: tokens.colorNeutralForeground3, + }, + + // Icons are not resizeable, and these sizes are currently missing + // use `!important` to size the currently available icons to the missing ones + // + tiny: { + aspectRatio: '1', + width: '6px', + backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix + '& svg': { + width: '6px !important', + height: '6px !important', + }, + }, + large: { + aspectRatio: '1', + width: '20px', + '& svg': { + width: '20px !important', + height: '20px !important', + }, + }, + extraLarge: { + aspectRatio: '1', + width: '28px', + '& svg': { + width: '28px !important', + height: '28px !important', + }, + }, +}); + +/** + * Applies style classnames to slots + */ +export const useSemanticPresenceBadgeStyles = (_state: unknown): PresenceBadgeState => { + 'use no memo'; + + const state = _state as PresenceBadgeState; + const rootClassName = useRootClassName(); + const iconClassName = useIconClassName(); + const styles = useStyles(); + const isBusy = getIsBusy(state.status); + state.root.className = mergeClasses( + state.root.className, + presenceBadgeClassNames.root, + rootClassName, + isBusy && styles.statusBusy, + state.status === 'away' && styles.statusAway, + state.status === 'available' && styles.statusAvailable, + state.status === 'offline' && styles.statusOffline, + state.status === 'out-of-office' && styles.statusOutOfOffice, + state.status === 'unknown' && styles.statusUnknown, + state.outOfOffice && styles.outOfOffice, + state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, + state.outOfOffice && isBusy && styles.outOfOfficeBusy, + state.outOfOffice && + (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && + styles.statusOutOfOffice, + state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, + state.size === 'tiny' && styles.tiny, + state.size === 'large' && styles.large, + state.size === 'extra-large' && styles.extraLarge, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + presenceBadgeClassNames.icon, + iconClassName, + getSlotClassNameProp_unstable(state.icon), + ); + } + + 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 6c62598b0cb68..cd600070458dc 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 @@ -61,12 +61,16 @@ import { import { useSemanticMenuGroupHeaderStyles } from './Menu'; import { useSemanticRadioStyles } from './Radio'; import { useSemanticPersonaStyles } from './Persona'; +import { useSemanticBadgeStyles, useSemanticPresenceBadgeStyles } from './Badge'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles useAccordionHeaderStyles_unstable: useSemanticAccordionHeaderStyles, // Avatar styles useAvatarStyles_unstable: useSemanticAvatarStyles, + // Badge styles + useBadgeStyles_unstable: useSemanticBadgeStyles, + usePresenceBadgeStyles_unstable: useSemanticPresenceBadgeStyles, // Button styles useButtonStyles_unstable: useSemanticButtonStyles, useToggleButtonStyles_unstable: useSemanticToggleButtonStyles, 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 907d7f4e57dcc..64350c99c8ac5 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 @@ -6,6 +6,7 @@ export { useSemanticSplitButtonStyles, useSemanticToggleButtonStyles, } from './component-styles//Button'; +export { useSemanticBadgeStyles, useSemanticPresenceBadgeStyles } from './component-styles/Badge'; export { useSemanticAccordionHeaderStyles } from './component-styles/Accordion'; export { useSemanticAvatarStyles } from './component-styles/Avatar'; export { useSemanticDividerStyles } from './component-styles/Divider'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 408c4d860f397..2ab6f6cdc4e14 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -5602,13 +5602,13 @@ export const textRampLgItemHeaderLineHeight = "var(--smtc-text-ramp-lg-item-head export const textRampLgItemHeaderLineHeightRaw = "--smtc-text-ramp-lg-item-header-line-height"; // @public (undocumented) -export const textRampLgLegalFontSize = "var(--smtc-text-ramp-lg-legal-font-size, var(--smtc-text-global-caption1-font-size))"; +export const textRampLgLegalFontSize = "var(--smtc-text-ramp-lg-legal-font-size, var(--smtc-text-global-caption1-font-size, var(--fontSizeBase200)))"; // @public (undocumented) export const textRampLgLegalFontSizeRaw = "--smtc-text-ramp-lg-legal-font-size"; // @public (undocumented) -export const textRampLgLegalLineHeight = "var(--smtc-text-ramp-lg-legal-line-height, var(--smtc-text-global-caption1-line-height))"; +export const textRampLgLegalLineHeight = "var(--smtc-text-ramp-lg-legal-line-height, var(--smtc-text-global-caption1-line-height, var(--lineHeightBase200)))"; // @public (undocumented) export const textRampLgLegalLineHeightRaw = "--smtc-text-ramp-lg-legal-line-height"; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 59cc617324a9a..c6e653e941fd6 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -72,6 +72,7 @@ import { colorNeutralBackground5, colorNeutralForeground3, colorNeutralBackground4, + colorPaletteMarigoldBackground3, colorTransparentBackground, shadow64, } from '../legacy/tokens'; @@ -450,7 +451,7 @@ export const statusInformativeBackground = `var(${statusInformativeBackgroundRaw export const statusInformativeTintForeground = `var(${statusInformativeTintForegroundRaw}, ${colorNeutralForeground3})`; export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke1})`; export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw}, ${colorNeutralBackground4})`; -export const statusAwayForeground = `var(${statusAwayForegroundRaw})`; +export const statusAwayForeground = `var(${statusAwayForegroundRaw}, ${colorPaletteMarigoldBackground3})`; export const statusOofForeground = `var(${statusOofForegroundRaw})`; export const aiBrandStop1 = `var(${aiBrandStop1Raw})`; export const aiBrandStop2 = `var(${aiBrandStop2Raw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index c857af0893de7..e465d653bccbe 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -635,4 +635,12 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorTransparentBackgroundPressed', originalToken: 'nullColor', }, + _ctrlBadgeStatusBusyTintForeground: { + f2Token: 'colorPaletteRedBackground3', + originalToken: 'statusDangerTintForeground', + }, + _ctrlBadgeStatusAvailableTintForeground: { + f2Token: 'colorPaletteLightGreenForeground3', + originalToken: 'statusSuccessTintForeground', + }, }; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 5a637bb70a2b1..05e288a4d1691 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -234,6 +234,7 @@ export const fluentOverrides: FluentOverrides = { statusBrandTintStroke: { f2Token: 'colorBrandStroke2' }, statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, statusDangerForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, + statusAwayForeground: { f2Token: 'colorPaletteMarigoldBackground3' }, statusDangerStroke: { f2Token: 'colorPaletteRedBorder2' }, statusDangerTintBackground: { f2Token: 'colorStatusDangerBackground1' }, statusDangerTintForeground: { f2Token: 'colorPaletteRedForeground3' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 3f82bc36b6287..ca198e0268b37 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1937,5 +1937,7 @@ export { _ctrlTreePaddingTextTop, _nullBackgroundColorHover, _nullBackgroundColorPressed, + _ctrlBadgeStatusBusyTintForeground, + _ctrlBadgeStatusAvailableTintForeground, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 38bf9b9eb6c11..8fc9f86716135 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -359,6 +359,11 @@ export const colorBrandStroke2 = 'var(--colorBrandStroke2)'; * @public */ export const colorPaletteRedBackground3 = 'var(--colorPaletteRedBackground3)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground3 | `colorPaletteMarigoldBackground3`} design token. + * @public + */ +export const colorPaletteMarigoldBackground3 = 'var(--colorPaletteMarigoldBackground3)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground1 | `colorStatusDangerBackground1`} design token. * @public @@ -724,3 +729,8 @@ export const colorTransparentBackgroundHover = 'var(--colorTransparentBackground * @public */ export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground3 | `colorPaletteLightGreenForeground3`} design token. + * @public + */ +export const colorPaletteLightGreenForeground3 = 'var(--colorPaletteLightGreenForeground3)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 31c7fbc1f61e5..9041c12cadb15 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -139,6 +139,8 @@ import { spacingVerticalXXS, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, + colorPaletteRedBackground3, + colorPaletteLightGreenForeground3, } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, @@ -1272,3 +1274,17 @@ export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparen * please use nullColor instead. */ export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlBadgeStatusBusyTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedBackground3})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlBadgeStatusAvailableTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteLightGreenForeground3})`; From f052fe82c0b0c4564273caf941ce36b1c6c442d1 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 14 Jul 2025 17:49:25 -0700 Subject: [PATCH 5/8] Update presence badges to semantic --- .../useSemanticPresenceBadgeStyles.styles.ts | 13 ++++--- .../semantic-tokens/src/control/tokens.ts | 3 +- .../src/fluentLegacyVariants.ts | 16 ++++----- .../semantic-tokens/src/fluentOverrides.ts | 7 ++-- packages/semantic-tokens/src/index.ts | 4 +-- packages/semantic-tokens/src/legacy/tokens.ts | 25 +++++++------ .../src/legacyVariant/tokens.ts | 36 +++++++++---------- 7 files changed, 55 insertions(+), 49 deletions(-) diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts index dc2967c1b3ab4..b5363ebb356ab 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts @@ -1,5 +1,4 @@ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; -import { tokens } from '@fluentui/react-theme'; import { presenceBadgeClassNames, type PresenceBadgeState, type PresenceBadgeStatus } from '@fluentui/react-badge'; import * as semanticTokens from '@fluentui/semantic-tokens'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; @@ -48,22 +47,22 @@ const useStyles = makeStyles({ color: semanticTokens.statusInformativeTintForeground, }, statusOutOfOffice: { - color: tokens.colorPaletteBerryForeground3, + color: semanticTokens.statusOofForeground, }, statusUnknown: { - color: tokens.colorNeutralForeground3, + color: semanticTokens.statusInformativeForeground, }, outOfOffice: { - color: tokens.colorNeutralBackground1, + color: semanticTokens.statusImportantForeground, }, outOfOfficeAvailable: { - color: tokens.colorPaletteLightGreenForeground3, + color: semanticTokens._ctrlBadgeStatusAvailableTintForeground, }, outOfOfficeBusy: { - color: tokens.colorPaletteRedBackground3, + color: semanticTokens._ctrlBadgeStatusBusyTintForeground, }, outOfOfficeUnknown: { - color: tokens.colorNeutralForeground3, + color: semanticTokens.statusInformativeForeground, }, // Icons are not resizeable, and these sizes are currently missing diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index c6e653e941fd6..cf14e5ef5a2f3 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -73,6 +73,7 @@ import { colorNeutralForeground3, colorNeutralBackground4, colorPaletteMarigoldBackground3, + colorPaletteBerryForeground3, colorTransparentBackground, shadow64, } from '../legacy/tokens'; @@ -452,7 +453,7 @@ export const statusInformativeTintForeground = `var(${statusInformativeTintForeg export const statusInformativeTintStroke = `var(${statusInformativeTintStrokeRaw}, ${colorNeutralStroke1})`; export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw}, ${colorNeutralBackground4})`; export const statusAwayForeground = `var(${statusAwayForegroundRaw}, ${colorPaletteMarigoldBackground3})`; -export const statusOofForeground = `var(${statusOofForegroundRaw})`; +export const statusOofForeground = `var(${statusOofForegroundRaw}, ${colorPaletteBerryForeground3})`; export const aiBrandStop1 = `var(${aiBrandStop1Raw})`; export const aiBrandStop2 = `var(${aiBrandStop2Raw})`; export const aiBrandStop3 = `var(${aiBrandStop3Raw})`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index e465d653bccbe..0424bef51c3e9 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -111,10 +111,18 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'borderRadiusSmall', originalToken: 'ctrlBadgeCorner', }, + _ctrlBadgeStatusAvailableTintForeground: { + f2Token: 'colorPaletteLightGreenForeground3', + originalToken: 'statusSuccessTintForeground', + }, _ctrlBadgeStatusBrandTintForeground: { f2Token: 'colorBrandForeground2', originalToken: 'statusBrandTintForeground', }, + _ctrlBadgeStatusBusyTintForeground: { + f2Token: 'colorPaletteRedBackground3', + originalToken: 'statusDangerTintForeground', + }, _ctrlBadgeStatusDangerTintBackground: { f2Token: 'colorPaletteRedBackground1', originalToken: 'statusDangerTintBackground', @@ -635,12 +643,4 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'colorTransparentBackgroundPressed', originalToken: 'nullColor', }, - _ctrlBadgeStatusBusyTintForeground: { - f2Token: 'colorPaletteRedBackground3', - originalToken: 'statusDangerTintForeground', - }, - _ctrlBadgeStatusAvailableTintForeground: { - f2Token: 'colorPaletteLightGreenForeground3', - originalToken: 'statusSuccessTintForeground', - }, }; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 05e288a4d1691..69831da9f4b9b 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -227,6 +227,7 @@ export const fluentOverrides: FluentOverrides = { sizeCtrlLgIcon: { rawValue: '24px' }, sizeCtrlSmDefault: { rawValue: '32px' }, sizeCtrlSmIcon: { rawValue: '20px' }, + statusAwayForeground: { f2Token: 'colorPaletteMarigoldBackground3' }, statusBrandBackground: { f2Token: 'colorBrandBackground' }, statusBrandForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, statusBrandTintBackground: { f2Token: 'colorBrandBackground2' }, @@ -234,7 +235,6 @@ export const fluentOverrides: FluentOverrides = { statusBrandTintStroke: { f2Token: 'colorBrandStroke2' }, statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, statusDangerForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, - statusAwayForeground: { f2Token: 'colorPaletteMarigoldBackground3' }, statusDangerStroke: { f2Token: 'colorPaletteRedBorder2' }, statusDangerTintBackground: { f2Token: 'colorStatusDangerBackground1' }, statusDangerTintForeground: { f2Token: 'colorPaletteRedForeground3' }, @@ -251,6 +251,7 @@ export const fluentOverrides: FluentOverrides = { statusInformativeTintBackground: { f2Token: 'colorNeutralBackground4' }, statusInformativeTintForeground: { f2Token: 'colorNeutralForeground3' }, statusInformativeTintStroke: { f2Token: 'colorNeutralStroke1' }, + statusOofForeground: { f2Token: 'colorPaletteBerryForeground3' }, statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, statusSuccessForeground: { f2Token: 'colorNeutralForegroundOnBrand' }, statusSuccessStroke: { f2Token: 'colorPaletteGreenBorder2' }, @@ -327,6 +328,8 @@ export const fluentOverrides: FluentOverrides = { textRampLegalLineHeight: { f2Token: 'lineHeightBase200' }, textRampLgItemBodyFontSize: { f2Token: 'fontSizeBase400' }, 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 textRampReadingBodyFontSize: { f2Token: 'fontSizeBase300' }, textRampReadingBodyLineHeight: { f2Token: 'lineHeightBase300' }, @@ -341,6 +344,4 @@ export const fluentOverrides: FluentOverrides = { textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultRegularLetterSpacing: { rawValue: '0' }, textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, - 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 }; diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index ca198e0268b37..cca8f009ea94d 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1806,7 +1806,9 @@ export { _ctrlBadgePaddingRightSideXL, _ctrlBadgePaddingTextSide, _ctrlBadgeSmallTinyCorner, + _ctrlBadgeStatusAvailableTintForeground, _ctrlBadgeStatusBrandTintForeground, + _ctrlBadgeStatusBusyTintForeground, _ctrlBadgeStatusDangerTintBackground, _ctrlBadgeStatusDangerTintForeground, _ctrlBadgeStatusDangerTintStroke, @@ -1937,7 +1939,5 @@ export { _ctrlTreePaddingTextTop, _nullBackgroundColorHover, _nullBackgroundColorPressed, - _ctrlBadgeStatusBusyTintForeground, - _ctrlBadgeStatusAvailableTintForeground, } from './legacyVariant/tokens'; export { kumoSemanticTokens } from './themes/kumoTheme'; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 8fc9f86716135..1e6712199c719 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -344,6 +344,11 @@ export const spacingHorizontalNone = 'var(--spacingHorizontalNone)'; * @public */ export const spacingHorizontalL = 'var(--spacingHorizontalL)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground3 | `colorPaletteMarigoldBackground3`} design token. + * @public + */ +export const colorPaletteMarigoldBackground3 = 'var(--colorPaletteMarigoldBackground3)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorBrandBackground2 | `colorBrandBackground2`} design token. * @public @@ -359,11 +364,6 @@ export const colorBrandStroke2 = 'var(--colorBrandStroke2)'; * @public */ export const colorPaletteRedBackground3 = 'var(--colorPaletteRedBackground3)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteMarigoldBackground3 | `colorPaletteMarigoldBackground3`} design token. - * @public - */ -export const colorPaletteMarigoldBackground3 = 'var(--colorPaletteMarigoldBackground3)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorStatusDangerBackground1 | `colorStatusDangerBackground1`} design token. * @public @@ -394,6 +394,11 @@ export const colorNeutralBackground5 = 'var(--colorNeutralBackground5)'; * @public */ export const colorNeutralBackground4 = 'var(--colorNeutralBackground4)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteBerryForeground3 | `colorPaletteBerryForeground3`} design token. + * @public + */ +export const colorPaletteBerryForeground3 = 'var(--colorPaletteBerryForeground3)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorPaletteGreenBackground3 | `colorPaletteGreenBackground3`} design token. * @public @@ -589,6 +594,11 @@ export const strokeWidthThickest = 'var(--strokeWidthThickest)'; * @public */ export const borderRadiusLarge = 'var(--borderRadiusLarge)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground3 | `colorPaletteLightGreenForeground3`} design token. + * @public + */ +export const colorPaletteLightGreenForeground3 = 'var(--colorPaletteLightGreenForeground3)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground2 | `colorBrandForeground2`} design token. * @public @@ -729,8 +739,3 @@ export const colorTransparentBackgroundHover = 'var(--colorTransparentBackground * @public */ export const colorTransparentBackgroundPressed = 'var(--colorTransparentBackgroundPressed)'; -/** - * CSS custom property value for the {@link @fluentui/tokens#colorPaletteLightGreenForeground3 | `colorPaletteLightGreenForeground3`} design token. - * @public - */ -export const colorPaletteLightGreenForeground3 = 'var(--colorPaletteLightGreenForeground3)'; diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 9041c12cadb15..7f839b1aebc55 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -28,15 +28,15 @@ import { paddingCtrlTextTopRaw, cornerCtrlRestRaw, paddingCtrlTextSideRaw, + statusSuccessTintForegroundRaw, foregroundCtrlBrandRestRaw, - statusDangerTintBackgroundRaw, statusDangerTintForegroundRaw, + statusDangerTintBackgroundRaw, statusDangerTintStrokeRaw, statusImportantTintBackgroundRaw, statusImportantTintForegroundRaw, statusInformativeTintStrokeRaw, statusSuccessTintBackgroundRaw, - statusSuccessTintForegroundRaw, statusSuccessTintStrokeRaw, statusWarningBackgroundRaw, statusWarningTintBackgroundRaw, @@ -83,7 +83,9 @@ import { colorTransparentStroke, spacingHorizontalXXS, spacingHorizontalXS, + colorPaletteLightGreenForeground3, colorBrandForeground2, + colorPaletteRedBackground3, colorPaletteRedBackground1, colorPaletteRedForeground1, colorPaletteRedBorder1, @@ -139,8 +141,6 @@ import { spacingVerticalXXS, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, - colorPaletteRedBackground3, - colorPaletteLightGreenForeground3, } from '../legacy/tokens'; import { backgroundCtrlSubtleRestRaw, @@ -357,6 +357,13 @@ export const _ctrlBadgePaddingTextSide = `var(${paddingCtrlTextSideRaw}, ${spaci * please use ctrlBadgeCorner instead. */ export const _ctrlBadgeSmallTinyCorner = `var(${ctrlBadgeCornerRaw}, ${borderRadiusSmall})`; +/** + * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusSuccessTintForeground instead. + */ +export const _ctrlBadgeStatusAvailableTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteLightGreenForeground3})`; /** * This is a legacy variant for statusBrandTintForeground to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -364,6 +371,13 @@ export const _ctrlBadgeSmallTinyCorner = `var(${ctrlBadgeCornerRaw}, ${borderRad * please use statusBrandTintForeground instead. */ export const _ctrlBadgeStatusBrandTintForeground = `var(${statusBrandTintForegroundRaw}, var(${foregroundCtrlBrandRestRaw}, ${colorBrandForeground2}))`; +/** + * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use statusDangerTintForeground instead. + */ +export const _ctrlBadgeStatusBusyTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedBackground3})`; /** * This is a legacy variant for statusDangerTintBackground to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. @@ -1274,17 +1288,3 @@ export const _nullBackgroundColorHover = `var(${nullColorRaw}, ${colorTransparen * please use nullColor instead. */ export const _nullBackgroundColorPressed = `var(${nullColorRaw}, ${colorTransparentBackgroundPressed})`; -/** - * This is a legacy variant for statusDangerTintForeground to enable backwards compatibility. - * It's purpose is to support Fluent UI legacy fallback variants only. - * This token is not intended for use in new semantic theme implementations - * please use statusDangerTintForeground instead. - */ -export const _ctrlBadgeStatusBusyTintForeground = `var(${statusDangerTintForegroundRaw}, ${colorPaletteRedBackground3})`; -/** - * This is a legacy variant for statusSuccessTintForeground to enable backwards compatibility. - * It's purpose is to support Fluent UI legacy fallback variants only. - * This token is not intended for use in new semantic theme implementations - * please use statusSuccessTintForeground instead. - */ -export const _ctrlBadgeStatusAvailableTintForeground = `var(${statusSuccessTintForegroundRaw}, ${colorPaletteLightGreenForeground3})`; From 1bb126fd76d39d5bdb5db5ee2743a363221df20d Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 14 Jul 2025 17:50:45 -0700 Subject: [PATCH 6/8] Revert badge to original styles since moved to semantic --- .../components/Badge/useBadgeStyles.styles.ts | 156 ++++++++---------- 1 file changed, 72 insertions(+), 84 deletions(-) diff --git a/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts b/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts index b56ddce2324fe..cedfe6a3c3a1a 100644 --- a/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts +++ b/packages/react-components/react-badge/library/src/components/Badge/useBadgeStyles.styles.ts @@ -1,8 +1,7 @@ import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; -import { tokens } from '@fluentui/react-theme'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; import type { BadgeSlots, BadgeState } from './Badge.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import * as semanticTokens from '@fluentui/semantic-tokens'; export const badgeClassNames: SlotClassNames = { root: 'fui-Badge', @@ -11,6 +10,7 @@ export const badgeClassNames: SlotClassNames = { // The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to. // Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon. +const textPadding = tokens.spacingHorizontalXXS; const useRootClassName = makeResetStyles({ display: 'inline-flex', @@ -18,16 +18,13 @@ const useRootClassName = makeResetStyles({ alignItems: 'center', justifyContent: 'center', position: 'relative', - fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily, - fontWeight: semanticTokens.textStyleDefaultHeaderWeight, - fontSize: semanticTokens.textRampLegalFontSize, - lineHeight: semanticTokens.textRampLegalLineHeight, + ...typographyStyles.caption1Strong, height: '20px', minWidth: '20px', - padding: `0 calc(${semanticTokens.ctrlBadgePadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, - borderRadius: semanticTokens.cornerCircular, + padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`, + borderRadius: tokens.borderRadiusCircular, // Use a transparent stroke (rather than no border) so the border is visible in high contrast - borderColor: semanticTokens._ctrlBadgeNullColor, + borderColor: tokens.colorTransparentStroke, '::after': { content: '""', @@ -38,17 +35,14 @@ const useRootClassName = makeResetStyles({ right: 0, borderStyle: 'solid', borderColor: 'inherit', - borderWidth: semanticTokens.strokeWidthDefault, + borderWidth: tokens.strokeWidthThin, borderRadius: 'inherit', }, }); const useRootStyles = makeStyles({ fontSmallToTiny: { - fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, - fontWeight: semanticTokens._ctrlBadgeTextStyleSemiBoldWeight, - fontSize: semanticTokens.textRampSmLegalFontSize, - lineHeight: semanticTokens.textRampSmLegalLineHeight, + ...typographyStyles.caption2Strong, }, // size @@ -72,35 +66,31 @@ const useRootStyles = makeStyles({ small: { minWidth: '16px', height: '16px', - padding: `0 calc(${semanticTokens.ctrlBadgeSmPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`, }, medium: { // Set by useRootClassName }, large: { - fontSize: semanticTokens.textRampLgLegalFontSize, - lineHeight: semanticTokens.textRampLgLegalLineHeight, minWidth: '24px', height: '24px', - padding: `0 calc(${semanticTokens.ctrlBadgeLgPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`, }, 'extra-large': { - fontSize: semanticTokens.textRampLgLegalFontSize, - lineHeight: semanticTokens.textRampLgLegalLineHeight, minWidth: '32px', height: '32px', - padding: `0 calc(${semanticTokens._ctrlBadgeXLPadding} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`, }, // shape - square: { borderRadius: semanticTokens.cornerZero }, - rounded: { borderRadius: semanticTokens.ctrlBadgeCorner }, - roundedSmallToTiny: { borderRadius: semanticTokens._ctrlBadgeSmallTinyCorner }, + square: { borderRadius: tokens.borderRadiusNone }, + rounded: { borderRadius: tokens.borderRadiusMedium }, + roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall }, circular: { // Set by useRootClassName }, - // hide the border when appearance is "ghost" + // hide the boder when appearance is "ghost" borderGhost: { // The border is applied in an ::after pseudo-element because it should not affect layout. @@ -116,36 +106,36 @@ const useRootStyles = makeStyles({ // Set by useRootClassName }, 'filled-brand': { - backgroundColor: semanticTokens.statusBrandBackground, - color: semanticTokens.statusBrandForeground, + backgroundColor: tokens.colorBrandBackground, + color: tokens.colorNeutralForegroundOnBrand, }, 'filled-danger': { - backgroundColor: semanticTokens.statusDangerBackground, - color: semanticTokens.statusDangerForeground, + backgroundColor: tokens.colorPaletteRedBackground3, + color: tokens.colorNeutralForegroundOnBrand, }, 'filled-important': { - backgroundColor: semanticTokens.statusImportantBackground, - color: semanticTokens.statusImportantForeground, + backgroundColor: tokens.colorNeutralForeground1, + color: tokens.colorNeutralBackground1, }, 'filled-informative': { - backgroundColor: semanticTokens.statusInformativeBackground, - color: semanticTokens.statusInformativeForeground, + backgroundColor: tokens.colorNeutralBackground5, + color: tokens.colorNeutralForeground3, }, 'filled-severe': { - backgroundColor: tokens.colorPaletteDarkOrangeBackground3, //come back to this one + backgroundColor: tokens.colorPaletteDarkOrangeBackground3, color: tokens.colorNeutralForegroundOnBrand, }, 'filled-subtle': { - backgroundColor: tokens.colorNeutralBackground1, //come back to this one + backgroundColor: tokens.colorNeutralBackground1, color: tokens.colorNeutralForeground1, }, 'filled-success': { - backgroundColor: semanticTokens.statusSuccessBackground, - color: semanticTokens.statusSuccessForeground, + backgroundColor: tokens.colorPaletteGreenBackground3, + color: tokens.colorNeutralForegroundOnBrand, }, 'filled-warning': { - backgroundColor: semanticTokens._ctrlBadgeStatusWarningBackground, - color: semanticTokens.statusWarningForeground, + backgroundColor: tokens.colorPaletteYellowBackground3, + color: tokens.colorNeutralForeground1Static, }, // appearance: ghost @@ -154,28 +144,28 @@ const useRootStyles = makeStyles({ // No shared colors between ghost appearances }, 'ghost-brand': { - color: semanticTokens.statusBrandTintForeground, + color: tokens.colorBrandForeground1, }, 'ghost-danger': { - color: semanticTokens.statusDangerTintForeground, + color: tokens.colorPaletteRedForeground3, }, 'ghost-important': { - color: semanticTokens.statusImportantTintForeground, + color: tokens.colorNeutralForeground1, }, 'ghost-informative': { - color: semanticTokens.statusInformativeTintForeground, + color: tokens.colorNeutralForeground3, }, 'ghost-severe': { - color: tokens.colorPaletteDarkOrangeForeground3, //come back to this one + color: tokens.colorPaletteDarkOrangeForeground3, }, 'ghost-subtle': { - color: tokens.colorNeutralForegroundStaticInverted, //come back to this one + color: tokens.colorNeutralForegroundStaticInverted, }, 'ghost-success': { - color: semanticTokens._ctrlBadgeStatusSuccessTintForeground3, + color: tokens.colorPaletteGreenForeground3, }, 'ghost-warning': { - color: semanticTokens._ctrlBadgeStatusWarningTintForeground2, + color: tokens.colorPaletteYellowForeground2, }, // appearance: outline @@ -184,32 +174,32 @@ const useRootStyles = makeStyles({ ...shorthands.borderColor('currentColor'), }, 'outline-brand': { - color: semanticTokens.statusBrandTintForeground, + color: tokens.colorBrandForeground1, }, 'outline-danger': { - color: semanticTokens.statusDangerTintForeground, - ...shorthands.borderColor(semanticTokens.statusDangerStroke), + color: tokens.colorPaletteRedForeground3, + ...shorthands.borderColor(tokens.colorPaletteRedBorder2), }, 'outline-important': { - color: semanticTokens.statusImportantTintForeground, - ...shorthands.borderColor(semanticTokens.statusImportantStroke), + color: tokens.colorNeutralForeground3, + ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible), }, 'outline-informative': { - color: semanticTokens.statusInformativeTintForeground, - ...shorthands.borderColor(semanticTokens.statusInformativeStroke), + color: tokens.colorNeutralForeground3, + ...shorthands.borderColor(tokens.colorNeutralStroke2), }, 'outline-severe': { - color: tokens.colorPaletteDarkOrangeForeground3, //come back to this one + color: tokens.colorPaletteDarkOrangeForeground3, }, 'outline-subtle': { - color: tokens.colorNeutralForegroundStaticInverted, //come back to this one + color: tokens.colorNeutralForegroundStaticInverted, }, 'outline-success': { - color: semanticTokens._ctrlBadgeStatusSuccessTintForeground3, - ...shorthands.borderColor(semanticTokens.statusSuccessStroke), + color: tokens.colorPaletteGreenForeground3, + ...shorthands.borderColor(tokens.colorPaletteGreenBorder2), }, 'outline-warning': { - color: semanticTokens._ctrlBadgeStatusWarningTintForeground2, + color: tokens.colorPaletteYellowForeground2, }, // appearance: tint @@ -218,69 +208,67 @@ const useRootStyles = makeStyles({ // No shared colors between tint appearances }, 'tint-brand': { - backgroundColor: semanticTokens.statusBrandTintBackground, - color: semanticTokens._ctrlBadgeStatusBrandTintForeground, - ...shorthands.borderColor(semanticTokens.statusBrandTintStroke), + backgroundColor: tokens.colorBrandBackground2, + color: tokens.colorBrandForeground2, + ...shorthands.borderColor(tokens.colorBrandStroke2), }, 'tint-danger': { - backgroundColor: semanticTokens._ctrlBadgeStatusDangerTintBackground, - color: semanticTokens._ctrlBadgeStatusDangerTintForeground, - ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusDangerTintStroke), + backgroundColor: tokens.colorPaletteRedBackground1, + color: tokens.colorPaletteRedForeground1, + ...shorthands.borderColor(tokens.colorPaletteRedBorder1), }, 'tint-important': { - backgroundColor: semanticTokens._ctrlBadgeStatusImportantTintBackground, - color: semanticTokens._ctrlBadgeStatusImportantTintForeground, - ...shorthands.borderColor(semanticTokens.statusImportantTintStroke), + backgroundColor: tokens.colorNeutralForeground3, + color: tokens.colorNeutralBackground1, + ...shorthands.borderColor(tokens.colorTransparentStroke), }, 'tint-informative': { - backgroundColor: semanticTokens.statusInformativeTintBackground, - color: semanticTokens.statusInformativeTintForeground, - ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusInformativeTintStroke), + backgroundColor: tokens.colorNeutralBackground4, + color: tokens.colorNeutralForeground3, + ...shorthands.borderColor(tokens.colorNeutralStroke2), }, 'tint-severe': { - //come back to this backgroundColor: tokens.colorPaletteDarkOrangeBackground1, color: tokens.colorPaletteDarkOrangeForeground1, ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1), }, 'tint-subtle': { - //come back to this backgroundColor: tokens.colorNeutralBackground1, color: tokens.colorNeutralForeground3, ...shorthands.borderColor(tokens.colorNeutralStroke2), }, 'tint-success': { - backgroundColor: semanticTokens._ctrlBadgeStatusSuccessTintBackground, - color: semanticTokens._ctrlBadgeStatusSuccessTintForeground, - ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusSuccessTintStroke), + backgroundColor: tokens.colorPaletteGreenBackground1, + color: tokens.colorPaletteGreenForeground1, + ...shorthands.borderColor(tokens.colorPaletteGreenBorder1), }, 'tint-warning': { - backgroundColor: semanticTokens._ctrlBadgeStatusWarningTintBackground, - color: semanticTokens._ctrlBadgeStatusWarningTintForeground, - ...shorthands.borderColor(semanticTokens._ctrlBadgeStatusWarningTintStroke), + backgroundColor: tokens.colorPaletteYellowBackground1, + color: tokens.colorPaletteYellowForeground1, + ...shorthands.borderColor(tokens.colorPaletteYellowBorder1), }, }); const useIconRootClassName = makeResetStyles({ display: 'flex', lineHeight: '1', - margin: `0 calc(-1 * ${semanticTokens._ctrlBadgePaddingTextSide})`, // Remove text padding added to root + margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root fontSize: '12px', }); const useIconStyles = makeStyles({ beforeText: { - marginRight: `calc(${semanticTokens._ctrlBadgePaddingRightSide} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`, }, afterText: { - marginLeft: `calc(${semanticTokens._ctrlBadgePaddingLeftSide} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`, }, beforeTextXL: { - marginRight: `calc(${semanticTokens._ctrlBadgePaddingRightSideXL} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`, }, afterTextXL: { - marginLeft: `calc(${semanticTokens._ctrlBadgePaddingLeftSideXL} + ${semanticTokens._ctrlBadgePaddingTextSide})`, + marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`, }, // size From d6927455dbdd5ad55e42c3b472a3f40268f545a4 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 14 Jul 2025 18:12:08 -0700 Subject: [PATCH 7/8] Add API files --- .../library/etc/semantic-style-hooks-preview.api.md | 4 ++++ packages/semantic-tokens/etc/semantic-tokens.api.md | 10 ++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) 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 00a9351c2331a..9b7fbd66d132d 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 @@ -38,6 +38,7 @@ import { MessageBarBodyState } from '@fluentui/react-message-bar'; import { MessageBarState } from '@fluentui/react-message-bar'; import { MessageBarTitleState } from '@fluentui/react-message-bar'; import { PersonaState } from '@fluentui/react-persona'; +import { PresenceBadgeState } from '@fluentui/react-badge'; import { ProgressBarState } from '@fluentui/react-progress'; import { RadioState } from '@fluentui/react-radio'; import { RatingDisplayState } from '@fluentui/react-rating'; @@ -160,6 +161,9 @@ export const useSemanticOverlayDrawerSurfaceStyles: (_state: unknown) => DialogS // @public export const useSemanticPersonaStyles: (_state: unknown) => PersonaState; +// @public +export const useSemanticPresenceBadgeStyles: (_state: unknown) => PresenceBadgeState; + // @public export const useSemanticProgressBarStyles: (_state: unknown) => ProgressBarState; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 2ab6f6cdc4e14..281c382e537a2 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -916,9 +916,15 @@ export const ctrlBadgeSmTextPaddingTop = "var(--smtc-ctrl-badge-sm-text-padding- // @public (undocumented) export const ctrlBadgeSmTextPaddingTopRaw = "--smtc-ctrl-badge-sm-text-padding-top"; +// @public +export const _ctrlBadgeStatusAvailableTintForeground = "var(--smtc-status-success-tint-foreground, var(--colorPaletteLightGreenForeground3))"; + // @public export const _ctrlBadgeStatusBrandTintForeground = "var(--smtc-status-brand-tint-foreground, var(--smtc-foreground-ctrl-brand-rest, var(--colorBrandForeground2)))"; +// @public +export const _ctrlBadgeStatusBusyTintForeground = "var(--smtc-status-danger-tint-foreground, var(--colorPaletteRedBackground3))"; + // @public export const _ctrlBadgeStatusDangerTintBackground = "var(--smtc-status-danger-tint-background, var(--colorPaletteRedBackground1))"; @@ -4678,7 +4684,7 @@ export const sizeCtrlSmIcon = "var(--smtc-size-ctrl-sm-icon, 20px)"; export const sizeCtrlSmIconRaw = "--smtc-size-ctrl-sm-icon"; // @public (undocumented) -export const statusAwayForeground = "var(--smtc-status-away-foreground)"; +export const statusAwayForeground = "var(--smtc-status-away-foreground, var(--colorPaletteMarigoldBackground3))"; // @public (undocumented) export const statusAwayForegroundRaw = "--smtc-status-away-foreground"; @@ -4864,7 +4870,7 @@ export const statusNeutralTintStroke = "var(--smtc-status-neutral-tint-stroke)"; export const statusNeutralTintStrokeRaw = "--smtc-status-neutral-tint-stroke"; // @public (undocumented) -export const statusOofForeground = "var(--smtc-status-oof-foreground)"; +export const statusOofForeground = "var(--smtc-status-oof-foreground, var(--colorPaletteBerryForeground3))"; // @public (undocumented) export const statusOofForegroundRaw = "--smtc-status-oof-foreground"; From f5121d073a2c872b5b0e5a12f66e3457538c3ec8 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 14 Jul 2025 18:22:58 -0700 Subject: [PATCH 8/8] Remove underlying package changes --- ...i-react-badge-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json | 7 ------- packages/react-components/react-badge/library/package.json | 1 - 2 files changed, 8 deletions(-) delete mode 100644 change/@fluentui-react-badge-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json diff --git a/change/@fluentui-react-badge-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json b/change/@fluentui-react-badge-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json deleted file mode 100644 index 32d7d23f431be..0000000000000 --- a/change/@fluentui-react-badge-d0cb0bb2-4e30-4f3d-abc4-a70e5a40523d.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "Feat: Add semantic tokens to Badge\"", - "packageName": "@fluentui/react-badge", - "email": "terynkum@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/react-components/react-badge/library/package.json b/packages/react-components/react-badge/library/package.json index fb894be4b2935..633fe850136a6 100644 --- a/packages/react-components/react-badge/library/package.json +++ b/packages/react-components/react-badge/library/package.json @@ -23,7 +23,6 @@ "@fluentui/react-shared-contexts": "^9.23.1", "@fluentui/react-theme": "^9.1.24", "@fluentui/react-utilities": "^9.19.0", - "@fluentui/semantic-tokens": "0.0.0-alpha.1", "@griffel/react": "^1.5.22", "@swc/helpers": "^0.5.1" },