Merge branch 'main' into theme-improvements

styles/src/styleTree/terminal.ts

@@ -1,7 +1,14 @@
 import Theme from "../themes/common/theme";
-import { border, modalShadow } from "./components";
+import { border, modalShadow, player } from "./components";
 
 export default function terminal(theme: Theme) {
+  /**
+  * Colors are controlled per-cell in the terminal grid. 
+  * Cells can be set to any of these more 'theme-capable' colors
+  * or can be set directly with RGB values. 
+  * Here are the common interpretations of these names:
+  * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
+  */
   let colors = {
     black: theme.ramps.neutral(0).hex(),
     red: theme.ramps.red(0.5).hex(),
@@ -11,7 +18,7 @@ export default function terminal(theme: Theme) {
     magenta: theme.ramps.magenta(0.5).hex(),
     cyan: theme.ramps.cyan(0.5).hex(),
     white: theme.ramps.neutral(7).hex(),
-    brightBlack: theme.ramps.neutral(2).hex(),
+    brightBlack: theme.ramps.neutral(4).hex(),
     brightRed: theme.ramps.red(0.25).hex(),
     brightGreen: theme.ramps.green(0.25).hex(),
     brightYellow: theme.ramps.yellow(0.25).hex(),
@@ -19,10 +26,19 @@ export default function terminal(theme: Theme) {
     brightMagenta: theme.ramps.magenta(0.25).hex(),
     brightCyan: theme.ramps.cyan(0.25).hex(),
     brightWhite: theme.ramps.neutral(7).hex(),
+    /**
+     * Default color for characters
+     */
     foreground: theme.ramps.neutral(7).hex(),
+    /**
+     * Default color for the rectangle background of a cell
+     */
     background: theme.ramps.neutral(0).hex(),
     modalBackground: theme.ramps.neutral(1).hex(),
-    cursor: theme.ramps.neutral(7).hex(),
+    /**
+     * Default color for the cursor
+     */
+    cursor: player(theme, 1).selection.cursor,
     dimBlack: theme.ramps.neutral(7).hex(),
     dimRed: theme.ramps.red(0.75).hex(),
     dimGreen: theme.ramps.green(0.75).hex(),

styles/src/styleTree/workspace.ts

@@ -33,6 +33,10 @@ export default function workspace(theme: Theme) {
       left: 8,
       right: 8,
     },
+    description: {
+      margin: { left: 6, top: 1 },
+      ...text(theme, "sans", "muted", { size: "2xs" })
+    }
   };
 
   const activeTab = {