feat(styling): find way to add colors to SVGs used by the lib (#73)

ghiscoding · Aug 11, 2020 · 8a07c16 · 8a07c16
1 parent c423530
commit 8a07c16
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 9 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example02.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example02.scss
@@ -1,6 +1,4 @@
 $control-height: 2.4em;
-$icon-color: #363636;
-$icon-color-mdi-close: $icon-color;
 
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 @import 'bulma/bulma';

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example03.scss
@@ -1,6 +1,12 @@
 $control-height: 2.4em;
-$icon-color: #363636;
-$icon-color-mdi-close: red;
 
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 @import 'bulma/bulma';
+
+.slick-groupby-remove.mdi-close {
+  /** 1. use `filter` color */
+  // filter: invert(32%) sepia(96%) saturate(7466%) hue-rotate(356deg) brightness(97%) contrast(120%);
+
+  /** 2. or use the SASS @mixin that will produce the `filter` color */
+  @include filtercolor(#ff0000, 0.9); // convert red color into `filter` with opacity of 0.9
+}
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example06.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example06.scss
@@ -3,10 +3,33 @@ $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 filtercolor @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;
 
 @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+
+.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 that will produce the `filter` color */
+  @include filtercolor(#f14668, 0.9);
+}
+
+.icon.mdi-folder, .icon.mdi-folder-open {
+  @include filtercolor(#ffa500, 0.9);
+}
+.icon.mdi-file-music-outline {
+  @include filtercolor(#3298dc, 0.9);
+}
+.icon.mdi-file-excel-outline {
+  @include filtercolor(#1E9F75, 0.9);
+}
+.icon.mdi-file-document-outline {
+  @include filtercolor(#686868, 0.9);
+}
diff --git a/packages/common/src/styles/material-svg-icons.scss b/packages/common/src/styles/material-svg-icons.scss
@@ -1,16 +1,24 @@
 /* icon color */
+$icon-color-mdi-alert-circle: $icon-color !default;
+$icon-color-mdi-alert-octagon: $icon-color !default;
 $icon-color-mdi-arrow-collapse: $icon-color !default;
 $icon-color-mdi-arrow-expand: $icon-color !default;
 $icon-color-mdi-cancel: $icon-color !default;
+$icon-color-mdi-cash-check: $icon-color !default;
+$icon-color-mdi-cash-remove: $icon-color !default;
 $icon-color-mdi-check: $icon-color !default;
 $icon-color-mdi-checkbox-blank-outline: $icon-color !default;
 $icon-color-mdi-check-box-outline: $icon-color !default;
 $icon-color-mdi-checkbox-marked: $icon-color !default;
+$icon-color-mdi-check-circle: $icon-color !default;
+$icon-color-mdi-check-outline: $icon-color !default;
 $icon-color-mdi-close: $icon-color !default;
 $icon-color-mdi-close-circle: $icon-color !default;
 $icon-color-mdi-close-circle-outline: $icon-color !default;
 $icon-color-mdi-close-thick: $icon-color !default;
 $icon-color-mdi-content-copy: $icon-color !default;
+$icon-color-mdi-currency-usd: $icon-color !default;
+$icon-color-mdi-currency-usd-off: $icon-color !default;
 $icon-color-mdi-database-refresh: $icon-color !default;
 $icon-color-mdi-download: $icon-color !default;
 $icon-color-mdi-file-document-outline: $icon-color !default;
@@ -52,18 +60,26 @@ $icon-color-mdi-table-refresh: $icon-color !default;
 $icon-color-mdi-undo: $icon-color !default;
 
 /* icon width */
+$icon-width-mdi-alert-circle: $icon-width !default;
+$icon-width-mdi-alert-octagon: $icon-width !default;
 $icon-width-mdi-arrow-collapse: $icon-width !default;
 $icon-width-mdi-arrow-expand: $icon-width !default;
 $icon-width-mdi-cancel: $icon-width !default;
+$icon-width-mdi-cash-check: $icon-width !default;
+$icon-width-mdi-cash-remove: $icon-width !default;
 $icon-width-mdi-check: $icon-width !default;
 $icon-width-mdi-checkbox-blank-outline: $icon-width !default;
 $icon-width-mdi-check-box-outline: $icon-width !default;
 $icon-width-mdi-checkbox-marked: $icon-width !default;
+$icon-width-mdi-check-circle: $icon-width !default;
+$icon-width-mdi-check-outline: $icon-width !default;
 $icon-width-mdi-close: $icon-width !default;
 $icon-width-mdi-close-circle: $icon-width !default;
 $icon-width-mdi-close-circle-outline: $icon-width !default;
 $icon-width-mdi-close-thick: $icon-width !default;
 $icon-width-mdi-content-copy: $icon-width !default;
+$icon-width-mdi-currency-usd: $icon-width !default;
+$icon-width-mdi-currency-usd-off: $icon-width !default;
 $icon-width-mdi-database-refresh: $icon-width !default;
 $icon-width-mdi-download: $icon-width !default;
 $icon-width-mdi-file-document-outline: $icon-width !default;
@@ -105,6 +121,16 @@ $icon-width-mdi-table-refresh: $icon-width !default;
 $icon-width-mdi-undo: $icon-width !default;
 
 .mdi {
+  &.mdi-alert-circle:before {
+    width: $icon-width-mdi-alert-circle;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-alert-circle)}" viewBox="0 0 24 24"><path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
+  }
+  &.mdi-alert-octagon:before {
+    width: $icon-width-mdi-alert-octagon;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-alert-octagon)}" viewBox="0 0 24 24"><path d="M13 13H11V7H13M11 15H13V17H11M15.73 3H8.27L3 8.27V15.73L8.27 21H15.73L21 15.73V8.27L15.73 3Z"></path></svg>');
+  }
   &.mdi-arrow-collapse:before {
     width: $icon-width-mdi-arrow-collapse;
     display: inline-block;
@@ -120,6 +146,16 @@ $icon-width-mdi-undo: $icon-width !default;
     display: inline-block;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-cancel)}" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z"></path></svg>');
   }
+  &.mdi-cash-check:before {
+    width: $icon-width-mdi-cash-check;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-cash-check)}" viewBox="0 0 24 24"><path d="M3 6V18H13.32C13.1 17.33 13 16.66 13 16H7C7 14.9 6.11 14 5 14V10C6.11 10 7 9.11 7 8H17C17 9.11 17.9 10 19 10V10.06C19.67 10.06 20.34 10.18 21 10.4V6H3M12 9C10.3 9.03 9 10.3 9 12C9 13.7 10.3 14.94 12 15C12.38 15 12.77 14.92 13.14 14.77C13.41 13.67 13.86 12.63 14.97 11.61C14.85 10.28 13.59 8.97 12 9M21.63 12.27L17.76 16.17L16.41 14.8L15 16.22L17.75 19L23.03 13.68L21.63 12.27Z"></path></svg>');
+  }
+  &.mdi-cash-remove:before {
+    width: $icon-width-mdi-cash-remove;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-cash-remove)}" viewBox="0 0 24 24"><path d="M15.46 18.12L16.88 19.54L19 17.41L21.12 19.54L22.54 18.12L20.41 16L22.54 13.88L21.12 12.46L19 14.59L16.88 12.46L15.46 13.88L17.59 16M14.97 11.62C14.86 10.28 13.58 8.97 12 9C10.3 9.04 9 10.3 9 12C9 13.7 10.3 14.94 12 15C12.39 15 12.77 14.92 13.14 14.77C13.41 13.67 13.86 12.63 14.97 11.62M13 16H7C7 14.9 6.1 14 5 14V10C6.1 10 7 9.1 7 8H17C17 9.1 17.9 10 19 10V10.05C19.67 10.06 20.34 10.18 21 10.4V6H3V18H13.32C13.1 17.33 13 16.66 13 16Z"></path></svg>');
+  }
   &.mdi-check:before {
     width: $icon-width-mdi-check;
     display: inline-block;
@@ -140,6 +176,16 @@ $icon-width-mdi-undo: $icon-width !default;
     display: inline-block;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-checkbox-marked)}" viewBox="0 0 24 24"><path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path></svg>');
   }
+  &.mdi-check-circle:before {
+    width: $icon-width-mdi-check-circle;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-check-circle)}" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"></path></svg>');
+  }
+  &.mdi-check-outline:before {
+    width: $icon-width-mdi-check-outline;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-check-outline)}" viewBox="0 0 24 24"><path d="M19.78,2.2L24,6.42L8.44,22L0,13.55L4.22,9.33L8.44,13.55L19.78,2.2M19.78,5L8.44,16.36L4.22,12.19L2.81,13.55L8.44,19.17L21.19,6.42L19.78,5Z"></path></svg>');
+  }
   &.mdi-close:before {
     width: $icon-width-mdi-close;
     display: inline-block;
@@ -165,6 +211,16 @@ $icon-width-mdi-undo: $icon-width !default;
     display: inline-block;
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-content-copy)}" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg>');
   }
+  &.mdi-currency-usd:before {
+    width: $icon-width-mdi-currency-usd;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-currency-usd)}" viewBox="0 0 24 24"><path d="M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z"></path></svg>');
+  }
+  &.mdi-currency-usd-off:before {
+    width: $icon-width-mdi-currency-usd-off;
+    display: inline-block;
+    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-color-mdi-currency-usd-off)}" viewBox="0 0 24 24"><path d="M3,4.27L4.28,3L21,19.72L19.73,21L16.06,17.33C15.44,18 14.54,18.55 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15H9C9,16.08 10.37,17 12,17C13.13,17 14.14,16.56 14.65,15.92L11.68,12.95C9.58,12.42 7,11.75 7,9C7,8.77 7,8.55 7.07,8.34L3,4.27M10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C11.63,7 11.28,7.05 10.95,7.13L9.4,5.58L10.5,5.18Z"></path></svg>');
+  }
   &.mdi-database-refresh:before {
     width: $icon-width-mdi-database-refresh;
     display: inline-block;

diff --git a/packages/common/src/styles/sass-utilities.scss b/packages/common/src/styles/sass-utilities.scss
@@ -6,3 +6,29 @@
     $string: '%23' + $string;
 	@return $string;
 }
+
+@mixin filtercolor($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: "filtercolor";
+  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}');
+}