feat: add DIM support to DomRenderer

part of #1896

src/renderer/dom/DomRendererRowFactory.ts

@@ -10,6 +10,7 @@ import { DEFAULT_COLOR, INVERTED_DEFAULT_COLOR } from '../atlas/Types';
 import { CellData } from '../../BufferLine';
 
 export const BOLD_CLASS = 'xterm-bold';
+export const DIM_CLASS = 'xterm-dim';
 export const ITALIC_CLASS = 'xterm-italic';
 export const CURSOR_CLASS = 'xterm-cursor';
 export const CURSOR_BLINK_CLASS = 'xterm-cursor-blink';
@@ -107,6 +108,10 @@ export class DomRendererRowFactory {
         charElement.classList.add(ITALIC_CLASS);
       }
 
+      if (flags & FLAGS.DIM) {
+        charElement.classList.add(exports.DIM_CLASS);
+      }
+
       charElement.textContent = this._workCell.getChars() || WHITESPACE_CELL_CHAR;
       if (fg !== DEFAULT_COLOR) {
         charElement.classList.add(`xterm-fg-${fg}`);

src/xterm.css

@@ -161,3 +161,7 @@
     height: 1px;
     overflow: hidden;
 }
+
+.xterm-dim {
+    opacity: 0.6;
+}