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

package/scss/otp/_variables.scss

@@ -33,26 +33,6 @@ $kendo-otp-md-input-width: $kendo-input-md-calc-size !default;
 /// @group one-time-password
 $kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;
 
-/// The sizes map of the OTP.
-/// @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;
-
 @forward "@progress/kendo-theme-core/scss/components/otp/_variables.scss" with (
     $kendo-otp-sm-gap: $kendo-otp-sm-gap,
     $kendo-otp-md-gap: $kendo-otp-md-gap,
@@ -62,6 +42,5 @@ $kendo-otp-sizes: (
     $kendo-otp-lg-separator-padding-x: $kendo-otp-lg-separator-padding-x,
     $kendo-otp-sm-input-width: $kendo-otp-sm-input-width,
     $kendo-otp-md-input-width: $kendo-otp-md-input-width,
-    $kendo-otp-lg-input-width: $kendo-otp-lg-input-width,
-    $kendo-otp-sizes: $kendo-otp-sizes
+    $kendo-otp-lg-input-width: $kendo-otp-lg-input-width
 );

package/scss/overlay/_variables.scss

@@ -1,30 +1,18 @@
-@use "../core/_index.scss" as *;
-
-/// The theme colors map for the Overlay.
+/// The default theme color of the Overlay.
 /// @group overlay
-$kendo-overlay-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;
+/// @role default
+$kendo-overlay-default-theme-color: "inverse" !default;
 
 /// The background color of the Overlay.
 /// @group overlay
-$kendo-overlay-bg: $kendo-color-black !default;
+$kendo-overlay-bg: null !default;
 /// The opacity of the Overlay.
 /// @group overlay
 $kendo-overlay-opacity: .5 !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (
-    $kendo-overlay-theme-colors: $kendo-overlay-theme-colors,
+    $kendo-overlay-default-theme-color: $kendo-overlay-default-theme-color,
     $kendo-overlay-bg: $kendo-overlay-bg,
     $kendo-overlay-opacity: $kendo-overlay-opacity
 );

package/scss/pager/_variables.scss

@@ -4,6 +4,11 @@
 
 // Pager
 
+/// The default size of the Pager.
+/// @group pager
+/// @role default
+$kendo-pager-default-size: "md" !default;
+
 /// The horizontal padding of the small Pager.
 /// @group pager
 $kendo-pager-sm-padding-x: k-spacing(1) !default;
@@ -87,31 +92,8 @@ $kendo-pager-input-width: 5em !default;
 /// @group pager
 $kendo-pager-dropdown-width: 5em !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;
-
-
 @forward "@progress/kendo-theme-core/scss/components/pager/_variables.scss" with (
+    $kendo-pager-default-size: $kendo-pager-default-size,
     $kendo-pager-sm-padding-x: $kendo-pager-sm-padding-x,
     $kendo-pager-md-padding-x: $kendo-pager-md-padding-x,
     $kendo-pager-lg-padding-x: $kendo-pager-lg-padding-x,
@@ -136,6 +118,5 @@ $kendo-pager-sizes: (
     $kendo-pager-item-border-width: $kendo-pager-item-border-width,
     $kendo-pager-item-spacing: $kendo-pager-item-spacing,
     $kendo-pager-input-width: $kendo-pager-input-width,
-    $kendo-pager-dropdown-width: $kendo-pager-dropdown-width,
-    $kendo-pager-sizes: $kendo-pager-sizes
+    $kendo-pager-dropdown-width: $kendo-pager-dropdown-width
 );

package/scss/radio/_variables.scss

@@ -42,26 +42,6 @@ $kendo-radio-md-ripple-size: 300% !default;
 /// @group radio
 $kendo-radio-lg-ripple-size: 300% !default;
 
-/// The map with the different RadioButton sizes.
-/// @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;
-
 /// The background color of the RadioButton.
 /// @group radio
 $kendo-radio-bg: $kendo-checkbox-bg !default;
@@ -184,6 +164,10 @@ $kendo-radio-ripple-bg: $kendo-radio-checked-bg !default;
 /// @group radio
 $kendo-radio-ripple-opacity: .25 !default;
 
+/// The default size of the RadioButton.
+/// @group radio
+/// @role default
+$kendo-radio-default-size: "md" !default;
 
 @forward "@progress/kendo-theme-core/scss/components/radio/_variables.scss" with (
     $kendo-radio-radius: $kendo-radio-radius,
@@ -197,7 +181,6 @@ $kendo-radio-ripple-opacity: .25 !default;
     $kendo-radio-sm-ripple-size: $kendo-radio-sm-ripple-size,
     $kendo-radio-md-ripple-size: $kendo-radio-md-ripple-size,
     $kendo-radio-lg-ripple-size: $kendo-radio-lg-ripple-size,
-    $kendo-radio-sizes: $kendo-radio-sizes,
     $kendo-radio-bg: $kendo-radio-bg,
     $kendo-radio-text: $kendo-radio-text,
     $kendo-radio-border: $kendo-radio-border,
@@ -229,5 +212,6 @@ $kendo-radio-ripple-opacity: .25 !default;
     $kendo-radio-list-item-padding-x: $kendo-radio-list-item-padding-x,
     $kendo-radio-list-item-padding-y: $kendo-radio-list-item-padding-y,
     $kendo-radio-ripple-bg: $kendo-radio-ripple-bg,
-    $kendo-radio-ripple-opacity: $kendo-radio-ripple-opacity
+    $kendo-radio-ripple-opacity: $kendo-radio-ripple-opacity,
+    $kendo-radio-default-size: $kendo-radio-default-size
 );

package/scss/signature/_variables.scss

@@ -64,26 +64,6 @@ $kendo-signature-lg-line-size: calc( 100% - 2 * #{$kendo-signature-lg-padding-x}
 /// @group signature
 $kendo-signature-line-bottom-offset: 33% !default;
 
-/// The sizes map for the Signature.
-/// @group signature
-$kendo-signature-sizes: (
-    sm: (
-        padding-x: $kendo-signature-sm-padding-x,
-        padding-y: $kendo-signature-sm-padding-y,
-        line-size: $kendo-signature-sm-line-size
-    ),
-    md: (
-        padding-x: $kendo-signature-md-padding-x,
-        padding-y: $kendo-signature-md-padding-y,
-        line-size: $kendo-signature-md-line-size
-    ),
-    lg: (
-        padding-x: $kendo-signature-lg-padding-x,
-        padding-y: $kendo-signature-lg-padding-y,
-        line-size: $kendo-signature-lg-line-size
-    )
-) !default;
-
 /// The gap between the Signature actions.
 /// @group signature
 $kendo-signature-actions-gap: k-spacing(1) !default;
@@ -111,7 +91,6 @@ $kendo-signature-maximized-line-width: 3px !default;
     $kendo-signature-md-line-size: $kendo-signature-md-line-size,
     $kendo-signature-lg-line-size: $kendo-signature-lg-line-size,
     $kendo-signature-line-bottom-offset: $kendo-signature-line-bottom-offset,
-    $kendo-signature-sizes: $kendo-signature-sizes,
     $kendo-signature-actions-gap: $kendo-signature-actions-gap,
     $kendo-signature-maximized-line-width: $kendo-signature-maximized-line-width
 );

package/scss/split-button/_variables.scss

@@ -8,7 +8,7 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 
 /// The horizontal padding of the arrow Button.
 /// @group split-button
-$kendo-split-button-arrow-padding-x: $kendo-button-md-padding-y !default;
+$kendo-split-button-arrow-padding-x: null !default;
 /// The horizontal padding of the small arrow Button.
 /// @group split-button
 $kendo-split-button-sm-arrow-padding-x: $kendo-button-sm-padding-y !default;
@@ -21,7 +21,7 @@ $kendo-split-button-lg-arrow-padding-x: $kendo-button-lg-padding-y !default;
 
 /// The vertical padding of the arrow Button.
 /// @group split-button
-$kendo-split-button-arrow-padding-y: $kendo-button-md-padding-y !default;
+$kendo-split-button-arrow-padding-y: null !default;
 /// The vertical padding of the small arrow Button.
 /// @group split-button
 $kendo-split-button-sm-arrow-padding-y: $kendo-button-sm-padding-y !default;

package/scss/spreadsheet/_variables.scss

@@ -84,7 +84,7 @@ $kendo-spreadsheet-formula-input-padding-x: $kendo-input-md-padding-x !default;
 $kendo-spreadsheet-formula-input-padding-y: $kendo-input-md-padding-y !default;
 /// The line height of the Spreadsheet formula input.
 /// @group spreadsheet
-$kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;
+$kendo-spreadsheet-formula-input-line-height: $kendo-input-md-line-height !default;
 
 /// The padding of the Spreadsheet formula bar icon.
 /// @group spreadsheet

package/scss/suggestion/_variables.scss

@@ -24,36 +24,6 @@ $kendo-suggestion-line-height: var( --kendo-line-height, normal ) !default;
 /// @group suggestion
 $kendo-suggestion-border-radius: k-border-radius(xxl) !default;
 
-/// The background color of the Suggestion.
-/// @group suggestion
-$kendo-suggestion-bg: k-color(base-subtle) !default;
-/// The text color of the Suggestion.
-/// @group suggestion
-$kendo-suggestion-text: k-color(base-on-subtle) !default;
-/// The border color of the Suggestion.
-/// @group suggestion
-$kendo-suggestion-border: k-color(base-emphasis) !default;
-
-/// The background color of the hovered Suggestion.
-/// @group suggestion
-$kendo-suggestion-hover-bg: k-color(base-subtle-hover) !default;
-/// The text color of the hovered Suggestion.
-/// @group suggestion
-$kendo-suggestion-hover-text: k-color(base-on-subtle) !default;
-/// The border color of the hovered Suggestion.
-/// @group suggestion
-$kendo-suggestion-hover-border: k-color(base-emphasis) !default;
-
-/// The background color of the active Suggestion.
-/// @group suggestion
-$kendo-suggestion-active-bg: k-color(base-subtle-active) !default;
-/// The text color of the active Suggestion.
-/// @group suggestion
-$kendo-suggestion-active-text: k-color(base-on-subtle) !default;
-/// The border color of the active Suggestion.
-/// @group suggestion
-$kendo-suggestion-active-border: k-color(base-emphasis) !default;
-
 /// The shadow blur of the focused Suggestion.
 /// @group suggestion
 $kendo-suggestion-focus-shadow-blur: 0 !default;
@@ -64,12 +34,10 @@ $kendo-suggestion-focus-shadow-spread: 2px !default;
 /// @group suggestion
 $kendo-suggestion-focus-shadow-color: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
-/// The theme colors map of the Suggestion.
+/// The default theme color of the Suggestion.
 /// @group suggestion
-$kendo-suggestion-theme-colors: (
-    "primary": k-color(primary),
-    "secondary": k-color(secondary)
-) !default;
+/// @role default
+$kendo-suggestion-default-theme-color: "base" !default;
 
 @forward "@progress/kendo-theme-core/scss/components/suggestion/_variables.scss" with (
     $kendo-suggestion-padding-y: $kendo-suggestion-padding-y,
@@ -79,17 +47,8 @@ $kendo-suggestion-theme-colors: (
     $kendo-suggestion-border-style: $kendo-suggestion-border-style,
     $kendo-suggestion-line-height: $kendo-suggestion-line-height,
     $kendo-suggestion-border-radius: $kendo-suggestion-border-radius,
-    $kendo-suggestion-bg: $kendo-suggestion-bg,
-    $kendo-suggestion-text: $kendo-suggestion-text,
-    $kendo-suggestion-border: $kendo-suggestion-border,
-    $kendo-suggestion-hover-bg: $kendo-suggestion-hover-bg,
-    $kendo-suggestion-hover-text: $kendo-suggestion-hover-text,
-    $kendo-suggestion-hover-border: $kendo-suggestion-hover-border,
-    $kendo-suggestion-active-bg: $kendo-suggestion-active-bg,
-    $kendo-suggestion-active-text: $kendo-suggestion-active-text,
-    $kendo-suggestion-active-border: $kendo-suggestion-active-border,
     $kendo-suggestion-focus-shadow-blur: $kendo-suggestion-focus-shadow-blur,
     $kendo-suggestion-focus-shadow-spread: $kendo-suggestion-focus-shadow-spread,
     $kendo-suggestion-focus-shadow-color: $kendo-suggestion-focus-shadow-color,
-    $kendo-suggestion-theme-colors: $kendo-suggestion-theme-colors
+    $kendo-suggestion-default-theme-color: $kendo-suggestion-default-theme-color
 );

package/scss/switch/_variables.scss

@@ -3,6 +3,19 @@
 
 // Switch
 
+/// The default size of the Switch.
+/// @group switch
+/// @role default
+$kendo-switch-default-size: "md" !default;
+/// The default border radius of the Switch track.
+/// @group switch
+/// @role default
+$kendo-switch-default-track-roundness: "full" !default;
+/// The default border radius of the Switch thumb.
+/// @group switch
+/// @role default
+$kendo-switch-default-thumb-roundness: "full" !default;
+
 /// The font family of the Switch.
 /// @group switch
 $kendo-switch-font-family: null !default;
@@ -23,13 +36,71 @@ $kendo-switch-label-text-transform: unset !default;
 /// @group switch
 $kendo-switch-label-display: inline !default;
 
-/// The map with the different Switch sizes.
+/// The font size of the small Switch.
+/// @group switch
+$kendo-switch-sm-font-size: 12px !default;
+/// The track width of the small Switch.
+/// @group switch
+$kendo-switch-sm-track-width: 48px !default;
+/// The track height of the small Switch.
+/// @group switch
+$kendo-switch-sm-track-height: 26px !default;
+/// The thumb width of the small Switch.
+/// @group switch
+$kendo-switch-sm-thumb-width: 20px !default;
+/// The thumb height of the small Switch.
+/// @group switch
+$kendo-switch-sm-thumb-height: 20px !default;
+/// The thumb offset of the small Switch.
+/// @group switch
+$kendo-switch-sm-thumb-offset: 3px !default;
+/// The label offset of the small Switch.
+/// @group switch
+$kendo-switch-sm-label-offset: 4px !default;
+
+/// The font size of the medium Switch.
+/// @group switch
+$kendo-switch-md-font-size: 12px !default;
+/// The track width of the medium Switch.
+/// @group switch
+$kendo-switch-md-track-width: 56px !default;
+/// The track height of the medium Switch.
+/// @group switch
+$kendo-switch-md-track-height: 30px !default;
+/// The thumb width of the medium Switch.
+/// @group switch
+$kendo-switch-md-thumb-width: 24px !default;
+/// The thumb height of the medium Switch.
+/// @group switch
+$kendo-switch-md-thumb-height: 24px !default;
+/// The thumb offset of the medium Switch.
+/// @group switch
+$kendo-switch-md-thumb-offset: 3px !default;
+/// The label offset of the medium Switch.
+/// @group switch
+$kendo-switch-md-label-offset: 6px !default;
+
+/// The font size of the large Switch.
+/// @group switch
+$kendo-switch-lg-font-size: 12px !default;
+/// The track width of the large Switch.
+/// @group switch
+$kendo-switch-lg-track-width: 64px !default;
+/// The track height of the large Switch.
+/// @group switch
+$kendo-switch-lg-track-height: 34px !default;
+/// The thumb width of the large Switch.
+/// @group switch
+$kendo-switch-lg-thumb-width: 28px !default;
+/// The thumb height of the large Switch.
+/// @group switch
+$kendo-switch-lg-thumb-height: 28px !default;
+/// The thumb offset of the large Switch.
+/// @group switch
+$kendo-switch-lg-thumb-offset: 3px !default;
+/// The label offset of the large Switch.
 /// @group switch
-$kendo-switch-sizes: (
-    sm: ( font-size: 12px, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: 4px ),
-    md: ( font-size: 12px, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: 6px ),
-    lg: ( font-size: 12px, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: 8px )
-) !default;
+$kendo-switch-lg-label-offset: 8px !default;
 
 /// The background of the track when the Switch is not checked.
 /// @group switch
@@ -221,12 +292,35 @@ $kendo-switch-on-thumb-disabled-border: null !default;
 $kendo-switch-on-thumb-disabled-gradient: null !default;
 
 @forward "@progress/kendo-theme-core/scss/components/switch/_variables.scss" with (
+    $kendo-switch-default-size: $kendo-switch-default-size,
+    $kendo-switch-default-track-roundness: $kendo-switch-default-track-roundness,
+    $kendo-switch-default-thumb-roundness: $kendo-switch-default-thumb-roundness,
     $kendo-switch-font-family: $kendo-switch-font-family,
     $kendo-switch-track-border-width: $kendo-switch-track-border-width,
     $kendo-switch-thumb-border-width: $kendo-switch-thumb-border-width,
     $kendo-switch-label-text-transform: $kendo-switch-label-text-transform,
     $kendo-switch-label-display: $kendo-switch-label-display,
-    $kendo-switch-sizes: $kendo-switch-sizes,
+    $kendo-switch-sm-font-size: $kendo-switch-sm-font-size,
+    $kendo-switch-sm-track-width: $kendo-switch-sm-track-width,
+    $kendo-switch-sm-track-height: $kendo-switch-sm-track-height,
+    $kendo-switch-sm-thumb-width: $kendo-switch-sm-thumb-width,
+    $kendo-switch-sm-thumb-height: $kendo-switch-sm-thumb-height,
+    $kendo-switch-sm-thumb-offset: $kendo-switch-sm-thumb-offset,
+    $kendo-switch-sm-label-offset: $kendo-switch-sm-label-offset,
+    $kendo-switch-md-font-size: $kendo-switch-md-font-size,
+    $kendo-switch-md-track-width: $kendo-switch-md-track-width,
+    $kendo-switch-md-track-height: $kendo-switch-md-track-height,
+    $kendo-switch-md-thumb-width: $kendo-switch-md-thumb-width,
+    $kendo-switch-md-thumb-height: $kendo-switch-md-thumb-height,
+    $kendo-switch-md-thumb-offset: $kendo-switch-md-thumb-offset,
+    $kendo-switch-md-label-offset: $kendo-switch-md-label-offset,
+    $kendo-switch-lg-font-size: $kendo-switch-lg-font-size,
+    $kendo-switch-lg-track-width: $kendo-switch-lg-track-width,
+    $kendo-switch-lg-track-height: $kendo-switch-lg-track-height,
+    $kendo-switch-lg-thumb-width: $kendo-switch-lg-thumb-width,
+    $kendo-switch-lg-thumb-height: $kendo-switch-lg-thumb-height,
+    $kendo-switch-lg-thumb-offset: $kendo-switch-lg-thumb-offset,
+    $kendo-switch-lg-label-offset: $kendo-switch-lg-label-offset,
     $kendo-switch-off-track-bg: $kendo-switch-off-track-bg,
     $kendo-switch-off-track-text: $kendo-switch-off-track-text,
     $kendo-switch-off-track-border: $kendo-switch-off-track-border,

package/scss/table/_variables.scss

@@ -4,6 +4,11 @@
 
 // Table
 
+/// The default size of the Table.
+/// @group table
+/// @role default
+$kendo-table-default-size: "md" !default;
+
 /// The width of the table border.
 /// @group table
 $kendo-table-border-width: 1px !default;
@@ -43,30 +48,6 @@ $kendo-table-lg-cell-padding-x: k-spacing(2) !default;
 /// @group table
 $kendo-table-lg-cell-padding-y: k-spacing(2.5) !default;
 
-/// The sizes of the table.
-/// @group table
-$kendo-table-sizes: (
-    sm: (
-        font-size: var( --kendo-font-size, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        cell-padding-x: $kendo-table-sm-cell-padding-x,
-        cell-padding-y: $kendo-table-sm-cell-padding-y
-    ),
-    md: (
-        font-size: var( --kendo-font-size, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        cell-padding-x: $kendo-table-md-cell-padding-x,
-        cell-padding-y: $kendo-table-md-cell-padding-y
-    ),
-    lg: (
-        font-size: var( --kendo-font-size, inherit ),
-        line-height: var( --kendo-line-height, normal ),
-        cell-padding-x: $kendo-table-lg-cell-padding-x,
-        cell-padding-y: $kendo-table-lg-cell-padding-y
-    )
-) !default;
-
-
 /// Background color of tables.
 /// @group table
 $kendo-table-bg: k-color(surface-alt) !default;
@@ -177,6 +158,7 @@ $kendo-table-cell-row-span-shadow: inset 0 0 0 1px $kendo-table-border !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/table/_variables.scss" with (
+    $kendo-table-default-size: $kendo-table-default-size,
     $kendo-table-border-width: $kendo-table-border-width,
     $kendo-table-cell-vertical-border-width: $kendo-table-cell-vertical-border-width,
     $kendo-table-cell-horizontal-border-width: $kendo-table-cell-horizontal-border-width,
@@ -188,7 +170,6 @@ $kendo-table-cell-row-span-shadow: inset 0 0 0 1px $kendo-table-border !default;
     $kendo-table-md-cell-padding-y: $kendo-table-md-cell-padding-y,
     $kendo-table-lg-cell-padding-x: $kendo-table-lg-cell-padding-x,
     $kendo-table-lg-cell-padding-y: $kendo-table-lg-cell-padding-y,
-    $kendo-table-sizes: $kendo-table-sizes,
     $kendo-table-bg: $kendo-table-bg,
     $kendo-table-text: $kendo-table-text,
     $kendo-table-border: $kendo-table-border,

package/scss/tabstrip/_variables.scss

@@ -3,6 +3,10 @@
 
 // TabStrip
 
+/// The default size of the TabStrip.
+/// @group tabstrip
+/// @role default
+$kendo-tabstrip-default-size: "md" !default;
 
 /// The horizontal padding of the TabStrip wrapper.
 /// @group tabstrip
@@ -197,30 +201,8 @@ $kendo-tabstrip-content-focus-border: k-color(on-app-surface) !default;
 /// @group tabstrip
 $kendo-tabstrip-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
-/// The size map of the TabStrip.
-/// @group tabstrip
-$kendo-tabstrip-sizes: (
-    sm: (
-        font-size: $kendo-tabstrip-sm-font-size,
-        line-height: $kendo-tabstrip-sm-line-height,
-        item-padding-x: $kendo-tabstrip-sm-item-padding-x,
-        item-padding-y: $kendo-tabstrip-sm-item-padding-y
-    ),
-    md: (
-        font-size: $kendo-tabstrip-md-font-size,
-        line-height: $kendo-tabstrip-md-line-height,
-        item-padding-x: $kendo-tabstrip-md-item-padding-x,
-        item-padding-y: $kendo-tabstrip-md-item-padding-y
-    ),
-    lg: (
-        font-size: $kendo-tabstrip-lg-font-size,
-        line-height: $kendo-tabstrip-lg-line-height,
-        item-padding-x: $kendo-tabstrip-lg-item-padding-x,
-        item-padding-y: $kendo-tabstrip-lg-item-padding-y
-    )
-) !default;
-
 @forward "@progress/kendo-theme-core/scss/components/tabstrip/_variables.scss" with (
+    $kendo-tabstrip-default-size: $kendo-tabstrip-default-size,
     $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x,
     $kendo-tabstrip-wrapper-padding-y: $kendo-tabstrip-wrapper-padding-y,
     $kendo-tabstrip-wrapper-border-width: $kendo-tabstrip-wrapper-border-width,
@@ -279,6 +261,5 @@ $kendo-tabstrip-sizes: (
     $kendo-tabstrip-content-text: $kendo-tabstrip-content-text,
     $kendo-tabstrip-content-border: $kendo-tabstrip-content-border,
     $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border,
-    $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay,
-    $kendo-tabstrip-sizes: $kendo-tabstrip-sizes
+    $kendo-tabstrip-scroll-overlay: $kendo-tabstrip-scroll-overlay
 );

package/scss/timeselector/_variables.scss

@@ -4,6 +4,11 @@
 
 // Time selector
 
+/// The default size of the TimeSelector.
+/// @group time-selector
+/// @role default
+$kendo-time-selector-default-size: "md" !default;
+
 /// The width of the border around the TimeSelector.
 /// @group time-selector
 $kendo-time-selector-border-width: 1px !default;
@@ -12,10 +17,10 @@ $kendo-time-selector-border-width: 1px !default;
 $kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the TimeSelector.
 /// @group time-selector
-$kendo-time-selector-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-time-selector-font-size: null !default;
 /// The line height of the TimeSelector.
 /// @group time-selector
-$kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-time-selector-line-height: null !default;
 
 /// The background color of the TimeSelector.
 /// @group time-selector
@@ -76,23 +81,6 @@ $kendo-time-list-item-padding-x: $kendo-list-md-item-padding-x !default;
 /// @group time-selector
 $kendo-time-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
-/// The width of the border around the TimeSelector list highlight.
-/// @group time-selector
-$kendo-time-list-highlight-border-width: 1px 0px !default;
-/// The height of the TimeSelector list highlight.
-/// @group time-selector
-$kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
-/// The background color of the TimeSelector list highlight.
-/// @group time-selector
-$kendo-time-list-highlight-bg: k-color(surface-alt) !default;
-/// The border color of the TimeSelector list highlight.
-/// @group time-selector
-$kendo-time-list-highlight-border: k-color(border) !default;
-
-/// The background color of the focused TimeSelector list.
-/// @group time-selector
-$kendo-time-list-focus-bg: rgba( black, .04 ) !default;
-
 
 // Time selector sizes
 /// The font size of the small TimeSelector.
@@ -134,28 +122,22 @@ $kendo-time-selector-lg-list-item-padding-x: $kendo-list-lg-item-padding-x !defa
 /// @group time-selector
 $kendo-time-selector-lg-list-item-padding-y: $kendo-list-lg-item-padding-y !default;
 
-/// The sizes map for the TimeSelector.
-/// @group time-selector
-$kendo-time-selector-sizes: (
-    sm: (
-        font-size: $kendo-time-selector-sm-font-size,
-        line-height: $kendo-time-selector-sm-line-height,
-        list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
-        list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
-    ),
-    md: (
-        font-size: $kendo-time-selector-md-font-size,
-        line-height: $kendo-time-selector-md-line-height,
-        list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
-        list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
-    ),
-    lg: (
-        font-size: $kendo-time-selector-lg-font-size,
-        line-height: $kendo-time-selector-lg-line-height,
-        list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
-        list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
-    )
-) !default;
+/// The width of the border around the TimeSelector list highlight.
+/// @group time-selector
+$kendo-time-list-highlight-border-width: 1px 0px !default;
+/// The height of the TimeSelector list highlight.
+/// @group time-selector
+$kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-md-font-size} * #{$kendo-time-selector-md-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
+/// The background color of the TimeSelector list highlight.
+/// @group time-selector
+$kendo-time-list-highlight-bg: k-color(surface-alt) !default;
+/// The border color of the TimeSelector list highlight.
+/// @group time-selector
+$kendo-time-list-highlight-border: k-color(border) !default;
+
+/// The background color of the focused TimeSelector list.
+/// @group time-selector
+$kendo-time-list-focus-bg: rgba( black, .04 ) !default;
 
 /// The text color of the TimeSelector button.
 /// @group time-selector
@@ -165,6 +147,7 @@ $kendo-time-selector-now-button-text: k-color(primary) !default;
 $kendo-time-selector-now-button-hover-text: k-color(primary-hover) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/timeselector/_variables.scss" with (
+    $kendo-time-selector-default-size: $kendo-time-selector-default-size,
     $kendo-time-selector-border-width: $kendo-time-selector-border-width,
     $kendo-time-selector-font-family: $kendo-time-selector-font-family,
     $kendo-time-selector-font-size: $kendo-time-selector-font-size,
@@ -204,7 +187,6 @@ $kendo-time-selector-now-button-hover-text: k-color(primary-hover) !default;
     $kendo-time-selector-lg-line-height: $kendo-time-selector-lg-line-height,
     $kendo-time-selector-lg-list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
     $kendo-time-selector-lg-list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y,
-    $kendo-time-selector-sizes: $kendo-time-selector-sizes,
     $kendo-time-selector-now-button-text: $kendo-time-selector-now-button-text,
     $kendo-time-selector-now-button-hover-text: $kendo-time-selector-now-button-hover-text
 );