igniteui-theming 1.4.11 → 1.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "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,7 +2,6 @@
 @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;
@@ -23,7 +22,7 @@
 ///     foreground: (
 ///        color: ('primary', 800, .5)
 ///     ),
-///     border-radius: (rem(5px), rem(0), rem(8px)) // default, min and max radius
+///     border-radius: rem(5px)
 ///   );
 ///   $theme: digest-schema($custom-schema);
 /// @returns {Map} - A theme map with resolved values.
@@ -117,9 +116,7 @@
 /// @param {Number} $max [$radius] - The maximum allowed value.
 /// @return {Number} - The clamped value
 @function border-radius($radius, $min: #{rem(0)}, $max: $radius) {
-    $factor: math.div($radius, $max);
-
-    @return clamp(#{$min}, #{calc(var(--ig-radius-factor, #{$factor}) * #{$max})}, #{$max});
+    @return clamp(#{$min}, #{calc(var(--ig-radius-factor) * #{$radius})}, #{$max});
 }
 
 /// Used to switch between values based on the size of the component.

package/sass/themes/_mixins.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
 @use 'sass:list';
@@ -88,9 +87,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
 /// @example scss
 ///    @include border-radius(4px);
 @mixin border-radius($radius, $min: #{rem(0)}, $max: $radius) {
-    $factor: math.div($radius, $max);
-
-    border-radius: clamp(#{$min}, #{calc(var(--ig-radius-factor, #{$factor}) * #{$max})}, #{$max});
+    border-radius: clamp(#{$min}, #{calc(var(--ig-radius-factor) * #{$radius})}, #{$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 {List} actions-border-radius [(rem(24px), rem(0), rem(24px))] - The border radius used for action strip actions container.
+/// @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.
 $light-action-strip: extend(
     (
         actions-background: (
@@ -39,41 +39,29 @@ $light-action-strip: extend(
             ),
         ),
 
-        actions-border-radius: (
-            rem(24px),
-            rem(0),
-            rem(24px),
-        ),
+        actions-border-radius: rem(24px),
     )
 );
 
 /// Generates a fluent action strip schema.
 /// @type {Map}
-/// @prop {List} actions-border-radius [(rem(0), rem(0), rem(24px))] - The border radius used for action strip actions container.
+/// @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.
 /// @requires {Map} $light-action-strip
 $fluent-action-strip: extend(
     $light-action-strip,
     (
-        actions-border-radius: (
-            rem(0),
-            rem(0),
-            rem(24px),
-        ),
+        actions-border-radius: rem(0),
     )
 );
 
 /// Generates a bootstrap action strip schema.
 /// @type {Map}
-/// @prop {List} actions-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for action strip actions container.
+/// @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.
 /// @requires {Map} $light-action-strip
 $bootstrap-action-strip: extend(
     $light-action-strip,
     (
-        actions-border-radius: (
-            rem(4px),
-            rem(0),
-            rem(24px),
-        ),
+        actions-border-radius: rem(4px),
     )
 );
 
@@ -81,7 +69,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 {List} actions-border-radius [(rem(3px), rem(0), rem(24px))] - The border radius used for action strip actions container.
+/// @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.
 /// @requires {Map} $light-action-strip
 $indigo-action-strip: extend(
     $light-action-strip,
@@ -96,10 +84,6 @@ $indigo-action-strip: extend(
             contrast-color: 'primary',
         ),
 
-        actions-border-radius: (
-            rem(3px),
-            rem(0),
-            rem(24px),
-        ),
+        actions-border-radius: rem(3px),
     )
 );

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 [rem(0)] - The border radius.
+/// @prop {Number} border-radius [0] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
 /// @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 [rem(4px)] - The border radius.
+/// @prop {Number} border-radius [4px] - The border radius. Can be a fraction between 0 and 1, pixels, or percent.
 /// @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.
+/// @prop {Number} border-radius [0] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
 /// @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 [rem(4px)] - The border radius used for badge.
+/// @prop {Number} border-radius [4px] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
 /// @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 {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for button-group component.
+/// @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} $default-elevation-button-group
 $light-button-group: extend(
     $default-elevation-button-group,
@@ -116,11 +116,7 @@ $light-button-group: extend(
             ),
         ),
 
-        border-radius: (
-            rem(4px),
-            rem(0),
-            rem(20px),
-        ),
+        border-radius: rem(4px),
     )
 );
 
@@ -134,7 +130,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 {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
+/// @prop {Number} border-radius [2px] - 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} $fluent-elevation-button-group
 $fluent-button-group: extend(
@@ -190,11 +186,7 @@ $fluent-button-group: extend(
             ),
         ),
 
-        border-radius: (
-            rem(2px),
-            rem(0),
-            rem(20px),
-        ),
+        border-radius: rem(2px),
     )
 );
 
@@ -213,6 +205,7 @@ $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(
@@ -322,7 +315,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 {List} border-radius [(rem(8px), rem(0), rem(20px))] - The border radius used for button-group component.
+/// @prop {Number} border-radius [8px] - 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} $indigo-elevation-button-group
 $indigo-button-group: extend(
@@ -428,10 +421,6 @@ $indigo-button-group: extend(
             ),
         ),
 
-        border-radius: (
-            rem(8px),
-            rem(0),
-            rem(20px),
-        ),
+        border-radius: rem(8px),
     )
 );

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