theme: migrate purple theme usage (#105065)

Migrate purple color scale usage away from the legacy mapping and onto
the new blue scale.

We cannot remove the actual keys from the theme yet due to the
ColorOrAlias usages, that change will be done after the bulk work of
instances has been migrated

Author: JonasBa

static/app/components/charts/breakdownBars.tsx

@@ -85,7 +85,7 @@ const Label = styled('span')`
 
 const Bar = styled('div')<{active?: boolean}>`
   border-radius: 2px;
-  background-color: ${p => (p.active ? p.theme.purple200 : p.theme.border)};
+  background-color: ${p => (p.active ? p.theme.colors.blue200 : p.theme.border)};
   position: absolute;
   top: 0;
   left: 0;

static/app/components/charts/miniBarChart.tsx

@@ -288,7 +288,7 @@ function MiniBarChart({
 
     const colorList = Array.isArray(colors)
       ? colors
-      : [theme.gray300, theme.purple300, theme.purple300];
+      : [theme.gray300, theme.colors.blue400, theme.colors.blue400];
 
     for (let i = 0; i < series.length; i++) {
       const original = series[i]!;
@@ -319,7 +319,7 @@ function MiniBarChart({
       chartSeries.push(updated);
     }
     return chartSeries;
-  }, [series, emphasisColors, stacked, colors, theme.gray300, theme.purple300]);
+  }, [series, emphasisColors, stacked, colors, theme.gray300, theme.colors.blue400]);
 
   const chartOptions = useMemo(() => {
     const yAxisOptions = labelYAxisExtents

static/app/components/charts/releaseSeries.tsx

@@ -251,7 +251,7 @@ class ReleaseSeries extends Component<ReleaseSeriesProps, State> {
     const markLine = MarkLine({
       animation: false,
       lineStyle: {
-        color: theme.purple300,
+        color: theme.colors.blue400,
         opacity: 0.3,
         type: 'solid',
         ...lineStyle,
@@ -314,7 +314,7 @@ class ReleaseSeries extends Component<ReleaseSeriesProps, State> {
     return {
       id: 'release-lines',
       seriesName: 'Releases',
-      color: theme.purple200,
+      color: theme.colors.blue200,
       data: [],
       markLine,
     };

static/app/components/checkInTimeline/timelineZoom.tsx

@@ -174,8 +174,8 @@ function useTimelineZoom<E extends HTMLElement>({enabled = true, onSelect}: Opti
 const Selection = styled(motion.div)`
   pointer-events: none;
   background: ${p => p.theme.gray200};
-  border-left: 1px solid ${p => p.theme.purple200};
-  border-right: 1px solid ${p => p.theme.purple200};
+  border-left: 1px solid ${p => p.theme.colors.blue200};
+  border-right: 1px solid ${p => p.theme.colors.blue200};
   height: 100%;
   position: absolute;
   top: 0;

static/app/components/core/badge/badge.tsx

@@ -20,7 +20,7 @@ function makeBadgeTheme(
       };
     case 'beta':
       return {
-        background: `linear-gradient(90deg, ${theme.purple300}, ${theme.pink300})`,
+        background: `linear-gradient(90deg, ${theme.colors.blue400}, ${theme.pink300})`,
         color: theme.white,
       };
     // @TODO(jonasbadalic) default, experimental and internal all look the same and should be consolidated

static/app/components/core/code/codeBlock.tsx

@@ -283,7 +283,7 @@ const Tab = styled('button')<{isSelected: boolean}>`
   color: var(--prism-comment);
   ${p =>
     p.isSelected
-      ? `border-bottom: 3px solid ${p.theme.purple300};
+      ? `border-bottom: 3px solid ${p.theme.colors.blue400};
       padding-bottom: 5px;
       color: var(--prism-base);`
       : ''}

static/app/components/core/select/option.tsx

@@ -105,8 +105,8 @@ const CheckWrap = withChonk(
             box-shadow: inset ${p.theme.dropShadowMedium};
             ${p.isSelected &&
             css`
-              background: ${p.theme.purple300};
-              border-color: ${p.theme.purple300};
+              background: ${p.theme.colors.blue400};
+              border-color: ${p.theme.colors.blue400};
             `}
           `
         : css`

static/app/components/core/select/select.chonk.tsx

@@ -141,7 +141,7 @@ export const getChonkStylesConfig = ({
       ...(state.isMulti && {
         maxHeight: 'inherit',
         overflowY: 'auto',
-        scrollbarColor: `${theme.purple200} ${theme.tokens.background.primary}`,
+        scrollbarColor: `${theme.colors.blue200} ${theme.tokens.background.primary}`,
       }),
     }),
     input: provided => ({
@@ -293,8 +293,8 @@ export const ChonkCheckWrap = styled('div')<{
           margin-top: 2px;
           ${p.isSelected &&
           css`
-            background: ${p.theme.purple300};
-            border-color: ${p.theme.purple300};
+            background: ${p.theme.colors.blue400};
+            border-color: ${p.theme.colors.blue400};
           `}
         `
       : css`

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

@@ -827,7 +827,7 @@ const CircularSeerIcon = styled('div')`
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background: ${p => p.theme.purple300};
+  background: ${p => p.theme.colors.blue400};
   flex-shrink: 0;
 
   > svg {

static/app/components/events/breadcrumbs/utils.tsx

@@ -280,7 +280,11 @@ function getBreadcrumbColorConfig(
       };
     case BreadcrumbType.USER:
     case BreadcrumbType.UI:
-      return {title: theme.purple400, icon: theme.purple400, iconBorder: theme.purple200};
+      return {
+        title: theme.colors.blue500,
+        icon: theme.colors.blue500,
+        iconBorder: theme.colors.blue200,
+      };
     case BreadcrumbType.SYSTEM:
     case BreadcrumbType.SESSION:
     case BreadcrumbType.DEVICE: