@progress/kendo-theme-default 12.3.1-dev.8 → 13.0.0-dev.0

package/scss/card/_variables.scss

@@ -3,6 +3,11 @@
 
 // Card
 
+/// The default theme color of the Card.
+/// @group card
+/// @role default
+$kendo-card-default-theme-color: null !default;
+
 /// The horizontal padding of the Card.
 /// @group card
 $kendo-card-padding-x: k-spacing(4) !default;
@@ -181,22 +186,8 @@ $kendo-card-callout-width: 20px !default;
 /// @group card
 $kendo-card-callout-height: 20px !default;
 
-/// The theme colors of the Card.
-/// @group card
-$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,
@@ -250,6 +241,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-width,
-    $kendo-card-callout-height: $kendo-card-callout-height,
-    $kendo-card-theme-colors: $kendo-card-theme-colors
+    $kendo-card-callout-height: $kendo-card-callout-height
 );

package/scss/checkbox/_variables.scss

@@ -39,26 +39,6 @@ $kendo-checkbox-md-ripple-size: 300% !default;
 /// @group checkbox
 $kendo-checkbox-lg-ripple-size: 300% !default;
 
-// A map with the different CheckBox sizes.
-/// The sizes of the CheckBox.
-/// @group checkbox
-$kendo-checkbox-sizes: (
-    sm: (
-        size: $kendo-checkbox-sm-size,
-        glyph-size: $kendo-checkbox-sm-glyph-size,
-        ripple-size: $kendo-checkbox-sm-ripple-size
-    ),
-    md: (
-        size: $kendo-checkbox-md-size,
-        glyph-size: $kendo-checkbox-md-glyph-size,
-        ripple-size: $kendo-checkbox-md-ripple-size
-    ),
-    lg: (
-        size: $kendo-checkbox-lg-size,
-        glyph-size: $kendo-checkbox-lg-glyph-size,
-        ripple-size: $kendo-checkbox-lg-ripple-size
-    )
-) !default;
 
 /// The background color of the CheckBox.
 /// @group checkbox
@@ -140,6 +120,16 @@ $kendo-checkbox-invalid-text: k-color(error-on-surface) !default;
 /// @group checkbox
 $kendo-checkbox-invalid-border: k-color(error-on-surface) !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
 
@@ -205,7 +195,6 @@ $kendo-checkbox-ripple-opacity: .25 !default;
     $kendo-checkbox-sm-ripple-size: $kendo-checkbox-sm-ripple-size,
     $kendo-checkbox-md-ripple-size: $kendo-checkbox-md-ripple-size,
     $kendo-checkbox-lg-ripple-size: $kendo-checkbox-lg-ripple-size,
-    $kendo-checkbox-sizes: $kendo-checkbox-sizes,
     $kendo-checkbox-bg: $kendo-checkbox-bg,
     $kendo-checkbox-text: $kendo-checkbox-text,
     $kendo-checkbox-border: $kendo-checkbox-border,
@@ -241,5 +230,7 @@ $kendo-checkbox-ripple-opacity: .25 !default;
     $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
 );

package/scss/chip/_variables.scss

@@ -5,6 +5,23 @@
 
 // Chip
 
+/// The default theme color of the Chip.
+/// @group chip
+/// @role default
+$kendo-chip-default-theme-color: "base" !default;
+/// The default fill mode of the Chip.
+/// @group chip
+/// @role default
+$kendo-chip-default-fill-mode: "solid" !default;
+/// The default roundness of the Chip.
+/// @group chip
+/// @role default
+$kendo-chip-default-roundness: "md" !default;
+/// The default size of the Chip.
+/// @group chip
+/// @role default
+$kendo-chip-default-size: "md" !default;
+
 /// The width of the border around the Chip.
 /// @group chip
 $kendo-chip-border-width: 1px !default;
@@ -38,70 +55,37 @@ $kendo-chip-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
 /// The font size of the Chip.
 /// @group chip
-$kendo-chip-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-font-size: null !default;
 /// The font size of the small Chip.
 /// @group chip
 $kendo-chip-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium Chip.
 /// @group chip
-$kendo-chip-md-font-size: $kendo-chip-font-size !default;
+$kendo-chip-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the large Chip.
 /// @group chip
 $kendo-chip-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-chip-line-height: null !default;
 /// The small Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-sm-line-height: $kendo-chip-line-height !default;
+$kendo-chip-sm-line-height: var( --kendo-line-height-xs, normal )  !default;
 /// The medium Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-md-line-height: $kendo-chip-line-height !default;
+$kendo-chip-md-line-height: var( --kendo-line-height-xs, normal )  !default;
 /// The large Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-lg-line-height: $kendo-chip-line-height !default;
+$kendo-chip-lg-line-height: var( --kendo-line-height-xs, normal )  !default;
 
-$kendo-chip-calc-size: calc( #{$kendo-chip-line-height} * 1em + calc( #{$kendo-chip-md-padding-y} * 2 ) + #{$kendo-chip-border-width} * 2 ) !default;
+$kendo-chip-calc-size: calc( #{$kendo-chip-md-line-height} * 1em + calc( #{$kendo-chip-md-padding-y} * 2 ) + #{$kendo-chip-border-width} * 2 ) !default;
 $kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height} * 1em + calc( #{$kendo-chip-sm-padding-y} * 2 ) + #{$kendo-chip-border-width} * 2 ) !default;
 
-/// The map with the sizes of the Chip.
-/// @group chip
-$kendo-chip-sizes: (
-    sm: (
-        padding-x: $kendo-chip-sm-padding-x,
-        padding-y: $kendo-chip-sm-padding-y,
-        font-size: $kendo-chip-sm-font-size,
-        line-height: $kendo-chip-sm-line-height
-    ),
-    md: (
-        padding-x: $kendo-chip-md-padding-x,
-        padding-y: $kendo-chip-md-padding-y,
-        font-size: $kendo-chip-md-font-size,
-        line-height: $kendo-chip-md-line-height
-    ),
-    lg: (
-        padding-x: $kendo-chip-lg-padding-x,
-        padding-y: $kendo-chip-lg-padding-y,
-        font-size: $kendo-chip-lg-font-size,
-        line-height: $kendo-chip-lg-line-height
-    )
-) !default;
-
 /// The base background of the Chip.
 /// @group chip
 $kendo-chip-base-bg: k-color(base-subtle) !default;
 
-/// The theme colors map for the Chip.
-/// @group chip
-$kendo-chip-theme-colors: (
-    "base": $kendo-chip-base-bg,
-    "error": k-color(error-subtle),
-    "info": k-color(info-subtle),
-    "warning": k-color(warning-subtle),
-    "success": k-color(success-subtle)
-) !default;
-
 /// The base background color of the solid Chip.
 /// @group chip
 $kendo-chip-solid-bg: $kendo-chip-base-bg !default;
@@ -165,17 +149,21 @@ $kendo-chip-disabled-text: null !default;
 $kendo-chip-disabled-border: $kendo-chip-disabled-bg !default;
 
 
-// Chip List
-
-/// The sizes of the Chip list.
+/// The sizes of the small Chip list.
+/// @group chip
+$kendo-chip-list-size-sm: k-spacing(1) !default;
+/// The sizes of the medium Chip list.
+/// @group chip
+$kendo-chip-list-size-md: k-spacing(1) !default;
+/// The sizes of the large Chip list.
 /// @group chip
-$kendo-chip-list-sizes: (
-    sm: k-spacing(1),
-    md: k-spacing(1),
-    lg: k-spacing(1)
-) !default;
+$kendo-chip-list-size-lg: k-spacing(1) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/chip/_variables.scss" with (
+    $kendo-chip-default-theme-color: $kendo-chip-default-theme-color,
+    $kendo-chip-default-fill-mode: $kendo-chip-default-fill-mode,
+    $kendo-chip-default-roundness: $kendo-chip-default-roundness,
+    $kendo-chip-default-size: $kendo-chip-default-size,
     $kendo-chip-border-width: $kendo-chip-border-width,
     $kendo-chip-spacing: $kendo-chip-spacing,
     $kendo-chip-sm-padding-x: $kendo-chip-sm-padding-x,
@@ -195,9 +183,7 @@ $kendo-chip-list-sizes: (
     $kendo-chip-lg-line-height: $kendo-chip-lg-line-height,
     $kendo-chip-calc-size: $kendo-chip-calc-size,
     $kendo-chip-sm-calc-size: $kendo-chip-sm-calc-size,
-    $kendo-chip-sizes: $kendo-chip-sizes,
     $kendo-chip-base-bg: $kendo-chip-base-bg,
-    $kendo-chip-theme-colors: $kendo-chip-theme-colors,
     $kendo-chip-solid-bg: $kendo-chip-solid-bg,
     $kendo-chip-solid-text: $kendo-chip-solid-text,
     $kendo-chip-solid-border: $kendo-chip-solid-border,
@@ -216,5 +202,7 @@ $kendo-chip-list-sizes: (
     $kendo-chip-disabled-bg: $kendo-chip-disabled-bg,
     $kendo-chip-disabled-text: $kendo-chip-disabled-text,
     $kendo-chip-disabled-border: $kendo-chip-disabled-border,
-    $kendo-chip-list-sizes: $kendo-chip-list-sizes
+    $kendo-chip-list-size-sm: $kendo-chip-list-size-sm,
+    $kendo-chip-list-size-md: $kendo-chip-list-size-md,
+    $kendo-chip-list-size-lg: $kendo-chip-list-size-lg
 );

package/scss/coloreditor/_variables.scss

@@ -2,19 +2,24 @@
 
 // ColorEditor/FlatColorPicker
 
+/// The default size of the ColorEditor.
+/// @group color-editor
+/// @role default
+$kendo-color-editor-default-size: "md" !default;
+
 /// The spacer of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-spacer: k-spacing(3) !default;
 
 /// The minimum width of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-min-width: 272px !default;
+$kendo-color-editor-min-width: null !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-sm-min-width: 252px !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
+$kendo-color-editor-md-min-width: 272px !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-lg-min-width: 362px !default;
@@ -143,43 +148,9 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
 
-/// The size map of the ColorEditor.
-/// @group color-editor
-$kendo-color-editor-sizes: (
-    sm: (
-        min-width: $kendo-color-editor-sm-min-width,
-        header-padding-x: $kendo-color-editor-sm-header-padding-x,
-        header-padding-y: $kendo-color-editor-sm-header-padding-y,
-        views-padding-x: $kendo-color-editor-sm-views-padding-x,
-        views-padding-y: $kendo-color-editor-sm-views-padding-y,
-        preview-gap: $kendo-color-editor-sm-preview-gap,
-        preview-width: $kendo-color-editor-sm-color-preview-width,
-        preview-height: $kendo-color-editor-sm-color-preview-height,
-
-    ),
-    md: (
-        min-width: $kendo-color-editor-md-min-width,
-        header-padding-x: $kendo-color-editor-md-header-padding-x,
-        header-padding-y: $kendo-color-editor-md-header-padding-y,
-        views-padding-x: $kendo-color-editor-md-views-padding-x,
-        views-padding-y: $kendo-color-editor-md-views-padding-y,
-        preview-gap: $kendo-color-editor-md-preview-gap,
-        preview-width: $kendo-color-editor-md-color-preview-width,
-        preview-height: $kendo-color-editor-md-color-preview-height,
-    ),
-    lg: (
-        min-width: $kendo-color-editor-lg-min-width,
-        header-padding-x: $kendo-color-editor-lg-header-padding-x,
-        header-padding-y: $kendo-color-editor-lg-header-padding-y,
-        views-padding-x: $kendo-color-editor-lg-views-padding-x,
-        views-padding-y: $kendo-color-editor-lg-views-padding-y,
-        preview-gap: $kendo-color-editor-lg-preview-gap,
-        preview-width: $kendo-color-editor-lg-color-preview-width,
-        preview-height: $kendo-color-editor-lg-color-preview-height,
-    )
-) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/coloreditor/_variables.scss" with (
+    $kendo-color-editor-default-size: $kendo-color-editor-default-size,
     $kendo-color-editor-spacer: $kendo-color-editor-spacer,
     $kendo-color-editor-min-width: $kendo-color-editor-min-width,
     $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width,
@@ -223,6 +194,5 @@ $kendo-color-editor-sizes: (
     $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x,
     $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
     $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
-    $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset,
-    $kendo-color-editor-sizes: $kendo-color-editor-sizes
+    $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset
 );

package/scss/colorgradient/_variables.scss

@@ -3,13 +3,18 @@
 
 // ColorGradient
 
+/// The default size of the ColorGradient.
+/// @group color-gradient
+/// @role default
+$kendo-color-gradient-default-size: "md" !default;
+
 /// The spacer of the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-spacer: k-spacing(3) !default;
 
 /// The width of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-width: 272px !default;
+$kendo-color-gradient-width: null !default;
 /// The width of the border around the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-border-width: 1px !default;
@@ -18,7 +23,7 @@ $kendo-color-gradient-border-width: 1px !default;
 $kendo-color-gradient-border-radius: k-border-radius(md) !default;
 /// The spacing between the sections of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-gap: $kendo-color-gradient-spacer !default;
+$kendo-color-gradient-gap: null !default;
 /// The font family of the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
@@ -62,17 +67,17 @@ $kendo-color-gradient-lg-padding-x: k-spacing(4.5) !default;
 $kendo-color-gradient-sm-width: 252px !default;
 /// The width of the medium ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
+$kendo-color-gradient-md-width: 272px !default;
 /// The width of the large ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-lg-width: 362px !default;
 
 /// The spacing between the sections of the small ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-sm-gap: $kendo-color-gradient-gap !default;
+$kendo-color-gradient-sm-gap: $kendo-color-gradient-spacer !default;
 /// The spacing between the sections of the medium ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-md-gap: $kendo-color-gradient-gap !default;
+$kendo-color-gradient-md-gap: $kendo-color-gradient-spacer !default;
 /// The spacing between the sections of the large ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-lg-gap: k-spacing(4.5) !default;
@@ -214,42 +219,8 @@ $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold,
 /// @group color-gradient
 $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
 
-/// The size map of the ColorGradient.
-/// @group color-gradient
-$kendo-color-gradient-sizes: (
-    sm: (
-        width: $kendo-color-gradient-sm-width,
-        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
-        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
-        input-width: $kendo-color-gradient-sm-input-width,
-        gap: $kendo-color-gradient-sm-gap,
-        canvas-gap: $kendo-color-gradient-sm-canvas-gap,
-        padding-x: $kendo-color-gradient-sm-padding-x,
-        padding-y: $kendo-color-gradient-sm-padding-y
-    ),
-    md: (
-        width: $kendo-color-gradient-md-width,
-        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
-        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
-        input-width: $kendo-color-gradient-md-input-width,
-        gap: $kendo-color-gradient-md-gap,
-        canvas-gap: $kendo-color-gradient-md-canvas-gap,
-        padding-x: $kendo-color-gradient-md-padding-x,
-        padding-y: $kendo-color-gradient-md-padding-y
-    ),
-    lg: (
-        width: $kendo-color-gradient-lg-width,
-        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
-        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
-        input-width: $kendo-color-gradient-lg-input-width,
-        gap: $kendo-color-gradient-lg-gap,
-        canvas-gap: $kendo-color-gradient-lg-canvas-gap,
-        padding-x: $kendo-color-gradient-lg-padding-x,
-        padding-y: $kendo-color-gradient-lg-padding-y
-    )
-) !default;
-
 @forward "@progress/kendo-theme-core/scss/components/colorgradient/_variables.scss" with (
+    $kendo-color-gradient-default-size: $kendo-color-gradient-default-size,
     $kendo-color-gradient-spacer: $kendo-color-gradient-spacer,
     $kendo-color-gradient-width: $kendo-color-gradient-width,
     $kendo-color-gradient-border-width: $kendo-color-gradient-border-width,
@@ -315,5 +286,4 @@ $kendo-color-gradient-sizes: (
     $kendo-color-gradient-lg-input-width: $kendo-color-gradient-lg-input-width,
     $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight,
     $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer,
-    $kendo-color-gradient-sizes: $kendo-color-gradient-sizes
 );

package/scss/colorpalette/_variables.scss

@@ -2,6 +2,11 @@
 
 // ColorPalette
 
+/// The default size of the ColorPalette.
+/// @group color-palette
+/// @role default
+$kendo-color-palette-default-size: "md" !default;
+
 /// The font family of the ColorPalette.
 /// @group color-palette
 $kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
@@ -47,24 +52,8 @@ $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px color-mix(in srgb, k-color(d
 /// @group color-palette
 $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px color-mix(in srgb, k-color(dark) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, k-color(light) 100%, transparent) !default;
 
-/// The size map of the ColorPalette.
-/// @group color-palette
-$kendo-color-palette-sizes: (
-    sm: (
-        width: $kendo-color-palette-sm-tile-width,
-        height: $kendo-color-palette-sm-tile-height
-    ),
-    md: (
-        width: $kendo-color-palette-md-tile-width,
-        height: $kendo-color-palette-md-tile-height
-    ),
-    lg: (
-        width: $kendo-color-palette-lg-tile-width,
-        height: $kendo-color-palette-lg-tile-height
-    )
-) !default;
-
 @forward "@progress/kendo-theme-core/scss/components/colorpalette/_variables.scss" with (
+    $kendo-color-palette-default-size: $kendo-color-palette-default-size,
     $kendo-color-palette-font-family: $kendo-color-palette-font-family,
     $kendo-color-palette-font-size: $kendo-color-palette-font-size,
     $kendo-color-palette-line-height: $kendo-color-palette-line-height,
@@ -78,6 +67,5 @@ $kendo-color-palette-sizes: (
     $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-height,
     $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
     $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
-    $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow,
-    $kendo-color-palette-sizes: $kendo-color-palette-sizes
+    $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow
 );

package/scss/column-menu/_variables.scss

@@ -1,5 +1,10 @@
 @use "../core/_index.scss" as *;
 
+/// The default size of the ColumnMenu.
+/// @group column-menu
+/// @role default
+$kendo-column-menu-default-size: "md" !default;
+
 /// The horizontal padding of the small ColumnMenu item.
 /// @group column-menu
 $kendo-column-menu-item-sm-padding-x: k-spacing(2) !default;
@@ -51,29 +56,6 @@ $kendo-column-menu-lg-line-height: var( --kendo-line-height-lg, normal ) !defaul
 /// @group column-menu
 $kendo-column-menu-font-family: var( --kendo-font-family, inherit ) !default;
 
-/// The sizes map for the ColumnMenu.
-/// @group column-menu
-$kendo-column-menu-sizes: (
-    sm: (
-        padding-x: $kendo-column-menu-item-sm-padding-x,
-        padding-y: $kendo-column-menu-item-sm-padding-y,
-        font-size: $kendo-column-menu-sm-font-size,
-        line-height: $kendo-column-menu-sm-line-height
-    ),
-    md: (
-        padding-x: $kendo-column-menu-item-md-padding-x,
-        padding-y: $kendo-column-menu-item-md-padding-y,
-        font-size: $kendo-column-menu-md-font-size,
-        line-height: $kendo-column-menu-md-line-height
-    ),
-    lg: (
-        padding-x: $kendo-column-menu-item-lg-padding-x,
-        padding-y: $kendo-column-menu-item-lg-padding-y,
-        font-size: $kendo-column-menu-lg-font-size,
-        line-height: $kendo-column-menu-lg-line-height
-    )
-) !default;
-
 // Group Menu
 /// The background color of the hovered GroupMenu item action.
 /// @group column-menu
@@ -90,6 +72,7 @@ $kendo-group-menu-item-border: k-color(border) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/column-menu/_variables.scss" with (
+    $kendo-column-menu-default-size: $kendo-column-menu-default-size,
     $kendo-column-menu-font-size: $kendo-column-menu-font-size,
     $kendo-column-menu-sm-font-size: $kendo-column-menu-sm-font-size,
     $kendo-column-menu-md-font-size: $kendo-column-menu-md-font-size,
@@ -105,8 +88,6 @@ $kendo-group-menu-item-border: k-color(border) !default;
     $kendo-column-menu-item-md-padding-y: $kendo-column-menu-item-md-padding-y,
     $kendo-column-menu-item-lg-padding-x: $kendo-column-menu-item-lg-padding-x,
     $kendo-column-menu-item-lg-padding-y: $kendo-column-menu-item-lg-padding-y,
-    $kendo-column-menu-sizes: $kendo-column-menu-sizes,
-    // Group Menu
     $kendo-group-menu-item-action-hover-bg: $kendo-group-menu-item-action-hover-bg,
     $kendo-group-menu-item-action-selected-bg: $kendo-group-menu-item-action-selected-bg,
     $kendo-group-menu-item-add-action-text: $kendo-group-menu-item-add-action-text,

package/scss/datetimepicker/_variables.scss

@@ -2,6 +2,11 @@
 
 // DateTime
 
+/// The default size of the DateTimePicker.
+/// @group date-time-picker
+/// @role default
+$kendo-datetime-default-size: "md" !default;
+
 /// The width of the DateTimePicker.
 /// @group date-time-picker
 $kendo-datetime-width: calc( calc( #{$kendo-calendar-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default;
@@ -16,24 +21,10 @@ $kendo-datetime-md-width: $kendo-datetime-width !default;
 /// @group date-time-picker
 $kendo-datetime-lg-width: calc( calc( #{$kendo-calendar-lg-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default;
 
-/// The sizes map for the DateTimePicker.
-/// @group date-time-picker
-$kendo-datetime-sizes: (
-    sm: (
-        width: $kendo-datetime-sm-width
-    ),
-    md: (
-        width: $kendo-datetime-md-width
-    ),
-    lg: (
-        width: $kendo-datetime-lg-width
-    )
-) !default;
-
 @forward "@progress/kendo-theme-core/scss/components/datetimepicker/_variables.scss" with (
     $kendo-datetime-width: $kendo-datetime-width,
     $kendo-datetime-sm-width: $kendo-datetime-sm-width,
     $kendo-datetime-md-width: $kendo-datetime-md-width,
     $kendo-datetime-lg-width: $kendo-datetime-lg-width,
-    $kendo-datetime-sizes: $kendo-datetime-sizes
+    $kendo-datetime-default-size: $kendo-datetime-default-size
 );

package/scss/dialog/_variables.scss

@@ -4,6 +4,11 @@
 
 // Dialog
 
+/// 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: k-color(surface)!default;
@@ -31,15 +36,8 @@ $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 /// @group dialog
 $kendo-dialog-bg: k-color(surface-alt) !default;
 
-/// The theme colors map for the Dialog.
-/// @group dialog
-$kendo-dialog-theme-colors: (
-    "primary": k-color(primary),
-    "light": k-color(light),
-    "dark": k-color(dark)
-) !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,
@@ -47,6 +45,5 @@ $kendo-dialog-theme-colors: (
     $kendo-dialog-buttongroup-padding-y: $kendo-dialog-buttongroup-padding-y,
     $kendo-dialog-buttongroup-border-width: $kendo-dialog-buttongroup-border-width,
     $kendo-dialog-button-spacing: $kendo-dialog-button-spacing,
-    $kendo-dialog-bg: $kendo-dialog-bg,
-    $kendo-dialog-theme-colors: $kendo-dialog-theme-colors
+    $kendo-dialog-bg: $kendo-dialog-bg
 );