diff --git a/change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json b/change/@fluentui-react-rating-926a3c55-ac71-473a-9972-c164503663e7.json new file mode 100644 index 0000000000000..6c54acfe7e560 --- /dev/null +++ b/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": "rachelyoo@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-rating/library/package.json b/packages/react-components/react-rating/library/package.json index 26067a8c53c3d..f69efbb4cc24e 100644 --- a/packages/react-components/react-rating/library/package.json +++ b/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" }, diff --git a/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts b/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts index 3e171c1f6427e..4871260a9451a 100644 --- a/packages/react-components/react-rating/library/src/components/RatingDisplay/useRatingDisplayStyles.styles.ts +++ b/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 = { 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': { diff --git a/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts b/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts index 71e5b6ddfb132..a0398a843365c 100644 --- a/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts +++ b/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 = { 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', diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index f9d17b5ebb3f9..c8d9d29af130f 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/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"; diff --git a/packages/semantic-tokens/src/components/rating/tokens.ts b/packages/semantic-tokens/src/components/rating/tokens.ts index f6facdb9f9824..6cfa25bbea4ef 100644 --- a/packages/semantic-tokens/src/components/rating/tokens.ts +++ b/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}))`; diff --git a/packages/semantic-tokens/src/control/tokens.ts b/packages/semantic-tokens/src/control/tokens.ts index b0a4d3c34869b..dcf74ba9c5e13 100644 --- a/packages/semantic-tokens/src/control/tokens.ts +++ b/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})`; diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 65249e6795b3a..148761425e905 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/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' }, diff --git a/packages/semantic-tokens/src/legacy/tokens.ts b/packages/semantic-tokens/src/legacy/tokens.ts index efee503cd6c25..be87fc308d262 100644 --- a/packages/semantic-tokens/src/legacy/tokens.ts +++ b/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