Skip to content

Commit 0808cd7

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
1 parent c4dc2f1 commit 0808cd7

7 files changed

Lines changed: 439 additions & 15 deletions

File tree

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

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,102 @@ 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+
"linear": [
334+
0,
335+
0,
336+
1,
337+
1,
338+
],
339+
"standard": [
340+
0.2,
341+
0,
342+
0,
343+
1,
344+
],
345+
"standardAccelerate": [
346+
0.3,
347+
0,
348+
1,
349+
1,
350+
],
351+
"standardDecelerate": [
352+
0,
353+
0,
354+
0,
355+
1,
356+
],
357+
},
358+
"spring": {
359+
"default": {
360+
"effects": {
361+
"damping": 1,
362+
"stiffness": 1600,
363+
},
364+
"spatial": {
365+
"damping": 0.8,
366+
"stiffness": 380,
367+
},
368+
},
369+
"fast": {
370+
"effects": {
371+
"damping": 1,
372+
"stiffness": 3800,
373+
},
374+
"spatial": {
375+
"damping": 0.6,
376+
"stiffness": 800,
377+
},
378+
},
379+
"slow": {
380+
"effects": {
381+
"damping": 1,
382+
"stiffness": 800,
383+
},
384+
"spatial": {
385+
"damping": 0.8,
386+
"stiffness": 200,
387+
},
388+
},
389+
},
390+
},
295391
"shapes": {
296392
"corner": {
297393
"extraExtraLarge": 48,
@@ -950,6 +1046,102 @@ exports[`renders list section with subheader 1`] = `
9501046
"lineHeight": 20,
9511047
},
9521048
},
1049+
"motion": {
1050+
"duration": {
1051+
"extraLong1": 700,
1052+
"extraLong2": 800,
1053+
"extraLong3": 900,
1054+
"extraLong4": 1000,
1055+
"long1": 450,
1056+
"long2": 500,
1057+
"long3": 550,
1058+
"long4": 600,
1059+
"medium1": 250,
1060+
"medium2": 300,
1061+
"medium3": 350,
1062+
"medium4": 400,
1063+
"short1": 50,
1064+
"short2": 100,
1065+
"short3": 150,
1066+
"short4": 200,
1067+
},
1068+
"easing": {
1069+
"emphasized": [
1070+
0.2,
1071+
0,
1072+
0,
1073+
1,
1074+
],
1075+
"emphasizedAccelerate": [
1076+
0.3,
1077+
0,
1078+
0.8,
1079+
0.15,
1080+
],
1081+
"emphasizedDecelerate": [
1082+
0.05,
1083+
0.7,
1084+
0.1,
1085+
1,
1086+
],
1087+
"linear": [
1088+
0,
1089+
0,
1090+
1,
1091+
1,
1092+
],
1093+
"standard": [
1094+
0.2,
1095+
0,
1096+
0,
1097+
1,
1098+
],
1099+
"standardAccelerate": [
1100+
0.3,
1101+
0,
1102+
1,
1103+
1,
1104+
],
1105+
"standardDecelerate": [
1106+
0,
1107+
0,
1108+
0,
1109+
1,
1110+
],
1111+
},
1112+
"spring": {
1113+
"default": {
1114+
"effects": {
1115+
"damping": 1,
1116+
"stiffness": 1600,
1117+
},
1118+
"spatial": {
1119+
"damping": 0.8,
1120+
"stiffness": 380,
1121+
},
1122+
},
1123+
"fast": {
1124+
"effects": {
1125+
"damping": 1,
1126+
"stiffness": 3800,
1127+
},
1128+
"spatial": {
1129+
"damping": 0.6,
1130+
"stiffness": 800,
1131+
},
1132+
},
1133+
"slow": {
1134+
"effects": {
1135+
"damping": 1,
1136+
"stiffness": 800,
1137+
},
1138+
"spatial": {
1139+
"damping": 0.8,
1140+
"stiffness": 200,
1141+
},
1142+
},
1143+
},
1144+
},
9531145
"shapes": {
9541146
"corner": {
9551147
"extraExtraLarge": 48,
@@ -1606,6 +1798,102 @@ exports[`renders list section without subheader 1`] = `
16061798
"lineHeight": 20,
16071799
},
16081800
},
1801+
"motion": {
1802+
"duration": {
1803+
"extraLong1": 700,
1804+
"extraLong2": 800,
1805+
"extraLong3": 900,
1806+
"extraLong4": 1000,
1807+
"long1": 450,
1808+
"long2": 500,
1809+
"long3": 550,
1810+
"long4": 600,
1811+
"medium1": 250,
1812+
"medium2": 300,
1813+
"medium3": 350,
1814+
"medium4": 400,
1815+
"short1": 50,
1816+
"short2": 100,
1817+
"short3": 150,
1818+
"short4": 200,
1819+
},
1820+
"easing": {
1821+
"emphasized": [
1822+
0.2,
1823+
0,
1824+
0,
1825+
1,
1826+
],
1827+
"emphasizedAccelerate": [
1828+
0.3,
1829+
0,
1830+
0.8,
1831+
0.15,
1832+
],
1833+
"emphasizedDecelerate": [
1834+
0.05,
1835+
0.7,
1836+
0.1,
1837+
1,
1838+
],
1839+
"linear": [
1840+
0,
1841+
0,
1842+
1,
1843+
1,
1844+
],
1845+
"standard": [
1846+
0.2,
1847+
0,
1848+
0,
1849+
1,
1850+
],
1851+
"standardAccelerate": [
1852+
0.3,
1853+
0,
1854+
1,
1855+
1,
1856+
],
1857+
"standardDecelerate": [
1858+
0,
1859+
0,
1860+
0,
1861+
1,
1862+
],
1863+
},
1864+
"spring": {
1865+
"default": {
1866+
"effects": {
1867+
"damping": 1,
1868+
"stiffness": 1600,
1869+
},
1870+
"spatial": {
1871+
"damping": 0.8,
1872+
"stiffness": 380,
1873+
},
1874+
},
1875+
"fast": {
1876+
"effects": {
1877+
"damping": 1,
1878+
"stiffness": 3800,
1879+
},
1880+
"spatial": {
1881+
"damping": 0.6,
1882+
"stiffness": 800,
1883+
},
1884+
},
1885+
"slow": {
1886+
"effects": {
1887+
"damping": 1,
1888+
"stiffness": 800,
1889+
},
1890+
"spatial": {
1891+
"damping": 0.8,
1892+
"stiffness": 200,
1893+
},
1894+
},
1895+
},
1896+
},
16091897
"shapes": {
16101898
"corner": {
16111899
"extraExtraLarge": 48,

‎src/core/__tests__/PaperProvider.test.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -122,20 +122,6 @@ describe('PaperProvider', () => {
122122
);
123123
});
124124

125-
it('handles overriding animation with the custom one', () => {
126-
const { getByTestId } = render(
127-
createProvider({
128-
...LightTheme,
129-
animation: { defaultAnimationDuration: 250 },
130-
})
131-
);
132-
133-
expect(getByTestId('provider-child-view').props.theme).toStrictEqual({
134-
...LightTheme,
135-
animation: { scale: 1, defaultAnimationDuration: 250 },
136-
});
137-
});
138-
139125
it('should set AccessibilityInfo listeners, if there is no theme', async () => {
140126
mockAppearance();
141127
mockAccessibilityInfo();

‎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 { defaultFonts } from '../tokens/sys/typography';
34
import type { Theme } from '../types';
@@ -10,4 +11,5 @@ export const themeDefaults: ThemeDefaults = {
1011
},
1112
fonts: defaultFonts,
1213
shapes: defaultShapes,
14+
motion: expressiveMotion,
1315
};

0 commit comments

Comments
 (0)