windowPreview: Overhaul chrome style

- increase close button size
 - use custom close icon that's better suited
   for the non-default 24pxp size
 - use translucent light gray for both close button
   and window caption

https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/81

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1605>

data/gnome-shell-theme.gresource.xml

@@ -25,6 +25,7 @@
     <file alias="icons/scalable/status/keyboard-hide-symbolic.svg">keyboard-hide-symbolic.svg</file>
     <file alias="icons/scalable/status/keyboard-layout-filled-symbolic.svg">keyboard-layout-filled-symbolic.svg</file>
     <file alias="icons/scalable/status/keyboard-shift-filled-symbolic.svg">keyboard-shift-filled-symbolic.svg</file>
+    <file alias="icons/scalable/ui/window-close-24-symbolic.svg">window-close-24-symbolic.svg</file>
     <file>process-working.svg</file>
     <file>toggle-off.svg</file>
     <file>toggle-off-dark.svg</file>

data/theme/gnome-shell-sass/widgets/_window-picker.scss

@@ -3,7 +3,10 @@
 $window_picker_spacing: $base_spacing; // 6px
 $window_picker_padding: $base_padding * 2; // 12px
 
-$window_close_button_size: 24px;
+$window_thumbnail_chrome_color: transparentize($osd_fg_color, 0.4);
+$window_thumbnail_chrome_border: transparentize($osd_bg_color, 0.7);
+
+$window_close_button_size: 30px;
 $window_close_button_padding: 3px;
 
 // Window picker
@@ -14,31 +17,31 @@ $window_close_button_padding: 3px;
 
 // Window titles
 .window-caption {
-  color: $osd_fg_color;
+  color: $osd_bg_color;
-  background-color: $osd_bg_color;
+  background-color: $window_thumbnail_chrome_color;
-  border:1px solid $osd_outer_borders_color;
+  border-radius: 99px;
-  border-radius: $base_border_radius + 1;
+  border: 1px solid $window_thumbnail_chrome_border;
   padding: $base_padding $base_padding * 2;
-  font-weight: bold;
-  @include fontsize($base_font_size + 1);
 }
 
 // Close button
 .window-close {
-  background-color: $selected_bg_color;
+  background-color: $window_thumbnail_chrome_color;
-  color: $selected_fg_color;
+  color: $osd_bg_color;
-  border: none;
+  border: 1px solid $window_thumbnail_chrome_border;
   border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
   padding: $window_close_button_padding;
   height: $window_close_button_size;
   width: $window_close_button_size;
   box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
 
+  & StIcon { icon-size: 24px; }
+
   &:hover {
-    background-color: lighten($selected_bg_color, 5%);
+    background-color: lighten($window_thumbnail_chrome_color, 5%);
   }
 
   &:active {
-    background-color: darken($selected_bg_color, 5%);
+    background-color: darken($window_thumbnail_chrome_color, 5%);
   }
 }

data/theme/window-close-24-symbolic.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 6.3499999 6.3500002"
+   version="1.1"
+   id="svg59656"
+   sodipodi:docname="window-close-24-symbolic.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     id="namedview9"
+     showgrid="true"
+     inkscape:zoom="2.4967968"
+     inkscape:cx="-99.100336"
+     inkscape:cy="-39.762752"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg59656">
+    <inkscape:grid
+       type="xygrid"
+       id="grid901" />
+  </sodipodi:namedview>
+  <defs
+     id="defs59650" />
+  <metadata
+     id="metadata59653">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g905">
+    <rect
+       style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:0.264583;marker:none;enable-background:new"
+       id="rect10837-5"
+       y="0"
+       x="0"
+       height="6.3499999"
+       width="6.3499999" />
+    <path
+       sodipodi:nodetypes="ccsccccccccccccccccccccccc"
+       style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale Mono';-inkscape-font-specification:'Andale Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#241f31;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.471289;marker:none;enable-background:new"
+       id="path10839-9"
+       inkscape:connector-curvature="0"
+       d="m 1.5875,1.5875 h 0.2645834 c 0.00274,-3.18e-5 0.0055,-1.217e-4 0.00827,0 0.067456,0.00296 0.1349031,0.03402 0.181901,0.082682 L 3.1758323,2.8029916 4.2155899,1.670182 c 0.07028,-0.060986 0.118182,-0.08083 0.181901,-0.082682 h 0.2645834 v 0.264583 c 0,0.075795 -0.00909,0.1456928 -0.066146,0.1984375 L 3.5644391,3.1833301 4.688086,4.3077474 C 4.737877,4.3575344 4.762498,4.4277227 4.7625,4.4979167 V 4.7625 H 4.4979167 C 4.4277225,4.7624974 4.3575325,4.7378673 4.3077475,4.6880859 L 3.1758323,3.5554004 2.0422526,4.688086 C 1.9924676,4.737878 1.9222747,4.7625 1.8520834,4.7625 H 1.5875 V 4.4979168 c -8e-7,-0.070191 0.024622,-0.1403827 0.074414,-0.1901693 L 2.7954938,3.1833301 1.6619141,2.0505208 C 1.6061553,1.9990249 1.581703,1.9263651 1.5875,1.8520833 Z" />
+  </g>
+</svg>

js/ui/windowPreview.js

@@ -354,7 +354,7 @@ var WindowPreview = GObject.registerClass({
         this._closeButton = new St.Button({
             visible: false,
             style_class: 'window-close',
-            child: new St.Icon({ icon_name: 'window-close-symbolic' }),
+            child: new St.Icon({ icon_name: 'window-close-24-symbolic' }),
         });
         this._closeButton.add_constraint(new Clutter.BindConstraint({
             source: this._windowContainer,