@atlaskit/lozenge/dist/cjs/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 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./icon-renderer.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireDefault(require("react"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _compiled = require("@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.
var getIconColor = function 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)";
  }
};
var styles = {
  motion: "_k8m01ylx _1oeci9qs _6fl41d08"
};

/**
 * Icon renderer for lozenge components
 * Handles proper sizing and color theming for icons
 */
var IconRenderer = function IconRenderer(_ref) {
  var Icon = _ref.icon,
    color = _ref.color,
    testId = _ref.testId,
    size = _ref.size;
  var iconColor = getIconColor(color);
  return (0, _fg.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    xcss: styles.motion,
    style: {
      color: iconColor
    }
  }, /*#__PURE__*/_react.default.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.default.createElement(Icon, {
    color: iconColor,
    label: "",
    size: size,
    testId: testId
  });
};

// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
var _default = exports.default = IconRenderer;