@atlaskit/tokens 12.0.0 → 13.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/artifacts/replacement-mapping.js +2 -153
  3. package/dist/cjs/artifacts/themes/atlassian-typography.js +2 -2
  4. package/dist/cjs/artifacts/token-default-values.js +1 -2
  5. package/dist/cjs/artifacts/token-names.js +1 -2
  6. package/dist/cjs/artifacts/tokens-raw/atlassian-motion.js +197 -197
  7. package/dist/cjs/artifacts/tokens-raw/atlassian-typography.js +1 -34
  8. package/dist/cjs/entry-points/token-metadata.codegen.js +442 -10
  9. package/dist/cjs/entry-points/tokens-raw.js +8 -1
  10. package/dist/es2019/artifacts/replacement-mapping.js +2 -153
  11. package/dist/es2019/artifacts/themes/atlassian-typography.js +1 -2
  12. package/dist/es2019/artifacts/token-default-values.js +1 -2
  13. package/dist/es2019/artifacts/token-names.js +1 -2
  14. package/dist/es2019/artifacts/tokens-raw/atlassian-motion.js +197 -197
  15. package/dist/es2019/artifacts/tokens-raw/atlassian-typography.js +1 -34
  16. package/dist/es2019/entry-points/token-metadata.codegen.js +442 -10
  17. package/dist/es2019/entry-points/tokens-raw.js +2 -1
  18. package/dist/esm/artifacts/replacement-mapping.js +2 -153
  19. package/dist/esm/artifacts/themes/atlassian-typography.js +2 -2
  20. package/dist/esm/artifacts/token-default-values.js +1 -2
  21. package/dist/esm/artifacts/token-names.js +1 -2
  22. package/dist/esm/artifacts/tokens-raw/atlassian-motion.js +197 -197
  23. package/dist/esm/artifacts/tokens-raw/atlassian-typography.js +1 -34
  24. package/dist/esm/entry-points/token-metadata.codegen.js +442 -10
  25. package/dist/esm/entry-points/tokens-raw.js +2 -1
  26. package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
  27. package/dist/types/artifacts/themes/atlassian-typography.d.ts +2 -2
  28. package/dist/types/artifacts/token-default-values.d.ts +1 -2
  29. package/dist/types/artifacts/token-names.d.ts +1 -3
  30. package/dist/types/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
  31. package/dist/types/artifacts/tokens-raw/atlassian-typography.d.ts +1 -1
  32. package/dist/types/artifacts/types-internal.d.ts +2 -2
  33. package/dist/types/artifacts/types.d.ts +2 -2
  34. package/dist/types/entry-points/css-type-schema.codegen.d.ts +2 -2
  35. package/dist/types/entry-points/token-metadata.codegen.d.ts +1 -1
  36. package/dist/types/entry-points/tokens-raw.d.ts +1 -0
  37. package/dist/types/types.d.ts +0 -1
  38. package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +1 -1
  39. package/dist/types-ts4.5/artifacts/themes/atlassian-typography.d.ts +2 -2
  40. package/dist/types-ts4.5/artifacts/token-default-values.d.ts +1 -2
  41. package/dist/types-ts4.5/artifacts/token-names.d.ts +1 -3
  42. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-motion.d.ts +1 -1
  43. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-typography.d.ts +1 -1
  44. package/dist/types-ts4.5/artifacts/types-internal.d.ts +2 -2
  45. package/dist/types-ts4.5/artifacts/types.d.ts +2 -2
  46. package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +2 -2
  47. package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +1 -1
  48. package/dist/types-ts4.5/entry-points/tokens-raw.d.ts +1 -0
  49. package/dist/types-ts4.5/types.d.ts +0 -1
  50. package/figma/atlassian-typography.json +1 -3
  51. package/package.json +11 -12
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::deb6b7be7cc018d4dfc8cb7b1704bde5>>
3
+ * @codegen <<SignedSource::74e601b3ce776abbd8b70ea18be310cc>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
 
@@ -294,39 +294,6 @@ const tokens = [{
294
294
  "name": "font.body.small",
295
295
  "path": ["font", "body", "small"],
296
296
  "cleanName": "font.body.small"
297
- }, {
298
- "attributes": {
299
- "group": "typography",
300
- "state": "deprecated",
301
- "introduced": "1.14.0",
302
- "deprecated": "10.1.0",
303
- "description": "UNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token",
304
- "replacement": "font.body.small"
305
- },
306
- "value": "normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif",
307
- "filePath": "schema/themes/atlassian-typography/theme.tsx",
308
- "isSource": true,
309
- "original": {
310
- "attributes": {
311
- "group": "typography",
312
- "state": "deprecated",
313
- "introduced": "1.14.0",
314
- "deprecated": "10.1.0",
315
- "description": "UNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token",
316
- "replacement": "font.body.small"
317
- },
318
- "value": {
319
- "fontWeight": "FontWeight400",
320
- "fontSize": "FontSize12",
321
- "lineHeight": "LineHeight16",
322
- "fontFamily": "FontFamilyWebSansRefreshed",
323
- "fontStyle": "normal",
324
- "letterSpacing": "LetterSpacing0"
325
- }
326
- },
327
- "name": "font.body.UNSAFE_small",
328
- "path": ["font", "body", "UNSAFE_small"],
329
- "cleanName": "font.body.UNSAFE_small"
330
297
  }, {
331
298
  "attributes": {
332
299
  "group": "typography",
@@ -3,11 +3,452 @@
3
3
  *
4
4
  * Metadata for generation of `@atlaskit/ads-mcp` and https://atlassian.design/llms-tokens.txt.
5
5
  *
6
- * @codegen <<SignedSource::c219f53298a002dc5340fcc003a56953>>
6
+ * @codegen <<SignedSource::84f21045f3136acc13a56a289840c82a>>
7
7
  * @codegenCommand yarn build tokens
8
8
  */
9
9
 
10
10
  export const tokens = [{
11
+ name: 'motion.avatar.enter',
12
+ path: ['motion', 'avatar', 'enter'],
13
+ description: 'Use for avatar group enter transitions.',
14
+ exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleIn80to100, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
15
+ usageGuidelines: {
16
+ usage: '',
17
+ cssProperties: []
18
+ }
19
+ }, {
20
+ name: 'motion.avatar.exit',
21
+ path: ['motion', 'avatar', 'exit'],
22
+ description: 'Use for avatar group exit transitions.',
23
+ exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to80, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
24
+ usageGuidelines: {
25
+ usage: '',
26
+ cssProperties: []
27
+ }
28
+ }, {
29
+ name: 'motion.avatar.hovered',
30
+ path: ['motion', 'avatar', 'hovered'],
31
+ description: 'Use for hover state on avatar elements.',
32
+ exampleValue: 'transform 250ms linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1)',
33
+ usageGuidelines: {
34
+ usage: '',
35
+ cssProperties: []
36
+ }
37
+ }, {
38
+ name: 'motion.blanket.enter',
39
+ path: ['motion', 'blanket', 'enter'],
40
+ description: 'Use for blanket enter transitions.',
41
+ exampleValue: '250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100',
42
+ usageGuidelines: {
43
+ usage: '',
44
+ cssProperties: []
45
+ }
46
+ }, {
47
+ name: 'motion.blanket.exit',
48
+ path: ['motion', 'blanket', 'exit'],
49
+ description: 'Use for blanket exit transitions.',
50
+ exampleValue: '200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
51
+ usageGuidelines: {
52
+ usage: '',
53
+ cssProperties: []
54
+ }
55
+ }, {
56
+ name: 'motion.duration.instant',
57
+ path: ['motion', 'duration', 'instant'],
58
+ description: 'Use for instant feedback with no perceptible delay, such as list item hover, selected and focus states.',
59
+ exampleValue: '0ms',
60
+ usageGuidelines: {
61
+ usage: '',
62
+ cssProperties: []
63
+ }
64
+ }, {
65
+ name: 'motion.duration.long',
66
+ path: ['motion', 'duration', 'long'],
67
+ description: 'Use for medium entrance transitions, such as modal enter and flag enter.',
68
+ exampleValue: '250ms',
69
+ usageGuidelines: {
70
+ usage: '',
71
+ cssProperties: []
72
+ }
73
+ }, {
74
+ name: 'motion.duration.medium',
75
+ path: ['motion', 'duration', 'medium'],
76
+ description: 'Use for medium exit transitions, such as modal exit and flag exit.',
77
+ exampleValue: '200ms',
78
+ usageGuidelines: {
79
+ usage: '',
80
+ cssProperties: []
81
+ }
82
+ }, {
83
+ name: 'motion.duration.short',
84
+ path: ['motion', 'duration', 'short'],
85
+ description: 'Use for interactive state emphasis and small entrances, such as button hover and pressed states, popup enter, and avatar appear.',
86
+ exampleValue: '150ms',
87
+ usageGuidelines: {
88
+ usage: '',
89
+ cssProperties: []
90
+ }
91
+ }, {
92
+ name: 'motion.duration.xlong',
93
+ path: ['motion', 'duration', 'xlong'],
94
+ description: 'Use for large transitions, such as panel enter/exit, page transitions, and full-screen overlays.',
95
+ exampleValue: '400ms',
96
+ usageGuidelines: {
97
+ usage: '',
98
+ cssProperties: []
99
+ }
100
+ }, {
101
+ name: 'motion.duration.xshort',
102
+ path: ['motion', 'duration', 'xshort'],
103
+ description: 'Use for subtle pressed states and quick exits, such as component press feedback, popup dismiss, and avatar transitions.',
104
+ exampleValue: '100ms',
105
+ usageGuidelines: {
106
+ usage: '',
107
+ cssProperties: []
108
+ }
109
+ }, {
110
+ name: 'motion.duration.xxlong',
111
+ path: ['motion', 'duration', 'xxlong'],
112
+ description: 'Use for large transitions, such as onboarding steps and full-screen overlays.',
113
+ exampleValue: '600ms',
114
+ usageGuidelines: {
115
+ usage: '',
116
+ cssProperties: []
117
+ }
118
+ }, {
119
+ name: 'motion.duration.xxshort',
120
+ path: ['motion', 'duration', 'xxshort'],
121
+ description: 'Use for instant feedback, such as list item hover, selected and focus states.',
122
+ exampleValue: '50ms',
123
+ usageGuidelines: {
124
+ usage: '',
125
+ cssProperties: []
126
+ }
127
+ }, {
128
+ name: 'motion.easing.in.practical',
129
+ path: ['motion', 'easing', 'in', 'practical'],
130
+ description: 'Starts slowly and accelerates away. Best for exit transitions where elements leaving the screen should feel like they are getting out of the way.',
131
+ exampleValue: 'cubic-bezier(0.6, 0, 0.8, 0.6)',
132
+ usageGuidelines: {
133
+ usage: '',
134
+ cssProperties: []
135
+ }
136
+ }, {
137
+ name: 'motion.easing.inout.bold',
138
+ path: ['motion', 'easing', 'inout', 'bold'],
139
+ description: 'The bold in-out curve pairs naturally with scale and repositioning of elements. It controls both the start and end of the motion.',
140
+ exampleValue: 'cubic-bezier(0.4, 0, 0, 1)',
141
+ usageGuidelines: {
142
+ usage: '',
143
+ cssProperties: []
144
+ }
145
+ }, {
146
+ name: 'motion.easing.out.practical',
147
+ path: ['motion', 'easing', 'out', 'practical'],
148
+ description: 'A practical, everyday enter curve. Less dramatic than the bold variant, good for subtle transitions like content swaps, tab changes, and list reordering.',
149
+ exampleValue: 'cubic-bezier(0.4, 1, 0.6, 1)',
150
+ usageGuidelines: {
151
+ usage: '',
152
+ cssProperties: []
153
+ }
154
+ }, {
155
+ name: 'motion.easing.out.bold',
156
+ path: ['motion', 'easing', 'out', 'bold'],
157
+ description: 'Elements arrive quickly and decelerate to a stop. The fast start grabs attention and the gentle landing feels controlled.',
158
+ exampleValue: 'cubic-bezier(0, 0.4, 0, 1)',
159
+ usageGuidelines: {
160
+ usage: '',
161
+ cssProperties: []
162
+ }
163
+ }, {
164
+ name: 'motion.easing.spring',
165
+ path: ['motion', 'easing', 'spring'],
166
+ description: 'A spring curve that overshoots slightly before settling. Use for playful, tactile feedback on small branded elements such as avatar hover, where the slight overshoot reinforces a sense of life.',
167
+ exampleValue: 'linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1)',
168
+ usageGuidelines: {
169
+ usage: '',
170
+ cssProperties: []
171
+ }
172
+ }, {
173
+ name: 'motion.flag.enter',
174
+ path: ['motion', 'flag', 'enter'],
175
+ description: 'Use for flag enter transitions.',
176
+ exampleValue: '250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100',
177
+ usageGuidelines: {
178
+ usage: '',
179
+ cssProperties: []
180
+ }
181
+ }, {
182
+ name: 'motion.flag.exit',
183
+ path: ['motion', 'flag', 'exit'],
184
+ description: 'Use for flag exit transitions.',
185
+ exampleValue: '200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
186
+ usageGuidelines: {
187
+ usage: '',
188
+ cssProperties: []
189
+ }
190
+ }, {
191
+ name: 'motion.flag.reposition',
192
+ path: ['motion', 'flag', 'reposition'],
193
+ description: 'Use for repositioning flag elements.',
194
+ exampleValue: 'transform 250ms cubic-bezier(0.4, 0, 0, 1)',
195
+ usageGuidelines: {
196
+ usage: '',
197
+ cssProperties: []
198
+ }
199
+ }, {
200
+ name: 'motion.keyframe.fade.in',
201
+ path: ['motion', 'keyframe', 'fade', 'in'],
202
+ description: 'Use for fade-in transitions where an element goes from fully transparent to fully opaque.',
203
+ exampleValue: 'FadeIn0to100',
204
+ usageGuidelines: {
205
+ usage: '',
206
+ cssProperties: []
207
+ }
208
+ }, {
209
+ name: 'motion.keyframe.fade.out',
210
+ path: ['motion', 'keyframe', 'fade', 'out'],
211
+ description: 'Use for fade-out transitions where an element goes from fully opaque to fully transparent.',
212
+ exampleValue: 'FadeOut100to0',
213
+ usageGuidelines: {
214
+ usage: '',
215
+ cssProperties: []
216
+ }
217
+ }, {
218
+ name: 'motion.keyframe.scale.in.medium',
219
+ path: ['motion', 'keyframe', 'scale', 'in', 'medium'],
220
+ description: 'Use for medium scale-in transitions where an element grows from 80% to full size on enter.',
221
+ exampleValue: 'ScaleIn80to100',
222
+ usageGuidelines: {
223
+ usage: '',
224
+ cssProperties: []
225
+ }
226
+ }, {
227
+ name: 'motion.keyframe.scale.in.small',
228
+ path: ['motion', 'keyframe', 'scale', 'in', 'small'],
229
+ description: 'Use for small scale-in transitions where an element grows from 95% to full size on enter.',
230
+ exampleValue: 'ScaleIn95to100',
231
+ usageGuidelines: {
232
+ usage: '',
233
+ cssProperties: []
234
+ }
235
+ }, {
236
+ name: 'motion.keyframe.scale.out.medium',
237
+ path: ['motion', 'keyframe', 'scale', 'out', 'medium'],
238
+ description: 'Use for medium scale-out transitions where an element shrinks from full size to 80% on exit.',
239
+ exampleValue: 'ScaleOut100to80',
240
+ usageGuidelines: {
241
+ usage: '',
242
+ cssProperties: []
243
+ }
244
+ }, {
245
+ name: 'motion.keyframe.scale.out.small',
246
+ path: ['motion', 'keyframe', 'scale', 'out', 'small'],
247
+ description: 'Use for small scale-out transitions where an element shrinks from full size to 95% on exit.',
248
+ exampleValue: 'ScaleOut100to95',
249
+ usageGuidelines: {
250
+ usage: '',
251
+ cssProperties: []
252
+ }
253
+ }, {
254
+ name: 'motion.keyframe.slide.in.bottom.short',
255
+ path: ['motion', 'keyframe', 'slide', 'in', 'bottom', 'short'],
256
+ description: 'Use for short slide-in transitions where an element enters from below its final position by 8px.',
257
+ exampleValue: 'SlideInBottom8px',
258
+ usageGuidelines: {
259
+ usage: '',
260
+ cssProperties: []
261
+ }
262
+ }, {
263
+ name: 'motion.keyframe.slide.in.left.half',
264
+ path: ['motion', 'keyframe', 'slide', 'in', 'left', 'half'],
265
+ description: 'Use for slide-in transitions where an element enters from the left of its final position by 50%.',
266
+ exampleValue: 'SlideIn50PercentLeft',
267
+ usageGuidelines: {
268
+ usage: '',
269
+ cssProperties: []
270
+ }
271
+ }, {
272
+ name: 'motion.keyframe.slide.in.left.short',
273
+ path: ['motion', 'keyframe', 'slide', 'in', 'left', 'short'],
274
+ description: 'Use for short slide-in transitions where an element enters from the left of its final position by 8px.',
275
+ exampleValue: 'SlideInLeft8px',
276
+ usageGuidelines: {
277
+ usage: '',
278
+ cssProperties: []
279
+ }
280
+ }, {
281
+ name: 'motion.keyframe.slide.in.right.short',
282
+ path: ['motion', 'keyframe', 'slide', 'in', 'right', 'short'],
283
+ description: 'Use for short slide-in transitions where an element enters from the right of its final position by 8px.',
284
+ exampleValue: 'SlideInRight8px',
285
+ usageGuidelines: {
286
+ usage: '',
287
+ cssProperties: []
288
+ }
289
+ }, {
290
+ name: 'motion.keyframe.slide.in.top.short',
291
+ path: ['motion', 'keyframe', 'slide', 'in', 'top', 'short'],
292
+ description: 'Use for short slide-in transitions where an element enters from above its final position by 8px.',
293
+ exampleValue: 'SlideInTop8px',
294
+ usageGuidelines: {
295
+ usage: '',
296
+ cssProperties: []
297
+ }
298
+ }, {
299
+ name: 'motion.keyframe.slide.out.bottom.short',
300
+ path: ['motion', 'keyframe', 'slide', 'out', 'bottom', 'short'],
301
+ description: 'Use for short slide-out transitions where an element exits downward by 8px from its starting position.',
302
+ exampleValue: 'SlideOutBottom8px',
303
+ usageGuidelines: {
304
+ usage: '',
305
+ cssProperties: []
306
+ }
307
+ }, {
308
+ name: 'motion.keyframe.slide.out.left.half',
309
+ path: ['motion', 'keyframe', 'slide', 'out', 'left', 'half'],
310
+ description: 'Use for slide-out transitions where an element exits to the left of its starting position by 15%.',
311
+ exampleValue: 'SlideOut15PercentLeft',
312
+ usageGuidelines: {
313
+ usage: '',
314
+ cssProperties: []
315
+ }
316
+ }, {
317
+ name: 'motion.keyframe.slide.out.left.short',
318
+ path: ['motion', 'keyframe', 'slide', 'out', 'left', 'short'],
319
+ description: 'Use for short slide-out transitions where an element exits to the left by 8px from its starting position.',
320
+ exampleValue: 'SlideOutLeft8px',
321
+ usageGuidelines: {
322
+ usage: '',
323
+ cssProperties: []
324
+ }
325
+ }, {
326
+ name: 'motion.keyframe.slide.out.right.short',
327
+ path: ['motion', 'keyframe', 'slide', 'out', 'right', 'short'],
328
+ description: 'Use for short slide-out transitions where an element exits to the right by 8px from its starting position.',
329
+ exampleValue: 'SlideOutRight8px',
330
+ usageGuidelines: {
331
+ usage: '',
332
+ cssProperties: []
333
+ }
334
+ }, {
335
+ name: 'motion.keyframe.slide.out.top.short',
336
+ path: ['motion', 'keyframe', 'slide', 'out', 'top', 'short'],
337
+ description: 'Use for short slide-out transitions where an element exits upward by 8px from its starting position.',
338
+ exampleValue: 'SlideOutTop8px',
339
+ usageGuidelines: {
340
+ usage: '',
341
+ cssProperties: []
342
+ }
343
+ }, {
344
+ name: 'motion.modal.enter',
345
+ path: ['motion', 'modal', 'enter'],
346
+ description: 'Use for modal enter transitions.',
347
+ exampleValue: '250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100',
348
+ usageGuidelines: {
349
+ usage: '',
350
+ cssProperties: []
351
+ }
352
+ }, {
353
+ name: 'motion.modal.exit',
354
+ path: ['motion', 'modal', 'exit'],
355
+ description: 'Use for modal exit transitions.',
356
+ exampleValue: '200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95',
357
+ usageGuidelines: {
358
+ usage: '',
359
+ cssProperties: []
360
+ }
361
+ }, {
362
+ name: 'motion.popup.enter.bottom',
363
+ path: ['motion', 'popup', 'enter', 'bottom'],
364
+ description: 'Use for popup enter from the bottom.',
365
+ exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
366
+ usageGuidelines: {
367
+ usage: '',
368
+ cssProperties: []
369
+ }
370
+ }, {
371
+ name: 'motion.popup.enter.left',
372
+ path: ['motion', 'popup', 'enter', 'left'],
373
+ description: 'Use for popup enter from the left.',
374
+ exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
375
+ usageGuidelines: {
376
+ usage: '',
377
+ cssProperties: []
378
+ }
379
+ }, {
380
+ name: 'motion.popup.enter.right',
381
+ path: ['motion', 'popup', 'enter', 'right'],
382
+ description: 'Use for popup enter from the right.',
383
+ exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
384
+ usageGuidelines: {
385
+ usage: '',
386
+ cssProperties: []
387
+ }
388
+ }, {
389
+ name: 'motion.popup.enter.top',
390
+ path: ['motion', 'popup', 'enter', 'top'],
391
+ description: 'Use for popup enter from the top: popup, tooltip, dropdown, inline message, inline dialog.',
392
+ exampleValue: '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
393
+ usageGuidelines: {
394
+ usage: '',
395
+ cssProperties: []
396
+ }
397
+ }, {
398
+ name: 'motion.popup.exit.bottom',
399
+ path: ['motion', 'popup', 'exit', 'bottom'],
400
+ description: 'Use for popup exit toward the bottom.',
401
+ exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
402
+ usageGuidelines: {
403
+ usage: '',
404
+ cssProperties: []
405
+ }
406
+ }, {
407
+ name: 'motion.popup.exit.left',
408
+ path: ['motion', 'popup', 'exit', 'left'],
409
+ description: 'Use for popup exit toward the left.',
410
+ exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
411
+ usageGuidelines: {
412
+ usage: '',
413
+ cssProperties: []
414
+ }
415
+ }, {
416
+ name: 'motion.popup.exit.right',
417
+ path: ['motion', 'popup', 'exit', 'right'],
418
+ description: 'Use for popup exit toward the right.',
419
+ exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
420
+ usageGuidelines: {
421
+ usage: '',
422
+ cssProperties: []
423
+ }
424
+ }, {
425
+ name: 'motion.popup.exit.top',
426
+ path: ['motion', 'popup', 'exit', 'top'],
427
+ description: 'Use for popup exit toward the top.',
428
+ exampleValue: '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
429
+ usageGuidelines: {
430
+ usage: '',
431
+ cssProperties: []
432
+ }
433
+ }, {
434
+ name: 'motion.spotlight.enter',
435
+ path: ['motion', 'spotlight', 'enter'],
436
+ description: 'Use for spotlight enter transitions.',
437
+ exampleValue: '250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100',
438
+ usageGuidelines: {
439
+ usage: '',
440
+ cssProperties: []
441
+ }
442
+ }, {
443
+ name: 'motion.spotlight.exit',
444
+ path: ['motion', 'spotlight', 'exit'],
445
+ description: 'Use for spotlight exit transitions.',
446
+ exampleValue: '200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
447
+ usageGuidelines: {
448
+ usage: '',
449
+ cssProperties: []
450
+ }
451
+ }, {
11
452
  name: 'color.text',
12
453
  path: ['color', 'text', '[default]'],
13
454
  description: 'Use for primary text, such as body copy, sentence case headers, and buttons.',
@@ -3994,15 +4435,6 @@ export const tokens = [{
3994
4435
  usage: 'A composite token that applies all font properties for standard body text (e.g. font.body)',
3995
4436
  cssProperties: ['font']
3996
4437
  }
3997
- }, {
3998
- name: 'font.body.UNSAFE_small',
3999
- path: ['font', 'body', 'UNSAFE_small'],
4000
- description: 'UNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token',
4001
- exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
4002
- usageGuidelines: {
4003
- usage: 'A composite token that applies all font properties for standard body text (e.g. font.body)',
4004
- cssProperties: ['font']
4005
- }
4006
4438
  }, {
4007
4439
  name: 'font.metric.large',
4008
4440
  path: ['font', 'metric', 'large'],
@@ -2,4 +2,5 @@ export { default as light } from '../artifacts/tokens-raw/atlassian-light';
2
2
  export { default as dark } from '../artifacts/tokens-raw/atlassian-dark';
3
3
  export { default as spacing } from '../artifacts/tokens-raw/atlassian-spacing';
4
4
  export { default as typography } from '../artifacts/tokens-raw/atlassian-typography';
5
- export { default as shape } from '../artifacts/tokens-raw/atlassian-shape';
5
+ export { default as shape } from '../artifacts/tokens-raw/atlassian-shape';
6
+ export { default as motion } from '../artifacts/tokens-raw/atlassian-motion';
@@ -12,160 +12,9 @@
12
12
  * These changes will then be picked up by our tooling which will attempt to
13
13
  * migrate as many of these renames as possible.
14
14
  *
15
- * @codegen <<SignedSource::26489b868b6a67a598f0fa4a421cae65>>
15
+ * @codegen <<SignedSource::c779b40628532228cae2ec34977f1f8e>>
16
16
  * @codegenCommand yarn build tokens
17
17
  */
18
18
 
19
- var replacementMapper = [{
20
- "path": "motion.avatar.enter",
21
- "state": "experimental"
22
- }, {
23
- "path": "motion.avatar.exit",
24
- "state": "experimental"
25
- }, {
26
- "path": "motion.avatar.hovered",
27
- "state": "experimental"
28
- }, {
29
- "path": "motion.blanket.enter",
30
- "state": "experimental"
31
- }, {
32
- "path": "motion.blanket.exit",
33
- "state": "experimental"
34
- }, {
35
- "path": "motion.duration.instant",
36
- "state": "experimental"
37
- }, {
38
- "path": "motion.duration.long",
39
- "state": "experimental"
40
- }, {
41
- "path": "motion.duration.medium",
42
- "state": "experimental"
43
- }, {
44
- "path": "motion.duration.short",
45
- "state": "experimental"
46
- }, {
47
- "path": "motion.duration.xlong",
48
- "state": "experimental"
49
- }, {
50
- "path": "motion.duration.xshort",
51
- "state": "experimental"
52
- }, {
53
- "path": "motion.duration.xxlong",
54
- "state": "experimental"
55
- }, {
56
- "path": "motion.duration.xxshort",
57
- "state": "experimental"
58
- }, {
59
- "path": "motion.easing.in.practical",
60
- "state": "experimental"
61
- }, {
62
- "path": "motion.easing.inout.bold",
63
- "state": "experimental"
64
- }, {
65
- "path": "motion.easing.out.practical",
66
- "state": "experimental"
67
- }, {
68
- "path": "motion.easing.out.bold",
69
- "state": "experimental"
70
- }, {
71
- "path": "motion.easing.spring",
72
- "state": "experimental"
73
- }, {
74
- "path": "motion.flag.enter",
75
- "state": "experimental"
76
- }, {
77
- "path": "motion.flag.exit",
78
- "state": "experimental"
79
- }, {
80
- "path": "motion.flag.reposition",
81
- "state": "experimental"
82
- }, {
83
- "path": "motion.keyframe.fade.in",
84
- "state": "experimental"
85
- }, {
86
- "path": "motion.keyframe.fade.out",
87
- "state": "experimental"
88
- }, {
89
- "path": "motion.keyframe.scale.in.medium",
90
- "state": "experimental"
91
- }, {
92
- "path": "motion.keyframe.scale.in.small",
93
- "state": "experimental"
94
- }, {
95
- "path": "motion.keyframe.scale.out.medium",
96
- "state": "experimental"
97
- }, {
98
- "path": "motion.keyframe.scale.out.small",
99
- "state": "experimental"
100
- }, {
101
- "path": "motion.keyframe.slide.in.bottom.short",
102
- "state": "experimental"
103
- }, {
104
- "path": "motion.keyframe.slide.in.left.half",
105
- "state": "experimental"
106
- }, {
107
- "path": "motion.keyframe.slide.in.left.short",
108
- "state": "experimental"
109
- }, {
110
- "path": "motion.keyframe.slide.in.right.short",
111
- "state": "experimental"
112
- }, {
113
- "path": "motion.keyframe.slide.in.top.short",
114
- "state": "experimental"
115
- }, {
116
- "path": "motion.keyframe.slide.out.bottom.short",
117
- "state": "experimental"
118
- }, {
119
- "path": "motion.keyframe.slide.out.left.half",
120
- "state": "experimental"
121
- }, {
122
- "path": "motion.keyframe.slide.out.left.short",
123
- "state": "experimental"
124
- }, {
125
- "path": "motion.keyframe.slide.out.right.short",
126
- "state": "experimental"
127
- }, {
128
- "path": "motion.keyframe.slide.out.top.short",
129
- "state": "experimental"
130
- }, {
131
- "path": "motion.modal.enter",
132
- "state": "experimental"
133
- }, {
134
- "path": "motion.modal.exit",
135
- "state": "experimental"
136
- }, {
137
- "path": "motion.popup.enter.bottom",
138
- "state": "experimental"
139
- }, {
140
- "path": "motion.popup.enter.left",
141
- "state": "experimental"
142
- }, {
143
- "path": "motion.popup.enter.right",
144
- "state": "experimental"
145
- }, {
146
- "path": "motion.popup.enter.top",
147
- "state": "experimental"
148
- }, {
149
- "path": "motion.popup.exit.bottom",
150
- "state": "experimental"
151
- }, {
152
- "path": "motion.popup.exit.left",
153
- "state": "experimental"
154
- }, {
155
- "path": "motion.popup.exit.right",
156
- "state": "experimental"
157
- }, {
158
- "path": "motion.popup.exit.top",
159
- "state": "experimental"
160
- }, {
161
- "path": "motion.spotlight.enter",
162
- "state": "experimental"
163
- }, {
164
- "path": "motion.spotlight.exit",
165
- "state": "experimental"
166
- }, {
167
- "path": "font.body.UNSAFE_small",
168
- "state": "deprecated",
169
- "replacement": "font.body.small"
170
- }];
19
+ var replacementMapper = [];
171
20
  export default replacementMapper;