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

package/scss/panelbar/_variables.scss

@@ -63,13 +63,13 @@ $kendo-panelbar-item-level-count: 4 !default;
 
 /// The background color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-panelbar-bg: k-color(surface-alt) !default;
 /// The text color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-text: var( --kendo-component-text, initial ) !default;
+$kendo-panelbar-text: k-color(on-app-surface) !default;
 /// The border color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-border: var( --kendo-component-border, initial ) !default;
+$kendo-panelbar-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the PanelBar header.
 /// @group panelbar
@@ -83,10 +83,10 @@ $kendo-panelbar-header-border: inherit !default;
 
 /// The background color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-panelbar-header-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-panelbar-header-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-border: inherit !default;
@@ -116,16 +116,16 @@ $kendo-panelbar-header-hover-focus-border: null !default;
 
 /// The background color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+$kendo-panelbar-header-selected-bg: k-color(base-active) !default;
 /// The text color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-panelbar-header-selected-text: k-color(on-app-surface) !default;
 /// The border color of the selected PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-border: inherit !default;
 /// The color of the marker of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-selected-marker: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-panelbar-selected-marker: k-color(primary) !default;
 
 /// The background color of the selected and hovered PanelBar header.
 /// @group panelbar
@@ -169,10 +169,10 @@ $kendo-panelbar-header-expanded-border: inherit !default;
 
 /// The background color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-panelbar-item-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-panelbar-item-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-border: inherit !default;
@@ -202,10 +202,10 @@ $kendo-panelbar-item-hover-focus-border: inherit !default;
 
 /// The background color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+$kendo-panelbar-item-selected-bg: k-color(base-active) !default;
 /// The text color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-panelbar-item-selected-text: k-color(on-app-surface) !default;
 /// The border color of the selected PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-border: inherit !default;

package/scss/pdf-viewer/_variables.scss

@@ -17,36 +17,36 @@ $kendo-pdf-viewer-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-pdf-viewer-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-pdf-viewer-bg: k-color(surface-alt) !default;
 /// The text color of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-text: var( --kendo-component-text, initial ) !default;
+$kendo-pdf-viewer-text: k-color(on-app-surface) !default;
 /// The border color of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-border: var( --kendo-component-border, initial ) !default;
+$kendo-pdf-viewer-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the PDFViewer canvas.
 /// @group pdf-viewer
-$kendo-pdf-viewer-canvas-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-pdf-viewer-canvas-bg: k-color(surface) !default;
 /// Text color of the PDF viewer canvas.
 /// @group pdf-viewer
-$kendo-pdf-viewer-canvas-text: var( --kendo-component-text, inherit ) !default;
+$kendo-pdf-viewer-canvas-text: k-color(on-app-surface) !default;
 /// The border color of the PDFViewer canvas.
 /// @group pdf-viewer
-$kendo-pdf-viewer-canvas-border: var( --kendo-component-border, inherit ) !default;
+$kendo-pdf-viewer-canvas-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The spacing of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-spacing: k-spacing(7.5) !default;
 /// The background color of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-pdf-viewer-page-bg: k-color(surface-alt) !default;
 /// The text color of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-text: var( --kendo-component-text, inherit )!default;
+$kendo-pdf-viewer-page-text: k-color(on-app-surface) !default;
 /// The border color of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-border: var( --kendo-component-border, inherit ) !default;
+$kendo-pdf-viewer-page-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The shadow of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -68,13 +68,13 @@ $kendo-pdf-viewer-search-panel-border-width: 1px !default;
 $kendo-pdf-viewer-search-panel-border-radius: k-border-radius(md) !default;
 /// The background color of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-pdf-viewer-search-panel-bg: k-color(surface-alt) !default;
 /// The text color of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-text: var( --kendo-component-text, inherit ) !default;
+$kendo-pdf-viewer-search-panel-text: k-color(on-app-surface) !default;
 /// The border color of the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-border: var( --kendo-component-border, inherit )!default;
+$kendo-pdf-viewer-search-panel-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The shadow of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-shadow: none !default;
@@ -91,7 +91,7 @@ $kendo-pdf-viewer-selection-line-height: var( --kendo-line-height-sm, normal ) !
 
 /// The background color of the PDFViewer highlight.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-highlight-bg: var( --kendo-component-text, inherit ) !default;
+$kendo-pdf-viewer-search-highlight-bg: k-color(on-app-surface) !default;
 /// The background color of the PDFViewer highlight mark.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
@@ -109,13 +109,13 @@ $kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;
 
 /// The border color of the PDFViewer selected highlight annotation.
 /// @group pdf-viewer
-$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-pdf-viewer-highlight-annotation-border: k-color(primary) !default;
 /// The background color of the PDFViewer hover highlight annotation.
 /// @group pdf-viewer
-$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-pdf-viewer-highlight-annotation-hover-border: k-color(primary-hover) !default;
 /// The border color of the PDFViewer selected free text annotation.
 /// @group pdf-viewer
-$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-pdf-viewer-free-text-annotation-border: k-color(primary) !default;
 /// The placeholder text color of the PDFViewer free text annotation.
 /// @group pdf-viewer
 $kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;

package/scss/pivotgrid/_theme.scss

@@ -131,11 +131,11 @@
     }
 
     .k-filter-menu .k-calculated-item {
-        @include fill( $border: var( --kendo-component-border, inherit ) );
+        @include fill( $border: color-mix(in srgb, k-color(border) 16%, transparent) );
     }
 
     .k-pivotgrid-configurator-content .k-form-field-wrapper {
-        @include fill( $border: var( --kendo-component-border, inherit ) );
+        @include fill( $border: color-mix(in srgb, k-color(border) 16%, transparent) );
     }
 
 }
@@ -172,7 +172,7 @@
         );
 
         .k-empty {
-            color: var( --kendo-subtle-text, inherit );
+            color: k-color(subtle);
         }
     }
 
@@ -211,7 +211,7 @@
     // Configurator
     .k-pivotgrid-configurator-panel.kendo-jquery {
         .k-column-fields {
-            border-color: var( --kendo-component-border, inherit );
+            border-color: color-mix(in srgb, k-color(border) 16%, transparent);
         }
     }
 

package/scss/pivotgrid/_variables.scss

@@ -33,13 +33,13 @@ $kendo-pivotgrid-icon-spacing: k-spacing(1) !default;
 
 /// The background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-pivotgrid-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-text: var( --kendo-component-text, initial ) !default;
+$kendo-pivotgrid-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-border: var( --kendo-component-border, initial ) !default;
+$kendo-pivotgrid-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The alt border color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-alt-border: $kendo-pivotgrid-border !default;
@@ -63,27 +63,27 @@ $kendo-pivotgrid-cell-border-width: 1px !default;
 
 /// The background color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-pivotgrid-headers-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-pivotgrid-headers-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-border: var( --kendo-component-border, inherit ) !default;
+$kendo-pivotgrid-headers-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-pivotgrid-total-bg: k-color(base-subtle) !default;
 /// The text color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-text: var( --kendo-component-text, inherit ) !default;
+$kendo-pivotgrid-total-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-border: var( --kendo-component-border, inherit ) !default;
+$kendo-pivotgrid-total-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The hover background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-pivotgrid-hover-bg: k-color(base-hover) !default;
 /// The hover text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-hover-text: inherit !default;
@@ -93,7 +93,7 @@ $kendo-pivotgrid-hover-border: inherit !default;
 
 /// The selected background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+$kendo-pivotgrid-selected-bg: k-color(base-active) !default;
 /// The selected text color of the PivotGrid.
 /// @group pivotgrid
 $kendo-pivotgrid-selected-text: inherit !default;
@@ -154,20 +154,20 @@ $kendo-pivotgrid-configurator-horizontal-height: 420px !default;
 
 /// The background color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-pivotgrid-configurator-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-pivotgrid-configurator-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-border: var( --kendo-component-border, inherit )!default;
+$kendo-pivotgrid-configurator-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the PivotGrid configurator header.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-header-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-pivotgrid-configurator-header-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid configurator header.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-header-text: var( --kendo-component-text, inherit ) !default;
+$kendo-pivotgrid-configurator-header-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid configurator header.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-header-border: inherit !default;
@@ -205,20 +205,20 @@ $kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default;
 $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
 /// The background color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-pivotgrid-calculated-field-bg: k-color(surface-alt) !default;
 /// The text color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-text: var( --kendo-component-text, inherit ) !default;
+$kendo-pivotgrid-calculated-field-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-border: var( --kendo-component-border, inherit ) !default;
+$kendo-pivotgrid-calculated-field-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the PivotGrid calculated field header.
 /// @group pivotgrid
 $kendo-pivotgrid-calculated-field-header-bg: inherit !default;
 /// The text color of the PivotGrid calculated field header.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-header-text: var( --kendo-component-text, inherit ) !default;
+$kendo-pivotgrid-calculated-field-header-text: k-color(on-app-surface) !default;
 /// The border color of the PivotGrid calculated field header.
 /// @group pivotgrid
 $kendo-pivotgrid-calculated-field-header-border: inherit !default;
@@ -235,5 +235,5 @@ $kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;
 $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
 $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
 
-$kendo-pivotgrid-container-bg: var( --kendo-component-bg, inherit ) !default;
-$kendo-pivotgrid-row-headers-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-pivotgrid-container-bg: k-color(surface-alt) !default;
+$kendo-pivotgrid-row-headers-bg: k-color(surface-alt) !default;

package/scss/popover/_variables.scss

@@ -24,13 +24,13 @@ $kendo-popover-line-height: $kendo-window-line-height !default;
 
 /// The text color of the Popover.
 /// @group popover
-$kendo-popover-text: var( --kendo-component-text, initial ) !default;
+$kendo-popover-text: k-color(on-app-surface) !default;
 /// The background color of the Popover.
 /// @group popover
-$kendo-popover-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-popover-bg: k-color(surface-alt) !default;
 /// The border color of the Popover.
 /// @group popover
-$kendo-popover-border: var( --kendo-component-border, initial ) !default;
+$kendo-popover-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The box shadow of the Popover.
 /// @group popover
 $kendo-popover-shadow: var( --kendo-box-shadow-depth-6, none ) !default;

package/scss/popup/_variables.scss

@@ -30,13 +30,13 @@ $kendo-popup-content-padding-y: k-spacing(2) !default;
 
 /// Background color of the popup.
 /// @group popup
-$kendo-popup-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-popup-bg: k-color(surface-alt) !default;
 /// Text color of the popup.
 /// @group popup
-$kendo-popup-text: var( --kendo-component-text, initial ) !default;
+$kendo-popup-text: k-color(on-app-surface) !default;
 /// Border color of the popup.
 /// @group popup
-$kendo-popup-border: var( --kendo-component-border, initial ) !default;
+$kendo-popup-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// Box shadow around the popup.
 /// @group popup
 $kendo-popup-shadow: var( --kendo-box-shadow-depth-4, none ) !default;

package/scss/progressbar/_variables.scss

@@ -34,10 +34,10 @@ $kendo-progressbar-padding-y: k-spacing(0) !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-progressbar-bg: k-color(base-subtle) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-text: var( --kendo-component-text, initial ) !default;
+$kendo-progressbar-text: k-color(on-app-surface) !default;
 /// The border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border: $kendo-progressbar-bg !default;
@@ -47,10 +47,10 @@ $kendo-progressbar-gradient: null !default;
 
 /// The progress background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-progressbar-value-bg: k-color(primary) !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-text: var( --kendo-component-text, initial ) !default;
+$kendo-progressbar-value-text: k-color(on-app-surface) !default;
 /// The progress border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-border: $kendo-progressbar-value-bg !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: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-progressbar-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 6%, transparent) !default;
 /// The text color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-disabled-text: 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-progressbar-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !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: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 )) !default;
+$kendo-progressbar-value-disabled-bg: k-color(primary-subtle) !default;
 
 /// The background color of the indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-progressbar-indeterminate-bg: k-color(base-subtle) !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: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-progressbar-indeterminate-border: k-color(base-subtle) !default;
 /// The background gradient of the horizontal indeterminate ProgressBar.
 /// @group progressbar
-$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;
+$kendo-progressbar-indeterminate-gradient-horizontal: linear-gradient(270deg, k-color(base-subtle) 15%, k-color(primary) 50%, k-color(base-subtle) 85%)  !default;
 /// The background gradient of the vertical indeterminate ProgressBar.
 /// @group progressbar
-$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;
+$kendo-progressbar-indeterminate-gradient-vertical: linear-gradient(180deg, k-color(base-subtle) 15%, k-color(primary) 50% k-color(base-subtle) 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;
@@ -103,12 +103,12 @@ $kendo-progressbar-indeterminate-animation-vertical: 3s ease 0s infinite running
 
 /// The border color of the chunk ProgressBar.
 /// @group progressbar
-$kendo-progressbar-chunk-border: var( --kendo-body-bg, initial ) !default;
+$kendo-progressbar-chunk-border: k-color(app-surface) !default;
 
 // Circular Progressbar
 /// The arc stroke color of the circular ProgressBar.
 /// @group progressbar
-$kendo-circular-progressbar-arc-stroke: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-circular-progressbar-arc-stroke: k-color(primary) !default;
 /// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;

package/scss/prompt/_variables.scss

@@ -3,23 +3,23 @@
 
 /// The text color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-text: var( --kendo-component-text, initial ) !default;
+$kendo-prompt-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-prompt-bg: k-color(surface-alt) !default;
 /// The border color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-border: var( --kendo-component-border, initial ) !default;
+$kendo-prompt-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The text color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-text: var( --kendo-component-text, initial ) !default;
+$kendo-prompt-header-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-prompt-header-bg: k-color(surface-alt) !default;
 /// The border color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-border: var( --kendo-component-border, initial ) !default;
+$kendo-prompt-header-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The vertical padding of the AIPrompt content.
 /// @group prompt
@@ -32,13 +32,13 @@ $kendo-prompt-content-padding-x: k-spacing(4) !default;
 $kendo-prompt-content-spacing: k-spacing(4) !default;
 /// The text color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-prompt-content-text: k-color(on-base) !default;
 /// The background color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-prompt-content-bg: k-color(surface) !default;
 /// The text border of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-border: var( --kendo-component-border, initial ) !default;
+$kendo-prompt-content-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The spacing between the items of the AIPrompt content expander.
 /// @group prompt
@@ -55,13 +55,13 @@ $kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
 $kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
 /// The text color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-text: var( --kendo-component-text, initial ) !default;
+$kendo-prompt-suggestion-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-prompt-suggestion-bg: k-color(surface-alt) !default;
 /// The border color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border: var( --kendo-component-border, initial ) !default;
+$kendo-prompt-suggestion-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The elevation of the AIPrompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-shadow: k-elevation(1) !default;

package/scss/radio/_variables.scss

@@ -39,20 +39,20 @@ $kendo-radio-sizes: (
 
 /// The background color of the RadioButton.
 /// @group radio
-$kendo-radio-bg: $kendo-component-bg !default;
+$kendo-radio-bg: k-color(surface-alt) !default;
 /// The color of the RadioButton.
 /// @group radio
 $kendo-radio-text: transparent !default;
 /// The border color of the RadioButton.
 /// @group radio
-$kendo-radio-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-radio-border: k-color(border-alt) !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: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color( neutral, 130 )) !default;
+$kendo-radio-hover-text: k-color(subtle) !default;
 /// The border color of the hovered RadioButton.
 /// @group radio
 $kendo-radio-hover-border: $kendo-radio-border !default;
@@ -62,20 +62,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: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-radio-checked-text: k-color(primary) !default;
 /// The border color of the checked RadioButton.
 /// @group radio
-$kendo-radio-checked-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-radio-checked-border: k-color(primary) !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: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-radio-hover-checked-text: k-color(primary-hover) !default;
 /// The border color of the checked and hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-checked-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-radio-hover-checked-border: k-color(primary-hover) !default;
 
 /// The border color of the focused RadioButton.
 /// @group radio
@@ -85,7 +85,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 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-radio-focus-outline: 1px solid k-color(base-emphasis) !default;
 /// The outline offset of the focused RadioButton.
 /// @group radio
 $kendo-radio-focus-outline-offset: 2px !default;
@@ -95,10 +95,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: 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-radio-disabled-text: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 /// The border color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-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-radio-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 
 /// The background color of the disabled and checked RadioButton.
 /// @group radio
@@ -115,10 +115,10 @@ $kendo-radio-disabled-checked-border: $kendo-radio-disabled-border !default;
 $kendo-radio-invalid-bg: $kendo-radio-bg !default;
 /// The color of the invalid RadioButton.
 /// @group radio
-$kendo-radio-invalid-text: $kendo-invalid-text !default;
+$kendo-radio-invalid-text: k-color(error-on-surface) !default;
 /// The border color of the invalid RadioButton.
 /// @group radio
-$kendo-radio-invalid-border: $kendo-invalid-border !default;
+$kendo-radio-invalid-border: k-color(error-emphasis) !default;
 
 
 // Radio indicator
@@ -172,7 +172,7 @@ $kendo-radio-list-item-gap: k-spacing(2) !default;
 
 /// The background color of the RadioButton ripple.
 /// @group radio
-$kendo-radio-ripple-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-radio-ripple-bg: k-color(primary) !default;
 /// The opacity of the RadioButton ripple.
 /// @group radio
 $kendo-radio-ripple-opacity: .25 !default;

package/scss/rating/_theme.scss

@@ -37,9 +37,9 @@
 
         &.k-disabled {
             @include disabled(
-                var( --kendo-disabled-text, inherit ),
+                color-mix(in srgb, k-color(on-app-surface) 46%, transparent),
                 inherit,
-                var( --kendo-disabled-border, inherit )
+                transparent
             );
         }
     }

package/scss/rating/_variables.scss

@@ -23,10 +23,10 @@ $kendo-rating-item-padding-x: k-spacing(0.5) !default;
 $kendo-rating-item-padding-y: k-spacing(2) !default;
 /// The text color of the Rating item.
 /// @group rating
-$kendo-rating-item-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-rating-item-text: k-color(subtle) !default;
 /// The text color of the hovered Rating item.
 /// @group rating
-$kendo-rating-item-hover-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-rating-item-hover-text: k-color(primary) !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: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-rating-item-selected-text: k-color(on-app-surface) !default;
 /// The text color of the selected and hovered Rating item.
 /// @group rating
-$kendo-rating-item-selected-hover-text: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
+$kendo-rating-item-selected-hover-text: k-color(primary-active) !default;