@atlaskit/ds-explorations 2.0.0 → 2.0.2

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

@@ -13,7 +13,6 @@ const baseStyles = css({
     pointerEvents: 'none'
   }
 });
-
 /**
  *
  * @example
@@ -32,39 +31,38 @@ const InteractionSurface = ({
   testId
 }) => {
   const defaultSurface = useContext(SurfaceContext);
-  let surface = appearance || defaultSurface; // This case will occur if the Box has not set a bg color and the ancestor surface
+  let surface = appearance || defaultSurface;
+
+  // This case will occur if the Box has not set a bg color and the ancestor surface
   // is an elevation. An alternative would be to throw an error here as it may be better
   // to ensure correct predictable behaviour based on user specification.
-
   if (!(surface in backgroundActiveColorMap)) {
     surface = 'neutral';
   }
-
   return jsx(Fragment, null, jsx("span", {
     "data-testid": testId,
     css: [baseStyles, surface && backgroundHoverColorMap[surface], surface && backgroundActiveColorMap[surface]]
   }), children);
 };
-
 export default InteractionSurface;
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::46f9477bc75d77a16327328d1b49c35f>>
+ * @codegen <<SignedSource::4f6bde99739600abea2bbe6e62397bc4>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
-
 const backgroundActiveColorMap = {
-  'inverse.subtle': css({
+  input: css({
     ':active': {
-      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
+      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
     }
   }),
-  input: css({
+  'inverse.subtle': css({
     ':active': {
-      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
+      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
     }
   }),
   neutral: css({
@@ -82,11 +80,6 @@ const backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
     }
   }),
-  'brand.bold': css({
-    ':active': {
-      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
-    }
-  }),
   selected: css({
     ':active': {
       backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
@@ -97,6 +90,11 @@ const backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
     }
   }),
+  'brand.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
+    }
+  }),
   danger: css({
     ':active': {
       backgroundColor: "var(--ds-background-danger-pressed, #FF9C8F)"
@@ -152,26 +150,26 @@ const backgroundActiveColorMap = {
       backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.raised': css({
+  'elevation.surface.overlay': css({
     ':active': {
-      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.overlay': css({
+  'elevation.surface.raised': css({
     ':active': {
-      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
     }
   })
 };
 const backgroundHoverColorMap = {
-  'inverse.subtle': css({
+  input: css({
     ':hover': {
-      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
+      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
     }
   }),
-  input: css({
+  'inverse.subtle': css({
     ':hover': {
-      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
+      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
     }
   }),
   neutral: css({
@@ -189,11 +187,6 @@ const backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
     }
   }),
-  'brand.bold': css({
-    ':hover': {
-      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
-    }
-  }),
   selected: css({
     ':hover': {
       backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
@@ -204,6 +197,11 @@ const backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
     }
   }),
+  'brand.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    }
+  }),
   danger: css({
     ':hover': {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD2CC)"
@@ -259,17 +257,18 @@ const backgroundHoverColorMap = {
       backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.raised': css({
+  'elevation.surface.overlay': css({
     ':hover': {
-      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.overlay': css({
+  'elevation.surface.raised': css({
     ':hover': {
-      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
     }
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -48,6 +48,7 @@ const baseStyles = css({
   boxSizing: 'border-box',
   flexDirection: 'column'
 });
+
 /**
  * __Stack__
  *
@@ -55,7 +56,6 @@ const baseStyles = css({
  * Renders a `div` by default.
  *
  */
-
 const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   gap,
   alignItems,
@@ -74,15 +74,15 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 Stack.displayName = 'Stack';
 export default Stack;
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ac9028ae231558f3eedd10f0db04a8fe>>
+ * @codegen <<SignedSource::91d26b1ace8b38363779ae85a7ddc51b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
-
 const rowGapMap = {
   'space.0': css({
     rowGap: "var(--ds-space-0, 0px)"
@@ -127,6 +127,7 @@ const rowGapMap = {
     rowGap: "var(--ds-space-800, 64px)"
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -1,11 +1,11 @@
 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__
  *
@@ -13,7 +13,6 @@ export const SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
  *
  * @see SurfaceContext
  */
-
 export const useSurface = () => {
   return useContext(SurfaceContext);
 };

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

@@ -48,25 +48,24 @@ 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__
  *
@@ -76,8 +75,6 @@ const useHasTextAncestor = () => useContext(HasTextAncestorContext);
  *
  * @internal
  */
-
-
 const Text = ({
   children,
   ...props
@@ -99,37 +96,36 @@ const Text = ({
   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, fontFamilyMap.sans, 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,
     id: id
   }, children);
-  return isWrapped ? // no need to re-apply context if the text is already wrapped
+  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::bd36caff8bedb3bdc89b6f2311c6160a>>
+ * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::39bc8db0f376f5635a25be0137792642>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
  */
-
 const fontSizeMap = {
   'size.050': css({
     fontSize: "var(--ds-font-size-050, 11px)"
@@ -198,41 +194,34 @@ const lineHeightMap = {
     lineHeight: "var(--ds-font-lineHeight-600, 40px)"
   })
 };
-
 /**
  * @codegenEnd
  */
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d88a2527302fee634bec7ae405e9217b>>
+ * @codegen <<SignedSource::3780858df77f5fe0c6e0f39a4c989741>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 const textColorMap = {
   'color.text': css({
     color: "var(--ds-text, #172B4D)"
   }),
-  subtle: css({
-    color: "var(--ds-text-subtle, #42526E)"
-  }),
-  subtlest: css({
-    color: "var(--ds-text-subtlest, #7A869A)"
-  }),
   disabled: css({
     color: "var(--ds-text-disabled, #A5ADBA)"
   }),
   inverse: css({
     color: "var(--ds-text-inverse, #FFFFFF)"
   }),
-  brand: css({
-    color: "var(--ds-text-brand, #0065FF)"
-  }),
   selected: css({
     color: "var(--ds-text-selected, #0052CC)"
   }),
+  brand: css({
+    color: "var(--ds-text-brand, #0065FF)"
+  }),
   danger: css({
     color: "var(--ds-text-danger, #DE350B)"
   }),
@@ -250,8 +239,15 @@ const textColorMap = {
   }),
   information: css({
     color: "var(--ds-text-information, #0052CC)"
+  }),
+  subtlest: css({
+    color: "var(--ds-text-subtlest, #7A869A)"
+  }),
+  subtle: css({
+    color: "var(--ds-text-subtle, #42526E)"
   })
 };
+
 /**
  * @codegenEnd
  */

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

@@ -3,20 +3,20 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::55412dc750db330e0a2a51918237e29f>>
+ * @codegen <<SignedSource::d168519874a16bbb92cfbfd4747a39b4>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 export default {
   'neutral.bold': 'inverse',
   'neutral.bold.hovered': 'inverse',
   'neutral.bold.pressed': 'inverse',
-  'brand.bold': 'inverse',
-  'brand.bold.hovered': 'inverse',
-  'brand.bold.pressed': 'inverse',
   'selected.bold': 'inverse',
   'selected.bold.hovered': 'inverse',
   'selected.bold.pressed': 'inverse',
+  'brand.bold': 'inverse',
+  'brand.bold.hovered': 'inverse',
+  'brand.bold.pressed': 'inverse',
   'danger.bold': 'inverse',
   'danger.bold.hovered': 'inverse',
   'danger.bold.pressed': 'inverse',

package/dist/es2019/version.json

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