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

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "7.0.3-dev.2",
+    "version": "7.1.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": "7.0.3-dev.2",
+    "version": "7.1.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": "7.0.3-dev.2",
+  "version": "7.1.0-dev.0",
   "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.2",
-    "@progress/kendo-theme-utils": "7.0.3-dev.2"
+    "@progress/kendo-theme-core": "7.1.0-dev.0",
+    "@progress/kendo-theme-utils": "7.1.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "00fbdd430c74d792dadbb35dc7f15107c8973d09"
+  "gitHead": "e0a0885fdf92926065f788aab0ad62453b875258"
 }

package/scss/captcha/_variables.scss

@@ -2,45 +2,45 @@
 @use "sass:math";
 @use "../core/" as *;
 
-/// Spacer of the captcha.
+/// The spacer of the Captcha.
 /// @group captcha
 $kendo-captcha-spacer: map.get( $kendo-spacing, 2 ) !default;
 
-/// Default width of the captcha.
+/// The width of the Captcha.
 /// @group captcha
 $kendo-captcha-width: 280px !default;
-/// Font family of the captcha.
+/// The font family of the Captcha.
 /// @group captcha
 $kendo-captcha-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the captcha.
+/// The font size of the Captcha.
 /// @group captcha
 $kendo-captcha-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the captcha.
+/// The line height of the Captcha.
 /// @group captcha
 $kendo-captcha-line-height: var( --kendo-line-height, normal ) !default;
-/// Spacing of the captcha.
+/// The spacing of the Captcha.
 /// @group captcha
 $kendo-captcha-spacing: $kendo-captcha-spacer !default;
-/// Background color of the captcha.
+/// The background color of the Captcha.
 /// @group captcha
 $kendo-captcha-bg: var( --kendo-component-bg, initial ) !default;
-/// Text color of the captcha.
+/// The text color of the Captcha.
 /// @group captcha
 $kendo-captcha-text: var( --kendo-component-text, initial ) !default;
-/// Border color of the captcha.
+/// The border color of the Captcha.
 /// @group captcha
 $kendo-captcha-border: var( --kendo-component-border, initial ) !default;
 
-/// Spacing of the captcha image wrapper.
+/// The spacing of the Captcha image wrapper.
 /// @group captcha
 $kendo-captcha-image-wrap-spacing: $kendo-captcha-spacer !default;
-/// Spacing of the captcha image controls.
+/// The spacing of the Captcha image controls.
 /// @group captcha
 $kendo-captcha-image-controls-spacing: math.div( $kendo-captcha-spacer, 2 ) !default;
 
-/// Offset of the captcha validation text.
+/// The offset of the Captcha validation message.
 /// @group captcha
 $kendo-captcha-validation-offset-y: math.div( $kendo-captcha-spacer, 2 ) !default;
-/// Font-size of the captcha validation text.
+/// The font size of the Captcha validation message.
 /// @group captcha
 $kendo-captcha-validation-font-size: var( --kendo-font-size-sm, inherit ) !default;

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/dock-manager/_layout.scss

@@ -32,18 +32,6 @@
             height: 0;
             border-width: var( --kendo-dock-manager-border-width, #{$kendo-dock-manager-border-width} ) 0 0;
         }
-
-        // Needed because of a bug in Chrome - Issue 1473554
-        // A fix will be shipped likely in milestone 118 and then we can revisit this
-        @supports  (not (-ms-ime-mode: none)) and (not (overflow: -webkit-marquee)) and (not (-moz-appearance:none)) {
-            .k-toolbar-button {
-                padding-block: var(--INTERNAL--kendo-button-padding-x, 0 );
-                padding-inline: var(--INTERNAL--kendo-button-padding-y, 0 );
-            }
-            .k-toolbar-button .k-button-text {
-                writing-mode: vertical-lr;
-            }
-        }
     }
 
     // Panes

package/scss/dropzone/_variables.scss

@@ -2,71 +2,71 @@
 @use "../core/" as *;
 @use "../icon/_variables.scss" as *;
 
-/// Horizontal padding of the dropzone.
+/// The horizontal padding of the DropZone.
 /// @group dropzone
 $kendo-dropzone-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the dropzone.
+/// The vertical padding of the DropZone.
 /// @group dropzone
 $kendo-dropzone-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// Border width of the dropzone.
+/// The border width of the DropZone.
 /// @group dropzone
 $kendo-dropzone-border-width: 1px !default;
-/// Min height of the dropzone.
+/// The minimum height of the DropZone.
 /// @group dropzone
 $kendo-dropzone-min-height: 220px !default;
 
-/// Font family of the dropzone.
+/// The font family of the DropZone.
 /// @group dropzone
 $kendo-dropzone-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the dropzone.
+/// The font size of the DropZone.
 /// @group dropzone
 $kendo-dropzone-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the dropzone.
+/// The line height of the DropZone.
 /// @group dropzone
 $kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Background color of the dropzone.
+/// The background color of the DropZone.
 /// @group dropzone
 $kendo-dropzone-bg: k-get-theme-color-var( neutral-10 ) !default;
-/// Text color of the dropzone.
+/// The text color of the DropZone.
 /// @group dropzone
 $kendo-dropzone-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the dropzone.
+/// The border color of the DropZone.
 /// @group dropzone
 $kendo-dropzone-border: var( --kendo-component-border, initial ) !default;
 
-/// Spacing below the icon.
+/// The spacing below the DropZone icon.
 /// @group dropzone
 $kendo-dropzone-icon-spacing: map.get( $kendo-spacing, 6 ) !default;
-/// Text color of the icon.
+/// The text color of the DropZone icon.
 /// @group dropzone
 $kendo-dropzone-icon-text: k-get-theme-color-var( neutral-90 ) !default;
-/// Text color of the icon when the dropzone is hovered.
+/// The text color of the hovered DropZone icon.
 /// @group dropzone
 $kendo-dropzone-icon-hover-text: k-get-theme-color-var( primary-100 ) !default;
 
-/// Font size of the hint.
+/// The font size of the DropZone hint.
 /// @group dropzone
 $kendo-dropzone-hint-font-size: inherit !default;
-/// Font weight of the hint.
+/// The font weight of the DropZone hint.
 /// @group dropzone
 $kendo-dropzone-hint-font-weight: var( --kendo-font-weight-bold, bold ) !default;
-/// Spacing below the hint.
+/// The spacing below the DropZone hint.
 /// @group dropzone
 $kendo-dropzone-hint-spacing: map.get( $kendo-spacing, 2 ) !default;
-/// Text color of the hint.
+/// The text color of the DropZone hint.
 /// @group dropzone
 $kendo-dropzone-hint-text: $kendo-dropzone-text !default;
 
-/// Font size of the note.
+/// The font size of the DropZone note.
 /// @group dropzone
 $kendo-dropzone-note-font-size: var( --kendo-font-size-sm, inherit ) !default;
-/// Font weight of the note.
+/// The font weight of the DropZone note.
 /// @group dropzone
 $kendo-dropzone-note-font-weight: inherit !default;
-/// Spacing below the note.
+/// The spacing below the DropZone note.
 /// @group dropzone
 $kendo-dropzone-note-spacing: 0 !default;
-/// Text color of the note.
+/// The text color of the DropZone note.
 /// @group dropzone
 $kendo-dropzone-note-text: var( --kendo-subtle-text, inherit ) !default;

package/scss/filemanager/_variables.scss

@@ -3,180 +3,180 @@
 @use "../toolbar/_variables.scss" as *;
 @use "../icon/_variables.scss" as *;
 
-/// The space between the filemanger items.
-/// @group filemanger
+/// The space between the FileManager items.
+/// @group filemanager
 $kendo-file-manager-spacer: map.get( $kendo-spacing, 4 ) !default;
-/// Border width of the filemanger.
-/// @group filemanger
+/// The border width of the FileManager.
+/// @group filemanager
 $kendo-file-manager-border-width: 1px !default;
-/// Font family of the filemanger.
-/// @group filemanger
+/// The font family of the FileManager.
+/// @group filemanager
 $kendo-file-manager-font-family: var( --kendo-font-family, normal ) !default;
-/// Font size of the filemanger.
-/// @group filemanger
+/// The font size of the FileManager.
+/// @group filemanager
 $kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the filemanger.
-/// @group filemanger
+/// The line height of the FileManager.
+/// @group filemanager
 $kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
-/// Background color of the filemanager component.
+/// The background color of the FileManager.
 /// @group filemanager
 $kendo-file-manager-bg: var( --kendo-component-bg, transparent ) !default;
-/// Text color of the filemanager component.
+/// The text color of the FileManager.
 /// @group filemanager
 $kendo-file-manager-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the filemanager component.
+/// The border color of the FileManager.
 /// @group filemanager
 $kendo-file-manager-border: var( --kendo-component-border, inherit ) !default;
 
-/// Border width of the toolbar.
-/// @group filemanger
+/// The border width of the FileManager Toolbar.
+/// @group filemanager
 $kendo-file-manager-toolbar-border-width: $kendo-file-manager-border-width !default;
-/// Background color of the toolbar.
+/// The background color of the FileManager Toolbar.
 /// @group filemanager
 $kendo-file-manager-toolbar-bg: $kendo-toolbar-bg !default;
-/// Text color of the toolbar.
+/// The text color of the FileManager Toolbar.
 /// @group filemanager
 $kendo-file-manager-toolbar-text: $kendo-toolbar-text !default;
-/// Border color of the toolbar.
+/// The border color of the FileManager Toolbar.
 /// @group filemanager
 $kendo-file-manager-toolbar-border: $kendo-toolbar-border !default;
 
-/// Horizontal padding of the navigation.
+/// The horizontal padding of the FileManager Navigation.
 /// @group filemanager
 $kendo-file-manager-navigation-padding-x: $kendo-file-manager-spacer !default;
-/// Vertical padding of the navigation.
+/// The vertical padding of the FileManager Navigation.
 /// @group filemanager
 $kendo-file-manager-navigation-padding-y: $kendo-file-manager-spacer !default;
-/// Width of the navigation.
+/// The width of the FileManager Navigation.
 /// @group filemanager
 $kendo-file-manager-navigation-width: 20% !default;
-/// Border width of the navigation.
+/// The border width of the FileManager Navigation.
 /// @group filemanager
 $kendo-file-manager-navigation-border-width: $kendo-file-manager-border-width !default;
-/// Background color of the navigation.
+/// The background color of the FileManager Navigation.
 /// @group filemanager
 $kendo-file-manager-navigation-bg: transparent !default;
-/// Text color of the navigation.
+/// The text color of the FileManager Navigation.
 /// @group filemanager
 $kendo-file-manager-navigation-text: inherit !default;
-/// Border color of the navigation.
+/// The border color of the FileManager Navigation.
 /// @group filemanager
 $kendo-file-manager-navigation-border: inherit !default;
 
-/// Horizontal padding of the breadcrumb.
+/// The horizontal padding of the FileManager Breadcrumb.
 /// @group filemanager
 $kendo-file-manager-breadcrumb-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the breadcrumb.
+/// The vertical padding of the FileManager Breadcrumb.
 /// @group filemanager
 $kendo-file-manager-breadcrumb-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// Border width of the breadcrumb.
+/// The border width of the FileManager Breadcrumb.
 /// @group filemanager
 $kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-border-width !default;
-/// Background color of the breadcrumb.
+/// The background color of the FileManager Breadcrumb.
 /// @group filemanager
 $kendo-file-manager-breadcrumb-bg: $kendo-toolbar-bg !default;
-/// Text color of the breadcrumb.
+/// The text color of the FileManager Breadcrumb.
 /// @group filemanager
 $kendo-file-manager-breadcrumb-text: inherit !default;
-/// Border color of the breadcrumb.
+/// The border color of the FileManager Breadcrumb.
 /// @group filemanager
 $kendo-file-manager-breadcrumb-border: inherit !default;
 
-/// Background color of the listview.
+/// The background color of the FileManager ListView.
 /// @group filemanager
 $kendo-file-manager-listview-bg: transparent !default;
-/// Text color of the listview.
+/// The text color of the FileManager ListView.
 /// @group filemanager
 $kendo-file-manager-listview-text: inherit !default;
-/// Border color of the listview.
+/// The border color of the FileManager ListView.
 /// @group filemanager
 $kendo-file-manager-listview-border: inherit !default;
 
-/// Horizontal padding of the listview item.
+/// The horizontal padding of the FileManager ListView item.
 /// @group filemanager
 $kendo-file-manager-listview-item-padding-x: map.get( $kendo-spacing, 4 ) !default;
-/// Vertical padding of the listview item.
+/// The vertical padding of the FileManager ListView item.
 /// @group filemanager
 $kendo-file-manager-listview-item-padding-y: map.get( $kendo-spacing, 4 ) !default;
-/// Width of the listview item.
+/// The width of the FileManager ListView item.
 /// @group filemanager
 $kendo-file-manager-listview-item-width: 120px !default;
-/// Height of the listview item.
+/// The height of the FileManager ListView item.
 /// @group filemanager
 $kendo-file-manager-listview-item-height: 120px !default;
 
-/// Background color of the listview item icon.
+/// The background color of the FileManager ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-bg: transparent !default;
-/// Text color of the listview item icon.
+/// The text color of the FileManager ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-text: var( --kendo-subtle-text, inherit ) !default;
-/// Border color of the listview item icon.
+/// The border color of the FileManager ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-border: inherit !default;
-/// Background color of the focused listview item icon.
+/// The background color of the FileManager focused ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-focus-bg: transparent !default;
-/// Text color of the focused listview item icon.
+/// The text color of the FileManager focused ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-focus-text: inherit !default;
-/// Border color of the focused listview item icon.
+/// The border color of the FileManager focused ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-focus-border: inherit !default;
-/// Background color of the selected listview item icon.
+/// Background color of the FileManager selected ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-selected-bg: transparent !default;
-/// Text color of the selected listview item icon.
+/// Text color of the FileManager selected ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-selected-text: inherit !default;
-/// Border color of the selected listview item icon.
+/// Border color of the FileManager selected ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-selected-border: inherit !default;
 
-/// Background color of the grid.
+/// The background color of the FileManager Grid.
 /// @group filemanager
 $kendo-file-manager-grid-bg: transparent !default;
-/// Text color of the grid.
+/// The text color of the FileManager Grid.
 /// @group filemanager
 $kendo-file-manager-grid-text: inherit !default;
-/// Border color of the grid.
+/// The border color of the FileManager Grid.
 /// @group filemanager
 $kendo-file-manager-grid-border: inherit !default;
 
-/// Horizontal padding of the preview.
+/// The horizontal padding of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-padding-x: $kendo-file-manager-spacer !default;
-/// Vertical padding of the preview.
+/// The vertical padding of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-padding-y: $kendo-file-manager-spacer !default;
-/// Width of the preview.
+/// The width of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-width: 20% !default;
-/// Border width of the preview.
+/// The border width of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-border-width: $kendo-file-manager-border-width !default;
-/// Spacing of the preview.
+/// The spacing of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-spacing: $kendo-file-manager-spacer !default;
-/// Spacing of the preview.
+/// The gap between the columns in the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-column-gap: map.get( $kendo-spacing, 1 ) !default;
-/// Background color of the preview.
+/// The background color of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-bg: transparent !default;
-/// Text color of the preview.
+/// The text color of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-text: inherit !default;
-/// Border color of the preview.
+/// The border color of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-border: inherit !default;
 
-/// Background color of the preview icon.
+/// The background color of the FileManager preview icon.
 /// @group filemanager
 $kendo-file-manager-preview-icon-bg: transparent !default;
-/// Text color of the preview icon.
+/// The text color of the FileManager preview icon.
 /// @group filemanager
 $kendo-file-manager-preview-icon-text: var( --kendo-subtle-text, inherit ) !default;
-/// Border color of the preview icon.
+/// The border color of the FileManager preview icon.
 /// @group filemanager
 $kendo-file-manager-preview-icon-border: inherit !default;

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} );