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

package/scss/toolbar/_layout.scss

@@ -3,30 +3,29 @@
     // Base
     .k-toolbar {
         margin: 0;
-        padding: $toolbar-padding-y $toolbar-padding-x;
-        border-width: $toolbar-border-width;
+        padding: $kendo-toolbar-padding-y $kendo-toolbar-padding-x;
+        border-width: $kendo-toolbar-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $toolbar-font-family;
-        font-size: $toolbar-font-size;
-        line-height: $toolbar-line-height;
+        font-family: $kendo-toolbar-font-family;
+        font-size: $kendo-toolbar-font-size;
+        line-height: $kendo-toolbar-line-height;
         list-style: none;
         display: flex;
         flex-flow: row wrap;
-        gap: $toolbar-spacing;
+        gap: $kendo-toolbar-spacing;
         align-items: center;
         justify-content: flex-start;
         position: relative;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // Remove once we decide to not size empty containers
         &::before {
             content: "";
             height: $kendo-button-calc-size;
-            margin-inline-start: -$toolbar-spacing;
         }
 
         &.k-toolbar-resizable {
@@ -40,7 +39,7 @@
             vertical-align: middle;
 
             > label {
-                margin-inline-end: $toolbar-spacing;
+                margin-inline-end: $kendo-toolbar-spacing;
                 align-self: center;
             }
         }
@@ -65,31 +64,15 @@
         // Input
         .k-input,
         .k-picker {
-            width: $toolbar-input-width;
+            width: $kendo-toolbar-input-width;
         }
         .k-color-picker {
             width: min-content;
         }
 
         // Overflow anchor
-        .k-overflow-anchor {
-            @include border-radius( 0 );
-            margin: 0;
-            padding: $toolbar-padding-y;
-            width: auto;
-            height: 100%;
-            aspect-ratio: 1;
-            border-width: 0;
-            border-color: inherit;
-            box-sizing: border-box;
-            justify-content: center;
-            position: absolute;
-            top: 0;
-            right: 0;
-
-            &::before {
-                display: block;
-            }
+        .k-toolbar-overflow-button {
+            margin-inline-start: auto;
         }
 
 
@@ -111,12 +94,6 @@
         }
 
 
-        // Template
-        .k-toolbar-template {
-            align-self: center;
-            align-items: center;
-        }
-
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
@@ -137,11 +114,85 @@
 
 
     // Angular specific
-    kendo-toolbar-renderer {
+    .k-toolbar-renderer {
         display: inline-block;
         border-color: inherit;
     }
 
+    // Toolbar sizes
+    @each $size, $size-props in $kendo-toolbar-sizes {
+        $_padding-x: k-map-get( $size-props, padding-x );
+        $_padding-y: k-map-get( $size-props, padding-y );
+        $_spacing: k-map-get( $size-props, spacing );
+
+        .k-toolbar-#{$size} {
+            padding: $_padding-y $_padding-x;
+            gap: $_spacing;
+
+            // Remove once we decide to not size empty containers
+            &::before {
+                margin-inline-start: -$_spacing;
+            }
+
+            > * > label {
+                margin-inline-end: $_spacing;
+            }
+        }
+    }
+    // Remove once we decide to not size empty containers
+    .k-toolbar-sm::before {
+        height: $kendo-button-calc-size-sm;
+    }
+    .k-toolbar-md::before {
+        height: $kendo-button-calc-size-md;
+    }
+    .k-toolbar-lg::before {
+        height: $kendo-button-calc-size-lg;
+    }
+
+}
+
+
+
+
+@include exports( "floating-toolbar/layout" ) {
+
+    // sass-lint:disable class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        padding: $kendo-toolbar-padding-y-md $kendo-toolbar-padding-x-md !important; // sass-lint:disable-line no-important
+        border-width: $kendo-toolbar-border-width;
+        border-style: solid;
+        display: flex;
+        flex-flow: row nowrap;
+        gap: $kendo-toolbar-spacing-md;
+        align-items: center;
+
+        .k-toolbar {
+            padding: 0;
+            border-width: 0;
+            flex-shrink: 1;
+            color: inherit;
+            background: none;
+        }
+    }
+    .k-editortoolbar-dragHandle {
+        cursor: move;
+        display: flex;
+        align-items: center;
+        align-self: stretch;
+        flex-shrink: 0;
+    }
+    // sass-lint:enable class-name-format
+
+}
+
+
+
+
+// Remove once the Overflow Popup uses
+// the proper Menu rendering in all suites.
+@include exports("toolbar/layout/legacy") {
 
     // Overflow container
     .k-overflow-container {
@@ -153,7 +204,7 @@
         }
 
         .k-separator {
-            margin: map-get( $spacing, 1 ) 0;
+            margin: k-map-get( $kendo-spacing, 1 ) 0;
         }
 
         // Group
@@ -178,7 +229,7 @@
             flex-flow: row nowrap;
             align-items: center;
             align-content: center;
-            gap: $icon-spacing;
+            gap: $kendo-icon-spacing;
             justify-content: flex-start;
             position: relative;
         }
@@ -206,60 +257,4 @@
         }
     }
 
-
-
-
-    // RTL
-    .k-toolbar {
-
-        &.k-rtl,
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            .k-overflow-anchor {
-                margin: 0;
-                right: auto;
-                left: 0;
-            }
-        }
-
-    }
-
-}
-
-
-
-
-@include exports( "floating-toolbar/layout" ) {
-
-
-    // sass-lint:disable class-name-format
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content {
-        padding: $toolbar-padding-y $toolbar-padding-x !important; // sass-lint:disable-line no-important
-        border-width: $toolbar-border-width;
-        border-style: solid;
-        display: flex;
-        flex-flow: row nowrap;
-        gap: $toolbar-spacing;
-        align-items: center;
-
-        .k-toolbar {
-            padding: 0;
-            border-width: 0;
-            flex-shrink: 1;
-            color: inherit;
-            background: none;
-        }
-    }
-    .k-editortoolbar-dragHandle {
-        cursor: move;
-        display: flex;
-        align-items: center;
-        align-self: stretch;
-        flex-shrink: 0;
-    }
-    // sass-lint:enable class-name-format
-
-
 }

package/scss/toolbar/_theme.scss

@@ -3,24 +3,25 @@
     // Theme
     .k-toolbar {
         @include fill(
-            $toolbar-text,
-            $toolbar-bg,
-            $toolbar-border,
-            $toolbar-gradient
+            $kendo-toolbar-text,
+            $kendo-toolbar-bg,
+            $kendo-toolbar-border,
+            $kendo-toolbar-gradient
         );
-        @include box-shadow( $toolbar-shadow );
+        @include box-shadow( $kendo-toolbar-shadow );
 
 
         // Separator
-        .k-separator {
-            border-color: $toolbar-separator-border;
+        .k-separator,
+        .k-toolbar-separator {
+            border-color: $kendo-toolbar-separator-border;
         }
 
 
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
-            @include box-shadow( $toolbar-item-shadow );
+            @include focus-indicator( $kendo-toolbar-item-shadow );
         }
 
 
@@ -29,6 +30,32 @@
 
     }
 
+}
+
+
+
+
+@include exports("floating-toolbar/theme") {
+
+    // sass-lint:disable-block class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        @include fill(
+            $kendo-toolbar-text,
+            $kendo-toolbar-bg,
+            $kendo-toolbar-border,
+            $kendo-toolbar-gradient
+        );
+    }
+
+}
+
+
+
+
+// Remove once the Overflow Popup uses
+// the proper Menu rendering in all suites.
+@include exports("toolbar/theme/legacy") {
 
     // Overflow container
     .k-overflow-container {
@@ -45,7 +72,7 @@
             // Button focus state
             &:focus,
             &.k-focus {
-                box-shadow: $kendo-menu-popup-item-focus-shadow;
+                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
             }
 
             // Active state
@@ -71,21 +98,3 @@
     }
 
 }
-
-
-
-
-@include exports("floating-toolbar/theme") {
-
-    // sass-lint:disable-block class-name-format
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content {
-        @include fill(
-            $toolbar-text,
-            $toolbar-bg,
-            $toolbar-border,
-            $toolbar-gradient
-        );
-    }
-
-}

package/scss/toolbar/_variables.scss

@@ -1,29 +1,87 @@
 // Toolbar
 
-/// The horizontal padding of the container.
+/// The horizontal padding of the toolbar.
 /// @group toolbar
-$toolbar-padding-x: map-get( $spacing, 2 ) !default;
-/// The vertical padding of the container.
+$kendo-toolbar-padding-x: null !default;
+$kendo-toolbar-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-padding-x-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+
+/// The vertical padding of the toolbar.
+/// @group toolbar
+$kendo-toolbar-padding-y: null !default;
+$kendo-toolbar-padding-y-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-padding-y-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-padding-y-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+
+/// The spacing between the toolbar tools.
 /// @group toolbar
-$toolbar-padding-y: map-get( $spacing, 2 ) !default;
-$toolbar-border-width: 1px !default;
-$toolbar-border-radius: null !default;
-$toolbar-spacing: $toolbar-padding-x !default;
+$kendo-toolbar-spacing: null !default;
+$kendo-toolbar-spacing-sm: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-toolbar-spacing-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-spacing-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
 
-$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+/// Width of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-width: 1px !default;
+/// Border radius of the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-radius: null !default;
+
+/// Font family of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-family: $font-family !default;
+/// Font size of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-size: $font-size !default;
+/// Line height of the toolbar.
+/// @group toolbar
+$kendo-toolbar-line-height: $line-height !default;
 
-$toolbar-font-family: $font-family !default;
-$toolbar-font-size: $font-size !default;
-$toolbar-line-height: $line-height !default;
+/// Background color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-bg: $base-bg !default;
+/// Text color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-text: $base-text !default;
+/// Color of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border: $base-border !default;
+/// Gradient of the toolbar.
+/// @group toolbar
+$kendo-toolbar-gradient: null !default;
+/// Box shadow of the toolbar.
+/// @group toolbar
+$kendo-toolbar-shadow: null !default;
 
-$toolbar-bg: $base-bg !default;
-$toolbar-text: $base-text !default;
-$toolbar-border: $base-border !default;
-$toolbar-gradient: null !default;
-$toolbar-shadow: null !default;
+/// Color of the separator border of the toolbar.
+/// @group toolbar
+$kendo-toolbar-separator-border: inherit !default;
 
-$toolbar-separator-border: inherit !default;
+/// The width of the input in the toolbar.
+/// @group toolbar
+$kendo-toolbar-input-width: 10em !default;
 
-$toolbar-input-width: 10em !default;
+/// Box shadow of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;
 
-$toolbar-item-shadow: $kendo-button-focus-shadow !default;
+/// Sizes map for the toolbar.
+/// @group toolbar
+$kendo-toolbar-sizes: (
+    sm: (
+        padding-x: $kendo-toolbar-padding-x-sm,
+        padding-y: $kendo-toolbar-padding-y-sm,
+        spacing: $kendo-toolbar-spacing-sm
+    ),
+    md: (
+        padding-x: $kendo-toolbar-padding-x-md,
+        padding-y: $kendo-toolbar-padding-y-md,
+        spacing: $kendo-toolbar-spacing-md
+    ),
+    lg: (
+        padding-x: $kendo-toolbar-padding-x-lg,
+        padding-y: $kendo-toolbar-padding-y-lg,
+        spacing: $kendo-toolbar-spacing-lg
+    )
+) !default;

package/scss/tooltip/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/tooltip/_layout.scss

@@ -19,7 +19,7 @@
         position: absolute;
         z-index: 12000;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -29,7 +29,7 @@
     }
 
     .k-tooltip-icon {
-        margin-inline-end: $icon-spacing;
+        margin-inline-end: $kendo-icon-spacing;
         flex-shrink: 0;
     }
 
@@ -47,7 +47,7 @@
     }
 
     .k-tooltip-button {
-        margin-inline-start: $icon-spacing;
+        margin-inline-start: $kendo-icon-spacing;
         flex-shrink: 0;
 
         .k-icon {

package/scss/tooltip/_variables.scss

@@ -1,6 +1,6 @@
 // Tooltip
-$tooltip-padding-y: $padding-y !default;
-$tooltip-padding-x: $padding-x !default;
+$tooltip-padding-y: $kendo-padding-md-y !default;
+$tooltip-padding-x: $kendo-padding-md-x !default;
 $tooltip-max-width: null !default;
 $tooltip-border-width: 0px !default;
 $tooltip-border-radius: $kendo-border-radius-md !default;
@@ -14,22 +14,22 @@ $tooltip-title-line-height: 1 !default;
 
 $tooltip-callout-size: 6px !default;
 
-$tooltip-bg: rgba( contrast-wcag( $body-bg ), .75 ) !default;
-$tooltip-text: contrast-wcag( $tooltip-bg ) !default;
+$tooltip-bg: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default;
+$tooltip-text: k-contrast-legacy( $tooltip-bg ) !default;
 $tooltip-border: $tooltip-bg !default;
 
-$tooltip-primary-bg: $primary !default;
-$tooltip-primary-text: contrast-wcag( $tooltip-primary-bg ) !default;
+$tooltip-primary-bg: $kendo-color-primary !default;
+$tooltip-primary-text: k-contrast-legacy( $tooltip-primary-bg ) !default;
 $tooltip-primary-border: $tooltip-primary-bg !default;
-$tooltip-info-bg: $info !default;
-$tooltip-info-text: contrast-wcag( $tooltip-info-bg ) !default;
+$tooltip-info-bg: $kendo-color-info !default;
+$tooltip-info-text: k-contrast-legacy( $tooltip-info-bg ) !default;
 $tooltip-info-border: $tooltip-info-bg !default;
-$tooltip-success-bg: $success !default;
-$tooltip-success-text: contrast-wcag( $tooltip-success-bg ) !default;
+$tooltip-success-bg: $kendo-color-success !default;
+$tooltip-success-text: k-contrast-legacy( $tooltip-success-bg ) !default;
 $tooltip-success-border: $tooltip-success-bg !default;
-$tooltip-warning-bg: $warning !default;
-$tooltip-warning-text: contrast-wcag( $tooltip-warning-bg ) !default;
+$tooltip-warning-bg: $kendo-color-warning !default;
+$tooltip-warning-text: k-contrast-legacy( $tooltip-warning-bg ) !default;
 $tooltip-warning-border: $tooltip-warning-bg !default;
-$tooltip-error-bg: $error !default;
-$tooltip-error-text: contrast-wcag( $tooltip-error-bg ) !default;
+$tooltip-error-bg: $kendo-color-error !default;
+$tooltip-error-text: k-contrast-legacy( $tooltip-error-bg ) !default;
 $tooltip-error-border: $tooltip-error-bg !default;

package/scss/treelist/_index.scss

@@ -3,12 +3,12 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_text.scss";
+// @import "../utils/_text.scss";
 @import "../grid/_index.scss";
 @import "../icons/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/treelist/_layout.scss

@@ -33,14 +33,14 @@
             transform: translate(0, -50%);
         }
 
-        tr.k-footer td,
-        tr.k-footer-template td {
-            border-width: $treelist-footer-row-border-width 0;
+        .k-table-row.k-footer .k-table-td,
+        .k-table-row.k-footer-template .k-table-td {
+            border-width: $kendo-treelist-footer-row-border-width 0;
             border-style: solid;
             font-weight: bold;
         }
 
-        tr.k-footer + tr.k-footer td {
+        .k-table-row.k-footer + .k-table-row.k-footer .k-table-td {
             border-top-width: 0;
         }
     }
@@ -48,9 +48,9 @@
 
     // Sticky headers
     .k-treelist-scrollable {
-        > table,
-        .k-grid-header tr,
-        .k-grid-header th {
+        > .k-table,
+        .k-grid-header .k-table-row,
+        .k-grid-header .k-table-th {
             background-color: inherit;
         }
 
@@ -61,12 +61,12 @@
             left: 0;
         }
 
-        .k-grid-header th {
+        .k-grid-header .k-table-th {
             position: sticky;
             z-index: 1;
         }
 
-        .k-grid-header th.k-grid-header-sticky {
+        .k-grid-header .k-table-th.k-grid-header-sticky {
             z-index: 3;
         }
 
@@ -74,7 +74,7 @@
             padding-right: 0;
         }
 
-        tr.k-group-footer + tr.k-group-footer td {
+        .k-table-row.k-group-footer + .k-table-row.k-group-footer td {
             border-top-width: 0;
         }
 

package/scss/treelist/_theme.scss

@@ -4,7 +4,7 @@
     .k-treelist {
         tr.k-footer,
         tr.k-footer-template {
-            background-color: $treelist-footer-row-bg;
+            background-color: $kendo-treelist-footer-row-bg;
         }
     }
 

package/scss/treelist/_variables.scss

@@ -1,3 +1,3 @@
 // Treelist
-$treelist-footer-row-bg: $grid-hovered-bg !default;
-$treelist-footer-row-border-width: 1px !default;
+$kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default;
+$kendo-treelist-footer-row-border-width: 1px !default;

package/scss/treeview/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";