@progress/kendo-theme-fluent 5.7.0

package/scss/drawer/_theme.scss

@@ -0,0 +1,94 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-drawer--theme() {
+
+    .k-drawer {
+        @include fill(
+            var( --kendo-drawer-text, #{$kendo-drawer-text} ),
+            var( --kendo-drawer-bg, #{$kendo-drawer-bg} ),
+            var( --kendo-drawer-border, #{$kendo-drawer-border} )
+        );
+    }
+
+    // Drawer items
+    .k-drawer-wrapper {
+        scrollbar-color: var( --kendo-drawer-scrollbar-color, #{$kendo-drawer-scrollbar-color} ) var( --kendo-drawer-scrollbar-bg, #{$kendo-drawer-scrollbar-bg} );
+
+        &::-webkit-scrollbar-track {
+            background: var( --kendo-drawer-scrollbar-bg, #{$kendo-drawer-scrollbar-bg} );
+        }
+        &::-webkit-scrollbar-thumb {
+            background: var( --kendo-drawer-scrollbar-color, #{$kendo-drawer-scrollbar-color} );
+        }
+        &::-webkit-scrollbar-thumb:hover {
+            background: var( --kendo-drawer-scrollbar-hover-color, #{$kendo-drawer-scrollbar-hover-color} );
+        }
+    }
+    .k-drawer-item {
+        @include fill(
+            var( --kendo-drawer-item-text, #{$kendo-drawer-item-text} ),
+            var( --kendo-drawer-item-bg, #{$kendo-drawer-item-bg} )
+        );
+
+        .k-icon {
+            color: var( --kendo-drawer-item-icon-text, #{$kendo-drawer-item-icon-text} );
+        }
+
+        &:hover,
+        &.k-hover {
+            @include fill(
+                var( --kendo-drawer-item-hover-text, #{$kendo-drawer-item-hover-text} ),
+                var( --kendo-drawer-item-hover-bg, #{$kendo-drawer-item-hover-bg} )
+            );
+
+            .k-icon {
+                color: var( --kendo-drawer-item-hover-icon-text, #{$kendo-drawer-item-hover-icon-text} );
+            }
+        }
+
+        &:focus,
+        &.k-focus {
+            @include fill(
+                var( --kendo-drawer-item-focus-text, #{$kendo-drawer-item-focus-text} ),
+                var( --kendo-drawer-item-focus-bg, #{$kendo-drawer-item-focus-bg} )
+            );
+            box-shadow: var( --kendo-drawer-item-focus-shadow, #{$kendo-drawer-item-focus-shadow} );
+
+            .k-icon {
+                color: var( --kendo-drawer-item-focus-icon-text, #{$kendo-drawer-item-focus-icon-text} );
+            }
+
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    var( --kendo-drawer-item-hover-text, #{$kendo-drawer-item-hover-text} ),
+                    var( --kendo-drawer-item-hover-bg, #{$kendo-drawer-item-hover-bg} )
+                );
+            }
+        }
+
+        &.k-selected {
+            @include fill(
+                var( --kendo-drawer-item-selected-text, #{$kendo-drawer-item-selected-text} ),
+                var( --kendo-drawer-item-selected-bg, #{$kendo-drawer-item-selected-bg} )
+            );
+
+            .k-icon {
+                color: var( --kendo-drawer-item-selected-icon-text, #{$kendo-drawer-item-selected-icon-text} );
+            }
+
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    var( --kendo-drawer-item-selected-hover-text, #{$kendo-drawer-item-selected-hover-text} ),
+                    var( --kendo-drawer-item-selected-hover-bg, #{$kendo-drawer-item-selected-hover-bg} )
+                );
+            }
+        }
+    }
+    .k-drawer-separator {
+        background-color: var( --kendo-drawer-border, #{$kendo-drawer-border} );
+    }
+
+}

package/scss/drawer/_variables.scss

@@ -0,0 +1,132 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Background color of the drawer.
+/// @group drawer
+$kendo-drawer-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the drawer.
+/// @group drawer
+$kendo-drawer-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the drawer.
+/// @group drawer
+$kendo-drawer-border: var( --kendo-component-border, initial ) !default;
+/// Border width of the drawer.
+/// @group drawer
+$kendo-drawer-border-width: 1px !default;
+/// Font family of the drawer.
+/// @group drawer
+$kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the drawer.
+/// @group drawer
+$kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the drawer.
+/// @group drawer
+$kendo-drawer-line-height: var( --kendo-line-height, inherit ) !default;
+/// Horizontal padding of the drawer content.
+/// @group drawer
+$kendo-drawer-content-padding-x: var( --kendo-padding-x, #{$kendo-padding-x} ) !default;
+/// Vertical padding of the drawer content.
+/// @group drawer
+$kendo-drawer-content-padding-y: var( --kendo-padding-y, #{$kendo-padding-y} ) !default;
+/// Horizontal padding of the drawer item in each level.
+/// @group drawer
+$kendo-drawer-item-level-padding-x: map-get( $kendo-spacing, 4 ) !default;
+
+/// Count of the drawer item levels.
+/// @group drawer
+$kendo-drawer-item-level-count: 5 !default;
+
+/// Scrollbar width of the drawer.
+/// @group drawer
+$kendo-drawer-scrollbar-width: 7px !default;
+/// Scrollbar color of the drawer.
+/// @group drawer
+$kendo-drawer-scrollbar-color: get-theme-color-var( neutral-90 ) !default;
+/// Scrollbar background of the drawer.
+/// @group drawer
+$kendo-drawer-scrollbar-bg: get-theme-color-var( neutral-40 ) !default;
+/// Scrollbar border radius of the drawer.
+/// @group drawer
+$kendo-drawer-scrollbar-radius: 20px !default;
+/// Scrollbar hover color of the drawer.
+/// @group drawer
+$kendo-drawer-scrollbar-hover-color: get-theme-color-var( neutral-110 ) !default;
+
+/// Horizontal padding of the drawer item.
+/// @group drawer
+$kendo-drawer-item-padding-x: var( --kendo-padding-x, #{$kendo-padding-x} ) !default;
+/// Vertical padding of the drawer item.
+/// @group drawer
+$kendo-drawer-item-padding-y: var( --kendo-padding-x, #{$kendo-padding-x} ) !default;
+/// Font size of the drawer item.
+/// @group drawer
+$kendo-drawer-item-font-size: $kendo-drawer-font-size !default;
+/// Line height of the drawer item.
+/// @group drawer
+$kendo-drawer-item-line-height: var( --kendo-line-height-lg, normal ) !default;
+/// Icon size of the drawer item.
+/// @group drawer
+$kendo-drawer-icon-size: var( --kendo-icon-size, 1rem ) !default;
+
+/// Initial width of the mini drawer.
+/// @group drawer
+$kendo-drawer-mini-initial-width: calc( 4 * #{$kendo-drawer-item-padding-x} + #{$kendo-drawer-icon-size} ) !default;
+
+/// The border width of the drawer item ripple
+/// @group drawer
+$kendo-drawer-item-ripple-border-width: map-get( $kendo-spacing, thin ) !default;
+/// The border color of the drawer item ripple
+/// @group drawer
+$kendo-drawer-item-ripple-border: get-theme-color-var( primary-100 ) !default;
+/// Background color of the drawer item.
+/// @group drawer
+$kendo-drawer-item-bg: $kendo-drawer-bg !default;
+/// Text color of the drawer item.
+/// @group drawer
+$kendo-drawer-item-text: $kendo-drawer-text !default;
+/// Text color of the drawer item icon.
+/// @group drawer
+$kendo-drawer-item-icon-text: get-theme-color-var( primary-100 ) !default;
+
+/// Background color of the hovered drawer item.
+/// @group drawer
+$kendo-drawer-item-hover-bg: $kendo-drawer-item-bg !default;
+/// Text color of the hovered drawer item.
+/// @group drawer
+$kendo-drawer-item-hover-text: get-theme-color-var( primary-110 ) !default;
+/// Text color of the hovered drawer item icon.
+/// @group drawer
+$kendo-drawer-item-hover-icon-text: get-theme-color-var( primary-110 ) !default;
+
+/// Background color of the focused drawer item.
+/// @group drawer
+$kendo-drawer-item-focus-bg: $kendo-drawer-item-bg !default;
+/// Text color of the focused drawer item.
+/// @group drawer
+$kendo-drawer-item-focus-text: $kendo-drawer-item-text !default;
+/// Box shadow of the focused drawer item.
+/// @group drawer
+$kendo-drawer-item-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
+/// Text color of the focused drawer item icon.
+/// @group drawer
+$kendo-drawer-item-focus-icon-text: $kendo-drawer-item-icon-text !default;
+
+/// Font weight of the selected drawer item.
+/// @group drawer
+$kendo-drawer-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+/// Background color of the selected drawer item.
+/// @group drawer
+$kendo-drawer-item-selected-bg: var( --kendo-selected-bg, initial ) !default;
+/// Text color of the selected drawer item.
+/// @group drawer
+$kendo-drawer-item-selected-text: $black !default;
+/// Text color of the selected drawer item icon.
+/// @group drawer
+$kendo-drawer-item-selected-icon-text: get-theme-color-var( primary-120 ) !default;
+/// Background color of the selected and hovered drawer item.
+/// @group drawer
+$kendo-drawer-item-selected-hover-bg: var(--kendo-selected-hover-bg, inherit ) !default;
+/// Text color of the selected and hovered drawer item.
+/// @group drawer
+$kendo-drawer-item-selected-hover-text: var(--kendo-selected-hover-text, inherit ) !default;
+

package/scss/drawer/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "drawer",
+    dependencies: (
+        "overlay",
+        "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( "drawer" ) {
+        @include kendo-drawer--layout();
+        @include kendo-drawer--theme();
+    }
+}

package/scss/dropdowngrid/_layout.scss

@@ -0,0 +1,13 @@
+@mixin kendo-dropdowngrid--layout() {
+
+    // DropdownGrid
+    .k-dropdown-grid {}
+
+    // DropdowGrid Popup
+    .k-dropdowngrid-popup {
+        overflow: hidden;
+    }
+    .k-dropdowngrid-popup > .k-data-table {
+        border-width: 0;
+    }
+}

package/scss/dropdowngrid/_theme.scss

@@ -0,0 +1,5 @@
+@mixin kendo-dropdowngrid--theme() {
+
+    // Dropdown grid
+    .k-dropdown-grid {}
+}

package/scss/dropdowngrid/_variables.scss

@@ -0,0 +1 @@
+// Dropdown grid

package/scss/dropdowngrid/index.scss

@@ -0,0 +1,33 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "dropdowngrid",
+    dependencies: (
+        "button",
+        "table",
+        "input",
+        "floating-label",
+        "combobox",
+        "popup",
+        "toolbar",
+        "menu",
+        "grid"
+    )
+);
+
+// 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( "dropdowngrid" ) {
+        @include kendo-dropdowngrid--layout();
+        @include kendo-dropdowngrid--theme();
+    }
+}
+

package/scss/dropdownlist/_layout.scss

@@ -0,0 +1,36 @@
+@mixin kendo-dropdownlist--layout() {
+
+    // Dropdown list
+    .k-dropdown-list {}
+
+
+    // Native select
+    select.k-dropdown-list {}
+
+
+    // Dropdown operator
+    .k-dropdown-operator {
+        width: min-content;
+        flex: none;
+        aspect-ratio: 1;
+
+        .k-input-button {
+            border-width: 0;
+        }
+        .k-input-button .k-button-icon {
+            width: auto;
+            aspect-ratio: 1;
+        }
+
+        .k-input-inner {
+            display: none;
+        }
+    }
+
+    // Alias
+    .k-dropdown,
+    .k-dropdownlist {
+        @extend .k-dropdown-list !optional;
+    }
+
+}

package/scss/dropdownlist/_theme.scss

@@ -0,0 +1,9 @@
+@mixin kendo-dropdownlist--theme() {
+
+    // Dropdown list
+    .k-dropdown-list {}
+
+    // Native select
+    select.k-dropdown-list {}
+
+}

package/scss/dropdownlist/_variables.scss

@@ -0,0 +1 @@
+// Dropdown list

package/scss/dropdownlist/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "dropdownlist",
+    dependencies: (
+        "input",
+        "floating-label",
+        "popup",
+        "list"
+
+    )
+);
+
+// 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( "dropdownlist" ) {
+        @include kendo-dropdownlist--layout();
+        @include kendo-dropdownlist--theme();
+    }
+}
+

package/scss/dropdowntree/_layout.scss

@@ -0,0 +1,22 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-dropdowntree--layout() {
+
+    // Dropdown tree
+    .k-dropdown-tree {}
+
+    // Dropdowntree popup
+    .k-popup-dropdowntree {
+        padding: 0;
+
+        .k-check-all {
+            padding: var( --kendo-dropdowntree-popup-padding-y, #{$kendo-dropdowntree-popup-padding-y} ) var( --kendo-dropdowntree-popup-padding-x, #{$kendo-dropdowntree-popup-padding-x} ) 0;
+        }
+
+        .k-treeview {
+            padding-inline: var( --kendo-dropdowntree-popup-padding-x, #{$kendo-dropdowntree-popup-padding-x} );
+            padding-block: var( --kendo-dropdowntree-popup-padding-y, #{$kendo-dropdowntree-popup-padding-y } );
+        }
+    }
+
+}

package/scss/dropdowntree/_theme.scss

@@ -0,0 +1,6 @@
+@mixin kendo-dropdowntree--theme() {
+
+    // Dropdown tree
+    .k-dropdown-tree {}
+
+}

package/scss/dropdowntree/_variables.scss

@@ -0,0 +1,5 @@
+@use "../core/" as *;
+@use "../popup/_variables.scss" as *;
+
+$kendo-dropdowntree-popup-padding-x: $kendo-popup-content-padding-x !default;
+$kendo-dropdowntree-popup-padding-y: $kendo-popup-content-padding-y !default;

package/scss/dropdowntree/index.scss

@@ -0,0 +1,28 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "dropdowntree",
+    dependencies: (
+        "floating-label",
+        "dropdownlist",
+        "multiselect",
+        "treeview",
+        "popup"
+    )
+);
+
+// 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( "dropdowntree" ) {
+        @include kendo-dropdowntree--layout();
+        @include kendo-dropdowntree--theme();
+    }
+}

package/scss/dropzone/_layout.scss

@@ -0,0 +1,49 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-dropzone--layout() {
+
+    // Dropzone
+    .k-external-dropzone {
+        height: var( --kendo-dropzone-min-height, #{$kendo-dropzone-min-height} );
+        display: flex;
+        flex-flow: row nowrap;
+    }
+
+    // Dropzone inner
+    .k-dropzone-inner {
+        padding-inline: var( --kendo-dropzone-padding-x, #{$kendo-dropzone-padding-x} );
+        padding-block: var( --kendo-dropzone-padding-y, #{$kendo-dropzone-padding-y} );
+        border-width: var( --kendo-dropzone-border-width, #{$kendo-dropzone-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        font-size: var( --kendo-dropzone-font-size, #{$kendo-dropzone-font-size} );
+        font-family: var( --kendo-dropzone-font-family, #{$kendo-dropzone-font-family} );
+        line-height: var( --kendo-dropzone-line-height, #{$kendo-dropzone-line-height} );
+        flex: 1 1 auto;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        cursor: pointer;
+
+        > .k-icon,
+        .k-dropzone-icon {
+            margin-block-end: var( --kendo-dropzone-icon-spacing, #{$kendo-dropzone-icon-spacing} );
+            font-size: var( --kendo-dropzone-icon-size, #{$kendo-dropzone-icon-size} );
+        }
+
+        .k-dropzone-hint {
+            margin-block-end: var( --kendo-dropzone-hint-spacing, #{$kendo-dropzone-hint-spacing} );
+            font-size: var( --kendo-dropzone-hint-font-size, #{$kendo-dropzone-hint-font-size} );
+            font-weight: var( --kendo-dropzone-hint-font-weight, #{$kendo-dropzone-hint-font-weight} );
+        }
+
+        .k-dropzone-note {
+            margin-block-end: var( --kendo-dropzone-note-spacing, #{$kendo-dropzone-note-spacing} );
+            font-size: var( --kendo-dropzone-note-font-size, #{$kendo-dropzone-note-font-size} );
+            font-weight: var( --kendo-dropzone-note-font-weight, #{$kendo-dropzone-note-font-weight} );
+        }
+    }
+
+}

package/scss/dropzone/_theme.scss

@@ -0,0 +1,35 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-dropzone--theme() {
+
+    // Dropzone
+    .k-dropzone-inner {
+        @include fill(
+            var( --kendo-dropzone-text, #{$kendo-dropzone-text} ),
+            var( --kendo-dropzone-bg, #{$kendo-dropzone-bg} ),
+            var( --kendo-dropzone-border, #{$kendo-dropzone-border} )
+        );
+
+        > .k-icon,
+        .k-dropzone-icon {
+            color: var( --kendo-dropzone-icon-text, #{$kendo-dropzone-icon-text} );
+        }
+        .k-dropzone-hint {
+            color: var( --kendo-dropzone-hint-text, #{$kendo-dropzone-hint-text} );
+        }
+        .k-dropzone-note {
+            color: var( --kendo-dropzone-note-text, #{$kendo-dropzone-note-text} );
+        }
+    }
+
+
+    // Hover
+    .k-external-dropzone-hover {
+        .k-icon,
+        .k-dropzone-icon {
+            color: var( --kendo-dropzone-icon-hover-text, #{$kendo-dropzone-icon-hover-text} );
+        }
+    }
+
+}

package/scss/dropzone/_variables.scss

@@ -0,0 +1,75 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../icon/_variables.scss" as *;
+
+/// Horizontal padding of the dropzone.
+/// @group dropzone
+$kendo-dropzone-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the dropzone.
+/// @group dropzone
+$kendo-dropzone-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Border width of the dropzone.
+/// @group dropzone
+$kendo-dropzone-border-width: 1px !default;
+/// Min height of the dropzone.
+/// @group dropzone
+$kendo-dropzone-min-height: 220px !default;
+
+/// Font family of the dropzone.
+/// @group dropzone
+$kendo-dropzone-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the dropzone.
+/// @group dropzone
+$kendo-dropzone-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the dropzone.
+/// @group dropzone
+$kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the dropzone.
+/// @group dropzone
+$kendo-dropzone-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the dropzone.
+/// @group dropzone
+$kendo-dropzone-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the dropzone.
+/// @group dropzone
+$kendo-dropzone-border: var( --kendo-component-border, initial ) !default;
+
+/// Size of the icon.
+/// @group dropzone
+$kendo-dropzone-icon-size: calc( var( --kendo-icon-size, 1rem ) * 3 ) !default;
+/// Spacing below the icon.
+/// @group dropzone
+$kendo-dropzone-icon-spacing: map-get( $kendo-spacing, 6 ) !default;
+/// Text color of the icon.
+/// @group dropzone
+$kendo-dropzone-icon-text: get-theme-color-var( neutral-90 ) !default;
+/// Text color of the icon when the dropzone is hovered.
+/// @group dropzone
+$kendo-dropzone-icon-hover-text: get-theme-color-var( primary-100 ) !default;
+
+/// Font size of the hint.
+/// @group dropzone
+$kendo-dropzone-hint-font-size: inherit !default;
+/// Font weight of the hint.
+/// @group dropzone
+$kendo-dropzone-hint-font-weight: var( --kendo-font-weight-bold, bold ) !default;
+/// Spacing below the hint.
+/// @group dropzone
+$kendo-dropzone-hint-spacing: map-get( $kendo-spacing, 2 ) !default;
+/// Text color of the hint.
+/// @group dropzone
+$kendo-dropzone-hint-text: $kendo-dropzone-text !default;
+
+/// Font size of the note.
+/// @group dropzone
+$kendo-dropzone-note-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Font weight of the note.
+/// @group dropzone
+$kendo-dropzone-note-font-weight: inherit !default;
+/// Spacing below the note.
+/// @group dropzone
+$kendo-dropzone-note-spacing: 0 !default;
+/// Text color of the note.
+/// @group dropzone
+$kendo-dropzone-note-text: var( --kendo-subtle-text, inherit ) !default;

package/scss/dropzone/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "dropzone",
+    dependencies: (
+        "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( "dropzone" ) {
+        @include kendo-dropzone--layout();
+        @include kendo-dropzone--theme();
+    }
+}