@atlaskit/ds-explorations 1.6.4 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/components/box.partial.js +48 -45
  3. package/dist/cjs/components/inline.partial.js +15 -15
  4. package/dist/cjs/components/interaction-surface.partial.js +2 -2
  5. package/dist/cjs/components/stack.partial.js +15 -15
  6. package/dist/cjs/components/text.partial.js +88 -58
  7. package/dist/cjs/internal/color-map.js +2 -2
  8. package/dist/cjs/internal/spacing-scale.js +2 -2
  9. package/dist/cjs/version.json +1 -1
  10. package/dist/es2019/components/box.partial.js +48 -45
  11. package/dist/es2019/components/inline.partial.js +15 -15
  12. package/dist/es2019/components/interaction-surface.partial.js +2 -2
  13. package/dist/es2019/components/stack.partial.js +15 -15
  14. package/dist/es2019/components/text.partial.js +87 -57
  15. package/dist/es2019/internal/color-map.js +2 -2
  16. package/dist/es2019/internal/spacing-scale.js +2 -2
  17. package/dist/es2019/version.json +1 -1
  18. package/dist/esm/components/box.partial.js +48 -45
  19. package/dist/esm/components/inline.partial.js +15 -15
  20. package/dist/esm/components/interaction-surface.partial.js +2 -2
  21. package/dist/esm/components/stack.partial.js +15 -15
  22. package/dist/esm/components/text.partial.js +87 -57
  23. package/dist/esm/internal/color-map.js +2 -2
  24. package/dist/esm/internal/spacing-scale.js +2 -2
  25. package/dist/esm/version.json +1 -1
  26. package/dist/types/components/box.partial.d.ts +46 -45
  27. package/dist/types/components/inline.partial.d.ts +15 -15
  28. package/dist/types/components/stack.partial.d.ts +15 -15
  29. package/dist/types/components/text.partial.d.ts +45 -25
  30. package/dist/types/internal/color-map.d.ts +2 -2
  31. package/dist/types/internal/spacing-scale.d.ts +2 -2
  32. package/examples/00-basic.tsx +3 -3
  33. package/examples/01-box.tsx +18 -18
  34. package/examples/02-text-advanced.tsx +9 -9
  35. package/examples/02-text.tsx +36 -16
  36. package/examples/03-stack.tsx +26 -26
  37. package/examples/04-inline.tsx +26 -26
  38. package/examples/05-badge.tsx +2 -2
  39. package/examples/06-section-message.tsx +6 -6
  40. package/examples/07-comment.tsx +5 -5
  41. package/examples/08-lozenge.tsx +4 -4
  42. package/examples/99-interactions.tsx +16 -16
  43. package/package.json +1 -1
  44. package/report.api.md +90 -85
  45. package/scripts/codegen-styles.tsx +27 -0
  46. package/scripts/spacing-codegen-template.tsx +3 -4
  47. package/scripts/spacing-scale-template.tsx +3 -5
  48. package/scripts/typography-codegen-template.tsx +80 -0
  49. package/src/components/__tests__/unit/inline.test.tsx +3 -3
  50. package/src/components/__tests__/unit/stack.test.tsx +2 -2
  51. package/src/components/__tests__/unit/text.test.tsx +3 -3
  52. package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-block-should-match-snapshot-1-snap.png +2 -2
  53. package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-inline-should-match-snapshot-1-snap.png +2 -2
  54. package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-should-match-snapshot-1-snap.png +2 -2
  55. package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-spacing-example-should-match-snapshot-1-snap.png +2 -2
  56. package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-spacing-example-should-match-snapshot-1-snap.png +2 -2
  57. package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-font-sizes-should-match-snapshot-1-snap.png +2 -2
  58. package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-font-weights-should-match-snapshot-1-snap.png +2 -2
  59. package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-line-heights-should-match-snapshot-1-snap.png +2 -2
  60. package/src/components/box.partial.tsx +46 -45
  61. package/src/components/inline.partial.tsx +15 -15
  62. package/src/components/interaction-surface.partial.tsx +2 -2
  63. package/src/components/stack.partial.tsx +15 -15
  64. package/src/components/text.partial.tsx +103 -34
  65. package/src/internal/color-map.tsx +2 -2
  66. package/src/internal/spacing-scale.tsx +15 -15
  67. package/tmp/api-report-tmp.d.ts +90 -85
package/tmp/api-report-tmp.d.ts CHANGED
@@ -173,20 +173,20 @@ type ColumnGap = keyof typeof columnGapMap;
173
173
 
174
174
  // @public
175
175
  const columnGapMap: {
176
- 'scale.0': SerializedStyles;
177
- 'scale.025': SerializedStyles;
178
- 'scale.050': SerializedStyles;
179
- 'scale.075': SerializedStyles;
180
- 'scale.100': SerializedStyles;
181
- 'scale.1000': SerializedStyles;
182
- 'scale.150': SerializedStyles;
183
- 'scale.200': SerializedStyles;
184
- 'scale.250': SerializedStyles;
185
- 'scale.300': SerializedStyles;
186
- 'scale.400': SerializedStyles;
187
- 'scale.500': SerializedStyles;
188
- 'scale.600': SerializedStyles;
189
- 'scale.800': SerializedStyles;
176
+ 'space.0': SerializedStyles;
177
+ 'space.025': SerializedStyles;
178
+ 'space.050': SerializedStyles;
179
+ 'space.075': SerializedStyles;
180
+ 'space.100': SerializedStyles;
181
+ 'space.1000': SerializedStyles;
182
+ 'space.150': SerializedStyles;
183
+ 'space.200': SerializedStyles;
184
+ 'space.250': SerializedStyles;
185
+ 'space.300': SerializedStyles;
186
+ 'space.400': SerializedStyles;
187
+ 'space.500': SerializedStyles;
188
+ 'space.600': SerializedStyles;
189
+ 'space.800': SerializedStyles;
190
190
  };
191
191
 
192
192
  // @public (undocumented)
@@ -198,6 +198,7 @@ const displayMap: {
198
198
  inline: SerializedStyles;
199
199
  flex: SerializedStyles;
200
200
  inlineFlex: SerializedStyles;
201
+ inlineBlock: SerializedStyles;
201
202
  };
202
203
 
203
204
  // @public
@@ -305,11 +306,16 @@ const flexWrapMap_2: {
305
306
  // @public (undocumented)
306
307
  type FontSize = keyof typeof fontSizeMap;
307
308
 
308
- // @public (undocumented)
309
+ // @public
309
310
  const fontSizeMap: {
310
- '11px': SerializedStyles;
311
- '12px': SerializedStyles;
312
- '14px': SerializedStyles;
311
+ 'size.050': SerializedStyles;
312
+ 'size.075': SerializedStyles;
313
+ 'size.100': SerializedStyles;
314
+ 'size.200': SerializedStyles;
315
+ 'size.300': SerializedStyles;
316
+ 'size.400': SerializedStyles;
317
+ 'size.500': SerializedStyles;
318
+ 'size.600': SerializedStyles;
313
319
  };
314
320
 
315
321
  // @public (undocumented)
@@ -317,10 +323,10 @@ type FontWeight = keyof typeof fontWeightMap;
317
323
 
318
324
  // @public (undocumented)
319
325
  const fontWeightMap: {
320
- '400': SerializedStyles;
321
- '500': SerializedStyles;
322
- '600': SerializedStyles;
323
- '700': SerializedStyles;
326
+ bold: SerializedStyles;
327
+ medium: SerializedStyles;
328
+ regular: SerializedStyles;
329
+ semibold: SerializedStyles;
324
330
  };
325
331
 
326
332
  // @public (undocumented)
@@ -370,13 +376,12 @@ type LineHeight = keyof typeof lineHeightMap;
370
376
 
371
377
  // @public (undocumented)
372
378
  const lineHeightMap: {
373
- '12px': SerializedStyles;
374
- '16px': SerializedStyles;
375
- '20px': SerializedStyles;
376
- '24px': SerializedStyles;
377
- '28px': SerializedStyles;
378
- '32px': SerializedStyles;
379
- '40px': SerializedStyles;
379
+ 'lineHeight.100': SerializedStyles;
380
+ 'lineHeight.200': SerializedStyles;
381
+ 'lineHeight.300': SerializedStyles;
382
+ 'lineHeight.400': SerializedStyles;
383
+ 'lineHeight.500': SerializedStyles;
384
+ 'lineHeight.600': SerializedStyles;
380
385
  };
381
386
 
382
387
  // @public (undocumented)
@@ -396,20 +401,20 @@ type PaddingBlock = keyof typeof paddingBlockMap;
396
401
 
397
402
  // @public (undocumented)
398
403
  const paddingBlockMap: {
399
- 'scale.0': SerializedStyles;
400
- 'scale.025': SerializedStyles;
401
- 'scale.050': SerializedStyles;
402
- 'scale.075': SerializedStyles;
403
- 'scale.100': SerializedStyles;
404
- 'scale.1000': SerializedStyles;
405
- 'scale.150': SerializedStyles;
406
- 'scale.200': SerializedStyles;
407
- 'scale.250': SerializedStyles;
408
- 'scale.300': SerializedStyles;
409
- 'scale.400': SerializedStyles;
410
- 'scale.500': SerializedStyles;
411
- 'scale.600': SerializedStyles;
412
- 'scale.800': SerializedStyles;
404
+ 'space.0': SerializedStyles;
405
+ 'space.025': SerializedStyles;
406
+ 'space.050': SerializedStyles;
407
+ 'space.075': SerializedStyles;
408
+ 'space.100': SerializedStyles;
409
+ 'space.1000': SerializedStyles;
410
+ 'space.150': SerializedStyles;
411
+ 'space.200': SerializedStyles;
412
+ 'space.250': SerializedStyles;
413
+ 'space.300': SerializedStyles;
414
+ 'space.400': SerializedStyles;
415
+ 'space.500': SerializedStyles;
416
+ 'space.600': SerializedStyles;
417
+ 'space.800': SerializedStyles;
413
418
  };
414
419
 
415
420
  // @public (undocumented)
@@ -417,38 +422,38 @@ type PaddingInline = keyof typeof paddingInlineMap;
417
422
 
418
423
  // @public (undocumented)
419
424
  const paddingInlineMap: {
420
- 'scale.0': SerializedStyles;
421
- 'scale.025': SerializedStyles;
422
- 'scale.050': SerializedStyles;
423
- 'scale.075': SerializedStyles;
424
- 'scale.100': SerializedStyles;
425
- 'scale.1000': SerializedStyles;
426
- 'scale.150': SerializedStyles;
427
- 'scale.200': SerializedStyles;
428
- 'scale.250': SerializedStyles;
429
- 'scale.300': SerializedStyles;
430
- 'scale.400': SerializedStyles;
431
- 'scale.500': SerializedStyles;
432
- 'scale.600': SerializedStyles;
433
- 'scale.800': SerializedStyles;
425
+ 'space.0': SerializedStyles;
426
+ 'space.025': SerializedStyles;
427
+ 'space.050': SerializedStyles;
428
+ 'space.075': SerializedStyles;
429
+ 'space.100': SerializedStyles;
430
+ 'space.1000': SerializedStyles;
431
+ 'space.150': SerializedStyles;
432
+ 'space.200': SerializedStyles;
433
+ 'space.250': SerializedStyles;
434
+ 'space.300': SerializedStyles;
435
+ 'space.400': SerializedStyles;
436
+ 'space.500': SerializedStyles;
437
+ 'space.600': SerializedStyles;
438
+ 'space.800': SerializedStyles;
434
439
  };
435
440
 
436
441
  // @public
437
442
  const paddingMap: {
438
- 'scale.0': SerializedStyles;
439
- 'scale.025': SerializedStyles;
440
- 'scale.050': SerializedStyles;
441
- 'scale.075': SerializedStyles;
442
- 'scale.100': SerializedStyles;
443
- 'scale.1000': SerializedStyles;
444
- 'scale.150': SerializedStyles;
445
- 'scale.200': SerializedStyles;
446
- 'scale.250': SerializedStyles;
447
- 'scale.300': SerializedStyles;
448
- 'scale.400': SerializedStyles;
449
- 'scale.500': SerializedStyles;
450
- 'scale.600': SerializedStyles;
451
- 'scale.800': SerializedStyles;
443
+ 'space.0': SerializedStyles;
444
+ 'space.025': SerializedStyles;
445
+ 'space.050': SerializedStyles;
446
+ 'space.075': SerializedStyles;
447
+ 'space.100': SerializedStyles;
448
+ 'space.1000': SerializedStyles;
449
+ 'space.150': SerializedStyles;
450
+ 'space.200': SerializedStyles;
451
+ 'space.250': SerializedStyles;
452
+ 'space.300': SerializedStyles;
453
+ 'space.400': SerializedStyles;
454
+ 'space.500': SerializedStyles;
455
+ 'space.600': SerializedStyles;
456
+ 'space.800': SerializedStyles;
452
457
  };
453
458
 
454
459
  // @public (undocumented)
@@ -467,20 +472,20 @@ type RowGap = keyof typeof rowGapMap;
467
472
 
468
473
  // @public
469
474
  const rowGapMap: {
470
- 'scale.0': SerializedStyles;
471
- 'scale.025': SerializedStyles;
472
- 'scale.050': SerializedStyles;
473
- 'scale.075': SerializedStyles;
474
- 'scale.100': SerializedStyles;
475
- 'scale.1000': SerializedStyles;
476
- 'scale.150': SerializedStyles;
477
- 'scale.200': SerializedStyles;
478
- 'scale.250': SerializedStyles;
479
- 'scale.300': SerializedStyles;
480
- 'scale.400': SerializedStyles;
481
- 'scale.500': SerializedStyles;
482
- 'scale.600': SerializedStyles;
483
- 'scale.800': SerializedStyles;
475
+ 'space.0': SerializedStyles;
476
+ 'space.025': SerializedStyles;
477
+ 'space.050': SerializedStyles;
478
+ 'space.075': SerializedStyles;
479
+ 'space.100': SerializedStyles;
480
+ 'space.1000': SerializedStyles;
481
+ 'space.150': SerializedStyles;
482
+ 'space.200': SerializedStyles;
483
+ 'space.250': SerializedStyles;
484
+ 'space.300': SerializedStyles;
485
+ 'space.400': SerializedStyles;
486
+ 'space.500': SerializedStyles;
487
+ 'space.600': SerializedStyles;
488
+ 'space.800': SerializedStyles;
484
489
  };
485
490
 
486
491
  // @public (undocumented)