igniteui-theming 1.4.7 → 1.4.9

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 {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.
+/// @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.
 $light-calendar: (
     content-background: (
         color: 'surface',
@@ -360,9 +360,21 @@ $light-calendar: (
         ),
     ),
 
-    border-radius: rem(4px),
-    date-border-radius: rem(20px),
-    month-border-radius: rem(20px),
+    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),
+    ),
 );
 
 /// Generates a fluent calendar schema.
@@ -380,9 +392,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 {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.
+/// @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.
 /// @requires {Map} $light-calendar
 $fluent-calendar: extend(
     $light-calendar,
@@ -491,9 +503,21 @@ $fluent-calendar: extend(
             ),
         ),
 
-        border-radius: rem(0),
-        date-border-radius: rem(0),
-        month-border-radius: rem(0),
+        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),
+        ),
     )
 );
 
@@ -530,9 +554,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 {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.
+/// @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.
 /// @requires {Map} $light-calendar
 $bootstrap-calendar: extend(
     $light-calendar,
@@ -765,9 +789,21 @@ $bootstrap-calendar: extend(
             ),
         ),
 
-        border-radius: rem(4px),
-        date-border-radius: rem(4px),
-        month-border-radius: rem(4px),
+        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),
+        ),
     )
 );
 
@@ -789,9 +825,7 @@ $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 {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.
+/// @prop {List} border-radius [(rem(3px), rem(0), rem(20px))] - The border radius used for calendar.
 /// @requires {Map} $light-calendar
 $indigo-calendar: extend(
     $light-calendar,
@@ -903,6 +937,10 @@ $indigo-calendar: extend(
             ),
         ),
 
-        border-radius: rem(3px),
+        border-radius: (
+            rem(3px),
+            rem(0),
+            rem(20px),
+        ),
     )
 );

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 {Number} border-radius [4px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for card.
 /// @requires {Map} $default-elevation-card
 $light-card: extend(
     $default-elevation-card,
@@ -63,7 +63,11 @@ $light-card: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -72,7 +76,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 {Number} border-radius [2px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for card.
 /// @requires {Map} $light-card
 /// @requires {Map} $fluent-elevation-card
 $fluent-card: extend(
@@ -86,7 +90,11 @@ $fluent-card: extend(
             ),
         ),
 
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -100,7 +108,6 @@ $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(
@@ -160,7 +167,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 {Number} border-radius [3px] - The border radius used for card. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(3px), rem(0), rem(24px))] - The border radius used for card.
 /// @requires {Map} $light-card
 /// @requires {Map} $indigo-elevation-card
 $indigo-card: extend(
@@ -202,6 +209,10 @@ $indigo-card: extend(
             ),
         ),
 
-        border-radius: rem(3px),
+        border-radius: (
+            rem(3px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );

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 {Number} border-radius [0] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for carousel.
 /// @requires {Map} $default-elevation-carousel
 $light-carousel: extend(
     $default-elevation-carousel,
@@ -98,13 +98,16 @@ $light-carousel: extend(
             ),
         ),
 
-        border-radius: rem(0),
+        border-radius: (
+            rem(0),
+            rem(0),
+            rem(36px),
+        ),
     )
 );
 
 /// 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
@@ -112,7 +115,7 @@ $fluent-carousel: extend($light-carousel, $fluent-elevation-carousel);
 
 /// Generates a bootstrap carousel schema.
 /// @type {Map}
-/// @prop {Number} border-radius [4px] - The border radius used for carousel. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for carousel.
 /// @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
@@ -120,7 +123,11 @@ $bootstrap-carousel: extend(
     $light-carousel,
     $bootstrap-elevation-carousel,
     (
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(36px),
+        ),
     )
 );
 
@@ -134,7 +141,6 @@ $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 {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.
+/// @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.
 $light-checkbox: (
     tick-color: (
         color: (
@@ -91,8 +91,16 @@ $light-checkbox: (
             500,
         ),
     ),
-    border-radius: rem(2px),
-    border-radius-ripple: rem(24px),
+    border-radius: (
+        rem(2px),
+        rem(0),
+        rem(10px),
+    ),
+    border-radius-ripple: (
+        rem(24px),
+        rem(0),
+        rem(24px),
+    ),
 );
 
 /// Generates a fluent checkbox schema.
@@ -104,8 +112,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 {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.
+/// @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.
 /// @requires {Map} $light-checkbox
 $fluent-checkbox: extend(
     $light-checkbox,
@@ -152,8 +160,16 @@ $fluent-checkbox: extend(
                 900,
             ),
         ),
-        border-radius: rem(2px),
-        border-radius-ripple: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(10px),
+        ),
+        border-radius-ripple: (
+            rem(2px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -165,8 +181,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 {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.
+/// @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.
 /// @requires {Map} $light-checkbox
 $bootstrap-checkbox: extend(
     $light-checkbox,
@@ -207,8 +223,16 @@ $bootstrap-checkbox: extend(
                 100,
             ),
         ),
-        border-radius: rem(4px),
-        border-radius-ripple: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(10px),
+        ),
+        border-radius-ripple: (
+            rem(4px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );
 
@@ -223,8 +247,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 {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.
+/// @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.
 /// @requires {Map} $light-checkbox
 $indigo-checkbox: extend(
     $light-checkbox,
@@ -277,7 +301,15 @@ $indigo-checkbox: extend(
                 200,
             ),
         ),
-        border-radius: rem(3px),
-        border-radius-ripple: rem(3px),
+        border-radius: (
+            rem(3px),
+            rem(0),
+            rem(10px),
+        ),
+        border-radius-ripple: (
+            rem(3px),
+            rem(0),
+            rem(24px),
+        ),
     )
 );

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

@@ -10,7 +10,7 @@
 
 /// Generates a light chip schema.
 /// @type {Map}
-/// @prop {Number} border-radius [16px] - The border radius used for chip. 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 chip.
 /// @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,7 +151,11 @@ $light-chip: extend(
 
         focus-selected-border-color: transparent,
 
-        border-radius: rem(16px),
+        border-radius: (
+            rem(16px),
+            rem(0),
+            rem(16px),
+        ),
         disabled-text-color: (
             color: (
                 'gray',
@@ -191,7 +195,6 @@ $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(
@@ -302,7 +305,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 {Number} border-radius [4px] - The border radius used for chip. 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 chip.
 /// @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
@@ -381,14 +384,17 @@ $bootstrap-chip: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(16px),
+        ),
     )
 );
 
 /// 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

@@ -19,8 +19,9 @@
 /// @prop {Map} toggle-button-foreground [color: ('gray', 700)] - The combo toggle button foreground color.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The combo toggle 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', 700)] - The combo toggle button foreground color when the combo is disabled.
+/// @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', 500)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Map} toggle-button-background-focus--border [color: ('gray', 300)] The combo toggle button background color when the combo is focused in material border variant.
 /// @prop {Color} clear-button-background [transparent] - The combo clear button background color.
 /// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [contrast-color: ('gray', 100)] - The combo toggle clear foreground color.
@@ -28,6 +29,12 @@
 /// @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',
@@ -103,7 +110,7 @@ $light-combo: (
     toggle-button-background-disabled: (
         color: (
             'gray',
-            300,
+            100,
         ),
     ),
     toggle-button-foreground-disabled: (
@@ -183,7 +190,6 @@ $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
@@ -255,12 +261,6 @@ $bootstrap-combo: extend(
                 300,
             ),
         ),
-        toggle-button-background-disabled: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
         toggle-button-foreground-disabled: (
             color: (
                 'gray',
@@ -275,9 +275,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 {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
+/// @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.
 /// @requires {Map} $light-combo
 $indigo-combo: extend(
     $light-combo,
@@ -301,17 +301,12 @@ $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 {Number} border-radius [4px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @requires {Map} $default-elevation-dialog
 $light-dialog: extend(
     $default-elevation-dialog,
@@ -40,19 +40,27 @@ $light-dialog: extend(
 
         border-color: transparent,
 
-        border-radius: rem(4px),
+        border-radius: (
+            rem(4px),
+            rem(0),
+            rem(36px),
+        ),
     )
 );
 
 /// Generates a fluent dialog schema.
 /// @type {Map}
-/// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @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),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(36px),
+        ),
         message-color: (
             color: (
                 'gray',
@@ -66,7 +74,6 @@ $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(
@@ -85,7 +92,7 @@ $bootstrap-dialog: extend(
 /// Generates an indigo dialog schema.
 /// @type {Map}
 /// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
-/// @prop {Number} border-radius [2px] - The border radius used for dialog. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @requires {Map} $light-dialog
 $indigo-dialog: extend(
     $light-dialog,
@@ -97,6 +104,10 @@ $indigo-dialog: extend(
             ),
         ),
 
-        border-radius: rem(2px),
+        border-radius: (
+            rem(2px),
+            rem(0),
+            rem(36px),
+        ),
     )
 );