@progress/kendo-theme-meridian 14.0.0-dev.4 → 14.0.0-dev.5

package/dist/meta/variables.json

@@ -5560,7 +5560,7 @@
     },
     "kendo-menu-item-text": {
         "type": "String",
-        "value": "var(--kendo-color-subtle)"
+        "value": "var(--kendo-color-on-app-surface)"
     },
     "kendo-menu-item-border": {
         "type": "Null",
@@ -7038,8 +7038,8 @@
         "value": "var(--kendo-spacing-8)"
     },
     "kendo-color-palette-tile-focus-shadow": {
-        "type": "List",
-        "value": "(inset 0 0 0 2px var(--kendo-color-on-inverse), inset 0 0 0 4px var(--kendo-color-subtle))"
+        "type": "String",
+        "value": "none"
     },
     "kendo-color-palette-tile-hover-shadow": {
         "type": "List",
@@ -7067,6 +7067,18 @@
             }
         }
     },
+    "kendo-color-palette-tile-focus-outline-color": {
+        "type": "String",
+        "value": "var(--kendo-color-subtle)"
+    },
+    "kendo-color-palette-tile-focus-outline-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-color-palette-tile-focus-outline-offset": {
+        "type": "Number",
+        "value": "1px"
+    },
     "kendo-color-gradient-default-size": {
         "type": "String",
         "value": "\"md\""
@@ -13015,8 +13027,8 @@
         "value": "1px"
     },
     "kendo-pivotgrid-border-radius": {
-        "type": "String",
-        "value": "var(--kendo-border-radius-xxl)"
+        "type": "Null",
+        "value": "null"
     },
     "kendo-pivotgrid-icon-spacing": {
         "type": "String",
@@ -13595,12 +13607,12 @@
         "value": "null"
     },
     "kendo-taskboard-toolbar-padding-y": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-spacing-4) * 0.625)"
+        "type": "String",
+        "value": "var(--kendo-spacing-3\\.5)"
     },
     "kendo-taskboard-toolbar-padding-x": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-spacing-4) * 0.625)"
+        "type": "String",
+        "value": "var(--kendo-spacing-3\\.5)"
     },
     "kendo-taskboard-toolbar-bg": {
         "type": "String",
@@ -13619,8 +13631,12 @@
         "value": "null"
     },
     "kendo-taskboard-content-padding-y": {
-        "type": "String",
-        "value": "var(--kendo-spacing-4)"
+        "type": "List",
+        "value": "(0 var(--kendo-spacing-4))"
+    },
+    "kendo-taskboard-content-padding-x": {
+        "type": "Number",
+        "value": "0"
     },
     "kendo-taskboard-column-container-spacing-y": {
         "type": "Calculation",

package/lib/swatches/meridian-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Meridian Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-meridian",
-    "version": "14.0.0-dev.4",
+    "version": "14.0.0-dev.5",
     "previewColors": [
         "oklch(13.85% 0.0249 273.24deg)",
         "oklch(23.28% 0.0218 272.75deg)",

package/lib/swatches/meridian-main.json

@@ -3,7 +3,7 @@
     "name": "Meridian Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-meridian",
-    "version": "14.0.0-dev.4",
+    "version": "14.0.0-dev.5",
     "previewColors": [
         "oklch(100% 0 0deg)",
         "oklch(98.46% 0.0017 247.84deg)",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-meridian",
   "description": "Meridian theme for Kendo UI",
-  "version": "14.0.0-dev.4",
+  "version": "14.0.0-dev.5",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.8.0",
-    "@progress/kendo-theme-core": "14.0.0-dev.4",
-    "@progress/kendo-theme-utils": "14.0.0-dev.4"
+    "@progress/kendo-theme-core": "14.0.0-dev.5",
+    "@progress/kendo-theme-utils": "14.0.0-dev.5"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "0a049a1cd9554ac43cbd9fde45dc9ac49703cadf"
+  "gitHead": "e4940bedb197a2fd5923e82978532f175982b08a"
 }

package/scss/action-sheet/_layout.scss

@@ -6,10 +6,6 @@
 @mixin kendo-action-sheet--layout() {
     @include kendo-action-sheet--layout-base();
 
-    .k-actionsheet-item {
-        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
-    }
-
     .k-actionsheet .k-list-ul {
         padding-inline: $kendo-list-container-padding-inline;
         padding-block: $kendo-list-container-padding-block;

package/scss/bottom-navigation/_layout.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-bottom-navigation--layout() {
     @include kendo-bottom-navigation--layout-base();
-
-    .k-bottom-nav-item {
-        transition: background-color k-transition(emphasis), color k-transition(emphasis), font-weight k-transition(emphasis), outline k-transition(emphasis);
-    }
 }

package/scss/breadcrumb/_layout.scss

@@ -4,9 +4,4 @@
 
 @mixin kendo-breadcrumb--layout() {
     @include kendo-breadcrumb--layout-base();
-
-    .k-breadcrumb-link,
-    .k-breadcrumb-root-link {
-        transition: color k-transition(rapid), background-color k-transition(rapid), outline k-transition(rapid);
-    }
 }

package/scss/bubble/_layout.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-bubble--layout() {
     @include kendo-bubble--layout-base();
-
-    .k-bubble {
-        transition: border-color k-transition(rapid), background-color k-transition(rapid), outline k-transition(rapid);
-    }
 }

package/scss/button/_theme.scss

@@ -162,18 +162,30 @@
                         // Hover state
                         &:hover,
                         &.k-hover {
-                            background-color: color-mix(in srgb, k-color(#{$name}-subtle-hover) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                            @if $name == "warning" {
+                                background-color: color-mix(in srgb, k-color(#{$name}-subtle-hover) 25%, transparent) !important; // stylelint-disable-line declaration-no-important
+                            } @else {
+                                background-color: color-mix(in srgb, k-color(#{$name}-subtle-hover) 50%, transparent) !important; // stylelint-disable-line declaration-no-important
+                            }
                         }
 
                         // Active state
                         &:active,
                         &.k-active {
-                            background-color: color-mix(in srgb, k-color(#{$name}-subtle-active) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                            @if $name == "warning" {
+                                background-color: color-mix(in srgb, k-color(#{$name}-subtle-active) 35%, transparent) !important; // stylelint-disable-line declaration-no-important
+                            } @else {
+                                background-color: color-mix(in srgb, k-color(#{$name}-subtle-active) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                            }
                         }
 
                         // Selected state
                         &.k-selected {
-                            background-color: color-mix(in srgb, k-color(#{$name}-subtle-active) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                            @if $name == "warning" {
+                                background-color: color-mix(in srgb, k-color(#{$name}-subtle-active) 35%, transparent) !important; // stylelint-disable-line declaration-no-important
+                            } @else {
+                                background-color: color-mix(in srgb, k-color(#{$name}-subtle-active) 70%, transparent) !important; // stylelint-disable-line declaration-no-important
+                            }
                         }
                     }
                 }

package/scss/calendar/_layout.scss

@@ -15,10 +15,6 @@
                 border-radius: $kendo-calendar-range-cell-border-radius;
             }
         }
-
-        .k-calendar-cell-inner {
-            transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
-        }
     }
 
     .k-calendar:not(.k-calendar-infinite) {

package/scss/chart-wizard/_layout.scss

@@ -3,10 +3,4 @@
 
 @mixin kendo-chart-wizard--layout() {
     @include kendo-chart-wizard--layout-base();
-
-    .k-chart-wizard {
-        .k-icon-background-area {
-            transition: outline k-transition(rapid), border-color k-transition(rapid);
-        }
-    }
 }

package/scss/checkbox/_layout.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-checkbox--layout() {
     @include kendo-checkbox--layout-base();
-
-    .k-checkbox {
-        transition: background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid), opacity k-transition(rapid);
-    }
 }

package/scss/chip/_layout.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-chip--layout() {
     @include kendo-chip--layout-base();
-
-    .k-chip {
-        transition: color k-transition(rapid), background-color k-transition(rapid), outline k-transition(rapid), opacity k-transition(rapid);
-    }
 }

package/scss/colorpalette/_layout.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-color-palette--layout() {
     @include kendo-color-palette--layout-base();
-
-    .k-colorpalette-tile {
-        transition: outline k-transition(rapid);
-    }
 }

package/scss/colorpalette/_theme.scss

@@ -1,6 +1,20 @@
 @use "@progress/kendo-theme-core/scss/components/colorpalette/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
 
 
 @mixin kendo-color-palette--theme() {
     @include kendo-color-palette--theme-base();
+
+    .k-colorpalette-tile {
+        &:focus,
+        &.k-focus {
+            @include focus-indicator(
+                $indicator: $kendo-color-palette-tile-focus-outline-color,
+                $type: "outline",
+                $outline-width: $kendo-color-palette-tile-focus-outline-width,
+                $outline-offset: $kendo-color-palette-tile-focus-outline-offset
+            );
+        }
+    }
 }

package/scss/colorpalette/_variables.scss

@@ -44,7 +44,16 @@ $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default
 
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
-$kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px k-color(on-inverse), inset 0 0 0 4px k-color(subtle) !default;
+$kendo-color-palette-tile-focus-shadow: none !default;
+/// The outline color of the ColorPalette focused tile.
+/// @group color-palette
+$kendo-color-palette-tile-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the ColorPalette focused tile.
+/// @group color-palette
+$kendo-color-palette-tile-focus-outline-width: 1px !default;
+/// The outline offset of the ColorPalette focused tile.
+/// @group color-palette
+$kendo-color-palette-tile-focus-outline-offset: 1px !default;
 /// The shadow of the ColorPalette hovered tile.
 /// @group color-palette
 $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px k-color(inverse), inset 0 0 0 1px color-mix(in srgb, k-color(on-inverse) 80%, transparent) !default;

package/scss/colorpicker/_layout.scss

@@ -1,5 +1,27 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "../input/_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/colorpicker/_layout.scss" as *;
 
 @mixin kendo-color-picker--layout() {
     @include kendo-color-picker--layout-base();
+
+    .k-colorpicker {
+        // Roundness
+        @each $roundness in $kendo-picker-roundness {
+            #{k-when-default($kendo-picker-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+
+                @each $size, $size-props in $kendo-input-sizes {
+                    $_padding-y: map.get( $size-props, padding-y );
+
+                    #{k-when-default($kendo-picker-default-size, $size)}
+                    &.k-picker-#{$size} {
+                        @include concentric-radius(k-border-radius($roundness), $_padding-y, ".k-color-preview");
+                    }
+                }
+            }
+        }
+    }
 }

package/scss/drawer/_layout.scss

@@ -12,7 +12,6 @@
     }
 
     .k-drawer-item {
-        transition: background-color k-transition(snappy), color k-transition(snappy), outline k-transition(snappy);
 
         > .k-drawer-link {
             gap: $kendo-drawer-item-spacing;

package/scss/fab/_layout.scss

@@ -7,7 +7,6 @@
     @include kendo-fab--layout-base();
 
     .k-fab {
-        transition: background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid), opacity k-transition(rapid);
 
         .k-fab-icon {
             min-width: calc( #{$kendo-fab-font-size} * #{$kendo-fab-line-height} );

package/scss/filter/_layout.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-filter--layout() {
     @include kendo-filter--layout-base();
-
-    .k-filter-menu-container .k-toolbar {
-        transition: outline k-transition(snappy);
-    }
 }

package/scss/grid/_layout.scss

@@ -62,4 +62,22 @@
     .k-grouping-row .k-table-td {
         font-weight: var(--kendo-font-weight-medium, 500);
     }
+
+    // Row-span cells use an inset shadow for all borders,
+    // so zero out the td's own borders to avoid doubling.
+    .k-grid .k-table-td-row-span {
+        border-width: 0;
+    }
+
+    // Pinned and sticky containers have their own borders,
+    // so zero out the adjacent row td borders to avoid doubling.
+    .k-grid-pinned-wrap,
+    .k-grid-sticky-container {
+        .k-table-row:first-child > .k-table-td {
+            border-block-start-width: 0;
+        }
+        .k-table-row:last-child > .k-table-td {
+            border-block-end-width: 0;
+        }
+    }
 }

package/scss/input/_layout.scss

@@ -10,7 +10,6 @@
     @include kendo-input--layout-base();
 
     .k-input {
-        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid), opacity k-transition(rapid);
 
         .k-input-button,
         .k-input-spinner {
@@ -53,12 +52,12 @@
                 .k-input-suffix > .k-icon,
                 .k-input-suffix > .k-icon-wrapper-host .k-icon,
                 .k-input-suffix > .k-input-suffix-text {
-                    padding-block: calc( (#{$_padding-x} + #{$_padding-y}) / 2) ;
+                    padding-block: $_padding-y;
                     padding-inline: calc( (#{$_padding-x} + #{$_padding-y}) / 2) ;
                 }
 
                 .k-clear-value {
-                    padding-block: calc( (#{$_padding-x} + #{$_padding-y}) / 2) ;
+                    padding-block: $_padding-y;
                     padding-inline: 0 $_padding-x;
                 }
 

package/scss/list/_layout.scss

@@ -4,9 +4,4 @@
 
 @mixin kendo-list--layout() {
     @include kendo-list--layout-base();
-
-    .k-list-item,
-    .k-list-custom-value {
-        transition: color k-transition(snappy), background-color k-transition(snappy), outline-color k-transition(snappy), outline k-transition(snappy);
-    }
 }

package/scss/menu/_layout.scss

@@ -7,7 +7,6 @@
 
     .k-menu-item {
         border-radius: k-border-radius(sm);
-        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
     }
 
     .k-menu-group {
@@ -19,7 +18,6 @@
     .k-menu.k-context-menu {
         .k-item > .k-link {
             border-radius: k-border-radius(sm);
-            transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
         }
     }
 

package/scss/menu/_theme.scss

@@ -10,6 +10,10 @@
         background-color: unset;
     }
 
+    .k-popup > .k-menu-group {
+        background-color: inherit;
+    }
+
     .k-menu:not(.k-context-menu) > .k-item:focus,
     .k-menu:not(.k-context-menu) > .k-item.k-focus,
     .k-menu-group .k-item:focus > .k-link,
@@ -17,4 +21,8 @@
         @include focus-indicator( $kendo-menu-focus-outline-color, $type: "outline", $outline-offset: $kendo-menu-focus-outline-offset );
     }
 
+    .k-menu:not(.k-context-menu) > .k-item:active,
+    .k-menu:not(.k-context-menu) > .k-item.k-active {
+        font-weight: $kendo-menu-item-selected-font-weight;
+    }
 }

package/scss/menu/_variables.scss

@@ -62,7 +62,7 @@ $kendo-menu-item-selected-font-weight: var( --kendo-font-weight-semibold, normal
 $kendo-menu-item-bg: null !default;
 /// The text color of the Menu item.
 /// @group menu
-$kendo-menu-item-text: k-color(subtle) !default;
+$kendo-menu-item-text: k-color(on-app-surface) !default;
 /// The border color of the Menu item.
 /// @group menu
 $kendo-menu-item-border: null !default;

package/scss/panelbar/_layout.scss

@@ -20,12 +20,10 @@
         > .k-panelbar-header > .k-link {
             border-radius: $kendo-panelbar-item-border-radius;
             font-weight: $kendo-panelbar-header-font-weight;
-            transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
         }
 
         .k-panelbar-group > .k-panelbar-item > .k-link {
             border-radius: $kendo-panelbar-item-border-radius;
-            transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
         }
     }
 }

package/scss/pivotgrid/_variables.scss

@@ -28,7 +28,7 @@ $kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-pivotgrid-border-width: 1px !default;
 /// The border radius of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-border-radius: k-border-radius(xxl) !default;
+$kendo-pivotgrid-border-radius: null !default;
 /// The icon spacing of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-icon-spacing: k-spacing(1) !default;

package/scss/radio/_layout.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-radio--layout() {
     @include kendo-radio--layout-base();
-
-    .k-radio {
-        transition: background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid), opacity k-transition(rapid);
-    }
 }

package/scss/scrollview/_layout.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-scrollview--layout() {
     @include kendo-scrollview--layout-base();
-
-    .k-scrollview-nav > .k-link {
-        transition: background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
-    }
 }

package/scss/slider/_layout.scss

@@ -4,18 +4,4 @@
 
 @mixin kendo-slider--layout() {
     @include kendo-slider--layout-base();
-
-    .k-slider-transitions {
-        &.k-slider-horizontal {
-            .k-draghandle {
-                transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, border-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, outline $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
-            }
-        }
-
-        &.k-slider-vertical {
-            .k-draghandle {
-                transition: bottom  $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, border-color $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function, outline $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
-            }
-        }
-    }
 }

package/scss/spreadsheet/_layout.scss

@@ -5,10 +5,6 @@
 @mixin kendo-spreadsheet--layout() {
     @include kendo-spreadsheet--layout-base();
 
-    .k-spreadsheet-active-cell {
-        transition: outline k-transition(snappy);
-    }
-
     .k-spreadsheet-toolbar {
         border-radius: 0;
     }

package/scss/suggestion/_layout.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-suggestion--layout() {
     @include kendo-suggestion--layout-base();
-
-    .k-suggestion {
-        transition: background-color k-transition(rapid), outline k-transition(rapid);
-    }
 }

package/scss/tabstrip/_layout.scss

@@ -10,10 +10,6 @@
     @include kendo-tabstrip--layout-base();
 
     .k-tabstrip {
-        .k-tabstrip-item,
-        .k-item {
-            transition: color k-transition(emphasis), border-color k-transition(emphasis), outline k-transition(emphasis), background-color k-transition(emphasis), font-weight k-transition(emphasis);
-        }
 
         // TabStrip sizes
         @each $size, $size-props in $kendo-tabstrip-sizes {

package/scss/taskboard/_variables.scss

@@ -33,7 +33,7 @@ $kendo-taskboard-border: null !default;
 
 /// The vertical padding of the TaskBoard Toolbar.
 /// @group taskboard
-$kendo-taskboard-toolbar-padding-y: calc( #{$kendo-taskboard-spacer} * .625 ) !default;
+$kendo-taskboard-toolbar-padding-y: k-spacing(3.5) !default;
 /// The horizontal padding of the TaskBoard Toolbar.
 /// @group taskboard
 $kendo-taskboard-toolbar-padding-x: $kendo-taskboard-toolbar-padding-y !default;
@@ -52,7 +52,10 @@ $kendo-taskboard-toolbar-gradient: null !default;
 
 /// The vertical padding of the TaskBoard content.
 /// @group taskboard
-$kendo-taskboard-content-padding-y: $kendo-taskboard-spacer !default;
+$kendo-taskboard-content-padding-y: 0 $kendo-taskboard-spacer !default;
+/// The horizontal padding of the TaskBoard content.
+/// @group taskboard
+$kendo-taskboard-content-padding-x: 0 !default;
 
 /// The vertical spacing of the TaskBoard column container.
 /// @group taskboard
@@ -283,6 +286,7 @@ $kendo-taskboard-drag-placeholder-border: k-color(border) !default;
     $kendo-taskboard-toolbar-border: $kendo-taskboard-toolbar-border,
     $kendo-taskboard-toolbar-gradient: $kendo-taskboard-toolbar-gradient,
     $kendo-taskboard-content-padding-y: $kendo-taskboard-content-padding-y,
+    $kendo-taskboard-content-padding-x: $kendo-taskboard-content-padding-x,
     $kendo-taskboard-column-container-spacing-y: $kendo-taskboard-column-container-spacing-y,
     $kendo-taskboard-column-container-padding-y: $kendo-taskboard-column-container-padding-y,
     $kendo-taskboard-column-container-padding-x: $kendo-taskboard-column-container-padding-x,

package/scss/treeview/_layout.scss

@@ -5,10 +5,6 @@
 @mixin kendo-treeview--layout() {
     @include kendo-treeview--layout-base();
 
-    .k-treeview-leaf {
-        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
-    }
-
     .k-treeview-item-content {
         margin-bottom: k-spacing(.5);
     }