From ef4c70fa4c01a1746b73acc233c84cd4391a8719 Mon Sep 17 00:00:00 2001
From: Philipp Sauberzweig <register.philipp@mailbox.org>
Date: Mon, 13 Oct 2025 20:32:58 +0200
Subject: [PATCH] month-cell: Add pill style to first day of the month.

Add a pill style to the label of the first day of the month to make it easy to identify. Adjust the border radius of the existing pill style for the current date to be the same. Apply the font-weight using the new style class.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-calendar/-/merge_requests/647>
---
 src/gui/views/gcal-month-cell.c   |  4 ++--
 src/gui/views/gcal-month-view.blp | 14 +++++++-------
 src/theme/style.css               | 22 ++++++++++++++++++++--
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/gui/views/gcal-month-cell.c b/src/gui/views/gcal-month-cell.c
index f4e3a31a..5575e6a1 100644
--- a/src/gui/views/gcal-month-cell.c
+++ b/src/gui/views/gcal-month-cell.c
@@ -496,13 +496,13 @@ gcal_month_cell_set_date (GcalMonthCell *self,
     {
       g_autofree gchar *month_name = g_date_time_format (date, "%B");
       gtk_label_set_text (self->day_label, month_name);
-      gtk_widget_add_css_class (GTK_WIDGET (self->day_label), "heading");
+      gtk_widget_add_css_class (GTK_WIDGET (self->day_label), "first-day");
     }
   else
     {
       g_autofree gchar *date_number = g_strdup_printf ("%d", day_of_month);
       gtk_label_set_text (self->day_label, date_number);
-      gtk_widget_remove_css_class (GTK_WIDGET (self->day_label), "heading");
+      gtk_widget_remove_css_class (GTK_WIDGET (self->day_label), "first-day");
     }
 
   update_weather (self);
diff --git a/src/gui/views/gcal-month-view.blp b/src/gui/views/gcal-month-view.blp
index fa61b0d5..b9763769 100644
--- a/src/gui/views/gcal-month-view.blp
+++ b/src/gui/views/gcal-month-view.blp
@@ -43,43 +43,43 @@ template $GcalMonthView: Widget {
     homogeneous: true;
 
     Label label_0 {
-      margin-start: 6;
+      margin-start: 12;
       hexpand: true;
       xalign: 0.0;
     }
 
     Label label_1 {
-      margin-start: 6;
+      margin-start: 12;
       hexpand: true;
       xalign: 0.0;
     }
 
     Label label_2 {
-      margin-start: 6;
+      margin-start: 12;
       hexpand: true;
       xalign: 0.0;
     }
 
     Label label_3 {
-      margin-start: 6;
+      margin-start: 12;
       hexpand: true;
       xalign: 0.0;
     }
 
     Label label_4 {
-      margin-start: 6;
+      margin-start: 12;
       hexpand: true;
       xalign: 0.0;
     }
 
     Label label_5 {
-      margin-start: 6;
+      margin-start: 12;
       hexpand: true;
       xalign: 0.0;
     }
 
     Label label_6 {
-      margin-start: 6;
+      margin-start: 12;
       hexpand: true;
       xalign: 0.0;
     }
diff --git a/src/theme/style.css b/src/theme/style.css
index c6d49f02..993abddd 100644
--- a/src/theme/style.css
+++ b/src/theme/style.css
@@ -248,12 +248,30 @@ monthcell {
   background-color: var(--bg-color);
 }
 
+monthcell .day-label {
+  border-radius: 6px;
+  padding: 0px 6px 0px 6px;
+}
+
+/* First day of month */
+monthcell label.first-day {
+  font-weight: 700;
+  color: white;
+  background-color: var(--dark-2);
+}
+
+@media (prefers-color-scheme: dark) {
+  monthcell label.first-day {
+    color: black;
+    background-color: var(--light-3);
+  }
+}
+
 /* Today */
 monthcell.today label.day-label {
+  font-weight: 700;
   color: var(--accent-fg-color);
   background-color: var(--accent-bg-color);
-  border-radius: 99px;
-  padding: 0 6px;
 }
 
 monthcell:hover {