@atlaskit/primitives 1.6.4 → 1.6.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+### Patch Changes
+
+- [#41563](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41563) [`50de1ccacd7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/50de1ccacd7) - Additional documentation details for alignment props on Inline and Stack.
+
 ## 1.6.4
 
 ### Patch Changes

package/constellation/box/examples.mdx

@@ -8,7 +8,7 @@ import BoxBasic from '../../examples/constellation/box/basic';
 import BoxPadding from '../../examples/constellation/box/padding';
 import BoxBackgroundColor from '../../examples/constellation/box/background-color';
 import BoxXcss from '../../examples/constellation/box/xcss';
-import PracticalUseCase from '../../examples/constellation/box/practical-use-case';
+import BoxPracticalUseCase from '../../examples/constellation/box/practical-use-case';
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 
@@ -53,4 +53,7 @@ For more information on xcss, see the dedicated [xcss documentation](/components
 
 `Box` is designed to be used in conjunction with `Inline` and `Stack` to create layouts. This example demonstrates how primitives can be used to create familiar components and patterns.
 
-<Example Component={PracticalUseCase} packageName="@atlaskit/primitives/box" />
+<Example
+  Component={BoxPracticalUseCase}
+  packageName="@atlaskit/primitives/box"
+/>

package/constellation/stack/examples.mdx

@@ -5,7 +5,7 @@ order: 0
 ---
 
 import StackBasic from '../../examples/constellation/stack/basic';
-import PracticalUseCase from '../../examples/constellation/stack/practical-use-case';
+import StackPracticalUseCase from '../../examples/constellation/stack/practical-use-case';
 import StackSpaceBasic from '../../examples/constellation/stack/space-basic';
 import StackAlignBlock from '../../examples/constellation/stack/align-block';
 import StackAlignInline from '../../examples/constellation/stack/align-inline';
@@ -75,6 +75,6 @@ It's possible to control the rendered HTML element with the `as` prop.
 ## Practical use case
 
 <Example
-  Component={PracticalUseCase}
+  Component={StackPracticalUseCase}
   packageName="@atlaskit/primitives/stack"
 />

package/constellation/text/examples.mdx

@@ -0,0 +1,27 @@
+---
+order: 0
+---
+
+import TextDefault from '../../examples/constellation/text/basic';
+import TextAsElement from '../../examples/constellation/text/as-element';
+import ColorInverse from '../../examples/constellation/text/color-inverse';
+
+## Basic
+
+Implements the [Atlassian typography system](/foundations/typography/) as a component, scoped to body and UI text usages.
+
+The `variant` prop expresses the visual appearance of the text element.
+
+<Example Component={TextDefault} pacckageName="@atlaskit/primitives" />
+
+## Rendered HTML tag
+
+By default, `body` variants are rendered as `<p>` tags and `ui` variants are rendered as `<span>` tags. This can be ovrridden by the `as` prop.
+
+<Example Component={TextAsElement} packageName="@atlaskit/primitives" />
+
+## Color
+
+Set `color` to change the text color. When used within a [box component](/components/primitives/box) that has a background color set, the text color can be automatically inverted without setting the `color` prop depending on the background color of the box.
+
+<Example Component={ColorInverse} pacckageName="@atlaskit/primitives" />

package/constellation/text/usage.mdx

@@ -0,0 +1,9 @@
+---
+order: 2
+---
+
+## Usage
+
+UI text variants should be used in cases where line height being equal to the font size is desired. This is likely to be in UI components such as buttons.
+
+Body text variants should be used for multi-line text. For each variant, we have coupled a line height which fits the variant's font size, ensuring that it is compliant with accessibility standards.

package/dist/cjs/components/box.js

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styleMaps = require("../xcss/style-maps.partial");
 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"],
   _excluded2 = ["className"];
 /** @jsx jsx */
@@ -51,21 +52,23 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
   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;
 });
 var _default = exports.default = Box;
 var baseStyles = (0, _react2.css)({

package/dist/cjs/components/text.js

@@ -11,14 +11,18 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _styleMaps = require("../xcss/style-maps.partial");
+var _surfaceProvider = require("./internal/surface-provider");
 var _excluded = ["children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
-// 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 = {
   center: (0, _react2.css)({
     textAlign: 'center'
@@ -30,43 +34,26 @@ var textAlignMap = {
     textAlign: 'start'
   })
 };
-
-// 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)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 
-// 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];
-
-//   /**
-//    * 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;
-// };
+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.
+   */
+  var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
+  return color;
+};
 var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
 var useHasTextAncestor = function useHasTextAncestor() {
   return (0, _react.useContext)(HasTextAncestorContext);
@@ -85,12 +72,14 @@ var Text = function Text(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var asElement = props.as,
+    colorProp = props.color,
     _props$shouldTruncate = props.shouldTruncate,
     shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
-    variant = props.variant;
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'body' : _props$variant;
   var Component = asElement;
   if (!Component) {
     if (variant.includes('body')) {
@@ -100,8 +89,8 @@ var Text = function Text(_ref) {
       Component = 'span';
     }
   }
-  (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();
 
   /**
@@ -111,13 +100,8 @@ var Text = function Text(_ref) {
   if (isWrapped && Object.keys(props).length === 0) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
   }
-  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,
     id: id
   }, children);

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.surfaceColorStylesMap = exports.surfaceColorMap = exports.spaceStylesMap = exports.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"));
 var _react = require("@emotion/react");
 var _tokens = require("@atlaskit/tokens");
@@ -64,6 +64,47 @@ var negativeSpaceMap = exports.negativeSpaceMap = {
   'space.negative.300': "var(--ds-space-negative-300, -24px)",
   'space.negative.400': "var(--ds-space-negative-400, -32px)"
 };
+/**
+ * @codegenEnd
+ */
+
+/**
+ * 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
  */

package/dist/es2019/components/box.js

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
+import { SurfaceContext } from './internal/surface-provider';
 
 // Can either Exclude or Extract - here we're excluding all SVG-related elements
 
@@ -43,21 +44,23 @@ export const Box = /*#__PURE__*/forwardRef(({
     ...safeHtmlAttributes
   } = htmlAttributes;
   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;
 });
 export default Box;
 const baseStyles = css({

package/dist/es2019/components/text.js

@@ -2,19 +2,19 @@
 import { createContext, Fragment, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 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 = {
   ...bodyTextStylesMap,
   ...uiTextStylesMap
 };
+const strongStyles = css({
+  fontWeight: "var(--ds-font-weight-bold, bold)"
+});
+const emStyles = css({
+  fontStyle: 'italic'
+});
 const textAlignMap = {
   center: css({
     textAlign: 'center'
@@ -26,43 +26,26 @@ const textAlignMap = {
     textAlign: 'start'
   })
 };
-
-// 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({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 
-// 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];
-
-//   /**
-//    * 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;
-// };
+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 !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
+  return color;
+};
 const HasTextAncestorContext = /*#__PURE__*/createContext(false);
 const useHasTextAncestor = () => useContext(HasTextAncestorContext);
 
@@ -81,12 +64,12 @@ const Text = ({
 }) => {
   const {
     as: asElement,
-    // color: colorProp,
+    color: colorProp,
     shouldTruncate = false,
     textAlign,
     testId,
     id,
-    variant
+    variant = 'body'
   } = props;
   let Component = asElement;
   if (!Component) {
@@ -97,8 +80,8 @@ const Text = ({
       Component = 'span';
     }
   }
-  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();
 
   /**
@@ -108,13 +91,8 @@ const Text = ({
   if (isWrapped && Object.keys(props).length === 0) {
     return jsx(Fragment, null, children);
   }
-  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,
     id: id
   }, children);

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

@@ -59,6 +59,47 @@ export const negativeSpaceMap = {
 /**
  * @codegenEnd
  */
+/**
+ * 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>>

package/dist/esm/components/box.js

@@ -7,6 +7,7 @@ import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
+import { SurfaceContext } from './internal/surface-provider';
 
 // Can either Exclude or Extract - here we're excluding all SVG-related elements
 
@@ -44,21 +45,23 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
   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;
 });
 export default Box;
 var baseStyles = css({

package/dist/esm/components/text.js

@@ -7,16 +7,16 @@ 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
-
-// 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 = {
   center: css({
     textAlign: 'center'
@@ -28,43 +28,26 @@ var textAlignMap = {
     textAlign: 'start'
   })
 };
-
-// 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({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
 
-// 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];
-
-//   /**
-//    * 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;
-// };
+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.
+   */
+  var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
+  return color;
+};
 var HasTextAncestorContext = /*#__PURE__*/createContext(false);
 var useHasTextAncestor = function useHasTextAncestor() {
   return useContext(HasTextAncestorContext);
@@ -83,12 +66,14 @@ var Text = function Text(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   var asElement = props.as,
+    colorProp = props.color,
     _props$shouldTruncate = props.shouldTruncate,
     shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
-    variant = props.variant;
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'body' : _props$variant;
   var Component = asElement;
   if (!Component) {
     if (variant.includes('body')) {
@@ -98,8 +83,8 @@ var Text = function Text(_ref) {
       Component = 'span';
     }
   }
-  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();
 
   /**
@@ -109,13 +94,8 @@ var Text = function Text(_ref) {
   if (isWrapped && Object.keys(props).length === 0) {
     return jsx(Fragment, null, children);
   }
-  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,
     id: id
   }, children);

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

@@ -60,6 +60,47 @@ export var negativeSpaceMap = {
 /**
  * @codegenEnd
  */
+/**
+ * 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>>

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

@@ -133,5 +133,5 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
      * Forwarded ref element
      */
     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;

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

@@ -191,5 +191,5 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
      * Forwarded ref element
      */
     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;

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

@@ -8,11 +8,11 @@ export type InlineProps<T extends ElementType = 'div'> = {
      */
     as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
     /**
-     * Used to align children along the main axis.
+     * Used to align children along the block axis (typically vertical).
      */
     alignBlock?: AlignBlock;
     /**
-     * Used to align children along the cross axis.
+     * Used to align children along the inline axis (typically horizontal).
      */
     alignInline?: AlignInline;
     /**
@@ -69,11 +69,11 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      */
     as?: "div" | "li" | "ol" | "span" | "ul" | undefined;
     /**
-     * Used to align children along the main axis.
+     * Used to align children along the block axis (typically vertical).
      */
     alignBlock?: AlignBlock | undefined;
     /**
-     * Used to align children along the cross axis.
+     * Used to align children along the inline axis (typically horizontal).
      */
     alignInline?: AlignInline | undefined;
     /**
@@ -109,5 +109,5 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      * Forwarded ref element
      */
     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;

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

@@ -8,11 +8,11 @@ export type StackProps<T extends ElementType = 'div'> = {
      */
     as?: 'div' | 'span' | 'ul' | 'ol';
     /**
-     * Used to align children along the main axis.
+     * Used to align children along the block axis (typically vertical).
      */
     alignBlock?: Exclude<AlignBlock, 'baseline'>;
     /**
-     * Used to align children along the cross axis.
+     * Used to align children along the inline axis (typically horizontal).
      */
     alignInline?: AlignInline;
     /**
@@ -56,11 +56,11 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
      */
     as?: "div" | "ol" | "span" | "ul" | undefined;
     /**
-     * Used to align children along the main axis.
+     * Used to align children along the block axis (typically vertical).
      */
     alignBlock?: "stretch" | "center" | "end" | "start" | undefined;
     /**
-     * Used to align children along the cross axis.
+     * Used to align children along the inline axis (typically horizontal).
      */
     alignInline?: AlignInline | undefined;
     /**
@@ -83,5 +83,5 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
      * Forwarded ref element
      */
     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;

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

@@ -2,7 +2,7 @@
 import { FC, ReactNode } from 'react';
 import { BodyText, TextColor, UiText } from '../xcss/style-maps.partial';
 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];
 type Variant = BodyText | UiText;
 export interface TextProps extends BasePrimitiveProps {
@@ -17,10 +17,11 @@ export interface TextProps extends BasePrimitiveProps {
     /**
      * Text variant
      */
-    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.
+     *
      */
     color?: TextColor;
     /**
@@ -30,7 +31,6 @@ export interface TextProps extends BasePrimitiveProps {
     /**
      * Truncates text with an ellipsis when text overflows its parent container
      * (i.e. `width` has been set on parent that is shorter than text length).
-     * Pending truncation exploration -- remove for now?
      */
     shouldTruncate?: boolean;
     /**

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

@@ -57,6 +57,45 @@ export declare const negativeSpaceMap: {
     'space.negative.400': "var(--ds-space-negative-400)";
 };
 export type NegativeSpace = keyof typeof negativeSpaceMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * 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
  */

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

@@ -133,5 +133,5 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
      * Forwarded ref element
      */
     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;

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

@@ -191,5 +191,5 @@ declare const Grid: import("react").MemoExoticComponent<import("react").ForwardR
      * Forwarded ref element
      */
     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;

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

@@ -8,11 +8,11 @@ export type InlineProps<T extends ElementType = 'div'> = {
      */
     as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
     /**
-     * Used to align children along the main axis.
+     * Used to align children along the block axis (typically vertical).
      */
     alignBlock?: AlignBlock;
     /**
-     * Used to align children along the cross axis.
+     * Used to align children along the inline axis (typically horizontal).
      */
     alignInline?: AlignInline;
     /**
@@ -69,11 +69,11 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      */
     as?: "div" | "li" | "ol" | "span" | "ul" | undefined;
     /**
-     * Used to align children along the main axis.
+     * Used to align children along the block axis (typically vertical).
      */
     alignBlock?: AlignBlock | undefined;
     /**
-     * Used to align children along the cross axis.
+     * Used to align children along the inline axis (typically horizontal).
      */
     alignInline?: AlignInline | undefined;
     /**
@@ -109,5 +109,5 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      * Forwarded ref element
      */
     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;

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

@@ -8,11 +8,11 @@ export type StackProps<T extends ElementType = 'div'> = {
      */
     as?: 'div' | 'span' | 'ul' | 'ol';
     /**
-     * Used to align children along the main axis.
+     * Used to align children along the block axis (typically vertical).
      */
     alignBlock?: Exclude<AlignBlock, 'baseline'>;
     /**
-     * Used to align children along the cross axis.
+     * Used to align children along the inline axis (typically horizontal).
      */
     alignInline?: AlignInline;
     /**
@@ -56,11 +56,11 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
      */
     as?: "div" | "ol" | "span" | "ul" | undefined;
     /**
-     * Used to align children along the main axis.
+     * Used to align children along the block axis (typically vertical).
      */
     alignBlock?: "stretch" | "center" | "end" | "start" | undefined;
     /**
-     * Used to align children along the cross axis.
+     * Used to align children along the inline axis (typically horizontal).
      */
     alignInline?: AlignInline | undefined;
     /**
@@ -83,5 +83,5 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
      * Forwarded ref element
      */
     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;

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

@@ -6,8 +6,7 @@ declare const asAllowlist: readonly [
     "span",
     "p",
     "strong",
-    "em",
-    "label"
+    "em"
 ];
 type AsElement = (typeof asAllowlist)[number];
 type Variant = BodyText | UiText;
@@ -23,10 +22,11 @@ export interface TextProps extends BasePrimitiveProps {
     /**
      * Text variant
      */
-    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.
+     *
      */
     color?: TextColor;
     /**
@@ -36,7 +36,6 @@ export interface TextProps extends BasePrimitiveProps {
     /**
      * Truncates text with an ellipsis when text overflows its parent container
      * (i.e. `width` has been set on parent that is shorter than text length).
-     * Pending truncation exploration -- remove for now?
      */
     shouldTruncate?: boolean;
     /**

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

@@ -57,6 +57,45 @@ export declare const negativeSpaceMap: {
     'space.negative.400': "var(--ds-space-negative-400)";
 };
 export type NegativeSpace = keyof typeof negativeSpaceMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * 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
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -108,6 +108,15 @@
           "status": {
             "type": "beta"
           }
+        },
+        {
+          "title": "Text",
+          "folder": "text",
+          "slug": "primitives/text",
+          "id": "@atlaskit/primitives/text",
+          "status": {
+            "type": "closed-beta"
+          }
         }
       ]
     }

package/scripts/codegen-styles.tsx

@@ -6,6 +6,7 @@ import { createPartialSignedArtifact } from '@atlassian/codegen';
 
 import { createBorderStylesFromTemplate } from './border-codegen-template';
 import { createColorStylesFromTemplate } from './color-codegen-template';
+import { createInverseColorMapTemplate } from './inverse-color-map-template';
 import { createStylesFromFileTemplate } from './misc-codegen-template';
 import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 import { createTypographyStylesFromTemplate } from './typography-codegen-template';
@@ -68,6 +69,17 @@ const sourceFns = [
         dependencies: [colorTokensDependencyPath],
       },
     ),
+  // inverse color map
+  () =>
+    createPartialSignedArtifact(
+      createInverseColorMapTemplate,
+      'yarn workspace @atlaskit/primitives codegen-styles',
+      {
+        id: 'inverse-colors',
+        absoluteFilePath: targetPath,
+        dependencies: [colorTokensDependencyPath],
+      },
+    ),
   // border-width, border-radius
   () =>
     createPartialSignedArtifact(

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

@@ -0,0 +1,54 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
+
+import { compose, isAccent, not, pick } from './utils';
+
+type Token = {
+  token: string;
+  fallback: string;
+};
+
+const activeTokens = tokens
+  .filter(
+    t =>
+      t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
+  )
+  .map(
+    (t): Token => ({
+      token: t.name,
+      fallback: t.value as string,
+    }),
+  )
+  .filter(compose(pick('token'), not(isAccent)))
+  .filter(t => t.token.includes('background'))
+  .filter(t => t.token.includes('bold'))
+  // @ts-ignore
+  .map(t => ({ ...t, token: t.token.replaceAll('.[default]', '') }));
+
+export const createInverseColorMapTemplate = () => {
+  return prettier.format(
+    `
+export const inverseColorMap = {
+  ${activeTokens
+    .map(t => {
+      // handle the default case eg color.border or color.text
+      const propName = t.token;
+      return `'${propName}': '${
+        propName.includes('warning')
+          ? 'color.text.warning.inverse'
+          : 'color.text.inverse'
+      }'`;
+    })
+    .join(',\n\t')}
+} as const;`,
+    {
+      singleQuote: true,
+      parser: 'typescript',
+      trailingComma: 'all',
+      plugins: [parserTypeScript],
+    },
+  );
+};