[gnome-shell/wip/jimmac/sync-with-adwaita: 1/2] Theme: update to sync with gtk Adwaita

From: Jakub Steiner <jimmac src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/jimmac/sync-with-adwaita: 1/2] Theme: update to sync with gtk Adwaita
Date: Tue, 18 Jun 2019 13:35:41 +0000 (UTC)
commit 363bfe2b5cc2b9f2cb6012eaf63e8bf122bb6ba2
Author: Frederik Feichtmeier <frederik feichtmeier gmail com>
Date:   Tue Jun 18 15:29:00 2019 +0200

    Theme: update to sync with gtk Adwaita
    
    - consistent OSD colors
    - consistent fg/bg colors
    - updated rounded corners
    - switches
    
    Fixes https://gitlab.gnome.org/GNOME/gnome-shell/issues/841
    
    Squashed commit of the following:
    
    commit d080159ea67641653814f65d5d7dbd7fe0aacdbe
    Author: frederik.feichtmeier <frederik feichtmeier gmail com>
    Date:   Sat Jun 15 18:32:18 2019 +0200
    
        Icon tile changes
    
        - use the medium radius
        - make checked tiles less hardcore black
        - adjust folder popup bg color to checked tiles
    
    commit c36ca133e14bbc3bd69826adab13699000132621
    Author: Feichtmeier <frederik feichtmeier gmail com>
    Date:   Thu Jun 6 17:28:04 2019 +0200
    
        Don't raise hover btn
    
    commit dbede26162ced9ac4a5755ac65371e5ca2a3206f
    Author: Feichtmeier <frederik feichtmeier gmail com>
    Date:   Thu Jun 6 17:26:39 2019 +0200
    
        Light/Dark GDM entry, add shadows to btns
    
    commit 4a51a4923cf550947a3584f1d6eed2a5ee14cde1
    Author: Feichtmeier <frederik feichtmeier gmail com>
    Date:   Thu Jun 6 16:21:00 2019 +0200
    
        Darker GDM, better popover hover, and...
    
        brighter hover color for the dark theme
         brightersearchresult description
    
    commit c0bbc587dfda99656073578479ed697116614e2a
    Author: Feichtmeier <frederik feichtmeier gmail com>
    Date:   Thu Jun 6 13:25:26 2019 +0200
    
        GDM and overview toggle btn changes
    
        - try to simplify the look of the gdm buttons
        - let the GDM entry look like the search entry
        - use a gray/white/blue stripe for the overview toggle btns
    
    commit adc8baae49a78b2b696d9e7613358012c394a4e1
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Fri May 31 16:42:56 2019 +0200
    
        theme: darken vignette
    
        - instead of locally boxing in search results, darken the whole overview
    
        Addresses https://gitlab.gnome.org/GNOME/gnome-shell/issues/288
    
    commit 9ebb6b977c90c5697f7662371903b081bde2b958
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Fri May 31 15:45:47 2019 +0200
    
        theme: experimental search entry
    
        - bring back the golder 3.0 days
    
    commit 88be1f7627dfbd96323d1c79e6040b9e8ee5044d
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Fri May 31 15:40:26 2019 +0200
    
        theme: style search and results
    
         - Improve legibility by using the OSD style for the results
         - Would be nice to include the search entry in the container
           and have a nice transition.
    
        Addresses https://gitlab.gnome.org/GNOME/gnome-shell/issues/288
    
    commit b482cf5798d1267aec1c943019fa542b981fc6d1
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Fri May 31 09:58:19 2019 +0200
    
        theme: theme slider handle
    
        matching gtk
    
    commit 1688f5021d74c9f2d3413c538eb1362d2a9acbf9
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Fri May 31 09:44:31 2019 +0200
    
        theme: sync calendar menus with the rest
    
         use :active and :hover colors like the rest
    
    commit 258e59e3cfad0eddf32d1d91d625bb893ebb7fd6
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Fri May 31 09:38:31 2019 +0200
    
        theme: revert :hover and :active colors to gtk
    
    commit 7471c31efd549d27a510fd64187290bb658da38e
    Author: frederik.feichtmeier <frederik feichtmeier gmail com>
    Date:   Thu May 30 20:30:09 2019 +0200
    
        OSD bg and general border changes
    
        - darker, less transparent OSD
        - brighter OSD border
        - no border for over view panels and entry
        - fix border color of popups
        - remove trough variable as osd trough and popup trough cant have the same color if dependant on 
fg_color, fixed hex could also work
        - thinner workspace border
    
    commit fc85bab91835c8ce80c85a8467c594546188d1de
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 13:51:50 2019 +0200
    
        theme: adwaita:dark bg is lighter
    
    commit d35cf2673dd0ccd9ce395ac11c1e14c3c6907a14
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 13:12:20 2019 +0200
    
        theme: osd panels for overview
    
        - light borders for Frederik
    
    commit 6ba57af68c7ef88f18d7c05c2a61a1aec50423ac
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 12:54:52 2019 +0200
    
        theme: regular buttons to match gtk
    
    commit 86a4bd618f6d434811c74dc0e58f8399b8d45d13
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 12:34:49 2019 +0200
    
        theme: rearrange header a bit
    
        - makes sense to have (c) on top
    
    commit 6f0d688aca39fb88a757cf10bd926b04e01bbeed
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 12:31:53 2019 +0200
    
        theme: regular buttons :active state to match gtk
    
    commit 44640eea31b3fd6f72641b46253132fd6fe02ab8
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 11:49:22 2019 +0200
    
        theme: get rid of the bubble prefix
    
        - originally related to tweaking the osd style for use in dialogs,
          it no longer serves the purpose as dialogs are eithe rlight or dark
          and thus can use the colors directly.
    
    commit 31a74c34c56ae86d81bad3c9f2f0945a96b55a72
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 11:29:36 2019 +0200
    
        theme: simplify button drawing
    
        - the original style was built on OSD colors and the conditionals no longer made any sense. In 
Adwaita:gtk the color conditionals special case the color buttons (warning and suggested tinting). This does 
not exist in the shell
    
    commit b55a73ce78b56da362bfa2d9614655b96ac5167b
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 10:23:10 2019 +0200
    
        theme: match gtk sliders
    
        - FIXME: currently unable to stle the slider itself
          color sets the background color but no way to style the border as
          far as I can tell gazing at js/ui/slider.js
    
    commit e50921049272f68e2ef1625f07b956c8661a14ad
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 09:38:00 2019 +0200
    
        theme: add light/dark switches
    
    commit 5502526c46350ccd5620d7f37440f712bce1bd70
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 09:26:12 2019 +0200
    
        theme: overview is OSD styled
    
        FIXME: .show-apps-icon isn't colored for some reason
    
    commit f026dd8fbb3310ded7d0aab5496b9c286606968d
    Author: Jakub Steiner <jimmac gmail com>
    Date:   Thu May 30 09:03:09 2019 +0200
    
        theme: keep variant around for HC
    
    commit 9693dea282c3d1c55b4bdd7641908a963a9acfc8
    Author: frederik.feichtmeier <frederik feichtmeier gmail com>
    Date:   Wed May 29 22:54:50 2019 +0200
    
        Further improvements
    
        - back to gtk styled popups
        - smaller drop shadow for notifications
        - no shadow for OSD
        - fix high color
        - move bubble colors back to common for now
    
    commit 8152dc4dce4abfa599c0a674543c3afaa755fdb7
    Author: Feichtmeier <frederik feichtmeier gmail com>
    Date:   Wed May 29 17:14:37 2019 +0200
    
        Use $variant for bubble colors, fix high-contrast
    
    commit b796c5a5631b3ce8976ab91759d83decff782eaf
    Author: Feichtmeier <frederik feichtmeier gmail com>
    Date:   Wed May 29 14:47:42 2019 +0200
    
        Shell theme renew
    
        - light colored, bubble-like popovers, dialogues and notifications
        - unified OSD colors for OSD elements
        - small shadow for OSD elements to improve visibility above dark backgrounds
        - small screenshield shadow improvements
        - slightly bigger GDM buttons
        - rounder buttons, rounder entries
        - flatter entries

 data/gnome-shell-theme.gresource.xml               |   6 +-
 data/theme/gnome-shell-high-contrast.scss          |   2 +
 data/theme/gnome-shell-sass/_colors.scss           |  12 +-
 data/theme/gnome-shell-sass/_common.scss           | 431 ++++++++++++++-------
 data/theme/gnome-shell-sass/_drawing.scss          |  59 +--
 .../gnome-shell-sass/_high-contrast-colors.scss    |   1 +
 data/theme/toggle-off-dark.svg                     |   1 +
 data/theme/toggle-off-intl.svg                     | 103 -----
 data/theme/toggle-off.svg                          |   1 +
 data/theme/toggle-on-dark.svg                      |   1 +
 data/theme/toggle-on-intl.svg                      | 103 -----
 data/theme/toggle-on.svg                           |   1 +
 js/ui/lightbox.js                                  |   2 +-
 13 files changed, 326 insertions(+), 397 deletions(-)
---
diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index 2c5d794dc3..21191f0ceb 100644
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -25,9 +25,11 @@
     <file alias="icons/pointer-primary-click-symbolic.svg">pointer-primary-click-symbolic.svg</file>
     <file alias="icons/pointer-secondary-click-symbolic.svg">pointer-secondary-click-symbolic.svg</file>
     <file>process-working.svg</file>
-    <file>toggle-off-intl.svg</file>
+    <file>toggle-off.svg</file>
+    <file>toggle-off-dark.svg</file>
     <file>toggle-off-hc.svg</file>
-    <file>toggle-on-intl.svg</file>
+    <file>toggle-on.svg</file>
+    <file>toggle-on-dark.svg</file>
     <file>toggle-on-hc.svg</file>
   </gresource>
 </gresources>
diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss
index 23279caf3a..4ac340c92a 100644
--- a/data/theme/gnome-shell-high-contrast.scss
+++ b/data/theme/gnome-shell-high-contrast.scss
@@ -1,3 +1,5 @@
+$variant: 'light';
+
 @import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors
 @import "gnome-shell-sass/_drawing";
 @import "gnome-shell-sass/_common";
diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 0a851f3a4c..d14a440afe 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -3,11 +3,11 @@
 
 
 $base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 20%), 2%));
-$bg_color: if($variant == 'light', #f6f5f4, desaturate(#3d3846, 10%));
+$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
 $fg_color: if($variant == 'light', #2e3436, #eeeeec);
 
 $selected_fg_color: #ffffff;
-$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%));
+$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
 $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, 10%));
 $borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
@@ -21,11 +21,15 @@ $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
 
 $osd_fg_color: #eeeeec;
-$osd_bg_color: #2e3436;
+$osd_text_color: white;
+$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_borders_color: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize(white, 0.9);
+$osd_outer_borders_color: transparentize(white, 0.84);
 
 $tooltip_borders_color: $osd_outer_borders_color;
+$shadow_color: transparentize(black, 0.9);
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 50bfc66502..e400142653 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -4,8 +4,6 @@
 $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
 /* #{$cakeisalie} */
 
-$panel-corner-radius: 6px;
-
 /* Copyright 2009, 2015 Red Hat, Inc.
  *
  * Portions adapted from Mx's data/style/default.css
@@ -25,13 +23,18 @@ $panel-corner-radius: 6px;
  * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-
 /* GLOBALS */
+
+$panel-corner-radius: 6px;
+$medium_radius: 9px;
+
+$_trough_color: transparentize($fg_color, 0.9);
+$_bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
+$_hover_bg_color: lighten($bg_color,if($variant=='light', 5%, 3%));
+$_active_bg_color: if($variant == 'light', darken($bg_color, 14%), darken($bg_color, 9%));
+
 $font-size: 11;
 $font-family: Cantarell, Sans-Serif;
-$_bubble_bg_color: opacify($osd_bg_color,0.25);
-$_bubble_fg_color: $osd_fg_color;
-$_bubble_borders_color: transparentize($osd_fg_color,0.8);
 
 stage {
   font-family: $font-family;
@@ -42,42 +45,44 @@ stage {
 /* WIDGETS */
 
 /* Buttons */
-.button {
-  border-radius: 3px;
+.button, %button {
+  border-radius: 5px;
   border-width: 1px;
+  min-height: 22px;
   padding: 4px 32px;
   @include button(normal);
-  &:focus { @include button(focus); }
-  &:hover { @include button(hover); }
+  &:focus { @include button(focus, $c:$_hover_bg_color, $tc:$fg_color); }
+  &:hover { @include button(hover, $c:$_hover_bg_color, $tc:$fg_color); }
   &:insensitive { @include button(insensitive); }
-  &:active { @include button(active); }
+  &:active { @include button(active, $c:$_active_bg_color, $tc:$fg_color); }
 }
 
-.modal-dialog-linked-button {
+.modal-dialog-linked-button, %bubble_button {
   border-right-width: 1px;
-  @include button(normal);
-  &:insensitive { @include button(insensitive); }
-  &:hover { @include button(hover); }
-  &:focus { @include button(focus); }
-  &:active { @include button(active); }
+  @include button(normal, $c:$bg_color, $tc:$fg_color);
+  &:insensitive { @include button(insensitive, $c:$bg_color, $tc:$fg_color); }
+  &:hover { @include button(hover, $c:$_hover_bg_color, $tc:$fg_color); }
+  &:focus { @include button(focus, $c:$_hover_bg_color, $tc:$fg_color); }
+  &:active { @include button(active, $c:$_active_bg_color, $tc:$fg_color); }
   padding: 12px;
+  border-top: 1px solid $_bubble_borders_color;
 
   &:first-child {
-    border-radius: 0px 0px 0px 6px;
+    border-radius: 0px 0px 0px $medium_radius;
   }
   &:last-child {
     border-right-width: 0px;
-    border-radius: 0px 0px 6px 0px;
+    border-radius: 0px 0px $medium_radius 0px;
   }
   &:first-child:last-child {
     border-right-width: 0px;
-    border-radius: 0px 0px 6px 6px;
+    border-radius: 0px 0px $medium_radius $medium_radius;
   }
 }
 
 /* Entries */
 StEntry {
-  border-radius: 3px;
+  border-radius: 5px;
   padding: 4px;
   border-width: 1px;
   color: $fg_color;
@@ -130,15 +135,21 @@ StScrollBar {
 .slider {
   height: 1em;
   -barlevel-height: 0.3em;
-  -barlevel-background-color: $insensitive_bg_color; //background of the trough
+  -barlevel-background-color: transparentize($fg_color, 0.9); //background of the trough
   -barlevel-border-color: $borders_color; //trough border color
   -barlevel-active-background-color: $selected_bg_color; //active trough fill
-  -barlevel-active-border-color: darken($selected_bg_color,10%); //active trough border
+  -barlevel-active-border-color: $selected_borders_color; //active trough border
   -barlevel-overdrive-color: $destructive_color;
   -barlevel-overdrive-border-color: darken($destructive_color,10%);
   -barlevel-overdrive-separator-width: 0.2em;
   -barlevel-border-width: 1px;
-  -slider-handle-radius: 6px;
+  -slider-handle-radius: 8px;
+  -slider-handle-border-width: 1px;
+  -slider-handle-border-color: $borders_color;
+  color: $bg_color; /* FIXME to match gtk, we'd need to style the border of the slider, not
+     the whole widget */
+  &:hover { color: $_hover_bg_color; }
+  &:active { color: $_active_bg_color; }
 }
 
 /* Check Boxes */
@@ -157,11 +168,16 @@ StScrollBar {
 
 /* Switches */
 .toggle-switch {
+  color: $fg_color;
   width: 46px;
   height: 22px;
   background-size: contain;
-  background-image: url("resource:///org/gnome/shell/theme/toggle-off-intl.svg");
-  &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-intl.svg"); }
+  background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off.svg"),
+                                           url("resource:///org/gnome/shell/theme/toggle-off-dark.svg"));
+  &:checked { 
+    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on.svg"),
+                                           url("resource:///org/gnome/shell/theme/toggle-on-dark.svg"));
+  }
 }
 
 /* links */
@@ -178,9 +194,7 @@ StScrollBar {
 
 .modal-dialog {
   border-radius: 9px;
-  color: $osd_fg_color;
-  background-color: transparentize(darken($osd_bg_color,10%),0.05);
-  border: 1px solid $_bubble_borders_color;
+  @extend %bubble-panel;
   .modal-dialog-content-box {
     padding: 24px;
   }
@@ -192,8 +206,8 @@ StScrollBar {
   .run-dialog-button-box { padding-top: 1em; }
   .run-dialog-label {
     @include fontsize($font-size + 1.1);
-    font-weight: bold;
-    color: darken($osd_fg_color,10%);
+    font-weight: normal;
+    color: $fg_color;
     padding-bottom: .4em;
   }
 
@@ -225,7 +239,7 @@ StScrollBar {
   }
 
   .message-dialog-subtitle {
-    color: darken($fg_color,40%);
+    color: $fg_color;
     font-weight: bold;
   }
 
@@ -348,7 +362,7 @@ StScrollBar {
   }
 
   .mount-dialog-app-list-item {
-    color: darken($fg_color,10%);
+    color: lighten($fg_color,10%);
     &:hover { color: $fg_color; }
     &:ltr { padding-right: 1em; }
     &:rtl { padding-left: 1em; }
@@ -367,13 +381,13 @@ StScrollBar {
 /* Password or Authentication Dialog */
 
 .prompt-dialog {
+  @extend %bubble-panel;
   //this is the width of the entire modal popup
   width: 34em;
-  border: 3px solid $_bubble_borders_color;
 
   .message-dialog-main-layout { spacing: 24px; padding: 10px; }
   .message-dialog-content { spacing: 16px; }
-  .message-dialog-title { color: darken($osd_fg_color,25%); }
+  .message-dialog-title { color: lighten($fg_color,15%); }
 }
 
   .prompt-dialog-description:rtl {
@@ -382,6 +396,7 @@ StScrollBar {
 
   .prompt-dialog-password-box {
     spacing: 1em;
+    padding-bottom: 1em;
   }
 
   .prompt-dialog-error-label {
@@ -446,6 +461,7 @@ StScrollBar {
 
 /* Audio selection dialog */
 .audio-device-selection-dialog {
+  @extend %bubble-panel;
   spacing: 30px;
 }
 
@@ -466,7 +482,11 @@ StScrollBar {
   .audio-selection-device {
     border: 1px solid $_bubble_borders_color;
     border-radius: 12px;
-    &:active,&:hover,&:focus { background-color: $selected_bg_color; }
+    &:hover,&:focus { background-color: $_hover_bg_color; }
+    &:active { 
+      background-color: $selected_bg_color;
+      color: $selected_fg_color;
+    }
   }
 
   .audio-selection-device-box {
@@ -480,22 +500,26 @@ StScrollBar {
 
 /* Access Dialog */
 .access-dialog {
+  @extend %bubble-panel;
   spacing: 30px;
 }
 
 /* Geolocation Dialog */
 .geolocation-dialog {
+  @extend %bubble-panel;
   spacing: 30px;
 }
 
 /* Extension Dialog */
 .extension-dialog {
+  @extend %bubble-panel;
   .message-dialog-main-layout { spacing: 24px; padding: 10px; }
-  .message-dialog-title { color: darken($osd_fg_color,25%); }
+  .message-dialog-title { font-weight: normal; color: $fg_color; }
 }
 
 /* Inhibit-Shortcuts Dialog */
 .inhibit-shortcuts-dialog {
+  @extend %bubble-panel;
   spacing: 30px;
 }
 
@@ -515,12 +539,13 @@ StScrollBar {
 
 .popup-menu {
   min-width: 15em;
+  color: $fg_color;
+  border-color: $_bubble_borders_color;
 
   .popup-menu-arrow { } //defined globally in the TOP BAR
   .popup-sub-menu {
-    padding-bottom: 1px;
-    background-color: darken($bg_color,2%);
-    box-shadow: inset 0 -1px 0px lighten($borders_color,5%);
+    background-color: darken($bg_color,5%);
+    box-shadow: inset 0 -1px 0px $_bubble_borders_color;
   }
 
   .popup-menu-content { padding: 1em 0em; }
@@ -530,12 +555,18 @@ StScrollBar {
     &:ltr { padding: .4em 1.75em .4em 0em; }
     &:rtl { padding: .4em 0em .4em 1.75em; }
     &:checked {
-      background-color: darken($bg_color,2%);
-      box-shadow: inset 0 1px 0px lighten($borders_color,5%);
+      background-color: $bg_color;
+      box-shadow: inset 0 -1px 0px $_bubble_borders_color;
       font-weight: bold;
     }
-    &.selected { background-color: transparentize($fg_color,0.9); color: $fg_color; }
-    &:active { background-color: $selected_bg_color; color: $selected_fg_color; }
+    &.selected {
+      background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
+      color: $fg_color;
+    }
+    &:active { 
+      background-color: $selected_bg_color;
+      color: $selected_fg_color;
+     }
     &:insensitive { color: transparentize($fg_color,.5); }
   }
 
@@ -559,10 +590,10 @@ StScrollBar {
   }
   .popup-menu-boxpointer,
   .candidate-popup-boxpointer {
-    -arrow-border-radius: 3px;
+    -arrow-border-radius: $medium_radius;
     -arrow-background-color: $bg_color;
     -arrow-border-width: 1px;
-    -arrow-border-color: $borders_color;
+    -arrow-border-color: if($variant=='light', transparentize(black, 0.6), $borders_color);
     -arrow-base: 24px;
     -arrow-rise: 11px;
     -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995
@@ -573,7 +604,7 @@ StScrollBar {
     height: 1px; //not really the whole box
     margin: 6px 64px;
     background-color: transparent;
-    border-color: lighten($borders_color,10%);
+    border-color: $_bubble_borders_color;
     border-bottom-width: 1px;
     border-bottom-style: solid;
   }
@@ -601,7 +632,7 @@ StScrollBar {
   .level {
     height: 0.6em;
     -barlevel-height: 0.6em;
-    -barlevel-background-color: transparentize(darken($osd_bg_color,15%),0.5);
+    -barlevel-background-color: transparentize($fg_color, if($variant=='light', 0.2, 0.9));
     -barlevel-active-background-color: $osd_fg_color;
     -barlevel-overdrive-color: $destructive_color;
     -barlevel-overdrive-separator-width: 0.2em;
@@ -646,7 +677,7 @@ StScrollBar {
   }
 
   .switcher-list .item-box:selected {
-    background-color: $selected_bg_color;
+    background-color: transparentize($osd_fg_color, 0.7);
     color: $selected_fg_color;
   }
 
@@ -712,13 +743,43 @@ StScrollBar {
   }
 
 %osd-panel {
-  color: $_bubble_fg_color;
-  background-color: $_bubble_bg_color;
-  border: 1px solid $_bubble_borders_color;
+  color: $osd_fg_color;
+  background-color: $osd_bg_color;
+  border: 1px solid $osd_outer_borders_color;
   border-radius: 12px;
   padding: 12px;
 }
 
+%bubble-entry {
+  color: $fg_color;
+  background-color: darken($bg_color, 2%);
+  border-color: $_bubble_borders_color;
+  box-shadow: none;
+  &:focus { border: 2px solid $selected_bg_color; }
+}
+
+%bubble-panel {
+  color: $fg_color;
+  background-color: $bg_color;
+  border: 1px solid if($variant=='light', transparentize(black, 0.6), $borders_color);
+
+  StEntry { @extend %bubble-entry; }
+  .button {
+    &, &:hover, &:focus, &:active, &:disabled { 
+      box-shadow: none;
+      border-color: $_bubble_borders_color;
+    }
+    background-color: $bg_color;
+    color: $fg_color;
+    &:hover { background-color: $_hover_bg_color; }
+    &:active { 
+      background-color: $selected_bg_color;
+      color: $selected_fg_color;
+    }
+    &:disabled { color: $insensitive_fg_color; }
+  }
+}
+
 /* Tiled window previews */
 .tile-preview {
   background-color: transparentize($selected_bg_color,0.5);
@@ -786,7 +847,7 @@ StScrollBar {
     }
 
     &:hover {
-      color: lighten($fg_color, 10%);
+      color: $selected_fg_color;
     }
 
     &:active, &:overview, &:focus, &:checked {
@@ -794,7 +855,7 @@ StScrollBar {
       // a box-shadow
       background-color: rgba(0, 0, 0, 0.01);
       box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%);
-      color: lighten($fg_color,10%);
+      color: $selected_fg_color;
     }
 
     .system-status-icon { icon-size: 1.09em; padding: 0 5px; }
@@ -842,7 +903,7 @@ StScrollBar {
     .datemenu-displays-box { spacing: 1em; }
 
     .datemenu-calendar-column {
-      border: 0 solid lighten($bg_color,5%);
+      border: 0 solid $_bubble_borders_color;
       &:ltr { border-left-width: 1px; }
       &:rtl { border-right-width: 1px; }
     }
@@ -867,11 +928,8 @@ StScrollBar {
     .world-clocks-button,
     .weather-button,
     .events-section-title {
-      &:hover,&:focus { background-color: lighten($bg_color,5%); }
-      &:active {
-        color: lighten($selected_fg_color,5%);
-        background-color: $selected_bg_color;
-      }
+      &:hover, focus { background-color: $_hover_bg_color }
+      &:active { background-color: $_active_bg_color }
     }
 
     .datemenu-today-button .day-label {
@@ -916,7 +974,7 @@ StScrollBar {
     }
 
     .world-clocks-timezone {
-      color: darken($fg_color,40%);
+      color: $fg_color;
       font-feature-settings: "tnum";
       font-size: 0.9em;
     }
@@ -931,7 +989,7 @@ StScrollBar {
     }
 
     .calendar-month-label {
-      color: darken($fg_color,5%);
+      color: lighten($fg_color,5%);
       font-weight: bold;
       padding: 8px 0;
       &:focus {}
@@ -941,8 +999,8 @@ StScrollBar {
       background-color: transparent;
       width: 32px;
       border-radius: 4px;
-      &:hover, &:focus { background-color: transparentize($fg_color,0.95); }
-      &:active { background-color: transparentize($bg_color,0.95); }
+      &:hover, focus { background-color: $_hover_bg_color; }
+      &:active { background-color: transparentize($fg_color, 0.84); }
     }
 
       .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { // arrows
@@ -957,14 +1015,14 @@ StScrollBar {
       margin: 2px;
       border-radius: 1.4em;
       font-feature-settings: "tnum";
-      &:hover,&:focus { background-color: lighten($bg_color,5%); }
+      &:hover, focus { background-color: $_hover_bg_color; }
       &:active,&:selected {
         color: lighten($selected_fg_color,5%);
         background-color: $selected_bg_color;
         border-color: transparent; //avoid jumparound due to today
       }
       &.calendar-day-heading {  //day of week heading
-        color: darken($fg_color,40%);
+        color: lighten($fg_color,5%);
         margin-top: 1em;
         font-size: 70%;
       }
@@ -984,7 +1042,7 @@ StScrollBar {
         font-weight: bold;
         //color: lighten($fg_color,10%);
         //background-color: darken($bg_color,5%);
-        border: 1px solid transparentize($borders_color,0.5);
+        border: 1px solid $_bubble_borders_color;
       }
       .calendar-day-with-events {
         color: lighten($fg_color,10%);
@@ -992,7 +1050,7 @@ StScrollBar {
         background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
       }
       .calendar-other-month-day {
-        color: transparentize($fg_color,0.85);
+        color: transparentize($fg_color ,0.5);
         opacity: 0.5;
       }
       .calendar-week-number {
@@ -1002,8 +1060,8 @@ StScrollBar {
         border-radius: 2px;
         padding: 0.5em 0 0;
         margin: 6px;
-        background-color: transparentize($fg_color,0.7);
-        color: $bg_color;
+        background-color: $_bubble_borders_color;
+        color: $fg_color;
       }
 
       /* Message list */
@@ -1012,8 +1070,7 @@ StScrollBar {
       }
 
         .message-list-clear-button.button {
-          background-color: transparent;
-          &:hover,&:focus { background-color: lighten($bg_color,5%); }
+         @extend %button;
           margin: 1.5em 1.5em 0;
         }
 
@@ -1027,8 +1084,11 @@ StScrollBar {
         }
 
         .message {
-          &:hover,&:focus { background-color: lighten($bg_color,5%); }
-          border-radius: 3px;
+          border: 1px solid $_bubble_borders_color;
+          background-color: lighten($bg_color, 2%);
+          &:hover,&:focus { background-color: $_hover_bg_color; }
+          &:active { background-color: transparentize($fg_color, 0.84) }
+          border-radius: 5px;
         }
 
           .message-icon-bin {
@@ -1037,7 +1097,7 @@ StScrollBar {
           }
 
           .message-icon-bin > StIcon {
-            color: darken($fg_color,20%);
+            color: $fg_color;
             icon-size: 1.09em;
             -st-icon-style: symbolic;
           }
@@ -1052,7 +1112,7 @@ StScrollBar {
           }
 
           .message-secondary-bin > .event-time {
-            color: darken($fg_color,40%);
+            color: $fg_color;
             font-size: 0.7em;
             /* HACK: the label should be baseline-aligned with a 1em label,
                      fake this with some bottom padding */
@@ -1064,17 +1124,17 @@ StScrollBar {
           }
 
           .message-title {
-            color: darken($fg_color,5%);
+            color: $fg_color;            
           }
 
           .message-content {
-            color: darken($fg_color,20%);
+            color: darken($fg_color, 10%);
             padding: 10px;
           }
 
           .message-media-control {
             padding: 12px;
-            color: darken($fg_color, 20%);
+            color: lighten($fg_color, 15%);
 
             &:last-child:ltr { padding-right: 18px; }
             &:last-child:rtl { padding-left: 18px; }
@@ -1085,9 +1145,9 @@ StScrollBar {
           .media-message-cover-icon {
             icon-size: 48px !important;
             &.fallback {
-              color: lighten($bg_color,10%);
+              color: lighten($fg_color,10%);
               background-color: $bg_color;
-              border: 2px solid $bg_color;
+              border: 1px solid $bg_color;
               border-radius: 2px;
               icon-size: 32px !important;
               padding: 6px; }
@@ -1129,15 +1189,18 @@ StScrollBar {
     color: $fg_color;
     border-radius: 32px; /* wish we could do 50% */
     padding: 13px;
-    border: 1px solid lighten($borders_color,5%);
+    border: 1px solid $_bubble_borders_color;
 
     &:hover, &:focus {
-      background-color: transparentize($fg_color,0.9);
+      background-color: $_hover_bg_color;
       color: $fg_color;
       border: none;
       padding: 14px;
     }
-    &:active { background-color: $selected_bg_color; color: $selected_fg_color; }
+    &:active { 
+      background-color: $selected_bg_color;
+      color: $selected_fg_color;
+    }
 
     & > StIcon { icon-size: 16px; }
   }
@@ -1207,6 +1270,7 @@ StScrollBar {
 /* NETWORK DIALOGS */
 
 .nm-dialog {
+  @extend %bubble-panel;
   max-height: 34em;
   min-height: 31em;
   min-width: 32em;
@@ -1282,23 +1346,23 @@ StScrollBar {
   }
 
   //search entry
-  .search-entry {
+  .search-entry, %search_entry {
     width: 320px;
     padding: 7px 9px;
-    border-radius: 6px;
-    border-color: darken($osd_fg_color,50%);
-    color: $osd_fg_color;
-    background-color: $osd_bg_color;
+    border-radius: 18px;
+    color: $fg_color;
+    background-color: $base_color;
+    border-color: $borders_color;
     &:focus {
       padding: 6px 8px;
       border-width: 2px;
       border-color: $selected_bg_color;
     }
 
-    .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); }
+    .search-entry-icon { icon-size: 1em; padding: 0 4px; color: $fg_color; }
 
     &:hover, &:focus {
-      .search-entry-icon { color: $fg_color; }
+      .search-entry-icon { color: transparentize($fg_color,.3); }
     }
   }
 
@@ -1327,7 +1391,7 @@ StScrollBar {
 
   .list-search-result-content { spacing: 30px; }
   .list-search-result-title { color: darken($osd_fg_color,5%); spacing: 12px; }
-  .list-search-result-description { color: transparentize(darken($osd_fg_color,15%), 0.5); }
+  .list-search-result-description { color: darken($osd_fg_color, 30%); }
   .list-search-provider-details { width: 150px; color: darken($osd_fg_color,5%); margin-top: 0.24em; }
   .list-search-provider-content { spacing: 20px; }
   .search-provider-icon { padding: 15px; }
@@ -1336,12 +1400,9 @@ StScrollBar {
   /* DASHBOARD */
 
   #dash {
+    @extend %overview-panel;
     font-size: 9pt;
-    color: $_bubble_fg_color;
-    background-color: $_bubble_bg_color;
     padding: 4px 0;
-    border: 1px solid rgba(128, 128, 128, 0.4);
-    border-left: 0px;
     border-radius: 0px 9px 9px 0px;
 
     &:rtl {
@@ -1369,7 +1430,8 @@ StScrollBar {
     border-radius: 7px;
     padding: 4px 12px;
     color: $osd_fg_color;
-    background-color: transparentize($osd_bg_color,0.3);
+    background-color: transparentize($osd_bg_color,0.05);
+    border: 1px solid $osd_outer_borders_color;
     text-align: center;
     -x-offset: 8px;
   }
@@ -1396,13 +1458,29 @@ StScrollBar {
   }
   .app-view-control { //favorties | all toggle button
     padding: 4px 32px;
-    &:checked { @include button(active); }
+    margin: 0 4px;
+    &, &:hover, &:checked { @include button(undecorated); }
+
+    &, &:hover { color: darken($osd_fg_color, 25%); }
+
+    &:hover { box-shadow: inset 0 -2px darken($osd_fg_color, 25%); }
+
+    &:active {
+      box-shadow: inset 0 -2px $osd_fg_color;
+    }
+
+    &:checked {
+      color: $osd_fg_color;
+      box-shadow: inset 0 -2px $selected_bg_color;
+    }
+
     &:first-child {
       border-right-width: 0;
-      border-radius: 3px 0 0 3px;
+      border-radius: 0;
     }
+
     &:last-child {
-     border-radius: 0 3px 3px 0;
+     border-radius: 0;
     }
   }
 
@@ -1425,8 +1503,7 @@ StScrollBar {
     }
     &:active .overview-icon,
     &:checked .overview-icon {
-      background-color: transparentize(darken($osd_bg_color,10%),.1);
-      box-shadow: inset 0 1px 2px $osd_borders_color;
+      background-color: transparentize(darken($osd_bg_color,10%), 0.5);
     }
     &:hover .overview-icon,
     &:focus .overview-icon,
@@ -1447,7 +1524,7 @@ StScrollBar {
 
   %icon_tile {
     color: $osd_fg_color;
-    border-radius: 4px;
+    border-radius: $medium_radius;
     padding: 6px;
     border: 1px solid transparent;
     transition-duration: 100ms;
@@ -1468,7 +1545,7 @@ StScrollBar {
   // Collections
   .app-folder-popup { //expanded collection
     -arrow-border-radius: 8px;
-    -arrow-background-color: transparentize($osd_bg_color,0.7);
+    -arrow-background-color: transparentize(darken($osd_bg_color,10%), 0.5);
     -arrow-base: 24px;
     -arrow-rise: 11px;
   }
@@ -1521,7 +1598,7 @@ StScrollBar {
     }
   }
   .workspace-thumbnail-indicator {
-    border: 4px solid $selected_bg_color;
+    border: 2px solid $selected_bg_color;
     padding: 1px;
   }
 
@@ -1534,15 +1611,15 @@ StScrollBar {
   }
 
 %overview-panel {
-  color: $_bubble_fg_color;
-  background-color: $_bubble_bg_color;
-  border: 1px solid $_bubble_borders_color;
+  color: $osd_fg_color;
+  background-color: transparentize($osd_bg_color, 0.1);
+  border: none;
 }
 
 %status_text {
   font-size: 2em;
   font-weight: bold;
-  color: $fg_color;
+  color: $osd_fg_color;
 }
 
 /* NOTIFICATIONS & MESSAGE TRAY */
@@ -1554,28 +1631,38 @@ StScrollBar {
     font-size: 11pt;
     width: 34em;
     margin: 5px;
-    border-radius: 6px;
-    color: $_bubble_fg_color;
-    background-color: $_bubble_bg_color;
-    border: 1px solid $borders_color;
-    //box-shadow: 0 1px 4px black;
-    &:hover { background-color: $_bubble_bg_color; }
-    &:focus { background-color: $_bubble_bg_color; }
-
-    .notification-icon { padding: 5px; }
+    border-radius: $medium-radius;
+    border: if($variant == 'light', none, $_bubble_borders_color);
+    min-height: 64px;
+    box-shadow: 0 1px 2px transparentize(black, 0.7);
+    &:hover { background: $bg_color; }
+    &, &:focus, &:active {
+      background-color: $bg_color;
+      .message-title { color: $fg_color }
+      .message-content { color: $fg_color; }
+    }
+
+    .message-icon-bin > StIcon {
+      color: $fg_color;
+    }
+
+    StEntry { @extend %bubble-entry; }
+
+    .notification-icon { padding: 5px; }  
     .notification-content { padding: 5px; spacing: 5px; }
     .secondary-icon { icon-size: 1.09em; }
     .notification-actions {
-      background-color: $borders_color;
-      padding-top: 2px;
-      spacing: 1px;
+      padding-top: 0;
+      color: $fg_color;
+      border-top: 1px solid $_bubble_borders_color;
+      spacing: 0px;
     }
     .notification-button {
-      padding: 4px 4px 5px;
-      background-color: darken($_bubble_bg_color,5%);
-      &:first-child { border-radius: 0 0 0 6px; }
-      &:last-child { border-radius: 0 0 6px 0; }
-      &:hover, &focus { background-color: darken($_bubble_bg_color,2%); }
+      @extend %bubble_button;
+      &:focus { box-shadow: none; }
+      padding: 0 16px;
+      min-height: 35px;
+      border: none;
     }
   }
   .summary-source-counter {
@@ -1586,7 +1673,7 @@ StScrollBar {
     -shell-counter-overlap-y: 3px;
     background-color: $selected_bg_color;
     color: $selected_fg_color;
-    border: 2px solid $osd_fg_color;
+    border: 2px solid $fg_color;
     box-shadow: 0 2px 2px rgba(0,0,0,0.5);
     border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
   }
@@ -1604,14 +1691,14 @@ StScrollBar {
   }
   .chat-sent {
     padding-left: 18pt;
-    color: darken($fg_color, 15%);
+    color: lighten($fg_color, 15%);
     &:rtl { padding-left: 0; padding-right: 18pt; }
   }
   .chat-meta-message {
     padding-left: 4px;
     font-size: 9pt;
     font-weight: bold;
-    color: darken($fg_color,20%);
+    color: lighten($fg_color,18%);
     &:rtl { padding-left: 0; padding-right: 4px; }
   }
 
@@ -1621,6 +1708,8 @@ StScrollBar {
     padding: 2px 72px 2px 12px;
   }
     .hotplug-notification-item {
+      @extend %bubble_button;
+      border: none; box-shadow: none;
       padding: 2px 10px;
       &:focus { padding: 1px 71px 1px 11px; }
     }
@@ -1635,7 +1724,7 @@ StScrollBar {
     .hotplug-resident-mount {
       spacing: 8px;
       border-radius: 4px;
-      &:hover { background-color: transparentize($bg_color,0.7); }
+      &:hover { background-color: $_hover_bg_color; }
     }
 
     .hotplug-resident-mount-label {
@@ -1741,7 +1830,7 @@ StScrollBar {
     -arrow-border-radius: 10px;
     -arrow-background-color: transparentize($osd_bg_color, 0.3);
     -arrow-border-width: 2px;
-    -arrow-border-color: $_bubble_borders_color;
+    -arrow-border-color: $osd_outer_borders_color;
     -arrow-base: 20px;
     -arrow-rise: 10px;
     -boxpointer-gap: 5px;
@@ -1816,18 +1905,68 @@ StScrollBar {
   border: none;
   background-color: transparent;
 
+  $_gdm_fg: #f6f5f4;
+  $_gdm_bg: lighten(#2e3436, 19%);
+
+  StEntry {
+    @extend %search_entry;
+    border-radius: 5px;
+    @if $variant=='dark' {
+      $_gdm_entry_bg: transparentize(lighten(desaturate(#241f31, 20%), 2%), 0.5);
+      background-color: $_gdm_entry_bg;
+      border-color: $_gdm_entry_bg;    
+      color: $osd_fg_color;
+    }
+  }
+
   .modal-dialog-button-box { spacing: 3px; }
   .modal-dialog-button {
-    padding: 3px 18px;
-    &:default {
-      @include button(normal,$c:$selected_bg_color);
-      &:hover,&:focus { @include button(hover,$c:$selected_bg_color); }
-      &:active { @include button(active,$c:$selected_bg_color); }
-      &:insensitive { @include button(insensitive); }
+    padding: 4px 18px;
+    box-shadow: 0 1px 3px transparentize($shadow_color, 0.02);
+    background-color: $_gdm_bg;
+    border-color: $_gdm_bg;
+    color: $_gdm_fg;
 
+    $_hover_c: lighten($_gdm_bg, 5%);
+    &:hover, &:focus {
+      background-color: $_hover_c;
+      border-color: $_hover_c;
+    }
+    &:active {
+      $_active_c: darken($_gdm_bg, 5%);
+      box-shadow: none;
+      background-color: $_active_c;
+      border-color: $_active_c;
+    }
+    &:insensitive {
+      @include button(insensitive);
+      border-color: darken($_gdm_bg, 5%);
+      background-color: darken($_gdm_bg, 5%);
+      color: transparentize($_gdm_fg, 0.3);
+    }
+    &:default {
+      @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
+      border-color: $selected_bg_color;
+      &:hover, &:focus { 
+        @include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color);
+        $_def_hover_c: lighten($selected_bg_color, 5%);
+        background-color: $_def_hover_c;
+        border-color: $_def_hover_c;
+      }
+      &:active {
+        @include button(active,$c:$selected_bg_color, $tc:$selected_fg_color);
+        $_def_active_c: darken($selected_bg_color, 5%);
+        background-color: $_def_active_c;
+        border-color: $_def_active_c;
+      }
+      &:insensitive {
+        @include button(insensitive);
+        border-color: darken($selected_bg_color, 10%);
+        background-color: darken($selected_bg_color, 10%);
+        color: transparentize($selected_fg_color, 0.3);
+      }
     }
   }
-
 }
 
   .login-dialog-logo-bin { padding: 24px 0px; }
@@ -1909,6 +2048,8 @@ StScrollBar {
 
 //SCREEN SHIELD
 
+$_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
+
 .screen-shield-arrows {
     padding-bottom: 3em;
 }
@@ -1918,12 +2059,12 @@ StScrollBar {
     width: 80px;
     height: 48px;
     -arrow-thickness: 12px;
-    -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4);
+    -arrow-shadow: $_screenshield_shadow;
 }
 
 .screen-shield-clock {
   color: white;
-  text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
+  text-shadow: $_screenshield_shadow;
   font-weight: bold;
   text-align: center;
   padding-bottom: 1.5em;
@@ -1931,7 +2072,7 @@ StScrollBar {
 
 .screen-shield-clock-time {
   font-size: 72pt;
-  text-shadow: 0px 2px 2px rgba(0,0,0,0.4);
+  text-shadow: $_screenshield_shadow;
   font-feature-settings: "tnum";
 }
 
@@ -1953,9 +2094,9 @@ StScrollBar {
   .notification,
   .screen-shield-notification-source {
     padding: 12px 6px;
-    border: 1px solid $_bubble_borders_color;
+    border: 1px solid $osd_outer_borders_color;
     background-color: transparentize($osd_bg_color,0.5);
-    color: $_bubble_fg_color;
+    color: $osd_fg_color;
     border-radius: 4px;
   }
   .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar
@@ -1969,7 +2110,7 @@ StScrollBar {
 
 .screen-shield-notification-count-text { padding: 0px 0px 0px 12px; }
 
-#panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); }
+#panel.lock-screen { background-color: transparentize($osd_bg_color, 0.5); }
 
 .screen-shield-background { //just the shadow, really
   background: black;
@@ -1977,7 +2118,7 @@ StScrollBar {
 }
 
 #lockDialogGroup {
-  background: #2e3436 url(resource:///org/gnome/shell/theme/noise-texture.png);
+  background: lighten(#2e3436, 8%) url(resource:///org/gnome/shell/theme/noise-texture.png);
   background-repeat: repeat;
 }
 
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 7ac18b1bbd..8f4611c34a 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -37,16 +37,13 @@
 // possible $t values:
 // normal, focus, insensitive
 //
-  $_inner_shadows: inset 0 2px 4px transparentize(black, 0.6);
 
   @if $t==normal {
     background-color: $base_color;
     border-color: $borders_color;
-    @include _shadows($_inner_shadows);
 
   }
   @if $t==focus {
-    @include _shadows($_inner_shadows);
     border-color: if($fc==$selected_bg_color,
                      $selected_borders_color,
                      darken($fc,35%));
@@ -111,7 +108,7 @@
   }
 }
 
-@mixin button($t, $c:$osd_bg_color, $tc:$fg_color, $edge: $borders_edge) {
+@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) {
 //
 // Button drawing function
 //
@@ -130,46 +127,39 @@
   $_hilight_color: _button_hilight_color($c);
   $_button_edge: if($edge == none, none, _widget_edge($edge));
   $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
-
+  $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
 
   @if $t==normal {
   //
   // normal button
   //
-    $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5),
-                            $osd_bg_color);
 
-    color: $osd_fg_color;
-    background-color: $_bg;
-    border-color: $osd_borders_color;
-    box-shadow: inset 0 1px lighten($osd_bg_color,10%);
+    color: $tc;
+    background-color: $c;
+    border-color: $borders_color;
+    box-shadow: $_button_shadow;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
   }
   @if $t==focus {
   //
   // focused button
-  //
-    $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3),
-                          lighten($osd_bg_color,3%));
-
-    color: $osd_fg_color;
+  //  
+    color: $tc;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
-    box-shadow: inset 0px 0px 0px 1px $selected_bg_color;
+    box-shadow: inset 0px 0px 0px 2px $selected_bg_color;
+    //border-color: $selected_bg_color;
   }
 
   @else if $t==hover {
   //
   // active osd button
   //
-    $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3),
-                            lighten($osd_bg_color,3%));
-
-    color: white;
-    border-color: $osd_borders_color;
-    background-color: $_bg;
-    box-shadow: inset 0 1px lighten($osd_bg_color,20%);
+    color: $tc;
+    border-color: $borders_color;
+    background-color: $c;
+    box-shadow: $_button_shadow;
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
 
@@ -178,27 +168,18 @@
   //
   // active osd button
   //
-    $_bg: if($c!=$bg_color, $c, $osd_borders_color);
-
-    color: white;
-    border-color: $osd_borders_color;
-    background-color: $selected_bg_color;
-    // This should be none, but it's creating some issues with borders, so to
-    // workaround it for now, use inset wich goes through a different code path.
-    // see https://bugzilla.gnome.org/show_bug.cgi?id=752934
-    box-shadow: inset 0 0 black;
+    color: $tc;
+    border-color: $borders_color;
+    background-color: $c;
     text-shadow: none;
     icon-shadow: none;
+    box-shadow: none;
   }
   @else if $t==insensitive {
-  //
-  // insensitive osd button
-  //
-    $_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3);
 
     color: $insensitive_fg_color;
-    border-color: $osd_borders_color;
-    background-color: $_bg;
+    border-color: $insensitive_borders_color;
+    background-color: $insensitive_bg_color;
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none;
diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss 
b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index af1e52f0c2..cba0145ac0 100644
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -26,6 +26,7 @@ $osd_borders_color: transparentize(black, 0.3);
 $osd_outer_borders_color: transparentize(white, 0.9);
 
 $tooltip_borders_color: $osd_outer_borders_color;
+$shadow_color: transparentize(black, 0.9);
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/data/theme/toggle-off-dark.svg b/data/theme/toggle-off-dark.svg
new file mode 100644
index 0000000000..ef1e25f970
--- /dev/null
+++ b/data/theme/toggle-off-dark.svg
@@ -0,0 +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"><rect style="marker:none" width="44.446" 
height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#323233" stroke="#272728"/><rect 
ry="10.455" rx="10.455" y="291.715" x=".543" height="20.911" width="21.143" style="marker:none" 
fill="url(#b)" stroke="#151515"/></g></svg>
\ No newline at end of file
diff --git a/data/theme/toggle-off.svg b/data/theme/toggle-off.svg
new file mode 100644
index 0000000000..ee51782943
--- /dev/null
+++ b/data/theme/toggle-off.svg
@@ -0,0 +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-widt
 h="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>
\ No newline at end of file
diff --git a/data/theme/toggle-on-dark.svg b/data/theme/toggle-on-dark.svg
new file mode 100644
index 0000000000..b71931ac84
--- /dev/null
+++ b/data/theme/toggle-on-dark.svg
@@ -0,0 +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>
\ No newline at end of file
diff --git a/data/theme/toggle-on.svg b/data/theme/toggle-on.svg
new file mode 100644
index 0000000000..28be67e289
--- /dev/null
+++ b/data/theme/toggle-on.svg
@@ -0,0 +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>
\ No newline at end of file
diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js
index c7e4d51f28..948cc0de38 100644
--- a/js/ui/lightbox.js
+++ b/js/ui/lightbox.js
@@ -7,7 +7,7 @@ const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
 
 var DEFAULT_FADE_FACTOR = 0.4;
-var VIGNETTE_BRIGHTNESS = 0.8;
+var VIGNETTE_BRIGHTNESS = 0.2;
 var VIGNETTE_SHARPNESS = 0.7;
 
 const VIGNETTE_DECLARATIONS = '\
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]