From 578fa3558a916cff87a4c418a8a396337c98e7f8 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Mon, 23 May 2016 16:48:00 +0300
Subject: [PATCH] docs(blur): how to enable blur theme

---
 .../011-changing-color-scheme/index.md        |  2 +-
 .../014-switch-to-blur-theme/index.md         | 70 +++++++++++++------
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/docs/contents/articles/011-changing-color-scheme/index.md b/docs/contents/articles/011-changing-color-scheme/index.md
index b146cef0..7bcc5930 100644
--- a/docs/contents/articles/011-changing-color-scheme/index.md
+++ b/docs/contents/articles/011-changing-color-scheme/index.md
@@ -22,7 +22,7 @@ As we want a dark theme, we're taking `ng2`.
 
 To do this, replace 
 ```scss
-@import 'colorSchemes/blue';
+@import 'colorSchemes/ng2';
 ```
 
 to
diff --git a/docs/contents/articles/014-switch-to-blur-theme/index.md b/docs/contents/articles/014-switch-to-blur-theme/index.md
index aa7fbcd6..67572eff 100644
--- a/docs/contents/articles/014-switch-to-blur-theme/index.md
+++ b/docs/contents/articles/014-switch-to-blur-theme/index.md
@@ -8,47 +8,75 @@ template: article.jade
 
 If you want to switch theme to the blur, you need to follow 3 simple steps:
 
-1) Blur theme needs some javascript to calculate initial background offsets for panels.
-That's why first thing you need to do is enable that code.
-This should be done in Angular **configuration block**. 
-For example you can add following lines to `src/app/theme/theme.config.js`:
+1) Blur color scheme needs some javascript to calculate initial background offsets for panels.
+That's why we need to tell the system that we want to use blur theme by specifying this in `src/app/theme/theme.config.ts`:
 ```javascript
-  baConfigProvider.changeTheme({blur: true});
+  baConfigProvider.changeTheme({name: 'blur'});
 ```
 
-2) As well you need to change some colors. 
-For example *Mint*'s default gray text color doesn't look good on blurred panels.
+2) Also you need to change some colors. 
 For our blur theme we use following configuration:
 ```javascript
-  baConfigProvider.changeColors({
-    default: 'rgba(#000000, 0.2)',
-    defaultText: '#ffffff',
+  let colorScheme = {
+    primary: '#209e91',
+    info: '#2dacd1',
+    success: '#90b900',
+    warning: '#dfb81c',
+    danger: '#e85656',
+  };
+  this._baConfig.changeColors({
+    default: '#4e4e55',
+    defaultText: '#e2e2e2',
+    border: '#dddddd',
+    borderDark: '#aaaaaa',
+
+    primary: colorScheme.primary,
+    info: colorScheme.info,
+    success: colorScheme.success,
+    warning: colorScheme.warning,
+    danger: colorScheme.danger,
+
+    primaryLight: colorHelper.tint(colorScheme.primary, 30),
+    infoLight: colorHelper.tint(colorScheme.info, 30),
+    successLight: colorHelper.tint(colorScheme.success, 30),
+    warningLight: colorHelper.tint(colorScheme.warning, 30),
+    dangerLight: colorHelper.tint(colorScheme.danger, 30),
+
+    primaryDark: colorHelper.shade(colorScheme.primary, 15),
+    infoDark: colorHelper.shade(colorScheme.info, 15),
+    successDark: colorHelper.shade(colorScheme.success, 15),
+    warningDark: colorHelper.shade(colorScheme.warning, 15),
+    dangerDark: colorHelper.shade(colorScheme.danger, 15),
+
     dashboard: {
-      white: '#ffffff',
+      blueStone: '#005562',
+      surfieGreen: '#0e8174',
+      silverTree: '#6eba8c',
+      gossip: '#b9f2a1',
+      white: '#10c4b5',
     },
   });
 ```
 3) CSS should also be recompiled. 
-Before running build command, we suggest you to switch to *blur* color profile.
-To do this replace theme in file `src/sass/theme/common.scss`:
-
+Before running build command, switch to *blur* color profile.
+To do so replace theme in `src/app/theme/sass/conf/conf.scss`:
  
 ```scss
-@import 'theme/conf/colorScheme/mint';
+@import 'colorScheme/ng2';
 ```
  
 to
  
 ```scss
-@import 'theme/conf/colorScheme/blur';
+@import 'colorScheme/blur';
 ```
 
-3.1) If you would like to use some different background, replace following images:
+Additionaly, if you would like to use some different background, replace the following images:
 
-- `src/app/assets/img/blur-bg.jpg` (main background image)
-- `src/app/assets/img/blur-bg-blurred.jpg` (blurred background image used on panels)
+- `src/assets/img/blur-bg.jpg` (main background image)
+- `src/assets/img/blur-bg-blurred.jpg` (blurred background image used on panels)
 
-We suggest using 10px Gaussian blur to blur original image.
+We suggest using 10px Gaussian blur to blur an original image.
 
 _________________________________________ 
-That's it! You have successfully blurred your theme! Run `gulp serve` and check it out.
\ No newline at end of file
+That's it! You have successfully blurred your theme! Run `npm start` and check it out.
\ No newline at end of file