merge-upstream: more dark mode fixes

src/components/color-button/color-button.css

@@ -13,10 +13,7 @@
     flex-basis: 2rem;
     flex-shrink: 0;
     height: 100%;
-    border: 1px solid rgba(0, 0, 0, 0.25);
-}
-[theme="dark"] .color-button-swatch {
-    border-color: rgba(255, 255, 255, 0.25);
+    border: 1px solid $ui-pane-border;
 }
 
 [dir="ltr"] .color-button-swatch {

src/components/color-picker/color-picker.css

@@ -13,17 +13,18 @@ body :global(.Popover) {
 }
 
 :global(.Popover-body) {
-    background: white;
-    border: 1px solid #ddd;
+    color: $text-primary;
+    background: $popover-background;
+    border: 1px solid $ui-pane-border;
     padding: 4px;
     border-radius: 4px;
     padding: 4px;
-    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .3);
+    box-shadow: 0px 0px 8px 1px $ui-pane-border;
 }
 
 :global(.Popover-tipShape) {
-    fill: white;
-    stroke: #ddd;
+    fill: $popover-background;
+    stroke: $ui-pane-border;
 }
 
 .clickable {
@@ -39,24 +40,17 @@ body :global(.Popover) {
 .row-header {
     font-family: "Helvetica Neue", Helvetica, sans-serif;
     font-size: 0.65rem;
-    color: #575E75;
     margin: 8px 8px 0 8px;
 }
-[theme="dark"] .row-header {
-    color: #ccc;
-}
 
 .label-name {
     font-weight: bold;
 }
 
 .divider {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $ui-pane-border;
     margin: 8px;
 }
-[theme="dark"] .divider {
-    border-color: #333;
-}
 
 .swap-button {
     margin-left: 8px;
@@ -70,15 +64,12 @@ body :global(.Popover) {
 .swatch {
     width: 1.5rem;
     height: 1.5rem;
-    border: 1px solid #ddd;
+    border: 1px solid $ui-pane-border;
     border-radius: 4px;
     box-sizing: content-box;
     display: flex;
     align-items: center;
 }
-[theme="dark"] .swatch {
-    border-color: $form-border;
-}
 
 .large-swatch-icon {
     width: 1.75rem;

src/components/mode-tools/mode-tools.css

@@ -12,9 +12,6 @@
     width: 2rem;
     height: 2rem;
 }
-[theme="dark"] .mode-tools-icon {
-    filter: brightness(1.7);
-}
 
 [dir="ltr"] .mod-dashed-border {
     border-right: 1px dashed $ui-pane-border;

src/components/paint-editor/paint-editor.css

@@ -8,9 +8,6 @@
     flex-direction: column;
     padding: calc(3 * $grid-unit);
 }
-[theme="dark"] .editor-container {
-    color-scheme: dark;
-}
 
 .row {
     display: flex;
@@ -108,9 +105,6 @@ $border-radius: 0.25rem;
     height: 1.25rem;
     vertical-align: middle;
 }
-[theme="dark"] .button-group-button-icon {
-    filter: brightness(1.7);
-}
 
 .mod-mode-tools {
     margin-left: calc(2 * $grid-unit);
@@ -137,14 +131,11 @@ $border-radius: 0.25rem;
     width: 100%;
     flex-grow: 1;
     min-width: 402px; /* Leave room for the border */
-    border: 1px solid #e8edf1;
+    border: 1px solid $ui-pane-border;
     border-radius: .25rem;
     position: relative;
     overflow: visible;
 }
-[theme="dark"] .canvas-container {
-    border-color: $form-border;
-}
 
 .mode-selector {
     display: flex;

src/components/tool-select-base/tool-select-base.css

@@ -29,9 +29,6 @@ img.tool-select-icon {
     flex-grow: 1;
     vertical-align: middle;
 }
-[theme="dark"] img.tool-select-icon {
-    filter: brightness(1.7);
-}
 
 .mod-tool-select.is-selected .tool-select-icon {
     /* Make the tool icons white while selected by making them black and inverting */

src/css/colors.css

@@ -24,3 +24,5 @@ $data-primary: #FF8C1A;
 $form-border: var(--paint-form-border, #E9EEF2);
 
 $input-background: var(--paint-input-background, #FFFFFF);
+
+$popover-background: var(--paint-popover-background, #FFFFFF);