@atlaskit/ds-explorations 0.1.5 → 1.0.0

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

@@ -1,13 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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) { _defineProperty(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 */
 import { Children, forwardRef, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
-import { SPACING_SCALE } from '../constants';
 import Text from './text.partial';
 var flexAlignItemsMap = {
   center: css({
@@ -75,7 +68,7 @@ var Inline = /*#__PURE__*/forwardRef(function (_ref, ref) {
       testId = _ref.testId;
   var dividerComponent = typeof divider === 'string' ? jsx(Text, null, divider) : divider;
   return 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
@@ -87,48 +80,49 @@ Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7a985afa5e15ffd4f6f9c0db0e99ceb6>>
+ * @codegen <<SignedSource::cff5655983f2243060cade5b107d7762>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
 
 var columnGapMap = {
-  'sp-0': css({
-    columnGap: SPACING_SCALE['sp-0']
+  'scale.0': css({
+    columnGap: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': css({
-    columnGap: SPACING_SCALE['sp-25']
+  'scale.025': css({
+    columnGap: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': css({
-    columnGap: SPACING_SCALE['sp-50']
+  'scale.050': css({
+    columnGap: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': css({
-    columnGap: SPACING_SCALE['sp-75']
+  'scale.075': css({
+    columnGap: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': css({
-    columnGap: SPACING_SCALE['sp-100']
+  'scale.100': css({
+    columnGap: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': css({
-    columnGap: SPACING_SCALE['sp-150']
+  'scale.150': css({
+    columnGap: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': css({
-    columnGap: SPACING_SCALE['sp-200']
+  'scale.200': css({
+    columnGap: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': css({
-    columnGap: SPACING_SCALE['sp-300']
+  'scale.250': css({
+    columnGap: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': css({
-    columnGap: SPACING_SCALE['sp-400']
+  'scale.300': css({
+    columnGap: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': css({
-    columnGap: SPACING_SCALE['sp-500']
+  'scale.400': css({
+    columnGap: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': css({
-    columnGap: SPACING_SCALE['sp-600']
+  'scale.500': css({
+    columnGap: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': css({
-    columnGap: SPACING_SCALE['sp-800']
+  'scale.600': css({
+    columnGap: "var(--ds-scale-600, 48px)"
   })
 };
 /**

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

@@ -48,10 +48,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
 export 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>>
  */
 
 var backgroundActiveColorMap = {
@@ -144,6 +145,21 @@ var backgroundActiveColorMap = {
     ':active': {
       backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
     }
+  }),
+  'elevation.surface': css({
+    ':active': {
+      backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
+    }
+  }),
+  'elevation.surface.raised': css({
+    ':active': {
+      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
+    }
+  }),
+  'elevation.surface.overlay': css({
+    ':active': {
+      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
+    }
   })
 };
 var backgroundHoverColorMap = {
@@ -236,6 +252,21 @@ var backgroundHoverColorMap = {
     ':hover': {
       backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
     }
+  }),
+  'elevation.surface': css({
+    ':hover': {
+      backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
+    }
+  }),
+  'elevation.surface.raised': css({
+    ':hover': {
+      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
+    }
+  }),
+  'elevation.surface.overlay': css({
+    ':hover': {
+      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
+    }
   })
 };
 /**

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

@@ -1,13 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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) { _defineProperty(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 */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { SPACING_SCALE } from '../constants';
 var flexAlignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -72,7 +65,7 @@ var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
       UNSAFE_style = _ref.UNSAFE_style,
       testId = _ref.testId;
   return 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
@@ -82,48 +75,49 @@ Stack.displayName = 'Stack';
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::13c9344cdb18845e176c0ca78b2972d3>>
+ * @codegen <<SignedSource::c486b14097494305925c3c989823d602>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
 
 var rowGapMap = {
-  'sp-0': css({
-    rowGap: SPACING_SCALE['sp-0']
+  'scale.0': css({
+    rowGap: "var(--ds-scale-0, 0px)"
   }),
-  'sp-25': css({
-    rowGap: SPACING_SCALE['sp-25']
+  'scale.025': css({
+    rowGap: "var(--ds-scale-025, 2px)"
   }),
-  'sp-50': css({
-    rowGap: SPACING_SCALE['sp-50']
+  'scale.050': css({
+    rowGap: "var(--ds-scale-050, 4px)"
   }),
-  'sp-75': css({
-    rowGap: SPACING_SCALE['sp-75']
+  'scale.075': css({
+    rowGap: "var(--ds-scale-075, 6px)"
   }),
-  'sp-100': css({
-    rowGap: SPACING_SCALE['sp-100']
+  'scale.100': css({
+    rowGap: "var(--ds-scale-100, 8px)"
   }),
-  'sp-150': css({
-    rowGap: SPACING_SCALE['sp-150']
+  'scale.150': css({
+    rowGap: "var(--ds-scale-150, 12px)"
   }),
-  'sp-200': css({
-    rowGap: SPACING_SCALE['sp-200']
+  'scale.200': css({
+    rowGap: "var(--ds-scale-200, 16px)"
   }),
-  'sp-300': css({
-    rowGap: SPACING_SCALE['sp-300']
+  'scale.250': css({
+    rowGap: "var(--ds-scale-250, 20px)"
   }),
-  'sp-400': css({
-    rowGap: SPACING_SCALE['sp-400']
+  'scale.300': css({
+    rowGap: "var(--ds-scale-300, 24px)"
   }),
-  'sp-500': css({
-    rowGap: SPACING_SCALE['sp-500']
+  'scale.400': css({
+    rowGap: "var(--ds-scale-400, 32px)"
   }),
-  'sp-600': css({
-    rowGap: SPACING_SCALE['sp-600']
+  'scale.500': css({
+    rowGap: "var(--ds-scale-500, 40px)"
   }),
-  'sp-800': css({
-    rowGap: SPACING_SCALE['sp-800']
+  'scale.600': css({
+    rowGap: "var(--ds-scale-600, 48px)"
   })
 };
 /**

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

@@ -1,14 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
-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) { _defineProperty(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; }
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
 
 /** @jsx jsx */
+import { createContext, Fragment, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { colorMap } from '../internal/color-map';
+import surfaceColorMap from '../internal/color-map';
 import { useSurface } from './surface-provider';
 var asAllowlist = ['span', 'div', 'p'];
 var fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
@@ -31,6 +28,9 @@ var fontWeightMap = {
   '500': css({
     fontWeight: 500
   }),
+  '600': css({
+    fontWeight: 600
+  }),
   '700': css({
     fontWeight: 700
   })
@@ -102,6 +102,27 @@ var truncateStyles = css({
   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 = useSurface();
+  var inverseTextColor = surfaceColorMap[surface];
+  /**
+   * Where the color of the surface is inverted we override the user choice
+   * as there is no valid choice that is not covered by the override.
+   */
+
+  var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
+  return color;
+};
+
+var HasTextAncestorContext = /*#__PURE__*/createContext(false);
+
+var useHasTextAncestor = function useHasTextAncestor() {
+  return useContext(HasTextAncestorContext);
+};
 /**
  * __Text__
  *
@@ -112,87 +133,96 @@ var truncateStyles = 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 = useSurface(); // @ts-ignore
 
-  var _ref2 = colorTuple || [],
-      _ref3 = _slicedToArray(_ref2, 2),
-      _ref3$ = _ref3[0],
-      color = _ref3$ === void 0 ? colorMap[surface] : _ref3$,
-      fallback = _ref3[1];
+var Text = function Text(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_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;
   invariant(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-  return 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 jsx(Fragment, null, children);
+  }
+
+  var component = 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 : jsx(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
 };
 
 export 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>>
  */
 
 var textColorMap = {
   'color.text': css({
-    color: "var(--ds-text, var(--ds-co-fb))"
+    color: "var(--ds-text, #172B4D)"
   }),
   subtle: css({
-    color: "var(--ds-text-subtle, var(--ds-co-fb))"
+    color: "var(--ds-text-subtle, #42526E)"
   }),
   subtlest: css({
-    color: "var(--ds-text-subtlest, var(--ds-co-fb))"
+    color: "var(--ds-text-subtlest, #7A869A)"
   }),
   disabled: css({
-    color: "var(--ds-text-disabled, var(--ds-co-fb))"
+    color: "var(--ds-text-disabled, #A5ADBA)"
   }),
   inverse: css({
-    color: "var(--ds-text-inverse, var(--ds-co-fb))"
+    color: "var(--ds-text-inverse, #FFFFFF)"
   }),
   brand: css({
-    color: "var(--ds-text-brand, var(--ds-co-fb))"
+    color: "var(--ds-text-brand, #0065FF)"
   }),
   selected: css({
-    color: "var(--ds-text-selected, var(--ds-co-fb))"
+    color: "var(--ds-text-selected, #0052CC)"
   }),
   danger: css({
-    color: "var(--ds-text-danger, var(--ds-co-fb))"
+    color: "var(--ds-text-danger, #DE350B)"
   }),
   warning: css({
-    color: "var(--ds-text-warning, var(--ds-co-fb))"
+    color: "var(--ds-text-warning, #974F0C)"
   }),
   'warning.inverse': css({
-    color: "var(--ds-text-warning-inverse, var(--ds-co-fb))"
+    color: "var(--ds-text-warning-inverse, #172B4D)"
   }),
   success: css({
-    color: "var(--ds-text-success, var(--ds-co-fb))"
+    color: "var(--ds-text-success, #006644)"
   }),
   discovery: css({
-    color: "var(--ds-text-discovery, var(--ds-co-fb))"
+    color: "var(--ds-text-discovery, #403294)"
   }),
   information: css({
-    color: "var(--ds-text-information, var(--ds-co-fb))"
+    color: "var(--ds-text-information, #0052CC)"
   })
 };
 /**

package/dist/esm/index.js

@@ -2,5 +2,4 @@ export { default as UNSAFE_Box } from './components/box.partial';
 export { default as UNSAFE_Text } from './components/text.partial';
 export { default as UNSAFE_Inline } from './components/inline.partial';
 export { default as UNSAFE_Stack } from './components/stack.partial';
-export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
-export { SPACING_SCALE as UNSAFE_SPACING_SCALE } from './constants';
+export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';

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

@@ -1,12 +1,13 @@
 /**
  * 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::c9429c38d12f88de9f5be644bf5e704a>>
  * @codegenCommand yarn codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::0c1fe9904b2ff2465a532b97ab76491e>>
  */
-export var colorMap = {
+export default {
   'neutral.bold': 'inverse',
   'neutral.bold.hovered': 'inverse',
   'neutral.bold.pressed': 'inverse',

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

@@ -0,0 +1,9 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Some artifact
+ *
+ * @codegen <<SignedSource::caecb926afa82b027fba396074de5c2c>>
+ * @codegenCommand yarn codegen-styles
+ */
+export 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'];

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "0.1.5",
+	"version": "1.0.0",
 	"sideEffects": false
 }