theme: migrate green theme usage (#105085)

Migrate green color scale usage away from the legacy mapping.

green400 → green500
green300 → green400
green200 → green200
green100 → green100

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

Author: JonasBa

static/app/components/alerts/pageBanner.stories.tsx

@@ -122,6 +122,6 @@ export default Storybook.story('PageBanner', story => {
 });
 
 const Green = styled('span')`
-  color: ${p => p.theme.green400};
+  color: ${p => p.theme.colors.green500};
   font-weight: ${p => p.theme.fontWeight.bold};
 `;

static/app/components/arithmeticBuilder/token/function.tsx

@@ -779,7 +779,7 @@ const BaseGridCell = styled('div')`
 `;
 
 const FunctionGridCell = styled(BaseGridCell)`
-  color: ${p => p.theme.green400};
+  color: ${p => p.theme.colors.green500};
   padding-left: ${p => p.theme.space.xs};
 `;
 

static/app/components/checkInTimeline/checkInTimeline.stories.tsx

@@ -32,8 +32,8 @@ const statusStyle: TickStyle<ExampleStatus> = theme => ({
     hatchTick: theme.yellow200,
   },
   [ExampleStatus.OK]: {
-    labelColor: theme.green400,
-    tickColor: theme.green300,
+    labelColor: theme.colors.green500,
+    tickColor: theme.colors.green400,
   },
 });
 

static/app/components/checkInTimeline/utils/testUtils.tsx

@@ -40,8 +40,8 @@ export const testStatusStyle: TickStyle<string> = theme => ({
     hatchTick: theme.red200,
   },
   ok: {
-    labelColor: theme.green400,
-    tickColor: theme.green300,
+    labelColor: theme.colors.green500,
+    tickColor: theme.colors.green400,
   },
   missed: {
     labelColor: theme.yellow400,

static/app/components/confirm.stories.tsx

@@ -231,6 +231,6 @@ export default Storybook.story('Confirm', story => {
 });
 
 const ModalTrigger = styled('span')`
-  background: ${p => p.theme.green200};
+  background: ${p => p.theme.colors.green200};
   padding: ${space(1)};
 `;

static/app/components/core/alert/alert.tsx

@@ -151,11 +151,11 @@ function getAlertColors(theme: Theme, type: NonNullable<AlertProps['type']>) {
       };
     case 'success':
       return {
-        background: theme.green300,
-        backgroundLight: theme.green100,
-        border: theme.green200,
-        borderHover: theme.green300,
-        color: theme.green400,
+        background: theme.colors.green400,
+        backgroundLight: theme.colors.green100,
+        border: theme.colors.green200,
+        borderHover: theme.colors.green400,
+        color: theme.colors.green500,
       };
     case 'error':
       return {

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

@@ -33,7 +33,7 @@ function makeBadgeTheme(
       };
     case 'new':
       return {
-        background: `linear-gradient(90deg, ${theme.blue300}, ${theme.green300})`,
+        background: `linear-gradient(90deg, ${theme.blue300}, ${theme.colors.green400})`,
         color: theme.white,
       };
     case 'warning':

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

@@ -169,6 +169,6 @@ const RepoItem = styled('li')<{isOk?: boolean}>`
   gap: ${space(2)};
   padding: ${space(1)};
   margin-bottom: ${space(0.5)};
-  background-color: ${p => (p.isOk ? p.theme.green100 : 'transparent')};
+  background-color: ${p => (p.isOk ? p.theme.colors.green100 : 'transparent')};
   border-radius: ${p => p.theme.radius.md};
 `;

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

@@ -50,12 +50,12 @@ function getEventColor(
     title: theme.tokens.content.primary,
     icon: isSelected
       ? isActive
-        ? theme.green400
+        ? theme.colors.green500
         : theme.tokens.content.primary
       : theme.tokens.content.muted,
     iconBorder: isSelected
       ? isActive
-        ? theme.green400
+        ? theme.colors.green500
         : theme.tokens.content.primary
       : theme.tokens.content.muted,
   };
@@ -248,7 +248,7 @@ const SelectionButton = styled('button')<SelectionButtonProps>`
     color: ${p =>
       p.actionType === 'delete' || p.actionType === 'close'
         ? p.theme.red400
-        : p.theme.green400};
+        : p.theme.colors.green500};
   }
 `;
 
@@ -279,7 +279,7 @@ const StyledTimelineHeader = styled('div')<{isSelected: boolean; isActive?: bool
   text-decoration: ${p =>
     p.isSelected ? (p.isActive ? 'underline dashed' : 'none') : 'line-through'};
   text-decoration-color: ${p =>
-    p.isSelected ? p.theme.green300 : p.theme.tokens.content.primary};
+    p.isSelected ? p.theme.colors.green400 : p.theme.tokens.content.primary};
   text-decoration-thickness: 1px;
   text-underline-offset: 4px;
   transition: opacity 0.2s ease;

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

@@ -273,7 +273,11 @@ function getBreadcrumbColorConfig(
     case BreadcrumbType.HTTP:
     case BreadcrumbType.QUERY:
     case BreadcrumbType.TRANSACTION:
-      return {title: theme.green400, icon: theme.green400, iconBorder: theme.green200};
+      return {
+        title: theme.colors.green500,
+        icon: theme.colors.green500,
+        iconBorder: theme.colors.green200,
+      };
     case BreadcrumbType.USER:
     case BreadcrumbType.UI:
       return {title: theme.purple400, icon: theme.purple400, iconBorder: theme.purple200};