@atlaskit/lozenge/dist/es2019/new/icon-renderer.js

A lozenge is a visual indicator used to highlight an item's status for quick recognition.

/* icon-renderer.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./icon-renderer.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Box } from '@atlaskit/primitives/compiled';
// Map lozenge colors to appropriate icon colors.
//
// We intentionally use `color.text.*.bolder` tokens for icons across all
// colored lozenges (semantic + accent). Text tokens use higher-stop palette
// values (Color700+) which pass 3:1 contrast against subtler backgrounds in
// every interactive state — including pressed where icon Color600 fails for
// most hues. Using text tokens uniformly:
//   - avoids global changes to the `color.icon.*` token ramps
//   - keeps icon and text visually aligned in the lozenge
//   - guarantees ≥3:1 contrast across default/hover/pressed states
//
// Neutral lozenges use `color.text.subtle` to match the neutral text styling
// and remain consistent with their alpha-based backgrounds.
const getIconColor = color => {
  switch (color) {
    // Semantic
    case 'success':
      return "var(--ds-text-success, #4C6B1F)";
    case 'warning':
      return "var(--ds-text-warning, #9E4C00)";
    case 'danger':
      return "var(--ds-text-danger, #AE2E24)";
    case 'information':
      return "var(--ds-text-information, #1558BC)";
    case 'discovery':
      return "var(--ds-text-discovery, #803FA5)";
    case 'neutral':
      return "var(--ds-text-subtle, #505258)";
    // Accent
    case 'accent-red':
      return "var(--ds-text-accent-red, #AE2E24)";
    case 'accent-orange':
      return "var(--ds-text-accent-orange, #9E4C00)";
    case 'accent-yellow':
      return "var(--ds-text-accent-yellow, #7F5F01)";
    case 'accent-lime':
      return "var(--ds-text-accent-lime, #4C6B1F)";
    case 'accent-green':
      return "var(--ds-text-accent-green, #216E4E)";
    case 'accent-teal':
      return "var(--ds-text-accent-teal, #206A83)";
    case 'accent-blue':
      return "var(--ds-text-accent-blue, #1558BC)";
    case 'accent-purple':
      return "var(--ds-text-accent-purple, #803FA5)";
    case 'accent-magenta':
      return "var(--ds-text-accent-magenta, #943D73)";
    case 'accent-gray':
      return "var(--ds-text-subtle, #505258)";
    default:
      return "var(--ds-text-subtle, #505258)";
  }
};
const styles = {
  motion: "_k8m01ylx _1oeci9qs _6fl41d08"
};

/**
 * Icon renderer for lozenge components
 * Handles proper sizing and color theming for icons
 */
const IconRenderer = ({
  icon: Icon,
  color,
  testId,
  size
}) => {
  const iconColor = getIconColor(color);
  return fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Box, {
    xcss: styles.motion,
    style: {
      color: iconColor
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    label: "",
    size: size,
    testId: testId
  })) :
  /*#__PURE__*/
  // Cast required because the lozenge intentionally uses some
  // `color.text.*.bolder` tokens for icons that don't pass 3:1 contrast
  // at their default `color.icon.*` stop. The Icon component types only
  // accept `IconColor`, but text tokens are valid CSS color values and
  // render correctly at runtime.
  React.createElement(Icon, {
    color: iconColor,
    label: "",
    size: size,
    testId: testId
  });
};

// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
export default IconRenderer;