@atlaskit/lozenge 13.4.0 → 13.4.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/lozenge
 
+## 13.4.1
+
+### Patch Changes
+
+- [`396504e5d05d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/396504e5d05d4) -
+  [ux] Changed to use pressed state colors on selected lozenge dropdown trigger to keep the semantic
+  colors.
+
 ## 13.4.0
 
 ### Minor Changes

package/dist/cjs/new/icon-renderer.js

@@ -7,13 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.IconRenderer = void 0;
 var _react = _interopRequireDefault(require("react"));
 // Map lozenge colors to appropriate icon colors
-var getIconColor = function getIconColor(color, isSelected) {
-  // When lozenge is selected and interactive, use selected text color for consistency
-  if (isSelected) {
-    return "var(--ds-icon-selected, #1868DB)";
-  }
-
-  // For semantic colors, use corresponding semantic text colors
+var getIconColor = function getIconColor(color) {
+  // For semantic colors, use corresponding semantic icon colors
   switch (color) {
     case 'success':
       return "var(--ds-icon-success, #6A9A23)";
@@ -60,10 +55,9 @@ var getIconColor = function getIconColor(color, isSelected) {
 var IconRenderer = exports.IconRenderer = function IconRenderer(_ref) {
   var Icon = _ref.icon,
     color = _ref.color,
-    isSelected = _ref.isSelected,
     testId = _ref.testId,
     size = _ref.size;
-  var iconColor = getIconColor(color, isSelected);
+  var iconColor = getIconColor(color);
   return /*#__PURE__*/_react.default.createElement(Icon, {
     color: iconColor,
     label: "",

package/dist/cjs/new/lozenge-base.compiled.css

@@ -41,6 +41,7 @@
 ._1k671038{--border-l-factor:1.33}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeviql{min-height:2rem}
+._1xe213kw>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)!important}
 ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))}
 ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)}
 ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)}
@@ -65,7 +66,6 @@
 ._80omtlke{cursor:pointer}
 ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
 ._bfhk14j0{background-color:var(--ds-background-success-subtler,#d3f1a7)}
-._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhk165s{background-color:var(--ds-background-accent-orange-subtler,#fce4a6)}
 ._bfhk1773{background-color:var(--ds-background-accent-yellow-subtler,#f5e989)}
 ._bfhk18wg{background-color:var(--ds-background-danger-subtler,#ffd5d2)}
@@ -137,7 +137,6 @@
 ._irr3kwwr:hover{background-color:var(--ds-background-accent-teal-subtler-hovered,#b1e4f7)}
 ._irr3plhp:hover{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
 ._irr3rumk:hover{background-color:var(--ds-background-discovery-subtler-hovered,#e3bdfa)}
-._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
 ._irr3wejn:hover{background-color:var(--ds-background-accent-gray-subtlest-hovered,#dddee1)}
 ._q4zt1csi:active{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-pressed-value))!important}
 ._1di618ut:active{background-color:var(--ds-background-accent-gray-subtlest-pressed,#b7b9be)}
@@ -154,7 +153,6 @@
 ._1di6d6jc:active{background-color:var(--ds-background-success-subtler-pressed,#b3df72)}
 ._1di6dpo3:active{background-color:var(--ds-background-accent-orange-subtler-pressed,#fbc828)}
 ._1di6jkmi:active{background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
-._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
 ._1di6rwxf:active{background-color:var(--ds-background-accent-blue-subtler-pressed,#8fb8f6)}
 ._1di6ybhx:active{background-color:var(--ds-background-accent-green-subtler-pressed,#7ee2b8)}
 @supports (color:oklch(from white l c h)){._1easxmrh{border-color:oklch(from var(--border-color) calc(l * var(--border-l-factor)) c h)!important}._1r9r1ss3>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-l-factor)) c h)}._1lh71sfd:hover>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-hovered-l-factor)) c h)}._11o31cha:active>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)}._75gv2l9f:hover{border-color:oklch(from var(--border-color) calc(l * var(--border-hovered-l-factor)) c h)!important}._ui3h1ct7:active{border-color:oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h)!important}}

package/dist/cjs/new/lozenge-base.js

@@ -20,11 +20,29 @@ var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2.default)(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; }
+// Get the pressed background color for the selected lozenge dropdown trigger
+var pressedBackgroundMapping = {
+  success: "var(--ds-background-success-subtler-pressed, #B3DF72)",
+  warning: "var(--ds-background-warning-subtler-pressed, #FBC828)",
+  danger: "var(--ds-background-danger-subtler-pressed, #FD9891)",
+  information: "var(--ds-background-information-subtler-pressed, #8FB8F6)",
+  neutral: "var(--ds-background-neutral-pressed, #080F214A)",
+  discovery: "var(--ds-background-discovery-subtler-pressed, #D8A0F7)",
+  'accent-red': "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  'accent-orange': "var(--ds-background-accent-orange-subtler-pressed, #FBC828)",
+  'accent-yellow': "var(--ds-background-accent-yellow-subtler-pressed, #EED12B)",
+  'accent-lime': "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)",
+  'accent-green': "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
+  'accent-teal': "var(--ds-background-accent-teal-subtler-pressed, #9DD9EE)",
+  'accent-blue': "var(--ds-background-accent-blue-subtler-pressed, #8FB8F6)",
+  'accent-purple': "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
+  'accent-magenta': "var(--ds-background-accent-magenta-subtler-pressed, #F797D2)",
+  'accent-gray': "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
+};
 var styles = {
   container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
   containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
   containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
-  containerSelected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
   text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
@@ -60,9 +78,9 @@ var styles = {
   'interactive.accent.purple': "_irr3attl _1di63nfk",
   'interactive.accent.magenta': "_irr31axx _1di642ri",
   'interactive.accent.gray': "_irr3wejn _1di618ut",
-  selectedInteractive: "_irr3ufnl _1di6nozp",
   iconBorderFilter: "_1h6dzs9d _4uq11yqs _1k671038 _m71tr3uz _13muu67f _168qx19p _oe6mmko7 _189qkb7n _u8p61h4e _1t75u67f _hg5mr3uz _1f28f1ug _1xe213rw _1easxmrh _1r9r1ss3",
-  iconBorderInteractiveFilter: "_1iel6xdd _111i1h4e _18dicjiy _hyog26zw _fdt01r5k _46v5hwvj _ylgq1r5k _bg3q9by0 _196p1btq _18mn783i _l0666xdd _pclnn8xv _ockq1r5k _aewt1n8h _4cvx7ddx _1cp21w66 _q4zt1csi _1gqs1mvc _75gv2l9f _1lh71sfd _ui3h1ct7 _11o31cha"
+  iconBorderInteractiveFilter: "_1iel6xdd _111i1h4e _18dicjiy _hyog26zw _fdt01r5k _46v5hwvj _ylgq1r5k _bg3q9by0 _196p1btq _18mn783i _l0666xdd _pclnn8xv _ockq1r5k _aewt1n8h _4cvx7ddx _1cp21w66 _q4zt1csi _1gqs1mvc _75gv2l9f _1lh71sfd _ui3h1ct7 _11o31cha",
+  containerSelected: "_1xe213kw"
 };
 
 /**
@@ -104,7 +122,6 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
-    isSelected: isInteractive ? isSelected : undefined,
     testId: testId && "".concat(testId, "--icon")
   }), /*#__PURE__*/React.createElement("span", {
     style: {
@@ -116,18 +133,19 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
   }, children), isInteractive && /*#__PURE__*/React.createElement(_chevronDown.default, {
     label: "",
     size: "small",
-    color: isSelected ? "var(--ds-icon-selected, #1868DB)" : 'currentColor',
+    color: 'currentColor',
     testId: testId && "".concat(testId, "--chevron")
   }));
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(_pressable.default, {
       ref: ref,
-      xcss: (0, _css.cx)(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
+      xcss: (0, _css.cx)(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
       onClick: onClick,
       style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
         // Specified because Pressable has a default border:none which overrides the border specified on the container
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        border: "solid ".concat("var(--ds-border-width, 1px)", " ", isSelected ? "var(--ds-border-selected, #1868DB)" : 'transparent')
+        border: "solid ".concat("var(--ds-border-width, 1px)", " ", isSelected ? 'oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h) !important' : 'transparent'),
+        backgroundColor: isSelected ? pressedBackgroundMapping[resolvedColor] : undefined
       }),
       testId: testId,
       analyticsContext: analyticsContext,

package/dist/es2019/new/icon-renderer.js

@@ -1,12 +1,7 @@
 import React from 'react';
 // Map lozenge colors to appropriate icon colors
-const getIconColor = (color, isSelected) => {
-  // When lozenge is selected and interactive, use selected text color for consistency
-  if (isSelected) {
-    return "var(--ds-icon-selected, #1868DB)";
-  }
-
-  // For semantic colors, use corresponding semantic text colors
+const getIconColor = color => {
+  // For semantic colors, use corresponding semantic icon colors
   switch (color) {
     case 'success':
       return "var(--ds-icon-success, #6A9A23)";
@@ -53,11 +48,10 @@ const getIconColor = (color, isSelected) => {
 export const IconRenderer = ({
   icon: Icon,
   color,
-  isSelected,
   testId,
   size
 }) => {
-  const iconColor = getIconColor(color, isSelected);
+  const iconColor = getIconColor(color);
   return /*#__PURE__*/React.createElement(Icon, {
     color: iconColor,
     label: "",

package/dist/es2019/new/lozenge-base.compiled.css

@@ -41,6 +41,7 @@
 ._1k671038{--border-l-factor:1.33}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeviql{min-height:2rem}
+._1xe213kw>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)!important}
 ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))}
 ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)}
 ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)}
@@ -65,7 +66,6 @@
 ._80omtlke{cursor:pointer}
 ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
 ._bfhk14j0{background-color:var(--ds-background-success-subtler,#d3f1a7)}
-._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhk165s{background-color:var(--ds-background-accent-orange-subtler,#fce4a6)}
 ._bfhk1773{background-color:var(--ds-background-accent-yellow-subtler,#f5e989)}
 ._bfhk18wg{background-color:var(--ds-background-danger-subtler,#ffd5d2)}
@@ -137,7 +137,6 @@
 ._irr3kwwr:hover{background-color:var(--ds-background-accent-teal-subtler-hovered,#b1e4f7)}
 ._irr3plhp:hover{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
 ._irr3rumk:hover{background-color:var(--ds-background-discovery-subtler-hovered,#e3bdfa)}
-._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
 ._irr3wejn:hover{background-color:var(--ds-background-accent-gray-subtlest-hovered,#dddee1)}
 ._q4zt1csi:active{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-pressed-value))!important}
 ._1di618ut:active{background-color:var(--ds-background-accent-gray-subtlest-pressed,#b7b9be)}
@@ -154,7 +153,6 @@
 ._1di6d6jc:active{background-color:var(--ds-background-success-subtler-pressed,#b3df72)}
 ._1di6dpo3:active{background-color:var(--ds-background-accent-orange-subtler-pressed,#fbc828)}
 ._1di6jkmi:active{background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
-._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
 ._1di6rwxf:active{background-color:var(--ds-background-accent-blue-subtler-pressed,#8fb8f6)}
 ._1di6ybhx:active{background-color:var(--ds-background-accent-green-subtler-pressed,#7ee2b8)}
 @supports (color:oklch(from white l c h)){._1easxmrh{border-color:oklch(from var(--border-color) calc(l * var(--border-l-factor)) c h)!important}._1r9r1ss3>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-l-factor)) c h)}._1lh71sfd:hover>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-hovered-l-factor)) c h)}._11o31cha:active>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)}._75gv2l9f:hover{border-color:oklch(from var(--border-color) calc(l * var(--border-hovered-l-factor)) c h)!important}._ui3h1ct7:active{border-color:oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h)!important}}

package/dist/es2019/new/lozenge-base.js

@@ -8,11 +8,29 @@ import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import Pressable from '@atlaskit/primitives/pressable';
 import IconRenderer from './icon-renderer';
 import { getThemeStyles, resolveLozengeColor } from './utils';
+// Get the pressed background color for the selected lozenge dropdown trigger
+const pressedBackgroundMapping = {
+  success: "var(--ds-background-success-subtler-pressed, #B3DF72)",
+  warning: "var(--ds-background-warning-subtler-pressed, #FBC828)",
+  danger: "var(--ds-background-danger-subtler-pressed, #FD9891)",
+  information: "var(--ds-background-information-subtler-pressed, #8FB8F6)",
+  neutral: "var(--ds-background-neutral-pressed, #080F214A)",
+  discovery: "var(--ds-background-discovery-subtler-pressed, #D8A0F7)",
+  'accent-red': "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  'accent-orange': "var(--ds-background-accent-orange-subtler-pressed, #FBC828)",
+  'accent-yellow': "var(--ds-background-accent-yellow-subtler-pressed, #EED12B)",
+  'accent-lime': "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)",
+  'accent-green': "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
+  'accent-teal': "var(--ds-background-accent-teal-subtler-pressed, #9DD9EE)",
+  'accent-blue': "var(--ds-background-accent-blue-subtler-pressed, #8FB8F6)",
+  'accent-purple': "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
+  'accent-magenta': "var(--ds-background-accent-magenta-subtler-pressed, #F797D2)",
+  'accent-gray': "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
+};
 const styles = {
   container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
   containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
   containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
-  containerSelected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
   text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
@@ -48,9 +66,9 @@ const styles = {
   'interactive.accent.purple': "_irr3attl _1di63nfk",
   'interactive.accent.magenta': "_irr31axx _1di642ri",
   'interactive.accent.gray': "_irr3wejn _1di618ut",
-  selectedInteractive: "_irr3ufnl _1di6nozp",
   iconBorderFilter: "_1h6dzs9d _4uq11yqs _1k671038 _m71tr3uz _13muu67f _168qx19p _oe6mmko7 _189qkb7n _u8p61h4e _1t75u67f _hg5mr3uz _1f28f1ug _1xe213rw _1easxmrh _1r9r1ss3",
-  iconBorderInteractiveFilter: "_1iel6xdd _111i1h4e _18dicjiy _hyog26zw _fdt01r5k _46v5hwvj _ylgq1r5k _bg3q9by0 _196p1btq _18mn783i _l0666xdd _pclnn8xv _ockq1r5k _aewt1n8h _4cvx7ddx _1cp21w66 _q4zt1csi _1gqs1mvc _75gv2l9f _1lh71sfd _ui3h1ct7 _11o31cha"
+  iconBorderInteractiveFilter: "_1iel6xdd _111i1h4e _18dicjiy _hyog26zw _fdt01r5k _46v5hwvj _ylgq1r5k _bg3q9by0 _196p1btq _18mn783i _l0666xdd _pclnn8xv _ockq1r5k _aewt1n8h _4cvx7ddx _1cp21w66 _q4zt1csi _1gqs1mvc _75gv2l9f _1lh71sfd _ui3h1ct7 _11o31cha",
+  containerSelected: "_1xe213kw"
 };
 
 /**
@@ -94,7 +112,6 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
-    isSelected: isInteractive ? isSelected : undefined,
     testId: testId && `${testId}--icon`
   }), /*#__PURE__*/React.createElement("span", {
     style: {
@@ -106,20 +123,21 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, children), isInteractive && /*#__PURE__*/React.createElement(ChevronDownIcon, {
     label: "",
     size: "small",
-    color: isSelected ? "var(--ds-icon-selected, #1868DB)" : 'currentColor',
+    color: 'currentColor',
     testId: testId && `${testId}--chevron`
   }));
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(Pressable, {
       ref: ref,
-      xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
+      xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
       onClick: onClick,
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ...commonStyleOverrides,
         // Specified because Pressable has a default border:none which overrides the border specified on the container
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        border: `solid ${"var(--ds-border-width, 1px)"} ${isSelected ? "var(--ds-border-selected, #1868DB)" : 'transparent'}`
+        border: `solid ${"var(--ds-border-width, 1px)"} ${isSelected ? 'oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h) !important' : 'transparent'}`,
+        backgroundColor: isSelected ? pressedBackgroundMapping[resolvedColor] : undefined
       },
       testId: testId,
       analyticsContext: analyticsContext,

package/dist/esm/new/icon-renderer.js

@@ -1,12 +1,7 @@
 import React from 'react';
 // Map lozenge colors to appropriate icon colors
-var getIconColor = function getIconColor(color, isSelected) {
-  // When lozenge is selected and interactive, use selected text color for consistency
-  if (isSelected) {
-    return "var(--ds-icon-selected, #1868DB)";
-  }
-
-  // For semantic colors, use corresponding semantic text colors
+var getIconColor = function getIconColor(color) {
+  // For semantic colors, use corresponding semantic icon colors
   switch (color) {
     case 'success':
       return "var(--ds-icon-success, #6A9A23)";
@@ -53,10 +48,9 @@ var getIconColor = function getIconColor(color, isSelected) {
 export var IconRenderer = function IconRenderer(_ref) {
   var Icon = _ref.icon,
     color = _ref.color,
-    isSelected = _ref.isSelected,
     testId = _ref.testId,
     size = _ref.size;
-  var iconColor = getIconColor(color, isSelected);
+  var iconColor = getIconColor(color);
   return /*#__PURE__*/React.createElement(Icon, {
     color: iconColor,
     label: "",

package/dist/esm/new/lozenge-base.compiled.css

@@ -41,6 +41,7 @@
 ._1k671038{--border-l-factor:1.33}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeviql{min-height:2rem}
+._1xe213kw>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)!important}
 ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))}
 ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)}
 ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)}
@@ -65,7 +66,6 @@
 ._80omtlke{cursor:pointer}
 ._bfhk10f4{background-color:var(--ds-background-warning-subtler,#fce4a6)}
 ._bfhk14j0{background-color:var(--ds-background-success-subtler,#d3f1a7)}
-._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
 ._bfhk165s{background-color:var(--ds-background-accent-orange-subtler,#fce4a6)}
 ._bfhk1773{background-color:var(--ds-background-accent-yellow-subtler,#f5e989)}
 ._bfhk18wg{background-color:var(--ds-background-danger-subtler,#ffd5d2)}
@@ -137,7 +137,6 @@
 ._irr3kwwr:hover{background-color:var(--ds-background-accent-teal-subtler-hovered,#b1e4f7)}
 ._irr3plhp:hover{background-color:var(--ds-background-neutral-hovered,#0b120e24)}
 ._irr3rumk:hover{background-color:var(--ds-background-discovery-subtler-hovered,#e3bdfa)}
-._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
 ._irr3wejn:hover{background-color:var(--ds-background-accent-gray-subtlest-hovered,#dddee1)}
 ._q4zt1csi:active{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-pressed-value))!important}
 ._1di618ut:active{background-color:var(--ds-background-accent-gray-subtlest-pressed,#b7b9be)}
@@ -154,7 +153,6 @@
 ._1di6d6jc:active{background-color:var(--ds-background-success-subtler-pressed,#b3df72)}
 ._1di6dpo3:active{background-color:var(--ds-background-accent-orange-subtler-pressed,#fbc828)}
 ._1di6jkmi:active{background-color:var(--ds-background-danger-subtler-pressed,#fd9891)}
-._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
 ._1di6rwxf:active{background-color:var(--ds-background-accent-blue-subtler-pressed,#8fb8f6)}
 ._1di6ybhx:active{background-color:var(--ds-background-accent-green-subtler-pressed,#7ee2b8)}
 @supports (color:oklch(from white l c h)){._1easxmrh{border-color:oklch(from var(--border-color) calc(l * var(--border-l-factor)) c h)!important}._1r9r1ss3>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-l-factor)) c h)}._1lh71sfd:hover>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-hovered-l-factor)) c h)}._11o31cha:active>span:first-of-type>svg{color:oklch(from var(--icon-color) calc(l * var(--icon-pressed-l-factor)) c h)}._75gv2l9f:hover{border-color:oklch(from var(--border-color) calc(l * var(--border-hovered-l-factor)) c h)!important}._ui3h1ct7:active{border-color:oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h)!important}}

package/dist/esm/new/lozenge-base.js

@@ -11,11 +11,29 @@ import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import Pressable from '@atlaskit/primitives/pressable';
 import IconRenderer from './icon-renderer';
 import { getThemeStyles, resolveLozengeColor } from './utils';
+// Get the pressed background color for the selected lozenge dropdown trigger
+var pressedBackgroundMapping = {
+  success: "var(--ds-background-success-subtler-pressed, #B3DF72)",
+  warning: "var(--ds-background-warning-subtler-pressed, #FBC828)",
+  danger: "var(--ds-background-danger-subtler-pressed, #FD9891)",
+  information: "var(--ds-background-information-subtler-pressed, #8FB8F6)",
+  neutral: "var(--ds-background-neutral-pressed, #080F214A)",
+  discovery: "var(--ds-background-discovery-subtler-pressed, #D8A0F7)",
+  'accent-red': "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  'accent-orange': "var(--ds-background-accent-orange-subtler-pressed, #FBC828)",
+  'accent-yellow': "var(--ds-background-accent-yellow-subtler-pressed, #EED12B)",
+  'accent-lime': "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)",
+  'accent-green': "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
+  'accent-teal': "var(--ds-background-accent-teal-subtler-pressed, #9DD9EE)",
+  'accent-blue': "var(--ds-background-accent-blue-subtler-pressed, #8FB8F6)",
+  'accent-purple': "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
+  'accent-magenta': "var(--ds-background-accent-magenta-subtler-pressed, #F797D2)",
+  'accent-gray': "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
+};
 var styles = {
   container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
   containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
   containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
-  containerSelected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
   text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
@@ -51,9 +69,9 @@ var styles = {
   'interactive.accent.purple': "_irr3attl _1di63nfk",
   'interactive.accent.magenta': "_irr31axx _1di642ri",
   'interactive.accent.gray': "_irr3wejn _1di618ut",
-  selectedInteractive: "_irr3ufnl _1di6nozp",
   iconBorderFilter: "_1h6dzs9d _4uq11yqs _1k671038 _m71tr3uz _13muu67f _168qx19p _oe6mmko7 _189qkb7n _u8p61h4e _1t75u67f _hg5mr3uz _1f28f1ug _1xe213rw _1easxmrh _1r9r1ss3",
-  iconBorderInteractiveFilter: "_1iel6xdd _111i1h4e _18dicjiy _hyog26zw _fdt01r5k _46v5hwvj _ylgq1r5k _bg3q9by0 _196p1btq _18mn783i _l0666xdd _pclnn8xv _ockq1r5k _aewt1n8h _4cvx7ddx _1cp21w66 _q4zt1csi _1gqs1mvc _75gv2l9f _1lh71sfd _ui3h1ct7 _11o31cha"
+  iconBorderInteractiveFilter: "_1iel6xdd _111i1h4e _18dicjiy _hyog26zw _fdt01r5k _46v5hwvj _ylgq1r5k _bg3q9by0 _196p1btq _18mn783i _l0666xdd _pclnn8xv _ockq1r5k _aewt1n8h _4cvx7ddx _1cp21w66 _q4zt1csi _1gqs1mvc _75gv2l9f _1lh71sfd _ui3h1ct7 _11o31cha",
+  containerSelected: "_1xe213kw"
 };
 
 /**
@@ -95,7 +113,6 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
     size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
-    isSelected: isInteractive ? isSelected : undefined,
     testId: testId && "".concat(testId, "--icon")
   }), /*#__PURE__*/React.createElement("span", {
     style: {
@@ -107,18 +124,19 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
   }, children), isInteractive && /*#__PURE__*/React.createElement(ChevronDownIcon, {
     label: "",
     size: "small",
-    color: isSelected ? "var(--ds-icon-selected, #1868DB)" : 'currentColor',
+    color: 'currentColor',
     testId: testId && "".concat(testId, "--chevron")
   }));
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(Pressable, {
       ref: ref,
-      xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
+      xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
       onClick: onClick,
       style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
         // Specified because Pressable has a default border:none which overrides the border specified on the container
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        border: "solid ".concat("var(--ds-border-width, 1px)", " ", isSelected ? "var(--ds-border-selected, #1868DB)" : 'transparent')
+        border: "solid ".concat("var(--ds-border-width, 1px)", " ", isSelected ? 'oklch(from var(--border-color) calc(l * var(--border-pressed-l-factor)) c h) !important' : 'transparent'),
+        backgroundColor: isSelected ? pressedBackgroundMapping[resolvedColor] : undefined
       }),
       testId: testId,
       analyticsContext: analyticsContext,

package/dist/types/new/icon-renderer.d.ts

@@ -9,10 +9,6 @@ export interface IconRendererProps {
      * The lozenge color to determine icon color
      */
     color: LozengeColor;
-    /**
-     * Whether the lozenge is in a selected state
-     */
-    isSelected?: boolean;
     /**
      * Test ID for the icon
      */
@@ -26,5 +22,5 @@ export interface IconRendererProps {
  * Icon renderer for lozenge components
  * Handles proper sizing and color theming for icons
  */
-export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId, size, }: IconRendererProps) => React.JSX.Element;
+export declare const IconRenderer: ({ icon: Icon, color, testId, size }: IconRendererProps) => React.JSX.Element;
 export default IconRenderer;

package/dist/types-ts4.5/new/icon-renderer.d.ts

@@ -9,10 +9,6 @@ export interface IconRendererProps {
      * The lozenge color to determine icon color
      */
     color: LozengeColor;
-    /**
-     * Whether the lozenge is in a selected state
-     */
-    isSelected?: boolean;
     /**
      * Test ID for the icon
      */
@@ -26,5 +22,5 @@ export interface IconRendererProps {
  * Icon renderer for lozenge components
  * Handles proper sizing and color theming for icons
  */
-export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId, size, }: IconRendererProps) => React.JSX.Element;
+export declare const IconRenderer: ({ icon: Icon, color, testId, size }: IconRendererProps) => React.JSX.Element;
 export default IconRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "13.4.0",
+	"version": "13.4.1",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"