Motion tokens (duration and easing) are defined in @fluentui/tokens, but are not exported there for direct consumption in JavaScript. Only the CSS variable names are exported.
The motion tokens were copied into @fluentui/react-motions-preview to allow JavaScript consumption. This was deemed the least intrusive solution after a discussion of other possible approaches.
The copied motion tokens deviated from the original in terms of some numerical values, names and structure.
Previous Behavior
Easing curve token values in @fluentui/react-motions-preview are incorrect (same errors as in #29546)
Easing curve token names do not match those in @fluentui/tokens (easing___ vs. curve___)
Duration and easing tokens are combined in one flat set, whereas the original has them grouped in durations and curves objects
New Behavior
Easing curve token values are in sync with packages/tokens/src/global/curves.ts
Easing curve tokens are named curve___ as in the original
The original's durations and curves objects are restored. This supports use cases like motion configurators where the durations and curves options are listed in dropdowns.
The combined motionTokens object is kept as an combined, flat lookup. This can be more convenient for some use cases.
Context
@fluentui/tokens
, but are not exported there for direct consumption in JavaScript. Only the CSS variable names are exported.@fluentui/react-motions-preview
to allow JavaScript consumption. This was deemed the least intrusive solution after a discussion of other possible approaches.Previous Behavior
@fluentui/react-motions-preview
are incorrect (same errors as in #29546)@fluentui/tokens
(easing___
vs.curve___
)durations
andcurves
objectsNew Behavior
packages/tokens/src/global/curves.ts
curve___
as in the originaldurations
andcurves
objects are restored. This supports use cases like motion configurators where the durations and curves options are listed in dropdowns.motionTokens
object is kept as an combined, flat lookup. This can be more convenient for some use cases.Related Issue(s)