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

package/scss/components/signature/_layout.scss

@@ -1,6 +1,8 @@
 @use "sass:map";
 @use "./variables.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../input/_variables.scss" as *;
 
 @mixin kendo-signature--layout-base() {
 
@@ -21,6 +23,30 @@
                 border-block-end-width: $kendo-signature-maximized-line-width;
             }
         }
+
+        // Sizes
+        @each $size, $size-props in $kendo-signature-sizes {
+            $_padding-x: map.get($size-props, padding-x);
+            $_padding-y: map.get($size-props, padding-y);
+            $_line-size: map.get($size-props, line-size);
+            $_line-offset: map.get($size-props, line-offset);
+
+            #{k-when-default($kendo-input-default-size, $size)}
+            &.k-signature-#{$size} {
+                padding-inline: $_padding-x;
+                padding-block: $_padding-y;
+
+                .k-signature-line {
+                    width: $_line-size;
+                }
+            }
+        }
+
+        #{k-when-default($kendo-input-default-size, "lg")}
+        &.k-signature-lg {
+            min-height: $kendo-signature-lg-min-height;
+        }
+
     }
 
     .k-signature-actions {
@@ -51,25 +77,4 @@
         border-block-end-style: $kendo-signature-line-style;
     }
 
-    // Sizes
-    @each $size, $size-props in $kendo-signature-sizes {
-        $_padding-x: map.get($size-props, padding-x);
-        $_padding-y: map.get($size-props, padding-y);
-        $_line-size: map.get($size-props, line-size);
-        $_line-offset: map.get($size-props, line-offset);
-
-        .k-signature-#{$size} {
-            padding-inline: $_padding-x;
-            padding-block: $_padding-y;
-
-            .k-signature-line {
-                width: $_line-size;
-            }
-        }
-    }
-
-    .k-signature-lg {
-        min-height: $kendo-signature-lg-min-height;
-    }
-
 }

package/scss/components/signature/_variables.scss

@@ -24,7 +24,25 @@ $kendo-signature-lg-line-size: null !default;
 
 $kendo-signature-line-bottom-offset: null !default;
 
-$kendo-signature-sizes: null !default;
+/// The sizes map of 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;
 
 $kendo-signature-actions-gap: null !default;
 $kendo-signature-maximized-line-width: null !default;

package/scss/components/split-button/_layout.scss

@@ -1,4 +1,6 @@
+@use "../../functions/index.scss" as *;
 @use "./_variables.scss" as *;
+@use "../button/_variables.scss" as *;
 
 @mixin kendo-split-button--layout-base() {
 
@@ -7,27 +9,31 @@
 
     // Split button arrow
     .k-split-button .k-split-button-arrow {
-        padding-block: $kendo-split-button-arrow-padding-y;
-        padding-inline: $kendo-split-button-arrow-padding-x;
         width: auto;
         aspect-ratio: auto;
         flex: none;
 
+        #{k-when-default($kendo-button-default-size, "sm")}
         &.k-button-sm {
             padding-block: $kendo-split-button-sm-arrow-padding-y;
             padding-inline: $kendo-split-button-sm-arrow-padding-x;
         }
 
+        #{k-when-default($kendo-button-default-size, "md")}
         &.k-button-md {
             padding-block: $kendo-split-button-md-arrow-padding-y;
             padding-inline: $kendo-split-button-md-arrow-padding-x;
         }
 
+        #{k-when-default($kendo-button-default-size, "lg")}
         &.k-button-lg {
             padding-block: $kendo-split-button-lg-arrow-padding-y;
             padding-inline: $kendo-split-button-lg-arrow-padding-x;
         }
 
+        padding-block: $kendo-split-button-arrow-padding-y;
+        padding-inline: $kendo-split-button-arrow-padding-x;
+
         .k-button-icon {
             min-width: 0;
         }

package/scss/components/spreadsheet/_layout.scss

@@ -610,6 +610,7 @@
             cursor: pointer;
 
             > .k-icon,
+            > .k-icon-wrapper-host,
             > .k-expander-indicator {
                 margin-inline-end: $kendo-spreadsheet-filter-padding;
             }

package/scss/components/suggestion/_theme.scss

@@ -1,80 +1,54 @@
 @use "./_variables.scss" as *;
 @use "../../mixins/index.scss" as *;
-
 @use "../../spacing/index.scss" as *;
 @use "../../color-system/_functions.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../_variables.scss" as *;
 
 @mixin kendo-suggestion--theme-base() {
     .k-suggestion {
-        @include fill(
-            $kendo-suggestion-text,
-            $kendo-suggestion-bg,
-            $kendo-suggestion-border
-        );
-
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $kendo-suggestion-hover-text,
-                $kendo-suggestion-hover-bg,
-                $kendo-suggestion-hover-border
-            );
-        }
-
-        &:active,
-        &.k-active {
-            @include fill(
-                $kendo-suggestion-active-text,
-                $kendo-suggestion-active-bg,
-                $kendo-suggestion-active-border
-            );
-        }
 
         &:focus,
         &.k-focus {
             @include focus-indicator( 0 0 $kendo-suggestion-focus-shadow-blur $kendo-suggestion-focus-shadow-spread $kendo-suggestion-focus-shadow-color );
         }
-    }
-
-    @each $name, $props in $kendo-suggestion-theme-colors {
-
-        $_suggestion-text: k-color(#{$name}-on-subtle);
-        $_suggestion-bg: k-color(#{$name}-subtle);
-        $_suggestion-border: k-color(#{$name}-emphasis);
 
-        $_suggestion-hover-text: k-color(#{$name}-on-subtle);
-        $_suggestion-hover-bg: k-color(#{$name}-subtle-hover);
-        $_suggestion-hover-border: k-color(#{$name}-emphasis);
-
-        $_suggestion-active-text: k-color(#{$name}-on-subtle);
-        $_suggestion-active-bg: k-color(#{$name}-subtle-active);
-        $_suggestion-active-border: k-color(#{$name}-emphasis);
-
-
-        .k-suggestion-#{$name} {
-            @include fill(
-                $_suggestion-text,
-                $_suggestion-bg,
-                $_suggestion-border
-            );
-
-            &:hover,
-            &.k-hover {
+        @each $name, $props in $kendo-suggestion-theme-colors {
+            $_suggestion-text: k-color(#{$name}-on-subtle);
+            $_suggestion-bg: k-color(#{$name}-subtle);
+            $_suggestion-border: k-color(#{$name}-emphasis);
+            $_suggestion-hover-text: k-color(#{$name}-on-subtle);
+            $_suggestion-hover-bg: k-color(#{$name}-subtle-hover);
+            $_suggestion-hover-border: k-color(#{$name}-emphasis);
+            $_suggestion-active-text: k-color(#{$name}-on-subtle);
+            $_suggestion-active-bg: k-color(#{$name}-subtle-active);
+            $_suggestion-active-border: k-color(#{$name}-emphasis);
+
+            #{k-when-default($kendo-suggestion-default-theme-color, $name)}
+            &.k-suggestion-#{$name} {
                 @include fill(
-                    $_suggestion-hover-text,
-                    $_suggestion-hover-bg,
-                    $_suggestion-hover-border
+                    $_suggestion-text,
+                    $_suggestion-bg,
+                    $_suggestion-border
                 );
-            }
 
-            &:active,
-            &.k-active {
-                @include fill(
-                    $_suggestion-active-text,
-                    $_suggestion-active-bg,
-                    $_suggestion-active-border
-                );
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $_suggestion-hover-text,
+                        $_suggestion-hover-bg,
+                        $_suggestion-hover-border
+                    );
+                }
+
+                &:active,
+                &.k-active {
+                    @include fill(
+                        $_suggestion-active-text,
+                        $_suggestion-active-bg,
+                        $_suggestion-active-border
+                    );
+                }
             }
         }
     }

package/scss/components/suggestion/_variables.scss

@@ -6,21 +6,14 @@ $kendo-suggestion-border-width: null !default;
 $kendo-suggestion-border-style: null !default;
 
 $kendo-suggestion-line-height: null !default;
-$kendo-suggestion-bg: null !default;
-$kendo-suggestion-text: null !default;
-$kendo-suggestion-border: null !default;
 $kendo-suggestion-border-radius: null !default;
 
-$kendo-suggestion-hover-bg: null !default;
-$kendo-suggestion-hover-text: null !default;
-$kendo-suggestion-hover-border: null !default;
-
-$kendo-suggestion-active-bg: null !default;
-$kendo-suggestion-active-text: null !default;
-$kendo-suggestion-active-border: null !default;
-
 $kendo-suggestion-focus-shadow-blur: null !default;
 $kendo-suggestion-focus-shadow-spread: null !default;
 $kendo-suggestion-focus-shadow-color: null !default;
 
-$kendo-suggestion-theme-colors: null !default;
+/// The theme colors map of the Suggestion.
+/// @group suggestion
+$kendo-suggestion-theme-colors: ("base", "primary", "secondary") !default;
+
+$kendo-suggestion-default-theme-color: null !default;

package/scss/components/switch/_layout.scss

@@ -2,6 +2,8 @@
 @use "sass:math";
 @use "../../color-system/_constants.scss" as *;
 @use "../../motion/index.scss" as *;
+@use "../../functions/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-switch--layout-base() {
@@ -33,6 +35,48 @@
         &[aria-readonly="true"] {
             pointer-events: none;
         }
+
+        // Switch sizes
+        @each $size, $size-props in $kendo-switch-sizes {
+
+            $_font-size: map.get( $size-props, font-size );
+            $_track-width: map.get( $size-props, track-width );
+            $_track-height: map.get( $size-props, track-height );
+            $_thumb-width: map.get( $size-props, thumb-width );
+            $_thumb-height: map.get( $size-props, thumb-height );
+            $_thumb-offset: map.get( $size-props, thumb-offset );
+            $_label-offset: map.get( $size-props, label-offset );
+
+            #{k-when-default($kendo-switch-default-size, $size)}
+            &.k-switch-#{$size} {
+                width: $_track-width;
+                height: $_track-height;
+                font-size: $_font-size;
+
+                .k-switch-track {
+                    width: $_track-width;
+                    height: $_track-height;
+                }
+
+                .k-switch-label-on { inset-inline-start: $_label-offset; }
+                .k-switch-label-off { inset-inline-end: $_label-offset; }
+
+                .k-switch-thumb {
+                    width: $_thumb-width;
+                    height: $_thumb-height;
+                }
+
+                &.k-switch-on .k-switch-thumb-wrap {
+                    inset-inline-start: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
+                    transition: left k-transition(bouncy);
+                }
+                &.k-switch-off .k-switch-thumb-wrap {
+                    inset-inline-start: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
+                    transition: left k-transition(snappy);
+                }
+            }
+        }
+
     }
 
 
@@ -52,6 +96,14 @@
         flex: 1 0 auto;
         position: relative;
         transition: background-color k-transition(rapid), border-color k-transition(rapid), color k-transition(rapid);
+
+        // Roundness
+        @each $roundness in $kendo-switch-track-roundness {
+            #{k-when-default($kendo-switch-default-track-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
     }
 
 
@@ -70,6 +122,14 @@
         position: absolute;
         transform: translate( -50%, -50% );
         transition: all k-transition(rapid);
+
+        // Roundness
+        @each $roundness in $kendo-switch-track-roundness {
+            #{k-when-default($kendo-switch-default-track-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
     }
 
 
@@ -86,47 +146,6 @@
     }
 
 
-    // Switch sizes
-    @each $size, $size-props in $kendo-switch-sizes {
-
-        $_font-size: map.get( $size-props, font-size );
-        $_track-width: map.get( $size-props, track-width );
-        $_track-height: map.get( $size-props, track-height );
-        $_thumb-width: map.get( $size-props, thumb-width );
-        $_thumb-height: map.get( $size-props, thumb-height );
-        $_thumb-offset: map.get( $size-props, thumb-offset );
-        $_label-offset: map.get( $size-props, label-offset );
-
-        .k-switch-#{$size} {
-            width: $_track-width;
-            height: $_track-height;
-            font-size: $_font-size;
-
-            .k-switch-track {
-                width: $_track-width;
-                height: $_track-height;
-            }
-
-            .k-switch-label-on { inset-inline-start: $_label-offset; }
-            .k-switch-label-off { inset-inline-end: $_label-offset; }
-
-            .k-switch-thumb {
-                width: $_thumb-width;
-                height: $_thumb-height;
-            }
-
-            &.k-switch-on .k-switch-thumb-wrap {
-                inset-inline-start: calc( 100% - #{math.div( $_thumb-width, 2 )} - #{$_thumb-offset} );
-                transition: left k-transition(bouncy);
-            }
-            &.k-switch-off .k-switch-thumb-wrap {
-                inset-inline-start: calc( #{math.div( $_thumb-width, 2 )} + #{$_thumb-offset} );
-                transition: left k-transition(snappy);
-            }
-        }
-    }
-
-
     // RTL
     .k-switch[dir="rtl"],
     [dir="rtl"] .k-switch,

package/scss/components/switch/_variables.scss

@@ -1,5 +1,12 @@
 // Switch
 
+$kendo-switch-default-size: null !default;
+$kendo-switch-default-track-roundness: null !default;
+$kendo-switch-default-thumb-roundness: null !default;
+
+$kendo-switch-track-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
+$kendo-switch-thumb-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
+
 $kendo-switch-font-family: null !default;
 
 $kendo-switch-track-border-width: null !default;
@@ -10,7 +17,29 @@ $kendo-switch-label-text-transform: null !default;
 
 $kendo-switch-label-display: null !default;
 
-$kendo-switch-sizes: null !default;
+$kendo-switch-sm-font-size: null !default;
+$kendo-switch-sm-track-width: null !default;
+$kendo-switch-sm-track-height: null !default;
+$kendo-switch-sm-thumb-width: null !default;
+$kendo-switch-sm-thumb-height: null !default;
+$kendo-switch-sm-thumb-offset: null !default;
+$kendo-switch-sm-label-offset: null !default;
+
+$kendo-switch-md-font-size: null !default;
+$kendo-switch-md-track-width: null !default;
+$kendo-switch-md-track-height: null !default;
+$kendo-switch-md-thumb-width: null !default;
+$kendo-switch-md-thumb-height: null !default;
+$kendo-switch-md-thumb-offset: null !default;
+$kendo-switch-md-label-offset: null !default;
+
+$kendo-switch-lg-font-size: null !default;
+$kendo-switch-lg-track-width: null !default;
+$kendo-switch-lg-track-height: null !default;
+$kendo-switch-lg-thumb-width: null !default;
+$kendo-switch-lg-thumb-height: null !default;
+$kendo-switch-lg-thumb-offset: null !default;
+$kendo-switch-lg-label-offset: null !default;
 
 $kendo-switch-off-track-bg: null !default;
 $kendo-switch-off-track-text: null !default;
@@ -84,3 +113,11 @@ $kendo-switch-on-thumb-disabled-bg: null !default;
 $kendo-switch-on-thumb-disabled-text: null !default;
 $kendo-switch-on-thumb-disabled-border: null !default;
 $kendo-switch-on-thumb-disabled-gradient: null !default;
+
+/// The map with the different Switch sizes.
+/// @group switch
+$kendo-switch-sizes: (
+    sm: ( font-size: $kendo-switch-sm-font-size, track-width: $kendo-switch-sm-track-width, track-height: $kendo-switch-sm-track-height, thumb-width: $kendo-switch-sm-thumb-width, thumb-height: $kendo-switch-sm-thumb-height, thumb-offset: $kendo-switch-sm-thumb-offset, label-offset: $kendo-switch-sm-label-offset ),
+    md: ( font-size: $kendo-switch-md-font-size, track-width: $kendo-switch-md-track-width, track-height: $kendo-switch-md-track-height, thumb-width: $kendo-switch-md-thumb-width, thumb-height: $kendo-switch-md-thumb-height, thumb-offset: $kendo-switch-md-thumb-offset, label-offset: $kendo-switch-md-label-offset ),
+    lg: ( font-size: $kendo-switch-lg-font-size, track-width: $kendo-switch-lg-track-width, track-height: $kendo-switch-lg-track-height, thumb-width: $kendo-switch-lg-thumb-width, thumb-height: $kendo-switch-lg-thumb-height, thumb-offset: $kendo-switch-lg-thumb-offset, label-offset: $kendo-switch-lg-label-offset )
+) !default;

package/scss/components/table/_layout.scss

@@ -1,4 +1,5 @@
 @use "./_variables.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "sass:map";
 
 @mixin kendo-table--layout-base() {
@@ -222,33 +223,37 @@
         overflow: hidden;
     }
 
+    .k-table,
+    .k-data-table {
+        // Sizes
+        @each $size, $size-props in $kendo-table-sizes {
+            $_font-size: map.get( $size-props, font-size);
+            $_line-height: map.get( $size-props, line-height);
+            $_cell-padding-x: map.get( $size-props, cell-padding-x);
+            $_cell-padding-y: map.get( $size-props, cell-padding-y);
+
+            #{k-when-default($kendo-table-default-size, $size)}
+            &.k-table-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                .k-table-th,
+                .k-table-td {
+                    padding-block: $_cell-padding-y;
+                    padding-inline: $_cell-padding-x;
+                }
+
+                .k-table-list .k-table-group-td > span {
+                    padding-block: 0;
+                    padding-inline: calc( #{$_cell-padding-x} / 2 );
+                }
+
+                .k-table-list .k-table-group-row::before {
+                    padding-block: $_cell-padding-y;
+                    padding-inline: 0;
+                }
+            }
 
-    // Sizes
-    @each $size, $size-props in $kendo-table-sizes {
-        $_font-size: map.get( $size-props, font-size);
-        $_line-height: map.get( $size-props, line-height);
-        $_cell-padding-x: map.get( $size-props, cell-padding-x);
-        $_cell-padding-y: map.get( $size-props, cell-padding-y);
-
-        .k-table-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-        }
-
-        .k-table-#{$size} .k-table-th,
-        .k-table-#{$size} .k-table-td {
-            padding-block: $_cell-padding-y;
-            padding-inline: $_cell-padding-x;
-        }
-
-        .k-table-#{$size} .k-table-list .k-table-group-td > span {
-            padding-block: 0;
-            padding-inline: calc( #{$_cell-padding-x} / 2 );
-        }
-
-        .k-table-#{$size} .k-table-list .k-table-group-row::before {
-            padding-block: $_cell-padding-y;
-            padding-inline: 0;
         }
     }
 

package/scss/components/table/_variables.scss

@@ -1,5 +1,7 @@
 // Table
 
+$kendo-table-default-size: null !default;
+
 $kendo-table-border-width: null !default;
 $kendo-table-cell-vertical-border-width: null !default;
 $kendo-table-cell-horizontal-border-width: null !default;
@@ -17,7 +19,28 @@ $kendo-table-md-cell-padding-y: null !default;
 $kendo-table-lg-cell-padding-x: null !default;
 $kendo-table-lg-cell-padding-y: null !default;
 
-$kendo-table-sizes: null !default;
+/// The sizes map 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;
 
 
 $kendo-table-bg: null !default;

package/scss/components/tabstrip/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
@@ -37,7 +38,33 @@
         position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        // TabStrip sizes
+        @each $size, $size-props in $kendo-tabstrip-sizes {
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+            $_item-padding-x: map.get( $size-props, item-padding-x );
+            $_item-padding-y: map.get( $size-props, item-padding-y );
+
+            #{k-when-default($kendo-tabstrip-default-size, $size)}
+            &.k-tabstrip-#{$size} {
+                .k-tabstrip-items .k-link {
+                    font-size: $_font-size;
+                    line-height: $_line-height;
+                    padding-block: $_item-padding-y;
+                    padding-inline: $_item-padding-x;
+                }
+
+                :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){
+                    &::before,
+                    &::after {
+                        height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) );
+                    }
+                }
+            }
+        }
     }
+
     .k-tabstrip-wrapper > .k-tabstrip {
         flex: 1 1 auto;
     }
@@ -497,28 +524,5 @@
 
     }
 
-     // TabStrip sizes
-     @each $size, $size-props in $kendo-tabstrip-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_item-padding-x: map.get( $size-props, item-padding-x );
-        $_item-padding-y: map.get( $size-props, item-padding-y );
-
-        .k-tabstrip-#{$size} {
-            .k-tabstrip-items .k-link {
-                font-size: $_font-size;
-                line-height: $_line-height;
-                padding-block: $_item-padding-y;
-                padding-inline: $_item-padding-x;
-            }
-
-            :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){
-                &::before,
-                &::after {
-                    height: calc( ($_line-height * 1em) + ($kendo-tabstrip-border-width * 2) + ($_item-padding-y * 2) );
-                }
-            }
-        }
-    }
 
 }

package/scss/components/tabstrip/_variables.scss

@@ -1,5 +1,6 @@
 // TabStrip
 
+$kendo-tabstrip-default-size: null !default;
 
 $kendo-tabstrip-wrapper-padding-x: null !default;
 $kendo-tabstrip-wrapper-padding-y: null !default;
@@ -76,4 +77,25 @@ $kendo-tabstrip-content-focus-border: null !default;
 
 $kendo-tabstrip-scroll-overlay: null !default;
 
-$kendo-tabstrip-sizes: null !default;
+/// The sizes 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;