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

package/scss/drawer/_layout.scss

@@ -9,6 +9,7 @@
     // Drawer items - only border-radius is unique to fluent
     .k-drawer-items {
         border-radius: $kendo-drawer-item-border-radius;
+        gap: $kendo-drawer-items-gap;
     }
 
     // Drawer items - unique fluent properties
@@ -20,10 +21,13 @@
             border-width: 0;
             border-inline-start-width: $kendo-drawer-item-ripple-border-width;
             border-style: solid;
-            height: 100%;
+            border-radius: $kendo-drawer-item-ripple-border-radius;
+            height: $kendo-drawer-item-ripple-border-height;
             display: block;
             position: absolute;
-            inset-block-start: 0;
+            inset-block-start: 50%;
+            inset-inline-start: $kendo-drawer-item-ripple-spacing-x;
+            transform: translateY(-50%);
             z-index: 2;
             opacity: 0;
             transition: opacity .3s;
@@ -42,10 +46,10 @@
     }
 
     :is(.k-drawer-start, .k-drawer-left) .k-drawer-item::before {
-        inset-inline-start: 0;
+        inset-inline-start: $kendo-drawer-item-ripple-spacing-x;
     }
 
     :is(.k-drawer-end, .k-drawer-right) .k-drawer-item::before {
-        inset-inline-end: 0;
+        inset-inline-end: $kendo-drawer-item-ripple-spacing-x;
     }
 }

package/scss/drawer/_theme.scss

@@ -5,7 +5,7 @@
 @mixin kendo-drawer--theme() {
 
     @include kendo-drawer--theme-base();
-    
+
     // Drawer items - unique fluent styling
     .k-drawer-item {
         @include fill(
@@ -67,7 +67,9 @@
         }
     }
 
-    .k-drawer-separator {
+    .k-drawer-separator,
+    .k-drawer-separator:hover,
+    .k-drawer-separator.k-hover {
         background-color: $kendo-drawer-border;
     }
 

package/scss/drawer/_variables.scss

@@ -4,16 +4,16 @@
 
 /// The background color of the Drawer.
 /// @group drawer
-$kendo-drawer-bg: var( --kendo-drawer-bg, k-color(surface-alt) ) !default;
+$kendo-drawer-bg: var( --kendo-drawer-bg, k-color(secondary-subtle) ) !default;
 /// The text color of the Drawer.
 /// @group drawer
 $kendo-drawer-text: var( --kendo-drawer-text, k-color(on-app-surface) )!default;
 /// The border color of the Drawer.
 /// @group drawer
-$kendo-drawer-border: var( --kendo-drawer-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-drawer-border: var( --kendo-drawer-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The border width of the Drawer.
 /// @group drawer
-$kendo-drawer-border-width: var( --kendo-drawer-border-width, 1px ) !default;
+$kendo-drawer-border-width: var( --kendo-drawer-border-width, 0 ) !default;
 /// The font family of the Drawer.
 /// @group drawer
 $kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
@@ -49,10 +49,14 @@ $kendo-drawer-scrollbar-hover-color: var( --kendo-drawer-scrollbar-hover-color,
 
 /// The horizontal padding of the Drawer items.
 /// @group drawer
-$kendo-drawer-items-padding-x: var( --kendo-drawer-items-padding-x, 0 ) !default;
+$kendo-drawer-items-padding-x: var( --kendo-drawer-items-padding-x, k-spacing(2.5) ) !default;
 /// The vertical padding of the Drawer items.
 /// @group drawer
-$kendo-drawer-items-padding-y: var( --kendo-drawer-items-padding-y, 0 ) !default;
+$kendo-drawer-items-padding-y: var( --kendo-drawer-items-padding-y, k-spacing(2.5) ) !default;
+/// The spacing between the Drawer items.
+/// @group drawer
+$kendo-drawer-items-gap: var( --kendo-drawer-items-gap, k-spacing(0.5) ) !default;
+
 /// The horizontal padding of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-padding-x: var( --kendo-drawer-item-padding-x, k-spacing(4) ) !default;
@@ -80,7 +84,7 @@ $kendo-drawer-item-level-padding-x: var( --kendo-drawer-item-level-padding-x, k-
 $kendo-drawer-item-level-count: 5 !default;
 /// The border radius of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-border-radius: var( --kendo-drawer-item-border-radius, null ) !default;
+$kendo-drawer-item-border-radius: var( --kendo-drawer-item-border-radius, k-border-radius(md) ) !default;
 
 /// The horizontal padding of the Drawer icon.
 /// @group drawer
@@ -91,12 +95,21 @@ $kendo-drawer-icon-padding-y: var( --kendo-drawer-icon-padding-y, k-spacing(1) )
 
 /// The initial width of the mini Drawer.
 /// @group drawer
-$kendo-drawer-mini-initial-width: calc( 2 * #{k-spacing(4)} + var( --kendo-icon-size, 1rem ) )  !default;
+$kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + 2 * #{$kendo-drawer-items-padding-x} + var( --kendo-icon-size, 1rem ) )  !default;
 
 /// The border width of the Drawer item ripple.
 /// @group drawer
+$kendo-drawer-item-ripple-border-width: var( --kendo-drawer-item-ripple-border-width, k-spacing(1) ) !default;
+/// The border height of the Drawer item ripple.
+/// @group drawer
+$kendo-drawer-item-ripple-border-height: var( --kendo-drawer-item-ripple-border-height, k-spacing(5) ) !default;
+/// The border radius of the Drawer item ripple.
+/// @group drawer
+$kendo-drawer-item-ripple-border-radius: var( --kendo-drawer-item-ripple-border-radius, k-border-radius(md) ) !default;
+/// The horizontal spacing of the Drawer item ripple.
+/// @group drawer
+$kendo-drawer-item-ripple-spacing-x: var( --kendo-drawer-item-ripple-spacing-x, k-spacing(0.5) ) !default;
 
-$kendo-drawer-item-ripple-border-width: var( --kendo-drawer-item-ripple-border-width, k-spacing(0.5) ) !default;
 /// The border color of the drawer item ripple
 /// @group drawer
 $kendo-drawer-item-ripple-border: var( --kendo-drawer-item-ripple-border, k-color(primary) ) !default;
@@ -108,17 +121,17 @@ $kendo-drawer-item-bg: var( --kendo-drawer-item-bg, $kendo-drawer-bg ) !default;
 $kendo-drawer-item-text: var( --kendo-drawer-item-text, $kendo-drawer-text ) !default;
 /// The text color of the Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-icon-text: var( --kendo-drawer-icon-text, k-color(primary) ) !default;
+$kendo-drawer-item-icon-text: var( --kendo-drawer-icon-text, $kendo-drawer-text ) !default;
 
 /// The background color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-hover-bg: var( --kendo-drawer-item-hover-bg, $kendo-drawer-item-bg ) !default;
+$kendo-drawer-item-hover-bg: var( --kendo-drawer-item-hover-bg, k-color(surface-alt) ) !default;
 /// The text color of the hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-hover-text: var( --kendo-drawer-item-hover-text, k-color(primary-hover) ) !default;
+$kendo-drawer-item-hover-text: var( --kendo-drawer-item-hover-text, $kendo-drawer-item-text ) !default;
 /// The text color of the hovered Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-hover-icon-text: var( --kendo-drawer-item-hover-icon-text, k-color(primary-hover) ) !default;
+$kendo-drawer-item-hover-icon-text: var( --kendo-drawer-item-hover-icon-text, $kendo-drawer-item-icon-text ) !default;
 
 /// The background color of the focused Drawer item.
 /// @group drawer
@@ -128,29 +141,29 @@ $kendo-drawer-item-focus-bg: var( --kendo-drawer-item-focus-bg, $kendo-drawer-it
 $kendo-drawer-item-focus-text: var( --kendo-drawer-item-focus-text, $kendo-drawer-item-text ) !default;
 /// The box shadow of the focused Drawer item.
 /// @group drawer
-$kendo-drawer-item-focus-shadow: var( --kendo-drawer-item-focus-shadow, inset 0 0 0 1px k-color(base-emphasis) ) !default;
+$kendo-drawer-item-focus-shadow: var( --kendo-drawer-item-focus-shadow, inset 0 0 0 2px k-color(border-alt) ) !default;
 /// The text color of the focused Drawer item icon.
 /// @group drawer
 $kendo-drawer-item-focus-icon-text: var( --kendo-drawer-item-focus-icon-text, $kendo-drawer-item-icon-text ) !default;
 
 /// The font weight of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-font-weight: var( --kendo-drawer-item-selected-font-weight, var( --kendo-font-weight-bold, normal ) ) !default;
+$kendo-drawer-item-selected-font-weight: var( --kendo-drawer-item-selected-font-weight, var( --kendo-font-weight-semibold, 600 ) ) !default;
 /// The background color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-bg: var( --kendo-drawer-item-selected-bg, k-color(base-active) ) !default;
+$kendo-drawer-item-selected-bg: var( --kendo-drawer-item-selected-bg, $kendo-drawer-item-bg ) !default;
 /// The text color of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-text: var( --kendo-drawer-item-selected-text, k-color(on-app-surface) ) !default;
+$kendo-drawer-item-selected-text: var( --kendo-drawer-item-selected-text, $kendo-drawer-item-text ) !default;
 /// The text color of the selected Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-selected-icon-text: var( --kendo-drawer-item-selected-icon-text, k-color(primary-active) ) !default;
+$kendo-drawer-item-selected-icon-text: var( --kendo-drawer-item-selected-icon-text, k-color(primary) ) !default;
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-hover-bg: var( --kendo-drawer-item-selected-hover-bg, k-color(base-subtle-active) ) !default;
+$kendo-drawer-item-selected-hover-bg: var( --kendo-drawer-item-selected-hover-bg, k-color(surface-alt) ) !default;
 /// The text color of the selected and hovered Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-hover-text: var( --kendo-drawer-item-selected-hover-text, k-color(on-base) ) !default;
+$kendo-drawer-item-selected-hover-text: var( --kendo-drawer-item-selected-hover-text, $kendo-drawer-item-text ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/drawer/_variables.scss" with (
     $kendo-drawer-bg: $kendo-drawer-bg,

package/scss/dropzone/_layout.scss

@@ -17,6 +17,7 @@
         .k-dropzone-note {
             margin-block-end: $kendo-dropzone-note-spacing;
             font-weight: $kendo-dropzone-note-font-weight;
+            line-height: var( --kendo-line-height-lg, normal );
         }
     }
 }

package/scss/dropzone/_variables.scss

@@ -39,17 +39,17 @@ $kendo-dropzone-border: var( --kendo-dropzone-border, #{color-mix(in srgb, k-col
 $kendo-dropzone-icon-spacing: var( --kendo-dropzone-icon-spacing, #{k-spacing(6)} ) !default;
 /// The text color of the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-text: var( --kendo-dropzone-icon-text, #{k-color(subtle)} ) !default;
+$kendo-dropzone-icon-text: var( --kendo-dropzone-icon-text, color-mix(in srgb, #{k-color(on-app-surface)} 30%, transparent) ) !default;
 /// Text color of the icon when the dropzone is hovered.
 /// @group dropzone
 $kendo-dropzone-icon-hover-text: var( --kendo-dropzone-icon-hover-text, #{k-color(primary)} ) !default;
 
 /// The font size of the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-font-size: var( --kendo-dropzone-hint-font-size, inherit ) !default;
+$kendo-dropzone-hint-font-size: var( --kendo-dropzone-hint-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The font weight of the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-font-weight: var( --kendo-dropzone-hint-font-weight, var( --kendo-font-weight-bold, bold ) ) !default;
+$kendo-dropzone-hint-font-weight: var( --kendo-dropzone-hint-font-weight, var( --kendo-font-weight-semibold, 600 ) ) !default;
 /// The spacing below the DropZone hint.
 /// @group dropzone
 $kendo-dropzone-hint-spacing: var( --kendo-dropzone-hint-spacing, #{k-spacing(2)} ) !default;

package/scss/expansion-panel/_layout.scss

@@ -37,15 +37,6 @@
     // Multiple expanders
     .k-expander + .k-expander.k-expanded,
     .k-expander.k-expanded + .k-expander {
-        margin-top: $kendo-expander-margin-y;
-    }
-
-    .k-rtl .k-expander,
-    .k-expander.k-rtl,
-    .k-expander[dir="rtl"] {
-        // Expand / collapse icon
-        .k-expander-indicator {
-            margin-inline-end: $kendo-icon-spacing;
-        }
+        margin-block-start: $kendo-expander-margin-y;
     }
 }

package/scss/expansion-panel/_theme.scss

@@ -13,8 +13,13 @@
 
         &.k-focus,
         &:focus {
-            box-shadow: none;
-            background-color: $kendo-expander-focus-bg;
+            box-shadow: $kendo-expander-focus-shadow;
+
+            .k-expander-title {
+                @include fill(
+                    $color: k-color(primary),
+                );
+            }
 
             &::after {
                 outline-color: $kendo-expander-focus-outline;
@@ -33,7 +38,6 @@
             .k-expander-indicator {
                 @include fill(
                     $color: $kendo-expander-disabled-text,
-                    $bg: $kendo-expander-disabled-bg
                 );
             }
         }

package/scss/expansion-panel/_variables.scss

@@ -25,7 +25,7 @@ $kendo-expander-text: var( --kendo-expander-text, k-color(on-app-surface) ) !def
 $kendo-expander-bg: var( --kendo-expander-bg, k-color(surface) ) !default;
 /// The border color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-border: var( --kendo-expander-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-expander-border: var( --kendo-expander-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The background color of the expanded ExpansionPanel.
 /// @group expander
@@ -33,41 +33,35 @@ $kendo-expander-expanded-bg: var( --kendo-expander-expanded-bg, k-color(surface-
 
 /// The text color of the disabled ExpansionPanel.
 /// @group expander
-$kendo-expander-disabled-text: var( --kendo-expander-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
-/// The background color of the disabled ExpansionPanel.
-/// @group expander
-$kendo-expander-disabled-bg: var( --kendo-expander-disabled-bg, k-color(base-subtle) ) !default;
+$kendo-expander-disabled-text: var( --kendo-expander-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
+
 
 /// The offset of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-offset: var( --kendo-expander-focus-offset, 1px ) !default;
+$kendo-expander-focus-offset: var( --kendo-expander-focus-offset, 2px ) !default;
 /// The outline width of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-outline-width: var( --kendo-expander-focus-outline-width, 1px ) !default;
+$kendo-expander-focus-outline-width: var( --kendo-expander-focus-outline-width, 2px ) !default;
 /// The outline style of the focused ExpansionPanel.
 /// @group expander
 $kendo-expander-focus-outline-style: var( --kendo-expander-focus-outline-style, solid ) !default;
 /// The outline color of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-outline: var( --kendo-expander-focus-outline, k-color(base-emphasis) ) !default;
-
-/// The background color of the focused ExpansionPanel.
-/// @group expander
-$kendo-expander-focus-bg: var( --kendo-expander-focus-bg, k-color(surface-alt) ) !default;
+$kendo-expander-focus-outline: var( --kendo-expander-focus-outline, inherit ) !default;
 /// The box shadow of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-shadow: var( --kendo-expander-focus-shadow, inset 0px 0px 0px 2px k-color(base-emphasis) ) !default;
+$kendo-expander-focus-shadow: var( --kendo-expander-focus-shadow, none ) !default;
 
 /// The horizontal padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-x: var( --kendo-expander-header-padding-x, k-spacing(4) ) !default;
+$kendo-expander-header-padding-x: var( --kendo-expander-header-padding-x, k-spacing(3) ) !default;
 /// The vertical padding of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-padding-y: var( --kendo-expander-header-padding-y, k-spacing(3) ) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-text: var( --kendo-expander-header-text, k-color(primary) ) !default;
+$kendo-expander-header-text: var( --kendo-expander-header-text, k-color(on-app-surface) ) !default;
 /// The background color of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-bg: var( --kendo-expander-header-bg, inherit ) !default;
@@ -78,7 +72,7 @@ $kendo-expander-header-hover-bg: var( --kendo-expander-header-hover-bg, k-color(
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: var( --kendo-expander-title-text, k-color(primary) ) !default;
+$kendo-expander-title-text: var( --kendo-expander-title-text, k-color(on-app-surface) ) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander
@@ -86,17 +80,17 @@ $kendo-expander-header-sub-title-text: var( --kendo-expander-header-sub-title-te
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander
-$kendo-expander-indicator-margin-x: var( --kendo-expander-indicator-margin-x, k-spacing(2.5) ) !default;
+$kendo-expander-indicator-margin-x: var( --kendo-expander-indicator-margin-x, k-spacing(2) ) !default;
 /// The text color of the ExpansionPanel indicator.
 /// @group expander
-$kendo-expander-indicator-text: var( --kendo-expander-indicator-text, $kendo-expander-text ) !default;
+$kendo-expander-indicator-text: var( --kendo-expander-indicator-text, k-color(subtle) ) !default;
 
 /// The horizontal padding of the ExpansionPanel content.
 /// @group expander
-$kendo-expander-content-padding-x: var( --kendo-expander-content-padding-x, k-spacing(4) ) !default;
+$kendo-expander-content-padding-x: var( --kendo-expander-content-padding-x, k-spacing(3) ) !default;
 /// The vertical padding of the ExpansionPanel content.
 /// @group expander
-$kendo-expander-content-padding-y: var( --kendo-expander-content-padding-y, k-spacing(4) ) !default;
+$kendo-expander-content-padding-y: var( --kendo-expander-content-padding-y, k-spacing(3) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/expansion-panel/_variables.scss" with (
     $kendo-expander-border-width: $kendo-expander-border-width,

package/scss/fab/_layout.scss

@@ -1,24 +1,37 @@
+@use "sass:map";
 @use "./_variables.scss" as *;
+@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/fab/_layout.scss" as *;
 
 @mixin kendo-fab--layout() {
     @include kendo-fab--layout-base();
 
     .k-fab {
+        &:focus::before,
+        &.k-focus::before {
+            content: "";
+            position: absolute;
+            border: medium none;
+            inset: $kendo-fab-focus-offset;
+            outline-width: $kendo-fab-focus-outline-width;
+            outline-style: $kendo-fab-focus-outline-style;
+            z-index: 1;
+        }
 
         &:focus::after,
         &.k-focus::after {
             content: "";
             position: absolute;
             border: medium none;
-            inset: $kendo-fab-focus-offset;
-            outline-width: $kendo-fab-focus-outline-width;
+            inset: calc( #{ $kendo-fab-focus-offset} + 1px );
+            outline-width: calc( #{ $kendo-fab-focus-outline-width} - 1px );
             outline-style: $kendo-fab-focus-outline-style;
             z-index: 1;
         }
 
-        // Fix for focused FAB with full roundness
         &.k-rounded-full {
+            &:focus::before,
+            &.k-focus::before,
             &:focus::after,
             &.k-focus::after {
                border-radius: inherit;
@@ -27,17 +40,13 @@
     }
 
     .k-fab-item {
-        &:focus .k-fab-item-text::after,
-        &:focus .k-fab-item-icon::after,
-        &.k-focus .k-fab-item-text::after,
-        &.k-focus .k-fab-item-icon::after {
-            content: "";
-            position: absolute;
-            border: medium none;
-            inset: $kendo-fab-item-focus-offset;
-            outline-width: $kendo-fab-item-focus-outline-width;
-            outline-style: $kendo-fab-item-focus-outline-style;
-            z-index: 1;
+        &:focus .k-fab-item-text,
+        &:focus .k-fab-item-icon,
+        &.k-focus .k-fab-item-text,
+        &.k-focus .k-fab-item-icon {
+            outline-width: $kendo-fab-focus-outline-width;
+            outline-style: $kendo-fab-focus-outline-style;
+            outline-offset: calc( #{$kendo-fab-border-width} * 2 * -1);
         }
     }
 
@@ -49,9 +58,15 @@
 
     .k-fab-item-icon {
         border-style: $kendo-fab-item-icon-border-style;
+    }
 
-        &::after {
-            border-radius: inherit;
+    // Sizes
+    @each $size, $size-props in $kendo-fab-sizes {
+        $_gap: map.get( $size-props, gap );
+
+        .k-fab-#{$size} {
+            gap: $_gap;
         }
+
     }
 }

package/scss/fab/_theme.scss

@@ -26,11 +26,22 @@
             }
         }
 
+        &:focus::before,
+        &.k-focus::before {
+            outline-color: $kendo-fab-item-focus-outline;
+        }
+
+        &:focus::after,
+        &.k-focus::after {
+            outline-color: k-color(surface);
+        }
+
         &:disabled,
         &.k-disabled {
             color: $kendo-fab-disabled-text;
             background-color: $kendo-fab-disabled-bg;
             border-color: $kendo-fab-disabled-border;
+            box-shadow: none;
         }
     }
 
@@ -72,16 +83,12 @@
         // Focus
         &:focus,
         &.k-focus {
+            .k-fab-item-text,
             .k-fab-item-icon {
                 color: $kendo-fab-item-focus-text;
                 background-color: $kendo-fab-item-focus-bg;
                 border-color: $kendo-fab-item-focus-border;
-            }
-
-            .k-fab-item-text {
-                color: $kendo-fab-item-focus-text;
-                background-color: $kendo-fab-item-focus-bg;
-                border-color: $kendo-fab-item-focus-border;
+                outline-color: $kendo-fab-item-focus-outline;
             }
         }
 
@@ -112,9 +119,9 @@
         &:disabled .k-fab-item-text,
         &.k-disabled .k-fab-item-text {
             @include disabled(
-                color-mix(in srgb, k-color(on-app-surface) 46%, transparent),
-                k-color(base-subtle),
-                transparent
+                $kendo-fab-disabled-text,
+                $kendo-fab-disabled-bg,
+                $kendo-fab-disabled-border
             );
         }
     }