@atlaskit/primitives 1.4.4 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/primitives
 
+## 1.5.0
+
+### Minor Changes
+
+- [`fa6c592fdb2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fa6c592fdb2) - Introduce `Heading` into package in immediate alpha state. This is more or less a port of `@atlaskit/heading`. Component is not yet stable and implementation is likely to change.
+- [`c2e55a9b782`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2e55a9b782) - Adds surface detection support to the Box primitive:
+
+  - Enable a `Box` background colour to be set to the `utility.elevation.surface.current` token.
+  - Internally set the current surface CSS variable value when the background color of a Box is set to a surface token (e.g. `elevation.surface.raised`).
+
 ## 1.4.4
 
 ### Patch Changes

package/constellation/heading/code.mdx

@@ -0,0 +1,19 @@
+---
+title: Heading
+description: A heading is a typography component used to display text in different sizes and formats.
+order: 1
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import ERTHeading from '!!extract-react-types-loader!../../extract-react-types/heading-props'
+
+## Props
+
+<PropsTable heading="" props={ERTHeading} />

package/constellation/heading/examples.mdx

@@ -0,0 +1,28 @@
+---
+title: Heading
+description: A heading is a typography component used to display text in different sizes and formats.
+order: 0
+---
+
+import HeadingDefault from '../../examples/constellation/heading/heading-default';
+import HeadingInverse from '../../examples/constellation/heading/heading-inverse';
+
+## Basic
+
+Implements the [Atlassian typography set](/foundations/typography/) as a component.
+
+A selected `level` will affect the final HTML element rendered in the DOM.
+It's important to note that the final DOM may be impacted by the parent heading level context
+because of inferred accessibility level correction. Therefore, it is recommended to check the final
+DOM to confirm the actual rendered HTML element.
+
+The typography `level` can be configured to one of the following types.
+
+<Example Component={HeadingDefault} packageName="@atlaskit/heading" />
+
+## Inverse
+
+Set `color` to change the text color of the heading. Use `color="inverse"` for headings placed on a dark
+surface for better color contrast.
+
+<Example Component={HeadingInverse} packageName="@atlaskit/heading" />

package/constellation/heading/usage.mdx

@@ -0,0 +1,21 @@
+---
+title: Heading
+description: A heading is a typography component used to display text in different sizes and formats.
+order: 2
+---
+
+## Usage
+
+Use headings to create section and subsection titles on a page.
+
+## Accessibility
+
+Nest headings by their rank (or level).
+
+The most important heading has the rank 1 (`<h1>`), the least important heading rank 6 (`<h6>`).
+Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
+There should **only be one rank 1 (`<h1>`) heading per page** consisting of the name or main purpose of the overall site/platform.
+
+Skipping heading ranks can be confusing and should be avoided where possible: make sure that a `<h2>` is **not** followed directly by an `<h4>`, for example.
+It is ok to skip ranks when closing subsections, for instance, a `<h2>` beginning a new section, can follow an `<h4>` as it closes the previous section.
+

package/dist/cjs/components/box.js

@@ -60,7 +60,7 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       ref: ref
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, safeHtmlAttributes, {
-      css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[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],
+      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

package/dist/cjs/components/heading-context.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHeadingElement = exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// Allows support for heading levels 1-9 via aria-level
+
+var HeadingContext = /*#__PURE__*/(0, _react.createContext)(0);
+var useHeadingElement = function useHeadingElement() {
+  return (0, _react.useContext)(HeadingContext);
+};
+exports.useHeadingElement = useHeadingElement;
+/**
+ * __Heading context__
+ *
+ * The HeadingContext
+ *
+ * @example
+ * ```tsx
+ * // Will correctly infer the heading level
+ * <HeadingContext value={1}>
+ *  <Heading>H1</Heading>
+ *  <HeadingContext>
+ *    <Heading>H2</Heading>
+ *  </HeadingContext>
+ * </HeadingContext>
+ * ```
+ */
+var HeadingContextProvider = function HeadingContextProvider(_ref) {
+  var children = _ref.children,
+    value = _ref.value;
+  var parentHeadingLevel = useHeadingElement();
+  var headingLevel = parentHeadingLevel + 1;
+  return /*#__PURE__*/_react.default.createElement(HeadingContext.Provider, {
+    value: value || headingLevel
+  }, children);
+};
+var _default = HeadingContextProvider;
+exports.default = _default;

package/dist/cjs/components/heading.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _headingContext = require("./heading-context");
+/** @jsx jsx */
+
+// https://atlassian.design/foundations/typography
+var levelMap = {
+  xxl: 'h1',
+  xl: 'h2',
+  lg: 'h3',
+  md: 'h4',
+  sm: 'h5',
+  xs: 'h6',
+  xxs: 'div'
+};
+var headingResetStyles = (0, _react.css)({
+  color: "var(--ds-text, #172B4D)",
+  letterSpacing: 'normal',
+  marginBlock: 0,
+  textTransform: 'none'
+});
+var headingStylesMap = {
+  xxl: (0, _react.css)({
+    font: "var(--ds-font-heading-xxl, inherit)"
+  }),
+  xl: (0, _react.css)({
+    font: "var(--ds-font-heading-xl, inherit)"
+  }),
+  lg: (0, _react.css)({
+    font: "var(--ds-font-heading-lg, inherit)"
+  }),
+  md: (0, _react.css)({
+    font: "var(--ds-font-heading-md, inherit)"
+  }),
+  sm: (0, _react.css)({
+    font: "var(--ds-font-heading-sm, inherit)"
+  }),
+  xs: (0, _react.css)({
+    font: "var(--ds-font-heading-xs, inherit)"
+  }),
+  xxs: (0, _react.css)({
+    font: "var(--ds-font-heading-xxs, inherit)"
+  })
+};
+var inverseStyles = (0, _react.css)({
+  color: "var(--ds-text-inverse, #FFF)"
+});
+/**
+ * __Heading__
+ *
+ * A heading is a typography component used to display text in different sizes and formats.
+ *
+ * @example
+ *
+ * ```jsx
+ * import Heading from '@atlaskit/heading';
+ *
+ * const HeadingXXL = () => (
+ *   <Heading level="xxl">XXL</Heading>
+ * );
+ * ```
+ */
+var Heading = function Heading(_ref) {
+  var children = _ref.children,
+    level = _ref.level,
+    id = _ref.id,
+    testId = _ref.testId,
+    as = _ref.as,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color;
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
+    throw new Error('`as` prop should be a string.');
+  }
+  var hLevel = (0, _headingContext.useHeadingElement)();
+  /**
+   * Order here is important, we for now apply
+   * 1. user choice
+   * 2. inferred a11y level
+   * 3. default final fallback
+   */
+  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[level];
+  return (0, _react.jsx)(Markup, {
+    id: id,
+    "data-testid": testId,
+    role: Markup === 'div' ? 'heading' : undefined,
+    css: [headingResetStyles, level && headingStylesMap[level], color === 'inverse' && inverseStyles]
+  }, children);
+};
+var _default = Heading;
+exports.default = _default;

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

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uiTextStylesMap = exports.uiTextMap = exports.textColorStylesMap = exports.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.paddingStylesMap = exports.lineHeightStylesMap = exports.lineHeightMap = exports.layerMap = exports.headingTextStylesMap = exports.headingTextMap = 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.lineHeightStylesMap = exports.lineHeightMap = exports.layerMap = exports.isSurfaceColorToken = exports.headingTextStylesMap = exports.headingTextMap = 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");
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
@@ -60,10 +61,10 @@ exports.spaceMap = spaceMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3f4d926ce14cda107d25c697f3a0c200>>
+ * @codegen <<SignedSource::3db44f53b728773bb3ba1473d4567724>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenParams ["border", "background", "shadow", "text", "fill"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill", "surface"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
  */
 var borderColorMap = {
@@ -286,7 +287,8 @@ var backgroundColorMap = {
   'elevation.surface.raised': "var(--ds-surface-raised, #FFFFFF)",
   'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered, #FAFBFC)",
   'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed, #F4F5F7)",
-  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
+  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)",
+  'utility.elevation.surface.current': "var(--ds-elevation-surface-current, #FFFFFF)"
 };
 exports.backgroundColorMap = backgroundColorMap;
 var shadowMap = {
@@ -360,6 +362,19 @@ var fillMap = {
   'color.icon.subtle': "var(--ds-icon-subtle, #6B778C)"
 };
 exports.fillMap = fillMap;
+var surfaceColorMap = {
+  'elevation.surface': "var(--ds-surface, #FFFFFF)",
+  'elevation.surface.hovered': "var(--ds-surface-hovered, #FAFBFC)",
+  'elevation.surface.pressed': "var(--ds-surface-pressed, #F4F5F7)",
+  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
+  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #FAFBFC)",
+  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #F4F5F7)",
+  'elevation.surface.raised': "var(--ds-surface-raised, #FFFFFF)",
+  'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered, #FAFBFC)",
+  'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed, #F4F5F7)",
+  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
+};
+exports.surfaceColorMap = surfaceColorMap;
 /**
  * @codegenEnd
  */
@@ -528,4 +543,10 @@ exports.headingTextStylesMap = headingTextStylesMap;
 var bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
 exports.bodyTextStylesMap = bodyTextStylesMap;
 var uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
-exports.uiTextStylesMap = uiTextStylesMap;
+exports.uiTextStylesMap = uiTextStylesMap;
+var surfaceColorStylesMap = getSerializedStylesMap(_tokens.CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
+exports.surfaceColorStylesMap = surfaceColorStylesMap;
+var isSurfaceColorToken = function isSurfaceColorToken(color) {
+  return surfaceColorMap[color] !== undefined;
+};
+exports.isSurfaceColorToken = isSurfaceColorToken;

package/dist/es2019/components/box.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { backgroundColorStylesMap, paddingStylesMap } from '../xcss/style-maps.partial';
+import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
 
 // Can either Exclude or Extract - here we're excluding all SVG-related elements
@@ -52,7 +52,7 @@ export const Box = /*#__PURE__*/forwardRef(({
       ref: ref
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, safeHtmlAttributes, {
-      css: [baseStyles, backgroundColor && backgroundColorStylesMap[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],
+      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

package/dist/es2019/components/heading-context.js

@@ -0,0 +1,35 @@
+import React, { createContext, useContext } from 'react';
+
+// Allows support for heading levels 1-9 via aria-level
+
+const HeadingContext = /*#__PURE__*/createContext(0);
+export const useHeadingElement = () => {
+  return useContext(HeadingContext);
+};
+/**
+ * __Heading context__
+ *
+ * The HeadingContext
+ *
+ * @example
+ * ```tsx
+ * // Will correctly infer the heading level
+ * <HeadingContext value={1}>
+ *  <Heading>H1</Heading>
+ *  <HeadingContext>
+ *    <Heading>H2</Heading>
+ *  </HeadingContext>
+ * </HeadingContext>
+ * ```
+ */
+const HeadingContextProvider = ({
+  children,
+  value
+}) => {
+  const parentHeadingLevel = useHeadingElement();
+  const headingLevel = parentHeadingLevel + 1;
+  return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
+    value: value || headingLevel
+  }, children);
+};
+export default HeadingContextProvider;

package/dist/es2019/components/heading.js

@@ -0,0 +1,87 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { useHeadingElement } from './heading-context';
+// https://atlassian.design/foundations/typography
+const levelMap = {
+  xxl: 'h1',
+  xl: 'h2',
+  lg: 'h3',
+  md: 'h4',
+  sm: 'h5',
+  xs: 'h6',
+  xxs: 'div'
+};
+const headingResetStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  letterSpacing: 'normal',
+  marginBlock: 0,
+  textTransform: 'none'
+});
+const headingStylesMap = {
+  xxl: css({
+    font: "var(--ds-font-heading-xxl, inherit)"
+  }),
+  xl: css({
+    font: "var(--ds-font-heading-xl, inherit)"
+  }),
+  lg: css({
+    font: "var(--ds-font-heading-lg, inherit)"
+  }),
+  md: css({
+    font: "var(--ds-font-heading-md, inherit)"
+  }),
+  sm: css({
+    font: "var(--ds-font-heading-sm, inherit)"
+  }),
+  xs: css({
+    font: "var(--ds-font-heading-xs, inherit)"
+  }),
+  xxs: css({
+    font: "var(--ds-font-heading-xxs, inherit)"
+  })
+};
+const inverseStyles = css({
+  color: "var(--ds-text-inverse, #FFF)"
+});
+/**
+ * __Heading__
+ *
+ * A heading is a typography component used to display text in different sizes and formats.
+ *
+ * @example
+ *
+ * ```jsx
+ * import Heading from '@atlaskit/heading';
+ *
+ * const HeadingXXL = () => (
+ *   <Heading level="xxl">XXL</Heading>
+ * );
+ * ```
+ */
+const Heading = ({
+  children,
+  level,
+  id,
+  testId,
+  as,
+  color = 'default'
+}) => {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
+    throw new Error('`as` prop should be a string.');
+  }
+  const hLevel = useHeadingElement();
+  /**
+   * Order here is important, we for now apply
+   * 1. user choice
+   * 2. inferred a11y level
+   * 3. default final fallback
+   */
+  const Markup = as || hLevel && (hLevel > 6 ? 'div' : `h${hLevel}`) || levelMap[level];
+  return jsx(Markup, {
+    id: id,
+    "data-testid": testId,
+    role: Markup === 'div' ? 'heading' : undefined,
+    css: [headingResetStyles, level && headingStylesMap[level], color === 'inverse' && inverseStyles]
+  }, children);
+};
+export default Heading;

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

@@ -1,4 +1,6 @@
 import { css } from '@emotion/react';
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  * @codegen <<SignedSource::7af6097e56f7fb03635b6f8aaf121b02>>
@@ -48,10 +50,10 @@ export const spaceMap = {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3f4d926ce14cda107d25c697f3a0c200>>
+ * @codegen <<SignedSource::3db44f53b728773bb3ba1473d4567724>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenParams ["border", "background", "shadow", "text", "fill"]
+ * @codegenParams ["border", "background", "shadow", "text", "fill", "surface"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
  */
 export const borderColorMap = {
@@ -273,7 +275,8 @@ export const backgroundColorMap = {
   'elevation.surface.raised': "var(--ds-surface-raised, #FFFFFF)",
   'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered, #FAFBFC)",
   'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed, #F4F5F7)",
-  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
+  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)",
+  'utility.elevation.surface.current': "var(--ds-elevation-surface-current, #FFFFFF)"
 };
 export const shadowMap = {
   'elevation.shadow.overflow': "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)",
@@ -343,6 +346,18 @@ export const fillMap = {
   'color.icon.information': "var(--ds-icon-information, #0747A6)",
   'color.icon.subtle': "var(--ds-icon-subtle, #6B778C)"
 };
+export const surfaceColorMap = {
+  'elevation.surface': "var(--ds-surface, #FFFFFF)",
+  'elevation.surface.hovered': "var(--ds-surface-hovered, #FAFBFC)",
+  'elevation.surface.pressed': "var(--ds-surface-pressed, #F4F5F7)",
+  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
+  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #FAFBFC)",
+  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #F4F5F7)",
+  'elevation.surface.raised': "var(--ds-surface-raised, #FFFFFF)",
+  'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered, #FAFBFC)",
+  'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed, #F4F5F7)",
+  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
+};
 /**
  * @codegenEnd
  */
@@ -490,4 +505,6 @@ export const fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFami
 export const lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
 export const headingTextStylesMap = getSerializedStylesMap('font', headingTextMap);
 export const bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
-export const uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
+export const uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
+export const surfaceColorStylesMap = getSerializedStylesMap(CURRENT_SURFACE_CSS_VAR, surfaceColorMap);
+export const isSurfaceColorToken = color => surfaceColorMap[color] !== undefined;

package/dist/esm/components/box.js

@@ -5,7 +5,7 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { backgroundColorStylesMap, paddingStylesMap } from '../xcss/style-maps.partial';
+import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
 import { parseXcss } from '../xcss/xcss';
 
 // Can either Exclude or Extract - here we're excluding all SVG-related elements
@@ -53,7 +53,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
       ref: ref
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, safeHtmlAttributes, {
-      css: [baseStyles, backgroundColor && backgroundColorStylesMap[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],
+      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

package/dist/esm/components/heading-context.js

@@ -0,0 +1,34 @@
+import React, { createContext, useContext } from 'react';
+
+// Allows support for heading levels 1-9 via aria-level
+
+var HeadingContext = /*#__PURE__*/createContext(0);
+export var useHeadingElement = function useHeadingElement() {
+  return useContext(HeadingContext);
+};
+/**
+ * __Heading context__
+ *
+ * The HeadingContext
+ *
+ * @example
+ * ```tsx
+ * // Will correctly infer the heading level
+ * <HeadingContext value={1}>
+ *  <Heading>H1</Heading>
+ *  <HeadingContext>
+ *    <Heading>H2</Heading>
+ *  </HeadingContext>
+ * </HeadingContext>
+ * ```
+ */
+var HeadingContextProvider = function HeadingContextProvider(_ref) {
+  var children = _ref.children,
+    value = _ref.value;
+  var parentHeadingLevel = useHeadingElement();
+  var headingLevel = parentHeadingLevel + 1;
+  return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
+    value: value || headingLevel
+  }, children);
+};
+export default HeadingContextProvider;

package/dist/esm/components/heading.js

@@ -0,0 +1,87 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { useHeadingElement } from './heading-context';
+// https://atlassian.design/foundations/typography
+var levelMap = {
+  xxl: 'h1',
+  xl: 'h2',
+  lg: 'h3',
+  md: 'h4',
+  sm: 'h5',
+  xs: 'h6',
+  xxs: 'div'
+};
+var headingResetStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  letterSpacing: 'normal',
+  marginBlock: 0,
+  textTransform: 'none'
+});
+var headingStylesMap = {
+  xxl: css({
+    font: "var(--ds-font-heading-xxl, inherit)"
+  }),
+  xl: css({
+    font: "var(--ds-font-heading-xl, inherit)"
+  }),
+  lg: css({
+    font: "var(--ds-font-heading-lg, inherit)"
+  }),
+  md: css({
+    font: "var(--ds-font-heading-md, inherit)"
+  }),
+  sm: css({
+    font: "var(--ds-font-heading-sm, inherit)"
+  }),
+  xs: css({
+    font: "var(--ds-font-heading-xs, inherit)"
+  }),
+  xxs: css({
+    font: "var(--ds-font-heading-xxs, inherit)"
+  })
+};
+var inverseStyles = css({
+  color: "var(--ds-text-inverse, #FFF)"
+});
+/**
+ * __Heading__
+ *
+ * A heading is a typography component used to display text in different sizes and formats.
+ *
+ * @example
+ *
+ * ```jsx
+ * import Heading from '@atlaskit/heading';
+ *
+ * const HeadingXXL = () => (
+ *   <Heading level="xxl">XXL</Heading>
+ * );
+ * ```
+ */
+var Heading = function Heading(_ref) {
+  var children = _ref.children,
+    level = _ref.level,
+    id = _ref.id,
+    testId = _ref.testId,
+    as = _ref.as,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color;
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
+    throw new Error('`as` prop should be a string.');
+  }
+  var hLevel = useHeadingElement();
+  /**
+   * Order here is important, we for now apply
+   * 1. user choice
+   * 2. inferred a11y level
+   * 3. default final fallback
+   */
+  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[level];
+  return jsx(Markup, {
+    id: id,
+    "data-testid": testId,
+    role: Markup === 'div' ? 'heading' : undefined,
+    css: [headingResetStyles, level && headingStylesMap[level], color === 'inverse' && inverseStyles]
+  }, children);
+};
+export default Heading;