From 0282825e4a9c70754006916bfb9fc7b51ed758ed Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 14 May 2025 10:56:02 -0700 Subject: [PATCH 1/4] Squish changes --- packages/semantic-tokens/src/fluentOverrides.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 8b99894366fd72..f03c8b805565b5 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -11,6 +11,7 @@ export type FluentOverrideValue = export type FluentOverrides = Record; export const fluentOverrides: FluentOverrides = { + cornerZero: { f2Token: 'borderRadiusNone' }, ctrlFocusOuterStroke: { f2Token: 'colorStrokeFocus2' }, ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' }, ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' }, @@ -18,9 +19,22 @@ export const fluentOverrides: FluentOverrides = { ctrlLinkForegroundNeutralHover: { f2Token: 'colorNeutralForeground2Hover' }, ctrlLinkForegroundNeutralPressed: { f2Token: 'colorNeutralForeground2Pressed' }, ctrlLinkForegroundNeutralRest: { f2Token: 'colorNeutralForeground2' }, + ctrlProgressBackgroundEmpty: { f2Token: 'colorNeutralBackground6' }, + ctrlProgressBackgroundFilled: { f2Token: 'colorCompoundBrandBackground' }, + ctrlProgressCorner: { f2Token: 'borderRadiusMedium' }, + ctrlProgressHeightEmpty: { rawValue: '2px' }, + ctrlProgressHeightFilled: { rawValue: '100%' }, + ctrlProgressLgHeightEmpty: { rawValue: '4px' }, + ctrlProgressLgHeightFilled: { rawValue: '100%' }, foregroundCtrlNeutralPrimaryDisabled: { f2Token: 'colorNeutralForegroundDisabled' }, + statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, + statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, + statusWarningBackground: { f2Token: 'colorPaletteDarkOrangeBackground3' }, + strokewidthDefault: { f2Token: 'strokeWidthThin' }, strokeWidthDefault: { f2Token: 'strokeWidthThin' }, + textGlobalBody3Fontsize: { f2Token: 'fontSizeBase300' }, textGlobalBody3FontSize: { f2Token: 'fontSizeBase300' }, + textStyleDefaultRegularFontfamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, }; From a816db76ddbb649c6a5fd65c4ce030c73720ff92 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 14 May 2025 10:56:48 -0700 Subject: [PATCH 2/4] Squish changes --- ...-7802143c-d54f-4bd3-9e8e-075ca4cff496.json | 7 ++++ .../react-progress/library/package.json | 1 + .../useProgressBarStyles.styles.ts | 36 ++++++++++--------- 3 files changed, 27 insertions(+), 17 deletions(-) create mode 100644 change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json diff --git a/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json b/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json new file mode 100644 index 00000000000000..420998513297ea --- /dev/null +++ b/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Feat: Progress Bar", + "packageName": "@fluentui/react-progress", + "email": "xuehua@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-progress/library/package.json b/packages/react-components/react-progress/library/package.json index c7598a894ea502..f467436e4e9d9c 100644 --- a/packages/react-components/react-progress/library/package.json +++ b/packages/react-components/react-progress/library/package.json @@ -23,6 +23,7 @@ "@fluentui/react-shared-contexts": "^9.23.1", "@fluentui/react-theme": "^9.1.24", "@fluentui/react-utilities": "^9.19.0", + "@fluentui/semantic-tokens": "0.0.0-alpha.1", "@griffel/react": "^1.5.22", "@swc/helpers": "^0.5.1" }, diff --git a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts index 75d46c9097e555..dd9fc44ee35de7 100644 --- a/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts +++ b/packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBarStyles.styles.ts @@ -1,4 +1,5 @@ import { makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; import { tokens } from '@fluentui/react-theme'; import type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -12,11 +13,6 @@ export const progressBarClassNames: SlotClassNames = { // This prevents animations on reset to 0 scenarios. const ZERO_THRESHOLD = 0.01; -const barThicknessValues = { - medium: '2px', - large: '4px', -}; - const indeterminateProgressBar = { '0%': { left: '-33%', // matches indeterminate bar width @@ -32,7 +28,7 @@ const indeterminateProgressBar = { const useRootStyles = makeStyles({ root: { display: 'block', - backgroundColor: tokens.colorNeutralBackground6, + backgroundColor: semanticTokens.ctrlProgressBackgroundEmpty, width: '100%', overflow: 'hidden', @@ -41,16 +37,16 @@ const useRootStyles = makeStyles({ }, }, rounded: { - borderRadius: tokens.borderRadiusMedium, + borderRadius: semanticTokens.ctrlProgressCorner, }, square: { - borderRadius: tokens.borderRadiusNone, + borderRadius: semanticTokens.cornerZero, }, medium: { - height: barThicknessValues.medium, + height: semanticTokens.ctrlProgressHeightEmpty, }, large: { - height: barThicknessValues.large, + height: semanticTokens.ctrlProgressLgHeightEmpty, }, }); @@ -63,7 +59,12 @@ const useBarStyles = makeStyles({ backgroundColor: 'Highlight', }, borderRadius: 'inherit', - height: '100%', + }, + medium: { + height: semanticTokens.ctrlProgressHeightFilled, + }, + large: { + height: semanticTokens.ctrlProgressLgHeightFilled, }, nonZeroDeterminate: { transitionProperty: 'width', @@ -75,9 +76,9 @@ const useBarStyles = makeStyles({ position: 'relative', backgroundImage: `linear-gradient( to right, - ${tokens.colorNeutralBackground6} 0%, + ${semanticTokens.ctrlProgressBackgroundEmpty} 0%, ${tokens.colorTransparentBackground} 50%, - ${tokens.colorNeutralBackground6} 100% + ${semanticTokens.ctrlProgressBackgroundEmpty} 100% )`, animationName: indeterminateProgressBar, animationDuration: '3s', @@ -90,17 +91,17 @@ const useBarStyles = makeStyles({ }, brand: { - backgroundColor: tokens.colorCompoundBrandBackground, + backgroundColor: semanticTokens.ctrlProgressBackgroundFilled, }, error: { - backgroundColor: tokens.colorPaletteRedBackground3, + backgroundColor: semanticTokens.statusDangerBackground, }, warning: { - backgroundColor: tokens.colorPaletteDarkOrangeBackground3, + backgroundColor: semanticTokens.statusWarningBackground, }, success: { - backgroundColor: tokens.colorPaletteGreenBackground3, + backgroundColor: semanticTokens.statusSuccessBackground, }, }); @@ -127,6 +128,7 @@ export const useProgressBarStyles_unstable = (state: ProgressBarState): Progress progressBarClassNames.bar, barStyles.base, barStyles.brand, + barStyles[thickness], value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], From 153fec4efad85180e18afcb4c36c25c374ad510c Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 14 May 2025 11:02:11 -0700 Subject: [PATCH 3/4] Update and rebase react-progress semantic conversion --- .../etc/semantic-tokens.api.md | 22 ++++++------ .../src/components/progress/tokens.ts | 15 ++++---- .../semantic-tokens/src/control/tokens.ts | 12 ++++--- .../semantic-tokens/src/fluentOverrides.ts | 3 -- packages/semantic-tokens/src/legacy/tokens.ts | 35 +++++++++++++++++++ 5 files changed, 62 insertions(+), 25 deletions(-) diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 7d25223a6bb61c..eebced2d2b4c17 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -623,7 +623,7 @@ export const cornerWindowDefault = "var(--smtc-corner-window-default)"; export const cornerWindowDefaultRaw = "--smtc-corner-window-default"; // @public (undocumented) -export const cornerZero = "var(--smtc-corner-zero)"; +export const cornerZero = "var(--smtc-corner-zero, var(--borderRadiusNone))"; // @public (undocumented) export const cornerZeroRaw = "--smtc-corner-zero"; @@ -2171,43 +2171,43 @@ export const ctrlLiteFilterStrokeWidthSelected = "var(--smtc-ctrl-lite-filter-st export const ctrlLiteFilterStrokeWidthSelectedRaw = "--smtc-ctrl-lite-filter-stroke-width-selected"; // @public (undocumented) -export const ctrlProgressBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty)"; +export const ctrlProgressBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty, var(--colorNeutralBackground6))"; // @public (undocumented) export const ctrlProgressBackgroundEmptyRaw = "--smtc-ctrl-progress-background-empty"; // @public (undocumented) -export const ctrlProgressBackgroundFilled = "var(--smtc-ctrl-progress-background-filled, var(--smtc-background-ctrl-brand-rest))"; +export const ctrlProgressBackgroundFilled = "var(--smtc-ctrl-progress-background-filled, var(--smtc-background-ctrl-brand-rest, var(--colorCompoundBrandBackground)))"; // @public (undocumented) export const ctrlProgressBackgroundFilledRaw = "--smtc-ctrl-progress-background-filled"; // @public (undocumented) -export const ctrlProgressCorner = "var(--smtc-ctrl-progress-corner, var(--smtc-corner-circular))"; +export const ctrlProgressCorner = "var(--smtc-ctrl-progress-corner, var(--smtc-corner-circular, var(--borderRadiusMedium)))"; // @public (undocumented) export const ctrlProgressCornerRaw = "--smtc-ctrl-progress-corner"; // @public (undocumented) -export const ctrlProgressHeightEmpty = "var(--smtc-ctrl-progress-height-empty, var(--smtc-ctrl-progress-height-filled))"; +export const ctrlProgressHeightEmpty = "var(--smtc-ctrl-progress-height-empty, var(--smtc-ctrl-progress-height-filled, 2px))"; // @public (undocumented) export const ctrlProgressHeightEmptyRaw = "--smtc-ctrl-progress-height-empty"; // @public (undocumented) -export const ctrlProgressHeightFilled = "var(--smtc-ctrl-progress-height-filled)"; +export const ctrlProgressHeightFilled = "var(--smtc-ctrl-progress-height-filled, 100%)"; // @public (undocumented) export const ctrlProgressHeightFilledRaw = "--smtc-ctrl-progress-height-filled"; // @public (undocumented) -export const ctrlProgressLgHeightEmpty = "var(--smtc-ctrl-progress-lg-height-empty, var(--smtc-ctrl-progress-lg-height-filled))"; +export const ctrlProgressLgHeightEmpty = "var(--smtc-ctrl-progress-lg-height-empty, var(--smtc-ctrl-progress-lg-height-filled, 4px))"; // @public (undocumented) export const ctrlProgressLgHeightEmptyRaw = "--smtc-ctrl-progress-lg-height-empty"; // @public (undocumented) -export const ctrlProgressLgHeightFilled = "var(--smtc-ctrl-progress-lg-height-filled)"; +export const ctrlProgressLgHeightFilled = "var(--smtc-ctrl-progress-lg-height-filled, 100%)"; // @public (undocumented) export const ctrlProgressLgHeightFilledRaw = "--smtc-ctrl-progress-lg-height-filled"; @@ -3773,7 +3773,7 @@ export const statusBrandTintStroke = "var(--smtc-status-brand-tint-stroke)"; export const statusBrandTintStrokeRaw = "--smtc-status-brand-tint-stroke"; // @public (undocumented) -export const statusDangerBackground = "var(--smtc-status-danger-background)"; +export const statusDangerBackground = "var(--smtc-status-danger-background, var(--colorPaletteRedBackground3))"; // @public (undocumented) export const statusDangerBackgroundRaw = "--smtc-status-danger-background"; @@ -3923,7 +3923,7 @@ export const statusOofForeground = "var(--smtc-status-oof-foreground)"; export const statusOofForegroundRaw = "--smtc-status-oof-foreground"; // @public (undocumented) -export const statusSuccessBackground = "var(--smtc-status-success-background)"; +export const statusSuccessBackground = "var(--smtc-status-success-background, var(--colorPaletteGreenBackground3))"; // @public (undocumented) export const statusSuccessBackgroundRaw = "--smtc-status-success-background"; @@ -3959,7 +3959,7 @@ export const statusSuccessTintStroke = "var(--smtc-status-success-tint-stroke)"; export const statusSuccessTintStrokeRaw = "--smtc-status-success-tint-stroke"; // @public (undocumented) -export const statusWarningBackground = "var(--smtc-status-warning-background)"; +export const statusWarningBackground = "var(--smtc-status-warning-background, var(--colorPaletteDarkOrangeBackground3))"; // @public (undocumented) export const statusWarningBackgroundRaw = "--smtc-status-warning-background"; diff --git a/packages/semantic-tokens/src/components/progress/tokens.ts b/packages/semantic-tokens/src/components/progress/tokens.ts index 7f654e6f2a140f..a0bf4ae8289db3 100644 --- a/packages/semantic-tokens/src/components/progress/tokens.ts +++ b/packages/semantic-tokens/src/components/progress/tokens.ts @@ -1,5 +1,6 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { backgroundCtrlBrandRestRaw, cornerCircularRaw } from '../../control/variables'; +import { colorNeutralBackground6, colorCompoundBrandBackground, borderRadiusMedium } from '../../legacy/tokens'; import { ctrlProgressBackgroundEmptyRaw, ctrlProgressBackgroundFilledRaw, @@ -12,12 +13,12 @@ import { ctrlProgressLgHeightEmptyRaw, } from './variables'; -export const ctrlProgressBackgroundEmpty = `var(${ctrlProgressBackgroundEmptyRaw})`; -export const ctrlProgressBackgroundFilled = `var(${ctrlProgressBackgroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}))`; -export const ctrlProgressCorner = `var(${ctrlProgressCornerRaw}, var(${cornerCircularRaw}))`; -export const ctrlProgressHeightFilled = `var(${ctrlProgressHeightFilledRaw})`; -export const ctrlProgressHeightEmpty = `var(${ctrlProgressHeightEmptyRaw}, var(${ctrlProgressHeightFilledRaw}))`; +export const ctrlProgressBackgroundEmpty = `var(${ctrlProgressBackgroundEmptyRaw}, ${colorNeutralBackground6})`; +export const ctrlProgressBackgroundFilled = `var(${ctrlProgressBackgroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorCompoundBrandBackground}))`; +export const ctrlProgressCorner = `var(${ctrlProgressCornerRaw}, var(${cornerCircularRaw}, ${borderRadiusMedium}))`; +export const ctrlProgressHeightFilled = `var(${ctrlProgressHeightFilledRaw}, 100%)`; +export const ctrlProgressHeightEmpty = `var(${ctrlProgressHeightEmptyRaw}, var(${ctrlProgressHeightFilledRaw}, 2px))`; export const ctrlProgressSmHeightFilled = `var(${ctrlProgressSmHeightFilledRaw})`; export const ctrlProgressSmHeightEmpty = `var(${ctrlProgressSmHeightEmptyRaw}, var(${ctrlProgressSmHeightFilledRaw}))`; -export const ctrlProgressLgHeightFilled = `var(${ctrlProgressLgHeightFilledRaw})`; -export const ctrlProgressLgHeightEmpty = `var(${ctrlProgressLgHeightEmptyRaw}, var(${ctrlProgressLgHeightFilledRaw}))`; +export const ctrlProgressLgHeightFilled = `var(${ctrlProgressLgHeightFilledRaw}, 100%)`; +export const ctrlProgressLgHeightEmpty = `var(${ctrlProgressLgHeightEmptyRaw}, var(${ctrlProgressLgHeightFilledRaw}, 4px))`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index 8ac2c4f8d1f3c1..6d6b843959a58e 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/packages/semantic-tokens/src/control/tokens.ts @@ -4,7 +4,11 @@ import { fontFamilyBase, fontWeightRegular, strokeWidthThin, + borderRadiusNone, colorNeutralForegroundDisabled, + colorPaletteRedBackground3, + colorPaletteDarkOrangeBackground3, + colorPaletteGreenBackground3, } from '../legacy/tokens'; import { textGlobalDisplay1FontSizeRaw, @@ -336,7 +340,7 @@ export const backgroundCtrlSubtleHover = `var(${backgroundCtrlSubtleHoverRaw})`; export const backgroundCtrlSubtlePressed = `var(${backgroundCtrlSubtlePressedRaw})`; export const backgroundFlyoutLumBlend = `var(${backgroundFlyoutLumBlendRaw})`; export const backgroundFlyoutColorBlend = `var(${backgroundFlyoutColorBlendRaw})`; -export const cornerZero = `var(${cornerZeroRaw})`; +export const cornerZero = `var(${cornerZeroRaw}, ${borderRadiusNone})`; export const cornerBezel = `var(${cornerBezelRaw})`; export const cornerWindowDefault = `var(${cornerWindowDefaultRaw})`; export const cornerFlyoutRest = `var(${cornerFlyoutRestRaw})`; @@ -362,15 +366,15 @@ export const iconThemeCtrlDefaultRest = `var(${iconThemeCtrlDefaultRestRaw})`; export const iconThemeCtrlDefaultSelected = `var(${iconThemeCtrlDefaultSelectedRaw})`; export const statusBrandTintBackground = `var(${statusBrandTintBackgroundRaw})`; export const statusBrandTintStroke = `var(${statusBrandTintStrokeRaw})`; -export const statusDangerBackground = `var(${statusDangerBackgroundRaw})`; +export const statusDangerBackground = `var(${statusDangerBackgroundRaw}, ${colorPaletteRedBackground3})`; export const statusDangerTintBackground = `var(${statusDangerTintBackgroundRaw})`; export const statusDangerTintStroke = `var(${statusDangerTintStrokeRaw})`; export const statusDangerTintForeground = `var(${statusDangerTintForegroundRaw})`; -export const statusWarningBackground = `var(${statusWarningBackgroundRaw})`; +export const statusWarningBackground = `var(${statusWarningBackgroundRaw}, ${colorPaletteDarkOrangeBackground3})`; export const statusWarningTintBackground = `var(${statusWarningTintBackgroundRaw})`; export const statusWarningTintStroke = `var(${statusWarningTintStrokeRaw})`; export const statusWarningTintForeground = `var(${statusWarningTintForegroundRaw})`; -export const statusSuccessBackground = `var(${statusSuccessBackgroundRaw})`; +export const statusSuccessBackground = `var(${statusSuccessBackgroundRaw}, ${colorPaletteGreenBackground3})`; export const statusSuccessTintBackground = `var(${statusSuccessTintBackgroundRaw})`; export const statusSuccessTintStroke = `var(${statusSuccessTintStrokeRaw})`; export const statusSuccessTintForeground = `var(${statusSuccessTintForegroundRaw})`; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index f03c8b805565b5..271267472fb109 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -30,11 +30,8 @@ export const fluentOverrides: FluentOverrides = { statusDangerBackground: { f2Token: 'colorPaletteRedBackground3' }, statusSuccessBackground: { f2Token: 'colorPaletteGreenBackground3' }, statusWarningBackground: { f2Token: 'colorPaletteDarkOrangeBackground3' }, - strokewidthDefault: { f2Token: 'strokeWidthThin' }, strokeWidthDefault: { f2Token: 'strokeWidthThin' }, - textGlobalBody3Fontsize: { f2Token: 'fontSizeBase300' }, textGlobalBody3FontSize: { f2Token: 'fontSizeBase300' }, - textStyleDefaultRegularFontfamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' }, textStyleDefaultRegularWeight: { f2Token: 'fontWeightRegular' }, }; diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index 15c6fe0d50c665..e07f8f67a34ba0 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/packages/semantic-tokens/src/legacy/tokens.ts @@ -1,4 +1,9 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE +/** + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusNone | `borderRadiusNone`} design token. + * @public + */ +export const borderRadiusNone = 'var(--borderRadiusNone)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorStrokeFocus2 | `colorStrokeFocus2`} design token. * @public @@ -34,11 +39,41 @@ export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pres * @public */ export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorNeutralBackground6 | `colorNeutralBackground6`} design token. + * @public + */ +export const colorNeutralBackground6 = 'var(--colorNeutralBackground6)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorCompoundBrandBackground | `colorCompoundBrandBackground`} design token. + * @public + */ +export const colorCompoundBrandBackground = 'var(--colorCompoundBrandBackground)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#borderRadiusMedium | `borderRadiusMedium`} design token. + * @public + */ +export const borderRadiusMedium = 'var(--borderRadiusMedium)'; /** * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForegroundDisabled | `colorNeutralForegroundDisabled`} design token. * @public */ export const colorNeutralForegroundDisabled = 'var(--colorNeutralForegroundDisabled)'; +/** + * CSS custom property value for the {@link @fluentui/tokens#colorPaletteRedBackground3 | `colorPaletteRedBackground3`} design token. + * @public + */ +export const colorPaletteRedBackground3 = 'var(--colorPaletteRedBackground3)'; +/** + * 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#colorPaletteDarkOrangeBackground3 | `colorPaletteDarkOrangeBackground3`} design token. + * @public + */ +export const colorPaletteDarkOrangeBackground3 = 'var(--colorPaletteDarkOrangeBackground3)'; /** * CSS custom property value for the {@link @fluentui/tokens#strokeWidthThin | `strokeWidthThin`} design token. * @public From 3744c412edc6471e108ae6f28d51fc41f6188b39 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Wed, 14 May 2025 11:20:27 -0700 Subject: [PATCH 4/4] Update change file --- ...tui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json b/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json index 420998513297ea..3c7c5f32adfff1 100644 --- a/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json +++ b/change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "Feat: Progress Bar", + "comment": "Feat: Add semantic tokens to Progress Bar", "packageName": "@fluentui/react-progress", "email": "xuehua@microsoft.com", "dependentChangeType": "patch"