@atlaskit/ds-explorations 1.2.2 → 1.3.1

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

@@ -97,6 +97,10 @@ var borderRadiusMap = {
     borderRadius: '8px'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 var flexDirectionMap = {
   column: css({
     flexDirection: 'column'
@@ -105,6 +109,10 @@ var flexDirectionMap = {
     flexDirection: 'row'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 var flexAlignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -119,6 +127,10 @@ var flexAlignItemsMap = {
     alignItems: 'flex-end'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 var flexJustifyContentMap = {
   center: css({
     justifyContent: 'center'
@@ -167,201 +179,207 @@ var baseStyles = 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': css({
-    padding: "var(--ds-scale-0, 0px)"
-  }),
-  'scale.025': css({
-    padding: "var(--ds-scale-025, 2px)"
-  }),
-  'scale.050': css({
-    padding: "var(--ds-scale-050, 4px)"
-  }),
-  'scale.075': css({
-    padding: "var(--ds-scale-075, 6px)"
+var widthMap = {
+  '100%': css({
+    width: '100%'
   }),
-  'scale.100': css({
-    padding: "var(--ds-scale-100, 8px)"
+  'size.100': css({
+    width: '16px'
   }),
-  'scale.150': css({
-    padding: "var(--ds-scale-150, 12px)"
+  'size.1000': css({
+    width: '192px'
   }),
-  'scale.200': css({
-    padding: "var(--ds-scale-200, 16px)"
+  'size.200': css({
+    width: '24px'
   }),
-  'scale.250': css({
-    padding: "var(--ds-scale-250, 20px)"
+  'size.300': css({
+    width: '32px'
   }),
-  'scale.300': css({
-    padding: "var(--ds-scale-300, 24px)"
+  'size.400': css({
+    width: '40px'
   }),
-  'scale.400': css({
-    padding: "var(--ds-scale-400, 32px)"
+  'size.500': css({
+    width: '48px'
   }),
-  'scale.500': css({
-    padding: "var(--ds-scale-500, 40px)"
-  }),
-  'scale.600': css({
-    padding: "var(--ds-scale-600, 48px)"
+  'size.600': css({
+    width: '96px'
   })
 };
-var paddingBlockMap = {
-  'scale.0': css({
-    paddingBlock: "var(--ds-scale-0, 0px)"
-  }),
-  'scale.025': css({
-    paddingBlock: "var(--ds-scale-025, 2px)"
-  }),
-  'scale.050': css({
-    paddingBlock: "var(--ds-scale-050, 4px)"
+var heightMap = {
+  '100%': css({
+    height: '100%'
   }),
-  'scale.075': css({
-    paddingBlock: "var(--ds-scale-075, 6px)"
+  'size.100': css({
+    height: '16px'
   }),
-  'scale.100': css({
-    paddingBlock: "var(--ds-scale-100, 8px)"
+  'size.1000': css({
+    height: '192px'
   }),
-  'scale.150': css({
-    paddingBlock: "var(--ds-scale-150, 12px)"
+  'size.200': css({
+    height: '24px'
   }),
-  'scale.200': css({
-    paddingBlock: "var(--ds-scale-200, 16px)"
+  'size.300': css({
+    height: '32px'
   }),
-  'scale.250': css({
-    paddingBlock: "var(--ds-scale-250, 20px)"
-  }),
-  'scale.300': css({
-    paddingBlock: "var(--ds-scale-300, 24px)"
+  'size.400': css({
+    height: '40px'
   }),
-  'scale.400': css({
-    paddingBlock: "var(--ds-scale-400, 32px)"
+  'size.500': css({
+    height: '48px'
   }),
-  'scale.500': css({
-    paddingBlock: "var(--ds-scale-500, 40px)"
-  }),
-  'scale.600': css({
-    paddingBlock: "var(--ds-scale-600, 48px)"
+  'size.600': 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': css({
-    paddingInline: "var(--ds-scale-0, 0px)"
+    padding: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    paddingInline: "var(--ds-scale-025, 2px)"
+    padding: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    paddingInline: "var(--ds-scale-050, 4px)"
+    padding: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    paddingInline: "var(--ds-scale-075, 6px)"
+    padding: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    paddingInline: "var(--ds-scale-100, 8px)"
+    padding: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    padding: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    paddingInline: "var(--ds-scale-150, 12px)"
+    padding: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    paddingInline: "var(--ds-scale-200, 16px)"
+    padding: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    paddingInline: "var(--ds-scale-250, 20px)"
+    padding: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    paddingInline: "var(--ds-scale-300, 24px)"
+    padding: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    paddingInline: "var(--ds-scale-400, 32px)"
+    padding: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    paddingInline: "var(--ds-scale-500, 40px)"
+    padding: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    paddingInline: "var(--ds-scale-600, 48px)"
+    padding: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    padding: "var(--ds-space-800, 64px)"
   })
 };
-var widthMap = {
+var paddingBlockMap = {
   'scale.0': css({
-    width: "var(--ds-scale-0, 0px)"
+    paddingBlock: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    width: "var(--ds-scale-025, 2px)"
+    paddingBlock: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    width: "var(--ds-scale-050, 4px)"
+    paddingBlock: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    width: "var(--ds-scale-075, 6px)"
+    paddingBlock: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    width: "var(--ds-scale-100, 8px)"
+    paddingBlock: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    paddingBlock: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    width: "var(--ds-scale-150, 12px)"
+    paddingBlock: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    width: "var(--ds-scale-200, 16px)"
+    paddingBlock: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    width: "var(--ds-scale-250, 20px)"
+    paddingBlock: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    width: "var(--ds-scale-300, 24px)"
+    paddingBlock: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    width: "var(--ds-scale-400, 32px)"
+    paddingBlock: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    width: "var(--ds-scale-500, 40px)"
+    paddingBlock: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    width: "var(--ds-scale-600, 48px)"
+    paddingBlock: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    paddingBlock: "var(--ds-space-800, 64px)"
   })
 };
-var heightMap = {
+var paddingInlineMap = {
   'scale.0': css({
-    height: "var(--ds-scale-0, 0px)"
+    paddingInline: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    height: "var(--ds-scale-025, 2px)"
+    paddingInline: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    height: "var(--ds-scale-050, 4px)"
+    paddingInline: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    height: "var(--ds-scale-075, 6px)"
+    paddingInline: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    height: "var(--ds-scale-100, 8px)"
+    paddingInline: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    paddingInline: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    height: "var(--ds-scale-150, 12px)"
+    paddingInline: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    height: "var(--ds-scale-200, 16px)"
+    paddingInline: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    height: "var(--ds-scale-250, 20px)"
+    paddingInline: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    height: "var(--ds-scale-300, 24px)"
+    paddingInline: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    height: "var(--ds-scale-400, 32px)"
+    paddingInline: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    height: "var(--ds-scale-500, 40px)"
+    paddingInline: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    height: "var(--ds-scale-600, 48px)"
+    paddingInline: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    paddingInline: "var(--ds-space-800, 64px)"
   })
 };
 

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

@@ -105,49 +105,55 @@ Inline.displayName = 'Inline';
 export 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>>
  */
 
 var columnGapMap = {
   'scale.0': css({
-    columnGap: "var(--ds-scale-0, 0px)"
+    columnGap: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    columnGap: "var(--ds-scale-025, 2px)"
+    columnGap: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    columnGap: "var(--ds-scale-050, 4px)"
+    columnGap: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    columnGap: "var(--ds-scale-075, 6px)"
+    columnGap: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    columnGap: "var(--ds-scale-100, 8px)"
+    columnGap: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    columnGap: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    columnGap: "var(--ds-scale-150, 12px)"
+    columnGap: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    columnGap: "var(--ds-scale-200, 16px)"
+    columnGap: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    columnGap: "var(--ds-scale-250, 20px)"
+    columnGap: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    columnGap: "var(--ds-scale-300, 24px)"
+    columnGap: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    columnGap: "var(--ds-scale-400, 32px)"
+    columnGap: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    columnGap: "var(--ds-scale-500, 40px)"
+    columnGap: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    columnGap: "var(--ds-scale-600, 48px)"
+    columnGap: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    columnGap: "var(--ds-space-800, 64px)"
   })
 };
 /**

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

@@ -75,49 +75,55 @@ Stack.displayName = 'Stack';
 export 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>>
  */
 
 var rowGapMap = {
   'scale.0': css({
-    rowGap: "var(--ds-scale-0, 0px)"
+    rowGap: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    rowGap: "var(--ds-scale-025, 2px)"
+    rowGap: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    rowGap: "var(--ds-scale-050, 4px)"
+    rowGap: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    rowGap: "var(--ds-scale-075, 6px)"
+    rowGap: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    rowGap: "var(--ds-scale-100, 8px)"
+    rowGap: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    rowGap: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    rowGap: "var(--ds-scale-150, 12px)"
+    rowGap: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    rowGap: "var(--ds-scale-200, 16px)"
+    rowGap: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    rowGap: "var(--ds-scale-250, 20px)"
+    rowGap: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    rowGap: "var(--ds-scale-300, 24px)"
+    rowGap: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    rowGap: "var(--ds-scale-400, 32px)"
+    rowGap: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    rowGap: "var(--ds-scale-500, 40px)"
+    rowGap: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    rowGap: "var(--ds-scale-600, 48px)"
+    rowGap: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    rowGap: "var(--ds-space-800, 64px)"
   })
 };
 /**

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

@@ -1,9 +1,9 @@
 /**
  * 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
  */
-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'];
+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', 'scale.800', 'scale.1000'];

package/dist/esm/version.json

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