[ISSUE 1406] Get rid of direct use of colors map. Refactoring.

* Get rid of direct use of colors map

* Edited direct using color map in styled component

* Resolved conflicts, refactored Dropdown component

* resolved feedback

* refactoring

Co-authored-by: Oleg Shur <workshur@gmail.com>

kafka-ui-react-app/src/components/App.styled.ts

@@ -35,7 +35,7 @@ export const Sidebar = styled.div<{ $visible: boolean }>(
     overflow-y: scroll;
     transition: width 0.25s, opacity 0.25s, transform 0.25s,
       -webkit-transform 0.25s;
-    background: ${theme.menuStyles.backgroundColor.normal};
+    background: ${theme.menu.backgroundColor.normal};
     @media screen and (max-width: 1023px) {
       ${$visible &&
       `transform: translate3d(${theme.layout.navBarWidth}, 0, 0)`};
@@ -99,7 +99,7 @@ export const Navbar = styled.nav(
     left: 0;
     right: 0;
     z-index: 30;
-    background-color: ${theme.menuStyles.backgroundColor.normal};
+    background-color: ${theme.menu.backgroundColor.normal};
     min-height: 3.25rem;
   `
 );
@@ -132,7 +132,7 @@ export const NavbarBurger = styled.div(
     padding: 0;
 
     &:hover {
-      background-color: ${theme.menuStyles.backgroundColor.hover};
+      background-color: ${theme.menu.backgroundColor.hover};
     }
 
     @media screen and (min-width: 1024px) {
@@ -145,7 +145,7 @@ export const Span = styled.span(
   ({ theme }) => css`
     display: block;
     position: absolute;
-    background: ${theme.menuStyles.color.active};
+    background: ${theme.menu.color.active};
     height: 1px;
     left: calc(50% - 8px);
     transform-origin: center;
@@ -174,7 +174,7 @@ export const Hyperlink = styled.a(
     flex-shrink: 0;
     align-items: center;
     margin: 0;
-    color: ${theme.menuStyles.color.active};
+    color: ${theme.menu.color.active};
     font-size: 1.25rem;
     font-weight: 600;
     cursor: pointer;

kafka-ui-react-app/src/components/Connect/Details/Config/Config.tsx

@@ -9,7 +9,6 @@ import {
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import Editor from 'components/common/Editor/Editor';
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 interface RouterParams {
   clusterName: ClusterName;
@@ -31,7 +30,7 @@ export interface ConfigProps {
 const ConnectConfigWrapper = styled.div`
   padding: 16px;
   margin: 16px;
-  border: 1px solid ${Colors.neutral[10]};
+  border: 1px solid ${({ theme }) => theme.layout.stuffColor};
   border-radius: 8px;
 `;
 

kafka-ui-react-app/src/components/Connect/Details/Config/__test__/Config.spec.tsx

@@ -6,6 +6,8 @@ import { clusterConnectConnectorConfigPath } from 'lib/paths';
 import ConfigContainer from 'components/Connect/Details/Config/ConfigContainer';
 import Config, { ConfigProps } from 'components/Connect/Details/Config/Config';
 import { connector } from 'redux/reducers/connect/__test__/fixtures';
+import { ThemeProvider } from 'styled-components';
+import theme from 'theme/theme';
 
 jest.mock('components/common/PageLoader/PageLoader', () => 'mock-PageLoader');
 
@@ -29,12 +31,14 @@ describe('Config', () => {
         pathname={pathname}
         urlParams={{ clusterName, connectName, connectorName }}
       >
-        <Config
-          fetchConfig={jest.fn()}
-          isConfigFetching={false}
-          config={connector.config}
-          {...props}
-        />
+        <ThemeProvider theme={theme}>
+          <Config
+            fetchConfig={jest.fn()}
+            isConfigFetching={false}
+            config={connector.config}
+            {...props}
+          />
+        </ThemeProvider>
       </TestRouterWrapper>
     );
 

kafka-ui-react-app/src/components/Connect/Details/Config/__test__/__snapshots__/Config.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`Config view matches snapshot 1`] = `
 .c0 {
   padding: 16px;
   margin: 16px;
-  border: 1px solid #E3E6E8;
+  border: 1px solid #F1F2F3;
   border-radius: 8px;
 }
 

kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx

@@ -41,7 +41,7 @@ const ListItem: React.FC<ListItemProps> = ({ task, restartTask }) => {
       <td style={{ width: '5%' }}>
         <div>
           <Dropdown label={<VerticalElipsisIcon />} right>
-            <DropdownItem onClick={restartTaskHandler}>
+            <DropdownItem onClick={restartTaskHandler} danger>
               <span>Clear Messages</span>
             </DropdownItem>
           </Dropdown>

kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -1,6 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ListItem view matches snapshot 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
 .c2 {
   background: transparent;
   border: none;
@@ -22,14 +32,8 @@ exports[`ListItem view matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
+.c3 {
+  color: #E51A1A;
 }
 
 .c0 {
@@ -81,8 +85,6 @@ exports[`ListItem view matches snapshot 1`] = `
               className="c1"
             >
               <button
-                aria-controls="dropdown-menu"
-                aria-haspopup="true"
                 className="c2"
                 onClick={[Function]}
                 type="button"
@@ -110,7 +112,7 @@ exports[`ListItem view matches snapshot 1`] = `
                 className="dropdown-content has-text-left"
               >
                 <a
-                  className="dropdown-item is-link"
+                  className="c3 dropdown-item is-link"
                   href="#end"
                   onClick={[Function]}
                   role="menuitem"

kafka-ui-react-app/src/components/Connect/Edit/Edit.styled.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const ConnectEditWrapperStyled = styled.div`
   margin: 16px;
@@ -13,7 +12,7 @@ export const ConnectEditWarningMessageStyled = styled.div`
   height: 48px;
   display: flex;
   align-items: center;
-  background-color: ${Colors.yellow[10]};
+  background-color: ${({ theme }) => theme.connectEditWarning};
   border-radius: 8px;
   padding: 8px;
   margin-bottom: 16px;

kafka-ui-react-app/src/components/Connect/List/List.styled.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const TagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;

kafka-ui-react-app/src/components/Connect/List/ListItem.tsx

@@ -12,19 +12,14 @@ import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationM
 import { Tag } from 'components/common/Tag/Tag.styled';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
-import { Colors } from 'theme/theme';
-import styled from 'styled-components';
+
+import * as S from './List.styled';
 
 export interface ListItemProps {
   clusterName: ClusterName;
   connector: FullConnectorInfo;
 }
 
-const TopicTagsWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
 const ListItem: React.FC<ListItemProps> = ({
   clusterName,
   connector: {
@@ -84,13 +79,13 @@ const ListItem: React.FC<ListItemProps> = ({
       <td>{type}</td>
       <td>{connectorClass}</td>
       <td>
-        <TopicTagsWrapper>
+        <S.TagsWrapper>
           {topics?.map((t) => (
             <Tag key={t} color="gray">
               <Link to={clusterTopicPath(clusterName, t)}>{t}</Link>
             </Tag>
           ))}
-        </TopicTagsWrapper>
+        </S.TagsWrapper>
       </td>
       <td>{status && <Tag color={stateColor}>{status.state}</Tag>}</td>
       <td>
@@ -106,8 +101,9 @@ const ListItem: React.FC<ListItemProps> = ({
             <DropdownDivider />
             <DropdownItem
               onClick={() => setDeleteConnectorConfirmationVisible(true)}
+              danger
             >
-              <span style={{ color: Colors.red[50] }}>Remove Connector</span>
+              Remove Connector
             </DropdownItem>
           </Dropdown>
         </div>

kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -1,6 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Connectors ListItem matches snapshot 1`] = `
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
 .c5 {
   background: transparent;
   border: none;
@@ -22,14 +32,8 @@ exports[`Connectors ListItem matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
+.c6 {
+  color: #E51A1A;
 }
 
 .c2 {
@@ -61,7 +65,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
 }
 
 .c0 > a {
-  color: #171A1C;
+  color: normal:#171A1C;
   font-weight: 500;
   text-overflow: ellipsis;
 }
@@ -88,7 +92,13 @@ exports[`Connectors ListItem matches snapshot 1`] = `
         },
         "shadow": "rgba(0, 0, 0, 0.1)",
       },
-      "buttonStyles": Object {
+      "breadcrumb": "#ABB5BA",
+      "button": Object {
+        "border": Object {
+          "active": "#171A1C",
+          "hover": "#454F54",
+          "normal": "#73848C",
+        },
         "fontSize": Object {
           "L": "16px",
           "M": "14px",
@@ -134,11 +144,21 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "warning": "#FFEECC",
         },
       },
-      "confirmationModal": Object {
-        "overlay": "rgba(10, 10, 10, 0.1)",
-        "shadow": "rgba(0, 0, 0, 0.1)",
+      "configList": Object {
+        "color": "#ABB5BA",
+      },
+      "connectEditWarning": "#FFEECC",
+      "consumerTopicContent": Object {
+        "backgroundColor": "#F1F2F3",
       },
-      "headingStyles": Object {
+      "dangerZone": Object {
+        "borderColor": "#E3E6E8",
+        "color": "#E51A1A",
+      },
+      "dropdown": Object {
+        "color": "#E51A1A",
+      },
+      "heading": Object {
         "h1": Object {
           "color": "#171A1C",
         },
@@ -157,6 +177,32 @@ exports[`Connectors ListItem matches snapshot 1`] = `
         "messageToggleIconOpened": "#171A1C",
         "verticalElipsisIcon": "#73848C",
       },
+      "input": Object {
+        "backgroundColor": Object {
+          "readOnly": "#F1F2F3",
+        },
+        "borderColor": Object {
+          "disabled": "#E3E6E8",
+          "focus": "#454F54",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
+        },
+        "color": Object {
+          "disabled": "#ABB5BA",
+          "placeholder": Object {
+            "normal": "#ABB5BA",
+            "readOnly": "#ABB5BA",
+          },
+          "readOnly": "#171A1C",
+        },
+        "error": "#E51A1A",
+        "icon": Object {
+          "color": "#454F54",
+        },
+        "label": Object {
+          "color": "#454F54",
+        },
+      },
       "layout": Object {
         "minWidth": "1200px",
         "navBarHeight": "3.25rem",
@@ -167,7 +213,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
         "stuffBorderColor": "#E3E6E8",
         "stuffColor": "#F1F2F3",
       },
-      "menuStyles": Object {
+      "menu": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#F1F2F3",
@@ -186,6 +232,12 @@ exports[`Connectors ListItem matches snapshot 1`] = `
       },
       "metrics": Object {
         "backgroundColor": "#F1F2F3",
+        "filters": Object {
+          "color": Object {
+            "icon": "#171A1C",
+            "normal": "#73848C",
+          },
+        },
         "indicator": Object {
           "backgroundColor": "#FFFFFF",
           "lightTextColor": "#ABB5BA",
@@ -193,11 +245,20 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "warningTextColor": "#E51A1A",
         },
       },
+      "modal": Object {
+        "backgroundColor": "#FFFFFF",
+        "border": Object {
+          "bottom": "#F1F2F3",
+          "top": "#F1F2F3",
+        },
+        "overlay": "rgba(10, 10, 10, 0.1)",
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
       "pageLoader": Object {
         "borderBottomColor": "#FFFFFF",
         "borderColor": "#4F4FFF",
       },
-      "paginationStyles": Object {
+      "pagination": Object {
         "backgroundColor": "#FFFFFF",
         "borderColor": Object {
           "active": "#454F54",
@@ -214,10 +275,11 @@ exports[`Connectors ListItem matches snapshot 1`] = `
         "currentPage": "#E3E6E8",
       },
       "panelColor": "#FFFFFF",
-      "primaryTabStyles": Object {
+      "primaryTab": Object {
         "borderColor": Object {
           "active": "#4F4FFF",
           "hover": "transparent",
+          "nav": "#E3E6E8",
           "normal": "transparent",
         },
         "color": Object {
@@ -226,6 +288,12 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "normal": "#73848C",
         },
       },
+      "schema": Object {
+        "backgroundColor": Object {
+          "div": "#FFFFFF",
+          "tr": "#F1F2F3",
+        },
+      },
       "scrollbar": Object {
         "thumbColor": Object {
           "active": "#73848C",
@@ -236,7 +304,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "normal": "#FFFFFF",
         },
       },
-      "secondaryTabStyles": Object {
+      "secondaryTab": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#F1F2F3",
@@ -248,7 +316,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "normal": "#73848C",
         },
       },
-      "selectStyles": Object {
+      "select": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#E3E6E8",
@@ -272,7 +340,37 @@ exports[`Connectors ListItem matches snapshot 1`] = `
         "circle": "#FFFFFF",
         "unchecked": "#ABB5BA",
       },
-      "tagStyles": Object {
+      "table": Object {
+        "link": Object {
+          "color": Object {
+            "normal": "#171A1C",
+          },
+        },
+        "td": Object {
+          "color": Object {
+            "normal": "#171A1C",
+          },
+        },
+        "th": Object {
+          "backgroundColor": Object {
+            "normal": "#FFFFFF",
+          },
+          "color": Object {
+            "active": "#4F4FFF",
+            "hover": "#4F4FFF",
+            "normal": "#73848C",
+          },
+          "previewColor": Object {
+            "normal": "#4F4FFF",
+          },
+        },
+        "tr": Object {
+          "backgroundColor": Object {
+            "hover": "#F1F2F3",
+          },
+        },
+      },
+      "tag": Object {
         "backgroundColor": Object {
           "blue": "#e3f2fd",
           "gray": "#F1F2F3",
@@ -283,20 +381,48 @@ exports[`Connectors ListItem matches snapshot 1`] = `
         },
         "color": "#171A1C",
       },
-      "textarea": Object {
-        "focus": "transparent",
-      },
-      "thStyles": Object {
+      "textArea": Object {
         "backgroundColor": Object {
-          "normal": "#FFFFFF",
+          "readOnly": "#F1F2F3",
+        },
+        "borderColor": Object {
+          "disabled": "#E3E6E8",
+          "focus": "#454F54",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
         },
         "color": Object {
-          "active": "#4F4FFF",
-          "hover": "#4F4FFF",
-          "normal": "#73848C",
+          "disabled": "#ABB5BA",
+          "placeholder": Object {
+            "focus": Object {
+              "normal": "transparent",
+              "readOnly": "#ABB5BA",
+            },
+            "normal": "#ABB5BA",
+          },
+          "readOnly": "#171A1C",
         },
-        "previewColor": Object {
-          "normal": "#4F4FFF",
+      },
+      "topicFormLabel": Object {
+        "color": "#73848C",
+      },
+      "topicMetaData": Object {
+        "backgroundColor": "#F1F2F3",
+        "color": Object {
+          "label": "#73848C",
+          "meta": "#ABB5BA",
+          "value": "#2F3639",
+        },
+      },
+      "topicsList": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#F1F2F3",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#73848C",
+          "normal": "#171A1C",
         },
       },
       "viewer": Object {
@@ -471,37 +597,30 @@ exports[`Connectors ListItem matches snapshot 1`] = `
                           <div
                             className="c4"
                           >
-                            <Styled(DropdownTrigger)
+                            <styled.button
                               onClick={[Function]}
                             >
-                              <DropdownTrigger
+                              <button
                                 className="c5"
                                 onClick={[Function]}
+                                type="button"
                               >
-                                <button
-                                  aria-controls="dropdown-menu"
-                                  aria-haspopup="true"
-                                  className="c5"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <VerticalElipsisIcon>
-                                    <svg
-                                      fill="none"
-                                      height="16"
-                                      viewBox="0 0 4 16"
-                                      width="4"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
-                                        fill="#73848C"
-                                      />
-                                    </svg>
-                                  </VerticalElipsisIcon>
-                                </button>
-                              </DropdownTrigger>
-                            </Styled(DropdownTrigger)>
+                                <VerticalElipsisIcon>
+                                  <svg
+                                    fill="none"
+                                    height="16"
+                                    viewBox="0 0 4 16"
+                                    width="4"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
+                                      fill="#73848C"
+                                    />
+                                  </svg>
+                                </VerticalElipsisIcon>
+                              </button>
+                            </styled.button>
                           </div>
                         </styled.div>
                         <div
@@ -518,25 +637,24 @@ exports[`Connectors ListItem matches snapshot 1`] = `
                               />
                             </DropdownDivider>
                             <DropdownItem
+                              danger={true}
                               onClick={[Function]}
                             >
-                              <a
+                              <styled.a
+                                $isDanger={true}
                                 className="dropdown-item is-link"
-                                href="#end"
                                 onClick={[Function]}
-                                role="menuitem"
-                                type="button"
                               >
-                                <span
-                                  style={
-                                    Object {
-                                      "color": "#E51A1A",
-                                    }
-                                  }
+                                <a
+                                  className="c6 dropdown-item is-link"
+                                  href="#end"
+                                  onClick={[Function]}
+                                  role="menuitem"
+                                  type="button"
                                 >
                                   Remove Connector
-                                </span>
-                              </a>
+                                </a>
+                              </styled.a>
                             </DropdownItem>
                           </div>
                         </div>

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -15,7 +15,6 @@ import * as Metrics from 'components/common/Metrics';
 import { Tag } from 'components/common/Tag/Tag.styled';
 import Dropdown from 'components/common/Dropdown/Dropdown';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
-import { Colors } from 'theme/theme';
 import { groupBy } from 'lodash';
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
@@ -79,8 +78,8 @@ const Details: React.FC = () => {
             <Dropdown label={<VerticalElipsisIcon />} right>
               <DropdownItem onClick={onResetOffsets}>Reset offset</DropdownItem>
               <DropdownItem
-                style={{ color: Colors.red[50] }}
                 onClick={() => setIsConfirmationModalVisible(true)}
+                danger
               >
                 Delete consumer group
               </DropdownItem>

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.styled.ts

@@ -26,12 +26,12 @@ export const ResetOffsetsStyledWrapper = styled.div`
 
   & .date-picker {
     height: 32px;
-    border: 1px ${(props) => props.theme.selectStyles.borderColor.normal} solid;
+    border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
     border-radius: 4px;
     font-size: 14px;
     width: 50%;
     padding-left: 12px;
-    color: ${(props) => props.theme.selectStyles.color.normal};
+    color: ${(props) => props.theme.select.color.normal};
 
     background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
     background-repeat: no-repeat !important;

kafka-ui-react-app/src/components/ConsumerGroups/Details/TopicContents/TopicContent.styled.ts

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const TopicContentWrapper = styled.tr`
-  background-color: ${Colors.neutral[5]};
+  background-color: ${({ theme }) =>
+    theme.consumerTopicContent.backgroundColor};
   & > td {
     padding: 16px !important;
   }
@@ -10,7 +10,7 @@ export const TopicContentWrapper = styled.tr`
 
 export const ContentBox = styled.div(
   ({ theme }) => css`
-    background-color: ${theme.menuStyles.backgroundColor.normal};
+    background-color: ${theme.menu.backgroundColor.normal};
     padding: 20px;
     border-radius: 8px;
   `

kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts

@@ -18,12 +18,12 @@ export const Wrapper = styled.li.attrs({ role: 'menuitem' })(
     margin: 0;
     line-height: 20px;
     align-items: center;
-    color: ${theme.menuStyles.color.normal};
-    background-color: ${theme.menuStyles.backgroundColor.normal};
+    color: ${theme.menu.color.normal};
+    background-color: ${theme.menu.backgroundColor.normal};
 
     &:hover {
-      background-color: ${theme.menuStyles.backgroundColor.hover};
-      color: ${theme.menuStyles.color.hover};
+      background-color: ${theme.menu.backgroundColor.hover};
+      color: ${theme.menu.color.hover};
     }
   `
 );
@@ -49,8 +49,8 @@ export const StatusIcon = styled.circle.attrs({
 })<{ status: ServerStatus }>(
   ({ theme, status }) => css`
     fill: ${status === ServerStatus.ONLINE
-      ? theme.menuStyles.statusIconColor.online
-      : theme.menuStyles.statusIconColor.offline};
+      ? theme.menu.statusIconColor.online
+      : theme.menu.statusIconColor.offline};
   `
 );
 
@@ -69,5 +69,5 @@ type ChevronIconProps = { $open: boolean };
 export const ChevronIcon = styled.path.attrs<ChevronIconProps>(({ $open }) => ({
   d: $open ? 'M8.99988 5L4.99988 1L0.999878 5' : 'M1 1L5 5L9 1',
 }))<ChevronIconProps>`
-  stroke: ${({ theme }) => theme.menuStyles.chevronIconColor};
+  stroke: ${({ theme }) => theme.menu.chevronIconColor};
 `;

kafka-ui-react-app/src/components/Nav/Nav.styled.ts

@@ -21,17 +21,17 @@ export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })(
     cursor: pointer;
     text-decoration: none;
     margin: 0px 0px;
-    background-color: ${theme.menuStyles.backgroundColor.normal};
-    color: ${theme.menuStyles.color.normal};
+    background-color: ${theme.menu.backgroundColor.normal};
+    color: ${theme.menu.color.normal};
 
     &:hover {
-      background-color: ${theme.menuStyles.backgroundColor.hover};
-      color: ${theme.menuStyles.color.hover};
+      background-color: ${theme.menu.backgroundColor.hover};
+      color: ${theme.menu.color.hover};
     }
 
     &.${activeClassName} {
-      background-color: ${theme.menuStyles.backgroundColor.active};
-      color: ${theme.menuStyles.color.active};
+      background-color: ${theme.menu.backgroundColor.active};
+      color: ${theme.menu.color.active};
     }
   `
 );

kafka-ui-react-app/src/components/Schemas/Details/Details.tsx

@@ -82,6 +82,7 @@ const Details: React.FC = () => {
             <Dropdown label={<VerticalElipsisIcon />} right>
               <DropdownItem
                 onClick={() => setDeleteSchemaConfirmationVisible(true)}
+                danger
               >
                 Remove schema
               </DropdownItem>

kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.styled.ts

@@ -40,7 +40,7 @@ export const LatestVersionWrapper = styled.div`
 `;
 
 export const MetaDataLabel = styled.h3`
-  color: ${theme.headingStyles.h3.color};
+  color: ${theme.heading.h3.color};
   width: 110px;
-  font-size: ${theme.headingStyles.h3.fontSize};
+  font-size: ${theme.heading.h3.fontSize};
 `;

kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion/SchemaVersion.styled.ts

@@ -1,12 +1,11 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const SchemaVersionWrapper = styled.tr`
-  background-color: ${Colors.neutral[5]};
+  background-color: ${({ theme }) => theme.schema.backgroundColor.tr};
   & > td {
     padding: 16px !important;
     & > div {
-      background-color: ${Colors.neutral[0]};
+      background-color: ${({ theme }) => theme.schema.backgroundColor.div};
       border-radius: 8px;
       padding: 24px;
     }

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap

@@ -13,7 +13,13 @@ exports[`LatestVersionItem matches snapshot 1`] = `
         },
         "shadow": "rgba(0, 0, 0, 0.1)",
       },
-      "buttonStyles": Object {
+      "breadcrumb": "#ABB5BA",
+      "button": Object {
+        "border": Object {
+          "active": "#171A1C",
+          "hover": "#454F54",
+          "normal": "#73848C",
+        },
         "fontSize": Object {
           "L": "16px",
           "M": "14px",
@@ -59,11 +65,21 @@ exports[`LatestVersionItem matches snapshot 1`] = `
           "warning": "#FFEECC",
         },
       },
-      "confirmationModal": Object {
-        "overlay": "rgba(10, 10, 10, 0.1)",
-        "shadow": "rgba(0, 0, 0, 0.1)",
+      "configList": Object {
+        "color": "#ABB5BA",
       },
-      "headingStyles": Object {
+      "connectEditWarning": "#FFEECC",
+      "consumerTopicContent": Object {
+        "backgroundColor": "#F1F2F3",
+      },
+      "dangerZone": Object {
+        "borderColor": "#E3E6E8",
+        "color": "#E51A1A",
+      },
+      "dropdown": Object {
+        "color": "#E51A1A",
+      },
+      "heading": Object {
         "h1": Object {
           "color": "#171A1C",
         },
@@ -82,6 +98,32 @@ exports[`LatestVersionItem matches snapshot 1`] = `
         "messageToggleIconOpened": "#171A1C",
         "verticalElipsisIcon": "#73848C",
       },
+      "input": Object {
+        "backgroundColor": Object {
+          "readOnly": "#F1F2F3",
+        },
+        "borderColor": Object {
+          "disabled": "#E3E6E8",
+          "focus": "#454F54",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
+        },
+        "color": Object {
+          "disabled": "#ABB5BA",
+          "placeholder": Object {
+            "normal": "#ABB5BA",
+            "readOnly": "#ABB5BA",
+          },
+          "readOnly": "#171A1C",
+        },
+        "error": "#E51A1A",
+        "icon": Object {
+          "color": "#454F54",
+        },
+        "label": Object {
+          "color": "#454F54",
+        },
+      },
       "layout": Object {
         "minWidth": "1200px",
         "navBarHeight": "3.25rem",
@@ -92,7 +134,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
         "stuffBorderColor": "#E3E6E8",
         "stuffColor": "#F1F2F3",
       },
-      "menuStyles": Object {
+      "menu": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#F1F2F3",
@@ -111,6 +153,12 @@ exports[`LatestVersionItem matches snapshot 1`] = `
       },
       "metrics": Object {
         "backgroundColor": "#F1F2F3",
+        "filters": Object {
+          "color": Object {
+            "icon": "#171A1C",
+            "normal": "#73848C",
+          },
+        },
         "indicator": Object {
           "backgroundColor": "#FFFFFF",
           "lightTextColor": "#ABB5BA",
@@ -118,11 +166,20 @@ exports[`LatestVersionItem matches snapshot 1`] = `
           "warningTextColor": "#E51A1A",
         },
       },
+      "modal": Object {
+        "backgroundColor": "#FFFFFF",
+        "border": Object {
+          "bottom": "#F1F2F3",
+          "top": "#F1F2F3",
+        },
+        "overlay": "rgba(10, 10, 10, 0.1)",
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
       "pageLoader": Object {
         "borderBottomColor": "#FFFFFF",
         "borderColor": "#4F4FFF",
       },
-      "paginationStyles": Object {
+      "pagination": Object {
         "backgroundColor": "#FFFFFF",
         "borderColor": Object {
           "active": "#454F54",
@@ -139,10 +196,11 @@ exports[`LatestVersionItem matches snapshot 1`] = `
         "currentPage": "#E3E6E8",
       },
       "panelColor": "#FFFFFF",
-      "primaryTabStyles": Object {
+      "primaryTab": Object {
         "borderColor": Object {
           "active": "#4F4FFF",
           "hover": "transparent",
+          "nav": "#E3E6E8",
           "normal": "transparent",
         },
         "color": Object {
@@ -151,6 +209,12 @@ exports[`LatestVersionItem matches snapshot 1`] = `
           "normal": "#73848C",
         },
       },
+      "schema": Object {
+        "backgroundColor": Object {
+          "div": "#FFFFFF",
+          "tr": "#F1F2F3",
+        },
+      },
       "scrollbar": Object {
         "thumbColor": Object {
           "active": "#73848C",
@@ -161,7 +225,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
           "normal": "#FFFFFF",
         },
       },
-      "secondaryTabStyles": Object {
+      "secondaryTab": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#F1F2F3",
@@ -173,7 +237,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
           "normal": "#73848C",
         },
       },
-      "selectStyles": Object {
+      "select": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#E3E6E8",
@@ -197,7 +261,37 @@ exports[`LatestVersionItem matches snapshot 1`] = `
         "circle": "#FFFFFF",
         "unchecked": "#ABB5BA",
       },
-      "tagStyles": Object {
+      "table": Object {
+        "link": Object {
+          "color": Object {
+            "normal": "#171A1C",
+          },
+        },
+        "td": Object {
+          "color": Object {
+            "normal": "#171A1C",
+          },
+        },
+        "th": Object {
+          "backgroundColor": Object {
+            "normal": "#FFFFFF",
+          },
+          "color": Object {
+            "active": "#4F4FFF",
+            "hover": "#4F4FFF",
+            "normal": "#73848C",
+          },
+          "previewColor": Object {
+            "normal": "#4F4FFF",
+          },
+        },
+        "tr": Object {
+          "backgroundColor": Object {
+            "hover": "#F1F2F3",
+          },
+        },
+      },
+      "tag": Object {
         "backgroundColor": Object {
           "blue": "#e3f2fd",
           "gray": "#F1F2F3",
@@ -208,20 +302,48 @@ exports[`LatestVersionItem matches snapshot 1`] = `
         },
         "color": "#171A1C",
       },
-      "textarea": Object {
-        "focus": "transparent",
-      },
-      "thStyles": Object {
+      "textArea": Object {
         "backgroundColor": Object {
-          "normal": "#FFFFFF",
+          "readOnly": "#F1F2F3",
+        },
+        "borderColor": Object {
+          "disabled": "#E3E6E8",
+          "focus": "#454F54",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
         },
         "color": Object {
-          "active": "#4F4FFF",
-          "hover": "#4F4FFF",
-          "normal": "#73848C",
+          "disabled": "#ABB5BA",
+          "placeholder": Object {
+            "focus": Object {
+              "normal": "transparent",
+              "readOnly": "#ABB5BA",
+            },
+            "normal": "#ABB5BA",
+          },
+          "readOnly": "#171A1C",
+        },
+      },
+      "topicFormLabel": Object {
+        "color": "#73848C",
+      },
+      "topicMetaData": Object {
+        "backgroundColor": "#F1F2F3",
+        "color": Object {
+          "label": "#73848C",
+          "meta": "#ABB5BA",
+          "value": "#2F3639",
         },
-        "previewColor": Object {
-          "normal": "#4F4FFF",
+      },
+      "topicsList": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#F1F2F3",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#73848C",
+          "normal": "#171A1C",
         },
       },
       "viewer": Object {

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/SchemaVersion.spec.tsx.snap

@@ -13,7 +13,13 @@ exports[`SchemaVersion matches snapshot 1`] = `
         },
         "shadow": "rgba(0, 0, 0, 0.1)",
       },
-      "buttonStyles": Object {
+      "breadcrumb": "#ABB5BA",
+      "button": Object {
+        "border": Object {
+          "active": "#171A1C",
+          "hover": "#454F54",
+          "normal": "#73848C",
+        },
         "fontSize": Object {
           "L": "16px",
           "M": "14px",
@@ -59,11 +65,21 @@ exports[`SchemaVersion matches snapshot 1`] = `
           "warning": "#FFEECC",
         },
       },
-      "confirmationModal": Object {
-        "overlay": "rgba(10, 10, 10, 0.1)",
-        "shadow": "rgba(0, 0, 0, 0.1)",
+      "configList": Object {
+        "color": "#ABB5BA",
       },
-      "headingStyles": Object {
+      "connectEditWarning": "#FFEECC",
+      "consumerTopicContent": Object {
+        "backgroundColor": "#F1F2F3",
+      },
+      "dangerZone": Object {
+        "borderColor": "#E3E6E8",
+        "color": "#E51A1A",
+      },
+      "dropdown": Object {
+        "color": "#E51A1A",
+      },
+      "heading": Object {
         "h1": Object {
           "color": "#171A1C",
         },
@@ -82,6 +98,32 @@ exports[`SchemaVersion matches snapshot 1`] = `
         "messageToggleIconOpened": "#171A1C",
         "verticalElipsisIcon": "#73848C",
       },
+      "input": Object {
+        "backgroundColor": Object {
+          "readOnly": "#F1F2F3",
+        },
+        "borderColor": Object {
+          "disabled": "#E3E6E8",
+          "focus": "#454F54",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
+        },
+        "color": Object {
+          "disabled": "#ABB5BA",
+          "placeholder": Object {
+            "normal": "#ABB5BA",
+            "readOnly": "#ABB5BA",
+          },
+          "readOnly": "#171A1C",
+        },
+        "error": "#E51A1A",
+        "icon": Object {
+          "color": "#454F54",
+        },
+        "label": Object {
+          "color": "#454F54",
+        },
+      },
       "layout": Object {
         "minWidth": "1200px",
         "navBarHeight": "3.25rem",
@@ -92,7 +134,7 @@ exports[`SchemaVersion matches snapshot 1`] = `
         "stuffBorderColor": "#E3E6E8",
         "stuffColor": "#F1F2F3",
       },
-      "menuStyles": Object {
+      "menu": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#F1F2F3",
@@ -111,6 +153,12 @@ exports[`SchemaVersion matches snapshot 1`] = `
       },
       "metrics": Object {
         "backgroundColor": "#F1F2F3",
+        "filters": Object {
+          "color": Object {
+            "icon": "#171A1C",
+            "normal": "#73848C",
+          },
+        },
         "indicator": Object {
           "backgroundColor": "#FFFFFF",
           "lightTextColor": "#ABB5BA",
@@ -118,11 +166,20 @@ exports[`SchemaVersion matches snapshot 1`] = `
           "warningTextColor": "#E51A1A",
         },
       },
+      "modal": Object {
+        "backgroundColor": "#FFFFFF",
+        "border": Object {
+          "bottom": "#F1F2F3",
+          "top": "#F1F2F3",
+        },
+        "overlay": "rgba(10, 10, 10, 0.1)",
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
       "pageLoader": Object {
         "borderBottomColor": "#FFFFFF",
         "borderColor": "#4F4FFF",
       },
-      "paginationStyles": Object {
+      "pagination": Object {
         "backgroundColor": "#FFFFFF",
         "borderColor": Object {
           "active": "#454F54",
@@ -139,10 +196,11 @@ exports[`SchemaVersion matches snapshot 1`] = `
         "currentPage": "#E3E6E8",
       },
       "panelColor": "#FFFFFF",
-      "primaryTabStyles": Object {
+      "primaryTab": Object {
         "borderColor": Object {
           "active": "#4F4FFF",
           "hover": "transparent",
+          "nav": "#E3E6E8",
           "normal": "transparent",
         },
         "color": Object {
@@ -151,6 +209,12 @@ exports[`SchemaVersion matches snapshot 1`] = `
           "normal": "#73848C",
         },
       },
+      "schema": Object {
+        "backgroundColor": Object {
+          "div": "#FFFFFF",
+          "tr": "#F1F2F3",
+        },
+      },
       "scrollbar": Object {
         "thumbColor": Object {
           "active": "#73848C",
@@ -161,7 +225,7 @@ exports[`SchemaVersion matches snapshot 1`] = `
           "normal": "#FFFFFF",
         },
       },
-      "secondaryTabStyles": Object {
+      "secondaryTab": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#F1F2F3",
@@ -173,7 +237,7 @@ exports[`SchemaVersion matches snapshot 1`] = `
           "normal": "#73848C",
         },
       },
-      "selectStyles": Object {
+      "select": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#E3E6E8",
@@ -197,7 +261,37 @@ exports[`SchemaVersion matches snapshot 1`] = `
         "circle": "#FFFFFF",
         "unchecked": "#ABB5BA",
       },
-      "tagStyles": Object {
+      "table": Object {
+        "link": Object {
+          "color": Object {
+            "normal": "#171A1C",
+          },
+        },
+        "td": Object {
+          "color": Object {
+            "normal": "#171A1C",
+          },
+        },
+        "th": Object {
+          "backgroundColor": Object {
+            "normal": "#FFFFFF",
+          },
+          "color": Object {
+            "active": "#4F4FFF",
+            "hover": "#4F4FFF",
+            "normal": "#73848C",
+          },
+          "previewColor": Object {
+            "normal": "#4F4FFF",
+          },
+        },
+        "tr": Object {
+          "backgroundColor": Object {
+            "hover": "#F1F2F3",
+          },
+        },
+      },
+      "tag": Object {
         "backgroundColor": Object {
           "blue": "#e3f2fd",
           "gray": "#F1F2F3",
@@ -208,20 +302,48 @@ exports[`SchemaVersion matches snapshot 1`] = `
         },
         "color": "#171A1C",
       },
-      "textarea": Object {
-        "focus": "transparent",
-      },
-      "thStyles": Object {
+      "textArea": Object {
         "backgroundColor": Object {
-          "normal": "#FFFFFF",
+          "readOnly": "#F1F2F3",
+        },
+        "borderColor": Object {
+          "disabled": "#E3E6E8",
+          "focus": "#454F54",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
         },
         "color": Object {
-          "active": "#4F4FFF",
-          "hover": "#4F4FFF",
-          "normal": "#73848C",
+          "disabled": "#ABB5BA",
+          "placeholder": Object {
+            "focus": Object {
+              "normal": "transparent",
+              "readOnly": "#ABB5BA",
+            },
+            "normal": "#ABB5BA",
+          },
+          "readOnly": "#171A1C",
+        },
+      },
+      "topicFormLabel": Object {
+        "color": "#73848C",
+      },
+      "topicMetaData": Object {
+        "backgroundColor": "#F1F2F3",
+        "color": Object {
+          "label": "#73848C",
+          "meta": "#ABB5BA",
+          "value": "#2F3639",
         },
-        "previewColor": Object {
-          "normal": "#4F4FFF",
+      },
+      "topicsList": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#F1F2F3",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#73848C",
+          "normal": "#171A1C",
         },
       },
       "viewer": Object {

kafka-ui-react-app/src/components/Topics/List/List.styled.ts

@@ -0,0 +1,22 @@
+import { NavLink } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })<{
+  $isInternal?: boolean;
+}>(
+  ({ theme, activeClassName, $isInternal }) => css`
+    color: ${theme.topicsList.color.normal};
+    font-weight: 500;
+    padding-left: ${$isInternal ? '5px' : 0};
+
+    &:hover {
+      background-color: ${theme.topicsList.backgroundColor.hover};
+      color: ${theme.topicsList.color.hover};
+    }
+
+    &.${activeClassName} {
+      background-color: ${theme.topicsList.backgroundColor.active};
+      color: ${theme.topicsList.color.active};
+    }
+  `
+);

kafka-ui-react-app/src/components/Topics/List/ListItem.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
 import {
   ClusterName,
   TopicName,
@@ -10,11 +9,12 @@ import Dropdown from 'components/common/Dropdown/Dropdown';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
 import ClusterContext from 'components/contexts/ClusterContext';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import { Colors } from 'theme/theme';
 import { Tag } from 'components/common/Tag/Tag.styled';
 import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 
+import * as S from './List.styled';
+
 export interface ListItemProps {
   topic: TopicWithDetailedInfo;
   selected: boolean;
@@ -90,18 +90,9 @@ const ListItem: React.FC<ListItemProps> = ({
       )}
       <TableKeyLink style={{ width: '44%' }}>
         {internal && <Tag color="gray">IN</Tag>}
-        <NavLink
-          exact
-          to={`topics/${name}`}
-          activeClassName="is-active"
-          style={{
-            color: Colors.neutral[90],
-            fontWeight: 500,
-            paddingLeft: internal ? '5px' : 0,
-          }}
-        >
+        <S.Link exact to={`topics/${name}`} $isInternal={internal}>
           {name}
-        </NavLink>
+        </S.Link>
       </TableKeyLink>
       <td>{partitions?.length}</td>
       <td>{outOfSyncReplicas}</td>
@@ -114,14 +105,15 @@ const ListItem: React.FC<ListItemProps> = ({
         {!internal && !isReadOnly && vElipsisVisble ? (
           <div className="has-text-right">
             <Dropdown label={<VerticalElipsisIcon />} right>
-              <DropdownItem onClick={clearTopicMessagesHandler}>
-                <span className="has-text-danger">Clear Messages</span>
+              <DropdownItem onClick={clearTopicMessagesHandler} danger>
+                Clear Messages
               </DropdownItem>
               {isTopicDeletionAllowed && (
                 <DropdownItem
                   onClick={() => setDeleteTopicConfirmationVisible(true)}
+                  danger
                 >
-                  <span className="has-text-danger">Remove Topic</span>
+                  Remove Topic
                 </DropdownItem>
               )}
             </Dropdown>

kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx

@@ -21,7 +21,6 @@ import Dropdown from 'components/common/Dropdown/Dropdown';
 import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 import Navbar from 'components/common/Navigation/Navbar.styled';
 
 import OverviewContainer from './Overview/OverviewContainer';
@@ -105,15 +104,15 @@ const Details: React.FC<Props> = ({
                   Edit settings
                 </DropdownItem>
                 <DropdownItem
-                  style={{ color: Colors.red[50] }}
                   onClick={() => setClearTopicConfirmationVisible(true)}
+                  danger
                 >
                   Clear messages
                 </DropdownItem>
                 {isTopicDeletionAllowed && (
                   <DropdownItem
-                    style={{ color: Colors.red[50] }}
                     onClick={() => setDeleteTopicConfirmationVisible(true)}
+                    danger
                   >
                     Remove topic
                   </DropdownItem>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.styled.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const FiltersWrapper = styled.div`
   display: flex;
@@ -41,13 +40,13 @@ export const SeekTypeSelectorWrapper = styled.div`
 
   & .date-picker {
     height: 32px;
-    border: 1px ${(props) => props.theme.selectStyles.borderColor.normal} solid;
+    border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
     border-left: none;
     border-radius: 0 4px 4px 0;
     font-size: 14px;
     width: 100%;
     padding-left: 12px;
-    color: ${(props) => props.theme.selectStyles.color.normal};
+    color: ${(props) => props.theme.select.color.normal};
 
     background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
     background-repeat: no-repeat !important;
@@ -74,13 +73,13 @@ export const FiltersMetrics = styled.div`
 `;
 
 export const Metric = styled.div`
-  color: ${Colors.neutral[50]};
+  color: ${({ theme }) => theme.metrics.filters.color.normal};
   font-size: 12px;
   display: flex;
 `;
 
 export const MetricsIcon = styled.div`
-  color: ${Colors.neutral[90]};
+  color: ${({ theme }) => theme.metrics.filters.color.icon};
   padding-right: 6px;
   height: 12px;
 `;

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const Wrapper = styled.tr`
-  background-color: ${Colors.neutral[5]};
+  background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
   & > td {
     padding: 16px;
     &:first-child {
@@ -48,17 +47,17 @@ export const Metadata = styled.span`
 `;
 
 export const MetadataLabel = styled.p`
-  color: ${Colors.neutral[50]};
+  color: ${({ theme }) => theme.topicMetaData.color.label};
   font-size: 14px;
   width: 80px;
 `;
 
 export const MetadataValue = styled.p`
-  color: ${Colors.neutral[80]};
+  color: ${({ theme }) => theme.topicMetaData.color.value};
   font-size: 14px;
 `;
 
 export const MetadataMeta = styled.p`
-  color: ${Colors.neutral[30]};
+  color: ${({ theme }) => theme.topicMetaData.color.meta};
   font-size: 12px;
 `;

kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx

@@ -110,8 +110,9 @@ const Overview: React.FC<Props> = ({
                             partition,
                           ])
                         }
+                        danger
                       >
-                        <Metrics.RedText>Clear Messages</Metrics.RedText>
+                        Clear Messages
                       </DropdownItem>
                     </Dropdown>
                   ) : null}

kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/ConfigListItem.tsx

@@ -1,36 +1,25 @@
 import { TopicConfig } from 'generated-sources';
-import styled from 'styled-components';
 import React from 'react';
-import { Colors } from 'theme/theme';
+
+import * as S from './Settings.styled';
 
 interface ListItemProps {
   config: TopicConfig;
 }
 
-const ConfigListItemStyled = styled.tr`
-  & > td:last-child {
-    color: ${Colors.neutral[30]};
-  }
-`;
-const ConfigListItemCellStyled = styled.td<{ hasCustomValue: boolean }>`
-  font-weight: ${(props) => (props.hasCustomValue ? 500 : 400)};
-`;
-
 const ConfigListItem: React.FC<ListItemProps> = ({
   config: { name, value, defaultValue },
 }) => {
   const hasCustomValue = value !== defaultValue;
 
   return (
-    <ConfigListItemStyled>
-      <ConfigListItemCellStyled hasCustomValue>{name}</ConfigListItemCellStyled>
-      <ConfigListItemCellStyled hasCustomValue>
-        {value}
-      </ConfigListItemCellStyled>
+    <S.ConfigList>
+      <S.ConfigItemCell $hasCustomValue>{name}</S.ConfigItemCell>
+      <S.ConfigItemCell $hasCustomValue>{value}</S.ConfigItemCell>
       <td className="has-text-grey" title="Default Value">
         {hasCustomValue && defaultValue}
       </td>
-    </ConfigListItemStyled>
+    </S.ConfigList>
   );
 };
 

kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.styled.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const ConfigList = styled.tr`
+  & > td:last-child {
+    color: ${({ theme }) => theme.configList.color};
+  }
+`;
+export const ConfigItemCell = styled.td<{ $hasCustomValue: boolean }>`
+  font-weight: ${(props) => (props.$hasCustomValue ? 500 : 400)};
+`;

kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap

@@ -99,7 +99,13 @@ exports[`Details when it has readonly flag does not render the Action button a T
         },
         "shadow": "rgba(0, 0, 0, 0.1)",
       },
-      "buttonStyles": Object {
+      "breadcrumb": "#ABB5BA",
+      "button": Object {
+        "border": Object {
+          "active": "#171A1C",
+          "hover": "#454F54",
+          "normal": "#73848C",
+        },
         "fontSize": Object {
           "L": "16px",
           "M": "14px",
@@ -145,11 +151,21 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "warning": "#FFEECC",
         },
       },
-      "confirmationModal": Object {
-        "overlay": "rgba(10, 10, 10, 0.1)",
-        "shadow": "rgba(0, 0, 0, 0.1)",
+      "configList": Object {
+        "color": "#ABB5BA",
       },
-      "headingStyles": Object {
+      "connectEditWarning": "#FFEECC",
+      "consumerTopicContent": Object {
+        "backgroundColor": "#F1F2F3",
+      },
+      "dangerZone": Object {
+        "borderColor": "#E3E6E8",
+        "color": "#E51A1A",
+      },
+      "dropdown": Object {
+        "color": "#E51A1A",
+      },
+      "heading": Object {
         "h1": Object {
           "color": "#171A1C",
         },
@@ -168,6 +184,32 @@ exports[`Details when it has readonly flag does not render the Action button a T
         "messageToggleIconOpened": "#171A1C",
         "verticalElipsisIcon": "#73848C",
       },
+      "input": Object {
+        "backgroundColor": Object {
+          "readOnly": "#F1F2F3",
+        },
+        "borderColor": Object {
+          "disabled": "#E3E6E8",
+          "focus": "#454F54",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
+        },
+        "color": Object {
+          "disabled": "#ABB5BA",
+          "placeholder": Object {
+            "normal": "#ABB5BA",
+            "readOnly": "#ABB5BA",
+          },
+          "readOnly": "#171A1C",
+        },
+        "error": "#E51A1A",
+        "icon": Object {
+          "color": "#454F54",
+        },
+        "label": Object {
+          "color": "#454F54",
+        },
+      },
       "layout": Object {
         "minWidth": "1200px",
         "navBarHeight": "3.25rem",
@@ -178,7 +220,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
         "stuffBorderColor": "#E3E6E8",
         "stuffColor": "#F1F2F3",
       },
-      "menuStyles": Object {
+      "menu": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#F1F2F3",
@@ -197,6 +239,12 @@ exports[`Details when it has readonly flag does not render the Action button a T
       },
       "metrics": Object {
         "backgroundColor": "#F1F2F3",
+        "filters": Object {
+          "color": Object {
+            "icon": "#171A1C",
+            "normal": "#73848C",
+          },
+        },
         "indicator": Object {
           "backgroundColor": "#FFFFFF",
           "lightTextColor": "#ABB5BA",
@@ -204,11 +252,20 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "warningTextColor": "#E51A1A",
         },
       },
+      "modal": Object {
+        "backgroundColor": "#FFFFFF",
+        "border": Object {
+          "bottom": "#F1F2F3",
+          "top": "#F1F2F3",
+        },
+        "overlay": "rgba(10, 10, 10, 0.1)",
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
       "pageLoader": Object {
         "borderBottomColor": "#FFFFFF",
         "borderColor": "#4F4FFF",
       },
-      "paginationStyles": Object {
+      "pagination": Object {
         "backgroundColor": "#FFFFFF",
         "borderColor": Object {
           "active": "#454F54",
@@ -225,10 +282,11 @@ exports[`Details when it has readonly flag does not render the Action button a T
         "currentPage": "#E3E6E8",
       },
       "panelColor": "#FFFFFF",
-      "primaryTabStyles": Object {
+      "primaryTab": Object {
         "borderColor": Object {
           "active": "#4F4FFF",
           "hover": "transparent",
+          "nav": "#E3E6E8",
           "normal": "transparent",
         },
         "color": Object {
@@ -237,6 +295,12 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "normal": "#73848C",
         },
       },
+      "schema": Object {
+        "backgroundColor": Object {
+          "div": "#FFFFFF",
+          "tr": "#F1F2F3",
+        },
+      },
       "scrollbar": Object {
         "thumbColor": Object {
           "active": "#73848C",
@@ -247,7 +311,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "normal": "#FFFFFF",
         },
       },
-      "secondaryTabStyles": Object {
+      "secondaryTab": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#F1F2F3",
@@ -259,7 +323,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "normal": "#73848C",
         },
       },
-      "selectStyles": Object {
+      "select": Object {
         "backgroundColor": Object {
           "active": "#E3E6E8",
           "hover": "#E3E6E8",
@@ -283,7 +347,37 @@ exports[`Details when it has readonly flag does not render the Action button a T
         "circle": "#FFFFFF",
         "unchecked": "#ABB5BA",
       },
-      "tagStyles": Object {
+      "table": Object {
+        "link": Object {
+          "color": Object {
+            "normal": "#171A1C",
+          },
+        },
+        "td": Object {
+          "color": Object {
+            "normal": "#171A1C",
+          },
+        },
+        "th": Object {
+          "backgroundColor": Object {
+            "normal": "#FFFFFF",
+          },
+          "color": Object {
+            "active": "#4F4FFF",
+            "hover": "#4F4FFF",
+            "normal": "#73848C",
+          },
+          "previewColor": Object {
+            "normal": "#4F4FFF",
+          },
+        },
+        "tr": Object {
+          "backgroundColor": Object {
+            "hover": "#F1F2F3",
+          },
+        },
+      },
+      "tag": Object {
         "backgroundColor": Object {
           "blue": "#e3f2fd",
           "gray": "#F1F2F3",
@@ -294,20 +388,48 @@ exports[`Details when it has readonly flag does not render the Action button a T
         },
         "color": "#171A1C",
       },
-      "textarea": Object {
-        "focus": "transparent",
-      },
-      "thStyles": Object {
+      "textArea": Object {
         "backgroundColor": Object {
-          "normal": "#FFFFFF",
+          "readOnly": "#F1F2F3",
+        },
+        "borderColor": Object {
+          "disabled": "#E3E6E8",
+          "focus": "#454F54",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
         },
         "color": Object {
-          "active": "#4F4FFF",
-          "hover": "#4F4FFF",
-          "normal": "#73848C",
+          "disabled": "#ABB5BA",
+          "placeholder": Object {
+            "focus": Object {
+              "normal": "transparent",
+              "readOnly": "#ABB5BA",
+            },
+            "normal": "#ABB5BA",
+          },
+          "readOnly": "#171A1C",
+        },
+      },
+      "topicFormLabel": Object {
+        "color": "#73848C",
+      },
+      "topicMetaData": Object {
+        "backgroundColor": "#F1F2F3",
+        "color": Object {
+          "label": "#73848C",
+          "meta": "#ABB5BA",
+          "value": "#2F3639",
         },
-        "previewColor": Object {
-          "normal": "#4F4FFF",
+      },
+      "topicsList": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#F1F2F3",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#73848C",
+          "normal": "#171A1C",
         },
       },
       "viewer": Object {

kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.styled.tsx

@@ -1,10 +1,9 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const DangerZoneWrapperStyled = styled.div`
   margin-top: 16px;
   padding: 8px 16px;
-  border: 1px solid ${Colors.neutral[10]};
+  border: 1px solid ${({ theme }) => theme.dangerZone.borderColor};
   box-sizing: border-box;
   border-radius: 8px;
   margin-bottom: 16px;
@@ -17,7 +16,7 @@ export const DangerZoneWrapperStyled = styled.div`
 `;
 
 export const DangerZoneTitleStyled = styled.h1`
-  color: ${Colors.red[50]};
+  color: ${({ theme }) => theme.dangerZone.color};
   font-size: 20px;
   padding-bottom: 16px;
 `;

kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetain.tsx

@@ -6,26 +6,14 @@ import { MILLISECONDS_IN_WEEK, MILLISECONDS_IN_SECOND } from 'lib/constants';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import Input from 'components/common/Input/Input';
 import { FormError } from 'components/common/Input/Input.styled';
-import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
+import * as S from './TopicForm.styled';
 import TimeToRetainBtns from './TimeToRetainBtns';
 
 interface Props {
   isSubmitting: boolean;
 }
 
-const TimeToRetainLabel = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-
-  & > span {
-    font-size: 12px;
-    color: ${Colors.neutral[50]};
-  }
-`;
-
 const TimeToRetain: React.FC<Props> = ({ isSubmitting }) => {
   const {
     watch,
@@ -42,10 +30,10 @@ const TimeToRetain: React.FC<Props> = ({ isSubmitting }) => {
 
   return (
     <>
-      <TimeToRetainLabel>
+      <S.Label>
         <InputLabel>Time to retain data (in ms)</InputLabel>
         {valueHint && <span>{valueHint}</span>}
-      </TimeToRetainLabel>
+      </S.Label>
       <Input
         id="timeToRetain"
         type="number"

kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 import { MILLISECONDS_IN_WEEK } from 'lib/constants';
-import styled from 'styled-components';
-import { Colors } from 'theme/theme';
+
+import * as S from './TopicForm.styled';
 
 interface Props {
   inputName: string;
@@ -10,31 +10,18 @@ interface Props {
   value: number;
 }
 
-const TimeToRetainBtnStyled = styled.button<{ isActive: boolean }>`
-  background-color: ${(props) =>
-    props.isActive ? Colors.neutral[10] : Colors.neutral[0]};
-  height: 32px;
-  width: 46px;
-  border: 1px solid
-    ${(props) => (props.isActive ? Colors.neutral[90] : Colors.neutral[40])};
-  border-radius: 6px;
-  &:hover {
-    cursor: pointer;
-  }
-`;
-
 const TimeToRetainBtn: React.FC<Props> = ({ inputName, text, value }) => {
   const { setValue, watch } = useFormContext();
   const watchedValue = watch(inputName, MILLISECONDS_IN_WEEK.toString());
 
   return (
-    <TimeToRetainBtnStyled
+    <S.Button
       isActive={watchedValue === value}
       type="button"
       onClick={() => setValue(inputName, value)}
     >
       {text}
-    </TimeToRetainBtnStyled>
+    </S.Button>
   );
 };
 

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts

@@ -14,3 +14,30 @@ export const NameField = styled.div`
 export const CustomParamsHeading = styled.h4`
   font-weight: 500;
 `;
+
+export const Label = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+
+  & > span {
+    font-size: 12px;
+    color: ${({ theme }) => theme.topicFormLabel.color};
+  }
+`;
+
+export const Button = styled.button<{ isActive: boolean }>`
+  background-color: ${({ theme, ...props }) =>
+    props.isActive
+      ? theme.button.primary.backgroundColor.active
+      : theme.button.primary.color};
+  height: 32px;
+  width: 46px;
+  border: 1px solid
+    ${({ theme, ...props }) =>
+      props.isActive ? theme.button.border.active : theme.button.primary.color};
+  border-radius: 6px;
+  &:hover {
+    cursor: pointer;
+  }
+`;

kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.styled.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const BreadcrumbWrapper = styled.ul`
   display: flex;
@@ -10,7 +9,7 @@ export const BreadcrumbWrapper = styled.ul`
 
   & li:not(:last-child)::after {
     content: '/';
-    color: ${Colors.neutral[30]};
+    color: ${({ theme }) => theme.breadcrumb};
     margin: 0 8px;
   }
 `;

kafka-ui-react-app/src/components/common/Button/Button.styled.ts

@@ -19,35 +19,35 @@ const StyledButton = styled.button<ButtonProps>`
   background: ${(props) =>
     props.isInverted
       ? 'transparent'
-      : props.theme.buttonStyles[props.buttonType].backgroundColor.normal};
+      : props.theme.button[props.buttonType].backgroundColor.normal};
   color: ${(props) =>
     props.isInverted
-      ? props.theme.buttonStyles[props.buttonType].invertedColors.normal
-      : props.theme.buttonStyles[props.buttonType].color};
-  font-size: ${(props) => props.theme.buttonStyles.fontSize[props.buttonSize]};
+      ? props.theme.button[props.buttonType].invertedColors.normal
+      : props.theme.button[props.buttonType].color};
+  font-size: ${(props) => props.theme.button.fontSize[props.buttonSize]};
   font-weight: 500;
-  height: ${(props) => props.theme.buttonStyles.height[props.buttonSize]};
+  height: ${(props) => props.theme.button.height[props.buttonSize]};
 
   &:hover:enabled {
     background: ${(props) =>
       props.isInverted
         ? 'transparent'
-        : props.theme.buttonStyles[props.buttonType].backgroundColor.hover};
+        : props.theme.button[props.buttonType].backgroundColor.hover};
     color: ${(props) =>
       props.isInverted
-        ? props.theme.buttonStyles[props.buttonType].invertedColors.hover
-        : props.theme.buttonStyles[props.buttonType].color};
+        ? props.theme.button[props.buttonType].invertedColors.hover
+        : props.theme.button[props.buttonType].color};
     cursor: pointer;
   }
   &:active:enabled {
     background: ${(props) =>
       props.isInverted
         ? 'transparent'
-        : props.theme.buttonStyles[props.buttonType].backgroundColor.active};
+        : props.theme.button[props.buttonType].backgroundColor.active};
     color: ${(props) =>
       props.isInverted
-        ? props.theme.buttonStyles[props.buttonType].invertedColors.active
-        : props.theme.buttonStyles[props.buttonType].color};
+        ? props.theme.button[props.buttonType].invertedColors.active
+        : props.theme.button[props.buttonType].color};
   }
   &:disabled {
     opacity: 0.5;
@@ -55,7 +55,7 @@ const StyledButton = styled.button<ButtonProps>`
   }
 
   & a {
-    color: ${(props) => props.theme.buttonStyles.primary.color};
+    color: ${(props) => props.theme.button.primary.color};
   }
 
   & i {

kafka-ui-react-app/src/components/common/ConfirmationModal/ConfirmationModal.styled.tsx

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })(
   ({ theme }) => css`
@@ -15,7 +14,7 @@ export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })(
     right: 0;
     top: 0;
     & div:first-child {
-      background-color: ${theme.confirmationModal.overlay};
+      background-color: ${theme.modal.overlay};
       bottom: 0;
       left: 0;
       position: absolute;
@@ -30,8 +29,8 @@ export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })(
       width: 560px;
       border-radius: 8px;
 
-      background-color: ${Colors.neutral[0]};
-      filter: drop-shadow(0px 4px 16px ${theme.confirmationModal.shadow});
+      background-color: ${theme.modal.backgroundColor};
+      filter: drop-shadow(0px 4px 16px ${theme.modal.shadow});
 
       & > * {
         padding: 16px;
@@ -45,8 +44,8 @@ export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })(
       }
 
       & > section {
-        border-top: 1px solid ${Colors.neutral[5]};
-        border-bottom: 1px solid ${Colors.neutral[5]};
+        border-top: 1px solid ${theme.modal.border.top};
+        border-bottom: 1px solid ${theme.modal.border.bottom};
       }
 
       & > footer {

kafka-ui-react-app/src/components/common/Dropdown/Dropdown.styled.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const TriggerWrapper = styled.div`
+  display: flex;
+  align-self: center;
+`;
+
+export const Trigger = styled.button.attrs({
+  type: 'button',
+  ariaHaspopup: 'true',
+  ariaControls: 'dropdown-menu',
+})`
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: 'center';
+  justify-content: 'center';
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const Item = styled.a.attrs({
+  href: '#end',
+  role: 'menuitem',
+  type: 'button',
+})<{ $isDanger: boolean }>`
+  color: ${({ $isDanger, theme }) =>
+    $isDanger ? theme.dropdown.color : 'initial'};
+`;

kafka-ui-react-app/src/components/common/Dropdown/Dropdown.tsx

@@ -1,9 +1,8 @@
 import useOutsideClickRef from '@rooks/use-outside-click-ref';
 import cx from 'classnames';
-import styled from 'styled-components';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import DropdownTrigger from './DropdownTrigger';
+import * as S from './Dropdown.styled';
 
 export interface DropdownProps {
   label: React.ReactNode;
@@ -11,11 +10,6 @@ export interface DropdownProps {
   up?: boolean;
 }
 
-const DropdowTriggerWrapper = styled.div`
-  display: flex;
-  align-self: center;
-`;
-
 const Dropdown: React.FC<DropdownProps> = ({ label, right, up, children }) => {
   const [active, setActive] = useState<boolean>(false);
   const [wrapperRef] = useOutsideClickRef(() => setActive(false));
@@ -32,9 +26,9 @@ const Dropdown: React.FC<DropdownProps> = ({ label, right, up, children }) => {
   );
   return (
     <div className={classNames} ref={wrapperRef}>
-      <DropdowTriggerWrapper>
-        <DropdownTrigger onClick={onClick}>{label}</DropdownTrigger>
-      </DropdowTriggerWrapper>
+      <S.TriggerWrapper>
+        <S.Trigger onClick={onClick}>{label}</S.Trigger>
+      </S.TriggerWrapper>
       <div className="dropdown-menu" id="dropdown-menu" role="menu">
         <div className="dropdown-content has-text-left">{children}</div>
       </div>

kafka-ui-react-app/src/components/common/Dropdown/DropdownItem.tsx

@@ -1,33 +1,30 @@
-import React, { useCallback } from 'react';
+import React from 'react';
+
+import * as S from './Dropdown.styled';
 
 export interface DropdownItemProps {
   onClick(): void;
-  style?: React.CSSProperties;
+  danger?: boolean;
 }
 
 const DropdownItem: React.FC<DropdownItemProps> = ({
   onClick,
-  style,
+  danger,
   children,
 }) => {
-  const onClickHandler = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      onClick();
-    },
-    [onClick]
-  );
+  const onClickHandler = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onClick();
+  };
+
   return (
-    <a
-      href="#end"
+    <S.Item
+      $isDanger={!!danger}
       onClick={onClickHandler}
       className="dropdown-item is-link"
-      role="menuitem"
-      type="button"
-      style={style}
     >
       {children}
-    </a>
+    </S.Item>
   );
 };
 

kafka-ui-react-app/src/components/common/Dropdown/DropdownTrigger.tsx

@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-
-interface Props {
-  className?: string;
-  onClick: () => void;
-}
-
-const DropdownTrigger: React.FC<Props> = ({ onClick, className, children }) => {
-  return (
-    <button
-      className={className}
-      type="button"
-      aria-haspopup="true"
-      aria-controls="dropdown-menu"
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
-};
-
-export default styled(DropdownTrigger)`
-  background: transparent;
-  border: none;
-  display: flex;
-  align-items: 'center';
-  justify-content: 'center';
-  &:hover {
-    cursor: pointer;
-  }
-`;

kafka-ui-react-app/src/components/common/Dropdown/__tests__/Dropdown.spec.tsx

@@ -39,7 +39,7 @@ describe('Dropdown', () => {
   it('renders custom children', () => {
     const wrapper = mount(setupWrapper({}, dummyChildren));
     expect(wrapper.exists('.dropdown-content')).toBeTruthy();
-    expect(wrapper.find('.dropdown-item').length).toEqual(3);
+    expect(wrapper.find('a.dropdown-item').length).toEqual(3);
     expect(wrapper.find('.dropdown-divider').length).toEqual(1);
   });
 

kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap

@@ -1,6 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown matches snapshot 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
 .c1 {
   background: transparent;
   border: none;
@@ -22,14 +32,8 @@ exports[`Dropdown matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
+.c2 {
+  color: initial;
 }
 
 <Dropdown
@@ -44,24 +48,17 @@ exports[`Dropdown matches snapshot 1`] = `
       <div
         className="c0"
       >
-        <Styled(DropdownTrigger)
+        <styled.button
           onClick={[Function]}
         >
-          <DropdownTrigger
+          <button
             className="c1"
             onClick={[Function]}
+            type="button"
           >
-            <button
-              aria-controls="dropdown-menu"
-              aria-haspopup="true"
-              className="c1"
-              onClick={[Function]}
-              type="button"
-            >
-              My Test Label
-            </button>
-          </DropdownTrigger>
-        </Styled(DropdownTrigger)>
+            My Test Label
+          </button>
+        </styled.button>
       </div>
     </styled.div>
     <div
@@ -75,28 +72,40 @@ exports[`Dropdown matches snapshot 1`] = `
         <DropdownItem
           onClick={[MockFunction]}
         >
-          <a
+          <styled.a
+            $isDanger={false}
             className="dropdown-item is-link"
-            href="#end"
             onClick={[Function]}
-            role="menuitem"
-            type="button"
           >
-            Child 1
-          </a>
+            <a
+              className="c2 dropdown-item is-link"
+              href="#end"
+              onClick={[Function]}
+              role="menuitem"
+              type="button"
+            >
+              Child 1
+            </a>
+          </styled.a>
         </DropdownItem>
         <DropdownItem
           onClick={[MockFunction]}
         >
-          <a
+          <styled.a
+            $isDanger={false}
             className="dropdown-item is-link"
-            href="#end"
             onClick={[Function]}
-            role="menuitem"
-            type="button"
           >
-            Child 2
-          </a>
+            <a
+              className="c2 dropdown-item is-link"
+              href="#end"
+              onClick={[Function]}
+              role="menuitem"
+              type="button"
+            >
+              Child 2
+            </a>
+          </styled.a>
         </DropdownItem>
         <DropdownDivider>
           <hr
@@ -106,15 +115,21 @@ exports[`Dropdown matches snapshot 1`] = `
         <DropdownItem
           onClick={[MockFunction]}
         >
-          <a
+          <styled.a
+            $isDanger={false}
             className="dropdown-item is-link"
-            href="#end"
             onClick={[Function]}
-            role="menuitem"
-            type="button"
           >
-            Child 3
-          </a>
+            <a
+              className="c2 dropdown-item is-link"
+              href="#end"
+              onClick={[Function]}
+              role="menuitem"
+              type="button"
+            >
+              Child 3
+            </a>
+          </styled.a>
         </DropdownItem>
       </div>
     </div>

kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/DropdownItem.spec.tsx.snap

@@ -1,17 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownItem matches snapshot 1`] = `
+.c0 {
+  color: initial;
+}
+
 <DropdownItem
   onClick={[MockFunction]}
 >
-  <a
+  <styled.a
+    $isDanger={false}
     className="dropdown-item is-link"
-    href="#end"
     onClick={[Function]}
-    role="menuitem"
-    type="button"
   >
-    Item 1
-  </a>
+    <a
+      className="c0 dropdown-item is-link"
+      href="#end"
+      onClick={[Function]}
+      role="menuitem"
+      type="button"
+    >
+      Item 1
+    </a>
+  </styled.a>
 </DropdownItem>
 `;

kafka-ui-react-app/src/components/common/Input/Input.styled.ts

@@ -1,52 +1,53 @@
-import styled from 'styled-components';
-import { Colors } from 'theme/theme';
+import styled, { css } from 'styled-components';
 
 export interface InputProps {
   inputSize?: 'M' | 'L';
   hasLeftIcon: boolean;
 }
 
-export const Input = styled.input<InputProps>`
-  border: 1px ${Colors.neutral[30]} solid;
-  border-radius: 4px;
-  height: ${(props) => (props.inputSize === 'M' ? '32px' : '40px')};
-  width: 100%;
-  padding-left: ${(props) => (props.hasLeftIcon ? '36px' : '12px')};
-  font-size: 14px;
-
-  &::placeholder {
-    color: ${Colors.neutral[30]};
+export const Input = styled.input<InputProps>(
+  ({ theme, ...props }) => css`
+    border: 1px ${theme.input.borderColor.normal} solid;
+    border-radius: 4px;
+    height: ${props.inputSize === 'M' ? '32px' : '40px'};
+    width: 100%;
+    padding-left: ${props.hasLeftIcon ? '36px' : '12px'};
     font-size: 14px;
-  }
-  &:hover {
-    border-color: ${Colors.neutral[50]};
-  }
-  &:focus {
-    outline: none;
-    border-color: ${Colors.neutral[70]};
+
     &::placeholder {
-      color: transparent;
+      color: ${theme.input.color.placeholder.normal};
+      font-size: 14px;
+    }
+    &:hover {
+      border-color: ${theme.input.borderColor.hover};
     }
-  }
-  &:disabled {
-    color: ${Colors.neutral[30]};
-    border-color: ${Colors.neutral[10]};
-    cursor: not-allowed;
-  }
-  &:read-only {
-    color: ${Colors.neutral[90]};
-    border: none;
-    background-color: ${Colors.neutral[5]};
     &:focus {
+      outline: none;
+      border-color: ${theme.input.borderColor.focus};
       &::placeholder {
-        color: ${Colors.neutral[30]};
+        color: transparent;
       }
     }
-    cursor: not-allowed;
-  }
-`;
+    &:disabled {
+      color: ${theme.input.color.disabled};
+      border-color: ${theme.input.borderColor.disabled};
+      cursor: not-allowed;
+    }
+    &:read-only {
+      color: ${theme.input.color.readOnly};
+      border: none;
+      background-color: ${theme.input.backgroundColor.readOnly};
+      &:focus {
+        &::placeholder {
+          color: ${theme.input.color.placeholder.readOnly};
+        }
+      }
+      cursor: not-allowed;
+    }
+  `
+);
 
 export const FormError = styled.p`
-  color: ${Colors.red[50]};
+  color: ${({ theme }) => theme.input.error};
   font-size: 12px;
 `;

kafka-ui-react-app/src/components/common/Input/InputIcon.styled.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 interface Props {
   className: string;
@@ -16,5 +15,5 @@ export const InputIcon = styled.i<Props>`
   right: ${(props) => (props.position === 'right' ? '15px' : 'unset')};
   height: 11px;
   width: 11px;
-  color: ${Colors.neutral[70]};
+  color: ${({ theme }) => theme.input.icon.color};
 `;

kafka-ui-react-app/src/components/common/Input/InputLabel.styled.ts

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const InputLabel = styled.label`
   font-weight: 500;
   font-size: 12px;
   line-height: 20px;
-  color: ${Colors.neutral[70]};
+  color: ${({ theme }) => theme.input.label.color};
 `;

kafka-ui-react-app/src/components/common/Navigation/Navbar.styled.ts

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 const Navbar = styled.nav`
   display: flex;
-  border-bottom: 1px ${Colors.neutral[10]} solid;
+  border-bottom: 1px ${({ theme }) => theme.primaryTab.borderColor.nav} solid;
   & a {
     height: 40px;
     width: 96px;
@@ -12,18 +11,18 @@ const Navbar = styled.nav`
     align-items: center;
     font-weight: 500;
     font-size: 14px;
-    color: ${(props) => props.theme.primaryTabStyles.color.normal};
-    border-bottom: 1px
-      ${(props) => props.theme.primaryTabStyles.borderColor.normal} solid;
+    color: ${(props) => props.theme.primaryTab.color.normal};
+    border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.normal}
+      solid;
     &.is-active {
-      border-bottom: 1px
-        ${(props) => props.theme.primaryTabStyles.borderColor.active} solid;
-      color: ${(props) => props.theme.primaryTabStyles.color.active};
+      border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.active}
+        solid;
+      color: ${(props) => props.theme.primaryTab.color.active};
     }
     &:hover:not(.is-active) {
-      border-bottom: 1px
-        ${(props) => props.theme.primaryTabStyles.borderColor.hover} solid;
-      color: ${(props) => props.theme.primaryTabStyles.color.hover};
+      border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.hover}
+        solid;
+      color: ${(props) => props.theme.primaryTab.color.hover};
     }
   }
 `;

kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx

@@ -26,7 +26,7 @@ export default styled(PageHeading)(
       font-size: 24px;
       font-weight: 500;
       line-height: 32px;
-      color: ${theme.headingStyles.h1.color};
+      color: ${theme.heading.h1.color};
     }
     & > div {
       display: flex;

kafka-ui-react-app/src/components/common/Pagination/Pagination.styled.ts

@@ -30,21 +30,21 @@ export const PaginationLink = styled(Link)<{ $isCurrent: boolean }>`
   border: 1px solid
     ${({ $isCurrent }) =>
       $isCurrent
-        ? theme.paginationStyles.currentPage
-        : theme.paginationStyles.borderColor.normal};
+        ? theme.pagination.currentPage
+        : theme.pagination.borderColor.normal};
   background-color: ${({ $isCurrent }) =>
     $isCurrent
-      ? theme.paginationStyles.currentPage
-      : theme.paginationStyles.backgroundColor};
-  color: ${theme.paginationStyles.color.normal};
+      ? theme.pagination.currentPage
+      : theme.pagination.backgroundColor};
+  color: ${theme.pagination.color.normal};
 
   &:hover {
     border: 1px solid
       ${({ $isCurrent }) =>
         $isCurrent
-          ? theme.paginationStyles.currentPage
-          : theme.paginationStyles.borderColor.hover};
-    color: ${(props) => props.theme.paginationStyles.color.hover};
+          ? theme.pagination.currentPage
+          : theme.pagination.borderColor.hover};
+    color: ${(props) => props.theme.pagination.color.hover};
     cursor: ${({ $isCurrent }) => ($isCurrent ? 'default' : 'pointer')};
   }
 `;
@@ -54,22 +54,22 @@ export const PaginationButton = styled(Link)`
   align-items: center;
   padding: 6px 12px;
   height: 32px;
-  border: 1px solid ${theme.paginationStyles.borderColor.normal};
+  border: 1px solid ${theme.pagination.borderColor.normal};
   border-radius: 4px;
-  color: ${theme.paginationStyles.color.normal};
+  color: ${theme.pagination.color.normal};
 
   &:hover {
-    border: 1px solid ${theme.paginationStyles.borderColor.hover};
-    color: ${theme.paginationStyles.color.hover};
+    border: 1px solid ${theme.pagination.borderColor.hover};
+    color: ${theme.pagination.color.hover};
     cursor: pointer;
   }
   &:active {
-    border: 1px solid ${theme.paginationStyles.borderColor.active};
-    color: ${theme.paginationStyles.color.active};
+    border: 1px solid ${theme.pagination.borderColor.active};
+    color: ${theme.pagination.color.active};
   }
   &:disabled {
-    border: 1px solid ${theme.paginationStyles.borderColor.disabled};
-    color: ${theme.paginationStyles.color.disabled};
+    border: 1px solid ${theme.pagination.borderColor.disabled};
+    color: ${theme.pagination.color.disabled};
     cursor: not-allowed;
   }
 `;
@@ -79,9 +79,9 @@ export const DisabledButton = styled.button`
   align-items: center;
   padding: 6px 12px;
   height: 32px;
-  border: 1px solid ${theme.paginationStyles.borderColor.disabled};
-  background-color: ${theme.paginationStyles.backgroundColor};
+  border: 1px solid ${theme.pagination.borderColor.disabled};
+  background-color: ${theme.pagination.backgroundColor};
   border-radius: 4px;
   font-size: 16px;
-  color: ${theme.paginationStyles.color.disabled};
+  color: ${theme.pagination.color.disabled};
 `;

kafka-ui-react-app/src/components/common/Pagination/__tests__/PageControl.spec.tsx

@@ -15,14 +15,14 @@ describe('PageControl', () => {
   it('renders current page', () => {
     setupComponent({ current: true });
     expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${theme.paginationStyles.currentPage}`
+      `background-color: ${theme.pagination.currentPage}`
     );
   });
 
   it('renders non-current page', () => {
     setupComponent({ current: false });
     expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${theme.paginationStyles.backgroundColor}`
+      `background-color: ${theme.pagination.backgroundColor}`
     );
   });
 

kafka-ui-react-app/src/components/common/Pagination/__tests__/Pagination.spec.tsx

@@ -80,14 +80,14 @@ describe('Pagination', () => {
     it('check if it sets page 8 as current when page param is set', () => {
       setupComponent('?page=8');
       expect(screen.getByText('8')).toHaveStyle(
-        `background-color: ${theme.paginationStyles.currentPage}`
+        `background-color: ${theme.pagination.currentPage}`
       );
     });
 
     it('check if it sets first page as current when page param not set', () => {
       setupComponent('', { totalPages: 8 });
       expect(screen.getByText('1')).toHaveStyle(
-        `background-color: ${theme.paginationStyles.currentPage}`
+        `background-color: ${theme.pagination.currentPage}`
       );
     });
   });

kafka-ui-react-app/src/components/common/Search/__tests__/Search.spec.tsx

@@ -1,6 +1,8 @@
 import { shallow, mount } from 'enzyme';
 import Search from 'components/common/Search/Search';
 import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import theme from 'theme/theme';
 
 jest.mock('use-debounce', () => ({
   useDebouncedCallback: (fn: (e: Event) => void) => fn,
@@ -10,11 +12,13 @@ describe('Search', () => {
   const handleSearch = jest.fn();
   it('calls handleSearch on input', () => {
     const component = mount(
-      <Search
-        handleSearch={handleSearch}
-        value=""
-        placeholder="Search bt the Topic name"
-      />
+      <ThemeProvider theme={theme}>
+        <Search
+          handleSearch={handleSearch}
+          value=""
+          placeholder="Search bt the Topic name"
+        />
+      </ThemeProvider>
     );
     component.find('input').simulate('change', { target: { value: 'test' } });
     expect(handleSearch).toHaveBeenCalledTimes(1);

kafka-ui-react-app/src/components/common/Select/Select.styled.ts

@@ -20,8 +20,8 @@ export const Select = styled.ul<Props>`
   border: 1px
     ${({ theme, disabled }) =>
       disabled
-        ? theme.selectStyles.borderColor.disabled
-        : theme.selectStyles.borderColor.normal}
+        ? theme.select.borderColor.disabled
+        : theme.select.borderColor.normal}
     solid;
   border-radius: 4px;
   font-size: 14px;
@@ -29,9 +29,7 @@ export const Select = styled.ul<Props>`
   padding-left: ${(props) => (props.isLive ? '36px' : '12px')};
   padding-right: 16px;
   color: ${({ theme, disabled }) =>
-    disabled
-      ? theme.selectStyles.color.disabled
-      : theme.selectStyles.color.normal};
+    disabled ? theme.select.color.disabled : theme.select.color.normal};
   min-width: ${({ minWidth }) => minWidth || 'auto'};
   background-image: ${({ disabled }) =>
     `url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="${
@@ -42,17 +40,17 @@ export const Select = styled.ul<Props>`
   background-position-y: 55% !important;
 
   &:hover {
-    color: ${(props) => props.theme.selectStyles.color.hover};
-    border-color: ${(props) => props.theme.selectStyles.borderColor.hover};
+    color: ${(props) => props.theme.select.color.hover};
+    border-color: ${(props) => props.theme.select.borderColor.hover};
   }
   &:focus {
     outline: none;
-    color: ${(props) => props.theme.selectStyles.color.active};
-    border-color: ${(props) => props.theme.selectStyles.borderColor.active};
+    color: ${(props) => props.theme.select.color.active};
+    border-color: ${(props) => props.theme.select.borderColor.active};
   }
   &:disabled {
-    color: ${(props) => props.theme.selectStyles.color.disabled};
-    border-color: ${(props) => props.theme.selectStyles.borderColor.disabled};
+    color: ${(props) => props.theme.select.color.disabled};
+    border-color: ${(props) => props.theme.select.borderColor.disabled};
     cursor: not-allowed;
   }
 `;
@@ -63,14 +61,13 @@ export const OptionList = styled.ul`
   left: 0;
   max-height: 114px;
   margin-top: 4px;
-  background-color: ${(props) =>
-    props.theme.selectStyles.backgroundColor.normal};
-  border: 1px ${(props) => props.theme.selectStyles.borderColor.normal} solid;
+  background-color: ${(props) => props.theme.select.backgroundColor.normal};
+  border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
   border-radius: 4px;
   font-size: 14px;
   line-height: 18px;
   width: 100%;
-  color: ${(props) => props.theme.selectStyles.color.normal};
+  color: ${(props) => props.theme.select.color.normal};
   overflow-y: scroll;
   z-index: 10;
 `;
@@ -82,13 +79,11 @@ export const Option = styled.li<OptionProps>`
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 
   &:hover {
-    background-color: ${(props) =>
-      props.theme.selectStyles.backgroundColor.hover};
+    background-color: ${(props) => props.theme.select.backgroundColor.hover};
   }
 
   &:active {
-    background-color: ${(props) =>
-      props.theme.selectStyles.backgroundColor.active};
+    background-color: ${(props) => props.theme.select.backgroundColor.active};
   }
 `;
 

kafka-ui-react-app/src/components/common/Tabs/SecondaryTabs.styled.ts

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 export const SecondaryTabs = styled.nav`
   & button {
     background-color: ${(props) =>
-      props.theme.secondaryTabStyles.backgroundColor.normal};
-    color: ${(props) => props.theme.secondaryTabStyles.color.normal};
+      props.theme.secondaryTab.backgroundColor.normal};
+    color: ${(props) => props.theme.secondaryTab.color.normal};
     padding: 6px;
     height: 32px;
     min-width: 57px;
@@ -13,14 +13,14 @@ export const SecondaryTabs = styled.nav`
 
     &:hover {
       background-color: ${(props) =>
-        props.theme.secondaryTabStyles.backgroundColor.hover};
-      color: ${(props) => props.theme.secondaryTabStyles.color.hover};
+        props.theme.secondaryTab.backgroundColor.hover};
+      color: ${(props) => props.theme.secondaryTab.color.hover};
     }
 
     &.is-active {
       background-color: ${(props) =>
-        props.theme.secondaryTabStyles.backgroundColor.active};
-      color: ${(props) => props.theme.secondaryTabStyles.color.active};
+        props.theme.secondaryTab.backgroundColor.active};
+      color: ${(props) => props.theme.secondaryTab.color.active};
     }
   }
 

kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx

@@ -9,9 +9,8 @@ export const Tag = styled.p<Props>`
   border-radius: 16px;
   height: 20px;
   line-height: 20px;
-  background-color: ${(props) =>
-    props.theme.tagStyles.backgroundColor[props.color]};
-  color: ${(props) => props.theme.tagStyles.color};
+  background-color: ${(props) => props.theme.tag.backgroundColor[props.color]};
+  color: ${(props) => props.theme.tag.color};
   font-size: 12px;
   display: inline-block;
   padding-left: 0.75em;

kafka-ui-react-app/src/components/common/Textbox/Textarea.styled.ts

@@ -1,40 +1,38 @@
 import styled, { css } from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const Textarea = styled.textarea(
-  ({ theme }) => css`
-    border: 1px ${Colors.neutral[30]} solid;
+  ({ theme: { textArea } }) => css`
+    border: 1px ${textArea.borderColor.normal} solid;
     border-radius: 4px;
     width: 100%;
     padding: 12px;
     padding-top: 6px;
-
     &::placeholder {
-      color: ${Colors.neutral[30]};
+      color: ${textArea.color.placeholder.normal};
       font-size: 14px;
     }
     &:hover {
-      border-color: ${Colors.neutral[50]};
+      border-color: ${textArea.borderColor.hover};
     }
     &:focus {
       outline: none;
-      border-color: ${Colors.neutral[70]};
+      border-color: ${textArea.borderColor.focus};
       &::placeholder {
-        color: ${theme.textarea.focus};
+        color: ${textArea.color.placeholder.normal};
       }
     }
     &:disabled {
-      color: ${Colors.neutral[30]};
-      border-color: ${Colors.neutral[10]};
+      color: ${textArea.color.disabled};
+      border-color: ${textArea.borderColor.disabled};
       cursor: not-allowed;
     }
     &:read-only {
-      color: ${Colors.neutral[90]};
+      color: ${textArea.color.readOnly};
       border: none;
-      background-color: ${Colors.neutral[5]};
+      background-color: ${textArea.backgroundColor.readOnly};
       &:focus {
         &::placeholder {
-          color: ${Colors.neutral[30]};
+          color: ${textArea.color.placeholder.focus.readOnly};
         }
       }
       cursor: not-allowed;

kafka-ui-react-app/src/components/common/table/Table/Table.styled.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 interface Props {
   isFullwidth?: boolean;
@@ -13,13 +12,13 @@ export const Table = styled.table<Props>`
     font-size: 14px;
     font-weight: 400;
     padding: 8px 8px 8px 24px;
-    color: ${Colors.neutral[90]};
+    color: ${({ theme }) => theme.table.td.color.normal};
     vertical-align: middle;
   }
 
   & tbody > tr {
     &:hover {
-      background-color: ${Colors.neutral[5]};
+      background-color: ${({ theme }) => theme.table.tr.backgroundColor.hover};
     }
   }
 `;

kafka-ui-react-app/src/components/common/table/Table/TableKeyLink.styled.ts

@@ -1,9 +1,8 @@
 import styled from 'styled-components';
-import { Colors } from 'theme/theme';
 
 export const TableKeyLink = styled.td`
   & > a {
-    color: ${Colors.neutral[90]};
+    color: ${({ theme }) => theme.table.link.color};
     font-weight: 500;
     text-overflow: ellipsis;
   }

kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts

@@ -9,7 +9,7 @@ const isOrderableStyles = css`
   cursor: pointer;
 
   &:hover {
-    color: ${(props) => props.theme.thStyles.color.hover};
+    color: ${(props) => props.theme.table.th.color.hover};
   }
 `;
 
@@ -21,11 +21,11 @@ export const Title = styled.span<TitleProps>`
   line-height: 16px;
   letter-spacing: 0em;
   text-align: left;
-  background: ${(props) => props.theme.thStyles.backgroundColor.normal};
+  background: ${(props) => props.theme.table.th.backgroundColor.normal};
   color: ${(props) =>
     props.isOrdered
-      ? props.theme.thStyles.color.active
-      : props.theme.thStyles.color.normal};
+      ? props.theme.table.th.color.active
+      : props.theme.table.th.color.normal};
   cursor: default;
 
   ${(props) => props.isOrderable && isOrderableStyles}
@@ -39,9 +39,9 @@ export const Preview = styled.span`
   line-height: 16px;
   letter-spacing: 0em;
   text-align: left;
-  background: ${(props) => props.theme.thStyles.backgroundColor.normal};
+  background: ${(props) => props.theme.table.th.backgroundColor.normal};
   font-size: 14px;
-  color: ${(props) => props.theme.thStyles.previewColor.normal};
+  color: ${(props) => props.theme.table.th.previewColor.normal};
   cursor: pointer;
 `;
 

kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx

@@ -23,7 +23,7 @@ describe('TableHeaderCell', () => {
       <table>
         <thead>
           <tr>
-            <TableHeaderCell {...props} />
+            <TableHeaderCell {...props} />;
           </tr>
         </thead>
       </table>
@@ -57,7 +57,7 @@ describe('TableHeaderCell', () => {
     expect(title).toBeInTheDocument();
     expect(title).toHaveTextContent(testTitle);
     expect(within(title).getByTitle(sortIconTitle)).toBeInTheDocument();
-    expect(title).toHaveStyle(`color: ${theme.thStyles.color.active};`);
+    expect(title).toHaveStyle(`color: ${theme.table.th.color.active};`);
     expect(title).toHaveStyle('cursor: pointer;');
   });
 
@@ -133,7 +133,7 @@ describe('TableHeaderCell', () => {
     });
     const columnheader = screen.getByRole('columnheader');
     const title = within(columnheader).getByText(testTitle);
-    expect(title).toHaveStyle(`color: ${theme.thStyles.color.active};`);
+    expect(title).toHaveStyle(`color: ${theme.table.th.color.active};`);
   });
 
   it('renders without hightlighted title when orderBy and orderValue are not equal', () => {
@@ -144,7 +144,7 @@ describe('TableHeaderCell', () => {
     });
     const columnheader = screen.getByRole('columnheader');
     const title = within(columnheader).getByText(testTitle);
-    expect(title).toHaveStyle(`color: ${theme.thStyles.color.normal}`);
+    expect(title).toHaveStyle(`color: ${theme.table.th.color.normal}`);
   });
 
   it('renders with default (primary) theme', () => {
@@ -155,7 +155,7 @@ describe('TableHeaderCell', () => {
     const columnheader = screen.getByRole('columnheader');
     const title = within(columnheader).getByText(testTitle);
     expect(title).toHaveStyle(
-      `background: ${theme.thStyles.backgroundColor.normal};`
+      `background: ${theme.table.th.backgroundColor.normal};`
     );
   });
 });

kafka-ui-react-app/src/theme/theme.ts

@@ -60,7 +60,12 @@ const theme = {
     },
   },
   panelColor: Colors.neutral[0],
-  headingStyles: {
+  breadcrumb: Colors.neutral[30],
+  connectEditWarning: Colors.yellow[10],
+  dropdown: {
+    color: Colors.red[50],
+  },
+  heading: {
     h1: {
       color: Colors.neutral[90],
     },
@@ -86,7 +91,7 @@ const theme = {
       info: Colors.neutral[10],
     },
   },
-  buttonStyles: {
+  button: {
     primary: {
       backgroundColor: {
         normal: Colors.brand[50],
@@ -123,8 +128,13 @@ const theme = {
       M: '14px',
       L: '16px',
     },
+    border: {
+      normal: Colors.neutral[50],
+      hover: Colors.neutral[70],
+      active: Colors.neutral[90],
+    },
   },
-  menuStyles: {
+  menu: {
     backgroundColor: {
       normal: Colors.neutral[0],
       hover: Colors.neutral[5],
@@ -141,20 +151,52 @@ const theme = {
     },
     chevronIconColor: Colors.neutral[50],
   },
-  thStyles: {
+  schema: {
     backgroundColor: {
-      normal: Colors.neutral[0],
+      tr: Colors.neutral[5],
+      div: Colors.neutral[0],
     },
-    color: {
-      normal: Colors.neutral[50],
-      hover: Colors.brand[50],
-      active: Colors.brand[50],
+  },
+  modal: {
+    backgroundColor: Colors.neutral[0],
+    border: {
+      top: Colors.neutral[5],
+      bottom: Colors.neutral[5],
+    },
+    overlay: Colors.transparency[10],
+    shadow: Colors.transparency[20],
+  },
+  table: {
+    th: {
+      backgroundColor: {
+        normal: Colors.neutral[0],
+      },
+      color: {
+        normal: Colors.neutral[50],
+        hover: Colors.brand[50],
+        active: Colors.brand[50],
+      },
+      previewColor: {
+        normal: Colors.brand[50],
+      },
+    },
+    td: {
+      color: {
+        normal: Colors.neutral[90],
+      },
+    },
+    tr: {
+      backgroundColor: {
+        hover: Colors.neutral[5],
+      },
     },
-    previewColor: {
-      normal: Colors.brand[50],
+    link: {
+      color: {
+        normal: Colors.neutral[90],
+      },
     },
   },
-  primaryTabStyles: {
+  primaryTab: {
     color: {
       normal: Colors.neutral[50],
       hover: Colors.neutral[90],
@@ -164,9 +206,10 @@ const theme = {
       normal: 'transparent',
       hover: 'transparent',
       active: Colors.brand[50],
+      nav: Colors.neutral[10],
     },
   },
-  secondaryTabStyles: {
+  secondaryTab: {
     backgroundColor: {
       normal: Colors.neutral[0],
       hover: Colors.neutral[5],
@@ -178,7 +221,7 @@ const theme = {
       active: Colors.neutral[90],
     },
   },
-  selectStyles: {
+  select: {
     backgroundColor: {
       normal: Colors.neutral[0],
       hover: Colors.neutral[10],
@@ -197,7 +240,55 @@ const theme = {
       disabled: Colors.neutral[10],
     },
   },
-  tagStyles: {
+  input: {
+    borderColor: {
+      normal: Colors.neutral[30],
+      hover: Colors.neutral[50],
+      focus: Colors.neutral[70],
+      disabled: Colors.neutral[10],
+    },
+    color: {
+      placeholder: {
+        normal: Colors.neutral[30],
+        readOnly: Colors.neutral[30],
+      },
+      disabled: Colors.neutral[30],
+      readOnly: Colors.neutral[90],
+    },
+    backgroundColor: {
+      readOnly: Colors.neutral[5],
+    },
+    error: Colors.red[50],
+    icon: {
+      color: Colors.neutral[70],
+    },
+    label: {
+      color: Colors.neutral[70],
+    },
+  },
+  textArea: {
+    borderColor: {
+      normal: Colors.neutral[30],
+      hover: Colors.neutral[50],
+      focus: Colors.neutral[70],
+      disabled: Colors.neutral[10],
+    },
+    color: {
+      placeholder: {
+        normal: Colors.neutral[30],
+        focus: {
+          normal: 'transparent',
+          readOnly: Colors.neutral[30],
+        },
+      },
+      disabled: Colors.neutral[30],
+      readOnly: Colors.neutral[90],
+    },
+    backgroundColor: {
+      readOnly: Colors.neutral[5],
+    },
+  },
+  tag: {
     backgroundColor: {
       green: Colors.green[10],
       gray: Colors.neutral[5],
@@ -208,7 +299,7 @@ const theme = {
     },
     color: Colors.neutral[90],
   },
-  paginationStyles: {
+  pagination: {
     backgroundColor: Colors.neutral[0],
     currentPage: Colors.neutral[10],
     borderColor: {
@@ -241,6 +332,12 @@ const theme = {
       warningTextColor: Colors.red[50],
       lightTextColor: Colors.neutral[30],
     },
+    filters: {
+      color: {
+        icon: Colors.neutral[90],
+        normal: Colors.neutral[50],
+      },
+    },
   },
   scrollbar: {
     trackColor: {
@@ -252,9 +349,37 @@ const theme = {
       active: Colors.neutral[50],
     },
   },
-  confirmationModal: {
-    overlay: Colors.transparency[10],
-    shadow: Colors.transparency[20],
+  consumerTopicContent: {
+    backgroundColor: Colors.neutral[5],
+  },
+  topicFormLabel: {
+    color: Colors.neutral[50],
+  },
+  topicMetaData: {
+    backgroundColor: Colors.neutral[5],
+    color: {
+      label: Colors.neutral[50],
+      value: Colors.neutral[80],
+      meta: Colors.neutral[30],
+    },
+  },
+  dangerZone: {
+    borderColor: Colors.neutral[10],
+    color: Colors.red[50],
+  },
+  configList: {
+    color: Colors.neutral[30],
+  },
+  topicsList: {
+    color: {
+      normal: Colors.neutral[90],
+      hover: Colors.neutral[50],
+      active: Colors.neutral[90],
+    },
+    backgroundColor: {
+      hover: Colors.neutral[5],
+      active: Colors.neutral[10],
+    },
   },
   icons: {
     closeIcon: Colors.neutral[30],
@@ -269,9 +394,6 @@ const theme = {
   viewer: {
     wrapper: Colors.neutral[3],
   },
-  textarea: {
-    focus: 'transparent',
-  },
 };
 
 export type ThemeType = typeof theme;