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

package/scss/dataviz/_variables.scss

@@ -90,12 +90,9 @@ $kendo-chart-border-width: 0px !default;
 $kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-chart-line-height: var( --kendo-line-height, normal ) !default;
-$kendo-chart-sm-font-size: 11px !default;
-$kendo-chart-md-font-size: 12px !default;
-$kendo-chart-lg-font-size: 16px !default;
 $kendo-chart-tooltip-font-size: calc( #{$kendo-font-size} * .929) !default;
-$kendo-chart-label-font-size: .857em !default;
-$kendo-chart-title-font-size: 1.143em !default;
+$kendo-chart-label-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chart-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-chart-pane-title-font-size: $kendo-chart-label-font-size !default;
 $kendo-chart-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
@@ -153,3 +150,108 @@ $kendo-chart-overlay-bg: $kendo-base-bg !default;
 $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-chart-no-data-font-weight: var( --kendo-font-weight, normal ) !default;
 $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/dataviz/_variables.scss" with (
+    $kendo-series-a: $kendo-series-a,
+    $kendo-series-a-dark: $kendo-series-a-dark,
+    $kendo-series-a-darker: $kendo-series-a-darker,
+    $kendo-series-a-light: $kendo-series-a-light,
+    $kendo-series-a-lighter: $kendo-series-a-lighter,
+    $kendo-series-b: $kendo-series-b,
+    $kendo-series-b-dark: $kendo-series-b-dark,
+    $kendo-series-b-darker: $kendo-series-b-darker,
+    $kendo-series-b-light: $kendo-series-b-light,
+    $kendo-series-b-lighter: $kendo-series-b-lighter,
+    $kendo-series-c: $kendo-series-c,
+    $kendo-series-c-dark: $kendo-series-c-dark,
+    $kendo-series-c-darker: $kendo-series-c-darker,
+    $kendo-series-c-light: $kendo-series-c-light,
+    $kendo-series-c-lighter: $kendo-series-c-lighter,
+    $kendo-series-d: $kendo-series-d,
+    $kendo-series-d-dark: $kendo-series-d-dark,
+    $kendo-series-d-darker: $kendo-series-d-darker,
+    $kendo-series-d-light: $kendo-series-d-light,
+    $kendo-series-d-lighter: $kendo-series-d-lighter,
+    $kendo-series-e: $kendo-series-e,
+    $kendo-series-e-dark: $kendo-series-e-dark,
+    $kendo-series-e-darker: $kendo-series-e-darker,
+    $kendo-series-e-light: $kendo-series-e-light,
+    $kendo-series-e-lighter: $kendo-series-e-lighter,
+    $kendo-series-f: $kendo-series-f,
+    $kendo-series-f-dark: $kendo-series-f-dark,
+    $kendo-series-f-darker: $kendo-series-f-darker,
+    $kendo-series-f-light: $kendo-series-f-light,
+    $kendo-series-f-lighter: $kendo-series-f-lighter,
+    $kendo-series-1: $kendo-series-1,
+    $kendo-series-2: $kendo-series-2,
+    $kendo-series-3: $kendo-series-3,
+    $kendo-series-4: $kendo-series-4,
+    $kendo-series-5: $kendo-series-5,
+    $kendo-series-6: $kendo-series-6,
+    $kendo-series-7: $kendo-series-7,
+    $kendo-series-8: $kendo-series-8,
+    $kendo-series-9: $kendo-series-9,
+    $kendo-series-10: $kendo-series-10,
+    $kendo-series-11: $kendo-series-11,
+    $kendo-series-12: $kendo-series-12,
+    $kendo-series-13: $kendo-series-13,
+    $kendo-series-14: $kendo-series-14,
+    $kendo-series-15: $kendo-series-15,
+    $kendo-series-16: $kendo-series-16,
+    $kendo-series-17: $kendo-series-17,
+    $kendo-series-18: $kendo-series-18,
+    $kendo-series-19: $kendo-series-19,
+    $kendo-series-20: $kendo-series-20,
+    $kendo-series-21: $kendo-series-21,
+    $kendo-series-22: $kendo-series-22,
+    $kendo-series-23: $kendo-series-23,
+    $kendo-series-24: $kendo-series-24,
+    $kendo-series-25: $kendo-series-25,
+    $kendo-series-26: $kendo-series-26,
+    $kendo-series-27: $kendo-series-27,
+    $kendo-series-28: $kendo-series-28,
+    $kendo-series-29: $kendo-series-29,
+    $kendo-series-30: $kendo-series-30,
+    $kendo-chart-border-width: $kendo-chart-border-width,
+    $kendo-chart-font-family: $kendo-chart-font-family,
+    $kendo-chart-font-size: $kendo-chart-font-size,
+    $kendo-chart-line-height: $kendo-chart-line-height,
+    $kendo-chart-tooltip-font-size: $kendo-chart-tooltip-font-size,
+    $kendo-chart-label-font-size: $kendo-chart-label-font-size,
+    $kendo-chart-title-font-size: $kendo-chart-title-font-size,
+    $kendo-chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
+    $kendo-chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
+    $kendo-chart-major-lines: $kendo-chart-major-lines,
+    $kendo-chart-minor-lines: $kendo-chart-minor-lines,
+    $kendo-chart-inactive: $kendo-chart-inactive,
+    $kendo-chart-area-opacity: $kendo-chart-area-opacity,
+    $kendo-chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
+    $kendo-chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
+    $kendo-chart-tooltip-padding-x: $kendo-chart-tooltip-padding-x,
+    $kendo-chart-tooltip-padding-y: $kendo-chart-tooltip-padding-y,
+    $kendo-chart-tooltip-transition: $kendo-chart-tooltip-transition,
+    $kendo-chart-bg: $kendo-chart-bg,
+    $kendo-chart-text: $kendo-chart-text,
+    $kendo-chart-border: $kendo-chart-border,
+    $kendo-chart-crosshair-background: $kendo-chart-crosshair-background,
+    $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-crosshair-shared-tooltip-color,
+    $kendo-chart-crosshair-shared-tooltip-background: $kendo-chart-crosshair-shared-tooltip-background,
+    $kendo-chart-crosshair-shared-tooltip-border: $kendo-chart-crosshair-shared-tooltip-border,
+    $kendo-chart-notes-background: $kendo-chart-notes-background,
+    $kendo-chart-notes-border: $kendo-chart-notes-border,
+    $kendo-chart-notes-lines: $kendo-chart-notes-lines,
+    $kendo-chart-error-bars-background: $kendo-chart-error-bars-background,
+    $kendo-chart-selection-handle-size: $kendo-chart-selection-handle-size,
+    $kendo-chart-selection-border-color: $kendo-chart-selection-border-color,
+    $kendo-chart-selection-shadow: $kendo-chart-selection-shadow,
+    $kendo-chart-computed-title-height: $kendo-chart-computed-title-height,
+    $kendo-treemap-font-family: $kendo-treemap-font-family,
+    $kendo-treemap-font-size: $kendo-treemap-font-size,
+    $kendo-treemap-line-height: $kendo-treemap-line-height,
+    $kendo-treemap-padding-x: $kendo-treemap-padding-x,
+    $kendo-treemap-padding-y: $kendo-treemap-padding-y,
+    $kendo-chart-overlay-bg: $kendo-chart-overlay-bg,
+    $kendo-chart-no-data-font-size: $kendo-chart-no-data-font-size,
+    $kendo-chart-no-data-font-weight: $kendo-chart-no-data-font-weight,
+    $kendo-chart-no-data-padding-y: $kendo-chart-no-data-padding-y
+);

package/scss/dateinput/_layout.scss

@@ -1,9 +1,4 @@
-@mixin kendo-date-input--layout-base() {
-
-    // Date input
-    .k-dateinput {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/dateinput/_layout.scss" as *;
 
 
 @mixin kendo-date-input--layout() {

package/scss/dateinput/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-date-input--theme-base() {
-
-    // Date input
-    .k-dateinput {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/dateinput/_theme.scss" as *;
 
 
 @mixin kendo-date-input--theme() {

package/scss/datepicker/_layout.scss

@@ -1,9 +1,5 @@
-@mixin kendo-date-picker--layout-base() {
+@use "@progress/kendo-theme-core/scss/components/datepicker/_layout.scss" as *;
 
-    // Date picker
-    .k-datepicker {}
-
-}
 
 @mixin kendo-date-picker--layout() {
     @include kendo-date-picker--layout-base();

package/scss/datepicker/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-date-picker--theme-base() {
-
-    // Date picker
-    .k-datepicker {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/datepicker/_theme.scss" as *;
 
 
 @mixin kendo-date-picker--theme() {

package/scss/daterangepicker/_layout.scss

@@ -1,50 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../input/_variables.scss" as *;
-
-@mixin kendo-date-range-picker--layout-base() {
-
-    // Daterange picker
-    .k-daterange-picker {
-        width: $kendo-input-default-width;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: flex-end;
-        gap: k-spacing(2);
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        .k-dateinput {
-            width: $kendo-daterange-picker-input-width;
-        }
-    }
-
-
-    // Angular specific
-    kendo-daterange {
-        // @extend .k-daterangepicker !optional;
-    }
-
-
-    // React specific
-    .k-daterangepicker-wrap {
-        display: inherit;
-        flex-flow: inherit;
-        align-items: inherit;
-        gap: inherit;
-    }
-
-
-    // Alias
-    .k-daterangepicker {
-        @extend .k-daterange-picker !optional;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/daterangepicker/_layout.scss" as *;
 
 
 @mixin kendo-date-range-picker--layout() {

package/scss/daterangepicker/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-date-range-picker--theme-base() {
-
-    // Date range picker
-    .k-daterangepicker {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/daterangepicker/_theme.scss" as *;
 
 
 @mixin kendo-date-range-picker--theme() {

package/scss/daterangepicker/_variables.scss

@@ -1,2 +1,6 @@
 // Daterangepicker
 $kendo-daterange-picker-input-width: 10em !default;
+
+@forward "@progress/kendo-theme-core/scss/components/daterangepicker/_variables.scss" with (
+    $kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width
+);

package/scss/datetimepicker/_layout.scss

@@ -1,54 +1,4 @@
-@use "./variables.scss" as *;
-@use "../action-buttons/_variables.scss" as *;
-
-@mixin kendo-date-time-picker--layout-base() {
-
-    // Datetime container
-    .k-datetime-container {}
-
-    // Datetime selector
-    .k-datetime-selector {
-        display: flex;
-        transition: transform .2s;
-    }
-
-    // Wrap
-    .k-datetime-wrap {
-        width: $kendo-datetime-width;
-        overflow: hidden;
-
-        .k-datetime-buttongroup {
-            padding-block: $kendo-actions-padding-y;
-            padding-inline: $kendo-actions-padding-x;
-        }
-
-        .k-calendar,
-        .k-timeselector {
-            width: 100%;
-            border-width: 0;
-        }
-    }
-
-    // Inner wrap
-    .k-datetime-calendar-wrap,
-    .k-datetime-time-wrap {
-        text-align: center;
-        flex: 0 0 $kendo-datetime-width;
-    }
-
-    // Tabs
-    .k-date-tab .k-datetime-selector {
-        transform: translateX(0);
-    }
-    .k-time-tab .k-datetime-selector {
-        transform: translateX(-100%);
-    }
-
-    :is(.k-rtl, [dir="rtl"]) .k-time-tab .k-datetime-selector,
-    .k-time-tab .k-datetime-selector:is(.k-rtl, [dir="rtl"]) {
-        transform: translateX(100%);
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/datetimepicker/_layout.scss" as *;
 
 
 @mixin kendo-date-time-picker--layout() {

package/scss/datetimepicker/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-date-time-picker--theme-base() {
-
-    // Datetime picker
-    .k-datetimepicker {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/datetimepicker/_theme.scss" as *;
 
 
 @mixin kendo-date-time-picker--theme() {

package/scss/datetimepicker/_variables.scss

@@ -2,3 +2,7 @@
 
 // DateTime
 $kendo-datetime-width: calc( calc( #{$kendo-calendar-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/datetimepicker/_variables.scss" with (
+    $kendo-datetime-width: $kendo-datetime-width
+);

package/scss/dialog/_layout.scss

@@ -1,76 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../window/_variables.scss" as *;
-
-@mixin kendo-dialog--layout-base() {
-
-    .k-dialog-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        outline: 0;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 10001;
-
-        .k-dialog {
-            position: relative;
-        }
-    }
-
-    .k-dialog {
-        padding: 0;
-        position: fixed;
-        box-sizing: border-box;
-
-        // Centered
-        &.k-dialog-centered {
-            transform: translate(-50%, -50%);
-            top: 50%;
-            left: 50%;
-        }
-
-        .k-multiselect {
-            width: 100%;
-        }
-    }
-
-
-    // Titlebar
-    .k-dialog-titlebar {}
-    .k-dialog-title {}
-
-
-    // Actions
-    .k-dialog-titlebar-actions {}
-    .k-dialog-action {}
-
-
-    // Content
-    .k-dialog-content {}
-
-
-    // Buttons
-    .k-dialog-actions {
-        @include border-bottom-radius( $kendo-window-border-radius );
-        padding-block: $kendo-dialog-buttongroup-padding-y;
-        padding-inline: $kendo-dialog-buttongroup-padding-x;
-        border-width: $kendo-dialog-buttongroup-border-width 0 0;
-        border-style: solid;
-        border-color: inherit;
-        flex: 0 0 auto;
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        gap: $kendo-dialog-button-spacing;
-        overflow: hidden;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/dialog/_layout.scss" as *;
 
 
 @mixin kendo-dialog--layout() {

package/scss/dialog/_theme.scss

@@ -1,27 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-dialog--theme-base() {
-
-    // Dialog titlebar
-    .k-dialog-titlebar {
-        @include fill(
-            $kendo-dialog-titlebar-text,
-            $kendo-dialog-titlebar-bg,
-            $kendo-dialog-titlebar-border
-        );
-    }
-
-    // Dialog theme colors
-    @each $name, $color in $kendo-dialog-theme-colors {
-        .k-dialog-#{$name} .k-dialog-titlebar {
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
-            background-color: $color;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/dialog/_theme.scss" as *;
 
 
 @mixin kendo-dialog--theme() {

package/scss/dialog/_variables.scss

@@ -34,3 +34,14 @@ $kendo-dialog-theme-colors: (
     "light": map.get($kendo-theme-colors, "light"),
     "dark": map.get($kendo-theme-colors, "dark")
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with (
+    $kendo-dialog-titlebar-bg: $kendo-dialog-titlebar-bg,
+    $kendo-dialog-titlebar-text: $kendo-dialog-titlebar-text,
+    $kendo-dialog-titlebar-border: $kendo-dialog-titlebar-border,
+    $kendo-dialog-buttongroup-padding-x: $kendo-dialog-buttongroup-padding-x,
+    $kendo-dialog-buttongroup-padding-y: $kendo-dialog-buttongroup-padding-y,
+    $kendo-dialog-buttongroup-border-width: $kendo-dialog-buttongroup-border-width,
+    $kendo-dialog-button-spacing: $kendo-dialog-button-spacing,
+    $kendo-dialog-theme-colors: $kendo-dialog-theme-colors
+);

package/scss/dock-manager/_layout.scss

@@ -1,223 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-dock-manager--layout-base() {
-
-    // DockManager
-    .k-dock-manager {
-        width: 100%;
-        height: 100%;
-        border-width: $kendo-dock-manager-border-width;
-        border-style: $kendo-dock-manager-border-style;
-        position: relative;
-        display: flex;
-        flex-flow: row nowrap;
-        overflow: auto;
-        box-sizing: border-box;
-    }
-
-    // Toolbar
-    .k-dock-manager-toolbar {
-        border-width: 0 $kendo-dock-manager-border-width 0 0;
-        border-color: inherit;
-        flex-shrink: 0;
-        writing-mode: vertical-lr;
-        box-shadow: none;
-
-        &::before {
-            height: 0;
-        }
-
-        .k-separator-horizontal {
-            width:  $kendo-line-height-em;
-            height: 0;
-            border-width: $kendo-dock-manager-border-width 0 0;
-        }
-    }
-
-    // Panes
-    .k-dock-manager-pane-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-grow: 1;
-        overflow: hidden;
-    }
-
-    // Splitter
-    .k-dock-manager-splitter,
-    .k-dock-manager-unpinned-container {
-        height: 100%;
-        border-width: 0;
-        align-items: stretch;
-
-        > .k-pane {
-            height: auto;
-            flex-direction: column;
-            border-color: inherit;
-        }
-
-        .k-pane-header {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding-block: $kendo-dock-manager-pane-header-padding-y;
-            padding-inline: $kendo-dock-manager-pane-header-padding-x;
-            border-block-end-width: $kendo-dock-manager-pane-header-border-width;
-            border-block-end-style: $kendo-dock-manager-pane-header-border-style;
-            border-color: inherit;
-        }
-
-        .k-pane-title {
-            padding-block: $kendo-dock-manager-pane-title-padding-y;
-            padding-inline: $kendo-dock-manager-pane-title-padding-x;
-            font-family: $kendo-dock-manager-pane-title-font-family;
-            font-size: $kendo-dock-manager-pane-title-font-size;
-            line-height: $kendo-dock-manager-pane-title-line-height;
-            font-weight: $kendo-dock-manager-pane-title-font-weight;
-            flex: 1 1 auto;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
-        .k-pane-scrollable {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            border-color: inherit;
-        }
-
-        .k-pane-content {
-            height: 100%;
-            padding-block: $kendo-dock-manager-pane-content-padding-y;
-            padding-inline: $kendo-dock-manager-pane-content-padding-x;
-            overflow: auto;
-            flex: 1;
-        }
-
-        .k-pane-actions {
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .k-pane-tabbed {
-            padding-block-start: $kendo-dock-manager-tabbed-pane-padding-y;
-            padding-block-end: $kendo-dock-manager-tabbed-pane-padding-x;
-            padding-inline: $kendo-dock-manager-tabbed-pane-padding-x;
-        }
-
-        .k-splitbar {
-            border-width: 0 1px;
-            border-style: solid;
-            border-color: inherit;
-        }
-        .k-splitbar-vertical {
-            border-width: 1px 0;
-        }
-    }
-
-    // Unpinned pane
-    .k-dock-manager-unpinned-container {
-        width: $kendo-dock-manager-unpinned-container-width;
-        position: absolute;
-        display: flex;
-        height: 100%;
-        border-color: inherit;
-        z-index: 20;
-
-        .k-pane {
-            display: inline-flex;
-            flex-direction: column;
-            position: relative;
-            flex: 1 1 auto;
-        }
-
-        .k-splitbar {
-            height: 100%;
-            position: relative;
-            flex: none;
-        }
-    }
-
-    // Docking preview
-    .k-docking-preview {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        display: flex;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-width: $kendo-dock-manager-dock-preview-border-width;
-        border-style: $kendo-dock-manager-dock-preview-border-style;
-        border-radius: $kendo-dock-manager-dock-preview-border-radius;
-        z-index: 10;
-    }
-
-    .k-dock-manager-window:has(.k-pane) .k-window-content {
-        padding: 0;
-    }
-
-}
-
-@mixin kendo-dock-navigator--layout() {
-
-    // DockNavigator
-    .k-dock-navigator-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        position: absolute;
-        z-index: 10001;
-        pointer-events: none;
-    }
-
-    .k-dock-navigator {
-        display: grid;
-        grid-template-columns: repeat(3, auto);
-        grid-template-rows: repeat(3, auto);
-        justify-content: center;
-        position: absolute;
-    }
-
-    .k-dock-indicator {
-        padding: $kendo-dock-indicator-padding;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        position: relative;
-        pointer-events: all;
-        outline-width: $kendo-dock-indicator-outline-width;
-        outline-style: $kendo-dock-indicator-outline-style;
-
-        &.k-dock-indicator-middle {
-            filter: none;
-        }
-    }
-
-    .k-dock-indicator-top {
-        grid-area: 1 / 2 / auto;
-    }
-    .k-dock-indicator-right {
-        grid-area: 2 / 3 / auto;
-    }
-    .k-dock-indicator-bottom {
-        grid-area: 3 / 2 / auto;
-    }
-    .k-dock-indicator-left {
-        grid-area: 2 / 1 / auto;
-    }
-    .k-dock-indicator-middle {
-        grid-area: 2 / 2 / auto;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/dock-manager/_layout.scss" as *;
 
 @mixin kendo-dock-manager--layout() {
     @include kendo-dock-manager--layout-base();