@atlaskit/ds-explorations 1.2.2 → 1.3.0

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

@@ -93,6 +93,10 @@ const borderRadiusMap = {
     borderRadius: '8px'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 const flexDirectionMap = {
   column: css({
     flexDirection: 'column'
@@ -101,6 +105,10 @@ const flexDirectionMap = {
     flexDirection: 'row'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 const flexAlignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -115,6 +123,10 @@ const flexAlignItemsMap = {
     alignItems: 'flex-end'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 const flexJustifyContentMap = {
   center: css({
     justifyContent: 'center'
@@ -163,201 +175,207 @@ const 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"]
  */
 
-const 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)"
+const 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'
   })
 };
-const 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)"
+const 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)"
-  }),
-  'scale.250': css({
-    paddingBlock: "var(--ds-scale-250, 20px)"
-  }),
-  'scale.300': css({
-    paddingBlock: "var(--ds-scale-300, 24px)"
+  'size.300': css({
+    height: '32px'
   }),
-  'scale.400': css({
-    paddingBlock: "var(--ds-scale-400, 32px)"
+  'size.400': css({
+    height: '40px'
   }),
-  'scale.500': css({
-    paddingBlock: "var(--ds-scale-500, 40px)"
+  'size.500': css({
+    height: '48px'
   }),
-  'scale.600': css({
-    paddingBlock: "var(--ds-scale-600, 48px)"
+  'size.600': css({
+    height: '96px'
   })
 };
-const paddingInlineMap = {
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::41980a62e387c13a99802814a0f33d26>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding", "paddingBlock", "paddingInline"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
+ */
+const 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)"
   })
 };
-const widthMap = {
+const 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)"
   })
 };
-const heightMap = {
+const 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/es2019/components/inline.partial.js

@@ -105,7 +105,7 @@ 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::76168a57c8f10c9f325865d2189aa0ff>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
@@ -114,40 +114,46 @@ export default Inline;
 
 const 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/es2019/components/stack.partial.js

@@ -76,7 +76,7 @@ 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::2b10240c217de584b627a7e2f56d11a0>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
@@ -85,40 +85,46 @@ export default Stack;
 
 const 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/es2019/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 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'];
+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', 'scale.800', 'scale.1000'];

package/dist/es2019/version.json

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