update rating to use semantic tokens

change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Feat: Add semantic tokens to Rating",
+  "packageName": "@fluentui/react-rating",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-rating/library/package.json

@@ -24,6 +24,7 @@
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-tabster": "^9.24.6",
     "@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-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts

@@ -1,7 +1,7 @@
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { RatingDisplaySlots, RatingDisplayState } from './RatingDisplay.types';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import * as semanticTokens from '@fluentui/semantic-tokens';
 
 export const ratingDisplayClassNames: SlotClassNames<RatingDisplaySlots> = {
   root: 'fui-RatingDisplay',
@@ -20,24 +20,27 @@ const useRootClassName = makeResetStyles({
 });
 
 const useLabelClassName = makeResetStyles({
-  color: tokens.colorNeutralForeground1,
-  marginLeft: tokens.spacingHorizontalXS,
-  ...typographyStyles.caption1,
+  color: semanticTokens.foregroundCtrlNeutralPrimaryRest,
+  marginLeft: semanticTokens.gapInsideCtrlSmToLabel,
+  fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
+  fontSize: semanticTokens.textRampSmItemBodyFontSize,
+  fontWeight: semanticTokens.textStyleDefaultRegularWeight,
+  lineHeight: semanticTokens.textRampSmItemBodyLineHeight,
 });
 
 const useLabelStyles = makeStyles({
   large: {
-    fontSize: tokens.fontSizeBase300,
-    lineHeight: tokens.lineHeightBase300,
-    marginLeft: tokens.spacingHorizontalSNudge,
+    fontSize: semanticTokens.textRampItemBodyFontSize,
+    lineHeight: semanticTokens.textRampItemBodyLineHeight,
+    marginLeft: semanticTokens.gapInsideCtrlToLabel,
   },
   extraLarge: {
-    fontSize: tokens.fontSizeBase400,
-    lineHeight: tokens.lineHeightBase400,
-    marginLeft: tokens.spacingHorizontalS,
+    fontSize: semanticTokens.textRampLgItemBodyFontSize,
+    lineHeight: semanticTokens.textRampLgItemBodyLineHeight,
+    marginLeft: semanticTokens.gapInsideCtrlLgToLabel,
   },
   strong: {
-    fontWeight: tokens.fontWeightSemibold,
+    fontWeight: semanticTokens.textStyleDefaultHeaderWeight,
   },
   divider: {
     '::before': {

packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts

@@ -3,6 +3,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import type { RatingItemSlots, RatingItemState } from './RatingItem.types';
+import * as semanticTokens from '@fluentui/semantic-tokens';
 
 export const ratingItemClassNames: SlotClassNames<RatingItemSlots> = {
   root: 'fui-RatingItem',
@@ -70,7 +71,7 @@ const useInputStyles = makeStyles({
 const useIndicatorBaseClassName = makeResetStyles({
   display: 'flex',
   overflow: 'hidden',
-  color: tokens.colorNeutralForeground1,
+  color: semanticTokens.ctrlRatingIconForegroundFilled,
   fill: 'currentColor',
   pointerEvents: 'none',
   position: 'absolute',
@@ -98,8 +99,8 @@ const useIndicatorStyles = makeStyles({
     color: tokens.colorPaletteMarigoldBorderActive,
   },
   filled: {
-    color: tokens.colorNeutralBackground6,
-    stroke: tokens.colorTransparentStroke,
+    color: semanticTokens.ctrlRatingIconForegroundEmpty,
+    stroke: semanticTokens.strokeLayer,
     '@media (forced-colors: active)': {
       color: 'Canvas',
       stroke: 'CanvasText',

packages/semantic-tokens/etc/semantic-tokens.api.md

@@ -2237,13 +2237,13 @@ export const ctrlProgressSmHeightFilled = "var(--smtc-ctrl-progress-sm-height-fi
 export const ctrlProgressSmHeightFilledRaw = "--smtc-ctrl-progress-sm-height-filled";
 
 // @public (undocumented)
-export const ctrlRatingIconForegroundEmpty = "var(--smtc-ctrl-rating-icon-foreground-empty, var(--smtc-ctrl-progress-background-empty))";
+export const ctrlRatingIconForegroundEmpty = "var(--smtc-ctrl-rating-icon-foreground-empty, var(--smtc-ctrl-progress-background-empty, var(--colorNeutralBackground6)))";
 
 // @public (undocumented)
 export const ctrlRatingIconForegroundEmptyRaw = "--smtc-ctrl-rating-icon-foreground-empty";
 
 // @public (undocumented)
-export const ctrlRatingIconForegroundFilled = "var(--smtc-ctrl-rating-icon-foreground-filled, var(--smtc-background-ctrl-brand-rest))";
+export const ctrlRatingIconForegroundFilled = "var(--smtc-ctrl-rating-icon-foreground-filled, var(--smtc-background-ctrl-brand-rest, var(--colorNeutralForeground1)))";
 
 // @public (undocumented)
 export const ctrlRatingIconForegroundFilledRaw = "--smtc-ctrl-rating-icon-foreground-filled";
@@ -3209,7 +3209,7 @@ export const gapInsideCtrlLgDefault = "var(--smtc-gap-inside-ctrl-lg-default, va
 export const gapInsideCtrlLgDefaultRaw = "--smtc-gap-inside-ctrl-lg-default";
 
 // @public (undocumented)
-export const gapInsideCtrlLgToLabel = "var(--smtc-gap-inside-ctrl-lg-to-label)";
+export const gapInsideCtrlLgToLabel = "var(--smtc-gap-inside-ctrl-lg-to-label, var(--spacingHorizontalS))";
 
 // @public (undocumented)
 export const gapInsideCtrlLgToLabelRaw = "--smtc-gap-inside-ctrl-lg-to-label";
@@ -3227,7 +3227,7 @@ export const gapInsideCtrlSmDefault = "var(--smtc-gap-inside-ctrl-sm-default, va
 export const gapInsideCtrlSmDefaultRaw = "--smtc-gap-inside-ctrl-sm-default";
 
 // @public (undocumented)
-export const gapInsideCtrlSmToLabel = "var(--smtc-gap-inside-ctrl-sm-to-label)";
+export const gapInsideCtrlSmToLabel = "var(--smtc-gap-inside-ctrl-sm-to-label, var(--spacingHorizontalXS))";
 
 // @public (undocumented)
 export const gapInsideCtrlSmToLabelRaw = "--smtc-gap-inside-ctrl-sm-to-label";
@@ -3239,7 +3239,7 @@ export const gapInsideCtrlSmToSecondaryIcon = "var(--smtc-gap-inside-ctrl-sm-to-
 export const gapInsideCtrlSmToSecondaryIconRaw = "--smtc-gap-inside-ctrl-sm-to-secondary-icon";
 
 // @public (undocumented)
-export const gapInsideCtrlToLabel = "var(--smtc-gap-inside-ctrl-to-label)";
+export const gapInsideCtrlToLabel = "var(--smtc-gap-inside-ctrl-to-label, var(--spacingHorizontalSNudge))";
 
 // @public (undocumented)
 export const gapInsideCtrlToLabelRaw = "--smtc-gap-inside-ctrl-to-label";

packages/semantic-tokens/src/components/rating/tokens.ts

@@ -1,5 +1,6 @@
 // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
 import { iconThemeCtrlDefaultRestRaw, backgroundCtrlBrandRestRaw, sizeCtrlIconRaw } from '../../control/variables';
+import { colorNeutralForeground1, colorNeutralBackground6 } from '../../legacy/tokens';
 import { ctrlProgressBackgroundEmptyRaw } from '../progress/variables';
 import {
   ctrlRatingIconThemeRaw,
@@ -11,6 +12,6 @@ import {
 
 export const ctrlRatingIconTheme = `var(${ctrlRatingIconThemeRaw}, var(${iconThemeCtrlDefaultRestRaw}))`;
 export const ctrlRatingIconGap = `var(${ctrlRatingIconGapRaw})`;
-export const ctrlRatingIconForegroundFilled = `var(${ctrlRatingIconForegroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}))`;
-export const ctrlRatingIconForegroundEmpty = `var(${ctrlRatingIconForegroundEmptyRaw}, var(${ctrlProgressBackgroundEmptyRaw}))`;
+export const ctrlRatingIconForegroundFilled = `var(${ctrlRatingIconForegroundFilledRaw}, var(${backgroundCtrlBrandRestRaw}, ${colorNeutralForeground1}))`;
+export const ctrlRatingIconForegroundEmpty = `var(${ctrlRatingIconForegroundEmptyRaw}, var(${ctrlProgressBackgroundEmptyRaw}, ${colorNeutralBackground6}))`;
 export const ctrlRatingIconSize = `var(${ctrlRatingIconSizeRaw}, var(${sizeCtrlIconRaw}))`;

packages/semantic-tokens/src/control/tokens.ts

@@ -336,9 +336,9 @@ export const gapInsideCtrlSmToSecondaryIcon = `var(${gapInsideCtrlSmToSecondaryI
 export const gapInsideCtrlLgDefault = `var(${gapInsideCtrlLgDefaultRaw}, ${spacingHorizontalSNudge})`;
 export const gapInsideCtrlLgToSecondaryIcon = `var(${gapInsideCtrlLgToSecondaryIconRaw})`;
 export const gapInsideCtrlToSecondaryIcon = `var(${gapInsideCtrlToSecondaryIconRaw})`;
-export const gapInsideCtrlToLabel = `var(${gapInsideCtrlToLabelRaw})`;
-export const gapInsideCtrlSmToLabel = `var(${gapInsideCtrlSmToLabelRaw})`;
-export const gapInsideCtrlLgToLabel = `var(${gapInsideCtrlLgToLabelRaw})`;
+export const gapInsideCtrlToLabel = `var(${gapInsideCtrlToLabelRaw}, ${spacingHorizontalSNudge})`;
+export const gapInsideCtrlSmToLabel = `var(${gapInsideCtrlSmToLabelRaw}, ${spacingHorizontalXS})`;
+export const gapInsideCtrlLgToLabel = `var(${gapInsideCtrlLgToLabelRaw}, ${spacingHorizontalS})`;
 export const cornerCircular = `var(${cornerCircularRaw}, ${borderRadiusCircular})`;
 export const strokeWidthDefault = `var(${strokeWidthDefaultRaw}, ${strokeWidthThin})`;
 export const backgroundSmoke = `var(${backgroundSmokeRaw})`;

packages/semantic-tokens/src/fluentOverrides.ts

@@ -86,6 +86,8 @@ export const fluentOverrides: FluentOverrides = {
   ctrlProgressHeightFilled: { rawValue: '100%' },
   ctrlProgressLgHeightEmpty: { rawValue: '4px' },
   ctrlProgressLgHeightFilled: { rawValue: '100%' },
+  ctrlRatingIconForegroundEmpty: { f2Token: 'colorNeutralBackground6' }, // should be #D9DDE3 per design
+  ctrlRatingIconForegroundFilled: { f2Token: 'colorNeutralForeground1' }, // should be #24282F per design
   foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' },
   foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' },
   foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' },
@@ -123,7 +125,10 @@ export const fluentOverrides: FluentOverrides = {
   foregroundCtrlOnTransparentRest: { f2Token: 'colorNeutralForeground2' },
   gapInsideCtrlDefault: { f2Token: 'spacingHorizontalS' },
   gapInsideCtrlLgDefault: { f2Token: 'spacingHorizontalSNudge' },
+  gapInsideCtrlLgToLabel: { f2Token: 'spacingHorizontalS' },
   gapInsideCtrlSmDefault: { f2Token: 'spacingHorizontalXS' },
+  gapInsideCtrlSmToLabel: { f2Token: 'spacingHorizontalXS' }, // Rating uses 8px, or spacingHorizontalS, for all gaps between icons and label in design
+  gapInsideCtrlToLabel: { f2Token: 'spacingHorizontalSNudge' }, // Rating uses 8px, or spacingHorizontalS, for all gaps between icons and label in design
   nullColor: { f2Token: 'colorTransparentBackground' },
   paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' },
   paddingCtrlHorizontalIconOnly: { rawValue: '5px' },

packages/semantic-tokens/src/legacy/tokens.ts

@@ -185,15 +185,15 @@ export const colorNeutralForeground2Pressed = 'var(--colorNeutralForeground2Pres
  */
 export const colorNeutralForeground2 = 'var(--colorNeutralForeground2)';
 /**
- * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground1 | `colorBrandForeground1`} design token.
+ * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token.
  * @public
  */
-export const colorBrandForeground1 = 'var(--colorBrandForeground1)';
+export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)';
 /**
- * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1`} design token.
+ * CSS custom property value for the {@link @fluentui/tokens#colorBrandForeground1 | `colorBrandForeground1`} design token.
  * @public
  */
-export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)';
+export const colorBrandForeground1 = 'var(--colorBrandForeground1)';
 /**
  * CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover`} design token.
  * @public