@progress/kendo-theme-fluent 7.1.0-dev.7 → 7.1.0-dev.9

package/scss/grid/_variables.scss

@@ -236,7 +236,7 @@ $kendo-grid-header-text: $kendo-table-header-text !default;
 $kendo-grid-header-border: $kendo-table-header-border !default;
 /// Background color of grid header icons.
 /// @group grid
-$kendo-grid-header-icon-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-grid-header-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 
 // Background color of grid footer.
 /// @group grid
@@ -336,13 +336,13 @@ $kendo-grid-sort-index-spacing-x: map.get( $kendo-spacing, 0.5 ) !default;
 $kendo-grid-sort-icon-spacing: var( --kendo-icon-lg-spacing, .5rem ) !default;
 /// Text color of the grid sort indicator.
 /// @group grid
-$kendo-grid-sort-indicator-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-grid-sort-indicator-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 /// Text color of the grid sort order indicator.
 /// @group grid
-$kendo-grid-sort-indicator-order-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-grid-sort-indicator-order-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Background color of the sorted grid cells.
 /// @group grid
-$kendo-grid-sorted-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-grid-sorted-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 
 /// Horizontal padding of the grid command cells.
 /// @group grid
@@ -374,10 +374,10 @@ $kendo-grid-group-indicator-text: var( --kendo-component-text, initial ) !defaul
 $kendo-grid-group-indicator-bg: var( --kendo-component-bg, initial ) !default;
 /// Border color of the grid group indicator.
 /// @group grid
-$kendo-grid-group-indicator-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-grid-group-indicator-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 /// Text color of the grid group indicator icon.
 /// @group grid
-$kendo-grid-group-indicator-icon-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-grid-group-indicator-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// Horizontal border width of the grid group footer.
 /// @group grid
@@ -388,7 +388,7 @@ $kendo-grid-group-footer-border-width-x: 0px !default;
 
 /// Text color of the grid group drop clue.
 /// @group grid
-$kendo-grid-group-drop-hint-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-grid-group-drop-hint-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Border width of the grid sticky cell.
 /// @group grid
@@ -401,7 +401,7 @@ $kendo-grid-sticky-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
 /// Border color of the grid sticky cell.
 /// @group grid
-$kendo-grid-sticky-border: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-grid-sticky-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .8 ), k-get-theme-color-var( neutral-90 )) !default;
 /// Alt background color of the grid sticky cell.
 /// @group grid
 $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-bg !default;
@@ -434,7 +434,7 @@ $kendo-grid-sticky-selected-bg: $kendo-grid-selected-bg !default;
 $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-bg !default;
 /// Selected hover background color of the grid sticky cells.
 /// @group grid
-$kendo-grid-sticky-selected-hover-bg: $kendo-grid-selected-hover-bg !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg) !default;
 
 /// Horizontal padding of the grid filter menu container.
 /// @group grid
@@ -574,10 +574,10 @@ $kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo
 
 /// Background color of the grid row resize indicator
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
 /// Active background color of the grid row indicator
 /// @group grid
-$kendo-grid-row-resizer-active-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-grid-row-resizer-active-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Height of the grid row resize indicator
 /// @group grid
 $kendo-grid-row-resizer-height: map.get( $kendo-spacing, 0.5 ) !default;

package/scss/imageeditor/_variables.scss

@@ -10,8 +10,7 @@ $kendo-image-editor-bg: var( --kendo-component-bg, inherit ) !default;
 $kendo-image-editor-text: var( --kendo-component-text, inherit ) !default;
 /// Border color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-border: k-get-theme-color-var( neutral-30 ) !default;
-
+$kendo-image-editor-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 /// Vertical margin of the imageeditor.
 /// @group imageeditor
 $kendo-image-editor-margin-y: 0 !default;
@@ -40,7 +39,7 @@ $kendo-image-editor-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// Imageeditor content background color.
 /// @group imageeditor
-$kendo-image-editor-content-bg: k-get-theme-color-var( neutral-50 ) !default;
+$kendo-image-editor-content-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 )) !default;
 /// Imageeditor content text color.
 /// @group imageeditor
 $kendo-image-editor-content-text: inherit !default;
@@ -78,7 +77,7 @@ $kendo-image-editor-crop-bg: inherit !default;
 $kendo-image-editor-crop-text: inherit !default;
 /// Crop border color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-crop-border: $kendo-color-white !default;
+$kendo-image-editor-crop-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Crop overlay background color of the imageeditor.
 /// @group imageeditor
 $kendo-image-editor-crop-overlay-bg: rgba( $kendo-color-black, .3 ) !default;

package/scss/index.scss

@@ -163,7 +163,6 @@
 // Use component modules
 @use "./core" as *;
 
-
 // Typography and utils
 @use "./typography" as *;
 @use "./utils" as *;

package/scss/input/_layout.scss

@@ -446,9 +446,7 @@
 
         &.k-valid,
         &.k-invalid,
-        &.ng-valid.ng-touched,
         &.ng-invalid.ng-touched,
-        &.ng-valid.ng-dirty
         &.ng-invalid.ng-dirty {
 
             &:focus,

package/scss/input/_theme.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "../core/" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-input--theme() {
@@ -54,6 +55,14 @@
             .k-input-suffix {
                 color: var( --kendo-input-prefix-disabled-text, #{$kendo-input-prefix-disabled-text} );
             }
+
+            @if($kendo-enable-color-system) {
+                .k-input-button {
+                    color: inherit;
+                    background: none;
+                    border-color: transparent;
+                }
+            }
         }
 
         // Invalid
@@ -83,9 +92,7 @@
         }
 
         // Valid
-        &.k-valid,
-        &.ng-valid.ng-touched,
-        &.ng-valid.ng-dirty {
+        &.k-valid {
             --INTERNAL--kendo-input-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
 
             &::after {
@@ -194,9 +201,7 @@
         }
 
         // Valid
-        &.k-valid,
-        &.ng-valid.ng-touched,
-        &.ng-valid.ng-dirty {
+        &.k-valid {
             --INTERNAL--kendo-picker-border: var( --kendo-input-valid-border, #{$kendo-input-valid-border} );
 
             &::after {

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,11 @@ $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
@@ -653,6 +653,12 @@ $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;
@@ -662,14 +668,14 @@ $kendo-input-valid-text: var( --kendo-valid-text, #{$kendo-valid-text} ) !defaul
 
 /// 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