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

package/dist/all.scss

@@ -1,7 +1 @@
-// This file is auto-generated. Do not edit!
-// baka:source packages/fluent/scss/all.scss
-
-@use "index.scss" as kendo-theme;
-
-@include kendo-theme.config();
-@include kendo-theme.styles();
+@use "../scss/all.scss";

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": "5.12.1-dev.0",
+  "version": "5.12.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -40,15 +40,18 @@
   "scripts": {
     "build": "sass-build",
     "sass": "sass-build",
+    "docs": "node ../../scripts/sassdoc.js",
+    "predocs": "npm run resolve-variables",
+    "resolve-variables": "node ../../scripts/resolve-variables.js",
     "nuget-pack": "jq '.version' package.json | xargs nuget pack package.nuspec -Version",
     "nuget-push": "nuget push *.nupkg -ApiKey $NUGET_API_KEY -Source $NUGET_FEED -SkipDuplicate",
     "prepublishOnly": "node ../../scripts/themes-prepublish.js",
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "dependencies": {
-    "@progress/kendo-font-icons": "^0.6.0",
-    "@progress/kendo-theme-core": "^5.12.1-dev.0",
-    "@progress/kendo-theme-utils": "^5.12.1-dev.0"
+    "@progress/kendo-font-icons": "^1.0.0",
+    "@progress/kendo-theme-core": "^5.12.1-dev.2",
+    "@progress/kendo-theme-utils": "^5.12.1-dev.2"
   },
-  "gitHead": "342125ccbda2aec05866a2bb2c5e6e0c6f64b2e3"
+  "gitHead": "14365a5e53996a453f9d6ad72894a3e4666e6ede"
 }

package/scss/action-buttons/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-action-buttons--layout() {
     .k-actions {

package/scss/action-buttons/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-action-buttons--theme() {
 

package/scss/action-buttons/_variables.scss

@@ -1,11 +1,12 @@
-@use "../core" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Horizontal padding of the action buttons container.
 /// @group action-buttons
-$kendo-actions-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-actions-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the action buttons container.
 /// @group action-buttons
-$kendo-actions-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-actions-padding-y: map.get( $kendo-spacing, 3 ) !default;
 /// Width of the border around the action buttons container.
 /// @group action-buttons
 $kendo-actions-border-width: 0px !default;
@@ -21,4 +22,4 @@ $kendo-actions-border: inherit !default;
 
 /// Spacing between the action buttons.
 /// @group button
-$kendo-actions-button-spacing: map-get( $kendo-spacing, 2 ) !default;
+$kendo-actions-button-spacing: map.get( $kendo-spacing, 2 ) !default;

package/scss/action-buttons/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/action-sheet/_layout.scss

@@ -1,5 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-action-sheet--layout() {
     .k-actionsheet-container {
@@ -292,7 +292,7 @@
         .k-actionsheet-content,
         .k-actionsheet-footer {
             margin-inline: auto;
-            width: unquote("min(100%, 360px)");
+            width: min(100%, 360px);
         }
 
         .k-list-container,

package/scss/action-sheet/_theme.scss

@@ -1,5 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-action-sheet--theme() {
 

package/scss/action-sheet/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Horizontal padding of the action sheet.
 /// @group action-sheet
@@ -52,10 +52,10 @@ $kendo-actionsheet-shadow:  var( --kendo-box-shadow-depth-4, none ) !default;
 
 /// Horizontal padding of the action sheet header.
 /// @group action-sheet
-$kendo-actionsheet-header-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-actionsheet-header-padding-x: map.get( $kendo-spacing, 4 ) !default;
 /// Vertical padding of the action sheet header.
 /// @group action-sheet
-$kendo-actionsheet-header-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-header-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Border width of the action sheet header.
 /// @group action-sheet
 $kendo-actionsheet-header-border-width: 1px !default;
@@ -70,7 +70,7 @@ $kendo-actionsheet-header-font-family: inherit !default;
 $kendo-actionsheet-header-line-height: inherit !default;
 /// Spacing between the action sheet header groups.
 /// @group action-sheet
-$kendo-actionsheet-header-gap: map-get( $kendo-spacing, 4 ) !default;
+$kendo-actionsheet-header-gap: map.get( $kendo-spacing, 4 ) !default;
 
 
 /// Background color of the action sheet header.
@@ -101,16 +101,16 @@ $kendo-actionsheet-subtitle-text: var( --kendo-subtle-text, inherit ) !default;
 $kendo-actionsheet-item-min-height: 40px !default;
 /// Horiozontal padding of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-actionsheet-item-padding-x: map.get( $kendo-spacing, 4 ) !default;
 /// Vertical padding of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Border around the action sheet item.
 /// @group action-sheet
 $kendo-actionsheet-item-border-width: 1px !default;
 /// Spacing between the icon and the text in the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-spacing: map-get( $kendo-spacing, 2 ) !default;
+$kendo-actionsheet-item-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Size of the action sheet item icon.
 /// @group action-sheet
@@ -187,7 +187,7 @@ $kendo-actionsheet-item-disabled-border: var( --kendo-disabled-border, inherit )
 $kendo-adaptive-actionsheet-header-border-width: 1px !default;
 /// Vertical padding of the adaptive action sheet titlebar.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-header-padding-y: map-get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-header-padding-y: map.get( $kendo-spacing, 4 ) !default;
 /// Horizontal padding of the adaptive action sheet titlebar.
 /// @group action-sheet
 $kendo-adaptive-actionsheet-header-padding-x: $kendo-adaptive-actionsheet-header-padding-y !default;
@@ -197,14 +197,14 @@ $kendo-adaptive-actionsheet-header-border: var( --kendo-component-border, initia
 
 /// Vertical padding of the adaptive action sheet content.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-content-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-adaptive-actionsheet-content-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Horizontal padding of the adaptive action sheet content.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-content-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-content-padding-x: map.get( $kendo-spacing, 4 ) !default;
 
 /// Vertical padding of the adaptive action sheet footer.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-footer-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-adaptive-actionsheet-footer-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Horizontal padding of the adaptive action sheet footer.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-footer-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-adaptive-actionsheet-footer-padding-x: map.get( $kendo-spacing, 4 ) !default;

package/scss/action-sheet/index.scss

@@ -10,9 +10,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/adaptive/_layout.scss

@@ -1,8 +1,8 @@
-@use "../core/_variables.scss" as *;
-@use "../core/color-system/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "../listgroup/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-adaptive--layout() {
 
@@ -17,7 +17,7 @@
         display: block;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         .k-pane {
             width: 100%;
@@ -46,7 +46,7 @@
             align-content: stretch;
             vertical-align: top;
             -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: $rgba-transparent;
+            -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
         }
 
         .k-content {
@@ -116,14 +116,7 @@
         }
 
         .k-header a {
-            -webkit-touch-callout: none;
-
-            -webkit-user-select: none;
-            -moz-user-select: none;
             user-select: none;
-
-            -webkit-user-drag: none;
-            -moz-user-drag: none;
         }
     }
 
@@ -173,7 +166,7 @@
         }
 
         .k-scheduler-toolbar {
-            padding: $kendo-toolbar-padding-y $kendo-toolbar-padding-x;
+            padding: $kendo-toolbar-padding-y-md $kendo-toolbar-padding-x-md;
 
             > * {
                 margin: 0;
@@ -198,10 +191,6 @@
                     justify-content: space-evenly;
                     gap: 0;
                 }
-                .k-m-date-format {}
-                .k-y-date-format {
-                    font-size: 12px;
-                }
             }
 
             .k-scheduler-views-wrapper {
@@ -212,7 +201,7 @@
         }
 
         .k-scheduler-footer {
-            padding: $kendo-toolbar-padding-y $kendo-toolbar-padding-x;
+            padding: $kendo-toolbar-padding-y-md $kendo-toolbar-padding-x-md;
             display: flex;
             justify-content: space-between;
 
@@ -366,7 +355,7 @@
     .k-pane-wrapper {
 
         .k-appbar {
-            padding: map-get( $kendo-spacing, 1 );
+            padding: map.get( $kendo-spacing, 1 );
         }
 
         .k-list-title,
@@ -388,15 +377,15 @@
             }
         }
         .k-listgroup + .k-listgroup {
-            margin-top: map-get( $kendo-spacing, 4 );
+            margin-top: map.get( $kendo-spacing, 4 );
         }
 
         // Column menu
         .k-column-menu {
-            padding: map-get( $kendo-spacing, 2 );
+            padding: map.get( $kendo-spacing, 2 );
             display: flex;
             flex-flow: column nowrap;
-            gap: map-get( $kendo-spacing, 2 );
+            gap: map.get( $kendo-spacing, 2 );
 
             .k-filter-item .k-filterable * {
                 pointer-events: none;
@@ -408,16 +397,16 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{map-get( $kendo-spacing, 2 )};
+                margin-inline: -#{map.get( $kendo-spacing, 2 )};
             }
         }
 
         // Filter menu
         .k-filter-menu {
-            padding: map-get( $kendo-spacing, 2 );
+            padding: map.get( $kendo-spacing, 2 );
             display: flex;
             flex-flow: column nowrap;
-            gap: map-get( $kendo-spacing, 2 );
+            gap: map.get( $kendo-spacing, 2 );
 
             .k-list-title {
                 padding: 0;
@@ -437,7 +426,7 @@
             }
 
             .k-listgroup {
-                margin-inline: -#{map-get( $kendo-spacing, 2 )};
+                margin-inline: -#{map.get( $kendo-spacing, 2 )};
             }
         }
 

package/scss/adaptive/_theme.scss

@@ -1,5 +1,5 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-adaptive--theme() {
 

package/scss/adaptive/_variables.scss

@@ -1,4 +1,4 @@
-@use "../core/color-system" as *;
+@use "../core/" as *;
 
 
 // Adaptive
@@ -10,7 +10,7 @@ $kendo-adaptive-content-bg: var( --kendo-component-bg, inherit ) !default;
 $kendo-adaptive-content-text: var( --kendo-component-text, inherit ) !default;
 
 $kendo-adaptive-menu-bg: get-theme-color-var( primary-100 ) !default;
-$kendo-adaptive-menu-text: $white !default;
+$kendo-adaptive-menu-text: $kendo-color-white !default;
 
 $kendo-adaptive-menu-clear-text: get-theme-color-var( primary-100 ) !default;
 

package/scss/adaptive/index.scss

@@ -12,9 +12,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/all.scss

@@ -1,4 +1,4 @@
-@use "index.scss" as kendo-theme;
+@use "./index.scss" as kendo-theme;
 
 @include kendo-theme.config();
 @include kendo-theme.styles();

package/scss/appbar/_layout.scss

@@ -1,5 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/color-system" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-appbar--layout() {
 
@@ -23,7 +23,7 @@
         align-items: center;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/appbar/_theme.scss

@@ -1,5 +1,6 @@
-@use "../core/color-system" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-appbar--theme() {
 
@@ -22,9 +23,9 @@
     // AppBar theme colors
     @each $theme-color, $color-props in $kendo-appbar-theme-colors {
 
-        $_text: map-get( $color-props, text );
-        $_bg: map-get( $color-props, bg );
-        $_border: map-get( $color-props, border );
+        $_text: map.get( $color-props, text );
+        $_bg: map.get( $color-props, bg );
+        $_border: map.get( $color-props, border );
 
         .k-appbar-#{$theme-color} {
             --kendo-appbar-text: var( --kendo-appbar-#{$theme-color}-text, #{$_text} );

package/scss/appbar/_variables.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
-@use "../core/color-system" as *;
-@use "../core/variables" as *;
+@use "../core/" as *;
 
 /// Background color of the appbar.
 /// @group appbar
@@ -20,10 +19,10 @@ $kendo-appbar-margin-y: 0 !default;
 $kendo-appbar-margin-x: 0 !default;
 /// Vertical padding of the appbar.
 /// @group appbar
-$kendo-appbar-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// Horizontal padding of the appbar.
 /// @group appbar
-$kendo-appbar-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Width of the border around the appbar.
 /// @group appbar
 $kendo-appbar-border-width: 0px !default;
@@ -43,7 +42,7 @@ $kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// Content spacing of the appbar.
 /// @group appbar
-$kendo-appbar-spacing: map-get( $kendo-spacing, 2 ) !default;
+$kendo-appbar-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Theme variations for the appbar.
 $kendo-appbar-brand-colors: (
@@ -53,27 +52,27 @@ $kendo-appbar-brand-colors: (
     info: info,
     secondary: neutral,
     tertiary: tertiary,
- );
+ ) !default;
 
 // Matrix with appbar theme colors in the order: bg, color, border
 $_tc-appbar-matrix: (
-    (normal: (100, $white, 100)),
-);
+    (normal: (100, $kendo-color-white, 100)),
+) !default;
 
 $_tc-appbar-warning-matrix: (
     (normal: (100, get-theme-color-var( neutral-160 ), 100)),
-);
+) !default;
 
 $_tc-appbar-dark-matrix: (
-    (normal: (160, $white, 160)),
-);
+    (normal: (160, $kendo-color-white, 160)),
+) !default;
 
 $_tc-appbar-light-matrix: (
     (normal: (50, 160, 50)),
-);
+) !default;
 
 /// Theme colors map for the appbar variations.
-$kendo-appbar-theme-colors: ();
+$kendo-appbar-theme-colors: () !default;
 
 @each $ui-states in $_tc-appbar-matrix {
     @each $brand-color, $palette in $kendo-appbar-brand-colors {

package/scss/appbar/index.scss

@@ -8,12 +8,12 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system" as module;
+@use "../core/module-system/" as module;
 @include module.register($_kendo-module-meta... );
 
 // Expose

package/scss/autocomplete/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/avatar/_layout.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-avatar--layout() {
 

package/scss/avatar/_theme.scss

@@ -1,13 +1,14 @@
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "./_variables.scss" as *;
 
 @mixin kendo-avatar--theme() {
 
     @each $fill-mode, $theme-colors in $kendo-avatar-theme-colors {
         @each $theme-color, $color-props in $theme-colors {
 
-            $_text-color: map-get( $color-props, text );
-            $_bg: map-get( $color-props, bg );
-            $_border-color: map-get( $color-props, border );
+            $_text-color: map.get( $color-props, text );
+            $_bg: map.get( $color-props, bg );
+            $_border-color: map.get( $color-props, border );
 
             .k-avatar-#{$fill-mode}-#{$theme-color} {
                 color: var( --kendo-avatar-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );

package/scss/avatar/_variables.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
-@use "../core/color-system" as *;
-@use "../core/variables" as *;
+@use "../core/" as *;
 
 /// Border width of the avatar.
 /// @group avatar
@@ -19,9 +18,9 @@ $kendo-avatar-line-height: var( --kendo-line-height, inherit ) !default;
 /// The sizes of the avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
-    sm: map-get( $kendo-spacing, 4 ),
-    md: map-get( $kendo-spacing, 8 ),
-    lg: map-get( $kendo-spacing, 16 )
+    sm: map.get( $kendo-spacing, 4 ),
+    md: map.get( $kendo-spacing, 8 ),
+    lg: map.get( $kendo-spacing, 16 )
 ) !default;
 
 // Theme variations for the avatar.
@@ -32,47 +31,47 @@ $kendo-avatar-brand-colors: (
     info: info,
     secondary: neutral,
     tertiary: tertiary,
- );
+ ) !default;
 
 // Matrix with avatar theme colors in the order: bg, color, border
 $_tc-avatar-matrix: (
     solid: (
-        normal: (100, $white, 100)
+        normal: (100, $kendo-color-white, 100)
     ),
     outline: (
-        normal: ($white, 100, 100)
+        normal: ($kendo-color-white, 100, 100)
     )
-);
+) !default;
 
 $_tc-avatar-warning-matrix: (
     solid: (
         normal: (100, get-theme-color-var( neutral-160 ), 100)
     ),
     outline: (
-        normal: ($white, 100, 100)
+        normal: ($kendo-color-white, 100, 100)
     )
-);
+) !default;
 
 $_tc-avatar-dark-matrix: (
     solid: (
-        normal: (160, $white, 160)
+        normal: (160, $kendo-color-white, 160)
     ),
     outline: (
-        normal: ($white, 160, 160)
+        normal: ($kendo-color-white, 160, 160)
     )
-);
+) !default;
 
 $_tc-avatar-light-matrix: (
     solid: (
-        normal: (50, $white, 50)
+        normal: (50, $kendo-color-white, 50)
     ),
     outline: (
-        normal: ($white, 50, 50)
+        normal: ($kendo-color-white, 50, 50)
     )
-);
+) !default;
 
 /// Theme colors map for the avatar variations.
-$kendo-avatar-theme-colors: ();
+$kendo-avatar-theme-colors: () !default;
 
 @each $fill-mode, $ui-states in $_tc-avatar-matrix {
     @each $brand-color, $palette in $kendo-avatar-brand-colors {

package/scss/avatar/index.scss

@@ -8,9 +8,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;