From b551caaf055965eb756500d1e75b578e40b3f94f Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Wed, 12 Aug 2020 09:28:14 -0400
Subject: [PATCH] feat(styling): find way to add colors to SVGs used by the lib
 (#557)

* feat(styling): find way to add colors to SVGs used by the lib
---
 ...grid-tree-data-hierarchical.component.scss | 33 ++++++++++++++++---
 .../styles/sass-utilities.scss                | 26 +++++++++++++++
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/app/examples/grid-tree-data-hierarchical.component.scss b/src/app/examples/grid-tree-data-hierarchical.component.scss
index 72725d4f8..aeae101c0 100644
--- a/src/app/examples/grid-tree-data-hierarchical.component.scss
+++ b/src/app/examples/grid-tree-data-hierarchical.component.scss
@@ -3,11 +3,13 @@ $icon-width-mdi-plus: 14px;
 $icon-width-mdi-arrow-collapse: 14px;
 $icon-width-mdi-arrow-expand: 14px;
 $icon-width-mdi-close-thick: 12px;
-$icon-color-mdi-file-pdf-outline: #f14668;
-$icon-color-mdi-file-music-outline: #3298dc;
-$icon-color-mdi-file-excel-outline: #1E9F75;
-$icon-color-mdi-folder: orange;
-$icon-color-mdi-folder-open: orange;
+
+/* You can change the SASS color via the associated variable, BUT it's better to use the recolor @mixing shown down below */
+// $icon-color-mdi-file-pdf-outline: #f14668;
+// $icon-color-mdi-file-music-outline: #3298dc;
+// $icon-color-mdi-file-excel-outline: #1E9F75;
+// $icon-color-mdi-folder: orange;
+// $icon-color-mdi-folder-open: #ffa500;
 
 /* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
 @import '../modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss';
@@ -20,3 +22,24 @@ $icon-color-mdi-folder-open: orange;
     height: 1.5rem;
     width: 1.5rem;
 }
+
+.icon.mdi-file-pdf-outline {
+  /** 1. use `filter` color */
+  // filter: invert(62%) sepia(93%) saturate(5654%) hue-rotate(325deg) brightness(100%) contrast(90%);
+
+  /** 2. or use the SASS @mixin (from Angular-Slickgrid "sass-utilities.scss") that will produce the `filter` color */
+  @include recolor(#f14668, 0.9);
+}
+
+.icon.mdi-folder, .icon.mdi-folder-open {
+  @include recolor(#ffa500, 0.9);
+}
+.icon.mdi-file-music-outline {
+  @include recolor(#3298dc, 0.9);
+}
+.icon.mdi-file-excel-outline {
+  @include recolor(#1E9F75, 0.9);
+}
+.icon.mdi-file-document-outline {
+  @include recolor(#686868, 0.9);
+}
diff --git a/src/app/modules/angular-slickgrid/styles/sass-utilities.scss b/src/app/modules/angular-slickgrid/styles/sass-utilities.scss
index 67a923636..1a09924a0 100644
--- a/src/app/modules/angular-slickgrid/styles/sass-utilities.scss
+++ b/src/app/modules/angular-slickgrid/styles/sass-utilities.scss
@@ -6,3 +6,29 @@
     $string: '%23' + $string;
 	@return $string;
 }
+
+@mixin recolor($color: #000, $opacity: 1) {
+  $r: red($color) / 255;
+  $g: green($color) / 255;
+  $b: blue($color) / 255;
+  $a: $opacity;
+
+  // grayscale fallback if SVG from data url is not supported
+  $lightness: lightness($color);
+  filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
+
+  // color filter
+  $svg-filter-id: "recolor";
+  filter: url('data:image/svg+xml;utf8,\
+    <svg xmlns="http://www.w3.org/2000/svg">\
+      <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
+        <feColorMatrix type="matrix" values="\
+          0 0 0 0 #{$r}\
+          0 0 0 0 #{$g}\
+          0 0 0 0 #{$b}\
+          0 0 0 #{$a} 0\
+        "/>\
+      </filter>\
+    </svg>\
+    ##{$svg-filter-id}');
+}