@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/pivotgrid/_theme.scss

@@ -1,67 +1,10 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/pivotgrid/_theme.scss" as *;
 
 @mixin kendo-pivotgrid--theme() {
+    @include kendo-pivotgrid--theme-base();
 
-    .k-pivotgrid {
-        @include fill (
-            var( --kendo-pivotgrid-text, #{$kendo-pivotgrid-text} ),
-            var( --kendo-pivotgrid-bg, #{$kendo-pivotgrid-bg} ),
-            var( --kendo-pivotgrid-border, #{$kendo-pivotgrid-border} )
-        );
-    }
-
-    .k-pivotgrid-column-headers,
-    .k-pivotgrid-row-headers,
-    .k-pivotgrid-empty-cell {
-        @include fill (
-            var( --kendo-pivotgrid-headers-text, #{$kendo-pivotgrid-headers-text} ),
-            var( --kendo-pivotgrid-headers-bg, #{$kendo-pivotgrid-headers-bg} ),
-            var( --kendo-pivotgrid-headers-border, #{$kendo-pivotgrid-headers-border} )
-        );
-    }
-
-    .k-pivotgrid-empty-cell {
-        @include fill (
-            $border: var( --kendo-pivotgrid-alt-border, #{$kendo-pivotgrid-alt-border} )
-        );
-    }
-
-    .k-pivotgrid-row-headers .k-pivotgrid-row .k-pivotgrid-cell:last-child {
-        border-right-color: var( --kendo-pivotgrid-alt-border, #{$kendo-pivotgrid-alt-border} );
-    }
-
-    .k-pivotgrid-column-headers .k-pivotgrid-column-total:nth-last-of-type(2) .k-pivotgrid-cell:not(.k-pivotgrid-expanded),
-    .k-pivotgrid-column-headers .k-pivotgrid-row:last-child {
-        border-bottom-color: var( --kendo-pivotgrid-alt-border, #{$kendo-pivotgrid-alt-border} );
-    }
-
-
-    .k-pivotgrid-header-total,
-    .k-pivotgrid-total {
-        @include fill (
-            var( --kendo-pivotgrid-total-text, #{$kendo-pivotgrid-total-text} ),
-            var( --kendo-pivotgrid-total-bg, #{$kendo-pivotgrid-total-bg} ),
-            var( --kendo-pivotgrid-total-border, #{$kendo-pivotgrid-total-border} )
-        );
-    }
-
-
-    // Hover state
-    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
-    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
-    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
-    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
-        @include fill (
-            var( --kendo-pivotgrid-hover-text, #{$kendo-pivotgrid-hover-text} ),
-            var( --kendo-pivotgrid-hover-bg, #{$kendo-pivotgrid-hover-bg} ),
-            var( --kendo-pivotgrid-hover-border, #{$kendo-pivotgrid-hover-border} )
-        );
-    }
-
-    // Focus state
     .k-pivotgrid-cell:focus,
     .k-pivotgrid-cell.k-focus,
     .k-pivotgrid-empty-cell:focus,
@@ -70,65 +13,9 @@
     .k-grouping-row > .k-pivotgrid-cell:focus,
     .k-detail-row > .k-pivotgrid-cell:focus,
     .k-group-footer > .k-pivotgrid-cell:focus {
-        @include box-shadow( var( --kendo-pivotgrid-focus-shadow, #{$kendo-pivotgrid-focus-shadow} ) );
-    }
-
-    // Selected state
-    .k-pivotgrid-cell.k-selected,
-    .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
-        @include fill (
-            var( --kendo-pivotgrid-selected-text, #{$kendo-pivotgrid-selected-text} ),
-            var( --kendo-pivotgrid-selected-bg, #{$kendo-pivotgrid-selected-bg} ),
-            var( --kendo-pivotgrid-selected-border, #{$kendo-pivotgrid-selected-border} )
-        );
+        @include box-shadow( $kendo-pivotgrid-focus-shadow );
     }
 
-}
-
-
-
-@mixin kendo-pivotgrid-configurator--theme() {
-
-    .k-pivotgrid-configurator-button,
-    .k-pivotgrid-configurator-panel {
-        @include fill (
-            var( --kendo-pivotgrid-configurator-text, #{$kendo-pivotgrid-configurator-text} ),
-            var( --kendo-pivotgrid-configurator-bg, #{$kendo-pivotgrid-configurator-bg} ),
-            var( --kendo-pivotgrid-configurator-border, #{$kendo-pivotgrid-configurator-border} )
-        );
-    }
-
-    .k-pivotgrid-configurator-header {
-        @include fill(
-            var( --kendo-pivotgrid-configurator-header-text, #{$kendo-pivotgrid-configurator-header-text} ),
-            var( --kendo-pivotgrid-configurator-header-bg, #{$kendo-pivotgrid-configurator-header-bg} ),
-            var( --kendo-pivotgrid-configurator-header-border, #{$kendo-pivotgrid-configurator-header-border} )
-        );
-    }
-
-    .k-pivotgrid-configurator-content .k-fields-list-wrapper {
-        @include fill(
-            $border: var( --kendo-pivotgrid-configurator-border, #{$kendo-pivotgrid-configurator-border} )
-        );
-    }
-
-
-    // Calculated field
-    .k-calculated-field {
-        @include fill (
-            var( --kendo-pivotgrid-calculated-field-text, #{$kendo-pivotgrid-calculated-field-text} ),
-            var( --kendo-pivotgrid-calculated-field-bg, #{$kendo-pivotgrid-calculated-field-bg} ),
-            var( --kendo-pivotgrid-calculated-field-border, #{$kendo-pivotgrid-calculated-field-border} )
-        );
-    }
-
-    .k-calculated-field-header {
-        @include fill(
-            var( --kendo-pivotgrid-calculated-field-header-text, #{$kendo-pivotgrid-calculated-field-header-text} ),
-            var( --kendo-pivotgrid-calculated-field-header-bg, #{$kendo-pivotgrid-calculated-field-header-bg} ),
-            var( --kendo-pivotgrid-calculated-field-header-border, #{$kendo-pivotgrid-calculated-field-header-border} )
-        );
-    }
 
     .k-filter-menu .k-calculated-item {
         @include fill( $border: color-mix(in srgb, k-color(border) 16%, transparent) );
@@ -138,81 +25,7 @@
         @include fill( $border: color-mix(in srgb, k-color(border) 16%, transparent) );
     }
 
-}
-
-@mixin kendo-pivotgrid-legacy--theme() {
-
-    .k-pivot {
-        @include fill (
-            var( --kendo-pivotgrid-text, #{$kendo-pivotgrid-text} ),
-            var( --kendo-pivotgrid-bg, #{$kendo-pivotgrid-bg} ),
-            var( --kendo-pivotgrid-border, #{$kendo-pivotgrid-border} )
-        );
-    }
-    .k-pivot-table {
-        border-color: var( --kendo-pivotgrid-border, #{$kendo-pivotgrid-border} );
-    }
-
-    // Pivotgrid header
-    .k-pivot-rowheaders {
-        @include fill(
-            var( --kendo-pivotgrid-headers-text, #{$kendo-pivotgrid-headers-text} ),
-            var( --kendo-pivotgrid-headers-bg, #{$kendo-pivotgrid-headers-bg} ),
-            var( --kendo-pivotgrid-headers-border, #{$kendo-pivotgrid-headers-border} )
-        );
-    }
-
-
-    // Pivotgrid toolbar
-    .k-pivot-toolbar {
-        @include fill(
-            var( --kendo-pivotgrid-headers-text, #{$kendo-pivotgrid-headers-text} ),
-            var( --kendo-pivotgrid-headers-bg, #{$kendo-pivotgrid-headers-bg} ),
-            var( --kendo-pivotgrid-headers-border, #{$kendo-pivotgrid-headers-border} )
-        );
-
-        .k-empty {
-            color: k-color(subtle);
-        }
-    }
-
-    .k-pivot-toolbar,
-    .k-pivot-table,
-    .k-pivot-rowheaders > .k-grid td:first-child,
-    .k-pivot-table .k-grid-header .k-header.k-first {
-        border-color: var( --kendo-pivotgrid-chrome-border, #{$kendo-pivotgrid-chrome-border} );
+    .k-pivotgrid-configurator-panel.kendo-jquery .k-column-fields {
+        border-color: color-mix(in srgb, k-color(border) 16%, transparent);
     }
-
-    .k-pivot-layout .k-grid-footer {
-        color: var( --kendo-pivotgrid-alt-text, #{$kendo-pivotgrid-alt-text} );
-        background-color: var( --kendo-pivotgrid-alt-bg, #{$kendo-pivotgrid-alt-bg} );
-    }
-
-    // KPI icons
-    .k-i-kpi-trend-increase,
-    .k-i-kpi-trend-decrease,
-    .k-i-kpi-trend-equal {
-        color: inherit;
-    }
-
-    .k-i-kpi-status-hold {
-        color: var( --kendo-warning-100, initial );
-    }
-
-    .k-i-kpi-status-deny {
-        color: var( --kendo-error-100, initial );
-    }
-
-    .k-i-kpi-status-open {
-        color: var( --kendo-success-100, initial );
-    }
-
-
-    // Configurator
-    .k-pivotgrid-configurator-panel.kendo-jquery {
-        .k-column-fields {
-            border-color: color-mix(in srgb, k-color(border) 16%, transparent);
-        }
-    }
-
 }

package/scss/pivotgrid/_variables.scss

@@ -7,233 +7,307 @@
 
 /// The spacer of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-spacer: k-spacing(3) !default;
+$kendo-pivotgrid-spacer: var( --kendo-pivotgrid-spacer, #{k-spacing(3)} ) !default;
 
 /// The horizontal padding of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-padding-x: k-spacing(0) !default;
+$kendo-pivotgrid-padding-x: var( --kendo-pivotgrid-padding-x, #{k-spacing(0)} ) !default;
 /// The vertical of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-padding-y: k-spacing(0) !default;
+$kendo-pivotgrid-padding-y: var( --kendo-pivotgrid-padding-y, #{k-spacing(0)} ) !default;
 /// The font family of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-pivotgrid-font-family: var( --kendo-pivotgrid-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-pivotgrid-font-size: var( --kendo-pivotgrid-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-pivotgrid-line-height: var( --kendo-pivotgrid-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The border width of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-border-width: 1px !default;
+$kendo-pivotgrid-border-width: var( --kendo-pivotgrid-border-width, 1px ) !default;
 /// The icon spacing of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-icon-spacing: k-spacing(1) !default;
+$kendo-pivotgrid-icon-spacing: var( --kendo-pivotgrid-icon-spacing, #{k-spacing(1)} ) !default;
 
 /// The background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-bg: k-color(surface-alt) !default;
+$kendo-pivotgrid-bg: var( --kendo-pivotgrid-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-text: k-color(on-app-surface) !default;
+$kendo-pivotgrid-text: var( --kendo-pivotgrid-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-pivotgrid-border: var( --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;
+$kendo-pivotgrid-alt-border: var( --kendo-pivotgrid-alt-border, #{$kendo-pivotgrid-border} ) !default;
 
 /// The default width of the PivotGrid row header.
 /// @group pivotgrid
-$kendo-pivotgrid-row-header-width: 300px !default;
+$kendo-pivotgrid-row-header-width: var( --kendo-pivotgrid-row-header-width, 300px ) !default;
 /// The default height of the PivotGrid column header.
 /// @group pivotgrid
-$kendo-pivotgrid-column-header-height: 75px !default;
+$kendo-pivotgrid-column-header-height: var( --kendo-pivotgrid-column-header-height, 75px ) !default;
 
 /// The horizontal padding of the PivotGrid cell.
 /// @group pivotgrid
-$kendo-pivotgrid-cell-padding-x: $kendo-table-cell-padding-x !default;
+$kendo-pivotgrid-cell-padding-x: var( --kendo-pivotgrid-cell-padding-x, #{$kendo-table-md-cell-padding-x} ) !default;
 /// The vertical padding of the PivotGrid cell.
 /// @group pivotgrid
-$kendo-pivotgrid-cell-padding-y: $kendo-table-cell-padding-y !default;
+$kendo-pivotgrid-cell-padding-y: var( --kendo-pivotgrid-cell-padding-y, #{$kendo-table-md-cell-padding-y} ) !default;
 /// The border width of the PivotGrid cell.
 /// @group pivotgrid
-$kendo-pivotgrid-cell-border-width: 1px !default;
+$kendo-pivotgrid-cell-border-width: var( --kendo-pivotgrid-cell-border-width, 1px ) !default;
 
 /// The background color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-bg: k-color(surface-alt) !default;
+$kendo-pivotgrid-headers-bg: var( --kendo-pivotgrid-headers-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-text: k-color(on-app-surface) !default;
+$kendo-pivotgrid-headers-text: var( --kendo-pivotgrid-headers-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-pivotgrid-headers-border: var( --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: k-color(base-subtle) !default;
+$kendo-pivotgrid-total-bg: var( --kendo-pivotgrid-total-bg, #{k-color(base-subtle)} ) !default;
 /// The text color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-text: k-color(on-app-surface) !default;
+$kendo-pivotgrid-total-text: var( --kendo-pivotgrid-total-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-pivotgrid-total-border: var( --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: k-color(base-hover) !default;
+$kendo-pivotgrid-hover-bg: var( --kendo-pivotgrid-hover-bg, #{k-color(base-hover)} ) !default;
 /// The hover text color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-hover-text: inherit !default;
+$kendo-pivotgrid-hover-text: var( --kendo-pivotgrid-hover-text, inherit ) !default;
 /// The hover border color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-hover-border: inherit !default;
+$kendo-pivotgrid-hover-border: var( --kendo-pivotgrid-hover-border, inherit ) !default;
 
 /// The selected background color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-selected-bg: k-color(base-active) !default;
+$kendo-pivotgrid-selected-bg: var( --kendo-pivotgrid-selected-bg, #{k-color(base-active)} ) !default;
 /// The selected text color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-selected-text: inherit !default;
+$kendo-pivotgrid-selected-text: var( --kendo-pivotgrid-selected-text, inherit ) !default;
 /// The selected border color of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-selected-border: inherit !default;
+$kendo-pivotgrid-selected-border: var( --kendo-pivotgrid-selected-border, inherit ) !default;
 
 /// The focus shadow of the PivotGrid.
 /// @group pivotgrid
-$kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default;
+$kendo-pivotgrid-focus-shadow: var( --kendo-pivotgrid-focus-shadow, #{$kendo-list-item-focus-shadow} ) !default;
 
 /// The horizontal padding of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-padding-x: k-spacing(0) !default;
+$kendo-pivotgrid-configurator-padding-x: var( --kendo-pivotgrid-configurator-padding-x, #{k-spacing(0)} ) !default;
 /// The vertical padding of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-padding-y: k-spacing(0) !default;
+$kendo-pivotgrid-configurator-padding-y: var( --kendo-pivotgrid-configurator-padding-y, #{k-spacing(0)} ) !default;
 /// The border width of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-border-width: 1px !default;
+$kendo-pivotgrid-configurator-border-width: var( --kendo-pivotgrid-configurator-border-width, 1px ) !default;
 
 /// The horizontal padding of the PivotGrid configurator header.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default;
+$kendo-pivotgrid-configurator-header-padding-x: var( --kendo-pivotgrid-configurator-header-padding-x, #{$kendo-pivotgrid-spacer} ) !default;
 /// The vertical padding of the PivotGrid configurator header.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-header-padding-y: $kendo-pivotgrid-configurator-header-padding-x !default;
+$kendo-pivotgrid-configurator-header-padding-y: var( --kendo-pivotgrid-configurator-header-padding-y, #{$kendo-pivotgrid-configurator-header-padding-x} ) !default;
 /// The font size of the PivotGrid configurator header.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-header-font-size: calc( var( --kendo-font-size-xl, 2rem ) * .9 ) !default;
+$kendo-pivotgrid-configurator-header-font-size: var( --kendo-pivotgrid-configurator-header-font-size, calc( var( --kendo-font-size-xl, 2rem ) * .9 ) ) !default;
 /// The font weight of the PivotGrid configurator header.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-header-font-weight: var( --kendo-font-weight-bold, bold ) !default;
+$kendo-pivotgrid-configurator-header-font-weight: var( --kendo-pivotgrid-configurator-header-font-weight, var( --kendo-font-weight-bold, bold ) ) !default;
 
 /// The horizontal padding of the PivotGrid configurator content.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default;
+$kendo-pivotgrid-configurator-content-padding-x: var( --kendo-pivotgrid-configurator-content-padding-x, #{$kendo-pivotgrid-spacer} ) !default;
 /// The vertical padding of the PivotGrid configurator content.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-content-padding-y: k-spacing(0) !default;
+$kendo-pivotgrid-configurator-content-padding-y: var( --kendo-pivotgrid-configurator-content-padding-y, #{k-spacing(0)} ) !default;
 
 /// The horizontal margin of the PivotGrid configurator fields.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default;
+$kendo-pivotgrid-configurator-fields-margin-x: var( --kendo-pivotgrid-configurator-fields-margin-x, #{k-spacing(0)} ) !default;
 /// The vertical margin of the PivotGrid configurator fields.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
+$kendo-pivotgrid-configurator-fields-margin-y: var( --kendo-pivotgrid-configurator-fields-margin-y, calc( #{$kendo-pivotgrid-spacer} / 2 ) ) !default;
 /// The spacing of the PivotGrid configurator fields.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-fields-gap: k-spacing(2) !default;
+$kendo-pivotgrid-configurator-fields-gap: var( --kendo-pivotgrid-configurator-fields-gap, #{k-spacing(2)} ) !default;
 
 /// The default width of the PivotGrid vertical configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-vertical-width: 320px !default;
+$kendo-pivotgrid-configurator-vertical-width: var( --kendo-pivotgrid-configurator-vertical-width, 320px ) !default;
 /// The default height of the PivotGrid horizontal configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-horizontal-height: 420px !default;
+$kendo-pivotgrid-configurator-horizontal-height: var( --kendo-pivotgrid-configurator-horizontal-height, 420px ) !default;
 
 /// The background color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-bg: k-color(surface-alt) !default;
+$kendo-pivotgrid-configurator-bg: var( --kendo-pivotgrid-configurator-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-text: k-color(on-app-surface) !default;
+$kendo-pivotgrid-configurator-text: var( --kendo-pivotgrid-configurator-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-pivotgrid-configurator-border: var( --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: k-color(surface-alt) !default;
+$kendo-pivotgrid-configurator-header-bg: var( --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: k-color(on-app-surface) !default;
+$kendo-pivotgrid-configurator-header-text: var( --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;
+$kendo-pivotgrid-configurator-header-border: var( --kendo-pivotgrid-configurator-header-border, inherit ) !default;
 
 /// The horizontal padding of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default;
+$kendo-pivotgrid-configurator-button-padding-x: var( --kendo-pivotgrid-configurator-button-padding-x, #{k-spacing(1)} ) !default;
 /// The vertical padding of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default;
+$kendo-pivotgrid-configurator-button-padding-y: var( --kendo-pivotgrid-configurator-button-padding-y, #{k-spacing(1)} ) !default;
 /// The border width of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-border-width: 1px !default;
+$kendo-pivotgrid-configurator-button-border-width: var( --kendo-pivotgrid-configurator-button-border-width, 1px ) !default;
 /// The size of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default;
+$kendo-pivotgrid-configurator-button-size: var( --kendo-pivotgrid-configurator-button-size, calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) ) !default;
 /// The icon spacing of the PivotGrid configurator button.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-button-icon-spacing: k-spacing(2) !default;
+$kendo-pivotgrid-configurator-button-icon-spacing: var( --kendo-pivotgrid-configurator-button-icon-spacing, #{k-spacing(2)} ) !default;
 
 /// The horizontal padding of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default;
+$kendo-pivotgrid-calculated-field-padding-x: var( --kendo-pivotgrid-calculated-field-padding-x, #{$kendo-pivotgrid-spacer} ) !default;
 /// The vertical padding of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default;
+$kendo-pivotgrid-calculated-field-padding-y: var( --kendo-pivotgrid-calculated-field-padding-y, #{$kendo-pivotgrid-spacer} ) !default;
 /// The border width of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-border-width: 1px !default;
+$kendo-pivotgrid-calculated-field-border-width: var( --kendo-pivotgrid-calculated-field-border-width, 1px ) !default;
 /// The border radius of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default;
+$kendo-pivotgrid-calculated-field-border-radius: var( --kendo-pivotgrid-calculated-field-border-radius, #{k-border-radius(md)} ) !default;
 /// The spacing of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
+$kendo-pivotgrid-calculated-field-gap: var( --kendo-pivotgrid-calculated-field-gap, #{$kendo-pivotgrid-spacer} ) !default;
 /// The background color of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-bg: k-color(surface-alt) !default;
+$kendo-pivotgrid-calculated-field-bg: var( --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: k-color(on-app-surface) !default;
+$kendo-pivotgrid-calculated-field-text: var( --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: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-pivotgrid-calculated-field-border: var( --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;
+$kendo-pivotgrid-calculated-field-header-bg: var( --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: k-color(on-app-surface) !default;
+$kendo-pivotgrid-calculated-field-header-text: var( --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;
+$kendo-pivotgrid-calculated-field-header-border: var( --kendo-pivotgrid-calculated-field-header-border, inherit ) !default;
 
 /// The horizontal padding of the PivotGrid treeview.
 /// @group pivotgrid
-$kendo-pivotgrid-treeview-padding-x: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
+$kendo-pivotgrid-treeview-padding-x: var( --kendo-pivotgrid-treeview-padding-x, calc( #{$kendo-pivotgrid-spacer} / 2 ) ) !default;
 /// The vertical padding of the PivotGrid treeview.
 /// @group pivotgrid
-$kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default;
+$kendo-pivotgrid-treeview-padding-y: var( --kendo-pivotgrid-treeview-padding-y, #{k-spacing(0)} ) !default;
 
 // Legacy variables
 $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: k-color(surface-alt) !default;
-$kendo-pivotgrid-row-headers-bg: k-color(surface-alt) !default;
+$kendo-pivotgrid-container-bg: var( --kendo-pivotgrid-container-bg, #{k-color(surface-alt)} ) !default;
+$kendo-pivotgrid-row-headers-bg: var( --kendo-pivotgrid-row-headers-bg, #{k-color(surface-alt)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/pivotgrid/_variables.scss" with (
+    $kendo-pivotgrid-spacer: $kendo-pivotgrid-spacer,
+    $kendo-pivotgrid-padding-x: $kendo-pivotgrid-padding-x,
+    $kendo-pivotgrid-padding-y: $kendo-pivotgrid-padding-y,
+    $kendo-pivotgrid-font-family: $kendo-pivotgrid-font-family,
+    $kendo-pivotgrid-font-size: $kendo-pivotgrid-font-size,
+    $kendo-pivotgrid-line-height: $kendo-pivotgrid-line-height,
+    $kendo-pivotgrid-border-width: $kendo-pivotgrid-border-width,
+    $kendo-pivotgrid-icon-spacing: $kendo-pivotgrid-icon-spacing,
+    $kendo-pivotgrid-row-header-width: $kendo-pivotgrid-row-header-width,
+    $kendo-pivotgrid-column-header-height: $kendo-pivotgrid-column-header-height,
+    $kendo-pivotgrid-cell-padding-x: $kendo-pivotgrid-cell-padding-x,
+    $kendo-pivotgrid-cell-padding-y: $kendo-pivotgrid-cell-padding-y,
+    $kendo-pivotgrid-cell-border-width: $kendo-pivotgrid-cell-border-width,
+    $kendo-pivotgrid-bg: $kendo-pivotgrid-bg,
+    $kendo-pivotgrid-text: $kendo-pivotgrid-text,
+    $kendo-pivotgrid-border: $kendo-pivotgrid-border,
+    $kendo-pivotgrid-alt-border: $kendo-pivotgrid-alt-border,
+    $kendo-pivotgrid-headers-bg: $kendo-pivotgrid-headers-bg,
+    $kendo-pivotgrid-headers-text: $kendo-pivotgrid-headers-text,
+    $kendo-pivotgrid-headers-border: $kendo-pivotgrid-headers-border,
+    $kendo-pivotgrid-total-bg: $kendo-pivotgrid-total-bg,
+    $kendo-pivotgrid-total-text: $kendo-pivotgrid-total-text,
+    $kendo-pivotgrid-total-border: $kendo-pivotgrid-total-border,
+    $kendo-pivotgrid-hover-bg: $kendo-pivotgrid-hover-bg,
+    $kendo-pivotgrid-hover-text: $kendo-pivotgrid-hover-text,
+    $kendo-pivotgrid-hover-border: $kendo-pivotgrid-hover-border,
+    $kendo-pivotgrid-selected-bg: $kendo-pivotgrid-selected-bg,
+    $kendo-pivotgrid-selected-text: $kendo-pivotgrid-selected-text,
+    $kendo-pivotgrid-selected-border: $kendo-pivotgrid-selected-border,
+    $kendo-pivotgrid-focus-shadow: $kendo-pivotgrid-focus-shadow,
+    $kendo-pivotgrid-configurator-padding-x: $kendo-pivotgrid-configurator-padding-x,
+    $kendo-pivotgrid-configurator-padding-y: $kendo-pivotgrid-configurator-padding-y,
+    $kendo-pivotgrid-configurator-border-width: $kendo-pivotgrid-configurator-border-width,
+    $kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-configurator-header-padding-x,
+    $kendo-pivotgrid-configurator-header-padding-y: $kendo-pivotgrid-configurator-header-padding-y,
+    $kendo-pivotgrid-configurator-header-font-size: $kendo-pivotgrid-configurator-header-font-size,
+    $kendo-pivotgrid-configurator-header-font-weight: $kendo-pivotgrid-configurator-header-font-weight,
+    $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-configurator-content-padding-x,
+    $kendo-pivotgrid-configurator-content-padding-y: $kendo-pivotgrid-configurator-content-padding-y,
+    $kendo-pivotgrid-configurator-fields-margin-x: $kendo-pivotgrid-configurator-fields-margin-x,
+    $kendo-pivotgrid-configurator-fields-margin-y: $kendo-pivotgrid-configurator-fields-margin-y,
+    $kendo-pivotgrid-configurator-vertical-width: $kendo-pivotgrid-configurator-vertical-width,
+    $kendo-pivotgrid-configurator-horizontal-height: $kendo-pivotgrid-configurator-horizontal-height,
+    $kendo-pivotgrid-configurator-bg: $kendo-pivotgrid-configurator-bg,
+    $kendo-pivotgrid-configurator-text: $kendo-pivotgrid-configurator-text,
+    $kendo-pivotgrid-configurator-border: $kendo-pivotgrid-configurator-border,
+    $kendo-pivotgrid-configurator-header-bg: $kendo-pivotgrid-configurator-header-bg,
+    $kendo-pivotgrid-configurator-header-text: $kendo-pivotgrid-configurator-header-text,
+    $kendo-pivotgrid-configurator-header-border: $kendo-pivotgrid-configurator-header-border,
+    $kendo-pivotgrid-configurator-button-padding-x: $kendo-pivotgrid-configurator-button-padding-x,
+    $kendo-pivotgrid-configurator-button-padding-y: $kendo-pivotgrid-configurator-button-padding-y,
+    $kendo-pivotgrid-configurator-button-border-width: $kendo-pivotgrid-configurator-button-border-width,
+    $kendo-pivotgrid-configurator-button-size: $kendo-pivotgrid-configurator-button-size,
+    $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-calculated-field-padding-x,
+    $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-calculated-field-padding-y,
+    $kendo-pivotgrid-calculated-field-border-width: $kendo-pivotgrid-calculated-field-border-width,
+    $kendo-pivotgrid-calculated-field-border-radius: $kendo-pivotgrid-calculated-field-border-radius,
+    $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-calculated-field-gap,
+    $kendo-pivotgrid-calculated-field-bg: $kendo-pivotgrid-calculated-field-bg,
+    $kendo-pivotgrid-calculated-field-text: $kendo-pivotgrid-calculated-field-text,
+    $kendo-pivotgrid-calculated-field-border: $kendo-pivotgrid-calculated-field-border,
+    $kendo-pivotgrid-calculated-field-header-bg: $kendo-pivotgrid-calculated-field-header-bg,
+    $kendo-pivotgrid-calculated-field-header-text: $kendo-pivotgrid-calculated-field-header-text,
+    $kendo-pivotgrid-calculated-field-header-border: $kendo-pivotgrid-calculated-field-header-border,
+    $kendo-pivotgrid-treeview-padding-x: $kendo-pivotgrid-treeview-padding-x,
+    $kendo-pivotgrid-treeview-padding-y: $kendo-pivotgrid-treeview-padding-y,
+    $kendo-pivotgrid-alt-bg: $kendo-pivotgrid-alt-bg,
+    $kendo-pivotgrid-alt-text: $kendo-pivotgrid-alt-text,
+    $kendo-pivotgrid-chrome-border: $kendo-pivotgrid-chrome-border,
+    $kendo-pivotgrid-container-bg: $kendo-pivotgrid-container-bg,
+    $kendo-pivotgrid-row-headers-bg: $kendo-pivotgrid-row-headers-bg
+);