fix(watermark): Docs and border radius for the link in all themes

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss

@@ -7,6 +7,10 @@
 /// Returns a map containing all style properties related to the theming the watermark directive.
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Number} $border-radius [null] - The border radius used for the link.
+/// @param {Color} $border-color [null] - The border color used for the  link.
+/// @param {Color} $link-background [null] - The background color used for the link.
+/// @param {Color} $color [null] - The color used for the link text.
 ///
 /// @requires $default-palette
 /// @requires $light-schema
@@ -15,10 +19,10 @@
 /// @requires text-contrast
 /// @requires round-borders
 ///
-/// @example scss Change the watermark background
-///   $my-watermark-theme: igx-watermark-theme($background: magenta);
+/// @example scss Change the watermark link background
+///   $my-watermark-theme: igx-watermark-theme($link-background: magenta);
 ///   // Pass the theme to the igx-watermark component mixin
-///   @include igx-watermark($my-checkbox-theme);
+///   @include igx-watermark($my-watermark-theme);
 @function igx-watermark-theme(
     $palette: $default-palette,
     $schema: $light-schema,
@@ -85,6 +89,7 @@
         font-size: rem(14px);
         padding: rem(2px) rem(4px);
         line-height: normal;
+        border-radius: --var($theme, 'border-radius');
         border: 1px solid --var($theme, 'border-color');
         color: --var($theme, 'color');
         z-index: 10002;
@@ -111,3 +116,4 @@
         }
     }
 }
+

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('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg0IiBoZWlnaHQ9IjEwNCIgdmlld0JveD0iMCAwIDE4NCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpjb2xvci1kb2RnZSIgb3BhY2l0eT0iMC4wNSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuNzIgMTAuMTQ4TDEwLjMgOC40MzM5OUwxMi4xMDYgMS43MTA5OUw3LjA5IDAuMzY4OTg4TDUuMjgzIDcuMDkxOTlMMi4zMDggNi4yOTk5OUwxLjE1IDEwLjYwOUw0LjEyNSAxMS40MDlMMS4yMzUgMjIuMTYxQzAuMzM4MzMzIDI1LjQ5OSAwLjIxNiAyNy45MDEzIDAuODY4IDI5LjM2OEMxLjUyIDMwLjgzNDcgMy4xNjQgMzEuOTE5NyA1LjggMzIuNjIzQzcuNDEwNzEgMzIuOTg3NiA5LjA1MDM2IDMzLjIwOTcgMTAuNyAzMy4yODdMMTEuNTUxIDI5LjE4N0w3LjcwMSAyOC4zMDdDNi41NTM2NyAyOC4wMDAzIDUuOTI0IDI3LjUwMDMgNS44MTIgMjYuODA3QzUuNzgwMzcgMjUuNDkzMyA1Ljk4MDQzIDI0LjE4NDMgNi40MDMgMjIuOTRMOS4xNDQgMTIuNzRMMTUuNTYgMTQuNDU0TDE2LjcyIDEwLjE0OFpNMTkuNyAzNS43OUwyNC4wNDggMTkuNjA5TDI1LjE4MyAxOS40NjVDMjcuNjI4NSAxOS4xMjQ4IDMwLjEwMzkgMTkuMDUzIDMyLjU2NSAxOS4yNTFMMzMuOTE5IDE0LjJDMzAuOTQwOCAxNC4wMTgxIDI3Ljk1NTcgMTQuNDE4OSAyNS4xMzEgMTUuMzhMMjUuODc4IDEyLjZMMjAuODU3IDExLjI1OEwxNC42MjkgMzQuNDM2TDE5LjcgMzUuNzlaTTM2LjQ4MyA0MC4yNzVMNDIuNzEyIDE3LjA5M0wzNy42NCAxNS43MzhMMzEuNDEyIDM4LjkyMUwzNi40ODMgNDAuMjc1Wk00My43NyAxMy4xNTJMNDUuMiA3LjgxOTk5TDQwLjEzMiA2LjQ2NTk5TDM4LjcgMTEuOEw0My43NyAxMy4xNTJaTTYzLjgxMiAyNC4xNTJDNjIuODg0NyAyMi41OTYgNjEuMDAzIDIxLjQzOSA1OC4xNjcgMjAuNjgxQzU1LjAxMjcgMTkuODggNTEuNzc2IDE5LjQ0ODggNDguNTIyIDE5LjM5Nkw0Ny43NDkgMjMuMDE2TDQ5LjI2MiAyMy4zMTZDNTIuMzA0IDIzLjg2NCA1NC44MTY3IDI0LjQwMyA1Ni44IDI0LjkzM0M1Ny42ODEyIDI1LjEwMDIgNTguNDY2OCAyNS41OTM4IDU5IDI2LjMxNUM1OS4yMTE1IDI2Ljc1MDkgNTkuMzMxIDI3LjIyNTggNTkuMzUxIDI3LjcwOTlDNTkuMzcwOSAyOC4xOTQxIDU5LjI5MDkgMjguNjc3MSA1OS4xMTYgMjkuMTI5TDU4LjY1OCAzMC44TDUyLjUyNCAyOS43QzUwLjQzNjUgMjkuMTc4NiA0OC4yNCAyOS4zMDIgNDYuMjI0IDMwLjA1NEM0NC42ODY3IDMwLjc3IDQzLjYwMjMgMzIuMzAzMyA0Mi45NzEgMzQuNjU0QzQxLjY1MDMgMzkuNTY4NyA0My4yOTkgNDIuNjQzIDQ3LjkxNyA0My44NzdDNTAuNTEzIDQ0LjU1MTQgNTMuMjI1MyA0NC42NDg2IDU1Ljg2MyA0NC4xNjJDNTcuMzM4IDQ1Ljg5NTQgNTkuMzUzNiA0Ny4wODE3IDYxLjU4NSA0Ny41M0w2Mi43NiA0My43MkM2Mi4yMTIzIDQzLjUzMTcgNjEuNzQwOSA0My4xNzAxIDYxLjQxNyA0Mi42OUM2MS4xNjc4IDQyLjE3NTkgNjEuMTIxNCA0MS41ODY4IDYxLjI4NyA0MS4wNEw2NC4xMjcgMzAuNDY5QzY0Ljg0MjMgMjcuODExIDY0LjczNiAyNS43MDM3IDYzLjgwOCAyNC4xNDdMNjMuODEyIDI0LjE1MlpNNTcuNyAzNC4zNjdMNTYuMDQzIDQwLjUzM0w1NS4xMzEgNDAuNTg4QzUzLjQwMjMgNDAuNjM1MyA1MS42NzU0IDQwLjQ0MTggNTAgNDAuMDEzQzQ4LjEwOTMgMzkuNTA3NyA0Ny40NTA3IDM4LjE4ODcgNDguMDI0IDM2LjA1NkM0OC4wOTI2IDM1LjU5NiA0OC4yNTk1IDM1LjE1NjIgNDguNTEzNCAzNC43NjY1QzQ4Ljc2NzMgMzQuMzc2OCA0OS4xMDIxIDM0LjA0NjQgNDkuNDk1MiAzMy43OTc3QzQ5Ljg4ODIgMzMuNTQ5MSA1MC4zMzAzIDMzLjM4ODEgNTAuNzkxMiAzMy4zMjU3QzUxLjI1MiAzMy4yNjMyIDUxLjcyMSAzMy4zMDA5IDUyLjE2NiAzMy40MzZMNTcuNyAzNC4zNjdaTTcxLjUzMiA0OS42NDJMODAuMzUyIDE2LjgxNkw3NS4yODQgMTUuNDYyTDY2LjQ2NCA0OC4yODhMNzEuNTMyIDQ5LjY0MloiIGZpbGw9IiMwMDk5RkYiLz4KPC9nPgo8L3N2Zz4K')
+        background-image: url($_dark-watermark-image)
     )
 );
 

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

@@ -11,67 +11,75 @@ $_light-watermark-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
 
 /// Generates a light watermark schema.
 /// @type {Map}
+/// @prop {Number} $border-radius [0] - The border radius fraction, between 0-1 to be used for the link.
+/// @prop {Map} $border-color [igx-color: ('primary')] - The border color used for the link.
+/// @prop {Map} $link-background [igx-color: ('primary')] - The background color used for the link.
+/// @prop {Color} $color [#fff] - The color used for the link text.
 /// @requires {function} extend
+/// @requires {Map} $_material-shape-watermark
 $_light-watermark: extend(
-    $_square-shape-watermark,
+    $_material-shape-watermark,
     (
         variant: 'material',
 
         link-background: (
             igx-color: ('primary'),
         ),
 
-        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg0IiBoZWlnaHQ9IjEwNCIgdmlld0JveD0iMCAwIDE4NCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuMDUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuNyAxMC4xTDEwLjMgOC4zOTk5OUwxMi4xIDEuNjk5OTlMNy4xIDAuMzk5OTk0TDUuMyA3LjA5OTk5TDIuMyA2LjI5OTk5TDEuMSAxMC42TDQuMSAxMS40TDEuMiAyMi4yQzAuMjk5OTk3IDI1LjUgMC4xOTk5OTcgMjcuOSAwLjc5OTk5NyAyOS40QzEuNSAzMC45IDMuMSAzMiA1LjcgMzIuN0M3LjMgMzMuMSA5IDMzLjMgMTAuNiAzMy40TDExLjUgMjkuM0w3LjcgMjguNEM2LjYgMjguMSA1LjkgMjcuNiA1LjggMjYuOUM1LjggMjUuNiA2IDI0LjMgNi40IDIzTDkuMSAxMi44TDE1LjUgMTQuNUwxNi43IDEwLjFaTTE5LjcgMzUuOEwyNCAxOS42TDI1LjEgMTkuNUMyNy41IDE5LjIgMzAgMTkuMSAzMi41IDE5LjNMMzMuOSAxNC4yQzMwLjkgMTQgMjcuOSAxNC40IDI1LjEgMTUuNEwyNS44IDEyLjZMMjAuOCAxMS4zTDE0LjYgMzQuNUwxOS43IDM1LjhaTTM2LjUgNDAuM0w0Mi43IDE3LjFMMzcuNiAxNS43TDMxLjQgMzguOUwzNi41IDQwLjNaTTQzLjggMTMuMkw0NS4yIDcuODk5OTlMNDAuMSA2LjQ5OTk5TDM4LjcgMTEuOEw0My44IDEzLjJaTTYzLjggMjQuMkM2Mi45IDIyLjYgNjEgMjEuNSA1OC4yIDIwLjdDNTUgMTkuOSA1MS44IDE5LjUgNDguNiAxOS40TDQ3LjcgMjNMNDkuMiAyMy4zQzUyLjIgMjMuOCA1NC44IDI0LjQgNTYuNyAyNC45QzU3LjYgMjUuMSA1OC40IDI1LjYgNTguOSAyNi4zQzU5LjMgMjcuMiA1OS40IDI4LjIgNTkgMjkuMUw1OC41IDMwLjhMNTIuNCAyOS43QzUwLjMgMjkuMiA0OC4xIDI5LjMgNDYuMSAzMC4xQzQ0LjYgMzAuOCA0My41IDMyLjMgNDIuOCAzNC43QzQxLjUgMzkuNiA0My4xIDQyLjcgNDcuNyA0My45QzUwLjMgNDQuNiA1MyA0NC43IDU1LjYgNDQuMkM1Ny4xIDQ1LjkgNTkuMSA0Ny4xIDYxLjMgNDcuNkw2Mi41IDQzLjhDNjIgNDMuNiA2MS41IDQzLjMgNjEuMiA0Mi44QzYxIDQyLjMgNjAuOSA0MS43IDYxLjEgNDEuMUw2My45IDMwLjVDNjQuOCAyNy44IDY0LjcgMjUuNyA2My44IDI0LjJaTTU3LjcgMzQuNEw1NiA0MC41TDU1LjEgNDAuNkM1My40IDQwLjYgNTEuNiA0MC41IDUwIDQwQzQ4LjEgMzkuNSA0Ny41IDM4LjIgNDggMzZDNDguMyAzNC4yIDQ5LjkgMzMgNTEuNyAzMy4zQzUxLjkgMzMuMyA1MiAzMy40IDUyLjIgMzMuNEw1Ny43IDM0LjRaTTcxLjUgNDkuNkw4MC4zIDE2LjhMNzUuMiAxNS40TDY2LjQgNDguMkw3MS41IDQ5LjZaIiBmaWxsPSIjMDA5OUZGIi8+Cjwvc3ZnPgo='),
+        background-image: url($_light-watermark-image),
+
         color: #fff,
 
         border-color: (
             igx-color: ('primary'),
         ),
-
-        roundness: rem(0)
     )
 );
 
 /// Generates a light fluent watermark schema.
 /// @type {Map}
 /// @requires {function} extend
-/// @requires $_light-watermark
+/// @requires {Map} $_light-watermark
+/// @requires {Map} $_fluent-shape-watermark
 $_fluent-watermark: extend(
     $_light-watermark,
     $_fluent-shape-watermark,
     (
         variant: 'fluent',
+
         background-image: #{url($_light-watermark-image)},
-        roundness: rem(2px)
     )
 );
 
 /// Generates a bootstrap watermark schema.
 /// @type {Map}
 /// @requires {function} extend
-/// @requires $_light-watermark
+/// @requires {Map} $_light-watermark
+/// @requires {Map} $_bootstrap-shape-watermark
 $_bootstrap-watermark: extend(
     $_light-watermark,
     $_bootstrap-shape-watermark,
     (
         variant: 'bootstrap',
+
         background-image: #{url($_light-watermark-image)},
-        roundness: rem(4px)
     )
 );
 
 /// Generates an indigo watermark schema.
 /// @type {Map}
+/// @prop {Map} $border-color [igx-color: ('primary', 300)] - The border color for the link.
 /// @requires {function} extend
-/// @requires $_light-watermark
+/// @requires {Map} $_light-watermark
+/// @requires {Map} $_indigo-shape-watermark
 $_indigo-watermark: extend(
     $_light-watermark,
+    $_indigo-shape-watermark,
     (
         variant: 'indigo-design',
+
         background-image: #{url($_light-watermark-image)},
-        link-background: (
-            igx-color: 'primary',
-        ),
+
         border-color: (
             igx-color: ('primary', 300),
         ),

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

@@ -3,19 +3,34 @@
 /// @access private
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
+
+/// @type Map
 $_round-shape-watermark: (
     border-radius: 1,
 );
 
+/// @type Map
 $_square-shape-watermark: (
     border-radius: 0,
 );
 
+/// @type Map
+$_material-shape-watermark: (
+    border-radius: 0,
+);
+
+/// @type Map
 $_fluent-shape-watermark: (
     border-radius: 2px,
 );
 
+/// @type Map
 $_bootstrap-shape-watermark: (
     border-radius: 4px,
 );
 
+/// @type Map
+$_indigo-shape-watermark: (
+    border-radius: 1,
+);
+