@atlaskit/ds-explorations 0.1.4 → 1.0.0

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

@@ -11,8 +11,6 @@ var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _constants = require("../constants");
-
 var _text = _interopRequireDefault(require("./text.partial"));
 
 /** @jsx jsx */
@@ -28,6 +26,12 @@ var flexAlignItemsMap = {
   }),
   flexEnd: (0, _react2.css)({
     alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
   })
 };
 var flexJustifyContentMap = {
@@ -39,6 +43,17 @@ var flexJustifyContentMap = {
   }),
   flexEnd: (0, _react2.css)({
     justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
   })
 };
 var baseStyles = (0, _react2.css)({
@@ -58,12 +73,15 @@ var Inline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var gap = _ref.gap,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
+      flexWrap = _ref.flexWrap,
       divider = _ref.divider,
+      UNSAFE_style = _ref.UNSAFE_style,
       children = _ref.children,
       testId = _ref.testId;
   var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(_text.default, null, divider) : divider;
   return (0, _react2.jsx)("div", {
-    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    style: UNSAFE_style,
+    css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
   }, _react.Children.map(children, function (child, index) {
@@ -74,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::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["gap"]
+ * @codegenParams ["columnGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
 
 exports.default = _default;
-var gapMap = {
-  'sp-0': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-0']
+var columnGapMap = {
+  'scale.0': (0, _react2.css)({
+    columnGap: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-25']
+  'scale.025': (0, _react2.css)({
+    columnGap: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-50']
+  'scale.050': (0, _react2.css)({
+    columnGap: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-75']
+  'scale.075': (0, _react2.css)({
+    columnGap: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-100']
+  'scale.100': (0, _react2.css)({
+    columnGap: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-150']
+  'scale.150': (0, _react2.css)({
+    columnGap: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-200']
+  'scale.200': (0, _react2.css)({
+    columnGap: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-300']
+  'scale.250': (0, _react2.css)({
+    columnGap: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-400']
+  'scale.300': (0, _react2.css)({
+    columnGap: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-500']
+  'scale.400': (0, _react2.css)({
+    columnGap: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-600']
+  'scale.500': (0, _react2.css)({
+    columnGap: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-800']
+  'scale.600': (0, _react2.css)({
+    columnGap: "var(--ds-scale-600, 48px)"
   })
 };
 /**

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

@@ -30,8 +30,9 @@ var baseStyles = (0, _react2.css)({
  * ```js
  * // a minimal icon button
  * <Box as="button">
- *   <InteractionSurface />
- *   <WarningIcon label="icon button" />
+ *   <InteractionSurface>
+ *    <WarningIcon label="icon button" />
+ *  </InteractionSurface>
  * </Box>
  * ```
  */
@@ -57,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::1bad97ad2c03ae813521797686ac780d>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
 
 exports.default = _default;
@@ -154,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 = {
@@ -246,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

@@ -9,8 +9,6 @@ var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _constants = require("../constants");
-
 /** @jsx jsx */
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
@@ -24,6 +22,12 @@ var flexAlignItemsMap = {
   }),
   flexEnd: (0, _react2.css)({
     alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
   })
 };
 var flexJustifyContentMap = {
@@ -35,6 +39,17 @@ var flexJustifyContentMap = {
   }),
   flexEnd: (0, _react2.css)({
     justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
   })
 };
 var baseStyles = (0, _react2.css)({
@@ -54,10 +69,13 @@ var Stack = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var gap = _ref.gap,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
+      flexWrap = _ref.flexWrap,
       children = _ref.children,
+      UNSAFE_style = _ref.UNSAFE_style,
       testId = _ref.testId;
   return (0, _react2.jsx)("div", {
-    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    style: UNSAFE_style,
+    css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
   }, children);
@@ -66,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::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["gap"]
+ * @codegenParams ["rowGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
 
 exports.default = _default;
-var gapMap = {
-  'sp-0': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-0']
+var rowGapMap = {
+  'scale.0': (0, _react2.css)({
+    rowGap: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-25']
+  'scale.025': (0, _react2.css)({
+    rowGap: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-50']
+  'scale.050': (0, _react2.css)({
+    rowGap: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-75']
+  'scale.075': (0, _react2.css)({
+    rowGap: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-100']
+  'scale.100': (0, _react2.css)({
+    rowGap: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-150']
+  'scale.150': (0, _react2.css)({
+    rowGap: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-200']
+  'scale.200': (0, _react2.css)({
+    rowGap: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-300']
+  'scale.250': (0, _react2.css)({
+    rowGap: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-400']
+  'scale.300': (0, _react2.css)({
+    rowGap: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-500']
+  'scale.400': (0, _react2.css)({
+    rowGap: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-600']
+  'scale.500': (0, _react2.css)({
+    rowGap: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': (0, _react2.css)({
-    gap: _constants.SPACING_SCALE['sp-800']
+  'scale.600': (0, _react2.css)({
+    rowGap: "var(--ds-scale-600, 48px)"
   })
 };
 /**

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

@@ -7,112 +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__
  *
@@ -123,88 +146,96 @@ 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;
   (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
   }, 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::21771f01de3c37646642de03274f0738>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
 
 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"));