@atlaskit/primitives 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/primitives
 
+## 4.1.0
+
+### Minor Changes
+
+- [#80528](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80528) [`8877e9b57d55`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8877e9b57d55) - Added `size` prop which will replace `variant` prop in the next major version.
+
+## 4.0.2
+
+### Patch Changes
+
+- [#80805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80805) [`427c2dd9e0d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/427c2dd9e0d6) - Update input border color token and width to meet 3:1 color contrast
+- Updated dependencies
+
 ## 4.0.1
 
 ### Patch Changes

package/constellation/text/examples.mdx

@@ -13,7 +13,7 @@ import AsElement from '../../examples/constellation/text/as-element';
 
 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.
+The `size` prop expresses the visual appearance of the text element.
 
 <Example Component={Basic} pacckageName="@atlaskit/primitives" />
 

package/constellation/text/usage.mdx

@@ -6,4 +6,4 @@ order: 2
 
 ## Usage
 
-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.
+Use body text for main content, such as detailed descriptions or for text in components. For each size, we have coupled a line height ensuring that it is compliant with accessibility standards.

package/dist/cjs/components/anchor.js

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

package/dist/cjs/components/pressable.js

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

package/dist/cjs/components/text.js

@@ -47,6 +47,11 @@ var wordBreakMap = {
     wordBreak: 'break-all'
   })
 };
+var tempVariantSizeMap = {
+  body: 'medium',
+  'body.small': 'small',
+  'body.large': 'large'
+};
 var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
 var useHasTextAncestor = function useHasTextAncestor() {
   return (0, _react.useContext)(HasTextAncestorContext);
@@ -92,20 +97,17 @@ var Text = function Text(_ref) {
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'body' : _props$variant,
-    weight = props.weight;
-  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-
-  // Remove the ability to bypass typescript errors for maxLines
-  var maxLines;
-  if ('maxLines' in props && variant.includes('body')) {
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    variant = props.variant,
+    weight = props.weight,
     maxLines = props.maxLines;
-  }
+  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
+  var localSize = variant && tempVariantSizeMap[variant] || size;
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = (0, _react2.jsx)(Component, {
-    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],
+    css: [resetStyles, _styleMaps.fontStylesMap[localSize], 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.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;
+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.fontSizeMap = exports.fontFamilyStylesMap = exports.fontFamilyMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = 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");
@@ -73,10 +73,10 @@ var allSpaceMap = exports.allSpaceMap = _objectSpread(_objectSpread({}, positive
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::3c4b71fa7d31f43144f09508cc0bbfd7>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 var inverseColorMap = exports.inverseColorMap = {
   'color.background.neutral.bold': 'color.text.inverse',
@@ -114,11 +114,11 @@ var inverseColorMap = exports.inverseColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::c30600da6551bf7851adc37192d36ad6>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 var opacityMap = exports.opacityMap = {
   'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -149,11 +149,11 @@ var surfaceColorMap = exports.surfaceColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::cebd93cc2826bc8cdbcdca032e06b574>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 var borderColorMap = exports.borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -496,17 +496,17 @@ var borderRadiusMap = exports.borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @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 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 fontSizeMap = exports.fontSizeMap = {
+  medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  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)",
+  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)",
@@ -547,7 +547,7 @@ var backgroundColorStylesMap = exports.backgroundColorStylesMap = getSerializedS
 var textColorStylesMap = exports.textColorStylesMap = getSerializedStylesMap('color', textColorMap);
 var fontWeightStylesMap = exports.fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
 var fontFamilyStylesMap = exports.fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
-var fontStylesMap = exports.fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
+var fontStylesMap = exports.fontStylesMap = getSerializedStylesMap('font', fontSizeMap);
 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: "4.0.1",
+    packageVersion: "4.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

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

package/dist/es2019/components/text.js

@@ -38,6 +38,11 @@ const wordBreakMap = {
     wordBreak: 'break-all'
   })
 };
+const tempVariantSizeMap = {
+  body: 'medium',
+  'body.small': 'small',
+  'body.large': 'large'
+};
 const HasTextAncestorContext = /*#__PURE__*/createContext(false);
 const useHasTextAncestor = () => useContext(HasTextAncestorContext);
 
@@ -82,20 +87,17 @@ const Text = ({
     textAlign,
     testId,
     id,
-    variant = 'body',
-    weight
+    size = 'medium',
+    variant,
+    weight,
+    maxLines
   } = props;
   invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
-
-  // Remove the ability to bypass typescript errors for maxLines
-  let maxLines;
-  if ('maxLines' in props && variant.includes('body')) {
-    maxLines = props.maxLines;
-  }
+  const localSize = variant && tempVariantSizeMap[variant] || size;
   const hasTextAncestor = useHasTextAncestor();
   const color = useColor(colorProp, hasTextAncestor);
   const component = jsx(Component, {
-    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],
+    css: [resetStyles, fontStylesMap[localSize], 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

@@ -67,10 +67,10 @@ export const allSpaceMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::3c4b71fa7d31f43144f09508cc0bbfd7>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export const inverseColorMap = {
   'color.background.neutral.bold': 'color.text.inverse',
@@ -108,11 +108,11 @@ export const inverseColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::c30600da6551bf7851adc37192d36ad6>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export const opacityMap = {
   'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -143,11 +143,11 @@ export const surfaceColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::cebd93cc2826bc8cdbcdca032e06b574>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export const borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -490,17 +490,17 @@ export const borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @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 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 fontSizeMap = {
+  medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  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)",
+  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)",
@@ -543,6 +543,6 @@ export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor'
 export const textColorStylesMap = getSerializedStylesMap('color', textColorMap);
 export const fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
 export const fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
-export const fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
+export const fontStylesMap = getSerializedStylesMap('font', fontSizeMap);
 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: "4.0.1",
+    packageVersion: "4.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

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: "4.0.1",
+    packageVersion: "4.1.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/text.js

@@ -40,6 +40,11 @@ var wordBreakMap = {
     wordBreak: 'break-all'
   })
 };
+var tempVariantSizeMap = {
+  body: 'medium',
+  'body.small': 'small',
+  'body.large': 'large'
+};
 var HasTextAncestorContext = /*#__PURE__*/createContext(false);
 var useHasTextAncestor = function useHasTextAncestor() {
   return useContext(HasTextAncestorContext);
@@ -85,20 +90,17 @@ var Text = function Text(_ref) {
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'body' : _props$variant,
-    weight = props.weight;
-  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-
-  // Remove the ability to bypass typescript errors for maxLines
-  var maxLines;
-  if ('maxLines' in props && variant.includes('body')) {
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    variant = props.variant,
+    weight = props.weight,
     maxLines = props.maxLines;
-  }
+  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
+  var localSize = variant && tempVariantSizeMap[variant] || size;
   var hasTextAncestor = useHasTextAncestor();
   var color = useColor(colorProp, hasTextAncestor);
   var component = jsx(Component, {
-    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],
+    css: [resetStyles, fontStylesMap[localSize], 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

@@ -67,10 +67,10 @@ export var allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), nega
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::3c4b71fa7d31f43144f09508cc0bbfd7>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export var inverseColorMap = {
   'color.background.neutral.bold': 'color.text.inverse',
@@ -108,11 +108,11 @@ export var inverseColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::c30600da6551bf7851adc37192d36ad6>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export var opacityMap = {
   'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -143,11 +143,11 @@ export var surfaceColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::cebd93cc2826bc8cdbcdca032e06b574>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -490,17 +490,17 @@ export var borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @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 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 fontSizeMap = {
+  medium: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  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)",
+  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)",
@@ -541,7 +541,7 @@ export var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor',
 export var textColorStylesMap = getSerializedStylesMap('color', textColorMap);
 export var fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
 export var fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
-export var fontStylesMap = getSerializedStylesMap('font', bodyFontMap);
+export var fontStylesMap = getSerializedStylesMap('font', fontSizeMap);
 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,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
+import { FontSize, 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];
@@ -34,9 +34,13 @@ type TextPropsBase = {
      */
     textAlign?: TextAlign;
     /**
-     * Text variant.
+     * @deprecated. Use size instead.
      */
-    variant?: BodyFont;
+    variant?: 'body' | 'body.small' | 'body.large';
+    /**
+     * Text size.
+     */
+    size?: FontSize;
     /**
      * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
      */

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

@@ -88,10 +88,10 @@ export type AllSpace = keyof typeof allSpaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::3c4b71fa7d31f43144f09508cc0bbfd7>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export declare const inverseColorMap: {
     readonly 'color.background.neutral.bold': "color.text.inverse";
@@ -127,11 +127,11 @@ export declare const inverseColorMap: {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::c30600da6551bf7851adc37192d36ad6>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export declare const opacityMap: {
     readonly 'opacity.disabled': "var(--ds-opacity-disabled)";
@@ -164,11 +164,11 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::cebd93cc2826bc8cdbcdca032e06b574>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -515,19 +515,19 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @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 bodyFontMap: {
-    body: "var(--ds-font-body)";
-    'body.large': "var(--ds-font-body-large)";
-    'body.small': "var(--ds-font-body-small)";
+export declare const fontSizeMap: {
+    medium: "var(--ds-font-body)";
+    large: "var(--ds-font-body-large)";
+    small: "var(--ds-font-body-small)";
 };
-export type BodyFont = keyof typeof bodyFontMap;
+export type FontSize = keyof typeof fontSizeMap;
 export declare const fontWeightMap: {
     bold: "var(--ds-font-weight-bold)";
     medium: "var(--ds-font-weight-medium)";
@@ -642,7 +642,7 @@ type SurfaceColorToken = keyof typeof surfaceColorMap;
 type TextColorToken = keyof typeof textColorMap;
 type FontWeightToken = keyof typeof fontWeightMap;
 type FontFamilyToken = keyof typeof fontFamilyMap;
-type BodyFontToken = keyof typeof bodyFontMap;
+type BodyFontToken = keyof typeof fontSizeMap;
 type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
 type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
 type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyFont, FontWeight, TextColor } from '../xcss/style-maps.partial';
+import { FontSize, FontWeight, TextColor } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly [
     "span",
@@ -39,9 +39,13 @@ type TextPropsBase = {
      */
     textAlign?: TextAlign;
     /**
-     * Text variant.
+     * @deprecated. Use size instead.
      */
-    variant?: BodyFont;
+    variant?: 'body' | 'body.small' | 'body.large';
+    /**
+     * Text size.
+     */
+    size?: FontSize;
     /**
      * The [HTML `font-weight` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
      */

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

@@ -88,10 +88,10 @@ export type AllSpace = keyof typeof allSpaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::3c4b71fa7d31f43144f09508cc0bbfd7>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export declare const inverseColorMap: {
     readonly 'color.background.neutral.bold': "color.text.inverse";
@@ -127,11 +127,11 @@ export declare const inverseColorMap: {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::c30600da6551bf7851adc37192d36ad6>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export declare const opacityMap: {
     readonly 'opacity.disabled': "var(--ds-opacity-disabled)";
@@ -164,11 +164,11 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::cebd93cc2826bc8cdbcdca032e06b574>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::c9f456a6060fb74421e49528d00f56ab>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -515,19 +515,19 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76c411b57ce0b5e8faa09cb692065229>>
+ * @codegen <<SignedSource::64be523321fab6adc76673ef5f93e3d1>>
  * @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 bodyFontMap: {
-    body: "var(--ds-font-body)";
-    'body.large': "var(--ds-font-body-large)";
-    'body.small': "var(--ds-font-body-small)";
+export declare const fontSizeMap: {
+    medium: "var(--ds-font-body)";
+    large: "var(--ds-font-body-large)";
+    small: "var(--ds-font-body-small)";
 };
-export type BodyFont = keyof typeof bodyFontMap;
+export type FontSize = keyof typeof fontSizeMap;
 export declare const fontWeightMap: {
     bold: "var(--ds-font-weight-bold)";
     medium: "var(--ds-font-weight-medium)";
@@ -653,7 +653,7 @@ type SurfaceColorToken = keyof typeof surfaceColorMap;
 type TextColorToken = keyof typeof textColorMap;
 type FontWeightToken = keyof typeof fontWeightMap;
 type FontFamilyToken = keyof typeof fontFamilyMap;
-type BodyFontToken = keyof typeof bodyFontMap;
+type BodyFontToken = keyof typeof fontSizeMap;
 type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
 type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
 type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "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.40.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",

package/scripts/typography-codegen-template.tsx

@@ -19,7 +19,7 @@ const activeTokens: Token[] = tokens
 
 const typographyProperties = [
   {
-    objectName: 'bodyFont',
+    objectName: 'fontSize',
     cssProperty: 'font',
     prefix: 'font.body',
     filterFn: <T extends Token>(t: T) => t.name.startsWith('font.body'),
@@ -38,10 +38,17 @@ const typographyProperties = [
   },
 ] as const;
 
+const bodySizeMap = {
+  body: 'medium',
+  'body.small': 'small',
+  'body.large': 'large',
+};
+
 const removeVerbosity = (name: string): string => {
   const partialRemove = ['font.body'];
   if (partialRemove.some(s => name.includes(s))) {
-    return name.replace('font.', '');
+    // @ts-expect-error Indexing bodySizeMap
+    return bodySizeMap[name.replace('font.', '')];
   }
 
   const fullRemove = ['font.weight'];