ref(timeSince): Add tooltip underlines (#33835)

static/app/components/hovercard.tsx

@@ -280,7 +280,7 @@ function getTipDirection(
 }
 
 const Trigger = styled('span')<{showUnderline?: boolean}>`
-  ${p => p.showUnderline && p.theme.tooltipUnderline};
+  ${p => p.showUnderline && p.theme.tooltipUnderline()};
 `;
 
 const HovercardContainer = styled('div')`

static/app/components/timeSince.tsx

@@ -7,6 +7,7 @@ import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
 import {getDuration} from 'sentry/utils/formatters';
 import getDynamicText from 'sentry/utils/getDynamicText';
+import {ColorOrAlias} from 'sentry/utils/theme';
 
 import Tooltip from './tooltip';
 
@@ -46,6 +47,8 @@ interface Props extends DefaultProps, React.TimeHTMLAttributes<HTMLTimeElement>
   shorten?: boolean;
 
   tooltipTitle?: React.ReactNode;
+
+  tooltipUnderlineColor?: ColorOrAlias;
 }
 
 type State = {
@@ -106,6 +109,7 @@ class TimeSince extends React.PureComponent<Props, State> {
       disabledAbsoluteTooltip,
       className,
       tooltipTitle,
+      tooltipUnderlineColor,
       shorten: _shorten,
       extraShort: _extraShort,
       ...props
@@ -124,6 +128,8 @@ class TimeSince extends React.PureComponent<Props, State> {
     return (
       <Tooltip
         disabled={disabledAbsoluteTooltip}
+        underlineColor={tooltipUnderlineColor}
+        showUnderline
         title={
           <div>
             <div>{tooltipTitle}</div>

static/app/components/tooltip.tsx

@@ -18,6 +18,7 @@ import {IS_ACCEPTANCE_TEST} from 'sentry/constants/index';
 import space from 'sentry/styles/space';
 import domId from 'sentry/utils/domId';
 import testableTransition from 'sentry/utils/testableTransition';
+import {ColorOrAlias} from 'sentry/utils/theme';
 
 import {AcceptanceTestTooltip} from './acceptanceTestTooltip';
 
@@ -106,6 +107,11 @@ export interface InternalTooltipProps {
    * If child node supports ref forwarding, you can skip apply a wrapper
    */
   skipWrapper?: boolean;
+
+  /**
+   * Color of the dotted underline, if available. See also: showUnderline.
+   */
+  underlineColor?: ColorOrAlias;
 }
 
 /**
@@ -144,6 +150,7 @@ export function DO_NOT_USE_TOOLTIP({
   isHoverable,
   popperStyle,
   showUnderline,
+  underlineColor,
   showOnlyOnOverflow,
   skipWrapper,
   title,
@@ -246,7 +253,7 @@ export function DO_NOT_USE_TOOLTIP({
         ...containerProps,
         style: {
           ...triggerChildren.props.style,
-          ...(showUnderline && theme.tooltipUnderline),
+          ...(showUnderline && theme.tooltipUnderline(underlineColor)),
         },
         ref: setRef,
       });
@@ -257,7 +264,7 @@ export function DO_NOT_USE_TOOLTIP({
     return (
       <Container
         {...containerProps}
-        style={showUnderline ? theme.tooltipUnderline : undefined}
+        style={showUnderline ? theme.tooltipUnderline(underlineColor) : undefined}
         className={className}
         ref={setRef}
       >

static/app/styles/global.tsx

@@ -14,7 +14,7 @@ const styles = (theme: Theme, isDark: boolean) => css`
   }
 
   abbr {
-    ${theme.tooltipUnderline};
+    ${theme.tooltipUnderline()};
   }
 
   a {

static/app/utils/theme.tsx

@@ -554,12 +554,14 @@ const generateButtonTheme = (colors: BaseColors, alias: Aliases) => ({
   },
 });
 
-const generateUtils = (colors: BaseColors) => ({
-  tooltipUnderline: {
-    textDecoration: `underline dotted ${colors.gray300}`,
+const generateUtils = (colors: BaseColors, aliases: Aliases) => ({
+  tooltipUnderline: (underlineColor: ColorOrAlias = 'gray300') => ({
+    textDecoration: `underline dotted ${
+      colors[underlineColor] ?? aliases[underlineColor]
+    }`,
     textDecorationThickness: '0.75px',
     textUnderlineOffset: '1.25px',
-  },
+  }),
 });
 
 const iconSizes = {
@@ -810,7 +812,7 @@ export const lightTheme = {
     ...darkColors,
     ...darkAliases,
   },
-  ...generateUtils(lightColors),
+  ...generateUtils(lightColors, lightAliases),
   alert: generateAlertTheme(lightColors, lightAliases),
   badge: generateBadgeTheme(lightColors),
   button: generateButtonTheme(lightColors, lightAliases),
@@ -833,7 +835,7 @@ export const darkTheme: Theme = {
     ...lightColors,
     ...lightAliases,
   },
-  ...generateUtils(darkColors),
+  ...generateUtils(darkColors, lightAliases),
   alert: generateAlertTheme(darkColors, darkAliases),
   badge: generateBadgeTheme(darkColors),
   button: generateButtonTheme(darkColors, darkAliases),
@@ -848,9 +850,9 @@ export const darkTheme: Theme = {
 };
 
 export type Theme = typeof lightTheme;
-export type Aliases = typeof lightAliases;
-
 export type Color = keyof typeof lightColors;
+export type Aliases = typeof lightAliases;
+export type ColorOrAlias = keyof Aliases | Color;
 export type IconSize = keyof typeof iconSizes;
 
 export default commonTheme;

static/app/views/dashboardsV2/manage/dashboardCard.tsx

@@ -134,7 +134,7 @@ const DateSelected = styled('div')`
 `;
 
 const DateStatus = styled('span')`
-  color: ${p => p.theme.purple300};
+  color: ${p => p.theme.subText};
   padding-left: ${space(1)};
 `;
 

static/app/views/eventsV2/querycard.tsx

@@ -140,7 +140,7 @@ const DateSelected = styled('div')`
 `;
 
 const DateStatus = styled('span')`
-  color: ${p => p.theme.purple300};
+  color: ${p => p.theme.subText};
   padding-left: ${space(1)};
 `;
 

static/app/views/projectDetail/projectLatestAlerts.tsx

@@ -15,7 +15,6 @@ import {t, tct} from 'sentry/locale';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
-import {Theme} from 'sentry/utils/theme';
 
 import {Incident, IncidentStatus} from '../alerts/types';
 
@@ -163,7 +162,14 @@ class ProjectLatestAlerts extends AsyncComponent<Props, State> {
               ? tct('Resolved [date]', {
                   date: dateClosed ? <TimeSince date={dateClosed} /> : null,
                 })
-              : tct('Triggered [date]', {date: <TimeSince date={dateStarted} />})}
+              : tct('Triggered [date]', {
+                  date: (
+                    <TimeSince
+                      date={dateStarted}
+                      tooltipUnderlineColor={getStatusColor(statusProps)}
+                    />
+                  ),
+                })}
           </AlertDate>
         </AlertDetails>
       </AlertRowLink>
@@ -241,12 +247,8 @@ type StatusColorProps = {
   isWarning: boolean;
 };
 
-const getStatusColor = ({
-  theme,
-  isResolved,
-  isWarning,
-}: {theme: Theme} & StatusColorProps) =>
-  isResolved ? theme.green300 : isWarning ? theme.yellow300 : theme.red300;
+const getStatusColor = ({isResolved, isWarning}: StatusColorProps) =>
+  isResolved ? 'green300' : isWarning ? 'yellow300' : 'red300';
 
 const AlertBadgeWrapper = styled('div')<{icon: React.ReactNode} & StatusColorProps>`
   display: flex;
@@ -271,7 +273,7 @@ const AlertTitle = styled('div')`
 `;
 
 const AlertDate = styled('span')<StatusColorProps>`
-  color: ${p => getStatusColor(p)};
+  color: ${p => p.theme[getStatusColor(p)]};
 `;
 
 const StyledEmptyStateWarning = styled(EmptyStateWarning)`