devextreme-themebuilder 24.2.3 → 24.2.4-build-25007-1935

package/data/metadata/dx-theme-builder-metadata.js

@@ -80,7 +80,7 @@ exports.metadata = {
         },
         {
             'Key': '$button-default-color',
-            'Name': '10. Text color',
+            'Name': '10. Text color (contained)',
             'Type': 'color'
         },
         {
@@ -98,11 +98,21 @@ exports.metadata = {
             'Name': '20. Selected contained item background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-outlined-color',
+            'Name': '11. Text color (outlined)',
+            'Type': 'color'
+        },
         {
             'Key': '$button-default-outlined-bg-selected',
             'Name': '20. Selected outlined item background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-text-color',
+            'Name': '11. Text color (text)',
+            'Type': 'color'
+        },
         {
             'Key': '$button-default-text-bg-selected',
             'Name': '20. Selected text item background color',
@@ -1248,7 +1258,7 @@ exports.metadata = {
         },
         {
             'Key': '$button-default-selected-color',
-            'Name': '20. Selected state text color',
+            'Name': '20. Selected state text color (contained)',
             'Type': 'color'
         },
         {
@@ -1276,6 +1286,26 @@ exports.metadata = {
             'Name': '25. Selected state background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-outlined-color',
+            'Name': '11. Text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-outlined-selected-color',
+            'Name': '21. Selected state text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-color',
+            'Name': '11. Text color (text)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-selected-color',
+            'Name': '21. Selected state text color (text)',
+            'Type': 'color'
+        },
         {
             'Key': '$button-danger-color',
             'Name': '10. Text color',
@@ -2261,7 +2291,7 @@ exports.metadata = {
         },
         {
             'Key': '$button-default-color',
-            'Name': '10. Text color',
+            'Name': '10. Text color (contained)',
             'Type': 'color'
         },
         {
@@ -2294,6 +2324,16 @@ exports.metadata = {
             'Name': '25. Selected state background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-outlined-color',
+            'Name': '11. Text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-color',
+            'Name': '11. Text color (text)',
+            'Type': 'color'
+        },
         {
             'Key': '$button-danger-color',
             'Name': '10. Text color',
@@ -2364,6 +2404,36 @@ exports.metadata = {
             'Name': '25. Selected state background color',
             'Type': 'color'
         },
+        {
+            'Key': '$button-default-outlined-color-hover',
+            'Name': '12. Hover state text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-outlined-color-active',
+            'Name': '13. Active state text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-outlined-selected-color',
+            'Name': '21. Selected state text color (outlined)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-color-hover',
+            'Name': '12. Hover state text color (text)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-color-active',
+            'Name': '13. Active state text color (text)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-text-selected-color',
+            'Name': '21. Selected state text color (text)',
+            'Type': 'color'
+        },
         {
             'Key': '$calendar-navigator-text-color',
             'Name': '20. Navigator text color',
@@ -2499,11 +2569,6 @@ exports.metadata = {
             'Name': '90. Active arrow icon color',
             'Type': 'color'
         },
-        {
-            'Key': '$fieldset-field-label-color',
-            'Name': '10. Label text color',
-            'Type': 'color'
-        },
         {
             'Key': '$fileuploader-filename-color',
             'Name': '10. File name text color',
@@ -2559,6 +2624,11 @@ exports.metadata = {
             'Name': '80. Value button color',
             'Type': 'color'
         },
+        {
+            'Key': '$fieldset-field-label-color',
+            'Name': '10. Label text color',
+            'Type': 'color'
+        },
         {
             'Key': '$form-field-item-color',
             'Name': '10. Label text color',
@@ -3287,7 +3357,7 @@ exports.metadata = {
         }
     ]
 };
-exports.version = '24.2.3';
+exports.version = '24.2.4-build-25007-1935';
 exports.browsersList = [
     'last 2 versions',
     'ios > 9',

package/data/scss/widgets/base/_dropDownMenu.scss

@@ -21,7 +21,7 @@
     display: block;
     border-top: 0;
   }
-  
+
   .dx-list-item-content {
     display: block;
   }

package/data/scss/widgets/base/_tabPanel.scss

@@ -22,7 +22,7 @@
 
 .dx-tabpanel-tabs-position-right {
   flex-direction: row-reverse;
-  
+
   &.dx-rtl {
     flex-direction: row;
   }
@@ -34,7 +34,7 @@
 
 .dx-tabpanel-tabs-position-left {
   flex-direction: row;
-  
+
   &.dx-rtl {
     flex-direction: row-reverse;
   }

package/data/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss

@@ -24,13 +24,13 @@
       &:first-child {
         border-start-start-radius: $border-radius;
       }
-  
+
       &:last-child {
         border-end-start-radius: $border-radius;
       }
     }
   }
-  
+
   .dx-chat-messagegroup-alignment-end {
     .dx-chat-messagebubble {
       color: $color-primary;

package/data/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss

@@ -20,7 +20,7 @@
   .dx-chat-messagegroup-information {
     column-gap: $information-gap;
   }
-  
+
   .dx-chat-messagegroup-alignment-start {
     grid-template-columns: $messagegroup-start-template;
   }
@@ -28,7 +28,7 @@
   .dx-chat-messagegroup-alignment-start:has(.dx-avatar) {
     column-gap: $messagegroup-start-gap;
   }
-  
+
   .dx-chat-messagegroup-time {
     font-size: $information-font-size;
     color: $information-timestamp-color;

package/data/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss

@@ -25,7 +25,7 @@
     font-size: $font-size;
     color: $color;
   }
-  
+
   .dx-chat-typingindicator-bubble {
     padding-block: $bubble-padding-block;
     padding-inline: $bubble-padding-inline;

package/data/scss/widgets/base/checkBox/_mixins.scss

@@ -29,7 +29,7 @@
   .dx-checkbox-icon {
     .dx-checkbox-indeterminate & {
       color: $color;
-    
+
       @include dx-checkbox-icon-centered($icon-height, $icon-width);
 
       &::before {

package/data/scss/widgets/base/dataGrid/_index.scss

@@ -417,10 +417,9 @@ $datagrid-text-stub-background-image-path: null !default;
   tr {
     outline: none;
   }
-  
+
   &:focus-within {
     outline: 2px solid $datagrid-focused-border-color;
     outline-offset: -2px;
   }
 }
-

package/data/scss/widgets/base/dropDownButton/_mixins.scss

@@ -7,7 +7,7 @@
       width: $dropdownbutton-icon-spindown-size;
       height: $dropdownbutton-icon-spindown-size;
     }
-  } 
+  }
 
   .dx-dropdownbutton-action {
     &.dx-button-has-icon:not(.dx-button-has-text) {
@@ -22,7 +22,7 @@
         margin-inline-start: 4px;
         margin-inline-end: 0;
       }
-    } 
+    }
   }
 
   .dx-dropdownbutton-has-arrow {

package/data/scss/widgets/base/dropDownEditor/_mixins.scss

@@ -29,7 +29,7 @@
       .dx-texteditor-input {
         padding-inline-end: $invalid-badge-size + $texteditor-filled-input-horizontal-padding;
       }
-      
+
       .dx-start-datebox {
         .dx-texteditor-input {
           padding-inline-end: $texteditor-filled-input-horizontal-padding;

package/data/scss/widgets/base/lookup/_mixins.scss

@@ -10,20 +10,20 @@
 ) {
   .dx-lookup-arrow {
     @include dx-icon($spin-icon-glyph);
-  
+
     .dx-rtl & {
       &::before {
         content: $spin-icon-glyph-rtl;
       }
     }
-  
+
     width: $arror-width;
     color: $icon-color;
 
     .dx-dropdowneditor-active & {
       color: $icon-color-active;
     }
-  
+
     @include dx-icon-font-centered-sizing($icon-size);
   }
 }

package/data/scss/widgets/base/scrollable/_mixins.scss

@@ -13,19 +13,19 @@
 ) {
   .dx-scrollbar-hoverable {
     background-color: $scrollable-scrollbar-bg;
-  
+
     &.dx-state-hover,
     &.dx-scrollable-scrollbar-active {
       background-color: $scrollable-scrollbar-active-bg;
     }
-  
+
     &.dx-scrollable-scrollbar-active .dx-scrollable-scroll-content {
       background-color: $scrollable-scroll-active-bg;
     }
-  
+
     .dx-scrollable-scroll.dx-state-invisible {
       opacity: 1;
-  
+
       .dx-scrollable-scroll-content {
         background-color: transparent;
       }
@@ -44,31 +44,31 @@
       width: $scrollbar-size-thin;
       padding-inline-end: $scrollbar-scroll-boundary-padding;
     }
-  
+
     &.dx-scrollbar-hoverable {
       width: $scrollbar-size-thin;
       transition: width 0.2s linear 0.15s, background-color 0.2s linear 0.15s;
-  
+
       .dx-scrollable-scroll {
         transition: background-color 0.5s linear 1s, width 0.2s linear 150ms;
-  
+
         .dx-scrollable-scroll-content {
           transition: background-color 0.15s linear 0.15s;
         }
-  
+
         &.dx-state-invisible {
           transition: background-color 0.5s linear 1s, width 0.2s linear 0.15s;
-  
+
           .dx-scrollable-scroll-content {
             transition: background-color 0.5s linear 1s;
           }
         }
       }
-  
+
       &.dx-state-hover,
       &.dx-scrollable-scrollbar-active {
         width: $scrollbar-size;
-  
+
         .dx-scrollable-scroll {
           width: $scrollbar-size;
         }
@@ -87,31 +87,31 @@
       height: $scrollbar-size-thin;
       padding-bottom: $scrollbar-scroll-boundary-padding;
     }
-  
+
     &.dx-scrollbar-hoverable {
       height: $scrollbar-size-thin;
       transition: height 0.2s linear 0.15s, background-color 0.2s linear 0.15s;
-  
+
       .dx-scrollable-scroll {
         transition: background-color 0.5s linear 1s, height 0.2s linear 0.15s;
-  
+
         .dx-scrollable-scroll-content {
           transition: background-color 0.15s linear 0.15s;
         }
-  
+
         &.dx-state-invisible {
           transition: background-color 0.5s linear 1s, height 0.2s linear 0.15s;
-  
+
           .dx-scrollable-scroll-content {
             transition: background-color 0.5s linear 1s;
           }
         }
       }
-  
+
       &.dx-state-hover,
       &.dx-scrollable-scrollbar-active {
         height: $scrollbar-size;
-  
+
         .dx-scrollable-scroll {
           height: $scrollbar-size;
         }
@@ -133,7 +133,7 @@
           }
         }
       }
-  
+
       &.dx-rtl,
       .dx-rtl & {
         > .dx-scrollable-wrapper {
@@ -146,7 +146,7 @@
         }
       }
     }
-  
+
     &.dx-scrollable-horizontal,
     &.dx-scrollable-both {
       > .dx-scrollable-wrapper {

package/data/scss/widgets/base/splitter/_index.scss

@@ -4,7 +4,7 @@
   display: flex;
   height: 100%;
   width: 100%;
-  
+
   .dx-splitter-item {
     display: flex;
     overflow: hidden;
@@ -49,7 +49,7 @@
 
   &.dx-resize-handle-vertical {
     flex-direction: row;
-    
+
     &.dx-resize-handle-resizable {
       cursor: row-resize;
     }

package/data/scss/widgets/base/splitter/_mixins.scss

@@ -9,12 +9,12 @@
   .dx-resize-handle {
     color: $color;
     background-color: $background-color;
-    
+
     &.dx-state-hover {
       color: $color-hover;
       background-color: $background-color-hover;
     }
-    
+
     &.dx-state-active,
     &.dx-state-focused {
       color: $color-focused;

package/data/scss/widgets/base/switch/_mixins.scss

@@ -15,7 +15,7 @@
   .dx-switch {
     width: $switch-width;
     height: $switch-height;
-  
+
     .dx-switch-wrapper {
       position: relative;
       padding-top:  $switch-padding,;
@@ -35,7 +35,7 @@
     overflow: visible;
     position: relative;
     padding: 0 $switch-container-horizontal-padding;
-  
+
     &::before {
       position: absolute;
       content: '';
@@ -46,12 +46,12 @@
       transition: $switch-transition;
     }
   }
-  
+
   .dx-switch-inner {
     width: 200%;
     height: 100%;
   }
-  
+
   .dx-switch-on,
   .dx-switch-off {
     flex-shrink: 0;
@@ -63,17 +63,17 @@
     text-align: center;
     line-height: 100%;
   }
-  
+
   .dx-switch-on {
     background: transparent;
   }
-  
+
   .dx-switch-off {
     display: none;
     padding-bottom: 10px;
     background-color: transparent;
   }
-  
+
   .dx-switch-handle {
     flex-basis: $switch-handle-height;
     flex-shrink: 0;
@@ -83,7 +83,7 @@
     width: $switch-handle-height;
     height: $switch-handle-height;
     border-radius: $switch-handle-border-radius;
-  
+
     &::before {
       display: block;
       content: ' ';
@@ -112,7 +112,7 @@
       .dx-switch-handle::before {
         background-color: $switch-handle-disabled-bg;
       }
-  
+
       .dx-switch-container::before {
         background-color: $switch-disabled-bg;
       }
@@ -156,11 +156,11 @@
     .dx-switch-container::before {
       background-color: $switch-on-bg;
     }
-  
+
     .dx-switch-handle::before {
       background-color: $switch-handle-on-bg;
     }
-  
+
     &.dx-state-active,
     &.dx-state-focused {
       .dx-switch-handle::before {
@@ -221,7 +221,7 @@
       &.dx-state-readonly {
         .dx-switch-container::before {
           border-color: $switch-off-border-color-hover;
-        } 
+        }
       }
 
       &.dx-invalid {
@@ -373,12 +373,12 @@
         background-color: $switch-invalid-container-bg;
       }
     }
-  
+
     &.dx-switch-on-value:not(.dx-state-readonly):not(.dx-state-disabled) {
       .dx-switch-container .dx-switch-handle::before {
         background-color: $switch-invalid-handle-bg;
       }
-  
+
       &.dx-state-active,
       &.dx-state-focused {
         .dx-switch-container .dx-switch-handle::before {

package/data/scss/widgets/base/textArea/_mixins.scss

@@ -11,12 +11,12 @@
     .dx-texteditor-input-container {
       margin: $input-container-margin;
     }
-  
+
     .dx-texteditor-input,
     .dx-placeholder::before {
       line-height: $content-line-height;
     }
-  
+
     &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
     &.dx-texteditor-with-floating-label {
       &.dx-editor-outlined,
@@ -27,26 +27,26 @@
           padding-top: 0;
         }
       }
-  
+
       &.dx-editor-outlined {
         .dx-texteditor-container {
           padding-top: $outlined-top-padding;
         }
       }
-  
+
       &.dx-editor-filled {
         .dx-texteditor-container {
           padding-top: $filled-top-padding;
         }
       }
-      
+
       &.dx-editor-underlined {
         .dx-texteditor-container {
           padding-top: $underlined-top-padding;
         }
       }
     }
-  
+
     .dx-icon-clear {
       top: 0;
       margin-top: 0;

package/data/scss/widgets/base/treeView/_index.scss

@@ -39,15 +39,15 @@
     gap: $gap;
     padding: $padding;
     margin: $margin;
-    
+
     .dx-treeview-item-content {
       .dx-icon {
         @include dx-icon-sizing($icon-size);
-  
+
         vertical-align: bottom;
       }
     }
-  
+
     &.dx-state-hover {
       background-color: $hover-bg;
       border-radius: $border-radius;
@@ -80,20 +80,20 @@
   .dx-treeview-search {
     margin-bottom: $searchbox-margin-bottom;
   }
-  
+
   .dx-treeview-with-search > .dx-scrollable {
     height: calc(100% - #{round($search-editor-height + $searchbox-margin-bottom)});
   }
-  
+
   .dx-treeview-select-all-item {
     border-bottom: 1px solid $border-color;
     padding: $select-all-item-padding;
-  
+
     .dx-checkbox-container {
       display: flex;
       align-items: center;
     }
-  
+
     .dx-checkbox-text {
       padding-inline-start: $item-element-gap;
     }
@@ -106,11 +106,11 @@
 
   .dx-treeview-border-visible {
     border: 1px solid $border-color;
-  
+
     .dx-treeview-select-all-item {
       padding-inline-start: $select-all-item-border-visible-padding;
     }
-  
+
     .dx-scrollable-content {
       > .dx-treeview-node-container {
         padding: $treeview-container-padding;
@@ -120,8 +120,8 @@
 }
 
 @mixin treeview-checkbox(
-  $checkbox-container-size, 
-  $base-text-color, 
+  $checkbox-container-size,
+  $base-text-color,
   $checkbox-border-color-focused,
   $treeview-item-selected-color,
   $treeview-item-selected-bg,