theme: migrate surface theme usage (#105093)

Migrate gray color scale usage away from the legacy mapping.

surface100 → surface200
surface200 → surface300
surface300 → surface400
surface400 → surface500
surface500 → surface500

We cannot remove the actual keys from the theme yet due to the
ColorOrAlias usages.

Author: JonasBa

static/app/components/editableText.tsx

@@ -241,7 +241,7 @@ const InnerLabel = styled(TextOverflow)`
 
 const InputWrapper = styled('div')<{isEmpty: boolean}>`
   display: inline-block;
-  background: ${p => p.theme.surface200};
+  background: ${p => p.theme.colors.surface300};
   border-radius: ${p => p.theme.radius.md};
   margin: -${space(0.5)} -${space(1)};
   padding: ${space(0.5)} ${space(1)};

static/app/components/events/interfaces/frame/deprecatedLine.tsx

@@ -402,7 +402,8 @@ const DefaultLine = styled('div')<{
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: ${p => (p.isSubFrame ? `${p.theme.surface100}` : `${p.theme.surface200}`)};
+  background: ${p =>
+    p.isSubFrame ? `${p.theme.colors.surface200}` : `${p.theme.colors.surface300}`};
   min-height: 40px;
   word-break: break-word;
   padding: ${space(0.75)} ${space(1.5)};

static/app/components/events/interfaces/frame/stacktraceLinkModal.tsx

@@ -323,7 +323,7 @@ const StyledList = styled(List)`
 `;
 
 const Suggestions = styled('div')`
-  background-color: ${p => p.theme.surface100};
+  background-color: ${p => p.theme.colors.surface200};
   border-radius: ${p => p.theme.radius.md};
   padding: ${space(1)} ${space(1)} ${space(1)} ${space(2)};
 `;

static/app/components/events/interfaces/nativeFrame.tsx

@@ -550,7 +550,7 @@ const RowHeader = styled('span')<{
   column-gap: ${space(1)};
   background-color: ${p =>
     !p.isInAppFrame && p.isSubFrame
-      ? `${p.theme.surface100}`
+      ? `${p.theme.colors.surface200}`
       : `${p.theme.tokens.background.secondary}`};
   font-size: ${p => p.theme.fontSize.sm};
   padding: ${space(1)};

static/app/components/events/suspectCommits.tsx

@@ -174,7 +174,7 @@ const Title = styled('div')`
 const StreamlinedPanel = styled(Panel)`
   position: relative;
   background: ${p => p.theme.tokens.background.primary}
-    linear-gradient(to right, rgba(245, 243, 247, 0), ${p => p.theme.surface100});
+    linear-gradient(to right, rgba(245, 243, 247, 0), ${p => p.theme.colors.surface200});
   overflow: hidden;
   margin-bottom: 0;
   width: 100%;

static/app/components/events/viewHierarchy/wireframe.tsx

@@ -362,7 +362,7 @@ const InteractionOverlayCanvas = styled('canvas')`
 `;
 
 const WireframeCanvas = styled('canvas')`
-  background-color: ${p => p.theme.surface100};
+  background-color: ${p => p.theme.colors.surface200};
   width: 100%;
   height: 100%;
 `;

static/app/components/notificationActions/notificationActionItem.tsx

@@ -360,7 +360,8 @@ const StyledCard = styled(Card)<{isEditing: boolean}>`
   align-items: center;
   justify-content: space-between;
   margin-bottom: ${space(1)};
-  background-color: ${props => (props.isEditing ? props.theme.surface200 : 'inherit')};
+  background-color: ${props =>
+    props.isEditing ? props.theme.colors.surface300 : 'inherit'};
 `;
 
 const IconContainer = styled('div')`

static/app/components/profiling/flamegraph/aggregateFlamegraphTreeTable.tsx

@@ -526,7 +526,7 @@ const FrameBar = styled('div')<{withoutBorders?: boolean}>`
   overflow: auto;
   width: 100%;
   position: relative;
-  background-color: ${p => p.theme.surface200};
+  background-color: ${p => p.theme.colors.surface300};
   ${p => !p.withoutBorders && `border-top: 1px solid ${p.theme.border};`}
   flex: 1 1 100%;
 `;

static/app/components/profiling/flamegraph/callTreeTable.tsx

@@ -66,7 +66,7 @@ export const CallTreeTable = styled('div')`
     }
 
     &[data-hovered='true']:not([tabindex='0']) {
-      background: ${p => p.theme.surface200};
+      background: ${p => p.theme.colors.surface300};
     }
   }
 
@@ -231,7 +231,7 @@ export const CallTreeTableHeaderButton = styled('button')`
   justify-content: space-between;
   padding: 0 ${space(1)};
   border: none;
-  background-color: ${props => props.theme.surface200};
+  background-color: ${props => props.theme.colors.surface300};
   transition: background-color 100ms ease-in-out;
   line-height: 29px;
 

static/app/components/profiling/flamegraph/flamegraphDrawer/differentialFlamegraphDrawer.tsx

@@ -351,7 +351,7 @@ const ProfilingDetailsFrameTabs = styled('ul')`
   padding: 0 ${space(1)};
   margin: 0;
   border-top: 1px solid ${prop => prop.theme.border};
-  background-color: ${props => props.theme.surface200};
+  background-color: ${props => props.theme.colors.surface300};
   user-select: none;
   grid-area: tabs;
 `;