@atlaskit/primitives 0.9.3 → 0.9.5

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 (26) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/helpers/responsive/constants.js +24 -17
  3. package/dist/cjs/helpers/responsive/media-helper.js +21 -27
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/cjs/xcss/style-maps.partial.js +23 -23
  6. package/dist/es2019/helpers/responsive/constants.js +24 -15
  7. package/dist/es2019/helpers/responsive/media-helper.js +21 -27
  8. package/dist/es2019/version.json +1 -1
  9. package/dist/es2019/xcss/style-maps.partial.js +23 -23
  10. package/dist/esm/helpers/responsive/constants.js +24 -17
  11. package/dist/esm/helpers/responsive/media-helper.js +21 -27
  12. package/dist/esm/version.json +1 -1
  13. package/dist/esm/xcss/style-maps.partial.js +23 -23
  14. package/dist/types/helpers/responsive/constants.d.ts +2 -0
  15. package/dist/types/helpers/responsive/media-helper.d.ts +14 -14
  16. package/dist/types/helpers/responsive/types.d.ts +7 -2
  17. package/dist/types/xcss/style-maps.partial.d.ts +15 -15
  18. package/dist/types-ts4.5/helpers/responsive/constants.d.ts +2 -0
  19. package/dist/types-ts4.5/helpers/responsive/media-helper.d.ts +14 -14
  20. package/dist/types-ts4.5/helpers/responsive/types.d.ts +7 -2
  21. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +15 -15
  22. package/package.json +4 -6
  23. package/report.api.md +7 -7
  24. package/scripts/codegen-file-templates/dimensions.tsx +7 -7
  25. package/scripts/spacing-codegen-template.tsx +1 -1
  26. package/tmp/api-report-tmp.d.ts +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 0.9.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`61cb5313358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61cb5313358) - Removing unused dependencies and dev dependencies
8
+
9
+ ## 0.9.4
10
+
11
+ ### Patch Changes
12
+
13
+ - [`b19d5c53b64`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b19d5c53b64) - Internal changest to the primitives package related to token generated styles.
14
+ - [`4c4dcc3d571`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c4dcc3d571) - Updates primitives internal style map.
15
+ - Updated dependencies
16
+
3
17
  ## 0.9.3
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/helpers/responsive/constants.js CHANGED
@@ -7,6 +7,8 @@ exports.UNSAFE_BREAKPOINTS_ORDERED_LIST = exports.UNSAFE_BREAKPOINTS_CONFIG = ex
7
7
  /**
8
8
  * Our internal configuration for breakpoints configuration.
9
9
  *
10
+ * These are `rem` based multiples.
11
+ *
10
12
  * @experimental Unsafe for consumption outside of the design system itself.
11
13
  */
12
14
  var UNSAFE_BREAKPOINTS_CONFIG = {
@@ -14,50 +16,57 @@ var UNSAFE_BREAKPOINTS_CONFIG = {
14
16
  xxs: {
15
17
  gridItemGutter: "var(--ds-space-200, 16px)",
16
18
  gridMargin: "var(--ds-space-200, 16px)",
17
- min: 0,
18
- max: 479
19
+ below: '0rem',
20
+ min: '0rem',
21
+ max: '29.998rem'
19
22
  },
20
23
  // phablet
21
24
  xs: {
22
25
  gridItemGutter: "var(--ds-space-200, 16px)",
23
26
  gridMargin: "var(--ds-space-200, 16px)",
24
- min: 480,
25
- max: 767
27
+ below: '29.998rem',
28
+ min: '30rem',
29
+ max: '47.998rem'
26
30
  },
27
31
  // tablet
28
32
  sm: {
29
33
  gridItemGutter: "var(--ds-space-200, 16px)",
30
34
  gridMargin: "var(--ds-space-300, 24px)",
31
- min: 768,
32
- max: 1023
35
+ below: '47.998rem',
36
+ min: '48rem',
37
+ max: '63.998rem'
33
38
  },
34
39
  // laptop desktop
35
40
  md: {
36
41
  gridItemGutter: "var(--ds-space-300, 24px)",
37
42
  gridMargin: "var(--ds-space-400, 32px)",
38
- min: 1024,
39
- max: 1439
43
+ below: '63.998rem',
44
+ min: '64rem',
45
+ max: '89.998rem'
40
46
  },
41
47
  // monitor
42
48
  lg: {
43
49
  gridItemGutter: "var(--ds-space-400, 32px)",
44
50
  gridMargin: "var(--ds-space-400, 32px)",
45
- min: 1440,
46
- max: 1767
51
+ below: '89.998rem',
52
+ min: '90rem',
53
+ max: '109.998rem'
47
54
  },
48
55
  // large high res
49
56
  xl: {
50
57
  gridItemGutter: "var(--ds-space-400, 32px)",
51
58
  gridMargin: "var(--ds-space-500, 40px)",
52
- min: 1768,
53
- max: 2159
59
+ below: '109.998rem',
60
+ min: '110rem',
61
+ max: '134.998rem'
54
62
  },
55
63
  // extra large high res
56
64
  xxl: {
57
65
  gridItemGutter: "var(--ds-space-500, 40px)",
58
66
  gridMargin: "var(--ds-space-500, 40px)",
59
- min: 2160,
60
- max: Number.MAX_SAFE_INTEGER
67
+ below: '134.998rem',
68
+ min: '135rem',
69
+ max: "".concat(Number.MAX_SAFE_INTEGER, "rem")
61
70
  }
62
71
  };
63
72
 
@@ -69,9 +78,7 @@ var UNSAFE_BREAKPOINTS_CONFIG = {
69
78
  * @experimental Unsafe for consumption outside of the design system itself.
70
79
  */
71
80
  exports.UNSAFE_BREAKPOINTS_CONFIG = UNSAFE_BREAKPOINTS_CONFIG;
72
- var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort(function (a, b) {
73
- return UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min;
74
- });
81
+ var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG);
75
82
 
76
83
  /**
77
84
  * This is our smallest breakpoint with a few nuances to it:
package/dist/cjs/helpers/responsive/media-helper.js CHANGED
@@ -5,12 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.UNSAFE_media = void 0;
7
7
  var _constants = require("./constants");
8
- /**
9
- * To ensure min-width and max-width do both target at the same time, we subtract a value.
10
- * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
11
- */
12
- var BELOW_PRECISION = 0.02;
13
-
14
8
  /**
15
9
  * This is the full internal version. The import has been separated to only expose as-needed.
16
10
  */
@@ -25,37 +19,37 @@ var internalMedia = {
25
19
  *
26
20
  * Eg. this is `@media (min-width: 0px)`
27
21
  */
28
- xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px)"),
29
- xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px)"),
30
- sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px)"),
31
- md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, "px)"),
32
- lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px)"),
33
- xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px)"),
34
- xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px)")
22
+ xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ")"),
23
+ xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
24
+ sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
25
+ md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
26
+ lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
27
+ xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")"),
28
+ xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, ")")
35
29
  },
36
30
  below: {
37
31
  /**
38
32
  * A media query to target viewports below the min width of a given breakpoint.
39
- * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
33
+ * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0rem)`
40
34
  */
41
- xs: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION, "px)"),
42
- sm: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION, "px)"),
43
- md: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION, "px)"),
44
- lg: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION, "px)"),
45
- xl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION, "px)"),
46
- xxl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION, "px)")
35
+ xs: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.below, ")"),
36
+ sm: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.below, ")"),
37
+ md: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.below, ")"),
38
+ lg: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.below, ")"),
39
+ xl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.below, ")"),
40
+ xxl: "@media (max-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.below, ")")
47
41
  },
48
42
  /**
49
43
  * A media query to target viewports exactly between the min and max of a given breakpoint.
50
44
  */
51
45
  only: {
52
- xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.max, "px)"),
53
- xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.max, "px)"),
54
- sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.max, "px)"),
55
- md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.max, "px)"),
56
- lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.max, "px)"),
57
- xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.max, "px)"),
58
- xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px) and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.max, "px)")
46
+ xxs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxs.max, ")"),
47
+ xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.max, ")"),
48
+ sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.max, ")"),
49
+ md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.max, ")"),
50
+ lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.max, ")"),
51
+ xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.max, ")"),
52
+ xxl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.min, ") and (max-width: ").concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xxl.max, ")")
59
53
  }
60
54
  };
61
55
 
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -9,21 +9,21 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _react = require("@emotion/react");
10
10
  /**
11
11
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
12
- * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
12
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
13
13
  * @codegenId dimensions
14
14
  * @codegenCommand yarn codegen-styles
15
15
  * @codegenParams ["dimensions"]
16
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
16
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
17
17
  */
18
18
  var dimensionMap = {
19
19
  '100%': '100%',
20
- 'size.100': '16px',
21
- 'size.200': '24px',
22
- 'size.300': '32px',
23
- 'size.400': '40px',
24
- 'size.500': '48px',
25
- 'size.600': '96px',
26
- 'size.1000': '192px'
20
+ 'size.100': '1rem',
21
+ 'size.200': '1.5rem',
22
+ 'size.300': '2rem',
23
+ 'size.400': '2.5rem',
24
+ 'size.500': '3rem',
25
+ 'size.600': '6rem',
26
+ 'size.1000': '12rem'
27
27
  };
28
28
  exports.dimensionMap = dimensionMap;
29
29
  /**
@@ -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::9fbc4dfcd8f43f52bff6b3bb666397fe>>
35
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
36
36
  * @codegenId spacing
37
37
  * @codegenCommand yarn codegen-styles
38
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
38
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
39
39
  */
40
40
  var spaceMap = {
41
41
  'space.0': "var(--ds-space-0, 0px)",
@@ -270,13 +270,13 @@ exports.fillMap = fillMap;
270
270
 
271
271
  /**
272
272
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
273
- * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
273
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
274
274
  * @codegenId misc
275
275
  * @codegenCommand yarn codegen-styles
276
276
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
277
277
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
278
278
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
279
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
279
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
280
280
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
281
281
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
282
282
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -366,24 +366,24 @@ exports.positionMap = positionMap;
366
366
 
367
367
  /**
368
368
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
369
- * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
369
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
370
370
  * @codegenId border
371
371
  * @codegenCommand yarn codegen-styles
372
372
  * @codegenParams ["width", "radius"]
373
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
373
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
374
374
  */
375
375
  var borderWidthMap = {
376
- 'width.0': "var(--ds-width-0, 0)",
377
- 'width.050': "var(--ds-width-050, 0.0625rem)",
378
- 'width.100': "var(--ds-width-100, 0.125rem)"
376
+ 'width.0': "var(--ds-width-0, 0px)",
377
+ 'width.050': "var(--ds-width-050, 1px)",
378
+ 'width.100': "var(--ds-width-100, 2px)"
379
379
  };
380
380
  exports.borderWidthMap = borderWidthMap;
381
381
  var borderRadiusMap = {
382
- 'radius.050': "var(--ds-radius-050, 0.125rem)",
383
- 'radius.100': "var(--ds-radius-100, 0.25rem)",
384
- 'radius.200': "var(--ds-radius-200, 0.5rem)",
385
- 'radius.300': "var(--ds-radius-300, 0.75rem)",
386
- 'radius.400': "var(--ds-radius-400, 1rem)",
382
+ 'radius.050': "var(--ds-radius-050, 2px)",
383
+ 'radius.100': "var(--ds-radius-100, 4px)",
384
+ 'radius.200': "var(--ds-radius-200, 8px)",
385
+ 'radius.300': "var(--ds-radius-300, 12px)",
386
+ 'radius.400': "var(--ds-radius-400, 16px)",
387
387
  'radius.round': "var(--ds-radius-round, 50%)"
388
388
  };
389
389
 
package/dist/es2019/helpers/responsive/constants.js CHANGED
@@ -1,6 +1,8 @@
1
1
  /**
2
2
  * Our internal configuration for breakpoints configuration.
3
3
  *
4
+ * These are `rem` based multiples.
5
+ *
4
6
  * @experimental Unsafe for consumption outside of the design system itself.
5
7
  */
6
8
  export const UNSAFE_BREAKPOINTS_CONFIG = {
@@ -8,50 +10,57 @@ export const UNSAFE_BREAKPOINTS_CONFIG = {
8
10
  xxs: {
9
11
  gridItemGutter: "var(--ds-space-200, 16px)",
10
12
  gridMargin: "var(--ds-space-200, 16px)",
11
- min: 0,
12
- max: 479
13
+ below: '0rem',
14
+ min: '0rem',
15
+ max: '29.998rem'
13
16
  },
14
17
  // phablet
15
18
  xs: {
16
19
  gridItemGutter: "var(--ds-space-200, 16px)",
17
20
  gridMargin: "var(--ds-space-200, 16px)",
18
- min: 480,
19
- max: 767
21
+ below: '29.998rem',
22
+ min: '30rem',
23
+ max: '47.998rem'
20
24
  },
21
25
  // tablet
22
26
  sm: {
23
27
  gridItemGutter: "var(--ds-space-200, 16px)",
24
28
  gridMargin: "var(--ds-space-300, 24px)",
25
- min: 768,
26
- max: 1023
29
+ below: '47.998rem',
30
+ min: '48rem',
31
+ max: '63.998rem'
27
32
  },
28
33
  // laptop desktop
29
34
  md: {
30
35
  gridItemGutter: "var(--ds-space-300, 24px)",
31
36
  gridMargin: "var(--ds-space-400, 32px)",
32
- min: 1024,
33
- max: 1439
37
+ below: '63.998rem',
38
+ min: '64rem',
39
+ max: '89.998rem'
34
40
  },
35
41
  // monitor
36
42
  lg: {
37
43
  gridItemGutter: "var(--ds-space-400, 32px)",
38
44
  gridMargin: "var(--ds-space-400, 32px)",
39
- min: 1440,
40
- max: 1767
45
+ below: '89.998rem',
46
+ min: '90rem',
47
+ max: '109.998rem'
41
48
  },
42
49
  // large high res
43
50
  xl: {
44
51
  gridItemGutter: "var(--ds-space-400, 32px)",
45
52
  gridMargin: "var(--ds-space-500, 40px)",
46
- min: 1768,
47
- max: 2159
53
+ below: '109.998rem',
54
+ min: '110rem',
55
+ max: '134.998rem'
48
56
  },
49
57
  // extra large high res
50
58
  xxl: {
51
59
  gridItemGutter: "var(--ds-space-500, 40px)",
52
60
  gridMargin: "var(--ds-space-500, 40px)",
53
- min: 2160,
54
- max: Number.MAX_SAFE_INTEGER
61
+ below: '134.998rem',
62
+ min: '135rem',
63
+ max: `${Number.MAX_SAFE_INTEGER}rem`
55
64
  }
56
65
  };
57
66
 
@@ -62,7 +71,7 @@ export const UNSAFE_BREAKPOINTS_CONFIG = {
62
71
  *
63
72
  * @experimental Unsafe for consumption outside of the design system itself.
64
73
  */
65
- export const UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort((a, b) => UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min);
74
+ export const UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG);
66
75
 
67
76
  /**
68
77
  * This is our smallest breakpoint with a few nuances to it:
package/dist/es2019/helpers/responsive/media-helper.js CHANGED
@@ -1,11 +1,5 @@
1
1
  import { UNSAFE_BREAKPOINTS_CONFIG } from './constants';
2
2
 
3
- /**
4
- * To ensure min-width and max-width do both target at the same time, we subtract a value.
5
- * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
6
- */
7
- const BELOW_PRECISION = 0.02;
8
-
9
3
  /**
10
4
  * This is the full internal version. The import has been separated to only expose as-needed.
11
5
  */
@@ -20,37 +14,37 @@ const internalMedia = {
20
14
  *
21
15
  * Eg. this is `@media (min-width: 0px)`
22
16
  */
23
- xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min}px)`,
24
- xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min}px)`,
25
- sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min}px)`,
26
- md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min}px)`,
27
- lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min}px)`,
28
- xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min}px)`,
29
- xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min}px)`
17
+ xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min})`,
18
+ xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min})`,
19
+ sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min})`,
20
+ md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min})`,
21
+ lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min})`,
22
+ xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min})`,
23
+ xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min})`
30
24
  },
31
25
  below: {
32
26
  /**
33
27
  * A media query to target viewports below the min width of a given breakpoint.
34
- * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
28
+ * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0rem)`
35
29
  */
36
- xs: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION}px)`,
37
- sm: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION}px)`,
38
- md: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION}px)`,
39
- lg: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION}px)`,
40
- xl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION}px)`,
41
- xxl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION}px)`
30
+ xs: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.below})`,
31
+ sm: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.below})`,
32
+ md: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.below})`,
33
+ lg: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.below})`,
34
+ xl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.below})`,
35
+ xxl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.below})`
42
36
  },
43
37
  /**
44
38
  * A media query to target viewports exactly between the min and max of a given breakpoint.
45
39
  */
46
40
  only: {
47
- xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.max}px)`,
48
- xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.max}px)`,
49
- sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.max}px)`,
50
- md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.max}px)`,
51
- lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.max}px)`,
52
- xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.max}px)`,
53
- xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.max}px)`
41
+ xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.max})`,
42
+ xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.max})`,
43
+ sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.max})`,
44
+ md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.max})`,
45
+ lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.max})`,
46
+ xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.max})`,
47
+ xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min}) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.max})`
54
48
  }
55
49
  };
56
50
 
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -1,31 +1,31 @@
1
1
  import { css } from '@emotion/react';
2
2
  /**
3
3
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
- * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
4
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
5
5
  * @codegenId dimensions
6
6
  * @codegenCommand yarn codegen-styles
7
7
  * @codegenParams ["dimensions"]
8
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
8
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
9
9
  */
10
10
  export const dimensionMap = {
11
11
  '100%': '100%',
12
- 'size.100': '16px',
13
- 'size.200': '24px',
14
- 'size.300': '32px',
15
- 'size.400': '40px',
16
- 'size.500': '48px',
17
- 'size.600': '96px',
18
- 'size.1000': '192px'
12
+ 'size.100': '1rem',
13
+ 'size.200': '1.5rem',
14
+ 'size.300': '2rem',
15
+ 'size.400': '2.5rem',
16
+ 'size.500': '3rem',
17
+ 'size.600': '6rem',
18
+ 'size.1000': '12rem'
19
19
  };
20
20
  /**
21
21
  * @codegenEnd
22
22
  */
23
23
  /**
24
24
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
25
- * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
25
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
26
26
  * @codegenId spacing
27
27
  * @codegenCommand yarn codegen-styles
28
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
28
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
29
29
  */
30
30
  export const spaceMap = {
31
31
  'space.0': "var(--ds-space-0, 0px)",
@@ -252,13 +252,13 @@ export const fillMap = {
252
252
  */
253
253
  /**
254
254
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
255
- * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
255
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
256
256
  * @codegenId misc
257
257
  * @codegenCommand yarn codegen-styles
258
258
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
259
259
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
260
260
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
261
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
261
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
262
262
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
263
263
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
264
264
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -335,23 +335,23 @@ export const positionMap = {
335
335
  */
336
336
  /**
337
337
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
338
- * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
338
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
339
339
  * @codegenId border
340
340
  * @codegenCommand yarn codegen-styles
341
341
  * @codegenParams ["width", "radius"]
342
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
342
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
343
343
  */
344
344
  export const borderWidthMap = {
345
- 'width.0': "var(--ds-width-0, 0)",
346
- 'width.050': "var(--ds-width-050, 0.0625rem)",
347
- 'width.100': "var(--ds-width-100, 0.125rem)"
345
+ 'width.0': "var(--ds-width-0, 0px)",
346
+ 'width.050': "var(--ds-width-050, 1px)",
347
+ 'width.100': "var(--ds-width-100, 2px)"
348
348
  };
349
349
  export const borderRadiusMap = {
350
- 'radius.050': "var(--ds-radius-050, 0.125rem)",
351
- 'radius.100': "var(--ds-radius-100, 0.25rem)",
352
- 'radius.200': "var(--ds-radius-200, 0.5rem)",
353
- 'radius.300': "var(--ds-radius-300, 0.75rem)",
354
- 'radius.400': "var(--ds-radius-400, 1rem)",
350
+ 'radius.050': "var(--ds-radius-050, 2px)",
351
+ 'radius.100': "var(--ds-radius-100, 4px)",
352
+ 'radius.200': "var(--ds-radius-200, 8px)",
353
+ 'radius.300': "var(--ds-radius-300, 12px)",
354
+ 'radius.400': "var(--ds-radius-400, 16px)",
355
355
  'radius.round': "var(--ds-radius-round, 50%)"
356
356
  };
357
357
 
package/dist/esm/helpers/responsive/constants.js CHANGED
@@ -1,6 +1,8 @@
1
1
  /**
2
2
  * Our internal configuration for breakpoints configuration.
3
3
  *
4
+ * These are `rem` based multiples.
5
+ *
4
6
  * @experimental Unsafe for consumption outside of the design system itself.
5
7
  */
6
8
  export var UNSAFE_BREAKPOINTS_CONFIG = {
@@ -8,50 +10,57 @@ export var UNSAFE_BREAKPOINTS_CONFIG = {
8
10
  xxs: {
9
11
  gridItemGutter: "var(--ds-space-200, 16px)",
10
12
  gridMargin: "var(--ds-space-200, 16px)",
11
- min: 0,
12
- max: 479
13
+ below: '0rem',
14
+ min: '0rem',
15
+ max: '29.998rem'
13
16
  },
14
17
  // phablet
15
18
  xs: {
16
19
  gridItemGutter: "var(--ds-space-200, 16px)",
17
20
  gridMargin: "var(--ds-space-200, 16px)",
18
- min: 480,
19
- max: 767
21
+ below: '29.998rem',
22
+ min: '30rem',
23
+ max: '47.998rem'
20
24
  },
21
25
  // tablet
22
26
  sm: {
23
27
  gridItemGutter: "var(--ds-space-200, 16px)",
24
28
  gridMargin: "var(--ds-space-300, 24px)",
25
- min: 768,
26
- max: 1023
29
+ below: '47.998rem',
30
+ min: '48rem',
31
+ max: '63.998rem'
27
32
  },
28
33
  // laptop desktop
29
34
  md: {
30
35
  gridItemGutter: "var(--ds-space-300, 24px)",
31
36
  gridMargin: "var(--ds-space-400, 32px)",
32
- min: 1024,
33
- max: 1439
37
+ below: '63.998rem',
38
+ min: '64rem',
39
+ max: '89.998rem'
34
40
  },
35
41
  // monitor
36
42
  lg: {
37
43
  gridItemGutter: "var(--ds-space-400, 32px)",
38
44
  gridMargin: "var(--ds-space-400, 32px)",
39
- min: 1440,
40
- max: 1767
45
+ below: '89.998rem',
46
+ min: '90rem',
47
+ max: '109.998rem'
41
48
  },
42
49
  // large high res
43
50
  xl: {
44
51
  gridItemGutter: "var(--ds-space-400, 32px)",
45
52
  gridMargin: "var(--ds-space-500, 40px)",
46
- min: 1768,
47
- max: 2159
53
+ below: '109.998rem',
54
+ min: '110rem',
55
+ max: '134.998rem'
48
56
  },
49
57
  // extra large high res
50
58
  xxl: {
51
59
  gridItemGutter: "var(--ds-space-500, 40px)",
52
60
  gridMargin: "var(--ds-space-500, 40px)",
53
- min: 2160,
54
- max: Number.MAX_SAFE_INTEGER
61
+ below: '134.998rem',
62
+ min: '135rem',
63
+ max: "".concat(Number.MAX_SAFE_INTEGER, "rem")
55
64
  }
56
65
  };
57
66
 
@@ -62,9 +71,7 @@ export var UNSAFE_BREAKPOINTS_CONFIG = {
62
71
  *
63
72
  * @experimental Unsafe for consumption outside of the design system itself.
64
73
  */
65
- export var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort(function (a, b) {
66
- return UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min;
67
- });
74
+ export var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG);
68
75
 
69
76
  /**
70
77
  * This is our smallest breakpoint with a few nuances to it:
package/dist/esm/helpers/responsive/media-helper.js CHANGED
@@ -1,11 +1,5 @@
1
1
  import { UNSAFE_BREAKPOINTS_CONFIG } from './constants';
2
2
 
3
- /**
4
- * To ensure min-width and max-width do both target at the same time, we subtract a value.
5
- * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
6
- */
7
- var BELOW_PRECISION = 0.02;
8
-
9
3
  /**
10
4
  * This is the full internal version. The import has been separated to only expose as-needed.
11
5
  */
@@ -20,37 +14,37 @@ var internalMedia = {
20
14
  *
21
15
  * Eg. this is `@media (min-width: 0px)`
22
16
  */
23
- xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px)"),
24
- xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px)"),
25
- sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px)"),
26
- md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, "px)"),
27
- lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px)"),
28
- xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px)"),
29
- xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px)")
17
+ xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ")"),
18
+ xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
19
+ sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
20
+ md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
21
+ lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
22
+ xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")"),
23
+ xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, ")")
30
24
  },
31
25
  below: {
32
26
  /**
33
27
  * A media query to target viewports below the min width of a given breakpoint.
34
- * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
28
+ * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0rem)`
35
29
  */
36
- xs: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION, "px)"),
37
- sm: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION, "px)"),
38
- md: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION, "px)"),
39
- lg: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION, "px)"),
40
- xl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION, "px)"),
41
- xxl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION, "px)")
30
+ xs: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.below, ")"),
31
+ sm: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.below, ")"),
32
+ md: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.below, ")"),
33
+ lg: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.below, ")"),
34
+ xl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.below, ")"),
35
+ xxl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.below, ")")
42
36
  },
43
37
  /**
44
38
  * A media query to target viewports exactly between the min and max of a given breakpoint.
45
39
  */
46
40
  only: {
47
- xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.max, "px)"),
48
- xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xs.max, "px)"),
49
- sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.sm.max, "px)"),
50
- md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.md.max, "px)"),
51
- lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.lg.max, "px)"),
52
- xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xl.max, "px)"),
53
- xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.max, "px)")
41
+ xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.max, ")"),
42
+ xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xs.max, ")"),
43
+ sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.sm.max, ")"),
44
+ md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.md.max, ")"),
45
+ lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.lg.max, ")"),
46
+ xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xl.max, ")"),
47
+ xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, ") and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.max, ")")
54
48
  }
55
49
  };
56
50
 
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -2,31 +2,31 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { css } from '@emotion/react';
3
3
  /**
4
4
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
5
- * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
5
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
6
6
  * @codegenId dimensions
7
7
  * @codegenCommand yarn codegen-styles
8
8
  * @codegenParams ["dimensions"]
9
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
9
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
10
10
  */
11
11
  export var dimensionMap = {
12
12
  '100%': '100%',
13
- 'size.100': '16px',
14
- 'size.200': '24px',
15
- 'size.300': '32px',
16
- 'size.400': '40px',
17
- 'size.500': '48px',
18
- 'size.600': '96px',
19
- 'size.1000': '192px'
13
+ 'size.100': '1rem',
14
+ 'size.200': '1.5rem',
15
+ 'size.300': '2rem',
16
+ 'size.400': '2.5rem',
17
+ 'size.500': '3rem',
18
+ 'size.600': '6rem',
19
+ 'size.1000': '12rem'
20
20
  };
21
21
  /**
22
22
  * @codegenEnd
23
23
  */
24
24
  /**
25
25
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
26
- * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
26
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
27
27
  * @codegenId spacing
28
28
  * @codegenCommand yarn codegen-styles
29
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
29
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
30
30
  */
31
31
  export var spaceMap = {
32
32
  'space.0': "var(--ds-space-0, 0px)",
@@ -253,13 +253,13 @@ export var fillMap = {
253
253
  */
254
254
  /**
255
255
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
256
- * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
256
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
257
257
  * @codegenId misc
258
258
  * @codegenCommand yarn codegen-styles
259
259
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
260
260
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
261
261
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
262
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
262
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
263
263
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
264
264
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
265
265
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -336,23 +336,23 @@ export var positionMap = {
336
336
  */
337
337
  /**
338
338
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
339
- * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
339
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
340
340
  * @codegenId border
341
341
  * @codegenCommand yarn codegen-styles
342
342
  * @codegenParams ["width", "radius"]
343
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
343
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
344
344
  */
345
345
  export var borderWidthMap = {
346
- 'width.0': "var(--ds-width-0, 0)",
347
- 'width.050': "var(--ds-width-050, 0.0625rem)",
348
- 'width.100': "var(--ds-width-100, 0.125rem)"
346
+ 'width.0': "var(--ds-width-0, 0px)",
347
+ 'width.050': "var(--ds-width-050, 1px)",
348
+ 'width.100': "var(--ds-width-100, 2px)"
349
349
  };
350
350
  export var borderRadiusMap = {
351
- 'radius.050': "var(--ds-radius-050, 0.125rem)",
352
- 'radius.100': "var(--ds-radius-100, 0.25rem)",
353
- 'radius.200': "var(--ds-radius-200, 0.5rem)",
354
- 'radius.300': "var(--ds-radius-300, 0.75rem)",
355
- 'radius.400': "var(--ds-radius-400, 1rem)",
351
+ 'radius.050': "var(--ds-radius-050, 2px)",
352
+ 'radius.100': "var(--ds-radius-100, 4px)",
353
+ 'radius.200': "var(--ds-radius-200, 8px)",
354
+ 'radius.300': "var(--ds-radius-300, 12px)",
355
+ 'radius.400': "var(--ds-radius-400, 16px)",
356
356
  'radius.round': "var(--ds-radius-round, 50%)"
357
357
  };
358
358
 
package/dist/types/helpers/responsive/constants.d.ts CHANGED
@@ -2,6 +2,8 @@ import type { Breakpoint, BreakpointConfig } from './types';
2
2
  /**
3
3
  * Our internal configuration for breakpoints configuration.
4
4
  *
5
+ * These are `rem` based multiples.
6
+ *
5
7
  * @experimental Unsafe for consumption outside of the design system itself.
6
8
  */
7
9
  export declare const UNSAFE_BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointConfig>;
package/dist/types/helpers/responsive/media-helper.d.ts CHANGED
@@ -10,25 +10,25 @@ export declare const UNSAFE_media: {
10
10
  *
11
11
  * Eg. this is `@media (min-width: 0px)`
12
12
  */
13
- readonly xxs: `@media (min-width: ${number}px)`;
14
- readonly xs: `@media (min-width: ${number}px)`;
15
- readonly sm: `@media (min-width: ${number}px)`;
16
- readonly md: `@media (min-width: ${number}px)`;
17
- readonly lg: `@media (min-width: ${number}px)`;
18
- readonly xl: `@media (min-width: ${number}px)`;
19
- readonly xxl: `@media (min-width: ${number}px)`;
13
+ readonly xxs: `@media (min-width: ${number}rem)`;
14
+ readonly xs: `@media (min-width: ${number}rem)`;
15
+ readonly sm: `@media (min-width: ${number}rem)`;
16
+ readonly md: `@media (min-width: ${number}rem)`;
17
+ readonly lg: `@media (min-width: ${number}rem)`;
18
+ readonly xl: `@media (min-width: ${number}rem)`;
19
+ readonly xxl: `@media (min-width: ${number}rem)`;
20
20
  };
21
21
  readonly below: {
22
22
  /**
23
23
  * A media query to target viewports below the min width of a given breakpoint.
24
- * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
24
+ * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0rem)`
25
25
  */
26
- readonly xs: `@media (max-width: ${number}px)`;
27
- readonly sm: `@media (max-width: ${number}px)`;
28
- readonly md: `@media (max-width: ${number}px)`;
29
- readonly lg: `@media (max-width: ${number}px)`;
30
- readonly xl: `@media (max-width: ${number}px)`;
31
- readonly xxl: `@media (max-width: ${number}px)`;
26
+ readonly xs: `@media (max-width: ${number}rem)`;
27
+ readonly sm: `@media (max-width: ${number}rem)`;
28
+ readonly md: `@media (max-width: ${number}rem)`;
29
+ readonly lg: `@media (max-width: ${number}rem)`;
30
+ readonly xl: `@media (max-width: ${number}rem)`;
31
+ readonly xxl: `@media (max-width: ${number}rem)`;
32
32
  };
33
33
  };
34
34
  /**
package/dist/types/helpers/responsive/types.d.ts CHANGED
@@ -39,9 +39,14 @@ export type BreakpointConfig = {
39
39
  /**
40
40
  * The min-width used in media queries
41
41
  */
42
- min: number;
42
+ min: `${number}rem`;
43
43
  /**
44
44
  * The max-width used in media queries
45
45
  */
46
- max: number;
46
+ max: `${number}rem`;
47
+ /**
48
+ * To ensure min-width and max-width do both target at the same time, we subtract a value.
49
+ * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
50
+ */
51
+ below: `${number}rem`;
47
52
  };
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -1,21 +1,21 @@
1
1
  import { SerializedStyles } from '@emotion/react';
2
2
  /**
3
3
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
- * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
4
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
5
5
  * @codegenId dimensions
6
6
  * @codegenCommand yarn codegen-styles
7
7
  * @codegenParams ["dimensions"]
8
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
8
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
9
9
  */
10
10
  export declare const dimensionMap: {
11
11
  readonly '100%': "100%";
12
- readonly 'size.100': "16px";
13
- readonly 'size.200': "24px";
14
- readonly 'size.300': "32px";
15
- readonly 'size.400': "40px";
16
- readonly 'size.500': "48px";
17
- readonly 'size.600': "96px";
18
- readonly 'size.1000': "192px";
12
+ readonly 'size.100': "1rem";
13
+ readonly 'size.200': "1.5rem";
14
+ readonly 'size.300': "2rem";
15
+ readonly 'size.400': "2.5rem";
16
+ readonly 'size.500': "3rem";
17
+ readonly 'size.600': "6rem";
18
+ readonly 'size.1000': "12rem";
19
19
  };
20
20
  type Dimension = keyof typeof dimensionMap;
21
21
  export type Width = Dimension;
@@ -39,10 +39,10 @@ export type MinInlineSize = Dimension;
39
39
  */
40
40
  /**
41
41
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
42
- * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
42
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
43
43
  * @codegenId spacing
44
44
  * @codegenCommand yarn codegen-styles
45
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
45
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
46
46
  */
47
47
  export declare const spaceMap: {
48
48
  'space.0': "var(--ds-space-0)";
@@ -275,13 +275,13 @@ export type Fill = keyof typeof fillMap;
275
275
  */
276
276
  /**
277
277
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
278
- * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
278
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
279
279
  * @codegenId misc
280
280
  * @codegenCommand yarn codegen-styles
281
281
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
282
282
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
283
283
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
284
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
284
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
285
285
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
286
286
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
287
287
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -370,11 +370,11 @@ export type Position = keyof typeof positionMap;
370
370
  */
371
371
  /**
372
372
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
373
- * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
373
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
374
374
  * @codegenId border
375
375
  * @codegenCommand yarn codegen-styles
376
376
  * @codegenParams ["width", "radius"]
377
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
377
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
378
378
  */
379
379
  export declare const borderWidthMap: {
380
380
  readonly 'width.0': "var(--ds-width-0)";
package/dist/types-ts4.5/helpers/responsive/constants.d.ts CHANGED
@@ -2,6 +2,8 @@ import type { Breakpoint, BreakpointConfig } from './types';
2
2
  /**
3
3
  * Our internal configuration for breakpoints configuration.
4
4
  *
5
+ * These are `rem` based multiples.
6
+ *
5
7
  * @experimental Unsafe for consumption outside of the design system itself.
6
8
  */
7
9
  export declare const UNSAFE_BREAKPOINTS_CONFIG: Record<Breakpoint, BreakpointConfig>;
package/dist/types-ts4.5/helpers/responsive/media-helper.d.ts CHANGED
@@ -10,25 +10,25 @@ export declare const UNSAFE_media: {
10
10
  *
11
11
  * Eg. this is `@media (min-width: 0px)`
12
12
  */
13
- readonly xxs: `@media (min-width: ${number}px)`;
14
- readonly xs: `@media (min-width: ${number}px)`;
15
- readonly sm: `@media (min-width: ${number}px)`;
16
- readonly md: `@media (min-width: ${number}px)`;
17
- readonly lg: `@media (min-width: ${number}px)`;
18
- readonly xl: `@media (min-width: ${number}px)`;
19
- readonly xxl: `@media (min-width: ${number}px)`;
13
+ readonly xxs: `@media (min-width: ${number}rem)`;
14
+ readonly xs: `@media (min-width: ${number}rem)`;
15
+ readonly sm: `@media (min-width: ${number}rem)`;
16
+ readonly md: `@media (min-width: ${number}rem)`;
17
+ readonly lg: `@media (min-width: ${number}rem)`;
18
+ readonly xl: `@media (min-width: ${number}rem)`;
19
+ readonly xxl: `@media (min-width: ${number}rem)`;
20
20
  };
21
21
  readonly below: {
22
22
  /**
23
23
  * A media query to target viewports below the min width of a given breakpoint.
24
- * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
24
+ * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0rem)`
25
25
  */
26
- readonly xs: `@media (max-width: ${number}px)`;
27
- readonly sm: `@media (max-width: ${number}px)`;
28
- readonly md: `@media (max-width: ${number}px)`;
29
- readonly lg: `@media (max-width: ${number}px)`;
30
- readonly xl: `@media (max-width: ${number}px)`;
31
- readonly xxl: `@media (max-width: ${number}px)`;
26
+ readonly xs: `@media (max-width: ${number}rem)`;
27
+ readonly sm: `@media (max-width: ${number}rem)`;
28
+ readonly md: `@media (max-width: ${number}rem)`;
29
+ readonly lg: `@media (max-width: ${number}rem)`;
30
+ readonly xl: `@media (max-width: ${number}rem)`;
31
+ readonly xxl: `@media (max-width: ${number}rem)`;
32
32
  };
33
33
  };
34
34
  /**
package/dist/types-ts4.5/helpers/responsive/types.d.ts CHANGED
@@ -39,9 +39,14 @@ export type BreakpointConfig = {
39
39
  /**
40
40
  * The min-width used in media queries
41
41
  */
42
- min: number;
42
+ min: `${number}rem`;
43
43
  /**
44
44
  * The max-width used in media queries
45
45
  */
46
- max: number;
46
+ max: `${number}rem`;
47
+ /**
48
+ * To ensure min-width and max-width do both target at the same time, we subtract a value.
49
+ * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
50
+ */
51
+ below: `${number}rem`;
47
52
  };
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -1,21 +1,21 @@
1
1
  import { SerializedStyles } from '@emotion/react';
2
2
  /**
3
3
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
4
- * @codegen <<SignedSource::7d4a8604dc454e30c0fec5c1330ea7c5>>
4
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
5
5
  * @codegenId dimensions
6
6
  * @codegenCommand yarn codegen-styles
7
7
  * @codegenParams ["dimensions"]
8
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
8
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
9
9
  */
10
10
  export declare const dimensionMap: {
11
11
  readonly '100%': "100%";
12
- readonly 'size.100': "16px";
13
- readonly 'size.200': "24px";
14
- readonly 'size.300': "32px";
15
- readonly 'size.400': "40px";
16
- readonly 'size.500': "48px";
17
- readonly 'size.600': "96px";
18
- readonly 'size.1000': "192px";
12
+ readonly 'size.100': "1rem";
13
+ readonly 'size.200': "1.5rem";
14
+ readonly 'size.300': "2rem";
15
+ readonly 'size.400': "2.5rem";
16
+ readonly 'size.500': "3rem";
17
+ readonly 'size.600': "6rem";
18
+ readonly 'size.1000': "12rem";
19
19
  };
20
20
  type Dimension = keyof typeof dimensionMap;
21
21
  export type Width = Dimension;
@@ -39,10 +39,10 @@ export type MinInlineSize = Dimension;
39
39
  */
40
40
  /**
41
41
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
42
- * @codegen <<SignedSource::9fbc4dfcd8f43f52bff6b3bb666397fe>>
42
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
43
43
  * @codegenId spacing
44
44
  * @codegenCommand yarn codegen-styles
45
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
45
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
46
46
  */
47
47
  export declare const spaceMap: {
48
48
  'space.0': "var(--ds-space-0)";
@@ -275,13 +275,13 @@ export type Fill = keyof typeof fillMap;
275
275
  */
276
276
  /**
277
277
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
278
- * @codegen <<SignedSource::64f7b08cdbce710fba3157594ea695a8>>
278
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
279
279
  * @codegenId misc
280
280
  * @codegenCommand yarn codegen-styles
281
281
  * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
282
282
  * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
283
283
  * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
284
- * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::dbad5eb9ef292d4ec59f90459a81e1d6>>
284
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
285
285
  * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
286
286
  * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
287
287
  * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
@@ -370,11 +370,11 @@ export type Position = keyof typeof positionMap;
370
370
  */
371
371
  /**
372
372
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
373
- * @codegen <<SignedSource::e3e1d54f37a0f8c524ccc5c8e22ad5bf>>
373
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
374
374
  * @codegenId border
375
375
  * @codegenCommand yarn codegen-styles
376
376
  * @codegenParams ["width", "radius"]
377
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::a4f70bd83edd3dd448c6eccda60abdf7>>
377
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
378
378
  */
379
379
  export declare const borderWidthMap: {
380
380
  readonly 'width.0': "var(--ds-width-0)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -94,7 +94,7 @@
94
94
  },
95
95
  "dependencies": {
96
96
  "@atlaskit/ds-lib": "^2.2.0",
97
- "@atlaskit/tokens": "^1.4.0",
97
+ "@atlaskit/tokens": "^1.5.0",
98
98
  "@babel/runtime": "^7.0.0",
99
99
  "@emotion/react": "^11.7.1",
100
100
  "@emotion/serialize": "^1.1.0"
@@ -115,16 +115,14 @@
115
115
  "@atlaskit/icon-object": "*",
116
116
  "@atlaskit/logo": "*",
117
117
  "@atlaskit/lozenge": "*",
118
- "@atlaskit/radio": "^5.5.0",
118
+ "@atlaskit/radio": "^5.6.0",
119
119
  "@atlaskit/range": "^7.1.0",
120
120
  "@atlaskit/ssr": "*",
121
- "@atlaskit/tag": "*",
122
121
  "@atlaskit/theme": "*",
123
122
  "@atlaskit/visual-regression": "*",
124
- "@atlaskit/webdriver-runner": "*",
125
123
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
126
124
  "@atlassian/codegen": "^0.1.0",
127
- "@atlassian/gemini-visual-regression": "^0.0.16",
125
+ "@atlassian/gemini-visual-regression": "^0.0.24",
128
126
  "@testing-library/react": "^12.1.5",
129
127
  "csstype": "^3.1.0",
130
128
  "prettier": "^2.8.0",
package/report.api.md CHANGED
@@ -327,13 +327,13 @@ type Dimension = keyof typeof dimensionMap;
327
327
  // @public
328
328
  const dimensionMap: {
329
329
  readonly '100%': '100%';
330
- readonly 'size.100': '16px';
331
- readonly 'size.200': '24px';
332
- readonly 'size.300': '32px';
333
- readonly 'size.400': '40px';
334
- readonly 'size.500': '48px';
335
- readonly 'size.600': '96px';
336
- readonly 'size.1000': '192px';
330
+ readonly 'size.100': '1rem';
331
+ readonly 'size.200': '1.5rem';
332
+ readonly 'size.300': '2rem';
333
+ readonly 'size.400': '2.5rem';
334
+ readonly 'size.500': '3rem';
335
+ readonly 'size.600': '6rem';
336
+ readonly 'size.1000': '12rem';
337
337
  };
338
338
 
339
339
  // @public (undocumented)
package/scripts/codegen-file-templates/dimensions.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  export const dimensionMap = {
2
2
  '100%': '100%',
3
- 'size.100': '16px',
4
- 'size.200': '24px',
5
- 'size.300': '32px',
6
- 'size.400': '40px',
7
- 'size.500': '48px',
8
- 'size.600': '96px',
9
- 'size.1000': '192px',
3
+ 'size.100': '1rem',
4
+ 'size.200': '1.5rem',
5
+ 'size.300': '2rem',
6
+ 'size.400': '2.5rem',
7
+ 'size.500': '3rem',
8
+ 'size.600': '6rem',
9
+ 'size.1000': '12rem',
10
10
  } as const;
11
11
  type Dimension = keyof typeof dimensionMap;
12
12
 
package/scripts/spacing-codegen-template.tsx CHANGED
@@ -10,7 +10,7 @@ const spaceTokens = tokens
10
10
  .filter(token => token.name.startsWith(spacingTokenPrefix))
11
11
  .map(t => ({
12
12
  name: t.name,
13
- fallback: t.attributes.pixelValue!,
13
+ fallback: t.value,
14
14
  }));
15
15
 
16
16
  export const createSpacingStylesFromTemplate = () => {
package/tmp/api-report-tmp.d.ts CHANGED
@@ -289,13 +289,13 @@ type Dimension = keyof typeof dimensionMap;
289
289
  // @public
290
290
  const dimensionMap: {
291
291
  readonly '100%': "100%";
292
- readonly 'size.100': "16px";
293
- readonly 'size.200': "24px";
294
- readonly 'size.300': "32px";
295
- readonly 'size.400': "40px";
296
- readonly 'size.500': "48px";
297
- readonly 'size.600': "96px";
298
- readonly 'size.1000': "192px";
292
+ readonly 'size.100': "1rem";
293
+ readonly 'size.200': "1.5rem";
294
+ readonly 'size.300': "2rem";
295
+ readonly 'size.400': "2.5rem";
296
+ readonly 'size.500': "3rem";
297
+ readonly 'size.600': "6rem";
298
+ readonly 'size.1000': "12rem";
299
299
  };
300
300
 
301
301
  // @public (undocumented)