refactor(ui): Update and simplify use of gray colors in themes (#20141)

packages/cli/src/ui/themes/theme-manager.ts

@@ -29,7 +29,11 @@ import {
   getThemeTypeFromBackgroundColor,
   resolveColor,
 } from './color-utils.js';
-import { DEFAULT_BORDER_OPACITY } from '../constants.js';
+import {
+  DEFAULT_BACKGROUND_OPACITY,
+  DEFAULT_INPUT_BACKGROUND_OPACITY,
+  DEFAULT_BORDER_OPACITY,
+} from '../constants.js';
 import { ANSI } from './ansi.js';
 import { ANSILight } from './ansi-light.js';
 import { NoColorTheme } from './no-color.js';
@@ -310,7 +314,21 @@ class ThemeManager {
       this.cachedColors = {
         ...colors,
         Background: this.terminalBackground,
-        DarkGray: interpolateColor(colors.Gray, this.terminalBackground, 0.5),
+        DarkGray: interpolateColor(
+          this.terminalBackground,
+          colors.Gray,
+          DEFAULT_BORDER_OPACITY,
+        ),
+        InputBackground: interpolateColor(
+          this.terminalBackground,
+          colors.Gray,
+          DEFAULT_INPUT_BACKGROUND_OPACITY,
+        ),
+        MessageBackground: interpolateColor(
+          this.terminalBackground,
+          colors.Gray,
+          DEFAULT_BACKGROUND_OPACITY,
+        ),
       };
     } else {
       this.cachedColors = colors;
@@ -336,27 +354,22 @@ class ThemeManager {
       this.terminalBackground &&
       this.isThemeCompatible(activeTheme, this.terminalBackground)
     ) {
+      const colors = this.getColors();
       this.cachedSemanticColors = {
         ...semanticColors,
         background: {
           ...semanticColors.background,
           primary: this.terminalBackground,
+          message: colors.MessageBackground!,
+          input: colors.InputBackground!,
         },
         border: {
           ...semanticColors.border,
-          default: interpolateColor(
-            this.terminalBackground,
-            activeTheme.colors.Gray,
-            DEFAULT_BORDER_OPACITY,
-          ),
+          default: colors.DarkGray,
         },
         ui: {
           ...semanticColors.ui,
-          dark: interpolateColor(
-            activeTheme.colors.Gray,
-            this.terminalBackground,
-            0.5,
-          ),
+          dark: colors.DarkGray,
         },
       };
     } else {