@atlaskit/tokens 1.11.3 → 1.13.0

package/dist/esm/utils/color-utils.js

@@ -0,0 +1,162 @@
+// valid hex color with 6 digits
+export var isValidBrandHex = function isValidBrandHex(hex) {
+  return /^#[0-9A-F]{6}$/i.test(hex);
+};
+
+// valid hex color with 4, 6 or 8 digits
+var isValidHex = function isValidHex(hex) {
+  return /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+};
+export function rgbToHex(r, g, b) {
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+export function getAlpha(hex) {
+  if (hex.length === 9) {
+    var int = parseInt(hex.slice(7, 9), 16) / 255;
+    return Number(parseFloat(int.toString()).toFixed(2));
+  }
+  return 1;
+}
+export function hexToRgbA(hex) {
+  if (!isValidHex(hex)) {
+    throw new Error('Invalid HEX');
+  }
+  var c;
+  c = hex.substring(1).split('');
+  if (c.length === 3) {
+    c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+  }
+  c = '0x' + c.join('');
+  return [c >> 16 & 255, c >> 8 & 255, c & 255, getAlpha(hex)];
+}
+export function hexToRgb(hex) {
+  if (!isValidHex(hex)) {
+    throw new Error('Invalid HEX');
+  }
+  var c;
+  c = hex.substring(1).split('');
+  if (c.length === 3) {
+    c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+  }
+  c = '0x' + c.join('');
+  return [c >> 16 & 255, c >> 8 & 255, c & 255];
+}
+export function hexToHSL(hex) {
+  if (!isValidHex(hex)) {
+    throw new Error('Invalid HEX');
+  }
+  var r = 0,
+    g = 0,
+    b = 0;
+  if (hex.length === 4) {
+    r = '0x' + hex[1] + hex[1];
+    g = '0x' + hex[2] + hex[2];
+    b = '0x' + hex[3] + hex[3];
+  } else if (hex.length === 7) {
+    r = '0x' + hex[1] + hex[2];
+    g = '0x' + hex[3] + hex[4];
+    b = '0x' + hex[5] + hex[6];
+  }
+  // Then to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  var cmin = Math.min(r, g, b),
+    cmax = Math.max(r, g, b),
+    delta = cmax - cmin,
+    h = 0,
+    s = 0,
+    l = 0;
+  if (delta === 0) {
+    h = 0;
+  } else if (cmax === r) {
+    h = (g - b) / delta % 6;
+  } else if (cmax === g) {
+    h = (b - r) / delta + 2;
+  } else {
+    h = (r - g) / delta + 4;
+  }
+  h = Math.round(h * 60);
+  if (h < 0) {
+    h += 360;
+  }
+  l = (cmax + cmin) / 2;
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+  return [h, s, l];
+}
+export function HSLToRGB(h, s, l) {
+  s /= 100;
+  l /= 100;
+  var k = function k(n) {
+    return (n + h / 30) % 12;
+  };
+  var a = s * Math.min(l, 1 - l);
+  var f = function f(n) {
+    return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  };
+  return [255 * f(0), 255 * f(8), 255 * f(4)];
+}
+export function relativeLuminanceW3C(r, g, b) {
+  var RsRGB = r / 255;
+  var GsRGB = g / 255;
+  var BsRGB = b / 255;
+  var R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+  var G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+  var B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+
+  // For the sRGB colorspace, the relative luminance of a color is defined as:
+  var L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  return L;
+}
+export function getContrastRatio(foreground, background) {
+  if (!isValidHex(foreground) || !isValidHex(background)) {
+    throw new Error('Invalid HEX');
+  }
+  var foregroundRgb = hexToRgb(foreground);
+  var backgroundRgb = hexToRgb(background);
+  var foregroundLuminance = relativeLuminanceW3C(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
+  var backgroundLuminance = relativeLuminanceW3C(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
+  // calculate the color contrast ratio
+  var brightest = Math.max(foregroundLuminance, backgroundLuminance);
+  var darkest = Math.min(foregroundLuminance, backgroundLuminance);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+export function deltaE(rgbA, rgbB) {
+  var labA = rgbToLab(rgbA);
+  var labB = rgbToLab(rgbB);
+  var deltaL = labA[0] - labB[0];
+  var deltaA = labA[1] - labB[1];
+  var deltaB = labA[2] - labB[2];
+  var c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+  var c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+  var deltaC = c1 - c2;
+  var deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+  deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+  var sc = 1.0 + 0.045 * c1;
+  var sh = 1.0 + 0.015 * c1;
+  var deltaLKlsl = deltaL / 1.0;
+  var deltaCkcsc = deltaC / sc;
+  var deltaHkhsh = deltaH / sh;
+  var i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
+  return i < 0 ? 0 : Math.sqrt(i);
+}
+function rgbToLab(rgb) {
+  var r = rgb[0] / 255,
+    g = rgb[1] / 255,
+    b = rgb[2] / 255,
+    x,
+    y,
+    z;
+  r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+  g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+  b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+  x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+  y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
+  z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+  x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+  y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+  z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+}

package/dist/esm/utils/custom-theme-loading-utils.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import tokens from '../artifacts/token-names';
+import { CUSTOM_THEME_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from '../constants';
+import { hash } from './hash';
+export function findMissingCustomStyleElements(UNSAFE_themeOptions, mode) {
+  var optionString = JSON.stringify(UNSAFE_themeOptions);
+  var uniqueId = hash(optionString);
+  var attrOfMissingCustomStyles = [];
+  (mode === 'auto' ? ['light', 'dark'] : [mode]).forEach(function (themeId) {
+    var element = document.head.querySelector("style[".concat(CUSTOM_THEME_ATTRIBUTE, "=\"").concat(uniqueId, "\"][").concat(THEME_DATA_ATTRIBUTE, "=\"").concat(themeId, "\"]"));
+    if (element) {
+      // Append the existing custom styles to take precedence over others
+      document.head.appendChild(element);
+    } else {
+      attrOfMissingCustomStyles.push(themeId);
+    }
+  });
+  return attrOfMissingCustomStyles;
+}
+export function limitSizeOfCustomStyleElements(sizeThreshold) {
+  var styleTags = _toConsumableArray(document.head.querySelectorAll("style[".concat(CUSTOM_THEME_ATTRIBUTE, "][").concat(THEME_DATA_ATTRIBUTE, "]")));
+  if (styleTags.length < sizeThreshold) {
+    return;
+  }
+  styleTags.slice(0, styleTags.length - (sizeThreshold - 1)).forEach(function (element) {
+    return element.remove();
+  });
+}
+export function reduceTokenMap(tokenMap, themeRamp) {
+  return Object.entries(tokenMap).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    var cssVar = tokens[key];
+    return cssVar ? "".concat(acc, "\n  ").concat(cssVar, ": ").concat(themeRamp[value], ";") : acc;
+  }, '');
+}

package/dist/esm/utils/custom-theme-token-contrast-check.js

@@ -0,0 +1,65 @@
+import tokenValuesDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
+import tokenValuesLight from '../artifacts/atlassian-light-token-value-for-contrast-check';
+import { getContrastRatio } from './color-utils';
+export var additionalChecks = [{
+  foreground: 'color.text.brand',
+  backgroundLight: 'elevation.surface.sunken',
+  backgroundDark: 'elevation.surface.overlay',
+  desiredContrast: 4.5,
+  updatedTokens: [
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base token
+  'color.text.brand', 'color.text.selected', 'color.link', 'color.link.pressed', 'color.icon.brand', 'color.icon.selected']
+}, {
+  foreground: 'color.text.selected',
+  backgroundLight: 'color.background.selected',
+  backgroundDark: 'color.background.selected',
+  desiredContrast: 4.5,
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base token
+  updatedTokens: ['color.text.selected', 'color.icon.selected']
+}, {
+  foreground: 'color.border.brand',
+  backgroundLight: 'elevation.surface.sunken',
+  backgroundDark: 'elevation.surface.overlay',
+  desiredContrast: 3,
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base toke
+  updatedTokens: ['color.border.brand', 'color.border.selected']
+}, {
+  foreground: 'color.chart.brand',
+  backgroundLight: 'elevation.surface.sunken',
+  backgroundDark: 'elevation.surface.overlay',
+  desiredContrast: 3,
+  // In light mode: darken the following tokens by one base token
+  // In dark mode: lighten the following tokens by one base token
+  updatedTokens: ['color.chart.brand', 'color.chart.brand.hovered']
+}];
+var getColorFromTokenRaw = function getColorFromTokenRaw(tokenName, mode) {
+  return mode === 'light' ? tokenValuesLight[tokenName] : tokenValuesDark[tokenName];
+};
+export var additionalContrastChecker = function additionalContrastChecker(_ref) {
+  var customThemeTokenMap = _ref.customThemeTokenMap,
+    mode = _ref.mode,
+    themeRamp = _ref.themeRamp;
+  var updatedCustomThemeTokenMap = {};
+  var brandTokens = Object.keys(customThemeTokenMap);
+  additionalChecks.forEach(function (pairing) {
+    var backgroundLight = pairing.backgroundLight,
+      backgroundDark = pairing.backgroundDark,
+      foreground = pairing.foreground,
+      desiredContrast = pairing.desiredContrast,
+      updatedTokens = pairing.updatedTokens;
+    var background = mode === 'light' ? backgroundLight : backgroundDark;
+    var foregroundColor = brandTokens.includes(foreground) ? themeRamp[customThemeTokenMap[foreground]] : getColorFromTokenRaw(foreground, mode);
+    var backgroundColor = brandTokens.includes(background) ? themeRamp[customThemeTokenMap[background]] : getColorFromTokenRaw(background, mode);
+    var contrast = getContrastRatio(foregroundColor, backgroundColor);
+    if (contrast <= desiredContrast) {
+      updatedTokens.forEach(function (token) {
+        var rampValue = customThemeTokenMap[token];
+        updatedCustomThemeTokenMap[token] = mode === 'light' ? rampValue + 1 : rampValue - 1;
+      });
+    }
+  });
+  return updatedCustomThemeTokenMap;
+};

package/dist/esm/utils/generate-custom-color-ramp.js

@@ -0,0 +1,211 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import rawTokensDark from '../artifacts/atlassian-dark-token-value-for-contrast-check';
+import { deltaE, getContrastRatio, hexToHSL, hexToRgb, hexToRgbA, HSLToRGB, relativeLuminanceW3C, rgbToHex } from './color-utils';
+import { additionalContrastChecker } from './custom-theme-token-contrast-check';
+import { argbFromRgba, Contrast, Hct, rgbaFromArgb } from './hct-color-utils';
+var lowLuminanceContrastRatios = [1.12, 1.33, 2.03, 2.73, 3.33, 4.27, 5.2, 6.62, 12.46, 14.25];
+var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 12.6];
+export var getClosestColorIndex = function getClosestColorIndex(themeRamp, brandColor) {
+  // Iterate over themeRamp and find whichever color is closest to brandColor
+  var closestColorIndex = 0;
+  var closestColorDistance = null;
+  themeRamp.forEach(function (value, index) {
+    var distance = deltaE(hexToRgb(value), hexToRgb(brandColor));
+    if (closestColorDistance === null || distance < closestColorDistance) {
+      closestColorIndex = index;
+      closestColorDistance = distance;
+    }
+  });
+  return closestColorIndex;
+};
+export var generateColors = function generateColors(brandColor) {
+  // Determine luminance
+  var HSLBrandColorHue = hexToHSL(brandColor)[0];
+  var baseRgb = HSLToRGB(HSLBrandColorHue, 100, 60);
+  var isLowLuminance = relativeLuminanceW3C(baseRgb[0], baseRgb[1], baseRgb[2]) < 0.4;
+  // Choose right palette
+  var themeRatios = isLowLuminance ? lowLuminanceContrastRatios : highLuminanceContrastRatios;
+  var brandRgba = hexToRgbA(brandColor);
+  var hctColor = Hct.fromInt(argbFromRgba({
+    r: brandRgba[0],
+    g: brandRgba[1],
+    b: brandRgba[2],
+    a: brandRgba[3]
+  }));
+  var themeRamp = themeRatios.map(function (contrast) {
+    var rgbaColor = rgbaFromArgb(Hct.from(hctColor.hue, hctColor.chroma, Contrast.darker(100, contrast) + 0.25 // Material's utils provide an offset
+    ).toInt());
+    return rgbToHex(rgbaColor.r, rgbaColor.g, rgbaColor.b);
+  });
+  var closestColorIndex = getClosestColorIndex(themeRamp, brandColor);
+
+  // Replace closet color with brandColor
+  var updatedThemeRamp = _toConsumableArray(themeRamp);
+  updatedThemeRamp[closestColorIndex] = brandColor;
+  return updatedThemeRamp;
+};
+
+/**
+ * Return the interaction tokens for a color, given its ramp position and the number of
+ * needed interaction states. Use higher-indexed colors (i.e. darker colors) if possible;
+ * if there's not enough room to shift up for the required number of interaction tokens,
+ * it goes as far as it can, then returns lighter colors lower down the ramp instead.
+ *
+ * Returns an array of the resulting colors
+ */
+function getInteractionStates(rampPosition, number, colors) {
+  var result = [];
+  for (var i = 1; i <= number; i++) {
+    if (rampPosition + i < colors.length) {
+      result.push(rampPosition + i);
+    } else {
+      result.push(rampPosition - (i - (colors.length - 1 - rampPosition)));
+    }
+  }
+  return result;
+}
+export var generateTokenMap = function generateTokenMap(brandColor, mode, themeRamp) {
+  var colors = themeRamp || generateColors(brandColor);
+  var closestColorIndex = getClosestColorIndex(colors, brandColor);
+  var customThemeTokenMapLight = {};
+  var customThemeTokenMapDark = {};
+  var inputContrast = getContrastRatio(brandColor, '#FFFFFF');
+  // Branch based on brandColor's contrast against white
+  if (inputContrast >= 4.5) {
+    /**
+     * Generate interaction tokens for
+     * - color.background.brand.bold
+     * - color.background.selected.bold
+     */
+    var _getInteractionStates = getInteractionStates(closestColorIndex, 2, colors),
+      _getInteractionStates2 = _slicedToArray(_getInteractionStates, 2),
+      brandBoldSelectedHoveredIndex = _getInteractionStates2[0],
+      brandBoldSelectedPressedIndex = _getInteractionStates2[1];
+
+    /**
+     * Generate interaction token for color.link:
+     * If inputted color replaces X1000
+     * - Pressed = X900
+     *
+     * If inputted color replaces X700-X900
+     * - Shift one 1 step darker
+     */
+    var _getInteractionStates3 = getInteractionStates(closestColorIndex, 1, colors),
+      _getInteractionStates4 = _slicedToArray(_getInteractionStates3, 1),
+      linkPressed = _getInteractionStates4[0];
+    customThemeTokenMapLight = {
+      'color.text.brand': closestColorIndex,
+      'color.icon.brand': closestColorIndex,
+      'color.background.brand.subtlest': 0,
+      'color.background.brand.subtlest.hovered': 1,
+      'color.background.brand.subtlest.pressed': 2,
+      'color.background.brand.bold': closestColorIndex,
+      'color.background.brand.bold.hovered': brandBoldSelectedHoveredIndex,
+      'color.background.brand.bold.pressed': brandBoldSelectedPressedIndex,
+      'color.background.brand.boldest': 9,
+      'color.background.brand.boldest.hovered': 8,
+      'color.background.brand.boldest.pressed': 7,
+      'color.border.brand': closestColorIndex,
+      'color.text.selected': closestColorIndex,
+      'color.icon.selected': closestColorIndex,
+      'color.background.selected.bold': closestColorIndex,
+      'color.background.selected.bold.hovered': brandBoldSelectedHoveredIndex,
+      'color.background.selected.bold.pressed': brandBoldSelectedPressedIndex,
+      'color.border.selected': closestColorIndex,
+      'color.link': closestColorIndex,
+      'color.link.pressed': linkPressed,
+      'color.chart.brand': 5,
+      'color.chart.brand.hovered': 6,
+      'color.background.selected': 0,
+      'color.background.selected.hovered': 1,
+      'color.background.selected.pressed': 2
+    };
+  } else {
+    customThemeTokenMapLight = {
+      'color.background.brand.subtlest': 0,
+      'color.background.brand.subtlest.hovered': 1,
+      'color.background.brand.subtlest.pressed': 2,
+      'color.background.brand.bold': 6,
+      'color.background.brand.bold.hovered': 7,
+      'color.background.brand.bold.pressed': 8,
+      'color.background.brand.boldest': 9,
+      'color.background.brand.boldest.hovered': 8,
+      'color.background.brand.boldest.pressed': 7,
+      'color.border.brand': 6,
+      'color.background.selected.bold': 6,
+      'color.background.selected.bold.hovered': 7,
+      'color.background.selected.bold.pressed': 8,
+      'color.text.brand': 6,
+      'color.icon.brand': 6,
+      'color.chart.brand': 5,
+      'color.chart.brand.hovered': 6,
+      'color.text.selected': 6,
+      'color.icon.selected': 6,
+      'color.border.selected': 6,
+      'color.background.selected': 0,
+      'color.background.selected.hovered': 1,
+      'color.background.selected.pressed': 2,
+      'color.link': 6,
+      'color.link.pressed': 7
+    };
+  }
+  if (mode === 'light') {
+    return {
+      light: customThemeTokenMapLight
+    };
+  }
+
+  /**
+   * Generate dark mode values using rule of symmetry
+   */
+  Object.entries(customThemeTokenMapLight).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    customThemeTokenMapDark[key] = 9 - value;
+  });
+
+  /**
+   * If the input brand color < 4.5, and it meets 4.5 contrast again inverse text color
+   * in dark mode, shift color.background.brand.bold to the brand color
+   */
+  if (inputContrast < 4.5) {
+    var inverseTextColor = rawTokensDark['color.text.inverse'];
+    if (getContrastRatio(inverseTextColor, brandColor) >= 4.5 && closestColorIndex >= 2) {
+      customThemeTokenMapDark['color.background.brand.bold'] = closestColorIndex;
+      customThemeTokenMapDark['color.background.brand.bold.hovered'] = closestColorIndex - 1;
+      customThemeTokenMapDark['color.background.brand.bold.pressed'] = closestColorIndex - 2;
+    }
+  }
+  if (mode === 'dark') {
+    return {
+      dark: customThemeTokenMapDark
+    };
+  }
+  return {
+    light: customThemeTokenMapLight,
+    dark: customThemeTokenMapDark
+  };
+};
+export var generateTokenMapWithContrastCheck = function generateTokenMapWithContrastCheck(brandColor, mode, themeRamp) {
+  var colors = themeRamp || generateColors(brandColor);
+  var tokenMaps = generateTokenMap(brandColor, mode, colors);
+  var result = {};
+  Object.entries(tokenMaps).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      mode = _ref4[0],
+      map = _ref4[1];
+    if (mode === 'light' || mode === 'dark') {
+      result[mode] = _objectSpread(_objectSpread({}, map), additionalContrastChecker({
+        customThemeTokenMap: map,
+        mode: mode,
+        themeRamp: colors
+      }));
+    }
+  });
+  return result;
+};

package/dist/esm/utils/hash.js

@@ -0,0 +1,10 @@
+export var hash = function hash(str) {
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    var char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash &= hash; // Convert to 32bit integer
+  }
+
+  return new Uint32Array([hash])[0].toString(36);
+};