igniteui-theming 1.4.11 → 1.4.13

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

@@ -54,9 +54,9 @@
 /// @prop {Map} border-color [color: ('gray', 300)] - The calendar border color.
 /// @prop {Map} week-number-color [color: ('gray', 500)] - The text color of the week number column.
 /// @prop {Map} week-number-background [color: ('gray', 200)] - The background color of the week number column.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
-/// @prop {List} date-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for calendar date.
-/// @prop {List} month-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for calendar month.
+/// @prop {Number} border-radius [4px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} date-border-radius [20px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} month-border-radius [20px] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
 $light-calendar: (
     content-background: (
         color: 'surface',
@@ -360,21 +360,9 @@ $light-calendar: (
         ),
     ),
 
-    border-radius: (
-        rem(4px),
-        rem(0),
-        rem(20px),
-    ),
-    date-border-radius: (
-        rem(20px),
-        rem(0),
-        rem(20px),
-    ),
-    month-border-radius: (
-        rem(20px),
-        rem(0),
-        rem(20px),
-    ),
+    border-radius: rem(4px),
+    date-border-radius: rem(20px),
+    month-border-radius: rem(20px),
 );
 
 /// Generates a fluent calendar schema.
@@ -392,9 +380,9 @@ $light-calendar: (
 /// @prop {Map} date-current-hover-foreground [color: ('primary', 600)] - The hover text color for the current date.
 /// @prop {Map} date-current-focus-foreground [color: ('primary', 600)] - The focus text color for the current date.
 /// @prop {Map} date-selected-current-foreground [contrast-color: ('primary', 600)] - The text color for the selected/current date.
-/// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar.
-/// @prop {List} date-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar date.
-/// @prop {List} month-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for calendar month.
+/// @prop {Number} border-radius [0] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} date-border-radius [0] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} month-border-radius [0] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-calendar
 $fluent-calendar: extend(
     $light-calendar,
@@ -503,21 +491,9 @@ $fluent-calendar: extend(
             ),
         ),
 
-        border-radius: (
-            rem(0),
-            rem(0),
-            rem(20px),
-        ),
-        date-border-radius: (
-            rem(0),
-            rem(0),
-            rem(20px),
-        ),
-        month-border-radius: (
-            rem(0),
-            rem(0),
-            rem(20px),
-        ),
+        border-radius: rem(0),
+        date-border-radius: rem(0),
+        month-border-radius: rem(0),
     )
 );
 
@@ -554,9 +530,9 @@ $fluent-calendar: extend(
 /// @prop {Map} date-selected-current-focus-background [color: ('primary', 700)] - The focus background color for the selected/current date.
 /// @prop {Map} date-current-hover-foreground [color: ('surface')] - The hover text color for the current date.
 /// @prop {Map} date-current-focus-foreground [color: ('surface')] - The focus text color for the current date.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar.
-/// @prop {List} date-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar date.
-/// @prop {List} month-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for calendar month.
+/// @prop {Number} border-radius [4px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} date-border-radius [4px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} month-border-radius [4px] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-calendar
 $bootstrap-calendar: extend(
     $light-calendar,
@@ -789,21 +765,9 @@ $bootstrap-calendar: extend(
             ),
         ),
 
-        border-radius: (
-            rem(4px),
-            rem(0),
-            rem(20px),
-        ),
-        date-border-radius: (
-            rem(4px),
-            rem(0),
-            rem(20px),
-        ),
-        month-border-radius: (
-            rem(4px),
-            rem(0),
-            rem(20px),
-        ),
+        border-radius: rem(4px),
+        date-border-radius: rem(4px),
+        month-border-radius: rem(4px),
     )
 );
 
@@ -825,7 +789,9 @@ $bootstrap-calendar: extend(
 /// @prop {Map} date-selected-current-focus-foreground [contrast-color: ('primary', 500)] - The focus text color for the selected/current date.
 /// @prop {Map} date-current-hover-foreground [color: ('primary', 600)] - The hover text color for the current date.
 /// @prop {Map} date-current-focus-foreground [color: ('primary', 600)] - The focus text color for the current date.
-/// @prop {List} border-radius [(rem(3px), rem(0), rem(20px))] - The border radius used for calendar.
+/// @prop {Number} border-radius [3px] - The border radius used for calendar. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} date-border-radius [20px] - The border radius used for calendar date. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} month-border-radius [20px] - The border radius used for calendar month. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-calendar
 $indigo-calendar: extend(
     $light-calendar,
@@ -937,10 +903,6 @@ $indigo-calendar: extend(
             ),
         ),
 
-        border-radius: (
-            rem(3px),
-            rem(0),
-            rem(20px),
-        ),
+        border-radius: rem(3px),
     )
 );

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

@@ -18,7 +18,7 @@
 /// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
 /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for card.
+/// @prop {Number} border-radius [4px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $default-elevation-card
 $light-card: extend(
     $default-elevation-card,
@@ -63,11 +63,7 @@ $light-card: extend(
             ),
         ),
 
-        border-radius: (
-            rem(4px),
-            rem(0),
-            rem(24px),
-        ),
+        border-radius: rem(4px),
     )
 );
 
@@ -76,7 +72,7 @@ $light-card: extend(
 /// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
 /// @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 {List} border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for card.
+/// @prop {Number} border-radius [2px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-card
 /// @requires {Map} $fluent-elevation-card
 $fluent-card: extend(
@@ -90,11 +86,7 @@ $fluent-card: extend(
             ),
         ),
 
-        border-radius: (
-            rem(2px),
-            rem(0),
-            rem(24px),
-        ),
+        border-radius: rem(2px),
     )
 );
 
@@ -108,6 +100,7 @@ $fluent-card: extend(
 /// @prop {Map} actions-text-color [color: ('gray', 900)] - The text color of the card buttons.
 /// @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} border-radius [4px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-card
 /// @requires {Map} $bootstrap-elevation-card
 $bootstrap-card: extend(
@@ -167,7 +160,7 @@ $bootstrap-card: extend(
 /// @prop {Map} actions-text-color [color: ('gray', 600)] - The text color of the card buttons.
 /// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
-/// @prop {List} border-radius [(rem(3px), rem(0), rem(24px))] - The border radius used for card.
+/// @prop {Number} border-radius [3px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-card
 /// @requires {Map} $indigo-elevation-card
 $indigo-card: extend(
@@ -209,10 +202,6 @@ $indigo-card: extend(
             ),
         ),
 
-        border-radius: (
-            rem(3px),
-            rem(0),
-            rem(24px),
-        ),
+        border-radius: rem(3px),
     )
 );

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

@@ -22,7 +22,7 @@
 /// @prop {Map} indicator-active-dot-color [color: ('gray', 50)] - The active indicator dot color.
 /// @prop {Map} indicator-active-border-color [color: ('gray', 50)] - The active indicator border color.
 /// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons.
-/// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for carousel.
+/// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $default-elevation-carousel
 $light-carousel: extend(
     $default-elevation-carousel,
@@ -98,16 +98,13 @@ $light-carousel: extend(
             ),
         ),
 
-        border-radius: (
-            rem(0),
-            rem(0),
-            rem(36px),
-        ),
+        border-radius: rem(0),
     )
 );
 
 /// Generates a fluent carousel schema.
 /// @type {Map}
+/// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @requires {Map} $light-carousel
 /// @requires {Map} $fluent-elevation-carousel
@@ -115,7 +112,7 @@ $fluent-carousel: extend($light-carousel, $fluent-elevation-carousel);
 
 /// Generates a bootstrap carousel schema.
 /// @type {Map}
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for carousel.
+/// @prop {Number} border-radius [4px] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @requires {Map} $light-carousel
 /// @requires {Map} $bootstrap-elevation-carousel
@@ -123,11 +120,7 @@ $bootstrap-carousel: extend(
     $light-carousel,
     $bootstrap-elevation-carousel,
     (
-        border-radius: (
-            rem(4px),
-            rem(0),
-            rem(36px),
-        ),
+        border-radius: rem(4px),
     )
 );
 
@@ -141,6 +134,7 @@ $bootstrap-carousel: extend(
 /// @prop {Map} button-disabled-arrow-color [color: ('gray' 400)] - The previous/next buttons disabled color.
 /// @prop {Map} indicator-dot-color [color: ('surface', 500, .6)] - The idle indicator dot color.
 /// @prop {Map} indicator-active-dot-color [color: 'surface'] - The active indicator dot color.
+/// @prop {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @requires {Map} $light-carousel
 /// @requires {Map} $indigo-elevation-carousel

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

@@ -22,8 +22,8 @@
 /// @prop {Map} disabled-color-label [color: ('gray', 500)] - The disabled color of the label.
 /// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state.
 /// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
-/// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
-/// @prop {List} border-radius-ripple [(rem(24px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
+/// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [24px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
 $light-checkbox: (
     tick-color: (
         color: (
@@ -91,16 +91,8 @@ $light-checkbox: (
             500,
         ),
     ),
-    border-radius: (
-        rem(2px),
-        rem(0),
-        rem(10px),
-    ),
-    border-radius-ripple: (
-        rem(24px),
-        rem(0),
-        rem(24px),
-    ),
+    border-radius: rem(2px),
+    border-radius-ripple: rem(24px),
 );
 
 /// Generates a fluent checkbox schema.
@@ -112,8 +104,8 @@ $light-checkbox: (
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
 /// @prop {Map} focus-outline-color [color: ('gray', 800)] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 900)] - The border and fill colors in invalid state on hover.
-/// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
-/// @prop {List} border-radius-ripple [(rem(2px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
+/// @prop {Number} border-radius [2px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [2px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-checkbox
 $fluent-checkbox: extend(
     $light-checkbox,
@@ -160,16 +152,8 @@ $fluent-checkbox: extend(
                 900,
             ),
         ),
-        border-radius: (
-            rem(2px),
-            rem(0),
-            rem(10px),
-        ),
-        border-radius-ripple: (
-            rem(2px),
-            rem(0),
-            rem(24px),
-        ),
+        border-radius: rem(2px),
+        border-radius-ripple: rem(2px),
     )
 );
 
@@ -181,8 +165,8 @@ $fluent-checkbox: extend(
 /// @prop {Map} disabled-color-label [color: ('gray', 400)] - The disabled color of the label.
 /// @prop {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 100)] - The focus outlined color in invalid state.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(10px))] - The border radius used for checkbox.
-/// @prop {List} border-radius-ripple [(rem(4px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
+/// @prop {Number} border-radius [4px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [4px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-checkbox
 $bootstrap-checkbox: extend(
     $light-checkbox,
@@ -223,16 +207,8 @@ $bootstrap-checkbox: extend(
                 100,
             ),
         ),
-        border-radius: (
-            rem(4px),
-            rem(0),
-            rem(10px),
-        ),
-        border-radius-ripple: (
-            rem(4px),
-            rem(0),
-            rem(24px),
-        ),
+        border-radius: rem(4px),
+        border-radius-ripple: rem(4px),
     )
 );
 
@@ -247,8 +223,8 @@ $bootstrap-checkbox: extend(
 /// @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.
 /// @prop {Map} error-color-hover [color: ('error', 200)] - The focus outlined color in invalid state.
-/// @prop {List} border-radius [(rem(3px), rem(0), rem(10px))] - The border radius used for checkbox.
-/// @prop {List} border-radius-ripple [(rem(3px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
+/// @prop {Number} border-radius [3px] - The border radius used for checkbox. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius-ripple [3px] - The border radius used for checkbox ripple. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-checkbox
 $indigo-checkbox: extend(
     $light-checkbox,
@@ -301,15 +277,7 @@ $indigo-checkbox: extend(
                 200,
             ),
         ),
-        border-radius: (
-            rem(3px),
-            rem(0),
-            rem(10px),
-        ),
-        border-radius-ripple: (
-            rem(3px),
-            rem(0),
-            rem(24px),
-        ),
+        border-radius: rem(3px),
+        border-radius-ripple: rem(3px),
     )
 );

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

@@ -10,7 +10,7 @@
 
 /// Generates a light chip schema.
 /// @type {Map}
-/// @prop {List} border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for chip.
+/// @prop {Number} border-radius [16px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Map} text-color [contrast-color: ('gray', 300)] - The chip text color.
 /// @prop {Map} background [color: ('gray', 300)] - The chip background color.
 /// @prop {Color} border-color [transparent] - The chip border color.
@@ -151,11 +151,7 @@ $light-chip: extend(
 
         focus-selected-border-color: transparent,
 
-        border-radius: (
-            rem(16px),
-            rem(0),
-            rem(16px),
-        ),
+        border-radius: rem(16px),
         disabled-text-color: (
             color: (
                 'gray',
@@ -195,6 +191,7 @@ $light-chip: extend(
 /// @prop {Map} focus-selected-text-color [contrast-color: ('primary', 700)] - The selected chip text focus color.
 /// @prop {Map} focus-selected-background [color: ('primary', 500)] - The selected chip focus background color.
 /// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+/// @prop {Number} border-radius [16px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-chip
 /// @requires {Map} $fluent-elevation-chip
 $fluent-chip: extend(
@@ -305,7 +302,7 @@ $fluent-chip: extend(
 /// @prop {Map} focus-selected-background [color: ('gray', 400)] - The selected chip focus background color.
 /// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 400)] - The selected chip text focus color.
 /// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for chip.
+/// @prop {Number} border-radius [4px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Map} focus-outline-color [color: ('gray', 200)] - The chip focus outline color.
 /// @prop {Map} focus-selected-outline-color [color: ('primary', 200)] - The selected chip focus outline color.
 /// @requires {Map} $light-chip
@@ -384,17 +381,14 @@ $bootstrap-chip: extend(
             ),
         ),
 
-        border-radius: (
-            rem(4px),
-            rem(0),
-            rem(16px),
-        ),
+        border-radius: rem(4px),
     )
 );
 
 /// Generates an indigo chip schema.
 /// @type {Map}
 /// @prop {Number} ghost-elevation [1] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
+/// @prop {Number} border-radius [16px] - The border radius used for chip. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
 /// @prop {Map} background [color: ('surface')] - The chip background color.
 /// @prop {Map} ghost-background [color: ('surface')] - The chip ghost background color.

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

@@ -29,12 +29,6 @@
 /// @prop {Map} case-icon-color [color: ('gray', 400)] - The case sensitive icon color in inactive state for combo search input
 /// @prop {Map} case-icon-color--active [color: ('primary', 500)] - The case sensitive icon color in active state for combo search input
 $light-combo: (
-    toggle-button-background-focus--border: (
-        color: (
-            'gray',
-            300,
-        ),
-    ),
     case-icon-color: (
         color: (
             'gray',
@@ -110,7 +104,7 @@ $light-combo: (
     toggle-button-background-disabled: (
         color: (
             'gray',
-            100,
+            300,
         ),
     ),
     toggle-button-foreground-disabled: (
@@ -190,6 +184,7 @@ $fluent-combo: extend(
 /// @prop {Map} clear-button-background-focus [color: ('gray', 300)] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [color: ('gray', 800)] - The combo toggle clear foreground color.
 /// @prop {Map} clear-button-foreground-focus [color: ('gray', 800)] - The combo clear button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 300)] - The combo toggle button background color when the combo is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The combo toggle button foreground color when the combo is disabled.
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
 /// @requires {Map} $light-combo
@@ -261,6 +256,12 @@ $bootstrap-combo: extend(
                 300,
             ),
         ),
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
@@ -275,9 +276,9 @@ $bootstrap-combo: extend(
 /// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [color: ('gray', 600)] - The combo toggle clear foreground color.
 /// @prop {Map} clear-button-foreground-focus [color: ('gray', 600)] - The combo clear button foreground color when the combo is focused.
+/// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 300)] - The combo toggle button foreground color when the combo is disabled.
-/// @prop {Color} toggle-button-background-disabled [transparent] - The combo toggle button background color when the combo is disabled.
-/// @prop {Color} toggle-button-background-focus [transparent] - The combo toggle button background color when the combo is focused.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
 /// @requires {Map} $light-combo
 $indigo-combo: extend(
     $light-combo,
@@ -301,12 +302,17 @@ $indigo-combo: extend(
                 600,
             ),
         ),
+        toggle-button-background-disabled: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
                 300,
             ),
         ),
-        toggle-button-background-disabled: transparent,
     )
 );

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

@@ -15,7 +15,7 @@
 /// @prop {Map} message-color [color: ('gray', 600)] - The dialog message text color.
 /// @prop {Color} border-color [transparent] - The border color for dialog component.
 /// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for dialog.
+/// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $default-elevation-dialog
 $light-dialog: extend(
     $default-elevation-dialog,
@@ -40,27 +40,19 @@ $light-dialog: extend(
 
         border-color: transparent,
 
-        border-radius: (
-            rem(4px),
-            rem(0),
-            rem(36px),
-        ),
+        border-radius: rem(4px),
     )
 );
 
 /// Generates a fluent dialog schema.
 /// @type {Map}
-/// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
+/// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
 /// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
 /// @requires {Map} $light-dialog
 $fluent-dialog: extend(
     $light-dialog,
     (
-        border-radius: (
-            rem(2px),
-            rem(0),
-            rem(36px),
-        ),
+        border-radius: rem(2px),
         message-color: (
             color: (
                 'gray',
@@ -74,6 +66,7 @@ $fluent-dialog: extend(
 /// @type {Map}
 /// @prop {Map} border-color [color: ('gray', 300)] - The border color for dialog component.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the dialog.
+/// @prop {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-dialog
 /// @requires {Map} $bootstrap-elevation-dialog
 $bootstrap-dialog: extend(
@@ -92,7 +85,7 @@ $bootstrap-dialog: extend(
 /// Generates an indigo dialog schema.
 /// @type {Map}
 /// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
-/// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
+/// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $light-dialog
 $indigo-dialog: extend(
     $light-dialog,
@@ -104,10 +97,6 @@ $indigo-dialog: extend(
             ),
         ),
 
-        border-radius: (
-            rem(2px),
-            rem(0),
-            rem(36px),
-        ),
+        border-radius: rem(2px),
     )
 );