feat(stark-ui): color settings

ISSUES CLOSED: #662
NationalBankBelgium · Sep 13, 2018 · fcd12d5 · fcd12d5
1 parent 7707acf
commit fcd12d5
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 59 deletions.
diff --git a/packages/stark-ui/assets/styles/_colors.scss b/packages/stark-ui/assets/styles/_colors.scss
@@ -13,9 +13,9 @@ $mat-light-theme-foreground: $foregrounds;
   }
 }
 
-$stark-color-theme: mat-light-theme(
+$theme: mat-light-theme(
   map-get($base-theme, primary-palette),
   map-get($base-theme, accent-palette),
   map-get($base-theme, warn-palette)
 ) !default;
-@include angular-material-theme($stark-color-theme);
+@include angular-material-theme($theme);
diff --git a/packages/stark-ui/assets/styles/_variables.scss b/packages/stark-ui/assets/styles/_variables.scss
@@ -1,12 +1,49 @@
-$border-radius: 2px;
+$color-theme: (
+  accent: (
+    color: #8f0039,
+    contrast: $light-primary-text
+  ),
+  alert: (
+    color: #d32f2f,
+    contrast: $light-primary-text
+  ),
+  alt: (
+    color: #323232,
+    contrast: $light-primary-text
+  ),
+  neutral: (
+    color: #bfbfbf,
+    contrast: $light-primary-text
+  ),
+  primary: (
+    color: #0076c8,
+    contrast: $light-primary-text
+  ),
+  success: (
+    color: #4caf50,
+    contrast: $light-primary-text
+  ),
+  warning: (
+    color: #ff9800,
+    contrast: $light-primary-text
+  ),
+  white-transp: (
+    color: rgba(255, 255, 255, 0.87),
+    contrast: $dark-primary-text
+  )
+);
+
+@if variable-exists(stark-color-theme) {
+  $color-theme: map-merge($color-theme, $stark-color-theme);
+}
 
 $primary-palette: (
   50: #e3f2fd,
   100: #bbdefb,
   200: #90caf9,
   300: #64b5f6,
   400: #42a5f5,
-  500: #0076c8,
+  500: map-get(map-get($color-theme, primary), color),
   600: #006ab4,
   700: #005ea0,
   800: #1565c0,
@@ -38,7 +75,7 @@ $accent-palette: (
   200: #f48fb1,
   300: #f06292,
   400: #ec407a,
-  500: #8f0039,
+  500: map-get(map-get($color-theme, accent), color),
   600: #70002d,
   700: #c2185b,
   800: #ad1457,
@@ -70,7 +107,7 @@ $warning-palette: (
   200: #ffcc80,
   300: #ffb74d,
   400: #ffa726,
-  500: #ff9800,
+  500: map-get(map-get($color-theme, warning), color),
   600: #fb8c00,
   700: #f57c00,
   800: #ef6c00,
@@ -133,35 +170,6 @@ $base-theme: (
   accent-palette: mat-palette($accent-palette),
   warn-palette: mat-palette($warning-palette)
 );
-$button-theme: (
-  alert: (
-    color: #d32f2f,
-    contrast: $light-primary-text
-  ),
-  alt: (
-    color: #323232,
-    contrast: $light-primary-text
-  ),
-  neutral: (
-    color: #bfbfbf,
-    contrast: $light-primary-text
-  ),
-  success: (
-    color: #4caf50,
-    contrast: $light-primary-text
-  )
-);
-$dropdown-theme: (
-  white-transp: (
-    color: rgba(255, 255, 255, 0.87)
-  )
-);
-$card-theme: (
-  border-radius: $border-radius
-);
-$table-theme: (
-  border-radius: $border-radius
-);
 
 // font-size, line-height, font-weight
 // https://material.angular.io/guide/typography

diff --git a/packages/stark-ui/assets/themes/_button-theme.scss b/packages/stark-ui/assets/themes/_button-theme.scss
@@ -29,24 +29,20 @@ $icon-size: 18px;
   }
 }
 
-@if variable-exists(stark-button-theme) {
-  $button-theme: map-merge($button-theme, $stark-button-theme);
-}
-
 .mat-success {
-  @include stark-button-color(map-get(map-get($button-theme, success), color), map-get(map-get($button-theme, success), contrast));
+  @include stark-button-color(map-get(map-get($color-theme, success), color), map-get(map-get($color-theme, success), contrast));
 }
 
 .mat-alert {
-  @include stark-button-color(map-get(map-get($button-theme, alert), color), map-get(map-get($button-theme, alert), contrast));
+  @include stark-button-color(map-get(map-get($color-theme, alert), color), map-get(map-get($color-theme, alert), contrast));
 }
 
 .mat-alt {
-  @include stark-button-color(map-get(map-get($button-theme, alt), color), map-get(map-get($button-theme, alt), contrast));
+  @include stark-button-color(map-get(map-get($color-theme, alt), color), map-get(map-get($color-theme, alt), contrast));
 }
 
 .mat-neutral {
-  @include stark-button-color(map-get(map-get($button-theme, neutral), color), map-get(map-get($button-theme, neutral), contrast));
+  @include stark-button-color(map-get(map-get($color-theme, neutral), color), map-get(map-get($color-theme, neutral), contrast));
 }
 
 .mat-white {

diff --git a/packages/stark-ui/assets/themes/_card-theme.scss b/packages/stark-ui/assets/themes/_card-theme.scss
@@ -1,7 +0,0 @@
-mat-card.mat-card {
-  border-radius: map-get($card-theme, border-radius);
-}
-
-$card-theme: (
-  border-radius: $border-radius
-);

diff --git a/packages/stark-ui/src/common/classes/abstract-component.ts b/packages/stark-ui/src/common/classes/abstract-component.ts
@@ -0,0 +1,23 @@
+import { OnInit, Input, Renderer2, ElementRef } from "@angular/core";
+
+/**
+ * Abstract class to add the right stark class color to the elementRef
+ */
+export abstract class AbstractStarkUiComponent implements OnInit {
+	/**
+	 * Color theme
+	 */
+	@Input()
+	protected color?: string;
+
+	protected constructor(protected renderer: Renderer2, protected elementRef: ElementRef) {}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		if (this.color) {
+			this.renderer.addClass(this.elementRef.nativeElement, "stark-" + this.color);
+		}
+	}
+}
diff --git a/packages/stark-ui/src/modules/action-bar/components/_action-bar-theme.scss b/packages/stark-ui/src/modules/action-bar/components/_action-bar-theme.scss
@@ -16,16 +16,16 @@
         color: mat-color(map-get($base-theme, accent-palette));
       }
       &.success {
-        color: map-get(map-get($button-theme, success), color);
+        color: map-get(map-get($color-theme, success), color);
       }
       &.alert {
-        color: map-get(map-get($button-theme, alert), color);
+        color: map-get(map-get($color-theme, alert), color);
       }
       &.alt {
-        color: map-get(map-get($button-theme, alt), color);
+        color: map-get(map-get($color-theme, alt), color);
       }
       &.neutral {
-        color: map-get(map-get($button-theme, neutral), color);
+        color: map-get(map-get($color-theme, neutral), color);
       }
       &.white {
         color: #fff;

diff --git a/packages/stark-ui/src/modules/dropdown/components/_dropdown-theme.scss b/packages/stark-ui/src/modules/dropdown/components/_dropdown-theme.scss
@@ -22,7 +22,7 @@
 }
 
 .stark-dropdown {
-  &[color="white"] {
-    @include stark-dropdown-color(map-get(map-get($dropdown-theme, white-transp), color));
+  &.stark-white {
+    @include stark-dropdown-color(map-get(map-get($color-theme, white-transp), color));
   }
 }
diff --git a/packages/stark-ui/src/modules/dropdown/components/dropdown.component.ts b/packages/stark-ui/src/modules/dropdown/components/dropdown.component.ts
@@ -1,5 +1,18 @@
-import { Component, EventEmitter, Inject, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from "@angular/core";
+import {
+	Component,
+	EventEmitter,
+	Inject,
+	Input,
+	OnChanges,
+	OnInit,
+	Output,
+	SimpleChanges,
+	ViewEncapsulation,
+	ElementRef,
+	Renderer2
+} from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { AbstractStarkUiComponent } from "./../../../common/classes/abstract-component";
 
 /**
  * Name of the component
@@ -19,7 +32,7 @@ const componentName: string = "stark-dropdown";
 		class: componentName
 	}
 })
-export class StarkDropdownComponent implements OnInit, OnChanges, OnInit {
+export class StarkDropdownComponent extends AbstractStarkUiComponent implements OnInit, OnChanges, OnInit {
 	/**
 	 * If the dropdown will contain a default blank (optional)
 	 */
@@ -114,7 +127,13 @@ export class StarkDropdownComponent implements OnInit, OnChanges, OnInit {
 
 	public optionsAreSimpleTypes: boolean;
 
-	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+	public constructor(
+		@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService,
+		protected renderer: Renderer2,
+		protected elementRef: ElementRef
+	) {
+		super(renderer, elementRef);
+	}
 
 	/**
 	 * Component lifecycle hook
@@ -123,6 +142,7 @@ export class StarkDropdownComponent implements OnInit, OnChanges, OnInit {
 		this.logger.debug(componentName + ": component initialized");
 		this.optionsAreSimpleTypes = this.areSimpleTypes();
 		this.setDefaultBlank();
+		super.ngOnInit();
 	}
 
 	/**