@progress/kendo-theme-fluent 6.1.1-dev.4 → 6.1.1-dev.53

package/dist/meta/variables.json

@@ -0,0 +1 @@
+{}

package/dist/meta/variables.scss

@@ -0,0 +1,10 @@
+@use "sass:meta";
+@use "../all.scss";
+
+$_vars: meta.module-variables("all");
+
+body {
+    @each $key, $val in $_vars {
+        var: k-resolve-var( unquote($key), meta.type-of( $val ), $val );
+    }
+}

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "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.1.1-dev.4",
+    "version": "6.1.1-dev.53+36ac80531",
     "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.1.1-dev.4",
+  "version": "6.1.1-dev.53+36ac80531",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.4.0",
-    "@progress/kendo-theme-core": "^6.1.1-dev.4",
-    "@progress/kendo-theme-utils": "^6.1.1-dev.4"
+    "@progress/kendo-theme-core": "6.1.1-dev.53+36ac80531",
+    "@progress/kendo-theme-utils": "6.1.1-dev.53+36ac80531"
   },
-  "gitHead": "7ebd1ea8443604e84851d505d81be33088fa0057"
+  "gitHead": "36ac80531f631f59ceb617dcb11f3b0df360d953"
 }

package/scss/action-buttons/_layout.scss

@@ -26,7 +26,7 @@
     .k-edit-buttons,
     .k-action-buttons,
     .k-columnmenu-actions {
-        @extend .k-actions;
+        @extend .k-actions !optional;
     }
 
     // Actions align

package/scss/adaptive/_layout.scss

@@ -140,7 +140,8 @@
 
             .k-recur-items-wrap {
                 width: 100%;
-                margin: -1px 0;
+                margin-block: -1px;
+                margin-inline: 0;
             }
 
             .k-scheduler-recur-end-wrap {
@@ -166,7 +167,8 @@
         }
 
         .k-scheduler-toolbar {
-            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
 
             > * {
                 margin: 0;
@@ -201,7 +203,8 @@
         }
 
         .k-scheduler-footer {
-            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
             display: flex;
             justify-content: space-between;
 
@@ -360,12 +363,14 @@
 
         .k-list-title,
         .k-filter-help-text {
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             display: block;
         }
 
         .k-listgroup-title {
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             font-weight: bold;
             text-transform: uppercase;
         }

package/scss/calendar/_layout.scss

@@ -42,7 +42,8 @@
 
     // Calendar table
     .k-calendar-table {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         border-width: 0;
         border-color: inherit;
         border-spacing: 0;
@@ -261,7 +262,7 @@
             block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
         }
         .k-link {
-            text-align: left;
+            text-align: start;
         }
     }
 

package/scss/card/_layout.scss

@@ -53,15 +53,19 @@
 
     // Card title
     .k-card-title {
-        @extend .k-h5;
+        font-size: var( --kendo-card-title-font-size, #{$kendo-card-title-font-size} );
+        font-family: var( --kendo-card-title-font-family, #{$kendo-card-title-font-family} );
+        line-height: var( --kendo-card-title-line-height, #{$kendo-card-title-line-height} );
         font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
-        margin-block-end: var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} );
+        margin: 0 0 var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} );
     }
 
 
     // Card subtitle
     .k-card-subtitle {
-        @extend .k-h6;
+        font-size: var( --kendo-card-subtitle-font-size, #{$kendo-card-subtitle-font-size} );
+        font-family: var( --kendo-card-subtitle-font-family, #{$kendo-card-subtitle-font-family} );
+        line-height: var( --kendo-card-subtitle-line-height, #{$kendo-card-subtitle-line-height} );
         font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
         margin-block-end: var( --kendo-card-subtitle-margin-bottom, #{$kendo-card-subtitle-margin-bottom} );
 
@@ -73,7 +77,9 @@
 
     // Header
     .k-card-header {
-        @extend .k-h5;
+        font-size: var( --kendo-card-header-font-size, #{$kendo-card-header-font-size} );
+        font-family: var( --kendo-card-header-font-family, #{$kendo-card-header-font-family} );
+        line-height: var( --kendo-card-header-line-height, #{$kendo-card-header-line-height} );
         font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
         margin: 0;
         padding-inline: var( --kendo-card-header-padding-x, #{$kendo-card-header-padding-x} );

package/scss/card/_variables.scss

@@ -55,9 +55,18 @@ $kendo-card-focus-border: var( --kendo-component-border, initial ) !default;
 /// @group card
 $kendo-card-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
+/// Text size of the card header.
+/// @group card
+$kendo-card-header-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// Font family of the card header text.
+/// @group card
+$kendo-card-header-font-family: var( --kendo-font-family, inherit ) !default;
 /// Text weight of the card header.
 /// @group card
 $kendo-card-header-font-weight: var( --kendo-font-weight, initial ) !default;
+/// Line height of the card header.
+/// @group card
+$kendo-card-header-line-height: var( --kendo-line-height, normal ) !default;
 /// Horizontal padding of the card header.
 /// @group card
 $kendo-card-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
@@ -103,12 +112,30 @@ $kendo-card-footer-text: inherit !default; // $kendo-component-header-text
 /// @group card
 $kendo-card-footer-border: inherit !default; // $kendo-component-header-border
 
+/// Text size of the card title.
+/// @group card
+$kendo-card-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// Font family of the card title.
+/// @group card
+$kendo-card-title-font-family: var( --kendo-font-family, inherit ) !default;
 /// Text weight of the card title.
 /// @group card
 $kendo-card-title-font-weight: $kendo-card-header-font-weight !default;
+/// Line height of the card title.
+/// @group card
+$kendo-card-title-line-height: var( --kendo-line-height, normal ) !default;
 /// Bottom margin of the card title.
 /// @group card
 $kendo-card-title-margin-bottom: map.get( $kendo-spacing, 3 ) !default;
+/// Font size of the card subtitle.
+/// @group card
+$kendo-card-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Font family of the card subtitle.
+/// @group card
+$kendo-card-subtitle-font-family: var( --kendo-font-family, inherit ) !default;
+/// Line height of the card subtitle.
+/// @group card
+$kendo-card-subtitle-line-height: var( --kendo-line-height, normal ) !default;
 /// Bottom margin of the card subtitle.
 /// @group card
 $kendo-card-subtitle-margin-bottom: map.get( $kendo-spacing, 3 ) !default;

package/scss/chat/_layout.scss

@@ -61,7 +61,7 @@
         }
         .k-message-group:not(.k-alt) {
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
 
             .k-message-time {
                 margin-inline-start: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );
@@ -83,7 +83,7 @@
         .k-message-group.k-alt {
             align-self: flex-end;
             align-items: flex-end;
-            text-align: right;
+            text-align: end;
 
             .k-message-time {
                 margin-inline-end: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );

package/scss/chip/_layout.scss

@@ -34,6 +34,11 @@
             display: none !important; // sass-lint:disable-line no-important
         }
 
+        // Adjustment for kendo-icon-wrapper
+        .k-icon-wrapper-host {
+            display: initial;
+        }
+
         &:hover,
         &:focus {
             outline: 0;
@@ -55,8 +60,10 @@
 
     // Chip content
     .k-chip-content {
-        padding: .5em 0;
-        margin: -.5em 0;
+        padding-block: .5em;
+        padding-inline: 0;
+        margin-block: -.5em;
+        margin-inline: 0;
         min-width: 0;
         display: flex;
         flex-flow: row nowrap;
@@ -106,7 +113,8 @@
 
     // Actions
     .k-chip-actions {
-        margin: -5em 0;
+        margin-block: -5em;
+        margin-inline: 0;
         flex: none;
         display: flex;
         flex-flow: row nowrap;

package/scss/colorpicker/_layout.scss

@@ -9,7 +9,7 @@
 
     // Alias
     .k-colorpicker {
-        @extend .k-color-picker;
+        @extend .k-color-picker !optional;
     }
 
 }

package/scss/dataviz/_layout.scss

@@ -98,7 +98,7 @@
 
     .k-chart-tooltip td {
         width: auto;
-        text-align: left;
+        text-align: start;
         padding-inline: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
         padding-block: var( --kendo-padding-y-sm, #{$kendo-padding-sm-y} );
         line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
@@ -358,7 +358,7 @@
     }
 
     .k-gauge {
-        text-align: left;
+        text-align: start;
         position: relative;
     }
 

package/scss/daterangepicker/_layout.scss

@@ -35,6 +35,6 @@
 
     // Alias
     .k-daterangepicker {
-        @extend .k-daterange-picker;
+        @extend .k-daterange-picker !optional;
     }
 }

package/scss/dropzone/_layout.scss

@@ -25,7 +25,6 @@
         align-items: center;
         justify-content: center;
         position: relative;
-        cursor: pointer;
 
         .k-icon,
         .k-dropzone-icon {

package/scss/editor/_layout.scss

@@ -41,7 +41,8 @@
     // Inline editor
     .k-editor-inline {
         @include border-radius( $kendo-border-radius-md );
-        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+        padding-block: $kendo-padding-sm-y;
+        padding-inline: $kendo-padding-sm-x;
         border: 1px solid transparent;
         word-wrap: break-word;
         overflow: auto;
@@ -220,7 +221,8 @@
         th {
             min-width: 1em;
             border: 1px solid;
-            padding: 3px 5px;
+            padding-block: 3px;
+            padding-inline: 5px;
             vertical-align: top;
             box-sizing: border-box;
             position: relative;
@@ -228,7 +230,10 @@
 
         th {
             font-weight: bold;
-            text-align: left;
+            text-align: start;
+        }
+        td {
+            text-align: start;
         }
 
         // Give selected cells a blue overlay
@@ -247,8 +252,10 @@
     .k-edit-form-content {
         flex: 1 1 auto;
         overflow: auto;
-        margin: (-$kendo-window-inner-padding-y) (-$kendo-window-inner-padding-x);
-        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
+        margin-block: (-$kendo-window-inner-padding-y);
+        margin-inline: (-$kendo-window-inner-padding-x);
+        padding-block: $kendo-window-inner-padding-y;
+        padding-inline: $kendo-window-inner-padding-x;
     }
 
     // Insert table
@@ -390,7 +397,8 @@
             height: 390px;
             max-height: 50vh;
             margin-block-end: map.get( $kendo-spacing, 4 );
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             border-top-width: 0;
             overflow: auto;
         }
@@ -398,7 +406,8 @@
         .k-tile {
             width: 33%;
             height: 90px;
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             box-sizing: border-box;
             white-space: nowrap;
             overflow: hidden;
@@ -510,7 +519,8 @@
 
             td {
                 min-width: 1px;
-                padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+                padding-block: $kendo-padding-sm-y;
+                padding-inline: $kendo-padding-sm-x;
             }
         }
 
@@ -574,7 +584,8 @@
                 .k-column-resize-marker {
                     width: 2px;
                     height: 100%;
-                    margin: 0 auto;
+                    margin-block: 0;
+                    margin-inline: auto;
                     display: none;
                     opacity: .8;
                 }

package/scss/floating-label/_layout.scss

@@ -19,7 +19,7 @@
         }
 
         > .k-label {
-            max-width: 90%;
+            max-width: var( --kendo-floating-label-max-width, #{$kendo-floating-label-max-width} );
             font-size: var( --kendo-floating-label-font-size, #{$kendo-floating-label-font-size} );
             font-weight: var( --kendo-floating-label-font-weight, #{$kendo-floating-label-font-weight} );
             line-height: var( --kendo-floating-label-line-height, #{$kendo-floating-label-line-height} );

package/scss/floating-label/_variables.scss

@@ -9,6 +9,10 @@ $kendo-floating-label-scale: 1 !default;
 /// @group floating-label
 $kendo-floating-label-font-size: var( --kendo-font-size, inherit ) !default;
 
+/// The max-width of the floating label
+/// @group floating-label
+$kendo-floating-label-max-width: 90% !default;
+
 /// The font weight of the floating label
 /// @group floating-label
 $kendo-floating-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default;

package/scss/forms/_layout.scss

@@ -126,7 +126,7 @@
 
     // Form Buttons Container
     .k-form-buttons {
-        @extend .k-actions;
+        @extend .k-actions !optional;
         padding: 0;
         overflow: visible;
     }
@@ -223,7 +223,7 @@
 
         legend {
             font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
-            text-align: left;
+            text-align: start;
             font-weight: 600;
             line-height: 1;
             margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
@@ -235,12 +235,12 @@
         .k-form-field {
             display: flex;
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
             margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
 
             > span:not(.k-widget) {
                 width: var( --kendo-inline-form-element-width, #{$kendo-inline-form-element-width} );
-                text-align: right;
+                text-align: end;
                 line-height: var( --kendo-line-height, #{$kendo-line-height-md} );
                 padding-block: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} );
                 padding-inline-end: var( --kendo-padding-x-lg, #{$kendo-padding-lg-x} );
@@ -294,7 +294,7 @@
         padding-block: calc( #{$kendo-input-md-padding-y} + #{$kendo-input-border-width} );
         width: 30%;
         line-height: var( --kendo-form-line-height, #{$kendo-form-line-height} );
-        text-align: right;
+        text-align: end;
         float: left;
         clear: both;
     }

package/scss/gantt/_layout.scss

@@ -85,7 +85,8 @@
             }
             .k-grid-header th:last-child {
                 .k-header {
-                    padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+                    padding-block: $kendo-grid-header-padding-y;
+                    padding-inline: $kendo-grid-header-padding-x;
                     border-width: 0 0 1px $kendo-grid-cell-border-width-y;
                     white-space: nowrap;
                 }
@@ -299,7 +300,8 @@
             overflow-x: scroll;
         }
         .k-header {
-            padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+            padding-block: $kendo-grid-header-padding-y;
+            padding-inline: $kendo-grid-header-padding-x;
             border-block-start-width: 0;
             border-block-end-width: 1px;
             border-inline-start-width: $kendo-grid-cell-border-width-y;
@@ -389,8 +391,10 @@
     }
 
     .k-task-wrap {
-        margin: 0 -21px;
-        padding: 5px 21px;
+        margin-block: 0;
+        margin-inline: -21px;
+        padding-block: 5px;
+        padding-inline: 21px;
         display: inline-flex;
         flex-direction: row;
         align-items: center;
@@ -598,14 +602,16 @@
         white-space: nowrap;
 
         .k-resource {
-            margin: 0 5px;
+            margin-block: 0;
+            margin-inline: 5px;
         }
     }
 
 
     // Task tooltip
     .k-task-details {
-        padding: $kendo-padding-md-y $kendo-padding-md-x;
+        padding-block: $kendo-padding-md-y;
+        padding-inline: $kendo-padding-md-x;
         white-space: nowrap;
 
         strong {

package/scss/grid/_layout.scss

@@ -331,7 +331,7 @@
 
     // Alias used in jQuery
     .k-reorder-cue {
-        @extend .k-grouping-dropclue;
+        @extend .k-grouping-dropclue !optional;
     }
 
     // Grid header / footer
@@ -888,7 +888,8 @@
 
     .k-grid-norecords-template {
         box-sizing: border-box;
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: 20em;
         height: 4em;
         border: 1px solid;

package/scss/icon/_layout.scss

@@ -30,10 +30,10 @@
     // RTL icons
     .k-rtl .k-i-indent-increase,
     .k-rtl .k-i-indent-decrease,
-    .k-rtl .k-i-expand,
-    .k-rtl .k-i-collapse,
-    [dir="rtl"] .k-i-expand,
-    [dir="rtl"] .k-i-collapse {
+    .k-rtl .k-i-caret-alt-right,
+    .k-rtl .k-i-caret-alt-down,
+    [dir="rtl"] .k-i-caret-alt-right,
+    [dir="rtl"] .k-i-caret-alt-down {
         transform: scaleX(-1);
     }
 

package/scss/input/_layout.scss

@@ -350,7 +350,8 @@
             aspect-ratio: auto;
 
             .k-button-icon {
-                margin: -1em 0;
+                margin-block: -1em;
+                margin-inline: 0;
                 min-width: auto !important; // sass-lint:disable-line no-important
                 min-height: auto !important; // sass-lint:disable-line no-important
             }

package/scss/list/_layout.scss

@@ -123,7 +123,7 @@
         }
     }
     .k-list-optionlabel {
-        @extend .k-list-item;
+        @extend .k-list-item !optional;
     }
 
 

package/scss/mediaplayer/_layout.scss

@@ -40,6 +40,7 @@
 
     // Title bar
     .k-mediaplayer-titlebar {
+        font-size: var( --kendo-media-player-title-font-size, #{$kendo-media-player-title-font-size} );
         padding-inline: var( --kendo-media-player-titlebar-padding-x, #{$kendo-media-player-titlebar-padding-x} );
         padding-block: var( --kendo-media-player-titlebar-padding-y, #{$kendo-media-player-titlebar-padding-y} );
         position: absolute;

package/scss/mediaplayer/_variables.scss

@@ -32,6 +32,9 @@ $kendo-media-player-overlay-bg: get-theme-color-var( neutral-130 ) !default;
 /// @group mediaplayer
 $kendo-media-player-quality-border: get-theme-color-var( neutral-110 ) !default;
 
+/// Media player title font size.
+/// @group mediaplayer
+$kendo-media-player-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
 /// Mediaplayer titlebar horizontal padding.
 /// @group mediaplayer
 $kendo-media-player-titlebar-padding-x: map.get( $kendo-spacing, 2 ) !default;

package/scss/orgchart/_layout.scss

@@ -20,7 +20,8 @@
     }
 
     .k-orgchart-container {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: 100%;
         height: 100%;
         position: relative;
@@ -108,7 +109,8 @@
     }
 
     .k-orgchart-line-v {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: var( --kendo-orgchart-line-size, #{$kendo-orgchart-line-size} );
         height: var( --kendo-orgchart-line-v-height, #{$kendo-orgchart-line-v-height} );
     }

package/scss/orgchart/_variables.scss

@@ -106,7 +106,7 @@ $kendo-orgchart-card-focus-shadow: $kendo-card-focus-shadow !default;
 $kendo-orgchart-card-title-margin-y: 0px !default;
 /// Font size of the orgchart card title.
 /// @group orgchart
-$kendo-orgchart-card-title-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-orgchart-card-title-font-size: $kendo-card-title-font-size !default;
 /// Line height of the orgchart card title.
 /// @group orgchart
 $kendo-orgchart-card-title-line-height: var( --kendo-line-height, normal ) !default;