@progress/kendo-theme-fluent 6.1.1-dev.0 → 6.1.1-dev.11

package/dist/all.css

@@ -20675,7 +20675,7 @@ hr.k-separator {
   margin: var(--kendo-h4-margin, 0 0 var(--kendo-font-size, inherit));
 }
 
-.k-h5, .k-card-header, .k-card-title, .k-popover-header {
+.k-h5 {
   font-size: var(--kendo-h5-font-size, 18px);
   font-family: var(--kendo-h5-font-family, var(--kendo-font-family, inherit));
   line-height: var(--kendo-h5-line-height, var(--kendo-line-height, normal));
@@ -20684,7 +20684,7 @@ hr.k-separator {
   margin: var(--kendo-h5-margin, 0 0 var(--kendo-font-size, inherit));
 }
 
-.k-h6, .k-card-subtitle {
+.k-h6 {
   font-size: var(--kendo-h6-font-size, 16px);
   font-family: var(--kendo-h6-font-family, var(--kendo-font-family, inherit));
   line-height: var(--kendo-h6-line-height, var(--kendo-line-height, normal));
@@ -35923,9 +35923,8 @@ k-datetimepicker[dir=rtl] .k-time-tab .k-datetime-selector, .k-rtl k-datetimepic
   font-size: var(--kendo-actionsheet-item-description-font-size, var(--kendo-font-size-sm, inherit));
 }
 
-.k-actionsheet > .k-hr {
+.k-actionsheet .k-hr {
   margin: 0;
-  border-color: inherit;
   flex: none;
 }
 
@@ -36134,6 +36133,10 @@ k-datetimepicker[dir=rtl] .k-time-tab .k-datetime-selector, .k-rtl k-datetimepic
   color: inherit;
 }
 
+.k-actionsheet .k-hr {
+  border-color: var(--kendo-actionsheet-border, var(--kendo-component-border, initial));
+}
+
 .k-adaptive-actionsheet .k-actionsheet-titlebar, .k-adaptive-actionsheet .k-actionsheet-jq .k-actionsheet-header, .k-actionsheet-jq .k-adaptive-actionsheet .k-actionsheet-header {
   border-color: var(--kendo-adaptive-actionsheet-header-border, var(--kendo-component-border, initial));
 }
@@ -38621,11 +38624,17 @@ kendo-card-footer {
 }
 
 .k-card-title, .k-popover-header {
+  font-size: var(--kendo-card-title-font-size, var(--kendo-font-size-lg, inherit));
+  font-family: var(--kendo-card-title-font-family, var(--kendo-font-family, inherit));
+  line-height: var(--kendo-card-title-line-height, var(--kendo-line-height, normal));
   font-weight: var(--kendo-card-title-font-weight, var(--kendo-font-weight, initial));
-  margin-block-end: var(--kendo-card-title-margin-bottom, 0.75rem);
+  margin: 0 0 var(--kendo-card-title-margin-bottom, 0.75rem);
 }
 
 .k-card-subtitle {
+  font-size: var(--kendo-card-subtitle-font-size, var(--kendo-font-size-sm, inherit));
+  font-family: var(--kendo-card-subtitle-font-family, var(--kendo-font-family, inherit));
+  line-height: var(--kendo-card-subtitle-line-height, var(--kendo-line-height, normal));
   font-weight: var(--kendo-card-title-font-weight, var(--kendo-font-weight, initial));
   margin-block-end: var(--kendo-card-subtitle-margin-bottom, 0.75rem);
 }
@@ -38634,6 +38643,9 @@ kendo-card-footer {
 }
 
 .k-card-header {
+  font-size: var(--kendo-card-header-font-size, var(--kendo-font-size-lg, inherit));
+  font-family: var(--kendo-card-header-font-family, var(--kendo-font-family, inherit));
+  line-height: var(--kendo-card-header-line-height, var(--kendo-line-height, normal));
   font-weight: var(--kendo-card-title-font-weight, var(--kendo-font-weight, initial));
   margin: 0;
   padding-inline: var(--kendo-card-header-padding-x, 0.75rem);
@@ -40812,8 +40824,8 @@ div.k-grid-norecords {
   width: var(--kendo-grid-column-menu-width, 230px);
   box-sizing: border-box;
 }
-.k-popup > .k-column-menu-popup,
-.k-popup > .k-grid-columnmenu-popup {
+.k-column-menu-popup.k-popup,
+.k-grid-columnmenu-popup.k-popup {
   max-width: 100%;
 }
 .k-column-menu-popup .k-actions, .k-column-menu-popup .k-edit-buttons,
@@ -47327,6 +47339,7 @@ kendo-scheduler .k-recurrence-editor {
 }
 
 .k-mediaplayer-titlebar {
+  font-size: var(--kendo-media-player-title-font-size, var(--kendo-font-size-xl, inherit));
   padding-inline: var(--kendo-media-player-titlebar-padding-x, 0.5rem);
   padding-block: var(--kendo-media-player-titlebar-padding-y, 0.5rem);
   position: absolute;
@@ -49199,7 +49212,7 @@ div.k-scrollview.k-scrollview-light .k-scrollview-nav-wrap {
 }
 .k-orgchart-card .k-card-title, .k-orgchart-card .k-popover-header {
   margin-block-end: var(--kendo-orgchart-card-title-margin-y, 0px);
-  font-size: var(--kendo-orgchart-card-title-font-size, var(--kendo-font-size, inherit));
+  font-size: var(--kendo-orgchart-card-title-font-size, var(--kendo-font-size-lg, inherit));
   line-height: var(--kendo-orgchart-card-title-line-height, var(--kendo-line-height, normal));
 }
 .k-orgchart-card .k-card-subtitle {

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.1.1-dev.0",
+    "version": "6.1.1-dev.11+a056ff586",
     "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.0",
+    "version": "6.1.1-dev.11+a056ff586",
     "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.0",
+  "version": "6.1.1-dev.11+a056ff586",
   "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.0",
-    "@progress/kendo-theme-utils": "^6.1.1-dev.0"
+    "@progress/kendo-theme-core": "^6.1.1-dev.11+a056ff586",
+    "@progress/kendo-theme-utils": "^6.1.1-dev.11+a056ff586"
   },
-  "gitHead": "1b4e32ebc171c92920fa7d0e6fc172718efc9de1"
+  "gitHead": "a056ff5860c51449a5ce6f770399c0f1fce97e1f"
 }

package/scss/action-sheet/_layout.scss

@@ -206,9 +206,8 @@
 
 
     // Actionsheet separator
-    .k-actionsheet > .k-hr {
+    .k-actionsheet .k-hr {
         margin: 0;
-        border-color: inherit;
         flex: none;
     }
 

package/scss/action-sheet/_theme.scss

@@ -89,6 +89,11 @@
         }
     }
 
+    // Actionsheet separator
+    .k-actionsheet .k-hr {
+        border-color: var( --kendo-actionsheet-border, #{$kendo-actionsheet-border} );
+    }
+
     // Adaptive Actionsheet
     .k-adaptive-actionsheet .k-actionsheet-titlebar {
             border-color: var( --kendo-adaptive-actionsheet-header-border, #{$kendo-adaptive-actionsheet-header-border} );

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

@@ -1167,7 +1167,7 @@
         width: var( --kendo-grid-column-menu-width, #{$kendo-grid-column-menu-width} );
         box-sizing: border-box;
 
-        .k-popup > & {
+        &.k-popup {
             max-width: 100%;
         }
 

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/_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;