@atlaskit/tokens 11.4.3 → 12.0.0

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 (36) hide show
  1. package/CHANGELOG.md +58 -0
  2. package/dist/cjs/artifacts/palettes-raw/motion-palette.js +123 -305
  3. package/dist/cjs/artifacts/replacement-mapping.js +82 -7
  4. package/dist/cjs/artifacts/themes/atlassian-motion.js +2 -2
  5. package/dist/cjs/artifacts/token-default-values.js +50 -25
  6. package/dist/cjs/artifacts/token-names.js +32 -7
  7. package/dist/cjs/artifacts/tokens-raw/atlassian-motion.js +653 -135
  8. package/dist/es2019/artifacts/palettes-raw/motion-palette.js +123 -305
  9. package/dist/es2019/artifacts/replacement-mapping.js +82 -7
  10. package/dist/es2019/artifacts/themes/atlassian-motion.js +64 -91
  11. package/dist/es2019/artifacts/token-default-values.js +50 -25
  12. package/dist/es2019/artifacts/token-names.js +32 -7
  13. package/dist/es2019/artifacts/tokens-raw/atlassian-motion.js +653 -135
  14. package/dist/esm/artifacts/palettes-raw/motion-palette.js +123 -305
  15. package/dist/esm/artifacts/replacement-mapping.js +82 -7
  16. package/dist/esm/artifacts/themes/atlassian-motion.js +2 -2
  17. package/dist/esm/artifacts/token-default-values.js +50 -25
  18. package/dist/esm/artifacts/token-names.js +32 -7
  19. package/dist/esm/artifacts/tokens-raw/atlassian-motion.js +653 -135
  20. package/dist/types/artifacts/palettes-raw/motion-palette.d.ts +3 -15
  21. package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
  22. package/dist/types/artifacts/themes/atlassian-motion.d.ts +2 -2
  23. package/dist/types/artifacts/token-default-values.d.ts +50 -25
  24. package/dist/types/artifacts/token-names.d.ts +63 -13
  25. package/dist/types/artifacts/tokens-raw/atlassian-motion.d.ts +5 -5
  26. package/dist/types/entry-points/css-type-schema.codegen.d.ts +5 -2
  27. package/dist/types/types.d.ts +93 -14
  28. package/dist/types-ts4.5/artifacts/palettes-raw/motion-palette.d.ts +3 -15
  29. package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +1 -1
  30. package/dist/types-ts4.5/artifacts/themes/atlassian-motion.d.ts +2 -2
  31. package/dist/types-ts4.5/artifacts/token-default-values.d.ts +50 -25
  32. package/dist/types-ts4.5/artifacts/token-names.d.ts +63 -13
  33. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-motion.d.ts +5 -5
  34. package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +5 -2
  35. package/dist/types-ts4.5/types.d.ts +93 -14
  36. package/package.json +8 -8
@@ -12,7 +12,7 @@
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::e46353a7329c8e87640e1586a2ec2ce7>>
15
+ * @codegen <<SignedSource::26489b868b6a67a598f0fa4a421cae65>>
16
16
  * @codegenCommand yarn build tokens
17
17
  */
18
18
 
@@ -26,22 +26,49 @@ const replacementMapper = [{
26
26
  "path": "motion.avatar.hovered",
27
27
  "state": "experimental"
28
28
  }, {
29
- "path": "motion.content.enter.long",
29
+ "path": "motion.blanket.enter",
30
30
  "state": "experimental"
31
31
  }, {
32
- "path": "motion.content.enter.medium",
32
+ "path": "motion.blanket.exit",
33
33
  "state": "experimental"
34
34
  }, {
35
- "path": "motion.content.enter.short",
35
+ "path": "motion.duration.instant",
36
36
  "state": "experimental"
37
37
  }, {
38
- "path": "motion.content.exit.long",
38
+ "path": "motion.duration.long",
39
39
  "state": "experimental"
40
40
  }, {
41
- "path": "motion.content.exit.medium",
41
+ "path": "motion.duration.medium",
42
42
  "state": "experimental"
43
43
  }, {
44
- "path": "motion.content.exit.short",
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",
45
72
  "state": "experimental"
46
73
  }, {
47
74
  "path": "motion.flag.enter",
@@ -52,6 +79,54 @@ const replacementMapper = [{
52
79
  }, {
53
80
  "path": "motion.flag.reposition",
54
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"
55
130
  }, {
56
131
  "path": "motion.modal.enter",
57
132
  "state": "experimental"
@@ -1,10 +1,10 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::335cdc677cad1d4b1fd602ac8f261e85>>
3
+ * @codegen <<SignedSource::e2c90de3fa6bd9d4da20a85c310b97e2>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  export default `
7
- @keyframes SlideInTop {
7
+ @keyframes SlideInTop8px {
8
8
  0% {
9
9
  transform: translateY(8px);
10
10
  }
@@ -12,7 +12,7 @@ export default `
12
12
  transform: translateY(0px);
13
13
  }
14
14
  }
15
- @keyframes SlideInBottom {
15
+ @keyframes SlideInBottom8px {
16
16
  0% {
17
17
  transform: translateY(-8px);
18
18
  }
@@ -20,7 +20,7 @@ export default `
20
20
  transform: translateY(0px);
21
21
  }
22
22
  }
23
- @keyframes SlideInLeft {
23
+ @keyframes SlideInLeft8px {
24
24
  0% {
25
25
  transform: translateX(8px);
26
26
  }
@@ -28,7 +28,7 @@ export default `
28
28
  transform: translateX(0px);
29
29
  }
30
30
  }
31
- @keyframes SlideInRight {
31
+ @keyframes SlideInRight8px {
32
32
  0% {
33
33
  transform: translateX(-8px);
34
34
  }
@@ -36,7 +36,7 @@ export default `
36
36
  transform: translateX(0px);
37
37
  }
38
38
  }
39
- @keyframes SlideOutTop {
39
+ @keyframes SlideOutTop8px {
40
40
  0% {
41
41
  transform: translateY(0px);
42
42
  }
@@ -44,7 +44,7 @@ export default `
44
44
  transform: translateY(4px);
45
45
  }
46
46
  }
47
- @keyframes SlideOutBottom {
47
+ @keyframes SlideOutBottom8px {
48
48
  0% {
49
49
  transform: translateY(0px);
50
50
  }
@@ -52,7 +52,7 @@ export default `
52
52
  transform: translateY(-4px);
53
53
  }
54
54
  }
55
- @keyframes SlideOutLeft {
55
+ @keyframes SlideOutLeft8px {
56
56
  0% {
57
57
  transform: translateX(0px);
58
58
  }
@@ -60,7 +60,7 @@ export default `
60
60
  transform: translateX(4px);
61
61
  }
62
62
  }
63
- @keyframes SlideOutRight {
63
+ @keyframes SlideOutRight8px {
64
64
  0% {
65
65
  transform: translateX(0px);
66
66
  }
@@ -68,7 +68,7 @@ export default `
68
68
  transform: translateX(-4px);
69
69
  }
70
70
  }
71
- @keyframes ScaleIn80 {
71
+ @keyframes ScaleIn80to100 {
72
72
  0% {
73
73
  transform: scale(0.8);
74
74
  }
@@ -76,23 +76,7 @@ export default `
76
76
  transform: scale(1);
77
77
  }
78
78
  }
79
- @keyframes ScaleIn85 {
80
- 0% {
81
- transform: scale(0.85);
82
- }
83
- 100% {
84
- transform: scale(1);
85
- }
86
- }
87
- @keyframes ScaleIn90 {
88
- 0% {
89
- transform: scale(0.9);
90
- }
91
- 100% {
92
- transform: scale(1);
93
- }
94
- }
95
- @keyframes ScaleIn95 {
79
+ @keyframes ScaleIn95to100 {
96
80
  0% {
97
81
  transform: scale(0.95);
98
82
  }
@@ -100,7 +84,7 @@ export default `
100
84
  transform: scale(1);
101
85
  }
102
86
  }
103
- @keyframes ScaleOut80 {
87
+ @keyframes ScaleOut100to80 {
104
88
  0% {
105
89
  transform: scale(1);
106
90
  }
@@ -108,23 +92,7 @@ export default `
108
92
  transform: scale(0.8);
109
93
  }
110
94
  }
111
- @keyframes ScaleOut85 {
112
- 0% {
113
- transform: scale(1);
114
- }
115
- 100% {
116
- transform: scale(0.85);
117
- }
118
- }
119
- @keyframes ScaleOut90 {
120
- 0% {
121
- transform: scale(1);
122
- }
123
- 100% {
124
- transform: scale(0.9);
125
- }
126
- }
127
- @keyframes ScaleOut95 {
95
+ @keyframes ScaleOut100to95 {
128
96
  0% {
129
97
  transform: scale(1);
130
98
  }
@@ -132,7 +100,7 @@ export default `
132
100
  transform: scale(0.95);
133
101
  }
134
102
  }
135
- @keyframes FadeIn {
103
+ @keyframes FadeIn0to100 {
136
104
  0% {
137
105
  opacity: 0;
138
106
  }
@@ -140,7 +108,7 @@ export default `
140
108
  opacity: 1;
141
109
  }
142
110
  }
143
- @keyframes FadeOut {
111
+ @keyframes FadeOut100to0 {
144
112
  0% {
145
113
  opacity: 1;
146
114
  }
@@ -148,16 +116,6 @@ export default `
148
116
  opacity: 0;
149
117
  }
150
118
  }
151
- @keyframes SlideIn15PercentLeft {
152
- 0% {
153
- transform: translateX(-15%);
154
- transform-origin: left;
155
- }
156
- 100% {
157
- transform: translateX(0px);
158
- transform-origin: left;
159
- }
160
- }
161
119
  @keyframes SlideOut15PercentLeft {
162
120
  0% {
163
121
  transform: translateX(0px);
@@ -178,40 +136,55 @@ export default `
178
136
  transform-origin: left;
179
137
  }
180
138
  }
181
- @keyframes SlideOut50PercentLeft {
182
- 0% {
183
- transform: translateX(0px);
184
- transform-origin: left;
185
- }
186
- 100% {
187
- transform: translateX(-50%);
188
- transform-origin: left;
189
- }
190
- }
191
139
  html[data-theme~="motion:motion"], [data-subtree-theme][data-theme~="motion:motion"] {
192
- --ds-avatar-enter: 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn;
193
- --ds-avatar-exit: 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut;
194
- --ds-avatar-hovered: transform 100ms cubic-bezier(0.32, 0, 0.67, 0);
195
- --ds-content-enter-long: 400ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
196
- --ds-content-enter-medium: 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
197
- --ds-content-enter-short: 100ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
198
- --ds-content-exit-long: 200ms cubic-bezier(0.4, 0, 0, 1) FadeOut;
199
- --ds-content-exit-medium: 100ms cubic-bezier(0.4, 0, 0, 1) FadeOut;
200
- --ds-content-exit-short: 50ms cubic-bezier(0.4, 0, 0, 1) FadeOut;
201
- --ds-flag-enter: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn;
202
- --ds-flag-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
203
- --ds-flag-reposition: transform 300ms cubic-bezier(0.4, 0, 0, 1);
204
- --ds-modal-enter: 200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
205
- --ds-modal-exit: 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut;
206
- --ds-popup-enter-bottom: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;
207
- --ds-popup-enter-left: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;
208
- --ds-popup-enter-right: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;
209
- --ds-popup-enter-top: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;
210
- --ds-popup-exit-bottom: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
211
- --ds-popup-exit-left: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
212
- --ds-popup-exit-right: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
213
- --ds-popup-exit-top: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
214
- --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
215
- --ds-spotlight-exit: 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut;
140
+ --ds-avatar-enter: 150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleIn80to100, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;
141
+ --ds-avatar-exit: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to80, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;
142
+ --ds-avatar-hovered: 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);
143
+ --ds-blanket-enter: 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100;
144
+ --ds-blanket-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;
145
+ --ds-duration-instant: 0ms;
146
+ --ds-duration-long: 250ms;
147
+ --ds-duration-medium: 200ms;
148
+ --ds-duration-short: 150ms;
149
+ --ds-duration-xlong: 400ms;
150
+ --ds-duration-xshort: 100ms;
151
+ --ds-duration-xxlong: 600ms;
152
+ --ds-duration-xxshort: 50ms;
153
+ --ds-easing-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6);
154
+ --ds-easing-inout-bold: cubic-bezier(0.4, 0, 0, 1);
155
+ --ds-easing-out-practical: cubic-bezier(0.4, 1, 0.6, 1);
156
+ --ds-easing-out-bold: cubic-bezier(0, 0.4, 0, 1);
157
+ --ds-easing-spring: 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);
158
+ --ds-flag-enter: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100;
159
+ --ds-flag-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;
160
+ --ds-flag-reposition: transform 250ms cubic-bezier(0.4, 0, 0, 1);
161
+ --ds-keyframe-fade-in: FadeIn0to100;
162
+ --ds-keyframe-fade-out: FadeOut100to0;
163
+ --ds-keyframe-scale-in-medium: ScaleIn80to100;
164
+ --ds-keyframe-scale-in-small: ScaleIn95to100;
165
+ --ds-keyframe-scale-out-medium: ScaleOut100to80;
166
+ --ds-keyframe-scale-out-small: ScaleOut100to95;
167
+ --ds-keyframe-slide-in-bottom-short: SlideInBottom8px;
168
+ --ds-keyframe-slide-in-left-half: SlideIn50PercentLeft;
169
+ --ds-keyframe-slide-in-left-short: SlideInLeft8px;
170
+ --ds-keyframe-slide-in-right-short: SlideInRight8px;
171
+ --ds-keyframe-slide-in-top-short: SlideInTop8px;
172
+ --ds-keyframe-slide-out-bottom-short: SlideOutBottom8px;
173
+ --ds-keyframe-slide-out-left-half: SlideOut15PercentLeft;
174
+ --ds-keyframe-slide-out-left-short: SlideOutLeft8px;
175
+ --ds-keyframe-slide-out-right-short: SlideOutRight8px;
176
+ --ds-keyframe-slide-out-top-short: SlideOutTop8px;
177
+ --ds-modal-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100;
178
+ --ds-modal-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95;
179
+ --ds-popup-enter-bottom: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;
180
+ --ds-popup-enter-left: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;
181
+ --ds-popup-enter-right: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;
182
+ --ds-popup-enter-top: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100;
183
+ --ds-popup-exit-bottom: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;
184
+ --ds-popup-exit-left: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;
185
+ --ds-popup-exit-right: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;
186
+ --ds-popup-exit-top: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;
187
+ --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100;
188
+ --ds-spotlight-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0;
216
189
  }
217
190
  `;
@@ -7,34 +7,59 @@
7
7
  * Token names mapped to their value in the default Atlassian themes ('light').
8
8
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
9
9
  *
10
- * @codegen <<SignedSource::c8dea3807fda6392faffb7299b6ecb9a>>
10
+ * @codegen <<SignedSource::0fbc9a08bd94ff0842a2dd504e6a9ce6>>
11
11
  * @codegenCommand yarn build tokens
12
12
  */
13
13
  const defaultTokenValues = {
14
- 'motion.avatar.enter': '150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn',
15
- 'motion.avatar.exit': '100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut',
16
- 'motion.avatar.hovered': 'transform 100ms cubic-bezier(0.32, 0, 0.67, 0)',
17
- 'motion.content.enter.long': '400ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
18
- 'motion.content.enter.medium': '200ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
19
- 'motion.content.enter.short': '100ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
20
- 'motion.content.exit.long': '200ms cubic-bezier(0.4, 0, 0, 1) FadeOut',
21
- 'motion.content.exit.medium': '100ms cubic-bezier(0.4, 0, 0, 1) FadeOut',
22
- 'motion.content.exit.short': '50ms cubic-bezier(0.4, 0, 0, 1) FadeOut',
23
- 'motion.flag.enter': '250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn',
24
- 'motion.flag.exit': '200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
25
- 'motion.flag.reposition': 'transform 300ms cubic-bezier(0.4, 0, 0, 1)',
26
- 'motion.modal.enter': '200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
27
- 'motion.modal.exit': '200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut',
28
- 'motion.popup.enter.bottom': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
29
- 'motion.popup.enter.left': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
30
- 'motion.popup.enter.right': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
31
- 'motion.popup.enter.top': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
32
- 'motion.popup.exit.bottom': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
33
- 'motion.popup.exit.left': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
34
- 'motion.popup.exit.right': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
35
- 'motion.popup.exit.top': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
36
- 'motion.spotlight.enter': '250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
37
- 'motion.spotlight.exit': '200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut',
14
+ 'motion.avatar.enter': '150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleIn80to100, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
15
+ 'motion.avatar.exit': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to80, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
16
+ 'motion.avatar.hovered': '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)',
17
+ 'motion.blanket.enter': '250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100',
18
+ 'motion.blanket.exit': '200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
19
+ 'motion.duration.instant': '0ms',
20
+ 'motion.duration.long': '250ms',
21
+ 'motion.duration.medium': '200ms',
22
+ 'motion.duration.short': '150ms',
23
+ 'motion.duration.xlong': '400ms',
24
+ 'motion.duration.xshort': '100ms',
25
+ 'motion.duration.xxlong': '600ms',
26
+ 'motion.duration.xxshort': '50ms',
27
+ 'motion.easing.in.practical': 'cubic-bezier(0.6, 0, 0.8, 0.6)',
28
+ 'motion.easing.inout.bold': 'cubic-bezier(0.4, 0, 0, 1)',
29
+ 'motion.easing.out.practical': 'cubic-bezier(0.4, 1, 0.6, 1)',
30
+ 'motion.easing.out.bold': 'cubic-bezier(0, 0.4, 0, 1)',
31
+ 'motion.easing.spring': '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)',
32
+ 'motion.flag.enter': '250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100',
33
+ 'motion.flag.exit': '200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
34
+ 'motion.flag.reposition': 'transform 250ms cubic-bezier(0.4, 0, 0, 1)',
35
+ 'motion.keyframe.fade.in': 'FadeIn0to100',
36
+ 'motion.keyframe.fade.out': 'FadeOut100to0',
37
+ 'motion.keyframe.scale.in.medium': 'ScaleIn80to100',
38
+ 'motion.keyframe.scale.in.small': 'ScaleIn95to100',
39
+ 'motion.keyframe.scale.out.medium': 'ScaleOut100to80',
40
+ 'motion.keyframe.scale.out.small': 'ScaleOut100to95',
41
+ 'motion.keyframe.slide.in.bottom.short': 'SlideInBottom8px',
42
+ 'motion.keyframe.slide.in.left.half': 'SlideIn50PercentLeft',
43
+ 'motion.keyframe.slide.in.left.short': 'SlideInLeft8px',
44
+ 'motion.keyframe.slide.in.right.short': 'SlideInRight8px',
45
+ 'motion.keyframe.slide.in.top.short': 'SlideInTop8px',
46
+ 'motion.keyframe.slide.out.bottom.short': 'SlideOutBottom8px',
47
+ 'motion.keyframe.slide.out.left.half': 'SlideOut15PercentLeft',
48
+ 'motion.keyframe.slide.out.left.short': 'SlideOutLeft8px',
49
+ 'motion.keyframe.slide.out.right.short': 'SlideOutRight8px',
50
+ 'motion.keyframe.slide.out.top.short': 'SlideOutTop8px',
51
+ 'motion.modal.enter': '250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100',
52
+ 'motion.modal.exit': '200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95',
53
+ 'motion.popup.enter.bottom': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
54
+ 'motion.popup.enter.left': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
55
+ 'motion.popup.enter.right': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
56
+ 'motion.popup.enter.top': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100',
57
+ 'motion.popup.exit.bottom': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
58
+ 'motion.popup.exit.left': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
59
+ 'motion.popup.exit.right': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
60
+ 'motion.popup.exit.top': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
61
+ 'motion.spotlight.enter': '250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100',
62
+ 'motion.spotlight.exit': '200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0',
38
63
  'color.text': '#292A2E',
39
64
  'color.text.accent.lime': '#4C6B1F',
40
65
  'color.text.accent.lime.bolder': '#37471F',
@@ -1,21 +1,46 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::921c184d9a6e3b52bd2ab053939ce9ad>>
3
+ * @codegen <<SignedSource::c7da53f7a9d4a33334530aad043ae18b>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  const tokens = {
7
7
  'motion.avatar.enter': '--ds-avatar-enter',
8
8
  'motion.avatar.exit': '--ds-avatar-exit',
9
9
  'motion.avatar.hovered': '--ds-avatar-hovered',
10
- 'motion.content.enter.long': '--ds-content-enter-long',
11
- 'motion.content.enter.medium': '--ds-content-enter-medium',
12
- 'motion.content.enter.short': '--ds-content-enter-short',
13
- 'motion.content.exit.long': '--ds-content-exit-long',
14
- 'motion.content.exit.medium': '--ds-content-exit-medium',
15
- 'motion.content.exit.short': '--ds-content-exit-short',
10
+ 'motion.blanket.enter': '--ds-blanket-enter',
11
+ 'motion.blanket.exit': '--ds-blanket-exit',
12
+ 'motion.duration.instant': '--ds-duration-instant',
13
+ 'motion.duration.long': '--ds-duration-long',
14
+ 'motion.duration.medium': '--ds-duration-medium',
15
+ 'motion.duration.short': '--ds-duration-short',
16
+ 'motion.duration.xlong': '--ds-duration-xlong',
17
+ 'motion.duration.xshort': '--ds-duration-xshort',
18
+ 'motion.duration.xxlong': '--ds-duration-xxlong',
19
+ 'motion.duration.xxshort': '--ds-duration-xxshort',
20
+ 'motion.easing.in.practical': '--ds-easing-in-practical',
21
+ 'motion.easing.inout.bold': '--ds-easing-inout-bold',
22
+ 'motion.easing.out.practical': '--ds-easing-out-practical',
23
+ 'motion.easing.out.bold': '--ds-easing-out-bold',
24
+ 'motion.easing.spring': '--ds-easing-spring',
16
25
  'motion.flag.enter': '--ds-flag-enter',
17
26
  'motion.flag.exit': '--ds-flag-exit',
18
27
  'motion.flag.reposition': '--ds-flag-reposition',
28
+ 'motion.keyframe.fade.in': '--ds-keyframe-fade-in',
29
+ 'motion.keyframe.fade.out': '--ds-keyframe-fade-out',
30
+ 'motion.keyframe.scale.in.medium': '--ds-keyframe-scale-in-medium',
31
+ 'motion.keyframe.scale.in.small': '--ds-keyframe-scale-in-small',
32
+ 'motion.keyframe.scale.out.medium': '--ds-keyframe-scale-out-medium',
33
+ 'motion.keyframe.scale.out.small': '--ds-keyframe-scale-out-small',
34
+ 'motion.keyframe.slide.in.bottom.short': '--ds-keyframe-slide-in-bottom-short',
35
+ 'motion.keyframe.slide.in.left.half': '--ds-keyframe-slide-in-left-half',
36
+ 'motion.keyframe.slide.in.left.short': '--ds-keyframe-slide-in-left-short',
37
+ 'motion.keyframe.slide.in.right.short': '--ds-keyframe-slide-in-right-short',
38
+ 'motion.keyframe.slide.in.top.short': '--ds-keyframe-slide-in-top-short',
39
+ 'motion.keyframe.slide.out.bottom.short': '--ds-keyframe-slide-out-bottom-short',
40
+ 'motion.keyframe.slide.out.left.half': '--ds-keyframe-slide-out-left-half',
41
+ 'motion.keyframe.slide.out.left.short': '--ds-keyframe-slide-out-left-short',
42
+ 'motion.keyframe.slide.out.right.short': '--ds-keyframe-slide-out-right-short',
43
+ 'motion.keyframe.slide.out.top.short': '--ds-keyframe-slide-out-top-short',
19
44
  'motion.modal.enter': '--ds-modal-enter',
20
45
  'motion.modal.exit': '--ds-modal-exit',
21
46
  'motion.popup.enter.bottom': '--ds-popup-enter-bottom',