Skip to content

ref(theme): remove backgroundSecondary #106037

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
natemoo-re merged 10 commits into from
Jan 13, 2026
Merged

ref(theme): remove backgroundSecondary #106037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0d34888
ref(theme): replace simple `backgroundSecondary` uses with `backgroun…
natemoo-re Jan 9, 2026
0b2de90
ref(theme): replace `backgroundSecondary` with `background.secondary`
natemoo-re Jan 12, 2026
c53f47f
ref(theme): replace `backgroundSecondary` with `border.secondary`
natemoo-re Jan 12, 2026
4d95609
ref(theme): replace `backgroundSecondary` gradients
natemoo-re Jan 13, 2026
12a472c
ref(theme): update interactive `backgroundSecondary` usage
natemoo-re Jan 13, 2026
ba9090b
ref(theme): remove `backgroundSecondary` definition
natemoo-re Jan 13, 2026
35af45b
ref(theme): replace `backgroundSecondary` with `background.secondary`
natemoo-re Jan 13, 2026
59e6427
fix(theme): remove `state.theme` access
natemoo-re Jan 13, 2026
49c5031
fix(theme): remove `state.theme` access
natemoo-re Jan 13, 2026
6ff94b4
Merge branch 'master' into natemoore/de-333-remove-themebackgroundsec…
natemoo-re Jan 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions static/app/components/avatarChooser/avatarCropper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,14 +396,26 @@ const ImageCropper = styled('div')<{resizeDirection: Position | null}>`
-10px 0px;
background-color: ${p => p.theme.tokens.background.primary};
background-image:
linear-gradient(45deg, ${p => p.theme.backgroundSecondary} 25%, rgba(0, 0, 0, 0) 25%),
linear-gradient(
45deg,
${p => p.theme.tokens.background.secondary} 25%,
rgba(0, 0, 0, 0) 25%
),
linear-gradient(
-45deg,
${p => p.theme.backgroundSecondary} 25%,
${p => p.theme.tokens.background.secondary} 25%,
rgba(0, 0, 0, 0) 25%
),
linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, ${p => p.theme.backgroundSecondary} 75%),
linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, ${p => p.theme.backgroundSecondary} 75%);
linear-gradient(
45deg,
rgba(0, 0, 0, 0) 75%,
${p => p.theme.tokens.background.secondary} 75%
),
linear-gradient(
-45deg,
rgba(0, 0, 0, 0) 75%,
${p => p.theme.tokens.background.secondary} 75%
);

cursor: ${p => (p.resizeDirection ? `${p.resizeDirection}-resize` : 'default')};
`;
Expand Down
22 changes: 17 additions & 5 deletions static/app/components/avatarChooser/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,14 +378,26 @@ const AvatarPreview = styled('div')`
-10px 0px;
background-color: ${p => p.theme.tokens.background.primary};
background-image:
linear-gradient(45deg, ${p => p.theme.backgroundSecondary} 25%, rgba(0, 0, 0, 0) 25%),
linear-gradient(
45deg,
${p => p.theme.tokens.background.secondary} 25%,
rgba(0, 0, 0, 0) 25%
),
linear-gradient(
-45deg,
${p => p.theme.backgroundSecondary} 25%,
${p => p.theme.tokens.background.secondary} 25%,
rgba(0, 0, 0, 0) 25%
),
linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, ${p => p.theme.backgroundSecondary} 75%),
linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, ${p => p.theme.backgroundSecondary} 75%);
linear-gradient(
45deg,
rgba(0, 0, 0, 0) 75%,
${p => p.theme.tokens.background.secondary} 75%
),
linear-gradient(
-45deg,
rgba(0, 0, 0, 0) 75%,
${p => p.theme.tokens.background.secondary} 75%
);
`;

const AvatarChooserBody = styled('div')`
Expand Down Expand Up @@ -413,7 +425,7 @@ const BlankAvatar = styled('div')`
align-items: center;
justify-content: center;
color: ${p => p.theme.colors.gray200};
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
height: 90px;
width: 90px;
`;
Expand Down
6 changes: 3 additions & 3 deletions static/app/components/container/negativeSpaceContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ const NegativeSpaceContainer = styled('div')`
position: relative;
overflow: hidden;

background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.tokens.background.secondary};
background-image:
repeating-linear-gradient(
-145deg,
transparent,
transparent 8px,
${p => p.theme.backgroundSecondary} 8px,
${p => p.theme.backgroundSecondary} 11px
${p => p.theme.tokens.background.secondary} 8px,
${p => p.theme.tokens.background.secondary} 11px
),
repeating-linear-gradient(
-45deg,
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/events/autofix/autofixChanges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ const CopyContainer = styled('div')`
align-items: stretch;
border: 1px solid ${p => p.theme.tokens.border.primary};
border-radius: ${p => p.theme.radius.md};
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
max-width: 25rem;
min-width: 0;
flex: 1;
Expand Down
8 changes: 4 additions & 4 deletions static/app/components/events/autofix/autofixDiff.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -706,7 +706,7 @@ const FileHeader = styled('div')`
align-items: center;
grid-template-columns: minmax(60px, auto) 1fr auto;
gap: ${space(2)};
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.tokens.background.secondary};
padding: ${space(1)} ${space(2)};
cursor: pointer;
`;
Expand Down Expand Up @@ -743,12 +743,12 @@ const DiffContainer = styled('div')<{integratedStyle?: boolean}>`

const HunkHeaderEmptySpace = styled('div')`
grid-column: 1 / 3;
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.tokens.background.secondary};
`;

const HunkHeaderContent = styled('div')`
grid-column: 3 / -1;
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.tokens.background.secondary};
color: ${p => p.theme.tokens.content.secondary};
padding: ${space(0.75)} ${space(1)} ${space(0.75)} ${space(4)};
white-space: pre-wrap;
Expand All @@ -759,7 +759,7 @@ const LineNumber = styled('div')<{lineType: DiffLineType}>`
padding: ${space(0.25)} ${space(1)};
user-select: none;

background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.tokens.background.secondary};
color: ${p => p.theme.tokens.content.secondary};

${p =>
Expand Down
6 changes: 3 additions & 3 deletions static/app/components/events/autofix/autofixHighlightPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -720,7 +720,7 @@ const Container = styled(motion.div, {
const InputWrapper = styled('form')`
display: flex;
padding: ${space(0.5)};
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
position: relative;
`;

Expand Down Expand Up @@ -754,7 +754,7 @@ const Header = styled('div')`
align-items: center;
justify-content: space-between;
padding: ${space(1)} ${space(1.5)};
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
word-break: break-word;
overflow-wrap: break-word;
`;
Expand All @@ -778,7 +778,7 @@ const Arrow = styled('div')`
position: absolute;
width: 12px;
height: 12px;
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
border: 1px dashed ${p => p.theme.tokens.border.primary};
border-right: none;
border-bottom: none;
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/events/autofix/autofixOutputStream.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,7 +408,7 @@ const ActiveLogWrapper = styled('div')`
align-items: flex-start;
justify-content: space-between;
padding: ${space(1)};
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
gap: ${space(1)};
overflow: visible;
`;
Expand Down
8 changes: 7 additions & 1 deletion static/app/components/events/autofix/autofixSolutionEventItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,12 @@ const StyledTimelineHeader = styled('div')<{isSelected: boolean; isActive?: bool
}

&:hover {
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p =>
p.theme.tokens.interactive.transparent.neutral.background.hover};
}

&:active {
background-color: ${p =>
p.theme.tokens.interactive.transparent.neutral.background.active};
}
`;
8 changes: 7 additions & 1 deletion static/app/components/events/autofix/autofixTimelineItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,13 @@ const StyledTimelineHeader = styled('div')<{isActive?: boolean}>`
}

&:hover {
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p =>
p.theme.tokens.interactive.transparent.neutral.background.hover};
}

&:active {
background-color: ${p =>
p.theme.tokens.interactive.transparent.neutral.background.active};
}
`;

Expand Down
8 changes: 7 additions & 1 deletion static/app/components/events/autofix/insights/autofixInsightCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,13 @@ const InsightCardRow = styled('div')<{expanded?: boolean; isUserMessage?: boolea
cursor: pointer;

&:hover {
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p =>
p.theme.tokens.interactive.transparent.neutral.background.hover};
}

&:active {
background-color: ${p =>
p.theme.tokens.interactive.transparent.neutral.background.active};
}
`;

Expand Down
2 changes: 1 addition & 1 deletion static/app/components/events/autofix/v2/artifactCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -937,7 +937,7 @@ const TreeRow = styled('div')<{$isClickable?: boolean}>`
column-gap: ${p => p.theme.space.lg};
grid-template-columns: subgrid;
:nth-child(odd) {
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.tokens.background.secondary};
}
color: ${p => p.theme.tokens.content.secondary};
background-color: ${p => p.theme.tokens.background.primary};
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/events/autofix/v2/explorerSeerDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,7 @@ const DrawerContainer = styled('div')`
display: grid;
grid-template-rows: auto auto 1fr;
position: relative;
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
`;

const SeerDrawerHeader = styled(DrawerHeader)`
Expand Down
6 changes: 3 additions & 3 deletions static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,9 @@ const BannerWrapper = styled('div')`
margin: ${space(1)} 0;
background: linear-gradient(
90deg,
${p => p.theme.backgroundSecondary}00 0%,
${p => p.theme.backgroundSecondary}FF 70%,
${p => p.theme.backgroundSecondary}FF 100%
color-mix(in srgb, ${p => p.theme.tokens.background.secondary} 0%, transparent) 0%,
${p => p.theme.tokens.background.secondary} 70%,
${p => p.theme.tokens.background.secondary} 100%
);
`;

Expand Down
2 changes: 1 addition & 1 deletion static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,7 +518,7 @@ const DifferentialFlamegraphExplanationBarContainer = styled('div')`
font-size: ${p => p.theme.fontSize.xs};
color: ${p => p.theme.tokens.content.secondary};
border-top: 1px solid ${p => p.theme.tokens.border.primary};
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
`;

function DifferentialFlamegraphLegend() {
Expand Down
4 changes: 3 additions & 1 deletion static/app/components/events/eventTags/eventTagsTreeRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,7 +427,9 @@ const TreeRow = styled('div')<{hasErrors: boolean}>`
grid-template-columns: subgrid;
:nth-child(odd) {
background-color: ${p =>
p.hasErrors ? p.theme.alert.danger.backgroundLight : p.theme.backgroundSecondary};
p.hasErrors
? p.theme.alert.danger.backgroundLight
: p.theme.tokens.background.secondary};
}
.invisible {
visibility: hidden;
Expand Down
6 changes: 3 additions & 3 deletions static/app/components/events/featureFlags/cta/featureFlagCTAContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,9 @@ export const BannerWrapper = styled('div')`
border-radius: ${p => p.theme.radius.md};
background: linear-gradient(
90deg,
${p => p.theme.backgroundSecondary}00 0%,
${p => p.theme.backgroundSecondary}FF 70%,
${p => p.theme.backgroundSecondary}FF 100%
color-mix(in srgb, ${p => p.theme.tokens.background.secondary} 0%, transparent) 0%,
${p => p.theme.tokens.background.secondary} 70%,
${p => p.theme.tokens.background.secondary} 100%
);
display: flex;
flex-direction: row;
Expand Down
4 changes: 2 additions & 2 deletions static/app/components/events/highlights/editHighlightsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,13 +563,13 @@ const EditPreviewContextItem = styled(ContextCardContent)`
font-size: ${p => p.theme.fontSize.sm};
grid-column: span 2;
&:nth-child(4n-2) {
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.tokens.background.secondary};
}
`;

const EditPreviewTagItem = styled(EventTagsTreeRow)`
&:nth-child(4n-2) {
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.tokens.background.secondary};
}
`;

Expand Down
4 changes: 2 additions & 2 deletions static/app/components/events/interfaces/breadcrumbs/breadcrumb/data/summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,12 @@ const Wrapper = styled('div')`

const ContextDataWrapper = styled('div')`
padding: ${space(1)};
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
border-radius: ${p => p.theme.radius.md};
overflow: hidden;
pre {
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
margin: 0;
padding: 0;
overflow: hidden;
Expand Down
6 changes: 3 additions & 3 deletions .../app/components/events/interfaces/crashContent/exception/banners/addIntegrationBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,9 @@ const StacktraceIntegrationBannerWrapper = styled('div')`
margin: ${space(1)} 0;
background: linear-gradient(
90deg,
${p => p.theme.backgroundSecondary}00 0%,
${p => p.theme.backgroundSecondary}FF 70%,
${p => p.theme.backgroundSecondary}FF 100%
color-mix(in srgb, ${p => p.theme.tokens.background.secondary} 0%, transparent) 0%,
${p => p.theme.tokens.background.secondary} 70%,
${p => p.theme.tokens.background.secondary} 100%
);
`;

Expand Down
4 changes: 2 additions & 2 deletions static/app/components/events/interfaces/debugMeta/debugImageDetails/generalInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const Wrapper = styled('div')`
const Label = styled('div')<{coloredBg?: boolean}>`
color: ${p => p.theme.tokens.content.primary};
padding: ${space(1)} ${space(1.5)} ${space(1)} ${space(1)};
${p => p.coloredBg && `background-color: ${p.theme.backgroundSecondary};`}
${p => p.coloredBg && `background-color: ${p.theme.tokens.background.secondary};`}
`;

const Value = styled(Label)`
Expand All @@ -68,5 +68,5 @@ const Value = styled(Label)`
color: ${p => p.theme.tokens.content.secondary};
padding: ${space(1)};
font-family: ${p => p.theme.text.familyMono};
${p => p.coloredBg && `background-color: ${p.theme.backgroundSecondary};`}
${p => p.coloredBg && `background-color: ${p.theme.tokens.background.secondary};`}
`;
7 changes: 6 additions & 1 deletion static/app/components/events/interfaces/threads/threadSelector/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,12 @@ const SortableThreadSelectorGridCell = styled(ThreadSelectorGridCell)`
user-select: none;
border-radius: ${p => p.theme.radius.md};
&:hover {
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p =>
p.theme.tokens.interactive.transparent.neutral.background.hover};
}
&:active {
background-color: ${p =>
p.theme.tokens.interactive.transparent.neutral.background.active};
}
`;

Expand Down
2 changes: 1 addition & 1 deletion static/app/components/events/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ type BannerProps = {
function getColors({priority, theme}: BannerProps & {theme: Theme}) {
const COLORS = {
default: {
background: theme.backgroundSecondary,
background: theme.tokens.background.secondary,
border: theme.tokens.border.primary,
},
danger: {
Expand Down
7 changes: 2 additions & 5 deletions static/app/components/group/groupSummaryWithAutofix.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,11 +356,8 @@ const InsightCardButton = styled(motion.div)`
background-color: ${p => p.theme.tokens.background.primary};

&:hover {
background-color: ${p => p.theme.backgroundSecondary};
}

Copy link
Contributor

@cursor cursor bot Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Active state feedback removed from interactive button

Low Severity

The InsightCardButton component previously had an &:active { opacity: 0.8; } rule that provided visual feedback when clicked. This active state was removed entirely rather than being replaced with the interactive token pattern (tokens.interactive.transparent.neutral.background.active) used consistently elsewhere in this PR for similar interactive elements like autofixSolutionEventItem, autofixTimelineItem, and autofixInsightCard. This inconsistency removes click feedback from a button element that has role="button" and onClick.

Fix in Cursor Fix in Web

&:active {
opacity: 0.8;
background-color: ${p =>
p.theme.tokens.interactive.transparent.neutral.background.hover};
}
`;

Expand Down
2 changes: 1 addition & 1 deletion static/app/components/helpSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const SectionHeading = styled('div')`
grid-template-columns: max-content 1fr max-content;
gap: ${space(1)};
align-items: center;
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
padding: ${space(1)} ${space(2)};
&:not(:first-of-type) {
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/hovercard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ const StyledHovercard = styled(Overlay)`

const Header = styled('div')`
font-size: ${p => p.theme.fontSize.md};
background: ${p => p.theme.backgroundSecondary};
background: ${p => p.theme.tokens.background.secondary};
border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
font-weight: ${p => p.theme.fontWeight.bold};
word-wrap: break-word;
Expand Down
2 changes: 1 addition & 1 deletion static/app/components/issueDiff/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export function IssueDiff({
}

const StyledIssueDiff = styled('div')<{isLoading: boolean}>`
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.tokens.background.secondary};
overflow: auto;
padding: ${p => p.theme.space.md};
flex: 1;
Expand Down
Loading
Loading