@progress/kendo-theme-fluent 5.7.0

package/scss/dataviz/_theme.scss

@@ -0,0 +1,150 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-dataviz--theme() {
+
+    // Exported variables
+    .k-var--chart-inactive {
+        @include fill( $bg: var( --kendo-chart-inactive-bg, #{$kendo-chart-inactive-bg} ) );
+    }
+
+    .k-var--chart-major-lines {
+        @include fill( $bg: var( --kendo-chart-major-lines, #{$kendo-chart-major-lines} ) );
+    }
+
+    .k-var--chart-minor-lines {
+        @include fill( $bg: var( --kendo-chart-minor-lines, #{$kendo-chart-minor-lines} ) );
+    }
+
+    .k-var--chart-area-opacity {
+        opacity: var( --kendo-chart-area-opacity, #{$kendo-chart-area-opacity} );
+    }
+
+    .k-var--chart-area-inactive-opacity {
+        opacity: var( --kendo-chart-area-inactive-opacity, #{$kendo-chart-area-inactive-opacity} );
+    }
+
+    .k-var--chart-line-inactive-opacity {
+        opacity: var( --kendo-chart-line-inactive-opacity, #{$kendo-chart-line-inactive-opacity} );
+    }
+
+    .k-var--chart-notes-background {
+        @include fill( $bg: var( --kendo-chart-notes-background, #{$kendo-chart-notes-background} ) );
+    }
+
+    .k-var--chart-notes-border {
+        @include fill( $bg: var( --kendo-chart-notes-border, #{$kendo-chart-notes-border} ) );
+    }
+
+    .k-var--chart-notes-lines {
+        @include fill( $bg: var( --kendo-chart-notes-lines, #{$kendo-chart-notes-lines} ) );
+    }
+
+    .k-var--chart-crosshair-background {
+        @include fill( $bg: var( --kendo-chart-crosshair-background, #{$kendo-chart-crosshair-background} ) );
+    }
+
+    .k-var--chart-error-bars-background {
+        @include fill( $bg: var( --kendo-error-bars-background, #{$kendo-error-bars-background} ) );
+    }
+
+    // Elements
+    .k-chart,
+    .k-sparkline,
+    .k-stockchart {
+        @include fill(
+            var( --kendo-chart-text, #{$kendo-chart-text} ),
+            var( --kendo-chart-bg, #{$kendo-chart-bg} ),
+            var( --kendo-chart-border, #{$kendo-chart-border} )
+        );
+
+        .k-popup {
+            background: transparent;
+        }
+    }
+
+
+    // Tooltip
+    // TODO
+    .k-chart-tooltip {
+        @include fill( $color: var( --kendo-chart-tooltip-color, #{$kendo-chart-tooltip-color} ) );
+    }
+    .k-chart-tooltip-inverse {
+        @include fill( $color: var( --kendo-chart-tooltip-color-inverse, #{$kendo-chart-tooltip-color-inverse} ) );
+    }
+
+    .k-chart-crosshair-tooltip,
+    .k-chart-shared-tooltip {
+        @include fill(
+            var( --kendo-chart-crosshair-shared-tooltip-color, #{$kendo-chart-crosshair-shared-tooltip-color} ),
+            var( --kendo-chart-crosshair-shared-tooltip-background, #{$kendo-chart-crosshair-shared-tooltip-background} ),
+            var( --kendo-chart-crosshair-shared-tooltip-border, #{$kendo-chart-crosshair-shared-tooltip-border} )
+
+        );
+    }
+
+    .k-selection {
+        @include fill( $border: var( --kendo-selection-border-color, #{$kendo-selection-border-color} ) );
+    }
+
+    .k-selection-bg {
+        background-color: transparent;
+    }
+
+    .k-handle {
+        cursor: e-resize;
+        @include fill(
+           var( --kendo-chart-handle-text, #{$kendo-chart-handle-text} ),
+           var( --kendo-chart-handle-bg, #{$kendo-chart-handle-bg} ),
+           var( --kendo-chart-handle-border, #{$kendo-chart-handle-border} )
+        );
+
+        &:hover {
+            @include fill(
+               var( --kendo-chart-handle-hover-text, #{$kendo-chart-handle-hover-text} ),
+               var( --kendo-chart-handle-hover-bg, #{$kendo-chart-handle-hover-bg} ),
+               var( --kendo-chart-handle-hover-border, #{$kendo-chart-handle-hover-border} )
+            );
+        }
+    }
+
+    .k-handle div {
+        background-color: transparent;
+    }
+
+    .k-mask {
+        background-color: var( --kendo-component-bg, initial );
+        opacity: .8;
+    }
+
+    // Treemap
+    .k-treemap {
+        @include fill(
+           var( --kendo-treemap-text, #{$kendo-treemap-text} ),
+           var( --kendo-treemap-bg, #{$kendo-treemap-bg} ),
+           var( --kendo-treemap-border, #{$kendo-treemap-border} ),
+        );
+
+        // Title
+        .k-treemap-title {
+            @include fill(
+                var( --kendo-treemap-title-text, #{$kendo-treemap-title-text} ),
+                var( --kendo-treemap-title-bg, #{$kendo-treemap-title-bg} ),
+                var( --kendo-treemap-title-border, #{$kendo-treemap-title-border} ),
+            );
+        }
+
+        // Leaf
+        .k-leaf {
+            @include fill( $color: var( --kendo-component-bg, initial ) );
+        }
+        .k-leaf.k-inverse {
+            @include fill( $color: var( --kendo-component-text, initial ) );
+        }
+        .k-leaf:hover,
+        .k-leaf.k-hover {
+            @include box-shadow( var( --kendo-box-shadow-depth-1, initial ) );
+        }
+    }
+
+}

package/scss/dataviz/_variables.scss

@@ -0,0 +1,242 @@
+@use "../core/" as *;
+
+/// The first base series color and its light and dark shades.
+/// @group charts
+$kendo-series-a: get-theme-color( series-a, 100 ) !default;
+$kendo-series-a-dark: get-theme-color( series-a, 130 ) !default;
+$kendo-series-a-darker: get-theme-color( series-a, 160 ) !default;
+$kendo-series-a-light: get-theme-color( series-a, 70 ) !default;
+$kendo-series-a-lighter: get-theme-color( series-a, 40 ) !default;
+
+/// The second base series color and its light and dark shades.
+/// @group charts
+$kendo-series-b: get-theme-color( series-b, 100 ) !default;
+$kendo-series-b-dark: get-theme-color( series-b, 130 ) !default;
+$kendo-series-b-darker: get-theme-color( series-b, 160 ) !default;
+$kendo-series-b-light: get-theme-color( series-b, 70 ) !default;
+$kendo-series-b-lighter: get-theme-color( series-b, 40 ) !default;
+
+/// The third base series color and its light and dark shades.
+/// @group charts
+$kendo-series-c: get-theme-color( series-c, 100 ) !default;
+$kendo-series-c-dark: get-theme-color( series-c, 130 ) !default;
+$kendo-series-c-darker: get-theme-color( series-c, 160 ) !default;
+$kendo-series-c-light: get-theme-color( series-c, 70 ) !default;
+$kendo-series-c-lighter: get-theme-color( series-c, 40 ) !default;
+
+/// The fourth base series color and its light and dark shades.
+/// @group charts
+$kendo-series-d: get-theme-color( series-d, 100 ) !default;
+$kendo-series-d-dark: get-theme-color( series-d, 130 ) !default;
+$kendo-series-d-darker: get-theme-color( series-d, 160 ) !default;
+$kendo-series-d-light: get-theme-color( series-d, 70 ) !default;
+$kendo-series-d-lighter: get-theme-color( series-d, 40 ) !default;
+
+/// The fifth base series color and its light and dark shades.
+/// @group charts
+$kendo-series-e: get-theme-color( series-e, 100 ) !default;
+$kendo-series-e-dark: get-theme-color( series-e, 130 ) !default;
+$kendo-series-e-darker: get-theme-color( series-e, 160 ) !default;
+$kendo-series-e-light: get-theme-color( series-e, 70 ) !default;
+$kendo-series-e-lighter: get-theme-color( series-e, 40 ) !default;
+
+/// The sixth base series color and its light and dark shades.
+/// @group charts
+$kendo-series-f: get-theme-color( series-f, 100 ) !default;
+$kendo-series-f-dark: get-theme-color( series-f, 130 ) !default;
+$kendo-series-f-darker: get-theme-color( series-f, 160 ) !default;
+$kendo-series-f-light: get-theme-color( series-f, 70 ) !default;
+$kendo-series-f-lighter: get-theme-color( series-f, 40 ) !default;
+
+/// The series colors in order:
+/// base, light, dark, lighter, darker
+/// @group charts
+$kendo-series-1: $kendo-series-a !default;
+$kendo-series-2: $kendo-series-b !default;
+$kendo-series-3: $kendo-series-c !default;
+$kendo-series-4: $kendo-series-d !default;
+$kendo-series-5: $kendo-series-e !default;
+$kendo-series-6: $kendo-series-f !default;
+$kendo-series-7: $kendo-series-a-light !default;
+$kendo-series-8: $kendo-series-b-light !default;
+$kendo-series-9: $kendo-series-c-light !default;
+$kendo-series-10: $kendo-series-d-light !default;
+$kendo-series-11: $kendo-series-e-light !default;
+$kendo-series-12: $kendo-series-f-light !default;
+$kendo-series-13: $kendo-series-a-dark !default;
+$kendo-series-14: $kendo-series-b-dark !default;
+$kendo-series-15: $kendo-series-c-dark !default;
+$kendo-series-16: $kendo-series-d-dark !default;
+$kendo-series-17: $kendo-series-e-dark !default;
+$kendo-series-18: $kendo-series-f-dark !default;
+$kendo-series-19: $kendo-series-a-lighter !default;
+$kendo-series-20: $kendo-series-b-lighter !default;
+$kendo-series-21: $kendo-series-c-lighter !default;
+$kendo-series-22: $kendo-series-d-lighter !default;
+$kendo-series-23: $kendo-series-e-lighter !default;
+$kendo-series-24: $kendo-series-f-lighter !default;
+$kendo-series-25: $kendo-series-a-darker !default;
+$kendo-series-26: $kendo-series-b-darker !default;
+$kendo-series-27: $kendo-series-c-darker !default;
+$kendo-series-28: $kendo-series-d-darker !default;
+$kendo-series-29: $kendo-series-e-darker !default;
+$kendo-series-30: $kendo-series-f-darker !default;
+
+/// The border width of the chart component.
+/// @group charts
+$kendo-chart-border-width: 0px default;
+/// The font-family of the chart component.
+/// @group charts
+$kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font-size of the chart component.
+/// @group charts
+$kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chart-font-size-sm: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chart-font-size-md: var( --kendo-font-size-md, inherit ) !default;
+$kendo-chart-font-size-lg: var( --kendo-font-size-lg, inherit ) !default;
+/// The line-height of the chart component.
+/// @group charts
+$kendo-chart-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The font-size of the tooltip of the chart component.
+/// @group charts
+$kendo-chart-tooltip-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line-height of the tooltip of the chart component.
+/// @group charts
+$kendo-chart-tooltip-line-height: var( --kendo-line-height-sm, normal ) !default;
+
+/// The font-size of the label of the chart component.
+/// @group chart
+$kendo-chart-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
+
+/// The font-size of the title of the chart component.
+/// @group charts
+$kendo-chart-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+
+/// The font-size of the pane title of the chart component.
+/// @group charts
+$kendo-chart-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The font-weight of the pane title of the chart component.
+/// @group charts
+$kendo-chart-pane-title-font-weight: var( --kendo-font-weight, inherit ) !default;
+
+/// The inactive background color of the chart component.
+/// @group chart
+$kendo-chart-inactive-bg: var( --kendo-disabled-bg, initial ) !default;
+
+/// The color of the chart component major grid lines.
+/// @group charts
+$kendo-chart-major-lines: get-theme-color-var( neutral-30 ) !default;
+/// The color of the chart component minor grid lines.
+/// @group charts
+$kendo-chart-minor-lines: get-theme-color-var( neutral-30 ) !default;
+
+/// The opacity of the chart area.
+/// @group charts
+$kendo-chart-area-opacity: .6 !default;
+/// The inactive opacity of the chart area.
+/// @group charts
+$kendo-chart-area-inactive-opacity: .1 !default;
+
+/// The inactive opacity of the chart line.
+/// @group charts
+$kendo-chart-line-inactive-opacity: .3 !default;
+
+/// The background color of the chart component.
+/// @group charts
+$kendo-chart-bg: var( --kendo-component-bg, initial ) !default;
+/// The text color of the chart component.
+/// @group charts
+$kendo-chart-text: var( --kendo-component-text, initial ) !default;
+/// The border color of the chart component.
+/// @group charts
+$kendo-chart-border: var( --kendo-component-border, initial ) !default;
+
+/// The text color of the chart tooltip.
+/// @group charts
+$kendo-chart-tooltip-color: $white !default;
+/// The inverse text color of the chart tooltip.
+/// @group charts
+$kendo-chart-tooltip-color-inverse: $black !default;
+
+/// The background color of the chart crosshairs.
+/// @group charts
+$kendo-chart-crosshair-background: $black !default;
+/// The text color of the chart shared crosshair tooltip.
+/// @group charts
+$kendo-chart-crosshair-shared-tooltip-color: get-theme-color-var( neutral-160 ) !default;
+/// The background color of the chart shared crosshair tooltip.
+/// @group charts
+$kendo-chart-crosshair-shared-tooltip-background: var( --kendo-component-bg, initial ) !default;
+/// The border color of the chart shared crosshair tooltip.
+/// @group charts
+$kendo-chart-crosshair-shared-tooltip-border: transparent !default;
+
+/// The background color of the chart notes.
+/// @group charts
+$kendo-chart-notes-background: get-theme-color-var( neutral-130 ) !default;
+/// The border color of the chart notes.
+/// @group charts
+$kendo-chart-notes-border: $kendo-chart-notes-background !default;
+/// The background color of the chart note lines.
+/// @group charts
+$kendo-chart-notes-lines: $kendo-chart-notes-background !default;
+
+/// The background color of the chart handle.
+/// @group charts
+$kendo-chart-handle-bg: get-theme-color-var( neutral-10 ) !default;
+/// The text color of the chart handle.
+/// @group charts
+$kendo-chart-handle-text: $kendo-chart-text !default;
+/// The border color of the chart handle.
+/// @group charts
+$kendo-chart-handle-border: $kendo-chart-handle-bg !default;
+/// The hover background color of the chart handle.
+/// @group charts
+$kendo-chart-handle-hover-bg: var( --kendo-hover-bg, initial ) !default;
+/// The hover text color of the chart handle.
+/// @group charts
+$kendo-chart-handle-hover-text: var( --kendo-hover-text, initial ) !default;
+/// The hover border color of the chart handle.
+/// @group charts
+$kendo-chart-handle-hover-border: var( --kendo-hover-border, initial ) !default;
+
+/// The color of the chart error bars.
+/// @group charts
+$kendo-error-bars-background: get-theme-color-var( neutral-110 ) !default;
+
+/// The size of the selection handle of the chart component.
+/// @group charts
+$kendo-selection-handle-size: 24px !default;
+/// The color of the selection handle of the chart component.
+/// @group charts
+$kendo-selection-border-color: var( --kendo-component-border, initial ) !default;
+
+/// The font-family of the treemap.
+/// @group charts
+$kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font-size of the treemap.
+/// @group charts
+$kendo-treemap-font-size: var( -kendo-font-size, inherit ) !default;
+/// The line-height of the treemap.
+/// @group charts
+$kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
+/// The background color of the treemap.
+/// @group charts
+$kendo-treemap-bg: var( --kendo-component-bg, initial ) !default;
+/// The text color of the treemap.
+/// @group charts
+$kendo-treemap-text: var( --kendo-component-text, initial ) !default;
+/// The border color of the treemap.
+/// @group charts
+$kendo-treemap-border: var( --kendo-component-border, initial ) !default;
+
+/// The background color of the treemap title.
+/// @group charts
+$kendo-treemap-title-bg: get-theme-color-var( neutral-10 ) !default;
+/// The text color of the treemap title.
+/// @group charts
+$kendo-treemap-title-text: $black !default;
+/// The border color of the treemap title.
+/// @group charts
+$kendo-treemap-title-border: var( --kendo-component-border, initial ) !default;

package/scss/dataviz/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "dataviz",
+    dependencies: (
+        "button",
+        "popup",
+        "tooltip"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "dataviz" ) {
+        @include kendo-dataviz--layout();
+        @include kendo-dataviz--theme();
+    }
+}

package/scss/dateinput/_layout.scss

@@ -0,0 +1,4 @@
+@mixin kendo-dateinput--layout() {
+
+    .k-dateinput {}
+}

package/scss/dateinput/_theme.scss

@@ -0,0 +1,4 @@
+@mixin kendo-dateinput--theme() {
+
+    .k-dateinput {}
+}

package/scss/dateinput/_variables.scss

@@ -0,0 +1 @@
+// Date input

package/scss/dateinput/index.scss

@@ -0,0 +1,24 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "dateinput",
+    dependencies: (
+        "input"
+    )
+);
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "dateinput" ) {
+        @include kendo-dateinput--layout();
+        @include kendo-dateinput--theme();
+    }
+}

package/scss/datepicker/_layout.scss

@@ -0,0 +1,4 @@
+@mixin kendo-datepicker--layout() {
+
+    .k-datepicker {}
+}

package/scss/datepicker/_theme.scss

@@ -0,0 +1,4 @@
+@mixin kendo-datepicker--theme() {
+
+    .k-datepicker {}
+}

package/scss/datepicker/_variables.scss

@@ -0,0 +1 @@
+// Date picker

package/scss/datepicker/index.scss

@@ -0,0 +1,28 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "datepicker",
+    dependencies: (
+        "icon",
+        "button",
+        "input",
+        "popup",
+        "calendar"
+    )
+ );
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "datepicker" ) {
+        @include kendo-datepicker--layout();
+        @include kendo-datepicker--theme();
+    }
+}

package/scss/daterangepicker/_layout.scss

@@ -0,0 +1,39 @@
+@use "../core/" as *;
+@use "../input/_variables.scss" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-daterangepicker--layout() {
+
+    // Daterange picker
+    .k-daterange-picker {
+        width: var( --kendo-daterange-picker-width, #{$kendo-daterange-picker-width} );
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-end;
+        gap: map-get( $kendo-spacing, 2 );
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-dateinput {
+            width: var( --kendo-daterange-picker-input-width, #{$kendo-daterange-picker-input-width} );
+        }
+    }
+
+    // React specific
+    .k-daterangepicker-wrap {
+        display: inherit;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+    }
+
+
+    // Alias
+    .k-daterangepicker {
+        @extend .k-daterange-picker;
+    }
+}

package/scss/daterangepicker/_theme.scss

@@ -0,0 +1,28 @@
+@use "../core/" as *;
+@use "../input/_variables.scss" as *;
+
+@mixin kendo-daterangepicker--theme() {
+
+    .k-daterange-picker {
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include disabled(
+                $color: var( --kendo-daterange-picker-disabled-text, var( --kendo-disabled-text, inherit ) ),
+                $bg: var( --kendo-daterange-picker-disabled-bg, transparent ),
+                $border: var( --kendo-daterange-picker-disabled-border, currentColor )
+            );
+
+            .k-input {
+                @include fill(
+                    $color: var( --kendo-input-disabled-text, inherit ),
+                    $bg: var( --kendo-input-disabled-bg, transparent ),
+                    $border: var( --kendo-input-disabled-border, currentColor )
+                )
+            }
+
+        }
+
+    }
+}

package/scss/daterangepicker/_variables.scss

@@ -0,0 +1,5 @@
+@use "../input/_variables.scss" as *;
+
+// Daterangepicker
+$kendo-daterange-picker-width: var( --kendo-input-width, #{$kendo-input-width} ) !default;
+$kendo-daterange-picker-input-width: 10em !default;

package/scss/daterangepicker/index.scss

@@ -0,0 +1,28 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "daterangepicker",
+    dependencies: (
+        "button",
+        "input",
+        "floating-label",
+        "popup",
+        "icon"
+    )
+);
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "daterangepicker" ) {
+        @include kendo-daterangepicker--layout();
+        @include kendo-daterangepicker--theme();
+    }
+}

package/scss/datetimepicker/_layout.scss

@@ -0,0 +1,60 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+@use "../action-buttons/_variables.scss" as *;
+
+@mixin kendo-datetimepicker--layout() {
+
+    // Datetime container
+    .k-datetime-container {}
+
+    // Datetime selector
+    .k-datetime-selector {
+        display: flex;
+        transition: transform .2s;
+    }
+
+    // Wrap
+    .k-datetime-wrap {
+        width: var( --kendo-datetime-width, #{$kendo-datetime-width} );
+        overflow: hidden;
+
+        .k-datetime-buttongroup {
+            padding-inline: var( --kendo-datetime-button-group-padding-x, #{$kendo-actions-padding-x} );
+            padding-block: var( --kendo-datetime-button-group-padding-y, #{$kendo-actions-padding-y} ) 0;
+        }
+
+        .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 var( --kendo-datetime-width, #{$kendo-datetime-width} );
+    }
+
+    .k-datetime-time-wrap .k-time-header {
+        flex-direction: column;
+    }
+
+    // Tabs
+    .k-date-tab .k-datetime-selector {
+        transform: translateX(0);
+    }
+    .k-time-tab .k-datetime-selector {
+        transform: translateX(-100%);
+    }
+
+    k-datetimepicker {
+        &[dir="rtl"],
+        .k-rtl & {
+            .k-time-tab .k-datetime-selector {
+                transform: translateX(100%);
+            }
+        }
+    }
+}

package/scss/datetimepicker/_theme.scss

@@ -0,0 +1,4 @@
+@mixin kendo-datetimepicker--theme() {
+
+    .k-datetimepicker {}
+}

package/scss/datetimepicker/_variables.scss

@@ -0,0 +1,3 @@
+@use "../calendar/_variables.scss" as *;
+
+$kendo-datetime-width: calc( #{$kendo-calendar-header-min-width} + #{$kendo-infinite-calendar-view-padding-x * 2} ) !default;