Interactive tags with intent have wrong background color when active

[adidahiya]

Environment

• Package version(s): core v4.17.4
• Operating System: macOS
• Browser name and version: Chrome

Code Sandbox

https://codesandbox.io/s/cool-perlman-5ewi58?file=/src/Popover2Example.tsx

Steps to reproduce

Render a tag with <Tag interactive={true} active={true} intent="warning">Some text</Tag>

OR

Render an uncontrolled Popover2 with a <Tag interactive={true} intent="warning"> child

Actual behavior

Background color is dark gray

Also triggered when an uncontrolled Popover2 opens:

Expected behavior

Background color should be slightly darker orange / brown

Possible solution

1. fix Tag styles when interactive & active modifiers are both enabled
2. add "Active" prop option to Tag example in docs

[adidahiya]

This might be an easy fix, possibly as simple as changing this line:

blueprint/packages/core/src/components/tag/_common.scss

Line 124 in d92e646

&:active {

to be:

&:active,
&.#{$ns}-active {

so that it has sufficient specificity to override these lines:

blueprint/packages/core/src/components/tag/_common.scss

Lines 78 to 79 in d92e646

	&:active,
	&.#{$ns}-active {