@atlaskit/primitives 1.15.1 → 1.16.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 (13) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/xcss/style-maps.partial.js +8 -5
  3. package/dist/cjs/xcss/xcss.js +37 -37
  4. package/dist/es2019/xcss/style-maps.partial.js +8 -4
  5. package/dist/es2019/xcss/xcss.js +38 -38
  6. package/dist/esm/xcss/style-maps.partial.js +7 -4
  7. package/dist/esm/xcss/xcss.js +38 -38
  8. package/dist/types/xcss/style-maps.partial.d.ts +42 -16
  9. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +42 -16
  10. package/package.json +2 -2
  11. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +6 -2
  12. package/scripts/spacing-codegen-template.tsx +5 -3
  13. package/scripts/typography-codegen-template.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 1.16.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#63526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63526) [`e8835feffae9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e8835feffae9) - Internal change to improve token sorting logic for typography tokens. Typography tokens are now marked as active though they are still in development and not recommend for use without prior approval from ADS.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
13
+ ## 1.15.2
14
+
15
+ ### Patch Changes
16
+
17
+ - [#61090](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61090) [`2e34d3535125`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2e34d3535125) - - Fixed issue where using negative space tokens in `xcss` wouldn't apply.
18
+ - Allow negative space tokens for position properties in `xcss` (i.e. top, bottom, left, right, and inset-\*).
19
+
3
20
  ## 1.15.1
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -4,10 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.lineHeightStylesMap = exports.lineHeightMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontSizeStylesMap = exports.fontSizeMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.bodyTextStylesMap = exports.bodyTextMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = void 0;
7
+ exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.lineHeightStylesMap = exports.lineHeightMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontSizeStylesMap = exports.fontSizeMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.bodyTextStylesMap = exports.bodyTextMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _tokens = require("@atlaskit/tokens");
11
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
12
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
11
13
  /**
12
14
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
13
15
  * @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
@@ -32,12 +34,12 @@ var dimensionMap = exports.dimensionMap = {
32
34
 
33
35
  /**
34
36
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
35
- * @codegen <<SignedSource::3cd327a4cd23dce8564f0b76a0d600ce>>
37
+ * @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
36
38
  * @codegenId spacing
37
39
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
38
40
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
39
41
  */
40
- var spaceMap = exports.spaceMap = {
42
+ var positiveSpaceMap = exports.positiveSpaceMap = {
41
43
  'space.0': "var(--ds-space-0, 0px)",
42
44
  'space.025': "var(--ds-space-025, 2px)",
43
45
  'space.050': "var(--ds-space-050, 4px)",
@@ -64,6 +66,7 @@ var negativeSpaceMap = exports.negativeSpaceMap = {
64
66
  'space.negative.300': "var(--ds-space-negative-300, -24px)",
65
67
  'space.negative.400': "var(--ds-space-negative-400, -32px)"
66
68
  };
69
+ var allSpaceMap = exports.allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), negativeSpaceMap);
67
70
  /**
68
71
  * @codegenEnd
69
72
  */
@@ -560,11 +563,11 @@ var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenM
560
563
  }, {});
561
564
  };
562
565
  var paddingStylesMap = exports.paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
563
- styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
566
+ styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
564
567
  return styleMap;
565
568
  }, {});
566
569
  var spaceStylesMap = exports.spaceStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
567
- styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
570
+ styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
568
571
  return styleMap;
569
572
  }, {});
570
573
  var backgroundColorStylesMap = exports.backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
package/dist/cjs/xcss/xcss.js CHANGED
@@ -49,32 +49,32 @@ var tokensMap = {
49
49
  borderTopRightRadius: _styleMaps.borderRadiusMap,
50
50
  borderTopWidth: _styleMaps.borderWidthMap,
51
51
  borderWidth: _styleMaps.borderWidthMap,
52
- bottom: _styleMaps.spaceMap,
52
+ bottom: _styleMaps.allSpaceMap,
53
53
  boxShadow: _styleMaps.shadowMap,
54
54
  color: _styleMaps.textColorMap,
55
- columnGap: _styleMaps.spaceMap,
56
- gap: _styleMaps.spaceMap,
55
+ columnGap: _styleMaps.positiveSpaceMap,
56
+ gap: _styleMaps.positiveSpaceMap,
57
57
  height: _styleMaps.dimensionMap,
58
58
  inlineSize: _styleMaps.dimensionMap,
59
- inset: _styleMaps.spaceMap,
60
- insetBlock: _styleMaps.spaceMap,
61
- insetBlockEnd: _styleMaps.spaceMap,
62
- insetBlockStart: _styleMaps.spaceMap,
63
- insetInline: _styleMaps.spaceMap,
64
- insetInlineEnd: _styleMaps.spaceMap,
65
- insetInlineStart: _styleMaps.spaceMap,
66
- left: _styleMaps.spaceMap,
67
- margin: _styleMaps.spaceMap,
68
- marginBlock: _styleMaps.spaceMap,
69
- marginBlockEnd: _styleMaps.spaceMap,
70
- marginBlockStart: _styleMaps.spaceMap,
71
- marginBottom: _styleMaps.spaceMap,
72
- marginInline: _styleMaps.spaceMap,
73
- marginInlineEnd: _styleMaps.spaceMap,
74
- marginInlineStart: _styleMaps.spaceMap,
75
- marginLeft: _styleMaps.spaceMap,
76
- marginRight: _styleMaps.spaceMap,
77
- marginTop: _styleMaps.spaceMap,
59
+ inset: _styleMaps.allSpaceMap,
60
+ insetBlock: _styleMaps.allSpaceMap,
61
+ insetBlockEnd: _styleMaps.allSpaceMap,
62
+ insetBlockStart: _styleMaps.allSpaceMap,
63
+ insetInline: _styleMaps.allSpaceMap,
64
+ insetInlineEnd: _styleMaps.allSpaceMap,
65
+ insetInlineStart: _styleMaps.allSpaceMap,
66
+ left: _styleMaps.allSpaceMap,
67
+ margin: _styleMaps.allSpaceMap,
68
+ marginBlock: _styleMaps.allSpaceMap,
69
+ marginBlockEnd: _styleMaps.allSpaceMap,
70
+ marginBlockStart: _styleMaps.allSpaceMap,
71
+ marginBottom: _styleMaps.allSpaceMap,
72
+ marginInline: _styleMaps.allSpaceMap,
73
+ marginInlineEnd: _styleMaps.allSpaceMap,
74
+ marginInlineStart: _styleMaps.allSpaceMap,
75
+ marginLeft: _styleMaps.allSpaceMap,
76
+ marginRight: _styleMaps.allSpaceMap,
77
+ marginTop: _styleMaps.allSpaceMap,
78
78
  maxBlockSize: _styleMaps.dimensionMap,
79
79
  maxHeight: _styleMaps.dimensionMap,
80
80
  maxInlineSize: _styleMaps.dimensionMap,
@@ -85,22 +85,22 @@ var tokensMap = {
85
85
  minWidth: _styleMaps.dimensionMap,
86
86
  opacity: _styleMaps.opacityMap,
87
87
  outlineColor: _styleMaps.borderColorMap,
88
- outlineOffset: _styleMaps.spaceMap,
88
+ outlineOffset: _styleMaps.positiveSpaceMap,
89
89
  outlineWidth: _styleMaps.borderWidthMap,
90
- padding: _styleMaps.spaceMap,
91
- paddingBlock: _styleMaps.spaceMap,
92
- paddingBlockEnd: _styleMaps.spaceMap,
93
- paddingBlockStart: _styleMaps.spaceMap,
94
- paddingBottom: _styleMaps.spaceMap,
95
- paddingInline: _styleMaps.spaceMap,
96
- paddingInlineEnd: _styleMaps.spaceMap,
97
- paddingInlineStart: _styleMaps.spaceMap,
98
- paddingLeft: _styleMaps.spaceMap,
99
- paddingRight: _styleMaps.spaceMap,
100
- paddingTop: _styleMaps.spaceMap,
101
- right: _styleMaps.spaceMap,
102
- rowGap: _styleMaps.spaceMap,
103
- top: _styleMaps.spaceMap,
90
+ padding: _styleMaps.positiveSpaceMap,
91
+ paddingBlock: _styleMaps.positiveSpaceMap,
92
+ paddingBlockEnd: _styleMaps.positiveSpaceMap,
93
+ paddingBlockStart: _styleMaps.positiveSpaceMap,
94
+ paddingBottom: _styleMaps.positiveSpaceMap,
95
+ paddingInline: _styleMaps.positiveSpaceMap,
96
+ paddingInlineEnd: _styleMaps.positiveSpaceMap,
97
+ paddingInlineStart: _styleMaps.positiveSpaceMap,
98
+ paddingLeft: _styleMaps.positiveSpaceMap,
99
+ paddingRight: _styleMaps.positiveSpaceMap,
100
+ paddingTop: _styleMaps.positiveSpaceMap,
101
+ right: _styleMaps.allSpaceMap,
102
+ rowGap: _styleMaps.positiveSpaceMap,
103
+ top: _styleMaps.allSpaceMap,
104
104
  width: _styleMaps.dimensionMap,
105
105
  zIndex: _styleMaps.layerMap
106
106
  };
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -24,12 +24,12 @@ export const dimensionMap = {
24
24
  */
25
25
  /**
26
26
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
27
- * @codegen <<SignedSource::3cd327a4cd23dce8564f0b76a0d600ce>>
27
+ * @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
28
28
  * @codegenId spacing
29
29
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
30
30
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
31
31
  */
32
- export const spaceMap = {
32
+ export const positiveSpaceMap = {
33
33
  'space.0': "var(--ds-space-0, 0px)",
34
34
  'space.025': "var(--ds-space-025, 2px)",
35
35
  'space.050': "var(--ds-space-050, 4px)",
@@ -56,6 +56,10 @@ export const negativeSpaceMap = {
56
56
  'space.negative.300': "var(--ds-space-negative-300, -24px)",
57
57
  'space.negative.400': "var(--ds-space-negative-400, -32px)"
58
58
  };
59
+ export const allSpaceMap = {
60
+ ...positiveSpaceMap,
61
+ ...negativeSpaceMap
62
+ };
59
63
  /**
60
64
  * @codegenEnd
61
65
  */
@@ -549,11 +553,11 @@ const getSerializedStylesMap = (cssProperty, tokenMap) => {
549
553
  }, {});
550
554
  };
551
555
  export const paddingStylesMap = spacingProperties.reduce((styleMap, spacingProperty) => {
552
- styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
556
+ styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
553
557
  return styleMap;
554
558
  }, {});
555
559
  export const spaceStylesMap = spacingProperties.reduce((styleMap, spacingProperty) => {
556
- styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
560
+ styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
557
561
  return styleMap;
558
562
  }, {});
559
563
  export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
package/dist/es2019/xcss/xcss.js CHANGED
@@ -3,7 +3,7 @@ import { css as cssEmotion } from '@emotion/react';
3
3
 
4
4
  // eslint-disable-next-line import/no-extraneous-dependencies
5
5
 
6
- import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
6
+ import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
7
7
  const tokensMap = {
8
8
  backgroundColor: backgroundColorMap,
9
9
  blockSize: dimensionMap,
@@ -38,32 +38,32 @@ const tokensMap = {
38
38
  borderTopRightRadius: borderRadiusMap,
39
39
  borderTopWidth: borderWidthMap,
40
40
  borderWidth: borderWidthMap,
41
- bottom: spaceMap,
41
+ bottom: allSpaceMap,
42
42
  boxShadow: shadowMap,
43
43
  color: textColorMap,
44
- columnGap: spaceMap,
45
- gap: spaceMap,
44
+ columnGap: positiveSpaceMap,
45
+ gap: positiveSpaceMap,
46
46
  height: dimensionMap,
47
47
  inlineSize: dimensionMap,
48
- inset: spaceMap,
49
- insetBlock: spaceMap,
50
- insetBlockEnd: spaceMap,
51
- insetBlockStart: spaceMap,
52
- insetInline: spaceMap,
53
- insetInlineEnd: spaceMap,
54
- insetInlineStart: spaceMap,
55
- left: spaceMap,
56
- margin: spaceMap,
57
- marginBlock: spaceMap,
58
- marginBlockEnd: spaceMap,
59
- marginBlockStart: spaceMap,
60
- marginBottom: spaceMap,
61
- marginInline: spaceMap,
62
- marginInlineEnd: spaceMap,
63
- marginInlineStart: spaceMap,
64
- marginLeft: spaceMap,
65
- marginRight: spaceMap,
66
- marginTop: spaceMap,
48
+ inset: allSpaceMap,
49
+ insetBlock: allSpaceMap,
50
+ insetBlockEnd: allSpaceMap,
51
+ insetBlockStart: allSpaceMap,
52
+ insetInline: allSpaceMap,
53
+ insetInlineEnd: allSpaceMap,
54
+ insetInlineStart: allSpaceMap,
55
+ left: allSpaceMap,
56
+ margin: allSpaceMap,
57
+ marginBlock: allSpaceMap,
58
+ marginBlockEnd: allSpaceMap,
59
+ marginBlockStart: allSpaceMap,
60
+ marginBottom: allSpaceMap,
61
+ marginInline: allSpaceMap,
62
+ marginInlineEnd: allSpaceMap,
63
+ marginInlineStart: allSpaceMap,
64
+ marginLeft: allSpaceMap,
65
+ marginRight: allSpaceMap,
66
+ marginTop: allSpaceMap,
67
67
  maxBlockSize: dimensionMap,
68
68
  maxHeight: dimensionMap,
69
69
  maxInlineSize: dimensionMap,
@@ -74,22 +74,22 @@ const tokensMap = {
74
74
  minWidth: dimensionMap,
75
75
  opacity: opacityMap,
76
76
  outlineColor: borderColorMap,
77
- outlineOffset: spaceMap,
77
+ outlineOffset: positiveSpaceMap,
78
78
  outlineWidth: borderWidthMap,
79
- padding: spaceMap,
80
- paddingBlock: spaceMap,
81
- paddingBlockEnd: spaceMap,
82
- paddingBlockStart: spaceMap,
83
- paddingBottom: spaceMap,
84
- paddingInline: spaceMap,
85
- paddingInlineEnd: spaceMap,
86
- paddingInlineStart: spaceMap,
87
- paddingLeft: spaceMap,
88
- paddingRight: spaceMap,
89
- paddingTop: spaceMap,
90
- right: spaceMap,
91
- rowGap: spaceMap,
92
- top: spaceMap,
79
+ padding: positiveSpaceMap,
80
+ paddingBlock: positiveSpaceMap,
81
+ paddingBlockEnd: positiveSpaceMap,
82
+ paddingBlockStart: positiveSpaceMap,
83
+ paddingBottom: positiveSpaceMap,
84
+ paddingInline: positiveSpaceMap,
85
+ paddingInlineEnd: positiveSpaceMap,
86
+ paddingInlineStart: positiveSpaceMap,
87
+ paddingLeft: positiveSpaceMap,
88
+ paddingRight: positiveSpaceMap,
89
+ paddingTop: positiveSpaceMap,
90
+ right: allSpaceMap,
91
+ rowGap: positiveSpaceMap,
92
+ top: allSpaceMap,
93
93
  width: dimensionMap,
94
94
  zIndex: layerMap
95
95
  };
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2
4
  import { css } from '@emotion/react';
3
5
  import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
4
6
 
@@ -25,12 +27,12 @@ export var dimensionMap = {
25
27
  */
26
28
  /**
27
29
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
28
- * @codegen <<SignedSource::3cd327a4cd23dce8564f0b76a0d600ce>>
30
+ * @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
29
31
  * @codegenId spacing
30
32
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
31
33
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
32
34
  */
33
- export var spaceMap = {
35
+ export var positiveSpaceMap = {
34
36
  'space.0': "var(--ds-space-0, 0px)",
35
37
  'space.025': "var(--ds-space-025, 2px)",
36
38
  'space.050': "var(--ds-space-050, 4px)",
@@ -57,6 +59,7 @@ export var negativeSpaceMap = {
57
59
  'space.negative.300': "var(--ds-space-negative-300, -24px)",
58
60
  'space.negative.400': "var(--ds-space-negative-400, -32px)"
59
61
  };
62
+ export var allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), negativeSpaceMap);
60
63
  /**
61
64
  * @codegenEnd
62
65
  */
@@ -548,11 +551,11 @@ var getSerializedStylesMap = function getSerializedStylesMap(cssProperty, tokenM
548
551
  }, {});
549
552
  };
550
553
  export var paddingStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
551
- styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
554
+ styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
552
555
  return styleMap;
553
556
  }, {});
554
557
  export var spaceStylesMap = spacingProperties.reduce(function (styleMap, spacingProperty) {
555
- styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
558
+ styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
556
559
  return styleMap;
557
560
  }, {});
558
561
  export var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
package/dist/esm/xcss/xcss.js CHANGED
@@ -6,7 +6,7 @@ import { css as cssEmotion } from '@emotion/react';
6
6
 
7
7
  // eslint-disable-next-line import/no-extraneous-dependencies
8
8
 
9
- import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, shadowMap, spaceMap, textColorMap } from './style-maps.partial';
9
+ import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
10
10
  var tokensMap = {
11
11
  backgroundColor: backgroundColorMap,
12
12
  blockSize: dimensionMap,
@@ -41,32 +41,32 @@ var tokensMap = {
41
41
  borderTopRightRadius: borderRadiusMap,
42
42
  borderTopWidth: borderWidthMap,
43
43
  borderWidth: borderWidthMap,
44
- bottom: spaceMap,
44
+ bottom: allSpaceMap,
45
45
  boxShadow: shadowMap,
46
46
  color: textColorMap,
47
- columnGap: spaceMap,
48
- gap: spaceMap,
47
+ columnGap: positiveSpaceMap,
48
+ gap: positiveSpaceMap,
49
49
  height: dimensionMap,
50
50
  inlineSize: dimensionMap,
51
- inset: spaceMap,
52
- insetBlock: spaceMap,
53
- insetBlockEnd: spaceMap,
54
- insetBlockStart: spaceMap,
55
- insetInline: spaceMap,
56
- insetInlineEnd: spaceMap,
57
- insetInlineStart: spaceMap,
58
- left: spaceMap,
59
- margin: spaceMap,
60
- marginBlock: spaceMap,
61
- marginBlockEnd: spaceMap,
62
- marginBlockStart: spaceMap,
63
- marginBottom: spaceMap,
64
- marginInline: spaceMap,
65
- marginInlineEnd: spaceMap,
66
- marginInlineStart: spaceMap,
67
- marginLeft: spaceMap,
68
- marginRight: spaceMap,
69
- marginTop: spaceMap,
51
+ inset: allSpaceMap,
52
+ insetBlock: allSpaceMap,
53
+ insetBlockEnd: allSpaceMap,
54
+ insetBlockStart: allSpaceMap,
55
+ insetInline: allSpaceMap,
56
+ insetInlineEnd: allSpaceMap,
57
+ insetInlineStart: allSpaceMap,
58
+ left: allSpaceMap,
59
+ margin: allSpaceMap,
60
+ marginBlock: allSpaceMap,
61
+ marginBlockEnd: allSpaceMap,
62
+ marginBlockStart: allSpaceMap,
63
+ marginBottom: allSpaceMap,
64
+ marginInline: allSpaceMap,
65
+ marginInlineEnd: allSpaceMap,
66
+ marginInlineStart: allSpaceMap,
67
+ marginLeft: allSpaceMap,
68
+ marginRight: allSpaceMap,
69
+ marginTop: allSpaceMap,
70
70
  maxBlockSize: dimensionMap,
71
71
  maxHeight: dimensionMap,
72
72
  maxInlineSize: dimensionMap,
@@ -77,22 +77,22 @@ var tokensMap = {
77
77
  minWidth: dimensionMap,
78
78
  opacity: opacityMap,
79
79
  outlineColor: borderColorMap,
80
- outlineOffset: spaceMap,
80
+ outlineOffset: positiveSpaceMap,
81
81
  outlineWidth: borderWidthMap,
82
- padding: spaceMap,
83
- paddingBlock: spaceMap,
84
- paddingBlockEnd: spaceMap,
85
- paddingBlockStart: spaceMap,
86
- paddingBottom: spaceMap,
87
- paddingInline: spaceMap,
88
- paddingInlineEnd: spaceMap,
89
- paddingInlineStart: spaceMap,
90
- paddingLeft: spaceMap,
91
- paddingRight: spaceMap,
92
- paddingTop: spaceMap,
93
- right: spaceMap,
94
- rowGap: spaceMap,
95
- top: spaceMap,
82
+ padding: positiveSpaceMap,
83
+ paddingBlock: positiveSpaceMap,
84
+ paddingBlockEnd: positiveSpaceMap,
85
+ paddingBlockStart: positiveSpaceMap,
86
+ paddingBottom: positiveSpaceMap,
87
+ paddingInline: positiveSpaceMap,
88
+ paddingInlineEnd: positiveSpaceMap,
89
+ paddingInlineStart: positiveSpaceMap,
90
+ paddingLeft: positiveSpaceMap,
91
+ paddingRight: positiveSpaceMap,
92
+ paddingTop: positiveSpaceMap,
93
+ right: allSpaceMap,
94
+ rowGap: positiveSpaceMap,
95
+ top: allSpaceMap,
96
96
  width: dimensionMap,
97
97
  zIndex: layerMap
98
98
  };
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -23,12 +23,12 @@ 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::3cd327a4cd23dce8564f0b76a0d600ce>>
26
+ * @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
27
27
  * @codegenId spacing
28
28
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
29
29
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
30
30
  */
31
- export declare const spaceMap: {
31
+ export declare const positiveSpaceMap: {
32
32
  'space.0': "var(--ds-space-0)";
33
33
  'space.025': "var(--ds-space-025)";
34
34
  'space.050': "var(--ds-space-050)";
@@ -44,7 +44,7 @@ export declare const spaceMap: {
44
44
  'space.800': "var(--ds-space-800)";
45
45
  'space.1000': "var(--ds-space-1000)";
46
46
  };
47
- export type Space = keyof typeof spaceMap;
47
+ export type Space = keyof typeof positiveSpaceMap;
48
48
  export declare const negativeSpaceMap: {
49
49
  'space.negative.025': "var(--ds-space-negative-025)";
50
50
  'space.negative.050': "var(--ds-space-negative-050)";
@@ -57,6 +57,32 @@ export declare const negativeSpaceMap: {
57
57
  'space.negative.400': "var(--ds-space-negative-400)";
58
58
  };
59
59
  export type NegativeSpace = keyof typeof negativeSpaceMap;
60
+ export declare const allSpaceMap: {
61
+ 'space.negative.025': "var(--ds-space-negative-025)";
62
+ 'space.negative.050': "var(--ds-space-negative-050)";
63
+ 'space.negative.075': "var(--ds-space-negative-075)";
64
+ 'space.negative.100': "var(--ds-space-negative-100)";
65
+ 'space.negative.150': "var(--ds-space-negative-150)";
66
+ 'space.negative.200': "var(--ds-space-negative-200)";
67
+ 'space.negative.250': "var(--ds-space-negative-250)";
68
+ 'space.negative.300': "var(--ds-space-negative-300)";
69
+ 'space.negative.400': "var(--ds-space-negative-400)";
70
+ 'space.0': "var(--ds-space-0)";
71
+ 'space.025': "var(--ds-space-025)";
72
+ 'space.050': "var(--ds-space-050)";
73
+ 'space.075': "var(--ds-space-075)";
74
+ 'space.100': "var(--ds-space-100)";
75
+ 'space.150': "var(--ds-space-150)";
76
+ 'space.200': "var(--ds-space-200)";
77
+ 'space.250': "var(--ds-space-250)";
78
+ 'space.300': "var(--ds-space-300)";
79
+ 'space.400': "var(--ds-space-400)";
80
+ 'space.500': "var(--ds-space-500)";
81
+ 'space.600': "var(--ds-space-600)";
82
+ 'space.800': "var(--ds-space-800)";
83
+ 'space.1000': "var(--ds-space-1000)";
84
+ };
85
+ export type AllSpace = keyof typeof allSpaceMap;
60
86
  /**
61
87
  * @codegenEnd
62
88
  */
@@ -547,7 +573,7 @@ export type UiText = keyof typeof uiTextMap;
547
573
  /**
548
574
  * @codegenEnd
549
575
  */
550
- type MarginSpace = Space | NegativeSpace | 'auto';
576
+ type MarginSpace = AllSpace | 'auto';
551
577
  type AutoComplete<T extends string> = T | Omit<string, T>;
552
578
  export type TokenisedProps = {
553
579
  backgroundColor?: BackgroundColor;
@@ -583,21 +609,21 @@ export type TokenisedProps = {
583
609
  borderTopRightRadius?: AutoComplete<BorderRadius>;
584
610
  borderTopWidth?: AutoComplete<BorderWidth>;
585
611
  borderWidth?: BorderWidth;
586
- bottom?: AutoComplete<Space>;
612
+ bottom?: AutoComplete<AllSpace>;
587
613
  boxShadow?: Shadow;
588
614
  color?: TextColor;
589
615
  columnGap?: Space;
590
616
  gap?: Space;
591
617
  height?: AutoComplete<Dimension>;
592
618
  inlineSize?: AutoComplete<Dimension>;
593
- inset?: Space;
594
- insetBlock?: Space;
595
- insetBlockEnd?: Space;
596
- insetBlockStart?: Space;
597
- insetInline?: Space;
598
- insetInlineEnd?: Space;
599
- insetInlineStart?: Space;
600
- left?: AutoComplete<Space>;
619
+ inset?: AutoComplete<AllSpace>;
620
+ insetBlock?: AutoComplete<AllSpace>;
621
+ insetBlockEnd?: AutoComplete<AllSpace>;
622
+ insetBlockStart?: AutoComplete<AllSpace>;
623
+ insetInline?: AutoComplete<AllSpace>;
624
+ insetInlineEnd?: AutoComplete<AllSpace>;
625
+ insetInlineStart?: AutoComplete<AllSpace>;
626
+ left?: AutoComplete<AllSpace>;
601
627
  margin?: AutoComplete<MarginSpace>;
602
628
  marginBlock?: AutoComplete<MarginSpace>;
603
629
  marginBlockEnd?: AutoComplete<MarginSpace>;
@@ -632,15 +658,15 @@ export type TokenisedProps = {
632
658
  paddingLeft?: AutoComplete<Space>;
633
659
  paddingRight?: AutoComplete<Space>;
634
660
  paddingTop?: AutoComplete<Space>;
635
- right?: AutoComplete<Space>;
661
+ right?: AutoComplete<AllSpace>;
636
662
  rowGap?: Space;
637
- top?: AutoComplete<Space>;
663
+ top?: AutoComplete<AllSpace>;
638
664
  width?: AutoComplete<Dimension>;
639
665
  zIndex?: Layer;
640
666
  };
641
667
  declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];
642
668
  type SpacingProperty = (typeof spacingProperties)[number];
643
- type SpacingToken = keyof typeof spaceMap;
669
+ type SpacingToken = keyof typeof positiveSpaceMap;
644
670
  type BackgroundColorToken = keyof typeof backgroundColorMap;
645
671
  type SurfaceColorToken = keyof typeof surfaceColorMap;
646
672
  type TextColorToken = keyof typeof textColorMap;
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -23,12 +23,12 @@ 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::3cd327a4cd23dce8564f0b76a0d600ce>>
26
+ * @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
27
27
  * @codegenId spacing
28
28
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
29
29
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
30
30
  */
31
- export declare const spaceMap: {
31
+ export declare const positiveSpaceMap: {
32
32
  'space.0': "var(--ds-space-0)";
33
33
  'space.025': "var(--ds-space-025)";
34
34
  'space.050': "var(--ds-space-050)";
@@ -44,7 +44,7 @@ export declare const spaceMap: {
44
44
  'space.800': "var(--ds-space-800)";
45
45
  'space.1000': "var(--ds-space-1000)";
46
46
  };
47
- export type Space = keyof typeof spaceMap;
47
+ export type Space = keyof typeof positiveSpaceMap;
48
48
  export declare const negativeSpaceMap: {
49
49
  'space.negative.025': "var(--ds-space-negative-025)";
50
50
  'space.negative.050': "var(--ds-space-negative-050)";
@@ -57,6 +57,32 @@ export declare const negativeSpaceMap: {
57
57
  'space.negative.400': "var(--ds-space-negative-400)";
58
58
  };
59
59
  export type NegativeSpace = keyof typeof negativeSpaceMap;
60
+ export declare const allSpaceMap: {
61
+ 'space.negative.025': "var(--ds-space-negative-025)";
62
+ 'space.negative.050': "var(--ds-space-negative-050)";
63
+ 'space.negative.075': "var(--ds-space-negative-075)";
64
+ 'space.negative.100': "var(--ds-space-negative-100)";
65
+ 'space.negative.150': "var(--ds-space-negative-150)";
66
+ 'space.negative.200': "var(--ds-space-negative-200)";
67
+ 'space.negative.250': "var(--ds-space-negative-250)";
68
+ 'space.negative.300': "var(--ds-space-negative-300)";
69
+ 'space.negative.400': "var(--ds-space-negative-400)";
70
+ 'space.0': "var(--ds-space-0)";
71
+ 'space.025': "var(--ds-space-025)";
72
+ 'space.050': "var(--ds-space-050)";
73
+ 'space.075': "var(--ds-space-075)";
74
+ 'space.100': "var(--ds-space-100)";
75
+ 'space.150': "var(--ds-space-150)";
76
+ 'space.200': "var(--ds-space-200)";
77
+ 'space.250': "var(--ds-space-250)";
78
+ 'space.300': "var(--ds-space-300)";
79
+ 'space.400': "var(--ds-space-400)";
80
+ 'space.500': "var(--ds-space-500)";
81
+ 'space.600': "var(--ds-space-600)";
82
+ 'space.800': "var(--ds-space-800)";
83
+ 'space.1000': "var(--ds-space-1000)";
84
+ };
85
+ export type AllSpace = keyof typeof allSpaceMap;
60
86
  /**
61
87
  * @codegenEnd
62
88
  */
@@ -547,7 +573,7 @@ export type UiText = keyof typeof uiTextMap;
547
573
  /**
548
574
  * @codegenEnd
549
575
  */
550
- type MarginSpace = Space | NegativeSpace | 'auto';
576
+ type MarginSpace = AllSpace | 'auto';
551
577
  type AutoComplete<T extends string> = T | Omit<string, T>;
552
578
  export type TokenisedProps = {
553
579
  backgroundColor?: BackgroundColor;
@@ -583,21 +609,21 @@ export type TokenisedProps = {
583
609
  borderTopRightRadius?: AutoComplete<BorderRadius>;
584
610
  borderTopWidth?: AutoComplete<BorderWidth>;
585
611
  borderWidth?: BorderWidth;
586
- bottom?: AutoComplete<Space>;
612
+ bottom?: AutoComplete<AllSpace>;
587
613
  boxShadow?: Shadow;
588
614
  color?: TextColor;
589
615
  columnGap?: Space;
590
616
  gap?: Space;
591
617
  height?: AutoComplete<Dimension>;
592
618
  inlineSize?: AutoComplete<Dimension>;
593
- inset?: Space;
594
- insetBlock?: Space;
595
- insetBlockEnd?: Space;
596
- insetBlockStart?: Space;
597
- insetInline?: Space;
598
- insetInlineEnd?: Space;
599
- insetInlineStart?: Space;
600
- left?: AutoComplete<Space>;
619
+ inset?: AutoComplete<AllSpace>;
620
+ insetBlock?: AutoComplete<AllSpace>;
621
+ insetBlockEnd?: AutoComplete<AllSpace>;
622
+ insetBlockStart?: AutoComplete<AllSpace>;
623
+ insetInline?: AutoComplete<AllSpace>;
624
+ insetInlineEnd?: AutoComplete<AllSpace>;
625
+ insetInlineStart?: AutoComplete<AllSpace>;
626
+ left?: AutoComplete<AllSpace>;
601
627
  margin?: AutoComplete<MarginSpace>;
602
628
  marginBlock?: AutoComplete<MarginSpace>;
603
629
  marginBlockEnd?: AutoComplete<MarginSpace>;
@@ -632,9 +658,9 @@ export type TokenisedProps = {
632
658
  paddingLeft?: AutoComplete<Space>;
633
659
  paddingRight?: AutoComplete<Space>;
634
660
  paddingTop?: AutoComplete<Space>;
635
- right?: AutoComplete<Space>;
661
+ right?: AutoComplete<AllSpace>;
636
662
  rowGap?: Space;
637
- top?: AutoComplete<Space>;
663
+ top?: AutoComplete<AllSpace>;
638
664
  width?: AutoComplete<Dimension>;
639
665
  zIndex?: Layer;
640
666
  };
@@ -651,7 +677,7 @@ declare const spacingProperties: readonly [
651
677
  "columnGap"
652
678
  ];
653
679
  type SpacingProperty = (typeof spacingProperties)[number];
654
- type SpacingToken = keyof typeof spaceMap;
680
+ type SpacingToken = keyof typeof positiveSpaceMap;
655
681
  type BackgroundColorToken = keyof typeof backgroundColorMap;
656
682
  type SurfaceColorToken = keyof typeof surfaceColorMap;
657
683
  type TextColorToken = keyof typeof textColorMap;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "1.15.1",
3
+ "version": "1.16.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -105,7 +105,7 @@
105
105
  },
106
106
  "dependencies": {
107
107
  "@atlaskit/app-provider": "^0.4.0",
108
- "@atlaskit/tokens": "^1.30.0",
108
+ "@atlaskit/tokens": "^1.33.0",
109
109
  "@babel/runtime": "^7.0.0",
110
110
  "@emotion/react": "^11.7.1",
111
111
  "@emotion/serialize": "^1.1.0",
package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap CHANGED
@@ -810,7 +810,7 @@ export type Shadow = keyof typeof shadowMap;
810
810
  `;
811
811
 
812
812
  exports[`@atlaskit/primitives spacing styles are generated correctly 1`] = `
813
- "export const spaceMap = {
813
+ "export const positiveSpaceMap = {
814
814
  'space.0': token('space.0', '0px'),
815
815
  'space.025': token('space.025', '2px'),
816
816
  'space.050': token('space.050', '4px'),
@@ -826,7 +826,7 @@ exports[`@atlaskit/primitives spacing styles are generated correctly 1`] = `
826
826
  'space.800': token('space.800', '64px'),
827
827
  'space.1000': token('space.1000', '80px'),
828
828
  };
829
- export type Space = keyof typeof spaceMap;
829
+ export type Space = keyof typeof positiveSpaceMap;
830
830
 
831
831
  export const negativeSpaceMap = {
832
832
  'space.negative.025': token('space.negative.025', '-2px'),
@@ -840,6 +840,10 @@ export const negativeSpaceMap = {
840
840
  'space.negative.400': token('space.negative.400', '-32px'),
841
841
  };
842
842
  export type NegativeSpace = keyof typeof negativeSpaceMap;
843
+
844
+ export const allSpaceMap = { ...positiveSpaceMap, ...negativeSpaceMap };
845
+
846
+ export type AllSpace = keyof typeof allSpaceMap;
843
847
  "
844
848
  `;
845
849
 
package/scripts/spacing-codegen-template.tsx CHANGED
@@ -7,7 +7,7 @@ import { constructTokenFunctionCall } from './utils';
7
7
 
8
8
  const spacingTokenPrefix = 'space.';
9
9
  const negativeSuffix = '.negative';
10
- const spaceTokens = tokens
10
+ const positiveSpaceTokens = tokens
11
11
  .filter(token => token.name.startsWith(spacingTokenPrefix))
12
12
  .filter(token => !token.name.includes(negativeSuffix))
13
13
  .map(t => ({
@@ -25,13 +25,13 @@ const negativeSpaceTokens = tokens
25
25
 
26
26
  export const createSpacingStylesFromTemplate = () => {
27
27
  const output = [
28
- `export const spaceMap = {\n${spaceTokens
28
+ `export const positiveSpaceMap = {\n${positiveSpaceTokens
29
29
  .map(
30
30
  ({ name, fallback }) =>
31
31
  `'${name}': ${constructTokenFunctionCall(name, fallback)},`,
32
32
  )
33
33
  .join('\n')}}`,
34
- `export type Space = keyof typeof spaceMap;\n`,
34
+ `export type Space = keyof typeof positiveSpaceMap;\n`,
35
35
  `export const negativeSpaceMap = {\n${negativeSpaceTokens
36
36
  .map(
37
37
  ({ name, fallback }) =>
@@ -39,6 +39,8 @@ export const createSpacingStylesFromTemplate = () => {
39
39
  )
40
40
  .join('\n')}}`,
41
41
  `export type NegativeSpace = keyof typeof negativeSpaceMap;\n`,
42
+ `export const allSpaceMap = { ...positiveSpaceMap, ...negativeSpaceMap };\n`,
43
+ `export type AllSpace = keyof typeof allSpaceMap;\n`,
42
44
  ].join('\n');
43
45
 
44
46
  return prettier.format(output, {
package/scripts/typography-codegen-template.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import prettier from 'prettier';
2
2
  import parserTypeScript from 'prettier/parser-typescript';
3
3
 
4
- import { typography as tokens } from '@atlaskit/tokens/tokens-raw';
4
+ import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
5
5
 
6
6
  import { capitalize, constructTokenFunctionCall } from './utils';
7
7