refactor(watermark): add material watermark image

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_watermark.scss

@@ -17,7 +17,7 @@ $_dark-watermark-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3d
 $_dark-watermark: extend(
     $_light-watermark,
     (
-        background-image: #{url($_dark-watermark-image)},
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg0IiBoZWlnaHQ9IjEwNCIgdmlld0JveD0iMCAwIDE4NCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpjb2xvci1kb2RnZSIgb3BhY2l0eT0iMC4wNSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuNzIgMTAuMTQ4TDEwLjMgOC40MzM5OUwxMi4xMDYgMS43MTA5OUw3LjA5IDAuMzY4OTg4TDUuMjgzIDcuMDkxOTlMMi4zMDggNi4yOTk5OUwxLjE1IDEwLjYwOUw0LjEyNSAxMS40MDlMMS4yMzUgMjIuMTYxQzAuMzM4MzMzIDI1LjQ5OSAwLjIxNiAyNy45MDEzIDAuODY4IDI5LjM2OEMxLjUyIDMwLjgzNDcgMy4xNjQgMzEuOTE5NyA1LjggMzIuNjIzQzcuNDEwNzEgMzIuOTg3NiA5LjA1MDM2IDMzLjIwOTcgMTAuNyAzMy4yODdMMTEuNTUxIDI5LjE4N0w3LjcwMSAyOC4zMDdDNi41NTM2NyAyOC4wMDAzIDUuOTI0IDI3LjUwMDMgNS44MTIgMjYuODA3QzUuNzgwMzcgMjUuNDkzMyA1Ljk4MDQzIDI0LjE4NDMgNi40MDMgMjIuOTRMOS4xNDQgMTIuNzRMMTUuNTYgMTQuNDU0TDE2LjcyIDEwLjE0OFpNMTkuNyAzNS43OUwyNC4wNDggMTkuNjA5TDI1LjE4MyAxOS40NjVDMjcuNjI4NSAxOS4xMjQ4IDMwLjEwMzkgMTkuMDUzIDMyLjU2NSAxOS4yNTFMMzMuOTE5IDE0LjJDMzAuOTQwOCAxNC4wMTgxIDI3Ljk1NTcgMTQuNDE4OSAyNS4xMzEgMTUuMzhMMjUuODc4IDEyLjZMMjAuODU3IDExLjI1OEwxNC42MjkgMzQuNDM2TDE5LjcgMzUuNzlaTTM2LjQ4MyA0MC4yNzVMNDIuNzEyIDE3LjA5M0wzNy42NCAxNS43MzhMMzEuNDEyIDM4LjkyMUwzNi40ODMgNDAuMjc1Wk00My43NyAxMy4xNTJMNDUuMiA3LjgxOTk5TDQwLjEzMiA2LjQ2NTk5TDM4LjcgMTEuOEw0My43NyAxMy4xNTJaTTYzLjgxMiAyNC4xNTJDNjIuODg0NyAyMi41OTYgNjEuMDAzIDIxLjQzOSA1OC4xNjcgMjAuNjgxQzU1LjAxMjcgMTkuODggNTEuNzc2IDE5LjQ0ODggNDguNTIyIDE5LjM5Nkw0Ny43NDkgMjMuMDE2TDQ5LjI2MiAyMy4zMTZDNTIuMzA0IDIzLjg2NCA1NC44MTY3IDI0LjQwMyA1Ni44IDI0LjkzM0M1Ny42ODEyIDI1LjEwMDIgNTguNDY2OCAyNS41OTM4IDU5IDI2LjMxNUM1OS4yMTE1IDI2Ljc1MDkgNTkuMzMxIDI3LjIyNTggNTkuMzUxIDI3LjcwOTlDNTkuMzcwOSAyOC4xOTQxIDU5LjI5MDkgMjguNjc3MSA1OS4xMTYgMjkuMTI5TDU4LjY1OCAzMC44TDUyLjUyNCAyOS43QzUwLjQzNjUgMjkuMTc4NiA0OC4yNCAyOS4zMDIgNDYuMjI0IDMwLjA1NEM0NC42ODY3IDMwLjc3IDQzLjYwMjMgMzIuMzAzMyA0Mi45NzEgMzQuNjU0QzQxLjY1MDMgMzkuNTY4NyA0My4yOTkgNDIuNjQzIDQ3LjkxNyA0My44NzdDNTAuNTEzIDQ0LjU1MTQgNTMuMjI1MyA0NC42NDg2IDU1Ljg2MyA0NC4xNjJDNTcuMzM4IDQ1Ljg5NTQgNTkuMzUzNiA0Ny4wODE3IDYxLjU4NSA0Ny41M0w2Mi43NiA0My43MkM2Mi4yMTIzIDQzLjUzMTcgNjEuNzQwOSA0My4xNzAxIDYxLjQxNyA0Mi42OUM2MS4xNjc4IDQyLjE3NTkgNjEuMTIxNCA0MS41ODY4IDYxLjI4NyA0MS4wNEw2NC4xMjcgMzAuNDY5QzY0Ljg0MjMgMjcuODExIDY0LjczNiAyNS43MDM3IDYzLjgwOCAyNC4xNDdMNjMuODEyIDI0LjE1MlpNNTcuNyAzNC4zNjdMNTYuMDQzIDQwLjUzM0w1NS4xMzEgNDAuNTg4QzUzLjQwMjMgNDAuNjM1MyA1MS42NzU0IDQwLjQ0MTggNTAgNDAuMDEzQzQ4LjEwOTMgMzkuNTA3NyA0Ny40NTA3IDM4LjE4ODcgNDguMDI0IDM2LjA1NkM0OC4wOTI2IDM1LjU5NiA0OC4yNTk1IDM1LjE1NjIgNDguNTEzNCAzNC43NjY1QzQ4Ljc2NzMgMzQuMzc2OCA0OS4xMDIxIDM0LjA0NjQgNDkuNDk1MiAzMy43OTc3QzQ5Ljg4ODIgMzMuNTQ5MSA1MC4zMzAzIDMzLjM4ODEgNTAuNzkxMiAzMy4zMjU3QzUxLjI1MiAzMy4yNjMyIDUxLjcyMSAzMy4zMDA5IDUyLjE2NiAzMy40MzZMNTcuNyAzNC4zNjdaTTcxLjUzMiA0OS42NDJMODAuMzUyIDE2LjgxNkw3NS4yODQgMTUuNDYyTDY2LjQ2NCA0OC4yODhMNzEuNTMyIDQ5LjY0MloiIGZpbGw9IiMwMDk5RkYiLz4KPC9nPgo8L3N2Zz4K')
     )
 );
 

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_watermark.scss

@@ -6,6 +6,9 @@
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
+/// @ignore
+$_light-watermark-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODQiIGhlaWdodD0iMTA0IiB2aWV3Qm94PSIwIDAgMTg0IDEwNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICAgIG9wYWNpdHk6IDAuMDU7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJ0cmlhbCIgY2xhc3M9ImNscy0xIiBkPSJNMTYuNzIsMTAuMTQ4TDEwLjMsOC40MzRsMS44MDYtNi43MjNMNy4wOSwwLjM2OSw1LjI4Myw3LjA5MiwyLjMwOCw2LjMsMS4xNSwxMC42MDlsMi45NzUsMC44TDEuMjM1LDIyLjE2MXEtMS4zNDUsNS4wMDctLjM2Nyw3LjIwN1Q1LjgsMzIuNjIzYTI4LjE2MywyOC4xNjMsMCwwLDAsNC45LjY2NGwwLjg1MS00LjEtMy44NS0uODhxLTEuNzIxLS40Ni0xLjg4OS0xLjVhMTEuMTg4LDExLjE4OCwwLDAsMSwuNTkxLTMuODY3bDIuNzQxLTEwLjIsNi40MTYsMS43MTRaTTE5LjcsMzUuNzlsNC4zNDgtMTYuMTgxLDEuMTM1LS4xNDRhMzMuODcxLDMzLjg3MSwwLDAsMSw3LjM4Mi0uMjE0TDMzLjkxOSwxNC4yYTIyLjk0MSwyMi45NDEsMCwwLDAtOC43ODgsMS4xOEwyNS44NzgsMTIuNmwtNS4wMjEtMS4zNDJMMTQuNjI5LDM0LjQzNlptMTYuNzgzLDQuNDg1LDYuMjI5LTIzLjE4MkwzNy42NCwxNS43MzgsMzEuNDEyLDM4LjkyMVptNy4yODctMjcuMTIzTDQ1LjIsNy44Miw0MC4xMzIsNi40NjYsMzguNywxMS44Wm0yMC4wNDIsMTFxLTEuMzkxLTIuMzM0LTUuNjQ1LTMuNDcxYTQxLjk1MSw0MS45NTEsMCwwLDAtOS42NDUtMS4yODVsLTAuNzczLDMuNjIsMS41MTMsMC4zcTQuNTYzLDAuODIyLDcuNTM4LDEuNjE3YTMuNTYyLDMuNTYyLDAsMCwxLDIuMiwxLjM4MiwzLjUyOCwzLjUyOCwwLDAsMSwuMTE2LDIuODE0TDU4LjY1OCwzMC44LDUyLjUyNCwyOS43YTEwLjY0NSwxMC42NDUsMCwwLDAtNi4zLjM1NHEtMi4zMDYsMS4wNzQtMy4yNTMsNC42LTEuOTgxLDcuMzcyLDQuOTQ2LDkuMjIzYTE4LjM1NywxOC4zNTcsMCwwLDAsNy45NDYuMjg1LDEwLjEzNCwxMC4xMzQsMCwwLDAsNS43MjIsMy4zNjhMNjIuNzYsNDMuNzJhMi42NjUsMi42NjUsMCwwLDEtMS4zNDMtMS4wMywyLjI3MywyLjI3MywwLDAsMS0uMTMtMS42NWwyLjg0LTEwLjU3MVE2NS4yLDI2LjQ4Miw2My44MDgsMjQuMTQ3Wk01Ny43LDM0LjM2N2wtMS42NTcsNi4xNjYtMC45MTIuMDU1QTE4LjYzNSwxOC42MzUsMCwwLDEsNTAsNDAuMDEzcS0yLjgzNi0uNzU4LTEuOTc2LTMuOTU3YTMuMjM3LDMuMjM3LDAsMCwxLDQuMTQyLTIuNjJaTTcxLjUzMiw0OS42NDJsOC44Mi0zMi44MjYtNS4wNjgtMS4zNTQtOC44MiwzMi44MjZaIi8+Cjwvc3ZnPgo=';
+
 /// Generates a light watermark schema.
 /// @type {Map}
 /// @requires {function} extend
@@ -15,15 +18,14 @@ $_light-watermark: extend(
         variant: 'material',
 
         link-background: (
-            igx-color: ('secondary'),
+            igx-color: ('primary'),
         ),
 
-        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODQiIGhlaWdodD0iMTA0IiB2aWV3Qm94PSIwIDAgMTg0IDEwNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICAgIG9wYWNpdHk6IDAuMDU7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJ0cmlhbCIgY2xhc3M9ImNscy0xIiBkPSJNMTYuNzIsMTAuMTQ4TDEwLjMsOC40MzRsMS44MDYtNi43MjNMNy4wOSwwLjM2OSw1LjI4Myw3LjA5MiwyLjMwOCw2LjMsMS4xNSwxMC42MDlsMi45NzUsMC44TDEuMjM1LDIyLjE2MXEtMS4zNDUsNS4wMDctLjM2Nyw3LjIwN1Q1LjgsMzIuNjIzYTI4LjE2MywyOC4xNjMsMCwwLDAsNC45LjY2NGwwLjg1MS00LjEtMy44NS0uODhxLTEuNzIxLS40Ni0xLjg4OS0xLjVhMTEuMTg4LDExLjE4OCwwLDAsMSwuNTkxLTMuODY3bDIuNzQxLTEwLjIsNi40MTYsMS43MTRaTTE5LjcsMzUuNzlsNC4zNDgtMTYuMTgxLDEuMTM1LS4xNDRhMzMuODcxLDMzLjg3MSwwLDAsMSw3LjM4Mi0uMjE0TDMzLjkxOSwxNC4yYTIyLjk0MSwyMi45NDEsMCwwLDAtOC43ODgsMS4xOEwyNS44NzgsMTIuNmwtNS4wMjEtMS4zNDJMMTQuNjI5LDM0LjQzNlptMTYuNzgzLDQuNDg1LDYuMjI5LTIzLjE4MkwzNy42NCwxNS43MzgsMzEuNDEyLDM4LjkyMVptNy4yODctMjcuMTIzTDQ1LjIsNy44Miw0MC4xMzIsNi40NjYsMzguNywxMS44Wm0yMC4wNDIsMTFxLTEuMzkxLTIuMzM0LTUuNjQ1LTMuNDcxYTQxLjk1MSw0MS45NTEsMCwwLDAtOS42NDUtMS4yODVsLTAuNzczLDMuNjIsMS41MTMsMC4zcTQuNTYzLDAuODIyLDcuNTM4LDEuNjE3YTMuNTYyLDMuNTYyLDAsMCwxLDIuMiwxLjM4MiwzLjUyOCwzLjUyOCwwLDAsMSwuMTE2LDIuODE0TDU4LjY1OCwzMC44LDUyLjUyNCwyOS43YTEwLjY0NSwxMC42NDUsMCwwLDAtNi4zLjM1NHEtMi4zMDYsMS4wNzQtMy4yNTMsNC42LTEuOTgxLDcuMzcyLDQuOTQ2LDkuMjIzYTE4LjM1NywxOC4zNTcsMCwwLDAsNy45NDYuMjg1LDEwLjEzNCwxMC4xMzQsMCwwLDAsNS43MjIsMy4zNjhMNjIuNzYsNDMuNzJhMi42NjUsMi42NjUsMCwwLDEtMS4zNDMtMS4wMywyLjI3MywyLjI3MywwLDAsMS0uMTMtMS42NWwyLjg0LTEwLjU3MVE2NS4yLDI2LjQ4Miw2My44MDgsMjQuMTQ3Wk01Ny43LDM0LjM2N2wtMS42NTcsNi4xNjYtMC45MTIuMDU1QTE4LjYzNSwxOC42MzUsMCwwLDEsNTAsNDAuMDEzcS0yLjgzNi0uNzU4LTEuOTc2LTMuOTU3YTMuMjM3LDMuMjM3LDAsMCwxLDQuMTQyLTIuNjJaTTcxLjUzMiw0OS42NDJsOC44Mi0zMi44MjYtNS4wNjgtMS4zNTQtOC44MiwzMi44MjZaIi8+Cjwvc3ZnPgo='),
-
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg0IiBoZWlnaHQ9IjEwNCIgdmlld0JveD0iMCAwIDE4NCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuMDUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuNyAxMC4xTDEwLjMgOC4zOTk5OUwxMi4xIDEuNjk5OTlMNy4xIDAuMzk5OTk0TDUuMyA3LjA5OTk5TDIuMyA2LjI5OTk5TDEuMSAxMC42TDQuMSAxMS40TDEuMiAyMi4yQzAuMjk5OTk3IDI1LjUgMC4xOTk5OTcgMjcuOSAwLjc5OTk5NyAyOS40QzEuNSAzMC45IDMuMSAzMiA1LjcgMzIuN0M3LjMgMzMuMSA5IDMzLjMgMTAuNiAzMy40TDExLjUgMjkuM0w3LjcgMjguNEM2LjYgMjguMSA1LjkgMjcuNiA1LjggMjYuOUM1LjggMjUuNiA2IDI0LjMgNi40IDIzTDkuMSAxMi44TDE1LjUgMTQuNUwxNi43IDEwLjFaTTE5LjcgMzUuOEwyNCAxOS42TDI1LjEgMTkuNUMyNy41IDE5LjIgMzAgMTkuMSAzMi41IDE5LjNMMzMuOSAxNC4yQzMwLjkgMTQgMjcuOSAxNC40IDI1LjEgMTUuNEwyNS44IDEyLjZMMjAuOCAxMS4zTDE0LjYgMzQuNUwxOS43IDM1LjhaTTM2LjUgNDAuM0w0Mi43IDE3LjFMMzcuNiAxNS43TDMxLjQgMzguOUwzNi41IDQwLjNaTTQzLjggMTMuMkw0NS4yIDcuODk5OTlMNDAuMSA2LjQ5OTk5TDM4LjcgMTEuOEw0My44IDEzLjJaTTYzLjggMjQuMkM2Mi45IDIyLjYgNjEgMjEuNSA1OC4yIDIwLjdDNTUgMTkuOSA1MS44IDE5LjUgNDguNiAxOS40TDQ3LjcgMjNMNDkuMiAyMy4zQzUyLjIgMjMuOCA1NC44IDI0LjQgNTYuNyAyNC45QzU3LjYgMjUuMSA1OC40IDI1LjYgNTguOSAyNi4zQzU5LjMgMjcuMiA1OS40IDI4LjIgNTkgMjkuMUw1OC41IDMwLjhMNTIuNCAyOS43QzUwLjMgMjkuMiA0OC4xIDI5LjMgNDYuMSAzMC4xQzQ0LjYgMzAuOCA0My41IDMyLjMgNDIuOCAzNC43QzQxLjUgMzkuNiA0My4xIDQyLjcgNDcuNyA0My45QzUwLjMgNDQuNiA1MyA0NC43IDU1LjYgNDQuMkM1Ny4xIDQ1LjkgNTkuMSA0Ny4xIDYxLjMgNDcuNkw2Mi41IDQzLjhDNjIgNDMuNiA2MS41IDQzLjMgNjEuMiA0Mi44QzYxIDQyLjMgNjAuOSA0MS43IDYxLjEgNDEuMUw2My45IDMwLjVDNjQuOCAyNy44IDY0LjcgMjUuNyA2My44IDI0LjJaTTU3LjcgMzQuNEw1NiA0MC41TDU1LjEgNDAuNkM1My40IDQwLjYgNTEuNiA0MC41IDUwIDQwQzQ4LjEgMzkuNSA0Ny41IDM4LjIgNDggMzZDNDguMyAzNC4yIDQ5LjkgMzMgNTEuNyAzMy4zQzUxLjkgMzMuMyA1MiAzMy40IDUyLjIgMzMuNEw1Ny43IDM0LjRaTTcxLjUgNDkuNkw4MC4zIDE2LjhMNzUuMiAxNS40TDY2LjQgNDguMkw3MS41IDQ5LjZaIiBmaWxsPSIjMDA5OUZGIi8+Cjwvc3ZnPgo='),
         color: #fff,
 
         border-color: (
-            igx-color: ('secondary'),
+            igx-color: ('primary'),
         ),
 
         roundness: rem(0)
@@ -39,6 +41,7 @@ $_fluent-watermark: extend(
     $_fluent-shape-watermark,
     (
         variant: 'fluent',
+        background-image: #{url($_light-watermark-image)},
         roundness: rem(2px)
     )
 );
@@ -52,6 +55,7 @@ $_bootstrap-watermark: extend(
     $_bootstrap-shape-watermark,
     (
         variant: 'bootstrap',
+        background-image: #{url($_light-watermark-image)},
         roundness: rem(4px)
     )
 );
@@ -64,11 +68,10 @@ $_indigo-watermark: extend(
     $_light-watermark,
     (
         variant: 'indigo-design',
-
+        background-image: #{url($_light-watermark-image)},
         link-background: (
             igx-color: 'primary',
         ),
-
         border-color: (
             igx-color: ('primary', 300),
         ),