@atlaskit/tokens 0.8.0 → 0.8.3

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.8.0";
+var version = "0.8.3";
 
 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/background.js

@@ -23,19 +23,31 @@ var color = {
       disabled: {
         value: 'DN200A'
       },
-      // @ts-ignore temporary value
       inverse: {
-        value: '#ffffff33'
+        subtle: {
+          // @ts-ignore temporary value (#FFFFFF 16% opacity)
+          '[default]': {
+            value: '#FFFFFF29'
+          },
+          // @ts-ignore temporary value (#FFFFFF 24% opacity)
+          hovered: {
+            value: '#FFFFFF3D'
+          },
+          // @ts-ignore temporary value (#FFFFFF 32% opacity)
+          pressed: {
+            value: '#FFFFFF52'
+          }
+        }
       },
       input: {
         '[default]': {
-          value: 'DN100A'
+          value: 'DN100'
         },
         hovered: {
-          value: 'DN0'
+          value: 'DN200'
         },
         pressed: {
-          value: 'DN200A'
+          value: 'DN100'
         }
       },
       neutral: {

package/dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js

@@ -202,6 +202,12 @@ var color = {
       card: {
         value: 'DN100'
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#00000029'
+        }
+      },
       overlay: {
         value: 'DN200'
       },

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

@@ -23,19 +23,31 @@ var color = {
       disabled: {
         value: 'N200A'
       },
-      // @ts-ignore temporary value
       inverse: {
-        value: '#00000029'
+        subtle: {
+          // @ts-ignore temporary value (#000000 16% opacity)
+          '[default]': {
+            value: '#00000029'
+          },
+          // @ts-ignore temporary value (#000000 24% opacity)
+          hovered: {
+            value: '#0000003D'
+          },
+          // @ts-ignore temporary value (#000000 32% opacity)
+          pressed: {
+            value: '#00000052'
+          }
+        }
       },
       input: {
         '[default]': {
-          value: 'N100A'
+          value: 'N0'
         },
         hovered: {
-          value: 'N0'
+          value: 'N100'
         },
         pressed: {
-          value: 'N200A'
+          value: 'N0'
         }
       },
       neutral: {

package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js

@@ -202,6 +202,12 @@ var color = {
       card: {
         value: 'N0'
       },
+      inverse: {
+        // @ts-ignore temporary until a palette colour exists for it
+        '[default]': {
+          value: '#FFFFFF29'
+        }
+      },
       overlay: {
         value: 'N0'
       },