@atlaskit/tokens 11.2.0 → 11.3.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 (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/codemods/remove-fallbacks/transform.tsx +3 -1
  3. package/dist/cjs/babel-plugin/plugin.js +17 -0
  4. package/dist/es2019/babel-plugin/plugin.js +15 -0
  5. package/dist/esm/babel-plugin/plugin.js +17 -0
  6. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 11.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`9f858e9b1f9e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9f858e9b1f9e8) -
8
+ Fixed default fallback resolution for motion design tokens
9
+
10
+ ## 11.3.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`6df6d2b1f286b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6df6d2b1f286b) -
15
+ Added motion values to tokens babel plugin
16
+
3
17
  ## 11.2.0
4
18
 
5
19
  ### Minor Changes
package/codemods/remove-fallbacks/transform.tsx CHANGED
@@ -9,6 +9,7 @@ export default async function transformer(file: FileInfo, api: API): Promise<str
9
9
  return file.source;
10
10
  }
11
11
 
12
+ let fileHasChanges = false;
12
13
  source.find(j.CallExpression, { callee: { name: 'token' } }).forEach((path) => {
13
14
  if (
14
15
  path.node.arguments.length > 1 &&
@@ -17,8 +18,9 @@ export default async function transformer(file: FileInfo, api: API): Promise<str
17
18
  ) {
18
19
  // Remove the second argument
19
20
  path.node.arguments.splice(1, 1);
21
+ fileHasChanges = true;
20
22
  }
21
23
  });
22
24
 
23
- return source.toSource();
25
+ return fileHasChanges ? source.toSource({ useTabs: true }) : file.source;
24
26
  }
package/dist/cjs/babel-plugin/plugin.js CHANGED
@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
11
11
  var t = _interopRequireWildcard(require("@babel/types"));
12
12
  var _tokenNames = _interopRequireDefault(require("../artifacts/token-names"));
13
13
  var _atlassianLight = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-light"));
14
+ var _atlassianMotion = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-motion"));
14
15
  var _atlassianShape = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-shape"));
15
16
  var _atlassianSpacing = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-spacing"));
16
17
  var _atlassianTypography = _interopRequireDefault(require("../artifacts/tokens-raw/atlassian-typography"));
@@ -72,6 +73,18 @@ var getThemeValues = function getThemeValues(theme) {
72
73
  }
73
74
  return prev + value;
74
75
  }, '');
76
+ } else if (Object(rawToken.value).hasOwnProperty('keyframes') || Object(rawToken.value).hasOwnProperty('properties')) {
77
+ // Handle motion tokens which have object values like { duration, curve, keyframes, etc. }
78
+ // Convert to a JSON string representation for fallback value
79
+ var motionToken = rawToken.value;
80
+ if (motionToken.keyframes) {
81
+ value = motionToken.keyframes.map(function (keyframe) {
82
+ return "".concat(motionToken.duration, "ms ").concat(motionToken.curve, " ").concat(keyframe).concat(motionToken.delay ? " ".concat(motionToken.delay, "ms") : '');
83
+ }).join(', ');
84
+ } else {
85
+ var _motionToken$properti;
86
+ value = "".concat((_motionToken$properti = motionToken.properties) === null || _motionToken$properti === void 0 ? void 0 : _motionToken$properti.join(' '), " ").concat(motionToken.duration, "ms ").concat(motionToken.curve).concat(motionToken.delay ? " ".concat(motionToken.delay, "ms") : '');
87
+ }
75
88
  } else {
76
89
  // ignore when value is `fontweight` etc. - this is apparently not handled here.
77
90
  return formatted;
@@ -196,6 +209,7 @@ var lightValues = getThemeValues(_atlassianLight.default);
196
209
  var shapeValues = getThemeValues(_atlassianShape.default);
197
210
  var spacingValues = getThemeValues(_atlassianSpacing.default);
198
211
  var typographyValues = getThemeValues(_atlassianTypography.default);
212
+ var motionValues = getThemeValues(_atlassianMotion.default);
199
213
  function getDefaultFallback(tokenName) {
200
214
  if (shapeValues[tokenName]) {
201
215
  return shapeValues[tokenName];
@@ -206,6 +220,9 @@ function getDefaultFallback(tokenName) {
206
220
  if (typographyValues[tokenName]) {
207
221
  return typographyValues[tokenName];
208
222
  }
223
+ if (motionValues[tokenName]) {
224
+ return motionValues[tokenName];
225
+ }
209
226
  return lightValues[tokenName];
210
227
  }
211
228
  function getNonAliasedImportName(node) {
package/dist/es2019/babel-plugin/plugin.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as t from '@babel/types';
2
2
  import tokenNames from '../artifacts/token-names';
3
3
  import light from '../artifacts/tokens-raw/atlassian-light';
4
+ import motion from '../artifacts/tokens-raw/atlassian-motion';
4
5
  import shape from '../artifacts/tokens-raw/atlassian-shape';
5
6
  import spacing from '../artifacts/tokens-raw/atlassian-spacing';
6
7
  import typography from '../artifacts/tokens-raw/atlassian-typography';
@@ -46,6 +47,16 @@ const getThemeValues = theme => {
46
47
  }
47
48
  return prev + value;
48
49
  }, '');
50
+ } else if (Object(rawToken.value).hasOwnProperty('keyframes') || Object(rawToken.value).hasOwnProperty('properties')) {
51
+ // Handle motion tokens which have object values like { duration, curve, keyframes, etc. }
52
+ // Convert to a JSON string representation for fallback value
53
+ const motionToken = rawToken.value;
54
+ if (motionToken.keyframes) {
55
+ value = motionToken.keyframes.map(keyframe => `${motionToken.duration}ms ${motionToken.curve} ${keyframe}${motionToken.delay ? ` ${motionToken.delay}ms` : ''}`).join(', ');
56
+ } else {
57
+ var _motionToken$properti;
58
+ value = `${(_motionToken$properti = motionToken.properties) === null || _motionToken$properti === void 0 ? void 0 : _motionToken$properti.join(' ')} ${motionToken.duration}ms ${motionToken.curve}${motionToken.delay ? ` ${motionToken.delay}ms` : ''}`;
59
+ }
49
60
  } else {
50
61
  // ignore when value is `fontweight` etc. - this is apparently not handled here.
51
62
  return formatted;
@@ -173,6 +184,7 @@ const lightValues = getThemeValues(light);
173
184
  const shapeValues = getThemeValues(shape);
174
185
  const spacingValues = getThemeValues(spacing);
175
186
  const typographyValues = getThemeValues(typography);
187
+ const motionValues = getThemeValues(motion);
176
188
  function getDefaultFallback(tokenName) {
177
189
  if (shapeValues[tokenName]) {
178
190
  return shapeValues[tokenName];
@@ -183,6 +195,9 @@ function getDefaultFallback(tokenName) {
183
195
  if (typographyValues[tokenName]) {
184
196
  return typographyValues[tokenName];
185
197
  }
198
+ if (motionValues[tokenName]) {
199
+ return motionValues[tokenName];
200
+ }
186
201
  return lightValues[tokenName];
187
202
  }
188
203
  function getNonAliasedImportName(node) {
package/dist/esm/babel-plugin/plugin.js CHANGED
@@ -8,6 +8,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
8
8
  import * as t from '@babel/types';
9
9
  import tokenNames from '../artifacts/token-names';
10
10
  import light from '../artifacts/tokens-raw/atlassian-light';
11
+ import motion from '../artifacts/tokens-raw/atlassian-motion';
11
12
  import shape from '../artifacts/tokens-raw/atlassian-shape';
12
13
  import spacing from '../artifacts/tokens-raw/atlassian-spacing';
13
14
  import typography from '../artifacts/tokens-raw/atlassian-typography';
@@ -63,6 +64,18 @@ var getThemeValues = function getThemeValues(theme) {
63
64
  }
64
65
  return prev + value;
65
66
  }, '');
67
+ } else if (Object(rawToken.value).hasOwnProperty('keyframes') || Object(rawToken.value).hasOwnProperty('properties')) {
68
+ // Handle motion tokens which have object values like { duration, curve, keyframes, etc. }
69
+ // Convert to a JSON string representation for fallback value
70
+ var motionToken = rawToken.value;
71
+ if (motionToken.keyframes) {
72
+ value = motionToken.keyframes.map(function (keyframe) {
73
+ return "".concat(motionToken.duration, "ms ").concat(motionToken.curve, " ").concat(keyframe).concat(motionToken.delay ? " ".concat(motionToken.delay, "ms") : '');
74
+ }).join(', ');
75
+ } else {
76
+ var _motionToken$properti;
77
+ value = "".concat((_motionToken$properti = motionToken.properties) === null || _motionToken$properti === void 0 ? void 0 : _motionToken$properti.join(' '), " ").concat(motionToken.duration, "ms ").concat(motionToken.curve).concat(motionToken.delay ? " ".concat(motionToken.delay, "ms") : '');
78
+ }
66
79
  } else {
67
80
  // ignore when value is `fontweight` etc. - this is apparently not handled here.
68
81
  return formatted;
@@ -187,6 +200,7 @@ var lightValues = getThemeValues(light);
187
200
  var shapeValues = getThemeValues(shape);
188
201
  var spacingValues = getThemeValues(spacing);
189
202
  var typographyValues = getThemeValues(typography);
203
+ var motionValues = getThemeValues(motion);
190
204
  function getDefaultFallback(tokenName) {
191
205
  if (shapeValues[tokenName]) {
192
206
  return shapeValues[tokenName];
@@ -197,6 +211,9 @@ function getDefaultFallback(tokenName) {
197
211
  if (typographyValues[tokenName]) {
198
212
  return typographyValues[tokenName];
199
213
  }
214
+ if (motionValues[tokenName]) {
215
+ return motionValues[tokenName];
216
+ }
200
217
  return lightValues[tokenName];
201
218
  }
202
219
  function getNonAliasedImportName(node) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "11.2.0",
3
+ "version": "11.3.1",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -50,21 +50,21 @@
50
50
  "@atlaskit/code": "^17.4.0",
51
51
  "@atlaskit/css": "^0.19.0",
52
52
  "@atlaskit/docs": "^11.7.0",
53
- "@atlaskit/dropdown-menu": "^16.7.0",
53
+ "@atlaskit/dropdown-menu": "^16.8.0",
54
54
  "@atlaskit/dynamic-table": "^18.3.0",
55
- "@atlaskit/form": "^15.4.0",
55
+ "@atlaskit/form": "^15.5.0",
56
56
  "@atlaskit/grid": "^0.18.0",
57
57
  "@atlaskit/heading": "^5.3.0",
58
- "@atlaskit/icon": "^33.0.0",
58
+ "@atlaskit/icon": "^33.1.0",
59
59
  "@atlaskit/inline-message": "^15.6.0",
60
60
  "@atlaskit/link": "^3.3.0",
61
61
  "@atlaskit/lozenge": "^13.5.0",
62
62
  "@atlaskit/popup": "^4.14.0",
63
- "@atlaskit/primitives": "^18.0.0",
63
+ "@atlaskit/primitives": "^18.1.0",
64
64
  "@atlaskit/radio": "^8.4.0",
65
65
  "@atlaskit/section-message": "^8.12.0",
66
66
  "@atlaskit/select": "^21.8.0",
67
- "@atlaskit/tag": "^14.5.0",
67
+ "@atlaskit/tag": "^14.6.0",
68
68
  "@atlaskit/textarea": "^8.2.0",
69
69
  "@atlaskit/textfield": "^8.2.0",
70
70
  "@atlaskit/theme": "^22.0.0",