@zendeskgarden/react-theming 9.0.0-next.12 → 9.0.0-next.14

package/dist/esm/utils/arrowStyles.js

@@ -5,24 +5,8 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import { css, keyframes } from 'styled-components';
-import { math } from 'polished';
+import { stripUnit, math } from 'polished';
 
-const exponentialSymbols = {
-  symbols: {
-    sqrt: {
-      func: {
-        symbol: 'sqrt',
-        f: a => Math.sqrt(a),
-        notation: 'func',
-        precedence: 0,
-        rightToLeft: 0,
-        argCount: 1
-      },
-      symbol: 'sqrt',
-      regSymbol: 'sqrt\\b'
-    }
-  }
-};
 const animationStyles = (position, modifier) => {
   const property = position.split('-')[0];
   const animationName = keyframes(["0%,66%{", ":2px;border:transparent;}"], property);
@@ -31,34 +15,31 @@ const animationStyles = (position, modifier) => {
 const positionStyles = (position, size, inset) => {
   const margin = math(`${size} / -2`);
   const placement = math(`${margin} + ${inset}`);
-  let clipPath;
+  let transform;
   let positionCss;
-  let propertyRadius;
   if (position.startsWith('top')) {
-    propertyRadius = 'border-bottom-right-radius';
-    clipPath = 'polygon(100% 0, 100% 1px, 1px 100%, 0 100%, 0 0)';
+    transform = 'rotate(-135deg)';
     positionCss = css(["top:", ";right:", ";left:", ";margin-left:", ";"], placement, position === 'top-right' && size, position === 'top' ? '50%' : position === 'top-left' && size, position === 'top' && margin);
   } else if (position.startsWith('right')) {
-    propertyRadius = 'border-bottom-left-radius';
-    clipPath = 'polygon(100% 0, 100% 100%, calc(100% - 1px) 100%, 0 1px, 0 0)';
+    transform = 'rotate(-45deg)';
     positionCss = css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && size, placement, position === 'right-bottom' && size, position === 'right' && margin);
   } else if (position.startsWith('bottom')) {
-    propertyRadius = 'border-top-left-radius';
-    clipPath = 'polygon(100% 0, calc(100% - 1px) 0, 0 calc(100% - 1px), 0 100%, 100% 100%)';
+    transform = 'rotate(45deg)';
     positionCss = css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && size, placement, position === 'bottom' ? '50%' : position === 'bottom-left' && size, position === 'bottom' && margin);
   } else if (position.startsWith('left')) {
-    propertyRadius = 'border-top-right-radius';
-    clipPath = 'polygon(0 100%, 100% 100%, 100% calc(100% - 1px), 1px 0, 0 0)';
+    transform = 'rotate(135deg)';
     positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin);
   }
-  return css(["&::before{", ":100%;clip-path:", ";}&::before,&::after{", "}"], propertyRadius, clipPath, positionCss);
+  return css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
 };
 function arrowStyles(position) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const size = options.size || '6px';
   const inset = options.inset || '0';
-  const squareSize = math(`${size} * 2 / sqrt(2)`, exponentialSymbols);
-  return css(["position:relative;&::before{border-width:inherit;border-style:inherit;border-color:transparent;background-clip:content-box;}&::after{z-index:-1;border:inherit;box-shadow:inherit;}&::before,&::after{position:absolute;transform:rotate(45deg);background-color:inherit;box-sizing:inherit;width:", ";height:", ";content:'';}", ";", ";"], squareSize, squareSize, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles(position, options.animationModifier));
+  const size = options.size === undefined ? 6 : stripUnit(options.size);
+  const squareSize = `${Math.round(size * 2 / Math.sqrt(2))}px`;
+  const afterOffset = 0;
+  const beforeOffset = afterOffset + 2;
+  return css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;background-color:transparent;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;background-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSize, squareSize, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles(position, options.animationModifier));
 }
 
-export { arrowStyles as default, exponentialSymbols };
+export { arrowStyles as default };

package/dist/esm/utils/getColor.js

@@ -4,14 +4,12 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import { valid, scale } from 'chroma-js';
-import { rgba, darken, lighten } from 'polished';
+import { getScale, parseToRgba } from 'color2k';
+import { getContrast, rgba, darken, lighten } from 'polished';
 import get from 'lodash.get';
 import memoize from 'lodash.memoize';
 import DEFAULT_THEME from '../elements/theme/index.js';
-import PALETTE from '../elements/palette/index.js';
 
-const PALETTE_SIZE = Object.keys(PALETTE.blue).length;
 const adjust = (color, expected, actual) => {
   if (expected !== actual) {
     const amount = Math.abs(expected - actual) / 100 * 0.05;
@@ -42,6 +40,74 @@ const toHex = (hue, shade, offset, scheme) => {
   }
   return retVal;
 };
+const isValidColor = maybeColor => {
+  try {
+    return !!parseToRgba(maybeColor);
+  } catch {
+    return false;
+  }
+};
+function findNearestIndex(target, arr) {
+  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  if (typeof target !== 'number' || isNaN(target)) {
+    throw new Error('Target must be a number.');
+  }
+  if (!Array.isArray(arr)) {
+    throw new Error('Second argument must be an array.');
+  }
+  let left = startIndex;
+  let right = arr.length - 1;
+  if (target < arr[left]) return left;
+  if (target > arr[right]) return right;
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    if (arr[mid] === target) {
+      return mid;
+    } else if (arr[mid] < target) {
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+  return arr[left] - target < target - arr[right] ? left : right;
+}
+const OFFSET_TO_TARGET_RATIO = {
+  100: 1.08,
+  200: 1.2,
+  300: 1.35,
+  400: 2,
+  500: 2.8,
+  600: 3.3,
+  700: 5,
+  800: 10,
+  900: 13,
+  1000: 16,
+  1100: 17.5,
+  1200: 19
+};
+const generateColorScale = memoize(color => {
+  const scaleSize = 200;
+  const _scale = getScale('#FFF', color, '#000');
+  const scale = x => _scale(x / scaleSize);
+  const colors = [];
+  const contrastRatios = [];
+  for (let i = 0; i <= scaleSize; i++) {
+    const _color = scale(i);
+    colors.push(_color);
+    contrastRatios.push(getContrast('#FFF', _color));
+  }
+  const palette = {};
+  let startIndex = 0;
+  for (const offset in OFFSET_TO_TARGET_RATIO) {
+    if (Object.prototype.hasOwnProperty.call(OFFSET_TO_TARGET_RATIO, offset)) {
+      const ratio = OFFSET_TO_TARGET_RATIO[offset];
+      const nearestIndex = findNearestIndex(ratio, contrastRatios, startIndex);
+      startIndex = nearestIndex + 1;
+      palette[offset] = colors[nearestIndex];
+    }
+  }
+  return palette;
+});
 const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transparency) => {
   let retVal;
   let _hue = colors[hue]  || hue;
@@ -50,17 +116,11 @@ const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transpare
   }
   if (typeof _hue === 'object') {
     retVal = toHex(_hue, shade, offset, scheme);
-  } else if (_hue === 'transparent' || valid(_hue)) {
+  } else if (_hue === 'transparent' || isValidColor(_hue)) {
     if (shade === undefined) {
       retVal = _hue;
     } else {
-      const _colors = scale([PALETTE.white, _hue, PALETTE.black]).correctLightness().colors(PALETTE_SIZE + 2);
-      _hue = _colors.reduce((_retVal, color, index) => {
-        if (index > 0 && index <= PALETTE_SIZE) {
-          _retVal[index * 100] = color;
-        }
-        return _retVal;
-      }, {});
+      _hue = generateColorScale(_hue);
       retVal = toHex(_hue, shade, offset, scheme);
     }
   }
@@ -147,9 +207,7 @@ const getColor = memoize(_ref => {
     const value = fromVariable(variable, _variables, palette);
     _hue = value.hue;
     _shade = value.shade;
-    if (value.transparency !== undefined) {
-      _transparency = value.transparency;
-    }
+    _transparency = _transparency === undefined ? value.transparency : _transparency;
   }
   if (_hue) {
     const opacity = theme.opacity && Object.keys(theme.opacity).length > 0 ? theme.opacity : DEFAULT_THEME.opacity;

package/dist/esm/utils/menuStyles.js

@@ -26,6 +26,34 @@ const animationStyles = (position, options) => {
   const animationName = keyframes(["0%{transform:", "(", ");}"], transformFunction, translateValue);
   return css(["&", " ", "{animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";}"], options.animationModifier, options.childSelector || '> *', animationName);
 };
+const colorStyles = theme => {
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const boxShadowColor = getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 1200,
+    dark: {
+      transparency: theme.opacity[800]
+    },
+    light: {
+      transparency: theme.opacity[200]
+    }
+  });
+  const boxShadowBlurRadius = `${theme.space.base * (theme.colors.base === 'dark' ? 5 : 6)}px`;
+  const boxShadowOffsetY = `${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, theme.shadows.lg(boxShadowOffsetY, boxShadowBlurRadius, boxShadowColor), backgroundColor, foregroundColor);
+};
 const hiddenStyles = options => {
   const transition = 'opacity 0.2s ease-in-out, 0.2s visibility 0s linear';
   return css(["transition:", ";visibility:hidden;opacity:0;"], options.animationModifier && transition);
@@ -43,21 +71,7 @@ function menuStyles(position) {
   } else {
     marginProperty = 'margin-right';
   }
-  return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;color:", ";font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor({
-    theme,
-    variable: 'border.default'
-  }), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor({
-    theme,
-    hue: 'chromeHue',
-    shade: 600,
-    transparency: 0.15
-  })), getColor({
-    theme,
-    variable: 'background.raised'
-  }), theme.rtl ? 'right' : 'left', getColor({
-    theme,
-    variable: 'foreground.default'
-  }), theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
+  return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", ";border-radius:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, theme.borderRadii.md, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', colorStyles(theme), options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
 }
 
 export { menuStyles as default };

package/dist/index.cjs.js

@@ -8,7 +8,7 @@
 
 var React = require('react');
 var styled = require('styled-components');
-var chromaJs = require('chroma-js');
+var color2k = require('color2k');
 var polished = require('polished');
 var get = require('lodash.get');
 var memoize = require('lodash.memoize');
@@ -688,7 +688,6 @@ const getArrowPosition = (theme, placement) => {
   return retVal;
 };
 
-const PALETTE_SIZE = Object.keys(PALETTE.blue).length;
 const adjust$1 = (color, expected, actual) => {
   if (expected !== actual) {
     const amount = Math.abs(expected - actual) / 100 * 0.05;
@@ -719,6 +718,74 @@ const toHex = (hue, shade, offset, scheme) => {
   }
   return retVal;
 };
+const isValidColor = maybeColor => {
+  try {
+    return !!color2k.parseToRgba(maybeColor);
+  } catch {
+    return false;
+  }
+};
+function findNearestIndex(target, arr) {
+  let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  if (typeof target !== 'number' || isNaN(target)) {
+    throw new Error('Target must be a number.');
+  }
+  if (!Array.isArray(arr)) {
+    throw new Error('Second argument must be an array.');
+  }
+  let left = startIndex;
+  let right = arr.length - 1;
+  if (target < arr[left]) return left;
+  if (target > arr[right]) return right;
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    if (arr[mid] === target) {
+      return mid;
+    } else if (arr[mid] < target) {
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+  return arr[left] - target < target - arr[right] ? left : right;
+}
+const OFFSET_TO_TARGET_RATIO = {
+  100: 1.08,
+  200: 1.2,
+  300: 1.35,
+  400: 2,
+  500: 2.8,
+  600: 3.3,
+  700: 5,
+  800: 10,
+  900: 13,
+  1000: 16,
+  1100: 17.5,
+  1200: 19
+};
+const generateColorScale = memoize__default.default(color => {
+  const scaleSize = 200;
+  const _scale = color2k.getScale('#FFF', color, '#000');
+  const scale = x => _scale(x / scaleSize);
+  const colors = [];
+  const contrastRatios = [];
+  for (let i = 0; i <= scaleSize; i++) {
+    const _color = scale(i);
+    colors.push(_color);
+    contrastRatios.push(polished.getContrast('#FFF', _color));
+  }
+  const palette = {};
+  let startIndex = 0;
+  for (const offset in OFFSET_TO_TARGET_RATIO) {
+    if (Object.prototype.hasOwnProperty.call(OFFSET_TO_TARGET_RATIO, offset)) {
+      const ratio = OFFSET_TO_TARGET_RATIO[offset];
+      const nearestIndex = findNearestIndex(ratio, contrastRatios, startIndex);
+      startIndex = nearestIndex + 1;
+      palette[offset] = colors[nearestIndex];
+    }
+  }
+  return palette;
+});
 const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transparency) => {
   let retVal;
   let _hue = colors[hue]  || hue;
@@ -727,17 +794,11 @@ const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transpare
   }
   if (typeof _hue === 'object') {
     retVal = toHex(_hue, shade, offset, scheme);
-  } else if (_hue === 'transparent' || chromaJs.valid(_hue)) {
+  } else if (_hue === 'transparent' || isValidColor(_hue)) {
     if (shade === undefined) {
       retVal = _hue;
     } else {
-      const _colors = chromaJs.scale([PALETTE.white, _hue, PALETTE.black]).correctLightness().colors(PALETTE_SIZE + 2);
-      _hue = _colors.reduce((_retVal, color, index) => {
-        if (index > 0 && index <= PALETTE_SIZE) {
-          _retVal[index * 100] = color;
-        }
-        return _retVal;
-      }, {});
+      _hue = generateColorScale(_hue);
       retVal = toHex(_hue, shade, offset, scheme);
     }
   }
@@ -824,9 +885,7 @@ const getColor = memoize__default.default(_ref => {
     const value = fromVariable(variable, _variables, palette);
     _hue = value.hue;
     _shade = value.shade;
-    if (value.transparency !== undefined) {
-      _transparency = value.transparency;
-    }
+    _transparency = _transparency === undefined ? value.transparency : _transparency;
   }
   if (_hue) {
     const opacity = theme.opacity && Object.keys(theme.opacity).length > 0 ? theme.opacity : DEFAULT_THEME.opacity;
@@ -1100,22 +1159,6 @@ function mediaQuery(query, breakpoint, theme) {
   return retVal;
 }
 
-const exponentialSymbols = {
-  symbols: {
-    sqrt: {
-      func: {
-        symbol: 'sqrt',
-        f: a => Math.sqrt(a),
-        notation: 'func',
-        precedence: 0,
-        rightToLeft: 0,
-        argCount: 1
-      },
-      symbol: 'sqrt',
-      regSymbol: 'sqrt\\b'
-    }
-  }
-};
 const animationStyles$1 = (position, modifier) => {
   const property = position.split('-')[0];
   const animationName = styled.keyframes(["0%,66%{", ":2px;border:transparent;}"], property);
@@ -1124,34 +1167,31 @@ const animationStyles$1 = (position, modifier) => {
 const positionStyles = (position, size, inset) => {
   const margin = polished.math(`${size} / -2`);
   const placement = polished.math(`${margin} + ${inset}`);
-  let clipPath;
+  let transform;
   let positionCss;
-  let propertyRadius;
   if (position.startsWith('top')) {
-    propertyRadius = 'border-bottom-right-radius';
-    clipPath = 'polygon(100% 0, 100% 1px, 1px 100%, 0 100%, 0 0)';
+    transform = 'rotate(-135deg)';
     positionCss = styled.css(["top:", ";right:", ";left:", ";margin-left:", ";"], placement, position === 'top-right' && size, position === 'top' ? '50%' : position === 'top-left' && size, position === 'top' && margin);
   } else if (position.startsWith('right')) {
-    propertyRadius = 'border-bottom-left-radius';
-    clipPath = 'polygon(100% 0, 100% 100%, calc(100% - 1px) 100%, 0 1px, 0 0)';
+    transform = 'rotate(-45deg)';
     positionCss = styled.css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && size, placement, position === 'right-bottom' && size, position === 'right' && margin);
   } else if (position.startsWith('bottom')) {
-    propertyRadius = 'border-top-left-radius';
-    clipPath = 'polygon(100% 0, calc(100% - 1px) 0, 0 calc(100% - 1px), 0 100%, 100% 100%)';
+    transform = 'rotate(45deg)';
     positionCss = styled.css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && size, placement, position === 'bottom' ? '50%' : position === 'bottom-left' && size, position === 'bottom' && margin);
   } else if (position.startsWith('left')) {
-    propertyRadius = 'border-top-right-radius';
-    clipPath = 'polygon(0 100%, 100% 100%, 100% calc(100% - 1px), 1px 0, 0 0)';
+    transform = 'rotate(135deg)';
     positionCss = styled.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin);
   }
-  return styled.css(["&::before{", ":100%;clip-path:", ";}&::before,&::after{", "}"], propertyRadius, clipPath, positionCss);
+  return styled.css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
 };
 function arrowStyles(position) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const size = options.size || '6px';
   const inset = options.inset || '0';
-  const squareSize = polished.math(`${size} * 2 / sqrt(2)`, exponentialSymbols);
-  return styled.css(["position:relative;&::before{border-width:inherit;border-style:inherit;border-color:transparent;background-clip:content-box;}&::after{z-index:-1;border:inherit;box-shadow:inherit;}&::before,&::after{position:absolute;transform:rotate(45deg);background-color:inherit;box-sizing:inherit;width:", ";height:", ";content:'';}", ";", ";"], squareSize, squareSize, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles$1(position, options.animationModifier));
+  const size = options.size === undefined ? 6 : polished.stripUnit(options.size);
+  const squareSize = `${Math.round(size * 2 / Math.sqrt(2))}px`;
+  const afterOffset = 0;
+  const beforeOffset = afterOffset + 2;
+  return styled.css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;background-color:transparent;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;background-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSize, squareSize, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles$1(position, options.animationModifier));
 }
 
 const useDocument = theme => {
@@ -1216,6 +1256,34 @@ const animationStyles = (position, options) => {
   const animationName = styled.keyframes(["0%{transform:", "(", ");}"], transformFunction, translateValue);
   return styled.css(["&", " ", "{animation:0.2s cubic-bezier(0.15,0.85,0.35,1.2) ", ";}"], options.animationModifier, options.childSelector || '> *', animationName);
 };
+const colorStyles = theme => {
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.raised'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const boxShadowColor = getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 1200,
+    dark: {
+      transparency: theme.opacity[800]
+    },
+    light: {
+      transparency: theme.opacity[200]
+    }
+  });
+  const boxShadowBlurRadius = `${theme.space.base * (theme.colors.base === 'dark' ? 5 : 6)}px`;
+  const boxShadowOffsetY = `${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, theme.shadows.lg(boxShadowOffsetY, boxShadowBlurRadius, boxShadowColor), backgroundColor, foregroundColor);
+};
 const hiddenStyles = options => {
   const transition = 'opacity 0.2s ease-in-out, 0.2s visibility 0s linear';
   return styled.css(["transition:", ";visibility:hidden;opacity:0;"], options.animationModifier && transition);
@@ -1233,21 +1301,7 @@ function menuStyles(position) {
   } else {
     marginProperty = 'margin-right';
   }
-  return styled.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;color:", ";font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColor({
-    theme,
-    variable: 'border.default'
-  }), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColor({
-    theme,
-    hue: 'chromeHue',
-    shade: 600,
-    transparency: 0.15
-  })), getColor({
-    theme,
-    variable: 'background.raised'
-  }), theme.rtl ? 'right' : 'left', getColor({
-    theme,
-    variable: 'foreground.default'
-  }), theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
+  return styled.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", ";border-radius:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, theme.borderRadii.md, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', colorStyles(theme), options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
 }
 
 const SELECTOR_FOCUS_VISIBLE = '&:focus-visible';

package/dist/typings/utils/arrowStyles.d.ts

@@ -10,22 +10,6 @@ type ArrowOptions = {
     inset?: string;
     animationModifier?: string;
 };
-export declare const exponentialSymbols: {
-    symbols: {
-        sqrt: {
-            func: {
-                symbol: string;
-                f: (a: number) => number;
-                notation: string;
-                precedence: number;
-                rightToLeft: number;
-                argCount: number;
-            };
-            symbol: string;
-            regSymbol: string;
-        };
-    };
-};
 /**
  * CSS for an arrow at the given position and with the given size. The arrow is
  * positioned via `::before` and `::after` pseudo-elements and inherits the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0-next.12",
+  "version": "9.0.0-next.14",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,10 +22,10 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
-    "chroma-js": "^2.4.2",
+    "color2k": "^2.0.3",
     "lodash.get": "^4.4.2",
     "lodash.memoize": "^4.1.2",
-    "polished": "^4.0.0",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
@@ -34,7 +34,6 @@
     "styled-components": "^4.2.0 || ^5.3.1"
   },
   "devDependencies": {
-    "@types/chroma-js": "2.4.4",
     "@types/lodash.get": "4.4.9",
     "@types/lodash.memoize": "4.1.9"
   },
@@ -48,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "7925ff78236795111e2953efbce549839df3a86d"
+  "gitHead": "4cd4e10839f6d083f0c5e642b99256e390a37ae6"
 }