@progress/kendo-theme-fluent 6.1.1-dev.2 → 6.1.1-dev.25

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.2",
+    "version": "6.1.1-dev.25+bd878b468",
     "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.2",
+    "version": "6.1.1-dev.25+bd878b468",
     "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.2",
+  "version": "6.1.1-dev.25+bd878b468",
   "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.2",
-    "@progress/kendo-theme-utils": "^6.1.1-dev.2"
+    "@progress/kendo-theme-core": "6.1.1-dev.25+bd878b468",
+    "@progress/kendo-theme-utils": "6.1.1-dev.25+bd878b468"
   },
-  "gitHead": "55d1b73914cf6fd254d5779c62c70fdfeb141ae6"
+  "gitHead": "bd878b468ff65ff14c8a636431427ad2ba4b7b7e"
 }

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