From b553bb5b3283fc2bd7b70d7c671a34dca61c512e Mon Sep 17 00:00:00 2001 From: mkpaz Date: Tue, 30 Aug 2022 14:27:09 +0400 Subject: [PATCH] Use gray shades instead of accent shades for virtualized controls --- styles/src/components/_combo-box.scss | 4 +-- styles/src/components/_data.scss | 35 ++++++++++++++++++--------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/styles/src/components/_combo-box.scss b/styles/src/components/_combo-box.scss index 00f68fa..72a2de8 100755 --- a/styles/src/components/_combo-box.scss +++ b/styles/src/components/_combo-box.scss @@ -6,8 +6,8 @@ @use "../settings/utils"; $color-cell-bg: -color-bg-default !default; -$color-cell-bg-hover: if(cfg.$darkMode, -color-gray-7, -color-gray-0) !default; -$color-cell-bg-selected: -color-accent-subtle !default; +$color-cell-bg-hover: if(cfg.$darkMode, -color-gray-7, -color-gray-1) !default; +$color-cell-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-2) !default; @mixin _arrow() { @include icons.get("arrow-drop-down", false); diff --git a/styles/src/components/_data.scss b/styles/src/components/_data.scss index 932688f..854970f 100755 --- a/styles/src/components/_data.scss +++ b/styles/src/components/_data.scss @@ -3,6 +3,18 @@ @use "../settings/config" as cfg; @use "../settings/icons"; +$color-cell-bg: -color-bg-default !default; +$color-cell-fg: -color-fg-default !default; +$color-cell-bg-selected: if(cfg.$darkMode, -color-gray-6, -color-gray-1) !default; +$color-cell-fg-selected: -color-fg-default !default; +$color-cell-bg-odd: -color-bg-subtle !default; +$color-cell-border: -color-border-default !default; +$color-header-bg: -color-bg-subtle !default; +$color-header-fg: -color-fg-default !default; +$color-resize-line: -color-accent-emphasis !default; +$color-drag-header: -color-accent-muted !default; +$color-drag-overlay: -color-accent-muted !default; + $cell-size-normal: 2.8em !default; $cell-size-dense: 2em !default; $cell-padding-x: 0.5em !default; @@ -16,13 +28,12 @@ $tree-cell-indent: 1em !default; @mixin _base() { - // draft (only supported by list view for now) - -color-cell-bg: -color-bg-default; - -color-cell-fg: -color-fg-default; - -color-cell-bg-selected: -color-accent-subtle; - -color-cell-fg-selected: -color-fg-default; - -color-cell-bg-odd: -color-bg-subtle; - -color-cell-border: -color-border-default; + -color-cell-bg: $color-cell-bg; + -color-cell-fg: $color-cell-fg; + -color-cell-bg-selected: $color-cell-bg-selected; + -color-cell-fg-selected: $color-cell-fg-selected; + -color-cell-bg-odd: $color-cell-bg-odd; + -color-cell-border: $color-cell-border; -fx-border-color: -color-cell-border; -fx-border-width: cfg.$border-width; @@ -160,8 +171,8 @@ $tree-cell-indent: 1em !default; @include _base(); - -color-header-bg: -color-bg-subtle; - -color-header-fg: -color-fg-default; + -color-header-bg: $color-header-bg; + -color-header-fg: $color-header-fg; &.bordered { >.column-header-background { @@ -256,7 +267,7 @@ $tree-cell-indent: 1em !default; // the .column-resize-line is shown when the user is attempting to resize a column .column-resize-line { - -fx-background-color: -color-accent-emphasis; + -fx-background-color: $color-resize-line; -fx-padding: 0 1 0 1; } @@ -265,12 +276,12 @@ $tree-cell-indent: 1em !default; .column-drag-header { // -color-accent-muted must be RGBA color for this to work, because // applying opacity to the whole pane makes label text unreadable - -fx-background-color: -color-accent-muted; + -fx-background-color: $color-drag-header; } // semi-transparent overlay to indicate the column that is currently being moved .column-overlay { - -fx-background-color: -color-accent-muted; + -fx-background-color: $color-drag-overlay; } // this is shown when the table has no rows and/or no columns