@progress/kendo-theme-fluent 5.8.2-dev.4 → 5.8.2-dev.6

package/scss/action-sheet/_layout.scss

@@ -3,13 +3,54 @@
 
 @mixin kendo-action-sheet--layout() {
     .k-actionsheet-container {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
+        max-width: unquote("max(100%, 100vw)");
+        max-height: unquote("max(100%, 100vh)");
         position: fixed;
         top: 0;
         left: 0;
         z-index: 9999;
         overflow: hidden;
+        transform: translateZ(0);
+    }
+
+    // Animation container
+    .k-actionsheet-container {
+
+        // Overlay
+        > .k-overlay {
+            position: absolute;
+            z-index: 1;
+        }
+
+        // Nested animation container
+        > .k-animation-container {
+            width: 100%;
+            height: 100%;
+            border-radius: 0;
+            overflow: hidden;
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+
+            > .k-child-animation-container {
+                position: absolute;
+            }
+        }
+
+        // No animation container
+        > .k-actionsheet {
+            position: absolute;
+            z-index: 2;
+        }
+
+        // Enable mouse events for action sheet
+        .k-actionsheet {
+            pointer-events: all;
+        }
     }
 
     // Actionsheet
@@ -18,6 +59,7 @@
         padding-block: var( --kendo-actionsheet-padding-y, #{$kendo-actionsheet-padding-y} );
         width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} );
         max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} );
+        height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} );
         max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} );
         border-width: 0;
         border-style: solid;
@@ -26,10 +68,8 @@
         font-size: var( --kendo-actionsheet-font-size, #{$kendo-actionsheet-font-size} );
         font-family: var( --kendo-actionsheet-font-family, #{$kendo-actionsheet-font-family} );
         line-height: var( --kendo-actionsheet-line-height, #{$kendo-actionsheet-line-height} );
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: fixed;
-        z-index: 10002;
+        overflow: hidden;
+        position: relative;
 
         *,
         *::before,
@@ -39,6 +79,8 @@
     }
 
     .k-actionsheet-fullscreen {
+        width: 100%;
+        max-width: 100%;
         max-height: 100%;
         height: 100%;
     }
@@ -57,21 +99,34 @@
         font-family: var( --kendo-actionsheet-header-font-family, #{$kendo-actionsheet-header-font-family} );
         line-height: var( --kendo-actionsheet-header-line-height, #{$kendo-actionsheet-header-line-height} );
         flex: none;
+        gap: var( --kendo-actionsheet-header-gap, #{$kendo-actionsheet-header-gap} );
     }
 
 
     // Actionsheet titlebar
     .k-actionsheet-titlebar {
         @extend .k-actionsheet-header !optional;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+    }
+
+    .k-actionsheet-titlebar-group {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
+        width: 100%;
     }
 
     .k-actionsheet-title {
         flex: 1;
     }
 
+    .k-actionsheet-subtitle {
+        font-size: var( --kendo-actionsheet-subtitle-font-size, #{$kendo-actionsheet-subtitle-font-size} );
+        line-height: var( --kendo-actionsheet-subtitle-line-height, #{$kendo-actionsheet-subtitle-line-height} );
+    }
+
     .k-actionsheet-actions {
         flex: none;
     }
@@ -81,6 +136,7 @@
     .k-actionsheet-content {
         flex: 1;
         overflow: auto;
+        position: relative;
     }
 
 
@@ -95,6 +151,7 @@
         margin: 0;
         padding: 0;
         list-style: none;
+        flex: none;
     }
 
 
@@ -102,6 +159,13 @@
     .k-actionsheet-item {
         padding: 0;
         box-sizing: border-box;
+
+        &:focus,
+        &.k-focus {
+            outline-width: var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} );
+            outline-style: solid;
+            outline-offset: calc( -1 * var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} ) );
+        }
     }
 
     .k-actionsheet-action {
@@ -115,16 +179,8 @@
         outline: 0;
         display: flex;
         flex-flow: row nowrap;
-        align-items: center;
+        align-items: flex-start;
         gap: var( --kendo-actionsheet-item-spacing, #{$kendo-actionsheet-item-spacing} );
-
-
-        &:focus,
-        &.k-focus {
-            outline-width: var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} );
-            outline-style: solid;
-            outline-offset: calc( -1 * var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} ) );
-        }
     }
 
     .k-actionsheet-item-icon {
@@ -150,6 +206,7 @@
     .k-actionsheet > .k-hr {
         margin: 0;
         border-color: inherit;
+        flex: none;
     }
 
 
@@ -210,6 +267,31 @@
         display: flex;
         flex-flow: column nowrap;
 
+        .k-actionsheet-titlebar {
+            padding-inline: var( --kendo-adaptive-actionsheet-header-padding-x, #{$kendo-adaptive-actionsheet-header-padding-x} );
+            padding-block: var( --kendo-adaptive-actionsheet-header-padding-y, #{$kendo-adaptive-actionsheet-header-padding-y} );
+            border-bottom-width: var( --kendo-adaptive-actionsheet-header-border-width, #{$kendo-adaptive-actionsheet-header-border-width} );
+        }
+
+        .k-actionsheet-content {
+            padding-inline: var( --kendo-adaptive-actionsheet-content-padding-x, #{$kendo-adaptive-actionsheet-content-padding-x} );
+            padding-block: var( --kendo-adaptive-actionsheet-content-padding-y, #{$kendo-adaptive-actionsheet-content-padding-y} );
+        }
+
+        .k-actionsheet-footer {
+            padding-inline: var( --kendo-adaptive-actionsheet-footer-padding-x, #{$kendo-adaptive-actionsheet-footer-padding-x} );
+            padding-block: var( --kendo-adaptive-actionsheet-footer-padding-y, #{$kendo-adaptive-actionsheet-footer-padding-y} );
+        }
+
+        .k-list-container,
+        .k-treeview {
+            height: 100%;
+        }
+        .k-list-filter {
+            width: 100%;
+            padding-inline: 0;
+        }
+
         .k-calendar {
             margin-inline: auto;
             border-width: 0;
@@ -229,5 +311,58 @@
                 height: 100%;
             }
         }
+
+        .k-datetime-wrap {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-flow: column nowrap;
+        }
+        .k-datetime-selector {
+            flex: 1 1 auto;
+        }
+
+        .k-datetime-calendar-wrap {
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            flex: 0 0 100%;
+        }
+
+        .k-datetime-time-wrap {
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 100%;
+            bottom: 0;
+            flex: 0 0 100%;
+        }
+
+        .k-scrollable-wrap {
+            height: 100%;
+            overflow-y: auto;
+        }
     }
 }
+
+@mixin kendo-action-sheet--layout-jq() {
+
+    .k-actionsheet-jq {
+        &.k-actionsheet {
+            height: auto;
+            position: relative;
+        }
+
+        .k-actionsheet-header {
+            @extend .k-actionsheet-titlebar !optional;
+            align-items: flex-start;
+        }
+
+        .k-actionsheet-action {
+            align-items: center;
+        }
+    }
+
+}

package/scss/action-sheet/_theme.scss

@@ -19,7 +19,9 @@
         border-color: var( --kendo-actionsheet-header-border, #{$kendo-actionsheet-header-border} );
         @include box-shadow( var( --kendo-actionsheet-header-shadow, #{$kendo-actionsheet-header-shadow} ) );
     }
-
+    .k-actionsheet-subtitle-text {
+        color: var( --kendo-actionsheet-subtitle-text, #{$kendo-actionsheet-subtitle-text} );
+    }
 
     // Actionsheet items
     .k-actionsheet-items {}
@@ -40,7 +42,7 @@
 
 
     // Actionsheet action
-    .k-actionsheet-action {
+    .k-actionsheet-item {
 
         color: var( --INTERNAL--kendo-actionsheet-item-text, inherit );
         background-color: var( --INTERNAL--kendo-actionsheet-item-bg, inherit );
@@ -86,4 +88,10 @@
             }
         }
     }
+
+    // Adaptive Actionsheet
+    .k-adaptive-actionsheet .k-actionsheet-titlebar {
+            border-color: var( --kendo-adaptive-actionsheet-header-border, #{$kendo-adaptive-actionsheet-header-border} );
+    }
+
 }

package/scss/action-sheet/_variables.scss

@@ -13,9 +13,12 @@ $kendo-actionsheet-width: 360px !default;
 /// Maximum width of the action sheet.
 /// @group action-sheet
 $kendo-actionsheet-max-width: 100% !default;
+/// Height of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-height: 60vh !default;
 /// Maximum height of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-max-height: 50vh !default;
+$kendo-actionsheet-max-height: 60vh !default;
 
 /// Border width around the action sheet.
 /// @group action-sheet
@@ -65,6 +68,10 @@ $kendo-actionsheet-header-font-family: inherit !default;
 /// Line height of the action sheet header.
 /// @group action-sheet
 $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;
+
 
 /// Background color of the action sheet header.
 /// @group action-sheet
@@ -79,6 +86,16 @@ $kendo-actionsheet-header-border: inherit !default;
 /// @group action-sheet
 $kendo-actionsheet-header-shadow: none !default;
 
+/// Font size of the action sheet subtitle.
+/// @group action-sheet
+$kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Line height of the action sheet subtitle.
+/// @group action-sheet
+$kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, inherit ) !default;
+/// Text color of the action sheet subtitle.
+/// @group action-sheet
+$kendo-actionsheet-subtitle-text: var( --kendo-subtle-text, inherit ) !default;
+
 /// Minimum height of the action sheet item.
 /// @group action-sheet
 $kendo-actionsheet-item-min-height: 40px !default;
@@ -161,3 +178,33 @@ $kendo-actionsheet-item-disabled-text: var( --kendo-disabled-text, inherit ) !de
 /// Disabled border color of the action sheet item.
 /// @group action-sheet
 $kendo-actionsheet-item-disabled-border: var( --kendo-disabled-border, inherit ) !default;
+
+
+// Adaptive Actionsheet
+
+/// Border width of the adaptive action sheet titlebar.
+/// @group action-sheet
+$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;
+/// Horizontal padding of the adaptive action sheet titlebar.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-header-padding-x: $kendo-adaptive-actionsheet-header-padding-y !default;
+/// Text color of the adaptive action sheet titlebar.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-header-border: var( --kendo-component-border, initial ) !default;
+
+/// Vertical padding of the adaptive action sheet content.
+/// @group action-sheet
+$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;
+
+/// Vertical padding of the adaptive action sheet footer.
+/// @group action-sheet
+$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;

package/scss/action-sheet/index.scss

@@ -22,6 +22,7 @@ $_kendo-module-meta: (
 @mixin styles() {
     @include module.render( "action-sheet" ) {
         @include kendo-action-sheet--layout();
+        @include kendo-action-sheet--layout-jq();
         @include kendo-action-sheet--theme();
     }
 }

package/scss/calendar/_layout.scss

@@ -412,7 +412,6 @@
             &::before {
                 content: "";
                 position: absolute;
-                z-index: 1;
                 inset: 0px;
                 border-style: solid;
                 border-width: var( --INTERNAL--kendo-calendar-range-border-width, 0 );

package/scss/calendar/_theme.scss

@@ -30,6 +30,12 @@
             &.k-focus {
                 color: var( --kendo-calendar-today-nav-hover-text, #{$kendo-calendar-today-nav-hover-text});
             }
+
+            &.k-disabled {
+                @include disabled(
+                    $color: var( --kendo-disabled-text, inherit )
+                );
+            }
         }
 
 
@@ -185,6 +191,7 @@
             --kendo-calendar-cell-bg: var( --kendo-calendar-range-bg, #{$kendo-calendar-range-bg} );
             --kendo-calendar-cell-text: var( --kendo-calendar-range-text, #{$kendo-calendar-range-text} );
             --kendo-calendar-cell-link-bg: transparent;
+            --kendo-calendar-cell-selected-bg: transparent;
             --kendo-calendar-cell-selected-shadow: none;
 
             &::before {

package/scss/color-preview/_layout.scss

@@ -49,6 +49,7 @@
     // Color Preview Mask
     .k-color-preview-mask {
         width: 100%;
+        min-width: var( --kendo-icon-size, 1rem );
         height: 100%;
         position: relative;
     }

package/scss/core/helpers/_base.scss

@@ -7,9 +7,8 @@
 .k-widget[disabled],
 .k-disabled {
     @include disabled(
-        var( --kendo-disabled-text, inherit ),
-        var( --kendo-disabled-bg, inherit ),
-        var( --kendo-disabled-border, inherit )
+        $color: var( --kendo-disabled-text, inherit ),
+        $border: var( --kendo-disabled-border, inherit )
     );
 
     .k-link {

package/scss/core/mixins/_hide-scrollbar.scss

@@ -1,8 +1,9 @@
+@use "../variables.scss" as *;
 // Infinite calendar and timepicker
 @mixin hide-scrollbar($max-scrollbar: 100px) {
     // anything larger than the scrollbar width will do
-    $scrollbar-size: 17px;
-    $margin: -$max-scrollbar - $scrollbar-size;
+    $scrollbar-size: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+    $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
 
     padding-inline-end: $max-scrollbar;
     padding-inline-start: $max-scrollbar;

package/scss/editor/_theme.scss

@@ -77,6 +77,13 @@
                 var( --kendo-editor-ct-popup-border, #{$kendo-editor-ct-popup-border} )
             );
         }
+
+        .k-disabled:not(.k-selected) {
+            @include disabled(
+                $bg: var( --kendo-disabled-bg, inherit ),
+                $border: var( --kendo-disabled-border, inherit )
+            );
+        }
     }
 
     // Content

package/scss/filter/_theme.scss

@@ -20,6 +20,12 @@
         .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
             background-color: var( --kendo-filter-line-bg, #{$kendo-filter-line-bg} );
         }
+
+        // Focus
+        .k-toolbar:focus,
+        .k-toolbar.k-focus {
+            border-color: var( --kendo-filter-toolbar-focus-border, #{$kendo-filter-toolbar-focus-border} );
+        }
     }
 
 }

package/scss/filter/_variables.scss

@@ -33,3 +33,7 @@ $kendo-filter-text: var( --kendo-component-text, initial ) !default;
 /// Background color of the line that connects the filter items.
 /// @group filter
 $kendo-filter-line-bg: var( --kendo-component-border, initial ) !default;
+
+/// Border color of the focused filter.
+/// @group filter
+$kendo-filter-toolbar-focus-border: get-theme-color-var( neutral-130 ) !default;

package/scss/gantt/_theme.scss

@@ -157,17 +157,42 @@
                 $bg: var( --kendo-gantt-task-progress-bg, #{$kendo-gantt-task-progress-bg} )
             );
         }
+
+        &:hover {
+            .k-task-complete {
+                background-color: var( --kendo-gantt-task-progress-hover-bg, #{$kendo-gantt-task-progress-hover-bg} )
+            }
+        }
     }
-    .k-task-delayed .k-task-complete {
-        @include fill(
-            $bg: var( --kendo-gantt-delayed-bg, #{$kendo-gantt-delayed-bg} )
-        );
+
+    .k-task-delayed {
+        .k-task-complete {
+            @include fill(
+                $bg: var( --kendo-gantt-delayed-bg, #{$kendo-gantt-delayed-bg} )
+            );
+        }
+
+        &:hover .k-task-complete {
+            @include fill(
+                $bg: var( --kendo-gantt-delayed-hover-bg, #{$kendo-gantt-delayed-hover-bg} )
+            );
+        }
     }
-    .k-task-advanced .k-task-complete {
-        @include fill(
-            $bg: var( --kendo-gantt-advanced-bg, #{$kendo-gantt-advanced-bg} )
-        );
+
+    .k-task-advanced {
+        .k-task-complete {
+            @include fill(
+                $bg: var( --kendo-gantt-advanced-bg, #{$kendo-gantt-advanced-bg} )
+            );
+        }
+
+        &:hover {
+            .k-task-complete {
+                background-color: var( --kendo-gantt-advanced-hover-bg, #{$kendo-gantt-advanced-hover-bg} );
+            }
+        }
     }
+
     .k-task-single.k-selected {
         @include fill(
             var( --kendo-gantt-task-selected-text, #{$kendo-gantt-task-selected-text} ),

package/scss/gantt/_variables.scss

@@ -110,6 +110,9 @@ $kendo-gantt-task-border: inherit !default;
 /// Background color of the gantt task progress.
 /// @group gantt
 $kendo-gantt-task-progress-bg: get-theme-color-var( neutral-160 ) !default;
+/// Background hover color of the gantt task progress.
+/// @group gantt
+$kendo-gantt-task-progress-hover-bg: get-theme-color-var( neutral-190 ) !default;
 /// Selected background color of the gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-bg: get-theme-color-var( primary-50 ) !default;
@@ -200,6 +203,9 @@ $kendo-gantt-delayed-bg: get-theme-color-var( error-160 ) !default;
 /// Complement background color of the gantt delayed task.
 /// @group gantt
 $kendo-gantt-delayed-bg-lighter: get-theme-color-var( error-110) !default;
+/// Background hover color of the gantt delayed task.
+/// @group gantt
+$kendo-gantt-delayed-hover-bg: get-theme-color-var( error-190 ) !default;
 
 /// Background color of the gantt advanced task.
 /// @group gantt
@@ -207,6 +213,9 @@ $kendo-gantt-advanced-bg: get-theme-color-var( success-160 ) !default;
 /// Complement background color of the gantt advanced task.
 /// @group gantt
 $kendo-gantt-advanced-bg-lighter: get-theme-color-var( success-110 ) !default;
+/// Background hover color of the gantt advanced task.
+/// @group gantt
+$kendo-gantt-advanced-hover-bg: get-theme-color-var( success-190 ) !default;
 
 /// Text color of the gantt delayed task action.
 /// @group gantt

package/scss/grid/_layout.scss

@@ -353,6 +353,10 @@
         }
     }
 
+    // Alias used in jQuery
+    .k-reorder-cue {
+        @extend .k-grouping-dropclue;
+    }
 
     // Grid header / footer
     .k-grid-header-wrap,
@@ -514,7 +518,7 @@
     }
 
     .k-grid-filter-popup {
-        min-width: 200px;
+        min-width: 230px;
     }
 
     // Standalone column menu
@@ -1090,7 +1094,7 @@
 
         .k-actions {
             margin: 0;
-            padding-block-start: var( --kendo-filter-menu-container-padding-y, #{$kendo-filter-menu-container-padding-y} );
+            padding-block-start: calc( var( --kendo-filter-menu-container-padding-y, #{$kendo-filter-menu-container-padding-y} ) - var( --kendo-grid-column-menu-spacing, #{$kendo-grid-column-menu-spacing} ) ) ;
             padding-block-end: 0;
             padding-inline: 0;
         }

package/scss/grid/_theme.scss

@@ -484,6 +484,14 @@
         .k-check-all-wrap {
             @include fill( $border: $kendo-popup-border );
         }
+
+        .k-listgroup-item {
+            &.k-disabled {
+                @include disabled(
+                    $bg: var( --kendo-disabled-bg, inherit )
+                );
+            }
+        }
     }
 
 

package/scss/list/_layout.scss

@@ -3,6 +3,17 @@
 
 @mixin kendo-list--layout() {
 
+    // List container
+    .k-list-container {
+        display: flex;
+        flex-flow: column nowrap;
+
+        > .k-list {
+            flex: 1;
+            height: 100%;
+        }
+    }
+
     .k-list {
         margin: 0;
         padding: 0;

package/scss/progressbar/_layout.scss

@@ -67,6 +67,8 @@
         display: flex;
         overflow: unset;
         flex-shrink: 0;
+        grid-column: 1/-1;
+        grid-row: 2/-1;
 
         &.k-progress-start { justify-content: flex-start; }
         &.k-progress-center { justify-content: center; }
@@ -137,10 +139,10 @@
 
         .k-progress-status-wrap {
             flex-direction: column;
-            align-items: flex-end;
-            grid-row: 1 / -1;
-            grid-column: 1 / -1;
-            margin-inline-start: var( --kendo-progressbar-offset-y, #{- $kendo-progressbar-offset-y} );
+            align-items: flex-start;
+            margin-inline-start: var( --kendo-progressbar-vertical-status-offset, #{$kendo-progressbar-vertical-status-offset} );
+            grid-row: 1/-1;
+            grid-column: -1/1;
         }
 
         .k-progress-status {

package/scss/progressbar/_variables.scss

@@ -27,13 +27,10 @@ $kendo-progressbar-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// @group progressbar
 $kendo-progressbar-line-height: var( --kendo-line-height, inherit ) !default;
 
-///  of the progressbar.
-/// @group progressbar
-$kendo-progressbar-offset-y: map-get( $kendo-spacing, 2 ) !default;
-///  of the progressbar.
+/// Horizontal padding of the progressbar.
 /// @group progressbar
 $kendo-progressbar-padding-x: 0 !default;
-///  of the progressbar.
+/// Vertical padding of the progressbar.
 /// @group progressbar
 $kendo-progressbar-padding-y: 0 !default;
 
@@ -73,6 +70,13 @@ $kendo-progressbar-fill-border: $kendo-progressbar-fill-bg !default;
 /// @group progressbar
 $kendo-progressbar-fill-gradient: null !default;
 
+/// Progress status offset of the progressbar.
+/// @group progressbar
+$kendo-progressbar-offset-y: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical status offset of the progressbar.
+/// @group progressbar
+$kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1) !default;
+
 /// Progress background color of the disabled progressbar.
 /// @group progressbar
 $kendo-progressbar-fill-disabled-bg: get-theme-color-var( primary-30 ) !default;