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

package/scss/loader/_variables.scss

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

package/scss/map/_variables.scss

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

package/scss/mediaplayer/_variables.scss

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

package/scss/menu/_variables.scss

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

package/scss/notification/_variables.scss

@@ -57,21 +57,21 @@ $kendo-notification-brand-colors: (
     warning: warning,
     success: success,
     info: info,
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
 ) !default;
 
 // Matrix with notification theme colors in the order: bg, color, border
 $_tc-notification-matrix: (
-    (normal: (20, 190, 20)),
+    (normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, 190, 20))),
 ) !default;
 
 $_tc-notification-dark-matrix: (
-    (normal: (160, $kendo-color-white, 160)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
 ) !default;
 
 $_tc-notification-light-matrix: (
-    (normal: (50, 160, 50)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
 ) !default;
 
 /// The theme colors map for the Notification variations.
@@ -90,13 +90,13 @@ $kendo-notification-theme-colors: () !default;
 @each $ui-states in $_tc-notification-dark-matrix {
     $kendo-notification-theme-colors: map.deep-merge(
         $kendo-notification-theme-colors,
-        k-generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $ui-states in $_tc-notification-light-matrix {
     $kendo-notification-theme-colors: map.deep-merge(
         $kendo-notification-theme-colors,
-        k-generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }

package/scss/orgchart/_variables.scss

@@ -54,13 +54,13 @@ $kendo-orgchart-node-group-border-width: 1px !default;
 $kendo-orgchart-node-group-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// Background color of the orgchart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-orgchart-node-group-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// Text color of the orgchart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-orgchart-node-group-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// Border color of the orgchart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-orgchart-node-group-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 /// Focus border color of the orgchart node group.
 /// @group orgchart
 $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
@@ -146,7 +146,7 @@ $kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
 $kendo-orgchart-line-size: 1px !default;
 /// Fill color of the orgchart connecting line.
 /// @group orgchart
-$kendo-orgchart-line-text: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-orgchart-line-text: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 /// Height of the orgchart connecting line.
 /// @group orgchart
 $kendo-orgchart-line-v-height: 25px !default;

package/scss/pager/_variables.scss

@@ -43,7 +43,7 @@ $kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Pager.
 /// @group pager
-$kendo-pager-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-pager-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The text color of the Pager.
 /// @group pager
 $kendo-pager-text: var( --kendo-component-text, inherit ) !default;
@@ -59,7 +59,7 @@ $kendo-pager-focus-bg: var( --kendo-pager-bg, #{$kendo-pager-bg}) !default;
 $kendo-pager-focus-text: var( --kendo-pager-text, #{$kendo-pager-text}) !default;
 /// The border color of the focused Pager.
 /// @group pager
-$kendo-pager-focus-border: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-pager-focus-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The border radius of the Pager items.
 /// @group pager
@@ -80,11 +80,11 @@ $kendo-pager-lg-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// The text color of the Pagers' sizes label.
 /// @group pager
-$kendo-pager-sizes-label-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-pager-sizes-label-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 
 /// The text color of the Pagers' info label.
 /// @group pager
-$kendo-pager-info-label-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-pager-info-label-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The width of the Inputs in the Pager.
 /// @group pager

package/scss/panelbar/_variables.scss

@@ -80,7 +80,7 @@ $kendo-panelbar-header-border: inherit !default;
 $kendo-panelbar-header-hover-bg: var( --kendo-hover-bg, inherit ) !default;
 /// Text color of the panelbar header when hovered.
 /// @group panelbar
-$kendo-panelbar-header-hover-text: k-get-theme-color-var( primary-110 ) !default;
+$kendo-panelbar-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 /// Border color of the panelbar header when hovered.
 /// @group panelbar
 $kendo-panelbar-header-hover-border: inherit !default;
@@ -113,13 +113,13 @@ $kendo-panelbar-header-hover-focus-border: null !default;
 $kendo-panelbar-header-selected-bg: var( --kendo-selected-bg, inherit ) !default;
 /// Text color of the panelbar header when selected.
 /// @group panelbar
-$kendo-panelbar-header-selected-text: $kendo-color-black !default;
+$kendo-panelbar-header-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 /// Border color of the panelbar header when selected.
 /// @group panelbar
 $kendo-panelbar-header-selected-border: inherit !default;
 /// Color of the marker of the panelbar header when selected.
 /// @group panelbar
-$kendo-panelbar-selected-marker: k-get-theme-color-var( primary-100 ) !default;
+$kendo-panelbar-selected-marker: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Background color of the panelbar header when selected and hovered.
 /// @group panelbar
@@ -166,7 +166,7 @@ $kendo-panelbar-header-expanded-border: inherit !default;
 $kendo-panelbar-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
 /// Text color of the panelbar item when hovered.
 /// @group panelbar
-$kendo-panelbar-item-hover-text: k-get-theme-color-var( primary-110 ) !default;
+$kendo-panelbar-item-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 /// Border color of the panelbar item when hovered.
 /// @group panelbar
 $kendo-panelbar-item-hover-border: inherit !default;
@@ -199,7 +199,7 @@ $kendo-panelbar-item-hover-focus-border: inherit !default;
 $kendo-panelbar-item-selected-bg: var( --kendo-selected-bg, inherit ) !default;
 /// Text color of the panelbar item when selected.
 /// @group panelbar
-$kendo-panelbar-item-selected-text: $kendo-color-black !default;
+$kendo-panelbar-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 /// Border color of the panelbar item when selected.
 /// @group panelbar
 $kendo-panelbar-item-selected-border: inherit !default;

package/scss/pdf-viewer/_variables.scss

@@ -27,8 +27,8 @@ $kendo-pdf-viewer-border: var( --kendo-component-border, initial ) !default;
 
 /// The background color of the PDFViewer canvas.
 /// @group pdf-viewer
-$kendo-pdf-viewer-canvas-bg: k-get-theme-color-var( neutral-10 ) !default;
-/// The text color of the PDFViewer canvas.
+$kendo-pdf-viewer-canvas-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+/// Text color of the PDF viewer canvas.
 /// @group pdf-viewer
 $kendo-pdf-viewer-canvas-text: var( --kendo-component-text, inherit ) !default;
 /// The border color of the PDFViewer canvas.

package/scss/pivotgrid/_variables.scss

@@ -66,14 +66,14 @@ $kendo-pivotgrid-cell-border-width: 1px !default;
 $kendo-pivotgrid-headers-bg: var( --kendo-component-bg, inherit ) !default;
 /// Text color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-pivotgrid-headers-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// Border color of the PivotGrid header.
 /// @group pivotgrid
 $kendo-pivotgrid-headers-border: var( --kendo-component-border, inherit ) !default;
 
 /// Background color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) !default;
 /// Text color of the PivotGrid total cells.
 /// @group pivotgrid
 $kendo-pivotgrid-total-text: var( --kendo-component-text, inherit ) !default;
@@ -157,7 +157,7 @@ $kendo-pivotgrid-configurator-horizontal-height: 420px !default;
 $kendo-pivotgrid-configurator-bg: var( --kendo-component-bg, inherit ) !default;
 /// Text color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-pivotgrid-configurator-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// Border color of the PivotGrid configurator.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-border: var( --kendo-component-border, inherit )!default;

package/scss/progressbar/_variables.scss

@@ -34,7 +34,7 @@ $kendo-progressbar-padding-y: 0 !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: var( --kendo-component-text, initial ) !default;
@@ -47,7 +47,7 @@ $kendo-progressbar-gradient: null !default;
 
 /// The progress background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-progressbar-value-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-text: var( --kendo-component-text, initial ) !default;
@@ -67,33 +67,33 @@ $kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size
 
 /// The background color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-disabled-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-progressbar-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) !default;
 /// The text color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-progressbar-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
 /// The border color of the disabled ProgressBar.
 /// @group progressbar
 $kendo-progressbar-disabled-border: $kendo-progressbar-disabled-bg !default;
 
 /// The progress background color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-disabled-bg: k-get-theme-color-var( primary-30 ) !default;
+$kendo-progressbar-value-disabled-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 )) !default;
 
 /// The background color of the indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-bg: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-progressbar-indeterminate-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) !default;
 /// The text color of the indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-text: $kendo-progressbar-text !default;
 /// The border color of the indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-border: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-progressbar-indeterminate-border: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) !default;
 /// The background gradient of the horizontal indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-gradient-horizontal: linear-gradient(270deg, k-get-theme-color-var( neutral-30 ) 15%, k-get-theme-color-var( primary-100 ) 50%, k-get-theme-color-var( neutral-30 ) 85%) !default;
+$kendo-progressbar-indeterminate-gradient-horizontal: linear-gradient(270deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%) !default;
 /// The background gradient of the vertical indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-gradient-vertical: linear-gradient(180deg, k-get-theme-color-var( neutral-30 ) 15%, k-get-theme-color-var( primary-100 ) 50%, k-get-theme-color-var( neutral-30 ) 85%) !default;
+$kendo-progressbar-indeterminate-gradient-vertical: linear-gradient(180deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%) !default;
 /// The gradient size of the horizontal indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-animation-horizontal: 3s ease 0s infinite running progressbar-indeterminate-animation-horizontal !default;
@@ -108,7 +108,7 @@ $kendo-progressbar-chunk-border: var( --kendo-body-bg, initial ) !default;
 // Circular Progressbar
 /// The arc stroke color of the circular ProgressBar.
 /// @group progressbar
-$kendo-circular-progressbar-arc-stroke: k-get-theme-color-var( primary-100 ) !default;
+$kendo-circular-progressbar-arc-stroke: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;

package/scss/radio/_variables.scss

@@ -44,14 +44,14 @@ $kendo-radio-bg: $kendo-component-bg !default;
 $kendo-radio-text: transparent !default;
 /// The border color of the RadioButton.
 /// @group radio
-$kendo-radio-border: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-radio-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
 
 /// The background color of the hovered RadioButton.
 /// @group radio
 $kendo-radio-hover-bg: $kendo-radio-bg !default;
 /// The color of the hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-text: k-get-theme-color( neutral, 130 ) !default;
+$kendo-radio-hover-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 )) !default;
 /// The border color of the hovered RadioButton.
 /// @group radio
 $kendo-radio-hover-border: $kendo-radio-border !default;
@@ -61,20 +61,20 @@ $kendo-radio-hover-border: $kendo-radio-border !default;
 $kendo-radio-checked-bg: $kendo-radio-bg !default;
 /// The color of the checked RadioButton.
 /// @group radio
-$kendo-radio-checked-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-radio-checked-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The border color of the checked RadioButton.
 /// @group radio
-$kendo-radio-checked-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-radio-checked-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The background color of the checked and hovered RadioButton.
 /// @group radio
 $kendo-radio-hover-checked-bg: $kendo-radio-bg !default;
 /// The color of the checked and hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-checked-text: k-get-theme-color-var( primary-110 ) !default;
+$kendo-radio-hover-checked-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 /// The border color of the checked and hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-checked-border: k-get-theme-color-var( primary-110 ) !default;
+$kendo-radio-hover-checked-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 
 /// The border color of the focused RadioButton.
 /// @group radio
@@ -84,7 +84,7 @@ $kendo-radio-focus-border: null !default;
 $kendo-radio-focus-shadow: null !default;
 /// The outline of the focused RadioButton.
 /// @group radio
-$kendo-radio-focus-outline: 1px solid k-get-theme-color-var( neutral-130 ) !default;
+$kendo-radio-focus-outline: 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The outline offset of the focused RadioButton.
 /// @group radio
 $kendo-radio-focus-outline-offset: 2px !default;
@@ -94,10 +94,10 @@ $kendo-radio-focus-outline-offset: 2px !default;
 $kendo-radio-disabled-bg: $kendo-radio-bg !default;
 /// The color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-text: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-radio-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 RadioButton.
 /// @group radio
-$kendo-radio-disabled-border: k-get-theme-color-var( neutral-60 ) !default;
+$kendo-radio-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 RadioButton.
 /// @group radio
@@ -171,7 +171,7 @@ $kendo-radio-list-item-gap: map.get( $kendo-spacing, 2 ) !default;
 
 /// The background color of the RadioButton ripple.
 /// @group radio
-$kendo-radio-ripple-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-radio-ripple-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The opacity of the RadioButton ripple.
 /// @group radio
 $kendo-radio-ripple-opacity: .25 !default;

package/scss/rating/_variables.scss

@@ -23,10 +23,10 @@ $kendo-rating-item-padding-x: map.get( $kendo-spacing, 0.5 ) !default;
 $kendo-rating-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// The text color of the Rating item.
 /// @group rating
-$kendo-rating-item-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-rating-item-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 /// The text color of the hovered Rating item.
 /// @group rating
-$kendo-rating-item-hover-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-rating-item-hover-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The text color of the focused Rating item.
 /// @group rating
 $kendo-rating-item-focus-text: $kendo-rating-item-text !default;
@@ -41,7 +41,7 @@ $kendo-rating-item-focus-outline-style: solid !default;
 $kendo-rating-item-focus-outline: currentColor !default;
 /// The text color of the selected Rating item.
 /// @group rating
-$kendo-rating-item-selected-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-rating-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// The text color of the selected and hovered Rating item.
 /// @group rating
-$kendo-rating-item-selected-hover-text: k-get-theme-color-var( primary-120 ) !default;
+$kendo-rating-item-selected-hover-text: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;

package/scss/scheduler/_theme.scss

@@ -227,7 +227,7 @@
         }
 
         .k-tooltip-title .k-day {
-            color: k-get-theme-color-var( primary-130 );
+            color: if($kendo-enable-color-system, k-color( primary-emphasis ), k-get-theme-color-var( primary-130 ));
         }
     }
 }

package/scss/scheduler/_variables.scss

@@ -28,7 +28,7 @@ $kendo-scheduler-border: var( --kendo-component-border, initial ) !default;
 
 /// Background color of the selected row in scheduler.
 /// @group scheduler
-$kendo-scheduler-selected-bg: k-get-theme-color-var( primary-20 ) !default;
+$kendo-scheduler-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 )) !default;
 /// Text color of the selected row in scheduler.
 /// @group scheduler
 $kendo-scheduler-selected-text: $kendo-scheduler-text !default;
@@ -80,10 +80,10 @@ $kendo-scheduler-event-min-height: calc( #{$kendo-scheduler-line-height} + 2 * #
 
 /// Background color of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Text color of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-text: $kendo-color-white !default;
+$kendo-scheduler-event-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Border color of the scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border: $kendo-scheduler-event-bg !default;
@@ -112,7 +112,7 @@ $kendo-scheduler-event-hover-shadow: null !default;
 
 /// Background color of the selected scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-bg: k-get-theme-color-var( primary-120 ) !default;
+$kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
 /// Text color of the selected scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-selected-text: $kendo-scheduler-event-text !default;
@@ -148,7 +148,7 @@ $kendo-scheduler-timecolumn-width: 11em !default;
 
 /// Background color of the non-working hours in the scheduler.
 /// @group scheduler
-$kendo-scheduler-nonwork-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// Text color of the non-working hours in the scheduler.
 /// @group scheduler
 $kendo-scheduler-nonwork-text: null !default;
@@ -162,7 +162,7 @@ $kendo-scheduler-weekend-text: null !default;
 
 /// Background color of the other months in the scheduler.
 /// @group scheduler
-$kendo-scheduler-othermonth-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// Text color of the other months in the scheduler.
 /// @group scheduler
 $kendo-scheduler-othermonth-text: null !default;
@@ -192,10 +192,10 @@ $kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - (#{$kendo-sche
 $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
 /// Background color of the days with events indicator in the scheduler year view.
 /// @group scheduler
-$kendo-scheduler-yearview-indicator-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-scheduler-yearview-indicator-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Background color of the selected days with events indicator in the scheduler year view.
 /// @group scheduler
-$kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-white !default;
+$kendo-scheduler-yearview-indicator-selected-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// Horizontal padding of the scheduler tooltip.
 /// @group scheduler
@@ -208,10 +208,10 @@ $kendo-scheduler-tooltip-padding-y: $kendo-scheduler-tooltip-padding-x !default;
 $kendo-scheduler-tooltip-border-width: 0 !default;
 /// Background color of the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-bg: $kendo-color-white !default;
+$kendo-scheduler-tooltip-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// Text color of the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-text: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-scheduler-tooltip-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
 /// Border color of the scheduler tooltip.
 /// @group scheduler
 $kendo-scheduler-tooltip-border: null !default;
@@ -263,4 +263,4 @@ $kendo-scheduler-more-btn-height: 13px !default;
 
 /// Color of the scheduler marquee.
 /// @group scheduler
-$kendo-scheduler-marquee-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-scheduler-marquee-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/scrollview/_variables.scss

@@ -29,28 +29,28 @@ $kendo-scrollview-border: var( --kendo-component-border, inherit ) !default;
 $kendo-scrollview-pagebutton-size: 10px !default;
 /// The background color of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-bg: $kendo-color-white !default;
+$kendo-scrollview-pagebutton-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The border color of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-border: $kendo-scrollview-pagebutton-bg !default;
 /// The primary background color of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-scrollview-pagebutton-primary-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The primary border color of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-primary-border: $kendo-scrollview-pagebutton-primary-bg !default;
 /// The hover box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-hover-shadow: 0 0 0 1px k-get-theme-color-var( neutral-30 ) !default;
+$kendo-scrollview-pagebutton-hover-shadow: 0 0 0 1px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) !default;
 /// The focus box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-scrollview-pagebutton-focus-shadow: 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The primary hover box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-hover-shadow: 0 0 0 2px k-get-theme-color-var( neutral-30 ) !default;
+$kendo-scrollview-pagebutton-primary-hover-shadow: 0 0 0 2px if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-30 )) !default;
 /// The primary focus box shadow of the ScrollView page button.
 /// @group scrollview
-$kendo-scrollview-pagebutton-primary-focus-shadow: 0 0 0 2px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-scrollview-pagebutton-primary-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 /// The offset of the ScrollView pager.
 /// @group scrollview
@@ -67,7 +67,7 @@ $kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$
 
 /// The color of the ScrollView navigation arrows.
 /// @group scrollview
-$kendo-scrollview-navigation-color: $kendo-color-white !default;
+$kendo-scrollview-navigation-color: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The box shadow of the ScrollView navigation arrows.
 /// @group scrollview
 $kendo-scrollview-navigation-arrow-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -76,7 +76,7 @@ $kendo-scrollview-navigation-arrow-shadow: var( --kendo-box-shadow-depth-3, none
 $kendo-scrollview-navigation-bg: transparent !default;
 /// The focus box shadow of the ScrollView navigation arrows.
 /// @group scrollview
-$kendo-scrollview-navigation-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-scrollview-navigation-focus-shadow: 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The hover box shadow of the ScrollView navigation arrows.
 /// @group scrollview
 $kendo-scrollview-navigation-arrow-hover-shadow: var( --kendo-box-shadow-depth-4, none ) !default;

package/scss/searchbox/_variables.scss

@@ -2,4 +2,4 @@
 
 /// Color of the searchbox icon.
 /// @group searchbox
-$kendo-searchbox-icon-color: k-get-theme-color-var( primary-100 ) !default;
+$kendo-searchbox-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;