@atlaskit/tokens 0.8.3 → 0.9.2

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

@@ -0,0 +1,129 @@
+"use strict";
+
+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 {
+    r: parseInt(hexColor.slice(0, 2), 16),
+    g: parseInt(hexColor.slice(2, 4), 16),
+    b: parseInt(hexColor.slice(4, 6), 16),
+    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;
+
+  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;
+  return (r * 299 + g * 587 + b * 114) / 1000;
+};
+/**
+ * Returns an accessible hard-coded text color based on the color contrast with
+ * the background.
+ *
+ * @param hex - The Hex color code of the background
+ * @param [opts.hardcodedSurface] - If set, a design token will be returned instead
+ * 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;
+
+  var lum = getLuminance({
+    r: r,
+    g: g,
+    b: b
+  });
+  var alphaLimit = 0.42;
+  var alphaConditionsPerSurface = {
+    light: a < alphaLimit,
+    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;
+
+  var lum = getLuminance({
+    r: r,
+    g: g,
+    b: b
+  });
+  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;
+
+    var _hexToRGBAValues4 = hexToRGBAValues(color),
+        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/{token-ids.js → utils/token-ids.js}

@@ -9,7 +9,7 @@ exports.getTokenId = exports.getFullyQualifiedTokenId = exports.getCSSCustomProp
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _constants = require("./constants");
+var _constants = require("../constants");
 
 /**
  * Transforms a style dictionary token path to a CSS custom property.

package/dist/cjs/version.json

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