fix: prompt text alignment issues

Fixes #4368

Author: starpit

plugins/plugin-carbon-themes/web/scss/ibm-plex.scss

@@ -9,8 +9,6 @@ $font-prefix: '~@ibm/plex';
 @import '~@ibm/plex/scss/sans/regular/index';
 @import '~@ibm/plex/scss/sans/light/index';
 
-@import '~@ibm/plex/scss/sans-condensed/medium/index';
-
 body.kui--alternate[kui-theme-style] {
   --font-monospace: 'IBM Plex Mono';
   --font-sans-serif: 'IBM Plex Sans';

plugins/plugin-carbon-themes/web/scss/kui--alternate.scss

@@ -6,9 +6,6 @@ body.kui--alternate {
     padding-right: calc(1em * 0.875);
   }
 
-  .repl-input:not(.kui--isearch-active) .repl-prompt {
-    font-family: 'IBM Plex Sans Condensed';
-  }
   .repl-context {
     filter: none;
     color: var(--color-text-02);

plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx

@@ -135,7 +135,7 @@ export default class Input extends React.PureComponent<Props, State> {
   private promptRight() {
     // &#x2771; "heavy right-pointing angle bracket ornament"
     // another option: &#x276f; "heavy right-pointing angle quotation mark ornament"
-    return <span className="repl-prompt-righty">&#x276f;</span>
+    return <span className="repl-prompt-righty">/</span>
   }
 
   private isearchPrompt() {

plugins/plugin-client-common/web/css/static/repl.scss

@@ -19,51 +19,59 @@
 .repl.sidecar-visible p {
   white-space: normal;
 }
-.repl-prompt {
-  margin-right: 0.1875em;
-  --color-prompt-text: var(--color-brand-02);
-  --color-prompt-background: transparent;
-  color: var(--color-prompt-text);
-}
-.repl-input:not(.kui--isearch-active) .repl-prompt {
-  font-weight: 500;
-  font-family: var(--font-sans-serif);
-}
-.repl-prompt .repl-selection {
-  font-size: 80%;
-  opacity: 0.6;
-}
-.repl-prompt .repl-selection.has-selection-true {
-  margin-left: 1ex;
-}
-.repl-context {
-  background-color: var(--color-prompt-background);
-  letter-spacing: 0.16px;
-  filter: opacity(0.6875) grayscale(50%);
-}
-/*.repl-block.using-custom-prompt .repl-prompt-righty > svg,
+.repl {
+  .repl-prompt {
+    font-size: 0.875em;
+    margin-right: 0.25em;
+    --color-prompt-text: var(--color-brand-02);
+    --color-prompt-background: transparent;
+    color: var(--color-prompt-text);
+  }
+  .repl-input:not(.kui--isearch-active) .repl-prompt {
+    font-weight: 500;
+    font-family: var(--font-sans-serif);
+  }
+  .repl-prompt .repl-selection {
+    font-size: 80%;
+    opacity: 0.6;
+  }
+  .repl-prompt .repl-selection.has-selection-true {
+    margin-left: 1ex;
+  }
+  .repl-context {
+    background-color: var(--color-prompt-background);
+    letter-spacing: 0.16px;
+    filter: grayscale(20%);
+  }
+  /*.repl-block.using-custom-prompt .repl-prompt-righty > svg,
 .repl-block.using-custom-prompt .repl-prompt-righty > i,
 .repl-block.using-custom-prompt .repl-context {
   display: none;
 }*/
-.repl-prompt-righty .repl-temporary {
-  display: flex;
-  align-items: center;
-}
+  .repl-prompt-righty {
+    font-weight: 700;
+    text-shadow: 0 0 1px var(--color-text-02);
+  }
 
-/* repl right-hand decorations */
-.repl-prompt-right-elements {
-  display: flex;
-  align-items: center;
-  flex: 0;
-  white-space: nowrap;
-  margin-left: 1em;
-}
-.kui--repl-prompt-buttons {
-  margin-right: 1em;
-}
-.kui--repl-prompt-buttons .graphical-icon {
-  opacity: 0.0375;
+  .repl-prompt-righty .repl-temporary {
+    display: flex;
+    align-items: center;
+  }
+
+  /* repl right-hand decorations */
+  .repl-prompt-right-elements {
+    display: flex;
+    align-items: center;
+    flex: 0;
+    white-space: nowrap;
+    margin-left: 1em;
+  }
+  .kui--repl-prompt-buttons {
+    margin-right: 1em;
+  }
+  .kui--repl-prompt-buttons .graphical-icon {
+    opacity: 0.0375;
+  }
 }
 .repl-block .repl-input:hover .kui--repl-prompt-buttons .graphical-icon {
   opacity: 0.25;
@@ -129,6 +137,9 @@ body/*:not(.sidecar-full-screen)*/ repl.sidecar-visible .repl-selection, body/*.
   white-space: nowrap;
   /* text-overflow: ellipsis; see https://github.com/IBM/kui/issues/3539 */
 }
+.repl-block:not(.repl-active) .repl-input-element {
+  color: var(--color-text-02);
+}
 .kui--prompt-like:empty {
   border-right: 1ex solid var(--color-caret);
 }
@@ -278,7 +289,6 @@ body/*:not(.sidecar-full-screen)*/ repl.sidecar-visible .repl-selection, body/*.
   .bx--inline-loading__text {
     color: var(--color-text-02);
     font-size: 0.75em;
-    opacity: 0.75;
     order: -1;
     margin-right: 0.875em;
   }