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

package/scss/card/_variables.scss

@@ -34,13 +34,13 @@ $kendo-card-deck-gap: k-spacing(4) !default;
 
 /// The background color of the Card.
 /// @group card
-$kendo-card-bg: $kendo-component-bg !default;
+$kendo-card-bg: k-color(surface-alt) !default;
 /// The text color of the Card.
 /// @group card
-$kendo-card-text: $kendo-component-text !default;
+$kendo-card-text: k-color(on-app-surface) !default;
 /// The border color of the Card.
 /// @group card
-$kendo-card-border: $kendo-component-border !default;
+$kendo-card-border: k-color(border) !default;
 /// The shadow of the Card.
 /// @group card
 $kendo-card-shadow: null !default;
@@ -75,10 +75,10 @@ $kendo-card-header-border-width: 1px !default;
 $kendo-card-header-bg: null !default;
 /// The text color of the Card header.
 /// @group card
-$kendo-card-header-text: $kendo-component-header-text !default;
+$kendo-card-header-text: k-color(on-app-surface) !default;
 /// The border color of the Card header.
 /// @group card
-$kendo-card-header-border: $kendo-component-header-border !default;
+$kendo-card-header-border: k-color(border) !default;
 
 /// The horizontal padding of the Card body.
 /// @group card
@@ -101,10 +101,10 @@ $kendo-card-footer-border-width: 1px !default;
 $kendo-card-footer-bg: null !default;
 /// The text color of the Card footer.
 /// @group card
-$kendo-card-footer-text: $kendo-component-header-text !default;
+$kendo-card-footer-text: k-color(on-app-surface) !default;
 /// The border color of the Card footer.
 /// @group card
-$kendo-card-footer-border: $kendo-component-header-border !default;
+$kendo-card-footer-border: k-color(border) !default;
 
 /// The bottom margin of the Card title.
 /// @group card
@@ -145,7 +145,7 @@ $kendo-card-subtitle-font-weight: var( --kendo-font-weight-normal, normal ) !def
 $kendo-card-subtitle-letter-spacing: null !default;
 /// The text color of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-text: $kendo-subtle-text !default;
+$kendo-card-subtitle-text: k-color(subtle) !default;
 
 /// The maximum width of the Card image.
 /// @group card
@@ -184,6 +184,19 @@ $kendo-card-callout-width: 20px !default;
 /// @group card
 $kendo-card-callout-height: 20px !default;
 
+$kendo-card-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with (
     $kendo-card-padding-x: $kendo-card-padding-x,
     $kendo-card-padding-y: $kendo-card-padding-y,
@@ -239,5 +252,6 @@ $kendo-card-callout-height: 20px !default;
     $kendo-card-deck-scroll-button-radius: $kendo-card-deck-scroll-button-radius,
     $kendo-card-deck-scroll-button-offset: $kendo-card-deck-scroll-button-offset,
     $kendo-card-callout-width: $kendo-card-callout-width,
-    $kendo-card-callout-height: $kendo-card-callout-height
+    $kendo-card-callout-height: $kendo-card-callout-height,
+    $kendo-card-theme-colors: $kendo-card-theme-colors
 );

package/scss/chart-wizard/_variables.scss

@@ -5,10 +5,10 @@
 
 /// The color of the area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+$kendo-chart-wizard-icon-area-color: k-color(primary) !default;
 /// The background color of the area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color(primary-subtle), k-try-tint( $kendo-color-primary, 80% )) !default;
+$kendo-chart-wizard-icon-area-bg: k-color(primary-subtle) !default;
 /// The border radius of the area around the chart type icon.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-area-border-radius: k-border-radius(md) !default;
@@ -17,14 +17,14 @@ $kendo-chart-wizard-icon-area-border-radius: k-border-radius(md) !default;
 $kendo-chart-wizard-icon-area-padding: k-spacing(4) !default;
 /// The box shadow of the focused area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color(primary-emphasis), k-try-tint( $kendo-color-primary, 25% )) !default;
+$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px k-color(primary-emphasis) !default;
 /// The box shadow of the selected area around the chart type icon.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default;
 
 /// The color of the selected chart type items in the Property panel.
 /// @group chart-wizard
-$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color(primary), $kendo-color-primary) !default;
+$kendo-chart-wizard-chart-type-selected-color: k-color(primary) !default;
 
 /// The padding of the preview pane.
 /// @group chart-wizard

package/scss/chat/_variables.scss

@@ -57,7 +57,7 @@ $kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !defaul
 $kendo-chat-timestamp-transform: uppercase !default;
 /// The text color of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-text: $kendo-subtle-text !default;
+$kendo-chat-timestamp-text: k-color(subtle) !default;
 /// The background color of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-bg: null !default;
@@ -138,20 +138,20 @@ $kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
 
 /// The background color of the Chat.
 /// @group chat
-$kendo-chat-bg: $kendo-app-bg !default;
+$kendo-chat-bg: k-color(surface) !default;
 /// The text color of the Chat.
 /// @group chat
-$kendo-chat-text: $kendo-app-text !default;
+$kendo-chat-text: k-color(on-app-surface) !default;
 /// The border color of the Chat.
 /// @group chat
-$kendo-chat-border: $kendo-app-border !default;
+$kendo-chat-border: k-color(border) !default;
 
 /// The background color of the Chat bubble.
 /// @group chat
-$kendo-chat-bubble-bg: $kendo-component-bg !default;
+$kendo-chat-bubble-bg: k-color(surface-alt) !default;
 /// The text color of the Chat bubble.
 /// @group chat
-$kendo-chat-bubble-text: $kendo-component-text !default;
+$kendo-chat-bubble-text: k-color(on-app-surface) !default;
 /// The border color of the Chat bubble.
 /// @group chat
 $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
@@ -167,10 +167,10 @@ $kendo-chat-bubble-selected-shadow: k-elevation(3) !default;
 
 /// The background color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
+$kendo-chat-alt-bubble-bg: k-color(primary) !default;
 /// The text color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) !default;
+$kendo-chat-alt-bubble-text: k-color(on-primary) !default;
 /// The border color of the Chat alt bubble.
 /// @group chat
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
@@ -189,20 +189,20 @@ $kendo-chat-alt-bubble-selected-shadow: k-elevation(3) !default;
 $kendo-chat-quick-reply-bg: transparent !default;
 /// The text color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-text: $kendo-color-primary !default;
+$kendo-chat-quick-reply-text: k-color(primary) !default;
 /// The border color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-border: k-color(primary) !default;
 
 /// The background color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-bg: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-bg: k-color(primary) !default;
 /// The text color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default;
+$kendo-chat-quick-reply-hover-text: k-color(on-primary) !default;
 /// The border color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-border: k-color(primary) !default;
 
 /// The shadow blur of the focused Chat quick reply.
 /// @group chat

package/scss/checkbox/_variables.scss

@@ -60,13 +60,13 @@ $kendo-checkbox-sizes: (
 
 /// The background color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-bg: $kendo-component-bg !default;
+$kendo-checkbox-bg: k-color(surface-alt) !default;
 /// The text color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-text: null !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: $kendo-component-border !default;
+$kendo-checkbox-border: k-color(border) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -80,10 +80,10 @@ $kendo-checkbox-hover-border: null !default;
 
 /// The background color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: $kendo-color-primary !default;
+$kendo-checkbox-checked-bg: k-color(primary) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) !default;
+$kendo-checkbox-checked-text: k-color(on-primary) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -109,7 +109,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
 $kendo-checkbox-focus-checked-border: null !default;
 /// The box shadow of the focused and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px color-mix(in srgb, k-color(primary) 30%, transparent) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox
@@ -136,10 +136,10 @@ $kendo-checkbox-disabled-checked-border: null !default;
 $kendo-checkbox-invalid-bg: null !default;
 /// The text color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
+$kendo-checkbox-invalid-text: k-color(error) !default;
 /// The border color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: $kendo-invalid-border !default;
+$kendo-checkbox-invalid-border: k-color(error) !default;
 
 
 // CheckBox indicator

package/scss/chip/_variables.scss

@@ -39,6 +39,10 @@ $kendo-chip-md-padding-y: $kendo-chip-padding-y !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 Chip.
 /// @group chip
 $kendo-chip-font-size: var( --kendo-font-size, inherit ) !default;
@@ -95,16 +99,16 @@ $kendo-chip-sizes: (
 
 /// The base background of the Chip.
 /// @group chip
-$kendo-chip-base-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) !default;
+$kendo-chip-base-bg: k-color(base-subtle) !default;
 
 /// The theme colors map for the Chip.
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map.get($kendo-theme-colors, "error"),
-    "info": map.get($kendo-theme-colors, "info"),
-    "warning": map.get($kendo-theme-colors, "warning"),
-    "success": map.get($kendo-theme-colors, "success")
+    "error": k-color(error),
+    "info": k-color(info),
+    "warning": k-color(warning),
+    "success": k-color(success)
 ) !default;
 
 /// The base background color of the solid Chip.
@@ -118,7 +122,7 @@ $kendo-chip-solid-text: $kendo-button-text !default;
 $kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of the solid Chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -132,7 +136,7 @@ $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of the hovered solid Chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) !default;
+$kendo-chip-solid-hover-bg: k-color(base-subtle-hover) !default;
 /// The base text color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
@@ -146,23 +150,23 @@ $kendo-chip-solid-selected-text: null !default;
 
 /// The base background color of the outline Chip.
 /// @group chip
-$kendo-chip-outline-bg: $kendo-component-bg !default;
+$kendo-chip-outline-bg: k-color(surface-alt) !default;
 /// The base text color of the outline Chip.
 /// @group chip
-$kendo-chip-outline-text: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) !default;
+$kendo-chip-outline-text: k-color(base-on-surface) !default;
 /// The base border color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of the outline Chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip
 $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
 /// The base text color of the hovered outline Chip.
 /// @group chip
-$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default;
+$kendo-chip-outline-hover-text: k-color(base) !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip
@@ -171,6 +175,17 @@ $kendo-chip-outline-selected-bg: $kendo-chip-outline-hover-bg !default;
 /// @group chip
 $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 
+/// The base background color of the disabled Chip.
+/// @group chip
+$kendo-chip-disabled-bg: null !default;
+/// The base text color of the disabled Chip.
+/// @group chip
+$kendo-chip-disabled-text: null !default;
+/// The base border color of the disabled Chip.
+/// @group chip
+$kendo-chip-disabled-border: $kendo-chip-disabled-bg !default;
+
+
 // Chip List
 
 /// The sizes of the Chip list.
@@ -192,6 +207,7 @@ $kendo-chip-list-sizes: (
     $kendo-chip-sm-padding-y: $kendo-chip-sm-padding-y,
     $kendo-chip-md-padding-y: $kendo-chip-md-padding-y,
     $kendo-chip-lg-padding-y: $kendo-chip-lg-padding-y,
+    $kendo-chip-font-weight: $kendo-chip-font-weight,
     $kendo-chip-font-size: $kendo-chip-font-size,
     $kendo-chip-sm-font-size: $kendo-chip-sm-font-size,
     $kendo-chip-md-font-size: $kendo-chip-md-font-size,
@@ -224,5 +240,8 @@ $kendo-chip-list-sizes: (
     $kendo-chip-outline-hover-text: $kendo-chip-outline-hover-text,
     $kendo-chip-outline-selected-bg: $kendo-chip-outline-selected-bg,
     $kendo-chip-outline-selected-text: $kendo-chip-outline-selected-text,
+    $kendo-chip-disabled-bg: $kendo-chip-disabled-bg,
+    $kendo-chip-disabled-text: $kendo-chip-disabled-text,
+    $kendo-chip-disabled-border: $kendo-chip-disabled-border,
     $kendo-chip-list-sizes: $kendo-chip-list-sizes
 );

package/scss/color-preview/_variables.scss

@@ -6,11 +6,11 @@ $kendo-color-preview-border-radius: k-border-radius(md)!default;
 $kendo-color-preview-border-width: 1px !default;
 $kendo-color-preview-bg: null !default;
 $kendo-color-preview-text: null !default;
-$kendo-color-preview-border: $kendo-component-border !default;
-$kendo-color-preview-hover-border: $kendo-hover-border !default;
+$kendo-color-preview-border: k-color(border) !default;
+$kendo-color-preview-hover-border: k-color(border) !default;
 
 $kendo-color-preview-no-color-bg: $kendo-color-white !default;
-$kendo-color-preview-no-color-text: $kendo-color-error !default;
+$kendo-color-preview-no-color-text: k-color(error) !default;
 $kendo-color-preview-no-color-border: null !default;
 
 $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$kendo-color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;

package/scss/coloreditor/_variables.scss

@@ -35,13 +35,13 @@ $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: $kendo-component-text !default;
+$kendo-color-editor-text: k-color(on-app-surface) !default;
 /// The background color of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-bg: $kendo-component-bg !default;
+$kendo-color-editor-bg: k-color(surface-alt) !default;
 /// The border color of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-border: $kendo-component-border !default;
+$kendo-color-editor-border: k-color(border) !default;
 
 /// The border color of the focused ColorEditor.
 /// @group color-editor
@@ -81,13 +81,13 @@ $kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
 
 /// The width of the ColorEditor preview.
 /// @group color-editor
-$kendo-color-editor-color-preview-width: 32px !default;
+$kendo-color-editor-color-preview-width: 34px !default;
 /// The height of the ColorEditor preview.
 /// @group color-editor
-$kendo-color-editor-color-preview-height: 12px !default;
+$kendo-color-editor-color-preview-height: 14px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group color-editor
-$kendo-color-editor-preview-gap: k-spacing(1) !default;
+$kendo-color-editor-preview-gap: k-spacing(0.5) !default;
 /// The spacing between the colors in the small ColorEditor preview.
 /// @group color-editor
 $kendo-color-editor-sm-preview-gap: k-spacing(0.5) !default;

package/scss/colorgradient/_variables.scss

@@ -36,13 +36,13 @@ $kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-text: $kendo-component-text !default;
+$kendo-color-gradient-text: k-color(on-app-surface) !default;
 /// The background color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-bg: $kendo-component-bg !default;
+$kendo-color-gradient-bg: k-color(surface-alt) !default;
 /// The border color of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-border: $kendo-component-border !default;
+$kendo-color-gradient-border: k-color(border) !default;
 
 /// The vertical padding of the small ColorGradient.
 /// @group color-gradient
@@ -98,16 +98,7 @@ $kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
 $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !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: $kendo-color-gradient-canvas-rectangle-height !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: 268px !default;
+$kendo-color-gradient-canvas-rectangle-height: 100% !default;
 
 /// The spacing between the items of the small ColorGradient canvas.
 /// @group color-gradient
@@ -131,22 +122,13 @@ $kendo-color-gradient-slider-draghandle-border-width: 3px !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: $kendo-color-gradient-slider-vertical-size !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: 268px !default;
 
 /// The width of the ColorGradient canvas drag handle.
 /// @group color-gradient
@@ -200,7 +182,7 @@ $kendo-color-gradient-input-gap: k-spacing(2) !default;
 $kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3 ) !default;
 /// The text color of the ColorGradient input labels.
 /// @group color-gradient
-$kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
+$kendo-color-gradient-input-label-text: k-color(subtle) !default;
 
 /// The width of the small ColorGradient input.
 /// @group color-gradient
@@ -224,8 +206,6 @@ $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1
 $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,
         gap: $kendo-color-gradient-sm-gap,
         canvas-gap: $kendo-color-gradient-sm-canvas-gap,
@@ -234,8 +214,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,
         gap: $kendo-color-gradient-md-gap,
         canvas-gap: $kendo-color-gradient-md-canvas-gap,
@@ -244,8 +222,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,
         gap: $kendo-color-gradient-lg-gap,
         canvas-gap: $kendo-color-gradient-lg-canvas-gap,
@@ -279,9 +255,6 @@ $kendo-color-gradient-sizes: (
     $kendo-color-gradient-canvas-border-radius: $kendo-color-gradient-canvas-border-radius,
     $kendo-color-gradient-canvas-gap: $kendo-color-gradient-canvas-gap,
     $kendo-color-gradient-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height,
-    $kendo-color-gradient-sm-canvas-rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
-    $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
-    $kendo-color-gradient-lg-canvas-rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
     $kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-sm-canvas-gap,
     $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-md-canvas-gap,
     $kendo-color-gradient-lg-canvas-gap: $kendo-color-gradient-lg-canvas-gap,
@@ -297,9 +270,6 @@ $kendo-color-gradient-sizes: (
     $kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-slider-vertical-size,
     $kendo-color-gradient-slider-horizontal-size: $kendo-color-gradient-slider-horizontal-size,
     $kendo-color-gradient-slider-alpha-bgr: $kendo-color-gradient-slider-alpha-bgr,
-    $kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-slider-vertical-size,
-    $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-slider-vertical-size,
-    $kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-slider-vertical-size,
     $kendo-color-gradient-draghandle-width: $kendo-color-gradient-draghandle-width,
     $kendo-color-gradient-draghandle-height: $kendo-color-gradient-draghandle-height,
     $kendo-color-gradient-draghandle-border-width: $kendo-color-gradient-draghandle-border-width,

package/scss/core/_index.scss

@@ -4,6 +4,11 @@
 // Variables
 @forward "../_variables.scss";
 
-// Color System Backward Compatibility
-@forward "./color-system/_swatch-legacy.scss";
-
+// Global disabled styles
+:root {
+    --kendo-disabled-text: unset;
+    --kendo-disabled-bg: unset;
+    --kendo-disabled-border: unset;
+    --kendo-disabled-opacity: .6;
+    --kendo-disabled-filter: grayscale(.1);
+}