@atlaskit/tokens 0.7.3 → 0.8.2

package/dist/esm/constants.js

@@ -0,0 +1,8 @@
+export var ALLOWED_THEMES = ['light', 'dark'];
+export var DEFAULT_THEME = 'light';
+export var CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code
+
+export var LONG_SHORT_MAPPING = {
+  'atlassian-light': 'light',
+  'atlassian-dark': 'dark'
+};

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

@@ -0,0 +1 @@
+export { getCSSCustomProperty, getTokenId, getFullyQualifiedTokenId } from '../token-ids';

package/dist/esm/get-token.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 = "0.7.3";
+var version = "0.8.2";
 
 function token(path, fallback) {
   var token = tokens[path];

package/dist/esm/token-ids.js

@@ -0,0 +1,58 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { CSS_PREFIX } from './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]')
+ */
+
+export var getCSSCustomProperty = function getCSSCustomProperty(path) {
+  var normalizedPath = typeof path === 'string' ? path.split('.') : path;
+  return "--".concat([CSS_PREFIX].concat(_toConsumableArray(normalizedPath.slice(1))).filter(function (el) {
+    return el !== '[default]';
+  }).join('-'));
+};
+
+/**
+ * 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]')
+ */
+export 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]'])
+ */
+
+export var getFullyQualifiedTokenId = function getFullyQualifiedTokenId(path) {
+  return path.join('.');
+};

package/dist/esm/tokens/atlassian-dark/color/background.js

@@ -23,13 +23,13 @@ var color = {
       },
       input: {
         '[default]': {
-          value: 'DN100A'
+          value: 'DN100'
         },
         hovered: {
-          value: 'DN0'
+          value: 'DN200'
         },
         pressed: {
-          value: 'DN200A'
+          value: 'DN100'
         }
       },
       neutral: {

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

@@ -0,0 +1,13 @@
+var color = {
+  color: {
+    skeleton: {
+      '[default]': {
+        value: 'DN200A'
+      },
+      subtle: {
+        value: 'DN100A'
+      }
+    }
+  }
+};
+export default color;

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

@@ -23,13 +23,13 @@ var color = {
       },
       input: {
         '[default]': {
-          value: 'N100A'
+          value: 'N0'
         },
         hovered: {
-          value: 'N0'
+          value: 'N100'
         },
         pressed: {
-          value: 'N200A'
+          value: 'N0'
         }
       },
       neutral: {

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

@@ -0,0 +1,13 @@
+var color = {
+  color: {
+    skeleton: {
+      '[default]': {
+        value: 'N200A'
+      },
+      subtle: {
+        value: 'N100A'
+      }
+    }
+  }
+};
+export default color;

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

@@ -0,0 +1,21 @@
+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'
+        }
+      }
+    }
+  }
+};
+export default color;