RED-4397: Dark theme WIP

apps/red-ui/src/app/app.component.ts

@@ -1,8 +1,9 @@
-import { Component, ViewContainerRef } from '@angular/core';
+import { Component, Inject, Renderer2, ViewContainerRef } from '@angular/core';
 import { RouterHistoryService } from '@services/router-history.service';
 import { UserService } from '@services/user.service';
 import { REDDocumentViewer } from './modules/pdf-viewer/services/document-viewer.service';
 import { DossiersChangesService } from '@services/dossiers/dossier-changes.service';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
     selector: 'redaction-root',
@@ -18,7 +19,10 @@ export class AppComponent {
         private readonly _userService: UserService,
         readonly documentViewer: REDDocumentViewer,
         private readonly _dossierChangesService: DossiersChangesService,
+        @Inject(DOCUMENT) private document: Document,
+        private renderer: Renderer2,
     ) {
+        this.renderer.addClass(this.document.body, 'dark');
         // TODO: Find a better place to initialize dossiers refresh
         if (_userService.currentUser?.isUser) {
             _dossierChangesService.initializeRefresh();

apps/red-ui/src/app/components/notifications/notifications.component.scss

@@ -41,7 +41,7 @@
                     white-space: normal;
 
                     a {
-                        color: var(--iqser-accent);
+                        color: var(--iqser-text);
                         font-weight: bold;
                     }
                 }

apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss

@@ -7,8 +7,8 @@
     font-size: 13px;
     border: none;
     outline: none;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
-    background-color: var(--iqser-white);
+    background-color: var(--iqser-background);
 }
 
 .highlight {

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss

@@ -54,7 +54,7 @@
     .csv-part-header {
         min-height: 50px;
         box-sizing: border-box;
-        background: var(--iqser-white);
+        background: var(--iqser-background);
         border-top: 1px solid var(--iqser-separator);
         border-bottom: 1px solid var(--iqser-separator);
         display: flex;
@@ -82,7 +82,7 @@
     }
 
     .search-input-container {
-        background-color: var(--iqser-white);
+        background-color: var(--iqser-background);
         border-bottom: 1px solid var(--iqser-separator);
         padding: 8px 16px;
     }
@@ -133,7 +133,7 @@
                     min-height: 32px;
                     border-radius: 8px;
                     padding: 10px;
-                    background: var(--iqser-white);
+                    background: var(--iqser-background);
                     cursor: pointer;
                     display: flex;
                     flex-direction: column;

apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss

@@ -31,5 +31,5 @@
 }
 
 .right-chart {
-    border-left: 1px solid rgba(226, 228, 233, 0.9);
+    border-left: 1px solid var(--iqser-separator);
 }

apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss

@@ -10,5 +10,5 @@ redaction-small-chip {
 .dossier-state-text {
     font-size: 13px;
     line-height: 16px;
-    color: var(--iqser-grey-1);
+    color: var(--iqser-text);
 }

apps/red-ui/src/assets/styles/_variables.scss

@@ -9,9 +9,7 @@ $grey-5: #d3d5da;
 $grey-6: #f0f1f4;
 $grey-7: #9398a0;
 $grey-8: #f9fafb;
-$grey-9: #f5f5f7;
 $grey-10: #313d4e;
-$grey-11: #ecedf0;
 
 $blue-1: #4875f7;
 $blue-2: #48c9f7;
@@ -34,8 +32,4 @@ $warn: $yellow-2;
 $light: $white;
 $dark: $black;
 
-$btn-bg-hover: $grey-4;
-$btn-bg: $grey-6;
-$quick-filter-border: $grey-5;
-
 $separator: rgba(226, 228, 233, 0.9);

apps/red-ui/src/styles.scss

@@ -4,22 +4,22 @@
 @use 'common-variables';
 @use 'assets/styles/red-theme';
 
-@include common-variables.configure(
+@include common-variables.configureLight(
     $iqser-primary: vars.$primary,
     $iqser-primary-rgb: common-functions.hexToRgb(vars.$primary),
     $iqser-primary-2: vars.$primary-2,
     $iqser-accent: vars.$accent,
     $iqser-accent-rgb: common-functions.hexToRgb(vars.$accent),
+    $iqser-background: vars.$white,
+    $iqser-text: vars.$accent,
+    $iqser-text-rgb: common-functions.hexToRgb(vars.$accent),
     $iqser-disabled: vars.$grey-7,
     $iqser-not-disabled-table-item: vars.$grey-8,
-    $iqser-btn-bg-hover: vars.$btn-bg-hover,
+    $iqser-btn-bg-hover: vars.$grey-4,
-    $iqser-btn-bg: vars.$btn-bg,
+    $iqser-btn-bg: vars.$grey-6,
+    $iqser-side-nav: vars.$grey-2,
     $iqser-warn: vars.$warn,
-    $iqser-white: vars.$white,
-    $iqser-black: vars.$black,
-    $iqser-light: vars.$light,
     $iqser-separator: vars.$separator,
-    $iqser-quick-filter-border: vars.$quick-filter-border,
     $iqser-grey-2: vars.$grey-2,
     $iqser-grey-3: vars.$grey-3,
     $iqser-grey-4: vars.$grey-4,
@@ -30,5 +30,36 @@
     $iqser-green-2: vars.$green-2,
     $iqser-yellow-1: vars.$yellow-1,
     $iqser-yellow-2: vars.$yellow-2,
-    $iqser-helpmode-primary: vars.$green-2
+    $iqser-helpmode-primary: vars.$green-2,
+    $iqser-inputs-border: vars.$grey-5
+);
+
+@include common-variables.configureDark(
+    $iqser-primary: vars.$primary,
+    $iqser-primary-rgb: common-functions.hexToRgb(vars.$primary),
+    $iqser-primary-2: vars.$primary-2,
+    $iqser-accent: vars.$accent,
+    $iqser-accent-rgb: common-functions.hexToRgb(vars.$accent),
+    $iqser-background: darken(vars.$accent, 10%),
+    $iqser-text: vars.$white,
+    $iqser-text-rgb: common-functions.hexToRgb(vars.$white),
+    $iqser-disabled: vars.$grey-7,
+    $iqser-not-disabled-table-item: darken(vars.$accent, 5%),
+    $iqser-btn-bg-hover: darken(vars.$accent, 5%),
+    $iqser-btn-bg: darken(vars.$accent, 5%),
+    $iqser-side-nav: darken(vars.$accent, 8%),
+    $iqser-warn: vars.$warn,
+    $iqser-separator: vars.$accent,
+    $iqser-grey-2: vars.$grey-2,
+    $iqser-grey-3: vars.$grey-3,
+    $iqser-grey-4: vars.$grey-4,
+    $iqser-grey-5: vars.$grey-5,
+    $iqser-grey-6: vars.$grey-6,
+    $iqser-grey-7: vars.$grey-7,
+    $iqser-green-1: vars.$green-1,
+    $iqser-green-2: vars.$green-2,
+    $iqser-yellow-1: vars.$yellow-1,
+    $iqser-yellow-2: vars.$yellow-2,
+    $iqser-helpmode-primary: vars.$green-2,
+    $iqser-inputs-border: lighten(vars.$accent, 10%)
 );

libs/common-ui

@@ -1 +1 @@
-Subproject commit 45dc0f0f1199bc510d477b1e132e098c4c605e3f
+Subproject commit f12e9a20943a8c6cffd1b5c1c2e1ed38e0ab022a

paligo-styles/search.scss

@@ -2,7 +2,7 @@
 @use 'mixin';
 
 .portal-search-result {
-    background-color: variables.$grey-9;
+    background-color: variables.$grey-2;
 }
 
 .search-container {

paligo-styles/style.scss

@@ -11,15 +11,21 @@
 
 body {
     color: variables.$accent;
-    background-color: variables.$grey-9;
+    background-color: variables.$grey-2;
     font-family: 'Open Sans', sans-serif;
 
-    h1, .h1,
+    h1,
-    h2, .h2,
+    .h1,
-    h3, .h3,
+    h2,
-    h4, .h4,
+    .h2,
-    h5, .h5,
+    h3,
-    h6, .h6,
+    .h3,
+    h4,
+    .h4,
+    h5,
+    .h5,
+    h6,
+    .h6,
     p,
     pre {
         margin: 0;
@@ -28,23 +34,28 @@ body {
 
     @include common-mixins.scroll-bar;
 
-    h1, .h1 {
+    h1,
+    .h1 {
         @include mixin.heading-1;
     }
 
-    h2, .h2 {
+    h2,
+    .h2 {
         @include mixin.heading-2;
     }
 
-    h3, .h3 {
+    h3,
+    .h3 {
         @include mixin.heading-3;
     }
 
-    h4, .h4 {
+    h4,
+    .h4 {
         @include mixin.heading-4;
     }
 
-    h5, .h5 {
+    h5,
+    .h5 {
         @include mixin.heading-5;
     }