devextreme-themebuilder 25.1.1-alpha → 25.1.3

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

@@ -223,6 +223,392 @@ exports.metadata = {
             'Name': '70. Active state background Color',
             'Type': 'color'
         },
+        {
+            'Key': '$cardview-generic-common-bg-color',
+            'Name': '100. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-common-link-color',
+            'Name': '102. Link color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-common-text-color',
+            'Name': '103. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card-bg-color',
+            'Name': '200. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card-border-color',
+            'Name': '201. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card-divider-color',
+            'Name': '203. Divider color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card-text-color',
+            'Name': '204. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card__cover-bg-color',
+            'Name': '206. Cover background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card__cover--noimage-bg-color',
+            'Name': '207. \'Empty cover\' background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card__cover--noimage__icon-color',
+            'Name': '208. \'Empty cover\' icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card--selected-bg-color',
+            'Name': '300. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card--selected-border-color',
+            'Name': '301. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card--selected-divider-color',
+            'Name': '302. Divider color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card--selected-text-color',
+            'Name': '303. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card--selected__cover-bg-color',
+            'Name': '305. Cover background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card--selected__cover--noimage-bg-color',
+            'Name': '306. \'Empty cover\' background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card--selected__cover--noimage__icon-color',
+            'Name': '307. \'Empty cover\' icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item-bg-color',
+            'Name': '400. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item-border-color',
+            'Name': '401. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item-text-color',
+            'Name': '403. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item__icon-color',
+            'Name': '405. Icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item__header-filter-icon--selected-color',
+            'Name': '406. Active \'Filter\' icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item__sort-index-text-color',
+            'Name': '407. Sort index text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--hovered-bg-color',
+            'Name': '500. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--hovered-border-color',
+            'Name': '501. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--hovered-text-color',
+            'Name': '502. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--hovered__icon-color',
+            'Name': '504. Icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--hovered__header-filter-icon--selected-color',
+            'Name': '505. Active \'Filter\' icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--hovered__sort-index-text-color',
+            'Name': '506. Sort index text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--disabled-bg-color',
+            'Name': '600. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--disabled-border-color',
+            'Name': '601. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--disabled-text-color',
+            'Name': '602. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--disabled__icon-color',
+            'Name': '604. Icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--disabled__header-filter-icon--selected-color',
+            'Name': '605. Active \'Filter\' icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--disabled__sort-index-text-color',
+            'Name': '606. Sort index text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--dragged-bg-color',
+            'Name': '700. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--dragged-border-color',
+            'Name': '701. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--dragged-text-color',
+            'Name': '702. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--dragged__allowance-icon-color',
+            'Name': '704. \'Drag allowed\' icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--dragged__prohibition-icon-color',
+            'Name': '705. \'Drag blocked\' icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--dragged-box-shadow-color',
+            'Name': '706. Box shadow color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__dropzone-bg-color',
+            'Name': '800. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__dropzone-border-color',
+            'Name': '802. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__dropzone-text-color',
+            'Name': '803. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__dropzone__icon-color',
+            'Name': '804. Icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-filter-panel-bg-color',
+            'Name': '900. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-filter-panel-border-color',
+            'Name': '902. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-filter-panel-text-color',
+            'Name': '903. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-filter-panel__icon-color',
+            'Name': '904. Icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-nodata-view-bg-color',
+            'Name': '1000. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-nodata-view-text-color',
+            'Name': '1001. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-nodata-view__icon-color',
+            'Name': '1002. Icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-nodata-view__icon-bg-color',
+            'Name': '1003. Icon background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card__content__field-value--highlighted-bg-color',
+            'Name': '1100. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card__content__field-value--highlighted-text-color',
+            'Name': '1102. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-card__content__field-value--highlighted-box-shadow-color',
+            'Name': '1104. Box shadow color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$cardview-generic-common-border-radius',
+            'Name': '101. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-generic-common-text-weight',
+            'Name': '104. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-common-cards-row-gap',
+            'Name': '105. Vertical gap between cards',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-generic-common-cards-column-gap',
+            'Name': '106. Horizontal gap between cards',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-generic-card-border-radius',
+            'Name': '202. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-generic-card__field-caption-weight',
+            'Name': '205. Field name text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-card--selected__field-caption-weight',
+            'Name': '304. Field name text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item-border-radius',
+            'Name': '402. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item-text-weight',
+            'Name': '404. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item__sort-index-text-weight',
+            'Name': '408. Sort index text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--hovered-text-weight',
+            'Name': '503. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--hovered__sort-index-text-weight',
+            'Name': '507. Sort index text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--disabled-text-weight',
+            'Name': '603. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--disabled__sort-index-text-weight',
+            'Name': '607. Sort index text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__item--dragged-text-weight',
+            'Name': '703. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-generic-header-panel__dropzone-border-radius',
+            'Name': '801. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-generic-filter-panel-border-radius',
+            'Name': '901. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-generic-card__content__field-value--highlighted-border-radius',
+            'Name': '1101. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-generic-card__content__field-value--highlighted-text-weight',
+            'Name': '1103. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
         {
             'Key': '$chat-background-color',
             'Name': '10. Background color',
@@ -915,82 +1301,222 @@ exports.metadata = {
             'Type': 'color'
         },
         {
-            'Key': '$switch-border-color',
-            'Name': '10. Border color',
+            'Key': '$stepper-step-accent-bg',
+            'Name': '10. Active color',
             'Type': 'color'
         },
         {
-            'Key': '$switch-on-color',
-            'Name': '10. "ON" label color',
+            'Key': '$stepper-step-accent-hover-bg',
+            'Name': '20. Hover state active color',
             'Type': 'color'
         },
         {
-            'Key': '$switch-container-active-bg',
-            'Name': '30. Active state background color',
+            'Key': '$stepper-step-danger-bg',
+            'Name': '30. Invalid color',
             'Type': 'color'
         },
         {
-            'Key': '$switch-off-color',
-            'Name': '20. "OFF" label color',
+            'Key': '$stepper-step-danger-hover-bg',
+            'Name': '40. Hover state invalid color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-color',
-            'Name': '10. Tab text color',
+            'Key': '$stepper-step-base-bg',
+            'Name': '60. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-selected-color',
-            'Name': '20. Selected tab text color',
+            'Key': '$stepper-step-base-hover-bg',
+            'Name': '70. Hover state background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-bg',
-            'Name': '30. Tab background color',
+            'Key': '$stepper-step-base-text-color',
+            'Name': '100. Text or icon color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-selected-bg',
-            'Name': '40. Selected tab background color',
+            'Key': '$stepper-step-base-label-color',
+            'Name': '110. Label text color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-border-color',
-            'Name': '30. Border color',
+            'Key': '$stepper-step-disabled-bg',
+            'Name': '260. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-focused-border-color',
-            'Name': '40. Focus border color',
+            'Key': '$stepper-step-disabled-text-color',
+            'Name': '270. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-hover-bg',
-            'Name': '50. Hover background color',
+            'Key': '$stepper-connector-bg',
+            'Name': '280. Pending color',
             'Type': 'color'
         },
         {
-            'Key': '$tagbox-tag-color',
-            'Name': '10. Tag text color',
+            'Key': '$stepper-connector-value-bg',
+            'Name': '290. Completed color',
             'Type': 'color'
         },
         {
-            'Key': '$tagbox-tag-bg',
-            'Name': '20. Tag background color',
+            'Key': '$stepper-step-base-border-color',
+            'Name': '80. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$tagbox-tag-button-remove-bg',
-            'Name': '30. Tag close button color',
+            'Key': '$stepper-step-base-hover-border-color',
+            'Name': '90. Hover state border color',
             'Type': 'color'
         },
         {
-            'Key': '$textbox-search-icon-color',
-            'Name': '80. Search icon color',
+            'Key': '$stepper-step-selected-bg',
+            'Name': '120. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$texteditor-color',
+            'Key': '$stepper-step-selected-hover-bg',
+            'Name': '130. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-text-color',
+            'Name': '140. Text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-label-color',
+            'Name': '150. Label text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-bg',
+            'Name': '160. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-hover-bg',
+            'Name': '170. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-border-color',
+            'Name': '180. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-hover-border-color',
+            'Name': '190. Hover state border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-text-color',
+            'Name': '200. Text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-hover-text-color',
+            'Name': '210. Hover state text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-label-color',
+            'Name': '220. Invalid label text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-selected-bg',
+            'Name': '230. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-selected-hover-bg',
+            'Name': '240. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-shadow-color',
+            'Name': '300. Shadow 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'
         },
@@ -1417,1072 +1943,1984 @@ exports.metadata = {
             'Type': 'color'
         },
         {
-            'Key': '$chat-background-color',
-            'Name': '10. Background color',
+            'Key': '$cardview-material-common-bg-color',
+            'Name': '100. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-border-color',
-            'Name': '20. Border color',
+            'Key': '$cardview-material-common-link-color',
+            'Name': '102. Link color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-avatar-color',
-            'Name': '30. Text color',
+            'Key': '$cardview-material-common-text-color',
+            'Name': '103. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-avatar-background-color',
-            'Name': '31. Background color',
+            'Key': '$cardview-material-card-bg-color',
+            'Name': '200. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-bubble-color-primary',
-            'Name': '40. Text color (sent messages)',
+            'Key': '$cardview-material-card-border-color',
+            'Name': '201. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-bubble-background-color-primary',
-            'Name': '41. Background color (sent messages)',
+            'Key': '$cardview-material-card-divider-color',
+            'Name': '203. Divider color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-bubble-color-secondary',
-            'Name': '42. Text color (received messages)',
+            'Key': '$cardview-material-card-text-color',
+            'Name': '204. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-bubble-background-color-secondary',
-            'Name': '43. Background color (received messages)',
+            'Key': '$cardview-material-card__cover-bg-color',
+            'Name': '206. Cover background color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-information-author-name-color',
-            'Name': '50. User name color',
+            'Key': '$cardview-material-card__cover--noimage-bg-color',
+            'Name': '207. \'Empty cover\' background color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-information-timestamp-color',
-            'Name': '51. Timestamp color',
+            'Key': '$cardview-material-card__cover--noimage__icon-color',
+            'Name': '208. \'Empty cover\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-messagelist-day-header-color',
-            'Name': '52. Day header color',
+            'Key': '$cardview-material-card--selected-bg-color',
+            'Name': '300. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-alertlist-color',
-            'Name': '55. Alert color',
+            'Key': '$cardview-material-card--selected-border-color',
+            'Name': '301. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-messagelist-empty-icon-color',
-            'Name': '65. Icon color',
+            'Key': '$cardview-material-card--selected-divider-color',
+            'Name': '302. Divider color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-messagelist-empty-icon-background-color',
-            'Name': '66. Icon background color',
+            'Key': '$cardview-material-card--selected-text-color',
+            'Name': '303. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-messagelist-empty-message-color',
-            'Name': '67. Title color',
+            'Key': '$cardview-material-card--selected__cover-bg-color',
+            'Name': '305. Cover background color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-messagelist-empty-prompt-color',
-            'Name': '68. Subtitle color',
+            'Key': '$cardview-material-card--selected__cover--noimage-bg-color',
+            'Name': '306. \'Empty cover\' background color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-typingindicator-color',
-            'Name': '80. Text color',
+            'Key': '$cardview-material-card--selected__cover--noimage__icon-color',
+            'Name': '307. \'Empty cover\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-typingindicator-bubble-bg-color',
-            'Name': '81. Background color',
+            'Key': '$cardview-material-header-panel__item-bg-color',
+            'Name': '400. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-typingindicator-circle-bg-color-center',
-            'Name': '82. Central circle color',
+            'Key': '$cardview-material-header-panel__item-border-color',
+            'Name': '401. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$chat-typingindicator-circle-bg-color',
-            'Name': '83. Outer circles color',
+            'Key': '$cardview-material-header-panel__item-text-color',
+            'Name': '403. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$colorbox-overlay-bg',
-            'Name': '10. Overlay background',
+            'Key': '$cardview-material-header-panel__item__icon-color',
+            'Name': '405. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$drawer-shader-background-color',
-            'Name': '10. Shader background color',
+            'Key': '$cardview-material-header-panel__item__header-filter-icon--selected-color',
+            'Name': '406. Active \'Filter\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$dropdowneditor-icon-active-color',
-            'Name': '90. Active arrow icon color',
+            'Key': '$cardview-material-header-panel__item__sort-index-text-color',
+            'Name': '407. Sort index text color',
             'Type': 'color'
         },
         {
-            'Key': '$fieldset-field-label-color',
-            'Name': '10. Label text color',
+            'Key': '$cardview-material-header-panel__item--hovered-bg-color',
+            'Name': '500. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$fileuploader-filename-color',
-            'Name': '10. File name text color',
+            'Key': '$cardview-material-header-panel__item--hovered-border-color',
+            'Name': '501. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$fileuploader-falename-status-color',
-            'Name': '20. File status text color',
+            'Key': '$cardview-material-header-panel__item--hovered-text-color',
+            'Name': '502. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$fileuploader-border-color',
-            'Name': '30. Drag-and-drop border color',
+            'Key': '$cardview-material-header-panel__item--hovered__icon-color',
+            'Name': '504. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$filterbuilder-text-color',
-            'Name': '10. Text color',
+            'Key': '$cardview-material-header-panel__item--hovered__header-filter-icon--selected-color',
+            'Name': '505. Active \'Filter\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$filterbuilder-text-focus-color',
-            'Name': '20. Focused text color',
+            'Key': '$cardview-material-header-panel__item--hovered__sort-index-text-color',
+            'Name': '506. Sort index text color',
             'Type': 'color'
         },
         {
-            'Key': '$filterbuilder-plus-icon-color',
-            'Name': '30. Plus icon color',
+            'Key': '$cardview-material-header-panel__item--disabled-bg-color',
+            'Name': '600. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$filterbuilder-remove-icon-color',
-            'Name': '40. Remove icon color',
+            'Key': '$cardview-material-header-panel__item--disabled-border-color',
+            'Name': '601. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$filterbuilder-group-operation-color',
-            'Name': '50. Group operation button color',
+            'Key': '$cardview-material-header-panel__item--disabled-text-color',
+            'Name': '602. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$filterbuilder-item-field-color',
-            'Name': '60. Data field button color',
+            'Key': '$cardview-material-header-panel__item--disabled__icon-color',
+            'Name': '604. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$filterbuilder-item-operator-color',
-            'Name': '70. Operation button color',
+            'Key': '$cardview-material-header-panel__item--disabled__header-filter-icon--selected-color',
+            'Name': '605. Active \'Filter\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$filterbuilder-item-value-color',
-            'Name': '80. Value button color',
+            'Key': '$cardview-material-header-panel__item--disabled__sort-index-text-color',
+            'Name': '606. Sort index text color',
             'Type': 'color'
         },
         {
-            'Key': '$form-field-item-color',
-            'Name': '10. Label text color',
+            'Key': '$cardview-material-header-panel__item--dragged-bg-color',
+            'Name': '700. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$form-group-border-color',
-            'Name': '20. Group border color',
+            'Key': '$cardview-material-header-panel__item--dragged-border-color',
+            'Name': '701. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$gallery-indicator-bg',
-            'Name': '10. Indicator background color',
+            'Key': '$cardview-material-header-panel__item--dragged-text-color',
+            'Name': '702. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$gallery-indicator-item-selected-bg',
-            'Name': '20. Selected indicator background color',
+            'Key': '$cardview-material-header-panel__item--dragged__allowance-icon-color',
+            'Name': '704. \'Drag allowed\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$gallery-indicator-focused-bg',
-            'Name': '30. Focused indicator background color',
+            'Key': '$cardview-material-header-panel__item--dragged__prohibition-icon-color',
+            'Name': '705. \'Drag blocked\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$gallery-navbutton-hover-color',
-            'Name': '40. Hovered navigation button color',
+            'Key': '$cardview-material-header-panel__item--dragged-box-shadow-color',
+            'Name': '706. Box shadow color',
             'Type': 'color'
         },
         {
-            'Key': '$gallery-navbutton-active-color',
-            'Name': '50. Active navigation button color',
+            'Key': '$cardview-material-header-panel__dropzone-bg-color',
+            'Name': '800. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-base-background-color',
-            'Name': '15. Background color',
+            'Key': '$cardview-material-header-panel__dropzone-border-color',
+            'Name': '802. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-columnchooser-item-color',
-            'Name': '20. Header text color',
+            'Key': '$cardview-material-header-panel__dropzone-text-color',
+            'Name': '803. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-columnchooser-font-weight',
-            'Name': '25. Header text weight',
-            'Type': 'select',
-            'TypeValues': '300|500|700'
+            'Key': '$cardview-material-header-panel__dropzone__icon-color',
+            'Name': '804. Icon color',
+            'Type': 'color'
         },
         {
-            'Key': '$datagrid-drag-header-border-color',
-            'Name': '35. Draggable header border color',
+            'Key': '$cardview-material-filter-panel-bg-color',
+            'Name': '900. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-selection-bg',
-            'Name': '51. Selected row background color',
+            'Key': '$cardview-material-filter-panel-border-color',
+            'Name': '902. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-row-selected-border-color',
-            'Name': '52. Selected row border color',
+            'Key': '$cardview-material-filter-panel-text-color',
+            'Name': '903. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-row-selected-color',
-            'Name': '50. Selected row text color',
+            'Key': '$cardview-material-filter-panel__icon-color',
+            'Name': '904. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-row-focused-color',
-            'Name': '65. Focused row text color',
+            'Key': '$cardview-material-nodata-view-bg-color',
+            'Name': '1000. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-row-focused-bg',
-            'Name': '70. Focused row background color',
+            'Key': '$cardview-material-nodata-view-text-color',
+            'Name': '1001. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-menu-icon-color',
-            'Name': '30. Context menu icon color',
+            'Key': '$cardview-material-nodata-view__icon-color',
+            'Name': '1002. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-cell-modified-border-color',
-            'Name': '40. Modified data background color',
+            'Key': '$cardview-material-nodata-view__icon-bg-color',
+            'Name': '1003. Icon background color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-row-invalid-faded-border-color',
-            'Name': '45. Invalid data faded color',
+            'Key': '$cardview-material-card__content__field-value--highlighted-bg-color',
+            'Name': '1100. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-group-row-color',
-            'Name': '90. Group row text color',
+            'Key': '$cardview-material-card__content__field-value--highlighted-text-color',
+            'Name': '1102. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-group-row-bg',
-            'Name': '95. Group row background color',
+            'Key': '$cardview-material-card__content__field-value--highlighted-box-shadow-color',
+            'Name': '1104. Box shadow color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-search-color',
-            'Name': '105. Highlighted text color',
-            'Type': 'color'
+            'Key': '$cardview-material-common-border-radius',
+            'Name': '101. Border radius',
+            'Type': 'text'
         },
         {
-            'Key': '$datagrid-search-bg',
-            'Name': '110. Highlighted text background color',
-            'Type': 'color'
+            'Key': '$cardview-material-common-text-weight',
+            'Name': '104. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$datagrid-row-error-color',
-            'Name': '115. Error row text color',
-            'Type': 'color'
+            'Key': '$cardview-material-common-cards-row-gap',
+            'Name': '105. Vertical gap between cards',
+            'Type': 'text'
         },
         {
-            'Key': '$datagrid-row-error-bg',
-            'Name': '120. Error row background color',
-            'Type': 'color'
+            'Key': '$cardview-material-common-cards-column-gap',
+            'Name': '106. Horizontal gap between cards',
+            'Type': 'text'
         },
         {
-            'Key': '$datagrid-focused-border-color',
-            'Name': '75. Focused cell border color',
-            'Type': 'color'
+            'Key': '$cardview-material-card-border-radius',
+            'Name': '202. Border radius',
+            'Type': 'text'
         },
         {
-            'Key': '$datagrid-editor-bg',
-            'Name': '80. Editor background color',
-            'Type': 'color'
+            'Key': '$cardview-material-card__field-caption-weight',
+            'Name': '205. Field name text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$datagrid-row-alternation-bg',
-            'Name': '85. Alternate row background color',
+            'Key': '$cardview-material-card--selected__field-caption-weight',
+            'Name': '304. Field name text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-material-header-panel__item-border-radius',
+            'Name': '402. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-material-header-panel__item-text-weight',
+            'Name': '404. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-material-header-panel__item__sort-index-text-weight',
+            'Name': '408. Sort index text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-material-header-panel__item--hovered-text-weight',
+            'Name': '503. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-material-header-panel__item--hovered__sort-index-text-weight',
+            'Name': '507. Sort index text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-material-header-panel__item--disabled-text-weight',
+            'Name': '603. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-material-header-panel__item--disabled__sort-index-text-weight',
+            'Name': '607. Sort index text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-material-header-panel__item--dragged-text-weight',
+            'Name': '703. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$cardview-material-header-panel__dropzone-border-radius',
+            'Name': '801. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-material-filter-panel-border-radius',
+            'Name': '901. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-material-card__content__field-value--highlighted-border-radius',
+            'Name': '1101. Border radius',
+            'Type': 'text'
+        },
+        {
+            'Key': '$cardview-material-card__content__field-value--highlighted-text-weight',
+            'Name': '1103. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
+        },
+        {
+            'Key': '$chat-background-color',
+            'Name': '10. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-border-color',
+            'Name': '20. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-avatar-color',
+            'Name': '30. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-avatar-background-color',
+            'Name': '31. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-bubble-color-primary',
+            'Name': '40. Text color (sent messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-bubble-background-color-primary',
+            'Name': '41. Background color (sent messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-bubble-color-secondary',
+            'Name': '42. Text color (received messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-bubble-background-color-secondary',
+            'Name': '43. Background color (received messages)',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-information-author-name-color',
+            'Name': '50. User name color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-information-timestamp-color',
+            'Name': '51. Timestamp color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-messagelist-day-header-color',
+            'Name': '52. Day header color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-alertlist-color',
+            'Name': '55. Alert color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-messagelist-empty-icon-color',
+            'Name': '65. Icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-messagelist-empty-icon-background-color',
+            'Name': '66. Icon background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-messagelist-empty-message-color',
+            'Name': '67. Title color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-messagelist-empty-prompt-color',
+            'Name': '68. Subtitle color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-typingindicator-color',
+            'Name': '80. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-typingindicator-bubble-bg-color',
+            'Name': '81. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-typingindicator-circle-bg-color-center',
+            'Name': '82. Central circle color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$chat-typingindicator-circle-bg-color',
+            'Name': '83. Outer circles 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. Active arrow icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$fieldset-field-label-color',
+            'Name': '10. Label text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$fileuploader-filename-color',
+            'Name': '10. File name text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$fileuploader-falename-status-color',
+            'Name': '20. File status text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$fileuploader-border-color',
+            'Name': '30. Drag-and-drop border color',
+            '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': '15. 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': '51. Selected row background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$datagrid-row-selected-border-color',
+            'Name': '52. 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 icon 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. Invalid 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 color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$datagrid-row-alternation-bg',
+            'Name': '85. Alternate row 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 state item background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$list-item-selected-bg',
+            'Name': '30. Selected state item 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. Indicator color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$loadpanel-content-bg',
+            'Name': '30. 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': '$pagination-page-selected-color',
+            'Name': '180. Pager selected item text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$pagination-page-selected-bg',
+            'Name': '190. Pager selected item background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$pivotgrid-area-color',
+            'Name': '10. Header text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$pivotgrid-totalcolor',
+            'Name': '20. Total background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$pivotgrid-grandtotalcolor',
+            'Name': '30. Grand total 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. Appointment start 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. Scroll bar background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$selectbox-list-bg',
+            'Name': '10. Item background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$material-slider-bar-bg',
+            'Name': '10. 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': '$splitter-resize-handle-color',
+            'Name': '10. Icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$splitter-resize-handle-bg',
+            'Name': '40. Handle background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$splitter-resize-handle-bg-hover',
+            'Name': '50. Handle hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$splitter-resize-handle-bg-focused',
+            'Name': '60. Handle focused state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$splitter-resize-handle-color-hover',
+            'Name': '20. Hover state icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$splitter-resize-handle-color-focused',
+            'Name': '30. Focused state icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-accent-bg',
+            'Name': '10. Active color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-accent-hover-bg',
+            'Name': '20. Hover state active color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-danger-bg',
+            'Name': '30. Invalid color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-danger-hover-bg',
+            'Name': '40. Hover state invalid color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-bg',
+            'Name': '60. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-hover-bg',
+            'Name': '70. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-text-color',
+            'Name': '100. Text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-label-color',
+            'Name': '110. Label text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-disabled-bg',
+            'Name': '260. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-disabled-text-color',
+            'Name': '270. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-connector-bg',
+            'Name': '280. Pending color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-connector-value-bg',
+            'Name': '290. Completed color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-border-color',
+            'Name': '80. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-hover-border-color',
+            'Name': '90. Hover state border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-bg',
+            'Name': '120. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-hover-bg',
+            'Name': '130. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-text-color',
+            'Name': '140. Text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-label-color',
+            'Name': '150. Label text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-bg',
+            'Name': '160. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-hover-bg',
+            'Name': '170. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-border-color',
+            'Name': '180. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-hover-border-color',
+            'Name': '190. Hover state border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-text-color',
+            'Name': '200. Text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-hover-text-color',
+            'Name': '210. Hover state text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-label-color',
+            'Name': '220. Invalid label text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-selected-bg',
+            'Name': '230. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-selected-hover-bg',
+            'Name': '240. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-shadow-color',
+            'Name': '300. Shadow 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-tab-disabled-color',
+            'Name': '30. Disabled tab color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$tabs-selected-tab-border-color',
+            'Name': '40. Selected tab border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$tabs-disabled-tab-border-color',
+            'Name': '50. Disabled tab border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$tabs-tab-background',
+            'Name': '60. Tab background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$tabs-tab-icon-color',
+            'Name': '70. Tab icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$tabs-tab-icon-selected-color',
+            'Name': '80. Selected tab icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$tabs-tab-icon-disabled-color',
+            'Name': '90. Disabled tab icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$tabs-hovered-tab-bg-color',
+            'Name': '100. Hovered tab background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$tabs-focused-tab-bg-color',
+            'Name': '110. Focused tab background color',
             'Type': 'color'
         },
         {
-            'Key': '$datagrid-summary-color',
-            'Name': '100. Summary item color',
+            'Key': '$tabs-active-tab-bg-color',
+            'Name': '120. Active tab background color',
             'Type': 'color'
         },
         {
-            'Key': '$list-group-color',
-            'Name': '10. Group header text color',
+            'Key': '$tagbox-tag-color',
+            'Name': '10. Tag text color',
             'Type': 'color'
         },
         {
-            'Key': '$list-border-color',
-            'Name': '20. Group border color',
+            'Key': '$tagbox-tag-bg',
+            'Name': '20. Tag background color',
             'Type': 'color'
         },
         {
-            'Key': '$list-group-header-bg',
-            'Name': '20. Group header background color',
+            'Key': '$tagbox-tag-active-color',
+            'Name': '30. Tag active text color',
             'Type': 'color'
         },
         {
-            'Key': '$list-normal-color',
-            'Name': '10. Item text color',
+            'Key': '$tagbox-tag-button-remove-bg',
+            'Name': '40. Tag close button color',
             'Type': 'color'
         },
         {
-            'Key': '$list-expanded-group-color',
-            'Name': '25. Expanded group header text color',
+            'Key': '$textbox-search-icon-color',
+            'Name': '80. Search icon color',
             'Type': 'color'
         },
         {
-            'Key': '$list-item-hover-bg',
-            'Name': '30. Hovered state item background color',
+            'Key': '$texteditor-color',
+            'Name': '10. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$list-item-selected-bg',
-            'Name': '30. Selected state item background color',
+            'Key': '$texteditor-placeholder-color',
+            'Name': '20. Placeholder text color',
             'Type': 'color'
         },
         {
-            'Key': '$list-item-active-bg',
-            'Name': '40. Active state item background color',
+            'Key': '$texteditor-bg',
+            'Name': '30. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$load-indicator-segment-bg-color',
-            'Name': '10. Indicator color',
+            'Key': '$texteditor-focused-bg',
+            'Name': '40. Focused background color',
             'Type': 'color'
         },
         {
-            'Key': '$loadpanel-content-bg',
-            'Name': '30. Background color',
+            'Key': '$texteditor-border-color',
+            'Name': '50. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$menu-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': '$menu-item-selected-bg',
-            'Name': '20. Selected item background color',
+            'Key': '$toast-info-bg',
+            'Name': '20. Info background color',
             'Type': 'color'
         },
         {
-            'Key': '$overlay-content-bg',
-            'Name': '10. Content background color',
+            'Key': '$toast-warning-bg',
+            'Name': '30. Warning background color',
             'Type': 'color'
         },
         {
-            'Key': '$overlay-shader-bg',
-            'Name': '20. Shader background color',
+            'Key': '$toast-error-bg',
+            'Name': '40. Error background color',
             'Type': 'color'
         },
         {
-            'Key': '$pagination-page-selected-color',
-            'Name': '180. Pager selected item text color',
+            'Key': '$toast-success-bg',
+            'Name': '50. Success background color',
             'Type': 'color'
         },
         {
-            'Key': '$pagination-page-selected-bg',
-            'Name': '190. Pager selected item background color',
+            'Key': '$toolbar-bg',
+            'Name': '10. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$pivotgrid-area-color',
-            'Name': '10. Header text color',
+            'Key': '$tooltip-color',
+            'Name': '10. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$pivotgrid-totalcolor',
-            'Name': '20. Total background color',
+            'Key': '$tooltip-bg',
+            'Name': '20. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$pivotgrid-grandtotalcolor',
-            'Name': '30. Grand total background color',
+            'Key': '$treeview-focused-bg',
+            'Name': '80. Focused state background color',
             'Type': 'color'
         },
         {
-            'Key': '$pivotgrid-field-area-text-color',
-            'Name': '40. Field area text color',
+            'Key': '$base-accent',
+            'Name': '10. Accent color',
             'Type': 'color'
         },
         {
-            'Key': '$popup-title-bg',
-            'Name': '20. Header background color',
+            'Key': '$base-font-family',
+            'Name': '10. Font family',
+            'Type': 'text'
+        },
+        {
+            'Key': '$base-text-color',
+            'Name': '20. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$progressbar-bg',
-            'Name': '10. Bar background color',
+            'Key': '$base-label-color',
+            'Name': '20. Label color',
             'Type': 'color'
         },
         {
-            'Key': '$progressbar-range-bg',
-            'Name': '20. Selected range background color',
+            'Key': '$base-icon-color',
+            'Name': '40. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$progressbar-label-color',
-            'Name': '30. Label color',
+            'Key': '$base-spin-icon-color',
+            'Name': '50. Arrow icon color',
             'Type': 'color'
         },
         {
-            'Key': '$scheduler-base-border-color',
-            'Name': '10. Border color',
+            'Key': '$base-bg',
+            'Name': '30. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$scheduler-accent-border-color',
-            'Name': '20. Hour separator color',
+            'Key': '$base-border-color',
+            'Name': '40. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$scheduler-appointment-text-color',
-            'Name': '30. Appointment text color',
+            'Key': '$base-success',
+            'Name': '50. Success color',
             'Type': 'color'
         },
         {
-            'Key': '$scheduler-appointment-base-color',
-            'Name': '40. Appointment background color',
+            'Key': '$base-warning',
+            'Name': '60. Warning color',
             'Type': 'color'
         },
         {
-            'Key': '$scheduler-appointment-start-color',
-            'Name': '50. Appointment start color',
+            'Key': '$base-danger',
+            'Name': '70. Danger color',
             'Type': 'color'
         },
         {
-            'Key': '$scheduler-workspace-focused-cell-color',
-            'Name': '60. Focused cell color',
+            'Key': '$base-hover-color',
+            'Name': '80. Hover state text color',
             'Type': 'color'
         },
         {
-            'Key': '$scheduler-first-month-border-color',
-            'Name': '70. First day of month separator color',
+            'Key': '$base-hover-bg',
+            'Name': '90. Hover state background color',
             'Type': 'color'
         },
         {
-            'Key': '$scheduler-current-time-cell-color',
-            'Name': '80. Date-time indicator color',
+            'Key': '$base-focus-color',
+            'Name': '100. Focused state text color',
             'Type': 'color'
         },
         {
-            'Key': '$scrollable-scroll-bg',
-            'Name': '10. Scroll bar background color',
+            'Key': '$base-focus-bg',
+            'Name': '110. Focused state background color',
             'Type': 'color'
         },
         {
-            'Key': '$selectbox-list-bg',
-            'Name': '10. Item background color',
+            'Key': '$base-link-color',
+            'Name': '30. Link color',
             'Type': 'color'
         },
         {
-            'Key': '$material-slider-bar-bg',
-            'Name': '10. Bar background color',
+            'Key': '$material-button-height',
+            'Name': '11. Button height',
+            'Type': 'text'
+        },
+        {
+            'Key': '$material-button-icon-size',
+            'Name': '12. Icon size',
+            'Type': 'text'
+        },
+        {
+            'Key': '$material-button-icon-margin',
+            'Name': '13. Icon margin',
+            'Type': 'text'
+        },
+        {
+            'Key': '$base-border-radius',
+            'Name': '120. Border radius',
+            'Type': 'text'
+        }
+    ],
+    'fluent': [
+        {
+            'Key': '$accordion-title-color',
+            'Name': '10. Item title text color',
             'Type': 'color'
         },
         {
-            'Key': '$material-slider-bg',
-            'Name': '20. Selected range background color',
+            'Key': '$fluent-accordion-title-font-size',
+            'Name': '20. Item title font size',
+            'Type': 'text'
+        },
+        {
+            'Key': '$fluent-accordion-item-opened-margin',
+            'Name': '10. Item expanded margin',
+            'Type': 'text'
+        },
+        {
+            'Key': '$badge-color',
+            'Name': '140. Badge text color',
             'Type': 'color'
         },
         {
-            'Key': '$material-slider-tooltip-color',
-            'Name': '30. Slider tooltip text color',
+            'Key': '$badge-bg',
+            'Name': '150. Badge background color',
             'Type': 'color'
         },
         {
-            'Key': '$splitter-resize-handle-color',
-            'Name': '10. Icon color',
+            'Key': '$button-normal-color',
+            'Name': '10. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$splitter-resize-handle-bg',
-            'Name': '40. Handle background color',
+            'Key': '$button-normal-bg',
+            'Name': '15. Background color (contained)',
             'Type': 'color'
         },
         {
-            'Key': '$splitter-resize-handle-bg-hover',
-            'Name': '50. Handle hover state background color',
+            'Key': '$button-normal-outlined-bg',
+            'Name': '16. Background color (outlined)',
             'Type': 'color'
         },
         {
-            'Key': '$splitter-resize-handle-bg-focused',
-            'Name': '60. Handle focused state background color',
+            'Key': '$button-normal-text-bg',
+            'Name': '17. Background color (text)',
             'Type': 'color'
         },
         {
-            'Key': '$splitter-resize-handle-color-hover',
-            'Name': '20. Hover state icon color',
+            'Key': '$button-normal-selected-color',
+            'Name': '20. Selected state text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-normal-hover-bg',
+            'Name': '30. Hover 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-normal-selected-bg',
+            'Name': '25. Selected state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$button-default-color',
+            'Name': '10. Text color (contained)',
             'Type': 'color'
         },
         {
-            'Key': '$splitter-resize-handle-color-focused',
-            'Name': '30. Focused state icon color',
+            'Key': '$button-default-bg',
+            'Name': '15. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$switch-bg',
-            'Name': '20. Track "OFF" background color',
+            'Key': '$button-default-selected-color',
+            'Name': '20. Selected state text color',
             'Type': 'color'
         },
         {
-            'Key': '$switch-handle-off-bg',
-            'Name': '30. Handle "OFF" background color',
+            'Key': '$button-default-hover-bg',
+            'Name': '30. Hover state background color',
             'Type': 'color'
         },
         {
-            'Key': '$switch-on-bg',
-            'Name': '40. Track "ON" background color',
+            'Key': '$button-default-focused-bg',
+            'Name': '40. Focused state background color',
             'Type': 'color'
         },
         {
-            'Key': '$switch-handle-on-bg',
-            'Name': '50. Handle "ON" background color',
+            'Key': '$button-default-active-bg',
+            'Name': '50. Active state background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-color',
-            'Name': '10. Tab text color',
+            'Key': '$button-default-selected-bg',
+            'Name': '25. Selected state background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-selected-color',
-            'Name': '20. Selected tab text color',
+            'Key': '$button-default-outlined-color',
+            'Name': '11. Text color (outlined)',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-disabled-color',
-            'Name': '30. Disabled tab color',
+            'Key': '$button-default-text-color',
+            'Name': '11. Text color (text)',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-selected-tab-border-color',
-            'Name': '40. Selected tab border color',
+            'Key': '$button-danger-color',
+            'Name': '10. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-disabled-tab-border-color',
-            'Name': '50. Disabled tab border color',
+            'Key': '$button-danger-bg',
+            'Name': '15. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-background',
-            'Name': '60. Tab background color',
+            'Key': '$button-danger-selected-color',
+            'Name': '20. Selected state text color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-icon-color',
-            'Name': '70. Tab icon color',
+            'Key': '$button-danger-hover-bg',
+            'Name': '30. Hover state background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-icon-selected-color',
-            'Name': '80. Selected tab icon color',
+            'Key': '$button-danger-focused-bg',
+            'Name': '40. Focused state background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-tab-icon-disabled-color',
-            'Name': '90. Disabled tab icon color',
+            'Key': '$button-danger-active-bg',
+            'Name': '50. Active state background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-hovered-tab-bg-color',
-            'Name': '100. Hovered tab background color',
+            'Key': '$button-danger-selected-bg',
+            'Name': '25. Selected state background color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-focused-tab-bg-color',
-            'Name': '110. Focused tab background color',
+            'Key': '$button-success-color',
+            'Name': '10. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$tabs-active-tab-bg-color',
-            'Name': '120. Active tab background color',
+            'Key': '$button-success-bg',
+            'Name': '15. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$tagbox-tag-color',
-            'Name': '10. Tag text color',
+            'Key': '$button-success-selected-color',
+            'Name': '20. Selected state text color',
             'Type': 'color'
         },
         {
-            'Key': '$tagbox-tag-bg',
-            'Name': '20. Tag background color',
+            'Key': '$button-success-hover-bg',
+            'Name': '30. Hover state background color',
             'Type': 'color'
         },
         {
-            'Key': '$tagbox-tag-active-color',
-            'Name': '30. Tag active text color',
+            'Key': '$button-success-focused-bg',
+            'Name': '40. Focused state background color',
             'Type': 'color'
         },
         {
-            'Key': '$tagbox-tag-button-remove-bg',
-            'Name': '40. Tag close button color',
+            'Key': '$button-success-active-bg',
+            'Name': '50. Active state background color',
             'Type': 'color'
         },
         {
-            'Key': '$textbox-search-icon-color',
-            'Name': '80. Search icon color',
+            'Key': '$button-success-selected-bg',
+            'Name': '25. Selected state background color',
             'Type': 'color'
         },
         {
-            'Key': '$texteditor-color',
-            'Name': '10. Text color',
+            'Key': '$button-default-outlined-color-hover',
+            'Name': '12. Hover state text color (outlined)',
             'Type': 'color'
         },
         {
-            'Key': '$texteditor-placeholder-color',
-            'Name': '20. Placeholder text color',
+            'Key': '$button-default-outlined-color-active',
+            'Name': '13. Active state text color (outlined)',
             'Type': 'color'
         },
         {
-            'Key': '$texteditor-bg',
-            'Name': '30. Background color',
+            'Key': '$button-default-outlined-selected-color',
+            'Name': '21. Selected state text color (outlined)',
             'Type': 'color'
         },
         {
-            'Key': '$texteditor-focused-bg',
-            'Name': '40. Focused background color',
+            'Key': '$button-default-text-color-hover',
+            'Name': '12. Hover state text color (text)',
             'Type': 'color'
         },
         {
-            'Key': '$texteditor-border-color',
-            'Name': '50. Border color',
+            'Key': '$button-default-text-color-active',
+            'Name': '13. Active state text color (text)',
             'Type': 'color'
         },
         {
-            'Key': '$texteditor-hover-border-color',
-            'Name': '60. Hovered border color',
+            'Key': '$button-default-text-selected-color',
+            'Name': '21. Selected state text color (text)',
             'Type': 'color'
         },
         {
-            'Key': '$texteditor-focused-border-color',
-            'Name': '70. Focused border color',
+            'Key': '$calendar-navigator-text-color',
+            'Name': '20. Navigator text color',
             'Type': 'color'
         },
         {
-            'Key': '$texteditor-hover-bg',
-            'Name': '40. Hovered background color',
+            'Key': '$calendar-header-color',
+            'Name': '30. Header text color',
             'Type': 'color'
         },
         {
-            'Key': '$tileview-color',
-            'Name': '10. Item text color',
+            'Key': '$calendar-cell-other-color',
+            'Name': '40. Other month text color',
             'Type': 'color'
         },
         {
-            'Key': '$toast-color',
-            'Name': '10. Text color',
+            'Key': '$calendar-cell-selected-bg',
+            'Name': '50. Selected cell background color',
             'Type': 'color'
         },
         {
-            'Key': '$toast-info-bg',
-            'Name': '20. Info background color',
+            'Key': '$cardview-fluent-common-bg-color',
+            'Name': '100. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$toast-warning-bg',
-            'Name': '30. Warning background color',
+            'Key': '$cardview-fluent-common-link-color',
+            'Name': '102. Link color',
             'Type': 'color'
         },
         {
-            'Key': '$toast-error-bg',
-            'Name': '40. Error background color',
+            'Key': '$cardview-fluent-common-text-color',
+            'Name': '103. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$toast-success-bg',
-            'Name': '50. Success background color',
+            'Key': '$cardview-fluent-card-bg-color',
+            'Name': '200. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$toolbar-bg',
-            'Name': '10. Background color',
+            'Key': '$cardview-fluent-card-border-color',
+            'Name': '201. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$tooltip-color',
-            'Name': '10. Text color',
+            'Key': '$cardview-fluent-card-divider-color',
+            'Name': '203. Divider color',
             'Type': 'color'
         },
         {
-            'Key': '$tooltip-bg',
-            'Name': '20. Background color',
+            'Key': '$cardview-fluent-card-text-color',
+            'Name': '204. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$treeview-focused-bg',
-            'Name': '80. Focused state background color',
+            'Key': '$cardview-fluent-card__cover-bg-color',
+            'Name': '206. Cover background color',
             'Type': 'color'
         },
         {
-            'Key': '$base-accent',
-            'Name': '10. Accent color',
+            'Key': '$cardview-fluent-card__cover--noimage-bg-color',
+            'Name': '207. \'Empty cover\' background color',
             'Type': 'color'
         },
         {
-            'Key': '$base-font-family',
-            'Name': '10. Font family',
-            'Type': 'text'
+            'Key': '$cardview-fluent-card__cover--noimage__icon-color',
+            'Name': '208. \'Empty cover\' icon color',
+            'Type': 'color'
         },
         {
-            'Key': '$base-text-color',
-            'Name': '20. Text color',
+            'Key': '$cardview-fluent-card--selected-bg-color',
+            'Name': '300. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$base-label-color',
-            'Name': '20. Label color',
+            'Key': '$cardview-fluent-card--selected-border-color',
+            'Name': '301. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$base-icon-color',
-            'Name': '40. Icon color',
+            'Key': '$cardview-fluent-card--selected-divider-color',
+            'Name': '302. Divider color',
             'Type': 'color'
         },
         {
-            'Key': '$base-spin-icon-color',
-            'Name': '50. Arrow icon color',
+            'Key': '$cardview-fluent-card--selected-text-color',
+            'Name': '303. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$base-bg',
-            'Name': '30. Background color',
+            'Key': '$cardview-fluent-card--selected__cover-bg-color',
+            'Name': '305. Cover background color',
             'Type': 'color'
         },
         {
-            'Key': '$base-border-color',
-            'Name': '40. Border color',
+            'Key': '$cardview-fluent-card--selected__cover--noimage-bg-color',
+            'Name': '306. \'Empty cover\' background color',
             'Type': 'color'
         },
         {
-            'Key': '$base-success',
-            'Name': '50. Success color',
+            'Key': '$cardview-fluent-card--selected__cover--noimage__icon-color',
+            'Name': '307. \'Empty cover\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$base-warning',
-            'Name': '60. Warning color',
+            'Key': '$cardview-fluent-header-panel__item-bg-color',
+            'Name': '400. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$base-danger',
-            'Name': '70. Danger color',
+            'Key': '$cardview-fluent-header-panel__item-border-color',
+            'Name': '401. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$base-hover-color',
-            'Name': '80. Hover state text color',
+            'Key': '$cardview-fluent-header-panel__item-text-color',
+            'Name': '403. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$base-hover-bg',
-            'Name': '90. Hover state background color',
+            'Key': '$cardview-fluent-header-panel__item__icon-color',
+            'Name': '405. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$base-focus-color',
-            'Name': '100. Focused state text color',
+            'Key': '$cardview-fluent-header-panel__item__header-filter-icon--selected-color',
+            'Name': '406. Active \'Filter\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$base-focus-bg',
-            'Name': '110. Focused state background color',
+            'Key': '$cardview-fluent-header-panel__item__sort-index-text-color',
+            'Name': '407. Sort index text color',
             'Type': 'color'
         },
         {
-            'Key': '$base-link-color',
-            'Name': '30. Link color',
+            'Key': '$cardview-fluent-header-panel__item--hovered-bg-color',
+            'Name': '500. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$material-button-height',
-            'Name': '11. Button height',
-            'Type': 'text'
+            'Key': '$cardview-fluent-header-panel__item--hovered-border-color',
+            'Name': '501. Border color',
+            'Type': 'color'
         },
         {
-            'Key': '$material-button-icon-size',
-            'Name': '12. Icon size',
-            'Type': 'text'
+            'Key': '$cardview-fluent-header-panel__item--hovered-text-color',
+            'Name': '502. Text color',
+            'Type': 'color'
         },
         {
-            'Key': '$material-button-icon-margin',
-            'Name': '13. Icon margin',
-            'Type': 'text'
+            'Key': '$cardview-fluent-header-panel__item--hovered__icon-color',
+            'Name': '504. Icon color',
+            'Type': 'color'
         },
         {
-            'Key': '$base-border-radius',
-            'Name': '120. Border radius',
-            'Type': 'text'
-        }
-    ],
-    'fluent': [
+            'Key': '$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color',
+            'Name': '505. Active \'Filter\' icon color',
+            'Type': 'color'
+        },
         {
-            'Key': '$accordion-title-color',
-            'Name': '10. Item title text color',
+            'Key': '$cardview-fluent-header-panel__item--hovered__sort-index-text-color',
+            'Name': '506. Sort index text color',
             'Type': 'color'
         },
         {
-            'Key': '$fluent-accordion-title-font-size',
-            'Name': '20. Item title font size',
-            'Type': 'text'
+            'Key': '$cardview-fluent-header-panel__item--disabled-bg-color',
+            'Name': '600. Background color',
+            'Type': 'color'
         },
         {
-            'Key': '$fluent-accordion-item-opened-margin',
-            'Name': '10. Item expanded margin',
-            'Type': 'text'
+            'Key': '$cardview-fluent-header-panel__item--disabled-border-color',
+            'Name': '601. Border color',
+            'Type': 'color'
         },
         {
-            'Key': '$badge-color',
-            'Name': '140. Badge text color',
+            'Key': '$cardview-fluent-header-panel__item--disabled-text-color',
+            'Name': '602. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$badge-bg',
-            'Name': '150. Badge background color',
+            'Key': '$cardview-fluent-header-panel__item--disabled__icon-color',
+            'Name': '604. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$button-normal-color',
-            'Name': '10. Text color',
+            'Key': '$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color',
+            'Name': '605. Active \'Filter\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$button-normal-bg',
-            'Name': '15. Background color (contained)',
+            'Key': '$cardview-fluent-header-panel__item--disabled__sort-index-text-color',
+            'Name': '606. Sort index text color',
             'Type': 'color'
         },
         {
-            'Key': '$button-normal-outlined-bg',
-            'Name': '16. Background color (outlined)',
+            'Key': '$cardview-fluent-header-panel__item--dragged-bg-color',
+            'Name': '700. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$button-normal-text-bg',
-            'Name': '17. Background color (text)',
+            'Key': '$cardview-fluent-header-panel__item--dragged-border-color',
+            'Name': '701. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$button-normal-selected-color',
-            'Name': '20. Selected state text color',
+            'Key': '$cardview-fluent-header-panel__item--dragged-text-color',
+            'Name': '702. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$button-normal-hover-bg',
-            'Name': '30. Hover state background color',
+            'Key': '$cardview-fluent-header-panel__item--dragged__allowance-icon-color',
+            'Name': '704. \'Drag allowed\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$button-normal-focused-bg',
-            'Name': '40. Focused state background color',
+            'Key': '$cardview-fluent-header-panel__item--dragged__prohibition-icon-color',
+            'Name': '705. \'Drag blocked\' icon color',
             'Type': 'color'
         },
         {
-            'Key': '$button-normal-active-bg',
-            'Name': '50. Active state background color',
+            'Key': '$cardview-fluent-header-panel__item--dragged-box-shadow-color',
+            'Name': '706. Box shadow color',
             'Type': 'color'
         },
         {
-            'Key': '$button-normal-selected-bg',
-            'Name': '25. Selected state background color',
+            'Key': '$cardview-fluent-header-panel__dropzone-bg-color',
+            'Name': '800. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$button-default-color',
-            'Name': '10. Text color (contained)',
+            'Key': '$cardview-fluent-header-panel__dropzone-border-color',
+            'Name': '802. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$button-default-bg',
-            'Name': '15. Background color',
+            'Key': '$cardview-fluent-header-panel__dropzone-text-color',
+            'Name': '803. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$button-default-selected-color',
-            'Name': '20. Selected state text color',
+            'Key': '$cardview-fluent-header-panel__dropzone__icon-color',
+            'Name': '804. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$button-default-hover-bg',
-            'Name': '30. Hover state background color',
+            'Key': '$cardview-fluent-filter-panel-bg-color',
+            'Name': '900. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$button-default-focused-bg',
-            'Name': '40. Focused state background color',
+            'Key': '$cardview-fluent-filter-panel-border-color',
+            'Name': '902. Border color',
             'Type': 'color'
         },
         {
-            'Key': '$button-default-active-bg',
-            'Name': '50. Active state background color',
+            'Key': '$cardview-fluent-filter-panel-text-color',
+            'Name': '903. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$button-default-selected-bg',
-            'Name': '25. Selected state background color',
+            'Key': '$cardview-fluent-filter-panel__icon-color',
+            'Name': '904. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$button-default-outlined-color',
-            'Name': '11. Text color (outlined)',
+            'Key': '$cardview-fluent-nodata-view-bg-color',
+            'Name': '1000. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$button-default-text-color',
-            'Name': '11. Text color (text)',
+            'Key': '$cardview-fluent-nodata-view-text-color',
+            'Name': '1001. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$button-danger-color',
-            'Name': '10. Text color',
+            'Key': '$cardview-fluent-nodata-view__icon-color',
+            'Name': '1002. Icon color',
             'Type': 'color'
         },
         {
-            'Key': '$button-danger-bg',
-            'Name': '15. Background color',
+            'Key': '$cardview-fluent-nodata-view__icon-bg-color',
+            'Name': '1003. Icon background color',
             'Type': 'color'
         },
         {
-            'Key': '$button-danger-selected-color',
-            'Name': '20. Selected state text color',
+            'Key': '$cardview-fluent-card__content__field-value--highlighted-bg-color',
+            'Name': '1100. Background color',
             'Type': 'color'
         },
         {
-            'Key': '$button-danger-hover-bg',
-            'Name': '30. Hover state background color',
+            'Key': '$cardview-fluent-card__content__field-value--highlighted-text-color',
+            'Name': '1102. Text color',
             'Type': 'color'
         },
         {
-            'Key': '$button-danger-focused-bg',
-            'Name': '40. Focused state background color',
+            'Key': '$cardview-fluent-card__content__field-value--highlighted-box-shadow-color',
+            'Name': '1104. Box shadow color',
             'Type': 'color'
         },
         {
-            'Key': '$button-danger-active-bg',
-            'Name': '50. Active state background color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-common-border-radius',
+            'Name': '101. Border radius',
+            'Type': 'text'
         },
         {
-            'Key': '$button-danger-selected-bg',
-            'Name': '25. Selected state background color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-common-text-weight',
+            'Name': '104. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$button-success-color',
-            'Name': '10. Text color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-common-cards-row-gap',
+            'Name': '105. Vertical gap between cards',
+            'Type': 'text'
         },
         {
-            'Key': '$button-success-bg',
-            'Name': '15. Background color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-common-cards-column-gap',
+            'Name': '106. Horizontal gap between cards',
+            'Type': 'text'
         },
         {
-            'Key': '$button-success-selected-color',
-            'Name': '20. Selected state text color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-card-border-radius',
+            'Name': '202. Border radius',
+            'Type': 'text'
         },
         {
-            'Key': '$button-success-hover-bg',
-            'Name': '30. Hover state background color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-card__field-caption-weight',
+            'Name': '205. Field name text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$button-success-focused-bg',
-            'Name': '40. Focused state background color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-card--selected__field-caption-weight',
+            'Name': '304. Field name text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$button-success-active-bg',
-            'Name': '50. Active state background color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-header-panel__item-border-radius',
+            'Name': '402. Border radius',
+            'Type': 'text'
         },
         {
-            'Key': '$button-success-selected-bg',
-            'Name': '25. Selected state background color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-header-panel__item-text-weight',
+            'Name': '404. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$button-default-outlined-color-hover',
-            'Name': '12. Hover state text color (outlined)',
-            'Type': 'color'
+            'Key': '$cardview-fluent-header-panel__item__sort-index-text-weight',
+            'Name': '408. Sort index text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$button-default-outlined-color-active',
-            'Name': '13. Active state text color (outlined)',
-            'Type': 'color'
+            'Key': '$cardview-fluent-header-panel__item--hovered-text-weight',
+            'Name': '503. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$button-default-outlined-selected-color',
-            'Name': '21. Selected state text color (outlined)',
-            'Type': 'color'
+            'Key': '$cardview-fluent-header-panel__item--hovered__sort-index-text-weight',
+            'Name': '507. Sort index text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$button-default-text-color-hover',
-            'Name': '12. Hover state text color (text)',
-            'Type': 'color'
+            'Key': '$cardview-fluent-header-panel__item--disabled-text-weight',
+            'Name': '603. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$button-default-text-color-active',
-            'Name': '13. Active state text color (text)',
-            'Type': 'color'
+            'Key': '$cardview-fluent-header-panel__item--disabled__sort-index-text-weight',
+            'Name': '607. Sort index text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$button-default-text-selected-color',
-            'Name': '21. Selected state text color (text)',
-            'Type': 'color'
+            'Key': '$cardview-fluent-header-panel__item--dragged-text-weight',
+            'Name': '703. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
-            'Key': '$calendar-navigator-text-color',
-            'Name': '20. Navigator text color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-header-panel__dropzone-border-radius',
+            'Name': '801. Border radius',
+            'Type': 'text'
         },
         {
-            'Key': '$calendar-header-color',
-            'Name': '30. Header text color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-filter-panel-border-radius',
+            'Name': '901. Border radius',
+            'Type': 'text'
         },
         {
-            'Key': '$calendar-cell-other-color',
-            'Name': '40. Other month text color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-card__content__field-value--highlighted-border-radius',
+            'Name': '1101. Border radius',
+            'Type': 'text'
         },
         {
-            'Key': '$calendar-cell-selected-bg',
-            'Name': '50. Selected cell background color',
-            'Type': 'color'
+            'Key': '$cardview-fluent-card__content__field-value--highlighted-text-weight',
+            'Name': '1103. Text weight',
+            'Type': 'select',
+            'TypeValues': '100|200|300|400|500|600|700|800|900'
         },
         {
             'Key': '$chat-background-color',
@@ -3030,6 +4468,146 @@ exports.metadata = {
             'Name': '20. Hover state icon color',
             'Type': 'color'
         },
+        {
+            'Key': '$stepper-step-accent-bg',
+            'Name': '10. Active color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-accent-hover-bg',
+            'Name': '20. Hover state active color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-danger-bg',
+            'Name': '30. Invalid color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-danger-hover-bg',
+            'Name': '40. Hover state invalid color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-bg',
+            'Name': '60. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-hover-bg',
+            'Name': '70. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-border-color',
+            'Name': '80. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-hover-border-color',
+            'Name': '90. Hover state border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-text-color',
+            'Name': '100. Text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-base-label-color',
+            'Name': '110. Label text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-bg',
+            'Name': '120. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-hover-bg',
+            'Name': '130. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-text-color',
+            'Name': '140. Text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-selected-label-color',
+            'Name': '150. Label text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-bg',
+            'Name': '160. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-hover-bg',
+            'Name': '170. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-border-color',
+            'Name': '180. Border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-hover-border-color',
+            'Name': '190. Hover state border color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-text-color',
+            'Name': '200. Text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-hover-text-color',
+            'Name': '210. Hover state text or icon color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-label-color',
+            'Name': '220. Invalid label text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-selected-bg',
+            'Name': '230. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-invalid-selected-hover-bg',
+            'Name': '240. Hover state background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-disabled-bg',
+            'Name': '260. Background color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-disabled-text-color',
+            'Name': '270. Text color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-connector-bg',
+            'Name': '280. Pending color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-connector-value-bg',
+            'Name': '290. Completed color',
+            'Type': 'color'
+        },
+        {
+            'Key': '$stepper-step-shadow-color',
+            'Name': '300. Shadow color',
+            'Type': 'color'
+        },
         {
             'Key': '$switch-bg',
             'Name': '20. Track "OFF" background color',
@@ -3387,7 +4965,7 @@ exports.metadata = {
         }
     ]
 };
-exports.version = '25.1.1-alpha';
+exports.version = '25.1.3';
 exports.browsersList = [
     'last 2 versions',
     'ios > 9',
@@ -3480,14 +5058,24 @@ exports.dependencies = {
         'textbox',
         'numberbox'
     ],
-    'chat': [
+    'toolbar': [
         'validation',
         'button',
+        'popup',
         'loadindicator',
-        'textbox',
         'loadpanel',
         'scrollview'
     ],
+    'chat': [
+        'validation',
+        'button',
+        'popup',
+        'loadindicator',
+        'loadpanel',
+        'scrollview',
+        'toolbar',
+        'textbox'
+    ],
     'selectbox': [
         'validation',
         'checkbox',
@@ -3584,15 +5172,30 @@ exports.dependencies = {
         'tabpanel'
     ],
     'gallery': [],
-    'toolbar': [
+    'contextmenu': [
+        'loadindicator',
         'validation',
         'button',
-        'popup',
+        'textbox'
+    ],
+    'treeview': [
         'loadindicator',
-        'loadpanel',
-        'scrollview'
+        'validation',
+        'button',
+        'textbox',
+        'checkbox'
     ],
-    'contextmenu': [
+    'menu': [
+        'validation',
+        'button',
+        'loadindicator',
+        'textbox',
+        'checkbox',
+        'treeview',
+        'contextmenu'
+    ],
+    'informer': [],
+    'textarea': [
         'loadindicator',
         'validation',
         'button',
@@ -3623,7 +5226,12 @@ exports.dependencies = {
         'multiview',
         'tabs',
         'tabpanel',
-        'form'
+        'form',
+        'treeview',
+        'menu',
+        'dropdownbutton',
+        'informer',
+        'textarea'
     ],
     'lookup': [
         'validation',
@@ -3679,12 +5287,6 @@ exports.dependencies = {
         'textbox',
         'selectbox'
     ],
-    'textarea': [
-        'loadindicator',
-        'validation',
-        'button',
-        'textbox'
-    ],
     'tileview': [
         'loadindicator',
         'loadpanel',
@@ -3692,22 +5294,6 @@ exports.dependencies = {
     ],
     'sortable': [],
     'accordion': [],
-    'treeview': [
-        'loadindicator',
-        'validation',
-        'button',
-        'textbox',
-        'checkbox'
-    ],
-    'menu': [
-        'validation',
-        'button',
-        'loadindicator',
-        'textbox',
-        'checkbox',
-        'treeview',
-        'contextmenu'
-    ],
     'filterbuilder': [
         'validation',
         'button',
@@ -3765,6 +5351,33 @@ exports.dependencies = {
         'scrollview',
         'toolbar'
     ],
+    'cardview': [
+        'loadindicator',
+        'validation',
+        'button',
+        'textbox',
+        'loadpanel',
+        'checkbox',
+        'scrollview',
+        'list',
+        'popup',
+        'treeview',
+        'toolbar',
+        'sortable',
+        'numberbox',
+        'calendar',
+        'box',
+        'selectbox',
+        'datebox',
+        'responsivebox',
+        'multiview',
+        'tabs',
+        'tabpanel',
+        'form',
+        'filterbuilder',
+        'toast',
+        'contextmenu'
+    ],
     'pivotgrid': [
         'validation',
         'button',
@@ -3786,14 +5399,14 @@ exports.dependencies = {
         'buttongroup',
         'loadindicator',
         'textbox',
+        'numberbox',
+        'checkbox',
         'calendar',
         'box',
-        'checkbox',
         'loadpanel',
         'scrollview',
         'list',
         'selectbox',
-        'numberbox',
         'datebox',
         'responsivebox',
         'multiview',