@coinbase/cds-common 0.0.0 → 8.13.1

package/esm/animation/overlay.js

@@ -0,0 +1,16 @@
+export const overlayHiddenOpacity = 0;
+export const overlayVisibleOpacity = 1;
+export const animateInOpacityConfig = {
+  property: 'opacity',
+  easing: 'enterFunctional',
+  duration: 'moderate1',
+  toValue: overlayVisibleOpacity,
+  fromValue: overlayHiddenOpacity
+};
+export const animateOutOpacityConfig = {
+  property: 'opacity',
+  easing: 'global',
+  duration: 'fast1',
+  toValue: overlayHiddenOpacity,
+  fromValue: overlayVisibleOpacity
+};

package/esm/animation/paddle.js

@@ -0,0 +1,17 @@
+export const paddleHidden = 0;
+export const paddleVisible = 1;
+export const animateGradientScaleConfig = {
+  property: 'scale',
+  easing: 'global',
+  duration: 'fast1'
+};
+export const animatePaddleOpacityConfig = {
+  property: 'opacity',
+  easing: 'enterFunctional',
+  duration: 'moderate1'
+};
+export const animatePaddleScaleConfig = {
+  property: 'scale',
+  easing: 'global',
+  duration: 'moderate1'
+};

package/esm/animation/progress.js

@@ -0,0 +1,4 @@
+export const animateProgressBaseSpec = {
+  easing: 'global',
+  duration: 'slow3'
+};

package/esm/animation/rotate.js

@@ -0,0 +1,5 @@
+export const baseConfig = {
+  property: 'transform',
+  easing: 'enterFunctional',
+  duration: 'moderate1'
+};

package/esm/animation/select.js

@@ -0,0 +1,16 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const baseConfig = {
+  property: 'transform',
+  easing: 'enterFunctional',
+  duration: 'moderate1'
+};
+export const animateCaretInConfig = _objectSpread(_objectSpread({}, baseConfig), {}, {
+  toValue: 1
+});
+export const animateCaretOutConfig = _objectSpread(_objectSpread({}, baseConfig), {}, {
+  toValue: 0
+});

package/esm/animation/sparkline.js

@@ -0,0 +1,8 @@
+const CHART_ANIMATED_PATH_DURATION = 450;
+function easeOutQuint(x) {
+  return 1 - (1 - x) ** 5;
+}
+export const animatedPathConfig = {
+  easing: easeOutQuint,
+  duration: CHART_ANIMATED_PATH_DURATION
+};

package/esm/animation/tabs.js

@@ -0,0 +1,5 @@
+export const animateTabIndicatorBaseSpec = {
+  property: 'x',
+  easing: 'global',
+  duration: 'moderate1'
+};

package/esm/animation/toast.js

@@ -0,0 +1,36 @@
+export const toastHiddenOpacity = 0;
+export const toastHiddenBottom = 25;
+export const toastVisibleOpacity = 1;
+export const toastVisibleBottom = 0;
+export const animateInOpacityConfig = {
+  property: 'opacity',
+  easing: 'enterFunctional',
+  duration: 'moderate3',
+  toValue: toastVisibleOpacity,
+  fromValue: toastHiddenOpacity
+};
+export const animateOutOpacityConfig = {
+  property: 'opacity',
+  easing: 'exitFunctional',
+  duration: 'moderate3',
+  toValue: toastHiddenOpacity,
+  fromValue: toastVisibleOpacity
+};
+export const animateInBottomConfig = {
+  property: 'y',
+  easing: 'enterFunctional',
+  duration: 'moderate3',
+  toValue: toastVisibleBottom,
+  fromValue: toastHiddenBottom
+};
+export const animateOutBottomConfig = {
+  property: 'y',
+  easing: 'exitFunctional',
+  duration: 'moderate3',
+  toValue: toastHiddenBottom,
+  fromValue: toastVisibleBottom
+};
+
+// pan responder configs
+export const horizontalPanThreshold = 50;
+export const bottomPanThreshold = 10;

package/esm/animation/tooltip.js

@@ -0,0 +1,87 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+export const tooltipHiddenOpacity = 0;
+export const tooltipVisibleOpacity = 1;
+export const tooltipHiddenY = 16;
+export const tooltipVisibleY = 0;
+const baseTiming = {
+  duration: 'fast1',
+  delay: 25
+};
+export const animateInOpacityConfig = _objectSpread(_objectSpread({
+  property: 'opacity'
+}, baseTiming), {}, {
+  easing: 'enterFunctional',
+  toValue: tooltipVisibleOpacity,
+  fromValue: tooltipHiddenOpacity
+});
+export const animateOutOpacityConfig = _objectSpread(_objectSpread({
+  property: 'opacity'
+}, baseTiming), {}, {
+  easing: 'exitFunctional',
+  toValue: tooltipHiddenOpacity,
+  fromValue: tooltipVisibleOpacity
+});
+
+/**
+ * Build tooltip translation config base on placement
+ * @param placement Tooltip placement
+ * @param transitionType animation type
+ * @returns Motion config
+ */
+export const getTranslateConfigByPlacement = _ref => {
+  let {
+    placement,
+    isExiting = false
+  } = _ref;
+  let config;
+  switch (placement) {
+    case 'top':
+      config = {
+        property: 'translateY',
+        fromValue: 16,
+        toValue: 0
+      };
+      break;
+    case 'bottom':
+      config = {
+        property: 'translateY',
+        fromValue: -16,
+        toValue: 0
+      };
+      break;
+    case 'left':
+      config = {
+        property: 'translateX',
+        fromValue: 16,
+        toValue: 0
+      };
+      break;
+    case 'right':
+      config = {
+        property: 'translateX',
+        fromValue: -16,
+        toValue: 0
+      };
+      break;
+    default:
+      config = {
+        property: 'translateY',
+        fromValue: 16,
+        toValue: 0
+      };
+  }
+
+  // swap from and to value for exit config
+  if (isExiting) {
+    const tempValue = config.fromValue;
+    config.fromValue = config.toValue;
+    config.toValue = tempValue;
+  }
+  return _objectSpread(_objectSpread(_objectSpread({}, baseTiming), config), {}, {
+    easing: isExiting ? 'exitFunctional' : 'enterFunctional'
+  });
+};

package/esm/cards/getCardBodySpacingProps.js

@@ -0,0 +1,25 @@
+export const getCardBodySpacingProps = _ref => {
+  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15;
+  let {
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingEnd,
+    paddingBottom,
+    paddingStart,
+    compact
+  } = _ref;
+  if (compact) return {
+    paddingBottom: (_ref2 = (_ref3 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref3 !== void 0 ? _ref3 : padding) !== null && _ref2 !== void 0 ? _ref2 : 1,
+    paddingTop: (_ref4 = (_ref5 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref5 !== void 0 ? _ref5 : padding) !== null && _ref4 !== void 0 ? _ref4 : 2,
+    paddingStart: (_ref6 = (_ref7 = paddingStart !== null && paddingStart !== void 0 ? paddingStart : paddingX) !== null && _ref7 !== void 0 ? _ref7 : padding) !== null && _ref6 !== void 0 ? _ref6 : 2,
+    paddingEnd: (_ref8 = (_ref9 = paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : paddingX) !== null && _ref9 !== void 0 ? _ref9 : padding) !== null && _ref8 !== void 0 ? _ref8 : 2
+  };
+  return {
+    paddingBottom: (_ref0 = (_ref1 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY) !== null && _ref1 !== void 0 ? _ref1 : padding) !== null && _ref0 !== void 0 ? _ref0 : 3,
+    paddingTop: (_ref10 = (_ref11 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref11 !== void 0 ? _ref11 : padding) !== null && _ref10 !== void 0 ? _ref10 : 3,
+    paddingStart: (_ref12 = (_ref13 = paddingStart !== null && paddingStart !== void 0 ? paddingStart : paddingX) !== null && _ref13 !== void 0 ? _ref13 : padding) !== null && _ref12 !== void 0 ? _ref12 : 3,
+    paddingEnd: (_ref14 = (_ref15 = paddingEnd !== null && paddingEnd !== void 0 ? paddingEnd : paddingX) !== null && _ref15 !== void 0 ? _ref15 : padding) !== null && _ref14 !== void 0 ? _ref14 : 3
+  };
+};

package/esm/color/blendColors.js

@@ -0,0 +1,44 @@
+import { rgb } from 'd3-color';
+export const getRGBColor = color => {
+  if (typeof color === 'string') {
+    return rgb(color);
+  }
+  if ('r' in color && 'g' in color && 'b' in color) {
+    return rgb(color.r, color.g, color.b, color.opacity);
+  }
+  return rgb(color);
+};
+
+/**
+ * The overlayColor value must have an alpha less than 1 in order to output a different color.
+ * @param underlayColor ColorValue
+ * @param overlayColor  ColorValue
+ * @returns rbgString
+ */
+export const blendColors = _ref => {
+  let {
+    underlayColor,
+    overlayColor
+  } = _ref;
+  const {
+    r: underlayR,
+    g: underlayG,
+    b: underlayB,
+    opacity: underlayOpacity
+  } = getRGBColor(underlayColor);
+  const {
+    r: OverlayR,
+    g: OverlayG,
+    b: OverlayB,
+    opacity: overlayOpacity
+  } = getRGBColor(overlayColor);
+  const mix = [];
+  mix[3] = 1 - (1 - overlayOpacity) * (1 - underlayOpacity); // alpha
+  // red
+  mix[0] = Math.round(OverlayR * overlayOpacity / mix[3] + underlayR * underlayOpacity * (1 - overlayOpacity) / mix[3]);
+  // green
+  mix[1] = Math.round(OverlayG * overlayOpacity / mix[3] + underlayG * underlayOpacity * (1 - overlayOpacity) / mix[3]);
+  // blue
+  mix[2] = Math.round(OverlayB * overlayOpacity / mix[3] + underlayB * underlayOpacity * (1 - overlayOpacity) / mix[3]);
+  return rgb(mix[0], mix[1], mix[2]);
+};

package/esm/color/colorToHex.js

@@ -0,0 +1,11 @@
+import { color } from 'd3-color';
+
+/**
+ * @param color - any valid color value, i.e. `rgba(255, 255, 255, 1)`
+ * @returns hex - `#ffffff`
+ * @website https://github.com/d3/d3-color#color
+ */
+export const colorToHex = value => {
+  var _color$formatHex, _color;
+  return (_color$formatHex = (_color = color(value)) === null || _color === void 0 ? void 0 : _color.formatHex()) !== null && _color$formatHex !== void 0 ? _color$formatHex : value;
+};

package/esm/color/darkenColor.js

@@ -0,0 +1,5 @@
+import { color } from 'd3-color';
+export const darkenColor = value => {
+  const d3Color = color(value);
+  return d3Color === null || d3Color === void 0 ? void 0 : d3Color.darker().formatHex();
+};

package/esm/color/getAccessibleForegroundGradient.js

@@ -0,0 +1,32 @@
+import { getAccessibleColor } from '../utils/getAccessibleColor';
+import { darkenColor } from './darkenColor';
+export const getAccessibleForegroundGradient = _ref => {
+  let {
+    background,
+    color,
+    colorScheme,
+    usage
+  } = _ref;
+  let color1 = color;
+  let color2 = color;
+  // Disable gradients in dark mode
+  if (colorScheme === 'dark' || color === 'auto') {
+    color1 = color !== 'auto' ? color : getAccessibleColor({
+      background,
+      foreground: 'auto',
+      usage
+    });
+    color2 = color1;
+  } else {
+    var _darkenColor;
+    color1 = color;
+    color2 = (_darkenColor = darkenColor(color)) !== null && _darkenColor !== void 0 ? _darkenColor : color;
+  }
+  return [{
+    offset: '0%',
+    color: color1
+  }, {
+    offset: '100%',
+    color: color2
+  }];
+};

package/esm/color/getBlendedColor.js

@@ -0,0 +1,202 @@
+import { color } from 'd3-color';
+import { blendColors } from './blendColors';
+import { getLuminance } from './getLuminance';
+
+/**
+ * Configuration for the color scheme.
+ *
+ * For each color scheme, it has an underlay color and a high contrast luminance threshold.
+ * The underlay color is the color that is used to blend with the overlay color.
+ * The high contrast luminance threshold is the luminance value, above (in dark color scheme)
+ * or below (in light color scheme) which the overlay color is considered in high contrast to the underlay color.
+ */
+
+const defaultColorBlendConfigByColorScheme = {
+  light: {
+    underlayColor: '#fff',
+    highContrastLuminanceThreshold: 0.11
+  },
+  dark: {
+    underlayColor: '#000',
+    highContrastLuminanceThreshold: 0.4
+  }
+};
+
+/**
+ * The type of easing function to use for opacity adjustment.
+ * - `linear`: A straight linear progression.
+ * - `ease-out`: An "ease-out" curve, where the adjustment starts fast and slows down as the luminance delta gets larger. This is the default.
+ * - `ease-in`: An "ease-in" curve, where the adjustment starts slow and speeds up as the luminance delta.
+ */
+
+/**
+ * Configuration for fine-tuning the automatic blend opacity adjustment.
+ */
+
+const defaultBlendOpacityAdjustmentConfig = {
+  noAdjustmentLuminanceDelta: 0.2,
+  adjustmentStrengthRatio: 0.75,
+  adjustmentEasingFunction: 'ease-out'
+};
+
+/**
+ * Adjusts the blend opacity based on the luminance difference between the overlay and underlay colors.
+ * When the luminance difference is large (e.g., a light overlay color on a dark underlay color), the blending
+ * effect is toned down (opacity of the overlay color is increased). This makes the resulting color variation more subtle
+ * and preserves the overlay color's character.
+ *
+ * Conversely, when the luminance difference is small (less than the `noAdjustmentLuminanceDelta`), the original blend opacity is used to allow
+ * for a more pronounced blending effect. This ensures that colors with similar brightness to the
+ * background still produce a noticeable visual change.
+ */
+const getAdjustedBlendOpacity = _ref => {
+  let {
+    overlayColorLuminance,
+    underlayColorLuminance,
+    blendOpacity,
+    blendOpacityAdjustmentConfig: {
+      noAdjustmentLuminanceDelta,
+      adjustmentStrengthRatio,
+      adjustmentEasingFunction
+    } = defaultBlendOpacityAdjustmentConfig
+  } = _ref;
+  // Calculate absolute difference in luminance (0 to 1)
+  const luminanceDelta = Math.abs(overlayColorLuminance - underlayColorLuminance);
+
+  // If luminance difference is below threshold, return original blend opacity unchanged
+  if (luminanceDelta < noAdjustmentLuminanceDelta) {
+    return blendOpacity;
+  }
+
+  // Normalize the luminance difference to a 0-to-1 scale. This ensures the adjustment
+  // starts from 0 and increases smoothly and predictably as the luminance difference
+  // surpasses the threshold.
+  // Example: if noAdjustmentLuminanceDelta is 0.2 and luminanceDelta is 0.6,
+  // the raw difference is 0.4. The total possible adjustment range is 0.8 (from 0.2 to 1.0).
+  // The normalizedDiff is 0.4 / 0.8 = 0.5, meaning we are 50% of the way through the adjustable range.
+  // This provides a consistent 0-1 scale for the easing curve.
+  const normalizedDiff = (luminanceDelta - noAdjustmentLuminanceDelta) / (1 - noAdjustmentLuminanceDelta);
+
+  // Apply the selected easing to the normalized difference for gentler scaling
+  let scaleFactor;
+  switch (adjustmentEasingFunction) {
+    case 'linear':
+      scaleFactor = normalizedDiff;
+      break;
+    case 'ease-in':
+      scaleFactor = Math.pow(normalizedDiff, 2);
+      break;
+    case 'ease-out':
+    default:
+      scaleFactor = Math.pow(normalizedDiff, 0.5);
+      break;
+  }
+  const scale = scaleFactor * adjustmentStrengthRatio;
+
+  // Calculate how much we can increase the blendOpacity (cannot exceed 1.0)
+  const maxIncrease = 1 - blendOpacity;
+  const blendStrengthIncrease = maxIncrease * scale;
+
+  // Return adjusted blend opacity, increased based on luminance difference
+  return blendOpacity + blendStrengthIncrease;
+};
+
+/**
+ * Configuration for the `getBlendedColor` function.
+ */
+
+/**
+ * Creates subtle color variations by blending overlay color with underlay color based on the input color's luminance
+ * and current theme. Automatically optimizes for contrast unless disabled.
+ *
+ * @param config - The configuration for the function.
+ * @returns CSS color string with the blended result.
+ *
+ * @example
+ * ```typescript
+ * // Light theme
+ * const lightVariation = getBlendedColor({
+ *   overlayColor: '#0052ff',
+ *   blendOpacity: 0.88,
+ *   colorScheme: 'light'
+ * });
+ *
+ * // Dark theme
+ * const darkVariation = getBlendedColor({
+ *   overlayColor: '#0052ff',
+ *   blendOpacity: 0.82,
+ *   colorScheme: 'dark'
+ * });
+ *
+ * // Skip contrast optimization
+ * const simpleVariation = getBlendedColor({
+ *   overlayColor: '#0052ff',.
+ *   blendOpacity: 0.75,
+ *   colorScheme: 'light',
+ *   skipContrastOptimization: true
+ * });
+ * ```
+ */
+export const getBlendedColor = _ref2 => {
+  var _getLuminance, _getLuminance2;
+  let {
+    overlayColor,
+    blendOpacity,
+    blendOpacityAdjustmentConfig,
+    colorScheme,
+    configByColorScheme = defaultColorBlendConfigByColorScheme,
+    skipContrastOptimization = false
+  } = _ref2;
+  // Special cases: these color values cannot be analyzed or blended, return as-is
+  if (overlayColor === 'currentColor' || overlayColor === 'transparent') {
+    return overlayColor;
+  }
+  const overlayColorRgba = color(overlayColor);
+  if (overlayColorRgba === null) {
+    return overlayColor;
+  }
+
+  // Preserve original opacity for semi-transparent overlay colors (e.g., bgLine, bgLineHeavy),
+  // which will be re-applied post-blending.
+  const overlayColorOpacity = overlayColorRgba.opacity;
+  // Handle fully transparent colors (alpha = 0)
+  if (overlayColorOpacity === 0) {
+    return 'transparent';
+  }
+  const overlayColorLuminance = (_getLuminance = getLuminance(overlayColor)) !== null && _getLuminance !== void 0 ? _getLuminance : 1;
+  const oppositeColorScheme = colorScheme === 'dark' ? 'light' : 'dark';
+
+  // Determine if overlay color has high contrast with the theme background
+  // High contrast overlays use current scheme underlay, low contrast overlays use opposite scheme underlay
+  const isHighContrast = colorScheme === 'dark' ? overlayColorLuminance >= configByColorScheme.dark.highContrastLuminanceThreshold // Light overlays on dark background = high contrast
+  : overlayColorLuminance <= configByColorScheme.light.highContrastLuminanceThreshold; // Dark overlays on light background = high contrast
+
+  const shouldUseCurrentColorScheme = skipContrastOptimization || isHighContrast;
+  // Choose underlay color from the current scheme when skipping optimization or high-contrast,
+  // otherwise use the one from the opposite scheme.
+  const underlayColor = shouldUseCurrentColorScheme ? configByColorScheme[colorScheme].underlayColor : configByColorScheme[oppositeColorScheme].underlayColor;
+  const underlayColorLuminance = (_getLuminance2 = getLuminance(underlayColor)) !== null && _getLuminance2 !== void 0 ? _getLuminance2 : 1;
+
+  // Automatically adjust blend opacity based on luminance difference for optimal visual contrast
+  const adjustedBlendOpacity = getAdjustedBlendOpacity({
+    overlayColorLuminance,
+    underlayColorLuminance,
+    blendOpacity,
+    blendOpacityAdjustmentConfig
+  });
+
+  // Create adjusted overlay color with the calculated blend strength
+  const overlayColorWithAdjustedBlendOpacity = overlayColorRgba.copy({
+    opacity: adjustedBlendOpacity
+  });
+  const blendedRgb = blendColors({
+    underlayColor,
+    overlayColor: overlayColorWithAdjustedBlendOpacity
+  });
+  if (overlayColorOpacity < 1) {
+    return blendedRgb.copy({
+      opacity: overlayColorOpacity
+    }).formatRgb();
+  }
+  return blendedRgb.formatRgb();
+};

package/esm/color/getContrastRatio.js

@@ -0,0 +1,11 @@
+import { getLuminance } from './getLuminance';
+/**
+ * The Web Content Accessibility Guidelines (WCAG) include convenient quantitative recommendations for making text and graphics accessible based on the minimum acceptable contrast of foreground against background.
+ * For example, black on yellow has a high contrast ratio (19.56) and therefore should be easier to read, whereas blue on blue is low contrast (2.31) and harder to read.
+ */
+export const getContrastRatio = (background, foreground) => {
+  const backgroundLuminance = getLuminance(background);
+  const foregroundLuminance = getLuminance(foreground);
+  if (backgroundLuminance === undefined || foregroundLuminance === undefined) return 1;
+  return (Math.max(backgroundLuminance, foregroundLuminance) + 0.05) / (Math.min(backgroundLuminance, foregroundLuminance) + 0.05);
+};

package/esm/color/getLuminance.js

@@ -0,0 +1,28 @@
+import { color } from 'd3-color';
+
+/**
+ * Relative luminance is the relative brightness of any point in an RGB colorspace, normalized to 0 for darkest black and 1 for lightest white.
+ *
+ * Edge cases:
+ * - Returns undefined for invalid color values or non-parseable color strings
+ * - HSL colors outside the RGB gamut will have their RGB components clamped to [0,255], which may not preserve the original color relationships
+ * - Special color keywords like 'currentColor' or 'transparent' will return undefined
+ * - CSS Variables or dynamic values cannot be calculated
+ *
+ * @see https://contrastchecker.online/color-relative-luminance-calculator
+ */
+export const getLuminance = value => {
+  var _color;
+  const rgbObject = (_color = color(value)) === null || _color === void 0 ? void 0 : _color.rgb();
+  if (!rgbObject) return undefined;
+  const {
+    r,
+    g,
+    b
+  } = rgbObject;
+  const red = Number.isNaN(r) ? 0 : r;
+  const green = Number.isNaN(g) ? 0 : g;
+  const blue = Number.isNaN(b) ? 0 : b;
+  const [redLinear, greenLinear, blueLinear] = [red / 255, green / 255, blue / 255].map(item => item <= 0.04045 ? item / 12.92 : ((item + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * redLinear + 0.7152 * greenLinear + 0.0722 * blueLinear;
+};

package/esm/color/isAccessibleColor.js

@@ -0,0 +1,31 @@
+import { getContrastRatio } from './getContrastRatio';
+const contrastRatioMap = {
+  minimum: {
+    normalText: 4.5,
+    largeText: 3,
+    graphic: 3
+  },
+  enhanced: {
+    normalText: 7,
+    largeText: 4.5,
+    graphic: 3
+  }
+};
+/**
+ * isAccessibleColor will default to using "minimum" contrast ratios
+ * Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).
+ * 7 - "enhanced" contrast for regular sized text under WCAG 2.0 1.4.6 (Level AAA)
+ * 4.5 - minimum contrast for regular sized text under WCAG 2.0 1.4.3 (Level AA)
+ * 3 - minimum contrast for "large scale" text (18 pt or 14 pt bold, or larger) under WCAG 2.0 1.4.3 (Level AA)
+ * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+ */
+export const isAccessibleColor = _ref => {
+  let {
+    background,
+    foreground,
+    usage,
+    enhanced
+  } = _ref;
+  const ratio = getContrastRatio(background, foreground);
+  return ratio >= contrastRatioMap[enhanced ? 'enhanced' : 'minimum'][usage];
+};

package/esm/color/isLightOrDarkColor.js

@@ -0,0 +1,21 @@
+import { color } from 'd3-color';
+export const isLightOrDarkColor = value => {
+  var _color;
+  const rgbObject = (_color = color(value)) === null || _color === void 0 ? void 0 : _color.rgb();
+  if (rgbObject) {
+    const {
+      r: red,
+      g: green,
+      b: blue
+    } = rgbObject;
+    // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+    const hsp = Math.sqrt(0.299 * (red * red) + 0.587 * (green * green) + 0.114 * (blue * blue));
+    // Using the HSP value, determine whether the color is light or dark
+    if (hsp > 127.5) {
+      return 'light';
+    }
+    return 'dark';
+  }
+  // Fallback to light luminosity
+  return 'light';
+};

package/esm/color/overrideAlpha.js

@@ -0,0 +1,15 @@
+import { color } from 'd3-color';
+
+/**
+ * Modify the alpha value of an rgba string
+ * @param color - valid color value, i.e. `#ffffff` or`rgba(255, 255, 255, 1)`
+ * @param newOpacity - 0.5
+ * @returns rgbaString - `rgba(255, 255, 255, 0.5)`
+ */
+export const overrideAlpha = (value, opacity) => {
+  var _d3Color$copy$formatR;
+  const d3Color = color(value);
+  return (_d3Color$copy$formatR = d3Color === null || d3Color === void 0 ? void 0 : d3Color.copy({
+    opacity
+  }).formatRgb()) !== null && _d3Color$copy$formatR !== void 0 ? _d3Color$copy$formatR : value;
+};