Semantic Tokens: Progress Bar

change/@fluentui-react-progress-7802143c-d54f-4bd3-9e8e-075ca4cff496.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Feat: Add semantic tokens to Progress Bar",
+  "packageName": "@fluentui/react-progress",
+  "email": "xuehua@microsoft.com",
+  "dependentChangeType": "patch"
+}

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"
   },

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<ProgressBarSlots> = {
 // 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],

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";

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))`;

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})`;

packages/semantic-tokens/src/fluentOverrides.ts

@@ -11,14 +11,25 @@ export type FluentOverrideValue =
 export type FluentOverrides = Record<string, FluentOverrideValue | null>;
 
 export const fluentOverrides: FluentOverrides = {
+  cornerZero: { f2Token: 'borderRadiusNone' },
   ctrlFocusOuterStroke: { f2Token: 'colorStrokeFocus2' },
   ctrlLinkForegroundBrandHover: { f2Token: 'colorBrandForegroundLinkHover' },
   ctrlLinkForegroundBrandPressed: { f2Token: 'colorBrandForegroundLinkPressed' },
   ctrlLinkForegroundBrandRest: { f2Token: 'colorBrandForegroundLink' },
   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' },
   textGlobalBody3FontSize: { f2Token: 'fontSizeBase300' },
   textStyleDefaultRegularFontFamily: { f2Token: 'fontFamilyBase' },

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