@atlaskit/primitives 3.2.0 → 4.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 (23) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/constellation/text/code.mdx +1 -1
  3. package/constellation/text/examples.mdx +3 -3
  4. package/constellation/text/usage.mdx +2 -4
  5. package/dist/cjs/components/anchor.js +1 -1
  6. package/dist/cjs/components/pressable.js +1 -1
  7. package/dist/cjs/components/text.js +2 -5
  8. package/dist/cjs/xcss/style-maps.partial.js +8 -39
  9. package/dist/es2019/components/anchor.js +1 -1
  10. package/dist/es2019/components/pressable.js +1 -1
  11. package/dist/es2019/components/text.js +2 -6
  12. package/dist/es2019/xcss/style-maps.partial.js +7 -38
  13. package/dist/esm/components/anchor.js +1 -1
  14. package/dist/esm/components/pressable.js +1 -1
  15. package/dist/esm/components/text.js +2 -6
  16. package/dist/esm/xcss/style-maps.partial.js +7 -38
  17. package/dist/types/components/text.d.ts +12 -23
  18. package/dist/types/xcss/style-maps.partial.d.ts +9 -49
  19. package/dist/types-ts4.5/components/text.d.ts +12 -23
  20. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +9 -49
  21. package/package.json +2 -2
  22. package/scripts/codegen-styles.tsx +1 -1
  23. package/scripts/typography-codegen-template.tsx +34 -56
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 4.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#77148](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77148) [`473df43e816b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/473df43e816b) - Removed `ui` variant from Text component. The `body` variant should be used for all non-heading typography.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
3
13
  ## 3.2.0
4
14
 
5
15
  ### Minor Changes
package/constellation/text/code.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  title: Text
3
- description: Text is a token-backed typography component to display body and UI text.
3
+ description: Text is a token-backed typography component to display body text.
4
4
  order: 1
5
5
  props:
6
6
  packageName: '@atlaskit/primitives'
package/constellation/text/examples.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  title: Text
3
- description: Text is a token-backed typography component to display body and UI text.
3
+ description: Text is a token-backed typography component to display body text.
4
4
  order: 0
5
5
  ---
6
6
 
@@ -11,7 +11,7 @@ import AsElement from '../../examples/constellation/text/as-element';
11
11
 
12
12
  ## Basic
13
13
 
14
- Implements the [Atlassian typography system](/foundations/typography/) as a component, scoped to body and UI text usages.
14
+ Implements the [Atlassian typography system](/foundations/typography/) as a component, scoped to body text usages.
15
15
 
16
16
  The `variant` prop expresses the visual appearance of the text element.
17
17
 
@@ -25,7 +25,7 @@ Set `color` to change the text color, defaults to `text.color` if not nested in
25
25
 
26
26
  ## Weight
27
27
 
28
- Set `weight` to change the front weight.
28
+ Set `weight` to change the font weight.
29
29
 
30
30
  <Example Component={Weight} pacckageName="@atlaskit/primitives" />
31
31
 
package/constellation/text/usage.mdx CHANGED
@@ -1,11 +1,9 @@
1
1
  ---
2
2
  title: Text
3
- description: Text is a token-backed typography component to display body and UI text.
3
+ description: Text is a token-backed typography component to display body text.
4
4
  order: 2
5
5
  ---
6
6
 
7
7
  ## Usage
8
8
 
9
- UI text variants should be used in cases where line height being equal to the font size is desired. This is likely to be in UI components such as buttons.
10
-
11
- Body text variants should be used for multi-line text. For each variant, we have coupled a line height which fits the variant's font size, ensuring that it is compliant with accessibility standards.
9
+ Use body text for main content, such as detailed descriptions or for text in components. For each variant, we have coupled a line height which fits the variant's font size, ensuring that it is compliant with accessibility standards.
package/dist/cjs/components/anchor.js CHANGED
@@ -76,7 +76,7 @@ var Anchor = function Anchor(_ref, ref) {
76
76
  action: 'clicked',
77
77
  componentName: componentName || 'Anchor',
78
78
  packageName: "@atlaskit/primitives",
79
- packageVersion: "3.2.0",
79
+ packageVersion: "4.0.0",
80
80
  analyticsData: analyticsContext,
81
81
  actionSubject: 'link'
82
82
  });
package/dist/cjs/components/pressable.js CHANGED
@@ -80,7 +80,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
80
80
  action: 'clicked',
81
81
  componentName: componentName || 'Pressable',
82
82
  packageName: "@atlaskit/primitives",
83
- packageVersion: "3.2.0",
83
+ packageVersion: "4.0.0",
84
84
  analyticsData: analyticsContext,
85
85
  actionSubject: 'button'
86
86
  });
package/dist/cjs/components/text.js CHANGED
@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = void 0;
8
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
9
  var _react = require("react");
11
10
  var _react2 = require("@emotion/react");
12
11
  var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
13
12
  var _styleMaps = require("../xcss/style-maps.partial");
14
13
  var _surfaceProvider = require("./internal/surface-provider");
15
14
  var _excluded = ["children"];
16
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
17
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
15
+ /** @jsx jsx */
18
16
  var asAllowlist = ['span', 'p', 'strong', 'em'];
19
17
  // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
20
18
  // Long term we should remove those instances from the reset - it should be a reset to 0.
@@ -22,7 +20,6 @@ var asAllowlist = ['span', 'p', 'strong', 'em'];
22
20
  var resetStyles = (0, _react2.css)({
23
21
  margin: 0
24
22
  });
25
- var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
26
23
  var strongStyles = (0, _react2.css)({
27
24
  fontWeight: 'bold'
28
25
  });
@@ -108,7 +105,7 @@ var Text = function Text(_ref) {
108
105
  var hasTextAncestor = useHasTextAncestor();
109
106
  var color = useColor(colorProp, hasTextAncestor);
110
107
  var component = (0, _react2.jsx)(Component, {
111
- css: [resetStyles, variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
108
+ css: [resetStyles, _styleMaps.fontStylesMap[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
112
109
  style: {
113
110
  WebkitLineClamp: maxLines
114
111
  },
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.lineHeightStylesMap = exports.lineHeightMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontSizeStylesMap = exports.fontSizeMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.bodyTextStylesMap = exports.bodyTextMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
7
+ exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.shadowMap = exports.positiveSpaceMap = exports.paddingStylesMap = exports.opacityMap = exports.negativeSpaceMap = exports.layerMap = exports.isSurfaceColorToken = exports.inverseColorMap = exports.fontWeightStylesMap = exports.fontWeightMap = exports.fontStylesMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.bodyFontMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = exports.allSpaceMap = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _tokens = require("@atlaskit/tokens");
@@ -496,22 +496,17 @@ var borderRadiusMap = exports.borderRadiusMap = {
496
496
 
497
497
  /**
498
498
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
499
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
499
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
500
500
  * @codegenId typography
501
501
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
502
502
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
503
503
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
504
504
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
505
505
  */
506
- var fontSizeMap = exports.fontSizeMap = {
507
- 'font.size.050': "var(--ds-font-size-050, 11px)",
508
- 'font.size.075': "var(--ds-font-size-075, 12px)",
509
- 'font.size.100': "var(--ds-font-size-100, 14px)",
510
- 'font.size.200': "var(--ds-font-size-200, 16px)",
511
- 'font.size.300': "var(--ds-font-size-300, 20px)",
512
- 'font.size.400': "var(--ds-font-size-400, 24px)",
513
- 'font.size.500': "var(--ds-font-size-500, 29px)",
514
- 'font.size.600': "var(--ds-font-size-600, 35px)"
506
+ var bodyFontMap = exports.bodyFontMap = {
507
+ body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
508
+ 'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
509
+ 'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
515
510
  };
516
511
  var fontWeightMap = exports.fontWeightMap = {
517
512
  bold: "var(--ds-font-weight-bold, 700)",
@@ -520,31 +515,8 @@ var fontWeightMap = exports.fontWeightMap = {
520
515
  semibold: "var(--ds-font-weight-semibold, 600)"
521
516
  };
522
517
  var fontFamilyMap = exports.fontFamilyMap = {
523
- 'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
524
518
  'font.family.brand.body': "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
525
- 'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
526
- 'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
527
- 'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
528
- 'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
529
- 'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
530
- };
531
- var lineHeightMap = exports.lineHeightMap = {
532
- 'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
533
- 'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
534
- 'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
535
- 'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
536
- 'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
537
- 'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
538
- 'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
539
- };
540
- var bodyTextMap = exports.bodyTextMap = {
541
- body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
542
- 'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
543
- 'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
544
- };
545
- var uiTextMap = exports.uiTextMap = {
546
- ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
547
- 'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
519
+ 'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
548
520
  };
549
521
 
550
522
  /**
@@ -573,12 +545,9 @@ var spaceStylesMap = exports.spaceStylesMap = spacingProperties.reduce(function
573
545
  }, {});
574
546
  var backgroundColorStylesMap = exports.backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
575
547
  var textColorStylesMap = exports.textColorStylesMap = getSerializedStylesMap('color', textColorMap);
576
- var fontSizeStylesMap = exports.fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
577
548
  var fontWeightStylesMap = exports.fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
578
549
  var fontFamilyStylesMap = exports.fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
579
- var lineHeightStylesMap = exports.lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
580
- var bodyTextStylesMap = exports.bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
581
- var uiTextStylesMap = exports.uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
550
+ var fontStylesMap = exports.fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
582
551
  var surfaceColorStylesMap = exports.surfaceColorStylesMap = getSerializedStylesMap(_tokens.CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
583
552
  var isSurfaceColorToken = exports.isSurfaceColorToken = function isSurfaceColorToken(color) {
584
553
  return surfaceColorMap[color] !== undefined;
package/dist/es2019/components/anchor.js CHANGED
@@ -62,7 +62,7 @@ const Anchor = ({
62
62
  action: 'clicked',
63
63
  componentName: componentName || 'Anchor',
64
64
  packageName: "@atlaskit/primitives",
65
- packageVersion: "3.2.0",
65
+ packageVersion: "4.0.0",
66
66
  analyticsData: analyticsContext,
67
67
  actionSubject: 'link'
68
68
  });
package/dist/es2019/components/pressable.js CHANGED
@@ -66,7 +66,7 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
66
66
  action: 'clicked',
67
67
  componentName: componentName || 'Pressable',
68
68
  packageName: "@atlaskit/primitives",
69
- packageVersion: "3.2.0",
69
+ packageVersion: "4.0.0",
70
70
  analyticsData: analyticsContext,
71
71
  actionSubject: 'button'
72
72
  });
package/dist/es2019/components/text.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import { createContext, useContext } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import invariant from 'tiny-invariant';
5
- import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
5
+ import { fontStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap } from '../xcss/style-maps.partial';
6
6
  import { useSurface } from './internal/surface-provider';
7
7
  const asAllowlist = ['span', 'p', 'strong', 'em'];
8
8
  // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
@@ -11,10 +11,6 @@ const asAllowlist = ['span', 'p', 'strong', 'em'];
11
11
  const resetStyles = css({
12
12
  margin: 0
13
13
  });
14
- const variantStyles = {
15
- ...bodyTextStylesMap,
16
- ...uiTextStylesMap
17
- };
18
14
  const strongStyles = css({
19
15
  fontWeight: 'bold'
20
16
  });
@@ -99,7 +95,7 @@ const Text = ({
99
95
  const hasTextAncestor = useHasTextAncestor();
100
96
  const color = useColor(colorProp, hasTextAncestor);
101
97
  const component = jsx(Component, {
102
- css: [resetStyles, variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
98
+ css: [resetStyles, fontStylesMap[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
103
99
  style: {
104
100
  WebkitLineClamp: maxLines
105
101
  },
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -484,22 +484,17 @@ export const borderRadiusMap = {
484
484
  */
485
485
  /**
486
486
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
487
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
487
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
488
488
  * @codegenId typography
489
489
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
490
490
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
491
491
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
492
492
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
493
493
  */
494
- export const fontSizeMap = {
495
- 'font.size.050': "var(--ds-font-size-050, 11px)",
496
- 'font.size.075': "var(--ds-font-size-075, 12px)",
497
- 'font.size.100': "var(--ds-font-size-100, 14px)",
498
- 'font.size.200': "var(--ds-font-size-200, 16px)",
499
- 'font.size.300': "var(--ds-font-size-300, 20px)",
500
- 'font.size.400': "var(--ds-font-size-400, 24px)",
501
- 'font.size.500': "var(--ds-font-size-500, 29px)",
502
- 'font.size.600': "var(--ds-font-size-600, 35px)"
494
+ export const bodyFontMap = {
495
+ body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
496
+ 'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
497
+ 'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
503
498
  };
504
499
  export const fontWeightMap = {
505
500
  bold: "var(--ds-font-weight-bold, 700)",
@@ -508,31 +503,8 @@ export const fontWeightMap = {
508
503
  semibold: "var(--ds-font-weight-semibold, 600)"
509
504
  };
510
505
  export const fontFamilyMap = {
511
- 'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
512
506
  'font.family.brand.body': "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
513
- 'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
514
- 'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
515
- 'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
516
- 'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
517
- 'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
518
- };
519
- export const lineHeightMap = {
520
- 'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
521
- 'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
522
- 'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
523
- 'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
524
- 'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
525
- 'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
526
- 'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
527
- };
528
- export const bodyTextMap = {
529
- body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
530
- 'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
531
- 'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
532
- };
533
- export const uiTextMap = {
534
- ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
535
- 'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
507
+ 'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
536
508
  };
537
509
 
538
510
  /**
@@ -563,11 +535,8 @@ export const spaceStylesMap = spacingProperties.reduce((styleMap, spacingPropert
563
535
  }, {});
564
536
  export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
565
537
  export const textColorStylesMap = getSerializedStylesMap('color', textColorMap);
566
- export const fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
567
538
  export const fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
568
539
  export const fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
569
- export const lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
570
- export const bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
571
- export const uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
540
+ export const fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
572
541
  export const surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
573
542
  export const isSurfaceColorToken = color => surfaceColorMap[color] !== undefined;
package/dist/esm/components/anchor.js CHANGED
@@ -66,7 +66,7 @@ var Anchor = function Anchor(_ref, ref) {
66
66
  action: 'clicked',
67
67
  componentName: componentName || 'Anchor',
68
68
  packageName: "@atlaskit/primitives",
69
- packageVersion: "3.2.0",
69
+ packageVersion: "4.0.0",
70
70
  analyticsData: analyticsContext,
71
71
  actionSubject: 'link'
72
72
  });
package/dist/esm/components/pressable.js CHANGED
@@ -70,7 +70,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
70
70
  action: 'clicked',
71
71
  componentName: componentName || 'Pressable',
72
72
  packageName: "@atlaskit/primitives",
73
- packageVersion: "3.2.0",
73
+ packageVersion: "4.0.0",
74
74
  analyticsData: analyticsContext,
75
75
  actionSubject: 'button'
76
76
  });
package/dist/esm/components/text.js CHANGED
@@ -1,13 +1,10 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
2
  var _excluded = ["children"];
4
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
3
  /** @jsx jsx */
7
4
  import { createContext, useContext } from 'react';
8
5
  import { css, jsx } from '@emotion/react';
9
6
  import invariant from 'tiny-invariant';
10
- import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
7
+ import { fontStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap } from '../xcss/style-maps.partial';
11
8
  import { useSurface } from './internal/surface-provider';
12
9
  var asAllowlist = ['span', 'p', 'strong', 'em'];
13
10
  // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
@@ -16,7 +13,6 @@ var asAllowlist = ['span', 'p', 'strong', 'em'];
16
13
  var resetStyles = css({
17
14
  margin: 0
18
15
  });
19
- var variantStyles = _objectSpread(_objectSpread({}, bodyTextStylesMap), uiTextStylesMap);
20
16
  var strongStyles = css({
21
17
  fontWeight: 'bold'
22
18
  });
@@ -102,7 +98,7 @@ var Text = function Text(_ref) {
102
98
  var hasTextAncestor = useHasTextAncestor();
103
99
  var color = useColor(colorProp, hasTextAncestor);
104
100
  var component = jsx(Component, {
105
- css: [resetStyles, variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
101
+ css: [resetStyles, fontStylesMap[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], Component === 'em' && emStyles, Component === 'strong' && strongStyles],
106
102
  style: {
107
103
  WebkitLineClamp: maxLines
108
104
  },
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -484,22 +484,17 @@ export var borderRadiusMap = {
484
484
  */
485
485
  /**
486
486
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
487
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
487
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
488
488
  * @codegenId typography
489
489
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
490
490
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
491
491
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
492
492
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
493
493
  */
494
- export var fontSizeMap = {
495
- 'font.size.050': "var(--ds-font-size-050, 11px)",
496
- 'font.size.075': "var(--ds-font-size-075, 12px)",
497
- 'font.size.100': "var(--ds-font-size-100, 14px)",
498
- 'font.size.200': "var(--ds-font-size-200, 16px)",
499
- 'font.size.300': "var(--ds-font-size-300, 20px)",
500
- 'font.size.400': "var(--ds-font-size-400, 24px)",
501
- 'font.size.500': "var(--ds-font-size-500, 29px)",
502
- 'font.size.600': "var(--ds-font-size-600, 35px)"
494
+ export var bodyFontMap = {
495
+ body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
496
+ 'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
497
+ 'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
503
498
  };
504
499
  export var fontWeightMap = {
505
500
  bold: "var(--ds-font-weight-bold, 700)",
@@ -508,31 +503,8 @@ export var fontWeightMap = {
508
503
  semibold: "var(--ds-font-weight-semibold, 600)"
509
504
  };
510
505
  export var fontFamilyMap = {
511
- 'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
512
506
  'font.family.brand.body': "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
513
- 'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
514
- 'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
515
- 'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
516
- 'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
517
- 'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
518
- };
519
- export var lineHeightMap = {
520
- 'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
521
- 'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
522
- 'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
523
- 'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
524
- 'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
525
- 'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
526
- 'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
527
- };
528
- export var bodyTextMap = {
529
- body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
530
- 'body.large': "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
531
- 'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
532
- };
533
- export var uiTextMap = {
534
- ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
535
- 'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
507
+ 'font.family.brand.heading': "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
536
508
  };
537
509
 
538
510
  /**
@@ -561,12 +533,9 @@ export var spaceStylesMap = spacingProperties.reduce(function (styleMap, spacing
561
533
  }, {});
562
534
  export var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
563
535
  export var textColorStylesMap = getSerializedStylesMap('color', textColorMap);
564
- export var fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
565
536
  export var fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
566
537
  export var fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
567
- export var lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
568
- export var bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
569
- export var uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
538
+ export var fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
570
539
  export var surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
571
540
  export var isSurfaceColorToken = function isSurfaceColorToken(color) {
572
541
  return surfaceColorMap[color] !== undefined;
package/dist/types/components/text.d.ts CHANGED
@@ -1,30 +1,9 @@
1
1
  /** @jsx jsx */
2
2
  import { FC, ReactNode } from 'react';
3
- import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
3
+ import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
4
4
  import type { BasePrimitiveProps } from './types';
5
5
  declare const asAllowlist: readonly ["span", "p", "strong", "em"];
6
6
  type AsElement = (typeof asAllowlist)[number];
7
- type TextPropsBody = {
8
- /**
9
- * Text variant.
10
- */
11
- variant?: BodyText;
12
- /**
13
- * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
14
- *
15
- * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
16
- *
17
- * Only available for `body` text variants.
18
- */
19
- maxLines?: number;
20
- };
21
- type TextPropsUi = {
22
- /**
23
- * Text variant.
24
- */
25
- variant: UiText;
26
- maxLines?: never;
27
- };
28
7
  type TextPropsBase = {
29
8
  /**
30
9
  * HTML tag to be rendered. Defaults to `span`.
@@ -44,16 +23,26 @@ type TextPropsBase = {
44
23
  * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
45
24
  */
46
25
  id?: string;
26
+ /**
27
+ * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
28
+ *
29
+ * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
30
+ */
31
+ maxLines?: number;
47
32
  /**
48
33
  * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
49
34
  */
50
35
  textAlign?: TextAlign;
36
+ /**
37
+ * Text variant.
38
+ */
39
+ variant?: BodyFont;
51
40
  /**
52
41
  * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
53
42
  */
54
43
  weight?: FontWeight;
55
44
  };
56
- export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
45
+ export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'>;
57
46
  type TextAlign = keyof typeof textAlignMap;
58
47
  declare const textAlignMap: {
59
48
  center: import("@emotion/react").SerializedStyles;
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -515,24 +515,19 @@ export type BorderRadius = keyof typeof borderRadiusMap;
515
515
  */
516
516
  /**
517
517
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
518
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
518
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
519
519
  * @codegenId typography
520
520
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
521
521
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
522
522
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
523
523
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
524
524
  */
525
- export declare const fontSizeMap: {
526
- 'font.size.050': "var(--ds-font-size-050)";
527
- 'font.size.075': "var(--ds-font-size-075)";
528
- 'font.size.100': "var(--ds-font-size-100)";
529
- 'font.size.200': "var(--ds-font-size-200)";
530
- 'font.size.300': "var(--ds-font-size-300)";
531
- 'font.size.400': "var(--ds-font-size-400)";
532
- 'font.size.500': "var(--ds-font-size-500)";
533
- 'font.size.600': "var(--ds-font-size-600)";
525
+ export declare const bodyFontMap: {
526
+ body: "var(--ds-font-body)";
527
+ 'body.large': "var(--ds-font-body-large)";
528
+ 'body.small': "var(--ds-font-body-small)";
534
529
  };
535
- export type FontSize = keyof typeof fontSizeMap;
530
+ export type BodyFont = keyof typeof bodyFontMap;
536
531
  export declare const fontWeightMap: {
537
532
  bold: "var(--ds-font-weight-bold)";
538
533
  medium: "var(--ds-font-weight-medium)";
@@ -541,36 +536,10 @@ export declare const fontWeightMap: {
541
536
  };
542
537
  export type FontWeight = keyof typeof fontWeightMap;
543
538
  export declare const fontFamilyMap: {
544
- 'font.family.body': "var(--ds-font-family-body)";
545
539
  'font.family.brand.body': "var(--ds-font-family-brand-body)";
546
540
  'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
547
- 'font.family.code': "var(--ds-font-family-code)";
548
- 'font.family.heading': "var(--ds-font-family-heading)";
549
- 'font.family.monospace': "var(--ds-font-family-monospace)";
550
- 'font.family.sans': "var(--ds-font-family-sans)";
551
541
  };
552
542
  export type FontFamily = keyof typeof fontFamilyMap;
553
- export declare const lineHeightMap: {
554
- 'font.lineHeight.1': "var(--ds-font-lineHeight-1)";
555
- 'font.lineHeight.100': "var(--ds-font-lineHeight-100)";
556
- 'font.lineHeight.200': "var(--ds-font-lineHeight-200)";
557
- 'font.lineHeight.300': "var(--ds-font-lineHeight-300)";
558
- 'font.lineHeight.400': "var(--ds-font-lineHeight-400)";
559
- 'font.lineHeight.500': "var(--ds-font-lineHeight-500)";
560
- 'font.lineHeight.600': "var(--ds-font-lineHeight-600)";
561
- };
562
- export type LineHeight = keyof typeof lineHeightMap;
563
- export declare const bodyTextMap: {
564
- body: "var(--ds-font-body)";
565
- 'body.large': "var(--ds-font-body-large)";
566
- 'body.small': "var(--ds-font-body-small)";
567
- };
568
- export type BodyText = keyof typeof bodyTextMap;
569
- export declare const uiTextMap: {
570
- ui: "var(--ds-font-ui)";
571
- 'ui.small': "var(--ds-font-ui-small)";
572
- };
573
- export type UiText = keyof typeof uiTextMap;
574
543
  /**
575
544
  * @codegenEnd
576
545
  */
@@ -671,32 +640,23 @@ type SpacingToken = keyof typeof positiveSpaceMap;
671
640
  type BackgroundColorToken = keyof typeof backgroundColorMap;
672
641
  type SurfaceColorToken = keyof typeof surfaceColorMap;
673
642
  type TextColorToken = keyof typeof textColorMap;
674
- type FontSizeToken = keyof typeof fontSizeMap;
675
643
  type FontWeightToken = keyof typeof fontWeightMap;
676
644
  type FontFamilyToken = keyof typeof fontFamilyMap;
677
- type LineHeightToken = keyof typeof lineHeightMap;
678
- type BodyTextToken = keyof typeof bodyTextMap;
679
- type UITextToken = keyof typeof uiTextMap;
645
+ type BodyFontToken = keyof typeof bodyFontMap;
680
646
  type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
681
647
  type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
682
648
  type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
683
649
  type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
684
- type FontSizeStyleMap = Record<FontSizeToken, SerializedStyles>;
685
650
  type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
686
651
  type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
687
- type LineHeightStyleMap = Record<LineHeightToken, SerializedStyles>;
688
- type BodyTextStyleMap = Record<BodyTextToken, SerializedStyles>;
689
- type UITextStyleMap = Record<UITextToken, SerializedStyles>;
652
+ type FontStyleMap = Record<BodyFontToken, SerializedStyles>;
690
653
  export declare const paddingStylesMap: SpacingStyleMap;
691
654
  export declare const spaceStylesMap: SpacingStyleMap;
692
655
  export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
693
656
  export declare const textColorStylesMap: TextColorStyleMap;
694
- export declare const fontSizeStylesMap: FontSizeStyleMap;
695
657
  export declare const fontWeightStylesMap: FontWeightStyleMap;
696
658
  export declare const fontFamilyStylesMap: FontFamilyStyleMap;
697
- export declare const lineHeightStylesMap: LineHeightStyleMap;
698
- export declare const bodyTextStylesMap: BodyTextStyleMap;
699
- export declare const uiTextStylesMap: UITextStyleMap;
659
+ export declare const fontStylesMap: FontStyleMap;
700
660
  export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
701
661
  export declare const isSurfaceColorToken: (color: unknown) => color is "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken";
702
662
  export {};
package/dist/types-ts4.5/components/text.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { FC, ReactNode } from 'react';
3
- import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
3
+ import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
4
4
  import type { BasePrimitiveProps } from './types';
5
5
  declare const asAllowlist: readonly [
6
6
  "span",
@@ -9,27 +9,6 @@ declare const asAllowlist: readonly [
9
9
  "em"
10
10
  ];
11
11
  type AsElement = (typeof asAllowlist)[number];
12
- type TextPropsBody = {
13
- /**
14
- * Text variant.
15
- */
16
- variant?: BodyText;
17
- /**
18
- * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
19
- *
20
- * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
21
- *
22
- * Only available for `body` text variants.
23
- */
24
- maxLines?: number;
25
- };
26
- type TextPropsUi = {
27
- /**
28
- * Text variant.
29
- */
30
- variant: UiText;
31
- maxLines?: never;
32
- };
33
12
  type TextPropsBase = {
34
13
  /**
35
14
  * HTML tag to be rendered. Defaults to `span`.
@@ -49,16 +28,26 @@ type TextPropsBase = {
49
28
  * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
50
29
  */
51
30
  id?: string;
31
+ /**
32
+ * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
33
+ *
34
+ * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
35
+ */
36
+ maxLines?: number;
52
37
  /**
53
38
  * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
54
39
  */
55
40
  textAlign?: TextAlign;
41
+ /**
42
+ * Text variant.
43
+ */
44
+ variant?: BodyFont;
56
45
  /**
57
46
  * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
58
47
  */
59
48
  weight?: FontWeight;
60
49
  };
61
- export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
50
+ export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'>;
62
51
  type TextAlign = keyof typeof textAlignMap;
63
52
  declare const textAlignMap: {
64
53
  center: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -515,24 +515,19 @@ export type BorderRadius = keyof typeof borderRadiusMap;
515
515
  */
516
516
  /**
517
517
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
518
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
518
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
519
519
  * @codegenId typography
520
520
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
521
521
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
522
522
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
523
523
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
524
524
  */
525
- export declare const fontSizeMap: {
526
- 'font.size.050': "var(--ds-font-size-050)";
527
- 'font.size.075': "var(--ds-font-size-075)";
528
- 'font.size.100': "var(--ds-font-size-100)";
529
- 'font.size.200': "var(--ds-font-size-200)";
530
- 'font.size.300': "var(--ds-font-size-300)";
531
- 'font.size.400': "var(--ds-font-size-400)";
532
- 'font.size.500': "var(--ds-font-size-500)";
533
- 'font.size.600': "var(--ds-font-size-600)";
525
+ export declare const bodyFontMap: {
526
+ body: "var(--ds-font-body)";
527
+ 'body.large': "var(--ds-font-body-large)";
528
+ 'body.small': "var(--ds-font-body-small)";
534
529
  };
535
- export type FontSize = keyof typeof fontSizeMap;
530
+ export type BodyFont = keyof typeof bodyFontMap;
536
531
  export declare const fontWeightMap: {
537
532
  bold: "var(--ds-font-weight-bold)";
538
533
  medium: "var(--ds-font-weight-medium)";
@@ -541,36 +536,10 @@ export declare const fontWeightMap: {
541
536
  };
542
537
  export type FontWeight = keyof typeof fontWeightMap;
543
538
  export declare const fontFamilyMap: {
544
- 'font.family.body': "var(--ds-font-family-body)";
545
539
  'font.family.brand.body': "var(--ds-font-family-brand-body)";
546
540
  'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
547
- 'font.family.code': "var(--ds-font-family-code)";
548
- 'font.family.heading': "var(--ds-font-family-heading)";
549
- 'font.family.monospace': "var(--ds-font-family-monospace)";
550
- 'font.family.sans': "var(--ds-font-family-sans)";
551
541
  };
552
542
  export type FontFamily = keyof typeof fontFamilyMap;
553
- export declare const lineHeightMap: {
554
- 'font.lineHeight.1': "var(--ds-font-lineHeight-1)";
555
- 'font.lineHeight.100': "var(--ds-font-lineHeight-100)";
556
- 'font.lineHeight.200': "var(--ds-font-lineHeight-200)";
557
- 'font.lineHeight.300': "var(--ds-font-lineHeight-300)";
558
- 'font.lineHeight.400': "var(--ds-font-lineHeight-400)";
559
- 'font.lineHeight.500': "var(--ds-font-lineHeight-500)";
560
- 'font.lineHeight.600': "var(--ds-font-lineHeight-600)";
561
- };
562
- export type LineHeight = keyof typeof lineHeightMap;
563
- export declare const bodyTextMap: {
564
- body: "var(--ds-font-body)";
565
- 'body.large': "var(--ds-font-body-large)";
566
- 'body.small': "var(--ds-font-body-small)";
567
- };
568
- export type BodyText = keyof typeof bodyTextMap;
569
- export declare const uiTextMap: {
570
- ui: "var(--ds-font-ui)";
571
- 'ui.small': "var(--ds-font-ui-small)";
572
- };
573
- export type UiText = keyof typeof uiTextMap;
574
543
  /**
575
544
  * @codegenEnd
576
545
  */
@@ -682,32 +651,23 @@ type SpacingToken = keyof typeof positiveSpaceMap;
682
651
  type BackgroundColorToken = keyof typeof backgroundColorMap;
683
652
  type SurfaceColorToken = keyof typeof surfaceColorMap;
684
653
  type TextColorToken = keyof typeof textColorMap;
685
- type FontSizeToken = keyof typeof fontSizeMap;
686
654
  type FontWeightToken = keyof typeof fontWeightMap;
687
655
  type FontFamilyToken = keyof typeof fontFamilyMap;
688
- type LineHeightToken = keyof typeof lineHeightMap;
689
- type BodyTextToken = keyof typeof bodyTextMap;
690
- type UITextToken = keyof typeof uiTextMap;
656
+ type BodyFontToken = keyof typeof bodyFontMap;
691
657
  type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
692
658
  type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
693
659
  type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
694
660
  type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
695
- type FontSizeStyleMap = Record<FontSizeToken, SerializedStyles>;
696
661
  type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
697
662
  type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
698
- type LineHeightStyleMap = Record<LineHeightToken, SerializedStyles>;
699
- type BodyTextStyleMap = Record<BodyTextToken, SerializedStyles>;
700
- type UITextStyleMap = Record<UITextToken, SerializedStyles>;
663
+ type FontStyleMap = Record<BodyFontToken, SerializedStyles>;
701
664
  export declare const paddingStylesMap: SpacingStyleMap;
702
665
  export declare const spaceStylesMap: SpacingStyleMap;
703
666
  export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
704
667
  export declare const textColorStylesMap: TextColorStyleMap;
705
- export declare const fontSizeStylesMap: FontSizeStyleMap;
706
668
  export declare const fontWeightStylesMap: FontWeightStyleMap;
707
669
  export declare const fontFamilyStylesMap: FontFamilyStyleMap;
708
- export declare const lineHeightStylesMap: LineHeightStyleMap;
709
- export declare const bodyTextStylesMap: BodyTextStyleMap;
710
- export declare const uiTextStylesMap: UITextStyleMap;
670
+ export declare const fontStylesMap: FontStyleMap;
711
671
  export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
712
672
  export declare const isSurfaceColorToken: (color: unknown) => color is "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken";
713
673
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "3.2.0",
3
+ "version": "4.0.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -127,7 +127,7 @@
127
127
  "@atlaskit/css": "^0.0.3",
128
128
  "@atlaskit/ds-lib": "^2.2.0",
129
129
  "@atlaskit/interaction-context": "^2.1.0",
130
- "@atlaskit/tokens": "^1.38.0",
130
+ "@atlaskit/tokens": "^1.39.0",
131
131
  "@babel/runtime": "^7.0.0",
132
132
  "@emotion/react": "^11.7.1",
133
133
  "@emotion/serialize": "^1.1.0",
package/scripts/codegen-styles.tsx CHANGED
@@ -117,7 +117,7 @@ const sourceFns = [
117
117
  // font*, lineheight
118
118
  () =>
119
119
  createPartialSignedArtifact(
120
- options => options.map(createTypographyStylesFromTemplate).join('\n'),
120
+ createTypographyStylesFromTemplate,
121
121
  'yarn workspace @atlaskit/primitives codegen-styles',
122
122
  {
123
123
  id: 'typography',
package/scripts/typography-codegen-template.tsx CHANGED
@@ -10,58 +10,36 @@ type Token = {
10
10
  fallback: string;
11
11
  };
12
12
 
13
- const typographyProperties = {
14
- heading: {
15
- objectName: 'headingText',
16
- prefix: 'font.heading',
13
+ const activeTokens: Token[] = tokens
14
+ .filter(t => t.attributes.state === 'active')
15
+ .map(t => ({
16
+ name: t.name,
17
+ fallback: t.value,
18
+ }));
19
+
20
+ const typographyProperties = [
21
+ {
22
+ objectName: 'bodyFont',
17
23
  cssProperty: 'font',
18
- filterFn: <T extends Token>(t: T) => t.name.startsWith('font.heading'),
19
- },
20
- body: {
21
- objectName: 'bodyText',
22
24
  prefix: 'font.body',
23
- cssProperty: 'font',
24
25
  filterFn: <T extends Token>(t: T) => t.name.startsWith('font.body'),
25
26
  },
26
- ui: {
27
- objectName: 'uiText',
28
- prefix: 'font.ui',
29
- cssProperty: 'font',
30
- filterFn: <T extends Token>(t: T) => t.name.startsWith('font.ui'),
31
- },
32
- fontSize: {
33
- objectName: 'fontSize',
34
- cssProperty: 'fontSize',
35
- prefix: 'font.size',
36
- filterFn: <T extends Token>(t: T) => t.name.startsWith('font.size'),
37
- },
38
- fontWeight: {
27
+ {
39
28
  objectName: 'fontWeight',
40
29
  cssProperty: 'fontWeight',
41
30
  prefix: 'font.weight.',
42
31
  filterFn: <T extends Token>(t: T) => t.name.startsWith('font.weight'),
43
32
  },
44
- fontFamily: {
33
+ {
45
34
  objectName: 'fontFamily',
46
35
  cssProperty: 'fontFamily',
47
36
  prefix: 'font.family.',
48
37
  filterFn: <T extends Token>(t: T) => t.name.startsWith('font.family'),
49
38
  },
50
- lineHeight: {
51
- objectName: 'lineHeight',
52
- cssProperty: 'lineHeight',
53
- prefix: 'font.',
54
- filterFn: <T extends Token>(t: T) => t.name.startsWith('font.lineHeight'),
55
- },
56
- } as const;
57
-
58
- const activeTokens: Token[] = tokens.map(t => ({
59
- name: t.name,
60
- fallback: t.value,
61
- }));
39
+ ] as const;
62
40
 
63
41
  const removeVerbosity = (name: string): string => {
64
- const partialRemove = ['font.heading', 'font.ui', 'font.body'];
42
+ const partialRemove = ['font.body'];
65
43
  if (partialRemove.some(s => name.includes(s))) {
66
44
  return name.replace('font.', '');
67
45
  }
@@ -75,18 +53,14 @@ const removeVerbosity = (name: string): string => {
75
53
  return name;
76
54
  };
77
55
 
78
- export const createTypographyStylesFromTemplate = (
79
- typographyProperty: keyof typeof typographyProperties,
80
- ) => {
81
- if (!typographyProperties[typographyProperty]) {
82
- throw new Error(`[codegen] Unknown option found "${typographyProperty}"`);
83
- }
84
-
85
- const { filterFn, objectName } = typographyProperties[typographyProperty];
56
+ export const createTypographyStylesFromTemplate = () => {
57
+ return typographyProperties
58
+ .map(typographyProperty => {
59
+ const { filterFn, objectName } = typographyProperty;
86
60
 
87
- return (
88
- prettier.format(
89
- `
61
+ return (
62
+ prettier.format(
63
+ `
90
64
  export const ${objectName}Map = {
91
65
  ${activeTokens
92
66
  .filter(filterFn)
@@ -102,13 +76,17 @@ ${activeTokens
102
76
  })
103
77
  .join(',\n\t')}
104
78
  };`,
105
- {
106
- singleQuote: true,
107
- trailingComma: 'all',
108
- parser: 'typescript',
109
- plugins: [parserTypeScript],
110
- },
111
- ) +
112
- `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
113
- );
79
+ {
80
+ singleQuote: true,
81
+ trailingComma: 'all',
82
+ parser: 'typescript',
83
+ plugins: [parserTypeScript],
84
+ },
85
+ ) +
86
+ `\nexport type ${capitalize(
87
+ objectName,
88
+ )} = keyof typeof ${objectName}Map;\n`
89
+ );
90
+ })
91
+ .join('\n');
114
92
  };