theme: Split out _solid() function

The function creates a solid color image. Currently this is done with
linear-gradient().

gtk/theme/Adwaita/_common.scss

@@ -123,7 +123,7 @@ textview {
 
 textview border {
   background-color: mix($bg_color, $base_color, 50%);
-  background-image: image(transparentize(black, 0.8)); // HACK: the border node just draws background so,
+  background-image: _solid(transparentize(black, 0.8)); // HACK: the border node just draws background so,
   background-repeat: no-repeat;                        // using a background-image to draw the border
 
   &:backdrop { background-color: mix($backdrop_bg_color, $backdrop_base_color, 50%); }
@@ -1479,7 +1479,7 @@ headerbar {
     .selection-menu {
       &:backdrop, & {
         border-color: transparentize($selected_bg_color, 1);
-        background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1));
+        background-image: _solid(transparentize($selected_bg_color, 1));
         box-shadow: none;
         padding-left: 10px;
         padding-right: 10px;
@@ -3024,7 +3024,7 @@ scale {
     min-width: 0;
 
     trough {
-      background-image: linear-gradient(to top, $borders_color);
+      background-image: _solid($borders_color);
       background-repeat: no-repeat;
     }
 
@@ -3746,7 +3746,7 @@ placessidebar {
     &.sidebar-placeholder-row {
       padding: 0 8px;
       min-height: 2px;
-      background-image: image($drop_target_color);
+      background-image: _solid($drop_target_color);
       background-clip: content-box;
     }
 
@@ -3797,24 +3797,24 @@ paned {
     border-style: none; // just to be sure
     background-color: transparent;
     // workaround, using background istead of a border since the border will get rendered twice (?)
-    background-image: image($borders_color);
+    background-image: _solid($borders_color);
     background-size: 1px 1px;
 
-    &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
+    &:selected { background-image: _solid($selected_bg_color); } // FIXME is this needed?
 
-    &:backdrop { background-image: image($backdrop_borders_color); }
+    &:backdrop { background-image: _solid($backdrop_borders_color); }
 
     &.wide {
       min-width: 5px;
       min-height: 5px;
       background-color: $bg_color;
-      background-image: image($borders_color), image($borders_color);
+      background-image: _solid($borders_color), _solid($borders_color);
       background-size: 1px 1px, 1px 1px;
 
       &:backdrop {
         background-color: $backdrop_bg_color;
-        background-image: image($backdrop_borders_color),
+        background-image: _solid($backdrop_borders_color),
-                          image($backdrop_borders_color);
+                          _solid($backdrop_borders_color);
       }
     }
   }

gtk/theme/Adwaita/_drawing.scss

@@ -8,6 +8,11 @@
   @else { @return 0 1px $c; }
 }
 
+@function _solid($c) {
+// solid color image
+  @return linear-gradient(to bottom, $c);
+}
+
 @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
 //
 // Helper function to stack up to 4 box-shadows;
@@ -275,8 +280,8 @@
     color: $tc;
     outline-color: transparentize($tc, 0.7);
     border-color: if($c!=$bg_color, _border_color($c), $borders_color);
-    @if $variant == 'light' { background-image: image(darken($c, 8%)); }
+    @if $variant == 'light' { background-image: _solid(darken($c, 8%)); }
-    @else { background-image: image(darken($c, 6%)); }
+    @else { background-image: _solid(darken($c, 6%)); }
     @include _shadows(inset 0 1px transparentize($_hilight_color, 1),
                       $_button_edge);
 
@@ -293,7 +298,7 @@
 
     border-color: if($c!=$bg_color, _border_color($c),
                                     $insensitive_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     text-shadow: none;
     -gtk-icon-shadow: none;
     // white with 0 alpha to avoid an ugly transition, since no color means
@@ -327,7 +332,7 @@
     label, & { color: if($tc!=$fg_color,mix($tc, $_bg, 80%), $backdrop_fg_color); }
 
     border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     text-shadow: none;
     -gtk-icon-shadow: none;
     @include _shadows(inset 0 1px transparentize(white, 1),
@@ -344,7 +349,7 @@
     label, & { color: if($tc!=$fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); }
 
     border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     @include _shadows(inset 0 1px transparentize(white, 1),
                       $_blank_edge);
   }
@@ -360,7 +365,7 @@
     label, & { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
 
     border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     text-shadow: none;
     -gtk-icon-shadow: none;
     // white with 0 alpha to avoid an ugly transition, since no color means
@@ -381,7 +386,7 @@
     label { color: if($c!=$bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
 
     border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     @include _shadows(inset 0 1px transparentize(white, 1),
                       $_blank_edge);
   }
@@ -395,7 +400,7 @@
 
     color: $osd_fg_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     background-clip: padding-box;
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: 0 1px black;
@@ -411,7 +416,7 @@
 
     color: white;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     background-clip: padding-box;
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: 0 1px black;
@@ -426,7 +431,7 @@
 
     color: white;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
@@ -439,7 +444,7 @@
   //
     color: $osd_insensitive_fg_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
+    background-image: _solid($osd_insensitive_bg_color);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
@@ -454,7 +459,7 @@
 
     color: $osd_fg_color;
     border-color: $osd_borders_color;
-    background-image: linear-gradient(to bottom, $_bg);
+    background-image: _solid($_bg);
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;

gtk/theme/Adwaita/gtk-contained-dark.css

@@ -77,7 +77,7 @@ textview text {
 
 textview border {
   background-color: #313434;
-  background-image: image(rgba(0, 0, 0, 0.2));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2));
   background-repeat: no-repeat; }
   textview border:backdrop {
     background-color: #333636; }
@@ -469,7 +469,7 @@ button {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #212424;
-    background-image: image(#2a2f2f);
+    background-image: linear-gradient(to bottom, #2a2f2f);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none;
@@ -795,7 +795,7 @@ button.suggested-action {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
     border-color: #0f2b48;
-    background-image: image(#1b4e83);
+    background-image: linear-gradient(to bottom, #1b4e83);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -972,7 +972,7 @@ button.destructive-action {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
     border-color: #760909;
-    background-image: image(#b90e0e);
+    background-image: linear-gradient(to bottom, #b90e0e);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -1190,7 +1190,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #212424;
-    background-image: image(#2a2f2f);
+    background-image: linear-gradient(to bottom, #2a2f2f);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -1737,7 +1737,7 @@ headerbar {
         color: #ffffff;
         outline-color: rgba(255, 255, 255, 0.3);
         border-color: #0f2b48;
-        background-image: image(#1b4e83);
+        background-image: linear-gradient(to bottom, #1b4e83);
         box-shadow: inset 0 1px rgba(255, 255, 255, 0);
         text-shadow: none;
         -gtk-icon-shadow: none; }
@@ -1866,7 +1866,7 @@ headerbar {
           color: #eeeeec;
           outline-color: rgba(238, 238, 236, 0.3);
           border-color: #212424;
-          background-image: image(#2a2f2f);
+          background-image: linear-gradient(to bottom, #2a2f2f);
           box-shadow: inset 0 1px rgba(255, 255, 255, 0);
           text-shadow: none;
           -gtk-icon-shadow: none;
@@ -2765,7 +2765,7 @@ radio {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #212424;
-    background-image: image(#2a2f2f);
+    background-image: linear-gradient(to bottom, #2a2f2f);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -3500,7 +3500,7 @@ scale {
     min-height: 0;
     min-width: 0; }
     scale.color trough {
-      background-image: linear-gradient(to top, #212424);
+      background-image: linear-gradient(to bottom, #212424);
       background-repeat: no-repeat; }
     scale.color.horizontal {
       padding: 0 0 15px 0; }
@@ -4030,7 +4030,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: image(#4e9a06);
+    background-image: linear-gradient(to bottom, #4e9a06);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #215d9c; }
@@ -4062,21 +4062,21 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#212424);
+  background-image: linear-gradient(to bottom, #212424);
   background-size: 1px 1px; }
   paned > separator:selected {
-    background-image: image(#215d9c); }
+    background-image: linear-gradient(to bottom, #215d9c); }
   paned > separator:backdrop {
-    background-image: image(#262929); }
+    background-image: linear-gradient(to bottom, #262929); }
   paned > separator.wide {
     min-width: 5px;
     min-height: 5px;
     background-color: #393f3f;
-    background-image: image(#212424), image(#212424);
+    background-image: linear-gradient(to bottom, #212424), linear-gradient(to bottom, #212424);
     background-size: 1px 1px, 1px 1px; }
     paned > separator.wide:backdrop {
       background-color: #393f3f;
-      background-image: image(#262929), image(#262929); }
+      background-image: linear-gradient(to bottom, #262929), linear-gradient(to bottom, #262929); }
 paned.horizontal > separator {
   background-repeat: repeat-y; }
   paned.horizontal > separator:dir(ltr) {
@@ -4151,7 +4151,7 @@ infobar {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
       border-color: #0f2b48;
-      background-image: image(#1b4e83);
+      background-image: linear-gradient(to bottom, #1b4e83);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0);
       text-shadow: none;
       -gtk-icon-shadow: none; }

gtk/theme/Adwaita/gtk-contained.css

@@ -77,7 +77,7 @@ textview text {
 
 textview border {
   background-color: #f4f4f3;
-  background-image: image(rgba(0, 0, 0, 0.2));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2));
   background-repeat: no-repeat; }
   textview border:backdrop {
     background-color: #f2f2f2; }
@@ -469,7 +469,7 @@ button {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #b6b6b3;
-    background-image: image(#d4d4d2);
+    background-image: linear-gradient(to bottom, #d4d4d2);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none;
@@ -798,7 +798,7 @@ button.suggested-action {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
     border-color: #215d9c;
-    background-image: image(#2b7bcf);
+    background-image: linear-gradient(to bottom, #2b7bcf);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -975,7 +975,7 @@ button.destructive-action {
     color: white;
     outline-color: rgba(255, 255, 255, 0.3);
     border-color: #a60c0c;
-    background-image: image(#df1111);
+    background-image: linear-gradient(to bottom, #df1111);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -1193,7 +1193,7 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #b6b6b3;
-    background-image: image(#d4d4d2);
+    background-image: linear-gradient(to bottom, #d4d4d2);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -1744,7 +1744,7 @@ headerbar {
         color: #ffffff;
         outline-color: rgba(255, 255, 255, 0.3);
         border-color: #215d9c;
-        background-image: image(#2b7bcf);
+        background-image: linear-gradient(to bottom, #2b7bcf);
         box-shadow: inset 0 1px rgba(255, 255, 255, 0);
         text-shadow: none;
         -gtk-icon-shadow: none; }
@@ -1873,7 +1873,7 @@ headerbar {
           color: #2e3436;
           outline-color: rgba(46, 52, 54, 0.3);
           border-color: #b6b6b3;
-          background-image: image(#d4d4d2);
+          background-image: linear-gradient(to bottom, #d4d4d2);
           box-shadow: inset 0 1px rgba(255, 255, 255, 0);
           text-shadow: none;
           -gtk-icon-shadow: none;
@@ -2790,7 +2790,7 @@ radio {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #b6b6b3;
-    background-image: image(#d4d4d2);
+    background-image: linear-gradient(to bottom, #d4d4d2);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none; }
@@ -3529,7 +3529,7 @@ scale {
     min-height: 0;
     min-width: 0; }
     scale.color trough {
-      background-image: linear-gradient(to top, #b6b6b3);
+      background-image: linear-gradient(to bottom, #b6b6b3);
       background-repeat: no-repeat; }
     scale.color.horizontal {
       padding: 0 0 15px 0; }
@@ -4059,7 +4059,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: image(#4e9a06);
+    background-image: linear-gradient(to bottom, #4e9a06);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #4a90d9; }
@@ -4091,21 +4091,21 @@ paned > separator {
   -gtk-icon-source: none;
   border-style: none;
   background-color: transparent;
-  background-image: image(#b6b6b3);
+  background-image: linear-gradient(to bottom, #b6b6b3);
   background-size: 1px 1px; }
   paned > separator:selected {
-    background-image: image(#4a90d9); }
+    background-image: linear-gradient(to bottom, #4a90d9); }
   paned > separator:backdrop {
-    background-image: image(#c0c0bd); }
+    background-image: linear-gradient(to bottom, #c0c0bd); }
   paned > separator.wide {
     min-width: 5px;
     min-height: 5px;
     background-color: #e8e8e7;
-    background-image: image(#b6b6b3), image(#b6b6b3);
+    background-image: linear-gradient(to bottom, #b6b6b3), linear-gradient(to bottom, #b6b6b3);
     background-size: 1px 1px, 1px 1px; }
     paned > separator.wide:backdrop {
       background-color: #e8e8e7;
-      background-image: image(#c0c0bd), image(#c0c0bd); }
+      background-image: linear-gradient(to bottom, #c0c0bd), linear-gradient(to bottom, #c0c0bd); }
 paned.horizontal > separator {
   background-repeat: repeat-y; }
   paned.horizontal > separator:dir(ltr) {
@@ -4180,7 +4180,7 @@ infobar {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
       border-color: #215d9c;
-      background-image: image(#2b7bcf);
+      background-image: linear-gradient(to bottom, #2b7bcf);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0);
       text-shadow: none;
       -gtk-icon-shadow: none; }

gtk/theme/HighContrast/_common.scss

@@ -297,11 +297,11 @@ entry {
     &:not(:disabled) + entry:not(:disabled),
     &:not(:disabled) + %entry:not(:disabled) {
       border-top-color: mix($borders_color, $base_color, 30%);
-      background-image: linear-gradient(to bottom, $base_color);
+      background-image: _solid($base_color);
 
       &:backdrop {
         border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
-        background-image: linear-gradient(to bottom, $backdrop_base_color);
+        background-image: _solid($backdrop_base_color);
       }
     }
 
@@ -2781,7 +2781,7 @@ calendar {
                                 darken($bg_color,2%));
     border-bottom-color: mix($borders_color,$bg_color,50%);
     &:backdrop {
-      background-image: linear-gradient(to bottom, $backdrop_bg_color);
+      background-image: _solid($backdrop_bg_color);
       border-bottom-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
     }
   }
@@ -2980,7 +2980,7 @@ placessidebar {
     &.sidebar-placeholder-row {
       padding: 0 8px;
       min-height: 2px;
-      background-image: image($fg_color);
+      background-image: _solid($fg_color);
       background-clip: content-box;
     }
 
@@ -3023,9 +3023,9 @@ paned {
   separator {
     min-width: 1px;
     min-height: 1px;
-    background-image: linear-gradient(to bottom, $borders_color);
+    background-image: _solid($borders_color);
     &:backdrop {
-      background-image: linear-gradient(to bottom, $backdrop_borders_color);
+      background-image: _solid($backdrop_borders_color);
     }
   }
    &:dir(ltr).horizontal separator {

gtk/theme/HighContrast/_drawing.scss

@@ -6,6 +6,11 @@
   @return 0 1px $c;
 }
 
+@function _solid($c) {
+// solid color image
+  @return linear-gradient(to bottom, $c);
+}
+
 @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
 //
 // Helper function to stack up to 4 box-shadows;
@@ -64,17 +69,17 @@
   @if $t==insensitive {
     color: $insensitive_fg_color;
     border-color: $borders_color;
-    background-image: linear-gradient(to bottom, $insensitive_bg_color);
+    background-image: _solid($insensitive_bg_color);
     @include _shadows($_entry_edge);
   }
   @if $t==backdrop {
     color: $backdrop_fg_color;
-    background-image: linear-gradient(to bottom, $backdrop_base_color);
+    background-image: _solid($backdrop_base_color);
     box-shadow: 0 1px transparentize(white,1);
   }
   @if $t==backdrop-insensitive {
     color: $insensitive_fg_color;
-    background-image: linear-gradient(to bottom, $backdrop_bg_color);
+    background-image: _solid($backdrop_bg_color);
     box-shadow: 0 1px transparentize(white,1);
   }
 }

gtk/theme/HighContrast/gtk-contained-inverse.css

@@ -3094,7 +3094,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: image(#fff);
+    background-image: linear-gradient(to bottom, #fff);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #ddd; }

gtk/theme/HighContrast/gtk-contained.css

@@ -3101,7 +3101,7 @@ placessidebar row {
   placessidebar row.sidebar-placeholder-row {
     padding: 0 8px;
     min-height: 2px;
-    background-image: image(#000);
+    background-image: linear-gradient(to bottom, #000);
     background-clip: content-box; }
   placessidebar row.sidebar-new-bookmark-row {
     color: #000; }