@progress/kendo-theme-fluent 13.2.0-dev.3 → 14.0.0-dev.0

package/scss/core/color-system/_swatch.scss

@@ -107,30 +107,6 @@ $_default-colors: (
     on-error: #{"oklch(from var(--kendo-color-error) clamp(0, (0.6 - l) * 99999, 1) 0 h)"},
     error-on-surface: #{"oklch(from var(--kendo-color-error) l c h)"},
 
-    // Light
-    light-subtle: #{"oklch(from var(--kendo-color-light) calc(l + 0.060) c h)"},
-    light-subtle-hover: #{"oklch(from var(--kendo-color-light) calc(l + 0.030) c h)"},
-    light-subtle-active: #{"oklch(from var(--kendo-color-light) l c h)"},
-    light: oklch(94.01% 0 0deg),
-    light-hover: #{"oklch(from var(--kendo-color-light) calc(l + 0.030) c h)"},
-    light-active: #{"oklch(from var(--kendo-color-light) calc(l + 0.015) c h)"},
-    light-emphasis: #{"oklch(from var(--kendo-color-light) calc(l - 0.033) c h)"},
-    light-on-subtle: oklch(49.26% 0 0deg),
-    on-light: oklch(26.03% 0 0deg),
-    light-on-surface: oklch(100% 0 0deg),
-
-    // Dark
-    dark-subtle: oklch(0% 0 0deg),
-    dark-subtle-hover: #{"oklch(from var(--kendo-color-dark) l c h)"},
-    dark-subtle-active: #{"oklch(from var(--kendo-color-dark) calc(l + 0.061) c h)"},
-    dark: oklch(26.03% 0 0deg),
-    dark-hover: #{"oklch(from var(--kendo-color-dark) calc(l + 0.119) c h)"},
-    dark-active: #{"oklch(from var(--kendo-color-dark) calc(l + 0.061) c h)"},
-    dark-emphasis: #{"oklch(from var(--kendo-color-dark) calc(l + 0.232) c h)"},
-    dark-on-subtle: oklch(100% 0 0deg),
-    on-dark: oklch(100% 0 0deg),
-    dark-on-surface: oklch(49.26% 0 0deg),
-
     // Inverse
     inverse-subtle: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.232) c h)"},
     inverse-subtle-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.373) c h)"},
@@ -327,38 +303,6 @@ $_default-colors: (
 /// @prop {Color} on-error - The text color variable for content on error.
 /// @prop {Color} error-on-surface - The text color variable for content on surface.
 ///
-/// @subgroup {light}
-/// [light-subtle, light-subtle-hover, light-subtle-active,
-/// light, light-hover, light-active, light-emphasis,
-/// light-on-subtle, on-light, light-on-surface]
-/// The Light variable group.
-/// @prop {Color} light-subtle - The light subtle background color variable.
-/// @prop {Color} light-subtle-hover - The light subtle background color variable for the hover state.
-/// @prop {Color} light-subtle-active - The light subtle background color variable for the active state.
-/// @prop {Color} light - The light background color variable.
-/// @prop {Color} light-hover - The light background color variable for the hover state.
-/// @prop {Color} light-active - The light background color variable for the active state.
-/// @prop {Color} light-emphasis - The emphasized light color variable.
-/// @prop {Color} light-on-subtle - The text color variable for content on light subtle.
-/// @prop {Color} on-light - The text color variable for content on light.
-/// @prop {Color} light-on-surface - The text color variable for content on surface.
-///
-/// @subgroup {dark}
-/// [dark-subtle, dark-subtle-hover, dark-subtle-active,
-/// dark, dark-hover, dark-active, dark-emphasis,
-/// dark-on-subtle, on-dark, dark-on-surface]
-/// The Dark variable group.
-/// @prop {Color} dark-subtle - The dark subtle background color variable.
-/// @prop {Color} dark-subtle-hover - The dark subtle background color variable for the hover state.
-/// @prop {Color} dark-subtle-active - The dark subtle background color variable for the active state.
-/// @prop {Color} dark - The dark background color variable.
-/// @prop {Color} dark-hover - The dark background color variable for the hover state.
-/// @prop {Color} dark-active - The dark background color variable for the active state.
-/// @prop {Color} dark-emphasis - The emphasized dark color variable.
-/// @prop {Color} dark-on-subtle - The text color variable for content on dark subtle.
-/// @prop {Color} on-dark - The text color variable for content on dark.
-/// @prop {Color} dark-on-surface - The text color variable for content on surface.
-///
 /// @subgroup {inverse}
 /// [inverse-subtle, inverse-subtle-hover, inverse-subtle-active,
 /// inverse, inverse-hover, inverse-active, inverse-emphasis,

package/scss/dataviz/_variables.scss

@@ -192,6 +192,9 @@ $kendo-series-30: $kendo-series-f-darker !default;
 /// The border width of the chart component.
 /// @group charts
 $kendo-chart-border-width: var( --kendo-chart-border-width, 0px ) !default;
+/// The border radius of the chart component.
+/// @group charts
+$kendo-chart-border-radius: null !default;
 /// The font-family of the chart component.
 /// @group charts
 $kendo-chart-font-family: var( --kendo-chart-font-family, var(--kendo-font-family) ) !default;
@@ -338,6 +341,9 @@ $kendo-treemap-padding-x: var( --kendo-treemap-padding-x, k-spacing(1) ) !defaul
 /// The vertical padding of the treemap.
 /// @group charts
 $kendo-treemap-padding-y: var( --kendo-treemap-padding-y, k-spacing(0.5) ) !default;
+/// The border radius of the TreeMap.
+/// @group charts
+$kendo-treemap-border-radius: null !default;
 /// The background color of the treemap.
 /// @group charts
 $kendo-treemap-bg: var( --kendo-treemap-bg, k-color(surface-alt) ) !default;
@@ -447,6 +453,7 @@ $kendo-gauge-track-bg: k-color(base-emphasis) !default;
     $kendo-series-29: $kendo-series-29,
     $kendo-series-30: $kendo-series-30,
     $kendo-chart-border-width: $kendo-chart-border-width,
+    $kendo-chart-border-radius: $kendo-chart-border-radius,
     $kendo-chart-font-family: $kendo-chart-font-family,
     $kendo-chart-font-size: $kendo-chart-font-size,
     $kendo-chart-line-height: $kendo-chart-line-height,
@@ -483,6 +490,7 @@ $kendo-gauge-track-bg: k-color(base-emphasis) !default;
     $kendo-treemap-line-height: $kendo-treemap-line-height,
     $kendo-treemap-padding-x: $kendo-treemap-padding-x,
     $kendo-treemap-padding-y: $kendo-treemap-padding-y,
+    $kendo-treemap-border-radius: $kendo-treemap-border-radius,
     $kendo-chart-overlay-bg: $kendo-chart-overlay-bg,
     $kendo-chart-no-data-font-size: $kendo-chart-no-data-font-size,
     $kendo-chart-no-data-font-weight: $kendo-chart-no-data-font-weight,

package/scss/dialog/_variables.scss

@@ -1,11 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
-/// The default theme color of the Dialog.
-/// @group dialog
-/// @role default
-$kendo-dialog-default-theme-color: null !default;
-
 /// The background color of the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-bg: var( --kendo-dialog-titlebar-bg, k-color(surface-alt) ) !default;
@@ -38,7 +33,6 @@ $kendo-dialog-bg: var( --kendo-dialog-bg, k-color(surface-alt) ) !default;
 $kendo-dialog-shadow: var( --kendo-dialog-shadow, var( --kendo-elevation-5, none ) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with (
-    $kendo-dialog-default-theme-color: $kendo-dialog-default-theme-color,
     $kendo-dialog-titlebar-bg: $kendo-dialog-titlebar-bg,
     $kendo-dialog-titlebar-text: $kendo-dialog-titlebar-text,
     $kendo-dialog-titlebar-border: $kendo-dialog-titlebar-border,

package/scss/dock-manager/_variables.scss

@@ -10,6 +10,9 @@ $kendo-dock-manager-border-style: var( --kendo-dock-manager-border-style, solid
 /// The color of the border around the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-border: var( --kendo-dock-manager-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
+/// The border radius of the DockManager.
+/// @group dock-manager
+$kendo-dock-manager-border-radius: var( --kendo-dock-manager-border-radius, null ) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
@@ -122,6 +125,7 @@ $kendo-dock-manager-dock-preview-border: var( --kendo-dock-manager-dock-preview-
     $kendo-dock-manager-border-width: $kendo-dock-manager-border-width,
     $kendo-dock-manager-border-style: $kendo-dock-manager-border-style,
     $kendo-dock-manager-border: $kendo-dock-manager-border,
+    $kendo-dock-manager-border-radius: $kendo-dock-manager-border-radius,
     $kendo-dock-manager-pane-header-padding-y: $kendo-dock-manager-pane-header-padding-y,
     $kendo-dock-manager-pane-header-padding-x: $kendo-dock-manager-pane-header-padding-x,
     $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-pane-header-border-width,

package/scss/dropzone/_variables.scss

@@ -10,6 +10,9 @@ $kendo-dropzone-padding-y: var( --kendo-dropzone-padding-y, #{k-spacing(2)} ) !d
 /// The border width of the DropZone.
 /// @group dropzone
 $kendo-dropzone-border-width: var( --kendo-dropzone-border-width, 1px ) !default;
+/// The border radius of the DropZone.
+/// @group dropzone
+$kendo-dropzone-border-radius: null !default;
 /// The minimum height of the DropZone.
 /// @group dropzone
 $kendo-dropzone-min-height: var( --kendo-dropzone-min-height, 220px ) !default;
@@ -74,6 +77,7 @@ $kendo-dropzone-note-text: var( --kendo-dropzone-note-text, #{k-color(subtle)} )
     $kendo-dropzone-padding-x: $kendo-dropzone-padding-x,
     $kendo-dropzone-padding-y: $kendo-dropzone-padding-y,
     $kendo-dropzone-border-width: $kendo-dropzone-border-width,
+    $kendo-dropzone-border-radius: $kendo-dropzone-border-radius,
     $kendo-dropzone-min-height: $kendo-dropzone-min-height,
     $kendo-dropzone-font-family: $kendo-dropzone-font-family,
     $kendo-dropzone-font-size: $kendo-dropzone-font-size,

package/scss/editor/_variables.scss

@@ -5,6 +5,9 @@
 /// The width of the border around the Еditor.
 /// @group editor
 $kendo-editor-border-width: var( --kendo-editor-border-width, 1px ) !default;
+/// The border radius of the Editor.
+/// @group editor
+$kendo-editor-border-radius: var( --kendo-editor-border-radius, null ) !default;
 /// The font family of the Еditor.
 /// @group editor
 $kendo-editor-font-family: var( --kendo-editor-font-family, var(--kendo-font-family) ) !default;
@@ -89,6 +92,7 @@ $kendo-editor-ct-popup-border: var( --kendo-editor-ct-popup-border, #{color-mix(
 
 @forward "@progress/kendo-theme-core/scss/components/editor/_variables.scss" with (
     $kendo-editor-border-width: $kendo-editor-border-width,
+    $kendo-editor-border-radius: $kendo-editor-border-radius,
     $kendo-editor-font-family: $kendo-editor-font-family,
     $kendo-editor-font-size: $kendo-editor-font-size,
     $kendo-editor-line-height: $kendo-editor-line-height,

package/scss/expansion-panel/_variables.scss

@@ -7,6 +7,9 @@ $kendo-expander-margin-y: var( --kendo-expander-margin-y, k-spacing(2) ) !defaul
 /// The width of the border around the ExpansionPanel.
 /// @group expander
 $kendo-expander-border-width: var( --kendo-expander-border-width, 1px ) !default;
+/// The border radius of the ExpansionPanel.
+/// @group expander
+$kendo-expander-border-radius: null !default;
 /// The font family of the ExpansionPanel.
 /// @group expander
 $kendo-expander-font-family: var( --kendo-expander-font-family, var(--kendo-font-family) ) !default;
@@ -70,6 +73,12 @@ $kendo-expander-header-bg: var( --kendo-expander-header-bg, inherit ) !default;
 /// @group expander
 $kendo-expander-header-hover-bg: var( --kendo-expander-header-hover-bg, k-color(base-hover) ) !default;
 
+/// The font weight of the ExpansionPanel title.
+/// @group expander
+$kendo-expander-title-font-weight: null !default;
+/// The text transform of the ExpansionPanel title.
+/// @group expander
+$kendo-expander-title-text-transform: null !default;
 /// The text color of the ExpansionPanel title.
 /// @group expander
 $kendo-expander-title-text: var( --kendo-expander-title-text, k-color(on-app-surface) ) !default;
@@ -94,6 +103,7 @@ $kendo-expander-content-padding-y: var( --kendo-expander-content-padding-y, k-sp
 
 @forward "@progress/kendo-theme-core/scss/components/expansion-panel/_variables.scss" with (
     $kendo-expander-border-width: $kendo-expander-border-width,
+    $kendo-expander-border-radius: $kendo-expander-border-radius,
     $kendo-expander-font-family: $kendo-expander-font-family,
     $kendo-expander-font-size: $kendo-expander-font-size,
     $kendo-expander-line-height: $kendo-expander-line-height,
@@ -106,6 +116,8 @@ $kendo-expander-content-padding-y: var( --kendo-expander-content-padding-y, k-sp
     $kendo-expander-header-text: $kendo-expander-header-text,
     $kendo-expander-header-bg: $kendo-expander-header-bg,
     $kendo-expander-header-hover-bg: $kendo-expander-header-hover-bg,
+    $kendo-expander-title-font-weight: $kendo-expander-title-font-weight,
+    $kendo-expander-title-text-transform: $kendo-expander-title-text-transform,
     $kendo-expander-title-text: $kendo-expander-title-text,
     $kendo-expander-header-sub-title-text: $kendo-expander-header-sub-title-text,
     $kendo-expander-indicator-margin-x: $kendo-expander-indicator-margin-x,

package/scss/fab/_theme.scss

@@ -47,9 +47,8 @@
 
         #{k-when-default($kendo-fab-default-fill-mode, "solid")}
         &.k-fab-solid {
-            #{k-when-default($kendo-fab-default-theme-color, ("warning", "light"))}
-            &.k-fab-warning,
-            &.k-fab-light {
+            #{k-when-default($kendo-fab-default-theme-color, "warning")}
+            &.k-fab-warning {
                 &:focus::after,
                 &.k-focus::after {
                     outline-color: k-color(app-surface);

package/scss/file-box/_variables.scss

@@ -11,6 +11,9 @@ $kendo-file-box-padding-y: var(--kendo-file-box-padding-y, k-spacing(1) ) !defau
 /// The spacing between the elements of the File Box.
 /// @group file-box
 $kendo-file-box-gap: var(--kendo-file-box-gap, k-spacing(1) ) !default;
+/// The spacing between the elements of the File Box info section.
+/// @group file-box
+$kendo-file-box-info-gap: var(--kendo-file-box-info-gap, null ) !default;
 /// The minimum width of the File Box.
 /// @group file-box
 $kendo-file-box-min-width: var(--kendo-file-box-min-width, var(--kendo-file-box-min-width, 96px) ) !default;
@@ -49,6 +52,10 @@ $kendo-file-box-text: var(--kendo-file-box-text, k-color(base-on-subtle) ) !defa
 /// @group file-box
 $kendo-file-box-border: var(--kendo-file-box-border, $kendo-file-box-bg ) !default;
 
+/// The text color of the File Box file size.
+/// @group file-box
+$kendo-file-box-size-text: var(--kendo-file-box-size-text, null ) !default;
+
 /// The gradient used for the File Box wrapper scrolling indicator.
 /// @group file-box
 $kendo-file-box-wrapper-scroll-gradient: var(--kendo-file-box-wrapper-scroll-gradient, rgba(255, 255, 255, 0.00) 0%, #{k-color(app-surface)} 100% ) !default;
@@ -57,6 +64,7 @@ $kendo-file-box-wrapper-scroll-gradient: var(--kendo-file-box-wrapper-scroll-gra
     $kendo-file-box-padding-x: $kendo-file-box-padding-x,
     $kendo-file-box-padding-y: $kendo-file-box-padding-y,
     $kendo-file-box-gap: $kendo-file-box-gap,
+    $kendo-file-box-info-gap: $kendo-file-box-info-gap,
     $kendo-file-box-min-width: $kendo-file-box-min-width,
     $kendo-file-box-max-width: $kendo-file-box-max-width,
     $kendo-file-box-border-width: $kendo-file-box-border-width,
@@ -69,5 +77,6 @@ $kendo-file-box-wrapper-scroll-gradient: var(--kendo-file-box-wrapper-scroll-gra
     $kendo-file-box-bg: $kendo-file-box-bg,
     $kendo-file-box-text: $kendo-file-box-text,
     $kendo-file-box-border: $kendo-file-box-border,
+    $kendo-file-box-size-text: $kendo-file-box-size-text,
     $kendo-file-box-wrapper-scroll-gradient: $kendo-file-box-wrapper-scroll-gradient
 );

package/scss/filemanager/_variables.scss

@@ -9,6 +9,9 @@ $kendo-file-manager-spacer: k-spacing(4) !default;
 /// The border width of the FileManager.
 /// @group file-manager
 $kendo-file-manager-border-width: var( --kendo-file-manager-border-width, 1px ) !default;
+/// The border radius of the FileManager.
+/// @group file-manager
+$kendo-file-manager-border-radius: var( --kendo-file-manager-border-radius, null ) !default;
 /// The font family of the FileManager.
 /// @group file-manager
 $kendo-file-manager-font-family: var( --kendo-file-manager-font-family, var(--kendo-font-family) ) !default;
@@ -184,6 +187,7 @@ $kendo-file-manager-preview-icon-border: var( --kendo-file-manager-preview-icon-
 @forward "@progress/kendo-theme-core/scss/components/filemanager/variables" with (
     $kendo-file-manager-spacer: $kendo-file-manager-spacer,
     $kendo-file-manager-border-width: $kendo-file-manager-border-width,
+    $kendo-file-manager-border-radius: $kendo-file-manager-border-radius,
     $kendo-file-manager-font-family: $kendo-file-manager-font-family,
     $kendo-file-manager-font-size: $kendo-file-manager-font-size,
     $kendo-file-manager-line-height: $kendo-file-manager-line-height,

package/scss/filter/_variables.scss

@@ -8,6 +8,10 @@ $kendo-filter-padding-x: var( --kendo-filter-padding-x, #{k-spacing(2)} ) !defau
 /// @group filter
 $kendo-filter-padding-y: var( --kendo-filter-padding-y, #{k-spacing(1)} ) !default;
 
+/// The border radius of the Filter.
+/// @group filter
+$kendo-filter-border-radius: null !default;
+
 /// The bottom margin of the Filter.
 /// @group filter
 $kendo-filter-bottom-margin: var( --kendo-filter-bottom-margin, #{k-spacing(7.5)} ) !default;
@@ -44,6 +48,7 @@ $kendo-filter-toolbar-focus-border: var( --kendo-filter-toolbar-focus-border, #{
 @forward "@progress/kendo-theme-core/scss/components/filter/variables" with (
     $kendo-filter-padding-x: $kendo-filter-padding-x,
     $kendo-filter-padding-y: $kendo-filter-padding-y,
+    $kendo-filter-border-radius: $kendo-filter-border-radius,
     $kendo-filter-bottom-margin: $kendo-filter-bottom-margin,
     $kendo-filter-line-size: $kendo-filter-line-size,
     $kendo-filter-operator-dropdown-width: $kendo-filter-operator-dropdown-width,

package/scss/forms/_variables.scss

@@ -54,6 +54,9 @@ $kendo-form-legend-width: var(--kendo-form-legend-width, 100%) !default;
 /// The font size of the Form legend.
 /// @group form
 $kendo-form-legend-font-size: var(--kendo-form-legend-font-size, var(--kendo-font-size)) !default;
+/// The font weight of the Form legend.
+/// @group form
+$kendo-form-legend-font-weight: null !default;
 
 /// The text capitalization of the Form legend.
 /// @group form
@@ -63,6 +66,16 @@ $kendo-form-legend-text-transform: var(--kendo-form-legend-text-transform, upper
 /// @group form
 $kendo-form-label-margin-bottom: var(--kendo-form-label-margin-bottom, #{k-spacing(2)}) !default;
 
+/// The font size of the Form label.
+/// @group form
+$kendo-label-font-size: var(--kendo-label-font-size, inherit) !default;
+/// The font weight of the Form label.
+/// @group form
+$kendo-label-font-weight: var(--kendo-label-font-weight, inherit) !default;
+/// The line height of the Form label.
+/// @group form
+$kendo-label-line-height: var(--kendo-label-line-height, inherit) !default;
+
 /// The font size of the Form hint.
 /// @group form
 $kendo-form-hint-font-size: var(--kendo-form-hint-font-size, var(--kendo-font-size-sm)) !default;
@@ -134,6 +147,9 @@ $kendo-label-optional-font-size: var(--kendo-label-optional-font-size, var(--ken
 /// The font style of the optional label in the Form.
 /// @group form
 $kendo-label-optional-font-style: var(--kendo-label-optional-font-style, normal) !default;
+/// The font weight of the optional label in the Form.
+/// @group form
+$kendo-label-optional-font-weight: var(--kendo-label-optional-font-weight, inherit) !default;
 
 /// The margin of the Form fieldset.
 /// @group form
@@ -157,8 +173,12 @@ $kendo-fieldset-legend-text: var(--kendo-fieldset-legend-text, #{k-color(subtle)
     $kendo-form-legend-border-color: $kendo-form-legend-border-color,
     $kendo-form-legend-width: $kendo-form-legend-width,
     $kendo-form-legend-font-size: $kendo-form-legend-font-size,
+    $kendo-form-legend-font-weight: $kendo-form-legend-font-weight,
     $kendo-form-legend-text-transform: $kendo-form-legend-text-transform,
     $kendo-form-label-margin-bottom: $kendo-form-label-margin-bottom,
+    $kendo-label-font-size: $kendo-label-font-size,
+    $kendo-label-font-weight: $kendo-label-font-weight,
+    $kendo-label-line-height: $kendo-label-line-height,
     $kendo-form-hint-font-size: $kendo-form-hint-font-size,
     $kendo-form-hint-font-style: $kendo-form-hint-font-style,
     $kendo-form-hint-margin-top: $kendo-form-hint-margin-top,
@@ -176,6 +196,7 @@ $kendo-fieldset-legend-text: var(--kendo-fieldset-legend-text, #{k-color(subtle)
     $kendo-label-optional-margin-x: $kendo-label-optional-margin-x,
     $kendo-label-optional-font-size: $kendo-label-optional-font-size,
     $kendo-label-optional-font-style: $kendo-label-optional-font-style,
+    $kendo-label-optional-font-weight: $kendo-label-optional-font-weight,
     $kendo-fieldset-margin: $kendo-fieldset-margin,
     $kendo-fieldset-legend-text: $kendo-fieldset-legend-text
 );

package/scss/gantt/_variables.scss

@@ -6,6 +6,9 @@
 /// The border width of the Gantt.
 /// @group gantt
 $kendo-gantt-border-width: var(--kendo-gantt-border-width, 1px) !default;
+/// The border radius of the Gantt.
+/// @group gantt
+$kendo-gantt-border-radius: var(--kendo-gantt-border-radius, null) !default;
 /// The font family of the Gantt.
 /// @group gantt
 $kendo-gantt-font-family: var(--kendo-gantt-font-family, var(--kendo-font-family)) !default;
@@ -243,6 +246,7 @@ $kendo-gantt-validation-tooltip-invalid-border: var(--kendo-gantt-validation-too
 
 @forward "@progress/kendo-theme-core/scss/components/gantt/_variables.scss" with (
     $kendo-gantt-border-width: $kendo-gantt-border-width,
+    $kendo-gantt-border-radius: $kendo-gantt-border-radius,
     $kendo-gantt-font-family: $kendo-gantt-font-family,
     $kendo-gantt-font-size: $kendo-gantt-font-size,
     $kendo-gantt-line-height: $kendo-gantt-line-height,

package/scss/grid/_theme.scss

@@ -10,15 +10,6 @@
 
     @include kendo-grid--theme-base();
 
-    .k-grouping-header,
-    .k-grid-grouping-header {
-        @include fill(
-            $kendo-grid-grouping-header-text,
-            $kendo-grid-grouping-header-bg,
-            $kendo-grid-grouping-header-border
-        );
-    }
-
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td,
     .k-table-tbody .k-group-cell {

package/scss/grid/_variables.scss

@@ -15,6 +15,9 @@ $kendo-grid-default-size: "md" !default;
 /// The border width of the Grid.
 /// @group grid
 $kendo-grid-border-width: var( --kendo-grid-border-width, 1px ) !default;
+/// The border radius of the Grid.
+/// @group grid
+$kendo-grid-border-radius: null !default;
 /// The border style of the Grid.
 /// @group grid
 $kendo-grid-border-style: var( --kendo-grid-border-style, solid ) !default;
@@ -575,6 +578,7 @@ $kendo-grid-pinned-source-font-weight: var(--kendo-font-weight-semibold) !defaul
 @forward "@progress/kendo-theme-core/scss/components/grid/_variables.scss" with (
     $kendo-grid-default-size: $kendo-grid-default-size,
     $kendo-grid-border-width: $kendo-grid-border-width,
+    $kendo-grid-border-radius: $kendo-grid-border-radius,
     $kendo-grid-font-family: $kendo-grid-font-family,
     $kendo-grid-font-size: $kendo-grid-font-size,
     $kendo-grid-line-height: $kendo-grid-line-height,
@@ -584,6 +588,9 @@ $kendo-grid-pinned-source-font-weight: var(--kendo-font-weight-semibold) !defaul
     $kendo-grid-header-padding-y: $kendo-grid-header-padding-y,
     $kendo-grid-grouping-header-padding-x: $kendo-grid-grouping-header-padding-x,
     $kendo-grid-grouping-header-padding-y: $kendo-grid-grouping-header-padding-y,
+    $kendo-grid-grouping-header-bg: $kendo-grid-grouping-header-bg,
+    $kendo-grid-grouping-header-text: $kendo-grid-grouping-header-text,
+    $kendo-grid-grouping-header-border: $kendo-grid-grouping-header-border,
     $kendo-grid-cell-padding-x: $kendo-grid-cell-padding-x,
     $kendo-grid-cell-padding-y: $kendo-grid-cell-padding-y,
     $kendo-grid-filter-cell-padding-x: $kendo-grid-filter-cell-padding-x,

package/scss/imageeditor/_variables.scss

@@ -27,6 +27,9 @@ $kendo-image-editor-padding-x: var( --kendo-image-editor-padding-x, #{k-spacing(
 /// Border width of the imageeditor.
 /// @group image-editor
 $kendo-image-editor-border-width: var( --kendo-image-editor-border-width, 1px ) !default;
+/// The border radius of the ImageEditor.
+/// @group image-editor
+$kendo-image-editor-border-radius: var( --kendo-image-editor-border-radius, null ) !default;
 /// Font size of the imageeditor.
 /// @group image-editor
 $kendo-image-editor-font-size: var( --kendo-image-editor-font-size, var(--kendo-font-size) ) !default;
@@ -113,6 +116,7 @@ $kendo-image-editor-resize-left-offset: var( --kendo-image-editor-resize-left-of
     $kendo-image-editor-padding-y: $kendo-image-editor-padding-y,
     $kendo-image-editor-padding-x: $kendo-image-editor-padding-x,
     $kendo-image-editor-border-width: $kendo-image-editor-border-width,
+    $kendo-image-editor-border-radius: $kendo-image-editor-border-radius,
     $kendo-image-editor-font-size: $kendo-image-editor-font-size,
     $kendo-image-editor-line-height: $kendo-image-editor-line-height,
     $kendo-image-editor-font-family: $kendo-image-editor-font-family,

package/scss/listbox/_variables.scss

@@ -43,6 +43,16 @@ $kendo-listbox-drop-hint-width: var( --kendo-listbox-drop-hint-width, 1px ) !def
 /// @group listbox
 $kendo-listbox-drop-hint-border-color: var( --kendo-listbox-drop-hint-border-color, #{k-color(primary)} ) !default;
 
+/// The horizontal padding of the ListBox scroller.
+/// @group listbox
+$kendo-listbox-scroller-padding-x: null !default;
+/// The vertical padding of the ListBox scroller.
+/// @group listbox
+$kendo-listbox-scroller-padding-y: null !default;
+/// The border radius of the ListBox.
+/// @group listbox
+$kendo-listbox-border-radius: null !default;
+
 @forward "@progress/kendo-theme-core/scss/components/listbox/_variables.scss" with (
     $kendo-listbox-spacing: $kendo-listbox-spacing,
     $kendo-listbox-button-spacing: $kendo-listbox-button-spacing,
@@ -55,5 +65,8 @@ $kendo-listbox-drop-hint-border-color: var( --kendo-listbox-drop-hint-border-col
     $kendo-listbox-text: $kendo-listbox-text,
     $kendo-listbox-bg: $kendo-listbox-bg,
     $kendo-listbox-border: $kendo-listbox-border,
-    $kendo-listbox-drop-hint-width: $kendo-listbox-drop-hint-width
+    $kendo-listbox-drop-hint-width: $kendo-listbox-drop-hint-width,
+    $kendo-listbox-scroller-padding-x: $kendo-listbox-scroller-padding-x,
+    $kendo-listbox-scroller-padding-y: $kendo-listbox-scroller-padding-y,
+    $kendo-listbox-border-radius: $kendo-listbox-border-radius
 );

package/scss/listview/_variables.scss

@@ -61,6 +61,9 @@ $kendo-listview-item-focus-border: var( --kendo-listview-item-focus-border, init
 /// The box shadow of the focused ListView items.
 /// @group listview
 $kendo-listview-item-focus-shadow: var( --kendo-listview-item-focus-shadow, var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) ) !default;
+/// The border radius of the ListView items.
+/// @group listview
+$kendo-listview-item-border-radius: null !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/listview/_variables.scss" with (
@@ -81,5 +84,6 @@ $kendo-listview-item-focus-shadow: var( --kendo-listview-item-focus-shadow, var(
     $kendo-listview-item-focus-text: $kendo-listview-item-focus-text,
     $kendo-listview-item-focus-bg: $kendo-listview-item-focus-bg,
     $kendo-listview-item-focus-border: $kendo-listview-item-focus-border,
-    $kendo-listview-item-focus-shadow: $kendo-listview-item-focus-shadow
+    $kendo-listview-item-focus-shadow: $kendo-listview-item-focus-shadow,
+    $kendo-listview-item-border-radius: $kendo-listview-item-border-radius
 );

package/scss/mediaplayer/_variables.scss

@@ -4,6 +4,9 @@
 /// The border width of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-border-width: var( --kendo-media-player-border-width, 1px ) !default;
+/// The border radius of the MediaPlayer.
+/// @group mediaplayer
+$kendo-media-player-border-radius: var( --kendo-media-player-border-radius, null ) !default;
 /// The font family of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-font-family: var( --kendo-media-player-font-family, var(--kendo-font-family) ) !default;
@@ -41,6 +44,15 @@ $kendo-media-player-titlebar-padding-x: var( --kendo-media-player-titlebar-paddi
 /// The vertical padding of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-padding-y: var( --kendo-media-player-titlebar-padding-y, k-spacing(2) ) !default;
+/// The font size of the MediaPlayer title.
+/// @group mediaplayer
+$kendo-media-player-titlebar-font-size: var( --kendo-media-player-titlebar-font-size, null ) !default;
+/// The font weight of the MediaPlayer title.
+/// @group mediaplayer
+$kendo-media-player-titlebar-font-weight: var( --kendo-media-player-titlebar-font-weight, null ) !default;
+/// The line height of the MediaPlayer title.
+/// @group mediaplayer
+$kendo-media-player-titlebar-line-height: var( --kendo-media-player-titlebar-line-height, null ) !default;
 /// The background color of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-bg: var( --kendo-media-player-titlebar-bg, color-mix(in srgb, k-color(on-app-surface) 40%, transparent) ) !default;
@@ -50,6 +62,7 @@ $kendo-media-player-titlebar-text: var( --kendo-media-player-titlebar-text, $ken
 
 @forward "@progress/kendo-theme-core/scss/components/mediaplayer/_variables.scss" with (
     $kendo-media-player-border-width: $kendo-media-player-border-width,
+    $kendo-media-player-border-radius: $kendo-media-player-border-radius,
     $kendo-media-player-font-family: $kendo-media-player-font-family,
     $kendo-media-player-font-size: $kendo-media-player-font-size,
     $kendo-media-player-line-height: $kendo-media-player-line-height,
@@ -58,5 +71,8 @@ $kendo-media-player-titlebar-text: var( --kendo-media-player-titlebar-text, $ken
     $kendo-media-player-border: $kendo-media-player-border,
     $kendo-media-player-titlebar-padding-x: $kendo-media-player-titlebar-padding-x,
     $kendo-media-player-titlebar-padding-y: $kendo-media-player-titlebar-padding-y,
+    $kendo-media-player-titlebar-font-size: $kendo-media-player-titlebar-font-size,
+    $kendo-media-player-titlebar-font-weight: $kendo-media-player-titlebar-font-weight,
+    $kendo-media-player-titlebar-line-height: $kendo-media-player-titlebar-line-height,
     $kendo-media-player-titlebar-text: $kendo-media-player-titlebar-text
 );

package/scss/messagebox/_variables.scss

@@ -53,6 +53,7 @@ $kendo-message-box-link-hover-text: var( --kendo-message-box-link-hover-text, k-
     $kendo-message-box-padding-x: $kendo-message-box-padding-x,
     $kendo-message-box-padding-y: $kendo-message-box-padding-y,
     $kendo-message-box-border-width: $kendo-message-box-border-width,
+    $kendo-message-box-border-radius: $kendo-message-box-border-radius,
     $kendo-message-box-font-size: $kendo-message-box-font-size,
     $kendo-message-box-line-height: $kendo-message-box-line-height,
     $kendo-message-box-link-font-style: $kendo-message-box-link-font-style

package/scss/notification/_variables.scss

@@ -55,7 +55,7 @@ $kendo-notification-icon-spacing: var( --kendo-notification-icon-spacing, #{k-sp
 
 /// The theme colors map for the Notification.
 /// @group notification
-$kendo-notification-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-notification-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse") !default;
 
 /// The generated theme colors map for the Notification.
 /// @group notification

package/scss/overlay/_variables.scss

@@ -1,18 +1,14 @@
-/// The default theme color of the Overlay.
-/// @group overlay
-/// @role default
-$kendo-overlay-default-theme-color: "inverse" !default;
+@use "../core/_index.scss" as *;
 
-/// Background color of the dark overlay.
+/// The background color of the Overlay.
 /// @group overlay
-$kendo-overlay-bg: null !default;
+$kendo-overlay-bg: k-color(inverse) !default;
 
-/// Opacity of the overlay.
+/// The opacity of the Overlay.
 /// @group overlay
 $kendo-overlay-opacity: var( --kendo-overlay-opacity, .4 ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (
-    $kendo-overlay-default-theme-color: $kendo-overlay-default-theme-color,
     $kendo-overlay-bg: $kendo-overlay-bg,
     $kendo-overlay-opacity: $kendo-overlay-opacity
 );

package/scss/pdf-viewer/_variables.scss

@@ -6,6 +6,9 @@
 /// The border width of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-border-width: var( --kendo-pdf-viewer-border-width, 1px ) !default;
+/// The border radius of the PDFViewer.
+/// @group pdf-viewer
+$kendo-pdf-viewer-border-radius: var( --kendo-pdf-viewer-border-radius, null ) !default;
 /// The font family of the PDFViewer.
 /// @group pdf-viewer
 $kendo-pdf-viewer-font-family: var( --kendo-pdf-viewer-font-family, var(--kendo-font-family) ) !default;
@@ -125,6 +128,7 @@ $kendo-pdf-viewer-free-text-annotation-text: var( --kendo-pdf-viewer-free-text-a
 
 @forward "@progress/kendo-theme-core/scss/components/pdf-viewer/_variables.scss" with (
     $kendo-pdf-viewer-border-width: $kendo-pdf-viewer-border-width,
+    $kendo-pdf-viewer-border-radius: $kendo-pdf-viewer-border-radius,
     $kendo-pdf-viewer-font-family: $kendo-pdf-viewer-font-family,
     $kendo-pdf-viewer-font-size: $kendo-pdf-viewer-font-size,
     $kendo-pdf-viewer-line-height: $kendo-pdf-viewer-line-height,

package/scss/pivotgrid/_variables.scss

@@ -27,6 +27,9 @@ $kendo-pivotgrid-line-height: var( --kendo-pivotgrid-line-height, var(--kendo-li
 /// The border width of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-border-width: var( --kendo-pivotgrid-border-width, 1px ) !default;
+/// The border radius of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-border-radius: null !default;
 /// The icon spacing of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-icon-spacing: var( --kendo-pivotgrid-icon-spacing, #{k-spacing(1)} ) !default;
@@ -253,6 +256,7 @@ $kendo-pivotgrid-row-headers-bg: var( --kendo-pivotgrid-row-headers-bg, #{k-colo
     $kendo-pivotgrid-font-size: $kendo-pivotgrid-font-size,
     $kendo-pivotgrid-line-height: $kendo-pivotgrid-line-height,
     $kendo-pivotgrid-border-width: $kendo-pivotgrid-border-width,
+    $kendo-pivotgrid-border-radius: $kendo-pivotgrid-border-radius,
     $kendo-pivotgrid-icon-spacing: $kendo-pivotgrid-icon-spacing,
     $kendo-pivotgrid-row-header-width: $kendo-pivotgrid-row-header-width,
     $kendo-pivotgrid-column-header-height: $kendo-pivotgrid-column-header-height,

package/scss/progressbar/_variables.scss

@@ -105,6 +105,10 @@ $kendo-progressbar-indeterminate-animation-vertical: var( --kendo-progressbar-in
 /// @group progressbar
 $kendo-progressbar-chunk-border: var( --kendo-progressbar-chunk-border, #{k-color(app-surface)} ) !default;
 
+/// The border radius of the chunk ProgressBar chunks.
+/// @group progressbar
+$kendo-progressbar-chunk-border-radius: null !default;
+
 // Circular Progressbar
 /// The arc stroke color of the circular ProgressBar.
 /// @group progressbar
@@ -132,6 +136,7 @@ $kendo-circular-progressbar-scale-stroke: var( --kendo-circular-progressbar-scal
     $kendo-progressbar-indeterminate-bg: $kendo-progressbar-indeterminate-bg,
     $kendo-progressbar-indeterminate-text: $kendo-progressbar-indeterminate-text,
     $kendo-progressbar-indeterminate-border: $kendo-progressbar-indeterminate-border,
+    $kendo-progressbar-chunk-border-radius: $kendo-progressbar-chunk-border-radius,
     $kendo-circular-progressbar-arc-stroke: $kendo-circular-progressbar-arc-stroke,
     $kendo-circular-progressbar-scale-stroke: $kendo-circular-progressbar-scale-stroke
 );