ref(theme): replace simple backgroundSecondary uses with background.secondary

Author: natemoo-re

static/app/components/avatarChooser/avatarCropper.tsx

@@ -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')};
 `;

static/app/components/avatarChooser/index.tsx

@@ -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')`
@@ -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;
 `;

static/app/components/container/negativeSpaceContainer.tsx

@@ -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,

static/app/components/events/autofix/autofixChanges.tsx

@@ -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;

static/app/components/events/autofix/autofixDiff.tsx

@@ -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;
 `;
@@ -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;
@@ -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 =>

static/app/components/events/autofix/autofixHighlightPopup.tsx

@@ -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;
 `;
 
@@ -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;
 `;
@@ -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;

static/app/components/events/autofix/autofixOutputStream.tsx

@@ -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;
 `;

static/app/components/events/autofix/v2/artifactCards.tsx

@@ -936,7 +936,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.background};

static/app/components/events/autofix/v2/explorerSeerDrawer.tsx

@@ -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)`

static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx

@@ -516,7 +516,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() {