@progress/kendo-theme-fluent 5.7.0

package/scss/upload/_variables.scss

@@ -0,0 +1,107 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Width of the border around the upload.
+/// @group upload
+$kendo-upload-border-width: 1px !default;
+/// Font family of the upload.
+/// @group upload
+$kendo-upload-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the upload.
+/// @group upload
+$kendo-upload-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the upload.
+/// @group upload
+$kendo-upload-line-height: var( --kendo-line-height, normal )  !default;
+/// Maximum height of the upload.
+/// @group upload
+$kendo-upload-max-height: 300px !default;
+
+/// Background color of the upload.
+/// @group upload
+$kendo-upload-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the upload.
+/// @group upload
+$kendo-upload-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the upload.
+/// @group upload
+$kendo-upload-border: var( --kendo-component-border, initial ) !default;
+
+/// Horizontal padding of the upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Background color of the upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-bg: get-theme-color-var( neutral-10 ) !default; // header-bg
+/// Text color of the upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-text: get-theme-color-var( neutral-130 ) !default; //$header-text
+/// Border color of the upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-border: get-theme-color-var( neutral-30 ) !default;
+/// Background color of the hovered upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+
+/// Text color of the file status message in the upload.
+/// @group upload
+$kendo-upload-status-text: var( --kendo-subtle-text, inherit ) !default;
+/// Opacity of the file status message in the upload.
+/// @group upload
+$kendo-upload-status-text-opacity: null !default;
+
+/// Horizontal padding of the upload items.
+/// @group upload
+$kendo-upload-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the upload items.
+/// @group upload
+$kendo-upload-item-padding-y: map-get( $kendo-spacing, 2 ) !default;
+
+/// Spacing between multiple items in the upload.
+/// @group upload
+$kendo-upload-multiple-items-spacing: map-get( $kendo-spacing, 4 ) !default;
+
+/// Font size of the upload validation message.
+/// @group upload
+$kendo-upload-validation-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// Spacing between the icon and text in the upload.
+/// @group upload
+$kendo-upload-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
+/// Color of the icons in the upload.
+/// @group upload
+$kendo-upload-icon-color: var( --kendo-subtle-text, inherit ) !default;
+
+/// Font size of the file icons in the upload.
+/// @group upload
+$kendo-upload-group-icon-size: var( --kendo-icon-size-lg, 2rem ) !default;
+
+/// Thickness of the upload progress bar.
+/// @group upload
+$kendo-upload-progress-thickness: 2px !default;
+/// Background color of the upload progress bar.
+/// @group upload
+$kendo-upload-progress-bg: get-theme-color-var( primary-100 ) !default;
+/// Text color of the upload progress bar.
+/// @group upload
+$kendo-upload-progress-text: $kendo-upload-text !default;
+
+/// Success background color of the upload.
+/// @group upload
+$kendo-upload-success-bg: get-theme-color-var( success-190 ) !default;
+/// Success text color of the upload.
+/// @group upload
+$kendo-upload-success-text: get-theme-color-var( success-190 ) !default;
+
+/// Error background color of the upload.
+/// @group upload
+$kendo-upload-error-bg: get-theme-color-var( error-190 ) !default;
+/// Error text color of the upload.
+/// @group upload
+$kendo-upload-error-text: get-theme-color-var( error-190 ) !default;
+
+/// Focus shadow of the upload when focused.
+/// @group upload
+$kendo-upload-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/upload/index.scss

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

package/scss/utils/_layout.scss

@@ -0,0 +1,7 @@
+@use "_variables.scss" as *;
+
+@use "~@progress/kendo-theme-utils/scss/all.scss" with (
+    $kendo-utils-border-radius: $kendo-utils-border-radius
+);
+
+@mixin kendo-utils--layout() {}

package/scss/utils/_theme.scss

@@ -0,0 +1 @@
+@mixin kendo-utils--theme() {}

package/scss/utils/_variables.scss

@@ -0,0 +1,13 @@
+@use "../core/_variables.scss" as *;
+
+/// Border radius configuration of the theme utils.
+/// @group utils
+$kendo-utils-border-radius: (
+    DEFAULT: var( --kendo-border-radius-md, $kendo-border-radius-md ),
+    0: 0,
+    sm: var( --kendo-border-radius-sm, $kendo-border-radius-sm ),
+    md: var( --kendo-border-radius-md, $kendo-border-radius-md ),
+    lg: var( --kendo-border-radius-lg, $kendo-border-radius-lg ),
+    none: 0,
+    full: 9999px
+) !default;

package/scss/utils/index.scss

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

package/scss/validator/_layout.scss

@@ -0,0 +1,19 @@
+@use "_variables.scss" as *;
+@use "../tooltip/_variables.scss" as *;
+
+@mixin kendo-validator--layout() {
+
+    .k-validator-tooltip {
+        margin-block-start: calc( var( --kendo-validator-tooltip-margin, #{$kendo-tooltip-callout-size} ) + #{$kendo-tooltip-border-width} );
+        width: auto;
+        white-space: normal;
+        display: flex;
+        align-items: center;
+        // NOTE: This works around popup / tooltip stackin issue
+        z-index: 9999;
+    }
+    .k-grid .k-validator-tooltip {
+        max-width: 300px;
+    }
+
+}

package/scss/validator/_theme.scss

@@ -0,0 +1,5 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-validator--theme() {
+    .k-validator { }
+}

package/scss/validator/_variables.scss

@@ -0,0 +1 @@
+@use "../core/color-system" as *;

package/scss/validator/index.scss

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

package/scss/virtual-scroller/_layout.scss

@@ -0,0 +1,37 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-virtual-scroller--layout() {
+
+    // Virtual scroller
+    .k-virtual-scroller {
+        width: 100%;
+        height: 100%;
+        flex: 1 1 auto;
+        overflow: auto;
+        position: relative;
+    }
+
+
+    // Virtual scroller wrap
+    .k-virtual-scroller-wrap {
+        position: relative;
+        z-index: 1;
+    }
+
+
+    // Virtual scroller content
+    .k-virtual-scroller-content {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+
+    // Virtual scroller size
+    .k-virtual-scroller-size {
+        position: relative;
+        z-index: 0;
+    }
+    
+}

package/scss/virtual-scroller/_theme.scss

@@ -0,0 +1,5 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-virtual-scroller--theme() {
+    .k-virtual-scroller { }
+}

package/scss/virtual-scroller/_variables.scss

@@ -0,0 +1 @@
+// Virtual scroller variables

package/scss/virtual-scroller/index.scss

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

package/scss/window/_layout.scss

@@ -0,0 +1,162 @@
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-window--layout() {
+
+    .k-window {
+        @include border-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
+        padding: 0;
+        border-width: var( --kendo-window-border-width, #{$kendo-window-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-window-font-family, #{$kendo-window-font-family} );
+        font-size: var( --kendo-window-font-size, #{$kendo-window-font-size} );
+        line-height: var( --kendo-window-line-height, #{$kendo-window-line-height} );
+        display: inline-flex;
+        flex-direction: column;
+        position: absolute;
+        z-index: 10002;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+    }
+
+    .k-window.k-window-maximized {
+        max-width: 100vw;
+        max-height: 100vh;
+        box-shadow: none;
+    }
+
+    // Window sizes
+    @each $size, $kendo-width in $kendo-window-sizes {
+        .k-window-#{$size} { width: $kendo-width; }
+    }
+
+
+    // Title bar
+    .k-window-titlebar {
+        @include border-top-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
+        padding-inline: var( --kendo-window-titlebar-padding-x, #{$kendo-window-titlebar-padding-x} );
+        padding-block: var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} );
+        white-space: nowrap;
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
+        align-items: center;
+    }
+
+    // Title bar title text
+    .k-window-title {
+        padding: .5em 0;
+        margin: -.5em 0;
+        font-size: var( --kendo-window-title-font-size, #{$kendo-window-title-font-size} );
+        line-height: var( --kendo-window-title-line-height, #{$kendo-window-title-line-height} );
+        font-weight: var( --kendo-window-title-font-weight, #{$kendo-window-title-font-weight} );
+        text-overflow: ellipsis;
+        overflow: hidden;
+        cursor: default;
+        flex: 1;
+        display: flex;
+        flex-flow: row nowrap;
+
+        &::before {
+            content: "\200b";
+        }
+    }
+
+
+    // Actions
+    .k-window-actions {
+        margin: -5em 0;
+        margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
+        line-height: 1;
+        display: flex;
+        gap: var( --kendo-window-actions-gap, #{$kendo-window-actions-gap} );
+        flex-flow: row nowrap;
+        flex-shrink: 0;
+        align-items: center;
+        vertical-align: top;
+    }
+    .k-window-action {
+        flex-shrink: 0;
+        opacity: var( --kendo-window-action-opacity, #{$kendo-window-action-opacity} );
+
+        &:hover,
+        &.k-hover {
+            opacity: var( --kendo-window-action-hover-opacity, #{$kendo-window-action-hover-opacity} );
+        }
+    }
+
+
+    // Content
+    .k-window-content,
+    .k-prompt-container {
+        padding-inline: var( --kendo-window-inner-padding-x, #{$kendo-window-inner-padding-x} );
+        padding-block: 0 var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} );
+        border-width: 0;
+        border-color: inherit;
+        color: inherit;
+        background: none;
+        outline: 0;
+        overflow: auto;
+        position: relative;
+        flex: 1 1 auto;
+    }
+    .k-window-content + .k-prompt-container {
+        margin-top: calc( -1 * var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ) / 2 );
+    }
+    .k-window-content:first-child {
+        padding-top: clamp( var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ));
+    }
+    .k-window-content:last-child {
+        padding-bottom: clamp( var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ));
+    }
+
+    .k-window-iframecontent {
+        padding: 0;
+        overflow: visible;
+
+        .k-content-frame {
+            vertical-align: top;
+            border: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    // Buttons Layout
+    .k-window-buttons,
+    .k-window-buttongroup {
+        @include border-bottom-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
+        padding-inline: var( --kendo-window-buttongroup-padding-x, #{$kendo-window-buttongroup-padding-x} );
+        padding-block: 0 var( --kendo-window-buttongroup-padding-y, #{$kendo-window-buttongroup-padding-y} );
+        border-width: var( --kendo-window-buttongroup-border-width, #{$kendo-window-buttongroup-border-width} ) 0 0;
+        border-style: solid;
+        border-color: inherit;
+        flex: 0 0 auto;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        gap: var( --kendo-window-buttongroup-spacing, #{$kendo-window-buttongroup-spacing} );
+        overflow: hidden;
+    }
+
+
+    // Prompt
+    .k-prompt-container {
+
+        > .k-textarea {
+            width: 100%;
+        }
+
+    }
+
+    // Resize Handles
+    .k-window {
+        .k-resize-n { top: 0; }
+        .k-resize-e { right: 0; }
+        .k-resize-s { bottom: 0; }
+        .k-resize-w { left: 0; }
+    }
+}

package/scss/window/_theme.scss

@@ -0,0 +1,31 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-window--theme() {
+
+    // Window
+    .k-window {
+        @include fill(
+            var( --kendo-window-text, #{$kendo-window-text} ),
+            var( --kendo-window-bg, #{$kendo-window-bg} ),
+            var( --kendo-window-border, #{$kendo-window-border} )
+        );
+        @include box-shadow( var( --kendo-window-shadow, #{$kendo-window-shadow} ) );
+
+        &:focus,
+        &.k-focus {
+            @include box-shadow( var( --kendo-window-focused-shadow, #{$kendo-window-focused-shadow} ) );
+        }
+    }
+
+
+    // Title
+    .k-window-title {
+        @include fill(
+            var( --kendo-window-titlebar-text, #{$kendo-window-titlebar-text} ),
+            var( --kendo-window-titlebar-bg, #{$kendo-window-titlebar-bg} ),
+            var( --kendo-window-titlebar-border, #{$kendo-window-titlebar-border} )
+        );
+    }
+
+}

package/scss/window/_variables.scss

@@ -0,0 +1,107 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Width of the border around the window.
+/// @group window
+$kendo-window-border-width: map-get( $kendo-spacing, 1 ) 0 0 !default;
+/// Border radius of the window.
+/// @group window
+$kendo-window-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Font family of the window.
+/// @group window
+$kendo-window-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the window.
+/// @group window
+$kendo-window-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the window.
+/// @group window
+$kendo-window-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Horizontal padding of the window titlebar.
+/// @group window
+$kendo-window-titlebar-padding-x: map-get( $kendo-spacing, 6 ) !default;
+/// Vertical padding of the window titlebar.
+/// @group window
+$kendo-window-titlebar-padding-y: map-get( $kendo-spacing, 5 ) !default;
+/// Width of the top border of the window titlebar.
+/// @group window
+$kendo-window-titlebar-border-width: 0 !default;
+/// Style of the top border of the window titlebar.
+/// @group window
+$kendo-window-titlebar-border-style: solid !default;
+
+/// Font size of the title of the window.
+/// @group window
+$kendo-window-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
+/// Line height of the title of the window.
+/// @group window
+$kendo-window-title-line-height: var( --kendo-line-height, normal ) !default;
+/// Font weight of the title of the window.
+/// @group window
+$kendo-window-title-font-weight: var( --kendo-font-weight-bold, bold ) !default;
+
+/// Spacing between the buttons in the header of the window.
+/// @group window
+$kendo-window-actions-gap: 0px !default;
+
+/// Opacity of the buttons in the header of the window.
+/// @group window
+$kendo-window-action-opacity: 1 !default;
+/// Opacity of the buttons when hovered in the header of the window.
+/// @group window
+$kendo-window-action-hover-opacity: 1 !default;
+
+/// Horizontal padding of the content of the window.
+/// @group window
+$kendo-window-inner-padding-x: map-get( $kendo-spacing, 6 ) !default;
+/// Vertical padding of the content of the window.
+/// @group window
+$kendo-window-inner-padding-y: map-get( $kendo-spacing, 6 ) !default;
+
+/// Horizontal padding of the window action buttons.
+/// @group window
+$kendo-window-buttongroup-padding-x: map-get( $kendo-spacing, 6 ) !default; // $actions-padding-x
+/// Vertical padding of the window action buttons.
+/// @group window
+$kendo-window-buttongroup-padding-y: map-get( $kendo-spacing, 6 ) !default; // $actions-padding-y
+/// Width of the top border of the window action buttons.
+/// @group window
+$kendo-window-buttongroup-border-width: 0 !default;
+/// Spacing between the action buttons of the window.
+/// @group window
+$kendo-window-buttongroup-spacing: map-get( $kendo-spacing, 3 ) !default;
+
+/// Background color of the window.
+/// @group window
+$kendo-window-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the window.
+/// @group window
+$kendo-window-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the window.
+/// @group window
+$kendo-window-border: get-theme-color-var( primary-100 ) !default;
+
+/// Background color of the window titlebar.
+/// @group window
+$kendo-window-titlebar-bg: var( --kendo-component-bg, initial ) !default; // $header-bg
+/// Text color of the window titlebar.
+/// @group window
+$kendo-window-titlebar-text: get-theme-color-var( primary-100 ) !default; // $header-text
+/// Border color of the window titlebar.
+/// @group window
+$kendo-window-titlebar-border: get-theme-color-var( primary-100 ) !default;
+
+/// Box shadow around the window.
+/// @group window
+$kendo-window-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+/// Box shadow around the window when hovered.
+/// @group window
+$kendo-window-focused-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+
+/// Map of the width of the different window sizes.
+/// @group window
+$kendo-window-sizes: (
+    sm: 300px,
+    md: 800px,
+    lg: 1200px
+) !default;

package/scss/window/index.scss

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