Constants/CssClass: add colors and deprecate old ones (#753)

Author: danirabbit

demo/Views/CSSView.vala

@@ -113,26 +113,32 @@ public class CSSView : Gtk.Box {
         var accent_color_box = new Gtk.Box (HORIZONTAL, 6);
         accent_color_box.append (new Gtk.Image.from_icon_name ("emoji-body-symbolic"));
         accent_color_box.append (new Gtk.Image.from_icon_name ("face-tired-symbolic"));
-        accent_color_box.append (new Gtk.Label (".accent"));
-        accent_color_box.add_css_class (Granite.STYLE_CLASS_ACCENT);
+        accent_color_box.append (new Gtk.Label ("Granite.CssClass.ACCENT"));
+        accent_color_box.add_css_class (Granite.CssClass.ACCENT);
 
         var success_color_box = new Gtk.Box (HORIZONTAL, 6);
         success_color_box.append (new Gtk.Image.from_icon_name ("process-completed-symbolic"));
         success_color_box.append (new Gtk.Image.from_icon_name ("face-sick-symbolic"));
-        success_color_box.append (new Gtk.Label (".success"));
-        success_color_box.add_css_class (Granite.STYLE_CLASS_SUCCESS);
+        success_color_box.append (new Gtk.Label ("Granite.CssClass.SUCCESS"));
+        success_color_box.add_css_class (Granite.CssClass.SUCCESS);
 
         var warning_color_box = new Gtk.Box (HORIZONTAL, 6);
         warning_color_box.append (new Gtk.Image.from_icon_name ("dialog-warning-symbolic"));
         warning_color_box.append (new Gtk.Image.from_icon_name ("face-laugh-symbolic"));
-        warning_color_box.append (new Gtk.Label (".warning"));
-        warning_color_box.add_css_class (Granite.STYLE_CLASS_WARNING);
+        warning_color_box.append (new Gtk.Label ("Granite.CssClass.WARNING"));
+        warning_color_box.add_css_class (Granite.CssClass.WARNING);
 
         var error_color_box = new Gtk.Box (HORIZONTAL, 6);
         error_color_box.append (new Gtk.Image.from_icon_name ("dialog-error-symbolic"));
         error_color_box.append (new Gtk.Image.from_icon_name ("face-angry-symbolic"));
-        error_color_box.append (new Gtk.Label (".error"));
-        error_color_box.add_css_class (Granite.STYLE_CLASS_ERROR);
+        error_color_box.append (new Gtk.Label ("Granite.CssClass.ERROR"));
+        error_color_box.add_css_class (Granite.CssClass.ERROR);
+
+        var dimmed_box = new Gtk.Box (HORIZONTAL, 6);
+        dimmed_box.append (new Gtk.Image.from_icon_name ("adw-tab-icon-missing-symbolic"));
+        dimmed_box.append (new Gtk.Image.from_icon_name ("face-plain-symbolic"));
+        dimmed_box.append (new Gtk.Label ("Granite.CssClass.DIM"));
+        dimmed_box.add_css_class (Granite.CssClass.DIM);
 
         var box = new Gtk.Box (Gtk.Orientation.VERTICAL, 12) {
             halign = Gtk.Align.CENTER,
@@ -160,6 +166,7 @@ public class CSSView : Gtk.Box {
         box.append (success_color_box);
         box.append (warning_color_box);
         box.append (error_color_box);
+        box.append (dimmed_box);
 
         var scrolled = new Gtk.ScrolledWindow () {
             child = box

demo/Views/WelcomeView.vala

@@ -25,7 +25,7 @@ public class WelcomeView : Gtk.Box {
             description = "Maybe you can <b>do something</b> to hide it but <i>otherwise</i> it will stay here",
             icon = new ThemedIcon ("dialog-warning")
         };
-        alert.add_css_class (Granite.STYLE_CLASS_WARNING);
+        alert.add_css_class (Granite.CssClass.WARNING);
 
         var alert_action = alert.append_button (
             new ThemedIcon ("edit-delete"),

lib/Constants.vala

@@ -7,6 +7,7 @@ namespace Granite {
     /**
      * Style class to give accent color to a {@link Gtk.Label} or symbolic icon
      */
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.ACCENT")]
     public const string STYLE_CLASS_ACCENT = "accent";
     /**
      * Style class for shaping a {@link Gtk.Button}
@@ -106,7 +107,7 @@ namespace Granite {
     /**
      * Style class for widgets in success state.
      */
-    [Version (since = "7.5.0")]
+    [Version (since = "7.5.0", deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.SUCCESS")]
     public const string STYLE_CLASS_SUCCESS = "success";
 
     /**
@@ -144,10 +145,12 @@ namespace Granite {
     /**
      * Style class for dimmed labels.
      */
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.DIM")]
     public const string STYLE_CLASS_DIM_LABEL = "dim-label";
     /**
      * Style class for widgets in error state.
      */
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.ERROR")]
     public const string STYLE_CLASS_ERROR = "error";
     /**
      * Style class for flattened widgets, such as buttons,
@@ -173,6 +176,7 @@ namespace Granite {
     /**
      * Style class for widgets in warning state.
      */
+    [Version (deprecated = true, deprecated_since = "7.7.0", replacement = "Granite.CssClass.WARNING")]
     public const string STYLE_CLASS_WARNING = "warning";
 
     /**
@@ -195,11 +199,35 @@ namespace Granite {
      */
     [Version (since = "7.7.0")]
     namespace CssClass {
+        /**
+         * Style class to give accent color to a {@link Gtk.Label} or symbolic icon
+         */
+        public const string ACCENT = "accent";
+
+        /**
+         * Style class for dimmed labels and icons
+         */
+        public const string DIM = "dim-label";
+
+        /**
+         * Style class for widgets in error state.
+         */
+        public const string ERROR = "error";
 
         /**
          * sets font features to use tabular numbers. Equivalent of Pango's tnum property
          */
         public const string NUMERIC = "numeric";
+
+        /**
+         * Style class for widgets in success state.
+         */
+        public const string SUCCESS = "success";
+
+        /**
+         * Style class for widgets in warning state.
+         */
+        public const string WARNING = "warning";
     }
 
     /**