@atlaskit/tokens 0.7.2 → 0.8.1

package/dist/cjs/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LONG_SHORT_MAPPING = exports.DEFAULT_THEME = exports.CSS_PREFIX = exports.ALLOWED_THEMES = void 0;
+var ALLOWED_THEMES = ['light', 'dark'];
+exports.ALLOWED_THEMES = ALLOWED_THEMES;
+var DEFAULT_THEME = 'light';
+exports.DEFAULT_THEME = DEFAULT_THEME;
+var CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code
+
+exports.CSS_PREFIX = CSS_PREFIX;
+var LONG_SHORT_MAPPING = {
+  'atlassian-light': 'light',
+  'atlassian-dark': 'dark'
+};
+exports.LONG_SHORT_MAPPING = LONG_SHORT_MAPPING;

package/dist/cjs/entry-points/token-ids.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getCSSCustomProperty", {
+  enumerable: true,
+  get: function get() {
+    return _tokenIds.getCSSCustomProperty;
+  }
+});
+Object.defineProperty(exports, "getFullyQualifiedTokenId", {
+  enumerable: true,
+  get: function get() {
+    return _tokenIds.getFullyQualifiedTokenId;
+  }
+});
+Object.defineProperty(exports, "getTokenId", {
+  enumerable: true,
+  get: function get() {
+    return _tokenIds.getTokenId;
+  }
+});
+
+var _tokenIds = require("../token-ids");

package/dist/cjs/get-token.js

@@ -12,7 +12,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 
 var name = "@atlaskit/tokens";
-var version = "0.7.2";
+var version = "0.8.1";
 
 function token(path, fallback) {
   var token = _tokenNames.default[path];

package/dist/cjs/token-ids.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTokenId = exports.getFullyQualifiedTokenId = exports.getCSSCustomProperty = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _constants = require("./constants");
+
+/**
+ * Transforms a style dictionary token path to a CSS custom property.
+ *
+ * A css prefix will be prepended and all [default] key words will be omitted
+ * from the path
+ *
+ * @example <caption>Passing a path as an array</caption>
+ * // Returns ds-background-bold
+ * getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns ds-background-bold
+ * getCSSCustomProperty('color.background.bold.[default]')
+ */
+var getCSSCustomProperty = function getCSSCustomProperty(path) {
+  var normalizedPath = typeof path === 'string' ? path.split('.') : path;
+  return "--".concat([_constants.CSS_PREFIX].concat((0, _toConsumableArray2.default)(normalizedPath.slice(1))).filter(function (el) {
+    return el !== '[default]';
+  }).join('-'));
+};
+
+exports.getCSSCustomProperty = getCSSCustomProperty;
+
+/**
+ * Transforms a style dictionary token path to a shorthand token id
+ * These ids will be typically be how tokens are interacted with via typescript and css
+ *
+ * All [default] key words will be omitted from the path
+ *
+ * @example <caption>Passing a path as an array</caption>
+ * // Returns color.background.bold
+ * getTokenId(['color', 'background', 'bold', '[default]'])
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns color.background.bold
+ * getTokenId('color.background.bold.[default]')
+ */
+var getTokenId = function getTokenId(path) {
+  var normalizedPath = typeof path === 'string' ? path.split('.') : path;
+  return normalizedPath.filter(function (el) {
+    return el !== '[default]';
+  }).join('.');
+};
+/**
+ * Transforms a style dictionary token path to a fully qualified token id
+ * These Ids are intended to be used internal to this package by style-dictionary
+ *
+ * [default] key words will NOT be omitted from the path
+ *
+ * @example <caption>Passing a path as a string</caption>
+ * // Returns color.background.bold.[default]
+ * getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
+ */
+
+
+exports.getTokenId = getTokenId;
+
+var getFullyQualifiedTokenId = function getFullyQualifiedTokenId(path) {
+  return path.join('.');
+};
+
+exports.getFullyQualifiedTokenId = getFullyQualifiedTokenId;

package/dist/cjs/tokens/atlassian-dark/color/skeleton.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    skeleton: {
+      '[default]': {
+        value: 'DN200A'
+      },
+      subtle: {
+        value: 'DN100A'
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-dark/elevation/shadow.js

@@ -28,6 +28,29 @@ var shadow = {
           opacity: 0.5
         }]
       },
+      overflow: {
+        value: [{
+          radius: 12,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          // @ts-ignore no current palette colour for this yet
+          color: '#030404',
+          // This opacity overrides the color alpha.
+          opacity: 0.56
+        }, {
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          // @ts-ignore no current palette colour for this yet
+          color: '#030404',
+          // This opacity overrides the color alpha.
+          opacity: 0.5
+        }]
+      },
       overlay: {
         value: [{
           radius: 0,

package/dist/cjs/tokens/atlassian-light/color/skeleton.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    skeleton: {
+      '[default]': {
+        value: 'N200A'
+      },
+      subtle: {
+        value: 'N100A'
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;

package/dist/cjs/tokens/atlassian-light/elevation/shadow.js

@@ -26,6 +26,25 @@ var shadow = {
           opacity: 0.31
         }]
       },
+      overflow: {
+        value: [{
+          radius: 8,
+          offset: {
+            x: 0,
+            y: 8
+          },
+          color: 'N1100',
+          opacity: 0.08
+        }, {
+          radius: 1,
+          offset: {
+            x: 0,
+            y: 0
+          },
+          color: 'N1100',
+          opacity: 0.12
+        }]
+      },
       overlay: {
         value: [{
           radius: 12,

package/dist/cjs/tokens/default/color/skeleton.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var color = {
+  color: {
+    skeleton: {
+      '[default]': {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for skeleton loading states'
+        }
+      },
+      subtle: {
+        attributes: {
+          group: 'paint',
+          state: 'active',
+          description: 'Use for the pulse or shimmer effect in skeleton loading states'
+        }
+      }
+    }
+  }
+};
+var _default = color;
+exports.default = _default;