Merge pull request DSpace#1923 from 4Science/CST-6171

Customizability of theme colours

Author: tdonohue

src/app/navbar/navbar.component.scss

@@ -1,5 +1,5 @@
 nav.navbar {
-    border-bottom: 1px var(--bs-gray-400) solid;
+    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
     align-items: baseline;
 }
 

src/app/shared/object-collection/shared/mydspace-item-status/my-dspace-item-status.component.spec.ts

@@ -55,34 +55,34 @@ describe('MyDSpaceItemStatusComponent', () => {
     component.status = MyDspaceItemStatusType.VALIDATION;
     fixture.detectChanges();
     expect(component.badgeContent).toBe(MyDspaceItemStatusType.VALIDATION);
-    expect(component.badgeClass).toBe('text-light badge badge-warning');
+    expect(component.badgeClass).toBe('text-light badge badge-validation');
   });
 
   it('should init badge content and class', () => {
     component.status = MyDspaceItemStatusType.WAITING_CONTROLLER;
     fixture.detectChanges();
     expect(component.badgeContent).toBe(MyDspaceItemStatusType.WAITING_CONTROLLER);
-    expect(component.badgeClass).toBe('text-light badge badge-info');
+    expect(component.badgeClass).toBe('text-light badge badge-waiting-controller');
   });
 
   it('should init badge content and class', () => {
     component.status = MyDspaceItemStatusType.WORKSPACE;
     fixture.detectChanges();
     expect(component.badgeContent).toBe(MyDspaceItemStatusType.WORKSPACE);
-    expect(component.badgeClass).toBe('text-light badge badge-primary');
+    expect(component.badgeClass).toBe('text-light badge badge-workspace');
   });
 
   it('should init badge content and class', () => {
     component.status = MyDspaceItemStatusType.ARCHIVED;
     fixture.detectChanges();
     expect(component.badgeContent).toBe(MyDspaceItemStatusType.ARCHIVED);
-    expect(component.badgeClass).toBe('text-light badge badge-success');
+    expect(component.badgeClass).toBe('text-light badge badge-archived');
   });
 
   it('should init badge content and class', () => {
     component.status = MyDspaceItemStatusType.WORKFLOW;
     fixture.detectChanges();
     expect(component.badgeContent).toBe(MyDspaceItemStatusType.WORKFLOW);
-    expect(component.badgeClass).toBe('text-light badge badge-info');
+    expect(component.badgeClass).toBe('text-light badge badge-workflow');
   });
 });

src/app/shared/object-collection/shared/mydspace-item-status/my-dspace-item-status.component.ts

@@ -34,19 +34,19 @@ export class MyDSpaceItemStatusComponent implements OnInit {
     this.badgeClass = 'text-light badge ';
     switch (this.status) {
       case MyDspaceItemStatusType.VALIDATION:
-        this.badgeClass += 'badge-warning';
+        this.badgeClass += 'badge-validation';
         break;
       case MyDspaceItemStatusType.WAITING_CONTROLLER:
-        this.badgeClass += 'badge-info';
+        this.badgeClass += 'badge-waiting-controller';
         break;
       case MyDspaceItemStatusType.WORKSPACE:
-        this.badgeClass += 'badge-primary';
+        this.badgeClass += 'badge-workspace';
         break;
       case MyDspaceItemStatusType.ARCHIVED:
-        this.badgeClass += 'badge-success';
+        this.badgeClass += 'badge-archived';
         break;
       case MyDspaceItemStatusType.WORKFLOW:
-        this.badgeClass += 'badge-info';
+        this.badgeClass += 'badge-workflow';
         break;
     }
   }

src/styles/_global-styles.scss

@@ -204,3 +204,27 @@ ds-dynamic-form-control-container.d-none {
 }
 
 
+
+.badge-validation {
+  background-color: #{map-get($theme-colors, warning)};
+}
+
+.badge-waiting-controller {
+  background-color: #{map-get($theme-colors, info)};
+}
+
+.badge-workspace {
+  background-color: #{map-get($theme-colors, primary)};
+}
+
+.badge-archived {
+  background-color: #{map-get($theme-colors, success)};
+}
+
+.badge-workflow {
+  background-color: #{map-get($theme-colors, info)};
+}
+
+.badge-item-type {
+  background-color: #{map-get($theme-colors, info)};
+}

src/themes/dspace/app/navbar/navbar.component.scss

@@ -1,6 +1,6 @@
 nav.navbar {
   border-top: 1px var(--ds-header-navbar-border-top-color) solid;
-  border-bottom: 5px var(--bs-green) solid;
+  border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
   align-items: baseline;
   color: var(--ds-header-icon-color);
 }

src/themes/dspace/styles/_theme_css_variable_overrides.scss

@@ -6,5 +6,6 @@
   --ds-banner-background-gradient-width: 300px;
   --ds-home-news-link-color: #{$green};
   --ds-home-news-link-hover-color: #{darken($green, 15%)};
+  --ds-header-navbar-border-bottom-color: #{$green};
 }
 

src/themes/dspace/styles/_theme_sass_variable_overrides.scss

@@ -10,14 +10,15 @@ $font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI"
 $navbar-dark-color: #FFFFFF;
 
 /* Reassign color vars to semantic color scheme */
-$blue: #43515f !default;
+$blue: #2b4e72 !default;
 $green: #92C642 !default;
 $cyan: #207698 !default;
 $yellow: #ec9433 !default;
 $red: #CF4444 !default;
 $dark: #43515f !default;
 
 $gray-800: #343a40 !default;
+$gray-700: #495057 !default;
 $gray-400: #ced4da !default;
 $gray-100: #f8f9fa !default;
 
@@ -27,3 +28,14 @@ $table-accent-bg: $gray-100 !default;   // Bootstrap $gray-100
 $table-hover-bg: $gray-400 !default;   // Bootstrap $gray-400
 
 $yiq-contrasted-threshold:  170 !default;
+
+$theme-colors: (
+        primary: $dark,
+        secondary: $gray-700,
+        success: $green,
+        info: $cyan,
+        warning: $yellow,
+        danger: $red,
+        light: $gray-100,
+        dark: $dark
+) !default;