@atlaskit/ds-explorations 0.1.5 → 1.0.0

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { Children, forwardRef, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
-import { SPACING_SCALE } from '../constants';
 import Text from './text.partial';
 const flexAlignItemsMap = {
   center: css({
@@ -70,8 +69,7 @@ const Inline = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const dividerComponent = typeof divider === 'string' ? jsx(Text, null, divider) : divider;
   return jsx("div", {
-    style: { ...UNSAFE_style
-    },
+    style: UNSAFE_style,
     css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
@@ -83,48 +81,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>>
  */
 
 const 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/es2019/components/interaction-surface.partial.js

@@ -49,10 +49,11 @@ const InteractionSurface = ({
 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>>
  */
 
 const backgroundActiveColorMap = {
@@ -145,6 +146,21 @@ const 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)"
+    }
   })
 };
 const backgroundHoverColorMap = {
@@ -237,6 +253,21 @@ const 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/es2019/components/stack.partial.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { SPACING_SCALE } from '../constants';
 const flexAlignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -67,8 +66,7 @@ const Stack = /*#__PURE__*/forwardRef(({
   testId
 }, ref) => {
   return jsx("div", {
-    style: { ...UNSAFE_style
-    },
+    style: UNSAFE_style,
     css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
@@ -78,48 +76,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>>
  */
 
 const 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/es2019/components/text.partial.js

@@ -1,7 +1,8 @@
 /** @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';
 const asAllowlist = ['span', 'div', 'p'];
 const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;
@@ -24,6 +25,9 @@ const fontWeightMap = {
   '500': css({
     fontWeight: 500
   }),
+  '600': css({
+    fontWeight: 600
+  }),
   '700': css({
     fontWeight: 700
   })
@@ -95,6 +99,25 @@ const 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.
+ */
+
+const useColor = colorProp => {
+  const surface = useSurface();
+  const 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.
+   */
+
+  const color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
+  return color;
+};
+
+const HasTextAncestorContext = /*#__PURE__*/createContext(false);
+
+const useHasTextAncestor = () => useContext(HasTextAncestorContext);
 /**
  * __Text__
  *
@@ -105,83 +128,96 @@ const truncateStyles = css({
  * @internal
  */
 
+
 const Text = ({
-  as: Component = 'span',
   children,
-  color: colorTuple,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  shouldTruncate = false,
-  textAlign,
-  textTransform,
-  verticalAlign,
-  testId,
-  UNSAFE_style
+  ...props
 }) => {
-  const surface = useSurface(); // @ts-ignore
-
-  const [color = colorMap[surface], fallback] = colorTuple || [];
+  const {
+    as: Component = 'span',
+    color: colorProp,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    shouldTruncate = false,
+    textAlign,
+    textTransform,
+    verticalAlign,
+    testId,
+    UNSAFE_style
+  } = props;
   invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
-  return jsx(Component, {
-    style: { ...UNSAFE_style,
-      ...(fallback && {
-        '--ds-co-fb': fallback
-      })
-    },
+  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, 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>>
  */
 
 const 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/es2019/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/es2019/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 const colorMap = {
+export default {
   'neutral.bold': 'inverse',
   'neutral.bold.hovered': 'inverse',
   'neutral.bold.pressed': 'inverse',

package/dist/es2019/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 const 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/es2019/version.json

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