@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.2

package/scss/pivotgrid/_theme.scss

@@ -1,248 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../popup/_variables.scss" as *;
-
-@mixin kendo-pivotgrid--theme-base() {
-
-    // PivotGrid
-    .k-pivotgrid {
-        @include fill (
-            $kendo-pivotgrid-text,
-            $kendo-pivotgrid-bg,
-            $kendo-pivotgrid-border
-        );
-    }
-
-    .k-pivotgrid-column-headers,
-    .k-pivotgrid-row-headers,
-    .k-pivotgrid-empty-cell {
-        @include fill (
-            $kendo-pivotgrid-headers-text,
-            $kendo-pivotgrid-headers-bg,
-            $kendo-pivotgrid-headers-border
-        );
-    }
-
-    .k-pivotgrid-empty-cell {
-        @include fill (
-            $border: $kendo-pivotgrid-alt-border
-        );
-    }
-
-    .k-pivotgrid-row-headers .k-pivotgrid-row .k-pivotgrid-cell:last-child {
-        border-right-color: $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: $kendo-pivotgrid-alt-border;
-    }
-
-
-    .k-pivotgrid-header-total,
-    .k-pivotgrid-total {
-        @include fill (
-            $kendo-pivotgrid-total-text,
-            $kendo-pivotgrid-total-bg,
-            $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 (
-            $kendo-pivotgrid-hover-text,
-            $kendo-pivotgrid-hover-bg,
-            $kendo-pivotgrid-hover-border
-        );
-    }
-
-    // Focus state
-    .k-pivotgrid-cell:focus,
-    .k-pivotgrid-cell.k-focus,
-    .k-pivotgrid-empty-cell:focus,
-    .k-pivotgrid-empty-cell.k-focus,
-    .k-master-row > .k-pivotgrid-cell:focus,
-    .k-grouping-row > .k-pivotgrid-cell:focus,
-    .k-detail-row > .k-pivotgrid-cell:focus,
-    .k-group-footer > .k-pivotgrid-cell:focus {
-        @include focus-indicator( $kendo-pivotgrid-focus-shadow, true );
-    }
-
-    // Selected state
-    .k-pivotgrid-cell.k-selected,
-    .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
-        @include fill (
-            $kendo-pivotgrid-selected-text,
-            $kendo-pivotgrid-selected-bg,
-            $kendo-pivotgrid-selected-border
-        );
-    }
-
-
-    // Pivotgrid configurator
-    .k-pivotgrid-configurator-button,
-    .k-pivotgrid-configurator-panel {
-        @include fill (
-            $kendo-pivotgrid-configurator-text,
-            $kendo-pivotgrid-configurator-bg,
-            $kendo-pivotgrid-configurator-border
-        );
-    }
-
-    .k-pivotgrid-configurator-header {
-        @include fill(
-            $kendo-pivotgrid-configurator-header-text,
-            $kendo-pivotgrid-configurator-header-bg,
-            $kendo-pivotgrid-configurator-header-border
-        );
-    }
-
-    .k-pivotgrid-configurator-content .k-fields-list-wrapper {
-        @include fill(
-            $border: $kendo-pivotgrid-configurator-border
-        );
-    }
-
-
-    // Calculated field
-    .k-calculated-field {
-        @include fill (
-            $kendo-pivotgrid-calculated-field-text,
-            $kendo-pivotgrid-calculated-field-bg,
-            $kendo-pivotgrid-calculated-field-border
-        );
-    }
-
-    .k-calculated-field-header {
-        @include fill(
-            $kendo-pivotgrid-calculated-field-header-text,
-            $kendo-pivotgrid-calculated-field-header-bg,
-            $kendo-pivotgrid-calculated-field-header-border
-        );
-    }
-
-    .k-filter-menu .k-calculated-item {
-        @include fill( $border: $kendo-popup-border );
-    }
-
-    .k-pivotgrid-configurator-content .k-form-field-wrapper {
-        @include fill( $border: $kendo-component-border );
-    }
-
-
-    // Overlay mode
-    .k-flex-row {
-        .k-pivotgrid-configurator-overlay {
-            @include box-shadow( $kendo-pivotgrid-configurator-end-shadow );
-        }
-
-        &-reverse .k-pivotgrid-configurator-overlay {
-            @include box-shadow( $kendo-pivotgrid-configurator-start-shadow );
-        }
-    }
-
-    .k-flex-col {
-        .k-pivotgrid-configurator-overlay {
-            @include box-shadow( $kendo-pivotgrid-configurator-top-shadow );
-        }
-
-        &-reverse .k-pivotgrid-configurator-overlay {
-            @include box-shadow( $kendo-pivotgrid-configurator-bottom-shadow );
-        }
-    }
-
-    // Legacy pivotgrid
-    // TODO: remove
-    .k-pivot {
-        @include fill (
-            $kendo-pivotgrid-text,
-            $kendo-pivotgrid-bg,
-            $kendo-pivotgrid-border
-        );
-    }
-    .k-pivot-table {
-        border-color: $kendo-pivotgrid-border;
-    }
-
-    // Pivotgrid header
-    .k-pivot-rowheaders {
-        @include fill(
-            $kendo-pivotgrid-headers-text,
-            $kendo-pivotgrid-headers-bg,
-            $kendo-pivotgrid-headers-border
-        );
-    }
-
-
-    // Pivotgrid toolbar
-    .k-pivot-toolbar {
-        @include fill(
-            $kendo-pivotgrid-headers-text,
-            $kendo-pivotgrid-headers-bg,
-            $kendo-pivotgrid-headers-border
-        );
-
-        .k-empty {
-            color: $kendo-subtle-text;
-        }
-    }
-
-    .k-pivot .k-alt {
-        background-color: $kendo-pivotgrid-alt-bg;
-    }
-
-    .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: $kendo-pivotgrid-chrome-border;
-    }
-
-    .k-header.k-alt {
-        background-color: $kendo-pivotgrid-row-headers-bg;
-    }
-
-    .k-pivot-layout .k-grid-footer {
-        color: $kendo-pivotgrid-alt-text;
-        background-color: $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: $kendo-color-warning;
-    }
-
-    .k-i-kpi-status-deny {
-        color: $kendo-color-error;
-    }
-
-    .k-i-kpi-status-open {
-        color: $kendo-color-success;
-    }
-
-
-    // Configurator
-    .k-pivotgrid-configurator-panel.kendo-jquery {
-
-        .k-column-fields {
-            border-color: $kendo-component-border;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/pivotgrid/_theme.scss" as *;
 
 
 @mixin kendo-pivotgrid--theme() {

package/scss/pivotgrid/_variables.scss

@@ -264,3 +264,90 @@ $kendo-pivotgrid-button-active-text: null !default;
 
 $kendo-pivotgrid-remove-bg: null !default;
 $kendo-pivotgrid-remove-text: null !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-shadow: $kendo-pivotgrid-configurator-shadow,
+    $kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-end-shadow,
+    $kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-start-shadow,
+    $kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-top-shadow,
+    $kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-bottom-shadow,
+    $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,
+    $kendo-pivotgrid-button-bg: $kendo-pivotgrid-button-bg,
+    $kendo-pivotgrid-button-text: $kendo-pivotgrid-button-text,
+    $kendo-pivotgrid-button-hover-bg: $kendo-pivotgrid-button-hover-bg,
+    $kendo-pivotgrid-button-hover-text: $kendo-pivotgrid-button-hover-text,
+    $kendo-pivotgrid-button-active-bg: $kendo-pivotgrid-button-active-bg,
+    $kendo-pivotgrid-button-active-text: $kendo-pivotgrid-button-active-text,
+    $kendo-pivotgrid-remove-bg: $kendo-pivotgrid-remove-bg,
+    $kendo-pivotgrid-remove-text: $kendo-pivotgrid-remove-text
+);

package/scss/popover/_layout.scss

@@ -1,96 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-popover--layout-base() {
-
-    // Popover
-    .k-popover {
-        @include border-radius( $kendo-popover-border-radius );
-        padding: 0;
-        border-width: $kendo-popover-border-width;
-        border-style: $kendo-popover-border-style;
-        box-sizing: border-box;
-        outline: 0;
-        font-size: $kendo-popover-font-size;
-        font-family: $kendo-popover-font-family;
-        line-height: $kendo-popover-line-height;
-        display: flex;
-        flex-flow: column nowrap;
-        z-index: 12000;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-popover-inner {
-        height: inherit;
-        position: relative;
-        border-radius: inherit;
-        border-color: inherit;
-    }
-
-    // Header
-    .k-popover-header {
-        @include border-top-radius( $kendo-popover-border-radius );
-        padding-block: $kendo-popover-header-padding-y;
-        padding-inline: $kendo-popover-header-padding-x;
-        border-width: 0 0 $kendo-popover-header-border-width;
-        border-style: $kendo-popover-header-border-style;
-        border-color: inherit;
-    }
-
-    // Body
-    .k-popover-body {
-        padding-block: $kendo-popover-body-padding-y;
-        padding-inline: $kendo-popover-body-padding-x;
-    }
-
-    // Actions
-    .k-popover-actions {
-        border-width: $kendo-popover-actions-border-width 0 0;
-    }
-
-
-    // Popover callout
-    .k-popover-callout {
-        margin: 0;
-        width: $kendo-popover-callout-width;
-        height: $kendo-popover-callout-height;
-        border-width: $kendo-popover-callout-border-width;
-        border-style: $kendo-popover-callout-border-style;
-        position: absolute;
-
-        &.k-callout-n {
-            top: 0;
-            left: 50%;
-            transform: translate(-50%, -50%) rotate(45deg);
-        }
-
-        &.k-callout-e {
-            top: 50%;
-            right: 0;
-            transform: translate(50%, -50%) rotate(-45deg);
-        }
-
-        &.k-callout-s {
-            bottom: 0;
-            left: 50%;
-            transform: translate(-50%, 50%) rotate(45deg);
-        }
-
-        &.k-callout-w {
-            top: 50%;
-            left: 0;
-            transform: translate(-50%, -50%) rotate(45deg);
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/popover/_layout.scss" as *;
 
 
 @mixin kendo-popover--layout() {

package/scss/popover/_theme.scss

@@ -1,44 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-popover--theme-base() {
-
-    // Popover
-    .k-popover {
-        @include box-shadow( $kendo-popover-shadow );
-
-        @include fill(
-            $kendo-popover-text,
-            $kendo-popover-bg,
-            $kendo-popover-border
-        );
-    }
-
-    .k-popover-inner {
-        background-color: inherit;
-        border-color: inherit;
-    }
-
-    // Header
-    .k-popover-header {
-        @include fill(
-            $kendo-popover-header-text,
-            $kendo-popover-header-bg,
-            $kendo-popover-header-border
-        );
-    }
-
-    // Callout
-    .k-popover-callout {
-        @include fill(
-            $bg: inherit,
-            $border: inherit
-        );
-
-        @include box-shadow( inherit )
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/popover/_theme.scss" as *;
 
 
 @mixin kendo-popover--theme() {

package/scss/popover/_variables.scss

@@ -87,3 +87,32 @@ $kendo-popover-callout-bg: $kendo-popover-bg !default;
 /// The border color of the Popover callout.
 /// @group popover
 $kendo-popover-callout-border: $kendo-popover-border !default;
+
+@forward "@progress/kendo-theme-core/scss/components/popover/_variables.scss" with (
+    $kendo-popover-border-width: $kendo-popover-border-width,
+    $kendo-popover-border-style: $kendo-popover-border-style,
+    $kendo-popover-border-radius: $kendo-popover-border-radius,
+    $kendo-popover-font-family: $kendo-popover-font-family,
+    $kendo-popover-font-size: $kendo-popover-font-size,
+    $kendo-popover-line-height: $kendo-popover-line-height,
+    $kendo-popover-text: $kendo-popover-text,
+    $kendo-popover-bg: $kendo-popover-bg,
+    $kendo-popover-border: $kendo-popover-border,
+    $kendo-popover-shadow: $kendo-popover-shadow,
+    $kendo-popover-header-padding-x: $kendo-popover-header-padding-x,
+    $kendo-popover-header-padding-y: $kendo-popover-header-padding-y,
+    $kendo-popover-header-border-width: $kendo-popover-header-border-width,
+    $kendo-popover-header-border-style: $kendo-popover-header-border-style,
+    $kendo-popover-header-text: $kendo-popover-header-text,
+    $kendo-popover-header-bg: $kendo-popover-header-bg,
+    $kendo-popover-header-border: $kendo-popover-header-border,
+    $kendo-popover-body-padding-x: $kendo-popover-body-padding-x,
+    $kendo-popover-body-padding-y: $kendo-popover-body-padding-y,
+    $kendo-popover-actions-border-width: $kendo-popover-actions-border-width,
+    $kendo-popover-callout-width: $kendo-popover-callout-width,
+    $kendo-popover-callout-height: $kendo-popover-callout-height,
+    $kendo-popover-callout-border-width: $kendo-popover-callout-border-width,
+    $kendo-popover-callout-border-style: $kendo-popover-callout-border-style,
+    $kendo-popover-callout-bg: $kendo-popover-callout-bg,
+    $kendo-popover-callout-border: $kendo-popover-callout-border
+);

package/scss/popup/_layout.scss

@@ -1,82 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-popup--layout-base() {
-
-    // Animation Container
-    .k-animation-container {
-        position: absolute;
-        overflow: hidden;
-        z-index: 100;
-
-        &-fixed {
-            position: fixed;
-        }
-
-        &-relative {
-            position: relative;
-            display: inline-block;
-        }
-    }
-
-    .k-animation-container {
-        @include border-bottom-radius-only( $kendo-border-radius-md );
-    }
-
-    .k-animation-container-shown {
-        overflow: visible;
-    }
-
-    // Popup
-    .k-popup {
-        @include border-radius( $kendo-popup-border-radius );
-        margin: 0;
-        padding: 0;
-        // padding-block: $kendo-popup-padding-y;
-        // padding-inline: $kendo-popup-padding-x;
-        border-width: $kendo-popup-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        font-size: $kendo-popup-font-size;
-        line-height: $kendo-popup-line-height;
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-
-        .k-item {
-            outline: none;
-        }
-    }
-
-    .k-popup > .k-colorpalette {
-        padding-block: $kendo-popup-content-padding-y;
-        padding-inline: $kendo-popup-content-padding-x;
-    }
-
-    // Transparent popup
-    .k-popup.k-popup-transparent {
-        border-width: 0;
-        background-color: transparent;
-        box-shadow: none;
-    }
-
-    // Flush popup
-    .k-popup.k-popup-flush {
-        padding: 0;
-    }
-
-    // Child components
-    .k-popup > .k-widget,
-    .k-popup > .k-coloreditor {
-        border-width: 0;
-    }
-
-    // Legacy shadow
-    .k-shadow {
-        box-shadow: $kendo-popup-shadow;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/popup/_layout.scss" as *;
 
 
 @mixin kendo-popup--layout() {

package/scss/popup/_theme.scss

@@ -1,22 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-popup--theme-base() {
-
-    .k-popup {
-        @include fill(
-            $kendo-popup-text,
-            $kendo-popup-bg,
-            $kendo-popup-border
-        );
-        @include box-shadow( $kendo-popup-shadow );
-    }
-
-    .k-animation-container {
-        @include border-bottom-radius-only( k-border-radius(md) );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/popup/_theme.scss" as *;
 
 
 @mixin kendo-popup--theme() {

package/scss/popup/_variables.scss

@@ -39,3 +39,18 @@ $kendo-popup-border: $kendo-component-border !default;
 /// Box shadow of the popup.
 /// @group popup
 $kendo-popup-shadow: k-elevation(4) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/popup/_variables.scss" with (
+    $kendo-popup-padding-x: $kendo-popup-padding-x,
+    $kendo-popup-padding-y: $kendo-popup-padding-y,
+    $kendo-popup-border-width: $kendo-popup-border-width,
+    $kendo-popup-border-radius: $kendo-popup-border-radius,
+    $kendo-popup-font-size: $kendo-popup-font-size,
+    $kendo-popup-line-height: $kendo-popup-line-height,
+    $kendo-popup-content-padding-x: $kendo-popup-content-padding-x,
+    $kendo-popup-content-padding-y: $kendo-popup-content-padding-y,
+    $kendo-popup-bg: $kendo-popup-bg,
+    $kendo-popup-text: $kendo-popup-text,
+    $kendo-popup-border: $kendo-popup-border,
+    $kendo-popup-shadow: $kendo-popup-shadow
+);