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

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.1.1-dev.2",
+    "version": "14.2.0-0",
     "previewColors": [
         "oklch(98.51% 0.0001 0deg)",
         "oklch(100.00% 0.0001 0deg)",

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": "14.1.1-dev.2",
+  "version": "14.2.0-0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -55,12 +55,11 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.9.0",
-    "@progress/kendo-theme-core": "14.1.1-dev.2",
-    "@progress/kendo-theme-utils": "14.1.1-dev.2"
+    "@progress/kendo-theme-core": "14.2.0-0",
+    "@progress/kendo-theme-utils": "14.2.0-0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
-  },
-  "gitHead": "7e6facaaa79799eaccdc502e3afc4c0a0c19be0a"
+  }
 }

package/scss/diagram/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-diagram--styles() {
+    @include import-once( "diagram" ) {
+        @include core-styles();
+        @include kendo-diagram--layout();
+        @include kendo-diagram--theme();
+    }
+}

package/scss/diagram/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/diagram/_layout.scss" as *;
+
+
+@mixin kendo-diagram--layout() {
+    @include kendo-diagram--layout-base();
+}

package/scss/diagram/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/diagram/_theme.scss" as *;
+
+
+@mixin kendo-diagram--theme() {
+    @include kendo-diagram--theme-base();
+}

package/scss/diagram/_variables.scss

@@ -0,0 +1 @@
+@use "../core/_index.scss" as *;

package/scss/drawer/_variables.scss

@@ -34,18 +34,9 @@ $kendo-drawer-content-padding-y: var( --kendo-drawer-content-padding-y, null ) !
 /// The width of the Drawer scrollbar.
 /// @group drawer
 $kendo-drawer-scrollbar-width: var( --kendo-drawer-scrollbar-width, 7px ) !default;
-/// The color of the Drawer scrollbar.
-/// @group drawer
-$kendo-drawer-scrollbar-color: var( --kendo-drawer-scrollbar-color, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
-/// The background of the Drawer scrollbar.
-/// @group drawer
-$kendo-drawer-scrollbar-bg: var( --kendo-drawer-scrollbar-bg, k-color(base-subtle) ) !default;
 /// The border radius of the Drawer scrollbar.
 /// @group drawer
 $kendo-drawer-scrollbar-radius: var( --kendo-drawer-scrollbar-radius, 20px ) !default;
-/// The hover color of the Drawer scrollbar.
-/// @group drawer
-$kendo-drawer-scrollbar-hover-color: var( --kendo-drawer-scrollbar-hover-color, $kendo-drawer-scrollbar-color ) !default;
 
 /// The horizontal padding of the Drawer items.
 /// @group drawer
@@ -176,10 +167,7 @@ $kendo-drawer-item-selected-hover-text: var( --kendo-drawer-item-selected-hover-
     $kendo-drawer-content-padding-x: $kendo-drawer-content-padding-x,
     $kendo-drawer-content-padding-y: $kendo-drawer-content-padding-y,
     $kendo-drawer-scrollbar-width: $kendo-drawer-scrollbar-width,
-    $kendo-drawer-scrollbar-color: $kendo-drawer-scrollbar-color,
-    $kendo-drawer-scrollbar-bg: $kendo-drawer-scrollbar-bg,
     $kendo-drawer-scrollbar-radius: $kendo-drawer-scrollbar-radius,
-    $kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-hover-color,
     $kendo-drawer-items-padding-x: $kendo-drawer-items-padding-x,
     $kendo-drawer-items-padding-y: $kendo-drawer-items-padding-y,
     $kendo-drawer-item-padding-x: $kendo-drawer-item-padding-x,

package/scss/grid/_index.scss

@@ -1,7 +1,6 @@
 // Dependencies
 @use "../core/_index.scss" as *;
 @use "../utils/_index.scss" as *;
-@use "../adaptive/_index.scss" as *;
 @use "../progressbar/_index.scss" as *;
 @use "../button/_index.scss" as *;
 @use "../action-buttons/_index.scss" as *;
@@ -35,7 +34,6 @@
 @mixin kendo-grid--styles() {
     @include import-once( "grid" ) {
         @include core-styles();
-        @include kendo-adaptive--styles();
         @include kendo-progressbar--styles();
         @include kendo-button--styles();
         @include kendo-action-buttons--styles();

package/scss/index.scss

@@ -94,7 +94,6 @@
 @forward "./splitter/_index.scss";
 @forward "./tilelayout/_index.scss";
 @forward "./dock-manager/_index.scss";
-@forward "./adaptive/_index.scss";
 @forward "./grid/_index.scss";
 @forward "./listview/_index.scss";
 @forward "./spreadsheet/_index.scss";
@@ -283,7 +282,6 @@
 
 
 // Misc
-@use "./adaptive/index.scss" as *;
 @use "./file-box/index.scss" as *;
 @use "./chat/index.scss" as *;
 @use "./mediaplayer/index.scss" as *;
@@ -299,6 +297,7 @@
 
 // Dataviz
 @use "./dataviz/index.scss" as *;
+@use "./diagram/_index.scss" as *;
 @use "./map/index.scss" as *;
 @use "./orgchart/index.scss" as *;
 @use "./signature/index.scss" as *;
@@ -461,7 +460,6 @@
 
 
     // Misc
-    @include kendo-adaptive--styles();
     @include kendo-file-box--styles();
     @include kendo-chat--styles();
     @include kendo-media-player--styles();
@@ -477,6 +475,7 @@
 
     // Dataviz
     @include kendo-dataviz--styles();
+    @include kendo-diagram--styles();
     @include kendo-map--styles();
     @include kendo-orgchart--styles();
     @include kendo-signature--styles();

package/scss/scheduler/_index.scss

@@ -2,7 +2,11 @@
 @use "../core/_index.scss" as *;
 @use "../icons/_index.scss" as *;
 @use "../utils/_index.scss" as *;
-@use "../adaptive/_index.scss" as *;
+@use "../listgroup/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../radio/_index.scss" as *;
+@use "../switch/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
 @use "../button/_index.scss" as *;
 @use "../datetimepicker/_index.scss" as *;
 @use "../dropdownlist/_index.scss" as *;
@@ -20,7 +24,11 @@
     @include import-once( "scheduler" ) {
         @include core-styles();
         @include kendo-icon--styles();
-        @include kendo-adaptive--styles();
+        @include kendo-listgroup--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-radio--styles();
+        @include kendo-switch--styles();
+        @include kendo-toolbar--styles();
         @include kendo-button--styles();
         @include kendo-date-time-picker--styles();
         @include kendo-dropdown-list--styles();

package/scss/scheduler/_variables.scss

@@ -260,6 +260,23 @@ $kendo-scheduler-more-btn-height: var( --kendo-scheduler-more-btn-height, 13px )
 /// The color of the Scheduler marquee.
 /// @group scheduler
 $kendo-scheduler-marquee-color: var( --kendo-scheduler-marquee-color, k-color(primary) ) !default;
+// Adaptive
+$kendo-scheduler-adaptive-bg: var( --kendo-scheduler-adaptive-bg, #{k-color(surface-alt)} ) !default;
+$kendo-scheduler-adaptive-text: var( --kendo-scheduler-adaptive-text, #{k-color(on-app-surface)} ) !default;
+$kendo-scheduler-adaptive-border: var( --kendo-scheduler-adaptive-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+
+$kendo-scheduler-adaptive-content-bg: var( --kendo-scheduler-adaptive-content-bg, #{k-color(surface-alt)} ) !default;
+
+$kendo-scheduler-adaptive-menu-clear-text: var( --kendo-scheduler-adaptive-menu-clear-text, #{k-color(primary-on-surface)} ) !default;
+
+$kendo-scheduler-adaptive-border-width: var( --kendo-scheduler-adaptive-border-width, 1px ) !default;
+$kendo-scheduler-adaptive-font-family: var( --kendo-scheduler-adaptive-font-family, var(--kendo-font-family) ) !default;
+$kendo-scheduler-adaptive-font-size: var( --kendo-scheduler-adaptive-font-size, var(--kendo-font-size) ) !default;
+$kendo-scheduler-adaptive-line-height: var( --kendo-scheduler-adaptive-line-height, var(--kendo-line-height) ) !default;
+
+$kendo-scheduler-adaptive-current-text: var( --kendo-scheduler-adaptive-current-text, #{k-color(primary-on-surface)} ) !default;
+$kendo-scheduler-adaptive-base-text: var( --kendo-scheduler-adaptive-base-text, inherit ) !default;
+$kendo-scheduler-adaptive-subtle-text: var( --kendo-scheduler-adaptive-subtle-text, #{k-color(on-app-surface)} ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/scheduler/_variables.scss" with (
     $kendo-scheduler-border-width: $kendo-scheduler-border-width,
@@ -331,5 +348,17 @@ $kendo-scheduler-marquee-color: var( --kendo-scheduler-marquee-color, k-color(pr
     $kendo-scheduler-tooltip-event-padding-y: $kendo-scheduler-tooltip-event-padding-y,
     $kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-tooltip-event-border-radius,
     $kendo-scheduler-tooltip-event-gap: $kendo-scheduler-tooltip-event-gap,
-    $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-callout-color
+    $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-callout-color,
+    $kendo-scheduler-adaptive-bg: $kendo-scheduler-adaptive-bg,
+    $kendo-scheduler-adaptive-text: $kendo-scheduler-adaptive-text,
+    $kendo-scheduler-adaptive-border: $kendo-scheduler-adaptive-border,
+    $kendo-scheduler-adaptive-content-bg: $kendo-scheduler-adaptive-content-bg,
+    $kendo-scheduler-adaptive-menu-clear-text: $kendo-scheduler-adaptive-menu-clear-text,
+    $kendo-scheduler-adaptive-border-width: $kendo-scheduler-adaptive-border-width,
+    $kendo-scheduler-adaptive-font-family: $kendo-scheduler-adaptive-font-family,
+    $kendo-scheduler-adaptive-font-size: $kendo-scheduler-adaptive-font-size,
+    $kendo-scheduler-adaptive-line-height: $kendo-scheduler-adaptive-line-height,
+    $kendo-scheduler-adaptive-current-text: $kendo-scheduler-adaptive-current-text,
+    $kendo-scheduler-adaptive-base-text: $kendo-scheduler-adaptive-base-text,
+    $kendo-scheduler-adaptive-subtle-text: $kendo-scheduler-adaptive-subtle-text
 );

package/scss/slider/_layout.scss

@@ -117,7 +117,7 @@
         }
         .k-slider-thumb:focus,
         .k-slider-thumb:active {
-            transform: translate(-50%, -50%) scale($kendo-slider-thumb-active-scale);
+            transform: if( $kendo-slider-thumb-active-scale, translate(-50%, -50%) scale($kendo-slider-thumb-active-scale), null );
         }
         .k-slider-thumb-start {
             inset-inline-start: calc( var( --kendo-slider-start, 0) * 1% );

package/scss/timeline/_theme.scss

@@ -16,25 +16,6 @@
                 background-color: $kendo-timeline-card-header-bg;
                 color: $kendo-timeline-card-header-text;
             }
-
-            .k-card-body {
-
-                // Scrollbar styles for Mozilla
-                scrollbar-color: $kendo-timeline-card-body-scroll-border $kendo-timeline-card-body-scroll-bg;
-
-                // Scrollbar styles for Chrome, Safari and Opera
-                &::-webkit-scrollbar-track {
-                    background: $kendo-timeline-card-body-scroll-bg;
-                }
-
-                &::-webkit-scrollbar-thumb {
-                    background: $kendo-timeline-card-body-scroll-bg;
-                }
-
-                &::-webkit-scrollbar-thumb:hover {
-                    background: $kendo-timeline-card-scroll-thumb-hover;
-                }
-            }
         }
 
         // TODO: remove

package/scss/timeline/_variables.scss

@@ -133,15 +133,6 @@ $kendo-timeline-card-header-bg: var( --kendo-timeline-card-header-bg, k-color(su
 /// The text color of the Timeline's Card header.
 /// @group timeline
 $kendo-timeline-card-header-text: var( --kendo-timeline-card-header-text, k-color(on-app-surface) ) !default;
-/// The border of the Timeline's Card body scroll.
-/// @group timeline
-$kendo-timeline-card-body-scroll-border: var( --kendo-timeline-card-body-scroll-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
-/// The background color of the Timeline's Card body scroll.
-/// @group timeline
-$kendo-timeline-card-body-scroll-bg: var( --kendo-timeline-card-body-scroll-bg, k-color(surface-alt) ) !default;
-/// The color of the Timeline's hovered card scroll thumb.
-/// @group timeline
-$kendo-timeline-card-scroll-thumb-hover: var( --kendo-timeline-card-scroll-thumb-hover, color-mix(in srgb, k-color(border) 10%, transparent) ) !default;
 
 /// The text color of the Timeline date body.
 /// @group timeline

package/scss/adaptive/_index.scss

@@ -1,26 +0,0 @@
-// Dependencies (TODO: extract variables)
-@use "../core/_index.scss" as *;
-@use "../listgroup/_index.scss" as *;
-@use "../checkbox/_index.scss" as *;
-@use "../radio/_index.scss" as *;
-@use "../switch/_index.scss" as *;
-@use "../toolbar/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-adaptive--styles() {
-    @include import-once( "adaptive" ) {
-        @include core-styles();
-        @include kendo-listgroup--styles();
-        @include kendo-checkbox--styles();
-        @include kendo-radio--styles();
-        @include kendo-switch--styles();
-        @include kendo-toolbar--styles();
-        @include kendo-adaptive--layout();
-        @include kendo-adaptive--theme();
-    }
-}

package/scss/adaptive/_layout.scss

@@ -1,10 +0,0 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "../toolbar/_variables.scss" as *;
-@use "../listgroup/_variables.scss" as *;
-@use "./_variables.scss" as *;
-@use "@progress/kendo-theme-core/scss/components/adaptive/_layout.scss" as *;
-
-@mixin kendo-adaptive--layout() {
-    @include kendo-adaptive--layout-base();
-}

package/scss/adaptive/_theme.scss

@@ -1,19 +0,0 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-@use "@progress/kendo-theme-core/scss/components/adaptive/_theme.scss" as *;
-
-@mixin kendo-adaptive--theme() {
-    @include kendo-adaptive--theme-base();
-
-    .k-pane-wrapper .k-pane {
-        .k-grid-mobile {
-            .k-column-active + th.k-header {
-                border-inline-start-color: k-color(surface-alt);
-            }
-
-            .k-resize-handle-inner::before {
-                background-color: k-color(surface-alt);
-            }
-        }
-    }
-}

package/scss/adaptive/_variables.scss

@@ -1,90 +0,0 @@
-@use "../core/_index.scss" as *;
-
-
-// Adaptive
-/// The background color of the Adaptive component.
-/// @group adaptive
-$kendo-adaptive-bg: var( --kendo-adaptive-bg, #{k-color(surface-alt)} ) !default;
-/// The text color of the Adaptive component.
-/// @group adaptive
-$kendo-adaptive-text: var( --kendo-adaptive-text, #{k-color(on-app-surface)} ) !default;
-/// The border color of the Adaptive component.
-/// @group adaptive
-$kendo-adaptive-border: var( --kendo-adaptive-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
-
-/// The background color of the Adaptive content.
-/// @group adaptive
-$kendo-adaptive-content-bg: var( --kendo-adaptive-content-bg, #{k-color(surface-alt)} ) !default;
-/// The text color of the Adaptive content.
-/// @group adaptive
-$kendo-adaptive-content-text: var( --kendo-adaptive-content-text, #{k-color(on-app-surface)} ) !default;
-
-/// The background color of the Adaptive menu.
-/// @group adaptive
-$kendo-adaptive-menu-bg: var( --kendo-adaptive-menu-bg, #{k-color(primary)} ) !default;
-/// The text color of the Adaptive menu.
-/// @group adaptive
-$kendo-adaptive-menu-text: var( --kendo-adaptive-menu-text, #{k-color(app-surface)} ) !default;
-
-/// The text color of the Adaptive menu clear button.
-/// @group adaptive
-$kendo-adaptive-menu-clear-text: var( --kendo-adaptive-menu-clear-text, #{k-color(primary-on-surface)} ) !default;
-
-/// The border color of the Adaptive menu item.
-/// @group adaptive
-$kendo-adaptive-menu-item-border: var( --kendo-adaptive-menu-item-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
-/// The text color of the Adaptive menu title.
-/// @group adaptive
-$kendo-adaptive-menu-title-text: var( --kendo-adaptive-menu-title-text, #{k-color(on-app-surface)} ) !default;
-
-/// The width of the border around the Adaptive component.
-/// @group adaptive
-$kendo-adaptive-border-width: var( --kendo-adaptive-border-width, 1px ) !default;
-/// The font family of the Adaptive component.
-/// @group adaptive
-$kendo-adaptive-font-family: var( --kendo-adaptive-font-family, var(--kendo-font-family) ) !default;
-/// The font size of the Adaptive component.
-/// @group adaptive
-$kendo-adaptive-font-size: var( --kendo-adaptive-font-size, var(--kendo-font-size) ) !default;
-/// The line height of the Adaptive component.
-/// @group adaptive
-$kendo-adaptive-line-height: var( --kendo-adaptive-line-height, var(--kendo-line-height) ) !default;
-
-
-// Adaptive Grid
-/// The text color of the Adaptive Grid sort indicator.
-/// @group adaptive
-$kendo-adaptive-grid-sort-text: var( --kendo-adaptive-grid-sort-text, #{k-color(primary-on-surface)} ) !default;
-
-
-// Adaptive Scheduler
-/// The text color of the current date in the Adaptive Scheduler.
-/// @group adaptive
-$kendo-adaptive-scheduler-current-text: var( --kendo-adaptive-scheduler-current-text, #{k-color(primary-on-surface)} ) !default;
-/// The base text color of the Adaptive Scheduler.
-/// @group adaptive
-$kendo-adaptive-scheduler-base-text: var( --kendo-adaptive-scheduler-base-text, inherit ) !default;
-/// The subtle text color of the Adaptive Scheduler.
-/// @group adaptive
-$kendo-adaptive-scheduler-subtle-text: var( --kendo-adaptive-scheduler-subtle-text, #{k-color(on-app-surface)} ) !default;
-
-@forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with (
-    $kendo-adaptive-bg: $kendo-adaptive-bg,
-    $kendo-adaptive-text: $kendo-adaptive-text,
-    $kendo-adaptive-border: $kendo-adaptive-border,
-    $kendo-adaptive-content-bg: $kendo-adaptive-content-bg,
-    $kendo-adaptive-content-text: $kendo-adaptive-content-text,
-    $kendo-adaptive-menu-bg: $kendo-adaptive-menu-bg,
-    $kendo-adaptive-menu-text: $kendo-adaptive-menu-text,
-    $kendo-adaptive-menu-clear-text: $kendo-adaptive-menu-clear-text,
-    $kendo-adaptive-menu-item-border: $kendo-adaptive-menu-item-border,
-    $kendo-adaptive-menu-title-text: $kendo-adaptive-menu-title-text,
-    $kendo-adaptive-border-width: $kendo-adaptive-border-width,
-    $kendo-adaptive-font-family: $kendo-adaptive-font-family,
-    $kendo-adaptive-font-size: $kendo-adaptive-font-size,
-    $kendo-adaptive-line-height: $kendo-adaptive-line-height,
-    $kendo-adaptive-grid-sort-text: $kendo-adaptive-grid-sort-text,
-    $kendo-adaptive-scheduler-current-text: $kendo-adaptive-scheduler-current-text,
-    $kendo-adaptive-scheduler-base-text: $kendo-adaptive-scheduler-base-text,
-    $kendo-adaptive-scheduler-subtle-text: $kendo-adaptive-scheduler-subtle-text
-);