@atlaskit/tokens 1.20.1 → 1.21.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tokens
 
+## 1.21.1
+
+### Patch Changes
+
+- [`12c0a5a6f2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12c0a5a6f2e) - The tokens Babel plugin will now add opacity to shadow token values if they don't already contain them.
+
+## 1.21.0
+
+### Minor Changes
+
+- [`9eee297c402`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9eee297c402) - Added negative space tokens from -2px to -32px (space.negative.025 to space.negative.400).
+
 ## 1.20.1
 
 ### Patch Changes

package/dist/cjs/artifacts/palettes-raw/spacing-scale.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4cad6a8b4b676f9379fa2d4fca019b0e>>
+ * @codegen <<SignedSource::f1c7eb6fca38275b61cb71127efc2f1a>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -219,6 +219,141 @@ var tokens = [{
   },
   "name": "space.Space800",
   "path": ["space", "Space800"]
+}, {
+  "value": "-2px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -2,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative025",
+  "path": ["space", "SpaceNegative025"]
+}, {
+  "value": "-4px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -4,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative050",
+  "path": ["space", "SpaceNegative050"]
+}, {
+  "value": "-6px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -6,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative075",
+  "path": ["space", "SpaceNegative075"]
+}, {
+  "value": "-8px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -8,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative100",
+  "path": ["space", "SpaceNegative100"]
+}, {
+  "value": "-12px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -12,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative150",
+  "path": ["space", "SpaceNegative150"]
+}, {
+  "value": "-16px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -16,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative200",
+  "path": ["space", "SpaceNegative200"]
+}, {
+  "value": "-20px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -20,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative250",
+  "path": ["space", "SpaceNegative250"]
+}, {
+  "value": "-24px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -24,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative300",
+  "path": ["space", "SpaceNegative300"]
+}, {
+  "value": "-32px",
+  "attributes": {
+    "group": "spacing"
+  },
+  "filePath": "src/palettes/spacing-scale.tsx",
+  "isSource": true,
+  "original": {
+    "value": -32,
+    "attributes": {
+      "group": "spacing"
+    }
+  },
+  "name": "space.SpaceNegative400",
+  "path": ["space", "SpaceNegative400"]
 }];
 var _default = tokens;
 exports.default = _default;

package/dist/cjs/artifacts/themes/atlassian-spacing.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::36f0214aaedb62d3639cb79a9195eaf6>>
+ * @codegen <<SignedSource::50b812651f792cc85f9294bc1f28b366>>
  * @codegenCommand yarn build tokens
  */
-var _default = "\nhtml[data-theme~=\"spacing:spacing\"] {\n  --ds-space-0: 0rem;\n  --ds-space-025: 0.125rem;\n  --ds-space-050: 0.25rem;\n  --ds-space-075: 0.375rem;\n  --ds-space-100: 0.5rem;\n  --ds-space-150: 0.75rem;\n  --ds-space-200: 1rem;\n  --ds-space-250: 1.25rem;\n  --ds-space-300: 1.5rem;\n  --ds-space-400: 2rem;\n  --ds-space-500: 2.5rem;\n  --ds-space-600: 3rem;\n  --ds-space-800: 4rem;\n  --ds-space-1000: 5rem;\n}\n";
+var _default = "\nhtml[data-theme~=\"spacing:spacing\"] {\n  --ds-space-0: 0rem;\n  --ds-space-025: 0.125rem;\n  --ds-space-050: 0.25rem;\n  --ds-space-075: 0.375rem;\n  --ds-space-100: 0.5rem;\n  --ds-space-150: 0.75rem;\n  --ds-space-200: 1rem;\n  --ds-space-250: 1.25rem;\n  --ds-space-300: 1.5rem;\n  --ds-space-400: 2rem;\n  --ds-space-500: 2.5rem;\n  --ds-space-600: 3rem;\n  --ds-space-800: 4rem;\n  --ds-space-1000: 5rem;\n  --ds-space-negative-025: -0.125rem;\n  --ds-space-negative-050: -0.25rem;\n  --ds-space-negative-075: -0.375rem;\n  --ds-space-negative-100: -0.5rem;\n  --ds-space-negative-150: -0.75rem;\n  --ds-space-negative-200: -1rem;\n  --ds-space-negative-250: -1.25rem;\n  --ds-space-negative-300: -1.5rem;\n  --ds-space-negative-400: -2rem;\n}\n";
 exports.default = _default;

package/dist/cjs/artifacts/token-default-values.js

@@ -13,7 +13,7 @@ exports.default = void 0;
  * Token names mapped to their value in the default Atlassian themes ('light').
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
  *
- * @codegen <<SignedSource::b5c908d96d2198b69df03d013b3c2b6a>>
+ * @codegen <<SignedSource::89d57f1ac024661bf2b7ee3c1e74dfa9>>
  * @codegenCommand yarn build tokens
  */
 var defaultTokenValues = {
@@ -429,6 +429,15 @@ var defaultTokenValues = {
   'space.600': '3rem',
   'space.800': '4rem',
   'space.1000': '5rem',
+  'space.negative.025': '-0.125rem',
+  'space.negative.050': '-0.25rem',
+  'space.negative.075': '-0.375rem',
+  'space.negative.100': '-0.5rem',
+  'space.negative.150': '-0.75rem',
+  'space.negative.200': '-1rem',
+  'space.negative.250': '-1.25rem',
+  'space.negative.300': '-1.5rem',
+  'space.negative.400': '-2rem',
   'font.body': 'normal 400 0.875rem/1.25rem ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',
   'font.body.lg': 'normal 400 1rem/1.5rem ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',
   'font.body.sm': 'normal 400 0.6875rem/1.25rem ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',

package/dist/cjs/artifacts/token-names.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5688852b9c5bb12cbce375967cb93ef5>>
+ * @codegen <<SignedSource::487e60f0791ae39572ec7cc90e77eb13>>
  * @codegenCommand yarn build tokens
  */
 var tokens = {
@@ -422,6 +422,15 @@ var tokens = {
   'space.600': '--ds-space-600',
   'space.800': '--ds-space-800',
   'space.1000': '--ds-space-1000',
+  'space.negative.025': '--ds-space-negative-025',
+  'space.negative.050': '--ds-space-negative-050',
+  'space.negative.075': '--ds-space-negative-075',
+  'space.negative.100': '--ds-space-negative-100',
+  'space.negative.150': '--ds-space-negative-150',
+  'space.negative.200': '--ds-space-negative-200',
+  'space.negative.250': '--ds-space-negative-250',
+  'space.negative.300': '--ds-space-negative-300',
+  'space.negative.400': '--ds-space-negative-400',
   'font.body': '--ds-font-body',
   'font.body.lg': '--ds-font-body-lg',
   'font.body.sm': '--ds-font-body-sm',

package/dist/cjs/artifacts/tokens-raw/atlassian-spacing.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::93b85a1d24e82271f0bc792e089efef5>>
+ * @codegen <<SignedSource::54cdec07bc1ce255f26b8254ca514b76>>
  * @codegenCommand yarn build tokens
  */
 var tokens = [{
@@ -335,6 +335,222 @@ var tokens = [{
   "name": "space.1000",
   "path": ["space", "1000"],
   "cleanName": "space.1000"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-1px", "-3px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap small pieces of UI."
+  },
+  "value": "-2px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-1px", "-3px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap small pieces of UI."
+    },
+    "value": "SpaceNegative025"
+  },
+  "name": "space.negative.025",
+  "path": ["space", "negative", "025"],
+  "cleanName": "space.negative.025"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-3px", "-5px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap small pieces of UI."
+  },
+  "value": "-4px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-3px", "-5px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap small pieces of UI."
+    },
+    "value": "SpaceNegative050"
+  },
+  "name": "space.negative.050",
+  "path": ["space", "negative", "050"],
+  "cleanName": "space.negative.050"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-5px", "-7px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap small pieces of UI."
+  },
+  "value": "-6px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-5px", "-7px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap small pieces of UI."
+    },
+    "value": "SpaceNegative075"
+  },
+  "name": "space.negative.075",
+  "path": ["space", "negative", "075"],
+  "cleanName": "space.negative.075"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-7px", "-9px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap small pieces of UI."
+  },
+  "value": "-8px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-7px", "-9px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap small pieces of UI."
+    },
+    "value": "SpaceNegative100"
+  },
+  "name": "space.negative.100",
+  "path": ["space", "negative", "100"],
+  "cleanName": "space.negative.100"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-10px", "-11px", "-13px", "-14px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+  },
+  "value": "-12px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-10px", "-11px", "-13px", "-14px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+    },
+    "value": "SpaceNegative150"
+  },
+  "name": "space.negative.150",
+  "path": ["space", "negative", "150"],
+  "cleanName": "space.negative.150"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-14px", "-15px", "-17px", "-18px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+  },
+  "value": "-16px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-14px", "-15px", "-17px", "-18px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+    },
+    "value": "SpaceNegative200"
+  },
+  "name": "space.negative.200",
+  "path": ["space", "negative", "200"],
+  "cleanName": "space.negative.200"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-19px", "-21px", "-22px", "-23px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+  },
+  "value": "-20px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-19px", "-21px", "-22px", "-23px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+    },
+    "value": "SpaceNegative250"
+  },
+  "name": "space.negative.250",
+  "path": ["space", "negative", "250"],
+  "cleanName": "space.negative.250"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-23px", "-25px", "-26px", "-27px", "-28px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+  },
+  "value": "-24px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-23px", "-25px", "-26px", "-27px", "-28px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap larger pieces of UI."
+    },
+    "value": "SpaceNegative300"
+  },
+  "name": "space.negative.300",
+  "path": ["space", "negative", "300"],
+  "cleanName": "space.negative.300"
+}, {
+  "attributes": {
+    "group": "spacing",
+    "state": "active",
+    "suggest": ["-28px", "-29px", "-30px", "-31px", "-33px", "-34px", "-35px"],
+    "introduced": "1.21.0",
+    "description": "Use to negate parent whitespace or overlap the largest pieces of UI."
+  },
+  "value": "-32px",
+  "filePath": "src/tokens/atlassian-spacing/spacing.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "spacing",
+      "state": "active",
+      "suggest": ["-28px", "-29px", "-30px", "-31px", "-33px", "-34px", "-35px"],
+      "introduced": "1.21.0",
+      "description": "Use to negate parent whitespace or overlap the largest pieces of UI."
+    },
+    "value": "SpaceNegative400"
+  },
+  "name": "space.negative.400",
+  "path": ["space", "negative", "400"],
+  "cleanName": "space.negative.400"
 }];
 var _default = tokens;
 exports.default = _default;

package/dist/cjs/babel-plugin/plugin.js

@@ -28,7 +28,21 @@ var getThemeValues = function getThemeValues(theme) {
       // If it's a box shadow, it'll be an array of values that needs to be
       // formatted to look like '0px 0px 8px #091e4229, 0px 0px 1px #091e421F'
       value = rawToken.value.reduce(function (prev, curr, index) {
-        var value = "".concat(curr.offset.x, "px ").concat(curr.offset.y, "px ").concat(curr.radius, "px ").concat(curr.color);
+        var color = curr.color;
+
+        // Opacity needs to be added to hex values that don't already contain it.
+        // If it contained opacity, the length would be 9 instead of 7.
+        if (color.length === 7 && curr.opacity) {
+          var opacityAsHex = curr.opacity.toString(16); // 0.4f5c28f5c28f5c
+          var shortenedHex = opacityAsHex.slice(2, 4); // 4f
+
+          // The hex value has to have a length of 2. If it's shorter, a "0" needs to be added.
+          if (shortenedHex.length === 1) {
+            shortenedHex += '0';
+          }
+          color += shortenedHex;
+        }
+        var value = "".concat(curr.offset.x, "px ").concat(curr.offset.y, "px ").concat(curr.radius, "px ").concat(color);
         if (index === 0) {
           value += ", ";
         }

package/dist/cjs/get-token-value.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.20.1";
+var version = "1.21.1";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.20.1";
+var version = "1.21.1";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

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

@@ -92,6 +92,60 @@ var baseSpacingTokens = {
     attributes: {
       group: 'spacing'
     }
+  },
+  SpaceNegative025: {
+    value: -2,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative050: {
+    value: -4,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative075: {
+    value: -6,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative100: {
+    value: -8,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative150: {
+    value: -12,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative200: {
+    value: -16,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative250: {
+    value: -20,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative300: {
+    value: -24,
+    attributes: {
+      group: 'spacing'
+    }
+  },
+  SpaceNegative400: {
+    value: -32,
+    attributes: {
+      group: 'spacing'
+    }
   }
 };
 var spacingPalette = {

package/dist/cjs/tokens/atlassian-spacing/spacing.js

@@ -54,6 +54,35 @@ var spacing = {
     },
     '1000': {
       value: 'Space1000'
+    },
+    negative: {
+      '025': {
+        value: 'SpaceNegative025'
+      },
+      '050': {
+        value: 'SpaceNegative050'
+      },
+      '075': {
+        value: 'SpaceNegative075'
+      },
+      '100': {
+        value: 'SpaceNegative100'
+      },
+      '150': {
+        value: 'SpaceNegative150'
+      },
+      '200': {
+        value: 'SpaceNegative200'
+      },
+      '250': {
+        value: 'SpaceNegative250'
+      },
+      '300': {
+        value: 'SpaceNegative300'
+      },
+      '400': {
+        value: 'SpaceNegative400'
+      }
     }
   }
 };