@progress/kendo-theme-bootstrap 12.1.0-dev.2 → 12.1.0-dev.3

package/lib/swatches/bootstrap-3-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#222222",

package/lib/swatches/bootstrap-3.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 3",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/bootstrap-4-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap 4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#0275d8",
         "#5bc0de",

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

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#212529",

package/lib/swatches/bootstrap-main.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-nordic.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f8f9fa",

package/lib/swatches/bootstrap-turquoise-dark.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#292b2c",

package/lib/swatches/bootstrap-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f2f2f2",

package/lib/swatches/bootstrap-urban.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/lib/swatches/bootstrap-vintage.json

@@ -3,7 +3,7 @@
     "name": "Bootstrap Vintage",
     "product": "kendo",
     "base": "@progress/kendo-theme-bootstrap",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f2efe8",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "12.1.0-dev.2",
+  "version": "12.1.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.5.0",
-    "@progress/kendo-theme-core": "12.1.0-dev.2",
-    "@progress/kendo-theme-utils": "12.1.0-dev.2"
+    "@progress/kendo-theme-core": "12.1.0-dev.3",
+    "@progress/kendo-theme-utils": "12.1.0-dev.3"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "e99d3c1caaddd333f4d74beb7f2061382f0d2241"
+  "gitHead": "71fe28c36a28e15bfd6c0934fa049a4933e9f184"
 }

package/scss/action-sheet/_variables.scss

@@ -15,7 +15,7 @@ $kendo-actionsheet-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-actionsheet-line-height: var( --kendo-line-height, normal ) !default;
 
-$kendo-actionsheet-bg: k-color(app-surface) !default;
+$kendo-actionsheet-bg: k-color(surface-alt) !default;
 $kendo-actionsheet-text: k-color(on-app-surface) !default;
 $kendo-actionsheet-border: k-color(border) !default;
 $kendo-actionsheet-shadow: k-elevation(7) !default;
@@ -73,7 +73,7 @@ $kendo-actionsheet-item-focus-bg: null !default;
 $kendo-actionsheet-item-focus-text: null !default;
 $kendo-actionsheet-item-focus-border: null !default;
 $kendo-actionsheet-item-focus-gradient: null !default;
-$kendo-actionsheet-item-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
+$kendo-actionsheet-item-focus-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(inverse) 13%, transparent) !default;
 
 $kendo-actionsheet-item-disabled-bg: null !default;
 $kendo-actionsheet-item-disabled-text: null !default;

package/scss/adaptive/_variables.scss

@@ -27,7 +27,7 @@ $kendo-adaptive-grid-sort-text: k-color(primary) !default;
 // Adaptive Scheduler
 $kendo-adaptive-scheduler-current-text: k-color(primary) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
-$kendo-adaptive-scheduler-subtle-text: k-color(subtle) !default;
+$kendo-adaptive-scheduler-subtle-text: k-color(on-app-surface) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with (

package/scss/bottom-navigation/_variables.scss

@@ -59,7 +59,7 @@ $kendo-bottom-nav-shadow: k-elevation(4) !default;
 $kendo-bottom-nav-flat-text: k-color(on-app-surface) !default;
 /// The background color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-bg: k-color(app-surface) !default;
+$kendo-bottom-nav-flat-bg: k-color(surface-alt) !default;
 /// The border color of the flat BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-flat-border: k-color(border) !default;

package/scss/breadcrumb/_variables.scss

@@ -54,24 +54,24 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-bg: k-color(app-surface) !default;
+$kendo-breadcrumb-bg: transparent !default;
 /// The base text color of the Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-text: k-color(on-app-surface) !default;
 /// The base border color of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-border: k-color(border) !default;
+$kendo-breadcrumb-border: transparent !default;
 
 /// The box shadow of the focused Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px color-mix(in srgb, currentColor 25%, transparent) !default;
 
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-sm-link-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-x: k-spacing(2) !default;
+$kendo-breadcrumb-md-link-padding-x: k-spacing(2.5) !default;
 /// The horizontal padding of the large Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-lg-link-padding-x: k-spacing(3) !default;
@@ -148,14 +148,14 @@ $kendo-breadcrumb-link-focus-text: $kendo-breadcrumb-link-text !default;
 $kendo-breadcrumb-link-focus-border: null !default;
 /// The box shadow of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px color-mix(in srgb, k-color(on-app-surface) 25%, transparent) !default;
+$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent) !default;
 
 /// The background color of the Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: null !default;
 /// The text color of the Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-text: k-color(primary) !default;
+$kendo-breadcrumb-root-link-text: k-color(primary-on-surface) !default;
 /// The border color of the Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
@@ -165,7 +165,7 @@ $kendo-breadcrumb-root-link-border: null !default;
 $kendo-breadcrumb-root-link-hover-bg: unset !default;
 /// The text color of the hovered Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-hover-text: k-color(primary-hover) !default;
+$kendo-breadcrumb-root-link-hover-text: color-mix(in srgb, k-color(primary-on-surface), black 10%) !default;
 /// The border color of the hovered Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-border: null !default;

package/scss/calendar/_variables.scss

@@ -25,7 +25,7 @@ $kendo-calendar-border-radius: 0 !default;
 $kendo-calendar-cell-size: 38px !default;
 /// The background color of the Calendar.
 /// @group calendar
-$kendo-calendar-bg: k-color(app-surface) !default;
+$kendo-calendar-bg: k-color(surface-alt) !default;
 /// The text color of the Calendar.
 /// @group calendar
 $kendo-calendar-text: k-color(on-app-surface) !default;
@@ -46,9 +46,6 @@ $kendo-calendar-header-border-width: 1px !default;
 /// The background color of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-bg: k-color(surface) !default;
-/// The text color of the header in the Calendar.
-/// @group calendar
-$kendo-calendar-header-text: k-color(on-app-surface) !default;
 /// The border color of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-border: k-color(border) !default;
@@ -98,7 +95,7 @@ $kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
 $kendo-calendar-header-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the header cells in the Calendar.
 /// @group calendar
-$kendo-calendar-header-cell-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-calendar-header-cell-line-height: var( --kendo-line-height-md, normal ) !default;
 
 /// The text color of the header cells in the Calendar.
 /// @group calendar
@@ -152,7 +149,7 @@ $kendo-calendar-weekend-text: null !default;
 $kendo-calendar-today-style: box !default;
 /// The color of the current day in the Calendar.
 /// @group calendar
-$kendo-calendar-today-color: k-color(primary) !default;
+$kendo-calendar-today-color: k-color(primary-on-surface) !default;
 /// The font weight of the current day in the Calendar.
 /// @group calendar
 $kendo-calendar-today-font-weight: var( --kendo-font-weight-bold, normal ) !default;
@@ -237,13 +234,13 @@ $kendo-calendar-navigation-item-height: 2em !default;
 $kendo-calendar-navigation-bg: $kendo-calendar-header-bg !default;
 /// The text color of the Calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-text: $kendo-calendar-header-text !default;
+$kendo-calendar-navigation-text: k-color(on-app-surface) !default;
 /// The border color of the Calendar navigation.
 /// @group calendar
 $kendo-calendar-navigation-border: $kendo-calendar-header-border !default;
 /// The text color of the hovered items in the Calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-hover-text: k-color(primary-hover) !default;
+$kendo-calendar-navigation-hover-text: k-color(primary-on-surface) !default;
 /// The text color of the marker in the Calendar navigation.
 /// @group calendar
 $kendo-calendar-navigation-marker-text: currentColor !default;
@@ -367,7 +364,6 @@ $kendo-calendar-sizes: (
     $kendo-calendar-header-padding-y: $kendo-calendar-header-padding-y,
     $kendo-calendar-header-border-width: $kendo-calendar-header-border-width,
     $kendo-calendar-header-bg: $kendo-calendar-header-bg,
-    $kendo-calendar-header-text: $kendo-calendar-header-text,
     $kendo-calendar-header-border: $kendo-calendar-header-border,
     $kendo-calendar-header-gradient: $kendo-calendar-header-gradient,
     $kendo-calendar-header-shadow: $kendo-calendar-header-shadow,

package/scss/captcha/_variables.scss

@@ -23,13 +23,13 @@ $kendo-captcha-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-captcha-gap: $kendo-captcha-spacer !default;
 /// The background color of the Captcha.
 /// @group captcha
-$kendo-captcha-bg: k-color(app-surface) !default;
+$kendo-captcha-bg: k-color(surface-alt) !default;
 /// The text color of the Captcha.
 /// @group captcha
-$kendo-captcha-text: k-color(app-surface) !default;
+$kendo-captcha-text: k-color(on-app-surface) !default;
 /// The border color of the Captcha.
 /// @group captcha
-$kendo-captcha-border: k-color(app-surface) !default;
+$kendo-captcha-border: k-color(border) !default;
 
 /// The gap of the Captcha image wrapper.
 /// @group captcha

package/scss/card/_variables.scss

@@ -16,7 +16,7 @@ $kendo-card-padding-y: $kendo-card-padding-x !default;
 $kendo-card-border-width: 1px !default;
 /// The border radius of the Card.
 /// @group card
-$kendo-card-border-radius: k-spacing(1.5) !default;
+$kendo-card-border-radius: k-border-radius(md) !default;
 /// The inner border radius of the Card.
 /// @group card
 $kendo-card-inner-border-radius: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) !default;
@@ -36,7 +36,7 @@ $kendo-card-deck-gap: k-spacing(4) !default;
 
 /// The background color of the Card.
 /// @group card
-$kendo-card-bg: k-color(app-surface) !default;
+$kendo-card-bg: k-color(surface-alt) !default;
 /// The text color of the Card.
 /// @group card
 $kendo-card-text: k-color(on-app-surface) !default;
@@ -55,13 +55,13 @@ $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: $kendo-card-border !default;
+$kendo-card-focus-border: k-color(primary-emphasis) !default;
 
 // TODO: double-check: the default theme is not supposed to elevate the Card on focus
 
 /// The shadow of the focused Card.
 /// @group card
-$kendo-card-focus-shadow: k-elevation(3) !default;
+$kendo-card-focus-shadow: 0 0 0 .25rem color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 
 /// The horizontal padding of the Card header.
 /// @group card
@@ -74,7 +74,7 @@ $kendo-card-header-padding-y: k-spacing(2) !default;
 $kendo-card-header-border-width: $kendo-card-border-width !default;
 /// The background color of the Card header.
 /// @group card
-$kendo-card-header-bg: k-color(surface) !default;
+$kendo-card-header-bg: transparent !default;
 /// The text color of the Card header.
 /// @group card
 $kendo-card-header-text: k-color(on-app-surface) !default;
@@ -152,12 +152,9 @@ $kendo-card-subtitle-text: k-color(subtle) !default;
 /// The maximum width of the Card image.
 /// @group card
 $kendo-card-img-max-width: 100px !default;
-/// The size of the Avatar in the Card.
-/// @group card
-$kendo-card-avatar-size: 45px !default;
 /// The spacing between the Avatar and the text in the Card.
 /// @group card
-$kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
+$kendo-card-avatar-spacing: k-spacing(2) !default;
 
 /// The horizontal padding of the Card actions.
 /// @group card
@@ -245,7 +242,6 @@ $kendo-card-theme-colors: (
     $kendo-card-subtitle-letter-spacing: $kendo-card-subtitle-letter-spacing,
     $kendo-card-subtitle-text: $kendo-card-subtitle-text,
     $kendo-card-img-max-width: $kendo-card-img-max-width,
-    $kendo-card-avatar-size: $kendo-card-avatar-size,
     $kendo-card-avatar-spacing: $kendo-card-avatar-spacing,
     $kendo-card-actions-padding-x: $kendo-card-actions-padding-x,
     $kendo-card-actions-padding-y: $kendo-card-actions-padding-y,

package/scss/checkbox/_variables.scss

@@ -59,7 +59,7 @@ $kendo-checkbox-sizes: (
 
 /// The background color of CheckBox.
 /// @group checkbox
-$kendo-checkbox-bg: k-color(app-surface) !default;
+$kendo-checkbox-bg: k-color(surface-alt) !default;
 /// The text color of CheckBox.
 /// @group checkbox
 $kendo-checkbox-text: null !default;
@@ -132,10 +132,10 @@ $kendo-checkbox-disabled-checked-border: null !default;
 
 /// The text color of the invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-text: k-color(error) !default;
+$kendo-checkbox-invalid-text: k-color(error-on-surface) !default;
 /// The border color of the invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: k-color(error) !default;
+$kendo-checkbox-invalid-border: k-color(error-on-surface) !default;
 
 
 // CheckBox indicator

package/scss/chip/_theme.scss

@@ -6,27 +6,6 @@
 
     @include kendo-chip--theme-base();
 
-    @each $name, $color in $kendo-chip-theme-colors {
-        .k-chip-outline-#{$name} {
-
-            @if ($name == "info") {
-                @include fill (
-                    $color: k-color(on-app-surface),
-                    $border: $color
-                );
-
-                &:hover,
-                &.k-hover,
-                &.k-selected {
-                    @include fill(
-                        k-color(on-app-surface),
-                        $color,
-                        $color
-                    );
-                }
-
-            }
-        }
-    }
+    
 
 }

package/scss/chip/_variables.scss

@@ -93,16 +93,16 @@ $kendo-chip-sizes: (
 
 /// The base background color of the Chip.
 /// @group chip
-$kendo-chip-base-bg: k-color(base) !default;
+$kendo-chip-base-bg: k-color(base-subtle) !default;
 
 /// The theme colors map for the Chip.
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": k-color(error),
-    "info": k-color(info),
-    "warning": k-color(warning),
-    "success": k-color(success)
+    "error": k-color(error-subtle),
+    "info": k-color(info-subtle),
+    "warning": k-color(warning-subtle),
+    "success": k-color(success-subtle)
 ) !default;
 
 /// The base background color of the solid Chip.
@@ -110,10 +110,10 @@ $kendo-chip-theme-colors: (
 $kendo-chip-solid-bg: $kendo-chip-base-bg !default;
 /// he base text color of the solid Chip.
 /// @group chip
-$kendo-chip-solid-text: $kendo-button-text !default;
+$kendo-chip-solid-text: k-color(base-on-subtle) !default;
 /// The base border color of the solid Chip.
 /// @group chip
-$kendo-chip-solid-border: $kendo-button-border !default;
+$kendo-chip-solid-border: k-color(base-emphasis) !default;
 /// The base shadow of the solid Chip.
 /// @group chip
 $kendo-chip-solid-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;

package/scss/color-preview/_variables.scss

@@ -7,9 +7,9 @@ $kendo-color-preview-border-width: 1px !default;
 $kendo-color-preview-bg: null !default;
 $kendo-color-preview-text: null !default;
 $kendo-color-preview-border: k-color(border) !default;
-$kendo-color-preview-hover-border: k-color(border) !default;
+$kendo-color-preview-hover-border: k-color(border-alt) !default;
 
-$kendo-color-preview-no-color-bg: $kendo-color-white !default;
+$kendo-color-preview-no-color-bg: k-color(surface-alt) !default;
 $kendo-color-preview-no-color-text: k-color(error) !default;
 $kendo-color-preview-no-color-border: null !default;
 

package/scss/coloreditor/_variables.scss

@@ -39,14 +39,14 @@ $kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-color-editor-text: k-color(on-app-surface) !default;
 /// The background color of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-bg: k-color(app-surface) !default;
+$kendo-color-editor-bg: k-color(surface-alt) !default;
 /// The border color of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-border: k-color(border) !default;
 
 /// The border color of the focused ColorEditor.
 /// @group color-editor
-$kendo-color-editor-focus-border: k-color(border) !default;
+$kendo-color-editor-focus-border: k-color(primary-emphasis) !default;
 /// The box shadow of the focused ColorEditor.
 /// @group color-editor
 $kendo-color-editor-focus-shadow: null !default;
@@ -137,7 +137,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: color-mix(in srgb, k-color(dark) 30%, transparent) !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

@@ -33,7 +33,7 @@ $kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-color-gradient-text: k-color(on-app-surface) !default;
 /// The background color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-bg: k-color(app-surface) !default;
+$kendo-color-gradient-bg: k-color(surface-alt) !default;
 /// The border color of the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-border: k-color(border) !default;
@@ -79,7 +79,7 @@ $kendo-color-gradient-lg-gap: k-spacing(4.5) !default;
 
 /// The border color of the focused ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-focus-border: k-color(border) !default;
+$kendo-color-gradient-focus-border: k-color(border-alt) !default;
 /// The box shadow of the focused ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-focus-shadow: none !default;
@@ -166,13 +166,13 @@ $kendo-color-gradient-draghandle-text: null !default;
 $kendo-color-gradient-draghandle-bg: transparent !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-border: rgba( $kendo-color-white, .8) !default;
+$kendo-color-gradient-draghandle-border: color-mix(in srgb, k-color(light) 80%, transparent) !default;
 /// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-black !default;
+$kendo-color-gradient-draghandle-focus-shadow: k-color(inverse) !default;
 /// The outline color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-black !default;
+$kendo-color-gradient-draghandle-hover-shadow: k-color(inverse) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group color-gradient
 $kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;

package/scss/colorpalette/_variables.scss

@@ -38,13 +38,13 @@ $kendo-color-palette-lg-tile-width: k-spacing(8) !default;
 $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 rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
+$kendo-color-palette-tile-focus-shadow: 0 0 3px 1px color-mix(in srgb, k-color(dark) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, k-color(light) 50%, transparent) !default;
 /// The shadow of the ColorPalette hovered tile.
 /// @group color-palette
-$kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
+$kendo-color-palette-tile-hover-shadow: 0 0 3px 1px color-mix(in srgb, k-color(dark) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, k-color(light) 80%, transparent) !default;
 /// The shadow of the ColorPalette selected tile.
 /// @group color-palette
-$kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
+$kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px color-mix(in srgb, k-color(dark) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, k-color(light) 100%, transparent) !default;
 
 /// The size map of the ColorPalette.
 /// @group color-palette

package/scss/column-menu/_variables.scss

@@ -13,7 +13,7 @@ $kendo-column-menu-item-lg-padding-y: k-spacing(2) !default;
 $kendo-column-menu-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-column-menu-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-column-menu-md-font-size: var( --kendo-font-size, inherit ) !default;
-$kendo-column-menu-lg-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-column-menu-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 $kendo-column-menu-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-column-menu-sm-line-height: math.div( 20, 14 ) !default;

package/scss/dataviz/_variables.scss

@@ -114,7 +114,7 @@ $kendo-chart-tooltip-padding-y: k-spacing(1) !default;
 
 $kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
 
-$kendo-chart-bg: k-color(app-surface) !default;
+$kendo-chart-bg: k-color(surface-alt) !default;
 $kendo-chart-text: k-color(on-app-surface) !default;
 $kendo-chart-border: k-color(border) !default;
 
@@ -160,7 +160,7 @@ $kendo-chart-no-data-font-weight: var( --kendo-font-weight, normal ) !default;
 $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;
 
 // Gauge
-$kendo-gauge-pointer-bg: k-color(primary) !default;
+$kendo-gauge-pointer-bg: k-color(primary-on-surface) !default;
 $kendo-gauge-track-bg: k-color(base-emphasis) !default;
 
 

package/scss/dialog/_variables.scss

@@ -29,7 +29,7 @@ $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 
 /// The background color of the Dialog.
 /// @group dialog
-$kendo-dialog-bg: k-color(app-surface) !default;
+$kendo-dialog-bg: k-color(surface-alt) !default;
 
 /// The theme colors map for the Dialog.
 /// @group dialog