@progress/kendo-theme-fluent 5.7.0 → 5.8.1-dev.1

package/scss/index.scss

@@ -30,7 +30,6 @@
 @use "chip";
 @use "color-preview";
 @use "loader";
-// @use "loading";
 @use "skeleton";
 @use "tooltip";
 
@@ -124,8 +123,8 @@
 // Data management
 @use "grid";
 @use "listview";
-// @use "spreadsheet";
-// @use "pivotgrid";
+@use "spreadsheet";
+@use "pivotgrid";
 @use "treelist";
 @use "filter";
 @use "filemanager";
@@ -138,18 +137,18 @@
 
 
 // Scheduling
-// @use "gantt";
+@use "gantt";
 @use "scheduler";
 
 
 // Misc
-// @use "adaptive";
-// @use "chat";
+@use "adaptive";
+@use "chat";
 @use "mediaplayer";
-// @use "timeline";
-// @use "pdf-viewer";
+@use "timeline";
+@use "pdf-viewer";
 @use "scroller";
-// @use "scrollview";
+@use "scrollview";
 
 
 // Dataviz
@@ -190,7 +189,6 @@
     @include chip.styles();
     @include color-preview.styles();
     @include loader.styles();
-    // @include loading.styles();
     @include skeleton.styles();
     @include tooltip.styles();
 
@@ -284,8 +282,8 @@
     // Data management
     @include grid.styles();
     @include listview.styles();
-    // @include spreadsheet.styles();
-    // @include pivotgrid.styles();
+    @include spreadsheet.styles();
+    @include pivotgrid.styles();
     @include treelist.styles();
     @include filter.styles();
     @include filemanager.styles();
@@ -298,18 +296,18 @@
 
 
     // Scheduling
-    // @include gantt.styles();
+    @include gantt.styles();
     @include scheduler.styles();
 
 
     // Misc
-    // @include adaptive.styles();
-    // @include chat.styles();
+    @include adaptive.styles();
+    @include chat.styles();
     @include mediaplayer.styles();
-    // @include timeline.styles();
-    // @include pdf-viewer.styles();
+    @include timeline.styles();
+    @include pdf-viewer.styles();
     @include scroller.styles();
-    // @include scrollview.styles();
+    @include scrollview.styles();
 
 
     // Dataviz

package/scss/input/_variables.scss

@@ -15,7 +15,7 @@ $kendo-input-focus-border-width: 2px !default;
 
 /// Height of he border around the input.
 /// @group input
-$kendo-input-border-height: calc( $kendo-input-border-width * 2 ) !default;
+$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
 
 /// Horizontal padding of the input.
 /// @group input

package/scss/listgroup/_layout.scss

@@ -186,4 +186,3 @@
     }
 
 }
-

package/scss/listview/_layout.scss

@@ -69,8 +69,8 @@
         padding-block: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
     }
     .k-listview-item-padding-rectangle .k-listview-link {
-        margin-inline: calc( var( --kendo-listview-item-padding-x, $kendo-listview-item-padding-x ) * -1);
-        margin-block: calc( var( --kendo-listview-item-padding-y, $kendo-listview-item-padding-y ) * -1);
+        margin-inline: calc( var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} ) * -1);
+        margin-block: calc( var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} ) * -1);
         padding-inline: var( --kendo-listview-item-padding-x, #{$kendo-listview-item-padding-x} );
         padding-block: var( --kendo-listview-item-padding-y, #{$kendo-listview-item-padding-y} );
     }

package/scss/loader/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "_variables.scss" as *;
 @use "../overlay/_variables.scss" as *;
 
@@ -157,13 +158,13 @@
             top: 100%;
             left: 0;
             animation: spinner-3-segment 2s ease infinite;
-            animation-delay: calc( -2s / 3 );
+            animation-delay: math.div( -2s, 3 );
         }
         .k-loader-segment:nth-child(3) {
             top: 100%;
             left: 100%;
             animation: spinner-3-segment 2s ease infinite;
-            animation-delay: calc( -4s / 3 );
+            animation-delay: math.div( -4s, 3 );
         }
 
 

package/scss/loader/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "sass:map";
 @use "../core/color-system" as *;
 @use "../core/_variables.scss" as *;
@@ -14,15 +15,15 @@ $kendo-loader-segment-size-lg: map-get( $kendo-spacing, 4 ) !default;
 
 /// Horizontal padding of the loader.
 /// @group loader
-$kendo-loader-padding-x-sm: calc( #{$kendo-loader-segment-size-sm} / 2 ) !default;
-$kendo-loader-padding-x-md: calc( #{$kendo-loader-segment-size-md} / 2 ) !default;
-$kendo-loader-padding-x-lg: calc( #{$kendo-loader-segment-size-lg} / 2 ) !default;
+$kendo-loader-padding-x-sm: math.div( $kendo-loader-segment-size-sm, 2 ) !default;
+$kendo-loader-padding-x-md: math.div( $kendo-loader-segment-size-md, 2 ) !default;
+$kendo-loader-padding-x-lg: math.div( $kendo-loader-segment-size-lg, 2 ) !default;
 
 /// Vertical padding of the loader.
 /// @group loader
-$kendo-loader-padding-y-sm: calc( #{$kendo-loader-segment-size-sm} / 2 ) !default;
-$kendo-loader-padding-y-md: calc( #{$kendo-loader-segment-size-md} / 2 ) !default;
-$kendo-loader-padding-y-lg: calc( #{$kendo-loader-segment-size-lg} / 2 ) !default;
+$kendo-loader-padding-y-sm: math.div( $kendo-loader-segment-size-sm, 2 ) !default;
+$kendo-loader-padding-y-md: math.div( $kendo-loader-segment-size-md, 2 ) !default;
+$kendo-loader-padding-y-lg: math.div( $kendo-loader-segment-size-lg, 2 ) !default;
 
 /// Equilateral height of the loader.
 /// @group loader
@@ -30,21 +31,21 @@ $kendo-loader-equilateral-height: .8660254038 !default;
 
 /// Width of the spinner-3 loader.
 /// @group loader
-$kendo-loader-spinner-3-width-sm: calc( #{$kendo-loader-segment-size-sm} * 4 ) !default;
-$kendo-loader-spinner-3-width-md: calc( #{$kendo-loader-segment-size-md} * 4 ) !default;
-$kendo-loader-spinner-3-width-lg: calc( #{$kendo-loader-segment-size-lg} * 4 ) !default;
+$kendo-loader-spinner-3-width-sm: ( $kendo-loader-segment-size-sm * 4 ) !default;
+$kendo-loader-spinner-3-width-md: ( $kendo-loader-segment-size-md * 4 ) !default;
+$kendo-loader-spinner-3-width-lg: ( $kendo-loader-segment-size-lg * 4 ) !default;
 
 /// Height of the spinner-3 loader.
 /// @group loader
-$kendo-loader-spinner-3-height-sm: calc( #{$kendo-loader-spinner-3-width-sm} * #{$kendo-loader-equilateral-height} ) !default;
-$kendo-loader-spinner-3-height-md: calc( #{$kendo-loader-spinner-3-width-md} * #{$kendo-loader-equilateral-height} ) !default;
-$kendo-loader-spinner-3-height-lg: calc( #{$kendo-loader-spinner-3-width-lg} * #{$kendo-loader-equilateral-height} ) !default;
+$kendo-loader-spinner-3-height-sm: ( $kendo-loader-spinner-3-width-sm * $kendo-loader-equilateral-height ) !default;
+$kendo-loader-spinner-3-height-md: ( $kendo-loader-spinner-3-width-md * $kendo-loader-equilateral-height ) !default;
+$kendo-loader-spinner-3-height-lg: ( $kendo-loader-spinner-3-width-lg * $kendo-loader-equilateral-height ) !default;
 
 /// Width of the spinner-4 loader.
 /// @group loader
-$kendo-loader-spinner-4-width-sm: calc( #{$kendo-loader-segment-size-sm} * 4 ) !default;
-$kendo-loader-spinner-4-width-md: calc( #{$kendo-loader-segment-size-md} * 4 ) !default;
-$kendo-loader-spinner-4-width-lg: calc( #{$kendo-loader-segment-size-lg} * 4 ) !default;
+$kendo-loader-spinner-4-width-sm: ( $kendo-loader-segment-size-sm * 4 ) !default;
+$kendo-loader-spinner-4-width-md: ( $kendo-loader-segment-size-md * 4 ) !default;
+$kendo-loader-spinner-4-width-lg: ( $kendo-loader-segment-size-lg * 4 ) !default;
 
 /// Height of the spinner-4 loader.
 /// @group loader

package/scss/map/_variables.scss

@@ -40,7 +40,7 @@ $kendo-map-navigator-margin-y: map-get( $kendo-spacing, 4 ) !default;
 $kendo-map-navigator-padding: map-get( $kendo-spacing, thin ) !default;
 /// Map navigator width.
 /// @group map
-$kendo-map-navigator-width: calc( var(--kendo-icon-size) * 3 + #{$kendo-map-navigator-padding * 2} ) !default;
+$kendo-map-navigator-width: calc( var( --kendo-icon-size) * 3 + #{$kendo-map-navigator-padding * 2} ) !default;
 /// Map navigator height.
 /// @group map
 $kendo-map-navigator-height: $kendo-map-navigator-width !default;
@@ -75,7 +75,7 @@ $kendo-map-attribution-padding-x: $kendo-padding-x-sm !default;
 $kendo-map-attribution-padding-y: $kendo-padding-y-sm !default;
 /// Map attribution font size.
 /// @group map
-$kendo-map-attribution-font-size: calc( $kendo-map-font-size * .75 ) !default;
+$kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default;
 /// Map attribution background color.
 /// @group map
 $kendo-map-attribution-bg: $white !default;

package/scss/menu/_variables.scss

@@ -38,7 +38,7 @@ $kendo-menu-separator-width: map-get( $kendo-spacing, hair ) !default;
 
 /// The base outline of focused menu item.
 /// @group menu
-$kendo-menu-item-focus-outline-offset: calc(-1 * map-get( $kendo-spacing, thin )) !default;
+$kendo-menu-item-focus-outline-offset: (-1 * map-get( $kendo-spacing, thin )) !default;
 $kendo-menu-item-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
 $kendo-menu-item-focus-outline-style: solid !default;
 
@@ -141,9 +141,9 @@ $kendo-menu-popup-item-padding-y-md: $kendo-list-item-padding-y-md !default;
 $kendo-menu-popup-item-padding-y-lg: $kendo-list-item-padding-y-lg !default;
 /// The end padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-end-sm: calc( $kendo-menu-popup-item-padding-x-sm * 2 + var( --kendo-icon-size, 1rem ) ) !default;
-$kendo-menu-popup-item-padding-end-md: calc( $kendo-menu-popup-item-padding-x-md * 2 + var( --kendo-icon-size, 1rem ) ) !default;
-$kendo-menu-popup-item-padding-end-lg: calc( $kendo-menu-popup-item-padding-x-lg * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + var( --kendo-icon-size, 1rem ) ) !default;
 
 /// The start margin of the menu item expand icon.
 /// @group menu
@@ -152,9 +152,9 @@ $kendo-menu-popup-item-icon-margin-start-md: map-get( $kendo-spacing, 0 ) !defau
 $kendo-menu-popup-item-icon-margin-start-lg: map-get( $kendo-spacing, 0 ) !default;
 /// The end margin of the menu item expand icon.
 /// @group menu
-$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (var( --kendo-icon-size, 1rem ) + $kendo-menu-popup-item-padding-x-sm) ) !default;
-$kendo-menu-popup-item-icon-margin-end-md: calc( -1 * (var( --kendo-icon-size, 1rem ) + $kendo-menu-popup-item-padding-x-md) ) !default;
-$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (var( --kendo-icon-size, 1rem ) + $kendo-menu-popup-item-padding-x-lg) ) !default;
+$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-item-padding-x-sm}) ) !default;
+$kendo-menu-popup-item-icon-margin-end-md: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-item-padding-x-md}) ) !default;
+$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-item-padding-x-lg}) ) !default;
 
 /// The base shadow of focused menu item in popup.
 /// @group menu

package/scss/messagebox/_theme.scss

@@ -24,7 +24,7 @@
                 );
             }
         }
-        
+
     }
 
     @each $theme-color, $color-props in $kendo-theme-colors {

package/scss/messagebox/_variables.scss

@@ -18,13 +18,13 @@ $kendo-message-box-border-width: 0 !default;
 $kendo-message-box-border-style: solid !default;
 /// Font family of the message box.
 /// @group messagebox
-$kendo-message-box-font-family: var(--kendo-font-family, inherit ) !default;
+$kendo-message-box-font-family: var( --kendo-font-family, inherit ) !default;
 /// Font size of the message box.
 /// @group messagebox
-$kendo-message-box-font-size: var(--kendo-font-size-sm, inherit ) !default;
+$kendo-message-box-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// Line height of the message box.
 /// @group messagebox
-$kendo-message-box-line-height: var(--kendo-line-height-sm, normal ) !default;
+$kendo-message-box-line-height: var( --kendo-line-height-sm, normal ) !default;
 
 /// Font style of the message box links.
 /// @group messagebox
@@ -34,7 +34,7 @@ $kendo-message-box-link-font-style: normal !default;
 $kendo-message-box-link-decoration: underline !default;
 /// Text color of the message box links.
 /// @group messagebox
-$kendo-message-box-link-text: var(--kendo-link-text, initial ) !default;
+$kendo-message-box-link-text: var( --kendo-link-text, initial ) !default;
 /// Hover text color of the message box links.
 /// @group messagebox
-$kendo-message-box-link-hover-text: var(--kendo-link-hover-text, initial ) !default;
+$kendo-message-box-link-hover-text: var( --kendo-link-hover-text, initial ) !default;

package/scss/notification/_theme.scss

@@ -52,4 +52,3 @@
     }
 
 }
-

package/scss/notification/_variables.scss

@@ -99,4 +99,3 @@ $kendo-notification-theme-colors: ();
         generate-theme-variation( light, neutral, $ui-states )
     );
 }
-

package/scss/panelbar/_layout.scss

@@ -127,11 +127,11 @@
             @for $i from 1 through $kendo-panelbar-item-level-count {
                 &.k-level-#{$i} {
                     .k-link {
-                        padding-inline-start: calc( var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} ) + calc( var( --kendo-padding-x-lg, #{$kendo-padding-x-lg} ) * #{$i} ));
+                        padding-inline-start: calc( var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} ) + ( var( --kendo-padding-x-lg, #{$kendo-padding-x-lg} ) * #{$i} ));
                     }
 
                     .k-panelbar-item-icon:first-child {
-                        inset-inline-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) + calc( var( --kendo-padding-x-lg, #{$kendo-padding-x-lg} ) * #{$i} ));
+                        inset-inline-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) + ( var( --kendo-padding-x-lg, #{$kendo-padding-x-lg} ) * #{$i} ));
                     }
                 }
             }

package/scss/pdf-viewer/_layout.scss

@@ -0,0 +1,177 @@
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-pdf-viewer--layout() {
+
+    .k-pdf-viewer {
+        border-width: var( --kendo-pdf-viewer-border-width, #{$kendo-pdf-viewer-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        position: relative;
+        outline: 0;
+        font-family: var( --kendo-pdf-viewer-font-family, #{$kendo-pdf-viewer-font-family} );
+        font-size: var( --kendo-pdf-viewer-font-size, #{$kendo-pdf-viewer-font-size} );
+        line-height: var( --kendo-pdf-viewer-line-height, #{$kendo-pdf-viewer-line-height} );
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        // Toolbar
+        .k-toolbar {
+            border-block-start-width: 0;
+            border-inline-width: 0;
+            border-color: inherit;
+            flex: 0 0 auto;
+            z-index: 2;
+        }
+        .k-toolbar .k-pager-wrap,
+        .k-toolbar .k-pager {
+            padding: 0;
+            border-width: 0;
+            color: inherit;
+            background: none;
+            overflow: visible;
+        }
+
+
+        // Canvas
+        .k-canvas {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            outline: none;
+
+            .k-enable-text-select,
+            &.k-enable-text-select {
+                -webkit-user-select: text;
+                -moz-user-select: text;
+                -ms-user-select: text;
+                user-select: text;
+                cursor: text;
+            }
+
+            .k-enable-panning,
+            &.k-enable-panning {
+                cursor: grab;
+            }
+            .k-enable-panning span::selection,
+            &.k-enable-panning span::selection {
+                background-color: transparent;
+            }
+        }
+
+
+        // Pages
+        .k-pdf-viewer-pages {
+            flex: 1 1 auto;
+        }
+
+        .k-page {
+            position: relative;
+            margin-block: var( --kendo-pdf-viewer-page-spacing, #{$kendo-pdf-viewer-page-spacing} );
+            margin-inline: auto;
+
+            canvas {
+                direction: ltr;
+            }
+
+            .k-text-layer {
+                position: absolute;
+                top: 0;
+                left: 0;
+                opacity: .2;
+                overflow: hidden;
+
+                > span {
+                    position: absolute;
+                    line-height: var( --kendo-pdf-viewer-selection-line-height, #{$kendo-pdf-viewer-selection-line-height} );
+                    transform-origin: 0% 0%;
+                    color: transparent;
+                }
+
+                mark {
+                    color: transparent;
+                }
+
+                .k-search-highlight-mark {
+                    color: transparent;
+                }
+            }
+        }
+
+        .k-blank-page {
+            margin: 0;
+            display: flex;
+            flex-flow: column nowrap;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            background-color: inherit !important; // sass-lint:disable-line no-important
+
+            .k-upload,
+            .k-dropzone,
+            .k-dropzone-inner {
+                border: 0;
+                background: none;
+            }
+
+            > .k-icon {
+                font-size: var( --kendo-pdf-viewer-icon-size, #{$kendo-pdf-viewer-icon-size} );
+            }
+        }
+
+    }
+
+    // Search
+    .k-pdf-viewer-search-dialog {
+        padding: 0 !important; // sass-lint:disable-line no-important
+    }
+
+    .k-search-panel {
+        padding-block: var( --kendo-pdf-viewer-search-dialog-padding-y, #{$kendo-pdf-viewer-search-dialog-padding-y} );
+        padding-inline: var( --kendo-pdf-viewer-search-dialog-padding-x, #{$kendo-pdf-viewer-search-dialog-padding-x} );
+        display: flex;
+        gap: var( --kendo-pdf-viewer-search-dialog-spacing, #{$kendo-pdf-viewer-search-dialog-spacing} );
+        flex-flow: row nowrap;
+        flex: 0 0 auto;
+        justify-content: flex-start;
+        align-items: center;
+
+        .k-search-dialog-draghandle {
+            cursor: move;
+            margin-left: 0;
+        }
+
+        .k-textbox {
+            width: 10em;
+            flex: none;
+
+            .k-button {
+                border-width: 0;
+            }
+        }
+
+        .k-search-matches {
+            display: inline-flex;
+            gap: var( --kendo-pdf-viewer-search-panel-matches-spacing, #{$kendo-pdf-viewer-search-panel-matches-spacing} );
+        }
+    }
+
+    .k-pdf-viewer-canvas > .k-search-panel {
+        width: max-content;
+        margin-block-start: var( --kendo-pdf-viewer-search-panel-margin-y, #{$kendo-pdf-viewer-search-panel-margin-y} );
+        border-width: var( --kendo-pdf-viewer-search-panel-border-width, #{$kendo-pdf-viewer-search-panel-border-width} );
+        border-style: solid;
+        border-radius: var( --kendo-pdf-viewer-search-panel-border-radius, #{$kendo-pdf-viewer-search-panel-border-radius} );
+        z-index: 10;
+    }
+
+    // Alias
+    .k-search-container {
+        @extend .k-search-panel !optional;
+    }
+
+}

package/scss/pdf-viewer/_theme.scss

@@ -0,0 +1,73 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-pdf-viewer--theme() {
+
+    .k-pdf-viewer {
+        @include fill(
+            var( --kendo-pdf-viewer-text, #{$kendo-pdf-viewer-text} ),
+            var( --kendo-pdf-viewer-bg, #{$kendo-pdf-viewer-bg} ),
+            var( --kendo-pdf-viewer-border, #{$kendo-pdf-viewer-border} ),
+        );
+
+
+        // Canvas
+        .k-canvas {
+            @include fill(
+                var( --kendo-pdf-viewer-canvas-text, #{$kendo-pdf-viewer-canvas-text} ),
+                var( --kendo-pdf-viewer-canvas-bg, #{$kendo-pdf-viewer-canvas-bg} ),
+                var( --kendo-pdf-viewer-canvas-border, #{$kendo-pdf-viewer-canvas-border} )
+            );
+        }
+
+
+        // Page
+        .k-page {
+            @include fill(
+                var( --kendo-pdf-viewer-page-text, #{$kendo-pdf-viewer-page-text} ),
+                var( --kendo-pdf-viewer-page-bg, #{$kendo-pdf-viewer-page-bg} ),
+                var( --kendo-pdf-viewer-page-border, #{$kendo-pdf-viewer-page-border} )
+            );
+            @include box-shadow(
+                var( --kendo-pdf-viewer-page-shadow, #{$kendo-pdf-viewer-page-shadow} )
+            );
+        }
+
+        .k-blank-page > .k-icon {
+            @include fill(
+                $color: var( --kendo-pdf-viewer-icon-text, #{$kendo-pdf-viewer-icon-text} )
+            );
+        }
+
+
+        // Search
+        .k-search-highlight {
+            @include fill(
+                $bg: var( --kendo-pdf-viewer-search-highlight-bg, #{$kendo-pdf-viewer-search-highlight-bg} )
+            );
+        }
+
+        .k-search-highlight-mark {
+            @include fill(
+                $bg: var( --kendo-pdf-viewer-search-highlight-mark-bg, #{$kendo-pdf-viewer-search-highlight-mark-bg} )
+            );
+        }
+
+    }
+
+    .k-pdf-viewer-canvas > .k-search-panel {
+        @include fill(
+            var( --kendo-pdf-viewer-search-panel-text, #{$kendo-pdf-viewer-search-panel-text} ),
+            var( --kendo-pdf-viewer-search-panel-bg, #{$kendo-pdf-viewer-search-panel-bg} ),
+            var( --kendo-pdf-viewer-search-panel-border, #{$kendo-pdf-viewer-search-panel-border} )
+        );
+        @include box-shadow(
+            var( --kendo-pdf-viewer-search-panel-shadow, #{$kendo-pdf-viewer-search-panel-shadow} )
+        );
+    }
+
+    .k-search-container {
+        @extend .k-search-panel !optional;
+    }
+
+}

package/scss/pdf-viewer/_variables.scss

@@ -0,0 +1,105 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../dropzone/_variables.scss" as *;
+
+/// Border width of the PDF viewer.
+/// @group pdf-viewer
+$kendo-pdf-viewer-border-width: 1px !default;
+/// Font family of the PDF viewer.
+/// @group pdf-viewer
+$kendo-pdf-viewer-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the PDF viewer.
+/// @group pdf-viewer
+$kendo-pdf-viewer-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the PDF viewer.
+/// @group pdf-viewer
+$kendo-pdf-viewer-line-height: var( --kendo-line-height, normal ) !default;
+/// Background color of the PDF viewer.
+/// @group pdf-viewer
+$kendo-pdf-viewer-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the PDF viewer.
+/// @group pdf-viewer
+$kendo-pdf-viewer-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the PDF viewer.
+/// @group pdf-viewer
+$kendo-pdf-viewer-border: var( --kendo-component-border, initial ) !default;
+
+/// Background color of the PDF viewer canvas.
+/// @group pdf-viewer
+$kendo-pdf-viewer-canvas-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the PDF viewer canvas.
+/// @group pdf-viewer
+$kendo-pdf-viewer-canvas-text:  var( --kendo-component-text, inherit ) !default;
+/// Border color of the PDF viewer canvas.
+/// @group pdf-viewer
+$kendo-pdf-viewer-canvas-border:  var( --kendo-component-border, inherit ) !default;
+
+/// Spacing of the PDF viewer page.
+/// @group pdf-viewer
+$kendo-pdf-viewer-page-spacing: map-get( $kendo-spacing, 8 ) - map-get( $kendo-spacing, thin ) !default;
+/// Background color of the PDF viewer page.
+/// @group pdf-viewer
+$kendo-pdf-viewer-page-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the PDF viewer page.
+/// @group pdf-viewer
+$kendo-pdf-viewer-page-text: var( --kendo-component-text, inherit )!default;
+/// Border color of the PDF viewer page.
+/// @group pdf-viewer
+$kendo-pdf-viewer-page-border: var( --kendo-component-border, inherit ) !default;
+/// Shadow of the PDF viewer page.
+/// @group pdf-viewer
+$kendo-pdf-viewer-page-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+
+/// Horizontal padding of the PDF viewer search dialog.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-dialog-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the PDF viewer search dialog.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-dialog-padding-y: $kendo-pdf-viewer-search-dialog-padding-x !default;
+/// Spacing of the PDF viewer search dialog.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-dialog-spacing: map-get( $kendo-spacing, 2 ) !default;
+
+/// Border width of the PDF viewer search panel.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-panel-border-width: 1px !default;
+/// Border radius of the PDF viewer search panel.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-panel-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Background color of the PDF viewer search panel.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-panel-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the PDF viewer search panel.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-panel-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the PDF viewer search panel.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-panel-border: var( --kendo-component-border, inherit )!default;
+/// Shadow of the PDF viewer search panel.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-panel-shadow: none !default;
+/// Spacing of the PDF viewer search panel matches container.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-panel-matches-spacing: var( --kendo-icon-spacing, .5rem ) !default;
+/// Vertical margin of the PDF viewer search panel.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-panel-margin-y: calc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-dialog-padding-y} ) ) * -1 ) !default;
+
+/// Line height of the PDF viewer selection.
+/// @group pdf-viewer
+$kendo-pdf-viewer-selection-line-height: var( --kendo-line-height-sm, normal ) !default;
+
+/// Background-color of the PDF viewer highlight.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-highlight-bg: var( --kendo-component-text, inherit ) !default;
+/// Background-color of the PDF viewer highlight mark.
+/// @group pdf-viewer
+$kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
+
+/// Size of the PDF viewer icon.
+/// @group pdf-viewer
+$kendo-pdf-viewer-icon-size: $kendo-dropzone-icon-size !default;
+/// Text color of the PDF viewer icon.
+/// @group pdf-viewer
+$kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;