@atlaskit/tokens 1.11.2 → 1.12.0

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

@@ -0,0 +1,202 @@
+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/tokens-raw/atlassian-dark';
+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, 15.98];
+var highLuminanceContrastRatios = [1.08, 1.24, 1.55, 1.99, 2.45, 3.34, 4.64, 6.1, 10.19, 13.43];
+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.bold': closestColorIndex,
+      'color.background.brand.bold.hovered': brandBoldSelectedHoveredIndex,
+      'color.background.brand.bold.pressed': brandBoldSelectedPressedIndex,
+      '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.bold': 6,
+      'color.background.brand.bold.hovered': 7,
+      'color.background.brand.bold.pressed': 8,
+      '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 _rawTokensDark$find;
+    var inverseTextColor = (_rawTokensDark$find = rawTokensDark.find(function (token) {
+      return token.cleanName === 'color.text.inverse';
+    })) === null || _rawTokensDark$find === void 0 ? void 0 : _rawTokensDark$find.value;
+    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);
+};

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

@@ -0,0 +1,285 @@
+/**
+ * Below lines are copied from @material/material-color-utilities.
+ * Do not modify it.
+ */
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// This file is automatically generated. Do not modify it.
+
+import * as mathUtils from './math-utils';
+
+/**
+ * Color science utilities.
+ *
+ * Utility methods for color science constants and color space
+ * conversions that aren't HCT or CAM16.
+ */
+
+var SRGB_TO_XYZ = [[0.41233895, 0.35762064, 0.18051042], [0.2126, 0.7152, 0.0722], [0.01932141, 0.11916382, 0.95034478]];
+var XYZ_TO_SRGB = [[3.2413774792388685, -1.5376652402851851, -0.49885366846268053], [-0.9691452513005321, 1.8758853451067872, 0.04156585616912061], [0.05562093689691305, -0.20395524564742123, 1.0571799111220335]];
+var WHITE_POINT_D65 = [95.047, 100.0, 108.883];
+
+/**
+ * Converts a color from RGB components to ARGB format.
+ */
+export function argbFromRgb(red, green, blue) {
+  return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255) >>> 0;
+}
+
+/**
+ * Converts a color from linear RGB components to ARGB format.
+ */
+export function argbFromLinrgb(linrgb) {
+  var r = delinearized(linrgb[0]);
+  var g = delinearized(linrgb[1]);
+  var b = delinearized(linrgb[2]);
+  return argbFromRgb(r, g, b);
+}
+
+/**
+ * Returns the alpha component of a color in ARGB format.
+ */
+export function alphaFromArgb(argb) {
+  return argb >> 24 & 255;
+}
+
+/**
+ * Returns the red component of a color in ARGB format.
+ */
+export function redFromArgb(argb) {
+  return argb >> 16 & 255;
+}
+
+/**
+ * Returns the green component of a color in ARGB format.
+ */
+export function greenFromArgb(argb) {
+  return argb >> 8 & 255;
+}
+
+/**
+ * Returns the blue component of a color in ARGB format.
+ */
+export function blueFromArgb(argb) {
+  return argb & 255;
+}
+
+/**
+ * Returns whether a color in ARGB format is opaque.
+ */
+export function isOpaque(argb) {
+  return alphaFromArgb(argb) >= 255;
+}
+
+/**
+ * Converts a color from ARGB to XYZ.
+ */
+export function argbFromXyz(x, y, z) {
+  var matrix = XYZ_TO_SRGB;
+  var linearR = matrix[0][0] * x + matrix[0][1] * y + matrix[0][2] * z;
+  var linearG = matrix[1][0] * x + matrix[1][1] * y + matrix[1][2] * z;
+  var linearB = matrix[2][0] * x + matrix[2][1] * y + matrix[2][2] * z;
+  var r = delinearized(linearR);
+  var g = delinearized(linearG);
+  var b = delinearized(linearB);
+  return argbFromRgb(r, g, b);
+}
+
+/**
+ * Converts a color from XYZ to ARGB.
+ */
+export function xyzFromArgb(argb) {
+  var r = linearized(redFromArgb(argb));
+  var g = linearized(greenFromArgb(argb));
+  var b = linearized(blueFromArgb(argb));
+  return mathUtils.matrixMultiply([r, g, b], SRGB_TO_XYZ);
+}
+
+/**
+ * Converts an L* value to an ARGB representation.
+ *
+ * @param lstar L* in L*a*b*
+ * @return ARGB representation of grayscale color with lightness
+ * matching L*
+ */
+export function argbFromLstar(lstar) {
+  var y = yFromLstar(lstar);
+  var component = delinearized(y);
+  return argbFromRgb(component, component, component);
+}
+
+/**
+ * Computes the L* value of a color in ARGB representation.
+ *
+ * @param argb ARGB representation of a color
+ * @return L*, from L*a*b*, coordinate of the color
+ */
+export function lstarFromArgb(argb) {
+  var y = xyzFromArgb(argb)[1];
+  return 116.0 * labF(y / 100.0) - 16.0;
+}
+
+/**
+ * Converts an L* value to a Y value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ *
+ * @param lstar L* in L*a*b*
+ * @return Y in XYZ
+ */
+export function yFromLstar(lstar) {
+  return 100.0 * labInvf((lstar + 16.0) / 116.0);
+}
+
+/**
+ * Converts a Y value to an L* value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ *
+ * @param y Y in XYZ
+ * @return L* in L*a*b*
+ */
+export function lstarFromY(y) {
+  return labF(y / 100.0) * 116.0 - 16.0;
+}
+
+/**
+ * Linearizes an RGB component.
+ *
+ * @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
+ * channel
+ * @return 0.0 <= output <= 100.0, color channel converted to
+ * linear RGB space
+ */
+export function linearized(rgbComponent) {
+  var normalized = rgbComponent / 255.0;
+  if (normalized <= 0.040449936) {
+    return normalized / 12.92 * 100.0;
+  } else {
+    return Math.pow((normalized + 0.055) / 1.055, 2.4) * 100.0;
+  }
+}
+
+/**
+ * Delinearizes an RGB component.
+ *
+ * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
+ * linear R/G/B channel
+ * @return 0 <= output <= 255, color channel converted to regular
+ * RGB space
+ */
+export function delinearized(rgbComponent) {
+  var normalized = rgbComponent / 100.0;
+  var delinearized = 0.0;
+  if (normalized <= 0.0031308) {
+    delinearized = normalized * 12.92;
+  } else {
+    delinearized = 1.055 * Math.pow(normalized, 1.0 / 2.4) - 0.055;
+  }
+  return mathUtils.clampInt(0, 255, Math.round(delinearized * 255.0));
+}
+
+/**
+ * Returns the standard white point; white on a sunny day.
+ *
+ * @return The white point
+ */
+export function whitePointD65() {
+  return WHITE_POINT_D65;
+}
+
+/**
+ * RGBA component
+ *
+ * @param r Red value should be between 0-255
+ * @param g Green value should be between 0-255
+ * @param b Blue value should be between 0-255
+ * @param a Alpha value should be between 0-255
+ */
+
+/**
+ * Return RGBA from a given int32 color
+ *
+ * @param argb ARGB representation of a int32 color.
+ * @return RGBA representation of a int32 color.
+ */
+export function rgbaFromArgb(argb) {
+  var r = redFromArgb(argb);
+  var g = greenFromArgb(argb);
+  var b = blueFromArgb(argb);
+  var a = alphaFromArgb(argb);
+  return {
+    r: r,
+    g: g,
+    b: b,
+    a: a
+  };
+}
+
+/**
+ * Return int32 color from a given RGBA component
+ *
+ * @param rgba RGBA representation of a int32 color.
+ * @returns ARGB representation of a int32 color.
+ */
+export function argbFromRgba(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b,
+    a = _ref.a;
+  var rValue = clampComponent(r);
+  var gValue = clampComponent(g);
+  var bValue = clampComponent(b);
+  var aValue = clampComponent(a);
+  return aValue << 24 | rValue << 16 | gValue << 8 | bValue;
+}
+function clampComponent(value) {
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 255) {
+    return 255;
+  }
+  return value;
+}
+function labF(t) {
+  var e = 216.0 / 24389.0;
+  var kappa = 24389.0 / 27.0;
+  if (t > e) {
+    return Math.pow(t, 1.0 / 3.0);
+  } else {
+    return (kappa * t + 16) / 116;
+  }
+}
+function labInvf(ft) {
+  var e = 216.0 / 24389.0;
+  var kappa = 24389.0 / 27.0;
+  var ft3 = ft * ft * ft;
+  if (ft3 > e) {
+    return ft3;
+  } else {
+    return (116 * ft - 16) / kappa;
+  }
+}

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

@@ -0,0 +1,181 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+/**
+ * Below lines are copied from @material/material-color-utilities.
+ * Do not modify it.
+ */
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable:class-as-namespace
+
+import * as utils from './color-utils';
+import * as math from './math-utils';
+
+/**
+ * Utility methods for calculating contrast given two colors, or calculating a
+ * color given one color and a contrast ratio.
+ *
+ * Contrast ratio is calculated using XYZ's Y. When linearized to match human
+ * perception, Y becomes HCT's tone and L*a*b*'s' L*. Informally, this is the
+ * lightness of a color.
+ *
+ * Methods refer to tone, T in the the HCT color space.
+ * Tone is equivalent to L* in the L*a*b* color space, or L in the LCH color
+ * space.
+ */
+export var Contrast = /*#__PURE__*/function () {
+  function Contrast() {
+    _classCallCheck(this, Contrast);
+  }
+  _createClass(Contrast, null, [{
+    key: "ratioOfTones",
+    value:
+    /**
+     * Returns a contrast ratio, which ranges from 1 to 21.
+     *
+     * @param toneA Tone between 0 and 100. Values outside will be clamped.
+     * @param toneB Tone between 0 and 100. Values outside will be clamped.
+     */
+    function ratioOfTones(toneA, toneB) {
+      toneA = math.clampDouble(0.0, 100.0, toneA);
+      toneB = math.clampDouble(0.0, 100.0, toneB);
+      return Contrast.ratioOfYs(utils.yFromLstar(toneA), utils.yFromLstar(toneB));
+    }
+  }, {
+    key: "ratioOfYs",
+    value: function ratioOfYs(y1, y2) {
+      var lighter = y1 > y2 ? y1 : y2;
+      var darker = lighter === y2 ? y1 : y2;
+      return (lighter + 5.0) / (darker + 5.0);
+    }
+
+    /**
+     * Returns a tone >= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns -1 if ratio cannot be achieved with tone parameter.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in -1 being returned.
+     * @param ratio Contrast ratio of return value and tone.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+  }, {
+    key: "lighter",
+    value: function lighter(tone, ratio) {
+      if (tone < 0.0 || tone > 100.0) {
+        return -1.0;
+      }
+      var darkY = utils.yFromLstar(tone);
+      var lightY = ratio * (darkY + 5.0) - 5.0;
+      var realContrast = Contrast.ratioOfYs(lightY, darkY);
+      var delta = Math.abs(realContrast - ratio);
+      if (realContrast < ratio && delta > 0.04) {
+        return -1;
+      }
+
+      // Ensure gamut mapping, which requires a 'range' on tone, will still result
+      // the correct ratio by darkening slightly.
+      var returnValue = utils.lstarFromY(lightY) + 0.4;
+      if (returnValue < 0 || returnValue > 100) {
+        return -1;
+      }
+      return returnValue;
+    }
+
+    /**
+     * Returns a tone <= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns -1 if ratio cannot be achieved with tone parameter.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in -1 being returned.
+     * @param ratio Contrast ratio of return value and tone.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+  }, {
+    key: "darker",
+    value: function darker(tone, ratio) {
+      if (tone < 0.0 || tone > 100.0) {
+        return -1.0;
+      }
+      var lightY = utils.yFromLstar(tone);
+      var darkY = (lightY + 5.0) / ratio - 5.0;
+      var realContrast = Contrast.ratioOfYs(lightY, darkY);
+      var delta = Math.abs(realContrast - ratio);
+      if (realContrast < ratio && delta > 0.04) {
+        return -1;
+      }
+
+      // Ensure gamut mapping, which requires a 'range' on tone, will still result
+      // the correct ratio by darkening slightly.
+      var returnValue = utils.lstarFromY(darkY) - 0.4;
+      if (returnValue < 0 || returnValue > 100) {
+        return -1;
+      }
+      return returnValue;
+    }
+
+    /**
+     * Returns a tone >= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns 100 if ratio cannot be achieved with tone parameter.
+     *
+     * This method is unsafe because the returned value is guaranteed to be in
+     * bounds for tone, i.e. between 0 and 100. However, that value may not reach
+     * the ratio with tone. For example, there is no color lighter than T100.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in 100 being returned.
+     * @param ratio Desired contrast ratio of return value and tone parameter.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+  }, {
+    key: "lighterUnsafe",
+    value: function lighterUnsafe(tone, ratio) {
+      var lighterSafe = Contrast.lighter(tone, ratio);
+      return lighterSafe < 0.0 ? 100.0 : lighterSafe;
+    }
+
+    /**
+     * Returns a tone >= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns 100 if ratio cannot be achieved with tone parameter.
+     *
+     * This method is unsafe because the returned value is guaranteed to be in
+     * bounds for tone, i.e. between 0 and 100. However, that value may not reach
+     * the [ratio with [tone]. For example, there is no color darker than T0.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in 0 being returned.
+     * @param ratio Desired contrast ratio of return value and tone parameter.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+  }, {
+    key: "darkerUnsafe",
+    value: function darkerUnsafe(tone, ratio) {
+      var darkerSafe = Contrast.darker(tone, ratio);
+      return darkerSafe < 0.0 ? 0.0 : darkerSafe;
+    }
+  }]);
+  return Contrast;
+}();