@atlaskit/tokens 0.13.5 → 1.1.0

package/dist/cjs/utils/color-detection.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.hexToRGBAValues = exports.hexToRGBA = exports.getTextColorForBackground = exports.getLuminance = exports.getBoxShadow = exports.getBorderForBackground = void 0;
-
 var _index = require("../index");
-
 var hexToRGBAValues = function hexToRGBAValues(hex) {
   var hexColor = hex.replace('#', '');
   return {
@@ -16,27 +14,23 @@ var hexToRGBAValues = function hexToRGBAValues(hex) {
     a: parseFloat((parseInt(hexColor.slice(6, 8), 16) / 255).toFixed(2))
   };
 };
-
 exports.hexToRGBAValues = hexToRGBAValues;
-
 var hexToRGBA = function hexToRGBA(hex) {
   var _hexToRGBAValues = hexToRGBAValues(hex),
-      r = _hexToRGBAValues.r,
-      g = _hexToRGBAValues.g,
-      b = _hexToRGBAValues.b,
-      a = _hexToRGBAValues.a;
-
+    r = _hexToRGBAValues.r,
+    g = _hexToRGBAValues.g,
+    b = _hexToRGBAValues.b,
+    a = _hexToRGBAValues.a;
   return "rgb".concat(a ? 'a' : '', "(").concat(r, ",").concat(g, ",").concat(b).concat(a ? ",".concat(a) : '', ")");
 };
-
 exports.hexToRGBA = hexToRGBA;
-
 var getLuminance = function getLuminance(_ref) {
   var r = _ref.r,
-      g = _ref.g,
-      b = _ref.b;
+    g = _ref.g,
+    b = _ref.b;
   return (r * 299 + g * 587 + b * 114) / 1000;
 };
+
 /**
  * Returns an accessible hard-coded text color based on the color contrast with
  * the background.
@@ -46,17 +40,13 @@ var getLuminance = function getLuminance(_ref) {
  * of a hard-coded color. This is to support more transparent backgrounds
  * to allow the text to invert colors depending on the current theme's surface color.
  */
-
-
 exports.getLuminance = getLuminance;
-
 var getTextColorForBackground = function getTextColorForBackground(hex, opts) {
   var _hexToRGBAValues2 = hexToRGBAValues(hex),
-      r = _hexToRGBAValues2.r,
-      g = _hexToRGBAValues2.g,
-      b = _hexToRGBAValues2.b,
-      a = _hexToRGBAValues2.a;
-
+    r = _hexToRGBAValues2.r,
+    g = _hexToRGBAValues2.g,
+    b = _hexToRGBAValues2.b,
+    a = _hexToRGBAValues2.a;
   var lum = getLuminance({
     r: r,
     g: g,
@@ -68,32 +58,27 @@ var getTextColorForBackground = function getTextColorForBackground(hex, opts) {
     dark: a > alphaLimit
   };
   var alphaLimitExceeded = (opts === null || opts === void 0 ? void 0 : opts.hardcodedSurface) && alphaConditionsPerSurface[opts.hardcodedSurface];
-
   if (!(opts !== null && opts !== void 0 && opts.hardcodedSurface) && a < alphaLimit) {
     // This color is transparent, so the text will mainly cast onto the surface behind.
     // Needs to use tokens otherwise Dark mode would cause black text on black surface
     return (0, _index.token)('color.text', 'black');
   }
-
   return lum > 150 && !a || a && alphaLimitExceeded ? 'black' : 'white';
 };
+
 /**
  * Returns a border if determined to be required based on the color contrast with
  * the background.
  *
  * @param hex - The Hex color code of the background
  */
-
-
 exports.getTextColorForBackground = getTextColorForBackground;
-
 var getBorderForBackground = function getBorderForBackground(hex) {
   var _hexToRGBAValues3 = hexToRGBAValues(hex),
-      r = _hexToRGBAValues3.r,
-      g = _hexToRGBAValues3.g,
-      b = _hexToRGBAValues3.b,
-      a = _hexToRGBAValues3.a;
-
+    r = _hexToRGBAValues3.r,
+    g = _hexToRGBAValues3.g,
+    b = _hexToRGBAValues3.b,
+    a = _hexToRGBAValues3.a;
   var lum = getLuminance({
     r: r,
     g: g,
@@ -101,29 +86,24 @@ var getBorderForBackground = function getBorderForBackground(hex) {
   });
   return lum > 240 || a < 0.2 ? "1px solid ".concat((0, _index.token)('color.border', '#091E4224')) : undefined;
 };
+
 /**
  * Returns a box shadow formatted for CSS from a ShadowToken raw value.
  *
  * @param rawShadow - ShadowToken raw value
  */
-
-
 exports.getBorderForBackground = getBorderForBackground;
-
 var getBoxShadow = function getBoxShadow(rawShadow) {
   return rawShadow.map(function (_ref2) {
     var radius = _ref2.radius,
-        offset = _ref2.offset,
-        color = _ref2.color,
-        opacity = _ref2.opacity;
-
+      offset = _ref2.offset,
+      color = _ref2.color,
+      opacity = _ref2.opacity;
     var _hexToRGBAValues4 = hexToRGBAValues(color),
-        r = _hexToRGBAValues4.r,
-        g = _hexToRGBAValues4.g,
-        b = _hexToRGBAValues4.b;
-
+      r = _hexToRGBAValues4.r,
+      g = _hexToRGBAValues4.g,
+      b = _hexToRGBAValues4.b;
     return "".concat(offset.x, "px ").concat(offset.y, "px ").concat(radius, "px rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
   }).join(',');
 };
-
 exports.getBoxShadow = getBoxShadow;

package/dist/cjs/utils/theme-loading.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadThemeCss = exports.loadAndAppendThemeCss = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _themeImportMap = _interopRequireDefault(require("../artifacts/theme-import-map"));
+var _constants = require("../constants");
+var loadAndAppendThemeCss = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
+    var themeCss, style;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!document.head.querySelector("style[".concat(_constants.THEME_DATA_ATTRIBUTE, "=\"").concat(themeId, "\"]"))) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _context.next = 4;
+            return loadThemeCss(themeId);
+          case 4:
+            themeCss = _context.sent;
+            style = document.createElement('style');
+            style.textContent = themeCss;
+            style.dataset.theme = themeId;
+            document.head.appendChild(style);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return function loadAndAppendThemeCss(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+exports.loadAndAppendThemeCss = loadAndAppendThemeCss;
+var loadThemeCss = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(themeId) {
+    var _yield$themeImportMap, themeCss;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return _themeImportMap.default[themeId]();
+          case 2:
+            _yield$themeImportMap = _context2.sent;
+            themeCss = _yield$themeImportMap.default;
+            return _context2.abrupt("return", themeCss);
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return function loadThemeCss(_x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+exports.loadThemeCss = loadThemeCss;

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeStringToObject = exports.themeObjectToString = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _themeConfig = require("../theme-config");
+var themeKinds = ['light', 'dark', 'spacing', 'typography'];
+var isThemeKind = function isThemeKind(themeKind) {
+  return themeKinds.find(function (kind) {
+    return kind === themeKind;
+  }) !== undefined;
+};
+var isThemeIds = function isThemeIds(themeId) {
+  return _themeConfig.themeIds.find(function (id) {
+    return id === themeId;
+  }) !== undefined;
+};
+var isColorMode = function isColorMode(modeId) {
+  return ['light', 'dark', 'auto'].includes(modeId);
+};
+/**
+ * Converts a string that is formatted for the `data-theme` HTML attribute
+ * to an object that can be passed to `setGlobalTheme`.
+ *
+ * @param {string} themes The themes that should be applied.
+ *
+ * @example
+ * ```
+ * themeStringToObject('dark:dark light:legacy-light spacing:spacing');
+ * // returns { dark: 'dark', light: 'legacy-light', spacing: 'spacing' }
+ * ```
+ */
+var themeStringToObject = function themeStringToObject(themeState) {
+  return themeState.split(' ').map(function (theme) {
+    return theme.split(':');
+  }).reduce(function (themeObject, _ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      kind = _ref2[0],
+      id = _ref2[1];
+    if (kind === 'colorMode' && isColorMode(id)) {
+      themeObject[kind] = id;
+    }
+    if (isThemeKind(kind) && isThemeIds(id)) {
+      themeObject[kind] = id;
+    }
+    return themeObject;
+  }, {});
+};
+
+/**
+ * Converts a theme object to a string formatted for the `data-theme` HTML attribute.
+ *
+ * @param {object} themes The themes that should be applied.
+ *
+ * @example
+ * ```
+ * themeObjectToString({ dark: 'dark', light: 'legacy-light', spacing: 'spacing' });
+ * // returns 'dark:dark light:legacy-light spacing:spacing'
+ * ```
+ */
+exports.themeStringToObject = themeStringToObject;
+var themeObjectToString = function themeObjectToString(themeState) {
+  return Object.entries(themeState).reduce(function (themeString, _ref3) {
+    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+      kind = _ref4[0],
+      id = _ref4[1];
+    return (kind === 'colorMode' || isThemeKind(kind)) && (isThemeIds(id) || isColorMode(id)) ? themeString + "".concat(themeString ? ' ' : '') + "".concat(kind, ":").concat(id) : themeString;
+  }, '');
+};
+exports.themeObjectToString = themeObjectToString;

package/dist/cjs/utils/token-ids.js

@@ -1,16 +1,12 @@
 "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.
  *
@@ -26,13 +22,15 @@ var _constants = require("../constants");
  * getCSSCustomProperty('color.background.bold.[default]')
  */
 var getCSSCustomProperty = function getCSSCustomProperty(path) {
-  var normalizedPath = typeof path === 'string' ? path.split('.') : path; // Opacity and other 'shallow' groups are more readable when not trimmed
+  var normalizedPath = typeof path === 'string' ? path.split('.') : path;
 
+  // Opacity and other 'shallow' groups are more readable when not trimmed
   var slice = _constants.CSS_VAR_FULL.includes(path[0]) ? 0 : 1;
   return "--".concat([_constants.CSS_PREFIX].concat((0, _toConsumableArray2.default)(normalizedPath.slice(slice))).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
@@ -47,16 +45,14 @@ var getCSSCustomProperty = function getCSSCustomProperty(path) {
  * // Returns color.background.bold
  * getTokenId('color.background.bold.[default]')
  */
-
-
 exports.getCSSCustomProperty = getCSSCustomProperty;
-
 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
@@ -67,12 +63,8 @@ var getTokenId = function getTokenId(path) {
  * // 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,6 +1,6 @@
 {
 	"name": "@atlaskit/tokens",
-	"version": "0.13.5",
+	"version": "1.1.0",
 	"sideEffects": [
 		"**/*.css"
 	]