From 682ce6ec3d6ec2a58a1c73bf2865ba2ed92e6a0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= <daniruiz@kali.org>
Date: Wed, 9 Mar 2022 12:02:30 +0100
Subject: [PATCH] Gnome-Shell: change bg colors of buttons and cards

---
 .../Kali-Dark/gnome-shell/gnome-shell.css     | 274 +++++++++++-------
 .../Kali-Light/gnome-shell/gnome-shell.css    | 236 ++++++++++-----
 .../Kali/sass/gnome-shell/_common-tweaks.scss |   2 -
 .../upstream/gnome-shell-sass/_drawing.scss   |  25 +-
 .../gnome-shell-sass/_drawing.scss.patch      |  41 +++
 5 files changed, 392 insertions(+), 186 deletions(-)

diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css
index c30ab59a..5a3e78e3 100644
--- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css
+++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css
@@ -54,70 +54,90 @@ stage {
   border-width: 1px;
   font-weight: bold;
   padding: 3px 24px;
+  border: 1px solid transparent;
   color: #eeeeec;
-  background-color: #2d2f38; }
+  background-color: #2e313d;
+  border-color: #1a1c23; }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #2c364c;
+    background-color: #2d3850;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover {
-      background-color: #333d54;
+      background-color: #333e58;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active {
-      background-color: #39435b;
+      background-color: #394560;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #343640; }
+    background-color: #333742;
+    border-color: #1a1c23; }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive {
+    border: 1px solid transparent;
     color: rgba(238, 238, 236, 0.5);
-    background-color: rgba(238, 238, 236, 0.05); }
+    background-color: rgba(238, 238, 236, 0.05);
+    border-color: #0d0e11; }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #3b3d49; }
+    background-color: #393c47;
+    border-color: #0b0b0e; }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #414451; }
+    background-color: #3f424d; }
     #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover {
-      background-color: #484b5a; }
+      background-color: #484d60; }
     #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active {
-      background-color: #4f5362; }
+      background-color: #4e5468; }
 
 .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button {
   padding: 12px;
   font-weight: bold !important;
+  border: 1px solid transparent;
   color: #eeeeec;
-  background-color: #3b3f4b; }
+  background-color: #3d4251;
+  border-color: #292c37; }
   .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr {
     margin-right: 1px; }
   .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl {
     margin-left: 1px; }
   .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive {
+    border: 1px solid transparent;
     color: rgba(238, 238, 236, 0.5);
-    background-color: rgba(238, 238, 236, 0.05); }
+    background-color: rgba(238, 238, 236, 0.05);
+    border-color: #0d0e11; }
   .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #39455d;
+    background-color: #3b4763;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover {
-      background-color: #3f4b65;
+      background-color: #414d6a;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active {
-      background-color: #45526c;
+      background-color: #465472;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #424654; }
+    background-color: #424756;
+    border-color: #292c37; }
   .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #484d5c; }
+    background-color: #474c5a;
+    border-color: #1a1c23; }
   .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #4f5565; }
+    background-color: #4d515f; }
     .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover {
-      background-color: #565c6d; }
+      background-color: #575e74; }
     .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active {
-      background-color: #5d6376; }
+      background-color: #5e657d; }
   .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr {
     border-radius: 0 0 0 10px; }
   .modal-dialog .modal-dialog-linked-button:last-child:ltr, .hotplug-notification-item:last-child:ltr, .notification-banner .notification-button:last-child:ltr {
@@ -134,42 +154,56 @@ stage {
     margin-right: 0 !important; }
 
 .screenshot-ui-show-pointer-button, .screenshot-ui-type-button {
+  border: 1px solid transparent;
   background-color: transparent;
-  background-color: none; }
+  background-color: none;
+  border-color: transparent; }
   .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
+    border: 1px solid transparent;
     color: rgba(238, 238, 236, 0.5);
     background-color: rgba(238, 238, 236, 0.05);
+    border-color: #0d0e11;
     background-color: transparent; }
   .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
+    border: 1px solid transparent;
     background-color: transparent;
-    background-color: none; }
+    background-color: none;
+    border-color: transparent; }
     .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive {
+      border: 1px solid transparent;
       color: rgba(238, 238, 236, 0.5);
       background-color: rgba(238, 238, 236, 0.05);
+      border-color: #0d0e11;
       background-color: transparent; }
   .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #37435a;
+    background-color: #394560;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover {
-      background-color: #3d4962;
+      background-color: #3f4b68;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active {
-      background-color: #43506a;
+      background-color: #455170;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #404451; }
+    background-color: #404453;
+    border-color: #272a34; }
   .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #474b59; }
+    background-color: #454a58;
+    border-color: #181a20; }
   .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #4d5362; }
+    background-color: #4b4f5c; }
     .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover {
-      background-color: #545a6a; }
+      background-color: #555b71; }
     .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active {
-      background-color: #5b6173; }
+      background-color: #5b627a; }
 
 /* General Typography */
 .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext {
@@ -484,60 +518,82 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   background-color: transparent;
   background-color: none;
+  border-color: transparent;
   box-shadow: none !important;
   padding: 9px; }
   .datemenu-today-button:insensitive {
+    border: 1px solid transparent;
     color: rgba(238, 238, 236, 0.5);
     background-color: rgba(238, 238, 236, 0.05);
+    border-color: #0d0e11;
     background-color: transparent; }
+  .datemenu-today-button:insensitive {
+    border-color: transparent; }
   .datemenu-today-button:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #2c364c;
+    background-color: #2d3850;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .datemenu-today-button:focus:hover {
-      background-color: #333d54;
+      background-color: #333e58;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .datemenu-today-button:focus:active {
-      background-color: #39435b;
+      background-color: #394560;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .datemenu-today-button:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #343640; }
+    background-color: #333742;
+    border-color: #1a1c23; }
   .datemenu-today-button:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #3b3d49; }
+    background-color: #393c47;
+    border-color: #0b0b0e; }
 
 /* Calendar */
 .calendar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   background-color: transparent;
   background-color: none;
+  border-color: transparent;
   box-shadow: none !important;
   margin-top: 0; }
   .calendar:insensitive {
+    border: 1px solid transparent;
     color: rgba(238, 238, 236, 0.5);
     background-color: rgba(238, 238, 236, 0.05);
+    border-color: #0d0e11;
     background-color: transparent; }
+  .calendar:insensitive {
+    border-color: transparent; }
   .calendar:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #2c364c;
+    background-color: #2d3850;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .calendar:focus:hover {
-      background-color: #333d54;
+      background-color: #333e58;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .calendar:focus:active {
-      background-color: #39435b;
+      background-color: #394560;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .calendar:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #343640; }
+    background-color: #333742;
+    border-color: #1a1c23; }
   .calendar:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #3b3d49; }
+    background-color: #393c47;
+    border-color: #0b0b0e; }
   .calendar .calendar-month-header .calendar-change-month-back StIcon,
   .calendar .calendar-month-header .calendar-change-month-forward StIcon {
     icon-size: 1.09em; }
@@ -614,25 +670,32 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #eeeeec;
-  background-color: #2d2f38;
+  background-color: #2e313d;
+  border-color: #1a1c23;
   padding: 12px; }
   .events-button:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #2c364c;
+    background-color: #2d3850;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .events-button:focus:hover {
-      background-color: #333d54;
+      background-color: #333e58;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .events-button:focus:active {
-      background-color: #39435b;
+      background-color: #394560;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .events-button:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #343640; }
+    background-color: #333742;
+    border-color: #1a1c23; }
   .events-button:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #3b3d49; }
+    background-color: #393c47;
+    border-color: #0b0b0e; }
   .events-button .events-box {
     spacing: 6px; }
   .events-button .events-list {
@@ -648,25 +711,32 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #eeeeec;
-  background-color: #2d2f38;
+  background-color: #2e313d;
+  border-color: #1a1c23;
   padding: 12px; }
   .world-clocks-button:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #2c364c;
+    background-color: #2d3850;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .world-clocks-button:focus:hover {
-      background-color: #333d54;
+      background-color: #333e58;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .world-clocks-button:focus:active {
-      background-color: #39435b;
+      background-color: #394560;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .world-clocks-button:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #343640; }
+    background-color: #333742;
+    border-color: #1a1c23; }
   .world-clocks-button:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #3b3d49; }
+    background-color: #393c47;
+    border-color: #0b0b0e; }
   .world-clocks-button .world-clocks-grid {
     spacing-rows: 6px;
     spacing-columns: 12px; }
@@ -688,25 +758,32 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #eeeeec;
-  background-color: #2d2f38;
+  background-color: #2e313d;
+  border-color: #1a1c23;
   padding: 12px; }
   .weather-button:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #2c364c;
+    background-color: #2d3850;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .weather-button:focus:hover {
-      background-color: #333d54;
+      background-color: #333e58;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .weather-button:focus:active {
-      background-color: #39435b;
+      background-color: #394560;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .weather-button:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #343640; }
+    background-color: #333742;
+    border-color: #1a1c23; }
   .weather-button:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #3b3d49; }
+    background-color: #393c47;
+    border-color: #0b0b0e; }
   .weather-button .weather-box {
     spacing: 10px; }
   .weather-button .weather-header-box {
@@ -774,24 +851,31 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #eeeeec;
-  background-color: #2d2f38; }
+  background-color: #2e313d;
+  border-color: #1a1c23; }
   .message:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #2c364c;
+    background-color: #2d3850;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .message:focus:hover {
-      background-color: #333d54;
+      background-color: #333e58;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .message:focus:active {
-      background-color: #39435b;
+      background-color: #394560;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .message:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #343640; }
+    background-color: #333742;
+    border-color: #1a1c23; }
   .message:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #3b3d49; }
+    background-color: #393c47;
+    border-color: #0b0b0e; }
   .message .message-icon-bin {
     padding: 18px; }
     .message .message-icon-bin:ltr {
@@ -2236,24 +2320,31 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #eeeeec;
-  background-color: #2d2f38; }
+  background-color: #2e313d;
+  border-color: #1a1c23; }
   .lg-extension:focus {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #2c364c;
+    background-color: #2d3850;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .lg-extension:focus:hover {
-      background-color: #333d54;
+      background-color: #333e58;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .lg-extension:focus:active {
-      background-color: #39435b;
+      background-color: #394560;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .lg-extension:hover {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #343640; }
+    background-color: #333742;
+    border-color: #1a1c23; }
   .lg-extension:active {
+    border: 1px solid transparent;
     color: #eeeeec;
-    background-color: #3b3d49; }
+    background-color: #393c47;
+    border-color: #0b0b0e; }
 
 .lg-extension-meta {
   spacing: 6px; }
@@ -2308,13 +2399,16 @@ StScrollBar {
       border-color: #1c1e25; }
     .login-dialog .modal-dialog-button:insensitive,
     .unlock-dialog .modal-dialog-button:insensitive {
+      border: 1px solid transparent;
       color: rgba(238, 238, 236, 0.5);
       background-color: rgba(238, 238, 236, 0.05);
+      border-color: #0d0e11;
       border-color: #1c1e25;
       background-color: #1c1e25;
       color: rgba(255, 255, 255, 0.7); }
     .login-dialog .modal-dialog-button:default,
     .unlock-dialog .modal-dialog-button:default {
+      border: 1px solid transparent;
       background-color: #2777ff;
       color: #ffffff; }
       .login-dialog .modal-dialog-button:default:focus,
@@ -2323,7 +2417,7 @@ StScrollBar {
       .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus,
       .unlock-dialog .modal-dialog-button:default:hover,
       .unlock-dialog .modal-dialog-button:default:focus {
-        background-color: #4187ff;
+        background-color: #317dfe;
         color: white; }
       .login-dialog .modal-dialog-button:default:active,
       .unlock-dialog .modal-dialog-button:default:active {
@@ -2331,8 +2425,10 @@ StScrollBar {
         color: #ededed; }
       .login-dialog .modal-dialog-button:default:insensitive,
       .unlock-dialog .modal-dialog-button:default:insensitive {
+        border: 1px solid transparent;
         color: rgba(238, 238, 236, 0.5);
         background-color: rgba(238, 238, 236, 0.05);
+        border-color: #0d0e11;
         background-color: rgba(39, 119, 255, 0.5);
         color: rgba(255, 255, 255, 0.5); }
   .login-dialog .cancel-button,
@@ -2699,34 +2795,14 @@ $_osd_color: if($variant=='light', black, $fg_color);
       background-image: url("assets/view-grid-symbolic-dark.svg"); }
 
 /* Date/Time Menu */
-.datemenu-today-button {
-  border-radius: 8px;
-  margin: 4px;
-  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
-  color: #eeeeec;
-  background-color: #2d2f38; }
-  .datemenu-today-button:focus {
-    color: #eeeeec;
-    background-color: #2c364c;
-    box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
-    .datemenu-today-button:focus:hover {
-      background-color: #333d54;
-      box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
-    .datemenu-today-button:focus:active {
-      background-color: #39435b;
-      box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
-  .datemenu-today-button:hover {
-    color: #eeeeec;
-    background-color: #343640; }
-  .datemenu-today-button:active {
-    color: #eeeeec;
-    background-color: #3b3d49; }
-  .datemenu-today-button:insensitive {
-    color: inherit; }
-  .datemenu-today-button .day-label {
-    font-weight: normal; }
-  .datemenu-today-button .date-label {
-    font-weight: lighter; }
+.datemenu-today-button:insensitive {
+  color: inherit; }
+
+.datemenu-today-button .day-label {
+  font-weight: normal; }
+
+.datemenu-today-button .date-label {
+  font-weight: lighter; }
 
 /* Search */
 .search-entry {
diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css
index b0a6710b..5b227e3f 100644
--- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css
+++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css
@@ -54,11 +54,14 @@ stage {
   border-width: 1px;
   font-weight: bold;
   padding: 3px 24px;
+  border: 1px solid transparent;
   color: #5c616c;
-  background-color: #f7f7f8; }
+  background-color: white;
+  border-color: #d1d1d1; }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #e2eaf9;
+    background-color: #e9f1ff;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover {
       background-color: #e9f1ff;
@@ -67,17 +70,24 @@ stage {
       background-color: #e9f1ff;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #fafafb;
+    border-color: #d1d1d1; }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive {
+    border: 1px solid transparent;
     color: rgba(92, 97, 108, 0.5);
-    background-color: rgba(92, 97, 108, 0.05); }
+    background-color: rgba(92, 97, 108, 0.05);
+    border-color: #d9d9d9; }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #f5f6f6;
+    border-color: #d1d1d1; }
   #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #f0f1f2; }
     #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover {
       background-color: white; }
     #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active {
@@ -86,36 +96,46 @@ stage {
 .modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button {
   padding: 12px;
   font-weight: bold !important;
+  border: 1px solid transparent;
   color: #5c616c;
-  background-color: #dadadb; }
+  background-color: #ededed;
+  border-color: #b3b3b3; }
   .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr {
     margin-right: 1px; }
   .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl {
     margin-left: 1px; }
   .modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive {
+    border: 1px solid transparent;
     color: rgba(92, 97, 108, 0.5);
-    background-color: rgba(92, 97, 108, 0.05); }
+    background-color: rgba(92, 97, 108, 0.05);
+    border-color: #d9d9d9; }
   .modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #c8d0df;
+    background-color: #d9e1ef;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover {
-      background-color: #cfd7e5;
+      background-color: #e0e8f6;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active {
-      background-color: #d6deec;
+      background-color: #e7effd;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #e2e2e3; }
+    background-color: #e9e9e9;
+    border-color: #c4c4c4; }
   .modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #eaeaea; }
+    background-color: #e4e5e5;
+    border-color: #b3b3b3; }
   .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #f1f1f2; }
+    background-color: #e0e1e2; }
     .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover {
-      background-color: #f9f9f9; }
+      background-color: white; }
     .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active {
       background-color: white; }
   .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr {
@@ -134,42 +154,56 @@ stage {
     margin-right: 0 !important; }
 
 .screenshot-ui-show-pointer-button, .screenshot-ui-type-button {
+  border: 1px solid transparent;
   background-color: transparent;
-  background-color: none; }
+  background-color: none;
+  border-color: transparent; }
   .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
+    border: 1px solid transparent;
     color: rgba(92, 97, 108, 0.5);
     background-color: rgba(92, 97, 108, 0.05);
+    border-color: #d9d9d9;
     background-color: transparent; }
   .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
+    border: 1px solid transparent;
     background-color: transparent;
-    background-color: none; }
+    background-color: none;
+    border-color: transparent; }
     .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive {
+      border: 1px solid transparent;
       color: rgba(92, 97, 108, 0.5);
       background-color: rgba(92, 97, 108, 0.05);
+      border-color: #d9d9d9;
       background-color: transparent; }
   .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #313d55;
+    background-color: #394560;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover {
-      background-color: #37435d;
+      background-color: #3f4b68;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
     .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active {
-      background-color: #3d4965;
+      background-color: #455170;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #393d4b; }
+    background-color: #3c404f;
+    border-color: #181a20; }
   .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #3f4453; }
+    background-color: #3d4150;
+    border-color: #08090b; }
   .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #464b5c; }
+    background-color: #3e4251; }
     .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover {
-      background-color: #4c5265; }
+      background-color: #555b71; }
     .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active {
-      background-color: #535a6e; }
+      background-color: #5b627a; }
 
 /* General Typography */
 .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext {
@@ -484,17 +518,24 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   background-color: transparent;
   background-color: none;
+  border-color: transparent;
   box-shadow: none !important;
   padding: 9px; }
   .datemenu-today-button:insensitive {
+    border: 1px solid transparent;
     color: rgba(92, 97, 108, 0.5);
     background-color: rgba(92, 97, 108, 0.05);
+    border-color: #d9d9d9;
     background-color: transparent; }
+  .datemenu-today-button:insensitive {
+    border-color: transparent; }
   .datemenu-today-button:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #e2eaf9;
+    background-color: #e9f1ff;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .datemenu-today-button:focus:hover {
       background-color: #e9f1ff;
@@ -503,28 +544,39 @@ StScrollBar {
       background-color: #e9f1ff;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .datemenu-today-button:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #fafafb;
+    border-color: #d1d1d1; }
   .datemenu-today-button:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #f5f6f6;
+    border-color: #d1d1d1; }
 
 /* Calendar */
 .calendar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   background-color: transparent;
   background-color: none;
+  border-color: transparent;
   box-shadow: none !important;
   margin-top: 0; }
   .calendar:insensitive {
+    border: 1px solid transparent;
     color: rgba(92, 97, 108, 0.5);
     background-color: rgba(92, 97, 108, 0.05);
+    border-color: #d9d9d9;
     background-color: transparent; }
+  .calendar:insensitive {
+    border-color: transparent; }
   .calendar:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #e2eaf9;
+    background-color: #e9f1ff;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .calendar:focus:hover {
       background-color: #e9f1ff;
@@ -533,11 +585,15 @@ StScrollBar {
       background-color: #e9f1ff;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .calendar:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #fafafb;
+    border-color: #d1d1d1; }
   .calendar:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #f5f6f6;
+    border-color: #d1d1d1; }
   .calendar .calendar-month-header .calendar-change-month-back StIcon,
   .calendar .calendar-month-header .calendar-change-month-forward StIcon {
     icon-size: 1.09em; }
@@ -614,12 +670,15 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #5c616c;
-  background-color: #f7f7f8;
+  background-color: white;
+  border-color: #d1d1d1;
   padding: 12px; }
   .events-button:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #e2eaf9;
+    background-color: #e9f1ff;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .events-button:focus:hover {
       background-color: #e9f1ff;
@@ -628,11 +687,15 @@ StScrollBar {
       background-color: #e9f1ff;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .events-button:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #fafafb;
+    border-color: #d1d1d1; }
   .events-button:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #f5f6f6;
+    border-color: #d1d1d1; }
   .events-button .events-box {
     spacing: 6px; }
   .events-button .events-list {
@@ -648,12 +711,15 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #5c616c;
-  background-color: #f7f7f8;
+  background-color: white;
+  border-color: #d1d1d1;
   padding: 12px; }
   .world-clocks-button:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #e2eaf9;
+    background-color: #e9f1ff;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .world-clocks-button:focus:hover {
       background-color: #e9f1ff;
@@ -662,11 +728,15 @@ StScrollBar {
       background-color: #e9f1ff;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .world-clocks-button:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #fafafb;
+    border-color: #d1d1d1; }
   .world-clocks-button:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #f5f6f6;
+    border-color: #d1d1d1; }
   .world-clocks-button .world-clocks-grid {
     spacing-rows: 6px;
     spacing-columns: 12px; }
@@ -688,12 +758,15 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #5c616c;
-  background-color: #f7f7f8;
+  background-color: white;
+  border-color: #d1d1d1;
   padding: 12px; }
   .weather-button:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #e2eaf9;
+    background-color: #e9f1ff;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .weather-button:focus:hover {
       background-color: #e9f1ff;
@@ -702,11 +775,15 @@ StScrollBar {
       background-color: #e9f1ff;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .weather-button:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #fafafb;
+    border-color: #d1d1d1; }
   .weather-button:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #f5f6f6;
+    border-color: #d1d1d1; }
   .weather-button .weather-box {
     spacing: 10px; }
   .weather-button .weather-header-box {
@@ -774,11 +851,14 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #5c616c;
-  background-color: #f7f7f8; }
+  background-color: white;
+  border-color: #d1d1d1; }
   .message:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #e2eaf9;
+    background-color: #e9f1ff;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .message:focus:hover {
       background-color: #e9f1ff;
@@ -787,11 +867,15 @@ StScrollBar {
       background-color: #e9f1ff;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .message:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #fafafb;
+    border-color: #d1d1d1; }
   .message:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #f5f6f6;
+    border-color: #d1d1d1; }
   .message .message-icon-bin {
     padding: 18px; }
     .message .message-icon-bin:ltr {
@@ -2236,11 +2320,14 @@ StScrollBar {
   border-radius: 8px;
   margin: 4px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid transparent;
   color: #5c616c;
-  background-color: #f7f7f8; }
+  background-color: white;
+  border-color: #d1d1d1; }
   .lg-extension:focus {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: #e2eaf9;
+    background-color: #e9f1ff;
     box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
     .lg-extension:focus:hover {
       background-color: #e9f1ff;
@@ -2249,11 +2336,15 @@ StScrollBar {
       background-color: #e9f1ff;
       box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
   .lg-extension:hover {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #fafafb;
+    border-color: #d1d1d1; }
   .lg-extension:active {
+    border: 1px solid transparent;
     color: #5c616c;
-    background-color: white; }
+    background-color: #f5f6f6;
+    border-color: #d1d1d1; }
 
 .lg-extension-meta {
   spacing: 6px; }
@@ -2308,13 +2399,16 @@ StScrollBar {
       border-color: #1c1e25; }
     .login-dialog .modal-dialog-button:insensitive,
     .unlock-dialog .modal-dialog-button:insensitive {
+      border: 1px solid transparent;
       color: rgba(92, 97, 108, 0.5);
       background-color: rgba(92, 97, 108, 0.05);
+      border-color: #d9d9d9;
       border-color: #1c1e25;
       background-color: #1c1e25;
       color: rgba(255, 255, 255, 0.7); }
     .login-dialog .modal-dialog-button:default,
     .unlock-dialog .modal-dialog-button:default {
+      border: 1px solid transparent;
       background-color: #2777ff;
       color: #ffffff; }
       .login-dialog .modal-dialog-button:default:focus,
@@ -2323,7 +2417,7 @@ StScrollBar {
       .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus,
       .unlock-dialog .modal-dialog-button:default:hover,
       .unlock-dialog .modal-dialog-button:default:focus {
-        background-color: #4187ff;
+        background-color: #2a76f8;
         color: white; }
       .login-dialog .modal-dialog-button:default:active,
       .unlock-dialog .modal-dialog-button:default:active {
@@ -2331,8 +2425,10 @@ StScrollBar {
         color: #ededed; }
       .login-dialog .modal-dialog-button:default:insensitive,
       .unlock-dialog .modal-dialog-button:default:insensitive {
+        border: 1px solid transparent;
         color: rgba(92, 97, 108, 0.5);
         background-color: rgba(92, 97, 108, 0.05);
+        border-color: #d9d9d9;
         background-color: rgba(39, 119, 255, 0.5);
         color: rgba(255, 255, 255, 0.5); }
   .login-dialog .cancel-button,
@@ -2695,34 +2791,14 @@ $_osd_color: if($variant=='light', black, $fg_color);
       background-image: url("assets/view-grid-symbolic-dark.svg"); }
 
 /* Date/Time Menu */
-.datemenu-today-button {
-  border-radius: 8px;
-  margin: 4px;
-  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
-  color: #5c616c;
-  background-color: #f7f7f8; }
-  .datemenu-today-button:focus {
-    color: #5c616c;
-    background-color: #e2eaf9;
-    box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
-    .datemenu-today-button:focus:hover {
-      background-color: #e9f1ff;
-      box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
-    .datemenu-today-button:focus:active {
-      background-color: #e9f1ff;
-      box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
-  .datemenu-today-button:hover {
-    color: #5c616c;
-    background-color: white; }
-  .datemenu-today-button:active {
-    color: #5c616c;
-    background-color: white; }
-  .datemenu-today-button:insensitive {
-    color: inherit; }
-  .datemenu-today-button .day-label {
-    font-weight: normal; }
-  .datemenu-today-button .date-label {
-    font-weight: lighter; }
+.datemenu-today-button:insensitive {
+  color: inherit; }
+
+.datemenu-today-button .day-label {
+  font-weight: normal; }
+
+.datemenu-today-button .date-label {
+  font-weight: lighter; }
 
 /* Search */
 .search-entry {
diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss
index e8d95aa9..bb61e88c 100644
--- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss
+++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss
@@ -182,8 +182,6 @@ $_osd_color: if($variant=='light', black, $fg_color);
 
 /* Date/Time Menu */
 .datemenu-today-button {
-  @include card($flat: false);
-
   &:insensitive { color: inherit; }
 
   .day-label { font-weight: normal; }
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss
index 9fe5eb8c..c357f2ca 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss
@@ -130,12 +130,19 @@
 }
 
 
+@function draw_border_color ($c) {
+  //
+  // colored buttons want the border form the base color
+  //
+  @return if($variant == 'light', darken($c, 18%), darken($c, 4%));
+}
+
 // buttons
 // since buttons are all flat an borderless now the mixin is simpler
 
 @mixin button($t, $tc:$fg_color, $c:$bg_color) {
 
-$button_bg_color: mix($tc, $c, 5%);
+$button_bg_color: lighten($c, 5%);
 //
 // Button drawing function
 //
@@ -149,10 +156,13 @@ $button_bg_color: mix($tc, $c, 5%);
 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
 
+  border: 1px solid transparent;
+
   // normal button
   @if $t==normal {
     color: $tc;
     background-color: $button_bg_color;
+    border-color: draw_border_color($c);
   }
 
   // focused button
@@ -173,19 +183,21 @@ $button_bg_color: mix($tc, $c, 5%);
   // hover button
   @else if $t==hover {
     color: $tc;
-    background-color: lighten($button_bg_color, 3%);
+    background-color: mix($tc, $button_bg_color, 3%);
+    border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
   }
 
   // active button
   @else if $t==active {
     color: $tc;
-    background-color:  lighten($button_bg_color, 6%);
+    background-color:  mix($tc, $button_bg_color, 6%);
+    border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
   }
 
   // checked button
   @else if $t==checked {
     color: $tc;
-    background-color: lighten($button_bg_color, 9%);
+    background-color: mix($tc, $button_bg_color, 9%);
     &:hover { background-color: lighten($button_bg_color, 12%);}
     &:active { background-color: lighten($button_bg_color, 15%);}
   }
@@ -194,6 +206,7 @@ $button_bg_color: mix($tc, $c, 5%);
   @else if $t==insensitive {
     color: transparentize($tc, 0.5);
     background-color: transparentize($tc, .95);
+    border-color: $insensitive_borders_color;
   }
 
   // default/suggested button
@@ -204,7 +217,7 @@ $button_bg_color: mix($tc, $c, 5%);
       box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
     }
     &:hover, &:focus { 
-      background-color: lighten($selected_bg_color, 5%);
+      background-color: mix($tc, $selected_bg_color, 5%);
       color: lighten($selected_fg_color, 5%);
     }
     &:active {
@@ -222,6 +235,7 @@ $button_bg_color: mix($tc, $c, 5%);
   @else if $t==undecorated {
     background-color: transparent;
     background-color: none;
+    border-color: transparent;
     &:insensitive {
       @include button(insensitive);
       background-color: transparent;
@@ -294,6 +308,7 @@ $button_bg_color: mix($tc, $c, 5%);
   @if $flat {
     @include button(undecorated);
     box-shadow: none !important;
+    &:insensitive { border-color: transparent; }
   } @else {
     @include button(normal);
   }
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch
index a52d04b6..6c1b7b98 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch
@@ -1,4 +1,45 @@
+132a133,139
+> @function draw_border_color ($c) {
+>   //
+>   // colored buttons want the border form the base color
+>   //
+>   @return if($variant == 'light', darken($c, 18%), darken($c, 4%));
+> }
+> 
+138c145
+< $button_bg_color: mix($tc, $c, 5%);
+---
+> $button_bg_color: lighten($c, 5%);
+151a159,160
+>   border: 1px solid transparent;
+> 
+155a165
+>     border-color: draw_border_color($c);
+176c186,187
+<     background-color: lighten($button_bg_color, 3%);
+---
+>     background-color: mix($tc, $button_bg_color, 3%);
+>     border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
+182c193,194
+<     background-color:  lighten($button_bg_color, 6%);
+---
+>     background-color:  mix($tc, $button_bg_color, 6%);
+>     border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
+188c200
+<     background-color: lighten($button_bg_color, 9%);
+---
+>     background-color: mix($tc, $button_bg_color, 9%);
+196a209
+>     border-color: $insensitive_borders_color;
+207c220
+<       background-color: lighten($selected_bg_color, 5%);
+---
+>       background-color: mix($tc, $selected_bg_color, 5%);
+224a238
+>     border-color: transparent;
 228c228
 <       color: transparentize($selected_fg_color, .5);
 ---
 >       //color: transparentize($selected_fg_color, .5);
+296a311
+>     &:insensitive { border-color: transparent; }