@atlaskit/tokens 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tokens
 
+## 0.8.1
+
+### Patch Changes
+
+- [`a66253fc6a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a66253fc6a5) - Export token ID utility functions with new entrypoint `@atlaskit/tokens/token-ids`
+
 ## 0.8.0
 
 ### Minor Changes

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.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/version.json

@@ -1,5 +1,7 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.8.0",
-	"sideEffects": false
+	"version": "0.8.1",
+	"sideEffects": [
+		"**/*.css"
+	]
 }

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.8.0";
+const version = "0.8.1";
 
 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/version.json

@@ -1,5 +1,7 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.8.0",
-	"sideEffects": false
+	"version": "0.8.1",
+	"sideEffects": [
+		"**/*.css"
+	]
 }

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.8.0";
+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/version.json

@@ -1,5 +1,7 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.8.0",
-	"sideEffects": false
+	"version": "0.8.1",
+	"sideEffects": [
+		"**/*.css"
+	]
 }

package/dist/types/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ALLOWED_THEMES: string[];
+export declare const DEFAULT_THEME = "light";
+export declare const CSS_PREFIX = "ds";
+export declare const LONG_SHORT_MAPPING: Record<string, string>;

package/dist/types/entry-points/token-ids.d.ts

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

package/dist/types/token-ids.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 declare const getCSSCustomProperty: GetCssCustomProperty;
+declare type GetCssCustomProperty = (path: string | string[]) => string;
+/**
+ * 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 declare const getTokenId: (path: string | string[]) => string;
+/**
+ * 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 declare const getFullyQualifiedTokenId: (path: string[]) => string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "author": "Atlassian Pty Ltd",
   "description": "Tokens are a single source of truth to name and store Atlassian design decisions.",
   "license": "Apache-2.0",
@@ -16,10 +16,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
     ".": "./src/index.tsx",
+    "./token-ids": "./src/entry-points/token-ids.tsx",
     "./token-names": "./src/entry-points/token-names.tsx",
     "./rename-mapping": "./src/entry-points/rename-mapping.tsx",
     "./babel-plugin": "./src/entry-points/babel-plugin.tsx",

package/token-ids/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/tokens/token-ids",
+  "main": "../dist/cjs/entry-points/token-ids.js",
+  "module": "../dist/esm/entry-points/token-ids.js",
+  "module:es2019": "../dist/es2019/entry-points/token-ids.js",
+  "types": "../dist/types/entry-points/token-ids.d.ts"
+}