bootstrap-rn 0.3.0 → 0.3.2

package/src/style/transform/index.js

@@ -0,0 +1,155 @@
+import { Platform } from 'react-native';
+import { getPropertyName, getStylesForProperty } from 'css-to-react-native';
+import rem from './rem';
+import formula from './formula';
+import rgba from './rgba';
+import backgroundSize from './properties/backgroundSize';
+import backgroundPosition from './properties/backgroundPosition';
+import backgroundPositionX from './properties/backgroundPositionX';
+import backgroundPositionY from './properties/backgroundPositionY';
+
+const urlRE = /^url\(.*?\)$/g;
+
+const applyVariables = (variables, key, value) =>
+  typeof value === 'function' ? value(variables, key) : value;
+
+const applyTransforms = (result) => {
+  // Do not transform values that belong to an url().
+  if (result.match(urlRE)) {
+    return result;
+  }
+
+  return rgba(formula(rem(result)));
+};
+
+const resolveValue = (value, definition, theme, options) => {
+  const variables = options.preferTheme
+    ? { ...definition.variables, ...theme }
+    : { ...theme, ...definition.variables };
+
+  // If there is only one part, we allow other results than strings as well.
+  if (value.length === 1) {
+    const result = applyVariables(variables, options.key, value[0]);
+
+    return typeof result === 'string' ? applyTransforms(result) : result;
+  }
+
+  const stringifiedResult = value.reduce(
+    (previous, current) =>
+      `${previous}${applyVariables(variables, options.key, current)}`,
+    '',
+  );
+
+  return applyTransforms(stringifiedResult);
+};
+
+export default function transform(
+  children,
+  theme,
+  options = {},
+  scopes = [],
+  variables = {},
+) {
+  let definitions = [
+    {
+      scopes,
+      declarations: {},
+      variables: { ...variables },
+    },
+  ];
+
+  children.forEach((child) => {
+    if (child.type === 'variable' || child.type === 'declaration') {
+      // Transform value to react native compatible value.
+      const value = resolveValue(child.value, definitions[0], theme, options);
+
+      if (child.type === 'variable') {
+        definitions[0].variables[child.name] = value;
+      }
+
+      // Only add value if value is not null.
+      if (child.type === 'declaration' && value !== 'null') {
+        if (child.name === 'box-shadow') {
+          if (Platform.OS === 'web') {
+            Object.assign(definitions[0].declarations, {
+              boxShadow: value,
+            });
+          }
+        } else if (child.name === 'margin-vertical') {
+          Object.assign(definitions[0].declarations, {
+            ...getStylesForProperty('marginTop', value),
+            ...getStylesForProperty('marginBottom', value),
+          });
+        } else if (child.name === 'margin-horizontal') {
+          // Among other things workaround for react-native issue #350
+          // https://github.com/facebook/react-native/issues/350#issuecomment-375238958
+          Object.assign(definitions[0].declarations, {
+            ...getStylesForProperty('marginLeft', value),
+            ...getStylesForProperty('marginRight', value),
+          });
+        } else if (child.name === 'padding-vertical') {
+          Object.assign(definitions[0].declarations, {
+            ...getStylesForProperty('paddingTop', value),
+            ...getStylesForProperty('paddingBottom', value),
+          });
+        } else if (child.name === 'padding-horizontal') {
+          Object.assign(definitions[0].declarations, {
+            ...getStylesForProperty('paddingLeft', value),
+            ...getStylesForProperty('paddingRight', value),
+          });
+        } else if (child.name === 'background-size') {
+          Object.assign(definitions[0].declarations, backgroundSize(value));
+        } else if (child.name === 'background-position') {
+          Object.assign(definitions[0].declarations, backgroundPosition(value));
+        } else if (child.name === 'background-position-x') {
+          Object.assign(
+            definitions[0].declarations,
+            backgroundPositionX(value),
+          );
+        } else if (child.name === 'background-position-y') {
+          Object.assign(
+            definitions[0].declarations,
+            backgroundPositionY(value),
+          );
+        } else if (
+          child.name === 'border-color' &&
+          value.split(' ').length === 1
+        ) {
+          // Workaround for react-native issue #19981
+          // https://github.com/facebook/react-native/issues/19981
+          Object.assign(definitions[0].declarations, {
+            borderColor: value,
+          });
+        } else {
+          // TODO: Pre-process css-to-react-native transformation, so that we only
+          // need to insert theme variables here.
+          Object.assign(
+            definitions[0].declarations,
+            getStylesForProperty(getPropertyName(child.name), value),
+          );
+        }
+      }
+    }
+
+    if (child.type === 'block') {
+      definitions = definitions.concat(
+        transform(
+          child.children,
+          theme,
+          options,
+          // Add child scopes to current scopes.
+          [...scopes, ...child.scopes],
+          // Pass down variables, so that we can extend them.
+          definitions[0].variables,
+        ),
+      );
+    }
+  });
+
+  // Filter empty definitions and return.
+  return definitions.filter(
+    (definition) =>
+      Object.keys(definition.declarations).length > 0 ||
+      Object.keys(definition.variables).length > 0,
+  );
+}

package/src/style/transform/properties/backgroundPosition.js

@@ -0,0 +1,59 @@
+import { transformRawValue } from 'css-to-react-native';
+
+const positionRE = /(top|right|bottom|left|center)/;
+
+const sortPairs = (first, second) => {
+  const firstValue = {
+    position: first[0],
+    offset: first[1]
+      ? transformRawValue('backgroundPosition', first[1])
+      : undefined,
+  };
+  const secondValue = {
+    position: second[0],
+    offset: second[1]
+      ? transformRawValue('backgroundPosition', second[1])
+      : undefined,
+  };
+
+  const shouldReversePairs =
+    first[0] === 'top' ||
+    first[0] === 'bottom' ||
+    second[0] === 'left' ||
+    second[0] === 'right';
+
+  return shouldReversePairs
+    ? [secondValue, firstValue]
+    : [firstValue, secondValue];
+};
+
+// Spec: https://w3c.github.io/csswg-drafts/css-backgrounds-3/#background-position
+export default function backgroundPosition(value) {
+  const values = value.split(' ');
+  const [first, second = 'center', third, fourth] = values;
+
+  if (values.length <= 2) {
+    const [x, y] = sortPairs(
+      first.match(positionRE) ? [first] : ['left', first],
+      second.match(positionRE) ? [second] : ['top', second],
+    );
+
+    return {
+      backgroundPositionX: x,
+      backgroundPositionY: y,
+    };
+  }
+
+  if (values.length <= 4) {
+    const [x, y] = second.match(positionRE)
+      ? sortPairs([first], [second, third])
+      : sortPairs([first, second], [third, fourth]);
+
+    return {
+      backgroundPositionX: x,
+      backgroundPositionY: y,
+    };
+  }
+
+  return null;
+}

package/src/style/transform/properties/backgroundPositionX.js

@@ -0,0 +1,23 @@
+import { transformRawValue } from 'css-to-react-native';
+
+export default function backgroundPositionX(value) {
+  const values = value.split(' ');
+  const [first, second = 'auto'] = values;
+
+  if (values.length === 1) {
+    return {
+      backgroundPositionX: transformRawValue('backgroundPositionX', first),
+    };
+  }
+
+  if (values.length === 2) {
+    return {
+      backgroundPositionX: {
+        position: transformRawValue('backgroundPositionX', first),
+        offset: transformRawValue('backgroundPositionX', second),
+      },
+    };
+  }
+
+  return null;
+}

package/src/style/transform/properties/backgroundPositionY.js

@@ -0,0 +1,23 @@
+import { transformRawValue } from 'css-to-react-native';
+
+export default function backgroundPositionY(value) {
+  const values = value.split(' ');
+  const [first, second = 'auto'] = values;
+
+  if (values.length === 1) {
+    return {
+      backgroundPositionY: transformRawValue('backgroundPositionY', first),
+    };
+  }
+
+  if (values.length === 2) {
+    return {
+      backgroundPositionY: {
+        position: transformRawValue('backgroundPositionY', first),
+        offset: transformRawValue('backgroundPositionY', second),
+      },
+    };
+  }
+
+  return null;
+}

package/src/style/transform/properties/backgroundSize.js

@@ -0,0 +1,24 @@
+import { transformRawValue } from 'css-to-react-native';
+
+// Spec: https://w3c.github.io/csswg-drafts/css-backgrounds/#the-background-size
+export default function backgroundSize(value) {
+  const values = value.split(' ');
+  const [first, second = 'auto'] = values;
+
+  if (values.length === 1) {
+    return {
+      backgroundSize: transformRawValue('backgroundSize', first),
+    };
+  }
+
+  if (values.length === 2) {
+    return {
+      backgroundSize: {
+        width: transformRawValue('backgroundSize', first),
+        height: transformRawValue('backgroundSize', second),
+      },
+    };
+  }
+
+  return null;
+}

package/src/style/transform/rem.js

@@ -0,0 +1,18 @@
+import { Platform, PixelRatio } from 'react-native';
+
+const transformREMUnitRE = /([+-]+)?([\d.Ee]+)rem/g;
+
+const convertRemToPx = (value) => PixelRatio.getFontScale() * 16 * value;
+
+function rem(value) {
+  if (Platform.OS === 'web') {
+    return value;
+  }
+
+  return value.replace(
+    transformREMUnitRE,
+    (_, unary = '', number) => `${unary}${convertRemToPx(number)}px`,
+  );
+}
+
+export default rem;

package/src/style/transform/rgba.js

@@ -0,0 +1,11 @@
+import { rgba as transform } from '../functions';
+
+const transformRgbaRE = /rgba\(\s*([#0-9a-z]+)\s*,\s*([\d.Ee]+)\s*\)/g;
+
+function rgba(value) {
+  return value.replace(transformRgbaRE, (_, hex, alpha) =>
+    transform(hex, alpha),
+  );
+}
+
+export default rgba;

package/src/style/types/RgbaValue.js

@@ -0,0 +1,111 @@
+// Copied from https://github.com/styled-components/polished/blob/main/src/color/parseToRgb.js
+const hexRE = /^#[a-fA-F0-9]{6}$/;
+const hexRgbaRE = /^#[a-fA-F0-9]{8}$/;
+const shortHexRE = /^#[a-fA-F0-9]{3}$/;
+const shortRgbaHexRE = /^#[a-fA-F0-9]{4}$/;
+const rgbRE = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+const rgbaRE = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+const hslRE = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+const hslaRE = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+
+// Copied from https://reactnative.dev/docs/colors
+// prettier-ignore
+const colorNames = { aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000', blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b', darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00', darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f', darkslateblue: '#483d8b', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1', darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22', fuchsia: '#ff00ff', gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', gray: '#808080', green: '#008000', greenyellow: '#adff2f', grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3', lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa', mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371', mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc', mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1', moccasin: '#ffe4b5', navajowhite: '#ffdead', navy: '#000080', oldlace: '#fdf5e6', olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500', orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee', palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6', purple: '#800080', rebeccapurple: '#663399', red: '#ff0000', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', snow: '#fffafa', springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', teal: '#008080', thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00', yellowgreen: '#9acd32' };
+
+const hslToRgb = (h, s, l) => {
+  const a = s * Math.min(l, 1 - l);
+  const f = (n, k = (n + h / 30) % 12) =>
+    l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+  return [f(0), f(8), f(4)];
+};
+
+export default class RgbaValue {
+  red;
+
+  green;
+
+  blue;
+
+  alpha;
+
+  constructor(red, green, blue, alpha = 1) {
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.alpha = alpha;
+  }
+
+  static parse(value) {
+    if (value instanceof RgbaValue) {
+      return value;
+    }
+
+    const color = colorNames[value] || value;
+
+    // Handle hex value
+    const hexMatch =
+      color.match(hexRE) ||
+      color.match(hexRgbaRE) ||
+      color.match(shortHexRE) ||
+      color.match(shortRgbaHexRE);
+    if (hexMatch) {
+      const params = (hexMatch[0].length <= 4
+        ? hexMatch[0].match(/\w/g).map((x) => `${x}${x}`)
+        : hexMatch[0].match(/\w\w/g)
+      ).map((hex, key) => {
+        const x = parseInt(hex, 16);
+        const alpha = key === 3;
+        return alpha ? (x / 255).toFixed(2) : x;
+      });
+
+      return new RgbaValue(...params);
+    }
+
+    // Handle rgb(a) value
+    const rgbMatch = color.match(rgbRE) || color.match(rgbaRE);
+    if (rgbMatch) {
+      const params = rgbMatch.slice(1).map((x, key) => {
+        const alpha = key === 3;
+        return alpha ? parseFloat(x) : parseInt(x, 10);
+      });
+
+      return new RgbaValue(...params);
+    }
+
+    // Handle hsl(a) value
+    const hslMatch = color.match(hslRE) || color.match(hslaRE);
+    if (hslMatch) {
+      const h = parseInt(hslMatch[1], 10);
+      const s = parseInt(hslMatch[2], 10) / 100;
+      const l = parseInt(hslMatch[3], 10) / 100;
+      const alpha = hslMatch[4] && parseFloat(hslMatch[4]);
+
+      return new RgbaValue(...[...hslToRgb(h, s, l), alpha]);
+    }
+
+    throw new Error(`Unknown color "${value}".`);
+  }
+
+  toRgb() {
+    return [this.red, this.green, this.blue];
+  }
+
+  toRgba() {
+    return [...this.toRgb(), this.alpha];
+  }
+
+  toHex() {
+    const [...values] = this.toRgb();
+
+    if (this.alpha < 1) {
+      values.push(this.alpha);
+    }
+
+    return `#${values
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+      })
+      .join('')}`;
+  }
+}

package/src/style/types/UnitValue.js

@@ -0,0 +1,59 @@
+import { PixelRatio } from 'react-native';
+
+const valueRE = /^([+-]?(?:\d+|\d*\.\d+))(rem|px|%)?$/;
+
+export default class UnitValue {
+  value;
+
+  unit;
+
+  constructor(value, unit = 'number') {
+    this.value = value;
+    this.unit = unit;
+  }
+
+  static parse(value) {
+    if (value instanceof UnitValue) {
+      return value;
+    }
+
+    if (typeof value === 'number') {
+      return new UnitValue(value, 'number');
+    }
+
+    const match = value.match(valueRE);
+
+    if (!match) {
+      throw new Error(`Cannot parse number "${value}".`);
+    }
+
+    return new UnitValue(
+      parseFloat(match[1]),
+      match[2] === '%' ? 'percent' : match[2],
+    );
+  }
+
+  toNumber() {
+    if (this.unit === 'percent') {
+      return this.value / 100;
+    }
+
+    if (this.unit === 'rem') {
+      return this.value * PixelRatio.getFontScale() * 16;
+    }
+
+    return this.value;
+  }
+
+  toString() {
+    if (this.unit === 'number') {
+      return this.value;
+    }
+
+    if (this.unit === 'percent') {
+      return `${this.value}%`;
+    }
+
+    return `${this.value}${this.unit}`;
+  }
+}

package/src/theme/breakpoints.js

@@ -0,0 +1,20 @@
+import { GRID_BREAKPOINTS } from './proxies';
+
+export function next(name) {
+  const names = Object.keys(GRID_BREAKPOINTS);
+  const n = names.indexOf(name);
+
+  if (n === -1) {
+    throw new Error(`Breakpoint ${name} not found.`);
+  }
+
+  return n < names.length ? names[n + 1] : '';
+}
+
+export function infix(breakpoint) {
+  if (!breakpoint || breakpoint === 'xs') {
+    return '';
+  }
+
+  return `-${breakpoint}`;
+}

package/src/theme/functions.js

@@ -0,0 +1,166 @@
+import { rgba, opacity, mix } from '../style/functions';
+import { calculate } from '../style/math';
+import RgbaValue from '../style/types/RgbaValue';
+import UnitValue from '../style/types/UnitValue';
+
+export const fn = (handle) => (...args) => (t) => {
+  const input = args.map((arg) => (typeof arg === 'function' ? arg(t) : arg));
+  return handle(input, t);
+};
+
+/* eslint-disable arrow-body-style */
+
+const escapedCharacters = {
+  '<': '%3c',
+  '>': '%3e',
+  '#': '%23',
+  '(': '%28',
+  ')': '%29',
+};
+
+export const escapeSvg = (string) => {
+  const strReplace = (val) =>
+    Object.entries(escapedCharacters).reduce(
+      (result, [char, encoded]) =>
+        result.replace(new RegExp(`\\${char}`, 'g'), encoded),
+      val,
+    );
+
+  return string.startsWith('url(')
+    ? `url("${strReplace(string.slice(5, -2))}")`
+    : strReplace(string);
+};
+
+// Color contrast
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// prettier-ignore
+const luminanceList = [0.0008, 0.001, 0.0011, 0.0013, 0.0015, 0.0017, 0.002, 0.0022, 0.0025, 0.0027, 0.003, 0.0033, 0.0037, 0.004, 0.0044, 0.0048, 0.0052, 0.0056, 0.006, 0.0065, 0.007, 0.0075, 0.008, 0.0086, 0.0091, 0.0097, 0.0103, 0.011, 0.0116, 0.0123, 0.013, 0.0137, 0.0144, 0.0152, 0.016, 0.0168, 0.0176, 0.0185, 0.0194, 0.0203, 0.0212, 0.0222, 0.0232, 0.0242, 0.0252, 0.0262, 0.0273, 0.0284, 0.0296, 0.0307, 0.0319, 0.0331, 0.0343, 0.0356, 0.0369, 0.0382, 0.0395, 0.0409, 0.0423, 0.0437, 0.0452, 0.0467, 0.0482, 0.0497, 0.0513, 0.0529, 0.0545, 0.0561, 0.0578, 0.0595, 0.0612, 0.063, 0.0648, 0.0666, 0.0685, 0.0704, 0.0723, 0.0742, 0.0762, 0.0782, 0.0802, 0.0823, 0.0844, 0.0865, 0.0887, 0.0908, 0.0931, 0.0953, 0.0976, 0.0999, 0.1022, 0.1046, 0.107, 0.1095, 0.1119, 0.1144, 0.117, 0.1195, 0.1221, 0.1248, 0.1274, 0.1301, 0.1329, 0.1356, 0.1384, 0.1413, 0.1441, 0.147, 0.15, 0.1529, 0.1559, 0.159, 0.162, 0.1651, 0.1683, 0.1714, 0.1746, 0.1779, 0.1812, 0.1845, 0.1878, 0.1912, 0.1946, 0.1981, 0.2016, 0.2051, 0.2086, 0.2122, 0.2159, 0.2195, 0.2232, 0.227, 0.2307, 0.2346, 0.2384, 0.2423, 0.2462, 0.2502, 0.2542, 0.2582, 0.2623, 0.2664, 0.2705, 0.2747, 0.2789, 0.2831, 0.2874, 0.2918, 0.2961, 0.3005, 0.305, 0.3095, 0.314, 0.3185, 0.3231, 0.3278, 0.3325, 0.3372, 0.3419, 0.3467, 0.3515, 0.3564, 0.3613, 0.3663, 0.3712, 0.3763, 0.3813, 0.3864, 0.3916, 0.3968, 0.402, 0.4072, 0.4125, 0.4179, 0.4233, 0.4287, 0.4342, 0.4397, 0.4452, 0.4508, 0.4564, 0.4621, 0.4678, 0.4735, 0.4793, 0.4851, 0.491, 0.4969, 0.5029, 0.5089, 0.5149, 0.521, 0.5271, 0.5333, 0.5395, 0.5457, 0.552, 0.5583, 0.5647, 0.5711, 0.5776, 0.5841, 0.5906, 0.5972, 0.6038, 0.6105, 0.6172, 0.624, 0.6308, 0.6376, 0.6445, 0.6514, 0.6584, 0.6654, 0.6724, 0.6795, 0.6867, 0.6939, 0.7011, 0.7084, 0.7157, 0.7231, 0.7305, 0.7379, 0.7454, 0.7529, 0.7605, 0.7682, 0.7758, 0.7835, 0.7913, 0.7991, 0.807, 0.8148, 0.8228, 0.8308, 0.8388, 0.8469, 0.855, 0.8632, 0.8714, 0.8796, 0.8879, 0.8963, 0.9047, 0.9131, 0.9216, 0.9301, 0.9387, 0.9473, 0.956, 0.9647, 0.9734, 0.9823, 0.9911, 1];
+
+// Return WCAG2.0 relative luminance
+// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+const luminance = (color) => {
+  const rgb = RgbaValue.parse(color).toRgb();
+
+  const [red, green, blue] = rgb.map((value) => {
+    return value / 255 < 0.04045 ? value / 255 / 12.92 : luminanceList[value];
+  });
+
+  return red * 0.2126 + green * 0.7152 + blue * 0.0722;
+};
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+const opaque = (background, foreground) => {
+  const foregroundRgba = RgbaValue.parse(foreground);
+  return mix(rgba(foregroundRgba, 1), background, opacity(foregroundRgba));
+};
+
+const contrastRatio = (background, foreground) => {
+  const l1 = luminance(background);
+  const l2 = luminance(opaque(background, foreground));
+
+  return l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
+};
+
+export const colorContrast = fn(([background], t) => {
+  const foregrounds = [
+    t['color-contrast-light'],
+    t['color-contrast-dark'],
+    t.white,
+    t.black,
+  ];
+  let maxRatio = 0;
+  let maxRatioColor = null;
+
+  const result = foregrounds.find((color) => {
+    const ratio = contrastRatio(background, color);
+
+    if (ratio > t['min-contrast-ratio']) {
+      return true;
+    }
+
+    if (ratio > maxRatio) {
+      maxRatio = ratio;
+      maxRatioColor = color;
+    }
+
+    return false;
+  });
+
+  if (result) {
+    return result;
+  }
+
+  // eslint-disable-next-line no-console
+  console.warn(
+    `Found no color leading to ${t['min-contrast-ratio']}:1 contrast ratio against ${background}...`,
+  );
+
+  return maxRatioColor;
+});
+
+// Tint a color: mix a color with white
+export const tintColor = fn(([color, weight], t) => {
+  return mix(t.white, color, weight);
+});
+
+// Shade a color: mix a color with black
+export const shadeColor = fn(([color, weight], t) => {
+  return mix(t.black, color, weight);
+});
+
+// Shade the color if the weight is positive, else tint it
+export const shiftColor = fn(([color, weight], t) => {
+  const percentage = UnitValue.parse(weight).toNumber();
+
+  const handle =
+    percentage > 0
+      ? shadeColor(color, percentage)
+      : tintColor(color, -percentage);
+
+  return handle(t);
+});
+
+export const add = fn(([value1, value2]) => {
+  if (value1 === null) {
+    return value2;
+  }
+
+  if (value2 === null) {
+    return value1;
+  }
+
+  return calculate(value1, '+', value2);
+});
+
+export const subtract = fn(([value1, value2]) => {
+  if (value1 === null && value2 === null) {
+    return null;
+  }
+
+  if (value1 === null) {
+    return `-${value2}`;
+  }
+
+  if (value2 === null) {
+    return value1;
+  }
+
+  return calculate(value1, '-', value2);
+});
+
+export const divide = fn(([dividend, divisor]) => {
+  if (Math.abs(parseFloat(dividend)) === 0) {
+    return 0;
+  }
+
+  if (Math.abs(parseFloat(divisor)) === 0) {
+    throw new Error('Cannot divide by 0');
+  }
+
+  return calculate(dividend, '/', divisor);
+});
+
+/* eslint-enable */