Small tweaks in darkmode (#1976)

* The scss variable $popover-border-color is now also used throughout the internal styles
* Derived css variable is exported only once
* Scss definitions are now organized and structured with descriptive comments
* Fix incorrect styling due to a too dark and at the same time very thick border in the CreateButton component
* Darken $border-light a little, so that it is not brighter than the border in dark mode

gradle/changelog/darkmode_simplification.yaml

@@ -0,0 +1,4 @@
+- type: fixed
+  description: Improve organization of variables in scss ([#1976](https://github.com/scm-manager/scm-manager/pull/1976))
+- type: fixed
+  description: Small tweaks in darkmode ([#1976](https://github.com/scm-manager/scm-manager/pull/1976))

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -891,7 +891,7 @@ exports[`Storyshots Buttons/CreateButton Default 1`] = `
   className="indexstories__Spacing-bpoict-0 ieMGHp"
 >
   <div
-    className="CreateButton__Wrapper-f29oo-0 iODeHj has-text-centered mt-5 p-4"
+    className="CreateButton__Wrapper-f29oo-0 iVaJIs has-text-centered mt-5 p-4"
   >
     <button
       className="button is-primary"

scm-ui/ui-components/src/buttons/CreateButton.tsx

@@ -27,7 +27,7 @@ import Button, { ButtonProps } from "./Button";
 import classNames from "classnames";
 
 const Wrapper = styled.div`
-  border: 2px solid var(--scm-border-color);
+  border: var(--scm-border);
 `;
 
 export default class CreateButton extends React.Component<ButtonProps> {

scm-ui/ui-styles/src/components/_main.scss

@@ -42,7 +42,7 @@
   --scm-border-color: #{$border};
   --scm-border: #{$border-width} solid #{$border};
 
-  --scm-popover-border-color: #{$white};
+  --scm-popover-border-color: #{$popover-border-color};
 }
 
 // TODO split into multiple files
@@ -308,6 +308,8 @@ a.has-text-secondary-most:focus {
 }
 
 .popover {
+  border: 1px solid $popover-border-color;
+
   &:before {
     border-bottom-color: $popover-background-color;
     border-left-color: $popover-background-color;

scm-ui/ui-styles/src/dark.scss

@@ -24,6 +24,7 @@
 
 @import "utils/_pre.scss";
 
+/* Base */
 $turquoise: #55abad;
 $blue: #599dad;
 $cyan: $blue;
@@ -47,6 +48,7 @@ $background: $grey-dark;
 
 $border: $grey-dark;
 $border-width: 1px;
+$border-light: $border;
 
 $text: $grey-lighter;
 $text-strong: $grey-lighter;
@@ -64,17 +66,19 @@ $secondary: $grey;
 $secondary-more: $grey-light;
 $secondary-most: $white-ter;
 
-// layout
+/* Layout */
 $footer-background-color: $black-ter;
 $footer-color: $text;
 
-// element
+/* Elements */
 $box-background-color: lighten($scheme-main, 2.5%);
 
 $button-hover-color: lighten($text-strong, 2.5%);
 $button-active-color: lighten($text-strong, 2.5%);
 
-// component
+$table-row-hover-background-color: $grey-darker;
+
+/* Components */
 $card-background-color: $box-background-color;
 
 $menu-label-color: $text;
@@ -90,22 +94,16 @@ $navbar-item-active-color: $navbar-item-color;
 
 $panel-heading-background-color: $black-ter;
 
-// form
+/* Form */
 $input-placeholder-color: $grey-light;
 $input-disabled-color: #7A7A7A;
 
-// extension
+/* Extensions */
 $popover-background-color: $grey-dark;
 $popover-border-color: $grey-dark;
 
-$table-row-hover-background-color: $grey-darker;
-
 @import "utils/_post.scss";
 
-:root {
-  --scm-popover-border-color: #{$popover-border-color};
-}
-
 $dark-75: scale-color($dark, $lightness: -25%);
 $dark-50: scale-color($dark, $lightness: -50%);
 $dark-25: scale-color($dark, $lightness: -75%);
@@ -195,7 +193,6 @@ $danger-25: scale-color($danger, $lightness: -75%);
 :root {
   --scm-secondary-background: #{$scheme-main};
   --scm-secondary-text: #{$white};
-  --scm-border: 2px solid #{$white-ter};
   --scm-hover-color: #{$grey};
   --scm-column-selection: #{$link-dark};
 
@@ -243,11 +240,6 @@ $danger-25: scale-color($danger, $lightness: -75%);
   }
 }
 
-//popover
-.popover {
-  border: 1px solid $popover-border-color;
-}
-
 .modal-card {
   border: 1px solid $border;
 

scm-ui/ui-styles/src/highcontrast.scss

@@ -24,60 +24,67 @@
 
 @import "utils/_pre.scss";
 
+/* Base */
 $red: #e63453;
 
+$light-gray: #f2f2f2;
+
+$primary-invert: #050514;
+$link-invert: #050514;
+$info-invert: #050514;
+$success-invert: #050514;
+$danger-invert: #050514;
+
 $scheme-main: #050514;
 $background: $grey-dark;
+
+$border: $white-ter;
+$border-width: 2px;
+
 $text: $white-ter;
 $text-strong: $white-bis;
 
+$code: lighten($red, 25%);
+
+$link-hover: $white-bis;
+
+$hr-background-color: $white-bis;
+
 $secondary-least: $scheme-main;
 $secondary-less: $black-ter;
 $secondary: $white-bis;
 $secondary-more: $white-ter;
 $secondary-most: $white;
 
-$code: lighten($red, 25%);
+/* Layout */
-$primary-invert: #050514;
-$info-invert: #050514;
-$link-invert: #050514;
-$link-hover: $white-bis;
-$success-invert: #050514;
-$danger-invert: #050514;
-
-$light-gray: #f2f2f2;
-
 $footer-background-color: $black-ter;
 $footer-color: $white-ter;
 
-//make horizontal lines pop more
+/* Elements */
-$hr-background-color: $white-bis;
-
-$box-background-color: scale-color($scheme-main, $lightness: 15%);
 $box-background-color: $grey-darker;
 
+$table-row-hover-background-color: $grey-darker;
+
+/* Components */
 $menu-label-color: $scheme-main;
 $menu-item-color: $white-ter;
 
-$panel-heading-background-color: $black-ter;
-
 $modal-card-head-background-color: $black-ter;
 $modal-card-body-background-color: $scheme-main;
 
+$panel-heading-background-color: $black-ter;
+
+/* Form */
 $input-placeholder-color: $white;
 $input-disabled-color: $white-bis;
 
+/* Extensions */
 $popover-background-color: $grey-dark;
 
-$table-row-hover-background-color: $grey-darker;
-
 $tooltip-background-color: $white-bis;
 $tooltip-background-opacity: 0.9 !default;
 $tooltip-color: $scheme-main;
 
-$border-width: 2px;
-$border: $white-ter;
-
 @import "utils/_post.scss";
 
 :root {
@@ -340,10 +347,6 @@ td:first-child.diff-gutter-conflict:before {
   box-shadow: 0 0 0 1px $white-bis;
 }
 
-.popover {
-  border: 1px solid $border;
-}
-
 //Display darker version of background image
 .has-scm-background {
   background-image: url(images/scmManagerHeroDark.jpg) !important;

scm-ui/ui-styles/src/light.scss

@@ -24,6 +24,7 @@
 
 @import "utils/_pre.scss";
 
+/* Base */
 $warning-invert: #88550d;
 
 $border: $grey-lighter;
@@ -35,19 +36,19 @@ $secondary: $grey-light;
 $secondary-more: $grey-darker;
 $secondary-most: $black;
 
-// layout
+/* Layout */
 $footer-background-color: $white-ter;
 
-// element
+/* Elements */
 $button-disabled-opacity: 0.25;
 
 $subtitle-color: #666;
 
-// component
+/* Components */
 $menu-label-color: $white;
 $menu-item-color: #333;
 
-// extension
+/* Extensions */
 $popover-background-color: $grey-light;
 
 @import "utils/_post.scss";

scm-ui/ui-styles/src/variables/_commons.scss

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+/* Base */
 $turquoise: #00d1df;
 $blue: #33b2e8;
 $cyan: $blue;
@@ -33,14 +34,18 @@ $blue-light: #98d8f3;
 
 $family-monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
 
-$input-border-color: $blue-light;
+/* Layout */
+$footer-padding: inherit;
 
+/* Components */
 $navbar-background-color: transparent;
 $navbar-item-color: $white;
 $navbar-item-hover-color: $navbar-item-color;
-$navbar-item-active-color: $navbar-item-color;
 $navbar-item-hover-background-color: rgba(10, 10, 10, 0.1);
+$navbar-item-active-color: $navbar-item-color;
 
-$footer-padding: inherit;
+/* Form */
+$input-border-color: $blue-light;
 
+/* Extensions */
 $popover-border-color: $white;