[gnome-software/wip/exalm/style-cleanups: 10/27] style: Clean up tiles

[Alexander Mikhaylenko <alexm src gnome org>]

commit a7d21130b11104adbbe015aa788fdb07a3a7f357
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Nov 9 18:07:04 2021 +0500

    style: Clean up tiles
    
    Remove .tile, use .card instead.
    
    Use .category-tile together with .card, adjust style to match libadwaita.
    
    Remove css name from app tile and summary tile, so we do inherit button
    styles - hover and active ones.
    
    Set css name in GsFeatureTile instead, as we don't want them here.

 src/gs-app-tile.c       |  3 ---
 src/gs-app-tile.ui      |  3 +--
 src/gs-category-tile.ui |  3 +--
 src/gs-feature-tile.c   |  2 ++
 src/gs-summary-tile.c   |  1 -
 src/gs-summary-tile.ui  |  3 +--
 src/style-hc.css        |  4 ++++
 src/style.css           | 56 +++++++------------------------------------------
 8 files changed, 16 insertions(+), 59 deletions(-)
---
diff --git a/src/gs-app-tile.c b/src/gs-app-tile.c
index bad5d4ecb..01449a7c4 100644
--- a/src/gs-app-tile.c
+++ b/src/gs-app-tile.c
@@ -145,7 +145,6 @@ void
 gs_app_tile_class_init (GsAppTileClass *klass)
 {
        GObjectClass *object_class = G_OBJECT_CLASS (klass);
-       GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
 
        object_class->get_property = gs_app_tile_get_property;
        object_class->set_property = gs_app_tile_set_property;
@@ -167,8 +166,6 @@ gs_app_tile_class_init (GsAppTileClass *klass)
                                     G_PARAM_READWRITE | G_PARAM_EXPLICIT_NOTIFY | G_PARAM_STATIC_STRINGS);
 
        g_object_class_install_properties (object_class, G_N_ELEMENTS (obj_props), obj_props);
-
-       gtk_widget_class_set_css_name (widget_class, "app-tile");
 }
 
 void
diff --git a/src/gs-app-tile.ui b/src/gs-app-tile.ui
index 25234bc99..639c8a2f4 100644
--- a/src/gs-app-tile.ui
+++ b/src/gs-app-tile.ui
@@ -6,8 +6,7 @@
     <!-- This is the minimum (sic!) width of a tile when the GtkFlowBox parent container switches to 3 
columns -->
     <property name="preferred-width">270</property>
     <style>
-      <class name="view"/>
-      <class name="tile"/>
+      <class name="card"/>
     </style>
     <child>
       <object class="GtkStack" id="stack">
diff --git a/src/gs-category-tile.ui b/src/gs-category-tile.ui
index 4f9155df6..6b5b1a753 100644
--- a/src/gs-category-tile.ui
+++ b/src/gs-category-tile.ui
@@ -3,8 +3,7 @@
   <!-- interface-requires gtk+ 3.10 -->
   <template class="GsCategoryTile" parent="GtkButton">
     <style>
-      <class name="view"/>
-      <class name="tile"/>
+      <class name="card"/>
       <class name="category-tile"/>
     </style>
     <child>
diff --git a/src/gs-feature-tile.c b/src/gs-feature-tile.c
index b00c1aec2..7816e903c 100644
--- a/src/gs-feature-tile.c
+++ b/src/gs-feature-tile.c
@@ -467,6 +467,8 @@ gs_feature_tile_class_init (GsFeatureTileClass *klass)
        gtk_widget_class_bind_template_child (widget_class, GsFeatureTile, image);
        gtk_widget_class_bind_template_child (widget_class, GsFeatureTile, title);
        gtk_widget_class_bind_template_child (widget_class, GsFeatureTile, subtitle);
+
+       gtk_widget_class_set_css_name (widget_class, "feature-tile");
 }
 
 GtkWidget *
diff --git a/src/gs-summary-tile.c b/src/gs-summary-tile.c
index f20f7e323..468ac2e85 100644
--- a/src/gs-summary-tile.c
+++ b/src/gs-summary-tile.c
@@ -181,7 +181,6 @@ gs_summary_tile_class_init (GsSummaryTileClass *klass)
 
        g_object_class_install_properties (object_class, G_N_ELEMENTS (obj_props), obj_props);
 
-       gtk_widget_class_set_css_name (widget_class, "summary-tile");
        gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/Software/gs-summary-tile.ui");
        gtk_widget_class_set_layout_manager_type (widget_class, GS_TYPE_SUMMARY_TILE_LAYOUT);
 
diff --git a/src/gs-summary-tile.ui b/src/gs-summary-tile.ui
index 8309227e2..1c92ab38d 100644
--- a/src/gs-summary-tile.ui
+++ b/src/gs-summary-tile.ui
@@ -6,8 +6,7 @@
     <!-- This is the minimum (sic!) width of a tile when the GtkFlowBox parent container switches to 3 
columns -->
     <property name="preferred-width">270</property>
     <style>
-      <class name="view"/>
-      <class name="tile"/>
+      <class name="card"/>
     </style>
     <child>
       <object class="GtkStack" id="stack">
diff --git a/src/style-hc.css b/src/style-hc.css
index 059d48fbc..b9a0a20cb 100644
--- a/src/style-hc.css
+++ b/src/style-hc.css
@@ -6,6 +6,10 @@
        color: #999999;
 }
 
+.category-tile:not(.category-tile-iconless) {
+       box-shadow: inset 0 0 0 1px alpha(@card_fg_color, .5);
+}
+
 .application-details-infobar.info {
        background-color: #d3d7cf;
        border-color: darker(#d3d7cf);
diff --git a/src/style.css b/src/style.css
index d4c18455e..b1bde6956 100644
--- a/src/style.css
+++ b/src/style.css
@@ -44,43 +44,14 @@ screenshot-carousel button,
        padding: 6px;
 }
 
-summary-tile {
-       border-radius: 6px;
-       min-width: 280px;
-}
-
 /* This mimicks the style of list and row from Adwaita, and of list.content from
  * Libhandy. */
 
-.view.tile, .category-tile.category-tile-iconless {
-  background-color: @theme_base_color;
-  border-radius: 8px;
-  border: solid 1px alpha(@borders, 0.7);
-  box-shadow: none;
-  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.view.tile:hover, .category-tile.category-tile-iconless:hover {
-  background-color: mix(@theme_fg_color, @theme_base_color, 0.95);
-}
-
-.view.tile:active, .category-tile.category-tile-iconless:active {
-  box-shadow: inset 0 2px 2px -2px mix(black, transparent, 0.8);
-}
-
-.view.tile:hover:active, .category-tile.category-tile-iconless:hover:active {
-  background-color: mix(@theme_fg_color, @theme_base_color, 0.9);
-}
-
 .category-tile {
        /* We have to remove the padding: 160px - 2*10px = 140px */
        min-width: 140px;
        padding: 20px 10px;
-       border-radius: 8px;
        font-weight: 900;
-       border: none;
-       box-shadow: inset 0 0 0 1px alpha(black, 0.13);
-       transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 clamp.medium .category-tile:not(.category-tile-iconless) {
@@ -95,11 +66,12 @@ clamp.large .category-tile:not(.category-tile-iconless) {
        font-size: 105%;
        font-weight: normal;
        padding: 10px 15px;
-       background-image: none;
 }
 
-/* Disable highlight on hover as it doesn’t make these icons look good */
-.category-tile:hover { -gtk-icon-filter: none; }
+.category-tile:not(.category-tile-iconless) {
+       border: none;
+       box-shadow: inset 0 0 0 1px alpha(@card_fg_color, .15);
+}
 
 /* Styling for specific category buttons. */
 .category-tile.category-create {
@@ -111,8 +83,6 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 }
 .category-tile.category-create:active {
        background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
-       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
-                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .category-tile.category-develop {
@@ -124,8 +94,6 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 }
 .category-tile.category-develop:active {
        background-color: shade(#5e5c64, .95);
-       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
-                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .category-tile.category-learn {
@@ -137,8 +105,6 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 }
 .category-tile.category-learn:active {
        background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
-       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
-                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .category-tile.category-play {
@@ -150,8 +116,6 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 }
 .category-tile.category-play:active {
        background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 
1.07) 100%);
-       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
-                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .category-tile.category-socialize {
@@ -163,32 +127,26 @@ clamp.large .category-tile:not(.category-tile-iconless) {
 }
 .category-tile.category-socialize:active {
        background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
-       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
-                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .category-tile.category-work {
        padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
-       box-shadow: inset 0 0 0 1px #efd185;
        color: #1c71d8;
        background-color:#fdf8d7;
        background-image: linear-gradient(#deddda 1px, transparent 1px),
-                         linear-gradient(90deg, #deddda 1px, transparent 1px);
+                         linear-gradient(90deg, #deddda 1px, transparent 1px);
        background-size: 10px 10px, 10px 10px;
        background-position: -1px -4px, center -1px;
 }
 .category-tile.category-work:hover {
-       box-shadow: inset 0 0 0 1px shade(#efd185, 1.08);
        background-color: shade(#fdf8d7, 1.03);
        background-image: linear-gradient(shade(#deddda, 1.04) 1px, transparent 1px),
-                         linear-gradient(90deg, shade(#deddda, 1.04) 1px, transparent 1px);
+                         linear-gradient(90deg, shade(#deddda, 1.04) 1px, transparent 1px);
 }
 .category-tile.category-work:active {
        background-color: shade(#fdf8d7, .93);
        background-image: linear-gradient(shade(#deddda, .97) 1px, transparent 1px),
-                         linear-gradient(90deg, shade(#deddda, .97) 1px, transparent 1px);
-       box-shadow: inset 0 0 0 1px shade(#efd185, 1.08),
-                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
+                         linear-gradient(90deg, shade(#deddda, .97) 1px, transparent 1px);
 }
 
 /* The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c */