Re: [pgAdmin][RM5653]: High Contrast UI Theme - Mailing list pgadmin-hackers

+$btn-ternary-disabled-bg: $color-ternary !default;

+$btn-ternary-disabled-fg: $color-bg !default;

+$btn-ternary-disabled-border-bg: $btn-ternary-disabled-bg !default;

4) Do not use a bg color variable to a fg color for the sake of convention. Declare a new local variable if required and assign the hash value to the new variable.

+$color-success-disabled-fg: $color-bg !default;

+$color-success-hover-fg: $color-bg !default;

5) The variable name is *-bg but used for color. Rename it to -color or -fg.

   & .select2-selection__choice__remove {

-    color: $dropdown-link-hover-bg;

+    color: $dropdown-link-remove-bg;

     margin-right: 0.25rem;

6) Rename *-border-bg to *-border-color

+$card-header-border-bg: $border-color !default;

+$btn-primary-icon-border-bg: $color-gray !default;

7) Too many blank lines:

+.alert-text-body {

+  color: $alert-color-fg;

+}

+

+

+

8) Variable name says - maximize-bg but is used for -pin, -maximize, -close. Rename it to be generalized.

   border: $input-btn-border-width solid $btn-secondary-border !important;

-  background-color: $color-secondary !important;

+  background-color: $alert-maximize-bg !important;

   font-size: 12px;

   border-radius: $btn-border-radius;

   position: relative;

@@ -157,7 +157,7 @@

 }

 .ajs-pin:hover, .ajs-maximize:hover, .ajs-close:hover {

-  background-color: $btn-secondary-hover-bg !important;

+  background-color: $alert-maximize-hover-bg !important;

 }

9) Replacing component-active-bg with color primary has no effect as it is marked default and you've overridden the variable for the new theme.

-$input-focus-border-color: lighten($component-active-bg, 25%);

+$input-focus-border-color: lighten($color-primary, 25%) !default;

 10) Should be $select2-*

+$select-container-hover-fg: $tree-fg-hover !default;
11) Do not change this variable directly. Change the shadow-base-color instead.

-$dialog-box-shadow: 0 0.5rem 3rem $shadow-base-color;

+$dialog-box-shadow: 0 0.5rem 3rem $shadow-base-color !default;

Same for input focus:

-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;

+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

Plus, I can see the shadow is completely removed for the dialogs. This makes it difficult to identify the dialog in the backdrop. And focus shadow is also removed, which I think makes it difficult to see which textbox is focussed.

12) When I hovered on the close button on the above dialog, it does not change any background and remains as is, which I think is not a good UI feedback.

13) When hovered over items in the list the icon is not visible. The hover bg color is also different in list mode and grid mode which should be not.

14) Please check the grid lines of graphs once as they can be customized with the theme now. Although don't spend much time on it as they are going to be replaced with a new lib.