From 12603c3d91739ffe048109b400936a1d328987c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Thu, 20 Mar 2025 18:03:19 -0700
Subject: [PATCH] Styles: make cards rounded, expand demo, new constants

---
 demo/Views/CSSView.vala          | 36 ++++++++++++++++++++------------
 lib/Constants.vala               |  7 +++++++
 lib/Styles/Granite/_classes.scss | 10 +++++----
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/demo/Views/CSSView.vala b/demo/Views/CSSView.vala
index cc02443f7..40f0e408b 100644
--- a/demo/Views/CSSView.vala
+++ b/demo/Views/CSSView.vala
@@ -12,8 +12,8 @@ public class CSSView : Gtk.Box {
 
     construct {
         var header1 = new Gtk.Label ("\"title-1\" Style Class") {
-            margin_end = 24,
-            margin_start = 24,
+            margin_end = 12,
+            margin_start = 12,
             margin_top = 12
         };
         header1.add_css_class (Granite.STYLE_CLASS_H1_LABEL);
@@ -24,9 +24,7 @@ public class CSSView : Gtk.Box {
         var header3 = new Gtk.Label ("\"title-3\" Style Class");
         header3.add_css_class (Granite.STYLE_CLASS_H3_LABEL);
 
-        var header4 = new Gtk.Label ("\"title-4\" Style Class") {
-            margin_bottom = 12
-        };
+        var header4 = new Gtk.Label ("\"title-4\" Style Class");
         header4.add_css_class (Granite.STYLE_CLASS_H4_LABEL);
 
         var numeric = new Gtk.Label ("\"numeric\" Style Class 123.4") {
@@ -35,19 +33,33 @@ public class CSSView : Gtk.Box {
         numeric.add_css_class (Granite.CssClass.NUMERIC);
 
         var card_header = new Granite.HeaderLabel ("Cards and Headers") {
-            secondary_text = "\"card\" with \"rounded\" and \"checkerboard\" style classes"
+            secondary_text = "\"Granite.CssClass.CARD\" and \"Granite.CssClass.CHECKERBOARD\""
         };
 
-        var card = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
-        card.add_css_class (Granite.STYLE_CLASS_CARD);
-        card.add_css_class (Granite.CssClass.CHECKERBOARD);
-        card.add_css_class (Granite.STYLE_CLASS_ROUNDED);
+        var card = new Gtk.Box (VERTICAL, 0) {
+            hexpand = true
+        };
+        card.add_css_class (Granite.CssClass.CARD);
         card.append (header1);
         card.append (header2);
         card.append (header3);
         card.append (header4);
         card.append (numeric);
 
+        var card_checkered = new Granite.Bin () {
+            child = new Gtk.Image.from_icon_name ("battery-low") {
+                halign = CENTER,
+                icon_size = LARGE
+            },
+            hexpand = true
+        };
+        card_checkered.add_css_class (Granite.CssClass.CARD);
+        card_checkered.add_css_class (Granite.CssClass.CHECKERBOARD);
+
+        var card_box = new Gtk.Box (HORIZONTAL, 24);
+        card_box.append (card);
+        card_box.append (card_checkered);
+
         var richlist_label = new Granite.HeaderLabel ("Lists") {
             secondary_text = "\"rich-list\" and \"frame\" style classes"
         };
@@ -151,15 +163,13 @@ public class CSSView : Gtk.Box {
         dimmed_box.add_css_class (Granite.CssClass.DIM);
 
         var box = new Gtk.Box (Gtk.Orientation.VERTICAL, 12) {
-            halign = Gtk.Align.CENTER,
-            valign = Gtk.Align.CENTER,
             margin_top = 24,
             margin_bottom = 24,
             margin_start = 24,
             margin_end = 24,
         };
         box.append (card_header);
-        box.append (card);
+        box.append (card_box);
         box.append (richlist_label);
         box.append (rich_listbox);
         box.append (terminal_label);
diff --git a/lib/Constants.vala b/lib/Constants.vala
index fc9aa7d65..92afb1dcc 100644
--- a/lib/Constants.vala
+++ b/lib/Constants.vala
@@ -28,6 +28,7 @@ namespace Granite {
      *
      * Can be combined with the style class ".collapsed" to further reduce the size of the shadow
      */
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.CARD")]
     public const string STYLE_CLASS_CARD = "card";
     /**
      * Style class for checkered backgrounds to represent transparency in images
@@ -96,6 +97,7 @@ namespace Granite {
     /**
      * Style class for rounded corners, i.e. on a {@link Gtk.Window} or {@link Granite.STYLE_CLASS_CARD}
      */
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.CARD")]
     public const string STYLE_CLASS_ROUNDED = "rounded";
     /**
      * Style class defining a sidebar, such as the left side in a file chooser
@@ -213,6 +215,11 @@ namespace Granite {
          */
         public const string BACK = "back-button";
 
+        /**
+         * Style class for adding a small shadow to a container such as for image thumbnails
+         */
+        public const string CARD = "card";
+
         /**
          * Style class for checkered backgrounds to represent transparency in images
          */
diff --git a/lib/Styles/Granite/_classes.scss b/lib/Styles/Granite/_classes.scss
index 0af324307..45231ac89 100644
--- a/lib/Styles/Granite/_classes.scss
+++ b/lib/Styles/Granite/_classes.scss
@@ -1,15 +1,17 @@
-paper,
 .card {
     background-color: bg-color(1);
+    border-radius: rem($window_radius / 2);
     box-shadow:
         highlight(),
         // Intentionally not in ems since it's used as a stroke
         0 0 0 1px $border-color,
         shadow(1);
+}
 
-    &.rounded {
-        border-radius: rem($window_radius / 2);
-    }
+// Used on Page Setup of gtk print portal
+paper {
+    @extend .card;
+    border-radius: 0;
 }
 
 .checkerboard {