@progress/kendo-theme-fluent 7.1.0-dev.8 → 7.1.0

package/scss/checkbox/_variables.scss

@@ -45,34 +45,34 @@ $kendo-checkbox-bg: $kendo-component-bg !default;
 $kendo-checkbox-text: transparent !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-checkbox-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: $kendo-checkbox-bg !default;
 /// The text color of the hovered CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-text: k-get-theme-color( neutral, 130 ) !default;
+$kendo-checkbox-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 )) !default;
 /// The border color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-border: $kendo-checkbox-border !default;
 
 /// The background color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-checked-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: $kendo-color-white !default;
+$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
 /// The background of the hovered and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-checked-bg: k-get-theme-color-var( primary-110 ) !default;
+$kendo-checkbox-hover-checked-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 /// The text color of the hovered and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-checked-text: $kendo-color-white !default;
+$kendo-checkbox-hover-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The border color of the hovered and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-checked-border: $kendo-checkbox-hover-checked-bg !default;
@@ -85,7 +85,7 @@ $kendo-checkbox-focus-border: null !default;
 $kendo-checkbox-focus-shadow: null !default;
 /// The outline of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-outline: 1px solid k-get-theme-color-var( neutral-130 ) !default;
+$kendo-checkbox-focus-outline: 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 $kendo-checkbox-focus-outline-offset: 2px !default;
 
 /// The background color of the indeterminate CheckBox.
@@ -93,50 +93,50 @@ $kendo-checkbox-focus-outline-offset: 2px !default;
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The text color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-text: k-get-theme-color( primary, 100 ) !default;
+$kendo-checkbox-indeterminate-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 )) !default;
 /// The border color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-indeterminate-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The background color of the hovered and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The text color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-text: k-get-theme-color( primary, 110 ) !default;
+$kendo-checkbox-hover-indeterminate-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 )) !default;
 /// The border color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-border: k-get-theme-color-var( primary-110 ) !default;
+$kendo-checkbox-hover-indeterminate-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: $kendo-checkbox-bg !default;
 /// The text color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 
 /// The background color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-bg: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-checked-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 /// The text color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: $kendo-color-white !default;
+$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The border color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-border: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-checked-border: if($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 )) !default;
 
 /// The background color of the disabled and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-text: k-get-theme-color( neutral, 60 ) !default;
+$kendo-checkbox-disabled-indeterminate-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color( neutral, 60 )) !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-border: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-checkbox-disabled-indeterminate-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 
 /// The background color of an invalid CheckBox.
 /// @group checkbox
@@ -212,7 +212,7 @@ $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 /// The background color of the CheckBox' ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-ripple-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .25 !default;

package/scss/chip/_variables.scss

@@ -37,7 +37,7 @@ $kendo-chip-solid-disabled-border: var( --kendo-disabled-border, inherit ) !defa
 $kendo-chip-outline-disabled-bg: var( $kendo-component-bg, transparent ) !default;
 /// The border color of the outline disabled Chip.
 /// @group chip
-$kendo-chip-outline-disabled-border: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-chip-outline-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
 
 /// The offset of the outline focused Chip.
 /// @group chip
@@ -125,66 +125,66 @@ $kendo-chip-brand-colors: ( error, success, info ) !default;
 // The color matrix for the base Chip
 $_tc-base-matrix: (
     solid: (
-        normal: (20, 160, 20),
-        hover: (30, 190, 30),
-        focus: (20, 160, 130),
-        focus-hover: (20, 190, 130),
-        selected: (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 )),
-        selected-hover: (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 )),
-        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+        normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, 160, 20)),
+        hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, 190, 30)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 160, 130)),
+        focus-hover: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 190, 130)),
+        selected: if($kendo-enable-color-system, (k-color( primary ), k-color( on-primary ), k-color( primary )), (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 ))),
+        selected-hover: if($kendo-enable-color-system, (k-color( primary ), k-color( on-primary ), k-color( primary )), (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 ))),
+        disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     outline: (
-        normal: (transparent, 160, currentColor),
-        hover: (190, $kendo-color-white, 190),
-        focus: (transparent, 160, currentColor, inherit),
-        focus-hover: (190, $kendo-color-white, 190, inherit),
-        selected: (190, $kendo-color-white, 190),
-        selected-hover: (20, 190, 110),
-        disabled: (initial, var( --kendo-disabled-text, inherit ), 90)
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
+        hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor, inherit), (transparent, 160, currentColor, inherit)),
+        focus-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface, inherit), (190, $kendo-color-white, 190, inherit)),
+        selected: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
+        selected-hover: if($kendo-enable-color-system, (color-subtle, color-on-surface, color-on-subtle), (20, 190, 110)),
+        disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), 90))
     ),
 ) !default;
 
 // The color matrix for the error, success and info Chips
 $_tc-brand-matrix: (
     solid: (
-        normal: (20, 160, 20),
-        hover: (30, 190, 30),
-        focus: (20, 160, 160),
-        focus-hover: (20, 190, 160),
-        selected: (40, 190, 40),
-        selected-hover: (30, 190, 30),
-        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+        normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, 160, 20)),
+        hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, 190, 30)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 160, 160)),
+        focus-hover: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 190, 160)),
+        selected: if($kendo-enable-color-system, (color-subtle-active, color-on-subtle, color-subtle-active), (40, 190, 40)),
+        selected-hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, 190, 30)),
+        disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     outline: (
-        normal: (transparent, 160, currentColor),
-        hover: (190, $kendo-color-white, 190),
-        focus: (transparent, 160, 160, inherit),
-        focus-hover: (190, $kendo-color-white, 190, inherit),
-        selected: (190, $kendo-color-white, 190),
-        selected-hover: (190, $kendo-color-white, 190),
-        disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
+        hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color-on-surface, inherit), (transparent, 160, 160, inherit)),
+        focus-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface, inherit), (190, $kendo-color-white, 190, inherit)),
+        selected: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
+        selected-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
+        disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
     )
 ) !default;
 
 // The color matrix for the warning Chips
 $_tc-warning-matrix: (
     solid: (
-        normal: (20, k-get-theme-color-var( grey-160 ), 20),
-        hover: (30, k-get-theme-color-var( grey-190 ), 30),
-        focus: (20, k-get-theme-color-var( grey-160 ), 160),
-        focus-hover: (20, k-get-theme-color-var( grey-190 ), 160),
-        selected: (40, k-get-theme-color-var( grey-190 ), 40),
-        selected-hover: (30, k-get-theme-color-var( grey-190 ), 30),
-        disabled: (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit ))
+        normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, k-get-theme-color-var( grey-160 ), 20)),
+        hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, k-get-theme-color-var( grey-190 ), 30)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, k-get-theme-color-var( grey-160 ), 160)),
+        focus-hover: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, k-get-theme-color-var( grey-190 ), 160)),
+        selected: if($kendo-enable-color-system, (color-subtle-active, color-on-subtle, color-subtle-active), (40, k-get-theme-color-var( grey-190 ), 40)),
+        selected-hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, k-get-theme-color-var( grey-190 ), 30)),
+        disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     outline: (
-        normal: (transparent, 160, currentColor),
-        hover: (190, $kendo-color-white, 190),
-        focus: (transparent, 160, 160, inherit),
-        focus-hover: (190, $kendo-color-white, 190, inherit),
-        selected: (190, $kendo-color-white, 190),
-        selected-hover: (190, $kendo-color-white, 190),
-        disabled: (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit ))
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
+        hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color-on-surface, inherit), (transparent, 160, 160, inherit)),
+        focus-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface, inherit), (190, $kendo-color-white, 190, inherit)),
+        selected: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
+        selected-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
+        disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
     )
 ) !default;
 
@@ -195,7 +195,7 @@ $kendo-chip-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-base-matrix {
     $kendo-chip-theme-colors: map.deep-merge(
         $kendo-chip-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, base, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, base, if($kendo-enable-color-system, base, neutral), $ui-states )
     );
 }
 

package/scss/color-preview/_variables.scss

@@ -14,17 +14,17 @@ $kendo-color-preview-bg: transparent !default;
 $kendo-color-preview-text: inherit !default;
 /// Border color of the color preview.
 /// @group color-preview
-$kendo-color-preview-border: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-color-preview-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 /// Hover Border color of the color preview.
 /// @group color-preview
-$kendo-color-preview-hover-border: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-color-preview-hover-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
 
 /// Background color of the color preview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-bg: $kendo-color-white !default;
+$kendo-color-preview-no-color-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Text color of the color preview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-text: k-get-theme-color( error, 190 ) !default;
+$kendo-color-preview-no-color-text: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color( error, 190 )) !default;
 /// Border color of the color preview when no color is selected.
 /// @group color-preview
 $kendo-color-preview-no-color-border: currentColor !default;

package/scss/coloreditor/_variables.scss

@@ -39,7 +39,7 @@ $kendo-color-editor-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The border color of the focused ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-focus-border: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-color-editor-focus-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) !default;
 /// The box shadow of the focused ColorEditor.
 /// @group coloreditor
 $kendo-color-editor-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;

package/scss/colorgradient/_variables.scss

@@ -49,7 +49,7 @@ $kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The border color of the focused ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-focus-border: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-color-gradient-focus-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) !default;
 /// The box shadow of the focused ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -68,7 +68,7 @@ $kendo-color-gradient-canvas-spacing: math.div( $kendo-color-gradient-spacer, 2
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
 /// The border color of the ColorGradient canvas hsv rectangle.
 /// @group cologradient
-$kendo-color-gradient-canvas-rectangle-border: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-color-gradient-canvas-rectangle-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
@@ -81,10 +81,10 @@ $kendo-color-gradient-slider-track-size: 20px !default;
 $kendo-color-gradient-slider-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// The width of the border around the ColorGradient slider.
 /// @group cologradient
-$kendo-color-gradient-slider-border-width: 1px !default;
+$kendo-color-gradient-slider-border-width: if($kendo-enable-color-system, 0, 1px) !default;
 /// The color of the border around the ColorGradient slider.
 /// @group cologradient
-$kendo-color-gradient-slider-border: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-color-gradient-slider-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 
 /// The height of the ColorGradient vertical slider.
 /// @group cologradient
@@ -110,22 +110,22 @@ $kendo-color-gradient-draghandle-border-width: 2px !default;
 $kendo-color-gradient-draghandle-outline-width: 1px !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-border: $kendo-color-white !default;
+$kendo-color-gradient-draghandle-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-shadow: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-color-gradient-draghandle-shadow: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The color of the border around the focused ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-border: $kendo-color-white !default;
+$kendo-color-gradient-draghandle-focus-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-shadow: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-color-gradient-draghandle-focus-shadow: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The hover color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-hover-shadow: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-color-gradient-draghandle-hover-shadow: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The vertical offset of the ColorGradient canvas drag handle.
 /// @group cologradient

package/scss/colorpalette/_variables.scss

@@ -28,16 +28,16 @@ $kendo-color-palette-tile-width: map.get( $kendo-spacing, 6 ) !default;
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// The outline color of the ColorPalette focused tile.
 /// @group colorpalette
-$kendo-color-palette-tile-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-color-palette-tile-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group colorpalette
-$kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px $kendo-color-white !default;
+$kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The outline color of the ColorPalette hovered tile.
 /// @group colorpalette
-$kendo-color-palette-tile-hover-outline: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-color-palette-tile-hover-outline: if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) !default;
 /// The shadow of the ColorPalette hovered tile.
 /// @group colorpalette
-$kendo-color-palette-tile-hover-shadow: inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px $kendo-color-white !default;
+$kendo-color-palette-tile-hover-shadow: inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The outline color of the ColorPalette selected tile.
 /// @group colorpalette
 $kendo-color-palette-tile-selected-outline: $kendo-color-palette-tile-hover-outline !default;

package/scss/core/_index.scss

@@ -1,8 +1,7 @@
 @use "sass:map";
 
-// Palettes
-@forward "./color-system/palettes";
-@use "./color-system/palettes" as *;
+// Swatch
+@use "./color-system/swatch" as *;
 
 // Elevation
 @use "./elevation" as *;
@@ -11,12 +10,47 @@
 // Variables
 @forward "./variables";
 
-@forward "@progress/kendo-theme-core/scss/index.import.scss"  with (
-    $kendo-palettes: $kendo-fluent-palettes,
+@forward "@progress/kendo-theme-core/scss/index.import.scss" with (
+    $kendo-enable-color-system: $kendo-enable-color-system !default,
+    // Color System
+    $kendo-colors: $kendo-colors !default,
+    // Legacy
+    $kendo-theme-colors: $kendo-theme-colors !default,
+    $kendo-palettes: $kendo-palettes !default,
+    $kendo-body-bg: $kendo-body-bg !default,
+    $kendo-body-text: $kendo-body-text !default,
+    $kendo-component-bg: $kendo-component-bg !default,
+    $kendo-component-text: $kendo-component-text !default,
+    $kendo-component-border: $kendo-component-border !default,
+    $kendo-hover-bg: $kendo-hover-bg !default,
+    $kendo-hover-text: $kendo-hover-text !default,
+    $kendo-hover-border: $kendo-hover-border !default,
+    $kendo-selected-bg: $kendo-selected-bg !default,
+    $kendo-selected-text: $kendo-selected-text !default,
+    $kendo-selected-border: $kendo-selected-border !default,
+    $kendo-selected-hover-bg: $kendo-selected-hover-bg !default,
+    $kendo-selected-hover-text: $kendo-selected-hover-text !default,
+    $kendo-selected-hover-border: $kendo-selected-hover-border !default,
+    $kendo-focus-outline: $kendo-focus-outline !default,
+    $kendo-subtle-text: $kendo-subtle-text !default,
+    $kendo-link-text: $kendo-link-text !default,
+    $kendo-link-hover-text: $kendo-link-hover-text !default,
+    $kendo-invalid-bg: $kendo-invalid-bg !default,
+    $kendo-invalid-text: $kendo-invalid-text !default,
+    $kendo-invalid-border: $kendo-invalid-border !default,
+    $kendo-invalid-shadow: $kendo-invalid-shadow !default,
+    $kendo-disabled-bg: $kendo-disabled-bg !default,
+    $kendo-disabled-text: $kendo-disabled-text !default,
+    $kendo-disabled-border: $kendo-disabled-border !default,
+    $kendo-loading-bg: $kendo-loading-bg !default,
+    $kendo-loading-text: $kendo-loading-text !default,
+    // Elevation
     $_default-elevation: $kendo-elevation,
-    $kendo-elevation: $kendo-elevation !default,
+    $kendo-elevation: $kendo-elevation !default
 );
 
+@forward "./color-system/swatch-legacy";
+
 // Helpers
 @use "./helpers";
 

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

@@ -1 +1,3 @@
+@forward "./swatch";
+@forward "./swatch-legacy";
 @forward "./utils";