igniteui-theming 1.4.7 → 1.4.9

package/sass/themes/schemas/components/light/_snackbar.scss

@@ -14,7 +14,7 @@
 /// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color used in the snackbar.
 /// @prop {Map} button-color [color: ('secondary', 500)] - The button color used in the snackbar.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used in the snackbar.
-/// @prop {Number} border-radius [4px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for snackbar.
 /// @requires {Map} $default-elevation-snackbar
 $light-snackbar: extend(
     $default-elevation-snackbar,
@@ -41,19 +41,27 @@ $light-snackbar: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
 /// Generates a fluent snackbar schema.
 /// @type {Map}
-/// @prop {Number} border-radius [2px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for snackbar.
 ///
 /// @requires $light-snackbar
 $fluent-snackbar: extend(
     $light-snackbar,
     (
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -97,7 +105,7 @@ $bootstrap-snackbar: extend(
 /// @prop {Map} background [color: ('gray', 700, .9)] - The background color used in the snackbar.
 /// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color used in the snackbar.
 /// @prop {Map} button-color [contrast-color: ('gray', 700)] - The button color used in the snackbar.
-/// @prop {Number} border-radius [6px] - The border radius used for snackbar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(6px), rem(0), rem(24px))] - The border radius used for snackbar.
 ///
 ///
 /// @requires $light-snackbar
@@ -126,6 +134,10 @@ $indigo-snackbar: extend(
             ),
         ),
 
-        border-radius: rem(6px),
+        border-radius: (
+            rem(6px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_splitter.scss

@@ -12,7 +12,7 @@
 /// @prop {Map} bar-color [color: ('gray', 200)] - The background color of the bar.
 /// @prop {Map} handle-color [color: ('gray', 400)] - The color for the bar drag handle.
 /// @prop {Map} expander-color [color: ('gray', 400)] - The color for the arrow expander's.
-/// @prop {Number} border-radius [2px] - The border radius used for splitter. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(2px))] - The border radius used for splitter.
 /// @prop {Map} focus-color [color: ('secondary', 500)] - The color used for focused splitter bar.
 /// @prop {Number} size [4px] - The size of the splitter, it's width for vertical and height for horizontal splitter.
 $light-splitter: (
@@ -46,7 +46,11 @@ $light-splitter: (
 
     size: 4px,
 
-    border-radius: rem(2px),
+    border-radius: (
+        rem(2px),
+        rem(0),
+        rem(2px),
+    ),
 );
 
 /// Generates a fluent splitter schema.

package/sass/themes/schemas/components/light/_stepper.scss

@@ -66,8 +66,8 @@
 /// @prop {Map} complete-step-separator-color [color: ('gray', 900)] - The separator border-color between the completed steps.
 /// @prop {String} step-separator-style ['dashed'] - The separator border-style of between the steps.
 /// @prop {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps.
-/// @prop {Number} border-radius-indicator [100px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-step-header [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-indicator [(rem(100px), rem(0), rem(100px))] - The indicator border radius.
+/// @prop {List} border-radius-step-header [(rem(0), rem(0), rem(100px))] - The header border radius.
 $light-stepper: (
     // Step incomplete
     step-background: transparent,
@@ -400,8 +400,8 @@ $light-stepper: (
     ),
     step-separator-style: 'dashed',
     complete-step-separator-style: 'solid',
-    border-radius-indicator: rem(100px),
-    border-radius-step-header: rem(0)
+    border-radius-indicator: (rem(100px), rem(0), rem(100px)),
+    border-radius-step-header: (rem(0), rem(0), rem(100px))
 );
 
 /// Generates a fluent stepper schema.
@@ -415,8 +415,8 @@ $light-stepper: (
 /// @prop {Map} complete-step-separator-color [color: ('primary', 500)] - The separator border-color between the completed steps.
 /// @prop {Color} disabled-indicator-background [transparent] - The background color of the disabled step indicator.
 /// @prop {Color} disabled-indicator-outline [transparent] - The outline color of the disabled step indicator.
-/// @prop {Number} border-radius-indicator [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-step-header [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-indicator [(rem(2px), rem(0), rem(100px))] - The indicator border radius.
+/// @prop {List} border-radius-step-header [(rem(2px), rem(0), rem(100px))] - The header border radius.
 /// @requires {Map} $light-stepper
 $fluent-stepper: extend(
     $light-stepper,
@@ -455,8 +455,16 @@ $fluent-stepper: extend(
         // Disabled
         disabled-indicator-background: transparent,
         disabled-indicator-outline: transparent,
-        border-radius-indicator: rem(2px),
-        border-radius-step-header: rem(2px),
+        border-radius-indicator: (
+            rem(2px),
+            rem(0),
+            rem(100px),
+        ),
+        border-radius-step-header: (
+            rem(2px),
+            rem(0),
+            rem(100px),
+        ),
     )
 );
 
@@ -482,8 +490,8 @@ $fluent-stepper: extend(
 /// @prop {Map} invalid-step-focus-background [color: ('gray', 300, .5)] - The background of the invalid step header on hover.
 /// @prop {Map} current-step-focus-background [color: ('gray', 300, .5)] - The background of the current step header on hover.
 /// @prop {Map} complete-step-focus-background [color: ('gray', 300, .5)] - The background of the complete step header on hover.
-/// @prop {Number} border-radius-indicator [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-step-header [2px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-indicator [(rem(2px), rem(0), rem(100px))] - The indicator border radius.
+/// @prop {List} border-radius-step-header [(rem(2px), rem(0), rem(100px))] - The header border radius.
 /// @requires {Map} $light-stepper
 $bootstrap-stepper: extend(
     $light-stepper,
@@ -606,8 +614,16 @@ $bootstrap-stepper: extend(
         ),
         step-separator-style: 'solid',
         complete-step-separator-style: 'solid',
-        border-radius-indicator: rem(2px),
-        border-radius-step-header: rem(2px),
+        border-radius-indicator: (
+            rem(2px),
+            rem(0),
+            rem(100px),
+        ),
+        border-radius-step-header: (
+            rem(2px),
+            rem(0),
+            rem(100px),
+        ),
     )
 );
 
@@ -625,8 +641,6 @@ $bootstrap-stepper: extend(
 /// @prop {Map} complete-step-separator-color [color: ('primary', 500)] - The separator border-color between the completed steps.
 /// @prop {String} step-separator-style ['solid'] - The separator border-style of between the steps.
 /// @prop {String} complete-step-separator-style ['solid'] - The separator border-style between the completed steps.
-/// @prop {Number} border-radius-indicator [100px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-step-header [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires $light-stepper
 $indigo-stepper: extend(
     $light-stepper,

package/sass/themes/schemas/components/light/_switch.scss

@@ -25,9 +25,9 @@
 /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state.
-/// @prop {Number} border-radius-track [7px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-thumb [10px] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-ripple [24px] - The border radius used for switch ripple. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-track [(rem(7px), rem(0), rem(7px))] - The border radius used for switch track.
+/// @prop {List} border-radius-thumb [(rem(10px), rem(0), rem(10px))] - The border radius used for switch thumb.
+/// @prop {List} border-radius-ripple [(rem(24px), rem(0), rem(24px))] - The border radius used for switch ripple.
 /// @prop {Color} border-color [transparent] - The border color of the switch.
 /// @prop {Color} border-hover-color [transparent] - The border color of the switch on hover.
 /// @prop {Color} border-disabled-color [transparent] - The border color of the disabled switch.
@@ -137,9 +137,21 @@ $light-switch: extend(
                 500,
             ),
         ),
-        border-radius-track: rem(7px),
-        border-radius-thumb: rem(10px),
-        border-radius-ripple: rem(24px),
+        border-radius-track: (
+            rem(7px),
+            rem(0),
+            rem(7px),
+        ),
+        border-radius-thumb: (
+            rem(10px),
+            rem(0),
+            rem(10px),
+        ),
+        border-radius-ripple: (
+            rem(24px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -166,7 +178,7 @@ $light-switch: extend(
 /// @prop {Map} error-color-hover [color: ('gray', 800)] - The border and thumb color in invalid state on hover.
 /// @prop {Map} thumb-on-error-color [color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
 ///
-/// @prop {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-track [(rem(10px), rem(0), rem(10px))] - The border radius used for switch track.
 ///
 ///
 /// @requires {Map} $light-switch
@@ -271,7 +283,11 @@ $fluent-switch: extend(
             ),
         ),
         track-disabled-color: transparent,
-        border-radius-track: rem(10px),
+        border-radius-track: (
+            rem(10px),
+            rem(0),
+            rem(10px),
+        ),
     )
 );
 
@@ -289,8 +305,8 @@ $fluent-switch: extend(
 /// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
 /// @prop {Map} error-color [color: ('gray', 400)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('primary', 200)] - The border and thumb color in invalid state on hover.
-/// @prop {Number} border-radius-track [32px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-thumb [32px] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-track [(rem(32px), rem(0), rem(32px))] - The border radius used for switch track.
+/// @prop {List} border-radius-thumb [(rem(32px), rem(0), rem(32px))] - The border radius used for switch thumb.
 ///
 ///
 /// @requires {Map} $fluent-switch
@@ -363,8 +379,16 @@ $bootstrap-switch: extend(
                 200,
             ),
         ),
-        border-radius-track: rem(32px),
-        border-radius-thumb: rem(32px),
+        border-radius-track: (
+            rem(32px),
+            rem(0),
+            rem(32px),
+        ),
+        border-radius-thumb: (
+            rem(32px),
+            rem(0),
+            rem(32px),
+        ),
     )
 );
 
@@ -387,8 +411,7 @@ $bootstrap-switch: extend(
 /// @prop {Map} thumb-on-error-color [color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
-/// @prop {Number} border-radius-track [8px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} border-radius-thumb [10px] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius-track [(rem(8px), rem(0), rem(8px))] - The border radius used for switch track.
 /// @prop {Map} focus-outline-color [color: ('gray', 300)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state.
 ///
@@ -489,6 +512,10 @@ $indigo-switch: extend(
                 300,
             ),
         ),
-        border-radius-track: rem(8px),
+        border-radius-track: (
+            rem(8px),
+            rem(0),
+            rem(8px),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_tabs.scss

@@ -32,7 +32,7 @@
 /// @prop {Map} border-color--hover [transparent] - The color used for the tab items bottom border on hover.
 /// @prop {Map} tab-ripple-color [color: ('gray', 100)] - The color used for the button background.
 /// @prop {Map} button-ripple-color [color: ('gray', 100)] - The color used for the button background on hover.
-/// @prop {Number} border-radius [0] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(6px))] - The border radius used for tabs.
 $light-tabs: (
     item-text-color: (
         color: (
@@ -148,7 +148,11 @@ $light-tabs: (
     ),
     border-color: transparent,
     border-color--hover: transparent,
-    border-radius: rem(0),
+    border-radius: (
+        rem(0),
+        rem(0),
+        rem(6px),
+    ),
 );
 
 /// Generates a fluent tabs schema.
@@ -228,7 +232,7 @@ $fluent-tabs: extend(
 /// @prop {map} item-active-background [color: ('surface')] - The color used for the active/focused tab background.
 /// @prop {map} border-color [color: ('gray', 300)] - The color used for the tab items border.
 /// @prop {map} border-color--hover [color: ('gray', 200)] - The color used for the tab items border on hover.
-/// @prop {Number} border-radius [4px] - The border radius used for tabs. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(6px))] - The border radius used for tabs.
 /// @requires {Map} $light-tabs
 $bootstrap-tabs: extend(
     $light-tabs,
@@ -334,7 +338,11 @@ $bootstrap-tabs: extend(
                 0.5,
             ),
         ),
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(6px),
+        ),
     )
 );
 

package/sass/themes/schemas/components/light/_time-picker.scss

@@ -22,8 +22,8 @@
 /// @prop {Map} background-color [color: 'surface'] - The time-picker panel background color.
 /// @prop {Number} modal-elevation [24] - The elevation level, between 0-24, to be used for the time picker in modal mode.
 /// @prop {Number} dropdown-elevation [8] - The elevation level, between 0-24, to be used for the time picker in dropdown mode.
-/// @prop {Number} border-radius [4px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} active-item-border-radius [15px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
+/// @prop {List} active-item-border-radius [(rem(15px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
 /// @requires {Map} $default-elevation-time-picker
 /// @see $default-palette
 $light-time-picker: extend(
@@ -91,22 +91,38 @@ $light-time-picker: extend(
             color: 'surface',
         ),
 
-        border-radius: rem(4px),
-        active-item-border-radius: rem(15px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
+        active-item-border-radius: (
+            rem(15px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
 /// Generates a fluent time-picker schema.
 /// @type {Map}
-/// @prop {Number} border-radius [2px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} active-item-border-radius [2px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
+/// @prop {List} active-item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
 ///
 /// @requires $light-time-picker
 $fluent-time-picker: extend(
     $light-time-picker,
     (
-        border-radius: rem(2px),
-        active-item-border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
+        active-item-border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -115,8 +131,7 @@ $fluent-time-picker: extend(
 /// @prop {Map} selected-text-color [color: ('primary', 500)] -  The text color of a selected item in time picker.
 /// @prop {Map} hover-text-color [color: ('primary', 600)] - The hover text color of an open time picker.
 /// @prop {Map} header-background [color: ('primary', 500)] - The header background color of a time picker.
-/// @prop {Number} border-radius [4px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} active-item-border-radius [4px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} active-item-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
 ///
 /// @requires $light-time-picker
 $bootstrap-time-picker: extend(
@@ -143,7 +158,11 @@ $bootstrap-time-picker: extend(
             ),
         ),
 
-        active-item-border-radius: rem(4px),
+        active-item-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -155,8 +174,8 @@ $bootstrap-time-picker: extend(
 /// @prop {Map} header-background [color: ('primary', 500)] - The header background color of a time picker.
 /// @prop {Map} header-hour-text-color [contrast-color: ('primary', 500)] - The header hour text color of a time picker.
 /// @prop {Map} header-time-period-color [contrast-color: ('primary', 500)] - The header AM/PM text color of a time picker.
-/// @prop {Number} border-radius [3px] - The border radius used for the overall shape of the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
-/// @prop {Number} active-item-border-radius [20px] - The border radius used for the highlight of the active item in the time-picker. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(3px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
+/// @prop {List} active-item-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
 ///
 /// @requires $light-time-picker
 $indigo-time-picker: extend(
@@ -204,7 +223,15 @@ $indigo-time-picker: extend(
             ),
         ),
 
-        border-radius: rem(3px),
-        active-item-border-radius: rem(20px),
+        border-radius: (
+            rem(3px),
+            rem(0),
+            rem(20px),
+        ),
+        active-item-border-radius: (
+            rem(20px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_toast.scss

@@ -13,7 +13,7 @@
 /// @prop {Map} background [color: ('gray', 700, .9)] - The background color used for the toast.
 /// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text-color used for the toast.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the toast.
-/// @prop {Number} border-radius [26px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(26px), rem(0), rem(26px))] - The border radius used for toast.
 /// @requires {Map} $default-elevation-toast
 $light-toast: extend(
     $default-elevation-toast,
@@ -33,18 +33,26 @@ $light-toast: extend(
             ),
         ),
 
-        border-radius: rem(26px),
+        border-radius: (
+            rem(26px),
+            rem(0),
+            rem(26px),
+        ),
     )
 );
 
 /// Generates a fluent toast schema.
 /// @type {Map}
-/// @prop {Number} border-radius [2px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(26px))] - The border radius used for toast.
 /// @requires $light-toast
 $fluent-toast: extend(
     $light-toast,
     (
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(26px),
+        ),
     )
 );
 
@@ -53,7 +61,7 @@ $fluent-toast: extend(
 /// @prop {Map} background [color: (color: ('surface')] - The background color used for the toast.
 /// @prop {Map} text-color [color: ('gray', 600)] - The text-color used for the toast.
 /// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used for the toast.
-/// @prop {Number} border-radius [4px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(26px))] - The border radius used for toast.
 /// @requires {Map} $light-toast
 /// @requires {Map} $bootstrap-elevation-toast
 $bootstrap-toast: extend(
@@ -73,17 +81,25 @@ $bootstrap-toast: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(26px),
+        ),
     )
 );
 
 /// Generates an indigo toast schema.
 /// @type {Map}
-/// @prop {Number} border-radius [24px] - The border radius used for toast. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(24px), rem(0), rem(26px))] - The border radius used for toast.
 /// @requires {Map} $light-toast
 $indigo-toast: extend(
     $light-toast,
     (
-        border-radius: rem(24px),
+        border-radius: (
+            rem(24px),
+            rem(0),
+            rem(26px),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_tooltip.scss

@@ -11,7 +11,7 @@
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 700, .9),] - The background color of the tooltip.
 /// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color of the tooltip.
-/// @prop {Number} border-radius [4px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for tooltip.
 $light-tooltip: (
     background: (
         color: (
@@ -28,14 +28,18 @@ $light-tooltip: (
         ),
     ),
 
-    border-radius: rem(4px),
+    border-radius: (
+        rem(4px),
+        rem(0),
+        rem(16px),
+    ),
 );
 
 /// Generates a light fluent tooltip schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 900, .8)] - The background color of the tooltip.
 /// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color of the tooltip.
-/// @prop {Number} border-radius [2px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for tooltip.
 /// @requires {Map} $light-tooltip
 $fluent-tooltip: extend(
     $light-tooltip,
@@ -55,7 +59,11 @@ $fluent-tooltip: extend(
             ),
         ),
 
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );
 
@@ -63,7 +71,6 @@ $fluent-tooltip: extend(
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 900, .8)] - The background color of the tooltip.
 /// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color of the tooltip.
-/// @prop {Number} border-radius [4px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires $light-tooltip
 $bootstrap-tooltip: extend(
     $light-tooltip,
@@ -86,11 +93,15 @@ $bootstrap-tooltip: extend(
 
 /// Generates an indigo tooltip schema.
 /// @type {Map}
-/// @prop {Number} border-radius [3px] - The border radius used for tooltip. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(3px), rem(0), rem(16px))] - The border radius used for tooltip.
 /// @requires {Map} $light-tooltip
 $indigo-tooltip: extend(
     $light-tooltip,
     (
-        border-radius: rem(3px),
+        border-radius: (
+            rem(3px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );

package/sass/themes/schemas/components/light/_watermark.scss

@@ -15,7 +15,7 @@
 /// @prop {Map} link-background [color: ('primary')] - The background color used for the link.
 /// @prop {Map} color [contrast-color: ('primary', 800)] - The color used for the link text.
 /// @prop {Map} border-color [color: ('primary')] - The border color used for the link.
-/// @prop {Number} border-radius [0] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(16px))] - The border radius used for watermark.
 $light-watermark: extend(
     (
         base-color: (
@@ -31,36 +31,48 @@ $light-watermark: extend(
             ),
         ),
 
-        border-radius: rem(0),
+        border-radius: (
+            rem(0),
+            rem(0),
+            rem(16px),
+        ),
     )
 );
 
 /// Generates a light fluent watermark schema.
 /// @type {Map}
-/// @prop {Number} border-radius [2px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for watermark.
 /// @requires {Map} $light-watermark
 $fluent-watermark: extend(
     $light-watermark,
     (
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );
 
 /// Generates a bootstrap watermark schema.
 /// @type {Map}
-/// @prop {Number} border-radius [4px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for watermark.
 /// @requires {Map} $light-watermark
 $bootstrap-watermark: extend(
     $light-watermark,
     (
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );
 
 /// Generates an indigo watermark schema.
 /// @type {Map}
 /// @prop {Map} border-color [color: ('primary', 300)] - The border color for the link.
-/// @prop {Number} border-radius [16px] - The border radius used for watermark. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for watermark.
 /// @requires {Map} $light-watermark
 $indigo-watermark: extend(
     $light-watermark,
@@ -72,6 +84,10 @@ $indigo-watermark: extend(
             ),
         ),
 
-        border-radius: rem(16px),
+        border-radius: (
+            rem(16px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );