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

package/scss/chip/_variables.scss

@@ -25,19 +25,19 @@ $kendo-chip-avatar-height: 1em !default;
 $kendo-chip-avatar-flex-basis: 1em !default;
 /// The text color of the disabled Chip.
 /// @group chip
-$kendo-chip-disabled-text: var( --kendo-disabled-text, inherit ) !default;
+$kendo-chip-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The background color of the solid disabled Chip.
 /// @group chip
-$kendo-chip-solid-disabled-bg: var( --kendo-disabled-bg, transparent ) !default;
+$kendo-chip-solid-disabled-bg: k-color(base-subtle) !default;
 /// The border color of the solid disabled Chip.
 /// @group chip
-$kendo-chip-solid-disabled-border: var( --kendo-disabled-border, inherit ) !default;
+$kendo-chip-solid-disabled-border: transparent !default;
 /// The background color of the outline disabled Chip.
 /// @group chip
-$kendo-chip-outline-disabled-bg: var( $kendo-component-bg, transparent ) !default;
+$kendo-chip-outline-disabled-bg: var( k-color(surface-alt), transparent ) !default;
 /// The border color of the outline disabled Chip.
 /// @group chip
-$kendo-chip-outline-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-chip-outline-disabled-border: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The offset of the outline focused Chip.
 /// @group chip
@@ -69,6 +69,10 @@ $kendo-chip-md-padding-y: k-spacing(1) !default;
 /// @group chip
 $kendo-chip-lg-padding-y: k-spacing(1.5) !default;
 
+/// The font weight of the Chip.
+/// @group chip
+$kendo-chip-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+
 /// The font size of the small Chip.
 /// @group chip
 $kendo-chip-sm-font-size: var( --kendo-font-size, inherit ) !default;
@@ -125,66 +129,66 @@ $kendo-chip-brand-colors: ( error, success, info ) !default;
 // The color matrix for the base Chip
 $_tc-base-matrix: (
     solid: (
-        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, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
+        normal: (color-subtle, color-on-subtle, color-subtle),
+        hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
+        focus: (color-subtle, color-on-subtle, color-on-subtle),
+        focus-hover: (color-subtle, color-on-subtle, color-on-subtle),
+        selected: (k-color(primary), k-color(on-primary), k-color(primary)),
+        selected-hover: (k-color(primary), k-color(on-primary), k-color(primary)),
+        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
     ),
     outline: (
-        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, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), 90))
+        normal: (transparent, color-on-surface, currentColor),
+        hover: (color-on-surface, app-surface, color-on-surface),
+        focus: (transparent, color-on-surface, currentColor, inherit),
+        focus-hover: (color-on-surface, app-surface, color-on-surface, inherit),
+        selected: (color-on-surface, app-surface, color-on-surface),
+        selected-hover: (color-subtle, color-on-surface, color-on-subtle),
+        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
     ),
 ) !default;
 
 // The color matrix for the error, success and info Chips
 $_tc-brand-matrix: (
     solid: (
-        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, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
+        normal: (color-subtle, color-on-subtle, color-subtle),
+        hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
+        focus: (color-subtle, color-on-subtle, color-on-subtle),
+        focus-hover: (color-subtle, color-on-subtle, color-on-subtle),
+        selected: (color-subtle-active, color-on-subtle, color-subtle-active),
+        selected-hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
+        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
     ),
     outline: (
-        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, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
+        normal: (transparent, color-on-surface, currentColor),
+        hover: (color-on-surface, app-surface, color-on-surface),
+        focus: (transparent, color-on-surface, color-on-surface, inherit),
+        focus-hover: (color-on-surface, app-surface, color-on-surface, inherit),
+        selected: (color-on-surface, app-surface, color-on-surface),
+        selected-hover: (color-on-surface, app-surface, color-on-surface),
+        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
     )
 ) !default;
 
 // The color matrix for the warning Chips
 $_tc-warning-matrix: (
     solid: (
-        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, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
+        normal: (color-subtle, color-on-subtle, color-subtle),
+        hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
+        focus: (color-subtle, color-on-subtle, color-on-subtle),
+        focus-hover: (color-subtle, color-on-subtle, color-on-subtle),
+        selected: (color-subtle-active, color-on-subtle, color-subtle-active),
+        selected-hover: (color-subtle-hover, color-on-subtle, color-subtle-hover),
+        disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
     ),
     outline: (
-        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, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
+        normal: (transparent, color-on-surface, currentColor),
+        hover: (color-on-surface, app-surface, color-on-surface),
+        focus: (transparent, color-on-surface, color-on-surface, inherit),
+        focus-hover: (color-on-surface, app-surface, color-on-surface, inherit),
+        selected: (color-on-surface, app-surface, color-on-surface),
+        selected-hover: (color-on-surface, app-surface, color-on-surface),
+        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
     )
 ) !default;
 
@@ -195,7 +199,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, if($kendo-enable-color-system, base, neutral), $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, base, base, $ui-states )
     );
 }
 

package/scss/color-preview/_theme.scss

@@ -24,7 +24,7 @@
     .k-disabled {
         .k-color-preview-mask::before {
             @include fill(
-                $bg: var( --kendo-disabled-bg )
+                $bg: k-color(base-subtle)
             );
         }
     }

package/scss/color-preview/_variables.scss

@@ -15,17 +15,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: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-color-preview-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 /// Hover Border color of the color preview.
 /// @group color-preview
-$kendo-color-preview-hover-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-color-preview-hover-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 
 /// Background color of the color preview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-color-preview-no-color-bg: k-color(app-surface) !default;
 /// Text color of the color preview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-text: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color( error, 190 )) !default;
+$kendo-color-preview-no-color-text: k-color(error-on-surface) !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

@@ -35,20 +35,20 @@ $kendo-color-editor-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-text: var( --kendo-component-text, initial ) !default;
+$kendo-color-editor-text: k-color(on-app-surface) !default;
 /// The background color of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-color-editor-bg: k-color(surface-alt) !default;
 /// The border color of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-border: var( --kendo-component-border, initial ) !default;
+$kendo-color-editor-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The box shadow of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The border color of the focused ColorEditor.
 /// @group color-editor
-$kendo-color-editor-focus-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-color-editor-focus-border: color-mix(in srgb, k-color(border) 10%, transparent) !default;
 /// The box shadow of the focused ColorEditor.
 /// @group color-editor
 $kendo-color-editor-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;

package/scss/colorgradient/_layout.scss

@@ -46,6 +46,7 @@
 
         .k-hsv-gradient {
             height: var( --kendo-color-gradient-canvas-rectangle-height, #{$kendo-color-gradient-canvas-rectangle-height} );
+            aspect-ratio: 1;
         }
 
         .k-hsv-draghandle {
@@ -138,8 +139,6 @@
     @each $size, $size-props in $kendo-color-gradient-sizes {
         $_width: map.get( $size-props, width );
         $_spacing: map.get( $size-props, spacing );
-        $_vertical-slider-height: map.get( $size-props, vertical-slider-height );
-        $_rectangle-height: map.get( $size-props, rectangle-height );
         $_input-width: map.get( $size-props, input-width );
         $_canvas-spacing: map.get( $size-props, canvas-spacing );
         $_padding-x: map.get( $size-props, padding-x );
@@ -160,14 +159,6 @@
             .k-colorgradient-canvas {
                 gap: $_canvas-spacing;
 
-                .k-hsv-gradient {
-                    height: $_rectangle-height;
-                }
-
-                .k-slider-vertical {
-                    height: $_vertical-slider-height;
-                }
-
                 .k-hsv-controls {
                     gap: $_canvas-spacing;
                 }

package/scss/colorgradient/_variables.scss

@@ -36,13 +36,13 @@ $kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-text: var( --kendo-component-text, initial ) !default;
+$kendo-color-gradient-text: k-color(on-app-surface) !default;
 /// The background color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-color-gradient-bg: k-color(surface-alt) !default;
 /// The border color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-border: var( --kendo-component-border, initial ) !default;
+$kendo-color-gradient-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The box shadow of the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
@@ -88,7 +88,7 @@ $kendo-color-gradient-lg-spacing: k-spacing(4.5) !default;
 
 /// The border color of the focused ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-focus-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-color-gradient-focus-border: color-mix(in srgb, k-color(border) 10%, transparent) !default;
 /// The box shadow of the focused ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -104,16 +104,7 @@ $kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
 $kendo-color-gradient-canvas-spacing: k-spacing(2) !default;
 /// The height the ColorGradient canvas hsv rectangle.
 /// @group color-gradient
-$kendo-color-gradient-canvas-rectangle-height: 180px !default;
-/// The height the small ColorGradient canvas hsv rectangle.
-/// @group color-gradient
-$kendo-color-gradient-sm-canvas-rectangle-height: 164px !default;
-/// The height the medium ColorGradient canvas hsv rectangle.
-/// @group color-gradient
-$kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
-/// The height the large ColorGradient canvas hsv rectangle.
-/// @group color-gradient
-$kendo-color-gradient-lg-canvas-rectangle-height: 256px !default;
+$kendo-color-gradient-canvas-rectangle-height: 100% !default;
 
 /// The spacing between the items of the small ColorGradient canvas.
 /// @group color-gradient
@@ -127,7 +118,7 @@ $kendo-color-gradient-lg-canvas-spacing: k-spacing(4) !default;
 
 /// The border color of the ColorGradient canvas hsv rectangle.
 /// @group color-gradient
-$kendo-color-gradient-canvas-rectangle-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-color-gradient-canvas-rectangle-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group color-gradient
 $kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
@@ -140,29 +131,20 @@ $kendo-color-gradient-slider-track-size: 20px !default;
 $kendo-color-gradient-slider-border-radius: k-border-radius(md) !default;
 /// The width of the border around the ColorGradient slider.
 /// @group color-gradient
-$kendo-color-gradient-slider-border-width: if($kendo-enable-color-system, 0, 1px) !default;
+$kendo-color-gradient-slider-border-width: 0 !default;
 /// The color of the border around the ColorGradient slider.
 /// @group color-gradient
-$kendo-color-gradient-slider-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-color-gradient-slider-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The height of the ColorGradient vertical slider.
 /// @group color-gradient
-$kendo-color-gradient-slider-vertical-size: 180px !default;
+$kendo-color-gradient-slider-vertical-size: 100% !default;
 /// The width of the ColorGradient horizontal slider.
 /// @group color-gradient
 $kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// The background image of the ColorGradient alpha slider.
 /// @group color-gradient
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
-/// The height of the small ColorGradient vertical slider.
-/// @group color-gradient
-$kendo-color-gradient-sm-slider-vertical-size: 164px !default;
-/// The height of the medium ColorGradient vertical slider.
-/// @group color-gradient
-$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
-/// The height of the large ColorGradient vertical slider.
-/// @group color-gradient
-$kendo-color-gradient-lg-slider-vertical-size: 256px !default;
 
 /// The width of the ColorGradient canvas drag handle.
 /// @group color-gradient
@@ -178,19 +160,19 @@ $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 color-gradient
-$kendo-color-gradient-draghandle-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-color-gradient-draghandle-border: k-color(app-surface) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group color-gradient
 $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 color-gradient
-$kendo-color-gradient-draghandle-focus-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-color-gradient-draghandle-focus-border: k-color(app-surface) !default;
 /// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-focus-shadow: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-color-gradient-draghandle-focus-shadow: k-color(base-emphasis) !default;
 /// The hover color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-hover-shadow: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-color-gradient-draghandle-hover-shadow: k-color(base-emphasis) !default;
 
 /// The vertical offset of the ColorGradient canvas drag handle.
 /// @group color-gradient
@@ -213,7 +195,7 @@ $kendo-color-gradient-input-label-font-size: var( --kendo-font-size-sm, inherit
 $kendo-color-gradient-input-label-spacing: calc( #{$kendo-color-gradient-spacer} / 4 ) !default;
 /// The text color of the ColorGradient input labels.
 /// @group color-gradient
-$kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-color-gradient-input-label-text: k-color(subtle) !default;
 
 /// The width of the small ColorGradient input.
 /// @group color-gradient
@@ -237,8 +219,6 @@ $kendo-color-gradient-contrast-spacing: calc( #{$kendo-color-gradient-spacer} /
 $kendo-color-gradient-sizes: (
     sm: (
         width: $kendo-color-gradient-sm-width,
-        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
-        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
         input-width: $kendo-color-gradient-sm-input-width,
         spacing: $kendo-color-gradient-sm-spacing,
         canvas-spacing: $kendo-color-gradient-sm-canvas-spacing,
@@ -247,8 +227,6 @@ $kendo-color-gradient-sizes: (
     ),
     md: (
         width: $kendo-color-gradient-md-width,
-        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
-        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
         input-width: $kendo-color-gradient-md-input-width,
         spacing: $kendo-color-gradient-md-spacing,
         canvas-spacing: $kendo-color-gradient-md-canvas-spacing,
@@ -257,8 +235,6 @@ $kendo-color-gradient-sizes: (
     ),
     lg: (
         width: $kendo-color-gradient-lg-width,
-        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
-        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
         input-width: $kendo-color-gradient-lg-input-width,
         spacing: $kendo-color-gradient-lg-spacing,
         canvas-spacing: $kendo-color-gradient-lg-canvas-spacing,

package/scss/colorpalette/_variables.scss

@@ -47,16 +47,16 @@ $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default
 
 /// The outline color of the ColorPalette focused tile.
 /// @group color-palette
-$kendo-color-palette-tile-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-color-palette-tile-focus-outline: k-color(base-emphasis) !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
-$kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px k-color(app-surface) !default;
 /// The outline color of the ColorPalette hovered tile.
 /// @group color-palette
-$kendo-color-palette-tile-hover-outline: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-color-palette-tile-hover-outline: color-mix(in srgb, k-color(border) 10%, transparent) !default;
 /// The shadow of the ColorPalette hovered tile.
 /// @group color-palette
-$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;
+$kendo-color-palette-tile-hover-shadow: inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px k-color(app-surface) !default;
 /// The outline color of the ColorPalette selected tile.
 /// @group color-palette
 $kendo-color-palette-tile-selected-outline: $kendo-color-palette-tile-hover-outline !default;

package/scss/column-menu/_variables.scss

@@ -44,4 +44,4 @@ $kendo-column-menu-sizes: (
 $kendo-group-menu-item-action-hover-bg: color-mix(in srgb, currentColor 5%, transparent) !default;
 $kendo-group-menu-item-action-selected-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 $kendo-group-menu-item-add-action-text: k-color(primary) !default;
-$kendo-group-menu-item-border: color-mix(in srgb, k-color( border ) 16%, transparent) !default;
+$kendo-group-menu-item-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;

package/scss/core/_index.scss

@@ -19,13 +19,9 @@
 @use "./motion/_index.scss" as *;
 
 @forward "@progress/kendo-theme-core/scss/index.scss" with (
-    $kendo-enable-color-system: $kendo-enable-color-system !default,
-    $kendo-nested-disabled: false !default,
     // Color System
     $_default-colors: $kendo-colors,
     $kendo-colors: $kendo-colors !default,
-    // Legacy Color System
-    $kendo-palettes: $kendo-palettes !default,
     // Elevation
     $_default-elevation: $kendo-elevation,
     $kendo-elevation: $kendo-elevation !default,
@@ -50,4 +46,11 @@
     $kendo-transition: $kendo-transition !default,
 );
 
-@forward "./color-system/_swatch-legacy.scss";
+// Global disabled styles
+:root {
+    --kendo-disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
+    --kendo-disabled-bg: var(--kendo-color-base-subtle, #edebe9);
+    --kendo-disabled-border: transparent;
+    --kendo-disabled-opacity: unset;
+    --kendo-disabled-filter: unset;
+}

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

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

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

@@ -1,9 +1,5 @@
 @use "sass:map";
 @use "./palettes.scss" as *;
-@forward "./palettes.scss";
-
-// Config
-$kendo-enable-color-system: true !default;
 
 // Colors
 $_default-colors: (

package/scss/dataviz/_layout.scss

@@ -398,12 +398,12 @@
 
     // export variables to allow use in scripts
     $exported: (
-        primary-contrast: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white),
-        base: $kendo-component-bg,
-        background: $kendo-component-bg,
+        primary-contrast: k-color(app-surface),
+        base: k-color(surface-alt),
+        background: k-color(surface-alt),
 
-        normal-background: $kendo-component-bg,
-        normal-text-color: $kendo-component-text,
+        normal-background: k-color(surface-alt),
+        normal-text-color: k-color(on-app-surface),
 
         series-a: $kendo-series-a,
         series-b: $kendo-series-b,
@@ -444,7 +444,7 @@
         series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-series-f,
-        gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-30 )),
+        gauge-track: k-color(base-emphasis),
 
         chart-font-size: $kendo-chart-font-size,
         chart-title-font-size: $kendo-chart-title-font-size,
@@ -486,7 +486,7 @@
     }
 
     $_css-vars: (
-        chart-primary-contrast: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white),
+        chart-primary-contrast: k-color(app-surface),
         chart-bg: $kendo-chart-bg,
         chart-text: $kendo-chart-text,
 
@@ -540,7 +540,7 @@
         chart-series-30: $kendo-series-30,
 
         chart-gauge-pointer: $kendo-series-f,
-        chart-gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-30 ))
+        chart-gauge-track: k-color(base-emphasis)
 
     );
 

package/scss/dataviz/_theme.scss

@@ -68,7 +68,7 @@
     }
 
     .k-mask {
-        background-color: var( --kendo-component-bg, initial );
+        background-color: k-color(surface-alt);
         opacity: .8;
     }
 
@@ -99,10 +99,10 @@
 
         // Leaf
         .k-leaf {
-            @include fill( $color: var( --kendo-component-bg, initial ) );
+            @include fill( $color: k-color(surface-alt) );
         }
         .k-leaf.k-inverse {
-            @include fill( $color: var( --kendo-component-text, initial ) );
+            @include fill( $color: k-color(on-app-surface) );
         }
         .k-leaf:hover,
         .k-leaf.k-hover {