@progress/kendo-theme-fluent 12.3.1-dev.9 → 13.0.0-dev.0

package/scss/button/_theme.scss

@@ -1,153 +1,188 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/button/_theme.scss" as *;
 
 @mixin kendo-button--theme() {
 
     @include kendo-button--theme-base();
-    .k-button-solid {
-        &:focus,
-        &.k-focus {
-            border-color: $kendo-button-focus-border;
-            outline-color: $kendo-button-focus-border;
-            box-shadow: inset 0 0 0 $kendo-button-border-width $kendo-button-focus-border,
-                        inset 0 0 0 calc( #{$kendo-button-border-width} * 2 ) k-color(surface);
-        }
-    }
-
-    .k-button-solid-base {
-        &.k-selected {
-            color: $kendo-button-active-text;
-            background-color: $kendo-button-active-bg;
-            border-color: $kendo-button-active-border;
-        }
-    }
-
-    .k-button-flat {
-        &:disabled,
-        &.k-disabled {
-            @include fill(
-                $kendo-button-flat-disabled-text,
-                $kendo-button-flat-disabled-bg,
-                $kendo-button-flat-disabled-border
-            );
-        }
-    }
-
-    .k-button-outline,
-    .k-button-flat,
-    .k-button-clear,
-    .k-button-link {
-        &:focus,
-        &.k-focus {
-            outline-color: $kendo-button-focus-border;
-        }
 
-        &:disabled,
-        &.k-disabled {
-            @include fill(
-                $kendo-button-outline-disabled-text,
-                $kendo-button-outline-disabled-bg,
-                $kendo-button-outline-disabled-border
-            );
-        }
-    }
-
-    @each $theme-color, $color in $kendo-button-theme-colors {
-        @if($theme-color != "base") {
-            .k-button-flat-#{$theme-color} {
-                background-color: initial !important; // stylelint-disable-line declaration-no-important
-                border-color: transparent;
+    .k-button {
+        #{k-when-default($kendo-button-default-fill-mode, "solid")}
+        &.k-button-solid {
+            &:focus,
+            &.k-focus {
+                border-color: $kendo-button-focus-border;
+                outline-color: $kendo-button-focus-border;
+                box-shadow: inset 0 0 0 $kendo-button-border-width $kendo-button-focus-border,
+                            inset 0 0 0 calc( #{$kendo-button-border-width} * 2 ) k-color(surface);
             }
 
-            .k-button-outline-#{$theme-color} {
-
-                border-color: k-color(#{$theme-color}-on-surface);
-
-                &:hover,
-                &.k-hover,
-                &:active,
-                &.k-active,
+            #{k-when-default($kendo-button-default-theme-color, "base")}
+            &.k-button-base {
                 &.k-selected {
-                    border-color: k-color(#{$theme-color}-on-surface);
+                    color: $kendo-button-active-text;
+                    background-color: $kendo-button-active-bg;
+                    border-color: $kendo-button-active-border;
                 }
             }
+        }
 
-            .k-button-flat-#{$theme-color},
-            .k-button-outline-#{$theme-color} {
-                color: k-color(#{$theme-color}-on-surface);
+        #{k-when-default($kendo-button-default-fill-mode, "flat")}
+        &.k-button-flat {
+            &:disabled,
+            &.k-disabled {
+                @include fill(
+                    $kendo-button-flat-disabled-text,
+                    $kendo-button-flat-disabled-bg,
+                    $kendo-button-flat-disabled-border
+                );
+            }
+        }
 
-                &:hover,
-                &.k-hover {
-                    color: k-color(#{$theme-color}-on-surface);
-                    background-color: color-mix(in srgb, k-color(#{$theme-color}-hover) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
-                }
+        #{k-when-default($kendo-button-default-fill-mode, ("outline", "flat", "clear", "link"))}
+        &.k-button-outline,
+        &.k-button-flat,
+        &.k-button-clear,
+        &.k-button-link {
+            &:focus,
+            &.k-focus {
+                outline-color: $kendo-button-focus-border;
+            }
 
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    color: k-color(#{$theme-color}-on-surface);
-                    background-color: color-mix(in srgb, k-color(#{$theme-color}-active) 13%, transparent) !important; // stylelint-disable-line declaration-no-important
-                }
+            &:disabled,
+            &.k-disabled {
+                @include fill(
+                    $kendo-button-outline-disabled-text,
+                    $kendo-button-outline-disabled-bg,
+                    $kendo-button-outline-disabled-border
+                );
             }
         }
 
-        @if($theme-color == "base") {
-            .k-button-outline-#{$theme-color} {
-                border-color: $kendo-button-border;
-
-                &:hover,
-                &.k-hover {
-                    color: inherit;
-                    background-color: color-mix(in srgb, k-color(on-base) 3%, transparent);
-                    border-color: color-mix( in srgb, k-color(border) 34%, transparent );
+        @each $theme-color in $kendo-button-theme-colors {
+            @if($theme-color != "base") {
+                #{k-when-default($kendo-button-default-fill-mode, "flat")}
+                &.k-button-flat {
+                    #{k-when-default($kendo-button-default-theme-color, $theme-color)}
+                    &.k-button-#{$theme-color} {
+                        background-color: initial !important; // stylelint-disable-line declaration-no-important
+                        border-color: transparent;
+                    }
                 }
 
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    color: inherit;
-                    background-color: color-mix(in srgb, k-color(on-base) 13%, transparent);
-                    border-color: $kendo-button-border;
+                #{k-when-default($kendo-button-default-fill-mode, "outline")}
+                &.k-button-outline {
+                    #{k-when-default($kendo-button-default-theme-color, $theme-color)}
+                    &.k-button-#{$theme-color} {
+                        border-color: k-color(#{$theme-color}-on-surface);
+
+                        &:hover,
+                        &.k-hover,
+                        &:active,
+                        &.k-active,
+                        &.k-selected {
+                            border-color: k-color(#{$theme-color}-on-surface);
+                        }
+                    }
                 }
-            }
 
-            .k-button-flat-#{$theme-color} {
-                &:hover,
-                &.k-hover {
-                    background-color: color-mix(in srgb, k-color(on-base) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
+                #{k-when-default($kendo-button-default-fill-mode, ("flat", "outline"))}
+                &.k-button-flat,
+                &.k-button-outline {
+                    #{k-when-default($kendo-button-default-theme-color, $theme-color)}
+                    &.k-button-#{$theme-color} {
+                        color: k-color(#{$theme-color}-on-surface);
+
+                        &:hover,
+                        &.k-hover {
+                            color: k-color(#{$theme-color}-on-surface);
+                            background-color: color-mix(in srgb, k-color(#{$theme-color}-hover) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
+                        }
+
+                        &:active,
+                        &.k-active,
+                        &.k-selected {
+                            color: k-color(#{$theme-color}-on-surface);
+                            background-color: color-mix(in srgb, k-color(#{$theme-color}-active) 13%, transparent) !important; // stylelint-disable-line declaration-no-important
+                        }
+                    }
                 }
             }
-        }
 
-        @if($theme-color == "secondary") {
-            .k-button-solid-#{$theme-color} {
-                border-color: currentColor;
+            @if($theme-color == "base") {
+                #{k-when-default($kendo-button-default-fill-mode, "outline")}
+                &.k-button-outline {
+                    #{k-when-default($kendo-button-default-theme-color, $theme-color)}
+                    &.k-button-#{$theme-color} {
+                        border-color: $kendo-button-border;
+
+                        &:hover,
+                        &.k-hover {
+                            color: inherit;
+                            background-color: color-mix(in srgb, k-color(on-base) 3%, transparent);
+                            border-color: color-mix( in srgb, k-color(border) 34%, transparent );
+                        }
+
+                        &:active,
+                        &.k-active,
+                        &.k-selected {
+                            color: inherit;
+                            background-color: color-mix(in srgb, k-color(on-base) 13%, transparent);
+                            border-color: $kendo-button-border;
+                        }
+                    }
+                }
 
-                &:hover,
-                &.k-hover,
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    border-color: currentColor;
+                #{k-when-default($kendo-button-default-fill-mode, "flat")}
+                &.k-button-flat {
+                    #{k-when-default($kendo-button-default-theme-color, $theme-color)}
+                    &.k-button-#{$theme-color} {
+                        &:hover,
+                        &.k-hover {
+                            background-color: color-mix(in srgb, k-color(on-base) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
+                        }
+                    }
                 }
+            }
 
-                &:focus,
-                &.k-focus {
-                    box-shadow: inset 0 0 0 $kendo-button-border-width $kendo-button-focus-border;
+            @if($theme-color == "secondary") {
+                #{k-when-default($kendo-button-default-fill-mode, "solid")}
+                &.k-button-solid {
+                    #{k-when-default($kendo-button-default-theme-color, $theme-color)}
+                    &.k-button-#{$theme-color} {
+                        border-color: currentColor;
+
+                        &:hover,
+                        &.k-hover,
+                        &:active,
+                        &.k-active,
+                        &.k-selected {
+                            border-color: currentColor;
+                        }
+
+                        &:focus,
+                        &.k-focus {
+                            box-shadow: inset 0 0 0 $kendo-button-border-width $kendo-button-focus-border;
+                        }
+                    }
                 }
             }
-        }
 
-        @if($theme-color == "light") {
-            .k-button-outline-#{$theme-color},
-            .k-button-flat-#{$theme-color},
-            .k-button-clear-#{$theme-color},
-            .k-button-link-#{$theme-color} {
-                &:focus,
-                &.k-focus {
-                    outline-color: k-color(light-on-surface);
+            @if($theme-color == "light") {
+                #{k-when-default($kendo-button-default-fill-mode, ("outline", "flat", "clear", "link"))}
+                &.k-button-outline,
+                &.k-button-flat,
+                &.k-button-clear,
+                &.k-button-link {
+                    #{k-when-default($kendo-button-default-theme-color, $theme-color)}
+                    &.k-button-#{$theme-color} {
+                        &:focus,
+                        &.k-focus {
+                            outline-color: k-color(light-on-surface);
+                        }
+                    }
                 }
             }
         }
@@ -162,24 +197,37 @@
     :where(.k-disabled),
     :where(:disabled) {
 
-        .k-button-solid {
-            color: $kendo-button-disabled-text;
-            background-color: $kendo-button-disabled-bg;
-            border-color: $kendo-button-disabled-border;
-        }
-
-        .k-button-outline {
-            color: $kendo-button-outline-disabled-text;
-            background-color: $kendo-button-outline-disabled-bg;
-            border-color: $kendo-button-outline-disabled-border;
-        }
-
-        .k-button-flat,
-        .k-button-clear,
-        .k-button-link {
-            color: $kendo-button-flat-disabled-text;
-            background-color: $kendo-button-flat-disabled-bg;
-            border-color: $kendo-button-flat-disabled-border;
+        .k-button {
+
+            @each $theme-color in $kendo-button-theme-colors {
+
+                #{k-when-default($kendo-button-default-theme-color, $theme-color)}
+                &.k-button-#{$theme-color} {
+
+                    #{k-when-default($kendo-button-default-fill-mode, "solid")}
+                    &.k-button-solid {
+                        color: $kendo-button-disabled-text;
+                        background-color: $kendo-button-disabled-bg;
+                        border-color: $kendo-button-disabled-border;
+                    }
+
+                    #{k-when-default($kendo-button-default-fill-mode, "outline")}
+                    &.k-button-outline {
+                        color: $kendo-button-outline-disabled-text;
+                        background-color: $kendo-button-outline-disabled-bg;
+                        border-color: $kendo-button-outline-disabled-border;
+                    }
+
+                    #{k-when-default($kendo-button-default-fill-mode, ("flat", "clear", "link"))}
+                    &.k-button-flat,
+                    &.k-button-clear,
+                    &.k-button-link {
+                        color: $kendo-button-flat-disabled-text;
+                        background-color: $kendo-button-flat-disabled-bg;
+                        border-color: $kendo-button-flat-disabled-border;
+                    }
+                }
+            }
         }
     }
 }

package/scss/button/_variables.scss

@@ -2,10 +2,32 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
+
+/// The default theme color of the Button.
+/// @group button
+/// @role default
+$kendo-button-default-theme-color: "base" !default;
+/// The default fill mode of the Button.
+/// @group button
+/// @role default
+$kendo-button-default-fill-mode: "solid" !default;
+/// The default roundness of the Button.
+/// @group button
+/// @role default
+$kendo-button-default-roundness: "md" !default;
+/// The default size of the Button.
+/// @group button
+/// @role default
+$kendo-button-default-size: "md" !default;
+
 /// The width of the border around the Button.
 /// @group button
 $kendo-button-border-width: var( --kendo-button-border-width, 1px ) !default;
 
+/// The border radius of the Button.
+/// @group button
+$kendo-button-border-radius: null !default;
+
 /// The horizontal padding of the small Button.
 /// @group button
 $kendo-button-sm-padding-x: var( --kendo-button-sm-padding-x, k-spacing(2) ) !default;
@@ -64,29 +86,6 @@ $kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em
 $kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
 $kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
 
-/// The sizes map for the Button.
-/// @group button
-$kendo-button-sizes: (
-    sm: (
-        padding-x: $kendo-button-sm-padding-x,
-        padding-y: $kendo-button-sm-padding-y,
-        font-size: $kendo-button-sm-font-size,
-        line-height: $kendo-button-sm-line-height
-    ),
-    md: (
-        padding-x: $kendo-button-md-padding-x,
-        padding-y: $kendo-button-md-padding-y,
-        font-size: $kendo-button-md-font-size,
-        line-height: $kendo-button-md-line-height
-    ),
-    lg: (
-        padding-x: $kendo-button-lg-padding-x,
-        padding-y: $kendo-button-lg-padding-y,
-        font-size: $kendo-button-lg-font-size,
-        line-height: $kendo-button-lg-line-height
-    )
-) !default;
-
 /// The Outline width of the focused Button.
 /// @group button
 $kendo-button-focus-outline-width: var( --kendo-button-focus-outline-width, 2px ) !default;
@@ -106,22 +105,6 @@ $kendo-button-link-focus-offset: var( --kendo-button-link-focus-offset, 0 ) !def
 /// @group button
 $kendo-button-pulsing-opacity: var( --kendo-button-pulsing-opacity, .6 ) !default;
 
-/// The theme colors map for the Button.
-/// @group button
-$kendo-button-theme-colors: (
-    "base": k-color(base),
-    "primary": k-color(primary),
-    "secondary": k-color(secondary),
-    "tertiary": k-color(tertiary),
-    "info": k-color(info),
-    "success": k-color(success),
-    "warning": k-color(warning),
-    "error": k-color(error),
-    "dark": k-color(dark),
-    "light": k-color(light),
-    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
-) !default;
-
 /// The base background of the Button.
 /// @group button
 $kendo-button-bg: var( --kendo-button-bg, k-color(base) ) !default;
@@ -201,6 +184,7 @@ $kendo-button-transition: color k-transition(rapid), background-color k-transiti
 
 @forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
     $kendo-button-border-width: $kendo-button-border-width,
+    $kendo-button-border-radius: $kendo-button-border-radius,
     $kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
     $kendo-button-md-padding-x: $kendo-button-md-padding-x,
     $kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
@@ -222,9 +206,7 @@ $kendo-button-transition: color k-transition(rapid), background-color k-transiti
     $kendo-button-lg-line-height: $kendo-button-lg-line-height,
     $kendo-button-font-family: $kendo-button-font-family,
     $kendo-button-font-weight: $kendo-button-font-weight,
-    $kendo-button-sizes: $kendo-button-sizes,
     $kendo-button-pulsing-opacity: $kendo-button-pulsing-opacity,
-    $kendo-button-theme-colors: $kendo-button-theme-colors,
     $kendo-button-bg: $kendo-button-bg,
     $kendo-button-text: $kendo-button-text,
     $kendo-button-border: $kendo-button-border,
@@ -239,5 +221,9 @@ $kendo-button-transition: color k-transition(rapid), background-color k-transiti
     $kendo-button-disabled-bg: $kendo-button-disabled-bg,
     $kendo-button-disabled-text: $kendo-button-disabled-text,
     $kendo-button-disabled-border: $kendo-button-disabled-border,
-    $kendo-button-transition: $kendo-button-transition
+    $kendo-button-transition: $kendo-button-transition,
+    $kendo-button-default-theme-color: $kendo-button-default-theme-color,
+    $kendo-button-default-fill-mode: $kendo-button-default-fill-mode,
+    $kendo-button-default-roundness: $kendo-button-default-roundness,
+    $kendo-button-default-size: $kendo-button-default-size
 );

package/scss/calendar/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/calendar/_layout.scss" as *;
 
@@ -13,6 +14,17 @@
             position: relative;
             overflow: hidden;
         }
+
+        @each $size, $size-props in $kendo-calendar-sizes {
+            $_cell-font-size: map.get($size-props, cell-font-size);
+
+            #{k-when-default($kendo-calendar-default-size, $size)}
+            &.k-calendar-#{$size} {
+                .k-calendar-td {
+                    font-size: $_cell-font-size;
+                }
+            }
+        }
     }
 
     .k-calendar-caption,
@@ -113,12 +125,4 @@
         pointer-events: none;
     }
 
-    @each $size, $size-props in $kendo-calendar-sizes {
-        $_cell-font-size: map.get($size-props, cell-font-size);
-
-        .k-calendar-#{$size} .k-calendar-td {
-            font-size: $_cell-font-size;
-        }
-    }
-
 }

package/scss/calendar/_variables.scss

@@ -1,6 +1,11 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
+/// The default size of the Calendar.
+/// @group calendar
+/// @role default
+$kendo-calendar-default-size: "md" !default;
+
 /// The width of the border around the Calendar.
 /// @group calendar
 $kendo-calendar-border-width: var( --kendo-calendar-border-width, 1px ) !default;
@@ -9,10 +14,10 @@ $kendo-calendar-border-width: var( --kendo-calendar-border-width, 1px ) !default
 $kendo-calendar-font-family: var( --kendo-calendar-font-family, var(--kendo-font-family, inherit) ) !default;
 /// The font size of the Calendar.
 /// @group calendar
-$kendo-calendar-font-size: var( --kendo-calendar-font-size, var(--kendo-font-size, inherit) ) !default;
+$kendo-calendar-font-size: null !default;
 /// The line height of the Calendar.
 /// @group calendar
-$kendo-calendar-line-height: var( --kendo-calendar-line-height, var(--kendo-line-height, normal) ) !default;
+$kendo-calendar-line-height: null !default;
 /// The border-radius of the Calendar.
 /// @group calendar
 $kendo-calendar-border-radius: var( --kendo-calendar-border-radius, 0 ) !default;
@@ -359,6 +364,7 @@ $kendo-calendar-sizes: (
 ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/calendar/_variables.scss" with (
+    $kendo-calendar-default-size: $kendo-calendar-default-size,
     $kendo-calendar-border-width: $kendo-calendar-border-width,
     $kendo-calendar-font-family: $kendo-calendar-font-family,
     $kendo-calendar-font-size: $kendo-calendar-font-size,

package/scss/card/_variables.scss

@@ -2,6 +2,11 @@
 @use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 
+/// The default theme color of the Card.
+/// @role default
+/// @group card
+$kendo-card-default-theme-color: null !default;
+
 /// The horizontal padding of the Card.
 /// @group card
 $kendo-card-padding-x: var( --kendo-card-padding-x, k-spacing(3) ) !default;
@@ -173,21 +178,8 @@ $kendo-card-deck-scroll-button-offset: calc( -1 * #{$kendo-button-border-width}
 /// @group card
 $kendo-card-callout-size: 20px !default;
 
-/// Theme colors map for the card variations.
-$kendo-card-theme-colors: (
-    "primary": k-color(primary),
-    "secondary": k-color(secondary),
-    "tertiary": k-color(tertiary),
-    "info": k-color(info),
-    "success": k-color(success),
-    "warning": k-color(warning),
-    "error": k-color(error),
-    "dark": k-color(dark),
-    "light": k-color(light),
-    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
-) !default;
-
 @forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with (
+    $kendo-card-default-theme-color: $kendo-card-default-theme-color,
     $kendo-card-padding-x: $kendo-card-padding-x,
     $kendo-card-padding-y: $kendo-card-padding-y,
     $kendo-card-border-width: $kendo-card-border-width,
@@ -238,6 +230,5 @@ $kendo-card-theme-colors: (
     $kendo-card-deck-scroll-button-radius: $kendo-card-deck-scroll-button-radius,
     $kendo-card-deck-scroll-button-offset: $kendo-card-deck-scroll-button-offset,
     $kendo-card-callout-width: $kendo-card-callout-size,
-    $kendo-card-callout-height: $kendo-card-callout-size,
-    $kendo-card-theme-colors: $kendo-card-theme-colors
+    $kendo-card-callout-height: $kendo-card-callout-size
 );

package/scss/checkbox/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *;
 
@@ -7,6 +8,20 @@
 
     @include kendo-checkbox--layout-base();
 
+    .k-checkbox {
+        // Checkbox size
+        @each $size, $size-props in $kendo-checkbox-sizes {
+            $_indicator-size: map.get( $size-props, indicator-size );
+            $_indeterminate-size: map.get( $size-props, indeterminate-size );
+
+            #{k-when-default($kendo-checkbox-default-size, $size)}
+            &.k-checkbox-#{$size} {
+                --kendo-checkbox-indicator-size: #{$_indicator-size};
+                --kendo-checkbox-indeterminate-size: #{$_indeterminate-size};
+            }
+        }
+    }
+
     .k-checkbox::before {
         @if $kendo-checkbox-indicator-type == "pseudo" {
             content: "";
@@ -137,15 +152,4 @@
             outline: none !important; // stylelint-disable-line declaration-no-important
         }
     }
-
-     // Checkbox size
-    @each $size, $size-props in $kendo-checkbox-sizes {
-        $_indicator-size: map.get( $size-props, indicator-size );
-        $_indeterminate-size: map.get( $size-props, indeterminate-size );
-
-        .k-checkbox-#{$size} {
-            --kendo-checkbox-indicator-size: #{$_indicator-size};
-            --kendo-checkbox-indeterminate-size: #{$_indeterminate-size};
-        }
-    }
 }

package/scss/checkbox/_variables.scss

@@ -182,6 +182,16 @@ $kendo-checkbox-disabled-indeterminate-text: var( --kendo-checkbox-disabled-inde
 /// @group checkbox
 $kendo-checkbox-disabled-indeterminate-border: var( --kendo-checkbox-disabled-indeterminate-border, $kendo-checkbox-disabled-border ) !default;
 
+/// The default size of the Checkbox.
+/// @group checkbox
+/// @role default
+$kendo-checkbox-default-size: "md" !default;
+
+/// The default border radius of the Checkbox.
+/// @group checkbox
+/// @role default
+$kendo-checkbox-default-roundness: "md" !default;
+
 // Checkbox indicator
 
 /// The type of the CheckBox indicator.
@@ -294,5 +304,7 @@ $kendo-checkbox-ripple-opacity: var( --kendo-checkbox-ripple-opacity, .25 ) !def
     $kendo-checkbox-list-item-padding-x: $kendo-checkbox-list-item-padding-x,
     $kendo-checkbox-list-item-padding-y: $kendo-checkbox-list-item-padding-y,
     $kendo-checkbox-ripple-bg: $kendo-checkbox-ripple-bg,
-    $kendo-checkbox-ripple-opacity: $kendo-checkbox-ripple-opacity
+    $kendo-checkbox-ripple-opacity: $kendo-checkbox-ripple-opacity,
+    $kendo-checkbox-default-size: $kendo-checkbox-default-size,
+    $kendo-checkbox-default-roundness: $kendo-checkbox-default-roundness
 );