@progress/kendo-theme-fluent 8.1.0-dev.0 → 8.1.0-dev.2

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.1.0-dev.0",
+    "version": "8.1.0-dev.2",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "8.1.0-dev.0",
+  "version": "8.1.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "3.0.0",
-    "@progress/kendo-theme-core": "8.1.0-dev.0",
-    "@progress/kendo-theme-utils": "8.1.0-dev.0"
+    "@progress/kendo-theme-core": "8.1.0-dev.2",
+    "@progress/kendo-theme-utils": "8.1.0-dev.2"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "01a2703fa5fcec5b7ae58bd890d66f055cb105c0"
+  "gitHead": "a8611dd8fc7fb5f348432f88bbb672c6f0049fa4"
 }

package/scss/bottom-navigation/_variables.scss

@@ -21,7 +21,7 @@ $kendo-bottom-nav-font-family: var( --kendo-font-family, inherit) !default;
 $kendo-bottom-nav-font-size: var( --kendo-font-size, 1rem ) !default;
 /// The line height of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-bottom-nav-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The letter spacing of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;

package/scss/button/_theme.scss

@@ -153,4 +153,10 @@
         }
     }
 
+    .k-button-group:disabled,
+    .k-button-group.k-disabled,
+    .k-button-group[disabled] {
+        background-color: inherit;
+    }
+
 }

package/scss/chat/_layout.scss

@@ -117,8 +117,8 @@
         // Message meta
         .k-message-time,
         .k-message-status {
-            font-size: smaller;
-            line-height: normal;
+            font-size: $kendo-chat-message-meta-font-size;
+            line-height: $kendo-chat-message-meta-line-height;
             white-space: nowrap;
             pointer-events: none;
             position: absolute;
@@ -200,8 +200,8 @@
     // Author
     .k-author {
         margin: 0;
-        font-size: smaller;
-        line-height: normal;
+        font-size: $kendo-chat-author-font-size;
+        line-height: $kendo-chat-author-line-height;
     }
     .k-chat .k-author {
         margin: 0; // Duplicate styles because of typography module

package/scss/chat/_variables.scss

@@ -64,10 +64,10 @@ $kendo-chat-message-list-spacing: $kendo-chat-item-spacing-y !default;
 
 /// The font size of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-font-size: smaller !default;
+$kendo-chat-timestamp-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The text transform of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-transform: uppercase !default;
@@ -78,6 +78,20 @@ $kendo-chat-timestamp-text: var( --kendo-subtle-text, inherit ) !default;
 /// @group chat
 $kendo-chat-timestamp-bg: normal !default;
 
+/// The font size of the Chat message meta text.
+/// @group chat
+$kendo-chat-message-meta-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the Chat message meta text.
+/// @group chat
+$kendo-chat-message-meta-line-height: var( --kendo-line-height-lg, normal ) !default;
+
+/// The font size of the Chat author text.
+/// @group chat
+$kendo-chat-author-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the Chat author text.
+/// @group chat
+$kendo-chat-author-line-height: var( --kendo-line-height-lg, normal ) !default;
+
 /// The horizontal padding of the Chat bubble message.
 /// @group chat
 $kendo-chat-bubble-padding-x: k-spacing(3) !default;

package/scss/core/_index.scss

@@ -51,8 +51,9 @@
     $kendo-disabled-bg: $kendo-disabled-bg !default,
     $kendo-disabled-text: $kendo-disabled-text !default,
     $kendo-disabled-border: $kendo-disabled-border !default,
-    $kendo-loading-bg: $kendo-loading-bg !default,
-    $kendo-loading-text: $kendo-loading-text !default,
+    $kendo-disabled-opacity: $kendo-disabled-opacity !default,
+    $kendo-disabled-filter: $kendo-disabled-filter !default,
+    $kendo-disabled-styling: $kendo-disabled-styling !default,
     // Elevation
     $_default-elevation: $kendo-elevation,
     $kendo-elevation: $kendo-elevation !default,
@@ -68,9 +69,6 @@
 
 @forward "./color-system/swatch-legacy";
 
-// Helpers
-@use "./helpers";
-
 // Module System
 @use "./module-system/" as module;
 

package/scss/core/color-system/_swatch-legacy.scss

@@ -26,8 +26,6 @@
     core.$kendo-disabled-bg: core.k-color( base-subtle );
     core.$kendo-disabled-text: color-mix(in srgb, core.k-color( on-app-surface ) 46%, transparent);
     core.$kendo-disabled-border: transparent;
-    core.$kendo-loading-bg: core.$kendo-component-bg;
-    core.$kendo-loading-text: currentColor;
 
     core.$kendo-theme-colors: (
         primary: (
@@ -56,6 +54,14 @@
             border: core.k-color( error-subtle ),
         ),
     );
+
+    core.$kendo-disabled-styling: (
+        bg: core.$kendo-disabled-bg,
+        color: core.$kendo-disabled-text,
+        border: core.$kendo-disabled-border,
+        opacity: core.$kendo-disabled-opacity,
+        filter: core.$kendo-disabled-filter,
+    );
 }
 
 :root {
@@ -72,6 +78,8 @@
     --kendo-disabled-bg: #{core.$kendo-disabled-bg};
     --kendo-disabled-text: #{core.$kendo-disabled-text};
     --kendo-disabled-border: #{core.$kendo-disabled-border};
+    --kendo-disabled-opacity: #{core.$kendo-disabled-opacity};
+    --kendo-disabled-filter: #{core.$kendo-disabled-filter};
 
     --kendo-hover-bg: #{core.$kendo-hover-bg};
     --kendo-hover-text: #{core.$kendo-hover-text};

package/scss/core/color-system/_swatch.scss

@@ -475,10 +475,16 @@ $kendo-valid-shadow: null !default;
 $kendo-disabled-bg: functions.k-get-theme-color-var(neutral-20) !default;
 $kendo-disabled-text: functions.k-get-theme-color-var(neutral-90) !default;
 $kendo-disabled-border: transparent !default;
+$kendo-disabled-opacity: null !default;
+$kendo-disabled-filter: null !default;
 
-// Loading
-$kendo-loading-bg: $kendo-component-bg !default;
-$kendo-loading-text: currentColor !default;
+$kendo-disabled-styling: (
+    bg: $kendo-disabled-bg,
+    color: $kendo-disabled-text,
+    border: $kendo-disabled-border,
+    opacity: $kendo-disabled-opacity,
+    filter: $kendo-disabled-filter,
+) !default;
 
 $kendo-theme-colors: (
     primary: (

package/scss/core/module-system/_components.scss

@@ -24,10 +24,10 @@ $components: (
     "badge",
     "color-preview",
     "loader",
-    "loading",
     "color-preview",
     "skeleton",
     "tooltip",
+    "time-marker",
 
     // Native forms
     "button",
@@ -105,6 +105,7 @@ $components: (
     // Layout & containers
     "card",
     "expansion-panel",
+    "panel",
     "panelbar",
     "splitter",
     "tilelayout",

package/scss/daterangepicker/_theme.scss

@@ -8,7 +8,7 @@
         &:disabled,
         &[disabled],
         &.k-disabled {
-            @include disabled-color(
+            @include disabled(
                 $color: var( --kendo-daterange-picker-disabled-text, var( --kendo-disabled-text, inherit ) ),
                 $bg: var( --kendo-daterange-picker-disabled-bg, transparent ),
                 $border: var( --kendo-daterange-picker-disabled-border, currentColor )

package/scss/fab/_theme.scss

@@ -185,7 +185,7 @@
         &.k-disabled .k-fab-item-icon,
         &:disabled .k-fab-item-text,
         &.k-disabled .k-fab-item-text {
-            @include disabled-color(
+            @include disabled(
                 var( --kendo-disabled-text, inherit ),
                 var( --kendo-disabled-bg, inherit ),
                 var( --kendo-disabled-border, inherit )

package/scss/forms/_theme.scss

@@ -41,4 +41,10 @@
         @include fill( $color: var( --kendo-form-hint-text, #{$kendo-form-hint-text} ) );
     }
 
+    .k-form-field:disabled,
+    .k-form-field.k-disabled,
+    .k-form-field[disabled] {
+        background-color: inherit;
+    }
+
 }

package/scss/gantt/index.scss

@@ -12,7 +12,8 @@ $_kendo-module-meta: (
         "splitter",
         "treelist",
         "grid",
-        "toolbar"
+        "toolbar",
+        "time-marker"
     )
 );
 

package/scss/grid/_theme.scss

@@ -541,7 +541,7 @@
 
             &.k-disabled .k-link,
             &.k-disabled .k-icon {
-                @include disabled-color(
+                @include disabled(
                     var( --kendo-disabled-text, inherit )
                 );
             }
@@ -561,7 +561,7 @@
 
         .k-listgroup-item {
             &.k-disabled {
-                @include disabled-color(
+                @include disabled(
                     $bg: var( --kendo-disabled-bg, inherit )
                 );
             }

package/scss/index.scss

@@ -56,6 +56,7 @@
 @forward "./loader";
 @forward "./skeleton";
 @forward "./tooltip";
+@forward "./time-marker";
 
 
 // Form helpers
@@ -115,6 +116,7 @@
 // Layout & containers
 @forward "./card";
 @forward "./expansion-panel";
+@forward "./panel";
 @forward "./panelbar";
 @forward "./splitter";
 @forward "./tilelayout";
@@ -193,6 +195,7 @@
 @use "./loader" as *;
 @use "./skeleton" as *;
 @use "./tooltip" as *;
+@use "./time-marker" as *;
 
 
 // Form helpers
@@ -277,6 +280,7 @@
 // Layout & containers
 @use "./card" as *;
 @use "./expansion-panel" as *;
+@use "./panel" as *;
 @use "./panelbar" as *;
 @use "./splitter" as *;
 @use "./tilelayout" as *;
@@ -379,6 +383,7 @@
     @include loader-styles();
     @include skeleton-styles();
     @include tooltip-styles();
+    @include time-marker-styles();
 
 
     // Form helpers
@@ -463,6 +468,7 @@
     // Layout & containers
     @include card-styles();
     @include expansion-panel-styles();
+    @include panel-styles();
     @include panelbar-styles();
     @include splitter-styles();
     @include tilelayout-styles();

package/scss/loader/_layout.scss

@@ -457,3 +457,133 @@
     }
 
 }
+
+@mixin kendo-loading--layout() {
+
+    // Loading mask
+    .k-loading-mask,
+    .k-loading-image,
+    .k-loading-color {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-loading-mask {
+        z-index: var( --kendo-zindex-loading, #{$kendo-zindex-loading} );
+
+        &.k-opaque {
+            .k-loading-color {
+                opacity: 1;
+            }
+        }
+    }
+    .k-loading-text {
+        text-indent: -4000px;
+        text-align: center;
+        position: absolute;
+        color: var( --kendo-loading-text, #{$kendo-loading-text} );
+    }
+    .k-loading-image {
+        z-index: 2;
+        color: var( --kendo-loading-text, #{$kendo-loading-text} );
+    }
+    .k-loading-color {
+        background-color: var( --kendo-loading-bg, #{$kendo-loading-bg} );
+        opacity: var( --kendo-loading-opacity, #{$kendo-loading-opacity} );
+    }
+
+    // Loading indicator
+    .k-i-loading {
+        width: 1em;
+        height: 1em;
+        line-height: 1;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        position: relative;
+        background-color: transparent;
+        box-sizing: border-box;
+        color: var( --kendo-loading-text, #{$kendo-loading-text} );
+
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-i-loading::before,
+    .k-i-loading::after,
+    .k-loading-image::before,
+    .k-loading-image::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: inline-block;
+        content: "";
+        box-sizing: inherit;
+        border-radius: 50%;
+        border-width: .05em;
+        border-style: solid;
+        border-color: currentColor;
+        border-top-color: transparent;
+        border-bottom-color: transparent;
+        background-color: transparent;
+    }
+
+    .k-icon.k-i-loading::before,
+    .k-icon.k-i-loading::after {
+        content: "";
+    }
+
+    .k-i-loading::before,
+    .k-loading-image::before {
+        margin-top: -.5em;
+        margin-left: -.5em;
+        width: 1em;
+        height: 1em;
+        animation: k-loading-animation .7s linear infinite;
+    }
+
+    .k-i-loading::after,
+    .k-loading-image::after {
+        margin-top: -.25em;
+        margin-left: -.25em;
+        width: .5em;
+        height: .5em;
+        animation: k-loading-animation reverse 1.4s linear infinite;
+    }
+
+    .k-loading-image::before,
+    .k-loading-image::after {
+        content: "";
+        // See https://github.com/telerik/kendo-themes/issues/1925
+        border-width: 1px; // TODO: Remove once we drop IE support
+        border-width: clamp( .015em, 1px, 1px );
+        font-size: 4em;
+    }
+
+    // Loading animation
+    @keyframes k-loading-animation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+}

package/scss/loader/_variables.scss

@@ -187,3 +187,17 @@ $kendo-loader-theme-colors: () !default;
         k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }
+
+// Loading indicator
+/// The background color of the Loading indicator.
+/// @group loading
+$kendo-loading-bg: var( --kendo-component-bg, initial ) !default;
+/// The text color of the Loading indicator.
+/// @group loading
+$kendo-loading-text: currentColor !default;
+/// The opacity of the Loading indicator.
+/// @group loading
+$kendo-loading-opacity: .3 !default;
+/// The z-index of the Loading indicator.
+/// @group loading
+$kendo-zindex-loading: 100 !default;

package/scss/loader/index.scss

@@ -20,6 +20,7 @@ $_kendo-module-meta: (
 @mixin loader-styles() {
     @include module.render( "loader" ) {
         @include kendo-loader--layout();
+        @include kendo-loading--layout();
         @include kendo-loader--theme();
     }
 }

package/scss/panel/_layout.scss

@@ -0,0 +1,29 @@
+@use "../core/" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-panel--layout() {
+    // Panels
+    .k-block,
+    .k-panel {
+        @include border-radius( $kendo-panel-border-radius );
+        padding: 0;
+        border-width: $kendo-panel-border-width;
+        border-style: $kendo-panel-border-style;
+        box-sizing: border-box;
+
+        > .k-header {
+            @include border-top-radius( $kendo-panel-border-radius );
+            @include fill(
+                var( --kendo-component-text, #{$kendo-component-text} ),
+                var( --kendo-component-bg, #{$kendo-component-bg} ),
+                var( --kendo-component-border, #{$kendo-component-border} )
+            );
+            padding-inline: $kendo-panel-header-padding-inline;
+            padding-block: $kendo-panel-header-padding-block;
+        }
+        > .k-content {
+            padding-inline: $kendo-panel-content-padding-inline;
+            padding-block: $kendo-panel-content-padding-block;
+        }
+    }
+}

package/scss/panel/_theme.scss

@@ -0,0 +1,22 @@
+@use "../core/" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-panel--theme() {
+    // Panels
+    .k-block,
+    .k-panel {
+        @include fill(
+            var( --kendo-panel-text, #{$kendo-panel-text} ),
+            var( --kendo-panel-bg, #{$kendo-panel-bg} ),
+            var( --kendo-panel-border, #{$kendo-panel-border} )
+        );
+    }
+
+    :where(.k-content) {
+        @include fill(
+            var( --kendo-panel-text, #{$kendo-panel-text} ),
+            var( --kendo-panel-bg, #{$kendo-panel-bg} ),
+            var( --kendo-panel-border, #{$kendo-panel-border} )
+        );
+    }
+}

package/scss/panel/_variables.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+@use "../core/" as *;
+
+/// The border radius of the Panel.
+/// @group panel
+$kendo-panel-border-radius: k-border-radius(md);
+/// The width of the border around the Panel.
+/// @group panel
+$kendo-panel-border-width: 1px;
+/// The style of the border around the Panel.
+/// @group panel
+$kendo-panel-border-style: solid;
+
+/// The inline padding of the Panel header.
+/// @group panel
+$kendo-panel-header-padding-inline: k-spacing(2);
+/// The block padding of the Panel header.
+/// @group panel
+$kendo-panel-header-padding-block: k-spacing(1);
+
+/// The inline padding of the Panel content.
+/// @group panel
+$kendo-panel-content-padding-inline: k-spacing(2);
+/// The block padding of the Panel content.
+/// @group panel
+$kendo-panel-content-padding-block: k-spacing(1);
+
+/// The text color of the Panel.
+/// @group panel
+$kendo-panel-text: var(--kendo-component-text, #{$kendo-component-text});
+/// The background color of the Panel.
+/// @group panel
+$kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg});
+/// The color of the border around the Panel.
+/// @group panel
+$kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border});

package/scss/panel/index.scss

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

package/scss/popup/_layout.scss

@@ -3,6 +3,31 @@
 
 @mixin kendo-popup--layout() {
 
+    // Animation Container
+    .k-animation-container {
+        position: absolute;
+        overflow: hidden;
+        z-index: 100;
+
+        &-fixed {
+            position: fixed;
+        }
+
+        &-relative {
+            position: relative;
+            display: inline-block;
+        }
+    }
+
+    .k-animation-container {
+        @include border-bottom-radius-only( var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} ) );
+    }
+
+    .k-animation-container-shown {
+        overflow: visible;
+    }
+
+    // Popup
     .k-popup {
         margin: 0;
         padding-inline: var( --kendo-popup-padding-x, #{$kendo-popup-padding-x} );
@@ -22,14 +47,6 @@
         }
     }
 
-    .k-animation-container {
-      @include border-bottom-radius-only( var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} ) );
-    }
-
-    .k-animation-container-shown {
-        overflow: visible;
-    }
-
     .k-popup > .k-colorpalette {
         padding-inline: var( --kendo-popup-content-padding-x, #{$kendo-popup-content-padding-x} );
         padding-block: var( --kendo-popup-content-padding-y, #{$kendo-popup-content-padding-y} );

package/scss/rating/_theme.scss

@@ -36,7 +36,7 @@
         }
 
         &.k-disabled {
-            @include disabled-color(
+            @include disabled(
                 var( --kendo-disabled-text, inherit ),
                 inherit,
                 var( --kendo-disabled-border, inherit )

package/scss/scheduler/index.scss

@@ -11,7 +11,8 @@ $_kendo-module-meta: (
         "dialog",
         "tooltip",
         "calendar",
-        "toolbar"
+        "toolbar",
+        "time-marker"
     )
 );