@progress/kendo-theme-fluent 5.7.0

package/scss/typography/_layout.scss

@@ -0,0 +1,110 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-typography--layout() {
+    @if $kendo-enable-typography {
+        body { @extend .k-body; }
+        h1 { @extend .k-h1; }
+        h2 { @extend .k-h2; }
+        h3 { @extend .k-h3; }
+        h4 { @extend .k-h4; }
+        h5 { @extend .k-h5; }
+        h6 { @extend .k-h6; }
+        p { @extend .k-paragraph; }
+        pre { @extend .k-pre; }
+        code { @extend .k-code; }
+    }
+
+    .k-body {
+        p {
+            margin: var(--kendo-paragraph-margin, #{$kendo-paragraph-margin});
+        }
+    }
+
+    // Headings
+    @each $heading, $heading-props in $kendo-headings {
+        $_font-size: map-get( $heading-props, font-size );
+        $_font-family: map-get( $heading-props, font-family );
+        $_line-height: map-get( $heading-props, line-height );
+        $_font-weight: map-get( $heading-props, font-weight );
+        $_letter-spacing: map-get( $heading-props, letter-spacing );
+        $_margin: map-get( $heading-props, margin );
+
+        .k-#{$heading} {
+            @include typography(
+                var( --kendo-#{$heading}-font-size, #{$_font-size} ),
+                var( --kendo-#{$heading}-font-family, #{$_font-family} ),
+                var( --kendo-#{$heading}-line-height, #{$_line-height} ),
+                var( --kendo-#{$heading}-font-weight, #{$_font-weight} ),
+                var( --kendo-#{$heading}-letter-spacing, #{$_letter-spacing} ),
+            );
+            margin: var( --kendo-#{$heading}-margin, #{$_margin} );
+        }
+    }
+
+    // Paragraph
+    .k-paragraph {
+        @include typography(
+            var(--kendo-paragraph-font-size, #{$kendo-paragraph-font-size}),
+            var(--kendo-paragraph-font-family, #{$kendo-paragraph-font-family}),
+            var(--kendo-paragraph-line-height, #{$kendo-paragraph-line-height}),
+            var(--kendo-paragraph-font-weight, #{$kendo-paragraph-font-weight}),
+            var(--kendo-paragraph-letter-spacing, #{$kendo-paragraph-letter-spacing})
+        );
+        margin: var(--kendo-paragraph-margin, #{$kendo-paragraph-margin});
+    }
+
+    // Code snippet
+    .k-pre,
+    .k-code {
+        @include typography(
+            var(--kendo-code-font-size, #{$kendo-code-font-size}),
+            var(--kendo-code-font-family, #{$kendo-code-font-family}),
+            var(--kendo-code-line-height, #{$kendo-code-line-height}),
+            var(--kendo-code-font-weight, #{$kendo-code-font-weight}),
+            var(--kendo-code-letter-spacing, #{$kendo-code-letter-spacing})
+        );
+        border-style: solid;
+        border-width: var(--kendo-code-border-width, #{$kendo-code-border-width});
+    }
+
+    .k-pre {
+        padding-inline: var(--kendo-pre-padding-x, #{$kendo-pre-padding-x});
+        padding-block: var(--kendo-pre-padding-y, #{$kendo-pre-padding-y});
+        overflow: auto;
+    }
+
+    .k-pre > .k-code {
+        padding: 0;
+        border-width: 0;
+        border-color: transparent;
+        background-color: transparent;
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    .k-code {
+        padding-inline: var(--kendo-code-padding-x, #{$kendo-code-padding-x});
+        padding-block: var(--kendo-code-padding-y, #{$kendo-code-padding-y});
+    }
+
+    // Display
+    @each $display, $display-props in $kendo-display {
+        $_font-size: map-get( $display-props, font-size );
+        $_font-family: map-get( $display-props, font-family );
+        $_line-height: map-get( $display-props, line-height );
+        $_font-weight: map-get( $display-props, font-weight );
+        $_letter-spacing: map-get( $display-props, letter-spacing );
+        $_margin: map-get( $display-props, margin );
+
+        .k-display-#{$display} {
+            @include typography(
+                var( --kendo-display#{$display}-font-size, #{$_font-size} ),
+                var( --kendo-display#{$display}-font-family, #{$_font-family} ),
+                var( --kendo-display#{$display}-line-height, #{$_line-height} ),
+                var( --kendo-display#{$display}-font-weight, #{$_font-weight} ),
+                var( --kendo-display#{$display}-letter-spacing, #{$_letter-spacing} ),
+            );
+        }
+    }
+}

package/scss/typography/_theme.scss

@@ -0,0 +1,15 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-typography--theme() {
+    // Code snippet
+    .k-pre,
+    .k-code {
+        @include fill(
+            var( --kendo-code-text, #{$kendo-code-text} ),
+            var( --kendo-code-bg, #{$kendo-code-bg} ),
+            var( --kendo-code-border, #{$kendo-code-border} ),
+        );
+    }
+
+}

package/scss/typography/_variables.scss

@@ -0,0 +1,126 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+// Typography
+
+/// Global typography styles for the Kendo Default theme.
+/// @group typography
+$kendo-enable-typography: false !default;
+
+
+/// Font family for monospaced text. Used for styling the code.
+/// @group typography
+$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+
+
+// Headings
+$kendo-headings: (
+    h1: (
+        font-size: 42px,
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal),
+        margin: 0 0 var(--kendo-font-size, inherit)
+    ),
+    h2: (
+        font-size: 32px,
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal),
+        margin: 0 0 var(--kendo-font-size, inherit)
+    ),
+    h3: (
+        font-size: 28px,
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal),
+        margin: 0 0 var(--kendo-font-size, inherit)
+    ),
+    h4: (
+        font-size: 20px,
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal),
+        margin: 0 0 var(--kendo-font-size, inherit)
+    ),
+    h5: (
+        font-size: 18px,
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal),
+        margin: 0 0 var(--kendo-font-size, inherit)
+    ),
+    h6: (
+        font-size: 16px,
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal),
+        margin: 0 0 var(--kendo-font-size, inherit)
+    )
+) !default;
+
+
+// Paragraph
+$kendo-paragraph-margin: 0 0 var(--kendo-font-size, inherit) !default;
+$kendo-paragraph-font-size: var(--kendo-font-size, inherit) !default;
+$kendo-paragraph-font-family: var(--kendo-font-family, inherit ) !default;
+$kendo-paragraph-line-height: var(--kendo-line-height, normal) !default;
+$kendo-paragraph-font-weight: var(--kendo-font-weight, normal) !default;
+$kendo-paragraph-letter-spacing: var(--kendo-letter-spacing, normal) !default;
+
+
+// Code
+$kendo-code-font-size: var(--kendo-font-size, inherit) !default;
+$kendo-code-font-family: $kendo-font-family-monospace !default;
+$kendo-code-line-height: var(--kendo-line-height, normal) !default;
+$kendo-code-font-weight: var(--kendo-font-weight, normal) !default;
+$kendo-code-letter-spacing: var(--kendo-letter-spacing, normal) !default;
+
+$kendo-code-padding-x: map-get( $kendo-spacing, 1 ) !default;
+$kendo-code-padding-y: map-get( $kendo-spacing, 0 ) !default;
+$kendo-pre-padding-x: map-get( $kendo-spacing, 6 ) !default;
+$kendo-pre-padding-y: map-get( $kendo-spacing, 4 ) !default;
+$kendo-code-border-width: 1px !default;
+
+$kendo-code-bg: var(--kendo-component-bg, initial) !default;
+$kendo-code-text: var(--kendo-component-text, initial) !default;
+$kendo-code-border: var(--kendo-component-border, initial) !default;
+
+
+// Display
+$kendo-display: (
+    1: (
+        font-size: calc( var(--kendo-font-size, inherit) * 6 ),
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal)
+    ),
+    2: (
+        font-size: calc(var(--kendo-font-size, inherit) * 5 ),
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal)
+    ),
+    3: (
+        font-size: calc( var(--kendo-font-size, inherit) * 4 ),
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal)
+    ),
+    4: (
+        font-size: calc(var(--kendo-font-size, inherit) * 3 ),
+        font-family: var(--kendo-font-family, inherit ),
+        line-height: var(--kendo-line-height, normal ),
+        font-weight: var(--kendo-font-weight-bold, bold),
+        letter-spacing: var(--kendo-letter-spacing, normal)
+    )
+) !default;

package/scss/typography/index.scss

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

package/scss/upload/_layout.scss

@@ -0,0 +1,275 @@
+@use "_variables.scss" as *;
+@use "../core/_variables.scss" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-upload--layout() {
+
+    .k-upload {
+        border-width: var( --kendo-upload-border-width, #{$kendo-upload-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-upload-font-family, #{$kendo-upload-font-family} );
+        font-size: var( --kendo-upload-font-size, #{$kendo-upload-font-size} );
+        line-height: var( --kendo-upload-line-height, #{$kendo-upload-line-height} );
+        position: relative;
+        display: block;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-upload-button {
+            min-width: 7em;
+        }
+
+        // Drop zone
+        .k-dropzone {
+            padding-inline: var( --kendo-upload-dropzone-padding-x, #{$kendo-upload-dropzone-padding-x} );
+            padding-block: var( --kendo-upload-dropzone-padding-y, #{$kendo-upload-dropzone-padding-y} );
+            border-width: 0;
+            text-align: right;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            position: relative;
+            background-color: transparent;
+
+            .k-dropzone-hint {
+                font-style: normal;
+                font-weight: normal;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                position: relative;
+                flex: 1;
+            }
+
+            .k-upload-status {
+                font-weight: normal;
+                display: flex;
+                align-items: center;
+                position: relative;
+
+                > .k-icon {
+                    margin-inline-end: var( --kendo-upload-icon-spacing, #{$kendo-upload-icon-spacing} );
+                }
+            }
+
+            .k-upload-status + .k-dropzone-hint {
+                display: none;
+            }
+        }
+
+        .k-dropzone-active {
+            .k-upload-status {
+                display: none;
+            }
+
+            .k-upload-status + .k-dropzone-hint {
+                display: block;
+            }
+        }
+
+        // Upload files list
+        .k-upload-files {
+            max-height: var( --kendo-upload-max-height, #{$kendo-upload-max-height} );
+            overflow-y: auto;
+            margin: 0;
+            padding: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            border-color: inherit;
+            list-style: none;
+
+            .k-file-multiple,
+            .k-file-single {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+            }
+
+            .k-file-single {
+                align-items: center;
+            }
+
+            .k-file-multiple {
+                align-items: flex-start;
+            }
+
+            .k-file {
+                padding-inline: var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} );
+                padding-block: var( --kendo-upload-item-padding-y, #{$kendo-upload-item-padding-y} ) calc( var( --kendo-upload-item-padding-y, #{$kendo-upload-item-padding-y} ) + var( --kendo-upload-progress-thickness, #{$kendo-upload-progress-thickness} ) );
+                border-width: 0 0 1px;
+                border-style: solid;
+                outline: none;
+                display: flex;
+                align-items: flex-start;
+                position: relative;
+            }
+            .k-file:last-child {
+                border-width: 0;
+            }
+
+            .k-filename {
+                margin-inline-start: var( --kendo-padding-x, #{$kendo-padding-x} );
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                position: relative;
+            }
+
+            .k-upload-status {
+                .k-icon {
+                    vertical-align: middle;
+                }
+            }
+
+            .k-upload-pct {
+                margin-inline: var( --kendo-upload-icon-spacing, #{$kendo-upload-icon-spacing} );
+                font-weight: normal;
+                vertical-align: middle;
+            }
+
+            ~ .k-clear-selected,
+            ~ .k-upload-selected {
+                margin-block-start: - var( --kendo-padding-y, #{$kendo-padding-y} );
+                border-width: 0;
+            }
+
+            ~ .k-upload-selected {
+                border-inline-start: 1px;
+                border-left-style: solid;
+                margin-inline-start: -1px;
+            }
+
+            .k-file-name,
+            .k-file-size,
+            .k-file-validation-message,
+            .k-file-information {
+                display: block;
+            }
+
+            .k-file-name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                position: relative;
+            }
+
+            .k-file-size,
+            .k-file-information,
+            .k-file-validation-message {
+                font-size: var( --kendo-upload-validation-font-size, #{$kendo-upload-validation-font-size} );
+            }
+
+            .k-file-state {
+                visibility: hidden;
+            }
+
+            .k-file-group-wrapper,
+            .k-file-invalid-group-wrapper,
+            .k-multiple-files-group-wrapper,
+            .k-multiple-files-invalid-group-wrapper {
+
+                .k-file-group {
+                    font-size: var( --kendo-upload-group-icon-size, #{$kendo-upload-group-icon-size} );
+                }
+
+                .k-file-state {
+                    position: absolute;
+                }
+            }
+        }
+
+        .k-upload-files .k-file-name-size-wrapper {
+            margin-inline-start: 0;
+            margin-inline-end: 0;
+            min-height: var( --kendo-upload-group-icon-size, #{$kendo-upload-group-icon-size} );
+            display: block;
+            overflow: hidden;
+            flex: 1 0 0;
+        }
+
+        .k-multiple-files-wrapper,
+        .k-file-single > .k-file-name-size-wrapper,
+        .k-file > .k-file-name-size-wrapper {
+            margin-inline-start: var( --kendo-padding-x, #{$kendo-padding-x} );
+            margin-inline-end: 0;
+            min-height: var( --kendo-upload-group-icon-size, #{$kendo-upload-group-icon-size} );
+            display: block;
+            overflow: hidden;
+            flex: 1 0 0;
+        }
+
+        .k-multiple-files-wrapper {
+            .k-file-name-size-wrapper {
+                margin-block-end: var( --kendo-upload-multiple-items-spacing, #{$kendo-upload-multiple-items-spacing} );
+                display: block;
+            }
+
+            .k-file-information {
+                margin-block-start: calc( -1 * var( --kendo-upload-multiple-items-spacing, #{$kendo-upload-multiple-items-spacing} ) / 3);
+            }
+        }
+
+        .k-progressbar {
+            height: var( --kendo-upload-progress-thickness, #{$kendo-upload-progress-thickness} );
+            position: absolute;
+            bottom: calc( var( --kendo-upload-item-padding-y, #{$kendo-upload-item-padding-y} ) / 2 );
+            // successed
+            width: calc(100% - var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} ) * 2);
+
+            .k-progress {
+                position: absolute;
+                width: 100%;
+                max-width: 100%;
+                height: 100%;
+            }
+        }
+
+        // Action buttons
+        .k-actions {
+            border-top-width: 1px;
+        }
+
+        // RTL styles
+        &[dir = "rtl"],
+        .k-rtl & {
+            .k-dropzone {
+                text-align: left;
+            }
+        }
+    }
+
+    .k-upload-button {
+        position: relative;
+        overflow: hidden;
+        direction: ltr;
+
+        input {
+            // font should not depend on outside styles, otherwise upload may break
+            font: 170px monospace !important; // sass-lint:disable-block no-important
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            z-index: 2;
+        }
+
+        input[disabled],
+        input.k-disabled {
+            visibility: hidden;
+        }
+    }
+}

package/scss/upload/_theme.scss

@@ -0,0 +1,111 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-upload--theme() {
+    .k-upload {
+        @include fill(
+            var( --kendo-upload-text, #{$kendo-upload-text} ),
+            var( --kendo-upload-bg, #{$kendo-upload-bg} ),
+            var( --kendo-upload-border, #{$kendo-upload-border} )
+        );
+
+        .k-dropzone {
+            @include fill(
+                var( --kendo-upload-dropzone-text, #{$kendo-upload-dropzone-text} ),
+                var( --kendo-upload-dropzone-bg, #{$kendo-upload-dropzone-bg} ),
+                var( --kendo-upload-dropzone-border, #{$kendo-upload-dropzone-border} )
+            );
+
+            &:hover,
+            &.k-hover,
+            &.k-dropzone-hover,
+            &.k-dropzone-hovered {
+                background-color: var( --kendo-upload-dropzone-hover-bg, #{$kendo-upload-dropzone-hover-bg} );
+            }
+
+            .k-dropzone-hint {
+                color: var( --kendo-upload-status-text, #{$kendo-upload-status-text} );
+                opacity: var( --kendo-upload-status-text-opacity, #{$kendo-upload-status-text-opacity} );
+            }
+
+        }
+
+        .k-upload-files,
+        .k-file {
+            border-color: var( --kendo-upload-border, #{$kendo-upload-border} );
+        }
+
+        .k-file {
+
+            &.k-focus {
+                box-shadow: var( --kendo-upload-focused-shadow, #{$kendo-upload-focused-shadow} );
+            }
+
+            .k-upload-action.k-focus {
+                box-shadow: var( --kendo-upload-focused-shadow, #{$kendo-upload-focused-shadow} );
+            }
+
+        }
+
+        .k-dropzone .k-upload-status {
+            color: var( --kendo-upload-status-text, #{$kendo-upload-status-text} );
+            opacity: var( --kendo-upload-status-text-opacity, #{$kendo-upload-status-text-opacity} );
+        }
+
+        // Upload status: uploading
+        .k-file-progress {
+
+            .k-file-name {
+                color: var( --kendo-upload-progress-text, #{$kendo-upload-progress-text} );
+            }
+            .k-progress {
+                background-color: var( --kendo-upload-progress-bg, #{$kendo-upload-progress-bg} );
+            }
+        }
+
+
+        // Upload status: success
+        .k-file-success {
+            .k-progress {
+                background-color: var( --kendo-upload-success-bg, #{$kendo-upload-success-bg} );
+            }
+        }
+
+        // Upload satus: error
+        .k-file-error,
+        .k-file-invalid {
+            .k-file-validation-message {
+                color: var( --kendo-upload-error-text, #{$kendo-upload-error-text} );
+            }
+            .k-progress {
+                background-color: var( --kendo-upload-error-bg, #{$kendo-upload-error-bg} );
+            }
+        }
+
+        .k-file-group-wrapper,
+        .k-multiple-files-group-wrapper,
+        .k-file-invalid-group-wrapper,
+        .k-multiple-files-invalid-group-wrapper {
+            color: var( --kendo-upload-icon-color, #{$kendo-upload-icon-color} );
+            border-color: var( --kendo-upload-icon-color, #{$kendo-upload-icon-color} );
+        }
+
+        .k-file-size,
+        .k-file-validation-message,
+        .k-file-information {
+            color: var( --kendo-subtle-text, inherit);
+        }
+
+        .k-multiple-files-wrapper .k-file-information {
+            color: var( --kendo-upload-text, #{$kendo-upload-text} );
+        }
+
+        // Invalid,
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            border-color: var( --kendo-invalid-border, inherit);
+        }
+    }
+}