@progress/kendo-theme-fluent 6.8.0-dev.1 → 7.0.0-dev.0

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.8.0-dev.1",
+    "version": "7.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.8.0-dev.1",
+    "version": "7.0.0-dev.0",
     "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": "6.8.0-dev.1",
+  "version": "7.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,8 +52,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.9.0",
-    "@progress/kendo-theme-core": "6.8.0-dev.1",
-    "@progress/kendo-theme-utils": "6.8.0-dev.1"
+    "@progress/kendo-theme-core": "7.0.0-dev.0",
+    "@progress/kendo-theme-utils": "7.0.0-dev.0"
   },
-  "gitHead": "8b90f3aef2d8742d9fea94474dabb38bd7553c1d"
+  "gitHead": "228be168555ed9f71c328cefd10924e3fd037023"
 }

package/scss/action-sheet/_variables.scss

@@ -48,7 +48,7 @@ $kendo-actionsheet-text: var( --kendo-component-text, initial ) !default;
 $kendo-actionsheet-border: var( --kendo-component-border, initial ) !default;
 /// Box shadow of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-7, none ) !default;
 
 /// Horizontal padding of the action sheet header.
 /// @group action-sheet

package/scss/bottom-navigation/_variables.scss

@@ -60,7 +60,7 @@ $kendo-bottom-nav-item-focus-outline-style: solid !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 
 /// The theme variations for the BottomNavigation.
 /// @group bottom-navigation
@@ -166,4 +166,4 @@ $kendo-bottom-nav-theme-colors: () !default;
         $kendo-bottom-nav-theme-colors,
         k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
     );
-}
+}

package/scss/chat/_variables.scss

@@ -168,7 +168,7 @@ $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
 $kendo-chat-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
 /// The hover shadow of the bubble in the chat.
 /// @group chat
-$kendo-chat-bubble-hover-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-chat-bubble-hover-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The selected shadow of the bubble in the chat.
 /// @group chat
 $kendo-chat-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -187,10 +187,10 @@ $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
 $kendo-chat-alt-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
 /// The hover shadow of the alt bubble in the chat.
 /// @group chat
-$kendo-chat-alt-bubble-hover-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-chat-alt-bubble-hover-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The selected shadow of the alt bubble in the chat.
 /// @group chat
-$kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// The background of quick reply in the chat.
 /// @group chat

package/scss/colorgradient/_layout.scss

@@ -70,6 +70,8 @@
         width: var( --kendo-color-gradient-draghandle-width, #{$kendo-color-gradient-draghandle-width} );
         height: var( --kendo-color-gradient-draghandle-height, #{$kendo-color-gradient-draghandle-height} );
         border-width: var( --kendo-color-gradient-draghandle-border-width, #{$kendo-color-gradient-draghandle-border-width} );
+        outline-width: var( --kendo-color-gradient-draghandle-outline-width, #{$kendo-color-gradient-draghandle-outline-width} );
+        outline-style: solid;
         box-sizing: border-box;
     }
 

package/scss/colorgradient/_theme.scss

@@ -20,9 +20,6 @@
         @include fill(
             $border: var( --kendo-color-gradient-focus-border, #{$kendo-color-gradient-focus-border} )
         );
-        @include box-shadow(
-            var( --kendo-color-gradient-focus-shadow, #{$kendo-color-gradient-focus-shadow} )
-        );
     }
 
     // Canvas
@@ -43,6 +40,7 @@
         @include fill(
             $border: var( --kendo-color-gradient-draghandle-border, #{$kendo-color-gradient-draghandle-border })
         );
+        outline-color: $kendo-color-gradient-draghandle-focus-shadow;
         @include box-shadow(
             var( --kendo-color-gradient-draghandle-shadow, #{$kendo-color-gradient-draghandle-shadow} )
         );
@@ -52,38 +50,13 @@
             @include fill(
                 $border: var( --kendo-color-gradient-draghandle-focus-border, #{$kendo-color-gradient-draghandle-focus-border} )
             );
-            @include box-shadow(
-                var( --kendo-color-gradient-draghandle-focus-shadow, #{$kendo-color-gradient-draghandle-focus-shadow} )
-            );
+            outline-color: $kendo-color-gradient-draghandle-focus-shadow;
         }
 
         &:active,
         &:hover,
         &.k-hover {
-            @include box-shadow(
-                var( --kendo-color-gradient-draghandle-hover-shadow, #{$kendo-color-gradient-draghandle-hover-shadow} )
-            );
-        }
-    }
-
-    .k-colorgradient .k-hsv-draghandle {
-        @include box-shadow(
-            var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
-        );
-
-        &:focus,
-        &.k-focus {
-            @include box-shadow(
-                var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
-            );
-        }
-
-        &:active,
-        &:hover,
-        &.k-hover {
-            @include box-shadow(
-                var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
-            );
+            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
         }
     }
 

package/scss/colorgradient/_variables.scss

@@ -11,7 +11,7 @@ $kendo-color-gradient-spacer: map.get( $kendo-spacing, 4 ) !default;
 $kendo-color-gradient-width: 260px !default;
 /// The width of the border around the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-width: 1px !default;
+$kendo-color-gradient-border-width: 2px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
@@ -71,7 +71,7 @@ $kendo-color-gradient-canvas-rectangle-height: 180px !default;
 $kendo-color-gradient-canvas-rectangle-border: k-get-theme-color-var( neutral-30 ) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13), inset 0px 0px 0px 3px #FFFFFF !default;
+$kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The width of the ColorGradient slider.
 /// @group cologradient
@@ -104,22 +104,28 @@ $kendo-color-gradient-draghandle-width: 20px !default;
 $kendo-color-gradient-draghandle-height: 20px !default;
 /// The width of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-border-width: 1px !default;
+$kendo-color-gradient-draghandle-border-width: 2px !default;
+/// The width of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-outline-width: 1px !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-color-gradient-draghandle-border: $kendo-color-white !default;
+/// The color of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-shadow: k-get-theme-color-var( neutral-110 ) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The color of the border around the focused ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-border: k-get-theme-color-var( neutral-160 ) !default;
-/// The box shadow of the focused ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-focus-border: $kendo-color-white !default;
+/// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-gradient-draghandle-shadow !default;
-/// The box shadow of the hovered ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-focus-shadow: k-get-theme-color-var( neutral-130 ) !default;
+/// The hover color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
+$kendo-color-gradient-draghandle-hover-shadow: k-get-theme-color-var( neutral-130 ) !default;
 
 /// The vertical offset of the ColorGradient canvas drag handle.
 /// @group cologradient
@@ -149,4 +155,4 @@ $kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !def
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group cologradient
-$kendo-color-gradient-contrast-spacing: math.div( $kendo-color-gradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-contrast-spacing: math.div( $kendo-color-gradient-spacer, 1.5 ) !default;

package/scss/core/_index.scss

@@ -1,14 +1,20 @@
 @use "sass:map";
 
 // Palettes
+@forward "./color-system/palettes";
 @use "./color-system/palettes" as *;
 
+// Elevation
+@use "./elevation" as *;
+@forward "./elevation/legacy";
+
 // Variables
-@use "./variables" as *;
 @forward "./variables";
 
-@forward "@progress/kendo-theme-core/scss/index.import.scss" with (
-    $kendo-palettes: $kendo-fluent-palettes
+@forward "@progress/kendo-theme-core/scss/index.import.scss"  with (
+    $kendo-palettes: $kendo-fluent-palettes,
+    $_default-elevation: $kendo-elevation,
+    $kendo-elevation: $kendo-elevation !default,
 );
 
 // Helpers
@@ -21,7 +27,7 @@ $components: null !default;
 
 @mixin core-configure($config: null) {
     @if $config {
-        $_components: map.get( $config, "components" );
+        $_components: map.get($config, "components");
 
         @if ($_components) {
             module.$components: $_components;

package/scss/core/_legacy.scss

@@ -0,0 +1,4 @@
+@use "./index" as *;
+@forward "./elevation" with (
+    $kendo-elevation: $kendo-elevation
+)

package/scss/core/elevation/_index.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+
+$_default-elevation: (
+    1: (
+        0 0.3px 0.9px rgba(0, 0, 0, 0.1),
+        0 1.6px 3.6px rgba(0, 0, 0, 0.13),
+    ),
+    2: (
+        0 0.6px 1.8px rgba(0, 0, 0, 0.1),
+        0 3.2px 7.2px rgba(0, 0, 0, 0.13),
+    ),
+    3: (
+        0 0.9px 2.7px rgba(0, 0, 0, 0.1),
+        0 4.8px 10.8px rgba(0, 0, 0, 0.13),
+    ),
+    4: (
+        0 1.2px 3.6px rgba(0, 0, 0, 0.1),
+        0 6.4px 14.4px rgba(0, 0, 0, 0.13),
+    ),
+    5: (
+        0 1.8px 5.4px rgba(0, 0, 0, 0.1),
+        0 9.6px 21.6px rgba(0, 0, 0, 0.13),
+    ),
+    6: (
+        0 2.4px 7.2px rgba(0, 0, 0, 0.18),
+        0 12.8px 28.8px rgba(0, 0, 0, 0.22),
+    ),
+    7: (
+        0 3.2px 10.8px rgba(0, 0, 0, 0.18),
+        0 19.2px 43.2px rgba(0, 0, 0, 0.22),
+    ),
+    8: (
+        0 4.8px 14.4px rgba(0, 0, 0, 0.18),
+        0 25.6px 57.6px rgba(0, 0, 0, 0.22),
+    ),
+    9: (
+        0 6.4px 18px rgba(0, 0, 0, 0.18),
+        0 32px 72px rgba(0, 0, 0, 0.22),
+    ),
+);
+
+/// Global Elevation.
+/// @group elevation
+$kendo-elevation: $_default-elevation !default;

package/scss/core/elevation/_legacy.scss

@@ -0,0 +1,48 @@
+@use "sass:map";
+@use "./index" as *;
+
+/// Shadow for cards and grid item thumbnails.
+/// Equivalent to fluent depth 4.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-1: var( --kendo-elevation-1, none ) !default;
+/// Shadow for color gradient drag handle.
+/// Equivalent to fluent depth 8.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-2: var( --kendo-elevation-2, none ) !default;
+/// Shadow for focus card.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-3: var( --kendo-elevation-3, none ) !default;
+/// Shadow for panels.
+/// Equivalent to fluent depth 16.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-4: var( --kendo-elevation-4, none ) !default;
+/// Shadow for floating action button.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-5: var( --kendo-elevation-5, none ) !default;
+/// Shadow for pop up.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-6: var( --kendo-elevation-6, none ) !default;
+/// Shadow for action sheet.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-7: var( --kendo-elevation-7, none ) !default;
+/// Shadow for dialogs and window.
+/// Equivalent to fluent depth 64.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-8: var( --kendo-elevation-8, none ) !default;
+/// Shadow for focus window.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-9: var( --kendo-elevation-8, none ) !default;
+
+@mixin elevation--styles-legacy() {
+    :root {
+        --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
+        --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
+        --kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
+        --kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};
+        --kendo-box-shadow-depth-5: #{$kendo-box-shadow-depth-5};
+        --kendo-box-shadow-depth-6: #{$kendo-box-shadow-depth-6};
+        --kendo-box-shadow-depth-7: #{$kendo-box-shadow-depth-7};
+        --kendo-box-shadow-depth-8: #{$kendo-box-shadow-depth-8};
+        --kendo-box-shadow-depth-9: #{$kendo-box-shadow-depth-9};
+    }
+}

package/scss/core/helpers/_index.scss

@@ -1,6 +1,7 @@
 @use "./asp-fallback";
 @use "./animations";
 @use "./extra";
+@use "./indicators";
 @use "./reset";
 @use "./normalize";
 @use "./resizing";

package/scss/core/helpers/_indicators.scss

@@ -0,0 +1,35 @@
+$kendo-current-time-width: 1px !default;
+$kendo-current-time-color: #ff0000 !default;
+
+// Layout
+.k-current-time {
+    width: var( --kendo-current-time-width, #{$kendo-current-time-width} );
+    position: absolute;
+
+    &.k-current-time-arrow-left,
+    &.k-current-time-arrow-right,
+    &.k-current-time-arrow-down {
+        width: 0;
+        height: 0;
+        background: transparent;
+        border: 4px solid transparent;
+    }
+}
+
+
+// Theme
+.k-current-time {
+    background: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+
+    &.k-current-time-arrow-left {
+        border-right-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+    }
+
+    &.k-current-time-arrow-right {
+        border-left-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+    }
+
+    &.k-current-time-arrow-down {
+        border-top-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+    }
+}

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

@@ -108,6 +108,7 @@ $components: (
     "panelbar",
     "splitter",
     "tilelayout",
+    "dock-manager",
 
     // Data management
     "grid",

package/scss/dataviz/_variables.scss

@@ -218,7 +218,7 @@ $kendo-selection-border-color: var( --kendo-component-border, initial ) !default
 $kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font-size of the treemap.
 /// @group charts
-$kendo-treemap-font-size: var( -kendo-font-size, inherit ) !default;
+$kendo-treemap-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line-height of the treemap.
 /// @group charts
 $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;

package/scss/dialog/_variables.scss

@@ -50,7 +50,7 @@ $kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $kendo-a
 
 /// The box shadow around the Dialog.
 /// @group dialog
-$kendo-dialog-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-dialog-shadow: var( --kendo-box-shadow-depth-8, none ) !default;
 
 /// The theme variations for the Dialog.
 $kendo-dialog-brand-colors: (

package/scss/dock-manager/_index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "dock-manager",
+    dependencies: (
+        "splitter",
+        "toolbar",
+        "tabstrip"
+    )
+);
+
+
+// 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 dock-manager-styles() {
+    @include module.render( "dock-manager" ) {
+        @include kendo-dock-manager--layout();
+        @include kendo-dock-manager--theme();
+        @include kendo-dock-indicator--layout();
+        @include kendo-dock-indicator--theme();
+    }
+}