@atlaskit/primitives - npm Package Compare versions

Comparing version 1.6.5 to 1.6.6

CHANGELOG.md

 # @atlaskit/primitives
 
+## 1.6.6
+
+### Patch Changes
+
+- [#41440](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41440) [`5c01cb4e16d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c01cb4e16d) - Add surface color context to Box. Refine Text API.
+
 ## 1.6.5
@@ -4,0 +10,0 @@

dist/cjs/components/box.js

@@ -14,2 +14,3 @@ "use strict";
 var _xcss = require("../xcss/xcss");
+var _surfaceProvider = require("./internal/surface-provider");
 var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
@@ -55,17 +56,19 @@ _excluded2 = ["className"];
   var className = xcss && (0, _xcss.parseXcss)(xcss);
-  return (
-    // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
-    (0, _react2.jsx)(Component, (0, _extends2.default)({
-      style: style
-      // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
-      ,
-      ref: ref
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    }, safeHtmlAttributes, {
-      css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor], (0, _styleMaps.isSurfaceColorToken)(backgroundColor) && _styleMaps.surfaceColorStylesMap[backgroundColor], padding && _styleMaps.paddingStylesMap.padding[padding], paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      className],
-      "data-testid": testId
-    }), children)
-  );
+  var node =
+  // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
+  (0, _react2.jsx)(Component, (0, _extends2.default)({
+    style: style
+    // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
+    ,
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, safeHtmlAttributes, {
+    css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor], (0, _styleMaps.isSurfaceColorToken)(backgroundColor) && _styleMaps.surfaceColorStylesMap[backgroundColor], padding && _styleMaps.paddingStylesMap.padding[padding], paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    className],
+    "data-testid": testId
+  }), children);
+  return backgroundColor ? (0, _react2.jsx)(_surfaceProvider.SurfaceContext.Provider, {
+    value: backgroundColor
+  }, node) : node;
 });
@@ -72,0 +75,0 @@ var _default = exports.default = Box;

dist/cjs/components/text.js

@@ -14,10 +14,14 @@ "use strict";
 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 */
-// import surfaceColorMap from '../internal/color-map';
-
-// import { useSurface } from './internal/surface-provider';
-var asAllowlist = ['span', 'p', 'strong', 'em', 'label'];
+var asAllowlist = ['span', 'p', 'strong', 'em'];
 var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
+var strongStyles = (0, _react2.css)({
+  fontWeight: "var(--ds-font-weight-bold, bold)"
+});
+var emStyles = (0, _react2.css)({
+  fontStyle: 'italic'
+});
 var textAlignMap = {
@@ -34,8 +38,2 @@ center: (0, _react2.css)({
 };
-
-// p tag has padding on top in css-reset. dont know if we want to add it here
-var baseStyles = (0, _react2.css)({
-  margin: "var(--ds-space-0, 0px)",
-  padding: "var(--ds-space-0, 0px)"
-});
 var truncateStyles = (0, _react2.css)({
@@ -47,27 +45,16 @@ overflow: 'hidden',
 
-// TODO
-// const asElementStyles: Record<AsElement, SerializedStyles> = {
-//   abbr: css({
-//     borderBottom: `1px ${token('color.border', '#ccc')} dotted`,
-//     cursor: 'help',
-//   }),
-// };
-
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
  */
-// const useColor = (colorProp: TextColor): NonNullable<TextColor> => {
-//   const surface = useSurface();
-//   const inverseTextColor =
-//     surfaceColorMap[surface as keyof typeof surfaceColorMap];
+var useColor = function useColor(colorProp) {
+  var surface = (0, _surfaceProvider.useSurface)();
+  var inverseTextColor = _styleMaps.inverseColorMap[surface];
 
-//   /**
-//    * Where the color of the surface is inverted we override the user choice
-//    * as there is no valid choice that is not covered by the override.
-//    */
-//   const color = inverseTextColor ?? colorProp;
-
-//   return color;
-// };
-
+  /**
+   * Where the color of the surface is inverted we override the user choice
+   * as there is no valid choice that is not covered by the override.
+   */
+  var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
+  return color;
+};
 var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
@@ -91,2 +78,3 @@ var useHasTextAncestor = function useHasTextAncestor() {
   var asElement = props.as,
+    colorProp = props.color,
     _props$shouldTruncate = props.shouldTruncate,
@@ -97,3 +85,4 @@ shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
     id = props.id,
-    variant = props.variant;
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'body' : _props$variant;
   var Component = asElement;
@@ -108,4 +97,4 @@ if (!Component) {
   }
-  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-  // const color = useColor(colorProp!);
+  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
+  var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();
@@ -120,9 +109,4 @@
   }
-  var component = (0, _react2.jsx)(Component
-  // style={UNSAFE_style}
-  , {
-    css: [baseStyles, variant && variantStyles[variant],
-    // color && textColorMap[color],
-    // colorProp && textColorMap[colorProp],
-    shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign]],
+  var component = (0, _react2.jsx)(Component, {
+    css: [variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     "data-testid": testId,
@@ -129,0 +113,0 @@ id: id

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

@@ -7,3 +7,3 @@ "use strict";
 });
-exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.paddingStylesMap = exports.negativeSpaceMap = exports.lineHeightStylesMap = exports.lineHeightMap = exports.layerMap = exports.isSurfaceColorToken = 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 = void 0;
+exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.paddingStylesMap = 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 = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -74,2 +74,43 @@ var _react = require("@emotion/react");
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::310a54617a9f912145976996fcef66a5>>
+ * @codegenId inverse-colors
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::5188ac15a9f4d65b80cf12e4eecac815>>
+ */
+var inverseColorMap = exports.inverseColorMap = {
+  'color.background.neutral.bold': 'color.text.inverse',
+  'color.background.neutral.bold.hovered': 'color.text.inverse',
+  'color.background.neutral.bold.pressed': 'color.text.inverse',
+  'color.background.selected.bold': 'color.text.inverse',
+  'color.background.selected.bold.hovered': 'color.text.inverse',
+  'color.background.selected.bold.pressed': 'color.text.inverse',
+  'color.background.brand.bold': 'color.text.inverse',
+  'color.background.brand.bold.hovered': 'color.text.inverse',
+  'color.background.brand.bold.pressed': 'color.text.inverse',
+  'color.background.brand.boldest': 'color.text.inverse',
+  'color.background.brand.boldest.hovered': 'color.text.inverse',
+  'color.background.brand.boldest.pressed': 'color.text.inverse',
+  'color.background.danger.bold': 'color.text.inverse',
+  'color.background.danger.bold.hovered': 'color.text.inverse',
+  'color.background.danger.bold.pressed': 'color.text.inverse',
+  'color.background.warning.bold': 'color.text.warning.inverse',
+  'color.background.warning.bold.hovered': 'color.text.warning.inverse',
+  'color.background.warning.bold.pressed': 'color.text.warning.inverse',
+  'color.background.success.bold': 'color.text.inverse',
+  'color.background.success.bold.hovered': 'color.text.inverse',
+  'color.background.success.bold.pressed': 'color.text.inverse',
+  'color.background.discovery.bold': 'color.text.inverse',
+  'color.background.discovery.bold.hovered': 'color.text.inverse',
+  'color.background.discovery.bold.pressed': 'color.text.inverse',
+  'color.background.information.bold': 'color.text.inverse',
+  'color.background.information.bold.hovered': 'color.text.inverse',
+  'color.background.information.bold.pressed': 'color.text.inverse'
+};
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::b93d845e13422e2b25a860f34dc6882b>>
@@ -76,0 +117,0 @@ * @codegenId colors

dist/es2019/components/box.js

@@ -7,2 +7,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { parseXcss } from '../xcss/xcss';
+import { SurfaceContext } from './internal/surface-provider';
 
@@ -47,17 +48,19 @@ // Can either Exclude or Extract - here we're excluding all SVG-related elements
   const className = xcss && parseXcss(xcss);
-  return (
-    // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
-    jsx(Component, _extends({
-      style: style
-      // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
-      ,
-      ref: ref
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    }, safeHtmlAttributes, {
-      css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      className],
-      "data-testid": testId
-    }), children)
-  );
+  const node =
+  // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
+  jsx(Component, _extends({
+    style: style
+    // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
+    ,
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, safeHtmlAttributes, {
+    css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    className],
+    "data-testid": testId
+  }), children);
+  return backgroundColor ? jsx(SurfaceContext.Provider, {
+    value: backgroundColor
+  }, node) : node;
 });
@@ -64,0 +67,0 @@ export default Box;

dist/es2019/components/text.js

@@ -5,11 +5,5 @@ /** @jsx jsx */
 import invariant from 'tiny-invariant';
-import { bodyTextStylesMap
-
-// textColorStylesMap,
-, uiTextStylesMap } from '../xcss/style-maps.partial';
-
-// import surfaceColorMap from '../internal/color-map';
-
-// import { useSurface } from './internal/surface-provider';
-const asAllowlist = ['span', 'p', 'strong', 'em', 'label'];
+import { bodyTextStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
+import { useSurface } from './internal/surface-provider';
+const asAllowlist = ['span', 'p', 'strong', 'em'];
 const variantStyles = {
@@ -19,2 +13,8 @@ ...bodyTextStylesMap,
 };
+const strongStyles = css({
+  fontWeight: "var(--ds-font-weight-bold, bold)"
+});
+const emStyles = css({
+  fontStyle: 'italic'
+});
 const textAlignMap = {
@@ -31,8 +31,2 @@ center: css({
 };
-
-// p tag has padding on top in css-reset. dont know if we want to add it here
-const baseStyles = css({
-  margin: "var(--ds-space-0, 0px)",
-  padding: "var(--ds-space-0, 0px)"
-});
 const truncateStyles = css({
@@ -44,27 +38,16 @@ overflow: 'hidden',
 
-// TODO
-// const asElementStyles: Record<AsElement, SerializedStyles> = {
-//   abbr: css({
-//     borderBottom: `1px ${token('color.border', '#ccc')} dotted`,
-//     cursor: 'help',
-//   }),
-// };
-
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
  */
-// const useColor = (colorProp: TextColor): NonNullable<TextColor> => {
-//   const surface = useSurface();
-//   const inverseTextColor =
-//     surfaceColorMap[surface as keyof typeof surfaceColorMap];
+const useColor = colorProp => {
+  const surface = useSurface();
+  const inverseTextColor = inverseColorMap[surface];
 
-//   /**
-//    * Where the color of the surface is inverted we override the user choice
-//    * as there is no valid choice that is not covered by the override.
-//    */
-//   const color = inverseTextColor ?? colorProp;
-
-//   return color;
-// };
-
+  /**
+   * Where the color of the surface is inverted we override the user choice
+   * as there is no valid choice that is not covered by the override.
+   */
+  const color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
+  return color;
+};
 const HasTextAncestorContext = /*#__PURE__*/createContext(false);
@@ -88,3 +71,3 @@ const useHasTextAncestor = () => useContext(HasTextAncestorContext);
     as: asElement,
-    // color: colorProp,
+    color: colorProp,
     shouldTruncate = false,
@@ -94,3 +77,3 @@ textAlign,
     id,
-    variant
+    variant = 'body'
   } = props;
@@ -106,4 +89,4 @@ let Component = asElement;
   }
-  invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
-  // const color = useColor(colorProp!);
+  invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
+  const color = useColor(colorProp);
   const isWrapped = useHasTextAncestor();
@@ -118,9 +101,4 @@
   }
-  const component = jsx(Component
-  // style={UNSAFE_style}
-  , {
-    css: [baseStyles, variant && variantStyles[variant],
-    // color && textColorMap[color],
-    // colorProp && textColorMap[colorProp],
-    shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign]],
+  const component = jsx(Component, {
+    css: [variant && variantStyles[variant], color && textColorStylesMap[color], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     "data-testid": testId,
@@ -127,0 +105,0 @@ id: id

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

@@ -64,2 +64,43 @@ import { css } from '@emotion/react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::310a54617a9f912145976996fcef66a5>>
+ * @codegenId inverse-colors
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::5188ac15a9f4d65b80cf12e4eecac815>>
+ */
+export const inverseColorMap = {
+  'color.background.neutral.bold': 'color.text.inverse',
+  'color.background.neutral.bold.hovered': 'color.text.inverse',
+  'color.background.neutral.bold.pressed': 'color.text.inverse',
+  'color.background.selected.bold': 'color.text.inverse',
+  'color.background.selected.bold.hovered': 'color.text.inverse',
+  'color.background.selected.bold.pressed': 'color.text.inverse',
+  'color.background.brand.bold': 'color.text.inverse',
+  'color.background.brand.bold.hovered': 'color.text.inverse',
+  'color.background.brand.bold.pressed': 'color.text.inverse',
+  'color.background.brand.boldest': 'color.text.inverse',
+  'color.background.brand.boldest.hovered': 'color.text.inverse',
+  'color.background.brand.boldest.pressed': 'color.text.inverse',
+  'color.background.danger.bold': 'color.text.inverse',
+  'color.background.danger.bold.hovered': 'color.text.inverse',
+  'color.background.danger.bold.pressed': 'color.text.inverse',
+  'color.background.warning.bold': 'color.text.warning.inverse',
+  'color.background.warning.bold.hovered': 'color.text.warning.inverse',
+  'color.background.warning.bold.pressed': 'color.text.warning.inverse',
+  'color.background.success.bold': 'color.text.inverse',
+  'color.background.success.bold.hovered': 'color.text.inverse',
+  'color.background.success.bold.pressed': 'color.text.inverse',
+  'color.background.discovery.bold': 'color.text.inverse',
+  'color.background.discovery.bold.hovered': 'color.text.inverse',
+  'color.background.discovery.bold.pressed': 'color.text.inverse',
+  'color.background.information.bold': 'color.text.inverse',
+  'color.background.information.bold.hovered': 'color.text.inverse',
+  'color.background.information.bold.pressed': 'color.text.inverse'
+};
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::b93d845e13422e2b25a860f34dc6882b>>
@@ -66,0 +107,0 @@ * @codegenId colors

dist/esm/components/box.js

@@ -10,2 +10,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { parseXcss } from '../xcss/xcss';
+import { SurfaceContext } from './internal/surface-provider';
 
@@ -48,17 +49,19 @@ // Can either Exclude or Extract - here we're excluding all SVG-related elements
   var className = xcss && parseXcss(xcss);
-  return (
-    // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
-    jsx(Component, _extends({
-      style: style
-      // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
-      ,
-      ref: ref
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    }, safeHtmlAttributes, {
-      css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      className],
-      "data-testid": testId
-    }), children)
-  );
+  var node =
+  // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
+  jsx(Component, _extends({
+    style: style
+    // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
+    ,
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, safeHtmlAttributes, {
+    css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    className],
+    "data-testid": testId
+  }), children);
+  return backgroundColor ? jsx(SurfaceContext.Provider, {
+    value: backgroundColor
+  }, node) : node;
 });
@@ -65,0 +68,0 @@ export default Box;

dist/esm/components/text.js

@@ -10,12 +10,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import invariant from 'tiny-invariant';
-import { bodyTextStylesMap
-
-// textColorStylesMap,
-, uiTextStylesMap } from '../xcss/style-maps.partial';
-
-// import surfaceColorMap from '../internal/color-map';
-
-// import { useSurface } from './internal/surface-provider';
-var asAllowlist = ['span', 'p', 'strong', 'em', 'label'];
+import { bodyTextStylesMap, inverseColorMap, textColorStylesMap, uiTextStylesMap } from '../xcss/style-maps.partial';
+import { useSurface } from './internal/surface-provider';
+var asAllowlist = ['span', 'p', 'strong', 'em'];
 var variantStyles = _objectSpread(_objectSpread({}, bodyTextStylesMap), uiTextStylesMap);
+var strongStyles = css({
+  fontWeight: "var(--ds-font-weight-bold, bold)"
+});
+var emStyles = css({
+  fontStyle: 'italic'
+});
 var textAlignMap = {
@@ -32,8 +32,2 @@ center: css({
 };
-
-// p tag has padding on top in css-reset. dont know if we want to add it here
-var baseStyles = css({
-  margin: "var(--ds-space-0, 0px)",
-  padding: "var(--ds-space-0, 0px)"
-});
 var truncateStyles = css({
@@ -45,27 +39,16 @@ overflow: 'hidden',
 
-// TODO
-// const asElementStyles: Record<AsElement, SerializedStyles> = {
-//   abbr: css({
-//     borderBottom: `1px ${token('color.border', '#ccc')} dotted`,
-//     cursor: 'help',
-//   }),
-// };
-
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
  */
-// const useColor = (colorProp: TextColor): NonNullable<TextColor> => {
-//   const surface = useSurface();
-//   const inverseTextColor =
-//     surfaceColorMap[surface as keyof typeof surfaceColorMap];
+var useColor = function useColor(colorProp) {
+  var surface = useSurface();
+  var inverseTextColor = inverseColorMap[surface];
 
-//   /**
-//    * Where the color of the surface is inverted we override the user choice
-//    * as there is no valid choice that is not covered by the override.
-//    */
-//   const color = inverseTextColor ?? colorProp;
-
-//   return color;
-// };
-
+  /**
+   * Where the color of the surface is inverted we override the user choice
+   * as there is no valid choice that is not covered by the override.
+   */
+  var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
+  return color;
+};
 var HasTextAncestorContext = /*#__PURE__*/createContext(false);
@@ -89,2 +72,3 @@ var useHasTextAncestor = function useHasTextAncestor() {
   var asElement = props.as,
+    colorProp = props.color,
     _props$shouldTruncate = props.shouldTruncate,
@@ -95,3 +79,4 @@ shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
     id = props.id,
-    variant = props.variant;
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'body' : _props$variant;
   var Component = asElement;
@@ -106,4 +91,4 @@ if (!Component) {
   }
-  invariant(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-  // const color = useColor(colorProp!);
+  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
+  var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();
@@ -118,9 +103,4 @@
   }
-  var component = jsx(Component
-  // style={UNSAFE_style}
-  , {
-    css: [baseStyles, variant && variantStyles[variant],
-    // color && textColorMap[color],
-    // colorProp && textColorMap[colorProp],
-    shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign]],
+  var component = jsx(Component, {
+    css: [variant && variantStyles[variant], color && textColorStylesMap[color], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     "data-testid": testId,
@@ -127,0 +107,0 @@ id: id

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

@@ -65,2 +65,43 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::310a54617a9f912145976996fcef66a5>>
+ * @codegenId inverse-colors
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::5188ac15a9f4d65b80cf12e4eecac815>>
+ */
+export var inverseColorMap = {
+  'color.background.neutral.bold': 'color.text.inverse',
+  'color.background.neutral.bold.hovered': 'color.text.inverse',
+  'color.background.neutral.bold.pressed': 'color.text.inverse',
+  'color.background.selected.bold': 'color.text.inverse',
+  'color.background.selected.bold.hovered': 'color.text.inverse',
+  'color.background.selected.bold.pressed': 'color.text.inverse',
+  'color.background.brand.bold': 'color.text.inverse',
+  'color.background.brand.bold.hovered': 'color.text.inverse',
+  'color.background.brand.bold.pressed': 'color.text.inverse',
+  'color.background.brand.boldest': 'color.text.inverse',
+  'color.background.brand.boldest.hovered': 'color.text.inverse',
+  'color.background.brand.boldest.pressed': 'color.text.inverse',
+  'color.background.danger.bold': 'color.text.inverse',
+  'color.background.danger.bold.hovered': 'color.text.inverse',
+  'color.background.danger.bold.pressed': 'color.text.inverse',
+  'color.background.warning.bold': 'color.text.warning.inverse',
+  'color.background.warning.bold.hovered': 'color.text.warning.inverse',
+  'color.background.warning.bold.pressed': 'color.text.warning.inverse',
+  'color.background.success.bold': 'color.text.inverse',
+  'color.background.success.bold.hovered': 'color.text.inverse',
+  'color.background.success.bold.pressed': 'color.text.inverse',
+  'color.background.discovery.bold': 'color.text.inverse',
+  'color.background.discovery.bold.hovered': 'color.text.inverse',
+  'color.background.discovery.bold.pressed': 'color.text.inverse',
+  'color.background.information.bold': 'color.text.inverse',
+  'color.background.information.bold.hovered': 'color.text.inverse',
+  'color.background.information.bold.pressed': 'color.text.inverse'
+};
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::b93d845e13422e2b25a860f34dc6882b>>
@@ -67,0 +108,0 @@ * @codegenId colors

dist/types-ts4.5/components/flex.d.ts

@@ -136,3 +136,3 @@ /** @jsx jsx */
     ref?: any;
-} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "wrap" | "as" | "children" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "wrap" | "children" | "as" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
 export default Flex;

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

@@ -194,3 +194,3 @@ /** @jsx jsx */
     ref?: any;
-} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "as" | "id" | "children" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "children" | "as" | "id" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;
 export default Grid;

dist/types-ts4.5/components/inline.d.ts

@@ -112,3 +112,3 @@ /** @jsx jsx */
     ref?: any;
-} & BasePrimitiveProps, "space" | "separator" | "as" | "children" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
 export default Inline;

dist/types-ts4.5/components/stack.d.ts

@@ -86,3 +86,3 @@ /** @jsx jsx */
     ref?: any;
-} & BasePrimitiveProps, "space" | "as" | "children" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
 export default Stack;

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

@@ -9,4 +9,3 @@ /** @jsx jsx */
     "strong",
-    "em",
-    "label"
+    "em"
 ];
@@ -27,6 +26,7 @@ type AsElement = (typeof asAllowlist)[number];
      */
-    variant: Variant;
+    variant?: Variant;
     /**
-     * Text color
-     * Pending colour exploration
+     * Token representing text color with a built-in fallback value.
+     * Will apply inverse text color automatically if placed within a Box with backgroundColor.
+     *
      */
@@ -41,3 +41,2 @@ color?: TextColor;
      * (i.e. `width` has been set on parent that is shorter than text length).
-     * Pending truncation exploration -- remove for now?
      */
@@ -44,0 +43,0 @@ shouldTruncate?: boolean;

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

@@ -65,2 +65,41 @@ import { SerializedStyles } from '@emotion/react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::310a54617a9f912145976996fcef66a5>>
+ * @codegenId inverse-colors
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::5188ac15a9f4d65b80cf12e4eecac815>>
+ */
+export declare const inverseColorMap: {
+    readonly 'color.background.neutral.bold': "color.text.inverse";
+    readonly 'color.background.neutral.bold.hovered': "color.text.inverse";
+    readonly 'color.background.neutral.bold.pressed': "color.text.inverse";
+    readonly 'color.background.selected.bold': "color.text.inverse";
+    readonly 'color.background.selected.bold.hovered': "color.text.inverse";
+    readonly 'color.background.selected.bold.pressed': "color.text.inverse";
+    readonly 'color.background.brand.bold': "color.text.inverse";
+    readonly 'color.background.brand.bold.hovered': "color.text.inverse";
+    readonly 'color.background.brand.bold.pressed': "color.text.inverse";
+    readonly 'color.background.brand.boldest': "color.text.inverse";
+    readonly 'color.background.brand.boldest.hovered': "color.text.inverse";
+    readonly 'color.background.brand.boldest.pressed': "color.text.inverse";
+    readonly 'color.background.danger.bold': "color.text.inverse";
+    readonly 'color.background.danger.bold.hovered': "color.text.inverse";
+    readonly 'color.background.danger.bold.pressed': "color.text.inverse";
+    readonly 'color.background.warning.bold': "color.text.warning.inverse";
+    readonly 'color.background.warning.bold.hovered': "color.text.warning.inverse";
+    readonly 'color.background.warning.bold.pressed': "color.text.warning.inverse";
+    readonly 'color.background.success.bold': "color.text.inverse";
+    readonly 'color.background.success.bold.hovered': "color.text.inverse";
+    readonly 'color.background.success.bold.pressed': "color.text.inverse";
+    readonly 'color.background.discovery.bold': "color.text.inverse";
+    readonly 'color.background.discovery.bold.hovered': "color.text.inverse";
+    readonly 'color.background.discovery.bold.pressed': "color.text.inverse";
+    readonly 'color.background.information.bold': "color.text.inverse";
+    readonly 'color.background.information.bold.hovered': "color.text.inverse";
+    readonly 'color.background.information.bold.pressed': "color.text.inverse";
+};
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::b93d845e13422e2b25a860f34dc6882b>>
@@ -67,0 +106,0 @@ * @codegenId colors

dist/types/components/flex.d.ts

@@ -136,3 +136,3 @@ /** @jsx jsx */
     ref?: any;
-} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "wrap" | "as" | "children" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "wrap" | "children" | "as" | keyof BasePrimitiveProps> & import("react").RefAttributes<any>>>;
 export default Flex;

dist/types/components/grid.d.ts

@@ -194,3 +194,3 @@ /** @jsx jsx */
     ref?: any;
-} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "as" | "id" | "children" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "children" | "as" | "id" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;
 export default Grid;

dist/types/components/inline.d.ts

@@ -112,3 +112,3 @@ /** @jsx jsx */
     ref?: any;
-} & BasePrimitiveProps, "space" | "separator" | "as" | "children" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
 export default Inline;

dist/types/components/stack.d.ts

@@ -86,3 +86,3 @@ /** @jsx jsx */
     ref?: any;
-} & BasePrimitiveProps, "space" | "as" | "children" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
 export default Stack;

dist/types/components/text.d.ts

@@ -5,3 +5,3 @@ /** @jsx jsx */
 import type { BasePrimitiveProps } from './types';
-declare const asAllowlist: readonly ["span", "p", "strong", "em", "label"];
+declare const asAllowlist: readonly ["span", "p", "strong", "em"];
 type AsElement = (typeof asAllowlist)[number];
@@ -21,6 +21,7 @@ type Variant = BodyText | UiText;
      */
-    variant: Variant;
+    variant?: Variant;
     /**
-     * Text color
-     * Pending colour exploration
+     * Token representing text color with a built-in fallback value.
+     * Will apply inverse text color automatically if placed within a Box with backgroundColor.
+     *
      */
@@ -35,3 +36,2 @@ color?: TextColor;
      * (i.e. `width` has been set on parent that is shorter than text length).
-     * Pending truncation exploration -- remove for now?
      */
@@ -38,0 +38,0 @@ shouldTruncate?: boolean;

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

@@ -65,2 +65,41 @@ import { SerializedStyles } from '@emotion/react';
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::310a54617a9f912145976996fcef66a5>>
+ * @codegenId inverse-colors
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::5188ac15a9f4d65b80cf12e4eecac815>>
+ */
+export declare const inverseColorMap: {
+    readonly 'color.background.neutral.bold': "color.text.inverse";
+    readonly 'color.background.neutral.bold.hovered': "color.text.inverse";
+    readonly 'color.background.neutral.bold.pressed': "color.text.inverse";
+    readonly 'color.background.selected.bold': "color.text.inverse";
+    readonly 'color.background.selected.bold.hovered': "color.text.inverse";
+    readonly 'color.background.selected.bold.pressed': "color.text.inverse";
+    readonly 'color.background.brand.bold': "color.text.inverse";
+    readonly 'color.background.brand.bold.hovered': "color.text.inverse";
+    readonly 'color.background.brand.bold.pressed': "color.text.inverse";
+    readonly 'color.background.brand.boldest': "color.text.inverse";
+    readonly 'color.background.brand.boldest.hovered': "color.text.inverse";
+    readonly 'color.background.brand.boldest.pressed': "color.text.inverse";
+    readonly 'color.background.danger.bold': "color.text.inverse";
+    readonly 'color.background.danger.bold.hovered': "color.text.inverse";
+    readonly 'color.background.danger.bold.pressed': "color.text.inverse";
+    readonly 'color.background.warning.bold': "color.text.warning.inverse";
+    readonly 'color.background.warning.bold.hovered': "color.text.warning.inverse";
+    readonly 'color.background.warning.bold.pressed': "color.text.warning.inverse";
+    readonly 'color.background.success.bold': "color.text.inverse";
+    readonly 'color.background.success.bold.hovered': "color.text.inverse";
+    readonly 'color.background.success.bold.pressed': "color.text.inverse";
+    readonly 'color.background.discovery.bold': "color.text.inverse";
+    readonly 'color.background.discovery.bold.hovered': "color.text.inverse";
+    readonly 'color.background.discovery.bold.pressed': "color.text.inverse";
+    readonly 'color.background.information.bold': "color.text.inverse";
+    readonly 'color.background.information.bold.hovered': "color.text.inverse";
+    readonly 'color.background.information.bold.pressed': "color.text.inverse";
+};
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::b93d845e13422e2b25a860f34dc6882b>>
@@ -67,0 +106,0 @@ * @codegenId colors

package.json

 {
   "name": "@atlaskit/primitives",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "Primitives are token-backed low-level building blocks.",
@@ -111,2 +111,11 @@ "publishConfig": {
           }
+        },
+        {
+          "title": "Text",
+          "folder": "text",
+          "slug": "primitives/text",
+          "id": "@atlaskit/primitives/text",
+          "status": {
+            "type": "closed-beta"
+          }
         }
@@ -113,0 +122,0 @@ ]

No alert changes

Improved metrics

Total package byte prevSize

1587661

increased by0.95%

Number of package files

179

increased by1.7%

Lines of code

11345

increased by2.02%

No dependency changes