igniteui-theming 1.4.14 → 2.0.1

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),
+        ),
     )
 );