Demo: use Granite styles

demo/GraniteDemo.vala

@@ -10,8 +10,19 @@ public class Granite.Demo : Gtk.Application {
     }
 
     public override void startup () {
-        Granite.init ();
         base.startup ();
+
+        Granite.init ();
+
+        var gtk_settings = Gtk.Settings.get_default ();
+        gtk_settings.gtk_theme_name = "Granite";
+
+        var granite_settings = Granite.Settings.get_default ();
+        gtk_settings.gtk_application_prefer_dark_theme = granite_settings.prefers_color_scheme == DARK;
+
+        granite_settings.notify["prefers-color-scheme"].connect (() => {
+            gtk_settings.gtk_application_prefer_dark_theme = granite_settings.prefers_color_scheme == DARK;
+        });
     }
 
     public override void activate () {
@@ -96,9 +107,6 @@ public class Granite.Demo : Gtk.Application {
             shrink_start_child = false
         };
 
-        var granite_settings = Granite.Settings.get_default ();
-        gtk_settings.gtk_application_prefer_dark_theme = granite_settings.prefers_color_scheme == Granite.Settings.ColorScheme.DARK;
-
         window.child = paned;
         window.set_default_size (900, 600);
         window.set_size_request (750, 500);
@@ -107,10 +115,6 @@ public class Granite.Demo : Gtk.Application {
 
         add_window (window);
         window.show ();
-
-        granite_settings.notify["prefers-color-scheme"].connect (() => {
-            gtk_settings.gtk_application_prefer_dark_theme = granite_settings.prefers_color_scheme == Granite.Settings.ColorScheme.DARK;
-        });
     }
 
     public static int main (string[] args) {

demo/Views/CSSView.vala

@@ -43,17 +43,22 @@ public class CSSView : Gtk.Box {
         card.append (header4);
 
         var richlist_label = new Granite.HeaderLabel ("Lists") {
-            secondary_text = "\"rich-list\" and \"frame\" style classes"
+            secondary_text = "\"rich-list\" and \"card\" style classes"
         };
 
-        var rich_listbox = new Gtk.ListBox () {
-            show_separators = true
+        var separators_modelbutton = new Granite.SwitchModelButton ("Show Separators") {
+            active = true,
+            description = "SwitchModelButton works great here too!"
         };
+
+        var rich_listbox = new Gtk.ListBox ();
         rich_listbox.add_css_class (Granite.STYLE_CLASS_RICH_LIST);
-        rich_listbox.add_css_class (Granite.STYLE_CLASS_FRAME);
+        rich_listbox.add_css_class (Granite.STYLE_CLASS_CARD);
         rich_listbox.append (new Gtk.Label ("Row 1"));
         rich_listbox.append (new Gtk.Label ("Row 2"));
-        rich_listbox.append (new Gtk.Label ("Row 3"));
+        rich_listbox.append (separators_modelbutton);
+
+        separators_modelbutton.bind_property ("active", rich_listbox, "show-separators", SYNC_CREATE | DEFAULT);
 
         var terminal_label = new Granite.HeaderLabel ("\"terminal\" style class");
 

lib/Constants.vala

@@ -21,6 +21,7 @@ namespace Granite {
      * Style class for numbered badges
      */
     public const string STYLE_CLASS_BADGE = "badge";
+
     /**
      * Style class for adding a small shadow to a container such as for image thumbnails
      *

lib/Icons/icons.gresource.xml

@@ -25,8 +25,8 @@
     <file alias="scalable/status/adw-tab-icon-missing-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/adw-tab-icon-missing-symbolic.svg</file>
     <file alias="scalable/status/adw-tab-overflow-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/adw-tab-overflow-symbolic.svg</file>
 
-    <file alias="scalable/status/check-active-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/check-active-symbolic.svg</file>
-    <file alias="scalable/status/check-mixed-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/check-mixed-symbolic.svg</file>
+    <file alias="scalable/status/check-checked-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/check-checked.svg</file>
+    <file alias="scalable/status/check-indeterminated-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/check-indeterminate.svg</file>
 
     <file alias="scalable/status/pager-checked-symbolic.svg" compressed="true" preprocess="xml-stripblanks">scalable/pager-checked-symbolic.svg</file>
 

lib/Styles/Granite/Index.scss

@@ -1,4 +1,5 @@
 @import '_card.scss';
+@import '_sidebar.scss';
 @import 'Dialog.scss';
 @import 'Header.scss';
 @import 'MessageDialog.scss';

lib/Styles/Granite/OverlayBar.scss

@@ -1,5 +1,5 @@
 overlaybar .osd {
-    padding: rem(6px) rem(12px);
+    padding: $button-spacing rem(12px);
     text-shadow: 0 rem(1px) rem(2px) rgba($fg_color, 0.6);
 
     spinner {

lib/Styles/Granite/_sidebar.scss

@@ -0,0 +1,12 @@
+.sidebar {
+    background-color: bg_color(3);
+    box-shadow: highlight();
+    min-width: rem(200px);
+
+    // Clear nested sidebar
+    .sidebar {
+        background: transparent;
+        box-shadow: none;
+        min-width: 0;
+    }
+}

lib/Styles/Gtk/Arrow.scss

@@ -0,0 +1,21 @@
+arrow {
+    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+    min-height: rem(16px);
+    min-width: rem(16px);
+
+    &.down {
+        -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+    }
+
+    &.left {
+        -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
+    }
+
+    &.right {
+        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+    }
+
+    &.up {
+        -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+    }
+}

lib/Styles/Gtk/CheckRadio.scss

@@ -0,0 +1,40 @@
+check,
+radio {
+    background-color: scale-color($toplevel-border-color, $alpha: -50%); // FIXME: abstract as trough color?
+    -gtk-icon-size: 1em;
+    min-height: 1em;
+    min-width: 1em;
+    padding: 1px;
+
+    &:checked {
+        background-color: $BLUEBERRY_500; // FIXME: use accent color
+        color: white;
+        -gtk-icon-source: -gtk-icontheme("check-checked-symbolic");
+    }
+
+    &:indeterminate {
+        color: rgba($fg-color, 0.5);
+        -gtk-icon-source: -gtk-icontheme("check-indeterminate-symbolic");
+    }
+}
+
+check {
+    border-radius: rem($window_radius / 3);
+
+    &:checked {
+        -gtk-icon-source: -gtk-icontheme("check-checked-symbolic");
+    }
+}
+
+radio {
+    border-radius: 50%;
+
+    &:checked {
+        -gtk-icon-source: -gtk-icontheme("pager-checked-symbolic");
+    }
+}
+
+radiobutton,
+checkbutton {
+    border-spacing: 0.5em; // FIXME: abstract button spacing?
+}

lib/Styles/Gtk/HeaderBar.scss

@@ -29,6 +29,6 @@ headerbar {
     }
 
     .csd & {
-        padding: rem(6px);
+        padding: $button-spacing;
     }
 }

lib/Styles/Gtk/Index.scss

@@ -1,6 +1,9 @@
+@import 'Arrow.scss';
 @import 'Button.scss';
+@import 'CheckRadio.scss';
 @import 'HeaderBar.scss';
 @import 'Image.scss';
+@import 'List.scss';
 @import 'Popover.scss';
 @import 'Scrollbar.scss';
 @import 'ShortcutsWindow.scss';

lib/Styles/Gtk/List.scss

@@ -0,0 +1,40 @@
+list {
+    &.rich-list > row {
+        padding: rem(6px);
+        min-height: rem(32px); //Try to force homogeneous row height
+    }
+
+    &.card,
+    &.boxed-list {
+        @extend .rounded;
+
+        > row {
+            // Rounded top
+            &:first-child {
+                &, &.expander row.header {
+                    border-top-left-radius: rem($window_radius / 2);
+                    border-top-right-radius: rem($window_radius / 2);
+                }
+            }
+
+            // Rounded bottom
+            &:last-child {
+                &,
+                &.expander:not(:checked),
+                &.expander:not(:checked) row.header,
+                &.expander:checked list.nested,
+                &.expander:checked list.nested > row:last-child {
+                    border-bottom-left-radius: rem($window_radius / 2);
+                    border-bottom-right-radius: rem($window_radius / 2);
+                    border-bottom-width: 0;
+                }
+            }
+        }
+    }
+
+
+    &.separators > row + row {
+        border-top: 1px solid $border-color;
+        box-shadow: inset 0 1px 0 0 scale-color($highlight_color, $alpha: -93%);
+    }
+}