@progress/kendo-theme-fluent 12.0.0-dev.1 → 12.0.0-dev.3

package/lib/swatches/fluent-main.json

@@ -3,13 +3,13 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.0-dev.1",
+    "version": "12.0.0-dev.3",
     "previewColors": [
+        "#fafafa",
         "#ffffff",
-        "#faf9f8",
-        "#0078d4",
-        "#979593",
-        "#323130"
+        "#0f6cbd",
+        "#707070",
+        "#242424"
     ],
     "components": [],
     "groups": []

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": "12.0.0-dev.1",
+  "version": "12.0.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "12.0.0-dev.1",
-    "@progress/kendo-theme-utils": "12.0.0-dev.1"
+    "@progress/kendo-theme-core": "12.0.0-dev.3",
+    "@progress/kendo-theme-utils": "12.0.0-dev.3"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "794f481c97a5e59caeb7c91030f0a7853aa2db19"
+  "gitHead": "e8490bcd2120186030a02c459cb027ae415d281c"
 }

package/scss/action-buttons/_variables.scss

@@ -3,10 +3,10 @@
 
 /// Horizontal padding of the action buttons container.
 /// @group action-buttons
-$kendo-actions-padding-x: var( --kendo-actions-padding-x, #{k-spacing(3)} ) !default;
+$kendo-actions-padding-x: var( --kendo-actions-padding-x, k-spacing(3) ) !default;
 /// Vertical padding of the action buttons container.
 /// @group action-buttons
-$kendo-actions-padding-y: var( --kendo-actions-padding-y, #{k-spacing(3)} ) !default;
+$kendo-actions-padding-y: var( --kendo-actions-padding-y, k-spacing(3) ) !default;
 /// Width of the border around the action buttons container.
 /// @group action-buttons
 $kendo-actions-border-width: var( --kendo-actions-border-width, 0px ) !default;
@@ -22,7 +22,7 @@ $kendo-actions-border: var( --kendo-actions-border, inherit ) !default;
 
 /// Spacing between the action buttons.
 /// @group action-buttons
-$kendo-actions-button-spacing: var( --kendo-actions-button-spacing, #{k-spacing(2)} ) !default;
+$kendo-actions-button-spacing: var( --kendo-actions-button-spacing, k-spacing(3) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/action-buttons/_variables.scss" with (
     $kendo-actions-padding-x: $kendo-actions-padding-x,

package/scss/action-sheet/_layout.scss

@@ -19,22 +19,22 @@
 
     .k-actionsheet-top {
         border-width: $kendo-actionsheet-border-width;
-        border-top-width: 0;
+        border-block-start-width: 0;
     }
 
     .k-actionsheet-bottom {
         border-width: $kendo-actionsheet-border-width;
-        border-bottom-width: 0;
+        border-block-end-width: 0;
     }
 
     .k-actionsheet-left {
         border-width: $kendo-actionsheet-border-width;
-        border-left-width: $kendo-actionsheet-border-width;
+        border-inline-start-width: $kendo-actionsheet-border-width;
     }
 
     .k-actionsheet-right {
         border-width: $kendo-actionsheet-border-width;
-        border-right-width: 0;
+        border-inline-end-width: 0;
     }
 
     .k-adaptive-actionsheet .k-coloreditor {

package/scss/action-sheet/_theme.scss

@@ -5,27 +5,11 @@
 @mixin kendo-action-sheet--theme() {
     @include kendo-action-sheet--theme-base();
 
-    .k-actionsheet-header,
-    .k-actionsheet-titlebar {
-        color: $kendo-actionsheet-header-text;
-        background-color: $kendo-actionsheet-header-bg;
-        border-color: $kendo-actionsheet-header-border;
-        @include box-shadow( $kendo-actionsheet-header-shadow );
-    }
-
     .k-actionsheet-subtitle {
         color: inherit;
     }
 
-    .k-actionsheet-item-icon {
-        color: $kendo-actionsheet-item-icon-color;
-    }
-
     .k-actionsheet-item {
-        color: var( --kendo-actionsheet-item-text, inherit );
-        background-color: var( --kendo-actionsheet-item-bg, inherit );
-        border-color: var( --kendo-actionsheet-item-border, inherit );
-        outline-color: var( --kendo-actionsheet-item-outline, inherit );
 
         &:focus,
         &.k-focus {

package/scss/action-sheet/_variables.scss

@@ -3,10 +3,10 @@
 
 /// Horizontal padding of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-padding-x: var( --kendo-actionsheet-padding-x, #{k-spacing(0)} ) !default;
+$kendo-actionsheet-padding-x: var( --kendo-actionsheet-padding-x, #{k-spacing(1)} ) !default;
 /// Vertical padding of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-padding-y: var( --kendo-actionsheet-padding-y, #{k-spacing(0)} ) !default;
+$kendo-actionsheet-padding-y: var( --kendo-actionsheet-padding-y, #{k-spacing(1)} ) !default;
 /// Width of the action sheet.
 /// @group action-sheet
 $kendo-actionsheet-width: var( --kendo-actionsheet-width, 360px ) !default;
@@ -81,7 +81,7 @@ $kendo-actionsheet-header-bg: var( --kendo-actionsheet-header-bg, inherit ) !def
 $kendo-actionsheet-header-text: var( --kendo-actionsheet-header-text, inherit ) !default;
 /// Border color of the action sheet header.
 /// @group action-sheet
-$kendo-actionsheet-header-border: var( --kendo-actionsheet-header-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-actionsheet-header-border: var( --kendo-actionsheet-header-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// Box shadow of the action sheet header.
 /// @group action-sheet
 $kendo-actionsheet-header-shadow: var( --kendo-actionsheet-header-shadow, none ) !default;
@@ -108,7 +108,7 @@ $kendo-actionsheet-footer-bg: var( --kendo-actionsheet-footer-bg, null ) !defaul
 $kendo-actionsheet-footer-text: var( --kendo-actionsheet-footer-text, null ) !default;
 /// Border color of the action sheet footer.
 /// @group action-sheet
-$kendo-actionsheet-footer-border: var( --kendo-actionsheet-footer-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-actionsheet-footer-border: var( --kendo-actionsheet-header-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// Box shadow of the action sheet footer.
 /// @group action-sheet
 $kendo-actionsheet-footer-shadow: var( --kendo-actionsheet-footer-shadow, null ) !default;
@@ -118,20 +118,16 @@ $kendo-actionsheet-footer-shadow: var( --kendo-actionsheet-footer-shadow, null )
 $kendo-actionsheet-item-min-height: var( --kendo-actionsheet-item-min-height, 40px ) !default;
 /// Horiozontal padding of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-padding-x: var( --kendo-actionsheet-item-padding-x, #{k-spacing(4)} ) !default;
+$kendo-actionsheet-item-padding-x: var( --kendo-actionsheet-item-padding-x, #{k-spacing(1.5)} ) !default;
 /// Vertical padding of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-padding-y: var( --kendo-actionsheet-item-padding-y, #{k-spacing(2)} ) !default;
+$kendo-actionsheet-item-padding-y: var( --kendo-actionsheet-item-padding-y, #{k-spacing(1.5)} ) !default;
 /// Border around the action sheet item.
 /// @group action-sheet
 $kendo-actionsheet-item-border-width: var( --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: var( --kendo-actionsheet-item-spacing, #{k-spacing(2)} ) !default;
-
-/// Color of the action sheet item icon.
-/// @group action-sheet
-$kendo-actionsheet-item-icon-color: var( --kendo-actionsheet-item-icon-color, #{k-color(primary)} ) !default;
+$kendo-actionsheet-item-spacing: var( --kendo-actionsheet-item-spacing, #{k-spacing(1)} ) !default;
 
 /// Font weight of the action sheet item text.
 /// @group action-sheet
@@ -146,6 +142,9 @@ $kendo-actionsheet-item-description-font-size: var( --kendo-actionsheet-item-des
 /// Color of the action sheet item description.
 /// @group action-sheet
 $kendo-actionsheet-item-description-text: var( --kendo-actionsheet-item-description-text, #{k-color(subtle)} ) !default;
+/// Line height of the action sheet item description.
+/// @group action-sheet
+$kendo-actionsheet-item-description-line-height: var( --kendo-actionsheet-item-description-line-height, var( --kendo-line-height-lg, inherit ) ) !default;
 
 /// Hover background color of the action sheet item.
 /// @group action-sheet
@@ -171,7 +170,7 @@ $kendo-actionsheet-item-focus-border: var( --kendo-actionsheet-item-focus-border
 $kendo-actionsheet-item-focus-outline: var( --kendo-actionsheet-item-focus-outline, var( --kendo-outline-color, inherit ) ) !default;
 /// Focus outline width of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-focus-outline-width: var( --kendo-actionsheet-item-focus-outline-width, 1px ) !default;
+$kendo-actionsheet-item-focus-outline-width: var( --kendo-actionsheet-item-focus-outline-width, 2px ) !default;
 
 /// Focus and hover background color of the action sheet item.
 /// @group action-sheet
@@ -268,6 +267,7 @@ $kendo-adaptive-actionsheet-footer-padding-x: var( --kendo-adaptive-actionsheet-
     $kendo-actionsheet-item-title-text-transform: $kendo-actionsheet-item-title-text-transform,
     $kendo-actionsheet-item-description-font-size: $kendo-actionsheet-item-description-font-size,
     $kendo-actionsheet-item-description-text: $kendo-actionsheet-item-description-text,
+    $kendo-actionsheet-item-description-line-height: $kendo-actionsheet-item-description-line-height,
     $kendo-actionsheet-item-hover-bg: $kendo-actionsheet-item-hover-bg,
     $kendo-actionsheet-item-hover-text: $kendo-actionsheet-item-hover-text,
     $kendo-actionsheet-item-hover-border: $kendo-actionsheet-item-hover-border,

package/scss/adaptive/_theme.scss

@@ -8,7 +8,7 @@
     .k-pane-wrapper .k-pane {
         .k-grid-mobile {
             .k-column-active + th.k-header {
-                border-left-color: k-color(surface-alt);
+                border-inline-start-color: k-color(surface-alt);
             }
 
             .k-resize-handle-inner::before {

package/scss/appbar/_theme.scss

@@ -10,7 +10,15 @@
     .k-appbar-base {
         color: $kendo-appbar-text;
         background-color: $kendo-appbar-bg;
-        border-color: $kendo-appbar-border;
+    }
+
+    .k-appbar {
+        border-bottom: 1px solid $kendo-appbar-border;
+    }
+
+    .k-appbar.k-appbar-bottom {
+        border-bottom: none;
+        border-top: 1px solid $kendo-appbar-border;
     }
 
     .k-appbar-inherit {

package/scss/appbar/_variables.scss

@@ -9,10 +9,10 @@ $kendo-appbar-margin-x: var( --kendo-appbar-margin-x, k-spacing(0) ) !default;
 $kendo-appbar-margin-y: var( --kendo-appbar-margin-y, k-spacing(0) ) !default;
 /// The horizontal padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-x: var( --kendo-appbar-padding-x, k-spacing(2) ) !default;
+$kendo-appbar-padding-x: var( --kendo-appbar-padding-x, k-spacing(5) ) !default;
 /// The vertical padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-y: var( --kendo-appbar-padding-y, k-spacing(2) ) !default;
+$kendo-appbar-padding-y: var( --kendo-appbar-padding-y, k-spacing(3.5) ) !default;
 /// The width of the border around the AppBar.
 /// @group appbar
 $kendo-appbar-border-width: var( --kendo-appbar-border-width, 0px ) !default;
@@ -41,7 +41,21 @@ $kendo-appbar-text: var( --kendo-appbar-text, k-color(on-app-surface) ) !default
 $kendo-appbar-bg: var( --kendo-appbar-bg, k-color(surface) ) !default;
 /// The border color of the AppBar.
 /// @group appbar
-$kendo-appbar-border: var( --kendo-appbar-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-appbar-border: var( --kendo-appbar-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
+
+/// The background color of the AppBar based on light theme color.
+/// @group appbar
+$kendo-appbar-light-bg: k-color(light) !default;
+/// The text color of the AppBar based on light theme color.
+/// @group appbar
+$kendo-appbar-light-text: k-color(on-light) !default;
+
+/// The background color of the AppBar based on dark theme color.
+/// @group appbar
+$kendo-appbar-dark-bg: k-color(dark) !default;
+/// The text color of the AppBar based on dark theme color.
+/// @group appbar
+$kendo-appbar-dark-text: k-color(on-dark) !default;
 
 /// The theme colors map for the AppBar variations.
 /// @group appbar
@@ -69,5 +83,9 @@ $kendo-appbar-theme-colors: (
     $kendo-appbar-font-size: $kendo-appbar-font-size,
     $kendo-appbar-line-height: $kendo-appbar-line-height,
     $kendo-appbar-gap: $kendo-appbar-spacing,
+    $kendo-appbar-light-bg: $kendo-appbar-light-bg,
+    $kendo-appbar-dark-bg: $kendo-appbar-dark-bg,
+    $kendo-appbar-light-text: $kendo-appbar-light-text,
+    $kendo-appbar-dark-text: $kendo-appbar-dark-text,
     $kendo-appbar-theme-colors: $kendo-appbar-theme-colors
 );

package/scss/badge/_theme.scss

@@ -15,4 +15,10 @@
     .k-badge-outline-base {
         border-color: $kendo-badge-border;
     }
+
+    @each $name, $color in $kendo-badge-theme-colors {
+        .k-badge-outline-#{$name} {
+            color: k-color(#{$name}-on-surface);
+        }
+    }
 }

package/scss/badge/_variables.scss

@@ -17,14 +17,14 @@ $kendo-badge-border-width: var( --kendo-badge-border-width, 1px ) !default;
 
 /// The font weight of the Badge.
 /// @group badge
-$kendo-badge-font-weight: var( --kendo-badge-font-weight, var( --kendo-font-weight, normal ) ) !default;
+$kendo-badge-font-weight: var( --kendo-badge-font-weight, var( --kendo-font-weight-semibold, normal ) ) !default;
 
 /// Horizontal padding of the small Badge.
 /// @group badge
-$kendo-badge-sm-padding-x: k-spacing(0.5) !default;
+$kendo-badge-sm-padding-x: k-spacing(1.5) !default;
 /// Horizontal padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-x: var( --kendo-badge-padding-x, k-spacing(1) ) !default;
+$kendo-badge-md-padding-x: var( --kendo-badge-padding-x, k-spacing(1.5) ) !default;
 /// Horizontal padding of the large Badge.
 /// @group badge
 $kendo-badge-lg-padding-x: k-spacing(1.5) !default;
@@ -47,7 +47,7 @@ $kendo-badge-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
 $kendo-badge-md-font-size: var( --kendo-badge-font-size, var( --kendo-font-size-xs, inherit ) ) !default;
 /// The font size of the large Badge.
 /// @group badge
-$kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-lg-font-size: var( --kendo-font-size-sm, inherit ) !default;
 
 /// The line height used along with the $kendo-font-size variable of the small Badge.
 /// @group badge
@@ -57,7 +57,7 @@ $kendo-badge-sm-line-height: var( --kendo-line-height-xs, normal ) !default;
 $kendo-badge-md-line-height: var( --kendo-badge-line-height, var( --kendo-line-height-xs, normal ) ) !default;
 /// The line height used along with the $kendo-font-size variable of the large Badge.
 /// @group badge
-$kendo-badge-lg-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-badge-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The calculated minimum width of the small circular Badge.
 /// @group badge

package/scss/bottom-navigation/_layout.scss

@@ -2,22 +2,5 @@
 @use "@progress/kendo-theme-core/scss/components/bottom-navigation/_layout.scss" as *;
 
 @mixin kendo-bottom-navigation--layout() {
-
     @include kendo-bottom-navigation--layout-base();
-
-    // Items
-    .k-bottom-nav-item {
-        position: relative;
-
-        &:focus::after,
-        &.k-focus::after {
-            content: "";
-            position: absolute;
-            border: medium none;
-            inset: $kendo-bottom-nav-item-focus-offset;
-            outline-width: $kendo-bottom-nav-item-focus-outline-width;
-            outline-style: $kendo-bottom-nav-item-focus-outline-style;
-            z-index: 1;
-        }
-    }
 }

package/scss/bottom-navigation/_theme.scss

@@ -19,7 +19,7 @@
                     color: k-color(on-#{$name});
                     background-color: k-color(#{$name});
                     border-color: k-color(#{$name});
-                    outline-color: inherit;
+                    box-shadow: 0 0 0 2px k-color(border-alt) inset, 0 0 0 3px k-color(surface) inset;
                 }
 
                 &:active,
@@ -40,14 +40,6 @@
         }
     }
 
-    .k-bottom-nav-solid-warning,
-    .k-bottom-nav-solid-light {
-         .k-bottom-nav-item:focus::after,
-         .k-bottom-nav-item.k-focus::after {
-            outline-color: k-color(app-surface);
-         }
-    }
-
     @each $name, $color in $kendo-bottom-navigation-theme-colors {
         .k-bottom-nav-flat-#{$name} {
             color: k-color(on-app-surface);
@@ -57,16 +49,16 @@
             .k-bottom-nav-item {
                 &:focus,
                 &.k-focus {
-                    color: k-color(#{$name});
+                    color: k-color(#{$name}-on-surface);
                     background-color: inherit;
                     border-color: transparent;
-                    outline-color: k-color(#{$name});
+                    box-shadow: 0 0 0 2px k-color(border-alt) inset;
                 }
 
                 &:active,
                 &.k-active,
                 &.k-selected {
-                    color: k-color(#{$name});
+                    color: k-color(#{$name}-on-surface);
                     background-color: inherit;
                     border-color: transparent;
                 }

package/scss/bottom-navigation/_variables.scss

@@ -48,16 +48,6 @@ $kendo-bottom-nav-item-border-radius: var( --kendo-bottom-nav-item-border-radius
 /// @group bottom-navigation
 $kendo-bottom-nav-item-gap: var( --kendo-bottom-nav-item-gap, k-spacing(1) ) !default;
 
-/// The offset of the focused BottomNavigation item.
-/// @group bottom-navigation
-$kendo-bottom-nav-item-focus-offset: var( --kendo-bottom-nav-item-focus-offset, k-spacing(0.5) ) !default;
-/// The outline width of the focused BottomNavigation item.
-/// @group bottom-navigation
-$kendo-bottom-nav-item-focus-outline-width: var( --kendo-bottom-nav-item-focus-outline-width, 1px ) !default;
-/// The outline style of the focused BottomNavigation item.
-/// @group bottom-navigation
-$kendo-bottom-nav-item-focus-outline-style: var( --kendo-bottom-nav-item-focus-outline-style, solid ) !default;
-
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-4, none ) !default;

package/scss/breadcrumb/_layout.scss

@@ -7,23 +7,11 @@
 
     @include kendo-breadcrumb--layout-base();
 
-    // Breadcrumb
-    .k-breadcrumb {
-        font-size: $kendo-breadcrumb-font-size;
-        line-height: $kendo-breadcrumb-line-height;
-    }
-
     // Breadcrumb links
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
        &.k-selected {
             font-weight: $kendo-breadcrumb-link-selected-font-weight;
        }
-
-       &:disabled,
-       &.k-disabled {
-            background: $kendo-breadcrumb-link-disabled-bg;
-            border: $kendo-breadcrumb-link-disabled-border
-       }
     }
 }

package/scss/breadcrumb/_theme.scss

@@ -21,18 +21,18 @@
         // Focused state
         &:focus,
         &.k-focus {
-            // Focus-hover state
-            &:hover,
-            &.k-hover {
-                @include fill( $bg: $kendo-breadcrumb-link-focus-hover-bg );
-            }
+            background: $kendo-breadcrumb-link-focus-bg;
         }
 
         // Disabled state
         &:disabled,
         &[disabled],
         &.k-disabled {
-            @include fill( $color: $kendo-breadcrumb-link-disabled-text );
+            @include fill(
+                $kendo-breadcrumb-link-disabled-text,
+                $kendo-breadcrumb-link-disabled-bg,
+                $kendo-breadcrumb-link-disabled-border
+            );
         }
 
         // Selected state
@@ -57,21 +57,34 @@
             );
         }
 
-        // Focused state
-        &:focus,
-        &.k-focus {
-            // Focus-hover state
-            &:hover,
-            &.k-hover {
-                @include fill( $bg: $kendo-breadcrumb-root-link-focus-hover-bg );
-            }
-        }
-
         // Disabled state
         &:disabled,
         &[disabled],
         &.k-disabled {
-            @include fill( $color: $kendo-breadcrumb-root-link-disabled-text );
+            @include fill(
+                $kendo-breadcrumb-root-link-disabled-text,
+                $kendo-breadcrumb-root-link-disabled-bg,
+                $kendo-breadcrumb-root-link-disabled-border
+            );
+        }
+    }
+
+    .k-breadcrumb-icontext-link,
+    .k-breadcrumb-icon-link {
+
+        &:hover,
+        &.k-hover {
+
+            .k-icon {
+                color: k-color(primary-hover);
+            }
+        }
+        &:active,
+        &.k-selected {
+
+            .k-icon {
+                color: k-color(primary-active);
+            }
         }
     }