[gimp/wip/akkana/Light-theme: 9/16] Lots of fixes to the Light theme.

[Akkana Peck <akkana src gnome org>]

commit ec5e56a6fd43e4b176925594783e8b59fbed4123
Author: Akkana Peck <akkana shallowsky com>
Date:   Tue Aug 9 19:56:33 2022 -0600

    Lots of fixes to the Light theme.

 themes/Light/gimp.css | 184 ++++++++++++++++++++++++++------------------------
 1 file changed, 94 insertions(+), 90 deletions(-)
---
diff --git a/themes/Light/gimp.css b/themes/Light/gimp.css
index cdfc143da6..b5577321d3 100644
--- a/themes/Light/gimp.css
+++ b/themes/Light/gimp.css
@@ -1,46 +1,72 @@
 /* A light theme for GIMP 3.0 */
 
 /* Known problems:
- * - The dark padding around the "Reload Current Theme" button
- * - The black GimpColorHistory + button in the gimpcolordialog
- * - The tooltip over main menu items, or over the GimpColorHistory+ button
+   - The padding around the "Reload Current Theme" button doesn't match
+     the button. The border around that button is controlled only by the
+     "Use dark theme variant if available" checkbox and it's not clear
+     where the actual color comes from.
+     Styling the interior of the Reload button to match the mysterious
+     background color has an unfortunate result of styling lots of
+     other areas in unfortunate ways.
  */
 
 /* Hint for debugging themes:
  * first enable the GTK inspector with
    gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
  * then (after restarting GIMP) call it up with ctrl+shift+i
+ * or from GIMP's UI: File > Debug > Start GtkInspector
  */
 
+* {
+  -GimpToolPalette-tool-icon-size:   large-toolbar;
+
+  /* Default text color; needed for e.g. the Prefs dialog title area,
+   * which doesn't have any more specific way to style it.
+   */
+  color: black;
+}
+
 #image-menubar, GtkImageMenuItem {
-   background-color: rgb(230,230,230);
+   background-color: rgb(235,235,235);
    color: black;
 }
 
 /* TreeViews, e.g. in a file picker or the Prefs dialog */
 .view {
-   background-color: rgb(245,245,245);
+   background-color: rgb(250,250,250);
    color: black;
 }
 
 .view:selected {
-   background-color: rgb(210,210,210);
+   background-color: rgb(220,220,220);
    color: black;
 }
 
+/* The main image window before it has an image in it,
+ * and the buttonbar along the bottoms of dialogs.
+ * Foreground color here is the text color, not the Wilber color.
+ * background-color and background here are ignored.
+ */
+GimpDisplayShell, GimpDock, .dialog-action-box, .dialog-vbox {
+  color: rgb(100,100,100);
+}
+
+/* Foreground color for the big Wilber in the empty image window.
+ * Again, background-color and background here are ignored.
+ */
 #gimp-canvas {
-  color: rgb(230,230,23);
+  color: rgb(100,100,100);
 }
 
-/* The main image window before it has an image in it,
- * and the buttonbar along the bottoms of dialogs.
+/* The drop target at the top with the mini wWlber.
+ * Setting background-color here works, but setting color doesn't affect
+ * the color of the drawn Wilber.
  */
-GimpDisplayShell, GimpDock, .widget, .dialog-action-box, .dialog-vbox {
-  background-color: rgb(210,210,210);
-  color: rgb(100,100,100);;
+#gimp-internal-dock-2 frame .flat {
+  background-color: rgb(220,220,220);
 }
 
-/* For GtkTextView */
+/* GtkTextView */
 textview text, textview {
    background-color: rgba (184, 184, 184, 0.5);
    color: black;
@@ -59,7 +85,7 @@ combobox window.popup, combobox window {
 }
 
 combobox box, combobox box.linked, combobox button {
-  background-color: rgb(230,230,230);
+  background-color: rgb(235,235,235);
   color: black;
   background-image: none;
   border-color: rgb(185,185,185);
@@ -67,7 +93,7 @@ combobox box, combobox box.linked, combobox button {
 
 Get rid of the outline around all tabs in the gimpcolordialog
 GimpColorNotebook .frame {
-  border-color: rgb(230,230,230);
+  border-color: rgb(235,235,235);
 }
 
 /* Color history buttons in the color chooser.
@@ -75,7 +101,7 @@ GimpColorNotebook .frame {
  * but not the + button; GimpColorSelection gets both.
  */
 GimpColorSelection button {
-  background: rgb(210,210,210);
+  background: rgb(220,220,220);
   border: 1px solid rgb(185,185,185);
   color: black;
 }
@@ -86,7 +112,7 @@ GimpColorSelection button:hover {
 
 /* The tabs above the color selector */
 notebook stack {
-  background-color: rgb(230,230,230);
+  background-color: rgb(235,235,235);
 }
 
 /* Use this to make a border or padding around each tab */
@@ -103,23 +129,22 @@ notebook header tabs tab:checked {
 }
 
 notebook header tabs tab:hover {
-  background-color: rgb(245,245,245);
+  background-color: rgb(250,250,250);
 }
 
 /* The background of many dialogs, e.g. Preferences and gimpcolordialog */
 .vertical {
   color: black;
-  background-color: rgb(230,230,230);
+  background-color: rgb(235,235,235);
   background-image: none;
 }
 
 /* Background for many button bars and dialog titles.
- * Also unexpectedly controls the prefs "Reload Current Theme" button,
- * though that has a dark border around it that isn't so easily controlled.
+ * Also, unexpectedly, controls the prefs "Reload Current Theme" button content.
  */
 .horizontal {
   color: black;
-  background-color: rgb(230,230,230);
+  background-color: rgb(235,235,235);
 }
 
 /* Text buttons, e.g. the main buttons at the bottoms of dialogs,
@@ -128,7 +153,7 @@ notebook header tabs tab:hover {
  */
 .text-button {
   color: black;
-  background-color: rgb(230,230,230);
+  background-color: rgb(235,235,235);
   background-image: none;
   font-weight: normal;
 }
@@ -147,7 +172,7 @@ notebook header tabs tab:hover {
 */
 
 .flat {
-  background-color: rgb(230,230,230);
+  background-color: rgb(235,235,235);
   color: black;
 }
 
@@ -160,19 +185,19 @@ notebook header tabs tab:hover {
 }
 
 scrollbar {
-  background-color: rgb(230,230,230);
+  background-color: rgb(235,235,235);
 }
 
 scrollbar slider {
-  background-color: rgba (210,210,210,0.5);
+  background-color: rgba (220,220,220,0.5);
 }
 
 notebook header {
-  background-color: rgb(230,230,230);
+  background-color: rgb(235,235,235);
 }
 
 GimpRuler {
-  background-color: rgba(210,210,210, 0.3);
+  background-color: rgba(220,220,220, 0.3);
 }
 
 entry {
@@ -191,52 +216,22 @@ paned separator {
   color: black;
 }
 
-
-/* These next 5 appear when you create a new image (e.g. "width" field */
-spinbutton, spinbutton button {
-  color: black;
-  border-color: rgb(185,185,185);
-}
-
-spinbutton button.down {
-  background-color: rgb(200,200,200);
-}
-
-spinbutton button.up {
-  background-color: rgb(230,230,230);
-}
-
-spinbutton entry {
-  background-color: rgb(230,230,230);
-  border-radius: 3px 1px 1px 0px;
-}
-
-/* E.g. Opacity in the Layers dialog */
-GimpSpinScale {
-  color: black;
-}
-
-GimpSpinScale button.up {
-  background: rgb(250,250,250);
-  color: black;
-  border-color: rgb(185,185,185);
-}
-
-GimpSpinScale button.down {
-  background: rgb(230,230,230);
-  color: black;
-  border-color: rgb(185,185,185);
-}
-
-GimpSpinScale entry {
-  background: rgb(250,250,250);
-  border-radius: 3px 0px 0px 3px;
-  border-color: rgb(185,185,185);
+button:disabled {
+  color: rgb(200,200,200);
 }
 
-GimpSpinScale entry progress {
-  background-color: rgb(245,245,245);
-}
+/* Spinbuttons: there are two kinds:
+ * spinbutton, spinbutton button
+ *   e.g. the "width" field in the New Image dialog.
+ *   spinbutton button.down, spinbutton button.up can be styled separately,
+ *   as can spinbutton entry.
+ *
+ * GimpSpinScale also has button.up, button.down and entry under it,
+ *   plus GimpSpinScale entry progress.
+ *
+ * Mostly the inherited values seem pretty good for both of these,
+ * so they're not overridden.
+ */
 
 /* Checkboxes */
 checkbutton check {
@@ -257,44 +252,53 @@ radio {
   color: black;
 }
 
-/* Used for tooltips (hover over a tool to see) */
+/* The border around a tooltip */
 .background {
-   background-color: rgb(100,100,100);
+   background-color: rgb(220,220,220);
 }
 
 /* For dropdown menus (e.g. "px" when creating a new image */
 #gtk-combobox-popup-menu {
-   background-color: rgb(230,230,230);
+   background-color: rgb(235,235,235);
    color: black;
 }
 
-/* Top menu items when selected */
-menubar > menuitem:hover {
-  color: black;
-}
+/* Top menu items  */
 
-/* the menu item itself */
+/* The top menu item itself: File, Edit ... */
 menuitem menuitem {
   color: black;
   background: rgb(240,240,240);
 }
 
-menuitem menuitem:hover {
+/* A top (File, Edit) menubar item when its menu is expanded. */
+menubar > menuitem:hover {
   color: black;
-  background: rgb(200,200,200);
+  background: rgb(250,250,250);
 }
 
-/* Sidebar when opening a new image */
-list {
-   color: black;
-   background-color: rgb(220,220,220);
+menubar *:disabled {
+    color: rgb(110,110,110);
 }
 
-.sidebar-row {
+menuitem *:hover {
   color: black;
+  background: rgb(250,250,250);
 }
 
-.sidebar-row:selected {
-  color: black;
-  background-color: rgb(210,210,210);
+/* Sidebar in File > Open */
+
+/* The background to either side of the directory buttons.
+ * The color of the buttons themselves comes from somewhere else.
+ */
+.sidebar-row, .sidebar-row * {
+  background-color: rgb(220,220,220);
+}
+
+.sidebar-row:selected, .sidebar-row:selected * {
+  background-color: rgb(250,250,250);
+}
+
+.sidebar-row:hover, .sidebar-row:hover * {
+  background-color: rgb(235,235,235);
 }