@atlaskit/ds-explorations 1.7.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/ds-explorations
 
+## 2.0.1
+
+### Patch Changes
+
+- [`290b1f069bd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/290b1f069bd) - Regenerate codegen styles
+
+## 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::dd066079dac7b8cd6f947965a2f1a744>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
 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)"
   })
 };
@@ -427,21 +427,18 @@ var paddingInlineMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::201c8a6c6ff88ac47cdb02365c643ff2>>
+ * @codegen <<SignedSource::04c05379e7c6ad157383d5f77e66911a>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
  */
 var borderColorMap = {
   'color.border': (0, _react2.css)({
     borderColor: "var(--ds-border, #091e4221)"
   }),
-  bold: (0, _react2.css)({
-    borderColor: "var(--ds-border-bold, #344563)"
-  }),
-  inverse: (0, _react2.css)({
-    borderColor: "var(--ds-border-inverse, #FFFFFF)"
+  disabled: (0, _react2.css)({
+    borderColor: "var(--ds-border-disabled, #FAFBFC)"
   }),
   focused: (0, _react2.css)({
     borderColor: "var(--ds-border-focused, #4C9AFF)"
@@ -449,15 +446,15 @@ var borderColorMap = {
   input: (0, _react2.css)({
     borderColor: "var(--ds-border-input, #FAFBFC)"
   }),
-  disabled: (0, _react2.css)({
-    borderColor: "var(--ds-border-disabled, #FAFBFC)"
-  }),
-  brand: (0, _react2.css)({
-    borderColor: "var(--ds-border-brand, #0052CC)"
+  inverse: (0, _react2.css)({
+    borderColor: "var(--ds-border-inverse, #FFFFFF)"
   }),
   selected: (0, _react2.css)({
     borderColor: "var(--ds-border-selected, #0052CC)"
   }),
+  brand: (0, _react2.css)({
+    borderColor: "var(--ds-border-brand, #0052CC)"
+  }),
   danger: (0, _react2.css)({
     borderColor: "var(--ds-border-danger, #FF5630)"
   }),
@@ -472,18 +469,21 @@ var borderColorMap = {
   }),
   information: (0, _react2.css)({
     borderColor: "var(--ds-border-information, #0065FF)"
+  }),
+  bold: (0, _react2.css)({
+    borderColor: "var(--ds-border-bold, #344563)"
   })
 };
 var backgroundColorMap = {
   disabled: (0, _react2.css)({
     backgroundColor: "var(--ds-background-disabled, #091e4289)"
   }),
-  'inverse.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
-  }),
   input: (0, _react2.css)({
     backgroundColor: "var(--ds-background-input, #FAFBFC)"
   }),
+  'inverse.subtle': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
+  }),
   neutral: (0, _react2.css)({
     backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
   }),
@@ -493,15 +493,15 @@ var backgroundColorMap = {
   'neutral.bold': (0, _react2.css)({
     backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
   }),
-  'brand.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
-  }),
   selected: (0, _react2.css)({
     backgroundColor: "var(--ds-background-selected, #DEEBFF)"
   }),
   'selected.bold': (0, _react2.css)({
     backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
   }),
+  'brand.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
+  }),
   danger: (0, _react2.css)({
     backgroundColor: "var(--ds-background-danger, #FFEBE6)"
   }),
@@ -544,31 +544,31 @@ var backgroundColorMap = {
   'elevation.surface': (0, _react2.css)({
     backgroundColor: "var(--ds-surface, #FFFFFF)"
   }),
-  'elevation.surface.sunken': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
+  'elevation.surface.overlay': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
   }),
   'elevation.surface.raised': (0, _react2.css)({
     backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
   }),
-  'elevation.surface.overlay': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
+  'elevation.surface.sunken': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
   })
 };
 var shadowMap = {
-  raised: (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
-  }),
   overflow: (0, _react2.css)({
     boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
   }),
-  'overflow.spread': (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
-  }),
   'overflow.perimeter': (0, _react2.css)({
     boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
   }),
+  'overflow.spread': (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
   overlay: (0, _react2.css)({
     boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  raised: (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
   })
 };
 

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

@@ -120,55 +120,55 @@ 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::e4218f7c850d1484a192d5b8b5dce136>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
 
 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/interaction-surface.partial.js

@@ -58,23 +58,23 @@ var InteractionSurface = function InteractionSurface(_ref) {
 var _default = InteractionSurface;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::46f9477bc75d77a16327328d1b49c35f>>
+ * @codegen <<SignedSource::86378a9df36e53f14f179490e5850418>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::db7a1282630a6e5b9424b807614086af>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::e348c7cd343cf53ff944fdb7023c577a>>
  */
 
 exports.default = _default;
 var backgroundActiveColorMap = {
-  'inverse.subtle': (0, _react2.css)({
+  input: (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
+      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
     }
   }),
-  input: (0, _react2.css)({
+  'inverse.subtle': (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
+      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
     }
   }),
   neutral: (0, _react2.css)({
@@ -92,11 +92,6 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
     }
   }),
-  'brand.bold': (0, _react2.css)({
-    ':active': {
-      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
-    }
-  }),
   selected: (0, _react2.css)({
     ':active': {
       backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
@@ -107,6 +102,11 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
     }
   }),
+  'brand.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
+    }
+  }),
   danger: (0, _react2.css)({
     ':active': {
       backgroundColor: "var(--ds-background-danger-pressed, #FF9C8F)"
@@ -162,26 +162,26 @@ var backgroundActiveColorMap = {
       backgroundColor: "var(--ds-surface-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.raised': (0, _react2.css)({
+  'elevation.surface.overlay': (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
     }
   }),
-  'elevation.surface.overlay': (0, _react2.css)({
+  'elevation.surface.raised': (0, _react2.css)({
     ':active': {
-      backgroundColor: "var(--ds-surface-overlay-pressed, #DCDFE4)"
+      backgroundColor: "var(--ds-surface-raised-pressed, #DCDFE4)"
     }
   })
 };
 var backgroundHoverColorMap = {
-  'inverse.subtle': (0, _react2.css)({
+  input: (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
+      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
     }
   }),
-  input: (0, _react2.css)({
+  'inverse.subtle': (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
+      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
     }
   }),
   neutral: (0, _react2.css)({
@@ -199,11 +199,6 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
     }
   }),
-  'brand.bold': (0, _react2.css)({
-    ':hover': {
-      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
-    }
-  }),
   selected: (0, _react2.css)({
     ':hover': {
       backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
@@ -214,6 +209,11 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
     }
   }),
+  'brand.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    }
+  }),
   danger: (0, _react2.css)({
     ':hover': {
       backgroundColor: "var(--ds-background-danger-hovered, #FFD2CC)"
@@ -269,14 +269,14 @@ var backgroundHoverColorMap = {
       backgroundColor: "var(--ds-surface-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.raised': (0, _react2.css)({
+  'elevation.surface.overlay': (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
     }
   }),
-  'elevation.surface.overlay': (0, _react2.css)({
+  'elevation.surface.raised': (0, _react2.css)({
     ':hover': {
-      backgroundColor: "var(--ds-surface-overlay-hovered, #F1F2F4)"
+      backgroundColor: "var(--ds-surface-raised-hovered, #F1F2F4)"
     }
   })
 };

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

@@ -84,55 +84,55 @@ 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::91d26b1ace8b38363779ae85a7ddc51b>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::a2b43f8447798dfdd9c6223bd22b78c7>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::b0b8f1a822ed84e0407ad83e6fda5a1c>>
  */
 
 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)"
   })
 };