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

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

@@ -3,13 +3,13 @@
     "name": "Meridian Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-meridian",
-    "version": "14.0.0-dev.1",
+    "version": "14.0.0-dev.4",
     "previewColors": [
         "oklch(13.85% 0.0249 273.24deg)",
         "oklch(23.28% 0.0218 272.75deg)",
         "oklch(54.53% 0.2124 275.85deg)",
         "oklch(48.83% 0.1950 275.43deg)",
-        "oklch(95.10% 0.0063 255.48deg)"
+        "oklch(86.90% 0.0198 252.89deg)"
     ],
     "components": [],
     "groups": [

package/lib/swatches/meridian-main.json

@@ -3,13 +3,13 @@
     "name": "Meridian Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-meridian",
-    "version": "14.0.0-dev.1",
+    "version": "14.0.0-dev.4",
     "previewColors": [
-        "#ffffff",
-        "#f5f5f5",
-        "#ff6358",
-        "#d6534a",
-        "#424242"
+        "oklch(100% 0 0deg)",
+        "oklch(98.46% 0.0017 247.84deg)",
+        "oklch(54.53% 0.2124 275.85deg)",
+        "oklch(48.83% 0.1950 275.43deg)",
+        "oklch(37.17% 0.0392 257.29deg)"
     ],
     "components": [],
     "groups": []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-meridian",
   "description": "Meridian theme for Kendo UI",
-  "version": "14.0.0-dev.1",
+  "version": "14.0.0-dev.4",
   "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.1",
-    "@progress/kendo-theme-utils": "14.0.0-dev.1"
+    "@progress/kendo-theme-core": "14.0.0-dev.4",
+    "@progress/kendo-theme-utils": "14.0.0-dev.4"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "780438a25511afc7e4aef75ff1fd10a259b64356"
+  "gitHead": "0a049a1cd9554ac43cbd9fde45dc9ac49703cadf"
 }

package/scss/_variables.scss

@@ -1,6 +1,2 @@
 $kendo-zindex-popup: 1 !default;
 $kendo-zindex-window: 2 !default;
-
-// TODO: refactor
-/// Box shadow of focused items.
-$kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/action-sheet/_theme.scss

@@ -1,6 +1,15 @@
 @use "@progress/kendo-theme-core/scss/components/action-sheet/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
 
 
 @mixin kendo-action-sheet--theme() {
     @include kendo-action-sheet--theme-base();
+
+    .k-actionsheet-item {
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-actionsheet-item-focus-outline-color, $inset: true, $type: "outline", $outline-offset: $kendo-actionsheet-item-focus-outline-offset );
+        }
+    }
 }

package/scss/action-sheet/_variables.scss

@@ -156,13 +156,13 @@ $kendo-actionsheet-item-title-text-transform: null !default;
 $kendo-actionsheet-item-description-font-size: var(--kendo-font-size-sm) !default;
 /// The text color of the ActionSheet item description.
 /// @group action-sheet
-$kendo-actionsheet-item-description-text: k-color(subtle) !default;
+$kendo-actionsheet-item-description-text: color-mix(in srgb, k-color(subtle) 75%, k-color(on-app-surface)) !default;
 /// The line height of the ActionSheet item description.
 /// @group action-sheet
 $kendo-actionsheet-item-description-line-height: null !default;
 /// The background color of the hovered ActionSheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-hover-bg: k-color(primary-subtle-hover) !default;
+$kendo-actionsheet-item-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The text color of the hovered ActionSheet item.
 /// @group action-sheet
 $kendo-actionsheet-item-hover-text: k-color(primary-on-subtle) !default;
@@ -190,7 +190,13 @@ $kendo-actionsheet-item-focus-border: null !default;
 $kendo-actionsheet-item-focus-gradient: null !default;
 /// The shadow of the focused ActionSheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-focus-shadow: $kendo-focus-shadow !default;
+$kendo-actionsheet-item-focus-shadow: null !default;
+/// The outline color of the focused ActionSheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-outline-color: k-color(subtle) !default;
+/// The outline offset of the focused ActionSheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-outline-offset: 1px !default;
 
 /// The background color of the disabled ActionSheet item.
 /// @group action-sheet

package/scss/bottom-navigation/_theme.scss

@@ -47,8 +47,17 @@
                     );
 
                     .k-bottom-nav-item.k-selected {
-                        @include fill( $bg: color-mix(in srgb, k-color(#{$name}-subtle-active) 70%, transparent), $color: k-color(#{$name}-on-subtle));
-
+                        @if $name == "inverse" {
+                            @include fill(
+                                $bg: k-color(inverse-active),
+                                $color: k-color(on-inverse)
+                            );
+                        } @else {
+                            @include fill(
+                                $bg: k-color(#{$name}-subtle-active),
+                                $color: k-color(#{$name}-on-subtle)
+                            );
+                        }
                     }
                 }
             }
@@ -61,7 +70,17 @@
                 #{k-when-default($kendo-bottom-nav-default-theme-color, $name)}
                 &.k-bottom-nav-#{$name} {
                     .k-bottom-nav-item.k-selected {
-                        @include fill( $bg: k-color(#{$name}-subtle-active), $color: k-color(#{$name}-on-subtle));
+                        @if $name == "inverse" {
+                            @include fill(
+                                $bg: k-color(inverse-active),
+                                $color: k-color(on-inverse)
+                            );
+                        } @else {
+                            @include fill(
+                                $bg: k-color(#{$name}-subtle-active),
+                                $color: k-color(#{$name}-on-subtle)
+                            );
+                        }
                     }
                 }
             }

package/scss/card/_theme.scss

@@ -1,4 +1,5 @@
 @use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/card/_theme.scss" as *;
 
 
@@ -7,5 +8,15 @@
 
     .k-card {
         backdrop-filter: k-translucency-blur(2);
+
+        &:focus,
+        &.k-focus {
+            @include focus-indicator(
+                $type: "outline",
+                $indicator: $kendo-card-focus-outline-color,
+                $outline-width: $kendo-card-focus-outline-width,
+                $outline-offset: $kendo-card-focus-outline-offset
+            );
+        }
     }
 }

package/scss/card/_variables.scss

@@ -54,7 +54,16 @@ $kendo-card-focus-bg: null !default;
 $kendo-card-focus-text: null !default;
 /// The border color of the focused Card.
 /// @group card
-$kendo-card-focus-border: k-color(border-alt) !default;
+$kendo-card-focus-border: null !default;
+/// The outline color of the focused Card.
+/// @group card
+$kendo-card-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused Card.
+/// @group card
+$kendo-card-focus-outline-width: 1px !default;
+/// The outline offset of the focused Card.
+/// @group card
+$kendo-card-focus-outline-offset: 1px !default;
 
 // TODO: double-check: the default theme is not supposed to elevate the Card on focus
 

package/scss/coloreditor/_variables.scss

@@ -140,7 +140,7 @@ $kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
 
 /// The outline color of the focused ColorGradient.
 /// @group color-editor
-$kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
+$kendo-color-editor-color-gradient-focus-outline-color: k-color(subtle) !default;
 /// The outline width of the focused ColorGradient.
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline: 2px !default;

package/scss/colorgradient/_variables.scss

@@ -177,7 +177,7 @@ $kendo-color-gradient-draghandle-border: k-color(inverse) !default;
 $kendo-color-gradient-draghandle-focus-shadow: transparent !default;
 /// The outline color of the focused ColorGradient drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-focus-outline-color: color-mix(in srgb, k-color(on-inverse) 80%, transparent) !default;
+$kendo-color-gradient-draghandle-focus-outline-color: k-color(on-inverse) !default;
 /// The outline width of the focused ColorGradient drag handle.
 /// @group color-gradient
 $kendo-color-gradient-draghandle-focus-outline-width: 2px !default;

package/scss/colorpalette/_variables.scss

@@ -44,7 +44,7 @@ $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: 0 0 3px 1px k-color(inverse), inset 0 0 0 1px color-mix(in srgb, k-color(on-inverse) 60%, transparent) !default;
+$kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px k-color(on-inverse), inset 0 0 0 4px k-color(subtle) !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/core/color-system/_swatch.scss

@@ -62,9 +62,9 @@ $_default-colors: (
     info-hover: #{"oklch(from var(--kendo-color-info) max(0.15, calc(l + clamp(-0.0362, (0.35 - l) * 99999, 0.0362))) calc(c - 0.0083) calc(h - 0.10))"},
     info-active: #{"oklch(from var(--kendo-color-info) max(0.20, calc(l + clamp(-0.0735, (0.35 - l) * 99999, 0.0735))) calc(c - 0.0181) calc(h - 0.68))"},
     info-emphasis: #{"oklch(from var(--kendo-color-info) calc(l + 0.1218) calc(c - 0.0235) calc(h - 8.04))"},
-    info-on-subtle: #{"oklch(from var(--kendo-color-info) calc(l - 0.1490) calc(c - 0.0360) calc(h - 0.92))"},
+    info-on-subtle: #{"oklch(from var(--kendo-color-info) calc(l - 0.20) calc(c - 0.0360) calc(h - 0.92))"},
     on-info: #{"oklch(from var(--kendo-color-info) clamp(0.10, (0.65 - l) * 99999, 1) 0 h)"},
-    info-on-surface: #{"oklch(from var(--kendo-color-info) clamp(0.20, calc(l - 0.0735), 0.60) calc(c - 0.0181) calc(h - 0.68))"},
+    info-on-surface: #{"oklch(from var(--kendo-color-info) clamp(0.20, calc(l - 0.18), 0.55) calc(c - 0.0181) calc(h - 0.68))"},
     // Success
     success-subtle: #{"oklch(from var(--kendo-color-success) calc(l + 0.3820) calc(c - 0.0756) calc(h + 10.01))"},
     success-subtle-hover: #{"oklch(from var(--kendo-color-success) calc(l + 0.3257) calc(c - 0.0510) calc(h + 9.38))"},
@@ -95,9 +95,9 @@ $_default-colors: (
     error-hover: #{"oklch(from var(--kendo-color-error) max(0.15, calc(l + clamp(-0.0415, (0.35 - l) * 99999, 0.0415))) calc(c - 0.0154) calc(h + 0.39))"},
     error-active: #{"oklch(from var(--kendo-color-error) max(0.20, calc(l + clamp(-0.0851, (0.35 - l) * 99999, 0.0851))) calc(c - 0.0324) calc(h - 0.19))"},
     error-emphasis: #{"oklch(from var(--kendo-color-error) calc(l + 0.1479) calc(c - 0.0349) calc(h - 9.11))"},
-    error-on-subtle: #{"oklch(from var(--kendo-color-error) calc(l - 0.1281) calc(c - 0.0490) calc(h - 0.16))"},
+    error-on-subtle: #{"oklch(from var(--kendo-color-error) calc(l - 0.18) calc(c - 0.0490) calc(h - 0.16))"},
     on-error: #{"oklch(from var(--kendo-color-error) clamp(0.10, (0.65 - l) * 99999, 1) 0 h)"},
-    error-on-surface: #{"oklch(from var(--kendo-color-error) clamp(0.20, calc(l - 0.0415), 0.60) calc(c - 0.0154) calc(h + 0.39))"},
+    error-on-surface: #{"oklch(from var(--kendo-color-error) clamp(0.20, calc(l - 0.16), 0.55) calc(c - 0.0154) calc(h + 0.39))"},
     // Inverse
     inverse-subtle: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.5871) calc(c - 0.0115) calc(h - 5.62))"},
     inverse-subtle-hover: #{"oklch(from var(--kendo-color-inverse) calc(l + 0.5114) calc(c - 0.0046) calc(h - 5.58))"},

package/scss/drawer/_variables.scss

@@ -100,7 +100,7 @@ $kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$
 
 /// The background color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-hover-bg: k-color(primary-subtle-hover) !default;
+$kendo-drawer-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The text color of the hovered Drawer item.
 /// @group drawer
 $kendo-drawer-hover-text: k-color(primary-on-subtle) !default;
@@ -118,14 +118,14 @@ $kendo-drawer-focus-outline-color: k-color(subtle) !default;
 
 /// The background color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-bg: k-color(primary-subtle-active) !default;
+$kendo-drawer-selected-bg: color-mix(in srgb, k-color(primary-subtle-active) 70%, transparent) !default;
 /// The text color of the selected Drawer item.
 /// @group drawer
 $kendo-drawer-selected-text: k-color(primary-on-subtle) !default;
 
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-bg: k-color(primary-subtle-active) !default;
+$kendo-drawer-selected-hover-bg: color-mix(in srgb, k-color(primary-subtle-active) 70%, transparent) !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
 $kendo-drawer-selected-hover-text: k-color(primary-on-subtle) !default;

package/scss/expansion-panel/_variables.scss

@@ -65,7 +65,7 @@ $kendo-expander-header-border: null !default;
 
 /// The background color of the hovered ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent ) !default;
+$kendo-expander-header-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The background color of the focused ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-focus-bg: null !default;
@@ -85,7 +85,7 @@ $kendo-expander-title-text: k-color(primary-on-surface) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander
-$kendo-expander-header-sub-title-text: k-color(subtle) !default;
+$kendo-expander-header-sub-title-text: color-mix(in srgb, k-color(subtle) 75%, k-color(on-app-surface)) !default;
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander

package/scss/gantt/_variables.scss

@@ -46,7 +46,7 @@ $kendo-gantt-treelist-border: null !default;
 $kendo-gantt-nonwork-bg: color-mix(in srgb, k-color(on-base) 3%, transparent) !default;
 /// The text color of the Gantt non-working days.
 /// @group gantt
-$kendo-gantt-nonwork-text: null !default;
+$kendo-gantt-nonwork-text: color-mix(in srgb, k-color(subtle) 75%, k-color(on-app-surface)) !default;
 /// The border color of the Gantt non-working days.
 /// @group gantt
 $kendo-gantt-nonwork-border: null !default;
@@ -120,7 +120,7 @@ $kendo-gantt-task-padding-y: k-spacing(1) !default;
 $kendo-gantt-task-bg: k-color(subtle) !default;
 /// The text color of the Gantt task.
 /// @group gantt
-$kendo-gantt-task-text: k-color(base) !default;
+$kendo-gantt-task-text: k-color(on-primary) !default;
 /// The border color of the Gantt task.
 /// @group gantt
 $kendo-gantt-task-border: null !default;

package/scss/grid/_layout.scss

@@ -35,6 +35,13 @@
                 }
             }
         }
+
+        .k-detail-row,
+        .k-master-row {
+            .k-group-cell + :not(.k-group-cell) {
+                border-inline-start: 1px solid k-color(border);
+            }
+        }
     }
 
     // Column menu fix for action buttons focus state
@@ -49,4 +56,10 @@
         backdrop-filter: none;
         border-radius: 0;
     }
+
+    .k-grid-footer .k-table-td,
+    .k-group-footer .k-table-td,
+    .k-grouping-row .k-table-td {
+        font-weight: var(--kendo-font-weight-medium, 500);
+    }
 }

package/scss/grid/_theme.scss

@@ -59,5 +59,9 @@
                 }
             }
         }
+
+        .k-master-row .k-group-cell {
+            border-block-color: transparent;
+        }
     }
 }

package/scss/grid/_variables.scss

@@ -216,7 +216,7 @@ $kendo-grid-border: $kendo-table-border !default;
 $kendo-grid-header-bg: $kendo-table-header-bg !default;
 /// The text color of Grid header.
 /// @group grid
-$kendo-grid-header-text: k-color(subtle) !default;
+$kendo-grid-header-text: color-mix(in srgb, k-color(subtle) 75%, k-color(on-app-surface)) !default;
 /// The border color of Grid header.
 /// @group grid
 $kendo-grid-header-border: $kendo-table-header-border !default;
@@ -304,7 +304,7 @@ $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 $kendo-grid-sorted-icon-spacing: calc( #{k-spacing(2)} - 1px ) !default;
 /// The background color of the Grid.
 /// @group grid
-$kendo-grid-sorted-bg: color-mix(in srgb, k-color(secondary) 4%, transparent) !default;
+$kendo-grid-sorted-bg: color-mix(in srgb, k-color(secondary) 6%, transparent) !default;
 /// The text color of the Grid.
 /// @group grid
 $kendo-grid-sorting-indicator-text: k-color(secondary) !default;
@@ -343,14 +343,14 @@ $kendo-grid-command-cell-button-spacing: k-spacing(2) !default;
 $kendo-grid-sticky-bg: k-color(surface-alt) !default;
 /// The background color of the hovered sticky content in the Grid.
 /// @group grid
-$kendo-grid-sticky-hover-bg: k-color(base-hover) !default;
+$kendo-grid-sticky-hover-bg: color-mix(in srgb, k-color(base) 60%, k-color(surface-alt)) !default;
 /// The alternate background color of the sticky content in the Grid.
 /// @group grid
 $kendo-grid-sticky-alt-bg: $kendo-grid-alt-bg !default;
 
 /// The border color of the sticky content in the Grid.
 /// @group grid
-$kendo-grid-sticky-border: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
+$kendo-grid-sticky-border: k-color(border-alt) !default;
 
 /// The background color of the sticky header in the Grid.
 /// @group grid
@@ -507,10 +507,10 @@ $kendo-grid-stack-expandable-shadow-height: k-spacing(2.5) !default;
 
 /// The color of the Grid stack layout column header.
 /// @group grid
-$kendo-grid-stack-header-color: k-color(subtle) !default;
+$kendo-grid-stack-header-color: color-mix(in srgb, k-color(subtle) 75%, k-color(on-app-surface)) !default;
 /// The outline color of the Grid stack layout focused cell.
 /// @group grid
-$kendo-grid-stack-focus-outline: color-mix(in srgb, k-color(on-app-surface) 12%, transparent) !default;
+$kendo-grid-stack-focus-outline: k-color(subtle) !default;
 /// The Grid stack layout expandable row shadow.
 /// @group grid
 $kendo-grid-stack-expandable-shadow: k-elevation(2) !default;

package/scss/list/_variables.scss

@@ -304,7 +304,7 @@ $kendo-list-item-border-radius: k-border-radius(sm) !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: k-color(primary-subtle-hover) !default;
+$kendo-list-item-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The text color of the hovered List items.
 /// @group list
 $kendo-list-item-hover-text: k-color(primary-on-subtle) !default;
@@ -327,7 +327,7 @@ $kendo-list-item-focus-outline-offset: 1px !default;
 
 /// The background color of the selected List items.
 /// @group list
-$kendo-list-item-selected-bg: k-color(primary-subtle-active) !default;
+$kendo-list-item-selected-bg: color-mix(in srgb, k-color(primary-subtle-active) 70%, transparent) !default;
 /// The text color of the selected List items.
 /// @group list
 $kendo-list-item-selected-text: k-color(primary-on-subtle) !default;
@@ -354,7 +354,7 @@ $kendo-list-group-item-shadow: inset 0 1px 0 k-color(border) !default;
 
 /// The color of the 'Option Label' text.
 /// @group list
-$kendo-list-option-label-text: k-color(subtle) !default;
+$kendo-list-option-label-text: color-mix(in srgb, k-color(subtle) 75%, k-color(on-app-surface)) !default;
 
 /// The font size of the List item description.
 /// @group list

package/scss/menu/_variables.scss

@@ -286,7 +286,7 @@ $kendo-menu-popup-item-gradient: null !default;
 
 /// The background color of hovered Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-hover-bg: k-color(primary-subtle-hover) !default;
+$kendo-menu-popup-item-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The text color of hovered Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-hover-text: k-color(primary-on-subtle) !default;
@@ -299,7 +299,7 @@ $kendo-menu-popup-item-hover-gradient: null !default;
 
 /// The background color of active Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-active-bg: k-color(primary-subtle-active) !default;
+$kendo-menu-popup-item-active-bg: color-mix(in srgb, k-color(primary-subtle-active) 70%, transparent) !default;
 /// The text color of active Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-active-text: k-color(primary-on-subtle) !default;

package/scss/orgchart/_theme.scss

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

package/scss/orgchart/_variables.scss

@@ -63,10 +63,19 @@ $kendo-orgchart-node-group-border: k-color(border) !default;
 
 /// The border color of the focused OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
+$kendo-orgchart-node-group-focus-border: null !default;
 /// The shadow of the focused OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-focus-shadow: k-elevation(1) !default;
+$kendo-orgchart-node-group-focus-shadow: null !default;
+/// The outline color of the focused OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-focus-outline-width: 1px !default;
+/// The outline offset of the focused OrgChart node group.
+/// @group orgchart
+$kendo-orgchart-node-group-focus-outline-offset: 1px !default;
 
 /// The font size of the OrgChart node group title.
 /// @group orgchart
@@ -99,7 +108,7 @@ $kendo-orgchart-card-border-width: $kendo-card-border-width !default;
 $kendo-orgchart-card-shadow: k-elevation(2) !default;
 /// The shadow of the focused OrgChart Card.
 /// @group orgchart
-$kendo-orgchart-card-focus-shadow: k-elevation(1) !default;
+$kendo-orgchart-card-focus-shadow: null !default;
 
 /// The bottom margin of the OrgChart Card title.
 /// @group orgchart

package/scss/pager/_theme.scss

@@ -1,5 +1,6 @@
 @use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/pager/_theme.scss" as *;
+@use "./_variables.scss" as *;
 
 
 @mixin kendo-pager--theme() {
@@ -7,5 +8,10 @@
 
     .k-pager {
         backdrop-filter: k-translucency-blur(1);
+
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-pager-focus-outline-color, $inset: true, $type: "outline", $outline-offset: $kendo-pager-focus-outline-offset );
+        }
     }
 }

package/scss/pager/_variables.scss

@@ -75,7 +75,13 @@ $kendo-pager-border: k-color(border) !default;
 $kendo-pager-focus-bg: null !default;
 /// The box shadow of the focused Pager.
 /// @group pager
-$kendo-pager-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
+$kendo-pager-focus-shadow: null !default;
+/// The outline color of the focused Pager.
+/// @group pager
+$kendo-pager-focus-outline-color: k-color(subtle) !default;
+/// The outline offset of the focused Pager.
+/// @group pager
+$kendo-pager-focus-outline-offset: 1px !default;
 
 /// The border width of the Pager items.
 /// @group pager

package/scss/panelbar/_variables.scss

@@ -84,7 +84,7 @@ $kendo-panelbar-header-gradient: null !default;
 
 /// The background color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-bg: k-color(primary-subtle-hover) !default;
+$kendo-panelbar-header-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-text: k-color(primary-hover) !default;
@@ -123,7 +123,7 @@ $kendo-panelbar-header-focus-outline-offset: 1px !default;
 
 /// The background color of the focused and hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-focus-bg: k-color(primary-subtle-hover) !default;
+$kendo-panelbar-header-hover-focus-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The text color of the focused and hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-focus-text: k-color(primary-on-subtle) !default;
@@ -136,7 +136,7 @@ $kendo-panelbar-header-hover-focus-gradient: null !default;
 
 /// The background color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-bg: k-color(primary-subtle-active) !default;
+$kendo-panelbar-header-selected-bg: color-mix(in srgb, k-color(primary-subtle-active) 70%, transparent) !default;
 /// The text color of the selected PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-text: k-color(primary-on-subtle) !default;
@@ -149,7 +149,7 @@ $kendo-panelbar-header-selected-gradient: null !default;
 
 /// The background color of the selected and hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-hover-bg: k-color(primary-subtle-active) !default;
+$kendo-panelbar-header-selected-hover-bg: color-mix(in srgb, k-color(primary-subtle-active) 70%, transparent) !default;
 /// The text color of the selected and hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-hover-text: k-color(primary-on-subtle) !default;
@@ -188,7 +188,7 @@ $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
 
 /// The background color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-bg: k-color(primary-subtle-hover) !default;
+$kendo-panelbar-item-hover-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The text color of the hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-text: k-color(primary-on-subtle) !default;
@@ -227,7 +227,7 @@ $kendo-panelbar-item-focus-outline-offset: 1px !default;
 
 /// The background color of the focused and hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-focus-bg: k-color(primary-subtle-hover) !default;
+$kendo-panelbar-item-hover-focus-bg: color-mix(in srgb, k-color(primary-subtle-hover) 50%, transparent) !default;
 /// The text color of the focused and hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-focus-text: k-color(primary-on-subtle) !default;
@@ -240,7 +240,7 @@ $kendo-panelbar-item-hover-focus-gradient: null !default;
 
 /// The background color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-bg: k-color(primary-subtle-active) !default;
+$kendo-panelbar-item-selected-bg: color-mix(in srgb, k-color(primary-subtle-active) 70%, transparent) !default;
 /// The text color of the selected PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-text: k-color(primary-on-subtle) !default;
@@ -253,7 +253,7 @@ $kendo-panelbar-item-selected-gradient: null !default;
 
 /// The background color of the selected and hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-hover-bg: k-color(primary-subtle-active) !default;
+$kendo-panelbar-item-selected-hover-bg: color-mix(in srgb, k-color(primary-subtle-active) 70%, transparent) !default;
 /// The text color of the selected and hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-hover-text: k-color(primary-on-subtle) !default;

package/scss/pivotgrid/_layout.scss

@@ -8,4 +8,17 @@
     .k-pivotgrid-configurator-panel.kendo-jquery .k-column-fields {
         border-radius: k-border-radius(md);
     }
+
+    // Table Layout
+    .k-pivotgrid-table .k-pivotgrid-header-root {
+        font-weight: var(--kendo-font-weight-medium, 500);
+    }
+
+    .k-pivotgrid-total {
+        font-weight: var(--kendo-font-weight-normal, 400);
+    }
+
+    .k-pivotgrid-column-headers {
+        border-inline-end: 1px solid k-color(border);
+    }
 }