Skip to content

Commit 520d21e

Browse files
adrcotfasadrcotfas
committed
feat: add motion tokens (spring, easing, duration)
Adds theme.motion with two preset schemes (expressiveMotion default, standardMotion), M3 easing curves, and duration constants verified against the material.io spec. Includes toRawSpring() helper to convert the spec damping ratio to the raw coefficient expected by Animated.spring and Reanimated. Deprecates animation.defaultAnimationDuration in favour of theme.motion.duration.*. No component consumes the tokens yet.
1 parent 919f3be commit 520d21e

7 files changed

Lines changed: 505 additions & 0 deletions

File tree

‎src/components/__tests__/__snapshots__/ListSection.test.tsx.snap‎

Lines changed: 342 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,120 @@ exports[`renders list section with custom title style 1`] = `
292292
"lineHeight": 20,
293293
},
294294
},
295+
"motion": {
296+
"duration": {
297+
"extraLong1": 700,
298+
"extraLong2": 800,
299+
"extraLong3": 900,
300+
"extraLong4": 1000,
301+
"long1": 450,
302+
"long2": 500,
303+
"long3": 550,
304+
"long4": 600,
305+
"medium1": 250,
306+
"medium2": 300,
307+
"medium3": 350,
308+
"medium4": 400,
309+
"short1": 50,
310+
"short2": 100,
311+
"short3": 150,
312+
"short4": 200,
313+
},
314+
"easing": {
315+
"emphasized": [
316+
0.2,
317+
0,
318+
0,
319+
1,
320+
],
321+
"emphasizedAccelerate": [
322+
0.3,
323+
0,
324+
0.8,
325+
0.15,
326+
],
327+
"emphasizedDecelerate": [
328+
0.05,
329+
0.7,
330+
0.1,
331+
1,
332+
],
333+
"legacy": [
334+
0.4,
335+
0,
336+
0.2,
337+
1,
338+
],
339+
"legacyAccelerate": [
340+
0.4,
341+
0,
342+
1,
343+
1,
344+
],
345+
"legacyDecelerate": [
346+
0,
347+
0,
348+
0.2,
349+
1,
350+
],
351+
"linear": [
352+
0,
353+
0,
354+
1,
355+
1,
356+
],
357+
"standard": [
358+
0.2,
359+
0,
360+
0,
361+
1,
362+
],
363+
"standardAccelerate": [
364+
0.3,
365+
0,
366+
1,
367+
1,
368+
],
369+
"standardDecelerate": [
370+
0,
371+
0,
372+
0,
373+
1,
374+
],
375+
},
376+
"spring": {
377+
"default": {
378+
"effects": {
379+
"damping": 1,
380+
"stiffness": 1600,
381+
},
382+
"spatial": {
383+
"damping": 0.8,
384+
"stiffness": 380,
385+
},
386+
},
387+
"fast": {
388+
"effects": {
389+
"damping": 1,
390+
"stiffness": 3800,
391+
},
392+
"spatial": {
393+
"damping": 0.6,
394+
"stiffness": 800,
395+
},
396+
},
397+
"slow": {
398+
"effects": {
399+
"damping": 1,
400+
"stiffness": 800,
401+
},
402+
"spatial": {
403+
"damping": 0.8,
404+
"stiffness": 200,
405+
},
406+
},
407+
},
408+
},
295409
"roundness": 4,
296410
"shapes": {
297411
"extraExtraLarge": 48,
@@ -959,6 +1073,120 @@ exports[`renders list section with subheader 1`] = `
9591073
"lineHeight": 20,
9601074
},
9611075
},
1076+
"motion": {
1077+
"duration": {
1078+
"extraLong1": 700,
1079+
"extraLong2": 800,
1080+
"extraLong3": 900,
1081+
"extraLong4": 1000,
1082+
"long1": 450,
1083+
"long2": 500,
1084+
"long3": 550,
1085+
"long4": 600,
1086+
"medium1": 250,
1087+
"medium2": 300,
1088+
"medium3": 350,
1089+
"medium4": 400,
1090+
"short1": 50,
1091+
"short2": 100,
1092+
"short3": 150,
1093+
"short4": 200,
1094+
},
1095+
"easing": {
1096+
"emphasized": [
1097+
0.2,
1098+
0,
1099+
0,
1100+
1,
1101+
],
1102+
"emphasizedAccelerate": [
1103+
0.3,
1104+
0,
1105+
0.8,
1106+
0.15,
1107+
],
1108+
"emphasizedDecelerate": [
1109+
0.05,
1110+
0.7,
1111+
0.1,
1112+
1,
1113+
],
1114+
"legacy": [
1115+
0.4,
1116+
0,
1117+
0.2,
1118+
1,
1119+
],
1120+
"legacyAccelerate": [
1121+
0.4,
1122+
0,
1123+
1,
1124+
1,
1125+
],
1126+
"legacyDecelerate": [
1127+
0,
1128+
0,
1129+
0.2,
1130+
1,
1131+
],
1132+
"linear": [
1133+
0,
1134+
0,
1135+
1,
1136+
1,
1137+
],
1138+
"standard": [
1139+
0.2,
1140+
0,
1141+
0,
1142+
1,
1143+
],
1144+
"standardAccelerate": [
1145+
0.3,
1146+
0,
1147+
1,
1148+
1,
1149+
],
1150+
"standardDecelerate": [
1151+
0,
1152+
0,
1153+
0,
1154+
1,
1155+
],
1156+
},
1157+
"spring": {
1158+
"default": {
1159+
"effects": {
1160+
"damping": 1,
1161+
"stiffness": 1600,
1162+
},
1163+
"spatial": {
1164+
"damping": 0.8,
1165+
"stiffness": 380,
1166+
},
1167+
},
1168+
"fast": {
1169+
"effects": {
1170+
"damping": 1,
1171+
"stiffness": 3800,
1172+
},
1173+
"spatial": {
1174+
"damping": 0.6,
1175+
"stiffness": 800,
1176+
},
1177+
},
1178+
"slow": {
1179+
"effects": {
1180+
"damping": 1,
1181+
"stiffness": 800,
1182+
},
1183+
"spatial": {
1184+
"damping": 0.8,
1185+
"stiffness": 200,
1186+
},
1187+
},
1188+
},
1189+
},
9621190
"roundness": 4,
9631191
"shapes": {
9641192
"extraExtraLarge": 48,
@@ -1624,6 +1852,120 @@ exports[`renders list section without subheader 1`] = `
16241852
"lineHeight": 20,
16251853
},
16261854
},
1855+
"motion": {
1856+
"duration": {
1857+
"extraLong1": 700,
1858+
"extraLong2": 800,
1859+
"extraLong3": 900,
1860+
"extraLong4": 1000,
1861+
"long1": 450,
1862+
"long2": 500,
1863+
"long3": 550,
1864+
"long4": 600,
1865+
"medium1": 250,
1866+
"medium2": 300,
1867+
"medium3": 350,
1868+
"medium4": 400,
1869+
"short1": 50,
1870+
"short2": 100,
1871+
"short3": 150,
1872+
"short4": 200,
1873+
},
1874+
"easing": {
1875+
"emphasized": [
1876+
0.2,
1877+
0,
1878+
0,
1879+
1,
1880+
],
1881+
"emphasizedAccelerate": [
1882+
0.3,
1883+
0,
1884+
0.8,
1885+
0.15,
1886+
],
1887+
"emphasizedDecelerate": [
1888+
0.05,
1889+
0.7,
1890+
0.1,
1891+
1,
1892+
],
1893+
"legacy": [
1894+
0.4,
1895+
0,
1896+
0.2,
1897+
1,
1898+
],
1899+
"legacyAccelerate": [
1900+
0.4,
1901+
0,
1902+
1,
1903+
1,
1904+
],
1905+
"legacyDecelerate": [
1906+
0,
1907+
0,
1908+
0.2,
1909+
1,
1910+
],
1911+
"linear": [
1912+
0,
1913+
0,
1914+
1,
1915+
1,
1916+
],
1917+
"standard": [
1918+
0.2,
1919+
0,
1920+
0,
1921+
1,
1922+
],
1923+
"standardAccelerate": [
1924+
0.3,
1925+
0,
1926+
1,
1927+
1,
1928+
],
1929+
"standardDecelerate": [
1930+
0,
1931+
0,
1932+
0,
1933+
1,
1934+
],
1935+
},
1936+
"spring": {
1937+
"default": {
1938+
"effects": {
1939+
"damping": 1,
1940+
"stiffness": 1600,
1941+
},
1942+
"spatial": {
1943+
"damping": 0.8,
1944+
"stiffness": 380,
1945+
},
1946+
},
1947+
"fast": {
1948+
"effects": {
1949+
"damping": 1,
1950+
"stiffness": 3800,
1951+
},
1952+
"spatial": {
1953+
"damping": 0.6,
1954+
"stiffness": 800,
1955+
},
1956+
},
1957+
"slow": {
1958+
"effects": {
1959+
"damping": 1,
1960+
"stiffness": 800,
1961+
},
1962+
"spatial": {
1963+
"damping": 0.8,
1964+
"stiffness": 200,
1965+
},
1966+
},
1967+
},
1968+
},
16271969
"roundness": 4,
16281970
"shapes": {
16291971
"extraExtraLarge": 48,

‎src/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ export { default as PaperProvider } from './core/PaperProvider';
1515
export { default as shadow } from './theme/shadow';
1616
export { default as configureFonts } from './theme/fonts';
1717
export { cornersToStyle } from './theme/tokens/sys/shape';
18+
export {
19+
expressiveMotion,
20+
standardMotion,
21+
toRawSpring,
22+
} from './theme/tokens/sys/motion';
1823

1924
import * as Avatar from './components/Avatar/Avatar';
2025
import * as Drawer from './components/Drawer/Drawer';

‎src/theme/schemes/base.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { expressiveMotion } from '../tokens/sys/motion';
12
import { defaultShapes } from '../tokens/sys/shape';
23
import { defaultState } from '../tokens/sys/state';
34
import { defaultFonts } from '../tokens/sys/typography';
@@ -13,4 +14,5 @@ export const themeDefaults: ThemeDefaults = {
1314
fonts: defaultFonts,
1415
state: defaultState,
1516
shapes: defaultShapes,
17+
motion: expressiveMotion,
1618
};

0 commit comments

Comments
 (0)