devextreme-themebuilder 22.2.1-alpha-22313-0309 → 22.2.3

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dependencies = exports.browsersList = exports.version = exports.metadata = void 0;
-exports.metadata = { 'generic': [{ 'Key': '$accordion-color', 'Name': '50. Text color', 'Type': 'color' }, { 'Key': '$accordion-title-color', 'Name': '10. Item title text color', 'Type': 'color' }, { 'Key': '$accordion-item-title-opened-bg', 'Name': '20. Active item title background color', 'Type': 'color' }, { 'Key': '$accordion-item-border-color', 'Name': '30. Item border color', 'Type': 'color' }, { 'Key': '$accordion-item-focused-border-color', 'Name': '40. Focused item border color', 'Type': 'color' }, { 'Key': '$accordion-title-active-color', 'Name': '70. Item title active state text color', 'Type': 'color' }, { 'Key': '$accordion-item-hover-bg', 'Name': '90. Item title hovered state background color', 'Type': 'color' }, { 'Key': '$accordion-icon-active-color', 'Name': '30. Item active state icon color', 'Type': 'color' }, { 'Key': '$badge-color', 'Name': '130. Badge text color', 'Type': 'color' }, { 'Key': '$badge-bg', 'Name': '140. Badge background color', 'Type': 'color' }, { 'Key': '$button-normal-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-normal-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-normal-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$button-default-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-default-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-default-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$button-danger-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-danger-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-danger-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$button-success-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-success-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-success-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$button-group-normal-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-normal-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-default-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-default-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-danger-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-danger-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-success-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-success-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$checkbox-border-color', 'Name': '10. Border color', 'Type': 'color' }, { 'Key': '$checkbox-focused-borderd-color', 'Name': '70. Focused state border color', 'Type': 'color' }, { 'Key': '$checkbox-bg', 'Name': '40. Background color', 'Type': 'color' }, { 'Key': '$checkbox-hover-border-color', 'Name': '20. Hovered state border color', 'Type': 'color' }, { 'Key': '$checkbox-active-icon-bg', 'Name': '80. Active state background color', 'Type': 'color' }, { 'Key': '$calendar-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$calendar-header-color', 'Name': '10. Header text color', 'Type': 'color' }, { 'Key': '$calendar-cell-other-color', 'Name': '30. Other month text color', 'Type': 'color' }, { 'Key': '$calendar-bg', 'Name': '40. Background color', 'Type': 'color' }, { 'Key': '$calendar-hover-bg', 'Name': '50. Hovered cell background color', 'Type': 'color' }, { 'Key': '$calendar-cell-selected-bg', 'Name': '30. Selected cell background color', 'Type': 'color' }, { 'Key': '$calendar-cell-active-bg', 'Name': '70. Active state background Color', 'Type': 'color' }, { 'Key': '$calendar-border-color', 'Name': '80. Border color', 'Type': 'color' }, { 'Key': '$calendar-navigator-border-color', 'Name': '40. Date navigator border color', 'Type': 'color' }, { 'Key': '$calendar-navigator-hover-border-color', 'Name': '50. Hovered state date navigator border color', 'Type': 'color' }, { 'Key': '$calendar-shevron-icon-color', 'Name': '60. Shevron icon color', 'Type': 'color' }, { 'Key': '$drawer-shader-background-color', 'Name': '10. Shader background color', 'Type': 'color' }, { 'Key': '$dropdowneditor-button-hover-bg', 'Name': '20. Dropdown button hovered state background color', 'Type': 'color' }, { 'Key': '$dropdowneditor-button-active-bg', 'Name': '30. Dropdown button active state background color', 'Type': 'color' }, { 'Key': '$dropdowneditor-icon-color', 'Name': '80. Spin icon color', 'Type': 'color' }, { 'Key': '$dropdowneditor-icon-active-color', 'Name': '90. Spin active icon color', 'Type': 'color' }, { 'Key': '$fieldset-field-label-color', 'Name': '10. Label text color', 'Type': 'color' }, { 'Key': '$fileuploader-filename-color', 'Name': '10. Filename text color', 'Type': 'color' }, { 'Key': '$fileuploader-falename-status-color', 'Name': '20. File status text color', 'Type': 'color' }, { 'Key': '$fileuploader-border-color', 'Name': '30. Border color on dragover', 'Type': 'color' }, { 'Key': '$filterbuilder-text-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$filterbuilder-text-focus-color', 'Name': '20. Focused text color', 'Type': 'color' }, { 'Key': '$filterbuilder-plus-icon-color', 'Name': '30. Plus icon color', 'Type': 'color' }, { 'Key': '$filterbuilder-remove-icon-color', 'Name': '40. Remove icon color', 'Type': 'color' }, { 'Key': '$filterbuilder-group-operation-color', 'Name': '50. Group operation button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-field-color', 'Name': '60. Data field button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-operator-color', 'Name': '70. Operation button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-value-color', 'Name': '80. Value button color', 'Type': 'color' }, { 'Key': '$filterbuilder-menu-icon-color', 'Name': '10. Menu icon color', 'Type': 'color' }, { 'Key': '$form-field-item-color', 'Name': '10. Label text color', 'Type': 'color' }, { 'Key': '$form-group-border-color', 'Name': '10. Group border color', 'Type': 'color' }, { 'Key': '$gallery-indicator-bg', 'Name': '10. Indicator background color', 'Type': 'color' }, { 'Key': '$gallery-indicator-item-selected-bg', 'Name': '20. Selected indicator background color', 'Type': 'color' }, { 'Key': '$gallery-indicator-focused-bg', 'Name': '30. Focused indicator background color', 'Type': 'color' }, { 'Key': '$gallery-navbutton-hover-color', 'Name': '30. Navigation button color', 'Type': 'color' }, { 'Key': '$gallery-nav-arrow-color', 'Name': '40. Navigation icon color', 'Type': 'color' }, { 'Key': '$gallery-navbutton-active-color', 'Name': '50. Active navigation button color', 'Type': 'color' }, { 'Key': '$datagrid-base-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$datagrid-base-background-color', 'Name': '60. Background color', 'Type': 'color' }, { 'Key': '$datagrid-border-color', 'Name': '70. Border color', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-item-color', 'Name': '20. Header text color', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-font-weight', 'Name': '25. Header text weight', 'Type': 'select', 'TypeValues': 'normal|bold|light' }, { 'Key': '$datagrid-drag-header-border-color', 'Name': '35. Draggable header border color', 'Type': 'color' }, { 'Key': '$datagrid-selection-bg', 'Name': '55. Selected row background color', 'Type': 'color' }, { 'Key': '$datagrid-row-selected-border-color', 'Name': '60. Selected row border color', 'Type': 'color' }, { 'Key': '$datagrid-row-selected-color', 'Name': '50. Selected row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-focused-color', 'Name': '65. Focused row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-focused-bg', 'Name': '70. Focused row background color', 'Type': 'color' }, { 'Key': '$datagrid-hover-bg', 'Name': '90. Hovered row background color', 'Type': 'color' }, { 'Key': '$datagrid-menu-icon-color', 'Name': '30. Context menu icons color', 'Type': 'color' }, { 'Key': '$datagrid-cell-modified-border-color', 'Name': '40. Modified data border color', 'Type': 'color' }, { 'Key': '$datagrid-row-invalid-faded-border-color', 'Name': '45. Invalidate data faded color', 'Type': 'color' }, { 'Key': '$datagrid-nodata-color', 'Name': '30. NoData message text color', 'Type': 'color' }, { 'Key': '$datagrid-group-row-color', 'Name': '90. Group row text color', 'Type': 'color' }, { 'Key': '$datagrid-group-row-bg', 'Name': '95. Group row background color', 'Type': 'color' }, { 'Key': '$datagrid-search-color', 'Name': '105. Highlighted text color', 'Type': 'color' }, { 'Key': '$datagrid-spin-icon-color', 'Name': '125. Spin icon color', 'Type': 'color' }, { 'Key': '$datagrid-search-bg', 'Name': '110. Highlighted text background color', 'Type': 'color' }, { 'Key': '$datagrid-row-error-color', 'Name': '115. Error row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-error-bg', 'Name': '120. Error row background color', 'Type': 'color' }, { 'Key': '$datagrid-link-color', 'Name': '40. Link color', 'Type': 'color' }, { 'Key': '$datagrid-focused-border-color', 'Name': '75. Focused cell border color', 'Type': 'color' }, { 'Key': '$datagrid-editor-bg', 'Name': '80. Editor background', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-bg', 'Name': '140. Column chooser background color', 'Type': 'color' }, { 'Key': '$datagrid-row-alternation-bg', 'Name': '85. Row alternation background color', 'Type': 'color' }, { 'Key': '$datagrid-summary-color', 'Name': '100. Summary item color', 'Type': 'color' }, { 'Key': '$list-border-color', 'Name': '20. Item border color', 'Type': 'color' }, { 'Key': '$list-group-color', 'Name': '20. Group header text color', 'Type': 'color' }, { 'Key': '$list-group-header-bg', 'Name': '30. Group header background color', 'Type': 'color' }, { 'Key': '$list-normal-color', 'Name': '10. Item text color', 'Type': 'color' }, { 'Key': '$list-item-hover-bg', 'Name': '30. Hovered item background color', 'Type': 'color' }, { 'Key': '$list-item-selected-bg', 'Name': '40. Selected item state background color', 'Type': 'color' }, { 'Key': '$list-item-focused-selected-bg', 'Name': '50. Focused selected item state background color', 'Type': 'color' }, { 'Key': '$list-focused-bg', 'Name': '60. Focused item state background color', 'Type': 'color' }, { 'Key': '$list-item-active-bg', 'Name': '50. Active state item background color', 'Type': 'color' }, { 'Key': '$loadindicator-bg', 'Name': '10. Load indicator color', 'Type': 'color' }, { 'Key': '$loadpanel-content-bg', 'Name': '20. Loadpanel background color', 'Type': 'color' }, { 'Key': '$menu-popup-bg', 'Name': '40. Popup background color', 'Type': 'color' }, { 'Key': '$menu-item-hover-bg', 'Name': '50. Hovered item background color', 'Type': 'color' }, { 'Key': '$menu-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$menu-item-hovered-color', 'Name': '55. Hovered item text color', 'Type': 'color' }, { 'Key': '$menu-item-expanded-color', 'Name': '10. Expanded item text color', 'Type': 'color' }, { 'Key': '$menu-item-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$menu-popup-border-color', 'Name': '20. Border color', 'Type': 'color' }, { 'Key': '$numberbox-spin-active-bg', 'Name': '10. Active spin buttons color', 'Type': 'color' }, { 'Key': '$numberbox-spin-hover-border-color', 'Name': '20. Hovered spin buttons border color', 'Type': 'color' }, { 'Key': '$numberbox-spin-icon-color', 'Name': '10. Spin icon color', 'Type': 'color' }, { 'Key': '$overlay-content-bg', 'Name': '10. Content background color', 'Type': 'color' }, { 'Key': '$overlay-shader-bg', 'Name': '20. Shader background color', 'Type': 'color' }, { 'Key': '$overlay-focus-border-color', 'Name': '30. Focus border color', 'Type': 'color' }, { 'Key': '$pager-page-selected-color', 'Name': '150. Pager selected item text color', 'Type': 'color' }, { 'Key': '$pager-page-selected-bg', 'Name': '160. Pager selected item background color', 'Type': 'color' }, { 'Key': '$colorbox-overlay-bg', 'Name': '10. Overlay background', 'Type': 'color' }, { 'Key': '$pivotgrid-area-color', 'Name': '10. Header text color', 'Type': 'color' }, { 'Key': '$pivotgrid-totalcolor', 'Name': '20. Totals background color', 'Type': 'color' }, { 'Key': '$pivotgrid-grandtotalcolor', 'Name': '30. Grand totals background color', 'Type': 'color' }, { 'Key': '$pivotgrid-field-area-text-color', 'Name': '40. Field area text color', 'Type': 'color' }, { 'Key': '$pivotgrid-spin-icon-color', 'Name': '50. Spin icon color', 'Type': 'color' }, { 'Key': '$popup-title-bg', 'Name': '20. Header background color', 'Type': 'color' }, { 'Key': '$progressbar-bg', 'Name': '10. Bar background color', 'Type': 'color' }, { 'Key': '$progressbar-range-bg', 'Name': '20. Selected range background color', 'Type': 'color' }, { 'Key': '$radiogroup-checked-bg', 'Name': '10. Background color', 'Type': 'color' }, { 'Key': '$radiobutton-active-bg', 'Name': '40. Active state background color', 'Type': 'color' }, { 'Key': '$scheduler-base-border-color', 'Name': '10 Border color', 'Type': 'color' }, { 'Key': '$scheduler-accent-border-color', 'Name': '20. Hour separator color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-text-color', 'Name': '30. Appointment text color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-base-color', 'Name': '40. Appointment background color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-start-color', 'Name': '50. Start appointment color', 'Type': 'color' }, { 'Key': '$scheduler-first-month-border-color', 'Name': '60. First day of month separator color', 'Type': 'color' }, { 'Key': '$scheduler-workspace-focused-cell-color', 'Name': '70. Focused cell color', 'Type': 'color' }, { 'Key': '$scheduler-current-time-cell-color', 'Name': '80. Date-time indicator color', 'Type': 'color' }, { 'Key': '$scheduler-time-indicator-color', 'Name': '80. Date-time indicator color', 'Type': 'color' }, { 'Key': '$scrollable-scroll-bg', 'Name': '10. Scroller background color', 'Type': 'color' }, { 'Key': '$scrollable-scrollbar-active-bg', 'Name': '20. Scrollbar background color', 'Type': 'color' }, { 'Key': '$selectbox-list-bg', 'Name': '10. Item background color', 'Type': 'color' }, { 'Key': '$slider-bar-bg', 'Name': '10. Slider bar background color', 'Type': 'color' }, { 'Key': '$slider-range-bg', 'Name': '30. Selected range background color', 'Type': 'color' }, { 'Key': '$switch-border-color', 'Name': '10. Border color', 'Type': 'color' }, { 'Key': '$switch-on-color', 'Name': '10. "ON" label color', 'Type': 'color' }, { 'Key': '$switch-container-active-bg', 'Name': '30. Active state background color', 'Type': 'color' }, { 'Key': '$switch-off-color', 'Name': '20. "OFF" label color', 'Type': 'color' }, { 'Key': '$tabs-tab-color', 'Name': '10. Tab text color', 'Type': 'color' }, { 'Key': '$tabs-tab-selected-color', 'Name': '20. Selected tab text color', 'Type': 'color' }, { 'Key': '$tabs-tab-bg', 'Name': '30. Tab background color', 'Type': 'color' }, { 'Key': '$tabs-tab-selected-bg', 'Name': '40. Selected tab background color', 'Type': 'color' }, { 'Key': '$tabs-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$tabs-focused-border-color', 'Name': '40. Focus border color', 'Type': 'color' }, { 'Key': '$tabs-tab-hover-bg', 'Name': '50. Hover background color', 'Type': 'color' }, { 'Key': '$tagbox-tag-color', 'Name': '10. Tag text color', 'Type': 'color' }, { 'Key': '$tagbox-tag-bg', 'Name': '20. Tag background color', 'Type': 'color' }, { 'Key': '$tagbox-tag-button-remove-bg', 'Name': '30. Tag close button color', 'Type': 'color' }, { 'Key': '$textbox-search-icon-color', 'Name': '80. Search icon color', 'Type': 'color' }, { 'Key': '$texteditor-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$texteditor-placeholder-color', 'Name': '20. Placeholder text color', 'Type': 'color' }, { 'Key': '$texteditor-bg', 'Name': '30. Background color', 'Type': 'color' }, { 'Key': '$texteditor-filled-bg', 'Name': '40. Filled editor background color', 'Type': 'color' }, { 'Key': '$texteditor-border-color', 'Name': '50. Border color', 'Type': 'color' }, { 'Key': '$texteditor-focused-border-color', 'Name': '30. Focused border color', 'Type': 'color' }, { 'Key': '$texteditor-hover-border-color', 'Name': '60. Hovered border color', 'Type': 'color' }, { 'Key': '$tileview-color', 'Name': '10. Item text color', 'Type': 'color' }, { 'Key': '$toast-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$toast-info-bg', 'Name': '20. Info background color', 'Type': 'color' }, { 'Key': '$toast-warning-bg', 'Name': '30. Warning background color', 'Type': 'color' }, { 'Key': '$toast-error-bg', 'Name': '40. Error background color', 'Type': 'color' }, { 'Key': '$toast-success-bg', 'Name': '50. Success background color', 'Type': 'color' }, { 'Key': '$toolbar-bg', 'Name': '10. Background color', 'Type': 'color' }, { 'Key': '$tooltip-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$tooltip-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$tooltip-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$treeview-focused-bg', 'Name': '10. Focused state background color', 'Type': 'color' }, { 'Key': '$treeview-hover-bg', 'Name': '90. Hovered state background color', 'Type': 'color' }, { 'Key': '$treeview-border-color', 'Name': '100. Border color', 'Type': 'color' }, { 'Key': '$treeview-item-selected-color', 'Name': '110. Selected item text color', 'Type': 'color' }, { 'Key': '$treeview-spin-icon-color', 'Name': '120. Spin icon color', 'Type': 'color' }, { 'Key': '$base-font-family', 'Name': '10. Font family', 'Type': 'text' }, { 'Key': '$base-accent', 'Name': '10. Accent color', 'Type': 'color' }, { 'Key': '$base-label-color', 'Name': '20. Label color', 'Type': 'color' }, { 'Key': '$base-link-color', 'Name': '30. Link color', 'Type': 'color' }, { 'Key': '$base-icon-color', 'Name': '40. Icon color', 'Type': 'color' }, { 'Key': '$base-text-color', 'Name': '20. Text color', 'Type': 'color' }, { 'Key': '$base-bg', 'Name': '30. Background color', 'Type': 'color' }, { 'Key': '$base-border-color', 'Name': '40. Border color', 'Type': 'color' }, { 'Key': '$base-border-radius', 'Name': '120. Border radius', 'Type': 'text' }, { 'Key': '$base-success', 'Name': '50. Success color', 'Type': 'color' }, { 'Key': '$base-warning', 'Name': '60. Warning color', 'Type': 'color' }, { 'Key': '$base-danger', 'Name': '70. Danger color', 'Type': 'color' }, { 'Key': '$base-hover-color', 'Name': '80. Hovered state text color', 'Type': 'color' }, { 'Key': '$base-hover-bg', 'Name': '90. Hovered state background color', 'Type': 'color' }, { 'Key': '$base-focus-color', 'Name': '100. Focused state text color', 'Type': 'color' }, { 'Key': '$base-focus-bg', 'Name': '110. Focused state background color', 'Type': 'color' }, { 'Key': '$base-invalid-color', 'Name': '1. Invalid widget state - active color', 'Type': 'color' }, { 'Key': '$base-invalid-faded-border-color', 'Name': '2. Invalid widget state - border color', 'Type': 'color' }, { 'Key': '$base-border-radius-small', 'Name': '70. Border radius', 'Type': 'text' }, { 'Key': '$base-border-radius-large', 'Name': '30. Border radius', 'Type': 'text' }], 'material': [{ 'Key': '$accordion-title-color', 'Name': '10. Item title text color', 'Type': 'color' }, { 'Key': '$accordion-item-border-color', 'Name': '20. Item border color', 'Type': 'color' }, { 'Key': '$accordion-icon-active-color', 'Name': '30. Item active state icon color', 'Type': 'color' }, { 'Key': '$badge-color', 'Name': '130. Badge text color', 'Type': 'color' }, { 'Key': '$badge-bg', 'Name': '140. Badge background color', 'Type': 'color' }, { 'Key': '$button-normal-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-normal-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-normal-hover-bg', 'Name': '30. Hovered state background color', 'Type': 'color' }, { 'Key': '$button-normal-focused-bg', 'Name': '40. Focused state background color', 'Type': 'color' }, { 'Key': '$button-normal-active-bg', 'Name': '50. Active state background color', 'Type': 'color' }, { 'Key': '$button-default-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-default-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-default-hover-bg', 'Name': '30. Hovered state background color', 'Type': 'color' }, { 'Key': '$button-default-focused-bg', 'Name': '40. Focused state background color', 'Type': 'color' }, { 'Key': '$button-default-active-bg', 'Name': '50. Active state background color', 'Type': 'color' }, { 'Key': '$button-danger-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-danger-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-danger-hover-bg', 'Name': '30. Hovered state background color', 'Type': 'color' }, { 'Key': '$button-danger-focused-bg', 'Name': '40. Focused state background color', 'Type': 'color' }, { 'Key': '$button-danger-active-bg', 'Name': '50. Active state background color', 'Type': 'color' }, { 'Key': '$button-success-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-success-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-success-hover-bg', 'Name': '30. Hovered state background color', 'Type': 'color' }, { 'Key': '$button-success-focused-bg', 'Name': '40. Focused state background color', 'Type': 'color' }, { 'Key': '$button-success-active-bg', 'Name': '50. Active state background color', 'Type': 'color' }, { 'Key': '$button-group-normal-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-normal-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-default-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-default-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-danger-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-danger-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-success-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-success-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$colorbox-overlay-bg', 'Name': '10. Overlay background', 'Type': 'color' }, { 'Key': '$drawer-shader-background-color', 'Name': '10. Shader background color', 'Type': 'color' }, { 'Key': '$dropdowneditor-icon-active-color', 'Name': '90. Spin active icon color', 'Type': 'color' }, { 'Key': '$fieldset-field-label-color', 'Name': '10. Label text color', 'Type': 'color' }, { 'Key': '$fileuploader-filename-color', 'Name': '10. Filename text color', 'Type': 'color' }, { 'Key': '$fileuploader-falename-status-color', 'Name': '20. File status text color', 'Type': 'color' }, { 'Key': '$fileuploader-border-color', 'Name': '30. Border color on dragover', 'Type': 'color' }, { 'Key': '$filterbuilder-text-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$filterbuilder-text-focus-color', 'Name': '20. Focused text color', 'Type': 'color' }, { 'Key': '$filterbuilder-plus-icon-color', 'Name': '30. Plus icon color', 'Type': 'color' }, { 'Key': '$filterbuilder-remove-icon-color', 'Name': '40. Remove icon color', 'Type': 'color' }, { 'Key': '$filterbuilder-group-operation-color', 'Name': '50. Group operation button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-field-color', 'Name': '60. Data field button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-operator-color', 'Name': '70. Operation button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-value-color', 'Name': '80. Value button color', 'Type': 'color' }, { 'Key': '$form-field-item-color', 'Name': '10. Label text color', 'Type': 'color' }, { 'Key': '$form-group-border-color', 'Name': '20. Group border color', 'Type': 'color' }, { 'Key': '$gallery-indicator-bg', 'Name': '10. Indicator background color', 'Type': 'color' }, { 'Key': '$gallery-indicator-item-selected-bg', 'Name': '20. Selected indicator background color', 'Type': 'color' }, { 'Key': '$gallery-indicator-focused-bg', 'Name': '30. Focused indicator background color', 'Type': 'color' }, { 'Key': '$gallery-navbutton-hover-color', 'Name': '40. Hovered navigation button color', 'Type': 'color' }, { 'Key': '$gallery-navbutton-active-color', 'Name': '50. Active navigation button color', 'Type': 'color' }, { 'Key': '$calendar-header-color', 'Name': '20. Header text color', 'Type': 'color' }, { 'Key': '$calendar-cell-other-color', 'Name': '30. Other month text color', 'Type': 'color' }, { 'Key': '$calendar-cell-selected-bg', 'Name': '40. Selected cell background color', 'Type': 'color' }, { 'Key': '$calendar-shevron-icon-color', 'Name': '50. Shevron icon color', 'Type': 'color' }, { 'Key': '$list-group-color', 'Name': '10. Group header text color', 'Type': 'color' }, { 'Key': '$list-border-color', 'Name': '20. Group border color', 'Type': 'color' }, { 'Key': '$list-group-header-bg', 'Name': '20. Group header background color', 'Type': 'color' }, { 'Key': '$list-normal-color', 'Name': '10. Item text color', 'Type': 'color' }, { 'Key': '$list-expanded-group-color', 'Name': '25. Expanded group header text color', 'Type': 'color' }, { 'Key': '$list-item-hover-bg', 'Name': '30. Hovered item background color', 'Type': 'color' }, { 'Key': '$list-item-selected-bg', 'Name': '30. Selected item state background color', 'Type': 'color' }, { 'Key': '$list-item-active-bg', 'Name': '40. Active state item background color', 'Type': 'color' }, { 'Key': '$load-indicator-segment-bg-color', 'Name': '10. Load indicator color', 'Type': 'color' }, { 'Key': '$loadpanel-content-bg', 'Name': '20. Loadpanel background color', 'Type': 'color' }, { 'Key': '$menu-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$menu-item-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$overlay-content-bg', 'Name': '10. Content background color', 'Type': 'color' }, { 'Key': '$overlay-shader-bg', 'Name': '20. Shader background color', 'Type': 'color' }, { 'Key': '$pager-page-selected-color', 'Name': '150. Pager selected item text color', 'Type': 'color' }, { 'Key': '$pager-page-selected-bg', 'Name': '160. Pager selected item background color', 'Type': 'color' }, { 'Key': '$pivotgrid-area-color', 'Name': '10. Header text color', 'Type': 'color' }, { 'Key': '$pivotgrid-totalcolor', 'Name': '20. Totals background color', 'Type': 'color' }, { 'Key': '$pivotgrid-grandtotalcolor', 'Name': '30. Grand totals background color', 'Type': 'color' }, { 'Key': '$pivotgrid-field-area-text-color', 'Name': '40. Field area text color', 'Type': 'color' }, { 'Key': '$popup-title-bg', 'Name': '20. Header background color', 'Type': 'color' }, { 'Key': '$progressbar-bg', 'Name': '10. Bar background color', 'Type': 'color' }, { 'Key': '$progressbar-range-bg', 'Name': '20. Selected range background color', 'Type': 'color' }, { 'Key': '$progressbar-label-color', 'Name': '30. Label color', 'Type': 'color' }, { 'Key': '$scheduler-base-border-color', 'Name': '10. Border color', 'Type': 'color' }, { 'Key': '$scheduler-accent-border-color', 'Name': '20. Hour separator color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-text-color', 'Name': '30. Appointment text color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-base-color', 'Name': '40. Appointment background color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-start-color', 'Name': '50. Start appointment color', 'Type': 'color' }, { 'Key': '$scheduler-workspace-focused-cell-color', 'Name': '60. Focused cell color', 'Type': 'color' }, { 'Key': '$scheduler-first-month-border-color', 'Name': '70. First day of month separator color', 'Type': 'color' }, { 'Key': '$scheduler-current-time-cell-color', 'Name': '80. Date-time indicator color', 'Type': 'color' }, { 'Key': '$scrollable-scroll-bg', 'Name': '10. Scroller background color', 'Type': 'color' }, { 'Key': '$datagrid-base-background-color', 'Name': '60. Background color', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-item-color', 'Name': '20. Header text color', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-font-weight', 'Name': '25. Header text weight', 'Type': 'select', 'TypeValues': '300|500|700' }, { 'Key': '$datagrid-drag-header-border-color', 'Name': '35. Draggable header border color', 'Type': 'color' }, { 'Key': '$datagrid-selection-bg', 'Name': '55. Selected row background color', 'Type': 'color' }, { 'Key': '$datagrid-row-selected-border-color', 'Name': '60. Selected row border color', 'Type': 'color' }, { 'Key': '$datagrid-row-selected-color', 'Name': '50. Selected row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-focused-color', 'Name': '65. Focused row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-focused-bg', 'Name': '70. Focused row background color', 'Type': 'color' }, { 'Key': '$datagrid-menu-icon-color', 'Name': '30. Context menu icons color', 'Type': 'color' }, { 'Key': '$datagrid-cell-modified-border-color', 'Name': '40. Modified data background color', 'Type': 'color' }, { 'Key': '$datagrid-row-invalid-faded-border-color', 'Name': '45. Invalidate data faded color', 'Type': 'color' }, { 'Key': '$datagrid-group-row-color', 'Name': '90. Group row text color', 'Type': 'color' }, { 'Key': '$datagrid-group-row-bg', 'Name': '95. Group row background color', 'Type': 'color' }, { 'Key': '$datagrid-search-color', 'Name': '105. Highlighted text color', 'Type': 'color' }, { 'Key': '$datagrid-search-bg', 'Name': '110. Highlighted text background color', 'Type': 'color' }, { 'Key': '$datagrid-row-error-color', 'Name': '115. Error row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-error-bg', 'Name': '120. Error row background color', 'Type': 'color' }, { 'Key': '$datagrid-focused-border-color', 'Name': '75. Focused cell border color', 'Type': 'color' }, { 'Key': '$datagrid-editor-bg', 'Name': '80. Editor background', 'Type': 'color' }, { 'Key': '$datagrid-row-alternation-bg', 'Name': '85. Row alternation background color', 'Type': 'color' }, { 'Key': '$datagrid-summary-color', 'Name': '100. Summary item color', 'Type': 'color' }, { 'Key': '$selectbox-list-bg', 'Name': '10. Item background color', 'Type': 'color' }, { 'Key': '$material-slider-bar-bg', 'Name': '10. Slider bar background color', 'Type': 'color' }, { 'Key': '$material-slider-bg', 'Name': '20. Selected range background color', 'Type': 'color' }, { 'Key': '$material-slider-tooltip-color', 'Name': '30. Slider tooltip text color', 'Type': 'color' }, { 'Key': '$switch-bg', 'Name': '20. Track "OFF" background color', 'Type': 'color' }, { 'Key': '$switch-handle-off-bg', 'Name': '30. Handle "OFF" background color', 'Type': 'color' }, { 'Key': '$switch-on-bg', 'Name': '40. Track "ON" background color', 'Type': 'color' }, { 'Key': '$switch-handle-on-bg', 'Name': '50. Handle "ON" background color', 'Type': 'color' }, { 'Key': '$tabs-tab-color', 'Name': '10. Tab text color', 'Type': 'color' }, { 'Key': '$tabs-tab-selected-color', 'Name': '20. Selected tab text color', 'Type': 'color' }, { 'Key': '$tabs-selected-tab-bottom-border-color', 'Name': '30. Selected tab bottom border color', 'Type': 'color' }, { 'Key': '$tabs-tab-bg', 'Name': '40. Tab background color', 'Type': 'color' }, { 'Key': '$tabs-hovered-tab-bg-color', 'Name': '50. Hovered tab background color', 'Type': 'color' }, { 'Key': '$tagbox-tag-color', 'Name': '10. Tag text color', 'Type': 'color' }, { 'Key': '$tagbox-tag-bg', 'Name': '20. Tag background color', 'Type': 'color' }, { 'Key': '$tagbox-tag-active-color', 'Name': '30. Tag active text color', 'Type': 'color' }, { 'Key': '$tagbox-tag-button-remove-bg', 'Name': '40. Tag close button color', 'Type': 'color' }, { 'Key': '$textbox-search-icon-color', 'Name': '80. Search icon color', 'Type': 'color' }, { 'Key': '$texteditor-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$texteditor-placeholder-color', 'Name': '20. Placeholder text color', 'Type': 'color' }, { 'Key': '$texteditor-bg', 'Name': '30. Background color', 'Type': 'color' }, { 'Key': '$texteditor-focused-bg', 'Name': '40. Focused background color', 'Type': 'color' }, { 'Key': '$texteditor-border-color', 'Name': '50. Border color', 'Type': 'color' }, { 'Key': '$texteditor-hover-border-color', 'Name': '60. Hovered border color', 'Type': 'color' }, { 'Key': '$texteditor-focused-border-color', 'Name': '70. Focused border color', 'Type': 'color' }, { 'Key': '$texteditor-hover-bg', 'Name': '40. Hovered background color', 'Type': 'color' }, { 'Key': '$tileview-color', 'Name': '10. Item text color', 'Type': 'color' }, { 'Key': '$toast-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$toast-info-bg', 'Name': '20. Info background color', 'Type': 'color' }, { 'Key': '$toast-warning-bg', 'Name': '30. Warning background color', 'Type': 'color' }, { 'Key': '$toast-error-bg', 'Name': '40. Error background color', 'Type': 'color' }, { 'Key': '$toast-success-bg', 'Name': '50. Success background color', 'Type': 'color' }, { 'Key': '$toolbar-bg', 'Name': '10. Background color', 'Type': 'color' }, { 'Key': '$tooltip-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$tooltip-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$treeview-focused-bg', 'Name': '80. Focused state background color', 'Type': 'color' }, { 'Key': '$base-accent', 'Name': '10. Accent color', 'Type': 'color' }, { 'Key': '$base-font-family', 'Name': '10. Font family', 'Type': 'text' }, { 'Key': '$base-text-color', 'Name': '20. Text color', 'Type': 'color' }, { 'Key': '$base-label-color', 'Name': '20. Label color', 'Type': 'color' }, { 'Key': '$base-icon-color', 'Name': '40. Icon color', 'Type': 'color' }, { 'Key': '$base-spin-icon-color', 'Name': '50. Spin icon color', 'Type': 'color' }, { 'Key': '$base-bg', 'Name': '30. Background color', 'Type': 'color' }, { 'Key': '$base-border-color', 'Name': '40. Border color', 'Type': 'color' }, { 'Key': '$base-success', 'Name': '50. Success color', 'Type': 'color' }, { 'Key': '$base-warning', 'Name': '60. Warning color', 'Type': 'color' }, { 'Key': '$base-danger', 'Name': '70. Danger color', 'Type': 'color' }, { 'Key': '$base-hover-color', 'Name': '80. Hovered state text color', 'Type': 'color' }, { 'Key': '$base-hover-bg', 'Name': '90. Hovered state background color', 'Type': 'color' }, { 'Key': '$base-focus-color', 'Name': '100. Focused state text color', 'Type': 'color' }, { 'Key': '$base-focus-bg', 'Name': '110. Focused state background color', 'Type': 'color' }, { 'Key': '$base-link-color', 'Name': '30. Link color', 'Type': 'color' }, { 'Key': '$base-border-radius', 'Name': '120. Border radius', 'Type': 'text' }] };
-exports.version = '22.2.1-alpha-22313-0309';
+exports.metadata = { 'generic': [{ 'Key': '$accordion-color', 'Name': '50. Text color', 'Type': 'color' }, { 'Key': '$accordion-title-color', 'Name': '10. Item title text color', 'Type': 'color' }, { 'Key': '$accordion-item-title-opened-bg', 'Name': '20. Active item title background color', 'Type': 'color' }, { 'Key': '$accordion-item-border-color', 'Name': '30. Item border color', 'Type': 'color' }, { 'Key': '$accordion-item-focused-border-color', 'Name': '40. Focused item border color', 'Type': 'color' }, { 'Key': '$accordion-title-active-color', 'Name': '70. Item title active state text color', 'Type': 'color' }, { 'Key': '$accordion-item-hover-bg', 'Name': '90. Item title hovered state background color', 'Type': 'color' }, { 'Key': '$accordion-icon-active-color', 'Name': '30. Item active state icon color', 'Type': 'color' }, { 'Key': '$badge-color', 'Name': '130. Badge text color', 'Type': 'color' }, { 'Key': '$badge-bg', 'Name': '140. Badge background color', 'Type': 'color' }, { 'Key': '$button-normal-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-normal-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-normal-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$button-default-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-default-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-default-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$button-danger-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-danger-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-danger-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$button-success-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-success-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-success-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$button-group-normal-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-normal-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-default-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-default-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-danger-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-danger-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-success-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-success-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$calendar-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$calendar-header-color', 'Name': '10. Header text color', 'Type': 'color' }, { 'Key': '$calendar-cell-other-color', 'Name': '30. Other month text color', 'Type': 'color' }, { 'Key': '$calendar-bg', 'Name': '40. Background color', 'Type': 'color' }, { 'Key': '$calendar-hover-bg', 'Name': '50. Hovered cell background color', 'Type': 'color' }, { 'Key': '$calendar-cell-selected-bg', 'Name': '30. Selected cell background color', 'Type': 'color' }, { 'Key': '$calendar-cell-active-bg', 'Name': '70. Active state background Color', 'Type': 'color' }, { 'Key': '$calendar-border-color', 'Name': '80. Border color', 'Type': 'color' }, { 'Key': '$calendar-navigator-border-color', 'Name': '40. Date navigator border color', 'Type': 'color' }, { 'Key': '$calendar-navigator-hover-border-color', 'Name': '50. Hovered state date navigator border color', 'Type': 'color' }, { 'Key': '$calendar-shevron-icon-color', 'Name': '60. Shevron icon color', 'Type': 'color' }, { 'Key': '$checkbox-border-color', 'Name': '10. Border color', 'Type': 'color' }, { 'Key': '$checkbox-focused-borderd-color', 'Name': '70. Focused state border color', 'Type': 'color' }, { 'Key': '$checkbox-bg', 'Name': '40. Background color', 'Type': 'color' }, { 'Key': '$checkbox-hover-border-color', 'Name': '20. Hovered state border color', 'Type': 'color' }, { 'Key': '$checkbox-active-icon-bg', 'Name': '80. Active state background color', 'Type': 'color' }, { 'Key': '$colorbox-overlay-bg', 'Name': '10. Overlay background', 'Type': 'color' }, { 'Key': '$drawer-shader-background-color', 'Name': '10. Shader background color', 'Type': 'color' }, { 'Key': '$fieldset-field-label-color', 'Name': '10. Label text color', 'Type': 'color' }, { 'Key': '$fileuploader-filename-color', 'Name': '10. Filename text color', 'Type': 'color' }, { 'Key': '$fileuploader-falename-status-color', 'Name': '20. File status text color', 'Type': 'color' }, { 'Key': '$fileuploader-border-color', 'Name': '30. Border color on dragover', 'Type': 'color' }, { 'Key': '$filterbuilder-text-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$filterbuilder-text-focus-color', 'Name': '20. Focused text color', 'Type': 'color' }, { 'Key': '$filterbuilder-plus-icon-color', 'Name': '30. Plus icon color', 'Type': 'color' }, { 'Key': '$filterbuilder-remove-icon-color', 'Name': '40. Remove icon color', 'Type': 'color' }, { 'Key': '$filterbuilder-group-operation-color', 'Name': '50. Group operation button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-field-color', 'Name': '60. Data field button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-operator-color', 'Name': '70. Operation button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-value-color', 'Name': '80. Value button color', 'Type': 'color' }, { 'Key': '$filterbuilder-menu-icon-color', 'Name': '10. Menu icon color', 'Type': 'color' }, { 'Key': '$form-field-item-color', 'Name': '10. Label text color', 'Type': 'color' }, { 'Key': '$form-group-border-color', 'Name': '10. Group border color', 'Type': 'color' }, { 'Key': '$gallery-indicator-bg', 'Name': '10. Indicator background color', 'Type': 'color' }, { 'Key': '$gallery-indicator-item-selected-bg', 'Name': '20. Selected indicator background color', 'Type': 'color' }, { 'Key': '$gallery-indicator-focused-bg', 'Name': '30. Focused indicator background color', 'Type': 'color' }, { 'Key': '$gallery-navbutton-hover-color', 'Name': '30. Navigation button color', 'Type': 'color' }, { 'Key': '$gallery-nav-arrow-color', 'Name': '40. Navigation icon color', 'Type': 'color' }, { 'Key': '$gallery-navbutton-active-color', 'Name': '50. Active navigation button color', 'Type': 'color' }, { 'Key': '$datagrid-base-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$datagrid-base-background-color', 'Name': '60. Background color', 'Type': 'color' }, { 'Key': '$datagrid-border-color', 'Name': '70. Border color', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-item-color', 'Name': '20. Header text color', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-font-weight', 'Name': '25. Header text weight', 'Type': 'select', 'TypeValues': 'normal|bold|light' }, { 'Key': '$datagrid-drag-header-border-color', 'Name': '35. Draggable header border color', 'Type': 'color' }, { 'Key': '$datagrid-selection-bg', 'Name': '55. Selected row background color', 'Type': 'color' }, { 'Key': '$datagrid-row-selected-border-color', 'Name': '60. Selected row border color', 'Type': 'color' }, { 'Key': '$datagrid-row-selected-color', 'Name': '50. Selected row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-focused-color', 'Name': '65. Focused row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-focused-bg', 'Name': '70. Focused row background color', 'Type': 'color' }, { 'Key': '$datagrid-hover-bg', 'Name': '90. Hovered row background color', 'Type': 'color' }, { 'Key': '$datagrid-menu-icon-color', 'Name': '30. Context menu icons color', 'Type': 'color' }, { 'Key': '$datagrid-cell-modified-border-color', 'Name': '40. Modified data border color', 'Type': 'color' }, { 'Key': '$datagrid-row-invalid-faded-border-color', 'Name': '45. Invalidate data faded color', 'Type': 'color' }, { 'Key': '$datagrid-nodata-color', 'Name': '30. NoData message text color', 'Type': 'color' }, { 'Key': '$datagrid-group-row-color', 'Name': '90. Group row text color', 'Type': 'color' }, { 'Key': '$datagrid-group-row-bg', 'Name': '95. Group row background color', 'Type': 'color' }, { 'Key': '$datagrid-search-color', 'Name': '105. Highlighted text color', 'Type': 'color' }, { 'Key': '$datagrid-spin-icon-color', 'Name': '125. Spin icon color', 'Type': 'color' }, { 'Key': '$datagrid-search-bg', 'Name': '110. Highlighted text background color', 'Type': 'color' }, { 'Key': '$datagrid-row-error-color', 'Name': '115. Error row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-error-bg', 'Name': '120. Error row background color', 'Type': 'color' }, { 'Key': '$datagrid-link-color', 'Name': '40. Link color', 'Type': 'color' }, { 'Key': '$datagrid-focused-border-color', 'Name': '75. Focused cell border color', 'Type': 'color' }, { 'Key': '$datagrid-editor-bg', 'Name': '80. Editor background', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-bg', 'Name': '140. Column chooser background color', 'Type': 'color' }, { 'Key': '$datagrid-row-alternation-bg', 'Name': '85. Row alternation background color', 'Type': 'color' }, { 'Key': '$datagrid-summary-color', 'Name': '100. Summary item color', 'Type': 'color' }, { 'Key': '$list-border-color', 'Name': '20. Item border color', 'Type': 'color' }, { 'Key': '$list-group-color', 'Name': '20. Group header text color', 'Type': 'color' }, { 'Key': '$list-group-header-bg', 'Name': '30. Group header background color', 'Type': 'color' }, { 'Key': '$list-normal-color', 'Name': '10. Item text color', 'Type': 'color' }, { 'Key': '$list-item-hover-bg', 'Name': '30. Hovered item background color', 'Type': 'color' }, { 'Key': '$list-item-selected-bg', 'Name': '40. Selected item state background color', 'Type': 'color' }, { 'Key': '$list-item-focused-selected-bg', 'Name': '50. Focused selected item state background color', 'Type': 'color' }, { 'Key': '$list-focused-bg', 'Name': '60. Focused item state background color', 'Type': 'color' }, { 'Key': '$list-item-active-bg', 'Name': '50. Active state item background color', 'Type': 'color' }, { 'Key': '$loadindicator-bg', 'Name': '10. Load indicator color', 'Type': 'color' }, { 'Key': '$loadpanel-content-bg', 'Name': '20. Loadpanel background color', 'Type': 'color' }, { 'Key': '$menu-popup-bg', 'Name': '40. Popup background color', 'Type': 'color' }, { 'Key': '$menu-item-hover-bg', 'Name': '50. Hovered item background color', 'Type': 'color' }, { 'Key': '$menu-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$menu-item-hovered-color', 'Name': '55. Hovered item text color', 'Type': 'color' }, { 'Key': '$menu-item-expanded-color', 'Name': '10. Expanded item text color', 'Type': 'color' }, { 'Key': '$menu-item-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$menu-popup-border-color', 'Name': '20. Border color', 'Type': 'color' }, { 'Key': '$numberbox-spin-active-bg', 'Name': '10. Active spin buttons color', 'Type': 'color' }, { 'Key': '$numberbox-spin-hover-border-color', 'Name': '20. Hovered spin buttons border color', 'Type': 'color' }, { 'Key': '$numberbox-spin-icon-color', 'Name': '10. Spin icon color', 'Type': 'color' }, { 'Key': '$overlay-content-bg', 'Name': '10. Content background color', 'Type': 'color' }, { 'Key': '$overlay-shader-bg', 'Name': '20. Shader background color', 'Type': 'color' }, { 'Key': '$overlay-focus-border-color', 'Name': '30. Focus border color', 'Type': 'color' }, { 'Key': '$pager-page-selected-color', 'Name': '150. Pager selected item text color', 'Type': 'color' }, { 'Key': '$pager-page-selected-bg', 'Name': '160. Pager selected item background color', 'Type': 'color' }, { 'Key': '$pivotgrid-area-color', 'Name': '10. Header text color', 'Type': 'color' }, { 'Key': '$pivotgrid-totalcolor', 'Name': '20. Totals background color', 'Type': 'color' }, { 'Key': '$pivotgrid-grandtotalcolor', 'Name': '30. Grand totals background color', 'Type': 'color' }, { 'Key': '$pivotgrid-field-area-text-color', 'Name': '40. Field area text color', 'Type': 'color' }, { 'Key': '$pivotgrid-spin-icon-color', 'Name': '50. Spin icon color', 'Type': 'color' }, { 'Key': '$popup-title-bg', 'Name': '20. Header background color', 'Type': 'color' }, { 'Key': '$progressbar-bg', 'Name': '10. Bar background color', 'Type': 'color' }, { 'Key': '$progressbar-range-bg', 'Name': '20. Selected range background color', 'Type': 'color' }, { 'Key': '$radiogroup-checked-bg', 'Name': '10. Background color', 'Type': 'color' }, { 'Key': '$radiobutton-active-bg', 'Name': '40. Active state background color', 'Type': 'color' }, { 'Key': '$scheduler-base-border-color', 'Name': '10 Border color', 'Type': 'color' }, { 'Key': '$scheduler-accent-border-color', 'Name': '20. Hour separator color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-text-color', 'Name': '30. Appointment text color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-base-color', 'Name': '40. Appointment background color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-start-color', 'Name': '50. Start appointment color', 'Type': 'color' }, { 'Key': '$scheduler-first-month-border-color', 'Name': '60. First day of month separator color', 'Type': 'color' }, { 'Key': '$scheduler-workspace-focused-cell-color', 'Name': '70. Focused cell color', 'Type': 'color' }, { 'Key': '$scheduler-current-time-cell-color', 'Name': '80. Date-time indicator color', 'Type': 'color' }, { 'Key': '$scheduler-time-indicator-color', 'Name': '80. Date-time indicator color', 'Type': 'color' }, { 'Key': '$scrollable-scroll-bg', 'Name': '10. Scroller background color', 'Type': 'color' }, { 'Key': '$scrollable-scrollbar-active-bg', 'Name': '20. Scrollbar background color', 'Type': 'color' }, { 'Key': '$selectbox-list-bg', 'Name': '10. Item background color', 'Type': 'color' }, { 'Key': '$slider-bar-bg', 'Name': '10. Slider bar background color', 'Type': 'color' }, { 'Key': '$slider-range-bg', 'Name': '30. Selected range background color', 'Type': 'color' }, { 'Key': '$switch-border-color', 'Name': '10. Border color', 'Type': 'color' }, { 'Key': '$switch-on-color', 'Name': '10. "ON" label color', 'Type': 'color' }, { 'Key': '$switch-container-active-bg', 'Name': '30. Active state background color', 'Type': 'color' }, { 'Key': '$switch-off-color', 'Name': '20. "OFF" label color', 'Type': 'color' }, { 'Key': '$tabs-tab-color', 'Name': '10. Tab text color', 'Type': 'color' }, { 'Key': '$tabs-tab-selected-color', 'Name': '20. Selected tab text color', 'Type': 'color' }, { 'Key': '$tabs-tab-bg', 'Name': '30. Tab background color', 'Type': 'color' }, { 'Key': '$tabs-tab-selected-bg', 'Name': '40. Selected tab background color', 'Type': 'color' }, { 'Key': '$tabs-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$tabs-focused-border-color', 'Name': '40. Focus border color', 'Type': 'color' }, { 'Key': '$tabs-tab-hover-bg', 'Name': '50. Hover background color', 'Type': 'color' }, { 'Key': '$tagbox-tag-color', 'Name': '10. Tag text color', 'Type': 'color' }, { 'Key': '$tagbox-tag-bg', 'Name': '20. Tag background color', 'Type': 'color' }, { 'Key': '$tagbox-tag-button-remove-bg', 'Name': '30. Tag close button color', 'Type': 'color' }, { 'Key': '$textbox-search-icon-color', 'Name': '80. Search icon color', 'Type': 'color' }, { 'Key': '$texteditor-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$texteditor-placeholder-color', 'Name': '20. Placeholder text color', 'Type': 'color' }, { 'Key': '$texteditor-bg', 'Name': '30. Background color', 'Type': 'color' }, { 'Key': '$texteditor-filled-bg', 'Name': '40. Filled editor background color', 'Type': 'color' }, { 'Key': '$texteditor-border-color', 'Name': '50. Border color', 'Type': 'color' }, { 'Key': '$texteditor-focused-border-color', 'Name': '30. Focused border color', 'Type': 'color' }, { 'Key': '$texteditor-hover-border-color', 'Name': '60. Hovered border color', 'Type': 'color' }, { 'Key': '$tileview-color', 'Name': '10. Item text color', 'Type': 'color' }, { 'Key': '$toast-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$toast-info-bg', 'Name': '20. Info background color', 'Type': 'color' }, { 'Key': '$toast-warning-bg', 'Name': '30. Warning background color', 'Type': 'color' }, { 'Key': '$toast-error-bg', 'Name': '40. Error background color', 'Type': 'color' }, { 'Key': '$toast-success-bg', 'Name': '50. Success background color', 'Type': 'color' }, { 'Key': '$toolbar-bg', 'Name': '10. Background color', 'Type': 'color' }, { 'Key': '$tooltip-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$tooltip-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$tooltip-border-color', 'Name': '30. Border color', 'Type': 'color' }, { 'Key': '$treeview-focused-bg', 'Name': '10. Focused state background color', 'Type': 'color' }, { 'Key': '$treeview-hover-bg', 'Name': '90. Hovered state background color', 'Type': 'color' }, { 'Key': '$treeview-border-color', 'Name': '100. Border color', 'Type': 'color' }, { 'Key': '$treeview-item-selected-color', 'Name': '110. Selected item text color', 'Type': 'color' }, { 'Key': '$treeview-spin-icon-color', 'Name': '120. Spin icon color', 'Type': 'color' }, { 'Key': '$base-font-family', 'Name': '10. Font family', 'Type': 'text' }, { 'Key': '$base-accent', 'Name': '10. Accent color', 'Type': 'color' }, { 'Key': '$base-label-color', 'Name': '20. Label color', 'Type': 'color' }, { 'Key': '$base-link-color', 'Name': '30. Link color', 'Type': 'color' }, { 'Key': '$base-icon-color', 'Name': '40. Icon color', 'Type': 'color' }, { 'Key': '$base-text-color', 'Name': '20. Text color', 'Type': 'color' }, { 'Key': '$base-bg', 'Name': '30. Background color', 'Type': 'color' }, { 'Key': '$base-border-color', 'Name': '40. Border color', 'Type': 'color' }, { 'Key': '$base-border-radius', 'Name': '120. Border radius', 'Type': 'text' }, { 'Key': '$base-success', 'Name': '50. Success color', 'Type': 'color' }, { 'Key': '$base-warning', 'Name': '60. Warning color', 'Type': 'color' }, { 'Key': '$base-danger', 'Name': '70. Danger color', 'Type': 'color' }, { 'Key': '$base-hover-color', 'Name': '80. Hovered state text color', 'Type': 'color' }, { 'Key': '$base-hover-bg', 'Name': '90. Hovered state background color', 'Type': 'color' }, { 'Key': '$base-focus-color', 'Name': '100. Focused state text color', 'Type': 'color' }, { 'Key': '$base-focus-bg', 'Name': '110. Focused state background color', 'Type': 'color' }, { 'Key': '$base-invalid-color', 'Name': '1. Invalid widget state - active color', 'Type': 'color' }, { 'Key': '$base-invalid-faded-border-color', 'Name': '2. Invalid widget state - border color', 'Type': 'color' }, { 'Key': '$base-border-radius-small', 'Name': '70. Border radius', 'Type': 'text' }, { 'Key': '$base-border-radius-large', 'Name': '30. Border radius', 'Type': 'text' }, { 'Key': '$dropdowneditor-button-hover-bg', 'Name': '20. Dropdown button hovered state background color', 'Type': 'color' }, { 'Key': '$dropdowneditor-button-active-bg', 'Name': '30. Dropdown button active state background color', 'Type': 'color' }, { 'Key': '$dropdowneditor-icon-color', 'Name': '80. Spin icon color', 'Type': 'color' }, { 'Key': '$dropdowneditor-icon-active-color', 'Name': '90. Spin active icon color', 'Type': 'color' }], 'material': [{ 'Key': '$accordion-title-color', 'Name': '10. Item title text color', 'Type': 'color' }, { 'Key': '$accordion-item-border-color', 'Name': '20. Item border color', 'Type': 'color' }, { 'Key': '$accordion-icon-active-color', 'Name': '30. Item active state icon color', 'Type': 'color' }, { 'Key': '$badge-color', 'Name': '130. Badge text color', 'Type': 'color' }, { 'Key': '$badge-bg', 'Name': '140. Badge background color', 'Type': 'color' }, { 'Key': '$button-normal-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-normal-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-normal-hover-bg', 'Name': '30. Hovered state background color', 'Type': 'color' }, { 'Key': '$button-normal-focused-bg', 'Name': '40. Focused state background color', 'Type': 'color' }, { 'Key': '$button-normal-active-bg', 'Name': '50. Active state background color', 'Type': 'color' }, { 'Key': '$button-default-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-default-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-default-hover-bg', 'Name': '30. Hovered state background color', 'Type': 'color' }, { 'Key': '$button-default-focused-bg', 'Name': '40. Focused state background color', 'Type': 'color' }, { 'Key': '$button-default-active-bg', 'Name': '50. Active state background color', 'Type': 'color' }, { 'Key': '$button-danger-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-danger-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-danger-hover-bg', 'Name': '30. Hovered state background color', 'Type': 'color' }, { 'Key': '$button-danger-focused-bg', 'Name': '40. Focused state background color', 'Type': 'color' }, { 'Key': '$button-danger-active-bg', 'Name': '50. Active state background color', 'Type': 'color' }, { 'Key': '$button-success-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$button-success-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$button-success-hover-bg', 'Name': '30. Hovered state background color', 'Type': 'color' }, { 'Key': '$button-success-focused-bg', 'Name': '40. Focused state background color', 'Type': 'color' }, { 'Key': '$button-success-active-bg', 'Name': '50. Active state background color', 'Type': 'color' }, { 'Key': '$button-group-normal-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-normal-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-default-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-default-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-danger-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-danger-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$button-group-success-selected-color', 'Name': '10. Selected item text color', 'Type': 'color' }, { 'Key': '$button-group-success-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$calendar-header-color', 'Name': '20. Header text color', 'Type': 'color' }, { 'Key': '$calendar-cell-other-color', 'Name': '30. Other month text color', 'Type': 'color' }, { 'Key': '$calendar-cell-selected-bg', 'Name': '40. Selected cell background color', 'Type': 'color' }, { 'Key': '$calendar-shevron-icon-color', 'Name': '50. Shevron icon color', 'Type': 'color' }, { 'Key': '$colorbox-overlay-bg', 'Name': '10. Overlay background', 'Type': 'color' }, { 'Key': '$drawer-shader-background-color', 'Name': '10. Shader background color', 'Type': 'color' }, { 'Key': '$dropdowneditor-icon-active-color', 'Name': '90. Spin active icon color', 'Type': 'color' }, { 'Key': '$fieldset-field-label-color', 'Name': '10. Label text color', 'Type': 'color' }, { 'Key': '$fileuploader-filename-color', 'Name': '10. Filename text color', 'Type': 'color' }, { 'Key': '$fileuploader-falename-status-color', 'Name': '20. File status text color', 'Type': 'color' }, { 'Key': '$fileuploader-border-color', 'Name': '30. Border color on dragover', 'Type': 'color' }, { 'Key': '$filterbuilder-text-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$filterbuilder-text-focus-color', 'Name': '20. Focused text color', 'Type': 'color' }, { 'Key': '$filterbuilder-plus-icon-color', 'Name': '30. Plus icon color', 'Type': 'color' }, { 'Key': '$filterbuilder-remove-icon-color', 'Name': '40. Remove icon color', 'Type': 'color' }, { 'Key': '$filterbuilder-group-operation-color', 'Name': '50. Group operation button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-field-color', 'Name': '60. Data field button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-operator-color', 'Name': '70. Operation button color', 'Type': 'color' }, { 'Key': '$filterbuilder-item-value-color', 'Name': '80. Value button color', 'Type': 'color' }, { 'Key': '$form-field-item-color', 'Name': '10. Label text color', 'Type': 'color' }, { 'Key': '$form-group-border-color', 'Name': '20. Group border color', 'Type': 'color' }, { 'Key': '$gallery-indicator-bg', 'Name': '10. Indicator background color', 'Type': 'color' }, { 'Key': '$gallery-indicator-item-selected-bg', 'Name': '20. Selected indicator background color', 'Type': 'color' }, { 'Key': '$gallery-indicator-focused-bg', 'Name': '30. Focused indicator background color', 'Type': 'color' }, { 'Key': '$gallery-navbutton-hover-color', 'Name': '40. Hovered navigation button color', 'Type': 'color' }, { 'Key': '$gallery-navbutton-active-color', 'Name': '50. Active navigation button color', 'Type': 'color' }, { 'Key': '$datagrid-base-background-color', 'Name': '60. Background color', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-item-color', 'Name': '20. Header text color', 'Type': 'color' }, { 'Key': '$datagrid-columnchooser-font-weight', 'Name': '25. Header text weight', 'Type': 'select', 'TypeValues': '300|500|700' }, { 'Key': '$datagrid-drag-header-border-color', 'Name': '35. Draggable header border color', 'Type': 'color' }, { 'Key': '$datagrid-selection-bg', 'Name': '55. Selected row background color', 'Type': 'color' }, { 'Key': '$datagrid-row-selected-border-color', 'Name': '60. Selected row border color', 'Type': 'color' }, { 'Key': '$datagrid-row-selected-color', 'Name': '50. Selected row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-focused-color', 'Name': '65. Focused row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-focused-bg', 'Name': '70. Focused row background color', 'Type': 'color' }, { 'Key': '$datagrid-menu-icon-color', 'Name': '30. Context menu icons color', 'Type': 'color' }, { 'Key': '$datagrid-cell-modified-border-color', 'Name': '40. Modified data background color', 'Type': 'color' }, { 'Key': '$datagrid-row-invalid-faded-border-color', 'Name': '45. Invalidate data faded color', 'Type': 'color' }, { 'Key': '$datagrid-group-row-color', 'Name': '90. Group row text color', 'Type': 'color' }, { 'Key': '$datagrid-group-row-bg', 'Name': '95. Group row background color', 'Type': 'color' }, { 'Key': '$datagrid-search-color', 'Name': '105. Highlighted text color', 'Type': 'color' }, { 'Key': '$datagrid-search-bg', 'Name': '110. Highlighted text background color', 'Type': 'color' }, { 'Key': '$datagrid-row-error-color', 'Name': '115. Error row text color', 'Type': 'color' }, { 'Key': '$datagrid-row-error-bg', 'Name': '120. Error row background color', 'Type': 'color' }, { 'Key': '$datagrid-focused-border-color', 'Name': '75. Focused cell border color', 'Type': 'color' }, { 'Key': '$datagrid-editor-bg', 'Name': '80. Editor background', 'Type': 'color' }, { 'Key': '$datagrid-row-alternation-bg', 'Name': '85. Row alternation background color', 'Type': 'color' }, { 'Key': '$datagrid-summary-color', 'Name': '100. Summary item color', 'Type': 'color' }, { 'Key': '$list-group-color', 'Name': '10. Group header text color', 'Type': 'color' }, { 'Key': '$list-border-color', 'Name': '20. Group border color', 'Type': 'color' }, { 'Key': '$list-group-header-bg', 'Name': '20. Group header background color', 'Type': 'color' }, { 'Key': '$list-normal-color', 'Name': '10. Item text color', 'Type': 'color' }, { 'Key': '$list-expanded-group-color', 'Name': '25. Expanded group header text color', 'Type': 'color' }, { 'Key': '$list-item-hover-bg', 'Name': '30. Hovered item background color', 'Type': 'color' }, { 'Key': '$list-item-selected-bg', 'Name': '30. Selected item state background color', 'Type': 'color' }, { 'Key': '$list-item-active-bg', 'Name': '40. Active state item background color', 'Type': 'color' }, { 'Key': '$load-indicator-segment-bg-color', 'Name': '10. Load indicator color', 'Type': 'color' }, { 'Key': '$loadpanel-content-bg', 'Name': '20. Loadpanel background color', 'Type': 'color' }, { 'Key': '$menu-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$menu-item-selected-bg', 'Name': '20. Selected item background color', 'Type': 'color' }, { 'Key': '$overlay-content-bg', 'Name': '10. Content background color', 'Type': 'color' }, { 'Key': '$overlay-shader-bg', 'Name': '20. Shader background color', 'Type': 'color' }, { 'Key': '$pager-page-selected-color', 'Name': '150. Pager selected item text color', 'Type': 'color' }, { 'Key': '$pager-page-selected-bg', 'Name': '160. Pager selected item background color', 'Type': 'color' }, { 'Key': '$pivotgrid-area-color', 'Name': '10. Header text color', 'Type': 'color' }, { 'Key': '$pivotgrid-totalcolor', 'Name': '20. Totals background color', 'Type': 'color' }, { 'Key': '$pivotgrid-grandtotalcolor', 'Name': '30. Grand totals background color', 'Type': 'color' }, { 'Key': '$pivotgrid-field-area-text-color', 'Name': '40. Field area text color', 'Type': 'color' }, { 'Key': '$popup-title-bg', 'Name': '20. Header background color', 'Type': 'color' }, { 'Key': '$progressbar-bg', 'Name': '10. Bar background color', 'Type': 'color' }, { 'Key': '$progressbar-range-bg', 'Name': '20. Selected range background color', 'Type': 'color' }, { 'Key': '$progressbar-label-color', 'Name': '30. Label color', 'Type': 'color' }, { 'Key': '$scheduler-base-border-color', 'Name': '10. Border color', 'Type': 'color' }, { 'Key': '$scheduler-accent-border-color', 'Name': '20. Hour separator color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-text-color', 'Name': '30. Appointment text color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-base-color', 'Name': '40. Appointment background color', 'Type': 'color' }, { 'Key': '$scheduler-appointment-start-color', 'Name': '50. Start appointment color', 'Type': 'color' }, { 'Key': '$scheduler-workspace-focused-cell-color', 'Name': '60. Focused cell color', 'Type': 'color' }, { 'Key': '$scheduler-first-month-border-color', 'Name': '70. First day of month separator color', 'Type': 'color' }, { 'Key': '$scheduler-current-time-cell-color', 'Name': '80. Date-time indicator color', 'Type': 'color' }, { 'Key': '$scrollable-scroll-bg', 'Name': '10. Scroller background color', 'Type': 'color' }, { 'Key': '$selectbox-list-bg', 'Name': '10. Item background color', 'Type': 'color' }, { 'Key': '$material-slider-bar-bg', 'Name': '10. Slider bar background color', 'Type': 'color' }, { 'Key': '$material-slider-bg', 'Name': '20. Selected range background color', 'Type': 'color' }, { 'Key': '$material-slider-tooltip-color', 'Name': '30. Slider tooltip text color', 'Type': 'color' }, { 'Key': '$switch-bg', 'Name': '20. Track "OFF" background color', 'Type': 'color' }, { 'Key': '$switch-handle-off-bg', 'Name': '30. Handle "OFF" background color', 'Type': 'color' }, { 'Key': '$switch-on-bg', 'Name': '40. Track "ON" background color', 'Type': 'color' }, { 'Key': '$switch-handle-on-bg', 'Name': '50. Handle "ON" background color', 'Type': 'color' }, { 'Key': '$tabs-tab-color', 'Name': '10. Tab text color', 'Type': 'color' }, { 'Key': '$tabs-tab-selected-color', 'Name': '20. Selected tab text color', 'Type': 'color' }, { 'Key': '$tabs-selected-tab-bottom-border-color', 'Name': '30. Selected tab bottom border color', 'Type': 'color' }, { 'Key': '$tabs-tab-bg', 'Name': '40. Tab background color', 'Type': 'color' }, { 'Key': '$tabs-hovered-tab-bg-color', 'Name': '50. Hovered tab background color', 'Type': 'color' }, { 'Key': '$tagbox-tag-color', 'Name': '10. Tag text color', 'Type': 'color' }, { 'Key': '$tagbox-tag-bg', 'Name': '20. Tag background color', 'Type': 'color' }, { 'Key': '$tagbox-tag-active-color', 'Name': '30. Tag active text color', 'Type': 'color' }, { 'Key': '$tagbox-tag-button-remove-bg', 'Name': '40. Tag close button color', 'Type': 'color' }, { 'Key': '$textbox-search-icon-color', 'Name': '80. Search icon color', 'Type': 'color' }, { 'Key': '$texteditor-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$texteditor-placeholder-color', 'Name': '20. Placeholder text color', 'Type': 'color' }, { 'Key': '$texteditor-bg', 'Name': '30. Background color', 'Type': 'color' }, { 'Key': '$texteditor-focused-bg', 'Name': '40. Focused background color', 'Type': 'color' }, { 'Key': '$texteditor-border-color', 'Name': '50. Border color', 'Type': 'color' }, { 'Key': '$texteditor-hover-border-color', 'Name': '60. Hovered border color', 'Type': 'color' }, { 'Key': '$texteditor-focused-border-color', 'Name': '70. Focused border color', 'Type': 'color' }, { 'Key': '$texteditor-hover-bg', 'Name': '40. Hovered background color', 'Type': 'color' }, { 'Key': '$tileview-color', 'Name': '10. Item text color', 'Type': 'color' }, { 'Key': '$toast-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$toast-info-bg', 'Name': '20. Info background color', 'Type': 'color' }, { 'Key': '$toast-warning-bg', 'Name': '30. Warning background color', 'Type': 'color' }, { 'Key': '$toast-error-bg', 'Name': '40. Error background color', 'Type': 'color' }, { 'Key': '$toast-success-bg', 'Name': '50. Success background color', 'Type': 'color' }, { 'Key': '$toolbar-bg', 'Name': '10. Background color', 'Type': 'color' }, { 'Key': '$tooltip-color', 'Name': '10. Text color', 'Type': 'color' }, { 'Key': '$tooltip-bg', 'Name': '20. Background color', 'Type': 'color' }, { 'Key': '$treeview-focused-bg', 'Name': '80. Focused state background color', 'Type': 'color' }, { 'Key': '$base-accent', 'Name': '10. Accent color', 'Type': 'color' }, { 'Key': '$base-font-family', 'Name': '10. Font family', 'Type': 'text' }, { 'Key': '$base-text-color', 'Name': '20. Text color', 'Type': 'color' }, { 'Key': '$base-label-color', 'Name': '20. Label color', 'Type': 'color' }, { 'Key': '$base-icon-color', 'Name': '40. Icon color', 'Type': 'color' }, { 'Key': '$base-spin-icon-color', 'Name': '50. Spin icon color', 'Type': 'color' }, { 'Key': '$base-bg', 'Name': '30. Background color', 'Type': 'color' }, { 'Key': '$base-border-color', 'Name': '40. Border color', 'Type': 'color' }, { 'Key': '$base-success', 'Name': '50. Success color', 'Type': 'color' }, { 'Key': '$base-warning', 'Name': '60. Warning color', 'Type': 'color' }, { 'Key': '$base-danger', 'Name': '70. Danger color', 'Type': 'color' }, { 'Key': '$base-hover-color', 'Name': '80. Hovered state text color', 'Type': 'color' }, { 'Key': '$base-hover-bg', 'Name': '90. Hovered state background color', 'Type': 'color' }, { 'Key': '$base-focus-color', 'Name': '100. Focused state text color', 'Type': 'color' }, { 'Key': '$base-focus-bg', 'Name': '110. Focused state background color', 'Type': 'color' }, { 'Key': '$base-link-color', 'Name': '30. Link color', 'Type': 'color' }, { 'Key': '$base-border-radius', 'Name': '120. Border radius', 'Type': 'text' }] };
+exports.version = '22.2.3';
 exports.browsersList = ['last 2 versions', 'ios > 9', '> 1%'];
 exports.dependencies = { 'loadindicator': [], 'loadpanel': ['loadindicator'], 'validation': [], 'scrollview': ['loadindicator', 'loadpanel'], 'button': ['validation'], 'popup': ['validation', 'button'], 'toast': [], 'popover': ['validation', 'button', 'popup'], 'actionsheet': ['validation', 'button', 'popup', 'popover'], 'textbox': ['validation', 'button', 'loadindicator'], 'list': ['validation', 'button', 'loadindicator', 'loadpanel', 'scrollview'], 'autocomplete': ['validation', 'button', 'loadindicator', 'textbox', 'popup', 'loadpanel', 'scrollview', 'list'], 'box': [], 'buttongroup': ['validation', 'button'], 'dropdownbutton': ['validation', 'button', 'buttongroup', 'popup', 'loadindicator', 'loadpanel', 'scrollview', 'list'], 'calendar': ['validation', 'button'], 'checkbox': ['validation'], 'numberbox': ['validation', 'button', 'loadindicator'], 'colorbox': ['validation', 'button', 'loadindicator', 'numberbox', 'textbox', 'popup'], 'selectbox': ['validation', 'button', 'loadindicator', 'textbox', 'popup', 'loadpanel', 'scrollview', 'list', 'checkbox'], 'datebox': ['validation', 'button', 'loadindicator', 'textbox', 'popup', 'calendar', 'numberbox', 'loadpanel', 'scrollview', 'list', 'checkbox', 'selectbox', 'box'], 'drawer': [], 'deferrendering': ['loadindicator'], 'dropdownbox': ['validation', 'button', 'loadindicator', 'textbox', 'popup'], 'progressbar': ['validation'], 'fileuploader': ['validation', 'button', 'progressbar'], 'multiview': [], 'tabs': ['validation', 'button'], 'tabpanel': ['multiview', 'validation', 'button', 'tabs'], 'responsivebox': ['box'], 'form': ['validation', 'multiview', 'button', 'tabs', 'tabpanel', 'box', 'responsivebox', 'loadindicator', 'textbox', 'numberbox', 'checkbox', 'popup', 'calendar', 'loadpanel', 'scrollview', 'list', 'selectbox', 'datebox'], 'gallery': [], 'toolbar': ['validation', 'button', 'loadindicator', 'loadpanel', 'scrollview', 'popup'], 'contextmenu': ['validation', 'button', 'loadindicator', 'textbox'], 'htmleditor': ['validation', 'button', 'loadindicator', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'textbox', 'list', 'checkbox', 'selectbox', 'numberbox', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'calendar', 'datebox', 'form', 'buttongroup', 'colorbox', 'progressbar', 'fileuploader', 'contextmenu'], 'sortable': [], 'lookup': ['validation', 'button', 'loadindicator', 'textbox', 'popup', 'loadpanel', 'scrollview', 'list', 'popover'], 'map': [], 'radiogroup': ['validation'], 'tooltip': ['validation', 'button', 'popup', 'popover'], 'slider': ['validation', 'button', 'popup', 'popover', 'tooltip'], 'rangeslider': ['validation', 'button', 'popup', 'popover', 'tooltip', 'slider'], 'speeddialaction': [], 'switch': ['validation'], 'tagbox': ['validation', 'button', 'loadindicator', 'textbox', 'popup', 'loadpanel', 'scrollview', 'list', 'checkbox', 'selectbox'], 'textarea': ['validation', 'button', 'loadindicator', 'textbox'], 'tileview': ['loadindicator', 'loadpanel', 'scrollview'], 'accordion': [], 'treeview': ['validation', 'button', 'loadindicator', 'textbox', 'checkbox'], 'menu': ['validation', 'button', 'loadindicator', 'textbox', 'contextmenu', 'checkbox', 'treeview'], 'filterbuilder': ['validation', 'button', 'loadindicator', 'textbox', 'checkbox', 'treeview', 'popup', 'numberbox', 'loadpanel', 'scrollview', 'list', 'selectbox', 'calendar', 'box', 'datebox'], 'datagrid': ['loadindicator', 'loadpanel', 'validation', 'button', 'textbox', 'contextmenu', 'scrollview', 'popup', 'toolbar', 'checkbox', 'treeview', 'numberbox', 'list', 'selectbox', 'calendar', 'box', 'datebox', 'multiview', 'tabs', 'tabpanel', 'responsivebox', 'form', 'menu', 'filterbuilder', 'buttongroup', 'dropdownbutton', 'sortable'], 'treelist': ['loadindicator', 'loadpanel', 'validation', 'button', 'textbox', 'contextmenu', 'scrollview', 'popup', 'toolbar'], 'pivotgrid': ['loadindicator', 'loadpanel', 'validation', 'button', 'popup', 'textbox', 'checkbox', 'treeview', 'scrollview', 'list', 'contextmenu'], 'scheduler': ['validation', 'button', 'popup', 'loadindicator', 'loadpanel', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'textbox', 'numberbox', 'checkbox', 'calendar', 'scrollview', 'list', 'selectbox', 'datebox', 'form', 'buttongroup', 'radiogroup', 'textarea', 'tagbox', 'switch', 'popover', 'tooltip', 'toolbar', 'dropdownbutton'], 'filemanager': ['toast', 'validation', 'button', 'loadindicator', 'textbox', 'contextmenu', 'checkbox', 'treeview', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'numberbox', 'list', 'selectbox', 'calendar', 'box', 'datebox', 'multiview', 'tabs', 'tabpanel', 'responsivebox', 'form', 'menu', 'filterbuilder', 'buttongroup', 'dropdownbutton', 'sortable', 'datagrid', 'drawer', 'progressbar', 'fileuploader'], 'diagram': ['loadindicator', 'validation', 'button', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'textbox', 'contextmenu', 'list', 'checkbox', 'selectbox', 'numberbox', 'colorbox', 'popover', 'accordion', 'tooltip', 'multiview', 'tabs', 'tabpanel', 'progressbar', 'fileuploader'], 'gantt': ['loadindicator', 'loadpanel', 'validation', 'button', 'popup', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'textbox', 'numberbox', 'checkbox', 'calendar', 'scrollview', 'list', 'selectbox', 'datebox', 'form', 'tagbox', 'radiogroup', 'popover', 'actionsheet', 'toolbar', 'contextmenu', 'treelist', 'treeview', 'menu', 'filterbuilder', 'sortable'] };

package/data/scss/widgets/base/_gridBase.scss

@@ -369,6 +369,8 @@
     }
 
     .dx-#{$widget-name}-best-fit {
+      max-width: none !important; // stylelint-disable-line declaration-no-important
+
       .dx-column-indicators {
         float: none !important; // stylelint-disable-line declaration-no-important
 

package/data/scss/widgets/base/_tabs.scss

@@ -6,7 +6,7 @@
 $nav-button-width: 25px;
 $icon-size: 16px;
 
-@mixin dx-tabs-ie-hack() {
+@mixin dx-tabs-link() {
   a {
     position: absolute;
     top: 0;
@@ -20,10 +20,6 @@ $icon-size: 16px;
   }
 }
 
-.dx-tabs-ie-hack {
-  @include dx-tabs-ie-hack();
-}
-
 .dx-tabs {
   @include user-select(none);
 
@@ -105,7 +101,7 @@ $icon-size: 16px;
   cursor: pointer;
   white-space: nowrap;
 
-  @include dx-tabs-ie-hack();
+  @include dx-tabs-link();
 
   .dx-icon {
     width: $icon-size;
@@ -135,9 +131,3 @@ $icon-size: 16px;
   display: inline-block;
   vertical-align: top;
 }
-
-.dx-state-disabled {
-  .dx-tab {
-    cursor: default;
-  }
-}

package/data/scss/widgets/base/_toolbar.scss

@@ -129,55 +129,76 @@
   display: none;
 }
 
-.dx-dropdownmenu-popup-wrapper .dx-toolbar-menu-custom > .dx-list-item-content,
-.dx-toolbar-menu-section .dx-toolbar-hidden-button > .dx-list-item-content,
-.dx-toolbar-menu-section .dx-toolbar-hidden-button-group > .dx-list-item-content {
+.dx-dropdownmenu-popup-wrapper .dx-toolbar-menu-custom > .dx-list-item-content {
   padding: 0;
 }
 
 .dx-toolbar-menu-section {
+  .dx-toolbar-hidden-button,
+  .dx-toolbar-hidden-button-group {
+    .dx-toolbar-item-content,
+    .dx-toolbar-item-auto-hide,
+    .dx-list-item-content {
+      padding: 0;
+
+      > .dx-button,
+      &.dx-button {
+        padding: 0;
+        display: inline-flex;
+      }
+
+      > .dx-button,
+      &.dx-button,
+      > .dx-buttongroup,
+      &.dx-buttongroup {
+        .dx-button-content {
+          justify-content: left;
+
+          @at-root #{selector-append(".dx-rtl", &)},
+          .dx-rtl & {
+            justify-content: right;
+          }
+        }
+      }
+    }
+  }
+
   &.dx-toolbar-menu-last-section {
     border-bottom: none;
   }
 
-  .dx-toolbar-item-content,
   .dx-list-item-content {
-    > .dx-button,
-    > .dx-buttongroup {
-      .dx-button-content {
-        justify-content: left;
-
-        @at-root #{selector-append(".dx-rtl", &)},
-        .dx-rtl & {
-          justify-content: right;
-        }
-      }
+    &::before {
+      content: none;
     }
   }
 
-  .dx-toolbar-hidden-button {
-    .dx-toolbar-item-auto-hide {
+  .dx-toolbar-item-auto-hide,
+  .dx-toolbar-item-content,
+  .dx-list-item-content {
+    padding: 0;
+
+    > .dx-list,
+    &.dx-list {
       padding: 0;
     }
 
+    > .dx-button,
+    &.dx-button {
+      width: 100%;
+    }
+  }
+
+  .dx-toolbar-hidden-button {
     .dx-button {
+      width: 100%;
       border: none;
       margin: 0;
-      width: 100%;
-      padding: 10px;
       box-shadow: none;
     }
   }
 
   .dx-toolbar-hidden-button-group {
-    .dx-toolbar-item-auto-hide {
-      padding: 0;
-    }
-
-    &.dx-state-hover {
-      background-color: transparent;
-    }
-
     .dx-buttongroup {
       width: 100%;
 
@@ -196,6 +217,7 @@
   display: none;
 }
 
+.dx-list-item-content,
 .dx-toolbar-item-content {
   > .dx-texteditor,
   &.dx-texteditor {

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

@@ -15,7 +15,7 @@
   }
 
   .dx-diagram-i-connector-begin-none {
-    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22%D0%A1%D0%BB%D0%BE%D0%B9_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FF0000%3B%7D%0A%09.st1%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M1%2C13l9-9l1%2C1l-9%2C9L1%2C13z%22%20fill%3D%22currentColor%22%2F%3E%0A%3Cpath%20class%3D%22st1%22%20d%3D%22M12%2C8V3H0v12h12v-5h16V8H12z%20M10%2C13H2V5h8V13z%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FF0000%3B%7D%0A%09.st1%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M1%2C13l9-9l1%2C1l-9%2C9L1%2C13z%22%20fill%3D%22currentColor%22%2F%3E%0A%3Cpath%20class%3D%22st1%22%20d%3D%22M12%2C8V3H0v12h12v-5h16V8H12z%20M10%2C13H2V5h8V13z%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-begin-arrow {
@@ -27,11 +27,11 @@
   }
 
   .dx-diagram-i-connector-begin-filled-triangle {
-    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22%D0%A1%D0%BB%D0%BE%D0%B9_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M13%2C10v5L0%2C9l13-6v5h15v2H13z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M13%2C10v5L0%2C9l13-6v5h15v2H13z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-none {
-    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22%D0%A1%D0%BB%D0%BE%D0%B9_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FF0000%3B%7D%0A%09.st1%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M17%2C13l9-9l1%2C1l-9%2C9L17%2C13z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3Cpath%20class%3D%22st1%22%20d%3D%22M0%2C8v2h16v5h12V3H16v5H0z%20M18%2C5h8v8h-8V5z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FF0000%3B%7D%0A%09.st1%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M17%2C13l9-9l1%2C1l-9%2C9L17%2C13z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3Cpath%20class%3D%22st1%22%20d%3D%22M0%2C8v2h16v5h12V3H16v5H0z%20M18%2C5h8v8h-8V5z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-arrow {
@@ -47,11 +47,11 @@
   }
 
   .dx-diagram-i-connector-orthogonal {
-    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22%D0%A1%D0%BB%D0%BE%D0%B9_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M20%2C18v-8h3V5H8v3H0V0h8v3h15h2v2v5h3v8H20z%20M6%2C2H2v4h4V2z%20M26%2C12h-4v4h4V12z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M20%2C18v-8h3V5H8v3H0V0h8v3h15h2v2v5h3v8H20z%20M6%2C2H2v4h4V2z%20M26%2C12h-4v4h4V12z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-straight {
-    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22%D0%A1%D0%BB%D0%BE%D0%B9_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M20%2C10v2.2L8%2C2.8V0H0v8h8V5.8l12%2C9.3V18h8v-8H20z%20M6%2C6H2V2h4V6z%20M26%2C16h-4v-4h4V16z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2028%2018%22%20style%3D%22enable-background%3Anew%200%200%2028%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M20%2C10v2.2L8%2C2.8V0H0v8h8V5.8l12%2C9.3V18h8v-8H20z%20M6%2C6H2V2h4V6z%20M26%2C16h-4v-4h4V16z%22%20fill%3D%22currentColor%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"), $toolbar-color, 1.56 * $icon-size, $icon-size);
   }
 
   .dx-diagram-i-line-solid {

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

@@ -556,6 +556,10 @@ $pivotgrid-expand-icon-text-offset: 0;
 
   .dx-icon-hierarchy {
     background: $pivotgrid-hierarchy-image no-repeat center center;
+
+    &::before {
+      content: none;
+    }
   }
 }
 

package/data/scss/widgets/generic/button/_index.scss

@@ -44,123 +44,15 @@
 }
 
 .dx-button-mode-contained {
-  @include dx-button-styling-variant(
-    $button-normal-bg, $button-normal-border-color, $button-normal-color,
-    $button-normal-contained-bg-hover, $button-normal-border-color,
-    $button-normal-contained-bg-focused, $button-normal-border-color,
-    $button-normal-contained-bg-active, $button-normal-border-color, $button-normal-color,
-    $button-normal-color
-  );
-
-  &.dx-button-danger {
-    @include dx-button-styling-variant(
-      $button-danger-bg, transparent, $button-danger-color,
-      $button-danger-contained-bg-hover, transparent,
-      $button-danger-contained-bg-focused, transparent,
-      $button-danger-contained-bg-active, transparent, $button-danger-color,
-      $button-danger-color
-    );
-  }
-
-  &.dx-button-success {
-    @include dx-button-styling-variant(
-      $button-success-bg, transparent, $button-success-color,
-      $button-success-contained-bg-hover, transparent,
-      $button-success-contained-bg-focused, transparent,
-      $button-success-contained-bg-active, transparent, $button-success-color,
-      $button-success-color
-    );
-  }
-
-  &.dx-button-default {
-    @include dx-button-styling-variant(
-      $button-default-bg, transparent, $button-default-color,
-      $button-default-contained-bg-hover, transparent,
-      $button-default-contained-bg-focused, transparent,
-      $button-default-contained-bg-active, transparent, $button-default-color,
-      $button-default-color
-    );
-  }
+  @include dx-button-mode-contained-styling();
 }
 
 .dx-button-mode-outlined {
-  @include dx-button-styling-variant(
-    transparent, $button-normal-border-color, $button-normal-color,
-    $button-normal-outlined-bg-hover, $button-normal-border-color,
-    $button-normal-outlined-bg-focused, $button-normal-border-color,
-    $button-normal-outlined-bg-active, $button-normal-border-color, $button-normal-color,
-    $button-normal-color
-  );
-
-  &.dx-button-danger {
-    @include dx-button-styling-variant(
-      transparent, $button-danger-border-color, $button-danger-border-color,
-      $button-danger-outlined-bg-hover, $button-danger-border-color,
-      $button-danger-outlined-bg-focused, $button-danger-border-color,
-      $button-danger-outlined-bg-active, $button-danger-border-color, $button-danger-border-color,
-      $button-danger-border-color
-    );
-  }
-
-  &.dx-button-success {
-    @include dx-button-styling-variant(
-      transparent, $button-success-border-color, $button-success-border-color,
-      $button-success-outlined-bg-hover, $button-success-border-color,
-      $button-success-outlined-bg-focused, $button-success-border-color,
-      $button-success-outlined-bg-active, $button-success-border-color, $button-success-border-color,
-      $button-success-border-color
-    );
-  }
-
-  &.dx-button-default {
-    @include dx-button-styling-variant(
-      transparent, $button-default-border-color, $button-default-border-color,
-      $button-default-outlined-bg-hover, $button-default-border-color,
-      $button-default-outlined-bg-focused, $button-default-border-color,
-      $button-default-outlined-bg-active, $button-default-border-color, $button-default-border-color,
-      $button-default-border-color
-    );
-  }
+  @include dx-button-mode-outlined-styling();
 }
 
 .dx-button-mode-text {
-  @include dx-button-styling-variant(
-    transparent, transparent, $button-normal-color,
-    $button-normal-text-bg-hover, transparent,
-    $button-normal-text-bg-focused, transparent,
-    $button-normal-text-bg-active, transparent, $button-normal-color,
-    $button-normal-color
-  );
-
-  &.dx-button-danger {
-    @include dx-button-styling-variant(
-      transparent, transparent, $button-danger-border-color,
-      $button-danger-text-bg-hover, transparent,
-      $button-danger-text-bg-focused, transparent,
-      $button-danger-text-bg-active, transparent, $button-danger-border-color,
-      $button-danger-border-color
-    );
-  }
-
-  &.dx-button-success {
-    @include dx-button-styling-variant(
-      transparent, transparent, $button-success-border-color,
-      $button-success-text-bg-hover, transparent,
-      $button-success-text-bg-focused, transparent,
-      $button-success-text-bg-active, transparent, $button-success-border-color,
-      $button-success-border-color
-    );
-  }
-
-  &.dx-button-default {
-    @include dx-button-styling-variant(
-      transparent, transparent, $button-default-border-color,
-      $button-default-text-bg-hover, transparent,
-      $button-default-text-bg-focused, transparent,
-      $button-default-text-bg-active, transparent, $button-default-border-color,
-      $button-default-border-color
-    );
-  }
+  @include dx-button-mode-text-styling();
 }
 
 .dx-button-normal,

package/data/scss/widgets/generic/button/_mixins.scss

@@ -3,10 +3,11 @@
 @use "../sizes" as *;
 @use "sizes" as *;
 @use "colors" as *;
+@use "../colors" as *;
 @use "../../base/icons" as *;
 
 $generic-button-padding:
-  $generic-base-inline-widget-top-padding
+  $generic-button-withtext-vertical-padding
   $generic-button-horizontal-padding;
 
 $generic-button-icon-size: $generic-base-icon-size;
@@ -91,3 +92,123 @@ $generic-editor-custom-button-margin: 1px;
     }
   }
 }
+
+@mixin dx-button-mode-contained-styling() {
+  @include dx-button-styling-variant(
+    $button-normal-bg, $button-normal-border-color, $button-normal-color,
+    $button-normal-contained-bg-hover, $button-normal-border-color,
+    $button-normal-contained-bg-focused, $button-normal-border-color,
+    $button-normal-contained-bg-active, $button-normal-border-color, $button-normal-color,
+    $button-normal-color
+  );
+
+  &.dx-button-danger {
+    @include dx-button-styling-variant(
+      $button-danger-bg, transparent, $button-danger-color,
+      $button-danger-contained-bg-hover, transparent,
+      $button-danger-contained-bg-focused, transparent,
+      $button-danger-contained-bg-active, transparent, $button-danger-color,
+      $button-danger-color
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-styling-variant(
+      $button-success-bg, transparent, $button-success-color,
+      $button-success-contained-bg-hover, transparent,
+      $button-success-contained-bg-focused, transparent,
+      $button-success-contained-bg-active, transparent, $button-success-color,
+      $button-success-color
+    );
+  }
+
+  &.dx-button-default {
+    @include dx-button-styling-variant(
+      $button-default-bg, transparent, $button-default-color,
+      $button-default-contained-bg-hover, transparent,
+      $button-default-contained-bg-focused, transparent,
+      $button-default-contained-bg-active, transparent, $button-default-color,
+      $button-default-color
+    );
+  }
+}
+
+@mixin dx-button-mode-outlined-styling() {
+  @include dx-button-styling-variant(
+    transparent, $button-normal-border-color, $button-normal-color,
+    $button-normal-outlined-bg-hover, $button-normal-border-color,
+    $button-normal-outlined-bg-focused, $button-normal-border-color,
+    $button-normal-outlined-bg-active, $button-normal-border-color, $button-normal-color,
+    $button-normal-color
+  );
+
+  &.dx-button-danger {
+    @include dx-button-styling-variant(
+      transparent, $button-danger-border-color, $button-danger-border-color,
+      $button-danger-outlined-bg-hover, $button-danger-border-color,
+      $button-danger-outlined-bg-focused, $button-danger-border-color,
+      $button-danger-outlined-bg-active, $button-danger-border-color, $button-danger-border-color,
+      $button-danger-border-color
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-styling-variant(
+      transparent, $button-success-border-color, $button-success-border-color,
+      $button-success-outlined-bg-hover, $button-success-border-color,
+      $button-success-outlined-bg-focused, $button-success-border-color,
+      $button-success-outlined-bg-active, $button-success-border-color, $button-success-border-color,
+      $button-success-border-color
+    );
+  }
+
+  &.dx-button-default {
+    @include dx-button-styling-variant(
+      transparent, $button-default-border-color, $button-default-border-color,
+      $button-default-outlined-bg-hover, $button-default-border-color,
+      $button-default-outlined-bg-focused, $button-default-border-color,
+      $button-default-outlined-bg-active, $button-default-border-color, $button-default-border-color,
+      $button-default-border-color
+    );
+  }
+}
+
+@mixin dx-button-mode-text-styling() {
+  @include dx-button-styling-variant(
+    transparent, transparent, $button-normal-color,
+    $button-normal-text-bg-hover, transparent,
+    $button-normal-text-bg-focused, transparent,
+    $button-normal-text-bg-active, transparent, $button-normal-color,
+    $button-normal-color
+  );
+
+  &.dx-button-danger {
+    @include dx-button-styling-variant(
+      transparent, transparent, $button-danger-border-color,
+      $button-danger-text-bg-hover, transparent,
+      $button-danger-text-bg-focused, transparent,
+      $button-danger-text-bg-active, transparent, $button-danger-border-color,
+      $button-danger-border-color
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-styling-variant(
+      transparent, transparent, $button-success-border-color,
+      $button-success-text-bg-hover, transparent,
+      $button-success-text-bg-focused, transparent,
+      $button-success-text-bg-active, transparent, $button-success-border-color,
+      $button-success-border-color
+    );
+  }
+
+  &.dx-button-default {
+    @include dx-button-styling-variant(
+      transparent, transparent, $button-default-border-color,
+      $button-default-text-bg-hover, transparent,
+      $button-default-text-bg-focused, transparent,
+      $button-default-text-bg-active, transparent, $button-default-border-color,
+      $button-default-border-color
+    );
+  }
+}

package/data/scss/widgets/generic/button/_sizes.scss

@@ -5,6 +5,7 @@
 $generic-button-text-line-height: null !default;
 $generic-button-horizontal-padding: null !default;
 $generic-button-icon-horizontal-padding: null !default;
+$generic-button-withtext-vertical-padding: null !default;
 $generic-button-box-shadow-size: null !default;
 $generic-editor-button-icononly-bottom-padding: null !default;
 $generic-editor-button-icononly-horizontal-padding: null !default;
@@ -15,19 +16,21 @@ $generic-editor-button-icononly-top-padding: $generic-editor-button-top-padding
 
 
 @if $size == "default" {
-  $generic-button-text-line-height: 18px;
+  $generic-button-text-line-height: 1.2858 !default;
   $generic-button-horizontal-padding: 18px !default;
   $generic-button-icon-horizontal-padding: 8px !default;
   $generic-button-box-shadow-size: 0 1px 3px !default;
+  $generic-button-withtext-vertical-padding: $generic-base-inline-widget-top-padding !default;
   $generic-editor-button-icononly-bottom-padding: $generic-editor-button-bottom-padding !default;
   $generic-editor-button-icononly-horizontal-padding: $generic-button-icon-horizontal-padding - 2px !default;
 }
 
 @else if $size == "compact" {
-  $generic-button-text-line-height: 14px;
+  $generic-button-text-line-height: 1.33334 !default;
   $generic-button-horizontal-padding: 10px !default;
   $generic-button-icon-horizontal-padding: 5px !default;
   $generic-button-box-shadow-size: 0 1px 2px !default;
+  $generic-button-withtext-vertical-padding: $generic-base-inline-widget-top-padding - 1px !default;
   $generic-editor-button-icononly-bottom-padding: $generic-editor-button-bottom-padding + 1px !default;
   $generic-editor-button-icononly-horizontal-padding: $generic-button-icon-horizontal-padding - 2px !default;
 }

package/data/scss/widgets/generic/gantt/_index.scss

@@ -29,6 +29,10 @@ $gantt-successor-background-color: white;
     min-height: $gantt-treelist-text-min-height;
   }
 
+  .dx-treelist-headers .dx-treelist-table {
+    min-height: 32px;
+  }
+
   .dx-treelist-icon-container {
     max-height: $gantt-treelist-text-min-height;
   }

package/data/scss/widgets/generic/textEditor/_index.scss

@@ -381,9 +381,12 @@ $generic-texteditor-label-transition:
       height: 100%;
 
       .dx-label {
+        height: 100%;
         border-bottom: $border-width $borderStyle $borderColor;
         border-top: 0;
-        height: 100%;
+        border-left: $border-width $borderStyle transparent;
+        margin-left: -1px;
+        clip-path: inset(-$generic-texteditor-label-size -1px -1px 1px);
         padding: 0 2px;
 
         span {
@@ -444,7 +447,6 @@ $generic-texteditor-label-transition:
       .dx-label {
         border-bottom: $border-width $borderStyle $borderColor;
         border-top: $border-width $borderStyle $borderColor;
-        height: 100%;
 
         span {
           transition: $generic-texteditor-label-transition;

package/data/scss/widgets/generic/toolbar/_index.scss

@@ -52,41 +52,42 @@
   .dx-list-item-content,
   .dx-toolbar-item-auto-hide {
     padding: $generic-list-item-vertical-padding;
-
-    > .dx-button,
-    > .dx-toolbar-item-content > .dx-button {
-      .dx-button-content {
-        padding: 0;
-      }
-    }
   }
 
-  .dx-toolbar-hidden-button {
+  .dx-toolbar-hidden-button,
+  .dx-toolbar-hidden-button-group {
     .dx-button {
-      padding: $generic-list-item-vertical-padding;
+      .dx-button-content {
+        padding: $generic-list-item-vertical-padding;
+      }
     }
 
-    .dx-button-default,
-    .dx-button-success,
-    .dx-button-danger {
-      &,
-      & .dx-icon {
-        color: $button-normal-color;
+    .dx-button-mode-contained,
+    .dx-button-mode-outlined,
+    .dx-button-mode-text {
+      &.dx-button {
+        border-radius: 0;
       }
+
+      @include dx-button-mode-text-styling();
     }
   }
 
   .dx-toolbar-hidden-button-group {
     margin-top: $generic-toolbar-item-spacing;
     margin-bottom: $generic-toolbar-item-spacing;
+  }
 
-    .dx-buttongroup-wrapper {
-      .dx-buttongroup-item.dx-button {
-        .dx-button-content {
-          padding: $generic-list-item-vertical-padding;
-        }
-      }
-    }
+  .dx-button-mode-contained {
+    @include dx-button-mode-contained-styling();
+  }
+
+  .dx-button-mode-outlined {
+    @include dx-button-mode-outlined-styling();
+  }
+
+  .dx-button-mode-text {
+    @include dx-button-mode-text-styling();
   }
 }
 

package/data/scss/widgets/generic/treeList/_index.scss

@@ -99,6 +99,10 @@ $treelist-icon-container-padding-right: $generic-grid-base-checkbox-icon-size +
       }
     }
   }
+
+  .dx-treelist-content .dx-treelist-table .dx-row .dx-editor-cell {
+    padding-left: $generic-grid-base-cell-padding;
+  }
 }
 
 .dx-treelist-checkbox-size {
@@ -107,7 +111,7 @@ $treelist-icon-container-padding-right: $generic-grid-base-checkbox-icon-size +
 
 .dx-treelist-cell-expandable,
 .dx-treelist-select-all {
-  .dx-checkbox {
+  .dx-select-checkbox {
     position: absolute;
   }
 }

package/data/scss/widgets/material/textEditor/_index.scss

@@ -684,7 +684,7 @@ $material-editor-label-transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms
       height: 100%;
 
       .dx-label {
-        padding: 0;
+        padding: 0 2px;
         height: 100%;
         box-shadow:
           inset 0 -#{$shadowOffset}px $borderColor,
@@ -890,6 +890,10 @@ $material-editor-label-transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms
           inset 0 1px transparent,
           inset 1px 0 transparent,
           inset -1px 0 transparent;
+        margin-left: -2px;
+        margin-right: -2px;
+        border-radius: 1px;
+        clip-path: inset(-$material-texteditor-label-font-size 1px -1px 1px);
 
         span {
           transform: translate(0, -$label-offset-y);
@@ -907,6 +911,7 @@ $material-editor-label-transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms
           inset 0 1px $texteditor-border-color,
           inset -1px 0 transparent,
           inset 1px 0 $texteditor-border-color;
+        clip-path: inset(-1px 1px -1px -1px);
       }
 
       .dx-label-after {
@@ -915,6 +920,7 @@ $material-editor-label-transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms
           inset 0 1px $texteditor-border-color,
           inset -1px 0 $texteditor-border-color,
           inset 1px 0 transparent;
+        clip-path: inset(-1px -1px -1px 1px);
       }
     }
 
@@ -928,6 +934,7 @@ $material-editor-label-transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms
             inset 0 1px $texteditor-border-color,
             inset -1px 0 $texteditor-border-color,
             inset 1px 0 transparent;
+          clip-path: inset(-1px -1px -1px 1px);
         }
 
         .dx-label-after {
@@ -937,6 +944,7 @@ $material-editor-label-transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms
             inset 0 1px $texteditor-border-color,
             inset -1px 0 transparent,
             inset 1px 0  $texteditor-border-color;
+          clip-path: inset(-1px 1px -1px -1px);
         }
       }
     }

package/data/scss/widgets/material/toolbar/_index.scss

@@ -52,6 +52,11 @@
 .dx-toolbar-menu-section {
   border-bottom: 1px solid $base-border-color;
 
+  .dx-list-item-content,
+  .dx-toolbar-item-auto-hide {
+    padding: $material-list-item-vertical-padding $material-list-item-horizontal-padding $material-list-item-vertical-padding - 1px;
+  }
+
   .dx-list-item-content {
     font-size: $material-base-font-size;
     vertical-align: middle;
@@ -76,17 +81,31 @@
       padding: 0;
     }
 
+    .dx-button-mode-text,
+    .dx-button-mode-outlined,
     .dx-button-mode-contained {
+      border: none;
+
+      &.dx-button,
+      &.dx-button.dx-button-back {
+        border-radius: 0;
+      }
+
+      &.dx-button-normal,
+      &.dx-button-back {
+        @include dx-button-flat-color-styling($button-normal-color, $button-normal-text-hover-bg, $button-normal-text-focused-bg, $button-normal-text-active-bg);
+      }
+
       &.dx-button-default {
-        @include dx-button-flat-color-styling($button-default-bg, transparent, transparent, transparent);
+        @include dx-button-flat-color-styling($button-default-bg, $button-default-text-hover-bg, $button-default-text-focused-bg, $button-default-text-active-bg);
       }
 
       &.dx-button-danger {
-        @include dx-button-flat-color-styling($button-danger-bg, transparent, transparent, transparent);
+        @include dx-button-flat-color-styling($button-danger-bg, $button-danger-text-hover-bg, $button-danger-text-focused-bg, $button-danger-text-active-bg);
       }
 
       &.dx-button-success {
-        @include dx-button-flat-color-styling($button-success-bg, transparent, transparent, transparent);
+        @include dx-button-flat-color-styling($button-success-bg, $button-success-text-hover-bg, $button-success-text-focused-bg, $button-success-text-active-bg);
       }
     }
 
@@ -94,10 +113,6 @@
       height: $material-list-item-height;
       padding: 0;
 
-      &.dx-button-back {
-        border-radius: 0;
-      }
-
       .dx-button-text {
         text-transform: none;
         font-weight: 400;
@@ -109,6 +124,12 @@
     }
   }
 
+  .dx-button {
+    &.dx-button-back:not(.dx-buttongroup-item) {
+      border-radius: $material-base-border-radius;
+    }
+  }
+
   .dx-toolbar-hidden-button-group {
     margin-top: $material-toolbar-padding;
     margin-bottom: $material-toolbar-padding;
@@ -131,10 +152,6 @@
       }
     }
   }
-
-  .dx-toolbar-item-auto-hide {
-    padding: $material-list-item-vertical-padding $material-list-item-horizontal-padding $material-list-item-vertical-padding - 1px;
-  }
 }
 
 .dx-toolbar-button {
@@ -176,10 +193,6 @@
   }
 }
 
-.dx-toolbar-menu-action .dx-button.dx-button-has-icon:not(.dx-button-has-text) {
-  border-radius: 0;
-}
-
 .dx-toolbar .dx-tab {
   padding: 4px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-themebuilder",
-  "version": "22.2.1-alpha-22313-0309",
+  "version": "22.2.3",
   "description": "DevExtreme ThemeBuilder",
   "keywords": [
     "devextreme",