@atlaskit/primitives 3.2.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/primitives
 
+## 4.0.1
+
+### Patch Changes
+
+- [#79770](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79770) [`542e29efe0ad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/542e29efe0ad) - Update imports from @atlaskit/tokens
+- Updated dependencies
+
+## 4.0.0
+
+### Major Changes
+
+- [#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.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.0
 
 ### Minor Changes

package/constellation/text/code.mdx

@@ -1,6 +1,6 @@
 ---
 title: Text
-description: Text is a token-backed typography component to display body and UI text.
+description: Text is a token-backed typography component to display body text.
 order: 1
 props:
   packageName: '@atlaskit/primitives'

package/constellation/text/examples.mdx

@@ -1,6 +1,6 @@
 ---
 title: Text
-description: Text is a token-backed typography component to display body and UI text.
+description: Text is a token-backed typography component to display body text.
 order: 0
 ---
 
@@ -11,7 +11,7 @@ import AsElement from '../../examples/constellation/text/as-element';
 
 ## Basic
 
-Implements the [Atlassian typography system](/foundations/typography/) as a component, scoped to body and UI text usages.
+Implements the [Atlassian typography system](/foundations/typography/) as a component, scoped to body text usages.
 
 The `variant` prop expresses the visual appearance of the text element.
 
@@ -25,7 +25,7 @@ Set `color` to change the text color, defaults to `text.color` if not nested in
 
 ## Weight
 
-Set `weight` to change the front weight.
+Set `weight` to change the font weight.
 
 <Example Component={Weight} pacckageName="@atlaskit/primitives" />
 

package/constellation/text/usage.mdx

@@ -1,11 +1,9 @@
 ---
 title: Text
-description: Text is a token-backed typography component to display body and UI text.
+description: Text is a token-backed typography component to display body text.
 order: 2
 ---
 
 ## Usage
 
-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.
-
-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.
+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

@@ -19,8 +19,8 @@ var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-
 var _xcss = require("../xcss/xcss");
 var _box = _interopRequireDefault(require("./box"));
 var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel", "onClick", "interactionName", "componentName", "analyticsContext"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // TODO: Duplicated FocusRing styles due to lack of `xcss` support
 // and to prevent additional dependency
 var baseFocusRingStyles = {
@@ -76,7 +76,7 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.2.0",
+    packageVersion: "4.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/pressable.js

@@ -16,8 +16,8 @@ var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-
 var _xcss = require("../xcss/xcss");
 var _box = _interopRequireDefault(require("./box"));
 var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss", "onClick", "interactionName", "componentName", "analyticsContext"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // TODO: Duplicated FocusRing styles due to lack of `xcss` support
 // and to prevent additional dependency
 var baseFocusRingStyles = {
@@ -80,7 +80,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.2.0",
+    packageVersion: "4.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/text.js

@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _styleMaps = require("../xcss/style-maps.partial");
 var _surfaceProvider = require("./internal/surface-provider");
 var _excluded = ["children"];
-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; }
-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 */
+/** @jsx jsx */
 var asAllowlist = ['span', 'p', 'strong', 'em'];
 // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
 // 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'];
 var resetStyles = (0, _react2.css)({
   margin: 0
 });
-var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
 var strongStyles = (0, _react2.css)({
   fontWeight: 'bold'
 });
@@ -108,7 +105,7 @@ var Text = function Text(_ref) {
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = (0, _react2.jsx)(Component, {
-    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],
+    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],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/cjs/xcss/style-maps.partial.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+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;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _tokens = require("@atlaskit/tokens");
@@ -496,22 +496,17 @@ var borderRadiusMap = exports.borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  */
-var fontSizeMap = exports.fontSizeMap = {
-  'font.size.050': "var(--ds-font-size-050, 11px)",
-  'font.size.075': "var(--ds-font-size-075, 12px)",
-  'font.size.100': "var(--ds-font-size-100, 14px)",
-  'font.size.200': "var(--ds-font-size-200, 16px)",
-  'font.size.300': "var(--ds-font-size-300, 20px)",
-  'font.size.400': "var(--ds-font-size-400, 24px)",
-  'font.size.500': "var(--ds-font-size-500, 29px)",
-  'font.size.600': "var(--ds-font-size-600, 35px)"
+var bodyFontMap = exports.bodyFontMap = {
+  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  '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)",
+  '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)"
 };
 var fontWeightMap = exports.fontWeightMap = {
   bold: "var(--ds-font-weight-bold, 700)",
@@ -520,31 +515,8 @@ var fontWeightMap = exports.fontWeightMap = {
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
 var fontFamilyMap = exports.fontFamilyMap = {
-  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   '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)",
-  '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)",
-  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
-};
-var lineHeightMap = exports.lineHeightMap = {
-  'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
-  'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
-  'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
-  'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
-  'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
-  'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
-  'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
-};
-var bodyTextMap = exports.bodyTextMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  '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)",
-  '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)"
-};
-var uiTextMap = exports.uiTextMap = {
-  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  '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)"
+  '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)"
 };
 
 /**
@@ -573,12 +545,9 @@ var spaceStylesMap = exports.spaceStylesMap = spacingProperties.reduce(function
 }, {});
 var backgroundColorStylesMap = exports.backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
 var textColorStylesMap = exports.textColorStylesMap = getSerializedStylesMap('color', textColorMap);
-var fontSizeStylesMap = exports.fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
 var fontWeightStylesMap = exports.fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
 var fontFamilyStylesMap = exports.fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
-var lineHeightStylesMap = exports.lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
-var bodyTextStylesMap = exports.bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
-var uiTextStylesMap = exports.uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
+var fontStylesMap = exports.fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
 var surfaceColorStylesMap = exports.surfaceColorStylesMap = getSerializedStylesMap(_tokens.CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
 var isSurfaceColorToken = exports.isSurfaceColorToken = function isSurfaceColorToken(color) {
   return surfaceColorMap[color] !== undefined;

package/dist/es2019/components/anchor.js

@@ -62,7 +62,7 @@ const Anchor = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.2.0",
+    packageVersion: "4.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/box.js

@@ -10,6 +10,7 @@ import { SurfaceContext } from './internal/surface-provider';
 
 // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 /**
  * __Box__
  *

package/dist/es2019/components/pressable.js

@@ -66,7 +66,7 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.2.0",
+    packageVersion: "4.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/text.js

@@ -2,7 +2,7 @@
 import { createContext, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
+import { fontStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap } from '../xcss/style-maps.partial';
 import { useSurface } from './internal/surface-provider';
 const asAllowlist = ['span', 'p', 'strong', 'em'];
 // 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'];
 const resetStyles = css({
   margin: 0
 });
-const variantStyles = {
-  ...bodyTextStylesMap,
-  ...uiTextStylesMap
-};
 const strongStyles = css({
   fontWeight: 'bold'
 });
@@ -99,7 +95,7 @@ const Text = ({
   const hasTextAncestor = useHasTextAncestor();
   const color = useColor(colorProp, hasTextAncestor);
   const component = jsx(Component, {
-    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],
+    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],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/es2019/xcss/style-maps.partial.js

@@ -22,6 +22,7 @@ export const dimensionMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
@@ -63,6 +64,7 @@ export const allSpaceMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
@@ -138,6 +140,7 @@ export const surfaceColorMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
@@ -433,6 +436,7 @@ export const fillMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::01a4b055c311d198921d4e000a2d7a54>>
@@ -456,6 +460,7 @@ export const layerMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::d44c306cfe2334f9664fc122aa7d9fe6>>
@@ -482,24 +487,20 @@ export const borderRadiusMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  */
-export const fontSizeMap = {
-  'font.size.050': "var(--ds-font-size-050, 11px)",
-  'font.size.075': "var(--ds-font-size-075, 12px)",
-  'font.size.100': "var(--ds-font-size-100, 14px)",
-  'font.size.200': "var(--ds-font-size-200, 16px)",
-  'font.size.300': "var(--ds-font-size-300, 20px)",
-  'font.size.400': "var(--ds-font-size-400, 24px)",
-  'font.size.500': "var(--ds-font-size-500, 29px)",
-  'font.size.600': "var(--ds-font-size-600, 35px)"
+export const bodyFontMap = {
+  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  '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)",
+  '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)"
 };
 export const fontWeightMap = {
   bold: "var(--ds-font-weight-bold, 700)",
@@ -508,31 +509,8 @@ export const fontWeightMap = {
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export const fontFamilyMap = {
-  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   '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)",
-  '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)",
-  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
-};
-export const lineHeightMap = {
-  'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
-  'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
-  'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
-  'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
-  'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
-  'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
-  'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
-};
-export const bodyTextMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  '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)",
-  '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)"
-};
-export const uiTextMap = {
-  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  '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)"
+  '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)"
 };
 
 /**
@@ -563,11 +541,8 @@ export const spaceStylesMap = spacingProperties.reduce((styleMap, spacingPropert
 }, {});
 export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
 export const textColorStylesMap = getSerializedStylesMap('color', textColorMap);
-export const fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
 export const fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
 export const fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
-export const lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
-export const bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
-export const uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
+export const fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
 export const surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
 export const isSurfaceColorToken = color => surfaceColorMap[color] !== undefined;

package/dist/esm/components/anchor.js

@@ -66,7 +66,7 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.2.0",
+    packageVersion: "4.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/box.js

@@ -13,6 +13,7 @@ import { SurfaceContext } from './internal/surface-provider';
 
 // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
 /**
  * __Box__
  *

package/dist/esm/components/pressable.js

@@ -70,7 +70,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "3.2.0",
+    packageVersion: "4.0.1",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/text.js

@@ -1,13 +1,10 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children"];
-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; }
-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; }
 /** @jsx jsx */
 import { createContext, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
+import { fontStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap } from '../xcss/style-maps.partial';
 import { useSurface } from './internal/surface-provider';
 var asAllowlist = ['span', 'p', 'strong', 'em'];
 // 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'];
 var resetStyles = css({
   margin: 0
 });
-var variantStyles = _objectSpread(_objectSpread({}, bodyTextStylesMap), uiTextStylesMap);
 var strongStyles = css({
   fontWeight: 'bold'
 });
@@ -102,7 +98,7 @@ var Text = function Text(_ref) {
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = jsx(Component, {
-    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],
+    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],
     style: {
       WebkitLineClamp: maxLines
     },

package/dist/esm/xcss/style-maps.partial.js

@@ -25,6 +25,7 @@ export var dimensionMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::f8111b846d3e3be67331853f10d1b568>>
@@ -63,6 +64,7 @@ export var allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), nega
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
@@ -138,6 +140,7 @@ export var surfaceColorMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
@@ -433,6 +436,7 @@ export var fillMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::01a4b055c311d198921d4e000a2d7a54>>
@@ -456,6 +460,7 @@ export var layerMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::d44c306cfe2334f9664fc122aa7d9fe6>>
@@ -482,24 +487,20 @@ export var borderRadiusMap = {
 /**
  * @codegenEnd
  */
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  */
-export var fontSizeMap = {
-  'font.size.050': "var(--ds-font-size-050, 11px)",
-  'font.size.075': "var(--ds-font-size-075, 12px)",
-  'font.size.100': "var(--ds-font-size-100, 14px)",
-  'font.size.200': "var(--ds-font-size-200, 16px)",
-  'font.size.300': "var(--ds-font-size-300, 20px)",
-  'font.size.400': "var(--ds-font-size-400, 24px)",
-  'font.size.500': "var(--ds-font-size-500, 29px)",
-  'font.size.600': "var(--ds-font-size-600, 35px)"
+export var bodyFontMap = {
+  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  '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)",
+  '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)"
 };
 export var fontWeightMap = {
   bold: "var(--ds-font-weight-bold, 700)",
@@ -508,31 +509,8 @@ export var fontWeightMap = {
   semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export var fontFamilyMap = {
-  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   '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)",
-  '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)",
-  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-  'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
-};
-export var lineHeightMap = {
-  'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
-  'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
-  'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
-  'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
-  'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
-  'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
-  'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
-};
-export var bodyTextMap = {
-  body: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  '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)",
-  '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)"
-};
-export var uiTextMap = {
-  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  '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)"
+  '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)"
 };
 
 /**
@@ -561,12 +539,9 @@ export var spaceStylesMap = spacingProperties.reduce(function (styleMap, spacing
 }, {});
 export var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
 export var textColorStylesMap = getSerializedStylesMap('color', textColorMap);
-export var fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
 export var fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
 export var fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
-export var lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
-export var bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
-export var uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
+export var fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
 export var surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
 export var isSurfaceColorToken = function isSurfaceColorToken(color) {
   return surfaceColorMap[color] !== undefined;

package/dist/types/components/text.d.ts

@@ -1,30 +1,9 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
+import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly ["span", "p", "strong", "em"];
 type AsElement = (typeof asAllowlist)[number];
-type TextPropsBody = {
-    /**
-     * Text variant.
-     */
-    variant?: BodyText;
-    /**
-     * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
-     *
-     * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
-     *
-     * Only available for `body` text variants.
-     */
-    maxLines?: number;
-};
-type TextPropsUi = {
-    /**
-     * Text variant.
-     */
-    variant: UiText;
-    maxLines?: never;
-};
 type TextPropsBase = {
     /**
      * HTML tag to be rendered. Defaults to `span`.
@@ -44,16 +23,26 @@ type TextPropsBase = {
      * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
      */
     id?: string;
+    /**
+     * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
+     *
+     * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
+     */
+    maxLines?: number;
     /**
      * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
+    /**
+     * Text variant.
+     */
+    variant?: BodyFont;
     /**
      * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
      */
     weight?: FontWeight;
 };
-export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
+export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'>;
 type TextAlign = keyof typeof textAlignMap;
 declare const textAlignMap: {
     center: import("@emotion/react").SerializedStyles;

package/dist/types/xcss/style-maps.partial.d.ts

@@ -515,24 +515,19 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  */
-export declare const fontSizeMap: {
-    'font.size.050': "var(--ds-font-size-050)";
-    'font.size.075': "var(--ds-font-size-075)";
-    'font.size.100': "var(--ds-font-size-100)";
-    'font.size.200': "var(--ds-font-size-200)";
-    'font.size.300': "var(--ds-font-size-300)";
-    'font.size.400': "var(--ds-font-size-400)";
-    'font.size.500': "var(--ds-font-size-500)";
-    'font.size.600': "var(--ds-font-size-600)";
+export declare const bodyFontMap: {
+    body: "var(--ds-font-body)";
+    'body.large': "var(--ds-font-body-large)";
+    'body.small': "var(--ds-font-body-small)";
 };
-export type FontSize = keyof typeof fontSizeMap;
+export type BodyFont = keyof typeof bodyFontMap;
 export declare const fontWeightMap: {
     bold: "var(--ds-font-weight-bold)";
     medium: "var(--ds-font-weight-medium)";
@@ -541,36 +536,10 @@ export declare const fontWeightMap: {
 };
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {
-    'font.family.body': "var(--ds-font-family-body)";
     'font.family.brand.body': "var(--ds-font-family-brand-body)";
     'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
-    'font.family.code': "var(--ds-font-family-code)";
-    'font.family.heading': "var(--ds-font-family-heading)";
-    'font.family.monospace': "var(--ds-font-family-monospace)";
-    'font.family.sans': "var(--ds-font-family-sans)";
 };
 export type FontFamily = keyof typeof fontFamilyMap;
-export declare const lineHeightMap: {
-    'font.lineHeight.1': "var(--ds-font-lineHeight-1)";
-    'font.lineHeight.100': "var(--ds-font-lineHeight-100)";
-    'font.lineHeight.200': "var(--ds-font-lineHeight-200)";
-    'font.lineHeight.300': "var(--ds-font-lineHeight-300)";
-    'font.lineHeight.400': "var(--ds-font-lineHeight-400)";
-    'font.lineHeight.500': "var(--ds-font-lineHeight-500)";
-    'font.lineHeight.600': "var(--ds-font-lineHeight-600)";
-};
-export type LineHeight = keyof typeof lineHeightMap;
-export declare const bodyTextMap: {
-    body: "var(--ds-font-body)";
-    'body.large': "var(--ds-font-body-large)";
-    'body.small': "var(--ds-font-body-small)";
-};
-export type BodyText = keyof typeof bodyTextMap;
-export declare const uiTextMap: {
-    ui: "var(--ds-font-ui)";
-    'ui.small': "var(--ds-font-ui-small)";
-};
-export type UiText = keyof typeof uiTextMap;
 /**
  * @codegenEnd
  */
@@ -671,32 +640,23 @@ type SpacingToken = keyof typeof positiveSpaceMap;
 type BackgroundColorToken = keyof typeof backgroundColorMap;
 type SurfaceColorToken = keyof typeof surfaceColorMap;
 type TextColorToken = keyof typeof textColorMap;
-type FontSizeToken = keyof typeof fontSizeMap;
 type FontWeightToken = keyof typeof fontWeightMap;
 type FontFamilyToken = keyof typeof fontFamilyMap;
-type LineHeightToken = keyof typeof lineHeightMap;
-type BodyTextToken = keyof typeof bodyTextMap;
-type UITextToken = keyof typeof uiTextMap;
+type BodyFontToken = keyof typeof bodyFontMap;
 type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
 type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
 type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
 type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
-type FontSizeStyleMap = Record<FontSizeToken, SerializedStyles>;
 type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
 type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
-type LineHeightStyleMap = Record<LineHeightToken, SerializedStyles>;
-type BodyTextStyleMap = Record<BodyTextToken, SerializedStyles>;
-type UITextStyleMap = Record<UITextToken, SerializedStyles>;
+type FontStyleMap = Record<BodyFontToken, SerializedStyles>;
 export declare const paddingStylesMap: SpacingStyleMap;
 export declare const spaceStylesMap: SpacingStyleMap;
 export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
 export declare const textColorStylesMap: TextColorStyleMap;
-export declare const fontSizeStylesMap: FontSizeStyleMap;
 export declare const fontWeightStylesMap: FontWeightStyleMap;
 export declare const fontFamilyStylesMap: FontFamilyStyleMap;
-export declare const lineHeightStylesMap: LineHeightStyleMap;
-export declare const bodyTextStylesMap: BodyTextStyleMap;
-export declare const uiTextStylesMap: UITextStyleMap;
+export declare const fontStylesMap: FontStyleMap;
 export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
 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";
 export {};

package/dist/types-ts4.5/components/text.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
+import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly [
     "span",
@@ -9,27 +9,6 @@ declare const asAllowlist: readonly [
     "em"
 ];
 type AsElement = (typeof asAllowlist)[number];
-type TextPropsBody = {
-    /**
-     * Text variant.
-     */
-    variant?: BodyText;
-    /**
-     * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
-     *
-     * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
-     *
-     * Only available for `body` text variants.
-     */
-    maxLines?: number;
-};
-type TextPropsUi = {
-    /**
-     * Text variant.
-     */
-    variant: UiText;
-    maxLines?: never;
-};
 type TextPropsBase = {
     /**
      * HTML tag to be rendered. Defaults to `span`.
@@ -49,16 +28,26 @@ type TextPropsBase = {
      * The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
      */
     id?: string;
+    /**
+     * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
+     *
+     * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
+     */
+    maxLines?: number;
     /**
      * The [HTML `text-align` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
      */
     textAlign?: TextAlign;
+    /**
+     * Text variant.
+     */
+    variant?: BodyFont;
     /**
      * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
      */
     weight?: FontWeight;
 };
-export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
+export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'>;
 type TextAlign = keyof typeof textAlignMap;
 declare const textAlignMap: {
     center: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -515,24 +515,19 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::aa70005b608c537f3d255a4a7f631198>>
+ * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
  * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
  * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
  */
-export declare const fontSizeMap: {
-    'font.size.050': "var(--ds-font-size-050)";
-    'font.size.075': "var(--ds-font-size-075)";
-    'font.size.100': "var(--ds-font-size-100)";
-    'font.size.200': "var(--ds-font-size-200)";
-    'font.size.300': "var(--ds-font-size-300)";
-    'font.size.400': "var(--ds-font-size-400)";
-    'font.size.500': "var(--ds-font-size-500)";
-    'font.size.600': "var(--ds-font-size-600)";
+export declare const bodyFontMap: {
+    body: "var(--ds-font-body)";
+    'body.large': "var(--ds-font-body-large)";
+    'body.small': "var(--ds-font-body-small)";
 };
-export type FontSize = keyof typeof fontSizeMap;
+export type BodyFont = keyof typeof bodyFontMap;
 export declare const fontWeightMap: {
     bold: "var(--ds-font-weight-bold)";
     medium: "var(--ds-font-weight-medium)";
@@ -541,36 +536,10 @@ export declare const fontWeightMap: {
 };
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {
-    'font.family.body': "var(--ds-font-family-body)";
     'font.family.brand.body': "var(--ds-font-family-brand-body)";
     'font.family.brand.heading': "var(--ds-font-family-brand-heading)";
-    'font.family.code': "var(--ds-font-family-code)";
-    'font.family.heading': "var(--ds-font-family-heading)";
-    'font.family.monospace': "var(--ds-font-family-monospace)";
-    'font.family.sans': "var(--ds-font-family-sans)";
 };
 export type FontFamily = keyof typeof fontFamilyMap;
-export declare const lineHeightMap: {
-    'font.lineHeight.1': "var(--ds-font-lineHeight-1)";
-    'font.lineHeight.100': "var(--ds-font-lineHeight-100)";
-    'font.lineHeight.200': "var(--ds-font-lineHeight-200)";
-    'font.lineHeight.300': "var(--ds-font-lineHeight-300)";
-    'font.lineHeight.400': "var(--ds-font-lineHeight-400)";
-    'font.lineHeight.500': "var(--ds-font-lineHeight-500)";
-    'font.lineHeight.600': "var(--ds-font-lineHeight-600)";
-};
-export type LineHeight = keyof typeof lineHeightMap;
-export declare const bodyTextMap: {
-    body: "var(--ds-font-body)";
-    'body.large': "var(--ds-font-body-large)";
-    'body.small': "var(--ds-font-body-small)";
-};
-export type BodyText = keyof typeof bodyTextMap;
-export declare const uiTextMap: {
-    ui: "var(--ds-font-ui)";
-    'ui.small': "var(--ds-font-ui-small)";
-};
-export type UiText = keyof typeof uiTextMap;
 /**
  * @codegenEnd
  */
@@ -682,32 +651,23 @@ type SpacingToken = keyof typeof positiveSpaceMap;
 type BackgroundColorToken = keyof typeof backgroundColorMap;
 type SurfaceColorToken = keyof typeof surfaceColorMap;
 type TextColorToken = keyof typeof textColorMap;
-type FontSizeToken = keyof typeof fontSizeMap;
 type FontWeightToken = keyof typeof fontWeightMap;
 type FontFamilyToken = keyof typeof fontFamilyMap;
-type LineHeightToken = keyof typeof lineHeightMap;
-type BodyTextToken = keyof typeof bodyTextMap;
-type UITextToken = keyof typeof uiTextMap;
+type BodyFontToken = keyof typeof bodyFontMap;
 type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
 type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
 type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
 type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
-type FontSizeStyleMap = Record<FontSizeToken, SerializedStyles>;
 type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
 type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
-type LineHeightStyleMap = Record<LineHeightToken, SerializedStyles>;
-type BodyTextStyleMap = Record<BodyTextToken, SerializedStyles>;
-type UITextStyleMap = Record<UITextToken, SerializedStyles>;
+type FontStyleMap = Record<BodyFontToken, SerializedStyles>;
 export declare const paddingStylesMap: SpacingStyleMap;
 export declare const spaceStylesMap: SpacingStyleMap;
 export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
 export declare const textColorStylesMap: TextColorStyleMap;
-export declare const fontSizeStylesMap: FontSizeStyleMap;
 export declare const fontWeightStylesMap: FontWeightStyleMap;
 export declare const fontFamilyStylesMap: FontFamilyStyleMap;
-export declare const lineHeightStylesMap: LineHeightStyleMap;
-export declare const bodyTextStylesMap: BodyTextStyleMap;
-export declare const uiTextStylesMap: UITextStyleMap;
+export declare const fontStylesMap: FontStyleMap;
 export declare const surfaceColorStylesMap: SurfaceColorStyleMap;
 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";
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "3.2.0",
+  "version": "4.0.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -127,7 +127,7 @@
     "@atlaskit/css": "^0.0.3",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/interaction-context": "^2.1.0",
-    "@atlaskit/tokens": "^1.38.0",
+    "@atlaskit/tokens": "^1.40.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",

package/scripts/border-codegen-template.tsx

@@ -1,8 +1,7 @@
 import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-shape';
+import { shape as tokens } from '@atlaskit/tokens/tokens-raw';
 
 import { capitalize, constructTokenFunctionCall } from './utils';
 

package/scripts/codegen-styles.tsx

@@ -117,7 +117,7 @@ const sourceFns = [
   // font*, lineheight
   () =>
     createPartialSignedArtifact(
-      options => options.map(createTypographyStylesFromTemplate).join('\n'),
+      createTypographyStylesFromTemplate,
       'yarn workspace @atlaskit/primitives codegen-styles',
       {
         id: 'typography',

package/scripts/color-codegen-template.tsx

@@ -1,10 +1,10 @@
 import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import legacyTokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-legacy-light';
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
+import {
+  legacyLightTokens as legacyTokens,
+  light as tokens,
+} from '@atlaskit/tokens/tokens-raw';
 
 import {
   capitalize,

package/scripts/elevation-codegen-template.tsx

@@ -2,10 +2,10 @@ import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import legacyTokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-legacy-light';
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
+import {
+  legacyLightTokens as legacyTokens,
+  light as tokens,
+} from '@atlaskit/tokens/tokens-raw';
 
 import {
   capitalize,

package/scripts/inverse-color-map-template.tsx

@@ -1,8 +1,7 @@
 import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
+import { light as tokens } from '@atlaskit/tokens/tokens-raw';
 
 import { compose, isAccent, not, pick } from './utils';
 

package/scripts/typography-codegen-template.tsx

@@ -10,58 +10,36 @@ type Token = {
   fallback: string;
 };
 
-const typographyProperties = {
-  heading: {
-    objectName: 'headingText',
-    prefix: 'font.heading',
+const activeTokens: Token[] = tokens
+  .filter(t => t.attributes.state === 'active')
+  .map(t => ({
+    name: t.name,
+    fallback: t.value,
+  }));
+
+const typographyProperties = [
+  {
+    objectName: 'bodyFont',
     cssProperty: 'font',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.heading'),
-  },
-  body: {
-    objectName: 'bodyText',
     prefix: 'font.body',
-    cssProperty: 'font',
     filterFn: <T extends Token>(t: T) => t.name.startsWith('font.body'),
   },
-  ui: {
-    objectName: 'uiText',
-    prefix: 'font.ui',
-    cssProperty: 'font',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.ui'),
-  },
-  fontSize: {
-    objectName: 'fontSize',
-    cssProperty: 'fontSize',
-    prefix: 'font.size',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.size'),
-  },
-  fontWeight: {
+  {
     objectName: 'fontWeight',
     cssProperty: 'fontWeight',
     prefix: 'font.weight.',
     filterFn: <T extends Token>(t: T) => t.name.startsWith('font.weight'),
   },
-  fontFamily: {
+  {
     objectName: 'fontFamily',
     cssProperty: 'fontFamily',
     prefix: 'font.family.',
     filterFn: <T extends Token>(t: T) => t.name.startsWith('font.family'),
   },
-  lineHeight: {
-    objectName: 'lineHeight',
-    cssProperty: 'lineHeight',
-    prefix: 'font.',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.lineHeight'),
-  },
-} as const;
-
-const activeTokens: Token[] = tokens.map(t => ({
-  name: t.name,
-  fallback: t.value,
-}));
+] as const;
 
 const removeVerbosity = (name: string): string => {
-  const partialRemove = ['font.heading', 'font.ui', 'font.body'];
+  const partialRemove = ['font.body'];
   if (partialRemove.some(s => name.includes(s))) {
     return name.replace('font.', '');
   }
@@ -75,18 +53,14 @@ const removeVerbosity = (name: string): string => {
   return name;
 };
 
-export const createTypographyStylesFromTemplate = (
-  typographyProperty: keyof typeof typographyProperties,
-) => {
-  if (!typographyProperties[typographyProperty]) {
-    throw new Error(`[codegen] Unknown option found "${typographyProperty}"`);
-  }
-
-  const { filterFn, objectName } = typographyProperties[typographyProperty];
+export const createTypographyStylesFromTemplate = () => {
+  return typographyProperties
+    .map(typographyProperty => {
+      const { filterFn, objectName } = typographyProperty;
 
-  return (
-    prettier.format(
-      `
+      return (
+        prettier.format(
+          `
 export const ${objectName}Map = {
 ${activeTokens
   .filter(filterFn)
@@ -102,13 +76,17 @@ ${activeTokens
   })
   .join(',\n\t')}
 };`,
-      {
-        singleQuote: true,
-        trailingComma: 'all',
-        parser: 'typescript',
-        plugins: [parserTypeScript],
-      },
-    ) +
-    `\nexport type ${capitalize(objectName)} = keyof typeof ${objectName}Map;\n`
-  );
+          {
+            singleQuote: true,
+            trailingComma: 'all',
+            parser: 'typescript',
+            plugins: [parserTypeScript],
+          },
+        ) +
+        `\nexport type ${capitalize(
+          objectName,
+        )} = keyof typeof ${objectName}Map;\n`
+      );
+    })
+    .join('\n');
 };