From 78366d7efc4e25bab725ffbfb97f024f661fdd46 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Tue, 14 Apr 2026 18:42:17 -0400 Subject: [PATCH 1/2] ref(theme): migrate shadows --- static/app/components/banner.tsx | 2 +- .../components/charts/components/tooltip.tsx | 2 +- .../events/autofix/autofixChanges.tsx | 2 +- .../components/events/autofix/autofixDiff.tsx | 2 +- .../events/autofix/autofixHighlightPopup.tsx | 2 +- .../events/autofix/autofixRootCause.tsx | 2 +- .../events/autofix/autofixSolution.tsx | 2 +- .../events/autofix/codingAgentCard.tsx | 2 +- .../autofix/insights/autofixInsightCard.tsx | 2 +- .../autofix/insights/autofixInsightCards.tsx | 2 +- .../autofix/insights/autofixInsightSources.tsx | 2 +- .../app/components/globalDrawer/components.tsx | 2 +- .../group/groupSummaryWithAutofix.tsx | 2 +- .../dashboardWidgetQuerySelectorModal.tsx | 2 +- static/app/components/pill.tsx | 2 +- .../profiling/profilingContextMenu.tsx | 2 +- .../breadcrumbs/replayTimelineEvents.tsx | 2 +- static/app/components/replays/replayView.tsx | 2 +- static/app/components/search/list.tsx | 2 +- .../components/workflowEngine/ui/footer.tsx | 2 +- .../playstation/onboarding.tsx | 2 +- static/app/utils/theme/theme.tsx | 18 ------------------ static/app/views/admin/installWizard/index.tsx | 2 +- .../views/discover/table/arithmeticInput.tsx | 2 +- .../traceTimeline/traceTimelineEvents.tsx | 2 +- .../onboarding/components/genericFooter.tsx | 2 +- .../performance/newTraceDetails/trace.tsx | 2 +- .../visualizations/appSizeLegend.tsx | 2 +- .../visualizations/treemapControlButtons.tsx | 2 +- .../snapshots/main/snapshotMainContent.tsx | 2 +- static/app/views/seerExplorer/explorerMenu.tsx | 2 +- .../app/views/seerExplorer/panelContainers.tsx | 2 +- .../modals/dataScrubFormModal.tsx | 2 +- .../project/tempest/DevKitSettings.tsx | 2 +- static/gsAdmin/components/debounceSearch.tsx | 2 +- .../gsApp/components/ai/AiSetupDataConsent.tsx | 2 +- .../projectAllocationsTable.tsx | 2 +- 37 files changed, 36 insertions(+), 54 deletions(-) diff --git a/static/app/components/banner.tsx b/static/app/components/banner.tsx index 89c6549b4695a2..c5d906063ec692 100644 --- a/static/app/components/banner.tsx +++ b/static/app/components/banner.tsx @@ -98,7 +98,7 @@ const BannerWrapper = styled('div')` justify-content: center; position: relative; margin-bottom: ${p => p.theme.space.xl}; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; border-radius: ${p => p.theme.radius.md}; height: 180px; color: ${p => p.theme.colors.white}; diff --git a/static/app/components/charts/components/tooltip.tsx b/static/app/components/charts/components/tooltip.tsx index cab408b1da2375..61eafd3af3e36e 100644 --- a/static/app/components/charts/components/tooltip.tsx +++ b/static/app/components/charts/components/tooltip.tsx @@ -372,7 +372,7 @@ export function computeChartTooltip( trigger: 'item', backgroundColor: theme.tokens.background.primary, borderWidth: 0, - extraCssText: `box-shadow: 0 0 0 1px ${theme.tokens.border.transparent.neutral.muted}, ${theme.dropShadowHeavy}`, + extraCssText: `box-shadow: 0 0 0 1px ${theme.tokens.border.transparent.neutral.muted}, ${theme.shadow.high}`, transitionDuration: 0, padding: 0, className: 'tooltip-container', diff --git a/static/app/components/events/autofix/autofixChanges.tsx b/static/app/components/events/autofix/autofixChanges.tsx index 98f2ae50ae1e90..89a226939c2681 100644 --- a/static/app/components/events/autofix/autofixChanges.tsx +++ b/static/app/components/events/autofix/autofixChanges.tsx @@ -425,7 +425,7 @@ const PrefixText = styled('span')``; const ChangesContainer = styled('div')` border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; padding: ${p => p.theme.space.xl}; background: ${p => p.theme.tokens.background.primary}; `; diff --git a/static/app/components/events/autofix/autofixDiff.tsx b/static/app/components/events/autofix/autofixDiff.tsx index d63451a7789f1e..4022d18304c99d 100644 --- a/static/app/components/events/autofix/autofixDiff.tsx +++ b/static/app/components/events/autofix/autofixDiff.tsx @@ -829,7 +829,7 @@ const EditOverlay = styled('div')` background: ${p => p.theme.tokens.background.primary}; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; z-index: ${p => p.theme.zIndex.tooltip}; display: flex; flex-direction: column; diff --git a/static/app/components/events/autofix/autofixHighlightPopup.tsx b/static/app/components/events/autofix/autofixHighlightPopup.tsx index 7f7944b19dcd9f..aca17791b3f5b0 100644 --- a/static/app/components/events/autofix/autofixHighlightPopup.tsx +++ b/static/app/components/events/autofix/autofixHighlightPopup.tsx @@ -699,7 +699,7 @@ const Container = styled(motion.div, { border-radius: ${p => p.theme.radius.md}; border: 1px dashed ${p => p.theme.tokens.border.primary}; overflow: hidden; - box-shadow: ${p => (p.isFocused ? p.theme.dropShadowHeavy : p.theme.dropShadowLight)}; + box-shadow: ${p => (p.isFocused ? p.theme.shadow.high : p.theme.shadow.low)}; transition: box-shadow 200ms ease; &:before { diff --git a/static/app/components/events/autofix/autofixRootCause.tsx b/static/app/components/events/autofix/autofixRootCause.tsx index af45a1cdc747a3..b6d3faf2f30883 100644 --- a/static/app/components/events/autofix/autofixRootCause.tsx +++ b/static/app/components/events/autofix/autofixRootCause.tsx @@ -729,7 +729,7 @@ const CausesContainer = styled('div')` border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; overflow: hidden; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; padding: ${p => p.theme.space.lg}; background: ${p => p.theme.tokens.background.primary}; `; diff --git a/static/app/components/events/autofix/autofixSolution.tsx b/static/app/components/events/autofix/autofixSolution.tsx index 73d7e5595216c0..f8d5ef63ffdd7f 100644 --- a/static/app/components/events/autofix/autofixSolution.tsx +++ b/static/app/components/events/autofix/autofixSolution.tsx @@ -722,7 +722,7 @@ const SolutionContainer = styled('div')` border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; overflow: hidden; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; padding: ${p => p.theme.space.lg}; background: ${p => p.theme.tokens.background.primary}; `; diff --git a/static/app/components/events/autofix/codingAgentCard.tsx b/static/app/components/events/autofix/codingAgentCard.tsx index 78ab07d3ae3620..49eed8ebf5ffe6 100644 --- a/static/app/components/events/autofix/codingAgentCard.tsx +++ b/static/app/components/events/autofix/codingAgentCard.tsx @@ -224,7 +224,7 @@ const StyledCard = styled('div')` border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; overflow: hidden; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; padding-left: ${p => p.theme.space.xl}; padding-right: ${p => p.theme.space.xl}; background: ${p => p.theme.tokens.background.primary}; diff --git a/static/app/components/events/autofix/insights/autofixInsightCard.tsx b/static/app/components/events/autofix/insights/autofixInsightCard.tsx index 6a3a7c7a5ecd20..0dacedbb2ccace 100644 --- a/static/app/components/events/autofix/insights/autofixInsightCard.tsx +++ b/static/app/components/events/autofix/insights/autofixInsightCard.tsx @@ -339,7 +339,7 @@ const InsightContainer = styled('div')<{expanded?: boolean}>` border: 1px dashed ${p => p.theme.tokens.border.primary}; border-color: ${p => (p.expanded ? p.theme.tokens.border.primary : 'transparent')}; - box-shadow: ${p => (p.expanded ? p.theme.dropShadowMedium : 'none')}; + box-shadow: ${p => (p.expanded ? p.theme.shadow.medium : 'none')}; `; const MiniHeader = styled('p')<{expanded?: boolean}>` diff --git a/static/app/components/events/autofix/insights/autofixInsightCards.tsx b/static/app/components/events/autofix/insights/autofixInsightCards.tsx index e40e25e70874bd..681da10ba3aad3 100644 --- a/static/app/components/events/autofix/insights/autofixInsightCards.tsx +++ b/static/app/components/events/autofix/insights/autofixInsightCards.tsx @@ -166,7 +166,7 @@ const InsightsCardContainer = styled('div')` border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; overflow: hidden; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; padding: ${p => p.theme.space.lg}; background: ${p => p.theme.tokens.background.primary}; width: 100%; diff --git a/static/app/components/events/autofix/insights/autofixInsightSources.tsx b/static/app/components/events/autofix/insights/autofixInsightSources.tsx index 5a6df5bc6b5a6a..dc7b33925f5ea8 100644 --- a/static/app/components/events/autofix/insights/autofixInsightSources.tsx +++ b/static/app/components/events/autofix/insights/autofixInsightSources.tsx @@ -228,7 +228,7 @@ const ThoughtsOverlay = styled('div')` background: ${p => p.theme.tokens.background.primary}; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; z-index: ${p => p.theme.zIndex.tooltip}; display: flex; flex-direction: column; diff --git a/static/app/components/globalDrawer/components.tsx b/static/app/components/globalDrawer/components.tsx index 5287f63e65da31..430e20ebdda052 100644 --- a/static/app/components/globalDrawer/components.tsx +++ b/static/app/components/globalDrawer/components.tsx @@ -213,7 +213,7 @@ const DrawerContainer = styled('div')` `; const DrawerSlidePanel = styled(SlideOverPanel)` - box-shadow: 0 0 0 1px ${p => p.theme.dropShadowHeavy}; + box-shadow: 0 0 0 1px ${p => p.theme.shadow.high}; border-left: 1px solid ${p => p.theme.tokens.border.primary}; position: relative; pointer-events: auto; diff --git a/static/app/components/group/groupSummaryWithAutofix.tsx b/static/app/components/group/groupSummaryWithAutofix.tsx index f6cc36e9cdcc56..e6f6400dd27e9a 100644 --- a/static/app/components/group/groupSummaryWithAutofix.tsx +++ b/static/app/components/group/groupSummaryWithAutofix.tsx @@ -346,7 +346,7 @@ const InsightCardButton = styled(motion.div)` overflow: hidden; cursor: pointer; padding: 0; - box-shadow: ${p => p.theme.dropShadowLight}; + box-shadow: ${p => p.theme.shadow.low}; background-color: ${p => p.theme.tokens.background.primary}; &:hover { diff --git a/static/app/components/modals/dashboardWidgetQuerySelectorModal.tsx b/static/app/components/modals/dashboardWidgetQuerySelectorModal.tsx index 7b357845a23508..18d5ade601ed85 100644 --- a/static/app/components/modals/dashboardWidgetQuerySelectorModal.tsx +++ b/static/app/components/modals/dashboardWidgetQuerySelectorModal.tsx @@ -108,7 +108,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}; + box-shadow: inset ${p => p.theme.shadow.medium}; background: ${p => p.theme.tokens.background.secondary}; padding: 7px ${p => p.theme.space.md}; position: relative; diff --git a/static/app/components/pill.tsx b/static/app/components/pill.tsx index a1d9cd9a7c7a77..dd730f066fb799 100644 --- a/static/app/components/pill.tsx +++ b/static/app/components/pill.tsx @@ -139,7 +139,7 @@ const StyledPill = styled('li')<{type?: PillType}>` margin: 0 ${p => p.theme.space.md} ${p => p.theme.space.md} 0; display: flex; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowLight}; + box-shadow: ${p => p.theme.shadow.low}; line-height: 1.2; max-width: 100%; :last-child { diff --git a/static/app/components/profiling/profilingContextMenu.tsx b/static/app/components/profiling/profilingContextMenu.tsx index 88d5db844b4d1c..33fa6300dabe6c 100644 --- a/static/app/components/profiling/profilingContextMenu.tsx +++ b/static/app/components/profiling/profilingContextMenu.tsx @@ -21,7 +21,7 @@ const Menu = styled(({ref, ...props}: MenuProps) => { background: ${p => p.theme.tokens.background.primary}; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; width: auto; min-width: 164px; overflow: auto; diff --git a/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx b/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx index 3015c734fd3789..ea4cf55fca9d04 100644 --- a/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx +++ b/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx @@ -216,6 +216,6 @@ const IconNode = styled('button')<{ border-radius: 50%; color: ${p => p.theme.colors.white}; ${getBackgroundGradient} - box-shadow: ${p => p.theme.dropShadowLight}; + box-shadow: ${p => p.theme.shadow.low}; user-select: none; `; diff --git a/static/app/components/replays/replayView.tsx b/static/app/components/replays/replayView.tsx index 97a31fa2e277d7..dc0b6531e07527 100644 --- a/static/app/components/replays/replayView.tsx +++ b/static/app/components/replays/replayView.tsx @@ -167,7 +167,7 @@ const Panel = styled(FluidHeight)` background: ${p => p.theme.tokens.background.primary}; border-radius: ${p => p.theme.radius.md}; border: 1px solid ${p => p.theme.tokens.border.primary}; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; `; const ContextContainer = styled('div')` diff --git a/static/app/components/search/list.tsx b/static/app/components/search/list.tsx index cbb47f58a2d35f..57e507f1b1db1b 100644 --- a/static/app/components/search/list.tsx +++ b/static/app/components/search/list.tsx @@ -138,7 +138,7 @@ const DropdownBox = styled('div')` background: ${p => p.theme.tokens.background.primary}; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; position: absolute; top: 36px; right: 0; diff --git a/static/app/components/workflowEngine/ui/footer.tsx b/static/app/components/workflowEngine/ui/footer.tsx index 0cc1511871b1df..db43603fd2e02b 100644 --- a/static/app/components/workflowEngine/ui/footer.tsx +++ b/static/app/components/workflowEngine/ui/footer.tsx @@ -18,7 +18,7 @@ const StickyFooterBase = styled('div')` z-index: ${p => p.theme.zIndex.initial}; &[data-stuck] { - box-shadow: ${p => p.theme.dropShadowHeavyTop}; + box-shadow: ${p => p.theme.shadow.high}; } `; diff --git a/static/app/gettingStartedDocs/playstation/onboarding.tsx b/static/app/gettingStartedDocs/playstation/onboarding.tsx index 33a15945a3e91f..bee43de775cd59 100644 --- a/static/app/gettingStartedDocs/playstation/onboarding.tsx +++ b/static/app/gettingStartedDocs/playstation/onboarding.tsx @@ -289,5 +289,5 @@ const CardIllustration = styled('img')` object-fit: contain; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowLight}; + box-shadow: ${p => p.theme.shadow.low}; `; diff --git a/static/app/utils/theme/theme.tsx b/static/app/utils/theme/theme.tsx index 3481794b13c34b..e480a002f7992d 100644 --- a/static/app/utils/theme/theme.tsx +++ b/static/app/utils/theme/theme.tsx @@ -835,28 +835,11 @@ const darkColors: Colors = { }, }; -// @TODO(jonasbadalic): are these final? -const lightShadows = { - dropShadowLight: '0 0 1px rgba(43, 34, 51, 0.04)', - dropShadowMedium: '0 1px 2px rgba(43, 34, 51, 0.04)', - dropShadowHeavy: '0 4px 24px rgba(43, 34, 51, 0.12)', - dropShadowHeavyTop: '0 -4px 24px rgba(43, 34, 51, 0.12)', -}; - -// @TODO(jonasbadalic): are these final? -const darkShadows = { - dropShadowLight: '0 0 1px rgba(10, 8, 12, 0.2)', - dropShadowMedium: '0 1px 2px rgba(10, 8, 12, 0.2)', - dropShadowHeavy: '0 4px 24px rgba(10, 8, 12, 0.36)', - dropShadowHeavyTop: '0 -4px 24px rgba(10, 8, 12, 0.36)', -}; - const lightThemeDefinition = { type: 'light' as 'light' | 'dark', // @TODO: color theme contains some colors (like chart color palette, diff, tag and level) ...commonTheme, ...baseLightTheme, - ...lightShadows, focusRing: (baseShadow = `0 0 0 0 ${baseLightTheme.tokens.background.primary}`) => ({ outline: 'none', boxShadow: `${baseShadow}, 0 0 0 2px ${baseLightTheme.tokens.focus.default}`, @@ -896,7 +879,6 @@ export const darkTheme: SentryTheme = { // @TODO: color theme contains some colors (like chart color palette, diff, tag and level) ...commonTheme, ...baseDarkTheme, - ...darkShadows, focusRing: (baseShadow = `0 0 0 0 ${baseDarkTheme.tokens.background.primary}`) => ({ outline: 'none', boxShadow: `${baseShadow}, 0 0 0 2px ${baseDarkTheme.tokens.focus.default}`, diff --git a/static/app/views/admin/installWizard/index.tsx b/static/app/views/admin/installWizard/index.tsx index 1793c2afd48b30..018a0814453d15 100644 --- a/static/app/views/admin/installWizard/index.tsx +++ b/static/app/views/admin/installWizard/index.tsx @@ -185,7 +185,7 @@ const Version = styled('small')` const SetupWizard = styled('div')` background: ${p => p.theme.tokens.background.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; padding: 40px 40px 20px; max-width: 1000px; margin: ${p => p.theme.space['2xl']}; diff --git a/static/app/views/discover/table/arithmeticInput.tsx b/static/app/views/discover/table/arithmeticInput.tsx index e17c5fc7f031b8..0c8f6e619277a8 100644 --- a/static/app/views/discover/table/arithmeticInput.tsx +++ b/static/app/views/discover/table/arithmeticInput.tsx @@ -412,7 +412,7 @@ const DropdownContainer = styled('div')<{isOpen: boolean}>` right: -1px; z-index: ${p => p.theme.zIndex.dropdown}; background: ${p => p.theme.tokens.background.primary}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; margin-top: ${p => p.theme.space.md}; diff --git a/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx b/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx index 18f326778cad76..0e5a425de53a3c 100644 --- a/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx +++ b/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx @@ -225,7 +225,7 @@ const IconNode = styled('div')` height: 8px; border-radius: 50%; color: ${p => p.theme.colors.white}; - box-shadow: ${p => p.theme.dropShadowLight}; + box-shadow: ${p => p.theme.shadow.low}; user-select: none; background-color: ${p => color(p.theme.colors.red200).alpha(0.3).string()}; margin-left: -8px; diff --git a/static/app/views/onboarding/components/genericFooter.tsx b/static/app/views/onboarding/components/genericFooter.tsx index 9bc94e11675678..c99c0151574702 100644 --- a/static/app/views/onboarding/components/genericFooter.tsx +++ b/static/app/views/onboarding/components/genericFooter.tsx @@ -22,5 +22,5 @@ export const GenericFooter = styled((props: React.ComponentProps p.theme.tokens.background.primary}; justify-content: space-between; - box-shadow: ${p => p.theme.dropShadowHeavyTop}; + box-shadow: ${p => p.theme.shadow.high}; `; diff --git a/static/app/views/performance/newTraceDetails/trace.tsx b/static/app/views/performance/newTraceDetails/trace.tsx index 7f72898b72e7ce..913df82b376942 100644 --- a/static/app/views/performance/newTraceDetails/trace.tsx +++ b/static/app/views/performance/newTraceDetails/trace.tsx @@ -1483,7 +1483,7 @@ const TraceStylingWrapper = styled('div')` line-height: 0; z-index: 1; font-size: 10px; - box-shadow: ${p => p.theme.dropShadowLight}; + box-shadow: ${p => p.theme.shadow.low}; margin-right: 8px; .TraceChildrenCountContent { diff --git a/static/app/views/preprod/components/visualizations/appSizeLegend.tsx b/static/app/views/preprod/components/visualizations/appSizeLegend.tsx index c643c3a793169a..108b9f8be49408 100644 --- a/static/app/views/preprod/components/visualizations/appSizeLegend.tsx +++ b/static/app/views/preprod/components/visualizations/appSizeLegend.tsx @@ -313,7 +313,7 @@ const MoreDropdown = styled('div')` background: ${p => p.theme.tokens.background.primary}; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; padding: ${p => p.theme.space.xs}; display: flex; flex-direction: column; diff --git a/static/app/views/preprod/components/visualizations/treemapControlButtons.tsx b/static/app/views/preprod/components/visualizations/treemapControlButtons.tsx index ff455bb02e73f7..b33a74fea12e07 100644 --- a/static/app/views/preprod/components/visualizations/treemapControlButtons.tsx +++ b/static/app/views/preprod/components/visualizations/treemapControlButtons.tsx @@ -56,7 +56,7 @@ const TreemapControlButton = styled(Button)<{$active?: boolean}>` padding: 0 ${p => p.theme.space.xs}; background: ${p => (p.$active ? p.theme.colors.blue400 : 'rgba(0, 0, 0, 0.8)')}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; &:hover { color: ${p => p.theme.colors.white}; diff --git a/static/app/views/preprod/snapshots/main/snapshotMainContent.tsx b/static/app/views/preprod/snapshots/main/snapshotMainContent.tsx index ca75b64f36e241..8ea92277eb2b77 100644 --- a/static/app/views/preprod/snapshots/main/snapshotMainContent.tsx +++ b/static/app/views/preprod/snapshots/main/snapshotMainContent.tsx @@ -386,7 +386,7 @@ const ColorPickerDropdown = styled('div')` background: ${p => p.theme.tokens.background.primary}; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; z-index: ${p => p.theme.zIndex.dropdown}; `; diff --git a/static/app/views/seerExplorer/explorerMenu.tsx b/static/app/views/seerExplorer/explorerMenu.tsx index a8ada675ad0ee4..eb3ca89dceb603 100644 --- a/static/app/views/seerExplorer/explorerMenu.tsx +++ b/static/app/views/seerExplorer/explorerMenu.tsx @@ -474,7 +474,7 @@ const MenuPanel = styled('div')<{ background: ${p => p.theme.tokens.background.primary}; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; max-height: ${p => p.panelSize === 'max' ? 'calc(100vh - 120px)' : 'calc(50vh - 80px)'}; overflow-y: auto; diff --git a/static/app/views/seerExplorer/panelContainers.tsx b/static/app/views/seerExplorer/panelContainers.tsx index c26a2ae7b37bbb..12418d995670ea 100644 --- a/static/app/views/seerExplorer/panelContainers.tsx +++ b/static/app/views/seerExplorer/panelContainers.tsx @@ -202,7 +202,7 @@ const PanelContent = styled('div')` background: ${p => p.theme.tokens.background.primary}; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowHeavy}; + box-shadow: ${p => p.theme.shadow.high}; display: flex; flex-direction: column; overflow: hidden; diff --git a/static/app/views/settings/components/dataScrubbing/modals/dataScrubFormModal.tsx b/static/app/views/settings/components/dataScrubbing/modals/dataScrubFormModal.tsx index 25d9ee24af70e4..4035e18ab730ef 100644 --- a/static/app/views/settings/components/dataScrubbing/modals/dataScrubFormModal.tsx +++ b/static/app/views/settings/components/dataScrubbing/modals/dataScrubFormModal.tsx @@ -582,7 +582,7 @@ const SourceGroupContainer = styled('div')<{isExpanded?: boolean}>` css` border-radius: ${p.theme.radius.md}; border: 1px solid ${p.theme.tokens.border.primary}; - box-shadow: ${p.theme.dropShadowMedium}; + box-shadow: ${p.theme.shadow.medium}; padding: ${p.theme.space.xl}; `} `; diff --git a/static/app/views/settings/project/tempest/DevKitSettings.tsx b/static/app/views/settings/project/tempest/DevKitSettings.tsx index f3520d12794c79..c9f60b8e15f503 100644 --- a/static/app/views/settings/project/tempest/DevKitSettings.tsx +++ b/static/app/views/settings/project/tempest/DevKitSettings.tsx @@ -292,7 +292,7 @@ const CardIllustration = styled('img')` object-fit: contain; border: 1px solid ${p => p.theme.tokens.border.primary}; border-radius: ${p => p.theme.radius.md}; - box-shadow: ${p => p.theme.dropShadowLight}; + box-shadow: ${p => p.theme.shadow.low}; `; const IntroText = styled('p')` diff --git a/static/gsAdmin/components/debounceSearch.tsx b/static/gsAdmin/components/debounceSearch.tsx index f2db0771593f38..b2c50027a9f9b5 100644 --- a/static/gsAdmin/components/debounceSearch.tsx +++ b/static/gsAdmin/components/debounceSearch.tsx @@ -162,7 +162,7 @@ const Card = styled('div')<{highlight?: boolean}>` p.highlight ? p.theme.tokens.interactive.link.accent.active : p.theme.tokens.content.primary}; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; padding: ${p => p.theme.space.xl}; `; const Error = styled('div')` diff --git a/static/gsApp/components/ai/AiSetupDataConsent.tsx b/static/gsApp/components/ai/AiSetupDataConsent.tsx index ac64c3e74608a3..c765f7d8319150 100644 --- a/static/gsApp/components/ai/AiSetupDataConsent.tsx +++ b/static/gsApp/components/ai/AiSetupDataConsent.tsx @@ -308,7 +308,7 @@ const SingleCard = styled('div')` border-radius: ${p => p.theme.radius.md}; border: 1px solid ${p => p.theme.tokens.border.primary}; margin-top: ${p => p.theme.space.xl}; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; `; const MeetSeerHeader = styled('div')` diff --git a/static/gsApp/views/spendAllocations/projectAllocationsTable.tsx b/static/gsApp/views/spendAllocations/projectAllocationsTable.tsx index b2e683cc46fbcd..ac4575b3bdb2b3 100644 --- a/static/gsApp/views/spendAllocations/projectAllocationsTable.tsx +++ b/static/gsApp/views/spendAllocations/projectAllocationsTable.tsx @@ -123,7 +123,7 @@ const Table = styled('table')` border-radius: ${p => p.theme.radius.md}; border-collapse: separate; border: 1px ${p => 'solid ' + p.theme.tokens.border.primary}; - box-shadow: ${p => p.theme.dropShadowMedium}; + box-shadow: ${p => p.theme.shadow.medium}; margin-bottom: ${p => p.theme.space.xl}; width: 100%; `; From 4bed117b452057db2eb2af80a21677eeb4cc54fe Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Wed, 15 Apr 2026 15:25:32 -0400 Subject: [PATCH 2/2] ref(scraps): add shadows to overlay --- .../app/components/core/slideOverPanel/slideOverPanel.tsx | 3 ++- static/app/components/globalDrawer/components.tsx | 1 - static/app/components/overlay.tsx | 6 ++++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/static/app/components/core/slideOverPanel/slideOverPanel.tsx b/static/app/components/core/slideOverPanel/slideOverPanel.tsx index f258f1cb69298d..ce1faec34fe69f 100644 --- a/static/app/components/core/slideOverPanel/slideOverPanel.tsx +++ b/static/app/components/core/slideOverPanel/slideOverPanel.tsx @@ -145,7 +145,8 @@ const _SlideOverPanel = styled(motion.div, { z-index: ${p => p.theme.zIndex.modal - 1}; - background: ${p => p.theme.tokens.background.primary}; + background: ${p => p.theme.tokens.background.overlay}; + box-shadow: ${p => p.theme.shadow.high}; color: ${p => p.theme.tokens.content.primary}; text-align: left; diff --git a/static/app/components/globalDrawer/components.tsx b/static/app/components/globalDrawer/components.tsx index 430e20ebdda052..45c2c53f3ed4d7 100644 --- a/static/app/components/globalDrawer/components.tsx +++ b/static/app/components/globalDrawer/components.tsx @@ -213,7 +213,6 @@ const DrawerContainer = styled('div')` `; const DrawerSlidePanel = styled(SlideOverPanel)` - box-shadow: 0 0 0 1px ${p => p.theme.shadow.high}; border-left: 1px solid ${p => p.theme.tokens.border.primary}; position: relative; pointer-events: auto; diff --git a/static/app/components/overlay.tsx b/static/app/components/overlay.tsx index 56b4a57de2d3ba..906900df79c569 100644 --- a/static/app/components/overlay.tsx +++ b/static/app/components/overlay.tsx @@ -136,11 +136,13 @@ const OverlayInner = styled(motion.div)<{ placement?: OverlayProps['placement']; }>` position: relative; - background: ${p => p.theme.tokens.background.primary}; + background: ${p => p.theme.tokens.background.overlay}; border-radius: ${p => p.theme.radius.md}; border: 1px solid ${p => p.theme.tokens.border.primary}; /* eslint-disable-next-line @sentry/scraps/use-semantic-token */ - box-shadow: 0 2px 0 ${p => p.theme.tokens.border.primary}; + box-shadow: + 0 2px 0 ${p => p.theme.tokens.border.primary}, + ${p => p.theme.shadow.medium}; font-size: ${p => p.theme.font.size.md}; /* Override z-index from useOverlayPosition */