@atlaskit/tokens 1.21.0 → 1.21.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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.21.0";
+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.21.0";
+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/es2019/babel-plugin/plugin.js

@@ -15,7 +15,21 @@ const 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((prev, curr, index) => {
-        let value = `${curr.offset.x}px ${curr.offset.y}px ${curr.radius}px ${curr.color}`;
+        let 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) {
+          const opacityAsHex = curr.opacity.toString(16); // 0.4f5c28f5c28f5c
+          let 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;
+        }
+        let value = `${curr.offset.x}px ${curr.offset.y}px ${curr.radius}px ${color}`;
         if (index === 0) {
           value += `, `;
         }

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

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.21.0";
+const 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/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "1.21.0";
+const 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/esm/babel-plugin/plugin.js

@@ -18,7 +18,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/esm/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "1.21.0";
+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/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "1.21.0";
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"