@atlaskit/ds-explorations 1.7.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/ds-explorations
 
+## 2.0.0
+
+### Major Changes
+
+- [`544c409d79f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/544c409d79f) - **Breaking Change**
+
+  ### `Text`
+
+  fontSize, fontWeight, and lineHeight APIs have changed due to typography tokens being introduced. The new values for fontSize and lineHeight follow a scale whereas fontWeight accepts keyword values.
+
+  ### `Box`
+
+  `padding`, `paddingBlock`, and `paddingInline` prop values now follow the pattern `space.x` instead of `scale.x` to align with spacing tokens.
+
+  ### `Inline` and `Stack`
+
+  `gap` prop values now follow the pattern `space.x` instead of `scale.x` to align with spacing tokens.
+
 ## 1.7.0
 
 ### Minor Changes

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

@@ -282,141 +282,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': (0, _react2.css)({
+  'space.0': (0, _react2.css)({
     padding: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': (0, _react2.css)({
+  'space.025': (0, _react2.css)({
     padding: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': (0, _react2.css)({
+  'space.050': (0, _react2.css)({
     padding: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': (0, _react2.css)({
+  'space.075': (0, _react2.css)({
     padding: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': (0, _react2.css)({
+  'space.100': (0, _react2.css)({
     padding: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': (0, _react2.css)({
+  'space.1000': (0, _react2.css)({
     padding: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': (0, _react2.css)({
+  'space.150': (0, _react2.css)({
     padding: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': (0, _react2.css)({
+  'space.200': (0, _react2.css)({
     padding: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': (0, _react2.css)({
+  'space.250': (0, _react2.css)({
     padding: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': (0, _react2.css)({
+  'space.300': (0, _react2.css)({
     padding: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': (0, _react2.css)({
+  'space.400': (0, _react2.css)({
     padding: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': (0, _react2.css)({
+  'space.500': (0, _react2.css)({
     padding: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': (0, _react2.css)({
+  'space.600': (0, _react2.css)({
     padding: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': (0, _react2.css)({
+  'space.800': (0, _react2.css)({
     padding: "var(--ds-space-800, 64px)"
   })
 };
 var paddingBlockMap = {
-  'scale.0': (0, _react2.css)({
+  'space.0': (0, _react2.css)({
     paddingBlock: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': (0, _react2.css)({
+  'space.025': (0, _react2.css)({
     paddingBlock: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': (0, _react2.css)({
+  'space.050': (0, _react2.css)({
     paddingBlock: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': (0, _react2.css)({
+  'space.075': (0, _react2.css)({
     paddingBlock: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': (0, _react2.css)({
+  'space.100': (0, _react2.css)({
     paddingBlock: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': (0, _react2.css)({
+  'space.1000': (0, _react2.css)({
     paddingBlock: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': (0, _react2.css)({
+  'space.150': (0, _react2.css)({
     paddingBlock: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': (0, _react2.css)({
+  'space.200': (0, _react2.css)({
     paddingBlock: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': (0, _react2.css)({
+  'space.250': (0, _react2.css)({
     paddingBlock: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': (0, _react2.css)({
+  'space.300': (0, _react2.css)({
     paddingBlock: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': (0, _react2.css)({
+  'space.400': (0, _react2.css)({
     paddingBlock: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': (0, _react2.css)({
+  'space.500': (0, _react2.css)({
     paddingBlock: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': (0, _react2.css)({
+  'space.600': (0, _react2.css)({
     paddingBlock: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': (0, _react2.css)({
+  'space.800': (0, _react2.css)({
     paddingBlock: "var(--ds-space-800, 64px)"
   })
 };
 var paddingInlineMap = {
-  'scale.0': (0, _react2.css)({
+  'space.0': (0, _react2.css)({
     paddingInline: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': (0, _react2.css)({
+  'space.025': (0, _react2.css)({
     paddingInline: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': (0, _react2.css)({
+  'space.050': (0, _react2.css)({
     paddingInline: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': (0, _react2.css)({
+  'space.075': (0, _react2.css)({
     paddingInline: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': (0, _react2.css)({
+  'space.100': (0, _react2.css)({
     paddingInline: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': (0, _react2.css)({
+  'space.1000': (0, _react2.css)({
     paddingInline: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': (0, _react2.css)({
+  'space.150': (0, _react2.css)({
     paddingInline: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': (0, _react2.css)({
+  'space.200': (0, _react2.css)({
     paddingInline: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': (0, _react2.css)({
+  'space.250': (0, _react2.css)({
     paddingInline: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': (0, _react2.css)({
+  'space.300': (0, _react2.css)({
     paddingInline: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': (0, _react2.css)({
+  'space.400': (0, _react2.css)({
     paddingInline: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': (0, _react2.css)({
+  'space.500': (0, _react2.css)({
     paddingInline: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': (0, _react2.css)({
+  'space.600': (0, _react2.css)({
     paddingInline: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': (0, _react2.css)({
+  'space.800': (0, _react2.css)({
     paddingInline: "var(--ds-space-800, 64px)"
   })
 };

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

@@ -120,7 +120,7 @@ Inline.displayName = 'Inline';
 var _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"]
@@ -129,46 +129,46 @@ var _default = Inline;
 
 exports.default = _default;
 var columnGapMap = {
-  'scale.0': (0, _react2.css)({
+  'space.0': (0, _react2.css)({
     columnGap: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': (0, _react2.css)({
+  'space.025': (0, _react2.css)({
     columnGap: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': (0, _react2.css)({
+  'space.050': (0, _react2.css)({
     columnGap: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': (0, _react2.css)({
+  'space.075': (0, _react2.css)({
     columnGap: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': (0, _react2.css)({
+  'space.100': (0, _react2.css)({
     columnGap: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': (0, _react2.css)({
+  'space.1000': (0, _react2.css)({
     columnGap: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': (0, _react2.css)({
+  'space.150': (0, _react2.css)({
     columnGap: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': (0, _react2.css)({
+  'space.200': (0, _react2.css)({
     columnGap: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': (0, _react2.css)({
+  'space.250': (0, _react2.css)({
     columnGap: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': (0, _react2.css)({
+  'space.300': (0, _react2.css)({
     columnGap: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': (0, _react2.css)({
+  'space.400': (0, _react2.css)({
     columnGap: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': (0, _react2.css)({
+  'space.500': (0, _react2.css)({
     columnGap: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': (0, _react2.css)({
+  'space.600': (0, _react2.css)({
     columnGap: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': (0, _react2.css)({
+  'space.800': (0, _react2.css)({
     columnGap: "var(--ds-space-800, 64px)"
   })
 };

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

@@ -84,7 +84,7 @@ Stack.displayName = 'Stack';
 var _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"]
@@ -93,46 +93,46 @@ var _default = Stack;
 
 exports.default = _default;
 var rowGapMap = {
-  'scale.0': (0, _react2.css)({
+  'space.0': (0, _react2.css)({
     rowGap: "var(--ds-space-0, 0px)"
   }),
-  'scale.025': (0, _react2.css)({
+  'space.025': (0, _react2.css)({
     rowGap: "var(--ds-space-025, 2px)"
   }),
-  'scale.050': (0, _react2.css)({
+  'space.050': (0, _react2.css)({
     rowGap: "var(--ds-space-050, 4px)"
   }),
-  'scale.075': (0, _react2.css)({
+  'space.075': (0, _react2.css)({
     rowGap: "var(--ds-space-075, 6px)"
   }),
-  'scale.100': (0, _react2.css)({
+  'space.100': (0, _react2.css)({
     rowGap: "var(--ds-space-100, 8px)"
   }),
-  'scale.1000': (0, _react2.css)({
+  'space.1000': (0, _react2.css)({
     rowGap: "var(--ds-space-1000, 80px)"
   }),
-  'scale.150': (0, _react2.css)({
+  'space.150': (0, _react2.css)({
     rowGap: "var(--ds-space-150, 12px)"
   }),
-  'scale.200': (0, _react2.css)({
+  'space.200': (0, _react2.css)({
     rowGap: "var(--ds-space-200, 16px)"
   }),
-  'scale.250': (0, _react2.css)({
+  'space.250': (0, _react2.css)({
     rowGap: "var(--ds-space-250, 20px)"
   }),
-  'scale.300': (0, _react2.css)({
+  'space.300': (0, _react2.css)({
     rowGap: "var(--ds-space-300, 24px)"
   }),
-  'scale.400': (0, _react2.css)({
+  'space.400': (0, _react2.css)({
     rowGap: "var(--ds-space-400, 32px)"
   }),
-  'scale.500': (0, _react2.css)({
+  'space.500': (0, _react2.css)({
     rowGap: "var(--ds-space-500, 40px)"
   }),
-  'scale.600': (0, _react2.css)({
+  'space.600': (0, _react2.css)({
     rowGap: "var(--ds-space-600, 48px)"
   }),
-  'scale.800': (0, _react2.css)({
+  'space.800': (0, _react2.css)({
     rowGap: "var(--ds-space-800, 64px)"
   })
 };

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

@@ -21,56 +21,6 @@ var _surfaceProvider = require("./surface-provider");
 
 var _excluded = ["children"];
 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': (0, _react2.css)({
-    fontSize: '11px'
-  }),
-  '12px': (0, _react2.css)({
-    fontSize: '12px'
-  }),
-  '14px': (0, _react2.css)({
-    fontSize: '14px'
-  })
-};
-// NOTE: can't use numbers as keys or Constellation won't build. Weird one.
-var fontWeightMap = {
-  '400': (0, _react2.css)({
-    fontWeight: 400
-  }),
-  '500': (0, _react2.css)({
-    fontWeight: 500
-  }),
-  '600': (0, _react2.css)({
-    fontWeight: 600
-  }),
-  '700': (0, _react2.css)({
-    fontWeight: 700
-  })
-};
-var lineHeightMap = {
-  '12px': (0, _react2.css)({
-    lineHeight: '12px'
-  }),
-  '16px': (0, _react2.css)({
-    lineHeight: '16px'
-  }),
-  '20px': (0, _react2.css)({
-    lineHeight: '20px'
-  }),
-  '24px': (0, _react2.css)({
-    lineHeight: '24px'
-  }),
-  '28px': (0, _react2.css)({
-    lineHeight: '28px'
-  }),
-  '32px': (0, _react2.css)({
-    lineHeight: '32px'
-  }),
-  '40px': (0, _react2.css)({
-    lineHeight: '40px'
-  })
-};
 var textAlignMap = {
   center: (0, _react2.css)({
     textAlign: 'center'
@@ -106,9 +56,8 @@ var verticalAlignMap = {
 };
 var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',
-  margin: '0px',
-  padding: '0px',
-  fontFamily: fontFamily
+  margin: "var(--ds-space-0, 0px)",
+  padding: "var(--ds-space-0, 0px)"
 });
 var truncateStyles = (0, _react2.css)({
   overflow: 'hidden',
@@ -178,7 +127,7 @@ var Text = function Text(_ref) {
 
   var component = (0, _react2.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);
@@ -189,6 +138,89 @@ var Text = function Text(_ref) {
 };
 
 var _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>>
+ */
+
+exports.default = _default;
+var fontSizeMap = {
+  'size.050': (0, _react2.css)({
+    fontSize: "var(--ds-font-size-050, 11px)"
+  }),
+  'size.075': (0, _react2.css)({
+    fontSize: "var(--ds-font-size-075, 12px)"
+  }),
+  'size.100': (0, _react2.css)({
+    fontSize: "var(--ds-font-size-100, 14px)"
+  }),
+  'size.200': (0, _react2.css)({
+    fontSize: "var(--ds-font-size-200, 16px)"
+  }),
+  'size.300': (0, _react2.css)({
+    fontSize: "var(--ds-font-size-300, 20px)"
+  }),
+  'size.400': (0, _react2.css)({
+    fontSize: "var(--ds-font-size-400, 24px)"
+  }),
+  'size.500': (0, _react2.css)({
+    fontSize: "var(--ds-font-size-500, 29px)"
+  }),
+  'size.600': (0, _react2.css)({
+    fontSize: "var(--ds-font-size-600, 35px)"
+  })
+};
+var fontWeightMap = {
+  bold: (0, _react2.css)({
+    fontWeight: "var(--ds-font-weight-bold, 700)"
+  }),
+  medium: (0, _react2.css)({
+    fontWeight: "var(--ds-font-weight-medium, 500)"
+  }),
+  regular: (0, _react2.css)({
+    fontWeight: "var(--ds-font-weight-regular, 400)"
+  }),
+  semibold: (0, _react2.css)({
+    fontWeight: "var(--ds-font-weight-semibold, 600)"
+  })
+};
+var fontFamilyMap = {
+  monospace: (0, _react2.css)({
+    fontFamily: "var(--ds-font-family-monospace, \"SFMono-Medium\", \"SF Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Ubuntu Mono\", Menlo, Consolas, Courier, monospace)"
+  }),
+  sans: (0, _react2.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': (0, _react2.css)({
+    lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+  }),
+  'lineHeight.200': (0, _react2.css)({
+    lineHeight: "var(--ds-font-lineHeight-200, 20px)"
+  }),
+  'lineHeight.300': (0, _react2.css)({
+    lineHeight: "var(--ds-font-lineHeight-300, 24px)"
+  }),
+  'lineHeight.400': (0, _react2.css)({
+    lineHeight: "var(--ds-font-lineHeight-400, 28px)"
+  }),
+  'lineHeight.500': (0, _react2.css)({
+    lineHeight: "var(--ds-font-lineHeight-500, 32px)"
+  }),
+  'lineHeight.600': (0, _react2.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>>
@@ -197,8 +229,6 @@ var _default = Text;
  * @codegenParams ["text"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
  */
-
-exports.default = _default;
 var textColorMap = {
   'color.text': (0, _react2.css)({
     color: "var(--ds-text, #172B4D)"

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

@@ -10,8 +10,8 @@ exports.spacingScale = void 0;
  *
  * Internal codegen of the spacing scale values. Only used for internal examples.
  *
- * @codegen <<SignedSource::d351e41acd06f256fb46554409694f31>>
+ * @codegen <<SignedSource::885d6c601dfa9fccaf33a7bd461ef59d>>
  * @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', 'scale.800', 'scale.1000'];
+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'];
 exports.spacingScale = spacingScale;

package/dist/cjs/version.json

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