@atlaskit/tokens 0.7.3 → 0.8.2

package/dist/es2019/constants.js

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

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

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

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

package/dist/es2019/token-ids.js

@@ -0,0 +1,51 @@
+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 const getCSSCustomProperty = path => {
+  const normalizedPath = typeof path === 'string' ? path.split('.') : path;
+  return `--${[CSS_PREFIX, ...normalizedPath.slice(1)].filter(el => 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 const getTokenId = path => {
+  const normalizedPath = typeof path === 'string' ? path.split('.') : path;
+  return normalizedPath.filter(el => 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 const getFullyQualifiedTokenId = path => path.join('.');

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+const 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;