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

package/scss/bottom-navigation/_variables.scss

@@ -56,14 +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(app-surface) !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,
@@ -84,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

@@ -54,13 +54,13 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-bg: $kendo-component-bg !default;
+$kendo-breadcrumb-bg: k-color(app-surface) !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
@@ -134,7 +134,7 @@ $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;
@@ -144,7 +144,7 @@ $kendo-breadcrumb-link-border: null !default;
 $kendo-breadcrumb-link-hover-bg: unset !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;
@@ -160,14 +160,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 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( $kendo-breadcrumb-text, .25 )) !default;
+$kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px color-mix(in srgb, k-color(on-app-surface) 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: $kendo-link-text !default;
+$kendo-breadcrumb-root-link-text: k-color(primary) !default;
 /// The border color of the Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
@@ -177,7 +177,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: $kendo-link-hover-text !default;
+$kendo-breadcrumb-root-link-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-border: null !default;
@@ -200,7 +200,7 @@ $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !d
 $kendo-breadcrumb-current-item-bg: null !default;
 /// The text color of the current Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-current-item-text: $kendo-color-secondary !default;
+$kendo-breadcrumb-current-item-text: k-color(secondary) !default;
 /// The border color of the current Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-current-item-border: null !default;

package/scss/button/_variables.scss

@@ -43,6 +43,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
@@ -109,17 +112,26 @@ $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 ), #e4e7eb) )
+$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 ), #e4e7eb) !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 ), k-contrast-color( $kendo-button-bg, $kendo-color-dark )) !default;
+$kendo-button-text: k-color(on-base) !default;
 /// The base border color of the Button.
 /// @group button
 $kendo-button-border: $kendo-button-bg !default;
@@ -132,13 +144,13 @@ $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-color-darken( $kendo-button-bg, 7.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;
 /// The base border color of the hovered Button.
 /// @group button
-$kendo-button-hover-border: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% )) !default;
+$kendo-button-hover-border: k-color(base-hover) !default;
 /// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: none !default;
@@ -148,13 +160,13 @@ $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-color-darken( $kendo-button-bg, 10% )) !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;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) !default;
+$kendo-button-active-border: k-color(base-active) !default;
 /// The base background gradient of the active Button.
 /// @group button
 $kendo-button-active-gradient: null !default;
@@ -164,13 +176,13 @@ $kendo-button-active-shadow: null !default;
 
 /// The base background color of the selected Button.
 /// @group button
-$kendo-button-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 10% )) !default;
+$kendo-button-selected-bg: k-color(primary-active) !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-color( $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: if($kendo-enable-color-system, k-color( primary-active ), k-color-darken( $kendo-color-primary, 12.5% )) !default;
+$kendo-button-selected-border: k-color(primary-active) !default;
 /// The background gradient of the selected Button.
 /// @group button
 $kendo-button-selected-gradient: $kendo-button-active-gradient !default;
@@ -180,19 +192,19 @@ $kendo-button-selected-shadow: $kendo-button-active-shadow !default;
 
 /// The base background of the focused Button.
 /// @group button
-$kendo-button-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 10% )) !default;
+$kendo-button-focus-bg: k-color(base-active) !default;
 /// The base text color of the focused Button.
 /// @group button
 $kendo-button-focus-text: null !default;
 /// The base border color of the focused Button.
 /// @group button
-$kendo-button-focus-border: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-button-bg, 12.5% )) !default;
+$kendo-button-focus-border: k-color(base-active) !default;
 /// The base background gradient of the focused Button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 50%, transparent), rgba( $kendo-button-border, .5 )) !default;
+$kendo-button-focus-shadow: 0 0 0 .25rem color-mix(in srgb, k-color(border) 50%, transparent) !default;
 
 /// The base background of the disabled Button.
 /// @group button
@@ -275,6 +287,7 @@ $kendo-button-transition: $kendo-transition !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

@@ -16,19 +16,22 @@ $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
 $kendo-calendar-cell-size: 38px !default;
 /// The background color of the Calendar.
 /// @group calendar
-$kendo-calendar-bg: $kendo-component-bg !default;
+$kendo-calendar-bg: k-color(app-surface) !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
@@ -42,16 +45,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;
 /// The box shadow of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-shadow: none !default;
@@ -105,7 +108,7 @@ $kendo-calendar-header-cell-line-height: var( --kendo-line-height-lg, normal ) !
 $kendo-calendar-header-cell-bg: null !default;
 /// The text color of the header cells in the Calendar.
 /// @group calendar
-$kendo-calendar-header-cell-text: if($kendo-enable-color-system, k-color( subtle ) , $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;
@@ -155,7 +158,13 @@ $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: $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
@@ -186,39 +195,39 @@ $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-subtle-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(primary) !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: $kendo-selected-hover-border !default;
+$kendo-calendar-cell-selected-hover-border: k-color(border) !default;
 /// The gradient of the selected and hovered cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-selected-hover-gradient: null !default;
@@ -228,7 +237,7 @@ $kendo-calendar-cell-selected-hover-gradient: null !default;
 $kendo-calendar-cell-focus-shadow: inset $kendo-button-focus-shadow !default;
 /// The shadow of the selected and focused cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary-active ) 50%, transparent), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) !default;
+$kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(primary-active) 50%, transparent) !default;
 
 
 /// The width of the Calendar navigation.
@@ -247,11 +256,16 @@ $kendo-calendar-navigation-text: $kendo-calendar-header-text !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: $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
@@ -359,6 +373,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,
@@ -401,6 +416,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,
@@ -429,6 +446,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(app-surface) !default;
 /// The text color of the Captcha.
 /// @group captcha
-$kendo-captcha-text: $kendo-component-bg !default;
+$kendo-captcha-text: k-color(app-surface) !default;
 /// The border color of the Captcha.
 /// @group captcha
-$kendo-captcha-border: $kendo-component-bg !default;
+$kendo-captcha-border: k-color(app-surface) !default;
 
 /// The gap of the Captcha image wrapper.
 /// @group captcha

package/scss/card/_variables.scss

@@ -36,13 +36,13 @@ $kendo-card-deck-gap: k-spacing(4) !default;
 
 /// The background color of the Card.
 /// @group card
-$kendo-card-bg: $kendo-component-bg !default;
+$kendo-card-bg: k-color(app-surface) !default;
 /// The text color of the Card.
 /// @group card
-$kendo-card-text: $kendo-component-text !default;
+$kendo-card-text: k-color(on-app-surface) !default;
 /// The border color of the Card.
 /// @group card
-$kendo-card-border: $kendo-component-border !default;
+$kendo-card-border: k-color(border) !default;
 /// The shadow of the Card.
 /// @group card
 $kendo-card-shadow: null !default;
@@ -74,10 +74,10 @@ $kendo-card-header-padding-y: $kendo-card-padding-y !default;
 $kendo-card-header-border-width: $kendo-card-border-width !default;
 /// The background color of the Card header.
 /// @group card
-$kendo-card-header-bg: $kendo-component-header-bg !default;
+$kendo-card-header-bg: k-color(surface) !default;
 /// The text color of the Card header.
 /// @group card
-$kendo-card-header-text: $kendo-component-header-text !default;
+$kendo-card-header-text: k-color(on-app-surface) !default;
 /// The border color of the Card header.
 /// @group card
 $kendo-card-header-border: $kendo-card-border !default;
@@ -147,7 +147,7 @@ $kendo-card-subtitle-font-weight: $kendo-card-title-font-weight !default;
 $kendo-card-subtitle-letter-spacing: null !default;
 /// The text color of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+$kendo-card-subtitle-text: k-color(subtle) !default;
 
 /// The maximum width of the Card image.
 /// @group card
@@ -186,6 +186,18 @@ $kendo-card-callout-width: 1.3em !default;
 /// @group card
 $kendo-card-callout-height: 1.3em !default;
 
+$kendo-card-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/card/_variables.scss" with (
     $kendo-card-padding-x: $kendo-card-padding-x,
@@ -242,5 +254,6 @@ $kendo-card-callout-height: 1.3em !default;
     $kendo-card-deck-scroll-button-radius: $kendo-card-deck-scroll-button-radius,
     $kendo-card-deck-scroll-button-offset: $kendo-card-deck-scroll-button-offset,
     $kendo-card-callout-width: $kendo-card-callout-width,
-    $kendo-card-callout-height: $kendo-card-callout-height
+    $kendo-card-callout-height: $kendo-card-callout-height,
+    $kendo-card-theme-colors: $kendo-card-theme-colors
 );

package/scss/chart-wizard/_variables.scss

@@ -5,10 +5,10 @@
 
 /// The color of the area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+$kendo-chart-wizard-icon-area-color: k-color(primary) !default;
 /// The background color of the area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% )) !default;
+$kendo-chart-wizard-icon-area-bg: k-color(primary-subtle) !default;
 /// The border radius of the area around the chart type icon.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-area-border-radius: k-border-radius(sm) !default;
@@ -17,14 +17,14 @@ $kendo-chart-wizard-icon-area-border-radius: k-border-radius(sm) !default;
 $kendo-chart-wizard-icon-area-padding: k-spacing(4) !default;
 /// The box shadow of the focused area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% )) !default;
+$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px k-color(primary-emphasis) !default;
 /// The box shadow of the selected area around the chart type icon.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default;
 
 /// The color of the selected chart type items in the Property panel.
 /// @group chart-wizard
-$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+$kendo-chart-wizard-chart-type-selected-color: k-color(primary) !default;
 
 /// The padding of the preview pane.
 /// @group chart-wizard

package/scss/chat/_variables.scss

@@ -58,7 +58,7 @@ $kendo-chat-timestamp-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-chat-timestamp-transform: uppercase !default;
 /// The text color of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+$kendo-chat-timestamp-text: k-color(subtle) !default;
 /// The background color of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-bg: null !default;
@@ -139,13 +139,13 @@ $kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
 
 /// The background color of the Chat.
 /// @group chat
-$kendo-chat-bg: $kendo-app-bg !default;
+$kendo-chat-bg: k-color(surface) !default;
 /// The text color of the Chat.
 /// @group chat
-$kendo-chat-text: $kendo-app-text !default;
+$kendo-chat-text: k-color(on-app-surface) !default;
 /// The border color of the Chat.
 /// @group chat
-$kendo-chat-border: $kendo-app-border !default;
+$kendo-chat-border: k-color(border) !default;
 
 /// The background color of the Chat bubble.
 /// @group chat
@@ -168,10 +168,10 @@ $kendo-chat-bubble-selected-shadow: none !default;
 
 /// The background color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
+$kendo-chat-alt-bubble-bg: k-color(primary) !default;
 /// The text color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) !default;
+$kendo-chat-alt-bubble-text: k-color(on-primary) !default;
 /// The border color of the Chat alt bubble.
 /// @group chat
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
@@ -190,20 +190,20 @@ $kendo-chat-alt-bubble-selected-shadow: none !default;
 $kendo-chat-quick-reply-bg: transparent !default;
 /// The text color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-text: $kendo-color-primary !default;
+$kendo-chat-quick-reply-text: k-color(primary) !default;
 /// The border color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-border: k-color(primary) !default;
 
 /// The background color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-bg: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-bg: k-color(primary) !default;
 /// The text color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default;
+$kendo-chat-quick-reply-hover-text: k-color(on-primary) !default;
 /// The border color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-border: k-color(primary) !default;
 
 /// The shadow blur of the focused Chat quick reply.
 /// @group chat

package/scss/checkbox/_variables.scss

@@ -59,13 +59,13 @@ $kendo-checkbox-sizes: (
 
 /// The background color of CheckBox.
 /// @group checkbox
-$kendo-checkbox-bg: $kendo-component-bg !default;
+$kendo-checkbox-bg: k-color(app-surface) !default;
 /// The text color of CheckBox.
 /// @group checkbox
 $kendo-checkbox-text: null !default;
 /// The border color of CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), #ced4da, #6c757d )) !default;
+$kendo-checkbox-border: k-color(border-alt) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -79,10 +79,10 @@ $kendo-checkbox-hover-border: null !default;
 
 /// The background color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: $kendo-color-primary !default;
+$kendo-checkbox-checked-bg: k-color(primary) !default;
 /// The color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) !default;
+$kendo-checkbox-checked-text: k-color(on-primary) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -99,10 +99,10 @@ $kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 
 /// The border color of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% )) !default;
+$kendo-checkbox-focus-border: k-color(primary-emphasis) !default;
 /// The box shadow of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
+$kendo-checkbox-focus-shadow: 0 0 0 .25rem color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 /// The border color of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;
@@ -135,10 +135,10 @@ $kendo-checkbox-disabled-checked-border: null !default;
 $kendo-checkbox-invalid-bg: null !default;
 /// The text color of the invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
+$kendo-checkbox-invalid-text: k-color(error) !default;
 /// The border color of the invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: $kendo-invalid-border !default;
+$kendo-checkbox-invalid-border: k-color(error) !default;
 
 
 // CheckBox indicator