@progress/kendo-theme-material 10.6.0-dev.6 → 11.0.0-dev.0

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;
 /// TThe 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-color( $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-color( $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

@@ -26,7 +26,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/_theme.scss

@@ -7,11 +7,11 @@
     @include kendo-bottom-navigation--theme-base();
 
     // Flat
-    @each $name, $color in $kendo-theme-colors {
+    @each $name, $color in $kendo-bottom-navigation-theme-colors {
         .k-bottom-nav-flat-#{$name} {
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
-                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) );
+                @include fill( $bg: color-mix(in srgb, k-color( on-app-surface ) 6%, transparent));
             }
         }
     }

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

@@ -53,13 +53,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(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
@@ -134,27 +134,27 @@ $kendo-breadcrumb-link-initial-text: inherit !default;
 $kendo-breadcrumb-link-bg: null !default;
 /// The text color of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-text: $kendo-color-primary !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-hover-bg !default;
+$kendo-breadcrumb-link-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-text: $kendo-color-primary !default;
+$kendo-breadcrumb-link-hover-text: k-color(primary) !default;
 /// The border color of the hovered Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
 /// The background color of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-bg: if($kendo-enable-color-system, k-color( base-active ), map.get( $theme, focus-bg )) !default;
+$kendo-breadcrumb-link-focus-bg: k-color(base-active) !default;
 /// The text color of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-text: $kendo-color-primary !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;
@@ -174,7 +174,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-hover-bg !default;
+$kendo-breadcrumb-root-link-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
@@ -184,7 +184,7 @@ $kendo-breadcrumb-root-link-hover-border: null !default;
 
 /// The background color of the focused Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-focus-bg: if($kendo-enable-color-system, k-color( base-active ), map.get( $theme, focus-bg )) !default;
+$kendo-breadcrumb-root-link-focus-bg: k-color(base-active) !default;
 /// The text color of the focused Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;

package/scss/button/_layout.scss

@@ -32,9 +32,7 @@
     // Solid button
     .k-button-solid {
         &::before {
-            @if($kendo-enable-color-system) {
-                display: none;
-            }
+            display: none;
         }
     }
 

package/scss/button/_theme.scss

@@ -12,12 +12,6 @@
         .k-button-solid-#{$name} {
             @include box-shadow( $kendo-button-shadow );
 
-            // These 3 lines can be deleted once we
-            // stop supporting the old color system.
-            color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color )) );
-            background-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
-            border-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
-
             // Hover state
             &:hover,
             &.k-hover {
@@ -27,8 +21,8 @@
             // Focus state
             &:focus,
             &.k-focus {
-                background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), null);
-                border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), null);
+                background-color: k-color(#{$name}-hover);
+                border-color: k-color(#{$name}-hover);
                 @include box-shadow( $kendo-button-focus-shadow );
             }
 
@@ -55,14 +49,7 @@
     // Outline button
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-outline-#{$name} {
-
-            // The "base" case can be deleted once we
-            // stop supporting the old color system.
-            @if $name == "base" {
-                color: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-button-text)
-            } @else {
-                color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
-            }
+            color: k-color(#{$name}-on-surface);
 
             &:hover,
             &.k-hover,
@@ -71,13 +58,7 @@
             &:active,
             &.k-active,
             &.k-selected {
-                // The "base" case can be deleted once we
-                // stop supporting the old color system.
-                @if $name == "base" {
-                    color: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-button-text)
-                } @else {
-                    color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
-                }
+                color: k-color(#{$name}-on-surface);
             }
 
             // Disabled state

package/scss/button/_variables.scss

@@ -108,17 +108,26 @@ $kendo-button-sizes: (
 
 /// The theme colors map for the Button.
 /// @group button
-$kendo-button-theme-colors: map.merge(
-    $kendo-theme-colors,
-    ( "base": $kendo-base-bg )
+$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 ), $kendo-base-bg) !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 ), $kendo-base-text) !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;
@@ -131,13 +140,13 @@ $kendo-button-shadow: k-elevation(2) !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !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 ), null) !default;
+$kendo-button-hover-border: k-color(base-hover) !default;
 /// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
@@ -147,13 +156,13 @@ $kendo-button-hover-shadow: $kendo-button-shadow !default;
 
 /// The base background color of the active Button.
 /// @group button
-$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), $kendo-base-bg) !default;
+$kendo-button-active-bg: k-color(base-active) !default;
 /// The base text color of the active Button.
 /// @group button
-$kendo-button-active-text: if($kendo-enable-color-system, k-color( on-base ), $kendo-base-text) !default;
+$kendo-button-active-text: k-color(on-base) !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: if($kendo-enable-color-system, k-color( base-active ), null) !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;
@@ -179,13 +188,13 @@ $kendo-button-selected-shadow: $kendo-button-shadow !default;
 
 /// The base background of the focused Button.
 /// @group button
-$kendo-button-focus-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
+$kendo-button-focus-bg: k-color(base-hover) !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-hover ), null) !default;
+$kendo-button-focus-border: k-color(base-hover) !default;
 /// The base background gradient of focused Button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
@@ -195,13 +204,13 @@ $kendo-button-focus-shadow: k-elevation(3) !default;
 
 /// The base background color of the disabled Button.
 /// @group button
-$kendo-button-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-try-shade( $kendo-body-bg, 12% )) !default;
+$kendo-button-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 9%, transparent) !default;
 /// The base text color of the disabled Button.
 /// @group button
-$kendo-button-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), $kendo-disabled-text) !default;
+$kendo-button-disabled-text: color-mix(in srgb, k-color(on-app-surface) 32%, transparent) !default;
 /// The base border color of the disabled Button.
 /// @group button
-$kendo-button-disabled-border: if($kendo-enable-color-system, transparent, $kendo-button-disabled-bg) !default;
+$kendo-button-disabled-border: transparent !default;
 /// The base background gradient of the disabled Button.
 /// @group button
 $kendo-button-disabled-gradient: null !default;

package/scss/calendar/_theme.scss

@@ -21,7 +21,7 @@
         .k-selected.k-focus .k-link {
             @include fill(
                 $kendo-calendar-cell-selected-text,
-                if($kendo-enable-color-system, $kendo-calendar-cell-selected-bg, k-try-tint($kendo-calendar-cell-selected-bg)),
+                $kendo-calendar-cell-selected-bg,
                 $kendo-calendar-cell-selected-border
             );
         }

package/scss/calendar/_variables.scss

@@ -25,13 +25,13 @@ $kendo-calendar-cell-size: 36px !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
@@ -48,10 +48,10 @@ $kendo-calendar-header-border-width: 0px !default;
 $kendo-calendar-header-bg: unset !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: none !default;
@@ -109,7 +109,7 @@ $kendo-calendar-header-cell-line-height: var( --kendo-line-height, normal ) !def
 $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
@@ -161,7 +161,7 @@ $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 background color of the week number cells in the Calendar.
 /// @group calendar
@@ -192,23 +192,23 @@ $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-color-primary !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: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-calendar-cell-selected-bg )) !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-calendar-cell-selected-bg !default;
@@ -218,7 +218,7 @@ $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: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-calendar-cell-selected-bg, .5 )) !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-calendar-cell-selected-text !default;
@@ -246,7 +246,7 @@ $kendo-calendar-navigation-item-height: 2em !default;
 
 /// The background color of the Calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-bg: if($kendo-enable-color-system, k-color( surface ), k-true-mix( $kendo-calendar-text, $kendo-calendar-bg, 3)) !default;
+$kendo-calendar-navigation-bg: k-color(surface) !default;
 /// The text color of the Calendar navigation.
 /// @group calendar
 $kendo-calendar-navigation-text: $kendo-calendar-text !default;
@@ -255,7 +255,7 @@ $kendo-calendar-navigation-text: $kendo-calendar-text !default;
 $kendo-calendar-navigation-border: $kendo-calendar-border !default;
 
 /// The background color of the hovered items in the Calendar navigation.
-$kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;
+$kendo-calendar-navigation-hover-text: k-color(secondary-hover) !default;
 
 
 /// The horizontal padding of the header in the Infinite Calendar.

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

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(surface-alt) !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: k-elevation(1) !default;
@@ -54,7 +54,7 @@ $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-component-border !default;
+$kendo-card-focus-border: k-color(border) !default;
 
 // TODO: double-check: the default theme is not supposed to elevate the Card on focus
 
@@ -146,7 +146,7 @@ $kendo-card-subtitle-font-weight: 500 !default;
 $kendo-card-subtitle-letter-spacing: null !default;
 /// The text color of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-text: $kendo-subtle-text !default;
+$kendo-card-subtitle-text: k-color(subtle) !default;
 
 /// The maximum width of the Card image.
 /// @group card
@@ -185,6 +185,19 @@ $kendo-card-callout-width: 20px !default;
 /// @group card
 $kendo-card-callout-height: 20px !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,
     $kendo-card-padding-y: $kendo-card-padding-y,
@@ -240,5 +253,6 @@ $kendo-card-callout-height: 20px !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(none) !default;
@@ -17,14 +17,14 @@ $kendo-chart-wizard-icon-area-border-radius: k-border-radius(none) !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/_theme.scss

@@ -8,7 +8,7 @@
     .k-chat .k-quick-reply {
         &:focus,
         &.k-focus {
-            color: if($kendo-enable-color-system, k-color( primary-on-surface ), $kendo-color-primary);
+            color: k-color(primary-on-surface);
         }
     }
 }