Modified: Mapping of colours in theme.tsx (#104572)

## Problem
I actually made a design fault when I assigned the same colours for
chonk 400 colours as well as the regular 400 colours. The reason is that
I forgot they are used for separate things. Chonk 400 colors are used
for backgrounds, while regular 400's are used for graphical elements.
The problem showed itself in Replay Details because they heavily depend
on the 400 scale for their breadcrumb items.

## Solution
I've modified the colour mapping in theme.tsx to make it look more
appropriate.

### Light Before
<img width="2880" height="1802" alt="CleanShot 2025-12-09 at 12 13
10@2x"
src="https://github.com/user-attachments/assets/aae9cfe6-4a75-4b8c-9f61-ed89a5d899d7"
/>
<img width="2880" height="1803" alt="CleanShot 2025-12-09 at 12 20
51@2x"
src="https://github.com/user-attachments/assets/3b8b1982-8e11-42a3-9539-ecad734914df"
/>

### Light After
<img width="2880" height="1801" alt="CleanShot 2025-12-09 at 12 12
54@2x"
src="https://github.com/user-attachments/assets/53da997d-ee3f-42de-a6f4-d24cfe4cf85d"
/>
<img width="2880" height="1802" alt="CleanShot 2025-12-09 at 12 17
15@2x"
src="https://github.com/user-attachments/assets/71e54f2f-1d88-41cc-a0ca-c7673f99cdea"
/>


### Dark Before
<img width="2880" height="1801" alt="CleanShot 2025-12-09 at 12 13
59@2x"
src="https://github.com/user-attachments/assets/3e54517e-3a75-48a1-8afb-bf87987f8f6a"
/>
<img width="2880" height="1801" alt="CleanShot 2025-12-09 at 12 21
06@2x"
src="https://github.com/user-attachments/assets/56539025-33c7-4997-930c-15227f317875"
/>


### Dark After
<img width="2880" height="1801" alt="CleanShot 2025-12-09 at 12 13
56@2x"
src="https://github.com/user-attachments/assets/45db253a-4029-4107-b8e5-050a9ec0b0c2"
/>
<img width="2880" height="1801" alt="CleanShot 2025-12-09 at 12 17
37@2x"
src="https://github.com/user-attachments/assets/d6a3009a-8b93-4a2c-ae2f-fd5eed7ce4cd"
/>

Author: Jesse-Box

static/app/utils/theme/theme.tsx

@@ -1197,49 +1197,49 @@ const lightColors = {
   gray600: color.neutral.light.opaque1200, // ⚠ link.muted.hover only
   gray500: color.neutral.light.opaque1100, // content.secondary, link.muted.default
   gray400: color.neutral.light.opaque1000, // graphics.muted
-  gray300: color.neutral.light.transparent300,
-  gray200: color.neutral.light.transparent200,
-  gray100: color.neutral.light.transparent100,
+  gray300: color.neutral.light.transparent400,
+  gray200: color.neutral.light.transparent300,
+  gray100: color.neutral.light.transparent200,
 
-  blue700: color.blue.light.opaque1400, // ⚠ link.accent.active only
-  blue600: color.blue.light.opaque1300, // ⚠ link.accent.hover only
-  blue500: color.blue.light.opaque1200, // content.accent, link.accent.default
+  blue700: color.blue.light.opaque1300, // ⚠ link.accent.active only
+  blue600: color.blue.light.opaque1200, // ⚠ link.accent.hover only
+  blue500: color.blue.light.opaque1100, // content.accent, link.accent.default
   blue400: color.blue.light.opaque1000, // graphics.muted, border.accent
-  blue300: color.blue.light.transparent300,
-  blue200: color.blue.light.transparent200,
-  blue100: color.blue.light.transparent100,
+  blue300: color.blue.light.transparent400,
+  blue200: color.blue.light.transparent300,
+  blue100: color.blue.light.transparent200,
 
   pink700: color.pink.light.opaque1300, // ⚠ link.promotion.active only
   pink600: color.pink.light.opaque1200, // ⚠ link.promotion.hover only
   pink500: color.pink.light.opaque1100, // content.promotion, link.promotion.default
   pink400: color.pink.light.opaque1000, // graphics.promotion, border.promotion
-  pink300: color.pink.light.transparent300,
-  pink200: color.pink.light.transparent200,
-  pink100: color.pink.light.transparent100,
+  pink300: color.pink.light.transparent400,
+  pink200: color.pink.light.transparent300,
+  pink100: color.pink.light.transparent200,
 
   red700: color.red.light.opaque1300, // ⚠ link.danger.active only
   red600: color.red.light.opaque1200, // ⚠ link.danger.hover only
   red500: color.red.light.opaque1100, // ⚠ content.danger, link.danger.default
   red400: color.red.light.opaque1000, // graphics.danger, border.danger
-  red300: color.red.light.transparent300,
-  red200: color.red.light.transparent200,
-  red100: color.red.light.transparent100,
+  red300: color.red.light.transparent400,
+  red200: color.red.light.transparent300,
+  red100: color.red.light.transparent200,
 
   yellow700: color.yellow.light.opaque1300, // ⚠ link.warning.active only
   yellow600: color.yellow.light.opaque1200, // ⚠ link.warning.hover only
   yellow500: color.yellow.light.opaque1100, // content.warning, link.warning.default
-  yellow400: color.yellow.light.opaque600, // graphics.warning, border.warning
-  yellow300: color.yellow.light.transparent300,
-  yellow200: color.yellow.light.transparent200,
-  yellow100: color.yellow.light.transparent100,
+  yellow400: color.yellow.light.opaque800, // graphics.warning, border.warning
+  yellow300: color.yellow.light.transparent400,
+  yellow200: color.yellow.light.transparent300,
+  yellow100: color.yellow.light.transparent200,
 
   green700: color.green.light.opaque1300, // ⚠ link.success.active only
   green600: color.green.light.opaque1200, // ⚠ link.success.hover only
   green500: color.green.light.opaque1100, // content.success, link.success.default
-  green400: color.green.light.opaque800, // graphics.success, border.success
-  green300: color.green.light.transparent300,
-  green200: color.green.light.transparent200,
-  green100: color.green.light.transparent100,
+  green400: color.green.light.opaque1000, // graphics.success, border.success
+  green300: color.green.light.transparent400,
+  green200: color.green.light.transparent300,
+  green100: color.green.light.transparent200,
 
   // Currently used for avatars, badges, booleans, buttons, checkboxes, radio buttons
   chonk: {
@@ -1261,54 +1261,54 @@ const darkColors: Colors = {
   surface200: color.neutral.dark.opaque200, // border.muted
   surface100: color.neutral.dark.opaque100, // border.primary
 
-  gray800: color.neutral.dark.opaque1600, // content.primary
-  gray700: color.neutral.dark.opaque1300, // ⚠ link.muted.active only
-  gray600: color.neutral.dark.opaque1200, // ⚠ link.muted.hover only
-  gray500: color.neutral.dark.opaque1100, // content.secondary, link.muted.default
-  gray400: color.neutral.dark.opaque900, // // graphics.muted
-  gray300: color.neutral.dark.transparent800,
-  gray200: color.neutral.dark.transparent600,
-  gray100: color.neutral.dark.transparent400,
-
-  blue700: color.blue.dark.opaque1200, // ⚠ link.accent.active only
-  blue600: color.blue.dark.opaque1100, // ⚠ link.accent.hover only
-  blue500: color.blue.dark.opaque1000, // content.accent, link.accent.default
-  blue400: color.blue.dark.opaque900, // // graphics.accent, border.accent
-  blue300: color.blue.dark.transparent300,
-  blue200: color.blue.dark.transparent200,
-  blue100: color.blue.dark.transparent100,
-
-  pink700: color.pink.dark.opaque1300, // ⚠ link.promotion.active only
-  pink600: color.pink.dark.opaque1200, // ⚠ link.promotion.hover only
-  pink500: color.pink.dark.opaque1100, // content.promotion, link.promotion.default
-  pink400: color.pink.dark.opaque1000, // // graphics.promotion, border.promotion
-  pink300: color.pink.dark.transparent300,
-  pink200: color.pink.dark.transparent200,
-  pink100: color.pink.dark.transparent100,
-
-  red700: color.red.dark.opaque1200, // ⚠ link.danger.active only
-  red600: color.red.dark.opaque1100, // ⚠ link.danger.hover only
-  red500: color.red.dark.opaque1000, // content.danger, link.danger.default
-  red400: color.red.dark.opaque900, // // graphics.danger, border.danger
-  red300: color.red.dark.transparent300,
-  red200: color.red.dark.transparent200,
-  red100: color.red.dark.transparent100,
+  gray800: color.neutral.dark.opaque1500, // content.primary
+  gray700: color.neutral.dark.opaque1400, // ⚠ link.muted.active only
+  gray600: color.neutral.dark.opaque1300, // ⚠ link.muted.hover only
+  gray500: color.neutral.dark.opaque1200, // content.secondary, link.muted.default
+  gray400: color.neutral.dark.opaque1100, // // graphics.muted
+  gray300: color.neutral.dark.transparent400,
+  gray200: color.neutral.dark.transparent300,
+  gray100: color.neutral.dark.transparent200,
+
+  blue700: color.blue.dark.opaque1400, // ⚠ link.accent.active only
+  blue600: color.blue.dark.opaque1300, // ⚠ link.accent.hover only
+  blue500: color.blue.dark.opaque1200, // content.accent, link.accent.default
+  blue400: color.blue.dark.opaque1100, // // graphics.accent, border.accent
+  blue300: color.blue.dark.transparent600,
+  blue200: color.blue.dark.transparent500,
+  blue100: color.blue.dark.transparent400,
+
+  pink700: color.pink.dark.opaque1400, // ⚠ link.promotion.active only
+  pink600: color.pink.dark.opaque1300, // ⚠ link.promotion.hover only
+  pink500: color.pink.dark.opaque1200, // content.promotion, link.promotion.default
+  pink400: color.pink.dark.opaque1100, // // graphics.promotion, border.promotion
+  pink300: color.pink.dark.transparent400,
+  pink200: color.pink.dark.transparent300,
+  pink100: color.pink.dark.transparent200,
+
+  red700: color.red.dark.opaque1400, // ⚠ link.danger.active only
+  red600: color.red.dark.opaque1300, // ⚠ link.danger.hover only
+  red500: color.red.dark.opaque1200, // content.danger, link.danger.default
+  red400: color.red.dark.opaque1100, // // graphics.danger, border.danger
+  red300: color.red.dark.transparent400,
+  red200: color.red.dark.transparent300,
+  red100: color.red.dark.transparent200,
 
   yellow700: color.yellow.dark.opaque1500, // ⚠ link.warning.active only
   yellow600: color.yellow.dark.opaque1400, // ⚠ link.warning.hover only
   yellow500: color.yellow.dark.opaque1300, // content.warning, link.warning.default
   yellow400: color.yellow.dark.opaque1200, // graphics.warning, border.warning
-  yellow300: color.yellow.dark.transparent300,
-  yellow200: color.yellow.dark.transparent200,
-  yellow100: color.yellow.dark.transparent100,
-
-  green700: color.green.dark.opaque1400, // ⚠ link.success.active only
-  green600: color.green.dark.opaque1300, // ⚠ link.success.hover only
-  green500: color.green.dark.opaque1200, // content.success, link.success.default
-  green400: color.green.dark.opaque1100, // graphics.success, border.success
-  green300: color.green.dark.transparent600,
-  green200: color.green.dark.transparent500,
-  green100: color.green.dark.transparent400,
+  yellow300: color.yellow.dark.transparent400,
+  yellow200: color.yellow.dark.transparent300,
+  yellow100: color.yellow.dark.transparent200,
+
+  green700: color.green.dark.opaque1500, // ⚠ link.success.active only
+  green600: color.green.dark.opaque1400, // ⚠ link.success.hover only
+  green500: color.green.dark.opaque1300, // content.success, link.success.default
+  green400: color.green.dark.opaque1200, // graphics.success, border.success
+  green300: color.green.dark.transparent400,
+  green200: color.green.dark.transparent300,
+  green100: color.green.dark.transparent200,
 
   // Currently used for avatars, badges, booleans, buttons, checkboxes, radio buttons
   chonk: {