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

package/scss/dataviz/_variables.scss

@@ -3,51 +3,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 ), k-get-theme-color-var( series-a-100 )) !default;
-$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-get-theme-color-var( series-a-130 )) !default;
-$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-get-theme-color-var( series-a-160 )) !default;
-$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-get-theme-color-var( series-a-70 )) !default;
-$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-get-theme-color-var( series-a-40 )) !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 ), k-get-theme-color-var( series-b-100 )) !default;
-$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-get-theme-color-var( series-b-130 )) !default;
-$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-get-theme-color-var( series-b-160 )) !default;
-$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-get-theme-color-var( series-b-70 )) !default;
-$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-get-theme-color-var( series-b-40 )) !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 ), k-get-theme-color-var( series-c-100 )) !default;
-$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-get-theme-color-var( series-c-130 )) !default;
-$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-get-theme-color-var( series-c-160 )) !default;
-$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-get-theme-color-var( series-c-70 )) !default;
-$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-get-theme-color-var( series-c-40 )) !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 ), k-get-theme-color-var( series-d-100 )) !default;
-$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-get-theme-color-var( series-d-130 )) !default;
-$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-get-theme-color-var( series-d-160 )) !default;
-$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-get-theme-color-var( series-d-70 )) !default;
-$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-get-theme-color-var( series-d-40 )) !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 ), k-get-theme-color-var( series-e-100 )) !default;
-$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-get-theme-color-var( series-e-130 )) !default;
-$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-get-theme-color-var( series-e-160 )) !default;
-$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-get-theme-color-var( series-e-70 )) !default;
-$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-get-theme-color-var( series-e-40 )) !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 ), k-get-theme-color-var( series-f-100 )) !default;
-$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-get-theme-color-var( series-f-130 )) !default;
-$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-get-theme-color-var( series-f-160 )) !default;
-$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-get-theme-color-var( series-f-70 )) !default;
-$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-get-theme-color-var( series-f-40 )) !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
@@ -120,14 +120,14 @@ $kendo-chart-pane-title-font-weight: var( --kendo-font-weight, inherit ) !defaul
 
 /// The inactive background color of the chart component.
 /// @group chart
-$kendo-chart-inactive-bg: var( --kendo-disabled-bg, initial ) !default;
+$kendo-chart-inactive-bg: k-color(base-subtle) !default;
 
 /// The color of the chart component major grid lines.
 /// @group charts
-$kendo-chart-major-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-chart-major-lines: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The color of the chart component minor grid lines.
 /// @group charts
-$kendo-chart-minor-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-chart-minor-lines: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The opacity of the chart area.
 /// @group charts
@@ -142,37 +142,37 @@ $kendo-chart-line-inactive-opacity: .3 !default;
 
 /// The background color of the chart component.
 /// @group charts
-$kendo-chart-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-chart-bg: k-color(surface-alt) !default;
 /// The text color of the chart component.
 /// @group charts
-$kendo-chart-text: var( --kendo-component-text, initial ) !default;
+$kendo-chart-text: k-color(on-app-surface) !default;
 /// The border color of the chart component.
 /// @group charts
-$kendo-chart-border: var( --kendo-component-border, initial ) !default;
+$kendo-chart-border: k-color(on-app-surface) !default;
 
 /// The text color of the chart tooltip.
 /// @group charts
-$kendo-chart-tooltip-color: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-chart-tooltip-color: k-color(app-surface) !default;
 /// The inverse text color of the chart tooltip.
 /// @group charts
-$kendo-chart-tooltip-color-inverse: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-chart-tooltip-color-inverse: k-color(on-app-surface) !default;
 
 /// The background color of the chart crosshairs.
 /// @group charts
-$kendo-chart-crosshair-background: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-chart-crosshair-background: k-color(on-app-surface) !default;
 /// The text color of the chart shared crosshair tooltip.
 /// @group charts
-$kendo-chart-crosshair-shared-tooltip-color: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-chart-crosshair-shared-tooltip-color: k-color(on-app-surface) !default;
 /// The background color of the chart shared crosshair tooltip.
 /// @group charts
-$kendo-chart-crosshair-shared-tooltip-background: var( --kendo-component-bg, initial ) !default;
+$kendo-chart-crosshair-shared-tooltip-background: k-color(surface-alt) !default;
 /// The border color of the chart shared crosshair tooltip.
 /// @group charts
 $kendo-chart-crosshair-shared-tooltip-border: transparent !default;
 
 /// The background color of the chart notes.
 /// @group charts
-$kendo-chart-notes-background: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-chart-notes-background: k-color(base-emphasis) !default;
 /// The border color of the chart notes.
 /// @group charts
 $kendo-chart-notes-border: $kendo-chart-notes-background !default;
@@ -182,7 +182,7 @@ $kendo-chart-notes-lines: $kendo-chart-notes-background !default;
 
 /// The background color of the chart handle.
 /// @group charts
-$kendo-chart-handle-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-chart-handle-bg: k-color(surface) !default;
 /// The text color of the chart handle.
 /// @group charts
 $kendo-chart-handle-text: $kendo-chart-text !default;
@@ -191,24 +191,24 @@ $kendo-chart-handle-text: $kendo-chart-text !default;
 $kendo-chart-handle-border: $kendo-chart-handle-bg !default;
 /// The hover background color of the chart handle.
 /// @group charts
-$kendo-chart-handle-hover-bg: var( --kendo-hover-bg, initial ) !default;
+$kendo-chart-handle-hover-bg: k-color(base-hover) !default;
 /// The hover text color of the chart handle.
 /// @group charts
-$kendo-chart-handle-hover-text: var( --kendo-hover-text, initial ) !default;
+$kendo-chart-handle-hover-text: k-color(on-base) !default;
 /// The hover border color of the chart handle.
 /// @group charts
-$kendo-chart-handle-hover-border: var( --kendo-hover-border, initial ) !default;
+$kendo-chart-handle-hover-border: color-mix(in srgb, k-color(border) 10%, transparent) !default;
 
 /// The color of the chart error bars.
 /// @group charts
-$kendo-chart-error-bars-background: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-chart-error-bars-background: k-color(error) !default;
 
 /// The size of the selection handle of the chart component.
 /// @group charts
 $kendo-selection-handle-size: 24px !default;
 /// The color of the selection handle of the chart component.
 /// @group charts
-$kendo-selection-border-color: var( --kendo-component-border, initial ) !default;
+$kendo-selection-border-color: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The computed height of the Chart title.
 /// @group charts
@@ -225,28 +225,28 @@ $kendo-treemap-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the treemap.
 /// @group charts
-$kendo-treemap-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-treemap-bg: k-color(surface-alt) !default;
 /// The text color of the treemap.
 /// @group charts
-$kendo-treemap-text: var( --kendo-component-text, initial ) !default;
+$kendo-treemap-text: k-color(on-app-surface) !default;
 /// The border color of the treemap.
 /// @group charts
-$kendo-treemap-border: var( --kendo-component-border, initial ) !default;
+$kendo-treemap-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the treemap title.
 /// @group charts
-$kendo-treemap-title-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-treemap-title-bg: k-color(surface) !default;
 /// The text color of the treemap title.
 /// @group charts
-$kendo-treemap-title-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-treemap-title-text: k-color(on-app-surface) !default;
 /// The border color of the treemap title.
 /// @group charts
-$kendo-treemap-title-border: var( --kendo-component-border, initial ) !default;
+$kendo-treemap-title-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 // Chart Overlay
 /// The background color of the Chart overlay.
 /// @group charts
-$kendo-chart-overlay-bg: if($kendo-enable-color-system, k-color(app-surface), $kendo-color-white) !default;
+$kendo-chart-overlay-bg: k-color(app-surface) !default;
 
 // No Data
 /// The font-size of the Chart no data message.
@@ -257,7 +257,7 @@ $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-chart-no-data-font-weight: var( --kendo-font-weight, normal ) !default;
 /// The text color of the Chart no data message.
 /// @group charts
-$kendo-chart-no-data-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-chart-no-data-text: k-color(on-app-surface) !default;
 /// The vertical padding of the Chart no data message.
 /// @group charts
 $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;

package/scss/daterangepicker/_theme.scss

@@ -9,7 +9,7 @@
         &[disabled],
         &.k-disabled {
             @include disabled(
-                $color: var( --kendo-daterange-picker-disabled-text, var( --kendo-disabled-text, inherit ) ),
+                $color: var( --kendo-daterange-picker-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ),
                 $bg: var( --kendo-daterange-picker-disabled-bg, transparent ),
                 $border: var( --kendo-daterange-picker-disabled-border, currentColor )
             );

package/scss/dialog/_theme.scss

@@ -5,6 +5,7 @@
 @mixin kendo-dialog--theme() {
 
     .k-dialog {
+        background-color: var( --kendo-dialog-bg, #{$kendo-dialog-bg} );
         @include box-shadow( var( --kendo-dialog-shadow, #{$kendo-dialog-shadow} ) );
     }
 

package/scss/dialog/_variables.scss

@@ -7,13 +7,13 @@ $kendo-dialog-border-width: 0 !default;
 
 /// The background color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-dialog-titlebar-bg: k-color(surface-alt) !default;
 /// The text color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-text: var( --kendo-component-text, initial ) !default;
+$kendo-dialog-titlebar-text: k-color(on-app-surface) !default;
 /// The border color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-border: var( --kendo-component-border, initial ) !default;
+$kendo-dialog-titlebar-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The width of the border around the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-border-width: 0 !default;
@@ -48,6 +48,10 @@ $kendo-dialog-buttongroup-spacing: k-spacing(3) !default;
 /// @group dialog
 $kendo-dialog-button-spacing: k-spacing(2) !default; // $kendo-actions-padding-y
 
+/// The background color of the Dialog.
+/// @group dialog
+$kendo-dialog-bg: k-color(app-surface) !default;
+
 /// The box shadow around the Dialog.
 /// @group dialog
 $kendo-dialog-shadow: var( --kendo-box-shadow-depth-8, none ) !default;
@@ -59,15 +63,15 @@ $kendo-dialog-brand-colors: (
 
 // Matrix with dialog theme colors in the order: bg, color, border
 $_tc-dialog-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-dialog-dark-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-dialog-light-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 /// The theme colors map for the Dialog.
@@ -85,13 +89,13 @@ $kendo-dialog-theme-colors: () !default;
 @each $ui-states in $_tc-dialog-dark-matrix {
     $kendo-dialog-theme-colors: map.deep-merge(
         $kendo-dialog-theme-colors,
-        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
+        k-generate-theme-variation( dark, dark, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-dialog-light-matrix {
     $kendo-dialog-theme-colors: map.deep-merge(
         $kendo-dialog-theme-colors,
-        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
+        k-generate-theme-variation( light, light, $ui-states )
     );
 }

package/scss/dock-manager/_variables.scss

@@ -9,7 +9,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: var( --kendo-component-border, inherit ) !default;
+$kendo-dock-manager-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
@@ -25,10 +25,10 @@ $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: var( --kendo-component-bg, inherit ) !default;
+$kendo-dock-manager-pane-header-bg: k-color(surface-alt) !default;
 /// The text color of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-dock-manager-pane-header-text: k-color(primary) !default;
 
 /// The vertical padding of the pane title in the DockManager component.
 /// @group dock-manager
@@ -68,7 +68,7 @@ $kendo-dock-manager-tabbed-pane-padding-x: null !default;
 $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: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !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: 25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18) !default;
@@ -78,10 +78,10 @@ $kendo-dock-manager-unpinned-container-shadow: 25.6px 0px 57.6px 0px rgba(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(surface-alt) !default;
 /// The text color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !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;
@@ -97,10 +97,10 @@ $kendo-dock-indicator-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-dock-indicator-hover-bg: k-color(primary-hover) !default;
 /// The text color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-dock-indicator-hover-text: k-color(app-surface) !default;
 
 /// The width of the border around the dropping area in the DockManager component.
 /// @group dock-manager
@@ -113,7 +113,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
 $kendo-dock-manager-dock-preview-border-radius: var( --kendo-border-radius-md, 0) !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 ) 20%, transparent), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent)) !default;
+$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-color(primary) 20%, transparent) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-dock-manager-dock-preview-border: k-color(primary) !default;

package/scss/draggable/_variables.scss

@@ -35,13 +35,13 @@ $kendo-drag-clue-opacity: .8 !default;
 
 /// Text color of the drag clue.
 /// @group draggable
-$kendo-drag-clue-text: var( --kendo-selected-text, inherit ) !default;
+$kendo-drag-clue-text: k-color(on-base) !default;
 /// Background color of the drag clue.
 /// @group draggable
-$kendo-drag-clue-bg: var( --kendo-selected-bg, inherit ) !default;
+$kendo-drag-clue-bg: k-color(base-active) !default;
 /// Border color of the drag clue.
 /// @group draggable
-$kendo-drag-clue-border: var( --kendo-selected-border, inherit ) !default;
+$kendo-drag-clue-border: color-mix(in srgb, k-color(border-alt) 76%, transparent) !default;
 /// Gradient of the drag clue.
 /// @group draggable
 $kendo-drag-clue-gradient: null !default;
@@ -70,4 +70,4 @@ $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
 
 /// Background-color of the drop hint.
 /// @group draggable
-$kendo-drop-hint-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-drop-hint-bg: k-color(primary) !default;

package/scss/drawer/_layout.scss

@@ -125,7 +125,9 @@
     }
     .k-drawer-items {
         margin: 0;
-        padding: 0;
+        padding-inline: var( --kendo-drawer-items-padding-x, #{$kendo-drawer-items-padding-x} );
+        padding-block: var( --kendo-drawer-items-padding-y, #{$kendo-drawer-items-padding-y} );
+        border-radius: var( --kendo-drawer-item-border-radius, #{$kendo-drawer-item-border-radius} );
         list-style: none;
         display: flex;
         flex-direction: column;
@@ -139,11 +141,12 @@
         color: inherit;
         font-size: var( --kendo-drawer-item-font-size, #{$kendo-drawer-item-font-size} );
         line-height: var( --kendo-drawer-item-line-height, #{$kendo-drawer-item-line-height} );
+        font-weight: var( --kendo-drawer-item-font-weight, #{$kendo-drawer-item-font-weight} );
         position: relative;
         display: flex;
         align-items: center;
         flex-flow: row nowrap;
-        gap: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
+        gap: var( --kendo-drawer-item-spacing, #{$kendo-drawer-item-spacing} );
         cursor: pointer;
 
         &::before {

package/scss/drawer/_theme.scss

@@ -85,6 +85,13 @@
                     var( --kendo-drawer-item-selected-hover-bg, #{$kendo-drawer-item-selected-hover-bg} )
                 );
             }
+
+            &:focus,
+            &.k-focus {
+                @include fill(
+                    var( --kendo-drawer-item-selected-focus-bg, #{$kendo-drawer-item-selected-focus-bg} )
+                );
+            }
         }
     }
     .k-drawer-separator {

package/scss/drawer/_variables.scss

@@ -4,13 +4,13 @@
 
 /// The background color of the Drawer.
 /// @group drawer
-$kendo-drawer-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-drawer-bg: k-color(surface-alt) !default;
 /// The text color of the Drawer.
 /// @group drawer
-$kendo-drawer-text: var( --kendo-component-text, initial ) !default;
+$kendo-drawer-text: k-color(on-app-surface) !default;
 /// The border color of the Drawer.
 /// @group drawer
-$kendo-drawer-border: var( --kendo-component-border, initial ) !default;
+$kendo-drawer-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The border width of the Drawer.
 /// @group drawer
 $kendo-drawer-border-width: 1px !default;
@@ -36,29 +36,41 @@ $kendo-drawer-content-padding-y: null !default;
 $kendo-drawer-scrollbar-width: 7px !default;
 /// The color of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-drawer-scrollbar-color: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The background of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 )) !default;
+$kendo-drawer-scrollbar-bg: k-color(base-subtle) !default;
 /// The border radius of the Drawer scrollbar.
 /// @group drawer
 $kendo-drawer-scrollbar-radius: 20px !default;
 /// The hover color of the Drawer scrollbar.
 /// @group drawer
-$kendo-drawer-scrollbar-hover-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-drawer-scrollbar-hover-color: color-mix(in srgb, k-color(on-app-surface) 60%, transparent) !default;
 
+/// The horizontal padding of the Drawer items.
+/// @group drawer
+$kendo-drawer-items-padding-x: 0 !default;
+/// The vertical padding of the Drawer items.
+/// @group drawer
+$kendo-drawer-items-padding-y: 0 !default;
 /// The horizontal padding of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-padding-y: k-spacing(2) !default;
+/// The spacing between the items in the Drawer item.
+/// @group drawer
+$kendo-drawer-item-spacing: $kendo-drawer-item-padding-x !default;
 /// The font size of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-font-size: $kendo-drawer-font-size !default;
 /// The line height of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;
+/// The font weight of the Drawer item.
+/// @group drawer
+$kendo-drawer-item-font-weight: var( --kendo-font-weight, normal ) !default;
 
 /// The horizontal padding of the Drawer item in each level.
 /// @group drawer
@@ -66,6 +78,9 @@ $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
 /// The count of the Drawer item levels.
 /// @group drawer
 $kendo-drawer-item-level-count: 5 !default;
+/// The border radius of the Drawer item.
+/// @group drawer
+$kendo-drawer-item-border-radius: null !default;
 
 /// The horizontal padding of the Drawer icon.
 /// @group drawer
@@ -84,7 +99,7 @@ $kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + va
 $kendo-drawer-item-ripple-border-width: k-spacing(0.5) !default;
 /// The border color of the drawer item ripple
 /// @group drawer
-$kendo-drawer-item-ripple-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-drawer-item-ripple-border: k-color(primary) !default;
 /// The background color of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-bg: $kendo-drawer-bg !default;
@@ -93,17 +108,17 @@ $kendo-drawer-item-bg: $kendo-drawer-bg !default;
 $kendo-drawer-item-text: $kendo-drawer-text !default;
 /// The text color of the Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-icon-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-drawer-item-icon-text: k-color(primary) !default;
 
 /// The background color of the hovered Drawer item.
 /// @group drawer
 $kendo-drawer-item-hover-bg: $kendo-drawer-item-bg !default;
 /// The text color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-drawer-item-hover-text: k-color(primary-hover) !default;
 /// The text color of the hovered Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-hover-icon-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-drawer-item-hover-icon-text: k-color(primary-hover) !default;
 
 /// The background color of the focused Drawer item.
 /// @group drawer
@@ -113,7 +128,7 @@ $kendo-drawer-item-focus-bg: $kendo-drawer-item-bg !default;
 $kendo-drawer-item-focus-text: $kendo-drawer-item-text !default;
 /// The box shadow of the focused Drawer item.
 /// @group drawer
-$kendo-drawer-item-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
+$kendo-drawer-item-focus-shadow: inset 0 0 0 1px k-color(base-emphasis) !default;
 /// The text color of the focused Drawer item icon.
 /// @group drawer
 $kendo-drawer-item-focus-icon-text: $kendo-drawer-item-icon-text !default;
@@ -123,16 +138,19 @@ $kendo-drawer-item-focus-icon-text: $kendo-drawer-item-icon-text !default;
 $kendo-drawer-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The background color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-bg: var( --kendo-selected-bg, initial ) !default;
+$kendo-drawer-item-selected-bg: k-color(base-active) !default;
 /// The text color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-drawer-item-selected-text: k-color(on-app-surface) !default;
 /// The text color of the selected Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-selected-icon-text: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
+$kendo-drawer-item-selected-icon-text: k-color(primary-active) !default;
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-hover-bg: var( --kendo-selected-hover-bg, inherit ) !default;
+$kendo-drawer-item-selected-hover-bg: k-color(base-subtle-active) !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-hover-text: var( --kendo-selected-hover-text, inherit ) !default;
+$kendo-drawer-item-selected-hover-text: k-color(on-base) !default;
+/// The background color of the selected and focused Drawer item.
+/// @group drawer
+$kendo-drawer-item-selected-focus-bg: null !default;

package/scss/dropzone/_variables.scss

@@ -26,23 +26,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 ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-dropzone-bg: k-color(surface) !default;
 /// Text color of the dropzone.
 /// @group dropzone
-$kendo-dropzone-text: var( --kendo-component-text, inherit ) !default;
+$kendo-dropzone-text: k-color(on-app-surface) !default;
 /// The border color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-border: var( --kendo-component-border, initial ) !default;
+$kendo-dropzone-border: color-mix(in srgb, k-color(border) 16%, transparent) !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-get-theme-color-var( neutral-90 )) !default;
+$kendo-dropzone-icon-text: k-color(subtle) !default;
 /// Text color of the icon when the dropzone is hovered.
 /// @group dropzone
-$kendo-dropzone-icon-hover-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-dropzone-icon-hover-text: k-color(primary) !default;
 
 /// The font size of the DropZone hint.
 /// @group dropzone
@@ -68,4 +68,4 @@ $kendo-dropzone-note-font-weight: inherit !default;
 $kendo-dropzone-note-spacing: k-spacing(0) !default;
 /// The text color of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-dropzone-note-text: k-color(subtle) !default;

package/scss/editor/_theme.scss

@@ -80,8 +80,8 @@
 
         .k-disabled:not(.k-selected) {
             @include fill (
-                $bg: var( --kendo-disabled-bg, inherit ),
-                $border: var( --kendo-disabled-border, inherit )
+                $bg: k-color(base-subtle),
+                $border: transparent
             );
         }
     }