Add support for styles

data/Application.css

@@ -1,8 +1,16 @@
 /*
  * SPDX-License-Identifier: GPL-3.0
- * SPDX-FileCopyrightText: 2023 elementary, Inc. (https://elementary.io)
+ * SPDX-FileCopyrightText: 2023-2024 elementary, Inc. (https://elementary.io)
  */
 
+dock-window {
+    margin: 16px 0 9px 0;
+}
+
+dock-window.traditional {
+    margin: 16px 0 0 0;
+}
+
 dock {
     background: alpha(@bg_color, 0.6);
     border-radius: 9px;
@@ -14,8 +22,26 @@ dock {
         0 0 0 1px alpha(@borders, 0.4),
         0 1px 3px alpha(black, 0.10),
         0 3px 9px alpha(black, 0.15);
-    margin: 9px;
-    margin-top: 0;
+    padding: 9px;
+}
+
+dock.traditional {
+    background: alpha(@bg_color, 0.7);
+    border-radius: 6px 6px 0 0;
+    box-shadow:
+        inset 0 -1px 0 0 alpha(@highlight_color, 0.2),
+        inset 0 1px 0 0 alpha(@highlight_color, 0.3),
+        inset 1px 0 0 0 alpha(@highlight_color, 0.07),
+        inset -1px 0 0 0 alpha(@highlight_color, 0.07),
+        0 0 0 1px alpha(@borders, 0.5),
+        0 1px 3px alpha(black, 0.12),
+        0 1px 2px alpha(black, 0.24);
+    margin-top: 32px;
+}
+
+dock.transparent {
+    background:none;
+    box-shadow: none;
 }
 
 launcher {

data/dock.gschema.xml

@@ -8,10 +8,16 @@
     <value nick='always' value='4'/>
   </enum>
 
+  <enum id="Style">
+    <value nick='modern' value='0'/>
+    <value nick='traditional' value='1'/>
+    <value nick='transparent' value='2'/>
+  </enum>
+
   <schema path="/io/elementary/dock/" id="io.elementary.dock">
     <key enum="HideMode" name="autohide-mode">
       <default>'overlapping-focus-window'</default>
-      <summary> Autohide mode</summary>
+      <summary>Autohide mode</summary>
       <description>How autohide should be handled</description>
     </key>
 
@@ -21,6 +27,12 @@
       <description>Logical pixel size of app launcher icons</description>
     </key>
 
+    <key enum="Style" name="style">
+      <default>'modern'</default>
+      <summary>Appearance of the dock</summary>
+      <description>Appearance of the dock</description>
+    </key>
+
     <key type="as" name="launchers">
       <default>['gala-multitaskingview.desktop', 'io.elementary.files.desktop', 'org.gnome.Epiphany.desktop', 'io.elementary.mail.desktop', 'io.elementary.tasks.desktop', 'io.elementary.calendar.desktop', 'io.elementary.music.desktop', 'io.elementary.videos.desktop', 'io.elementary.photos.desktop', 'io.elementary.settings.desktop', 'io.elementary.appcenter.desktop', 'io.elementary.installer.desktop']</default>
       <summary>An ordered array of app id's to show as launchers</summary>

src/MainWindow.vala

@@ -1,25 +1,49 @@
 /*
  * SPDX-License-Identifier: GPL-3.0
- * SPDX-FileCopyrightText: 2022 elementary, Inc. (https://elementary.io)
+ * SPDX-FileCopyrightText: 2022-2024 elementary, Inc. (https://elementary.io)
  */
 
+public class Dock.Container : Gtk.Box {
+    class construct {
+        set_css_name ("dock");
+    }
+}
+
 public class Dock.MainWindow : Gtk.ApplicationWindow {
     private static Settings settings = new Settings ("io.elementary.dock");
+
+    private Dock.Container dock_container;
+    private string? current_style;
 
     private Pantheon.Desktop.Shell? desktop_shell;
     private Pantheon.Desktop.Panel? panel;
 
     class construct {
-        set_css_name ("dock");
+        set_css_name ("dock-window");
     }
 
     construct {
         var launcher_manager = LauncherManager.get_default ();
 
-        child = launcher_manager;
+        dock_container = new Dock.Container ();
+
+        var overlay = new Gtk.Overlay () {
+            child = dock_container
+        };
+        overlay.add_overlay (launcher_manager);
+
+        var size_group = new Gtk.SizeGroup (Gtk.SizeGroupMode.BOTH);
+        size_group.add_widget (dock_container);
+        size_group.add_widget (launcher_manager);
+
         overflow = VISIBLE;
         resizable = false;
         titlebar = new Gtk.Label ("") { visible = false };
+        child = overlay;
+
+        remove_css_class("background");
+
+        update_style ();
 
         // Fixes DnD reordering of launchers failing on a very small line between two launchers
         var drop_target_launcher = new Gtk.DropTarget (typeof (Launcher), MOVE);
@@ -34,6 +58,21 @@ public class Dock.MainWindow : Gtk.ApplicationWindow {
                 update_panel_x11 ();
             }
         });
+
+        settings.changed["style"].connect (update_style);
+    }
+
+    private void update_style () {
+        if (current_style != null) {
+            remove_css_class (current_style);
+            dock_container.remove_css_class (current_style);
+        }
+
+        var new_style = settings.get_string ("style");
+        add_css_class (new_style);
+        dock_container.add_css_class (new_style);
+
+        current_style = new_style;
     }
 
     public void registry_handle_global (Wl.Registry wl_registry, uint32 name, string @interface, uint32 version) {