style: Clean up calendar widget csswip/snwh/calendar-visual-treatment

- use existing button styles for the calendar items
- change visual treatment of weekends; fixes #1767
- clean up class names

3 files changed, 44 insertions, 74 deletions

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 0648fa4d5..20600a1cf 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -90,6 +90,7 @@ stage {
   &:selected,
   &:active { @include button(active);}
   &:checked { @include button(checked);}
+  &.default { @include button(default);}
 
   &.flat {
     @include button(normal, $flat:true);
@@ -99,6 +100,7 @@ stage {
     &:selected,
     &:active { @include button(active, $flat:true);}
     &:checked { @include button(checked, $flat:true);}
+    &.default { @include button(default, $flat:false);}
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 2a6aec8a9..1221231c6 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -48,110 +48,78 @@
       @extend %heading;
       padding: 8px 0;
     }
+
     .pager-button {
-      background-color: transparent;
+      @extend .button.flat;
+      padding: 0 !important;
       height: 32px;
       width: 32px;
       margin: 2px;
       border-radius: $base_border_radius;
-      &:hover, &:focus {background-color: $hover_bg_color;}
-      &:active {background-color: $active_bg_color;}
-      @if $is_highcontrast {
-        border:1px solid $hc_inset_color;
-      }
     }
   }
 
-  $calendar_day_size: 3em;
+  // day style
+  .calendar-day {
+    @extend %numeric;
+    @extend %smaller;
+    @extend .button.flat;
 
-  .calendar-day-base {
-    text-align: center;
+    border-radius: 99px;
+    height: 3em !important;
+    width: 3em !important;
     margin: 2px;
     padding: 0 !important;
-    height: $calendar_day_size !important;
-    width: $calendar_day_size !important;
-    border-radius: 99px;
+    font-weight: 600;
+    text-align: center;
     transition-duration: 100ms;
-    @extend %numeric;
-    @extend %smaller;
-
-    &:hover {background-color: $hover_bg_color;}
-    &:focus {
-      background-color: mix($bg_color, $selected_bg_color, 80%);
-      color: inherit;
-      box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
-    }
-
-    &:active,&:selected {
-      color: $active_fg_color;
-      background-color: $active_bg_color;
-      &:focus {
-        background-color: mix($active_bg_color, $selected_bg_color, 80%);
-      }
-    }
 
     // day of week heading
     &.calendar-day-heading {
+      background-color: transparent;
       color: $insensitive_fg_color;
-      padding-top: $base_padding;
-      height: 1.1em !important; // force heading to be smaller height
-      font-weight: 600;
-      @extend %smaller;
-    }
-  }
-
-  .calendar-day {
-    font-weight: 600;
-    @if $is_highcontrast {
-      border:1px solid $hc_inset_color;
+      height: 0.93em !important; // force heading to be smaller height
+      padding-top: $base_padding !important;
+      margin-bottom: 0;
       border-radius: 9px;
     }
-  }
-  .calendar-work-day {}
-  .calendar-nonwork-day {color: $insensitive_fg_color;}
-  .calendar-other-month-day {
-    color: transparentize($fg_color, 0.5);
-    &.calendar-nonwork-day {
-      color: transparentize($insensitive_fg_color, 0.5);
-    }
-  }
 
-  // Today
-  .calendar-today {
-    background-color: $selected_bg_color;
-    font-weight: 800;
-    color: $selected_fg_color !important;
+    &.calendar-weekday {}
 
-    &:hover,&:focus {
-      background-color:lighten($selected_bg_color, 3%);
-      color: inherit;
+    &.calendar-weekend {
+      color: $insensitive_fg_color;
     }
 
-    &:active,&:selected {
-      background-color: $selected_bg_color;
-      color: inherit;
+    &.calendar-other-month {
+      color: transparentize($insensitive_fg_color, 0.7) !important;
+      font-weight: normal;
+    }
 
-      &:hover,&:focus {
-        background-color:lighten($selected_bg_color, 3%);
-        color: inherit;
-      }
+    &.calendar-today {
+      @extend .button.default;
     }
-  }
 
-  .calendar-day-with-events {
-    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
-    background-size: contain;
+    &.calendar-day-with-events {
+      background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
+      background-size: contain;
+    }
   }
 
+  // week number style
   .calendar-week-number {
     @include fontsize($base_font_size - 4);
     font-weight: bold;
     font-feature-settings: "tnum";
+    text-align: center;
     margin: 6px;
     padding: 0 $base_padding;
     border-radius: 3px;
     background-color: transparentize($fg_color, 0.9);
-    color: $insensitive_fg_color
+    color: $insensitive_fg_color;
+
+    @if $is_highcontrast {
+      border:1px solid $hc_inset_color;
+    }
   }
 }
 
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 985153663..078f31691 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -519,7 +519,7 @@ var Calendar = GObject.registerClass({
             // and we want, ideally, a single character for e.g. S M T W T F S
             let customDayAbbrev = _getCalendarDayAbbreviation(iter.getDay());
             let label = new St.Label({
-                style_class: 'calendar-day-base calendar-day-heading',
+                style_class: 'calendar-day calendar-day-heading',
                 text: customDayAbbrev,
                 can_focus: true,
             });
@@ -667,12 +667,12 @@ var Calendar = GObject.registerClass({
             });
 
             let hasEvents = this._eventSource.hasEvents(iter);
-            let styleClass = 'calendar-day-base calendar-day';
+            let styleClass = 'calendar-day';
 
             if (_isWorkDay(iter))
-                styleClass += ' calendar-work-day';
+                styleClass += ' calendar-weekday';
             else
-                styleClass += ' calendar-nonwork-day';
+                styleClass += ' calendar-weekend';
 
             // Hack used in lieu of border-collapse - see gnome-shell.css
             if (row == 2)
@@ -687,7 +687,7 @@ var Calendar = GObject.registerClass({
             if (sameDay(now, iter))
                 styleClass += ' calendar-today';
             else if (iter.getMonth() != this._selectedDate.getMonth())
-                styleClass += ' calendar-other-month-day';
+                styleClass += ' calendar-other-month';
 
             if (hasEvents)
                 styleClass += ' calendar-day-with-events';