style: Stylesheet updates for GNOME 42

- updated switch assets
 - new high contrast assets
- use non-hardcoded bg color for dash
- updated palette colors
 - add missing color definitions to hc
- increase radii of many elements
- update search entry style
- align icon better in search entry
- restyle panel popovers without arrow and add drop shadow
- used theme colors in panel
- fix some things with popover labels
- new slider style
- some light variant fixes
- fixes to the calendar popover
 - day with event styles
 - better calendar-today.svg and dark variant
 - shorten calendary weekday header
 - saner padding
- overhaul popover menu style
- minor fixes to app grid and alt-tab switch
- updated looking glass styles
- nm-dialog adjustments
- search results adjustments
- expand out panel button hover styles
- button drawing adjustments
- adjust notifications area
- update on-screen keyboard style
 - better keyboard symbolic icon assets
 - change keyboard symbolic icons to 24px
 - improved keyboard style
 - gave the keyboard word suggestions some styles
- less obnoxious saner media control buttons
- cleaned up the css for the dash
- reworked the alt-tab switcher style
- sync style on workspace switcher
- adjusted dialog button style drawing
- popover submenu redrawing adjustement

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

data/gnome-shell-theme.gresource.xml

@@ -2,6 +2,7 @@
 <gresources>
   <gresource prefix="/org/gnome/shell/theme">
     <file>calendar-today.svg</file>
+    <file>calendar-today-dark.svg</file>
     <file alias="icons/scalable/status/carousel-arrow-next-24-symbolic.svg">carousel-arrow-next-24-symbolic.svg</file>
     <file alias="icons/scalable/status/carousel-arrow-back-24-symbolic.svg">carousel-arrow-back-24-symbolic.svg</file>
     <file>checkbox-focused.svg</file>

data/theme/calendar-today-dark.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><circle style="color:#000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;fill:#fff;fill-opacity:.858277;fill-rule:nonzero;stroke:none;stroke-width:.999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" cx="16" cy="28" r="2"/></svg>

data/theme/calendar-today.svg

@@ -1,178 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><circle style="color:#000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;fill:#242424;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" cx="16" cy="28" r="2"/></svg>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<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:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="24"
-   height="24"
-   id="svg10621"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="calendar-today.svg">
-  <defs
-     id="defs10623">
-    <radialGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient34508-1-3"
-       id="radialGradient99561-1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
-       cx="51"
-       cy="30"
-       fx="51"
-       fy="30"
-       r="42" />
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient34508-1-3">
-      <stop
-         style="stop-color:#ffffff;stop-opacity:1;"
-         offset="0"
-         id="stop34510-1-9" />
-      <stop
-         style="stop-color:#ffffff;stop-opacity:0;"
-         offset="1"
-         id="stop34512-4-5" />
-    </linearGradient>
-    <radialGradient
-       r="42"
-       fy="30"
-       fx="51"
-       cy="30"
-       cx="51"
-       gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
-       gradientUnits="userSpaceOnUse"
-       id="radialGradient10592"
-       xlink:href="#linearGradient34508-1-3"
-       inkscape:collect="always" />
-    <radialGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient34508-1-3"
-       id="radialGradient3770"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
-       cx="51"
-       cy="30"
-       fx="51"
-       fy="30"
-       r="42" />
-    <radialGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient34508-1-3"
-       id="radialGradient3001"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
-       cx="51"
-       cy="30"
-       fx="51"
-       fy="30"
-       r="42" />
-    <radialGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient34508-1-3"
-       id="radialGradient3007"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
-       cx="51"
-       cy="30"
-       fx="51"
-       fy="30"
-       r="42" />
-    <radialGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient34508-1-3"
-       id="radialGradient3067"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
-       cx="51"
-       cy="30"
-       fx="51"
-       fy="30"
-       r="42" />
-    <radialGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient34508-1-3"
-       id="radialGradient3072"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
-       cx="51"
-       cy="30"
-       fx="51"
-       fy="30"
-       r="42" />
-    <radialGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient34508-1-3"
-       id="radialGradient2997"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
-       cx="51"
-       cy="30"
-       fx="51"
-       fy="30"
-       r="42" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#000000"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="8"
-     inkscape:cx="-23.537329"
-     inkscape:cy="-31.442864"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="2133"
-     inkscape:window-height="1241"
-     inkscape:window-x="238"
-     inkscape:window-y="88"
-     inkscape:window-maximized="0"
-     borderlayer="true"
-     inkscape:showpageshadow="false">
-    <inkscape:grid
-       type="xygrid"
-       id="grid3109"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata10626">
-    <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
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-469.08263,-537.99307)">
-    <circle
-       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:0.23756906;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       id="path7305"
-       cx="481.57138"
-       cy="559.4649"
-       r="1.5" />
-  </g>
-</svg>

data/theme/gnome-shell-sass/_colors.scss

@@ -1,34 +1,37 @@
 // When color definition differs for dark and light variant,
-// it gets @if ed depending on $variant
+// it gets @if-ed depending on $variant
 
-$base_color: if($variant == 'light', #fff, lighten(desaturate(#241f31, 20%), 2%));
+$base_color: if($variant == 'light', #fff, lighten(desaturate(#242424, 20%), 2%));
-$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
+$bg_color: if($variant == 'light', #f6f5f4, #242424);
-$fg_color: if($variant == 'light', #2e3436, #eeeeec);
+$fg_color: if($variant == 'light', transparentize(black, .2), white);
 
 $selected_fg_color: #fff;
-$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
+$selected_bg_color: if($variant == 'light', #3584e4, #1c71d8);
 $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
-$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%));
+
-$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93));
+$borders_color: if($variant == 'light', darken($bg_color, 12%), darken($bg_color, 3%));
+$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 2%));
+
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
 $top_hilight: $borders_edge;
 
-$warning_color: #f57900;
+$warning_color: if($variant == 'light', #e5a50a, #f5c211);;
-$error_color: #ff8080;
+$error_color: if($variant == 'light', #e01b24, #c01c28);
-$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
+$success_color: if($variant == 'light', #2ec27e, #26a269);
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
 
-$osd_fg_color: #eeeeec;
+$osd_fg_color: white;
-$osd_text_color: white;
+$osd_bg_color: transparentize(desaturate(#242424, 100%),0.04);
-$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
-$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
+$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%),  mix($osd_fg_color, $osd_bg_color, 70%));
 $osd_borders_color: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize(white, 0.84);
+$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
 
 $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
-$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color
+
+// overview background color
+$system_bg_color: if($variant == 'light', darken(desaturate($bg_color, 100%), 35%), darken($bg_color, 2%)); 
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);

data/theme/gnome-shell-sass/_common.scss

@@ -33,21 +33,21 @@ $base_spacing: 6px;
 // border radii
 $base_border_radius: 8px;
 
-$modal_radius:$base_border_radius * 2;
+// radii of things that display over other things, e.g. popovers
+$modal_radius: $base_border_radius*2; // 24px
 
 // non-standard colors
 $bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 4%));
 // $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
 
-// hover
+// derived hover colors
-$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%));
+$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 7%));
-$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%));
+$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%));
-$hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%));
 
-// active
+// derived active colors
-$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%));
+$active_bg_color: darken($bubble_buttons_color,if($variant=='light', 9%, 2%));
 $active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
-$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%));
 
 // fonts
 $base_font_size: 11;
@@ -76,9 +76,9 @@ stage {
 %osd_panel {
   color: $osd_fg_color;
   background-color: $osd_bg_color;
-  //border: 1px solid $osd_outer_borders_color;
+  border: 1px solid $osd_outer_borders_color;
-  border-radius: $base_border_radius * 2 + 4px;
+  border-radius: $modal_radius;
-  padding: $base_padding * 2;
+  padding: $base_padding*2;
 }
 
 // Overview panels
@@ -90,23 +90,16 @@ stage {
 
 // icon tiles
 %icon_tile {
-  border-radius: $base_border_radius + 4px;
+  border-radius: $base_border_radius * 2; // 16px
   padding: $base_padding;
   border: 2px solid transparent;
   transition-duration: 100ms;
   text-align: center;
 }
 
-// dialogs
-%bubble_panel {
-  color: $fg_color;
-  background-color: $bg_color;
-  border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color);
-}
-
 // button styling
 %button {
-  border-radius: $base_border_radius;
+  border-radius: $base_border_radius - 2px; // 6px
   border-style: solid;
   border-width: 1px;
   min-height: 22px;
@@ -119,41 +112,45 @@ stage {
   &:active, &:checked { @include button(active);}
 }
 
-// buttons in dialogs
+// dialogs
-%bubble_button {
+%bubble_panel {
-  @include button(normal, $shadow: none);
+  color: $fg_color;
-  padding: $base_padding * 2;
+  background-color: $bg_color;
-  border-style: solid;
+  border-radius: $base_border_radius*1.25 + 1px;
-  border-width: 1px;
+  border: 1px solid $borders_edge;
-  border-left-width: 0;
+}
-  border-bottom-width: 0;
 
+// buttons in dialogs/notifications
+// styled to have no shadow and be lighter in color
+$bubble_button_radius:$base_border_radius*1.25;
+
+%bubble_button {
+  padding: $base_padding * 2;
+  border: 0 solid $bg_color !important; 
+  border-radius: 0;
+  border-right-width: 1px !important; 
+
+  @include button(normal, $bubble_buttons_color, $shadow: none);
   &:insensitive { @include button(insensitive, $shadow: none); }
   &:focus { @include button(focus, $shadow: none); }
-  &:hover { @include button(hover, $shadow: none); }
+  &:hover { @include button(hover, $bubble_buttons_color, $shadow: none); }
-  &:active { @include button(active, $shadow: none); }
+  &:active { @include button(active, $bubble_buttons_color, $shadow: none); }
-
+  
-  // radius is 2 pixel less to fit in bubble
   &:first-child {
-    border-radius: 0 0 0 $modal_radius - 2px;
+    border-radius: 0 0 0 $bubble_button_radius; 
   }
 
   &:last-child {
-    border-right-width: 0;
+    border-radius: 0 0 $bubble_button_radius 0;
-    border-radius: 0 0 $modal_radius - 2px 0;
+    border-right-width: 0 !important;
-  }
-
-  &:first-child:last-child {
-    border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px;
   }
 }
 
-
+// styling for elements within popovers that look like notifications
-// notification styling
 @mixin notification_bubble($flat: false) {
-  border-width: 1px;
+  border-width: 0px;
   border-style: solid;
-  border-radius: $base_border_radius + 2px;
+  border-radius: $base_border_radius;
   margin: $base_margin;
 
   @if $flat {

data/theme/gnome-shell-sass/_drawing.scss

@@ -138,37 +138,38 @@
   @if $t==normal {
     color: $tc;
     background-color: lighten($c, 3%);
-    border-color: draw_border_color($c);
+    border-color: lighten($c, 3%);
     @include draw_shadows($button_shadow);
     // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-    text-shadow: 0 1px $text_shadow_color;
+    text-shadow: none;
-    icon-shadow: 0 1px $text_shadow_color;
+    icon-shadow: none;
   }
 
   // focused button
   @if $t==focus {
     color: $tc;
-    text-shadow: 0 1px $text_shadow_color;
+    background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
-    icon-shadow: 0 1px $text_shadow_color;
+    // border-color: lighten($c, 3%);
     box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
-    //border-color: $selected_bg_color;
+    text-shadow: none;
+    icon-shadow: none;
   }
 
   // hover button
   @else if $t==hover {
     color: $tc;
     background-color: lighten($c, if($variant == 'light', 8%, 5%));
-    border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
+    border-color: lighten($c, if($variant == 'light', 8%, 5%));
     @include draw_shadows($button_shadow);
-    text-shadow: 0 1px $text_shadow_color;
+    text-shadow: none;
-    icon-shadow: 0 1px $text_shadow_color;
+    icon-shadow: none;
   }
 
   // active button
   @else if $t==active {
     color: $tc;
     background-color: darken($c,3%);
-    border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
+    border-color: darken($c,3%);
     text-shadow: none;
     icon-shadow: none;
     box-shadow: none;
@@ -177,7 +178,7 @@
   // insensitive button
   @else if $t==insensitive {
     color: $insensitive_fg_color;
-    border-color: $insensitive_borders_color;
+    border-color: $insensitive_bg_color;
     background-color: $insensitive_bg_color;
     box-shadow: none;
     text-shadow: none;
@@ -196,7 +197,7 @@
 }
 
 // overview icons
-@mixin overview-icon($color) {
+@mixin overview_icon($color) {
   .overview-icon {
     @extend %icon_tile;
     color: $color;
@@ -223,6 +224,7 @@
     }
   }
 
+  &:focus,
   &:active,
   &:checked {
     .overview-icon {

data/theme/gnome-shell-sass/_high-contrast-colors.scss

@@ -24,6 +24,8 @@ $osd_fg_color: #eeeeec;
 $osd_bg_color: #2e3436;
 $osd_borders_color: rgba(0,0,0, 0.7);
 $osd_outer_borders_color: rgba(255,255,255, 0.1);
+$osd_insensitive_bg_color: mix($osd_fg_color, $osd_bg_color, 10%);
+$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%),  mix($osd_fg_color, $osd_bg_color, 70%));
 
 $shadow_color: rgba(0,0,0, 0.1);
 $system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color

data/theme/gnome-shell-sass/widgets/_app-grid.scss

@@ -20,7 +20,7 @@ $app_grid_fg_color: #fff;
 
 // Icon tiles in the app grid
 .app-well-app,
-%app-well-app {
+%app_well_app {
   @include overview-icon($app_grid_fg_color);
 
   .overview-icon.overview-icon-with-label {
@@ -35,12 +35,12 @@ $app_grid_fg_color: #fff;
 /* App Folders */
 .app-well-app.app-folder {
   background-color: $dash_background_color;
-  border-radius: $base_border_radius + 4px; // same as %icon_tile
+  border-radius: $base_border_radius * 2; // same as %icon_tile
 }
 
 // expanded folder
 .app-folder-dialog { //style like the dash
-  border-radius: $modal_radius * 1.5;
+  border-radius: 48px;
   background-color: $dash_background_color;
   padding: 12px 0px 12px 0px;
 
@@ -51,7 +51,7 @@ $app_grid_fg_color: #fff;
     & .folder-name-label,
     & .folder-name-entry {
       font-size: 18pt;
-      font-weight: 800;
+      font-weight: 1000;
     }
 
     & .folder-name-entry { width: 300px }
@@ -60,14 +60,17 @@ $app_grid_fg_color: #fff;
     & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
 
     & .edit-folder-button {
-      @extend %button;
+      @include button(undecorated, $shadow: none);
-
       padding: 0;
       width: 36px;
       height: 36px;
       border-radius: 18px;
 
-      & > StIcon { icon-size: 16px }
+      &:focus {@include button(focus);}
+      &:hover {@include button(hover);}
+      &:active {@include button(active);}
+
+      & > StIcon { icon-size: $base_icon_size }
     }
   }
 
@@ -84,8 +87,9 @@ $app_grid_fg_color: #fff;
     margin-bottom: 18px;
   }
 }
+
 .app-folder-dialog-container {
-  padding: 12px;
+  padding: $base_padding*2;
   width: 620px;
   height: 620px;
 }
@@ -96,7 +100,7 @@ $app_grid_fg_color: #fff;
   width: 5px;
   border-radius:5px;
   background-color: $osd_fg_color;
-  margin-bottom: 1px;
+  margin-bottom: 2px;
 }
 
 // Rename popup for app folders
@@ -148,7 +152,7 @@ $app_grid_fg_color: #fff;
     background-gradient-start: rgba(255, 255, 255, 0.05);
     background-gradient-end: transparent;
     background-gradient-direction: horizontal;
-    border-radius: 15px 0px 0px 15px;
+    border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5;
   }
 
   &.previous:ltr,
@@ -156,7 +160,7 @@ $app_grid_fg_color: #fff;
     background-gradient-start: transparent;
     background-gradient-end: rgba(255, 255, 255, 0.05);
     background-gradient-direction: horizontal;
-    border-radius: 0px 15px 15px 0px;
+    border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px;
   }
 }
 

data/theme/gnome-shell-sass/widgets/_calendar.scss

@@ -1,14 +1,5 @@
 /* Date/Time Menu */
 
-.clock-display-box {
-  spacing: 2px;
-
-  .clock {
-    padding-left: $base_padding * 2;
-    padding-right: $base_padding * 2;
-  }
-}
-
 // overall menu
 #calendarArea {
   padding:0;
@@ -17,11 +8,13 @@
 // Calendar menu side column
 .datemenu-calendar-column {
   spacing: $base_spacing;
-  border: 0 solid $bubble_borders_color;
+  border: none;
-  padding: 0 $base_padding * 2;
+  border-style: solid;
+  border-color: $borders_color;
+  padding: 0;
 
-  &:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
+  &:ltr {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
-  &:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
+  &:rtl {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
 
   .datemenu-displays-section {
   }
@@ -33,7 +26,7 @@
 
 .events-section-title {
   @include notification_bubble($flat: true);
-  color: desaturate(darken($fg_color,40%), 10%);
+  color: $insensitive_fg_color;
   font-weight: bold;
   padding: .4em;
 }
@@ -46,6 +39,7 @@
   // weekday label
   .day-label {
     @include fontsize($base_font_size+1);
+    color: $insensitive_fg_color;
     font-weight: bold;
   }
 
@@ -66,7 +60,6 @@
     color: lighten($fg_color,5%);
     font-weight: bold;
     padding: 8px 0;
-    &:focus {}
   }
 
   // prev/next month icons
@@ -79,24 +72,24 @@
     background-color: transparent;
     height: 32px;
     width: 32px;
-    border-radius: $base_border_radius;
+    border-radius: $base_border_radius - 2px;
-    &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
+    &:hover, &:focus { background-color: $hover_bg_color; }
     &:active { background-color: $active_bg_color; }
   }
 
-
   $calendar_day_size: 32px;
 
   .calendar-day-base {
     @include fontsize($base_font_size - 3);
     text-align: center;
-    width: $calendar_day_size;
-    height: $calendar_day_size;
     padding: 0;
     margin: 2px;
+    height: $calendar_day_size;
+    width: $calendar_day_size;
     border-radius: $calendar_day_size * 0.5 + 2px;
     border: 1px solid transparent; //avoid jumparound due to today
     font-feature-settings: "tnum";
+    
     &:hover, &:focus { background-color: $hover_bg_color; }
     &:active,&:selected {
       color: lighten($fg_color,10%);
@@ -105,9 +98,11 @@
 
     // day of week heading
     &.calendar-day-heading {
-      color: lighten($fg_color,10%);
+      color: $insensitive_fg_color;
-      margin-top: 1em;
+      font-weight: 1000;
-      @include fontsize($base_font_size - 4);
+      padding-top: $base_padding;
+      height: 16px !important; // force heading to be smaller height
+      @include fontsize($base_font_size - 2);
     }
   }
 
@@ -123,7 +118,8 @@
     border-left-width: 1px;
   }
 
-  .calendar-work-day {}
+  .calendar-work-day {
+  }
 
   .calendar-nonwork-day {
     color: $insensitive_fg_color;
@@ -131,37 +127,38 @@
 
   // Today
   .calendar-today {
-    font-weight: bold;
-    border: 1px solid transparent;
     background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    border: 1px solid transparent;
+    font-weight: bold;
+    color: $selected_fg_color !important;
 
     &:hover,&:focus {
       background-color:lighten($selected_bg_color, 3%);
-      color: $selected_fg_color;
+      color: inherit;
     }
 
     &:active,&:selected {
       background-color: $selected_bg_color;
-      color: $selected_fg_color;
+      color: inherit;
 
       &:hover,&:focus {
         background-color:lighten($selected_bg_color, 3%);
-        color: $selected_fg_color;
+        color: inherit;
       }
     }
   }
 
   .calendar-day-with-events {
-    background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
+    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today.svg"), url("resource:///org/gnome/shell/theme/calendar-today-dark.svg"));
+    background-size: contain;
     &.calendar-work-day {
-       color: lighten($fg_color,10%);
+      color: lighten($fg_color,10%);
-       font-weight: bold;
+      font-weight: bold;
     }
   }
 
   .calendar-other-month-day {
-    color: transparentize($fg_color ,0.5);
+    color: transparentize($fg_color ,0.5) !important;
   }
 
   .calendar-week-number {
@@ -190,13 +187,13 @@
   }
 
   .events-title {
-    color: desaturate(darken($fg_color,40%), 10%);
+    color: $insensitive_fg_color;
     font-weight: bold;
     margin-bottom: $base_margin;
   }
 
   .event-time {
-    color: darken($fg_color,20%);
+    color: $insensitive_fg_color;
     font-feature-settings: "tnum";
     @include fontsize($base_font_size - 1);
   }
@@ -214,7 +211,7 @@
 
   // title
   .world-clocks-header {
-    color: desaturate(darken($fg_color,40%), 10%);
+    color: $insensitive_fg_color;
     font-weight: bold;
   }
 
@@ -238,7 +235,7 @@
 
   // timezone offset label
   .world-clocks-timezone {
-    color: darken($fg_color,20%);
+    color: $insensitive_fg_color;
     font-feature-settings: "tnum";
     @include fontsize($base_font_size - 1);
   }
@@ -258,7 +255,7 @@
   }
 
   .weather-header {
-    color: desaturate(darken($fg_color,40%), 10%);
+    color: $insensitive_fg_color;
     font-weight: bold;
 
     &.location {

data/theme/gnome-shell-sass/widgets/_dash.scss

@@ -1,18 +1,17 @@
 /* Dash */
 
-$dash_background_color: #3b3b3b;
+$dash_background_color: lighten($system_bg_color, 5%);
 $dash_placeholder_size: 32px;
 $dash_padding: $base_padding + 4px; // 10px
 $dash_spacing: $base_padding / 4;
-
 $dash_bottom_margin: $base_margin * 4;
+$dash_border_radius: $modal_radius + 8px;
 
-$dash_border_radius: $modal_radius * 1.5;
+// container for the dash
-
 #dash {
   @include fontsize($base_font_size - 2);
-  margin-top: $base_spacing * 3;
+  margin-top: $base_margin * 3;
-  padding: 0 $dash_padding;
+  padding: $dash_padding;
 
   .placeholder {
     // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@@ -26,27 +25,51 @@ $dash_border_radius: $modal_radius * 1.5;
     height: $dash_placeholder_size;
   }
 
+  // icon on the dash
   .overview-icon {
-    padding: $dash_padding / 2;
+    padding: $base_padding+2px;
+  }
+
+  // Running app indicator (also shown in app grid)
+  .app-well-app-running-dot {
+    height: 5px;
+    width: 5px;
+    border-radius:5px;
+    background-color: $osd_fg_color;
+    margin-bottom: 12px;
   }
 }
 
+// background of the dash behind app icons
 .dash-background {
   background-color: $dash_background_color;
-  margin-bottom: $dash_bottom_margin;
-  padding: $dash_padding;
   border-radius: $dash_border_radius;
+  margin-bottom: 0; // this keeps things vertically centered
+  padding: $dash_padding;
 }
 
-// Dash Items
+// items on the dash
-.dash-item-container .app-well-app, .show-apps {
+.dash-item-container {
-  padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin;
+
+  // each app item on the dash
+  .app-well-app {
+    padding:0;
+    margin: 2px;
+  }
+
+  // show apps button
+  .show-apps {
+    @include overview_icon($osd_fg_color);
+    margin: 2px;
+    padding: 0;
+  }
 }
 
+// separator between favourites and running apps
 .dash-separator {
   width: 1px;
-  margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin;
+  margin: 0 $base_margin*2;
-  background-color: transparentize($osd_fg_color,0.7);
+  background-color: transparentize($borders_color,0.5);
 }
 
 // OSD Tooltip
@@ -56,18 +79,5 @@ $dash_border_radius: $modal_radius * 1.5;
   border-radius: 99px;
   padding: $base_padding $base_padding * 2;
   text-align: center;
-  -y-offset: $base_margin * 3; // distance from the dash edge
+  -y-offset: $base_margin * 2; // distance from the dash edge
-}
-
-// Show apps button
-.show-apps {
-  @include overview-icon($osd_fg_color);
-
-  &:focus,
-  &:checked {
-    .overview-icon {
-      background-color: transparentize($osd_bg_color,0.5);
-      color: $fg_color;
-    }
-  }
 }

data/theme/gnome-shell-sass/widgets/_dialogs.scss

@@ -5,7 +5,6 @@
 }
 
 .modal-dialog {
-  border-radius: $modal_radius;
   @extend %bubble_panel;
 
   .modal-dialog-content-box {

data/theme/gnome-shell-sass/widgets/_keyboard.scss

@@ -1,15 +1,16 @@
 /* On-screen Keyboard */
 
 $key_size: 1.2em;
-$key_border_radius: $base_border_radius + 3px;
+$key_border_radius: $base_border_radius + 4px; // 12px
-$key_bg_color:  $bg_color;
+$key_bg_color:  darken($osd_fg_color, 70%);
 // $default_key_bg_color: darken($key_bg_color, 4%);
-$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
+$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
 
 
 // draw keys using button function
 #keyboard {
-  background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
+  // background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
+  background-color: $osd_bg_color;
   box-shadow: inset 0 1px 0 0 $osd_outer_borders_color;
 
   .page-indicator {
@@ -31,13 +32,14 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 // the keys
 .keyboard-key {
 
-  @include button(normal, $c:$key_bg_color);
+  @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
 
   &:focus { @include button(focus);}
-  &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
+  &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
-  &:active { @include button(active, $c: $key_bg_color); }
+  &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
 
   @include fontsize($base_font_size + 5);
+  font-weight: bold;
   min-height: $key_size;
   min-width: $key_size;
   border-width: 1px;
@@ -52,42 +54,56 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 
   // non-character keys
   &.default-key {
-    @include button(normal, $c:$default_key_bg_color);
+    @include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
-    &:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
+    &:hover, &:checked {@include button(hover, $c: $default_key_bg_color, $tc:$osd_fg_color);}
-    &:active { @include button(active, $c: $default_key_bg_color);}
+    &:active { @include button(active, $c: $default_key_bg_color, $tc:$osd_fg_color);}
+    border-radius: $key_border_radius;
   }
 
   // enter key is suggested-action
   &.enter-key {
     @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-    &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
+    &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%), $tc:$selected_fg_color);}
-    &:active {@include button(active, $c: darken($selected_bg_color, 2%));}
+    &:active {@include button(active, $c: darken($selected_bg_color, 2%), $tc:$selected_fg_color);}
+    border-radius: $key_border_radius;
+    color: $osd_fg_color;
   }
 
-  &.shift-key-uppercase { color: $selected_bg_color }
+  &.shift-key-lowercase {}
+  
+  // pressed shift has different style
+  &.shift-key-uppercase { 
+    background-color: lighten($key_bg_color, 20%);
+    color: $osd_bg_color;
+    &:hover {
+      background-color: lighten($key_bg_color, 25%);
+      color: lighten($osd_bg_color, 5%);
+    }
+  }
 
-  StIcon { icon-size: 1.125em; }
+  // size of icons on keys
+  StIcon { icon-size: 24px; }
 }
 
 // long press on a key popup
 .keyboard-subkeys {
-  color: $osd_fg_color;
+  -arrow-border-radius: $base_border_radius*2;
-  -arrow-border-radius: $modal_radius;
   -arrow-background-color: $osd_bg_color;
   -arrow-border-width: 1px;
   -arrow-border-color: lighten($osd_bg_color, 9%);
   -arrow-base: 20px;
   -arrow-rise: 10px;
   -boxpointer-gap: $base_spacing;
+  padding: $base_padding;
 
   .keyboard-key {
-    @include button(normal, $c:$key_bg_color);
+    @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
 
     &:focus { @include button(focus);}
-    &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
+    &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
-    &:active { @include button(active, $c: $key_bg_color); }
+    &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
 
-    border-radius:$base_border_radius;
+    border-radius:$key_border_radius;
   }
 }
 
@@ -112,4 +128,20 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
   @include fontsize($base_font_size + 3);
   spacing: 12px;
   min-height: 20pt;
+  padding: $base_padding*2;
+  color: $osd_fg_color;
+
+  // each suggestion
+  StButton {
+    margin: 0 3px;
+    min-width: 32px;
+    border-radius: $base_border_radius - 2px;
+    padding: $base_padding $base_padding*3;
+
+    @include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color);
+
+    &:focus { @include button(focus);}
+    &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
+    &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
+  }
 }

data/theme/gnome-shell-sass/widgets/_looking-glass.scss

@@ -1,46 +1,56 @@
 /* Looking Glass */
 
-$text_fg_color: #ccc;
-
 // Dialog
 #LookingGlassDialog {
   background-color: $osd_bg_color;
-  spacing: $base_spacing;
+  border-radius: 0 0 $base_border_radius $base_border_radius;
-  padding: 4px;
+  border-top-width: 0;
-  border: 1px solid transparentize($osd_fg_color, 0.8);
+  border: 1px solid $osd_outer_borders_color;
-  border-radius: $base_border_radius;
   color: $osd_fg_color;
+  padding: $base_padding;
+  spacing: $base_spacing;
 
   & > #Toolbar {
     border: none;
-    border-radius: $base_border_radius;
+    padding: $base_padding;
-    background-color: $osd_bg_color;
+    border-radius: 0;
+    background-color: transparent;
+  }
+
+  .labels { 
+    spacing: $base_spacing;
   }
 
-  .labels { spacing: $base_spacing; }
   .notebook-tab {
-    -natural-hpadding: $base_padding * 2;
+    -natural-hpadding: $base_padding*2;
-    -minimum-hpadding: 6px;
+    -minimum-hpadding: $base_padding*2;
+
     font-weight: bold;
+    padding: $base_padding $base_padding*2;
     color: darken($osd_fg_color, 15%);
     transition-duration: 100ms;
-    padding-left: .3em;
+    box-shadow:none;
-    padding-right: .3em;
+    border:none;
-    border-bottom-width: 2px;
+    border-radius: $base_border_radius - 2px;
+    background-color: transparent;
+
     &:hover {
       color: $osd_fg_color;
+      background-color: transparentize($osd_fg_color, 0.95);
     }
+
     &:selected {
-      border-bottom-width: 2px;
-      box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color, 5%);
       color: $osd_fg_color;
+      background-color: transparentize($osd_fg_color, 0.9);
     }
   }
-  StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; }
+
-  StBoxLayout#ResultsArea { spacing: $base_spacing; }
+  StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; padding: $base_padding; }
+  StBoxLayout#ResultsArea { spacing: $base_spacing; padding: $base_padding; }
 }
 
 .lg-dialog {
+
   StEntry {
     background-color: transparentize(lighten($osd_bg_color, 5%), 0.4);
     color: $osd_fg_color;
@@ -49,55 +59,55 @@ $text_fg_color: #ccc;
     selection-background-color: $selected_bg_color;
     selected-color: $selected_fg_color;
   }
+
   .shell-link {
     color: $link_color;
     &:hover { color: lighten($link_color, 10%); }
     &:active { color: darken($link_color, 10%); }
    }
+
   .actor-link {
-    color: $text_fg_color;
+    color: $insensitive_fg_color;
-    &:hover { color: lighten($text_fg_color, 20%); }
+    &:hover { color: lighten($insensitive_fg_color, 20%); }
-    &:active { color: darken($text_fg_color, 20%); }
+    &:active { color: darken($insensitive_fg_color, 20%); }
    }
 }
 
 .lg-completions-text {
-    font-size: .9em;
+  font-size: .9em;
-    font-style: italic;
+  font-style: italic;
 }
 
 .lg-obj-inspector-title {
-    spacing: $base_spacing;
+  spacing: $base_spacing;
 }
 
 .lg-obj-inspector-button {
-    border: 1px solid $osd_borders_color;
+  border: 1px solid $osd_borders_color;
-    padding: 4px;
+  padding: 4px;
-    border-radius: $base_border_radius;
+  border-radius: $base_border_radius;
-    &:hover { border: 1px solid #ffffff; }
+  &:hover { border: 1px solid #ffffff; }
 }
 
 // Extensions
-#lookingGlassExtensions { padding: 4px; }
+#lookingGlassExtensions { padding: $base_padding; }
 
 .lg-extensions-list {
-    padding: 4px;
+  padding: $base_padding;
-    spacing: 6px;
+  spacing: $base_spacing;
 }
 
 .lg-extension {
-    border: 1px solid lighten($osd_borders_color, 5%);
+  padding: $base_padding*2;
-    background-color: lighten($osd_bg_color, 5%);
+  @include notification_bubble;
-    border-radius: $base_border_radius;
-    padding: 4px;
 }
 
 .lg-extension-name {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .lg-extension-meta {
-    spacing: 6px;
+  spacing: $base_spacing;
 }
 
 // Inspector
@@ -105,19 +115,20 @@ $text_fg_color: #ccc;
   background: $osd_bg_color;
   border: 1px solid $osd_borders_color;
   border-radius: $base_border_radius;
-  padding: 6px;
+  padding: $base_padding;
 }
 
 .lg-debug-flag-button {
   StLabel { padding: $base_spacing, 2 * $base_spacing; }
 
-  color: $text_fg_color;
+  color: $fg_color;
-  &:hover { color: lighten($text_fg_color, 20%); }
+  &:hover { color: lighten($fg_color, 20%); }
-  &:active { color: darken($text_fg_color, 20%); }
+  &:active { color: darken($fg_color, 20%); }
 }
 
 .lg-debug-flags-header {
   padding-top: 2 * $base_spacing;
   font-size: 120%;
   font-weight: bold;
-}
+  padding: $base_padding;
+}

data/theme/gnome-shell-sass/widgets/_message-list.scss

@@ -3,15 +3,32 @@
 
 // main list
 .message-list {
-  width: 31.5em;
+  width: 32em;
-  padding: 0 $base_padding * 2;
+  padding: 0;
 
-  .message-list-placeholder { spacing: 12px; }
+  .message-list-placeholder { 
+    font-weight:1000; 
+    font-size: 18pt;
+    color: transparentize($fg_color, 0.7);
+    spacing: 12px;
+
+    // icon size and color
+    > StIcon {
+      icon-size: $base_icon_size*4; // 32px
+      -st-icon-style: symbolic;
+    }
+  }
 }
 
+
 .message-list-sections {
   spacing: $base_spacing;
-  margin: 0 $base_margin * 4; // to account for scrollbar
+  margin: 0; 
+  padding-bottom: $base_padding;
+
+  // to account for scrollbar
+  &:ltr {margin-right: $base_margin * 4; }
+  &:rtl {margin-left: $base_margin * 4;}
 }
 
 .message-list-section,
@@ -21,10 +38,10 @@
 
 // do-not-disturb + clear button
 .message-list-controls {
-  margin: ($base_margin * 2) ($base_margin * 4) 0;
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
-  padding: $base_margin;
+  padding: $base_padding;
-  spacing: $base_spacing * 2;
+  margin: 0;
+  spacing: $base_spacing;
 
   .dnd-button {
     // We need this because the focus outline isn't inset like for the buttons
@@ -32,7 +49,7 @@
     // its color when focusing.
     border-width: 2px;
     border-color: transparent;
-    border-radius: 99px;
+    border-radius: 32px;
     border-style: solid;
 
     &:focus {
@@ -47,10 +64,11 @@
 
   // icon container
   .message-icon-bin {
-    padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
+    padding: ($base_padding * 3);
+    padding-right:$base_padding;
 
     &:rtl {
-      padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
+      padding-right:$base_padding;
     }
 
     // icon size and color
@@ -68,13 +86,16 @@
 
   // content
   .message-content {
-    padding: $base_padding + $base_margin * 2;
     spacing: 4px;
+    padding: ($base_padding*1.5);
+    margin-bottom: $base_margin*2;
   }
 
   // title
   .message-title {
     font-weight: bold;
+    /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
+    padding-top: 0.57em;
   }
 
   // secondary container in title box
@@ -95,9 +116,17 @@
 
   // close button
   .message-close-button {
-    color: lighten($fg_color, 15%);
+    color: $fg_color;
-    &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
+    background-color: transparentize($fg_color, 0.9);
-    &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
+    border-radius: 99px;
+    padding: $base_padding;
+    margin: 0;
+    &:hover { 
+      background-color: transparentize($fg_color, 0.8);
+    }
+    &:active {
+      background-color: transparentize($fg_color, 0.9);
+    }
   }
 
   // body
@@ -113,30 +142,32 @@
 
 /* Media Controls */
 .message-media-control {
-  padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px
+  padding: 0 $base_padding*2;
-  color: darken($fg_color, 15%);
+  margin: $base_padding*2 0;
+  border-radius: $base_border_radius;
+  color: $fg_color;
 
-  // uses $hover_bg_color since the media controls are in a notification_bubble
+  // colors are lightened since the media controls are in a notification_bubble
   &:hover {
     background-color: lighten($hover_bg_color, 5%);
     color: $fg_color;
   }
 
   &:active { 
-    background-color: darken($hover_bg_color, 2%);
+    background-color: lighten($active_bg_color, 5%);
     color: $fg_color;
   }
 
-  &:insensitive { color: darken($fg_color,40%); }
+  &:insensitive { color: lighten($insensitive_fg_color, 5%); }
   
   // fix border-radius for last button
-  &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
+  &:last-child:ltr { margin-right: $base_margin*3; }
-  &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
+  &:last-child:rtl { margin-left: $base_margin*3; }
 }
 
 // album-art
 .media-message-cover-icon {
-  icon-size: $base_icon_size*2 !important; // 48px
+  icon-size: $base_icon_size*3 !important; // 48px
   border-radius: $base_border_radius;
 
   // when there is no artwork
@@ -145,6 +176,7 @@
     background-color: $bg_color;
     border: 1px solid transparent;
     border-radius: $base_border_radius;
-    icon-size: $base_icon_size * 2 !important;
+    icon-size: $base_icon_size * 2 !important; // 32px
+    padding: ($base_padding*2 + 2); // 16px
   }
 }

data/theme/gnome-shell-sass/widgets/_network-dialog.scss

@@ -23,27 +23,50 @@
 .nm-dialog-header {
   font-weight: bold;
 }
+.nm-dialog-subheader {
+  color: $insensitive_fg_color;
+}
+
 .nm-dialog-header-icon {
   icon-size: $base_icon_size * 2;
 }
 .nm-dialog-header-hbox { spacing: 10px; }
 
+// airplane mode
+.nm-dialog-airplane-headline {
+  font-weight: bold;
+}
+
+.nm-dialog-airplane-text {
+  color: $insensitive_fg_color;
+}
+
 // list of networks
 .nm-dialog-scroll-view {
-  border: 1px solid $borders_color;
+  border: none;
-  padding:0;
+  padding:$base_padding;
+  border-radius: $base_border_radius;
   background-color: darken($bg_color, 3%);
 }
 
 // list item
 .nm-dialog-item {
   @include fontsize($base_font_size);
-  border-bottom: 1px solid $borders_color;
+  border: none;
   padding: $base_padding * 2;
   spacing: 0px;
+  text-shadow: none;
+  icon-shadow: none;
+
   &:selected {
     background-color: $selected_bg_color;
     color: $selected_fg_color;
+
+    border-radius: $base_border_radius - 3px;
+  }
+
+  &:hover {
+    background-color:$hover_bg_color;
   }
 }
 

data/theme/gnome-shell-sass/widgets/_notifications.scss

@@ -2,11 +2,18 @@
 
 $notification_banner_height: 64px;
 $notification_banner_width: 34em;
+$notification_banner_radius: $base_border_radius*1.5;
+
+// make radius of buttons fit in bubble corner (banner radius - width of focus ring)
+$notification_button_radius: ($notification_banner_radius - 2px);
 
 // Banner notifications
 .notification-banner {
   min-height: $notification_banner_height;
   width: $notification_banner_width;
+  box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
+  border-radius: $notification_banner_radius;
+  margin: $base_margin;
 
   .notification-actions {
     spacing: 0;

data/theme/gnome-shell-sass/widgets/_panel.scss

@@ -3,7 +3,7 @@
 
 $panel_corner_radius: $base_border_radius+1;
 $panel_bg_color: #000;
-$panel_fg_color: #ddd;
+$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
 $panel_height: 2.2em;
 $panel_transition_duration: 250ms; // same as the overview transition duration
 
@@ -53,8 +53,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
       }
     }
 
-    &:hover, &:active, &:overview, &:focus, &:checked {
+    &:active, &:overview, &:focus, &:checked {
-      box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
 
       // The clock display needs to have the background on .clock because
       // we want to exclude the do-not-disturb indicator from the background
@@ -62,7 +62,27 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
         box-shadow: none;
 
         .clock {
-          box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
+        }
+      }
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
+      &.clock-display {
+        box-shadow: none;
+        .clock {
+          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
+        }
+      }
+    }
+    
+    &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
+      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
+      &.clock-display {
+        box-shadow: none;
+        .clock {
+          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
         }
       }
     }
@@ -94,14 +114,34 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   &.login-screen,
   &:overview {
     .panel-button {
-      &:hover, &:active, &:overview, &:focus, &:checked {
+      &:active, &:overview, &:focus, &:checked {
-        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
+        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
 
         &.clock-display {
           box-shadow: none;
 
           .clock {
-            box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
+            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
+          }
+        }
+      }
+
+      &:hover {
+        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+        &.clock-display {
+          box-shadow: none;
+          .clock {
+            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+          }
+        }
+      }
+      
+      &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
+        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
+        &.clock-display {
+          box-shadow: none;
+          .clock {
+            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
           }
         }
       }
@@ -133,3 +173,15 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   padding: 0 $base_padding;
   spacing: $base_spacing;
 }
+
+
+// Clock
+
+.clock-display-box {
+  spacing: 2px;
+
+  .clock {
+    padding-left: $base_padding * 2;
+    padding-right: $base_padding * 2;
+  }
+}

data/theme/gnome-shell-sass/widgets/_popovers.scss

@@ -1,16 +1,15 @@
 /* Popovers/Menus */
 
-$popover_arrow_height: 12px;
+// the popover itself
-
-//.the popover itself
 .popup-menu-boxpointer {
-  -arrow-border-radius: $base_border_radius+4;
+  -arrow-border-radius: $modal_radius;
   -arrow-background-color: $bg_color;
-  -arrow-border-width: 1px;
   -arrow-border-color: $borders_color;
-  -arrow-base: $popover_arrow_height * 2;
+  -arrow-border-width: 1px;
-  -arrow-rise: $popover_arrow_height;
+  -arrow-base: 24px;
-  -arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995
+  -arrow-rise: 12px; 
+  -arrow-box-shadow: none; // dreaming bugzilla #689995
+  margin: $base_margin; // used as distance from the screen edge
 }
 
 // container of the popover menu
@@ -20,36 +19,74 @@ $popover_arrow_height: 12px;
 
   //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
   &.panel-menu {
-    -boxpointer-gap: $base_margin; // distance from the panel
+    -boxpointer-gap: $base_margin+2px; // distance from the panel
-    margin-bottom: 1.75em;
+    
+    // override popover styles for panel menus so
+    // we can draw a box shadow and no arrow
+    -arrow-border-radius: $modal_radius;
+    -arrow-background-color: transparent;
+    -arrow-border-color: transparent;
+    -arrow-border-width: 0;
+    -arrow-base: 0;
+    -arrow-rise: $base_margin; // use this as top margin
+    -arrow-box-shadow: none; // dreaming bugzilla #689995
+    
+    margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
+
+    // style the menu content instead
+    .popup-menu-content {
+      border-radius: $modal_radius;
+      border: 1px solid $borders_color; 
+      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+      background-color: $bg_color;
+      padding: $base_padding * 2;
+    }
+
+    .popup-menu-item {}
   }
 }
 
+// popover content;
 .popup-menu-content {
-  padding: $base_padding * 2 + $base_margin 0;
+  padding: $base_padding;
 }
 
 // menu items
 .popup-menu-item {
-  spacing: $base_padding;
+  spacing: $base_spacing;
-  padding: $base_padding;
+  padding: $base_padding*2;
+  margin: 2px 0;
+  border-radius: $base_border_radius;
+  transition: 0.2s all ease;
 
   &:ltr { padding-right:1.75em; padding-left: 0; }
   &:rtl { padding-right: 0; padding-left:1.75em; }
 
+  &:hover {
+    background-color: $hover_bg_color;
+  }
+
   &:checked {
-    background-color: lighten($bg_color, 2%);
+    background-color: $hover_bg_color;
-    box-shadow: none;
+    font-weight: bold;
+
+    margin-bottom: 0;
+    box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
+    border-radius: $base_border_radius $base_border_radius 0 0;
+    
+    &:hover {
+      background-color: darken($hover_bg_color, 4%);
+    }
   }
 
   &.selected {
-    background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
+    background-color: transparentize($fg_color, if($variant=='light', 0.7, 0.9));
     color: $fg_color;
   }
 
   &:active { 
-    background-color: $selected_bg_color;
+    background-color: $active_bg_color;
-    color: $selected_fg_color;
+    color: $active_fg_color;
   }
 
   &:insensitive { color: transparentize($fg_color,0.5);}
@@ -59,27 +96,65 @@ $popover_arrow_height: 12px;
 .popup-inactive-menu-item {
   color: $fg_color;
 
-  &:insensitive { color: transparentize($fg_color,0.5); }
+  // "Open Windows" label
+  font-weight: bold;
+  font-size: smaller;
+
+  &:insensitive { color: $insensitive_fg_color; }
 }
 
 // symbolic icons in popover
 .popup-menu-arrow,
-.popup-menu-icon { icon-size: $base_icon_size; }
+.popup-menu-icon { 
+  margin: 0;
+  padding:0;
+  icon-size: 16px !important;
+}
+
+.popup-menu-arrow {
+  margin-right: $base_margin;
+}
 
 // popover submenus
 .popup-sub-menu {
-  background-color: darken($bg_color, 3%);
+  background-color: $hover_bg_color;
-  box-shadow: none;
+  border:none;
-  border-top: 1px solid transparentize($borders_color, 0.2);
+  border-radius: 0 0 $base_border_radius $base_border_radius;
-  border-bottom: 1px solid transparentize($borders_color, 0.2);
+  padding: 0;
+  margin-top: 0;
+  &:active {
+    background-color: transparent;
+  }
+
+  
+  
+  .popup-menu-ornament {
+    min-width: 14px !important;
+  }
+
+  .popup-menu-item {
+    margin: 0;
+    border-radius: 0;
+    padding: $base_padding*1.5 $base_padding*2;
+
+    &:last-child:hover{
+      border-radius: 0 0 $base_border_radius $base_border_radius;
+    }
+  }
+
+  .popup-separator-menu-item {
+    margin: 0;
+  }
 }
 
 // container for radio and check boxes
 .popup-menu-ornament {
   width: 1.2em;
+  font-weight: bold;
+  font-size: 1em;
 
-  &:ltr { text-align: right };
+  &:ltr { text-align: right; };
-  &:rtl { text-align: left };
+  &:rtl { text-align: left; };
 }
 
 // separator
@@ -89,13 +164,13 @@ $popover_arrow_height: 12px;
   .popup-separator-menu-item-separator {
     //-margin-horizontal: 24px;
     height: 1px; //not really the whole box
-    margin: 6px 64px;
+    margin: $base_margin 4em;
     background-color: lighten($borders_color, 2%);
+
     .popup-sub-menu & { //submenu separators
-      margin: 0 64px 0 32px;
+      margin: 0 4em 0 3em; // balance it in the middle
-      @if $variant == 'dark' {
+      padding:0 !important;
-        background-color: lighten($bg_color,10%);
+      background-color: darken($hover_bg_color, 5%);
-      }
     }
   }
 }
@@ -110,6 +185,14 @@ $popover_arrow_height: 12px;
 .aggregate-menu {
   min-width: 21em;
 
+  // this is unneeded in at the top-level this menu, hide it
+  .popup-menu-ornament {width:0;padding:0;spacing:0;margin:0;}
+
+  .popup-menu-item {
+    &:ltr { padding-left:$base_padding;padding-right:$base_padding*2; }
+    &:rtl { padding-right:$base_padding;padding-left:$base_padding*2; }
+  }
+
   // lock screen, shutdown, etc. buttons
   .popup-menu-icon { 
     padding:0;
@@ -120,11 +203,11 @@ $popover_arrow_height: 12px;
   .popup-sub-menu .popup-menu-item > :first-child {
     // account for icons in submenus with padding
     &:ltr {
-      padding-left: $base_padding + $base_margin * 2; 
+      padding-left: 0;
       margin-left: $base_icon_size;
     }
     &:rtl {
-      padding-right: $base_padding + $base_margin * 2; ;
+      padding-right: 0;
       margin-right: $base_icon_size;
     }
   }

data/theme/gnome-shell-sass/widgets/_search-entry.scss

@@ -5,30 +5,32 @@ $search_entry_height: 36px;
 
 %search_entry,
 .search-entry {
-  width: $search_entry_width;
+  background-color: lighten($bg_color, 5%);
-  padding: $base_padding+1 $base_padding+3;
-  border-radius: $search_entry_height * 0.5; // half the height
-  color: transparentize($fg_color,0.3);
-  background-color: $bg_color;
-  margin-top: $base_spacing * 2;
-  margin-bottom: $base_spacing;
   border-width: 2px;
   border-color: transparent;
+  border-radius: $search_entry_height * 0.5; // half the height
+  color: transparentize($fg_color,0.3);
+  margin-top: $base_spacing * 2;
+  margin-bottom: $base_spacing;
+  padding: $base_padding+1 $base_padding+3;
+  width: $search_entry_width;
+  
   &:hover {
-    background-color: $hover_bg_color;
+    background-color: lighten($hover_bg_color, 5%);
-    color: $hover_fg_color;
+    color: lighten($hover_fg_color, 5%);
   }
 
   &:focus {
     border-style: solid;
     border-color: $selected_bg_color;
     color: $fg_color;
-    box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2);
+    box-shadow: none;
   }
 
   .search-entry-icon { 
-    icon-size: $base_icon_size;
-    padding: 0 4px;
     color: inherit;
+    icon-size: $base_icon_size;
+    margin-top: 2px; // center vertically
+    padding: 0 4px;
   }
 }

data/theme/gnome-shell-sass/widgets/_search-results.scss

@@ -11,31 +11,33 @@
   // This should be equal to #searchResultsContent spacing
   spacing: $base_margin * 2;
 
-  // separator
+  // separator (unstyled)
   .search-section-separator { 
-    // height: 1px;
+    height: $base_margin*2; // use it as a spacer
-    // background-color: $osd_outer_borders_color;
-    height: 0;
     background-color: transparent;
   }
 }
 
 // content
 .search-section-content {
-  background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
+  background-color: lighten($system_bg_color, 5%);
-  border-radius: $modal_radius+3;
+  border-radius: $modal_radius*1.5;
   border: 1px solid $osd_outer_borders_color;
-  box-shadow: 0 2px 4px 0 $shadow_color;
+  box-shadow: none;
-  text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2));
+  text-shadow: none;
   color: $osd_fg_color;
   padding: $base_padding * 3;
+  margin: $base_margin;
   // This is the space between the provider icon and the results container
-  spacing: $base_margin * 2;
 }
 
-%search-section-content-item {
+%search_section_content_item {
   @extend %icon_tile;
 
+  border-radius: $base_border_radius;
+
+  color: $osd_fg_color;
+
   &:focus,
   &:hover,
   &:selected {
@@ -60,12 +62,12 @@
 
 // Search results with icons
 .grid-search-result {
-  @extend %app-well-app;
+  @extend %app_well_app;
 }
 
 // search result provider
 .search-provider-icon {
-  @extend %search-section-content-item;
+  @extend %search_section_content_item;
 
   // content
   .list-search-provider-content {
@@ -74,9 +76,7 @@
     // provider labels
     .list-search-provider-details {
       width: 120px;
-      margin-top: 0;
+      color: $osd_fg_color;
-      color: darken($osd_fg_color, 8%);
-      // font-weight: bold;
     }
   }
 }
@@ -88,7 +88,7 @@
 
 // search result listitem
 .list-search-result {
-  @extend %search-section-content-item;
+  @extend %search_section_content_item;
 
   // content
   .list-search-result-content {
@@ -103,6 +103,6 @@
 
   // list item description
   .list-search-result-description {
-    color: darken($osd_fg_color, 30%);
+    color: $osd_insensitive_fg_color;
   }
 }

data/theme/gnome-shell-sass/widgets/_slider.scss

@@ -1,27 +1,28 @@
 /* Slider */
 
-$slider_size: 15px;
+$slider_size: 16px;
 
 .slider {
   height: $slider_size;
   // slider trough
-  -barlevel-height: 3px; // has to be an odd number
+  -barlevel-height: 4px;
-  -barlevel-background-color: $borders_color; //background of the trough
+  -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough
-  -barlevel-border-width: 1px; 
+  -barlevel-border-width: 2px; 
-  -barlevel-border-color: $borders_color; // trough border color
+  -barlevel-border-color: transparent; // trough border color
   // fill style
-  -barlevel-active-background-color: $selected_bg_color; //active trough fill
+  -barlevel-active-background-color: $selected_bg_color;
-  -barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border
+  -barlevel-active-border-color: transparent;
   // overfill style (red in this case)
   -barlevel-overdrive-color: $destructive_color;
-  -barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red;
+  -barlevel-overdrive-border-color: transparent; //trough border when red;
   -barlevel-overdrive-separator-width:1px;
   // slider handler
   -slider-handle-radius: $slider_size * 0.5; // half the size of the size
-  -slider-handle-border-width: 1px;
+  -slider-handle-border-width: 0;
-  -slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color);
+  -slider-handle-border-color: transparent; // because 0 width
+  margin: 0 $base_padding;
 
-  color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
+  color: $fg_color;
   &:hover { color: $hover_bg_color; }
   &:active { color: $active_bg_color; }
 }

data/theme/gnome-shell-sass/widgets/_switcher-popup.scss

@@ -1,37 +1,51 @@
 /* App Switcher */
 
+// same as dash
+$switcher_padding: $base_padding + 4px; // 10px
+$switcher_border_radius: $modal_radius + 8px;
+
+
+// the full screen container of the switcher
 .switcher-popup {
-  padding: 8px;
+  padding: 0;
   spacing: $base_spacing * 4;
 }
 
 // switcher onscreen panel
 .switcher-list {
   @extend %osd_panel;
+  padding: $switcher_padding;
+  border-radius: $switcher_border_radius;
+  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
 
+  // container for items in list
+  .switcher-list-item-container {
+    spacing: $base_spacing * 2;
+  }
+
+  // each item in the list
   .item-box {
-    padding: 8px;
+    @extend %icon_tile;
-    border-radius: $base_border_radius + 1px;
-    border: 1px solid transparent;
 
     &:outlined {
       background-color: transparentize($osd_fg_color, 0.7);
     }
 
+    &:hover,
     &:selected {
-      background-color: transparentize($osd_fg_color, 0.7);
+      background-color: transparentize($osd_fg_color, .9);
-      color: $osd_fg_color;
     }
-  }
 
-  // window thumbnails
+    &:focus {
-  .thumbnail-box {
+      background-color: transparentize($osd_fg_color, .7);
-    padding: 2px;
+      // border-color: $selected_bg_color;
-    spacing: $base_spacing;
+    }
-  }
 
-  .thumbnail {
+    &:focus,
-    width: 256px;
+    &:active,
+    &:checked {
+      background-color: transparentize(darken($osd_bg_color, 10%), .5);
+    }
   }
 
   .separator {
@@ -39,16 +53,27 @@
     background: $borders_color;
   }
 
-  .switcher-list-item-container {
+  // container of thumbnails
-    spacing: $base_spacing * 2;
+  .thumbnail-box {
+    padding: 2px;
+    spacing: $base_spacing;
+  }
+
+  // window thumbnail itself
+  .thumbnail {
+    width: 256px; // equal to THUMBNAIL_DEFAULT_SIZE in altTab.js
+    border-radius:$base_border_radius;
   }
 }
 
+// arrow if app has multiple windows
 .switcher-arrow {
-  border-color: rgba(0,0,0,0);
+  border-color: transparentize($osd_fg_color, 0.2);
-  color: transparentize($fg_color,0.2);
+  color: transparentize($osd_fg_color, 0.2);
+
   &:highlighted {
-    color: $fg_color;
+    border-color: $osd_fg_color;
+    color: $osd_fg_color;
   }
 }
 

data/theme/gnome-shell-sass/widgets/_switches.scss

@@ -1,8 +1,8 @@
 /* Switches */
 
 // these are equal to the size of the SVG assets
-$switch_height: 22px;
+$switch_height: 26px;
-$switch_width: 46px;
+$switch_width: 48px;
 
 .toggle-switch {
   color: $fg_color;

data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss

@@ -1,17 +1,23 @@
 /* Workspace Switcher */
+
+$ws_padding: $base_padding*2;
+$ws_border_radius: $modal_radius + 8px;
+
 .workspace-switcher-group {
   padding: $base_padding * 2;
 }
 
 .workspace-switcher-container {
   @extend %osd_panel;
+  padding: $ws_padding;
+  border-radius: $ws_border_radius;
+  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
 }
 
 .workspace-switcher {
   background: transparent;
   border: none;
   border-radius: 0;
-  padding: 0;
   spacing: $base_spacing * 2;
 }
 

data/theme/keyboard-caps-lock-filled-symbolic.svg

@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g style="stroke-width:.666667"><path style="stroke-width:.666666;marker:none" d="m8.092-1-7.5 8h4.5v4h6V7h4.5zm-3 14v4h6v-4z" fill="#2e3436" transform="translate(3.908 4)"/></g></svg>
-    <g fill="#2e3436">
-        <path d="M6 8H2.937l5.126-5.781L13.186 8H10v2H6z" style="marker:none" color="#000" overflow="visible"/>
-        <path d="M6 11h4v2H6z" style="marker:none"/>
-    </g>
-</svg>

data/theme/keyboard-enter-symbolic.svg

@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path style="font-weight:400;line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;fill:#2e3436;marker:none" d="M19.2 6v6.004c.006.996-1 .996-1 .996H6.608l1.285-1.281c.183-.19.313-.461.313-.719v-1h-1c-.31 0-.552.09-.75.281L2.8 13.98l3.656 3.74c.198.19.75.28.75.28h1v-1s-.13-.528-.313-.719L6.616 15H18.2c3.006 0 3-3 3-3V6Z"/></svg>
-    <g font-weight="400" fill="#2e3436">
-        <path d="M11.994 3v4.004c.002.666-.183.72-.445.852-.262.13-.555.144-.555.144H4v2h6.994s.71.014 1.45-.355c.738-.37 1.552-1.313 1.55-2.645V3z" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;marker:none" color="#000" font-family="sans-serif" overflow="visible"/>
-        <path d="M6 12v-1c0-.257-.13-.528-.313-.719l-1.28-1.303 1.28-1.26C5.87 7.529 6 7.258 6 7V6H5c-.31 0-.552.09-.75.281L1.594 8.978l2.656 2.74c.198.192.44.282.75.282z" style="line-height:normal;-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" color="#bebebe" font-family="Bitstream Vera Sans" overflow="visible"/>
-    </g>
-</svg>

data/theme/keyboard-hide-symbolic.svg

@@ -1,7 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path style="color:#000;line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;fill:#2e3436;marker:none" d="M3 8v1c0 .277.112.526.293.707L12 18.414l8.707-8.707c.18-.18.296-.38.293-.707V8h-1a.996.996 0 0 0-.707.293L12 15.586 4.707 8.293A.996.996 0 0 0 4 8Z"/></svg>
-    <g color="#000" fill="#2e3436">
-        <path d="M4.707 5.293L3.293 6.707 8 11.414l4.707-4.707-1.414-1.414L8 8.586z" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;marker:none" font-weight="400" font-family="sans-serif" overflow="visible"/>
-        <path d="M12 6V5h1v1zM3 6V5h1v1z" style="marker:none" overflow="visible"/>
-        <path d="M3 6c0-.554.446-1 1-1s1 .446 1 1-.446 1-1 1-1-.446-1-1zM11 6c0-.554.446-1 1-1s1 .446 1 1-.446 1-1 1-1-.446-1-1z" style="marker:none" overflow="visible"/>
-    </g>
-</svg>

data/theme/keyboard-layout-filled-symbolic.svg

@@ -1,7 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;fill:#2e3436;fill-rule:evenodd" d="M5 3v19h2V12h3.383l.722 1.447A1 1 0 0 0 12 14h6a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-4.383l-.722-1.447A1 1 0 0 0 12 3H6Z"/></svg>
-    <g fill="#2e3436" fill-rule="evenodd">
-        <path d="M2 1v14h2V1z" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" color="#000" font-weight="400" font-family="sans-serif" overflow="visible"/>
-        <path d="M3 1a1 1 0 00-1 1v6a1 1 0 001 1h3.383l.722 1.447A1 1 0 008 11h5a1 1 0 001-1V4a1 1 0 00-1-1H9.617l-.722-1.447A1 1 0 008 1zm1 2h3.383l.722 1.447A1 1 0 009 5h3v4H8.617l-.722-1.447A1 1 0 007 7H4z" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" color="#000" font-weight="400" font-family="sans-serif" overflow="visible"/>
-        <path d="M3 8h4l1 2h5V4H9L8 2H3z"/>
-    </g>
-</svg>

data/theme/keyboard-shift-filled-symbolic.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g style="stroke-width:.666667"><path style="stroke-width:.666666;marker:none" d="m8.092 0-7.5 8h4.5v7h6V8h4.5z" fill="#2e3436" transform="translate(3.908 4)"/></g></svg>
-    <path d="M6 13V9H2.937l5.126-5.781L13.186 9H10v4z" style="marker:none" color="#000" overflow="visible" fill="#2e3436"/>
-</svg>

data/theme/no-notifications.svg

@@ -1,175 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><path style="fill:#bebebe;fill-opacity:1;stroke-width:3.96875" d="M32 .25a5.955 5.955 0 0 0-5.887 6.842C18.028 9.6 12.156 17.136 12.156 26.047v17.86h-1.984a3.976 3.976 0 0 0-3.969 3.968 3.976 3.976 0 0 0 3.969 3.969h43.656a3.976 3.976 0 0 0 3.969-3.969 3.976 3.976 0 0 0-3.969-3.969h-1.984v-17.86c0-8.91-5.872-16.446-13.957-18.954A5.955 5.955 0 0 0 32 .25zm-7.938 55.563a7.93 7.93 0 0 0 3.97 6.867 7.897 7.897 0 0 0 7.937 0 7.93 7.93 0 0 0 3.968-6.867H24.063z"/></svg>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="64px"
-   height="64px"
-   id="svg3393"
-   version="1.1"
-   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
-   sodipodi:docname="no-notifications.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <defs
-     id="defs3395">
-    <clipPath
-       id="clipPath6262-0"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
-         id="rect6264-6"
-         width="3.8250003"
-         height="6.3750005"
-         x="26.849981"
-         y="220.75" />
-    </clipPath>
-    <clipPath
-       id="clipPath6258-0"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
-         id="rect6260-6"
-         width="2.8977275"
-         height="5.3129687"
-         x="26.965673"
-         y="221.28162" />
-    </clipPath>
-    <clipPath
-       id="clipPath6254-6"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none"
-         id="rect6256-6"
-         width="1.876245"
-         height="4.8783236"
-         x="26.998718"
-         y="221.50153" />
-    </clipPath>
-    <clipPath
-       id="clipPath8028-3"
-       clipPathUnits="userSpaceOnUse">
-      <path
-         style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m -73,-30 -7,-7 v -4.5 h 16.5 v 4.5 l -7.5,7 z"
-         id="path8030-6"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccccc" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath6810-7-87-7">
-      <rect
-         style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
-         id="rect6812-2-4-5"
-         width="14"
-         height="11"
-         x="21"
-         y="281" />
-    </clipPath>
-    <clipPath
-       id="clipPath6262"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
-         id="rect6264"
-         width="3.8250003"
-         height="6.3750005"
-         x="26.849981"
-         y="220.75" />
-    </clipPath>
-    <clipPath
-       id="clipPath6258"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
-         id="rect6260"
-         width="2.8977275"
-         height="5.3129687"
-         x="26.965673"
-         y="221.28162" />
-    </clipPath>
-    <clipPath
-       id="clipPath6254"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none"
-         id="rect6256"
-         width="1.876245"
-         height="4.8783236"
-         x="26.998718"
-         y="221.50153" />
-    </clipPath>
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect3951"
-       is_visible="true" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="125.08157"
-     inkscape:cy="-13.805087"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     inkscape:document-units="px"
-     inkscape:grid-bbox="true"
-     inkscape:window-width="1664"
-     inkscape:window-height="1034"
-     inkscape:window-x="1479"
-     inkscape:window-y="252"
-     inkscape:window-maximized="0"
-     inkscape:pagecheckerboard="1" />
-  <metadata
-     id="metadata3398">
-    <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 />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1"
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer">
-    <g
-       fill="#2e3436"
-       id="g91"
-       transform="matrix(3.96875,0,0,3.96875,0.25,0.2499995)"
-       style="fill:#bebebe;fill-opacity:1">
-      <path
-         d="m 13,6.5 c 0,2.761719 -2.238281,5 -5,5 -2.761719,0 -5,-2.238281 -5,-5 0,-2.761719 2.238281,-5 5,-5 2.761719,0 5,2.238281 5,5 z m 0,0"
-         id="path81"
-         style="fill:#bebebe;fill-opacity:1" />
-      <path
-         d="m 3,6.5 h 10 v 6 H 3 Z m 0,0"
-         id="path83"
-         style="fill:#bebebe;fill-opacity:1" />
-      <path
-         d="m 2.5,13 h 11 c 0.550781,0 1,-0.449219 1,-1 0,-0.550781 -0.449219,-1 -1,-1 h -11 c -0.550781,0 -1,0.449219 -1,1 0,0.550781 0.449219,1 1,1 z m 0,0"
-         id="path85"
-         style="fill:#bebebe;fill-opacity:1" />
-      <path
-         d="m 10,14 c 0,0.714844 -0.382812,1.375 -1,1.730469 -0.617188,0.359375 -1.382812,0.359375 -2,0 C 6.382812,15.375 6,14.714844 6,14"
-         id="path87"
-         style="fill:#bebebe;fill-opacity:1" />
-      <path
-         d="M 9.5,1.5 C 9.5,2.328125 8.828125,3 8,3 7.171875,3 6.5,2.328125 6.5,1.5 6.5,0.671875 7.171875,0 8,0 8.828125,0 9.5,0.671875 9.5,1.5 Z m 0,0"
-         id="path89"
-         style="fill:#bebebe;fill-opacity:1" />
-    </g>
-  </g>
-</svg>

data/theme/toggle-off-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="22"><defs><linearGradient id="a"><stop offset="0" stop-color="#39393a"/><stop offset="1" stop-color="#302f30"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="53" y1="294.429" x2="53" y2="309.804" gradientUnits="userSpaceOnUse" gradientTransform="translate(-42.76)"/></defs><g transform="translate(0 -291.18)" stroke-width="1.085" stroke="#151515"><rect style="marker:none" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#282828"/><rect ry="10.455" rx="10.455" y="291.715" x=".543" height="20.911" width="21.143" style="marker:none" fill="url(#b)"/></g></svg>
+<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect style="fill:#000;stroke:none;stroke-width:1;marker:none;fill-opacity:.5" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="-24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none;fill:#fff;fill-opacity:1" fill="#f8f7f7"/></g></svg>

data/theme/toggle-off-hc.svg

@@ -1,133 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#000;stroke:none;stroke-width:1;marker:none;fill-opacity:.5" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/><path style="fill:#f8f7f7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-dashoffset:2" d="M29 303.18h12v2H29z"/></g></svg>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<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="48"
-   height="22"
-   id="svg2857"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="toggle-off-hc.svg">
-  <defs
-     id="defs2859">
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="0 : 526.18109 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="744.09448 : 526.18109 : 1"
-       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
-       id="perspective2865" />
-    <inkscape:perspective
-       id="perspective2843"
-       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
-       inkscape:vp_z="1 : 0.5 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 0.5 : 1"
-       sodipodi:type="inkscape:persp3d" />
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect77541-4"
-       is_visible="true" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#000000"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="-6.1820581"
-     inkscape:cy="-16.463788"
-     inkscape:document-units="px"
-     inkscape:current-layer="g37994"
-     showgrid="false"
-     inkscape:window-width="2560"
-     inkscape:window-height="1364"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     borderlayer="true"
-     inkscape:showpageshadow="false"
-     inkscape:snap-nodes="false"
-     inkscape:snap-bbox="true"
-     showborder="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid12954"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata2862">
-    <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
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-444.64286,-781.36218)">
-    <g
-       transform="matrix(0.6526046,0,0,0.80554422,99.592644,-636.32172)"
-       id="g37994">
-      <g
-         transform="matrix(1.5323214,0,0,1.2413968,-324.76058,489.69039)"
-         id="toggle-off"
-         inkscape:label="#g8477">
-        <circle
-           cy="1033.993"
-           cx="571.95966"
-           id="path8444"
-           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#555753;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-           r="7" />
-        <rect
-           ry="2.0108337"
-           rx="1.9562569"
-           y="1031.9885"
-           x="565.0083"
-           height="4.0216675"
-           width="34.850178"
-           id="rect8461"
-           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#555753;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
-      </g>
-      <g
-         transform="matrix(1.5323214,0,0,1.2413968,-324.85635,491.16456)"
-         id="toggle-on"
-         inkscape:label="#g8481">
-        <rect
-           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-           id="rect8475"
-           width="34.850178"
-           height="4.0216675"
-           x="565.0083"
-           y="1070.9279"
-           rx="1.9562569"
-           ry="2.0108337" />
-        <circle
-           transform="scale(-1,1)"
-           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-           id="circle8463"
-           cx="-591.0213"
-           cy="1072.9402"
-           r="9" />
-      </g>
-    </g>
-  </g>
-</svg>

data/theme/toggle-off.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="46" height="22"><g transform="translate(0 -291.18)"><rect style="marker:none;font-variant-east_asian:normal" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#e1dedb" stroke="#cdc7c2" stroke-linecap="round" stroke-linejoin="round"/><rect ry="10.455" rx="10.455" y="291.715" x=".543" height="20.911" width="21.143" style="marker:none;font-variant-east_asian:normal" fill="#f8f7f7" stroke="#aa9f98" stroke-linecap="round" stroke-linejoin="round"/><g transform="matrix(.97148 0 0 1 1658.914 -2552.91)" stroke-width="1.015" stroke-linecap="round" stroke-linejoin="round"><rect ry="13.17" rx="13.556" y="1234.681" x="-1242.732" height="26" width="49.409" style="marker:none" fill="#e1dedb" stroke="#cdc7c2"/><rect style="marker:none" width="26.763" height="26" x="-1242.732" y="1234.769" rx="13.511" ry="13.126" fill="#f8f7f7" stroke="#aa9f98"/></g><g transform="matrix(.97148 0 0 1 1658.914 -2512.91)" stroke-width="1.015" stroke="#2b73cc"><rect style="marker:none" width="49.409" height="26" x="-1242.732" y="1234.681" rx="13.556" ry="13.17" fill="#3081e3"/><rect ry="13.126" rx="13.511" y="1234.769" x="-1220.086" height="26" width="26.763" style="marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>
+<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect style="fill:#c0bfbc;stroke:none;stroke-width:1;marker:none" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="-24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg>

data/theme/toggle-on-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="22"><defs><linearGradient id="a"><stop offset="0" stop-color="#39393a"/><stop offset="1" stop-color="#302f30"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="53" y1="294.429" x2="53" y2="309.804" gradientUnits="userSpaceOnUse" gradientTransform="translate(-19)"/></defs><g transform="translate(0 -291.18)" stroke="#030e1b" stroke-width="1.085"><rect style="marker:none" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#15539e"/><rect ry="10.455" rx="10.455" y="291.715" x="24.304" height="20.911" width="21.143" style="marker:none" fill="url(#b)"/></g></svg>
+<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#1c71d8;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="294.18" x="24" height="22" width="22" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="fill:#fff;stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg>

data/theme/toggle-on-hc.svg

@@ -1,113 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)" stroke="#2b73cc"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13" stroke="none"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" stroke="none"/><rect ry="11" rx="11" y="299.18" x="8" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<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="48"
-   height="22"
-   id="svg2857"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="toggle-on-hc.svg">
-  <defs
-     id="defs2859">
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="0 : 526.18109 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="744.09448 : 526.18109 : 1"
-       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
-       id="perspective2865" />
-    <inkscape:perspective
-       id="perspective2843"
-       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
-       inkscape:vp_z="1 : 0.5 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 0.5 : 1"
-       sodipodi:type="inkscape:persp3d" />
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect77541-4"
-       is_visible="true" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#000000"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="-222.95215"
-     inkscape:cy="3.9378433"
-     inkscape:document-units="px"
-     inkscape:current-layer="g37994"
-     showgrid="false"
-     inkscape:window-width="2560"
-     inkscape:window-height="1364"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     borderlayer="true"
-     inkscape:showpageshadow="false"
-     inkscape:snap-nodes="false"
-     inkscape:snap-bbox="true"
-     showborder="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid12954"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata2862">
-    <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
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-444.64286,-781.36218)">
-    <g
-       transform="matrix(0.6526046,0,0,0.80554422,99.592644,-636.32172)"
-       id="g37994">
-      <g
-         transform="matrix(1.5323214,0,0,1.2413968,-324.85635,441.50868)"
-         id="toggle-on"
-         inkscape:label="#g8481">
-        <rect
-           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-           id="rect8475"
-           width="34.850178"
-           height="4.0216675"
-           x="565.0083"
-           y="1070.9279"
-           rx="1.9562569"
-           ry="2.0108337" />
-        <circle
-           transform="scale(-1,1)"
-           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#3465a4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-           id="circle8463"
-           cx="-591.0213"
-           cy="1072.9402"
-           r="9" />
-      </g>
-    </g>
-  </g>
-</svg>

data/theme/toggle-on.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="46" height="22"><g transform="translate(0 -291.18)" stroke="#2b73cc"><rect style="marker:none;font-variant-east_asian:normal" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#3081e3"/><rect ry="10.455" rx="10.455" y="291.715" x="24.304" height="20.911" width="21.143" style="marker:none;font-variant-east_asian:normal" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
+<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3"/><rect ry="11" rx="11" y="294.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none;fill:#000;fill-opacity:.2" fill="#f8f7f7"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g></svg>