ref: remove deprecated opaque and transparent colors (#95326)

@Jesse-Box I had to change some uses in profiling from “transparent
greay” to “normal” gray. I think they still look fine, but I could also
inline the previous colors there if you prefer:

| before | after |
|--------|--------|
| <img width="1463" height="167" alt="Screenshot 2025-07-11 at 13 56 41"
src="https://github.com/user-attachments/assets/feec753b-8faa-4aab-b754-88bd8380d1cb"
/> | <img width="1463" height="167" alt="Screenshot 2025-07-11 at 13 57
00"
src="https://github.com/user-attachments/assets/f01ffd82-a7f0-49df-9502-1da7f7ef7364"
/> |
| <img width="1463" height="167" alt="Screenshot 2025-07-11 at 13 56 46"
src="https://github.com/user-attachments/assets/a481b4de-9dab-4a17-a272-cfd5df7f6fca"
/> | <img width="1463" height="167" alt="Screenshot 2025-07-11 at 13 56
56"
src="https://github.com/user-attachments/assets/420639db-72bf-4d9a-8cdd-3b332e6d4484"
/> |

Author: TkDodo

static/app/utils/profiling/flamegraph/flamegraphTheme.tsx

@@ -382,8 +382,8 @@ export const makeLightChonkFlamegraphTheme = (
       SEARCH_RESULT_SPAN_COLOR: '#fdb359',
 
       // Patterns
-      SPAN_FRAME_LINE_PATTERN_BACKGROUND: theme.colors.grayTransparent100,
-      SPAN_FRAME_LINE_PATTERN: theme.colors.grayTransparent200,
+      SPAN_FRAME_LINE_PATTERN_BACKGROUND: theme.colors.gray100,
+      SPAN_FRAME_LINE_PATTERN: theme.colors.gray200,
 
       // Fallbacks
       SPAN_FALLBACK_COLOR: [0, 0, 0, 0.1],
@@ -396,7 +396,7 @@ export const makeLightChonkFlamegraphTheme = (
       MINIMAP_POSITION_OVERLAY_BORDER_COLOR: theme.colors.gray300,
       MINIMAP_POSITION_OVERLAY_COLOR: theme.colors.gray200,
 
-      SPAN_FRAME_BORDER: theme.colors.grayTransparent300,
+      SPAN_FRAME_BORDER: theme.colors.gray300,
       STACK_TO_COLOR: makeStackToColor([0, 0, 0, 0.035]),
     },
   };
@@ -475,8 +475,8 @@ export const makeDarkChonkFlamegraphTheme = (
       SEARCH_RESULT_SPAN_COLOR: '#fdb359',
 
       // Patterns
-      SPAN_FRAME_LINE_PATTERN: theme.colors.grayTransparent200,
-      SPAN_FRAME_LINE_PATTERN_BACKGROUND: theme.colors.grayTransparent100,
+      SPAN_FRAME_LINE_PATTERN: theme.colors.gray200,
+      SPAN_FRAME_LINE_PATTERN_BACKGROUND: theme.colors.gray100,
 
       // Fallbacks
       FRAME_FALLBACK_COLOR: [0.5, 0.5, 0.5, 0.4],
@@ -488,7 +488,7 @@ export const makeDarkChonkFlamegraphTheme = (
       MINIMAP_POSITION_OVERLAY_BORDER_COLOR: theme.colors.gray300,
       MINIMAP_POSITION_OVERLAY_COLOR: theme.colors.gray200,
 
-      SPAN_FRAME_BORDER: theme.colors.grayTransparent300,
+      SPAN_FRAME_BORDER: theme.colors.gray300,
       STACK_TO_COLOR: makeStackToColor([1, 1, 1, 0.18]),
     },
   };

static/app/utils/theme/theme.chonk.tsx

@@ -573,20 +573,6 @@ const lightColors = {
   surface200: '#EAE7F6', // border.muted
   surface100: '#DFDBEF', // border.primary
 
-  // ⚠ Deprecated
-  grayOpaque500: '#181423',
-  grayOpaque400: '#6D6B74',
-  grayOpaque300: '#939198',
-  grayOpaque200: '#E0DFE2',
-  grayOpaque100: '#F3F3F4',
-
-  // ⚠ Deprecated
-  grayTransparent500: 'rgba(24, 20, 35, 1.0)',
-  grayTransparent400: 'rgba(24, 20, 35, 0.63)',
-  grayTransparent300: 'rgba(24, 20, 35, 0.47)',
-  grayTransparent200: 'rgba(24, 20, 35, 0.14)',
-  grayTransparent100: 'rgba(24, 20, 35, 0.05)',
-
   gray800: '#181423', // content.primary
   gray700: '#3B434E', // ⚠ link.muted.active only
   gray600: '#48515B', // ⚠ link.muted.hover only
@@ -656,20 +642,6 @@ const darkColors: typeof lightColors = {
   surface200: '#0D071A', // border.muted
   surface100: '#000000', // border.primary
 
-  // ⚠ Deprecated
-  grayOpaque500: '#F6F5FA',
-  grayOpaque400: '#A09DA8',
-  grayOpaque300: '#767380',
-  grayOpaque200: '#4D4A59',
-  grayOpaque100: '#3D394A',
-
-  // ⚠ Deprecated
-  grayTransparent500: 'rgba(246, 245, 250, 1.0)',
-  grayTransparent400: 'rgba(246, 245, 250, 0.58)',
-  grayTransparent300: 'rgba(246, 245, 250, 0.37)',
-  grayTransparent200: 'rgba(246, 245, 250, 0.18)',
-  grayTransparent100: 'rgba(246, 245, 250, 0.10)',
-
   gray800: '#F6F5FA', // content.primary
   gray700: '#C6C0D6', // ⚠ link.muted.active only
   gray600: '#B3ADC3', // ⚠ link.muted.hover only