From 030503c68f9b694827dd4426315913db4bcc093a Mon Sep 17 00:00:00 2001 From: Muffin Date: Fri, 29 Dec 2023 01:24:33 -0600 Subject: [PATCH] merge-upstream: more dark mode fixes --- src/components/color-button/color-button.css | 5 +--- src/components/color-picker/color-picker.css | 25 ++++++------------- src/components/mode-tools/mode-tools.css | 3 --- src/components/paint-editor/paint-editor.css | 11 +------- .../tool-select-base/tool-select-base.css | 3 --- src/css/colors.css | 2 ++ 6 files changed, 12 insertions(+), 37 deletions(-) diff --git a/src/components/color-button/color-button.css b/src/components/color-button/color-button.css index 09d41e7d2e..54b8ce19c9 100644 --- a/src/components/color-button/color-button.css +++ b/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 { diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css index d6729173a8..08ec29557c 100644 --- a/src/components/color-picker/color-picker.css +++ b/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; diff --git a/src/components/mode-tools/mode-tools.css b/src/components/mode-tools/mode-tools.css index 32293c7813..e855eb97a0 100644 --- a/src/components/mode-tools/mode-tools.css +++ b/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; diff --git a/src/components/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css index d259838cfa..fd9dd2e3be 100644 --- a/src/components/paint-editor/paint-editor.css +++ b/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; diff --git a/src/components/tool-select-base/tool-select-base.css b/src/components/tool-select-base/tool-select-base.css index 4f3983e02b..9eda911519 100644 --- a/src/components/tool-select-base/tool-select-base.css +++ b/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 */ diff --git a/src/css/colors.css b/src/css/colors.css index 57601ae5be..d7555452e5 100644 --- a/src/css/colors.css +++ b/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);