Constants: add numeric css class (#745)

Author: danirabbit

data/granite.metainfo.xml.in

@@ -27,6 +27,19 @@
   <update_contact>contact_at_elementary.io</update_contact>
 
   <releases>
+    <release version="7.7.0" date="2025-02-10" urgency="medium">
+      <description>
+        <p>New Features:</p>
+        <ul>
+          <li>Granite.CssClass.NUMERIC</li>
+        </ul>
+        <p>Improvements:</p>
+        <ul>
+          <li>Updated translations</li>
+        </ul>
+      </description>
+    </release>
+
     <release version="7.6.0" date="2024-11-21" urgency="medium">
       <description>
         <p>New Features:</p>

demo/Views/CSSView.vala

@@ -29,6 +29,11 @@ public class CSSView : Gtk.Box {
         };
         header4.add_css_class (Granite.STYLE_CLASS_H4_LABEL);
 
+        var numeric = new Gtk.Label ("\"numeric\" Style Class 123.4") {
+            margin_bottom = 12
+        };
+        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"
         };
@@ -41,6 +46,7 @@ public class CSSView : Gtk.Box {
         card.append (header2);
         card.append (header3);
         card.append (header4);
+        card.append (numeric);
 
         var richlist_label = new Granite.HeaderLabel ("Lists") {
             secondary_text = "\"rich-list\" and \"frame\" style classes"

lib/Constants.vala

@@ -190,6 +190,18 @@ namespace Granite {
      */
     public const int TRANSITION_DURATION_OPEN = 250;
 
+    /**
+     * CSS style classes to be used with {@link Gtk.Widget.add_css_class}
+     */
+    [Version (since = "7.7.0")]
+    namespace CssClass {
+
+        /**
+         * sets font features to use tabular numbers. Equivalent of Pango's tnum property
+         */
+        public const string NUMERIC = "numeric";
+    }
+
     /**
      * Deep links to specific Settings pages.
      */

lib/Styles/_label.scss

@@ -25,6 +25,10 @@
     opacity: 0.75;
 }
 
+.numeric {
+    font-feature-settings: "tnum";
+}
+
 // Intended to match the Pango size of `<small>` and `size='smaller'`
 .small-label {
     font-size: 0.85em;

meson.build

@@ -2,7 +2,7 @@ project(
     'granite-7',
     'vala', 'c',
     meson_version: '>= 0.57.0',
-    version: '7.6.0'
+    version: '7.7.0'
 )
 
 if meson.get_compiler('vala').version().version_compare('<0.48.0')