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

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

@@ -615,7 +615,7 @@
         }
 
         .k-upload-files {
-            max-height: k-spacing(25);
+            max-height: 7rem;
         }
     }
 

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() {
 
@@ -727,6 +728,9 @@
     // Pinned rows container
     .k-grid-pinned-container {
         padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
+        border-width: 0;
+        border-block-end-width: 1px;
+        border-style: solid;
         box-shadow: $kendo-grid-pinned-container-shadow;
         z-index: k-z-index("base", 4);
         position: relative;
@@ -736,8 +740,12 @@
         display: flex;
         flex-direction: row;
         align-items: stretch;
+        font-weight: $kendo-grid-pinned-source-font-weight;
 
         &.k-pos-bottom {
+            border-block-end-width: 0;
+            border-block-start-width: 1px;
+            box-shadow: $kendo-grid-pinned-container-bottom-shadow;
             clip-path: inset(-50px 0 0 0);
         }
     }
@@ -778,6 +786,7 @@
         &.k-pos-bottom {
             border-block-end-width: 0;
             border-block-start-width: 1px;
+            box-shadow: $kendo-grid-sticky-container-bottom-shadow;
             inset-block-start: auto;
             inset-block-end: 0;
             clip-path: inset(-50px 0 0 0);
@@ -1082,11 +1091,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 +1174,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;
+                }
+            }
         }
 
     }

package/scss/components/grid/_theme.scss

@@ -69,6 +69,7 @@
 
     .k-grid-pinned-container {
         background-color: $kendo-grid-header-bg;
+        border-color: $kendo-grid-border;
     }
     .k-grid-pinned-wrap {
         border-color: $kendo-grid-header-border;

package/scss/components/grid/_variables.scss

@@ -173,8 +173,10 @@ $kendo-grid-sticky-header-border: null !default;
 $kendo-grid-sticky-footer-bg: null !default;
 
 $kendo-grid-sticky-container-shadow: null !default;
+$kendo-grid-sticky-container-bottom-shadow: null !default;
 
 $kendo-grid-pinned-container-shadow: null !default;
+$kendo-grid-pinned-container-bottom-shadow: null !default;
 
 $kendo-grid-column-menu-width: null !default;
 $kendo-grid-column-menu-max-width: null !default;

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/elevation/index.scss

@@ -56,6 +56,34 @@ $kendo-elevation: map.merge($default-elevation, $kendo-elevation);
     @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};
+}
+
 
 @mixin kendo-elevation--styles() {
     :root {

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.
@@ -59,43 +57,12 @@ $kendo-spacing: map.merge($default-spacing, $kendo-spacing);
 // 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;

package/scss/color-system/_palettes.scss

@@ -1,282 +0,0 @@
-@use "sass:map";
-
-$_default-palette-gray: (
-    "white": #ffffff,
-    1: #fafafa,
-    2: #f5f5f5,
-    3: #ebebeb,
-    4: #e0e0e0,
-    5: #d6d6d6,
-    6: #c2c2c2,
-    7: #adadad,
-    8: #999999,
-    9: #808080,
-    10: #666666,
-    11: #525252,
-    12: #3d3d3d,
-    13: #292929,
-    14: #1f1f1f,
-    15: #141414,
-    "black": #000000,
-);
-
-$_default-palette-coral: (
-    1: #fff6f5,
-    2: #ffeceb,
-    3: #ffdedb,
-    4: #ffc8c4,
-    5: #ffb1ac,
-    6: #ff9d97,
-    7: #ff8a82,
-    8: #ff766d,
-    9: #ff6358,
-    10: #ea5a51,
-    11: #d45349,
-    12: #bf4a42,
-    13: #a33f38,
-    14: #80322c,
-    15: #5c201c,
-);
-
-$_default-palette-sky-blue: (
-    1: #ebf8fe,
-    2: #d8f1fd,
-    3: #c5eafc,
-    4: #a3dffb,
-    5: #81d4fA,
-    6: #61c9f9,
-    7: #42bff7,
-    8: #22b3f5,
-    9: #03a9f4,
-    10: #039ae0,
-    11: #028ccb,
-    12: #027fb7,
-    13: #026999,
-    14: #02557a,
-    15: #023f5c,
-);
-
-$_default-palette-green: (
-    1: #edf8e9,
-    2: #dcf0d3,
-    3: #cbe9bf,
-    4: #b7e1a5,
-    5: #9bda80,
-    6: #81d15f,
-    7: #69c740,
-    8: #4ebe1f,
-    9: #37b400,
-    10: #32a500,
-    11: #2d9600,
-    12: #298700,
-    13: #227100,
-    14: #1c5a00,
-    15: #1c5a00,
-);
-
-$_default-palette-blue: (
-    1: #e9f0fd,
-    2: #d2e2fb,
-    3: #bdd4f8,
-    4: #9ec0f6,
-    5: #80acf4,
-    6: #6098f2,
-    7: #4082ef,
-    8: #206eec,
-    9: #0058e9,
-    10: #0052d6,
-    11: #004ac2,
-    12: #0042af,
-    13: #003892,
-    14: #002c75,
-    15: #002259,
-);
-
-$_default-palette-yellow: (
-    1: #fffae9,
-    2: #fff4d3,
-    3: #ffeebd,
-    4: #ffe79e,
-    5: #ffe080,
-    6: #ffd760,
-    7: #ffd040,
-    8: #ffc720,
-    9: #ffc000,
-    10: #eaaf00,
-    11: #d49f00,
-    12: #bf9000,
-    13: #a07800,
-    14: #806000,
-    15: #5e4700,
-);
-
-$_default-palette-red: (
-    1: #feeeed,
-    2: #fcddda,
-    3: #fbc8c3,
-    4: #faaaa2,
-    5: #f98b80,
-    6: #f76f60,
-    7: #f65140,
-    8: #f43520,
-    9: #f31700,
-    10: #df1600,
-    11: #ca1400,
-    12: #b61100,
-    13: #980f00,
-    14: #7a0c00,
-    15: #7a0c00,
-);
-
-$_default-palette-lemon-yellow: (
-    1: #fffcf1,
-    2: #fffae2,
-    3: #fff7d4,
-    4: #fff4c2,
-    5: #fff0b1,
-    6: #ffed9d,
-    7: #ffe989,
-    8: #ffe676,
-    9: #ffe162,
-    10: #ead05a,
-    11: #d4bc52,
-    12: #bfa94a,
-    13: #a3913f,
-    14: #807131,
-    15: #5c5223,
-);
-
-$_default-palette-spring-green: (
-    1: #effaf3,
-    2: #e0f6e8,
-    3: #d1f1dd,
-    4: #c0edd1,
-    5: #a6e8c0,
-    6: #8fe2af,
-    7: #79dda0,
-    8: #62d78f,
-    9: #4cd180,
-    10: #46c074,
-    11: #3fae6a,
-    12: #399d60,
-    13: #2f834f,
-    14: #266940,
-    15: #1c4f30,
-);
-
-$_default-palette-royal-blue: (
-    1: #f0f2ff,
-    2: #e1e4fe,
-    3: #d2d7fe,
-    4: #bbc3fd,
-    5: #a5affd,
-    6: #8e9bfc,
-    7: #7887fb,
-    8: #6173fb,
-    9: #4b5ffa,
-    10: #4558e5,
-    11: #3f50d1,
-    12: #3847bc,
-    13: #2f3c9d,
-    14: #26307d,
-    15: #1c245e,
-);
-
-$_default-palette-lavender-purple: (
-    1: #f7f0ff,
-    2: #f0e0ff,
-    3: #e8d1ff,
-    4: #dfbfff,
-    5: #d6acff,
-    6: #cc97ff,
-    7: #c182ff,
-    8: #b76dff,
-    9: #ac58ff,
-    10: #9e51ea,
-    11: #8f49d4,
-    12: #8142bf,
-    13: #6b37a0,
-    14: #562c80,
-    15: #3f205e,
-);
-
-$_default-palette-flamingo-pink: (
-    1: #fff0f5,
-    2: #ffe1eb,
-    3: #ffd1e1,
-    4: #ffbfd6,
-    5: #ffacc9,
-    6: #ff97bb,
-    7: #ff82ae,
-    8: #ff6da0,
-    9: #ff5892,
-    10: #ea5186,
-    11: #d4497a,
-    12: #bf426e,
-    13: #a0375c,
-    14: #802c49,
-    15: #5e2036,
-);
-
-
-// stylelint-disable scss/no-global-function-names
-/// The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
-/// @group palette
-$kendo-palette-gray: $_default-palette-gray !default;
-$kendo-palette-gray: map.merge($_default-palette-gray, $kendo-palette-gray);
-
-/// The Coral Palette provides colors to the Primary and Series A variable groups.
-/// @group palette
-$kendo-palette-coral: $_default-palette-coral !default;
-$kendo-palette-coral: map.merge($_default-palette-coral, $kendo-palette-coral);
-
-/// The Sky Blue Palette provides colors to the Tertiary variable group.
-/// @group palette
-$kendo-palette-sky-blue: $_default-palette-sky-blue !default;
-$kendo-palette-sky-blue: map.merge($_default-palette-sky-blue, $kendo-palette-sky-blue);
-
-/// The Green Palette provides colors to the Success variable group.
-/// @group palette
-$kendo-palette-green: $_default-palette-green !default;
-$kendo-palette-green: map.merge($_default-palette-green, $kendo-palette-green);
-
-/// The Blue Palette provides colors to the Info variable group.
-/// @group palette
-$kendo-palette-blue: $_default-palette-blue !default;
-$kendo-palette-blue: map.merge($_default-palette-blue, $kendo-palette-blue);
-
-/// The Yellow Palette provides colors to the Warning variable group.
-/// @group palette
-$kendo-palette-yellow: $_default-palette-yellow !default;
-$kendo-palette-yellow: map.merge($_default-palette-yellow, $kendo-palette-yellow);
-
-/// The Red Palette provides colors to the Error variable group.
-/// @group palette
-$kendo-palette-red: $_default-palette-red !default;
-$kendo-palette-red: map.merge($_default-palette-red, $kendo-palette-red);
-
-/// The Lemon Yellow Palette provides colors to the Series B variable group.
-/// @group palette
-$kendo-palette-lemon-yellow: $_default-palette-lemon-yellow !default;
-$kendo-palette-lemon-yellow: map.merge($_default-palette-lemon-yellow, $kendo-palette-lemon-yellow);
-
-/// The Spring Green Palette provides colors to the Series C variable group.
-/// @group palette
-$kendo-palette-spring-green: $_default-palette-spring-green !default;
-$kendo-palette-spring-green: map.merge($_default-palette-spring-green, $kendo-palette-spring-green);
-
-/// The Royal Blue Palette provides colors to the Series D variable group.
-/// @group palette
-$kendo-palette-royal-blue: $_default-palette-royal-blue !default;
-$kendo-palette-royal-blue: map.merge($_default-palette-royal-blue, $kendo-palette-royal-blue);
-
-/// The Lavender Purple Palette provides colors to the Series E variable group.
-/// @group palette
-$kendo-palette-lavender-purple: $_default-palette-lavender-purple !default;
-$kendo-palette-lavender-purple: map.merge($_default-palette-lavender-purple, $kendo-palette-lavender-purple);
-
-/// The Flamingo Pink Palette provides colors to the Series F variable group.
-/// @group palette
-$kendo-palette-flamingo-pink: $_default-palette-flamingo-pink !default;
-$kendo-palette-flamingo-pink: map.merge($_default-palette-flamingo-pink, $kendo-palette-flamingo-pink);
-// stylelint-enable scss/no-global-function-names