ref(theme): replace subText with content.secondary

static/AGENTS.md

@@ -224,7 +224,7 @@ import {Heading} from '@sentry/scraps/text';
 
 // ❌ Do not use styled and create a new styled component
 const Title = styled('h4')`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => p.theme.fontSizes.small};
 `;
 
@@ -251,7 +251,7 @@ import {Text} from '@sentry/scraps/text';
 
 // ❌ Do not use styled and create a new styled component
 const Label = styled('span')`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => p.theme.fontSizes.small};
 `;
 
@@ -268,7 +268,7 @@ import {Text} from '@sentry/scraps/text';
 
 // ❌ Do not style intrinsic elements directly
 const Paragraph = styled('p')`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   line-height: 1.5;
 `;
 
@@ -313,7 +313,7 @@ function Content() {
 const Component = styled('div')`
   display: flex;
   flex-directon: column;
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => p.theme.fontSize.lg};
 `;
 

static/app/components/IssueStreamHeaderLabel.tsx

@@ -13,7 +13,7 @@ const IssueStreamHeaderLabel = styled('div')<{
   margin-right: ${space(2)};
   font-size: 13px;
   font-weight: ${p => p.theme.fontWeight.bold};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   white-space: nowrap;
 
   ${p =>

static/app/components/activity/item/index.tsx

@@ -144,15 +144,15 @@ const StyledActivityAvatar = styled(ActivityAvatar)`
 `;
 
 const StyledTimeSince = styled(TimeSince)`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;
 
 const StyledDateTime = styled(DateTime)`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;
 
 const StyledDateTimeWindow = styled('div')`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;
 
 const StyledActivityBubble = styled(ActivityBubble)`

static/app/components/activity/note/input.tsx

@@ -335,7 +335,7 @@ const MarkdownIndicator = styled('div')`
   display: flex;
   align-items: center;
   gap: ${space(1)};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;
 
 const NotePreview = styled(MarkedText, {

static/app/components/alerts/pageBanner.tsx

@@ -111,7 +111,7 @@ const TextContainer = styled('div')`
 `;
 
 const SubText = styled('div')`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => p.theme.fontSize.md};
   line-height: ${p => p.theme.text.lineHeightBody};
 `;

static/app/components/arithmeticBuilder/token/function.tsx

@@ -786,7 +786,7 @@ const FunctionGridCell = styled(BaseGridCell)`
 const DeleteButton = styled('button')`
   background: none;
   border: none;
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   outline: none;
   user-select: none;
   padding-right: ${p => p.theme.space.xs};

static/app/components/arithmeticBuilder/token/literal.tsx

@@ -336,7 +336,7 @@ const LeftGridCell = styled(GridCell)`
 const DeleteButton = styled('button')`
   background: none;
   border: none;
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   outline: none;
   user-select: none;
   padding-right: ${space(0.5)};

static/app/components/assigneeBadge.tsx

@@ -152,7 +152,7 @@ const StyledTag = styled(Tag)`
   height: 24px;
   padding: ${space(0.5)};
   padding-right: ${space(0.25)};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;
 
 const UnassignedTag = styled(StyledTag)`
@@ -161,14 +161,14 @@ const UnassignedTag = styled(StyledTag)`
 `;
 
 const TooltipSubtext = styled('div')`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;
 
 const TooltipSubExternalLink = styled(ExternalLink)`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   text-decoration: underline;
 
   :hover {
-    color: ${p => p.theme.subText};
+    color: ${p => p.theme.tokens.content.secondary};
   }
 `;

static/app/components/assigneeSelectorDropdown.tsx

@@ -599,16 +599,16 @@ const TooltipWrapper = styled('div')`
 `;
 
 const TooltipSubExternalLink = styled(ExternalLink)`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   text-decoration: underline;
 
   :hover {
-    color: ${p => p.theme.subText};
+    color: ${p => p.theme.tokens.content.secondary};
   }
 `;
 
 const TooltipSubtext = styled('div')`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;
 
 const FooterWrapper = styled('div')`

static/app/components/avatarChooser/index.tsx

@@ -402,7 +402,7 @@ const CropperHovercard = styled(Hovercard)`
 
 const AvatarHelp = styled('p')`
   margin-right: auto;
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => p.theme.fontSize.md};
   width: 50%;
 `;

static/app/components/badge/groupPriority.tsx

@@ -297,7 +297,7 @@ const DismissButton = styled(Button)`
   position: absolute;
   top: ${space(1)};
   right: ${space(1.5)};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;
 
 const BannerStar1 = styled('img')`

static/app/components/badge/iconCellSignal.tsx

@@ -7,9 +7,9 @@ interface Props extends SVGIconProps {
 }
 function IconCellSignal({ref, bars = 3, ...props}: Props) {
   const theme = useTheme();
-  const firstBarColor = bars > 0 ? theme.subText : theme.colors.gray200;
-  const secondBarColor = bars > 1 ? theme.subText : theme.colors.gray200;
-  const thirdBarColor = bars > 2 ? theme.subText : theme.colors.gray200;
+  const firstBarColor = bars > 0 ? theme.tokens.content.secondary : theme.colors.gray200;
+  const secondBarColor = bars > 1 ? theme.tokens.content.secondary : theme.colors.gray200;
+  const thirdBarColor = bars > 2 ? theme.tokens.content.secondary : theme.colors.gray200;
 
   return (
     <SvgIcon {...props} ref={ref}>

static/app/components/calendar/calendarStylesWrapper.tsx

@@ -45,7 +45,7 @@ const CalendarStylesWrapper = styled('div')`
 
   .rdrDayDisabled .rdrDayNumber span,
   .rdrDayPassive .rdrDayNumber span {
-    color: ${p => p.theme.subText};
+    color: ${p => p.theme.tokens.content.secondary};
     opacity: 0.5;
   }
 

static/app/components/charts/baseChart.tsx

@@ -706,7 +706,7 @@ const getTooltipStyles = (p: {theme: Theme}) => css`
   /* Tooltip styling */
   .tooltip-series,
   .tooltip-footer {
-    color: ${p.theme.subText};
+    color: ${p.theme.tokens.content.secondary};
     font-family: ${p.theme.text.family};
     font-variant-numeric: tabular-nums;
     padding: ${space(1)} ${space(2)};
@@ -759,7 +759,7 @@ const getTooltipStyles = (p: {theme: Theme}) => css`
   .tooltip-code-no-margin {
     padding-left: 0;
     margin-left: 0;
-    color: ${p.theme.subText};
+    color: ${p.theme.tokens.content.secondary};
   }
   .tooltip-footer {
     border-top: solid 1px ${p.theme.tokens.border.secondary};

static/app/components/charts/components/legend.tsx

@@ -42,7 +42,7 @@ export default function Legend(
         fontFamily: theme.text.family,
         lineHeight: 14,
       },
-      inactiveColor: theme.subText,
+      inactiveColor: theme.tokens.content.secondary,
       pageTextStyle: {
         color: theme.tokens.content.primary,
       },

static/app/components/charts/errorPanel.tsx

@@ -13,7 +13,7 @@ const ErrorPanel = styled('div')<{height?: string}>`
   position: relative;
   border-color: transparent;
   margin-bottom: 0;
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => p.theme.fontSize.xl};
 `;
 

static/app/components/charts/groupStatusChart.tsx

@@ -162,5 +162,5 @@ const ChartWrapper = styled('div')`
 
 const GraphText = styled('div')`
   font-size: ${p => p.theme.fontSize.sm};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;

static/app/components/charts/styles.tsx

@@ -7,13 +7,13 @@ export const SectionHeading = styled('h4')`
   grid-auto-flow: column;
   gap: ${space(1)};
   align-items: center;
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => p.theme.fontSize.md};
   margin: ${space(1)} 0;
 `;
 
 export const SectionValue = styled('span')`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => p.theme.fontSize.md};
   margin-right: ${space(1)};
 `;

static/app/components/checkInTimeline/checkInTooltip.tsx

@@ -136,5 +136,5 @@ const StatusCount = styled('td')`
 `;
 
 const StatusUnit = styled('td')`
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;

static/app/components/checkInTimeline/gridLines.tsx

@@ -385,6 +385,6 @@ const TimeLabelContainer = styled('div')<{
 const TimeLabel = styled(DateTime)`
   font-variant-numeric: tabular-nums;
   font-size: ${p => p.theme.fontSize.sm};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   pointer-events: none;
 `;

static/app/components/collapsePanel.tsx

@@ -95,7 +95,7 @@ const ShowMore = styled('div')<{disableBorder: boolean}>`
   align-items: center;
   padding: ${space(1)} ${space(2)};
   font-size: ${p => p.theme.fontSize.md};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   cursor: pointer;
   border-top: 1px solid ${p => p.theme.tokens.border.primary};
 

static/app/components/commitRow.tsx

@@ -301,10 +301,10 @@ const Meta = styled(TextOverflow)<{hasStreamlinedUI?: boolean}>`
   font-size: ${p => (p.hasStreamlinedUI ? p.theme.fontSize.md : '13px')};
   line-height: 1.5;
   margin: 0;
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 
   a {
-    color: ${p => p.theme.subText};
+    color: ${p => p.theme.tokens.content.secondary};
     text-decoration: underline;
     text-decoration-style: dotted;
   }
@@ -324,7 +324,7 @@ const MetaWrapper = styled('div')`
   display: flex;
   align-items: center;
   gap: ${space(0.5)};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => p.theme.fontSize.md};
   padding-top: ${space(0.25)};
 `;
@@ -343,7 +343,7 @@ const AuthorWrapper = styled('span')`
   display: inline-flex;
   align-items: center;
   gap: ${space(0.25)};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 
   & svg {
     transition: 120ms opacity;

static/app/components/core/avatar/avatarList.tsx

@@ -197,7 +197,7 @@ const CollapsedAvatarsCicle = styled('div')<{size: number}>`
   text-align: center;
   font-weight: ${p => p.theme.fontWeight.bold};
   background-color: ${p => p.theme.colors.gray200};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   font-size: ${p => Math.floor(p.size / 2.3)}px;
   width: ${p => p.size}px;
   height: ${p => p.size}px;

static/app/components/core/avatar/baseAvatar.tsx

@@ -153,7 +153,8 @@ const AvatarContainer = styled('span')<{
 }>`
   flex-shrink: 0;
   border-radius: ${p => (p.round ? '50%' : '3px')};
-  border: ${p => (p.suggested ? `1px dashed ${p.theme.subText}` : 'none')};
+  border: ${p =>
+    p.suggested ? `1px dashed ${p.theme.tokens.border.neutral.vibrant}` : 'none'};
   background-color: ${p => (p.suggested ? p.theme.tokens.background.primary : 'none')};
 `;
 

static/app/components/core/avatar/letterAvatar.tsx

@@ -49,7 +49,7 @@ const LetterAvatarComponent = styled('svg')<LetterAvatarProps>`
   text {
     fill: ${props =>
       props.suggested
-        ? props.theme.subText
+        ? props.theme.tokens.content.secondary
         : getColor(props.identifier, props.theme).content};
   }
 `;

static/app/components/core/compactSelect/control.tsx

@@ -636,7 +636,7 @@ const StyledLoadingIndicator = styled(LoadingIndicator)`
 const ClearButton = styled(Button)`
   font-size: inherit; /* Inherit font size from MenuHeader */
   font-weight: ${p => p.theme.font.weight.sans.regular};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   padding: 0 ${space(0.5)};
   margin: -${space(0.25)} -${space(0.5)};
 `;

static/app/components/core/compactSelect/styles.tsx

@@ -50,7 +50,7 @@ export const ListLabel = styled('p')`
   display: inline-block;
   font-weight: ${p => p.theme.font.weight.sans.medium};
   font-size: ${p => p.theme.font.size.xs};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   text-transform: uppercase;
   white-space: nowrap;
   margin: ${space(0.5)} ${space(1.5)};
@@ -96,7 +96,7 @@ export const SectionTitle = styled('p')`
   display: inline-block;
   font-weight: ${p => p.theme.font.weight.sans.medium};
   font-size: ${p => p.theme.font.size.xs};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   text-transform: uppercase;
   white-space: nowrap;
 
@@ -109,7 +109,7 @@ export const SectionToggleButton = styled(Button)<{visible: boolean}>`
   margin: 0 -${space(0.5)} 0 ${space(2)};
   font-weight: ${p => p.theme.font.weight.sans.regular};
   font-size: ${p => p.theme.font.size.sm};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   transition: opacity 0.1s;
 
   &:focus-visible {
@@ -162,7 +162,7 @@ export const CheckWrap = styled('div')<{isSelected: boolean; multiple: boolean}>
 
 export const EmptyMessage = styled('p')`
   text-align: center;
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   padding: ${space(1)} ${space(1.5)} ${space(1.5)};
   margin: 0;
 
@@ -180,7 +180,7 @@ export const SizeLimitMessage = styled('li')`
   padding: ${space(0.75)} ${space(1)} 0;
 
   font-size: ${p => p.theme.font.size.sm};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
   list-style-type: none;
   white-space: nowrap;
   text-align: center;

static/app/components/core/input/numberDragInput.stories.tsx

@@ -74,5 +74,5 @@ export default Storybook.story('NumberDragInput', (story, APIReference) => {
 
 const Label = styled('div')`
   font-size: ${p => p.theme.font.size.sm};
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;

static/app/components/core/input/numberInput.tsx

@@ -114,7 +114,7 @@ const StepButton = styled(Button)`
   height: 50%;
   padding: 0 ${space(0.25)};
   min-height: 0;
-  color: ${p => p.theme.subText};
+  color: ${p => p.theme.tokens.content.secondary};
 `;
 
 const StyledIconChevron = styled(IconChevron)`