@atlaskit/tokens 0.7.2 → 0.8.1

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.2";
+var version = "0.8.1";
 
 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/skeleton.js

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

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

@@ -22,6 +22,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/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/atlassian-light/elevation/shadow.js

@@ -20,6 +20,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/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;