@atlaskit/tokens 1.13.2 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tokens
 
+## 1.14.0
+
+### Minor Changes
+
+- [`d9d7c284713`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9d7c284713) - Add custom theming support to `ThemeObjectToString` and `ThemeStringToObject` functions.
+
 ## 1.13.2
 
 ### Patch Changes

package/dist/cjs/get-token-value.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var name = "@atlaskit/tokens";
-var version = "1.13.2";
+var version = "1.14.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/cjs/get-token.js

@@ -9,7 +9,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
 var name = "@atlaskit/tokens";
-var version = "1.13.2";
+var version = "1.14.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/cjs/theme-state-transformer.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.themeStringToObject = exports.themeObjectToString = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _themeConfig = require("./theme-config");
 var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+var customThemeOptions = 'UNSAFE_themeOptions';
 var isThemeKind = function isThemeKind(themeKind) {
   return themeKinds.find(function (kind) {
     return kind === themeKind;
@@ -35,7 +37,7 @@ var isColorMode = function isColorMode(modeId) {
  */
 var themeStringToObject = function themeStringToObject(themeState) {
   return themeState.split(' ').map(function (theme) {
-    return theme.split(':');
+    return theme.split(/:([\s\S]*)/);
   }).reduce(function (themeObject, _ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
       kind = _ref2[0],
@@ -47,6 +49,13 @@ var themeStringToObject = function themeStringToObject(themeState) {
       // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
+    if (kind === customThemeOptions) {
+      try {
+        themeObject[customThemeOptions] = JSON.parse(id);
+      } catch (e) {
+        new Error('Invalid custom theme string');
+      }
+    }
     return themeObject;
   }, {});
 };
@@ -68,7 +77,16 @@ var themeObjectToString = function themeObjectToString(themeState) {
     var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
       kind = _ref4[0],
       id = _ref4[1];
-    return (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(id) : themeString;
+    if (
+    // colorMode theme state
+    kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
+    // custom theme state
+    kind === customThemeOptions && (0, _typeof2.default)(id) === 'object' ||
+    // other theme states
+    isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
+      return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat((0, _typeof2.default)(id) === 'object' ? JSON.stringify(id) : id);
+    }
+    return themeString;
   }, '');
 };
 exports.themeObjectToString = themeObjectToString;

package/dist/cjs/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.13.2",
+	"version": "1.14.0",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/es2019/get-token-value.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 = "1.13.2";
+const version = "1.14.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "1.13.2";
+const version = "1.14.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/es2019/theme-state-transformer.js

@@ -1,5 +1,6 @@
 import { themeIds } from './theme-config';
 const themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+const customThemeOptions = 'UNSAFE_themeOptions';
 const isThemeKind = themeKind => {
   return themeKinds.find(kind => kind === themeKind) !== undefined;
 };
@@ -22,7 +23,7 @@ const isColorMode = modeId => {
  * ```
  */
 export const themeStringToObject = themeState => {
-  return themeState.split(' ').map(theme => theme.split(':')).reduce((themeObject, [kind, id]) => {
+  return themeState.split(' ').map(theme => theme.split(/:(.*)/s)).reduce((themeObject, [kind, id]) => {
     if (kind === 'colorMode' && isColorMode(id)) {
       themeObject[kind] = id;
     }
@@ -30,6 +31,13 @@ export const themeStringToObject = themeState => {
       // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
+    if (kind === customThemeOptions) {
+      try {
+        themeObject[customThemeOptions] = JSON.parse(id);
+      } catch (e) {
+        new Error('Invalid custom theme string');
+      }
+    }
     return themeObject;
   }, {});
 };
@@ -45,6 +53,15 @@ export const themeStringToObject = themeState => {
  * // returns 'dark:dark light:legacy-light spacing:spacing'
  * ```
  */
-export const themeObjectToString = themeState => {
-  return Object.entries(themeState).reduce((themeString, [kind, id]) => (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + `${themeString ? ' ' : ''}` + `${kind}:${id}` : themeString, '');
-};
+export const themeObjectToString = themeState => Object.entries(themeState).reduce((themeString, [kind, id]) => {
+  if (
+  // colorMode theme state
+  kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
+  // custom theme state
+  kind === customThemeOptions && typeof id === 'object' ||
+  // other theme states
+  isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
+    return themeString + `${themeString ? ' ' : ''}` + `${kind}:${typeof id === 'object' ? JSON.stringify(id) : id}`;
+  }
+  return themeString;
+}, '');

package/dist/es2019/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.13.2",
+	"version": "1.14.0",
 	"sideEffects": [
 		"**/*.css"
 	]

package/dist/esm/get-token-value.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 = "1.13.2";
+var version = "1.14.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/esm/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 var name = "@atlaskit/tokens";
-var version = "1.13.2";
+var version = "1.14.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/esm/theme-state-transformer.js

@@ -1,6 +1,8 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { themeIds } from './theme-config';
 var themeKinds = ['light', 'dark', 'spacing', 'typography', 'shape'];
+var customThemeOptions = 'UNSAFE_themeOptions';
 var isThemeKind = function isThemeKind(themeKind) {
   return themeKinds.find(function (kind) {
     return kind === themeKind;
@@ -28,7 +30,7 @@ var isColorMode = function isColorMode(modeId) {
  */
 export var themeStringToObject = function themeStringToObject(themeState) {
   return themeState.split(' ').map(function (theme) {
-    return theme.split(':');
+    return theme.split(/:([\s\S]*)/);
   }).reduce(function (themeObject, _ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       kind = _ref2[0],
@@ -40,6 +42,13 @@ export var themeStringToObject = function themeStringToObject(themeState) {
       // @ts-expect-error FIXME - this is a valid ts error
       themeObject[kind] = id;
     }
+    if (kind === customThemeOptions) {
+      try {
+        themeObject[customThemeOptions] = JSON.parse(id);
+      } catch (e) {
+        new Error('Invalid custom theme string');
+      }
+    }
     return themeObject;
   }, {});
 };
@@ -60,6 +69,15 @@ export var themeObjectToString = function themeObjectToString(themeState) {
     var _ref4 = _slicedToArray(_ref3, 2),
       kind = _ref4[0],
       id = _ref4[1];
-    return (kind === 'colorMode' || isThemeKind(kind)) && typeof id === 'string' && (isThemeIds(id) || isColorMode(id)) ? themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(id) : themeString;
+    if (
+    // colorMode theme state
+    kind === 'colorMode' && typeof id === 'string' && isColorMode(id) ||
+    // custom theme state
+    kind === customThemeOptions && _typeof(id) === 'object' ||
+    // other theme states
+    isThemeKind(kind) && typeof id === 'string' && isThemeIds(id)) {
+      return themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(_typeof(id) === 'object' ? JSON.stringify(id) : id);
+    }
+    return themeString;
   }, '');
 };

package/dist/esm/version.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "1.13.2",
+	"version": "1.14.0",
 	"sideEffects": [
 		"**/*.css"
 	]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"