@progress/kendo-theme-fluent 7.0.3-dev.3 → 7.1.0-dev.1

package/dist/meta/sassdoc-raw-data.json

@@ -42224,15 +42224,15 @@
         }
     },
     {
-        "description": "The vertical padding of the Notification container.\n",
+        "description": "The row-gap between the elements in the Notification group.\n",
         "commentRange": {
             "start": 4,
             "end": 5
         },
         "context": {
             "type": "variable",
-            "name": "kendo-notification-container-padding-y",
-            "value": "$kendo-padding-sm-y",
+            "name": "kendo-notification-group-gap",
+            "value": "map.get( $kendo-spacing, 2 )",
             "scope": "default",
             "line": {
                 "start": 6,
@@ -69097,7 +69097,7 @@
         }
     },
     {
-        "description": "The radius of the border around the tooltip\n",
+        "description": "The border radius of the Tooltip.\n",
         "commentRange": {
             "start": 4,
             "end": 5
@@ -69122,7 +69122,7 @@
         }
     },
     {
-        "description": "The horizontal padding of the tooltip\n",
+        "description": "The horizontal padding of the Tooltip.\n",
         "commentRange": {
             "start": 7,
             "end": 8
@@ -69147,7 +69147,7 @@
         }
     },
     {
-        "description": "The vertical padding of the tooltip\n",
+        "description": "The vertical padding of the Tooltip.\n",
         "commentRange": {
             "start": 10,
             "end": 11
@@ -69172,7 +69172,7 @@
         }
     },
     {
-        "description": "The width of the border around the tooltip\n",
+        "description": "The width of the border around the Tooltip.\n",
         "commentRange": {
             "start": 13,
             "end": 14
@@ -69197,7 +69197,7 @@
         }
     },
     {
-        "description": "The font family of the tooltip\n",
+        "description": "The font family of the Tooltip.\n",
         "commentRange": {
             "start": 16,
             "end": 17
@@ -69222,7 +69222,7 @@
         }
     },
     {
-        "description": "The font size of the tooltip\n",
+        "description": "The font size of the Tooltip.\n",
         "commentRange": {
             "start": 19,
             "end": 20
@@ -69247,7 +69247,7 @@
         }
     },
     {
-        "description": "The line height of the tooltip\n",
+        "description": "The line height of the Tooltip.\n",
         "commentRange": {
             "start": 22,
             "end": 23
@@ -69272,7 +69272,7 @@
         }
     },
     {
-        "description": "The font size of the tooltip title\n",
+        "description": "The font size of the Tooltip title.\n",
         "commentRange": {
             "start": 26,
             "end": 27
@@ -69297,7 +69297,7 @@
         }
     },
     {
-        "description": "The line height of the tooltip title\n",
+        "description": "The line height of the Tooltip title.\n",
         "commentRange": {
             "start": 29,
             "end": 30
@@ -69322,7 +69322,7 @@
         }
     },
     {
-        "description": "The margin of the tooltip title\n",
+        "description": "The margin of the Tooltip title.\n",
         "commentRange": {
             "start": 32,
             "end": 33
@@ -69347,7 +69347,7 @@
         }
     },
     {
-        "description": "The size of the tooltip callout\n",
+        "description": "The size of the Tooltip callout.\n",
         "commentRange": {
             "start": 36,
             "end": 37
@@ -69372,7 +69372,7 @@
         }
     },
     {
-        "description": "The background of the tooltip\n",
+        "description": "The default background of the Tooltip.\n",
         "commentRange": {
             "start": 40,
             "end": 41
@@ -69397,7 +69397,7 @@
         }
     },
     {
-        "description": "The text color of the tooltip\n",
+        "description": "The default text color of the Tooltip.\n",
         "commentRange": {
             "start": 43,
             "end": 44
@@ -69422,7 +69422,7 @@
         }
     },
     {
-        "description": "The border color of the tooltip\n",
+        "description": "The default border color of the Tooltip.\n",
         "commentRange": {
             "start": 46,
             "end": 47
@@ -69447,7 +69447,7 @@
         }
     },
     {
-        "description": "The box-shadow of the tooltip\n",
+        "description": "The box-shadow of the Tooltip.\n",
         "commentRange": {
             "start": 49,
             "end": 50
@@ -69472,7 +69472,7 @@
         }
     },
     {
-        "description": "The text color of the tooltip button\n",
+        "description": "The text color of the Tooltip button.\n",
         "commentRange": {
             "start": 53,
             "end": 54
@@ -69496,81 +69496,6 @@
             "name": "_variables.scss"
         }
     },
-    {
-        "description": "The primary background color of the tooltip\n",
-        "commentRange": {
-            "start": 57,
-            "end": 58
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-tooltip-primary-bg",
-            "value": "k-get-theme-color-var( primary-100 )",
-            "scope": "default",
-            "line": {
-                "start": 59,
-                "end": 59
-            }
-        },
-        "group": [
-            "tooltip"
-        ],
-        "access": "public",
-        "file": {
-            "path": "tooltip/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The primary text color of the tooltip\n",
-        "commentRange": {
-            "start": 60,
-            "end": 61
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-tooltip-primary-text",
-            "value": "$kendo-color-white",
-            "scope": "default",
-            "line": {
-                "start": 62,
-                "end": 62
-            }
-        },
-        "group": [
-            "tooltip"
-        ],
-        "access": "public",
-        "file": {
-            "path": "tooltip/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The primary border color of the tooltip\n",
-        "commentRange": {
-            "start": 63,
-            "end": 64
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-tooltip-primary-border",
-            "value": "initial",
-            "scope": "default",
-            "line": {
-                "start": 65,
-                "end": 65
-            }
-        },
-        "group": [
-            "tooltip"
-        ],
-        "access": "public",
-        "file": {
-            "path": "tooltip/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
     {
         "description": "Background color of the treelist footer row.\n",
         "commentRange": {
@@ -71383,17 +71308,17 @@
     {
         "description": "Theme variations for the tooltip.\n",
         "commentRange": {
-            "start": 67,
-            "end": 67
+            "start": 57,
+            "end": 57
         },
         "context": {
             "type": "variable",
             "name": "kendo-tooltip-brand-colors",
-            "value": "(error, warning, success, info )",
+            "value": "(\n    secondary: neutral,\n    tertiary: tertiary,\n    success: success,\n    warning: warning,\n    error: error,\n    info: info\n )",
             "scope": "default",
             "line": {
-                "start": 68,
-                "end": 68
+                "start": 58,
+                "end": 65
             }
         },
         "access": "public",
@@ -71408,8 +71333,8 @@
     {
         "description": "Theme colors map for the tooltip variations.\n",
         "commentRange": {
-            "start": 79,
-            "end": 79
+            "start": 84,
+            "end": 84
         },
         "context": {
             "type": "variable",
@@ -71417,8 +71342,8 @@
             "value": "()",
             "scope": "default",
             "line": {
-                "start": 80,
-                "end": 80
+                "start": 85,
+                "end": 85
             }
         },
         "access": "public",

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "7.0.3-dev.3",
+    "version": "7.1.0-dev.1",
     "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": "7.0.3-dev.3",
+    "version": "7.1.0-dev.1",
     "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": "7.0.3-dev.3",
+  "version": "7.1.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "2.0.0",
-    "@progress/kendo-theme-core": "7.0.3-dev.3",
-    "@progress/kendo-theme-utils": "7.0.3-dev.3"
+    "@progress/kendo-theme-core": "7.1.0-dev.1",
+    "@progress/kendo-theme-utils": "7.1.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "e74bbed63ad73048728387fb5bc5a19e4803a042"
+  "gitHead": "9b5f2911c5d1962fef292ed43c870776a0bf23d9"
 }

package/scss/card/_layout.scss

@@ -36,6 +36,15 @@
         *::after {
             box-sizing: border-box;
         }
+
+        // Card avatar
+        .k-card-avatar,
+        .k-avatar {
+            margin-inline-end: var( --kendo-card-avatar-spacing, #{$kendo-card-avatar-spacing} );
+            width: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
+            height: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
+            flex-basis: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
+        }
     }
     .k-card > .k-card-inner {
         @include border-radius( var( --kendo-card-inner-border-radius, #{$kendo-card-inner-border-radius} ) );
@@ -45,11 +54,9 @@
         position: relative;
     }
 
-
     // Card orientation
-    .k-card-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
-
+    .k-card-horizontal { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-vertical { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
 
     // Card title
     .k-card-title {
@@ -131,30 +138,13 @@
         }
     }
 
-
-    // Card avatar
-    .k-card-avatar,
-    .k-card .k-avatar {
-        margin-inline-end: var( --kendo-card-avatar-spacing, #{$kendo-card-avatar-spacing} );
-        width: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
-        height: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
-        flex-basis: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
-    }
-
-
-    // Card image
-    .k-card-image,
+    // Card media
     .k-card-media {
         border: 0;
         max-width: 100%;
         flex-shrink: 0;
         overflow: hidden;
 
-        > img {
-            border: 0;
-            max-width: 100%;
-        }
-
         .k-card-horizontal & {
             max-width: var( --kendo-card-img-max-width, #{$kendo-card-img-max-width} );
             object-fit: cover;
@@ -172,23 +162,22 @@
         align-self: stretch;
     }
 
-    .k-card-separator.k-separator-vertical,
-    .k-card-horizontal > .k-card-separator {
-        border-left-width: 1px;
-    }
-
     .k-card-separator.k-separator-horizontal,
     .k-card-vertical > .k-card-separator {
         border-top-width: 1px;
     }
 
+    .k-card-separator.k-separator-vertical,
+    .k-card-horizontal > .k-card-separator {
+        border-left-width: 1px;
+    }
+
     .k-card > .k-hr {
         margin: 0;
         flex: 0 0 auto;
         border-color: inherit;
     }
 
-
     // Card actions
     .k-card-actions {
         padding-inline: var( --kendo-card-actions-padding-x, #{$kendo-card-actions-padding-x} );
@@ -203,33 +192,6 @@
         gap: var( --kendo-card-actions-gap, #{$kendo-card-actions-gap} );
     }
 
-
-    // Actions align
-    .k-card-actions-start       { justify-content: flex-start; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-actions-end         { justify-content: flex-end; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-actions-center      { justify-content: center; } // stylelint-disable-line block-opening-brace-space-before
-
-
-    // Actions orientation
-    .k-card-actions-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-actions-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
-
-
-    // Stretched actions
-    .k-card-actions-stretched > * {
-        flex: 1 1 auto;
-    }
-
-
-    // Card action
-    .k-card-action {
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: inline-flex;
-    }
-
-
     // List
     .k-card-list {
         display: flex;

package/scss/colorgradient/_layout.scss

@@ -119,7 +119,6 @@
             z-index: auto;
         }
 
-        .k-slider-wrap,
         .k-slider-track-wrap {
             z-index: 1;
         }

package/scss/grid/_layout.scss

@@ -1002,6 +1002,7 @@
         $_selection-aggregates-padding-x: map.get( $size-props, selection-aggregates-padding-x );
         $_selection-aggregates-padding-y: map.get( $size-props, selection-aggregates-padding-y );
 
+        .k-grid .k-grid-#{$size},
         .k-grid-#{$size} {
             --INTERNAL--kendo-grid-header-padding-x: var( --kendo-grid-header-padding-x-#{$size}, #{$_header-padding-x} );
             --INTERNAL--kendo-grid-header-padding-y: var( --kendo-grid-header-padding-y-#{$size}, #{$_header-padding-y} );

package/scss/notification/_layout.scss

@@ -10,17 +10,12 @@
         flex-flow: column-reverse wrap;
         position: fixed;
         z-index: 1000;
+        gap: var( --kendo-notificaiton-group-gap, #{$kendo-notification-group-gap} ) 0;
     }
 
-    .k-notification-container {
-        margin-block: var( --kendo-notification-container-padding-y, #{$kendo-notification-container-padding-y} );
-        margin-inline: 0;
-        display: inline-flex;
-        vertical-align: top;
-
-        &-animating {
-            overflow: hidden;
-        }
+    // Needed due to the specifics in the implementation of animations in Angular
+    .k-notification-container-animating {
+        overflow: hidden;
     }
 
     .k-notification {

package/scss/notification/_variables.scss

@@ -1,9 +1,9 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// The vertical padding of the Notification container.
+/// The row-gap between the elements in the Notification group.
 /// @group notification
-$kendo-notification-container-padding-y: $kendo-padding-sm-y !default;
+$kendo-notification-group-gap: map.get( $kendo-spacing, 2 ) !default;
 
 /// The horizontal padding of the Notification.
 /// @group notification

package/scss/popup/_layout.scss

@@ -39,6 +39,7 @@
     .k-popup.k-popup-transparent {
         border-width: 0;
         background-color: transparent;
+        box-shadow: none;
     }
 
     // Flush popup

package/scss/slider/_layout.scss

@@ -48,19 +48,6 @@
         }
     }
 
-
-    // Slider wrap
-    .k-slider-wrap {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-flow: inherit;
-        align-items: inherit;
-        gap: inherit;
-        position: relative;
-    }
-
-
     // Slider button
     .k-slider-button {
         flex: none;
@@ -365,13 +352,6 @@
     .k-slider kendo-resize-sensor {
         position: absolute;
     }
-    .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
-        padding-inline: var( --kendo-slider-spacing, #{$kendo-slider-spacing} );
-    }
-    .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
-        padding-block: var( --kendo-slider-spacing, #{$kendo-slider-spacing} );
-    }
-
 
     // Aliases
     .k-slider .k-button { @extend .k-slider-button !optional; }

package/scss/timeline/_layout.scss

@@ -59,10 +59,6 @@
             }
         }
 
-        .k-event-collapse {
-            display: none;
-        }
-
         &.k-timeline-collapsible {
             .k-card-header {
                 cursor: pointer;

package/scss/tooltip/_theme.scss

@@ -3,11 +3,6 @@
 @use "./_variables.scss" as *;
 
 @mixin kendo-tooltip--theme() {
-
-    .k-tooltip-wrapper .k-tooltip {
-        @include box-shadow( var( --kendo-tooltip-shadow, #{$kendo-tooltip-shadow} ) );
-    }
-
     .k-tooltip {
         @include box-shadow( var( --kendo-tooltip-shadow, #{$kendo-tooltip-shadow} ) );