@progress/kendo-theme-fluent 7.1.0-dev.0 → 7.1.0-dev.10

package/scss/input/_variables.scss

@@ -91,19 +91,19 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The text color of the solid Input components.
 /// @group input
-$kendo-input-solid-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-input-solid-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the solid Input components.
 /// @group input
-$kendo-input-solid-bg: $kendo-color-white !default;
+$kendo-input-solid-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the solid Input components.
 /// @group input
-$kendo-input-solid-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-input-solid-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The text color of the hovered solid Input components.
 /// @group input
-$kendo-input-solid-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-input-solid-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The background color of the hovered solid Input components.
 /// @group input
@@ -111,7 +111,7 @@ $kendo-input-solid-hover-bg: $kendo-input-solid-bg !default;
 
 /// The border color of the hovered solid Input components.
 /// @group input
-$kendo-input-solid-hover-border: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-input-solid-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The text color of the focused solid Input components.
 /// @group input
@@ -123,7 +123,7 @@ $kendo-input-solid-focus-bg: $kendo-input-solid-bg !default;
 
 /// The border color of the focused solid Input components.
 /// @group input
-$kendo-input-solid-focus-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-input-solid-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The text color of the hovered and focused solid Input components.
 /// @group input
@@ -151,39 +151,39 @@ $kendo-input-solid-disabled-border: $kendo-disabled-border !default;
 
 /// The text color of the outline Input components.
 /// @group input
-$kendo-input-outline-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-input-outline-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the outline Input components.
 /// @group input
-$kendo-input-outline-bg: $kendo-color-white !default;
+$kendo-input-outline-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-input-outline-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The text color of the hovered outline Input components.
 /// @group input
-$kendo-input-outline-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-input-outline-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The background color of the hovered outline Input components.
 /// @group input
-$kendo-input-outline-hover-bg: $kendo-color-white !default;
+$kendo-input-outline-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the hovered outline Input components.
 /// @group input
-$kendo-input-outline-hover-border: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-input-outline-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The text color of the focused outline Input components.
 /// @group input
-$kendo-input-outline-focus-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-input-outline-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the focused outline Input components.
 /// @group input
-$kendo-input-outline-focus-bg: $kendo-color-white !default;
+$kendo-input-outline-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the focused outline Input components.
 /// @group input
-$kendo-input-outline-focus-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-input-outline-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The text color of the hovered and focused outline Input components.
 /// @group input
@@ -211,39 +211,39 @@ $kendo-input-outline-disabled-border: $kendo-disabled-text !default;
 
 /// The text color of the flat Input components.
 /// @group input
-$kendo-input-flat-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-input-flat-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the flat Input components.
 /// @group input
-$kendo-input-flat-bg: $kendo-color-white !default;
+$kendo-input-flat-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the flat Input components.
 /// @group input
-$kendo-input-flat-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-input-flat-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The text color of the hovered flat Input components.
 /// @group input
-$kendo-input-flat-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-input-flat-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The background color of the hovered flat Input components.
 /// @group input
-$kendo-input-flat-hover-bg: $kendo-color-white !default;
+$kendo-input-flat-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the hovered flat Input components.
 /// @group input
-$kendo-input-flat-hover-border: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-input-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The text color of the focused flat Input components.
 /// @group input
-$kendo-input-flat-focus-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-input-flat-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the focused flat Input components.
 /// @group input
-$kendo-input-flat-focus-bg: $kendo-color-white !default;
+$kendo-input-flat-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the focused flat Input components.
 /// @group input
-$kendo-input-flat-focus-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-input-flat-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The text color of the hovered and focused flat Input components.
 /// @group input
@@ -271,39 +271,39 @@ $kendo-input-flat-disabled-border: $kendo-disabled-text !default;
 
 /// The text color of the solid Picker components.
 /// @group input
-$kendo-picker-solid-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-picker-solid-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the solid Picker components.
 /// @group input
-$kendo-picker-solid-bg: $kendo-color-white !default;
+$kendo-picker-solid-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the solid Picker components.
 /// @group input
-$kendo-picker-solid-border: k-get-theme-color-var( neutral-130 )!default;
+$kendo-picker-solid-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 ))!default;
 
 /// The text color of the hovered solid Picker components.
 /// @group input
-$kendo-picker-solid-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-picker-solid-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The background color of hovered the solid Picker components.
 /// @group input
-$kendo-picker-solid-hover-bg: $kendo-color-white !default;
+$kendo-picker-solid-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the hovered solid Picker components.
 /// @group input
-$kendo-picker-solid-hover-border: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-picker-solid-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The text color of the focused solid Picker components.
 /// @group input
-$kendo-picker-solid-focus-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-picker-solid-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the focused solid Picker components.
 /// @group input
-$kendo-picker-solid-focus-bg: $kendo-color-white !default;
+$kendo-picker-solid-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the focused solid Picker components.
 /// @group input
-$kendo-picker-solid-focus-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-picker-solid-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The text color of the hovered and focused solid Picker components.
 /// @group input
@@ -323,7 +323,7 @@ $kendo-picker-solid-disabled-text: $kendo-disabled-text !default;
 
 /// The background color of the disabled solid Picker components.
 /// @group input
-$kendo-picker-solid-disabled-bg: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-picker-solid-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .09 ), k-get-theme-color-var( neutral-30 )) !default;
 
 /// The border color of the disabled solid Picker components.
 /// @group input
@@ -331,7 +331,7 @@ $kendo-picker-solid-disabled-border: $kendo-disabled-border !default;
 
 /// The text color of the outline Picker components.
 /// @group input
-$kendo-picker-outline-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-picker-outline-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the outline Picker components.
 /// @group input
@@ -339,15 +339,15 @@ $kendo-picker-outline-bg: none !default;
 
 /// The border color of the outline Picker components.
 /// @group input
-$kendo-picker-outline-border: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-picker-outline-border: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The text color of the hovered outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-text: $kendo-color-white !default;
+$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The background color of the hovered outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-bg: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-picker-outline-hover-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The border color of the hovered outline Picker components.
 /// @group input
@@ -355,27 +355,27 @@ $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg!default;
 
 /// The text color of the focused outline Picker components.
 /// @group input
-$kendo-picker-outline-focus-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-picker-outline-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the focused outline Picker components.
 /// @group input
-$kendo-picker-outline-focus-bg: $kendo-color-white!default;
+$kendo-picker-outline-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the focused outline Picker components.
 /// @group input
-$kendo-picker-outline-focus-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-picker-outline-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The text color of the hovered and focused outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-focus-text: $kendo-color-white !default;
+$kendo-picker-outline-hover-focus-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The background color of the hovered and focused outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-focus-bg: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-picker-outline-hover-focus-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The border color of the hovered and focused outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-focus-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-picker-outline-hover-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The text color of the disabled outline Picker components.
 /// @group input
@@ -391,7 +391,7 @@ $kendo-picker-outline-disabled-border: $kendo-picker-outline-disabled-text!defau
 
 /// The text color of the flat Picker components.
 /// @group input
-$kendo-picker-flat-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-picker-flat-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the flat Picker components.
 /// @group input
@@ -399,31 +399,31 @@ $kendo-picker-flat-bg: none !default;
 
 /// The border color of the flat Picker components.
 /// @group input
-$kendo-picker-flat-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-picker-flat-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The text color of the hovered flat Picker components.
 /// @group input
-$kendo-picker-flat-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-picker-flat-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The background color of the hovered flat Picker components.
 /// @group input
-$kendo-picker-flat-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
 
 /// The border color of the hovered flat Picker components.
 /// @group input
-$kendo-picker-flat-hover-border: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-picker-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The text color of the focused flat Picker components.
 /// @group input
-$kendo-picker-flat-focus-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-picker-flat-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the focused flat Picker components.
 /// @group input
-$kendo-picker-flat-focus-bg: $kendo-color-white !default;
+$kendo-picker-flat-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The border color of the focused flat Picker components.
 /// @group input
-$kendo-picker-flat-focus-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-picker-flat-focus-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The text color of the hovered and focused flat Picker components.
 /// @group input
@@ -622,11 +622,29 @@ $kendo-input-theme-colors: (
 
 /// The background color of the Input prefix.
 /// @group input
-$kendo-input-prefix-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-input-prefix-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) !default;
 
 /// The background color of the Input suffix.
 /// @group input
-$kendo-input-suffix-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-input-suffix-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) !default;
+
+/// The color of the Input separator.
+/// @group input
+$kendo-input-separator-text: k-get-theme-color-var( neutral-30 ) !default;
+
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: k-get-theme-color-var( neutral-130 ) !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: k-get-theme-color-var( neutral-130 ) !default;
+
+/// The text color of the disabled Input prefix.
+/// @group input
+$kendo-input-prefix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
+/// The text color of the disabled Input suffix.
+/// @group input
+$kendo-input-suffix-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
 
 /// The border color of the invalid Input components.
 /// @group input
@@ -635,16 +653,29 @@ $kendo-input-invalid-border: var( --kendo-invalid-border, #{$kendo-invalid-borde
 /// @group input
 $kendo-input-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default;
 
+// REMOVE
+$kendo-valid-bg: initial !default;
+$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-shadow: null !default;
+
+/// The border color of the valid Input components.
+/// @group input
+$kendo-input-valid-border: var( --kendo-valid-border, #{$kendo-valid-border} ) !default;
+/// The text color of the valid Input components.
+/// @group input
+$kendo-input-valid-text: var( --kendo-valid-text, #{$kendo-valid-text} ) !default;
+
 /// The text color of the Input placeholder.
 /// @group input
-$kendo-input-placeholder-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-input-placeholder-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 /// The opacity of the Input placeholder.
 /// @group input
 $kendo-input-placeholder-opacity: 1 !default;
 
 /// The color of the Input clear value icon.
 /// @group input
-$kendo-input-clear-value-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-input-clear-value-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 /// The opacity of the Input clear value icon.
 /// @group input
 $kendo-input-clear-value-opacity: .6 !default;

package/scss/list/_variables.scss

@@ -125,7 +125,7 @@ $kendo-list-group-item-font-weight: var( --kendo-font-weight-bold, normal ) !def
 
 /// The text color of the List item icon
 /// @group list
-$kendo-list-item-icon-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-list-item-icon-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The map with the sizes of the List.
 /// @group list
@@ -203,10 +203,10 @@ $kendo-list-border: var( --kendo-component-border, inherit ) !default;
 
 /// The background color of the List header.
 /// @group list
-$kendo-list-header-bg: $kendo-color-white !default;
+$kendo-list-header-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The text color of the List header.
 /// @group list
-$kendo-list-header-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-list-header-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The border color of the List header.
 /// @group list
 $kendo-list-header-border: inherit !default;
@@ -217,55 +217,55 @@ $kendo-list-header-shadow: $kendo-box-shadow-depth-3 !default;
 
 /// The background color of the List items.
 /// @group list
-$kendo-list-item-bg: $kendo-color-white !default;
+$kendo-list-item-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The text color of the List items.
 /// @group list
-$kendo-list-item-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-list-item-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-list-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 )) !default;
 /// The text color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-list-item-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The background color of the focused List items.
 /// @group list
-$kendo-list-item-focus-bg: $kendo-color-white !default;
+$kendo-list-item-focus-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The text color of the focused List items.
 /// @group list
-$kendo-list-item-focus-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-list-item-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// The box shadow of the focused List items.
 /// @group list
-$kendo-list-item-focus-shadow: inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-list-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;
 
 /// The background color of the selected List items.
 /// @group list
-$kendo-list-item-selected-bg: k-get-theme-color-var( neutral-40 ) !default;
+$kendo-list-item-selected-bg: if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-40 )) !default;
 /// The text color of the selected List items.
 /// @group list
-$kendo-list-item-selected-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-list-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The background color of the selected hovered List items.
 /// @group list
-$kendo-list-item-selected-hover-bg: k-get-theme-color-var( neutral-50 ) !default;
+$kendo-list-item-selected-hover-bg: if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-50 )) !default;
 /// The text color of the selected hovered List items.
 /// @group list
-$kendo-list-item-selected-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-list-item-selected-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The background color of the disabled List items.
 /// @group list
-$kendo-list-item-disabled-bg: $kendo-color-white !default;
+$kendo-list-item-disabled-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The text color of the disabled List items.
 /// @group list
-$kendo-list-item-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-list-item-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
 
 /// The background color of the List group items.
 /// @group list
-$kendo-list-group-item-bg: $kendo-color-white !default;
+$kendo-list-group-item-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The text color of the List group items.
 /// @group list
-$kendo-list-group-item-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-list-group-item-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The border color of the List group items.
 /// @group list
 $kendo-list-group-item-border: inherit !default;
@@ -275,7 +275,7 @@ $kendo-list-group-item-shadow: none !default;
 
 /// The text color of the 'No Data' text.
 /// @group list
-$kendo-list-no-data-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-list-no-data-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The color of the 'Option Label' text.
 /// @group list

package/scss/listbox/_variables.scss

@@ -41,4 +41,4 @@ $kendo-listbox-border: var( --kendo-component-border, inherit ) !default;
 $kendo-listbox-drop-hint-width: 1px !default;
 /// The border color of the ListBox drop hint.
 /// @group listbox
-$kendo-listbox-drop-hint-border-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-listbox-drop-hint-border-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/listview/_variables.scss

@@ -79,7 +79,7 @@ $kendo-listview-footer-bg: initial !default;
 $kendo-listview-item-selected-text: initial !default;
 /// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-listview-item-selected-bg: if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-20 )) !default;
 
 /// The text color of the focused ListView items.
 /// @group listview

package/scss/loader/_variables.scss

@@ -94,7 +94,7 @@ $kendo-loader-container-panel-border-color: var( --kendo-component-border, initi
 $kendo-loader-container-panel-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The background color of the container panel.
 /// @group loader
-$kendo-loader-container-panel-bg: $kendo-color-white !default;
+$kendo-loader-container-panel-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The horizontal padding of the small Loader container.
 /// @group loader
@@ -140,7 +140,7 @@ $kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !defa
 /// @group loader
 $kendo-loader-brand-colors: (
     primary: primary,
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
     error: error,
     success: success,
@@ -150,15 +150,15 @@ $kendo-loader-brand-colors: (
 
  // Matrix with loader theme colors in the order: bg, color, border
 $_tc-loader-matrix: (
-    (normal: (100, null, null)),
+    (normal: if($kendo-enable-color-system, (color, null, null), (100, null, null))),
 ) !default;
 
 $_tc-loader-dark-matrix: (
-    (normal: (160, null, null)),
+    (normal: if($kendo-enable-color-system, (color, null, null), (160, null, null))),
 ) !default;
 
 $_tc-loader-light-matrix: (
-    (normal: (50, null, null)),
+    (normal: if($kendo-enable-color-system, (color, null, null), (50, null, null))),
 ) !default;
 
 /// The theme colors map for the Loader variations.
@@ -177,13 +177,13 @@ $kendo-loader-theme-colors: () !default;
 @each $ui-states in $_tc-loader-dark-matrix {
     $kendo-loader-theme-colors: map.deep-merge(
         $kendo-loader-theme-colors,
-        k-generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $ui-states in $_tc-loader-light-matrix {
     $kendo-loader-theme-colors: map.deep-merge(
         $kendo-loader-theme-colors,
-        k-generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }

package/scss/map/_variables.scss

@@ -20,7 +20,7 @@ $kendo-map-bg: var( --kendo-component-bg, transparent ) !default;
 $kendo-map-text: var( --kendo-component-text, inherit ) !default;
 /// Border color of the map.
 /// @group map
-$kendo-map-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-map-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// Border width of the map.
 /// @group map
@@ -49,13 +49,13 @@ $kendo-map-navigator-height: $kendo-map-navigator-width !default;
 $kendo-map-navigator-border-width: 1px !default;
 /// Map navigator background color.
 /// @group map
-$kendo-map-navigator-bg: $kendo-color-white !default;
+$kendo-map-navigator-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Map navigator text color.
 /// @group map
-$kendo-map-navigator-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-map-navigator-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// Map navigator border color.
 /// @group map
-$kendo-map-navigator-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-map-navigator-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// Map zoom control margin.
 /// @group map
@@ -78,8 +78,8 @@ $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
 $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default;
 /// Map attribution background color.
 /// @group map
-$kendo-map-attribution-bg: $kendo-color-white !default;
+$kendo-map-attribution-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// Map marker fill color.
 /// @group map
-$kendo-map-marker-fill: k-get-theme-color-var( primary-100 ) !default;
+$kendo-map-marker-fill: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/mediaplayer/_variables.scss

@@ -26,11 +26,11 @@ $kendo-media-player-border: var( --kendo-component-border, inherit ) !default;
 
 /// Mediaplayer overlay background color.
 /// @group mediaplayer
-$kendo-media-player-overlay-bg: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-media-player-overlay-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// Mediaplayer quality button border color.
 /// @group mediaplayer
-$kendo-media-player-quality-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-media-player-quality-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// Media player title font size.
 /// @group mediaplayer
@@ -43,7 +43,7 @@ $kendo-media-player-titlebar-padding-x: map.get( $kendo-spacing, 2 ) !default;
 $kendo-media-player-titlebar-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Mediaplayer titlebar background color.
 /// @group mediaplayer
-$kendo-media-player-titlebar-bg: rgba( $kendo-color-black, .4 ) !default;
+$kendo-media-player-titlebar-bg: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .4 ) !default;
 /// Mediaplayer titlebar text color.
 /// @group mediaplayer
 $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;

package/scss/menu/_variables.scss

@@ -219,7 +219,7 @@ $kendo-menu-popup-item-focus-text: $kendo-menu-item-text !default;
 $kendo-menu-popup-item-focus-bg: $kendo-menu-item-bg !default;
 /// The outline of focused menu items.
 /// @group menu
-$kendo-menu-popup-item-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-menu-popup-item-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
 
 /// The text color of expanded menu item in popup.
 /// @group menu
@@ -251,4 +251,4 @@ $kendo-menu-scroll-button-hover-border: null !default;
 
 /// The color of menu items icon.
 /// @group menu
-$kendo-menu-icon-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-menu-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/notification/_layout.scss

@@ -10,17 +10,12 @@
         flex-flow: column-reverse wrap;
         position: fixed;
         z-index: 1000;
+        gap: var( --kendo-notificaiton-group-gap, #{$kendo-notification-group-gap} ) 0;
     }
 
-    .k-notification-container {
-        margin-block: var( --kendo-notification-container-padding-y, #{$kendo-notification-container-padding-y} );
-        margin-inline: 0;
-        display: inline-flex;
-        vertical-align: top;
-
-        &-animating {
-            overflow: hidden;
-        }
+    // Needed due to the specifics in the implementation of animations in Angular
+    .k-notification-container-animating {
+        overflow: hidden;
     }
 
     .k-notification {