Widgets: Add TerminalView

demo/Views/CSSView.vala

@@ -84,7 +84,8 @@ public class CSSView : DemoPage {
         card_box.append (card);
         card_box.append (card_checkered);
 
-        var terminal_label = new Granite.HeaderLabel ("\"terminal\" style class");
+        var terminal_label = new Granite.HeaderLabel
+        ("\"Granite.CssClass.TERMINAL\"");
 
         var terminal = new Gtk.Label ("[ 73%] Linking C executable granite-demo\n[100%] Built target granite-demo") {
             selectable = true,
@@ -97,7 +98,7 @@ public class CSSView : DemoPage {
             min_content_height = 70,
             child = terminal
         };
-        terminal_scroll.add_css_class (Granite.STYLE_CLASS_TERMINAL);
+        terminal_scroll.add_css_class (Granite.CssClass.TERMINAL);
 
         var accent_color_label = new Granite.HeaderLabel ("Colored labels and icons");
 

lib/Constants.vala

@@ -131,6 +131,7 @@ namespace Granite {
      * When used with {@link Gtk.Label} this style includes internal padding. When used with {@link Gtk.TextView}
      * interal padding will need to be set with {@link Gtk.Container.border_width}
      */
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.TERMINAL")]
     public const string STYLE_CLASS_TERMINAL = "terminal";
     /**
      * Style class for title label text in a {@link Granite.MessageDialog}
@@ -290,6 +291,15 @@ namespace Granite {
          * Style class for non-terminal text that uses a monospace font.
          */
         public const string MONOSPACE = "monospace";
+
+        /**
+         * Style class for {@link Gtk.Label} or {@link Gtk.TextView} to emulate the appearance of Terminal. This includes
+         * text color, background color, selection highlighting, and selecting the system monospace font.
+         *
+         * When used with {@link Gtk.Label} this style includes internal padding. When used with {@link Gtk.TextView}
+         * interal padding will need to be set with {@link Gtk.Container.border_width}
+         */
+        public const string TERMINAL = "terminal";
     }
 
     /**

lib/Styles/Granite/_classes.scss

@@ -48,3 +48,21 @@ paper {
     font-family: monospace;
 }
 
+.terminal {
+    font-family: monospace;
+
+    background-color: $fg-color;
+    color: bg-color(0);
+
+    padding: rem(12px) rem(18px);
+
+    & selection {
+        background-color: bg-color(0);
+        color: $fg-color;
+
+        &:backdrop {
+            // Cancelling values set in non-terminal selection
+            background-color: inherit;
+        }
+    }
+}

lib/Widgets/TerminalView.vala

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 elementary, Inc. (https://elementary.io)
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+[Version (since = "7.7.0")]
+public class Granite.TerminalView : Gtk.ScrolledWindow {
+
+    public TerminalView () {
+        this.add_css_class (Granite.CssClass.TERMINAL);
+    }
+
+    public TerminalView.with_textview (
+        Gtk.TextView view = new Gtk.TextView () {
+            cursor_visible = true,
+            margin_end = 6,
+            editable = false,
+            margin_start = 6,
+            monospace = true,
+            pixels_below_lines = 3,
+            wrap_mode = Gtk.WrapMode.WORD
+        }
+    ) {
+        this.child = view;
+    }
+
+    // We may not need this, as we could use an un-editable TextView and
+    // simplify the API
+    public TerminalView.with_label (Gtk.Label label) {
+        this.child = label;
+    }
+}

lib/meson.build

@@ -32,6 +32,7 @@ libgranite_sources = files(
     'Widgets/SettingsSidebar.vala',
     'Widgets/Settings.vala',
     'Widgets/SwitchModelButton.vala',
+    'Widgets/TerminalView.vala',
     'Widgets/TimePicker.vala',
     'Widgets/ToolBox.vala',
     'Widgets/Toast.vala',