@progress/kendo-theme-core 13.1.1 → 13.2.0-dev.0

package/scss/components/button/_variables.scss

@@ -9,10 +9,12 @@ $kendo-button-border-width: null !default;
 
 $kendo-button-border-radius: null !default;
 
+$kendo-button-xs-padding-x: null !default;
 $kendo-button-sm-padding-x: null !default;
 $kendo-button-md-padding-x: null !default;
 $kendo-button-lg-padding-x: null !default;
 
+$kendo-button-xs-padding-y: null !default;
 $kendo-button-sm-padding-y: null !default;
 $kendo-button-md-padding-y: null !default;
 $kendo-button-lg-padding-y: null !default;
@@ -21,20 +23,24 @@ $kendo-button-font-family: null !default;
 $kendo-button-font-weight: null !default;
 
 $kendo-button-font-size: null !default;
+$kendo-button-xs-font-size: null !default;
 $kendo-button-sm-font-size: null !default;
 $kendo-button-md-font-size: null !default;
 $kendo-button-lg-font-size: null !default;
 
 $kendo-button-line-height: null !default;
+$kendo-button-xs-line-height: null !default;
 $kendo-button-sm-line-height: null !default;
 $kendo-button-md-line-height: null !default;
 $kendo-button-lg-line-height: null !default;
 
+$kendo-button-xs-calc-size: null !default;
 $kendo-button-sm-calc-size: null !default;
 $kendo-button-md-calc-size: null !default;
 $kendo-button-lg-calc-size: null !default;
 
 $kendo-button-inner-calc-size: null !default;
+$kendo-button-xs-inner-calc-size: null !default;
 $kendo-button-sm-inner-calc-size: null !default;
 $kendo-button-md-inner-calc-size: null !default;
 $kendo-button-lg-inner-calc-size: null !default;
@@ -112,6 +118,12 @@ $kendo-button-theme-colors: ("base", "primary", "secondary", "tertiary", "info",
 /// The sizes map of the Button.
 /// @group button
 $kendo-button-sizes: (
+    xs: (
+        padding-x: $kendo-button-xs-padding-x,
+        padding-y: $kendo-button-xs-padding-y,
+        font-size: $kendo-button-xs-font-size,
+        line-height: $kendo-button-xs-line-height
+    ),
     sm: (
         padding-x: $kendo-button-sm-padding-x,
         padding-y: $kendo-button-sm-padding-y,

package/scss/components/chat/_layout.scss

@@ -30,7 +30,7 @@
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         .k-suggestion {
-            font-size: var(--kendo-font-size-sm, inherit);
+            font-size: var(--kendo-font-size-sm);
         }
     }
 
@@ -615,7 +615,7 @@
         }
 
         .k-upload-files {
-            max-height: k-spacing(25);
+            max-height: 7rem;
         }
     }
 

package/scss/components/chip/_layout.scss

@@ -11,7 +11,7 @@
         border-width: $kendo-chip-border-width;
         border-style: solid;
         outline: 0;
-        font-family: var( --kendo-font-family, inherit );
+        font-family: var(--kendo-font-family);
         font-weight: $kendo-chip-font-weight;
         display: inline-flex;
         flex-flow: row nowrap;

package/scss/components/color-preview/_variables.scss

@@ -1,5 +1,5 @@
 // Color Preview
-$kendo-color-preview-border-radius: k-border-radius(md)!default;
+$kendo-color-preview-border-radius: k-border-radius(md) !default;
 $kendo-color-preview-border-width: null !default;
 $kendo-color-preview-bg: null !default;
 $kendo-color-preview-text: null !default;

package/scss/components/dataviz/_layout.scss

@@ -78,7 +78,7 @@
     .k-chart-tooltip {
         @include border-radius( k-border-radius(md) );
         font-size: $kendo-chart-tooltip-font-size;
-        line-height: var( --kendo-line-height, normal );
+        line-height: var(--kendo-line-height);
         padding-block: $kendo-tooltip-padding-y;
         padding-inline: $kendo-tooltip-padding-x;
     }
@@ -94,7 +94,7 @@
         text-align: start;
         padding-block: $kendo-chart-tooltip-padding-y;
         padding-inline: $kendo-chart-tooltip-padding-x;
-        line-height: var( --kendo-line-height, normal );
+        line-height: var(--kendo-line-height);
         vertical-align: middle;
     }
 
@@ -328,7 +328,7 @@
             border-width: 0 0 1px;
             border-style: solid;
             border-color: inherit;
-            font-size: var( --kendo-font-size, inherit );
+            font-size: var(--kendo-font-size);
             background-position: 0 0;
             background-repeat: repeat-x;
         }
@@ -365,10 +365,10 @@
             inset-inline-end: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            inset-block-start: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
+            inset-block-start: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var(--kendo-line-height) * var(--kendo-font-size) ) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            inset-inline-start: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
+            inset-inline-start: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var(--kendo-line-height) * var(--kendo-font-size) ) + 1px);
         }
 
 

package/scss/components/forms/_layout.scss

@@ -110,13 +110,13 @@
         }
 
         .k-alert-error {
-            font-size: var( --kendo-font-size-sm, inherit );
+            font-size: var(--kendo-font-size-sm);
             margin-block-start: $kendo-form-alert-error-margin;
         }
 
         .k-field-info {
             display: inline-block;
-            font-size: var( --kendo-font-size-xs, inherit );
+            font-size: var(--kendo-font-size-xs);
             line-height: 1;
             margin-block: 0;
             margin-inline: $kendo-form-field-info-margin;
@@ -247,7 +247,7 @@
         }
 
         legend {
-            font-size: var( --kendo-font-size-sm, inherit );
+            font-size: var(--kendo-font-size-sm);
             text-align: start;
             font-weight: 600;
             line-height: 1;
@@ -266,7 +266,7 @@
             > span {
                 width: $kendo-inline-form-element-width;
                 text-align: end;
-                line-height: var( --kendo-line-height, normal );
+                line-height: var(--kendo-line-height);
                 padding-block: $kendo-inline-form-field-padding-y;
                 padding-inline: $kendo-inline-form-field-padding-x;
                 align-self: center;
@@ -281,13 +281,13 @@
             }
 
             .k-alert-error {
-                font-size: var( --kendo-font-size-sm, inherit );
+                font-size: var(--kendo-font-size-sm);
                 margin-block-start: $kendo-form-alert-error-margin;
             }
 
             .k-field-info {
                 display: block;
-                font-size: var( --kendo-font-size-xs, inherit );
+                font-size: var(--kendo-font-size-xs);
                 line-height: 1;
                 margin: 0;
             }

package/scss/components/gantt/_layout.scss

@@ -656,7 +656,7 @@
         white-space: nowrap;
 
         strong {
-            font-size: var( --kendo-font-size-lg, inherit );
+            font-size: var(--kendo-font-size-lg);
             font-weight: normal;
             display: block;
         }
@@ -795,7 +795,7 @@
     }
     .k-gantt-tooltip-validation-value {
         // TODO: extract to variable
-        font-weight: var( --kendo-font-weight-bold, normal );
+        font-weight: var(--kendo-font-weight-bold);
     }
     .k-gantt-tooltip-validation-label,
     .k-gantt-tooltip-validation-value {

package/scss/components/grid/_layout.scss

@@ -17,6 +17,7 @@
 @use "../tabstrip/_variables.scss" as *;
 @use "../popup/_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../border-radii/index.scss" as *;
 
 @mixin kendo-grid--layout-base() {
 
@@ -1082,11 +1083,7 @@
                     .k-grid-filter,
                     .k-header-column-menu,
                     .k-grid-header-menu {
-                        padding: $_button-padding-y;
-                        width: $_button-calc-size;
-                        height: $_button-calc-size;
-                        line-height: $_button-line-height;
-                        inset-block-end: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} );
+                        inset-block-end: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-xs-calc-size, 2 )} );
                     }
                 }
 
@@ -1169,6 +1166,22 @@
                     z-index: k-z-index("base", 2);
                 }
             }
+
+            .k-grid-filter,
+            .k-header-column-menu,
+            .k-grid-header-menu {
+                padding: $kendo-button-xs-padding-y $kendo-button-xs-padding-x;
+                width: $kendo-button-xs-calc-size;
+                height: $kendo-button-xs-calc-size;
+                line-height: $kendo-button-xs-line-height;
+                border-radius: k-border-radius(md);
+
+                > .k-svg-icon > svg,
+                > .k-icon-wrapper-host svg {
+                    width: $kendo-icon-size-md;
+                    height: $kendo-icon-size-md;
+                }
+            }
         }
 
     }
@@ -1443,7 +1456,7 @@
     }
 
     .k-filter-selected-items {
-        font-weight: var( --kendo-font-weight-bold, normal );
+        font-weight: var(--kendo-font-weight-bold);
         line-height: normal;
         white-space: nowrap;
     }
@@ -1491,7 +1504,7 @@
         box-sizing: border-box;
 
         .k-menu:not(.k-context-menu) {
-            font-weight: var( --kendo-font-weight, 400 );
+            font-weight: var(--kendo-font-weight);
         }
 
         .k-expander {
@@ -1612,7 +1625,7 @@
         border-block-end-style: solid;
         font-size: $kendo-grid-column-menu-group-header-font-size;
         line-height: $kendo-grid-column-menu-group-header-line-height;
-        font-weight: var( --kendo-font-weight-bold, normal );
+        font-weight: var(--kendo-font-weight-bold);
         text-transform: $kendo-grid-column-menu-group-header-text-transform;
         flex: 1 1 auto;
     }

package/scss/components/smart-box/_layout.scss

@@ -79,7 +79,7 @@
         padding-inline: k-spacing(2);
         padding-block: k-spacing(4);
         gap: $kendo-smart-box-popup-spacing;
-        font-size: var(--kendo-font-size-sm, inherit);
+        font-size: var(--kendo-font-size-sm);
         min-height: auto;
     }
 

package/scss/components/table/_variables.scss

@@ -23,20 +23,20 @@ $kendo-table-lg-cell-padding-y: null !default;
 /// @group table
 $kendo-table-sizes: (
     sm: (
-        font-size: var( --kendo-font-size, inherit ),
-        line-height: var( --kendo-line-height, normal ),
+        font-size: var(--kendo-font-size),
+        line-height: var(--kendo-line-height),
         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 ),
+        font-size: var(--kendo-font-size),
+        line-height: var(--kendo-line-height),
         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 ),
+        font-size: var(--kendo-font-size),
+        line-height: var(--kendo-line-height),
         cell-padding-x: $kendo-table-lg-cell-padding-x,
         cell-padding-y: $kendo-table-lg-cell-padding-y
     )

package/scss/components/tabstrip/_layout.scss

@@ -50,11 +50,17 @@
 
             #{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;
+                .k-tabstrip-items {
+                    .k-link {
+                        font-size: $_font-size;
+                        line-height: $_line-height;
+                        padding-block: $_item-padding-y;
+                        padding-inline: $_item-padding-x;
+                    }
+
+                    .k-item-actions {
+                        margin-inline-end: calc( #{$_item-padding-x} / 2 );
+                    }
                 }
 
                 :is(&.k-tabstrip-left, &.k-tabstrip-right):is(.k-tabstrip-scrollable-overlay) :is(.k-tabstrip-items-wrapper){
@@ -126,6 +132,7 @@
             padding: 0;
             display: flex;
             flex-direction: row;
+            align-self: center;
         }
 
         .k-link {

package/scss/components/timeline/_layout.scss

@@ -206,7 +206,6 @@
             }
 
             .k-event-collapse {
-                margin-block: calc( #{$kendo-icon-spacing} * -1 );
                 margin-inline: 0;
                 transform: rotate(90deg);
                 transition: transform k-transition(subtle);

package/scss/components/typography/_layout.scss

@@ -22,11 +22,11 @@
     .k-body,
     .k-typography {
         @include typography(
-            var( --kendo-font-size, inherit ),
-            var( --kendo-font-family, inherit ),
-            var( --kendo-line-height, normal ),
-            var( --kendo-font-weight-normal, normal ),
-            var( --kendo-letter-spacing, normal )
+            var(--kendo-font-size),
+            var(--kendo-font-family),
+            var(--kendo-line-height),
+            var(--kendo-font-weight-normal),
+            var(--kendo-letter-spacing)
         );
         margin: 0;
 

package/scss/elevation/index.scss

@@ -53,7 +53,35 @@ $kendo-elevation: map.merge($default-elevation, $kendo-elevation);
 }
 
 @function k-elevation($level) {
-    @return var(--kendo-elevation-#{$level}, map.get($kendo-elevation, $level));
+    @return var(--kendo-elevation-#{$level});
+}
+
+// Each elevation-bg level increases oklch lightness by level * this value.
+$kendo-elevation-bg-lightness-step: 0.015 !default;
+
+// Each elevation-bg level increases oklch chroma by level * this value.
+$kendo-elevation-bg-chroma-step: 0.001 !default;
+
+// The background color for a given elevation level is calculated by increasing the lightness and chroma of the base background color
+// by a step multiplied by the elevation level, but only if the base background color is light (for light themes) or dark (for dark themes).
+// This is achieved by multiplying the steps by a clamp function that returns 1 when the background color is in the appropriate range and 0 otherwise.
+// clamp(0, (0.5 - l) * 99999, 1) → 1 when bg is dark, 0 when light
+@function k-elevation-bg($level, $color) {
+    $_result: "oklch(from #{$color} calc(l + #{$level} * #{$kendo-elevation-bg-lightness-step} * clamp(0, (0.5 - l) * 99999, 1)) calc(c + #{$level} * #{$kendo-elevation-bg-chroma-step} * clamp(0, (0.5 - l) * 99999, 1)) h)";
+    @return #{$_result};
+}
+
+// Each elevation-border level increases border opacity by level * this value (in %).
+$kendo-elevation-border-opacity-step: 10 !default;
+
+// The border color for a given elevation level is calculated by increasing the alpha of the base border color
+// by a step multiplied by the elevation level, but only if the base border color is light (for dark themes) or dark (for light themes).
+// This is achieved by multiplying the step by a clamp function that returns 1 when the border color is in the appropriate range and 0 otherwise.
+// clamp(0, (l - 0.5) * 99999, 1) → 1 when border is light (dark theme), 0 when dark (light theme)
+// alpha is a <number> (0..1), so we divide the step by 100 instead of multiplying by 1%
+@function k-elevation-border($level, $color) {
+    $_result: "oklch(from #{$color} l c h / calc(alpha + #{$level} * #{$kendo-elevation-border-opacity-step} / 100 * clamp(0, (l - 0.5) * 99999, 1)))";
+    @return #{$_result};
 }
 
 

package/scss/mixins/_border-radius.scss

@@ -66,3 +66,11 @@
         border-end-start-radius: $radius;
     }
 }
+
+@mixin concentric-radius($radius, $padding, $selector) {
+  border-radius: $radius;
+
+  #{$selector} {
+    border-radius: max(0px, $radius - $padding);
+  }
+}

package/scss/motion/index.scss

@@ -176,12 +176,12 @@ $kendo-transitions: map.merge($default-transitions, $kendo-transitions);
 
 @function k-easing($key) {
     $easing: map.get($kendo-easings, $key);
-    @return var(--kendo-easing-#{$key}, $easing);
+    @return var(--kendo-easing-#{$key});
 }
 
 @function k-duration($key) {
     $_duration: map.get($kendo-durations, $key);
-    @return var(--kendo-duration-#{$key}, $_duration);
+    @return var(--kendo-duration-#{$key});
 }
 
 @function k-transition($key) {

package/scss/spacing/index.scss

@@ -1,47 +1,45 @@
 @use "sass:map";
 @use "../functions/_string.scss" as *;
 
+/// The base spacing step used to generate the Spacing map.
+/// @group spacing
+$kendo-spacing-base: 0.25rem !default;
+
 $default-spacing: (
     0: 0px,
     1px: 1px,
-    0.5: .125rem,
-    1: .25rem,
-    1.5: .375rem,
-    2: .5rem,
-    2.5: .625rem,
-    3: .75rem,
-    3.5: .875rem,
-    4: 1rem,
-    4.5: 1.125rem,
-    5: 1.25rem,
-    5.5: 1.375rem,
-    6: 1.5rem,
-    6.5: 1.625rem,
-    7: 1.75rem,
-    7.5: 1.875rem,
-    8: 2rem,
-    9: 2.25rem,
-    10: 2.5rem,
-    11: 2.75rem,
-    12: 3rem,
-    13: 3.25rem,
-    14: 3.5rem,
-    15: 3.75rem,
-    16: 4rem,
-    17: 4.25rem,
-    18: 4.5rem,
-    19: 4.75rem,
-    20: 5rem,
-    21: 5.25rem,
-    22: 5.5rem,
-    23: 5.75rem,
-    24: 6rem,
-    25: 7rem,
-    26: 8rem,
-    27: 9rem,
-    28: 10rem,
-    29: 11rem,
-    30: 12rem
+    0.5: calc(0.5 * var(--kendo-spacing-base)),
+    1: calc(1 * var(--kendo-spacing-base)),
+    1.5: calc(1.5 * var(--kendo-spacing-base)),
+    2: calc(2 * var(--kendo-spacing-base)),
+    2.5: calc(2.5 * var(--kendo-spacing-base)),
+    3: calc(3 * var(--kendo-spacing-base)),
+    3.5: calc(3.5 * var(--kendo-spacing-base)),
+    4: calc(4 * var(--kendo-spacing-base)),
+    4.5: calc(4.5 * var(--kendo-spacing-base)),
+    5: calc(5 * var(--kendo-spacing-base)),
+    5.5: calc(5.5 * var(--kendo-spacing-base)),
+    6: calc(6 * var(--kendo-spacing-base)),
+    6.5: calc(6.5 * var(--kendo-spacing-base)),
+    7: calc(7 * var(--kendo-spacing-base)),
+    7.5: calc(7.5 * var(--kendo-spacing-base)),
+    8: calc(8 * var(--kendo-spacing-base)),
+    9: calc(9 * var(--kendo-spacing-base)),
+    10: calc(10 * var(--kendo-spacing-base)),
+    11: calc(11 * var(--kendo-spacing-base)),
+    12: calc(12 * var(--kendo-spacing-base)),
+    13: calc(13 * var(--kendo-spacing-base)),
+    14: calc(14 * var(--kendo-spacing-base)),
+    15: calc(15 * var(--kendo-spacing-base)),
+    16: calc(16 * var(--kendo-spacing-base)),
+    17: calc(17 * var(--kendo-spacing-base)),
+    18: calc(18 * var(--kendo-spacing-base)),
+    19: calc(19 * var(--kendo-spacing-base)),
+    20: calc(20 * var(--kendo-spacing-base)),
+    21: calc(21 * var(--kendo-spacing-base)),
+    22: calc(22 * var(--kendo-spacing-base)),
+    23: calc(23 * var(--kendo-spacing-base)),
+    24: calc(24 * var(--kendo-spacing-base)),
 ) !default;
 
 /// The global default Spacing map.
@@ -52,51 +50,19 @@ $kendo-spacing: map.merge($default-spacing, $kendo-spacing);
 
 
 @function k-spacing($step) {
-    $spacing: map.get($kendo-spacing, $step);
     $_step: k-escape-class-name( $step );
-    @return var(--kendo-spacing-#{$_step}, #{$spacing});
+    @return var(--kendo-spacing-#{$_step});
 }
 
 // Generate a CSS variable for each value in the Spacing map
 @mixin kendo-spacing--styles() {
     :root {
+
+        --kendo-spacing-base: #{$kendo-spacing-base};
+
         @each $step, $spacing in $kendo-spacing {
             $_step: k-escape-class-name( $step );
             --kendo-spacing-#{$_step}: #{$spacing};
         }
     }
 }
-
-$kendo-sizing: map.merge( $kendo-spacing, (
-    "auto": auto,
-    "1/2": 50%,
-    "1/3": 33.333333%,
-    "2/3": 66.666667%,
-    "1/4": 25%,
-    "2/4": 50%,
-    "3/4": 75%,
-    "1/5": 20%,
-    "2/5": 40%,
-    "3/5": 60%,
-    "4/5": 80%,
-    "1/6": 16.666667%,
-    "2/6": 33.333333%,
-    "3/6": 50%,
-    "4/6": 66.666667%,
-    "5/6": 83.333333%,
-    "1/12": 8.333333%,
-    "2/12": 16.666667%,
-    "3/12": 25%,
-    "4/12": 33.333333%,
-    "5/12": 41.666667%,
-    "6/12": 50%,
-    "7/12": 58.333333%,
-    "8/12": 66.666667%,
-    "9/12": 75%,
-    "10/12": 83.333333%,
-    "11/12": 91.666667%,
-    "full": 100%,
-    "min": min-content,
-    "max": max-content,
-    "fit": fit-content
-)) !default;