fix: text selection in active xterms for light themes is not visible

Fixes #4087

Author: starpit

plugins/plugin-bash-like/web/css/static/xterm.css

@@ -271,3 +271,8 @@ disabled see https://github.com/IBM/kui/issues/3939
 .xterm-container .xterm-viewport::-webkit-scrollbar {
   background-color: transparent !important;
 }
+
+/* selection */
+[kui-theme-style="light"] .xterm-container .xterm-screen .xterm-selection div {
+  background-color: rgba(0, 0, 0, 0.3);
+}

plugins/plugin-carbon-themes/web/css/carbon-gray10.css

@@ -114,7 +114,6 @@ body[kui-theme="Carbon Gray10"] {
 
   --color-brand-03: #008fff;
   --color-content-divider: #bfc0c2;
-  --color-selection-background: #b3e6ff;
 
   --color-stripe-01: var(--color-base03);
   --color-stripe-02: #f5f7fa;

plugins/plugin-carbon-themes/web/css/carbon-gray90.css

@@ -37,8 +37,6 @@ body[kui-theme="Carbon Gray90"][kui-theme-style] {
   --color-brand-03: #408bfc;
   --color-content-divider: #4c4c4c;
 
-  --color-selection-background: #6f6f6f;
-
   --color-stripe-01: var(--color-base02);
   --color-stripe-02: var(--color-sidecar-header);
   --tab-gray-text-color: #b5b5b5;

plugins/plugin-client-common/web/css/static/ui.css

@@ -3,7 +3,6 @@
 }
 ::selection {
   background-color: var(--color-selection-background);
-  color: var(--color-selection-foreground);
 }
 html,
 body[kui-theme-style],
@@ -1382,9 +1381,6 @@ body {
   --color-text-01: var(--color-base06);
   --color-text-02: var(--color-base04);
 
-  --color-selection-background: var(--color-base04);
-  --color-selection-foreground: var(--color-text-01);
-
   --color-ok: var(--color-green);
   --color-error: var(--color-red);
   --color-warning: var(--color-base09);
@@ -1429,6 +1425,18 @@ body {
 
   /* repl background */
   --color-repl-background: var(--color-ui-01);
+
+  /* text selection */
+  --color-selection-background-dark: rgba(255, 255, 255, 0.3);
+  --color-selection-background-light: rgba(0, 0, 0, 0.3);
+}
+body[kui-theme-style="dark"],
+body[kui-theme-style="light"] .kui--inverted-color-context {
+  --color-selection-background: var(--color-selection-background-dark);
+}
+body[kui-theme-style="light"],
+body[kui-theme-style="dark"] .kui--inverted-color-context {
+  --color-selection-background: var(--color-selection-background-light);
 }
 
 .color-base08 {

plugins/plugin-core-themes/web/css/dark.css

@@ -33,8 +33,6 @@ body[kui-theme="Dark"] {
   --color-sidecar-toolbar-background: #d7dce3;
   --color-sidecar-toolbar-foreground: var(--color-base02);
 
-  --color-selection-background: var(--color-base05);
-
   --color-brand-03: #418cff;
   --color-tag-beta-fill: #202529;
   --color-tag-beta-text: var(--color-text-01);

plugins/plugin-core-themes/web/css/light.css

@@ -101,7 +101,6 @@ body[kui-theme="Light"] {
   --color-sidecar-border: #e4e4e4;
 
   --color-brand-03: #008fff;
-  --color-selection-background: #b3e6ff;
 
   --color-confirm-background: var(--color-base00);
   --color-confirm-foreground: var(--color-base05);

plugins/plugin-editor/web/css/static/theme-alignment.css

@@ -10,10 +10,6 @@
   transition: box-shadow 300ms ease-in-out;
 }
 
-[kui-theme-style] .monaco-editor .selected-text {
-  opacity: 0.3; /* i don't know why the selection outside of monaco is different, despite using the same CSS styling */
-}
-
 [kui-theme-style] .monaco-editor {
   transition: color 300ms ease-in-out;
   color: var(--color-text-01);