@atlaskit/ds-explorations 1.2.2 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/ds-explorations
 
+## 1.3.1
+
+### Patch Changes
+
+- [`04f01205c6b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/04f01205c6b) - Applies rem instead of pixels as spacing tokens fallbacks. This should have no visual or behavioural change.
+
+## 1.3.0
+
+### Minor Changes
+
+- [`7d6e345cd63`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d6e345cd63) - Bump to account for bump in `@atlaskit/tokens`.
+
 ## 1.2.2
 
 ### Patch Changes

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

@@ -110,6 +110,10 @@ var borderRadiusMap = {
     borderRadius: '8px'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 var flexDirectionMap = {
   column: (0, _react2.css)({
     flexDirection: 'column'
@@ -118,6 +122,10 @@ var flexDirectionMap = {
     flexDirection: 'row'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
     alignItems: 'center'
@@ -132,6 +140,10 @@ var flexAlignItemsMap = {
     alignItems: 'flex-end'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 var flexJustifyContentMap = {
   center: (0, _react2.css)({
     justifyContent: 'center'
@@ -180,201 +192,207 @@ var baseStyles = (0, _react2.css)({
 });
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
- * @codegenId spacing
+ * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
+ * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
+ * @codegenParams ["width", "height"]
  */
 
-var paddingMap = {
-  'scale.0': (0, _react2.css)({
-    padding: "var(--ds-scale-0, 0px)"
-  }),
-  'scale.025': (0, _react2.css)({
-    padding: "var(--ds-scale-025, 2px)"
-  }),
-  'scale.050': (0, _react2.css)({
-    padding: "var(--ds-scale-050, 4px)"
-  }),
-  'scale.075': (0, _react2.css)({
-    padding: "var(--ds-scale-075, 6px)"
+var widthMap = {
+  '100%': (0, _react2.css)({
+    width: '100%'
   }),
-  'scale.100': (0, _react2.css)({
-    padding: "var(--ds-scale-100, 8px)"
+  'size.100': (0, _react2.css)({
+    width: '16px'
   }),
-  'scale.150': (0, _react2.css)({
-    padding: "var(--ds-scale-150, 12px)"
+  'size.1000': (0, _react2.css)({
+    width: '192px'
   }),
-  'scale.200': (0, _react2.css)({
-    padding: "var(--ds-scale-200, 16px)"
+  'size.200': (0, _react2.css)({
+    width: '24px'
   }),
-  'scale.250': (0, _react2.css)({
-    padding: "var(--ds-scale-250, 20px)"
+  'size.300': (0, _react2.css)({
+    width: '32px'
   }),
-  'scale.300': (0, _react2.css)({
-    padding: "var(--ds-scale-300, 24px)"
+  'size.400': (0, _react2.css)({
+    width: '40px'
   }),
-  'scale.400': (0, _react2.css)({
-    padding: "var(--ds-scale-400, 32px)"
+  'size.500': (0, _react2.css)({
+    width: '48px'
   }),
-  'scale.500': (0, _react2.css)({
-    padding: "var(--ds-scale-500, 40px)"
-  }),
-  'scale.600': (0, _react2.css)({
-    padding: "var(--ds-scale-600, 48px)"
+  'size.600': (0, _react2.css)({
+    width: '96px'
   })
 };
-var paddingBlockMap = {
-  'scale.0': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-0, 0px)"
-  }),
-  'scale.025': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-025, 2px)"
-  }),
-  'scale.050': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-050, 4px)"
+var heightMap = {
+  '100%': (0, _react2.css)({
+    height: '100%'
   }),
-  'scale.075': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-075, 6px)"
+  'size.100': (0, _react2.css)({
+    height: '16px'
   }),
-  'scale.100': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-100, 8px)"
+  'size.1000': (0, _react2.css)({
+    height: '192px'
   }),
-  'scale.150': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-150, 12px)"
+  'size.200': (0, _react2.css)({
+    height: '24px'
   }),
-  'scale.200': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-200, 16px)"
+  'size.300': (0, _react2.css)({
+    height: '32px'
   }),
-  'scale.250': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-250, 20px)"
-  }),
-  'scale.300': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-300, 24px)"
+  'size.400': (0, _react2.css)({
+    height: '40px'
   }),
-  'scale.400': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-400, 32px)"
+  'size.500': (0, _react2.css)({
+    height: '48px'
   }),
-  'scale.500': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-500, 40px)"
-  }),
-  'scale.600': (0, _react2.css)({
-    paddingBlock: "var(--ds-scale-600, 48px)"
+  'size.600': (0, _react2.css)({
+    height: '96px'
   })
 };
-var paddingInlineMap = {
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::cbecbcc7b02d1d58fdd794542eb54d50>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding", "paddingBlock", "paddingInline"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ */
+var paddingMap = {
   'scale.0': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-0, 0px)"
+    padding: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-025, 2px)"
+    padding: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-050, 4px)"
+    padding: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-075, 6px)"
+    padding: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-100, 8px)"
+    padding: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    padding: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-150, 12px)"
+    padding: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-200, 16px)"
+    padding: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-250, 20px)"
+    padding: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-300, 24px)"
+    padding: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-400, 32px)"
+    padding: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-500, 40px)"
+    padding: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    paddingInline: "var(--ds-scale-600, 48px)"
+    padding: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    padding: "var(--ds-space-800, 64px)"
   })
 };
-var widthMap = {
+var paddingBlockMap = {
   'scale.0': (0, _react2.css)({
-    width: "var(--ds-scale-0, 0px)"
+    paddingBlock: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    width: "var(--ds-scale-025, 2px)"
+    paddingBlock: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    width: "var(--ds-scale-050, 4px)"
+    paddingBlock: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    width: "var(--ds-scale-075, 6px)"
+    paddingBlock: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    width: "var(--ds-scale-100, 8px)"
+    paddingBlock: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    width: "var(--ds-scale-150, 12px)"
+    paddingBlock: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    width: "var(--ds-scale-200, 16px)"
+    paddingBlock: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    width: "var(--ds-scale-250, 20px)"
+    paddingBlock: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    width: "var(--ds-scale-300, 24px)"
+    paddingBlock: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    width: "var(--ds-scale-400, 32px)"
+    paddingBlock: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    width: "var(--ds-scale-500, 40px)"
+    paddingBlock: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    width: "var(--ds-scale-600, 48px)"
+    paddingBlock: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-800, 64px)"
   })
 };
-var heightMap = {
+var paddingInlineMap = {
   'scale.0': (0, _react2.css)({
-    height: "var(--ds-scale-0, 0px)"
+    paddingInline: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    height: "var(--ds-scale-025, 2px)"
+    paddingInline: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    height: "var(--ds-scale-050, 4px)"
+    paddingInline: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    height: "var(--ds-scale-075, 6px)"
+    paddingInline: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    height: "var(--ds-scale-100, 8px)"
+    paddingInline: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    paddingInline: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    height: "var(--ds-scale-150, 12px)"
+    paddingInline: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    height: "var(--ds-scale-200, 16px)"
+    paddingInline: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    height: "var(--ds-scale-250, 20px)"
+    paddingInline: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    height: "var(--ds-scale-300, 24px)"
+    paddingInline: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    height: "var(--ds-scale-400, 32px)"
+    paddingInline: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    height: "var(--ds-scale-500, 40px)"
+    paddingInline: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    height: "var(--ds-scale-600, 48px)"
+    paddingInline: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    paddingInline: "var(--ds-space-800, 64px)"
   })
 };
 

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

@@ -114,50 +114,56 @@ Inline.displayName = 'Inline';
 var _default = Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
+ * @codegen <<SignedSource::3bb74c0e18d35310a98408ecd49c1526>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
  */
 
 exports.default = _default;
 var columnGapMap = {
   'scale.0': (0, _react2.css)({
-    columnGap: "var(--ds-scale-0, 0px)"
+    columnGap: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    columnGap: "var(--ds-scale-025, 2px)"
+    columnGap: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    columnGap: "var(--ds-scale-050, 4px)"
+    columnGap: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    columnGap: "var(--ds-scale-075, 6px)"
+    columnGap: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    columnGap: "var(--ds-scale-100, 8px)"
+    columnGap: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    columnGap: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    columnGap: "var(--ds-scale-150, 12px)"
+    columnGap: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    columnGap: "var(--ds-scale-200, 16px)"
+    columnGap: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    columnGap: "var(--ds-scale-250, 20px)"
+    columnGap: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    columnGap: "var(--ds-scale-300, 24px)"
+    columnGap: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    columnGap: "var(--ds-scale-400, 32px)"
+    columnGap: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    columnGap: "var(--ds-scale-500, 40px)"
+    columnGap: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    columnGap: "var(--ds-scale-600, 48px)"
+    columnGap: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    columnGap: "var(--ds-space-800, 64px)"
   })
 };
 /**

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

@@ -84,50 +84,56 @@ Stack.displayName = 'Stack';
 var _default = Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
+ * @codegen <<SignedSource::e574cf3d5b059f96c6158508fae4a064>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
  */
 
 exports.default = _default;
 var rowGapMap = {
   'scale.0': (0, _react2.css)({
-    rowGap: "var(--ds-scale-0, 0px)"
+    rowGap: "var(--ds-space-0, 0px)"
   }),
   'scale.025': (0, _react2.css)({
-    rowGap: "var(--ds-scale-025, 2px)"
+    rowGap: "var(--ds-space-025, 2px)"
   }),
   'scale.050': (0, _react2.css)({
-    rowGap: "var(--ds-scale-050, 4px)"
+    rowGap: "var(--ds-space-050, 4px)"
   }),
   'scale.075': (0, _react2.css)({
-    rowGap: "var(--ds-scale-075, 6px)"
+    rowGap: "var(--ds-space-075, 6px)"
   }),
   'scale.100': (0, _react2.css)({
-    rowGap: "var(--ds-scale-100, 8px)"
+    rowGap: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': (0, _react2.css)({
+    rowGap: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': (0, _react2.css)({
-    rowGap: "var(--ds-scale-150, 12px)"
+    rowGap: "var(--ds-space-150, 12px)"
   }),
   'scale.200': (0, _react2.css)({
-    rowGap: "var(--ds-scale-200, 16px)"
+    rowGap: "var(--ds-space-200, 16px)"
   }),
   'scale.250': (0, _react2.css)({
-    rowGap: "var(--ds-scale-250, 20px)"
+    rowGap: "var(--ds-space-250, 20px)"
   }),
   'scale.300': (0, _react2.css)({
-    rowGap: "var(--ds-scale-300, 24px)"
+    rowGap: "var(--ds-space-300, 24px)"
   }),
   'scale.400': (0, _react2.css)({
-    rowGap: "var(--ds-scale-400, 32px)"
+    rowGap: "var(--ds-space-400, 32px)"
   }),
   'scale.500': (0, _react2.css)({
-    rowGap: "var(--ds-scale-500, 40px)"
+    rowGap: "var(--ds-space-500, 40px)"
   }),
   'scale.600': (0, _react2.css)({
-    rowGap: "var(--ds-scale-600, 48px)"
+    rowGap: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': (0, _react2.css)({
+    rowGap: "var(--ds-space-800, 64px)"
   })
 };
 /**

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

@@ -8,10 +8,10 @@ exports.spacingScale = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Some artifact
+ * Internal codegen of the spacing scale values. Only used for internal examples.
  *
- * @codegen <<SignedSource::caecb926afa82b027fba396074de5c2c>>
+ * @codegen <<SignedSource::d351e41acd06f256fb46554409694f31>>
  * @codegenCommand yarn codegen-styles
  */
-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'];
+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', 'scale.800', 'scale.1000'];
 exports.spacingScale = spacingScale;

package/dist/cjs/version.json

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