@progress/kendo-theme-default 10.6.0 → 11.0.0-dev.1

package/scss/action-sheet/_variables.scss

@@ -16,9 +16,9 @@ $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: $kendo-component-bg !default;
-$kendo-actionsheet-text: $kendo-component-text !default;
-$kendo-actionsheet-border: $kendo-component-border !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;
 
 
@@ -33,19 +33,19 @@ $kendo-actionsheet-titlebar-gap: k-spacing(4) !default;
 
 $kendo-actionsheet-titlebar-bg: null !default;
 $kendo-actionsheet-titlebar-text: null !default;
-$kendo-actionsheet-titlebar-border: $kendo-component-border !default;
+$kendo-actionsheet-titlebar-border: k-color(border) !default;
 $kendo-actionsheet-titlebar-gradient: null !default;
 $kendo-actionsheet-titlebar-shadow: null !default;
 
 $kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, normal ) !default;
-$kendo-actionsheet-subtitle-text: $kendo-subtle-text !default;
+$kendo-actionsheet-subtitle-text: k-color(subtle) !default;
 
 $kendo-actionsheet-footer-border-width: 1px !default;
 
 $kendo-actionsheet-footer-bg: null !default;
 $kendo-actionsheet-footer-text: null !default;
-$kendo-actionsheet-footer-border: $kendo-component-border !default;
+$kendo-actionsheet-footer-border: k-color(border) !default;
 $kendo-actionsheet-footer-gradient: null !default;
 $kendo-actionsheet-footer-shadow: null !default;
 
@@ -60,9 +60,9 @@ $kendo-actionsheet-item-title-font-weight: null !default;
 $kendo-actionsheet-item-title-text-transform: null !default;
 
 $kendo-actionsheet-item-description-font-size: .875em !default;
-$kendo-actionsheet-item-description-text: $kendo-subtle-text !default;
-
-$kendo-actionsheet-item-hover-bg: $kendo-hover-bg !default;
+$kendo-actionsheet-item-description-text: k-color(subtle) !default;
+$kendo-actionsheet-item-description-line-height: null !default;
+$kendo-actionsheet-item-hover-bg: k-color(base-hover) !default;
 $kendo-actionsheet-item-hover-text: null !default;
 $kendo-actionsheet-item-hover-border: null !default;
 $kendo-actionsheet-item-hover-gradient: null !default;
@@ -86,8 +86,10 @@ $kendo-actionsheet-item-disabled-opacity: null !default;
 
 // Adaptive Actionsheet
 $kendo-adaptive-actionsheet-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-adaptive-actionsheet-line-height: var( --kendo-line-height, inherit ) !default;
 $kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(4) !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default;
+$kendo-adaptive-actionsheet-titlebar-border: k-color(border) !default;
 
 $kendo-adaptive-actionsheet-content-padding-y: k-spacing(2) !default;
 $kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default;
@@ -140,6 +142,7 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
     $kendo-actionsheet-item-title-font-weight: $kendo-actionsheet-item-title-font-weight,
     $kendo-actionsheet-item-title-text-transform: $kendo-actionsheet-item-title-text-transform,
     $kendo-actionsheet-item-description-font-size: $kendo-actionsheet-item-description-font-size,
+    $kendo-actionsheet-item-description-line-height: $kendo-actionsheet-item-description-line-height,
     $kendo-actionsheet-item-description-text: $kendo-actionsheet-item-description-text,
     $kendo-actionsheet-item-hover-bg: $kendo-actionsheet-item-hover-bg,
     $kendo-actionsheet-item-hover-text: $kendo-actionsheet-item-hover-text,
@@ -160,6 +163,7 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
     $kendo-actionsheet-item-focus-background: $kendo-actionsheet-item-focus-background,
     $kendo-actionsheet-item-disabled-opacity: $kendo-actionsheet-item-disabled-opacity,
     $kendo-adaptive-actionsheet-font-size: $kendo-adaptive-actionsheet-font-size,
+    $kendo-adaptive-actionsheet-line-height: $kendo-adaptive-actionsheet-line-height,
     $kendo-adaptive-actionsheet-titlebar-padding-y: $kendo-adaptive-actionsheet-titlebar-padding-y,
     $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-x,
     $kendo-adaptive-actionsheet-content-padding-y: $kendo-adaptive-actionsheet-content-padding-y,

package/scss/adaptive/_variables.scss

@@ -2,20 +2,20 @@
 @use "../core/functions/index.import.scss" as *;
 
 // Adaptive
-$kendo-adaptive-bg: $kendo-component-bg !default;
-$kendo-adaptive-text: $kendo-component-text !default;
-$kendo-adaptive-border: $kendo-component-border !default;
+$kendo-adaptive-bg: k-color(surface-alt) !default;
+$kendo-adaptive-text: k-color(on-app-surface) !default;
+$kendo-adaptive-border: k-color(border) !default;
 
-$kendo-adaptive-content-bg: $kendo-app-bg !default;
-$kendo-adaptive-content-text: $kendo-app-text !default;
+$kendo-adaptive-content-bg: k-color(surface) !default;
+$kendo-adaptive-content-text: k-color(on-app-surface) !default;
 
-$kendo-adaptive-menu-bg: $kendo-color-primary !default;
-$kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-adaptive-menu-bg )) !default;
+$kendo-adaptive-menu-bg: k-color(primary) !default;
+$kendo-adaptive-menu-text: k-color(on-primary) !default;
 
-$kendo-adaptive-menu-clear-text: $kendo-color-primary !default;
+$kendo-adaptive-menu-clear-text: k-color(primary) !default;
 
-$kendo-adaptive-menu-item-border: $kendo-component-border !default;
-$kendo-adaptive-menu-title-text: $kendo-component-text !default;
+$kendo-adaptive-menu-item-border: k-color(border) !default;
+$kendo-adaptive-menu-title-text: k-color(on-app-surface) !default;
 
 $kendo-adaptive-border-width: 1px !default;
 $kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
@@ -24,13 +24,13 @@ $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid
-$kendo-adaptive-grid-sort-text: $kendo-color-primary !default;
+$kendo-adaptive-grid-sort-text: k-color(primary) !default;
 
 
 // Adaptive Scheduler
-$kendo-adaptive-scheduler-current-text: $kendo-color-primary !default;
+$kendo-adaptive-scheduler-current-text: k-color(primary) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
-$kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
+$kendo-adaptive-scheduler-subtle-text: k-color(subtle) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with (
     $kendo-adaptive-bg: $kendo-adaptive-bg,

package/scss/appbar/_variables.scss

@@ -37,17 +37,17 @@ $kendo-appbar-gap: k-spacing(2) !default;
 
 /// The background color of the AppBar based on light theme color.
 /// @group appbar
-$kendo-appbar-light-bg: $kendo-color-light !default;
+$kendo-appbar-light-bg: k-color(light) !default;
 /// The text color of the AppBar based on light theme color.
 /// @group appbar
-$kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-legacy( $kendo-color-light )) !default;
+$kendo-appbar-light-text: k-color(on-light) !default;
 
 /// The background color of the AppBar based on dark theme color.
 /// @group appbar
-$kendo-appbar-dark-bg: $kendo-color-dark !default;
+$kendo-appbar-dark-bg: k-color(dark) !default;
 /// The text color of the AppBar based on dark theme color.
 /// @group appbar
-$kendo-appbar-dark-text: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-legacy( $kendo-color-dark )) !default;
+$kendo-appbar-dark-text: k-color(on-dark) !default;
 
 /// The box shadow of the AppBar.
 /// @group appbar
@@ -56,6 +56,19 @@ $kendo-appbar-box-shadow: k-elevation(4) !default;
 /// @group appbar
 $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;
 
+$kendo-appbar-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with (
     $kendo-appbar-margin-x: $kendo-appbar-margin-x,
     $kendo-appbar-margin-y: $kendo-appbar-margin-y,
@@ -72,5 +85,6 @@ $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;
     $kendo-appbar-dark-bg: $kendo-appbar-dark-bg,
     $kendo-appbar-dark-text: $kendo-appbar-dark-text,
     $kendo-appbar-box-shadow: $kendo-appbar-box-shadow,
-    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow
+    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow,
+    $kendo-appbar-theme-colors: $kendo-appbar-theme-colors
 );

package/scss/avatar/_variables.scss

@@ -25,7 +25,18 @@ $kendo-avatar-sizes: (
 
 /// The theme colors map of the Avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $kendo-theme-colors !default;
+$kendo-avatar-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with (
     $kendo-avatar-border-width: $kendo-avatar-border-width,

package/scss/badge/_variables.scss

@@ -102,6 +102,19 @@ $kendo-badge-sizes: (
     )
 ) !default;
 
+$kendo-badge-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with (
     $kendo-badge-border-width: $kendo-badge-border-width,
     $kendo-badge-border-radius: $kendo-badge-border-radius,
@@ -125,5 +138,6 @@ $kendo-badge-sizes: (
     $kendo-badge-sm-min-width: $kendo-badge-sm-min-width,
     $kendo-badge-md-min-width: $kendo-badge-md-min-width,
     $kendo-badge-lg-min-width: $kendo-badge-lg-min-width,
-    $kendo-badge-sizes: $kendo-badge-sizes
+    $kendo-badge-sizes: $kendo-badge-sizes,
+    $kendo-badge-theme-colors: $kendo-badge-theme-colors
 );

package/scss/bottom-navigation/_variables.scss

@@ -56,13 +56,26 @@ $kendo-bottom-nav-shadow: k-elevation(4) !default;
 
 /// The text color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-text: $kendo-component-text !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: $kendo-component-bg !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: $kendo-component-border !default;
+$kendo-bottom-nav-flat-border: k-color(border) !default;
+
+$kendo-bottom-navigation-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with (
     $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x,
@@ -83,5 +96,6 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
     $kendo-bottom-nav-shadow: $kendo-bottom-nav-shadow,
     $kendo-bottom-nav-flat-text: $kendo-bottom-nav-flat-text,
     $kendo-bottom-nav-flat-bg: $kendo-bottom-nav-flat-bg,
-    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border
+    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border,
+    $kendo-bottom-navigation-theme-colors: $kendo-bottom-navigation-theme-colors
 );

package/scss/breadcrumb/_variables.scss

@@ -52,13 +52,13 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height-lg, normal ) !default
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-bg: $kendo-component-bg !default;
+$kendo-breadcrumb-bg: k-color(surface-alt) !default;
 /// The base text color of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-text: $kendo-component-text !default;
+$kendo-breadcrumb-text: k-color(on-app-surface) !default;
 /// The base border color of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-border: $kendo-component-border !default;
+$kendo-breadcrumb-border: k-color(border) !default;
 
 /// The box shadow of the focused Breadcrumb.
 /// @group breadcrumb
@@ -132,17 +132,17 @@ $kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 $kendo-breadcrumb-link-bg: null !default;
 /// The text color of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-text: $kendo-link-text !default;
+$kendo-breadcrumb-link-text: k-color(primary) !default;
 /// The border color of the Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
 /// The background color of the hovered Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default;
+$kendo-breadcrumb-link-hover-bg: k-color(surface) !default;
 /// The text color of the hovered Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default;
+$kendo-breadcrumb-link-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
@@ -152,7 +152,7 @@ $kendo-breadcrumb-link-hover-border: null !default;
 $kendo-breadcrumb-link-focus-bg: null !default;
 /// The text color of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-text: $kendo-link-text !default;
+$kendo-breadcrumb-link-focus-text: k-color(primary) !default;
 /// The border color of the focused Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
@@ -172,7 +172,7 @@ $kendo-breadcrumb-root-link-border: null !default;
 
 /// The background color of the hovered Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default;
+$kendo-breadcrumb-root-link-hover-bg: k-color(surface) !default;
 /// The text color of the hovered Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;

package/scss/button/_variables.scss

@@ -41,6 +41,9 @@ $kendo-button-lg-padding-y: k-spacing(2) !default;
 /// The font family of the Button.
 /// @group button
 $kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font weight of the Button.
+/// @group button
+$kendo-button-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
 /// The font size of the Button.
 /// @group button
@@ -107,30 +110,39 @@ $kendo-button-sizes: (
 
 /// The theme colors map for the Button.
 /// @group button
-$kendo-button-theme-colors: map.merge(
-    $kendo-theme-colors,
-    ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) )
+$kendo-button-theme-colors: (
+    "base": k-color(base),
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
 ) !default;
 
 /// The base background of the Button.
 /// @group button
-$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), #f5f5f5) !default;
+$kendo-button-bg: k-color(base) !default;
 /// The base text color of the Button.
 /// @group button
-$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), #424242) !default;
+$kendo-button-text: k-color(on-base) !default;
 /// The base border color of the Button.
 /// @group button
-$kendo-button-border: if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) !default;
+$kendo-button-border: k-color(border) !default;
 /// The base background gradient of the Button.
 /// @group button
-$kendo-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default;
+$kendo-button-gradient: null !default;
 /// The base shadow of the Button.
 /// @group button
 $kendo-button-shadow: null !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) !default;
+$kendo-button-hover-bg: k-color(base-hover) !default;
 /// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
@@ -146,7 +158,7 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of the active Button.
 /// @group button
-$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) !default;
+$kendo-button-active-bg: k-color(base-active) !default;
 /// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
@@ -162,10 +174,10 @@ $kendo-button-active-shadow: null !default;
 
 /// The base background color of the selected Button.
 /// @group button
-$kendo-button-selected-bg: $kendo-color-primary !default;
+$kendo-button-selected-bg: k-color(primary) !default;
 /// The text color of the selected Button.
 /// @group button
-$kendo-button-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) !default;
+$kendo-button-selected-text: k-color(on-primary) !default;
 /// The border color of the selected Button.
 /// @group button
 $kendo-button-selected-border: $kendo-button-selected-bg !default;
@@ -190,7 +202,7 @@ $kendo-button-focus-border: null !default;
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-border, .08 )) !default;
+$kendo-button-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
 /// The base background of the disabled Button.
 /// @group button
@@ -209,7 +221,7 @@ $kendo-button-disabled-gradient: null !default;
 $kendo-button-disabled-shadow: null !default;
 
 // Solid Button
-$kendo-solid-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default;
+$kendo-solid-button-gradient: null !default;
 $kendo-solid-button-shade-function: "k-try-shade" !default;
 $kendo-solid-button-shade-text-amount: 0 !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
@@ -272,6 +284,7 @@ $kendo-button-transition: color .2s ease-in-out !default;
     $kendo-button-md-padding-y: $kendo-button-md-padding-y,
     $kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
     $kendo-button-font-family: $kendo-button-font-family,
+    $kendo-button-font-weight: $kendo-button-font-weight,
     $kendo-button-font-size: $kendo-button-font-size,
     $kendo-button-sm-font-size: $kendo-button-sm-font-size,
     $kendo-button-md-font-size: $kendo-button-md-font-size,

package/scss/calendar/_variables.scss

@@ -15,6 +15,9 @@ $kendo-calendar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Calendar.
 /// @group calendar
 $kendo-calendar-line-height: var( --kendo-line-height, normal ) !default;
+/// The border-radius of the Calendar.
+/// @group calendar
+$kendo-calendar-border-radius: 0 !default;
 
 /// The size of the cells in the Calendar.
 /// @group calendar
@@ -22,13 +25,13 @@ $kendo-calendar-cell-size: 32px !default;
 
 /// The background color of the Calendar.
 /// @group calendar
-$kendo-calendar-bg: $kendo-component-bg !default;
+$kendo-calendar-bg: k-color(surface-alt) !default;
 /// The text color of the Calendar.
 /// @group calendar
-$kendo-calendar-text: $kendo-component-text !default;
+$kendo-calendar-text: k-color(on-app-surface) !default;
 /// The border color of the Calendar.
 /// @group calendar
-$kendo-calendar-border: $kendo-component-border !default;
+$kendo-calendar-border: k-color(border) !default;
 
 /// The horizontal padding of the header in the Calendar.
 /// @group calendar
@@ -43,16 +46,16 @@ $kendo-calendar-header-border-width: 1px !default;
 
 /// The background color of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-bg: $kendo-component-header-bg !default;
+$kendo-calendar-header-bg: k-color(surface)!default;
 /// The text color of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-text: $kendo-component-header-text !default;
+$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: $kendo-component-header-border !default;
+$kendo-calendar-header-border: k-color(border) !default;
 /// The gradient of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-gradient: $kendo-component-header-gradient !default;
+$kendo-calendar-header-gradient: null !default;
 // TODO: variable is used, but the selector using it is not! Potentially remove;
 /// The shadow of the header in the Calendar.
 /// @group calendar
@@ -108,7 +111,7 @@ $kendo-calendar-header-cell-line-height: 2 !default;
 $kendo-calendar-header-cell-bg: null !default;
 /// The text color of the header cells in the Calendar.
 /// @group calendar
-$kendo-calendar-header-cell-text: $kendo-subtle-text !default;
+$kendo-calendar-header-cell-text: k-color(subtle) !default;
 /// The opacity of the header cells in the Calendar.
 /// @group calendar
 $kendo-calendar-header-cell-opacity: null !default;
@@ -159,7 +162,13 @@ $kendo-calendar-weekend-text: null !default;
 $kendo-calendar-today-style: color !default;
 /// The color of the current day in the Calendar.
 /// @group calendar
-$kendo-calendar-today-color: $kendo-color-primary !default;
+$kendo-calendar-today-color: k-color(primary) !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;
+/// The box shadow of the current day in the Calendar.
+/// @group calendar
+$kendo-calendar-today-box-shadow: null !default;
 
 /// The background color of the week number cells in the Calendar.
 /// @group calendar
@@ -190,36 +199,36 @@ $kendo-calendar-cell-gradient: null !default;
 
 /// The background color of the hovered cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-hover-bg: $kendo-hover-bg !default;
+$kendo-calendar-cell-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-hover-text: $kendo-hover-text !default;
+$kendo-calendar-cell-hover-text: k-color(on-app-surface) !default;
 /// The border color of the hovered cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-hover-border: $kendo-hover-border !default;
+$kendo-calendar-cell-hover-border: k-color(border) !default;
 /// The gradient of the hovered cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-hover-gradient: null !default;
 
 /// The background color of the selected cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-selected-bg: $kendo-selected-bg !default;
+$kendo-calendar-cell-selected-bg: k-color(primary) !default;
 /// The text color of the selected cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-selected-text: $kendo-selected-text !default;
+$kendo-calendar-cell-selected-text: k-color(on-primary) !default;
 /// The border color of the selected cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-selected-border: $kendo-selected-border !default;
+$kendo-calendar-cell-selected-border: k-color(border) !default;
 /// The gradient of the selected cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-selected-gradient: null !default;
 
 /// The background color of the selected and hovered cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-selected-hover-bg: $kendo-selected-hover-bg !default;
+$kendo-calendar-cell-selected-hover-bg: k-color(primary-hover) !default;
 /// The text color of the selected and hovered cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-selected-hover-text: $kendo-selected-hover-text !default;
+$kendo-calendar-cell-selected-hover-text: k-color(on-primary) !default;
 /// The border color of the selected and hovered cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-selected-hover-border: null !default;
@@ -254,7 +263,14 @@ $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: $kendo-link-hover-text !default;
+$kendo-calendar-navigation-hover-text: k-color(primary-hover) !default;
+/// The text color of the marker in the Calendar navigation.
+/// @group calendar
+$kendo-calendar-navigation-marker-text: currentColor !default;
+
+/// The background color of the Calendar range selection.
+/// @group calendar
+$kendo-calendar-range-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 
 /// The horizontal padding of the header in the Infinite Calendar.
 /// @group calendar
@@ -362,6 +378,7 @@ $kendo-calendar-sizes: (
     $kendo-calendar-font-family: $kendo-calendar-font-family,
     $kendo-calendar-font-size: $kendo-calendar-font-size,
     $kendo-calendar-line-height: $kendo-calendar-line-height,
+    $kendo-calendar-border-radius: $kendo-calendar-border-radius,
     $kendo-calendar-cell-size: $kendo-calendar-cell-size,
     $kendo-calendar-bg: $kendo-calendar-bg,
     $kendo-calendar-text: $kendo-calendar-text,
@@ -404,6 +421,8 @@ $kendo-calendar-sizes: (
     $kendo-calendar-weekend-text: $kendo-calendar-weekend-text,
     $kendo-calendar-today-style: $kendo-calendar-today-style,
     $kendo-calendar-today-color: $kendo-calendar-today-color,
+    $kendo-calendar-today-font-weight: $kendo-calendar-today-font-weight,
+    $kendo-calendar-today-box-shadow: $kendo-calendar-today-box-shadow,
     $kendo-calendar-week-number-bg: $kendo-calendar-week-number-bg,
     $kendo-calendar-week-number-text: $kendo-calendar-week-number-text,
     $kendo-calendar-other-month-bg: $kendo-calendar-other-month-bg,
@@ -432,6 +451,8 @@ $kendo-calendar-sizes: (
     $kendo-calendar-navigation-text: $kendo-calendar-navigation-text,
     $kendo-calendar-navigation-border: $kendo-calendar-navigation-border,
     $kendo-calendar-navigation-hover-text: $kendo-calendar-navigation-hover-text,
+    $kendo-calendar-navigation-marker-text: $kendo-calendar-navigation-marker-text,
+    $kendo-calendar-range-bg: $kendo-calendar-range-bg,
     $kendo-infinite-calendar-header-padding-x: $kendo-infinite-calendar-header-padding-x,
     $kendo-infinite-calendar-header-padding-y: $kendo-infinite-calendar-header-padding-y,
     $kendo-infinite-calendar-view-padding-x: $kendo-infinite-calendar-view-padding-x,

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: $kendo-component-bg !default;
+$kendo-captcha-bg: k-color(surface-alt) !default;
 /// The text color of the Captcha.
 /// @group captcha
-$kendo-captcha-text: $kendo-component-bg !default;
+$kendo-captcha-text: k-color(surface-alt) !default;
 /// The border color of the Captcha.
 /// @group captcha
-$kendo-captcha-border: $kendo-component-bg !default;
+$kendo-captcha-border: k-color(surface-alt) !default;
 
 /// The gap of the Captcha image wrapper.
 /// @group captcha