[NAE-2011] Allow customizable colors in the components library

projects/netgrif-components/nae-theme.scss

@@ -4,7 +4,9 @@
 @import 'src/lib/data-fields/data-field.theme';
 @import 'src/lib/user/user.theme';
 @import "src/lib/navigation/navigation.theme";
+@import "src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.theme";
 @import "src/lib/admin/role-assignment/role-assignment.component.theme";
+@import "src/lib/admin/user-invite/user-invite.component.theme";
 @import "src/lib/side-menu/content-components/user-assign/user-assign-list/user-assign-item/theme/user-assign-item.component.theme";
 @import "src/lib/side-menu/content-components/admin-impersonate/admin-impersonate-list/admin-impersonate-item/theme/admin-impersonate-item.component.theme";
 @import 'src/lib/view/view.theme';
@@ -15,26 +17,70 @@
 @import "src/lib/search/advanced-search/advanced-search-component/advanced-search.component.theme";
 @import "src/lib/search/search-component/search.component-theme.scss";
 @import "src/lib/dialog/dialog.theme";
+@import "src/lib/snack-bar/snack-bar.theme";
+@import "src/lib/task-content/task-content.theme";
+
+@mixin nae-lib-theme($app-theme, $app-typography-config,
+    $nae-variables: (
+            base-color: #64748B,
+            background: #FFFFFF,
+            border: #EEEEEE,
+            datafield-text-disabled: #64748B,
+            datafield-outline-disabled: #CBD5E1,
+            datafield-text-enabled: #64748B,
+            datafield-outline-enabled: #64748B,
+            datafield-background: #FFFFFF,
+            datafield-icon-disabled: #94A3B8,
+            datafield-stepper-background: #F9F9F9,
+            datafield-stepper-color: #FFFFFF,
+            datafield-required-label: red,
+            datafield-canvas-stroke: black,
+            datafield-canvas-disabled: #CBD5E1,
+            drawer-border: #E2E8F0,
+            drawer-background: #F8FAFC,
+            drawer-color: black,
+            drawer-logo: #fafafa,
+            rail-border: #dddddd,
+            rail-background: white,
+            panel-background: #F8FAFC,
+            panel-color: rgba(0, 0, 0, .87),
+            panel-border: rgba(0, 0, 0, .03),
+            search-background: #fafafa,
+            snack-bar-icon: #dedede,
+            tabs-background: white,
+            tabs-border: #E2E8F0,
+            loading-placeholder: #FFFFFF,
+            loading-placeholder-col: #ced4da,
+            profile-name: #FFFFFF,
+            profile-border: #DDDDDD,
+            profile-border-background: #f0f0f0,
+            user-card: #fd971f,
+            user-card-text: #424242,
+        )
+) {
 
-@mixin nae-lib-theme($app-theme, $app-typography-config) {
     @include nae-typography($app-typography-config);
-    @include panel-component($app-theme);
-    @include data-field-component($app-theme);
-    @include user-profile($app-theme);
-    @include navigation-theme($app-theme);
-    @include header-component($app-theme);
-    @include roles-assignment-theme($app-theme);
+    @include panel-component($app-theme, $nae-variables);
+    @include data-field-component($app-theme, $nae-variables);
+    @include user-profile($app-theme, $nae-variables);
+    @include navigation-theme($app-theme, $nae-variables);
+    @include header-component($app-theme, $nae-variables);
+    @include ldap-assignment-theme($app-theme, $nae-variables);
+    @include roles-assignment-theme($app-theme, $nae-variables);
+    @include user-invite-theme($app-theme, $nae-variables);
     @include user-assign-item-component-theme($app-theme);
     @include admin-impersonate-item-component-theme($app-theme);
     @include view-theme($app-theme);
-    @include tabs-theme($app-theme);
-    @include search-predicate-theme($app-theme);
-    @include search-clause-theme($app-theme);
+    @include tabs-theme($app-theme, $nae-variables);
+    @include search-predicate-theme($app-theme, $nae-variables);
+    @include search-clause-theme($app-theme, $nae-variables);
     @include search-configuration-input-theme($app-theme);
-    @include side-menu-theme($app-theme);
+    @include side-menu-theme($app-theme, $nae-variables);
     @include advanced-search-theme($app-theme);
-    @include advanced-search-icon($app-theme);
-    @include dialog-theme($app-theme);
+    @include advanced-search-icon($app-theme, $nae-variables);
+    @include dialog-theme($app-theme, $nae-variables);
+    @include snack-bar-theme($app-theme, $nae-variables);
+    @include task-content-theme($app-theme, $nae-variables);
 }
 
 .mat-tab-group.nae-tab-fill-height .mat-tab-body-wrapper {

projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.html

@@ -12,7 +12,8 @@
                 <div fxLayout="row" fxLayoutAlign="start center" class="netgrif-input netgrif-input-search-fix">
                     <mat-form-field fxFlex="100" class="ldapGroup-assign-search" color="primary" appearance="outline">
                         <mat-icon matPrefix class="prefix-icon">search</mat-icon>
-                        <input matInput [formControl]="searchLdapGroupControl" placeholder="{{ 'side-menu.ldapGroup.choose' | translate }}">
+                        <mat-label>{{ 'side-menu.ldapGroup.choose' | translate }}</mat-label>
+                        <input matInput [formControl]="searchLdapGroupControl">
                         <button color="warn" *ngIf="searchLdapGroupControl.value" matSuffix mat-icon-button
                                 (click)="searchLdapGroupControl.setValue('')">
                             <mat-icon>close</mat-icon>

projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.scss

@@ -38,7 +38,6 @@
 
 .ldapGroup-assign-search {
     width: 100%;
-    color: #64748B;
     min-width: 250px;
     border-radius: 6px;
 }

projects/netgrif-components/src/lib/admin/ldap-group-role-assignment/ldap-group-role-assignment.component.theme.scss

@@ -1,10 +1,14 @@
 @use '@angular/material' as mat;
 
-@mixin roles-assignment-theme($theme) {
+@mixin ldap-assignment-theme($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
 
     .list-item-selected {
         background: mat.get-color-from-palette($primary, 100, 1);
     }
+
+    .ldapGroup-assign-search {
+        color: map-get($nae-variables, base-color);
+    }
 }

projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.scss

@@ -38,7 +38,6 @@
 
 .user-assign-search {
     width: 100%;
-    color: #64748B;
     min-width: 250px;
     border-radius: 6px;
 }

projects/netgrif-components/src/lib/admin/role-assignment/role-assignment.component.theme.scss

@@ -1,9 +1,13 @@
 @use '@angular/material' as mat;
 
-@mixin roles-assignment-theme($theme) {
+@mixin roles-assignment-theme($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
 
+    .user-assign-search {
+        color: map-get($nae-variables, base-color);
+    }
+
     .list-item-selected {
         background-color: mat.get-color-from-palette($primary, 100, 1);
     }

projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.html

@@ -5,9 +5,9 @@
         <mat-toolbar color="primary" class="min-height-72 margin-bottom-16px">
             <span>{{'admin.user-invite.newUser' | translate}}</span>
             <div fxFlex></div>
-            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="40"  class="padding-right-16px netgrif-input netgrif-input-fix netgrif-input-primary-fix netgrif-input-search-fix">
+            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="40"  class="padding-right-16px netgrif-input netgrif-input-search-fix">
                 <mat-icon fxFlex class="mail-icon">email</mat-icon>
-                <mat-form-field fxFlex="100" class="user-assign-search" color="primary" appearance="outline">
+                <mat-form-field fxFlex="100" class="user-invite-search" color="primary" appearance="outline">
                     <mat-label>{{ 'admin.user-invite.mail' | translate }}</mat-label>
                     <input matInput [formControl]="invitedEmailControl">
                     <button mat-button *ngIf="invitedEmailControl.value" matSuffix mat-icon-button

projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.scss

@@ -16,8 +16,10 @@
     padding: 0 16px;
     width: 100%;
     white-space: nowrap;
-    border: 1px solid #eeeeee;
-    background: white;
+}
+
+.user-invite-search {
+    border-radius: 6px;
 }
 
 .invited-card-font, .invited-card-font h1, .invited-card-font h2, .invited-card-font h3, .invited-card-font h4, .invited-card-font h5, .invited-card-font h6 {

projects/netgrif-components/src/lib/admin/user-invite/user-invite.component.theme.scss

@@ -0,0 +1,12 @@
+@use '@angular/material' as mat;
+
+@mixin user-invite-theme($theme, $nae-variables) {
+    .user-invite-search {
+        color: map-get($nae-variables, base-color);
+    }
+    .invited-card {
+        border: 1px solid map-get($nae-variables, border);
+        background: map-get($nae-variables, background);
+    }
+}
+

projects/netgrif-components/src/lib/data-fields/data-field.theme.scss

@@ -4,25 +4,149 @@
 @import "quill/dist/quill.core.css";
 @import '~node_modules/@covalent/markdown/markdown-theme';
 
-@mixin data-field-component($theme) {
+@mixin data-field-component($theme, $nae-variables) {
     $primary: map-get($theme, primary);
     $secondary: map-get($theme, accent);
     $warn: map-get($theme, warn);
 
-    $color-text-disabled: #64748B;
-    $color-outline-disabled: #CBD5E1;
+    $color-text-disabled: map-get($nae-variables, datafield-text-disabled);
+    $color-outline-disabled: map-get($nae-variables, datafield-outline-disabled);
 
-    $color-text-enabled: #64748B;
-    $color-outline-enabled: #64748B;
+    $color-text-enabled: map-get($nae-variables, datafield-text-enabled);
+    $color-outline-enabled: map-get($nae-variables, datafield-outline-enabled);
+
+    // DATAFIELD PALETTE CUSTOMIZATION
+    .enum-icon-item {
+        color: $color-text-enabled;
+    }
+    .enum-icon-item-disabled {
+        color: map-get($nae-variables,datafield-icon-disabled);
+    }
+    .stepper-arrow-text {
+        color: $color-text-enabled;
+    }
+    .stepper-disabled .stepper-arrow-text {
+        color: map-get($nae-variables,datafield-icon-disabled);
+    }
+    .stepper-tooltip-text {
+        color: map-get($nae-variables,datafield-stepper-color);
+    }
+    .vertical-state {
+        color: map-get($nae-variables,datafield-stepper-color);
+    }
+    .horizontal-state {
+        color: map-get($nae-variables,datafield-stepper-color);
+    }
+    .stepper-min-height {
+        background-color: map-get($nae-variables,datafield-stepper-background);
+    }
 
     .editor-preview > h1 {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid map-get($nae-variables, border);
     }
 
     .editor-preview > h2 {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid map-get($nae-variables, border);
+    }
+
+    .input-placeholder {
+        color: $color-text-enabled;
+    }
+
+    .form-input {
+        background: map-get($nae-variables, datafield-background);
+        color: $color-text-enabled;
+        border: 1px solid $color-text-enabled;
+    }
+
+    .form-input-disabled, .form-input-disabled:focus-within {
+        border-color: $color-outline-disabled !important;
+    }
+
+    .form-input-disabled {
+        border-color: $color-outline-disabled !important;
+    }
+
+    .no-cursor {
+        color: $color-text-disabled;
+    }
+
+    .file-field-label {
+        color: $color-text-enabled;
+    }
+
+    .selected-language-value {
+        color: $color-text-enabled;
+    }
+
+    .selected-language-value:disabled {
+        color: $color-text-disabled;
+    }
+
+    .form-input-interfield {
+        background: map-get($nae-variables, datafield-background);
+        color: $color-text-enabled;
+        border: 1px solid
+    }
+
+    .form-input-interfield:hover {
+        border: solid 2px $color-outline-enabled;
+    }
+
+    .language-svg-icon {
+        border: solid 1px $color-outline-enabled;
+    }
+
+    .filled-language-row {
+        background-color: map-get($nae-variables, datafield-background);
+    }
+
+    .filled-language-row:not(:last-child) {
+        border-bottom: 1px solid $color-outline-enabled;
+    }
+
+    .filled-languages-wrapper {
+        border-radius: 0 0 6px 6px;
+        border-left: 1px solid $color-outline-enabled;
+        border-right: 1px solid $color-outline-enabled;
+        border-bottom: 1px solid $color-outline-enabled;
+    }
+
+    .i18n-label {
+        color: $color-text-enabled;
+    }
+
+    .required-label-color {
+        color: map-get($nae-variables, datafield-required-label);
+    }
+
+    .disabled-color {
+        color: map-get($nae-variables, datafield-icon-disabled);
+    }
+
+    .html-border {
+        border: 1px solid $color-outline-disabled;
+    }
+
+    .rich-border {
+        border: 1px solid $color-outline-disabled;
+    }
+
+    .signature-canvas {
+        border: 1px solid $color-outline-enabled;
+        -webkit-text-stroke-color: map-get($nae-variables, datafield-canvas-stroke);
     }
 
+    .canvas-background-disabled {
+        background-color: map-get($nae-variables, datafield-canvas-disabled);
+    }
+
+    .user-field-label {
+        color: $color-text-enabled;
+    }
+
+    // END BLOCK
+
     .mat-option {
         height: auto !important;
         min-height: 48px;
@@ -271,12 +395,12 @@
 
         .mat-form-field-appearance-outline .mat-form-field-outline {
             color: $color-outline-enabled;
-            background-color: #FFFFFF;
+            background-color: map-get($nae-variables, datafield-background);
             border-radius: 6px;
         }
 
         .ql-toolbar {
-            background-color: #FFFFFF;
+            background-color: map-get($nae-variables, datafield-background);
         }
 
         .ql-editor {
@@ -285,7 +409,7 @@
         }
 
         .ql-editor.ql-blank {
-            background-color: #FFFFFF;
+            background-color: map-get($nae-variables, datafield-background);
         }
 
         .mat-form-field-appearance-outline .mat-form-field-outline-start {
@@ -431,7 +555,7 @@
     }
 
     :host ::ng-deep .editor-toolbar {
-        background-color: #FFFFFF !important;
+        background-color: map-get($nae-variables, datafield-background) !important;
         border-top: 1px solid $color-outline-enabled !important;
         border-left: 1px solid $color-outline-enabled !important;
         border-right: 1px solid $color-outline-enabled !important;
@@ -486,10 +610,3 @@ nc-user-list-default-field .mat-form-field .mat-form-field-prefix {
     top: 0 !important;
     padding-right: 4px !important;
 }
-
-:host .editor-toolbar {
-    background-color: #FFFFFF !important;
-    border-top: 1px solid #FFFFFF !important;
-    border-left: 1px solid #FFFFFF !important;
-    border-right: 1px solid #FFFFFF !important;
-}

projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-icon-field/enumeration-icon-field.component.scss

@@ -5,7 +5,6 @@
     line-height: 24px;
     letter-spacing: -0.2px;
     text-align: left;
-    color: #64748B;
     text-decoration: none;
     padding: 8px 0;
 }