igniteui-theming 1.4.14 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.4.14",
+  "version": "2.0.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/_functions.scss

@@ -2,6 +2,7 @@
 @use 'sass:list';
 @use 'sass:meta';
 @use 'sass:string';
+@use 'sass:math';
 @use '../typography/functions' as *;
 @use '../elevations/functions' as *;
 @use '../color/functions' as color;
@@ -22,7 +23,7 @@
 ///     foreground: (
 ///        color: ('primary', 800, .5)
 ///     ),
-///     border-radius: rem(5px)
+///     border-radius: (rem(5px), rem(0), rem(8px)) // default, min and max radius
 ///   );
 ///   $theme: digest-schema($custom-schema);
 /// @returns {Map} - A theme map with resolved values.
@@ -116,7 +117,9 @@
 /// @param {Number} $max [$radius] - The maximum allowed value.
 /// @return {Number} - The clamped value
 @function border-radius($radius, $min: #{rem(0)}, $max: $radius) {
-    @return clamp(#{$min}, #{calc(var(--ig-radius-factor) * #{$radius})}, #{$max});
+    $factor: math.div($radius, $max);
+
+    @return clamp(#{$min}, #{calc(var(--ig-radius-factor, #{$factor}) * #{$max})}, #{$max});
 }
 
 /// Used to switch between values based on the size of the component.

package/sass/themes/_mixins.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
 @use 'sass:list';
@@ -87,7 +88,9 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
 /// @example scss
 ///    @include border-radius(4px);
 @mixin border-radius($radius, $min: #{rem(0)}, $max: $radius) {
-    border-radius: clamp(#{$min}, #{calc(var(--ig-radius-factor) * #{$radius})}, #{$max});
+    $factor: math.div($radius, $max);
+
+    border-radius: clamp(#{$min}, #{calc(var(--ig-radius-factor, #{$factor}) * #{$max})}, #{$max});
 }
 
 /// Truncates text to a specific number of lines.

package/sass/themes/schemas/components/light/_action-strip.scss

@@ -13,7 +13,7 @@
 /// @prop {Map} background [color: ('gray', 100, .38)] - The color used for the action strip component content background.
 /// @prop {Map} actions-background [color: ('gray', 200)] - The color used for actions background.
 /// @prop {Map} delete-action [color: ('error')] - The color used for the delete icon in action strip component.
-/// @prop {Number} actions-border-radius [24px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} actions-border-radius [(rem(24px), rem(0), rem(24px))] - The border radius used for action strip actions container.
 $light-action-strip: extend(
     (
         actions-background: (
@@ -39,29 +39,41 @@ $light-action-strip: extend(
             ),
         ),
 
-        actions-border-radius: rem(24px),
+        actions-border-radius: (
+            rem(24px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
 /// Generates a fluent action strip schema.
 /// @type {Map}
-/// @prop {Number} actions-border-radius [24px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} actions-border-radius [(rem(0), rem(0), rem(24px))] - The border radius used for action strip actions container.
 /// @requires {Map} $light-action-strip
 $fluent-action-strip: extend(
     $light-action-strip,
     (
-        actions-border-radius: rem(0),
+        actions-border-radius: (
+            rem(0),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
 /// Generates a bootstrap action strip schema.
 /// @type {Map}
-/// @prop {Number} actions-border-radius [4px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} actions-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for action strip actions container.
 /// @requires {Map} $light-action-strip
 $bootstrap-action-strip: extend(
     $light-action-strip,
     (
-        actions-border-radius: rem(4px),
+        actions-border-radius: (
+            rem(4px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -69,7 +81,7 @@ $bootstrap-action-strip: extend(
 /// @type {Map}
 /// @prop {Map} icon-color [contrast-color: 'primary'] - The color used for the actions icons.
 /// @prop {Map} actions-background [color: ('primary')] - The color used for actions background.
-/// @prop {Number} actions-border-radius [3px] - The border radius used for action strip actions container. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} actions-border-radius [(rem(3px), rem(0), rem(24px))] - The border radius used for action strip actions container.
 /// @requires {Map} $light-action-strip
 $indigo-action-strip: extend(
     $light-action-strip,
@@ -84,6 +96,10 @@ $indigo-action-strip: extend(
             contrast-color: 'primary',
         ),
 
-        actions-border-radius: rem(3px),
+        actions-border-radius: (
+            rem(3px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );

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

@@ -11,7 +11,7 @@
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 400, .54)]- The background color of the avatar.
 /// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar.
-/// @prop {Number} border-radius [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius [rem(0)] - The border radius.
 /// @prop {Number} size - The size of the avatar.
 $light-avatar: (
     background: (
@@ -40,7 +40,7 @@ $fluent-avatar: $light-avatar;
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 400)]- The background color of the avatar.
 /// @prop {Map} color [contrast-color: ('gray', 400)] - The text/icon color of the avatar.
-/// @prop {Number} border-radius [4px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius [rem(4px)] - The border radius.
 /// @requires {Map} $light-avatar
 $bootstrap-avatar: extend(
     $light-avatar,

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

@@ -16,7 +16,7 @@
 /// @prop {Map} background-color [color: ('primary', 500)] - The background color used.
 /// @prop {Number} border-width [0] - The border width of the badge component.
 /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow.
-/// @prop {Number} border-radius [0] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius [0] - The border radius used for badge.
 /// @requires {Map} $default-elevation-badge
 $light-badge: extend(
     $default-elevation-badge,
@@ -63,7 +63,7 @@ $fluent-badge: $light-badge;
 /// Generates a bootstrap badge schema.
 /// @type {Map}
 /// @prop {Number} border-width [1px] - The border width of the badge component.
-/// @prop {Number} border-radius [4px] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius [rem(4px)] - The border radius used for badge.
 /// @requires {Map} $light-badge
 /// @requires {Map} $bootstrap-elevation-badge
 $bootstrap-badge: extend(

package/sass/themes/schemas/components/light/_button-group.scss

@@ -24,7 +24,7 @@
 /// @prop {Map} item-selected-hover-background [color: ('gray', 500, .8)] - The background color for a selected item in hover or focus state in the button group.
 /// @prop {Map} idle-shadow-color [transparent] - The outline color of button group items.
 /// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow.
-/// @prop {Number} border-radius [4px] - The border radius used for button-group component. 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 button-group component.
 /// @requires {Map} $default-elevation-button-group
 $light-button-group: extend(
     $default-elevation-button-group,
@@ -116,7 +116,11 @@ $light-button-group: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -130,7 +134,7 @@ $light-button-group: extend(
 /// @prop {Map} item-selected-text-color [color: ('primary', 200)]- The text color for a selected item in the button group.
 /// @prop {Color} disabled-background-color [color: ('gray', 50)] - The background color for a disabled item in the button group.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
-/// @prop {Number} border-radius [2px] - The border radius used for button-group component. 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 button-group component.
 /// @requires {Map} $light-button-group
 /// @requires {Map} $fluent-elevation-button-group
 $fluent-button-group: extend(
@@ -186,7 +190,11 @@ $fluent-button-group: extend(
             ),
         ),
 
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -205,7 +213,6 @@ $fluent-button-group: extend(
 /// @prop {Map} disabled-text-color [color: ('primary', 200)]- The text/icon color for a disabled item in the button group.
 /// @prop {Map} item-disabled-border [color: ('primary', 100)] - The border color for a disabled item in the button group.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
-/// @prop {Number} border-radius [4px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-button-group
 /// @requires {Map} $bootstrap-elevation-button-group
 $bootstrap-button-group: extend(
@@ -315,7 +322,7 @@ $bootstrap-button-group: extend(
 /// @prop {Map} disabled-text-color [color: ('gray', 400)]- The text/icon color for a disabled item in the button group.
 /// @prop {Map} item-disabled-border [color: ('gray', 300)] - The border color for a disabled item in the button group.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the button group shadow.
-/// @prop {Number} border-radius [8px] - The border radius used for button-group component. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(8px), rem(0), rem(20px))] - The border radius used for button-group component.
 /// @requires {Map} $light-button-group
 /// @requires {Map} $indigo-elevation-button-group
 $indigo-button-group: extend(
@@ -421,6 +428,10 @@ $indigo-button-group: extend(
             ),
         ),
 
-        border-radius: rem(8px),
+        border-radius: (
+            rem(8px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );

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

@@ -54,7 +54,7 @@ $material-base-button: (
 /// @prop {Map} active-background [color: ('secondary', 400, .12)] - The active background color of a flat button.
 /// @prop {Map} active-foreground [color: ('secondary', 500)] - The active text color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
-/// @prop {Number} border-radius [4px] - The border radius used for flat button.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for flat button.
 /// @requires {Map} $material-base-button
 /// @requires {Map} $flat-elevation-button
 $material-flat-button: extend(
@@ -122,7 +122,11 @@ $material-flat-button: extend(
             ),
         ),
         disabled-background: transparent,
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -191,7 +195,7 @@ $material-outlined-button: extend(
 /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
-/// @prop {Number} border-radius [4px] - The border radius used for raised button. 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 raised button.
 /// @requires {Map} $material-base-button
 /// @requires {Map} $material-raised-elevation
 $material-raised-button: extend(
@@ -259,7 +263,11 @@ $material-raised-button: extend(
                 300,
             ),
         ),
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -267,7 +275,7 @@ $material-raised-button: extend(
 /// @prop {Number} resting-elevation [6] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
-/// @prop {Number} border-radius [28px] - The border radius used for the floating button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(28px), rem(12px), rem(28px))] - The border radius used for floating button.
 /// @requires {Map} $material-raised-button
 /// @requires {Map} $material-fab-elevation
 $material-fab-button: extend(
@@ -275,7 +283,11 @@ $material-fab-button: extend(
     $material-fab-elevation,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
-        border-radius: rem(28px),
+        border-radius: (
+            rem(28px),
+            rem(12px),
+            rem(28px),
+        ),
     )
 );
 
@@ -294,7 +306,7 @@ $material-fab-button: extend(
 /// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of the button.
 /// @prop {Map} focus-visible-border-color [color: ('gray', 400)] - The focus-visible border color of the button.
 /// @prop {Map} active-border-color [color: ('gray', 400)] - The active border color of the button.
-/// @prop {Number} border-radius [20px] - The border radius used for the floating button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for floating button.
 /// @requires {Map} $material-base-button
 /// @requires {Map} $material-ib-elevation
 $material-icon-button: extend(
@@ -371,7 +383,11 @@ $material-icon-button: extend(
                 400,
             ),
         ),
-        border-radius: rem(20px),
+        border-radius: (
+            rem(20px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -424,7 +440,7 @@ $fluent-base-button: extend(
 /// @prop {Map} hover-foreground [color: ('primary', 500)] - The hover text color of a flat button.
 /// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a flat button.
-/// @prop {Number} border-radius [0] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for flat button.
 /// @requires {Map} $material-flat-button
 /// @requires {Map} $fluent-base-button
 $fluent-flat-button: extend(
@@ -466,7 +482,11 @@ $fluent-flat-button: extend(
             ),
         ),
         disabled-background: transparent,
-        border-radius: rem(0),
+        border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -487,7 +507,7 @@ $fluent-flat-button: extend(
 /// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of an outlined button.
 /// @prop {Map} disabled-background [color: ('gray', 200)] - The disabled background color of an outlined button.
 /// @prop {Map} disabled-foreground [color: ('gray', 400, .5)] - The disabled foreground color of an outlined button.
-/// @prop {Number} border-radius [2px] - The border radius used for outlined button.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for outlined button.
 /// @requires {Map} $material-outlined-button
 /// @requires {Map} $fluent-base-button
 $fluent-outlined-button: extend(
@@ -586,7 +606,11 @@ $fluent-outlined-button: extend(
                 0.5,
             ),
         ),
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -609,7 +633,7 @@ $fluent-outlined-button: extend(
 /// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
-/// @prop {Number} border-radius [2px] - The border radius used for raised button. 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 raised button.
 /// @requires {Map} $material-raised-button
 /// @requires {Map} $fluent-base-button
 $fluent-raised-button: extend(
@@ -706,7 +730,11 @@ $fluent-raised-button: extend(
                 900,
             ),
         ),
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -719,7 +747,7 @@ $fluent-raised-button: extend(
 /// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
-/// @prop {Number} border-radius [14px] - The border radius used for fab button.
+/// @prop {List} border-radius [(rem(14px), rem(12px), rem(28px))] - The border radius used for fab button.
 /// @requires {Map} $fluent-base-button
 /// @requires {Map} $fluent-raised-button
 $fluent-fab-button: extend(
@@ -757,7 +785,11 @@ $fluent-fab-button: extend(
                 900,
             ),
         ),
-        border-radius: rem(14px),
+        border-radius: (
+            rem(14px),
+            rem(12px),
+            rem(28px),
+        ),
     )
 );
 
@@ -778,7 +810,7 @@ $fluent-fab-button: extend(
 /// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of an icon button.
 /// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of an icon button.
 /// @prop {Map} disabled-border-color [color: ('gray', 100), lighten: 35%] - The disabled focused border color of an icon button.
-/// @prop {Number} border-radius [0] - The border radius used for icon button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for icon button.
 /// @requires {Map} $material-icon-button
 /// @requires {Map} $fluent-base-button
 $fluent-icon-button: extend(
@@ -848,7 +880,11 @@ $fluent-icon-button: extend(
                 100,
             ),
         ),
-        border-radius: rem(0),
+        border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -902,7 +938,6 @@ $bootstrap-base-button: extend(
 /// @prop {Map} active-background [transparent] - The active background color of a flat button.
 /// @prop {Map} active-foreground [color: ('primary', 600)] - The active background color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a flat button.
-/// @prop {Number} border-radius [4px] - The border radius used for flat button.
 /// @requires {Map} $material-flat-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-flat-button: extend(
@@ -972,7 +1007,6 @@ $bootstrap-flat-button: extend(
 /// @prop {Map} disabled-border-color [color: ('primary', 50), lighten: 35%] - The disabled focused border color of an outlined button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of an outlined button.
 /// @prop {Map} shadow-color [color: ('primary', 200, .5)] - The shadow color of an outlined button.
-/// @prop {Number} border-radius [4px] - The border radius used for outlined button.
 /// @requires {Map} $material-outlined-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-outlined-button: extend(
@@ -1082,7 +1116,6 @@ $bootstrap-outlined-button: extend(
 /// @prop {Map} active-background [color: ('primary', 700)] - The active background color of an raised button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 700)] - The active text color of an raised button.
 /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of a raised button.
-/// @prop {Number} border-radius [4px] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $material-raised-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-raised-button: extend(
@@ -1168,7 +1201,7 @@ $bootstrap-raised-button: extend(
 /// @prop {Color} focus-visible-foreground [contrast-color: ('primary', 600)] - The focus-visible text color of a fab button.
 /// @prop {Map} active-background [color: ('primary', 700)] - The active background color of a fab button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 700)] - The active text color of a fab button.
-/// @prop {Number} border-radius [15px] - The border radius used for outlined button.
+/// @prop {List} border-radius [(rem(15px), rem(12px), rem(28px))] - The border radius used for outlined button.
 /// @requires {Map} $material-fab-button
 /// @requires {Map} $bootstrap-base-button
 /// @requires {Map} $bootstrap-raised-button
@@ -1232,7 +1265,11 @@ $bootstrap-fab-button: extend(
                 700,
             ),
         ),
-        border-radius: rem(15px),
+        border-radius: (
+            rem(15px),
+            rem(12px),
+            rem(28px),
+        ),
     )
 );
 
@@ -1249,7 +1286,7 @@ $bootstrap-fab-button: extend(
 /// @prop {Map} active-foreground [color: ('primary', 600)] - The active text color of an icon button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of an outlined button.
 /// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the button.
-/// @prop {Number} border-radius [4px] - The border radius used for outlined button.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for outlined button.
 /// @requires {Map} $material-icon-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-icon-button: extend(
@@ -1313,7 +1350,11 @@ $bootstrap-icon-button: extend(
                 100,
             ),
         ),
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -1349,7 +1390,7 @@ $indigo-base-button: extend($material-base-button, $flat-elevation-button);
 /// @prop {Map} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a flat button.
 /// @prop {Map} shadow-color [color: ('gray', 300)] - The shadow color of a flat button.
-/// @prop {Number} border-radius [20px] - The border radius used for flat button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for flat button.
 /// @requires {Map} $material-flat-button
 /// @requires {Map} $indigo-base-button
 $indigo-flat-button: extend(
@@ -1397,7 +1438,11 @@ $indigo-flat-button: extend(
             ),
         ),
         disabled-background: transparent,
-        border-radius: rem(20px),
+        border-radius: (
+            rem(20px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -1419,7 +1464,7 @@ $indigo-flat-button: extend(
 /// @prop {Color} active-foreground [color: ('gray', 900)] - The active text color of a flat button.
 /// @prop {Map} shadow-color [color: ('gray', 300)] - The shadow color of a outlined button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a outlined button.
-/// @prop {Number} border-radius [20px] - The border radius used for flat button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for flat button.
 /// @requires {Map} $material-outlined-button
 /// @requires {Map} $indigo-base-button
 $indigo-outlined-button: extend(
@@ -1488,7 +1533,11 @@ $indigo-outlined-button: extend(
             ),
         ),
         disabled-background: transparent,
-        border-radius: rem(20px),
+        border-radius: (
+            rem(20px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -1502,7 +1551,7 @@ $indigo-outlined-button: extend(
 /// @prop {Map} focus-visible-foreground [ color: ('gray', 50)] - The focus-visible text color of a raised button.
 /// @prop {Map} active-background [color: ('gray', 50)] - The active background color of a raised button.
 /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of a raised button.
-/// @prop {Number} border-radius [20px] - The border radius used for flat button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for flat button.
 /// @requires {Map} $material-raised-button
 /// @requires {Map} $indigo-base-button
 $indigo-raised-button: extend(
@@ -1563,7 +1612,11 @@ $indigo-raised-button: extend(
                 200,
             ),
         ),
-        border-radius: rem(20px),
+        border-radius: (
+            rem(20px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );
 
@@ -1572,7 +1625,7 @@ $indigo-raised-button: extend(
 /// @prop {Map} hover-foreground [ color: ('gray', 50)] - The hover text color of a fab button.
 /// @prop {Map} focus-foreground [ color: ('gray', 50)] - The focus text color of a fab button.
 /// @prop {Map} focus-visible-foreground [ color: ('gray', 50)] - The focus-visible text color of a fab button.
-/// @prop {Number} border-radius [28px] - The border radius used for flat button.
+/// @prop {List} border-radius [(rem(28px), rem(12px), rem(28px))] - The border radius used for flat button.
 /// @requires {Map} $material-fab-button
 /// @requires {Map} $indigo-base-button
 /// @requires {Map} $indigo-raised-button
@@ -1606,7 +1659,11 @@ $indigo-fab-button: extend(
                 50,
             ),
         ),
-        border-radius: rem(28px),
+        border-radius: (
+            rem(28px),
+            rem(12px),
+            rem(28px),
+        ),
     )
 );
 
@@ -1624,7 +1681,6 @@ $indigo-fab-button: extend(
 /// @prop {Map} focus-border-color [color: ('gray' 300)] - The focus border color of the button.
 /// @prop {Map} focus-visible-border-color [color: ('gray' 300)] - The focus-visible border color of the button.
 /// @prop {Map} active-border-color [color: ('gray' 300)] - The active border color of the button.
-/// @prop {Number} border-radius [20px] - The border radius used for flat button.
 /// @requires {Map} $material-icon-button
 /// @requires {Map} $indigo-base-button
 $indigo-icon-button: extend(