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

package/scss/dataviz/_layout.scss

@@ -4,555 +4,18 @@
 @use "./_variables.scss" as *;
 @use "../tooltip/_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/dataviz/_layout.scss" as *;
 
 @mixin kendo-dataviz--layout() {
+    @include kendo-dataviz--layout-base();
 
-    .k-barcode {
-        display: inline-block;
-
-        > div {
-            height: 150px;
-        }
-    }
-
-    // Elements
-    .k-chart,
-    .k-sparkline,
-    .k-stockchart {
-        border-width: var( --kendo-chart-border-width, #{$kendo-chart-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-chart-font-family, #{$kendo-chart-font-family} );
-        font-size: var( --kendo-chart-font-size, #{$kendo-chart-font-size} );
-        line-height: var( --kendo-chart-line-height, #{$kendo-chart-line-height} );
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-    }
-
-    .k-chart,
-    .k-stockchart {
-        display: block;
-        height: 400px;
-    }
-
-    .k-chart-surface {
-        height: 100%;
-    }
-
-    .k-chart .k-popup {
-        border-width: 0;
-    }
-
-    .k-chart-tooltip-wrapper .k-animation-container-shown,
-    .k-chart-tooltip-wrapper.k-animation-container-shown {
-        @include border-radius( k-border-radius(md) );
-        transition: left ease-in 80ms, top ease-in 80ms;
-    }
-
-    .k-sparkline-tooltip-wrapper,
-    .k-chart-tooltip-wrapper {
-        z-index: 12000;
-
-        .k-popup {
-            @include border-radius( k-border-radius(md) );
-            padding: 0;
-            border-width: 0;
-            background: transparent;
-        }
-    }
-
-    .k-chart-tooltip table {
-        border-spacing: 0;
-        border-collapse: collapse;
-    }
-
-    .k-chart-tooltip {
-        @include border-radius( k-border-radius(md) );
-        font-size: var( --kendo-chart-tooltip-font-size, #{$kendo-chart-tooltip-font-size} );
-        line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
-        padding-inline: var( --kendo-chart-tooltip-padding-x, #{$kendo-tooltip-padding-x} );
-        padding-block: var( --kendo-chart-tooltip-padding-y, #{$kendo-tooltip-padding-y} );
-    }
-
-    .k-chart-tooltip th {
-        width: auto;
-        text-align: center;
-        padding: 1px;
-    }
-
+    .k-chart-tooltip,
     .k-chart-tooltip td {
-        width: auto;
-        text-align: start;
-        padding-inline: var( --kendo-chart-tooltip-padding-x, #{k-spacing(1)} );
-        padding-block: var( --kendo-chart-tooltip-padding-y, #{k-spacing(0.5)} );
-        line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
-        vertical-align: middle;
-    }
-
-    .k-chart-crosshair-tooltip,
-    .k-chart-shared-tooltip {
-        border-width: 1px;
-        border-style: solid;
-    }
-
-    .k-chart-shared-tooltip .k-chart-shared-tooltip-marker {
-        display: block;
-        width: 15px;
-        height: 3px;
-        vertical-align: middle;
-    }
-
-    // Selection
-    .k-selector {
-        position: absolute;
-        transform: translateZ(0);
-    }
-
-    .k-selection {
-        position: absolute;
-        height: 100%;
-        border-width: 1px;
-        border-style: solid;
-        border-bottom: 0;
-    }
-
-    .k-selection-bg {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-    }
-
-    .k-handle {
-        @include border-radius( 50% );
-        width: var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} );
-        height: var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} );
-        border-width: 1px;
-        border-style: solid;
-        z-index: 1;
-        position: absolute;
-        box-sizing: content-box;
-    }
-
-    .k-handle div {
-        width: 100%;
-        height: 100%;
-    }
-
-    .k-left-handle {
-        inset-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -2 );
-    }
-
-    .k-right-handle {
-        inset-inline-end: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -2 );
-    }
-
-    .k-left-handle div {
-        margin-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * -1 );
-        margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -1.5 );
-        padding-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
-        padding-inline-end: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) * 2 );
-    }
-
-    .k-right-handle div {
-        margin-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * -1 );
-        margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -1.5 );
-        padding-block-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
-        padding-inline-start: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) * 2 );
-    }
-
-    .k-left-handle.k-handle-active div {
-        margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
-        padding-inline-start: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 ) + ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) );
-    }
-
-    .k-right-handle.k-handle-active div {
-        margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
-        padding-inline-end: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 ) + ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) );
-    }
-
-    .k-mask {
-        position: absolute;
-        height: 100%;
-    }
-
-    // Navigator hint
-    .k-navigator-hint div {
-        position: absolute;
-    }
-
-    .k-navigator-hint .k-scroll {
-        @include border-radius( k-border-radius(md) );
-        position: absolute;
-        height: 4px;
-    }
-
-    .k-navigator-hint .k-tooltip {
-        margin-top: 20px;
-        min-width: 160px;
-        opacity: 1;
-        text-align: center;
-    }
-
-    // Sparklines
-    .k-sparkline,
-    .k-sparkline span {
-        display: inline-block;
-        vertical-align: top;
+        line-height: $kendo-chart-tooltip-line-height;
     }
 
-    .k-sparkline span {
-        height: 100%;
-        width: 100%;
-    }
-
-    .k-chart-dragging {
-        user-select: none;
-    }
-
-    .k-chart-donut-center {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        border-radius: 50%;
-        text-align: center;
-
-        border: 4px solid transparent;
-        box-sizing: border-box;
-    }
-
-    .k-pdf-export {
-        .k-chart,
-        .k-sparkline,
-        .k-stockchart {
-            .k-animation-container {
-                display: none;
-            }
-        }
-    }
-
-        // Chart Overlay
-        .k-chart-overlay {
-            margin: 0;
-            width: 100%;
-            height: if( --kendo-chart-computed-title-height, calc( 100% - var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} ) ), 100% );
-            position: absolute;
-            top: 0;
-            left: 0;
-            opacity: 1;
-            z-index: 10001;
-
-            &-top {
-                top: var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} );
-            }
-
-            .k-no-data {
-                min-height: auto;
-                padding-block-start: var( --kendo-chart-no-data-padding-y, #{$kendo-chart-no-data-padding-y} );
-                font-size: var( --kendo-chart-no-data-font-size, #{$kendo-chart-no-data-font-size} );
-                font-weight: var( --kendo-chart-no-data-font-weight, #{$kendo-chart-no-data-font-weight} );
-            }
-        }
-
-    .k-diagram {
-        display: block;
-        height: 600px;
-    }
-
-    .k-diagram .km-scroll-wrapper {
-        width: 100%;
-        height: 100%;
-        position: relative;
-    }
-
-    .k-diagram .km-scroll-wrapper {
-        width: 100%;
-        height: 100%;
-        position: relative;
-    }
-
-    .k-canvas-container {
-        width: 100%;
-        height: 100%;
-    }
-
-    // Sankey labels
-    .k-sankey text {
-        pointer-events: none;
-    }
-
-    // Base
-    .k-treemap {
-        height: 400px;
-        box-sizing: border-box;
-        border-width: 1px;
-        border-style: solid;
-        outline: 0;
-        font-family: var( --kendo-treemap-font-family, #{$kendo-treemap-font-family} );
-        font-size: var( --kendo-treemap-font-size, #{$kendo-treemap-font-size} );
-        line-height: var( --kendo-treemap-line-height, #{$kendo-treemap-line-height} );
-        display: block;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        // Tile
-        .k-treemap-tile {
-            margin: -1px 0 0 -1px;
-            height: 100%;
-            box-sizing: border-box;
-            border: 1px solid;
-            border-color: inherit;
-            color: inherit;
-            background-color: inherit;
-            overflow: hidden;
-            position: absolute;
-        }
-        > .k-treemap-tile {
-            position: relative;
-        }
-
-        // Title
-        .k-treemap-title {
-            padding-inline: var( --kendo-treemap-title-padding-x, #{k-spacing(1)} );
-            padding-block: var( --kendo-treemap-title-padding-y, #{k-spacing(0.5)} );
-            border-width: 0 0 1px;
-            border-style: solid;
-            border-color: inherit;
-            font-size: var( --kendo-treemap-font-size, #{$kendo-treemap-font-size} );
-            background-position: 0 0;
-            background-repeat: repeat-x;
-        }
-        .k-treemap-title-vertical {
-            padding-inline: var( --kendo-treemap-padding-y, #{k-spacing(1)} );
-            padding-block: var( --kendo-treemap-title-padding-x, #{k-spacing(1)} );
-            width: var( --kendo-line-height-em, #{$kendo-line-height-em} );
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-
-            > div {
-                transform-origin: right;
-                transform: rotate(-90deg);
-                position: absolute;
-                top: 0;
-                right: 1em;
-            }
-        }
-
-
-        // Wrap
-        .k-treemap-wrap {
-            border-color: inherit;
-            color: inherit;
-            background-color: inherit;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-        }
-        .k-treemap-title + .k-treemap-wrap {
-            inset-block-start: calc( calc( #{k-spacing(0.5)} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
-        }
-        .k-treemap-title-vertical + .k-treemap-wrap {
-            inset-inline-start: calc( calc( #{k-spacing(0.5)} * 2 ) + calc( var( --kendo-line-height, normal) * var( --kendo-font-size, inherit) ) + 1px);
-        }
-
-
-        // Leaf
-        .k-leaf {
-            padding: var( --kendo-treemap-leaf-padding, #{k-spacing(1)} );
-        }
-    }
-
-    .k-gauge {
-        display: block;
-        text-align: start;
-        position: relative;
-    }
-
-    .k-arcgauge,
-    .k-circulargauge {
-        display: inline-block;
-    }
-
-    .k-arcgauge-label,
-    .k-circulargauge-label {
-        position: absolute;
-        text-align: center;
-        padding: 0;
-        margin: 0;
-    }
-
-    .k-qrcode {
-        display: inline-block;
-
-        > div {
-            height: 150px;
-        }
-    }
-
-    // export variables to allow use in scripts
-    $exported: (
-        primary-contrast: k-color(app-surface),
-        base: k-color(surface-alt),
-        background: k-color(surface-alt),
-
-        normal-background: k-color(surface-alt),
-        normal-text-color: k-color(on-app-surface),
-
-        series-a: $kendo-series-a,
-        series-b: $kendo-series-b,
-        series-c: $kendo-series-c,
-        series-d: $kendo-series-d,
-        series-e: $kendo-series-e,
-        series-f: $kendo-series-f,
-
-        series-1: $kendo-series-1,
-        series-2: $kendo-series-2,
-        series-3: $kendo-series-3,
-        series-4: $kendo-series-4,
-        series-5: $kendo-series-5,
-        series-6: $kendo-series-6,
-        series-7: $kendo-series-7,
-        series-8: $kendo-series-8,
-        series-9: $kendo-series-9,
-        series-10: $kendo-series-10,
-        series-11: $kendo-series-11,
-        series-12: $kendo-series-12,
-        series-13: $kendo-series-13,
-        series-14: $kendo-series-14,
-        series-15: $kendo-series-15,
-        series-16: $kendo-series-16,
-        series-17: $kendo-series-17,
-        series-18: $kendo-series-18,
-        series-19: $kendo-series-19,
-        series-20: $kendo-series-20,
-        series-21: $kendo-series-21,
-        series-22: $kendo-series-22,
-        series-23: $kendo-series-23,
-        series-24: $kendo-series-24,
-        series-25: $kendo-series-25,
-        series-26: $kendo-series-26,
-        series-27: $kendo-series-27,
-        series-28: $kendo-series-28,
-        series-29: $kendo-series-29,
-        series-30: $kendo-series-30,
-
-        gauge-pointer: $kendo-gauge-pointer-bg,
-        gauge-track: $kendo-gauge-track-bg,
-
-        chart-font-size: $kendo-chart-font-size,
-        chart-title-font-size: $kendo-chart-title-font-size,
-        chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
-        chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
-        chart-label-font-size: $kendo-chart-label-font-size,
-
-        chart-inactive: $kendo-chart-inactive-bg,
-        chart-major-lines: $kendo-chart-major-lines,
-        chart-minor-lines: $kendo-chart-minor-lines,
-        chart-area-opacity: $kendo-chart-area-opacity,
-        chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
-        chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
-        chart-notes-background: $kendo-chart-notes-background,
-        chart-notes-border: $kendo-chart-notes-border,
-        chart-notes-lines: $kendo-chart-notes-lines,
-        chart-crosshair-background: $kendo-chart-crosshair-background,
-        chart-error-bars-background: $kendo-chart-error-bars-background,
-
-    );
-
-    // TODO: remove in favor of CSS variables once all suites are updated
-    @each $name, $value in $exported {
-        $type: meta.type-of($value);
-
-        .k-var--#{$name} {
-            @if $type == "color" or $type == "string" and string.index($value, "color") {
-                // background-color can store any color
-                background-color: #{$value};
-            } @else if string.index($name, "font-size") {
-                font-size: #{$value};
-            } @else if string.index($name, "font-weight") {
-                font-weight: #{$value};
-            } @else if string.index($name, "opacity") {
-                opacity: #{$value};
-            }
-
-        }
-    }
-
-    $_css-vars: (
-        chart-primary-contrast: k-color(app-surface),
-        chart-bg: $kendo-chart-bg,
-        chart-text: $kendo-chart-text,
-
-        chart-font-size: $kendo-chart-font-size,
-        chart-title-font-size: $kendo-chart-title-font-size,
-        chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
-        chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
-        chart-label-font-size: $kendo-chart-label-font-size,
-
-        chart-inactive: $kendo-chart-inactive-bg,
-        chart-major-lines: $kendo-chart-major-lines,
-        chart-minor-lines: $kendo-chart-minor-lines,
-        chart-area-opacity: $kendo-chart-area-opacity,
-        chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
-        chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
-        chart-notes-bg: $kendo-chart-notes-background,
-        chart-notes-border: $kendo-chart-notes-border,
-        chart-notes-lines: $kendo-chart-notes-lines,
-        chart-crosshair-bg: $kendo-chart-crosshair-background,
-        chart-error-bars-bg: $kendo-chart-error-bars-background,
-
-        chart-series-1: $kendo-series-1,
-        chart-series-2: $kendo-series-2,
-        chart-series-3: $kendo-series-3,
-        chart-series-4: $kendo-series-4,
-        chart-series-5: $kendo-series-5,
-        chart-series-6: $kendo-series-6,
-        chart-series-7: $kendo-series-7,
-        chart-series-8: $kendo-series-8,
-        chart-series-9: $kendo-series-9,
-        chart-series-10: $kendo-series-10,
-        chart-series-11: $kendo-series-11,
-        chart-series-12: $kendo-series-12,
-        chart-series-13: $kendo-series-13,
-        chart-series-14: $kendo-series-14,
-        chart-series-15: $kendo-series-15,
-        chart-series-16: $kendo-series-16,
-        chart-series-17: $kendo-series-17,
-        chart-series-18: $kendo-series-18,
-        chart-series-19: $kendo-series-19,
-        chart-series-20: $kendo-series-20,
-        chart-series-21: $kendo-series-21,
-        chart-series-22: $kendo-series-22,
-        chart-series-23: $kendo-series-23,
-        chart-series-24: $kendo-series-24,
-        chart-series-25: $kendo-series-25,
-        chart-series-26: $kendo-series-26,
-        chart-series-27: $kendo-series-27,
-        chart-series-28: $kendo-series-28,
-        chart-series-29: $kendo-series-29,
-        chart-series-30: $kendo-series-30,
-
-        chart-gauge-pointer: $kendo-gauge-pointer-bg,
-        chart-gauge-track: $kendo-gauge-track-bg
-
-    );
-
-    .k-chart,
-    .k-diagram,
-    .k-gauge,
-    .k-sparkline {
-        @each $name, $value in $_css-vars {
-            --kendo-#{$name}: #{$value};
-        }
+    .k-treemap-title-vertical {
+        padding: $kendo-treemap-padding-x;
     }
 
 }

package/scss/dataviz/_theme.scss

@@ -1,112 +1,48 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/dataviz/_theme.scss" as *;
 
 @mixin kendo-dataviz--theme() {
 
-    // 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} )
-        );
+    @include kendo-dataviz--theme-base();
 
-        .k-popup {
-            background: transparent;
-        }
-    }
-
-
-    // Tooltip
-    // TODO
     .k-chart-tooltip {
-        @include fill( $color: var( --kendo-chart-tooltip-color, #{$kendo-chart-tooltip-color} ) );
+        @include fill( $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;
+        @include fill( $color: $kendo-chart-tooltip-color-inverse );
     }
 
     .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} )
+           $kendo-chart-handle-text,
+          $kendo-chart-handle-bg,
+           $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} )
+               $kendo-chart-handle-hover-text,
+               $kendo-chart-handle-hover-bg,
+               $kendo-chart-handle-hover-border
             );
         }
     }
 
-    .k-handle div {
-        background-color: transparent;
-    }
-
-    .k-mask {
-        background-color: k-color(surface-alt);
-        opacity: .8;
-    }
-
     .k-chart-overlay {
-        background-color: var( --kendo-chart-overlay-bg, #{$kendo-chart-overlay-bg} );
 
         .k-no-data {
-            color: var( --kendo-chart-no-data-text, #{$kendo-chart-no-data-text} );
+            color: $kendo-chart-no-data-text;
         }
     }
 
     // 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: k-color(surface-alt) );
-        }
-        .k-leaf.k-inverse {
-            @include fill( $color: k-color(on-app-surface) );
-        }
         .k-leaf:hover,
         .k-leaf.k-hover {
-            @include box-shadow( var( --kendo-box-shadow-depth-1, initial ) );
+            @include box-shadow( var( --kendo-elevation-1, initial ) );
         }
     }