@atlaskit/ds-explorations 0.1.5 → 1.1.0

package/dist/cjs/components/inline.partial.js

@@ -7,20 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _constants = require("../constants");
-
 var _text = _interopRequireDefault(require("./text.partial"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+/** @jsx jsx */
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
     alignItems: 'center'
@@ -87,7 +80,7 @@ var Inline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       testId = _ref.testId;
   var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(_text.default, null, divider) : divider;
   return (0, _react2.jsx)("div", {
-    style: _objectSpread({}, UNSAFE_style),
+    style: UNSAFE_style,
     css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
@@ -99,49 +92,50 @@ Inline.displayName = 'Inline';
 var _default = Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7a985afa5e15ffd4f6f9c0db0e99ceb6>>
+ * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;
 var columnGapMap = {
-  'sp-0': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-0']
+  'scale.0': (0, _react2.css)({
+    columnGap: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-25']
+  'scale.025': (0, _react2.css)({
+    columnGap: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-50']
+  'scale.050': (0, _react2.css)({
+    columnGap: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-75']
+  'scale.075': (0, _react2.css)({
+    columnGap: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-100']
+  'scale.100': (0, _react2.css)({
+    columnGap: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-150']
+  'scale.150': (0, _react2.css)({
+    columnGap: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-200']
+  'scale.200': (0, _react2.css)({
+    columnGap: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-300']
+  'scale.250': (0, _react2.css)({
+    columnGap: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-400']
+  'scale.300': (0, _react2.css)({
+    columnGap: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-500']
+  'scale.400': (0, _react2.css)({
+    columnGap: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-600']
+  'scale.500': (0, _react2.css)({
+    columnGap: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': (0, _react2.css)({
-    columnGap: _constants.SPACING_SCALE['sp-800']
+  'scale.600': (0, _react2.css)({
+    columnGap: "var(--ds-scale-600, 48px)"
   })
 };
 /**

package/dist/cjs/components/interaction-surface.partial.js

@@ -58,10 +58,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
 var _default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::45000716488a9f41306a232c1f4c9f8d>>
+ * @codegen <<SignedSource::5289ea44928c279ad02274850623c9d1>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;
@@ -155,6 +156,21 @@ var backgroundActiveColorMap = {
     ':active': {
       backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
     }
+  }),
+  'elevation.surface': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
+    }
+  }),
+  'elevation.surface.raised': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
+    }
+  }),
+  'elevation.surface.overlay': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
+    }
   })
 };
 var backgroundHoverColorMap = {
@@ -247,6 +263,21 @@ var backgroundHoverColorMap = {
     ':hover': {
       backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
     }
+  }),
+  'elevation.surface': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
+    }
+  }),
+  'elevation.surface.raised': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
+    }
+  }),
+  'elevation.surface.overlay': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
+    }
   })
 };
 /**

package/dist/cjs/components/stack.partial.js

@@ -1,24 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _constants = require("../constants");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+/** @jsx jsx */
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
     alignItems: 'center'
@@ -83,7 +74,7 @@ var Stack = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       UNSAFE_style = _ref.UNSAFE_style,
       testId = _ref.testId;
   return (0, _react2.jsx)("div", {
-    style: _objectSpread({}, UNSAFE_style),
+    style: UNSAFE_style,
     css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
@@ -93,49 +84,50 @@ Stack.displayName = 'Stack';
 var _default = Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::13c9344cdb18845e176c0ca78b2972d3>>
+ * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;
 var rowGapMap = {
-  'sp-0': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-0']
+  'scale.0': (0, _react2.css)({
+    rowGap: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-25']
+  'scale.025': (0, _react2.css)({
+    rowGap: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-50']
+  'scale.050': (0, _react2.css)({
+    rowGap: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-75']
+  'scale.075': (0, _react2.css)({
+    rowGap: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-100']
+  'scale.100': (0, _react2.css)({
+    rowGap: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-150']
+  'scale.150': (0, _react2.css)({
+    rowGap: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-200']
+  'scale.200': (0, _react2.css)({
+    rowGap: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-300']
+  'scale.250': (0, _react2.css)({
+    rowGap: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-400']
+  'scale.300': (0, _react2.css)({
+    rowGap: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-500']
+  'scale.400': (0, _react2.css)({
+    rowGap: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-600']
+  'scale.500': (0, _react2.css)({
+    rowGap: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': (0, _react2.css)({
-    rowGap: _constants.SPACING_SCALE['sp-800']
+  'scale.600': (0, _react2.css)({
+    rowGap: "var(--ds-scale-600, 48px)"
   })
 };
 /**

package/dist/cjs/components/text.partial.js

@@ -7,114 +7,135 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
 
-var _react = require("@emotion/react");
+var _react2 = require("@emotion/react");
 
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 
-var _colorMap = require("../internal/color-map");
+var _colorMap = _interopRequireDefault(require("../internal/color-map"));
 
 var _surfaceProvider = require("./surface-provider");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+var _excluded = ["children"];
 var asAllowlist = ['span', 'div', 'p'];
 var fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
 var fontSizeMap = {
-  '11px': (0, _react.css)({
+  '11px': (0, _react2.css)({
     fontSize: '11px'
   }),
-  '12px': (0, _react.css)({
+  '12px': (0, _react2.css)({
     fontSize: '12px'
   }),
-  '14px': (0, _react.css)({
+  '14px': (0, _react2.css)({
     fontSize: '14px'
   })
 };
 // NOTE: can't use numbers as keys or Constellation won't build. Weird one.
 var fontWeightMap = {
-  '400': (0, _react.css)({
+  '400': (0, _react2.css)({
     fontWeight: 400
   }),
-  '500': (0, _react.css)({
+  '500': (0, _react2.css)({
     fontWeight: 500
   }),
-  '700': (0, _react.css)({
+  '600': (0, _react2.css)({
+    fontWeight: 600
+  }),
+  '700': (0, _react2.css)({
     fontWeight: 700
   })
 };
 var lineHeightMap = {
-  '12px': (0, _react.css)({
+  '12px': (0, _react2.css)({
     lineHeight: '12px'
   }),
-  '16px': (0, _react.css)({
+  '16px': (0, _react2.css)({
     lineHeight: '16px'
   }),
-  '20px': (0, _react.css)({
+  '20px': (0, _react2.css)({
     lineHeight: '20px'
   }),
-  '24px': (0, _react.css)({
+  '24px': (0, _react2.css)({
     lineHeight: '24px'
   }),
-  '28px': (0, _react.css)({
+  '28px': (0, _react2.css)({
     lineHeight: '28px'
   }),
-  '32px': (0, _react.css)({
+  '32px': (0, _react2.css)({
     lineHeight: '32px'
   }),
-  '40px': (0, _react.css)({
+  '40px': (0, _react2.css)({
     lineHeight: '40px'
   })
 };
 var textAlignMap = {
-  center: (0, _react.css)({
+  center: (0, _react2.css)({
     textAlign: 'center'
   }),
-  end: (0, _react.css)({
+  end: (0, _react2.css)({
     textAlign: 'end'
   }),
-  start: (0, _react.css)({
+  start: (0, _react2.css)({
     textAlign: 'start'
   })
 };
 var textTransformMap = {
-  none: (0, _react.css)({
+  none: (0, _react2.css)({
     textTransform: 'none'
   }),
-  lowercase: (0, _react.css)({
+  lowercase: (0, _react2.css)({
     textTransform: 'lowercase'
   }),
-  uppercase: (0, _react.css)({
+  uppercase: (0, _react2.css)({
     textTransform: 'uppercase'
   })
 };
 var verticalAlignMap = {
-  top: (0, _react.css)({
+  top: (0, _react2.css)({
     verticalAlign: 'top'
   }),
-  middle: (0, _react.css)({
+  middle: (0, _react2.css)({
     verticalAlign: 'middle'
   }),
-  bottom: (0, _react.css)({
+  bottom: (0, _react2.css)({
     verticalAlign: 'bottom'
   })
 };
-var baseStyles = (0, _react.css)({
+var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   margin: '0px',
   padding: '0px',
   fontFamily: fontFamily
 });
-var truncateStyles = (0, _react.css)({
+var truncateStyles = (0, _react2.css)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+/**
+ * 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.
+ */
+
+var useColor = function useColor(colorProp) {
+  var surface = (0, _surfaceProvider.useSurface)();
+  var inverseTextColor = _colorMap.default[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);
+};
 /**
  * __Text__
  *
@@ -125,88 +146,98 @@ var truncateStyles = (0, _react.css)({
  * @internal
  */
 
-var Text = function Text(_ref) {
-  var _ref$as = _ref.as,
-      Component = _ref$as === void 0 ? 'span' : _ref$as,
-      children = _ref.children,
-      colorTuple = _ref.color,
-      fontSize = _ref.fontSize,
-      fontWeight = _ref.fontWeight,
-      lineHeight = _ref.lineHeight,
-      _ref$shouldTruncate = _ref.shouldTruncate,
-      shouldTruncate = _ref$shouldTruncate === void 0 ? false : _ref$shouldTruncate,
-      textAlign = _ref.textAlign,
-      textTransform = _ref.textTransform,
-      verticalAlign = _ref.verticalAlign,
-      testId = _ref.testId,
-      UNSAFE_style = _ref.UNSAFE_style;
-  var surface = (0, _surfaceProvider.useSurface)(); // @ts-ignore
-
-  var _ref2 = colorTuple || [],
-      _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-      _ref3$ = _ref3[0],
-      color = _ref3$ === void 0 ? _colorMap.colorMap[surface] : _ref3$,
-      fallback = _ref3[1];
 
+var Text = function Text(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'span' : _props$as,
+      colorProp = props.color,
+      fontSize = props.fontSize,
+      fontWeight = props.fontWeight,
+      lineHeight = props.lineHeight,
+      _props$shouldTruncate = props.shouldTruncate,
+      shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
+      textAlign = props.textAlign,
+      textTransform = props.textTransform,
+      verticalAlign = props.verticalAlign,
+      testId = props.testId,
+      UNSAFE_style = props.UNSAFE_style,
+      id = props.id;
   (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-  return (0, _react.jsx)(Component, {
-    style: _objectSpread(_objectSpread({}, UNSAFE_style), fallback && {
-      '--ds-co-fb': fallback
-    }),
+  var 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, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
-    "data-testid": testId
+    "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;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::140ffff6e1310c1c37e2067e2c232b92>>
+ * @codegen <<SignedSource::3d4d694e49f72e72f83ec28c1feafb76>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
 
 exports.default = _default;
 var textColorMap = {
-  'color.text': (0, _react.css)({
-    color: "var(--ds-text, var(--ds-co-fb))"
+  'color.text': (0, _react2.css)({
+    color: "var(--ds-text, #172B4D)"
   }),
-  subtle: (0, _react.css)({
-    color: "var(--ds-text-subtle, var(--ds-co-fb))"
+  subtle: (0, _react2.css)({
+    color: "var(--ds-text-subtle, #42526E)"
   }),
-  subtlest: (0, _react.css)({
-    color: "var(--ds-text-subtlest, var(--ds-co-fb))"
+  subtlest: (0, _react2.css)({
+    color: "var(--ds-text-subtlest, #7A869A)"
   }),
-  disabled: (0, _react.css)({
-    color: "var(--ds-text-disabled, var(--ds-co-fb))"
+  disabled: (0, _react2.css)({
+    color: "var(--ds-text-disabled, #A5ADBA)"
   }),
-  inverse: (0, _react.css)({
-    color: "var(--ds-text-inverse, var(--ds-co-fb))"
+  inverse: (0, _react2.css)({
+    color: "var(--ds-text-inverse, #FFFFFF)"
   }),
-  brand: (0, _react.css)({
-    color: "var(--ds-text-brand, var(--ds-co-fb))"
+  brand: (0, _react2.css)({
+    color: "var(--ds-text-brand, #0065FF)"
   }),
-  selected: (0, _react.css)({
-    color: "var(--ds-text-selected, var(--ds-co-fb))"
+  selected: (0, _react2.css)({
+    color: "var(--ds-text-selected, #0052CC)"
   }),
-  danger: (0, _react.css)({
-    color: "var(--ds-text-danger, var(--ds-co-fb))"
+  danger: (0, _react2.css)({
+    color: "var(--ds-text-danger, #DE350B)"
   }),
-  warning: (0, _react.css)({
-    color: "var(--ds-text-warning, var(--ds-co-fb))"
+  warning: (0, _react2.css)({
+    color: "var(--ds-text-warning, #974F0C)"
   }),
-  'warning.inverse': (0, _react.css)({
-    color: "var(--ds-text-warning-inverse, var(--ds-co-fb))"
+  'warning.inverse': (0, _react2.css)({
+    color: "var(--ds-text-warning-inverse, #172B4D)"
   }),
-  success: (0, _react.css)({
-    color: "var(--ds-text-success, var(--ds-co-fb))"
+  success: (0, _react2.css)({
+    color: "var(--ds-text-success, #006644)"
   }),
-  discovery: (0, _react.css)({
-    color: "var(--ds-text-discovery, var(--ds-co-fb))"
+  discovery: (0, _react2.css)({
+    color: "var(--ds-text-discovery, #403294)"
   }),
-  information: (0, _react.css)({
-    color: "var(--ds-text-information, var(--ds-co-fb))"
+  information: (0, _react2.css)({
+    color: "var(--ds-text-information, #0052CC)"
   })
 };
 /**

package/dist/cjs/index.js

@@ -23,12 +23,6 @@ Object.defineProperty(exports, "UNSAFE_InteractionSurface", {
     return _interactionSurface.default;
   }
 });
-Object.defineProperty(exports, "UNSAFE_SPACING_SCALE", {
-  enumerable: true,
-  get: function get() {
-    return _constants.SPACING_SCALE;
-  }
-});
 Object.defineProperty(exports, "UNSAFE_Stack", {
   enumerable: true,
   get: function get() {
@@ -50,6 +44,4 @@ var _inline = _interopRequireDefault(require("./components/inline.partial"));
 
 var _stack = _interopRequireDefault(require("./components/stack.partial"));
 
-var _interactionSurface = _interopRequireDefault(require("./components/interaction-surface.partial"));
-
-var _constants = require("./constants");
+var _interactionSurface = _interopRequireDefault(require("./components/interaction-surface.partial"));

package/dist/cjs/internal/color-map.js

@@ -3,17 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorMap = void 0;
+exports.default = void 0;
 
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Some artifact
+ * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::8f568e4f0837f7af4a10429e060ad059>>
+ * @codegen <<SignedSource::b80b2a3d75c3215df8be35a6f5bda68d>>
  * @codegenCommand yarn codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
  */
-var colorMap = {
+var _default = {
   'neutral.bold': 'inverse',
   'neutral.bold.hovered': 'inverse',
   'neutral.bold.pressed': 'inverse',
@@ -39,4 +40,4 @@ var colorMap = {
   'information.bold.hovered': 'inverse',
   'information.bold.pressed': 'inverse'
 };
-exports.colorMap = colorMap;
+exports.default = _default;

package/dist/cjs/internal/spacing-scale.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spacingScale = void 0;
+
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Some artifact
+ *
+ * @codegen <<SignedSource::caecb926afa82b027fba396074de5c2c>>
+ * @codegenCommand yarn codegen-styles
+ */
+var spacingScale = ['scale.0', 'scale.025', 'scale.050', 'scale.075', 'scale.100', 'scale.150', 'scale.200', 'scale.250', 'scale.300', 'scale.400', 'scale.500', 'scale.600'];
+exports.spacingScale = spacingScale;