feat(dees-simple-appdash,dees-simple-login,dees-terminal): Revamp UI: dashboard & login styling, standardize icons to Lucide, and add terminal background/config

ts_web/elements/dees-terminal/dees-terminal.ts

@@ -38,6 +38,9 @@ export class DeesTerminal extends DeesElement {
   @property()
   accessor environment: {[key: string]: string} = {};
 
+  @property()
+  accessor background: string = '#000000';
+
   // exposing webcontainer
   private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
   public webcontainerPromise = this.webcontainerDeferred.promise;
@@ -58,7 +61,7 @@ export class DeesTerminal extends DeesElement {
     css`
       :host {
         padding: 20px;
-        background: #000;
+        background: var(--dees-terminal-background, #000000);
         position: absolute;
         height: 100%;
         width: 100%;
@@ -153,7 +156,7 @@ export class DeesTerminal extends DeesElement {
 
       .xterm .composition-view {
         /* TODO: Composition position got messed up somewhere */
-        background: #000;
+        background: var(--dees-terminal-background, #000000);
         color: #fff;
         display: none;
         position: absolute;
@@ -167,7 +170,7 @@ export class DeesTerminal extends DeesElement {
 
       .xterm .xterm-viewport {
         /* On OS X this is required in order for the scroll bar to appear fully opaque */
-        background-color: #000;
+        background-color: var(--dees-terminal-background, #000000);
         overflow-y: scroll;
         cursor: default;
         position: absolute;
@@ -261,11 +264,18 @@ export class DeesTerminal extends DeesElement {
   ): Promise<void> {
     const domtools = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
+
+    // Sync CSS variable with background property
+    this.style.setProperty('--dees-terminal-background', this.background);
+
     const container = this.shadowRoot.getElementById('container');
 
     const term = new Terminal({
       convertEol: true,
       cursorBlink: true,
+      theme: {
+        background: this.background,
+      },
     });
     this.fitAddon = new FitAddon();
     term.loadAddon(this.fitAddon);