HighContrast: fix up color chooser theming

Mostly copied from Adwaita.

2 files changed, 68 insertions, 42 deletions

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index a7ed49ebc7..2721977311 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -2361,26 +2361,45 @@ colorswatch {
 
   // we need to re-set the shadow here since it get axed by the previous bit
   &:selected { box-shadow: $_colorswatch_shadow; }
-  button.color > & { box-shadow: none; }
 
   // border rounding
   &.top {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  &.bottom {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  &.left, &:first-child:not(overlay):not(.top) {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  &.right, &:last-child:not(overlay):not(.bottom) {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  &:only-child:not(overlay) { border-radius: 6px; }
+
+  // overlay corner rounding
+  &.top > overlay {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
   }
-  &.bottom {
+  &.bottom > overlay {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }
-  &.left, &:first-child:not(overlay), &:first-child:not(.top) > .overlay {
+  &:first-child:not(.top) > overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
   }
-  &.right, &:last-child:not(overlay), &:last-child:not(.bottom) > .overlay {
+  &:last-child:not(.bottom) > overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
   }
-  &:only-child:not(overlay), &:only-child > overlay { border-radius: 5px; }
+  &:only-child > overlay { border-radius: 5px; }
+
   // nth-child is used for the custom colors row.
   // the :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
   // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+.
@@ -2394,7 +2413,9 @@ colorswatch {
                 inset 0 -1px transparentize(black, 0.6);
   }
   &:backdrop,
-  &:backdrop:selected {
+  &:backdrop:selectedi,
+  &.dark:backdrop,
+  &.dark:backdrop:selected {
     background-image: none;
     box-shadow: none;
   }
@@ -2403,37 +2424,31 @@ colorswatch {
   &.dark {
     color: white;
     outline-color: transparentize(black, 0.7);
+    border: 1px solid transparentize(black, 0.7);
+    &:hover { border-color: transparentize(black, 0.5); }
     &:backdrop { color: transparentize(white, 0.7); }
   }
   &.light {
     color: black;
     outline-color: transparentize(white, 0.5);
+    border: 1px solid transparentize(black, 0.7);
+    &:hover { border-color: transparentize(black, 0.5); }
     &:backdrop { color: transparentize(black, 0.7); }
   }
 
   // border color
   & overlay,
   & overlay:selected {
-    border: 1px solid $borders_color;
-    &:hover { border-color: black; }
+    background: none;
+    border: none;
   }
 
   // make the add color button looks like, well, a button
   &#add-color-button {
     @include button(normal);
-    border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
-    border-width: 1px;   // translucent on the colored background, here it's not necessary so they need to be set
-    box-shadow: none;
     &:hover { @include button(hover); }
-    &:backdrop { 
-      @include button(backdrop); 
-      border-width: 1px;
-      color: $insensitive_fg_color; 
-    }
-    overlay { 
-      @include button(undecorated);
-      border-width: 0; } // reset the overlay to not 
-                         // cover the button style underneat
+    &:backdrop { @include button(backdrop); }
+    & overlay { border-width: 0; background: none; }
   }
 }
 
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 0926472490..2c44599c7e 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -2662,52 +2662,66 @@ colorswatch {
       border-color: #fff; }
   colorswatch:selected {
     box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px #fff; }
-  button.color > colorswatch {
-    box-shadow: none; }
   colorswatch.top {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px; }
+  colorswatch.bottom {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px; }
+  colorswatch.left, colorswatch:first-child:not(overlay):not(.top) {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px; }
+  colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px; }
+  colorswatch:only-child:not(overlay) {
+    border-radius: 6px; }
+  colorswatch.top > overlay {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
-  colorswatch.bottom {
+  colorswatch.bottom > overlay {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px; }
-  colorswatch.left, colorswatch:first-child:not(overlay), colorswatch:first-child:not(.top) > .overlay {
+  colorswatch:first-child:not(.top) > overlay {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px; }
-  colorswatch.right, colorswatch:last-child:not(overlay), colorswatch:last-child:not(.bottom) > .overlay {
+  colorswatch:last-child:not(.bottom) > overlay {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px; }
-  colorswatch:only-child:not(overlay), colorswatch:only-child > overlay {
+  colorswatch:only-child > overlay {
     border-radius: 5px; }
   colorswatch.activatable:hover, colorswatch.activatable:hover:selected {
     background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
-  colorswatch:backdrop, colorswatch:backdrop:selected {
+  colorswatch:backdrop, colorswatch:backdrop:selectedi, colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
     background-image: none;
     box-shadow: none; }
   colorswatch.dark {
     color: white;
-    outline-color: rgba(0, 0, 0, 0.3); }
+    outline-color: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(0, 0, 0, 0.3); }
+    colorswatch.dark:hover {
+      border-color: rgba(0, 0, 0, 0.5); }
     colorswatch.dark:backdrop {
       color: rgba(255, 255, 255, 0.3); }
   colorswatch.light {
     color: black;
-    outline-color: rgba(255, 255, 255, 0.5); }
+    outline-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.3); }
+    colorswatch.light:hover {
+      border-color: rgba(0, 0, 0, 0.5); }
     colorswatch.light:backdrop {
       color: rgba(0, 0, 0, 0.3); }
   colorswatch overlay, colorswatch overlay:selected {
-    border: 1px solid gray; }
-    colorswatch overlay:hover, colorswatch overlay:selected:hover {
-      border-color: black; }
+    background: none;
+    border: none; }
   colorswatch#add-color-button {
     border-width: 2px;
     border-style: solid;
     color: #000;
     background-image: none;
     background-color: #fff;
-    border-color: gray;
-    border-style: solid;
-    border-width: 1px;
-    box-shadow: none; }
+    border-color: gray; }
     colorswatch#add-color-button:hover {
       border-width: 2px;
       border-style: solid;
@@ -2723,13 +2737,10 @@ colorswatch {
       border-color: #8d8d8d;
       background-image: none;
       text-shadow: none;
-      -gtk-icon-shadow: none;
-      border-width: 1px;
-      color: gray; }
+      -gtk-icon-shadow: none; }
     colorswatch#add-color-button overlay {
-      border-width: 2px;
-      border-style: solid;
-      border-width: 0; }
+      border-width: 0;
+      background: none; }
 
 /**********************
  * Window Decorations *