Adwaita: globally increase paddings

gtk/theme/Adwaita/_common.scss

@@ -5,6 +5,21 @@
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $asset_suffix: if($variant=='dark', '-dark', '');
 
+$padding: 6px;
+$internal_padding: 3px;
+$font_compensation: 1px;
+
+//
+//       GtkImage           GtkLabel
+// +-----------------+  +--------------+
+// |        ip       |  |              | A Canterell 11 label is 21px tall, a symbolic icon is 16px tall
+// | [symbolic icon] |  | Cantarell 11 | so adding 1px to the bottom visually centers the font making the label 22px,
+// |        ip       |  |      fc      | to have the GtkImage the same height 3px at the bottom and 3 at the top are added.
+// +-----------------+  +--------------+
+//  ip: $internal_padding
+//  fc: $font_compensation
+//
+
 * {
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
@@ -221,7 +236,7 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
 
 .entry {
   border: 1px solid;
-  padding: 5px 8px 6px;
+  padding: $padding 2 * $padding $padding + $font_compensation; // 
 
   &.image { // icons inside the entry
     &.left { padding-left: 0; }
@@ -365,9 +380,19 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 
   $_button_transition: all 200ms $ease-out-quad;
 
+  // sizing
+  .label {
+    padding-bottom: $font_compensation;
+    padding-left: 2 * $internal_padding;
+    padding-right: 2 * $internal_padding;
+  }
+  GtkImage { padding: $internal_padding; }  // Icon
+  padding: $padding;
+
+  // styling
   border: 1px solid;
   border-radius: 3px;
-  padding: 5px 8px 6px;
+
   transition: $_button_transition;
   @include button(normal);
   &.flat {
@@ -568,6 +593,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
     }
   }
 
+/*
   &.image-button { padding: 8px; }
 
   &.text-button {
@@ -584,31 +610,26 @@ $_dot_color: if($variant=='light', $selected_bg_color,
     .label:first-child { padding-left: 8px; }
     .label:last-child { padding-right: 8px; }
   }
+*/
+  &.image-button.text-button {
+    .label:first-child { padding-right: 0; }
+    .label:last-child { padding-left: 0; }
+  }
 
   .stack-switcher > & {
-    // to position the needs attention dot, padding is added to the button
-    // child, a label needs just lateral padding while an icon needs vertical
-    // padding added too.
-
+    // the need attention dot is placed on the button child
+    padding: $padding;
     outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
 
-    > .label {
-      padding-left: 6px;  // label padding
-      padding-right: 6px; //
-    }
     > GtkImage {
-      padding-left: 6px;   // image padding
-      padding-right: 6px;  //
-      padding-top: 3px;    //
-      padding-bottom: 3px; //
-    }
-    &.text-button {
-      padding: 5px 10px 6px; // needed or it will get overridden
+      padding-left: $padding + $internal_padding - 2px;    // increase padding here to make the
+      padding-right: $padding + $internal_padding - 2px;   // dot fit
+      padding-top: $padding + $internal_padding - 1px;     //
     }
     &.image-button {
-      // we want image buttons to have a 1:1 aspect ratio, so compensation
-      // of the padding added to the GtkImage is needed
-      padding: 5px 2px;
+      padding-left: 2px;  // compensate the paddings of the button to keep the same aspect ratio
+      padding-right: 2px; //
+      padding-top: 1px    //
     }
     &.needs-attention > .label,
     &.needs-attention > GtkImage { @extend %needs_attention; }
@@ -754,6 +775,10 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 
 /* menu buttons */
 .menuitem.button.flat {
+ .label {
+    padding-left: 0;  // label side paddings here need to be reset
+    padding-right: 0; //
+  }
   @extend %undecorated_button;
   outline-offset: -1px;
   &:hover { background-color: mix($fg_color, $bg_color, 10%); }
@@ -765,8 +790,6 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 
 
 GtkColorButton.button {
-  padding: 5px; // Uniform padding on the GtkColorButton
-
   GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
                                           // colorpicker style, otherwise
     border-radius: 0;
@@ -833,8 +856,7 @@ GtkColorButton.button {
     color: mix($fg_color, $base_color, 90%);
     border-radius: 0;
     box-shadow: none;
-  //  padding-left: 6px;
-  //  padding-right: 6px;
+    padding: $padding + $internal_padding;
     &:dir(rtl) { border-style: none solid none none; }
     &:hover {
       color: $fg_color;
@@ -897,8 +919,6 @@ GtkColorButton.button {
   }
   &.vertical, &.vertical:dir(rtl) { //FIXME: try using linking templates for vertically linked stuff
     .button {
-      padding-top: 8px;    //  Same vertical padding as image-buttons
-      padding-bottom: 8px; //
       &:first-child {
         @extend %top_button;
         @include button(normal, $edge:none);
@@ -974,9 +994,13 @@ GtkColorButton.button {
  * ComboBoxes *
  **************/
 GtkComboBox {
-  > .the-button-in-the-combobox { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos
-                                                                           // are bigger then
-                                                                           // buttons
+  &:not(.combobox-entry) .the-button-in-the-combobox {
+    padding-top: $padding - 2px;                         // I'd like to avoid this hack, but the button child of combox is actually
+    padding-bottom: $padding + $font_compensation - 2px; // 4px bigger than a label.
+    padding-left: 2 * $internal_padding;
+    padding-right: 2 * $internal_padding;
+  }
+
   -GtkComboBox-arrow-scaling: 0.5;
   -GtkComboBox-shadow-type: none;
 
@@ -1059,7 +1083,7 @@ GtkComboBox {
  ************/
 .toolbar {
   -GtkWidget-window-dragging: true;
-  padding: 4px;
+  padding: $padding;
   background-color: $bg_color;
   .osd &, &.osd {
     padding: 13px;
@@ -1105,7 +1129,7 @@ GtkComboBox {
 
 .titlebar,
 .header-bar {
-  padding: 6px;
+  padding: $padding;
   border-width: 0 0 1px;
   border-style: solid;
   border-color: $borders_color;
@@ -1123,14 +1147,14 @@ GtkComboBox {
 
   .title {
     font-weight: bold;
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 3 * $padding;
+    padding-right: 3 * $padding;
   }
 
   .subtitle {
     font-size: smaller;
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 3 * $padding;
+    padding-right: 3 * $padding;
     @extend .dim-label;
   }
 
@@ -1280,7 +1304,7 @@ GtkComboBox {
 /************
  * Pathbars *
  ************/
-
+/*
 .path-bar .button {
   padding: 5px 6px 6px;
   &:first-child { padding-left: 8px; }
@@ -1296,6 +1320,13 @@ GtkComboBox {
   .label:only-child { padding-right: 0; padding-left: 0; }
   GtkImage { padding-top: 1px; }
 }
+*/
+
+.path-bar .button {
+  // this is for spacing the icon and label in the home button
+  .label:first-child:not(:only-child) { padding-right: 0; }
+  .label:last-child:not(:only-child) { padding-left: 0; }
+}
 
 /**************
  * Tree Views *
@@ -1556,7 +1587,7 @@ column-header.button.dnd { // for treeview-like derive widgets
  ***************/
 
 .popover {
-  padding: 2px;
+  padding: $internal_padding;
   border: 1px solid $borders_color;
   border-radius: 5px;
   background-color: mix($bg_color, $base_color, 50%);
@@ -3227,15 +3258,6 @@ GtkColorSwatch {
   }
 }
 
-GtkScaleButton.button,
-GtkVolumeButton.button {
-  // I assume both are image-button *by default*
-  // with the image-button/text-button classes automagically applied depending on the button child these selectors can be deleted.
-  @extend .image-button;
-
-  &.text-button { @extend .text-button }
-}
-
 /**********************
  * Window Decorations *
  *********************/