@atlaskit/primitives 1.19.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/primitives
 
+## 2.0.0
+
+### Major Changes
+
+- [#68009](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68009) [`1168354ed6ef`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1168354ed6ef) - We now ensure the specificity of our `xcss`-based overrides are consistent across all primitives so `xcss` will always override props.
+
+  This resulted in a breaking change wtih Grid. For example, `<Grid templateAreas="…" xcss({ gridTemplateAreas: "…" })>` will result in different styles resolution before and after this version. This applies to `templateAreas`, `templateColumns`, and `templateRows`). From static analysis, we found only one known usage of this and it has been resolved.
+
+## 1.20.0
+
+### Minor Changes
+
+- [#68163](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68163) [`67d09e3f972d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/67d09e3f972d) - `weight` property added to `Text` to allow overriding text variant default font weight.
+- [#69343](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69343) [`77249f536425`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77249f536425) - `Text` color prop defaults to `color.text` if not provided.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.19.0
 
 ### Minor Changes

package/dist/cjs/components/grid.js

@@ -1,15 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
 /** @jsx jsx */
 
+var gridTemplateAreasVar = '--ds-grid--grid-template-areas';
+var gridTemplateColumnsVar = '--ds-grid--grid-template-columns';
+var gridTemplateRowsVar = '--ds-grid--grid-template-rows';
 var justifyContentMap = {
   start: (0, _react2.css)({
     justifyContent: 'start'
@@ -86,7 +91,10 @@ var alignItemsMap = {
 };
 var baseStyles = (0, _react2.css)({
   display: 'grid',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  gridTemplateAreas: "var(".concat(gridTemplateAreasVar, ")"),
+  gridTemplateColumns: "var(".concat(gridTemplateColumnsVar, ")"),
+  gridTemplateRows: "var(".concat(gridTemplateRowsVar, ")")
 });
 var gridAutoFlowMap = {
   row: (0, _react2.css)({
@@ -145,20 +153,28 @@ var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     xcss = _ref.xcss;
   var Component = as || 'div';
   var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
-  var style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
-    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(function (str) {
+
+  /**
+   * We use CSS variables to allow for dynamic grid templates instead of dynamically setting to `props.style`
+   * This allows `props.xcss` to override them as `style={{ gridTemplateAreas }}` would have higher specificity.
+   *
+   * This must be reset to `initial` if `gridTemplateAreas` is not set, otherwise nested grids will break!
+   *
+   * NOTE: If we disallow `grid-template-areas` (etc) to be set via `props.xcss`, we can remove this.
+   */
+  var style = (0, _react.useMemo)(function () {
+    var _ref2;
+    return _ref2 = {}, (0, _defineProperty2.default)(_ref2, gridTemplateAreasVar, gridTemplateAreas ? gridTemplateAreas.map(function (str) {
       return "\"".concat(str, "\"");
-    }).join('\n') : undefined,
-    gridTemplateColumns: gridTemplateColumns,
-    gridTemplateRows: gridTemplateRows
-  }) : undefined;
+    }).join('\n') || 'initial' : 'initial'), (0, _defineProperty2.default)(_ref2, gridTemplateColumnsVar, gridTemplateColumns || 'initial'), (0, _defineProperty2.default)(_ref2, gridTemplateRowsVar, gridTemplateRows || 'initial'), _ref2;
+  }, [gridTemplateAreas, gridTemplateColumns, gridTemplateRows]);
   return (0, _react2.jsx)(Component, {
     id: id,
     role: role,
     style: style,
     css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName && xcssClassName],
+    xcssClassName],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/cjs/components/text.js

@@ -83,21 +83,18 @@ var Text = function Text(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var asElement = props.as,
-    colorProp = props.color,
+    _props$color = props.color,
+    colorProp = _props$color === void 0 ? 'color.text' : _props$color,
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
     _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'body' : _props$variant;
-  var Component = asElement;
-  if (!Component) {
-    if (variant.includes('body')) {
-      Component = 'p';
-    } else {
-      // ui text and default => span
-      Component = 'span';
-    }
-  }
+    variant = _props$variant === void 0 ? 'body' : _props$variant,
+    weight = props.weight;
+
+  // body variants -> p
+  // ui variants -> span
+  var Component = asElement || (variant.includes('body') ? 'p' : 'span');
   (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
@@ -116,7 +113,7 @@ var Text = function Text(_ref) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
   }
   var component = (0, _react2.jsx)(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

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

@@ -496,7 +496,7 @@ var borderRadiusMap = exports.borderRadiusMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -514,10 +514,10 @@ var fontSizeMap = exports.fontSizeMap = {
   'font.size.600': "var(--ds-font-size-600, 35px)"
 };
 var fontWeightMap = exports.fontWeightMap = {
-  'font.weight.bold': "var(--ds-font-weight-bold, 700)",
-  'font.weight.medium': "var(--ds-font-weight-medium, 500)",
-  'font.weight.regular': "var(--ds-font-weight-regular, 400)",
-  'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
+  bold: "var(--ds-font-weight-bold, 700)",
+  medium: "var(--ds-font-weight-medium, 500)",
+  regular: "var(--ds-font-weight-regular, 400)",
+  semibold: "var(--ds-font-weight-semibold, 600)"
 };
 var fontFamilyMap = exports.fontFamilyMap = {
   'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -542,7 +542,7 @@ var bodyTextMap = exports.bodyTextMap = {
   'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 var uiTextMap = exports.uiTextMap = {
-  ui: "var(--ds-font-ui, normal 400 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 

package/dist/es2019/components/grid.js

@@ -1,8 +1,11 @@
 /** @jsx jsx */
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { spaceStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
+const gridTemplateAreasVar = '--ds-grid--grid-template-areas';
+const gridTemplateColumnsVar = '--ds-grid--grid-template-columns';
+const gridTemplateRowsVar = '--ds-grid--grid-template-rows';
 const justifyContentMap = {
   start: css({
     justifyContent: 'start'
@@ -79,7 +82,10 @@ const alignItemsMap = {
 };
 const baseStyles = css({
   display: 'grid',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  gridTemplateAreas: `var(${gridTemplateAreasVar})`,
+  gridTemplateColumns: `var(${gridTemplateColumnsVar})`,
+  gridTemplateRows: `var(${gridTemplateRowsVar})`
 });
 const gridAutoFlowMap = {
   row: css({
@@ -139,18 +145,27 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, ref) => {
   const Component = as || 'div';
   const xcssClassName = xcss && parseXcss(xcss);
-  const style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
-    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(str => `"${str}"`).join('\n') : undefined,
-    gridTemplateColumns,
-    gridTemplateRows
-  }) : undefined;
+
+  /**
+   * We use CSS variables to allow for dynamic grid templates instead of dynamically setting to `props.style`
+   * This allows `props.xcss` to override them as `style={{ gridTemplateAreas }}` would have higher specificity.
+   *
+   * This must be reset to `initial` if `gridTemplateAreas` is not set, otherwise nested grids will break!
+   *
+   * NOTE: If we disallow `grid-template-areas` (etc) to be set via `props.xcss`, we can remove this.
+   */
+  const style = useMemo(() => ({
+    [gridTemplateAreasVar]: gridTemplateAreas ? gridTemplateAreas.map(str => `"${str}"`).join('\n') || 'initial' : 'initial',
+    [gridTemplateColumnsVar]: gridTemplateColumns || 'initial',
+    [gridTemplateRowsVar]: gridTemplateRows || 'initial'
+  }), [gridTemplateAreas, gridTemplateColumns, gridTemplateRows]);
   return jsx(Component, {
     id: id,
     role: role,
     style: style,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName && xcssClassName],
+    xcssClassName],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/es2019/components/text.js

@@ -2,7 +2,7 @@
 import { createContext, Fragment, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { bodyTextStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
+import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } 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.
@@ -75,21 +75,17 @@ const Text = ({
 }) => {
   const {
     as: asElement,
-    color: colorProp,
+    color: colorProp = 'color.text',
     textAlign,
     testId,
     id,
-    variant = 'body'
+    variant = 'body',
+    weight
   } = props;
-  let Component = asElement;
-  if (!Component) {
-    if (variant.includes('body')) {
-      Component = 'p';
-    } else {
-      // ui text and default => span
-      Component = 'span';
-    }
-  }
+
+  // body variants -> p
+  // ui variants -> span
+  const Component = asElement || (variant.includes('body') ? 'p' : 'span');
   invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
 
   // Remove the ability to bypass typescript errors for maxLines
@@ -108,7 +104,7 @@ const Text = ({
     return jsx(Fragment, null, children);
   }
   const component = jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

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

@@ -484,7 +484,7 @@ export const borderRadiusMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -502,10 +502,10 @@ export const fontSizeMap = {
   'font.size.600': "var(--ds-font-size-600, 35px)"
 };
 export const fontWeightMap = {
-  'font.weight.bold': "var(--ds-font-weight-bold, 700)",
-  'font.weight.medium': "var(--ds-font-weight-medium, 500)",
-  'font.weight.regular': "var(--ds-font-weight-regular, 400)",
-  'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
+  bold: "var(--ds-font-weight-bold, 700)",
+  medium: "var(--ds-font-weight-medium, 500)",
+  regular: "var(--ds-font-weight-regular, 400)",
+  semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export const fontFamilyMap = {
   'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -530,7 +530,7 @@ export const bodyTextMap = {
   'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 export const uiTextMap = {
-  ui: "var(--ds-font-ui, normal 400 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 

package/dist/esm/components/grid.js

@@ -1,8 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { spaceStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
+var gridTemplateAreasVar = '--ds-grid--grid-template-areas';
+var gridTemplateColumnsVar = '--ds-grid--grid-template-columns';
+var gridTemplateRowsVar = '--ds-grid--grid-template-rows';
 var justifyContentMap = {
   start: css({
     justifyContent: 'start'
@@ -79,7 +83,10 @@ var alignItemsMap = {
 };
 var baseStyles = css({
   display: 'grid',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  gridTemplateAreas: "var(".concat(gridTemplateAreasVar, ")"),
+  gridTemplateColumns: "var(".concat(gridTemplateColumnsVar, ")"),
+  gridTemplateRows: "var(".concat(gridTemplateRowsVar, ")")
 });
 var gridAutoFlowMap = {
   row: css({
@@ -138,20 +145,28 @@ var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss = _ref.xcss;
   var Component = as || 'div';
   var xcssClassName = xcss && parseXcss(xcss);
-  var style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
-    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(function (str) {
+
+  /**
+   * We use CSS variables to allow for dynamic grid templates instead of dynamically setting to `props.style`
+   * This allows `props.xcss` to override them as `style={{ gridTemplateAreas }}` would have higher specificity.
+   *
+   * This must be reset to `initial` if `gridTemplateAreas` is not set, otherwise nested grids will break!
+   *
+   * NOTE: If we disallow `grid-template-areas` (etc) to be set via `props.xcss`, we can remove this.
+   */
+  var style = useMemo(function () {
+    var _ref2;
+    return _ref2 = {}, _defineProperty(_ref2, gridTemplateAreasVar, gridTemplateAreas ? gridTemplateAreas.map(function (str) {
       return "\"".concat(str, "\"");
-    }).join('\n') : undefined,
-    gridTemplateColumns: gridTemplateColumns,
-    gridTemplateRows: gridTemplateRows
-  }) : undefined;
+    }).join('\n') || 'initial' : 'initial'), _defineProperty(_ref2, gridTemplateColumnsVar, gridTemplateColumns || 'initial'), _defineProperty(_ref2, gridTemplateRowsVar, gridTemplateRows || 'initial'), _ref2;
+  }, [gridTemplateAreas, gridTemplateColumns, gridTemplateRows]);
   return jsx(Component, {
     id: id,
     role: role,
     style: style,
     css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    xcssClassName && xcssClassName],
+    xcssClassName],
     "data-testid": testId,
     ref: ref
   }, children);

package/dist/esm/components/text.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createContext, Fragment, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { bodyTextStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
+import { bodyTextStylesMap, fontWeightStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } 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.
@@ -77,21 +77,18 @@ var Text = function Text(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   var asElement = props.as,
-    colorProp = props.color,
+    _props$color = props.color,
+    colorProp = _props$color === void 0 ? 'color.text' : _props$color,
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
     _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'body' : _props$variant;
-  var Component = asElement;
-  if (!Component) {
-    if (variant.includes('body')) {
-      Component = 'p';
-    } else {
-      // ui text and default => span
-      Component = 'span';
-    }
-  }
+    variant = _props$variant === void 0 ? 'body' : _props$variant,
+    weight = props.weight;
+
+  // body variants -> p
+  // ui variants -> span
+  var Component = asElement || (variant.includes('body') ? 'p' : 'span');
   invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
 
   // Remove the ability to bypass typescript errors for maxLines
@@ -110,7 +107,7 @@ var Text = function Text(_ref) {
     return jsx(Fragment, null, children);
   }
   var component = jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
     },

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

@@ -484,7 +484,7 @@ export var borderRadiusMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -502,10 +502,10 @@ export var fontSizeMap = {
   'font.size.600': "var(--ds-font-size-600, 35px)"
 };
 export var fontWeightMap = {
-  'font.weight.bold': "var(--ds-font-weight-bold, 700)",
-  'font.weight.medium': "var(--ds-font-weight-medium, 500)",
-  'font.weight.regular': "var(--ds-font-weight-regular, 400)",
-  'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
+  bold: "var(--ds-font-weight-bold, 700)",
+  medium: "var(--ds-font-weight-medium, 500)",
+  regular: "var(--ds-font-weight-regular, 400)",
+  semibold: "var(--ds-font-weight-semibold, 600)"
 };
 export var fontFamilyMap = {
   'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
@@ -530,7 +530,7 @@ export var bodyTextMap = {
   'body.small': "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 export var uiTextMap = {
-  ui: "var(--ds-font-ui, normal 400 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  ui: "var(--ds-font-ui, normal 500 14px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   'ui.small': "var(--ds-font-ui-small, normal 400 11px/1 ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 };
 

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ElementType, ReactNode } from 'react';
+import { type ElementType, type ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 export type GridProps<T extends ElementType = 'div'> = {
@@ -58,11 +58,11 @@ export type GridProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * HTML id attrubute
+     * HTML id attrubute.
      */
     id?: string;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -184,11 +184,11 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
      */
     children: ReactNode;
     /**
-     * HTML id attrubute
+     * HTML id attrubute.
      */
     id?: string | undefined;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "children" | "as" | "id" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyText, TextColor, UiText } from '../xcss/style-maps.partial';
+import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly ["span", "p", "strong", "em"];
 type AsElement = (typeof asAllowlist)[number];
@@ -48,6 +48,10 @@ type TextPropsBase = {
      * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
      */
     textAlign?: TextAlign;
+    /**
+     * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+     */
+    weight?: FontWeight;
 };
 export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
 type TextAlign = keyof typeof textAlignMap;

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

@@ -515,7 +515,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -534,10 +534,10 @@ export declare const fontSizeMap: {
 };
 export type FontSize = keyof typeof fontSizeMap;
 export declare const fontWeightMap: {
-    'font.weight.bold': "var(--ds-font-weight-bold)";
-    'font.weight.medium': "var(--ds-font-weight-medium)";
-    'font.weight.regular': "var(--ds-font-weight-regular)";
-    'font.weight.semibold': "var(--ds-font-weight-semibold)";
+    bold: "var(--ds-font-weight-bold)";
+    medium: "var(--ds-font-weight-medium)";
+    regular: "var(--ds-font-weight-regular)";
+    semibold: "var(--ds-font-weight-semibold)";
 };
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ElementType, ReactNode } from 'react';
+import { type ElementType, type ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 export type GridProps<T extends ElementType = 'div'> = {
@@ -58,11 +58,11 @@ export type GridProps<T extends ElementType = 'div'> = {
      */
     children: ReactNode;
     /**
-     * HTML id attrubute
+     * HTML id attrubute.
      */
     id?: string;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
@@ -184,11 +184,11 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
      */
     children: ReactNode;
     /**
-     * HTML id attrubute
+     * HTML id attrubute.
      */
     id?: string | undefined;
     /**
-     * Forwarded ref element
+     * Forwarded ref element.
      */
     ref?: any;
 } & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "children" | "as" | "id" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode } from 'react';
-import { BodyText, TextColor, UiText } from '../xcss/style-maps.partial';
+import { BodyText, FontWeight, TextColor, UiText } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly [
     "span",
@@ -53,6 +53,10 @@ type TextPropsBase = {
      * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
      */
     textAlign?: TextAlign;
+    /**
+     * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+     */
+    weight?: FontWeight;
 };
 export type TextProps = TextPropsBase & Omit<BasePrimitiveProps, 'xcss'> & (TextPropsBody | TextPropsUi);
 type TextAlign = keyof typeof textAlignMap;

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

@@ -515,7 +515,7 @@ export type BorderRadius = keyof typeof borderRadiusMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::badcf0eda5c0c2a7dca4428cc42a5db9>>
+ * @codegen <<SignedSource::402816562c359603300fda81596a2978>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
@@ -534,10 +534,10 @@ export declare const fontSizeMap: {
 };
 export type FontSize = keyof typeof fontSizeMap;
 export declare const fontWeightMap: {
-    'font.weight.bold': "var(--ds-font-weight-bold)";
-    'font.weight.medium': "var(--ds-font-weight-medium)";
-    'font.weight.regular': "var(--ds-font-weight-regular)";
-    'font.weight.semibold': "var(--ds-font-weight-semibold)";
+    bold: "var(--ds-font-weight-bold)";
+    medium: "var(--ds-font-weight-medium)";
+    regular: "var(--ds-font-weight-regular)";
+    semibold: "var(--ds-font-weight-semibold)";
 };
 export type FontWeight = keyof typeof fontWeightMap;
 export declare const fontFamilyMap: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.19.0",
+  "version": "2.0.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -105,7 +105,7 @@
   },
   "dependencies": {
     "@atlaskit/app-provider": "^0.4.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",

package/scripts/typography-codegen-template.tsx

@@ -61,10 +61,17 @@ const activeTokens: Token[] = tokens.map(t => ({
 }));
 
 const removeVerbosity = (name: string): string => {
-  const toRemove = ['font.heading', 'font.ui', 'font.body'];
-  if (toRemove.some(s => name.includes(s))) {
+  const partialRemove = ['font.heading', 'font.ui', 'font.body'];
+  if (partialRemove.some(s => name.includes(s))) {
     return name.replace('font.', '');
   }
+
+  const fullRemove = ['font.weight'];
+  const removeIndex = fullRemove.findIndex(s => name.includes(s));
+  if (removeIndex > -1) {
+    return name.replace(`${fullRemove[removeIndex]}.`, '');
+  }
+
   return name;
 };