@atlaskit/ds-explorations 1.6.4 → 2.0.0

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

@@ -169,6 +169,9 @@ var displayMap = {
   }),
   inlineFlex: css({
     display: 'inline-flex'
+  }),
+  inlineBlock: css({
+    display: 'inline-block'
   })
 };
 var positionMap = {
@@ -265,141 +268,141 @@ var heightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cbecbcc7b02d1d58fdd794542eb54d50>>
+ * @codegen <<SignedSource::99c5403dd8b57b15bf1240cc456b6b16>>
  * @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({
+  'space.0': css({
     padding: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': css({
+  'space.025': css({
     padding: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': css({
+  'space.050': css({
     padding: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': css({
+  'space.075': css({
     padding: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': css({
+  'space.100': css({
     padding: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': css({
+  'space.1000': css({
     padding: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': css({
+  'space.150': css({
     padding: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': css({
+  'space.200': css({
     padding: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': css({
+  'space.250': css({
     padding: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': css({
+  'space.300': css({
     padding: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': css({
+  'space.400': css({
     padding: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': css({
+  'space.500': css({
     padding: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': css({
+  'space.600': css({
     padding: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': css({
+  'space.800': css({
     padding: "var(--ds-space-800, 64px)"
   })
 };
 var paddingBlockMap = {
-  'scale.0': css({
+  'space.0': css({
     paddingBlock: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': css({
+  'space.025': css({
     paddingBlock: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': css({
+  'space.050': css({
     paddingBlock: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': css({
+  'space.075': css({
     paddingBlock: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': css({
+  'space.100': css({
     paddingBlock: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': css({
+  'space.1000': css({
     paddingBlock: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': css({
+  'space.150': css({
     paddingBlock: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': css({
+  'space.200': css({
     paddingBlock: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': css({
+  'space.250': css({
     paddingBlock: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': css({
+  'space.300': css({
     paddingBlock: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': css({
+  'space.400': css({
     paddingBlock: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': css({
+  'space.500': css({
     paddingBlock: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': css({
+  'space.600': css({
     paddingBlock: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': css({
+  'space.800': css({
     paddingBlock: "var(--ds-space-800, 64px)"
   })
 };
 var paddingInlineMap = {
-  'scale.0': css({
+  'space.0': css({
     paddingInline: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': css({
+  'space.025': css({
     paddingInline: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': css({
+  'space.050': css({
     paddingInline: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': css({
+  'space.075': css({
     paddingInline: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': css({
+  'space.100': css({
     paddingInline: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': css({
+  'space.1000': css({
     paddingInline: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': css({
+  'space.150': css({
     paddingInline: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': css({
+  'space.200': css({
     paddingInline: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': css({
+  'space.250': css({
     paddingInline: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': css({
+  'space.300': css({
     paddingInline: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': css({
+  'space.400': css({
     paddingInline: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': css({
+  'space.500': css({
     paddingInline: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': css({
+  'space.600': css({
     paddingInline: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': css({
+  'space.800': css({
     paddingInline: "var(--ds-space-800, 64px)"
   })
 };
@@ -410,11 +413,11 @@ var paddingInlineMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a9e4bc0092d25e3209c53182183c49f2>>
+ * @codegen <<SignedSource::201c8a6c6ff88ac47cdb02365c643ff2>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::ae0b86bfc4c093b614a97d5bcf328dd0>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
  */
 var borderColorMap = {
   'color.border': css({

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

@@ -111,7 +111,7 @@ Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3bb74c0e18d35310a98408ecd49c1526>>
+ * @codegen <<SignedSource::0a2a4380b534d14cdad759ff2d33a6c8>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
@@ -119,46 +119,46 @@ export default Inline;
  */
 
 var columnGapMap = {
-  'scale.0': css({
+  'space.0': css({
     columnGap: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': css({
+  'space.025': css({
     columnGap: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': css({
+  'space.050': css({
     columnGap: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': css({
+  'space.075': css({
     columnGap: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': css({
+  'space.100': css({
     columnGap: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': css({
+  'space.1000': css({
     columnGap: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': css({
+  'space.150': css({
     columnGap: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': css({
+  'space.200': css({
     columnGap: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': css({
+  'space.250': css({
     columnGap: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': css({
+  'space.300': css({
     columnGap: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': css({
+  'space.400': css({
     columnGap: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': css({
+  'space.500': css({
     columnGap: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': css({
+  'space.600': css({
     columnGap: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': css({
+  'space.800': css({
     columnGap: "var(--ds-space-800, 64px)"
   })
 };

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

@@ -48,11 +48,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
 export default InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8b4cdc5491507aa9045f9b3bd8b9ce84>>
+ * @codegen <<SignedSource::46f9477bc75d77a16327328d1b49c35f>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::ae0b86bfc4c093b614a97d5bcf328dd0>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
  */
 
 var backgroundActiveColorMap = {

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

@@ -75,7 +75,7 @@ Stack.displayName = 'Stack';
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e574cf3d5b059f96c6158508fae4a064>>
+ * @codegen <<SignedSource::ac9028ae231558f3eedd10f0db04a8fe>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
@@ -83,46 +83,46 @@ export default Stack;
  */
 
 var rowGapMap = {
-  'scale.0': css({
+  'space.0': css({
     rowGap: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': css({
+  'space.025': css({
     rowGap: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': css({
+  'space.050': css({
     rowGap: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': css({
+  'space.075': css({
     rowGap: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': css({
+  'space.100': css({
     rowGap: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': css({
+  'space.1000': css({
     rowGap: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': css({
+  'space.150': css({
     rowGap: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': css({
+  'space.200': css({
     rowGap: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': css({
+  'space.250': css({
     rowGap: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': css({
+  'space.300': css({
     rowGap: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': css({
+  'space.400': css({
     rowGap: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': css({
+  'space.500': css({
     rowGap: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': css({
+  'space.600': css({
     rowGap: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': css({
+  'space.800': css({
     rowGap: "var(--ds-space-800, 64px)"
   })
 };

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

@@ -8,56 +8,6 @@ import invariant from 'tiny-invariant';
 import surfaceColorMap from '../internal/color-map';
 import { useSurface } from './surface-provider';
 var asAllowlist = ['span', 'div', 'p', 'strong'];
-var fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
-var fontSizeMap = {
-  '11px': css({
-    fontSize: '11px'
-  }),
-  '12px': css({
-    fontSize: '12px'
-  }),
-  '14px': css({
-    fontSize: '14px'
-  })
-};
-// NOTE: can't use numbers as keys or Constellation won't build. Weird one.
-var fontWeightMap = {
-  '400': css({
-    fontWeight: 400
-  }),
-  '500': css({
-    fontWeight: 500
-  }),
-  '600': css({
-    fontWeight: 600
-  }),
-  '700': css({
-    fontWeight: 700
-  })
-};
-var lineHeightMap = {
-  '12px': css({
-    lineHeight: '12px'
-  }),
-  '16px': css({
-    lineHeight: '16px'
-  }),
-  '20px': css({
-    lineHeight: '20px'
-  }),
-  '24px': css({
-    lineHeight: '24px'
-  }),
-  '28px': css({
-    lineHeight: '28px'
-  }),
-  '32px': css({
-    lineHeight: '32px'
-  }),
-  '40px': css({
-    lineHeight: '40px'
-  })
-};
 var textAlignMap = {
   center: css({
     textAlign: 'center'
@@ -93,9 +43,8 @@ var verticalAlignMap = {
 };
 var baseStyles = css({
   boxSizing: 'border-box',
-  margin: '0px',
-  padding: '0px',
-  fontFamily: fontFamily
+  margin: "var(--ds-space-0, 0px)",
+  padding: "var(--ds-space-0, 0px)"
 });
 var truncateStyles = css({
   overflow: 'hidden',
@@ -166,7 +115,7 @@ var Text = function Text(_ref) {
 
   var component = jsx(Component, {
     style: UNSAFE_style,
-    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
+    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);
@@ -179,13 +128,94 @@ var Text = function Text(_ref) {
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::61daf1362fce18ffbc609fc6cb456484>>
+ * @codegen <<SignedSource::bd36caff8bedb3bdc89b6f2311c6160a>>
+ * @codegenId typography
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::39bc8db0f376f5635a25be0137792642>>
+ */
+
+var fontSizeMap = {
+  'size.050': css({
+    fontSize: "var(--ds-font-size-050, 11px)"
+  }),
+  'size.075': css({
+    fontSize: "var(--ds-font-size-075, 12px)"
+  }),
+  'size.100': css({
+    fontSize: "var(--ds-font-size-100, 14px)"
+  }),
+  'size.200': css({
+    fontSize: "var(--ds-font-size-200, 16px)"
+  }),
+  'size.300': css({
+    fontSize: "var(--ds-font-size-300, 20px)"
+  }),
+  'size.400': css({
+    fontSize: "var(--ds-font-size-400, 24px)"
+  }),
+  'size.500': css({
+    fontSize: "var(--ds-font-size-500, 29px)"
+  }),
+  'size.600': css({
+    fontSize: "var(--ds-font-size-600, 35px)"
+  })
+};
+var fontWeightMap = {
+  bold: css({
+    fontWeight: "var(--ds-font-weight-bold, 700)"
+  }),
+  medium: css({
+    fontWeight: "var(--ds-font-weight-medium, 500)"
+  }),
+  regular: css({
+    fontWeight: "var(--ds-font-weight-regular, 400)"
+  }),
+  semibold: css({
+    fontWeight: "var(--ds-font-weight-semibold, 600)"
+  })
+};
+var fontFamilyMap = {
+  monospace: css({
+    fontFamily: "var(--ds-font-family-monospace, \"SFMono-Medium\", \"SF Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Ubuntu Mono\", Menlo, Consolas, Courier, monospace)"
+  }),
+  sans: css({
+    fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
+  })
+};
+var lineHeightMap = {
+  'lineHeight.100': css({
+    lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+  }),
+  'lineHeight.200': css({
+    lineHeight: "var(--ds-font-lineHeight-200, 20px)"
+  }),
+  'lineHeight.300': css({
+    lineHeight: "var(--ds-font-lineHeight-300, 24px)"
+  }),
+  'lineHeight.400': css({
+    lineHeight: "var(--ds-font-lineHeight-400, 28px)"
+  }),
+  'lineHeight.500': css({
+    lineHeight: "var(--ds-font-lineHeight-500, 32px)"
+  }),
+  'lineHeight.600': css({
+    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>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::ae0b86bfc4c093b614a97d5bcf328dd0>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
  */
-
 var textColorMap = {
   'color.text': css({
     color: "var(--ds-text, #172B4D)"

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

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

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

@@ -3,7 +3,7 @@
  *
  * Internal codegen of the spacing scale values. Only used for internal examples.
  *
- * @codegen <<SignedSource::d351e41acd06f256fb46554409694f31>>
+ * @codegen <<SignedSource::885d6c601dfa9fccaf33a7bd461ef59d>>
  * @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', 'scale.800', 'scale.1000'];
+export var spacingScale = ['space.0', 'space.025', 'space.050', 'space.075', 'space.100', 'space.150', 'space.200', 'space.250', 'space.300', 'space.400', 'space.500', 'space.600', 'space.800', 'space.1000'];

package/dist/esm/version.json

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