@atlaskit/primitives 0.12.1 → 0.12.3

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 (16) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/version.json +1 -1
  3. package/dist/cjs/xcss/style-maps.partial.js +15 -13
  4. package/dist/cjs/xcss/xcss.js +1 -0
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/es2019/xcss/style-maps.partial.js +15 -13
  7. package/dist/es2019/xcss/xcss.js +1 -0
  8. package/dist/esm/version.json +1 -1
  9. package/dist/esm/xcss/style-maps.partial.js +15 -13
  10. package/dist/esm/xcss/xcss.js +1 -0
  11. package/dist/types/xcss/style-maps.partial.d.ts +26 -23
  12. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +26 -23
  13. package/package.json +2 -2
  14. package/report.api.md +24 -19
  15. package/scripts/border-codegen-template.tsx +3 -3
  16. package/tmp/api-report-tmp.d.ts +24 -19
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 0.12.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`79e94411a9c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79e94411a9c) - Bump to account for regeneration of tokens artifacts.
8
+ - Updated dependencies
9
+
10
+ ## 0.12.2
11
+
12
+ ### Patch Changes
13
+
14
+ - [`e278a3b0ea9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e278a3b0ea9) - Allow loose auto completion and less strict types for some xcss properties.
15
+
3
16
  ## 0.12.1
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.1",
3
+ "version": "0.12.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -60,11 +60,11 @@ exports.spaceMap = spaceMap;
60
60
 
61
61
  /**
62
62
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
63
- * @codegen <<SignedSource::7d56840c81e052d4dc9e5ebb6a1a0053>>
63
+ * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
64
64
  * @codegenId colors
65
65
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
66
66
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
67
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
67
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
68
68
  */
69
69
  var borderColorMap = {
70
70
  'color.border': "var(--ds-border, #091e4221)",
@@ -367,25 +367,27 @@ exports.positionMap = positionMap;
367
367
 
368
368
  /**
369
369
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
370
- * @codegen <<SignedSource::290c3673c7e8302a6517c5004ca82979>>
370
+ * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
371
371
  * @codegenId border
372
372
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
373
373
  * @codegenParams ["width", "radius"]
374
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
374
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
375
375
  */
376
376
  var borderWidthMap = {
377
- 'border.width.0': "var(--ds-width-0, 0px)",
378
- 'border.width.050': "var(--ds-width-050, 1px)",
379
- 'border.width.100': "var(--ds-width-100, 2px)"
377
+ 'border.width': "var(--ds-border-width, 1px)",
378
+ 'border.width.0': "var(--ds-border-width-0, 0px)",
379
+ 'border.width.050': "var(--ds-border-width-050, 1px)",
380
+ 'border.width.100': "var(--ds-border-width-100, 2px)"
380
381
  };
381
382
  exports.borderWidthMap = borderWidthMap;
382
383
  var borderRadiusMap = {
383
- 'border.radius.050': "var(--ds-radius-050, 2px)",
384
- 'border.radius.100': "var(--ds-radius-100, 3px)",
385
- 'border.radius.200': "var(--ds-radius-200, 8px)",
386
- 'border.radius.300': "var(--ds-radius-300, 12px)",
387
- 'border.radius.400': "var(--ds-radius-400, 16px)",
388
- 'border.radius.round': "var(--ds-radius-round, 50%)"
384
+ 'border.radius.050': "var(--ds-border-radius-050, 2px)",
385
+ 'border.radius': "var(--ds-border-radius, 3px)",
386
+ 'border.radius.100': "var(--ds-border-radius-100, 3px)",
387
+ 'border.radius.200': "var(--ds-border-radius-200, 8px)",
388
+ 'border.radius.300': "var(--ds-border-radius-300, 12px)",
389
+ 'border.radius.400': "var(--ds-border-radius-400, 16px)",
390
+ 'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
389
391
  };
390
392
 
391
393
  /**
package/dist/cjs/xcss/xcss.js CHANGED
@@ -117,6 +117,7 @@ var transformStyles = function transformStyles(styleObj) {
117
117
  return;
118
118
  }
119
119
  if (reMediaQuery.test(key)) {
120
+ // @ts-expect-error
120
121
  styleObj[key] = transformStyles(value);
121
122
  return;
122
123
  }
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.1",
3
+ "version": "0.12.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -48,11 +48,11 @@ export const spaceMap = {
48
48
  */
49
49
  /**
50
50
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
51
- * @codegen <<SignedSource::7d56840c81e052d4dc9e5ebb6a1a0053>>
51
+ * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
52
52
  * @codegenId colors
53
53
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
54
54
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
55
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
55
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
56
56
  */
57
57
  export const borderColorMap = {
58
58
  'color.border': "var(--ds-border, #091e4221)",
@@ -336,24 +336,26 @@ export const positionMap = {
336
336
  */
337
337
  /**
338
338
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
339
- * @codegen <<SignedSource::290c3673c7e8302a6517c5004ca82979>>
339
+ * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
340
340
  * @codegenId border
341
341
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
342
342
  * @codegenParams ["width", "radius"]
343
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
343
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
344
344
  */
345
345
  export const borderWidthMap = {
346
- 'border.width.0': "var(--ds-width-0, 0px)",
347
- 'border.width.050': "var(--ds-width-050, 1px)",
348
- 'border.width.100': "var(--ds-width-100, 2px)"
346
+ 'border.width': "var(--ds-border-width, 1px)",
347
+ 'border.width.0': "var(--ds-border-width-0, 0px)",
348
+ 'border.width.050': "var(--ds-border-width-050, 1px)",
349
+ 'border.width.100': "var(--ds-border-width-100, 2px)"
349
350
  };
350
351
  export const borderRadiusMap = {
351
- 'border.radius.050': "var(--ds-radius-050, 2px)",
352
- 'border.radius.100': "var(--ds-radius-100, 3px)",
353
- 'border.radius.200': "var(--ds-radius-200, 8px)",
354
- 'border.radius.300': "var(--ds-radius-300, 12px)",
355
- 'border.radius.400': "var(--ds-radius-400, 16px)",
356
- 'border.radius.round': "var(--ds-radius-round, 50%)"
352
+ 'border.radius.050': "var(--ds-border-radius-050, 2px)",
353
+ 'border.radius': "var(--ds-border-radius, 3px)",
354
+ 'border.radius.100': "var(--ds-border-radius-100, 3px)",
355
+ 'border.radius.200': "var(--ds-border-radius-200, 8px)",
356
+ 'border.radius.300': "var(--ds-border-radius-300, 12px)",
357
+ 'border.radius.400': "var(--ds-border-radius-400, 16px)",
358
+ 'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
357
359
  };
358
360
 
359
361
  /**
package/dist/es2019/xcss/xcss.js CHANGED
@@ -97,6 +97,7 @@ const transformStyles = styleObj => {
97
97
  return;
98
98
  }
99
99
  if (reMediaQuery.test(key)) {
100
+ // @ts-expect-error
100
101
  styleObj[key] = transformStyles(value);
101
102
  return;
102
103
  }
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.1",
3
+ "version": "0.12.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -49,11 +49,11 @@ export var spaceMap = {
49
49
  */
50
50
  /**
51
51
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
52
- * @codegen <<SignedSource::7d56840c81e052d4dc9e5ebb6a1a0053>>
52
+ * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
53
53
  * @codegenId colors
54
54
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
55
55
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
56
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
56
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
57
57
  */
58
58
  export var borderColorMap = {
59
59
  'color.border': "var(--ds-border, #091e4221)",
@@ -337,24 +337,26 @@ export var positionMap = {
337
337
  */
338
338
  /**
339
339
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
340
- * @codegen <<SignedSource::290c3673c7e8302a6517c5004ca82979>>
340
+ * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
341
341
  * @codegenId border
342
342
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
343
343
  * @codegenParams ["width", "radius"]
344
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
344
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
345
345
  */
346
346
  export var borderWidthMap = {
347
- 'border.width.0': "var(--ds-width-0, 0px)",
348
- 'border.width.050': "var(--ds-width-050, 1px)",
349
- 'border.width.100': "var(--ds-width-100, 2px)"
347
+ 'border.width': "var(--ds-border-width, 1px)",
348
+ 'border.width.0': "var(--ds-border-width-0, 0px)",
349
+ 'border.width.050': "var(--ds-border-width-050, 1px)",
350
+ 'border.width.100': "var(--ds-border-width-100, 2px)"
350
351
  };
351
352
  export var borderRadiusMap = {
352
- 'border.radius.050': "var(--ds-radius-050, 2px)",
353
- 'border.radius.100': "var(--ds-radius-100, 3px)",
354
- 'border.radius.200': "var(--ds-radius-200, 8px)",
355
- 'border.radius.300': "var(--ds-radius-300, 12px)",
356
- 'border.radius.400': "var(--ds-radius-400, 16px)",
357
- 'border.radius.round': "var(--ds-radius-round, 50%)"
353
+ 'border.radius.050': "var(--ds-border-radius-050, 2px)",
354
+ 'border.radius': "var(--ds-border-radius, 3px)",
355
+ 'border.radius.100': "var(--ds-border-radius-100, 3px)",
356
+ 'border.radius.200': "var(--ds-border-radius-200, 8px)",
357
+ 'border.radius.300': "var(--ds-border-radius-300, 12px)",
358
+ 'border.radius.400': "var(--ds-border-radius-400, 16px)",
359
+ 'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
358
360
  };
359
361
 
360
362
  /**
package/dist/esm/xcss/xcss.js CHANGED
@@ -108,6 +108,7 @@ var transformStyles = function transformStyles(styleObj) {
108
108
  return;
109
109
  }
110
110
  if (reMediaQuery.test(key)) {
111
+ // @ts-expect-error
111
112
  styleObj[key] = transformStyles(value);
112
113
  return;
113
114
  }
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -66,11 +66,11 @@ export type Space = keyof typeof spaceMap;
66
66
  */
67
67
  /**
68
68
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
69
- * @codegen <<SignedSource::7d56840c81e052d4dc9e5ebb6a1a0053>>
69
+ * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
70
70
  * @codegenId colors
71
71
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
72
72
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
73
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
73
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
74
74
  */
75
75
  export declare const borderColorMap: {
76
76
  readonly 'color.border': "var(--ds-border)";
@@ -371,30 +371,33 @@ export type Position = keyof typeof positionMap;
371
371
  */
372
372
  /**
373
373
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
374
- * @codegen <<SignedSource::290c3673c7e8302a6517c5004ca82979>>
374
+ * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
375
375
  * @codegenId border
376
376
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
377
377
  * @codegenParams ["width", "radius"]
378
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
378
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
379
379
  */
380
380
  export declare const borderWidthMap: {
381
- readonly 'border.width.0': "var(--ds-width-0)";
382
- readonly 'border.width.050': "var(--ds-width-050)";
383
- readonly 'border.width.100': "var(--ds-width-100)";
381
+ readonly 'border.width': "var(--ds-border-width)";
382
+ readonly 'border.width.0': "var(--ds-border-width-0)";
383
+ readonly 'border.width.050': "var(--ds-border-width-050)";
384
+ readonly 'border.width.100': "var(--ds-border-width-100)";
384
385
  };
385
386
  export type BorderWidth = keyof typeof borderWidthMap;
386
387
  export declare const borderRadiusMap: {
387
- readonly 'border.radius.050': "var(--ds-radius-050)";
388
- readonly 'border.radius.100': "var(--ds-radius-100)";
389
- readonly 'border.radius.200': "var(--ds-radius-200)";
390
- readonly 'border.radius.300': "var(--ds-radius-300)";
391
- readonly 'border.radius.400': "var(--ds-radius-400)";
392
- readonly 'border.radius.round': "var(--ds-radius-round)";
388
+ readonly 'border.radius.050': "var(--ds-border-radius-050)";
389
+ readonly 'border.radius': "var(--ds-border-radius)";
390
+ readonly 'border.radius.100': "var(--ds-border-radius-100)";
391
+ readonly 'border.radius.200': "var(--ds-border-radius-200)";
392
+ readonly 'border.radius.300': "var(--ds-border-radius-300)";
393
+ readonly 'border.radius.400': "var(--ds-border-radius-400)";
394
+ readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
393
395
  };
394
396
  export type BorderRadius = keyof typeof borderRadiusMap;
395
397
  /**
396
398
  * @codegenEnd
397
399
  */
400
+ type AutoComplete<T extends string> = T | Omit<string, T>;
398
401
  export type TokenisedProps = {
399
402
  alignSelf?: AlignSelf;
400
403
  backgroundColor?: BackgroundColor;
@@ -414,7 +417,7 @@ export type TokenisedProps = {
414
417
  flexGrow?: FlexGrow;
415
418
  flexShrink?: FlexShrink;
416
419
  gap?: Space;
417
- height?: Height;
420
+ height?: AutoComplete<Height>;
418
421
  inlineSize?: InlineSize;
419
422
  inset?: Space;
420
423
  insetBlock?: Space;
@@ -424,14 +427,14 @@ export type TokenisedProps = {
424
427
  insetInlineEnd?: Space;
425
428
  insetInlineStart?: Space;
426
429
  left?: Left;
427
- maxBlockSize?: MaxBlockSize;
428
- maxHeight?: MaxHeight;
429
- maxInlineSize?: MaxInlineSize;
430
- maxWidth?: MaxWidth;
431
- minBlockSize?: MinBlockSize;
432
- minHeight?: MinHeight;
433
- minInlineSize?: MinInlineSize;
434
- minWidth?: MinWidth;
430
+ maxBlockSize?: AutoComplete<MaxBlockSize>;
431
+ maxHeight?: AutoComplete<MaxHeight>;
432
+ maxInlineSize?: AutoComplete<MaxInlineSize>;
433
+ maxWidth?: AutoComplete<MaxWidth>;
434
+ minBlockSize?: AutoComplete<MinBlockSize>;
435
+ minHeight?: AutoComplete<MinHeight>;
436
+ minInlineSize?: AutoComplete<MinInlineSize>;
437
+ minWidth?: AutoComplete<MinWidth>;
435
438
  outlineColor?: BorderColor;
436
439
  outlineOffset?: Space;
437
440
  outlineWidth?: BorderWidth;
@@ -449,7 +452,7 @@ export type TokenisedProps = {
449
452
  right?: Right;
450
453
  rowGap?: Space;
451
454
  top?: Top;
452
- width?: Width;
455
+ width?: AutoComplete<Width>;
453
456
  zIndex?: Layer;
454
457
  };
455
458
  declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -66,11 +66,11 @@ export type Space = keyof typeof spaceMap;
66
66
  */
67
67
  /**
68
68
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
69
- * @codegen <<SignedSource::7d56840c81e052d4dc9e5ebb6a1a0053>>
69
+ * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
70
70
  * @codegenId colors
71
71
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
72
72
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
73
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
73
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
74
74
  */
75
75
  export declare const borderColorMap: {
76
76
  readonly 'color.border': "var(--ds-border)";
@@ -371,30 +371,33 @@ export type Position = keyof typeof positionMap;
371
371
  */
372
372
  /**
373
373
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
374
- * @codegen <<SignedSource::290c3673c7e8302a6517c5004ca82979>>
374
+ * @codegen <<SignedSource::cc9d48c89e323c87a3a00966f631120f>>
375
375
  * @codegenId border
376
376
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
377
377
  * @codegenParams ["width", "radius"]
378
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
378
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::f2aa6660594ff30e42a666fb87655052>>
379
379
  */
380
380
  export declare const borderWidthMap: {
381
- readonly 'border.width.0': "var(--ds-width-0)";
382
- readonly 'border.width.050': "var(--ds-width-050)";
383
- readonly 'border.width.100': "var(--ds-width-100)";
381
+ readonly 'border.width': "var(--ds-border-width)";
382
+ readonly 'border.width.0': "var(--ds-border-width-0)";
383
+ readonly 'border.width.050': "var(--ds-border-width-050)";
384
+ readonly 'border.width.100': "var(--ds-border-width-100)";
384
385
  };
385
386
  export type BorderWidth = keyof typeof borderWidthMap;
386
387
  export declare const borderRadiusMap: {
387
- readonly 'border.radius.050': "var(--ds-radius-050)";
388
- readonly 'border.radius.100': "var(--ds-radius-100)";
389
- readonly 'border.radius.200': "var(--ds-radius-200)";
390
- readonly 'border.radius.300': "var(--ds-radius-300)";
391
- readonly 'border.radius.400': "var(--ds-radius-400)";
392
- readonly 'border.radius.round': "var(--ds-radius-round)";
388
+ readonly 'border.radius.050': "var(--ds-border-radius-050)";
389
+ readonly 'border.radius': "var(--ds-border-radius)";
390
+ readonly 'border.radius.100': "var(--ds-border-radius-100)";
391
+ readonly 'border.radius.200': "var(--ds-border-radius-200)";
392
+ readonly 'border.radius.300': "var(--ds-border-radius-300)";
393
+ readonly 'border.radius.400': "var(--ds-border-radius-400)";
394
+ readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
393
395
  };
394
396
  export type BorderRadius = keyof typeof borderRadiusMap;
395
397
  /**
396
398
  * @codegenEnd
397
399
  */
400
+ type AutoComplete<T extends string> = T | Omit<string, T>;
398
401
  export type TokenisedProps = {
399
402
  alignSelf?: AlignSelf;
400
403
  backgroundColor?: BackgroundColor;
@@ -414,7 +417,7 @@ export type TokenisedProps = {
414
417
  flexGrow?: FlexGrow;
415
418
  flexShrink?: FlexShrink;
416
419
  gap?: Space;
417
- height?: Height;
420
+ height?: AutoComplete<Height>;
418
421
  inlineSize?: InlineSize;
419
422
  inset?: Space;
420
423
  insetBlock?: Space;
@@ -424,14 +427,14 @@ export type TokenisedProps = {
424
427
  insetInlineEnd?: Space;
425
428
  insetInlineStart?: Space;
426
429
  left?: Left;
427
- maxBlockSize?: MaxBlockSize;
428
- maxHeight?: MaxHeight;
429
- maxInlineSize?: MaxInlineSize;
430
- maxWidth?: MaxWidth;
431
- minBlockSize?: MinBlockSize;
432
- minHeight?: MinHeight;
433
- minInlineSize?: MinInlineSize;
434
- minWidth?: MinWidth;
430
+ maxBlockSize?: AutoComplete<MaxBlockSize>;
431
+ maxHeight?: AutoComplete<MaxHeight>;
432
+ maxInlineSize?: AutoComplete<MaxInlineSize>;
433
+ maxWidth?: AutoComplete<MaxWidth>;
434
+ minBlockSize?: AutoComplete<MinBlockSize>;
435
+ minHeight?: AutoComplete<MinHeight>;
436
+ minInlineSize?: AutoComplete<MinInlineSize>;
437
+ minWidth?: AutoComplete<MinWidth>;
435
438
  outlineColor?: BorderColor;
436
439
  outlineOffset?: Space;
437
440
  outlineWidth?: BorderWidth;
@@ -449,7 +452,7 @@ export type TokenisedProps = {
449
452
  right?: Right;
450
453
  rowGap?: Space;
451
454
  top?: Top;
452
- width?: Width;
455
+ width?: AutoComplete<Width>;
453
456
  zIndex?: Layer;
454
457
  };
455
458
  declare const spacingProperties: readonly [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.1",
3
+ "version": "0.12.3",
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.5.0",
97
+ "@atlaskit/tokens": "^1.6.0",
98
98
  "@babel/runtime": "^7.0.0",
99
99
  "@emotion/react": "^11.7.1",
100
100
  "@emotion/serialize": "^1.1.0"
package/report.api.md CHANGED
@@ -77,6 +77,9 @@ type As =
77
77
  | 'span'
78
78
  | 'ul';
79
79
 
80
+ // @public (undocumented)
81
+ type AutoComplete<T extends string> = Omit<string, T> | T;
82
+
80
83
  // @public (undocumented)
81
84
  type BackgroundColor = keyof typeof backgroundColorMap;
82
85
 
@@ -255,12 +258,13 @@ type BorderRadius = keyof typeof borderRadiusMap;
255
258
 
256
259
  // @public (undocumented)
257
260
  const borderRadiusMap: {
258
- readonly 'border.radius.050': 'var(--ds-radius-050)';
259
- readonly 'border.radius.100': 'var(--ds-radius-100)';
260
- readonly 'border.radius.200': 'var(--ds-radius-200)';
261
- readonly 'border.radius.300': 'var(--ds-radius-300)';
262
- readonly 'border.radius.400': 'var(--ds-radius-400)';
263
- readonly 'border.radius.round': 'var(--ds-radius-round)';
261
+ readonly 'border.radius.050': 'var(--ds-border-radius-050)';
262
+ readonly 'border.radius': 'var(--ds-border-radius)';
263
+ readonly 'border.radius.100': 'var(--ds-border-radius-100)';
264
+ readonly 'border.radius.200': 'var(--ds-border-radius-200)';
265
+ readonly 'border.radius.300': 'var(--ds-border-radius-300)';
266
+ readonly 'border.radius.400': 'var(--ds-border-radius-400)';
267
+ readonly 'border.radius.circle': 'var(--ds-border-radius-circle)';
264
268
  };
265
269
 
266
270
  // @public (undocumented)
@@ -277,9 +281,10 @@ type BorderWidth = keyof typeof borderWidthMap;
277
281
 
278
282
  // @public
279
283
  const borderWidthMap: {
280
- readonly 'border.width.0': 'var(--ds-width-0)';
281
- readonly 'border.width.050': 'var(--ds-width-050)';
282
- readonly 'border.width.100': 'var(--ds-width-100)';
284
+ readonly 'border.width': 'var(--ds-border-width)';
285
+ readonly 'border.width.0': 'var(--ds-border-width-0)';
286
+ readonly 'border.width.050': 'var(--ds-border-width-050)';
287
+ readonly 'border.width.100': 'var(--ds-border-width-100)';
283
288
  };
284
289
 
285
290
  // @public (undocumented)
@@ -711,7 +716,7 @@ type TokenisedProps = {
711
716
  flexGrow?: FlexGrow;
712
717
  flexShrink?: FlexShrink;
713
718
  gap?: Space;
714
- height?: Height;
719
+ height?: AutoComplete<Height>;
715
720
  inlineSize?: InlineSize;
716
721
  inset?: Space;
717
722
  insetBlock?: Space;
@@ -721,14 +726,14 @@ type TokenisedProps = {
721
726
  insetInlineEnd?: Space;
722
727
  insetInlineStart?: Space;
723
728
  left?: Left;
724
- maxBlockSize?: MaxBlockSize;
725
- maxHeight?: MaxHeight;
726
- maxInlineSize?: MaxInlineSize;
727
- maxWidth?: MaxWidth;
728
- minBlockSize?: MinBlockSize;
729
- minHeight?: MinHeight;
730
- minInlineSize?: MinInlineSize;
731
- minWidth?: MinWidth;
729
+ maxBlockSize?: AutoComplete<MaxBlockSize>;
730
+ maxHeight?: AutoComplete<MaxHeight>;
731
+ maxInlineSize?: AutoComplete<MaxInlineSize>;
732
+ maxWidth?: AutoComplete<MaxWidth>;
733
+ minBlockSize?: AutoComplete<MinBlockSize>;
734
+ minHeight?: AutoComplete<MinHeight>;
735
+ minInlineSize?: AutoComplete<MinInlineSize>;
736
+ minWidth?: AutoComplete<MinWidth>;
732
737
  outlineColor?: BorderColor;
733
738
  outlineOffset?: Space;
734
739
  outlineWidth?: BorderWidth;
@@ -746,7 +751,7 @@ type TokenisedProps = {
746
751
  right?: Right;
747
752
  rowGap?: Space;
748
753
  top?: Top;
749
- width?: Width;
754
+ width?: AutoComplete<Width>;
750
755
  zIndex?: Layer;
751
756
  };
752
757
 
package/scripts/border-codegen-template.tsx CHANGED
@@ -15,14 +15,14 @@ type Token = {
15
15
  const tokenStyles = {
16
16
  width: {
17
17
  objectName: 'borderWidth',
18
- filterPrefix: 'border.width.',
18
+ filterPrefix: 'border.width',
19
19
  cssProperty: 'borderWidth',
20
20
  filterFn: <T extends Token>(t: T) =>
21
21
  t.token.startsWith(tokenStyles.width.filterPrefix),
22
22
  },
23
23
  radius: {
24
24
  objectName: 'borderRadius',
25
- filterPrefix: 'border.radius.',
25
+ filterPrefix: 'border.radius',
26
26
  cssProperty: 'borderRadius',
27
27
  filterFn: <T extends Token>(t: T) =>
28
28
  t.token.startsWith(tokenStyles.radius.filterPrefix),
@@ -33,7 +33,7 @@ const activeTokens = tokens
33
33
  .filter(t => t.attributes.state !== 'deleted')
34
34
  .map(
35
35
  (t): Token => ({
36
- token: t.name,
36
+ token: t.cleanName,
37
37
  fallback: t.value === '4px' ? '3px' : (t.value as string),
38
38
  isDeprecated: t.attributes.state === 'deprecated',
39
39
  }),
package/tmp/api-report-tmp.d.ts CHANGED
@@ -53,6 +53,9 @@ type AllowedInlineStyles = 'backgroundColor' | 'padding';
53
53
  // @public (undocumented)
54
54
  type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
55
55
 
56
+ // @public (undocumented)
57
+ type AutoComplete<T extends string> = Omit<string, T> | T;
58
+
56
59
  // @public (undocumented)
57
60
  type BackgroundColor = keyof typeof backgroundColorMap;
58
61
 
@@ -226,12 +229,13 @@ type BorderRadius = keyof typeof borderRadiusMap;
226
229
 
227
230
  // @public (undocumented)
228
231
  const borderRadiusMap: {
229
- readonly 'border.radius.050': "var(--ds-radius-050)";
230
- readonly 'border.radius.100': "var(--ds-radius-100)";
231
- readonly 'border.radius.200': "var(--ds-radius-200)";
232
- readonly 'border.radius.300': "var(--ds-radius-300)";
233
- readonly 'border.radius.400': "var(--ds-radius-400)";
234
- readonly 'border.radius.round': "var(--ds-radius-round)";
232
+ readonly 'border.radius.050': "var(--ds-border-radius-050)";
233
+ readonly 'border.radius': "var(--ds-border-radius)";
234
+ readonly 'border.radius.100': "var(--ds-border-radius-100)";
235
+ readonly 'border.radius.200': "var(--ds-border-radius-200)";
236
+ readonly 'border.radius.300': "var(--ds-border-radius-300)";
237
+ readonly 'border.radius.400': "var(--ds-border-radius-400)";
238
+ readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
235
239
  };
236
240
 
237
241
  // @public (undocumented)
@@ -248,9 +252,10 @@ type BorderWidth = keyof typeof borderWidthMap;
248
252
 
249
253
  // @public
250
254
  const borderWidthMap: {
251
- readonly 'border.width.0': "var(--ds-width-0)";
252
- readonly 'border.width.050': "var(--ds-width-050)";
253
- readonly 'border.width.100': "var(--ds-width-100)";
255
+ readonly 'border.width': "var(--ds-border-width)";
256
+ readonly 'border.width.0': "var(--ds-border-width-0)";
257
+ readonly 'border.width.050': "var(--ds-border-width-050)";
258
+ readonly 'border.width.100': "var(--ds-border-width-100)";
254
259
  };
255
260
 
256
261
  // @public (undocumented)
@@ -632,7 +637,7 @@ type TokenisedProps = {
632
637
  flexGrow?: FlexGrow;
633
638
  flexShrink?: FlexShrink;
634
639
  gap?: Space;
635
- height?: Height;
640
+ height?: AutoComplete<Height>;
636
641
  inlineSize?: InlineSize;
637
642
  inset?: Space;
638
643
  insetBlock?: Space;
@@ -642,14 +647,14 @@ type TokenisedProps = {
642
647
  insetInlineEnd?: Space;
643
648
  insetInlineStart?: Space;
644
649
  left?: Left;
645
- maxBlockSize?: MaxBlockSize;
646
- maxHeight?: MaxHeight;
647
- maxInlineSize?: MaxInlineSize;
648
- maxWidth?: MaxWidth;
649
- minBlockSize?: MinBlockSize;
650
- minHeight?: MinHeight;
651
- minInlineSize?: MinInlineSize;
652
- minWidth?: MinWidth;
650
+ maxBlockSize?: AutoComplete<MaxBlockSize>;
651
+ maxHeight?: AutoComplete<MaxHeight>;
652
+ maxInlineSize?: AutoComplete<MaxInlineSize>;
653
+ maxWidth?: AutoComplete<MaxWidth>;
654
+ minBlockSize?: AutoComplete<MinBlockSize>;
655
+ minHeight?: AutoComplete<MinHeight>;
656
+ minInlineSize?: AutoComplete<MinInlineSize>;
657
+ minWidth?: AutoComplete<MinWidth>;
653
658
  outlineColor?: BorderColor;
654
659
  outlineOffset?: Space;
655
660
  outlineWidth?: BorderWidth;
@@ -667,7 +672,7 @@ type TokenisedProps = {
667
672
  right?: Right;
668
673
  rowGap?: Space;
669
674
  top?: Top;
670
- width?: Width;
675
+ width?: AutoComplete<Width>;
671
676
  zIndex?: Layer;
672
677
  };
673
678