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

package/scss/tooltip/_variables.scss

@@ -1,115 +1,93 @@
 @use "sass:map";
+@use "./_functions.scss" as *;
 @use "../core/_index.scss" as *;
 
 /// The border radius of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-border-radius: k-border-radius(md) !default;
+$kendo-tooltip-border-radius: var( --kendo-tooltip-border-radius, #{k-border-radius(md)} ) !default;
 /// The horizontal padding of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-padding-x: k-spacing(2) !default;
+$kendo-tooltip-padding-x: var( --kendo-tooltip-padding-x, #{k-spacing(2)} ) !default;
 /// The vertical padding of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-padding-y: k-spacing(2) !default;
+$kendo-tooltip-padding-y: var( --kendo-tooltip-padding-y, #{k-spacing(2)} ) !default;
 /// The width of the border around the Tooltip.
 /// @group tooltip
-$kendo-tooltip-border-width: 0px !default;
+$kendo-tooltip-border-width: var( --kendo-tooltip-border-width, 0px ) !default;
 /// The font family of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-tooltip-font-family: var( --kendo-tooltip-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-tooltip-font-size: var( --kendo-tooltip-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-tooltip-line-height: var( --kendo-tooltip-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The font size of the Tooltip title.
 /// @group tooltip
-$kendo-tooltip-title-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 1.25 ) !default;
+$kendo-tooltip-title-font-size: var( --kendo-tooltip-title-font-size, calc( var( --kendo-font-size-sm, .75rem ) * 1.25 ) ) !default;
 /// The line height of the Tooltip title.
 /// @group tooltip
-$kendo-tooltip-title-line-height: var( --kendo-line-heigh-xs, normal ) !default;
+$kendo-tooltip-title-line-height: var( --kendo-tooltip-title-line-height, var( --kendo-line-heigh-xs, normal ) ) !default;
 /// The margin of the Tooltip title.
 /// @group tooltip
-$kendo-tooltip-title-margin: k-spacing(1) !default;
+$kendo-tooltip-title-margin: var( --kendo-tooltip-title-margin, #{k-spacing(1)} ) !default;
 
 /// The size of the Tooltip callout.
 /// @group tooltip
-$kendo-tooltip-callout-size: k-spacing(2) !default;
+$kendo-tooltip-callout-size: var( --kendo-tooltip-callout-size, #{k-spacing(2)} ) !default;
 
 /// The default background of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-bg: k-color(app-surface) !default;
+$kendo-tooltip-bg: var( --kendo-tooltip-bg, #{k-color(app-surface)} ) !default;
 /// The default text color of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-text: k-color(on-app-surface) !default;
+$kendo-tooltip-text: var( --kendo-tooltip-text, #{k-color(on-app-surface)} ) !default;
 /// The default border color of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-border: transparent !default;
+$kendo-tooltip-border: var( --kendo-tooltip-border, transparent ) !default;
 /// The box-shadow of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-tooltip-shadow: var( --kendo-tooltip-shadow, var( --kendo-box-shadow-depth-2, none ) ) !default;
 
 /// The text color of the Tooltip button.
 /// @group tooltip
-$kendo-tooltip-button-text: k-color(subtle) !default;
-
-/// Theme variations for the tooltip.
-$kendo-tooltip-brand-colors: (
-    secondary: secondary,
-    tertiary: tertiary,
-    success: success,
-    warning: warning,
-    error: error,
-    info: info
- ) !default;
-
-// Matrix with tooltip theme colors in the order: bg, color, border
-$_tc-tooltip-matrix: (
-    (normal: (color-subtle, color-on-subtle, color-subtle)),
-) !default;
-
-$_tc-tooltip-primary-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-tooltip-dark-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-tooltip-light-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
+$kendo-tooltip-button-text: var( --kendo-tooltip-button-text, #{k-color(subtle)} ) !default;
 
 /// Theme colors map for the tooltip variations.
-$kendo-tooltip-theme-colors: () !default;
-
-@each $ui-states in $_tc-tooltip-primary-matrix {
-    $kendo-tooltip-theme-colors: map.deep-merge(
-        $kendo-tooltip-theme-colors,
-        k-generate-theme-variation( primary, primary, $ui-states )
-    );
-}
-
-@each $ui-states in $_tc-tooltip-matrix {
-    @each $brand-color, $palette in $kendo-tooltip-brand-colors {
-        $kendo-tooltip-theme-colors: map.deep-merge(
-            $kendo-tooltip-theme-colors,
-            k-generate-theme-variation( $brand-color, $palette, $ui-states )
-        );
-    };
-}
+$kendo-tooltip-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary-subtle),
+    "tertiary": k-color(tertiary-subtle),
+    "info": k-color(info-subtle),
+    "success": k-color(success-subtle),
+    "warning": k-color(warning-subtle),
+    "error": k-color(error-subtle),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
 
-@each $ui-states in $_tc-tooltip-dark-matrix {
-    $kendo-tooltip-theme-colors: map.deep-merge(
-        $kendo-tooltip-theme-colors,
-        k-generate-theme-variation( dark, dark, $ui-states )
-    );
-}
+/// The generated theme colors map for the Tooltip.
+/// @group tooltip
+$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
 
-@each $ui-states in $_tc-tooltip-light-matrix {
-    $kendo-tooltip-theme-colors: map.deep-merge(
-        $kendo-tooltip-theme-colors,
-        k-generate-theme-variation( light, light, $ui-states )
-    );
-}
+@forward "@progress/kendo-theme-core/scss/components/tooltip/_variables.scss" with (
+    $kendo-tooltip-padding-y: $kendo-tooltip-padding-y,
+    $kendo-tooltip-padding-x: $kendo-tooltip-padding-x,
+    $kendo-tooltip-border-width: $kendo-tooltip-border-width,
+    $kendo-tooltip-border-radius: $kendo-tooltip-border-radius,
+    $kendo-tooltip-font-family: $kendo-tooltip-font-family,
+    $kendo-tooltip-font-size: $kendo-tooltip-font-size,
+    $kendo-tooltip-line-height: $kendo-tooltip-line-height,
+    $kendo-tooltip-title-font-size: $kendo-tooltip-title-font-size,
+    $kendo-tooltip-title-line-height: $kendo-tooltip-title-line-height,
+    $kendo-tooltip-callout-size: $kendo-tooltip-callout-size,
+    $kendo-tooltip-bg: $kendo-tooltip-bg,
+    $kendo-tooltip-text: $kendo-tooltip-text,
+    $kendo-tooltip-border: $kendo-tooltip-border,
+    $kendo-tooltip-shadow: $kendo-tooltip-shadow,
+    $kendo-tooltip-theme-colors: $kendo-tooltip-theme-colors,
+    $kendo-tooltip-theme: $kendo-tooltip-theme
+);

package/scss/treelist/_layout.scss

@@ -1,106 +1,27 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/treelist/_layout.scss" as *;
 
 @mixin kendo-treelist--layout() {
+    @include kendo-treelist--layout-base();
 
     // Base
     .k-treelist {
-        &.k-grid-display-block.k-grid-lockedcolumns {
-            display: block;
-        }
-
         .k-status {
-            padding-inline: .6em;
-            padding-block: .4em;
-            line-height: 1.6em;
-
             // TODO: see what this does and use a better name
             .k-loading {
-                vertical-align: baseline;
                 margin-right: k-spacing(1);
-
-                // TODO
-                display: none;
             }
         }
 
-        .k-treelist-dragging,
-        .k-treelist-dragging .k-state-hover,
-        .k-treelist-dragging .k-hover {
-            cursor: default;
-        }
-
-        .k-drop-hint {
-            transform: translate(0, -50%);
-        }
-
-        tr.k-footer td,
-        tr.k-footer-template td {
-            border-width: var( --kendo-treelist-footer-row-border-width, #{$kendo-treelist-footer-row-border-width} ) 0;
-            border-style: solid;
-            font-weight: var( --kendo-font-weight-bold, bold );
-        }
-
-        tr.k-footer + tr.k-footer td {
-            border-top-width: 0;
-        }
-
         .k-i-caret-alt-down,
         .k-i-caret-alt-right {
             margin-inline-end: k-spacing(2);
         }
     }
 
-
-    // Sticky headers
-    .k-treelist-scrollable {
-        > table,
-        .k-grid-header tr,
-        .k-grid-header th {
-            background-color: inherit;
-        }
-
-        .k-grid-toolbar {
-            position: sticky;
-            z-index: 3;
-            top: 0;
-            left: 0;
-        }
-
-        .k-grid-header th {
-            position: sticky;
-            z-index: 1;
-        }
-
-        .k-grid-header th.k-grid-header-sticky {
-            z-index: 3;
-        }
-
-        thead.k-grid-header {
-            padding-inline-end: 0;
-        }
-
-        tr.k-group-footer + tr.k-group-footer td {
-            border-top-width: 0;
-        }
-
-    }
-
-    .k-drag-separator {
-        display: inline-block;
-        border-right: 1px solid;
-        height: 1em;
-        vertical-align: top;
-        margin-block: 0;
-        margin-inline: .5em;
-    }
-
     .k-treelist-toggle {
-        margin-block: calc( var( --kendo-icon-padding ) * -1 );
-        padding: var( --kendo-icon-padding, .25rem );
-        box-sizing: content-box;
-        cursor: pointer;
+        padding: var( --kendo-icon-padding, k-spacing(1) );
     }
-
 }

package/scss/treelist/_theme.scss

@@ -1,14 +1,12 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/treelist/_theme.scss" as *;
 
 @mixin kendo-treelist--theme() {
+    @include kendo-treelist--theme-base();
 
-    .k-treelist,
     .k-treelist-scrollable {
-        tr.k-footer,
-        tr.k-group-footer td,
-        tr.k-footer-template {
-            background-color: var( --kendo-treelist-footer-row-bg, #{$kendo-treelist-footer-row-bg} );
+        tr.k-group-footer td {
+            background-color: $kendo-treelist-footer-row-bg;
         }
     }
-
 }

package/scss/treelist/_variables.scss

@@ -3,7 +3,12 @@
 
 /// The background color of the TreeList footer row.
 /// @group treelist
-$kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default;
+$kendo-treelist-footer-row-bg: var( --kendo-treelist-footer-row-bg, $kendo-grid-hover-bg ) !default;
 /// The border width of the TreeList footer row.
 /// @group treelist
-$kendo-treelist-footer-row-border-width: 1px !default;
+$kendo-treelist-footer-row-border-width: var( --kendo-treelist-footer-row-border-width, 1px ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/treelist/_variables.scss" with (
+    $kendo-treelist-footer-row-bg: $kendo-treelist-footer-row-bg,
+    $kendo-treelist-footer-row-border-width: $kendo-treelist-footer-row-border-width
+);

package/scss/treeview/_layout.scss

@@ -1,163 +1,34 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/treeview/_layout.scss" as *;
 
 @mixin kendo-treeview--layout() {
+    @include kendo-treeview--layout-base();
 
-    .k-treeview {
-        padding: 0;
-        border-width: 0;
-        background: none;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-treeview-font-family, #{$kendo-treeview-font-family} );
-        font-size: var( --kendo-treeview-font-size, 1rem );
-        line-height: var( --kendo-treeview-line-height, normal );
-        display: block;
-        cursor: default;
-        overflow: auto;
-        white-space: nowrap;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Treeview filter
     .k-treeview-filter {
-        padding-inline: var( --kendo-treeview-filter-padding-x, #{$kendo-treeview-filter-padding-x} );
-        padding-block: var( --kendo-treeview-filter-padding-y, #{$kendo-treeview-filter-padding-y} );
-        display: block;
-        position: relative;
-        flex: none;
-    }
-
-
-    // Treeview group
-    .k-treeview-group {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        position: relative;
-        outline: 0;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        &.ng-animating {
-            overflow: hidden;
-        }
+        padding-inline: $kendo-treeview-filter-padding-x;
+        padding-block: $kendo-treeview-filter-padding-y;
     }
 
-
-    // Treeview wrappers
-    .k-treeview-top,
-    .k-treeview-mid,
-    .k-treeview-bot {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        align-content: center;
-    }
-
-
-    // Treeview item
-    .k-treeview-item {
-        margin: 0;
-        padding-inline-start: var( --kendo-treeview-indent, #{$kendo-treeview-indent} );
-        border-width: 0;
-        display: block;
-        outline-style: none;
-    }
-
-
-    // Treeview toggle
-    .k-treeview-toggle {
-        margin-inline-start: calc( var( --kendo-treeview-indent, #{$kendo-treeview-indent} ) * -1 );
-        flex: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        cursor: pointer;
-    }
     .k-treeview-toggle .k-icon {
-        padding: var( --kendo-icon-padding, .25rem );
-        box-sizing: content-box;
+        padding: var( --kendo-icon-padding, k-spacing(1) );
     }
 
-
-    // Loading icon
     .k-treeview-loading {
-        margin-inline-end: var( --kendo-icon-spacing, .5rem );
+        margin-inline-end: var( --kendo-icon-spacing, k-spacing(2) );
     }
 
-
-    // Checkbox
     .k-treeview .k-checkbox-wrap,
     .k-treeview .k-checkbox-wrapper {
-        padding: var( --kendo-treeview-checkbox-wrap-padding, #{$kendo-treeview-checkbox-wrap-padding} );
-        align-self: center;
+        padding: $kendo-treeview-checkbox-wrap-padding;
     }
 
-
-    // Treeview leaf
     .k-treeview-leaf {
-        @include border-radius( var( --kendo-treeview-item-border-radius, #{$kendo-treeview-item-border-radius} ) );
-        padding-inline: var( --kendo-treeview-item-padding-x, 0 );
-        padding-block: var( --kendo-treeview-item-padding-y, 0 );
-        border: $kendo-treeview-item-border-width solid transparent;
-        text-decoration: none;
-        display: inline-flex;
-        align-items: center;
-        align-content: center;
-        vertical-align: middle;
-        position: relative;
-
         .k-icon,
         .k-image,
         .k-sprite {
-            margin-inline-end: var( --kendo-icon-spacing, .5rem );
-        }
-
-        &.k-focus {
-            z-index: 1;
-        }
-    }
-
-
-    // Treeview load more button
-    .k-treeview .k-treeview-load-more-button {
-        cursor: pointer;
-
-        &:hover,
-        &.k-hover,
-        &:focus,
-        &.k-focus {
-            text-decoration: underline;
+            margin-inline-end: var( --kendo-icon-spacing, k-spacing(2) );
         }
     }
-
-
-    // Treeview sizes
-    @each $size, $size-props in $kendo-treeview-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_item-padding-x: map.get( $size-props, item-padding-x );
-        $_item-padding-y: map.get( $size-props, item-padding-y );
-
-        .k-treeview-#{$size} {
-            --kendo-treeview-font-size: var( --kendo-treeview-#{$size}-font-size, #{$_font-size} );
-            --kendo-treeview-line-height: var( --kendo-treeview-#{$size}-line-height, #{$_line-height} );
-
-            .k-treeview-leaf {
-                --kendo-treeview-item-padding-x: var( --kendo-treeview-#{$size}-item-padding-x, #{$_item-padding-x} );
-                --kendo-treeview-item-padding-y: var( --kendo-treeview-#{$size}-item-padding-y, #{$_item-padding-y} );
-            }
-        }
-    }
-
 }

package/scss/treeview/_theme.scss

@@ -1,92 +1,47 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/treeview/_theme.scss" as *;
 
 @mixin kendo-treeview--theme() {
+    @include kendo-treeview--theme-base();
 
-    .k-treeview {
-        @include fill(
-            var( --kendo-treeview-text, #{$kendo-treeview-text} ),
-            var( --kendo-treeview-bg, #{$kendo-treeview-bg} ),
-            var( --kendo-treeview-border, #{$kendo-treeview-border} )
-        );
-    }
-
-
-    // Treeview item
-    .k-treeview-item:disabled,
-    .k-treeview-item.k-disabled {
-        background-color: transparent;
-    }
-
-
-    // Treeview leaf
     .k-treeview-leaf {
-        @include fill(
-            var( --kendo-treeview-item-text, #{$kendo-treeview-item-text} ),
-            var( --kendo-treeview-item-bg, #{$kendo-treeview-item-bg} ),
-            var( --kendo-treeview-item-border, #{$kendo-treeview-item-border} )
-        );
-
         // Hover state
         &:hover,
         &.k-hover {
-            --kendo-treeview-item-text: var( --kendo-treeview-item-hover-text, #{$kendo-treeview-item-hover-text} );
-            --kendo-treeview-item-bg: var( --kendo-treeview-item-hover-bg, #{$kendo-treeview-item-hover-bg} );
-            --kendo-treeview-item-border: var( --kendo-treeview-item-hover-border, #{$kendo-treeview-item-hover-border} );
+            @include fill(
+                $kendo-treeview-item-hover-text,
+                $kendo-treeview-item-hover-bg,
+                $kendo-treeview-item-hover-border,
+            );
         }
 
         // Focus state
         &:focus,
         &.k-focus {
-            --kendo-treeview-item-text: var( --kendo-treeview-item-focus-text, #{$kendo-treeview-item-focus-text} );
-            --kendo-treeview-item-bg: var( --kendo-treeview-item-focus-bg, #{$kendo-treeview-item-focus-bg} );
-            --kendo-treeview-item-border: var( --kendo-treeview-item-focus-border, #{$kendo-treeview-item-focus-border} );
-
-            @include box-shadow( $kendo-treeview-item-focus-shadow );
+           @include fill(
+                $kendo-treeview-item-focus-text,
+                $kendo-treeview-item-focus-bg,
+                $kendo-treeview-item-focus-border,
+            );
         }
 
         // Selected state
         &.k-selected {
-            --kendo-treeview-item-text: var( --kendo-treeview-item-selected-text, #{$kendo-treeview-item-selected-text} );
-            --kendo-treeview-item-bg: var( --kendo-treeview-item-selected-bg, #{$kendo-treeview-item-selected-bg} );
-            --kendo-treeview-item-border: var( --kendo-treeview-item-selected-border, #{$kendo-treeview-item-selected-border} );
+            @include fill(
+                $kendo-treeview-item-selected-text,
+                $kendo-treeview-item-selected-bg,
+                $kendo-treeview-item-selected-border,
+            );
         }
     }
 
-    // Disabled state
     .k-treeview-leaf:is(:disabled, .k-disabled),
     :is(.k-treeview-item:disabled, .k-treeview-item.k-disabled) .k-treeview-leaf {
-        --kendo-treeview-item-text: var( --kendo-treeview-item-disabled-text, #{$kendo-treeview-item-disabled-text} );
-        --kendo-treeview-item-bg: var( --kendo-treeview-item-disabled-bg, #{$kendo-treeview-item-disabled-bg} );
-        --kendo-treeview-item-border: var( --kendo-treeview-item-disabled-border, #{$kendo-treeview-item-disabled-border} );
-    }
-
-    // Treeview load more button
-    .k-treeview .k-treeview-load-more-button {
-
         @include fill(
-            var( --kendo-treeview-loadmore-text, #{$kendo-treeview-loadmore-text} ),
-            var( --kendo-treeview-loadmore-bg, #{$kendo-treeview-loadmore-bg} ),
-            var( --kendo-treeview-loadmore-border, #{$kendo-treeview-loadmore-border} )
+            $kendo-treeview-item-disabled-text,
+            $kendo-treeview-item-disabled-bg,
+            $kendo-treeview-item-disabled-border,
         );
-
-        // Hover state
-        &:hover,
-        &.k-hover {
-            --kendo-treeview-loadmore-text: var( --kendo-treeview-loadmore-hover-text, #{$kendo-treeview-loadmore-hover-text} );
-            --kendo-treeview-loadmore-bg: var( --kendo-treeview-loadmore-hover-bg, #{$kendo-treeview-loadmore-hover-bg} );
-            --kendo-treeview-loadmore-border: var( --kendo-treeview-loadmore-hover-border, #{$kendo-treeview-loadmore-hover-border} );
-        }
-
-        // Focus state
-        &:focus,
-        &.k-focus {
-            --kendo-treeview-loadmore-text: var( --kendo-treeview-loadmore-focus-text, #{$kendo-treeview-loadmore-focus-text} );
-            --kendo-treeview-loadmore-bg: var( --kendo-treeview-loadmore-focus-bg, #{$kendo-treeview-loadmore-focus-bg} );
-            --kendo-treeview-loadmore-border: var( --kendo-treeview-loadmore-focus-border, #{$kendo-treeview-loadmore-focus-border} );
-
-            @include box-shadow( $kendo-treeview-loadmore-focus-shadow );
-        }
     }
-
 }