ref(ui): Update tag backgrounds & borders (#30763)

* ref(ui): Update tag backgrounds & borders

* ref(ui): Use purple for info tags

Blue is reserved for links. Purple is the new accent color for info tags and alerts.

* fix(ui): Use lighter separator color for <InboxReason /> tags

* feat(ui): Track click event on tags

* ref(ui): Use trackAdvancedAnalyticsEvent for tag click event

* fix(tsc): Add tag.clicked to analytics event map

static/app/components/group/inboxBadges/inboxReason.tsx

@@ -189,7 +189,7 @@ const TooltipDescription = styled('div')`
 `;
 
 const Separator = styled('span')<{type: keyof Theme['tag']}>`
-  color: ${p => p.theme.tag[p.type].iconColor};
+  color: ${p => p.theme.tag[p.type].border};
   opacity: 80%;
 `;
 

static/app/components/tag.tsx

@@ -9,6 +9,7 @@ import {IconClose, IconOpen} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
+import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import theme, {Color, Theme} from 'sentry/utils/theme';
 
 const TAG_HEIGHT = '20px';
@@ -95,6 +96,13 @@ function Tag({
     onDismiss?.();
   }
 
+  const trackClickEvent = () => {
+    trackAdvancedAnalyticsEvent('tag.clicked', {
+      is_clickable: defined(onClick) || defined(to) || defined(href),
+      organization: null,
+    });
+  };
+
   function tagIcon() {
     if (React.isValidElement(icon)) {
       return <IconWrapper>{React.cloneElement(icon, {...iconsProps})}</IconWrapper>;
@@ -130,7 +138,11 @@ function Tag({
     return tag;
   }
 
-  return <TagWrapper {...props}>{tagWithParent()}</TagWrapper>;
+  return (
+    <TagWrapper {...props} onClick={trackClickEvent}>
+      {tagWithParent()}
+    </TagWrapper>
+  );
 }
 
 const TagWrapper = styled('span')`
@@ -143,6 +155,7 @@ export const Background = styled('div')<{type: keyof Theme['tag']}>`
   height: ${TAG_HEIGHT};
   border-radius: ${TAG_HEIGHT};
   background-color: ${p => p.theme.tag[p.type].background};
+  border: solid 1px ${p => p.theme.tag[p.type].border};
   padding: 0 ${space(1)};
 `;
 
@@ -152,7 +165,10 @@ const IconWrapper = styled('span')`
 `;
 
 const Text = styled('span')<{maxWidth: number; type: keyof Theme['tag']}>`
-  color: ${p => (['black', 'focus'].includes(p.type) ? p.theme.white : p.theme.gray500)};
+  color: ${p =>
+    ['black', 'white'].includes(p.type)
+      ? p.theme.tag[p.type].iconColor
+      : p.theme.textColor};
   max-width: ${p => p.maxWidth}px;
   overflow: hidden;
   white-space: nowrap;

static/app/utils/analytics/issueAnalyticsEvents.tsx

@@ -39,6 +39,9 @@ export type IssueEventParameters = {
   };
   'issue.shared_publicly': {};
   resolve_issue: {release: string};
+  'tag.clicked': {
+    is_clickable: boolean;
+  };
 };
 
 export type IssueEventKey = keyof IssueEventParameters;
@@ -57,4 +60,5 @@ export const issueEventMap: Record<IssueEventKey, string | null> = {
   'issues_stream.issue_assigned': 'Assigned Issue from Issues Stream',
   'issue.shared_publicly': 'Issue Shared Publicly',
   resolve_issue: 'Resolve Issue',
+  'tag.clicked': 'Tag: Clicked',
 };

static/app/utils/theme.tsx

@@ -400,39 +400,48 @@ const generateBadgeTheme = (colors: BaseColors) => ({
 
 const generateTagTheme = (colors: BaseColors) => ({
   default: {
-    background: colors.gray200,
-    iconColor: colors.purple300,
+    background: colors.surface400,
+    border: colors.gray200,
+    iconColor: colors.gray300,
   },
   promotion: {
-    background: colors.pink200,
+    background: colors.pink100,
+    border: colors.pink200,
     iconColor: colors.pink300,
   },
   highlight: {
-    background: colors.purple200,
+    background: colors.purple100,
+    border: colors.purple200,
     iconColor: colors.purple300,
   },
   warning: {
-    background: colors.yellow200,
+    background: colors.yellow100,
+    border: colors.yellow200,
     iconColor: colors.yellow300,
   },
   success: {
-    background: colors.green200,
+    background: colors.green100,
+    border: colors.green200,
     iconColor: colors.green300,
   },
   error: {
-    background: colors.red200,
+    background: colors.red100,
+    border: colors.red200,
     iconColor: colors.red300,
   },
   info: {
-    background: colors.blue200,
-    iconColor: colors.blue300,
+    background: colors.purple100,
+    border: colors.purple200,
+    iconColor: colors.purple300,
   },
   white: {
-    background: colors.surface200,
-    iconColor: colors.gray500,
+    background: colors.white,
+    border: colors.white,
+    iconColor: colors.black,
   },
   black: {
-    background: colors.gray500,
+    background: colors.black,
+    border: colors.black,
     iconColor: colors.white,
   },
 });