diff --git a/static/app/components/avatarChooser/avatarCropper.tsx b/static/app/components/avatarChooser/avatarCropper.tsx
index 3e6c4a802cbd05..83e3641acd96c1 100644
--- a/static/app/components/avatarChooser/avatarCropper.tsx
+++ b/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')};
 `;
diff --git a/static/app/components/avatarChooser/index.tsx b/static/app/components/avatarChooser/index.tsx
index 30185f0305a16e..4dfca774b3d1a2 100644
--- a/static/app/components/avatarChooser/index.tsx
+++ b/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;
 `;
diff --git a/static/app/components/container/negativeSpaceContainer.tsx b/static/app/components/container/negativeSpaceContainer.tsx
index b48c7352398be1..af58614d11967b 100644
--- a/static/app/components/container/negativeSpaceContainer.tsx
+++ b/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,
diff --git a/static/app/components/events/autofix/autofixChanges.tsx b/static/app/components/events/autofix/autofixChanges.tsx
index f4be79048dbb51..9fbd5f20d0c454 100644
--- a/static/app/components/events/autofix/autofixChanges.tsx
+++ b/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;
diff --git a/static/app/components/events/autofix/autofixDiff.tsx b/static/app/components/events/autofix/autofixDiff.tsx
index fb585324590e69..95c3d6a4281d0b 100644
--- a/static/app/components/events/autofix/autofixDiff.tsx
+++ b/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 =>
diff --git a/static/app/components/events/autofix/autofixHighlightPopup.tsx b/static/app/components/events/autofix/autofixHighlightPopup.tsx
index 6284d9d899d357..7089a04e06343c 100644
--- a/static/app/components/events/autofix/autofixHighlightPopup.tsx
+++ b/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;
diff --git a/static/app/components/events/autofix/autofixOutputStream.tsx b/static/app/components/events/autofix/autofixOutputStream.tsx
index 77c3f41d6b0af2..75e7c43763136c 100644
--- a/static/app/components/events/autofix/autofixOutputStream.tsx
+++ b/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;
 `;
diff --git a/static/app/components/events/autofix/autofixSolutionEventItem.tsx b/static/app/components/events/autofix/autofixSolutionEventItem.tsx
index 71085a926a8c86..af32e924b5ffa2 100644
--- a/static/app/components/events/autofix/autofixSolutionEventItem.tsx
+++ b/static/app/components/events/autofix/autofixSolutionEventItem.tsx
@@ -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};
   }
 `;
diff --git a/static/app/components/events/autofix/autofixTimelineItem.tsx b/static/app/components/events/autofix/autofixTimelineItem.tsx
index d9209571036413..6034af84e8db85 100644
--- a/static/app/components/events/autofix/autofixTimelineItem.tsx
+++ b/static/app/components/events/autofix/autofixTimelineItem.tsx
@@ -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};
   }
 `;
 
diff --git a/static/app/components/events/autofix/insights/autofixInsightCard.tsx b/static/app/components/events/autofix/insights/autofixInsightCard.tsx
index 2415fa635a0a5b..3a3693b8a08a9c 100644
--- a/static/app/components/events/autofix/insights/autofixInsightCard.tsx
+++ b/static/app/components/events/autofix/insights/autofixInsightCard.tsx
@@ -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};
   }
 `;
 
diff --git a/static/app/components/events/autofix/v2/artifactCards.tsx b/static/app/components/events/autofix/v2/artifactCards.tsx
index 72c92ad6957138..216e497da0e43f 100644
--- a/static/app/components/events/autofix/v2/artifactCards.tsx
+++ b/static/app/components/events/autofix/v2/artifactCards.tsx
@@ -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};
diff --git a/static/app/components/events/autofix/v2/explorerSeerDrawer.tsx b/static/app/components/events/autofix/v2/explorerSeerDrawer.tsx
index 8d31c0deaa9508..f7d1ccb0ec6ce6 100644
--- a/static/app/components/events/autofix/v2/explorerSeerDrawer.tsx
+++ b/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)`
diff --git a/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx b/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
index aa04b9742cfe74..e35f6f8cdaa4a6 100644
--- a/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
+++ b/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
@@ -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%
   );
 `;
 
diff --git a/static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx b/static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx
index b49054fbc2cac4..dd69fb07402ab0 100644
--- a/static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx
+++ b/static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx
@@ -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() {
diff --git a/static/app/components/events/eventTags/eventTagsTreeRow.tsx b/static/app/components/events/eventTags/eventTagsTreeRow.tsx
index bea515765bdc93..7ad5d13e528058 100644
--- a/static/app/components/events/eventTags/eventTagsTreeRow.tsx
+++ b/static/app/components/events/eventTags/eventTagsTreeRow.tsx
@@ -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;
diff --git a/static/app/components/events/featureFlags/cta/featureFlagCTAContent.tsx b/static/app/components/events/featureFlags/cta/featureFlagCTAContent.tsx
index adce9e7a6d7c54..e015f4c49a09bd 100644
--- a/static/app/components/events/featureFlags/cta/featureFlagCTAContent.tsx
+++ b/static/app/components/events/featureFlags/cta/featureFlagCTAContent.tsx
@@ -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;
diff --git a/static/app/components/events/highlights/editHighlightsModal.tsx b/static/app/components/events/highlights/editHighlightsModal.tsx
index 46ef31a510c38e..18ea3fb0f25bd0 100644
--- a/static/app/components/events/highlights/editHighlightsModal.tsx
+++ b/static/app/components/events/highlights/editHighlightsModal.tsx
@@ -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};
   }
 `;
 
diff --git a/static/app/components/events/interfaces/breadcrumbs/breadcrumb/data/summary.tsx b/static/app/components/events/interfaces/breadcrumbs/breadcrumb/data/summary.tsx
index cc1b20fde92bfb..078b427787a290 100644
--- a/static/app/components/events/interfaces/breadcrumbs/breadcrumb/data/summary.tsx
+++ b/static/app/components/events/interfaces/breadcrumbs/breadcrumb/data/summary.tsx
@@ -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;
diff --git a/static/app/components/events/interfaces/crashContent/exception/banners/addIntegrationBanner.tsx b/static/app/components/events/interfaces/crashContent/exception/banners/addIntegrationBanner.tsx
index f35c4b9c7bca33..ceffdcabd0067c 100644
--- a/static/app/components/events/interfaces/crashContent/exception/banners/addIntegrationBanner.tsx
+++ b/static/app/components/events/interfaces/crashContent/exception/banners/addIntegrationBanner.tsx
@@ -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%
   );
 `;
 
diff --git a/static/app/components/events/interfaces/debugMeta/debugImageDetails/generalInfo.tsx b/static/app/components/events/interfaces/debugMeta/debugImageDetails/generalInfo.tsx
index dcd6762b5ded07..f18c6a2508ac7a 100644
--- a/static/app/components/events/interfaces/debugMeta/debugImageDetails/generalInfo.tsx
+++ b/static/app/components/events/interfaces/debugMeta/debugImageDetails/generalInfo.tsx
@@ -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)`
@@ -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};`}
 `;
diff --git a/static/app/components/events/interfaces/threads/threadSelector/index.tsx b/static/app/components/events/interfaces/threads/threadSelector/index.tsx
index 3d779484b7ada1..903a21d22edab8 100644
--- a/static/app/components/events/interfaces/threads/threadSelector/index.tsx
+++ b/static/app/components/events/interfaces/threads/threadSelector/index.tsx
@@ -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};
   }
 `;
 
diff --git a/static/app/components/events/styles.tsx b/static/app/components/events/styles.tsx
index b30040671f47d2..00aac5b83d3b19 100644
--- a/static/app/components/events/styles.tsx
+++ b/static/app/components/events/styles.tsx
@@ -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: {
diff --git a/static/app/components/group/groupSummaryWithAutofix.tsx b/static/app/components/group/groupSummaryWithAutofix.tsx
index e1b73cfa82559c..a220bd13cbd720 100644
--- a/static/app/components/group/groupSummaryWithAutofix.tsx
+++ b/static/app/components/group/groupSummaryWithAutofix.tsx
@@ -356,11 +356,8 @@ const InsightCardButton = styled(motion.div)`
   background-color: ${p => p.theme.tokens.background.primary};
 
   &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
-  }
-
-  &:active {
-    opacity: 0.8;
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 `;
 
diff --git a/static/app/components/helpSearch.tsx b/static/app/components/helpSearch.tsx
index 15e29aa3fa7753..393bd3a4f40ef9 100644
--- a/static/app/components/helpSearch.tsx
+++ b/static/app/components/helpSearch.tsx
@@ -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) {
diff --git a/static/app/components/hovercard.tsx b/static/app/components/hovercard.tsx
index 78c5b589a4c055..8e0efe49e6628c 100644
--- a/static/app/components/hovercard.tsx
+++ b/static/app/components/hovercard.tsx
@@ -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;
diff --git a/static/app/components/issueDiff/index.tsx b/static/app/components/issueDiff/index.tsx
index ff6dc562ef8d0f..925e130c6b67e0 100644
--- a/static/app/components/issueDiff/index.tsx
+++ b/static/app/components/issueDiff/index.tsx
@@ -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;
diff --git a/static/app/components/issues/suspect/suspectTable.tsx b/static/app/components/issues/suspect/suspectTable.tsx
index 9afee12121af57..c15cb0da87a6d1 100644
--- a/static/app/components/issues/suspect/suspectTable.tsx
+++ b/static/app/components/issues/suspect/suspectTable.tsx
@@ -47,9 +47,9 @@ const GradientBox = styled('div')`
   background: ${p => p.theme.tokens.background.primary};
   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%
   );
   border-radius: ${p => p.theme.radius.md};
   color: ${p => p.theme.tokens.content.primary};
diff --git a/static/app/components/keyValueData/index.tsx b/static/app/components/keyValueData/index.tsx
index 6335ee103fab68..c2046449e6f403 100644
--- a/static/app/components/keyValueData/index.tsx
+++ b/static/app/components/keyValueData/index.tsx
@@ -268,7 +268,7 @@ const ContentWrapper = styled('div')<{
         ? p.theme.alert.danger.backgroundLight
         : p.isSuspectFlag
           ? p.theme.colors.yellow100
-          : p.theme.backgroundSecondary};
+          : p.theme.tokens.background.secondary};
   }
 
   .invisible {
diff --git a/static/app/components/keyValueTable.tsx b/static/app/components/keyValueTable.tsx
index 6cfdbf94ac8246..541ef072df0726 100644
--- a/static/app/components/keyValueTable.tsx
+++ b/static/app/components/keyValueTable.tsx
@@ -42,7 +42,7 @@ const commonStyles = ({theme, type}: {type: Props['type']} & {theme: Theme}) =>
       ? 'var(--background-warning-default, rgba(245, 176, 0, 0.09)) !important'
       : 'inherit'};
   &:nth-of-type(2n-1) {
-    background-color: ${theme.backgroundSecondary};
+    background-color: ${theme.tokens.background.secondary};
   }
 `;
 
diff --git a/static/app/components/loadingMask.tsx b/static/app/components/loadingMask.tsx
index cbf0fd4e11da86..ee0fc5fd995913 100644
--- a/static/app/components/loadingMask.tsx
+++ b/static/app/components/loadingMask.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 export interface LoadingMaskProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 const LoadingMask = styled('div')<LoadingMaskProps>`
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   position: absolute;
   top: 0;
diff --git a/static/app/components/modals/dashboardWidgetQuerySelectorModal.tsx b/static/app/components/modals/dashboardWidgetQuerySelectorModal.tsx
index 59ab8823d24821..ae7164a580fac5 100644
--- a/static/app/components/modals/dashboardWidgetQuerySelectorModal.tsx
+++ b/static/app/components/modals/dashboardWidgetQuerySelectorModal.tsx
@@ -116,7 +116,7 @@ const OpenInDiscoverButton = styled(Button)`
 const Container = styled('div')`
   border: 1px solid ${p => p.theme.tokens.border.primary};
   box-shadow: inset ${p => p.theme.dropShadowMedium};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   padding: 7px ${space(1)};
   position: relative;
   display: grid;
diff --git a/static/app/components/organizations/pageFilters/desyncedFilter.tsx b/static/app/components/organizations/pageFilters/desyncedFilter.tsx
index 973132736042ee..d4ad7e2b85da97 100644
--- a/static/app/components/organizations/pageFilters/desyncedFilter.tsx
+++ b/static/app/components/organizations/pageFilters/desyncedFilter.tsx
@@ -48,7 +48,7 @@ export const DesyncedFilterIndicator = styled('div')`
 
 const DesyncedFilterMessageWrap = styled('div')`
   border: solid 1px ${p => p.theme.tokens.border.primary};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   margin: ${space(0.25)} ${space(0.5)} ${space(0.5)};
   padding: ${space(0.75)};
diff --git a/static/app/components/panels/panel.tsx b/static/app/components/panels/panel.tsx
index c4d5c72feddeaa..75264fe9f714b0 100644
--- a/static/app/components/panels/panel.tsx
+++ b/static/app/components/panels/panel.tsx
@@ -20,7 +20,9 @@ const Panel = styled(
   {shouldForwardProp: prop => typeof prop === 'string' && isPropValid(prop)}
 )`
   background: ${p =>
-    p.dashedBorder ? p.theme.backgroundSecondary : p.theme.tokens.background.primary};
+    p.dashedBorder
+      ? p.theme.tokens.background.secondary
+      : p.theme.tokens.background.primary};
   border-radius: ${p => p.theme.radius.md};
   border: 1px
     ${p =>
diff --git a/static/app/components/panels/panelHeader.tsx b/static/app/components/panels/panelHeader.tsx
index 93cf4bff236b44..d41a685457cbf6 100644
--- a/static/app/components/panels/panelHeader.tsx
+++ b/static/app/components/panels/panelHeader.tsx
@@ -43,7 +43,7 @@ const PanelHeader = styled('div')<Props>`
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
   border-radius: calc(${p => p.theme.radius.md} + 1px)
     calc(${p => p.theme.radius.md} + 1px) 0 0;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   position: relative;
   ${getPadding};
 `;
diff --git a/static/app/components/panels/panelTable.tsx b/static/app/components/panels/panelTable.tsx
index 1019ef73f10793..d7c035604decd3 100644
--- a/static/app/components/panels/panelTable.tsx
+++ b/static/app/components/panels/panelTable.tsx
@@ -183,7 +183,7 @@ const PanelTableHeader = styled('div')<{sticky: boolean}>`
   font-weight: ${p => p.theme.fontWeight.bold};
   text-transform: uppercase;
   border-radius: ${p => p.theme.radius.md} ${p => p.theme.radius.md} 0 0;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   line-height: 1;
   display: flex;
   flex-direction: column;
diff --git a/static/app/components/pill.tsx b/static/app/components/pill.tsx
index c35b1a85a63964..7b53ae18a4d91d 100644
--- a/static/app/components/pill.tsx
+++ b/static/app/components/pill.tsx
@@ -95,7 +95,7 @@ const getPillValueStyle = ({type, theme}: {theme: Theme; type?: PillType}) => {
       `;
     default:
       return css`
-        background: ${theme.backgroundSecondary};
+        background: ${theme.tokens.background.secondary};
         font-family: ${theme.text.familyMono};
       `;
   }
diff --git a/static/app/components/prevent/summary.tsx b/static/app/components/prevent/summary.tsx
index 01168769a87e01..d647f03ef5426d 100644
--- a/static/app/components/prevent/summary.tsx
+++ b/static/app/components/prevent/summary.tsx
@@ -129,7 +129,10 @@ const SummaryCardContainer = styled(Flex)<{isClickable?: boolean; isFiltered?: b
     p.isClickable &&
     `
     &:hover {
-      background: ${p.theme.tokens.background.secondary};
+      background: ${p.theme.tokens.interactive.transparent.neutral.background.hover};
+    }
+    &:active {
+      background: ${p.theme.tokens.interactive.transparent.neutral.background.active};
     }
   `}
 `;
diff --git a/static/app/components/profiling/flamegraph/aggregateFlamegraphSidePanel.tsx b/static/app/components/profiling/flamegraph/aggregateFlamegraphSidePanel.tsx
index c8d12cc34cb036..c77c20ebc09e36 100644
--- a/static/app/components/profiling/flamegraph/aggregateFlamegraphSidePanel.tsx
+++ b/static/app/components/profiling/flamegraph/aggregateFlamegraphSidePanel.tsx
@@ -241,7 +241,7 @@ const RowContainer = styled('div')`
   border-radius: ${space(0.5)};
   padding: ${space(0.5)} ${space(1)};
   :nth-child(even) {
-    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};
diff --git a/static/app/components/profiling/flamegraph/collapsibleTimeline.tsx b/static/app/components/profiling/flamegraph/collapsibleTimeline.tsx
index 2c7a4fa50281c3..9834d1070bca9f 100644
--- a/static/app/components/profiling/flamegraph/collapsibleTimeline.tsx
+++ b/static/app/components/profiling/flamegraph/collapsibleTimeline.tsx
@@ -85,7 +85,7 @@ const CollapsibleTimelineHeader = styled('div')<{
   min-height: ${p => p.labelHeight}px;
   border-top: 1px solid ${p => p.border};
   border-bottom: 1px solid ${p => (p.open ? p.border : 'transparent')};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
 `;
 
 export const CollapsibleTimelineLabel = styled('span')`
diff --git a/static/app/components/profiling/flamegraph/differentialFlamegraphLayout.tsx b/static/app/components/profiling/flamegraph/differentialFlamegraphLayout.tsx
index 5c10437f41fa48..58867e052a818a 100644
--- a/static/app/components/profiling/flamegraph/differentialFlamegraphLayout.tsx
+++ b/static/app/components/profiling/flamegraph/differentialFlamegraphLayout.tsx
@@ -121,8 +121,8 @@ const ProfileLabel = styled(CollapsibleTimelineLabel)`
   left: 0;
   background: linear-gradient(
     90deg,
-    ${p => p.theme.backgroundSecondary} 0%,
-    ${p => p.theme.backgroundSecondary} 80%,
+    ${p => p.theme.tokens.background.secondary} 0%,
+    ${p => p.theme.tokens.background.secondary} 80%,
     transparent 100%
   );
   border-top: 1px solid ${p => p.theme.tokens.border.primary};
diff --git a/static/app/components/profiling/flamegraph/flamegraphLayout.tsx b/static/app/components/profiling/flamegraph/flamegraphLayout.tsx
index 19f2a38a2d82a2..e3b988ac96a7e3 100644
--- a/static/app/components/profiling/flamegraph/flamegraphLayout.tsx
+++ b/static/app/components/profiling/flamegraph/flamegraphLayout.tsx
@@ -305,8 +305,8 @@ const ProfileLabel = styled(CollapsibleTimelineLabel)`
   left: 0;
   background: linear-gradient(
     90deg,
-    ${p => p.theme.backgroundSecondary} 0%,
-    ${p => p.theme.backgroundSecondary} 80%,
+    ${p => p.theme.tokens.background.secondary} 0%,
+    ${p => p.theme.tokens.background.secondary} 80%,
     transparent 100%
   );
   padding-right: ${space(2)};
diff --git a/static/app/components/replays/virtualizedGrid/headerCell.tsx b/static/app/components/replays/virtualizedGrid/headerCell.tsx
index 06292ac2f159f3..b0176c25a78743 100644
--- a/static/app/components/replays/virtualizedGrid/headerCell.tsx
+++ b/static/app/components/replays/virtualizedGrid/headerCell.tsx
@@ -60,7 +60,7 @@ function HeaderCell<T extends BaseRecord>({
 const HeaderButton = styled('button')`
   border: 0;
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   color: ${p => p.theme.tokens.content.secondary};
 
   font-size: ${p => p.theme.fontSize.sm};
diff --git a/static/app/components/savedEntityTable.tsx b/static/app/components/savedEntityTable.tsx
index a5a31e2d7f5c04..ed93691fe85a1d 100644
--- a/static/app/components/savedEntityTable.tsx
+++ b/static/app/components/savedEntityTable.tsx
@@ -100,7 +100,7 @@ SavedEntityTable.Row = styled(SimpleTable.Row, {
     !p.disableHover &&
     css`
       &:hover {
-        background-color: ${p.theme.backgroundSecondary};
+        background-color: ${p.theme.tokens.background.secondary};
       }
     `}
 `;
diff --git a/static/app/components/scrollCarousel.stories.tsx b/static/app/components/scrollCarousel.stories.tsx
index 398b00cd5e4e85..307b1c1a371f42 100644
--- a/static/app/components/scrollCarousel.stories.tsx
+++ b/static/app/components/scrollCarousel.stories.tsx
@@ -60,7 +60,7 @@ const ExampleItem = styled('div')`
   justify-content: center;
   border: 1px solid ${p => p.theme.tokens.border.primary};
   border-radius: ${p => p.theme.radius.md};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
 
   &:hover {
     background-color: ${p => p.theme.tokens.background.tertiary};
diff --git a/static/app/components/scrollCarousel.tsx b/static/app/components/scrollCarousel.tsx
index 4e740145fc4d5f..5297f930ca23d3 100644
--- a/static/app/components/scrollCarousel.tsx
+++ b/static/app/components/scrollCarousel.tsx
@@ -216,7 +216,8 @@ const StyledArrowButton = styled(Button)<{orientation: 'horizontal' | 'vertical'
 
   &:hover {
     opacity: 1;
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 `;
 
diff --git a/static/app/components/search/searchResultWrapper.tsx b/static/app/components/search/searchResultWrapper.tsx
index f338c1562c18e1..9f73efe881e8e3 100644
--- a/static/app/components/search/searchResultWrapper.tsx
+++ b/static/app/components/search/searchResultWrapper.tsx
@@ -12,7 +12,15 @@ const SearchResultWrapper = styled('div')<{highlighted?: boolean}>`
     p.highlighted &&
     css`
       color: ${p.theme.activeText};
-      background: ${p.theme.backgroundSecondary};
+      background: ${p.theme.tokens.background.secondary};
+
+      &:hover {
+        background: ${p.theme.tokens.interactive.transparent.neutral.background.hover};
+      }
+
+      &:active {
+        background: ${p.theme.tokens.interactive.transparent.neutral.background.active};
+      }
     `};
 
   &:not(:first-child) {
diff --git a/static/app/components/searchBar/searchDropdown.tsx b/static/app/components/searchBar/searchDropdown.tsx
index eaf43e5ee57220..3a66838a988316 100644
--- a/static/app/components/searchBar/searchDropdown.tsx
+++ b/static/app/components/searchBar/searchDropdown.tsx
@@ -517,7 +517,7 @@ const SearchDropdownGroupTitle = styled('header')`
   display: flex;
   align-items: center;
 
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   color: ${p => p.theme.tokens.content.secondary};
   font-weight: ${p => p.theme.fontWeight.normal};
   font-size: ${p => p.theme.fontSize.md};
@@ -638,7 +638,7 @@ const Documentation = styled('span')`
 const DropdownFooter = styled(`div`)`
   width: 100%;
   min-height: 45px;
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-top: 1px solid ${p => p.theme.tokens.border.secondary};
   flex-direction: row;
   display: flex;
diff --git a/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx b/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx
index c77adfb4feaa56..54b54741082d74 100644
--- a/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx
+++ b/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx
@@ -480,7 +480,7 @@ const RecentFiltersPane = styled('ul')`
   grid-area: recentFilters;
   display: flex;
   flex-wrap: wrap;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   padding: ${p => p.theme.space.md} 10px;
   gap: ${p => p.theme.space['2xs']};
   border-bottom: 1px solid ${p => p.theme.tokens.border.secondary};
@@ -530,7 +530,7 @@ const RecentFilterPill = styled('li')`
     height: 100%;
     background: linear-gradient(
       to left,
-      ${p => p.theme.backgroundSecondary} 0 2px,
+      ${p => p.theme.tokens.background.secondary} 0 2px,
       transparent ${p => p.theme.space.xl} 100%
     );
   }
diff --git a/static/app/components/selectMembers/index.tsx b/static/app/components/selectMembers/index.tsx
index 277c45df84a7ad..0aad82dd451dde 100644
--- a/static/app/components/selectMembers/index.tsx
+++ b/static/app/components/selectMembers/index.tsx
@@ -201,12 +201,11 @@ class SelectMembers extends Component<Props, State> {
         value={this.state.options?.find(({value}) => value === this.props.value)}
         styles={{
           ...styles,
-          // @ts-expect-error TS(7006): Parameter 'provided' implicitly has an 'any' type.
-          option: (provided, state: any) => ({
+          option: (provided: any, state: any) => ({
             ...provided,
 
             svg: {
-              color: state.isSelected && state.theme.white,
+              color: state.isSelected && '#fff',
             },
           }),
         }}
diff --git a/static/app/components/stream/group.tsx b/static/app/components/stream/group.tsx
index 6004dcd3130fe6..c2189b8ed4224b 100644
--- a/static/app/components/stream/group.tsx
+++ b/static/app/components/stream/group.tsx
@@ -839,7 +839,7 @@ const Wrapper = styled(PanelItem)<{
           background-color: ${p.theme.tokens.background.secondary};
         }
         100% {
-          background-color: ${p.theme.backgroundSecondary};
+          background-color: ${p.theme.tokens.background.secondary};
         }
       }
     `};
diff --git a/static/app/components/tables/gridEditable/styles.tsx b/static/app/components/tables/gridEditable/styles.tsx
index 8a5782bf69420a..4db9ff40fddf13 100644
--- a/static/app/components/tables/gridEditable/styles.tsx
+++ b/static/app/components/tables/gridEditable/styles.tsx
@@ -115,7 +115,7 @@ export const GridHead = styled('thead')<{sticky?: boolean}>`
   grid-template-columns: subgrid;
   grid-column: 1/-1;
 
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
   font-size: ${p => p.theme.fontSize.sm};
   font-weight: ${p => p.theme.fontWeight.bold};
diff --git a/static/app/components/tables/simpleTable/index.tsx b/static/app/components/tables/simpleTable/index.tsx
index d66461984553c1..9c66e1531c70de 100644
--- a/static/app/components/tables/simpleTable/index.tsx
+++ b/static/app/components/tables/simpleTable/index.tsx
@@ -101,7 +101,7 @@ const StyledPanel = styled(Panel)`
 `;
 
 const StyledPanelHeader = styled('div')`
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
   border-radius: calc(${p => p.theme.radius.md} + 1px)
     calc(${p => p.theme.radius.md} + 1px) 0 0;
diff --git a/static/app/components/timeRangeSelector/timePicker.tsx b/static/app/components/timeRangeSelector/timePicker.tsx
index 8ab36debf49f9e..a66848b401ec3e 100644
--- a/static/app/components/timeRangeSelector/timePicker.tsx
+++ b/static/app/components/timeRangeSelector/timePicker.tsx
@@ -115,7 +115,7 @@ const Input = styled('input')`
 
   &.rdrDateDisplayItem {
     width: 100%;
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.background.secondary};
     border: 1px solid ${p => p.theme.tokens.border.primary};
     color: ${p => p.theme.tokens.content.secondary};
     padding: ${space(0.25)} ${space(0.5)};
diff --git a/static/app/components/timeline/index.tsx b/static/app/components/timeline/index.tsx
index 4cfd5cdf377a4c..24f404765ee465 100644
--- a/static/app/components/timeline/index.tsx
+++ b/static/app/components/timeline/index.tsx
@@ -144,7 +144,7 @@ const Data = styled('div')`
   margin: ${space(0.75)} 0 0 -${space(0.75)};
   font-family: ${p => p.theme.text.familyMono};
   font-size: ${p => p.theme.fontSize.sm};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   position: relative;
   &:only-child {
     margin-top: 0;
diff --git a/static/app/styles/global.tsx b/static/app/styles/global.tsx
index 027a73d11aea53..6d712299f9cd9c 100644
--- a/static/app/styles/global.tsx
+++ b/static/app/styles/global.tsx
@@ -24,7 +24,7 @@ const generateThemePrismVariables = (theme: Theme, blockBackground: string) => (
 
 const prismStyles = (theme: Theme, darkTheme: Theme) => css`
   :root {
-    ${generateThemePrismVariables(theme, theme.backgroundSecondary)};
+    ${generateThemePrismVariables(theme, theme.tokens.background.secondary)};
   }
 
   /* Use dark Prism theme for code snippets imported from Sentry Docs */
@@ -382,7 +382,7 @@ const styles = (theme: Theme, darkTheme: Theme) => css`
           color: ${theme.tokens.content.primary};
         }
         .rdrDayDisabled {
-          background-color: ${theme.backgroundSecondary};
+          background-color: ${theme.tokens.background.secondary};
           color: ${theme.tokens.content.disabled};
         }
         .rdrMonthAndYearPickers select {
diff --git a/static/app/utils/theme/theme.tsx b/static/app/utils/theme/theme.tsx
index bcc570e05d92c2..e7bc93107b94e6 100644
--- a/static/app/utils/theme/theme.tsx
+++ b/static/app/utils/theme/theme.tsx
@@ -270,11 +270,7 @@ const generateButtonTheme = (colors: Colors, tokens: Tokens): ButtonColors => ({
   },
 });
 
-const generateAlertTheme = (
-  colors: Colors,
-  alias: Aliases,
-  tokens: Tokens
-): AlertColors => ({
+const generateAlertTheme = (colors: Colors, tokens: Tokens): AlertColors => ({
   info: {
     border: colors.blue200,
     background: colors.blue400,
@@ -291,7 +287,7 @@ const generateAlertTheme = (
   },
   muted: {
     background: colors.gray200,
-    backgroundLight: alias.backgroundSecondary,
+    backgroundLight: tokens.background.secondary,
     border: tokens.border.primary,
     borderHover: tokens.border.primary,
     color: 'inherit',
@@ -549,8 +545,6 @@ const commonTheme = {
   ...formTheme,
 };
 
-type Aliases = typeof lightAliases;
-
 export interface SentryTheme
   extends Omit<typeof lightThemeDefinition, 'chart' | 'tokens'> {
   chart: {
@@ -1101,11 +1095,6 @@ const darkShadows = {
 };
 
 const generateAliases = (tokens: Tokens) => ({
-  /**
-   * Secondary background color used as a slight contrast against primary background
-   */
-  backgroundSecondary: tokens.background.secondary,
-
   /**
    * Indicates that something is "active" or "selected"
    * NOTE: These are largely used for form elements, which I haven't mocked in ChonkUI
@@ -1231,7 +1220,7 @@ const lightThemeDefinition = {
 
   // @TODO: these colors need to be ported
   ...generateThemeUtils(baseLightTheme.tokens),
-  alert: generateAlertTheme(lightColors, lightAliases, baseLightTheme.tokens),
+  alert: generateAlertTheme(lightColors, baseLightTheme.tokens),
   button: generateButtonTheme(lightColors, baseLightTheme.tokens),
   tag: generateTagTheme(lightColors),
   level: generateLevelTheme(baseLightTheme.tokens, 'light'),
@@ -1271,7 +1260,7 @@ export const darkTheme: SentryTheme = {
 
   // @TODO: these colors need to be ported
   ...generateThemeUtils(baseDarkTheme.tokens),
-  alert: generateAlertTheme(darkColors, darkAliases, baseDarkTheme.tokens),
+  alert: generateAlertTheme(darkColors, baseDarkTheme.tokens),
   button: generateButtonTheme(darkColors, baseDarkTheme.tokens),
   tag: generateTagTheme(darkColors),
   level: generateLevelTheme(baseDarkTheme.tokens, 'dark'),
diff --git a/static/app/views/alerts/rules/issue/ruleNode.tsx b/static/app/views/alerts/rules/issue/ruleNode.tsx
index b865cd8973f587..d76673eb173d07 100644
--- a/static/app/views/alerts/rules/issue/ruleNode.tsx
+++ b/static/app/views/alerts/rules/issue/ruleNode.tsx
@@ -648,7 +648,7 @@ const RuleRow = styled('div')`
 `;
 
 const RuleRowContainer = styled('div')<{incompatible?: boolean}>`
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   border: 1px ${p => p.theme.tokens.border.secondary} solid;
   border-color: ${p => (p.incompatible ? p.theme.colors.red200 : 'none')};
diff --git a/static/app/views/alerts/rules/metric/triggers/actionsPanel/index.tsx b/static/app/views/alerts/rules/metric/triggers/actionsPanel/index.tsx
index 451dd3b192b1fc..bb8026125ca22d 100644
--- a/static/app/views/alerts/rules/metric/triggers/actionsPanel/index.tsx
+++ b/static/app/views/alerts/rules/metric/triggers/actionsPanel/index.tsx
@@ -537,7 +537,7 @@ const PanelItemSelects = styled('div')`
 `;
 
 const RuleRowContainer = styled('div')`
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border: 1px ${p => p.theme.tokens.border.primary} solid;
   border-radius: ${p => p.theme.radius.md} ${p => p.theme.radius.md} 0 0;
   &:last-child {
diff --git a/static/app/views/alerts/wizard/index.tsx b/static/app/views/alerts/wizard/index.tsx
index 07f7c13b17f5c5..73ba739d3daef9 100644
--- a/static/app/views/alerts/wizard/index.tsx
+++ b/static/app/views/alerts/wizard/index.tsx
@@ -333,7 +333,7 @@ const WizardGroupedOptions = styled(RadioPanelGroup)`
 const DisabledAlertMessageContainer = styled('div')`
   border-top: 1px solid ${p => p.theme.tokens.border.primary};
   padding: ${p => p.theme.space.md} ${p => p.theme.space.lg};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   color: ${p => p.theme.tokens.content.secondary};
   border-radius: 0 0 ${p => p.theme.radius.md} ${p => p.theme.radius.md};
 `;
diff --git a/static/app/views/automations/components/automationBuilderRow.tsx b/static/app/views/automations/components/automationBuilderRow.tsx
index 1c9bf5634f90a6..f01b2c28dfea38 100644
--- a/static/app/views/automations/components/automationBuilderRow.tsx
+++ b/static/app/views/automations/components/automationBuilderRow.tsx
@@ -41,7 +41,7 @@ export default function AutomationBuilderRow({
 
 const RowContainer = styled('div')<{incompatible?: boolean}>`
   display: flex;
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   border: 1px ${p => p.theme.tokens.border.secondary} solid;
   border-color: ${p => (p.incompatible ? p.theme.tokens.border.danger : 'none')};
diff --git a/static/app/views/automations/components/automationListTable/row.tsx b/static/app/views/automations/components/automationListTable/row.tsx
index 47fff59f626cc0..8f4d2176059394 100644
--- a/static/app/views/automations/components/automationListTable/row.tsx
+++ b/static/app/views/automations/components/automationListTable/row.tsx
@@ -100,7 +100,8 @@ const AutomationSimpleTableRow = styled(SimpleTable.Row)`
   min-height: 54px;
 
   &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 
   @media (hover: hover) {
diff --git a/static/app/views/automations/components/conditionsPanel.tsx b/static/app/views/automations/components/conditionsPanel.tsx
index 27948ac2fce934..f24773cbf7d31f 100644
--- a/static/app/views/automations/components/conditionsPanel.tsx
+++ b/static/app/views/automations/components/conditionsPanel.tsx
@@ -168,7 +168,7 @@ const Panel = styled('div')`
   display: flex;
   flex-direction: column;
   gap: ${p => p.theme.space.lg};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border: 1px solid ${p => p.theme.tokens.border.transparent.neutral.muted};
   border-radius: ${p => p.theme.radius.md};
   padding: ${p => p.theme.space.lg};
diff --git a/static/app/views/detectors/components/details/common/openPeriodIssues.tsx b/static/app/views/detectors/components/details/common/openPeriodIssues.tsx
index 4e7f3b07ac344b..6be13b8ae3b70c 100644
--- a/static/app/views/detectors/components/details/common/openPeriodIssues.tsx
+++ b/static/app/views/detectors/components/details/common/openPeriodIssues.tsx
@@ -314,7 +314,7 @@ const StyledTable = styled(SimpleTable)`
 `;
 
 const SubTable = styled(SimpleTable)`
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   grid-template-columns: min-content 1fr 1fr 0.5fr min-content;
   border: 0;
 `;
diff --git a/static/app/views/detectors/components/detectorListTable/detectorListRow.tsx b/static/app/views/detectors/components/detectorListTable/detectorListRow.tsx
index ae832a038552f8..6317c71cd1e3c9 100644
--- a/static/app/views/detectors/components/detectorListTable/detectorListRow.tsx
+++ b/static/app/views/detectors/components/detectorListTable/detectorListRow.tsx
@@ -105,7 +105,8 @@ const DetectorSimpleTableRow = styled(SimpleTable.Row)`
   min-height: 76px;
 
   &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 
   @media (hover: hover) {
diff --git a/static/app/views/detectors/components/detectorTypeForm.tsx b/static/app/views/detectors/components/detectorTypeForm.tsx
index ca6c5b40e435f2..684da24536c3bf 100644
--- a/static/app/views/detectors/components/detectorTypeForm.tsx
+++ b/static/app/views/detectors/components/detectorTypeForm.tsx
@@ -193,7 +193,7 @@ const OptionLabel = styled('label')<{disabled?: boolean}>`
 const OptionInfo = styled('div')`
   border-top: 1px solid ${p => p.theme.tokens.border.primary};
   padding: ${p => p.theme.space.lg} ${p => p.theme.space.xl};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   font-size: ${p => p.theme.fontSize.md};
 `;
 
diff --git a/static/app/views/discover/querycard.tsx b/static/app/views/discover/querycard.tsx
index 698fd28cafddf6..c877e7029d3fe8 100644
--- a/static/app/views/discover/querycard.tsx
+++ b/static/app/views/discover/querycard.tsx
@@ -128,7 +128,7 @@ const QueryDetail = styled('div')`
 `;
 
 const QueryCardBody = styled('div')`
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   max-height: 150px;
   height: 100%;
   overflow: hidden;
diff --git a/static/app/views/discover/table/arithmeticInput.tsx b/static/app/views/discover/table/arithmeticInput.tsx
index e2e4b8298dcc04..587a5c734938da 100644
--- a/static/app/views/discover/table/arithmeticInput.tsx
+++ b/static/app/views/discover/table/arithmeticInput.tsx
@@ -296,7 +296,7 @@ const Container = styled('div')<{isOpen: boolean}>`
     p.isOpen ? `${p.theme.radius.md} ${p.theme.radius.md} 0 0` : p.theme.radius.md};
 
   .show-sidebar & {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.background.secondary};
   }
 `;
 
@@ -436,7 +436,7 @@ const DropdownTitle = styled('header')`
   display: flex;
   align-items: center;
 
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   color: ${p => p.theme.tokens.content.secondary};
   font-weight: ${p => p.theme.fontWeight.normal};
   font-size: ${p => p.theme.fontSize.md};
diff --git a/static/app/views/discover/table/queryField.tsx b/static/app/views/discover/table/queryField.tsx
index 5b971cbc38d141..a643b4ff061244 100644
--- a/static/app/views/discover/table/queryField.tsx
+++ b/static/app/views/discover/table/queryField.tsx
@@ -856,7 +856,7 @@ const BlankSpace = styled('div')`
   /* Match the height of the select boxes */
   height: ${p => p.theme.form.md.height};
   min-width: 50px;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   display: flex;
   align-items: center;
diff --git a/static/app/views/explore/components/attributeBreakdowns/floatingTrigger.tsx b/static/app/views/explore/components/attributeBreakdowns/floatingTrigger.tsx
index c3aeef90f725f5..3e33b9543dd635 100644
--- a/static/app/views/explore/components/attributeBreakdowns/floatingTrigger.tsx
+++ b/static/app/views/explore/components/attributeBreakdowns/floatingTrigger.tsx
@@ -98,7 +98,12 @@ const ListItem = styled('li')`
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
   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};
   }
   &:last-child {
     border-bottom: 0;
diff --git a/static/app/views/explore/components/schemaHints/schemaHintsDrawer.tsx b/static/app/views/explore/components/schemaHints/schemaHintsDrawer.tsx
index b8532f743ead09..bc3e70f79e3467 100644
--- a/static/app/views/explore/components/schemaHints/schemaHintsDrawer.tsx
+++ b/static/app/views/explore/components/schemaHints/schemaHintsDrawer.tsx
@@ -263,11 +263,13 @@ const StyledMultipleCheckboxItem = styled(MultipleCheckbox.Item)`
   }
 
   &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 
   &:active {
-    background-color: ${p => p.theme.colors.gray100};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 
   & > label {
diff --git a/static/app/views/explore/components/styles.tsx b/static/app/views/explore/components/styles.tsx
index e395745da2465b..fce8065b4f3e3e 100644
--- a/static/app/views/explore/components/styles.tsx
+++ b/static/app/views/explore/components/styles.tsx
@@ -28,7 +28,7 @@ export const ExploreControlSection = styled('aside')<{expanded: boolean}>`
 `;
 
 export const ExploreContentSection = styled('section')<{expanded: boolean}>`
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   flex: 1 1 auto;
   min-width: 0;
 
diff --git a/static/app/views/explore/components/traceItemAttributes/attributesTree.tsx b/static/app/views/explore/components/traceItemAttributes/attributesTree.tsx
index 29b11f82e71cfd..223ffe08b81389 100644
--- a/static/app/views/explore/components/traceItemAttributes/attributesTree.tsx
+++ b/static/app/views/explore/components/traceItemAttributes/attributesTree.tsx
@@ -503,7 +503,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;
diff --git a/static/app/views/explore/logs/styles.tsx b/static/app/views/explore/logs/styles.tsx
index 6bbb405ef8d93a..b462eaf5029e8c 100644
--- a/static/app/views/explore/logs/styles.tsx
+++ b/static/app/views/explore/logs/styles.tsx
@@ -35,9 +35,18 @@ export const LogTableRow = styled(TableRow)<LogTableRowProps>`
     cursor: ${p => (p.isClickable ? 'pointer' : 'default')};
 
     &:hover {
-      background-color: ${p => p.theme.tokens.background.secondary};
+      background-color: ${p =>
+        p.theme.tokens.interactive.transparent.neutral.background.hover};
     }
 
+    ${p =>
+      p.isClickable &&
+      `
+      &:active {
+        background-color: ${p.theme.tokens.interactive.transparent.neutral.background.active};
+      }
+    `}
+
     &:not(:last-child) {
       border-bottom: 0;
     }
@@ -451,7 +460,7 @@ export const HoveringRowLoadingRendererContainer = styled('div')<{
   background: linear-gradient(
     to ${p => (p.position === 'top' ? 'bottom' : 'top')},
     rgb(from ${p => p.theme.tokens.background.tertiary} r g b / 75%),
-    rgb(from ${p => p.theme.backgroundSecondary} r g b / 0%)
+    rgb(from ${p => p.theme.tokens.background.secondary} r g b / 0%)
   );
   align-items: center;
   justify-content: center;
diff --git a/static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx b/static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx
index 8f9859e7aedc91..465ce884f07614 100644
--- a/static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx
+++ b/static/app/views/explore/metrics/metricInfoTabs/metricInfoTabStyles.tsx
@@ -35,7 +35,7 @@ export const TransparentLoadingMask = styled('div')`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   opacity: 0.6;
   z-index: 1;
   display: flex;
diff --git a/static/app/views/explore/tables/tracesTable/styles.tsx b/static/app/views/explore/tables/tracesTable/styles.tsx
index 66cabb18344fbf..083c55cf2ed458 100644
--- a/static/app/views/explore/tables/tracesTable/styles.tsx
+++ b/static/app/views/explore/tables/tracesTable/styles.tsx
@@ -94,7 +94,7 @@ export const StyledSpanPanelItem = styled(StyledPanelItem)`
   &:nth-child(10n + 3),
   &:nth-child(10n + 4),
   &:nth-child(10n + 5) {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p => p.theme.tokens.background.secondary};
   }
 `;
 
diff --git a/static/app/views/insights/common/components/modulesOnboarding.tsx b/static/app/views/insights/common/components/modulesOnboarding.tsx
index 4c0c33c1733af4..f62601632cebac 100644
--- a/static/app/views/insights/common/components/modulesOnboarding.tsx
+++ b/static/app/views/insights/common/components/modulesOnboarding.tsx
@@ -219,7 +219,7 @@ const ModulePreviewContainer = styled('div')`
   flex: 2;
   width: 100%;
   padding: ${space(3)};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
 `;
 
 const SupportedSdkContainer = styled('div')`
diff --git a/static/app/views/insights/crons/components/overviewTimeline/overviewRow.tsx b/static/app/views/insights/crons/components/overviewTimeline/overviewRow.tsx
index baeae46935443d..169e0451fb6290 100644
--- a/static/app/views/insights/crons/components/overviewTimeline/overviewRow.tsx
+++ b/static/app/views/insights/crons/components/overviewTimeline/overviewRow.tsx
@@ -304,7 +304,7 @@ const TimelineRow = styled('li')<TimelineRowProps>`
       transition: background 50ms ease-in-out;
 
       &:nth-child(odd) {
-        background: ${p.theme.backgroundSecondary};
+        background: ${p.theme.tokens.background.secondary};
       }
       &:hover {
         background: ${p.theme.tokens.background.tertiary};
diff --git a/static/app/views/insights/pages/agents/components/aiSpanList.tsx b/static/app/views/insights/pages/agents/components/aiSpanList.tsx
index 91e10359ff1bbc..afe65be980747b 100644
--- a/static/app/views/insights/pages/agents/components/aiSpanList.tsx
+++ b/static/app/views/insights/pages/agents/components/aiSpanList.tsx
@@ -426,7 +426,13 @@ const ListItemContainer = styled('div')<{
       : 'none'};
 
   &:hover {
-    background-color: ${p => p.theme.tokens.background.secondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
+  }
+
+  &:active {
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 `;
 
@@ -469,7 +475,13 @@ const TransactionButton = styled('button')`
   font-weight: ${p => p.theme.fontWeight.normal};
 
   &:hover:not(:disabled) {
-    background-color: ${p => p.theme.tokens.background.secondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
+  }
+
+  &:active:not(:disabled) {
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 
   &:first-child {
diff --git a/static/app/views/insights/pages/conversations/components/conversationsTable.tsx b/static/app/views/insights/pages/conversations/components/conversationsTable.tsx
index d13c9c0e89c5ba..e685e76a364d94 100644
--- a/static/app/views/insights/pages/conversations/components/conversationsTable.tsx
+++ b/static/app/views/insights/pages/conversations/components/conversationsTable.tsx
@@ -276,6 +276,12 @@ const InputOutputButton = styled('button')`
   width: 100%;
 
   &: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};
   }
 `;
diff --git a/static/app/views/insights/pages/conversations/components/messagesPanel.tsx b/static/app/views/insights/pages/conversations/components/messagesPanel.tsx
index 66203e8b101468..bcef17ab2043fd 100644
--- a/static/app/views/insights/pages/conversations/components/messagesPanel.tsx
+++ b/static/app/views/insights/pages/conversations/components/messagesPanel.tsx
@@ -357,7 +357,7 @@ const ScrollableContent = styled(Flex)`
 `;
 
 const MessageHeader = styled(Flex)`
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
 `;
 
@@ -379,7 +379,10 @@ const MessageBubble = styled('div')<{
     cursor: pointer;
     &:hover {
       border-color: ${p.theme.tokens.border.accent.moderate};
-      background-color: ${p.theme.tokens.background.secondary};
+      background-color: ${p.theme.tokens.interactive.transparent.neutral.background.hover};
+    }
+    &:active {
+      background-color: ${p.theme.tokens.interactive.transparent.neutral.background.active};
     }
   `}
   ${p =>
diff --git a/static/app/views/insights/pages/platform/nextjs/serverTree.tsx b/static/app/views/insights/pages/platform/nextjs/serverTree.tsx
index 40df36793b4fc8..bca8565900d238 100644
--- a/static/app/views/insights/pages/platform/nextjs/serverTree.tsx
+++ b/static/app/views/insights/pages/platform/nextjs/serverTree.tsx
@@ -427,7 +427,7 @@ const TreeGrid = styled('div')`
   & > *:nth-child(8n + 2),
   & > *:nth-child(8n + 3),
   & > *:nth-child(8n + 4) {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p => p.theme.tokens.background.secondary};
   }
 `;
 
diff --git a/static/app/views/insights/uptime/components/overviewTimeline/overviewRow.tsx b/static/app/views/insights/uptime/components/overviewTimeline/overviewRow.tsx
index fb741739ee87a3..3b35409d68a61d 100644
--- a/static/app/views/insights/uptime/components/overviewTimeline/overviewRow.tsx
+++ b/static/app/views/insights/uptime/components/overviewTimeline/overviewRow.tsx
@@ -201,7 +201,7 @@ const TimelineRow = styled('li')<TimelineRowProps>`
       transition: background 50ms ease-in-out;
 
       &:nth-child(odd) {
-        background: ${p.theme.backgroundSecondary};
+        background: ${p.theme.tokens.background.secondary};
       }
       &:hover {
         background: ${p.theme.tokens.background.tertiary};
diff --git a/static/app/views/issueDetails/groupFeatureFlags/details/flagDetailsDrawerContent.tsx b/static/app/views/issueDetails/groupFeatureFlags/details/flagDetailsDrawerContent.tsx
index 590e38aebc7ef9..237059e33589c7 100644
--- a/static/app/views/issueDetails/groupFeatureFlags/details/flagDetailsDrawerContent.tsx
+++ b/static/app/views/issueDetails/groupFeatureFlags/details/flagDetailsDrawerContent.tsx
@@ -250,7 +250,7 @@ const Header = styled(Body)`
 
 const Row = styled(Body)`
   &:nth-child(even) {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.background.secondary};
   }
   align-items: center;
   border-radius: 4px;
diff --git a/static/app/views/issueDetails/groupMerged/mergedItem.tsx b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
index 255d0a2de18ee6..3132d823fd0547 100644
--- a/static/app/views/issueDetails/groupMerged/mergedItem.tsx
+++ b/static/app/views/issueDetails/groupMerged/mergedItem.tsx
@@ -175,7 +175,7 @@ const MergedGroup = styled('div')<{busy: boolean}>`
 const Controls = styled('div')<{expanded: boolean}>`
   display: flex;
   justify-content: space-between;
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   ${p => p.expanded && `border-bottom: 1px solid ${p.theme.tokens.border.secondary}`};
   padding: ${space(0.5)} ${space(1)};
 
diff --git a/static/app/views/issueDetails/groupTags/groupTagsTab.tsx b/static/app/views/issueDetails/groupTags/groupTagsTab.tsx
index 532ff5f6064370..1ddf28943d95bc 100644
--- a/static/app/views/issueDetails/groupTags/groupTagsTab.tsx
+++ b/static/app/views/issueDetails/groupTags/groupTagsTab.tsx
@@ -212,7 +212,7 @@ const TagBarGlobalSelectionLink = styled(GlobalSelectionLink)`
   color: ${p => p.theme.tokens.content.primary};
   margin-bottom: ${space(0.5)};
   padding: 0 ${space(1)};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   overflow: hidden;
 
diff --git a/static/app/views/issueDetails/groupTags/tagDetailsDrawerContent.tsx b/static/app/views/issueDetails/groupTags/tagDetailsDrawerContent.tsx
index 8961e734bf7392..f6f0bff7ad51d6 100644
--- a/static/app/views/issueDetails/groupTags/tagDetailsDrawerContent.tsx
+++ b/static/app/views/issueDetails/groupTags/tagDetailsDrawerContent.tsx
@@ -384,7 +384,7 @@ const Header = styled(Body)`
 
 const Row = styled(Body)`
   &:nth-child(even) {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.background.secondary};
   }
   align-items: center;
   border-radius: 4px;
diff --git a/static/app/views/issueDetails/groupTags/tagDistribution.tsx b/static/app/views/issueDetails/groupTags/tagDistribution.tsx
index 2e7d9f69cab9ad..a6376cdb2cd483 100644
--- a/static/app/views/issueDetails/groupTags/tagDistribution.tsx
+++ b/static/app/views/issueDetails/groupTags/tagDistribution.tsx
@@ -148,7 +148,7 @@ const TagValueContent = styled('div')`
   grid-column-gap: ${space(1)};
 
   & > :nth-child(2n) {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p => p.theme.tokens.background.secondary};
   }
 `;
 
diff --git a/static/app/views/issueDetails/participantList.tsx b/static/app/views/issueDetails/participantList.tsx
index f821d31441a110..a0023b92d67233 100644
--- a/static/app/views/issueDetails/participantList.tsx
+++ b/static/app/views/issueDetails/participantList.tsx
@@ -133,7 +133,7 @@ const ListTitle = styled('div')`
   display: flex;
   align-items: center;
   padding: ${space(1)} ${space(1.5)};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   color: ${p => p.theme.tokens.content.secondary};
   text-transform: uppercase;
   font-weight: ${p => p.theme.fontWeight.bold};
diff --git a/static/app/views/issueDetails/streamline/eventDetailsHeader.tsx b/static/app/views/issueDetails/streamline/eventDetailsHeader.tsx
index 6e2d56dae64cdc..0cdf7201273285 100644
--- a/static/app/views/issueDetails/streamline/eventDetailsHeader.tsx
+++ b/static/app/views/issueDetails/streamline/eventDetailsHeader.tsx
@@ -269,7 +269,7 @@ const DetailsContainer = styled('div')<{
   display: flex;
   flex-direction: column;
   gap: ${p => p.theme.space.lg};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   padding-left: ${p => p.theme.space['2xl']};
   padding-right: ${p => p.theme.space['2xl']};
   padding-top: ${p => p.theme.space.lg};
diff --git a/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx b/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx
index e487ef3b3a321f..a06b46de3185e8 100644
--- a/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx
+++ b/static/app/views/issueDetails/streamline/groupDetailsLayout.tsx
@@ -111,7 +111,7 @@ const StyledLayoutBody = styled('div')<{
 `;
 
 const GroupContent = styled('section')`
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   display: flex;
   flex-direction: column;
   @media (min-width: ${p => p.theme.breakpoints.lg}) {
diff --git a/static/app/views/issueDetails/streamline/sidebar/participantList.tsx b/static/app/views/issueDetails/streamline/sidebar/participantList.tsx
index c118b99e0c8dc4..5e53ed4c62ad28 100644
--- a/static/app/views/issueDetails/streamline/sidebar/participantList.tsx
+++ b/static/app/views/issueDetails/streamline/sidebar/participantList.tsx
@@ -117,7 +117,7 @@ const ListTitle = styled('div')`
   display: flex;
   align-items: center;
   padding: ${space(1)} ${space(1.5)};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   color: ${p => p.theme.tokens.content.secondary};
   text-transform: uppercase;
   font-weight: ${p => p.theme.fontWeight.bold};
diff --git a/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx b/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx
index f51a5f48c98fad..5f1fab7e0d8a75 100644
--- a/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx
+++ b/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx
@@ -570,7 +570,7 @@ const SeerDrawerContainer = styled('div')`
   display: grid;
   grid-template-rows: auto auto auto 1fr;
   position: relative;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
 `;
 
 const SeerDrawerHeader = styled(DrawerHeader)`
diff --git a/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx b/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx
index 22f813c13a00a3..c7fda898d575bd 100644
--- a/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx
+++ b/static/app/views/issueDetails/traceTimeline/traceTimeline.tsx
@@ -103,7 +103,7 @@ const TimelineOutline = styled('div')`
   height: 10px;
   border: 1px solid ${p => p.theme.tokens.border.secondary};
   border-radius: ${p => p.theme.radius.md};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
 `;
 
 const TimelineEventsContainer = styled('div')`
diff --git a/static/app/views/issueList/actions/index.tsx b/static/app/views/issueList/actions/index.tsx
index cb7ba613363db1..dd44c8d9585b14 100644
--- a/static/app/views/issueList/actions/index.tsx
+++ b/static/app/views/issueList/actions/index.tsx
@@ -493,7 +493,7 @@ const ActionsBarContainer = styled('div')`
   padding-bottom: ${space(0.5)};
   padding-left: ${space(2)};
   align-items: center;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-radius: 6px 6px 0 0;
 `;
 
diff --git a/static/app/views/issueList/newViewEmptyState.tsx b/static/app/views/issueList/newViewEmptyState.tsx
index adb8dcdf4cb415..d3278b3aacbd9b 100644
--- a/static/app/views/issueList/newViewEmptyState.tsx
+++ b/static/app/views/issueList/newViewEmptyState.tsx
@@ -154,7 +154,7 @@ const Wrapper = styled('div')`
 
 const Card = styled(Panel)`
   width: 80%;
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   padding: ${space(2)};
 `;
 
diff --git a/static/app/views/issueList/pages/dynamicGrouping.tsx b/static/app/views/issueList/pages/dynamicGrouping.tsx
index b7690c6a7b389a..c306d46a3b3777 100644
--- a/static/app/views/issueList/pages/dynamicGrouping.tsx
+++ b/static/app/views/issueList/pages/dynamicGrouping.tsx
@@ -974,7 +974,7 @@ const PageWrapper = styled('div')`
 
 const HeaderSection = styled('div')`
   padding: ${space(4)} ${space(4)} ${space(3)};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
 `;
 
 const ClickableHeading = styled(Heading)`
@@ -985,7 +985,7 @@ const ClickableHeading = styled(Heading)`
 const CardsSection = styled('div')`
   flex: 1;
   padding: ${space(2)} ${space(4)} ${space(4)};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
 `;
 
 const CardsGrid = styled('div')`
@@ -1177,7 +1177,7 @@ const TagPill = styled('span')`
   padding: ${space(0.25)} ${space(1)};
   font-size: ${p => p.theme.fontSize.xs};
   color: ${p => p.theme.tokens.content.secondary};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border: 1px solid ${p => p.theme.tokens.border.primary};
   border-radius: ${p => p.theme.radius.md};
 `;
@@ -1212,7 +1212,7 @@ const ShowMoreButton = styled('button')`
   width: 100%;
   margin-top: ${space(3)};
   padding: ${space(2)} ${space(3)};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border: 1px dashed ${p => p.theme.tokens.border.primary};
   border-radius: ${p => p.theme.radius.md};
   color: ${p => p.theme.tokens.content.secondary};
@@ -1233,7 +1233,7 @@ const ShowMoreButton = styled('button')`
 const JsonInputContainer = styled('div')`
   margin-bottom: ${space(2)};
   padding: ${space(2)};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border: 1px solid ${p => p.theme.tokens.border.primary};
   border-radius: ${p => p.theme.radius.md};
 `;
diff --git a/static/app/views/issueList/pages/topIssuesDrawer.tsx b/static/app/views/issueList/pages/topIssuesDrawer.tsx
index 7ea81dc30e995e..90952b75724375 100644
--- a/static/app/views/issueList/pages/topIssuesDrawer.tsx
+++ b/static/app/views/issueList/pages/topIssuesDrawer.tsx
@@ -1035,7 +1035,7 @@ const TagPill = styled('span')`
   padding: ${p => p.theme.space.xs} ${p => p.theme.space.md};
   font-size: ${p => p.theme.fontSize.xs};
   color: ${p => p.theme.tokens.content.primary};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border: 1px solid ${p => p.theme.tokens.border.primary};
   border-radius: 20px;
 `;
@@ -1115,7 +1115,7 @@ const TagsTableHeader = styled('div')`
   grid-template-columns: subgrid;
   gap: ${p => p.theme.space.xl};
   padding: ${p => p.theme.space.md} ${p => p.theme.space.lg};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
 `;
 
@@ -1129,7 +1129,7 @@ const DenseTagBar = styled('div')`
   height: 6px;
   border-radius: 3px;
   overflow: hidden;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   margin-bottom: ${p => p.theme.space.sm};
 `;
 
@@ -1144,7 +1144,7 @@ const TagMiniBar = styled('div')`
   height: 6px;
   border-radius: 3px;
   overflow: hidden;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   box-shadow: inset 0 0 0 1px ${p => p.theme.tokens.border.secondary};
 `;
 
@@ -1188,6 +1188,6 @@ const TagRow = styled('div')`
   }
 
   &:hover {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 `;
diff --git a/static/app/views/nav/secondary/secondarySidebar.tsx b/static/app/views/nav/secondary/secondarySidebar.tsx
index b66d48b95dd87d..16d52b229bec35 100644
--- a/static/app/views/nav/secondary/secondarySidebar.tsx
+++ b/static/app/views/nav/secondary/secondarySidebar.tsx
@@ -87,7 +87,7 @@ export function SecondarySidebar() {
 }
 
 const SecondarySidebarWrapper = styled(NavTourElement)`
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-right: 1px solid ${p => p.theme.tokens.border.primary};
   position: relative;
   z-index: ${p => p.theme.zIndex.sidebarPanel};
diff --git a/static/app/views/nav/secondary/sections/issues/issuesSecondaryNav.tsx b/static/app/views/nav/secondary/sections/issues/issuesSecondaryNav.tsx
index 18cbe695f82bca..c228dcb68f5209 100644
--- a/static/app/views/nav/secondary/sections/issues/issuesSecondaryNav.tsx
+++ b/static/app/views/nav/secondary/sections/issues/issuesSecondaryNav.tsx
@@ -113,6 +113,6 @@ const StickyBottomSection = styled(SecondaryNav.Section, {
       position: sticky;
       bottom: 0;
       z-index: 1;
-      background: ${p.theme.backgroundSecondary};
+      background: ${p.theme.tokens.background.secondary};
     `}
 `;
diff --git a/static/app/views/organizationStats/teamInsights/controls.tsx b/static/app/views/organizationStats/teamInsights/controls.tsx
index 06a1e8c35a72cc..cb88a035df2f4c 100644
--- a/static/app/views/organizationStats/teamInsights/controls.tsx
+++ b/static/app/views/organizationStats/teamInsights/controls.tsx
@@ -164,14 +164,14 @@ function TeamStatsControls({
             };
             return {...provided, ...custom};
           },
-          input: (provided: any, state: any) => ({
+          input: (provided: any) => ({
             ...provided,
             display: 'grid',
             gridTemplateColumns: 'max-content 1fr',
             alignItems: 'center',
             gridGap: space(1),
             ':before': {
-              backgroundColor: state.theme.backgroundSecondary,
+              backgroundColor: theme.tokens.background.secondary,
               height: 24,
               width: 38,
               borderRadius: 3,
diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
index 4faf00da83b5bf..1abd18d07babc1 100644
--- a/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
+++ b/static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx
@@ -1295,7 +1295,7 @@ const MarkdownContainer = styled('div')`
 const MultilineTextWrapper = styled('div')`
   position: relative;
   white-space: pre-wrap;
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   padding: ${space(1)};
   word-break: break-word;
diff --git a/static/app/views/performance/newTraceDetails/traceSummary.tsx b/static/app/views/performance/newTraceDetails/traceSummary.tsx
index fa3203b71cd909..3570f0fff3faba 100644
--- a/static/app/views/performance/newTraceDetails/traceSummary.tsx
+++ b/static/app/views/performance/newTraceDetails/traceSummary.tsx
@@ -209,7 +209,7 @@ const SectionContent = styled(MarkedText)`
   code {
     font-family: ${p => p.theme.text.familyMono};
     padding: ${space(0.25)} ${space(0.5)};
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.background.secondary};
     border-radius: ${p => p.theme.radius.md};
     font-size: 0.9em;
   }
diff --git a/static/app/views/performance/newTraceDetails/traceTypeWarnings/styles.tsx b/static/app/views/performance/newTraceDetails/traceTypeWarnings/styles.tsx
index b2f2561f99ee7e..57ce2c50dfe17e 100644
--- a/static/app/views/performance/newTraceDetails/traceTypeWarnings/styles.tsx
+++ b/static/app/views/performance/newTraceDetails/traceTypeWarnings/styles.tsx
@@ -99,9 +99,9 @@ const BannerWrapper = styled('div')`
   padding: ${space(2)} ${space(3)};
   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%
   );
   container-type: inline-size;
 `;
diff --git a/static/app/views/preprod/buildDetails/main/insights/appSizeInsights.tsx b/static/app/views/preprod/buildDetails/main/insights/appSizeInsights.tsx
index 86df48b9f4c5b3..88b8296f3c9c51 100644
--- a/static/app/views/preprod/buildDetails/main/insights/appSizeInsights.tsx
+++ b/static/app/views/preprod/buildDetails/main/insights/appSizeInsights.tsx
@@ -77,7 +77,7 @@ export function AppSizeInsights({
         gap="2xs"
         css={theme => ({
           '& > :nth-child(odd)': {
-            backgroundColor: theme.backgroundSecondary,
+            backgroundColor: theme.tokens.background.secondary,
           },
         })}
       >
diff --git a/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebarRow.tsx b/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebarRow.tsx
index cd97dcf96a0c20..606b33f87cf1cc 100644
--- a/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebarRow.tsx
+++ b/static/app/views/preprod/buildDetails/main/insights/appSizeInsightsSidebarRow.tsx
@@ -183,7 +183,7 @@ export function AppSizeInsightsSidebarRow({
                   width: '100%',
                   overflow: 'hidden',
                   '& > :nth-child(odd)': {
-                    backgroundColor: theme.backgroundSecondary,
+                    backgroundColor: theme.tokens.background.secondary,
                   },
                 })}
               >
diff --git a/static/app/views/preprod/buildDetails/main/insights/insightInfoModal.tsx b/static/app/views/preprod/buildDetails/main/insights/insightInfoModal.tsx
index 1501775e38ad58..a26d617986e861 100644
--- a/static/app/views/preprod/buildDetails/main/insights/insightInfoModal.tsx
+++ b/static/app/views/preprod/buildDetails/main/insights/insightInfoModal.tsx
@@ -30,7 +30,7 @@ export const CodeBlockWrapper = styled('div')`
 `;
 
 export const InlineCode = styled('code')`
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   padding: ${p => p.theme.space.xs} ${p => p.theme.space.sm};
   border-radius: ${p => p.theme.radius.md};
   font-family: ${p => p.theme.text.familyMono};
diff --git a/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarContent.tsx b/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarContent.tsx
index 1975248d06d615..052eea90bb845f 100644
--- a/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarContent.tsx
+++ b/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarContent.tsx
@@ -115,5 +115,5 @@ const SkeletonCard = styled('div')`
   padding: ${space(3)};
   border: 1px solid ${p => p.theme.tokens.border.primary};
   border-radius: 6px;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
 `;
diff --git a/static/app/views/preprod/components/missingDsymModal.tsx b/static/app/views/preprod/components/missingDsymModal.tsx
index d49411c107b467..497019d92ca4d1 100644
--- a/static/app/views/preprod/components/missingDsymModal.tsx
+++ b/static/app/views/preprod/components/missingDsymModal.tsx
@@ -57,7 +57,7 @@ const BinaryList = styled(Stack)`
   max-height: 400px;
   overflow-y: auto;
   padding: ${space(2)};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   border: 1px solid ${p => p.theme.tokens.border.primary};
 `;
diff --git a/static/app/views/projectInstall/messagingIntegrationAlertRule.tsx b/static/app/views/projectInstall/messagingIntegrationAlertRule.tsx
index 7b4b0c010bd5db..586987df521c7a 100644
--- a/static/app/views/projectInstall/messagingIntegrationAlertRule.tsx
+++ b/static/app/views/projectInstall/messagingIntegrationAlertRule.tsx
@@ -176,7 +176,7 @@ export default function MessagingIntegrationAlertRule({
 
 const Rule = styled('div')`
   padding: ${space(1)};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   display: flex;
   flex-wrap: wrap;
diff --git a/static/app/views/projectsDashboard/projectCard.tsx b/static/app/views/projectsDashboard/projectCard.tsx
index faa9429c769217..9613d65e143b48 100644
--- a/static/app/views/projectsDashboard/projectCard.tsx
+++ b/static/app/views/projectsDashboard/projectCard.tsx
@@ -235,7 +235,7 @@ const CardFooter = styled('div')`
 const ChartContainer = styled('div')`
   position: relative;
   margin: 0 -${space(2)};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
 `;
 
 const HeaderRow = styled('div')`
diff --git a/static/app/views/projectsDashboard/projectChart.tsx b/static/app/views/projectsDashboard/projectChart.tsx
index 2d251f27938e9a..d898074866c957 100644
--- a/static/app/views/projectsDashboard/projectChart.tsx
+++ b/static/app/views/projectsDashboard/projectChart.tsx
@@ -167,7 +167,7 @@ export function ProjectChart({
         inside: true,
         lineHeight: 12,
         formatter: (value: number) => axisLabelFormatter(value, 'number', true),
-        textBorderColor: theme.backgroundSecondary,
+        textBorderColor: theme.tokens.border.secondary,
         textBorderWidth: 1,
       },
       splitLine: {
diff --git a/static/app/views/pullRequest/details/main/prFilesList.tsx b/static/app/views/pullRequest/details/main/prFilesList.tsx
index fb9eb11d9c58a5..46774efce409cb 100644
--- a/static/app/views/pullRequest/details/main/prFilesList.tsx
+++ b/static/app/views/pullRequest/details/main/prFilesList.tsx
@@ -239,7 +239,7 @@ const DiffRow = styled('tr')`
   }
 
   &.header {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p => p.theme.tokens.background.secondary};
 
     td {
       color: ${p => p.theme.tokens.content.accent};
diff --git a/static/app/views/releases/list/releaseCard/index.tsx b/static/app/views/releases/list/releaseCard/index.tsx
index 611c752d70a4f3..a59f9b5781a78b 100644
--- a/static/app/views/releases/list/releaseCard/index.tsx
+++ b/static/app/views/releases/list/releaseCard/index.tsx
@@ -505,7 +505,7 @@ const HiddenProjectsMessage = styled('div')`
   height: 24px;
   line-height: 24px;
   color: ${p => p.theme.tokens.content.secondary};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-bottom-right-radius: ${p => p.theme.radius.md};
   @media (max-width: ${p => p.theme.breakpoints.md}) {
     border-bottom-left-radius: ${p => p.theme.radius.md};
diff --git a/static/app/views/relocation/uploadBackup.tsx b/static/app/views/relocation/uploadBackup.tsx
index ba4208e6d08a23..41f0a9b79b698c 100644
--- a/static/app/views/relocation/uploadBackup.tsx
+++ b/static/app/views/relocation/uploadBackup.tsx
@@ -222,7 +222,7 @@ const FinishedWell = styled('div')`
   padding: ${space(2)} ${space(3)};
   border-radius: 3px;
   border: 1px solid ${p => p.theme.tokens.border.primary};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
 `;
 
 const UploadWell = styled('div')<{draggedOver: boolean}>`
diff --git a/static/app/views/replays/detail/ai/chapterList.tsx b/static/app/views/replays/detail/ai/chapterList.tsx
index 9fa2ee89cdf831..21024863bd64ec 100644
--- a/static/app/views/replays/detail/ai/chapterList.tsx
+++ b/static/app/views/replays/detail/ai/chapterList.tsx
@@ -290,7 +290,13 @@ const ChapterWrapper = styled('details')`
   /* the border-top is used to eliminate some of the top gap */
 
   &:hover {
-    border-top: 1px solid ${p => p.theme.tokens.background.secondary};
+    border-top: 1px solid
+      ${p => p.theme.tokens.interactive.transparent.neutral.background.hover};
+  }
+
+  &:active {
+    border-top: 1px solid
+      ${p => p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 
   [data-is-feedback='true'] {
@@ -314,7 +320,13 @@ const ChapterBreadcrumbRow = styled(BreadcrumbRow)`
   }
 
   &:hover {
-    background-color: ${p => p.theme.tokens.background.secondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
+  }
+
+  &:active {
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 `;
 
@@ -327,7 +339,13 @@ const Chapter = styled('summary')`
   color: ${p => p.theme.tokens.content.primary};
 
   &: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};
   }
 
   /* sorry */
diff --git a/static/app/views/replays/detail/network/details/components.tsx b/static/app/views/replays/detail/network/details/components.tsx
index a9255137f95800..861c2a72a629ed 100644
--- a/static/app/views/replays/detail/network/details/components.tsx
+++ b/static/app/views/replays/detail/network/details/components.tsx
@@ -108,7 +108,11 @@ const ToggleButton = styled('button')`
   padding: ${space(0.5)} ${space(1)};
 
   :hover {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.hover};
+  }
+
+  :active {
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 `;
 
diff --git a/static/app/views/seerExplorer/askUserQuestionBlock.tsx b/static/app/views/seerExplorer/askUserQuestionBlock.tsx
index ee32c0ec705aef..fa374bc9b88c34 100644
--- a/static/app/views/seerExplorer/askUserQuestionBlock.tsx
+++ b/static/app/views/seerExplorer/askUserQuestionBlock.tsx
@@ -183,7 +183,7 @@ const OptionRow = styled('div')<{isSelected: boolean}>`
   transition: background-color 0.15s ease;
 
   &:hover {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 `;
 
diff --git a/static/app/views/seerExplorer/fileDiffViewer.tsx b/static/app/views/seerExplorer/fileDiffViewer.tsx
index 73303b77f38049..dfe532abbc7494 100644
--- a/static/app/views/seerExplorer/fileDiffViewer.tsx
+++ b/static/app/views/seerExplorer/fileDiffViewer.tsx
@@ -204,7 +204,7 @@ const FileHeader = styled('div')<{collapsible?: boolean}>`
   align-items: center;
   grid-template-columns: minmax(60px, auto) 1fr ${p => (p.collapsible ? 'auto' : '')};
   gap: ${p => p.theme.space.xl};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   padding: ${p => p.theme.space.md} ${p => p.theme.space.xl};
   ${p => (p.collapsible ? 'cursor: pointer;' : '')}
 `;
@@ -248,12 +248,12 @@ const DiffContainer = styled('div')`
 
 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: ${p => p.theme.space.sm} ${p => p.theme.space.md} ${p => p.theme.space.sm}
     ${p => p.theme.space['3xl']};
@@ -264,7 +264,7 @@ const LineNumber = styled('div')<{lineType: DiffLineType}>`
   display: flex;
   padding: ${p => p.theme.space['2xs']} ${p => p.theme.space.md};
   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 =>
diff --git a/static/app/views/settings/account/accountSubscriptions.tsx b/static/app/views/settings/account/accountSubscriptions.tsx
index f3e67adf3b27ed..fea225c12195eb 100644
--- a/static/app/views/settings/account/accountSubscriptions.tsx
+++ b/static/app/views/settings/account/accountSubscriptions.tsx
@@ -221,7 +221,7 @@ const Heading = styled(PanelItem)`
   align-items: center;
   font-size: ${p => p.theme.fontSize.md};
   padding: ${space(1.5)} ${space(2)};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   color: ${p => p.theme.tokens.content.secondary};
 `;
 
diff --git a/static/app/views/settings/components/dataScrubbing/modals/form/attributeField.tsx b/static/app/views/settings/components/dataScrubbing/modals/form/attributeField.tsx
index 7308c7a345ae93..21090371261d68 100644
--- a/static/app/views/settings/components/dataScrubbing/modals/form/attributeField.tsx
+++ b/static/app/views/settings/components/dataScrubbing/modals/form/attributeField.tsx
@@ -261,8 +261,11 @@ const Suggestion = styled('li')<{active: boolean}>`
   font-size: ${p => p.theme.fontSize.md};
   cursor: pointer;
   background: ${p =>
-    p.active ? p.theme.backgroundSecondary : p.theme.tokens.background.primary};
+    p.active ? p.theme.tokens.background.secondary : p.theme.tokens.background.primary};
   :hover {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.hover};
+  }
+  :active {
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 `;
diff --git a/static/app/views/settings/components/dataScrubbing/modals/form/sourceField.tsx b/static/app/views/settings/components/dataScrubbing/modals/form/sourceField.tsx
index 8ddce92e6c6512..05077c74d983a9 100644
--- a/static/app/views/settings/components/dataScrubbing/modals/form/sourceField.tsx
+++ b/static/app/views/settings/components/dataScrubbing/modals/form/sourceField.tsx
@@ -491,10 +491,12 @@ const Suggestion = styled('li')<{active: boolean}>`
   font-size: ${p => p.theme.fontSize.md};
   cursor: pointer;
   background: ${p =>
-    p.active ? p.theme.backgroundSecondary : p.theme.tokens.background.primary};
+    p.active ? p.theme.tokens.background.secondary : p.theme.tokens.background.primary};
   :hover {
-    background: ${p =>
-      p.active ? p.theme.backgroundSecondary : p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.hover};
+  }
+  :active {
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 `;
 
diff --git a/static/app/views/settings/components/dataScrubbing/organizationRules.tsx b/static/app/views/settings/components/dataScrubbing/organizationRules.tsx
index b37e77da0830d2..52e68334322a72 100644
--- a/static/app/views/settings/components/dataScrubbing/organizationRules.tsx
+++ b/static/app/views/settings/components/dataScrubbing/organizationRules.tsx
@@ -122,7 +122,7 @@ const Header = styled('div')`
 
 const Wrapper = styled('div')<{contentHeight?: string; isCollapsed?: boolean}>`
   color: ${p => p.theme.tokens.content.secondary};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   ${p => !p.contentHeight && `padding: ${space(1)} ${space(2)}`};
   ${p => !p.isCollapsed && ` border-bottom: 1px solid ${p.theme.tokens.border.primary}`};
   ${p =>
diff --git a/static/app/views/settings/components/dataScrubbing/rules.tsx b/static/app/views/settings/components/dataScrubbing/rules.tsx
index f8e2ac4ebfe795..35a17b556c2246 100644
--- a/static/app/views/settings/components/dataScrubbing/rules.tsx
+++ b/static/app/views/settings/components/dataScrubbing/rules.tsx
@@ -80,7 +80,7 @@ const List = styled('ul')<{
     p.isDisabled &&
     css`
       color: ${p.theme.colors.gray200};
-      background: ${p.theme.backgroundSecondary};
+      background: ${p.theme.tokens.background.secondary};
     `}
 `;
 
@@ -92,7 +92,8 @@ const ListItem = styled('li')`
   padding: ${space(1)} ${space(2)};
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
   &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
   &:last-child {
     border-bottom: 0;
diff --git a/static/app/views/settings/dynamicSampling/projectsTable.tsx b/static/app/views/settings/dynamicSampling/projectsTable.tsx
index 8c3468a10365ec..1b2bd22e8e067e 100644
--- a/static/app/views/settings/dynamicSampling/projectsTable.tsx
+++ b/static/app/views/settings/dynamicSampling/projectsTable.tsx
@@ -473,7 +473,7 @@ const SubContent = styled('div')`
     overflow: hidden;
 
     &:nth-child(odd) {
-      background: ${p => p.theme.backgroundSecondary};
+      background: ${p => p.theme.tokens.background.secondary};
     }
   }
 
@@ -537,7 +537,7 @@ const TableHeader = styled(TableRowWrapper)`
   font-weight: ${p => p.theme.fontWeight.bold};
   text-transform: uppercase;
   border-radius: ${p => p.theme.radius.md} ${p => p.theme.radius.md} 0 0;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   white-space: nowrap;
   line-height: 1;
   height: 45px;
diff --git a/static/app/views/settings/organizationDataForwarding/components/projectOverrideForm.tsx b/static/app/views/settings/organizationDataForwarding/components/projectOverrideForm.tsx
index a753d6816681a6..6778cca68c06d4 100644
--- a/static/app/views/settings/organizationDataForwarding/components/projectOverrideForm.tsx
+++ b/static/app/views/settings/organizationDataForwarding/components/projectOverrideForm.tsx
@@ -110,7 +110,7 @@ const OverrideForm = styled(JsonForm)`
   }
   ${PanelHeader} {
     text-transform: none;
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.background.secondary};
     padding: ${p => `${p.theme.space.md} ${p.theme.space.lg}`};
   }
   margin: 0;
diff --git a/static/app/views/settings/organizationDeveloperSettings/subscriptionBox.tsx b/static/app/views/settings/organizationDeveloperSettings/subscriptionBox.tsx
index a591beadb55270..68d81e21879ba1 100644
--- a/static/app/views/settings/organizationDeveloperSettings/subscriptionBox.tsx
+++ b/static/app/views/settings/organizationDeveloperSettings/subscriptionBox.tsx
@@ -90,7 +90,7 @@ const SubscriptionGridItem = styled('div')<{disabled: boolean}>`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   opacity: ${p => (p.disabled ? 0.6 : 1)};
   border-radius: ${p => p.theme.radius.md};
   cursor: ${p => (p.disabled ? 'not-allowed' : 'auto')};
diff --git a/static/app/views/settings/project/preprod/statusCheckRuleItem.tsx b/static/app/views/settings/project/preprod/statusCheckRuleItem.tsx
index 274ffff803d1f2..6143f1bf92f78b 100644
--- a/static/app/views/settings/project/preprod/statusCheckRuleItem.tsx
+++ b/static/app/views/settings/project/preprod/statusCheckRuleItem.tsx
@@ -106,7 +106,11 @@ const ItemHeader = styled('button')`
   text-align: left;
 
   &:hover {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.hover};
+  }
+
+  &:active {
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 `;
 
diff --git a/static/app/views/settings/project/projectFilters/projectFiltersSettings.tsx b/static/app/views/settings/project/projectFilters/projectFiltersSettings.tsx
index 5940d15c5e4a69..279fd5f57934b4 100644
--- a/static/app/views/settings/project/projectFilters/projectFiltersSettings.tsx
+++ b/static/app/views/settings/project/projectFilters/projectFiltersSettings.tsx
@@ -653,7 +653,7 @@ const FilterGridItem = 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};
   border-radius: ${p => p.theme.radius.md};
   padding: ${space(1.5)};
 `;
diff --git a/static/app/views/settings/projectSeer/selectableRepoItem.tsx b/static/app/views/settings/projectSeer/selectableRepoItem.tsx
index 2faf58d7224bd6..0e5aaf268e032b 100644
--- a/static/app/views/settings/projectSeer/selectableRepoItem.tsx
+++ b/static/app/views/settings/projectSeer/selectableRepoItem.tsx
@@ -69,7 +69,13 @@ const RepoListItemContainer = styled('div')<{
   padding-left: ${space(1.5)};
 
   &: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};
   }
 
   ${p =>
diff --git a/static/gsAdmin/views/customerUpgradeRequest.tsx b/static/gsAdmin/views/customerUpgradeRequest.tsx
index 5162b32af8aedf..d09810eecb8376 100644
--- a/static/gsAdmin/views/customerUpgradeRequest.tsx
+++ b/static/gsAdmin/views/customerUpgradeRequest.tsx
@@ -205,7 +205,7 @@ function CustomerUpgradeRequest() {
 const Divider = styled(PanelItem)`
   font-size: ${p => p.theme.fontSize.md};
   padding: ${space(1.5)} ${space(2)};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   color: ${p => p.theme.tokens.content.secondary};
 `;
 
diff --git a/static/gsAdmin/views/relocationCreate.tsx b/static/gsAdmin/views/relocationCreate.tsx
index 1f9b7dfb345244..eb12e100ba550c 100644
--- a/static/gsAdmin/views/relocationCreate.tsx
+++ b/static/gsAdmin/views/relocationCreate.tsx
@@ -173,7 +173,7 @@ const UploadWell = styled('div')`
   margin-top: ${space(2)};
   margin-bottom: ${space(3)};
   border: 1px solid ${p => p.theme.tokens.border.primary};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   padding: ${space(2)} ${space(3)};
   border-radius: 3px;
   text-align: center;
diff --git a/static/gsApp/components/dataConsentBanner.tsx b/static/gsApp/components/dataConsentBanner.tsx
index 464c6fdc77dddc..fea558dc7101c7 100644
--- a/static/gsApp/components/dataConsentBanner.tsx
+++ b/static/gsApp/components/dataConsentBanner.tsx
@@ -111,9 +111,9 @@ const DataConsentBannerWrapper = styled('div')`
   grid-column: 1 / -1;
   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%
   );
 `;
 
diff --git a/static/gsApp/components/dataConsentModal.tsx b/static/gsApp/components/dataConsentModal.tsx
index 9e666e4e39deaa..f8caf4836b797b 100644
--- a/static/gsApp/components/dataConsentModal.tsx
+++ b/static/gsApp/components/dataConsentModal.tsx
@@ -181,7 +181,7 @@ const ConsentHeader = styled('p')`
 `;
 
 const ConsentInfo = styled('div')`
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   padding-top: ${space(1.5)};
   padding-bottom: ${space(1.5)};
diff --git a/static/gsApp/components/memberInviteModalCustomization.tsx b/static/gsApp/components/memberInviteModalCustomization.tsx
index 516f0f8cdc8da7..401b1687e56ab4 100644
--- a/static/gsApp/components/memberInviteModalCustomization.tsx
+++ b/static/gsApp/components/memberInviteModalCustomization.tsx
@@ -185,7 +185,7 @@ const TrialInfo = styled('div')<{status?: string}>`
   margin: ${space(2)} 0;
   align-items: center;
   font-size: ${p => p.theme.fontSize.md};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-radius: 3px;
   ${p => p.status === 'error' && `color: ${p.theme.red300}`};
 
diff --git a/static/gsApp/components/upgradeNowModal/modalSamePrice.tsx b/static/gsApp/components/upgradeNowModal/modalSamePrice.tsx
index a3e4fe7c723fd3..5250a15bafca54 100644
--- a/static/gsApp/components/upgradeNowModal/modalSamePrice.tsx
+++ b/static/gsApp/components/upgradeNowModal/modalSamePrice.tsx
@@ -142,7 +142,7 @@ const Header = styled('h1')`
 `;
 
 const CTAPanel = styled('div')`
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-radius: ${p => p.theme.radius.md};
   display: flex;
   justify-content: space-between;
diff --git a/static/gsApp/hooks/integrationFeatures.tsx b/static/gsApp/hooks/integrationFeatures.tsx
index f0f76e0f533625..a82bd9de41ae6c 100644
--- a/static/gsApp/hooks/integrationFeatures.tsx
+++ b/static/gsApp/hooks/integrationFeatures.tsx
@@ -288,7 +288,7 @@ const FeatureGroupHeading = styled('div')`
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid ${p => p.theme.colors.gray200};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   font-size: 0.9em;
   padding: 8px 8px 8px 12px;
 `;
diff --git a/static/gsApp/hooks/orgStatsProfilingBanner.tsx b/static/gsApp/hooks/orgStatsProfilingBanner.tsx
index 7e4e8a1d8b3acd..662bb37dea24d7 100644
--- a/static/gsApp/hooks/orgStatsProfilingBanner.tsx
+++ b/static/gsApp/hooks/orgStatsProfilingBanner.tsx
@@ -85,7 +85,7 @@ const HeaderItem = styled('div')`
   grid-column: span 1;
 
   padding: ${space(2)};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
 
   @media (min-width: ${p => p.theme.breakpoints.md}) {
diff --git a/static/gsApp/views/amCheckout/components/cartDiff.tsx b/static/gsApp/views/amCheckout/components/cartDiff.tsx
index fde92f109486c9..6c9bd5b7fa2ce5 100644
--- a/static/gsApp/views/amCheckout/components/cartDiff.tsx
+++ b/static/gsApp/views/amCheckout/components/cartDiff.tsx
@@ -621,7 +621,7 @@ const Change = styled('div')`
   align-items: center;
   gap: ${p => p.theme.space.sm};
   font-family: ${p => p.theme.text.familyMono};
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   padding: ${p => p.theme.space['2xs']} ${p => p.theme.space.sm};
 
   &::before {
diff --git a/static/gsApp/views/amCheckout/index.tsx b/static/gsApp/views/amCheckout/index.tsx
index 24ba40cf4da6c4..e856fe26c765c3 100644
--- a/static/gsApp/views/amCheckout/index.tsx
+++ b/static/gsApp/views/amCheckout/index.tsx
@@ -898,7 +898,7 @@ const SidePanel = styled('aside')`
   display: flex;
   flex-direction: column;
   padding: 0 ${p => p.theme.space['2xl']};
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.tokens.background.secondary};
 
   @media (min-width: ${p => p.theme.breakpoints.md}) {
     position: sticky;
diff --git a/static/gsApp/views/invoiceDetails/index.tsx b/static/gsApp/views/invoiceDetails/index.tsx
index fa0c0884d1fcea..6f2b845a02f692 100644
--- a/static/gsApp/views/invoiceDetails/index.tsx
+++ b/static/gsApp/views/invoiceDetails/index.tsx
@@ -304,7 +304,7 @@ const Attributes = styled('dl')`
     margin: 0 0 ${space(0.25)} ${space(1)};
   }
   dd {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.background.secondary};
     padding: ${space(1)};
     margin-bottom: ${space(2)};
   }
diff --git a/static/gsApp/views/seerAutomation/components/seerAutomationProjectList.tsx b/static/gsApp/views/seerAutomation/components/seerAutomationProjectList.tsx
index 7ed2779d0dc3c7..8fbeb364e5e0d8 100644
--- a/static/gsApp/views/seerAutomation/components/seerAutomationProjectList.tsx
+++ b/static/gsApp/views/seerAutomation/components/seerAutomationProjectList.tsx
@@ -453,7 +453,8 @@ const StyledCheckbox = styled(Checkbox)`
 const ClickablePanelItem = styled(PanelItem)`
   cursor: pointer;
   &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 `;
 
diff --git a/static/gsApp/views/seerAutomation/onboarding/onboardingLegacy.tsx b/static/gsApp/views/seerAutomation/onboarding/onboardingLegacy.tsx
index 5b9a1ea4c5bd70..082da959892cb6 100644
--- a/static/gsApp/views/seerAutomation/onboarding/onboardingLegacy.tsx
+++ b/static/gsApp/views/seerAutomation/onboarding/onboardingLegacy.tsx
@@ -865,7 +865,8 @@ const ClickablePanelItem = styled(PanelItem)`
   padding-bottom: ${space(1)};
 
   &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 `;
 
diff --git a/static/gsApp/views/spendAllocations/projectAllocationsTable.tsx b/static/gsApp/views/spendAllocations/projectAllocationsTable.tsx
index 0cbe791d3229cb..3f040781fefc64 100644
--- a/static/gsApp/views/spendAllocations/projectAllocationsTable.tsx
+++ b/static/gsApp/views/spendAllocations/projectAllocationsTable.tsx
@@ -137,7 +137,7 @@ const HeaderCell = styled('th')`
   font-weight: 600;
   text-transform: uppercase;
   border-radius: ${p => p.theme.radius.md} ${p => p.theme.radius.md} 0 0;
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   padding: ${space(1)} ${space(2)};
 `;
 
diff --git a/static/gsApp/views/subscriptionPage/styles.tsx b/static/gsApp/views/subscriptionPage/styles.tsx
index 2802ad7365b49b..519720916f7101 100644
--- a/static/gsApp/views/subscriptionPage/styles.tsx
+++ b/static/gsApp/views/subscriptionPage/styles.tsx
@@ -34,7 +34,7 @@ export const StripedTable = styled('table')`
   margin: 0;
 
   tr:nth-child(2n + 1) td {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p => p.theme.tokens.background.secondary};
   }
 `;
 
diff --git a/static/gsApp/views/subscriptionPage/subscriptionUpsellBanner.tsx b/static/gsApp/views/subscriptionPage/subscriptionUpsellBanner.tsx
index 5b47657df07bfa..698007c9a72450 100644
--- a/static/gsApp/views/subscriptionPage/subscriptionUpsellBanner.tsx
+++ b/static/gsApp/views/subscriptionPage/subscriptionUpsellBanner.tsx
@@ -188,9 +188,9 @@ const BusinessTrialBannerWrapper = styled('div')`
   padding: ${space(2)};
   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%
   );
   margin-bottom: 0;
 `;
diff --git a/static/gsApp/views/subscriptionPage/usageOverview/components/table.tsx b/static/gsApp/views/subscriptionPage/usageOverview/components/table.tsx
index ee9aa71a02c2d5..ebf370248439b5 100644
--- a/static/gsApp/views/subscriptionPage/usageOverview/components/table.tsx
+++ b/static/gsApp/views/subscriptionPage/usageOverview/components/table.tsx
@@ -163,7 +163,7 @@ const Table = styled('table')`
 `;
 
 const TableHeaderRow = styled('tr')`
-  background: ${p => p.theme.backgroundSecondary};
+  background: ${p => p.theme.tokens.background.secondary};
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
   text-transform: uppercase;
   padding: ${p => p.theme.space.xl};
diff --git a/static/gsApp/views/subscriptionPage/usageOverview/components/tableRow.tsx b/static/gsApp/views/subscriptionPage/usageOverview/components/tableRow.tsx
index 5b443d8f3d817c..166bea9fb3c4df 100644
--- a/static/gsApp/views/subscriptionPage/usageOverview/components/tableRow.tsx
+++ b/static/gsApp/views/subscriptionPage/usageOverview/components/tableRow.tsx
@@ -482,12 +482,18 @@ const Row = styled('tr')`
 const ProductRow = styled(Row)<{isSelected: boolean}>`
   position: relative;
   background: ${p =>
-    p.isSelected ? p.theme.backgroundSecondary : p.theme.tokens.background.primary};
+    p.isSelected
+      ? p.theme.tokens.background.secondary
+      : p.theme.tokens.background.primary};
   padding: ${p => p.theme.space.xl};
   cursor: pointer;
 
   &:hover {
-    background: ${p => p.theme.backgroundSecondary};
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.hover};
+  }
+
+  &:active {
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.active};
   }
 `;