@atlaskit/ds-explorations 2.0.0 → 2.0.2

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

@@ -1,6 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
-
 /** @jsx jsx */
 import { createContext, Fragment, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -51,27 +50,26 @@ 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__
  *
@@ -81,60 +79,56 @@ var useHasTextAncestor = function useHasTextAncestor() {
  *
  * @internal
  */
-
-
 var Text = function Text(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    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,
-      id = props.id;
+    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;
   invariant(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   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, 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>>
  */
-
 var fontSizeMap = {
   'size.050': css({
     fontSize: "var(--ds-font-size-050, 11px)"
@@ -203,41 +197,34 @@ var 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>>
  */
 var 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)"
   }),
@@ -255,8 +242,15 @@ var 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/esm/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/esm/version.json

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

package/dist/types/components/box.partial.d.ts

@@ -222,11 +222,11 @@ export declare type Height = keyof typeof heightMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::99c5403dd8b57b15bf1240cc456b6b16>>
+ * @codegen <<SignedSource::dd066079dac7b8cd6f947965a2f1a744>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
 declare const paddingMap: {
     'space.0': import("@emotion/react").SerializedStyles;
@@ -284,38 +284,38 @@ export declare type PaddingInline = keyof typeof paddingInlineMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::201c8a6c6ff88ac47cdb02365c643ff2>>
+ * @codegen <<SignedSource::514663609a5a48a284de40c5c4ad200b>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
  */
 declare const borderColorMap: {
     readonly 'color.border': import("@emotion/react").SerializedStyles;
-    readonly bold: import("@emotion/react").SerializedStyles;
-    readonly inverse: import("@emotion/react").SerializedStyles;
+    readonly disabled: import("@emotion/react").SerializedStyles;
     readonly focused: import("@emotion/react").SerializedStyles;
     readonly input: import("@emotion/react").SerializedStyles;
-    readonly disabled: import("@emotion/react").SerializedStyles;
-    readonly brand: import("@emotion/react").SerializedStyles;
+    readonly inverse: import("@emotion/react").SerializedStyles;
     readonly selected: import("@emotion/react").SerializedStyles;
+    readonly brand: import("@emotion/react").SerializedStyles;
     readonly danger: import("@emotion/react").SerializedStyles;
     readonly warning: import("@emotion/react").SerializedStyles;
     readonly success: import("@emotion/react").SerializedStyles;
     readonly discovery: import("@emotion/react").SerializedStyles;
     readonly information: import("@emotion/react").SerializedStyles;
+    readonly bold: import("@emotion/react").SerializedStyles;
 };
 export declare type BorderColor = keyof typeof borderColorMap;
 declare const backgroundColorMap: {
     readonly disabled: import("@emotion/react").SerializedStyles;
-    readonly 'inverse.subtle': import("@emotion/react").SerializedStyles;
     readonly input: import("@emotion/react").SerializedStyles;
+    readonly 'inverse.subtle': import("@emotion/react").SerializedStyles;
     readonly neutral: import("@emotion/react").SerializedStyles;
     readonly 'neutral.subtle': import("@emotion/react").SerializedStyles;
     readonly 'neutral.bold': import("@emotion/react").SerializedStyles;
-    readonly 'brand.bold': import("@emotion/react").SerializedStyles;
     readonly selected: import("@emotion/react").SerializedStyles;
     readonly 'selected.bold': import("@emotion/react").SerializedStyles;
+    readonly 'brand.bold': import("@emotion/react").SerializedStyles;
     readonly danger: import("@emotion/react").SerializedStyles;
     readonly 'danger.bold': import("@emotion/react").SerializedStyles;
     readonly warning: import("@emotion/react").SerializedStyles;
@@ -330,17 +330,17 @@ declare const backgroundColorMap: {
     readonly 'color.blanket.selected': import("@emotion/react").SerializedStyles;
     readonly 'color.blanket.danger': import("@emotion/react").SerializedStyles;
     readonly 'elevation.surface': import("@emotion/react").SerializedStyles;
-    readonly 'elevation.surface.sunken': import("@emotion/react").SerializedStyles;
-    readonly 'elevation.surface.raised': import("@emotion/react").SerializedStyles;
     readonly 'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface.raised': import("@emotion/react").SerializedStyles;
+    readonly 'elevation.surface.sunken': import("@emotion/react").SerializedStyles;
 };
 export declare type BackgroundColor = keyof typeof backgroundColorMap;
 declare const shadowMap: {
-    readonly raised: import("@emotion/react").SerializedStyles;
     readonly overflow: import("@emotion/react").SerializedStyles;
-    readonly 'overflow.spread': import("@emotion/react").SerializedStyles;
     readonly 'overflow.perimeter': import("@emotion/react").SerializedStyles;
+    readonly 'overflow.spread': import("@emotion/react").SerializedStyles;
     readonly overlay: import("@emotion/react").SerializedStyles;
+    readonly raised: import("@emotion/react").SerializedStyles;
 };
 export declare type Shadow = keyof typeof shadowMap;
 /**

package/dist/types/components/inline.partial.d.ts

@@ -71,11 +71,11 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0a2a4380b534d14cdad759ff2d33a6c8>>
+ * @codegen <<SignedSource::e4218f7c850d1484a192d5b8b5dce136>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
 declare const columnGapMap: {
     'space.0': import("@emotion/react").SerializedStyles;

package/dist/types/components/interaction-surface.partial.d.ts

@@ -21,14 +21,14 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
 declare const InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
 export default InteractionSurface;
 declare const backgroundHoverColorMap: {
-    'inverse.subtle': import("@emotion/react").SerializedStyles;
     input: import("@emotion/react").SerializedStyles;
+    'inverse.subtle': import("@emotion/react").SerializedStyles;
     neutral: import("@emotion/react").SerializedStyles;
     'neutral.subtle': import("@emotion/react").SerializedStyles;
     'neutral.bold': import("@emotion/react").SerializedStyles;
-    'brand.bold': import("@emotion/react").SerializedStyles;
     selected: import("@emotion/react").SerializedStyles;
     'selected.bold': import("@emotion/react").SerializedStyles;
+    'brand.bold': import("@emotion/react").SerializedStyles;
     danger: import("@emotion/react").SerializedStyles;
     'danger.bold': import("@emotion/react").SerializedStyles;
     warning: import("@emotion/react").SerializedStyles;
@@ -40,8 +40,8 @@ declare const backgroundHoverColorMap: {
     information: import("@emotion/react").SerializedStyles;
     'information.bold': import("@emotion/react").SerializedStyles;
     'elevation.surface': import("@emotion/react").SerializedStyles;
-    'elevation.surface.raised': import("@emotion/react").SerializedStyles;
     'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
+    'elevation.surface.raised': import("@emotion/react").SerializedStyles;
 };
 declare type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
 /**

package/dist/types/components/stack.partial.d.ts

@@ -55,11 +55,11 @@ declare const Stack: import("react").MemoExoticComponent<import("react").Forward
 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>>
  */
 declare const rowGapMap: {
     'space.0': import("@emotion/react").SerializedStyles;

package/dist/types/components/surface-provider.d.ts

@@ -4,7 +4,7 @@
  *
  * A surface context provides context information on the current background (if set).
  */
-export declare const SurfaceContext: import("react").Context<"color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.sunken" | "elevation.surface.raised" | "elevation.surface.overlay" | "disabled" | "inverse.subtle" | "input" | "neutral" | "neutral.subtle" | "neutral.bold" | "brand.bold" | "selected" | "selected.bold" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold">;
+export declare const SurfaceContext: import("react").Context<"color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.bold" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold">;
 /**
  * __useSurface__
  *
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.blanket" | "
  *
  * @see SurfaceContext
  */
-export declare const useSurface: () => "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.sunken" | "elevation.surface.raised" | "elevation.surface.overlay" | "disabled" | "inverse.subtle" | "input" | "neutral" | "neutral.subtle" | "neutral.bold" | "brand.bold" | "selected" | "selected.bold" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold";
+export declare const useSurface: () => "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.overlay" | "elevation.surface.raised" | "elevation.surface.sunken" | "disabled" | "input" | "inverse.subtle" | "neutral" | "neutral.subtle" | "neutral.bold" | "selected" | "selected.bold" | "brand.bold" | "danger" | "danger.bold" | "warning" | "warning.bold" | "success" | "success.bold" | "discovery" | "discovery.bold" | "information" | "information.bold";

package/dist/types/components/text.partial.d.ts

@@ -81,11 +81,11 @@ declare const Text: FC<TextProps>;
 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>>
  */
 declare const fontSizeMap: {
     'size.050': import("@emotion/react").SerializedStyles;
@@ -124,26 +124,26 @@ export declare type LineHeight = keyof typeof lineHeightMap;
  */
 /**
  * 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>>
  */
 declare const textColorMap: {
     readonly 'color.text': import("@emotion/react").SerializedStyles;
-    readonly subtle: import("@emotion/react").SerializedStyles;
-    readonly subtlest: import("@emotion/react").SerializedStyles;
     readonly disabled: import("@emotion/react").SerializedStyles;
     readonly inverse: import("@emotion/react").SerializedStyles;
-    readonly brand: import("@emotion/react").SerializedStyles;
     readonly selected: import("@emotion/react").SerializedStyles;
+    readonly brand: import("@emotion/react").SerializedStyles;
     readonly danger: import("@emotion/react").SerializedStyles;
     readonly warning: import("@emotion/react").SerializedStyles;
     readonly 'warning.inverse': import("@emotion/react").SerializedStyles;
     readonly success: import("@emotion/react").SerializedStyles;
     readonly discovery: import("@emotion/react").SerializedStyles;
     readonly information: import("@emotion/react").SerializedStyles;
+    readonly subtlest: import("@emotion/react").SerializedStyles;
+    readonly subtle: import("@emotion/react").SerializedStyles;
 };
 export declare type TextColor = keyof typeof textColorMap;
 /**

package/dist/types/internal/color-map.d.ts

@@ -2,12 +2,12 @@ declare const _default: {
     readonly 'neutral.bold': "inverse";
     readonly 'neutral.bold.hovered': "inverse";
     readonly 'neutral.bold.pressed': "inverse";
-    readonly 'brand.bold': "inverse";
-    readonly 'brand.bold.hovered': "inverse";
-    readonly 'brand.bold.pressed': "inverse";
     readonly 'selected.bold': "inverse";
     readonly 'selected.bold.hovered': "inverse";
     readonly 'selected.bold.pressed': "inverse";
+    readonly 'brand.bold': "inverse";
+    readonly 'brand.bold.hovered': "inverse";
+    readonly 'brand.bold.pressed': "inverse";
     readonly 'danger.bold': "inverse";
     readonly 'danger.bold.hovered': "inverse";
     readonly 'danger.bold.pressed': "inverse";
@@ -29,8 +29,8 @@ declare const _default: {
  *
  * 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 _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -39,7 +39,7 @@
     "./inline": "./src/components/inline.partial.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"

package/report.api.md

@@ -40,14 +40,14 @@ type BackgroundColor = keyof typeof backgroundColorMap;
 // @public (undocumented)
 const backgroundColorMap: {
   readonly disabled: SerializedStyles;
-  readonly 'inverse.subtle': SerializedStyles;
   readonly input: SerializedStyles;
+  readonly 'inverse.subtle': SerializedStyles;
   readonly neutral: SerializedStyles;
   readonly 'neutral.subtle': SerializedStyles;
   readonly 'neutral.bold': SerializedStyles;
-  readonly 'brand.bold': SerializedStyles;
   readonly selected: SerializedStyles;
   readonly 'selected.bold': SerializedStyles;
+  readonly 'brand.bold': SerializedStyles;
   readonly danger: SerializedStyles;
   readonly 'danger.bold': SerializedStyles;
   readonly warning: SerializedStyles;
@@ -62,21 +62,21 @@ const backgroundColorMap: {
   readonly 'color.blanket.selected': SerializedStyles;
   readonly 'color.blanket.danger': SerializedStyles;
   readonly 'elevation.surface': SerializedStyles;
-  readonly 'elevation.surface.sunken': SerializedStyles;
-  readonly 'elevation.surface.raised': SerializedStyles;
   readonly 'elevation.surface.overlay': SerializedStyles;
+  readonly 'elevation.surface.raised': SerializedStyles;
+  readonly 'elevation.surface.sunken': SerializedStyles;
 };
 
 // @public (undocumented)
 const backgroundHoverColorMap: {
-  'inverse.subtle': SerializedStyles;
   input: SerializedStyles;
+  'inverse.subtle': SerializedStyles;
   neutral: SerializedStyles;
   'neutral.subtle': SerializedStyles;
   'neutral.bold': SerializedStyles;
-  'brand.bold': SerializedStyles;
   selected: SerializedStyles;
   'selected.bold': SerializedStyles;
+  'brand.bold': SerializedStyles;
   danger: SerializedStyles;
   'danger.bold': SerializedStyles;
   warning: SerializedStyles;
@@ -88,8 +88,8 @@ const backgroundHoverColorMap: {
   information: SerializedStyles;
   'information.bold': SerializedStyles;
   'elevation.surface': SerializedStyles;
-  'elevation.surface.raised': SerializedStyles;
   'elevation.surface.overlay': SerializedStyles;
+  'elevation.surface.raised': SerializedStyles;
 };
 
 // @public (undocumented)
@@ -104,18 +104,18 @@ type BorderColor = keyof typeof borderColorMap;
 // @public
 const borderColorMap: {
   readonly 'color.border': SerializedStyles;
-  readonly bold: SerializedStyles;
-  readonly inverse: SerializedStyles;
+  readonly disabled: SerializedStyles;
   readonly focused: SerializedStyles;
   readonly input: SerializedStyles;
-  readonly disabled: SerializedStyles;
-  readonly brand: SerializedStyles;
+  readonly inverse: SerializedStyles;
   readonly selected: SerializedStyles;
+  readonly brand: SerializedStyles;
   readonly danger: SerializedStyles;
   readonly warning: SerializedStyles;
   readonly success: SerializedStyles;
   readonly discovery: SerializedStyles;
   readonly information: SerializedStyles;
+  readonly bold: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -509,11 +509,11 @@ type Shadow = keyof typeof shadowMap;
 
 // @public (undocumented)
 const shadowMap: {
-  readonly raised: SerializedStyles;
   readonly overflow: SerializedStyles;
-  readonly 'overflow.spread': SerializedStyles;
   readonly 'overflow.perimeter': SerializedStyles;
+  readonly 'overflow.spread': SerializedStyles;
   readonly overlay: SerializedStyles;
+  readonly raised: SerializedStyles;
 };
 
 // @public (undocumented)
@@ -532,18 +532,18 @@ type TextColor = keyof typeof textColorMap;
 // @public
 const textColorMap: {
   readonly 'color.text': SerializedStyles;
-  readonly subtle: SerializedStyles;
-  readonly subtlest: SerializedStyles;
   readonly disabled: SerializedStyles;
   readonly inverse: SerializedStyles;
-  readonly brand: SerializedStyles;
   readonly selected: SerializedStyles;
+  readonly brand: SerializedStyles;
   readonly danger: SerializedStyles;
   readonly warning: SerializedStyles;
   readonly 'warning.inverse': SerializedStyles;
   readonly success: SerializedStyles;
   readonly discovery: SerializedStyles;
   readonly information: SerializedStyles;
+  readonly subtlest: SerializedStyles;
+  readonly subtle: SerializedStyles;
 };
 
 // @public (undocumented)