@progress/kendo-theme-core 12.3.1-dev.9 → 13.0.0-dev.1

package/scss/components/menu/_layout.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "../../functions/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "./variables.scss" as *;
@@ -190,78 +192,46 @@
             border-style: solid;
             display: block;
         }
-    }
-    .k-menu-popup .k-menu-group {
-        position: relative;
-    }
-
-
-    // Sizes
-    .k-menu-group-sm {
-        font-size: $kendo-menu-popup-sm-font-size;
-        line-height: $kendo-menu-popup-sm-line-height;
-
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $kendo-menu-popup-sm-font-size;
-            line-height: $kendo-menu-popup-sm-line-height;
-        }
 
-        .k-menu-link {
-            padding-block: $kendo-menu-popup-sm-item-padding-y;
-            padding-inline: $kendo-menu-popup-sm-item-padding-x;
-            padding-inline-end: $kendo-menu-popup-sm-item-padding-end;
+        // Sizes
+        @each $size, $size-props in $kendo-menu-group-sizes {
+            $_font-size: map.get( $size-props, font-size);
+            $_line-height: map.get( $size-props, line-height);
+            $_item-padding-y: map.get( $size-props, item-padding-y);
+            $_item-padding-x: map.get( $size-props, item-padding-x);
+            $_item-padding-end: map.get( $size-props, item-padding-end);
+            $_item-icon-margin-start: map.get( $size-props, item-icon-margin-start);
+            $_item-icon-margin-end: map.get( $size-props, item-icon-margin-end);
+
+            #{k-when-default($kendo-menu-group-default-size, $size)}
+            &.k-menu-group-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                // jquery popup overrides those
+                .k-menu-item {
+                    font-size: $_font-size;
+                    line-height: $_line-height;
+                }
+
+                .k-menu-link {
+                    padding-block: $_item-padding-y;
+                    padding-inline: $_item-padding-x;
+                    padding-inline-end: $_item-padding-end;
+                }
+
+                .k-menu-expand-arrow {
+                    margin-inline-start: $_item-icon-margin-start;
+                    margin-inline-end: $_item-icon-margin-end;
+                }
+            }
         }
 
-        .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end;
-        }
     }
-    .k-menu-group-md {
-        font-size: $kendo-menu-popup-md-font-size;
-        line-height: $kendo-menu-popup-md-line-height;
-
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $kendo-menu-popup-md-font-size;
-            line-height: $kendo-menu-popup-md-line-height;
-        }
-
-        .k-menu-link {
-            padding-block: $kendo-menu-popup-md-item-padding-y;
-            padding-inline: $kendo-menu-popup-md-item-padding-x;
-            padding-inline-end: $kendo-menu-popup-md-item-padding-end;
-        }
-
-        .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
-        }
-    }
-    .k-menu-group-lg {
-        font-size: $kendo-menu-popup-lg-font-size;
-        line-height: $kendo-menu-popup-lg-line-height;
-
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $kendo-menu-popup-lg-font-size;
-            line-height: $kendo-menu-popup-lg-line-height;
-        }
-
-        .k-menu-link {
-            padding-block: $kendo-menu-popup-lg-item-padding-y;
-            padding-inline: $kendo-menu-popup-lg-item-padding-x;
-            padding-inline-end: $kendo-menu-popup-lg-item-padding-end;
-        }
-
-        .k-menu-expand-arrow {
-            margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start;
-            margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end;
-        }
+    .k-menu-popup .k-menu-group {
+        position: relative;
     }
 
-
     // Context menu
     .k-popups-wrapper {
         position: relative;
@@ -288,10 +258,6 @@
     }
     .k-context-menu-popup {
         z-index: k-z-index("popup");
-
-        .k-context-menu {
-            border-width: 0;
-        }
     }
     .k-popup .k-context-menu,
     .k-context-menu-popup .k-context-menu {

package/scss/components/menu/_variables.scss

@@ -1,5 +1,7 @@
 // Menu
 
+$kendo-menu-group-default-size: null !default;
+
 $kendo-menu-border-width: null !default;
 
 $kendo-menu-font-family: null !default;
@@ -108,6 +110,38 @@ $kendo-menu-popup-lg-item-icon-margin-end: null !default;
 
 $kendo-menu-popup-item-spacing: null !default;
 
+/// The sizes map of the Menu group.
+/// @group menu
+$kendo-menu-group-sizes: (
+    sm: (
+        font-size: $kendo-menu-popup-sm-font-size,
+        line-height: $kendo-menu-popup-sm-line-height,
+        item-padding-y: $kendo-menu-popup-sm-item-padding-y,
+        item-padding-x: $kendo-menu-popup-sm-item-padding-x,
+        item-padding-end: $kendo-menu-popup-sm-item-padding-end,
+        item-icon-margin-start: $kendo-menu-popup-sm-item-icon-margin-start,
+        item-icon-margin-end: $kendo-menu-popup-sm-item-icon-margin-end
+    ),
+    md: (
+        font-size: $kendo-menu-popup-md-font-size,
+        line-height: $kendo-menu-popup-md-line-height,
+        item-padding-y: $kendo-menu-popup-md-item-padding-y,
+        item-padding-x: $kendo-menu-popup-md-item-padding-x,
+        item-padding-end: $kendo-menu-popup-md-item-padding-end,
+        item-icon-margin-start: $kendo-menu-popup-md-item-icon-margin-start,
+        item-icon-margin-end: $kendo-menu-popup-md-item-icon-margin-end
+    ),
+    lg: (
+        font-size: $kendo-menu-popup-lg-font-size,
+        line-height: $kendo-menu-popup-lg-line-height,
+        item-padding-y: $kendo-menu-popup-lg-item-padding-y,
+        item-padding-x: $kendo-menu-popup-lg-item-padding-x,
+        item-padding-end: $kendo-menu-popup-lg-item-padding-end,
+        item-icon-margin-start: $kendo-menu-popup-lg-item-icon-margin-start,
+        item-icon-margin-end: $kendo-menu-popup-lg-item-icon-margin-end
+    )
+) !default;
+
 $kendo-menu-popup-item-bg: null !default;
 $kendo-menu-popup-item-text: null !default;
 $kendo-menu-popup-item-border: null !default;

package/scss/components/messagebox/_theme.scss

@@ -7,20 +7,23 @@
 
 @mixin kendo-messagebox--theme-base() {
 
-    @each $color-name, $color in $kendo-message-box-theme-colors {
-        .k-messagebox.k-messagebox-#{$color-name} {
-            @if $color-name == "inverse" {
-                @include fill(
-                    k-color(dark-on-subtle),
-                    k-color(dark-subtle),
-                    k-color(dark-hover)
-                );
-            } @else {
-                @include fill(
-                    k-color(#{$color-name}-on-subtle),
-                    k-color(#{$color-name}-subtle),
-                    k-color(#{$color-name}-emphasis)
-                );
+    @each $color-name in $kendo-message-box-theme-colors {
+        .k-messagebox {
+            #{k-when-default($kendo-message-box-default-theme-color, $color-name)}
+            &.k-messagebox-#{$color-name} {
+                @if $color-name == "inverse" {
+                    @include fill(
+                        k-color(dark-on-subtle),
+                        k-color(dark-subtle),
+                        k-color(dark-hover)
+                    );
+                } @else {
+                    @include fill(
+                        k-color(#{$color-name}-on-subtle),
+                        k-color(#{$color-name}-subtle),
+                        k-color(#{$color-name}-emphasis)
+                    );
+                }
             }
         }
     }

package/scss/components/messagebox/_variables.scss

@@ -1,4 +1,7 @@
 // Message box
+
+$kendo-message-box-default-theme-color: null !default;
+
 $kendo-message-box-margin: null !default;
 $kendo-message-box-padding-x: null !default;
 $kendo-message-box-padding-y: null !default;
@@ -14,4 +17,6 @@ $kendo-message-box-border-level: null !default;
 $kendo-message-box-link-font-style: null !default;
 $kendo-message-box-link-text-decoration: null !default;
 
-$kendo-message-box-theme-colors: null !default;
+/// The theme colors map of the MessageBox.
+/// @group message-box
+$kendo-message-box-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;

package/scss/components/notification/_theme.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-notification--theme-base() {
@@ -12,15 +13,16 @@
             $kendo-notification-border
         );
         @include box-shadow( $kendo-notification-shadow );
-    }
 
-    @each $name, $props in $kendo-notification-theme {
-        .k-notification-#{$name} {
-            @include fill(
-                map.get( $props, color ),
-                map.get( $props, background-color ),
-                map.get( $props, border )
-            );
+        @each $name, $props in $kendo-notification-theme {
+            #{k-when-default($kendo-notification-default-theme-color, $name)}
+            &.k-notification-#{$name} {
+                @include fill(
+                    map.get( $props, color ),
+                    map.get( $props, background-color ),
+                    map.get( $props, border )
+                );
+            }
         }
     }
 

package/scss/components/notification/_variables.scss

@@ -1,11 +1,13 @@
 // Notification
 
+$kendo-notification-default-theme-color: null !default;
+
 $kendo-notification-group-gap: null !default;
 
 $kendo-notification-padding-x: null !default;
 $kendo-notification-padding-y: null !default;
 $kendo-notification-border-width: null !default;
-$kendo-notification-border-radius: k-border-radius(md)!default;
+$kendo-notification-border-radius: null !default;
 $kendo-notification-font-family: null !default;
 $kendo-notification-font-size: null !default;
 $kendo-notification-line-height: null !default;
@@ -15,22 +17,7 @@ $kendo-notification-bg: null !default;
 $kendo-notification-text: null !default;
 $kendo-notification-border: null !default;
 $kendo-notification-shadow: null !default;
-
 $kendo-notification-icon-spacing: null !default;
 
-@function notification-theme( $colors ) {
-    $_theme: ();
-
-    @each $name, $color in $colors {
-        $_theme: map.merge(( $name: (
-            color: k-color(on-#{$name}),
-            background-color: $color,
-            border: $color,
-        )), $_theme );
-    }
-
-    @return $_theme;
-}
-
 $kendo-notification-theme-colors: null !default;
 $kendo-notification-theme: null !default;

package/scss/components/otp/_layout.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "./_variables.scss" as *;
-
+@use "../../functions/index.scss" as *;
 @use "../input/_variables.scss" as *;
 
 @mixin kendo-otp--layout-base() {
@@ -15,25 +15,28 @@
             text-align: center;
             padding-inline: 0;
         }
-    }
 
-    @each $size, $size-props in $kendo-otp-sizes {
-        $_gap: map.get($size-props, gap);
-        $_separator-padding-x: map.get($size-props, separator-padding-x);
-        $_input-width: map.get($size-props, input-width);
+        @each $size, $size-props in $kendo-otp-sizes {
+            $_gap: map.get($size-props, gap);
+            $_separator-padding-x: map.get($size-props, separator-padding-x);
+            $_input-width: map.get($size-props, input-width);
 
-        .k-otp-#{$size} {
-            gap: $_gap;
+            #{k-when-default($kendo-input-default-size, $size)}
+            &.k-otp-#{$size} {
+                gap: $_gap;
 
-            .k-otp-input {
-                min-width: $_input-width;
-            }
+                .k-otp-input {
+                    min-width: $_input-width;
+                }
 
-            .k-otp-separator:not(:empty) {
-                padding-inline: $_separator-padding-x;
+                .k-otp-separator:not(:empty) {
+                    padding-inline: $_separator-padding-x;
+                }
             }
         }
     }
+
+
 }
 
 @mixin kendo-otp--layout() {

package/scss/components/otp/_variables.scss

@@ -12,4 +12,22 @@ $kendo-otp-sm-input-width: null !default;
 $kendo-otp-md-input-width: null !default;
 $kendo-otp-lg-input-width: null !default;
 
-$kendo-otp-sizes: null !default;
+/// The sizes map of the OTPInput.
+/// @group otp
+$kendo-otp-sizes: (
+    sm: (
+        gap: $kendo-otp-sm-gap,
+        separator-padding-x: $kendo-otp-sm-separator-padding-x,
+        input-width: $kendo-otp-sm-input-width
+    ),
+    md: (
+        gap: $kendo-otp-md-gap,
+        separator-padding-x: $kendo-otp-md-separator-padding-x,
+        input-width: $kendo-otp-md-input-width
+    ),
+    lg: (
+        gap: $kendo-otp-lg-gap,
+        separator-padding-x: $kendo-otp-lg-separator-padding-x,
+        input-width: $kendo-otp-lg-input-width
+    )
+) !default;

package/scss/components/overlay/_theme.scss

@@ -1,16 +1,24 @@
+@use "../../color-system/_functions.scss" as *;
+@use "../../functions/default.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-overlay--theme-base() {
-
     // Overlay
     .k-overlay {
+        @each $name in $kendo-overlay-theme-colors {
+            #{k-when-default($kendo-overlay-default-theme-color, $name)}
+            &.k-overlay-#{$name} {
+                background-color: k-color(#{$name});
+            }
+        }
+
         background-color: $kendo-overlay-bg;
     }
 
-
-    @each $name, $color in $kendo-overlay-theme-colors {
+    // Where single k-overlay-{color} is used as a theme element
+    @each $name in $kendo-overlay-theme-colors {
         .k-overlay-#{$name} {
-            background-color: $color;
+            background-color: k-color(#{$name});
         }
     }
 

package/scss/components/overlay/_variables.scss

@@ -1,4 +1,8 @@
-$kendo-overlay-theme-colors: null !default;
+$kendo-overlay-default-theme-color: null !default;
 
 $kendo-overlay-bg: null !default;
 $kendo-overlay-opacity: null !default;
+
+/// The theme colors map of the Overlay.
+/// @group overlay
+$kendo-overlay-theme-colors: ("dark", "light", "inverse") !default;

package/scss/components/pager/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../../z-index/index.scss" as *;
 
@@ -30,6 +31,33 @@
         *::after {
             box-sizing: border-box;
         }
+
+        // Pager sizes
+        @each $size, $size-props in $kendo-pager-sizes {
+            $_padding-x: map.get($size-props, padding-x);
+            $_padding-y: map.get($size-props, padding-y);
+            $_item-group-spacing: map.get($size-props, item-group-spacing);
+            $_item-min-width: map.get($size-props, item-min-width);
+            $_pager-dropdown-width: map.get($size-props, pager-dropdown-width);
+
+            #{k-when-default($kendo-pager-default-size, $size)}
+            &.k-pager-#{$size} {
+                padding-inline: $_padding-x;
+                padding-block: $_padding-y;
+                gap: $_item-group-spacing;
+
+                .k-pager-numbers-wrap {
+                    .k-button {
+                        min-width: $_item-min-width;
+                    }
+
+                    .k-pager-input {
+                        margin-inline-start: $_item-group-spacing;
+                        margin-inline-end: $_item-group-spacing;
+                    }
+                }
+            }
+        }
     }
 
     .k-pager-responsive {
@@ -79,6 +107,10 @@
             cursor: inherit;
             z-index: k-z-index("base", 2);
         }
+
+        .k-button {
+            border-radius: 0;
+        }
     }
 
 
@@ -133,32 +165,6 @@
         order: 10;
     }
 
-    // Pager sizes
-    @each $size, $size-props in $kendo-pager-sizes {
-        $_padding-x: map.get($size-props, padding-x);
-        $_padding-y: map.get($size-props, padding-y);
-        $_item-group-spacing: map.get($size-props, item-group-spacing);
-        $_item-min-width: map.get($size-props, item-min-width);
-        $_pager-dropdown-width: map.get($size-props, pager-dropdown-width);
-
-        .k-pager-#{$size} {
-            padding-inline: $_padding-x;
-            padding-block: $_padding-y;
-            gap: $_item-group-spacing;
-
-            .k-pager-numbers-wrap {
-                .k-button {
-                    min-width: $_item-min-width;
-                }
-
-                .k-pager-input {
-                    margin-inline-start: $_item-group-spacing;
-                    margin-inline-end: $_item-group-spacing;
-                }
-            }
-        }
-    }
-
     .k-pager-sizes {
         .k-dropdownlist {
             min-width: $kendo-pager-dropdown-width;

package/scss/components/pager/_variables.scss

@@ -1,5 +1,7 @@
 // Pager
 
+$kendo-pager-default-size: null !default;
+
 $kendo-pager-sm-padding-x: null !default;
 $kendo-pager-md-padding-x: null !default;
 $kendo-pager-lg-padding-x: null !default;
@@ -33,4 +35,25 @@ $kendo-pager-input-width: null !default;
 
 $kendo-pager-dropdown-width: null !default;
 
-$kendo-pager-sizes: null !default;
+/// The sizes map of the Pager.
+/// @group pager
+$kendo-pager-sizes: (
+    sm: (
+        padding-x: $kendo-pager-sm-padding-x,
+        padding-y: $kendo-pager-sm-padding-y,
+        item-group-spacing: $kendo-pager-sm-item-group-spacing,
+        item-min-width: $kendo-pager-sm-item-min-width
+    ),
+    md: (
+        padding-x: $kendo-pager-md-padding-x,
+        padding-y: $kendo-pager-md-padding-y,
+        item-group-spacing: $kendo-pager-md-item-group-spacing,
+        item-min-width: $kendo-pager-md-item-min-width
+    ),
+    lg: (
+        padding-x: $kendo-pager-lg-padding-x,
+        padding-y: $kendo-pager-lg-padding-y,
+        item-group-spacing: $kendo-pager-lg-item-group-spacing,
+        item-min-width: $kendo-pager-lg-item-min-width
+    )
+) !default;

package/scss/components/radio/_layout.scss

@@ -4,6 +4,7 @@
 @use "../../z-index/index.scss" as *;
 @use "../../motion/index.scss" as *;
 @use "../../_variables.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-radio--layout-base() {
@@ -28,6 +29,23 @@
         cursor: pointer;
         -webkit-appearance: none;
         transition: background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid);
+
+        // Radio size
+        @each $size, $size-props in $kendo-radio-sizes {
+        $_size: map.get( $size-props, size );
+        $_glyph-size: map.get( $size-props, glyph-size );
+        $_ripple-size: map.get( $size-props, ripple-size );
+
+            #{k-when-default($kendo-radio-default-size, $size)}
+            &.k-radio-#{$size} {
+                width: $_size;
+                height: $_size;
+
+                &::before {
+                    font-size: $_glyph-size;
+                }
+            }
+        }
     }
 
 
@@ -196,25 +214,16 @@
         }
     }
 
+    .k-ripple-container .k-radio {
+        @each $size, $size-props in $kendo-radio-sizes {
+            $_ripple-size: map.get( $size-props, ripple-size );
 
-    // Radio size
-    @each $size, $size-props in $kendo-radio-sizes {
-        $_size: map.get( $size-props, size );
-        $_glyph-size: map.get( $size-props, glyph-size );
-        $_ripple-size: map.get( $size-props, ripple-size );
-
-        .k-radio-#{$size} {
-            width: $_size;
-            height: $_size;
-
-            &::before {
-                font-size: $_glyph-size;
-            }
-        }
-        .k-ripple-container {
-            .k-radio-#{$size}::after {
-                width: $_ripple-size;
-                height: $_ripple-size;
+            #{k-when-default($kendo-radio-default-size, $size)}
+            &.k-radio-#{$size} {
+                &::after {
+                    width: $_ripple-size;
+                    height: $_ripple-size;
+                }
             }
         }
     }

package/scss/components/radio/_variables.scss

@@ -15,7 +15,25 @@ $kendo-radio-sm-ripple-size: null !default;
 $kendo-radio-md-ripple-size: null !default;
 $kendo-radio-lg-ripple-size: null !default;
 
-$kendo-radio-sizes: null !default;
+/// The sizes map of the RadioButton.
+/// @group radio
+$kendo-radio-sizes: (
+    sm: (
+        size: $kendo-radio-sm-size,
+        glyph-size: $kendo-radio-sm-glyph-size,
+        ripple-size: $kendo-radio-sm-ripple-size
+    ),
+    md: (
+        size: $kendo-radio-md-size,
+        glyph-size: $kendo-radio-md-glyph-size,
+        ripple-size: $kendo-radio-md-ripple-size
+    ),
+    lg: (
+        size: $kendo-radio-lg-size,
+        glyph-size: $kendo-radio-lg-glyph-size,
+        ripple-size: $kendo-radio-lg-ripple-size
+    )
+) !default;
 
 $kendo-radio-bg: null !default;
 $kendo-radio-text: null !default;
@@ -74,3 +92,5 @@ $kendo-radio-list-item-padding-y: null !default;
 
 $kendo-radio-ripple-bg: null !default;
 $kendo-radio-ripple-opacity: null !default;
+
+$kendo-radio-default-size: null !default;

package/scss/components/scheduler/_layout.scss

@@ -387,7 +387,6 @@
     // Appointments
     kendo-scheduler .k-event,
     .k-event {
-        @include border-radius( k-border-radius(md) );
         min-height: $kendo-scheduler-event-min-height;
         box-sizing: border-box;
         border-width: 0;