@atlaskit/primitives 1.4.0 → 1.4.2

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 1.4.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`89ce462b216`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89ce462b216) - Fix for margin properties not being mapped to values correctly.
8
+
9
+ ## 1.4.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [`da792e55f6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da792e55f6f) - - Bleed now uses negative space tokens under the hood.
14
+ - Fixed an issue where the wrong token would apply for space.025 in Bleed's `block` prop.
15
+ - Fallback values for Bleed `block` and `inline` props now use rem instead of px - this is only applied if space tokens are not available on the page. Space tokens already use rem under the hood.
16
+ - Updated dependencies
17
+
3
18
  ## 1.4.0
4
19
 
5
20
  ### Minor Changes
@@ -17,36 +17,36 @@ var baseStyles = (0, _react2.css)({
17
17
  });
18
18
  var blockBleedMap = {
19
19
  'space.025': (0, _react2.css)({
20
- marginBlock: "calc(-1 * ".concat("var(--ds-space-050, 2px)", ")")
20
+ marginBlock: "var(--ds-space-negative-025, -0.125rem)"
21
21
  }),
22
22
  'space.050': (0, _react2.css)({
23
- marginBlock: "calc(-1 * ".concat("var(--ds-space-050, 4px)", ")")
23
+ marginBlock: "var(--ds-space-negative-050, -0.25rem)"
24
24
  }),
25
25
  'space.100': (0, _react2.css)({
26
- marginBlock: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
27
- }),
28
- 'space.200': (0, _react2.css)({
29
- marginBlock: "calc(-1 * ".concat("var(--ds-space-200, 16px)", ")")
26
+ marginBlock: "var(--ds-space-negative-100, -0.5rem)"
30
27
  }),
31
28
  'space.150': (0, _react2.css)({
32
- marginBlock: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")")
29
+ marginBlock: "var(--ds-space-negative-150, -0.75rem)"
30
+ }),
31
+ 'space.200': (0, _react2.css)({
32
+ marginBlock: "var(--ds-space-negative-200, -1rem)"
33
33
  })
34
34
  };
35
35
  var inlineBleedMap = {
36
36
  'space.025': (0, _react2.css)({
37
- marginInline: "calc(-1 * ".concat("var(--ds-space-025, 2px)", ")")
37
+ marginInline: "var(--ds-space-negative-025, -0.125rem)"
38
38
  }),
39
39
  'space.050': (0, _react2.css)({
40
- marginInline: "calc(-1 * ".concat("var(--ds-space-050, 4px)", ")")
40
+ marginInline: "var(--ds-space-negative-050, -0.25rem)"
41
41
  }),
42
42
  'space.100': (0, _react2.css)({
43
- marginInline: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
44
- }),
45
- 'space.200': (0, _react2.css)({
46
- marginInline: "calc(-1 * ".concat("var(--ds-space-200, 16px)", ")")
43
+ marginInline: "var(--ds-space-negative-100, -0.5rem)"
47
44
  }),
48
45
  'space.150': (0, _react2.css)({
49
- marginInline: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")")
46
+ marginInline: "var(--ds-space-negative-150, -0.75rem)"
47
+ }),
48
+ 'space.200': (0, _react2.css)({
49
+ marginInline: "var(--ds-space-negative-200, -1rem)"
50
50
  })
51
51
  };
52
52
 
@@ -32,10 +32,10 @@ exports.dimensionMap = dimensionMap;
32
32
 
33
33
  /**
34
34
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
35
- * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
35
+ * @codegen <<SignedSource::8cc3cccc1c75ae85af885aaf8a1f69b8>>
36
36
  * @codegenId spacing
37
37
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
38
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
38
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
39
39
  */
40
40
  var spaceMap = {
41
41
  'space.0': "var(--ds-space-0, 0px)",
@@ -37,9 +37,13 @@ var tokensMap = {
37
37
  marginBlock: _styleMaps.spaceMap,
38
38
  marginBlockEnd: _styleMaps.spaceMap,
39
39
  marginBlockStart: _styleMaps.spaceMap,
40
+ marginBottom: _styleMaps.spaceMap,
40
41
  marginInline: _styleMaps.spaceMap,
41
42
  marginInlineEnd: _styleMaps.spaceMap,
42
43
  marginInlineStart: _styleMaps.spaceMap,
44
+ marginLeft: _styleMaps.spaceMap,
45
+ marginRight: _styleMaps.spaceMap,
46
+ marginTop: _styleMaps.spaceMap,
43
47
  left: _styleMaps.spaceMap,
44
48
  maxBlockSize: _styleMaps.dimensionMap,
45
49
  maxHeight: _styleMaps.dimensionMap,
@@ -10,36 +10,36 @@ const baseStyles = css({
10
10
  });
11
11
  const blockBleedMap = {
12
12
  'space.025': css({
13
- marginBlock: `calc(-1 * ${"var(--ds-space-050, 2px)"})`
13
+ marginBlock: "var(--ds-space-negative-025, -0.125rem)"
14
14
  }),
15
15
  'space.050': css({
16
- marginBlock: `calc(-1 * ${"var(--ds-space-050, 4px)"})`
16
+ marginBlock: "var(--ds-space-negative-050, -0.25rem)"
17
17
  }),
18
18
  'space.100': css({
19
- marginBlock: `calc(-1 * ${"var(--ds-space-100, 8px)"})`
20
- }),
21
- 'space.200': css({
22
- marginBlock: `calc(-1 * ${"var(--ds-space-200, 16px)"})`
19
+ marginBlock: "var(--ds-space-negative-100, -0.5rem)"
23
20
  }),
24
21
  'space.150': css({
25
- marginBlock: `calc(-1 * ${"var(--ds-space-150, 12px)"})`
22
+ marginBlock: "var(--ds-space-negative-150, -0.75rem)"
23
+ }),
24
+ 'space.200': css({
25
+ marginBlock: "var(--ds-space-negative-200, -1rem)"
26
26
  })
27
27
  };
28
28
  const inlineBleedMap = {
29
29
  'space.025': css({
30
- marginInline: `calc(-1 * ${"var(--ds-space-025, 2px)"})`
30
+ marginInline: "var(--ds-space-negative-025, -0.125rem)"
31
31
  }),
32
32
  'space.050': css({
33
- marginInline: `calc(-1 * ${"var(--ds-space-050, 4px)"})`
33
+ marginInline: "var(--ds-space-negative-050, -0.25rem)"
34
34
  }),
35
35
  'space.100': css({
36
- marginInline: `calc(-1 * ${"var(--ds-space-100, 8px)"})`
37
- }),
38
- 'space.200': css({
39
- marginInline: `calc(-1 * ${"var(--ds-space-200, 16px)"})`
36
+ marginInline: "var(--ds-space-negative-100, -0.5rem)"
40
37
  }),
41
38
  'space.150': css({
42
- marginInline: `calc(-1 * ${"var(--ds-space-150, 12px)"})`
39
+ marginInline: "var(--ds-space-negative-150, -0.75rem)"
40
+ }),
41
+ 'space.200': css({
42
+ marginInline: "var(--ds-space-negative-200, -1rem)"
43
43
  })
44
44
  };
45
45
 
@@ -22,10 +22,10 @@ export const dimensionMap = {
22
22
  */
23
23
  /**
24
24
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
25
- * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
25
+ * @codegen <<SignedSource::8cc3cccc1c75ae85af885aaf8a1f69b8>>
26
26
  * @codegenId spacing
27
27
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
28
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
28
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
29
29
  */
30
30
  export const spaceMap = {
31
31
  'space.0': "var(--ds-space-0, 0px)",
@@ -25,9 +25,13 @@ const tokensMap = {
25
25
  marginBlock: spaceMap,
26
26
  marginBlockEnd: spaceMap,
27
27
  marginBlockStart: spaceMap,
28
+ marginBottom: spaceMap,
28
29
  marginInline: spaceMap,
29
30
  marginInlineEnd: spaceMap,
30
31
  marginInlineStart: spaceMap,
32
+ marginLeft: spaceMap,
33
+ marginRight: spaceMap,
34
+ marginTop: spaceMap,
31
35
  left: spaceMap,
32
36
  maxBlockSize: dimensionMap,
33
37
  maxHeight: dimensionMap,
@@ -10,36 +10,36 @@ var baseStyles = css({
10
10
  });
11
11
  var blockBleedMap = {
12
12
  'space.025': css({
13
- marginBlock: "calc(-1 * ".concat("var(--ds-space-050, 2px)", ")")
13
+ marginBlock: "var(--ds-space-negative-025, -0.125rem)"
14
14
  }),
15
15
  'space.050': css({
16
- marginBlock: "calc(-1 * ".concat("var(--ds-space-050, 4px)", ")")
16
+ marginBlock: "var(--ds-space-negative-050, -0.25rem)"
17
17
  }),
18
18
  'space.100': css({
19
- marginBlock: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
20
- }),
21
- 'space.200': css({
22
- marginBlock: "calc(-1 * ".concat("var(--ds-space-200, 16px)", ")")
19
+ marginBlock: "var(--ds-space-negative-100, -0.5rem)"
23
20
  }),
24
21
  'space.150': css({
25
- marginBlock: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")")
22
+ marginBlock: "var(--ds-space-negative-150, -0.75rem)"
23
+ }),
24
+ 'space.200': css({
25
+ marginBlock: "var(--ds-space-negative-200, -1rem)"
26
26
  })
27
27
  };
28
28
  var inlineBleedMap = {
29
29
  'space.025': css({
30
- marginInline: "calc(-1 * ".concat("var(--ds-space-025, 2px)", ")")
30
+ marginInline: "var(--ds-space-negative-025, -0.125rem)"
31
31
  }),
32
32
  'space.050': css({
33
- marginInline: "calc(-1 * ".concat("var(--ds-space-050, 4px)", ")")
33
+ marginInline: "var(--ds-space-negative-050, -0.25rem)"
34
34
  }),
35
35
  'space.100': css({
36
- marginInline: "calc(-1 * ".concat("var(--ds-space-100, 8px)", ")")
37
- }),
38
- 'space.200': css({
39
- marginInline: "calc(-1 * ".concat("var(--ds-space-200, 16px)", ")")
36
+ marginInline: "var(--ds-space-negative-100, -0.5rem)"
40
37
  }),
41
38
  'space.150': css({
42
- marginInline: "calc(-1 * ".concat("var(--ds-space-150, 12px)", ")")
39
+ marginInline: "var(--ds-space-negative-150, -0.75rem)"
40
+ }),
41
+ 'space.200': css({
42
+ marginInline: "var(--ds-space-negative-200, -1rem)"
43
43
  })
44
44
  };
45
45
 
@@ -23,10 +23,10 @@ export var dimensionMap = {
23
23
  */
24
24
  /**
25
25
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
26
- * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
26
+ * @codegen <<SignedSource::8cc3cccc1c75ae85af885aaf8a1f69b8>>
27
27
  * @codegenId spacing
28
28
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
29
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
29
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
30
30
  */
31
31
  export var spaceMap = {
32
32
  'space.0': "var(--ds-space-0, 0px)",
@@ -28,9 +28,13 @@ var tokensMap = {
28
28
  marginBlock: spaceMap,
29
29
  marginBlockEnd: spaceMap,
30
30
  marginBlockStart: spaceMap,
31
+ marginBottom: spaceMap,
31
32
  marginInline: spaceMap,
32
33
  marginInlineEnd: spaceMap,
33
34
  marginInlineStart: spaceMap,
35
+ marginLeft: spaceMap,
36
+ marginRight: spaceMap,
37
+ marginTop: spaceMap,
34
38
  left: spaceMap,
35
39
  maxBlockSize: dimensionMap,
36
40
  maxHeight: dimensionMap,
@@ -23,10 +23,10 @@ export type Dimension = keyof typeof dimensionMap;
23
23
  */
24
24
  /**
25
25
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
26
- * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
26
+ * @codegen <<SignedSource::8cc3cccc1c75ae85af885aaf8a1f69b8>>
27
27
  * @codegenId spacing
28
28
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
29
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
29
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
30
30
  */
31
31
  export declare const spaceMap: {
32
32
  'space.0': "var(--ds-space-0)";
@@ -23,10 +23,10 @@ export type Dimension = keyof typeof dimensionMap;
23
23
  */
24
24
  /**
25
25
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
26
- * @codegen <<SignedSource::429dca3ce1fa6d723cb98e2468802267>>
26
+ * @codegen <<SignedSource::8cc3cccc1c75ae85af885aaf8a1f69b8>>
27
27
  * @codegenId spacing
28
28
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
29
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::68f6bde7e6b186964ee53458284bbb90>>
29
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
30
30
  */
31
31
  export declare const spaceMap: {
32
32
  'space.0': "var(--ds-space-0)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "1.4.0",
3
+ "version": "1.4.2",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -116,7 +116,7 @@
116
116
  "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
117
117
  },
118
118
  "dependencies": {
119
- "@atlaskit/tokens": "^1.20.0",
119
+ "@atlaskit/tokens": "^1.21.0",
120
120
  "@babel/runtime": "^7.0.0",
121
121
  "@emotion/react": "^11.7.1",
122
122
  "@emotion/serialize": "^1.1.0",
@@ -6,10 +6,12 @@ import { spacing as tokens } from '@atlaskit/tokens/tokens-raw';
6
6
  import { constructTokenFunctionCall } from './utils';
7
7
 
8
8
  const spacingTokenPrefix = 'space.';
9
+ const negativeSuffix = '.negative';
9
10
  const spaceTokens = tokens
10
11
  .filter(token => token.name.startsWith(spacingTokenPrefix))
12
+ .filter(token => !token.name.includes(negativeSuffix))
11
13
  .map(t => ({
12
- name: t.name,
14
+ name: t.cleanName, // Need to use cleanName to avoid getting '[default]' in the token names
13
15
  fallback: t.value,
14
16
  }));
15
17