Skip to content

Commit e730dba

Browse files
Mitch-At-WorkMitch-At-Work
authored
Extended Tokens: React-Spinner (#34645)
1 parent d482254 commit e730dba

File tree

10 files changed

+184
-27
lines changed

10 files changed

+184
-27
lines changed

‎change/@fluentui-react-spinner-f55b0651-0938-48b2-a5ba-4191ee23f204.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "feat: Enable semantic tokens",
4+
"packageName": "@fluentui/react-spinner",
5+
"email": "mifraser@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/react-spinner/library/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@fluentui/react-shared-contexts": "^9.23.1",
2424
"@fluentui/react-theme": "^9.1.24",
2525
"@fluentui/react-utilities": "^9.19.0",
26+
"@fluentui/semantic-tokens": "0.0.0-alpha.1",
2627
"@griffel/react": "^1.5.22",
2728
"@swc/helpers": "^0.5.1"
2829
},

‎packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
2-
import { tokens, typographyStyles } from '@fluentui/react-theme';
2+
import { tokens } from '@fluentui/react-theme';
33
import type { SlotClassNames } from '@fluentui/react-utilities';
44
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
55
import type { SpinnerSlots, SpinnerState } from './Spinner.types';
6+
import * as semanticTokens from '@fluentui/semantic-tokens';
67

78
export const spinnerClassNames: SlotClassNames<SpinnerSlots> = {
89
root: 'fui-Spinner',
@@ -23,7 +24,7 @@ const useRootBaseClassName = makeResetStyles({
2324
alignItems: 'center',
2425
justifyContent: 'center',
2526
lineHeight: '0',
26-
gap: '8px',
27+
gap: semanticTokens.gapInsideCtrlToLabel,
2728
overflow: 'hidden', // prevents height changes from rotating children
2829
});
2930

@@ -44,8 +45,9 @@ const useSpinnerBaseClassName = makeResetStyles({
4445
`white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` +
4546
`transparent 100%)`,
4647

47-
backgroundColor: tokens.colorBrandStroke2Contrast,
48-
color: tokens.colorBrandStroke1,
48+
backgroundColor: semanticTokens._ctrlSpinnerBackgroundEmpty,
49+
50+
color: semanticTokens._ctrlSpinnerBackgroundFilled,
4951
'@media screen and (forced-colors: active)': {
5052
backgroundColor: 'HighlightText',
5153
color: 'Highlight',
@@ -136,87 +138,104 @@ const useSpinnerStyles = makeStyles({
136138
'extra-tiny': {
137139
height: '16px',
138140
width: '16px',
139-
[vars.strokeWidth]: tokens.strokeWidthThick,
141+
[vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth,
140142
},
141143

142144
tiny: {
143145
height: '20px',
144146
width: '20px',
145-
[vars.strokeWidth]: tokens.strokeWidthThick,
147+
[vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth,
146148
},
147149

148150
'extra-small': {
149151
height: '24px',
150152
width: '24px',
151-
[vars.strokeWidth]: tokens.strokeWidthThick,
153+
[vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth,
152154
},
153155

154156
small: {
155157
height: '28px',
156158
width: '28px',
157-
[vars.strokeWidth]: tokens.strokeWidthThick,
159+
[vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeSmWidth,
158160
},
159161

160162
medium: {
161163
height: '32px',
162164
width: '32px',
163-
[vars.strokeWidth]: tokens.strokeWidthThicker,
165+
[vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth,
164166
},
165167

166168
large: {
167169
height: '36px',
168170
width: '36px',
169-
[vars.strokeWidth]: tokens.strokeWidthThicker,
171+
[vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth,
170172
},
171173

172174
'extra-large': {
173175
height: '40px',
174176
width: '40px',
175-
[vars.strokeWidth]: tokens.strokeWidthThicker,
177+
[vars.strokeWidth]: semanticTokens.ctrlSpinnerStrokeWidth,
176178
},
177179

178180
huge: {
179181
height: '44px',
180182
width: '44px',
181-
[vars.strokeWidth]: tokens.strokeWidthThickest,
183+
[vars.strokeWidth]: semanticTokens._ctrlSpinnerStrokeLgWidth,
182184
},
183185
});
184186

185187
const useLabelStyles = makeStyles({
188+
default: {
189+
color: semanticTokens.foregroundContentNeutralPrimary,
190+
fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
191+
fontWeight: semanticTokens.textStyleDefaultRegularWeight,
192+
},
186193
inverted: {
187194
color: tokens.colorNeutralForegroundStaticInverted,
188195
},
189196

190197
'extra-tiny': {
191-
...typographyStyles.body1,
198+
fontSize: semanticTokens.textGlobalBody3FontSize,
199+
lineHeight: semanticTokens.textGlobalBody3LineHeight,
192200
},
193201

194202
tiny: {
195-
...typographyStyles.body1,
203+
fontSize: semanticTokens.textGlobalBody3FontSize,
204+
lineHeight: semanticTokens.textGlobalBody3LineHeight,
196205
},
197206

198207
'extra-small': {
199-
...typographyStyles.body1,
208+
fontSize: semanticTokens.textGlobalBody3FontSize,
209+
lineHeight: semanticTokens.textGlobalBody3LineHeight,
200210
},
201211

202212
small: {
203-
...typographyStyles.body1,
213+
fontSize: semanticTokens.textGlobalBody3FontSize,
214+
lineHeight: semanticTokens.textGlobalBody3LineHeight,
204215
},
205216

206217
medium: {
207-
...typographyStyles.subtitle2,
218+
fontSize: semanticTokens._ctrlSpinnerItemBodyFontSize,
219+
fontWeight: semanticTokens._ctrlSpinnerTextStyleRegularWeight,
220+
lineHeight: semanticTokens._ctrlSpinnerItemBodyLineHeight,
208221
},
209222

210223
large: {
211-
...typographyStyles.subtitle2,
224+
fontSize: semanticTokens.textRampLgItemBodyFontSize,
225+
fontWeight: semanticTokens.textStyleDefaultHeaderWeight,
226+
lineHeight: semanticTokens.textRampLgItemBodyLineHeight,
212227
},
213228

214229
'extra-large': {
215-
...typographyStyles.subtitle2,
230+
fontSize: semanticTokens.textRampLgItemBodyFontSize,
231+
fontWeight: semanticTokens.textStyleDefaultHeaderWeight,
232+
lineHeight: semanticTokens.textRampLgItemBodyLineHeight,
216233
},
217234

218235
huge: {
219-
...typographyStyles.subtitle1,
236+
fontSize: semanticTokens.textGlobalBody1FontSize,
237+
fontWeight: semanticTokens.textStyleDefaultHeaderWeight,
238+
lineHeight: semanticTokens.textGlobalBody1LineHeight,
220239
},
221240
});
222241

@@ -262,6 +281,7 @@ export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState =>
262281
if (state.label) {
263282
state.label.className = mergeClasses(
264283
spinnerClassNames.label,
284+
labelStyles.default,
265285
labelStyles[size],
266286
appearance === 'inverted' && labelStyles.inverted,
267287
state.label.className,

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2710,18 +2710,39 @@ export const ctrlSliderThumbSizeRest = "var(--smtc-ctrl-slider-thumb-size-rest,
27102710
// @public (undocumented)
27112711
export const ctrlSliderThumbSizeRestRaw = "--smtc-ctrl-slider-thumb-size-rest";
27122712

2713+
// @public
2714+
export const _ctrlSpinnerBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty, var(--colorBrandStroke2Contrast))";
2715+
2716+
// @public
2717+
export const _ctrlSpinnerBackgroundFilled = "var(--smtc-ctrl-progress-background-filled, var(--smtc-background-ctrl-brand-rest, var(--colorBrandStroke1)))";
2718+
2719+
// @public
2720+
export const _ctrlSpinnerItemBodyFontSize = "var(--smtc-text-ramp-item-body-font-size, var(--smtc-text-global-body3-font-size, var(--fontSizeBase400)))";
2721+
2722+
// @public
2723+
export const _ctrlSpinnerItemBodyLineHeight = "var(--smtc-text-ramp-item-body-line-height, var(--smtc-text-global-body3-line-height, var(--lineHeightBase400)))";
2724+
27132725
// @public (undocumented)
27142726
export const ctrlSpinnerShowEmptyTrack = "var(--smtc-ctrl-spinner-show-empty-track)";
27152727

27162728
// @public (undocumented)
27172729
export const ctrlSpinnerShowEmptyTrackRaw = "--smtc-ctrl-spinner-show-empty-track";
27182730

2731+
// @public
2732+
export const _ctrlSpinnerStrokeLgWidth = "var(--smtc-ctrl-spinner-stroke-width, var(--smtc-ctrl-progress-height-filled, var(--strokeWidthThickest)))";
2733+
2734+
// @public
2735+
export const _ctrlSpinnerStrokeSmWidth = "var(--smtc-ctrl-spinner-stroke-width, var(--smtc-ctrl-progress-height-filled, var(--strokeWidthThick)))";
2736+
27192737
// @public (undocumented)
2720-
export const ctrlSpinnerStrokeWidth = "var(--smtc-ctrl-spinner-stroke-width, var(--smtc-ctrl-progress-height-filled))";
2738+
export const ctrlSpinnerStrokeWidth = "var(--smtc-ctrl-spinner-stroke-width, var(--smtc-ctrl-progress-height-filled, var(--strokeWidthThicker)))";
27212739

27222740
// @public (undocumented)
27232741
export const ctrlSpinnerStrokeWidthRaw = "--smtc-ctrl-spinner-stroke-width";
27242742

2743+
// @public
2744+
export const _ctrlSpinnerTextStyleRegularWeight = "var(--smtc-text-style-default-regular-weight, var(--fontWeightSemibold))";
2745+
27252746
// @public (undocumented)
27262747
export const ctrlSplitDividerStrokeWidth = "var(--smtc-ctrl-split-divider-stroke-width, var(--smtc-stroke-width-default))";
27272748

‎packages/semantic-tokens/src/components/spinner/tokens.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
2+
import { strokeWidthThicker } from '../../legacy/tokens';
23
import { ctrlProgressHeightFilledRaw } from '../progress/variables';
34
import { ctrlSpinnerStrokeWidthRaw, ctrlSpinnerShowEmptyTrackRaw } from './variables';
45

5-
export const ctrlSpinnerStrokeWidth = `var(${ctrlSpinnerStrokeWidthRaw}, var(${ctrlProgressHeightFilledRaw}))`;
6+
export const ctrlSpinnerStrokeWidth = `var(${ctrlSpinnerStrokeWidthRaw}, var(${ctrlProgressHeightFilledRaw}, ${strokeWidthThicker}))`;
67
export const ctrlSpinnerShowEmptyTrack = `var(${ctrlSpinnerShowEmptyTrackRaw})`;

‎packages/semantic-tokens/src/fluentLegacyVariants.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,34 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = {
6969
f2Token: 'colorNeutralForeground3',
7070
originalToken: 'foregroundCtrlHintDefault',
7171
},
72+
_ctrlSpinnerBackgroundEmpty: {
73+
f2Token: 'colorBrandStroke2Contrast',
74+
originalToken: 'ctrlProgressBackgroundEmpty',
75+
},
76+
_ctrlSpinnerBackgroundFilled: {
77+
f2Token: 'colorBrandStroke1',
78+
originalToken: 'ctrlProgressBackgroundFilled',
79+
},
80+
_ctrlSpinnerItemBodyFontSize: {
81+
f2Token: 'fontSizeBase400',
82+
originalToken: 'textRampItemBodyFontSize',
83+
},
84+
_ctrlSpinnerItemBodyLineHeight: {
85+
f2Token: 'lineHeightBase400',
86+
originalToken: 'textRampItemBodyLineHeight',
87+
},
88+
_ctrlSpinnerStrokeLgWidth: {
89+
f2Token: 'strokeWidthThickest',
90+
originalToken: 'ctrlSpinnerStrokeWidth',
91+
},
92+
_ctrlSpinnerStrokeSmWidth: {
93+
f2Token: 'strokeWidthThick',
94+
originalToken: 'ctrlSpinnerStrokeWidth',
95+
},
96+
_ctrlSpinnerTextStyleRegularWeight: {
97+
f2Token: 'fontWeightSemibold',
98+
originalToken: 'textStyleDefaultRegularWeight',
99+
},
72100
_ctrlSwitchPaddingTextBottom: {
73101
f2Token: 'spacingVerticalXS',
74102
originalToken: 'paddingCtrlTextBottom',

‎packages/semantic-tokens/src/fluentOverrides.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export const fluentOverrides: FluentOverrides = {
9090
ctrlProgressLgHeightFilled: { rawValue: '100%' },
9191
ctrlRatingIconForegroundEmpty: { f2Token: 'colorNeutralBackground6' }, // should be #D9DDE3 per design
9292
ctrlRatingIconForegroundFilled: { f2Token: 'colorNeutralForeground1' }, // should be #24282F per design
93+
ctrlSpinnerStrokeWidth: { f2Token: 'strokeWidthThicker' },
9394
foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' },
9495
foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' },
9596
foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' },

‎packages/semantic-tokens/src/index.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1796,6 +1796,13 @@ export {
17961796
_ctrlAvatarPresenceBadgeStrokeWidthSm,
17971797
_ctrlButtonGapInsideDefault,
17981798
_ctrlDividerForegroundSubtle,
1799+
_ctrlSpinnerBackgroundEmpty,
1800+
_ctrlSpinnerBackgroundFilled,
1801+
_ctrlSpinnerItemBodyFontSize,
1802+
_ctrlSpinnerItemBodyLineHeight,
1803+
_ctrlSpinnerStrokeLgWidth,
1804+
_ctrlSpinnerStrokeSmWidth,
1805+
_ctrlSpinnerTextStyleRegularWeight,
17991806
_ctrlSwitchPaddingTextBottom,
18001807
_ctrlSwitchPaddingTextTop,
18011808
_ctrlSwitchStrokeOnActiveBrandHover,

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,11 @@ export const colorNeutralForeground1 = 'var(--colorNeutralForeground1)';
194194
* @public
195195
*/
196196
export const colorBrandForeground1 = 'var(--colorBrandForeground1)';
197+
/**
198+
* CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token.
199+
* @public
200+
*/
201+
export const strokeWidthThicker = 'var(--strokeWidthThicker)';
197202
/**
198203
* CSS custom property value for the {@link @fluentui/tokens#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover`} design token.
199204
* @public
@@ -334,11 +339,6 @@ export const colorNeutralStroke3 = 'var(--colorNeutralStroke3)';
334339
* @public
335340
*/
336341
export const colorNeutralBackground3 = 'var(--colorNeutralBackground3)';
337-
/**
338-
* CSS custom property value for the {@link @fluentui/tokens#strokeWidthThicker | `strokeWidthThicker`} design token.
339-
* @public
340-
*/
341-
export const strokeWidthThicker = 'var(--strokeWidthThicker)';
342342
/**
343343
* CSS custom property value for the {@link @fluentui/tokens#fontWeightSemibold | `fontWeightSemibold`} design token.
344344
* @public
@@ -469,6 +469,11 @@ export const borderRadiusSmall = 'var(--borderRadiusSmall)';
469469
* @public
470470
*/
471471
export const borderRadiusXLarge = 'var(--borderRadiusXLarge)';
472+
/**
473+
* CSS custom property value for the {@link @fluentui/tokens#colorBrandStroke2Contrast | `colorBrandStroke2Contrast`} design token.
474+
* @public
475+
*/
476+
export const colorBrandStroke2Contrast = 'var(--colorBrandStroke2Contrast)';
472477
/**
473478
* CSS custom property value for the {@link @fluentui/tokens#spacingVerticalXS | `spacingVerticalXS`} design token.
474479
* @public

0 commit comments

Comments
 (0)