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 1a7e5816aa48a9..9b7fbd66d132d7 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'; @@ -37,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'; @@ -63,6 +65,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; @@ -156,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/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 6213549059a70a..5ccec0400537a6 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 00000000000000..e9cc09f99f64a8 --- /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 00000000000000..85b0d5103f2d42 --- /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 00000000000000..b5363ebb356ab0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Badge/useSemanticPresenceBadgeStyles.styles.ts @@ -0,0 +1,142 @@ +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; +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: semanticTokens.statusOofForeground, + }, + statusUnknown: { + color: semanticTokens.statusInformativeForeground, + }, + outOfOffice: { + color: semanticTokens.statusImportantForeground, + }, + outOfOfficeAvailable: { + color: semanticTokens._ctrlBadgeStatusAvailableTintForeground, + }, + outOfOfficeBusy: { + color: semanticTokens._ctrlBadgeStatusBusyTintForeground, + }, + outOfOfficeUnknown: { + color: semanticTokens.statusInformativeForeground, + }, + + // 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 6c62598b0cb687..cd600070458dc4 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 907d7f4e57dcc7..64350c99c8ac5d 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 bc8332f3d1fc22..281c382e537a24 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,60 @@ 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))"; + +// @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 +982,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)"; @@ -4603,19 +4684,19 @@ 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"; // @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 +4708,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 +4732,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 +4762,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 +4786,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"; @@ -4789,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"; @@ -4801,13 +4882,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 +4918,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 +5572,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"; @@ -5527,13 +5608,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"; @@ -5671,13 +5752,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 ad02e02f056912..f41ed94e29ca1e 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 af103f8aa07900..cf14e5ef5a2f31 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,12 @@ import { colorStatusSuccessBorder1, colorStatusSuccessForeground1, colorNeutralBackground3, + colorTransparentStroke, + colorNeutralBackground5, + colorNeutralForeground3, + colorNeutralBackground4, + colorPaletteMarigoldBackground3, + colorPaletteBerryForeground3, colorTransparentBackground, shadow64, } from '../legacy/tokens'; @@ -422,8 +430,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,16 +444,16 @@ 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 statusAwayForeground = `var(${statusAwayForegroundRaw})`; -export const statusOofForeground = `var(${statusOofForegroundRaw})`; +export const statusInformativeTintBackground = `var(${statusInformativeTintBackgroundRaw}, ${colorNeutralBackground4})`; +export const statusAwayForeground = `var(${statusAwayForegroundRaw}, ${colorPaletteMarigoldBackground3})`; +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 e665ba86950961..0424bef51c3e9f 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,114 @@ 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', + }, + _ctrlBadgeStatusAvailableTintForeground: { + f2Token: 'colorPaletteLightGreenForeground3', + originalToken: 'statusSuccessTintForeground', + }, + _ctrlBadgeStatusBrandTintForeground: { + f2Token: 'colorBrandForeground2', + originalToken: 'statusBrandTintForeground', + }, + _ctrlBadgeStatusBusyTintForeground: { + f2Token: 'colorPaletteRedBackground3', + originalToken: 'statusDangerTintForeground', + }, + _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', + }, + _ctrlBadgeXLPadding: { + f2Token: 'spacingHorizontalSNudge', + originalToken: 'ctrlBadgeLgPadding', + }, _ctrlButtonGapInsideDefault: { f2Token: 'spacingHorizontalSNudge', originalToken: 'gapInsideCtrlDefault', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 4cfe3ccf36f643..69831da9f4b9b1 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,39 @@ 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' }, + 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' }, + statusOofForeground: { f2Token: 'colorPaletteBerryForeground3' }, 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,8 +324,12 @@ 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' }, + 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' }, @@ -307,6 +337,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 7147951e1a7a1a..cca8f009ea94df 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1799,6 +1799,33 @@ export { _ctrlAvatarCornerGroupXLg, _ctrlAvatarPresenceBadgeStrokeWidthLg, _ctrlAvatarPresenceBadgeStrokeWidthSm, + _ctrlBadgeNullColor, + _ctrlBadgePaddingLeftSide, + _ctrlBadgePaddingLeftSideXL, + _ctrlBadgePaddingRightSide, + _ctrlBadgePaddingRightSideXL, + _ctrlBadgePaddingTextSide, + _ctrlBadgeSmallTinyCorner, + _ctrlBadgeStatusAvailableTintForeground, + _ctrlBadgeStatusBrandTintForeground, + _ctrlBadgeStatusBusyTintForeground, + _ctrlBadgeStatusDangerTintBackground, + _ctrlBadgeStatusDangerTintForeground, + _ctrlBadgeStatusDangerTintStroke, + _ctrlBadgeStatusImportantTintBackground, + _ctrlBadgeStatusImportantTintForeground, + _ctrlBadgeStatusInformativeTintStroke, + _ctrlBadgeStatusSuccessTintBackground, + _ctrlBadgeStatusSuccessTintForeground, + _ctrlBadgeStatusSuccessTintForeground3, + _ctrlBadgeStatusSuccessTintStroke, + _ctrlBadgeStatusWarningBackground, + _ctrlBadgeStatusWarningTintBackground, + _ctrlBadgeStatusWarningTintForeground, + _ctrlBadgeStatusWarningTintForeground2, + _ctrlBadgeStatusWarningTintStroke, + _ctrlBadgeTextStyleSemiBoldWeight, + _ctrlBadgeXLPadding, _ctrlButtonGapInsideDefault, _ctrlCheckboxBorderColorChecked, _ctrlCheckboxBorderColorCheckedHover, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index b9bd9e6ecb18b2..1e6712199c7199 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,21 @@ 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 + */ +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 +384,31 @@ 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#colorPaletteBerryForeground3 | `colorPaletteBerryForeground3`} design token. + * @public + */ +export const colorPaletteBerryForeground3 = 'var(--colorPaletteBerryForeground3)'; /** * 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 +429,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 +594,76 @@ 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 + */ +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 @@ -614,11 +729,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 diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index d5974f2f1f79b4..7f839b1aebc551 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,22 @@ import { foregroundCtrlNeutralPrimaryRestRaw, paddingCtrlTextTopRaw, cornerCtrlRestRaw, + paddingCtrlTextSideRaw, + statusSuccessTintForegroundRaw, + foregroundCtrlBrandRestRaw, + statusDangerTintForegroundRaw, + statusDangerTintBackgroundRaw, + statusDangerTintStrokeRaw, + statusImportantTintBackgroundRaw, + statusImportantTintForegroundRaw, + statusInformativeTintStrokeRaw, + statusSuccessTintBackgroundRaw, + statusSuccessTintStrokeRaw, + statusWarningBackgroundRaw, + statusWarningTintBackgroundRaw, + statusWarningTintForegroundRaw, + statusWarningTintStrokeRaw, + textStyleDefaultRegularWeightRaw, gapInsideCtrlDefaultRaw, backgroundCtrlBrandHoverRaw, backgroundCtrlBrandPressedRaw, @@ -34,15 +51,12 @@ import { foregroundCtrlNeutralSecondaryRestRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, - textStyleDefaultRegularWeightRaw, sizeCtrlDefaultRaw, paddingCtrlHorizontalDefaultRaw, - paddingCtrlTextSideRaw, textGlobalBody3FontSizeRaw, cornerFlyoutRestRaw, shadowFlyoutRaw, paddingContentAlignDefaultRaw, - statusDangerTintForegroundRaw, gapBetweenCtrlDefaultRaw, paddingContentAlignOutdentIconOnSubtleRaw, textGlobalBody2LineHeightRaw, @@ -53,7 +67,6 @@ import { textGlobalBody3LineHeightRaw, foregroundCtrlBrandHoverRaw, foregroundCtrlBrandPressedRaw, - foregroundCtrlBrandRestRaw, } from '../control/variables'; import { colorTransparentBackground, @@ -67,10 +80,31 @@ import { borderRadiusSmall, borderRadiusXLarge, strokeWidthThin, + colorTransparentStroke, + spacingHorizontalXXS, + spacingHorizontalXS, + colorPaletteLightGreenForeground3, + colorBrandForeground2, + colorPaletteRedBackground3, + colorPaletteRedBackground1, + colorPaletteRedForeground1, + colorPaletteRedBorder1, + colorNeutralForeground3, + colorNeutralBackground1, + colorNeutralStroke2, + colorPaletteGreenBackground1, + colorPaletteGreenForeground1, + colorPaletteGreenForeground3, + colorPaletteGreenBorder1, + colorPaletteYellowBackground3, + colorPaletteYellowBackground1, + colorPaletteYellowForeground1, + colorPaletteYellowForeground2, + colorPaletteYellowBorder1, + fontWeightSemibold, spacingHorizontalSNudge, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, - colorNeutralForeground3, colorNeutralForeground2, colorCompoundBrandBackgroundPressed, colorCompoundBrandStroke, @@ -81,15 +115,12 @@ import { colorCompoundBrandForeground1Pressed, colorTransparentStrokeInteractive, colorNeutralBackground3, - colorNeutralBackground1, colorNeutralForeground4, - fontWeightSemibold, spacingVerticalSNudge, fontSizeBase200, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, shadow16, - colorTransparentStroke, spacingVerticalM, colorStatusDangerForeground1, spacingHorizontalM, @@ -107,7 +138,6 @@ import { colorNeutralForeground2Hover, colorNeutralForeground2Pressed, spacingHorizontalMNudge, - spacingHorizontalXXS, spacingVerticalXXS, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, @@ -128,6 +158,7 @@ import { foregroundCtrlOnTransparentPressedRaw, foregroundCtrlOnTransparentRestRaw, paddingCtrlTextBottomRaw, + statusBrandTintForegroundRaw, strokeCtrlOnActiveBrandHoverRaw, foregroundContentNeutralPrimaryRaw, strokeCtrlOnActiveBrandPressedRaw, @@ -277,6 +308,195 @@ 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 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. + * 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 _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. + * 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. + * 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 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. + * 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 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 _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. + * 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 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. + * 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. diff --git a/packages/semantic-tokens/src/optional/tokens.ts b/packages/semantic-tokens/src/optional/tokens.ts index bc03886629bf31..c3127444097cc8 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}))`; @@ -471,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}))`; @@ -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}))`;