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

package/scss/colorgradient/_variables.scss

@@ -36,13 +36,13 @@ $kendo-color-gradient-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-text: $kendo-component-text !default;
+$kendo-color-gradient-text: k-color(on-app-surface) !default;
 /// The background color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-bg: $kendo-component-bg !default;
+$kendo-color-gradient-bg: k-color(app-surface) !default;
 /// The border color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-border: $kendo-component-border !default;
+$kendo-color-gradient-border: k-color(border) !default;
 
 /// The vertical padding of the small ColorGradient.
 /// @group color-gradient
@@ -85,7 +85,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: $kendo-hover-border !default;
+$kendo-color-gradient-focus-border: k-color(border) !default;
 /// The box shadow of the focused ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-focus-shadow: none !default;
@@ -200,7 +200,7 @@ $kendo-color-gradient-input-gap: calc( #{$kendo-color-gradient-spacer} / 2 ) !de
 $kendo-color-gradient-input-label-gap: k-spacing(1) !default;
 /// The text color of the ColorGradient input labels.
 /// @group color-gradient
-$kendo-color-gradient-input-label-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+$kendo-color-gradient-input-label-text: k-color(subtle) !default;
 
 /// The width of the small ColorGradient input.
 /// @group color-gradient

package/scss/core/_index.scss

@@ -17,8 +17,6 @@
 
 // Variables
 @forward "@progress/kendo-theme-core/scss/index.scss" with (
-    // Color System Switch
-    $kendo-enable-color-system: $kendo-enable-color-system !default,
     // Color System
     $_default-colors: $kendo-colors,
     $kendo-colors: $kendo-colors !default,
@@ -48,5 +46,11 @@
     $kendo-spacing: $kendo-spacing !default,
 );
 
-// Backward compatibility
-@forward "./color-system/_swatch-legacy.scss";
+// Global disabled styles
+:root {
+    --kendo-disabled-text: unset;
+    --kendo-disabled-bg: unset;
+    --kendo-disabled-border: unset;
+    --kendo-disabled-opacity: .65;
+    --kendo-disabled-filter: grayscale(.1);
+}

package/scss/core/color-system/_swatch.scss

@@ -1,8 +1,6 @@
 @use "sass:map";
 @use "./_palettes.scss" as *;
 
-// Config
-$kendo-enable-color-system: true !default;
 // Colors
 $_default-colors: (
     // Misc

package/scss/dataviz/_variables.scss

@@ -6,51 +6,51 @@
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), $kendo-color-primary) !default;
-$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), color.mix( black, $kendo-series-a, 25% )) !default;
-$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), color.mix( black, $kendo-series-a, 50% )) !default;
-$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), color.mix( white, $kendo-series-a, 25% )) !default;
-$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), color.mix( white, $kendo-series-a, 50% )) !default;
+$kendo-series-a: k-color(series-a)!default;
+$kendo-series-a-dark: k-color(series-a-bold)!default;
+$kendo-series-a-darker: k-color(series-a-bolder) !default;
+$kendo-series-a-light: k-color(series-a-subtle) !default;
+$kendo-series-a-lighter: k-color(series-a-subtler) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), $kendo-color-tertiary) !default;
-$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), color.mix( black, $kendo-series-b, 25% )) !default;
-$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), color.mix( black, $kendo-series-b, 50% )) !default;
-$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), color.mix( white, $kendo-series-b, 25% )) !default;
-$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), color.mix( white, $kendo-series-b, 50% )) !default;
+$kendo-series-b: k-color(series-b) !default;
+$kendo-series-b-dark: k-color(series-b-bold) !default;
+$kendo-series-b-darker: k-color(series-b-bolder) !default;
+$kendo-series-b-light: k-color(series-b-subtle) !default;
+$kendo-series-b-lighter: k-color(series-b-subtler) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), #20c997) !default;
-$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), color.mix( black, $kendo-series-c, 25% )) !default;
-$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), color.mix( black, $kendo-series-c, 50% )) !default;
-$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), color.mix( white, $kendo-series-c, 25% )) !default;
-$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), color.mix( white, $kendo-series-c, 50% )) !default;
+$kendo-series-c: k-color(series-c) !default;
+$kendo-series-c-dark: k-color(series-c-bold) !default;
+$kendo-series-c-darker: k-color(series-c-bolder) !default;
+$kendo-series-c-light: k-color(series-c-subtle) !default;
+$kendo-series-c-lighter: k-color(series-c-subtler) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), $kendo-color-success) !default;
-$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), color.mix( black, $kendo-series-d, 25% )) !default;
-$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), color.mix( black, $kendo-series-d, 50% )) !default;
-$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), color.mix( white, $kendo-series-d, 25% )) !default;
-$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), color.mix( white, $kendo-series-d, 50% )) !default;
+$kendo-series-d: k-color(series-d) !default;
+$kendo-series-d-dark: k-color(series-d-bold) !default;
+$kendo-series-d-darker: k-color(series-d-bolder) !default;
+$kendo-series-d-light: k-color(series-d-subtle) !default;
+$kendo-series-d-lighter: k-color(series-d-subtler) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), $kendo-color-warning) !default;
-$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), color.mix( black, $kendo-series-e, 25% )) !default;
-$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), color.mix( black, $kendo-series-e, 50% )) !default;
-$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), color.mix( white, $kendo-series-e, 25% )) !default;
-$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), color.mix( white, $kendo-series-e, 50% )) !default;
+$kendo-series-e: k-color(series-e) !default;
+$kendo-series-e-dark: k-color(series-e-bold) !default;
+$kendo-series-e-darker: k-color(series-e-bolder) !default;
+$kendo-series-e-light: k-color(series-e-subtle) !default;
+$kendo-series-e-lighter: k-color(series-e-subtler) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), $kendo-color-error) !default;
-$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), color.mix( black, $kendo-series-f, 25% )) !default;
-$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), color.mix( black, $kendo-series-f, 50% )) !default;
-$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), color.mix( white, $kendo-series-f, 25% )) !default;
-$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), color.mix( white, $kendo-series-f, 50% )) !default;
+$kendo-series-f: k-color(series-f) !default;
+$kendo-series-f-dark: k-color(series-f-bold) !default;
+$kendo-series-f-darker: k-color(series-f-bolder) !default;
+$kendo-series-f-light: k-color(series-f-subtle) !default;
+$kendo-series-f-lighter: k-color(series-f-subtler) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -98,13 +98,13 @@ $kendo-chart-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !
 
 /// The color of the Chart grid lines (major).
 /// @group charts
-$kendo-chart-major-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
+$kendo-chart-major-lines: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$kendo-chart-minor-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) !default;
+$kendo-chart-minor-lines: color-mix(in srgb, k-color(on-app-surface) 4%, transparent) !default;
 
-$kendo-chart-inactive: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-body-text, .5 )) !default;
+$kendo-chart-inactive: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 $kendo-chart-area-opacity: .6 !default;
 $kendo-chart-area-inactive-opacity: .1 !default;
 $kendo-chart-line-inactive-opacity: .3 !default;
@@ -114,24 +114,24 @@ $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: $kendo-component-bg !default;
-$kendo-chart-text: $kendo-component-text !default;
-$kendo-chart-border: $kendo-component-border !default;
+$kendo-chart-bg: k-color(app-surface) !default;
+$kendo-chart-text: k-color(on-app-surface) !default;
+$kendo-chart-border: k-color(border) !default;
 
-$kendo-chart-crosshair-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-crosshair-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
-$kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-chart-bg, 1 )) !default;
-$kendo-chart-crosshair-shared-tooltip-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
+$kendo-chart-crosshair-shared-tooltip-background: k-color(base-subtle) !default;
+$kendo-chart-crosshair-shared-tooltip-border: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
-$kendo-chart-notes-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
-$kendo-chart-notes-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
-$kendo-chart-notes-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-notes-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+$kendo-chart-notes-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+$kendo-chart-notes-lines: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
-$kendo-chart-error-bars-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-error-bars-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
 $kendo-chart-selection-handle-size: 22px !default;
-$kendo-chart-selection-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
-$kendo-chart-selection-shadow: inset 0 1px 7px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15 )) !default;
+$kendo-chart-selection-border-color: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
+$kendo-chart-selection-shadow: inset 0 1px 7px color-mix(in srgb, k-color(on-app-surface) 15%, transparent) !default;
 
 $kendo-chart-computed-title-height: 0px !default;
 
@@ -143,8 +143,16 @@ $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-treemap-padding-x: k-spacing(2) !default;
 $kendo-treemap-padding-y: k-spacing(1) !default;
 
+$kendo-treemap-text: k-color(on-app-surface) !default;
+$kendo-treemap-bg: k-color(surface-alt) !default;
+$kendo-treemap-border: k-color(border) !default;
+
+$kendo-treemap-title-text: k-color(on-app-surface) !default;
+$kendo-treemap-title-bg: k-color(surface) !default;
+$kendo-treemap-title-border: k-color(border) !default;
+
 // Chart Overlay
-$kendo-chart-overlay-bg: $kendo-base-bg !default;
+$kendo-chart-overlay-bg: k-color(surface) !default;
 
 // No Data
 $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default;
@@ -254,5 +262,11 @@ $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;
     $kendo-chart-overlay-bg: $kendo-chart-overlay-bg,
     $kendo-chart-no-data-font-size: $kendo-chart-no-data-font-size,
     $kendo-chart-no-data-font-weight: $kendo-chart-no-data-font-weight,
-    $kendo-chart-no-data-padding-y: $kendo-chart-no-data-padding-y
+    $kendo-chart-no-data-padding-y: $kendo-chart-no-data-padding-y,
+    $kendo-treemap-text: $kendo-treemap-text,
+    $kendo-treemap-bg: $kendo-treemap-bg,
+    $kendo-treemap-border: $kendo-treemap-border,
+    $kendo-treemap-title-text: $kendo-treemap-title-text,
+    $kendo-treemap-title-bg: $kendo-treemap-title-bg,
+    $kendo-treemap-title-border: $kendo-treemap-title-border
 );

package/scss/dialog/_variables.scss

@@ -30,9 +30,9 @@ $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 /// The theme colors map for the Dialog.
 /// @group dialog
 $kendo-dialog-theme-colors: (
-    "primary": map.get($kendo-theme-colors, "primary"),
-    "light": map.get($kendo-theme-colors, "light"),
-    "dark": map.get($kendo-theme-colors, "dark")
+    "primary": k-color(primary),
+    "light": k-color(light),
+    "dark": k-color(dark)
 ) !default;
 
 

package/scss/dock-manager/_variables.scss

@@ -10,7 +10,7 @@ $kendo-dock-manager-border-width: 1px !default;
 $kendo-dock-manager-border-style: solid !default;
 /// The color of the border around the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-border: $kendo-base-border !default;
+$kendo-dock-manager-border: k-color(border) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
@@ -26,7 +26,7 @@ $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !
 $kendo-dock-manager-pane-header-border-style: solid !default;
 /// The background color of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-bg: $kendo-component-bg !default;
+$kendo-dock-manager-pane-header-bg: k-color(app-surface) !default;
 
 /// The vertical padding of the pane title in the DockManager component.
 /// @group dock-manager
@@ -66,7 +66,7 @@ $kendo-dock-manager-tabbed-pane-padding-x: $kendo-dock-manager-pane-content-padd
 $kendo-dock-manager-unpinned-container-width: 300px !default;
 /// The background-color of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-bg: $kendo-component-bg !default;
+$kendo-dock-manager-unpinned-container-bg: k-color(app-surface) !default;
 /// The box shadow of the unpinned pane container in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) !default;
@@ -76,10 +76,10 @@ $kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.0
 $kendo-dock-indicator-padding: k-spacing(1.5) !default;
 /// The background color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-bg: $kendo-component-bg !default;
+$kendo-dock-indicator-bg: k-color(app-surface) !default;
 /// The text color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-text: $kendo-color-primary !default;
+$kendo-dock-indicator-text: k-color(primary) !default;
 /// The outline width of the dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-outline-width: 1px !default;
@@ -95,7 +95,7 @@ $kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) dr
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-bg: $kendo-color-primary !default;
+$kendo-dock-indicator-hover-bg: k-color(primary) !default;
 /// The text color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-hover-text: $kendo-color-white !default;
@@ -111,10 +111,10 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
 $kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) !default;
+$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-color(primary) 16%, transparent) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;
+$kendo-dock-manager-dock-preview-border: k-color(primary) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/dock-manager/_variables.scss" with (

package/scss/draggable/_variables.scss

@@ -11,9 +11,9 @@ $kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-drag-hint-font-family: var( --kendo-font-family, inherit )!default;
 $kendo-drag-hint-line-height: var( --kendo-line-height, normal ) !default;
 
-$kendo-drag-hint-bg: $kendo-selected-bg !default;
-$kendo-drag-hint-text: $kendo-selected-text !default;
-$kendo-drag-hint-border: $kendo-selected-border !default;
+$kendo-drag-hint-bg: k-color(primary) !default;
+$kendo-drag-hint-text: k-color(on-primary) !default;
+$kendo-drag-hint-border: k-color(primary) !default;
 $kendo-drag-hint-gradient: null !default;
 $kendo-drag-hint-shadow: null !default;
 
@@ -28,7 +28,7 @@ $kendo-drop-hint-line-h-height: 1px !default;
 $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;
 $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
 
-$kendo-drop-hint-bg: $kendo-color-primary !default;
+$kendo-drop-hint-bg: k-color(primary) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/draggable/_variables.scss" with (

package/scss/drawer/_variables.scss

@@ -6,13 +6,13 @@
 
 /// The background color of the Drawer.
 /// @group drawer
-$kendo-drawer-bg: $kendo-component-bg !default;
+$kendo-drawer-bg: k-color(app-surface) !default;
 /// The text color of the Drawer.
 /// @group drawer
-$kendo-drawer-text: $kendo-component-text !default;
+$kendo-drawer-text: k-color(on-app-surface) !default;
 /// The border color of the Drawer.
 /// @group drawer
-$kendo-drawer-border: $kendo-component-border !default;
+$kendo-drawer-border: k-color(border) !default;
 /// The border width of the Drawer.
 /// @group drawer
 $kendo-drawer-border-width: 1px !default;
@@ -83,31 +83,31 @@ $kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + #{
 
 /// The background color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-hover-bg: $kendo-hover-bg !default;
+$kendo-drawer-hover-bg: k-color(base-subtle-hover) !default;
 /// The text color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-hover-text: $kendo-hover-text !default;
+$kendo-drawer-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused Drawer item.
 /// @group drawer
-$kendo-drawer-focus-bg: $kendo-hover-bg !default;
+$kendo-drawer-focus-bg: k-color(base-subtle-hover) !default;
 /// The box shadow of the focused Drawer item.
 /// @group drawer
 $kendo-drawer-focus-shadow: inset 0 0 0 2px rgba( black, .15 ) !default;
 
 /// The background color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-bg: $kendo-selected-bg !default;
+$kendo-drawer-selected-bg: k-color(primary) !default;
 /// The text color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-selected-text: $kendo-selected-text !default;
+$kendo-drawer-selected-text: k-color(on-primary) !default;
 
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-selected-bg, 1 )) !default;
+$kendo-drawer-selected-hover-bg: k-color(primary-hover) !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-selected-hover-text: $kendo-selected-text !default;
+$kendo-drawer-selected-hover-text: k-color(on-primary) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with (

package/scss/dropzone/_variables.scss

@@ -29,23 +29,23 @@ $kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), if( k-is-light( $kendo-component-bg ), $kendo-color-light, $kendo-color-dark )) !default;
+$kendo-dropzone-bg: k-color(surface) !default;
 /// The text color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-text: $kendo-component-text !default;
+$kendo-dropzone-text: k-color(on-app-surface) !default;
 /// The border color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-border: $kendo-component-border !default;
+$kendo-dropzone-border: k-color(border) !default;
 
 /// The spacing below the DropZone icon.
 /// @group dropzone
 $kendo-dropzone-icon-spacing: k-spacing(6) !default;
 /// The text color of the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-dropzone-text, 8 )) !default;
+$kendo-dropzone-icon-text: k-color(subtle) !default;
 /// The text color of the hovered DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-hover-text: $kendo-color-primary !default;
+$kendo-dropzone-icon-hover-text: k-color(primary) !default;
 
 /// The font size of the DropZone hint.
 /// @group dropzone
@@ -65,7 +65,7 @@ $kendo-dropzone-note-font-size: var( --kendo-font-size-xs, inherit ) !default;
 $kendo-dropzone-note-spacing: null !default;
 /// The text color of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+$kendo-dropzone-note-text: k-color(subtle) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/dropzone/_variables.scss" with (

package/scss/editor/_variables.scss

@@ -27,14 +27,14 @@ $kendo-editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 
 /// The selected text color of the Editor.
 /// @group editor
-$kendo-editor-selected-text: $kendo-color-primary-contrast !default;
+$kendo-editor-selected-text: k-color(on-primary) !default;
 /// The selected background color of the Editor.
 /// @group editor
-$kendo-editor-selected-bg: $kendo-color-primary !default;
+$kendo-editor-selected-bg: k-color(primary) !default;
 
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), color.mix( $kendo-color-primary, #ffffff, 20% )) !default;
+$kendo-editor-highlighted-bg: k-color(primary-subtle) !default;
 
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor
@@ -74,6 +74,10 @@ $kendo-editor-filebrowser-tiles-padding-x: k-spacing(4) !default;
 /// @group editor
 $kendo-editor-filebrowser-tiles-padding-y: k-spacing(2) !default;
 
+$kendo-editor-ct-cell-text: k-color(on-primary) !default;
+$kendo-editor-ct-cell-bg: k-color(primary) !default;
+$kendo-editor-ct-cell-border: k-color(primary) !default;
+
 /// The padding of the Editor content.
 /// @group editor
 $kendo-editor-content-padding: k-spacing(4) !default;
@@ -99,5 +103,8 @@ $kendo-editor-content-padding: k-spacing(4) !default;
     $kendo-editor-inline-padding-y: $kendo-editor-inline-padding-y,
     $kendo-editor-filebrowser-tiles-padding-x: $kendo-editor-filebrowser-tiles-padding-x,
     $kendo-editor-filebrowser-tiles-padding-y: $kendo-editor-filebrowser-tiles-padding-y,
-    $kendo-editor-content-padding: $kendo-editor-content-padding
+    $kendo-editor-content-padding: $kendo-editor-content-padding,
+    $kendo-editor-ct-cell-text: $kendo-editor-ct-cell-text,
+    $kendo-editor-ct-cell-bg: $kendo-editor-ct-cell-bg,
+    $kendo-editor-ct-cell-border: $kendo-editor-ct-cell-border
 );

package/scss/expansion-panel/_variables.scss

@@ -21,13 +21,13 @@ $kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-text: $kendo-component-text !default;
+$kendo-expander-text: k-color(on-app-surface) !default;
 /// The background color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-bg: $kendo-component-bg !default;
+$kendo-expander-bg: k-color(app-surface) !default;
 /// The border color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-border: $kendo-component-border !default;
+$kendo-expander-border: k-color(border) !default;
 
 /// The box shadow of the focused ExpansionPanel.
 /// @group expander
@@ -62,11 +62,11 @@ $kendo-expander-header-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: $kendo-color-primary !default;
+$kendo-expander-title-text: k-color(primary) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander
-$kendo-expander-header-sub-title-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+$kendo-expander-header-sub-title-text: k-color(subtle) !default;
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander

package/scss/fab/_theme.scss

@@ -13,7 +13,7 @@
             outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            color: k-color(on-#{$name});
             background-color: $color;
         }
     }
@@ -22,9 +22,9 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:hover,
         .k-fab-solid-#{$name}.k-hover {
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 10% ));
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-color-darken( $color, 7.5% ) ));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-color-darken( $color, 7.5% ));
+            border-color: k-color(#{$name}-hover);
+            color: k-color(on-#{$name});
+            background-color: k-color(#{$name}-hover);
         }
     }
 
@@ -32,7 +32,7 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:focus,
         .k-fab-solid-#{$name}.k-focus {
-            outline: $kendo-fab-outline-width $kendo-fab-outline-style if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 50%, transparent), rgba( $color, .5 ));
+            outline: $kendo-fab-outline-width $kendo-fab-outline-style color-mix(in srgb, k-color($name) 50%, transparent);
         }
     }
 
@@ -42,9 +42,9 @@
         .k-fab-solid-#{$name}.k-active,
         .k-fab-solid-#{$name}.k-selected {
             @include box-shadow( $kendo-fab-active-shadow );
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 12.5% ));
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-color-darken( $color, 10% ) ));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-color-darken( $color, 10% ));
+            border-color: k-color(#{$name}-active);
+            color: k-color(on-#{$name});
+            background-color: k-color(#{$name}-active);
         }
     }
 
@@ -53,8 +53,8 @@
         .k-fab-solid-#{$name}:disabled,
         .k-fab-solid-#{$name}.k-disabled {
             @include box-shadow( $kendo-fab-disabled-shadow );
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 65%, transparent), k-try-tint( $color, 4.5 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
+            background-color: color-mix(in srgb, k-color($name) 65%, transparent);
+            color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent);
             opacity: 1;
         }
     }
@@ -83,11 +83,11 @@
     .k-fab-item:hover .k-fab-item-icon,
     .k-fab-item.k-hover .k-fab-item-icon {
         @include box-shadow( $kendo-fab-item-shadow );
-        outline: $kendo-fab-border-width $kendo-fab-item-outline-style if($kendo-enable-color-system, k-color( base-hover ), k-try-darken( $kendo-fab-item-icon-border, 10% ));
+        outline: $kendo-fab-border-width $kendo-fab-item-outline-style k-color(base-hover);
         outline-offset: -$kendo-fab-border-width;
-        border-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-border, 10% ));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( k-color-darken( $kendo-fab-item-icon-bg, 7.5% ) ));
-        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-fab-item-icon-bg, 7.5% ));
+        border-color: k-color(base-hover);
+        color: k-color(on-base);
+        background-color: k-color(base-hover);
     }
 
     // Focus state
@@ -95,18 +95,18 @@
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
-        outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 50%, transparent), rgba( $kendo-fab-item-icon-border, .5 ));
+        outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style color-mix(in srgb, k-color(base) 50%, transparent);
     }
 
     // Active state
     .k-fab-item:active .k-fab-item-icon,
     .k-fab-item.k-active .k-fab-item-icon {
         @include box-shadow( $kendo-fab-item-active-shadow );
-        outline: $kendo-fab-border-width solid if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
+        outline: $kendo-fab-border-width solid k-color(base-active);
         outline-offset: -$kendo-fab-border-width;
-        border-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-border, 12.5% ));
-        color: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( k-color-darken( $kendo-fab-item-icon-bg, 10% ) ));
-        background-color: if($kendo-enable-color-system, k-color( base-active ), k-color-darken( $kendo-fab-item-icon-bg, 10% ));
+        border-color: k-color(base-active);
+        color: k-color(on-base);
+        background-color: k-color(base-active);
     }
 
     // Disabled state
@@ -117,8 +117,8 @@
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow( $kendo-fab-item-disabled-shadow );
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 65%, transparent), k-try-tint( $kendo-fab-item-bg, 8 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 65%, transparent), k-try-tint( $kendo-fab-item-text, 8 ));
+            background-color: color-mix(in srgb, k-color(base) 65%, transparent);
+            color: color-mix(in srgb, k-color(on-base) 65%, transparent);
         }
     }