@atlaskit/primitives 1.4.2 → 1.4.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 1.4.4
+
+### Patch Changes
+
+- [`4e58672502e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4e58672502e) - Create text component.
+
+## 1.4.3
+
+### Patch Changes
+
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+
 ## 1.4.2
 
 ### Patch Changes

package/README.md

@@ -6,8 +6,15 @@ Primitives are token-backed low-level building blocks.
 
 Detailed docs and example usage can be found at:
 
-- [Overview](https://staging.atlassian.design/components/primitives/overview)
-- [Box](https://staging.atlassian.design/components/primitives/box)
-- [Inline](https://staging.atlassian.design/components/primitives/inline)
-- [Stack](https://staging.atlassian.design/components/primitives/stack)
-- [xcss](https://staging.atlassian.design/components/primitives/xcss)
+- [Overview](https://atlassian.design/components/primitives/overview)
+- [Box](https://atlassian.design/components/primitives/box)
+- [xcss](https://atlassian.design/components/primitives/xcss)
+- [Inline](https://atlassian.design/components/primitives/inline)
+- [Stack](https://atlassian.design/components/primitives/stack)
+- [Flex](https://atlassian.design/components/primitives/flex)
+- [Grid](https://atlassian.design/components/primitives/grid)
+- [Bleed](https://atlassian.design/components/primitives/bleed)
+
+And you can also find some responsive helpers available in this package:
+
+- [Responsive](https://atlassian.design/components/primitives/responsive/)

package/constellation/responsive/usage.mdx

@@ -6,7 +6,7 @@ order: 2
 
 ## Media query helpers
 
-The media query helper object `media.above[breakpoint]` maps to our [breakpoints](/components/grid/usage#breakpoints) as a media query for use in css-in-js. `media.above[breakpoint]` targets all viewports **above** (larger than) the min-width of a given breakpoint
+The media query helper object `media.above[breakpoint]` maps to our [breakpoints](/components/primitives/responsive/breakpoints/examples) as a media query for use in CSS-in-JS. `media.above[breakpoint]` targets all viewports **above** (larger than) the min-width of a given breakpoint
 
 These responsive helpers are designed be used in conjunction with [xcss](/components/primitives/xcss). It is recommended that both are used when available as this uses our media queries to allow for safe, responsive styling.
 

package/dist/cjs/components/inline.js

@@ -25,7 +25,7 @@ var flexGrowMap = {
 var separatorStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
-  marginInline: "calc(-1 * ".concat("var(--ds-space-025, 2px)", ")"),
+  marginInline: "var(--ds-space-negative-025, -2px)",
   pointerEvents: 'none',
   userSelect: 'none'
 });

package/dist/cjs/components/internal/surface-provider.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSurface = exports.SurfaceContext = void 0;
+var _react = require("react");
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+var SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface');
+
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+exports.SurfaceContext = SurfaceContext;
+var useSurface = function useSurface() {
+  return (0, _react.useContext)(SurfaceContext);
+};
+exports.useSurface = useSurface;
+SurfaceContext.displayName = 'SurfaceProvider';

package/dist/cjs/components/text.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _styleMaps = require("../xcss/style-maps.partial");
+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 variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
+var textAlignMap = {
+  center: (0, _react2.css)({
+    textAlign: 'center'
+  }),
+  end: (0, _react2.css)({
+    textAlign: 'end'
+  }),
+  start: (0, _react2.css)({
+    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 HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
+var useHasTextAncestor = function useHasTextAncestor() {
+  return (0, _react.useContext)(HasTextAncestorContext);
+};
+
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+var Text = function Text(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var asElement = props.as,
+    _props$shouldTruncate = props.shouldTruncate,
+    shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
+    textAlign = props.textAlign,
+    testId = props.testId,
+    id = props.id,
+    variant = props.variant;
+  var Component = asElement;
+  if (!Component) {
+    if (variant.includes('body')) {
+      Component = 'p';
+    } else {
+      // ui text and default => span
+      Component = 'span';
+    }
+  }
+  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
+  // const color = useColor(colorProp!);
+  var isWrapped = useHasTextAncestor();
+
+  /**
+   * If the text is already wrapped and applies no props we can just
+   * render the children directly as a fragment.
+   */
+  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]],
+    "data-testid": testId,
+    id: id
+  }, children);
+  return isWrapped ?
+  // no need to re-apply context if the text is already wrapped
+  component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
+};
+var _default = Text;
+exports.default = _default;

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.textColorMap = exports.spaceStylesMap = exports.spaceMap = exports.shadowMap = exports.paddingStylesMap = exports.layerMap = exports.fillMap = exports.dimensionMap = exports.borderWidthMap = exports.borderRadiusMap = exports.borderColorMap = exports.backgroundColorStylesMap = exports.backgroundColorMap = void 0;
+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;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 /**
@@ -413,11 +413,82 @@ var borderRadiusMap = {
   'border.radius.400': "var(--ds-border-radius-400, 16px)",
   'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
 };
+exports.borderRadiusMap = borderRadiusMap;
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::752c1b8bdc7db62e519dd729222d57ad>>
+ * @codegenId typography
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "heading", "ui"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ */
+var fontSizeMap = {
+  'font.size.050': "var(--ds-font-size-050, 11px)",
+  'font.size.075': "var(--ds-font-size-075, 12px)",
+  'font.size.100': "var(--ds-font-size-100, 14px)",
+  'font.size.200': "var(--ds-font-size-200, 16px)",
+  'font.size.300': "var(--ds-font-size-300, 20px)",
+  'font.size.400': "var(--ds-font-size-400, 24px)",
+  'font.size.500': "var(--ds-font-size-500, 29px)",
+  'font.size.600': "var(--ds-font-size-600, 35px)"
+};
+exports.fontSizeMap = fontSizeMap;
+var fontWeightMap = {
+  'font.weight.bold': "var(--ds-font-weight-bold, 700)",
+  'font.weight.medium': "var(--ds-font-weight-medium, 500)",
+  'font.weight.regular': "var(--ds-font-weight-regular, 400)",
+  'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
+};
+exports.fontWeightMap = fontWeightMap;
+var fontFamilyMap = {
+  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
+  'font.family.brand': "var(--ds-font-family-brand, Charlie Sans)",
+  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
+  'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
+};
+exports.fontFamilyMap = fontFamilyMap;
+var lineHeightMap = {
+  'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
+  'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
+  'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
+  'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
+  'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
+  'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
+  'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
+};
+exports.lineHeightMap = lineHeightMap;
+var bodyTextMap = {
+  body: "var(--ds-font-body, normal 400 14px/20px var(--ds-font-family-body))",
+  'body.lg': "var(--ds-font-body-lg, normal 400 16px/24px var(--ds-font-family-body))",
+  'body.sm': "var(--ds-font-body-sm, normal 400 11px/20px var(--ds-font-family-body))"
+};
+exports.bodyTextMap = bodyTextMap;
+var headingTextMap = {
+  'heading.lg': "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))",
+  'heading.md': "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))",
+  'heading.sm': "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))",
+  'heading.xl': "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))",
+  'heading.xs': "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))",
+  'heading.xxl': "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))",
+  'heading.xxs': "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
+};
+exports.headingTextMap = headingTextMap;
+var uiTextMap = {
+  ui: "var(--ds-font-ui, normal 400 14px/1 var(--ds-font-family-body))",
+  'ui.sm': "var(--ds-font-ui-sm, normal 400 11px/1 var(--ds-font-family-body))"
+};
 
 /**
  * @codegenEnd
  */
-exports.borderRadiusMap = borderRadiusMap;
+exports.uiTextMap = uiTextMap;
 // Generate maps for Box props. backgroundColor, padding, etc
 var spacingProperties = [
 // Used by Box
@@ -441,4 +512,20 @@ var spaceStylesMap = spacingProperties.reduce(function (styleMap, spacingPropert
 }, {});
 exports.spaceStylesMap = spaceStylesMap;
 var backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
-exports.backgroundColorStylesMap = backgroundColorStylesMap;
+exports.backgroundColorStylesMap = backgroundColorStylesMap;
+var textColorStylesMap = getSerializedStylesMap('color', textColorMap);
+exports.textColorStylesMap = textColorStylesMap;
+var fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
+exports.fontSizeStylesMap = fontSizeStylesMap;
+var fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
+exports.fontWeightStylesMap = fontWeightStylesMap;
+var fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
+exports.fontFamilyStylesMap = fontFamilyStylesMap;
+var lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
+exports.lineHeightStylesMap = lineHeightStylesMap;
+var headingTextStylesMap = getSerializedStylesMap('font', headingTextMap);
+exports.headingTextStylesMap = headingTextStylesMap;
+var bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
+exports.bodyTextStylesMap = bodyTextStylesMap;
+var uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);
+exports.uiTextStylesMap = uiTextStylesMap;

package/dist/es2019/components/inline.js

@@ -16,7 +16,7 @@ const flexGrowMap = {
 const separatorStyles = css({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
-  marginInline: `calc(-1 * ${"var(--ds-space-025, 2px)"})`,
+  marginInline: `${"var(--ds-space-negative-025, -2px)"}`,
   pointerEvents: 'none',
   userSelect: 'none'
 });

package/dist/es2019/components/internal/surface-provider.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export const SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
+
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+export const useSurface = () => {
+  return useContext(SurfaceContext);
+};
+SurfaceContext.displayName = 'SurfaceProvider';

package/dist/es2019/components/text.js

@@ -0,0 +1,127 @@
+/** @jsx jsx */
+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'];
+const variantStyles = {
+  ...bodyTextStylesMap,
+  ...uiTextStylesMap
+};
+const textAlignMap = {
+  center: css({
+    textAlign: 'center'
+  }),
+  end: css({
+    textAlign: 'end'
+  }),
+  start: css({
+    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 HasTextAncestorContext = /*#__PURE__*/createContext(false);
+const useHasTextAncestor = () => useContext(HasTextAncestorContext);
+
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+const Text = ({
+  children,
+  ...props
+}) => {
+  const {
+    as: asElement,
+    // color: colorProp,
+    shouldTruncate = false,
+    textAlign,
+    testId,
+    id,
+    variant
+  } = props;
+  let Component = asElement;
+  if (!Component) {
+    if (variant.includes('body')) {
+      Component = 'p';
+    } else {
+      // ui text and default => span
+      Component = 'span';
+    }
+  }
+  invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
+  // const color = useColor(colorProp!);
+  const isWrapped = useHasTextAncestor();
+
+  /**
+   * If the text is already wrapped and applies no props we can just
+   * render the children directly as a fragment.
+   */
+  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]],
+    "data-testid": testId,
+    id: id
+  }, children);
+  return isWrapped ?
+  // no need to re-apply context if the text is already wrapped
+  component : jsx(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
+};
+export default Text;

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

@@ -392,6 +392,69 @@ export const borderRadiusMap = {
   'border.radius.400': "var(--ds-border-radius-400, 16px)",
   'border.radius.circle': "var(--ds-border-radius-circle, 32032px)"
 };
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::752c1b8bdc7db62e519dd729222d57ad>>
+ * @codegenId typography
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
+ * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "heading", "ui"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::0cd422575c3f2a3784eeef767abe71f4>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ */
+export const fontSizeMap = {
+  'font.size.050': "var(--ds-font-size-050, 11px)",
+  'font.size.075': "var(--ds-font-size-075, 12px)",
+  'font.size.100': "var(--ds-font-size-100, 14px)",
+  'font.size.200': "var(--ds-font-size-200, 16px)",
+  'font.size.300': "var(--ds-font-size-300, 20px)",
+  'font.size.400': "var(--ds-font-size-400, 24px)",
+  'font.size.500': "var(--ds-font-size-500, 29px)",
+  'font.size.600': "var(--ds-font-size-600, 35px)"
+};
+export const fontWeightMap = {
+  'font.weight.bold': "var(--ds-font-weight-bold, 700)",
+  'font.weight.medium': "var(--ds-font-weight-medium, 500)",
+  'font.weight.regular': "var(--ds-font-weight-regular, 400)",
+  'font.weight.semibold': "var(--ds-font-weight-semibold, 600)"
+};
+export const fontFamilyMap = {
+  'font.family.body': "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
+  'font.family.brand': "var(--ds-font-family-brand, Charlie Sans)",
+  'font.family.code': "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  'font.family.heading': "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)",
+  'font.family.monospace': "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  'font.family.sans': "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
+};
+export const lineHeightMap = {
+  'font.lineHeight.1': "var(--ds-font-lineHeight-1, 1)",
+  'font.lineHeight.100': "var(--ds-font-lineHeight-100, 16px)",
+  'font.lineHeight.200': "var(--ds-font-lineHeight-200, 20px)",
+  'font.lineHeight.300': "var(--ds-font-lineHeight-300, 24px)",
+  'font.lineHeight.400': "var(--ds-font-lineHeight-400, 28px)",
+  'font.lineHeight.500': "var(--ds-font-lineHeight-500, 32px)",
+  'font.lineHeight.600': "var(--ds-font-lineHeight-600, 40px)"
+};
+export const bodyTextMap = {
+  body: "var(--ds-font-body, normal 400 14px/20px var(--ds-font-family-body))",
+  'body.lg': "var(--ds-font-body-lg, normal 400 16px/24px var(--ds-font-family-body))",
+  'body.sm': "var(--ds-font-body-sm, normal 400 11px/20px var(--ds-font-family-body))"
+};
+export const headingTextMap = {
+  'heading.lg': "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))",
+  'heading.md': "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))",
+  'heading.sm': "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))",
+  'heading.xl': "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))",
+  'heading.xs': "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))",
+  'heading.xxl': "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))",
+  'heading.xxs': "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
+};
+export const uiTextMap = {
+  ui: "var(--ds-font-ui, normal 400 14px/1 var(--ds-font-family-body))",
+  'ui.sm': "var(--ds-font-ui-sm, normal 400 11px/1 var(--ds-font-family-body))"
+};
 
 /**
  * @codegenEnd
@@ -419,4 +482,12 @@ export const spaceStylesMap = spacingProperties.reduce((styleMap, spacingPropert
   styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, spaceMap);
   return styleMap;
 }, {});
-export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
+export const backgroundColorStylesMap = getSerializedStylesMap('backgroundColor', backgroundColorMap);
+export const textColorStylesMap = getSerializedStylesMap('color', textColorMap);
+export const fontSizeStylesMap = getSerializedStylesMap('fontSize', fontSizeMap);
+export const fontWeightStylesMap = getSerializedStylesMap('fontWeight', fontWeightMap);
+export const fontFamilyStylesMap = getSerializedStylesMap('fontFamily', fontFamilyMap);
+export const lineHeightStylesMap = getSerializedStylesMap('lineHeight', lineHeightMap);
+export const headingTextStylesMap = getSerializedStylesMap('font', headingTextMap);
+export const bodyTextStylesMap = getSerializedStylesMap('font', bodyTextMap);
+export const uiTextStylesMap = getSerializedStylesMap('font', uiTextMap);

package/dist/esm/components/inline.js

@@ -17,7 +17,7 @@ var flexGrowMap = {
 var separatorStyles = css({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
-  marginInline: "calc(-1 * ".concat("var(--ds-space-025, 2px)", ")"),
+  marginInline: "var(--ds-space-negative-025, -2px)",
   pointerEvents: 'none',
   userSelect: 'none'
 });

package/dist/esm/components/internal/surface-provider.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export var SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
+
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+export var useSurface = function useSurface() {
+  return useContext(SurfaceContext);
+};
+SurfaceContext.displayName = 'SurfaceProvider';