@atlaskit/ds-explorations 1.7.0 → 2.0.0

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

@@ -264,141 +264,141 @@ const 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>>
  */
 const 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)"
   })
 };
 const 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)"
   })
 };
 const 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)"
   })
 };

package/dist/es2019/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;
  */
 
 const 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/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::e574cf3d5b059f96c6158508fae4a064>>
+ * @codegen <<SignedSource::ac9028ae231558f3eedd10f0db04a8fe>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
@@ -84,46 +84,46 @@ export default Stack;
  */
 
 const 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/es2019/components/text.partial.js

@@ -5,56 +5,6 @@ import invariant from 'tiny-invariant';
 import surfaceColorMap from '../internal/color-map';
 import { useSurface } from './surface-provider';
 const asAllowlist = ['span', 'div', 'p', 'strong'];
-const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;
-const 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.
-const fontWeightMap = {
-  '400': css({
-    fontWeight: 400
-  }),
-  '500': css({
-    fontWeight: 500
-  }),
-  '600': css({
-    fontWeight: 600
-  }),
-  '700': css({
-    fontWeight: 700
-  })
-};
-const 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'
-  })
-};
 const textAlignMap = {
   center: css({
     textAlign: 'center'
@@ -90,9 +40,8 @@ const verticalAlignMap = {
 };
 const baseStyles = css({
   boxSizing: 'border-box',
-  margin: '0px',
-  padding: '0px',
-  fontFamily
+  margin: "var(--ds-space-0, 0px)",
+  padding: "var(--ds-space-0, 0px)"
 });
 const truncateStyles = css({
   overflow: 'hidden',
@@ -161,7 +110,7 @@ const Text = ({
 
   const 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);
@@ -172,6 +121,88 @@ const Text = ({
 };
 
 export default Text;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @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>>
+ */
+
+const 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)"
+  })
+};
+const 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)"
+  })
+};
+const 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)"
+  })
+};
+const 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>>
@@ -180,7 +211,6 @@ export default Text;
  * @codegenParams ["text"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
  */
-
 const textColorMap = {
   'color.text': css({
     color: "var(--ds-text, #172B4D)"

package/dist/es2019/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 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'];
+export const 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/es2019/version.json

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